@tangle-network/sandbox-ui 0.3.3 → 0.3.5

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 */

package/dist/workspace.js

@@ -8,7 +8,7 @@ import {
   StatusBar,
   TerminalPanel,
   WorkspaceLayout
-} from "./chunk-67C53XVV.js";
+} from "./chunk-QGI5E7JD.js";
 import "./chunk-MUOL44AE.js";
 import "./chunk-4F2GJRGU.js";
 import "./chunk-CNWVHQFY.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/sandbox-ui",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
   "type": "module",
   "main": "dist/index.js",

package/tailwind.config.cjs

@@ -49,6 +49,45 @@ module.exports = {
         warning: "hsl(var(--warning))",
         error: "hsl(var(--error))",
         info: "hsl(var(--info))",
+        // MD3 surface hierarchy (Stitch design system)
+        "surface": "var(--md3-surface)",
+        "surface-dim": "var(--md3-surface-dim)",
+        "surface-bright": "var(--md3-surface-bright)",
+        "surface-container-lowest": "var(--md3-surface-container-lowest)",
+        "surface-container-low": "var(--md3-surface-container-low)",
+        "surface-container": "var(--md3-surface-container)",
+        "surface-container-high": "var(--md3-surface-container-high)",
+        "surface-container-highest": "var(--md3-surface-container-highest)",
+        "surface-variant": "var(--md3-surface-variant)",
+        "on-surface": "var(--md3-on-surface)",
+        "on-surface-variant": "var(--md3-on-surface-variant)",
+        // MD3 primary tokens
+        "md3-primary": "var(--md3-primary)",
+        "primary-container": "var(--md3-primary-container)",
+        "on-primary": "var(--md3-on-primary)",
+        "on-primary-container": "var(--md3-on-primary-container)",
+        "primary-fixed": "var(--md3-primary-fixed)",
+        "primary-fixed-dim": "var(--md3-primary-fixed-dim)",
+        // MD3 secondary tokens
+        "md3-secondary": "var(--md3-secondary)",
+        "secondary-container": "var(--md3-secondary-container)",
+        "on-secondary": "var(--md3-on-secondary)",
+        "on-secondary-container": "var(--md3-on-secondary-container)",
+        "secondary-fixed": "var(--md3-secondary-fixed)",
+        "secondary-fixed-dim": "var(--md3-secondary-fixed-dim)",
+        // MD3 tertiary tokens
+        "md3-tertiary": "var(--md3-tertiary)",
+        "tertiary-container": "var(--md3-tertiary-container)",
+        // MD3 outline tokens
+        "outline": "var(--md3-outline)",
+        "outline-variant": "var(--md3-outline-variant)",
+        // MD3 error tokens
+        "md3-error": "var(--md3-error)",
+        "error-container": "var(--md3-error-container)",
+        "on-error": "var(--md3-on-error)",
+        // MD3 inverse tokens
+        "inverse-surface": "var(--md3-inverse-surface)",
+        "inverse-primary": "var(--md3-inverse-primary)",
       },
       borderRadius: {
         lg: "var(--radius)",