@snowcone-app/sdk 0.1.10

package/dist/react.d.cts

@@ -0,0 +1,96 @@
+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';
+
+interface UseRealtimeMockupOptions {
+    wsUrl?: string;
+    onConnected?: (sessionId: string) => void;
+    onDisconnected?: () => void;
+    onConfigReceived?: () => void;
+    /** Called when server confirms it received a blob for a placement */
+    onBlobReceived?: (placement: string) => void;
+    /** Called when a blob is actually sent to server (after throttle completes) */
+    onBlobSent?: (placement: string) => void;
+    onMockupRendered?: (result: MockupResult) => void;
+    onAllMockupsRendered?: (results: MockupResult[]) => void;
+    onError?: (error: string) => void;
+}
+declare function useRealtimeMockup(options?: UseRealtimeMockupOptions): {
+    connect: () => void;
+    disconnect: () => void;
+    sendConfig: (config: WebSocketConfig) => boolean;
+    updateMockupIds: (mockupIds: string[]) => boolean;
+    updatePlacementSettings: (settings: Record<string, PlacementSettings>) => boolean;
+    sendCanvasBlob: (placement: string, blob: Blob, mockupCount?: number, baseThrottleMs?: number) => boolean;
+    sendColorBlob: (placement: string, hexColor: string) => boolean;
+    createEmptyCanvasBlob: (width?: number, height?: number) => Promise<Blob>;
+    sendInitialEmptyCanvases: (placements: Array<{
+        label: string;
+        width?: number;
+        height?: number;
+    }>) => Promise<void>;
+    setInitialData: (canvasBlobs: Map<string, Blob>, colors: Map<string, string>) => void;
+    clearLogs: () => void;
+    clearMockups: () => void;
+    flushPendingBlobs: () => void;
+    hasPendingBlobs: () => boolean;
+    isConnected: boolean;
+    sessionId: string | null;
+    isConfigured: boolean;
+    mockupResults: MockupResult[];
+    status: string;
+    logs: string[];
+    lastError: string | null;
+};
+
+/**
+ * React framework adapter implementation
+ */
+
+/**
+ * React adapter implementation
+ */
+declare class ReactAdapter implements FrameworkAdapter<ComponentProps> {
+    name: "react";
+    private React;
+    private hooks;
+    constructor(React: any, hooks?: any);
+    /**
+     * Create a stateful value using useState
+     */
+    createState<T>(initialValue: T): ComponentState<T>;
+    /**
+     * Create a context provider/consumer
+     */
+    createContext<T>(name: string): ComponentContext<T>;
+    /**
+     * Register lifecycle hooks
+     */
+    useLifecycle(lifecycle: ComponentLifecycleHooks): void;
+    /**
+     * Register event handlers
+     */
+    useEvents(handlers: EventHandler[]): void;
+    /**
+     * Create a ref to a DOM element
+     */
+    createRef<T extends HTMLElement>(): {
+        current: T | null;
+    };
+    /**
+     * Render a component
+     */
+    render(component: ComponentDescriptor, props: ComponentProps): any;
+    /**
+     * Get React-specific utilities
+     */
+    getUtilities(): FrameworkUtilities;
+}
+/**
+ * Create a React component from a descriptor
+ */
+declare function createReactComponent(descriptor: ComponentDescriptor, React: any): any;
+/**
+ * Hook to use framework adapter in React
+ */
+declare function useFrameworkAdapter(React: any): ReactAdapter;
+
+export { MockupResult, ReactAdapter, type UseRealtimeMockupOptions, WebSocketConfig, createReactComponent, useFrameworkAdapter as useReactAdapter, useRealtimeMockup };

package/dist/react.d.ts

@@ -0,0 +1,96 @@
+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';
+
+interface UseRealtimeMockupOptions {
+    wsUrl?: string;
+    onConnected?: (sessionId: string) => void;
+    onDisconnected?: () => void;
+    onConfigReceived?: () => void;
+    /** Called when server confirms it received a blob for a placement */
+    onBlobReceived?: (placement: string) => void;
+    /** Called when a blob is actually sent to server (after throttle completes) */
+    onBlobSent?: (placement: string) => void;
+    onMockupRendered?: (result: MockupResult) => void;
+    onAllMockupsRendered?: (results: MockupResult[]) => void;
+    onError?: (error: string) => void;
+}
+declare function useRealtimeMockup(options?: UseRealtimeMockupOptions): {
+    connect: () => void;
+    disconnect: () => void;
+    sendConfig: (config: WebSocketConfig) => boolean;
+    updateMockupIds: (mockupIds: string[]) => boolean;
+    updatePlacementSettings: (settings: Record<string, PlacementSettings>) => boolean;
+    sendCanvasBlob: (placement: string, blob: Blob, mockupCount?: number, baseThrottleMs?: number) => boolean;
+    sendColorBlob: (placement: string, hexColor: string) => boolean;
+    createEmptyCanvasBlob: (width?: number, height?: number) => Promise<Blob>;
+    sendInitialEmptyCanvases: (placements: Array<{
+        label: string;
+        width?: number;
+        height?: number;
+    }>) => Promise<void>;
+    setInitialData: (canvasBlobs: Map<string, Blob>, colors: Map<string, string>) => void;
+    clearLogs: () => void;
+    clearMockups: () => void;
+    flushPendingBlobs: () => void;
+    hasPendingBlobs: () => boolean;
+    isConnected: boolean;
+    sessionId: string | null;
+    isConfigured: boolean;
+    mockupResults: MockupResult[];
+    status: string;
+    logs: string[];
+    lastError: string | null;
+};
+
+/**
+ * React framework adapter implementation
+ */
+
+/**
+ * React adapter implementation
+ */
+declare class ReactAdapter implements FrameworkAdapter<ComponentProps> {
+    name: "react";
+    private React;
+    private hooks;
+    constructor(React: any, hooks?: any);
+    /**
+     * Create a stateful value using useState
+     */
+    createState<T>(initialValue: T): ComponentState<T>;
+    /**
+     * Create a context provider/consumer
+     */
+    createContext<T>(name: string): ComponentContext<T>;
+    /**
+     * Register lifecycle hooks
+     */
+    useLifecycle(lifecycle: ComponentLifecycleHooks): void;
+    /**
+     * Register event handlers
+     */
+    useEvents(handlers: EventHandler[]): void;
+    /**
+     * Create a ref to a DOM element
+     */
+    createRef<T extends HTMLElement>(): {
+        current: T | null;
+    };
+    /**
+     * Render a component
+     */
+    render(component: ComponentDescriptor, props: ComponentProps): any;
+    /**
+     * Get React-specific utilities
+     */
+    getUtilities(): FrameworkUtilities;
+}
+/**
+ * Create a React component from a descriptor
+ */
+declare function createReactComponent(descriptor: ComponentDescriptor, React: any): any;
+/**
+ * Hook to use framework adapter in React
+ */
+declare function useFrameworkAdapter(React: any): ReactAdapter;
+
+export { MockupResult, ReactAdapter, type UseRealtimeMockupOptions, WebSocketConfig, createReactComponent, useFrameworkAdapter as useReactAdapter, useRealtimeMockup };

package/dist/react.js

@@ -0,0 +1,245 @@
+import {
+  RealtimeMockupService
+} from "./chunk-UJFJ7REN.js";
+
+// src/realtime/react.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+function useRealtimeMockup(options = {}) {
+  const serviceRef = useRef(null);
+  const [state, setState] = useState({
+    isConnected: false,
+    sessionId: null,
+    isConfigured: false,
+    mockupResults: [],
+    status: "Disconnected",
+    logs: [],
+    lastError: null
+  });
+  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 = useCallback(() => {
+    serviceRef.current?.connect();
+  }, []);
+  const disconnect = useCallback(() => {
+    serviceRef.current?.disconnect();
+  }, []);
+  const sendConfig = useCallback((config) => {
+    return serviceRef.current?.sendConfig(config) || false;
+  }, []);
+  const updateMockupIds = useCallback((mockupIds) => {
+    return serviceRef.current?.updateMockupIds(mockupIds) || false;
+  }, []);
+  const updatePlacementSettings = useCallback((settings) => {
+    return serviceRef.current?.updatePlacementSettings(settings) || false;
+  }, []);
+  const sendCanvasBlob = useCallback((placement, blob, mockupCount, baseThrottleMs) => {
+    return serviceRef.current?.sendCanvasBlob(placement, blob, mockupCount, baseThrottleMs) || false;
+  }, []);
+  const sendColorBlob = useCallback((placement, hexColor) => {
+    return serviceRef.current?.sendColorBlob(placement, hexColor) || false;
+  }, []);
+  const createEmptyCanvasBlob = useCallback((width, height) => {
+    return serviceRef.current?.createEmptyCanvasBlob(width, height) || Promise.reject(new Error("Service not initialized"));
+  }, []);
+  const sendInitialEmptyCanvases = useCallback(async (placements) => {
+    await serviceRef.current?.sendInitialEmptyCanvases(placements);
+  }, []);
+  const setInitialData = useCallback((canvasBlobs, colors) => {
+    serviceRef.current?.setInitialData(canvasBlobs, colors);
+  }, []);
+  const clearLogs = useCallback(() => {
+    serviceRef.current?.clearLogs();
+    setState(serviceRef.current?.getState() || state);
+  }, [state]);
+  const clearMockups = useCallback(() => {
+    serviceRef.current?.clearMockups();
+    setState(serviceRef.current?.getState() || state);
+  }, [state]);
+  const flushPendingBlobs = useCallback(() => {
+    serviceRef.current?.flushPendingBlobs();
+  }, []);
+  const hasPendingBlobs = 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);
+}
+export {
+  ReactAdapter,
+  createReactComponent,
+  useFrameworkAdapter as useReactAdapter,
+  useRealtimeMockup
+};