@tangle-network/sandbox-ui 0.29.0 → 0.31.0

package/dist/styles.css

@@ -694,6 +694,9 @@
   .h-\[3px\] {
     height: 3px;
   }
+  .h-\[17px\] {
+    height: 17px;
+  }
   .h-\[70vh\] {
     height: 70vh;
   }
@@ -949,11 +952,14 @@
   .w-\[3px\] {
     width: 3px;
   }
+  .w-\[17px\] {
+    width: 17px;
+  }
   .w-\[72\%\] {
     width: 72%;
   }
-  .w-\[260px\] {
-    width: 260px;
+  .w-\[268px\] {
+    width: 268px;
   }
   .w-\[300px\] {
     width: 300px;
@@ -2457,6 +2463,9 @@
   .text-\[12px\] {
     font-size: 12px;
   }
+  .text-\[13\.5px\] {
+    font-size: 13.5px;
+  }
   .text-\[13px\] {
     font-size: 13px;
   }
@@ -4060,24 +4069,24 @@
   --md3-inverse-primary: #4F46E5;
   --md3-inverse-on-surface: #000000;
   --md3-surface-tint: #818CF8;
-  --hsl-background: 244 28% 5%;
-  --hsl-foreground: 240 18% 94%;
-  --hsl-card: 246 30% 11%;
-  --hsl-card-foreground: 240 18% 94%;
-  --hsl-popover: 246 28% 14%;
-  --hsl-popover-foreground: 240 18% 94%;
+  --hsl-background: 240 8% 5%;
+  --hsl-foreground: 240 6% 93%;
+  --hsl-card: 240 5% 8%;
+  --hsl-card-foreground: 240 6% 93%;
+  --hsl-popover: 240 4% 13%;
+  --hsl-popover-foreground: 240 6% 93%;
   --hsl-primary: 239 84% 67%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 248 24% 18%;
-  --hsl-secondary-foreground: 240 16% 90%;
-  --hsl-muted: 246 22% 15%;
-  --hsl-muted-foreground: 240 14% 58%;
-  --hsl-accent: 248 26% 20%;
-  --hsl-accent-foreground: 240 16% 92%;
+  --hsl-secondary: 240 5% 11%;
+  --hsl-secondary-foreground: 240 6% 93%;
+  --hsl-muted: 240 5% 11%;
+  --hsl-muted-foreground: 240 4% 62%;
+  --hsl-accent: 240 5% 11%;
+  --hsl-accent-foreground: 240 6% 93%;
   --hsl-destructive: 348 90% 60%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 244 14% 22%;
-  --hsl-input: 246 28% 14%;
+  --hsl-border: 240 3% 13%;
+  --hsl-input: 240 5% 11%;
   --hsl-ring: 239 84% 67%;
   --hsl-success: 160 84% 39%;
   --hsl-warning: 40 94% 56%;
@@ -4105,18 +4114,18 @@
   --warning: var(--hsl-warning);
   --error: var(--hsl-destructive);
   --info: var(--hsl-info);
-  --sidebar-background: 244 28% 5%;
-  --sidebar-foreground: 240 18% 94%;
+  --sidebar-background: 240 5% 8%;
+  --sidebar-foreground: 240 6% 93%;
   --sidebar-primary: 239 84% 67%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 248 26% 20%;
-  --sidebar-accent-foreground: 240 16% 92%;
-  --sidebar-border: 244 14% 17%;
+  --sidebar-accent: 240 5% 11%;
+  --sidebar-accent-foreground: 240 6% 93%;
+  --sidebar-border: 240 3% 13%;
   --sidebar-ring: 239 84% 67%;
-  --depth-1: #0C0B1D;
-  --depth-2: #141328;
-  --depth-3: #1D1B38;
-  --depth-4: #262448;
+  --depth-1: #0b0b0d;
+  --depth-2: #141416;
+  --depth-3: #1a1a1d;
+  --depth-4: #202023;
   --status-running: #10B981;
   --status-creating: #9B93F0;
   --status-stopped: #FFB800;
@@ -4153,29 +4162,27 @@
   --glass-border: var(--border-subtle);
   --glass-border-hover: var(--border-default);
   --glass-blur: 0px;
-  --mesh-teal: rgba(16, 185, 129, 0.05);
-  --mesh-violet: rgba(99, 102, 241, 0.07);
-  --mesh-blue: rgba(129, 140, 248, 0.04);
+  --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(99, 102, 241, 0.12);
-  --accent-surface-strong: rgba(99, 102, 241, 0.20);
-  --accent-text: #A5AAFC;
-  --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(99, 102, 241, 0.08), transparent),
-             radial-gradient(ellipse 50% 40% at 80% 10%, rgba(129, 140, 248, 0.06), transparent),
-             linear-gradient(180deg, var(--depth-1), #0D0C1E 100%);
+  --accent-surface-soft: rgba(255, 255, 255, 0.04);
+  --accent-surface-strong: rgba(129, 140, 248, 0.14);
+  --accent-text: #b9bffb;
+  --bg-root: #0b0b0d;
   --bg-dark: var(--depth-1);
-  --bg-card: hsl(var(--hsl-card));
-  --bg-elevated: hsl(246 28% 17%);
-  --bg-section: hsl(246 28% 9%);
-  --bg-input: hsl(var(--hsl-input));
-  --bg-hover: rgba(99, 102, 241, 0.08);
-  --bg-selection: rgba(99, 102, 241, 0.18);
-  --text-primary: hsl(var(--hsl-foreground));
-  --text-secondary: hsl(240 16% 85%);
-  --text-muted: #8688B0;
-  --text-dim: #606294;
+  --bg-card: var(--depth-2);
+  --bg-elevated: var(--depth-4);
+  --bg-section: var(--depth-1);
+  --bg-input: var(--depth-3);
+  --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;
   --brand-strong: #2E2A5E;
   --brand-strong-text: #ffffff;
@@ -4186,11 +4193,11 @@
   --brand-purple: #C7D2FE;
   --brand-vibrant: #6366F1;
   --brand-emerald: #10B981;
-  --border-subtle: rgba(100, 100, 148, 0.10);
-  --border-default: rgba(100, 100, 148, 0.18);
-  --border-hover: rgba(100, 100, 148, 0.28);
-  --border-accent: rgba(99, 102, 241, 0.18);
-  --border-accent-hover: rgba(99, 102, 241, 0.35);
+  --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: #6366F1;
   --btn-primary-hover: #818CF8;
   --btn-primary-text: #ffffff;
@@ -4203,20 +4210,21 @@
   --code-success: #10B981;
   --code-comment: #606294;
   --code-error: #FF4D6D;
-  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
-  --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
-  --shadow-glow: 0 0 32px rgba(99, 102, 241, 0.18);
-  --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(99, 102, 241, 0.2);
+  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
+  --shadow-dropdown: 0 8px 30px rgba(0, 0, 0, 0.45);
+  --shadow-glow: none;
+  --shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.3);
   --shadow-status-running: 0 0 6px rgba(16, 185, 129, 0.5);
   --shadow-status-creating: 0 0 6px rgba(99, 102, 241, 0.5);
   --shadow-status-error: 0 0 6px rgba(255, 77, 109, 0.5);
   --radius-sm: 6px;
   --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
+  --radius-lg: 10px;
+  --radius-xl: 12px;
   --radius-pill: 999px;
   --radius-full: 999px;
-  --radius: 0.625rem;
+  --radius-composer: 26px;
+  --radius: 0.5rem;
   --control-height: 2.25rem;
   --panel-padding: 1rem;
   --content-max-width: 80rem;
@@ -4226,8 +4234,8 @@
   --font-size-lg: 1rem;
   --font-size-xl: 1.25rem;
   --line-height-tight: 1.3;
-  --line-height-base: 1.75;
-  --line-height-relaxed: 1.8;
+  --line-height-base: 1.6;
+  --line-height-relaxed: 1.75;
   --avatar-size: 2rem;
   --timeline-dot-size: 0.625rem;
   --indicator-dot-size: 0.25rem;
@@ -4254,8 +4262,8 @@
   --transition-fast: 0.1s ease;
   --transition-default: 0.16s ease;
   --transition-medium: 0.24s ease;
-  --font-sans: "Geist", "DM Sans", ui-sans-serif, system-ui, sans-serif;
-  --font-display: "Outfit", "Geist", sans-serif;
+  --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;
 }
 [data-sandbox-theme="vault"] {
@@ -4295,32 +4303,32 @@
   --md3-inverse-primary: #A5AAFC;
   --md3-inverse-on-surface: #f0f1f4;
   --md3-surface-tint: #6366F1;
-  --hsl-background: 225 20% 97%;
-  --hsl-foreground: 228 20% 12%;
-  --hsl-card: 0 0% 100%;
-  --hsl-card-foreground: 228 20% 12%;
+  --hsl-background: 0 0% 100%;
+  --hsl-foreground: 0 0% 5%;
+  --hsl-card: 240 7% 97%;
+  --hsl-card-foreground: 0 0% 5%;
   --hsl-popover: 0 0% 100%;
-  --hsl-popover-foreground: 228 20% 12%;
-  --hsl-primary: 239 84% 67%;
+  --hsl-popover-foreground: 0 0% 5%;
+  --hsl-primary: 245 62% 57%;
   --hsl-primary-foreground: 0 0% 100%;
-  --hsl-secondary: 242 22% 42%;
-  --hsl-secondary-foreground: 0 0% 100%;
-  --hsl-muted: 240 14% 89%;
-  --hsl-muted-foreground: 240 10% 36%;
-  --hsl-accent: 248 22% 86%;
-  --hsl-accent-foreground: 248 38% 30%;
+  --hsl-secondary: 240 6% 93%;
+  --hsl-secondary-foreground: 0 0% 10%;
+  --hsl-muted: 240 6% 93%;
+  --hsl-muted-foreground: 240 5% 38%;
+  --hsl-accent: 240 6% 93%;
+  --hsl-accent-foreground: 0 0% 10%;
   --hsl-destructive: 0 72% 41%;
   --hsl-destructive-foreground: 0 0% 100%;
-  --hsl-border: 244 14% 78%;
-  --hsl-input: 244 12% 80%;
-  --hsl-ring: 239 84% 67%;
+  --hsl-border: 240 6% 89%;
+  --hsl-input: 240 6% 89%;
+  --hsl-ring: 245 62% 57%;
   --hsl-success: 160 84% 30%;
   --hsl-warning: 41 96% 50%;
   --hsl-info: 212 80% 50%;
-  --depth-1: #f4f4f9;
-  --depth-2: #edecf4;
-  --depth-3: #e5e4ee;
-  --depth-4: #dcdbe8;
+  --depth-1: #ffffff;
+  --depth-2: #f7f7f8;
+  --depth-3: #ececee;
+  --depth-4: #e3e3e6;
   --status-running: #059669;
   --status-creating: #3E349E;
   --status-stopped: #B45309;
@@ -4356,29 +4364,29 @@
   --surface-neutral-bg: var(--depth-3);
   --surface-neutral-border: var(--border-subtle);
   --surface-neutral-text: var(--text-muted);
-  --sidebar-background: 232 18% 96%;
-  --sidebar-foreground: 228 20% 12%;
-  --sidebar-primary: 239 84% 67%;
+  --sidebar-background: 240 7% 97%;
+  --sidebar-foreground: 0 0% 5%;
+  --sidebar-primary: 245 62% 57%;
   --sidebar-primary-foreground: 0 0% 100%;
-  --sidebar-accent: 240 18% 90%;
-  --sidebar-accent-foreground: 240 38% 30%;
-  --sidebar-border: 244 14% 78%;
-  --sidebar-ring: 239 84% 67%;
-  --mesh-teal: rgba(5, 150, 105, 0.04);
-  --mesh-violet: rgba(99, 102, 241, 0.03);
-  --mesh-blue: rgba(129, 140, 248, 0.03);
-  --bg-root: #f4f4f9;
-  --bg-dark: #edecf4;
-  --bg-card: #ffffff;
-  --bg-elevated: #e5e4ee;
-  --bg-section: #edecf4;
-  --bg-input: #edecf4;
-  --bg-hover: rgba(99, 102, 241, 0.05);
-  --bg-selection: rgba(99, 102, 241, 0.10);
-  --text-primary: #191c24;
-  --text-secondary: #3a3a50;
-  --text-muted: #5E5E7A;
-  --text-dim: #A0A0B8;
+  --sidebar-accent: 240 6% 93%;
+  --sidebar-accent-foreground: 0 0% 10%;
+  --sidebar-border: 240 6% 89%;
+  --sidebar-ring: 245 62% 57%;
+  --mesh-teal: transparent;
+  --mesh-violet: transparent;
+  --mesh-blue: transparent;
+  --bg-root: #ffffff;
+  --bg-dark: #f7f7f8;
+  --bg-card: #f7f7f8;
+  --bg-elevated: #ffffff;
+  --bg-section: #f7f7f8;
+  --bg-input: #ececee;
+  --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;
   --brand-primary: #6366F1;
   --brand-strong: #2E2A5E;
   --brand-strong-text: #ffffff;
@@ -4389,15 +4397,15 @@
   --brand-purple: #6366F1;
   --brand-vibrant: #6366F1;
   --brand-emerald: #059669;
-  --border-subtle: rgba(110, 108, 148, 0.20);
-  --border-default: rgba(110, 108, 148, 0.35);
-  --border-hover: rgba(110, 108, 148, 0.50);
-  --border-accent: rgba(99, 102, 241, 0.15);
-  --border-accent-hover: rgba(99, 102, 241, 0.30);
-  --btn-primary-bg: #6366F1;
+  --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-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-text: #ffffff;
-  --btn-cta-bg: #6366F1;
+  --btn-cta-bg: #5B4ED4;
   --btn-cta-text: #ffffff;
   --code-keyword: #3E349E;
   --code-string: #059669;
@@ -4406,26 +4414,27 @@
   --code-success: #059669;
   --code-comment: #6B6E8A;
   --code-error: #ba1a1a;
-  --shadow-card: 0 1px 3px rgba(25, 28, 36, 0.05), 0 0 0 1px rgba(200, 198, 218, 0.22);
-  --shadow-dropdown: 0 8px 32px rgba(25, 28, 36, 0.10), 0 0 0 1px rgba(200, 198, 218, 0.28);
+  --shadow-card: 0 1px 2px rgba(25, 28, 36, 0.06);
+  --shadow-dropdown: 0 8px 30px rgba(25, 28, 36, 0.10);
   --shadow-glow: none;
-  --shadow-accent: 0 1px 3px rgba(25, 28, 36, 0.05), 0 0 0 1px rgba(99, 102, 241, 0.15);
-  --tangle-gradient: linear-gradient(135deg, #6366F1, #818CF8);
-  --tangle-gradient-text: linear-gradient(135deg, #4F46E5, #6366F1);
-  --accent-gradient-strong: linear-gradient(135deg, #6366F1, #818CF8);
-  --accent-surface-soft: rgba(99, 102, 241, 0.06);
-  --accent-surface-strong: rgba(99, 102, 241, 0.12);
+  --shadow-accent: 0 1px 2px rgba(25, 28, 36, 0.06);
+  --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;
-  --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, sans-serif;
-  --font-display: "Manrope", "Inter", sans-serif;
+  --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;
-  --radius: 0.375rem;
-  --radius-sm: 2px;
-  --radius-md: 4px;
-  --radius-lg: 6px;
-  --radius-xl: 8px;
+  --radius: 0.5rem;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 12px;
   --radius-pill: 999px;
   --radius-full: 999px;
+  --radius-composer: 26px;
 }
 @layer base {
   :root {