@snowcone-app/sdk 0.1.11 → 0.1.13

package/dist/react.cjs

@@ -45,7 +45,9 @@ var RealtimeMockupService = class {
   logs = [];
   lastError = null;
   callbacks = {};
+  lastBlobSentAt = 0;
   canvasBlobs = /* @__PURE__ */ new Map();
+  canvasStates = /* @__PURE__ */ new Map();
   colors = /* @__PURE__ */ new Map();
   lastSendTime = {};
   throttleTimeouts = {};
@@ -55,11 +57,24 @@ var RealtimeMockupService = class {
   lastSentVersion = 0;
   // Track latest sent version per placement to detect stale responses
   latestSentVersionByPlacement = {};
+  // Track latest accepted (displayed) version per placement — only drop results
+  // older than what we've already shown, not older than what we've sent.
+  // This prevents the "version racing" problem during drag where sent versions
+  // advance faster than the server can render.
+  latestAcceptedVersionByPlacement = {};
   // Feature flag: server now supports version in blob message
   sendVersionInBlob = true;
+  // Session-grant auth: when set, connect() fetches a short-lived token, opens
+  // the WS with `?token=`, and renews ~15s before expiry via a `renew` message.
+  tokenProvider;
+  renewTimer = null;
   setCallbacks(callbacks) {
     this.callbacks = callbacks;
   }
+  /** Provide a grant fetcher to authorize the session (per-shop, renewable). */
+  setTokenProvider(fn) {
+    this.tokenProvider = fn;
+  }
   getState() {
     return {
       isConnected: this.ws?.readyState === WebSocket.OPEN,
@@ -82,9 +97,24 @@ var RealtimeMockupService = class {
     if (this.ws?.readyState === WebSocket.OPEN) {
       return;
     }
+    if (this.tokenProvider) {
+      this.tokenProvider().then((grant) => {
+        this.openSocket(grant.token);
+        this.scheduleRenew(grant.expiresAt);
+      }).catch((err) => {
+        this.addLog(`Failed to obtain realtime grant: ${err}`);
+        this.status = "Disconnected";
+      });
+      return;
+    }
+    this.openSocket();
+  }
+  openSocket(token) {
+    const url = token ? `${this.wsUrl}${this.wsUrl.includes("?") ? "&" : "?"}token=${encodeURIComponent(token)}` : this.wsUrl;
     this.addLog(`Connecting to ${this.wsUrl}...`);
-    this.ws = new WebSocket(this.wsUrl);
+    this.ws = new WebSocket(url);
     this.ws.onopen = () => {
+      console.log(`[WS] connection OPENED to ${this.wsUrl}`);
       this.addLog("WebSocket connection opened");
       this.status = "Connected";
     };
@@ -98,11 +128,13 @@ var RealtimeMockupService = class {
       }
     };
     this.ws.onclose = (event) => {
+      console.log(`[WS] connection CLOSED (code: ${event.code}, reason: "${event.reason}", wasClean: ${event.wasClean})`);
       this.addLog(`WebSocket connection closed (code: ${event.code})`);
       this.status = "Disconnected";
       this.sessionId = null;
       this.isConfigured = false;
       this.configSent = false;
+      this.clearRenew();
       this.callbacks.onDisconnected?.();
     };
     this.ws.onerror = (error) => {
@@ -110,6 +142,29 @@ var RealtimeMockupService = class {
       this.status = "Disconnected";
     };
   }
+  scheduleRenew(expiresAt) {
+    this.clearRenew();
+    if (!this.tokenProvider) return;
+    const ms = Math.max(1e3, expiresAt * 1e3 - Date.now() - 15e3);
+    this.renewTimer = setTimeout(() => void this.renew(), ms);
+  }
+  clearRenew() {
+    if (this.renewTimer) {
+      clearTimeout(this.renewTimer);
+      this.renewTimer = null;
+    }
+  }
+  async renew() {
+    if (!this.tokenProvider || this.ws?.readyState !== WebSocket.OPEN) return;
+    try {
+      const grant = await this.tokenProvider();
+      this.ws.send(JSON.stringify({ type: "renew", token: grant.token }));
+      this.addLog("\u{1F504} Renewed realtime session token", "sent");
+      this.scheduleRenew(grant.expiresAt);
+    } catch (err) {
+      this.addLog(`Failed to renew realtime grant: ${err}`);
+    }
+  }
   handleMessage(data) {
     switch (data.type) {
       case "connected":
@@ -161,15 +216,18 @@ var RealtimeMockupService = class {
         this.addLog("\u{1F3A8} Mockup rendering has started...");
         break;
       case "mockup_rendered":
+        console.log(`[WS] mockup_rendered received: mockupId=${data.mockupId} hasImageUrl=${!!data.imageUrl} v=${data.requestVersion} placement="${data.placement}" renderMs=${data.renderMs}`);
         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})`);
+            const lastAccepted = this.latestAcceptedVersionByPlacement[responsePlacement];
+            if (lastAccepted !== void 0 && responseVersion < lastAccepted) {
+              console.log(`[WS] STALE mockup dropped: v${responseVersion} for "${responsePlacement}" (already displayed: v${lastAccepted}, latest sent: v${this.latestSentVersionByPlacement[responsePlacement]})`);
+              this.addLog(`\u23ED\uFE0F Ignoring stale mockup v${responseVersion} for "${responsePlacement}" (displayed: v${lastAccepted})`);
               break;
             }
+            this.latestAcceptedVersionByPlacement[responsePlacement] = responseVersion;
           }
           const mockupResult = {
             mockupId: data.mockupId,
@@ -177,7 +235,10 @@ var RealtimeMockupService = class {
             renderUrl: data.renderUrl || data.imageUrl,
             imageSize: data.imageSize || 0,
             requestVersion: responseVersion,
-            placement: responsePlacement
+            placement: responsePlacement,
+            renderMs: data.renderMs,
+            blobToRenderMs: data.blobToRenderMs,
+            canvasRenderTiming: data.canvasRenderTiming
           };
           const existingIndex = this.mockupResults.findIndex((m) => m.mockupId === data.mockupId);
           if (existingIndex >= 0) {
@@ -196,14 +257,16 @@ var RealtimeMockupService = class {
         }
         break;
       case "all_mockups_rendered":
+        console.log(`[WS] all_mockups_rendered received: ${data.mockups?.length ?? 0} mockups`);
         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})`);
+              const lastAccepted = this.latestAcceptedVersionByPlacement[mockup.placement];
+              if (lastAccepted !== void 0 && mockup.requestVersion < lastAccepted) {
+                this.addLog(`\u23ED\uFE0F Filtering stale mockup v${mockup.requestVersion} for "${mockup.placement}" (displayed: v${lastAccepted})`);
                 return false;
               }
+              this.latestAcceptedVersionByPlacement[mockup.placement] = mockup.requestVersion;
             }
             return true;
           });
@@ -226,6 +289,7 @@ var RealtimeMockupService = class {
     }
   }
   disconnect() {
+    this.clearRenew();
     if (this.ws) {
       this.ws.close();
       this.ws = null;
@@ -260,6 +324,7 @@ var RealtimeMockupService = class {
         this.isConfigured = false;
         this.mockupResults = [];
         this.canvasBlobs.clear();
+        this.canvasStates.clear();
         this.colors.clear();
         this.lastSendTime = {};
         Object.values(this.throttleTimeouts).forEach((timeout) => clearTimeout(timeout));
@@ -267,6 +332,7 @@ var RealtimeMockupService = class {
         this.requestVersion = 0;
         this.lastSentVersion = 0;
         this.latestSentVersionByPlacement = {};
+        this.latestAcceptedVersionByPlacement = {};
         this.addLog("\u{1F9F9} Cleared all cached canvas/color data for new product");
       }
     }
@@ -302,6 +368,30 @@ var RealtimeMockupService = class {
     this.addLog(`\u{1F3AF} Updating mockupIds to: [${mockupIds.join(", ")}]`);
     return this.sendConfig(updatedConfig);
   }
+  /**
+   * 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) {
+    if (!this.config) {
+      this.addLog("Cannot update width: no config set");
+      return false;
+    }
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+      this.addLog("Cannot update width: WebSocket not connected");
+      return false;
+    }
+    if (this.config.width === width) {
+      return false;
+    }
+    const updatedConfig = {
+      ...this.config,
+      width
+    };
+    this.addLog(`\u{1F4D0} Updating render width: ${this.config.width} \u2192 ${width}`);
+    return this.sendConfig(updatedConfig);
+  }
   /**
    * Update placementSettings without changing other config.
    * Used to override scaleMode when canvas editor is active.
@@ -324,6 +414,8 @@ var RealtimeMockupService = class {
   sendCanvasBlob(placement, blob, mockupCount = 1, baseThrottleMs = 1e3, notifyCallback = true) {
     this.canvasBlobs.set(placement, blob);
     if (!this.ws || this.ws.readyState !== WebSocket.OPEN || !this.isConfigured) {
+      const reason = !this.ws ? "no WebSocket" : this.ws.readyState !== WebSocket.OPEN ? `ws.readyState=${this.ws.readyState}` : "not configured";
+      console.log(`[WS] sendCanvasBlob BLOCKED for "${placement}" (${blob.size}B): ${reason} (cached for later)`);
       return false;
     }
     if (baseThrottleMs <= 0) {
@@ -331,16 +423,25 @@ var RealtimeMockupService = class {
       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;
+    const debounceMs = baseThrottleMs * mockupCount;
+    const lastSendTime = this.lastSendTime[placement];
+    const timeSinceLastSend = lastSendTime ? Date.now() - lastSendTime : 0;
+    const isActiveInteraction = lastSendTime && timeSinceLastSend < debounceMs * 3;
+    if (isActiveInteraction && timeSinceLastSend >= debounceMs) {
+      if (this.throttleTimeouts[placement]) {
+        clearTimeout(this.throttleTimeouts[placement]);
+        delete this.throttleTimeouts[placement];
+      }
+      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();
+      }
+    } else {
+      if (this.throttleTimeouts[placement]) {
+        clearTimeout(this.throttleTimeouts[placement]);
+      }
+      const delayTime = isActiveInteraction ? debounceMs - timeSinceLastSend : debounceMs;
       this.throttleTimeouts[placement] = setTimeout(() => {
         const latestBlob = this.canvasBlobs.get(placement);
         if (latestBlob && this.ws?.readyState === WebSocket.OPEN && this.isConfigured) {
@@ -352,6 +453,72 @@ var RealtimeMockupService = class {
     }
     return true;
   }
+  /**
+   * Send canvas state JSON for server-side rendering.
+   * Alternative to sendCanvasBlob — the server renders the PNG instead of the client.
+   */
+  sendCanvasState(placement, state, mockupCount = 1, baseThrottleMs = 1e3) {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN || !this.isConfigured) {
+      const reason = !this.ws ? "no WebSocket" : this.ws.readyState !== WebSocket.OPEN ? `ws.readyState=${this.ws.readyState}` : "not configured";
+      console.log(`[WS] sendCanvasState BLOCKED for "${placement}": ${reason}`);
+      return false;
+    }
+    this.canvasStates.set(placement, state);
+    if (baseThrottleMs <= 0) {
+      this.sendCanvasStateImmediately(placement, state);
+      this.lastSendTime[placement] = Date.now();
+      return true;
+    }
+    const debounceMs = baseThrottleMs * mockupCount;
+    const lastSendTime = this.lastSendTime[placement];
+    const timeSinceLastSend = lastSendTime ? Date.now() - lastSendTime : 0;
+    const isActiveInteraction = lastSendTime && timeSinceLastSend < debounceMs * 3;
+    if (isActiveInteraction && timeSinceLastSend >= debounceMs) {
+      if (this.throttleTimeouts[placement]) {
+        clearTimeout(this.throttleTimeouts[placement]);
+        delete this.throttleTimeouts[placement];
+      }
+      const latestState = this.canvasStates.get(placement);
+      if (latestState && this.ws?.readyState === WebSocket.OPEN && this.isConfigured) {
+        console.log(`[WS] sendCanvasState "${placement}": max-wait flush (${timeSinceLastSend}ms since last)`);
+        this.sendCanvasStateImmediately(placement, latestState);
+        this.lastSendTime[placement] = Date.now();
+      }
+    } else {
+      if (this.throttleTimeouts[placement]) {
+        clearTimeout(this.throttleTimeouts[placement]);
+      }
+      const delayTime = isActiveInteraction ? debounceMs - timeSinceLastSend : debounceMs;
+      this.throttleTimeouts[placement] = setTimeout(() => {
+        const latestState = this.canvasStates.get(placement);
+        if (latestState && this.ws?.readyState === WebSocket.OPEN && this.isConfigured) {
+          console.log(`[WS] sendCanvasState "${placement}": debounce firing (${debounceMs}ms)`);
+          this.sendCanvasStateImmediately(placement, latestState);
+          this.lastSendTime[placement] = Date.now();
+        }
+        delete this.throttleTimeouts[placement];
+      }, delayTime);
+    }
+    return true;
+  }
+  sendCanvasStateImmediately(placement, state) {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+      console.log(`[WS] sendCanvasStateImmediately ABORTED: ws not open`);
+      return;
+    }
+    this.lastSentVersion = ++this.requestVersion;
+    this.latestSentVersionByPlacement[placement] = this.lastSentVersion;
+    const message = JSON.stringify({
+      type: "canvas_state",
+      placement,
+      version: this.lastSentVersion,
+      state
+    });
+    this.ws.send(message);
+    this.lastBlobSentAt = Date.now();
+    this.addLog(`Sent canvas state for "${placement}" (${(message.length / 1024).toFixed(1)}KB, v${this.lastSentVersion})`, "sent");
+    this.callbacks.onBlobSent?.(placement);
+  }
   sendBlobImmediately(placement, blob, notifyCallback = true) {
     if (!this.ws || this.ws.readyState !== WebSocket.OPEN) return;
     this.lastSentVersion = ++this.requestVersion;
@@ -377,6 +544,7 @@ ${versionToSend}
           combined.set(imageBytes, headerBytes.length);
         }
         this.ws.send(combined.buffer);
+        this.lastBlobSentAt = Date.now();
         this.addLog(`Sent canvas blob for placement "${placement}" (${imageBytes.length} bytes, v${versionToSend})`, "sent");
         if (notifyCallback) {
           this.callbacks.onBlobSent?.(placement);
@@ -515,6 +683,8 @@ ${versionToSend}
 // src/realtime/react.ts
 function useRealtimeMockup(options = {}) {
   const serviceRef = (0, import_react.useRef)(null);
+  const getTokenRef = (0, import_react.useRef)(options.getToken);
+  getTokenRef.current = options.getToken;
   const [state, setState] = (0, import_react.useState)({
     isConnected: false,
     sessionId: null,
@@ -547,11 +717,13 @@ function useRealtimeMockup(options = {}) {
         options.onBlobSent?.(placement);
       },
       onMockupRendered: (result) => {
-        setState(service.getState());
+        console.log(`[useRealtimeMockup] onMockupRendered: mockupId=${result.mockupId} hasImageUrl=${!!result.imageUrl}`);
         options.onMockupRendered?.(result);
       },
       onAllMockupsRendered: (results) => {
-        setState(service.getState());
+        const newState = service.getState();
+        console.log(`[useRealtimeMockup] onAllMockupsRendered: ${results.length} results, state.mockupResults=${newState.mockupResults.length}`);
+        setState(newState);
         options.onAllMockupsRendered?.(results);
       },
       onError: (error) => {
@@ -561,6 +733,9 @@ function useRealtimeMockup(options = {}) {
       // REMOVED: onLog callback was causing setState on every log message,
       // which triggered re-renders during canvas drag operations
     });
+    if (getTokenRef.current) {
+      service.setTokenProvider(() => getTokenRef.current());
+    }
     return () => {
       service.disconnect();
     };
@@ -580,9 +755,15 @@ function useRealtimeMockup(options = {}) {
   const updatePlacementSettings = (0, import_react.useCallback)((settings) => {
     return serviceRef.current?.updatePlacementSettings(settings) || false;
   }, []);
+  const updateWidth = (0, import_react.useCallback)((width) => {
+    return serviceRef.current?.updateWidth(width) || false;
+  }, []);
   const sendCanvasBlob = (0, import_react.useCallback)((placement, blob, mockupCount, baseThrottleMs) => {
     return serviceRef.current?.sendCanvasBlob(placement, blob, mockupCount, baseThrottleMs) || false;
   }, []);
+  const sendCanvasState = (0, import_react.useCallback)((placement, state2, mockupCount, baseThrottleMs) => {
+    return serviceRef.current?.sendCanvasState(placement, state2, mockupCount, baseThrottleMs) || false;
+  }, []);
   const sendColorBlob = (0, import_react.useCallback)((placement, hexColor) => {
     return serviceRef.current?.sendColorBlob(placement, hexColor) || false;
   }, []);
@@ -616,7 +797,9 @@ function useRealtimeMockup(options = {}) {
     sendConfig,
     updateMockupIds,
     updatePlacementSettings,
+    updateWidth,
     sendCanvasBlob,
+    sendCanvasState,
     sendColorBlob,
     createEmptyCanvasBlob,
     sendInitialEmptyCanvases,

package/dist/react.d.cts

@@ -1,7 +1,17 @@
-import { M as MockupResult, W as WebSocketConfig, u as PlacementSettings, F as FrameworkAdapter, b as ComponentProps, d as ComponentState, e as ComponentContext, f as ComponentLifecycleHooks, E as EventHandler, c as ComponentDescriptor, g as FrameworkUtilities } from './websocket-B8_XAwWx.cjs';
+import { M as MockupResult, W as WebSocketConfig, u as PlacementSettings, F as FrameworkAdapter, b as ComponentProps, d as ComponentState, e as ComponentContext, f as ComponentLifecycleHooks, E as EventHandler, c as ComponentDescriptor, g as FrameworkUtilities } from './websocket-Dum3OooZ.cjs';
 
 interface UseRealtimeMockupOptions {
     wsUrl?: string;
+    /**
+     * Optional grant fetcher. When provided, the session authorizes via a
+     * short-lived token (opened on the WS URL, renewed before expiry) instead of
+     * a static seal. Identity may change between renders — it's read via a ref,
+     * so it never re-opens the socket.
+     */
+    getToken?: () => Promise<{
+        token: string;
+        expiresAt: number;
+    }>;
     onConnected?: (sessionId: string) => void;
     onDisconnected?: () => void;
     onConfigReceived?: () => void;
@@ -19,7 +29,9 @@ declare function useRealtimeMockup(options?: UseRealtimeMockupOptions): {
     sendConfig: (config: WebSocketConfig) => boolean;
     updateMockupIds: (mockupIds: string[]) => boolean;
     updatePlacementSettings: (settings: Record<string, PlacementSettings>) => boolean;
+    updateWidth: (width: number) => boolean;
     sendCanvasBlob: (placement: string, blob: Blob, mockupCount?: number, baseThrottleMs?: number) => boolean;
+    sendCanvasState: (placement: string, state: object, mockupCount?: number, baseThrottleMs?: number) => boolean;
     sendColorBlob: (placement: string, hexColor: string) => boolean;
     createEmptyCanvasBlob: (width?: number, height?: number) => Promise<Blob>;
     sendInitialEmptyCanvases: (placements: Array<{

package/dist/react.d.ts

@@ -1,7 +1,17 @@
-import { M as MockupResult, W as WebSocketConfig, u as PlacementSettings, F as FrameworkAdapter, b as ComponentProps, d as ComponentState, e as ComponentContext, f as ComponentLifecycleHooks, E as EventHandler, c as ComponentDescriptor, g as FrameworkUtilities } from './websocket-B8_XAwWx.js';
+import { M as MockupResult, W as WebSocketConfig, u as PlacementSettings, F as FrameworkAdapter, b as ComponentProps, d as ComponentState, e as ComponentContext, f as ComponentLifecycleHooks, E as EventHandler, c as ComponentDescriptor, g as FrameworkUtilities } from './websocket-Dum3OooZ.js';
 
 interface UseRealtimeMockupOptions {
     wsUrl?: string;
+    /**
+     * Optional grant fetcher. When provided, the session authorizes via a
+     * short-lived token (opened on the WS URL, renewed before expiry) instead of
+     * a static seal. Identity may change between renders — it's read via a ref,
+     * so it never re-opens the socket.
+     */
+    getToken?: () => Promise<{
+        token: string;
+        expiresAt: number;
+    }>;
     onConnected?: (sessionId: string) => void;
     onDisconnected?: () => void;
     onConfigReceived?: () => void;
@@ -19,7 +29,9 @@ declare function useRealtimeMockup(options?: UseRealtimeMockupOptions): {
     sendConfig: (config: WebSocketConfig) => boolean;
     updateMockupIds: (mockupIds: string[]) => boolean;
     updatePlacementSettings: (settings: Record<string, PlacementSettings>) => boolean;
+    updateWidth: (width: number) => boolean;
     sendCanvasBlob: (placement: string, blob: Blob, mockupCount?: number, baseThrottleMs?: number) => boolean;
+    sendCanvasState: (placement: string, state: object, mockupCount?: number, baseThrottleMs?: number) => boolean;
     sendColorBlob: (placement: string, hexColor: string) => boolean;
     createEmptyCanvasBlob: (width?: number, height?: number) => Promise<Blob>;
     sendInitialEmptyCanvases: (placements: Array<{

package/dist/react.js

@@ -1,11 +1,13 @@
 import {
   RealtimeMockupService
-} from "./chunk-UJFJ7REN.js";
+} from "./chunk-6MV7TDTM.js";
 
 // src/realtime/react.ts
 import { useCallback, useEffect, useRef, useState } from "react";
 function useRealtimeMockup(options = {}) {
   const serviceRef = useRef(null);
+  const getTokenRef = useRef(options.getToken);
+  getTokenRef.current = options.getToken;
   const [state, setState] = useState({
     isConnected: false,
     sessionId: null,
@@ -38,11 +40,13 @@ function useRealtimeMockup(options = {}) {
         options.onBlobSent?.(placement);
       },
       onMockupRendered: (result) => {
-        setState(service.getState());
+        console.log(`[useRealtimeMockup] onMockupRendered: mockupId=${result.mockupId} hasImageUrl=${!!result.imageUrl}`);
         options.onMockupRendered?.(result);
       },
       onAllMockupsRendered: (results) => {
-        setState(service.getState());
+        const newState = service.getState();
+        console.log(`[useRealtimeMockup] onAllMockupsRendered: ${results.length} results, state.mockupResults=${newState.mockupResults.length}`);
+        setState(newState);
         options.onAllMockupsRendered?.(results);
       },
       onError: (error) => {
@@ -52,6 +56,9 @@ function useRealtimeMockup(options = {}) {
       // REMOVED: onLog callback was causing setState on every log message,
       // which triggered re-renders during canvas drag operations
     });
+    if (getTokenRef.current) {
+      service.setTokenProvider(() => getTokenRef.current());
+    }
     return () => {
       service.disconnect();
     };
@@ -71,9 +78,15 @@ function useRealtimeMockup(options = {}) {
   const updatePlacementSettings = useCallback((settings) => {
     return serviceRef.current?.updatePlacementSettings(settings) || false;
   }, []);
+  const updateWidth = useCallback((width) => {
+    return serviceRef.current?.updateWidth(width) || false;
+  }, []);
   const sendCanvasBlob = useCallback((placement, blob, mockupCount, baseThrottleMs) => {
     return serviceRef.current?.sendCanvasBlob(placement, blob, mockupCount, baseThrottleMs) || false;
   }, []);
+  const sendCanvasState = useCallback((placement, state2, mockupCount, baseThrottleMs) => {
+    return serviceRef.current?.sendCanvasState(placement, state2, mockupCount, baseThrottleMs) || false;
+  }, []);
   const sendColorBlob = useCallback((placement, hexColor) => {
     return serviceRef.current?.sendColorBlob(placement, hexColor) || false;
   }, []);
@@ -107,7 +120,9 @@ function useRealtimeMockup(options = {}) {
     sendConfig,
     updateMockupIds,
     updatePlacementSettings,
+    updateWidth,
     sendCanvasBlob,
+    sendCanvasState,
     sendColorBlob,
     createEmptyCanvasBlob,
     sendInitialEmptyCanvases,

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

@@ -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 };