@snowcone-app/ui 0.9.4 → 0.9.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snowcone-app/ui",
-  "version": "0.9.4",
+  "version": "0.9.6",
   "description": "React components for merchandise visualization and customization",
   "keywords": [
     "react",

package/src/patterns/RealtimeProvider.tsx

@@ -62,6 +62,11 @@ const DEFAULT_ARTBOARD_SIZE = 2000;
 // Enforce a conservative cap to prevent memory crashes
 const MAX_CONCURRENT_BLOBS = 5;
 
+/** How long a frame whose blob: URL was revoked waits for its newer frame before counting as a real failure. */
+const FRAME_SUPERSEDE_GRACE_MS = 2000;
+/** The box accepts one `rerender` per this many ms (rc#840; more are refused with E_RERENDER_RATE_LIMITED). */
+const RERENDER_MIN_INTERVAL_MS = 550;
+
 /** `current` in order, then any of `extra` not already in it. */
 function mergeMockupIds(current: readonly string[], extra: readonly string[]): string[] {
   const out = [...current];
@@ -614,6 +619,10 @@ export function RealtimeProvider({
   // Mockups a `rerender` was sent for, until it is answered or refused.
   const pendingRerenderRef = useRef<string[]>([]);
   const forceRerenderByConfigRef = useRef<((failed: string[]) => void) | null>(null);
+  // Pacing of `rerender` requests (the box allows one per 500 ms).
+  const lastRerenderAtRef = useRef(0);
+  const rerenderQueueRef = useRef<string[]>([]);
+  const rerenderTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   // Cropped frames that could not be shown, waiting for one batched
   // full-frame re-render (see rerenderFullFrame).
   const fullFrameRerenderIdsRef = useRef<Set<string>>(new Set());
@@ -740,6 +749,35 @@ export function RealtimeProvider({
   );
   forceRerenderByConfigRef.current = forceRerenderByConfig;
 
+  /**
+   * Ask the box to re-render `ids`, never faster than it allows (one request
+   * per RERENDER_MIN_INTERVAL_MS; it refuses more with E_RERENDER_RATE_LIMITED,
+   * prod 2026-11-11). Requests inside the interval wait for the remainder and
+   * go out as ONE request with every picture that failed meanwhile.
+   */
+  const sendRerenderPaced = useCallback(
+    (ids: string[]) => {
+      rerenderQueueRef.current = mergeMockupIds(rerenderQueueRef.current, ids);
+      if (rerenderTimerRef.current) return;
+      const wait = Math.max(0, lastRerenderAtRef.current + RERENDER_MIN_INTERVAL_MS - Date.now());
+      const flush = () => {
+        rerenderTimerRef.current = null;
+        const batch = rerenderQueueRef.current;
+        rerenderQueueRef.current = [];
+        if (batch.length === 0) return;
+        lastRerenderAtRef.current = Date.now();
+        pendingRerenderRef.current = mergeMockupIds(pendingRerenderRef.current, batch);
+        if (!rerenderRaw(batch)) {
+          pendingRerenderRef.current = [];
+          forceRerenderByConfigRef.current?.(batch);
+        }
+      };
+      if (wait === 0) flush();
+      else rerenderTimerRef.current = setTimeout(flush, wait);
+    },
+    [rerenderRaw]
+  );
+
   const rerenderFullFrame = useCallback(
     (mockupId: string) => {
       fullFrameRerenderIdsRef.current.add(mockupId);
@@ -766,14 +804,13 @@ export function RealtimeProvider({
           // for exactly the failed pictures. A refusal (E_RERENDER_*) falls
           // back to the config way (see onError).
           sendFullFrameConfig(ids);
-          pendingRerenderRef.current = failed;
-          if (rerenderRaw(failed)) return;
-          pendingRerenderRef.current = [];
+          sendRerenderPaced(failed);
+          return;
         }
         forceRerenderByConfig(failed);
       }, 0);
     },
-    [sendFullFrameConfig, forceRerenderByConfig, rerenderRaw]
+    [sendFullFrameConfig, forceRerenderByConfig, sendRerenderPaced]
   );
 
   /** Flip to cropped delivery once every configured mockup has a frozen
@@ -943,6 +980,32 @@ export function RealtimeProvider({
         ) {
           return;
         }
+        // The FRAME (not the background) failed to load from a revoked blob:
+        // URL. The SDK revokes a mockup's frame only when that mockup's next
+        // frame arrives, so the newer frame exists even if React state hasn't
+        // delivered it here yet (prod 2026-11-11, phone: this race switched
+        // cropped delivery off for the whole session). Wait for it; if none
+        // shows up, it really failed.
+        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 — 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 — full-frame delivery for the rest of this session.",
           err

package/src/patterns/__tests__/RealtimeProvider.cropDelivery.test.tsx

@@ -412,5 +412,70 @@ describe("RealtimeProvider cropped delivery", () => {
     expect(h.rerender).not.toHaveBeenCalled();
     errSpy.mockRestore();
   });
+
+  it("a frame whose blob: URL was revoked waits for its newer frame instead of switching the session to full frames (prod, phone, 2026-11-11)", async () => {
+    const { rerender } = render(<Harness version={1} />);
+    await waitFor(() => expect(h.sendConfig).toHaveBeenCalled());
+    await seedAndFlip(rerender);
+    h.sendConfig.mockClear();
+    const errSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    // v3's frame was revoked by the SDK (its v4 already arrived there) before React state delivered v4 here.
+    h.compositeCroppedFrame.mockImplementationOnce(() =>
+      Promise.reject(new Error("E_OVERLAY_FRAME_LOAD: image failed to load: blob:v3-m1"))
+    );
+    h.state.results = [croppedResult("m1", "blob:v3-m1"), fullResult("m2", "https://r/m2-full")];
+    await act(async () => rerender(<Harness version={4} />));
+    // v4 lands within the grace window and composites.
+    h.state.results = [croppedResult("m1", "blob:v4-m1"), fullResult("m2", "https://r/m2-full")];
+    await act(async () => rerender(<Harness version={5} />));
+    await act(async () => { await new Promise((r) => setTimeout(r, 2300)); });
+    expect(h.compositeCroppedFrame).toHaveBeenLastCalledWith(expect.objectContaining({ frameUrl: "blob:v4-m1" }));
+    expect(h.sendConfig).not.toHaveBeenCalled(); // cropped delivery stays on, nothing re-rendered
+    errSpy.mockRestore();
+  });
+
+  it("a revoked frame with no newer frame within the grace window is a real failure: full-frame re-render", async () => {
+    const { rerender } = render(<Harness version={1} />);
+    await waitFor(() => expect(h.sendConfig).toHaveBeenCalled());
+    await seedAndFlip(rerender);
+    h.sendConfig.mockClear();
+    const errSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    h.compositeCroppedFrame.mockImplementationOnce(() =>
+      Promise.reject(new Error("E_OVERLAY_FRAME_LOAD: image failed to load: blob:v3-m1"))
+    );
+    h.state.results = [croppedResult("m1", "blob:v3-m1"), fullResult("m2", "https://r/m2-full")];
+    await act(async () => rerender(<Harness version={4} />));
+    await act(async () => { await new Promise((r) => setTimeout(r, 200)); });
+    expect(h.sendConfig).not.toHaveBeenCalled(); // still inside the grace window
+    await act(async () => { await new Promise((r) => setTimeout(r, 2100)); });
+    await waitFor(() => expect(sentConfigs().at(-1)?.mockupIds).toEqual(["m1", "m2"]));
+    expect(sentConfigs().every((c) => c.overlayCrop === undefined)).toBe(true);
+    errSpy.mockRestore();
+  });
+
+  it("never asks the box to rerender faster than it allows: failures 100 ms apart become 2 requests >= 500 ms apart", async () => {
+    const { rerender } = render(<Harness version={1} />);
+    await waitFor(() => expect(h.sendConfig).toHaveBeenCalled());
+    const v = { versions: { Front: 1 } };
+    h.state.results = [{ ...fullResult("m1", "https://r/m1-full"), ...v }, { ...fullResult("m2", "https://r/m2-full"), ...v }];
+    await act(async () => rerender(<Harness version={2} />));
+    await waitFor(() => expect(sentConfigs().some((c) => c.overlayCrop === "auto")).toBe(true));
+    const errSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+    h.compositeCroppedFrame.mockRejectedValue(new Error("E_OVERLAY_ENCODE_FAILED"));
+    const calls: number[] = [];
+    h.rerender.mockImplementation(() => { calls.push(Date.now()); return true; });
+
+    h.state.results = [croppedResult("m1", "https://r/m1-crop-a")];
+    await act(async () => rerender(<Harness version={3} />));
+    await act(async () => { await new Promise((r) => setTimeout(r, 100)); });
+    h.state.results = [croppedResult("m1", "https://r/m1-crop-a"), croppedResult("m2", "https://r/m2-crop-a")];
+    await act(async () => rerender(<Harness version={4} />));
+    await act(async () => { await new Promise((r) => setTimeout(r, 900)); });
+
+    expect(h.rerender.mock.calls.map((c) => c[0])).toEqual([["m1"], ["m2"]]);
+    expect(calls[1] - calls[0]).toBeGreaterThanOrEqual(500);
+    errSpy.mockRestore();
+  });
 });