@snowcone-app/sdk 0.1.12 → 0.1.14

package/dist/{websocket-B8_XAwWx.d.cts → websocket-Dum3OooZ.d.ts}

@@ -212,8 +212,13 @@ interface WebSocketConfig {
     productId: string;
     mockupIds: string[];
     variantId: string;
-    accountId: string;
-    sig: string;
+    shop: string;
+    /**
+     * Legacy URL seal. Only sent on the unauthenticated (shim) path. When a
+     * tokenProvider is set, the session is authorized by the grant token on the
+     * WS URL and the server self-signs the render, so no seal is needed.
+     */
+    seal?: string;
     width: number;
     /** Aspect ratio for mockup rendering (e.g. '2:3' for portrait). Server default: '16:9' */
     ar?: string;
@@ -228,6 +233,12 @@ interface MockupResult {
     requestVersion?: number;
     /** The placement this mockup corresponds to */
     placement?: string;
+    /** Server-side PIXI render time in ms */
+    renderMs?: number;
+    /** Time from blob received to render start in ms */
+    blobToRenderMs?: number;
+    /** Server-side canvas render timing breakdown (present when canvas_state was used) */
+    canvasRenderTiming?: any;
 }
 interface WebSocketMessage {
     type: string;
@@ -242,6 +253,21 @@ interface WebSocketMessage {
     missingPlacements?: string[];
     /** The request version this response corresponds to (for stale detection) */
     requestVersion?: number;
+    /** Server-side PIXI render time in ms */
+    renderMs?: number;
+    /** Time from blob received to render start in ms */
+    blobToRenderMs?: number;
+    /** Server-side canvas render timing (only present when canvas_state was used) */
+    canvasRenderTiming?: {
+        poolAcquireMs: number;
+        imageFetchMs: number;
+        fontLoadMs: number;
+        canvasRenderMs: number;
+        blobConvertMs: number;
+        base64Ms: number;
+        totalWorkerMs: number;
+        totalMs: number;
+    };
 }
 interface RealtimeMockupState {
     isConnected: boolean;
@@ -277,19 +303,33 @@ declare class RealtimeMockupService {
     private logs;
     private lastError;
     private callbacks;
+    private lastBlobSentAt;
     private canvasBlobs;
+    private canvasStates;
     private colors;
     private lastSendTime;
     private throttleTimeouts;
     private requestVersion;
     private lastSentVersion;
     private latestSentVersionByPlacement;
+    private latestAcceptedVersionByPlacement;
     private sendVersionInBlob;
+    private tokenProvider?;
+    private renewTimer;
     constructor(wsUrl?: string);
     setCallbacks(callbacks: RealtimeMockupCallbacks): void;
+    /** Provide a grant fetcher to authorize the session (per-shop, renewable). */
+    setTokenProvider(fn: () => Promise<{
+        token: string;
+        expiresAt: number;
+    }>): void;
     getState(): RealtimeMockupState;
     private addLog;
     connect(): void;
+    private openSocket;
+    private scheduleRenew;
+    private clearRenew;
+    private renew;
     private handleMessage;
     disconnect(): void;
     sendConfig(config: WebSocketConfig): boolean;
@@ -299,12 +339,24 @@ declare class RealtimeMockupService {
      * This is the preferred method for priority-based rendering.
      */
     updateMockupIds(mockupIds: string[]): boolean;
+    /**
+     * Update render width without changing other config.
+     * Used for low-res preview during rapid edits (e.g., 600 while dragging, 1200 on release).
+     * Preserves blobs since product/variant don't change.
+     */
+    updateWidth(width: number): boolean;
     /**
      * Update placementSettings without changing other config.
      * Used to override scaleMode when canvas editor is active.
      */
     updatePlacementSettings(placementSettings: Record<string, PlacementSettings>): boolean;
     sendCanvasBlob(placement: string, blob: Blob, mockupCount?: number, baseThrottleMs?: number, notifyCallback?: boolean): boolean;
+    /**
+     * Send canvas state JSON for server-side rendering.
+     * Alternative to sendCanvasBlob — the server renders the PNG instead of the client.
+     */
+    sendCanvasState(placement: string, state: object, mockupCount?: number, baseThrottleMs?: number): boolean;
+    private sendCanvasStateImmediately;
     private sendBlobImmediately;
     /**
      * Enable sending version number in blob messages.
@@ -333,4 +385,4 @@ declare class RealtimeMockupService {
     clearMockups(): void;
 }
 
-export { AdapterRegistry as A, type Combination as C, type EventHandler as E, type FrameworkAdapter as F, type MockupResult as M, type OptionAttribute as O, type ProductComponentContext as P, type RenderResult as R, type WebSocketConfig as W, type OptionSelection as a, type ComponentProps as b, type ComponentDescriptor as c, type ComponentState as d, type ComponentContext as e, type ComponentLifecycleHooks as f, type FrameworkUtilities as g, createComponent as h, defineComponent as i, adapterRegistry as j, RealtimeMockupService as k, type WebSocketMessage as l, type RealtimeMockupState as m, type RealtimeMockupCallbacks as n, computeDisabledChoices as o, deriveDefaultSelection as p, getPricePreview as q, resolveBestCombination as r, findBestCombination as s, isOptionAvailable as t, type PlacementSettings as u };
+export { AdapterRegistry as A, type Combination as C, type EventHandler as E, type FrameworkAdapter as F, type MockupResult as M, type OptionAttribute as O, type ProductComponentContext as P, type RealtimeMockupCallbacks as R, type WebSocketConfig as W, type OptionSelection as a, type ComponentProps as b, type ComponentDescriptor as c, type ComponentState as d, type ComponentContext as e, type ComponentLifecycleHooks as f, type FrameworkUtilities as g, RealtimeMockupService as h, type RealtimeMockupState as i, type RenderResult as j, type WebSocketMessage as k, adapterRegistry as l, computeDisabledChoices as m, createComponent as n, defineComponent as o, deriveDefaultSelection as p, findBestCombination as q, getPricePreview as r, isOptionAvailable as s, resolveBestCombination as t, type PlacementSettings as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snowcone-app/sdk",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "description": "Merch Javascript SDK for product mockups and print-on-demand",
   "keywords": [
     "merch",
@@ -27,17 +27,20 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
     },
     "./react": {
       "types": "./dist/react.d.ts",
       "import": "./dist/react.js",
-      "require": "./dist/react.cjs"
+      "require": "./dist/react.cjs",
+      "default": "./dist/react.js"
     },
     "./dev-fetcher": {
       "types": "./dist/dev-fetcher.d.ts",
       "import": "./dist/dev-fetcher.js",
-      "require": "./dist/dev-fetcher.cjs"
+      "require": "./dist/dev-fetcher.cjs",
+      "default": "./dist/dev-fetcher.js"
     }
   },
   "files": [
@@ -45,12 +48,10 @@
     "README.md",
     "CHANGELOG.md"
   ],
-  "sideEffects": false,
-  "scripts": {
-    "build": "tsup src/index.ts src/react.ts src/dev-fetcher.ts --format esm,cjs --dts --external zod --external react",
-    "clean": "rm -rf dist",
-    "typecheck": "tsc --project ./tsconfig.json --noEmit"
+  "publishConfig": {
+    "access": "public"
   },
+  "sideEffects": false,
   "peerDependencies": {
     "zod": "^3.0.0",
     "react": "^18 || ^19"
@@ -62,11 +63,20 @@
   },
   "dependencies": {},
   "devDependencies": {
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.3.0",
     "tsup": "^8.1.0",
     "typescript": "^5.5.4",
-    "zod": "^3.23.8"
+    "vitest": "^2.0.5",
+    "zod": "^3.23.8",
+    "@snowcone-app/mockup-url": "0.1.0"
   },
   "engines": {
     "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts src/react.ts src/dev-fetcher.ts --format esm,cjs --dts --external zod --external react",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --project ./tsconfig.json --noEmit"
   }
-}
+}

package/dist/chunk-HOYSZQET.js

@@ -1,476 +0,0 @@
-// src/realtime/websocket.ts
-var RealtimeMockupService = class {
-  constructor(wsUrl = "wss://WS_URL_NOT_CONFIGURED.invalid/realtime") {
-    this.wsUrl = wsUrl;
-  }
-  ws = null;
-  config = null;
-  configSent = false;
-  sessionId = null;
-  isConfigured = false;
-  mockupResults = [];
-  status = "Disconnected";
-  logs = [];
-  lastError = null;
-  callbacks = {};
-  canvasBlobs = /* @__PURE__ */ new Map();
-  colors = /* @__PURE__ */ new Map();
-  lastSendTime = {};
-  throttleTimeouts = {};
-  // Request versioning to detect stale responses
-  // Increments each time we send a blob, so we can ignore old server responses
-  requestVersion = 0;
-  lastSentVersion = 0;
-  // Track latest sent version per placement to detect stale responses
-  latestSentVersionByPlacement = {};
-  // Feature flag: server now supports version in blob message
-  sendVersionInBlob = true;
-  setCallbacks(callbacks) {
-    this.callbacks = callbacks;
-  }
-  getState() {
-    return {
-      isConnected: this.ws?.readyState === WebSocket.OPEN,
-      sessionId: this.sessionId,
-      isConfigured: this.isConfigured,
-      mockupResults: [...this.mockupResults],
-      status: this.status,
-      logs: [...this.logs],
-      lastError: this.lastError
-    };
-  }
-  addLog(message, type = "info") {
-    const timestamp = (/* @__PURE__ */ new Date()).toLocaleTimeString();
-    const prefix = type === "sent" ? "\u2192 SENT: " : type === "received" ? "\u2190 RECEIVED: " : "\u2022 ";
-    const logMessage = `[${timestamp}] ${prefix}${message}`;
-    this.logs.push(logMessage);
-    this.callbacks.onLog?.(message, type);
-  }
-  connect() {
-    if (this.ws?.readyState === WebSocket.OPEN) {
-      return;
-    }
-    this.addLog(`Connecting to ${this.wsUrl}...`);
-    this.ws = new WebSocket(this.wsUrl);
-    this.ws.onopen = () => {
-      this.addLog("WebSocket connection opened");
-      this.status = "Connected";
-    };
-    this.ws.onmessage = (event) => {
-      try {
-        const data = JSON.parse(event.data);
-        this.addLog(JSON.stringify(data, null, 2), "received");
-        this.handleMessage(data);
-      } catch (error) {
-        this.addLog(`Received non-JSON message: ${event.data}`, "received");
-      }
-    };
-    this.ws.onclose = (event) => {
-      this.addLog(`WebSocket connection closed (code: ${event.code})`);
-      this.status = "Disconnected";
-      this.sessionId = null;
-      this.isConfigured = false;
-      this.configSent = false;
-      this.callbacks.onDisconnected?.();
-    };
-    this.ws.onerror = (error) => {
-      this.addLog(`WebSocket error: ${error}`);
-      this.status = "Disconnected";
-    };
-  }
-  handleMessage(data) {
-    switch (data.type) {
-      case "connected":
-        this.sessionId = data.sessionId || null;
-        this.status = `Connected (Session: ${data.sessionId || "N/A"})`;
-        this.addLog(`\u2705 Session established: ${data.sessionId}`);
-        if (data.sessionId) {
-          this.callbacks.onConnected?.(data.sessionId);
-        }
-        if (this.config && !this.configSent) {
-          this.addLog("\u{1F4E4} Auto-sending cached config after connection...");
-          setTimeout(() => {
-            if (this.config && !this.configSent) {
-              this.sendConfig(this.config);
-            }
-          }, 100);
-        }
-        break;
-      case "config_received":
-      case "configured":
-        this.isConfigured = true;
-        this.status = "Configured";
-        this.addLog("\u2705 Configuration accepted! You can now send blobs.");
-        this.callbacks.onConfigReceived?.();
-        const cachedCanvasCount = this.canvasBlobs.size;
-        const cachedColorCount = this.colors.size;
-        if (cachedCanvasCount > 0 || cachedColorCount > 0) {
-          this.addLog(`\u{1F4E6} Auto-sending cached data: ${cachedCanvasCount} canvas blobs, ${cachedColorCount} colors`);
-          setTimeout(() => {
-            this.canvasBlobs.forEach((blob, placement) => {
-              this.sendCanvasBlob(placement, blob, 1, 0, false);
-            });
-            this.colors.forEach((color, placement) => {
-              this.sendColorBlob(placement, color);
-            });
-          }, 100);
-        }
-        break;
-      case "blob_received":
-        const placementName = data.placement || "unknown";
-        const missingCount = data.missingPlacements?.length || 0;
-        this.addLog(`\u2705 Blob received for "${placementName}" - ${missingCount} placements still needed`);
-        this.callbacks.onBlobReceived?.(placementName);
-        break;
-      case "have_all_blobs":
-        this.addLog("\u{1F389} All blobs received! Starting render...");
-        break;
-      case "rendering_started":
-        this.addLog("\u{1F3A8} Mockup rendering has started...");
-        break;
-      case "mockup_rendered":
-        if (data.imageUrl && data.mockupId) {
-          const responseVersion = data.requestVersion;
-          const responsePlacement = data.placement;
-          if (responseVersion !== void 0 && responsePlacement) {
-            const latestVersion = this.latestSentVersionByPlacement[responsePlacement];
-            if (latestVersion !== void 0 && responseVersion < latestVersion) {
-              this.addLog(`\u23ED\uFE0F Ignoring stale mockup v${responseVersion} for "${responsePlacement}" (latest sent: v${latestVersion})`);
-              break;
-            }
-          }
-          const mockupResult = {
-            mockupId: data.mockupId,
-            imageUrl: data.imageUrl,
-            renderUrl: data.renderUrl || data.imageUrl,
-            imageSize: data.imageSize || 0,
-            requestVersion: responseVersion,
-            placement: responsePlacement
-          };
-          const existingIndex = this.mockupResults.findIndex((m) => m.mockupId === data.mockupId);
-          if (existingIndex >= 0) {
-            this.mockupResults[existingIndex] = mockupResult;
-          } else {
-            this.mockupResults.push(mockupResult);
-          }
-          this.addLog(`\u2705 Mockup rendered v${responseVersion ?? "?"} for "${responsePlacement ?? "?"}" (${data.imageSize} bytes)`);
-          this.callbacks.onMockupRendered?.(mockupResult);
-        } else {
-          const missing = [
-            !data.imageUrl && "imageUrl",
-            !data.mockupId && "mockupId"
-          ].filter(Boolean);
-          this.addLog(`\u26A0\uFE0F mockup_rendered message dropped: missing required fields [${missing.join(", ")}]. Full data keys: [${Object.keys(data).join(", ")}]`);
-        }
-        break;
-      case "all_mockups_rendered":
-        if (data.mockups) {
-          const freshMockups = data.mockups.filter((mockup) => {
-            if (mockup.requestVersion !== void 0 && mockup.placement) {
-              const latestVersion = this.latestSentVersionByPlacement[mockup.placement];
-              if (latestVersion !== void 0 && mockup.requestVersion < latestVersion) {
-                this.addLog(`\u23ED\uFE0F Filtering stale mockup v${mockup.requestVersion} for "${mockup.placement}" (latest: v${latestVersion})`);
-                return false;
-              }
-            }
-            return true;
-          });
-          this.mockupResults = freshMockups;
-          this.addLog(`\u{1F389} All mockups rendered: ${freshMockups.length} fresh (${data.mockups.length - freshMockups.length} stale filtered)`);
-          this.callbacks.onAllMockupsRendered?.(freshMockups);
-        } else {
-          this.addLog(`\u26A0\uFE0F all_mockups_rendered message dropped: missing 'mockups' array. Full data keys: [${Object.keys(data).join(", ")}]`);
-        }
-        break;
-      case "error":
-        const errorMessage = data.message || "Unknown error occurred";
-        this.lastError = errorMessage;
-        this.addLog(`\u274C Server Error: ${errorMessage}`);
-        this.callbacks.onError?.(errorMessage);
-        break;
-      default:
-        this.addLog(`\u{1F914} Unknown message type: ${data.type}`, "received");
-        break;
-    }
-  }
-  disconnect() {
-    if (this.ws) {
-      this.ws.close();
-      this.ws = null;
-    }
-  }
-  sendConfig(config) {
-    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
-      this.addLog("WebSocket not connected, caching config");
-      this.config = config;
-      this.configSent = false;
-      return false;
-    }
-    if (!this.sessionId) {
-      this.addLog("WebSocket connected but no session yet, caching config");
-      this.config = config;
-      this.configSent = false;
-      return false;
-    }
-    const hasConfigChanged = !this.config || JSON.stringify(this.config) !== JSON.stringify(config);
-    if (this.configSent && !hasConfigChanged) {
-      this.addLog("Config already sent and unchanged, skipping duplicate");
-      return false;
-    }
-    if (this.configSent && hasConfigChanged) {
-      const isOnlyMockupIdsChange = this.config && this.config.productId === config.productId && this.config.variantId === config.variantId;
-      if (isOnlyMockupIdsChange) {
-        this.addLog("\u{1F504} MockupIds changed, keeping cached blobs (server will reuse)");
-        this.isConfigured = false;
-        this.mockupResults = [];
-      } else {
-        this.addLog("\u{1F504} Product/variant changed, full reset");
-        this.isConfigured = false;
-        this.mockupResults = [];
-        this.canvasBlobs.clear();
-        this.colors.clear();
-        this.lastSendTime = {};
-        Object.values(this.throttleTimeouts).forEach((timeout) => clearTimeout(timeout));
-        this.throttleTimeouts = {};
-        this.requestVersion = 0;
-        this.lastSentVersion = 0;
-        this.latestSentVersionByPlacement = {};
-        this.addLog("\u{1F9F9} Cleared all cached canvas/color data for new product");
-      }
-    }
-    this.config = config;
-    this.configSent = true;
-    const message = {
-      type: "config",
-      config
-    };
-    const messageStr = JSON.stringify(message);
-    this.addLog(`\u{1F4E4} Sending config: ${JSON.stringify(message, null, 2)}`, "sent");
-    this.ws.send(messageStr);
-    return true;
-  }
-  /**
-   * Update only the mockupIds without changing other config.
-   * Server will use already-cached blobs to render the requested mockups.
-   * This is the preferred method for priority-based rendering.
-   */
-  updateMockupIds(mockupIds) {
-    if (!this.config) {
-      this.addLog("Cannot update mockupIds: no config set");
-      return false;
-    }
-    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
-      this.addLog("Cannot update mockupIds: WebSocket not connected");
-      return false;
-    }
-    const updatedConfig = {
-      ...this.config,
-      mockupIds
-    };
-    this.addLog(`\u{1F3AF} Updating mockupIds to: [${mockupIds.join(", ")}]`);
-    return this.sendConfig(updatedConfig);
-  }
-  /**
-   * Update placementSettings without changing other config.
-   * Used to override scaleMode when canvas editor is active.
-   */
-  updatePlacementSettings(placementSettings) {
-    if (!this.config) {
-      this.addLog("Cannot update placementSettings: no config set");
-      return false;
-    }
-    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
-      this.addLog("Cannot update placementSettings: WebSocket not connected");
-      return false;
-    }
-    const updatedConfig = {
-      ...this.config,
-      placementSettings
-    };
-    return this.sendConfig(updatedConfig);
-  }
-  sendCanvasBlob(placement, blob, mockupCount = 1, baseThrottleMs = 1e3, notifyCallback = true) {
-    this.canvasBlobs.set(placement, blob);
-    if (!this.ws || this.ws.readyState !== WebSocket.OPEN || !this.isConfigured) {
-      return false;
-    }
-    if (baseThrottleMs <= 0) {
-      this.sendBlobImmediately(placement, blob, notifyCallback);
-      this.lastSendTime[placement] = Date.now();
-      return true;
-    }
-    const throttleMs = baseThrottleMs * mockupCount;
-    const now = Date.now();
-    const lastSendTime = this.lastSendTime[placement] || 0;
-    const timeSinceLastSend = now - lastSendTime;
-    const hasNeverSent = lastSendTime === 0;
-    if (hasNeverSent || timeSinceLastSend >= throttleMs) {
-      this.sendBlobImmediately(placement, blob, notifyCallback);
-      this.lastSendTime[placement] = now;
-    } else if (!this.throttleTimeouts[placement]) {
-      const delayTime = throttleMs - timeSinceLastSend;
-      this.throttleTimeouts[placement] = setTimeout(() => {
-        const latestBlob = this.canvasBlobs.get(placement);
-        if (latestBlob && this.ws?.readyState === WebSocket.OPEN && this.isConfigured) {
-          this.sendBlobImmediately(placement, latestBlob, notifyCallback);
-          this.lastSendTime[placement] = Date.now();
-        }
-        delete this.throttleTimeouts[placement];
-      }, delayTime);
-    }
-    return true;
-  }
-  sendBlobImmediately(placement, blob, notifyCallback = true) {
-    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
-    this.lastSentVersion = ++this.requestVersion;
-    this.latestSentVersionByPlacement[placement] = this.lastSentVersion;
-    const versionToSend = this.lastSentVersion;
-    const reader = new FileReader();
-    reader.onload = (e) => {
-      if (e.target?.result && this.ws) {
-        const imageBytes = new Uint8Array(e.target.result);
-        let combined;
-        if (this.sendVersionInBlob) {
-          const headerBytes = new TextEncoder().encode(`${placement}
-${versionToSend}
-`);
-          combined = new Uint8Array(headerBytes.length + imageBytes.length);
-          combined.set(headerBytes, 0);
-          combined.set(imageBytes, headerBytes.length);
-        } else {
-          const headerBytes = new TextEncoder().encode(`${placement}
-`);
-          combined = new Uint8Array(headerBytes.length + imageBytes.length);
-          combined.set(headerBytes, 0);
-          combined.set(imageBytes, headerBytes.length);
-        }
-        this.ws.send(combined.buffer);
-        this.addLog(`Sent canvas blob for placement "${placement}" (${imageBytes.length} bytes, v${versionToSend})`, "sent");
-        if (notifyCallback) {
-          this.callbacks.onBlobSent?.(placement);
-        }
-      }
-    };
-    reader.readAsArrayBuffer(blob);
-  }
-  /**
-   * Enable sending version number in blob messages.
-   * Call this once the server supports the new format: <placement>\n<version>\n<blob>
-   */
-  enableVersionInBlob(enabled = true) {
-    this.sendVersionInBlob = enabled;
-    this.addLog(`Version in blob ${enabled ? "enabled" : "disabled"}`);
-  }
-  /**
-   * Flush all pending throttled blobs immediately.
-   * Call this when the user finishes an action (e.g., mouse up after drag/flip)
-   * to ensure the final state is sent without waiting for throttle.
-   */
-  flushPendingBlobs() {
-    Object.keys(this.throttleTimeouts).forEach((placement) => {
-      clearTimeout(this.throttleTimeouts[placement]);
-      delete this.throttleTimeouts[placement];
-    });
-    if (this.ws?.readyState === WebSocket.OPEN && this.isConfigured) {
-      this.canvasBlobs.forEach((blob, placement) => {
-        this.sendBlobImmediately(placement, blob);
-        this.lastSendTime[placement] = Date.now();
-      });
-      this.addLog(`\u{1F680} Flushed ${this.canvasBlobs.size} pending blob(s)`);
-    }
-  }
-  /**
-   * Check if there are pending blobs waiting to be sent (in throttle queue)
-   */
-  hasPendingBlobs() {
-    return Object.keys(this.throttleTimeouts).length > 0;
-  }
-  sendColorBlob(placement, hexColor) {
-    this.colors.set(placement, hexColor);
-    if (!this.ws || this.ws.readyState !== WebSocket.OPEN || !this.isConfigured) {
-      return false;
-    }
-    const message = placement + "\ncolor:" + hexColor;
-    const messageBytes = new TextEncoder().encode(message);
-    this.ws.send(messageBytes.buffer);
-    this.addLog(`Sent color "${hexColor}" for placement "${placement}"`, "sent");
-    return true;
-  }
-  createEmptyCanvasBlob(width = 400, height = 400) {
-    return new Promise((resolve, reject) => {
-      const canvas = document.createElement("canvas");
-      canvas.width = width;
-      canvas.height = height;
-      const ctx = canvas.getContext("2d");
-      if (!ctx) {
-        reject(new Error("Could not get canvas context"));
-        return;
-      }
-      ctx.fillStyle = "white";
-      ctx.fillRect(0, 0, canvas.width, canvas.height);
-      canvas.toBlob(
-        (blob) => {
-          if (blob) {
-            resolve(blob);
-          } else {
-            reject(new Error("Could not create blob from canvas"));
-          }
-        },
-        "image/png",
-        0.8
-      );
-    });
-  }
-  async sendInitialEmptyCanvases(placements) {
-    this.addLog(`\u{1F3A8} Creating initial empty canvases for ${placements.length} placements...`);
-    let emptyCanvasCount = 0;
-    let preservedCanvasCount = 0;
-    for (const placement of placements) {
-      try {
-        const existingBlob = this.canvasBlobs.get(placement.label);
-        if (existingBlob) {
-          this.addLog(`\u{1F3AF} Preserving existing canvas for "${placement.label}" (${existingBlob.size} bytes)`);
-          preservedCanvasCount++;
-          if (this.isConfigured) {
-            this.sendCanvasBlob(placement.label, existingBlob);
-          }
-        } else {
-          const emptyBlob = await this.createEmptyCanvasBlob(
-            placement.width || 400,
-            placement.height || 400
-          );
-          this.canvasBlobs.set(placement.label, emptyBlob);
-          this.addLog(`\u2705 Created empty canvas for "${placement.label}" (${emptyBlob.size} bytes)`);
-          emptyCanvasCount++;
-          if (this.isConfigured) {
-            this.sendCanvasBlob(placement.label, emptyBlob);
-          }
-        }
-      } catch (error) {
-        this.addLog(`\u274C Failed to process canvas for "${placement.label}": ${error}`);
-      }
-    }
-    this.addLog(`\u{1F389} Canvas processing complete: ${preservedCanvasCount} preserved, ${emptyCanvasCount} created empty`);
-  }
-  setInitialData(canvasBlobs, colors) {
-    const existingCanvasCount = this.canvasBlobs.size;
-    if (existingCanvasCount === 0) {
-      this.canvasBlobs = new Map(canvasBlobs);
-      this.addLog(`Set initial canvas blobs: ${canvasBlobs.size} new blobs`);
-    } else {
-      this.addLog(`Preserving existing canvas blobs: ${existingCanvasCount} blobs (ignoring ${canvasBlobs.size} new empty blobs)`);
-    }
-    this.colors = new Map(colors);
-    this.addLog(`Set initial colors: ${colors.size} colors`);
-  }
-  clearLogs() {
-    this.logs = [];
-  }
-  clearMockups() {
-    this.mockupResults = [];
-  }
-};
-
-export {
-  RealtimeMockupService
-};