@snowcone-app/ui 0.4.9 → 0.4.11

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.4.11
+
+### Patch Changes
+
+- [#1632](https://github.com/snowcone-app/snowcone-monorepo/pull/1632) [`8a3b7e2`](https://github.com/snowcone-app/snowcone-monorepo/commit/8a3b7e26867257a22073dc5a55fb19d94ffded3f) Thanks [@kevinsproles](https://github.com/kevinsproles)! - RealtimeProvider: decode the frozen cropped-delivery background at seed time. With ws binary frame delivery the full frame's `imageUrl` is a live `blob:` URL the SDK revokes when the next frame for that mockup arrives; lazily loading it at composite time failed (`E_OVERLAY_FRAME_LOAD`), disabled cropped delivery for the session, and cost three extra full renders per edit.
+
+## 0.4.10
+
+### Patch Changes
+
+- Updated dependencies [[`e57a5bc`](https://github.com/snowcone-app/snowcone-monorepo/commit/e57a5bcb3b62ac612e43c47ab2709992ef6db385)]:
+  - @snowcone-app/sdk@0.20.3
+
 ## 0.4.9
 
 ### Patch Changes

package/dist/index.cjs

@@ -5929,6 +5929,67 @@ function useMockupBackgroundOptional() {
   return (0, import_react24.useContext)(MockupBackgroundContext);
 }
 
+// src/patterns/croppedFrameComposite.ts
+var COMPOSITE_QUALITY = 0.92;
+function isFullRect(rect) {
+  if (!rect) return true;
+  return rect.x === 0 && rect.y === 0 && rect.w === 1 && rect.h === 1;
+}
+function compositeOffset(rect, bgWidth, bgHeight) {
+  return {
+    dx: Math.round(rect.x * bgWidth),
+    dy: Math.round(rect.y * bgHeight)
+  };
+}
+function allBackgroundsSeeded(mockupIds, seeded) {
+  return mockupIds.length > 0 && mockupIds.every((id) => seeded.has(id));
+}
+function loadImageElement(url) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      if (img.decode) {
+        img.decode().then(
+          () => resolve(img),
+          () => resolve(img)
+        );
+      } else {
+        resolve(img);
+      }
+    };
+    img.onerror = () => reject(
+      new Error(`E_OVERLAY_FRAME_LOAD: image failed to load: ${url.slice(0, 160)}`)
+    );
+    img.src = url;
+  });
+}
+async function compositeCroppedFrame(args) {
+  const frame = await loadImageElement(args.frameUrl);
+  const width = args.background.naturalWidth;
+  const height = args.background.naturalHeight;
+  if (!width || !height) {
+    throw new Error("E_OVERLAY_BG_EMPTY: background image has no pixels");
+  }
+  const canvas = args.canvas ?? document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("E_OVERLAY_NO_2D_CONTEXT: canvas 2d context unavailable");
+  }
+  ctx.drawImage(args.background, 0, 0);
+  const { dx, dy } = compositeOffset(args.rect, width, height);
+  ctx.drawImage(frame, dx, dy);
+  const blob = await new Promise(
+    (resolve) => canvas.toBlob(resolve, "image/webp", COMPOSITE_QUALITY)
+  );
+  if (!blob) {
+    throw new Error("E_OVERLAY_ENCODE_FAILED: canvas.toBlob returned null");
+  }
+  return blob;
+}
+
 // src/patterns/RealtimeProvider.tsx
 var import_jsx_runtime52 = require("react/jsx-runtime");
 var DEFAULT_ARTBOARD_SIZE = 2e3;
@@ -5944,7 +6005,8 @@ function RealtimeProvider({
   mockupWidth = 1400,
   autoEnable = false,
   shop,
-  grantUrl
+  grantUrl,
+  delivery = "cropped"
 }) {
   const productContext = useProductOptional();
   const mockupBg = useMockupBackgroundOptional();
@@ -6048,58 +6110,217 @@ function RealtimeProvider({
   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 = [];
-        mockupSubscribersRef.current.forEach((cb) => cb([]));
+  const backgroundsRef = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
+  const croppedActiveRef = (0, import_react25.useRef)(false);
+  const cropCapableRef = (0, import_react25.useRef)(true);
+  const lastConfigBaseRef = (0, import_react25.useRef)(null);
+  const sceneGenRef = (0, import_react25.useRef)(0);
+  const processedFrameRef = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
+  const compositeQueueRef = (0, import_react25.useRef)(/* @__PURE__ */ new Map());
+  const compositeBusyRef = (0, import_react25.useRef)(/* @__PURE__ */ new Set());
+  const compositeCanvasRef = (0, import_react25.useRef)(null);
+  const registerBlobUrl = (0, import_react25.useCallback)((blobOrUrl, placementName) => {
+    let url;
+    if (blobOrUrl instanceof Blob) {
+      if (registeredBlobUrlsRef.current.size >= MAX_CONCURRENT_BLOBS) {
+        const oldest = registeredBlobUrlsRef.current.values().next().value;
+        if (oldest) {
+          URL.revokeObjectURL(oldest);
+          registeredBlobUrlsRef.current.delete(oldest);
+          mockupUrlCacheRef.current.forEach((value, key) => {
+            if (value.url === oldest) {
+              mockupUrlCacheRef.current.delete(key);
+            }
+          });
+          mockupResultsRef.current = mockupResultsRef.current.filter(
+            (r) => r.imageUrl !== oldest
+          );
+        }
       }
-      return;
+      url = URL.createObjectURL(blobOrUrl);
+      registeredBlobUrlsRef.current.add(url);
+    } else {
+      url = blobOrUrl;
     }
-    console.log(`[RTP] rawMockupResults changed: ${rawMockupResults.length} result(s)`, rawMockupResults.map((r) => `${r.mockupId}${r.imageUrl ? " \u2713url" : " \u2717NO-URL"}`));
-    mockupResultsRef.current = rawMockupResults;
-    const now = Date.now();
-    rawMockupResults.forEach((result) => {
-      if (result.imageUrl) {
+    return url;
+  }, []);
+  const croppedDeliveryEnabled = delivery !== "full-frame";
+  const sendCropConfig = (0, import_react25.useCallback)(
+    (withCrop) => {
+      const base = lastConfigBaseRef.current;
+      if (!base) return;
+      croppedActiveRef.current = withCrop;
+      sendConfigRaw({
+        ...base,
+        placementSettings: { ...placementSettingsOverridesRef.current },
+        ...withCrop ? { overlayCrop: "auto" } : {}
+      });
+    },
+    [sendConfigRaw]
+  );
+  const unflipCrop = (0, import_react25.useCallback)(() => {
+    if (!croppedActiveRef.current) return;
+    sendCropConfig(false);
+  }, [sendCropConfig]);
+  const maybeFlipCrop = (0, import_react25.useCallback)(() => {
+    if (!croppedDeliveryEnabled || !cropCapableRef.current) return;
+    if (croppedActiveRef.current) return;
+    const base = lastConfigBaseRef.current;
+    if (!base) return;
+    const ids = base.mockupIds ?? [];
+    const seeded = new Set(backgroundsRef.current.keys());
+    if (allBackgroundsSeeded(ids, seeded)) {
+      console.log(`[RTP] Cropped delivery ON \u2014 all ${ids.length} mockup background(s) seeded`);
+      sendCropConfig(true);
+    } else {
+      const missing = ids.filter((id) => !seeded.has(id));
+      console.log(`[RTP] Cropped delivery waiting \u2014 ${missing.length}/${ids.length} mockup(s) unseeded: [${missing.slice(0, 8).join(", ")}]`);
+    }
+  }, [croppedDeliveryEnabled, sendCropConfig]);
+  const invalidateBackgrounds = (0, import_react25.useCallback)(() => {
+    sceneGenRef.current += 1;
+    backgroundsRef.current.clear();
+    processedFrameRef.current.clear();
+    compositeQueueRef.current.clear();
+    croppedActiveRef.current = false;
+  }, []);
+  const deliverResults = (0, import_react25.useCallback)(
+    (results) => {
+      if (results.length === 0) return;
+      const now = Date.now();
+      const merged = [...mockupResultsRef.current];
+      results.forEach((result) => {
+        const idx = merged.findIndex((r) => r.mockupId === result.mockupId);
+        if (idx >= 0) merged[idx] = result;
+        else merged.push(result);
+      });
+      mockupResultsRef.current = merged;
+      const clearedPlacements = /* @__PURE__ */ new Set();
+      results.forEach((result) => {
         const wasPending = pendingMockupIdsRef.current.has(result.mockupId);
         mockupUrlCacheRef.current.set(result.mockupId, {
           url: result.imageUrl,
-          isBlob: false,
-          // Server URLs are not blob URLs
+          isBlob: result.imageUrl.startsWith("blob:"),
           timestamp: now
         });
         pendingMockupIdsRef.current.delete(result.mockupId);
         if (wasPending) {
           console.log(`[RTP] Cleared pending for ${result.mockupId} \u2014 url cached`);
         }
+        if (result.placement) clearedPlacements.add(result.placement);
+      });
+      if (clearedPlacements.size > 0) {
+        clearedPlacements.forEach((p) => pendingPlacementsRef.current.delete(p));
       } else {
-        console.log(`[RTP] Result for ${result.mockupId} has NO imageUrl \u2014 not caching, pending NOT cleared`);
+        pendingPlacementsRef.current.clear();
       }
-    });
-    const clearedPlacements = /* @__PURE__ */ new Set();
-    rawMockupResults.forEach((result) => {
-      if (result.placement) clearedPlacements.add(result.placement);
-    });
-    if (clearedPlacements.size > 0) {
-      clearedPlacements.forEach((p) => pendingPlacementsRef.current.delete(p));
-    } else {
-      pendingPlacementsRef.current.clear();
+      mockupSubscribersRef.current.forEach((cb) => cb(results));
+      results.forEach((result) => {
+        const subscribers = mockupSubscribersByIdRef.current.get(result.mockupId);
+        if (subscribers && subscribers.size > 0) {
+          console.log(`[RTP] Notifying ${subscribers.size} subscriber(s) for ${result.mockupId}`);
+          subscribers.forEach((cb) => cb(result));
+        } else {
+          console.log(`[RTP] No subscribers for ${result.mockupId} \u2014 result received but nobody listening`);
+        }
+      });
+      if (hasBlobInFlightRef.current && !hasPendingBlobs() && !pipelineResetCooldownRef.current) {
+        hasBlobInFlightRef.current = false;
+        pipelineSettledSubscribersRef.current.forEach((cb) => cb());
+      }
+    },
+    [hasPendingBlobs]
+  );
+  const runComposite = (0, import_react25.useCallback)(
+    async (result) => {
+      const gen = sceneGenRef.current;
+      const bg = backgroundsRef.current.get(result.mockupId);
+      if (!bg) {
+        console.error(
+          `[RealtimeProvider] E_OVERLAY_NO_BACKGROUND: cropped frame for ${result.mockupId} has no frozen background \u2014 falling back to full-frame and re-rendering it.`
+        );
+        unflipCrop();
+        updateMockupIdsRaw([result.mockupId]);
+        return;
+      }
+      try {
+        if (!bg.imgPromise) bg.imgPromise = loadImageElement(bg.url);
+        const background = await bg.imgPromise;
+        if (!compositeCanvasRef.current && typeof document !== "undefined") {
+          compositeCanvasRef.current = document.createElement("canvas");
+        }
+        const blob = await compositeCroppedFrame({
+          background,
+          frameUrl: result.imageUrl,
+          rect: result.cropRect,
+          canvas: compositeCanvasRef.current ?? void 0
+        });
+        if (gen !== sceneGenRef.current) return;
+        deliverResults([{ ...result, imageUrl: registerBlobUrl(blob) }]);
+      } catch (err) {
+        console.error(
+          "[RealtimeProvider] E_OVERLAY_COMPOSITE_FAILED: cropped-frame composite failed \u2014 full-frame delivery for the rest of this session.",
+          err
+        );
+        cropCapableRef.current = false;
+        unflipCrop();
+        updateMockupIdsRaw([result.mockupId]);
+      }
+    },
+    [deliverResults, registerBlobUrl, unflipCrop, updateMockupIdsRaw]
+  );
+  const pumpCompositeQueue = (0, import_react25.useCallback)(
+    (mockupId) => {
+      if (compositeBusyRef.current.has(mockupId)) return;
+      const job = compositeQueueRef.current.get(mockupId);
+      if (!job) return;
+      compositeQueueRef.current.delete(mockupId);
+      compositeBusyRef.current.add(mockupId);
+      void runComposite(job).finally(() => {
+        compositeBusyRef.current.delete(mockupId);
+        pumpCompositeQueue(mockupId);
+      });
+    },
+    [runComposite]
+  );
+  (0, import_react25.useEffect)(() => {
+    if (rawMockupResults.length === 0) {
+      if (mockupResultsRef.current.length > 0) {
+        mockupResultsRef.current = [];
+        mockupSubscribersRef.current.forEach((cb) => cb([]));
+      }
+      return;
     }
-    mockupSubscribersRef.current.forEach((cb) => cb(rawMockupResults));
+    console.log(`[RTP] rawMockupResults changed: ${rawMockupResults.length} result(s)`, rawMockupResults.map((r) => `${r.mockupId}${r.imageUrl ? " \u2713url" : " \u2717NO-URL"}${r.cropRect ? " [crop]" : ""}`));
+    const displayable = [];
     rawMockupResults.forEach((result) => {
-      const subscribers = mockupSubscribersByIdRef.current.get(result.mockupId);
-      if (subscribers && subscribers.size > 0) {
-        console.log(`[RTP] Notifying ${subscribers.size} subscriber(s) for ${result.mockupId}`);
-        subscribers.forEach((cb) => cb(result));
-      } else {
-        console.log(`[RTP] No subscribers for ${result.mockupId} \u2014 result received but nobody listening`);
+      if (!result.imageUrl) {
+        console.log(`[RTP] Result for ${result.mockupId} has NO imageUrl \u2014 not caching, pending NOT cleared`);
+        return;
+      }
+      const firstSight = processedFrameRef.current.get(result.mockupId) !== result.imageUrl;
+      const sessionLive = configSentRef.current;
+      if (isFullRect(result.cropRect)) {
+        if (firstSight && sessionLive) {
+          processedFrameRef.current.set(result.mockupId, result.imageUrl);
+          const imgPromise = loadImageElement(result.imageUrl);
+          imgPromise.catch(() => {
+          });
+          backgroundsRef.current.set(result.mockupId, { url: result.imageUrl, imgPromise });
+        }
+        displayable.push(result);
+      } else if (firstSight && sessionLive) {
+        processedFrameRef.current.set(result.mockupId, result.imageUrl);
+        compositeQueueRef.current.set(result.mockupId, result);
+        pumpCompositeQueue(result.mockupId);
+      } else if (pendingMockupIdsRef.current.has(result.mockupId)) {
+        const cached = mockupUrlCacheRef.current.get(result.mockupId);
+        if (cached) displayable.push({ ...result, imageUrl: cached.url });
       }
     });
-    if (hasBlobInFlightRef.current && !hasPendingBlobs() && !pipelineResetCooldownRef.current) {
-      hasBlobInFlightRef.current = false;
-      pipelineSettledSubscribersRef.current.forEach((cb) => cb());
-    }
-  }, [rawMockupResults]);
+    deliverResults(displayable);
+    maybeFlipCrop();
+  }, [rawMockupResults, deliverResults, maybeFlipCrop, pumpCompositeQueue]);
   const sendCanvasBlob = (0, import_react25.useCallback)(
     (placement, blob, mockupCount, baseThrottleMs) => {
       blobQueuedGenRef.current = pipelineGenRef.current;
@@ -6160,9 +6381,11 @@ function RealtimeProvider({
         lastSentBgRef.current = void 0;
         lastSentSpreadCropsRef.current = "null";
         lastSentColorsRef.current = {};
+        invalidateBackgrounds();
+        lastConfigBaseRef.current = null;
       };
     }
-  }, [isEnabled, connect, disconnect, wsUrl]);
+  }, [isEnabled, connect, disconnect, wsUrl, invalidateBackgrounds]);
   (0, import_react25.useEffect)(() => {
     if (rawMockupResults.length > 0 && isPendingMockupsRef.current) {
       isPendingMockupsRef.current = false;
@@ -6186,6 +6409,9 @@ function RealtimeProvider({
     if (!isFirstSend && !variantChanged && !bgChanged && !spreadCropsChanged) {
       return;
     }
+    if (variantChanged || bgChanged) {
+      invalidateBackgrounds();
+    }
     const mockupIds = [];
     if (product.mockups && Array.isArray(product.mockups)) {
       product.mockups.forEach((mockup) => {
@@ -6220,7 +6446,10 @@ function RealtimeProvider({
         pendingBlobSubscribersRef.current.forEach((cb) => cb(p.label));
       });
     }
-    sendConfigRaw(configPayload);
+    lastConfigBaseRef.current = configPayload;
+    sendConfigRaw(
+      croppedActiveRef.current ? { ...configPayload, overlayCrop: "auto" } : configPayload
+    );
     configSentRef.current = true;
     lastSentVariantIdRef.current = variantId;
     lastSentBgRef.current = mockupBg;
@@ -6242,6 +6471,7 @@ function RealtimeProvider({
     productContext?.selection,
     sendConfigRaw,
     sendColorBlobTracked,
+    invalidateBackgrounds,
     mockupWidth,
     mockupBg,
     spreadCropsVersion
@@ -6271,6 +6501,15 @@ function RealtimeProvider({
     productContext?.selection,
     sendColorBlobTracked
   ]);
+  const updateMockupIdsGuarded = (0, import_react25.useCallback)(
+    (mockupIds) => {
+      if (croppedActiveRef.current && mockupIds.some((id) => !backgroundsRef.current.has(id))) {
+        unflipCrop();
+      }
+      return updateMockupIdsRaw(mockupIds);
+    },
+    [updateMockupIdsRaw, unflipCrop]
+  );
   const updatePlacementSettingsWrapped = (0, import_react25.useCallback)(
     (settings) => {
       placementSettingsOverridesRef.current = settings;
@@ -6470,28 +6709,6 @@ function RealtimeProvider({
   const isMockupLoading = (0, import_react25.useCallback)((mockupId) => {
     return pendingMockupIdsRef.current.has(mockupId);
   }, []);
-  const registerBlobUrl = (0, import_react25.useCallback)((blobOrUrl, placementName) => {
-    let url;
-    if (blobOrUrl instanceof Blob) {
-      if (registeredBlobUrlsRef.current.size >= MAX_CONCURRENT_BLOBS) {
-        const oldest = registeredBlobUrlsRef.current.values().next().value;
-        if (oldest) {
-          URL.revokeObjectURL(oldest);
-          registeredBlobUrlsRef.current.delete(oldest);
-          mockupUrlCacheRef.current.forEach((value, key) => {
-            if (value.url === oldest) {
-              mockupUrlCacheRef.current.delete(key);
-            }
-          });
-        }
-      }
-      url = URL.createObjectURL(blobOrUrl);
-      registeredBlobUrlsRef.current.add(url);
-    } else {
-      url = blobOrUrl;
-    }
-    return url;
-  }, []);
   const subscribeMockupResultsRef = (0, import_react25.useRef)(subscribeMockupResults);
   const subscribeMockupResultByIdRef = (0, import_react25.useRef)(subscribeMockupResultById);
   const subscribePendingBlobRef = (0, import_react25.useRef)(subscribePendingBlob);
@@ -6572,7 +6789,7 @@ function RealtimeProvider({
       disableRealtime,
       sendCanvasBlob,
       sendCanvasState,
-      updateMockupIds: updateMockupIdsRaw,
+      updateMockupIds: updateMockupIdsGuarded,
       updatePlacementSettings: updatePlacementSettingsWrapped,
       setSpreadCrops,
       getMockupResultsImmediate: () => mockupResultsRef.current,
@@ -6609,7 +6826,7 @@ function RealtimeProvider({
       disableRealtime,
       sendCanvasBlob,
       sendCanvasState,
-      updateMockupIdsRaw,
+      updateMockupIdsGuarded,
       updatePlacementSettingsWrapped,
       setSpreadCrops,
       stableSubscribeMockupResults,
@@ -10086,7 +10303,10 @@ var HeroProductImage = (0, import_react46.memo)(function HeroProductImage2({
   // Quick crossfade
   shimmerDelay = 200,
   shimmerFadeDuration = 500,
-  darkShimmerFadeInDuration = 300
+  darkShimmerFadeInDuration = 300,
+  emptyText = "No artwork",
+  errorText = "Error loading",
+  unavailableText = "Preview unavailable"
 }) {
   const context = useProductOptional();
   const designContext = useDesignOptional();
@@ -10531,7 +10751,7 @@ var HeroProductImage = (0, import_react46.memo)(function HeroProductImage2({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "text-xs", children: "No artwork" })
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "text-xs", children: emptyText })
         ] })
       }
     );
@@ -10542,7 +10762,7 @@ var HeroProductImage = (0, import_react46.memo)(function HeroProductImage2({
       {
         className: `bg-red-50 flex items-center justify-center ${className || ""}`,
         style,
-        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" }) })
+        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: errorText }) })
       }
     );
   }
@@ -10561,7 +10781,7 @@ var HeroProductImage = (0, import_react46.memo)(function HeroProductImage2({
             crossOrigin: "anonymous",
             className: "absolute inset-0 w-full h-full object-cover",
             draggable,
-            src: retriedUrlRef.current === renderedUrl ? `${renderedUrl}${renderedUrl.includes("?") ? "&" : "?"}_cb=${retryNonce}` : renderedUrl,
+            src: renderedUrl,
             loading: "eager",
             fetchPriority: "high",
             onClick,
@@ -10577,7 +10797,8 @@ var HeroProductImage = (0, import_react46.memo)(function HeroProductImage2({
             onError: () => {
               if (renderedUrl && retriedUrlRef.current !== renderedUrl) {
                 retriedUrlRef.current = renderedUrl;
-                setRetryNonce((n) => n + 1);
+                void fetch(renderedUrl, { mode: "cors", cache: "reload", credentials: "omit" }).catch(() => {
+                }).then(() => setRetryNonce((n) => n + 1));
                 return;
               }
               setImgFailed(true);
@@ -10591,9 +10812,10 @@ var HeroProductImage = (0, import_react46.memo)(function HeroProductImage2({
                 );
               }
             }
-          }
+          },
+          retryNonce
         ),
-        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" }) }),
+        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: unavailableText }) }),
         realtimeContext?.renderError && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
           "div",
           {
@@ -12083,7 +12305,10 @@ var MobileProductCarousel = (0, import_react56.memo)(function MobileProductCarou
   onZoomChange,
   stickyHeroContext,
   mockupWidth,
-  onMockupUrlGenerated
+  onMockupUrlGenerated,
+  renderImageAction,
+  errorText,
+  unavailableText
 }) {
   const [activeIndex, setActiveIndex] = (0, import_react56.useState)(currentIndex);
   const [touchStart, setTouchStart] = (0, import_react56.useState)(
@@ -12617,34 +12842,52 @@ var MobileProductCarousel = (0, import_react56.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_runtime74.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
                 "div",
                 {
                   className: "w-full h-full flex-shrink-0 relative select-none",
-                  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_runtime74.jsx)(LoadingOverlayPrismCandyInline, { visible: true, variant: "light" })
-                  ) : image.isRealMockup && currentArtwork ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                    HeroProductImage,
-                    {
-                      productId,
-                      artwork: currentArtwork,
-                      placement: image.placement,
-                      mockupId: image.mockupId,
-                      width: mockupWidth,
-                      realtimeUrl: image.mockupId ? realtimeMockupUrls[image.mockupId] ?? generatedUrlsRef.current.get(image.mockupId) ?? void 0 : void 0,
-                      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_runtime74.jsx)(LoadingOverlayPrismCandyInline, { visible: true, variant: "light" }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                    StaticCarouselImage,
-                    {
-                      src: image.src,
-                      alt: image.label ?? "",
-                      className: "w-full h-full object-cover cursor-pointer pointer-events-none"
-                    }
-                  )
+                  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_runtime74.jsx)(LoadingOverlayPrismCandyInline, { visible: true, variant: "light" })
+                    ) : image.isRealMockup && currentArtwork ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                      HeroProductImage,
+                      {
+                        productId,
+                        artwork: currentArtwork,
+                        placement: image.placement,
+                        mockupId: image.mockupId,
+                        width: mockupWidth,
+                        realtimeUrl: image.mockupId ? realtimeMockupUrls[image.mockupId] ?? generatedUrlsRef.current.get(image.mockupId) ?? void 0 : void 0,
+                        onUrlGenerated: image.mockupId ? (url) => handleUrlGenerated(image.mockupId, url) : void 0,
+                        errorText,
+                        unavailableText,
+                        className: "w-full h-full object-cover cursor-pointer pointer-events-none"
+                      }
+                    ) : image.isRealMockup && !currentArtwork ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(LoadingOverlayPrismCandyInline, { visible: true, variant: "light" }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                      StaticCarouselImage,
+                      {
+                        src: image.src,
+                        alt: image.label ?? "",
+                        className: "w-full h-full object-cover cursor-pointer pointer-events-none"
+                      }
+                    ),
+                    isWithinDecodeWindow && (() => {
+                      const action = renderImageAction?.(image, index);
+                      return action ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+                        "div",
+                        {
+                          className: "absolute top-3 right-3 z-10",
+                          onClick: (e) => e.stopPropagation(),
+                          onTouchStart: (e) => e.stopPropagation(),
+                          onTouchEnd: (e) => e.stopPropagation(),
+                          onMouseDown: (e) => e.stopPropagation(),
+                          children: action
+                        }
+                      ) : null;
+                    })()
+                  ]
                 },
                 index
               );