Add DK-22210 label printing with barcode and QR code

- Print page formatted for Brother DK-22210 (29mm continuous tape)
- Each label has: title, brand/model, serial, QR code, Code 128 barcode
- CSS @page sized to 29mm width with minimal margins
- Print button opens popup that auto-triggers print dialog
- Copies selector to print multiple labels at once
- Barcode encodes short ID (first 8 chars) scannable by the lookup endpoint
- Available on both device and component detail pages

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/routes/(app)/components/[id]/+page.svelte

@@ -35,8 +35,12 @@
 			</a>
 			<a href="/components/{c.id}/label"
 				class="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700">
-				QR Label
+				Label
 			</a>
+			<button onclick={() => window.open(`/components/${c.id}/print`, '_blank', 'width=400,height=600')}
+				class="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700">
+				Print
+			</button>
 			{#if c.currentDeviceId}
 				<a href="/installations/new?componentId={c.id}&action=removed"
 					class="rounded-md border border-red-300 px-3 py-1.5 text-sm text-red-600 hover:bg-red-50 dark:border-red-700 dark:text-red-400 dark:hover:bg-red-900/20">

src/routes/(app)/components/[id]/print/+page.server.ts

@@ -0,0 +1,31 @@
+import type { PageServerLoad } from './$types';
+import { db } from '$lib/server/db/index.js';
+import { components } from '$lib/server/db/schema.js';
+import { eq } from 'drizzle-orm';
+import { error } from '@sveltejs/kit';
+import { generateQrSvg } from '$lib/server/qr.js';
+import { generateBarcodeSvg } from '$lib/server/barcode.js';
+import { env } from '$env/dynamic/private';
+
+export const load: PageServerLoad = async ({ params }) => {
+	const [component] = await db
+		.select({
+			id: components.id,
+			title: components.title,
+			componentType: components.componentType,
+			brand: components.brand,
+			partNumber: components.partNumber,
+			serialNumber: components.serialNumber
+		})
+		.from(components)
+		.where(eq(components.id, params.id));
+
+	if (!component) error(404, 'Component not found');
+
+	const url = `${env.BASE_URL ?? 'http://localhost:5173'}/components/${params.id}`;
+	const qrSvg = await generateQrSvg(url);
+	const shortId = component.id.slice(0, 8).toUpperCase();
+	const barcodeDataUrl = await generateBarcodeSvg(shortId);
+
+	return { component, qrSvg, barcodeDataUrl, shortId };
+};

src/routes/(app)/components/[id]/print/+page.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	let { data } = $props();
+
+	let copies = $state(1);
+
+	function printNow() {
+		window.print();
+	}
+
+	onMount(() => {
+		if (window.opener) {
+			setTimeout(() => window.print(), 300);
+		}
+	});
+</script>
+
+<svelte:head>
+	<title>Print Label - {data.component.title}</title>
+	<style>
+		@page {
+			size: 29mm auto;
+			margin: 1mm;
+		}
+		@media print {
+			.no-print { display: none !important; }
+			body {
+				margin: 0;
+				padding: 0;
+				background: white !important;
+			}
+			nav, header, aside { display: none !important; }
+			main { padding: 0 !important; overflow: visible !important; }
+			.print-container { break-inside: avoid; }
+		}
+		@media screen {
+			.label-preview {
+				border: 1px dashed #ccc;
+				width: 29mm;
+				background: white;
+			}
+		}
+	</style>
+</svelte:head>
+
+<div class="no-print mx-auto max-w-lg">
+	<div class="mb-4 flex items-center justify-between">
+		<a href="/components/{data.component.id}" class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400">&larr; Back</a>
+		<div class="flex items-center gap-3">
+			<label class="text-sm text-gray-600 dark:text-gray-400">
+				Copies:
+				<input type="number" bind:value={copies} min="1" max="20"
+					class="ml-1 w-14 rounded border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
+			</label>
+			<button onclick={printNow}
+				class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
+				Print
+			</button>
+		</div>
+	</div>
+
+	<div class="mb-2 rounded-md bg-gray-100 p-3 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-400">
+		<strong>Printer setup:</strong> Select your Brother printer, paper size "DK-22210 (29mm)" or "29mm" roll. Set margins to minimum.
+	</div>
+
+	<p class="mb-4 text-sm text-gray-500 dark:text-gray-400">Preview ({copies} label{copies > 1 ? 's' : ''}):</p>
+</div>
+
+{#each Array(copies) as _, i}
+	<div class="print-container label-preview mx-auto mb-2 p-1">
+		<div class="text-center" style="font-family: Arial, Helvetica, sans-serif;">
+			<div style="font-size: 8pt; font-weight: bold; line-height: 1.2; margin-bottom: 1mm;">
+				{data.component.title}
+			</div>
+
+			<div style="font-size: 6pt; color: #555; margin-bottom: 1mm;">
+				{data.component.componentType}
+				{#if data.component.brand}&middot; {data.component.brand}{/if}
+			</div>
+
+			{#if data.component.partNumber}
+				<div style="font-size: 5pt; color: #777; margin-bottom: 1mm;">
+					P/N: {data.component.partNumber}
+				</div>
+			{/if}
+
+			{#if data.component.serialNumber}
+				<div style="font-size: 5pt; color: #777; margin-bottom: 1mm;">
+					S/N: {data.component.serialNumber}
+				</div>
+			{/if}
+
+			<div style="display: flex; justify-content: center; margin-bottom: 1mm;">
+				<div style="width: 18mm; height: 18mm;">
+					{@html data.qrSvg}
+				</div>
+			</div>
+
+			<div style="display: flex; justify-content: center; margin-bottom: 0.5mm;">
+				<img src={data.barcodeDataUrl} alt={data.shortId} style="width: 25mm; height: auto;" />
+			</div>
+		</div>
+	</div>
+{/each}

src/routes/(app)/devices/[id]/+page.svelte

@@ -60,8 +60,12 @@
 			</a>
 			<a href="/devices/{data.device.id}/label"
 				class="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700">
-				QR Label
+				Label
 			</a>
+			<button onclick={() => window.open(`/devices/${data.device.id}/print`, '_blank', 'width=400,height=600')}
+				class="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700">
+				Print
+			</button>
 			<a href="/installations/new?deviceId={data.device.id}"
 				class="rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700">
 				Install Component

src/routes/(app)/devices/[id]/print/+page.server.ts

@@ -0,0 +1,31 @@
+import type { PageServerLoad } from './$types';
+import { db } from '$lib/server/db/index.js';
+import { devices } from '$lib/server/db/schema.js';
+import { eq } from 'drizzle-orm';
+import { error } from '@sveltejs/kit';
+import { generateQrSvg } from '$lib/server/qr.js';
+import { generateBarcodeSvg } from '$lib/server/barcode.js';
+import { env } from '$env/dynamic/private';
+
+export const load: PageServerLoad = async ({ params }) => {
+	const [device] = await db
+		.select({
+			id: devices.id,
+			title: devices.title,
+			brand: devices.brand,
+			model: devices.model,
+			serialNumber: devices.serialNumber,
+			category: devices.category
+		})
+		.from(devices)
+		.where(eq(devices.id, params.id));
+
+	if (!device) error(404, 'Device not found');
+
+	const url = `${env.BASE_URL ?? 'http://localhost:5173'}/devices/${params.id}`;
+	const qrSvg = await generateQrSvg(url);
+	const shortId = device.id.slice(0, 8).toUpperCase();
+	const barcodeDataUrl = await generateBarcodeSvg(shortId);
+
+	return { device, qrSvg, barcodeDataUrl, shortId };
+};

src/routes/(app)/devices/[id]/print/+page.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import { browser } from '$app/environment';
+	import { onMount } from 'svelte';
+
+	let { data } = $props();
+
+	let copies = $state(1);
+
+	function printNow() {
+		window.print();
+	}
+
+	onMount(() => {
+		// Auto-print if opened as popup
+		if (window.opener) {
+			setTimeout(() => window.print(), 300);
+		}
+	});
+</script>
+
+<svelte:head>
+	<title>Print Label - {data.device.title}</title>
+	<style>
+		@page {
+			size: 29mm auto;
+			margin: 1mm;
+		}
+		@media print {
+			.no-print { display: none !important; }
+			body {
+				margin: 0;
+				padding: 0;
+				background: white !important;
+			}
+			nav, header, aside { display: none !important; }
+			main { padding: 0 !important; overflow: visible !important; }
+			.print-container { break-inside: avoid; }
+		}
+		@media screen {
+			.label-preview {
+				border: 1px dashed #ccc;
+				width: 29mm;
+				background: white;
+			}
+		}
+	</style>
+</svelte:head>
+
+<!-- Screen controls -->
+<div class="no-print mx-auto max-w-lg">
+	<div class="mb-4 flex items-center justify-between">
+		<a href="/devices/{data.device.id}" class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400">&larr; Back</a>
+		<div class="flex items-center gap-3">
+			<label class="text-sm text-gray-600 dark:text-gray-400">
+				Copies:
+				<input type="number" bind:value={copies} min="1" max="20"
+					class="ml-1 w-14 rounded border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
+			</label>
+			<button onclick={printNow}
+				class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
+				Print
+			</button>
+		</div>
+	</div>
+
+	<div class="mb-2 rounded-md bg-gray-100 p-3 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-400">
+		<strong>Printer setup:</strong> Select your Brother printer, paper size "DK-22210 (29mm)" or "29mm" roll. Set margins to minimum.
+	</div>
+
+	<p class="mb-4 text-sm text-gray-500 dark:text-gray-400">Preview ({copies} label{copies > 1 ? 's' : ''}):</p>
+</div>
+
+<!-- Labels -->
+{#each Array(copies) as _, i}
+	<div class="print-container label-preview mx-auto mb-2 p-1">
+		<div class="text-center" style="font-family: Arial, Helvetica, sans-serif;">
+			<!-- Title -->
+			<div style="font-size: 8pt; font-weight: bold; line-height: 1.2; margin-bottom: 1mm;">
+				{data.device.title}
+			</div>
+
+			<!-- Brand / Model -->
+			{#if data.device.brand || data.device.model}
+				<div style="font-size: 6pt; color: #555; margin-bottom: 1mm;">
+					{[data.device.brand, data.device.model].filter(Boolean).join(' ')}
+				</div>
+			{/if}
+
+			<!-- Serial -->
+			{#if data.device.serialNumber}
+				<div style="font-size: 5pt; color: #777; margin-bottom: 1mm;">
+					S/N: {data.device.serialNumber}
+				</div>
+			{/if}
+
+			<!-- QR Code -->
+			<div style="display: flex; justify-content: center; margin-bottom: 1mm;">
+				<div style="width: 18mm; height: 18mm;">
+					{@html data.qrSvg}
+				</div>
+			</div>
+
+			<!-- Barcode -->
+			<div style="display: flex; justify-content: center; margin-bottom: 0.5mm;">
+				<img src={data.barcodeDataUrl} alt={data.shortId} style="width: 25mm; height: auto;" />
+			</div>
+		</div>
+	</div>
+{/each}