@tangle-network/sandbox-ui 0.6.1 → 0.8.4

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

@@ -1,6 +1,3 @@
-import {
-  Card
-} from "./chunk-TDYQBLL5.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -18,7 +15,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-[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",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-border bg-card px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     ),
     ...props,
@@ -60,7 +57,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 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",
+      "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-border bg-card text-foreground 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 +94,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-[var(--depth-3)] focus:text-[var(--text-primary)] 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-muted/50 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     ),
     ...props,
@@ -112,7 +109,7 @@ var SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__P
   SelectPrimitive.Separator,
   {
     ref,
-    className: cn("-mx-1 my-1 h-px bg-[var(--border-subtle)]", className),
+    className: cn("-mx-1 my-1 h-px bg-border", className),
     ...props
   }
 ));
@@ -301,83 +298,11 @@ var Label2 = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
 ));
 Label2.displayName = LabelPrimitive.Root.displayName;
 
-// src/primitives/stat-card.tsx
-import * as React5 from "react";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var StatCard = React5.forwardRef(
-  ({
-    className,
-    variant = "default",
-    title,
-    value,
-    subtitle,
-    icon,
-    trend,
-    ...props
-  }, ref) => {
-    const iconColors = {
-      default: "text-[var(--text-muted)]",
-      sandbox: "text-[var(--accent-text)]"
-    };
-    const trendColors = {
-      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(
-      Card,
-      {
-        ref,
-        variant,
-        className: cn("p-6", className),
-        ...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-[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-[var(--text-muted)] opacity-70 text-xs", children: subtitle }),
-            trend && trendStatus && /* @__PURE__ */ jsxs3(
-              "div",
-              {
-                className: cn(
-                  "flex items-center gap-1 text-sm",
-                  trendColors[trendStatus]
-                ),
-                children: [
-                  trend.value > 0 ? "\u2191" : trend.value < 0 ? "\u2193" : "\u2192",
-                  /* @__PURE__ */ jsxs3("span", { children: [
-                    Math.abs(trend.value),
-                    "%"
-                  ] }),
-                  trend.label && /* @__PURE__ */ jsx5("span", { className: "text-[var(--text-muted)]", children: trend.label })
-                ]
-              }
-            )
-          ] }),
-          icon && /* @__PURE__ */ jsx5(
-            "div",
-            {
-              className: cn(
-                "rounded-lg bg-[var(--depth-3)] p-2",
-                variant === "sandbox" && "bg-[var(--accent-surface-soft)]",
-                iconColors[variant]
-              ),
-              children: icon
-            }
-          )
-        ] })
-      }
-    );
-  }
-);
-StatCard.displayName = "StatCard";
-
 // src/primitives/terminal-display.tsx
-import * as React6 from "react";
+import * as React5 from "react";
 import { useEffect, useRef } from "react";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var TerminalDisplay = React6.forwardRef(
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+var TerminalDisplay = React5.forwardRef(
   ({
     className,
     variant = "default",
@@ -395,22 +320,22 @@ var TerminalDisplay = React6.forwardRef(
       }
     }, [autoScroll]);
     const variants = {
-      default: "border-[var(--border-subtle)]",
-      sandbox: "border-[var(--border-accent)] shadow-[var(--shadow-accent)]"
+      default: "border-border",
+      sandbox: "border-border shadow-[var(--shadow-accent)]"
     };
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs3(
       "div",
       {
         ref,
         className: cn(
-          "overflow-hidden rounded-xl border bg-[var(--depth-1)] font-mono text-sm",
+          "overflow-hidden rounded-xl border bg-background font-mono text-sm",
           variants[variant],
           className
         ),
         ...props,
         children: [
-          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(
+          showHeader && /* @__PURE__ */ jsx5("div", { className: "flex items-center border-b border-border bg-card px-4 py-3", children: /* @__PURE__ */ jsx5("span", { className: "text-muted-foreground text-xs", children: title }) }),
+          /* @__PURE__ */ jsx5(
             "div",
             {
               ref: containerRef,
@@ -425,19 +350,19 @@ var TerminalDisplay = React6.forwardRef(
   }
 );
 TerminalDisplay.displayName = "TerminalDisplay";
-var TerminalLine = React6.forwardRef(
+var TerminalLine = React5.forwardRef(
   ({ className, type = "output", prompt = "$", timestamp, children, ...props }, ref) => {
     const typeStyles = {
-      input: "text-[var(--text-primary)]",
-      output: "text-[var(--text-secondary)]",
+      input: "text-foreground",
+      output: "text-foreground",
       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)]",
+      command: "text-foreground",
       warning: "text-[var(--surface-warning-text)]"
     };
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs3(
       "div",
       {
         ref,
@@ -448,35 +373,35 @@ var TerminalLine = React6.forwardRef(
         ),
         ...props,
         children: [
-          (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-[var(--text-muted)] opacity-50", children: [
+          (type === "input" || type === "command") && /* @__PURE__ */ jsx5("span", { className: "shrink-0 select-none text-[var(--surface-success-text)]", children: prompt }),
+          type === "thinking" && /* @__PURE__ */ jsx5("span", { className: "shrink-0 select-none", children: "..." }),
+          timestamp && /* @__PURE__ */ jsxs3("span", { className: "shrink-0 select-none text-muted-foreground opacity-50", children: [
             "[",
             timestamp,
             "]"
           ] }),
-          /* @__PURE__ */ jsx6("span", { className: "whitespace-pre-wrap break-all", children })
+          /* @__PURE__ */ jsx5("span", { className: "whitespace-pre-wrap break-all", children })
         ]
       }
     );
   }
 );
 TerminalLine.displayName = "TerminalLine";
-var TerminalCursor = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+var TerminalCursor = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
   "span",
   {
     ref,
     className: cn(
-      "ml-0.5 inline-block h-4 w-2 animate-pulse bg-[var(--text-primary)]",
+      "ml-0.5 inline-block h-4 w-2 animate-pulse bg-foreground",
       className
     ),
     ...props
   }
 ));
 TerminalCursor.displayName = "TerminalCursor";
-var TerminalInput = React6.forwardRef(
+var TerminalInput = React5.forwardRef(
   ({ className, onSubmit, variant = "default", ...props }, ref) => {
-    const [value, setValue] = React6.useState("");
+    const [value, setValue] = React5.useState("");
     const handleKeyDown = (e) => {
       if (e.key === "Enter" && value.trim() && onSubmit) {
         onSubmit(value.trim());
@@ -484,20 +409,20 @@ var TerminalInput = React6.forwardRef(
       }
     };
     const variants = {
-      default: "border-[var(--border-subtle)] focus-within:border-[var(--border-default)]",
-      sandbox: "border-[var(--border-accent)] focus-within:border-[var(--border-accent-hover)]"
+      default: "border-border focus-within:border-border",
+      sandbox: "border-border focus-within:border-[var(--border-accent-hover)]"
     };
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs3(
       "div",
       {
         className: cn(
-          "flex items-center rounded-lg border bg-[var(--depth-1)] px-4 py-2.5 font-mono text-sm transition-colors",
+          "flex items-center rounded-lg border bg-background px-4 py-2.5 font-mono text-sm transition-colors",
           variants[variant],
           className
         ),
         children: [
-          /* @__PURE__ */ jsx6("span", { className: "mr-2 select-none text-[var(--surface-success-text)]", children: "$" }),
-          /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx5("span", { className: "mr-2 select-none text-[var(--surface-success-text)]", children: "$" }),
+          /* @__PURE__ */ jsx5(
             "input",
             {
               ref,
@@ -505,11 +430,11 @@ var TerminalInput = React6.forwardRef(
               value,
               onChange: (e) => setValue(e.target.value),
               onKeyDown: handleKeyDown,
-              className: "flex-1 bg-transparent text-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)]",
+              className: "flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground",
               ...props
             }
           ),
-          /* @__PURE__ */ jsx6(TerminalCursor, {})
+          /* @__PURE__ */ jsx5(TerminalCursor, {})
         ]
       }
     );
@@ -519,7 +444,7 @@ TerminalInput.displayName = "TerminalInput";
 
 // src/primitives/drop-zone.tsx
 import { useCallback as useCallback2, useRef as useRef2, useState as useState3 } from "react";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function DropZone({
   onDrop,
   accept,
@@ -575,7 +500,7 @@ function DropZone({
     },
     [disabled, accept, isAccepted, onDrop]
   );
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       onDragEnter: handleDragEnter,
@@ -584,15 +509,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-[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" })
+        dragOver && (overlay || /* @__PURE__ */ jsx6("div", { className: "fixed inset-0 z-[100] flex items-center justify-center pointer-events-none bg-background", children: /* @__PURE__ */ jsxs4("div", { className: "rounded-2xl border-2 border-dashed border-border bg-card p-16 text-center shadow-[var(--shadow-dropdown)] max-w-lg mx-auto", children: [
+          /* @__PURE__ */ jsx6("div", { className: "mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl border border-border bg-[var(--accent-surface-soft)]", children: typeof icon === "string" ? /* @__PURE__ */ jsxs4("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__ */ jsx6("title", { children: "Upload" }),
+            /* @__PURE__ */ jsx6("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+            /* @__PURE__ */ jsx6("polyline", { points: "17 8 12 3 7 8" }),
+            /* @__PURE__ */ jsx6("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 })
+          /* @__PURE__ */ jsx6("h2", { className: "text-2xl font-bold text-foreground", children: title }),
+          /* @__PURE__ */ jsx6("p", { className: "mt-2 text-sm text-muted-foreground", children: description })
         ] }) })),
         children
       ]
@@ -602,7 +527,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";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes}B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}KB`;
@@ -610,49 +535,49 @@ function formatSize(bytes) {
 }
 function UploadProgress({ files, onRemove, onRetry, className }) {
   if (files.length === 0) return null;
-  return /* @__PURE__ */ jsx8("div", { className: cn("space-y-2", className), children: files.map((file) => /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsx7("div", { className: cn("space-y-2", className), children: files.map((file) => /* @__PURE__ */ jsxs5(
     "div",
     {
       className: cn(
         "flex items-center gap-3 rounded-lg border px-3 py-2 text-sm",
-        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)]"
+        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-border bg-card"
       ),
       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-[var(--text-primary)]", children: file.name }),
-            /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-xs text-[var(--text-muted)]", children: formatSize(file.size) })
+        file.status === "complete" && /* @__PURE__ */ jsx7(CheckCircle22, { className: "h-4 w-4 shrink-0 text-[var(--surface-success-text)]" }),
+        file.status === "error" && /* @__PURE__ */ jsx7(AlertCircle2, { className: "h-4 w-4 shrink-0 text-[var(--surface-danger-text)]" }),
+        file.status === "uploading" && /* @__PURE__ */ jsx7(Loader2, { className: "h-4 w-4 shrink-0 animate-spin text-primary" }),
+        file.status === "pending" && /* @__PURE__ */ jsx7(FileText, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx7("span", { className: "truncate font-medium text-foreground", children: file.name }),
+            /* @__PURE__ */ jsx7("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatSize(file.size) })
           ] }),
-          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(
+          file.status === "uploading" && file.progress !== void 0 && /* @__PURE__ */ jsx7("div", { className: "mt-1 h-1 w-full overflow-hidden rounded-full bg-muted/50", children: /* @__PURE__ */ jsx7(
             "div",
             {
-              className: "h-full rounded-full bg-[var(--brand-cool)] transition-all",
+              className: "h-full rounded-full bg-primary transition-all",
               style: { width: `${file.progress}%` }
             }
           ) }),
-          file.status === "error" && file.error && /* @__PURE__ */ jsx8("p", { className: "mt-0.5 text-xs text-[var(--surface-danger-text)]", children: file.error })
+          file.status === "error" && file.error && /* @__PURE__ */ jsx7("p", { className: "mt-0.5 text-xs text-[var(--surface-danger-text)]", children: file.error })
         ] }),
-        /* @__PURE__ */ jsxs6("div", { className: "flex shrink-0 items-center gap-1", children: [
-          file.status === "error" && onRetry && /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsxs5("div", { className: "flex shrink-0 items-center gap-1", children: [
+          file.status === "error" && onRetry && /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
               onClick: () => onRetry(file.id),
-              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" })
+              className: "rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+              children: /* @__PURE__ */ jsx7(RefreshCw, { className: "h-3.5 w-3.5" })
             }
           ),
-          onRemove && /* @__PURE__ */ jsx8(
+          onRemove && /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
               onClick: () => onRemove(file.id),
-              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" })
+              className: "rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
+              children: /* @__PURE__ */ jsx7(X2, { className: "h-3.5 w-3.5" })
             }
           )
         ] })
@@ -665,7 +590,7 @@ function UploadProgress({ files, onRemove, onRetry, className }) {
 // src/primitives/sidebar-drop-zone.tsx
 import { useCallback as useCallback3, useRef as useRef3, useState as useState4 } from "react";
 import { Upload } from "lucide-react";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function SidebarDropZone({
   onDrop,
   accept,
@@ -725,7 +650,7 @@ function SidebarDropZone({
     [disabled, accept, isAccepted, onDrop]
   );
   const isVisible = persistent || dragOver;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx8(
     "div",
     {
       onDragEnter: handleDragEnter,
@@ -739,16 +664,16 @@ function SidebarDropZone({
         disabled && "opacity-50 pointer-events-none",
         className
       ),
-      children: isVisible && /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-center gap-2 text-center", children: [
-        /* @__PURE__ */ jsx9("div", { className: cn(
+      children: isVisible && /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-center gap-2 text-center", children: [
+        /* @__PURE__ */ jsx8("div", { className: cn(
           "flex h-8 w-8 items-center justify-center rounded-lg transition-colors",
           dragOver ? "bg-[var(--brand-cool,hsl(var(--primary)))]/15 text-[var(--brand-cool,hsl(var(--primary)))]" : "text-[var(--text-muted,hsl(var(--muted-foreground)))]"
-        ), children: icon ?? /* @__PURE__ */ jsx9(Upload, { className: "h-4 w-4" }) }),
-        /* @__PURE__ */ jsx9("p", { className: cn(
+        ), children: icon ?? /* @__PURE__ */ jsx8(Upload, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx8("p", { className: cn(
           "text-xs font-medium",
           dragOver ? "text-[var(--text-primary,hsl(var(--foreground)))]" : "text-[var(--text-muted,hsl(var(--muted-foreground)))]"
         ), children: title }),
-        description && /* @__PURE__ */ jsx9("p", { className: "text-[10px] text-[var(--text-muted,hsl(var(--muted-foreground)))]", children: description })
+        description && /* @__PURE__ */ jsx8("p", { className: "text-[10px] text-[var(--text-muted,hsl(var(--muted-foreground)))]", children: description })
       ] })
     }
   );
@@ -770,7 +695,6 @@ export {
   ToastProvider,
   useToast,
   Label2 as Label,
-  StatCard,
   TerminalDisplay,
   TerminalLine,
   TerminalCursor,

package/dist/{chunk-MXRQ4MJE.js → chunk-DXMIEK4K.js}

@@ -1,6 +1,6 @@
 import {
   parseToolEvent
-} from "./chunk-33W2TLUL.js";
+} from "./chunk-QID2OOMG.js";
 import {
   bumpActiveSessionActivity,
   registerActiveSession,
@@ -97,9 +97,9 @@ function useSSEStream(options) {
   const [events, setEvents] = React.useState([]);
   const [lastEvent, setLastEvent] = React.useState(null);
   const [error, setError] = React.useState(null);
-  const [retryCount, setRetryCount] = React.useState(0);
   const [lastEventTime, setLastEventTime] = React.useState(Date.now());
   const [timeSinceLastEvent, setTimeSinceLastEvent] = React.useState(0);
+  const retryCountRef = React.useRef(0);
   const eventSourceRef = React.useRef(null);
   const abortControllerRef = React.useRef(null);
   const reconnectTimeoutRef = React.useRef(null);
@@ -126,7 +126,10 @@ function useSSEStream(options) {
       }
       setLastEventTime(Date.now());
       setLastEvent(event);
-      setEvents((prev) => [...prev, event]);
+      setEvents((prev) => {
+        const next = [...prev, event];
+        return next.length > 1e3 ? next.slice(-1e3) : next;
+      });
       onEvent?.(event);
     },
     [onEvent]
@@ -181,7 +184,7 @@ function useSSEStream(options) {
           throw new Error("Response body is null");
         }
         setState("connected");
-        setRetryCount(0);
+        retryCountRef.current = 0;
         const reader = response.body.getReader();
         const decoder = new TextDecoder();
         let buffer = "";
@@ -227,10 +230,10 @@ function useSSEStream(options) {
         }
         if (autoReconnect && enabled) {
           setState("reconnecting");
-          const delay = reconnectDelay * 2 ** retryCount;
+          const delay = reconnectDelay * 2 ** retryCountRef.current;
           reconnectTimeoutRef.current = setTimeout(
             () => {
-              setRetryCount((c) => c + 1);
+              retryCountRef.current += 1;
               connect();
             },
             Math.min(delay, 3e4)
@@ -245,12 +248,12 @@ function useSSEStream(options) {
         setError(err);
         onError?.(err);
         setState("error");
-        if (autoReconnect && enabled && retryCount < maxRetries) {
+        if (autoReconnect && enabled && retryCountRef.current < maxRetries) {
           setState("reconnecting");
-          const delay = reconnectDelay * 2 ** retryCount;
+          const delay = reconnectDelay * 2 ** retryCountRef.current;
           reconnectTimeoutRef.current = setTimeout(
             () => {
-              setRetryCount((c) => c + 1);
+              retryCountRef.current += 1;
               connect();
             },
             Math.min(delay, 3e4)
@@ -262,19 +265,19 @@ function useSSEStream(options) {
       eventSourceRef.current = es;
       es.onopen = () => {
         setState("connected");
-        setRetryCount(0);
+        retryCountRef.current = 0;
       };
       es.onerror = () => {
         const err = new Error("EventSource connection error");
         setError(err);
         onError?.(err);
-        if (autoReconnect && enabled && retryCount < maxRetries) {
+        if (autoReconnect && enabled && retryCountRef.current < maxRetries) {
           setState("reconnecting");
           es.close();
-          const delay = reconnectDelay * 2 ** retryCount;
+          const delay = reconnectDelay * 2 ** retryCountRef.current;
           reconnectTimeoutRef.current = setTimeout(
             () => {
-              setRetryCount((c) => c + 1);
+              retryCountRef.current += 1;
               connect();
             },
             Math.min(delay, 3e4)
@@ -313,7 +316,6 @@ function useSSEStream(options) {
     autoReconnect,
     maxRetries,
     reconnectDelay,
-    retryCount,
     eventTypes,
     handleEvent,
     onError,
@@ -337,7 +339,7 @@ function useSSEStream(options) {
     connect,
     disconnect,
     clearEvents,
-    retryCount,
+    retryCount: retryCountRef.current,
     timeSinceLastEvent
   };
 }
@@ -345,8 +347,11 @@ function useSSEStream(options) {
 // src/hooks/use-sdk-session.ts
 import { useCallback as useCallback3, useMemo, useRef as useRef3, useState as useState3 } from "react";
 function uid() {
-  if (typeof crypto !== "undefined" && crypto.randomUUID) {
-    return crypto.randomUUID();
+  if (typeof globalThis.crypto !== "undefined" && typeof globalThis.crypto.randomUUID === "function") {
+    try {
+      return globalThis.crypto.randomUUID();
+    } catch {
+    }
   }
   return `sdk-${Date.now()}-${Math.random().toString(36).slice(2, 10)}`;
 }
@@ -1001,14 +1006,13 @@ function RealtimeSessionRegistry({ sessions }) {
 
 // src/hooks/use-session-stream.ts
 import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef5, useState as useState5 } from "react";
-var _insertionCounter = 0;
-function mapApiMessage(msg) {
+function mapApiMessage(msg, counterRef) {
   const created = msg.info.timestamp ? new Date(msg.info.timestamp).getTime() : Date.now();
   const message = {
     id: msg.info.id,
     role: msg.info.role,
     time: { created },
-    _insertionIndex: _insertionCounter++
+    _insertionIndex: counterRef.current++
   };
   const parts = (msg.parts ?? []).map((p, i) => {
     if (p.type === "tool" && p.tool) {
@@ -1056,7 +1060,9 @@ function useSessionStream({
   const [error, setError] = useState5(null);
   const [connected, setConnected] = useState5(false);
   const abortRef = useRef5(null);
+  const reconnectTimerRef = useRef5(null);
   const streamingMsgIdRef = useRef5(null);
+  const insertionCounterRef = useRef5(0);
   const handleSSEEventRef = useRef5(null);
   const refetch = useCallback4(async () => {
     if (!token || !sessionId || !apiUrl) return;
@@ -1067,7 +1073,7 @@ function useSessionStream({
       const newMessages = [];
       const newPartMap = {};
       for (const apiMsg of apiMessages) {
-        const { message, parts } = mapApiMessage(apiMsg);
+        const { message, parts } = mapApiMessage(apiMsg, insertionCounterRef);
         newMessages.push(message);
         newPartMap[message.id] = parts;
       }
@@ -1081,6 +1087,10 @@ function useSessionStream({
   }, [apiUrl, token, sessionId]);
   const connectSSE = useCallback4(async () => {
     if (!token || !sessionId || !apiUrl || !enabled) return;
+    if (reconnectTimerRef.current) {
+      clearTimeout(reconnectTimerRef.current);
+      reconnectTimerRef.current = null;
+    }
     abortRef.current?.abort();
     const controller = new AbortController();
     abortRef.current = controller;
@@ -1131,7 +1141,7 @@ function useSessionStream({
       setError(msg);
       setConnected(false);
       if (!controller.signal.aborted) {
-        setTimeout(() => connectSSE(), 3e3);
+        reconnectTimerRef.current = setTimeout(() => connectSSE(), 3e3);
       }
     }
   }, [apiUrl, token, sessionId, enabled]);
@@ -1151,7 +1161,7 @@ function useSessionStream({
             id,
             role,
             time: { created: Date.now() },
-            _insertionIndex: _insertionCounter++
+            _insertionIndex: insertionCounterRef.current++
           }
         ];
       });
@@ -1254,6 +1264,7 @@ function useSessionStream({
     connectSSE();
     return () => {
       abortRef.current?.abort();
+      if (reconnectTimerRef.current) clearTimeout(reconnectTimerRef.current);
       setConnected(false);
     };
   }, [enabled, token, sessionId, refetch, connectSSE]);