@illuma-ai/code-sandbox 1.2.1 → 1.3.0

package/src/components/Workbench.tsx

@@ -303,6 +303,7 @@ interface CodeViewProps {
 /**
  * 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({
@@ -317,6 +318,8 @@ function CodeView({
   onCloseFile,
   onFileChange,
 }: CodeViewProps) {
+  const [terminalMinimized, setTerminalMinimized] = useState(false);
+
   return (
     <div className="h-full w-full">
       <Allotment>
@@ -332,24 +335,45 @@ function CodeView({
 
         {/* Editor + Terminal — right */}
         <Allotment.Pane>
-          <Allotment vertical>
-            <Allotment.Pane preferredSize="70%">
-              <CodeEditor
-                files={files}
-                originalFiles={originalFiles}
-                fileChanges={fileChanges}
-                activeFile={selectedFile}
-                openFiles={openFiles}
-                onSelectFile={onSelectFile}
-                onCloseFile={onCloseFile}
-                onFileChange={onFileChange}
-              />
-            </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>
 
-            <Allotment.Pane preferredSize="30%" minSize={60}>
-              <Terminal output={terminalOutput} />
-            </Allotment.Pane>
-          </Allotment>
+            {/* 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>

package/src/index.ts

@@ -5,6 +5,10 @@
  * Consumers import from here.
  */
 
+// Styles — imported here so Vite extracts them into the library CSS bundle.
+// Consumers must import: import "@illuma-ai/code-sandbox/styles.css";
+import "./styles.css";
+
 // Main component
 export { CodeSandbox } from "./components/Workbench";
 

package/src/styles.css

@@ -10,7 +10,8 @@
   --sb-bg-active: #37373d;
   --sb-sidebar: #252526;
   --sb-editor: #1e1e1e;
-  --sb-terminal: #1e1e1e;
+  --sb-terminal: #0d1117;
+  --sb-terminal-header: #161b22;
   --sb-preview: #ffffff;
   --sb-border: #3c3c3c;
   --sb-text: #cccccc;
@@ -18,9 +19,66 @@
   --sb-text-active: #ffffff;
   --sb-accent: #007acc;
   --sb-accent-hover: #1a8ad4;
-  --sb-success: #4ec9b0;
-  --sb-warning: #cca700;
-  --sb-error: #f44747;
+  --sb-success: #3fb950;
+  --sb-warning: #d29922;
+  --sb-error: #f85149;
+  --sb-info: #58a6ff;
+  --sb-cyan: #56d4dd;
+  --sb-magenta: #bc8cff;
+  --sb-yellow: #e3b341;
+  --sb-scrollbar-thumb: rgba(255, 255, 255, 0.12);
+  --sb-scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);
+  --sb-scrollbar-track: transparent;
+  --sb-scrollbar-width: 6px;
+}
+
+/* ---------------------------------------------------------------------------
+ * Modern thin scrollbars — applies to ALL scrollable elements in sandbox
+ * Auto-hides via opacity transition. Themed with CSS vars.
+ * --------------------------------------------------------------------------- */
+
+/* Webkit (Chrome, Safari, Edge) */
+.sb-root ::-webkit-scrollbar {
+  width: var(--sb-scrollbar-width);
+  height: var(--sb-scrollbar-width);
+}
+
+.sb-root ::-webkit-scrollbar-track {
+  background: var(--sb-scrollbar-track);
+}
+
+.sb-root ::-webkit-scrollbar-thumb {
+  background: var(--sb-scrollbar-thumb);
+  border-radius: 999px;
+}
+
+.sb-root ::-webkit-scrollbar-thumb:hover {
+  background: var(--sb-scrollbar-thumb-hover);
+}
+
+.sb-root ::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* Firefox */
+.sb-root * {
+  scrollbar-width: thin;
+  scrollbar-color: var(--sb-scrollbar-thumb) var(--sb-scrollbar-track);
+}
+
+/* ---------------------------------------------------------------------------
+ * Terminal — clean monochrome styling
+ * --------------------------------------------------------------------------- */
+
+.sb-terminal-output {
+  font-family:
+    "Cascadia Code", "JetBrains Mono", "Fira Code", "Consolas", "Monaco",
+    "Courier New", monospace;
+  font-size: 12.5px;
+  line-height: 1.6;
+  letter-spacing: 0.01em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 /*

package/src/types.ts

@@ -343,6 +343,10 @@ export interface CodeEditorProps {
 export interface TerminalProps {
   output: string[];
   className?: string;
+  /** Whether the terminal is collapsed to just its header bar */
+  minimized?: boolean;
+  /** Called when the user clicks the minimize/expand toggle */
+  onToggleMinimize?: () => void;
 }
 
 export interface PreviewProps {

package/dist/code-sandbox.css

@@ -1 +0,0 @@
-: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)}