npm - @snowcone-app/ui - Versions diffs - 0.4.6 → 0.4.8 - Mend

@snowcone-app/ui 0.4.6 → 0.4.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/CHANGELOG.md +15 -0
package/dist/index.cjs +890 -859
package/dist/index.cjs.map +1 -1
package/dist/index.d.cts +10 -1
package/dist/index.d.ts +10 -1
package/dist/index.js +357 -328
package/dist/index.js.map +1 -1
package/package.json +2 -2
package/src/composed/HeroProductImage.tsx +10 -0
package/src/index.ts +7 -0
package/src/patterns/MockupBackground.tsx +43 -0
package/src/patterns/RealtimeProvider.tsx +13 -1

package/dist/index.cjs CHANGED Viewed

@@ -239,6 +239,7 @@ __export(src_exports, {
   LoadingOverlayPrismCandyInline: () => LoadingOverlayPrismCandyInline,
   MasonryGrid: () => MasonryGrid,
   MobileProductCarousel: () => MobileProductCarousel,
+  MockupBackground: () => MockupBackground,
   MockupPriorityProvider: () => MockupPriorityProvider,
   PDPLayout: () => PDPLayout,
   PersonalizationInputs: () => PersonalizationInputs,
@@ -364,6 +365,7 @@ __export(src_exports, {
   useIsolatedCanvas: () => useIsolatedCanvas,
   useLoadingOverlay: () => useLoadingOverlay,
   useMediaQuery: () => useMediaQuery,
+  useMockupBackgroundOptional: () => useMockupBackgroundOptional,
   useMockupPriority: () => useMockupPriority,
   useMockupPriorityOptional: () => useMockupPriorityOptional,
   usePersonalization: () => usePersonalization,
@@ -379,7 +381,7 @@ __export(src_exports, {
   useProductSelection: () => useProductSelection,
   useProviderStatus: () => useProviderStatus,
   useRealtime: () => useRealtime,
-  useRealtimeMockup: () => import_react70.useRealtimeMockup,
+  useRealtimeMockup: () => import_react71.useRealtimeMockup,
   useRealtimeOptional: () => useRealtimeOptional,
   useRenderCount: () => useRenderCount,
   useRenderGuard: () => useRenderGuard,
@@ -5909,16 +5911,29 @@ function useFocusTrap(isActive, onClose) {
 }
 // src/hooks/useCanvasContext.ts
-var import_react26 = require("react");
+var import_react27 = require("react");
 // src/patterns/RealtimeProvider.tsx
-var import_react24 = require("react");
-var import_react25 = require("@snowcone-app/sdk/react");
+var import_react25 = require("react");
+var import_react26 = require("@snowcone-app/sdk/react");
 var import_sdk8 = require("@snowcone-app/sdk");
+// src/patterns/MockupBackground.tsx
+var import_react24 = require("react");
 var import_jsx_runtime51 = require("react/jsx-runtime");
+var MockupBackgroundContext = (0, import_react24.createContext)(void 0);
+function MockupBackground({ bg, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(MockupBackgroundContext.Provider, { value: bg, children });
+}
+function useMockupBackgroundOptional() {
+  return (0, import_react24.useContext)(MockupBackgroundContext);
+}
+// src/patterns/RealtimeProvider.tsx
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var DEFAULT_ARTBOARD_SIZE = 2e3;
 var MAX_CONCURRENT_BLOBS = 5;
-var RealtimeContext = (0, import_react24.createContext)(
+var RealtimeContext = (0, import_react25.createContext)(
   void 0
 );
 function RealtimeProvider({
@@ -5932,9 +5947,10 @@ function RealtimeProvider({
   grantUrl
 }) {
   const productContext = useProductOptional();
-  const [isEnabled, setIsEnabled] = (0, import_react24.useState)(autoEnable);
+  const mockupBg = useMockupBackgroundOptional();
+  const [isEnabled, setIsEnabled] = (0, import_react25.useState)(autoEnable);
   const useSessionGrant = Boolean(shop && grantUrl);
-  const getToken = (0, import_react24.useCallback)(async () => {
+  const getToken = (0, import_react25.useCallback)(async () => {
     const res = await fetch(grantUrl, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
@@ -5945,15 +5961,16 @@ function RealtimeProvider({
     }
     return await res.json();
   }, [shop, grantUrl]);
-  const canvasBlobsSentRef = (0, import_react24.useRef)(0);
-  const colorBlobsSentRef = (0, import_react24.useRef)(0);
-  const lastBlobSentTimeRef = (0, import_react24.useRef)(null);
-  const isPendingMockupsRef = (0, import_react24.useRef)(false);
-  const configSentRef = (0, import_react24.useRef)(false);
-  const placementSettingsOverridesRef = (0, import_react24.useRef)({});
-  const lastSentVariantIdRef = (0, import_react24.useRef)(null);
-  const lastSentColorsRef = (0, import_react24.useRef)({});
-  const realtimeMockup = (0, import_react25.useRealtimeMockup)({
+  const canvasBlobsSentRef = (0, import_react25.useRef)(0);
+  const colorBlobsSentRef = (0, import_react25.useRef)(0);
+  const lastBlobSentTimeRef = (0, import_react25.useRef)(null);
+  const isPendingMockupsRef = (0, import_react25.useRef)(false);
+  const configSentRef = (0, import_react25.useRef)(false);
+  const placementSettingsOverridesRef = (0, import_react25.useRef)({});
+  const lastSentVariantIdRef = (0, import_react25.useRef)(null);
+  const lastSentBgRef = (0, import_react25.useRef)(void 0);
+  const lastSentColorsRef = (0, import_react25.useRef)({});
+  const realtimeMockup = (0, import_react26.useRealtimeMockup)({
     wsUrl,
     getToken: useSessionGrant ? getToken : void 0,
     onConnected: (sessionId) => {
@@ -5984,7 +6001,7 @@ function RealtimeProvider({
       console.error(`[RealtimeProvider] Render error [${detail.code}]:`, error);
     }
   });
-  const subscribeRTCTiming = (0, import_react24.useCallback)((_callback) => {
+  const subscribeRTCTiming = (0, import_react25.useCallback)((_callback) => {
     return () => {
     };
   }, []);
@@ -6004,31 +6021,31 @@ function RealtimeProvider({
     flushPendingBlobs,
     hasPendingBlobs
   } = realtimeMockup;
-  const mockupResultsRef = (0, import_react24.useRef)([]);
-  const mockupSubscribersRef = (0, import_react24.useRef)(
+  const mockupResultsRef = (0, import_react25.useRef)([]);
+  const mockupSubscribersRef = (0, import_react25.useRef)(
     /* @__PURE__ */ new Set()
   );
-  const mockupSubscribersByIdRef = (0, import_react24.useRef)(/* @__PURE__ */ new Map());
-  const pendingExportCancelledSubscribersRef = (0, import_react24.useRef)(/* @__PURE__ */ new Set());
-  const pendingBlobSubscribersRef = (0, import_react24.useRef)(
+  const mockupSubscribersByIdRef = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
+  const pendingExportCancelledSubscribersRef = (0, import_react25.useRef)(/* @__PURE__ */ new Set());
+  const pendingBlobSubscribersRef = (0, import_react25.useRef)(
     /* @__PURE__ */ new Set()
   );
-  const blobReceivedSubscribersRef = (0, import_react24.useRef)(
+  const blobReceivedSubscribersRef = (0, import_react25.useRef)(
     /* @__PURE__ */ new Set()
   );
-  const blobSentSubscribersRef = (0, import_react24.useRef)(
+  const blobSentSubscribersRef = (0, import_react25.useRef)(
     /* @__PURE__ */ new Set()
   );
-  const pipelineSettledSubscribersRef = (0, import_react24.useRef)(/* @__PURE__ */ new Set());
-  const pipelineGenRef = (0, import_react24.useRef)(0);
-  const blobQueuedGenRef = (0, import_react24.useRef)(0);
-  const hasBlobInFlightRef = (0, import_react24.useRef)(false);
-  const pipelineResetCooldownRef = (0, import_react24.useRef)(false);
-  const mockupUrlCacheRef = (0, import_react24.useRef)(/* @__PURE__ */ new Map());
-  const registeredBlobUrlsRef = (0, import_react24.useRef)(/* @__PURE__ */ new Set());
-  const pendingPlacementsRef = (0, import_react24.useRef)(/* @__PURE__ */ new Set());
-  const pendingMockupIdsRef = (0, import_react24.useRef)(/* @__PURE__ */ new Set());
-  (0, import_react24.useEffect)(() => {
+  const pipelineSettledSubscribersRef = (0, import_react25.useRef)(/* @__PURE__ */ new Set());
+  const pipelineGenRef = (0, import_react25.useRef)(0);
+  const blobQueuedGenRef = (0, import_react25.useRef)(0);
+  const hasBlobInFlightRef = (0, import_react25.useRef)(false);
+  const pipelineResetCooldownRef = (0, import_react25.useRef)(false);
+  const mockupUrlCacheRef = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
+  const registeredBlobUrlsRef = (0, import_react25.useRef)(/* @__PURE__ */ new Set());
+  const pendingPlacementsRef = (0, import_react25.useRef)(/* @__PURE__ */ new Set());
+  const pendingMockupIdsRef = (0, import_react25.useRef)(/* @__PURE__ */ new Set());
+  (0, import_react25.useEffect)(() => {
     if (rawMockupResults.length === 0) {
       if (mockupResultsRef.current.length > 0) {
         mockupResultsRef.current = [];
@@ -6080,7 +6097,7 @@ function RealtimeProvider({
       pipelineSettledSubscribersRef.current.forEach((cb) => cb());
     }
   }, [rawMockupResults]);
-  const sendCanvasBlob = (0, import_react24.useCallback)(
+  const sendCanvasBlob = (0, import_react25.useCallback)(
     (placement, blob, mockupCount, baseThrottleMs) => {
       blobQueuedGenRef.current = pipelineGenRef.current;
       const result = sendCanvasBlobRaw(
@@ -6099,7 +6116,7 @@ function RealtimeProvider({
     },
     [sendCanvasBlobRaw]
   );
-  const sendCanvasState = (0, import_react24.useCallback)(
+  const sendCanvasState = (0, import_react25.useCallback)(
     (placement, state, mockupCount, baseThrottleMs) => {
       blobQueuedGenRef.current = pipelineGenRef.current;
       const result = sendCanvasStateRaw(
@@ -6118,7 +6135,7 @@ function RealtimeProvider({
     },
     [sendCanvasStateRaw]
   );
-  const sendColorBlobTracked = (0, import_react24.useCallback)(
+  const sendColorBlobTracked = (0, import_react25.useCallback)(
     (placement, color) => {
       const result = sendColorBlob(placement, color);
       if (result) {
@@ -6130,23 +6147,24 @@ function RealtimeProvider({
     },
     [sendColorBlob]
   );
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (isEnabled) {
       connect();
       return () => {
         disconnect();
         configSentRef.current = false;
         lastSentVariantIdRef.current = null;
+        lastSentBgRef.current = void 0;
         lastSentColorsRef.current = {};
       };
     }
   }, [isEnabled, connect, disconnect, wsUrl]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (rawMockupResults.length > 0 && isPendingMockupsRef.current) {
       isPendingMockupsRef.current = false;
     }
   }, [rawMockupResults.length]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!isEnabled || !isConnected || !productContext?.product) return;
     const product = productContext.product;
     const productId = product.id;
@@ -6158,7 +6176,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 = [];
@@ -6175,6 +6194,7 @@ function RealtimeProvider({
       variantId,
       shop,
       width: mockupWidth,
+      ...mockupBg ? { bg: mockupBg } : {},
       placementSettings: { ...placementSettingsOverridesRef.current }
     } : {
       productId,
@@ -6183,6 +6203,7 @@ function RealtimeProvider({
       shop: "hTidnpNnNa",
       seal: "bypass-sig-for-k6-load-test",
       width: mockupWidth,
+      ...mockupBg ? { bg: mockupBg } : {},
       placementSettings: { ...placementSettingsOverridesRef.current }
     };
     if (variantChanged) {
@@ -6194,6 +6215,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) => {
@@ -6211,9 +6233,10 @@ function RealtimeProvider({
     productContext?.selection,
     sendConfigRaw,
     sendColorBlobTracked,
-    mockupWidth
+    mockupWidth,
+    mockupBg
   ]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!isEnabled || !isConnected || !isConfigured || !productContext?.product)
       return;
     const placements = productContext.product.placements || [];
@@ -6238,20 +6261,20 @@ function RealtimeProvider({
     productContext?.selection,
     sendColorBlobTracked
   ]);
-  const updatePlacementSettingsWrapped = (0, import_react24.useCallback)(
+  const updatePlacementSettingsWrapped = (0, import_react25.useCallback)(
     (settings) => {
       placementSettingsOverridesRef.current = settings;
       return updatePlacementSettingsRaw(settings);
     },
     [updatePlacementSettingsRaw]
   );
-  const enableRealtime = (0, import_react24.useCallback)(() => {
+  const enableRealtime = (0, import_react25.useCallback)(() => {
     setIsEnabled(true);
   }, []);
-  const disableRealtime = (0, import_react24.useCallback)(() => {
+  const disableRealtime = (0, import_react25.useCallback)(() => {
     setIsEnabled(false);
   }, []);
-  const placementDimensions = (0, import_react24.useMemo)(() => {
+  const placementDimensions = (0, import_react25.useMemo)(() => {
     if (!productContext?.product?.placements) return [];
     return productContext.product.placements.map((p) => ({
       label: p.label,
@@ -6260,14 +6283,14 @@ function RealtimeProvider({
       type: p.type || "image"
     }));
   }, [productContext?.product?.placements]);
-  const canvasExportSize = (0, import_react24.useMemo)(() => {
+  const canvasExportSize = (0, import_react25.useMemo)(() => {
     const firstPlacement = productContext?.product?.placements?.[0];
     if (firstPlacement?.width && firstPlacement?.height) {
       return { width: firstPlacement.width, height: firstPlacement.height };
     }
     return { width: DEFAULT_ARTBOARD_SIZE, height: DEFAULT_ARTBOARD_SIZE };
   }, [productContext?.product?.placements]);
-  const subscribeMockupResults = (0, import_react24.useCallback)(
+  const subscribeMockupResults = (0, import_react25.useCallback)(
     (callback) => {
       mockupSubscribersRef.current.add(callback);
       return () => {
@@ -6276,7 +6299,7 @@ function RealtimeProvider({
     },
     []
   );
-  const subscribeMockupResultById = (0, import_react24.useCallback)(
+  const subscribeMockupResultById = (0, import_react25.useCallback)(
     (mockupId, callback) => {
       if (!mockupSubscribersByIdRef.current.has(mockupId)) {
         mockupSubscribersByIdRef.current.set(mockupId, /* @__PURE__ */ new Set());
@@ -6303,7 +6326,7 @@ function RealtimeProvider({
     },
     []
   );
-  const subscribePendingBlob = (0, import_react24.useCallback)(
+  const subscribePendingBlob = (0, import_react25.useCallback)(
     (callback) => {
       pendingBlobSubscribersRef.current.add(callback);
       return () => {
@@ -6312,7 +6335,7 @@ function RealtimeProvider({
     },
     []
   );
-  const subscribePendingExportCancelled = (0, import_react24.useCallback)(
+  const subscribePendingExportCancelled = (0, import_react25.useCallback)(
     (callback) => {
       pendingExportCancelledSubscribersRef.current.add(callback);
       return () => {
@@ -6321,7 +6344,7 @@ function RealtimeProvider({
     },
     []
   );
-  const subscribeBlobReceived = (0, import_react24.useCallback)(
+  const subscribeBlobReceived = (0, import_react25.useCallback)(
     (callback) => {
       blobReceivedSubscribersRef.current.add(callback);
       return () => {
@@ -6330,7 +6353,7 @@ function RealtimeProvider({
     },
     []
   );
-  const subscribeBlobSent = (0, import_react24.useCallback)(
+  const subscribeBlobSent = (0, import_react25.useCallback)(
     (callback) => {
       blobSentSubscribersRef.current.add(callback);
       return () => {
@@ -6339,7 +6362,7 @@ function RealtimeProvider({
     },
     []
   );
-  const subscribePipelineSettled = (0, import_react24.useCallback)(
+  const subscribePipelineSettled = (0, import_react25.useCallback)(
     (callback) => {
       pipelineSettledSubscribersRef.current.add(callback);
       return () => {
@@ -6348,7 +6371,7 @@ function RealtimeProvider({
     },
     []
   );
-  const resetPipelineSettled = (0, import_react24.useCallback)(
+  const resetPipelineSettled = (0, import_react25.useCallback)(
     () => {
       pipelineGenRef.current++;
       hasBlobInFlightRef.current = false;
@@ -6359,7 +6382,7 @@ function RealtimeProvider({
     },
     []
   );
-  const notifyPendingExport = (0, import_react24.useCallback)(
+  const notifyPendingExport = (0, import_react25.useCallback)(
     (placement) => {
       if (pendingPlacementsRef.current.has(placement)) {
         return;
@@ -6379,7 +6402,7 @@ function RealtimeProvider({
     },
     [productContext?.product?.mockups]
   );
-  const notifyPendingExportCancelled = (0, import_react24.useCallback)(
+  const notifyPendingExportCancelled = (0, import_react25.useCallback)(
     (placement) => {
       if (!pendingPlacementsRef.current.has(placement)) {
         return;
@@ -6403,7 +6426,7 @@ function RealtimeProvider({
     },
     [productContext?.product?.mockups]
   );
-  const getMockupUrl3 = (0, import_react24.useCallback)((mockupId) => {
+  const getMockupUrl3 = (0, import_react25.useCallback)((mockupId) => {
     if (pendingMockupIdsRef.current.has(mockupId)) {
       console.log(`[RTP] getMockupUrl("${mockupId}") \u2192 null (pending)`);
       return null;
@@ -6411,7 +6434,7 @@ function RealtimeProvider({
     const cached = mockupUrlCacheRef.current.get(mockupId);
     return cached?.url ?? null;
   }, []);
-  const getMockupUrls = (0, import_react24.useCallback)((mockupIds) => {
+  const getMockupUrls = (0, import_react25.useCallback)((mockupIds) => {
     const result = {};
     for (const mockupId of mockupIds) {
       if (pendingMockupIdsRef.current.has(mockupId)) {
@@ -6423,10 +6446,10 @@ function RealtimeProvider({
     }
     return result;
   }, []);
-  const isMockupLoading = (0, import_react24.useCallback)((mockupId) => {
+  const isMockupLoading = (0, import_react25.useCallback)((mockupId) => {
     return pendingMockupIdsRef.current.has(mockupId);
   }, []);
-  const registerBlobUrl = (0, import_react24.useCallback)((blobOrUrl, placementName) => {
+  const registerBlobUrl = (0, import_react25.useCallback)((blobOrUrl, placementName) => {
     let url;
     if (blobOrUrl instanceof Blob) {
       if (registeredBlobUrlsRef.current.size >= MAX_CONCURRENT_BLOBS) {
@@ -6448,13 +6471,13 @@ function RealtimeProvider({
     }
     return url;
   }, []);
-  const subscribeMockupResultsRef = (0, import_react24.useRef)(subscribeMockupResults);
-  const subscribeMockupResultByIdRef = (0, import_react24.useRef)(subscribeMockupResultById);
-  const subscribePendingBlobRef = (0, import_react24.useRef)(subscribePendingBlob);
-  const subscribeBlobReceivedRef = (0, import_react24.useRef)(subscribeBlobReceived);
-  const subscribeBlobSentRef = (0, import_react24.useRef)(subscribeBlobSent);
-  const subscribePipelineSettledRef = (0, import_react24.useRef)(subscribePipelineSettled);
-  const subscribePendingExportCancelledRef = (0, import_react24.useRef)(
+  const subscribeMockupResultsRef = (0, import_react25.useRef)(subscribeMockupResults);
+  const subscribeMockupResultByIdRef = (0, import_react25.useRef)(subscribeMockupResultById);
+  const subscribePendingBlobRef = (0, import_react25.useRef)(subscribePendingBlob);
+  const subscribeBlobReceivedRef = (0, import_react25.useRef)(subscribeBlobReceived);
+  const subscribeBlobSentRef = (0, import_react25.useRef)(subscribeBlobSent);
+  const subscribePipelineSettledRef = (0, import_react25.useRef)(subscribePipelineSettled);
+  const subscribePendingExportCancelledRef = (0, import_react25.useRef)(
     subscribePendingExportCancelled
   );
   subscribeMockupResultsRef.current = subscribeMockupResults;
@@ -6464,49 +6487,49 @@ function RealtimeProvider({
   subscribeBlobSentRef.current = subscribeBlobSent;
   subscribePipelineSettledRef.current = subscribePipelineSettled;
   subscribePendingExportCancelledRef.current = subscribePendingExportCancelled;
-  const stableSubscribeMockupResults = (0, import_react24.useCallback)(
+  const stableSubscribeMockupResults = (0, import_react25.useCallback)(
     (callback) => {
       return subscribeMockupResultsRef.current(callback);
     },
     []
   );
-  const stableSubscribeMockupResultById = (0, import_react24.useCallback)(
+  const stableSubscribeMockupResultById = (0, import_react25.useCallback)(
     (mockupId, callback) => {
       return subscribeMockupResultByIdRef.current(mockupId, callback);
     },
     []
   );
-  const stableSubscribePendingBlob = (0, import_react24.useCallback)(
+  const stableSubscribePendingBlob = (0, import_react25.useCallback)(
     (callback) => {
       return subscribePendingBlobRef.current(callback);
     },
     []
   );
-  const stableSubscribePendingExportCancelled = (0, import_react24.useCallback)(
+  const stableSubscribePendingExportCancelled = (0, import_react25.useCallback)(
     (callback) => {
       return subscribePendingExportCancelledRef.current(callback);
     },
     []
   );
-  const stableSubscribeBlobReceived = (0, import_react24.useCallback)(
+  const stableSubscribeBlobReceived = (0, import_react25.useCallback)(
     (callback) => {
       return subscribeBlobReceivedRef.current(callback);
     },
     []
   );
-  const stableSubscribeBlobSent = (0, import_react24.useCallback)(
+  const stableSubscribeBlobSent = (0, import_react25.useCallback)(
     (callback) => {
       return subscribeBlobSentRef.current(callback);
     },
     []
   );
-  const stableSubscribePipelineSettled = (0, import_react24.useCallback)(
+  const stableSubscribePipelineSettled = (0, import_react25.useCallback)(
     (callback) => {
       return subscribePipelineSettledRef.current(callback);
     },
     []
   );
-  const contextValue = (0, import_react24.useMemo)(
+  const contextValue = (0, import_react25.useMemo)(
     () => ({
       isEnabled,
       isConnected,
@@ -6579,31 +6602,31 @@ function RealtimeProvider({
       registerBlobUrl
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(RealtimeContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(RealtimeContext.Provider, { value: contextValue, children });
 }
 function useRealtime() {
-  const context = (0, import_react24.useContext)(RealtimeContext);
+  const context = (0, import_react25.useContext)(RealtimeContext);
   if (!context) {
     throw new Error("useRealtime must be used within a RealtimeProvider");
   }
   return context;
 }
 function useRealtimeOptional() {
-  return (0, import_react24.useContext)(RealtimeContext);
+  return (0, import_react25.useContext)(RealtimeContext);
 }
 // src/hooks/useCanvasContext.ts
 function useCanvasContext() {
   const context = useProductOptional();
   const realtimeContext = useRealtimeOptional();
-  const sendCanvasBlobRef = (0, import_react26.useRef)(realtimeContext?.sendCanvasBlob);
-  const isRealtimeEnabledRef = (0, import_react26.useRef)(realtimeContext?.isEnabled ?? false);
-  const isConfiguredRef = (0, import_react26.useRef)(realtimeContext?.isConfigured ?? false);
-  const mockupCountRef = (0, import_react26.useRef)(context?.product?.mockups?.length ?? 1);
-  const selectedPlacementRef = (0, import_react26.useRef)(context?.selectedPlacement);
-  const enableRealtimeRef = (0, import_react26.useRef)(realtimeContext?.enableRealtime);
-  const selectedArtworkRef = (0, import_react26.useRef)(context?.selectedArtwork);
-  (0, import_react26.useEffect)(() => {
+  const sendCanvasBlobRef = (0, import_react27.useRef)(realtimeContext?.sendCanvasBlob);
+  const isRealtimeEnabledRef = (0, import_react27.useRef)(realtimeContext?.isEnabled ?? false);
+  const isConfiguredRef = (0, import_react27.useRef)(realtimeContext?.isConfigured ?? false);
+  const mockupCountRef = (0, import_react27.useRef)(context?.product?.mockups?.length ?? 1);
+  const selectedPlacementRef = (0, import_react27.useRef)(context?.selectedPlacement);
+  const enableRealtimeRef = (0, import_react27.useRef)(realtimeContext?.enableRealtime);
+  const selectedArtworkRef = (0, import_react27.useRef)(context?.selectedArtwork);
+  (0, import_react27.useEffect)(() => {
     sendCanvasBlobRef.current = realtimeContext?.sendCanvasBlob;
     isRealtimeEnabledRef.current = realtimeContext?.isEnabled ?? false;
     isConfiguredRef.current = realtimeContext?.isConfigured ?? false;
@@ -6612,7 +6635,7 @@ function useCanvasContext() {
     enableRealtimeRef.current = realtimeContext?.enableRealtime;
     selectedArtworkRef.current = context?.selectedArtwork;
   });
-  return (0, import_react26.useMemo)(() => ({
+  return (0, import_react27.useMemo)(() => ({
     /** Ref to sendCanvasBlob function - call via sendCanvasBlobRef.current?.(...) */
     sendCanvasBlobRef,
     /** Ref to isRealtimeEnabled boolean */
@@ -6645,7 +6668,7 @@ function useCanvasContext() {
 function useCanvasContextStatic() {
   const context = useProductOptional();
   const realtimeContext = useRealtimeOptional();
-  const [staticValues] = (0, import_react26.useState)(() => ({
+  const [staticValues] = (0, import_react27.useState)(() => ({
     sendCanvasBlob: realtimeContext?.sendCanvasBlob,
     isRealtimeEnabled: realtimeContext?.isEnabled ?? false,
     isConfigured: realtimeContext?.isConfigured ?? false,
@@ -6658,14 +6681,14 @@ function useCanvasContextStatic() {
 }
 // src/hooks/useRenderGuard.ts
-var import_react27 = require("react");
+var import_react28 = require("react");
 function useRenderGuard({
   name,
   maxRendersPerSecond = 3,
   enabled = process.env.NODE_ENV === "development"
 }) {
   if (!enabled) return;
-  const timestampsRef = (0, import_react27.useRef)([]);
+  const timestampsRef = (0, import_react28.useRef)([]);
   const now = performance.now();
   timestampsRef.current = timestampsRef.current.filter((t) => t > now - 1e3);
   timestampsRef.current.push(now);
@@ -6682,7 +6705,7 @@ function useRenderGuard({
   }
 }
 function useRenderCount(componentName) {
-  const countRef = (0, import_react27.useRef)(0);
+  const countRef = (0, import_react28.useRef)(0);
   countRef.current++;
   if (process.env.NODE_ENV === "development" && componentName && countRef.current % 5 === 0) {
   }
@@ -6690,22 +6713,22 @@ function useRenderCount(componentName) {
 }
 // src/hooks/useScrollDirection.ts
-var import_react28 = require("react");
+var import_react29 = require("react");
 var IDLE_TIMEOUT_MS = 150;
 var MIN_DELTA_PX = 5;
 function useScrollDirection() {
-  const [state, setState] = (0, import_react28.useState)({
+  const [state, setState] = (0, import_react29.useState)({
     direction: "idle",
     velocity: 0,
     scrollY: typeof window !== "undefined" ? window.scrollY : 0
   });
-  const lastScrollRef = (0, import_react28.useRef)({
+  const lastScrollRef = (0, import_react29.useRef)({
     top: typeof window !== "undefined" ? window.scrollY : 0,
     time: Date.now()
   });
-  const rafIdRef = (0, import_react28.useRef)(null);
-  const idleTimeoutRef = (0, import_react28.useRef)(null);
-  const handleScroll = (0, import_react28.useCallback)(() => {
+  const rafIdRef = (0, import_react29.useRef)(null);
+  const idleTimeoutRef = (0, import_react29.useRef)(null);
+  const handleScroll = (0, import_react29.useCallback)(() => {
     if (rafIdRef.current !== null) return;
     rafIdRef.current = requestAnimationFrame(() => {
       const currentTop = window.scrollY;
@@ -6740,7 +6763,7 @@ function useScrollDirection() {
       rafIdRef.current = null;
     });
   }, []);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (typeof window === "undefined") return;
     lastScrollRef.current = {
       top: window.scrollY,
@@ -6811,7 +6834,7 @@ function createScrollDirectionTracker() {
 }
 // src/hooks/useImageTransition.ts
-var import_react29 = require("react");
+var import_react30 = require("react");
 var layerIdCounter = 0;
 function useImageTransition(options = {}) {
   const {
@@ -6821,7 +6844,7 @@ function useImageTransition(options = {}) {
     darkShimmerFadeInDuration = 300,
     initialUrl
   } = options;
-  const [state, setState] = (0, import_react29.useState)(() => {
+  const [state, setState] = (0, import_react30.useState)(() => {
     return {
       layers: initialUrl ? [{ url: initialUrl, opacity: 1, id: ++layerIdCounter, loaded: true }] : [],
       preloadUrl: null,
@@ -6830,12 +6853,12 @@ function useImageTransition(options = {}) {
       shimmerType: "light"
     };
   });
-  const versionRef = (0, import_react29.useRef)(0);
-  const preloaderRef = (0, import_react29.useRef)(null);
-  const currentPreloadUrlRef = (0, import_react29.useRef)(null);
-  const shimmerTimerRef = (0, import_react29.useRef)(null);
-  const isMountedRef = (0, import_react29.useRef)(true);
-  (0, import_react29.useEffect)(() => {
+  const versionRef = (0, import_react30.useRef)(0);
+  const preloaderRef = (0, import_react30.useRef)(null);
+  const currentPreloadUrlRef = (0, import_react30.useRef)(null);
+  const shimmerTimerRef = (0, import_react30.useRef)(null);
+  const isMountedRef = (0, import_react30.useRef)(true);
+  (0, import_react30.useEffect)(() => {
     isMountedRef.current = true;
     return () => {
       isMountedRef.current = false;
@@ -6849,7 +6872,7 @@ function useImageTransition(options = {}) {
       }
     };
   }, []);
-  const setTargetUrl = (0, import_react29.useCallback)(
+  const setTargetUrl = (0, import_react30.useCallback)(
     (url, shimmerType = "light") => {
       const version = ++versionRef.current;
       if (shimmerTimerRef.current) {
@@ -6967,7 +6990,7 @@ function useImageTransition(options = {}) {
     },
     [shimmerDelay]
   );
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     const topLayer = state.layers[state.layers.length - 1];
     if (topLayer && topLayer.opacity === 0 && !topLayer.waitForLoad) {
       const targetId = topLayer.id;
@@ -6987,7 +7010,7 @@ function useImageTransition(options = {}) {
       return () => cancelAnimationFrame(raf1);
     }
   }, [state.layers]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (state.showShimmer && state.shimmerOpacity === 0 && state.preloadUrl) {
       const raf = requestAnimationFrame(() => {
         if (!isMountedRef.current) return;
@@ -7002,7 +7025,7 @@ function useImageTransition(options = {}) {
       return () => cancelAnimationFrame(raf);
     }
   }, [state.showShimmer, state.shimmerOpacity, state.preloadUrl]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (state.showShimmer && state.shimmerOpacity === 0 && !state.preloadUrl) {
       const duration = state.shimmerType === "dark" ? fadeDuration : shimmerFadeDuration;
       const timer = setTimeout(() => {
@@ -7011,7 +7034,7 @@ function useImageTransition(options = {}) {
       return () => clearTimeout(timer);
     }
   }, [state.showShimmer, state.shimmerOpacity, state.preloadUrl, state.shimmerType, fadeDuration, shimmerFadeDuration]);
-  const onLayerTransitionEnd = (0, import_react29.useCallback)((layerId) => {
+  const onLayerTransitionEnd = (0, import_react30.useCallback)((layerId) => {
     setState((prev) => {
       const idx = prev.layers.findIndex((l) => l.id === layerId);
       if (idx === -1 || prev.layers[idx].opacity !== 1) return prev;
@@ -7025,11 +7048,11 @@ function useImageTransition(options = {}) {
       return prev;
     });
   }, []);
-  const onPreloadComplete = (0, import_react29.useCallback)((_loadedUrl) => {
+  const onPreloadComplete = (0, import_react30.useCallback)((_loadedUrl) => {
   }, []);
-  const onPreloadError = (0, import_react29.useCallback)(() => {
+  const onPreloadError = (0, import_react30.useCallback)(() => {
   }, []);
-  const addLayerDirectly = (0, import_react29.useCallback)((url, options2) => {
+  const addLayerDirectly = (0, import_react30.useCallback)((url, options2) => {
     const shouldShowShimmer = options2?.showShimmer ?? true;
     const skipTransition = options2?.skipTransition ?? false;
     const currentVersion = ++versionRef.current;
@@ -7120,7 +7143,7 @@ function useImageTransition(options = {}) {
       }, 500);
     }
   }, []);
-  const triggerShimmer = (0, import_react29.useCallback)((type = "dark") => {
+  const triggerShimmer = (0, import_react30.useCallback)((type = "dark") => {
     setState((prev) => {
       if (prev.layers.length === 0) {
         return prev;
@@ -7139,7 +7162,7 @@ function useImageTransition(options = {}) {
       };
     });
   }, []);
-  const onImageLoad = (0, import_react29.useCallback)((layerId) => {
+  const onImageLoad = (0, import_react30.useCallback)((layerId) => {
     if (shimmerTimerRef.current) {
       clearTimeout(shimmerTimerRef.current);
       shimmerTimerRef.current = null;
@@ -7181,7 +7204,7 @@ function useImageTransition(options = {}) {
 }
 // src/hooks/useImagePreloader.ts
-var import_react30 = require("react");
+var import_react31 = require("react");
 // src/hooks/visibility/observerPool.ts
 var observerCallbacks = /* @__PURE__ */ new WeakMap();
@@ -7243,12 +7266,12 @@ function getObservedElementCount() {
 // src/hooks/useImagePreloader.ts
 function useImagePreloader(options = {}) {
   const { preloadMargin = 1e3, maxConcurrent = 2 } = options;
-  const [preloadedUrls, setPreloadedUrls] = (0, import_react30.useState)(/* @__PURE__ */ new Set());
-  const entriesRef = (0, import_react30.useRef)(/* @__PURE__ */ new Map());
-  const preloadingCountRef = (0, import_react30.useRef)(0);
-  const preloadQueueRef = (0, import_react30.useRef)([]);
-  const preloadingUrlsRef = (0, import_react30.useRef)(/* @__PURE__ */ new Set());
-  const processQueue = (0, import_react30.useCallback)(() => {
+  const [preloadedUrls, setPreloadedUrls] = (0, import_react31.useState)(/* @__PURE__ */ new Set());
+  const entriesRef = (0, import_react31.useRef)(/* @__PURE__ */ new Map());
+  const preloadingCountRef = (0, import_react31.useRef)(0);
+  const preloadQueueRef = (0, import_react31.useRef)([]);
+  const preloadingUrlsRef = (0, import_react31.useRef)(/* @__PURE__ */ new Set());
+  const processQueue = (0, import_react31.useCallback)(() => {
     while (preloadingCountRef.current < maxConcurrent && preloadQueueRef.current.length > 0) {
       const src = preloadQueueRef.current.shift();
       if (preloadingUrlsRef.current.has(src) || preloadedUrls.has(src)) {
@@ -7273,17 +7296,17 @@ function useImagePreloader(options = {}) {
       img.onerror = handleComplete;
     }
   }, [maxConcurrent, preloadedUrls]);
-  const observerOptionsRef = (0, import_react30.useRef)({
+  const observerOptionsRef = (0, import_react31.useRef)({
     rootMargin: `${preloadMargin}px 0px`,
     threshold: 0
   });
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     observerOptionsRef.current = {
       rootMargin: `${preloadMargin}px 0px`,
       threshold: 0
     };
   }, [preloadMargin]);
-  const registerElement = (0, import_react30.useCallback)(
+  const registerElement = (0, import_react31.useCallback)(
     (key, element, src) => {
       const entries = entriesRef.current;
       const existingEntry = entries.get(key);
@@ -7347,14 +7370,14 @@ function useImagePreloader(options = {}) {
     },
     [preloadedUrls, processQueue]
   );
-  const isPreloaded = (0, import_react30.useCallback)(
+  const isPreloaded = (0, import_react31.useCallback)(
     (src) => {
       if (!src) return false;
       return preloadedUrls.has(src);
     },
     [preloadedUrls]
   );
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     return () => {
       entriesRef.current.forEach((entry) => {
         if (entry.unobserve) {
@@ -7372,11 +7395,11 @@ function useImagePreloader(options = {}) {
 }
 // src/hooks/useDeviceDetection.ts
-var import_react31 = require("react");
+var import_react32 = require("react");
 function useDeviceDetection() {
-  const [isTouchDevice, setIsTouchDevice] = (0, import_react31.useState)(false);
-  const [isSafari, setIsSafari] = (0, import_react31.useState)(false);
-  (0, import_react31.useEffect)(() => {
+  const [isTouchDevice, setIsTouchDevice] = (0, import_react32.useState)(false);
+  const [isSafari, setIsSafari] = (0, import_react32.useState)(false);
+  (0, import_react32.useEffect)(() => {
     const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
     setIsTouchDevice(hasTouch);
     const userAgent = navigator.userAgent;
@@ -7395,51 +7418,51 @@ function useDeviceDetection() {
 }
 // src/hooks/useProductPage.ts
-var import_react33 = require("react");
+var import_react34 = require("react");
 // src/patterns/MockupPriorityProvider.tsx
-var import_react32 = require("react");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_react33 = require("react");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 var MAX_LEVEL3_PREFETCH = 5;
 var PRIORITY_RECALC_DEBOUNCE_MS = 50;
 var PRELOAD_MARGIN_PX = 750;
-var MockupPriorityContext = (0, import_react32.createContext)(
+var MockupPriorityContext = (0, import_react33.createContext)(
   void 0
 );
 function MockupPriorityProvider({ children }) {
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     return () => {
     };
   }, []);
-  const visibilityMapRef = (0, import_react32.useRef)(/* @__PURE__ */ new Map());
-  const prioritiesRef = (0, import_react32.useRef)(/* @__PURE__ */ new Map());
-  const level1MockupRef = (0, import_react32.useRef)(null);
-  const level2MockupsRef = (0, import_react32.useRef)([]);
-  const level3QueueRef = (0, import_react32.useRef)([]);
-  const mobileCarouselRef = (0, import_react32.useRef)(null);
-  const registrationOrderRef = (0, import_react32.useRef)([]);
-  const elementRefsRef = (0, import_react32.useRef)(/* @__PURE__ */ new Map());
-  const prioritySubscribersRef = (0, import_react32.useRef)(
+  const visibilityMapRef = (0, import_react33.useRef)(/* @__PURE__ */ new Map());
+  const prioritiesRef = (0, import_react33.useRef)(/* @__PURE__ */ new Map());
+  const level1MockupRef = (0, import_react33.useRef)(null);
+  const level2MockupsRef = (0, import_react33.useRef)([]);
+  const level3QueueRef = (0, import_react33.useRef)([]);
+  const mobileCarouselRef = (0, import_react33.useRef)(null);
+  const registrationOrderRef = (0, import_react33.useRef)([]);
+  const elementRefsRef = (0, import_react33.useRef)(/* @__PURE__ */ new Map());
+  const prioritySubscribersRef = (0, import_react33.useRef)(
     /* @__PURE__ */ new Map()
   );
-  const level1SubscribersRef = (0, import_react32.useRef)(
+  const level1SubscribersRef = (0, import_react33.useRef)(
     /* @__PURE__ */ new Set()
   );
   const scrollState = useScrollDirection();
-  const scrollDirectionRef = (0, import_react32.useRef)("idle");
+  const scrollDirectionRef = (0, import_react33.useRef)("idle");
   scrollDirectionRef.current = scrollState.direction;
-  const recalcTimeoutRef = (0, import_react32.useRef)(null);
-  const pendingRafRef = (0, import_react32.useRef)(null);
-  const [level1MockupId, setLevel1MockupId] = (0, import_react32.useState)(null);
+  const recalcTimeoutRef = (0, import_react33.useRef)(null);
+  const pendingRafRef = (0, import_react33.useRef)(null);
+  const [level1MockupId, setLevel1MockupId] = (0, import_react33.useState)(null);
   const realtimeContext = useRealtimeOptional();
-  const currentRenderingLevelRef = (0, import_react32.useRef)(null);
-  const pendingMockupsRef = (0, import_react32.useRef)(/* @__PURE__ */ new Set());
-  const renderedMockupsRef = (0, import_react32.useRef)(/* @__PURE__ */ new Set());
-  const lastPendingBlobTimeRef = (0, import_react32.useRef)(0);
+  const currentRenderingLevelRef = (0, import_react33.useRef)(null);
+  const pendingMockupsRef = (0, import_react33.useRef)(/* @__PURE__ */ new Set());
+  const renderedMockupsRef = (0, import_react33.useRef)(/* @__PURE__ */ new Set());
+  const lastPendingBlobTimeRef = (0, import_react33.useRef)(0);
   const DRAG_STOP_DEBOUNCE_MS = 250;
   const BLOB_SEND_DELAY_MS = 100;
-  const pendingBlobRequestTimeoutRef = (0, import_react32.useRef)(null);
-  const requestMockupsForLevel = (0, import_react32.useCallback)((level) => {
+  const pendingBlobRequestTimeoutRef = (0, import_react33.useRef)(null);
+  const requestMockupsForLevel = (0, import_react33.useCallback)((level) => {
     if (!realtimeContext?.updateMockupIds) {
       return;
     }
@@ -7467,8 +7490,8 @@ function MockupPriorityProvider({ children }) {
     pendingMockupsRef.current = new Set(mockupIds);
     realtimeContext.updateMockupIds(mockupIds);
   }, [realtimeContext]);
-  const levelAdvanceTimeoutRef = (0, import_react32.useRef)(null);
-  const handleMockupResult = (0, import_react32.useCallback)((mockupId) => {
+  const levelAdvanceTimeoutRef = (0, import_react33.useRef)(null);
+  const handleMockupResult = (0, import_react33.useCallback)((mockupId) => {
     renderedMockupsRef.current.add(mockupId);
     pendingMockupsRef.current.delete(mockupId);
     const currentLevel = currentRenderingLevelRef.current;
@@ -7504,7 +7527,7 @@ function MockupPriorityProvider({ children }) {
       }
     }
   }, [requestMockupsForLevel]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (!realtimeContext?.subscribeMockupResults) return;
     const unsubscribe = realtimeContext.subscribeMockupResults((results) => {
       results.forEach((result) => {
@@ -7513,13 +7536,13 @@ function MockupPriorityProvider({ children }) {
     });
     return unsubscribe;
   }, [realtimeContext, handleMockupResult]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (realtimeContext?.isConfigured && level1MockupRef.current) {
       renderedMockupsRef.current.clear();
       requestMockupsForLevel(1);
     }
   }, [realtimeContext, requestMockupsForLevel]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (level1MockupId === null) {
       return;
     }
@@ -7529,7 +7552,7 @@ function MockupPriorityProvider({ children }) {
     renderedMockupsRef.current.clear();
     requestMockupsForLevel(1);
   }, [level1MockupId, realtimeContext?.isConfigured, requestMockupsForLevel]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (!realtimeContext?.subscribePendingBlob) return;
     const handlePendingBlob = (placement) => {
       lastPendingBlobTimeRef.current = Date.now();
@@ -7541,7 +7564,7 @@ function MockupPriorityProvider({ children }) {
     const unsubscribe = realtimeContext.subscribePendingBlob(handlePendingBlob);
     return unsubscribe;
   }, [realtimeContext]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (!realtimeContext?.subscribeBlobSent) return;
     const handleBlobSent = (placement) => {
       if (pendingBlobRequestTimeoutRef.current) {
@@ -7558,7 +7581,7 @@ function MockupPriorityProvider({ children }) {
     const unsubscribe = realtimeContext.subscribeBlobSent(handleBlobSent);
     return unsubscribe;
   }, [realtimeContext, requestMockupsForLevel]);
-  const recalculatePriorities = (0, import_react32.useCallback)(() => {
+  const recalculatePriorities = (0, import_react33.useCallback)(() => {
     const mobileState = mobileCarouselRef.current;
     if (mobileState && mobileState.mockupIds.length > 0) {
       const { currentIndex, mockupIds } = mobileState;
@@ -7648,7 +7671,7 @@ function MockupPriorityProvider({ children }) {
       subscribers?.forEach((cb) => cb(newLevel));
     });
   }, []);
-  const scheduleRecalculation = (0, import_react32.useCallback)(() => {
+  const scheduleRecalculation = (0, import_react33.useCallback)(() => {
     if (recalcTimeoutRef.current) {
       clearTimeout(recalcTimeoutRef.current);
     }
@@ -7657,7 +7680,7 @@ function MockupPriorityProvider({ children }) {
       recalcTimeoutRef.current = null;
     }, PRIORITY_RECALC_DEBOUNCE_MS);
   }, [recalculatePriorities]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     return () => {
       if (recalcTimeoutRef.current) {
         clearTimeout(recalcTimeoutRef.current);
@@ -7673,7 +7696,7 @@ function MockupPriorityProvider({ children }) {
       }
     };
   }, []);
-  const updateVisibilityFromRefs = (0, import_react32.useCallback)(() => {
+  const updateVisibilityFromRefs = (0, import_react33.useCallback)(() => {
     const viewportHeight = typeof window !== "undefined" ? window.innerHeight : 800;
     const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1200;
     const viewportCenterY = viewportHeight / 2;
@@ -7714,7 +7737,7 @@ function MockupPriorityProvider({ children }) {
       });
     });
   }, []);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     const pollVisibility = () => {
       updateVisibilityFromRefs();
       recalculatePriorities();
@@ -7727,7 +7750,7 @@ function MockupPriorityProvider({ children }) {
       window.removeEventListener("scroll", pollVisibility);
     };
   }, [updateVisibilityFromRefs, recalculatePriorities]);
-  const registerMockup = (0, import_react32.useCallback)(
+  const registerMockup = (0, import_react33.useCallback)(
     (mockupId, placement, initialPriority, elementRef) => {
       if (!registrationOrderRef.current.includes(mockupId)) {
         registrationOrderRef.current.push(mockupId);
@@ -7776,7 +7799,7 @@ function MockupPriorityProvider({ children }) {
     },
     []
   );
-  const unregisterMockup = (0, import_react32.useCallback)((mockupId) => {
+  const unregisterMockup = (0, import_react33.useCallback)((mockupId) => {
     visibilityMapRef.current.delete(mockupId);
     prioritiesRef.current.delete(mockupId);
     prioritySubscribersRef.current.delete(mockupId);
@@ -7791,7 +7814,7 @@ function MockupPriorityProvider({ children }) {
       scheduleRecalculation();
     }
   }, [scheduleRecalculation]);
-  const updateElementRef = (0, import_react32.useCallback)((mockupId, element) => {
+  const updateElementRef = (0, import_react33.useCallback)((mockupId, element) => {
     if (element) {
       const rect = element.getBoundingClientRect();
       if (rect.height === 0 || rect.width === 0) {
@@ -7804,7 +7827,7 @@ function MockupPriorityProvider({ children }) {
       elementRefsRef.current.delete(mockupId);
     }
   }, [updateVisibilityFromRefs, scheduleRecalculation]);
-  const reportVisibility = (0, import_react32.useCallback)(
+  const reportVisibility = (0, import_react33.useCallback)(
     (mockupId, ratio, boundingRect) => {
       const existing = visibilityMapRef.current.get(mockupId);
       if (!existing) {
@@ -7853,21 +7876,21 @@ function MockupPriorityProvider({ children }) {
     },
     [scheduleRecalculation, recalculatePriorities]
   );
-  const reportMobileCarouselIndex = (0, import_react32.useCallback)(
+  const reportMobileCarouselIndex = (0, import_react33.useCallback)(
     (currentIndex, mockupIds) => {
       mobileCarouselRef.current = { currentIndex, mockupIds };
       recalculatePriorities();
     },
     [recalculatePriorities]
   );
-  const clearMobileCarouselMode = (0, import_react32.useCallback)(() => {
+  const clearMobileCarouselMode = (0, import_react33.useCallback)(() => {
     mobileCarouselRef.current = null;
     recalculatePriorities();
   }, [recalculatePriorities]);
-  const getPriorityLevel = (0, import_react32.useCallback)((mockupId) => {
+  const getPriorityLevel = (0, import_react33.useCallback)((mockupId) => {
     return prioritiesRef.current.get(mockupId) || 3;
   }, []);
-  const getQueuePriority = (0, import_react32.useCallback)((mockupId) => {
+  const getQueuePriority = (0, import_react33.useCallback)((mockupId) => {
     const level = prioritiesRef.current.get(mockupId) || 3;
     switch (level) {
       case 1:
@@ -7880,19 +7903,19 @@ function MockupPriorityProvider({ children }) {
         return 10;
     }
   }, []);
-  const getLevel1Mockup = (0, import_react32.useCallback)(() => {
+  const getLevel1Mockup = (0, import_react33.useCallback)(() => {
     return level1MockupRef.current;
   }, []);
-  const getLevel2Mockups = (0, import_react32.useCallback)(() => {
+  const getLevel2Mockups = (0, import_react33.useCallback)(() => {
     return [...level2MockupsRef.current];
   }, []);
-  const getLevel3Queue = (0, import_react32.useCallback)(() => {
+  const getLevel3Queue = (0, import_react33.useCallback)(() => {
     return [...level3QueueRef.current];
   }, []);
-  const getVisibility = (0, import_react32.useCallback)((mockupId) => {
+  const getVisibility = (0, import_react33.useCallback)((mockupId) => {
     return visibilityMapRef.current.get(mockupId) || null;
   }, []);
-  const getMockupIdsForLevel = (0, import_react32.useCallback)((level) => {
+  const getMockupIdsForLevel = (0, import_react33.useCallback)((level) => {
     switch (level) {
       case 1:
         return level1MockupRef.current ? [level1MockupRef.current] : [];
@@ -7904,16 +7927,16 @@ function MockupPriorityProvider({ children }) {
         return [];
     }
   }, []);
-  const shouldPauseLevel = (0, import_react32.useCallback)((level) => {
+  const shouldPauseLevel = (0, import_react33.useCallback)((level) => {
     if (level === 2) {
       return level1MockupRef.current !== null;
     }
     return level1MockupRef.current !== null || level2MockupsRef.current.length > 0;
   }, []);
-  const isLevel1Active = (0, import_react32.useCallback)(() => {
+  const isLevel1Active = (0, import_react33.useCallback)(() => {
     return level1MockupRef.current !== null;
   }, []);
-  const subscribePriorityChange = (0, import_react32.useCallback)(
+  const subscribePriorityChange = (0, import_react33.useCallback)(
     (mockupId, callback) => {
       if (!prioritySubscribersRef.current.has(mockupId)) {
         prioritySubscribersRef.current.set(mockupId, /* @__PURE__ */ new Set());
@@ -7933,7 +7956,7 @@ function MockupPriorityProvider({ children }) {
     },
     []
   );
-  const subscribeLevel1Change = (0, import_react32.useCallback)(
+  const subscribeLevel1Change = (0, import_react33.useCallback)(
     (callback) => {
       level1SubscribersRef.current.add(callback);
       callback(level1MockupRef.current);
@@ -7943,7 +7966,7 @@ function MockupPriorityProvider({ children }) {
     },
     []
   );
-  const contextValue = (0, import_react32.useMemo)(
+  const contextValue = (0, import_react33.useMemo)(
     () => ({
       registerMockup,
       unregisterMockup,
@@ -7983,10 +8006,10 @@ function MockupPriorityProvider({ children }) {
       subscribeLevel1Change
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(MockupPriorityContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(MockupPriorityContext.Provider, { value: contextValue, children });
 }
 function useMockupPriority() {
-  const context = (0, import_react32.useContext)(MockupPriorityContext);
+  const context = (0, import_react33.useContext)(MockupPriorityContext);
   if (!context) {
     throw new Error(
       "useMockupPriority must be used within a MockupPriorityProvider"
@@ -7995,7 +8018,7 @@ function useMockupPriority() {
   return context;
 }
 function useMockupPriorityOptional() {
-  return (0, import_react32.useContext)(MockupPriorityContext);
+  return (0, import_react33.useContext)(MockupPriorityContext);
 }
 // src/hooks/useProductPage.ts
@@ -8026,7 +8049,7 @@ function useProductPage() {
   const realtime = useRealtimeOptional();
   const priority = useMockupPriorityOptional();
   const providers = useProviderStatus();
-  return (0, import_react33.useMemo)(
+  return (0, import_react34.useMemo)(
     () => ({
       // Product Data
       product: productCtx.product,
@@ -8120,7 +8143,7 @@ function useArtworkAlignment(placement) {
 }
 function useSetArtworkAlignment() {
   const productCtx = useProductOptional();
-  return (0, import_react33.useCallback)(
+  return (0, import_react34.useCallback)(
     (placement, alignment) => {
       if (productCtx) {
         const currentDesign = productCtx.placements[placement];
@@ -8137,7 +8160,7 @@ function useSelectedArtwork() {
   const productCtx = useProductOptional();
   const shopCtx = useShopOptional();
   const ctx = productCtx || shopCtx;
-  const setArtwork = (0, import_react33.useCallback)(
+  const setArtwork = (0, import_react34.useCallback)(
     (artwork) => {
       ctx?.setSelectedArtwork(artwork);
     },
@@ -8147,7 +8170,7 @@ function useSelectedArtwork() {
 }
 function useProductSelection() {
   const productCtx = useProductOptional();
-  const update = (0, import_react33.useCallback)(
+  const update = (0, import_react34.useCallback)(
     (selection) => {
       productCtx?.updateSelection?.(selection);
     },
@@ -8157,7 +8180,7 @@ function useProductSelection() {
 }
 function usePlacementClipShape(placement) {
   const productCtx = useProductOptional();
-  const setShape = (0, import_react33.useCallback)(
+  const setShape = (0, import_react34.useCallback)(
     (shape) => {
       productCtx?.setPlacementClipShape(placement, shape);
     },
@@ -8170,10 +8193,10 @@ function usePlacementClipShape(placement) {
 }
 // src/hooks/viewport/useMediaQuery.ts
-var import_react34 = require("react");
+var import_react35 = require("react");
 function useMediaQuery(query) {
-  const [matches, setMatches] = (0, import_react34.useState)(null);
-  (0, import_react34.useEffect)(() => {
+  const [matches, setMatches] = (0, import_react35.useState)(null);
+  (0, import_react35.useEffect)(() => {
     const media = window.matchMedia(query);
     setMatches(media.matches);
     const listener = () => setMatches(media.matches);
@@ -8184,15 +8207,15 @@ function useMediaQuery(query) {
 }
 // src/hooks/viewport/useViewportDimensions.ts
-var import_react35 = require("react");
+var import_react36 = require("react");
 function useViewportDimensions(isDesktop) {
-  const [dimensions, setDimensions] = (0, import_react35.useState)({
+  const [dimensions, setDimensions] = (0, import_react36.useState)({
     width: 0,
     height: 0,
     aspectRatio: 0,
     resizeVersion: 0
   });
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     const width = window.innerWidth;
     const height = window.innerHeight;
     setDimensions((prev) => ({
@@ -8203,7 +8226,7 @@ function useViewportDimensions(isDesktop) {
       // Keep at 0 for initial mount
     }));
   }, []);
-  (0, import_react35.useLayoutEffect)(() => {
+  (0, import_react36.useLayoutEffect)(() => {
     if (isDesktop !== true) return;
     const width = window.innerWidth;
     const height = window.innerHeight;
@@ -8215,7 +8238,7 @@ function useViewportDimensions(isDesktop) {
       resizeVersion: prev.resizeVersion + 1
     }));
   }, [isDesktop]);
-  (0, import_react35.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (isDesktop !== true) return;
     let resizeTimeout = null;
     let lastWidth = window.innerWidth;
@@ -8256,7 +8279,7 @@ function useViewportDimensions(isDesktop) {
 }
 // src/hooks/viewport/useResponsiveImageCap.ts
-var import_react36 = require("react");
+var import_react37 = require("react");
 var DEFAULT_IMAGE_CONFIG = {
   ASPECT_RATIO: 16 / 9,
   WIDTH_VW: 140,
@@ -8268,7 +8291,7 @@ var DEFAULT_IMAGE_CONFIG = {
 };
 function useResponsiveImageCap(dimensions, options = {}) {
   const { aspectRatio = DEFAULT_IMAGE_CONFIG.ASPECT_RATIO, sidebarWidthPx } = options;
-  return (0, import_react36.useMemo)(() => {
+  return (0, import_react37.useMemo)(() => {
     const vw = dimensions.width;
     const vh = dimensions.height;
     const viewportAspectRatio = dimensions.aspectRatio;
@@ -8326,7 +8349,7 @@ function useResponsiveImageCap(dimensions, options = {}) {
 }
 // src/hooks/viewport/useWideMonitorMode.ts
-var import_react37 = require("react");
+var import_react38 = require("react");
 var LAYOUT_CONFIG = {
   SIDEBAR_MAX_PX: 384,
   SIDEBAR_MARGIN_PX: 32,
@@ -8366,7 +8389,7 @@ function hasEdgeBlur(viewportWidth, maxWidthPx, sidebarPercent = 0.35, sidebarWi
   return gap > 10;
 }
 function useWideMonitorMode(imageCapInfo, sidebarPercent) {
-  return (0, import_react37.useMemo)(() => {
+  return (0, import_react38.useMemo)(() => {
     const { viewportWidth, maxWidthPx } = imageCapInfo;
     if (viewportWidth < 768) return false;
     const effectiveSidebarPercent = sidebarPercent ?? (viewportWidth >= 1280 ? 0.35 : 0.3);
@@ -8721,8 +8744,8 @@ var CanvasExportService = class _CanvasExportService {
 var canvasExportService = new CanvasExportService();
 // src/components/CanvasIsolationBoundary.tsx
-var import_react38 = __toESM(require("react"), 1);
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_react39 = __toESM(require("react"), 1);
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function CanvasIsolationConfigurator({
   placementName: placementNameProp,
   onArtworkChange,
@@ -8731,7 +8754,7 @@ function CanvasIsolationConfigurator({
 }) {
   const productContext = useProductOptional();
   const realtimeContext = useRealtimeOptional();
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     canvasExportService.configure({
       sendCanvasBlob: realtimeContext?.sendCanvasBlob,
       sendCanvasState: realtimeContext?.sendCanvasState,
@@ -8762,16 +8785,16 @@ function CanvasIsolationConfigurator({
     onArtworkChange,
     clearImageBitmapCache
   ]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     return () => {
       canvasExportService.reset();
     };
   }, []);
   return null;
 }
-var IsolatedChildren = import_react38.default.memo(
+var IsolatedChildren = import_react39.default.memo(
   function IsolatedChildren2({ children }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_jsx_runtime53.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx_runtime54.Fragment, { 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
@@ -8784,8 +8807,8 @@ function CanvasIsolationBoundary({
   clearImageBitmapCache,
   serializeStateForServer
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       CanvasIsolationConfigurator,
       {
         placementName,
@@ -8794,7 +8817,7 @@ function CanvasIsolationBoundary({
         serializeStateForServer
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(IsolatedChildren, { children })
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(IsolatedChildren, { children })
   ] });
 }
 function useIsolatedCanvas() {
@@ -8817,8 +8840,8 @@ function useIsolatedCanvas() {
 }
 // src/components/LoadingOverlayPrism.tsx
-var import_react39 = require("react");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_react40 = require("react");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function generateParticles() {
   return Array.from({ length: 16 }, () => ({
     left: 10 + Math.random() * 80,
@@ -8922,18 +8945,18 @@ function LoadingOverlayPrism({
 }) {
   ensureStyles();
   console.log(`[Prism] render visible=${visible}`);
-  const [mounted, setMounted] = (0, import_react39.useState)(false);
-  (0, import_react39.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react40.useState)(false);
+  (0, import_react40.useEffect)(() => {
     console.log(`[Prism] MOUNTED \u2014 scheduling fade-in`);
     const raf = requestAnimationFrame(() => setMounted(true));
     return () => cancelAnimationFrame(raf);
   }, []);
-  const [particles, setParticles] = (0, import_react39.useState)([]);
-  (0, import_react39.useEffect)(() => {
+  const [particles, setParticles] = (0, import_react40.useState)([]);
+  (0, import_react40.useEffect)(() => {
     setParticles(generateParticles());
   }, []);
-  const prevVisibleRef = (0, import_react39.useRef)(visible);
-  (0, import_react39.useEffect)(() => {
+  const prevVisibleRef = (0, import_react40.useRef)(visible);
+  (0, import_react40.useEffect)(() => {
     if (prevVisibleRef.current && !visible) {
       console.log(`[Prism] visible changed true\u2192false \u2014 FADE-OUT STARTING`);
     } else if (!prevVisibleRef.current && visible) {
@@ -8941,7 +8964,7 @@ function LoadingOverlayPrism({
     }
     prevVisibleRef.current = visible;
   }, [visible]);
-  const handleTransitionEnd = (0, import_react39.useCallback)(() => {
+  const handleTransitionEnd = (0, import_react40.useCallback)(() => {
     if (!visible) {
       console.log(`[Prism] FADE-OUT COMPLETE \u2014 calling onExited`);
       onExited?.();
@@ -8955,20 +8978,20 @@ function LoadingOverlayPrism({
   } else if (mounted) {
     fadeClass = " prism-fade-in";
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     "div",
     {
       className: `prism-loading-overlay absolute inset-0${fadeClass}`,
       onTransitionEnd: handleTransitionEnd,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "prism-loading-rainbow", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "prism-loading-band" }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "prism-loading-band" }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "prism-loading-band" }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "prism-loading-band" }),
-          /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "prism-loading-band" })
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "prism-loading-rainbow", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "prism-loading-band" }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "prism-loading-band" }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "prism-loading-band" }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "prism-loading-band" }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "prism-loading-band" })
         ] }),
-        particles.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+        particles.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           "div",
           {
             className: "prism-loading-particle",
@@ -8990,9 +9013,9 @@ function LoadingOverlayPrism({
 }
 var SHOW_DELAY_MS = 200;
 function useLoadingOverlay(isLoading) {
-  const [showOverlay, setShowOverlay] = (0, import_react39.useState)(false);
-  const timerRef = (0, import_react39.useRef)(null);
-  (0, import_react39.useEffect)(() => {
+  const [showOverlay, setShowOverlay] = (0, import_react40.useState)(false);
+  const timerRef = (0, import_react40.useRef)(null);
+  (0, import_react40.useEffect)(() => {
     if (isLoading) {
       timerRef.current = setTimeout(() => {
         setShowOverlay(true);
@@ -9010,7 +9033,7 @@ function useLoadingOverlay(isLoading) {
       }
     };
   }, [isLoading]);
-  const handleExited = (0, import_react39.useCallback)(() => {
+  const handleExited = (0, import_react40.useCallback)(() => {
     setShowOverlay(false);
   }, []);
   return {
@@ -9021,9 +9044,9 @@ function useLoadingOverlay(isLoading) {
 }
 // src/components/LoadingOverlayPrismCandy.tsx
-var import_react40 = require("react");
+var import_react41 = require("react");
 var import_react_dom2 = require("react-dom");
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 var BANDS = [
   { rgb: "230, 45, 55", delay: "-0.0s" },
   // red
@@ -9193,19 +9216,19 @@ function CandyVisual({
   onTransitionEnd,
   variantClass = ""
 }) {
-  const [particles, setParticles] = (0, import_react40.useState)([]);
-  (0, import_react40.useEffect)(() => {
+  const [particles, setParticles] = (0, import_react41.useState)([]);
+  (0, import_react41.useEffect)(() => {
     setParticles(generateParticles2());
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
     "div",
     {
       className: `candy-loading-overlay ${variantClass} ${fadeClass}`.trim(),
       style,
       onTransitionEnd,
       children: [
-        BANDS.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "candy-band" }, `b-${i}`)),
-        particles.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        BANDS.map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "candy-band" }, `b-${i}`)),
+        particles.map((p, i) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
           "div",
           {
             className: "candy-particle",
@@ -9224,15 +9247,15 @@ function CandyVisual({
     }
   );
 }
-var LoadingOverlayPrismCandy = (0, import_react40.memo)(function LoadingOverlayPrismCandy2({
+var LoadingOverlayPrismCandy = (0, import_react41.memo)(function LoadingOverlayPrismCandy2({
   visible = true,
   onExited
 }) {
   ensureStyles2();
-  const anchorRef = (0, import_react40.useRef)(null);
-  const [bounds, setBounds] = (0, import_react40.useState)(null);
-  const [mounted, setMounted] = (0, import_react40.useState)(false);
-  const measure = (0, import_react40.useCallback)(() => {
+  const anchorRef = (0, import_react41.useRef)(null);
+  const [bounds, setBounds] = (0, import_react41.useState)(null);
+  const [mounted, setMounted] = (0, import_react41.useState)(false);
+  const measure = (0, import_react41.useCallback)(() => {
     const el = anchorRef.current;
     if (!el) return;
     const r = el.getBoundingClientRect();
@@ -9243,7 +9266,7 @@ var LoadingOverlayPrismCandy = (0, import_react40.memo)(function LoadingOverlayP
       height: r.height
     });
   }, []);
-  (0, import_react40.useLayoutEffect)(() => {
+  (0, import_react41.useLayoutEffect)(() => {
     measure();
     window.addEventListener("resize", measure);
     let ro = null;
@@ -9256,11 +9279,11 @@ var LoadingOverlayPrismCandy = (0, import_react40.memo)(function LoadingOverlayP
       ro?.disconnect();
     };
   }, [measure]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     const raf = requestAnimationFrame(() => setMounted(true));
     return () => cancelAnimationFrame(raf);
   }, []);
-  const handleTransitionEnd = (0, import_react40.useCallback)(
+  const handleTransitionEnd = (0, import_react41.useCallback)(
     (e) => {
       if (e.propertyName !== "background-color") return;
       if (!visible) onExited?.();
@@ -9270,8 +9293,8 @@ var LoadingOverlayPrismCandy = (0, import_react40.memo)(function LoadingOverlayP
   let fadeClass = "";
   if (!visible) fadeClass = "candy-fade-out";
   else if (mounted) fadeClass = "candy-fade-in";
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       "div",
       {
         ref: anchorRef,
@@ -9284,7 +9307,7 @@ var LoadingOverlayPrismCandy = (0, import_react40.memo)(function LoadingOverlayP
       }
     ),
     bounds && typeof document !== "undefined" && (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         CandyVisual,
         {
           fadeClass,
@@ -9303,19 +9326,19 @@ var LoadingOverlayPrismCandy = (0, import_react40.memo)(function LoadingOverlayP
     )
   ] });
 });
-var LoadingOverlayPrismCandyInline = (0, import_react40.memo)(
+var LoadingOverlayPrismCandyInline = (0, import_react41.memo)(
   function LoadingOverlayPrismCandyInline2({
     visible = true,
     onExited,
     variant = "dark"
   }) {
     ensureStyles2();
-    const [mounted, setMounted] = (0, import_react40.useState)(false);
-    (0, import_react40.useEffect)(() => {
+    const [mounted, setMounted] = (0, import_react41.useState)(false);
+    (0, import_react41.useEffect)(() => {
       const raf = requestAnimationFrame(() => setMounted(true));
       return () => cancelAnimationFrame(raf);
     }, []);
-    const handleTransitionEnd = (0, import_react40.useCallback)(
+    const handleTransitionEnd = (0, import_react41.useCallback)(
       (e) => {
         if (e.propertyName !== "background-color") return;
         if (!visible) onExited?.();
@@ -9325,7 +9348,7 @@ var LoadingOverlayPrismCandyInline = (0, import_react40.memo)(
     let fadeClass = "";
     if (!visible) fadeClass = "candy-fade-out";
     else if (mounted) fadeClass = "candy-fade-in";
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
       CandyVisual,
       {
         fadeClass,
@@ -9342,11 +9365,11 @@ var LoadingOverlayPrismCandyInline = (0, import_react40.memo)(
 );
 // src/index.ts
-var import_react70 = require("@snowcone-app/sdk/react");
+var import_react71 = require("@snowcone-app/sdk/react");
 var import_sdk11 = require("@snowcone-app/sdk");
 // src/patterns/ProductPageProvider.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function ProductPageProvider({
   children,
   productId,
@@ -9360,12 +9383,12 @@ function ProductPageProvider({
   realtimeGrantUrl,
   enablePriority = true
 }) {
-  let content = /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Product, { productId, productData, children });
+  let content = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Product, { productId, productData, children });
   if (enablePriority) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(MockupPriorityProvider, { children: content });
+    content = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(MockupPriorityProvider, { children: content });
   }
   if (enableRealtime) {
-    content = /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    content = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       RealtimeProvider,
       {
         wsUrl: realtimeWsUrl,
@@ -9375,7 +9398,7 @@ function ProductPageProvider({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     Shop,
     {
       endpoint,
@@ -9395,23 +9418,23 @@ function ProductPageProviderMinimal({
   shop,
   initialArtwork
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     Shop,
     {
       endpoint,
       mockupUrl,
       shop,
       initialArtwork,
-      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Product, { productId, productData, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Product, { productId, productData, children })
     }
   );
 }
 // src/composed/ArtAlignment.tsx
-var import_react41 = require("react");
-var import_react42 = require("@use-gesture/react");
+var import_react42 = require("react");
+var import_react43 = require("@use-gesture/react");
 var import_sdk9 = require("@snowcone-app/sdk");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 function ArtAlignment({
   src: propSrc,
   artworkAspectRatio: propAspectRatio,
@@ -9445,16 +9468,16 @@ function ArtAlignment({
       selection: {}
     };
   }
-  const containerRef = (0, import_react41.useRef)(null);
-  const imageRef = (0, import_react41.useRef)(null);
-  const lastUserDragTimeRef = (0, import_react41.useRef)(0);
-  const [containerSize, setContainerSize] = (0, import_react41.useState)({ width: 0, height: 0 });
-  const [position, setPosition] = (0, import_react41.useState)({ x: 0, y: 0 });
-  const [isReady, setIsReady] = (0, import_react41.useState)(false);
-  const [detectedAspectRatio, setDetectedAspectRatio] = (0, import_react41.useState)();
+  const containerRef = (0, import_react42.useRef)(null);
+  const imageRef = (0, import_react42.useRef)(null);
+  const lastUserDragTimeRef = (0, import_react42.useRef)(0);
+  const [containerSize, setContainerSize] = (0, import_react42.useState)({ width: 0, height: 0 });
+  const [position, setPosition] = (0, import_react42.useState)({ x: 0, y: 0 });
+  const [isReady, setIsReady] = (0, import_react42.useState)(false);
+  const [detectedAspectRatio, setDetectedAspectRatio] = (0, import_react42.useState)();
   const effectiveAspectRatio = artworkAspectRatio || detectedAspectRatio;
   const alignment = placementDesign?.alignment || propAlignment || "center";
-  const descriptor = (0, import_react41.useMemo)(
+  const descriptor = (0, import_react42.useMemo)(
     () => (0, import_sdk9.describeProductArtAlignment)(
       {
         src,
@@ -9476,7 +9499,7 @@ function ArtAlignment({
       productContext
     ]
   );
-  const containerStyle = (0, import_react41.useMemo)(() => {
+  const containerStyle = (0, import_react42.useMemo)(() => {
     const style = {};
     if (height !== void 0) {
       const heightValue = typeof height === "number" ? height : parseFloat(height);
@@ -9507,7 +9530,7 @@ function ArtAlignment({
     }
     return style;
   }, [effectiveAspectRatio, height, maxHeight, minHeight]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!containerRef.current) return;
     const resizeObserver = new ResizeObserver((entries) => {
       const entry = entries[0];
@@ -9533,7 +9556,7 @@ function ArtAlignment({
       }
     }
   };
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!imageRef.current || !descriptor) return;
     if (imageRef.current.complete) {
       setIsReady(true);
@@ -9558,7 +9581,7 @@ function ArtAlignment({
       img.removeEventListener("load", handleLoad);
     };
   }, [descriptor?.src, artworkAspectRatio]);
-  const maskDimensions = (0, import_react41.useMemo)(() => {
+  const maskDimensions = (0, import_react42.useMemo)(() => {
     if (!isReady || containerSize.width === 0 || !descriptor) {
       return { width: 0, height: 0 };
     }
@@ -9573,14 +9596,14 @@ function ArtAlignment({
     descriptor?.effectiveAlignment,
     isReady
   ]);
-  const clipPathCoords = (0, import_react41.useMemo)(() => {
+  const clipPathCoords = (0, import_react42.useMemo)(() => {
     const halfMaskW = maskDimensions.width / 2;
     const halfMaskH = maskDimensions.height / 2;
     const halfContainerW = containerSize.width / 2;
     const halfContainerH = containerSize.height / 2;
     return { halfMaskW, halfMaskH, halfContainerW, halfContainerH };
   }, [maskDimensions.width, maskDimensions.height, containerSize.width, containerSize.height]);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (Date.now() - lastUserDragTimeRef.current < 500) return;
     if (!isReady || maskDimensions.width === 0 || !descriptor) return;
     const points = (0, import_sdk9.getSnapPoints)(
@@ -9602,7 +9625,7 @@ function ArtAlignment({
     maskDimensions.height,
     isReady
   ]);
-  const overlayStyle = (0, import_react41.useMemo)(() => {
+  const overlayStyle = (0, import_react42.useMemo)(() => {
     const { halfMaskW, halfMaskH, halfContainerW, halfContainerH } = clipPathCoords;
     const cx = position.x + halfContainerW;
     const cy = position.y + halfContainerH;
@@ -9623,7 +9646,7 @@ function ArtAlignment({
       clipPath: isReady ? `polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%, ${right}px ${bottom}px, ${right}px ${top}px, ${left}px ${top}px, ${left}px ${bottom}px, ${right}px ${bottom}px)` : "none"
     };
   }, [isReady, position.x, position.y, clipPathCoords]);
-  const maskStyle = (0, import_react41.useMemo)(() => ({
+  const maskStyle = (0, import_react42.useMemo)(() => ({
     width: `${maskDimensions.width}px`,
     height: `${maskDimensions.height}px`,
     boxShadow: `0 0 0 2px var(--color-background), 0 0 0 4px var(--color-primary)`,
@@ -9638,7 +9661,7 @@ function ArtAlignment({
     // GPU acceleration for smoother drag
     borderRadius: "var(--radius-image, 4px)"
   }), [maskDimensions.width, maskDimensions.height]);
-  const clearImageClipPath = (0, import_react41.useMemo)(() => {
+  const clearImageClipPath = (0, import_react42.useMemo)(() => {
     if (!isReady) return "none";
     const { halfMaskW, halfMaskH, halfContainerW, halfContainerH } = clipPathCoords;
     const cx = position.x + halfContainerW;
@@ -9649,14 +9672,14 @@ function ArtAlignment({
     const top = cy - halfMaskH;
     return `polygon(${left}px ${top}px, ${right}px ${top}px, ${right}px ${bottom}px, ${left}px ${bottom}px)`;
   }, [isReady, position.x, position.y, clipPathCoords]);
-  const maskTransform = (0, import_react41.useMemo)(() => {
+  const maskTransform = (0, import_react42.useMemo)(() => {
     return descriptor?.effectiveAlignment === "horizontal" ? `translate(calc(-50% + ${position.x}px), -50%)` : `translate(-50%, calc(-50% + ${position.y}px))`;
   }, [descriptor?.effectiveAlignment, position.x, position.y]);
-  const lastContextUpdateTimeRef = (0, import_react41.useRef)(0);
-  const pendingAlignmentRef = (0, import_react41.useRef)(null);
-  const throttleTimeoutRef = (0, import_react41.useRef)(null);
+  const lastContextUpdateTimeRef = (0, import_react42.useRef)(0);
+  const pendingAlignmentRef = (0, import_react42.useRef)(null);
+  const throttleTimeoutRef = (0, import_react42.useRef)(null);
   const THROTTLE_MS = 150;
-  const bind = (0, import_react42.useDrag)(
+  const bind = (0, import_react43.useDrag)(
     ({ offset: [ox, oy], last }) => {
       if (maskDimensions.width === 0 || maskDimensions.height === 0 || !descriptor) {
         return;
@@ -9749,7 +9772,7 @@ function ArtAlignment({
   if (!descriptor) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     "div",
     {
       className: `relative ${className || ""}`,
@@ -9758,8 +9781,8 @@ function ArtAlignment({
         width: "fit-content",
         maxWidth: "100%"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "overflow-hidden p-1", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { ref: containerRef, className: "relative", style: containerStyle, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "overflow-hidden p-1", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { ref: containerRef, className: "relative", style: containerStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
           "img",
           {
             ref: imageRef,
@@ -9784,9 +9807,9 @@ function ArtAlignment({
             loading: "eager"
           }
         ),
-        isReady && maskDimensions.width > 0 && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { style: overlayStyle }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        isReady && maskDimensions.width > 0 && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: overlayStyle }),
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
             "img",
             {
               src: descriptor.src,
@@ -9814,7 +9837,7 @@ function ArtAlignment({
               loading: "eager"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
             "div",
             {
               ...bind(),
@@ -9831,8 +9854,8 @@ function ArtAlignment({
 }
 // src/composed/ArtworkCustomizer.tsx
-var import_react43 = require("react");
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_react44 = require("react");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function ArtworkCustomizer(props) {
   const designContext = useDesign();
   const artwork = props.artwork || designContext.selectedArtwork;
@@ -9844,7 +9867,7 @@ function ArtworkCustomizer(props) {
   const placements = productCtx?.product?.placements || [];
   const selectedPlacement = productCtx?.selectedPlacement;
   const setSelectedPlacement = productCtx?.setSelectedPlacement;
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
     if (placements.length > 0 && !selectedPlacement && setSelectedPlacement) {
       setSelectedPlacement(placements[0].label);
     }
@@ -9854,13 +9877,13 @@ function ArtworkCustomizer(props) {
   );
   const isColorPlacement = currentPlacement?.type === "color";
   const isFitMode = currentPlacement?.defaultScaleMode === "fit";
-  (0, import_react43.useEffect)(() => {
+  (0, import_react44.useEffect)(() => {
   }, [selectedPlacement]);
   if (!artwork) {
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `text-sm text-muted-foreground ${props.className || ""}`, children: "Select artwork to customize" });
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: `text-sm text-muted-foreground ${props.className || ""}`, children: "Select artwork to customize" });
   }
   if (artwork.type === "pattern") {
-    return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       TileCount,
       {
         artwork,
@@ -9871,8 +9894,8 @@ function ArtworkCustomizer(props) {
     );
   }
   const isCanvasEditorMode = props.mode === "canvas" || !!props.children && props.mode !== "alignment";
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "flex flex-col gap-4", children: [
-    placements.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "text-sm leading-relaxed", children: placements.map((p) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex flex-col gap-4", children: [
+    placements.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-sm leading-relaxed", children: placements.map((p) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       "button",
       {
         onClick: () => setSelectedPlacement?.(p.label),
@@ -9881,7 +9904,7 @@ function ArtworkCustomizer(props) {
       },
       p.label
     )) }),
-    isColorPlacement ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ColorPicker2, { placement: selectedPlacement }) : isFitMode ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "relative", children: props.children || /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    isColorPlacement ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ColorPicker2, { placement: selectedPlacement }) : isFitMode ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "relative", children: props.children || /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
       ArtAlignment,
       {
         artwork: { src: artwork.src },
@@ -9897,7 +9920,7 @@ function ArtworkCustomizer(props) {
 // src/composed/CanvasEditor.tsx
 var import_lucide_react2 = require("lucide-react");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var ImageIcon = import_lucide_react2.Image;
 var TypeIcon = import_lucide_react2.Type;
 var ShapesIcon = import_lucide_react2.Shapes;
@@ -9908,43 +9931,43 @@ function CanvasEditor({
   onOpenTypography,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex flex-col gap-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "bg-background border-2 border-border rounded-lg aspect-square overflow-hidden relative", children: children || /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "flex items-center justify-center w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "text-muted-foreground text-sm", children: "No editor provided" }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "flex items-center justify-center gap-8 py-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "bg-background border-2 border-border rounded-lg aspect-square overflow-hidden relative", children: children || /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "flex items-center justify-center w-full h-full", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "text-muted-foreground text-sm", children: "No editor provided" }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "flex items-center justify-center gap-8 py-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
         "button",
         {
           onClick: onOpenImageGallery,
           className: "flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors",
           "aria-label": "Open image gallery",
-          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ImageIcon, { className: "w-6 h-6" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ImageIcon, { className: "w-6 h-6" }) })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
         "button",
         {
           onClick: onOpenTypography,
           className: "flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors",
           "aria-label": "Add text",
-          children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(TypeIcon, { className: "w-6 h-6" }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(TypeIcon, { className: "w-6 h-6" }) })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("button", { className: "flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ShapesIcon, { className: "w-6 h-6" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("button", { className: "flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(UploadIcon, { className: "w-6 h-6" }) }) })
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("button", { className: "flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ShapesIcon, { className: "w-6 h-6" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("button", { className: "flex flex-col items-center gap-2 text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "w-10 h-10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(UploadIcon, { className: "w-6 h-6" }) }) })
     ] })
   ] });
 }
 // src/composed/HeroProductImage.tsx
-var import_react45 = require("react");
+var import_react46 = require("react");
 var import_sdk10 = require("@snowcone-app/sdk");
 // src/hooks/viewport/useContainerWidth.ts
-var import_react44 = require("react");
+var import_react45 = require("react");
 function useContainerWidth(containerRef, maxWidth = 3e3) {
-  const [width, setWidth] = (0, import_react44.useState)(0);
-  const resizeTimeoutRef = (0, import_react44.useRef)(null);
-  (0, import_react44.useLayoutEffect)(() => {
+  const [width, setWidth] = (0, import_react45.useState)(0);
+  const resizeTimeoutRef = (0, import_react45.useRef)(null);
+  (0, import_react45.useLayoutEffect)(() => {
     const el = containerRef.current;
     if (!el) return;
     const cssWidth = el.offsetWidth;
@@ -9952,7 +9975,7 @@ function useContainerWidth(containerRef, maxWidth = 3e3) {
     const dpr = window.devicePixelRatio ?? 1;
     setWidth(Math.min(Math.round(cssWidth * dpr), maxWidth));
   }, [containerRef, maxWidth]);
-  (0, import_react44.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     const measure = () => {
       const el = containerRef.current;
       if (!el) return;
@@ -9975,7 +9998,7 @@ function useContainerWidth(containerRef, maxWidth = 3e3) {
 }
 // src/composed/HeroProductImage.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function slugifyPlacementKey(label) {
   return label.toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
 }
@@ -10009,11 +10032,12 @@ function buildHeroMockupUrl(args) {
     width: args.width,
     view: args.mockupId,
     variant: args.variantId,
+    ...args.bg ? { bg: args.bg } : {},
     ...snow.resolver ? { base: snow.resolver } : {}
   });
 }
 var EMPTY_IMAGES = [];
-var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
+var HeroProductImage = (0, import_react46.memo)(function HeroProductImage2({
   productId,
   mockupId,
   variantId,
@@ -10046,24 +10070,25 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
   const shopContext = useShopOptional();
   const realtimeContext = useRealtimeOptional();
   const priorityContext = useMockupPriorityOptional();
-  const priorityContextRef = (0, import_react45.useRef)(priorityContext);
+  const mockupBg = useMockupBackgroundOptional();
+  const priorityContextRef = (0, import_react46.useRef)(priorityContext);
   priorityContextRef.current = priorityContext;
-  const contextRef = (0, import_react45.useRef)(context);
+  const contextRef = (0, import_react46.useRef)(context);
   contextRef.current = context;
   const actualProductId = product?.id || productId || context?.product?.id;
-  const actualGvid = (0, import_react45.useMemo)(() => {
+  const actualGvid = (0, import_react46.useMemo)(() => {
     return (0, import_sdk10.resolveVariantId)(context, gvid, variantId);
   }, [gvid, variantId, context?.selection, context?.combinations]);
-  const actualMockupId = (0, import_react45.useMemo)(() => {
+  const actualMockupId = (0, import_react46.useMemo)(() => {
     return (0, import_sdk10.resolveMockupId)(context, actualGvid, mockupId);
   }, [mockupId, actualGvid, context]);
   const artworkSrc = artwork?.src;
   const selectedArtworkSrc = designContext?.selectedArtwork?.src;
   const effectiveArtworkSrc = artworkSrc || selectedArtworkSrc;
-  const containerRef = (0, import_react45.useRef)(null);
+  const containerRef = (0, import_react46.useRef)(null);
   const measuredWidth = useContainerWidth(containerRef);
   const width = widthProp ?? measuredWidth;
-  const initialStaticUrl = (0, import_react45.useMemo)(() => {
+  const initialStaticUrl = (0, import_react46.useMemo)(() => {
     if (realtimeUrl) return null;
     if (mode === "realtime") return null;
     if (typeof window !== "undefined" && window.snowcone?.signMockupUrl) {
@@ -10096,7 +10121,8 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
       placements: allPlacements,
       mockupId: actualMockupId,
       variantId: actualGvid,
-      width
+      width,
+      bg: mockupBg
     });
   }, [
     realtimeUrl,
@@ -10106,6 +10132,7 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
     actualProductId,
     actualMockupId,
     actualGvid,
+    mockupBg,
     product?.placements,
     context?.product?.placements,
     images,
@@ -10129,28 +10156,28 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
     shimmerDelay,
     initialUrl: realtimeUrl || initialStaticUrl
   });
-  const [error, setError] = (0, import_react45.useState)(null);
-  const [isInPreloadZone, setIsInPreloadZone] = (0, import_react45.useState)(true);
-  const componentIdRef = (0, import_react45.useRef)(
+  const [error, setError] = (0, import_react46.useState)(null);
+  const [isInPreloadZone, setIsInPreloadZone] = (0, import_react46.useState)(true);
+  const componentIdRef = (0, import_react46.useRef)(
     `hero-product-image-${Math.random().toString(36).substr(2, 9)}`
   );
-  const [containerMounted, setContainerMounted] = (0, import_react45.useState)(false);
-  const setContainerRef = (0, import_react45.useCallback)((node) => {
+  const [containerMounted, setContainerMounted] = (0, import_react46.useState)(false);
+  const setContainerRef = (0, import_react46.useCallback)((node) => {
     containerRef.current = node;
     setContainerMounted(!!node);
   }, []);
-  const lastUrlRef = (0, import_react45.useRef)(realtimeUrl ?? initialStaticUrl ?? null);
-  const priorityRegisteredRef = (0, import_react45.useRef)(false);
-  const onLoadCalledRef = (0, import_react45.useRef)(false);
-  const prevArtworkSrcRef = (0, import_react45.useRef)(void 0);
-  const realtimeArtworkSrcRef = (0, import_react45.useRef)(void 0);
-  const hasReceivedRealtimeRef = (0, import_react45.useRef)(false);
-  const isPendingExportRef = (0, import_react45.useRef)(false);
-  const onUrlGeneratedRef = (0, import_react45.useRef)(onUrlGenerated);
+  const lastUrlRef = (0, import_react46.useRef)(realtimeUrl ?? initialStaticUrl ?? null);
+  const priorityRegisteredRef = (0, import_react46.useRef)(false);
+  const onLoadCalledRef = (0, import_react46.useRef)(false);
+  const prevArtworkSrcRef = (0, import_react46.useRef)(void 0);
+  const realtimeArtworkSrcRef = (0, import_react46.useRef)(void 0);
+  const hasReceivedRealtimeRef = (0, import_react46.useRef)(false);
+  const isPendingExportRef = (0, import_react46.useRef)(false);
+  const onUrlGeneratedRef = (0, import_react46.useRef)(onUrlGenerated);
   onUrlGeneratedRef.current = onUrlGenerated;
-  const layersLengthRef = (0, import_react45.useRef)(layers.length);
+  const layersLengthRef = (0, import_react46.useRef)(layers.length);
   layersLengthRef.current = layers.length;
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (initialPriority === 1) return;
     if (!containerMounted || !containerRef.current) return;
     if (isInPreloadZone) return;
@@ -10169,7 +10196,7 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
     );
     return unobserve;
   }, [containerMounted, initialPriority, isInPreloadZone]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (!realtimeUrl) return;
     if (realtimeUrl === lastUrlRef.current) return;
     lastUrlRef.current = realtimeUrl;
@@ -10177,7 +10204,7 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
     const isInitialLoad = layersLengthRef.current === 0;
     addLayerDirectly(realtimeUrl, { skipTransition: isInitialLoad });
   }, [realtimeUrl, addLayerDirectly, actualMockupId, placement]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (mode === "static") {
       return;
     }
@@ -10221,7 +10248,7 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
     addLayerDirectly
     // NOTE: layers.length removed - use layersLengthRef instead to prevent duplicate requests
   ]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (mode === "static") return;
     if (!realtimeContext?.subscribePendingBlob || !placement) return;
     const handlePendingExport = (pendingPlacement) => {
@@ -10234,7 +10261,7 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
       unsubscribe?.();
     };
   }, [mode, realtimeContext?.subscribePendingBlob, placement]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (!priorityContext || !actualMockupId || !placement) return;
     priorityContext.registerMockup(actualMockupId, placement, initialPriority);
     priorityRegisteredRef.current = true;
@@ -10245,7 +10272,7 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
       }
     };
   }, [priorityContext, actualMockupId, placement, initialPriority]);
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (!priorityContext?.updateElementRef || !actualMockupId) return;
     if (containerMounted && containerRef.current) {
       priorityContext.updateElementRef(actualMockupId, containerRef.current);
@@ -10259,7 +10286,7 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
   const artworkTileCount = artwork?.type === "pattern" ? artwork?.tileCount : void 0;
   const selectedArtworkType = designContext?.selectedArtwork?.type;
   const selectedArtworkTileCount = designContext?.selectedArtwork?.type === "pattern" ? designContext?.selectedArtwork?.tileCount : void 0;
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     const currentSrc = artworkSrc || selectedArtworkSrc;
     if (currentSrc !== prevArtworkSrcRef.current) {
       lastUrlRef.current = null;
@@ -10269,11 +10296,11 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
       realtimeArtworkSrcRef.current = void 0;
     }
   }, [artworkSrc, selectedArtworkSrc]);
-  const contextSelectionRef = (0, import_react45.useRef)(context?.selection);
-  const contextOptionAttributesRef = (0, import_react45.useRef)(context?.optionAttributes);
+  const contextSelectionRef = (0, import_react46.useRef)(context?.selection);
+  const contextOptionAttributesRef = (0, import_react46.useRef)(context?.optionAttributes);
   contextSelectionRef.current = context?.selection;
   contextOptionAttributesRef.current = context?.optionAttributes;
-  const createDesignForPlacementsWrapper = (0, import_react45.useCallback)(
+  const createDesignForPlacementsWrapper = (0, import_react46.useCallback)(
     (placements, providedImages) => {
       const effectiveArtworkSrc2 = artworkSrc || selectedArtworkSrc;
       if (!effectiveArtworkSrc2 || effectiveArtworkSrc2.trim() === "" || effectiveArtworkSrc2 === "undefined" || effectiveArtworkSrc2 === "null") {
@@ -10312,7 +10339,7 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
       selectedArtworkTileCount
     ]
   );
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     if (mode === "realtime") return;
     if (initialStaticUrl && lastUrlRef.current === initialStaticUrl) {
       return;
@@ -10341,7 +10368,8 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
       placements: allPlacements,
       mockupId: actualMockupId,
       variantId: actualGvid,
-      width
+      width,
+      bg: mockupBg
     });
     if (!url) return;
     if (url === lastUrlRef.current) return;
@@ -10382,6 +10410,7 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
     actualProductId,
     actualMockupId,
     actualGvid,
+    mockupBg,
     images,
     width,
     effects,
@@ -10412,17 +10441,17 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
   const topLayer = layers[layers.length - 1];
   const displayUrl = topLayer?.url || realtimeUrl || initialStaticUrl;
   const CROSSFADE_MS = 400;
-  const [prevUrl, setPrevUrl] = (0, import_react45.useState)(null);
-  const [showNew, setShowNew] = (0, import_react45.useState)(false);
-  const [renderedUrl, setRenderedUrl] = (0, import_react45.useState)(displayUrl);
-  const [firstImageLoaded, setFirstImageLoaded] = (0, import_react45.useState)(false);
-  const [loaderMounted, setLoaderMounted] = (0, import_react45.useState)(true);
-  const [imgFailed, setImgFailed] = (0, import_react45.useState)(false);
-  const [retryNonce, setRetryNonce] = (0, import_react45.useState)(0);
-  const retriedUrlRef = (0, import_react45.useRef)(null);
-  const prevDisplayUrlRef = (0, import_react45.useRef)(displayUrl);
-  const signHintShownRef = (0, import_react45.useRef)(false);
-  (0, import_react45.useEffect)(() => {
+  const [prevUrl, setPrevUrl] = (0, import_react46.useState)(null);
+  const [showNew, setShowNew] = (0, import_react46.useState)(false);
+  const [renderedUrl, setRenderedUrl] = (0, import_react46.useState)(displayUrl);
+  const [firstImageLoaded, setFirstImageLoaded] = (0, import_react46.useState)(false);
+  const [loaderMounted, setLoaderMounted] = (0, import_react46.useState)(true);
+  const [imgFailed, setImgFailed] = (0, import_react46.useState)(false);
+  const [retryNonce, setRetryNonce] = (0, import_react46.useState)(0);
+  const retriedUrlRef = (0, import_react46.useRef)(null);
+  const prevDisplayUrlRef = (0, import_react46.useRef)(displayUrl);
+  const signHintShownRef = (0, import_react46.useRef)(false);
+  (0, import_react46.useEffect)(() => {
     if (!displayUrl || displayUrl === prevDisplayUrlRef.current) return;
     const oldUrl = prevDisplayUrlRef.current;
     prevDisplayUrlRef.current = displayUrl;
@@ -10449,26 +10478,26 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
       preload.onload = null;
     };
   }, [displayUrl]);
-  const handleCrossfadeEnd = (0, import_react45.useCallback)(() => {
+  const handleCrossfadeEnd = (0, import_react46.useCallback)(() => {
     setPrevUrl(null);
     setShowNew(false);
   }, []);
-  const handleLoaderExited = (0, import_react45.useCallback)(() => setLoaderMounted(false), []);
+  const handleLoaderExited = (0, import_react46.useCallback)(() => setLoaderMounted(false), []);
   if (!hasArtwork) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       "div",
       {
         className: `bg-gray-100 flex items-center justify-center ${className || ""}`,
         style,
-        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { className: "text-gray-400 text-center p-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "text-gray-400 text-center p-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
             "svg",
             {
               className: "w-8 h-8 mx-auto mb-2",
               fill: "none",
               stroke: "currentColor",
               viewBox: "0 0 24 24",
-              children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
                 "path",
                 {
                   strokeLinecap: "round",
@@ -10479,22 +10508,22 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "text-xs", children: "No artwork" })
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "text-xs", children: "No artwork" })
         ] })
       }
     );
   }
   if (error) {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       "div",
       {
         className: `bg-red-50 flex items-center justify-center ${className || ""}`,
         style,
-        children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "text-red-600 text-center p-4", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "text-xs", children: "Error loading" }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "text-red-600 text-center p-4", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "text-xs", children: "Error loading" }) })
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
     "div",
     {
       ref: setContainerRef,
@@ -10502,7 +10531,7 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
       style,
       "data-hero-image": "true",
       children: [
-        renderedUrl && !imgFailed && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        renderedUrl && !imgFailed && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           "img",
           {
             alt: `Product mockup${placement ? ` - ${placement}` : ""}`,
@@ -10541,8 +10570,8 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
             }
           }
         ),
-        imgFailed && !prevUrl && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "text-muted-foreground text-xs", children: "Preview unavailable" }) }),
-        realtimeContext?.renderError && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        imgFailed && !prevUrl && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "text-muted-foreground text-xs", children: "Preview unavailable" }) }),
+        realtimeContext?.renderError && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           "div",
           {
             role: "alert",
@@ -10551,7 +10580,7 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
             children: `Render blocked: ${realtimeContext.renderError.code} \u2014 ${realtimeContext.renderError.message}`
           }
         ),
-        prevUrl && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        prevUrl && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           "img",
           {
             alt: "",
@@ -10566,7 +10595,7 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
             onTransitionEnd: handleCrossfadeEnd
           }
         ),
-        loaderMounted && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        loaderMounted && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           LoadingOverlayPrismCandyInline,
           {
             visible: !firstImageLoaded,
@@ -10580,16 +10609,16 @@ var HeroProductImage = (0, import_react45.memo)(function HeroProductImage2({
 });
 // src/composed/SafeImg.tsx
-var import_react46 = __toESM(require("react"), 1);
-var import_jsx_runtime61 = require("react/jsx-runtime");
-var SafeImg = import_react46.default.forwardRef(
+var import_react47 = __toESM(require("react"), 1);
+var import_jsx_runtime62 = require("react/jsx-runtime");
+var SafeImg = import_react47.default.forwardRef(
   function SafeImg2({ fallback = null, onError, src, ...rest }, ref) {
-    const [failed, setFailed] = (0, import_react46.useState)(false);
-    (0, import_react46.useEffect)(() => {
+    const [failed, setFailed] = (0, import_react47.useState)(false);
+    (0, import_react47.useEffect)(() => {
       setFailed(false);
     }, [src]);
-    if (failed) return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_jsx_runtime61.Fragment, { children: fallback });
-    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    if (failed) return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_jsx_runtime62.Fragment, { children: fallback });
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
       "img",
       {
         ...rest,
@@ -10624,11 +10653,11 @@ var { searchClient } = (0, import_instant_meilisearch.instantMeiliSearch)(
 );
 // src/composed/search/SearchProvider.tsx
-var import_react47 = require("react");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_react48 = require("react");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function InitialSearchTrigger() {
   const { refine } = (0, import_react_instantsearch.useSearchBox)();
-  (0, import_react47.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     refine("");
   }, [refine]);
   return null;
@@ -10652,7 +10681,7 @@ function SearchProvider({
   ],
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
     import_react_instantsearch.InstantSearch,
     {
       searchClient,
@@ -10680,7 +10709,7 @@ function SearchProvider({
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
           import_react_instantsearch.Configure,
           {
             hitsPerPage,
@@ -10689,7 +10718,7 @@ function SearchProvider({
             attributesToRetrieve
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(InitialSearchTrigger, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(InitialSearchTrigger, {}),
         children
       ]
     }
@@ -10699,17 +10728,17 @@ function SearchProvider({
 // src/composed/search/SearchBox.tsx
 var import_react_instantsearch2 = require("react-instantsearch");
 var import_lucide_react3 = require("lucide-react");
-var import_react48 = require("react");
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_react49 = require("react");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 function SearchBox() {
   const { query, refine, clear } = (0, import_react_instantsearch2.useSearchBox)();
   const searchParams = useUiSearchParams();
   const router = useUiRouter();
-  const inputRef = (0, import_react48.useRef)(null);
-  const [showShimmer, setShowShimmer] = (0, import_react48.useState)(false);
+  const inputRef = (0, import_react49.useRef)(null);
+  const [showShimmer, setShowShimmer] = (0, import_react49.useState)(false);
   const inputId = "search-products-input";
   const descriptionId = "search-description";
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     const handleSpotlight = () => {
       inputRef.current?.focus();
       inputRef.current?.scrollIntoView({ behavior: "smooth", block: "center" });
@@ -10719,7 +10748,7 @@ function SearchBox() {
     window.addEventListener("search-spotlight", handleSpotlight);
     return () => window.removeEventListener("search-spotlight", handleSpotlight);
   }, []);
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     const shouldFocus = searchParams.get("focus") === "search";
     if (shouldFocus && inputRef.current) {
       const timer = setTimeout(() => {
@@ -10734,8 +10763,8 @@ function SearchBox() {
       return () => clearTimeout(timer);
     }
   }, [searchParams, router]);
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("form", { role: "search", onSubmit: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("form", { role: "search", onSubmit: (e) => e.preventDefault(), children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       Input,
       {
         ref: inputRef,
@@ -10744,15 +10773,15 @@ function SearchBox() {
         value: query,
         onChange: (e) => refine(e.target.value),
         placeholder: "Search products...",
-        startContent: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lucide_react3.Search, { className: "w-5 h-5", strokeWidth: 1.5, "aria-hidden": "true" }),
-        endContent: query ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+        startContent: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react3.Search, { className: "w-5 h-5", strokeWidth: 1.5, "aria-hidden": "true" }),
+        endContent: query ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
           "button",
           {
             type: "button",
             onClick: clear,
             className: "hover:text-foreground transition-colors",
             "aria-label": "Clear search",
-            children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_lucide_react3.X, { className: "w-4 h-4", strokeWidth: 2, "aria-hidden": "true" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_lucide_react3.X, { className: "w-4 h-4", strokeWidth: 2, "aria-hidden": "true" })
           }
         ) : void 0,
         "aria-label": "Search products",
@@ -10762,11 +10791,11 @@ function SearchBox() {
         className: "[&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden"
       }
     ),
-    showShimmer && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+    showShimmer && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
       "div",
       {
         className: "absolute inset-0 pointer-events-none rounded-input z-20 overflow-hidden",
-        children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
           "div",
           {
             className: "absolute inset-0",
@@ -10779,13 +10808,13 @@ function SearchBox() {
         )
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("style", { dangerouslySetInnerHTML: { __html: `
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("style", { dangerouslySetInnerHTML: { __html: `
           @keyframes searchShimmer {
             0% { transform: translateX(-100%); }
             100% { transform: translateX(100%); }
           }
         ` } }),
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { id: descriptionId, className: "sr-only", children: "Search results will update as you type" })
+    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { id: descriptionId, className: "sr-only", children: "Search results will update as you type" })
   ] }) });
 }
@@ -10793,7 +10822,7 @@ function SearchBox() {
 var import_react_instantsearch3 = require("react-instantsearch");
 // src/composed/search/ProductHit.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 function ProductHitComponent({
   hit: product,
   variant = "overlay"
@@ -10810,12 +10839,12 @@ function ProductHitComponent({
     }
     return "";
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     Product,
     {
       productId,
       productData: product,
-      children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
         ProductCard,
         {
           variant,
@@ -10836,10 +10865,10 @@ function ProductHitComponent({
 }
 // src/composed/search/ProductGrid.tsx
-var import_react49 = require("react");
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_react50 = require("react");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 function ProductGridSkeletonItem() {
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "aspect-square bg-muted animate-pulse" });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "aspect-square bg-muted animate-pulse" });
 }
 function ProductGrid({
   className = "",
@@ -10849,26 +10878,26 @@ function ProductGrid({
 }) {
   const { nbHits } = (0, import_react_instantsearch3.useStats)();
   const { status, results } = (0, import_react_instantsearch3.useInstantSearch)();
-  const [announcement, setAnnouncement] = (0, import_react49.useState)("");
+  const [announcement, setAnnouncement] = (0, import_react50.useState)("");
   const hitsCount = results?.hits?.length ?? 0;
   const showSkeleton = hitsCount === 0 && status !== "error";
-  (0, import_react49.useEffect)(() => {
+  (0, import_react50.useEffect)(() => {
     const timer = setTimeout(() => {
       setAnnouncement(`${nbHits} ${nbHits === 1 ? "product" : "products"} found`);
     }, 1e3);
     return () => clearTimeout(timer);
   }, [nbHits]);
-  const HitComponent = (0, import_react49.useCallback)(({ hit }) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  const HitComponent = (0, import_react50.useCallback)(({ hit }) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     ProductHitComponent,
     {
       hit,
       variant
     }
   ), [variant]);
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement }),
-    showSkeleton && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: `grid ${gridClassName}`, children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ProductGridSkeletonItem, {}, i)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: showSkeleton ? "hidden" : "", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement }),
+    showSkeleton && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: `grid ${gridClassName}`, children: Array.from({ length: skeletonCount }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ProductGridSkeletonItem, {}, i)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: showSkeleton ? "hidden" : "", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
       import_react_instantsearch3.Hits,
       {
         hitComponent: HitComponent,
@@ -10883,18 +10912,18 @@ function ProductGrid({
 }
 // src/composed/search/Filters.tsx
-var import_react51 = require("react");
+var import_react52 = require("react");
 // src/composed/search/FiltersButton.tsx
 var import_lucide_react4 = require("lucide-react");
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var SlidersHorizontalIcon = import_lucide_react4.SlidersHorizontal;
 function FiltersButton({
   onClick,
   className = "",
   children = "Filters"
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
     Button,
     {
       variant: "field",
@@ -10902,8 +10931,8 @@ function FiltersButton({
       className,
       "aria-label": "Open filters",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SlidersHorizontalIcon, { className: "w-4 h-4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { children })
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(SlidersHorizontalIcon, { className: "w-4 h-4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { children })
       ]
     }
   );
@@ -10912,15 +10941,15 @@ function FiltersButton({
 // src/composed/search/FiltersDrawer.tsx
 var import_react_instantsearch4 = require("react-instantsearch");
 var import_lucide_react5 = require("lucide-react");
-var import_react50 = require("react");
+var import_react51 = require("react");
 var Slider2 = __toESM(require("@radix-ui/react-slider"), 1);
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var XIcon2 = import_lucide_react5.X;
 function FiltersDrawer({ isOpen, onClose }) {
-  const [showCounts, setShowCounts] = (0, import_react50.useState)(false);
+  const [showCounts, setShowCounts] = (0, import_react51.useState)(false);
   const { nbHits } = (0, import_react_instantsearch4.useStats)();
   const containerRef = useFocusTrap(isOpen, onClose);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (isOpen) {
       document.body.style.overflow = "hidden";
     } else {
@@ -10930,7 +10959,7 @@ function FiltersDrawer({ isOpen, onClose }) {
       document.body.style.overflow = "";
     };
   }, [isOpen]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     const handleEscape = (e) => {
       if (e.key === "Escape" && isOpen) {
         onClose();
@@ -10939,8 +10968,8 @@ function FiltersDrawer({ isOpen, onClose }) {
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [isOpen, onClose]);
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
       "div",
       {
         className: `fixed inset-0 bg-black/50 z-40 transition-opacity ${isOpen ? "opacity-100" : "opacity-0 pointer-events-none"}`,
@@ -10948,7 +10977,7 @@ function FiltersDrawer({ isOpen, onClose }) {
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
       "div",
       {
         ref: containerRef,
@@ -10957,26 +10986,26 @@ function FiltersDrawer({ isOpen, onClose }) {
         "aria-modal": "true",
         "aria-labelledby": "filters-drawer-title",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center justify-between px-4 py-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h2", { id: "filters-drawer-title", className: "text-xl font-bold", children: "Filters" }),
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex items-center justify-between px-4 py-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("h2", { id: "filters-drawer-title", className: "text-xl font-bold", children: "Filters" }),
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
               "button",
               {
                 onClick: onClose,
                 className: "p-2 hover:bg-foreground/5 rounded-full transition-colors",
                 "aria-label": "Close filters",
-                children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(XIcon2, { className: "w-5 h-5" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(XIcon2, { className: "w-5 h-5" })
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "px-4 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("p", { className: "text-sm font-caption text-foreground/60", role: "status", "aria-live": "polite", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "px-4 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("p", { className: "text-sm font-caption text-foreground/60", role: "status", "aria-live": "polite", children: [
             nbHits.toLocaleString(),
             " ",
             nbHits === 1 ? "result" : "results"
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex-1 overflow-y-auto px-4 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex flex-col gap-8", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(TagsSection, { showCounts, setShowCounts }),
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(PriceSection, {})
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex-1 overflow-y-auto px-4 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex flex-col gap-8", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(TagsSection, { showCounts, setShowCounts }),
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(PriceSection, {})
           ] }) })
         ]
       }
@@ -10992,9 +11021,9 @@ function TagsSection({
     sortBy: ["count:desc", "name:asc"],
     limit: 100
   });
-  const [isExpanded, setIsExpanded] = (0, import_react50.useState)(true);
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "bg-foreground/5 rounded-lg p-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  const [isExpanded, setIsExpanded] = (0, import_react51.useState)(true);
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "bg-foreground/5 rounded-lg p-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
       "button",
       {
         onClick: () => setIsExpanded(!isExpanded),
@@ -11002,8 +11031,8 @@ function TagsSection({
         "aria-expanded": isExpanded,
         "aria-controls": "tags-content",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h3", { className: "text-base font-semibold text-primary", children: "Tags" }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("h3", { className: "text-base font-semibold text-primary", children: "Tags" }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             "svg",
             {
               className: `w-5 h-5 transition-transform text-foreground/40 group-hover:text-foreground/60 ${isExpanded ? "rotate-180" : ""}`,
@@ -11012,14 +11041,14 @@ function TagsSection({
               stroke: "currentColor",
               strokeWidth: 2.5,
               "aria-hidden": "true",
-              children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
             }
           )
         ]
       }
     ),
-    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "space-y-4", id: "tags-content", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "flex flex-wrap gap-2", role: "group", "aria-label": "Product tags filter", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "space-y-4", id: "tags-content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex flex-wrap gap-2", role: "group", "aria-label": "Product tags filter", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
         "button",
         {
           onClick: () => refine(item.value),
@@ -11030,15 +11059,15 @@ function TagsSection({
           "aria-label": `${item.isRefined ? "Remove" : "Apply"} ${item.label} filter${showCounts ? ` (${item.count} products)` : ""}`,
           "aria-pressed": item.isRefined,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { "aria-hidden": "true", children: item.label }),
-            showCounts && /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: `text-xs font-caption ${item.isRefined ? "opacity-80" : "opacity-60"}`, "aria-hidden": "true", children: item.count })
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { "aria-hidden": "true", children: item.label }),
+            showCounts && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: `text-xs font-caption ${item.isRefined ? "opacity-80" : "opacity-60"}`, "aria-hidden": "true", children: item.count })
           ]
         },
         item.value
       )) }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center justify-between pt-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-sm font-label text-foreground/60", id: "show-counts-label", children: "Show counts" }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex items-center justify-between pt-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-sm font-label text-foreground/60", id: "show-counts-label", children: "Show counts" }),
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           "button",
           {
             onClick: () => setShowCounts(!showCounts),
@@ -11046,7 +11075,7 @@ function TagsSection({
             role: "switch",
             "aria-checked": showCounts,
             "aria-labelledby": "show-counts-label",
-            children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
               "span",
               {
                 className: `inline-block h-4 w-4 transform rounded-full bg-background shadow-sm transition-transform ${showCounts ? "translate-x-6" : "translate-x-1"}`,
@@ -11063,11 +11092,11 @@ function PriceSection() {
   const { range, refine, start, canRefine } = (0, import_react_instantsearch4.useRange)({ attribute: "price" });
   const rangeMin = typeof range.min === "number" && isFinite(range.min) ? range.min : 0;
   const rangeMax = typeof range.max === "number" && isFinite(range.max) ? range.max : 15e3;
-  const [localRange, setLocalRange] = (0, import_react50.useState)([
+  const [localRange, setLocalRange] = (0, import_react51.useState)([
     typeof start?.[0] === "number" && isFinite(start[0]) ? start[0] : rangeMin,
     typeof start?.[1] === "number" && isFinite(start[1]) ? start[1] : rangeMax
   ]);
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     if (start && Array.isArray(start)) {
       setLocalRange([
         typeof start[0] === "number" && isFinite(start[0]) ? start[0] : rangeMin,
@@ -11077,7 +11106,7 @@ function PriceSection() {
       setLocalRange([rangeMin, rangeMax]);
     }
   }, [start, rangeMin, rangeMax]);
-  const [isExpanded, setIsExpanded] = (0, import_react50.useState)(true);
+  const [isExpanded, setIsExpanded] = (0, import_react51.useState)(true);
   if (!canRefine) {
     return null;
   }
@@ -11092,8 +11121,8 @@ function PriceSection() {
       return `$${priceInDollars.toFixed(2)}`;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "bg-foreground/5 rounded-lg p-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "bg-foreground/5 rounded-lg p-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
       "button",
       {
         onClick: () => setIsExpanded(!isExpanded),
@@ -11101,8 +11130,8 @@ function PriceSection() {
         "aria-expanded": isExpanded,
         "aria-controls": "price-content",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("h3", { className: "text-base font-semibold text-primary", children: "Price" }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("h3", { className: "text-base font-semibold text-primary", children: "Price" }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             "svg",
             {
               className: `w-5 h-5 transition-transform text-foreground/40 group-hover:text-foreground/60 ${isExpanded ? "rotate-180" : ""}`,
@@ -11111,22 +11140,22 @@ function PriceSection() {
               stroke: "currentColor",
               strokeWidth: 2.5,
               "aria-hidden": "true",
-              children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
             }
           )
         ]
       }
     ),
-    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "space-y-6", id: "price-content", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "flex items-center justify-between text-sm font-display", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { children: formatPrice2(localRange[0]) }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "text-foreground/70", children: formatPrice2(localRange[1]) })
+    isExpanded && /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "space-y-6", id: "price-content", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "flex items-center justify-between text-sm font-display", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { children: formatPrice2(localRange[0]) }),
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "text-foreground/70", children: formatPrice2(localRange[1]) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "relative h-24 flex items-end justify-between gap-0.5 px-1", "aria-hidden": "true", role: "presentation", children: [60, 40, 80, 50, 60, 30, 20, 15, 10, 5, 30, 20, 15, 10, 5, 3, 3, 60, 40].map((height, i) => {
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "relative h-24 flex items-end justify-between gap-0.5 px-1", "aria-hidden": "true", role: "presentation", children: [60, 40, 80, 50, 60, 30, 20, 15, 10, 5, 30, 20, 15, 10, 5, 3, 3, 60, 40].map((height, i) => {
         const totalBars = 19;
         const barPrice = rangeMin + (rangeMax - rangeMin) / totalBars * i;
         const isInRange = barPrice >= localRange[0] && barPrice <= localRange[1];
-        return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
           "div",
           {
             className: `flex-1 rounded-t-sm transition-opacity ${isInRange ? "bg-foreground" : "bg-foreground/20"}`,
@@ -11135,7 +11164,7 @@ function PriceSection() {
           i
         );
       }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { style: { touchAction: "none" }, className: "my-6", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { style: { touchAction: "none" }, className: "my-6", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
         Slider2.Root,
         {
           className: "relative flex w-full touch-none select-none items-center",
@@ -11153,8 +11182,8 @@ function PriceSection() {
           step: 1,
           minStepsBetweenThumbs: 1,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Slider2.Track, { className: "relative h-3 w-full grow overflow-hidden rounded-full bg-foreground/20", children: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(Slider2.Range, { className: "absolute h-full bg-foreground" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Slider2.Track, { className: "relative h-3 w-full grow overflow-hidden rounded-full bg-foreground/20", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Slider2.Range, { className: "absolute h-full bg-foreground" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
               Slider2.Thumb,
               {
                 className: "block h-6 w-6 rounded-full bg-background shadow transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50 cursor-grab active:cursor-grabbing hover:scale-105 border-2 border-primary",
@@ -11168,7 +11197,7 @@ function PriceSection() {
                 "aria-valuetext": formatPrice2(localRange[0])
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
               Slider2.Thumb,
               {
                 className: "block h-6 w-6 rounded-full bg-background shadow transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50 cursor-grab active:cursor-grabbing hover:scale-105 border-2 border-primary",
@@ -11185,10 +11214,10 @@ function PriceSection() {
           ]
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("label", { htmlFor: "price-min", className: "text-xs font-label text-foreground/60 mb-1.5 block", children: "Min" }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("label", { htmlFor: "price-min", className: "text-xs font-label text-foreground/60 mb-1.5 block", children: "Min" }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             "input",
             {
               id: "price-min",
@@ -11206,9 +11235,9 @@ function PriceSection() {
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("label", { htmlFor: "price-max", className: "text-xs font-label text-foreground/60 mb-1.5 block", children: "Max" }),
-          /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("label", { htmlFor: "price-max", className: "text-xs font-label text-foreground/60 mb-1.5 block", children: "Max" }),
+          /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
             "input",
             {
               id: "price-max",
@@ -11232,11 +11261,11 @@ function PriceSection() {
 }
 // src/composed/search/Filters.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 function Filters({ buttonClassName, buttonText }) {
-  const [isOpen, setIsOpen] = (0, import_react51.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_jsx_runtime68.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  const [isOpen, setIsOpen] = (0, import_react52.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
       FiltersButton,
       {
         onClick: () => setIsOpen(true),
@@ -11244,14 +11273,14 @@ function Filters({ buttonClassName, buttonText }) {
         children: buttonText
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(FiltersDrawer, { isOpen, onClose: () => setIsOpen(false) })
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(FiltersDrawer, { isOpen, onClose: () => setIsOpen(false) })
   ] });
 }
 // src/composed/search/CurrentRefinements.tsx
 var import_react_instantsearch5 = require("react-instantsearch");
 var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var XIcon3 = import_lucide_react6.X;
 function CurrentRefinements() {
   const { items, refine } = (0, import_react_instantsearch5.useCurrentRefinements)();
@@ -11297,15 +11326,15 @@ function CurrentRefinements() {
   if (allRefinements.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "flex flex-wrap items-center gap-2 mb-4 -mt-1", role: "group", "aria-label": "Active filters", children: allRefinements.map((refinement, index) => /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "flex flex-wrap items-center gap-2 mb-4 -mt-1", role: "group", "aria-label": "Active filters", children: allRefinements.map((refinement, index) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
     "button",
     {
       className: "bg-primary text-on-primary hover:bg-primary/90 inline-flex h-7 items-center gap-1.5 rounded-full px-3 text-sm transition-colors",
       onClick: () => refinement.refine(),
       "aria-label": `Remove filter: ${refinement.displayLabel}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "truncate", children: refinement.displayLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(XIcon3, { className: "w-3 h-3" })
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "truncate", children: refinement.displayLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(XIcon3, { className: "w-3 h-3" })
       ]
     },
     `${refinement.attribute}-${refinement.value}-${index}`
@@ -11329,12 +11358,12 @@ var FACET_SECTIONS = [
 ];
 // src/composed/zoom/ResponsiveZoom.tsx
-var import_react54 = require("react");
+var import_react55 = require("react");
 // src/composed/zoom/ZoomOverlay.tsx
-var import_react52 = require("react");
+var import_react53 = require("react");
 var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime71 = require("react/jsx-runtime");
 var PlusIcon2 = import_lucide_react7.Plus;
 var MinusIcon2 = import_lucide_react7.Minus;
 function ZoomOverlay({
@@ -11346,13 +11375,13 @@ function ZoomOverlay({
   className,
   style
 }) {
-  const [zoomedImageIndex, setZoomedImageIndex] = (0, import_react52.useState)(null);
-  const [zoomOrigin, setZoomOrigin] = (0, import_react52.useState)({ x: 50, y: 50 });
-  const [hoveredImageIndex, setHoveredImageIndex] = (0, import_react52.useState)(null);
-  const [cursorPos, setCursorPos] = (0, import_react52.useState)({ x: 0, y: 0 });
-  const [announcement, setAnnouncement] = (0, import_react52.useState)("");
-  const [isZooming, setIsZooming] = (0, import_react52.useState)(false);
-  const handleZoomClick = (0, import_react52.useCallback)(
+  const [zoomedImageIndex, setZoomedImageIndex] = (0, import_react53.useState)(null);
+  const [zoomOrigin, setZoomOrigin] = (0, import_react53.useState)({ x: 50, y: 50 });
+  const [hoveredImageIndex, setHoveredImageIndex] = (0, import_react53.useState)(null);
+  const [cursorPos, setCursorPos] = (0, import_react53.useState)({ x: 0, y: 0 });
+  const [announcement, setAnnouncement] = (0, import_react53.useState)("");
+  const [isZooming, setIsZooming] = (0, import_react53.useState)(false);
+  const handleZoomClick = (0, import_react53.useCallback)(
     (e) => {
       e.stopPropagation();
       if (isLargeTouchDevice && onEnhancedViewer) {
@@ -11377,7 +11406,7 @@ function ZoomOverlay({
     },
     [zoomedImageIndex, isLargeTouchDevice, onEnhancedViewer, imageIndex]
   );
-  const handleZoomMouseMove = (0, import_react52.useCallback)(
+  const handleZoomMouseMove = (0, import_react53.useCallback)(
     (e) => {
       setCursorPos({ x: e.clientX, y: e.clientY });
       if (zoomedImageIndex === imageIndex) {
@@ -11393,9 +11422,9 @@ function ZoomOverlay({
   const isZoomed = zoomedImageIndex === imageIndex;
   const isHovered = hoveredImageIndex === imageIndex;
   const cursorStyle = isLargeTouchDevice ? "pointer" : isTouchDevice ? "default" : "none";
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx_runtime70.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement }),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true", children: announcement }),
+    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       "div",
       {
         className,
@@ -11403,7 +11432,7 @@ function ZoomOverlay({
           ...style,
           position: "relative"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           "div",
           {
             style: {
@@ -11426,7 +11455,7 @@ function ZoomOverlay({
                 handleZoomClick(e);
               }
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
               "div",
               {
                 style: {
@@ -11442,7 +11471,7 @@ function ZoomOverlay({
         )
       }
     ),
-    isHovered && !isTouchDevice && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+    isHovered && !isTouchDevice && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
       "div",
       {
         className: "fixed pointer-events-none z-50 hidden md:block",
@@ -11452,7 +11481,7 @@ function ZoomOverlay({
           transform: "translate(-50%, -50%)"
         },
         "aria-hidden": "true",
-        children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "bg-white dark:bg-gray-800 rounded-full p-2 shadow-sm dark:shadow-gray-950/50", children: isZoomed ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "bg-white dark:bg-gray-800 rounded-full p-2 shadow-sm dark:shadow-gray-950/50", children: isZoomed ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           MinusIcon2,
           {
             size: 20,
@@ -11460,7 +11489,7 @@ function ZoomOverlay({
             strokeWidth: 1.5,
             "aria-hidden": "true"
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
           PlusIcon2,
           {
             size: 20,
@@ -11475,11 +11504,11 @@ function ZoomOverlay({
 }
 // src/composed/zoom/EnhancedImageViewer.tsx
-var import_react53 = require("react");
+var import_react54 = require("react");
 var import_react_dom3 = require("react-dom");
 var import_react_zoom_pan_pinch = require("react-zoom-pan-pinch");
 var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 var TransformWrapper = import_react_zoom_pan_pinch.TransformWrapper;
 var TransformComponent = import_react_zoom_pan_pinch.TransformComponent;
 var EnhancedImageViewer = ({
@@ -11490,17 +11519,17 @@ var EnhancedImageViewer = ({
   onIndexChange,
   currentIndex: propCurrentIndex
 }) => {
-  const [isMounted, setIsMounted] = (0, import_react53.useState)(false);
-  const [isClient, setIsClient] = (0, import_react53.useState)(false);
-  const [scale, setScale] = (0, import_react53.useState)({ initial: 1, min: 1, max: 8 });
-  const [cropDimensions, setCropDimensions] = (0, import_react53.useState)({ width: 0, height: 0 });
-  const [currentZoomScale, setCurrentZoomScale] = (0, import_react53.useState)(1);
-  const imgRef = (0, import_react53.useRef)(null);
-  const touchStartRef = (0, import_react53.useRef)(
+  const [isMounted, setIsMounted] = (0, import_react54.useState)(false);
+  const [isClient, setIsClient] = (0, import_react54.useState)(false);
+  const [scale, setScale] = (0, import_react54.useState)({ initial: 1, min: 1, max: 8 });
+  const [cropDimensions, setCropDimensions] = (0, import_react54.useState)({ width: 0, height: 0 });
+  const [currentZoomScale, setCurrentZoomScale] = (0, import_react54.useState)(1);
+  const imgRef = (0, import_react54.useRef)(null);
+  const touchStartRef = (0, import_react54.useRef)(
     null
   );
-  const isSwipingRef = (0, import_react53.useRef)(false);
-  const calculateScale = (0, import_react53.useCallback)(() => {
+  const isSwipingRef = (0, import_react54.useRef)(false);
+  const calculateScale = (0, import_react54.useCallback)(() => {
     const viewport = {
       width: window.innerWidth,
       height: window.innerHeight
@@ -11512,10 +11541,10 @@ var EnhancedImageViewer = ({
       max: 8
     });
   }, []);
-  const handleImageLoad = (0, import_react53.useCallback)(() => {
+  const handleImageLoad = (0, import_react54.useCallback)(() => {
     calculateScale();
   }, [calculateScale]);
-  (0, import_react53.useLayoutEffect)(() => {
+  (0, import_react54.useLayoutEffect)(() => {
     setIsClient(true);
     setIsMounted(true);
     document.body.style.overflow = "hidden";
@@ -11524,17 +11553,17 @@ var EnhancedImageViewer = ({
       document.body.style.overflow = "";
     };
   }, [calculateScale]);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     calculateScale();
   }, [calculateScale]);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     const handleResize = () => {
       calculateScale();
     };
     window.addEventListener("resize", handleResize);
     return () => window.removeEventListener("resize", handleResize);
   }, [calculateScale]);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         onClose();
@@ -11560,7 +11589,7 @@ var EnhancedImageViewer = ({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [onClose, imageUrl, images, onIndexChange, propCurrentIndex]);
-  const handleSwipeNavigation = (0, import_react53.useCallback)(
+  const handleSwipeNavigation = (0, import_react54.useCallback)(
     (direction) => {
       let currentIndex = propCurrentIndex !== void 0 ? propCurrentIndex : -1;
       if (currentIndex === -1) {
@@ -11581,7 +11610,7 @@ var EnhancedImageViewer = ({
     },
     [propCurrentIndex, images, imageUrl, onIndexChange]
   );
-  const handleTouchStart = (0, import_react53.useCallback)(
+  const handleTouchStart = (0, import_react54.useCallback)(
     (e) => {
       const isAtInitialZoom = Math.abs(currentZoomScale - scale.initial) < 0.1;
       if (!isAtInitialZoom) return;
@@ -11595,7 +11624,7 @@ var EnhancedImageViewer = ({
     },
     [currentZoomScale, scale.initial]
   );
-  const handleTouchEnd = (0, import_react53.useCallback)(
+  const handleTouchEnd = (0, import_react54.useCallback)(
     (e) => {
       if (!touchStartRef.current) return;
       const touch = e.changedTouches[0];
@@ -11619,12 +11648,12 @@ var EnhancedImageViewer = ({
   );
   if (!isMounted || !isClient) {
     return (0, import_react_dom3.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
         "div",
         {
           className: "fixed inset-0 bg-black flex items-center justify-center",
           style: { zIndex: 999999 },
-          children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
             "div",
             {
               style: {
@@ -11640,7 +11669,7 @@ var EnhancedImageViewer = ({
     );
   }
   return (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
       "div",
       {
         className: "fixed inset-0 bg-black flex items-center justify-center",
@@ -11649,7 +11678,7 @@ var EnhancedImageViewer = ({
         "aria-modal": "true",
         "aria-label": "Image viewer",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
             "button",
             {
               onClick: (e) => {
@@ -11675,10 +11704,10 @@ var EnhancedImageViewer = ({
                 touchAction: "manipulation",
                 marginBottom: "env(safe-area-inset-bottom, 0px)"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_lucide_react8.X, { className: "w-7 h-7", strokeWidth: 2.5 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(import_lucide_react8.X, { className: "w-7 h-7", strokeWidth: 2.5 })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
             TransformWrapper,
             {
               initialScale: scale.initial,
@@ -11712,7 +11741,7 @@ var EnhancedImageViewer = ({
               onTransformed: (ref) => {
                 setCurrentZoomScale(ref.state.scale);
               },
-              children: ({ zoomIn, zoomOut, resetTransform }) => /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+              children: ({ zoomIn, zoomOut, resetTransform }) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
                 "div",
                 {
                   style: {
@@ -11725,14 +11754,14 @@ var EnhancedImageViewer = ({
                   onTouchStart: handleTouchStart,
                   onTouchEnd: handleTouchEnd,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                       TransformComponent,
                       {
                         wrapperStyle: {
                           width: "100%",
                           height: "100%"
                         },
-                        children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                        children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                           "div",
                           {
                             style: {
@@ -11743,7 +11772,7 @@ var EnhancedImageViewer = ({
                               alignItems: "center",
                               justifyContent: "center"
                             },
-                            children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                            children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                               SafeImg,
                               {
                                 ref: imgRef,
@@ -11764,8 +11793,8 @@ var EnhancedImageViewer = ({
                         )
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "fixed bottom-5 left-0 right-0 z-50", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "flex justify-center gap-2", children: (() => {
+                    /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "fixed bottom-5 left-0 right-0 z-50", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "flex justify-center gap-2", children: (() => {
                         let currentIndex = propCurrentIndex !== void 0 ? propCurrentIndex : -1;
                         if (currentIndex === -1) {
                           currentIndex = images.findIndex(
@@ -11798,8 +11827,8 @@ var EnhancedImageViewer = ({
                         };
                         const nextIndex = findNextAvailableIndex(currentIndex, 1);
                         const prevIndex = findNextAvailableIndex(currentIndex, -1);
-                        return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                        return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                             "button",
                             {
                               onClick: () => {
@@ -11812,7 +11841,7 @@ var EnhancedImageViewer = ({
                               className: `w-10 h-10 rounded-full shadow-lg flex items-center justify-center transition-all duration-200 ${prevIndex === -1 ? "bg-white/40 text-black opacity-50 cursor-not-allowed" : "bg-white/90 hover:bg-white text-black"}`,
                               style: { touchAction: "manipulation" },
                               "aria-label": "Previous image",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                                 "svg",
                                 {
                                   className: "w-4 h-4",
@@ -11820,7 +11849,7 @@ var EnhancedImageViewer = ({
                                   stroke: "currentColor",
                                   viewBox: "0 0 24 24",
                                   "aria-hidden": "true",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                                     "path",
                                     {
                                       strokeLinecap: "round",
@@ -11833,7 +11862,7 @@ var EnhancedImageViewer = ({
                               )
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                             "button",
                             {
                               onClick: () => {
@@ -11846,7 +11875,7 @@ var EnhancedImageViewer = ({
                               className: `w-10 h-10 rounded-full shadow-lg flex items-center justify-center transition-all duration-200 ${nextIndex === -1 ? "bg-white/40 text-black opacity-50 cursor-not-allowed" : "bg-white/90 hover:bg-white text-black"}`,
                               style: { touchAction: "manipulation" },
                               "aria-label": "Next image",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                                 "svg",
                                 {
                                   className: "w-4 h-4",
@@ -11854,7 +11883,7 @@ var EnhancedImageViewer = ({
                                   stroke: "currentColor",
                                   viewBox: "0 0 24 24",
                                   "aria-hidden": "true",
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
                                     "path",
                                     {
                                       strokeLinecap: "round",
@@ -11869,7 +11898,7 @@ var EnhancedImageViewer = ({
                           )
                         ] });
                       })() }),
-                      /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { style: { position: "fixed", bottom: 20, left: 24, zIndex: 10, marginBottom: "env(safe-area-inset-bottom, 0px)" }, className: "h-10 px-3 rounded-full bg-white/90 text-black text-sm font-medium flex items-center justify-center shadow-lg", children: (() => {
+                      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { style: { position: "fixed", bottom: 20, left: 24, zIndex: 10, marginBottom: "env(safe-area-inset-bottom, 0px)" }, className: "h-10 px-3 rounded-full bg-white/90 text-black text-sm font-medium flex items-center justify-center shadow-lg", children: (() => {
                         const total = Math.max(images.length, 1);
                         const current = propCurrentIndex !== void 0 ? Math.min(propCurrentIndex + 1, total) : 1;
                         return `${current} / ${total}`;
@@ -11881,7 +11910,7 @@ var EnhancedImageViewer = ({
             },
             `${scale.initial}-${scale.min}-${scale.max}`
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
             "div",
             {
               className: "absolute inset-0 bg-black",
@@ -11900,7 +11929,7 @@ var EnhancedImageViewer = ({
 };
 // src/composed/zoom/ResponsiveZoom.tsx
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 function ResponsiveZoom({
   imageIndex,
   children,
@@ -11910,11 +11939,11 @@ function ResponsiveZoom({
   imageUrl,
   alt = "Product image"
 }) {
-  const [isTouchDevice, setIsTouchDevice] = (0, import_react54.useState)(false);
-  const [showEnhancedViewer, setShowEnhancedViewer] = (0, import_react54.useState)(false);
-  const [viewerIndex, setViewerIndex] = (0, import_react54.useState)(0);
-  const [currentImageUrl, setCurrentImageUrl] = (0, import_react54.useState)(imageUrl || "");
-  (0, import_react54.useEffect)(() => {
+  const [isTouchDevice, setIsTouchDevice] = (0, import_react55.useState)(false);
+  const [showEnhancedViewer, setShowEnhancedViewer] = (0, import_react55.useState)(false);
+  const [viewerIndex, setViewerIndex] = (0, import_react55.useState)(0);
+  const [currentImageUrl, setCurrentImageUrl] = (0, import_react55.useState)(imageUrl || "");
+  (0, import_react55.useEffect)(() => {
     const checkDeviceType = () => {
       const hasTouch = "ontouchstart" in window || navigator.maxTouchPoints > 0;
       setIsTouchDevice(hasTouch);
@@ -11941,8 +11970,8 @@ function ResponsiveZoom({
       }
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
-    isTouchDevice ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
+    isTouchDevice ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       "div",
       {
         className,
@@ -11959,7 +11988,7 @@ function ResponsiveZoom({
         },
         children
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       ZoomOverlay,
       {
         imageIndex,
@@ -11970,7 +11999,7 @@ function ResponsiveZoom({
         children
       }
     ),
-    showEnhancedViewer && isTouchDevice && currentImageUrl && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
+    showEnhancedViewer && isTouchDevice && currentImageUrl && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
       EnhancedImageViewer,
       {
         imageUrl: currentImageUrl,
@@ -11993,18 +12022,18 @@ function ResponsiveZoom({
 }
 // src/composed/carousels/MobileProductCarousel.tsx
-var import_react55 = require("react");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_react56 = require("react");
+var import_jsx_runtime74 = require("react/jsx-runtime");
 function StaticCarouselImage({
   src,
   alt,
   className
 }) {
-  const [failed, setFailed] = (0, import_react55.useState)(false);
+  const [failed, setFailed] = (0, import_react56.useState)(false);
   if (failed || !src) {
-    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: `bg-muted ${className ?? ""}`, role: "img", "aria-label": alt });
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: `bg-muted ${className ?? ""}`, role: "img", "aria-label": alt });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     "img",
     {
       src,
@@ -12018,7 +12047,7 @@ function StaticCarouselImage({
     }
   );
 }
-var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarousel2({
+var MobileProductCarousel = (0, import_react56.memo)(function MobileProductCarousel2({
   images,
   currentIndex = 0,
   onIndexChange,
@@ -12033,42 +12062,42 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
   mockupWidth,
   onMockupUrlGenerated
 }) {
-  const [activeIndex, setActiveIndex] = (0, import_react55.useState)(currentIndex);
-  const [touchStart, setTouchStart] = (0, import_react55.useState)(
+  const [activeIndex, setActiveIndex] = (0, import_react56.useState)(currentIndex);
+  const [touchStart, setTouchStart] = (0, import_react56.useState)(
     null
   );
-  const [touchEnd, setTouchEnd] = (0, import_react55.useState)(
+  const [touchEnd, setTouchEnd] = (0, import_react56.useState)(
     null
   );
-  const [showImageViewer, setShowImageViewer] = (0, import_react55.useState)(false);
-  const [viewerKey, setViewerKey] = (0, import_react55.useState)(0);
-  const [isDragging, setIsDragging] = (0, import_react55.useState)(false);
-  const [dragOffset, setDragOffset] = (0, import_react55.useState)(0);
-  const [isTransitioning, setIsTransitioning] = (0, import_react55.useState)(false);
-  const [isHorizontalSwipe, setIsHorizontalSwipe] = (0, import_react55.useState)(
+  const [showImageViewer, setShowImageViewer] = (0, import_react56.useState)(false);
+  const [viewerKey, setViewerKey] = (0, import_react56.useState)(0);
+  const [isDragging, setIsDragging] = (0, import_react56.useState)(false);
+  const [dragOffset, setDragOffset] = (0, import_react56.useState)(0);
+  const [isTransitioning, setIsTransitioning] = (0, import_react56.useState)(false);
+  const [isHorizontalSwipe, setIsHorizontalSwipe] = (0, import_react56.useState)(
     null
   );
-  const [isPeeking, setIsPeeking] = (0, import_react55.useState)(false);
-  const [isPeekReturning, setIsPeekReturning] = (0, import_react55.useState)(false);
-  const carouselRef = (0, import_react55.useRef)(null);
-  const indicatorRef = (0, import_react55.useRef)(null);
-  const touchStartRef = (0, import_react55.useRef)(
+  const [isPeeking, setIsPeeking] = (0, import_react56.useState)(false);
+  const [isPeekReturning, setIsPeekReturning] = (0, import_react56.useState)(false);
+  const carouselRef = (0, import_react56.useRef)(null);
+  const indicatorRef = (0, import_react56.useRef)(null);
+  const touchStartRef = (0, import_react56.useRef)(
     null
   );
-  const horizontalGestureRef = (0, import_react55.useRef)(false);
-  const hasShownPeekRef = (0, import_react55.useRef)(false);
-  const hasSwipedThisSessionRef = (0, import_react55.useRef)(false);
-  const generatedUrlsRef = (0, import_react55.useRef)(/* @__PURE__ */ new Map());
-  const prevArtworkSrcRef = (0, import_react55.useRef)(currentArtwork?.src);
-  (0, import_react55.useEffect)(() => {
+  const horizontalGestureRef = (0, import_react56.useRef)(false);
+  const hasShownPeekRef = (0, import_react56.useRef)(false);
+  const hasSwipedThisSessionRef = (0, import_react56.useRef)(false);
+  const generatedUrlsRef = (0, import_react56.useRef)(/* @__PURE__ */ new Map());
+  const prevArtworkSrcRef = (0, import_react56.useRef)(currentArtwork?.src);
+  (0, import_react56.useEffect)(() => {
     if (currentArtwork?.src !== prevArtworkSrcRef.current) {
       generatedUrlsRef.current.clear();
       prevArtworkSrcRef.current = currentArtwork?.src;
     }
   }, [currentArtwork?.src]);
-  const onMockupUrlGeneratedRef = (0, import_react55.useRef)(onMockupUrlGenerated);
+  const onMockupUrlGeneratedRef = (0, import_react56.useRef)(onMockupUrlGenerated);
   onMockupUrlGeneratedRef.current = onMockupUrlGenerated;
-  const handleUrlGenerated = (0, import_react55.useCallback)((mockupId, url) => {
+  const handleUrlGenerated = (0, import_react56.useCallback)((mockupId, url) => {
     generatedUrlsRef.current.set(mockupId, url);
     onMockupUrlGeneratedRef.current?.(mockupId, url);
   }, []);
@@ -12076,24 +12105,24 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
   const shouldHideDots = stickyHeroContext?.shouldHideDots ?? false;
   const priorityContext = useMockupPriorityOptional();
   const realtimeContext = useRealtimeOptional();
-  const [urlUpdateCounter, setUrlUpdateCounter] = (0, import_react55.useState)(0);
-  (0, import_react55.useEffect)(() => {
+  const [urlUpdateCounter, setUrlUpdateCounter] = (0, import_react56.useState)(0);
+  (0, import_react56.useEffect)(() => {
     if (!realtimeContext?.subscribeMockupResults) return;
     const unsubscribe = realtimeContext.subscribeMockupResults(() => {
       setUrlUpdateCounter((c) => c + 1);
     });
     return unsubscribe;
   }, [realtimeContext?.subscribeMockupResults]);
-  const mockupIds = (0, import_react55.useMemo)(() => {
+  const mockupIds = (0, import_react56.useMemo)(() => {
     return images.filter((img) => img.isRealMockup && img.mockupId).map((img) => img.mockupId);
   }, [images]);
-  const realtimeMockupUrls = (0, import_react55.useMemo)(() => {
+  const realtimeMockupUrls = (0, import_react56.useMemo)(() => {
     if (!realtimeContext?.getMockupUrls || mockupIds.length === 0) {
       return {};
     }
     return realtimeContext.getMockupUrls(mockupIds);
   }, [realtimeContext?.getMockupUrls, mockupIds, urlUpdateCounter]);
-  const imagesWithRealtimeUrls = (0, import_react55.useMemo)(() => {
+  const imagesWithRealtimeUrls = (0, import_react56.useMemo)(() => {
     return images.map((img) => {
       if (img.isRealMockup && img.mockupId && realtimeMockupUrls[img.mockupId]) {
         return {
@@ -12105,10 +12134,10 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
     });
   }, [images, realtimeMockupUrls]);
   const minSwipeDistance = 50;
-  (0, import_react55.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     setActiveIndex(currentIndex);
   }, [currentIndex]);
-  (0, import_react55.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (!priorityContext) return;
     const realMockups = images.map((img, idx) => ({ img, originalIdx: idx })).filter(({ img }) => img.isRealMockup && img.mockupId);
     const mockupIdsList = realMockups.map(({ img }) => img.mockupId);
@@ -12136,7 +12165,7 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
       priorityContext.clearMobileCarouselMode?.();
     };
   }, [priorityContext, activeIndex, images]);
-  (0, import_react55.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     const indicator = indicatorRef.current;
     if (!indicator) return;
     let ticking = false;
@@ -12177,7 +12206,7 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
   }, []);
   const SWIPE_TRACKING_KEY = "carousel-swipe-tracking";
   const PDP_VIEWS_BEFORE_PEEK = 10;
-  const getSwipeTracking = (0, import_react55.useCallback)(() => {
+  const getSwipeTracking = (0, import_react56.useCallback)(() => {
     try {
       const stored = localStorage.getItem(SWIPE_TRACKING_KEY);
       if (stored) {
@@ -12187,7 +12216,7 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
     }
     return { viewsWithoutSwipe: 0, hasEverSwiped: false };
   }, []);
-  const recordSwipe = (0, import_react55.useCallback)(() => {
+  const recordSwipe = (0, import_react56.useCallback)(() => {
     if (hasSwipedThisSessionRef.current) return;
     hasSwipedThisSessionRef.current = true;
     try {
@@ -12201,7 +12230,7 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
     } catch {
     }
   }, []);
-  (0, import_react55.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (!enablePeekAnimation || images.length <= 1) return;
     const tracking = getSwipeTracking();
     const newViewCount = tracking.viewsWithoutSwipe + 1;
@@ -12242,14 +12271,14 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
       clearTimeout(clearTimeout_);
     };
   }, [images.length, getSwipeTracking, enablePeekAnimation]);
-  const wasTapRef = (0, import_react55.useRef)(false);
-  const handleImageTap = (0, import_react55.useCallback)(() => {
+  const wasTapRef = (0, import_react56.useRef)(false);
+  const handleImageTap = (0, import_react56.useCallback)(() => {
     if (!enableZoom) return;
     setViewerKey((prev) => prev + 1);
     setShowImageViewer(true);
     onZoomChange?.(true);
   }, [enableZoom, onZoomChange]);
-  const calculateDragOffset = (0, import_react55.useCallback)(
+  const calculateDragOffset = (0, import_react56.useCallback)(
     (startX, currentX, containerWidth) => {
       const distance = startX - currentX;
       const offsetPercent = distance / containerWidth * 100;
@@ -12274,7 +12303,7 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
     },
     [activeIndex, images.length]
   );
-  const handleSwipeEnd = (0, import_react55.useCallback)(
+  const handleSwipeEnd = (0, import_react56.useCallback)(
     (startX, endX, containerWidth) => {
       const distance = startX - endX;
       const distancePercent = Math.abs(distance) / containerWidth * 100;
@@ -12305,7 +12334,7 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
     },
     [activeIndex, images.length, onIndexChange, recordSwipe]
   );
-  (0, import_react55.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     const container = carouselRef.current;
     if (!container) return;
     const handleTouchStart = (e) => {
@@ -12394,11 +12423,11 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
     handleSwipeEnd,
     handleImageTap
   ]);
-  const mouseStartRef = (0, import_react55.useRef)(
+  const mouseStartRef = (0, import_react56.useRef)(
     null
   );
-  const isMouseDraggingRef = (0, import_react55.useRef)(false);
-  (0, import_react55.useEffect)(() => {
+  const isMouseDraggingRef = (0, import_react56.useRef)(false);
+  (0, import_react56.useEffect)(() => {
     const container = carouselRef.current;
     if (!container) return;
     const handleMouseDown = (e) => {
@@ -12474,7 +12503,7 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
       container.removeEventListener("mouseleave", handleMouseLeave);
     };
   }, [calculateDragOffset, handleSwipeEnd, handleImageTap]);
-  const goToSlide = (0, import_react55.useCallback)(
+  const goToSlide = (0, import_react56.useCallback)(
     (index, withTransition = true) => {
       if (withTransition) {
         setIsTransitioning(true);
@@ -12492,16 +12521,16 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
     },
     [onIndexChange]
   );
-  (0, import_react55.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     if (stickyHeroContext?.setCarouselIndicator && images.length > 1) {
-      const indicator = /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+      const indicator = /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
         "div",
         {
           className: "w-full",
           role: "group",
           "aria-label": "Product image navigation",
-          children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "relative h-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "flex h-full", children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "relative h-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "flex h-full", children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
               "button",
               {
                 onClick: () => goToSlide(index),
@@ -12511,7 +12540,7 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
               },
               index
             )) }),
-            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
               "div",
               {
                 className: "absolute top-0 h-full bg-primary transition-all duration-300 ease-out",
@@ -12534,10 +12563,10 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
     };
   }, [activeIndex, images.length, goToSlide, stickyHeroContext]);
   if (!images || images.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "w-full aspect-video bg-muted rounded-lg" });
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "w-full aspect-video bg-muted rounded-lg" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: `relative w-full h-full ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: `relative w-full h-full ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
       "div",
       {
         ref: carouselRef,
@@ -12555,7 +12584,7 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
         role: "region",
         "aria-roledescription": "carousel",
         "aria-label": "Product images",
-        children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
           "div",
           {
             className: `flex h-full ${isPeekReturning ? "transition-transform duration-300 ease-[cubic-bezier(0,0,0.2,1)]" : isPeeking ? "transition-transform duration-500 ease-[cubic-bezier(0.4,0,0.2,1)]" : isTransitioning || !isDragging ? "transition-transform duration-300 ease-[cubic-bezier(0.25,0.46,0.45,0.94)]" : ""}`,
@@ -12565,15 +12594,15 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
             children: images.map((image, index) => {
               const DECODE_WINDOW = 1;
               const isWithinDecodeWindow = Math.abs(index - activeIndex) <= DECODE_WINDOW;
-              return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
                 "div",
                 {
                   className: "w-full h-full flex-shrink-0 relative select-none",
-                  children: !isWithinDecodeWindow ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "w-full h-full bg-muted" }) : image.isPlaceholder ? (
+                  children: !isWithinDecodeWindow ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("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__ */ (0, import_jsx_runtime73.jsx)(LoadingOverlayPrismCandyInline, { visible: true, variant: "light" })
-                  ) : image.isRealMockup && currentArtwork ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(LoadingOverlayPrismCandyInline, { visible: true, variant: "light" })
+                  ) : image.isRealMockup && currentArtwork ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
                     HeroProductImage,
                     {
                       productId,
@@ -12585,7 +12614,7 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
                       onUrlGenerated: image.mockupId ? (url) => handleUrlGenerated(image.mockupId, url) : void 0,
                       className: "w-full h-full object-cover cursor-pointer pointer-events-none"
                     }
-                  ) : image.isRealMockup && !currentArtwork ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(LoadingOverlayPrismCandyInline, { visible: true, variant: "light" }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+                  ) : image.isRealMockup && !currentArtwork ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(LoadingOverlayPrismCandyInline, { visible: true, variant: "light" }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
                     StaticCarouselImage,
                     {
                       src: image.src,
@@ -12601,7 +12630,7 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
         )
       }
     ),
-    showIndicators && images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+    showIndicators && images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
       "div",
       {
         ref: indicatorRef,
@@ -12609,8 +12638,8 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
         className: "relative z-20 w-full",
         role: "group",
         "aria-label": "Product image navigation",
-        children: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "relative h-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "flex h-full absolute inset-0", children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "relative h-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "flex h-full absolute inset-0", children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
             "button",
             {
               onClick: () => goToSlide(index),
@@ -12620,7 +12649,7 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
             },
             index
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
             "div",
             {
               className: `absolute top-0 h-full bg-foreground ${isPeekReturning ? "transition-all duration-300 ease-[cubic-bezier(0,0,0.2,1)]" : isPeeking ? "transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)]" : isDragging ? "" : "transition-all duration-300 ease-out"}`,
@@ -12655,7 +12684,7 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
           naturalHeight: img.naturalHeight
         } : null;
       }).filter((img) => img !== null);
-      return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
         EnhancedImageViewer,
         {
           imageUrl,
@@ -12694,8 +12723,8 @@ var MobileProductCarousel = (0, import_react55.memo)(function MobileProductCarou
 });
 // src/composed/carousels/HeroCarousel.tsx
-var import_react56 = require("react");
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_react57 = require("react");
+var import_jsx_runtime75 = require("react/jsx-runtime");
 function HeroCarousel({
   images,
   currentIndex = 0,
@@ -12705,16 +12734,16 @@ function HeroCarousel({
   productId,
   onImageTap
 }) {
-  const [activeIndex, setActiveIndex] = (0, import_react56.useState)(currentIndex);
-  const containerRef = (0, import_react56.useRef)(null);
-  const touchStartRef = (0, import_react56.useRef)(
+  const [activeIndex, setActiveIndex] = (0, import_react57.useState)(currentIndex);
+  const containerRef = (0, import_react57.useRef)(null);
+  const touchStartRef = (0, import_react57.useRef)(
     null
   );
-  const isSwipingRef = (0, import_react56.useRef)(false);
-  (0, import_react56.useEffect)(() => {
+  const isSwipingRef = (0, import_react57.useRef)(false);
+  (0, import_react57.useEffect)(() => {
     setActiveIndex(currentIndex);
   }, [currentIndex]);
-  const goToSlide = (0, import_react56.useCallback)(
+  const goToSlide = (0, import_react57.useCallback)(
     (index) => {
       const clampedIndex = Math.max(0, Math.min(images.length - 1, index));
       setActiveIndex(clampedIndex);
@@ -12722,7 +12751,7 @@ function HeroCarousel({
     },
     [images.length, onIndexChange]
   );
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     const container = containerRef.current;
     if (!container) return;
     const handleTouchStart = (e) => {
@@ -12774,9 +12803,9 @@ function HeroCarousel({
     };
   }, [activeIndex, images.length, goToSlide, onImageTap]);
   if (!images || images.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "w-full h-full bg-muted" });
+    return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "w-full h-full bg-muted" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -12787,7 +12816,7 @@ function HeroCarousel({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
           "div",
           {
             className: "flex h-full transition-transform duration-300 ease-out",
@@ -12798,14 +12827,14 @@ function HeroCarousel({
               backfaceVisibility: "hidden",
               WebkitBackfaceVisibility: "hidden"
             },
-            children: images.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+            children: images.map((image, index) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
               "div",
               {
                 className: "w-full h-full flex-shrink-0",
                 style: {
                   contain: "layout paint"
                 },
-                children: image.isRealMockup && currentArtwork ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                children: image.isRealMockup && currentArtwork ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                   HeroProductImage,
                   {
                     productId,
@@ -12814,7 +12843,7 @@ function HeroCarousel({
                     mockupId: image.mockupId,
                     className: "w-full h-full object-cover"
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                ) : /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                   "img",
                   {
                     src: image.src,
@@ -12831,12 +12860,12 @@ function HeroCarousel({
             ))
           }
         ),
-        images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+        images.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
           "div",
           {
             className: "absolute bottom-4 left-0 right-0 flex justify-center gap-2 z-10",
             style: { contain: "layout style" },
-            children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+            children: images.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
               "button",
               {
                 onClick: () => goToSlide(index),
@@ -12853,8 +12882,8 @@ function HeroCarousel({
 }
 // src/composed/grids/MasonryGrid.tsx
-var import_react57 = require("react");
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_react58 = require("react");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 var BREAKPOINTS = {
   sm: 640,
   md: 768,
@@ -12906,13 +12935,13 @@ function MasonryGrid({
   className = "",
   emptyContent
 }) {
-  const [columnCount, setColumnCount] = (0, import_react57.useState)(
+  const [columnCount, setColumnCount] = (0, import_react58.useState)(
     () => typeof columns === "number" ? columns : getColumnCount(
       typeof window !== "undefined" ? window.innerWidth : 1024,
       columns
     )
   );
-  (0, import_react57.useEffect)(() => {
+  (0, import_react58.useEffect)(() => {
     const updateColumnCount = () => {
       setColumnCount(getColumnCount(window.innerWidth, columns));
     };
@@ -12920,30 +12949,30 @@ function MasonryGrid({
     window.addEventListener("resize", updateColumnCount);
     return () => window.removeEventListener("resize", updateColumnCount);
   }, [columns]);
-  const distributedColumns = (0, import_react57.useMemo)(
+  const distributedColumns = (0, import_react58.useMemo)(
     () => distributeItems(items, columnCount),
     [items, columnCount]
   );
   if (items.length === 0) {
     if (emptyContent) {
-      return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(import_jsx_runtime75.Fragment, { children: emptyContent });
+      return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_jsx_runtime76.Fragment, { children: emptyContent });
     }
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     "div",
     {
       className: `flex ${className}`,
       style: { gap: `${gap}px` },
       role: "list",
-      children: distributedColumns.map((columnItems, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+      children: distributedColumns.map((columnItems, columnIndex) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
         "div",
         {
           className: "flex-1 flex flex-col",
           style: { gap: `${gap}px` },
           children: columnItems.map((item, itemIndex) => {
             const originalIndex = itemIndex * columnCount + columnIndex;
-            return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { role: "listitem", children: renderItem(item, originalIndex) }, originalIndex);
+            return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { role: "listitem", children: renderItem(item, originalIndex) }, originalIndex);
           })
         },
         columnIndex
@@ -12956,7 +12985,7 @@ function MasonryGrid({
 init_dev_warnings();
 // src/layouts/hero-zoom/HeroZoomLayout.tsx
-var import_react59 = require("react");
+var import_react60 = require("react");
 // src/layouts/hero-zoom/types.ts
 var DEFAULT_HERO_ZOOM_CONFIG = {
@@ -12968,19 +12997,19 @@ var DEFAULT_HERO_ZOOM_CONFIG = {
 };
 // src/layouts/hero-zoom/useHeroZoomScales.ts
-var import_react58 = require("react");
+var import_react59 = require("react");
 function useHeroZoomScales(config = {}) {
   const { initialScale, accountForRetina, maxRetinaMultiplier } = {
     ...DEFAULT_HERO_ZOOM_CONFIG,
     ...config
   };
-  const [isHydrated, setIsHydrated] = (0, import_react58.useState)(false);
+  const [isHydrated, setIsHydrated] = (0, import_react59.useState)(false);
   const ssrMultiplier = accountForRetina ? maxRetinaMultiplier : 2;
-  const [scales, setScales] = (0, import_react58.useState)(() => ({
+  const [scales, setScales] = (0, import_react59.useState)(() => ({
     visual: initialScale,
     render: initialScale * ssrMultiplier
   }));
-  const calculateScales = (0, import_react58.useCallback)(() => {
+  const calculateScales = (0, import_react59.useCallback)(() => {
     const visualScale = Math.max(1, Math.min(4, initialScale));
     let renderScale;
     if (accountForRetina) {
@@ -12995,7 +13024,7 @@ function useHeroZoomScales(config = {}) {
     renderScale = Math.max(1, Math.min(8, renderScale));
     return { visual: visualScale, render: renderScale };
   }, [initialScale, accountForRetina, maxRetinaMultiplier]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react59.useEffect)(() => {
     const supportsScrollTimeline = CSS.supports(
       "animation-timeline",
       "scroll()"
@@ -13045,7 +13074,7 @@ function useHeroZoomScales(config = {}) {
 }
 // src/layouts/hero-zoom/HeroZoomLayout.tsx
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 function HeroZoomLayout({
   config = {},
   header,
@@ -13060,9 +13089,9 @@ function HeroZoomLayout({
   };
   const { aspectRatio, initialScale, headerHeight } = mergedConfig;
   const { visual, render, isHydrated } = useHeroZoomScales(mergedConfig);
-  const imageContainerRef = (0, import_react59.useRef)(null);
-  const headerRef = (0, import_react59.useRef)(null);
-  (0, import_react59.useEffect)(() => {
+  const imageContainerRef = (0, import_react60.useRef)(null);
+  const headerRef = (0, import_react60.useRef)(null);
+  (0, import_react60.useEffect)(() => {
     if (typeof window === "undefined") return;
     const originalRestoration = "scrollRestoration" in history ? history.scrollRestoration : "auto";
     if ("scrollRestoration" in history) {
@@ -13075,7 +13104,7 @@ function HeroZoomLayout({
       }
     };
   }, []);
-  (0, import_react59.useEffect)(() => {
+  (0, import_react60.useEffect)(() => {
     const supportsScrollTimeline = CSS.supports(
       "animation-timeline",
       "scroll()"
@@ -13204,7 +13233,7 @@ function HeroZoomLayout({
          The drawer covers the hero completely, so let animation run continuously. */
     }
   `;
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
     "div",
     {
       className: `relative min-h-screen ${className}`,
@@ -13218,8 +13247,8 @@ function HeroZoomLayout({
         "--hero-zoom-final-transform": 1 / activeRender
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("style", { dangerouslySetInnerHTML: { __html: scopedStyles } }),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("style", { dangerouslySetInnerHTML: { __html: scopedStyles } }),
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
           "div",
           {
             style: {
@@ -13227,7 +13256,7 @@ function HeroZoomLayout({
             }
           }
         ),
-        header && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        header && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
           "div",
           {
             ref: headerRef,
@@ -13240,7 +13269,7 @@ function HeroZoomLayout({
             children: header
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
           "div",
           {
             ref: imageContainerRef,
@@ -13260,15 +13289,15 @@ function HeroZoomLayout({
             children: hero
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "relative z-10", children })
+        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "relative z-10", children })
       ]
     }
   );
 }
 // src/layouts/hero-zoom/HeroShrinkLayout.tsx
-var import_react60 = require("react");
-var import_jsx_runtime77 = require("react/jsx-runtime");
+var import_react61 = require("react");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var DEFAULT_CONFIG = {
   aspectRatio: 16 / 9,
   initialHeightPercent: 70,
@@ -13288,13 +13317,13 @@ function HeroShrinkLayout({
     ...config
   };
   const { aspectRatio, initialHeightPercent, minHeightPercent, headerHeight } = mergedConfig;
-  const heroRef = (0, import_react60.useRef)(null);
-  const headerRef = (0, import_react60.useRef)(null);
-  const [isClient, setIsClient] = (0, import_react60.useState)(false);
-  (0, import_react60.useEffect)(() => {
+  const heroRef = (0, import_react61.useRef)(null);
+  const headerRef = (0, import_react61.useRef)(null);
+  const [isClient, setIsClient] = (0, import_react61.useState)(false);
+  (0, import_react61.useEffect)(() => {
     setIsClient(true);
   }, []);
-  (0, import_react60.useEffect)(() => {
+  (0, import_react61.useEffect)(() => {
     if (!isClient) return;
     const supportsScrollTimeline = CSS.supports("animation-timeline", "scroll()");
     if (supportsScrollTimeline) return;
@@ -13381,15 +13410,15 @@ function HeroShrinkLayout({
     }
   `;
   const spacerHeight = `calc(${initialHeightPercent}svh + ${headerHeight}px)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
     "div",
     {
       className: `relative min-h-screen ${className}`,
       style: { ...style, ...cssVars },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("style", { dangerouslySetInnerHTML: { __html: scopedStyles } }),
-        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { style: { height: spacerHeight } }),
-        header && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("style", { dangerouslySetInnerHTML: { __html: scopedStyles } }),
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { style: { height: spacerHeight } }),
+        header && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           "div",
           {
             ref: headerRef,
@@ -13398,7 +13427,7 @@ function HeroShrinkLayout({
             children: header
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           "div",
           {
             ref: heroRef,
@@ -13406,15 +13435,15 @@ function HeroShrinkLayout({
             children: hero
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "relative z-10 bg-background", children })
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "relative z-10 bg-background", children })
       ]
     }
   );
 }
 // src/layouts/pdp/ImageEdgeBlur.tsx
-var import_react61 = __toESM(require("react"), 1);
-var import_jsx_runtime78 = require("react/jsx-runtime");
+var import_react62 = __toESM(require("react"), 1);
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var BLUR_CONFIG = {
   blur: 24,
   crossfade: 68
@@ -13438,7 +13467,7 @@ var BLUR_LAYERS = [
   { blur: Math.round(BLUR_CONFIG.blur * 0.5), zone: 0.6 },
   { blur: BLUR_CONFIG.blur, zone: 1 }
 ];
-var ImageEdgeBlur = import_react61.default.memo(
+var ImageEdgeBlur = import_react62.default.memo(
   function ImageEdgeBlur2({
     imageSrc,
     imageCapInfo,
@@ -13469,7 +13498,7 @@ var ImageEdgeBlur = import_react61.default.memo(
       viewportWidth / LAYOUT_CONFIG2.IMAGE.ASPECT_RATIO,
       maxWidthPx / LAYOUT_CONFIG2.IMAGE.ASPECT_RATIO
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
       "div",
       {
         className: `absolute inset-0 pointer-events-none overflow-hidden ${className}`,
@@ -13477,7 +13506,7 @@ var ImageEdgeBlur = import_react61.default.memo(
         children: BLUR_LAYERS.map((layer, index) => {
           const layerMask = index === BLUR_LAYERS.length - 1 ? void 0 : `linear-gradient(to right, black 0%, black ${layer.zone * 100}%, transparent ${layer.zone * 100 + 10}%)`;
           const blurScale = 1 + layer.blur * 3 / containerHeightPx;
-          return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
             "img",
             {
               src: imageSrc,
@@ -13524,7 +13553,7 @@ var ImageEdgeBlur = import_react61.default.memo(
 );
 // src/layouts/pdp/PDPLayout.tsx
-var import_jsx_runtime79 = require("react/jsx-runtime");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 function PDPLayout({
   renderHeroImage,
   renderContent,
@@ -13552,15 +13581,15 @@ function PDPLayout({
     isDesktop,
     isWideMonitor: isWideMonitor2
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: `pdp-layout ${className}`, children: [
-    (isDesktop === false || isDesktop === null) && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "md:hidden", children: [
-      renderMobileCarousel && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "mobile-carousel-container", children: renderMobileCarousel({ images: carouselImages }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "mobile-content p-4", children: renderContent(contentProps) })
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: `pdp-layout ${className}`, children: [
+    (isDesktop === false || isDesktop === null) && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "md:hidden", children: [
+      renderMobileCarousel && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "mobile-carousel-container", children: renderMobileCarousel({ images: carouselImages }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "mobile-content p-4", children: renderContent(contentProps) })
     ] }),
-    (isDesktop === true || isDesktop === null) && /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "hidden md:block relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "desktop-hero relative", children: [
+    (isDesktop === true || isDesktop === null) && /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "hidden md:block relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { className: "desktop-hero relative", children: [
         renderHeroImage(heroProps),
-        showEdgeBlur && blurImageSrc && isWideMonitor2 && /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+        showEdgeBlur && blurImageSrc && isWideMonitor2 && /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
           ImageEdgeBlur,
           {
             imageSrc: blurImageSrc,
@@ -13571,7 +13600,7 @@ function PDPLayout({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
         "div",
         {
           className: "desktop-sidebar",
@@ -13588,8 +13617,8 @@ function PDPLayout({
 }
 // src/layouts/pdp/SimpleImageBlur.tsx
-var import_react62 = __toESM(require("react"), 1);
-var import_jsx_runtime80 = require("react/jsx-runtime");
+var import_react63 = __toESM(require("react"), 1);
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var BLUR_CONFIG2 = {
   blur: 24,
   crossfade: 60
@@ -13612,7 +13641,7 @@ function getFadeInMask(crossfadeWidth) {
     black ${crossfadeWidth + 10}px
   )`;
 }
-var SimpleImageBlur = import_react62.default.memo(function SimpleImageBlur2({
+var SimpleImageBlur = import_react63.default.memo(function SimpleImageBlur2({
   imageSrc,
   width,
   height = "100%",
@@ -13622,7 +13651,7 @@ var SimpleImageBlur = import_react62.default.memo(function SimpleImageBlur2({
   if (!imageSrc || width <= 0) return null;
   const fadeInMask = getFadeInMask(BLUR_CONFIG2.crossfade);
   const extendedWidth = width + BLUR_CONFIG2.blur * 2;
-  return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
     "div",
     {
       className: `relative overflow-hidden ${className}`,
@@ -13635,7 +13664,7 @@ var SimpleImageBlur = import_react62.default.memo(function SimpleImageBlur2({
                 black 0%,
                 black ${layer.zone * 100}%,
                 transparent ${layer.zone * 100 + 10}%)`;
-        return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
           "img",
           {
             src: imageSrc,
@@ -13665,8 +13694,8 @@ var SimpleImageBlur = import_react62.default.memo(function SimpleImageBlur2({
 });
 // src/layouts/pdp/EdgeBlurBox.tsx
-var import_react63 = __toESM(require("react"), 1);
-var import_jsx_runtime81 = require("react/jsx-runtime");
+var import_react64 = __toESM(require("react"), 1);
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var BLUR_CONFIG3 = {
   blur: 24,
   crossfade: 60
@@ -13690,7 +13719,7 @@ function getFadeOutMask(crossfadeWidth) {
     transparent 100%
   )`;
 }
-var EdgeBlurBox = import_react63.default.memo(function EdgeBlurBox2({
+var EdgeBlurBox = import_react64.default.memo(function EdgeBlurBox2({
   imageSrc,
   width,
   height = "100%",
@@ -13705,7 +13734,7 @@ var EdgeBlurBox = import_react63.default.memo(function EdgeBlurBox2({
   const blurExtend = BLUR_CONFIG3.blur * 2;
   const actualSharpWidth = sharpImageWidth ?? width + overlapLeft;
   const hasOverlap = overlapLeft > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
     "div",
     {
       className: `relative ${className}`,
@@ -13716,7 +13745,7 @@ var EdgeBlurBox = import_react63.default.memo(function EdgeBlurBox2({
         overflow: hasOverlap ? "visible" : "hidden"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
           "div",
           {
             style: {
@@ -13730,7 +13759,7 @@ var EdgeBlurBox = import_react63.default.memo(function EdgeBlurBox2({
                   transparent ${100 - (layer.zone * 100 + 10)}%,
                   black ${100 - layer.zone * 100}%,
                   black 100%)`;
-              return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
                 "img",
                 {
                   src: imageSrc,
@@ -13758,7 +13787,7 @@ var EdgeBlurBox = import_react63.default.memo(function EdgeBlurBox2({
             })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
           "img",
           {
             src: imageSrc,
@@ -13786,8 +13815,8 @@ var EdgeBlurBox = import_react63.default.memo(function EdgeBlurBox2({
 });
 // src/layouts/pdp/ImageBlurExtension.tsx
-var import_react64 = __toESM(require("react"), 1);
-var import_jsx_runtime82 = require("react/jsx-runtime");
+var import_react65 = __toESM(require("react"), 1);
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var BLUR_CONFIG4 = {
   blur: 24,
   crossfadeWidth: 80
@@ -13810,7 +13839,7 @@ function getFadeOutMask2(crossfadeWidth) {
     transparent 100%
   )`;
 }
-var ImageBlurExtension = import_react64.default.memo(function ImageBlurExtension2({
+var ImageBlurExtension = import_react65.default.memo(function ImageBlurExtension2({
   imageSrc,
   width,
   height,
@@ -13824,7 +13853,7 @@ var ImageBlurExtension = import_react64.default.memo(function ImageBlurExtension
   const internalImageLeft = `calc(${heroImageLeft} - 100vw + ${width}px)`;
   const fadeOutMask = getFadeOutMask2(crossfadeWidth);
   const heightValue = typeof height === "number" ? `${height}px` : height;
-  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
     "div",
     {
       className: `relative overflow-hidden ${className}`,
@@ -13833,7 +13862,7 @@ var ImageBlurExtension = import_react64.default.memo(function ImageBlurExtension
         height: heightValue
       },
       children: [
-        BLUR_LAYERS4.map((layer, index) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+        BLUR_LAYERS4.map((layer, index) => /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
           "img",
           {
             src: imageSrc,
@@ -13857,7 +13886,7 @@ var ImageBlurExtension = import_react64.default.memo(function ImageBlurExtension
           },
           `blur-${index}`
         )),
-        /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
           "img",
           {
             src: imageSrc,
@@ -13885,39 +13914,39 @@ var ImageBlurExtension = import_react64.default.memo(function ImageBlurExtension
 });
 // src/design-system/ColorSwatch.tsx
-var import_jsx_runtime83 = require("react/jsx-runtime");
+var import_jsx_runtime84 = require("react/jsx-runtime");
 function ColorTokenSwatch({ name, cssVar, className = "" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: `flex flex-col gap-1 ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: `flex flex-col gap-1 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
       "div",
       {
         className: "h-16 w-full rounded-lg border border-border shadow-sm",
         style: { backgroundColor: `var(${cssVar})` }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "text-sm font-medium text-foreground", children: name }),
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("code", { className: "text-xs text-muted-foreground font-mono", children: cssVar })
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "text-sm font-medium text-foreground", children: name }),
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("code", { className: "text-xs text-muted-foreground font-mono", children: cssVar })
   ] });
 }
 function ColorRow({ name, cssVar, description }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "flex items-center gap-4 py-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex items-center gap-4 py-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
       "div",
       {
         className: "h-10 w-10 rounded-lg border border-border shadow-sm flex-shrink-0",
         style: { backgroundColor: `var(${cssVar})` }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "flex-1 min-w-0", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "text-sm font-medium text-foreground", children: name }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "text-xs text-muted-foreground", children: description })
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("div", { className: "flex-1 min-w-0", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "text-sm font-medium text-foreground", children: name }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "text-xs text-muted-foreground", children: description })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("code", { className: "text-xs text-muted-foreground font-mono bg-muted px-2 py-1 rounded", children: cssVar })
+    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("code", { className: "text-xs text-muted-foreground font-mono bg-muted px-2 py-1 rounded", children: cssVar })
   ] });
 }
 // src/design-system/ColorPalette.tsx
-var import_jsx_runtime84 = require("react/jsx-runtime");
+var import_jsx_runtime85 = require("react/jsx-runtime");
 var COLOR_GROUPS = [
   {
     name: "Base",
@@ -13998,17 +14027,17 @@ var COLOR_GROUPS = [
   }
 ];
 function ColorPalette({ layout = "list", className = "" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: `space-y-8 ${className}`, children: COLOR_GROUPS.map((group) => /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)("section", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("h3", { className: "text-lg font-semibold text-foreground mb-1", children: group.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("p", { className: "text-sm text-muted-foreground mb-4", children: group.description }),
-    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4", children: group.colors.map((color) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: `space-y-8 ${className}`, children: COLOR_GROUPS.map((group) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("section", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("h3", { className: "text-lg font-semibold text-foreground mb-1", children: group.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("p", { className: "text-sm text-muted-foreground mb-4", children: group.description }),
+    layout === "grid" ? /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4", children: group.colors.map((color) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
       ColorTokenSwatch,
       {
         name: color.name,
         cssVar: color.cssVar
       },
       color.cssVar
-    )) }) : /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("div", { className: "bg-card rounded-lg border border-border p-4 divide-y divide-border", children: group.colors.map((color) => /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
+    )) }) : /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "bg-card rounded-lg border border-border p-4 divide-y divide-border", children: group.colors.map((color) => /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
       ColorRow,
       {
         name: color.name,
@@ -14021,7 +14050,7 @@ function ColorPalette({ layout = "list", className = "" }) {
 }
 // src/design-system/TypographyScale.tsx
-var import_jsx_runtime85 = require("react/jsx-runtime");
+var import_jsx_runtime86 = require("react/jsx-runtime");
 var FONT_SAMPLES = [
   {
     name: "Heading",
@@ -14055,14 +14084,14 @@ var FONT_SAMPLES = [
   }
 ];
 function TypographyScale({ className = "" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: `space-y-8 ${className}`, children: FONT_SAMPLES.map((font) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("section", { className: "bg-card rounded-lg border border-border p-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: font.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("code", { className: "text-xs text-muted-foreground font-mono bg-muted px-2 py-1 rounded", children: font.cssVar })
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: `space-y-8 ${className}`, children: FONT_SAMPLES.map((font) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("section", { className: "bg-card rounded-lg border border-border p-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: font.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("code", { className: "text-xs text-muted-foreground font-mono bg-muted px-2 py-1 rounded", children: font.cssVar })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "space-y-4", children: font.sizes.map((size) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex items-baseline gap-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "text-xs text-muted-foreground w-20 flex-shrink-0", children: size }),
-      /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "space-y-4", children: font.sizes.map((size) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex items-baseline gap-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "text-xs text-muted-foreground w-20 flex-shrink-0", children: size }),
+      /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
         "p",
         {
           className: `${size} text-foreground`,
@@ -14081,8 +14110,8 @@ var RADIUS_SAMPLES = [
   { name: "Full", value: "9999px" }
 ];
 function RadiusScale({ className = "" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: `space-y-4 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("div", { className: "grid grid-cols-5 gap-4", children: RADIUS_SAMPLES.map((radius) => /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: `space-y-4 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "grid grid-cols-5 gap-4", children: RADIUS_SAMPLES.map((radius) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
       "div",
       {
         className: "h-16 w-16 bg-primary",
@@ -14091,13 +14120,13 @@ function RadiusScale({ className = "" }) {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "text-sm font-medium text-foreground", children: radius.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("code", { className: "text-xs text-muted-foreground font-mono", children: radius.cssVar || radius.value })
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "text-sm font-medium text-foreground", children: radius.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("code", { className: "text-xs text-muted-foreground font-mono", children: radius.cssVar || radius.value })
   ] }, radius.name)) }) });
 }
 // src/design-system/ThemeSwitcher.tsx
-var import_react65 = require("react");
+var import_react66 = require("react");
 // src/themes/types.ts
 var RADIUS_PRESETS = {
@@ -15265,7 +15294,7 @@ function applyTheme(config) {
 }
 // src/design-system/ThemeSwitcher.tsx
-var import_jsx_runtime86 = require("react/jsx-runtime");
+var import_jsx_runtime87 = require("react/jsx-runtime");
 function readThemeFromDOM() {
   if (typeof document === "undefined") {
     return { themeName: "Linear", isDark: false };
@@ -15283,10 +15312,10 @@ function readThemeFromDOM() {
   return { themeName: "Linear", isDark: dark };
 }
 function ThemeSwitcher({ className = "", showBaseThemesOnly = true }) {
-  const [currentTheme, setCurrentTheme] = (0, import_react65.useState)("Linear");
-  const [isDark, setIsDark] = (0, import_react65.useState)(false);
-  const [isOpen, setIsOpen] = (0, import_react65.useState)(false);
-  (0, import_react65.useEffect)(() => {
+  const [currentTheme, setCurrentTheme] = (0, import_react66.useState)("Linear");
+  const [isDark, setIsDark] = (0, import_react66.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react66.useState)(false);
+  (0, import_react66.useEffect)(() => {
     const { themeName, isDark: dark } = readThemeFromDOM();
     setCurrentTheme(themeName);
     setIsDark(dark);
@@ -15325,61 +15354,61 @@ function ThemeSwitcher({ className = "", showBaseThemesOnly = true }) {
     applyTheme(config);
   };
   const themes = showBaseThemesOnly ? baseThemes : baseThemes;
-  return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: `flex items-center gap-3 ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "relative", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: `flex items-center gap-3 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "relative", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
         "button",
         {
           onClick: () => setIsOpen(!isOpen),
           className: "flex items-center gap-2 px-4 py-2 bg-card border border-border rounded-lg hover:bg-muted transition-colors text-foreground",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "font-medium", children: currentTheme }),
-            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("svg", { className: `w-4 h-4 transition-transform ${isOpen ? "rotate-180" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "font-medium", children: currentTheme }),
+            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("svg", { className: `w-4 h-4 transition-transform ${isOpen ? "rotate-180" : ""}`, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })
           ]
         }
       ),
-      isOpen && /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+      isOpen && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(import_jsx_runtime87.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
           "div",
           {
             className: "fixed inset-0 z-40",
             onClick: () => setIsOpen(false)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("div", { className: "absolute top-full left-0 mt-2 w-56 max-h-80 overflow-auto bg-card border border-border rounded-lg shadow-lg z-50", children: themes.map((theme) => /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "absolute top-full left-0 mt-2 w-56 max-h-80 overflow-auto bg-card border border-border rounded-lg shadow-lg z-50", children: themes.map((theme) => /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
           "button",
           {
             onClick: () => handleThemeSelect(theme.name),
             className: `w-full px-4 py-2 text-left hover:bg-muted transition-colors flex items-center gap-3 ${currentTheme === theme.name ? "bg-muted" : ""}`,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
                 "div",
                 {
                   className: "w-4 h-4 rounded-full border border-border",
                   style: { backgroundColor: theme.primaryColor || "#888" }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "text-foreground", children: theme.name }),
-              currentTheme === theme.name && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("svg", { className: "w-4 h-4 ml-auto text-primary", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })
+              /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "text-foreground", children: theme.name }),
+              currentTheme === theme.name && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("svg", { className: "w-4 h-4 ml-auto text-primary", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 13l4 4L19 7" }) })
             ]
           },
           theme.name
         )) })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)(
       "button",
       {
         onClick: handleDarkModeToggle,
         className: "flex items-center gap-2 px-4 py-2 bg-card border border-border rounded-lg hover:bg-muted transition-colors text-foreground",
         title: `Switch to ${isDark ? "light" : "dark"} mode`,
         children: [
-          isDark ? /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("circle", { cx: "12", cy: "12", r: "5" }),
-            /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "text-sm", children: isDark ? "Light" : "Dark" })
+          isDark ? /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("circle", { cx: "12", cy: "12", r: "5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "text-sm", children: isDark ? "Light" : "Dark" })
         ]
       }
     )
@@ -15387,7 +15416,7 @@ function ThemeSwitcher({ className = "", showBaseThemesOnly = true }) {
 }
 // src/design-system/DesignSystemPage.tsx
-var import_jsx_runtime87 = require("react/jsx-runtime");
+var import_jsx_runtime88 = require("react/jsx-runtime");
 function DesignSystemPage({
   showThemeSwitcher = true,
   showColors = true,
@@ -15397,29 +15426,29 @@ function DesignSystemPage({
   colorLayout = "list",
   className = ""
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: `max-w-4xl mx-auto px-4 py-8 ${className}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("header", { className: "mb-12", children: /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("h1", { className: "text-4xl font-bold text-foreground mb-2", children: "Design System" }),
-        /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("p", { className: "text-lg text-muted-foreground", children: "Visual reference for theme tokens and styles" })
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: `max-w-4xl mx-auto px-4 py-8 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("header", { className: "mb-12", children: /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("h1", { className: "text-4xl font-bold text-foreground mb-2", children: "Design System" }),
+        /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("p", { className: "text-lg text-muted-foreground", children: "Visual reference for theme tokens and styles" })
       ] }),
-      showThemeSwitcher && /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ThemeSwitcher, {})
+      showThemeSwitcher && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(ThemeSwitcher, {})
     ] }) }),
-    showColors && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("section", { className: "mb-16", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Color Palette" }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(ColorPalette, { layout: colorLayout })
+    showColors && /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("section", { className: "mb-16", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Color Palette" }),
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(ColorPalette, { layout: colorLayout })
     ] }),
-    showTypography && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("section", { className: "mb-16", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Typography" }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(TypographyScale, {})
+    showTypography && /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("section", { className: "mb-16", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Typography" }),
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(TypographyScale, {})
     ] }),
-    showRadius && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("section", { className: "mb-16", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Border Radius" }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(RadiusScale, {})
+    showRadius && /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("section", { className: "mb-16", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Border Radius" }),
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(RadiusScale, {})
     ] }),
-    showSpacing && /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("section", { className: "mb-16", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Spacing Scale" }),
-      /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(SpacingScale, {})
+    showSpacing && /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("section", { className: "mb-16", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("h2", { className: "text-2xl font-semibold text-foreground mb-6 pb-2 border-b border-border", children: "Spacing Scale" }),
+      /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(SpacingScale, {})
     ] })
   ] });
 }
@@ -15434,31 +15463,31 @@ function SpacingScale() {
     { name: "12", value: "3rem" },
     { name: "16", value: "4rem" }
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: "space-y-2", children: spaces.map((space) => /* @__PURE__ */ (0, import_jsx_runtime87.jsxs)("div", { className: "flex items-center gap-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("code", { className: "text-xs text-muted-foreground font-mono w-8", children: space.name }),
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("div", { className: "space-y-2", children: spaces.map((space) => /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)("div", { className: "flex items-center gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("code", { className: "text-xs text-muted-foreground font-mono w-8", children: space.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
       "div",
       {
         className: "h-4 bg-primary rounded",
         style: { width: space.value }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("span", { className: "text-sm text-muted-foreground", children: space.value })
+    /* @__PURE__ */ (0, import_jsx_runtime88.jsx)("span", { className: "text-sm text-muted-foreground", children: space.value })
   ] }, space.name)) });
 }
 // src/personalization/PersonalizationProvider.tsx
-var import_react68 = __toESM(require("react"), 1);
+var import_react69 = __toESM(require("react"), 1);
 // src/personalization/PersonalizationContext.ts
-var import_react66 = require("react");
-var PersonalizationContext = (0, import_react66.createContext)(null);
+var import_react67 = require("react");
+var PersonalizationContext = (0, import_react67.createContext)(null);
 function usePersonalizationContext() {
-  return (0, import_react66.useContext)(PersonalizationContext);
+  return (0, import_react67.useContext)(PersonalizationContext);
 }
 // src/personalization/utils.ts
-var import_react67 = require("react");
+var import_react68 = require("react");
 function normalizeHex(color) {
   let hex = color.trim().toUpperCase();
   if (hex.length === 4 && hex.startsWith("#")) {
@@ -15479,8 +15508,8 @@ function isValidImageUrl(url) {
   }
 }
 function useDebouncedValue(value, delay) {
-  const [debounced, setDebounced] = (0, import_react67.useState)(value);
-  (0, import_react67.useEffect)(() => {
+  const [debounced, setDebounced] = (0, import_react68.useState)(value);
+  (0, import_react68.useEffect)(() => {
     const timer = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(timer);
   }, [value, delay]);
@@ -15501,18 +15530,18 @@ function scrollInputAboveKeyboard(input) {
 }
 // src/personalization/PersonalizationProvider.tsx
-var import_jsx_runtime88 = require("react/jsx-runtime");
+var import_jsx_runtime89 = require("react/jsx-runtime");
 function createBridgeFromCanvas(canvasModule) {
   const { useEditor, useCommands, useImageBinding } = canvasModule;
   function TextBinder({ name, value }) {
     const { elements } = useEditor();
     const { executeElementUpdate } = useCommands();
-    const elementsRef = import_react68.default.useRef(elements);
+    const elementsRef = import_react69.default.useRef(elements);
     elementsRef.current = elements;
-    const executeRef = import_react68.default.useRef(executeElementUpdate);
+    const executeRef = import_react69.default.useRef(executeElementUpdate);
     executeRef.current = executeElementUpdate;
-    const hasUserInput = import_react68.default.useRef(false);
-    import_react68.default.useEffect(() => {
+    const hasUserInput = import_react69.default.useRef(false);
+    import_react69.default.useEffect(() => {
       if (value == null) return;
       if (value === "" && !hasUserInput.current) return;
       hasUserInput.current = true;
@@ -15530,12 +15559,12 @@ function createBridgeFromCanvas(canvasModule) {
   function ColorBinder({ originalColor, newColor }) {
     const { elements } = useEditor();
     const { executeElementUpdate } = useCommands();
-    const elementsRef = import_react68.default.useRef(elements);
+    const elementsRef = import_react69.default.useRef(elements);
     elementsRef.current = elements;
-    const executeRef = import_react68.default.useRef(executeElementUpdate);
+    const executeRef = import_react69.default.useRef(executeElementUpdate);
     executeRef.current = executeElementUpdate;
-    const appliedColorRef = import_react68.default.useRef(normalizeHex(originalColor));
-    import_react68.default.useEffect(() => {
+    const appliedColorRef = import_react69.default.useRef(normalizeHex(originalColor));
+    import_react69.default.useEffect(() => {
       const normalizedNew = normalizeHex(newColor);
       if (normalizedNew === appliedColorRef.current) return;
       const matchColor = appliedColorRef.current;
@@ -15575,11 +15604,11 @@ function createBridgeFromCanvas(canvasModule) {
   }
   function ImageBinder({ name, value, fit = "cover" }) {
     const { setImageUrl } = useImageBinding(name, { fit });
-    const hasUserInput = import_react68.default.useRef(false);
+    const hasUserInput = import_react69.default.useRef(false);
     const debouncedValue = useDebouncedValue(value, 500);
-    const setImageUrlRef = import_react68.default.useRef(setImageUrl);
+    const setImageUrlRef = import_react69.default.useRef(setImageUrl);
     setImageUrlRef.current = setImageUrl;
-    import_react68.default.useEffect(() => {
+    import_react69.default.useEffect(() => {
       if (debouncedValue == null) return;
       if (debouncedValue === "" && !hasUserInput.current) return;
       hasUserInput.current = true;
@@ -15589,15 +15618,15 @@ function createBridgeFromCanvas(canvasModule) {
     return null;
   }
   return function PersonalizationBridge({ fields = [], values = {} } = {}) {
-    return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_jsx_runtime88.Fragment, { children: fields.map((field) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(import_jsx_runtime89.Fragment, { children: fields.map((field) => {
       if (field.type === "text") {
-        return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(TextBinder, { name: field.name, value: values[field.name] ?? "" }, `text-${field.name}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(TextBinder, { name: field.name, value: values[field.name] ?? "" }, `text-${field.name}`);
       }
       if (field.type === "color") {
-        return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(ColorBinder, { originalColor: field.color, newColor: values[field.color] ?? field.color }, `color-${field.color}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ColorBinder, { originalColor: field.color, newColor: values[field.color] ?? field.color }, `color-${field.color}`);
       }
       if (field.type === "image") {
-        return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(ImageBinder, { name: field.name, value: values[field.name] ?? "", fit: field.fit ?? "cover" }, `image-${field.name}`);
+        return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(ImageBinder, { name: field.name, value: values[field.name] ?? "", fit: field.fit ?? "cover" }, `image-${field.name}`);
       }
       return null;
     }) });
@@ -15619,19 +15648,19 @@ function PersonalizationProvider({
   children
 }) {
   const realtime = useRealtimeOptional();
-  const [personValues, setPersonValues] = (0, import_react68.useState)(initialValues ?? {});
-  const [isActive, setIsActive] = (0, import_react68.useState)(!!(initialValues && Object.keys(initialValues).length > 0));
-  const [isExporting, setIsExporting] = (0, import_react68.useState)(false);
-  const [exportedBlobUrls, setExportedBlobUrls] = (0, import_react68.useState)({});
-  const [exportCount, setExportCount] = (0, import_react68.useState)(0);
-  const blobUrlsRef = (0, import_react68.useRef)({});
-  const [CanvasComponent, setCanvasComponent] = (0, import_react68.useState)(
+  const [personValues, setPersonValues] = (0, import_react69.useState)(initialValues ?? {});
+  const [isActive, setIsActive] = (0, import_react69.useState)(!!(initialValues && Object.keys(initialValues).length > 0));
+  const [isExporting, setIsExporting] = (0, import_react69.useState)(false);
+  const [exportedBlobUrls, setExportedBlobUrls] = (0, import_react69.useState)({});
+  const [exportCount, setExportCount] = (0, import_react69.useState)(0);
+  const blobUrlsRef = (0, import_react69.useRef)({});
+  const [CanvasComponent, setCanvasComponent] = (0, import_react69.useState)(
     cachedCanvasComponent
   );
-  const [BridgeComponent, setBridgeComponent] = (0, import_react68.useState)(
+  const [BridgeComponent, setBridgeComponent] = (0, import_react69.useState)(
     cachedBridgeComponent
   );
-  (0, import_react68.useEffect)(() => {
+  (0, import_react69.useEffect)(() => {
     if (CanvasComponent && BridgeComponent) return;
     if (!canvasImport) return;
     if (!canvasLoadPromise) {
@@ -15649,8 +15678,8 @@ function PersonalizationProvider({
       }
     });
   }, [CanvasComponent, BridgeComponent, canvasImport]);
-  const realtimeEnabledRef = (0, import_react68.useRef)(false);
-  (0, import_react68.useEffect)(() => {
+  const realtimeEnabledRef = (0, import_react69.useRef)(false);
+  (0, import_react69.useEffect)(() => {
     return () => {
       for (const url of Object.values(blobUrlsRef.current)) {
         try {
@@ -15660,16 +15689,16 @@ function PersonalizationProvider({
       }
     };
   }, []);
-  const updateField = (0, import_react68.useCallback)((key, value) => {
+  const updateField = (0, import_react69.useCallback)((key, value) => {
     setIsActive(true);
     setPersonValues((prev) => ({ ...prev, [key]: value }));
   }, []);
-  const reset = (0, import_react68.useCallback)(() => {
+  const reset = (0, import_react69.useCallback)(() => {
     setPersonValues({});
     setIsActive(false);
     setIsExporting(false);
   }, []);
-  const handleExport = (0, import_react68.useCallback)(
+  const handleExport = (0, import_react69.useCallback)(
     (exports2) => {
       const newUrls = {};
       for (const [name, data] of Object.entries(exports2)) {
@@ -15703,11 +15732,11 @@ function PersonalizationProvider({
     },
     [realtime, placementOverride]
   );
-  const handleExportScheduled = (0, import_react68.useCallback)(() => {
+  const handleExportScheduled = (0, import_react69.useCallback)(() => {
     setIsExporting(true);
   }, []);
   const shouldMountCanvas = CanvasComponent && BridgeComponent && canvasState?.elements && canvasState.elements.length > 0 && (!lazy || isActive);
-  const contextValue = import_react68.default.useMemo(
+  const contextValue = import_react69.default.useMemo(
     () => ({
       fields,
       personValues,
@@ -15720,8 +15749,8 @@ function PersonalizationProvider({
     }),
     [fields, personValues, updateField, isActive, isExporting, exportedBlobUrls, exportCount, reset]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime88.jsxs)(PersonalizationContext.Provider, { value: contextValue, children: [
-    shouldMountCanvas && CanvasComponent && BridgeComponent && /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(PersonalizationContext.Provider, { value: contextValue, children: [
+    shouldMountCanvas && CanvasComponent && BridgeComponent && /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
       "div",
       {
         style: {
@@ -15734,7 +15763,7 @@ function PersonalizationProvider({
           pointerEvents: "none"
         },
         "aria-hidden": true,
-        children: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
           CanvasComponent,
           {
             initialElements: canvasState?.elements,
@@ -15754,7 +15783,7 @@ function PersonalizationProvider({
             exportImageQuality: exportConfig?.imageQuality ?? 0.85,
             onExport: handleExport,
             onExportScheduled: handleExportScheduled,
-            overlay: /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(BridgeComponent, { fields, values: personValues })
+            overlay: /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(BridgeComponent, { fields, values: personValues })
           }
         )
       },
@@ -15779,7 +15808,7 @@ function usePersonalizationOptional() {
 }
 // src/personalization/PersonalizationInputs.tsx
-var import_jsx_runtime89 = require("react/jsx-runtime");
+var import_jsx_runtime90 = require("react/jsx-runtime");
 function PersonalizationInputs({
   className,
   inputClassName = "w-full px-4 py-3 rounded-lg border text-base text-foreground placeholder:text-muted-foreground bg-white/50 outline-none focus:ring-2 focus:ring-foreground/20",
@@ -15803,8 +15832,8 @@ function PersonalizationInputs({
       scrollInputAboveKeyboard(e.target);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: className || "flex flex-col gap-3", children: [
-    textFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: className || "flex flex-col gap-3", children: [
+    textFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
       "input",
       {
         type: "text",
@@ -15818,8 +15847,8 @@ function PersonalizationInputs({
       },
       `text-${field.name}`
     )),
-    colorFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+    colorFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         "input",
         {
           type: "color",
@@ -15828,9 +15857,9 @@ function PersonalizationInputs({
           onChange: (e) => updateField(field.color, e.target.value)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime89.jsx)("span", { className: "text-base text-muted-foreground", children: field.label })
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("span", { className: "text-base text-muted-foreground", children: field.label })
     ] }, `color-${field.color}`)),
-    imageFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime89.jsx)(
+    imageFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
       "input",
       {
         type: "text",
@@ -15848,15 +15877,15 @@ function PersonalizationInputs({
 }
 // src/personalization/usePersonalizationShimmer.ts
-var import_react69 = require("react");
+var import_react70 = require("react");
 function usePersonalizationShimmer(containerRef, safetyTimeoutMs = 1e4) {
   const personCtx = usePersonalizationContext();
   const realtime = useRealtimeOptional();
-  const [shimmerActive, setShimmerActive] = (0, import_react69.useState)(false);
-  const sdkSettledRef = (0, import_react69.useRef)(false);
-  const manualTriggerRef = (0, import_react69.useRef)(false);
-  const safetyTimeoutRef = (0, import_react69.useRef)(void 0);
-  const startShimmer = (0, import_react69.useCallback)(() => {
+  const [shimmerActive, setShimmerActive] = (0, import_react70.useState)(false);
+  const sdkSettledRef = (0, import_react70.useRef)(false);
+  const manualTriggerRef = (0, import_react70.useRef)(false);
+  const safetyTimeoutRef = (0, import_react70.useRef)(void 0);
+  const startShimmer = (0, import_react70.useCallback)(() => {
     setShimmerActive(true);
     if (safetyTimeoutRef.current) clearTimeout(safetyTimeoutRef.current);
     safetyTimeoutRef.current = setTimeout(
@@ -15868,25 +15897,25 @@ function usePersonalizationShimmer(containerRef, safetyTimeoutMs = 1e4) {
       safetyTimeoutMs
     );
   }, [safetyTimeoutMs]);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     if (!personCtx?.isActive) return;
     sdkSettledRef.current = false;
     manualTriggerRef.current = false;
     realtime?.resetPipelineSettled();
     startShimmer();
   }, [personCtx?.personValues, personCtx?.isActive, startShimmer]);
-  const triggerShimmer = (0, import_react69.useCallback)(() => {
+  const triggerShimmer = (0, import_react70.useCallback)(() => {
     sdkSettledRef.current = false;
     manualTriggerRef.current = true;
     startShimmer();
   }, [startShimmer]);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     if (!realtime?.subscribePipelineSettled) return;
     return realtime.subscribePipelineSettled(() => {
       sdkSettledRef.current = true;
     });
   }, [realtime]);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     const container = containerRef.current;
     if (!container) return;
     const observer = new MutationObserver((mutations) => {
@@ -15929,7 +15958,7 @@ function usePersonalizationShimmer(containerRef, safetyTimeoutMs = 1e4) {
     });
     return () => observer.disconnect();
   }, [containerRef]);
-  (0, import_react69.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     return () => {
       if (safetyTimeoutRef.current) clearTimeout(safetyTimeoutRef.current);
     };
@@ -16039,6 +16068,7 @@ function usePersonalizationShimmer(containerRef, safetyTimeoutMs = 1e4) {
   LoadingOverlayPrismCandyInline,
   MasonryGrid,
   MobileProductCarousel,
+  MockupBackground,
   MockupPriorityProvider,
   PDPLayout,
   PersonalizationInputs,
@@ -16164,6 +16194,7 @@ function usePersonalizationShimmer(containerRef, safetyTimeoutMs = 1e4) {
   useIsolatedCanvas,
   useLoadingOverlay,
   useMediaQuery,
+  useMockupBackgroundOptional,
   useMockupPriority,
   useMockupPriorityOptional,
   usePersonalization,