dynim-react 1.0.59 → 1.0.63

package/dist/DynimProvider.d.ts

@@ -1,42 +1,73 @@
 /**
- * DynimProvider - React wrapper around DynimManager
+ * DynimProvider - Single provider for all Dynim functionality
  *
- * Framework-specific responsibilities:
- * - Shared context setup (React, ReactDOM, packages)
- * - React context provider + hook
- * - Rendering TenantApp or children
- * - Theme <style> injection
+ * Handles:
+ * - Loading tenant bundles
+ * - Visual builder UI (when user has edit permissions)
+ * - Shared context for bundles to access React, packages, etc.
  */
 import { type ReactNode } from 'react';
-import { type Checkpoint, type RestoreResult, type CodeMessage } from 'dynim-core';
+import type { CodeMessage, Checkpoint, RestoreResult } from 'dynim-core';
 export interface DynimConfig {
+    /** Function to fetch a session token for authentication */
     getSession?: () => Promise<{
         token: string;
         refreshToken?: string;
     }>;
+    /** Called when an error occurs */
     onError?: (error: Event | Error) => void;
+    /** NPM packages to expose to bundles (e.g., { 'react-router-dom': ReactRouterDOM }) */
     packages?: Record<string, unknown>;
+    /** Custom hooks to expose to bundles */
     hooks?: Record<string, unknown>;
+    /** React contexts to expose to bundles */
     contexts?: Record<string, unknown>;
 }
 export interface DynimContextValue {
+    /** Enter edit mode (shows builder UI) */
     enterBuilder: () => void;
+    /** Exit edit mode */
     exitBuilder: () => void;
+    /** Whether builder/edit mode is active */
     isEditing: boolean;
+    /** Send a code edit request to AI */
     sendCode: (query: string) => Promise<void>;
+    /** Save current edits */
     saveCode: () => Promise<void>;
+    /** Abandon/discard current edits */
     abandonCode: () => Promise<void>;
+    /** Get active checkpoints for the project */
     getCheckpoints: () => Promise<Checkpoint[]>;
+    /** Restore to a specific checkpoint (reloads bundle on success) */
     restoreCheckpoint: (checkpointId: string) => Promise<RestoreResult>;
+    /** Whether a checkpoint restore is in progress */
     isRestoring: boolean;
+    /** Current code message state (thinking, edits, etc.) */
     codeMessage: CodeMessage;
+    /** Whether a bundle is currently loaded */
     isBundleLoaded: boolean;
+    /** Whether bundle is loading */
     isBundleLoading: boolean;
 }
 export interface DynimProviderProps {
     children: ReactNode;
     config?: DynimConfig;
 }
+/**
+ * DynimProvider - Wrap your app with this to enable Dynim functionality
+ *
+ * @example
+ * ```tsx
+ * import { DynimProvider } from 'dynim-react';
+ *
+ * <DynimProvider>
+ *   <App />
+ * </DynimProvider>
+ * ```
+ */
 export declare function DynimProvider({ children, config, }: DynimProviderProps): JSX.Element;
+/**
+ * Hook to access Dynim functionality
+ */
 export declare function useDynim(): DynimContextValue;
 //# sourceMappingURL=DynimProvider.d.ts.map

package/dist/DynimProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynimProvider.d.ts","sourceRoot":"","sources":["../src/DynimProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAc,EAMZ,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAEf,OAAO,EAIL,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,WAAW,EACjB,MAAM,YAAY,CAAC;AAGpB,MAAM,WAAW,WAAW;IAC1B,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACrE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,KAAK,IAAI,CAAC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,cAAc,EAAE,MAAM,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC;IAC5C,iBAAiB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC;IACpE,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,cAAc,EAAE,OAAO,CAAC;IACxB,eAAe,EAAE,OAAO,CAAC;CAC1B;AAID,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,MAAW,GACZ,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAwGlC;AAED,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C"}
+{"version":3,"file":"DynimProvider.d.ts","sourceRoot":"","sources":["../src/DynimProvider.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAc,EAQZ,KAAK,SAAS,EAEf,MAAM,OAAO,CAAC;AAWf,OAAO,KAAK,EAKV,WAAW,EACX,UAAU,EACV,aAAa,EAGd,MAAM,YAAY,CAAC;AAIpB,MAAM,WAAW,WAAW;IAC1B,2DAA2D;IAC3D,UAAU,CAAC,EAAE,MAAM,OAAO,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,YAAY,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACrE,kCAAkC;IAClC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,KAAK,IAAI,CAAC;IACzC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACpC;AAED,MAAM,WAAW,iBAAiB;IAChC,yCAAyC;IACzC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,qBAAqB;IACrB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,0CAA0C;IAC1C,SAAS,EAAE,OAAO,CAAC;IACnB,qCAAqC;IACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,yBAAyB;IACzB,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,oCAAoC;IACpC,WAAW,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACjC,6CAA6C;IAC7C,cAAc,EAAE,MAAM,OAAO,CAAC,UAAU,EAAE,CAAC,CAAC;IAC5C,mEAAmE;IACnE,iBAAiB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC;IACpE,kDAAkD;IAClD,WAAW,EAAE,OAAO,CAAC;IACrB,yDAAyD;IACzD,WAAW,EAAE,WAAW,CAAC;IACzB,2CAA2C;IAC3C,cAAc,EAAE,OAAO,CAAC;IACxB,gCAAgC;IAChC,eAAe,EAAE,OAAO,CAAC;CAC1B;AAID,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,WAAW,CAAC;CACtB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,MAAW,GACZ,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAkdlC;AAED;;GAEG;AACH,wBAAgB,QAAQ,IAAI,iBAAiB,CAM5C"}

package/dist/DynimProvider.js

@@ -1,36 +1,76 @@
 import { jsxs as _jsxs, Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 /**
- * DynimProvider - React wrapper around DynimManager
+ * DynimProvider - Single provider for all Dynim functionality
  *
- * Framework-specific responsibilities:
- * - Shared context setup (React, ReactDOM, packages)
- * - React context provider + hook
- * - Rendering TenantApp or children
- * - Theme <style> injection
+ * Handles:
+ * - Loading tenant bundles
+ * - Visual builder UI (when user has edit permissions)
+ * - Shared context for bundles to access React, packages, etc.
  */
-import React, { createContext, useContext, useEffect, useMemo, useState, } from 'react';
+import React, { createContext, useContext, useEffect, useRef, useCallback, useMemo, useState, } from 'react';
 import ReactDOM from 'react-dom';
-import { createDynimManager, } from 'dynim-core';
+import { createBuilderClient, createBuilder, createCodeClient, createBundleLoader, createCSSLoader, BundleNotFoundError, BundleAuthError, } from 'dynim-core';
 import { createSharedContext, updateSharedContext, isSharedContextReady } from './inference/sharedContext';
+import { generateThemeCSS } from './theme';
 const DynimContext = createContext(null);
+/**
+ * DynimProvider - Wrap your app with this to enable Dynim functionality
+ *
+ * @example
+ * ```tsx
+ * import { DynimProvider } from 'dynim-react';
+ *
+ * <DynimProvider>
+ *   <App />
+ * </DynimProvider>
+ * ```
+ */
 export function DynimProvider({ children, config = {}, }) {
-    // Create manager once (stable across renders)
-    const manager = useMemo(() => createDynimManager({
-        getSession: config.getSession,
-        onError: config.onError,
-    }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    // Subscribe to manager state
-    const [state, setState] = useState(() => manager.getSnapshot());
+    const builderClientRef = useRef(null);
+    const builderRef = useRef(null);
+    const codeClientRef = useRef(null);
+    const bundleLoaderRef = useRef(null);
+    const cssLoaderRef = useRef(null);
+    // Track when we're exiting to prevent auto-load from re-triggering
+    const isExitingRef = useRef(false);
+    const hasAttemptedInitialLoadRef = useRef(false);
+    const isBuilderActiveRef = useRef(false);
+    const [isEditing, setIsEditing] = useState(false);
+    const [isBundleLoaded, setIsBundleLoaded] = useState(false);
+    const [isBundleLoading, setIsBundleLoading] = useState(false);
+    const [isInitialLoadComplete, setIsInitialLoadComplete] = useState(false);
+    const [TenantApp, setTenantApp] = useState(null);
+    const [bundleError, setBundleError] = useState(null);
+    const [isRestoring, setIsRestoring] = useState(false);
+    const [codeMessage, setCodeMessage] = useState({
+        thinking: '',
+        text: '',
+        edits: [],
+        status: 'idle',
+        bundleReady: false,
+        bundleError: undefined,
+    });
+    // Cached auth token
+    const cachedTokenRef = useRef(null);
+    const tokenPromiseRef = useRef(null);
+    // Bundle load signal
+    const [bundleLoadSignal, setBundleLoadSignal] = useState(0);
+    const pendingBundleProjectIdRef = useRef(null);
+    // Theme state (fetched from API per project)
+    const [theme, setTheme] = useState(null);
+    const hasAttemptedThemeLoadRef = useRef(false);
+    // Keep config in ref to avoid re-triggering effects on every render
+    const configRef = useRef(config);
+    configRef.current = config;
+    // Set up shared context for bundles (only once on mount)
     useEffect(() => {
-        // Set up shared context for bundles (framework-specific)
-        const { packages = {}, hooks = {}, contexts = {} } = config;
+        const { packages = {}, hooks = {}, contexts = {} } = configRef.current;
         const sdkPackages = {
             'dynim-react': { DynimProvider, useDynim },
             ...packages,
         };
         if (!isSharedContextReady()) {
+            // Create fresh shared context
             createSharedContext({
                 React,
                 ReactDOM,
@@ -40,57 +80,359 @@ export function DynimProvider({ children, config = {}, }) {
             });
         }
         else {
+            // Update existing context with packages (handles HMR)
             updateSharedContext({
                 packages: sdkPackages,
                 hooks,
                 contexts,
             });
         }
-        // Subscribe to state changes
-        const unsubscribe = manager.subscribe(setState);
-        // Initialize manager
-        manager.init();
+    }, []);
+    // Get auth token (cached after first call)
+    const getAuthToken = useCallback(async () => {
+        const { getSession } = configRef.current;
+        // Return cached token if available
+        if (cachedTokenRef.current)
+            return cachedTokenRef.current;
+        // Reuse in-flight promise if one exists
+        if (tokenPromiseRef.current)
+            return tokenPromiseRef.current;
+        if (getSession) {
+            tokenPromiseRef.current = (async () => {
+                try {
+                    const session = await getSession();
+                    cachedTokenRef.current = session.token;
+                    return session.token;
+                }
+                catch {
+                    return null;
+                }
+                finally {
+                    tokenPromiseRef.current = null;
+                }
+            })();
+            return tokenPromiseRef.current;
+        }
+        return null;
+    }, []);
+    // Initialize code client (only once on mount)
+    useEffect(() => {
+        const { getSession, onError } = configRef.current;
+        codeClientRef.current = createCodeClient({
+            getSession,
+            onMessageUpdate: setCodeMessage,
+            onError: (error) => {
+                console.error('[DynimProvider] Code error:', error);
+                configRef.current.onError?.(error);
+            },
+        });
+    }, []);
+    // Load bundle ref
+    const loadBundleRef = useRef(null);
+    // Initialize builder (only once on mount)
+    useEffect(() => {
+        const { getSession } = configRef.current;
+        builderRef.current = createBuilder({
+            getSession,
+            codeClient: codeClientRef.current ?? undefined,
+            onExitStart: () => {
+                isExitingRef.current = true;
+                isBuilderActiveRef.current = false;
+                codeClientRef.current?.abort();
+                codeClientRef.current?.resetMessage();
+            },
+            loadBundle: (bundleUrl) => {
+                // Note: isExitingRef is already set by onExitStart for the exit flow.
+                // Don't set it here — this callback is also used by checkpoint restore
+                // while the builder is still active.
+                return loadBundleRef.current?.(bundleUrl) ?? Promise.resolve();
+            },
+            onEnter: () => {
+                isExitingRef.current = false;
+                isBuilderActiveRef.current = true;
+                setIsEditing(true);
+            },
+            onExit: () => {
+                setIsEditing(false);
+            },
+        });
         return () => {
-            unsubscribe();
-            manager.destroy();
+            builderRef.current?.destroy();
+            // Clean up CSS link element on unmount
+            cssLoaderRef.current?.unload();
+        };
+    }, []);
+    // Initialize builder client (only once on mount)
+    useEffect(() => {
+        const { getSession } = configRef.current;
+        builderClientRef.current = createBuilderClient({
+            getSession,
+            onError: (error) => {
+                console.error('[DynimProvider] Error:', error);
+                configRef.current.onError?.(error);
+            },
+        });
+    }, []);
+    // Get bundle loader
+    const getBundleLoader = useCallback(() => {
+        if (!bundleLoaderRef.current) {
+            bundleLoaderRef.current = createBundleLoader({
+                getAuthToken,
+                includeCredentials: true,
+                onError: (error) => {
+                    console.error('[DynimProvider] Bundle load failed:', error);
+                    configRef.current.onError?.(error);
+                },
+            });
+        }
+        return bundleLoaderRef.current;
+    }, [getAuthToken]);
+    // Get CSS loader
+    const getCSSLoader = useCallback(() => {
+        if (!cssLoaderRef.current) {
+            cssLoaderRef.current = createCSSLoader({
+                linkId: 'dynim-bundle-css',
+                onError: (error) => {
+                    console.warn('[DynimProvider] CSS load failed:', error);
+                },
+            });
+        }
+        return cssLoaderRef.current;
+    }, []);
+    // Load bundle (JS + CSS)
+    const loadBundle = useCallback(async (bundleUrl, loadCSS = true) => {
+        const loader = getBundleLoader();
+        if (loader.isLoading())
+            return;
+        setIsBundleLoading(true);
+        setBundleError(null);
+        try {
+            const { App, cleanup } = await loader.load(bundleUrl);
+            setTenantApp(() => App);
+            setIsBundleLoaded(true);
+            cleanup();
+            // Load CSS alongside JS bundle
+            if (loadCSS) {
+                const cssLoader = getCSSLoader();
+                const isTemp = bundleUrl.includes('temp=true');
+                const cssUrl = isTemp ? '/api/code/css?temp=true' : '/api/code/css';
+                if (isTemp) {
+                    // Temp/preview CSS - bust cache to get latest
+                    cssLoader.loadWithCacheBust(cssUrl);
+                }
+                else {
+                    // Saved CSS - let browser cache
+                    cssLoader.load(cssUrl);
+                }
+            }
+        }
+        catch (error) {
+            // 404 = no bundle, 401 = not authenticated - show children
+            if (error instanceof BundleNotFoundError || error instanceof BundleAuthError) {
+                setTenantApp(null);
+                setIsBundleLoaded(false);
+                // Also unload any CSS
+                getCSSLoader().unload();
+                return;
+            }
+            setBundleError(error);
+        }
+        finally {
+            setIsBundleLoading(false);
+        }
+    }, [getBundleLoader, getCSSLoader]);
+    // Keep ref updated
+    useEffect(() => {
+        loadBundleRef.current = loadBundle;
+    }, [loadBundle]);
+    // Theme is fetched lazily when entering builder mode
+    // This avoids making HTTP requests on mount that could trigger auth redirects
+    const fetchTheme = useCallback(async () => {
+        if (hasAttemptedThemeLoadRef.current)
+            return;
+        if (!configRef.current.getSession)
+            return;
+        hasAttemptedThemeLoadRef.current = true;
+        try {
+            const token = await getAuthToken();
+            const headers = {};
+            if (token) {
+                headers['Authorization'] = `Bearer ${token}`;
+            }
+            const response = await fetch('/api/code/theme', {
+                headers,
+                credentials: 'include',
+            });
+            if (response.ok) {
+                const data = await response.json();
+                setTheme(data);
+            }
+        }
+        catch (error) {
+            // Theme fetch failed - use defaults (non-critical)
+            console.warn('[DynimProvider] Failed to fetch theme:', error);
+        }
+    }, [getAuthToken]);
+    // Auto-load saved bundle on mount if auth is available
+    useEffect(() => {
+        if (hasAttemptedInitialLoadRef.current)
+            return;
+        hasAttemptedInitialLoadRef.current = true;
+        const { getSession } = configRef.current;
+        // No auth configured = skip bundle load
+        if (!getSession) {
+            setIsInitialLoadComplete(true);
+            return;
+        }
+        // Load bundle with the provided token
+        const doInitialLoad = async () => {
+            try {
+                await loadBundleRef.current?.('/api/code/bundle');
+            }
+            catch (error) {
+                // Errors handled in loadBundle (404 = no bundle, etc.)
+                console.log('[DynimProvider] Initial bundle load:', error.message);
+            }
+            finally {
+                setIsInitialLoadComplete(true);
+            }
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
+        doInitialLoad();
+        // Prefetch theme after 3s delay (non-blocking, so it's ready when builder opens)
+        const themeTimeout = setTimeout(() => {
+            fetchTheme();
+        }, 3000);
+        return () => clearTimeout(themeTimeout);
+    }, [fetchTheme]);
+    // Load saved bundle
+    const loadSavedBundle = useCallback(async () => {
+        // Note: CSS is loaded separately by saveCode/abandonCode with cache busting
+        await loadBundle('/api/code/bundle', false);
+    }, [loadBundle]);
+    // Watch for bundleReady
+    useEffect(() => {
+        if (codeMessage.bundleReady && codeMessage.projectId) {
+            if (isBuilderActiveRef.current && !isExitingRef.current) {
+                pendingBundleProjectIdRef.current = codeMessage.projectId;
+                setBundleLoadSignal(s => s + 1);
+            }
+        }
+    }, [codeMessage.bundleReady, codeMessage.projectId]);
+    // Load temp bundle on signal (JS + CSS with cache busting)
+    useEffect(() => {
+        if (bundleLoadSignal === 0)
+            return;
+        const projectId = pendingBundleProjectIdRef.current;
+        if (!projectId || isExitingRef.current) {
+            pendingBundleProjectIdRef.current = null;
+            return;
+        }
+        // Load JS bundle with cache busting
+        const bundleUrl = `/api/code/bundle?temp=true&_t=${Date.now()}`;
+        loadBundleRef.current?.(bundleUrl, true); // true = also load CSS
+        pendingBundleProjectIdRef.current = null;
+    }, [bundleLoadSignal]);
+    // Public methods
+    const enterBuilder = useCallback(() => {
+        if (builderRef.current && !builderRef.current.isActive()) {
+            builderRef.current.enter();
+            // Fetch theme lazily when entering builder
+            fetchTheme();
+        }
+    }, [fetchTheme]);
+    const exitBuilder = useCallback(() => {
+        if (builderRef.current && builderRef.current.isActive()) {
+            builderRef.current.exit();
+        }
+    }, []);
+    const sendCode = useCallback(async (query) => {
+        await codeClientRef.current?.sendCode(query);
+    }, []);
+    const saveCode = useCallback(async () => {
+        await codeClientRef.current?.saveCode();
+        await loadSavedBundle();
+        // Force reload CSS with cache bust since saved CSS has changed
+        getCSSLoader().loadWithCacheBust('/api/code/css');
+    }, [loadSavedBundle, getCSSLoader]);
+    const abandonCode = useCallback(async () => {
+        await codeClientRef.current?.abandonCode();
+        await loadSavedBundle();
+        // Reload saved CSS (may have been showing temp CSS)
+        getCSSLoader().loadWithCacheBust('/api/code/css');
+    }, [loadSavedBundle, getCSSLoader]);
+    const getCheckpoints = useCallback(async () => {
+        return codeClientRef.current?.getCheckpoints() ?? [];
+    }, []);
+    const restoreCheckpoint = useCallback(async (checkpointId) => {
+        if (!codeClientRef.current) {
+            throw new Error('Code client not initialized');
+        }
+        setIsRestoring(true);
+        try {
+            const result = await codeClientRef.current.restoreCheckpoint(checkpointId);
+            // Reload bundle + CSS on success (loadBundle handles CSS when loadCSS=true)
+            if (result.bundle_ready) {
+                const bundleUrl = `/api/code/bundle?temp=true&_t=${Date.now()}`;
+                await loadBundleRef.current?.(bundleUrl, true);
+            }
+            return result;
+        }
+        finally {
+            setIsRestoring(false);
+        }
     }, []);
     const contextValue = useMemo(() => ({
-        enterBuilder: manager.enterBuilder,
-        exitBuilder: manager.exitBuilder,
-        isEditing: state.isEditing,
-        sendCode: manager.sendCode,
-        saveCode: manager.saveCode,
-        abandonCode: manager.abandonCode,
-        getCheckpoints: manager.getCheckpoints,
-        restoreCheckpoint: manager.restoreCheckpoint,
-        isRestoring: state.isRestoring,
-        codeMessage: state.codeMessage,
-        isBundleLoaded: state.isBundleLoaded,
-        isBundleLoading: state.isBundleLoading,
-    }), [manager, state]);
+        enterBuilder,
+        exitBuilder,
+        isEditing,
+        sendCode,
+        saveCode,
+        abandonCode,
+        getCheckpoints,
+        restoreCheckpoint,
+        isRestoring,
+        codeMessage,
+        isBundleLoaded,
+        isBundleLoading,
+    }), [
+        enterBuilder,
+        exitBuilder,
+        isEditing,
+        sendCode,
+        saveCode,
+        abandonCode,
+        getCheckpoints,
+        restoreCheckpoint,
+        isRestoring,
+        codeMessage,
+        isBundleLoaded,
+        isBundleLoading,
+    ]);
     // Render content
     const renderContent = () => {
-        if (!state.isInitialLoadComplete)
+        if (!isInitialLoadComplete)
             return null;
-        if (state.bundleError) {
+        if (bundleError) {
             return (_jsxs(_Fragment, { children: [_jsxs("div", { style: {
                             padding: 12,
                             background: '#fef3c7',
                             borderBottom: '1px solid #fcd34d',
                             fontSize: 13,
                             color: '#92400e',
-                        }, children: ["Bundle error: ", state.bundleError.message] }), children] }));
+                        }, children: ["Bundle error: ", bundleError.message] }), children] }));
         }
-        if (state.tenantApp) {
-            const TenantApp = state.tenantApp;
+        if (TenantApp) {
             return _jsx(TenantApp, {});
         }
         return children;
     };
-    return (_jsxs(DynimContext.Provider, { value: contextValue, children: [_jsx("style", { children: state.themeCSS }), renderContent()] }));
+    // Generate theme CSS from API-fetched theme
+    const themeCSS = useMemo(() => generateThemeCSS(theme ?? undefined), [theme]);
+    return (_jsxs(DynimContext.Provider, { value: contextValue, children: [_jsx("style", { children: themeCSS }), renderContent()] }));
 }
+/**
+ * Hook to access Dynim functionality
+ */
 export function useDynim() {
     const context = useContext(DynimContext);
     if (!context) {

package/dist/plugins/vite/plugin.d.ts

@@ -1,4 +1,54 @@
-import { dynimPackages } from 'dynim-core/vite';
-export { dynimPackages, type DynimPackagesOptions } from 'dynim-core/vite';
+/**
+ * Vite plugin for Dynim package exposure
+ *
+ * Generates a virtual module that exports all specified packages,
+ * so you don't have to manually import and map each one.
+ *
+ * Usage:
+ * ```ts
+ * // vite.config.ts
+ * import { dynimPackages } from 'dynim-react/vite'
+ *
+ * export default {
+ *   plugins: [
+ *     dynimPackages([
+ *       'react-router-dom',
+ *       '@tanstack/react-query',
+ *       'axios',
+ *     ])
+ *   ]
+ * }
+ * ```
+ *
+ * Then in your app:
+ * ```tsx
+ * import packages from 'virtual:dynim-packages'
+ *
+ * <DynimProvider config={{ packages }}>
+ * ```
+ */
+import type { Plugin } from 'vite';
+export interface DynimPackagesOptions {
+    /**
+     * List of package names to expose to dynim bundles.
+     * These must be installed in your project's node_modules.
+     */
+    packages: string[];
+}
+/**
+ * Vite plugin that generates a virtual module exporting all specified packages.
+ *
+ * @param packages - Array of package names, or options object
+ * @returns Vite plugin
+ *
+ * @example
+ * // Simple usage - array of package names
+ * dynimPackages(['react-router-dom', 'axios'])
+ *
+ * @example
+ * // Options object
+ * dynimPackages({ packages: ['react-router-dom', 'axios'] })
+ */
+export declare function dynimPackages(packagesOrOptions: string[] | DynimPackagesOptions): Plugin;
 export default dynimPackages;
 //# sourceMappingURL=plugin.d.ts.map

package/dist/plugins/vite/plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../../src/plugins/vite/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAEhD,OAAO,EAAE,aAAa,EAAE,KAAK,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAC3E,eAAe,aAAa,CAAC"}
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../../src/plugins/vite/plugin.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAA;AAKlC,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,QAAQ,EAAE,MAAM,EAAE,CAAA;CACnB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAC3B,iBAAiB,EAAE,MAAM,EAAE,GAAG,oBAAoB,GACjD,MAAM,CAwCR;AAED,eAAe,aAAa,CAAA"}

package/dist/plugins/vite/plugin.js

@@ -1,3 +1,82 @@
-import { dynimPackages } from 'dynim-core/vite';
-export { dynimPackages } from 'dynim-core/vite';
+/**
+ * Vite plugin for Dynim package exposure
+ *
+ * Generates a virtual module that exports all specified packages,
+ * so you don't have to manually import and map each one.
+ *
+ * Usage:
+ * ```ts
+ * // vite.config.ts
+ * import { dynimPackages } from 'dynim-react/vite'
+ *
+ * export default {
+ *   plugins: [
+ *     dynimPackages([
+ *       'react-router-dom',
+ *       '@tanstack/react-query',
+ *       'axios',
+ *     ])
+ *   ]
+ * }
+ * ```
+ *
+ * Then in your app:
+ * ```tsx
+ * import packages from 'virtual:dynim-packages'
+ *
+ * <DynimProvider config={{ packages }}>
+ * ```
+ */
+const VIRTUAL_MODULE_ID = 'virtual:dynim-packages';
+const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID;
+/**
+ * Vite plugin that generates a virtual module exporting all specified packages.
+ *
+ * @param packages - Array of package names, or options object
+ * @returns Vite plugin
+ *
+ * @example
+ * // Simple usage - array of package names
+ * dynimPackages(['react-router-dom', 'axios'])
+ *
+ * @example
+ * // Options object
+ * dynimPackages({ packages: ['react-router-dom', 'axios'] })
+ */
+export function dynimPackages(packagesOrOptions) {
+    const packageNames = Array.isArray(packagesOrOptions)
+        ? packagesOrOptions
+        : packagesOrOptions.packages;
+    return {
+        name: 'dynim-packages',
+        resolveId(id) {
+            if (id === VIRTUAL_MODULE_ID) {
+                return RESOLVED_VIRTUAL_MODULE_ID;
+            }
+        },
+        load(id) {
+            if (id === RESOLVED_VIRTUAL_MODULE_ID) {
+                // Generate import statements for each package
+                const imports = packageNames
+                    .map((name, i) => `import * as _pkg${i} from '${name}'`)
+                    .join('\n');
+                // Generate the packages object entries
+                // Spread namespace objects into plain objects so exports are enumerable
+                const entries = packageNames
+                    .map((name, i) => `  '${name}': { ..._pkg${i} }`)
+                    .join(',\n');
+                // Return the generated module code
+                return `${imports}
+
+const packages = {
+${entries}
+}
+
+export default packages
+export { packages }
+`;
+            }
+        },
+    };
+}
 export default dynimPackages;

package/dist/theme.d.ts

@@ -1,2 +1,58 @@
-export { generateThemeCSS, defaultTheme, themeVars, type DynimTheme } from 'dynim-core';
+/**
+ * Dynim Theme System
+ *
+ * Theme is automatically fetched from the API per project.
+ * CSS variables are injected with defaults matching the original design.
+ */
+export interface DynimTheme {
+    accent?: string;
+    accentHover?: string;
+    builderBg?: string;
+    builderText?: string;
+    builderFont?: string;
+    builderRadius?: string;
+    builderOpacity?: string;
+    chatAccent?: string;
+    chatBg?: string;
+    chatText?: string;
+    chatFont?: string;
+    chatRadius?: string;
+    chatOpacity?: string;
+    selectionColor?: string;
+    hoverColor?: string;
+    selectionRadius?: string;
+    selectionOpacity?: string;
+    hoverOpacity?: string;
+}
+/**
+ * Default theme values - matches original SDK styling exactly
+ */
+export declare const defaultTheme: Required<DynimTheme>;
+/**
+ * Generates CSS variable declarations from a theme object
+ */
+export declare function generateThemeCSS(theme?: DynimTheme): string;
+/**
+ * CSS variable references for use in styles
+ */
+export declare const themeVars: {
+    readonly accent: "var(--dynim-accent)";
+    readonly accentHover: "var(--dynim-accent-hover)";
+    readonly builderBg: "var(--dynim-builder-bg)";
+    readonly builderText: "var(--dynim-builder-text)";
+    readonly builderFont: "var(--dynim-builder-font)";
+    readonly builderRadius: "var(--dynim-builder-radius)";
+    readonly builderOpacity: "var(--dynim-builder-opacity)";
+    readonly chatAccent: "var(--dynim-chat-accent)";
+    readonly chatBg: "var(--dynim-chat-bg)";
+    readonly chatText: "var(--dynim-chat-text)";
+    readonly chatFont: "var(--dynim-chat-font)";
+    readonly chatRadius: "var(--dynim-chat-radius)";
+    readonly chatOpacity: "var(--dynim-chat-opacity)";
+    readonly selectionColor: "var(--dynim-selection-color)";
+    readonly hoverColor: "var(--dynim-hover-color)";
+    readonly selectionRadius: "var(--dynim-selection-radius)";
+    readonly selectionOpacity: "var(--dynim-selection-opacity)";
+    readonly hoverOpacity: "var(--dynim-hover-opacity)";
+};
 //# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,SAAS,EAAE,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,MAAM,WAAW,UAAU;IAEzB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,cAAc,CAAC,EAAE,MAAM,CAAC;IAGxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IAGrB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAC,UAAU,CAwB7C,CAAC;AA+BF;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,GAAE,UAAe,GAAG,MAAM,CAW/D;AAED;;GAEG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;CAwBZ,CAAC"}

package/dist/theme.js

@@ -1 +1,97 @@
-export { generateThemeCSS, defaultTheme, themeVars } from 'dynim-core';
+/**
+ * Dynim Theme System
+ *
+ * Theme is automatically fetched from the API per project.
+ * CSS variables are injected with defaults matching the original design.
+ */
+/**
+ * Default theme values - matches original SDK styling exactly
+ */
+export const defaultTheme = {
+    // Builder Bar - original values
+    accent: '#3b82f6',
+    accentHover: '#2563eb',
+    builderBg: '#000000',
+    builderText: '#ffffff',
+    builderFont: 'system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
+    builderRadius: '22px',
+    builderOpacity: '0.08',
+    // Chat Widget - original values
+    chatAccent: '#3b82f6',
+    chatBg: '#ffffff',
+    chatText: '#1f2937',
+    chatFont: 'system-ui, -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif',
+    chatRadius: '16px',
+    chatOpacity: '0.08',
+    // Selection - original values
+    selectionColor: '#8b5cf6',
+    hoverColor: '#0ea5e9',
+    selectionRadius: '0',
+    selectionOpacity: '0.1',
+    hoverOpacity: '0.1',
+};
+/**
+ * CSS variable names mapped to theme keys
+ */
+const cssVarMap = {
+    // Builder Bar
+    accent: '--dynim-accent',
+    accentHover: '--dynim-accent-hover',
+    builderBg: '--dynim-builder-bg',
+    builderText: '--dynim-builder-text',
+    builderFont: '--dynim-builder-font',
+    builderRadius: '--dynim-builder-radius',
+    builderOpacity: '--dynim-builder-opacity',
+    // Chat Widget
+    chatAccent: '--dynim-chat-accent',
+    chatBg: '--dynim-chat-bg',
+    chatText: '--dynim-chat-text',
+    chatFont: '--dynim-chat-font',
+    chatRadius: '--dynim-chat-radius',
+    chatOpacity: '--dynim-chat-opacity',
+    // Selection
+    selectionColor: '--dynim-selection-color',
+    hoverColor: '--dynim-hover-color',
+    selectionRadius: '--dynim-selection-radius',
+    selectionOpacity: '--dynim-selection-opacity',
+    hoverOpacity: '--dynim-hover-opacity',
+};
+/**
+ * Generates CSS variable declarations from a theme object
+ */
+export function generateThemeCSS(theme = {}) {
+    const merged = { ...defaultTheme, ...theme };
+    const vars = Object.entries(merged)
+        .map(([key, value]) => {
+        const cssVar = cssVarMap[key];
+        return `${cssVar}: ${value};`;
+    })
+        .join('\n  ');
+    return `:root {\n  ${vars}\n}`;
+}
+/**
+ * CSS variable references for use in styles
+ */
+export const themeVars = {
+    // Builder Bar
+    accent: 'var(--dynim-accent)',
+    accentHover: 'var(--dynim-accent-hover)',
+    builderBg: 'var(--dynim-builder-bg)',
+    builderText: 'var(--dynim-builder-text)',
+    builderFont: 'var(--dynim-builder-font)',
+    builderRadius: 'var(--dynim-builder-radius)',
+    builderOpacity: 'var(--dynim-builder-opacity)',
+    // Chat Widget
+    chatAccent: 'var(--dynim-chat-accent)',
+    chatBg: 'var(--dynim-chat-bg)',
+    chatText: 'var(--dynim-chat-text)',
+    chatFont: 'var(--dynim-chat-font)',
+    chatRadius: 'var(--dynim-chat-radius)',
+    chatOpacity: 'var(--dynim-chat-opacity)',
+    // Selection
+    selectionColor: 'var(--dynim-selection-color)',
+    hoverColor: 'var(--dynim-hover-color)',
+    selectionRadius: 'var(--dynim-selection-radius)',
+    selectionOpacity: 'var(--dynim-selection-opacity)',
+    hoverOpacity: 'var(--dynim-hover-opacity)',
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynim-react",
-  "version": "1.0.59",
+  "version": "1.0.63",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -27,7 +27,7 @@
     "dev": "tsc --watch"
   },
   "dependencies": {
-    "dynim-core": "^1.0.33"
+    "dynim-core": "^1.0.37"
   },
   "peerDependencies": {
     "react": ">=17.0.0",