@tangle-network/sandbox-ui 0.53.0 → 0.55.0

package/dist/{chunk-P6L4KBYK.js → chunk-DLKDWMFM.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-3J6FG3FJ.js";
 import {
   PortsList
-} from "./chunk-KN2ZRAW6.js";
+} from "./chunk-SVNWL3ZR.js";
 import {
   TerminalView
 } from "./chunk-VIREDUBF.js";

package/dist/{chunk-KN2ZRAW6.js → chunk-SVNWL3ZR.js}

@@ -1899,8 +1899,29 @@ function PlanCards({ plans, className }) {
 }
 
 // src/dashboard/dashboard-layout.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import { Plus as Plus2, Bell } from "lucide-react";
+
+// src/dashboard/use-brand-theme-sync.ts
+import * as React8 from "react";
+function useBrandThemeSync() {
+  React8.useEffect(() => {
+    if (typeof document === "undefined") return;
+    const el = document.documentElement;
+    const sync = () => {
+      const dark = el.classList.contains("dark");
+      el.classList.toggle("light", !dark);
+      const next = dark ? "dark" : "light";
+      if (el.getAttribute("data-theme") !== next) el.setAttribute("data-theme", next);
+    };
+    sync();
+    const observer = new MutationObserver(sync);
+    observer.observe(el, { attributes: true, attributeFilter: ["class"] });
+    return () => observer.disconnect();
+  }, []);
+}
+
+// src/dashboard/dashboard-layout.tsx
 import { Fragment as Fragment9, jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 function MenuIcon({ className }) {
   return /* @__PURE__ */ jsxs13("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
@@ -1958,11 +1979,12 @@ function DashboardLayoutInner({
   appearance,
   notifications: notifData
 }) {
+  useBrandThemeSync();
   const Link = LinkComponent;
-  const [mobileMenuOpen, setMobileMenuOpen] = React8.useState(false);
-  const [notificationsOpen, setNotificationsOpen] = React8.useState(false);
-  const notifRef = React8.useRef(null);
-  React8.useEffect(() => {
+  const [mobileMenuOpen, setMobileMenuOpen] = React9.useState(false);
+  const [notificationsOpen, setNotificationsOpen] = React9.useState(false);
+  const notifRef = React9.useRef(null);
+  React9.useEffect(() => {
     if (!notificationsOpen) return;
     const handler = (e) => {
       if (notifRef.current && !notifRef.current.contains(e.target)) {
@@ -1980,13 +2002,13 @@ function DashboardLayoutInner({
     };
   }, [notificationsOpen]);
   const { contentMargin, hidden, mode, hasPanels, panelOpen, toggleRail, railCollapsed } = useSidebar();
-  const modeSet = React8.useMemo(() => new Set(modeItems), [modeItems]);
-  const sidebarUser = React8.useMemo(
+  const modeSet = React9.useMemo(() => new Set(modeItems), [modeItems]);
+  const sidebarUser = React9.useMemo(
     () => user ? { email: user.email, name: user.name, tier: user.tier, avatarUrl: user.avatarUrl } : void 0,
     [user?.email, user?.name, user?.tier, user?.avatarUrl]
   );
   const activePanel = panels.find((p) => p.mode === mode);
-  const buildSidebarContent = React8.useCallback(
+  const buildSidebarContent = React9.useCallback(
     (showLabels, allowCollapse) => /* @__PURE__ */ jsxs13(Fragment9, { children: [
       /* @__PURE__ */ jsxs13(SidebarRail, { wide: showLabels, children: [
         /* @__PURE__ */ jsx14(
@@ -2011,7 +2033,7 @@ function DashboardLayoutInner({
               const isMode = modeSet.has(item.id);
               const prevIsMode = i > 0 && modeSet.has(navItems[i - 1].id);
               const showSep = i > 0 && isMode && !prevIsMode;
-              return /* @__PURE__ */ jsxs13(React8.Fragment, { children: [
+              return /* @__PURE__ */ jsxs13(React9.Fragment, { children: [
                 showSep && /* @__PURE__ */ jsx14(
                   RailSeparator,
                   {
@@ -2119,11 +2141,11 @@ function DashboardLayoutInner({
       mode
     ]
   );
-  const sidebarContent = React8.useMemo(
+  const sidebarContent = React9.useMemo(
     () => buildSidebarContent(labeledRail && !railCollapsed, labeledRail),
     [buildSidebarContent, labeledRail, railCollapsed]
   );
-  const mobileSidebarContent = React8.useMemo(() => buildSidebarContent(true, false), [buildSidebarContent]);
+  const mobileSidebarContent = React9.useMemo(() => buildSidebarContent(true, false), [buildSidebarContent]);
   return /* @__PURE__ */ jsxs13("div", { className: cn("min-h-screen bg-surface text-foreground", className), children: [
     /* @__PURE__ */ jsxs13(
       "nav",
@@ -2296,6 +2318,7 @@ function SidebarLayoutInner({
   sidebarClassName,
   contentClassName
 }) {
+  useBrandThemeSync();
   const Link = LinkComponent ?? DefaultLink3;
   const { panelOpen, togglePanel, setPanelOpen, railCollapsed, toggleRail } = useSidebar();
   const handleNavClick = closePanelOnNavigate && panelOpen ? () => setPanelOpen(false) : void 0;
@@ -2647,7 +2670,7 @@ function ProfileComparison({
 }
 
 // src/dashboard/metric-area-chart.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import { jsx as jsx17, jsxs as jsxs16 } from "react/jsx-runtime";
 var TONE_VARS = {
   primary: "var(--brand-primary, hsl(var(--primary)))",
@@ -2694,7 +2717,7 @@ function MetricAreaChart({
   emptyState,
   className
 }) {
-  const gradientId = React9.useId();
+  const gradientId = React10.useId();
   const width = 400;
   const values = points.map((p) => p.value).filter((v) => v !== null);
   const latest = values.length > 0 ? values[values.length - 1] : null;
@@ -2754,7 +2777,7 @@ function MetricAreaChart({
                 /* @__PURE__ */ jsx17("stop", { offset: "0%", stopColor: color, stopOpacity: 0.28 }),
                 /* @__PURE__ */ jsx17("stop", { offset: "100%", stopColor: color, stopOpacity: 0.02 })
               ] }) }),
-              segments.map((segment) => /* @__PURE__ */ jsxs16(React9.Fragment, { children: [
+              segments.map((segment) => /* @__PURE__ */ jsxs16(React10.Fragment, { children: [
                 /* @__PURE__ */ jsx17("path", { d: segment.area, fill: `url(#${gradientId})` }),
                 /* @__PURE__ */ jsx17(
                   "path",
@@ -2979,14 +3002,14 @@ function VariantList({
 
 // src/dashboard/system-logs.tsx
 import { Terminal as Terminal2 } from "lucide-react";
-import { useEffect as useEffect4, useRef as useRef4, useState as useState6 } from "react";
+import { useEffect as useEffect5, useRef as useRef4, useState as useState6 } from "react";
 import { jsx as jsx19, jsxs as jsxs18 } from "react/jsx-runtime";
 function SystemLogsViewer({ apiUrl, token, className }) {
   const [logs, setLogs] = useState6([]);
   const [error, setError] = useState6(null);
   const [isFollowing, setIsFollowing] = useState6(true);
   const scrollRef = useRef4(null);
-  useEffect4(() => {
+  useEffect5(() => {
     let timeoutId;
     let backoff = 2e3;
     const controller = new AbortController();
@@ -3022,7 +3045,7 @@ function SystemLogsViewer({ apiUrl, token, className }) {
       clearTimeout(timeoutId);
     };
   }, [apiUrl, token]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (isFollowing && scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
@@ -3229,14 +3252,14 @@ function GitPanel({ status, log, loading = false, onRefresh, className }) {
 }
 
 // src/dashboard/ports-list.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { Copy as Copy3, Check as Check5, Globe, Plus as Plus4, Trash2 as Trash23 } from "lucide-react";
 import { jsx as jsx22, jsxs as jsxs21 } from "react/jsx-runtime";
 function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, className }) {
-  const [newPort, setNewPort] = React11.useState("");
-  const [copiedPort, setCopiedPort] = React11.useState(null);
-  const copyTimerRef = React11.useRef(null);
-  React11.useEffect(() => {
+  const [newPort, setNewPort] = React12.useState("");
+  const [copiedPort, setCopiedPort] = React12.useState(null);
+  const copyTimerRef = React12.useRef(null);
+  React12.useEffect(() => {
     return () => {
       if (copyTimerRef.current) clearTimeout(copyTimerRef.current);
     };
@@ -3330,7 +3353,7 @@ function PortsList({ ports, onExposePort, onRemovePort, isExposing = false, clas
 }
 
 // src/dashboard/process-list.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import { Activity as Activity3, Plus as Plus5, Skull, Terminal as Terminal3 } from "lucide-react";
 import { jsx as jsx23, jsxs as jsxs22 } from "react/jsx-runtime";
 function formatUptime(startedAt) {
@@ -3342,7 +3365,7 @@ function formatUptime(startedAt) {
   return `${Math.floor(ms / 36e5)}h ${Math.floor(ms % 36e5 / 6e4)}m`;
 }
 function ProcessList({ processes, onSpawn, onKill, loading = false, className }) {
-  const [newCommand, setNewCommand] = React12.useState("");
+  const [newCommand, setNewCommand] = React13.useState("");
   const handleSpawn = () => {
     const cmd = newCommand.trim();
     if (cmd) {
@@ -3415,11 +3438,11 @@ function ProcessList({ processes, onSpawn, onKill, loading = false, className })
 }
 
 // src/dashboard/network-config.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 import { Network as Network2, Plus as Plus6, Trash2 as Trash24, ShieldAlert } from "lucide-react";
 import { jsx as jsx24, jsxs as jsxs23 } from "react/jsx-runtime";
 function NetworkConfig({ config, onUpdate, loading = false, className }) {
-  const [newCidr, setNewCidr] = React13.useState("");
+  const [newCidr, setNewCidr] = React14.useState("");
   const isValidCidr = (value) => {
     const match = value.match(/^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\/(\d{1,2})$/);
     if (!match) return false;
@@ -3523,7 +3546,7 @@ function NetworkConfig({ config, onUpdate, loading = false, className }) {
 }
 
 // src/dashboard/backend-config.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 import { Bot, Plus as Plus7, RefreshCw as RefreshCw2, Trash2 as Trash25, Server, Wrench } from "lucide-react";
 import { Fragment as Fragment13, jsx as jsx25, jsxs as jsxs24 } from "react/jsx-runtime";
 function BackendConfig({
@@ -3535,10 +3558,10 @@ function BackendConfig({
   loading = false,
   className
 }) {
-  const [showAddMcp, setShowAddMcp] = React14.useState(false);
-  const [mcpName, setMcpName] = React14.useState("");
-  const [mcpCommand, setMcpCommand] = React14.useState("");
-  const [mcpArgs, setMcpArgs] = React14.useState("");
+  const [showAddMcp, setShowAddMcp] = React15.useState(false);
+  const [mcpName, setMcpName] = React15.useState("");
+  const [mcpCommand, setMcpCommand] = React15.useState("");
+  const [mcpArgs, setMcpArgs] = React15.useState("");
   const handleAddMcp = () => {
     const name = mcpName.trim();
     const command = mcpCommand.trim();
@@ -3696,7 +3719,7 @@ function BackendConfig({
 }
 
 // src/dashboard/snapshot-list.tsx
-import * as React15 from "react";
+import * as React16 from "react";
 import { Camera, Clock as Clock5, HardDrive as HardDrive2, Plus as Plus8, RotateCcw } from "lucide-react";
 import { jsx as jsx26, jsxs as jsxs25 } from "react/jsx-runtime";
 function formatBytes(bytes) {
@@ -3713,8 +3736,8 @@ function formatDate(dateStr) {
   return d.toLocaleDateString(void 0, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" });
 }
 function SnapshotList({ snapshots, onCreate, onRestore, onSaveAsTemplate, loading = false, className }) {
-  const [showCreate, setShowCreate] = React15.useState(false);
-  const [tags, setTags] = React15.useState("");
+  const [showCreate, setShowCreate] = React16.useState(false);
+  const [tags, setTags] = React16.useState("");
   const handleCreate = () => {
     const tagList = tags.trim() ? tags.trim().split(",").map((t) => t.trim()).filter(Boolean) : void 0;
     onCreate(tagList);

package/dist/dashboard.js

@@ -54,7 +54,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-KN2ZRAW6.js";
+} from "./chunk-SVNWL3ZR.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/globals.css

@@ -317,9 +317,6 @@
   .inset-x-0 {
     inset-inline: calc(var(--spacing) * 0);
   }
-  .inset-x-2 {
-    inset-inline: calc(var(--spacing) * 2);
-  }
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
@@ -831,9 +828,6 @@
   .max-h-\[440px\] {
     max-height: 440px;
   }
-  .max-h-\[min\(18rem\,50vh\)\] {
-    max-height: min(18rem, 50vh);
-  }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -2767,6 +2761,9 @@
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
+  .pb-2\.5 {
+    padding-bottom: calc(var(--spacing) * 2.5);
+  }
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
@@ -3497,12 +3494,6 @@
   .ring-\[var\(--md3-outline-variant\)\] {
     --tw-ring-color: var(--md3-outline-variant);
   }
-  .ring-black\/5 {
-    --tw-ring-color: color-mix(in srgb, #000 5%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
-    }
-  }
   .ring-border {
     --tw-ring-color: var(--color-border);
   }
@@ -5354,6 +5345,11 @@
       }
     }
   }
+  .\[\@media\(hover\:none\)\]\:opacity-100 {
+    @media (hover:none) {
+      opacity: 100%;
+    }
+  }
 }
 :root,
 [data-sandbox-ui],

package/dist/index.js

@@ -63,19 +63,6 @@ import {
   useTotalRunningSessions
 } from "./chunk-WID73FPH.js";
 import "./chunk-2BUPSB7O.js";
-import {
-  TOOL_CATEGORY_ICONS,
-  cn,
-  copyText,
-  formatBytes,
-  formatDuration,
-  formatUptime,
-  getToolCategory,
-  getToolDisplayMetadata,
-  getToolErrorText,
-  timeAgo,
-  truncateText
-} from "./chunk-TK46XFLM.js";
 import {
   OpenUIArtifactRenderer
 } from "./chunk-AZ3AWMTM.js";
@@ -105,6 +92,19 @@ import {
   snapHarnessToModel,
   snapModelToHarness
 } from "./chunk-KOUYJ6QP.js";
+import {
+  TOOL_CATEGORY_ICONS,
+  cn,
+  copyText,
+  formatBytes,
+  formatDuration,
+  formatUptime,
+  getToolCategory,
+  getToolDisplayMetadata,
+  getToolErrorText,
+  timeAgo,
+  truncateText
+} from "./chunk-TK46XFLM.js";
 import {
   ExpandedToolDetail,
   InlineThinkingItem,
@@ -148,7 +148,7 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-P6L4KBYK.js";
+} from "./chunk-DLKDWMFM.js";
 import {
   FileArtifactPane,
   FilePreview,
@@ -213,7 +213,7 @@ import {
   canAdminSandbox,
   parseInsufficientBalance,
   useSidebar
-} from "./chunk-KN2ZRAW6.js";
+} from "./chunk-SVNWL3ZR.js";
 import {
   BillingDashboard,
   InfoPanel,

package/dist/styles.css

@@ -317,9 +317,6 @@
   .inset-x-0 {
     inset-inline: calc(var(--spacing) * 0);
   }
-  .inset-x-2 {
-    inset-inline: calc(var(--spacing) * 2);
-  }
   .inset-y-0 {
     inset-block: calc(var(--spacing) * 0);
   }
@@ -831,9 +828,6 @@
   .max-h-\[440px\] {
     max-height: 440px;
   }
-  .max-h-\[min\(18rem\,50vh\)\] {
-    max-height: min(18rem, 50vh);
-  }
   .min-h-0 {
     min-height: calc(var(--spacing) * 0);
   }
@@ -2767,6 +2761,9 @@
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
+  .pb-2\.5 {
+    padding-bottom: calc(var(--spacing) * 2.5);
+  }
   .pb-3 {
     padding-bottom: calc(var(--spacing) * 3);
   }
@@ -3497,12 +3494,6 @@
   .ring-\[var\(--md3-outline-variant\)\] {
     --tw-ring-color: var(--md3-outline-variant);
   }
-  .ring-black\/5 {
-    --tw-ring-color: color-mix(in srgb, #000 5%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
-    }
-  }
   .ring-border {
     --tw-ring-color: var(--color-border);
   }
@@ -5354,6 +5345,11 @@
       }
     }
   }
+  .\[\@media\(hover\:none\)\]\:opacity-100 {
+    @media (hover:none) {
+      opacity: 100%;
+    }
+  }
 }
 :root,
 [data-sandbox-ui],

package/dist/workbench.js

@@ -12,9 +12,9 @@ import {
   buildUnifiedPatch,
   computeDiffStats,
   resolveLanguage
-} from "./chunk-P6L4KBYK.js";
+} from "./chunk-DLKDWMFM.js";
 import "./chunk-3J6FG3FJ.js";
-import "./chunk-KN2ZRAW6.js";
+import "./chunk-SVNWL3ZR.js";
 import "./chunk-OMUIPJQZ.js";
 import "./chunk-VIREDUBF.js";
 import "./chunk-77WVVJA4.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.53.0",
+  "version": "0.55.0",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",