@tangle-network/sandbox-ui 0.5.0 → 0.5.2

package/dist/{chunk-ZOZX2U6I.js → chunk-STHB4N22.js}

@@ -158,7 +158,7 @@ function Sidebar({ children, className }) {
     {
       "data-sidebar": "true",
       className: cn(
-        "fixed inset-y-0 left-0 z-40 flex bg-sidebar border-r border-sidebar-border transition-[transform,width] duration-200 ease-in-out",
+        "fixed inset-y-0 left-0 z-40 flex bg-[var(--depth-1)] border-r border-[var(--border-subtle)] transition-[transform,width] duration-200 ease-in-out",
         hidden && "-translate-x-full",
         className
       ),
@@ -168,10 +168,10 @@ function Sidebar({ children, className }) {
   );
 }
 function SidebarRail({ children, className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col h-full w-16 shrink-0", className), children });
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col h-full w-16 shrink-0 bg-[var(--depth-2)]", className), children });
 }
 function SidebarRailHeader({ children, className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center justify-center border-b border-sidebar-border", className), children });
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center justify-center border-b border-[var(--border-subtle)]", className), children });
 }
 function SidebarRailNav({ children, className }) {
   return /* @__PURE__ */ jsx2("nav", { className: cn("flex flex-col items-center gap-1 py-3 flex-1", className), children });
@@ -180,7 +180,7 @@ function SidebarRailFooter({ children, className }) {
   return /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col items-center gap-1 pb-3", className), children });
 }
 function RailSeparator({ className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("my-2 h-px w-10 bg-sidebar-border", className) });
+  return /* @__PURE__ */ jsx2("div", { className: cn("my-2 h-px w-10 bg-[var(--border-subtle)]", className) });
 }
 function RailButton({ icon: Icon2, label, isActive, badge, onClick, className }) {
   return /* @__PURE__ */ jsxs(
@@ -190,17 +190,21 @@ function RailButton({ icon: Icon2, label, isActive, badge, onClick, className })
       onClick,
       title: label,
       className: cn(
-        "relative flex items-center justify-center w-10 h-10 rounded-lg transition-all duration-150",
-        "hover:bg-sidebar-accent/80 hover:text-sidebar-accent-foreground",
+        "group relative flex flex-col items-center justify-center gap-0.5 w-12 h-12 rounded-lg transition-all duration-150",
+        "hover:bg-[var(--accent-surface-soft)] hover:text-[var(--accent-text)]",
         "active:scale-95",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
-        isActive && "bg-sidebar-accent text-sidebar-accent-foreground",
-        !isActive && "text-sidebar-foreground/70",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]",
+        isActive && "bg-[var(--accent-surface-strong)] text-[var(--accent-text)] shadow-[0_0_12px_-2px_rgba(130,99,255,0.3)]",
+        !isActive && "text-[var(--text-muted)]",
         className
       ),
       children: [
-        /* @__PURE__ */ jsx2(Icon2, { className: "h-5 w-5" }),
-        badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx2("span", { className: "absolute -top-1 -right-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-sidebar-primary text-[10px] font-medium text-white px-1", children: badge > 99 ? "99+" : badge })
+        /* @__PURE__ */ jsx2(Icon2, { className: "h-[18px] w-[18px]" }),
+        /* @__PURE__ */ jsx2("span", { className: cn(
+          "text-[9px] leading-none font-medium tracking-tight truncate max-w-[44px]",
+          isActive ? "text-[var(--accent-text)]" : "text-[var(--text-dim)] group-hover:text-[var(--accent-text)]"
+        ), children: label }),
+        badge !== void 0 && badge > 0 && /* @__PURE__ */ jsx2("span", { className: "absolute -top-0.5 -right-0.5 flex h-3.5 min-w-3.5 items-center justify-center rounded-full bg-[var(--brand-primary)] text-[8px] font-medium text-white px-0.5", children: badge > 99 ? "99+" : badge })
       ]
     }
   );
@@ -225,7 +229,7 @@ function SidebarPanel({ children, className }) {
     "div",
     {
       className: cn(
-        "transition-[opacity] duration-150 h-full overflow-hidden border-l border-sidebar-border",
+        "transition-[opacity] duration-150 h-full overflow-hidden border-l border-[var(--border-subtle)] bg-[var(--depth-1)]",
         panelOpen ? "w-[260px] opacity-100" : "w-0 opacity-0 pointer-events-none",
         className
       ),
@@ -234,7 +238,7 @@ function SidebarPanel({ children, className }) {
   );
 }
 function SidebarPanelHeader({ children, title, className }) {
-  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center px-4 border-b border-sidebar-border shrink-0", className), children: children ?? /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold text-sidebar-foreground", children: title }) });
+  return /* @__PURE__ */ jsx2("div", { className: cn("flex h-14 items-center px-4 border-b border-[var(--border-subtle)] shrink-0", className), children: children ?? /* @__PURE__ */ jsx2("h2", { className: "text-sm font-semibold text-[var(--text-primary)]", children: title }) });
 }
 function SidebarPanelContent({ children, className }) {
   return /* @__PURE__ */ jsx2("div", { className: cn("flex-1 overflow-y-auto px-2 py-2", className), children });
@@ -267,8 +271,8 @@ function ProfileAvatar({
       {
         type: "button",
         className: cn(
-          "flex items-center justify-center w-10 h-10 rounded-lg transition-colors hover:bg-sidebar-accent",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+          "flex items-center justify-center w-12 h-12 rounded-lg transition-colors hover:bg-[var(--accent-surface-soft)]",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-cool)]",
           className
         ),
         "aria-label": "User menu",
@@ -722,7 +726,7 @@ function ResourceMeter({ label, value, max = 100, unit, icon, className }) {
 }
 
 // src/dashboard/sandbox-card.tsx
-import { Cpu, Database, Plus as Plus2, Terminal, Power, ExternalLink, RefreshCw } from "lucide-react";
+import { Cpu, Database, Plus as Plus2, Terminal, Power, ExternalLink, RefreshCw, Trash2 } from "lucide-react";
 import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
 var statusConfig = {
   running: { color: "text-[var(--surface-success-text)]", bg: "bg-[var(--surface-success-bg)]", border: "border-[var(--surface-success-border)]", dotClass: "bg-[var(--surface-success-text)] animate-pulse", label: "Running" },
@@ -732,7 +736,7 @@ var statusConfig = {
   failed: { color: "text-[var(--surface-danger-text)]", bg: "bg-[var(--surface-danger-bg)]", border: "border-[var(--surface-danger-border)]", dotClass: "bg-[var(--surface-danger-text)]", label: "Failed" },
   archived: { color: "text-[var(--text-muted)]", bg: "bg-[var(--depth-3)]", border: "border-[var(--border-subtle)]", dotClass: "bg-[var(--border-default)]", label: "Archived" }
 };
-function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, className }) {
+function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, onDelete, className }) {
   const status = statusConfig[sandbox.status] ?? statusConfig.stopped;
   const isActive = sandbox.status === "running";
   const isHibernating = sandbox.status === "hibernating";
@@ -844,6 +848,16 @@ function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, cl
             className: "w-full py-2 bg-[var(--depth-3)] hover:bg-[var(--depth-4)] text-[var(--text-muted)] hover:text-[var(--text-primary)] rounded-lg transition-all text-xs font-semibold border border-[var(--border-subtle)]",
             children: "Restore Sandbox"
           }
+        ),
+        onDelete && !isProvisioning && /* @__PURE__ */ jsx9(
+          "button",
+          {
+            type: "button",
+            onClick: () => onDelete(sandbox.id),
+            className: "absolute bottom-4 right-4 p-1.5 rounded-md text-[var(--text-muted)] hover:text-[var(--surface-danger-text)] hover:bg-[var(--surface-danger-bg)] transition-all opacity-0 group-hover:opacity-100",
+            title: "Delete sandbox",
+            children: /* @__PURE__ */ jsx9(Trash2, { className: "h-3.5 w-3.5" })
+          }
         )
       ]
     }
@@ -869,7 +883,7 @@ function NewSandboxCard({ onClick, className }) {
 }
 
 // src/dashboard/sandbox-table.tsx
-import { Terminal as Terminal2, Code2, Key, MoreVertical, RefreshCw as RefreshCw2, ChevronLeft, ChevronRight } from "lucide-react";
+import { Terminal as Terminal2, Code2, Key, Trash2 as Trash22, RefreshCw as RefreshCw2, ChevronLeft, ChevronRight } from "lucide-react";
 import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var statusColors = {
   running: { dot: "bg-[var(--code-success)] animate-pulse", text: "text-[var(--code-success)]", bar: "bg-[var(--code-success)]" },
@@ -902,6 +916,7 @@ function SandboxTable({
   onSSH,
   onWake,
   onMore,
+  onDelete,
   className
 }) {
   const totalCount = total ?? sandboxes.length;
@@ -950,7 +965,8 @@ function SandboxTable({
               /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onSSH?.(sb.id), className: "p-2 rounded-lg hover:bg-[var(--depth-4)] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-all active:scale-90", title: "SSH", children: /* @__PURE__ */ jsx10(Key, { className: "h-4 w-4" }) })
             ] }),
             isHibernating && /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onWake?.(sb.id), className: "px-3 py-1.5 rounded-lg border border-[var(--border-accent)] text-[var(--brand-cool)] text-[10px] font-bold uppercase tracking-wider hover:bg-[var(--accent-surface-soft)] active:scale-95 transition-all", children: "Wake Up" }),
-            /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onMore?.(sb.id), className: "p-2 rounded-lg hover:bg-[var(--depth-4)] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-all active:scale-90", children: /* @__PURE__ */ jsx10(MoreVertical, { className: "h-4 w-4" }) })
+            onMore && /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onMore(sb.id), className: "p-2 rounded-lg hover:bg-[var(--depth-4)] text-[var(--text-muted)] hover:text-[var(--text-primary)] transition-all active:scale-90", children: /* @__PURE__ */ jsx10(Code2, { className: "h-4 w-4" }) }),
+            onDelete && /* @__PURE__ */ jsx10("button", { type: "button", onClick: () => onDelete(sb.id), className: "p-2 rounded-lg hover:bg-[var(--surface-danger-bg)] text-[var(--text-muted)] hover:text-[var(--surface-danger-text)] transition-all active:scale-90", title: "Delete", children: /* @__PURE__ */ jsx10(Trash22, { className: "h-4 w-4" }) })
           ] }) })
         ] }, sb.id);
       }) })

package/dist/dashboard.d.ts

@@ -1,4 +1,4 @@
-export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, ag as DashboardProfile, h as DashboardUser, I as Invoice, i as InvoiceTable, j as InvoiceTableProps, N as NavItem, k as NewSandboxCard, l as NewSandboxCardProps, m as PlanCardData, n as PlanCards, o as PlanCardsProps, ah as PlanFeature, p as ProductVariant, q as ProfileAvatar, r as ProfileAvatarProps, s as ProfileComparison, t as ProfileComparisonProps, u as ProfileSelector, v as ProfileSelectorProps, R as RailButton, w as RailButtonProps, x as RailModeButton, y as RailModeButtonProps, z as RailSeparator, A as RailSeparatorProps, E as ResourceMeter, F as ResourceMeterProps, S as SIDEBAR_PANEL_WIDTH, G as SIDEBAR_RAIL_WIDTH, H as SIDEBAR_TOTAL_WIDTH, J as SandboxCard, K as SandboxCardData, L as SandboxCardProps, M as SandboxStatus, O as SandboxTable, Q as SandboxTableProps, T as Sidebar, U as SidebarContent, V as SidebarContentProps, W as SidebarPanel, X as SidebarPanelContent, Y as SidebarPanelContentProps, Z as SidebarPanelHeader, _ as SidebarPanelHeaderProps, $ as SidebarPanelProps, a0 as SidebarProps, a1 as SidebarProvider, a2 as SidebarProviderProps, a3 as SidebarRail, a4 as SidebarRailFooter, a5 as SidebarRailFooterProps, a6 as SidebarRailHeader, a7 as SidebarRailHeaderProps, a8 as SidebarRailNav, a9 as SidebarRailNavProps, aa as SidebarRailProps, ab as SidebarUser, ai as Variant, ad as VariantList, ae as VariantListProps, aj as VariantOutcome, ak as VariantStatus, af as useSidebar } from './index-CDt0GE4A.js';
+export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, ag as DashboardProfile, h as DashboardUser, I as Invoice, i as InvoiceTable, j as InvoiceTableProps, N as NavItem, k as NewSandboxCard, l as NewSandboxCardProps, m as PlanCardData, n as PlanCards, o as PlanCardsProps, ah as PlanFeature, p as ProductVariant, q as ProfileAvatar, r as ProfileAvatarProps, s as ProfileComparison, t as ProfileComparisonProps, u as ProfileSelector, v as ProfileSelectorProps, R as RailButton, w as RailButtonProps, x as RailModeButton, y as RailModeButtonProps, z as RailSeparator, A as RailSeparatorProps, E as ResourceMeter, F as ResourceMeterProps, S as SIDEBAR_PANEL_WIDTH, G as SIDEBAR_RAIL_WIDTH, H as SIDEBAR_TOTAL_WIDTH, J as SandboxCard, K as SandboxCardData, L as SandboxCardProps, M as SandboxStatus, O as SandboxTable, Q as SandboxTableProps, T as Sidebar, U as SidebarContent, V as SidebarContentProps, W as SidebarPanel, X as SidebarPanelContent, Y as SidebarPanelContentProps, Z as SidebarPanelHeader, _ as SidebarPanelHeaderProps, $ as SidebarPanelProps, a0 as SidebarProps, a1 as SidebarProvider, a2 as SidebarProviderProps, a3 as SidebarRail, a4 as SidebarRailFooter, a5 as SidebarRailFooterProps, a6 as SidebarRailHeader, a7 as SidebarRailHeaderProps, a8 as SidebarRailNav, a9 as SidebarRailNavProps, aa as SidebarRailProps, ab as SidebarUser, ai as Variant, ad as VariantList, ae as VariantListProps, aj as VariantOutcome, ak as VariantStatus, af as useSidebar } from './index-BT_-ecpc.js';
 export { a as BillingBalance, c as BillingDashboard, d as BillingDashboardProps, B as BillingSubscription, b as BillingUsage, e as PricingPage, f as PricingPageProps, P as PricingTier, g as UsageChart, h as UsageChartProps, U as UsageDataPoint } from './usage-chart-XCoB_7Xu.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/dashboard.js

@@ -30,7 +30,7 @@ import {
   SidebarRailNav,
   VariantList,
   useSidebar
-} from "./chunk-ZOZX2U6I.js";
+} from "./chunk-STHB4N22.js";
 import {
   BillingDashboard,
   PricingPage,

package/dist/{index-CDt0GE4A.d.ts → index-BT_-ecpc.d.ts}

@@ -266,9 +266,10 @@ interface SandboxCardProps {
     onOpenTerminal?: (id: string) => void;
     onWake?: (id: string) => void;
     onRestore?: (id: string) => void;
+    onDelete?: (id: string) => void;
     className?: string;
 }
-declare function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, className }: SandboxCardProps): react_jsx_runtime.JSX.Element;
+declare function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, onDelete, className }: SandboxCardProps): react_jsx_runtime.JSX.Element;
 interface NewSandboxCardProps {
     onClick?: () => void;
     className?: string;
@@ -286,9 +287,10 @@ interface SandboxTableProps {
     onSSH?: (id: string) => void;
     onWake?: (id: string) => void;
     onMore?: (id: string) => void;
+    onDelete?: (id: string) => void;
     className?: string;
 }
-declare function SandboxTable({ sandboxes, page, pageSize, total, onPageChange, onOpenIDE, onOpenTerminal, onSSH, onWake, onMore, className, }: SandboxTableProps): react_jsx_runtime.JSX.Element;
+declare function SandboxTable({ sandboxes, page, pageSize, total, onPageChange, onOpenIDE, onOpenTerminal, onSSH, onWake, onMore, onDelete, className, }: SandboxTableProps): react_jsx_runtime.JSX.Element;
 
 interface Backend {
     type: string;

package/dist/index.d.ts

@@ -15,7 +15,7 @@ import { b as ToolPart } from './parts-CyGkM6Fp.js';
 export { R as ReasoningPart, S as SessionMessage, a as SessionPart, T as TextPart, c as ToolState, d as ToolStatus, e as ToolTime } from './parts-CyGkM6Fp.js';
 export { F as FileNode, a as FileTabData, b as FileTabs, c as FileTabsProps, d as FileTree, e as FileTreeProps, f as FileTreeVisibilityOptions, g as filterFileTree } from './file-tabs-BLfxfmAH.js';
 export { FileArtifactPane, FileArtifactPaneProps, FilePreview, FilePreviewProps } from './files.js';
-export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, h as DashboardUser, I as Invoice, i as InvoiceTable, j as InvoiceTableProps, N as NavItem, k as NewSandboxCard, l as NewSandboxCardProps, P as PanelConfig, m as PlanCardData, n as PlanCards, o as PlanCardsProps, p as ProductVariant, q as ProfileAvatar, r as ProfileAvatarProps, s as ProfileComparison, t as ProfileComparisonProps, u as ProfileSelector, v as ProfileSelectorProps, R as RailButton, w as RailButtonProps, x as RailModeButton, y as RailModeButtonProps, z as RailSeparator, A as RailSeparatorProps, E as ResourceMeter, F as ResourceMeterProps, S as SIDEBAR_PANEL_WIDTH, G as SIDEBAR_RAIL_WIDTH, H as SIDEBAR_TOTAL_WIDTH, J as SandboxCard, K as SandboxCardData, L as SandboxCardProps, M as SandboxStatus, O as SandboxTable, Q as SandboxTableProps, T as Sidebar, U as SidebarContent, V as SidebarContentProps, W as SidebarPanel, X as SidebarPanelContent, Y as SidebarPanelContentProps, Z as SidebarPanelHeader, _ as SidebarPanelHeaderProps, $ as SidebarPanelProps, a0 as SidebarProps, a1 as SidebarProvider, a2 as SidebarProviderProps, a3 as SidebarRail, a4 as SidebarRailFooter, a5 as SidebarRailFooterProps, a6 as SidebarRailHeader, a7 as SidebarRailHeaderProps, a8 as SidebarRailNav, a9 as SidebarRailNavProps, aa as SidebarRailProps, ab as SidebarUser, ac as TopNavLink, ad as VariantList, ae as VariantListProps, af as useSidebar } from './index-CDt0GE4A.js';
+export { B as Backend, a as BackendSelector, b as BackendSelectorProps, C as ClusterStatusBar, c as ClusterStatusBarProps, d as ClusterStatusItem, e as CreditBalance, f as CreditBalanceProps, D as DashboardLayout, g as DashboardLayoutProps, h as DashboardUser, I as Invoice, i as InvoiceTable, j as InvoiceTableProps, N as NavItem, k as NewSandboxCard, l as NewSandboxCardProps, P as PanelConfig, m as PlanCardData, n as PlanCards, o as PlanCardsProps, p as ProductVariant, q as ProfileAvatar, r as ProfileAvatarProps, s as ProfileComparison, t as ProfileComparisonProps, u as ProfileSelector, v as ProfileSelectorProps, R as RailButton, w as RailButtonProps, x as RailModeButton, y as RailModeButtonProps, z as RailSeparator, A as RailSeparatorProps, E as ResourceMeter, F as ResourceMeterProps, S as SIDEBAR_PANEL_WIDTH, G as SIDEBAR_RAIL_WIDTH, H as SIDEBAR_TOTAL_WIDTH, J as SandboxCard, K as SandboxCardData, L as SandboxCardProps, M as SandboxStatus, O as SandboxTable, Q as SandboxTableProps, T as Sidebar, U as SidebarContent, V as SidebarContentProps, W as SidebarPanel, X as SidebarPanelContent, Y as SidebarPanelContentProps, Z as SidebarPanelHeader, _ as SidebarPanelHeaderProps, $ as SidebarPanelProps, a0 as SidebarProps, a1 as SidebarProvider, a2 as SidebarProviderProps, a3 as SidebarRail, a4 as SidebarRailFooter, a5 as SidebarRailFooterProps, a6 as SidebarRailHeader, a7 as SidebarRailHeaderProps, a8 as SidebarRailNav, a9 as SidebarRailNavProps, aa as SidebarRailProps, ab as SidebarUser, ac as TopNavLink, ad as VariantList, ae as VariantListProps, af as useSidebar } from './index-BT_-ecpc.js';
 export { c as BillingDashboard, d as BillingDashboardProps, e as PricingCards, f as PricingPageProps, g as UsageChart, h as UsageChartProps, U as UsageDataPoint } from './usage-chart-XCoB_7Xu.js';
 export { AuthHeader, GitHubLoginButton, LoginLayout, LoginLayoutProps, UserMenu } from './auth.js';
 export { CodeBlock, CodeBlock as CodeBlockDisplay, CopyButton, Markdown, MarkdownProps } from './markdown.js';

package/dist/index.js

@@ -210,7 +210,7 @@ import {
   SidebarRailNav,
   VariantList,
   useSidebar
-} from "./chunk-ZOZX2U6I.js";
+} from "./chunk-STHB4N22.js";
 import {
   BillingDashboard,
   PricingPage,

package/dist/tokens.css

@@ -84,6 +84,16 @@
   --error: var(--hsl-destructive);
   --info: var(--hsl-info);
 
+  /* Sidebar tokens */
+  --sidebar-background: 248 52% 5%;
+  --sidebar-foreground: 244 20% 94%;
+  --sidebar-primary: 247 100% 61%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 245 28% 21%;
+  --sidebar-accent-foreground: 240 16% 92%;
+  --sidebar-border: 236 16% 18%;
+  --sidebar-ring: 247 100% 61%;
+
   /* Depth scale — Tangle deep indigo surfaces */
   --depth-1: #08071A;
   --depth-2: #131228;
@@ -323,6 +333,16 @@
   --surface-neutral-border: var(--border-subtle);
   --surface-neutral-text: var(--text-muted);
 
+  /* Sidebar — light */
+  --sidebar-background: 210 17% 97%;
+  --sidebar-foreground: 210 20% 10%;
+  --sidebar-primary: 248 100% 35%;
+  --sidebar-primary-foreground: 0 0% 100%;
+  --sidebar-accent: 210 20% 92%;
+  --sidebar-accent-foreground: 210 20% 10%;
+  --sidebar-border: 214 18% 88%;
+  --sidebar-ring: 248 100% 35%;
+
   --mesh-teal: rgba(44, 140, 134, 0.04);
   --mesh-violet: rgba(74, 58, 255, 0.03);
   --mesh-blue: rgba(29, 111, 164, 0.03);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "repository": {
     "type": "git",
@@ -88,6 +88,7 @@
     },
     "./styles": "./dist/styles.css",
     "./globals.css": "./dist/globals.css",
+    "./tokens.css": "./dist/tokens.css",
     "./tailwind": "./tailwind.config.cjs"
   },
   "files": [

package/tailwind.config.cjs

@@ -88,6 +88,17 @@ module.exports = {
         // MD3 inverse tokens
         "inverse-surface": "var(--md3-inverse-surface)",
         "inverse-primary": "var(--md3-inverse-primary)",
+        // Sidebar
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
       },
       borderRadius: {
         lg: "var(--radius)",