@snowcone-app/sdk 0.1.10

package/dist/react.cjs

@@ -0,0 +1,755 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/react.ts
+var react_exports = {};
+__export(react_exports, {
+  ReactAdapter: () => ReactAdapter,
+  createReactComponent: () => createReactComponent,
+  useReactAdapter: () => useFrameworkAdapter,
+  useRealtimeMockup: () => useRealtimeMockup
+});
+module.exports = __toCommonJS(react_exports);
+
+// src/realtime/react.ts
+var import_react = require("react");
+
+// 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
+          );
+          const blobCachedDuringAwait = this.canvasBlobs.get(placement.label);
+          if (blobCachedDuringAwait) {
+            this.addLog(`\u{1F3AF} Skipping empty canvas for "${placement.label}" \u2014 real blob was cached during creation`);
+            preservedCanvasCount++;
+            if (this.isConfigured) {
+              this.sendCanvasBlob(placement.label, blobCachedDuringAwait);
+            }
+          } else {
+            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 = [];
+  }
+};
+
+// src/realtime/react.ts
+function useRealtimeMockup(options = {}) {
+  const serviceRef = (0, import_react.useRef)(null);
+  const [state, setState] = (0, import_react.useState)({
+    isConnected: false,
+    sessionId: null,
+    isConfigured: false,
+    mockupResults: [],
+    status: "Disconnected",
+    logs: [],
+    lastError: null
+  });
+  (0, import_react.useEffect)(() => {
+    const service = new RealtimeMockupService(options.wsUrl);
+    serviceRef.current = service;
+    service.setCallbacks({
+      onConnected: (sessionId) => {
+        setState(service.getState());
+        options.onConnected?.(sessionId);
+      },
+      onDisconnected: () => {
+        setState(service.getState());
+        options.onDisconnected?.();
+      },
+      onConfigReceived: () => {
+        setState(service.getState());
+        options.onConfigReceived?.();
+      },
+      onBlobReceived: (placement) => {
+        options.onBlobReceived?.(placement);
+      },
+      onBlobSent: (placement) => {
+        options.onBlobSent?.(placement);
+      },
+      onMockupRendered: (result) => {
+        setState(service.getState());
+        options.onMockupRendered?.(result);
+      },
+      onAllMockupsRendered: (results) => {
+        setState(service.getState());
+        options.onAllMockupsRendered?.(results);
+      },
+      onError: (error) => {
+        setState(service.getState());
+        options.onError?.(error);
+      }
+      // REMOVED: onLog callback was causing setState on every log message,
+      // which triggered re-renders during canvas drag operations
+    });
+    return () => {
+      service.disconnect();
+    };
+  }, [options.wsUrl]);
+  const connect = (0, import_react.useCallback)(() => {
+    serviceRef.current?.connect();
+  }, []);
+  const disconnect = (0, import_react.useCallback)(() => {
+    serviceRef.current?.disconnect();
+  }, []);
+  const sendConfig = (0, import_react.useCallback)((config) => {
+    return serviceRef.current?.sendConfig(config) || false;
+  }, []);
+  const updateMockupIds = (0, import_react.useCallback)((mockupIds) => {
+    return serviceRef.current?.updateMockupIds(mockupIds) || false;
+  }, []);
+  const updatePlacementSettings = (0, import_react.useCallback)((settings) => {
+    return serviceRef.current?.updatePlacementSettings(settings) || false;
+  }, []);
+  const sendCanvasBlob = (0, import_react.useCallback)((placement, blob, mockupCount, baseThrottleMs) => {
+    return serviceRef.current?.sendCanvasBlob(placement, blob, mockupCount, baseThrottleMs) || false;
+  }, []);
+  const sendColorBlob = (0, import_react.useCallback)((placement, hexColor) => {
+    return serviceRef.current?.sendColorBlob(placement, hexColor) || false;
+  }, []);
+  const createEmptyCanvasBlob = (0, import_react.useCallback)((width, height) => {
+    return serviceRef.current?.createEmptyCanvasBlob(width, height) || Promise.reject(new Error("Service not initialized"));
+  }, []);
+  const sendInitialEmptyCanvases = (0, import_react.useCallback)(async (placements) => {
+    await serviceRef.current?.sendInitialEmptyCanvases(placements);
+  }, []);
+  const setInitialData = (0, import_react.useCallback)((canvasBlobs, colors) => {
+    serviceRef.current?.setInitialData(canvasBlobs, colors);
+  }, []);
+  const clearLogs = (0, import_react.useCallback)(() => {
+    serviceRef.current?.clearLogs();
+    setState(serviceRef.current?.getState() || state);
+  }, [state]);
+  const clearMockups = (0, import_react.useCallback)(() => {
+    serviceRef.current?.clearMockups();
+    setState(serviceRef.current?.getState() || state);
+  }, [state]);
+  const flushPendingBlobs = (0, import_react.useCallback)(() => {
+    serviceRef.current?.flushPendingBlobs();
+  }, []);
+  const hasPendingBlobs = (0, import_react.useCallback)(() => {
+    return serviceRef.current?.hasPendingBlobs() || false;
+  }, []);
+  return {
+    ...state,
+    connect,
+    disconnect,
+    sendConfig,
+    updateMockupIds,
+    updatePlacementSettings,
+    sendCanvasBlob,
+    sendColorBlob,
+    createEmptyCanvasBlob,
+    sendInitialEmptyCanvases,
+    setInitialData,
+    clearLogs,
+    clearMockups,
+    flushPendingBlobs,
+    hasPendingBlobs
+  };
+}
+
+// src/framework/adapters/react.ts
+var ReactAdapter = class {
+  name = "react";
+  React;
+  hooks;
+  constructor(React, hooks) {
+    this.React = React;
+    this.hooks = hooks || React;
+  }
+  /**
+   * Create a stateful value using useState
+   */
+  createState(initialValue) {
+    const [value, setValue] = this.hooks.useState(initialValue);
+    return {
+      get: () => value,
+      set: (newValue) => {
+        setValue(newValue);
+      },
+      subscribe: (callback) => {
+        this.hooks.useEffect(() => {
+          callback(value);
+        }, [value]);
+        return () => {
+        };
+      }
+    };
+  }
+  /**
+   * Create a context provider/consumer
+   */
+  createContext(name) {
+    const Context = this.React.createContext(void 0);
+    return {
+      provide: (value) => {
+        return this.React.createElement(Context.Provider, { value });
+      },
+      consume: () => {
+        return this.hooks.useContext(Context);
+      },
+      subscribe: (callback) => {
+        const value = this.hooks.useContext(Context);
+        this.hooks.useEffect(() => {
+          if (value !== void 0) {
+            callback(value);
+          }
+        }, [value]);
+        return () => {
+        };
+      }
+    };
+  }
+  /**
+   * Register lifecycle hooks
+   */
+  useLifecycle(lifecycle) {
+    this.hooks.useEffect(() => {
+      lifecycle.onMount?.();
+      return () => {
+        lifecycle.onUnmount?.();
+      };
+    }, []);
+    this.hooks.useEffect(() => {
+      lifecycle.onUpdate?.({});
+    });
+  }
+  /**
+   * Register event handlers
+   */
+  useEvents(handlers) {
+    handlers.forEach(({ name, handler }) => {
+      this.hooks.useCallback(handler, []);
+    });
+  }
+  /**
+   * Create a ref to a DOM element
+   */
+  createRef() {
+    return this.hooks.useRef(null);
+  }
+  /**
+   * Render a component
+   */
+  render(component, props) {
+    return component.render(this);
+  }
+  /**
+   * Get React-specific utilities
+   */
+  getUtilities() {
+    return {
+      batchUpdates: (callback) => {
+        callback();
+      },
+      nextTick: (callback) => {
+        Promise.resolve().then(callback);
+      },
+      computed: (deps, compute) => {
+        return this.hooks.useMemo(compute, deps);
+      },
+      memo: (value, deps) => {
+        return this.hooks.useMemo(() => value, deps);
+      }
+    };
+  }
+};
+function createReactComponent(descriptor, React) {
+  return function Component(props) {
+    const adapter = new ReactAdapter(React, React);
+    if (descriptor.lifecycle) {
+      adapter.useLifecycle(descriptor.lifecycle);
+    }
+    return adapter.render(descriptor, props);
+  };
+}
+function useFrameworkAdapter(React) {
+  return new ReactAdapter(React, React);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ReactAdapter,
+  createReactComponent,
+  useReactAdapter,
+  useRealtimeMockup
+});