@snowcone-app/ui 0.4.10 → 0.4.11

package/package.json

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

package/src/patterns/RealtimeProvider.tsx

@@ -773,8 +773,19 @@ export function RealtimeProvider({
         if (firstSight && sessionLive) {
           processedFrameRef.current.set(result.mockupId, result.imageUrl);
           // Seed/refresh the frozen background — the freshest full frame is
-          // always the best composite base.
-          backgroundsRef.current.set(result.mockupId, { url: result.imageUrl });
+          // always the best composite base. Decode it NOW, not at composite
+          // time: with ws binary delivery `imageUrl` is the SDK's live blob:
+          // URL for this mockup, and the SDK revokes it the moment the next
+          // frame for the same mockup (the first cropped one) arrives. A
+          // lazily-loaded background would then fail with
+          // E_OVERLAY_FRAME_LOAD and kill cropped delivery for the session
+          // (observed: every edit cost 3 extra full renders). A decoded
+          // HTMLImageElement keeps its pixels after the URL is revoked.
+          const imgPromise = loadImageElement(result.imageUrl);
+          imgPromise.catch(() => {
+            /* surfaced by runComposite when it awaits the promise */
+          });
+          backgroundsRef.current.set(result.mockupId, { url: result.imageUrl, imgPromise });
         }
         // Full frames re-deliver on every run (matches pre-crop behavior —
         // consumers dedupe by URL; delivery also clears pending state).

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

@@ -158,6 +158,27 @@ describe("RealtimeProvider cropped delivery", () => {
     await seedAndFlip(rerender);
   });
 
+  it("decodes the frozen background at seed time, before the SDK can revoke its blob: URL", async () => {
+    // With ws binary delivery the full frame's imageUrl is the SDK's live
+    // blob: URL, revoked when the next frame for that mockup arrives. The
+    // background must be decoded while the URL is still alive.
+    const { rerender } = render(<Harness version={1} />);
+    await waitFor(() => expect(h.sendConfig).toHaveBeenCalled());
+    h.state.results = [fullResult("m1", "blob:live-m1"), fullResult("m2", "blob:live-m2")];
+    await act(async () => rerender(<Harness version={3} />));
+    await waitFor(() => {
+      expect(h.loadImageElement).toHaveBeenCalledWith("blob:live-m1");
+      expect(h.loadImageElement).toHaveBeenCalledWith("blob:live-m2");
+    });
+    // ...and not again at composite time — the decoded element is reused.
+    const loadsAfterSeed = h.loadImageElement.mock.calls.length;
+    await waitFor(() => expect(sentConfigs().some((c) => c.overlayCrop === "auto")).toBe(true));
+    h.state.results = [croppedResult("m1", "blob:live-m1-crop"), fullResult("m2", "blob:live-m2")];
+    await act(async () => rerender(<Harness version={4} />));
+    await waitFor(() => expect(h.compositeCroppedFrame).toHaveBeenCalled());
+    expect(h.loadImageElement.mock.calls.length).toBe(loadsAfterSeed);
+  });
+
   it("composites cropped frames — consumers only ever see full-frame URLs", async () => {
     const { rerender } = render(<Harness version={1} />);
     await waitFor(() => expect(h.sendConfig).toHaveBeenCalled());