@illuma-ai/code-sandbox 1.0.0

package/dist/code-sandbox.css

@@ -0,0 +1 @@
+:root{--separator-border: rgba(128, 128, 128, .35);--sash-hover-transition-duration: .1s}.allotment-module_splitView__L-yRc{height:100%;overflow:hidden;position:relative;width:100%}.allotment-module_splitView__L-yRc>.allotment-module_sashContainer__fzwJF{height:100%;pointer-events:none;position:absolute;width:100%}.allotment-module_splitView__L-yRc>.allotment-module_sashContainer__fzwJF>.allotment-module_sash__QA-2t{pointer-events:auto}.allotment-module_splitView__L-yRc>.allotment-module_splitViewContainer__rQnVa{height:100%;position:relative;white-space:nowrap;width:100%}.allotment-module_splitView__L-yRc>.allotment-module_splitViewContainer__rQnVa>.allotment-module_splitViewView__MGZ6O{overflow:hidden;position:absolute;white-space:initial}.allotment-module_splitView__L-yRc.allotment-module_vertical__WSwwa>.allotment-module_splitViewContainer__rQnVa>.allotment-module_splitViewView__MGZ6O{width:100%}.allotment-module_splitView__L-yRc.allotment-module_horizontal__7doS8>.allotment-module_splitViewContainer__rQnVa>.allotment-module_splitViewView__MGZ6O{height:100%}.allotment-module_splitView__L-yRc.allotment-module_separatorBorder__x-rDS>.allotment-module_splitViewContainer__rQnVa>.allotment-module_splitViewView__MGZ6O:not(:first-child):before{background-color:var(--separator-border);content:" ";left:0;pointer-events:none;position:absolute;top:0;z-index:5}.allotment-module_splitView__L-yRc.allotment-module_separatorBorder__x-rDS.allotment-module_vertical__WSwwa>.allotment-module_splitViewContainer__rQnVa>.allotment-module_splitViewView__MGZ6O:not(:first-child):before{height:1px;width:100%}.allotment-module_splitView__L-yRc.allotment-module_separatorBorder__x-rDS.allotment-module_horizontal__7doS8>.allotment-module_splitViewContainer__rQnVa>.allotment-module_splitViewView__MGZ6O:not(:first-child):before{height:100%;width:1px}:root{--focus-border: #007fd4;--sash-size: 8px;--sash-hover-size: 4px}.sash-module_sash__K-9lB{position:absolute;z-index:35;touch-action:none;pointer-events:auto;text-align:initial}.sash-module_sash__K-9lB.sash-module_disabled__Hm-wx{pointer-events:none}.sash-module_sash__K-9lB.sash-module_mac__Jf6OJ.sash-module_vertical__pB-rs{cursor:col-resize}.sash-module_sash__K-9lB.sash-module_vertical__pB-rs.sash-module_minimum__-UKxp{cursor:e-resize}.sash-module_sash__K-9lB.sash-module_vertical__pB-rs.sash-module_maximum__TCWxD{cursor:w-resize}.sash-module_sash__K-9lB.sash-module_mac__Jf6OJ.sash-module_horizontal__kFbiw{cursor:row-resize}.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_minimum__-UKxp{cursor:s-resize}.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_maximum__TCWxD{cursor:n-resize}.sash-module_sash__K-9lB.sash-module_disabled__Hm-wx{cursor:default!important;pointer-events:none!important}.sash-module_sash__K-9lB.sash-module_vertical__pB-rs{cursor:ew-resize;top:0;width:var(--sash-size);height:100%}.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw{cursor:ns-resize;left:0;width:100%;height:var(--sash-size)}.sash-module_sash__K-9lB:not(.sash-module_disabled__Hm-wx)>.sash-module_orthogonal-drag-handle__Yii2-{content:" ";height:calc(var(--sash-size) * 2);width:calc(var(--sash-size) * 2);z-index:100;display:block;cursor:all-scroll;position:absolute}.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(.sash-module_disabled__Hm-wx)>.sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk,.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(.sash-module_disabled__Hm-wx)>.sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R{cursor:nwse-resize}.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-north__f7Noe:not(.sash-module_disabled__Hm-wx)>.sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R,.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw.sash-module_orthogonal-edge-south__6ZrFC:not(.sash-module_disabled__Hm-wx)>.sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk{cursor:nesw-resize}.sash-module_sash__K-9lB.sash-module_vertical__pB-rs>.sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk{left:calc(var(--sash-size) * -.5);top:calc(var(--sash-size) * -1)}.sash-module_sash__K-9lB.sash-module_vertical__pB-rs>.sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R{left:calc(var(--sash-size) * -.5);bottom:calc(var(--sash-size) * -1)}.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw>.sash-module_orthogonal-drag-handle__Yii2-.sash-module_start__uZEDk{top:calc(var(--sash-size) * -.5);left:calc(var(--sash-size) * -1)}.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw>.sash-module_orthogonal-drag-handle__Yii2-.sash-module_end__0TP-R{top:calc(var(--sash-size) * -.5);right:calc(var(--sash-size) * -1)}.sash-module_sash__K-9lB:before{content:"";pointer-events:none;position:absolute;width:100%;height:100%;transition:background-color var(--sash-hover-transition-duration) ease-out;background:transparent}.sash-module_sash__K-9lB.sash-module_vertical__pB-rs:before{width:var(--sash-hover-size);left:calc(50% - (var(--sash-hover-size) / 2))}.sash-module_sash__K-9lB.sash-module_horizontal__kFbiw:before{height:var(--sash-hover-size);top:calc(50% - (var(--sash-hover-size) / 2))}.sash-module_sash__K-9lB.sash-module_hover__80W6I:before,.sash-module_sash__K-9lB.sash-module_active__bJspD:before{background:var(--focus-border)}

package/dist/components/BootOverlay.d.ts

@@ -0,0 +1,17 @@
+/**
+ * BootOverlay — Loading animation displayed while Nodepod boots.
+ *
+ * Shows staged progress: initializing → writing files → installing → starting → ready.
+ * Includes a progress bar and stage-specific messaging with a pulsing animation.
+ */
+import type { BootOverlayProps } from "../types";
+/**
+ * Full-screen loading overlay with staged boot progress.
+ *
+ * Renders over the workbench while Nodepod boots. Shows:
+ * - Current stage icon + label
+ * - Progress bar with percentage
+ * - Descriptive message of what's happening
+ * - Pulsing dots animation
+ */
+export declare function BootOverlay({ progress, className }: BootOverlayProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/CodeEditor.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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 type { CodeEditorProps } from "../types";
+/**
+ * CodeEditor component — Monaco editor with file tabs.
+ */
+export declare function CodeEditor({ files, activeFile, openFiles, onSelectFile, onCloseFile, onFileChange, readOnly, }: CodeEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/FileTree.d.ts

@@ -0,0 +1,19 @@
+/**
+ * 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 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 declare function buildFileTree(files: FileMap): FileNode[];
+/**
+ * FileTree component — renders a collapsible tree of files and folders.
+ */
+export declare function FileTree({ files, selectedFile, onSelectFile }: FileTreeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Preview.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 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 declare function Preview({ url, className }: PreviewProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Terminal.d.ts

@@ -0,0 +1,15 @@
+/**
+ * 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 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 declare function Terminal({ output, className }: TerminalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ViewSlider.d.ts

@@ -0,0 +1,25 @@
+/**
+ * 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 from "react";
+/** The two views available in the workbench */
+export type WorkbenchView = "code" | "preview";
+interface ViewSliderProps {
+    selected: WorkbenchView;
+    onSelect: (view: WorkbenchView) => void;
+}
+/**
+ * ViewSlider — renders a pill-shaped toggle with animated selection indicator.
+ *
+ * Usage:
+ * ```tsx
+ * <ViewSlider selected={view} onSelect={setView} />
+ * ```
+ */
+export declare const ViewSlider: React.NamedExoticComponent<ViewSliderProps>;
+export {};

package/dist/components/Workbench.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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 "allotment/dist/style.css";
+import type { CodeSandboxProps } from "../types";
+/**
+ * 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 declare function CodeSandbox(props: CodeSandboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/useRuntime.d.ts

@@ -0,0 +1,25 @@
+/**
+ * useRuntime — React hook wrapping NodepodRuntime lifecycle.
+ *
+ * Manages the Nodepod runtime instance and exposes reactive state
+ * for all UI components (progress, files, terminal output, preview URL).
+ */
+import { NodepodRuntime } from "../services/runtime";
+import type { CodeSandboxProps, FileMap, RuntimeState } from "../types";
+/**
+ * Hook that manages the full Nodepod runtime lifecycle.
+ *
+ * @param props - CodeSandbox component props
+ * @returns Reactive runtime state + control functions
+ */
+export declare function useRuntime(props: CodeSandboxProps): {
+    state: RuntimeState;
+    selectedFile: string | null;
+    openFiles: string[];
+    handleFileChange: (path: string, content: string) => Promise<void>;
+    handleSelectFile: (path: string) => void;
+    handleCloseFile: (path: string) => void;
+    restart: () => Promise<void>;
+    getChangedFiles: () => FileMap;
+    runtime: import("react").MutableRefObject<NodepodRuntime | null>;
+};