@tangle-network/sandbox-ui 0.4.0 → 0.5.1

package/dist/{chunk-MUOL44AE.js → chunk-BRBTD7RH.js}

@@ -18,12 +18,12 @@ var Input = React.forwardRef(
         type,
         id: inputId,
         className: cn(
-          "flex h-11 w-full rounded-lg border bg-card/50 px-4 py-2 text-sm transition-all duration-200",
+          "flex h-11 w-full rounded-lg border bg-[var(--depth-2)] px-4 py-2 text-sm transition-all duration-200",
           "placeholder:text-muted-foreground",
           "focus:outline-none focus:ring-2 focus:ring-offset-0",
           "disabled:cursor-not-allowed disabled:opacity-50",
           "file:border-0 file:bg-transparent file:font-medium file:text-sm",
-          error ? "border-red-500/50 focus:ring-red-500/20" : variants[variant],
+          error ? "border-[var(--surface-danger-border)] focus:ring-[var(--surface-danger-border)]" : variants[variant],
           className
         ),
         ref,
@@ -41,7 +41,7 @@ var Input = React.forwardRef(
         }
       ),
       input,
-      error && /* @__PURE__ */ jsx("p", { className: "text-red-400 text-sm", children: error }),
+      error && /* @__PURE__ */ jsx("p", { className: "text-[var(--surface-danger-text)] text-sm", children: error }),
       hint && !error && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground/70 text-sm", children: hint })
     ] });
   }
@@ -59,11 +59,11 @@ var Textarea = React.forwardRef(
       {
         id: textareaId,
         className: cn(
-          "flex min-h-[120px] w-full resize-y rounded-lg border bg-card/50 px-4 py-3 text-sm transition-all duration-200",
+          "flex min-h-[120px] w-full resize-y rounded-lg border bg-[var(--depth-2)] px-4 py-3 text-sm transition-all duration-200",
           "placeholder:text-muted-foreground",
           "focus:outline-none focus:ring-2 focus:ring-offset-0",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          error ? "border-red-500/50 focus:ring-red-500/20" : variants[variant],
+          error ? "border-[var(--surface-danger-border)] focus:ring-[var(--surface-danger-border)]" : variants[variant],
           className
         ),
         ref,
@@ -81,7 +81,7 @@ var Textarea = React.forwardRef(
         }
       ),
       textarea,
-      error && /* @__PURE__ */ jsx("p", { className: "text-red-400 text-sm", children: error }),
+      error && /* @__PURE__ */ jsx("p", { className: "text-[var(--surface-danger-text)] text-sm", children: error }),
       hint && !error && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground/70 text-sm", children: hint })
     ] });
   }

package/dist/{chunk-SSKVYXCR.js → chunk-DCPYTL4W.js}

@@ -1,6 +1,6 @@
 import {
   Card
-} from "./chunk-MXCSSOGH.js";
+} from "./chunk-TDYQBLL5.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -18,7 +18,7 @@ var SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) =>
   {
     ref,
     className: cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-[var(--border-subtle)] bg-[var(--depth-2)] px-3 py-2 text-sm shadow-sm placeholder:text-[var(--text-muted)] focus:outline-none focus:ring-1 focus:ring-[var(--brand-cool)] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     ),
     ...props,
@@ -60,7 +60,7 @@ var SelectContent = React.forwardRef(({ className, children, position = "popper"
   {
     ref,
     className: cn(
-      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=closed]:animate-out data-[state=open]:animate-in",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-[var(--border-subtle)] bg-[var(--depth-2)] text-[var(--text-primary)] shadow-[var(--shadow-card)] data-[state=closed]:animate-out data-[state=open]:animate-in",
       position === "popper" && "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
       className
     ),
@@ -97,7 +97,7 @@ var SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /*
   {
     ref,
     className: cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none focus:bg-[var(--depth-3)] focus:text-[var(--text-primary)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
@@ -112,7 +112,7 @@ var SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__P
   SelectPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    className: cn("-mx-1 my-1 h-px bg-[var(--border-subtle)]", className),
     ...props
   }
 ));
@@ -160,10 +160,10 @@ var toastVariants = cva(
     variants: {
       variant: {
         default: "border-border bg-background text-foreground",
-        success: "border-green-500/20 bg-green-500/10 text-green-400",
-        error: "border-red-500/20 bg-red-500/10 text-red-400",
-        warning: "border-yellow-500/20 bg-yellow-500/10 text-yellow-400",
-        info: "border-blue-500/20 bg-blue-500/10 text-blue-400"
+        success: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+        error: "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]",
+        warning: "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]",
+        info: "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]"
       }
     },
     defaultVariants: {
@@ -316,13 +316,13 @@ var StatCard = React5.forwardRef(
     ...props
   }, ref) => {
     const iconColors = {
-      default: "text-muted-foreground",
+      default: "text-[var(--text-muted)]",
       sandbox: "text-[var(--accent-text)]"
     };
     const trendColors = {
-      positive: "text-green-400",
-      negative: "text-red-400",
-      neutral: "text-muted-foreground"
+      positive: "text-[var(--surface-success-text)]",
+      negative: "text-[var(--surface-danger-text)]",
+      neutral: "text-[var(--text-muted)]"
     };
     const trendStatus = trend ? trend.value > 0 ? "positive" : trend.value < 0 ? "negative" : "neutral" : null;
     return /* @__PURE__ */ jsx5(
@@ -334,9 +334,9 @@ var StatCard = React5.forwardRef(
         ...props,
         children: /* @__PURE__ */ jsxs3("div", { className: "flex items-start justify-between", children: [
           /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
-            /* @__PURE__ */ jsx5("p", { className: "text-muted-foreground text-sm", children: title }),
+            /* @__PURE__ */ jsx5("p", { className: "text-[var(--text-muted)] text-sm", children: title }),
             /* @__PURE__ */ jsx5("p", { className: "font-bold text-3xl tracking-tight", children: value }),
-            subtitle && /* @__PURE__ */ jsx5("p", { className: "text-muted-foreground/70 text-xs", children: subtitle }),
+            subtitle && /* @__PURE__ */ jsx5("p", { className: "text-[var(--text-muted)] opacity-70 text-xs", children: subtitle }),
             trend && trendStatus && /* @__PURE__ */ jsxs3(
               "div",
               {
@@ -350,7 +350,7 @@ var StatCard = React5.forwardRef(
                     Math.abs(trend.value),
                     "%"
                   ] }),
-                  trend.label && /* @__PURE__ */ jsx5("span", { className: "text-muted-foreground", children: trend.label })
+                  trend.label && /* @__PURE__ */ jsx5("span", { className: "text-[var(--text-muted)]", children: trend.label })
                 ]
               }
             )
@@ -359,7 +359,7 @@ var StatCard = React5.forwardRef(
             "div",
             {
               className: cn(
-                "rounded-lg bg-muted/50 p-2",
+                "rounded-lg bg-[var(--depth-3)] p-2",
                 variant === "sandbox" && "bg-[var(--accent-surface-soft)]",
                 iconColors[variant]
               ),
@@ -395,34 +395,21 @@ var TerminalDisplay = React6.forwardRef(
       }
     }, [autoScroll]);
     const variants = {
-      default: "border-border",
+      default: "border-[var(--border-subtle)]",
       sandbox: "border-[var(--border-accent)] shadow-[var(--shadow-accent)]"
     };
-    const dotColors = {
-      default: ["bg-red-500", "bg-yellow-500", "bg-green-500"],
-      sandbox: ["bg-red-500", "bg-yellow-500", "bg-[var(--brand-cool)]"]
-    };
     return /* @__PURE__ */ jsxs4(
       "div",
       {
         ref,
         className: cn(
-          "overflow-hidden rounded-xl border bg-[#0a0a0a] font-mono text-sm",
+          "overflow-hidden rounded-xl border bg-[var(--depth-1)] font-mono text-sm",
           variants[variant],
           className
         ),
         ...props,
         children: [
-          showHeader && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 border-border/50 border-b bg-card/30 px-4 py-3", children: [
-            /* @__PURE__ */ jsx6("div", { className: "flex gap-1.5", children: dotColors[variant].map((color) => /* @__PURE__ */ jsx6(
-              "div",
-              {
-                className: cn("h-3 w-3 rounded-full", color)
-              },
-              color
-            )) }),
-            /* @__PURE__ */ jsx6("span", { className: "ml-2 text-muted-foreground text-xs", children: title })
-          ] }),
+          showHeader && /* @__PURE__ */ jsx6("div", { className: "flex items-center border-b border-[var(--border-subtle)] bg-[var(--depth-2)] px-4 py-3", children: /* @__PURE__ */ jsx6("span", { className: "text-[var(--text-muted)] text-xs", children: title }) }),
           /* @__PURE__ */ jsx6(
             "div",
             {
@@ -441,14 +428,14 @@ TerminalDisplay.displayName = "TerminalDisplay";
 var TerminalLine = React6.forwardRef(
   ({ className, type = "output", prompt = "$", timestamp, children, ...props }, ref) => {
     const typeStyles = {
-      input: "text-foreground",
-      output: "text-muted-foreground",
-      error: "text-red-400",
-      success: "text-green-400",
-      info: "text-blue-400",
-      thinking: "text-yellow-400 animate-pulse",
-      command: "text-foreground",
-      warning: "text-yellow-400"
+      input: "text-[var(--text-primary)]",
+      output: "text-[var(--text-secondary)]",
+      error: "text-[var(--surface-danger-text)]",
+      success: "text-[var(--surface-success-text)]",
+      info: "text-[var(--surface-info-text)]",
+      thinking: "text-[var(--surface-warning-text)] animate-pulse",
+      command: "text-[var(--text-primary)]",
+      warning: "text-[var(--surface-warning-text)]"
     };
     return /* @__PURE__ */ jsxs4(
       "div",
@@ -461,9 +448,9 @@ var TerminalLine = React6.forwardRef(
         ),
         ...props,
         children: [
-          (type === "input" || type === "command") && /* @__PURE__ */ jsx6("span", { className: "shrink-0 select-none text-green-400", children: prompt }),
+          (type === "input" || type === "command") && /* @__PURE__ */ jsx6("span", { className: "shrink-0 select-none text-[var(--surface-success-text)]", children: prompt }),
           type === "thinking" && /* @__PURE__ */ jsx6("span", { className: "shrink-0 select-none", children: "..." }),
-          timestamp && /* @__PURE__ */ jsxs4("span", { className: "shrink-0 select-none text-muted-foreground/50", children: [
+          timestamp && /* @__PURE__ */ jsxs4("span", { className: "shrink-0 select-none text-[var(--text-muted)] opacity-50", children: [
             "[",
             timestamp,
             "]"
@@ -480,7 +467,7 @@ var TerminalCursor = React6.forwardRef(({ className, ...props }, ref) => /* @__P
   {
     ref,
     className: cn(
-      "ml-0.5 inline-block h-4 w-2 animate-pulse bg-foreground",
+      "ml-0.5 inline-block h-4 w-2 animate-pulse bg-[var(--text-primary)]",
       className
     ),
     ...props
@@ -497,19 +484,19 @@ var TerminalInput = React6.forwardRef(
       }
     };
     const variants = {
-      default: "border-border focus-within:border-muted-foreground",
+      default: "border-[var(--border-subtle)] focus-within:border-[var(--border-default)]",
       sandbox: "border-[var(--border-accent)] focus-within:border-[var(--border-accent-hover)]"
     };
     return /* @__PURE__ */ jsxs4(
       "div",
       {
         className: cn(
-          "flex items-center rounded-lg border bg-[#0a0a0a] px-4 py-2.5 font-mono text-sm transition-colors",
+          "flex items-center rounded-lg border bg-[var(--depth-1)] px-4 py-2.5 font-mono text-sm transition-colors",
           variants[variant],
           className
         ),
         children: [
-          /* @__PURE__ */ jsx6("span", { className: "mr-2 select-none text-green-400", children: "$" }),
+          /* @__PURE__ */ jsx6("span", { className: "mr-2 select-none text-[var(--surface-success-text)]", children: "$" }),
           /* @__PURE__ */ jsx6(
             "input",
             {
@@ -518,7 +505,7 @@ var TerminalInput = React6.forwardRef(
               value,
               onChange: (e) => setValue(e.target.value),
               onKeyDown: handleKeyDown,
-              className: "flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground",
+              className: "flex-1 bg-transparent text-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)]",
               ...props
             }
           ),
@@ -597,10 +584,15 @@ function DropZone({
       onDrop: handleDrop,
       className: cn("relative", className),
       children: [
-        dragOver && (overlay || /* @__PURE__ */ jsx7("div", { className: "fixed inset-0 z-[100] flex items-center justify-center pointer-events-none bg-black/20 backdrop-blur-sm", children: /* @__PURE__ */ jsxs5("div", { className: "rounded-3xl border-2 border-dashed border-[hsl(var(--ring))] bg-[hsl(var(--card))] p-16 text-center shadow-2xl max-w-lg mx-auto", children: [
-          /* @__PURE__ */ jsx7("div", { className: "mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl bg-[hsl(var(--primary))]/10", children: typeof icon === "string" ? /* @__PURE__ */ jsx7("span", { className: "material-symbols-outlined text-5xl text-[hsl(var(--primary))]", children: icon }) : icon }),
-          /* @__PURE__ */ jsx7("h2", { className: "text-2xl font-extrabold text-[hsl(var(--foreground))]", children: title }),
-          /* @__PURE__ */ jsx7("p", { className: "mt-2 text-[hsl(var(--muted-foreground))]", children: description })
+        dragOver && (overlay || /* @__PURE__ */ jsx7("div", { className: "fixed inset-0 z-[100] flex items-center justify-center pointer-events-none bg-[var(--depth-1)]", children: /* @__PURE__ */ jsxs5("div", { className: "rounded-2xl border-2 border-dashed border-[var(--border-accent)] bg-[var(--depth-2)] p-16 text-center shadow-[var(--shadow-dropdown)] max-w-lg mx-auto", children: [
+          /* @__PURE__ */ jsx7("div", { className: "mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl border border-[var(--border-accent)] bg-[var(--accent-surface-soft)]", children: typeof icon === "string" ? /* @__PURE__ */ jsxs5("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "h-10 w-10 text-[var(--accent-text)]", children: [
+            /* @__PURE__ */ jsx7("title", { children: "Upload" }),
+            /* @__PURE__ */ jsx7("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+            /* @__PURE__ */ jsx7("polyline", { points: "17 8 12 3 7 8" }),
+            /* @__PURE__ */ jsx7("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
+          ] }) : icon }),
+          /* @__PURE__ */ jsx7("h2", { className: "text-2xl font-bold text-[var(--text-primary)]", children: title }),
+          /* @__PURE__ */ jsx7("p", { className: "mt-2 text-sm text-[var(--text-muted)]", children: description })
         ] }) })),
         children
       ]
@@ -609,6 +601,7 @@ function DropZone({
 }
 
 // src/primitives/upload-progress.tsx
+import { AlertCircle as AlertCircle2, CheckCircle2 as CheckCircle22, FileText, Loader2, RefreshCw, X as X2 } from "lucide-react";
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes}B`;
@@ -622,45 +615,35 @@ function UploadProgress({ files, onRemove, onRetry, className }) {
     {
       className: cn(
         "flex items-center gap-3 rounded-lg border px-3 py-2 text-sm",
-        file.status === "error" ? "border-[hsl(var(--destructive))]/20 bg-[hsl(var(--destructive))]/5" : file.status === "complete" ? "border-[hsl(var(--success))]/20 bg-[hsl(var(--success))]/5" : "border-[hsl(var(--border))] bg-[hsl(var(--card))]"
+        file.status === "error" ? "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)]" : file.status === "complete" ? "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]" : "border-[var(--border-subtle)] bg-[var(--depth-2)]"
       ),
       children: [
-        /* @__PURE__ */ jsx8(
-          "span",
-          {
-            className: cn(
-              "material-symbols-outlined text-base shrink-0",
-              file.status === "complete" && "text-[hsl(var(--success))]",
-              file.status === "error" && "text-[hsl(var(--destructive))]",
-              file.status === "uploading" && "text-[hsl(var(--primary))] animate-pulse",
-              file.status === "pending" && "text-[hsl(var(--muted-foreground))]"
-            ),
-            style: file.status === "complete" ? { fontVariationSettings: "'FILL' 1" } : void 0,
-            children: file.status === "complete" ? "check_circle" : file.status === "error" ? "error" : file.status === "uploading" ? "progress_activity" : "description"
-          }
-        ),
-        /* @__PURE__ */ jsxs6("div", { className: "flex-1 min-w-0", children: [
+        file.status === "complete" && /* @__PURE__ */ jsx8(CheckCircle22, { className: "h-4 w-4 shrink-0 text-[var(--surface-success-text)]" }),
+        file.status === "error" && /* @__PURE__ */ jsx8(AlertCircle2, { className: "h-4 w-4 shrink-0 text-[var(--surface-danger-text)]" }),
+        file.status === "uploading" && /* @__PURE__ */ jsx8(Loader2, { className: "h-4 w-4 shrink-0 animate-spin text-[var(--brand-cool)]" }),
+        file.status === "pending" && /* @__PURE__ */ jsx8(FileText, { className: "h-4 w-4 shrink-0 text-[var(--text-muted)]" }),
+        /* @__PURE__ */ jsxs6("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx8("span", { className: "truncate font-medium text-[hsl(var(--foreground))]", children: file.name }),
-            /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-xs text-[hsl(var(--muted-foreground))]", children: formatSize(file.size) })
+            /* @__PURE__ */ jsx8("span", { className: "truncate font-medium text-[var(--text-primary)]", children: file.name }),
+            /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-xs text-[var(--text-muted)]", children: formatSize(file.size) })
           ] }),
-          file.status === "uploading" && file.progress !== void 0 && /* @__PURE__ */ jsx8("div", { className: "mt-1 h-1 w-full rounded-full bg-[hsl(var(--muted))] overflow-hidden", children: /* @__PURE__ */ jsx8(
+          file.status === "uploading" && file.progress !== void 0 && /* @__PURE__ */ jsx8("div", { className: "mt-1 h-1 w-full overflow-hidden rounded-full bg-[var(--depth-3)]", children: /* @__PURE__ */ jsx8(
             "div",
             {
-              className: "h-full rounded-full bg-[hsl(var(--primary))] transition-all",
+              className: "h-full rounded-full bg-[var(--brand-cool)] transition-all",
               style: { width: `${file.progress}%` }
             }
           ) }),
-          file.status === "error" && file.error && /* @__PURE__ */ jsx8("p", { className: "mt-0.5 text-xs text-[hsl(var(--destructive))]", children: file.error })
+          file.status === "error" && file.error && /* @__PURE__ */ jsx8("p", { className: "mt-0.5 text-xs text-[var(--surface-danger-text)]", children: file.error })
         ] }),
-        /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 shrink-0", children: [
+        /* @__PURE__ */ jsxs6("div", { className: "flex shrink-0 items-center gap-1", children: [
           file.status === "error" && onRetry && /* @__PURE__ */ jsx8(
             "button",
             {
               type: "button",
               onClick: () => onRetry(file.id),
-              className: "rounded p-1 text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--foreground))] transition-colors",
-              children: /* @__PURE__ */ jsx8("span", { className: "material-symbols-outlined text-sm", children: "refresh" })
+              className: "rounded p-1 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]",
+              children: /* @__PURE__ */ jsx8(RefreshCw, { className: "h-3.5 w-3.5" })
             }
           ),
           onRemove && /* @__PURE__ */ jsx8(
@@ -668,8 +651,8 @@ function UploadProgress({ files, onRemove, onRetry, className }) {
             {
               type: "button",
               onClick: () => onRemove(file.id),
-              className: "rounded p-1 text-[hsl(var(--muted-foreground))] hover:bg-[hsl(var(--accent))] hover:text-[hsl(var(--foreground))] transition-colors",
-              children: /* @__PURE__ */ jsx8("span", { className: "material-symbols-outlined text-sm", children: "close" })
+              className: "rounded p-1 text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text-primary)]",
+              children: /* @__PURE__ */ jsx8(X2, { className: "h-3.5 w-3.5" })
             }
           )
         ] })
@@ -752,7 +735,7 @@ function SidebarDropZone({
       className: cn(
         "rounded-lg border-2 border-dashed transition-all duration-150",
         isVisible ? "p-4" : "p-0 border-transparent",
-        dragOver ? "border-[var(--brand-cool,hsl(var(--ring)))] bg-[var(--brand-cool,hsl(var(--primary)))]/8" : persistent ? "border-[var(--border-subtle,hsl(var(--border)))] bg-transparent hover:border-[var(--border-default,hsl(var(--border)))] hover:bg-[var(--bg-hover,hsl(var(--accent)))]/50" : "",
+        dragOver ? "border-[var(--brand-cool,hsl(var(--ring)))] bg-[var(--accent-surface-soft)]" : persistent ? "border-[var(--border-subtle,hsl(var(--border)))] bg-transparent hover:border-[var(--border-default,hsl(var(--border)))] hover:bg-[var(--bg-hover,hsl(var(--accent)))]" : "",
         disabled && "opacity-50 pointer-events-none",
         className
       ),

package/dist/chunk-DLCFZDGX.js

@@ -0,0 +1,182 @@
+// src/hooks/use-pty-session.ts
+import { useState, useEffect, useRef, useCallback } from "react";
+function usePtySession({ apiUrl, token, onData }) {
+  const [isConnected, setIsConnected] = useState(false);
+  const [error, setError] = useState(null);
+  const sessionIdRef = useRef(null);
+  const abortRef = useRef(null);
+  const retryTimerRef = useRef(void 0);
+  const retryCountRef = useRef(0);
+  const mountedRef = useRef(true);
+  const onDataRef = useRef(onData);
+  onDataRef.current = onData;
+  const connectStreamRef = useRef(null);
+  const abortStream = useCallback(() => {
+    if (retryTimerRef.current) {
+      clearTimeout(retryTimerRef.current);
+      retryTimerRef.current = void 0;
+    }
+    if (abortRef.current) {
+      abortRef.current.abort();
+      abortRef.current = null;
+    }
+  }, []);
+  const cleanup = useCallback(() => {
+    abortStream();
+    if (sessionIdRef.current) {
+      const sid = sessionIdRef.current;
+      sessionIdRef.current = null;
+      fetch(`${apiUrl}/terminals/${sid}`, {
+        method: "DELETE",
+        headers: { Authorization: `Bearer ${token}` },
+        credentials: "include"
+      }).catch(() => {
+      });
+    }
+    setIsConnected(false);
+  }, [apiUrl, token, abortStream]);
+  const connectStream = useCallback(async (sessionId) => {
+    abortStream();
+    setError(null);
+    try {
+      const controller = new AbortController();
+      abortRef.current = controller;
+      const streamRes = await fetch(`${apiUrl}/terminals/${sessionId}/stream`, {
+        headers: { Authorization: `Bearer ${token}` },
+        credentials: "include",
+        signal: controller.signal
+      });
+      if (!streamRes.ok || !streamRes.body) {
+        const err = new Error(`SSE stream failed: ${streamRes.status}`);
+        err.httpStatus = streamRes.status;
+        throw err;
+      }
+      if (mountedRef.current) {
+        setIsConnected(true);
+        setError(null);
+        retryCountRef.current = 0;
+      }
+      const reader = streamRes.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = "";
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        buffer += decoder.decode(value, { stream: true });
+        const frames = buffer.split("\n\n");
+        buffer = frames.pop() ?? "";
+        for (const frame of frames) {
+          if (!frame.trim()) continue;
+          for (const line of frame.split("\n")) {
+            if (line.startsWith("data:")) {
+              const raw = line.slice(5).trim();
+              if (!raw) continue;
+              try {
+                const event = JSON.parse(raw);
+                if (event.type === "data.stdout" || event.type === "data.stderr") {
+                  const text = event.properties?.text ?? "";
+                  if (text && mountedRef.current) {
+                    onDataRef.current(text);
+                  }
+                }
+              } catch {
+                if (mountedRef.current) {
+                  onDataRef.current(raw);
+                }
+              }
+            }
+          }
+        }
+      }
+      if (mountedRef.current) {
+        setIsConnected(false);
+        retryTimerRef.current = setTimeout(() => {
+          if (mountedRef.current && sessionIdRef.current) {
+            connectStreamRef.current?.(sessionIdRef.current);
+          }
+        }, 1e3);
+      }
+    } catch (err) {
+      if (err.name === "AbortError") return;
+      if (mountedRef.current) {
+        const message = err instanceof Error ? err.message : "Stream connection failed";
+        setError(message);
+        setIsConnected(false);
+        const httpStatus = err.httpStatus;
+        const is4xx = httpStatus !== void 0 && httpStatus >= 400 && httpStatus < 500;
+        const MAX_RETRIES = 8;
+        if (!is4xx && retryCountRef.current < MAX_RETRIES) {
+          const delay = Math.min(3e3 * Math.pow(2, retryCountRef.current), 3e4);
+          retryCountRef.current++;
+          retryTimerRef.current = setTimeout(() => {
+            if (mountedRef.current && sessionIdRef.current) {
+              connectStreamRef.current?.(sessionIdRef.current);
+            }
+          }, delay);
+        }
+      }
+    }
+  }, [apiUrl, token, abortStream]);
+  connectStreamRef.current = connectStream;
+  const connect = useCallback(async () => {
+    cleanup();
+    retryCountRef.current = 0;
+    setError(null);
+    try {
+      const res = await fetch(`${apiUrl}/terminals`, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "application/json"
+        },
+        credentials: "include"
+      });
+      if (!res.ok) {
+        throw new Error(`Failed to create terminal: ${res.status}`);
+      }
+      const body = await res.json();
+      const sessionId = body.data?.sessionId ?? body.sessionId;
+      if (!sessionId) throw new Error("No sessionId in response");
+      if (!mountedRef.current) return;
+      sessionIdRef.current = sessionId;
+      await connectStream(sessionId);
+    } catch (err) {
+      if (err.name === "AbortError") return;
+      if (mountedRef.current) {
+        const message = err instanceof Error ? err.message : "Terminal connection failed";
+        setError(message);
+        setIsConnected(false);
+      }
+    }
+  }, [apiUrl, token, cleanup, connectStream]);
+  const sendCommand = useCallback(async (command) => {
+    const sid = sessionIdRef.current;
+    if (!sid) return;
+    const res = await fetch(`${apiUrl}/terminals/${sid}/input`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        "Content-Type": "application/json"
+      },
+      credentials: "include",
+      body: JSON.stringify({ data: command })
+    });
+    if (!res.ok) {
+      const text = await res.text();
+      throw new Error(text || `Input failed: ${res.status}`);
+    }
+  }, [apiUrl, token]);
+  useEffect(() => {
+    mountedRef.current = true;
+    connect();
+    return () => {
+      mountedRef.current = false;
+      cleanup();
+    };
+  }, [connect, cleanup]);
+  return { isConnected, error, sendCommand, reconnect: connect };
+}
+
+export {
+  usePtySession
+};

package/dist/{chunk-HXEA7L2T.js → chunk-FFOXUHOF.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-W4LM3QYZ.js";
 import {
   Markdown
-} from "./chunk-LTFK464G.js";
+} from "./chunk-H5XYSFYE.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -21,7 +21,7 @@ import { PencilLine, Save, Users, Wifi, WifiOff } from "lucide-react";
 // src/editor/tiptap-editor.tsx
 import Collaboration from "@tiptap/extension-collaboration";
 
-// node_modules/@tiptap/extension-collaboration-caret/dist/index.js
+// node_modules/.pnpm/@tiptap+extension-collaboration-caret@3.21.0_@tiptap+core@3.20.4_@tiptap+pm@3.20.4__@ti_795f003f8529614c8766f32d0d0747ee/node_modules/@tiptap/extension-collaboration-caret/dist/index.js
 import { Extension } from "@tiptap/core";
 import { defaultSelectionBuilder, yCursorPlugin } from "@tiptap/y-tiptap";
 var awarenessStatesToArray = (states) => {
@@ -701,7 +701,7 @@ function EditorToolbar({
     "div",
     {
       className: cn(
-        "flex items-center gap-1 border-border border-b bg-muted/50 p-2",
+        "flex items-center gap-1 border-border border-b bg-[var(--depth-2)] p-2",
         className
       ),
       children: buttons.map((button) => {
@@ -820,7 +820,7 @@ function EditorToolbar2({
     "div",
     {
       className: cn(
-        "flex items-center gap-1 border-border border-b bg-muted/50 p-2",
+        "flex items-center gap-1 border-border border-b bg-[var(--depth-2)] p-2",
         className
       ),
       children: buttons.map((button) => {
@@ -941,7 +941,7 @@ function MarkdownDocumentEditor({
           EditorToolbar2,
           {
             editor,
-            className: "border-[var(--border-subtle)] bg-[var(--bg-card)]/80 px-2 py-2"
+            className: "border-[var(--border-subtle)] bg-[var(--depth-2)] px-2 py-2"
           }
         ),
         /* @__PURE__ */ jsx4("div", { className: "min-h-0 flex-1 overflow-auto px-5 py-4", children: /* @__PURE__ */ jsx4(EditorContent2, { editor }) }),
@@ -963,7 +963,7 @@ function MarkdownDocumentEditor({
         }
 
         .ProseMirror code {
-          background: var(--bg-hover, rgba(255,255,255,0.05));
+          background: var(--depth-3);
           border-radius: 0.35rem;
           padding: 0.12rem 0.3rem;
         }
@@ -1131,13 +1131,13 @@ import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function connectionTone(state) {
   switch (state) {
     case "synced":
-      return "text-emerald-300 border-emerald-400/30 bg-emerald-400/10";
+      return "text-[var(--surface-success-text)] border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]";
     case "connected":
     case "connecting":
-      return "text-sky-300 border-sky-400/30 bg-sky-400/10";
+      return "text-[var(--surface-info-text)] border-[var(--surface-info-border)] bg-[var(--surface-info-bg)]";
     case "disconnected":
     default:
-      return "text-amber-200 border-amber-300/30 bg-amber-300/10";
+      return "text-[var(--surface-warning-text)] border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)]";
   }
 }
 function connectionLabel(state) {
@@ -1181,7 +1181,7 @@ function CollaborativeDocumentSurface({
   const initialContent = useMemo4(() => markdownToHtml(markdown), [markdown]);
   const collaboratorCount = collaborators.length + 1;
   return /* @__PURE__ */ jsxs3("div", { className: cn("flex h-full min-h-0 flex-col gap-3", className), children: [
-    /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center justify-between gap-3 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--bg-card)]/80 px-3 py-2", children: [
+    /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center justify-between gap-3 rounded-[var(--radius-lg)] border border-[var(--border-subtle)] bg-[var(--depth-2)] px-3 py-2", children: [
       /* @__PURE__ */ jsxs3("div", { className: "min-w-0 space-y-2", children: [
         /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap items-center gap-2 text-xs text-[var(--text-muted)]", children: [
           /* @__PURE__ */ jsxs3(