@enadhq/enad-react-sdk 1.0.2 → 1.1.0

package/dist/client/storefront/components/image-lightbox.mjs

@@ -1,275 +1,256 @@
 "use client";
+import { useIcon } from "../../icons/icon-context.mjs";
+import { cn } from "../../ui/utils.mjs";
+import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { TransformWrapper, TransformComponent, useControls } from "react-zoom-pan-pinch";
-import { cn } from "../../ui/utils";
-import { useIcon } from "../../icons/icon-context";
-function ImageLightbox({
-  images,
-  open,
-  onOpenChange,
-  startIndex = 0,
-  showThumbnails = true,
-  className
-}) {
-  const CloseIcon = useIcon("close");
-  const ChevronLeftIcon = useIcon("chevronLeft");
-  const ChevronRightIcon = useIcon("chevronRight");
-  const [activeIndex, setActiveIndex] = React.useState(startIndex);
-  const dialogRef = React.useRef(null);
-  const previousFocusRef = React.useRef(null);
-  React.useEffect(() => {
-    if (open) setActiveIndex(startIndex);
-  }, [open, startIndex]);
-  React.useEffect(() => {
-    if (open) {
-      previousFocusRef.current = document.activeElement;
-      requestAnimationFrame(() => dialogRef.current?.focus());
-    } else if (previousFocusRef.current) {
-      previousFocusRef.current.focus();
-      previousFocusRef.current = null;
-    }
-  }, [open]);
-  React.useEffect(() => {
-    if (!open) return;
-    const prev = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.overflow = prev;
-    };
-  }, [open]);
-  React.useEffect(() => {
-    if (!open) return;
-    const handleKey = (e) => {
-      switch (e.key) {
-        case "Escape":
-          onOpenChange(false);
-          break;
-        case "ArrowLeft":
-          setActiveIndex((i) => i > 0 ? i - 1 : images.length - 1);
-          break;
-        case "ArrowRight":
-          setActiveIndex((i) => i < images.length - 1 ? i + 1 : 0);
-          break;
-        case "Tab": {
-          const dialog = dialogRef.current;
-          if (!dialog) return;
-          const focusable = dialog.querySelectorAll(
-            'button:not([disabled]), [tabindex]:not([tabindex="-1"])'
-          );
-          if (focusable.length === 0) return;
-          const first = focusable[0];
-          const last = focusable[focusable.length - 1];
-          if (e.shiftKey && document.activeElement === first) {
-            e.preventDefault();
-            last.focus();
-          } else if (!e.shiftKey && document.activeElement === last) {
-            e.preventDefault();
-            first.focus();
-          }
-          break;
-        }
-      }
-    };
-    document.addEventListener("keydown", handleKey);
-    return () => document.removeEventListener("keydown", handleKey);
-  }, [open, images.length, onOpenChange]);
-  if (!open || images.length === 0) return null;
-  const active = images[activeIndex];
-  const hasMultiple = images.length > 1;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: dialogRef,
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-label": "Image lightbox",
-      tabIndex: -1,
-      className: cn(
-        "fixed inset-0 z-50 flex flex-col bg-black/95 select-none outline-none",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsxs(
-          TransformWrapper,
-          {
-            initialScale: 1,
-            minScale: 1,
-            maxScale: 5,
-            centerOnInit: true,
-            doubleClick: { mode: "toggle", step: 2 },
-            wheel: { step: 0.15 },
-            panning: { velocityDisabled: true },
-            children: [
-              /* @__PURE__ */ jsx(
-                ZoomToolbar,
-                {
-                  activeIndex,
-                  total: images.length,
-                  onClose: () => onOpenChange(false),
-                  CloseIcon
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { className: "relative flex-1 flex items-center justify-center overflow-hidden", children: [
-                hasMultiple && /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setActiveIndex((i) => i > 0 ? i - 1 : images.length - 1),
-                    className: "absolute left-4 z-10 rounded-full bg-white/10 p-2 text-white hover:bg-white/20 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none",
-                    "aria-label": "Previous image",
-                    children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-6" })
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  TransformComponent,
-                  {
-                    wrapperClass: "!w-full !h-full",
-                    contentClass: "!w-full !h-full !flex !items-center !justify-center",
-                    children: /* @__PURE__ */ jsx(
-                      "img",
-                      {
-                        src: active.src,
-                        alt: active.alt ?? "",
-                        draggable: false,
-                        className: "max-h-[calc(100vh-10rem)] max-w-[calc(100vw-6rem)] object-contain"
-                      }
-                    )
-                  }
-                ),
-                hasMultiple && /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setActiveIndex((i) => i < images.length - 1 ? i + 1 : 0),
-                    className: "absolute right-4 z-10 rounded-full bg-white/10 p-2 text-white hover:bg-white/20 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none",
-                    "aria-label": "Next image",
-                    children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-6" })
-                  }
-                )
-              ] })
-            ]
-          }
-        ),
-        showThumbnails && hasMultiple && /* @__PURE__ */ jsx("div", { className: "flex justify-center gap-2 px-4 py-3 overflow-x-auto", children: images.map((img, i) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => setActiveIndex(i),
-            className: cn(
-              "relative size-14 shrink-0 overflow-hidden rounded border-2 transition-colors",
-              i === activeIndex ? "border-white" : "border-transparent opacity-50 hover:opacity-80"
-            ),
-            children: /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: img.src,
-                alt: img.alt ?? "",
-                loading: "lazy",
-                className: "size-full object-cover"
-              }
-            )
-          },
-          i
-        )) })
-      ]
-    }
-  );
+import { TransformComponent, TransformWrapper, useControls } from "react-zoom-pan-pinch";
+//#region src/client/storefront/components/image-lightbox.tsx
+function ImageLightbox({ images, open, onOpenChange, startIndex = 0, showThumbnails = true, className }) {
+	const CloseIcon = useIcon("close");
+	const ChevronLeftIcon = useIcon("chevronLeft");
+	const ChevronRightIcon = useIcon("chevronRight");
+	const [activeIndex, setActiveIndex] = React$1.useState(startIndex);
+	const dialogRef = React$1.useRef(null);
+	const previousFocusRef = React$1.useRef(null);
+	React$1.useEffect(() => {
+		if (open) setActiveIndex(startIndex);
+	}, [open, startIndex]);
+	React$1.useEffect(() => {
+		if (open) {
+			previousFocusRef.current = document.activeElement;
+			requestAnimationFrame(() => dialogRef.current?.focus());
+		} else if (previousFocusRef.current) {
+			previousFocusRef.current.focus();
+			previousFocusRef.current = null;
+		}
+	}, [open]);
+	React$1.useEffect(() => {
+		if (!open) return;
+		const prev = document.body.style.overflow;
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.body.style.overflow = prev;
+		};
+	}, [open]);
+	React$1.useEffect(() => {
+		if (!open) return;
+		const handleKey = (e) => {
+			switch (e.key) {
+				case "Escape":
+					onOpenChange(false);
+					break;
+				case "ArrowLeft":
+					setActiveIndex((i) => i > 0 ? i - 1 : images.length - 1);
+					break;
+				case "ArrowRight":
+					setActiveIndex((i) => i < images.length - 1 ? i + 1 : 0);
+					break;
+				case "Tab": {
+					const dialog = dialogRef.current;
+					if (!dialog) return;
+					const focusable = dialog.querySelectorAll("button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])");
+					if (focusable.length === 0) return;
+					const first = focusable[0];
+					const last = focusable[focusable.length - 1];
+					if (e.shiftKey && document.activeElement === first) {
+						e.preventDefault();
+						last.focus();
+					} else if (!e.shiftKey && document.activeElement === last) {
+						e.preventDefault();
+						first.focus();
+					}
+					break;
+				}
+			}
+		};
+		document.addEventListener("keydown", handleKey);
+		return () => document.removeEventListener("keydown", handleKey);
+	}, [
+		open,
+		images.length,
+		onOpenChange
+	]);
+	if (!open || images.length === 0) return null;
+	const active = images[activeIndex];
+	const hasMultiple = images.length > 1;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: dialogRef,
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-label": "Image lightbox",
+		tabIndex: -1,
+		className: cn("fixed inset-0 z-50 flex flex-col bg-black/95 select-none outline-none", className),
+		children: [/* @__PURE__ */ jsxs(TransformWrapper, {
+			initialScale: 1,
+			minScale: 1,
+			maxScale: 5,
+			centerOnInit: true,
+			doubleClick: {
+				mode: "toggle",
+				step: 2
+			},
+			wheel: { step: .15 },
+			panning: { velocityDisabled: true },
+			children: [/* @__PURE__ */ jsx(ZoomToolbar, {
+				activeIndex,
+				total: images.length,
+				onClose: () => onOpenChange(false),
+				CloseIcon
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "relative flex-1 flex items-center justify-center overflow-hidden",
+				children: [
+					hasMultiple && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setActiveIndex((i) => i > 0 ? i - 1 : images.length - 1),
+						className: "absolute left-4 z-10 rounded-full bg-white/10 p-2 text-white hover:bg-white/20 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none",
+						"aria-label": "Previous image",
+						children: /* @__PURE__ */ jsx(ChevronLeftIcon, { className: "size-6" })
+					}),
+					/* @__PURE__ */ jsx(TransformComponent, {
+						wrapperClass: "!w-full !h-full",
+						contentClass: "!w-full !h-full !flex !items-center !justify-center",
+						children: /* @__PURE__ */ jsx("img", {
+							src: active.src,
+							alt: active.alt ?? "",
+							draggable: false,
+							className: "max-h-[calc(100vh-10rem)] max-w-[calc(100vw-6rem)] object-contain"
+						})
+					}),
+					hasMultiple && /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setActiveIndex((i) => i < images.length - 1 ? i + 1 : 0),
+						className: "absolute right-4 z-10 rounded-full bg-white/10 p-2 text-white hover:bg-white/20 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none",
+						"aria-label": "Next image",
+						children: /* @__PURE__ */ jsx(ChevronRightIcon, { className: "size-6" })
+					})
+				]
+			})]
+		}), showThumbnails && hasMultiple && /* @__PURE__ */ jsx("div", {
+			className: "flex justify-center gap-2 px-4 py-3 overflow-x-auto",
+			children: images.map((img, i) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => setActiveIndex(i),
+				className: cn("relative size-14 shrink-0 overflow-hidden rounded border-2 transition-colors", i === activeIndex ? "border-white" : "border-transparent opacity-50 hover:opacity-80"),
+				children: /* @__PURE__ */ jsx("img", {
+					src: img.src,
+					alt: img.alt ?? "",
+					loading: "lazy",
+					className: "size-full object-cover"
+				})
+			}, i))
+		})]
+	});
 }
-function ZoomToolbar({
-  activeIndex,
-  total,
-  onClose,
-  CloseIcon
-}) {
-  const { zoomIn, zoomOut, resetTransform } = useControls();
-  const prevIndex = React.useRef(activeIndex);
-  React.useEffect(() => {
-    if (prevIndex.current !== activeIndex) {
-      resetTransform(0);
-      prevIndex.current = activeIndex;
-    }
-  }, [activeIndex, resetTransform]);
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 text-white/80", children: [
-    /* @__PURE__ */ jsxs("span", { className: "text-sm tabular-nums", children: [
-      activeIndex + 1,
-      " / ",
-      total
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => zoomIn(),
-          className: "rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none",
-          "aria-label": "Zoom in",
-          children: /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              className: "size-5",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              children: [
-                /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
-                /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
-                /* @__PURE__ */ jsx("line", { x1: "11", y1: "8", x2: "11", y2: "14" }),
-                /* @__PURE__ */ jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
-              ]
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => zoomOut(),
-          className: "rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none",
-          "aria-label": "Zoom out",
-          children: /* @__PURE__ */ jsxs(
-            "svg",
-            {
-              className: "size-5",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              children: [
-                /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
-                /* @__PURE__ */ jsx("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" }),
-                /* @__PURE__ */ jsx("line", { x1: "8", y1: "11", x2: "14", y2: "11" })
-              ]
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => resetTransform(),
-          className: "rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none text-xs font-medium",
-          "aria-label": "Reset zoom",
-          children: "1:1"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onClose,
-          className: "rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none",
-          "aria-label": "Close lightbox",
-          children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-5" })
-        }
-      )
-    ] })
-  ] });
+function ZoomToolbar({ activeIndex, total, onClose, CloseIcon }) {
+	const { zoomIn, zoomOut, resetTransform } = useControls();
+	const prevIndex = React$1.useRef(activeIndex);
+	React$1.useEffect(() => {
+		if (prevIndex.current !== activeIndex) {
+			resetTransform(0);
+			prevIndex.current = activeIndex;
+		}
+	}, [activeIndex, resetTransform]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between px-4 py-3 text-white/80",
+		children: [/* @__PURE__ */ jsxs("span", {
+			className: "text-sm tabular-nums",
+			children: [
+				activeIndex + 1,
+				" / ",
+				total
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => zoomIn(),
+					className: "rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none",
+					"aria-label": "Zoom in",
+					children: /* @__PURE__ */ jsxs("svg", {
+						className: "size-5",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						children: [
+							/* @__PURE__ */ jsx("circle", {
+								cx: "11",
+								cy: "11",
+								r: "8"
+							}),
+							/* @__PURE__ */ jsx("line", {
+								x1: "21",
+								y1: "21",
+								x2: "16.65",
+								y2: "16.65"
+							}),
+							/* @__PURE__ */ jsx("line", {
+								x1: "11",
+								y1: "8",
+								x2: "11",
+								y2: "14"
+							}),
+							/* @__PURE__ */ jsx("line", {
+								x1: "8",
+								y1: "11",
+								x2: "14",
+								y2: "11"
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => zoomOut(),
+					className: "rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none",
+					"aria-label": "Zoom out",
+					children: /* @__PURE__ */ jsxs("svg", {
+						className: "size-5",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						children: [
+							/* @__PURE__ */ jsx("circle", {
+								cx: "11",
+								cy: "11",
+								r: "8"
+							}),
+							/* @__PURE__ */ jsx("line", {
+								x1: "21",
+								y1: "21",
+								x2: "16.65",
+								y2: "16.65"
+							}),
+							/* @__PURE__ */ jsx("line", {
+								x1: "8",
+								y1: "11",
+								x2: "14",
+								y2: "11"
+							})
+						]
+					})
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: () => resetTransform(),
+					className: "rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none text-xs font-medium",
+					"aria-label": "Reset zoom",
+					children: "1:1"
+				}),
+				/* @__PURE__ */ jsx("button", {
+					type: "button",
+					onClick: onClose,
+					className: "rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none",
+					"aria-label": "Close lightbox",
+					children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-5" })
+				})
+			]
+		})]
+	});
 }
-export {
-  ImageLightbox
-};
+//#endregion
+export { ImageLightbox };
+
 //# sourceMappingURL=image-lightbox.mjs.map

package/dist/client/storefront/components/image-lightbox.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/client/storefront/components/image-lightbox.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { TransformWrapper, TransformComponent, useControls } from \"react-zoom-pan-pinch\";\nimport { cn } from \"../../ui/utils\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport type { ImageAsset } from \"../types\";\n\n/* ─── Types ─── */\n\nexport interface ImageLightboxProps {\n  images: ImageAsset[];\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** Starting image index */\n  startIndex?: number;\n  /** Show thumbnail strip */\n  showThumbnails?: boolean;\n  className?: string;\n}\n\n/* ─── Component ─── */\n\nexport function ImageLightbox({\n  images,\n  open,\n  onOpenChange,\n  startIndex = 0,\n  showThumbnails = true,\n  className,\n}: ImageLightboxProps) {\n  const CloseIcon = useIcon(\"close\");\n  const ChevronLeftIcon = useIcon(\"chevronLeft\");\n  const ChevronRightIcon = useIcon(\"chevronRight\");\n\n  const [activeIndex, setActiveIndex] = React.useState(startIndex);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  const previousFocusRef = React.useRef<HTMLElement | null>(null);\n\n  React.useEffect(() => {\n    if (open) setActiveIndex(startIndex);\n  }, [open, startIndex]);\n\n  // Focus management: capture trigger, restore on close\n  React.useEffect(() => {\n    if (open) {\n      previousFocusRef.current = document.activeElement as HTMLElement | null;\n      requestAnimationFrame(() => dialogRef.current?.focus());\n    } else if (previousFocusRef.current) {\n      previousFocusRef.current.focus();\n      previousFocusRef.current = null;\n    }\n  }, [open]);\n\n  // Lock body scroll when open\n  React.useEffect(() => {\n    if (!open) return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, [open]);\n\n  // Keyboard navigation + focus trap\n  React.useEffect(() => {\n    if (!open) return;\n    const handleKey = (e: KeyboardEvent) => {\n      switch (e.key) {\n        case \"Escape\":\n          onOpenChange(false);\n          break;\n        case \"ArrowLeft\":\n          setActiveIndex((i) => (i > 0 ? i - 1 : images.length - 1));\n          break;\n        case \"ArrowRight\":\n          setActiveIndex((i) => (i < images.length - 1 ? i + 1 : 0));\n          break;\n        case \"Tab\": {\n          const dialog = dialogRef.current;\n          if (!dialog) return;\n          const focusable = dialog.querySelectorAll<HTMLElement>(\n            'button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])',\n          );\n          if (focusable.length === 0) return;\n          const first = focusable[0]!;\n          const last = focusable[focusable.length - 1]!;\n          if (e.shiftKey && document.activeElement === first) {\n            e.preventDefault();\n            last.focus();\n          } else if (!e.shiftKey && document.activeElement === last) {\n            e.preventDefault();\n            first.focus();\n          }\n          break;\n        }\n      }\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [open, images.length, onOpenChange]);\n\n  if (!open || images.length === 0) return null;\n\n  const active = images[activeIndex]!;\n  const hasMultiple = images.length > 1;\n\n  return (\n    <div\n      ref={dialogRef}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Image lightbox\"\n      tabIndex={-1}\n      className={cn(\n        \"fixed inset-0 z-50 flex flex-col bg-black/95 select-none outline-none\",\n        className,\n      )}\n    >\n      <TransformWrapper\n        initialScale={1}\n        minScale={1}\n        maxScale={5}\n        centerOnInit\n        doubleClick={{ mode: \"toggle\", step: 2 }}\n        wheel={{ step: 0.15 }}\n        panning={{ velocityDisabled: true }}\n      >\n        {/* Toolbar */}\n        <ZoomToolbar\n          activeIndex={activeIndex}\n          total={images.length}\n          onClose={() => onOpenChange(false)}\n          CloseIcon={CloseIcon}\n        />\n\n        {/* Main image area */}\n        <div className=\"relative flex-1 flex items-center justify-center overflow-hidden\">\n          {hasMultiple && (\n            <button\n              type=\"button\"\n              onClick={() => setActiveIndex((i) => (i > 0 ? i - 1 : images.length - 1))}\n              className=\"absolute left-4 z-10 rounded-full bg-white/10 p-2 text-white hover:bg-white/20 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none\"\n              aria-label=\"Previous image\"\n            >\n              <ChevronLeftIcon className=\"size-6\" />\n            </button>\n          )}\n\n          <TransformComponent\n            wrapperClass=\"!w-full !h-full\"\n            contentClass=\"!w-full !h-full !flex !items-center !justify-center\"\n          >\n            <img\n              src={active.src}\n              alt={active.alt ?? \"\"}\n              draggable={false}\n              className=\"max-h-[calc(100vh-10rem)] max-w-[calc(100vw-6rem)] object-contain\"\n            />\n          </TransformComponent>\n\n          {hasMultiple && (\n            <button\n              type=\"button\"\n              onClick={() => setActiveIndex((i) => (i < images.length - 1 ? i + 1 : 0))}\n              className=\"absolute right-4 z-10 rounded-full bg-white/10 p-2 text-white hover:bg-white/20 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none\"\n              aria-label=\"Next image\"\n            >\n              <ChevronRightIcon className=\"size-6\" />\n            </button>\n          )}\n        </div>\n      </TransformWrapper>\n\n      {/* Thumbnails */}\n      {showThumbnails && hasMultiple && (\n        <div className=\"flex justify-center gap-2 px-4 py-3 overflow-x-auto\">\n          {images.map((img, i) => (\n            <button\n              key={i}\n              type=\"button\"\n              onClick={() => setActiveIndex(i)}\n              className={cn(\n                \"relative size-14 shrink-0 overflow-hidden rounded border-2 transition-colors\",\n                i === activeIndex\n                  ? \"border-white\"\n                  : \"border-transparent opacity-50 hover:opacity-80\",\n              )}\n            >\n              <img\n                src={img.src}\n                alt={img.alt ?? \"\"}\n                loading=\"lazy\"\n                className=\"size-full object-cover\"\n              />\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/* ─── Zoom toolbar (uses useControls from the library) ─── */\n\nfunction ZoomToolbar({\n  activeIndex,\n  total,\n  onClose,\n  CloseIcon,\n}: {\n  activeIndex: number;\n  total: number;\n  onClose: () => void;\n  CloseIcon: React.ComponentType<{ className?: string }>;\n}) {\n  const { zoomIn, zoomOut, resetTransform } = useControls();\n\n  // Reset zoom when switching images (avoids full TransformWrapper remount)\n  const prevIndex = React.useRef(activeIndex);\n  React.useEffect(() => {\n    if (prevIndex.current !== activeIndex) {\n      resetTransform(0);\n      prevIndex.current = activeIndex;\n    }\n  }, [activeIndex, resetTransform]);\n\n  return (\n    <div className=\"flex items-center justify-between px-4 py-3 text-white/80\">\n      <span className=\"text-sm tabular-nums\">\n        {activeIndex + 1} / {total}\n      </span>\n      <div className=\"flex items-center gap-2\">\n        <button\n          type=\"button\"\n          onClick={() => zoomIn()}\n          className=\"rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none\"\n          aria-label=\"Zoom in\"\n        >\n          <svg\n            className=\"size-5\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n          >\n            <circle cx=\"11\" cy=\"11\" r=\"8\" />\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n            <line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\" />\n            <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\" />\n          </svg>\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => zoomOut()}\n          className=\"rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none\"\n          aria-label=\"Zoom out\"\n        >\n          <svg\n            className=\"size-5\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n          >\n            <circle cx=\"11\" cy=\"11\" r=\"8\" />\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n            <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\" />\n          </svg>\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => resetTransform()}\n          className=\"rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none text-xs font-medium\"\n          aria-label=\"Reset zoom\"\n        >\n          1:1\n        </button>\n        <button\n          type=\"button\"\n          onClick={onClose}\n          className=\"rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none\"\n          aria-label=\"Close lightbox\"\n        >\n          <CloseIcon className=\"size-5\" />\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"file":"image-lightbox.mjs","names":["React"],"sources":["../../../../src/client/storefront/components/image-lightbox.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { TransformWrapper, TransformComponent, useControls } from \"react-zoom-pan-pinch\";\nimport { cn } from \"../../ui/utils\";\nimport { useIcon } from \"../../icons/icon-context\";\nimport type { ImageAsset } from \"../types\";\n\n/* ─── Types ─── */\n\nexport interface ImageLightboxProps {\n  images: ImageAsset[];\n  open: boolean;\n  onOpenChange: (open: boolean) => void;\n  /** Starting image index */\n  startIndex?: number;\n  /** Show thumbnail strip */\n  showThumbnails?: boolean;\n  className?: string;\n}\n\n/* ─── Component ─── */\n\nexport function ImageLightbox({\n  images,\n  open,\n  onOpenChange,\n  startIndex = 0,\n  showThumbnails = true,\n  className,\n}: ImageLightboxProps) {\n  const CloseIcon = useIcon(\"close\");\n  const ChevronLeftIcon = useIcon(\"chevronLeft\");\n  const ChevronRightIcon = useIcon(\"chevronRight\");\n\n  const [activeIndex, setActiveIndex] = React.useState(startIndex);\n  const dialogRef = React.useRef<HTMLDivElement>(null);\n  const previousFocusRef = React.useRef<HTMLElement | null>(null);\n\n  React.useEffect(() => {\n    if (open) setActiveIndex(startIndex);\n  }, [open, startIndex]);\n\n  // Focus management: capture trigger, restore on close\n  React.useEffect(() => {\n    if (open) {\n      previousFocusRef.current = document.activeElement as HTMLElement | null;\n      requestAnimationFrame(() => dialogRef.current?.focus());\n    } else if (previousFocusRef.current) {\n      previousFocusRef.current.focus();\n      previousFocusRef.current = null;\n    }\n  }, [open]);\n\n  // Lock body scroll when open\n  React.useEffect(() => {\n    if (!open) return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = \"hidden\";\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, [open]);\n\n  // Keyboard navigation + focus trap\n  React.useEffect(() => {\n    if (!open) return;\n    const handleKey = (e: KeyboardEvent) => {\n      switch (e.key) {\n        case \"Escape\":\n          onOpenChange(false);\n          break;\n        case \"ArrowLeft\":\n          setActiveIndex((i) => (i > 0 ? i - 1 : images.length - 1));\n          break;\n        case \"ArrowRight\":\n          setActiveIndex((i) => (i < images.length - 1 ? i + 1 : 0));\n          break;\n        case \"Tab\": {\n          const dialog = dialogRef.current;\n          if (!dialog) return;\n          const focusable = dialog.querySelectorAll<HTMLElement>(\n            'button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])',\n          );\n          if (focusable.length === 0) return;\n          const first = focusable[0]!;\n          const last = focusable[focusable.length - 1]!;\n          if (e.shiftKey && document.activeElement === first) {\n            e.preventDefault();\n            last.focus();\n          } else if (!e.shiftKey && document.activeElement === last) {\n            e.preventDefault();\n            first.focus();\n          }\n          break;\n        }\n      }\n    };\n    document.addEventListener(\"keydown\", handleKey);\n    return () => document.removeEventListener(\"keydown\", handleKey);\n  }, [open, images.length, onOpenChange]);\n\n  if (!open || images.length === 0) return null;\n\n  const active = images[activeIndex]!;\n  const hasMultiple = images.length > 1;\n\n  return (\n    <div\n      ref={dialogRef}\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-label=\"Image lightbox\"\n      tabIndex={-1}\n      className={cn(\n        \"fixed inset-0 z-50 flex flex-col bg-black/95 select-none outline-none\",\n        className,\n      )}\n    >\n      <TransformWrapper\n        initialScale={1}\n        minScale={1}\n        maxScale={5}\n        centerOnInit\n        doubleClick={{ mode: \"toggle\", step: 2 }}\n        wheel={{ step: 0.15 }}\n        panning={{ velocityDisabled: true }}\n      >\n        {/* Toolbar */}\n        <ZoomToolbar\n          activeIndex={activeIndex}\n          total={images.length}\n          onClose={() => onOpenChange(false)}\n          CloseIcon={CloseIcon}\n        />\n\n        {/* Main image area */}\n        <div className=\"relative flex-1 flex items-center justify-center overflow-hidden\">\n          {hasMultiple && (\n            <button\n              type=\"button\"\n              onClick={() => setActiveIndex((i) => (i > 0 ? i - 1 : images.length - 1))}\n              className=\"absolute left-4 z-10 rounded-full bg-white/10 p-2 text-white hover:bg-white/20 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none\"\n              aria-label=\"Previous image\"\n            >\n              <ChevronLeftIcon className=\"size-6\" />\n            </button>\n          )}\n\n          <TransformComponent\n            wrapperClass=\"!w-full !h-full\"\n            contentClass=\"!w-full !h-full !flex !items-center !justify-center\"\n          >\n            <img\n              src={active.src}\n              alt={active.alt ?? \"\"}\n              draggable={false}\n              className=\"max-h-[calc(100vh-10rem)] max-w-[calc(100vw-6rem)] object-contain\"\n            />\n          </TransformComponent>\n\n          {hasMultiple && (\n            <button\n              type=\"button\"\n              onClick={() => setActiveIndex((i) => (i < images.length - 1 ? i + 1 : 0))}\n              className=\"absolute right-4 z-10 rounded-full bg-white/10 p-2 text-white hover:bg-white/20 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none\"\n              aria-label=\"Next image\"\n            >\n              <ChevronRightIcon className=\"size-6\" />\n            </button>\n          )}\n        </div>\n      </TransformWrapper>\n\n      {/* Thumbnails */}\n      {showThumbnails && hasMultiple && (\n        <div className=\"flex justify-center gap-2 px-4 py-3 overflow-x-auto\">\n          {images.map((img, i) => (\n            <button\n              key={i}\n              type=\"button\"\n              onClick={() => setActiveIndex(i)}\n              className={cn(\n                \"relative size-14 shrink-0 overflow-hidden rounded border-2 transition-colors\",\n                i === activeIndex\n                  ? \"border-white\"\n                  : \"border-transparent opacity-50 hover:opacity-80\",\n              )}\n            >\n              <img\n                src={img.src}\n                alt={img.alt ?? \"\"}\n                loading=\"lazy\"\n                className=\"size-full object-cover\"\n              />\n            </button>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\n/* ─── Zoom toolbar (uses useControls from the library) ─── */\n\nfunction ZoomToolbar({\n  activeIndex,\n  total,\n  onClose,\n  CloseIcon,\n}: {\n  activeIndex: number;\n  total: number;\n  onClose: () => void;\n  CloseIcon: React.ComponentType<{ className?: string }>;\n}) {\n  const { zoomIn, zoomOut, resetTransform } = useControls();\n\n  // Reset zoom when switching images (avoids full TransformWrapper remount)\n  const prevIndex = React.useRef(activeIndex);\n  React.useEffect(() => {\n    if (prevIndex.current !== activeIndex) {\n      resetTransform(0);\n      prevIndex.current = activeIndex;\n    }\n  }, [activeIndex, resetTransform]);\n\n  return (\n    <div className=\"flex items-center justify-between px-4 py-3 text-white/80\">\n      <span className=\"text-sm tabular-nums\">\n        {activeIndex + 1} / {total}\n      </span>\n      <div className=\"flex items-center gap-2\">\n        <button\n          type=\"button\"\n          onClick={() => zoomIn()}\n          className=\"rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none\"\n          aria-label=\"Zoom in\"\n        >\n          <svg\n            className=\"size-5\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n          >\n            <circle cx=\"11\" cy=\"11\" r=\"8\" />\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n            <line x1=\"11\" y1=\"8\" x2=\"11\" y2=\"14\" />\n            <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\" />\n          </svg>\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => zoomOut()}\n          className=\"rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none\"\n          aria-label=\"Zoom out\"\n        >\n          <svg\n            className=\"size-5\"\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n          >\n            <circle cx=\"11\" cy=\"11\" r=\"8\" />\n            <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n            <line x1=\"8\" y1=\"11\" x2=\"14\" y2=\"11\" />\n          </svg>\n        </button>\n        <button\n          type=\"button\"\n          onClick={() => resetTransform()}\n          className=\"rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none text-xs font-medium\"\n          aria-label=\"Reset zoom\"\n        >\n          1:1\n        </button>\n        <button\n          type=\"button\"\n          onClick={onClose}\n          className=\"rounded p-1.5 hover:bg-white/10 transition-colors focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:outline-none\"\n          aria-label=\"Close lightbox\"\n        >\n          <CloseIcon className=\"size-5\" />\n        </button>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}