From 6f8ddcca819dc668430405599b651a20c1f5c07f Mon Sep 17 00:00:00 2001
From: xCyanGrizzly <sam.agsteribbe@hotmail.com>
Date: Mon, 22 Jun 2026 04:17:42 +0200
Subject: [PATCH] feat(stls): add reusable ImageLightbox for full-size preview
 viewing

Radix Dialog-based lightbox (Esc / overlay / close button to dismiss),
image shown object-contain capped to the viewport. No new dependencies.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 .../(app)/stls/_components/image-lightbox.tsx | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/app/(app)/stls/_components/image-lightbox.tsx

diff --git a/src/app/(app)/stls/_components/image-lightbox.tsx b/src/app/(app)/stls/_components/image-lightbox.tsx
new file mode 100644
index 0000000..cb909dc
--- /dev/null
+++ b/src/app/(app)/stls/_components/image-lightbox.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from "@/components/ui/dialog";
+
+interface ImageLightboxProps {
+  src: string | null;
+  alt?: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+/**
+ * Full-size, in-page preview viewer. Renders the image at native size capped
+ * to the viewport (object-contain). Dismiss via the close button, Esc, or by
+ * clicking the overlay.
+ */
+export function ImageLightbox({
+  src,
+  alt = "",
+  open,
+  onOpenChange,
+}: ImageLightboxProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-auto max-w-[95vw] border-0 bg-transparent p-0 shadow-none sm:max-w-[90vw]">
+        <DialogTitle className="sr-only">Enlarged preview image</DialogTitle>
+        {src && (
+          <img
+            src={src}
+            alt={alt}
+            className="mx-auto max-h-[88vh] w-auto max-w-full rounded-lg object-contain"
+          />
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}