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>

package-lock.json

@@ -11,6 +11,7 @@
 				"@node-rs/argon2": "^2.0.2",
 				"@oslojs/crypto": "^1.0.1",
 				"@oslojs/encoding": "^1.1.0",
+				"bwip-js": "^4.9.0",
 				"date-fns": "^4.1.0",
 				"dotenv": "^17.4.1",
 				"drizzle-orm": "^0.38.4",
@@ -2649,6 +2650,15 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/bwip-js": {
+			"version": "4.9.0",
+			"resolved": "https://registry.npmjs.org/bwip-js/-/bwip-js-4.9.0.tgz",
+			"integrity": "sha512-U3aWIxR/Px4m3GPd0opQ5GQJq/G8Cj0cr5z5hrcvy/SAApPnfkLqBqjRuB3GiEAasEQup3m7k/MDM/uiS9te8Q==",
+			"license": "MIT",
+			"bin": {
+				"bwip-js": "bin/bwip-js.js"
+			}
+		},
 		"node_modules/camelcase": {
 			"version": "5.3.1",
 			"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",

package.json

@@ -18,6 +18,7 @@
 		"@node-rs/argon2": "^2.0.2",
 		"@oslojs/crypto": "^1.0.1",
 		"@oslojs/encoding": "^1.1.0",
+		"bwip-js": "^4.9.0",
 		"date-fns": "^4.1.0",
 		"dotenv": "^17.4.1",
 		"drizzle-orm": "^0.38.4",

src/lib/server/barcode.ts

@@ -0,0 +1,17 @@
+// @ts-expect-error bwip-js types not resolved by bundler moduleResolution
+import bwipjs from 'bwip-js';
+
+export async function generateBarcodeSvg(text: string): Promise<string> {
+	const buf = await bwipjs.toBuffer({
+		bcid: 'code128',
+		text,
+		scale: 3,
+		height: 8,
+		includetext: true,
+		textsize: 8,
+		textxalign: 'center'
+	});
+
+	// Return as base64 data URL for embedding in HTML
+	return `data:image/png;base64,${buf.toString('base64')}`;
+}

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}