@snowcone-app/sdk 0.1.10

package/dist/chunk-HOYSZQET.js

@@ -0,0 +1,476 @@
+// 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
+};