@snowcone-app/ui 0.2.6 → 0.3.0

package/dist/index.cjs

@@ -235,6 +235,8 @@ __export(src_exports, {
   Link: () => Link,
   LinkIcon: () => LinkIcon,
   LoadingOverlayPrism: () => LoadingOverlayPrism,
+  LoadingOverlayPrismCandy: () => LoadingOverlayPrismCandy,
+  LoadingOverlayPrismCandyInline: () => LoadingOverlayPrismCandyInline,
   MasonryGrid: () => MasonryGrid,
   MobileProductCarousel: () => MobileProductCarousel,
   MockupPriorityProvider: () => MockupPriorityProvider,
@@ -376,7 +378,7 @@ __export(src_exports, {
   useProductSelection: () => useProductSelection,
   useProviderStatus: () => useProviderStatus,
   useRealtime: () => useRealtime,
-  useRealtimeMockup: () => import_react68.useRealtimeMockup,
+  useRealtimeMockup: () => import_react69.useRealtimeMockup,
   useRealtimeOptional: () => useRealtimeOptional,
   useRenderCount: () => useRenderCount,
   useRenderGuard: () => useRenderGuard,
@@ -9014,12 +9016,333 @@ function useLoadingOverlay(isLoading) {
   };
 }
 
+// src/components/LoadingOverlayPrismCandy.tsx
+var import_react40 = require("react");
+var import_react_dom2 = require("react-dom");
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var BANDS = [
+  { rgb: "230, 45, 55", delay: "-0.0s" },
+  // red
+  { rgb: "250, 125, 30", delay: "-0.3s" },
+  // orange
+  { rgb: "244, 215, 60", delay: "-0.6s" },
+  // yellow
+  { rgb: "110, 200, 70", delay: "-0.9s" },
+  // green
+  { rgb: "65, 145, 205", delay: "-1.2s" },
+  // blue
+  { rgb: "140, 90, 175", delay: "-1.5s" }
+  // purple
+];
+function generateParticles2() {
+  return Array.from({ length: 10 }, () => ({
+    left: 2 + Math.random() * 96,
+    top: 2 + Math.random() * 96,
+    delay: (Math.random() * 3.5).toFixed(1),
+    duration: (3 + Math.random() * 2).toFixed(1),
+    size: 3 + Math.random() * 5
+  }));
+}
+var PLATE_ALPHA = 0.1;
+var BAND_ALPHA = 0.55;
+var FADE_IN_MS2 = 600;
+var FADE_OUT_MS2 = 400;
+var STYLES2 = `
+/* Registered custom properties \u2014 required for the browser to interpolate
+   them across a CSS transition / animation. Without @property, value
+   changes snap rather than animate. */
+@property --candy-mount {
+  syntax: "<number>";
+  initial-value: 0;
+  inherits: true;
+}
+/* Per-band sweep-fade. Animated by the keyframes below to scale the band
+   rgba alpha 0 \u2192 1 \u2192 1 \u2192 0 across a sweep cycle. Lives on .candy-band
+   only (not inherited), so each band has its own animated value. */
+@property --band-alpha {
+  syntax: "<number>";
+  initial-value: 0;
+  inherits: false;
+}
+
+.candy-loading-overlay {
+  --candy-mount: 0;
+  overflow: hidden;
+  background-color: rgba(255, 255, 255, calc(${PLATE_ALPHA} * var(--candy-mount)));
+  transition: --candy-mount ${FADE_IN_MS2}ms ease-in,
+              background-color ${FADE_IN_MS2}ms ease-in;
+}
+.candy-loading-overlay.candy-fade-in  { --candy-mount: 1; }
+.candy-loading-overlay.candy-fade-out {
+  --candy-mount: 0;
+  transition: --candy-mount ${FADE_OUT_MS2}ms ease-out,
+              background-color ${FADE_OUT_MS2}ms ease-out;
+}
+
+.candy-band {
+  --band-alpha: 0;
+  position: absolute;
+  width: 220%; height: 30%;
+  left: -60%;
+  mix-blend-mode: screen;
+  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 35%, black 65%, transparent 100%);
+          mask-image: linear-gradient(180deg, transparent 0%, black 35%, black 65%, transparent 100%);
+  animation-timing-function: ease-in-out;
+  animation-iteration-count: infinite;
+  animation-duration: 6s;
+}
+${BANDS.map((b, i) => {
+  const top = -5 + i * 16;
+  const direction = i % 2 === 0 ? "ltr" : "rtl";
+  return `.candy-band:nth-child(${i + 1}) { top: ${top}%; background: linear-gradient(90deg, transparent 0%, rgba(${b.rgb}, calc(${BAND_ALPHA} * var(--candy-mount) * var(--band-alpha) * var(--band-strength, 1))) 30%, rgba(${b.rgb}, calc(${BAND_ALPHA} * var(--candy-mount) * var(--band-alpha) * var(--band-strength, 1))) 70%, transparent 100%); animation-name: candy-sweep-${direction}; animation-delay: ${b.delay}; }`;
+}).join("\n")}
+@keyframes candy-sweep-ltr {
+  0%   { transform: translateX(-45%) rotate(-6deg); --band-alpha: 0; }
+  25%  { --band-alpha: 1; }
+  50%  { transform: translateX(0%)   rotate(-6deg); }
+  75%  { --band-alpha: 1; }
+  100% { transform: translateX(45%)  rotate(-6deg); --band-alpha: 0; }
+}
+@keyframes candy-sweep-rtl {
+  0%   { transform: translateX(45%)  rotate(-6deg); --band-alpha: 0; }
+  25%  { --band-alpha: 1; }
+  50%  { transform: translateX(0%)   rotate(-6deg); }
+  75%  { --band-alpha: 1; }
+  100% { transform: translateX(-45%) rotate(-6deg); --band-alpha: 0; }
+}
+
+.candy-particle {
+  position: absolute; border-radius: 50%;
+  /* Particle background and glow alphas also scale with --candy-mount so
+     the sparkles fade with the rest of the overlay. */
+  background: rgba(255, 255, 255, calc(1 * var(--candy-mount)));
+  box-shadow: 0 0 8px rgba(255, 255, 255, calc(0.85 * var(--candy-mount)));
+  opacity: 0;
+  animation: candy-sparkle infinite ease-in-out;
+}
+@keyframes candy-sparkle {
+  0%   { opacity: 0;   transform: scale(0);   }
+  15%  { opacity: 0.7; transform: scale(1.4); }
+  30%  { opacity: 0.4; transform: scale(0.6); }
+  55%  { opacity: 1;   transform: scale(2);   }
+  75%  { opacity: 0.5; transform: scale(0.9); }
+  100% { opacity: 0;   transform: scale(0);   }
+}
+
+/* Light-backdrop variant. The default bands screen-blend \u2014 vivid on a dark
+   stage, but they wash out to nothing over white (screen over white = white).
+   On a light card we multiply-blend instead, so each band tints the backdrop
+   toward its hue (jewel/pastel rainbow rather than neon). The sparkle particles
+   stay white in both variants \u2014 they read as snow, and the white glow keeps
+   them legible over the multiply rainbow bands. */
+.candy-on-light .candy-band { mix-blend-mode: multiply; }
+/* Opaque light stage baked into the overlay so it fades in/out as one unit
+   with the bands \u2014 matching the PDP hero's smooth crossfade \u2014 instead of a
+   hard backdrop on the parent that snaps on/off. The alpha scales with
+   --candy-mount (overriding the default 0.1 white plate), so it rides the
+   same candy-fade-in / candy-fade-out transition the bands do. The bands
+   multiply-blend against this opaque stage to read as the candy rainbow.
+   #f5f5f5 = the site page background (defaults.css --color-background), kept
+   as a fixed hex (not the token, which would flip dark in dark mode and break
+   the multiply blend) so the loader sits flush with the surrounding page. */
+.candy-on-light {
+  background-color: rgba(245, 245, 245, calc(1 * var(--candy-mount)));
+  /* Half the band opacity on the light stage \u2014 multiply-blended bands read
+     stronger on light gray than the screen-blended ones do on the dark PDP
+     stage, so dial them back to ~50%. Inherits down to .candy-band; the dark
+     default leaves --band-strength at its 1 fallback, untouched. */
+  --band-strength: 0.5;
+}
+
+`;
+var stylesInjected2 = false;
+function ensureStyles2() {
+  if (stylesInjected2 || typeof document === "undefined") return;
+  if (typeof CSS !== "undefined" && typeof CSS.registerProperty === "function") {
+    try {
+      CSS.registerProperty({
+        name: "--candy-mount",
+        syntax: "<number>",
+        initialValue: "0",
+        inherits: true
+      });
+    } catch {
+    }
+    try {
+      CSS.registerProperty({
+        name: "--band-alpha",
+        syntax: "<number>",
+        initialValue: "0",
+        inherits: false
+      });
+    } catch {
+    }
+  }
+  const s = document.createElement("style");
+  s.textContent = STYLES2;
+  document.head.appendChild(s);
+  stylesInjected2 = true;
+}
+function CandyVisual({
+  fadeClass,
+  style,
+  onTransitionEnd,
+  variantClass = ""
+}) {
+  const [particles, setParticles] = (0, import_react40.useState)([]);
+  (0, import_react40.useEffect)(() => {
+    setParticles(generateParticles2());
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+    "div",
+    {
+      className: `candy-loading-overlay ${variantClass} ${fadeClass}`.trim(),
+      style,
+      onTransitionEnd,
+      children: [
+        BANDS.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "candy-band" }, `b-${i}`)),
+        particles.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+          "div",
+          {
+            className: "candy-particle",
+            style: {
+              left: `${p.left}%`,
+              top: `${p.top}%`,
+              animationDelay: `${p.delay}s`,
+              animationDuration: `${p.duration}s`,
+              width: `${p.size}px`,
+              height: `${p.size}px`
+            }
+          },
+          `p-${i}`
+        ))
+      ]
+    }
+  );
+}
+var LoadingOverlayPrismCandy = (0, import_react40.memo)(function LoadingOverlayPrismCandy2({
+  visible = true,
+  onExited
+}) {
+  ensureStyles2();
+  const anchorRef = (0, import_react40.useRef)(null);
+  const [bounds, setBounds] = (0, import_react40.useState)(null);
+  const [mounted, setMounted] = (0, import_react40.useState)(false);
+  const measure = (0, import_react40.useCallback)(() => {
+    const el = anchorRef.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    setBounds({
+      top: r.top + window.scrollY,
+      left: r.left + window.scrollX,
+      width: r.width,
+      height: r.height
+    });
+  }, []);
+  (0, import_react40.useLayoutEffect)(() => {
+    measure();
+    window.addEventListener("resize", measure);
+    let ro = null;
+    if (typeof ResizeObserver !== "undefined" && anchorRef.current) {
+      ro = new ResizeObserver(measure);
+      ro.observe(anchorRef.current);
+    }
+    return () => {
+      window.removeEventListener("resize", measure);
+      ro?.disconnect();
+    };
+  }, [measure]);
+  (0, import_react40.useEffect)(() => {
+    const raf = requestAnimationFrame(() => setMounted(true));
+    return () => cancelAnimationFrame(raf);
+  }, []);
+  const handleTransitionEnd = (0, import_react40.useCallback)(
+    (e) => {
+      if (e.propertyName !== "background-color") return;
+      if (!visible) onExited?.();
+    },
+    [visible, onExited]
+  );
+  let fadeClass = "";
+  if (!visible) fadeClass = "candy-fade-out";
+  else if (mounted) fadeClass = "candy-fade-in";
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      "div",
+      {
+        ref: anchorRef,
+        style: {
+          position: "absolute",
+          inset: 0,
+          pointerEvents: "none"
+        },
+        "aria-hidden": "true"
+      }
+    ),
+    bounds && typeof document !== "undefined" && (0, import_react_dom2.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        CandyVisual,
+        {
+          fadeClass,
+          style: {
+            position: "absolute",
+            top: bounds.top,
+            left: bounds.left,
+            width: bounds.width,
+            height: bounds.height,
+            pointerEvents: "none"
+          },
+          onTransitionEnd: handleTransitionEnd
+        }
+      ),
+      document.body
+    )
+  ] });
+});
+var LoadingOverlayPrismCandyInline = (0, import_react40.memo)(
+  function LoadingOverlayPrismCandyInline2({
+    visible = true,
+    onExited,
+    variant = "dark"
+  }) {
+    ensureStyles2();
+    const [mounted, setMounted] = (0, import_react40.useState)(false);
+    (0, import_react40.useEffect)(() => {
+      const raf = requestAnimationFrame(() => setMounted(true));
+      return () => cancelAnimationFrame(raf);
+    }, []);
+    const handleTransitionEnd = (0, import_react40.useCallback)(
+      (e) => {
+        if (e.propertyName !== "background-color") return;
+        if (!visible) onExited?.();
+      },
+      [visible, onExited]
+    );
+    let fadeClass = "";
+    if (!visible) fadeClass = "candy-fade-out";
+    else if (mounted) fadeClass = "candy-fade-in";
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      CandyVisual,
+      {
+        fadeClass,
+        variantClass: variant === "light" ? "candy-on-light" : "",
+        style: {
+          position: "absolute",
+          inset: 0,
+          pointerEvents: "none"
+        },
+        onTransitionEnd: handleTransitionEnd
+      }
+    );
+  }
+);
+
 // src/index.ts
-var import_react68 = require("@snowcone-app/sdk/react");
+var import_react69 = require("@snowcone-app/sdk/react");
 var import_sdk11 = require("@snowcone-app/sdk");
 
 // src/patterns/ProductPageProvider.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function ProductPageProvider({
   children,
   productId,
@@ -9033,12 +9356,12 @@ function ProductPageProvider({
   realtimeGrantUrl,
   enablePriority = true
 }) {
-  let content = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Product, { productId, productData, children });
+  let content = /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Product, { productId, productData, children });
   if (enablePriority) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(MockupPriorityProvider, { children: content });
+    content = /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(MockupPriorityProvider, { children: content });
   }
   if (enableRealtime) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    content = /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       RealtimeProvider,
       {
         wsUrl: realtimeWsUrl,
@@ -9048,7 +9371,7 @@ function ProductPageProvider({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     Shop,
     {
       endpoint,
@@ -9068,23 +9391,23 @@ function ProductPageProviderMinimal({
   shop,
   initialArtwork
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     Shop,
     {
       endpoint,
       mockupUrl,
       shop,
       initialArtwork,
-      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Product, { productId, productData, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Product, { productId, productData, children })
     }
   );
 }
 
 // src/composed/ArtAlignment.tsx
-var import_react40 = require("react");
-var import_react41 = require("@use-gesture/react");
+var import_react41 = require("react");
+var import_react42 = require("@use-gesture/react");
 var import_sdk9 = require("@snowcone-app/sdk");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function ArtAlignment({
   src: propSrc,
   artworkAspectRatio: propAspectRatio,
@@ -9118,16 +9441,16 @@ function ArtAlignment({
       selection: {}
     };
   }
-  const containerRef = (0, import_react40.useRef)(null);
-  const imageRef = (0, import_react40.useRef)(null);
-  const lastUserDragTimeRef = (0, import_react40.useRef)(0);
-  const [containerSize, setContainerSize] = (0, import_react40.useState)({ width: 0, height: 0 });
-  const [position, setPosition] = (0, import_react40.useState)({ x: 0, y: 0 });
-  const [isReady, setIsReady] = (0, import_react40.useState)(false);
-  const [detectedAspectRatio, setDetectedAspectRatio] = (0, import_react40.useState)();
+  const containerRef = (0, import_react41.useRef)(null);
+  const imageRef = (0, import_react41.useRef)(null);
+  const lastUserDragTimeRef = (0, import_react41.useRef)(0);
+  const [containerSize, setContainerSize] = (0, import_react41.useState)({ width: 0, height: 0 });
+  const [position, setPosition] = (0, import_react41.useState)({ x: 0, y: 0 });
+  const [isReady, setIsReady] = (0, import_react41.useState)(false);
+  const [detectedAspectRatio, setDetectedAspectRatio] = (0, import_react41.useState)();
   const effectiveAspectRatio = artworkAspectRatio || detectedAspectRatio;
   const alignment = placementDesign?.alignment || propAlignment || "center";
-  const descriptor = (0, import_react40.useMemo)(
+  const descriptor = (0, import_react41.useMemo)(
     () => (0, import_sdk9.describeProductArtAlignment)(
       {
         src,
@@ -9149,7 +9472,7 @@ function ArtAlignment({
       productContext
     ]
   );
-  const containerStyle = (0, import_react40.useMemo)(() => {
+  const containerStyle = (0, import_react41.useMemo)(() => {
     const style = {};
     if (height !== void 0) {
       const heightValue = typeof height === "number" ? height : parseFloat(height);
@@ -9180,7 +9503,7 @@ function ArtAlignment({
     }
     return style;
   }, [effectiveAspectRatio, height, maxHeight, minHeight]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!containerRef.current) return;
     const resizeObserver = new ResizeObserver((entries) => {
       const entry = entries[0];
@@ -9206,7 +9529,7 @@ function ArtAlignment({
       }
     }
   };
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (!imageRef.current || !descriptor) return;
     if (imageRef.current.complete) {
       setIsReady(true);
@@ -9231,7 +9554,7 @@ function ArtAlignment({
       img.removeEventListener("load", handleLoad);
     };
   }, [descriptor?.src, artworkAspectRatio]);
-  const maskDimensions = (0, import_react40.useMemo)(() => {
+  const maskDimensions = (0, import_react41.useMemo)(() => {
     if (!isReady || containerSize.width === 0 || !descriptor) {
       return { width: 0, height: 0 };
     }
@@ -9246,14 +9569,14 @@ function ArtAlignment({
     descriptor?.effectiveAlignment,
     isReady
   ]);
-  const clipPathCoords = (0, import_react40.useMemo)(() => {
+  const clipPathCoords = (0, import_react41.useMemo)(() => {
     const halfMaskW = maskDimensions.width / 2;
     const halfMaskH = maskDimensions.height / 2;
     const halfContainerW = containerSize.width / 2;
     const halfContainerH = containerSize.height / 2;
     return { halfMaskW, halfMaskH, halfContainerW, halfContainerH };
   }, [maskDimensions.width, maskDimensions.height, containerSize.width, containerSize.height]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (Date.now() - lastUserDragTimeRef.current < 500) return;
     if (!isReady || maskDimensions.width === 0 || !descriptor) return;
     const points = (0, import_sdk9.getSnapPoints)(
@@ -9275,7 +9598,7 @@ function ArtAlignment({
     maskDimensions.height,
     isReady
   ]);
-  const overlayStyle = (0, import_react40.useMemo)(() => {
+  const overlayStyle = (0, import_react41.useMemo)(() => {
     const { halfMaskW, halfMaskH, halfContainerW, halfContainerH } = clipPathCoords;
     const cx = position.x + halfContainerW;
     const cy = position.y + halfContainerH;
@@ -9296,7 +9619,7 @@ function ArtAlignment({
       clipPath: isReady ? `polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, ${right}px ${bottom}px, ${right}px ${top}px, ${left}px ${top}px, ${left}px ${bottom}px, ${right}px ${bottom}px)` : "none"
     };
   }, [isReady, position.x, position.y, clipPathCoords]);
-  const maskStyle = (0, import_react40.useMemo)(() => ({
+  const maskStyle = (0, import_react41.useMemo)(() => ({
     width: `${maskDimensions.width}px`,
     height: `${maskDimensions.height}px`,
     boxShadow: `0 0 0 2px var(--color-background), 0 0 0 4px var(--color-primary)`,
@@ -9311,7 +9634,7 @@ function ArtAlignment({
     // GPU acceleration for smoother drag
     borderRadius: "var(--radius-image, 4px)"
   }), [maskDimensions.width, maskDimensions.height]);
-  const clearImageClipPath = (0, import_react40.useMemo)(() => {
+  const clearImageClipPath = (0, import_react41.useMemo)(() => {
     if (!isReady) return "none";
     const { halfMaskW, halfMaskH, halfContainerW, halfContainerH } = clipPathCoords;
     const cx = position.x + halfContainerW;
@@ -9322,14 +9645,14 @@ function ArtAlignment({
     const top = cy - halfMaskH;
     return `polygon(${left}px ${top}px, ${right}px ${top}px, ${right}px ${bottom}px, ${left}px ${bottom}px)`;
   }, [isReady, position.x, position.y, clipPathCoords]);
-  const maskTransform = (0, import_react40.useMemo)(() => {
+  const maskTransform = (0, import_react41.useMemo)(() => {
     return descriptor?.effectiveAlignment === "horizontal" ? `translate(calc(-50% + ${position.x}px), -50%)` : `translate(-50%, calc(-50% + ${position.y}px))`;
   }, [descriptor?.effectiveAlignment, position.x, position.y]);
-  const lastContextUpdateTimeRef = (0, import_react40.useRef)(0);
-  const pendingAlignmentRef = (0, import_react40.useRef)(null);
-  const throttleTimeoutRef = (0, import_react40.useRef)(null);
+  const lastContextUpdateTimeRef = (0, import_react41.useRef)(0);
+  const pendingAlignmentRef = (0, import_react41.useRef)(null);
+  const throttleTimeoutRef = (0, import_react41.useRef)(null);
   const THROTTLE_MS = 150;
-  const bind = (0, import_react41.useDrag)(
+  const bind = (0, import_react42.useDrag)(
     ({ offset: [ox, oy], last }) => {
       if (maskDimensions.width === 0 || maskDimensions.height === 0 || !descriptor) {
         return;
@@ -9422,7 +9745,7 @@ function ArtAlignment({
   if (!descriptor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     "div",
     {
       className: `relative ${className || ""}`,
@@ -9431,8 +9754,8 @@ function ArtAlignment({
         width: "fit-content",
         maxWidth: "100%"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "overflow-hidden p-1", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { ref: containerRef, className: "relative", style: containerStyle, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "overflow-hidden p-1", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { ref: containerRef, className: "relative", style: containerStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           "img",
           {
             ref: imageRef,
@@ -9457,9 +9780,9 @@ function ArtAlignment({
             loading: "eager"
           }
         ),
-        isReady && maskDimensions.width > 0 && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { style: overlayStyle }),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        isReady && maskDimensions.width > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { style: overlayStyle }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             "img",
             {
               src: descriptor.src,
@@ -9487,7 +9810,7 @@ function ArtAlignment({
               loading: "eager"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             "div",
             {
               ...bind(),
@@ -9504,8 +9827,8 @@ function ArtAlignment({
 }
 
 // src/composed/ArtworkCustomizer.tsx
-var import_react42 = require("react");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_react43 = require("react");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function ArtworkCustomizer(props) {
   const designContext = useDesign();
   const artwork = props.artwork || designContext.selectedArtwork;
@@ -9517,7 +9840,7 @@ function ArtworkCustomizer(props) {
   const placements = productCtx?.product?.placements || [];
   const selectedPlacement = productCtx?.selectedPlacement;
   const setSelectedPlacement = productCtx?.setSelectedPlacement;
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     if (placements.length > 0 && !selectedPlacement && setSelectedPlacement) {
       setSelectedPlacement(placements[0].label);
     }
@@ -9527,13 +9850,13 @@ function ArtworkCustomizer(props) {
   );
   const isColorPlacement = currentPlacement?.type === "color";
   const isFitMode = currentPlacement?.defaultScaleMode === "fit";
-  (0, import_react42.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
   }, [selectedPlacement]);
   if (!artwork) {
-    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: `text-sm text-muted-foreground ${props.className || ""}`, children: "Select artwork to customize" });
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `text-sm text-muted-foreground ${props.className || ""}`, children: "Select artwork to customize" });
   }
   if (artwork.type === "pattern") {
-    return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       TileCount,
       {
         artwork,
@@ -9544,8 +9867,8 @@ function ArtworkCustomizer(props) {
     );
   }
   const isCanvasEditorMode = props.mode === "canvas" || !!props.children && props.mode !== "alignment";
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-col gap-4", children: [
-    placements.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "text-sm leading-relaxed", children: placements.map((p) => /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-col gap-4", children: [
+    placements.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "text-sm leading-relaxed", children: placements.map((p) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       "button",
       {
         onClick: () => setSelectedPlacement?.(p.label),
@@ -9554,7 +9877,7 @@ function ArtworkCustomizer(props) {
       },
       p.label
     )) }),
-    isColorPlacement ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ColorPicker2, { placement: selectedPlacement }) : isFitMode ? null : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "relative", children: props.children || /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    isColorPlacement ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ColorPicker2, { placement: selectedPlacement }) : isFitMode ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "relative", children: props.children || /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       ArtAlignment,
       {
         artwork: { src: artwork.src },
@@ -9570,7 +9893,7 @@ function ArtworkCustomizer(props) {
 
 // src/composed/CanvasEditor.tsx
 var import_lucide_react2 = require("lucide-react");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var ImageIcon = import_lucide_react2.Image;
 var TypeIcon = import_lucide_react2.Type;
 var ShapesIcon = import_lucide_react2.Shapes;
@@ -9581,43 +9904,43 @@ function CanvasEditor({
   onOpenTypography,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-col gap-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "bg-background border-2 border-border rounded-lg aspect-square overflow-hidden relative", children: children || /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "flex items-center justify-center w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "text-muted-foreground text-sm", children: "No editor provided" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex items-center justify-center gap-8 py-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "bg-background border-2 border-border rounded-lg aspect-square overflow-hidden relative", children: children || /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex items-center justify-center w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-muted-foreground text-sm", children: "No editor provided" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center justify-center gap-8 py-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         "button",
         {
           onClick: onOpenImageGallery,
           className: "flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors",
           "aria-label": "Open image gallery",
-          children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ImageIcon, { className: "w-6 h-6" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ImageIcon, { className: "w-6 h-6" }) })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
         "button",
         {
           onClick: onOpenTypography,
           className: "flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors",
           "aria-label": "Add text",
-          children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(TypeIcon, { className: "w-6 h-6" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TypeIcon, { className: "w-6 h-6" }) })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("button", { className: "flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ShapesIcon, { className: "w-6 h-6" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("button", { className: "flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(UploadIcon, { className: "w-6 h-6" }) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("button", { className: "flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ShapesIcon, { className: "w-6 h-6" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("button", { className: "flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(UploadIcon, { className: "w-6 h-6" }) }) })
     ] })
   ] });
 }
 
 // src/composed/HeroProductImage.tsx
-var import_react44 = require("react");
+var import_react45 = require("react");
 var import_sdk10 = require("@snowcone-app/sdk");
 
 // src/hooks/viewport/useContainerWidth.ts
-var import_react43 = require("react");
+var import_react44 = require("react");
 function useContainerWidth(containerRef, maxWidth = 3e3) {
-  const [width, setWidth] = (0, import_react43.useState)(0);
-  const resizeTimeoutRef = (0, import_react43.useRef)(null);
-  (0, import_react43.useLayoutEffect)(() => {
+  const [width, setWidth] = (0, import_react44.useState)(0);
+  const resizeTimeoutRef = (0, import_react44.useRef)(null);
+  (0, import_react44.useLayoutEffect)(() => {
     const el = containerRef.current;
     if (!el) return;
     const cssWidth = el.offsetWidth;
@@ -9625,7 +9948,7 @@ function useContainerWidth(containerRef, maxWidth = 3e3) {
     const dpr = window.devicePixelRatio ?? 1;
     setWidth(Math.min(Math.round(cssWidth * dpr), maxWidth));
   }, [containerRef, maxWidth]);
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     const measure = () => {
       const el = containerRef.current;
       if (!el) return;
@@ -9648,7 +9971,7 @@ function useContainerWidth(containerRef, maxWidth = 3e3) {
 }
 
 // src/composed/HeroProductImage.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 function slugifyPlacementKey(label) {
   return label.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
 }
@@ -9686,7 +10009,7 @@ function buildHeroMockupUrl(args) {
   });
 }
 var EMPTY_IMAGES = [];
-var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
+var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
   productId,
   mockupId,
   variantId,
@@ -9719,24 +10042,24 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
   const shopContext = useShopOptional();
   const realtimeContext = useRealtimeOptional();
   const priorityContext = useMockupPriorityOptional();
-  const priorityContextRef = (0, import_react44.useRef)(priorityContext);
+  const priorityContextRef = (0, import_react45.useRef)(priorityContext);
   priorityContextRef.current = priorityContext;
-  const contextRef = (0, import_react44.useRef)(context);
+  const contextRef = (0, import_react45.useRef)(context);
   contextRef.current = context;
   const actualProductId = product?.id || productId || context?.product?.id;
-  const actualGvid = (0, import_react44.useMemo)(() => {
+  const actualGvid = (0, import_react45.useMemo)(() => {
     return (0, import_sdk10.resolveVariantId)(context, gvid, variantId);
   }, [gvid, variantId, context?.selection, context?.combinations]);
-  const actualMockupId = (0, import_react44.useMemo)(() => {
+  const actualMockupId = (0, import_react45.useMemo)(() => {
     return (0, import_sdk10.resolveMockupId)(context, actualGvid, mockupId);
   }, [mockupId, actualGvid, context]);
   const artworkSrc = artwork?.src;
   const selectedArtworkSrc = designContext?.selectedArtwork?.src;
   const effectiveArtworkSrc = artworkSrc || selectedArtworkSrc;
-  const containerRef = (0, import_react44.useRef)(null);
+  const containerRef = (0, import_react45.useRef)(null);
   const measuredWidth = useContainerWidth(containerRef);
   const width = widthProp ?? measuredWidth;
-  const initialStaticUrl = (0, import_react44.useMemo)(() => {
+  const initialStaticUrl = (0, import_react45.useMemo)(() => {
     if (realtimeUrl) return null;
     if (mode === "realtime") return null;
     if (typeof window !== "undefined" && window.snowcone?.signMockupUrl) {
@@ -9802,28 +10125,28 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
     shimmerDelay,
     initialUrl: realtimeUrl || initialStaticUrl
   });
-  const [error, setError] = (0, import_react44.useState)(null);
-  const [isInPreloadZone, setIsInPreloadZone] = (0, import_react44.useState)(true);
-  const componentIdRef = (0, import_react44.useRef)(
+  const [error, setError] = (0, import_react45.useState)(null);
+  const [isInPreloadZone, setIsInPreloadZone] = (0, import_react45.useState)(true);
+  const componentIdRef = (0, import_react45.useRef)(
     `hero-product-image-${Math.random().toString(36).substr(2, 9)}`
   );
-  const [containerMounted, setContainerMounted] = (0, import_react44.useState)(false);
-  const setContainerRef = (0, import_react44.useCallback)((node) => {
+  const [containerMounted, setContainerMounted] = (0, import_react45.useState)(false);
+  const setContainerRef = (0, import_react45.useCallback)((node) => {
     containerRef.current = node;
     setContainerMounted(!!node);
   }, []);
-  const lastUrlRef = (0, import_react44.useRef)(realtimeUrl ?? initialStaticUrl ?? null);
-  const priorityRegisteredRef = (0, import_react44.useRef)(false);
-  const onLoadCalledRef = (0, import_react44.useRef)(false);
-  const prevArtworkSrcRef = (0, import_react44.useRef)(void 0);
-  const realtimeArtworkSrcRef = (0, import_react44.useRef)(void 0);
-  const hasReceivedRealtimeRef = (0, import_react44.useRef)(false);
-  const isPendingExportRef = (0, import_react44.useRef)(false);
-  const onUrlGeneratedRef = (0, import_react44.useRef)(onUrlGenerated);
+  const lastUrlRef = (0, import_react45.useRef)(realtimeUrl ?? initialStaticUrl ?? null);
+  const priorityRegisteredRef = (0, import_react45.useRef)(false);
+  const onLoadCalledRef = (0, import_react45.useRef)(false);
+  const prevArtworkSrcRef = (0, import_react45.useRef)(void 0);
+  const realtimeArtworkSrcRef = (0, import_react45.useRef)(void 0);
+  const hasReceivedRealtimeRef = (0, import_react45.useRef)(false);
+  const isPendingExportRef = (0, import_react45.useRef)(false);
+  const onUrlGeneratedRef = (0, import_react45.useRef)(onUrlGenerated);
   onUrlGeneratedRef.current = onUrlGenerated;
-  const layersLengthRef = (0, import_react44.useRef)(layers.length);
+  const layersLengthRef = (0, import_react45.useRef)(layers.length);
   layersLengthRef.current = layers.length;
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (initialPriority === 1) return;
     if (!containerMounted || !containerRef.current) return;
     if (isInPreloadZone) return;
@@ -9842,7 +10165,7 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
     );
     return unobserve;
   }, [containerMounted, initialPriority, isInPreloadZone]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (!realtimeUrl) return;
     if (realtimeUrl === lastUrlRef.current) return;
     lastUrlRef.current = realtimeUrl;
@@ -9850,7 +10173,7 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
     const isInitialLoad = layersLengthRef.current === 0;
     addLayerDirectly(realtimeUrl, { skipTransition: isInitialLoad });
   }, [realtimeUrl, addLayerDirectly, actualMockupId, placement]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (mode === "static") {
       return;
     }
@@ -9894,7 +10217,7 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
     addLayerDirectly
     // NOTE: layers.length removed - use layersLengthRef instead to prevent duplicate requests
   ]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (mode === "static") return;
     if (!realtimeContext?.subscribePendingBlob || !placement) return;
     const handlePendingExport = (pendingPlacement) => {
@@ -9907,7 +10230,7 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
       unsubscribe?.();
     };
   }, [mode, realtimeContext?.subscribePendingBlob, placement]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (!priorityContext || !actualMockupId || !placement) return;
     priorityContext.registerMockup(actualMockupId, placement, initialPriority);
     priorityRegisteredRef.current = true;
@@ -9918,7 +10241,7 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
       }
     };
   }, [priorityContext, actualMockupId, placement, initialPriority]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (!priorityContext?.updateElementRef || !actualMockupId) return;
     if (containerMounted && containerRef.current) {
       priorityContext.updateElementRef(actualMockupId, containerRef.current);
@@ -9932,7 +10255,7 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
   const artworkTileCount = artwork?.type === "pattern" ? artwork?.tileCount : void 0;
   const selectedArtworkType = designContext?.selectedArtwork?.type;
   const selectedArtworkTileCount = designContext?.selectedArtwork?.type === "pattern" ? designContext?.selectedArtwork?.tileCount : void 0;
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     const currentSrc = artworkSrc || selectedArtworkSrc;
     if (currentSrc !== prevArtworkSrcRef.current) {
       lastUrlRef.current = null;
@@ -9942,11 +10265,11 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
       realtimeArtworkSrcRef.current = void 0;
     }
   }, [artworkSrc, selectedArtworkSrc]);
-  const contextSelectionRef = (0, import_react44.useRef)(context?.selection);
-  const contextOptionAttributesRef = (0, import_react44.useRef)(context?.optionAttributes);
+  const contextSelectionRef = (0, import_react45.useRef)(context?.selection);
+  const contextOptionAttributesRef = (0, import_react45.useRef)(context?.optionAttributes);
   contextSelectionRef.current = context?.selection;
   contextOptionAttributesRef.current = context?.optionAttributes;
-  const createDesignForPlacementsWrapper = (0, import_react44.useCallback)(
+  const createDesignForPlacementsWrapper = (0, import_react45.useCallback)(
     (placements, providedImages) => {
       const effectiveArtworkSrc2 = artworkSrc || selectedArtworkSrc;
       if (!effectiveArtworkSrc2 || effectiveArtworkSrc2.trim() === "" || effectiveArtworkSrc2 === "undefined" || effectiveArtworkSrc2 === "null") {
@@ -9985,7 +10308,7 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
       selectedArtworkTileCount
     ]
   );
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     if (mode === "realtime") return;
     if (initialStaticUrl && lastUrlRef.current === initialStaticUrl) {
       return;
@@ -10085,13 +10408,13 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
   const topLayer = layers[layers.length - 1];
   const displayUrl = topLayer?.url || realtimeUrl || initialStaticUrl;
   const CROSSFADE_MS = 400;
-  const [prevUrl, setPrevUrl] = (0, import_react44.useState)(null);
-  const [showNew, setShowNew] = (0, import_react44.useState)(false);
-  const [renderedUrl, setRenderedUrl] = (0, import_react44.useState)(displayUrl);
-  const [firstImageLoaded, setFirstImageLoaded] = (0, import_react44.useState)(false);
-  const prevDisplayUrlRef = (0, import_react44.useRef)(displayUrl);
-  const signHintShownRef = (0, import_react44.useRef)(false);
-  (0, import_react44.useEffect)(() => {
+  const [prevUrl, setPrevUrl] = (0, import_react45.useState)(null);
+  const [showNew, setShowNew] = (0, import_react45.useState)(false);
+  const [renderedUrl, setRenderedUrl] = (0, import_react45.useState)(displayUrl);
+  const [firstImageLoaded, setFirstImageLoaded] = (0, import_react45.useState)(false);
+  const prevDisplayUrlRef = (0, import_react45.useRef)(displayUrl);
+  const signHintShownRef = (0, import_react45.useRef)(false);
+  (0, import_react45.useEffect)(() => {
     if (!displayUrl || displayUrl === prevDisplayUrlRef.current) return;
     const oldUrl = prevDisplayUrlRef.current;
     prevDisplayUrlRef.current = displayUrl;
@@ -10116,25 +10439,25 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
       preload.onload = null;
     };
   }, [displayUrl]);
-  const handleCrossfadeEnd = (0, import_react44.useCallback)(() => {
+  const handleCrossfadeEnd = (0, import_react45.useCallback)(() => {
     setPrevUrl(null);
     setShowNew(false);
   }, []);
   if (!hasArtwork) {
-    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       "div",
       {
         className: `bg-gray-100 flex items-center justify-center ${className || ""}`,
         style,
-        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "text-gray-400 text-center p-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "text-gray-400 text-center p-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             "svg",
             {
               className: "w-8 h-8 mx-auto mb-2",
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
-              children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                 "path",
                 {
                   strokeLinecap: "round",
@@ -10145,22 +10468,22 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "text-xs", children: "No artwork" })
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "text-xs", children: "No artwork" })
         ] })
       }
     );
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
       "div",
       {
         className: `bg-red-50 flex items-center justify-center ${className || ""}`,
         style,
-        children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-red-600 text-center p-4", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("p", { className: "text-xs", children: "Error loading" }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "text-red-600 text-center p-4", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "text-xs", children: "Error loading" }) })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
     "div",
     {
       ref: setContainerRef,
@@ -10168,8 +10491,8 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
       style,
       "data-hero-image": "true",
       children: [
-        !firstImageLoaded && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "absolute inset-0 bg-muted-foreground/20 animate-pulse" }),
-        renderedUrl && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        !firstImageLoaded && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "absolute inset-0 bg-muted-foreground/20 animate-pulse" }),
+        renderedUrl && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           "img",
           {
             alt: `Product mockup${placement ? ` - ${placement}` : ""}`,
@@ -10201,7 +10524,7 @@ var HeroProductImage = (0, import_react44.memo)(function HeroProductImage2({
             }
           }
         ),
-        prevUrl && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+        prevUrl && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
           "img",
           {
             alt: "",
@@ -10241,11 +10564,11 @@ var { searchClient } = (0, import_instant_meilisearch.instantMeiliSearch)(
 );
 
 // src/composed/search/SearchProvider.tsx
-var import_react45 = require("react");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_react46 = require("react");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function InitialSearchTrigger() {
   const { refine } = (0, import_react_instantsearch.useSearchBox)();
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     refine("");
   }, [refine]);
   return null;
@@ -10269,7 +10592,7 @@ function SearchProvider({
   ],
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     import_react_instantsearch.InstantSearch,
     {
       searchClient,
@@ -10297,7 +10620,7 @@ function SearchProvider({
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           import_react_instantsearch.Configure,
           {
             hitsPerPage,
@@ -10306,7 +10629,7 @@ function SearchProvider({
             attributesToRetrieve
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(InitialSearchTrigger, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(InitialSearchTrigger, {}),
         children
       ]
     }
@@ -10316,17 +10639,17 @@ function SearchProvider({
 // src/composed/search/SearchBox.tsx
 var import_react_instantsearch2 = require("react-instantsearch");
 var import_lucide_react3 = require("lucide-react");
-var import_react46 = require("react");
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_react47 = require("react");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function SearchBox() {
   const { query, refine, clear } = (0, import_react_instantsearch2.useSearchBox)();
   const searchParams = useUiSearchParams();
   const router = useUiRouter();
-  const inputRef = (0, import_react46.useRef)(null);
-  const [showShimmer, setShowShimmer] = (0, import_react46.useState)(false);
+  const inputRef = (0, import_react47.useRef)(null);
+  const [showShimmer, setShowShimmer] = (0, import_react47.useState)(false);
   const inputId = "search-products-input";
   const descriptionId = "search-description";
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     const handleSpotlight = () => {
       inputRef.current?.focus();
       inputRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
@@ -10336,7 +10659,7 @@ function SearchBox() {
     window.addEventListener("search-spotlight", handleSpotlight);
     return () => window.removeEventListener("search-spotlight", handleSpotlight);
   }, []);
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     const shouldFocus = searchParams.get("focus") === "search";
     if (shouldFocus && inputRef.current) {
       const timer = setTimeout(() => {
@@ -10351,8 +10674,8 @@ function SearchBox() {
       return () => clearTimeout(timer);
     }
   }, [searchParams, router]);
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("form", { role: "search", onSubmit: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("form", { role: "search", onSubmit: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       Input,
       {
         ref: inputRef,
@@ -10361,15 +10684,15 @@ function SearchBox() {
         value: query,
         onChange: (e) => refine(e.target.value),
         placeholder: "Search products...",
-        startContent: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react3.Search, { className: "w-5 h-5", strokeWidth: 1.5, "aria-hidden": "true" }),
-        endContent: query ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        startContent: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react3.Search, { className: "w-5 h-5", strokeWidth: 1.5, "aria-hidden": "true" }),
+        endContent: query ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
           "button",
           {
             type: "button",
             onClick: clear,
             className: "hover:text-foreground transition-colors",
             "aria-label": "Clear search",
-            children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react3.X, { className: "w-4 h-4", strokeWidth: 2, "aria-hidden": "true" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_lucide_react3.X, { className: "w-4 h-4", strokeWidth: 2, "aria-hidden": "true" })
           }
         ) : void 0,
         "aria-label": "Search products",
@@ -10379,11 +10702,11 @@ function SearchBox() {
         className: "[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden"
       }
     ),
-    showShimmer && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    showShimmer && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       "div",
       {
         className: "absolute inset-0 pointer-events-none rounded-input z-20 overflow-hidden",
-        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
           "div",
           {
             className: "absolute inset-0",
@@ -10396,13 +10719,13 @@ function SearchBox() {
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("style", { dangerouslySetInnerHTML: { __html: `
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("style", { dangerouslySetInnerHTML: { __html: `
           @keyframes searchShimmer {
             0% { transform: translateX(-100%); }
             100% { transform: translateX(100%); }
           }
         ` } }),
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { id: descriptionId, className: "sr-only", children: "Search results will update as you type" })
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { id: descriptionId, className: "sr-only", children: "Search results will update as you type" })
   ] }) });
 }
 
@@ -10410,7 +10733,7 @@ function SearchBox() {
 var import_react_instantsearch3 = require("react-instantsearch");
 
 // src/composed/search/ProductHit.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function ProductHitComponent({
   hit: product,
   variant = "overlay"
@@ -10427,12 +10750,12 @@ function ProductHitComponent({
     }
     return "";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     Product,
     {
       productId,
       productData: product,
-      children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
         ProductCard,
         {
           variant,
@@ -10453,10 +10776,10 @@ function ProductHitComponent({
 }
 
 // src/composed/search/ProductGrid.tsx
-var import_react47 = require("react");
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_react48 = require("react");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 function ProductGridSkeletonItem() {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "aspect-square bg-muted animate-pulse" });
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "aspect-square bg-muted animate-pulse" });
 }
 function ProductGrid({
   className = "",
@@ -10466,26 +10789,26 @@ function ProductGrid({
 }) {
   const { nbHits } = (0, import_react_instantsearch3.useStats)();
   const { status, results } = (0, import_react_instantsearch3.useInstantSearch)();
-  const [announcement, setAnnouncement] = (0, import_react47.useState)("");
+  const [announcement, setAnnouncement] = (0, import_react48.useState)("");
   const hitsCount = results?.hits?.length ?? 0;
   const showSkeleton = hitsCount === 0 && status !== "error";
-  (0, import_react47.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     const timer = setTimeout(() => {
       setAnnouncement(`${nbHits} ${nbHits === 1 ? "product" : "products"} found`);
     }, 1e3);
     return () => clearTimeout(timer);
   }, [nbHits]);
-  const HitComponent = (0, import_react47.useCallback)(({ hit }) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  const HitComponent = (0, import_react48.useCallback)(({ hit }) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     ProductHitComponent,
     {
       hit,
       variant
     }
   ), [variant]);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement }),
-    showSkeleton && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: `grid ${gridClassName}`, children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ProductGridSkeletonItem, {}, i)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: showSkeleton ? "hidden" : "", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement }),
+    showSkeleton && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: `grid ${gridClassName}`, children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(ProductGridSkeletonItem, {}, i)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: showSkeleton ? "hidden" : "", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       import_react_instantsearch3.Hits,
       {
         hitComponent: HitComponent,
@@ -10500,18 +10823,18 @@ function ProductGrid({
 }
 
 // src/composed/search/Filters.tsx
-var import_react49 = require("react");
+var import_react50 = require("react");
 
 // src/composed/search/FiltersButton.tsx
 var import_lucide_react4 = require("lucide-react");
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var SlidersHorizontalIcon = import_lucide_react4.SlidersHorizontal;
 function FiltersButton({
   onClick,
   className = "",
   children = "Filters"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
     Button,
     {
       variant: "field",
@@ -10519,8 +10842,8 @@ function FiltersButton({
       className,
       "aria-label": "Open filters",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(SlidersHorizontalIcon, { className: "w-4 h-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { children })
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(SlidersHorizontalIcon, { className: "w-4 h-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { children })
       ]
     }
   );
@@ -10529,15 +10852,15 @@ function FiltersButton({
 // src/composed/search/FiltersDrawer.tsx
 var import_react_instantsearch4 = require("react-instantsearch");
 var import_lucide_react5 = require("lucide-react");
-var import_react48 = require("react");
+var import_react49 = require("react");
 var Slider2 = __toESM(require("@radix-ui/react-slider"), 1);
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var XIcon2 = import_lucide_react5.X;
 function FiltersDrawer({ isOpen, onClose }) {
-  const [showCounts, setShowCounts] = (0, import_react48.useState)(false);
+  const [showCounts, setShowCounts] = (0, import_react49.useState)(false);
   const { nbHits } = (0, import_react_instantsearch4.useStats)();
   const containerRef = useFocusTrap(isOpen, onClose);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (isOpen) {
       document.body.style.overflow = "hidden";
     } else {
@@ -10547,7 +10870,7 @@ function FiltersDrawer({ isOpen, onClose }) {
       document.body.style.overflow = "";
     };
   }, [isOpen]);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen) {
         onClose();
@@ -10556,8 +10879,8 @@ function FiltersDrawer({ isOpen, onClose }) {
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [isOpen, onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       "div",
       {
         className: `fixed inset-0 bg-black/50 z-40 transition-opacity ${isOpen ? "opacity-100" : "opacity-0 pointer-events-none"}`,
@@ -10565,7 +10888,7 @@ function FiltersDrawer({ isOpen, onClose }) {
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
       "div",
       {
         ref: containerRef,
@@ -10574,26 +10897,26 @@ function FiltersDrawer({ isOpen, onClose }) {
         "aria-modal": "true",
         "aria-labelledby": "filters-drawer-title",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center justify-between px-4 py-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("h2", { id: "filters-drawer-title", className: "text-xl font-bold", children: "Filters" }),
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center justify-between px-4 py-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h2", { id: "filters-drawer-title", className: "text-xl font-bold", children: "Filters" }),
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
               "button",
               {
                 onClick: onClose,
                 className: "p-2 hover:bg-foreground/5 rounded-full transition-colors",
                 "aria-label": "Close filters",
-                children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(XIcon2, { className: "w-5 h-5" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(XIcon2, { className: "w-5 h-5" })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "px-4 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("p", { className: "text-sm font-caption text-foreground/60", role: "status", "aria-live": "polite", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "px-4 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("p", { className: "text-sm font-caption text-foreground/60", role: "status", "aria-live": "polite", children: [
             nbHits.toLocaleString(),
             " ",
             nbHits === 1 ? "result" : "results"
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex-1 overflow-y-auto px-4 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex flex-col gap-8", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(TagsSection, { showCounts, setShowCounts }),
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(PriceSection, {})
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex-1 overflow-y-auto px-4 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex flex-col gap-8", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TagsSection, { showCounts, setShowCounts }),
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(PriceSection, {})
           ] }) })
         ]
       }
@@ -10609,9 +10932,9 @@ function TagsSection({
     sortBy: ["count:desc", "name:asc"],
     limit: 100
   });
-  const [isExpanded, setIsExpanded] = (0, import_react48.useState)(true);
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "bg-foreground/5 rounded-lg p-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+  const [isExpanded, setIsExpanded] = (0, import_react49.useState)(true);
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "bg-foreground/5 rounded-lg p-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
       "button",
       {
         onClick: () => setIsExpanded(!isExpanded),
@@ -10619,8 +10942,8 @@ function TagsSection({
         "aria-expanded": isExpanded,
         "aria-controls": "tags-content",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("h3", { className: "text-base font-semibold text-primary", children: "Tags" }),
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h3", { className: "text-base font-semibold text-primary", children: "Tags" }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
             "svg",
             {
               className: `w-5 h-5 transition-transform text-foreground/40 group-hover:text-foreground/60 ${isExpanded ? "rotate-180" : ""}`,
@@ -10629,14 +10952,14 @@ function TagsSection({
               stroke: "currentColor",
               strokeWidth: 2.5,
               "aria-hidden": "true",
-              children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
             }
           )
         ]
       }
     ),
-    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "space-y-4", id: "tags-content", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "flex flex-wrap gap-2", role: "group", "aria-label": "Product tags filter", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "space-y-4", id: "tags-content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "flex flex-wrap gap-2", role: "group", "aria-label": "Product tags filter", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
         "button",
         {
           onClick: () => refine(item.value),
@@ -10647,15 +10970,15 @@ function TagsSection({
           "aria-label": `${item.isRefined ? "Remove" : "Apply"} ${item.label} filter${showCounts ? ` (${item.count} products)` : ""}`,
           "aria-pressed": item.isRefined,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { "aria-hidden": "true", children: item.label }),
-            showCounts && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: `text-xs font-caption ${item.isRefined ? "opacity-80" : "opacity-60"}`, "aria-hidden": "true", children: item.count })
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { "aria-hidden": "true", children: item.label }),
+            showCounts && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: `text-xs font-caption ${item.isRefined ? "opacity-80" : "opacity-60"}`, "aria-hidden": "true", children: item.count })
           ]
         },
         item.value
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center justify-between pt-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "text-sm font-label text-foreground/60", id: "show-counts-label", children: "Show counts" }),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center justify-between pt-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "text-sm font-label text-foreground/60", id: "show-counts-label", children: "Show counts" }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
           "button",
           {
             onClick: () => setShowCounts(!showCounts),
@@ -10663,7 +10986,7 @@ function TagsSection({
             role: "switch",
             "aria-checked": showCounts,
             "aria-labelledby": "show-counts-label",
-            children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
               "span",
               {
                 className: `inline-block h-4 w-4 transform rounded-full bg-background shadow-sm transition-transform ${showCounts ? "translate-x-6" : "translate-x-1"}`,
@@ -10680,11 +11003,11 @@ function PriceSection() {
   const { range, refine, start, canRefine } = (0, import_react_instantsearch4.useRange)({ attribute: "price" });
   const rangeMin = typeof range.min === "number" && isFinite(range.min) ? range.min : 0;
   const rangeMax = typeof range.max === "number" && isFinite(range.max) ? range.max : 15e3;
-  const [localRange, setLocalRange] = (0, import_react48.useState)([
+  const [localRange, setLocalRange] = (0, import_react49.useState)([
     typeof start?.[0] === "number" && isFinite(start[0]) ? start[0] : rangeMin,
     typeof start?.[1] === "number" && isFinite(start[1]) ? start[1] : rangeMax
   ]);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     if (start && Array.isArray(start)) {
       setLocalRange([
         typeof start[0] === "number" && isFinite(start[0]) ? start[0] : rangeMin,
@@ -10694,7 +11017,7 @@ function PriceSection() {
       setLocalRange([rangeMin, rangeMax]);
     }
   }, [start, rangeMin, rangeMax]);
-  const [isExpanded, setIsExpanded] = (0, import_react48.useState)(true);
+  const [isExpanded, setIsExpanded] = (0, import_react49.useState)(true);
   if (!canRefine) {
     return null;
   }
@@ -10709,8 +11032,8 @@ function PriceSection() {
       return `$${priceInDollars.toFixed(2)}`;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "bg-foreground/5 rounded-lg p-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "bg-foreground/5 rounded-lg p-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
       "button",
       {
         onClick: () => setIsExpanded(!isExpanded),
@@ -10718,8 +11041,8 @@ function PriceSection() {
         "aria-expanded": isExpanded,
         "aria-controls": "price-content",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("h3", { className: "text-base font-semibold text-primary", children: "Price" }),
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h3", { className: "text-base font-semibold text-primary", children: "Price" }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
             "svg",
             {
               className: `w-5 h-5 transition-transform text-foreground/40 group-hover:text-foreground/60 ${isExpanded ? "rotate-180" : ""}`,
@@ -10728,22 +11051,22 @@ function PriceSection() {
               stroke: "currentColor",
               strokeWidth: 2.5,
               "aria-hidden": "true",
-              children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
             }
           )
         ]
       }
     ),
-    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "space-y-6", id: "price-content", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "flex items-center justify-between text-sm font-display", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { children: formatPrice2(localRange[0]) }),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "text-foreground/70", children: formatPrice2(localRange[1]) })
+    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "space-y-6", id: "price-content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "flex items-center justify-between text-sm font-display", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { children: formatPrice2(localRange[0]) }),
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "text-foreground/70", children: formatPrice2(localRange[1]) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "relative h-24 flex items-end justify-between gap-0.5 px-1", "aria-hidden": "true", role: "presentation", children: [60, 40, 80, 50, 60, 30, 20, 15, 10, 5, 30, 20, 15, 10, 5, 3, 3, 60, 40].map((height, i) => {
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "relative h-24 flex items-end justify-between gap-0.5 px-1", "aria-hidden": "true", role: "presentation", children: [60, 40, 80, 50, 60, 30, 20, 15, 10, 5, 30, 20, 15, 10, 5, 3, 3, 60, 40].map((height, i) => {
         const totalBars = 19;
         const barPrice = rangeMin + (rangeMax - rangeMin) / totalBars * i;
         const isInRange = barPrice >= localRange[0] && barPrice <= localRange[1];
-        return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
           "div",
           {
             className: `flex-1 rounded-t-sm transition-opacity ${isInRange ? "bg-foreground" : "bg-foreground/20"}`,
@@ -10752,7 +11075,7 @@ function PriceSection() {
           i
         );
       }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { style: { touchAction: "none" }, className: "my-6", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { style: { touchAction: "none" }, className: "my-6", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
         Slider2.Root,
         {
           className: "relative flex w-full touch-none select-none items-center",
@@ -10770,8 +11093,8 @@ function PriceSection() {
           step: 1,
           minStepsBetweenThumbs: 1,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Slider2.Track, { className: "relative h-3 w-full grow overflow-hidden rounded-full bg-foreground/20", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Slider2.Range, { className: "absolute h-full bg-foreground" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Slider2.Track, { className: "relative h-3 w-full grow overflow-hidden rounded-full bg-foreground/20", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Slider2.Range, { className: "absolute h-full bg-foreground" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
               Slider2.Thumb,
               {
                 className: "block h-6 w-6 rounded-full bg-background shadow transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50 cursor-grab active:cursor-grabbing hover:scale-105 border-2 border-primary",
@@ -10785,7 +11108,7 @@ function PriceSection() {
                 "aria-valuetext": formatPrice2(localRange[0])
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
               Slider2.Thumb,
               {
                 className: "block h-6 w-6 rounded-full bg-background shadow transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50 cursor-grab active:cursor-grabbing hover:scale-105 border-2 border-primary",
@@ -10802,10 +11125,10 @@ function PriceSection() {
           ]
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("label", { htmlFor: "price-min", className: "text-xs font-label text-foreground/60 mb-1.5 block", children: "Min" }),
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("label", { htmlFor: "price-min", className: "text-xs font-label text-foreground/60 mb-1.5 block", children: "Min" }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
             "input",
             {
               id: "price-min",
@@ -10823,9 +11146,9 @@ function PriceSection() {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("label", { htmlFor: "price-max", className: "text-xs font-label text-foreground/60 mb-1.5 block", children: "Max" }),
-          /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("label", { htmlFor: "price-max", className: "text-xs font-label text-foreground/60 mb-1.5 block", children: "Max" }),
+          /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
             "input",
             {
               id: "price-max",
@@ -10849,11 +11172,11 @@ function PriceSection() {
 }
 
 // src/composed/search/Filters.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 function Filters({ buttonClassName, buttonText }) {
-  const [isOpen, setIsOpen] = (0, import_react49.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  const [isOpen, setIsOpen] = (0, import_react50.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
       FiltersButton,
       {
         onClick: () => setIsOpen(true),
@@ -10861,14 +11184,14 @@ function Filters({ buttonClassName, buttonText }) {
         children: buttonText
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(FiltersDrawer, { isOpen, onClose: () => setIsOpen(false) })
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(FiltersDrawer, { isOpen, onClose: () => setIsOpen(false) })
   ] });
 }
 
 // src/composed/search/CurrentRefinements.tsx
 var import_react_instantsearch5 = require("react-instantsearch");
 var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var XIcon3 = import_lucide_react6.X;
 function CurrentRefinements() {
   const { items, refine } = (0, import_react_instantsearch5.useCurrentRefinements)();
@@ -10914,15 +11237,15 @@ function CurrentRefinements() {
   if (allRefinements.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex flex-wrap items-center gap-2 mb-4 -mt-1", role: "group", "aria-label": "Active filters", children: allRefinements.map((refinement, index) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex flex-wrap items-center gap-2 mb-4 -mt-1", role: "group", "aria-label": "Active filters", children: allRefinements.map((refinement, index) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
     "button",
     {
       className: "bg-primary text-on-primary hover:bg-primary/90 inline-flex h-7 items-center gap-1.5 rounded-full px-3 text-sm transition-colors",
       onClick: () => refinement.refine(),
       "aria-label": `Remove filter: ${refinement.displayLabel}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "truncate", children: refinement.displayLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(XIcon3, { className: "w-3 h-3" })
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "truncate", children: refinement.displayLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(XIcon3, { className: "w-3 h-3" })
       ]
     },
     `${refinement.attribute}-${refinement.value}-${index}`
@@ -10946,12 +11269,12 @@ var FACET_SECTIONS = [
 ];
 
 // src/composed/zoom/ResponsiveZoom.tsx
-var import_react52 = require("react");
+var import_react53 = require("react");
 
 // src/composed/zoom/ZoomOverlay.tsx
-var import_react50 = require("react");
+var import_react51 = require("react");
 var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var PlusIcon2 = import_lucide_react7.Plus;
 var MinusIcon2 = import_lucide_react7.Minus;
 function ZoomOverlay({
@@ -10963,13 +11286,13 @@ function ZoomOverlay({
   className,
   style
 }) {
-  const [zoomedImageIndex, setZoomedImageIndex] = (0, import_react50.useState)(null);
-  const [zoomOrigin, setZoomOrigin] = (0, import_react50.useState)({ x: 50, y: 50 });
-  const [hoveredImageIndex, setHoveredImageIndex] = (0, import_react50.useState)(null);
-  const [cursorPos, setCursorPos] = (0, import_react50.useState)({ x: 0, y: 0 });
-  const [announcement, setAnnouncement] = (0, import_react50.useState)("");
-  const [isZooming, setIsZooming] = (0, import_react50.useState)(false);
-  const handleZoomClick = (0, import_react50.useCallback)(
+  const [zoomedImageIndex, setZoomedImageIndex] = (0, import_react51.useState)(null);
+  const [zoomOrigin, setZoomOrigin] = (0, import_react51.useState)({ x: 50, y: 50 });
+  const [hoveredImageIndex, setHoveredImageIndex] = (0, import_react51.useState)(null);
+  const [cursorPos, setCursorPos] = (0, import_react51.useState)({ x: 0, y: 0 });
+  const [announcement, setAnnouncement] = (0, import_react51.useState)("");
+  const [isZooming, setIsZooming] = (0, import_react51.useState)(false);
+  const handleZoomClick = (0, import_react51.useCallback)(
     (e) => {
       e.stopPropagation();
       if (isLargeTouchDevice && onEnhancedViewer) {
@@ -10994,7 +11317,7 @@ function ZoomOverlay({
     },
     [zoomedImageIndex, isLargeTouchDevice, onEnhancedViewer, imageIndex]
   );
-  const handleZoomMouseMove = (0, import_react50.useCallback)(
+  const handleZoomMouseMove = (0, import_react51.useCallback)(
     (e) => {
       setCursorPos({ x: e.clientX, y: e.clientY });
       if (zoomedImageIndex === imageIndex) {
@@ -11010,9 +11333,9 @@ function ZoomOverlay({
   const isZoomed = zoomedImageIndex === imageIndex;
   const isHovered = hoveredImageIndex === imageIndex;
   const cursorStyle = isLargeTouchDevice ? "pointer" : isTouchDevice ? "default" : "none";
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement }),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       "div",
       {
         className,
@@ -11020,7 +11343,7 @@ function ZoomOverlay({
           ...style,
           position: "relative"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
           "div",
           {
             style: {
@@ -11043,7 +11366,7 @@ function ZoomOverlay({
                 handleZoomClick(e);
               }
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
               "div",
               {
                 style: {
@@ -11059,7 +11382,7 @@ function ZoomOverlay({
         )
       }
     ),
-    isHovered && !isTouchDevice && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+    isHovered && !isTouchDevice && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       "div",
       {
         className: "fixed pointer-events-none z-50 hidden md:block",
@@ -11069,7 +11392,7 @@ function ZoomOverlay({
           transform: "translate(-50%, -50%)"
         },
         "aria-hidden": "true",
-        children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "bg-white dark:bg-gray-800 rounded-full p-2 shadow-sm dark:shadow-gray-950/50", children: isZoomed ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "bg-white dark:bg-gray-800 rounded-full p-2 shadow-sm dark:shadow-gray-950/50", children: isZoomed ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
           MinusIcon2,
           {
             size: 20,
@@ -11077,7 +11400,7 @@ function ZoomOverlay({
             strokeWidth: 1.5,
             "aria-hidden": "true"
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
           PlusIcon2,
           {
             size: 20,
@@ -11092,11 +11415,11 @@ function ZoomOverlay({
 }
 
 // src/composed/zoom/EnhancedImageViewer.tsx
-var import_react51 = require("react");
-var import_react_dom2 = require("react-dom");
+var import_react52 = require("react");
+var import_react_dom3 = require("react-dom");
 var import_react_zoom_pan_pinch = require("react-zoom-pan-pinch");
 var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var TransformWrapper = import_react_zoom_pan_pinch.TransformWrapper;
 var TransformComponent = import_react_zoom_pan_pinch.TransformComponent;
 var EnhancedImageViewer = ({
@@ -11107,17 +11430,17 @@ var EnhancedImageViewer = ({
   onIndexChange,
   currentIndex: propCurrentIndex
 }) => {
-  const [isMounted, setIsMounted] = (0, import_react51.useState)(false);
-  const [isClient, setIsClient] = (0, import_react51.useState)(false);
-  const [scale, setScale] = (0, import_react51.useState)({ initial: 1, min: 1, max: 8 });
-  const [cropDimensions, setCropDimensions] = (0, import_react51.useState)({ width: 0, height: 0 });
-  const [currentZoomScale, setCurrentZoomScale] = (0, import_react51.useState)(1);
-  const imgRef = (0, import_react51.useRef)(null);
-  const touchStartRef = (0, import_react51.useRef)(
+  const [isMounted, setIsMounted] = (0, import_react52.useState)(false);
+  const [isClient, setIsClient] = (0, import_react52.useState)(false);
+  const [scale, setScale] = (0, import_react52.useState)({ initial: 1, min: 1, max: 8 });
+  const [cropDimensions, setCropDimensions] = (0, import_react52.useState)({ width: 0, height: 0 });
+  const [currentZoomScale, setCurrentZoomScale] = (0, import_react52.useState)(1);
+  const imgRef = (0, import_react52.useRef)(null);
+  const touchStartRef = (0, import_react52.useRef)(
     null
   );
-  const isSwipingRef = (0, import_react51.useRef)(false);
-  const calculateScale = (0, import_react51.useCallback)(() => {
+  const isSwipingRef = (0, import_react52.useRef)(false);
+  const calculateScale = (0, import_react52.useCallback)(() => {
     const viewport = {
       width: window.innerWidth,
       height: window.innerHeight
@@ -11129,10 +11452,10 @@ var EnhancedImageViewer = ({
       max: 8
     });
   }, []);
-  const handleImageLoad = (0, import_react51.useCallback)(() => {
+  const handleImageLoad = (0, import_react52.useCallback)(() => {
     calculateScale();
   }, [calculateScale]);
-  (0, import_react51.useLayoutEffect)(() => {
+  (0, import_react52.useLayoutEffect)(() => {
     setIsClient(true);
     setIsMounted(true);
     document.body.style.overflow = "hidden";
@@ -11141,17 +11464,17 @@ var EnhancedImageViewer = ({
       document.body.style.overflow = "";
     };
   }, [calculateScale]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     calculateScale();
   }, [calculateScale]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     const handleResize = () => {
       calculateScale();
     };
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [calculateScale]);
-  (0, import_react51.useEffect)(() => {
+  (0, import_react52.useEffect)(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         onClose();
@@ -11177,7 +11500,7 @@ var EnhancedImageViewer = ({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [onClose, imageUrl, images, onIndexChange, propCurrentIndex]);
-  const handleSwipeNavigation = (0, import_react51.useCallback)(
+  const handleSwipeNavigation = (0, import_react52.useCallback)(
     (direction) => {
       let currentIndex = propCurrentIndex !== void 0 ? propCurrentIndex : -1;
       if (currentIndex === -1) {
@@ -11198,7 +11521,7 @@ var EnhancedImageViewer = ({
     },
     [propCurrentIndex, images, imageUrl, onIndexChange]
   );
-  const handleTouchStart = (0, import_react51.useCallback)(
+  const handleTouchStart = (0, import_react52.useCallback)(
     (e) => {
       const isAtInitialZoom = Math.abs(currentZoomScale - scale.initial) < 0.1;
       if (!isAtInitialZoom) return;
@@ -11212,7 +11535,7 @@ var EnhancedImageViewer = ({
     },
     [currentZoomScale, scale.initial]
   );
-  const handleTouchEnd = (0, import_react51.useCallback)(
+  const handleTouchEnd = (0, import_react52.useCallback)(
     (e) => {
       if (!touchStartRef.current) return;
       const touch = e.changedTouches[0];
@@ -11235,13 +11558,13 @@ var EnhancedImageViewer = ({
     [handleSwipeNavigation]
   );
   if (!isMounted || !isClient) {
-    return (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    return (0, import_react_dom3.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
         "div",
         {
           className: "fixed inset-0 bg-black flex items-center justify-center",
           style: { zIndex: 999999 },
-          children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
             "div",
             {
               style: {
@@ -11256,8 +11579,8 @@ var EnhancedImageViewer = ({
       document.body
     );
   }
-  return (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+  return (0, import_react_dom3.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
       "div",
       {
         className: "fixed inset-0 bg-black flex items-center justify-center",
@@ -11266,7 +11589,7 @@ var EnhancedImageViewer = ({
         "aria-modal": "true",
         "aria-label": "Image viewer",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
             "button",
             {
               onClick: (e) => {
@@ -11292,10 +11615,10 @@ var EnhancedImageViewer = ({
                 touchAction: "manipulation",
                 marginBottom: "env(safe-area-inset-bottom, 0px)"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(import_lucide_react8.X, { className: "w-7 h-7", strokeWidth: 2.5 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react8.X, { className: "w-7 h-7", strokeWidth: 2.5 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
             TransformWrapper,
             {
               initialScale: scale.initial,
@@ -11329,7 +11652,7 @@ var EnhancedImageViewer = ({
               onTransformed: (ref) => {
                 setCurrentZoomScale(ref.state.scale);
               },
-              children: ({ zoomIn, zoomOut, resetTransform }) => /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+              children: ({ zoomIn, zoomOut, resetTransform }) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
                 "div",
                 {
                   style: {
@@ -11342,14 +11665,14 @@ var EnhancedImageViewer = ({
                   onTouchStart: handleTouchStart,
                   onTouchEnd: handleTouchEnd,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                       TransformComponent,
                       {
                         wrapperStyle: {
                           width: "100%",
                           height: "100%"
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                           "div",
                           {
                             style: {
@@ -11360,7 +11683,7 @@ var EnhancedImageViewer = ({
                               alignItems: "center",
                               justifyContent: "center"
                             },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                            children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                               "img",
                               {
                                 ref: imgRef,
@@ -11381,8 +11704,8 @@ var EnhancedImageViewer = ({
                         )
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "fixed bottom-5 left-0 right-0 z-50", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "flex justify-center gap-2", children: (() => {
+                    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "fixed bottom-5 left-0 right-0 z-50", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "flex justify-center gap-2", children: (() => {
                         let currentIndex = propCurrentIndex !== void 0 ? propCurrentIndex : -1;
                         if (currentIndex === -1) {
                           currentIndex = images.findIndex(
@@ -11415,8 +11738,8 @@ var EnhancedImageViewer = ({
                         };
                         const nextIndex = findNextAvailableIndex(currentIndex, 1);
                         const prevIndex = findNextAvailableIndex(currentIndex, -1);
-                        return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                        return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx_runtime70.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                             "button",
                             {
                               onClick: () => {
@@ -11429,7 +11752,7 @@ var EnhancedImageViewer = ({
                               className: `w-10 h-10 rounded-full shadow-lg flex items-center justify-center transition-all duration-200 ${prevIndex === -1 ? "bg-white/40 text-black opacity-50 cursor-not-allowed" : "bg-white/90 hover:bg-white text-black"}`,
                               style: { touchAction: "manipulation" },
                               "aria-label": "Previous image",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                                 "svg",
                                 {
                                   className: "w-4 h-4",
@@ -11437,7 +11760,7 @@ var EnhancedImageViewer = ({
                                   stroke: "currentColor",
                                   viewBox: "0 0 24 24",
                                   "aria-hidden": "true",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                                     "path",
                                     {
                                       strokeLinecap: "round",
@@ -11450,7 +11773,7 @@ var EnhancedImageViewer = ({
                               )
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                             "button",
                             {
                               onClick: () => {
@@ -11463,7 +11786,7 @@ var EnhancedImageViewer = ({
                               className: `w-10 h-10 rounded-full shadow-lg flex items-center justify-center transition-all duration-200 ${nextIndex === -1 ? "bg-white/40 text-black opacity-50 cursor-not-allowed" : "bg-white/90 hover:bg-white text-black"}`,
                               style: { touchAction: "manipulation" },
                               "aria-label": "Next image",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                                 "svg",
                                 {
                                   className: "w-4 h-4",
@@ -11471,7 +11794,7 @@ var EnhancedImageViewer = ({
                                   stroke: "currentColor",
                                   viewBox: "0 0 24 24",
                                   "aria-hidden": "true",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
                                     "path",
                                     {
                                       strokeLinecap: "round",
@@ -11486,7 +11809,7 @@ var EnhancedImageViewer = ({
                           )
                         ] });
                       })() }),
-                      /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { style: { position: "fixed", bottom: 20, left: 24, zIndex: 10, marginBottom: "env(safe-area-inset-bottom, 0px)" }, className: "h-10 px-3 rounded-full bg-white/90 text-black text-sm font-medium flex items-center justify-center shadow-lg", children: (() => {
+                      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { style: { position: "fixed", bottom: 20, left: 24, zIndex: 10, marginBottom: "env(safe-area-inset-bottom, 0px)" }, className: "h-10 px-3 rounded-full bg-white/90 text-black text-sm font-medium flex items-center justify-center shadow-lg", children: (() => {
                         const total = Math.max(images.length, 1);
                         const current = propCurrentIndex !== void 0 ? Math.min(propCurrentIndex + 1, total) : 1;
                         return `${current} / ${total}`;
@@ -11498,7 +11821,7 @@ var EnhancedImageViewer = ({
             },
             `${scale.initial}-${scale.min}-${scale.max}`
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
             "div",
             {
               className: "absolute inset-0 bg-black",
@@ -11517,7 +11840,7 @@ var EnhancedImageViewer = ({
 };
 
 // src/composed/zoom/ResponsiveZoom.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 function ResponsiveZoom({
   imageIndex,
   children,
@@ -11527,11 +11850,11 @@ function ResponsiveZoom({
   imageUrl,
   alt = "Product image"
 }) {
-  const [isTouchDevice, setIsTouchDevice] = (0, import_react52.useState)(false);
-  const [showEnhancedViewer, setShowEnhancedViewer] = (0, import_react52.useState)(false);
-  const [viewerIndex, setViewerIndex] = (0, import_react52.useState)(0);
-  const [currentImageUrl, setCurrentImageUrl] = (0, import_react52.useState)(imageUrl || "");
-  (0, import_react52.useEffect)(() => {
+  const [isTouchDevice, setIsTouchDevice] = (0, import_react53.useState)(false);
+  const [showEnhancedViewer, setShowEnhancedViewer] = (0, import_react53.useState)(false);
+  const [viewerIndex, setViewerIndex] = (0, import_react53.useState)(0);
+  const [currentImageUrl, setCurrentImageUrl] = (0, import_react53.useState)(imageUrl || "");
+  (0, import_react53.useEffect)(() => {
     const checkDeviceType = () => {
       const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
       setIsTouchDevice(hasTouch);
@@ -11558,8 +11881,8 @@ function ResponsiveZoom({
       }
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx_runtime70.Fragment, { children: [
-    isTouchDevice ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
+    isTouchDevice ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       "div",
       {
         className,
@@ -11576,7 +11899,7 @@ function ResponsiveZoom({
         },
         children
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       ZoomOverlay,
       {
         imageIndex,
@@ -11587,7 +11910,7 @@ function ResponsiveZoom({
         children
       }
     ),
-    showEnhancedViewer && isTouchDevice && currentImageUrl && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    showEnhancedViewer && isTouchDevice && currentImageUrl && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       EnhancedImageViewer,
       {
         imageUrl: currentImageUrl,
@@ -11610,9 +11933,9 @@ function ResponsiveZoom({
 }
 
 // src/composed/carousels/MobileProductCarousel.tsx
-var import_react53 = require("react");
-var import_jsx_runtime71 = require("react/jsx-runtime");
-var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarousel2({
+var import_react54 = require("react");
+var import_jsx_runtime72 = require("react/jsx-runtime");
+var MobileProductCarousel = (0, import_react54.memo)(function MobileProductCarousel2({
   images,
   currentIndex = 0,
   onIndexChange,
@@ -11627,42 +11950,42 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
   mockupWidth,
   onMockupUrlGenerated
 }) {
-  const [activeIndex, setActiveIndex] = (0, import_react53.useState)(currentIndex);
-  const [touchStart, setTouchStart] = (0, import_react53.useState)(
+  const [activeIndex, setActiveIndex] = (0, import_react54.useState)(currentIndex);
+  const [touchStart, setTouchStart] = (0, import_react54.useState)(
     null
   );
-  const [touchEnd, setTouchEnd] = (0, import_react53.useState)(
+  const [touchEnd, setTouchEnd] = (0, import_react54.useState)(
     null
   );
-  const [showImageViewer, setShowImageViewer] = (0, import_react53.useState)(false);
-  const [viewerKey, setViewerKey] = (0, import_react53.useState)(0);
-  const [isDragging, setIsDragging] = (0, import_react53.useState)(false);
-  const [dragOffset, setDragOffset] = (0, import_react53.useState)(0);
-  const [isTransitioning, setIsTransitioning] = (0, import_react53.useState)(false);
-  const [isHorizontalSwipe, setIsHorizontalSwipe] = (0, import_react53.useState)(
+  const [showImageViewer, setShowImageViewer] = (0, import_react54.useState)(false);
+  const [viewerKey, setViewerKey] = (0, import_react54.useState)(0);
+  const [isDragging, setIsDragging] = (0, import_react54.useState)(false);
+  const [dragOffset, setDragOffset] = (0, import_react54.useState)(0);
+  const [isTransitioning, setIsTransitioning] = (0, import_react54.useState)(false);
+  const [isHorizontalSwipe, setIsHorizontalSwipe] = (0, import_react54.useState)(
     null
   );
-  const [isPeeking, setIsPeeking] = (0, import_react53.useState)(false);
-  const [isPeekReturning, setIsPeekReturning] = (0, import_react53.useState)(false);
-  const carouselRef = (0, import_react53.useRef)(null);
-  const indicatorRef = (0, import_react53.useRef)(null);
-  const touchStartRef = (0, import_react53.useRef)(
+  const [isPeeking, setIsPeeking] = (0, import_react54.useState)(false);
+  const [isPeekReturning, setIsPeekReturning] = (0, import_react54.useState)(false);
+  const carouselRef = (0, import_react54.useRef)(null);
+  const indicatorRef = (0, import_react54.useRef)(null);
+  const touchStartRef = (0, import_react54.useRef)(
     null
   );
-  const horizontalGestureRef = (0, import_react53.useRef)(false);
-  const hasShownPeekRef = (0, import_react53.useRef)(false);
-  const hasSwipedThisSessionRef = (0, import_react53.useRef)(false);
-  const generatedUrlsRef = (0, import_react53.useRef)(/* @__PURE__ */ new Map());
-  const prevArtworkSrcRef = (0, import_react53.useRef)(currentArtwork?.src);
-  (0, import_react53.useEffect)(() => {
+  const horizontalGestureRef = (0, import_react54.useRef)(false);
+  const hasShownPeekRef = (0, import_react54.useRef)(false);
+  const hasSwipedThisSessionRef = (0, import_react54.useRef)(false);
+  const generatedUrlsRef = (0, import_react54.useRef)(/* @__PURE__ */ new Map());
+  const prevArtworkSrcRef = (0, import_react54.useRef)(currentArtwork?.src);
+  (0, import_react54.useEffect)(() => {
     if (currentArtwork?.src !== prevArtworkSrcRef.current) {
       generatedUrlsRef.current.clear();
       prevArtworkSrcRef.current = currentArtwork?.src;
     }
   }, [currentArtwork?.src]);
-  const onMockupUrlGeneratedRef = (0, import_react53.useRef)(onMockupUrlGenerated);
+  const onMockupUrlGeneratedRef = (0, import_react54.useRef)(onMockupUrlGenerated);
   onMockupUrlGeneratedRef.current = onMockupUrlGenerated;
-  const handleUrlGenerated = (0, import_react53.useCallback)((mockupId, url) => {
+  const handleUrlGenerated = (0, import_react54.useCallback)((mockupId, url) => {
     generatedUrlsRef.current.set(mockupId, url);
     onMockupUrlGeneratedRef.current?.(mockupId, url);
   }, []);
@@ -11670,24 +11993,24 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
   const shouldHideDots = stickyHeroContext?.shouldHideDots ?? false;
   const priorityContext = useMockupPriorityOptional();
   const realtimeContext = useRealtimeOptional();
-  const [urlUpdateCounter, setUrlUpdateCounter] = (0, import_react53.useState)(0);
-  (0, import_react53.useEffect)(() => {
+  const [urlUpdateCounter, setUrlUpdateCounter] = (0, import_react54.useState)(0);
+  (0, import_react54.useEffect)(() => {
     if (!realtimeContext?.subscribeMockupResults) return;
     const unsubscribe = realtimeContext.subscribeMockupResults(() => {
       setUrlUpdateCounter((c) => c + 1);
     });
     return unsubscribe;
   }, [realtimeContext?.subscribeMockupResults]);
-  const mockupIds = (0, import_react53.useMemo)(() => {
+  const mockupIds = (0, import_react54.useMemo)(() => {
     return images.filter((img) => img.isRealMockup && img.mockupId).map((img) => img.mockupId);
   }, [images]);
-  const realtimeMockupUrls = (0, import_react53.useMemo)(() => {
+  const realtimeMockupUrls = (0, import_react54.useMemo)(() => {
     if (!realtimeContext?.getMockupUrls || mockupIds.length === 0) {
       return {};
     }
     return realtimeContext.getMockupUrls(mockupIds);
   }, [realtimeContext?.getMockupUrls, mockupIds, urlUpdateCounter]);
-  const imagesWithRealtimeUrls = (0, import_react53.useMemo)(() => {
+  const imagesWithRealtimeUrls = (0, import_react54.useMemo)(() => {
     return images.map((img) => {
       if (img.isRealMockup && img.mockupId && realtimeMockupUrls[img.mockupId]) {
         return {
@@ -11699,10 +12022,10 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
     });
   }, [images, realtimeMockupUrls]);
   const minSwipeDistance = 50;
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     setActiveIndex(currentIndex);
   }, [currentIndex]);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (!priorityContext) return;
     const realMockups = images.map((img, idx) => ({ img, originalIdx: idx })).filter(({ img }) => img.isRealMockup && img.mockupId);
     const mockupIdsList = realMockups.map(({ img }) => img.mockupId);
@@ -11730,7 +12053,7 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
       priorityContext.clearMobileCarouselMode?.();
     };
   }, [priorityContext, activeIndex, images]);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     const indicator = indicatorRef.current;
     if (!indicator) return;
     let ticking = false;
@@ -11771,7 +12094,7 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
   }, []);
   const SWIPE_TRACKING_KEY = "carousel-swipe-tracking";
   const PDP_VIEWS_BEFORE_PEEK = 10;
-  const getSwipeTracking = (0, import_react53.useCallback)(() => {
+  const getSwipeTracking = (0, import_react54.useCallback)(() => {
     try {
       const stored = localStorage.getItem(SWIPE_TRACKING_KEY);
       if (stored) {
@@ -11781,7 +12104,7 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
     }
     return { viewsWithoutSwipe: 0, hasEverSwiped: false };
   }, []);
-  const recordSwipe = (0, import_react53.useCallback)(() => {
+  const recordSwipe = (0, import_react54.useCallback)(() => {
     if (hasSwipedThisSessionRef.current) return;
     hasSwipedThisSessionRef.current = true;
     try {
@@ -11795,7 +12118,7 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
     } catch {
     }
   }, []);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (!enablePeekAnimation || images.length <= 1) return;
     const tracking = getSwipeTracking();
     const newViewCount = tracking.viewsWithoutSwipe + 1;
@@ -11836,14 +12159,14 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
       clearTimeout(clearTimeout_);
     };
   }, [images.length, getSwipeTracking, enablePeekAnimation]);
-  const wasTapRef = (0, import_react53.useRef)(false);
-  const handleImageTap = (0, import_react53.useCallback)(() => {
+  const wasTapRef = (0, import_react54.useRef)(false);
+  const handleImageTap = (0, import_react54.useCallback)(() => {
     if (!enableZoom) return;
     setViewerKey((prev) => prev + 1);
     setShowImageViewer(true);
     onZoomChange?.(true);
   }, [enableZoom, onZoomChange]);
-  const calculateDragOffset = (0, import_react53.useCallback)(
+  const calculateDragOffset = (0, import_react54.useCallback)(
     (startX, currentX, containerWidth) => {
       const distance = startX - currentX;
       const offsetPercent = distance / containerWidth * 100;
@@ -11868,7 +12191,7 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
     },
     [activeIndex, images.length]
   );
-  const handleSwipeEnd = (0, import_react53.useCallback)(
+  const handleSwipeEnd = (0, import_react54.useCallback)(
     (startX, endX, containerWidth) => {
       const distance = startX - endX;
       const distancePercent = Math.abs(distance) / containerWidth * 100;
@@ -11899,7 +12222,7 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
     },
     [activeIndex, images.length, onIndexChange, recordSwipe]
   );
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     const container = carouselRef.current;
     if (!container) return;
     const handleTouchStart = (e) => {
@@ -11988,11 +12311,11 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
     handleSwipeEnd,
     handleImageTap
   ]);
-  const mouseStartRef = (0, import_react53.useRef)(
+  const mouseStartRef = (0, import_react54.useRef)(
     null
   );
-  const isMouseDraggingRef = (0, import_react53.useRef)(false);
-  (0, import_react53.useEffect)(() => {
+  const isMouseDraggingRef = (0, import_react54.useRef)(false);
+  (0, import_react54.useEffect)(() => {
     const container = carouselRef.current;
     if (!container) return;
     const handleMouseDown = (e) => {
@@ -12068,7 +12391,7 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
       container.removeEventListener("mouseleave", handleMouseLeave);
     };
   }, [calculateDragOffset, handleSwipeEnd, handleImageTap]);
-  const goToSlide = (0, import_react53.useCallback)(
+  const goToSlide = (0, import_react54.useCallback)(
     (index, withTransition = true) => {
       if (withTransition) {
         setIsTransitioning(true);
@@ -12086,16 +12409,16 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
     },
     [onIndexChange]
   );
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (stickyHeroContext?.setCarouselIndicator && images.length > 1) {
-      const indicator = /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      const indicator = /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
         "div",
         {
           className: "w-full",
           role: "group",
           "aria-label": "Product image navigation",
-          children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "relative h-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "flex h-full", children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "relative h-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "flex h-full", children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
               "button",
               {
                 onClick: () => goToSlide(index),
@@ -12105,7 +12428,7 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
               },
               index
             )) }),
-            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
               "div",
               {
                 className: "absolute top-0 h-full bg-primary transition-all duration-300 ease-out",
@@ -12128,10 +12451,10 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
     };
   }, [activeIndex, images.length, goToSlide, stickyHeroContext]);
   if (!images || images.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "w-full aspect-video bg-muted rounded-lg" });
+    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "w-full aspect-video bg-muted rounded-lg" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: `relative w-full h-full ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: `relative w-full h-full ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
       "div",
       {
         ref: carouselRef,
@@ -12149,7 +12472,7 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
         role: "region",
         "aria-roledescription": "carousel",
         "aria-label": "Product images",
-        children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
           "div",
           {
             className: `flex h-full ${isPeekReturning ? "transition-transform duration-300 ease-[cubic-bezier(0,0,0.2,1)]" : isPeeking ? "transition-transform duration-500 ease-[cubic-bezier(0.4,0,0.2,1)]" : isTransitioning || !isDragging ? "transition-transform duration-300 ease-[cubic-bezier(0.25,0.46,0.45,0.94)]" : ""}`,
@@ -12159,11 +12482,11 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
             children: images.map((image, index) => {
               const DECODE_WINDOW = 1;
               const isWithinDecodeWindow = Math.abs(index - activeIndex) <= DECODE_WINDOW;
-              return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                 "div",
                 {
                   className: "w-full h-full flex-shrink-0 relative select-none",
-                  children: !isWithinDecodeWindow ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "w-full h-full bg-muted" }) : image.isPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "w-full h-full bg-muted-foreground/20 animate-pulse" }) : image.isRealMockup && currentArtwork ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                  children: !isWithinDecodeWindow ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "w-full h-full bg-muted" }) : image.isPlaceholder ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "w-full h-full bg-muted-foreground/20 animate-pulse" }) : image.isRealMockup && currentArtwork ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                     HeroProductImage,
                     {
                       productId,
@@ -12175,7 +12498,7 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
                       onUrlGenerated: image.mockupId ? (url) => handleUrlGenerated(image.mockupId, url) : void 0,
                       className: "w-full h-full object-cover cursor-pointer pointer-events-none"
                     }
-                  ) : image.isRealMockup && !currentArtwork ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "w-full h-full bg-muted animate-pulse" }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                  ) : image.isRealMockup && !currentArtwork ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "w-full h-full bg-muted animate-pulse" }) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                     "img",
                     {
                       src: image.src,
@@ -12195,7 +12518,7 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
         )
       }
     ),
-    showIndicators && images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+    showIndicators && images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
       "div",
       {
         ref: indicatorRef,
@@ -12203,8 +12526,8 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
         className: "relative z-20 w-full",
         role: "group",
         "aria-label": "Product image navigation",
-        children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "relative h-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "flex h-full absolute inset-0", children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "relative h-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "flex h-full absolute inset-0", children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
             "button",
             {
               onClick: () => goToSlide(index),
@@ -12214,7 +12537,7 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
             },
             index
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
             "div",
             {
               className: `absolute top-0 h-full bg-foreground ${isPeekReturning ? "transition-all duration-300 ease-[cubic-bezier(0,0,0.2,1)]" : isPeeking ? "transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)]" : isDragging ? "" : "transition-all duration-300 ease-out"}`,
@@ -12249,7 +12572,7 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
           naturalHeight: img.naturalHeight
         } : null;
       }).filter((img) => img !== null);
-      return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
         EnhancedImageViewer,
         {
           imageUrl,
@@ -12288,8 +12611,8 @@ var MobileProductCarousel = (0, import_react53.memo)(function MobileProductCarou
 });
 
 // src/composed/carousels/HeroCarousel.tsx
-var import_react54 = require("react");
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_react55 = require("react");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 function HeroCarousel({
   images,
   currentIndex = 0,
@@ -12299,16 +12622,16 @@ function HeroCarousel({
   productId,
   onImageTap
 }) {
-  const [activeIndex, setActiveIndex] = (0, import_react54.useState)(currentIndex);
-  const containerRef = (0, import_react54.useRef)(null);
-  const touchStartRef = (0, import_react54.useRef)(
+  const [activeIndex, setActiveIndex] = (0, import_react55.useState)(currentIndex);
+  const containerRef = (0, import_react55.useRef)(null);
+  const touchStartRef = (0, import_react55.useRef)(
     null
   );
-  const isSwipingRef = (0, import_react54.useRef)(false);
-  (0, import_react54.useEffect)(() => {
+  const isSwipingRef = (0, import_react55.useRef)(false);
+  (0, import_react55.useEffect)(() => {
     setActiveIndex(currentIndex);
   }, [currentIndex]);
-  const goToSlide = (0, import_react54.useCallback)(
+  const goToSlide = (0, import_react55.useCallback)(
     (index) => {
       const clampedIndex = Math.max(0, Math.min(images.length - 1, index));
       setActiveIndex(clampedIndex);
@@ -12316,7 +12639,7 @@ function HeroCarousel({
     },
     [images.length, onIndexChange]
   );
-  (0, import_react54.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     const container = containerRef.current;
     if (!container) return;
     const handleTouchStart = (e) => {
@@ -12368,9 +12691,9 @@ function HeroCarousel({
     };
   }, [activeIndex, images.length, goToSlide, onImageTap]);
   if (!images || images.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "w-full h-full bg-muted" });
+    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "w-full h-full bg-muted" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -12381,7 +12704,7 @@ function HeroCarousel({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
           "div",
           {
             className: "flex h-full transition-transform duration-300 ease-out",
@@ -12392,14 +12715,14 @@ function HeroCarousel({
               backfaceVisibility: "hidden",
               WebkitBackfaceVisibility: "hidden"
             },
-            children: images.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+            children: images.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
               "div",
               {
                 className: "w-full h-full flex-shrink-0",
                 style: {
                   contain: "layout paint"
                 },
-                children: image.isRealMockup && currentArtwork ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+                children: image.isRealMockup && currentArtwork ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
                   HeroProductImage,
                   {
                     productId,
@@ -12408,7 +12731,7 @@ function HeroCarousel({
                     mockupId: image.mockupId,
                     className: "w-full h-full object-cover"
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
                   "img",
                   {
                     src: image.src,
@@ -12425,12 +12748,12 @@ function HeroCarousel({
             ))
           }
         ),
-        images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+        images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
           "div",
           {
             className: "absolute bottom-4 left-0 right-0 flex justify-center gap-2 z-10",
             style: { contain: "layout style" },
-            children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+            children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
               "button",
               {
                 onClick: () => goToSlide(index),
@@ -12447,8 +12770,8 @@ function HeroCarousel({
 }
 
 // src/composed/grids/MasonryGrid.tsx
-var import_react55 = require("react");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_react56 = require("react");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 var BREAKPOINTS = {
   sm: 640,
   md: 768,
@@ -12500,13 +12823,13 @@ function MasonryGrid({
   className = "",
   emptyContent
 }) {
-  const [columnCount, setColumnCount] = (0, import_react55.useState)(
+  const [columnCount, setColumnCount] = (0, import_react56.useState)(
     () => typeof columns === "number" ? columns : getColumnCount(
       typeof window !== "undefined" ? window.innerWidth : 1024,
       columns
     )
   );
-  (0, import_react55.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     const updateColumnCount = () => {
       setColumnCount(getColumnCount(window.innerWidth, columns));
     };
@@ -12514,30 +12837,30 @@ function MasonryGrid({
     window.addEventListener("resize", updateColumnCount);
     return () => window.removeEventListener("resize", updateColumnCount);
   }, [columns]);
-  const distributedColumns = (0, import_react55.useMemo)(
+  const distributedColumns = (0, import_react56.useMemo)(
     () => distributeItems(items, columnCount),
     [items, columnCount]
   );
   if (items.length === 0) {
     if (emptyContent) {
-      return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_jsx_runtime73.Fragment, { children: emptyContent });
+      return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_jsx_runtime74.Fragment, { children: emptyContent });
     }
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     "div",
     {
       className: `flex ${className}`,
       style: { gap: `${gap}px` },
       role: "list",
-      children: distributedColumns.map((columnItems, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+      children: distributedColumns.map((columnItems, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
         "div",
         {
           className: "flex-1 flex flex-col",
           style: { gap: `${gap}px` },
           children: columnItems.map((item, itemIndex) => {
             const originalIndex = itemIndex * columnCount + columnIndex;
-            return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { role: "listitem", children: renderItem(item, originalIndex) }, originalIndex);
+            return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { role: "listitem", children: renderItem(item, originalIndex) }, originalIndex);
           })
         },
         columnIndex
@@ -12550,7 +12873,7 @@ function MasonryGrid({
 init_dev_warnings();
 
 // src/layouts/hero-zoom/HeroZoomLayout.tsx
-var import_react57 = require("react");
+var import_react58 = require("react");
 
 // src/layouts/hero-zoom/types.ts
 var DEFAULT_HERO_ZOOM_CONFIG = {
@@ -12562,19 +12885,19 @@ var DEFAULT_HERO_ZOOM_CONFIG = {
 };
 
 // src/layouts/hero-zoom/useHeroZoomScales.ts
-var import_react56 = require("react");
+var import_react57 = require("react");
 function useHeroZoomScales(config = {}) {
   const { initialScale, accountForRetina, maxRetinaMultiplier } = {
     ...DEFAULT_HERO_ZOOM_CONFIG,
     ...config
   };
-  const [isHydrated, setIsHydrated] = (0, import_react56.useState)(false);
+  const [isHydrated, setIsHydrated] = (0, import_react57.useState)(false);
   const ssrMultiplier = accountForRetina ? maxRetinaMultiplier : 2;
-  const [scales, setScales] = (0, import_react56.useState)(() => ({
+  const [scales, setScales] = (0, import_react57.useState)(() => ({
     visual: initialScale,
     render: initialScale * ssrMultiplier
   }));
-  const calculateScales = (0, import_react56.useCallback)(() => {
+  const calculateScales = (0, import_react57.useCallback)(() => {
     const visualScale = Math.max(1, Math.min(4, initialScale));
     let renderScale;
     if (accountForRetina) {
@@ -12589,7 +12912,7 @@ function useHeroZoomScales(config = {}) {
     renderScale = Math.max(1, Math.min(8, renderScale));
     return { visual: visualScale, render: renderScale };
   }, [initialScale, accountForRetina, maxRetinaMultiplier]);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     const supportsScrollTimeline = CSS.supports(
       "animation-timeline",
       "scroll()"
@@ -12639,7 +12962,7 @@ function useHeroZoomScales(config = {}) {
 }
 
 // src/layouts/hero-zoom/HeroZoomLayout.tsx
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 function HeroZoomLayout({
   config = {},
   header,
@@ -12654,9 +12977,9 @@ function HeroZoomLayout({
   };
   const { aspectRatio, initialScale, headerHeight } = mergedConfig;
   const { visual, render, isHydrated } = useHeroZoomScales(mergedConfig);
-  const imageContainerRef = (0, import_react57.useRef)(null);
-  const headerRef = (0, import_react57.useRef)(null);
-  (0, import_react57.useEffect)(() => {
+  const imageContainerRef = (0, import_react58.useRef)(null);
+  const headerRef = (0, import_react58.useRef)(null);
+  (0, import_react58.useEffect)(() => {
     if (typeof window === "undefined") return;
     const originalRestoration = "scrollRestoration" in history ? history.scrollRestoration : "auto";
     if ("scrollRestoration" in history) {
@@ -12669,7 +12992,7 @@ function HeroZoomLayout({
       }
     };
   }, []);
-  (0, import_react57.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     const supportsScrollTimeline = CSS.supports(
       "animation-timeline",
       "scroll()"
@@ -12798,7 +13121,7 @@ function HeroZoomLayout({
          The drawer covers the hero completely, so let animation run continuously. */
     }
   `;
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
     "div",
     {
       className: `relative min-h-screen ${className}`,
@@ -12812,8 +13135,8 @@ function HeroZoomLayout({
         "--hero-zoom-final-transform": 1 / activeRender
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("style", { dangerouslySetInnerHTML: { __html: scopedStyles } }),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("style", { dangerouslySetInnerHTML: { __html: scopedStyles } }),
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
           "div",
           {
             style: {
@@ -12821,7 +13144,7 @@ function HeroZoomLayout({
             }
           }
         ),
-        header && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        header && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
           "div",
           {
             ref: headerRef,
@@ -12834,7 +13157,7 @@ function HeroZoomLayout({
             children: header
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
           "div",
           {
             ref: imageContainerRef,
@@ -12854,15 +13177,15 @@ function HeroZoomLayout({
             children: hero
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "relative z-10", children })
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "relative z-10", children })
       ]
     }
   );
 }
 
 // src/layouts/hero-zoom/HeroShrinkLayout.tsx
-var import_react58 = require("react");
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_react59 = require("react");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var DEFAULT_CONFIG = {
   aspectRatio: 16 / 9,
   initialHeightPercent: 70,
@@ -12882,13 +13205,13 @@ function HeroShrinkLayout({
     ...config
   };
   const { aspectRatio, initialHeightPercent, minHeightPercent, headerHeight } = mergedConfig;
-  const heroRef = (0, import_react58.useRef)(null);
-  const headerRef = (0, import_react58.useRef)(null);
-  const [isClient, setIsClient] = (0, import_react58.useState)(false);
-  (0, import_react58.useEffect)(() => {
+  const heroRef = (0, import_react59.useRef)(null);
+  const headerRef = (0, import_react59.useRef)(null);
+  const [isClient, setIsClient] = (0, import_react59.useState)(false);
+  (0, import_react59.useEffect)(() => {
     setIsClient(true);
   }, []);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     if (!isClient) return;
     const supportsScrollTimeline = CSS.supports("animation-timeline", "scroll()");
     if (supportsScrollTimeline) return;
@@ -12975,15 +13298,15 @@ function HeroShrinkLayout({
     }
   `;
   const spacerHeight = `calc(${initialHeightPercent}svh + ${headerHeight}px)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
     "div",
     {
       className: `relative min-h-screen ${className}`,
       style: { ...style, ...cssVars },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("style", { dangerouslySetInnerHTML: { __html: scopedStyles } }),
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { style: { height: spacerHeight } }),
-        header && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("style", { dangerouslySetInnerHTML: { __html: scopedStyles } }),
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { style: { height: spacerHeight } }),
+        header && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
           "div",
           {
             ref: headerRef,
@@ -12992,7 +13315,7 @@ function HeroShrinkLayout({
             children: header
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
           "div",
           {
             ref: heroRef,
@@ -13000,15 +13323,15 @@ function HeroShrinkLayout({
             children: hero
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "relative z-10 bg-background", children })
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "relative z-10 bg-background", children })
       ]
     }
   );
 }
 
 // src/layouts/pdp/ImageEdgeBlur.tsx
-var import_react59 = __toESM(require("react"), 1);
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_react60 = __toESM(require("react"), 1);
+var import_jsx_runtime77 = require("react/jsx-runtime");
 var BLUR_CONFIG = {
   blur: 24,
   crossfade: 68
@@ -13032,7 +13355,7 @@ var BLUR_LAYERS = [
   { blur: Math.round(BLUR_CONFIG.blur * 0.5), zone: 0.6 },
   { blur: BLUR_CONFIG.blur, zone: 1 }
 ];
-var ImageEdgeBlur = import_react59.default.memo(
+var ImageEdgeBlur = import_react60.default.memo(
   function ImageEdgeBlur2({
     imageSrc,
     imageCapInfo,
@@ -13063,7 +13386,7 @@ var ImageEdgeBlur = import_react59.default.memo(
       viewportWidth / LAYOUT_CONFIG2.IMAGE.ASPECT_RATIO,
       maxWidthPx / LAYOUT_CONFIG2.IMAGE.ASPECT_RATIO
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
       "div",
       {
         className: `absolute inset-0 pointer-events-none overflow-hidden ${className}`,
@@ -13071,7 +13394,7 @@ var ImageEdgeBlur = import_react59.default.memo(
         children: BLUR_LAYERS.map((layer, index) => {
           const layerMask = index === BLUR_LAYERS.length - 1 ? void 0 : `linear-gradient(to right, black 0%, black ${layer.zone * 100}%, transparent ${layer.zone * 100 + 10}%)`;
           const blurScale = 1 + layer.blur * 3 / containerHeightPx;
-          return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
             "img",
             {
               src: imageSrc,
@@ -13118,7 +13441,7 @@ var ImageEdgeBlur = import_react59.default.memo(
 );
 
 // src/layouts/pdp/PDPLayout.tsx
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 function PDPLayout({
   renderHeroImage,
   renderContent,
@@ -13146,15 +13469,15 @@ function PDPLayout({
     isDesktop,
     isWideMonitor: isWideMonitor2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: `pdp-layout ${className}`, children: [
-    (isDesktop === false || isDesktop === null) && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "md:hidden", children: [
-      renderMobileCarousel && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "mobile-carousel-container", children: renderMobileCarousel({ images: carouselImages }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "mobile-content p-4", children: renderContent(contentProps) })
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: `pdp-layout ${className}`, children: [
+    (isDesktop === false || isDesktop === null) && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "md:hidden", children: [
+      renderMobileCarousel && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "mobile-carousel-container", children: renderMobileCarousel({ images: carouselImages }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "mobile-content p-4", children: renderContent(contentProps) })
     ] }),
-    (isDesktop === true || isDesktop === null) && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "hidden md:block relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "desktop-hero relative", children: [
+    (isDesktop === true || isDesktop === null) && /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "hidden md:block relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "desktop-hero relative", children: [
         renderHeroImage(heroProps),
-        showEdgeBlur && blurImageSrc && isWideMonitor2 && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        showEdgeBlur && blurImageSrc && isWideMonitor2 && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           ImageEdgeBlur,
           {
             imageSrc: blurImageSrc,
@@ -13165,7 +13488,7 @@ function PDPLayout({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
         "div",
         {
           className: "desktop-sidebar",
@@ -13182,8 +13505,8 @@ function PDPLayout({
 }
 
 // src/layouts/pdp/SimpleImageBlur.tsx
-var import_react60 = __toESM(require("react"), 1);
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_react61 = __toESM(require("react"), 1);
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var BLUR_CONFIG2 = {
   blur: 24,
   crossfade: 60
@@ -13206,7 +13529,7 @@ function getFadeInMask(crossfadeWidth) {
     black ${crossfadeWidth + 10}px
   )`;
 }
-var SimpleImageBlur = import_react60.default.memo(function SimpleImageBlur2({
+var SimpleImageBlur = import_react61.default.memo(function SimpleImageBlur2({
   imageSrc,
   width,
   height = "100%",
@@ -13216,7 +13539,7 @@ var SimpleImageBlur = import_react60.default.memo(function SimpleImageBlur2({
   if (!imageSrc || width <= 0) return null;
   const fadeInMask = getFadeInMask(BLUR_CONFIG2.crossfade);
   const extendedWidth = width + BLUR_CONFIG2.blur * 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
     "div",
     {
       className: `relative overflow-hidden ${className}`,
@@ -13229,7 +13552,7 @@ var SimpleImageBlur = import_react60.default.memo(function SimpleImageBlur2({
                 black 0%,
                 black ${layer.zone * 100}%,
                 transparent ${layer.zone * 100 + 10}%)`;
-        return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
           "img",
           {
             src: imageSrc,
@@ -13259,8 +13582,8 @@ var SimpleImageBlur = import_react60.default.memo(function SimpleImageBlur2({
 });
 
 // src/layouts/pdp/EdgeBlurBox.tsx
-var import_react61 = __toESM(require("react"), 1);
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_react62 = __toESM(require("react"), 1);
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var BLUR_CONFIG3 = {
   blur: 24,
   crossfade: 60
@@ -13284,7 +13607,7 @@ function getFadeOutMask(crossfadeWidth) {
     transparent 100%
   )`;
 }
-var EdgeBlurBox = import_react61.default.memo(function EdgeBlurBox2({
+var EdgeBlurBox = import_react62.default.memo(function EdgeBlurBox2({
   imageSrc,
   width,
   height = "100%",
@@ -13299,7 +13622,7 @@ var EdgeBlurBox = import_react61.default.memo(function EdgeBlurBox2({
   const blurExtend = BLUR_CONFIG3.blur * 2;
   const actualSharpWidth = sharpImageWidth ?? width + overlapLeft;
   const hasOverlap = overlapLeft > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
     "div",
     {
       className: `relative ${className}`,
@@ -13310,7 +13633,7 @@ var EdgeBlurBox = import_react61.default.memo(function EdgeBlurBox2({
         overflow: hasOverlap ? "visible" : "hidden"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
           "div",
           {
             style: {
@@ -13324,7 +13647,7 @@ var EdgeBlurBox = import_react61.default.memo(function EdgeBlurBox2({
                   transparent ${100 - (layer.zone * 100 + 10)}%,
                   black ${100 - layer.zone * 100}%,
                   black 100%)`;
-              return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
                 "img",
                 {
                   src: imageSrc,
@@ -13352,7 +13675,7 @@ var EdgeBlurBox = import_react61.default.memo(function EdgeBlurBox2({
             })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
           "img",
           {
             src: imageSrc,
@@ -13380,8 +13703,8 @@ var EdgeBlurBox = import_react61.default.memo(function EdgeBlurBox2({
 });
 
 // src/layouts/pdp/ImageBlurExtension.tsx
-var import_react62 = __toESM(require("react"), 1);
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_react63 = __toESM(require("react"), 1);
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var BLUR_CONFIG4 = {
   blur: 24,
   crossfadeWidth: 80
@@ -13404,7 +13727,7 @@ function getFadeOutMask2(crossfadeWidth) {
     transparent 100%
   )`;
 }
-var ImageBlurExtension = import_react62.default.memo(function ImageBlurExtension2({
+var ImageBlurExtension = import_react63.default.memo(function ImageBlurExtension2({
   imageSrc,
   width,
   height,
@@ -13418,7 +13741,7 @@ var ImageBlurExtension = import_react62.default.memo(function ImageBlurExtension
   const internalImageLeft = `calc(${heroImageLeft} - 100vw + ${width}px)`;
   const fadeOutMask = getFadeOutMask2(crossfadeWidth);
   const heightValue = typeof height === "number" ? `${height}px` : height;
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
     "div",
     {
       className: `relative overflow-hidden ${className}`,
@@ -13427,7 +13750,7 @@ var ImageBlurExtension = import_react62.default.memo(function ImageBlurExtension
         height: heightValue
       },
       children: [
-        BLUR_LAYERS4.map((layer, index) => /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        BLUR_LAYERS4.map((layer, index) => /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
           "img",
           {
             src: imageSrc,
@@ -13451,7 +13774,7 @@ var ImageBlurExtension = import_react62.default.memo(function ImageBlurExtension
           },
           `blur-${index}`
         )),
-        /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
           "img",
           {
             src: imageSrc,
@@ -13479,39 +13802,39 @@ var ImageBlurExtension = import_react62.default.memo(function ImageBlurExtension
 });
 
 // src/design-system/ColorSwatch.tsx
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 function ColorTokenSwatch({ name, cssVar, className = "" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: `flex flex-col gap-1 ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: `flex flex-col gap-1 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       "div",
       {
         className: "h-16 w-full rounded-lg border border-border shadow-sm",
         style: { backgroundColor: `var(${cssVar})` }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "text-sm font-medium text-foreground", children: name }),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("code", { className: "text-xs text-muted-foreground font-mono", children: cssVar })
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "text-sm font-medium text-foreground", children: name }),
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("code", { className: "text-xs text-muted-foreground font-mono", children: cssVar })
   ] });
 }
 function ColorRow({ name, cssVar, description }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex items-center gap-4 py-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "flex items-center gap-4 py-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
       "div",
       {
         className: "h-10 w-10 rounded-lg border border-border shadow-sm flex-shrink-0",
         style: { backgroundColor: `var(${cssVar})` }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "flex-1 min-w-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "text-sm font-medium text-foreground", children: name }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "text-xs text-muted-foreground", children: description })
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "text-sm font-medium text-foreground", children: name }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "text-xs text-muted-foreground", children: description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("code", { className: "text-xs text-muted-foreground font-mono bg-muted px-2 py-1 rounded", children: cssVar })
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("code", { className: "text-xs text-muted-foreground font-mono bg-muted px-2 py-1 rounded", children: cssVar })
   ] });
 }
 
 // src/design-system/ColorPalette.tsx
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var COLOR_GROUPS = [
   {
     name: "Base",
@@ -13592,17 +13915,17 @@ var COLOR_GROUPS = [
   }
 ];
 function ColorPalette({ layout = "list", className = "" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: `space-y-8 ${className}`, children: COLOR_GROUPS.map((group) => /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("section", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("h3", { className: "text-lg font-semibold text-foreground mb-1", children: group.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("p", { className: "text-sm text-muted-foreground mb-4", children: group.description }),
-    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4", children: group.colors.map((color) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: `space-y-8 ${className}`, children: COLOR_GROUPS.map((group) => /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("section", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("h3", { className: "text-lg font-semibold text-foreground mb-1", children: group.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("p", { className: "text-sm text-muted-foreground mb-4", children: group.description }),
+    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4", children: group.colors.map((color) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       ColorTokenSwatch,
       {
         name: color.name,
         cssVar: color.cssVar
       },
       color.cssVar
-    )) }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "bg-card rounded-lg border border-border p-4 divide-y divide-border", children: group.colors.map((color) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+    )) }) : /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "bg-card rounded-lg border border-border p-4 divide-y divide-border", children: group.colors.map((color) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
       ColorRow,
       {
         name: color.name,
@@ -13615,7 +13938,7 @@ function ColorPalette({ layout = "list", className = "" }) {
 }
 
 // src/design-system/TypographyScale.tsx
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 var FONT_SAMPLES = [
   {
     name: "Heading",
@@ -13649,14 +13972,14 @@ var FONT_SAMPLES = [
   }
 ];
 function TypographyScale({ className = "" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: `space-y-8 ${className}`, children: FONT_SAMPLES.map((font) => /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("section", { className: "bg-card rounded-lg border border-border p-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: font.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("code", { className: "text-xs text-muted-foreground font-mono bg-muted px-2 py-1 rounded", children: font.cssVar })
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: `space-y-8 ${className}`, children: FONT_SAMPLES.map((font) => /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("section", { className: "bg-card rounded-lg border border-border p-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: font.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("code", { className: "text-xs text-muted-foreground font-mono bg-muted px-2 py-1 rounded", children: font.cssVar })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "space-y-4", children: font.sizes.map((size) => /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "flex items-baseline gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "text-xs text-muted-foreground w-20 flex-shrink-0", children: size }),
-      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "space-y-4", children: font.sizes.map((size) => /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex items-baseline gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-xs text-muted-foreground w-20 flex-shrink-0", children: size }),
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
         "p",
         {
           className: `${size} text-foreground`,
@@ -13675,8 +13998,8 @@ var RADIUS_SAMPLES = [
   { name: "Full", value: "9999px" }
 ];
 function RadiusScale({ className = "" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: `space-y-4 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "grid grid-cols-5 gap-4", children: RADIUS_SAMPLES.map((radius) => /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: `space-y-4 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "grid grid-cols-5 gap-4", children: RADIUS_SAMPLES.map((radius) => /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
       "div",
       {
         className: "h-16 w-16 bg-primary",
@@ -13685,13 +14008,13 @@ function RadiusScale({ className = "" }) {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { className: "text-sm font-medium text-foreground", children: radius.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("code", { className: "text-xs text-muted-foreground font-mono", children: radius.cssVar || radius.value })
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-sm font-medium text-foreground", children: radius.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("code", { className: "text-xs text-muted-foreground font-mono", children: radius.cssVar || radius.value })
   ] }, radius.name)) }) });
 }
 
 // src/design-system/ThemeSwitcher.tsx
-var import_react63 = require("react");
+var import_react64 = require("react");
 
 // src/themes/types.ts
 var RADIUS_PRESETS = {
@@ -14859,7 +15182,7 @@ function applyTheme(config) {
 }
 
 // src/design-system/ThemeSwitcher.tsx
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 function readThemeFromDOM() {
   if (typeof document === "undefined") {
     return { themeName: "Linear", isDark: false };
@@ -14877,10 +15200,10 @@ function readThemeFromDOM() {
   return { themeName: "Linear", isDark: dark };
 }
 function ThemeSwitcher({ className = "", showBaseThemesOnly = true }) {
-  const [currentTheme, setCurrentTheme] = (0, import_react63.useState)("Linear");
-  const [isDark, setIsDark] = (0, import_react63.useState)(false);
-  const [isOpen, setIsOpen] = (0, import_react63.useState)(false);
-  (0, import_react63.useEffect)(() => {
+  const [currentTheme, setCurrentTheme] = (0, import_react64.useState)("Linear");
+  const [isDark, setIsDark] = (0, import_react64.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react64.useState)(false);
+  (0, import_react64.useEffect)(() => {
     const { themeName, isDark: dark } = readThemeFromDOM();
     setCurrentTheme(themeName);
     setIsDark(dark);
@@ -14919,61 +15242,61 @@ function ThemeSwitcher({ className = "", showBaseThemesOnly = true }) {
     applyTheme(config);
   };
   const themes = showBaseThemesOnly ? baseThemes : baseThemes;
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: `flex items-center gap-3 ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: `flex items-center gap-3 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
         "button",
         {
           onClick: () => setIsOpen(!isOpen),
           className: "flex items-center gap-2 px-4 py-2 bg-card border border-border rounded-lg hover:bg-muted transition-colors text-foreground",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "font-medium", children: currentTheme }),
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("svg", { className: `w-4 h-4 transition-transform ${isOpen ? "rotate-180" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "font-medium", children: currentTheme }),
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("svg", { className: `w-4 h-4 transition-transform ${isOpen ? "rotate-180" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(import_jsx_runtime84.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_jsx_runtime85.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
           "div",
           {
             className: "fixed inset-0 z-40",
             onClick: () => setIsOpen(false)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "absolute top-full left-0 mt-2 w-56 max-h-80 overflow-auto bg-card border border-border rounded-lg shadow-lg z-50", children: themes.map((theme) => /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "absolute top-full left-0 mt-2 w-56 max-h-80 overflow-auto bg-card border border-border rounded-lg shadow-lg z-50", children: themes.map((theme) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
           "button",
           {
             onClick: () => handleThemeSelect(theme.name),
             className: `w-full px-4 py-2 text-left hover:bg-muted transition-colors flex items-center gap-3 ${currentTheme === theme.name ? "bg-muted" : ""}`,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
                 "div",
                 {
                   className: "w-4 h-4 rounded-full border border-border",
                   style: { backgroundColor: theme.primaryColor || "#888" }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-foreground", children: theme.name }),
-              currentTheme === theme.name && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("svg", { className: "w-4 h-4 ml-auto text-primary", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })
+              /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "text-foreground", children: theme.name }),
+              currentTheme === theme.name && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("svg", { className: "w-4 h-4 ml-auto text-primary", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })
             ]
           },
           theme.name
         )) })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
       "button",
       {
         onClick: handleDarkModeToggle,
         className: "flex items-center gap-2 px-4 py-2 bg-card border border-border rounded-lg hover:bg-muted transition-colors text-foreground",
         title: `Switch to ${isDark ? "light" : "dark"} mode`,
         children: [
-          isDark ? /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("circle", { cx: "12", cy: "12", r: "5" }),
-            /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("span", { className: "text-sm", children: isDark ? "Light" : "Dark" })
+          isDark ? /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("circle", { cx: "12", cy: "12", r: "5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "text-sm", children: isDark ? "Light" : "Dark" })
         ]
       }
     )
@@ -14981,7 +15304,7 @@ function ThemeSwitcher({ className = "", showBaseThemesOnly = true }) {
 }
 
 // src/design-system/DesignSystemPage.tsx
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 function DesignSystemPage({
   showThemeSwitcher = true,
   showColors = true,
@@ -14991,29 +15314,29 @@ function DesignSystemPage({
   colorLayout = "list",
   className = ""
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: `max-w-4xl mx-auto px-4 py-8 ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("header", { className: "mb-12", children: /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("h1", { className: "text-4xl font-bold text-foreground mb-2", children: "Design System" }),
-        /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("p", { className: "text-lg text-muted-foreground", children: "Visual reference for theme tokens and styles" })
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: `max-w-4xl mx-auto px-4 py-8 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("header", { className: "mb-12", children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("h1", { className: "text-4xl font-bold text-foreground mb-2", children: "Design System" }),
+        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("p", { className: "text-lg text-muted-foreground", children: "Visual reference for theme tokens and styles" })
       ] }),
-      showThemeSwitcher && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ThemeSwitcher, {})
+      showThemeSwitcher && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ThemeSwitcher, {})
     ] }) }),
-    showColors && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("section", { className: "mb-16", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Color Palette" }),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(ColorPalette, { layout: colorLayout })
+    showColors && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("section", { className: "mb-16", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Color Palette" }),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ColorPalette, { layout: colorLayout })
     ] }),
-    showTypography && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("section", { className: "mb-16", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Typography" }),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(TypographyScale, {})
+    showTypography && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("section", { className: "mb-16", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Typography" }),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(TypographyScale, {})
     ] }),
-    showRadius && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("section", { className: "mb-16", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Border Radius" }),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(RadiusScale, {})
+    showRadius && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("section", { className: "mb-16", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Border Radius" }),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(RadiusScale, {})
     ] }),
-    showSpacing && /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("section", { className: "mb-16", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Spacing Scale" }),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(SpacingScale, {})
+    showSpacing && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("section", { className: "mb-16", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Spacing Scale" }),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(SpacingScale, {})
     ] })
   ] });
 }
@@ -15028,31 +15351,31 @@ function SpacingScale() {
     { name: "12", value: "3rem" },
     { name: "16", value: "4rem" }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "space-y-2", children: spaces.map((space) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex items-center gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("code", { className: "text-xs text-muted-foreground font-mono w-8", children: space.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "space-y-2", children: spaces.map((space) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex items-center gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("code", { className: "text-xs text-muted-foreground font-mono w-8", children: space.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
       "div",
       {
         className: "h-4 bg-primary rounded",
         style: { width: space.value }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "text-sm text-muted-foreground", children: space.value })
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "text-sm text-muted-foreground", children: space.value })
   ] }, space.name)) });
 }
 
 // src/personalization/PersonalizationProvider.tsx
-var import_react66 = __toESM(require("react"), 1);
+var import_react67 = __toESM(require("react"), 1);
 
 // src/personalization/PersonalizationContext.ts
-var import_react64 = require("react");
-var PersonalizationContext = (0, import_react64.createContext)(null);
+var import_react65 = require("react");
+var PersonalizationContext = (0, import_react65.createContext)(null);
 function usePersonalizationContext() {
-  return (0, import_react64.useContext)(PersonalizationContext);
+  return (0, import_react65.useContext)(PersonalizationContext);
 }
 
 // src/personalization/utils.ts
-var import_react65 = require("react");
+var import_react66 = require("react");
 function normalizeHex(color) {
   let hex = color.trim().toUpperCase();
   if (hex.length === 4 && hex.startsWith("#")) {
@@ -15073,8 +15396,8 @@ function isValidImageUrl(url) {
   }
 }
 function useDebouncedValue(value, delay) {
-  const [debounced, setDebounced] = (0, import_react65.useState)(value);
-  (0, import_react65.useEffect)(() => {
+  const [debounced, setDebounced] = (0, import_react66.useState)(value);
+  (0, import_react66.useEffect)(() => {
     const timer = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(timer);
   }, [value, delay]);
@@ -15095,18 +15418,18 @@ function scrollInputAboveKeyboard(input) {
 }
 
 // src/personalization/PersonalizationProvider.tsx
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 function createBridgeFromCanvas(canvasModule) {
   const { useEditor, useCommands, useImageBinding } = canvasModule;
   function TextBinder({ name, value }) {
     const { elements } = useEditor();
     const { executeElementUpdate } = useCommands();
-    const elementsRef = import_react66.default.useRef(elements);
+    const elementsRef = import_react67.default.useRef(elements);
     elementsRef.current = elements;
-    const executeRef = import_react66.default.useRef(executeElementUpdate);
+    const executeRef = import_react67.default.useRef(executeElementUpdate);
     executeRef.current = executeElementUpdate;
-    const hasUserInput = import_react66.default.useRef(false);
-    import_react66.default.useEffect(() => {
+    const hasUserInput = import_react67.default.useRef(false);
+    import_react67.default.useEffect(() => {
       if (value == null) return;
       if (value === "" && !hasUserInput.current) return;
       hasUserInput.current = true;
@@ -15124,12 +15447,12 @@ function createBridgeFromCanvas(canvasModule) {
   function ColorBinder({ originalColor, newColor }) {
     const { elements } = useEditor();
     const { executeElementUpdate } = useCommands();
-    const elementsRef = import_react66.default.useRef(elements);
+    const elementsRef = import_react67.default.useRef(elements);
     elementsRef.current = elements;
-    const executeRef = import_react66.default.useRef(executeElementUpdate);
+    const executeRef = import_react67.default.useRef(executeElementUpdate);
     executeRef.current = executeElementUpdate;
-    const appliedColorRef = import_react66.default.useRef(normalizeHex(originalColor));
-    import_react66.default.useEffect(() => {
+    const appliedColorRef = import_react67.default.useRef(normalizeHex(originalColor));
+    import_react67.default.useEffect(() => {
       const normalizedNew = normalizeHex(newColor);
       if (normalizedNew === appliedColorRef.current) return;
       const matchColor = appliedColorRef.current;
@@ -15169,11 +15492,11 @@ function createBridgeFromCanvas(canvasModule) {
   }
   function ImageBinder({ name, value, fit = "cover" }) {
     const { setImageUrl } = useImageBinding(name, { fit });
-    const hasUserInput = import_react66.default.useRef(false);
+    const hasUserInput = import_react67.default.useRef(false);
     const debouncedValue = useDebouncedValue(value, 500);
-    const setImageUrlRef = import_react66.default.useRef(setImageUrl);
+    const setImageUrlRef = import_react67.default.useRef(setImageUrl);
     setImageUrlRef.current = setImageUrl;
-    import_react66.default.useEffect(() => {
+    import_react67.default.useEffect(() => {
       if (debouncedValue == null) return;
       if (debouncedValue === "" && !hasUserInput.current) return;
       hasUserInput.current = true;
@@ -15183,15 +15506,15 @@ function createBridgeFromCanvas(canvasModule) {
     return null;
   }
   return function PersonalizationBridge({ fields = [], values = {} } = {}) {
-    return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(import_jsx_runtime86.Fragment, { children: fields.map((field) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(import_jsx_runtime87.Fragment, { children: fields.map((field) => {
       if (field.type === "text") {
-        return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(TextBinder, { name: field.name, value: values[field.name] ?? "" }, `text-${field.name}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(TextBinder, { name: field.name, value: values[field.name] ?? "" }, `text-${field.name}`);
       }
       if (field.type === "color") {
-        return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ColorBinder, { originalColor: field.color, newColor: values[field.color] ?? field.color }, `color-${field.color}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ColorBinder, { originalColor: field.color, newColor: values[field.color] ?? field.color }, `color-${field.color}`);
       }
       if (field.type === "image") {
-        return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ImageBinder, { name: field.name, value: values[field.name] ?? "", fit: field.fit ?? "cover" }, `image-${field.name}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ImageBinder, { name: field.name, value: values[field.name] ?? "", fit: field.fit ?? "cover" }, `image-${field.name}`);
       }
       return null;
     }) });
@@ -15213,19 +15536,19 @@ function PersonalizationProvider({
   children
 }) {
   const realtime = useRealtimeOptional();
-  const [personValues, setPersonValues] = (0, import_react66.useState)(initialValues ?? {});
-  const [isActive, setIsActive] = (0, import_react66.useState)(!!(initialValues && Object.keys(initialValues).length > 0));
-  const [isExporting, setIsExporting] = (0, import_react66.useState)(false);
-  const [exportedBlobUrls, setExportedBlobUrls] = (0, import_react66.useState)({});
-  const [exportCount, setExportCount] = (0, import_react66.useState)(0);
-  const blobUrlsRef = (0, import_react66.useRef)({});
-  const [CanvasComponent, setCanvasComponent] = (0, import_react66.useState)(
+  const [personValues, setPersonValues] = (0, import_react67.useState)(initialValues ?? {});
+  const [isActive, setIsActive] = (0, import_react67.useState)(!!(initialValues && Object.keys(initialValues).length > 0));
+  const [isExporting, setIsExporting] = (0, import_react67.useState)(false);
+  const [exportedBlobUrls, setExportedBlobUrls] = (0, import_react67.useState)({});
+  const [exportCount, setExportCount] = (0, import_react67.useState)(0);
+  const blobUrlsRef = (0, import_react67.useRef)({});
+  const [CanvasComponent, setCanvasComponent] = (0, import_react67.useState)(
     cachedCanvasComponent
   );
-  const [BridgeComponent, setBridgeComponent] = (0, import_react66.useState)(
+  const [BridgeComponent, setBridgeComponent] = (0, import_react67.useState)(
     cachedBridgeComponent
   );
-  (0, import_react66.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     if (CanvasComponent && BridgeComponent) return;
     if (!canvasImport) return;
     if (!canvasLoadPromise) {
@@ -15243,8 +15566,8 @@ function PersonalizationProvider({
       }
     });
   }, [CanvasComponent, BridgeComponent, canvasImport]);
-  const realtimeEnabledRef = (0, import_react66.useRef)(false);
-  (0, import_react66.useEffect)(() => {
+  const realtimeEnabledRef = (0, import_react67.useRef)(false);
+  (0, import_react67.useEffect)(() => {
     return () => {
       for (const url of Object.values(blobUrlsRef.current)) {
         try {
@@ -15254,16 +15577,16 @@ function PersonalizationProvider({
       }
     };
   }, []);
-  const updateField = (0, import_react66.useCallback)((key, value) => {
+  const updateField = (0, import_react67.useCallback)((key, value) => {
     setIsActive(true);
     setPersonValues((prev) => ({ ...prev, [key]: value }));
   }, []);
-  const reset = (0, import_react66.useCallback)(() => {
+  const reset = (0, import_react67.useCallback)(() => {
     setPersonValues({});
     setIsActive(false);
     setIsExporting(false);
   }, []);
-  const handleExport = (0, import_react66.useCallback)(
+  const handleExport = (0, import_react67.useCallback)(
     (exports2) => {
       const newUrls = {};
       for (const [name, data] of Object.entries(exports2)) {
@@ -15297,11 +15620,11 @@ function PersonalizationProvider({
     },
     [realtime, placementOverride]
   );
-  const handleExportScheduled = (0, import_react66.useCallback)(() => {
+  const handleExportScheduled = (0, import_react67.useCallback)(() => {
     setIsExporting(true);
   }, []);
   const shouldMountCanvas = CanvasComponent && BridgeComponent && canvasState?.elements && canvasState.elements.length > 0 && (!lazy || isActive);
-  const contextValue = import_react66.default.useMemo(
+  const contextValue = import_react67.default.useMemo(
     () => ({
       fields,
       personValues,
@@ -15314,8 +15637,8 @@ function PersonalizationProvider({
     }),
     [fields, personValues, updateField, isActive, isExporting, exportedBlobUrls, exportCount, reset]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(PersonalizationContext.Provider, { value: contextValue, children: [
-    shouldMountCanvas && CanvasComponent && BridgeComponent && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(PersonalizationContext.Provider, { value: contextValue, children: [
+    shouldMountCanvas && CanvasComponent && BridgeComponent && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
       "div",
       {
         style: {
@@ -15328,7 +15651,7 @@ function PersonalizationProvider({
           pointerEvents: "none"
         },
         "aria-hidden": true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
           CanvasComponent,
           {
             initialElements: canvasState?.elements,
@@ -15348,7 +15671,7 @@ function PersonalizationProvider({
             exportImageQuality: exportConfig?.imageQuality ?? 0.85,
             onExport: handleExport,
             onExportScheduled: handleExportScheduled,
-            overlay: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(BridgeComponent, { fields, values: personValues })
+            overlay: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(BridgeComponent, { fields, values: personValues })
           }
         )
       },
@@ -15373,7 +15696,7 @@ function usePersonalizationOptional() {
 }
 
 // src/personalization/PersonalizationInputs.tsx
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 function PersonalizationInputs({
   className,
   inputClassName = "w-full px-4 py-3 rounded-lg border text-base text-foreground placeholder:text-muted-foreground bg-white/50 outline-none focus:ring-2 focus:ring-foreground/20",
@@ -15397,8 +15720,8 @@ function PersonalizationInputs({
       scrollInputAboveKeyboard(e.target);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: className || "flex flex-col gap-3", children: [
-    textFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: className || "flex flex-col gap-3", children: [
+    textFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
       "input",
       {
         type: "text",
@@ -15412,8 +15735,8 @@ function PersonalizationInputs({
       },
       `text-${field.name}`
     )),
-    colorFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+    colorFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
         "input",
         {
           type: "color",
@@ -15422,9 +15745,9 @@ function PersonalizationInputs({
           onChange: (e) => updateField(field.color, e.target.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "text-base text-muted-foreground", children: field.label })
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "text-base text-muted-foreground", children: field.label })
     ] }, `color-${field.color}`)),
-    imageFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+    imageFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
       "input",
       {
         type: "text",
@@ -15442,15 +15765,15 @@ function PersonalizationInputs({
 }
 
 // src/personalization/usePersonalizationShimmer.ts
-var import_react67 = require("react");
+var import_react68 = require("react");
 function usePersonalizationShimmer(containerRef, safetyTimeoutMs = 1e4) {
   const personCtx = usePersonalizationContext();
   const realtime = useRealtimeOptional();
-  const [shimmerActive, setShimmerActive] = (0, import_react67.useState)(false);
-  const sdkSettledRef = (0, import_react67.useRef)(false);
-  const manualTriggerRef = (0, import_react67.useRef)(false);
-  const safetyTimeoutRef = (0, import_react67.useRef)(void 0);
-  const startShimmer = (0, import_react67.useCallback)(() => {
+  const [shimmerActive, setShimmerActive] = (0, import_react68.useState)(false);
+  const sdkSettledRef = (0, import_react68.useRef)(false);
+  const manualTriggerRef = (0, import_react68.useRef)(false);
+  const safetyTimeoutRef = (0, import_react68.useRef)(void 0);
+  const startShimmer = (0, import_react68.useCallback)(() => {
     setShimmerActive(true);
     if (safetyTimeoutRef.current) clearTimeout(safetyTimeoutRef.current);
     safetyTimeoutRef.current = setTimeout(
@@ -15462,25 +15785,25 @@ function usePersonalizationShimmer(containerRef, safetyTimeoutMs = 1e4) {
       safetyTimeoutMs
     );
   }, [safetyTimeoutMs]);
-  (0, import_react67.useEffect)(() => {
+  (0, import_react68.useEffect)(() => {
     if (!personCtx?.isActive) return;
     sdkSettledRef.current = false;
     manualTriggerRef.current = false;
     realtime?.resetPipelineSettled();
     startShimmer();
   }, [personCtx?.personValues, personCtx?.isActive, startShimmer]);
-  const triggerShimmer = (0, import_react67.useCallback)(() => {
+  const triggerShimmer = (0, import_react68.useCallback)(() => {
     sdkSettledRef.current = false;
     manualTriggerRef.current = true;
     startShimmer();
   }, [startShimmer]);
-  (0, import_react67.useEffect)(() => {
+  (0, import_react68.useEffect)(() => {
     if (!realtime?.subscribePipelineSettled) return;
     return realtime.subscribePipelineSettled(() => {
       sdkSettledRef.current = true;
     });
   }, [realtime]);
-  (0, import_react67.useEffect)(() => {
+  (0, import_react68.useEffect)(() => {
     const container = containerRef.current;
     if (!container) return;
     const observer = new MutationObserver((mutations) => {
@@ -15523,7 +15846,7 @@ function usePersonalizationShimmer(containerRef, safetyTimeoutMs = 1e4) {
     });
     return () => observer.disconnect();
   }, [containerRef]);
-  (0, import_react67.useEffect)(() => {
+  (0, import_react68.useEffect)(() => {
     return () => {
       if (safetyTimeoutRef.current) clearTimeout(safetyTimeoutRef.current);
     };
@@ -15629,6 +15952,8 @@ function usePersonalizationShimmer(containerRef, safetyTimeoutMs = 1e4) {
   Link,
   LinkIcon,
   LoadingOverlayPrism,
+  LoadingOverlayPrismCandy,
+  LoadingOverlayPrismCandyInline,
   MasonryGrid,
   MobileProductCarousel,
   MockupPriorityProvider,