Add image lightbox: click any image to view full-screen

Reusable ImageLightbox component with dark overlay, close on
click/Escape, zoom-in cursor on thumbnails. Applied to both
device and component detail pages.

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

src/lib/components/ui/ImageLightbox.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	interface Props {
+		src: string;
+		alt?: string;
+		onclose: () => void;
+	}
+
+	let { src, alt = '', onclose }: Props = $props();
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') onclose();
+	}
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/80" onclick={onclose}>
+	<button onclick={onclose}
+		class="absolute top-4 right-4 rounded-full bg-black/50 p-2 text-white hover:bg-black/70" aria-label="Close">
+		<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+		</svg>
+	</button>
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<img {src} {alt} class="max-h-[90vh] max-w-[90vw] rounded-lg object-contain shadow-2xl" onclick={(e) => e.stopPropagation()} />
+</div>