@snowcone-app/ui 0.4.6 → 0.4.8

package/dist/index.js

@@ -5549,8 +5549,8 @@ import { useRef as useRef13, useEffect as useEffect18, useMemo as useMemo8, useS
 
 // src/patterns/RealtimeProvider.tsx
 import {
-  createContext as createContext7,
-  useContext as useContext5,
+  createContext as createContext8,
+  useContext as useContext6,
   useState as useState17,
   useEffect as useEffect17,
   useCallback as useCallback10,
@@ -5559,10 +5559,23 @@ import {
 } from "react";
 import { useRealtimeMockup as useRealtimeMockup2 } from "@snowcone-app/sdk/react";
 import { resolveVariantId as resolveVariantIdUtil } from "@snowcone-app/sdk";
+
+// src/patterns/MockupBackground.tsx
+import { createContext as createContext7, useContext as useContext5 } from "react";
 import { jsx as jsx51 } from "react/jsx-runtime";
+var MockupBackgroundContext = createContext7(void 0);
+function MockupBackground({ bg, children }) {
+  return /* @__PURE__ */ jsx51(MockupBackgroundContext.Provider, { value: bg, children });
+}
+function useMockupBackgroundOptional() {
+  return useContext5(MockupBackgroundContext);
+}
+
+// src/patterns/RealtimeProvider.tsx
+import { jsx as jsx52 } from "react/jsx-runtime";
 var DEFAULT_ARTBOARD_SIZE = 2e3;
 var MAX_CONCURRENT_BLOBS = 5;
-var RealtimeContext = createContext7(
+var RealtimeContext = createContext8(
   void 0
 );
 function RealtimeProvider({
@@ -5576,6 +5589,7 @@ function RealtimeProvider({
   grantUrl
 }) {
   const productContext = useProductOptional();
+  const mockupBg = useMockupBackgroundOptional();
   const [isEnabled, setIsEnabled] = useState17(autoEnable);
   const useSessionGrant = Boolean(shop && grantUrl);
   const getToken = useCallback10(async () => {
@@ -5596,6 +5610,7 @@ function RealtimeProvider({
   const configSentRef = useRef12(false);
   const placementSettingsOverridesRef = useRef12({});
   const lastSentVariantIdRef = useRef12(null);
+  const lastSentBgRef = useRef12(void 0);
   const lastSentColorsRef = useRef12({});
   const realtimeMockup = useRealtimeMockup2({
     wsUrl,
@@ -5781,6 +5796,7 @@ function RealtimeProvider({
         disconnect();
         configSentRef.current = false;
         lastSentVariantIdRef.current = null;
+        lastSentBgRef.current = void 0;
         lastSentColorsRef.current = {};
       };
     }
@@ -5802,7 +5818,8 @@ function RealtimeProvider({
     );
     const isFirstSend = !configSentRef.current;
     const variantChanged = lastSentVariantIdRef.current !== null && lastSentVariantIdRef.current !== variantId;
-    if (!isFirstSend && !variantChanged) {
+    const bgChanged = configSentRef.current && lastSentBgRef.current !== mockupBg;
+    if (!isFirstSend && !variantChanged && !bgChanged) {
       return;
     }
     const mockupIds = [];
@@ -5819,6 +5836,7 @@ function RealtimeProvider({
       variantId,
       shop,
       width: mockupWidth,
+      ...mockupBg ? { bg: mockupBg } : {},
       placementSettings: { ...placementSettingsOverridesRef.current }
     } : {
       productId,
@@ -5827,6 +5845,7 @@ function RealtimeProvider({
       shop: "hTidnpNnNa",
       seal: "bypass-sig-for-k6-load-test",
       width: mockupWidth,
+      ...mockupBg ? { bg: mockupBg } : {},
       placementSettings: { ...placementSettingsOverridesRef.current }
     };
     if (variantChanged) {
@@ -5838,6 +5857,7 @@ function RealtimeProvider({
     sendConfigRaw(configPayload);
     configSentRef.current = true;
     lastSentVariantIdRef.current = variantId;
+    lastSentBgRef.current = mockupBg;
     setTimeout(() => {
       const colorPlacements = placements.filter((p) => p.type === "color");
       colorPlacements.forEach((p) => {
@@ -5855,7 +5875,8 @@ function RealtimeProvider({
     productContext?.selection,
     sendConfigRaw,
     sendColorBlobTracked,
-    mockupWidth
+    mockupWidth,
+    mockupBg
   ]);
   useEffect17(() => {
     if (!isEnabled || !isConnected || !isConfigured || !productContext?.product)
@@ -6223,17 +6244,17 @@ function RealtimeProvider({
       registerBlobUrl
     ]
   );
-  return /* @__PURE__ */ jsx51(RealtimeContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx52(RealtimeContext.Provider, { value: contextValue, children });
 }
 function useRealtime() {
-  const context = useContext5(RealtimeContext);
+  const context = useContext6(RealtimeContext);
   if (!context) {
     throw new Error("useRealtime must be used within a RealtimeProvider");
   }
   return context;
 }
 function useRealtimeOptional() {
-  return useContext5(RealtimeContext);
+  return useContext6(RealtimeContext);
 }
 
 // src/hooks/useCanvasContext.ts
@@ -7043,19 +7064,19 @@ import { useCallback as useCallback15, useMemo as useMemo10 } from "react";
 
 // src/patterns/MockupPriorityProvider.tsx
 import {
-  createContext as createContext8,
-  useContext as useContext6,
+  createContext as createContext9,
+  useContext as useContext7,
   useCallback as useCallback14,
   useRef as useRef18,
   useMemo as useMemo9,
   useState as useState23,
   useEffect as useEffect23
 } from "react";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var MAX_LEVEL3_PREFETCH = 5;
 var PRIORITY_RECALC_DEBOUNCE_MS = 50;
 var PRELOAD_MARGIN_PX = 750;
-var MockupPriorityContext = createContext8(
+var MockupPriorityContext = createContext9(
   void 0
 );
 function MockupPriorityProvider({ children }) {
@@ -7635,10 +7656,10 @@ function MockupPriorityProvider({ children }) {
       subscribeLevel1Change
     ]
   );
-  return /* @__PURE__ */ jsx52(MockupPriorityContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx53(MockupPriorityContext.Provider, { value: contextValue, children });
 }
 function useMockupPriority() {
-  const context = useContext6(MockupPriorityContext);
+  const context = useContext7(MockupPriorityContext);
   if (!context) {
     throw new Error(
       "useMockupPriority must be used within a MockupPriorityProvider"
@@ -7647,7 +7668,7 @@ function useMockupPriority() {
   return context;
 }
 function useMockupPriorityOptional() {
-  return useContext6(MockupPriorityContext);
+  return useContext7(MockupPriorityContext);
 }
 
 // src/hooks/useProductPage.ts
@@ -8373,8 +8394,8 @@ var CanvasExportService = class _CanvasExportService {
 var canvasExportService = new CanvasExportService();
 
 // src/components/CanvasIsolationBoundary.tsx
-import React40, { useEffect as useEffect26 } from "react";
-import { Fragment as Fragment9, jsx as jsx53, jsxs as jsxs33 } from "react/jsx-runtime";
+import React41, { useEffect as useEffect26 } from "react";
+import { Fragment as Fragment9, jsx as jsx54, jsxs as jsxs33 } from "react/jsx-runtime";
 function CanvasIsolationConfigurator({
   placementName: placementNameProp,
   onArtworkChange,
@@ -8421,9 +8442,9 @@ function CanvasIsolationConfigurator({
   }, []);
   return null;
 }
-var IsolatedChildren = React40.memo(
+var IsolatedChildren = React41.memo(
   function IsolatedChildren2({ children }) {
-    return /* @__PURE__ */ jsx53(Fragment9, { children });
+    return /* @__PURE__ */ jsx54(Fragment9, { children });
   },
   // Custom comparison: ALWAYS return true (never re-render due to parent changes)
   // This is intentional - children should use refs/services for updates that need to bypass this
@@ -8437,7 +8458,7 @@ function CanvasIsolationBoundary({
   serializeStateForServer
 }) {
   return /* @__PURE__ */ jsxs33(Fragment9, { children: [
-    /* @__PURE__ */ jsx53(
+    /* @__PURE__ */ jsx54(
       CanvasIsolationConfigurator,
       {
         placementName,
@@ -8446,7 +8467,7 @@ function CanvasIsolationBoundary({
         serializeStateForServer
       }
     ),
-    /* @__PURE__ */ jsx53(IsolatedChildren, { children })
+    /* @__PURE__ */ jsx54(IsolatedChildren, { children })
   ] });
 }
 function useIsolatedCanvas() {
@@ -8470,7 +8491,7 @@ function useIsolatedCanvas() {
 
 // src/components/LoadingOverlayPrism.tsx
 import { useState as useState26, useEffect as useEffect27, useCallback as useCallback16, useRef as useRef19 } from "react";
-import { jsx as jsx54, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx55, jsxs as jsxs34 } from "react/jsx-runtime";
 function generateParticles() {
   return Array.from({ length: 16 }, () => ({
     left: 10 + Math.random() * 80,
@@ -8614,13 +8635,13 @@ function LoadingOverlayPrism({
       onTransitionEnd: handleTransitionEnd,
       children: [
         /* @__PURE__ */ jsxs34("div", { className: "prism-loading-rainbow", children: [
-          /* @__PURE__ */ jsx54("div", { className: "prism-loading-band" }),
-          /* @__PURE__ */ jsx54("div", { className: "prism-loading-band" }),
-          /* @__PURE__ */ jsx54("div", { className: "prism-loading-band" }),
-          /* @__PURE__ */ jsx54("div", { className: "prism-loading-band" }),
-          /* @__PURE__ */ jsx54("div", { className: "prism-loading-band" })
+          /* @__PURE__ */ jsx55("div", { className: "prism-loading-band" }),
+          /* @__PURE__ */ jsx55("div", { className: "prism-loading-band" }),
+          /* @__PURE__ */ jsx55("div", { className: "prism-loading-band" }),
+          /* @__PURE__ */ jsx55("div", { className: "prism-loading-band" }),
+          /* @__PURE__ */ jsx55("div", { className: "prism-loading-band" })
         ] }),
-        particles.map((p, i) => /* @__PURE__ */ jsx54(
+        particles.map((p, i) => /* @__PURE__ */ jsx55(
           "div",
           {
             className: "prism-loading-particle",
@@ -8682,7 +8703,7 @@ import {
   useCallback as useCallback17
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { Fragment as Fragment10, jsx as jsx55, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx56, jsxs as jsxs35 } from "react/jsx-runtime";
 var BANDS = [
   { rgb: "230, 45, 55", delay: "-0.0s" },
   // red
@@ -8863,8 +8884,8 @@ function CandyVisual({
       style,
       onTransitionEnd,
       children: [
-        BANDS.map((_, i) => /* @__PURE__ */ jsx55("div", { className: "candy-band" }, `b-${i}`)),
-        particles.map((p, i) => /* @__PURE__ */ jsx55(
+        BANDS.map((_, i) => /* @__PURE__ */ jsx56("div", { className: "candy-band" }, `b-${i}`)),
+        particles.map((p, i) => /* @__PURE__ */ jsx56(
           "div",
           {
             className: "candy-particle",
@@ -8930,7 +8951,7 @@ var LoadingOverlayPrismCandy = memo2(function LoadingOverlayPrismCandy2({
   if (!visible) fadeClass = "candy-fade-out";
   else if (mounted) fadeClass = "candy-fade-in";
   return /* @__PURE__ */ jsxs35(Fragment10, { children: [
-    /* @__PURE__ */ jsx55(
+    /* @__PURE__ */ jsx56(
       "div",
       {
         ref: anchorRef,
@@ -8943,7 +8964,7 @@ var LoadingOverlayPrismCandy = memo2(function LoadingOverlayPrismCandy2({
       }
     ),
     bounds && typeof document !== "undefined" && createPortal2(
-      /* @__PURE__ */ jsx55(
+      /* @__PURE__ */ jsx56(
         CandyVisual,
         {
           fadeClass,
@@ -8984,7 +9005,7 @@ var LoadingOverlayPrismCandyInline = memo2(
     let fadeClass = "";
     if (!visible) fadeClass = "candy-fade-out";
     else if (mounted) fadeClass = "candy-fade-in";
-    return /* @__PURE__ */ jsx55(
+    return /* @__PURE__ */ jsx56(
       CandyVisual,
       {
         fadeClass,
@@ -9005,7 +9026,7 @@ import { useRealtimeMockup as useRealtimeMockup3 } from "@snowcone-app/sdk/react
 import { getProduct as getProduct3, listProducts as listProducts4, getMockupUrl as getMockupUrl2 } from "@snowcone-app/sdk";
 
 // src/patterns/ProductPageProvider.tsx
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { jsx as jsx57 } from "react/jsx-runtime";
 function ProductPageProvider({
   children,
   productId,
@@ -9019,12 +9040,12 @@ function ProductPageProvider({
   realtimeGrantUrl,
   enablePriority = true
 }) {
-  let content = /* @__PURE__ */ jsx56(Product, { productId, productData, children });
+  let content = /* @__PURE__ */ jsx57(Product, { productId, productData, children });
   if (enablePriority) {
-    content = /* @__PURE__ */ jsx56(MockupPriorityProvider, { children: content });
+    content = /* @__PURE__ */ jsx57(MockupPriorityProvider, { children: content });
   }
   if (enableRealtime) {
-    content = /* @__PURE__ */ jsx56(
+    content = /* @__PURE__ */ jsx57(
       RealtimeProvider,
       {
         wsUrl: realtimeWsUrl,
@@ -9034,7 +9055,7 @@ function ProductPageProvider({
       }
     );
   }
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     Shop,
     {
       endpoint,
@@ -9054,14 +9075,14 @@ function ProductPageProviderMinimal({
   shop,
   initialArtwork
 }) {
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     Shop,
     {
       endpoint,
       mockupUrl,
       shop,
       initialArtwork,
-      children: /* @__PURE__ */ jsx56(Product, { productId, productData, children })
+      children: /* @__PURE__ */ jsx57(Product, { productId, productData, children })
     }
   );
 }
@@ -9078,7 +9099,7 @@ import {
   describeProductArtAlignment,
   getSnapPoints
 } from "@snowcone-app/sdk";
-import { Fragment as Fragment11, jsx as jsx57, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx58, jsxs as jsxs36 } from "react/jsx-runtime";
 function ArtAlignment({
   src: propSrc,
   artworkAspectRatio: propAspectRatio,
@@ -9416,7 +9437,7 @@ function ArtAlignment({
   if (!descriptor) {
     return null;
   }
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     "div",
     {
       className: `relative ${className || ""}`,
@@ -9425,8 +9446,8 @@ function ArtAlignment({
         width: "fit-content",
         maxWidth: "100%"
       },
-      children: /* @__PURE__ */ jsx57("div", { className: "overflow-hidden p-1", children: /* @__PURE__ */ jsxs36("div", { ref: containerRef, className: "relative", style: containerStyle, children: [
-        /* @__PURE__ */ jsx57(
+      children: /* @__PURE__ */ jsx58("div", { className: "overflow-hidden p-1", children: /* @__PURE__ */ jsxs36("div", { ref: containerRef, className: "relative", style: containerStyle, children: [
+        /* @__PURE__ */ jsx58(
           "img",
           {
             ref: imageRef,
@@ -9452,8 +9473,8 @@ function ArtAlignment({
           }
         ),
         isReady && maskDimensions.width > 0 && /* @__PURE__ */ jsxs36(Fragment11, { children: [
-          /* @__PURE__ */ jsx57("div", { style: overlayStyle }),
-          /* @__PURE__ */ jsx57(
+          /* @__PURE__ */ jsx58("div", { style: overlayStyle }),
+          /* @__PURE__ */ jsx58(
             "img",
             {
               src: descriptor.src,
@@ -9481,7 +9502,7 @@ function ArtAlignment({
               loading: "eager"
             }
           ),
-          /* @__PURE__ */ jsx57(
+          /* @__PURE__ */ jsx58(
             "div",
             {
               ...bind(),
@@ -9499,7 +9520,7 @@ function ArtAlignment({
 
 // src/composed/ArtworkCustomizer.tsx
 import { useEffect as useEffect30 } from "react";
-import { jsx as jsx58, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs37 } from "react/jsx-runtime";
 function ArtworkCustomizer(props) {
   const designContext = useDesign();
   const artwork = props.artwork || designContext.selectedArtwork;
@@ -9524,10 +9545,10 @@ function ArtworkCustomizer(props) {
   useEffect30(() => {
   }, [selectedPlacement]);
   if (!artwork) {
-    return /* @__PURE__ */ jsx58("div", { className: `text-sm text-muted-foreground ${props.className || ""}`, children: "Select artwork to customize" });
+    return /* @__PURE__ */ jsx59("div", { className: `text-sm text-muted-foreground ${props.className || ""}`, children: "Select artwork to customize" });
   }
   if (artwork.type === "pattern") {
-    return /* @__PURE__ */ jsx58(
+    return /* @__PURE__ */ jsx59(
       TileCount,
       {
         artwork,
@@ -9539,7 +9560,7 @@ function ArtworkCustomizer(props) {
   }
   const isCanvasEditorMode = props.mode === "canvas" || !!props.children && props.mode !== "alignment";
   return /* @__PURE__ */ jsxs37("div", { className: "flex flex-col gap-4", children: [
-    placements.length > 1 && /* @__PURE__ */ jsx58("div", { className: "text-sm leading-relaxed", children: placements.map((p) => /* @__PURE__ */ jsx58(
+    placements.length > 1 && /* @__PURE__ */ jsx59("div", { className: "text-sm leading-relaxed", children: placements.map((p) => /* @__PURE__ */ jsx59(
       "button",
       {
         onClick: () => setSelectedPlacement?.(p.label),
@@ -9548,7 +9569,7 @@ function ArtworkCustomizer(props) {
       },
       p.label
     )) }),
-    isColorPlacement ? /* @__PURE__ */ jsx58(ColorPicker2, { placement: selectedPlacement }) : isFitMode ? null : /* @__PURE__ */ jsx58("div", { className: "relative", children: props.children || /* @__PURE__ */ jsx58(
+    isColorPlacement ? /* @__PURE__ */ jsx59(ColorPicker2, { placement: selectedPlacement }) : isFitMode ? null : /* @__PURE__ */ jsx59("div", { className: "relative", children: props.children || /* @__PURE__ */ jsx59(
       ArtAlignment,
       {
         artwork: { src: artwork.src },
@@ -9569,7 +9590,7 @@ import {
   Shapes as LucideShapes,
   Upload as LucideUpload
 } from "lucide-react";
-import { jsx as jsx59, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs38 } from "react/jsx-runtime";
 var ImageIcon = LucideImage;
 var TypeIcon = LucideType;
 var ShapesIcon = LucideShapes;
@@ -9581,28 +9602,28 @@ function CanvasEditor({
   children
 }) {
   return /* @__PURE__ */ jsxs38("div", { className: "flex flex-col gap-6", children: [
-    /* @__PURE__ */ jsx59("div", { className: "bg-background border-2 border-border rounded-lg aspect-square overflow-hidden relative", children: children || /* @__PURE__ */ jsx59("div", { className: "flex items-center justify-center w-full h-full", children: /* @__PURE__ */ jsx59("div", { className: "text-muted-foreground text-sm", children: "No editor provided" }) }) }),
+    /* @__PURE__ */ jsx60("div", { className: "bg-background border-2 border-border rounded-lg aspect-square overflow-hidden relative", children: children || /* @__PURE__ */ jsx60("div", { className: "flex items-center justify-center w-full h-full", children: /* @__PURE__ */ jsx60("div", { className: "text-muted-foreground text-sm", children: "No editor provided" }) }) }),
     /* @__PURE__ */ jsxs38("div", { className: "flex items-center justify-center gap-8 py-2", children: [
-      /* @__PURE__ */ jsx59(
+      /* @__PURE__ */ jsx60(
         "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__ */ jsx59("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ jsx59(ImageIcon, { className: "w-6 h-6" }) })
+          children: /* @__PURE__ */ jsx60("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ jsx60(ImageIcon, { className: "w-6 h-6" }) })
         }
       ),
-      /* @__PURE__ */ jsx59(
+      /* @__PURE__ */ jsx60(
         "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__ */ jsx59("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ jsx59(TypeIcon, { className: "w-6 h-6" }) })
+          children: /* @__PURE__ */ jsx60("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ jsx60(TypeIcon, { className: "w-6 h-6" }) })
         }
       ),
-      /* @__PURE__ */ jsx59("button", { className: "flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx59("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ jsx59(ShapesIcon, { className: "w-6 h-6" }) }) }),
-      /* @__PURE__ */ jsx59("button", { className: "flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx59("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ jsx59(UploadIcon, { className: "w-6 h-6" }) }) })
+      /* @__PURE__ */ jsx60("button", { className: "flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx60("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ jsx60(ShapesIcon, { className: "w-6 h-6" }) }) }),
+      /* @__PURE__ */ jsx60("button", { className: "flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx60("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ jsx60(UploadIcon, { className: "w-6 h-6" }) }) })
     ] })
   ] });
 }
@@ -9659,7 +9680,7 @@ function useContainerWidth(containerRef, maxWidth = 3e3) {
 }
 
 // src/composed/HeroProductImage.tsx
-import { jsx as jsx60, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs39 } from "react/jsx-runtime";
 function slugifyPlacementKey(label) {
   return label.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
 }
@@ -9693,6 +9714,7 @@ function buildHeroMockupUrl(args) {
     width: args.width,
     view: args.mockupId,
     variant: args.variantId,
+    ...args.bg ? { bg: args.bg } : {},
     ...snow.resolver ? { base: snow.resolver } : {}
   });
 }
@@ -9730,6 +9752,7 @@ var HeroProductImage = memo3(function HeroProductImage2({
   const shopContext = useShopOptional();
   const realtimeContext = useRealtimeOptional();
   const priorityContext = useMockupPriorityOptional();
+  const mockupBg = useMockupBackgroundOptional();
   const priorityContextRef = useRef23(priorityContext);
   priorityContextRef.current = priorityContext;
   const contextRef = useRef23(context);
@@ -9780,7 +9803,8 @@ var HeroProductImage = memo3(function HeroProductImage2({
       placements: allPlacements,
       mockupId: actualMockupId,
       variantId: actualGvid,
-      width
+      width,
+      bg: mockupBg
     });
   }, [
     realtimeUrl,
@@ -9790,6 +9814,7 @@ var HeroProductImage = memo3(function HeroProductImage2({
     actualProductId,
     actualMockupId,
     actualGvid,
+    mockupBg,
     product?.placements,
     context?.product?.placements,
     images,
@@ -10025,7 +10050,8 @@ var HeroProductImage = memo3(function HeroProductImage2({
       placements: allPlacements,
       mockupId: actualMockupId,
       variantId: actualGvid,
-      width
+      width,
+      bg: mockupBg
     });
     if (!url) return;
     if (url === lastUrlRef.current) return;
@@ -10066,6 +10092,7 @@ var HeroProductImage = memo3(function HeroProductImage2({
     actualProductId,
     actualMockupId,
     actualGvid,
+    mockupBg,
     images,
     width,
     effects,
@@ -10139,20 +10166,20 @@ var HeroProductImage = memo3(function HeroProductImage2({
   }, []);
   const handleLoaderExited = useCallback18(() => setLoaderMounted(false), []);
   if (!hasArtwork) {
-    return /* @__PURE__ */ jsx60(
+    return /* @__PURE__ */ jsx61(
       "div",
       {
         className: `bg-gray-100 flex items-center justify-center ${className || ""}`,
         style,
         children: /* @__PURE__ */ jsxs39("div", { className: "text-gray-400 text-center p-4", children: [
-          /* @__PURE__ */ jsx60(
+          /* @__PURE__ */ jsx61(
             "svg",
             {
               className: "w-8 h-8 mx-auto mb-2",
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
-              children: /* @__PURE__ */ jsx60(
+              children: /* @__PURE__ */ jsx61(
                 "path",
                 {
                   strokeLinecap: "round",
@@ -10163,18 +10190,18 @@ var HeroProductImage = memo3(function HeroProductImage2({
               )
             }
           ),
-          /* @__PURE__ */ jsx60("p", { className: "text-xs", children: "No artwork" })
+          /* @__PURE__ */ jsx61("p", { className: "text-xs", children: "No artwork" })
         ] })
       }
     );
   }
   if (error) {
-    return /* @__PURE__ */ jsx60(
+    return /* @__PURE__ */ jsx61(
       "div",
       {
         className: `bg-red-50 flex items-center justify-center ${className || ""}`,
         style,
-        children: /* @__PURE__ */ jsx60("div", { className: "text-red-600 text-center p-4", children: /* @__PURE__ */ jsx60("p", { className: "text-xs", children: "Error loading" }) })
+        children: /* @__PURE__ */ jsx61("div", { className: "text-red-600 text-center p-4", children: /* @__PURE__ */ jsx61("p", { className: "text-xs", children: "Error loading" }) })
       }
     );
   }
@@ -10186,7 +10213,7 @@ var HeroProductImage = memo3(function HeroProductImage2({
       style,
       "data-hero-image": "true",
       children: [
-        renderedUrl && !imgFailed && /* @__PURE__ */ jsx60(
+        renderedUrl && !imgFailed && /* @__PURE__ */ jsx61(
           "img",
           {
             alt: `Product mockup${placement ? ` - ${placement}` : ""}`,
@@ -10225,8 +10252,8 @@ var HeroProductImage = memo3(function HeroProductImage2({
             }
           }
         ),
-        imgFailed && !prevUrl && /* @__PURE__ */ jsx60("div", { className: "absolute inset-0 flex items-center justify-center bg-muted", children: /* @__PURE__ */ jsx60("p", { className: "text-muted-foreground text-xs", children: "Preview unavailable" }) }),
-        realtimeContext?.renderError && /* @__PURE__ */ jsx60(
+        imgFailed && !prevUrl && /* @__PURE__ */ jsx61("div", { className: "absolute inset-0 flex items-center justify-center bg-muted", children: /* @__PURE__ */ jsx61("p", { className: "text-muted-foreground text-xs", children: "Preview unavailable" }) }),
+        realtimeContext?.renderError && /* @__PURE__ */ jsx61(
           "div",
           {
             role: "alert",
@@ -10235,7 +10262,7 @@ var HeroProductImage = memo3(function HeroProductImage2({
             children: `Render blocked: ${realtimeContext.renderError.code} \u2014 ${realtimeContext.renderError.message}`
           }
         ),
-        prevUrl && /* @__PURE__ */ jsx60(
+        prevUrl && /* @__PURE__ */ jsx61(
           "img",
           {
             alt: "",
@@ -10250,7 +10277,7 @@ var HeroProductImage = memo3(function HeroProductImage2({
             onTransitionEnd: handleCrossfadeEnd
           }
         ),
-        loaderMounted && /* @__PURE__ */ jsx60(
+        loaderMounted && /* @__PURE__ */ jsx61(
           LoadingOverlayPrismCandyInline,
           {
             visible: !firstImageLoaded,
@@ -10264,16 +10291,16 @@ var HeroProductImage = memo3(function HeroProductImage2({
 });
 
 // src/composed/SafeImg.tsx
-import React44, { useEffect as useEffect33, useState as useState32 } from "react";
-import { Fragment as Fragment12, jsx as jsx61 } from "react/jsx-runtime";
-var SafeImg = React44.forwardRef(
+import React45, { useEffect as useEffect33, useState as useState32 } from "react";
+import { Fragment as Fragment12, jsx as jsx62 } from "react/jsx-runtime";
+var SafeImg = React45.forwardRef(
   function SafeImg2({ fallback = null, onError, src, ...rest }, ref) {
     const [failed, setFailed] = useState32(false);
     useEffect33(() => {
       setFailed(false);
     }, [src]);
-    if (failed) return /* @__PURE__ */ jsx61(Fragment12, { children: fallback });
-    return /* @__PURE__ */ jsx61(
+    if (failed) return /* @__PURE__ */ jsx62(Fragment12, { children: fallback });
+    return /* @__PURE__ */ jsx62(
       "img",
       {
         ...rest,
@@ -10312,7 +10339,7 @@ var { searchClient } = instantMeiliSearch(
 
 // src/composed/search/SearchProvider.tsx
 import { useEffect as useEffect34 } from "react";
-import { jsx as jsx62, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs40 } from "react/jsx-runtime";
 function InitialSearchTrigger() {
   const { refine } = useSearchBox();
   useEffect34(() => {
@@ -10367,7 +10394,7 @@ function SearchProvider({
         }
       },
       children: [
-        /* @__PURE__ */ jsx62(
+        /* @__PURE__ */ jsx63(
           Configure,
           {
             hitsPerPage,
@@ -10376,7 +10403,7 @@ function SearchProvider({
             attributesToRetrieve
           }
         ),
-        /* @__PURE__ */ jsx62(InitialSearchTrigger, {}),
+        /* @__PURE__ */ jsx63(InitialSearchTrigger, {}),
         children
       ]
     }
@@ -10387,7 +10414,7 @@ function SearchProvider({
 import { useSearchBox as useSearchBox2 } from "react-instantsearch";
 import { Search, X } from "lucide-react";
 import { useEffect as useEffect35, useRef as useRef24, useState as useState33 } from "react";
-import { jsx as jsx63, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs41 } from "react/jsx-runtime";
 function SearchBox() {
   const { query, refine, clear } = useSearchBox2();
   const searchParams = useUiSearchParams();
@@ -10421,8 +10448,8 @@ function SearchBox() {
       return () => clearTimeout(timer);
     }
   }, [searchParams, router]);
-  return /* @__PURE__ */ jsx63("form", { role: "search", onSubmit: (e) => e.preventDefault(), children: /* @__PURE__ */ jsxs41("div", { className: "relative", children: [
-    /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx64("form", { role: "search", onSubmit: (e) => e.preventDefault(), children: /* @__PURE__ */ jsxs41("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx64(
       Input,
       {
         ref: inputRef,
@@ -10431,15 +10458,15 @@ function SearchBox() {
         value: query,
         onChange: (e) => refine(e.target.value),
         placeholder: "Search products...",
-        startContent: /* @__PURE__ */ jsx63(Search, { className: "w-5 h-5", strokeWidth: 1.5, "aria-hidden": "true" }),
-        endContent: query ? /* @__PURE__ */ jsx63(
+        startContent: /* @__PURE__ */ jsx64(Search, { className: "w-5 h-5", strokeWidth: 1.5, "aria-hidden": "true" }),
+        endContent: query ? /* @__PURE__ */ jsx64(
           "button",
           {
             type: "button",
             onClick: clear,
             className: "hover:text-foreground transition-colors",
             "aria-label": "Clear search",
-            children: /* @__PURE__ */ jsx63(X, { className: "w-4 h-4", strokeWidth: 2, "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx64(X, { className: "w-4 h-4", strokeWidth: 2, "aria-hidden": "true" })
           }
         ) : void 0,
         "aria-label": "Search products",
@@ -10449,11 +10476,11 @@ function SearchBox() {
         className: "[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden"
       }
     ),
-    showShimmer && /* @__PURE__ */ jsx63(
+    showShimmer && /* @__PURE__ */ jsx64(
       "div",
       {
         className: "absolute inset-0 pointer-events-none rounded-input z-20 overflow-hidden",
-        children: /* @__PURE__ */ jsx63(
+        children: /* @__PURE__ */ jsx64(
           "div",
           {
             className: "absolute inset-0",
@@ -10466,13 +10493,13 @@ function SearchBox() {
         )
       }
     ),
-    /* @__PURE__ */ jsx63("style", { dangerouslySetInnerHTML: { __html: `
+    /* @__PURE__ */ jsx64("style", { dangerouslySetInnerHTML: { __html: `
           @keyframes searchShimmer {
             0% { transform: translateX(-100%); }
             100% { transform: translateX(100%); }
           }
         ` } }),
-    /* @__PURE__ */ jsx63("span", { id: descriptionId, className: "sr-only", children: "Search results will update as you type" })
+    /* @__PURE__ */ jsx64("span", { id: descriptionId, className: "sr-only", children: "Search results will update as you type" })
   ] }) });
 }
 
@@ -10480,7 +10507,7 @@ function SearchBox() {
 import { Hits, useStats, useInstantSearch } from "react-instantsearch";
 
 // src/composed/search/ProductHit.tsx
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 function ProductHitComponent({
   hit: product,
   variant = "overlay"
@@ -10497,12 +10524,12 @@ function ProductHitComponent({
     }
     return "";
   };
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65(
     Product,
     {
       productId,
       productData: product,
-      children: /* @__PURE__ */ jsx64(
+      children: /* @__PURE__ */ jsx65(
         ProductCard,
         {
           variant,
@@ -10524,9 +10551,9 @@ function ProductHitComponent({
 
 // src/composed/search/ProductGrid.tsx
 import { useState as useState34, useEffect as useEffect36, useCallback as useCallback19 } from "react";
-import { jsx as jsx65, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx66, jsxs as jsxs42 } from "react/jsx-runtime";
 function ProductGridSkeletonItem() {
-  return /* @__PURE__ */ jsx65("div", { className: "aspect-square bg-muted animate-pulse" });
+  return /* @__PURE__ */ jsx66("div", { className: "aspect-square bg-muted animate-pulse" });
 }
 function ProductGrid({
   className = "",
@@ -10545,7 +10572,7 @@ function ProductGrid({
     }, 1e3);
     return () => clearTimeout(timer);
   }, [nbHits]);
-  const HitComponent = useCallback19(({ hit }) => /* @__PURE__ */ jsx65(
+  const HitComponent = useCallback19(({ hit }) => /* @__PURE__ */ jsx66(
     ProductHitComponent,
     {
       hit,
@@ -10553,9 +10580,9 @@ function ProductGrid({
     }
   ), [variant]);
   return /* @__PURE__ */ jsxs42("div", { className, children: [
-    /* @__PURE__ */ jsx65("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement }),
-    showSkeleton && /* @__PURE__ */ jsx65("div", { className: `grid ${gridClassName}`, children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsx65(ProductGridSkeletonItem, {}, i)) }),
-    /* @__PURE__ */ jsx65("div", { className: showSkeleton ? "hidden" : "", children: /* @__PURE__ */ jsx65(
+    /* @__PURE__ */ jsx66("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement }),
+    showSkeleton && /* @__PURE__ */ jsx66("div", { className: `grid ${gridClassName}`, children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ jsx66(ProductGridSkeletonItem, {}, i)) }),
+    /* @__PURE__ */ jsx66("div", { className: showSkeleton ? "hidden" : "", children: /* @__PURE__ */ jsx66(
       Hits,
       {
         hitComponent: HitComponent,
@@ -10574,7 +10601,7 @@ import { useState as useState36 } from "react";
 
 // src/composed/search/FiltersButton.tsx
 import { SlidersHorizontal as LucideSlidersHorizontal } from "lucide-react";
-import { jsx as jsx66, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs43 } from "react/jsx-runtime";
 var SlidersHorizontalIcon = LucideSlidersHorizontal;
 function FiltersButton({
   onClick,
@@ -10589,8 +10616,8 @@ function FiltersButton({
       className,
       "aria-label": "Open filters",
       children: [
-        /* @__PURE__ */ jsx66(SlidersHorizontalIcon, { className: "w-4 h-4" }),
-        /* @__PURE__ */ jsx66("span", { children })
+        /* @__PURE__ */ jsx67(SlidersHorizontalIcon, { className: "w-4 h-4" }),
+        /* @__PURE__ */ jsx67("span", { children })
       ]
     }
   );
@@ -10601,7 +10628,7 @@ import { useRefinementList, useRange, useStats as useStats2 } from "react-instan
 import { X as LucideX2, SlidersHorizontal as LucideSlidersHorizontal2 } from "lucide-react";
 import { useState as useState35, useEffect as useEffect37 } from "react";
 import * as Slider2 from "@radix-ui/react-slider";
-import { Fragment as Fragment13, jsx as jsx67, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx68, jsxs as jsxs44 } from "react/jsx-runtime";
 var XIcon2 = LucideX2;
 function FiltersDrawer({ isOpen, onClose }) {
   const [showCounts, setShowCounts] = useState35(false);
@@ -10627,7 +10654,7 @@ function FiltersDrawer({ isOpen, onClose }) {
     return () => document.removeEventListener("keydown", handleEscape);
   }, [isOpen, onClose]);
   return /* @__PURE__ */ jsxs44(Fragment13, { children: [
-    /* @__PURE__ */ jsx67(
+    /* @__PURE__ */ jsx68(
       "div",
       {
         className: `fixed inset-0 bg-black/50 z-40 transition-opacity ${isOpen ? "opacity-100" : "opacity-0 pointer-events-none"}`,
@@ -10645,25 +10672,25 @@ function FiltersDrawer({ isOpen, onClose }) {
         "aria-labelledby": "filters-drawer-title",
         children: [
           /* @__PURE__ */ jsxs44("div", { className: "flex items-center justify-between px-4 py-4", children: [
-            /* @__PURE__ */ jsx67("h2", { id: "filters-drawer-title", className: "text-xl font-bold", children: "Filters" }),
-            /* @__PURE__ */ jsx67(
+            /* @__PURE__ */ jsx68("h2", { id: "filters-drawer-title", className: "text-xl font-bold", children: "Filters" }),
+            /* @__PURE__ */ jsx68(
               "button",
               {
                 onClick: onClose,
                 className: "p-2 hover:bg-foreground/5 rounded-full transition-colors",
                 "aria-label": "Close filters",
-                children: /* @__PURE__ */ jsx67(XIcon2, { className: "w-5 h-5" })
+                children: /* @__PURE__ */ jsx68(XIcon2, { className: "w-5 h-5" })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx67("div", { className: "px-4 pb-4", children: /* @__PURE__ */ jsxs44("p", { className: "text-sm font-caption text-foreground/60", role: "status", "aria-live": "polite", children: [
+          /* @__PURE__ */ jsx68("div", { className: "px-4 pb-4", children: /* @__PURE__ */ jsxs44("p", { className: "text-sm font-caption text-foreground/60", role: "status", "aria-live": "polite", children: [
             nbHits.toLocaleString(),
             " ",
             nbHits === 1 ? "result" : "results"
           ] }) }),
-          /* @__PURE__ */ jsx67("div", { className: "flex-1 overflow-y-auto px-4 pb-4", children: /* @__PURE__ */ jsxs44("div", { className: "flex flex-col gap-8", children: [
-            /* @__PURE__ */ jsx67(TagsSection, { showCounts, setShowCounts }),
-            /* @__PURE__ */ jsx67(PriceSection, {})
+          /* @__PURE__ */ jsx68("div", { className: "flex-1 overflow-y-auto px-4 pb-4", children: /* @__PURE__ */ jsxs44("div", { className: "flex flex-col gap-8", children: [
+            /* @__PURE__ */ jsx68(TagsSection, { showCounts, setShowCounts }),
+            /* @__PURE__ */ jsx68(PriceSection, {})
           ] }) })
         ]
       }
@@ -10689,8 +10716,8 @@ function TagsSection({
         "aria-expanded": isExpanded,
         "aria-controls": "tags-content",
         children: [
-          /* @__PURE__ */ jsx67("h3", { className: "text-base font-semibold text-primary", children: "Tags" }),
-          /* @__PURE__ */ jsx67(
+          /* @__PURE__ */ jsx68("h3", { className: "text-base font-semibold text-primary", children: "Tags" }),
+          /* @__PURE__ */ jsx68(
             "svg",
             {
               className: `w-5 h-5 transition-transform text-foreground/40 group-hover:text-foreground/60 ${isExpanded ? "rotate-180" : ""}`,
@@ -10699,14 +10726,14 @@ function TagsSection({
               stroke: "currentColor",
               strokeWidth: 2.5,
               "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx67("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+              children: /* @__PURE__ */ jsx68("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
             }
           )
         ]
       }
     ),
     isExpanded && /* @__PURE__ */ jsxs44("div", { className: "space-y-4", id: "tags-content", children: [
-      /* @__PURE__ */ jsx67("div", { className: "flex flex-wrap gap-2", role: "group", "aria-label": "Product tags filter", children: items.map((item) => /* @__PURE__ */ jsxs44(
+      /* @__PURE__ */ jsx68("div", { className: "flex flex-wrap gap-2", role: "group", "aria-label": "Product tags filter", children: items.map((item) => /* @__PURE__ */ jsxs44(
         "button",
         {
           onClick: () => refine(item.value),
@@ -10717,15 +10744,15 @@ function TagsSection({
           "aria-label": `${item.isRefined ? "Remove" : "Apply"} ${item.label} filter${showCounts ? ` (${item.count} products)` : ""}`,
           "aria-pressed": item.isRefined,
           children: [
-            /* @__PURE__ */ jsx67("span", { "aria-hidden": "true", children: item.label }),
-            showCounts && /* @__PURE__ */ jsx67("span", { className: `text-xs font-caption ${item.isRefined ? "opacity-80" : "opacity-60"}`, "aria-hidden": "true", children: item.count })
+            /* @__PURE__ */ jsx68("span", { "aria-hidden": "true", children: item.label }),
+            showCounts && /* @__PURE__ */ jsx68("span", { className: `text-xs font-caption ${item.isRefined ? "opacity-80" : "opacity-60"}`, "aria-hidden": "true", children: item.count })
           ]
         },
         item.value
       )) }),
       /* @__PURE__ */ jsxs44("div", { className: "flex items-center justify-between pt-2", children: [
-        /* @__PURE__ */ jsx67("span", { className: "text-sm font-label text-foreground/60", id: "show-counts-label", children: "Show counts" }),
-        /* @__PURE__ */ jsx67(
+        /* @__PURE__ */ jsx68("span", { className: "text-sm font-label text-foreground/60", id: "show-counts-label", children: "Show counts" }),
+        /* @__PURE__ */ jsx68(
           "button",
           {
             onClick: () => setShowCounts(!showCounts),
@@ -10733,7 +10760,7 @@ function TagsSection({
             role: "switch",
             "aria-checked": showCounts,
             "aria-labelledby": "show-counts-label",
-            children: /* @__PURE__ */ jsx67(
+            children: /* @__PURE__ */ jsx68(
               "span",
               {
                 className: `inline-block h-4 w-4 transform rounded-full bg-background shadow-sm transition-transform ${showCounts ? "translate-x-6" : "translate-x-1"}`,
@@ -10788,8 +10815,8 @@ function PriceSection() {
         "aria-expanded": isExpanded,
         "aria-controls": "price-content",
         children: [
-          /* @__PURE__ */ jsx67("h3", { className: "text-base font-semibold text-primary", children: "Price" }),
-          /* @__PURE__ */ jsx67(
+          /* @__PURE__ */ jsx68("h3", { className: "text-base font-semibold text-primary", children: "Price" }),
+          /* @__PURE__ */ jsx68(
             "svg",
             {
               className: `w-5 h-5 transition-transform text-foreground/40 group-hover:text-foreground/60 ${isExpanded ? "rotate-180" : ""}`,
@@ -10798,7 +10825,7 @@ function PriceSection() {
               stroke: "currentColor",
               strokeWidth: 2.5,
               "aria-hidden": "true",
-              children: /* @__PURE__ */ jsx67("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+              children: /* @__PURE__ */ jsx68("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
             }
           )
         ]
@@ -10806,14 +10833,14 @@ function PriceSection() {
     ),
     isExpanded && /* @__PURE__ */ jsxs44("div", { className: "space-y-6", id: "price-content", children: [
       /* @__PURE__ */ jsxs44("div", { className: "flex items-center justify-between text-sm font-display", children: [
-        /* @__PURE__ */ jsx67("span", { children: formatPrice2(localRange[0]) }),
-        /* @__PURE__ */ jsx67("span", { className: "text-foreground/70", children: formatPrice2(localRange[1]) })
+        /* @__PURE__ */ jsx68("span", { children: formatPrice2(localRange[0]) }),
+        /* @__PURE__ */ jsx68("span", { className: "text-foreground/70", children: formatPrice2(localRange[1]) })
       ] }),
-      /* @__PURE__ */ jsx67("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__ */ jsx68("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__ */ jsx67(
+        return /* @__PURE__ */ jsx68(
           "div",
           {
             className: `flex-1 rounded-t-sm transition-opacity ${isInRange ? "bg-foreground" : "bg-foreground/20"}`,
@@ -10822,7 +10849,7 @@ function PriceSection() {
           i
         );
       }) }),
-      /* @__PURE__ */ jsx67("div", { style: { touchAction: "none" }, className: "my-6", children: /* @__PURE__ */ jsxs44(
+      /* @__PURE__ */ jsx68("div", { style: { touchAction: "none" }, className: "my-6", children: /* @__PURE__ */ jsxs44(
         Slider2.Root,
         {
           className: "relative flex w-full touch-none select-none items-center",
@@ -10840,8 +10867,8 @@ function PriceSection() {
           step: 1,
           minStepsBetweenThumbs: 1,
           children: [
-            /* @__PURE__ */ jsx67(Slider2.Track, { className: "relative h-3 w-full grow overflow-hidden rounded-full bg-foreground/20", children: /* @__PURE__ */ jsx67(Slider2.Range, { className: "absolute h-full bg-foreground" }) }),
-            /* @__PURE__ */ jsx67(
+            /* @__PURE__ */ jsx68(Slider2.Track, { className: "relative h-3 w-full grow overflow-hidden rounded-full bg-foreground/20", children: /* @__PURE__ */ jsx68(Slider2.Range, { className: "absolute h-full bg-foreground" }) }),
+            /* @__PURE__ */ jsx68(
               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",
@@ -10855,7 +10882,7 @@ function PriceSection() {
                 "aria-valuetext": formatPrice2(localRange[0])
               }
             ),
-            /* @__PURE__ */ jsx67(
+            /* @__PURE__ */ jsx68(
               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",
@@ -10874,8 +10901,8 @@ function PriceSection() {
       ) }),
       /* @__PURE__ */ jsxs44("div", { className: "grid grid-cols-2 gap-3", children: [
         /* @__PURE__ */ jsxs44("div", { children: [
-          /* @__PURE__ */ jsx67("label", { htmlFor: "price-min", className: "text-xs font-label text-foreground/60 mb-1.5 block", children: "Min" }),
-          /* @__PURE__ */ jsx67(
+          /* @__PURE__ */ jsx68("label", { htmlFor: "price-min", className: "text-xs font-label text-foreground/60 mb-1.5 block", children: "Min" }),
+          /* @__PURE__ */ jsx68(
             "input",
             {
               id: "price-min",
@@ -10894,8 +10921,8 @@ function PriceSection() {
           )
         ] }),
         /* @__PURE__ */ jsxs44("div", { children: [
-          /* @__PURE__ */ jsx67("label", { htmlFor: "price-max", className: "text-xs font-label text-foreground/60 mb-1.5 block", children: "Max" }),
-          /* @__PURE__ */ jsx67(
+          /* @__PURE__ */ jsx68("label", { htmlFor: "price-max", className: "text-xs font-label text-foreground/60 mb-1.5 block", children: "Max" }),
+          /* @__PURE__ */ jsx68(
             "input",
             {
               id: "price-max",
@@ -10919,11 +10946,11 @@ function PriceSection() {
 }
 
 // src/composed/search/Filters.tsx
-import { Fragment as Fragment14, jsx as jsx68, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx69, jsxs as jsxs45 } from "react/jsx-runtime";
 function Filters({ buttonClassName, buttonText }) {
   const [isOpen, setIsOpen] = useState36(false);
   return /* @__PURE__ */ jsxs45(Fragment14, { children: [
-    /* @__PURE__ */ jsx68(
+    /* @__PURE__ */ jsx69(
       FiltersButton,
       {
         onClick: () => setIsOpen(true),
@@ -10931,14 +10958,14 @@ function Filters({ buttonClassName, buttonText }) {
         children: buttonText
       }
     ),
-    /* @__PURE__ */ jsx68(FiltersDrawer, { isOpen, onClose: () => setIsOpen(false) })
+    /* @__PURE__ */ jsx69(FiltersDrawer, { isOpen, onClose: () => setIsOpen(false) })
   ] });
 }
 
 // src/composed/search/CurrentRefinements.tsx
 import { useCurrentRefinements } from "react-instantsearch";
 import { X as LucideX3 } from "lucide-react";
-import { jsx as jsx69, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx70, jsxs as jsxs46 } from "react/jsx-runtime";
 var XIcon3 = LucideX3;
 function CurrentRefinements() {
   const { items, refine } = useCurrentRefinements();
@@ -10984,15 +11011,15 @@ function CurrentRefinements() {
   if (allRefinements.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx69("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__ */ jsxs46(
+  return /* @__PURE__ */ jsx70("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__ */ jsxs46(
     "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__ */ jsx69("span", { className: "truncate", children: refinement.displayLabel }),
-        /* @__PURE__ */ jsx69(XIcon3, { className: "w-3 h-3" })
+        /* @__PURE__ */ jsx70("span", { className: "truncate", children: refinement.displayLabel }),
+        /* @__PURE__ */ jsx70(XIcon3, { className: "w-3 h-3" })
       ]
     },
     `${refinement.attribute}-${refinement.value}-${index}`
@@ -11021,7 +11048,7 @@ import { useState as useState39, useEffect as useEffect39 } from "react";
 // src/composed/zoom/ZoomOverlay.tsx
 import { useState as useState37, useCallback as useCallback20 } from "react";
 import { Plus as LucidePlus2, Minus as LucideMinus2 } from "lucide-react";
-import { Fragment as Fragment15, jsx as jsx70, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx71, jsxs as jsxs47 } from "react/jsx-runtime";
 var PlusIcon2 = LucidePlus2;
 var MinusIcon2 = LucideMinus2;
 function ZoomOverlay({
@@ -11081,8 +11108,8 @@ function ZoomOverlay({
   const isHovered = hoveredImageIndex === imageIndex;
   const cursorStyle = isLargeTouchDevice ? "pointer" : isTouchDevice ? "default" : "none";
   return /* @__PURE__ */ jsxs47(Fragment15, { children: [
-    /* @__PURE__ */ jsx70("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement }),
-    /* @__PURE__ */ jsx70(
+    /* @__PURE__ */ jsx71("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement }),
+    /* @__PURE__ */ jsx71(
       "div",
       {
         className,
@@ -11090,7 +11117,7 @@ function ZoomOverlay({
           ...style,
           position: "relative"
         },
-        children: /* @__PURE__ */ jsx70(
+        children: /* @__PURE__ */ jsx71(
           "div",
           {
             style: {
@@ -11113,7 +11140,7 @@ function ZoomOverlay({
                 handleZoomClick(e);
               }
             },
-            children: /* @__PURE__ */ jsx70(
+            children: /* @__PURE__ */ jsx71(
               "div",
               {
                 style: {
@@ -11129,7 +11156,7 @@ function ZoomOverlay({
         )
       }
     ),
-    isHovered && !isTouchDevice && /* @__PURE__ */ jsx70(
+    isHovered && !isTouchDevice && /* @__PURE__ */ jsx71(
       "div",
       {
         className: "fixed pointer-events-none z-50 hidden md:block",
@@ -11139,7 +11166,7 @@ function ZoomOverlay({
           transform: "translate(-50%, -50%)"
         },
         "aria-hidden": "true",
-        children: /* @__PURE__ */ jsx70("div", { className: "bg-white dark:bg-gray-800 rounded-full p-2 shadow-sm dark:shadow-gray-950/50", children: isZoomed ? /* @__PURE__ */ jsx70(
+        children: /* @__PURE__ */ jsx71("div", { className: "bg-white dark:bg-gray-800 rounded-full p-2 shadow-sm dark:shadow-gray-950/50", children: isZoomed ? /* @__PURE__ */ jsx71(
           MinusIcon2,
           {
             size: 20,
@@ -11147,7 +11174,7 @@ function ZoomOverlay({
             strokeWidth: 1.5,
             "aria-hidden": "true"
           }
-        ) : /* @__PURE__ */ jsx70(
+        ) : /* @__PURE__ */ jsx71(
           PlusIcon2,
           {
             size: 20,
@@ -11175,7 +11202,7 @@ import {
   TransformComponent as OriginalTransformComponent
 } from "react-zoom-pan-pinch";
 import { X as X2 } from "lucide-react";
-import { Fragment as Fragment16, jsx as jsx71, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx72, jsxs as jsxs48 } from "react/jsx-runtime";
 var TransformWrapper = OriginalTransformWrapper;
 var TransformComponent = OriginalTransformComponent;
 var EnhancedImageViewer = ({
@@ -11315,12 +11342,12 @@ var EnhancedImageViewer = ({
   );
   if (!isMounted || !isClient) {
     return createPortal3(
-      /* @__PURE__ */ jsx71(
+      /* @__PURE__ */ jsx72(
         "div",
         {
           className: "fixed inset-0 bg-black flex items-center justify-center",
           style: { zIndex: 999999 },
-          children: /* @__PURE__ */ jsx71(
+          children: /* @__PURE__ */ jsx72(
             "div",
             {
               style: {
@@ -11345,7 +11372,7 @@ var EnhancedImageViewer = ({
         "aria-modal": "true",
         "aria-label": "Image viewer",
         children: [
-          /* @__PURE__ */ jsx71(
+          /* @__PURE__ */ jsx72(
             "button",
             {
               onClick: (e) => {
@@ -11371,10 +11398,10 @@ var EnhancedImageViewer = ({
                 touchAction: "manipulation",
                 marginBottom: "env(safe-area-inset-bottom, 0px)"
               },
-              children: /* @__PURE__ */ jsx71(X2, { className: "w-7 h-7", strokeWidth: 2.5 })
+              children: /* @__PURE__ */ jsx72(X2, { className: "w-7 h-7", strokeWidth: 2.5 })
             }
           ),
-          /* @__PURE__ */ jsx71(
+          /* @__PURE__ */ jsx72(
             TransformWrapper,
             {
               initialScale: scale.initial,
@@ -11421,14 +11448,14 @@ var EnhancedImageViewer = ({
                   onTouchStart: handleTouchStart,
                   onTouchEnd: handleTouchEnd,
                   children: [
-                    /* @__PURE__ */ jsx71(
+                    /* @__PURE__ */ jsx72(
                       TransformComponent,
                       {
                         wrapperStyle: {
                           width: "100%",
                           height: "100%"
                         },
-                        children: /* @__PURE__ */ jsx71(
+                        children: /* @__PURE__ */ jsx72(
                           "div",
                           {
                             style: {
@@ -11439,7 +11466,7 @@ var EnhancedImageViewer = ({
                               alignItems: "center",
                               justifyContent: "center"
                             },
-                            children: /* @__PURE__ */ jsx71(
+                            children: /* @__PURE__ */ jsx72(
                               SafeImg,
                               {
                                 ref: imgRef,
@@ -11461,7 +11488,7 @@ var EnhancedImageViewer = ({
                       }
                     ),
                     /* @__PURE__ */ jsxs48("div", { className: "fixed bottom-5 left-0 right-0 z-50", children: [
-                      /* @__PURE__ */ jsx71("div", { className: "flex justify-center gap-2", children: (() => {
+                      /* @__PURE__ */ jsx72("div", { className: "flex justify-center gap-2", children: (() => {
                         let currentIndex = propCurrentIndex !== void 0 ? propCurrentIndex : -1;
                         if (currentIndex === -1) {
                           currentIndex = images.findIndex(
@@ -11495,7 +11522,7 @@ var EnhancedImageViewer = ({
                         const nextIndex = findNextAvailableIndex(currentIndex, 1);
                         const prevIndex = findNextAvailableIndex(currentIndex, -1);
                         return /* @__PURE__ */ jsxs48(Fragment16, { children: [
-                          /* @__PURE__ */ jsx71(
+                          /* @__PURE__ */ jsx72(
                             "button",
                             {
                               onClick: () => {
@@ -11508,7 +11535,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__ */ jsx71(
+                              children: /* @__PURE__ */ jsx72(
                                 "svg",
                                 {
                                   className: "w-4 h-4",
@@ -11516,7 +11543,7 @@ var EnhancedImageViewer = ({
                                   stroke: "currentColor",
                                   viewBox: "0 0 24 24",
                                   "aria-hidden": "true",
-                                  children: /* @__PURE__ */ jsx71(
+                                  children: /* @__PURE__ */ jsx72(
                                     "path",
                                     {
                                       strokeLinecap: "round",
@@ -11529,7 +11556,7 @@ var EnhancedImageViewer = ({
                               )
                             }
                           ),
-                          /* @__PURE__ */ jsx71(
+                          /* @__PURE__ */ jsx72(
                             "button",
                             {
                               onClick: () => {
@@ -11542,7 +11569,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__ */ jsx71(
+                              children: /* @__PURE__ */ jsx72(
                                 "svg",
                                 {
                                   className: "w-4 h-4",
@@ -11550,7 +11577,7 @@ var EnhancedImageViewer = ({
                                   stroke: "currentColor",
                                   viewBox: "0 0 24 24",
                                   "aria-hidden": "true",
-                                  children: /* @__PURE__ */ jsx71(
+                                  children: /* @__PURE__ */ jsx72(
                                     "path",
                                     {
                                       strokeLinecap: "round",
@@ -11565,7 +11592,7 @@ var EnhancedImageViewer = ({
                           )
                         ] });
                       })() }),
-                      /* @__PURE__ */ jsx71("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__ */ jsx72("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}`;
@@ -11577,7 +11604,7 @@ var EnhancedImageViewer = ({
             },
             `${scale.initial}-${scale.min}-${scale.max}`
           ),
-          /* @__PURE__ */ jsx71(
+          /* @__PURE__ */ jsx72(
             "div",
             {
               className: "absolute inset-0 bg-black",
@@ -11596,7 +11623,7 @@ var EnhancedImageViewer = ({
 };
 
 // src/composed/zoom/ResponsiveZoom.tsx
-import { Fragment as Fragment17, jsx as jsx72, jsxs as jsxs49 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx73, jsxs as jsxs49 } from "react/jsx-runtime";
 function ResponsiveZoom({
   imageIndex,
   children,
@@ -11638,7 +11665,7 @@ function ResponsiveZoom({
     }
   };
   return /* @__PURE__ */ jsxs49(Fragment17, { children: [
-    isTouchDevice ? /* @__PURE__ */ jsx72(
+    isTouchDevice ? /* @__PURE__ */ jsx73(
       "div",
       {
         className,
@@ -11655,7 +11682,7 @@ function ResponsiveZoom({
         },
         children
       }
-    ) : /* @__PURE__ */ jsx72(
+    ) : /* @__PURE__ */ jsx73(
       ZoomOverlay,
       {
         imageIndex,
@@ -11666,7 +11693,7 @@ function ResponsiveZoom({
         children
       }
     ),
-    showEnhancedViewer && isTouchDevice && currentImageUrl && /* @__PURE__ */ jsx72(
+    showEnhancedViewer && isTouchDevice && currentImageUrl && /* @__PURE__ */ jsx73(
       EnhancedImageViewer,
       {
         imageUrl: currentImageUrl,
@@ -11697,7 +11724,7 @@ import {
   useMemo as useMemo15,
   memo as memo4
 } from "react";
-import { jsx as jsx73, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs50 } from "react/jsx-runtime";
 function StaticCarouselImage({
   src,
   alt,
@@ -11705,9 +11732,9 @@ function StaticCarouselImage({
 }) {
   const [failed, setFailed] = useState40(false);
   if (failed || !src) {
-    return /* @__PURE__ */ jsx73("div", { className: `bg-muted ${className ?? ""}`, role: "img", "aria-label": alt });
+    return /* @__PURE__ */ jsx74("div", { className: `bg-muted ${className ?? ""}`, role: "img", "aria-label": alt });
   }
-  return /* @__PURE__ */ jsx73(
+  return /* @__PURE__ */ jsx74(
     "img",
     {
       src,
@@ -12197,14 +12224,14 @@ var MobileProductCarousel = memo4(function MobileProductCarousel2({
   );
   useEffect40(() => {
     if (stickyHeroContext?.setCarouselIndicator && images.length > 1) {
-      const indicator = /* @__PURE__ */ jsx73(
+      const indicator = /* @__PURE__ */ jsx74(
         "div",
         {
           className: "w-full",
           role: "group",
           "aria-label": "Product image navigation",
           children: /* @__PURE__ */ jsxs50("div", { className: "relative h-1", children: [
-            /* @__PURE__ */ jsx73("div", { className: "flex h-full", children: images.map((_, index) => /* @__PURE__ */ jsx73(
+            /* @__PURE__ */ jsx74("div", { className: "flex h-full", children: images.map((_, index) => /* @__PURE__ */ jsx74(
               "button",
               {
                 onClick: () => goToSlide(index),
@@ -12214,7 +12241,7 @@ var MobileProductCarousel = memo4(function MobileProductCarousel2({
               },
               index
             )) }),
-            /* @__PURE__ */ jsx73(
+            /* @__PURE__ */ jsx74(
               "div",
               {
                 className: "absolute top-0 h-full bg-primary transition-all duration-300 ease-out",
@@ -12237,10 +12264,10 @@ var MobileProductCarousel = memo4(function MobileProductCarousel2({
     };
   }, [activeIndex, images.length, goToSlide, stickyHeroContext]);
   if (!images || images.length === 0) {
-    return /* @__PURE__ */ jsx73("div", { className: "w-full aspect-video bg-muted rounded-lg" });
+    return /* @__PURE__ */ jsx74("div", { className: "w-full aspect-video bg-muted rounded-lg" });
   }
   return /* @__PURE__ */ jsxs50("div", { className: `relative w-full h-full ${className}`, children: [
-    /* @__PURE__ */ jsx73(
+    /* @__PURE__ */ jsx74(
       "div",
       {
         ref: carouselRef,
@@ -12258,7 +12285,7 @@ var MobileProductCarousel = memo4(function MobileProductCarousel2({
         role: "region",
         "aria-roledescription": "carousel",
         "aria-label": "Product images",
-        children: /* @__PURE__ */ jsx73(
+        children: /* @__PURE__ */ jsx74(
           "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)]" : ""}`,
@@ -12268,15 +12295,15 @@ var MobileProductCarousel = memo4(function MobileProductCarousel2({
             children: images.map((image, index) => {
               const DECODE_WINDOW = 1;
               const isWithinDecodeWindow = Math.abs(index - activeIndex) <= DECODE_WINDOW;
-              return /* @__PURE__ */ jsx73(
+              return /* @__PURE__ */ jsx74(
                 "div",
                 {
                   className: "w-full h-full flex-shrink-0 relative select-none",
-                  children: !isWithinDecodeWindow ? /* @__PURE__ */ jsx73("div", { className: "w-full h-full bg-muted" }) : image.isPlaceholder ? (
+                  children: !isWithinDecodeWindow ? /* @__PURE__ */ jsx74("div", { className: "w-full h-full bg-muted" }) : image.isPlaceholder ? (
                     // Rainbow prism loader (same as the /create route) instead of
                     // a flat pulse; fills this relative slide via inset:0.
-                    /* @__PURE__ */ jsx73(LoadingOverlayPrismCandyInline, { visible: true, variant: "light" })
-                  ) : image.isRealMockup && currentArtwork ? /* @__PURE__ */ jsx73(
+                    /* @__PURE__ */ jsx74(LoadingOverlayPrismCandyInline, { visible: true, variant: "light" })
+                  ) : image.isRealMockup && currentArtwork ? /* @__PURE__ */ jsx74(
                     HeroProductImage,
                     {
                       productId,
@@ -12288,7 +12315,7 @@ var MobileProductCarousel = memo4(function MobileProductCarousel2({
                       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__ */ jsx73(LoadingOverlayPrismCandyInline, { visible: true, variant: "light" }) : /* @__PURE__ */ jsx73(
+                  ) : image.isRealMockup && !currentArtwork ? /* @__PURE__ */ jsx74(LoadingOverlayPrismCandyInline, { visible: true, variant: "light" }) : /* @__PURE__ */ jsx74(
                     StaticCarouselImage,
                     {
                       src: image.src,
@@ -12304,7 +12331,7 @@ var MobileProductCarousel = memo4(function MobileProductCarousel2({
         )
       }
     ),
-    showIndicators && images.length > 1 && /* @__PURE__ */ jsx73(
+    showIndicators && images.length > 1 && /* @__PURE__ */ jsx74(
       "div",
       {
         ref: indicatorRef,
@@ -12313,7 +12340,7 @@ var MobileProductCarousel = memo4(function MobileProductCarousel2({
         role: "group",
         "aria-label": "Product image navigation",
         children: /* @__PURE__ */ jsxs50("div", { className: "relative h-1", children: [
-          /* @__PURE__ */ jsx73("div", { className: "flex h-full absolute inset-0", children: images.map((_, index) => /* @__PURE__ */ jsx73(
+          /* @__PURE__ */ jsx74("div", { className: "flex h-full absolute inset-0", children: images.map((_, index) => /* @__PURE__ */ jsx74(
             "button",
             {
               onClick: () => goToSlide(index),
@@ -12323,7 +12350,7 @@ var MobileProductCarousel = memo4(function MobileProductCarousel2({
             },
             index
           )) }),
-          /* @__PURE__ */ jsx73(
+          /* @__PURE__ */ jsx74(
             "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"}`,
@@ -12358,7 +12385,7 @@ var MobileProductCarousel = memo4(function MobileProductCarousel2({
           naturalHeight: img.naturalHeight
         } : null;
       }).filter((img) => img !== null);
-      return /* @__PURE__ */ jsx73(
+      return /* @__PURE__ */ jsx74(
         EnhancedImageViewer,
         {
           imageUrl,
@@ -12398,7 +12425,7 @@ var MobileProductCarousel = memo4(function MobileProductCarousel2({
 
 // src/composed/carousels/HeroCarousel.tsx
 import { useState as useState41, useRef as useRef27, useCallback as useCallback23, useEffect as useEffect41 } from "react";
-import { jsx as jsx74, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx75, jsxs as jsxs51 } from "react/jsx-runtime";
 function HeroCarousel({
   images,
   currentIndex = 0,
@@ -12477,7 +12504,7 @@ function HeroCarousel({
     };
   }, [activeIndex, images.length, goToSlide, onImageTap]);
   if (!images || images.length === 0) {
-    return /* @__PURE__ */ jsx74("div", { className: "w-full h-full bg-muted" });
+    return /* @__PURE__ */ jsx75("div", { className: "w-full h-full bg-muted" });
   }
   return /* @__PURE__ */ jsxs51(
     "div",
@@ -12490,7 +12517,7 @@ function HeroCarousel({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ jsx74(
+        /* @__PURE__ */ jsx75(
           "div",
           {
             className: "flex h-full transition-transform duration-300 ease-out",
@@ -12501,14 +12528,14 @@ function HeroCarousel({
               backfaceVisibility: "hidden",
               WebkitBackfaceVisibility: "hidden"
             },
-            children: images.map((image, index) => /* @__PURE__ */ jsx74(
+            children: images.map((image, index) => /* @__PURE__ */ jsx75(
               "div",
               {
                 className: "w-full h-full flex-shrink-0",
                 style: {
                   contain: "layout paint"
                 },
-                children: image.isRealMockup && currentArtwork ? /* @__PURE__ */ jsx74(
+                children: image.isRealMockup && currentArtwork ? /* @__PURE__ */ jsx75(
                   HeroProductImage,
                   {
                     productId,
@@ -12517,7 +12544,7 @@ function HeroCarousel({
                     mockupId: image.mockupId,
                     className: "w-full h-full object-cover"
                   }
-                ) : /* @__PURE__ */ jsx74(
+                ) : /* @__PURE__ */ jsx75(
                   "img",
                   {
                     src: image.src,
@@ -12534,12 +12561,12 @@ function HeroCarousel({
             ))
           }
         ),
-        images.length > 1 && /* @__PURE__ */ jsx74(
+        images.length > 1 && /* @__PURE__ */ jsx75(
           "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__ */ jsx74(
+            children: images.map((_, index) => /* @__PURE__ */ jsx75(
               "button",
               {
                 onClick: () => goToSlide(index),
@@ -12557,7 +12584,7 @@ function HeroCarousel({
 
 // src/composed/grids/MasonryGrid.tsx
 import { useState as useState42, useEffect as useEffect42, useMemo as useMemo16 } from "react";
-import { Fragment as Fragment18, jsx as jsx75 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx76 } from "react/jsx-runtime";
 var BREAKPOINTS = {
   sm: 640,
   md: 768,
@@ -12629,24 +12656,24 @@ function MasonryGrid({
   );
   if (items.length === 0) {
     if (emptyContent) {
-      return /* @__PURE__ */ jsx75(Fragment18, { children: emptyContent });
+      return /* @__PURE__ */ jsx76(Fragment18, { children: emptyContent });
     }
     return null;
   }
-  return /* @__PURE__ */ jsx75(
+  return /* @__PURE__ */ jsx76(
     "div",
     {
       className: `flex ${className}`,
       style: { gap: `${gap}px` },
       role: "list",
-      children: distributedColumns.map((columnItems, columnIndex) => /* @__PURE__ */ jsx75(
+      children: distributedColumns.map((columnItems, columnIndex) => /* @__PURE__ */ jsx76(
         "div",
         {
           className: "flex-1 flex flex-col",
           style: { gap: `${gap}px` },
           children: columnItems.map((item, itemIndex) => {
             const originalIndex = itemIndex * columnCount + columnIndex;
-            return /* @__PURE__ */ jsx75("div", { role: "listitem", children: renderItem(item, originalIndex) }, originalIndex);
+            return /* @__PURE__ */ jsx76("div", { role: "listitem", children: renderItem(item, originalIndex) }, originalIndex);
           })
         },
         columnIndex
@@ -12745,7 +12772,7 @@ function useHeroZoomScales(config = {}) {
 }
 
 // src/layouts/hero-zoom/HeroZoomLayout.tsx
-import { jsx as jsx76, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs52 } from "react/jsx-runtime";
 function HeroZoomLayout({
   config = {},
   header,
@@ -12918,8 +12945,8 @@ function HeroZoomLayout({
         "--hero-zoom-final-transform": 1 / activeRender
       },
       children: [
-        /* @__PURE__ */ jsx76("style", { dangerouslySetInnerHTML: { __html: scopedStyles } }),
-        /* @__PURE__ */ jsx76(
+        /* @__PURE__ */ jsx77("style", { dangerouslySetInnerHTML: { __html: scopedStyles } }),
+        /* @__PURE__ */ jsx77(
           "div",
           {
             style: {
@@ -12927,7 +12954,7 @@ function HeroZoomLayout({
             }
           }
         ),
-        header && /* @__PURE__ */ jsx76(
+        header && /* @__PURE__ */ jsx77(
           "div",
           {
             ref: headerRef,
@@ -12940,7 +12967,7 @@ function HeroZoomLayout({
             children: header
           }
         ),
-        /* @__PURE__ */ jsx76(
+        /* @__PURE__ */ jsx77(
           "div",
           {
             ref: imageContainerRef,
@@ -12960,7 +12987,7 @@ function HeroZoomLayout({
             children: hero
           }
         ),
-        /* @__PURE__ */ jsx76("div", { className: "relative z-10", children })
+        /* @__PURE__ */ jsx77("div", { className: "relative z-10", children })
       ]
     }
   );
@@ -12968,7 +12995,7 @@ function HeroZoomLayout({
 
 // src/layouts/hero-zoom/HeroShrinkLayout.tsx
 import { useEffect as useEffect45, useRef as useRef29, useState as useState44 } from "react";
-import { jsx as jsx77, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx78, jsxs as jsxs53 } from "react/jsx-runtime";
 var DEFAULT_CONFIG = {
   aspectRatio: 16 / 9,
   initialHeightPercent: 70,
@@ -13087,9 +13114,9 @@ function HeroShrinkLayout({
       className: `relative min-h-screen ${className}`,
       style: { ...style, ...cssVars },
       children: [
-        /* @__PURE__ */ jsx77("style", { dangerouslySetInnerHTML: { __html: scopedStyles } }),
-        /* @__PURE__ */ jsx77("div", { style: { height: spacerHeight } }),
-        header && /* @__PURE__ */ jsx77(
+        /* @__PURE__ */ jsx78("style", { dangerouslySetInnerHTML: { __html: scopedStyles } }),
+        /* @__PURE__ */ jsx78("div", { style: { height: spacerHeight } }),
+        header && /* @__PURE__ */ jsx78(
           "div",
           {
             ref: headerRef,
@@ -13098,7 +13125,7 @@ function HeroShrinkLayout({
             children: header
           }
         ),
-        /* @__PURE__ */ jsx77(
+        /* @__PURE__ */ jsx78(
           "div",
           {
             ref: heroRef,
@@ -13106,15 +13133,15 @@ function HeroShrinkLayout({
             children: hero
           }
         ),
-        /* @__PURE__ */ jsx77("div", { className: "relative z-10 bg-background", children })
+        /* @__PURE__ */ jsx78("div", { className: "relative z-10 bg-background", children })
       ]
     }
   );
 }
 
 // src/layouts/pdp/ImageEdgeBlur.tsx
-import React51 from "react";
-import { jsx as jsx78 } from "react/jsx-runtime";
+import React52 from "react";
+import { jsx as jsx79 } from "react/jsx-runtime";
 var BLUR_CONFIG = {
   blur: 24,
   crossfade: 68
@@ -13138,7 +13165,7 @@ var BLUR_LAYERS = [
   { blur: Math.round(BLUR_CONFIG.blur * 0.5), zone: 0.6 },
   { blur: BLUR_CONFIG.blur, zone: 1 }
 ];
-var ImageEdgeBlur = React51.memo(
+var ImageEdgeBlur = React52.memo(
   function ImageEdgeBlur2({
     imageSrc,
     imageCapInfo,
@@ -13169,7 +13196,7 @@ var ImageEdgeBlur = React51.memo(
       viewportWidth / LAYOUT_CONFIG2.IMAGE.ASPECT_RATIO,
       maxWidthPx / LAYOUT_CONFIG2.IMAGE.ASPECT_RATIO
     );
-    return /* @__PURE__ */ jsx78(
+    return /* @__PURE__ */ jsx79(
       "div",
       {
         className: `absolute inset-0 pointer-events-none overflow-hidden ${className}`,
@@ -13177,7 +13204,7 @@ var ImageEdgeBlur = React51.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__ */ jsx78(
+          return /* @__PURE__ */ jsx79(
             "img",
             {
               src: imageSrc,
@@ -13224,7 +13251,7 @@ var ImageEdgeBlur = React51.memo(
 );
 
 // src/layouts/pdp/PDPLayout.tsx
-import { jsx as jsx79, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx80, jsxs as jsxs54 } from "react/jsx-runtime";
 function PDPLayout({
   renderHeroImage,
   renderContent,
@@ -13254,13 +13281,13 @@ function PDPLayout({
   };
   return /* @__PURE__ */ jsxs54("div", { className: `pdp-layout ${className}`, children: [
     (isDesktop === false || isDesktop === null) && /* @__PURE__ */ jsxs54("div", { className: "md:hidden", children: [
-      renderMobileCarousel && /* @__PURE__ */ jsx79("div", { className: "mobile-carousel-container", children: renderMobileCarousel({ images: carouselImages }) }),
-      /* @__PURE__ */ jsx79("div", { className: "mobile-content p-4", children: renderContent(contentProps) })
+      renderMobileCarousel && /* @__PURE__ */ jsx80("div", { className: "mobile-carousel-container", children: renderMobileCarousel({ images: carouselImages }) }),
+      /* @__PURE__ */ jsx80("div", { className: "mobile-content p-4", children: renderContent(contentProps) })
     ] }),
     (isDesktop === true || isDesktop === null) && /* @__PURE__ */ jsxs54("div", { className: "hidden md:block relative", children: [
       /* @__PURE__ */ jsxs54("div", { className: "desktop-hero relative", children: [
         renderHeroImage(heroProps),
-        showEdgeBlur && blurImageSrc && isWideMonitor2 && /* @__PURE__ */ jsx79(
+        showEdgeBlur && blurImageSrc && isWideMonitor2 && /* @__PURE__ */ jsx80(
           ImageEdgeBlur,
           {
             imageSrc: blurImageSrc,
@@ -13271,7 +13298,7 @@ function PDPLayout({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx79(
+      /* @__PURE__ */ jsx80(
         "div",
         {
           className: "desktop-sidebar",
@@ -13288,8 +13315,8 @@ function PDPLayout({
 }
 
 // src/layouts/pdp/SimpleImageBlur.tsx
-import React52 from "react";
-import { jsx as jsx80 } from "react/jsx-runtime";
+import React53 from "react";
+import { jsx as jsx81 } from "react/jsx-runtime";
 var BLUR_CONFIG2 = {
   blur: 24,
   crossfade: 60
@@ -13312,7 +13339,7 @@ function getFadeInMask(crossfadeWidth) {
     black ${crossfadeWidth + 10}px
   )`;
 }
-var SimpleImageBlur = React52.memo(function SimpleImageBlur2({
+var SimpleImageBlur = React53.memo(function SimpleImageBlur2({
   imageSrc,
   width,
   height = "100%",
@@ -13322,7 +13349,7 @@ var SimpleImageBlur = React52.memo(function SimpleImageBlur2({
   if (!imageSrc || width <= 0) return null;
   const fadeInMask = getFadeInMask(BLUR_CONFIG2.crossfade);
   const extendedWidth = width + BLUR_CONFIG2.blur * 2;
-  return /* @__PURE__ */ jsx80(
+  return /* @__PURE__ */ jsx81(
     "div",
     {
       className: `relative overflow-hidden ${className}`,
@@ -13335,7 +13362,7 @@ var SimpleImageBlur = React52.memo(function SimpleImageBlur2({
                 black 0%,
                 black ${layer.zone * 100}%,
                 transparent ${layer.zone * 100 + 10}%)`;
-        return /* @__PURE__ */ jsx80(
+        return /* @__PURE__ */ jsx81(
           "img",
           {
             src: imageSrc,
@@ -13365,8 +13392,8 @@ var SimpleImageBlur = React52.memo(function SimpleImageBlur2({
 });
 
 // src/layouts/pdp/EdgeBlurBox.tsx
-import React53 from "react";
-import { jsx as jsx81, jsxs as jsxs55 } from "react/jsx-runtime";
+import React54 from "react";
+import { jsx as jsx82, jsxs as jsxs55 } from "react/jsx-runtime";
 var BLUR_CONFIG3 = {
   blur: 24,
   crossfade: 60
@@ -13390,7 +13417,7 @@ function getFadeOutMask(crossfadeWidth) {
     transparent 100%
   )`;
 }
-var EdgeBlurBox = React53.memo(function EdgeBlurBox2({
+var EdgeBlurBox = React54.memo(function EdgeBlurBox2({
   imageSrc,
   width,
   height = "100%",
@@ -13416,7 +13443,7 @@ var EdgeBlurBox = React53.memo(function EdgeBlurBox2({
         overflow: hasOverlap ? "visible" : "hidden"
       },
       children: [
-        /* @__PURE__ */ jsx81(
+        /* @__PURE__ */ jsx82(
           "div",
           {
             style: {
@@ -13430,7 +13457,7 @@ var EdgeBlurBox = React53.memo(function EdgeBlurBox2({
                   transparent ${100 - (layer.zone * 100 + 10)}%,
                   black ${100 - layer.zone * 100}%,
                   black 100%)`;
-              return /* @__PURE__ */ jsx81(
+              return /* @__PURE__ */ jsx82(
                 "img",
                 {
                   src: imageSrc,
@@ -13458,7 +13485,7 @@ var EdgeBlurBox = React53.memo(function EdgeBlurBox2({
             })
           }
         ),
-        /* @__PURE__ */ jsx81(
+        /* @__PURE__ */ jsx82(
           "img",
           {
             src: imageSrc,
@@ -13486,8 +13513,8 @@ var EdgeBlurBox = React53.memo(function EdgeBlurBox2({
 });
 
 // src/layouts/pdp/ImageBlurExtension.tsx
-import React54 from "react";
-import { jsx as jsx82, jsxs as jsxs56 } from "react/jsx-runtime";
+import React55 from "react";
+import { jsx as jsx83, jsxs as jsxs56 } from "react/jsx-runtime";
 var BLUR_CONFIG4 = {
   blur: 24,
   crossfadeWidth: 80
@@ -13510,7 +13537,7 @@ function getFadeOutMask2(crossfadeWidth) {
     transparent 100%
   )`;
 }
-var ImageBlurExtension = React54.memo(function ImageBlurExtension2({
+var ImageBlurExtension = React55.memo(function ImageBlurExtension2({
   imageSrc,
   width,
   height,
@@ -13533,7 +13560,7 @@ var ImageBlurExtension = React54.memo(function ImageBlurExtension2({
         height: heightValue
       },
       children: [
-        BLUR_LAYERS4.map((layer, index) => /* @__PURE__ */ jsx82(
+        BLUR_LAYERS4.map((layer, index) => /* @__PURE__ */ jsx83(
           "img",
           {
             src: imageSrc,
@@ -13557,7 +13584,7 @@ var ImageBlurExtension = React54.memo(function ImageBlurExtension2({
           },
           `blur-${index}`
         )),
-        /* @__PURE__ */ jsx82(
+        /* @__PURE__ */ jsx83(
           "img",
           {
             src: imageSrc,
@@ -13585,23 +13612,23 @@ var ImageBlurExtension = React54.memo(function ImageBlurExtension2({
 });
 
 // src/design-system/ColorSwatch.tsx
-import { jsx as jsx83, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx84, jsxs as jsxs57 } from "react/jsx-runtime";
 function ColorTokenSwatch({ name, cssVar, className = "" }) {
   return /* @__PURE__ */ jsxs57("div", { className: `flex flex-col gap-1 ${className}`, children: [
-    /* @__PURE__ */ jsx83(
+    /* @__PURE__ */ jsx84(
       "div",
       {
         className: "h-16 w-full rounded-lg border border-border shadow-sm",
         style: { backgroundColor: `var(${cssVar})` }
       }
     ),
-    /* @__PURE__ */ jsx83("div", { className: "text-sm font-medium text-foreground", children: name }),
-    /* @__PURE__ */ jsx83("code", { className: "text-xs text-muted-foreground font-mono", children: cssVar })
+    /* @__PURE__ */ jsx84("div", { className: "text-sm font-medium text-foreground", children: name }),
+    /* @__PURE__ */ jsx84("code", { className: "text-xs text-muted-foreground font-mono", children: cssVar })
   ] });
 }
 function ColorRow({ name, cssVar, description }) {
   return /* @__PURE__ */ jsxs57("div", { className: "flex items-center gap-4 py-2", children: [
-    /* @__PURE__ */ jsx83(
+    /* @__PURE__ */ jsx84(
       "div",
       {
         className: "h-10 w-10 rounded-lg border border-border shadow-sm flex-shrink-0",
@@ -13609,15 +13636,15 @@ function ColorRow({ name, cssVar, description }) {
       }
     ),
     /* @__PURE__ */ jsxs57("div", { className: "flex-1 min-w-0", children: [
-      /* @__PURE__ */ jsx83("div", { className: "text-sm font-medium text-foreground", children: name }),
-      description && /* @__PURE__ */ jsx83("div", { className: "text-xs text-muted-foreground", children: description })
+      /* @__PURE__ */ jsx84("div", { className: "text-sm font-medium text-foreground", children: name }),
+      description && /* @__PURE__ */ jsx84("div", { className: "text-xs text-muted-foreground", children: description })
     ] }),
-    /* @__PURE__ */ jsx83("code", { className: "text-xs text-muted-foreground font-mono bg-muted px-2 py-1 rounded", children: cssVar })
+    /* @__PURE__ */ jsx84("code", { className: "text-xs text-muted-foreground font-mono bg-muted px-2 py-1 rounded", children: cssVar })
   ] });
 }
 
 // src/design-system/ColorPalette.tsx
-import { jsx as jsx84, jsxs as jsxs58 } from "react/jsx-runtime";
+import { jsx as jsx85, jsxs as jsxs58 } from "react/jsx-runtime";
 var COLOR_GROUPS = [
   {
     name: "Base",
@@ -13698,17 +13725,17 @@ var COLOR_GROUPS = [
   }
 ];
 function ColorPalette({ layout = "list", className = "" }) {
-  return /* @__PURE__ */ jsx84("div", { className: `space-y-8 ${className}`, children: COLOR_GROUPS.map((group) => /* @__PURE__ */ jsxs58("section", { children: [
-    /* @__PURE__ */ jsx84("h3", { className: "text-lg font-semibold text-foreground mb-1", children: group.name }),
-    /* @__PURE__ */ jsx84("p", { className: "text-sm text-muted-foreground mb-4", children: group.description }),
-    layout === "grid" ? /* @__PURE__ */ jsx84("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4", children: group.colors.map((color) => /* @__PURE__ */ jsx84(
+  return /* @__PURE__ */ jsx85("div", { className: `space-y-8 ${className}`, children: COLOR_GROUPS.map((group) => /* @__PURE__ */ jsxs58("section", { children: [
+    /* @__PURE__ */ jsx85("h3", { className: "text-lg font-semibold text-foreground mb-1", children: group.name }),
+    /* @__PURE__ */ jsx85("p", { className: "text-sm text-muted-foreground mb-4", children: group.description }),
+    layout === "grid" ? /* @__PURE__ */ jsx85("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4", children: group.colors.map((color) => /* @__PURE__ */ jsx85(
       ColorTokenSwatch,
       {
         name: color.name,
         cssVar: color.cssVar
       },
       color.cssVar
-    )) }) : /* @__PURE__ */ jsx84("div", { className: "bg-card rounded-lg border border-border p-4 divide-y divide-border", children: group.colors.map((color) => /* @__PURE__ */ jsx84(
+    )) }) : /* @__PURE__ */ jsx85("div", { className: "bg-card rounded-lg border border-border p-4 divide-y divide-border", children: group.colors.map((color) => /* @__PURE__ */ jsx85(
       ColorRow,
       {
         name: color.name,
@@ -13721,7 +13748,7 @@ function ColorPalette({ layout = "list", className = "" }) {
 }
 
 // src/design-system/TypographyScale.tsx
-import { jsx as jsx85, jsxs as jsxs59 } from "react/jsx-runtime";
+import { jsx as jsx86, jsxs as jsxs59 } from "react/jsx-runtime";
 var FONT_SAMPLES = [
   {
     name: "Heading",
@@ -13755,14 +13782,14 @@ var FONT_SAMPLES = [
   }
 ];
 function TypographyScale({ className = "" }) {
-  return /* @__PURE__ */ jsx85("div", { className: `space-y-8 ${className}`, children: FONT_SAMPLES.map((font) => /* @__PURE__ */ jsxs59("section", { className: "bg-card rounded-lg border border-border p-6", children: [
+  return /* @__PURE__ */ jsx86("div", { className: `space-y-8 ${className}`, children: FONT_SAMPLES.map((font) => /* @__PURE__ */ jsxs59("section", { className: "bg-card rounded-lg border border-border p-6", children: [
     /* @__PURE__ */ jsxs59("div", { className: "flex items-center justify-between mb-4", children: [
-      /* @__PURE__ */ jsx85("h3", { className: "text-lg font-semibold text-foreground", children: font.name }),
-      /* @__PURE__ */ jsx85("code", { className: "text-xs text-muted-foreground font-mono bg-muted px-2 py-1 rounded", children: font.cssVar })
+      /* @__PURE__ */ jsx86("h3", { className: "text-lg font-semibold text-foreground", children: font.name }),
+      /* @__PURE__ */ jsx86("code", { className: "text-xs text-muted-foreground font-mono bg-muted px-2 py-1 rounded", children: font.cssVar })
     ] }),
-    /* @__PURE__ */ jsx85("div", { className: "space-y-4", children: font.sizes.map((size) => /* @__PURE__ */ jsxs59("div", { className: "flex items-baseline gap-4", children: [
-      /* @__PURE__ */ jsx85("span", { className: "text-xs text-muted-foreground w-20 flex-shrink-0", children: size }),
-      /* @__PURE__ */ jsx85(
+    /* @__PURE__ */ jsx86("div", { className: "space-y-4", children: font.sizes.map((size) => /* @__PURE__ */ jsxs59("div", { className: "flex items-baseline gap-4", children: [
+      /* @__PURE__ */ jsx86("span", { className: "text-xs text-muted-foreground w-20 flex-shrink-0", children: size }),
+      /* @__PURE__ */ jsx86(
         "p",
         {
           className: `${size} text-foreground`,
@@ -13781,8 +13808,8 @@ var RADIUS_SAMPLES = [
   { name: "Full", value: "9999px" }
 ];
 function RadiusScale({ className = "" }) {
-  return /* @__PURE__ */ jsx85("div", { className: `space-y-4 ${className}`, children: /* @__PURE__ */ jsx85("div", { className: "grid grid-cols-5 gap-4", children: RADIUS_SAMPLES.map((radius) => /* @__PURE__ */ jsxs59("div", { className: "flex flex-col items-center gap-2", children: [
-    /* @__PURE__ */ jsx85(
+  return /* @__PURE__ */ jsx86("div", { className: `space-y-4 ${className}`, children: /* @__PURE__ */ jsx86("div", { className: "grid grid-cols-5 gap-4", children: RADIUS_SAMPLES.map((radius) => /* @__PURE__ */ jsxs59("div", { className: "flex flex-col items-center gap-2", children: [
+    /* @__PURE__ */ jsx86(
       "div",
       {
         className: "h-16 w-16 bg-primary",
@@ -13791,14 +13818,14 @@ function RadiusScale({ className = "" }) {
         }
       }
     ),
-    /* @__PURE__ */ jsx85("span", { className: "text-sm font-medium text-foreground", children: radius.name }),
-    /* @__PURE__ */ jsx85("code", { className: "text-xs text-muted-foreground font-mono", children: radius.cssVar || radius.value })
+    /* @__PURE__ */ jsx86("span", { className: "text-sm font-medium text-foreground", children: radius.name }),
+    /* @__PURE__ */ jsx86("code", { className: "text-xs text-muted-foreground font-mono", children: radius.cssVar || radius.value })
   ] }, radius.name)) }) });
 }
 
 // src/design-system/ThemeSwitcher.tsx
 import { useState as useState45, useEffect as useEffect46 } from "react";
-import { Fragment as Fragment19, jsx as jsx86, jsxs as jsxs60 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx87, jsxs as jsxs60 } from "react/jsx-runtime";
 function readThemeFromDOM() {
   if (typeof document === "undefined") {
     return { themeName: "Linear", isDark: false };
@@ -13866,35 +13893,35 @@ function ThemeSwitcher({ className = "", showBaseThemesOnly = true }) {
           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__ */ jsx86("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx86("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__ */ jsx86("span", { className: "font-medium", children: currentTheme }),
-            /* @__PURE__ */ jsx86("svg", { className: `w-4 h-4 transition-transform ${isOpen ? "rotate-180" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx86("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
+            /* @__PURE__ */ jsx87("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx87("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__ */ jsx87("span", { className: "font-medium", children: currentTheme }),
+            /* @__PURE__ */ jsx87("svg", { className: `w-4 h-4 transition-transform ${isOpen ? "rotate-180" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx87("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
           ]
         }
       ),
       isOpen && /* @__PURE__ */ jsxs60(Fragment19, { children: [
-        /* @__PURE__ */ jsx86(
+        /* @__PURE__ */ jsx87(
           "div",
           {
             className: "fixed inset-0 z-40",
             onClick: () => setIsOpen(false)
           }
         ),
-        /* @__PURE__ */ jsx86("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__ */ jsxs60(
+        /* @__PURE__ */ jsx87("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__ */ jsxs60(
           "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__ */ jsx86(
+              /* @__PURE__ */ jsx87(
                 "div",
                 {
                   className: "w-4 h-4 rounded-full border border-border",
                   style: { backgroundColor: theme.primaryColor || "#888" }
                 }
               ),
-              /* @__PURE__ */ jsx86("span", { className: "text-foreground", children: theme.name }),
-              currentTheme === theme.name && /* @__PURE__ */ jsx86("svg", { className: "w-4 h-4 ml-auto text-primary", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx86("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })
+              /* @__PURE__ */ jsx87("span", { className: "text-foreground", children: theme.name }),
+              currentTheme === theme.name && /* @__PURE__ */ jsx87("svg", { className: "w-4 h-4 ml-auto text-primary", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx87("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })
             ]
           },
           theme.name
@@ -13909,10 +13936,10 @@ function ThemeSwitcher({ className = "", showBaseThemesOnly = true }) {
         title: `Switch to ${isDark ? "light" : "dark"} mode`,
         children: [
           isDark ? /* @__PURE__ */ jsxs60("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: [
-            /* @__PURE__ */ jsx86("circle", { cx: "12", cy: "12", r: "5" }),
-            /* @__PURE__ */ jsx86("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__ */ jsx86("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx86("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }),
-          /* @__PURE__ */ jsx86("span", { className: "text-sm", children: isDark ? "Light" : "Dark" })
+            /* @__PURE__ */ jsx87("circle", { cx: "12", cy: "12", r: "5" }),
+            /* @__PURE__ */ jsx87("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__ */ jsx87("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx87("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }),
+          /* @__PURE__ */ jsx87("span", { className: "text-sm", children: isDark ? "Light" : "Dark" })
         ]
       }
     )
@@ -13920,7 +13947,7 @@ function ThemeSwitcher({ className = "", showBaseThemesOnly = true }) {
 }
 
 // src/design-system/DesignSystemPage.tsx
-import { jsx as jsx87, jsxs as jsxs61 } from "react/jsx-runtime";
+import { jsx as jsx88, jsxs as jsxs61 } from "react/jsx-runtime";
 function DesignSystemPage({
   showThemeSwitcher = true,
   showColors = true,
@@ -13931,28 +13958,28 @@ function DesignSystemPage({
   className = ""
 }) {
   return /* @__PURE__ */ jsxs61("div", { className: `max-w-4xl mx-auto px-4 py-8 ${className}`, children: [
-    /* @__PURE__ */ jsx87("header", { className: "mb-12", children: /* @__PURE__ */ jsxs61("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4", children: [
+    /* @__PURE__ */ jsx88("header", { className: "mb-12", children: /* @__PURE__ */ jsxs61("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4", children: [
       /* @__PURE__ */ jsxs61("div", { children: [
-        /* @__PURE__ */ jsx87("h1", { className: "text-4xl font-bold text-foreground mb-2", children: "Design System" }),
-        /* @__PURE__ */ jsx87("p", { className: "text-lg text-muted-foreground", children: "Visual reference for theme tokens and styles" })
+        /* @__PURE__ */ jsx88("h1", { className: "text-4xl font-bold text-foreground mb-2", children: "Design System" }),
+        /* @__PURE__ */ jsx88("p", { className: "text-lg text-muted-foreground", children: "Visual reference for theme tokens and styles" })
       ] }),
-      showThemeSwitcher && /* @__PURE__ */ jsx87(ThemeSwitcher, {})
+      showThemeSwitcher && /* @__PURE__ */ jsx88(ThemeSwitcher, {})
     ] }) }),
     showColors && /* @__PURE__ */ jsxs61("section", { className: "mb-16", children: [
-      /* @__PURE__ */ jsx87("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Color Palette" }),
-      /* @__PURE__ */ jsx87(ColorPalette, { layout: colorLayout })
+      /* @__PURE__ */ jsx88("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Color Palette" }),
+      /* @__PURE__ */ jsx88(ColorPalette, { layout: colorLayout })
     ] }),
     showTypography && /* @__PURE__ */ jsxs61("section", { className: "mb-16", children: [
-      /* @__PURE__ */ jsx87("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Typography" }),
-      /* @__PURE__ */ jsx87(TypographyScale, {})
+      /* @__PURE__ */ jsx88("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Typography" }),
+      /* @__PURE__ */ jsx88(TypographyScale, {})
     ] }),
     showRadius && /* @__PURE__ */ jsxs61("section", { className: "mb-16", children: [
-      /* @__PURE__ */ jsx87("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Border Radius" }),
-      /* @__PURE__ */ jsx87(RadiusScale, {})
+      /* @__PURE__ */ jsx88("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Border Radius" }),
+      /* @__PURE__ */ jsx88(RadiusScale, {})
     ] }),
     showSpacing && /* @__PURE__ */ jsxs61("section", { className: "mb-16", children: [
-      /* @__PURE__ */ jsx87("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Spacing Scale" }),
-      /* @__PURE__ */ jsx87(SpacingScale, {})
+      /* @__PURE__ */ jsx88("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Spacing Scale" }),
+      /* @__PURE__ */ jsx88(SpacingScale, {})
     ] })
   ] });
 }
@@ -13967,21 +13994,21 @@ function SpacingScale() {
     { name: "12", value: "3rem" },
     { name: "16", value: "4rem" }
   ];
-  return /* @__PURE__ */ jsx87("div", { className: "space-y-2", children: spaces.map((space) => /* @__PURE__ */ jsxs61("div", { className: "flex items-center gap-4", children: [
-    /* @__PURE__ */ jsx87("code", { className: "text-xs text-muted-foreground font-mono w-8", children: space.name }),
-    /* @__PURE__ */ jsx87(
+  return /* @__PURE__ */ jsx88("div", { className: "space-y-2", children: spaces.map((space) => /* @__PURE__ */ jsxs61("div", { className: "flex items-center gap-4", children: [
+    /* @__PURE__ */ jsx88("code", { className: "text-xs text-muted-foreground font-mono w-8", children: space.name }),
+    /* @__PURE__ */ jsx88(
       "div",
       {
         className: "h-4 bg-primary rounded",
         style: { width: space.value }
       }
     ),
-    /* @__PURE__ */ jsx87("span", { className: "text-sm text-muted-foreground", children: space.value })
+    /* @__PURE__ */ jsx88("span", { className: "text-sm text-muted-foreground", children: space.value })
   ] }, space.name)) });
 }
 
 // src/personalization/PersonalizationProvider.tsx
-import React55, {
+import React56, {
   useState as useState46,
   useCallback as useCallback26,
   useRef as useRef30,
@@ -13989,25 +14016,25 @@ import React55, {
 } from "react";
 
 // src/personalization/PersonalizationContext.ts
-import { createContext as createContext9, useContext as useContext7 } from "react";
-var PersonalizationContext = createContext9(null);
+import { createContext as createContext10, useContext as useContext8 } from "react";
+var PersonalizationContext = createContext10(null);
 function usePersonalizationContext() {
-  return useContext7(PersonalizationContext);
+  return useContext8(PersonalizationContext);
 }
 
 // src/personalization/PersonalizationProvider.tsx
-import { Fragment as Fragment20, jsx as jsx88, jsxs as jsxs62 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx89, jsxs as jsxs62 } from "react/jsx-runtime";
 function createBridgeFromCanvas(canvasModule) {
   const { useEditor, useCommands, useImageBinding } = canvasModule;
   function TextBinder({ name, value }) {
     const { elements } = useEditor();
     const { executeElementUpdate } = useCommands();
-    const elementsRef = React55.useRef(elements);
+    const elementsRef = React56.useRef(elements);
     elementsRef.current = elements;
-    const executeRef = React55.useRef(executeElementUpdate);
+    const executeRef = React56.useRef(executeElementUpdate);
     executeRef.current = executeElementUpdate;
-    const hasUserInput = React55.useRef(false);
-    React55.useEffect(() => {
+    const hasUserInput = React56.useRef(false);
+    React56.useEffect(() => {
       if (value == null) return;
       if (value === "" && !hasUserInput.current) return;
       hasUserInput.current = true;
@@ -14025,12 +14052,12 @@ function createBridgeFromCanvas(canvasModule) {
   function ColorBinder({ originalColor, newColor }) {
     const { elements } = useEditor();
     const { executeElementUpdate } = useCommands();
-    const elementsRef = React55.useRef(elements);
+    const elementsRef = React56.useRef(elements);
     elementsRef.current = elements;
-    const executeRef = React55.useRef(executeElementUpdate);
+    const executeRef = React56.useRef(executeElementUpdate);
     executeRef.current = executeElementUpdate;
-    const appliedColorRef = React55.useRef(normalizeHex(originalColor));
-    React55.useEffect(() => {
+    const appliedColorRef = React56.useRef(normalizeHex(originalColor));
+    React56.useEffect(() => {
       const normalizedNew = normalizeHex(newColor);
       if (normalizedNew === appliedColorRef.current) return;
       const matchColor = appliedColorRef.current;
@@ -14070,11 +14097,11 @@ function createBridgeFromCanvas(canvasModule) {
   }
   function ImageBinder({ name, value, fit = "cover" }) {
     const { setImageUrl } = useImageBinding(name, { fit });
-    const hasUserInput = React55.useRef(false);
+    const hasUserInput = React56.useRef(false);
     const debouncedValue = useDebouncedValue(value, 500);
-    const setImageUrlRef = React55.useRef(setImageUrl);
+    const setImageUrlRef = React56.useRef(setImageUrl);
     setImageUrlRef.current = setImageUrl;
-    React55.useEffect(() => {
+    React56.useEffect(() => {
       if (debouncedValue == null) return;
       if (debouncedValue === "" && !hasUserInput.current) return;
       hasUserInput.current = true;
@@ -14084,15 +14111,15 @@ function createBridgeFromCanvas(canvasModule) {
     return null;
   }
   return function PersonalizationBridge({ fields = [], values = {} } = {}) {
-    return /* @__PURE__ */ jsx88(Fragment20, { children: fields.map((field) => {
+    return /* @__PURE__ */ jsx89(Fragment20, { children: fields.map((field) => {
       if (field.type === "text") {
-        return /* @__PURE__ */ jsx88(TextBinder, { name: field.name, value: values[field.name] ?? "" }, `text-${field.name}`);
+        return /* @__PURE__ */ jsx89(TextBinder, { name: field.name, value: values[field.name] ?? "" }, `text-${field.name}`);
       }
       if (field.type === "color") {
-        return /* @__PURE__ */ jsx88(ColorBinder, { originalColor: field.color, newColor: values[field.color] ?? field.color }, `color-${field.color}`);
+        return /* @__PURE__ */ jsx89(ColorBinder, { originalColor: field.color, newColor: values[field.color] ?? field.color }, `color-${field.color}`);
       }
       if (field.type === "image") {
-        return /* @__PURE__ */ jsx88(ImageBinder, { name: field.name, value: values[field.name] ?? "", fit: field.fit ?? "cover" }, `image-${field.name}`);
+        return /* @__PURE__ */ jsx89(ImageBinder, { name: field.name, value: values[field.name] ?? "", fit: field.fit ?? "cover" }, `image-${field.name}`);
       }
       return null;
     }) });
@@ -14202,7 +14229,7 @@ function PersonalizationProvider({
     setIsExporting(true);
   }, []);
   const shouldMountCanvas = CanvasComponent && BridgeComponent && canvasState?.elements && canvasState.elements.length > 0 && (!lazy || isActive);
-  const contextValue = React55.useMemo(
+  const contextValue = React56.useMemo(
     () => ({
       fields,
       personValues,
@@ -14216,7 +14243,7 @@ function PersonalizationProvider({
     [fields, personValues, updateField, isActive, isExporting, exportedBlobUrls, exportCount, reset]
   );
   return /* @__PURE__ */ jsxs62(PersonalizationContext.Provider, { value: contextValue, children: [
-    shouldMountCanvas && CanvasComponent && BridgeComponent && /* @__PURE__ */ jsx88(
+    shouldMountCanvas && CanvasComponent && BridgeComponent && /* @__PURE__ */ jsx89(
       "div",
       {
         style: {
@@ -14229,7 +14256,7 @@ function PersonalizationProvider({
           pointerEvents: "none"
         },
         "aria-hidden": true,
-        children: /* @__PURE__ */ jsx88(
+        children: /* @__PURE__ */ jsx89(
           CanvasComponent,
           {
             initialElements: canvasState?.elements,
@@ -14249,7 +14276,7 @@ function PersonalizationProvider({
             exportImageQuality: exportConfig?.imageQuality ?? 0.85,
             onExport: handleExport,
             onExportScheduled: handleExportScheduled,
-            overlay: /* @__PURE__ */ jsx88(BridgeComponent, { fields, values: personValues })
+            overlay: /* @__PURE__ */ jsx89(BridgeComponent, { fields, values: personValues })
           }
         )
       },
@@ -14274,7 +14301,7 @@ function usePersonalizationOptional() {
 }
 
 // src/personalization/PersonalizationInputs.tsx
-import { jsx as jsx89, jsxs as jsxs63 } from "react/jsx-runtime";
+import { jsx as jsx90, jsxs as jsxs63 } from "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",
@@ -14299,7 +14326,7 @@ function PersonalizationInputs({
     }
   };
   return /* @__PURE__ */ jsxs63("div", { className: className || "flex flex-col gap-3", children: [
-    textFields.map((field) => /* @__PURE__ */ jsx89(
+    textFields.map((field) => /* @__PURE__ */ jsx90(
       "input",
       {
         type: "text",
@@ -14314,7 +14341,7 @@ function PersonalizationInputs({
       `text-${field.name}`
     )),
     colorFields.map((field) => /* @__PURE__ */ jsxs63("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsx89(
+      /* @__PURE__ */ jsx90(
         "input",
         {
           type: "color",
@@ -14323,9 +14350,9 @@ function PersonalizationInputs({
           onChange: (e) => updateField(field.color, e.target.value)
         }
       ),
-      /* @__PURE__ */ jsx89("span", { className: "text-base text-muted-foreground", children: field.label })
+      /* @__PURE__ */ jsx90("span", { className: "text-base text-muted-foreground", children: field.label })
     ] }, `color-${field.color}`)),
-    imageFields.map((field) => /* @__PURE__ */ jsx89(
+    imageFields.map((field) => /* @__PURE__ */ jsx90(
       "input",
       {
         type: "text",
@@ -14533,6 +14560,7 @@ export {
   LoadingOverlayPrismCandyInline,
   MasonryGrid,
   MobileProductCarousel,
+  MockupBackground,
   MockupPriorityProvider,
   PDPLayout,
   PersonalizationInputs,
@@ -14658,6 +14686,7 @@ export {
   useIsolatedCanvas,
   useLoadingOverlay,
   useMediaQuery,
+  useMockupBackgroundOptional,
   useMockupPriority,
   useMockupPriorityOptional,
   usePersonalization,