@snowcone-app/ui 0.9.3 → 0.9.5

package/dist/index.d.cts

@@ -2930,6 +2930,8 @@ interface MockupResult {
     imageUrl: string;
     /** The canvas version this frame was rendered from (see getCanvasVersion). */
     requestVersion?: number;
+    /** Per-placement versions folded into this frame (servers with per-placement stamps; see getLatestSentVersions). */
+    versions?: Record<string, number>;
 }
 type RealtimeState = RealtimeContextValue;
 interface RealtimeContextValue {
@@ -3052,6 +3054,12 @@ interface RealtimeContextValue {
      * older design. Read it after a `subscribeBlobSent` notification.
      */
     getCanvasVersion: () => number;
+    /**
+     * The latest canvas version sent per placement. With a server that stamps
+     * `versions` on every frame, a picture is current exactly when, for every
+     * placement here, its frame's `versions[placement]` is at least this.
+     */
+    getLatestSentVersions: () => Record<string, number>;
     flushPendingBlobs: () => void;
     hasPendingBlobs: () => boolean;
     subscribePipelineSettled: (callback: () => void) => () => void;

package/dist/index.d.ts

@@ -2930,6 +2930,8 @@ interface MockupResult {
     imageUrl: string;
     /** The canvas version this frame was rendered from (see getCanvasVersion). */
     requestVersion?: number;
+    /** Per-placement versions folded into this frame (servers with per-placement stamps; see getLatestSentVersions). */
+    versions?: Record<string, number>;
 }
 type RealtimeState = RealtimeContextValue;
 interface RealtimeContextValue {
@@ -3052,6 +3054,12 @@ interface RealtimeContextValue {
      * older design. Read it after a `subscribeBlobSent` notification.
      */
     getCanvasVersion: () => number;
+    /**
+     * The latest canvas version sent per placement. With a server that stamps
+     * `versions` on every frame, a picture is current exactly when, for every
+     * placement here, its frame's `versions[placement]` is at least this.
+     */
+    getLatestSentVersions: () => Record<string, number>;
     flushPendingBlobs: () => void;
     hasPendingBlobs: () => boolean;
     subscribePipelineSettled: (callback: () => void) => () => void;

package/dist/index.js

@@ -5703,6 +5703,7 @@ async function compositeCroppedFrame(args) {
 import { jsx as jsx52 } from "react/jsx-runtime";
 var DEFAULT_ARTBOARD_SIZE = 2e3;
 var MAX_CONCURRENT_BLOBS = 5;
+var FRAME_SUPERSEDE_GRACE_MS = 2e3;
 function mergeMockupIds(current, extra) {
   const out = [...current];
   for (const id of extra) if (!out.includes(id)) out.push(id);
@@ -5786,6 +5787,12 @@ function RealtimeProvider({
     },
     onError: (error, detail) => {
       console.error(`[RealtimeProvider] Render error [${detail.code}]:`, error);
+      if (detail.code.startsWith("E_RERENDER_") && pendingRerenderRef.current.length > 0) {
+        const ids = pendingRerenderRef.current;
+        pendingRerenderRef.current = [];
+        forceRerenderByConfigRef.current?.(ids);
+        return;
+      }
       if (detail.mockupId) {
         const id = detail.mockupId;
         setUnavailableMockups((prev) => prev.get(id)?.code === detail.code ? prev : new Map(prev).set(id, detail));
@@ -5811,7 +5818,9 @@ function RealtimeProvider({
     disconnect,
     flushPendingBlobs,
     hasPendingBlobs,
-    getLastSentVersion
+    getLastSentVersion,
+    getLatestSentVersions,
+    rerender: rerenderRaw
   } = realtimeMockup;
   const mockupResultsRef = useRef12([]);
   const mockupSubscribersRef = useRef12(
@@ -5849,6 +5858,9 @@ function RealtimeProvider({
   const compositeBusyRef = useRef12(/* @__PURE__ */ new Set());
   const compositeCanvasRef = useRef12(null);
   const requestedMockupIdsRef = useRef12([]);
+  const serverStampsVersionsRef = useRef12(false);
+  const pendingRerenderRef = useRef12([]);
+  const forceRerenderByConfigRef = useRef12(null);
   const fullFrameRerenderIdsRef = useRef12(/* @__PURE__ */ new Set());
   const fullFrameRerenderTimerRef = useRef12(null);
   useEffect17(
@@ -5901,6 +5913,36 @@ function RealtimeProvider({
     if (!croppedActiveRef.current) return;
     sendCropConfig(false);
   }, [sendCropConfig]);
+  const sendFullFrameConfig = useCallback10(
+    (mockupIds) => {
+      const base = lastConfigBaseRef.current;
+      if (!base) return;
+      sendConfigRaw({
+        ...base,
+        mockupIds,
+        placementSettings: { ...placementSettingsOverridesRef.current }
+      });
+    },
+    [sendConfigRaw]
+  );
+  const forceRerenderByConfig = useCallback10(
+    (failed) => {
+      const inForce = requestedMockupIdsRef.current;
+      const fp = (list) => [...list].sort().join(",");
+      const step = fp(failed) !== fp(inForce) ? failed : inForce.slice(0, -1);
+      if (step.length === 0) {
+        console.error(
+          `[RealtimeProvider] E_OVERLAY_RERENDER_UNAVAILABLE: cannot force a full-frame re-render of ${failed.join(", ")} (single-mockup session on a box without \`rerender\`); it updates on the next edit.`
+        );
+        sendFullFrameConfig(inForce);
+        return;
+      }
+      sendFullFrameConfig(step);
+      sendFullFrameConfig(inForce);
+    },
+    [sendFullFrameConfig]
+  );
+  forceRerenderByConfigRef.current = forceRerenderByConfig;
   const rerenderFullFrame = useCallback10(
     (mockupId) => {
       fullFrameRerenderIdsRef.current.add(mockupId);
@@ -5909,35 +5951,26 @@ function RealtimeProvider({
         fullFrameRerenderTimerRef.current = null;
         const failed = [...fullFrameRerenderIdsRef.current];
         fullFrameRerenderIdsRef.current.clear();
-        const base = lastConfigBaseRef.current;
-        if (!base || failed.length === 0) return;
+        if (!lastConfigBaseRef.current || failed.length === 0) return;
         const previous = requestedMockupIdsRef.current;
         const ids = mergeMockupIds(previous, failed);
         croppedActiveRef.current = false;
         requestedMockupIdsRef.current = ids;
-        const send = (mockupIds) => sendConfigRaw({
-          ...base,
-          mockupIds,
-          placementSettings: { ...placementSettingsOverridesRef.current }
-        });
-        const fingerprint = (list) => [...list].sort().join(",");
-        if (fingerprint(ids) !== fingerprint(previous)) {
-          send(ids);
+        const fp = (list) => [...list].sort().join(",");
+        if (fp(ids) !== fp(previous)) {
+          sendFullFrameConfig(ids);
           return;
         }
-        const step = fingerprint(failed) !== fingerprint(previous) ? failed : ids.slice(0, -1);
-        if (step.length === 0) {
-          console.error(
-            `[RealtimeProvider] E_OVERLAY_RERENDER_UNAVAILABLE: cannot force a full-frame re-render of ${failed.join(", ")} (single-mockup session); it updates on the next edit.`
-          );
-          send(ids);
-          return;
+        if (serverStampsVersionsRef.current) {
+          sendFullFrameConfig(ids);
+          pendingRerenderRef.current = failed;
+          if (rerenderRaw(failed)) return;
+          pendingRerenderRef.current = [];
         }
-        send(step);
-        send(ids);
+        forceRerenderByConfig(failed);
       }, 0);
     },
-    [sendConfigRaw]
+    [sendFullFrameConfig, forceRerenderByConfig, rerenderRaw]
   );
   const maybeFlipCrop = useCallback10(() => {
     if (!croppedDeliveryEnabled || !cropCapableRef.current) return;
@@ -5972,6 +6005,10 @@ function RealtimeProvider({
         else merged.push(result);
       });
       mockupResultsRef.current = merged;
+      if (pendingRerenderRef.current.length > 0) {
+        const delivered = new Set(results.map((r) => r.mockupId));
+        pendingRerenderRef.current = pendingRerenderRef.current.filter((id) => !delivered.has(id));
+      }
       const clearedPlacements = /* @__PURE__ */ new Set();
       results.forEach((result) => {
         const wasPending = pendingMockupIdsRef.current.has(result.mockupId);
@@ -6059,6 +6096,22 @@ function RealtimeProvider({
         if (gen !== sceneGenRef.current || compositeQueueRef.current.has(result.mockupId) || processedFrameRef.current.get(result.mockupId) !== result.imageUrl) {
           return;
         }
+        const message = err instanceof Error ? err.message : String(err);
+        if (result.imageUrl.startsWith("blob:") && message.startsWith("E_OVERLAY_FRAME_LOAD") && message.includes(result.imageUrl.slice(0, 160))) {
+          const failedUrl = result.imageUrl;
+          setTimeout(() => {
+            if (gen !== sceneGenRef.current) return;
+            if (compositeQueueRef.current.has(result.mockupId)) return;
+            if (processedFrameRef.current.get(result.mockupId) !== failedUrl) return;
+            console.error(
+              `[RealtimeProvider] E_OVERLAY_COMPOSITE_FAILED: frame for ${result.mockupId} failed to load and no newer frame arrived within ${FRAME_SUPERSEDE_GRACE_MS} ms \u2014 full-frame delivery for the rest of this session.`,
+              err
+            );
+            cropCapableRef.current = false;
+            rerenderFullFrame(result.mockupId);
+          }, FRAME_SUPERSEDE_GRACE_MS);
+          return;
+        }
         console.error(
           "[RealtimeProvider] E_OVERLAY_COMPOSITE_FAILED: cropped-frame composite failed \u2014 full-frame delivery for the rest of this session.",
           err
@@ -6093,6 +6146,9 @@ function RealtimeProvider({
     }
     console.log(`[RTP] rawMockupResults changed: ${rawMockupResults.length} result(s)`, rawMockupResults.map((r) => `${r.mockupId}${r.imageUrl ? " \u2713url" : " \u2717NO-URL"}${r.cropRect ? " [crop]" : ""}`));
     const displayable = [];
+    if (!serverStampsVersionsRef.current && rawMockupResults.some((r) => r.versions && typeof r.versions === "object")) {
+      serverStampsVersionsRef.current = true;
+    }
     rawMockupResults.forEach((result) => {
       if (!result.imageUrl) {
         console.log(`[RTP] Result for ${result.mockupId} has NO imageUrl \u2014 not caching, pending NOT cleared`);
@@ -6575,6 +6631,9 @@ function RealtimeProvider({
   const getLastSentVersionRef = useRef12(getLastSentVersion);
   getLastSentVersionRef.current = getLastSentVersion;
   const getCanvasVersion = useCallback10(() => getLastSentVersionRef.current?.() ?? 0, []);
+  const getLatestSentVersionsRef = useRef12(getLatestSentVersions);
+  getLatestSentVersionsRef.current = getLatestSentVersions;
+  const getLatestSentVersionsStable = useCallback10(() => getLatestSentVersionsRef.current?.() ?? {}, []);
   const stableSubscribePipelineSettled = useCallback10(
     (callback) => {
       return subscribePipelineSettledRef.current(callback);
@@ -6624,6 +6683,7 @@ function RealtimeProvider({
       getMockupUrl: getMockupUrl3,
       getMockupUrls,
       getCanvasVersion,
+      getLatestSentVersions: getLatestSentVersionsStable,
       isMockupLoading,
       registerBlobUrl,
       // WebRTC streaming
@@ -6656,6 +6716,7 @@ function RealtimeProvider({
       getMockupUrl3,
       getMockupUrls,
       getCanvasVersion,
+      getLatestSentVersionsStable,
       isMockupLoading,
       registerBlobUrl
     ]
@@ -10451,6 +10512,8 @@ var HeroProductImage = memo3(function HeroProductImage2({
     };
   }, [mode, realtimeContext?.subscribePendingBlob, placement]);
   const renderVersionRef = useRef23(0);
+  const renderVersionsRef = useRef23(null);
+  const getLatestSentVersions = realtimeContext?.getLatestSentVersions;
   const refusalCodeRef = useRef23(null);
   refusalCodeRef.current = unavailable?.code ?? null;
   const sessionErrorCodeRef = useRef23(null);
@@ -10467,11 +10530,13 @@ var HeroProductImage = memo3(function HeroProductImage2({
       return;
     }
     const rendered = renderVersionRef.current;
-    const behind = rendered < canvas;
+    const versions = renderVersionsRef.current;
+    const sent = versions ? getLatestSentVersions?.() : void 0;
+    const behind = versions && sent ? Object.entries(sent).some(([placement2, v]) => (versions[placement2] ?? -1) < v) : rendered < canvas;
     node.dataset.canvasVersion = String(canvas);
     node.dataset.renderVersion = String(rendered);
     node.dataset.renderState = refusalCodeRef.current || behind && sessionErrorCodeRef.current ? "refused" : behind ? "stale" : "current";
-  }, [getCanvasVersion]);
+  }, [getCanvasVersion, getLatestSentVersions]);
   useEffect32(() => {
     applyRenderStamp();
   });
@@ -10481,8 +10546,9 @@ var HeroProductImage = memo3(function HeroProductImage2({
     if (!actualMockupId || !subscribeSent || !subscribeResult) return;
     const offSent = subscribeSent(() => applyRenderStamp());
     const offResult = subscribeResult(actualMockupId, (result) => {
-      if (typeof result?.requestVersion === "number" && result.requestVersion > renderVersionRef.current) {
+      if (typeof result?.requestVersion === "number" && result.requestVersion >= renderVersionRef.current) {
         renderVersionRef.current = result.requestVersion;
+        renderVersionsRef.current = result.versions ?? null;
       }
       applyRenderStamp();
     });