@snowcone-app/ui 0.4.10 → 0.4.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snowcone-app/ui",
-  "version": "0.4.10",
+  "version": "0.4.12",
   "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());

package/src/services/CanvasExportService.ts

@@ -394,8 +394,13 @@ class CanvasExportService {
   handleStateChange = (state: any): void => {
     if (!state) return;
 
+    // An empty design is skipped only BEFORE anything has been sent this
+    // session (the initial mount of a blank editor — the PDP already shows the
+    // blank product). Once art has rendered, an empty state is a real edit:
+    // deleting/undoing the last element must re-render the blank product, or
+    // the mockup keeps showing art that is no longer in the design.
     const hasElements = state.elements?.length > 0;
-    if (!hasElements) return;
+    if (!hasElements && !this.jsonModeSentSuccessfully) return;
 
     // Don't send or cache state while any image is still loading —
     // the serializer would skip it and the server would render without artwork
@@ -507,6 +512,10 @@ class CanvasExportService {
       this.stateChangeThrottleTimeout = null;
     }
     this.stateChangeLastSendTime = 0;
+    // A new editor session starts with nothing sent: its first empty state
+    // is a blank mount again, not a deletion (see handleStateChange).
+    this.jsonModeSentSuccessfully = false;
+    this.pendingCanvasState = null;
     // Also clear ImageBitmap cache on full reset
     if (this.clearImageBitmapCache) {
       this.clearImageBitmapCache();

package/src/services/__tests__/CanvasExportService.emptyState.test.ts

@@ -0,0 +1,48 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { canvasExportService } from "../CanvasExportService";
+
+const state = (elements: unknown[]) => ({
+  elements,
+  artboards: [{ name: "Front", width: 100, height: 100 }],
+  activeArtboard: "Front",
+});
+
+describe("CanvasExportService — empty designs", () => {
+  let sendCanvasState: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.spyOn(console, "log").mockImplementation(() => {});
+    canvasExportService.reset();
+    sendCanvasState = vi.fn(() => true);
+    canvasExportService.configure({
+      isRealtimeEnabled: true,
+      sendCanvasState: sendCanvasState as never,
+      serializeStateForServer: ((s: ReturnType<typeof state>) => s) as never,
+      mockupCount: 1,
+      placementName: "Front",
+    });
+  });
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  it("ignores an empty design before anything was ever sent (blank editor mount)", () => {
+    canvasExportService.handleStateChange(state([]));
+    vi.runAllTimers();
+    expect(sendCanvasState).not.toHaveBeenCalled();
+  });
+
+  it("sends an empty design once art has rendered — deleting the last element re-renders the blank product", () => {
+    canvasExportService.handleStateChange(state([{ type: "shape" }]));
+    vi.runAllTimers();
+    expect(sendCanvasState).toHaveBeenCalledTimes(1);
+
+    canvasExportService.handleStateChange(state([]));
+    vi.runAllTimers();
+    expect(sendCanvasState).toHaveBeenCalledTimes(2);
+    expect((sendCanvasState.mock.calls[1][1] as { elements: unknown[] }).elements).toEqual([]);
+  });
+});