@tanstack/cta-ui-base 0.29.1 → 0.30.0

package/dist/components/file-navigator.js

@@ -5,8 +5,11 @@ import { useApplicationMode, useDryRun, useFilters, useOriginalOutput, useProjec
 import { getFileClass, twClasses } from '../file-classes';
 import FileViewer from './file-viewer';
 import FileTree from './file-tree';
+import WebContainerProvider from './web-container-provider';
+import { WebContainerPreview } from './webcontainer-preview';
 import { Label } from './ui/label';
 import { Switch } from './ui/switch';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './ui/tabs';
 export function Filters() {
     const { includedFiles, toggleFilter } = useFilters();
     return (_jsxs("div", { className: "bg-white dark:bg-black/40 shadow-xl p-4 rounded-lg flex flex-row items-center gap-4 mb-2", children: [_jsx("h3", { className: "font-medium whitespace-nowrap", children: "File Filters" }), _jsxs("div", { className: "flex flex-row items-center", children: [_jsx(Switch, { id: "unchanged", checked: includedFiles.includes('unchanged'), onCheckedChange: () => toggleFilter('unchanged'), className: "mr-2" }), _jsx(Label, { htmlFor: "unchanged", className: twClasses.unchanged, children: "Unchanged" })] }), _jsxs("div", { className: "flex flex-row items-center", children: [_jsx(Switch, { id: "added", checked: includedFiles.includes('added'), onCheckedChange: () => toggleFilter('added'), className: "mr-2" }), _jsx(Label, { htmlFor: "added", className: twClasses.added, children: "Added" })] }), _jsxs("div", { className: "flex flex-row items-center", children: [_jsx(Switch, { id: "modified", checked: includedFiles.includes('modified'), onCheckedChange: () => toggleFilter('modified'), className: "mr-2" }), _jsx(Label, { htmlFor: "modified", className: twClasses.modified, children: "Modified" })] }), _jsxs("div", { className: "flex flex-row items-center", children: [_jsx(Switch, { id: "deleted", checked: includedFiles.includes('deleted'), onCheckedChange: () => toggleFilter('deleted'), className: "mr-2" }), _jsx(Label, { htmlFor: "deleted", className: twClasses.deleted, children: "Deleted" })] }), _jsxs("div", { className: "flex flex-row items-center", children: [_jsx(Switch, { id: "overwritten", checked: includedFiles.includes('overwritten'), onCheckedChange: () => toggleFilter('overwritten'), className: "mr-2" }), _jsx(Label, { htmlFor: "overwritten", className: twClasses.overwritten, children: "Overwritten" })] })] }));
@@ -79,8 +82,22 @@ export default function FileNavigator() {
         return treeData;
     }, [tree, originalTree, localTree, includedFiles]);
     const ready = useReady();
+    // Prepare project files for WebContainer
+    const webContainerFiles = useMemo(() => {
+        console.log('Preparing WebContainer files, tree:', tree);
+        if (!tree) {
+            console.log('Tree is empty, returning empty array');
+            return [];
+        }
+        const files = Object.entries(tree).map(([path, content]) => ({
+            path,
+            content,
+        }));
+        console.log('WebContainer files prepared:', files.length, 'files');
+        return files;
+    }, [tree]);
     if (!ready) {
         return null;
     }
-    return (_jsxs("div", { className: "bg-white dark:bg-black/50 rounded-lg p-2 sm:p-4", children: [mode === 'add' && _jsx(Filters, {}), _jsxs("div", { className: "flex flex-row @container", children: [_jsx("div", { className: "w-1/3 @6xl:w-1/4 bg-gray-500/10 rounded-l-lg", children: _jsx(FileTree, { selectedFile: selectedFile, tree: fileTree }) }), _jsx("div", { className: "w-2/3 @6xl:w-3/4", children: selectedFile && modifiedFileContents ? (_jsx(FileViewer, { filePath: selectedFile, originalFile: originalFileContents, modifiedFile: modifiedFileContents })) : null })] })] }));
+    return (_jsx(WebContainerProvider, { projectFiles: webContainerFiles, children: _jsxs("div", { className: "bg-white dark:bg-black/50 rounded-lg p-2 sm:p-4", children: [mode === 'add' && _jsx(Filters, {}), _jsxs(Tabs, { defaultValue: "files", className: "w-full", children: [_jsxs(TabsList, { className: "mb-1 h-7 p-0.5 bg-transparent border border-gray-300 dark:border-gray-700", children: [_jsx(TabsTrigger, { value: "files", className: "text-xs h-6 px-3 py-0 data-[state=active]:bg-gray-200 dark:data-[state=active]:bg-gray-800", children: "Files" }), _jsx(TabsTrigger, { value: "preview", className: "text-xs h-6 px-3 py-0 data-[state=active]:bg-gray-200 dark:data-[state=active]:bg-gray-800", children: "Preview" })] }), _jsx(TabsContent, { value: "files", className: "mt-0", children: _jsxs("div", { className: "flex flex-row @container", children: [_jsx("div", { className: "w-1/3 @6xl:w-1/4 bg-gray-500/10 rounded-l-lg", children: _jsx(FileTree, { selectedFile: selectedFile, tree: fileTree }) }), _jsx("div", { className: "w-2/3 @6xl:w-3/4", children: selectedFile && modifiedFileContents ? (_jsx(FileViewer, { filePath: selectedFile, originalFile: originalFileContents, modifiedFile: modifiedFileContents })) : null })] }) }), _jsx(TabsContent, { value: "preview", className: "mt-0", children: _jsx("div", { className: "h-[800px]", children: _jsx(WebContainerPreview, {}) }) })] })] }) }));
 }

package/dist/components/file-viewer.js

@@ -33,8 +33,15 @@ export default function FileViewer({ originalFile, modifiedFile, filePath, }) {
         return javascript();
     }
     const language = getLanguage(filePath);
-    if (!originalFile || originalFile === modifiedFile) {
-        return (_jsx(CodeMirror, { value: modifiedFile, theme: theme, height: "100vh", width: "100%", readOnly: true, extensions: [language], className: "text-lg" }));
+    // Display placeholder for binary files
+    const displayModified = modifiedFile.startsWith('base64::')
+        ? '<binary file>'
+        : modifiedFile;
+    const displayOriginal = originalFile?.startsWith('base64::')
+        ? '<binary file>'
+        : originalFile;
+    if (!displayOriginal || displayOriginal === displayModified) {
+        return (_jsx(CodeMirror, { value: displayModified, theme: theme, height: "100vh", width: "100%", readOnly: true, extensions: [language], className: "text-lg" }));
     }
-    return (_jsxs(CodeMirrorMerge, { orientation: "a-b", theme: theme, className: "text-lg", children: [_jsx(CodeMirrorMerge.Original, { value: originalFile, extensions: [language] }), _jsx(CodeMirrorMerge.Modified, { value: modifiedFile, extensions: [language] })] }));
+    return (_jsxs(CodeMirrorMerge, { orientation: "a-b", theme: theme, className: "text-lg", children: [_jsx(CodeMirrorMerge.Original, { value: displayOriginal, extensions: [language] }), _jsx(CodeMirrorMerge.Modified, { value: displayModified, extensions: [language] })] }));
 }

package/dist/components/web-container-provider.d.ts

@@ -0,0 +1,31 @@
+export declare const WebContainerContext: import("react").Context<import("zustand").StoreApi<{
+    webContainer: Promise<import("@webcontainer/api").WebContainer> | null;
+    ready: boolean;
+    setupStep: import("../hooks/use-webcontainer-store").SetupStep;
+    statusMessage: string;
+    terminalOutput: Array<string>;
+    previewUrl: string | null;
+    error: string | null;
+    devProcess: import("@webcontainer/api").WebContainerProcess | null;
+    projectFiles: Array<{
+        path: string;
+        content: string;
+    }>;
+    isInstalling: boolean;
+    teardown: () => void;
+    updateProjectFiles: (projectFiles: Array<{
+        path: string;
+        content: string;
+    }>) => Promise<void>;
+    startDevServer: () => Promise<void>;
+    addTerminalOutput: (output: string) => void;
+    installDependencies: () => Promise<void>;
+    setTerminalOutput: (output: Array<string>) => void;
+}> | null>;
+export default function WebContainerProvider({ children, projectFiles, }: {
+    children: React.ReactNode;
+    projectFiles: Array<{
+        path: string;
+        content: string;
+    }>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/web-container-provider.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useEffect, useState } from 'react';
+import { useStore } from 'zustand';
+import createWebContainerStore from '../hooks/use-webcontainer-store';
+export const WebContainerContext = createContext(null);
+export default function WebContainerProvider({ children, projectFiles, }) {
+    console.log('WebContainerProvider rendering with', projectFiles.length, 'files');
+    const [containerStore] = useState(() => createWebContainerStore(true));
+    const updateProjectFiles = useStore(containerStore, (state) => state.updateProjectFiles);
+    useEffect(() => {
+        console.log('WebContainerProvider useEffect triggered with', projectFiles.length, 'files');
+        updateProjectFiles(projectFiles);
+    }, [updateProjectFiles, projectFiles]);
+    return (_jsx(WebContainerContext.Provider, { value: containerStore, children: children }));
+}

package/dist/components/webcontainer-preview.d.ts

@@ -0,0 +1 @@
+export declare function WebContainerPreview(): import("react/jsx-runtime").JSX.Element;

package/dist/components/webcontainer-preview.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useContext, useEffect, useRef, useState } from 'react';
+import { useStore } from 'zustand';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { WebContainerContext } from './web-container-provider';
+export function WebContainerPreview() {
+    const containerStore = useContext(WebContainerContext);
+    if (!containerStore) {
+        throw new Error('WebContainerContext not found');
+    }
+    const webContainer = useStore(containerStore, (state) => state.webContainer);
+    const setupStep = useStore(containerStore, (state) => state.setupStep);
+    const statusMessage = useStore(containerStore, (state) => state.statusMessage);
+    const terminalOutput = useStore(containerStore, (state) => state.terminalOutput);
+    const error = useStore(containerStore, (state) => state.error);
+    const previewUrl = useStore(containerStore, (state) => state.previewUrl);
+    const startDevServer = useStore(containerStore, (state) => state.startDevServer);
+    const setTerminalOutput = useStore(containerStore, (state) => state.setTerminalOutput);
+    const [isTerminalOpen, setIsTerminalOpen] = useState(false);
+    // Auto-scroll terminal to bottom when new output arrives
+    const terminalRef = useRef(null);
+    useEffect(() => {
+        if (terminalRef.current) {
+            terminalRef.current.scrollTop = terminalRef.current.scrollHeight;
+        }
+    }, [terminalOutput]);
+    const getStepIcon = (step) => {
+        switch (step) {
+            case 'mounting':
+                return '📁';
+            case 'installing':
+                return '📦';
+            case 'starting':
+                return '🚀';
+            case 'ready':
+                return '✅';
+            case 'error':
+                return '❌';
+        }
+    };
+    const getStepColor = (step) => {
+        switch (step) {
+            case 'error':
+                return 'text-red-500';
+            case 'ready':
+                return 'text-green-500';
+            default:
+                return 'text-blue-500';
+        }
+    };
+    // Show progress dialog during setup (similar to "Creating Your Application")
+    if (!webContainer ||
+        setupStep === 'error' ||
+        setupStep !== 'ready' ||
+        !previewUrl) {
+        return (_jsx("div", { className: "flex items-center justify-center h-full bg-gray-50 dark:bg-gray-900", children: _jsxs("div", { className: "bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 max-w-2xl w-full mx-4 border-2 border-blue-500", children: [_jsx("h2", { className: "text-2xl font-bold mb-6 text-center", children: setupStep === 'error' ? 'Setup Failed' : 'Preparing Preview' }), setupStep === 'error' ? (_jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-4xl mb-4", children: "\u274C" }), _jsx("div", { className: "text-lg font-medium text-red-600 mb-2", children: "An error occurred" }), _jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400 mb-4", children: error }), _jsx("button", { onClick: startDevServer, className: "px-4 py-2 text-sm bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors", children: "\uD83D\uDD04 Retry" })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { className: "space-y-4 mb-6", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "text-2xl", children: getStepIcon('mounting') }), _jsx("div", { className: `flex-1 ${getStepColor(setupStep === 'mounting' ? 'mounting' : setupStep === 'installing' || setupStep === 'starting' || setupStep === 'ready' ? 'ready' : 'mounting')}`, children: "Mount Files" }), (setupStep === 'installing' ||
+                                                setupStep === 'starting' ||
+                                                setupStep === 'ready') &&
+                                                '✓'] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "text-2xl", children: getStepIcon('installing') }), _jsx("div", { className: `flex-1 ${getStepColor(setupStep === 'installing' ? 'installing' : setupStep === 'starting' || setupStep === 'ready' ? 'ready' : 'mounting')}`, children: "Install Dependencies" }), (setupStep === 'starting' || setupStep === 'ready') && '✓'] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "text-2xl", children: getStepIcon('starting') }), _jsx("div", { className: `flex-1 ${getStepColor(setupStep === 'starting' ? 'starting' : setupStep === 'ready' ? 'ready' : 'mounting')}`, children: "Start Server" }), setupStep === 'ready' && '✓'] })] }), _jsx("div", { className: "text-center text-sm text-gray-600 dark:text-gray-400", children: statusMessage || 'Preparing your application...' })] }))] }) }));
+    }
+    // Show the running application with collapsible terminal
+    return (_jsxs("div", { className: "flex flex-col h-full", children: [_jsx("div", { className: "flex-1", children: previewUrl ? (_jsx("iframe", { src: previewUrl, className: "w-full h-full border-0", title: "Application Preview", onLoad: () => console.log('Iframe loaded successfully'), onError: (e) => console.error('Iframe load error:', e) })) : (_jsx("div", { className: "flex items-center justify-center h-full bg-gray-100 dark:bg-gray-800", children: _jsxs("div", { className: "text-center", children: [_jsx("div", { className: "text-2xl mb-2", children: "\uD83D\uDD04" }), _jsx("div", { className: "text-sm text-gray-600 dark:text-gray-400", children: "Preview not available" })] }) })) }), _jsxs("div", { className: "border-t border-gray-200 dark:border-gray-700 bg-black text-green-400 flex flex-col flex-shrink-0", children: [_jsxs("div", { className: "p-2 border-b border-gray-700 bg-gray-900 flex items-center justify-between cursor-pointer hover:bg-gray-800 transition-colors", onClick: () => setIsTerminalOpen(!isTerminalOpen), children: [_jsxs("div", { className: "flex items-center gap-2 flex-1", children: [_jsx("button", { className: "text-gray-400 hover:text-gray-200", children: isTerminalOpen ? (_jsx(ChevronDown, { className: "w-4 h-4" })) : (_jsx(ChevronUp, { className: "w-4 h-4" })) }), _jsx("div", { className: "text-xs font-medium text-gray-300", children: "Terminal Output" }), setupStep === 'ready' && previewUrl && (_jsx("div", { className: "text-xs text-green-500", children: "\u25CF Server Running" }))] }), _jsxs("div", { className: "flex items-center gap-2", onClick: (e) => e.stopPropagation(), children: [previewUrl && (_jsx("button", { onClick: () => window.open(previewUrl, '_blank'), className: "px-2 py-1 text-xs bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors", children: "Open in New Tab" })), _jsx("button", { onClick: startDevServer, disabled: !webContainer, className: "px-2 py-1 text-xs bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors disabled:opacity-50", children: "\uD83D\uDD04 Restart" }), _jsx("button", { onClick: () => setTerminalOutput([]), className: "text-xs text-gray-400 hover:text-gray-200 transition-colors", children: "Clear" })] })] }), isTerminalOpen && (_jsx("div", { ref: terminalRef, className: "font-mono text-xs p-2 overflow-y-auto overflow-x-hidden", style: { maxHeight: '200px' }, children: terminalOutput.length > 0 ? (terminalOutput.map((line, index) => (_jsx("div", { className: "mb-1 leading-tight whitespace-pre-wrap break-words", children: line }, index)))) : (_jsx("div", { className: "text-gray-500", children: "No output yet..." })) }))] })] }));
+}

package/dist/hooks/use-web-container.d.ts

@@ -0,0 +1,24 @@
+export declare function useWebContainer(): import("zustand").StoreApi<{
+    webContainer: Promise<import("@webcontainer/api").WebContainer> | null;
+    ready: boolean;
+    setupStep: import("./use-webcontainer-store").SetupStep;
+    statusMessage: string;
+    terminalOutput: Array<string>;
+    previewUrl: string | null;
+    error: string | null;
+    devProcess: import("@webcontainer/api").WebContainerProcess | null;
+    projectFiles: Array<{
+        path: string;
+        content: string;
+    }>;
+    isInstalling: boolean;
+    teardown: () => void;
+    updateProjectFiles: (projectFiles: Array<{
+        path: string;
+        content: string;
+    }>) => Promise<void>;
+    startDevServer: () => Promise<void>;
+    addTerminalOutput: (output: string) => void;
+    installDependencies: () => Promise<void>;
+    setTerminalOutput: (output: Array<string>) => void;
+}> | null;

package/dist/hooks/use-web-container.js

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { WebContainerContext } from '../components/web-container-provider';
+export function useWebContainer() {
+    const webContainer = useContext(WebContainerContext);
+    return webContainer;
+}

package/dist/hooks/use-webcontainer-store.d.ts

@@ -0,0 +1,29 @@
+import { WebContainer } from '@webcontainer/api';
+import type { WebContainerProcess } from '@webcontainer/api';
+export type SetupStep = 'mounting' | 'installing' | 'starting' | 'ready' | 'error';
+type WebContainerStore = {
+    webContainer: Promise<WebContainer> | null;
+    ready: boolean;
+    setupStep: SetupStep;
+    statusMessage: string;
+    terminalOutput: Array<string>;
+    previewUrl: string | null;
+    error: string | null;
+    devProcess: WebContainerProcess | null;
+    projectFiles: Array<{
+        path: string;
+        content: string;
+    }>;
+    isInstalling: boolean;
+    teardown: () => void;
+    updateProjectFiles: (projectFiles: Array<{
+        path: string;
+        content: string;
+    }>) => Promise<void>;
+    startDevServer: () => Promise<void>;
+    addTerminalOutput: (output: string) => void;
+    installDependencies: () => Promise<void>;
+    setTerminalOutput: (output: Array<string>) => void;
+};
+export default function createWebContainerStore(shouldShimALS: boolean): import("zustand").StoreApi<WebContainerStore>;
+export {};

package/dist/hooks/use-webcontainer-store.js

@@ -0,0 +1,334 @@
+import { WebContainer } from '@webcontainer/api';
+import { createStore } from 'zustand';
+import shimALS from '../lib/als-shim';
+console.log('>>> startup');
+const processTerminalLine = (data) => {
+    // Clean up terminal output - remove ANSI codes and control characters
+    let cleaned = data;
+    // Remove all ANSI escape sequences (comprehensive)
+    cleaned = cleaned.replace(/\u001b\[[0-9;]*[a-zA-Z]/g, ''); // Standard ANSI sequences
+    cleaned = cleaned.replace(/\u001b\][0-9;]*;[^\u0007]*\u0007/g, ''); // OSC sequences
+    cleaned = cleaned.replace(/\u001b[=>]/g, ''); // Other escape codes
+    // Remove carriage returns and other control characters
+    cleaned = cleaned.replace(/\r/g, '');
+    cleaned = cleaned.replace(/[\u0000-\u0008\u000b\u000c\u000e-\u001f\u007f-\u009f]/g, '');
+    // Remove spinner characters and progress bar artifacts
+    cleaned = cleaned.replace(/[⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏]/g, '');
+    cleaned = cleaned.replace(/[▀▁▂▃▄▅▆▇█▉▊▋▌▍▎▏]/g, '');
+    cleaned = cleaned.replace(/[░▒▓]/g, '');
+    // Trim excessive whitespace
+    cleaned = cleaned.trim();
+    // Only return non-empty lines
+    return cleaned.length > 0 ? cleaned : '';
+};
+let webContainer = null;
+export default function createWebContainerStore(shouldShimALS) {
+    if (!webContainer) {
+        webContainer = WebContainer.boot();
+    }
+    const store = createStore((set, get) => ({
+        webContainer,
+        ready: false,
+        setupStep: 'mounting',
+        statusMessage: '',
+        terminalOutput: [],
+        previewUrl: null,
+        error: null,
+        devProcess: null,
+        projectFiles: [],
+        isInstalling: false,
+        teardown: () => {
+            set({ webContainer: null, ready: false });
+        },
+        addTerminalOutput: (output) => {
+            set(({ terminalOutput }) => ({
+                terminalOutput: [...terminalOutput, output],
+            }));
+        },
+        setTerminalOutput: (output) => {
+            set({ terminalOutput: output });
+        },
+        startDevServer: async () => {
+            const { devProcess, webContainer, addTerminalOutput } = get();
+            if (!webContainer) {
+                throw new Error('WebContainer not found');
+            }
+            try {
+                const container = await webContainer;
+                if (!container) {
+                    throw new Error('WebContainer not found');
+                }
+                if (devProcess) {
+                    console.log('Killing existing dev process...');
+                    devProcess.kill();
+                    set({ devProcess: null });
+                }
+                set({
+                    setupStep: 'starting',
+                    statusMessage: 'Starting development server...',
+                });
+                addTerminalOutput('🚀 Starting dev server...');
+                // Wait for server to be ready (set up listener first)
+                container.on('server-ready', (port, url) => {
+                    console.log('Server ready on port', port, 'at', url);
+                    const currentState = get();
+                    set({
+                        previewUrl: url,
+                        setupStep: 'ready',
+                        statusMessage: 'Development server running',
+                        terminalOutput: [
+                            ...currentState.terminalOutput,
+                            `✅ Server ready at ${url}`,
+                        ],
+                    });
+                });
+                // Start the dev server
+                const newDevProcess = await container.spawn('pnpm', ['dev']);
+                set({ devProcess: newDevProcess });
+                newDevProcess.output.pipeTo(new WritableStream({
+                    write(data) {
+                        const cleaned = processTerminalLine(data);
+                        if (cleaned && cleaned.length > 3) {
+                            console.log('[DEV]', cleaned);
+                            const currentState = get();
+                            set({
+                                terminalOutput: [...currentState.terminalOutput, cleaned],
+                            });
+                        }
+                    },
+                }));
+                // Check exit code
+                const exitCode = await newDevProcess.exit;
+                if (exitCode !== 0) {
+                    addTerminalOutput(`❌ Dev server exited with code ${exitCode}`);
+                    set({ error: `Dev server exited with code ${exitCode}` });
+                }
+            }
+            catch (error) {
+                console.error('Dev server start error:', error);
+                addTerminalOutput(`❌ Dev server error: ${error.message}`);
+                set({ error: error.message, setupStep: 'error' });
+            }
+        },
+        updateProjectFiles: async (projectFiles) => {
+            const { projectFiles: originalProjectFiles, addTerminalOutput, installDependencies, webContainer, } = get();
+            if (!webContainer) {
+                console.error('WebContainer not found in updateProjectFiles');
+                throw new Error('WebContainer not found');
+            }
+            try {
+                const container = await webContainer;
+                if (!container) {
+                    console.error('WebContainer resolved to null');
+                    throw new Error('WebContainer not found');
+                }
+                console.log('WebContainer booted successfully!', container);
+            }
+            catch (error) {
+                console.error('WebContainer boot failed:', error);
+                set({
+                    error: `WebContainer boot failed: ${error.message}`,
+                    setupStep: 'error',
+                });
+                throw error;
+            }
+            const container = await webContainer;
+            let packageJSONChanged = false;
+            const binaryFiles = {};
+            if (originalProjectFiles.length === 0) {
+                const fileSystemTree = {};
+                let base64FileCount = 0;
+                for (const { path, content } of projectFiles) {
+                    const cleanPath = path.replace(/^\.?\//, '');
+                    const pathParts = cleanPath.split('/');
+                    let current = fileSystemTree;
+                    for (let i = 0; i < pathParts.length - 1; i++) {
+                        const part = pathParts[i];
+                        if (!current[part]) {
+                            current[part] = { directory: {} };
+                        }
+                        current = current[part].directory;
+                    }
+                    const fileName = pathParts[pathParts.length - 1];
+                    const adjustedContent = shouldShimALS
+                        ? shimALS(fileName, content)
+                        : content;
+                    if (adjustedContent.startsWith('base64::')) {
+                        base64FileCount++;
+                        const base64Content = adjustedContent.replace('base64::', '');
+                        try {
+                            const base64Cleaned = base64Content.replace(/\s/g, '');
+                            const binaryString = atob(base64Cleaned);
+                            const bytes = new Uint8Array(binaryString.length);
+                            for (let i = 0; i < binaryString.length; i++) {
+                                bytes[i] = binaryString.charCodeAt(i) & 0xff;
+                            }
+                            binaryFiles[cleanPath] = bytes;
+                        }
+                        catch (error) {
+                            console.error(`[BINARY ERROR] Failed to convert ${cleanPath}:`, error);
+                        }
+                    }
+                    else {
+                        current[fileName] = {
+                            file: {
+                                contents: String(adjustedContent),
+                            },
+                        };
+                    }
+                }
+                // Write the binary files on their own since mount doesn't support binary files correctly
+                await container.mount(fileSystemTree);
+                for (const [path, bytes] of Object.entries(binaryFiles)) {
+                    await container.fs.writeFile(path, bytes);
+                }
+                packageJSONChanged = true;
+            }
+            else {
+                const originalMap = new Map();
+                for (const { path, content } of originalProjectFiles) {
+                    originalMap.set(path, content);
+                }
+                const newMap = new Map();
+                for (const { path, content } of projectFiles) {
+                    newMap.set(path, content);
+                }
+                const changedOrNewFiles = [];
+                for (const { path, content } of projectFiles) {
+                    if (!originalMap.has(path)) {
+                        changedOrNewFiles.push({ path, content });
+                    }
+                    else if (originalMap.get(path) !== content) {
+                        changedOrNewFiles.push({ path, content });
+                    }
+                }
+                const deletedFiles = [];
+                for (const { path } of originalProjectFiles) {
+                    if (!newMap.has(path)) {
+                        deletedFiles.push(path);
+                    }
+                }
+                if (changedOrNewFiles.length > 0 || deletedFiles.length > 0) {
+                    // Kill dev server before updating files to avoid HMR issues
+                    const { devProcess } = get();
+                    if (devProcess) {
+                        console.log('Stopping dev server before file update...');
+                        addTerminalOutput('⏸️  Stopping dev server before updating files...');
+                        devProcess.kill();
+                        set({ devProcess: null, previewUrl: null });
+                    }
+                    for (const { path, content } of changedOrNewFiles) {
+                        await container.fs.writeFile(path, content);
+                    }
+                    for (const path of deletedFiles) {
+                        await container.fs.rm(path);
+                    }
+                    addTerminalOutput('📁 Files updated successfully');
+                    if (changedOrNewFiles.some(({ path }) => path === './package.json')) {
+                        packageJSONChanged = true;
+                    }
+                }
+            }
+            set({ projectFiles });
+            if (packageJSONChanged) {
+                addTerminalOutput('📦 Package.json changed, reinstalling dependencies...');
+                await installDependencies();
+            }
+        },
+        installDependencies: async () => {
+            const { webContainer, addTerminalOutput, startDevServer, isInstalling } = get();
+            if (isInstalling) {
+                console.log('Install already in progress, skipping');
+                return;
+            }
+            if (!webContainer) {
+                throw new Error('WebContainer not found');
+            }
+            set({ isInstalling: true });
+            try {
+                const container = await webContainer;
+                if (!container) {
+                    set({ isInstalling: false });
+                    throw new Error('WebContainer not found');
+                }
+                set({
+                    setupStep: 'installing',
+                    statusMessage: 'Installing dependencies...',
+                });
+                console.log('Starting pnpm install...');
+                addTerminalOutput('📦 Running pnpm install...');
+                addTerminalOutput('⏳ This may take a minute...');
+                let installProcess;
+                try {
+                    installProcess = await container.spawn('pnpm', ['install']);
+                    console.log('pnpm install process spawned successfully');
+                }
+                catch (spawnError) {
+                    console.error('Failed to spawn pnpm install:', spawnError);
+                    throw spawnError;
+                }
+                let outputCount = 0;
+                let lastProgressUpdate = Date.now();
+                let allOutput = [];
+                let progressInterval = setInterval(() => {
+                    const elapsed = Math.floor((Date.now() - lastProgressUpdate) / 1000);
+                    console.log(`[INSTALL] Still running... (${elapsed}s, ${outputCount} output chunks)`);
+                }, 5000);
+                installProcess.output.pipeTo(new WritableStream({
+                    write(data) {
+                        outputCount++;
+                        allOutput.push(data);
+                        const cleaned = processTerminalLine(data);
+                        // Show meaningful output immediately
+                        if (cleaned && cleaned.length > 3) {
+                            const isImportant = cleaned.includes('added') ||
+                                cleaned.includes('removed') ||
+                                cleaned.includes('changed') ||
+                                cleaned.includes('audited') ||
+                                cleaned.includes('packages') ||
+                                cleaned.includes('error') ||
+                                cleaned.includes('warn') ||
+                                cleaned.includes('ERR') ||
+                                cleaned.includes('FAIL');
+                            if (isImportant) {
+                                console.log('[INSTALL]', cleaned);
+                                addTerminalOutput(cleaned);
+                                if (isImportant && progressInterval) {
+                                    clearInterval(progressInterval);
+                                    progressInterval = undefined;
+                                }
+                            }
+                        }
+                    },
+                }));
+                console.log('Waiting for install to complete...');
+                const installExitCode = await installProcess.exit;
+                if (progressInterval)
+                    clearInterval(progressInterval);
+                console.log('Install exit code:', installExitCode);
+                console.log('Total output lines:', outputCount);
+                if (installExitCode !== 0) {
+                    // Show all output for debugging
+                    console.error('[INSTALL ERROR] All output:', allOutput.join('\n'));
+                    const errorMsg = `pnpm install failed with exit code ${installExitCode}`;
+                    addTerminalOutput(`❌ ${errorMsg}`);
+                    addTerminalOutput('💡 Check console for detailed error output');
+                    set({ error: errorMsg, setupStep: 'error' });
+                    throw new Error(errorMsg);
+                }
+                addTerminalOutput('✅ Dependencies installed successfully');
+                await startDevServer();
+            }
+            catch (error) {
+                console.error('Install error:', error);
+                addTerminalOutput(`❌ Install error: ${error.message}`);
+                set({ error: error.message, setupStep: 'error' });
+                throw error;
+            }
+            finally {
+                set({ isInstalling: false });
+            }
+        },
+    }));
+    return store;
+}

package/dist/index.d.ts

@@ -15,6 +15,9 @@ import ModeSelector from './components/sidebar-items/mode-selector';
 import TypescriptSwitch from './components/sidebar-items/typescript-switch';
 import StarterDialog from './components/sidebar-items/starter';
 import SidebarGroup from './components/sidebar-items/sidebar-group';
+import WebContainerProvider from './components/web-container-provider';
+import { WebContainerPreview } from './components/webcontainer-preview';
 import { useApplicationMode, useManager, useReady } from './store/project';
-export { FileNavigator, AppSidebar, AppHeader, BackgroundAnimation, Toaster, StartupDialog, QueryProvider, CTAProvider, SelectedAddOns, RunAddOns, RunCreateApp, ProjectName, ModeSelector, TypescriptSwitch, StarterDialog, SidebarGroup, useApplicationMode, useManager, useReady, };
+import { useWebContainer } from './hooks/use-web-container';
+export { FileNavigator, AppSidebar, AppHeader, BackgroundAnimation, Toaster, StartupDialog, QueryProvider, CTAProvider, SelectedAddOns, RunAddOns, RunCreateApp, ProjectName, ModeSelector, TypescriptSwitch, StarterDialog, SidebarGroup, WebContainerProvider, WebContainerPreview, useApplicationMode, useManager, useReady, useWebContainer, };
 export default RootComponent;

package/dist/index.js

@@ -15,6 +15,9 @@ import ModeSelector from './components/sidebar-items/mode-selector';
 import TypescriptSwitch from './components/sidebar-items/typescript-switch';
 import StarterDialog from './components/sidebar-items/starter';
 import SidebarGroup from './components/sidebar-items/sidebar-group';
+import WebContainerProvider from './components/web-container-provider';
+import { WebContainerPreview } from './components/webcontainer-preview';
 import { useApplicationMode, useManager, useReady } from './store/project';
-export { FileNavigator, AppSidebar, AppHeader, BackgroundAnimation, Toaster, StartupDialog, QueryProvider, CTAProvider, SelectedAddOns, RunAddOns, RunCreateApp, ProjectName, ModeSelector, TypescriptSwitch, StarterDialog, SidebarGroup, useApplicationMode, useManager, useReady, };
+import { useWebContainer } from './hooks/use-web-container';
+export { FileNavigator, AppSidebar, AppHeader, BackgroundAnimation, Toaster, StartupDialog, QueryProvider, CTAProvider, SelectedAddOns, RunAddOns, RunCreateApp, ProjectName, ModeSelector, TypescriptSwitch, StarterDialog, SidebarGroup, WebContainerProvider, WebContainerPreview, useApplicationMode, useManager, useReady, useWebContainer, };
 export default RootComponent;

package/dist/lib/als-shim.d.ts

@@ -0,0 +1 @@
+export default function shimALS(fileName: string, content: string): string;