@snowcone-app/ui 0.4.7 → 0.4.9

package/dist/index.cjs

@@ -5911,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({
@@ -5934,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" },
@@ -5947,15 +5961,19 @@ 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 spreadCropsRef = (0, import_react25.useRef)(void 0);
+  const [spreadCropsVersion, setSpreadCropsVersion] = (0, import_react25.useState)(0);
+  const lastSentSpreadCropsRef = (0, import_react25.useRef)("null");
+  const lastSentColorsRef = (0, import_react25.useRef)({});
+  const realtimeMockup = (0, import_react26.useRealtimeMockup)({
     wsUrl,
     getToken: useSessionGrant ? getToken : void 0,
     onConnected: (sessionId) => {
@@ -5986,7 +6004,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 () => {
     };
   }, []);
@@ -6006,31 +6024,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 = [];
@@ -6082,7 +6100,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(
@@ -6101,7 +6119,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(
@@ -6120,7 +6138,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) {
@@ -6132,23 +6150,25 @@ 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;
+        lastSentSpreadCropsRef.current = "null";
         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;
@@ -6160,7 +6180,10 @@ function RealtimeProvider({
     );
     const isFirstSend = !configSentRef.current;
     const variantChanged = lastSentVariantIdRef.current !== null && lastSentVariantIdRef.current !== variantId;
-    if (!isFirstSend && !variantChanged) {
+    const bgChanged = configSentRef.current && lastSentBgRef.current !== mockupBg;
+    const spreadCropsJson = JSON.stringify(spreadCropsRef.current ?? null);
+    const spreadCropsChanged = configSentRef.current && lastSentSpreadCropsRef.current !== spreadCropsJson;
+    if (!isFirstSend && !variantChanged && !bgChanged && !spreadCropsChanged) {
       return;
     }
     const mockupIds = [];
@@ -6177,6 +6200,8 @@ function RealtimeProvider({
       variantId,
       shop,
       width: mockupWidth,
+      ...mockupBg ? { bg: mockupBg } : {},
+      ...spreadCropsRef.current ? { spreadCrops: spreadCropsRef.current } : {},
       placementSettings: { ...placementSettingsOverridesRef.current }
     } : {
       productId,
@@ -6185,6 +6210,8 @@ function RealtimeProvider({
       shop: "hTidnpNnNa",
       seal: "bypass-sig-for-k6-load-test",
       width: mockupWidth,
+      ...mockupBg ? { bg: mockupBg } : {},
+      ...spreadCropsRef.current ? { spreadCrops: spreadCropsRef.current } : {},
       placementSettings: { ...placementSettingsOverridesRef.current }
     };
     if (variantChanged) {
@@ -6196,6 +6223,8 @@ function RealtimeProvider({
     sendConfigRaw(configPayload);
     configSentRef.current = true;
     lastSentVariantIdRef.current = variantId;
+    lastSentBgRef.current = mockupBg;
+    lastSentSpreadCropsRef.current = spreadCropsJson;
     setTimeout(() => {
       const colorPlacements = placements.filter((p) => p.type === "color");
       colorPlacements.forEach((p) => {
@@ -6213,9 +6242,11 @@ function RealtimeProvider({
     productContext?.selection,
     sendConfigRaw,
     sendColorBlobTracked,
-    mockupWidth
+    mockupWidth,
+    mockupBg,
+    spreadCropsVersion
   ]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (!isEnabled || !isConnected || !isConfigured || !productContext?.product)
       return;
     const placements = productContext.product.placements || [];
@@ -6240,20 +6271,31 @@ 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 setSpreadCrops = (0, import_react25.useCallback)(
+    (crops) => {
+      const next = crops && Object.keys(crops).length > 0 ? crops : void 0;
+      if (JSON.stringify(next ?? null) === JSON.stringify(spreadCropsRef.current ?? null)) {
+        return;
+      }
+      spreadCropsRef.current = next;
+      setSpreadCropsVersion((v) => v + 1);
+    },
+    []
+  );
+  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,
@@ -6262,14 +6304,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 () => {
@@ -6278,7 +6320,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());
@@ -6305,7 +6347,7 @@ function RealtimeProvider({
     },
     []
   );
-  const subscribePendingBlob = (0, import_react24.useCallback)(
+  const subscribePendingBlob = (0, import_react25.useCallback)(
     (callback) => {
       pendingBlobSubscribersRef.current.add(callback);
       return () => {
@@ -6314,7 +6356,7 @@ function RealtimeProvider({
     },
     []
   );
-  const subscribePendingExportCancelled = (0, import_react24.useCallback)(
+  const subscribePendingExportCancelled = (0, import_react25.useCallback)(
     (callback) => {
       pendingExportCancelledSubscribersRef.current.add(callback);
       return () => {
@@ -6323,7 +6365,7 @@ function RealtimeProvider({
     },
     []
   );
-  const subscribeBlobReceived = (0, import_react24.useCallback)(
+  const subscribeBlobReceived = (0, import_react25.useCallback)(
     (callback) => {
       blobReceivedSubscribersRef.current.add(callback);
       return () => {
@@ -6332,7 +6374,7 @@ function RealtimeProvider({
     },
     []
   );
-  const subscribeBlobSent = (0, import_react24.useCallback)(
+  const subscribeBlobSent = (0, import_react25.useCallback)(
     (callback) => {
       blobSentSubscribersRef.current.add(callback);
       return () => {
@@ -6341,7 +6383,7 @@ function RealtimeProvider({
     },
     []
   );
-  const subscribePipelineSettled = (0, import_react24.useCallback)(
+  const subscribePipelineSettled = (0, import_react25.useCallback)(
     (callback) => {
       pipelineSettledSubscribersRef.current.add(callback);
       return () => {
@@ -6350,7 +6392,7 @@ function RealtimeProvider({
     },
     []
   );
-  const resetPipelineSettled = (0, import_react24.useCallback)(
+  const resetPipelineSettled = (0, import_react25.useCallback)(
     () => {
       pipelineGenRef.current++;
       hasBlobInFlightRef.current = false;
@@ -6361,7 +6403,7 @@ function RealtimeProvider({
     },
     []
   );
-  const notifyPendingExport = (0, import_react24.useCallback)(
+  const notifyPendingExport = (0, import_react25.useCallback)(
     (placement) => {
       if (pendingPlacementsRef.current.has(placement)) {
         return;
@@ -6381,7 +6423,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;
@@ -6405,7 +6447,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;
@@ -6413,7 +6455,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)) {
@@ -6425,10 +6467,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) {
@@ -6450,13 +6492,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;
@@ -6466,49 +6508,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,
@@ -6532,6 +6574,7 @@ function RealtimeProvider({
       sendCanvasState,
       updateMockupIds: updateMockupIdsRaw,
       updatePlacementSettings: updatePlacementSettingsWrapped,
+      setSpreadCrops,
       getMockupResultsImmediate: () => mockupResultsRef.current,
       subscribeMockupResults: stableSubscribeMockupResults,
       subscribeMockupResultById: stableSubscribeMockupResultById,
@@ -6568,6 +6611,7 @@ function RealtimeProvider({
       sendCanvasState,
       updateMockupIdsRaw,
       updatePlacementSettingsWrapped,
+      setSpreadCrops,
       stableSubscribeMockupResults,
       stableSubscribeMockupResultById,
       notifyPendingExport,
@@ -6581,31 +6625,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;
@@ -6614,7 +6658,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 */
@@ -6647,7 +6691,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,
@@ -6660,14 +6704,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);
@@ -6684,7 +6728,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) {
   }
@@ -6692,22 +6736,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;
@@ -6742,7 +6786,7 @@ function useScrollDirection() {
       rafIdRef.current = null;
     });
   }, []);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     if (typeof window === "undefined") return;
     lastScrollRef.current = {
       top: window.scrollY,
@@ -6813,7 +6857,7 @@ function createScrollDirectionTracker() {
 }
 
 // src/hooks/useImageTransition.ts
-var import_react29 = require("react");
+var import_react30 = require("react");
 var layerIdCounter = 0;
 function useImageTransition(options = {}) {
   const {
@@ -6823,7 +6867,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,
@@ -6832,12 +6876,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;
@@ -6851,7 +6895,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) {
@@ -6969,7 +7013,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;
@@ -6989,7 +7033,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;
@@ -7004,7 +7048,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(() => {
@@ -7013,7 +7057,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;
@@ -7027,11 +7071,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;
@@ -7122,7 +7166,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;
@@ -7141,7 +7185,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;
@@ -7183,7 +7227,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();
@@ -7245,12 +7289,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)) {
@@ -7275,17 +7319,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);
@@ -7349,14 +7393,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) {
@@ -7374,11 +7418,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;
@@ -7397,51 +7441,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;
     }
@@ -7469,8 +7513,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;
@@ -7506,7 +7550,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) => {
@@ -7515,13 +7559,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;
     }
@@ -7531,7 +7575,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();
@@ -7543,7 +7587,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) {
@@ -7560,7 +7604,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;
@@ -7650,7 +7694,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);
     }
@@ -7659,7 +7703,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);
@@ -7675,7 +7719,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;
@@ -7716,7 +7760,7 @@ function MockupPriorityProvider({ children }) {
       });
     });
   }, []);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     const pollVisibility = () => {
       updateVisibilityFromRefs();
       recalculatePriorities();
@@ -7729,7 +7773,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);
@@ -7778,7 +7822,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);
@@ -7793,7 +7837,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) {
@@ -7806,7 +7850,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) {
@@ -7855,21 +7899,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:
@@ -7882,19 +7926,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] : [];
@@ -7906,16 +7950,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());
@@ -7935,7 +7979,7 @@ function MockupPriorityProvider({ children }) {
     },
     []
   );
-  const subscribeLevel1Change = (0, import_react32.useCallback)(
+  const subscribeLevel1Change = (0, import_react33.useCallback)(
     (callback) => {
       level1SubscribersRef.current.add(callback);
       callback(level1MockupRef.current);
@@ -7945,7 +7989,7 @@ function MockupPriorityProvider({ children }) {
     },
     []
   );
-  const contextValue = (0, import_react32.useMemo)(
+  const contextValue = (0, import_react33.useMemo)(
     () => ({
       registerMockup,
       unregisterMockup,
@@ -7985,10 +8029,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"
@@ -7997,7 +8041,7 @@ function useMockupPriority() {
   return context;
 }
 function useMockupPriorityOptional() {
-  return (0, import_react32.useContext)(MockupPriorityContext);
+  return (0, import_react33.useContext)(MockupPriorityContext);
 }
 
 // src/hooks/useProductPage.ts
@@ -8028,7 +8072,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,
@@ -8122,7 +8166,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];
@@ -8139,7 +8183,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);
     },
@@ -8149,7 +8193,7 @@ function useSelectedArtwork() {
 }
 function useProductSelection() {
   const productCtx = useProductOptional();
-  const update = (0, import_react33.useCallback)(
+  const update = (0, import_react34.useCallback)(
     (selection) => {
       productCtx?.updateSelection?.(selection);
     },
@@ -8159,7 +8203,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);
     },
@@ -8172,10 +8216,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);
@@ -8186,15 +8230,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) => ({
@@ -8205,7 +8249,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;
@@ -8217,7 +8261,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;
@@ -8258,7 +8302,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,
@@ -8270,7 +8314,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;
@@ -8328,7 +8372,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,
@@ -8368,7 +8412,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);
@@ -8723,8 +8767,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,
@@ -8733,7 +8777,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,
@@ -8764,16 +8808,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
@@ -8786,8 +8830,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,
@@ -8796,7 +8840,7 @@ function CanvasIsolationBoundary({
         serializeStateForServer
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(IsolatedChildren, { children })
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(IsolatedChildren, { children })
   ] });
 }
 function useIsolatedCanvas() {
@@ -8819,8 +8863,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,
@@ -8924,18 +8968,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) {
@@ -8943,7 +8987,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?.();
@@ -8957,20 +9001,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",
@@ -8992,9 +9036,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);
@@ -9012,7 +9056,7 @@ function useLoadingOverlay(isLoading) {
       }
     };
   }, [isLoading]);
-  const handleExited = (0, import_react39.useCallback)(() => {
+  const handleExited = (0, import_react40.useCallback)(() => {
     setShowOverlay(false);
   }, []);
   return {
@@ -9023,9 +9067,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
@@ -9195,19 +9239,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",
@@ -9226,15 +9270,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();
@@ -9245,7 +9289,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;
@@ -9258,11 +9302,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?.();
@@ -9272,8 +9316,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,
@@ -9286,7 +9330,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,
@@ -9305,19 +9349,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?.();
@@ -9327,7 +9371,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,
@@ -9347,17 +9391,6 @@ var LoadingOverlayPrismCandyInline = (0, import_react40.memo)(
 var import_react71 = require("@snowcone-app/sdk/react");
 var import_sdk11 = require("@snowcone-app/sdk");
 
-// src/patterns/MockupBackground.tsx
-var import_react41 = require("react");
-var import_jsx_runtime56 = require("react/jsx-runtime");
-var MockupBackgroundContext = (0, import_react41.createContext)(void 0);
-function MockupBackground({ bg, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(MockupBackgroundContext.Provider, { value: bg, children });
-}
-function useMockupBackgroundOptional() {
-  return (0, import_react41.useContext)(MockupBackgroundContext);
-}
-
 // src/patterns/ProductPageProvider.tsx
 var import_jsx_runtime57 = require("react/jsx-runtime");
 function ProductPageProvider({