@tanstack/cta-ui-base 0.29.1 → 0.30.0

package/dist/lib/als-shim.js

@@ -0,0 +1,119 @@
+const ALS_RESOLVER = `resolve: {
+  alias: {
+    'node:async_hooks': '\\0virtual:async_hooks',
+    async_hooks: '\\0virtual:async_hooks',
+  },
+},`;
+const ALS_SHIM = `export class AsyncLocalStorage {
+  constructor() {
+    // queue: array of { store, fn, resolve, reject }
+    this._queue = [];
+    this._running = false;        // true while processing queue
+    this._currentStore = undefined; // store visible to getStore() while a run executes
+  }
+
+  /**
+   * run(store, callback, ...args) -> Promise
+   * Queues the callback to run with store as the current store. If the callback
+   * returns a Promise, the queue waits for it to settle before starting the next run.
+   */
+  run(store, callback, ...args) {
+    return new Promise((resolve, reject) => {
+      this._queue.push({
+        store,
+        fn: () => callback(...args),
+        resolve,
+        reject,
+      });
+      // start processing (if not already)
+      this._processQueue().catch((err) => {
+        // _processQueue shouldn't throw; but guard anyway.
+        console.error('SerialAsyncLocalStorage internal error:', err);
+      });
+    });
+  }
+
+  /**
+   * getStore() -> current store or undefined
+   * Returns the store of the currently executing run (or undefined if none).
+   */
+  getStore() {
+    return this._currentStore;
+  }
+
+  /**
+   * enterWith(store)
+   * Set the current store for the currently running task synchronously.
+   * Throws if there is no active run (this polyfill requires you to be inside a run).
+   */
+  enterWith(store) {
+    if (!this._running) {
+      throw new Error('enterWith() may be used only while a run is active.');
+    }
+    this._currentStore = store;
+  }
+
+  // internal: process queue serially
+  async _processQueue() {
+    if (this._running) return;
+    this._running = true;
+
+    while (this._queue.length) {
+      const { store, fn, resolve, reject } = this._queue.shift();
+      const prevStore = this._currentStore;
+      this._currentStore = store;
+
+      try {
+        const result = fn();
+        // await if callback returned a promise
+        const awaited = result instanceof Promise ? await result : result;
+        resolve(awaited);
+      } catch (err) {
+        reject(err);
+      } finally {
+        // restore previous store (if any)
+        this._currentStore = prevStore;
+      }
+      // loop continues to next queued task
+    }
+
+    this._running = false;
+  }
+}
+export default AsyncLocalStorage
+`;
+const ALS_SHIM_LOADER = `
+function alsShim(): PluginOption {
+  return {
+    enforce: 'pre',
+    name: 'virtual-async-hooks',
+    config() {
+      return {
+        resolve: {
+          alias: {
+            // catch both forms
+            'node:async_hooks': '\\0virtual:async_hooks',
+            async_hooks: '\\0virtual:async_hooks',
+          },
+        },
+      };
+    },
+    resolveId(id) {
+      if (id === '\\0virtual:async_hooks') return id;
+    },
+    load(id) {
+      if (id !== '\\0virtual:async_hooks') return null;
+
+      return \`${ALS_SHIM}\`;
+    },
+  };
+}
+`;
+export default function shimALS(fileName, content) {
+    let adjustedContent = content;
+    if (fileName === 'vite.config.ts') {
+        adjustedContent += ALS_SHIM_LOADER;
+        adjustedContent = adjustedContent.replace('plugins: [', `${ALS_RESOLVER}plugins: [alsShim(),`);
+    }
+    return adjustedContent;
+}

package/package.json

@@ -24,6 +24,7 @@
     "@tanstack/react-query": "^5.66.5",
     "@uiw/codemirror-theme-github": "^4.23.10",
     "@uiw/react-codemirror": "^4.23.10",
+    "@webcontainer/api": "^1.3.5",
     "chalk": "^5.4.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -45,6 +46,6 @@
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.1.4"
   },
-  "version": "0.29.1",
+  "version": "0.30.0",
   "scripts": {}
 }

package/src/components/file-navigator.tsx

@@ -14,9 +14,12 @@ 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'
 
 import type { FileTreeItem } from '../types'
 
@@ -181,27 +184,69 @@ export default function FileNavigator() {
 
   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 (
-    <div className="bg-white dark:bg-black/50 rounded-lg p-2 sm:p-4">
-      {mode === 'add' && <Filters />}
-      <div className="flex flex-row @container">
-        <div className="w-1/3 @6xl:w-1/4 bg-gray-500/10 rounded-l-lg">
-          <FileTree selectedFile={selectedFile} tree={fileTree} />
-        </div>
-        <div className="w-2/3 @6xl:w-3/4">
-          {selectedFile && modifiedFileContents ? (
-            <FileViewer
-              filePath={selectedFile}
-              originalFile={originalFileContents}
-              modifiedFile={modifiedFileContents}
-            />
-          ) : null}
-        </div>
+    <WebContainerProvider projectFiles={webContainerFiles}>
+      <div className="bg-white dark:bg-black/50 rounded-lg p-2 sm:p-4">
+        {mode === 'add' && <Filters />}
+        <Tabs defaultValue="files" className="w-full">
+          <TabsList className="mb-1 h-7 p-0.5 bg-transparent border border-gray-300 dark:border-gray-700">
+            <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"
+            >
+              Files
+            </TabsTrigger>
+            <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"
+            >
+              Preview
+            </TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="files" className="mt-0">
+            <div className="flex flex-row @container">
+              <div className="w-1/3 @6xl:w-1/4 bg-gray-500/10 rounded-l-lg">
+                <FileTree selectedFile={selectedFile} tree={fileTree} />
+              </div>
+              <div className="w-2/3 @6xl:w-3/4">
+                {selectedFile && modifiedFileContents ? (
+                  <FileViewer
+                    filePath={selectedFile}
+                    originalFile={originalFileContents}
+                    modifiedFile={modifiedFileContents}
+                  />
+                ) : null}
+              </div>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="preview" className="mt-0">
+            <div className="h-[800px]">
+              <WebContainerPreview />
+            </div>
+          </TabsContent>
+        </Tabs>
       </div>
-    </div>
+    </WebContainerProvider>
   )
 }

package/src/components/file-viewer.tsx

@@ -45,10 +45,18 @@ export default function FileViewer({
   }
   const language = getLanguage(filePath)
 
-  if (!originalFile || originalFile === modifiedFile) {
+  // 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 (
       <CodeMirror
-        value={modifiedFile}
+        value={displayModified}
         theme={theme}
         height="100vh"
         width="100%"
@@ -60,8 +68,14 @@ export default function FileViewer({
   }
   return (
     <CodeMirrorMerge orientation="a-b" theme={theme} className="text-lg">
-      <CodeMirrorMerge.Original value={originalFile} extensions={[language]} />
-      <CodeMirrorMerge.Modified value={modifiedFile} extensions={[language]} />
+      <CodeMirrorMerge.Original
+        value={displayOriginal}
+        extensions={[language]}
+      />
+      <CodeMirrorMerge.Modified
+        value={displayModified}
+        extensions={[language]}
+      />
     </CodeMirrorMerge>
   )
 }

package/src/components/web-container-provider.tsx

@@ -0,0 +1,42 @@
+import { createContext, useEffect, useState } from 'react'
+import { useStore } from 'zustand'
+import createWebContainerStore from '../hooks/use-webcontainer-store'
+
+export const WebContainerContext = createContext<ReturnType<
+  typeof createWebContainerStore
+> | null>(null)
+
+export default function WebContainerProvider({
+  children,
+  projectFiles,
+}: {
+  children: React.ReactNode
+  projectFiles: Array<{ path: string; content: string }>
+}) {
+  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 (
+    <WebContainerContext.Provider value={containerStore}>
+      {children}
+    </WebContainerContext.Provider>
+  )
+}

package/src/components/webcontainer-preview.tsx

@@ -0,0 +1,241 @@
+import { useContext, useEffect, useRef, useState } from 'react'
+import { useStore } from 'zustand'
+import { ChevronDown, ChevronUp } from 'lucide-react'
+
+import type { SetupStep } from '../hooks/use-webcontainer-store'
+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<HTMLDivElement>(null)
+  useEffect(() => {
+    if (terminalRef.current) {
+      terminalRef.current.scrollTop = terminalRef.current.scrollHeight
+    }
+  }, [terminalOutput])
+
+  const getStepIcon = (step: SetupStep) => {
+    switch (step) {
+      case 'mounting':
+        return '📁'
+      case 'installing':
+        return '📦'
+      case 'starting':
+        return '🚀'
+      case 'ready':
+        return '✅'
+      case 'error':
+        return '❌'
+    }
+  }
+
+  const getStepColor = (step: SetupStep) => {
+    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 (
+      <div className="flex items-center justify-center h-full bg-gray-50 dark:bg-gray-900">
+        <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">
+          <h2 className="text-2xl font-bold mb-6 text-center">
+            {setupStep === 'error' ? 'Setup Failed' : 'Preparing Preview'}
+          </h2>
+
+          {setupStep === 'error' ? (
+            <div className="text-center">
+              <div className="text-4xl mb-4">❌</div>
+              <div className="text-lg font-medium text-red-600 mb-2">
+                An error occurred
+              </div>
+              <div className="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                {error}
+              </div>
+              <button
+                onClick={startDevServer}
+                className="px-4 py-2 text-sm bg-orange-500 text-white rounded hover:bg-orange-600 transition-colors"
+              >
+                🔄 Retry
+              </button>
+            </div>
+          ) : (
+            <>
+              {/* Progress Steps */}
+              <div className="space-y-4 mb-6">
+                <div className="flex items-center gap-3">
+                  <div className="text-2xl">{getStepIcon('mounting')}</div>
+                  <div
+                    className={`flex-1 ${getStepColor(setupStep === 'mounting' ? 'mounting' : setupStep === 'installing' || setupStep === 'starting' || setupStep === 'ready' ? 'ready' : 'mounting')}`}
+                  >
+                    Mount Files
+                  </div>
+                  {(setupStep === 'installing' ||
+                    setupStep === 'starting' ||
+                    setupStep === 'ready') &&
+                    '✓'}
+                </div>
+                <div className="flex items-center gap-3">
+                  <div className="text-2xl">{getStepIcon('installing')}</div>
+                  <div
+                    className={`flex-1 ${getStepColor(setupStep === 'installing' ? 'installing' : setupStep === 'starting' || setupStep === 'ready' ? 'ready' : 'mounting')}`}
+                  >
+                    Install Dependencies
+                  </div>
+                  {(setupStep === 'starting' || setupStep === 'ready') && '✓'}
+                </div>
+                <div className="flex items-center gap-3">
+                  <div className="text-2xl">{getStepIcon('starting')}</div>
+                  <div
+                    className={`flex-1 ${getStepColor(setupStep === 'starting' ? 'starting' : setupStep === 'ready' ? 'ready' : 'mounting')}`}
+                  >
+                    Start Server
+                  </div>
+                  {setupStep === 'ready' && '✓'}
+                </div>
+              </div>
+
+              {/* Current status */}
+              <div className="text-center text-sm text-gray-600 dark:text-gray-400">
+                {statusMessage || 'Preparing your application...'}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  // Show the running application with collapsible terminal
+  return (
+    <div className="flex flex-col h-full">
+      {/* iframe with the running app */}
+      <div className="flex-1">
+        {previewUrl ? (
+          <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)}
+          />
+        ) : (
+          <div className="flex items-center justify-center h-full bg-gray-100 dark:bg-gray-800">
+            <div className="text-center">
+              <div className="text-2xl mb-2">🔄</div>
+              <div className="text-sm text-gray-600 dark:text-gray-400">
+                Preview not available
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Collapsible Terminal output */}
+      <div className="border-t border-gray-200 dark:border-gray-700 bg-black text-green-400 flex flex-col flex-shrink-0">
+        <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)}
+        >
+          <div className="flex items-center gap-2 flex-1">
+            <button className="text-gray-400 hover:text-gray-200">
+              {isTerminalOpen ? (
+                <ChevronDown className="w-4 h-4" />
+              ) : (
+                <ChevronUp className="w-4 h-4" />
+              )}
+            </button>
+            <div className="text-xs font-medium text-gray-300">
+              Terminal Output
+            </div>
+            {setupStep === 'ready' && previewUrl && (
+              <div className="text-xs text-green-500">● Server Running</div>
+            )}
+          </div>
+          <div
+            className="flex items-center gap-2"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {previewUrl && (
+              <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"
+              >
+                Open in New Tab
+              </button>
+            )}
+            <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"
+            >
+              🔄 Restart
+            </button>
+            <button
+              onClick={() => setTerminalOutput([])}
+              className="text-xs text-gray-400 hover:text-gray-200 transition-colors"
+            >
+              Clear
+            </button>
+          </div>
+        </div>
+        {isTerminalOpen && (
+          <div
+            ref={terminalRef}
+            className="font-mono text-xs p-2 overflow-y-auto overflow-x-hidden"
+            style={{ maxHeight: '200px' }}
+          >
+            {terminalOutput.length > 0 ? (
+              terminalOutput.map((line, index) => (
+                <div
+                  key={index}
+                  className="mb-1 leading-tight whitespace-pre-wrap break-words"
+                >
+                  {line}
+                </div>
+              ))
+            ) : (
+              <div className="text-gray-500">No output yet...</div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/hooks/use-web-container.ts

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