@tangle-network/sandbox-ui 0.99.1 → 0.100.0

package/dist/styles.css

@@ -84,7 +84,6 @@
     --radius-xl: 0.75rem;
     --radius-2xl: 1rem;
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
-    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@@ -2205,6 +2204,21 @@
   .bg-\[var\(--md3-surface-container\)\] {
     background-color: var(--md3-surface-container);
   }
+  .bg-\[var\(--run-mix-cancelled\)\] {
+    background-color: var(--run-mix-cancelled);
+  }
+  .bg-\[var\(--run-mix-failed\)\] {
+    background-color: var(--run-mix-failed);
+  }
+  .bg-\[var\(--run-mix-in-flight\)\] {
+    background-color: var(--run-mix-in-flight);
+  }
+  .bg-\[var\(--run-mix-succeeded\)\] {
+    background-color: var(--run-mix-succeeded);
+  }
+  .bg-\[var\(--run-mix-waiting\)\] {
+    background-color: var(--run-mix-waiting);
+  }
   .bg-\[var\(--status-error\,\#ff4d6d\)\]\/15 {
     background-color: var(--status-error,#ff4d6d);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3649,6 +3663,18 @@
     --tw-duration: 500ms;
     transition-duration: 500ms;
   }
+  .duration-\[var\(--duration-base\)\] {
+    --tw-duration: var(--duration-base);
+    transition-duration: var(--duration-base);
+  }
+  .duration-\[var\(--duration-fast\)\] {
+    --tw-duration: var(--duration-fast);
+    transition-duration: var(--duration-fast);
+  }
+  .duration-\[var\(--duration-slow\)\] {
+    --tw-duration: var(--duration-slow);
+    transition-duration: var(--duration-slow);
+  }
   .duration-\[var\(--transition-default\)\] {
     --tw-duration: var(--transition-default);
     transition-duration: var(--transition-default);
@@ -3657,9 +3683,13 @@
     --tw-duration: var(--transition-fast);
     transition-duration: var(--transition-fast);
   }
-  .ease-in-out {
-    --tw-ease: var(--ease-in-out);
-    transition-timing-function: var(--ease-in-out);
+  .ease-\[var\(--ease-entrance\)\] {
+    --tw-ease: var(--ease-entrance);
+    transition-timing-function: var(--ease-entrance);
+  }
+  .ease-\[var\(--ease-standard\)\] {
+    --tw-ease: var(--ease-standard);
+    transition-timing-function: var(--ease-standard);
   }
   .ease-out {
     --tw-ease: var(--ease-out);
@@ -4750,20 +4780,20 @@
 [data-sandbox-ui],
 [data-theme="dark"],
 .dark {
-  --md3-surface: #0a0a14;
-  --md3-surface-dim: #060610;
-  --md3-surface-bright: #232238;
-  --md3-surface-container-lowest: #050509;
-  --md3-surface-container-low: #12111f;
-  --md3-surface-container: #191826;
-  --md3-surface-container-high: #221f33;
-  --md3-surface-container-highest: #2c2942;
-  --md3-surface-variant: #2c2942;
-  --md3-on-surface: #fdfdfd;
-  --md3-on-surface-variant: #aaa8b8;
-  --md3-primary: #818CF8;
-  --md3-primary-dim: #6366F1;
-  --md3-primary-container: #4F46E5;
+  --md3-surface: #151523;
+  --md3-surface-dim: #0f0f1a;
+  --md3-surface-bright: #393957;
+  --md3-surface-container-lowest: #0f0f1a;
+  --md3-surface-container-low: #222235;
+  --md3-surface-container: #2d2e43;
+  --md3-surface-container-high: #32324e;
+  --md3-surface-container-highest: #393957;
+  --md3-surface-variant: #32324e;
+  --md3-on-surface: #e3e6ed;
+  --md3-on-surface-variant: #b2b4c7;
+  --md3-primary: #A5B4FC;
+  --md3-primary-dim: #7C6CF6;
+  --md3-primary-container: #4C3FC5;
   --md3-on-primary: #ffffff;
   --md3-on-primary-container: #E0E7FF;
   --md3-primary-fixed: #A5AAFC;
@@ -4774,36 +4804,36 @@
   --md3-on-secondary: #E8E5FF;
   --md3-on-secondary-container: #E8E5FF;
   --md3-tertiary: #10B981;
-  --md3-outline: #4a4965;
-  --md3-outline-variant: #2a293d;
+  --md3-outline: #898da9;
+  --md3-outline-variant: #474a6b;
   --md3-error: #ff5277;
   --md3-error-dim: #eb2855;
   --md3-error-container: #82042b;
   --md3-on-error: #ffffff;
   --md3-on-error-container: #ffbdf2;
   --md3-inverse-surface: #fdfdfd;
-  --md3-inverse-primary: #4F46E5;
+  --md3-inverse-primary: #4C3FC5;
   --md3-inverse-on-surface: #000000;
-  --md3-surface-tint: #818CF8;
-  --hsl-background: 240 33% 6%;
-  --hsl-foreground: 240 6% 93%;
-  --hsl-card: 244 23% 12%;
-  --hsl-card-foreground: 240 6% 93%;
-  --hsl-popover: 247 23% 21%;
-  --hsl-popover-foreground: 240 6% 93%;
-  --hsl-primary: 239 84% 62%;
+  --md3-surface-tint: #A5B4FC;
+  --hsl-background: 240 24% 11%;
+  --hsl-foreground: 225 22% 91%;
+  --hsl-card: 238 20% 22%;
+  --hsl-card-foreground: 225 22% 91%;
+  --hsl-popover: 239 22% 25%;
+  --hsl-popover-foreground: 225 22% 91%;
+  --hsl-primary: 246 54% 51%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 249 24% 16%;
-  --hsl-secondary-foreground: 240 6% 93%;
-  --hsl-muted: 249 24% 16%;
-  --hsl-muted-foreground: 240 5% 68%;
-  --hsl-accent: 249 24% 16%;
-  --hsl-accent-foreground: 240 6% 93%;
+  --hsl-secondary: 239 22% 25%;
+  --hsl-secondary-foreground: 225 22% 91%;
+  --hsl-muted: 239 22% 25%;
+  --hsl-muted-foreground: 234 16% 74%;
+  --hsl-accent: 239 22% 25%;
+  --hsl-accent-foreground: 225 22% 91%;
   --hsl-destructive: 348 74% 48%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 243 19.6% 20%;
-  --hsl-input: 244 29% 9%;
-  --hsl-ring: 239 84% 67%;
+  --hsl-border: 236 20% 35%;
+  --hsl-input: 240 24% 15%;
+  --hsl-ring: 233 100% 87%;
   --hsl-success: 160 84% 39%;
   --hsl-warning: 40 94% 56%;
   --hsl-info: 200 88% 56%;
@@ -4830,37 +4860,37 @@
   --warning: var(--hsl-warning);
   --error: var(--hsl-destructive);
   --info: var(--hsl-info);
-  --sidebar-background: 244 29% 9%;
-  --sidebar-foreground: 240 6% 93%;
-  --sidebar-primary: 239 84% 67%;
+  --sidebar-background: 242 26% 8%;
+  --sidebar-foreground: 225 22% 91%;
+  --sidebar-primary: 246 54% 51%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 249 24% 16%;
-  --sidebar-accent-foreground: 240 6% 93%;
-  --sidebar-border: 243 19.6% 20%;
-  --sidebar-ring: 239 84% 67%;
-  --depth-1: #0a0a14;
-  --depth-2: #191826;
-  --depth-3: #221f33;
-  --depth-4: #2c2942;
+  --sidebar-accent: 239 22% 25%;
+  --sidebar-accent-foreground: 225 22% 91%;
+  --sidebar-border: 236 20% 35%;
+  --sidebar-ring: 233 100% 87%;
+  --depth-1: #151523;
+  --depth-2: #2d2e43;
+  --depth-3: #32324e;
+  --depth-4: #393957;
   --status-running: #10B981;
-  --status-creating: #9B93F0;
+  --status-creating: #A5B4FC;
   --status-stopped: #FFB800;
   --status-warm: #FF8A4C;
   --status-cold: #4AABFF;
   --status-error: #FF4D6D;
   --status-deleted: #6B7094;
-  --surface-success-bg: #022c22;
-  --surface-success-border: #14532d;
-  --surface-success-text: #34D399;
-  --surface-warning-bg: #451a03;
-  --surface-warning-border: #78350f;
-  --surface-warning-text: #fbbf24;
-  --surface-danger-bg: #450a0a;
-  --surface-danger-border: #7f1d1d;
-  --surface-danger-text: #f87171;
-  --surface-info-bg: #082f49;
-  --surface-info-border: #0c4a6e;
-  --surface-info-text: #38bdf8;
+  --surface-success-bg: #2f5146;
+  --surface-success-border: #3c7760;
+  --surface-success-text: #5ed7a4;
+  --surface-warning-bg: #6a402c;
+  --surface-warning-border: #916436;
+  --surface-warning-text: #f4c14f;
+  --surface-danger-bg: #733b36;
+  --surface-danger-border: #9a5b56;
+  --surface-danger-text: #ffada9;
+  --surface-info-bg: #2d4e67;
+  --surface-info-border: #3d7292;
+  --surface-info-text: #67cdff;
   --surface-teal-bg: #042f2e;
   --surface-teal-border: #134e4a;
   --surface-teal-text: #2dd4bf;
@@ -4870,6 +4900,11 @@
   --surface-orange-bg: #431407;
   --surface-orange-border: #7c2d12;
   --surface-orange-text: #fb923c;
+  --run-mix-succeeded: #76edb9;
+  --run-mix-waiting: #e9b642;
+  --run-mix-failed: #e1918e;
+  --run-mix-in-flight: #2d9bca;
+  --run-mix-cancelled: #767d90;
   --surface-neutral-bg: var(--depth-3);
   --surface-neutral-border: var(--border-subtle);
   --surface-neutral-text: var(--text-muted);
@@ -4881,25 +4916,25 @@
   --mesh-teal: transparent;
   --mesh-violet: transparent;
   --mesh-blue: transparent;
-  --tangle-gradient: linear-gradient(135deg, #6366F1, #818CF8);
-  --tangle-gradient-text: linear-gradient(135deg, #A5AAFC, #818CF8);
-  --accent-gradient-strong: linear-gradient(135deg, #6366F1, #818CF8);
-  --accent-surface-soft: rgba(255, 255, 255, 0.04);
-  --accent-surface-strong: rgba(129, 140, 248, 0.14);
-  --accent-text: #b9bffb;
-  --bg-root: #0a0a14;
+  --tangle-gradient: linear-gradient(135deg, #4C3FC5, #A5B4FC);
+  --tangle-gradient-text: linear-gradient(135deg, #C7D2FE, #A5B4FC);
+  --accent-gradient-strong: linear-gradient(135deg, #4C3FC5, #7C6CF6);
+  --accent-surface-soft: rgba(165, 180, 252, 0.07);
+  --accent-surface-strong: rgba(76, 63, 197, 0.30);
+  --accent-text: #A5B4FC;
+  --bg-root: #151523;
   --bg-dark: var(--depth-1);
   --bg-card: var(--depth-2);
   --bg-elevated: var(--depth-4);
   --bg-section: var(--depth-1);
   --bg-input: hsl(var(--hsl-input));
-  --bg-hover: rgba(255, 255, 255, 0.04);
-  --bg-selection: rgba(129, 140, 248, 0.14);
-  --text-primary: #ececee;
-  --text-secondary: #c8c8cd;
-  --text-muted: #9a9aa2;
-  --text-dim: #6b6b73;
-  --brand-primary: #6366F1;
+  --bg-hover: rgba(165, 180, 252, 0.07);
+  --bg-selection: rgba(124, 108, 246, 0.28);
+  --text-primary: #e3e6ed;
+  --text-secondary: #c2c7d4;
+  --text-muted: #b2b4c7;
+  --text-dim: #9ea5b9;
+  --brand-primary: #7C6CF6;
   --brand-strong: #2E2A5E;
   --brand-strong-text: #ffffff;
   --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
@@ -4909,15 +4944,15 @@
   --brand-purple: #C7D2FE;
   --brand-vibrant: #6366F1;
   --brand-emerald: #10B981;
-  --border-subtle: rgba(255, 255, 255, 0.05);
-  --border-default: rgba(255, 255, 255, 0.07);
-  --border-hover: rgba(255, 255, 255, 0.12);
-  --border-accent: rgba(129, 140, 248, 0.20);
-  --border-accent-hover: rgba(129, 140, 248, 0.35);
-  --btn-primary-bg: #5B4ED4;
-  --btn-primary-hover: #4F46E5;
+  --border-subtle: rgba(165, 180, 252, 0.10);
+  --border-default: rgba(165, 180, 252, 0.16);
+  --border-hover: rgba(165, 180, 252, 0.28);
+  --border-accent: rgba(129, 140, 248, 0.35);
+  --border-accent-hover: rgba(129, 140, 248, 0.50);
+  --btn-primary-bg: #4C3FC5;
+  --btn-primary-hover: #5A50D6;
   --btn-primary-text: #ffffff;
-  --btn-cta-bg: #4F46E5;
+  --btn-cta-bg: #4C3FC5;
   --btn-cta-text: #FFFFFF;
   --code-keyword: #A5AAFC;
   --code-string: #34D399;
@@ -4995,17 +5030,17 @@
 [data-sandbox-theme="vault"],
 [data-theme="light"],
 .light {
-  --md3-surface: #eceef3;
-  --md3-surface-dim: #dcdee6;
+  --md3-surface: #e9e9f1;
+  --md3-surface-dim: #d9d9e6;
   --md3-surface-bright: #ffffff;
   --md3-surface-container-lowest: #ffffff;
-  --md3-surface-container-low: #f6f7fa;
+  --md3-surface-container-low: #f7f7fa;
   --md3-surface-container: #ffffff;
-  --md3-surface-container-high: #f1f2f7;
+  --md3-surface-container-high: #f2f2f7;
   --md3-surface-container-highest: #ffffff;
-  --md3-surface-variant: #f1f2f7;
-  --md3-on-surface: #191c24;
-  --md3-on-surface-variant: #464858;
+  --md3-surface-variant: #f2f2f7;
+  --md3-on-surface: #2b2c3e;
+  --md3-on-surface-variant: #494b5d;
   --md3-primary: #3E349E;
   --md3-primary-dim: #352B88;
   --md3-primary-container: #352B88;
@@ -5020,8 +5055,8 @@
   --md3-on-secondary-container: #524A78;
   --md3-tertiary: #065F46;
   --md3-tertiary-container: #D1FAE5;
-  --md3-outline: #6B6E8A;
-  --md3-outline-variant: #C7C6D6;
+  --md3-outline: #737696;
+  --md3-outline-variant: #cecfde;
   --md3-error: #ba1a1a;
   --md3-error-dim: #93000a;
   --md3-error-container: #ffdad6;
@@ -5031,31 +5066,31 @@
   --md3-inverse-primary: #A5AAFC;
   --md3-inverse-on-surface: #f0f1f4;
   --md3-surface-tint: #6366F1;
-  --hsl-background: 223 23% 94%;
-  --hsl-foreground: 0 0% 5%;
+  --hsl-background: 240 24% 93%;
+  --hsl-foreground: 235 18% 20.5%;
   --hsl-card: 0 0% 100%;
-  --hsl-card-foreground: 0 0% 5%;
+  --hsl-card-foreground: 235 18% 20.5%;
   --hsl-popover: 0 0% 100%;
-  --hsl-popover-foreground: 0 0% 5%;
-  --hsl-primary: 245 62% 57%;
+  --hsl-popover-foreground: 235 18% 20.5%;
+  --hsl-primary: 246 54% 51%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 230 27% 96%;
-  --hsl-secondary-foreground: 0 0% 10%;
-  --hsl-muted: 230 27% 96%;
-  --hsl-muted-foreground: 240 5% 38%;
-  --hsl-accent: 230 27% 96%;
-  --hsl-accent-foreground: 0 0% 10%;
+  --hsl-secondary: 240 26% 96%;
+  --hsl-secondary-foreground: 235 18% 20.5%;
+  --hsl-muted: 240 26% 96%;
+  --hsl-muted-foreground: 235 12% 32.5%;
+  --hsl-accent: 240 26% 96%;
+  --hsl-accent-foreground: 235 18% 20.5%;
   --hsl-destructive: 0 72% 41%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 244 16.3% 80.8%;
-  --hsl-input: 225 29% 97%;
-  --hsl-ring: 245 62% 57%;
+  --hsl-border: 238 20% 84%;
+  --hsl-input: 240 30% 97%;
+  --hsl-ring: 246 54% 51%;
   --hsl-success: 160 84% 30%;
   --hsl-warning: 41 96% 50%;
   --hsl-info: 212 80% 50%;
-  --depth-1: #eceef3;
+  --depth-1: #e9e9f1;
   --depth-2: #ffffff;
-  --depth-3: #f1f2f7;
+  --depth-3: #f2f2f7;
   --depth-4: #ffffff;
   --status-running: #059669;
   --status-creating: #3E349E;
@@ -5073,7 +5108,7 @@
   --surface-success-text: #047857;
   --surface-warning-bg: #fffbeb;
   --surface-warning-border: #fde68a;
-  --surface-warning-text: #b45309;
+  --surface-warning-text: #ab4f09;
   --surface-danger-bg: #fff1f2;
   --surface-danger-border: #fecdd3;
   --surface-danger-text: #b91c1c;
@@ -5089,32 +5124,37 @@
   --surface-orange-bg: #fff7ed;
   --surface-orange-border: #fed7aa;
   --surface-orange-text: #c2410c;
+  --run-mix-succeeded: #3c9b78;
+  --run-mix-waiting: #c16227;
+  --run-mix-failed: #cd342f;
+  --run-mix-in-flight: #00679e;
+  --run-mix-cancelled: #515367;
   --surface-neutral-bg: var(--depth-3);
   --surface-neutral-border: var(--border-subtle);
   --surface-neutral-text: var(--text-muted);
   --sidebar-background: 0 0% 100%;
-  --sidebar-foreground: 0 0% 5%;
-  --sidebar-primary: 245 62% 57%;
+  --sidebar-foreground: 235 18% 20.5%;
+  --sidebar-primary: 246 54% 51%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 230 27% 96%;
-  --sidebar-accent-foreground: 0 0% 10%;
-  --sidebar-border: 244 16.3% 80.8%;
-  --sidebar-ring: 245 62% 57%;
+  --sidebar-accent: 240 26% 96%;
+  --sidebar-accent-foreground: 235 18% 20.5%;
+  --sidebar-border: 238 20% 84%;
+  --sidebar-ring: 246 54% 51%;
   --mesh-teal: transparent;
   --mesh-violet: transparent;
   --mesh-blue: transparent;
-  --bg-root: #eceef3;
+  --bg-root: #e9e9f1;
   --bg-dark: var(--depth-1);
   --bg-card: var(--depth-2);
   --bg-elevated: var(--depth-4);
   --bg-section: var(--depth-1);
   --bg-input: hsl(var(--hsl-input));
-  --bg-hover: rgba(0, 0, 0, 0.04);
-  --bg-selection: rgba(91, 78, 212, 0.10);
-  --text-primary: #0d0d0d;
-  --text-secondary: #2a2a30;
-  --text-muted: #5d5d66;
-  --text-dim: #8e8e98;
+  --bg-hover: rgba(76, 63, 198, 0.06);
+  --bg-selection: rgba(76, 63, 198, 0.16);
+  --text-primary: #2b2c3e;
+  --text-secondary: #3d3e52;
+  --text-muted: #494b5d;
+  --text-dim: #65677b;
   --brand-primary: #6366F1;
   --brand-strong: #2E2A5E;
   --brand-strong-text: #ffffff;
@@ -5125,15 +5165,15 @@
   --brand-purple: #6366F1;
   --brand-vibrant: #6366F1;
   --brand-emerald: #059669;
-  --border-subtle: rgba(0, 0, 0, 0.06);
-  --border-default: rgba(0, 0, 0, 0.08);
-  --border-hover: rgba(0, 0, 0, 0.13);
+  --border-subtle: rgba(60, 52, 140, 0.10);
+  --border-default: rgba(60, 52, 140, 0.14);
+  --border-hover: rgba(60, 52, 140, 0.24);
   --border-accent: rgba(91, 78, 212, 0.18);
   --border-accent-hover: rgba(91, 78, 212, 0.35);
-  --btn-primary-bg: #5B4ED4;
-  --btn-primary-hover: #4F46E5;
+  --btn-primary-bg: #4C3FC5;
+  --btn-primary-hover: #5A50D6;
   --btn-primary-text: #ffffff;
-  --btn-cta-bg: #5B4ED4;
+  --btn-cta-bg: #4C3FC5;
   --btn-cta-text: #ffffff;
   --code-keyword: #3E349E;
   --code-string: #059669;
@@ -5149,9 +5189,9 @@
   --tangle-gradient: linear-gradient(135deg, #4F46E5, #5B4ED4);
   --tangle-gradient-text: linear-gradient(135deg, #4F46E5, #5B4ED4);
   --accent-gradient-strong: linear-gradient(135deg, #4F46E5, #5B4ED4);
-  --accent-surface-soft: rgba(0, 0, 0, 0.04);
-  --accent-surface-strong: rgba(91, 78, 212, 0.10);
-  --accent-text: #4F46E5;
+  --accent-surface-soft: rgba(76, 63, 198, 0.05);
+  --accent-surface-strong: rgba(76, 63, 198, 0.13);
+  --accent-text: #5047eb;
   --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
   --font-display: "Inter", "Geist", sans-serif;
   --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
@@ -5201,7 +5241,7 @@
   --surface-success-text: #047857;
   --surface-warning-bg: #fffbeb;
   --surface-warning-border: #fde68a;
-  --surface-warning-text: #b45309;
+  --surface-warning-text: #ab4f09;
   --surface-danger-bg: #fff1f2;
   --surface-danger-border: #fecdd3;
   --surface-danger-text: #b91c1c;
@@ -5387,6 +5427,50 @@
   --text-muted: #5f8472;
   --text-dim: #82a699;
 }
+[data-theme="tangle-dark"] {
+  --hsl-background: 240 24% 11%;
+  --hsl-foreground: 225 22% 91%;
+  --hsl-card: 238 20% 22%;
+  --hsl-card-foreground: 225 22% 91%;
+  --hsl-popover: 239 22% 25%;
+  --hsl-popover-foreground: 225 22% 91%;
+  --hsl-primary: 246 54% 51%;
+  --hsl-primary-foreground: 0 0% 100%;
+  --hsl-secondary: 239 22% 25%;
+  --hsl-secondary-foreground: 225 22% 91%;
+  --hsl-muted: 239 22% 25%;
+  --hsl-muted-foreground: 234 16% 74%;
+  --hsl-accent: 239 22% 25%;
+  --hsl-accent-foreground: 225 22% 91%;
+  --hsl-destructive: 348 74% 48%;
+  --hsl-destructive-foreground: 0 0% 100%;
+  --hsl-border: 236 20% 35%;
+  --hsl-input: 240 24% 15%;
+  --hsl-ring: 233 100% 87%;
+  --depth-1: #151523;
+  --depth-2: #2d2e43;
+  --depth-3: #32324e;
+  --depth-4: #393957;
+  --bg-root: #151523;
+  --bg-card: var(--depth-2);
+  --bg-input: hsl(var(--hsl-input));
+  --md3-surface-container-lowest: #0f0f1a;
+  --md3-surface-container-low: #222235;
+  --md3-surface-container: #2d2e43;
+  --md3-surface-container-high: #32324e;
+  --md3-surface-container-highest: #393957;
+  --md3-outline-variant: #474a6b;
+  --border-subtle: rgba(165, 180, 252, 0.10);
+  --border-default: rgba(165, 180, 252, 0.16);
+  --border-hover: rgba(165, 180, 252, 0.28);
+  --accent-text: #A5B4FC;
+  --brand-primary: #7C6CF6;
+  --brand-glow: #A5AAFC;
+  --text-primary: #e3e6ed;
+  --text-secondary: #c2c7d4;
+  --text-muted: #b2b4c7;
+  --text-dim: #9ea5b9;
+}
 [data-theme="tangle-light"] {
   --hsl-background: 240 33% 98%;
   --hsl-foreground: 245 32% 14%;
@@ -5463,16 +5547,27 @@
   --border-default: rgba(120, 108, 158, 0.18);
   --border-hover: rgba(120, 108, 158, 0.28);
 }
-:root:not([data-theme]),
-[data-sandbox-ui]:not([data-theme]),
-[data-theme="dark"],
-.dark:not([data-theme]) {
-  --text-dim: #92929a;
-}
-[data-sandbox-theme="vault"]:not([data-theme]),
-[data-theme="light"],
-.light:not([data-theme]) {
-  --text-dim: #6b6b75;
+:root {
+  --duration-instant: 90ms;
+  --duration-fast: 150ms;
+  --duration-base: 240ms;
+  --duration-slow: 360ms;
+  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ease-entrance: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
+  --motion-control: var(--duration-fast) var(--ease-standard);
+  --motion-surface: var(--duration-base) var(--ease-entrance);
+  --motion-dismiss: var(--duration-instant) var(--ease-exit);
+  --duration-stream: 420ms;
+  --duration-arrive: 600ms;
+  --ease-expo: cubic-bezier(0.23, 1, 0.32, 1);
+  --motion-stream: var(--duration-stream) var(--ease-expo);
+  --motion-arrive: var(--duration-arrive) var(--ease-expo);
+  --stagger-step: 50ms;
+  --stagger-index: 0;
+  --arrive-distance: 8px;
+  --stream-blur: 4px;
+  --shimmer-period: 1400ms;
 }
 .sandbox-tree-surface {
   --trees-bg-override: var(--md3-surface-container-lowest);
@@ -5762,6 +5857,114 @@
     }
   }
 }
+@keyframes agent-stream-in {
+  from {
+    opacity: 0;
+    filter: blur(var(--stream-blur));
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+  }
+}
+@keyframes agent-arrive {
+  from {
+    opacity: 0;
+    transform: translateY(var(--arrive-distance));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes agent-pop-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes agent-caret {
+  0%,
+  49% {
+    opacity: 1;
+  }
+  50%,
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes agent-shimmer {
+  from {
+    background-position: 150% center;
+  }
+  to {
+    background-position: -50% center;
+  }
+}
+.agent-stream-in {
+  animation: agent-stream-in var(--motion-stream) both;
+}
+.agent-arrive {
+  animation: agent-arrive var(--motion-arrive) both;
+}
+.agent-pop-in {
+  animation: agent-pop-in var(--motion-control) both;
+}
+.agent-arrive {
+  animation-delay: calc(min(var(--stagger-index), 8) * var(--stagger-step));
+}
+.agent-shimmer {
+  background: linear-gradient(
+    90deg,
+    hsl(var(--muted-foreground)) 0%,
+    hsl(var(--foreground)) 45%,
+    hsl(var(--muted-foreground)) 60%
+  );
+  background-size: 250% auto;
+  background-clip: text;
+  -webkit-background-clip: text;
+  color: transparent;
+  animation: agent-shimmer var(--shimmer-period) linear infinite;
+}
+.agent-disclose {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows var(--motion-surface), opacity var(--motion-control);
+  opacity: 0;
+}
+.agent-disclose > * {
+  min-height: 0;
+  overflow: hidden;
+}
+.agent-disclose[data-open="true"] {
+  grid-template-rows: 1fr;
+  opacity: 1;
+}
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-instant: 1ms;
+    --duration-fast: 1ms;
+    --duration-base: 1ms;
+    --duration-slow: 1ms;
+    --duration-stream: 1ms;
+    --duration-arrive: 1ms;
+    --stagger-step: 0ms;
+  }
+  *:where(:not([data-motion="essential"], [data-motion="essential"] *)),
+  *:where(:not([data-motion="essential"], [data-motion="essential"] *))::before,
+  *:where(:not([data-motion="essential"], [data-motion="essential"] *))::after {
+    animation-duration: 1ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 1ms !important;
+  }
+  html {
+    scroll-behavior: auto !important;
+  }
+}
 [data-sandbox-theme="vault"] .glass-panel {
   background: var(--md3-surface-container);
   backdrop-filter: none;