@snowcone-app/ui 0.4.11 → 0.4.12

package/package.json

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

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([]);
+  });
+});