@illuma-ai/code-sandbox 1.0.0

package/src/components/CodeEditor.tsx

@@ -0,0 +1,168 @@
+/**
+ * CodeEditor — Monaco editor with file tabs.
+ *
+ * Uses @monaco-editor/react for the editor and renders a tab bar
+ * of open files. Supports dark theme that matches the sandbox.
+ */
+
+import React, { useCallback, useMemo } from "react";
+import type { CodeEditorProps } from "../types";
+
+// Lazy import Monaco to keep the bundle splittable
+let MonacoEditor: React.ComponentType<any> | null = null;
+let monacoLoadPromise: Promise<void> | null = null;
+
+/**
+ * Load Monaco editor dynamically.
+ * Returns the Editor component from @monaco-editor/react.
+ */
+function loadMonaco(): Promise<void> {
+  if (MonacoEditor) return Promise.resolve();
+  if (monacoLoadPromise) return monacoLoadPromise;
+
+  monacoLoadPromise = import("@monaco-editor/react").then((mod) => {
+    MonacoEditor = mod.default || mod.Editor;
+  });
+
+  return monacoLoadPromise;
+}
+
+/**
+ * Get Monaco language from file path.
+ */
+function getLanguage(path: string): string {
+  const ext = path.split(".").pop()?.toLowerCase() || "";
+  const langMap: Record<string, string> = {
+    js: "javascript",
+    jsx: "javascript",
+    ts: "typescript",
+    tsx: "typescript",
+    json: "json",
+    html: "html",
+    htm: "html",
+    css: "css",
+    scss: "scss",
+    less: "less",
+    md: "markdown",
+    py: "python",
+    rb: "ruby",
+    go: "go",
+    rs: "rust",
+    yml: "yaml",
+    yaml: "yaml",
+    xml: "xml",
+    sql: "sql",
+    sh: "shell",
+    bash: "shell",
+    svg: "xml",
+  };
+  return langMap[ext] || "plaintext";
+}
+
+/**
+ * CodeEditor component — Monaco editor with file tabs.
+ */
+export function CodeEditor({
+  files,
+  activeFile,
+  openFiles,
+  onSelectFile,
+  onCloseFile,
+  onFileChange,
+  readOnly = false,
+}: CodeEditorProps) {
+  const [loaded, setLoaded] = React.useState(!!MonacoEditor);
+
+  // Load Monaco on mount
+  React.useEffect(() => {
+    if (!MonacoEditor) {
+      loadMonaco().then(() => setLoaded(true));
+    }
+  }, []);
+
+  const activeContent = activeFile ? files[activeFile] || "" : "";
+  const language = activeFile ? getLanguage(activeFile) : "plaintext";
+
+  const handleEditorChange = useCallback(
+    (value: string | undefined) => {
+      if (activeFile && value !== undefined) {
+        onFileChange(activeFile, value);
+      }
+    },
+    [activeFile, onFileChange],
+  );
+
+  return (
+    <div className="flex flex-col h-full bg-sb-editor">
+      {/* Tab bar */}
+      <div className="flex items-center bg-sb-bg-alt border-b border-sb-border overflow-x-auto">
+        {openFiles.map((path) => {
+          const fileName = path.split("/").pop() || path;
+          const isActive = path === activeFile;
+
+          return (
+            <div
+              key={path}
+              className={`group flex items-center gap-2 px-3 py-1.5 text-xs cursor-pointer border-r border-sb-border
+                ${
+                  isActive
+                    ? "bg-sb-editor text-sb-text-active border-t-2 border-t-sb-accent"
+                    : "bg-sb-bg-alt text-sb-text-muted hover:bg-sb-bg-hover border-t-2 border-t-transparent"
+                }`}
+              onClick={() => onSelectFile(path)}
+            >
+              <span className="truncate max-w-[120px]">{fileName}</span>
+              <button
+                className="opacity-0 group-hover:opacity-100 hover:text-sb-text-active ml-1 text-[10px]"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onCloseFile(path);
+                }}
+                title="Close"
+              >
+                ✕
+              </button>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Editor */}
+      <div className="flex-1 overflow-hidden">
+        {!activeFile && (
+          <div className="flex items-center justify-center h-full text-sb-text-muted text-sm">
+            Select a file to edit
+          </div>
+        )}
+
+        {activeFile && loaded && MonacoEditor && (
+          <MonacoEditor
+            height="100%"
+            language={language}
+            value={activeContent}
+            onChange={handleEditorChange}
+            theme="vs-dark"
+            options={{
+              readOnly,
+              minimap: { enabled: false },
+              fontSize: 13,
+              lineNumbers: "on",
+              wordWrap: "on",
+              scrollBeyondLastLine: false,
+              padding: { top: 8 },
+              renderWhitespace: "selection",
+              automaticLayout: true,
+              tabSize: 2,
+            }}
+          />
+        )}
+
+        {activeFile && !loaded && (
+          <div className="flex items-center justify-center h-full text-sb-text-muted text-sm">
+            Loading editor...
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/FileTree.tsx

@@ -0,0 +1,286 @@
+/**
+ * FileTree — Collapsible file/folder tree with icons.
+ *
+ * Renders a recursive tree of FileNodes. Folders expand/collapse on click.
+ * Files are selectable and show the appropriate icon based on extension.
+ * Uses inline SVG icons for reliable cross-platform rendering.
+ */
+
+import React, { useState } from "react";
+import type { FileMap, FileNode, FileTreeProps } from "../types";
+
+/**
+ * Build a tree structure from a flat FileMap.
+ *
+ * Converts { "routes/api.js": "...", "server.js": "..." }
+ * into a nested FileNode[] tree.
+ */
+export function buildFileTree(files: FileMap): FileNode[] {
+  const root: FileNode[] = [];
+  const dirs = new Map<string, FileNode>();
+
+  // Sort paths so directories come before files at each level
+  const sortedPaths = Object.keys(files).sort((a, b) => {
+    const aParts = a.split("/");
+    const bParts = b.split("/");
+    for (let i = 0; i < Math.min(aParts.length, bParts.length); i++) {
+      if (aParts[i] !== bParts[i]) {
+        const aIsDir = i < aParts.length - 1;
+        const bIsDir = i < bParts.length - 1;
+        if (aIsDir && !bIsDir) return -1;
+        if (!aIsDir && bIsDir) return 1;
+        return aParts[i].localeCompare(bParts[i]);
+      }
+    }
+    return aParts.length - bParts.length;
+  });
+
+  for (const filePath of sortedPaths) {
+    const parts = filePath.split("/");
+
+    // Ensure all parent directories exist
+    for (let i = 0; i < parts.length - 1; i++) {
+      const dirPath = parts.slice(0, i + 1).join("/");
+      if (!dirs.has(dirPath)) {
+        const dirNode: FileNode = {
+          name: parts[i],
+          path: dirPath,
+          type: "directory",
+          children: [],
+        };
+        dirs.set(dirPath, dirNode);
+
+        if (i === 0) {
+          root.push(dirNode);
+        } else {
+          const parentPath = parts.slice(0, i).join("/");
+          const parent = dirs.get(parentPath);
+          parent?.children?.push(dirNode);
+        }
+      }
+    }
+
+    const fileNode: FileNode = {
+      name: parts[parts.length - 1],
+      path: filePath,
+      type: "file",
+    };
+
+    if (parts.length === 1) {
+      root.push(fileNode);
+    } else {
+      const parentPath = parts.slice(0, -1).join("/");
+      const parent = dirs.get(parentPath);
+      parent?.children?.push(fileNode);
+    }
+  }
+
+  return root;
+}
+
+// ---------------------------------------------------------------------------
+// SVG Icons — inline for reliable rendering (no emoji issues)
+// ---------------------------------------------------------------------------
+
+/** Chevron right arrow for folder expand/collapse */
+function ChevronIcon({ expanded }: { expanded: boolean }) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      className="shrink-0 transition-transform duration-150"
+      style={{ transform: expanded ? "rotate(90deg)" : "none" }}
+    >
+      <path
+        d="M6 4l4 4-4 4"
+        stroke="currentColor"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+/** Folder icon (open or closed) */
+function FolderIcon({ open }: { open: boolean }) {
+  if (open) {
+    return (
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        className="shrink-0"
+      >
+        <path
+          d="M1.5 3.5A1 1 0 012.5 2.5h3.172a1 1 0 01.707.293L7.5 3.914a1 1 0 00.707.293H13.5a1 1 0 011 1v1.293H3.207a1 1 0 00-.966.741L1.5 10.5V3.5z"
+          fill="#dcb67a"
+        />
+        <path
+          d="M2.241 7.241A1 1 0 013.207 6.5H14.5a1 1 0 01.966 1.259l-1.5 5.5A1 1 0 0113 14H2.5a1 1 0 01-1-1V8.5a1 1 0 01.741-.966l0-.293z"
+          fill="#e8c87a"
+        />
+      </svg>
+    );
+  }
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      className="shrink-0"
+    >
+      <path
+        d="M1.5 3A1.5 1.5 0 013 1.5h3.172a1.5 1.5 0 011.06.44L8.354 3.06a.5.5 0 00.354.147H13A1.5 1.5 0 0114.5 4.707V12A1.5 1.5 0 0113 13.5H3A1.5 1.5 0 011.5 12V3z"
+        fill="#dcb67a"
+      />
+    </svg>
+  );
+}
+
+/** Get file icon color based on extension */
+function getFileIconColor(name: string): string {
+  const ext = name.split(".").pop()?.toLowerCase() || "";
+  const colorMap: Record<string, string> = {
+    js: "#f0db4f",
+    jsx: "#61dafb",
+    ts: "#3178c6",
+    tsx: "#61dafb",
+    json: "#a8b065",
+    html: "#e44d26",
+    css: "#264de4",
+    scss: "#cd6799",
+    md: "#ffffff",
+    py: "#3776ab",
+    rb: "#cc342d",
+    go: "#00add8",
+    rs: "#dea584",
+    yml: "#cb171e",
+    yaml: "#cb171e",
+    env: "#ecd53f",
+    sh: "#89e051",
+    sql: "#e38c00",
+    svg: "#ffb13b",
+  };
+  return colorMap[ext] || "#8c8c8c";
+}
+
+/** Generic file icon with extension-based color */
+function FileIcon({ name }: { name: string }) {
+  const color = getFileIconColor(name);
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      className="shrink-0"
+    >
+      <path
+        d="M4 1.5h5.5L13 5v9.5a1 1 0 01-1 1H4a1 1 0 01-1-1v-13a1 1 0 011-1z"
+        fill={color}
+        opacity="0.2"
+      />
+      <path
+        d="M4 1.5h5.5L13 5v9.5a1 1 0 01-1 1H4a1 1 0 01-1-1v-13a1 1 0 011-1z"
+        stroke={color}
+        strokeWidth="1"
+      />
+      <path d="M9.5 1.5V5H13" stroke={color} strokeWidth="1" />
+    </svg>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Components
+// ---------------------------------------------------------------------------
+
+/**
+ * FileTree component — renders a collapsible tree of files and folders.
+ */
+export function FileTree({ files, selectedFile, onSelectFile }: FileTreeProps) {
+  return (
+    <div className="h-full overflow-auto bg-sb-sidebar text-sm select-none">
+      <div className="px-3 py-2 text-[11px] font-semibold text-sb-text-muted uppercase tracking-wider border-b border-sb-border">
+        Explorer
+      </div>
+      <div className="py-1">
+        {files.map((node) => (
+          <TreeNode
+            key={node.path}
+            node={node}
+            depth={0}
+            selectedFile={selectedFile}
+            onSelectFile={onSelectFile}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/** Individual tree node (file or folder) */
+function TreeNode({
+  node,
+  depth,
+  selectedFile,
+  onSelectFile,
+}: {
+  node: FileNode;
+  depth: number;
+  selectedFile: string | null;
+  onSelectFile: (path: string) => void;
+}) {
+  const [expanded, setExpanded] = useState(depth < 2);
+
+  const isSelected = node.path === selectedFile;
+  const paddingLeft = 8 + depth * 16;
+
+  if (node.type === "directory") {
+    return (
+      <div>
+        <button
+          className={`w-full flex items-center gap-1 py-[3px] text-left hover:bg-sb-bg-hover transition-colors ${
+            isSelected ? "bg-sb-bg-active text-sb-text-active" : "text-sb-text"
+          }`}
+          style={{ paddingLeft }}
+          onClick={() => setExpanded(!expanded)}
+        >
+          <ChevronIcon expanded={expanded} />
+          <FolderIcon open={expanded} />
+          <span className="truncate ml-0.5">{node.name}</span>
+        </button>
+        {expanded && node.children && (
+          <div>
+            {node.children.map((child) => (
+              <TreeNode
+                key={child.path}
+                node={child}
+                depth={depth + 1}
+                selectedFile={selectedFile}
+                onSelectFile={onSelectFile}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <button
+      className={`w-full flex items-center gap-1 py-[3px] text-left hover:bg-sb-bg-hover transition-colors ${
+        isSelected ? "bg-sb-bg-active text-sb-text-active" : "text-sb-text"
+      }`}
+      style={{ paddingLeft: paddingLeft + 20 }}
+      onClick={() => onSelectFile(node.path)}
+    >
+      <FileIcon name={node.name} />
+      <span className="truncate ml-0.5">{node.name}</span>
+    </button>
+  );
+}

package/src/components/Preview.tsx

@@ -0,0 +1,50 @@
+/**
+ * Preview — Full-width iframe that renders the Nodepod virtual server.
+ *
+ * Loads the URL from Nodepod's Service Worker proxy (/__virtual__/PORT/).
+ * The toolbar handles the URL bar and refresh — this is just the iframe.
+ */
+
+import React, { useRef, useEffect } from "react";
+import type { PreviewProps } from "../types";
+
+/**
+ * Preview component — renders the dev server output in a full-width iframe.
+ *
+ * The URL points to /__virtual__/PORT/ which is intercepted by the
+ * Nodepod Service Worker and proxied to the Express server running
+ * in the Web Worker.
+ */
+export function Preview({ url, className = "" }: PreviewProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  // Reload iframe when URL changes
+  useEffect(() => {
+    if (iframeRef.current && url) {
+      iframeRef.current.src = url;
+    }
+  }, [url]);
+
+  return (
+    <div className={`h-full w-full bg-white ${className}`}>
+      {url ? (
+        <iframe
+          ref={iframeRef}
+          src={url}
+          className="w-full h-full border-none"
+          title="Preview"
+          sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-modals"
+        />
+      ) : (
+        <div className="flex items-center justify-center h-full bg-sb-bg">
+          <div className="text-center px-4">
+            <div className="w-10 h-10 mx-auto mb-3 border-2 border-sb-accent border-t-transparent rounded-full animate-spin" />
+            <p className="text-sb-text-muted text-sm">
+              Waiting for dev server to start...
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/Terminal.tsx

@@ -0,0 +1,68 @@
+/**
+ * Terminal — Display terminal output from Nodepod processes.
+ *
+ * Simple scrolling output panel styled like a terminal.
+ * Auto-scrolls to the bottom as new output arrives.
+ */
+
+import React, { useEffect, useRef } from "react";
+import type { TerminalProps } from "../types";
+
+/**
+ * Terminal component — renders process stdout/stderr in a terminal-style panel.
+ *
+ * Uses a simple div-based approach (not xterm.js) for the initial version.
+ * This keeps the bundle small and avoids the xterm peer dependency
+ * for consumers who don't need full terminal emulation.
+ */
+export function Terminal({ output, className = "" }: TerminalProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Auto-scroll to bottom when new output arrives
+  useEffect(() => {
+    const el = containerRef.current;
+    if (el) {
+      el.scrollTop = el.scrollHeight;
+    }
+  }, [output.length]);
+
+  return (
+    <div className={`flex flex-col h-full bg-sb-terminal ${className}`}>
+      {/* Header */}
+      <div className="flex items-center px-3 py-1 bg-sb-bg-alt border-b border-sb-border">
+        <span className="text-xs font-medium text-sb-text-muted uppercase tracking-wider">
+          Terminal
+        </span>
+      </div>
+
+      {/* Output */}
+      <div
+        ref={containerRef}
+        className="flex-1 overflow-auto p-3 font-mono text-xs leading-relaxed"
+      >
+        {output.length === 0 ? (
+          <span className="text-sb-text-muted">Waiting for output...</span>
+        ) : (
+          output.map((line, i) => (
+            <div
+              key={i}
+              className={`whitespace-pre-wrap ${
+                line.startsWith("[stderr]")
+                  ? "text-sb-error"
+                  : line.startsWith("$")
+                    ? "text-sb-success"
+                    : line.startsWith("  ✓")
+                      ? "text-sb-success"
+                      : line.startsWith("  ✗")
+                        ? "text-sb-error"
+                        : "text-sb-text"
+              }`}
+            >
+              {line}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ViewSlider.tsx

@@ -0,0 +1,87 @@
+/**
+ * ViewSlider — Pill-shaped toggle to switch between Code and Preview views.
+ *
+ * Inspired by bolt.diy's Slider component. Uses Framer Motion's layoutId
+ * for a smooth animated pill that slides between options.
+ *
+ * @see bolt.diy: app/components/ui/Slider.tsx
+ */
+
+import React, { memo } from "react";
+import { motion } from "framer-motion";
+
+/** The two views available in the workbench */
+export type WorkbenchView = "code" | "preview";
+
+interface ViewSliderProps {
+  selected: WorkbenchView;
+  onSelect: (view: WorkbenchView) => void;
+}
+
+/** Cubic bezier easing — typed as a 4-tuple for Framer Motion */
+const CUBIC_EASING: [number, number, number, number] = [0.4, 0, 0.2, 1];
+
+/**
+ * Individual button within the slider.
+ * When selected, renders an animated pill background via layoutId.
+ */
+const SliderButton = memo(function SliderButton({
+  selected,
+  children,
+  onClick,
+}: {
+  selected: boolean;
+  children: React.ReactNode;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`relative px-3 py-1 rounded-full text-xs font-medium transition-colors ${
+        selected ? "text-white" : "text-sb-text-muted hover:text-sb-text"
+      }`}
+    >
+      <span className="relative z-10">{children}</span>
+      {selected && (
+        <motion.span
+          layoutId="view-slider-pill"
+          transition={{
+            duration: 0.2,
+            ease: CUBIC_EASING,
+          }}
+          className="absolute inset-0 z-0 bg-sb-accent rounded-full"
+        />
+      )}
+    </button>
+  );
+});
+
+/**
+ * ViewSlider — renders a pill-shaped toggle with animated selection indicator.
+ *
+ * Usage:
+ * ```tsx
+ * <ViewSlider selected={view} onSelect={setView} />
+ * ```
+ */
+export const ViewSlider = memo(function ViewSlider({
+  selected,
+  onSelect,
+}: ViewSliderProps) {
+  return (
+    <div className="flex items-center gap-0.5 bg-sb-bg rounded-full p-0.5 border border-sb-border">
+      <SliderButton
+        selected={selected === "code"}
+        onClick={() => onSelect("code")}
+      >
+        Code
+      </SliderButton>
+      <SliderButton
+        selected={selected === "preview"}
+        onClick={() => onSelect("preview")}
+      >
+        Preview
+      </SliderButton>
+    </div>
+  );
+});