@tangle-network/sandbox-ui 0.3.3 → 0.3.4

package/dist/{chunk-67C53XVV.js → chunk-QGI5E7JD.js}

@@ -248,7 +248,7 @@ function WorkspaceLayout({
       "data-sandbox-theme": theme,
       "data-density": density,
       className: cn(
-        "flex h-screen flex-col overflow-hidden bg-[radial-gradient(circle_at_top,rgba(98,114,243,0.14),transparent_34%),linear-gradient(180deg,var(--bg-root),var(--bg-dark)_82%)] text-[var(--text-primary)] font-[var(--font-sans)]",
+        "flex h-screen flex-col overflow-hidden bg-[var(--bg-root)] text-[var(--text-primary)] font-[var(--font-sans)]",
         className
       ),
       children: [

package/dist/dashboard.d.ts

@@ -1,114 +1,4 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
+export { A as AppSidebar, a as AppSidebarProps, B as Backend, b as BackendSelector, c as BackendSelectorProps, C as ClusterStatusBar, d as ClusterStatusBarProps, e as ClusterStatusItem, D as DashboardLayout, f as DashboardLayoutProps, v as DashboardProfile, g as DashboardUser, N as NavItem, h as NewSandboxCard, i as NewSandboxCardProps, w as ProductVariant, P as ProfileComparison, j as ProfileComparisonProps, k as ProfileSelector, l as ProfileSelectorProps, R as ResourceMeter, m as ResourceMeterProps, S as SandboxCard, n as SandboxCardData, o as SandboxCardProps, p as SandboxStatus, q as SandboxTable, r as SandboxTableProps, s as SidebarNavItem, t as SidebarSandbox, x as Variant, V as VariantList, u as VariantListProps, y as VariantOutcome, z as VariantStatus } from './index-BOjBJwzD.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-CY9xo3KX.js';
-import * as React from 'react';
-
-type ProductVariant = "sandbox";
-interface NavItem {
-    id: string;
-    label: string;
-    href: string;
-    icon: React.ComponentType<{
-        className?: string;
-    }>;
-}
-interface DashboardUser {
-    email: string;
-    name?: string;
-    tier?: string;
-    avatarUrl?: string;
-}
-interface DashboardLayoutProps {
-    children: React.ReactNode;
-    variant?: ProductVariant;
-    navItems: NavItem[];
-    activeNavId?: string;
-    user?: DashboardUser | null;
-    isLoading?: boolean;
-    onLogout?: () => void;
-    onSettingsClick?: () => void;
-    settingsHref?: string;
-    className?: string;
-    sidebarClassName?: string;
-    contentClassName?: string;
-    /** Custom link component (e.g., Next.js Link). Use any type to support various router implementations. */
-    LinkComponent?: React.ComponentType<any>;
-}
-declare function DashboardLayout({ children, variant, navItems, activeNavId, user, isLoading, onLogout, onSettingsClick, settingsHref, className, sidebarClassName, contentClassName, LinkComponent, }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
-
-interface Backend {
-    type: string;
-    label: string;
-    description?: string;
-}
-interface BackendSelectorProps {
-    backends: Backend[];
-    selected: string[];
-    onChange: (selected: string[]) => void;
-    label?: string;
-    hint?: string;
-    multiSelect?: boolean;
-    className?: string;
-}
-declare function BackendSelector({ backends, selected, onChange, label, hint, multiSelect, className, }: BackendSelectorProps): react_jsx_runtime.JSX.Element;
-
-interface Profile {
-    id: string;
-    name: string;
-    description?: string;
-    is_builtin?: boolean;
-    extends?: string;
-    model?: string;
-    metrics?: {
-        total_runs: number;
-        success_rate: number;
-        avg_duration_ms: number;
-    };
-}
-interface ProfileSelectorProps {
-    profiles: Profile[];
-    selectedId?: string | null;
-    onSelect: (profile: Profile | null) => void;
-    onCreateClick?: () => void;
-    onManageClick?: () => void;
-    label?: string;
-    placeholder?: string;
-    showMetrics?: boolean;
-    className?: string;
-}
-declare function ProfileSelector({ profiles, selectedId, onSelect, onCreateClick, onManageClick, label, placeholder, showMetrics, className, }: ProfileSelectorProps): react_jsx_runtime.JSX.Element;
-/**
- * Profile performance comparison card.
- * Shows metrics from multiple profiles side by side.
- */
-interface ProfileComparisonProps {
-    profiles: Profile[];
-    className?: string;
-}
-declare function ProfileComparison({ profiles, className, }: ProfileComparisonProps): react_jsx_runtime.JSX.Element | null;
-
-type VariantStatus = "pending" | "running" | "completed" | "failed" | "cancelled";
-type VariantOutcome = "pending_review" | "accepted" | "rejected" | "merged_with_conflicts" | "expired";
-interface Variant {
-    id: string;
-    label: string;
-    sublabel?: string;
-    status: VariantStatus;
-    outcome?: VariantOutcome;
-    durationMs?: number;
-    error?: string;
-    summary?: string;
-    /** Link to view variant details (e.g., chat UI) */
-    detailsUrl?: string;
-}
-interface VariantListProps {
-    variants: Variant[];
-    selectedId?: string | null;
-    onSelect?: (id: string) => void;
-    onAccept?: (id: string) => void;
-    onReject?: (id: string) => void;
-    isActioning?: string | null;
-    className?: string;
-}
-declare function VariantList({ variants, selectedId, onSelect, onAccept, onReject, isActioning, className, }: VariantListProps): react_jsx_runtime.JSX.Element;
-
-export { type Backend, BackendSelector, type BackendSelectorProps, DashboardLayout, type DashboardLayoutProps, type Profile as DashboardProfile, type DashboardUser, type NavItem, type ProductVariant, ProfileComparison, type ProfileComparisonProps, ProfileSelector, type ProfileSelectorProps, type Variant, VariantList, type VariantListProps, type VariantOutcome, type VariantStatus };
+import 'react/jsx-runtime';
+import 'react';

package/dist/dashboard.js

@@ -1,10 +1,16 @@
 import {
+  AppSidebar,
   BackendSelector,
+  ClusterStatusBar,
   DashboardLayout,
+  NewSandboxCard,
   ProfileComparison,
   ProfileSelector,
+  ResourceMeter,
+  SandboxCard,
+  SandboxTable,
   VariantList
-} from "./chunk-OM6ON27W.js";
+} from "./chunk-HY5IBRCE.js";
 import {
   BillingDashboard,
   PricingPage,
@@ -17,12 +23,18 @@ import "./chunk-MXCSSOGH.js";
 import "./chunk-HWLX5NME.js";
 import "./chunk-RQHJBTEU.js";
 export {
+  AppSidebar,
   BackendSelector,
   BillingDashboard,
+  ClusterStatusBar,
   DashboardLayout,
+  NewSandboxCard,
   PricingPage,
   ProfileComparison,
   ProfileSelector,
+  ResourceMeter,
+  SandboxCard,
+  SandboxTable,
   UsageChart,
   VariantList
 };

package/dist/index-BOjBJwzD.d.ts

@@ -0,0 +1,219 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import './usage-chart-CY9xo3KX.js';
+
+interface SidebarNavItem {
+    id: string;
+    label: string;
+    href: string;
+    icon: string;
+    badge?: string;
+}
+interface SidebarSandbox {
+    id: string;
+    name: string;
+    label?: string;
+}
+interface AppSidebarProps {
+    navItems: SidebarNavItem[];
+    activeNavId?: string;
+    sandboxes?: SidebarSandbox[];
+    activeSandboxId?: string;
+    onSandboxChange?: (id: string) => void;
+    onNewAgent?: () => void;
+    className?: string;
+    LinkComponent?: React.ComponentType<any>;
+}
+declare function AppSidebar({ navItems, activeNavId, sandboxes, activeSandboxId, onSandboxChange, onNewAgent, className, LinkComponent, }: AppSidebarProps): react_jsx_runtime.JSX.Element;
+
+interface ClusterStatusItem {
+    icon: string;
+    label: string;
+    value: string;
+    valueClass?: string;
+}
+interface ClusterStatusBarProps {
+    items: ClusterStatusItem[];
+    latency?: string;
+    className?: string;
+}
+declare function ClusterStatusBar({ items, latency, className }: ClusterStatusBarProps): react_jsx_runtime.JSX.Element;
+
+type ProductVariant = "sandbox";
+interface NavItem {
+    id: string;
+    label: string;
+    href: string;
+    icon: React.ComponentType<{
+        className?: string;
+    }>;
+    /** Material icon name for Stitch sidebar (optional, falls back to icon component) */
+    materialIcon?: string;
+}
+interface DashboardUser {
+    email: string;
+    name?: string;
+    tier?: string;
+    avatarUrl?: string;
+}
+interface TopNavLink {
+    label: string;
+    href: string;
+}
+interface DashboardLayoutProps {
+    children: React.ReactNode;
+    variant?: ProductVariant;
+    navItems: NavItem[];
+    activeNavId?: string;
+    user?: DashboardUser | null;
+    isLoading?: boolean;
+    onLogout?: () => void;
+    onSettingsClick?: () => void;
+    settingsHref?: string;
+    onNewSandbox?: () => void;
+    className?: string;
+    sidebarClassName?: string;
+    contentClassName?: string;
+    topNavLinks?: TopNavLink[];
+    activeTopNavHref?: string;
+    sandboxName?: string;
+    sandboxLabel?: string;
+    /** Custom link component (e.g., Next.js Link). Use any type to support various router implementations. */
+    LinkComponent?: React.ComponentType<any>;
+    /** Footer content rendered at bottom of viewport */
+    footer?: React.ReactNode;
+}
+declare function DashboardLayout({ children, variant, navItems, activeNavId, user, isLoading, onLogout, onSettingsClick, settingsHref, onNewSandbox, className, sidebarClassName, contentClassName, topNavLinks, activeTopNavHref, sandboxName, sandboxLabel, LinkComponent, footer, }: DashboardLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface ResourceMeterProps {
+    label: string;
+    value: number;
+    max?: number;
+    unit?: string;
+    icon?: string;
+    className?: string;
+}
+declare function ResourceMeter({ label, value, max, unit, icon, className }: ResourceMeterProps): react_jsx_runtime.JSX.Element;
+
+type SandboxStatus = "running" | "hibernating" | "provisioning" | "stopped" | "failed" | "archived";
+interface SandboxCardData {
+    id: string;
+    name: string;
+    nodeId?: string;
+    status: SandboxStatus;
+    image?: string;
+    imageIcon?: React.ReactNode;
+    cpuPercent?: number;
+    ramUsed?: number;
+    ramTotal?: number;
+    provisioningMessage?: string;
+    provisioningPercent?: number;
+    archivedAt?: string;
+}
+interface SandboxCardProps {
+    sandbox: SandboxCardData;
+    onOpenIDE?: (id: string) => void;
+    onOpenTerminal?: (id: string) => void;
+    onWake?: (id: string) => void;
+    onRestore?: (id: string) => void;
+    className?: string;
+}
+declare function SandboxCard({ sandbox, onOpenIDE, onOpenTerminal, onWake, onRestore, className }: SandboxCardProps): react_jsx_runtime.JSX.Element;
+interface NewSandboxCardProps {
+    onClick?: () => void;
+    className?: string;
+}
+declare function NewSandboxCard({ onClick, className }: NewSandboxCardProps): react_jsx_runtime.JSX.Element;
+
+interface SandboxTableProps {
+    sandboxes: SandboxCardData[];
+    page?: number;
+    pageSize?: number;
+    total?: number;
+    onPageChange?: (page: number) => void;
+    onOpenIDE?: (id: string) => void;
+    onOpenTerminal?: (id: string) => void;
+    onSSH?: (id: string) => void;
+    onWake?: (id: string) => void;
+    onMore?: (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;
+
+interface Backend {
+    type: string;
+    label: string;
+    description?: string;
+}
+interface BackendSelectorProps {
+    backends: Backend[];
+    selected: string[];
+    onChange: (selected: string[]) => void;
+    label?: string;
+    hint?: string;
+    multiSelect?: boolean;
+    className?: string;
+}
+declare function BackendSelector({ backends, selected, onChange, label, hint, multiSelect, className, }: BackendSelectorProps): react_jsx_runtime.JSX.Element;
+
+interface Profile {
+    id: string;
+    name: string;
+    description?: string;
+    is_builtin?: boolean;
+    extends?: string;
+    model?: string;
+    metrics?: {
+        total_runs: number;
+        success_rate: number;
+        avg_duration_ms: number;
+    };
+}
+interface ProfileSelectorProps {
+    profiles: Profile[];
+    selectedId?: string | null;
+    onSelect: (profile: Profile | null) => void;
+    onCreateClick?: () => void;
+    onManageClick?: () => void;
+    label?: string;
+    placeholder?: string;
+    showMetrics?: boolean;
+    className?: string;
+}
+declare function ProfileSelector({ profiles, selectedId, onSelect, onCreateClick, onManageClick, label, placeholder, showMetrics, className, }: ProfileSelectorProps): react_jsx_runtime.JSX.Element;
+/**
+ * Profile performance comparison card.
+ * Shows metrics from multiple profiles side by side.
+ */
+interface ProfileComparisonProps {
+    profiles: Profile[];
+    className?: string;
+}
+declare function ProfileComparison({ profiles, className, }: ProfileComparisonProps): react_jsx_runtime.JSX.Element | null;
+
+type VariantStatus = "pending" | "running" | "completed" | "failed" | "cancelled";
+type VariantOutcome = "pending_review" | "accepted" | "rejected" | "merged_with_conflicts" | "expired";
+interface Variant {
+    id: string;
+    label: string;
+    sublabel?: string;
+    status: VariantStatus;
+    outcome?: VariantOutcome;
+    durationMs?: number;
+    error?: string;
+    summary?: string;
+    /** Link to view variant details (e.g., chat UI) */
+    detailsUrl?: string;
+}
+interface VariantListProps {
+    variants: Variant[];
+    selectedId?: string | null;
+    onSelect?: (id: string) => void;
+    onAccept?: (id: string) => void;
+    onReject?: (id: string) => void;
+    isActioning?: string | null;
+    className?: string;
+}
+declare function VariantList({ variants, selectedId, onSelect, onAccept, onReject, isActioning, className, }: VariantListProps): react_jsx_runtime.JSX.Element;
+
+export { AppSidebar as A, type Backend as B, ClusterStatusBar as C, DashboardLayout as D, type NavItem as N, ProfileComparison as P, ResourceMeter as R, SandboxCard as S, type TopNavLink as T, VariantList as V, type AppSidebarProps as a, BackendSelector as b, type BackendSelectorProps as c, type ClusterStatusBarProps as d, type ClusterStatusItem as e, type DashboardLayoutProps as f, type DashboardUser as g, NewSandboxCard as h, type NewSandboxCardProps as i, type ProfileComparisonProps as j, ProfileSelector as k, type ProfileSelectorProps as l, type ResourceMeterProps as m, type SandboxCardData as n, type SandboxCardProps as o, type SandboxStatus as p, SandboxTable as q, type SandboxTableProps as r, type SidebarNavItem as s, type SidebarSandbox as t, type VariantListProps as u, type Profile as v, type ProductVariant as w, type Variant as x, type VariantOutcome as y, type VariantStatus as z };

package/dist/index.d.ts

@@ -13,7 +13,7 @@ export { E as ExpandedToolDetail, I as InlineThinkingItem, c as InlineToolItem,
 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 { FileArtifactPane, FileArtifactPaneProps, FilePreview, FilePreviewProps } from './files.js';
-export { Backend, BackendSelector, BackendSelectorProps, DashboardLayout, DashboardLayoutProps, DashboardUser, NavItem, ProfileComparison, ProfileComparisonProps, ProfileSelector, ProfileSelectorProps, VariantList, VariantListProps } from './dashboard.js';
+export { A as AppSidebar, a as AppSidebarProps, B as Backend, b as BackendSelector, c as BackendSelectorProps, C as ClusterStatusBar, d as ClusterStatusBarProps, e as ClusterStatusItem, D as DashboardLayout, f as DashboardLayoutProps, g as DashboardUser, N as NavItem, h as NewSandboxCard, i as NewSandboxCardProps, P as ProfileComparison, j as ProfileComparisonProps, k as ProfileSelector, l as ProfileSelectorProps, R as ResourceMeter, m as ResourceMeterProps, S as SandboxCard, n as SandboxCardData, o as SandboxCardProps, p as SandboxStatus, q as SandboxTable, r as SandboxTableProps, s as SidebarNavItem, t as SidebarSandbox, T as TopNavLink, V as VariantList, u as VariantListProps } from './index-BOjBJwzD.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-CY9xo3KX.js';
 export { AuthHeader, GitHubLoginButton, UserMenu } from './auth.js';
 export { CodeBlock, CopyButton, Markdown, MarkdownProps } from './markdown.js';

package/dist/index.js

@@ -80,7 +80,7 @@ import {
   StatusBar,
   TerminalPanel,
   WorkspaceLayout
-} from "./chunk-67C53XVV.js";
+} from "./chunk-QGI5E7JD.js";
 import {
   EmptyState,
   Input,
@@ -156,14 +156,18 @@ import {
   Markdown
 } from "./chunk-LTFK464G.js";
 import {
+  AppSidebar,
   BackendSelector,
+  ClusterStatusBar,
   DashboardLayout,
+  NewSandboxCard,
   ProfileComparison,
   ProfileSelector,
-  ThemeToggle,
-  VariantList,
-  useTheme
-} from "./chunk-OM6ON27W.js";
+  ResourceMeter,
+  SandboxCard,
+  SandboxTable,
+  VariantList
+} from "./chunk-HY5IBRCE.js";
 import {
   BillingDashboard,
   PricingPage,
@@ -213,9 +217,95 @@ import {
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
+
+// src/primitives/theme-toggle.tsx
+import { useCallback, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function getSystemTheme() {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function applyTheme(theme) {
+  const resolved = theme === "system" ? getSystemTheme() : theme;
+  document.documentElement.classList.toggle("dark", resolved === "dark");
+}
+function useTheme() {
+  const [theme, setThemeState] = useState(() => {
+    if (typeof window === "undefined") return "system";
+    return localStorage.getItem("theme") ?? "system";
+  });
+  const setTheme = useCallback((next) => {
+    setThemeState(next);
+    if (next === "system") {
+      localStorage.removeItem("theme");
+    } else {
+      localStorage.setItem("theme", next);
+    }
+    applyTheme(next);
+  }, []);
+  useEffect(() => {
+    applyTheme(theme);
+    if (theme !== "system") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => applyTheme("system");
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, [theme]);
+  return { theme, setTheme };
+}
+var iconClass = "h-4 w-4";
+function SunIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: iconClass,
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: 12, cy: 12, r: 5 }),
+        /* @__PURE__ */ jsx("path", { d: "M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" })
+      ]
+    }
+  );
+}
+function MoonIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className: iconClass,
+      children: /* @__PURE__ */ jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
+    }
+  );
+}
+function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const resolved = theme === "system" ? getSystemTheme() : theme;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => setTheme(resolved === "dark" ? "light" : "dark"),
+      className: "inline-flex items-center justify-center rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-accent-foreground transition-colors",
+      "aria-label": `Switch to ${resolved === "dark" ? "light" : "dark"} mode`,
+      children: resolved === "dark" ? /* @__PURE__ */ jsx(SunIcon, {}) : /* @__PURE__ */ jsx(MoonIcon, {})
+    }
+  );
+}
 export {
   AgentTimeline,
   AgentWorkbench,
+  AppSidebar,
   ArtifactPane,
   AuditResults,
   AuthHeader,
@@ -235,6 +325,7 @@ export {
   ChatContainer,
   ChatInput,
   ChatMessage,
+  ClusterStatusBar,
   CodeBlock2 as CodeBlock,
   CodeBlock as CodeBlockDisplay,
   CommandPreview,
@@ -284,14 +375,18 @@ export {
   Logo,
   Markdown,
   MessageList,
+  NewSandboxCard,
   OpenUIArtifactRenderer,
   PricingPage as PricingCards,
   ProfileComparison,
   ProfileSelector,
   Progress,
   QuestionPreview,
+  ResourceMeter,
   RunGroup,
   RuntimePane,
+  SandboxCard,
+  SandboxTable,
   SandboxWorkbench,
   Select,
   SelectContent,

package/dist/tokens.css

@@ -1,7 +1,41 @@
 /* Tangle Sandbox UI design tokens */
 
+/* MD3 surface hierarchy — Stitch design system */
 :root,
 [data-sandbox-ui] {
+  --md3-surface: #12131a;
+  --md3-surface-dim: #12131a;
+  --md3-surface-bright: #383841;
+  --md3-surface-container-lowest: #0d0e15;
+  --md3-surface-container-low: #1a1b23;
+  --md3-surface-container: #1e1f27;
+  --md3-surface-container-high: #292931;
+  --md3-surface-container-highest: #34343c;
+  --md3-surface-variant: #34343c;
+  --md3-on-surface: #e3e1ec;
+  --md3-on-surface-variant: #ccc3d7;
+  --md3-primary: #d1bcff;
+  --md3-primary-container: #a178ff;
+  --md3-on-primary: #3c0090;
+  --md3-on-primary-container: #34007f;
+  --md3-primary-fixed: #e9ddff;
+  --md3-primary-fixed-dim: #d1bcff;
+  --md3-secondary: #b6c4ff;
+  --md3-secondary-container: #133eae;
+  --md3-on-secondary: #00277f;
+  --md3-on-secondary-container: #a3b5ff;
+  --md3-secondary-fixed: #dce1ff;
+  --md3-secondary-fixed-dim: #b6c4ff;
+  --md3-tertiary: #c7c5d0;
+  --md3-tertiary-container: #90909a;
+  --md3-outline: #958da1;
+  --md3-outline-variant: #4a4455;
+  --md3-error: #ffb4ab;
+  --md3-error-container: #93000a;
+  --md3-on-error: #690005;
+  --md3-inverse-surface: #e3e1ec;
+  --md3-inverse-primary: #6f35df;
+  --md3-surface-tint: #d1bcff;
   /* Semantic HSL bridge for shadcn/radix primitives */
   --hsl-background: 245 18% 7%;
   --hsl-foreground: 220 20% 96%;
@@ -60,7 +94,7 @@
   --accent-text: var(--brand-cool);
 
   /* Surfaces */
-  --bg-root: hsl(var(--hsl-background));
+  --bg-root: radial-gradient(circle at top, rgba(98, 114, 243, 0.14), transparent 34%), linear-gradient(180deg, hsl(var(--hsl-background)), hsl(246 19% 9%) 82%);
   --bg-dark: hsl(246 19% 9%);
   --bg-card: hsl(var(--hsl-card));
   --bg-elevated: hsl(245 20% 12%);
@@ -155,6 +189,82 @@
   --accent-gradient-strong: linear-gradient(135deg, hsl(187 75% 48%), hsl(164 74% 56%));
 }
 
+[data-sandbox-theme="vault"] {
+  /* Vault AI — navy/emerald fintech palette matching tangle.tools/taxes */
+  --hsl-background: 210 17% 97%;
+  --hsl-foreground: 210 20% 10%;
+  --hsl-card: 0 0% 100%;
+  --hsl-card-foreground: 210 20% 10%;
+  --hsl-popover: 0 0% 100%;
+  --hsl-popover-foreground: 210 20% 10%;
+  --hsl-primary: 212 100% 10%;
+  --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 152 100% 22%;
+  --hsl-secondary-foreground: 0 0% 100%;
+  --hsl-muted: 210 14% 95%;
+  --hsl-muted-foreground: 215 10% 40%;
+  --hsl-accent: 210 20% 94%;
+  --hsl-accent-foreground: 210 20% 10%;
+  --hsl-destructive: 0 72% 41%;
+  --hsl-destructive-foreground: 0 0% 100%;
+  --hsl-border: 214 18% 88%;
+  --hsl-input: 214 18% 90%;
+  --hsl-ring: 152 100% 22%;
+  --hsl-success: 152 82% 34%;
+  --hsl-warning: 41 96% 50%;
+  --hsl-info: 212 80% 50%;
+
+  --bg-root: #f8f9fa;
+  --bg-dark: #f3f4f5;
+  --bg-card: #ffffff;
+  --bg-elevated: #edeeef;
+  --bg-section: #f3f4f5;
+  --bg-input: #f3f4f5;
+  --bg-hover: #e7e8e9;
+  --bg-selection: rgba(0, 110, 42, 0.08);
+
+  --text-primary: #001831;
+  --text-secondary: #43474e;
+  --text-muted: #73777f;
+
+  --brand-primary: #001831;
+  --brand-strong: #002d54;
+  --brand-cool: #006e2a;
+  --brand-glow: #3ce36a;
+  --brand-purple: #001831;
+  --brand-vibrant: #006e2a;
+
+  --border-subtle: rgba(0, 24, 49, 0.06);
+  --border-default: rgba(0, 24, 49, 0.1);
+  --border-hover: rgba(0, 24, 49, 0.15);
+  --border-accent: rgba(0, 110, 42, 0.2);
+  --border-accent-hover: rgba(0, 110, 42, 0.4);
+
+  --btn-primary-bg: #001831;
+  --btn-primary-hover: #002d54;
+  --btn-cta-bg: #006e2a;
+  --btn-cta-text: #ffffff;
+
+  --code-keyword: #002d54;
+  --code-string: #006e2a;
+  --code-function: #001831;
+  --code-number: #b45309;
+  --code-success: #006e2a;
+  --code-comment: #73777f;
+  --code-error: #ba1a1a;
+
+  --shadow-card: 0 20px 48px rgba(0, 24, 49, 0.06);
+  --shadow-dropdown: 0 24px 64px rgba(0, 24, 49, 0.12);
+  --shadow-glow: 0 0 40px rgba(0, 110, 42, 0.08);
+
+  --tangle-gradient: linear-gradient(135deg, #001831, #002d54);
+  --tangle-gradient-text: linear-gradient(135deg, #001831, #006e2a);
+  --accent-gradient-strong: linear-gradient(135deg, #001831, #002d54);
+
+  --font-sans: "Inter", "Manrope", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, monospace;
+}
+
 [data-density="compact"] {
   --radius-sm: 8px;
   --radius-md: 12px;

package/dist/workspace.d.ts

@@ -48,7 +48,7 @@ interface WorkspaceLayoutProps {
     /** Disable resize handles */
     resizable?: boolean;
     /** Visual theme for sandbox surfaces */
-    theme?: "operator" | "builder" | "consumer";
+    theme?: "operator" | "builder" | "consumer" | "vault";
     /** Density mode for control sizing */
     density?: "comfortable" | "compact";
     /** Accessible label for the left panel */