@tangle-network/sandbox-ui 0.3.12 → 0.4.0

package/README.md

@@ -222,6 +222,12 @@ For that, compose directly from:
 
 Retheming is absolutely supported, but the documentation was thinner than it should be. The token layer is strong; the higher-level surfaces are themeable, but more opinionated. For a radically different product look, prefer keeping the token contract and wrapping the higher-level workbench/chat surfaces rather than fighting every internal class.
 
+## Docs
+
+| Guide | Description |
+|-------|-------------|
+| [Sidebar](./docs/sidebar.md) | Composable Rail + Panel sidebar system (architecture, components, full API) |
+
 ## Subpath Exports
 
 | Subpath | Description |
@@ -232,7 +238,7 @@ Retheming is absolutely supported, but the documentation was thinner than it sho
 | `/workspace` | SandboxWorkbench, WorkspaceLayout, DirectoryPane, RuntimePane, StatusBar |
 | `/openui` | OpenUIArtifactRenderer and schema types for structured artifact rendering |
 | `/files` | FileTree, FilePreview, FileTabs, FileArtifactPane |
-| `/dashboard` | DashboardLayout, BillingDashboard, UsageChart, ProfileSelector |
+| `/dashboard` | [Sidebar](./docs/sidebar.md), DashboardLayout, BillingDashboard, UsageChart, ProfileSelector |
 | `/editor` | TipTap collaborative editor (requires optional peers) |
 | `/terminal` | xterm.js terminal view (requires optional peers) |
 | `/markdown` | Markdown renderer with GFM, code blocks, copy button |

package/dist/auth.js

@@ -3,9 +3,8 @@ import {
   GitHubLoginButton,
   LoginLayout,
   UserMenu
-} from "./chunk-PCTEG6HR.js";
-import "./chunk-B26TQ7SA.js";
-import "./chunk-MCGKDCOR.js";
+} from "./chunk-OHMO7NUX.js";
+import "./chunk-IW2JZCOC.js";
 import "./chunk-HWLX5NME.js";
 import "./chunk-RQHJBTEU.js";
 export {

package/dist/{chat-container-Dn1jWtWo.d.ts → chat-container-Cg-GwyiK.d.ts}

@@ -8,11 +8,13 @@ import { R as Run } from './run-CtFZ6s-D.js';
 import { OpenUIAction } from './openui.js';
 
 /**
- * ChatInput — message input bar with file attach, send/cancel, model selector.
+ * ChatInput — message input bar with file attach, drag-and-drop, send/cancel.
  *
  * - Auto-resizing textarea (up to max height)
  * - Enter to send, Shift+Enter for newline
- * - File attachment button with pending file chips
+ * - Drag-and-drop files onto the input with styled overlay
+ * - File attachment button (files) + folder attachment button
+ * - Pending file/folder chips
  * - Cancel button when streaming
  * - Optional model selector pill
  */
@@ -20,6 +22,9 @@ interface PendingFile {
     id: string;
     name: string;
     size: number;
+    type: "file" | "folder";
+    /** Number of files inside (for folders) */
+    fileCount?: number;
     status: "pending" | "uploading" | "ready" | "error";
 }
 interface ChatInputProps {
@@ -34,10 +39,19 @@ interface ChatInputProps {
     /** Pending uploaded files */
     pendingFiles?: PendingFile[];
     onRemoveFile?: (id: string) => void;
+    /** Called when files are attached (via button or drag-and-drop) */
     onAttach?: (files: FileList) => void;
+    /** Called when a folder is selected via the folder button */
+    onAttachFolder?: (files: FileList) => void;
+    /** Accepted file types for the file input (e.g. ".pdf,.csv") */
+    accept?: string;
+    /** Drop zone overlay title */
+    dropTitle?: string;
+    /** Drop zone overlay description */
+    dropDescription?: string;
     className?: string;
 }
-declare function ChatInput({ onSend, onCancel, isStreaming, disabled, placeholder, modelLabel, onModelClick, pendingFiles, onRemoveFile, onAttach, className, }: ChatInputProps): react_jsx_runtime.JSX.Element;
+declare function ChatInput({ onSend, onCancel, isStreaming, disabled, placeholder, modelLabel, onModelClick, pendingFiles, onRemoveFile, onAttach, onAttachFolder, accept, dropTitle, dropDescription, className, }: ChatInputProps): react_jsx_runtime.JSX.Element;
 
 interface ChatContainerProps {
     messages: SessionMessage[];

package/dist/chat.d.ts

@@ -1,4 +1,4 @@
-export { C as ChatContainer, a as ChatContainerProps, b as ChatInput, c as ChatInputProps, P as PendingFile } from './chat-container-Dn1jWtWo.js';
+export { C as ChatContainer, a as ChatContainerProps, b as ChatInput, c as ChatInputProps, P as PendingFile } from './chat-container-Cg-GwyiK.js';
 import * as React from 'react';
 import { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';

package/dist/chat.js

@@ -6,7 +6,7 @@ import {
   MessageList,
   ThinkingIndicator,
   UserMessage
-} from "./chunk-6H3EFUUC.js";
+} from "./chunk-GVUW4VDD.js";
 import "./chunk-CNWVHQFY.js";
 import "./chunk-72UEKFZ2.js";
 import "./chunk-HRMUF35V.js";

package/dist/{chunk-QMKWQF6F.js → chunk-DQYODCBN.js}

@@ -10,7 +10,7 @@ import {
 } from "./chunk-MUOL44AE.js";
 import {
   ChatContainer
-} from "./chunk-6H3EFUUC.js";
+} from "./chunk-GVUW4VDD.js";
 import {
   OpenUIArtifactRenderer
 } from "./chunk-YDBXQQLC.js";
@@ -18,7 +18,7 @@ import {
   FileArtifactPane,
   FileTree,
   filterFileTree
-} from "./chunk-IAIJUFM6.js";
+} from "./chunk-HYLTXGOI.js";
 import {
   ArtifactPane
 } from "./chunk-W4LM3QYZ.js";
@@ -121,6 +121,43 @@ function ResizeHandle({ label, onDragStart, onStep, className }) {
     }
   );
 }
+function HorizontalResizeHandle({ label, onDragStart, onStep, className }) {
+  const handlePointerDown = (event) => {
+    event.preventDefault();
+    onDragStart(event.clientY);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      onStep(24);
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      onStep(-24);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      role: "separator",
+      "aria-orientation": "horizontal",
+      onPointerDown: handlePointerDown,
+      onKeyDown: handleKeyDown,
+      className: cn(
+        "relative hidden h-3 shrink-0 cursor-row-resize lg:flex",
+        "items-center justify-center bg-transparent touch-none w-full",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 top-1/2 h-px -translate-y-1/2 bg-[var(--border-subtle)] transition-colors" }),
+        /* @__PURE__ */ jsx("span", { className: "absolute inset-x-0 top-1/2 h-[3px] -translate-y-1/2 rounded-full bg-transparent hover:bg-[var(--brand-cool)]/30 focus-visible:bg-[var(--brand-cool)]/40" })
+      ]
+    }
+  );
+}
 function MobileDrawer({ side, title, header, onClose, children }) {
   return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-50 flex lg:hidden", "aria-modal": "true", role: "dialog", "aria-label": title, children: [
     /* @__PURE__ */ jsx(
@@ -174,10 +211,13 @@ function WorkspaceLayout({
   defaultBottomOpen = false,
   defaultLeftWidth = 280,
   defaultRightWidth = 480,
+  defaultBottomHeight = 224,
   minLeftWidth = 220,
   maxLeftWidth = 420,
   minRightWidth = 320,
   maxRightWidth = 720,
+  minBottomHeight = 100,
+  maxBottomHeight = 500,
   persistenceKey,
   resizable = true,
   theme = "operator",
@@ -202,6 +242,9 @@ function WorkspaceLayout({
   const [rightWidth, setRightWidth] = useState(
     clamp(storedLayout?.rightWidth ?? defaultRightWidth, minRightWidth, maxRightWidth)
   );
+  const [bottomHeight, setBottomHeight] = useState(
+    clamp(storedLayout?.bottomHeight ?? defaultBottomHeight, minBottomHeight, maxBottomHeight)
+  );
   useEffect(() => {
     if (!persistenceKey || typeof window === "undefined") return;
     const payload = {
@@ -209,16 +252,20 @@ function WorkspaceLayout({
       rightOpen,
       bottomOpen,
       leftWidth,
-      rightWidth
+      rightWidth,
+      bottomHeight
     };
     window.localStorage.setItem(persistenceKey, JSON.stringify(payload));
-  }, [bottomOpen, leftOpen, leftWidth, persistenceKey, rightOpen, rightWidth]);
+  }, [bottomHeight, bottomOpen, leftOpen, leftWidth, persistenceKey, rightOpen, rightWidth]);
   useEffect(() => {
     if (!desktop) return;
     const handlePointerMove = (event) => {
       const dragState = dragStateRef.current;
       if (!dragState) return;
-      if (dragState.side === "left") {
+      if (dragState.side === "bottom") {
+        const delta = dragState.pointerStartY - event.clientY;
+        setBottomHeight(clamp(dragState.heightStart + delta, minBottomHeight, maxBottomHeight));
+      } else if (dragState.side === "left") {
         const delta = event.clientX - dragState.pointerStartX;
         setLeftWidth(clamp(dragState.widthStart + delta, minLeftWidth, maxLeftWidth));
       } else {
@@ -237,14 +284,25 @@ function WorkspaceLayout({
       window.removeEventListener("pointerup", handlePointerUp);
       window.removeEventListener("pointercancel", handlePointerUp);
     };
-  }, [desktop, maxLeftWidth, maxRightWidth, minLeftWidth, minRightWidth]);
+  }, [desktop, maxBottomHeight, maxLeftWidth, maxRightWidth, minBottomHeight, minLeftWidth, minRightWidth]);
   const leftStyle = useMemo(() => ({ width: `${leftWidth}px` }), [leftWidth]);
   const rightStyle = useMemo(() => ({ width: `${rightWidth}px` }), [rightWidth]);
   const startResize = (side, pointerStartX) => {
     dragStateRef.current = {
       side,
       pointerStartX,
-      widthStart: side === "left" ? leftWidth : rightWidth
+      pointerStartY: 0,
+      widthStart: side === "left" ? leftWidth : rightWidth,
+      heightStart: 0
+    };
+  };
+  const startBottomResize = (pointerStartY) => {
+    dragStateRef.current = {
+      side: "bottom",
+      pointerStartX: 0,
+      pointerStartY,
+      widthStart: 0,
+      heightStart: bottomHeight
     };
   };
   const stepLeftWidth = (delta) => {
@@ -253,6 +311,9 @@ function WorkspaceLayout({
   const stepRightWidth = (delta) => {
     setRightWidth((current) => clamp(current + delta, minRightWidth, maxRightWidth));
   };
+  const stepBottomHeight = (delta) => {
+    setBottomHeight((current) => clamp(current + delta, minBottomHeight, maxBottomHeight));
+  };
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -334,29 +395,40 @@ function WorkspaceLayout({
               )
             ] }),
             /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: center }),
-            bottom && bottomOpen && /* @__PURE__ */ jsxs(
-              "section",
-              {
-                "aria-label": bottomLabel,
-                className: "border-t border-[var(--border-subtle)] bg-[var(--bg-card)]",
-                children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-[var(--border-subtle)] px-3 py-2", children: [
-                    /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: bottomHeader ?? /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-[0.12em] text-[var(--text-muted)]", children: "Runtime" }) }),
-                    /* @__PURE__ */ jsx(
-                      "button",
-                      {
-                        type: "button",
-                        "aria-label": "Collapse bottom panel",
-                        onClick: () => setBottomOpen(false),
-                        className: "rounded-[var(--radius-sm)] p-1.5 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
-                        children: /* @__PURE__ */ jsx(PanelBottomClose, { className: "h-4 w-4" })
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsx("div", { className: "max-h-56 overflow-auto", children: bottom })
-                ]
-              }
-            ),
+            bottom && bottomOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+              resizable && /* @__PURE__ */ jsx(
+                HorizontalResizeHandle,
+                {
+                  label: "Resize bottom panel",
+                  onDragStart: startBottomResize,
+                  onStep: stepBottomHeight
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "section",
+                {
+                  "aria-label": bottomLabel,
+                  className: "border-t border-[var(--border-subtle)] bg-[var(--bg-card)] shrink-0",
+                  style: { height: `${bottomHeight}px` },
+                  children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-[var(--border-subtle)] px-3 py-2 shrink-0", children: [
+                      /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: bottomHeader ?? /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-[0.12em] text-[var(--text-muted)]", children: "Runtime" }) }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          "aria-label": "Collapse bottom panel",
+                          onClick: () => setBottomOpen(false),
+                          className: "rounded-[var(--radius-sm)] p-1.5 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]/60",
+                          children: /* @__PURE__ */ jsx(PanelBottomClose, { className: "h-4 w-4" })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: bottom })
+                  ] })
+                }
+              )
+            ] }),
             centerFooter && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-[var(--border-subtle)] bg-[var(--bg-dark)]", children: centerFooter })
           ] }),
           desktop && right && rightOpen && /* @__PURE__ */ jsxs(Fragment, { children: [