@illuma-ai/code-sandbox 1.4.0 → 1.5.0

package/src/components/Workbench.tsx

@@ -1,382 +0,0 @@
-/**
- * Workbench — Main layout component for the code sandbox.
- *
- * Two full-width views toggled via a pill slider in the toolbar:
- * - Code: FileTree (left) + Editor (top-right) + Terminal (bottom-right)
- * - Preview: Full-width browser iframe with URL bar
- *
- * The toggle lives inside a compact toolbar row shared with the URL bar.
- * Both views are full-width — Preview has no file tree, Code has no iframe.
- *
- * Responsive: works from ~320px up. On narrow screens the file tree
- * collapses to a smaller width, and the allotment handles overflow.
- *
- * @see bolt.diy: app/components/workbench/Workbench.client.tsx (reference)
- */
-
-import React, {
-  useMemo,
-  useState,
-  useEffect,
-  useCallback,
-  useRef,
-  useImperativeHandle,
-  forwardRef,
-} from "react";
-import { Allotment } from "allotment";
-import { motion, AnimatePresence } from "framer-motion";
-import "allotment/dist/style.css";
-
-import { buildFileTree, FileTree } from "./FileTree";
-import { CodeEditor } from "./CodeEditor";
-import { Terminal } from "./Terminal";
-import { Preview } from "./Preview";
-import { BootOverlay } from "./BootOverlay";
-import { ViewSlider, type WorkbenchView } from "./ViewSlider";
-import { useRuntime } from "../hooks/useRuntime";
-import type {
-  CodeSandboxProps,
-  CodeSandboxHandle,
-  FileChangeStatus,
-} from "../types";
-
-/** Transition for view crossfade */
-const VIEW_TRANSITION = {
-  duration: 0.2,
-  ease: [0.4, 0, 0.2, 1] as [number, number, number, number],
-};
-
-/**
- * CodeSandbox — The main entrypoint component.
- *
- * Renders a complete IDE-like workbench with two full-width views:
- * - Code: file tree + editor + terminal (split panes)
- * - Preview: full-width browser iframe
- *
- * A compact toolbar row contains the view toggle and (in preview mode)
- * a URL bar with refresh button.
- */
-export const CodeSandbox = forwardRef<CodeSandboxHandle, CodeSandboxProps>(
-  function CodeSandbox(props, ref) {
-    const { className = "", height = "100vh", port = 3000 } = props;
-
-    const runtime = useRuntime(props);
-    const {
-      state,
-      selectedFile,
-      openFiles,
-      handleFileChange,
-      handleSelectFile,
-      handleCloseFile,
-      handleBrowserError,
-      restart,
-      updateFiles,
-      updateFile,
-      getFiles,
-      getChangedFiles,
-      getFileChanges,
-      getErrors,
-      getState,
-    } = runtime;
-
-    // Expose imperative handle to parent via ref
-    useImperativeHandle(
-      ref,
-      () => ({
-        updateFiles,
-        updateFile,
-        restart,
-        getFiles,
-        getChangedFiles,
-        getFileChanges,
-        getErrors,
-        getState,
-      }),
-      [
-        updateFiles,
-        updateFile,
-        restart,
-        getFiles,
-        getChangedFiles,
-        getFileChanges,
-        getErrors,
-        getState,
-      ],
-    );
-
-    const fileTree = useMemo(() => buildFileTree(state.files), [state.files]);
-    const isBooting = state.status !== "ready" && state.status !== "error";
-
-    // Active view: code or preview
-    const [activeView, setActiveView] = useState<WorkbenchView>("code");
-
-    // Auto-switch to preview when server becomes ready
-    const hasPreview = !!state.previewUrl;
-    useEffect(() => {
-      if (hasPreview) {
-        setActiveView("preview");
-      }
-    }, [hasPreview]);
-
-    // Switch to code view when a file is selected from the tree
-    const onFileSelect = useCallback(
-      (path: string) => {
-        handleSelectFile(path);
-        setActiveView("code");
-      },
-      [handleSelectFile],
-    );
-
-    return (
-      <div
-        className={`sb-root relative w-full bg-sb-bg text-sb-text overflow-hidden flex flex-col ${className}`}
-        style={{ height }}
-      >
-        {/* Boot overlay */}
-        {isBooting && <BootOverlay progress={state.progress} />}
-
-        {/* Toolbar — compact row with view toggle + URL bar */}
-        <Toolbar
-          activeView={activeView}
-          onViewChange={setActiveView}
-          previewUrl={state.previewUrl}
-          port={port}
-          onRefresh={restart}
-        />
-
-        {/* Views — full width, toggled */}
-        <div className="flex-1 relative overflow-hidden min-h-0">
-          {/* Code view */}
-          <motion.div
-            className="absolute inset-0"
-            initial={false}
-            animate={{
-              opacity: activeView === "code" ? 1 : 0,
-              pointerEvents: activeView === "code" ? "auto" : "none",
-            }}
-            transition={{ duration: 0.15 }}
-          >
-            <CodeView
-              fileTree={fileTree}
-              files={state.files}
-              originalFiles={state.originalFiles}
-              fileChanges={state.fileChanges}
-              selectedFile={selectedFile}
-              openFiles={openFiles}
-              terminalOutput={state.terminalOutput}
-              onSelectFile={onFileSelect}
-              onCloseFile={handleCloseFile}
-              onFileChange={handleFileChange}
-            />
-          </motion.div>
-
-          {/* Preview view */}
-          <motion.div
-            className="absolute inset-0"
-            initial={false}
-            animate={{
-              opacity: activeView === "preview" ? 1 : 0,
-              pointerEvents: activeView === "preview" ? "auto" : "none",
-            }}
-            transition={{ duration: 0.15 }}
-          >
-            <Preview
-              url={state.previewUrl}
-              onBrowserError={handleBrowserError}
-              reloadKey={state.previewReloadKey}
-            />
-          </motion.div>
-        </div>
-      </div>
-    );
-  },
-);
-
-CodeSandbox.displayName = "CodeSandbox";
-
-// ---------------------------------------------------------------------------
-// Toolbar
-// ---------------------------------------------------------------------------
-
-interface ToolbarProps {
-  activeView: WorkbenchView;
-  onViewChange: (view: WorkbenchView) => void;
-  previewUrl: string | null;
-  port: number;
-  onRefresh?: () => void;
-}
-
-/**
- * Formats the internal preview URL into a friendly display URL.
- *
- * The actual preview URL is something like `https://host/__preview__/3000/path`
- * (a Service Worker proxy URL). This is meaningless to the user — the app runs
- * entirely in their browser. We show `localhost:{port}/path` instead, which
- * matches what they'd see from a real local dev server.
- */
-function formatDisplayUrl(previewUrl: string | null, port: number): string {
-  if (!previewUrl) return "";
-
-  // Extract the path portion after /__preview__/PORT or /__virtual__/PORT
-  const match = previewUrl.match(/\/__(?:preview|virtual)__\/\d+(\/.*)?$/);
-  const path = match?.[1] ?? "/";
-  return `localhost:${port}${path}`;
-}
-
-/**
- * Toolbar — single compact row with view toggle + URL bar.
- * URL bar only shows in preview mode. In code mode the space is
- * used for a subtle status label.
- */
-function Toolbar({
-  activeView,
-  onViewChange,
-  previewUrl,
-  port,
-  onRefresh,
-}: ToolbarProps) {
-  const displayUrl = formatDisplayUrl(previewUrl, port);
-
-  return (
-    <div className="flex items-center gap-2 px-2 py-1 bg-sb-bg-alt border-b border-sb-border min-h-[36px] shrink-0">
-      {/* View toggle — always visible */}
-      <ViewSlider selected={activeView} onSelect={onViewChange} />
-
-      {/* Right side: URL bar in preview mode, status in code mode */}
-      <div className="flex-1 min-w-0">
-        {activeView === "preview" ? (
-          <div className="flex items-center gap-1.5">
-            <button
-              className="shrink-0 p-1 rounded text-sb-text-muted hover:text-sb-text-active hover:bg-sb-bg-hover transition-colors text-xs"
-              onClick={onRefresh}
-              title="Refresh preview"
-            >
-              <RefreshIcon />
-            </button>
-            <div className="flex-1 min-w-0 bg-sb-bg rounded px-2 py-0.5 text-xs text-sb-text-muted font-mono truncate">
-              {previewUrl ? displayUrl : "Waiting for server..."}
-            </div>
-          </div>
-        ) : (
-          <div className="text-xs text-sb-text-muted px-1 truncate">Editor</div>
-        )}
-      </div>
-    </div>
-  );
-}
-
-/** Small inline refresh icon (SVG) */
-function RefreshIcon() {
-  return (
-    <svg
-      width="14"
-      height="14"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <polyline points="23 4 23 10 17 10" />
-      <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10" />
-    </svg>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// CodeView — full-width code editing layout
-// ---------------------------------------------------------------------------
-
-interface CodeViewProps {
-  fileTree: ReturnType<typeof buildFileTree>;
-  files: Record<string, string>;
-  originalFiles: Record<string, string>;
-  fileChanges: Record<string, FileChangeStatus>;
-  selectedFile: string | null;
-  openFiles: string[];
-  terminalOutput: string[];
-  onSelectFile: (path: string) => void;
-  onCloseFile: (path: string) => void;
-  onFileChange: (path: string, content: string) => void;
-}
-
-/**
- * CodeView — FileTree (left) + Editor (top-right) + Terminal (bottom-right).
- * Uses Allotment for resizable split panes.
- * Terminal can be minimized to just a header bar.
- * Responsive: file tree shrinks on narrow containers.
- */
-function CodeView({
-  fileTree,
-  files,
-  originalFiles,
-  fileChanges,
-  selectedFile,
-  openFiles,
-  terminalOutput,
-  onSelectFile,
-  onCloseFile,
-  onFileChange,
-}: CodeViewProps) {
-  const [terminalMinimized, setTerminalMinimized] = useState(false);
-
-  return (
-    <div className="h-full w-full">
-      <Allotment>
-        {/* File tree — left */}
-        <Allotment.Pane preferredSize={200} minSize={120} maxSize={350}>
-          <FileTree
-            files={fileTree}
-            selectedFile={selectedFile}
-            onSelectFile={onSelectFile}
-            fileChanges={fileChanges}
-          />
-        </Allotment.Pane>
-
-        {/* Editor + Terminal — right */}
-        <Allotment.Pane>
-          <div className="h-full flex flex-col">
-            {/* Editor takes remaining space */}
-            <div
-              className={
-                terminalMinimized ? "flex-1 min-h-0" : "flex-1 min-h-0"
-              }
-              style={{ height: terminalMinimized ? "100%" : "70%" }}
-            >
-              <div className="h-full">
-                <CodeEditor
-                  files={files}
-                  originalFiles={originalFiles}
-                  fileChanges={fileChanges}
-                  activeFile={selectedFile}
-                  openFiles={openFiles}
-                  onSelectFile={onSelectFile}
-                  onCloseFile={onCloseFile}
-                  onFileChange={onFileChange}
-                />
-              </div>
-            </div>
-
-            {/* Terminal — collapsible */}
-            {terminalMinimized ? (
-              <Terminal
-                output={terminalOutput}
-                minimized={true}
-                onToggleMinimize={() => setTerminalMinimized(false)}
-              />
-            ) : (
-              <div style={{ height: "30%", minHeight: 60 }}>
-                <Terminal
-                  output={terminalOutput}
-                  minimized={false}
-                  onToggleMinimize={() => setTerminalMinimized(true)}
-                />
-              </div>
-            )}
-          </div>
-        </Allotment.Pane>
-      </Allotment>
-    </div>
-  );
-}