@tangle-network/sandbox-ui 0.12.0 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/{chunk-ESVYBDGA.js → chunk-AG7QDC2Q.js} +182 -2
  2. package/dist/globals.css +407 -403
  3. package/dist/hooks.d.ts +1 -1
  4. package/dist/hooks.js +1 -1
  5. package/dist/index.d.ts +1 -1
  6. package/dist/index.js +1 -1
  7. package/dist/styles.css +407 -403
  8. package/dist/terminal.js +39 -2
  9. package/dist/{use-sandbox-metrics-B64diPqN.d.ts → use-sandbox-metrics-DWc0k9Xm.d.ts} +18 -6
  10. package/package.json +8 -1
package/dist/globals.css CHANGED
@@ -1,408 +1,5 @@
1
1
  /*! tailwindcss v4.2.2 | MIT License | https://tailwindcss.com */
2
2
  @layer properties;
3
- :root, [data-sandbox-ui] {
4
- --md3-surface: #0a0a14;
5
- --md3-surface-dim: #07070d;
6
- --md3-surface-bright: #1b1a2c;
7
- --md3-surface-container-lowest: #000001;
8
- --md3-surface-container-low: #0d0c18;
9
- --md3-surface-container: #11101e;
10
- --md3-surface-container-high: #171624;
11
- --md3-surface-container-highest: #1f1e30;
12
- --md3-surface-variant: #1f1e30;
13
- --md3-on-surface: #fdfdfd;
14
- --md3-on-surface-variant: #aaa8b8;
15
- --md3-primary: #818CF8;
16
- --md3-primary-dim: #6366F1;
17
- --md3-primary-container: #4F46E5;
18
- --md3-on-primary: #ffffff;
19
- --md3-on-primary-container: #E0E7FF;
20
- --md3-primary-fixed: #A5AAFC;
21
- --md3-primary-fixed-dim: #818CF8;
22
- --md3-secondary: #C7D2FE;
23
- --md3-secondary-dim: #A5B4FC;
24
- --md3-secondary-container: #312E81;
25
- --md3-on-secondary: #E8E5FF;
26
- --md3-on-secondary-container: #E8E5FF;
27
- --md3-tertiary: #10B981;
28
- --md3-outline: #434260;
29
- --md3-outline-variant: #2A293D;
30
- --md3-error: #ff5277;
31
- --md3-error-dim: #eb2855;
32
- --md3-error-container: #82042b;
33
- --md3-on-error: #ffffff;
34
- --md3-on-error-container: #ffbdf2;
35
- --md3-inverse-surface: #fdfdfd;
36
- --md3-inverse-primary: #4F46E5;
37
- --md3-inverse-on-surface: #000000;
38
- --md3-surface-tint: #818CF8;
39
- --hsl-background: 244 28% 5%;
40
- --hsl-foreground: 240 18% 94%;
41
- --hsl-card: 246 30% 11%;
42
- --hsl-card-foreground: 240 18% 94%;
43
- --hsl-popover: 246 28% 14%;
44
- --hsl-popover-foreground: 240 18% 94%;
45
- --hsl-primary: 239 84% 67%;
46
- --hsl-primary-foreground: 0 0% 100%;
47
- --hsl-secondary: 248 24% 18%;
48
- --hsl-secondary-foreground: 240 16% 90%;
49
- --hsl-muted: 246 22% 15%;
50
- --hsl-muted-foreground: 240 14% 58%;
51
- --hsl-accent: 248 26% 20%;
52
- --hsl-accent-foreground: 240 16% 92%;
53
- --hsl-destructive: 348 90% 60%;
54
- --hsl-destructive-foreground: 0 0% 100%;
55
- --hsl-border: 244 14% 22%;
56
- --hsl-input: 246 28% 14%;
57
- --hsl-ring: 239 84% 67%;
58
- --hsl-success: 160 84% 39%;
59
- --hsl-warning: 40 94% 56%;
60
- --hsl-info: 200 88% 56%;
61
- --background: var(--hsl-background);
62
- --foreground: var(--hsl-foreground);
63
- --card: var(--hsl-card);
64
- --card-foreground: var(--hsl-card-foreground);
65
- --popover: var(--hsl-popover);
66
- --popover-foreground: var(--hsl-popover-foreground);
67
- --primary: var(--hsl-primary);
68
- --primary-foreground: var(--hsl-primary-foreground);
69
- --secondary: var(--hsl-secondary);
70
- --secondary-foreground: var(--hsl-secondary-foreground);
71
- --muted: var(--hsl-muted);
72
- --muted-foreground: var(--hsl-muted-foreground);
73
- --accent: var(--hsl-accent);
74
- --accent-foreground: var(--hsl-accent-foreground);
75
- --destructive: var(--hsl-destructive);
76
- --destructive-foreground: var(--hsl-destructive-foreground);
77
- --border: var(--hsl-border);
78
- --input: var(--hsl-input);
79
- --ring: var(--hsl-ring);
80
- --success: var(--hsl-success);
81
- --warning: var(--hsl-warning);
82
- --error: var(--hsl-destructive);
83
- --info: var(--hsl-info);
84
- --sidebar-background: 244 28% 5%;
85
- --sidebar-foreground: 240 18% 94%;
86
- --sidebar-primary: 239 84% 67%;
87
- --sidebar-primary-foreground: 0 0% 100%;
88
- --sidebar-accent: 248 26% 20%;
89
- --sidebar-accent-foreground: 240 16% 92%;
90
- --sidebar-border: 244 14% 17%;
91
- --sidebar-ring: 239 84% 67%;
92
- --depth-1: #0C0B1D;
93
- --depth-2: #141328;
94
- --depth-3: #1D1B38;
95
- --depth-4: #262448;
96
- --status-running: #10B981;
97
- --status-creating: #9B93F0;
98
- --status-stopped: #FFB800;
99
- --status-warm: #FF8A4C;
100
- --status-cold: #4AABFF;
101
- --status-error: #FF4D6D;
102
- --status-deleted: #6B7094;
103
- --surface-success-bg: #022c22;
104
- --surface-success-border: #14532d;
105
- --surface-success-text: #34D399;
106
- --surface-warning-bg: #451a03;
107
- --surface-warning-border: #78350f;
108
- --surface-warning-text: #fbbf24;
109
- --surface-danger-bg: #450a0a;
110
- --surface-danger-border: #7f1d1d;
111
- --surface-danger-text: #f87171;
112
- --surface-info-bg: #082f49;
113
- --surface-info-border: #0c4a6e;
114
- --surface-info-text: #38bdf8;
115
- --surface-teal-bg: #042f2e;
116
- --surface-teal-border: #134e4a;
117
- --surface-teal-text: #2dd4bf;
118
- --surface-violet-bg: #1e1b4b;
119
- --surface-violet-border: #3730a3;
120
- --surface-violet-text: #B8B2F5;
121
- --surface-orange-bg: #431407;
122
- --surface-orange-border: #7c2d12;
123
- --surface-orange-text: #fb923c;
124
- --surface-neutral-bg: var(--depth-3);
125
- --surface-neutral-border: var(--border-subtle);
126
- --surface-neutral-text: var(--text-muted);
127
- --glass-bg: var(--depth-2);
128
- --glass-bg-strong: var(--depth-3);
129
- --glass-border: var(--border-subtle);
130
- --glass-border-hover: var(--border-default);
131
- --glass-blur: 0px;
132
- --mesh-teal: rgba(16, 185, 129, 0.05);
133
- --mesh-violet: rgba(99, 102, 241, 0.07);
134
- --mesh-blue: rgba(129, 140, 248, 0.04);
135
- --tangle-gradient: linear-gradient(135deg, #6366F1, #818CF8);
136
- --tangle-gradient-text: linear-gradient(135deg, #A5AAFC, #818CF8);
137
- --accent-gradient-strong: linear-gradient(135deg, #6366F1, #818CF8);
138
- --accent-surface-soft: rgba(99, 102, 241, 0.12);
139
- --accent-surface-strong: rgba(99, 102, 241, 0.20);
140
- --accent-text: #A5AAFC;
141
- --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(99, 102, 241, 0.08), transparent),
142
- radial-gradient(ellipse 50% 40% at 80% 10%, rgba(129, 140, 248, 0.06), transparent),
143
- linear-gradient(180deg, var(--depth-1), #0D0C1E 100%);
144
- --bg-dark: var(--depth-1);
145
- --bg-card: hsl(var(--hsl-card));
146
- --bg-elevated: hsl(246 28% 17%);
147
- --bg-section: hsl(246 28% 9%);
148
- --bg-input: hsl(var(--hsl-input));
149
- --bg-hover: rgba(99, 102, 241, 0.08);
150
- --bg-selection: rgba(99, 102, 241, 0.18);
151
- --text-primary: hsl(var(--hsl-foreground));
152
- --text-secondary: hsl(240 16% 85%);
153
- --text-muted: #8688B0;
154
- --text-dim: #606294;
155
- --brand-primary: #6366F1;
156
- --brand-strong: #2E2A5E;
157
- --brand-strong-text: #ffffff;
158
- --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
159
- --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
160
- --brand-cool: #818CF8;
161
- --brand-glow: #A5AAFC;
162
- --brand-purple: #C7D2FE;
163
- --brand-vibrant: #6366F1;
164
- --brand-emerald: #10B981;
165
- --border-subtle: rgba(100, 100, 148, 0.10);
166
- --border-default: rgba(100, 100, 148, 0.18);
167
- --border-hover: rgba(100, 100, 148, 0.28);
168
- --border-accent: rgba(99, 102, 241, 0.18);
169
- --border-accent-hover: rgba(99, 102, 241, 0.35);
170
- --btn-primary-bg: #6366F1;
171
- --btn-primary-hover: #818CF8;
172
- --btn-primary-text: #ffffff;
173
- --btn-cta-bg: #818CF8;
174
- --btn-cta-text: #FFFFFF;
175
- --code-keyword: #A5AAFC;
176
- --code-string: #34D399;
177
- --code-function: #6D9FFF;
178
- --code-number: #FFB347;
179
- --code-success: #10B981;
180
- --code-comment: #606294;
181
- --code-error: #FF4D6D;
182
- --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
183
- --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
184
- --shadow-glow: 0 0 32px rgba(99, 102, 241, 0.18);
185
- --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(99, 102, 241, 0.2);
186
- --shadow-status-running: 0 0 6px rgba(16, 185, 129, 0.5);
187
- --shadow-status-creating: 0 0 6px rgba(99, 102, 241, 0.5);
188
- --shadow-status-error: 0 0 6px rgba(255, 77, 109, 0.5);
189
- --radius-sm: 6px;
190
- --radius-md: 8px;
191
- --radius-lg: 12px;
192
- --radius-xl: 16px;
193
- --radius-pill: 999px;
194
- --radius-full: 999px;
195
- --radius: 0.625rem;
196
- --control-height: 2.25rem;
197
- --panel-padding: 1rem;
198
- --content-max-width: 80rem;
199
- --font-size-xs: 0.6875rem;
200
- --font-size-sm: 0.75rem;
201
- --font-size-base: 0.9375rem;
202
- --font-size-lg: 1rem;
203
- --font-size-xl: 1.25rem;
204
- --line-height-tight: 1.3;
205
- --line-height-base: 1.75;
206
- --line-height-relaxed: 1.8;
207
- --avatar-size: 2rem;
208
- --timeline-dot-size: 0.625rem;
209
- --indicator-dot-size: 0.25rem;
210
- --code-padding-x: 0.75rem;
211
- --code-padding-y: 0.625rem;
212
- --code-font-size: 0.8125rem;
213
- --code-line-height: 1.5;
214
- --chat-message-px: 0.875rem;
215
- --chat-message-py: 0.5rem;
216
- --chat-input-py: 0.625rem;
217
- --card-padding: 1.25rem;
218
- --tool-card-px: 0.75rem;
219
- --tool-card-py: 0.5rem;
220
- --tool-icon-size: 1.75rem;
221
- --syntax-comment: #6B7094;
222
- --syntax-keyword: #A78FFF;
223
- --syntax-string: #10b981;
224
- --syntax-function: #6D9FFF;
225
- --syntax-number: #FFB347;
226
- --syntax-meta: #8263FF;
227
- --syntax-error: #FF4D6D;
228
- --syntax-variable: #C4C0D8;
229
- --syntax-foreground: #E8E6F6;
230
- --transition-fast: 0.1s ease;
231
- --transition-default: 0.16s ease;
232
- --transition-medium: 0.24s ease;
233
- --font-sans: "Geist", "DM Sans", ui-sans-serif, system-ui, sans-serif;
234
- --font-display: "Outfit", "Geist", sans-serif;
235
- --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
236
- }
237
- [data-sandbox-theme="vault"] {
238
- --md3-surface: #f8f9fb;
239
- --md3-surface-dim: #d9dae0;
240
- --md3-surface-bright: #f8f9fb;
241
- --md3-surface-container-lowest: #ffffff;
242
- --md3-surface-container-low: #f3f4f7;
243
- --md3-surface-container: #edeef2;
244
- --md3-surface-container-high: #e7e8ed;
245
- --md3-surface-container-highest: #e1e2e8;
246
- --md3-surface-variant: #e1e2e8;
247
- --md3-on-surface: #191c24;
248
- --md3-on-surface-variant: #464858;
249
- --md3-primary: #3E349E;
250
- --md3-primary-dim: #352B88;
251
- --md3-primary-container: #352B88;
252
- --md3-on-primary: #ffffff;
253
- --md3-on-primary-container: #9B93F0;
254
- --md3-primary-fixed: #E8E5FF;
255
- --md3-primary-fixed-dim: #C5C0F0;
256
- --md3-secondary: #524A78;
257
- --md3-secondary-dim: #3E3660;
258
- --md3-secondary-container: #E8E5FF;
259
- --md3-on-secondary: #ffffff;
260
- --md3-on-secondary-container: #524A78;
261
- --md3-tertiary: #065F46;
262
- --md3-tertiary-container: #D1FAE5;
263
- --md3-outline: #6B6E8A;
264
- --md3-outline-variant: #C7C6D6;
265
- --md3-error: #ba1a1a;
266
- --md3-error-dim: #93000a;
267
- --md3-error-container: #ffdad6;
268
- --md3-on-error: #ffffff;
269
- --md3-on-error-container: #93000a;
270
- --md3-inverse-surface: #2e2e3e;
271
- --md3-inverse-primary: #A5AAFC;
272
- --md3-inverse-on-surface: #f0f1f4;
273
- --md3-surface-tint: #6366F1;
274
- --hsl-background: 225 20% 97%;
275
- --hsl-foreground: 228 20% 12%;
276
- --hsl-card: 0 0% 100%;
277
- --hsl-card-foreground: 228 20% 12%;
278
- --hsl-popover: 0 0% 100%;
279
- --hsl-popover-foreground: 228 20% 12%;
280
- --hsl-primary: 239 84% 67%;
281
- --hsl-primary-foreground: 0 0% 100%;
282
- --hsl-secondary: 242 22% 42%;
283
- --hsl-secondary-foreground: 0 0% 100%;
284
- --hsl-muted: 240 14% 89%;
285
- --hsl-muted-foreground: 240 10% 36%;
286
- --hsl-accent: 248 22% 86%;
287
- --hsl-accent-foreground: 248 38% 30%;
288
- --hsl-destructive: 0 72% 41%;
289
- --hsl-destructive-foreground: 0 0% 100%;
290
- --hsl-border: 244 14% 78%;
291
- --hsl-input: 244 12% 80%;
292
- --hsl-ring: 239 84% 67%;
293
- --hsl-success: 160 84% 30%;
294
- --hsl-warning: 41 96% 50%;
295
- --hsl-info: 212 80% 50%;
296
- --depth-1: #f4f4f9;
297
- --depth-2: #edecf4;
298
- --depth-3: #e5e4ee;
299
- --depth-4: #dcdbe8;
300
- --status-running: #059669;
301
- --status-creating: #3E349E;
302
- --status-stopped: #B45309;
303
- --status-warm: #C05621;
304
- --status-cold: #1D6FA4;
305
- --status-error: #ba1a1a;
306
- --status-deleted: #6B6B82;
307
- --glass-bg: var(--depth-2);
308
- --glass-bg-strong: var(--depth-1);
309
- --glass-border: var(--border-subtle);
310
- --glass-border-hover: var(--border-default);
311
- --surface-success-bg: #ecfdf5;
312
- --surface-success-border: #a7f3d0;
313
- --surface-success-text: #047857;
314
- --surface-warning-bg: #fffbeb;
315
- --surface-warning-border: #fde68a;
316
- --surface-warning-text: #b45309;
317
- --surface-danger-bg: #fff1f2;
318
- --surface-danger-border: #fecdd3;
319
- --surface-danger-text: #b91c1c;
320
- --surface-info-bg: #f0f9ff;
321
- --surface-info-border: #bae6fd;
322
- --surface-info-text: #0369a1;
323
- --surface-teal-bg: #f0fdfa;
324
- --surface-teal-border: #99f6e4;
325
- --surface-teal-text: #0f766e;
326
- --surface-violet-bg: #F0EEFF;
327
- --surface-violet-border: #C5C0F0;
328
- --surface-violet-text: #3E349E;
329
- --surface-orange-bg: #fff7ed;
330
- --surface-orange-border: #fed7aa;
331
- --surface-orange-text: #c2410c;
332
- --surface-neutral-bg: var(--depth-3);
333
- --surface-neutral-border: var(--border-subtle);
334
- --surface-neutral-text: var(--text-muted);
335
- --sidebar-background: 232 18% 96%;
336
- --sidebar-foreground: 228 20% 12%;
337
- --sidebar-primary: 239 84% 67%;
338
- --sidebar-primary-foreground: 0 0% 100%;
339
- --sidebar-accent: 240 18% 90%;
340
- --sidebar-accent-foreground: 240 38% 30%;
341
- --sidebar-border: 244 14% 78%;
342
- --sidebar-ring: 239 84% 67%;
343
- --mesh-teal: rgba(5, 150, 105, 0.04);
344
- --mesh-violet: rgba(99, 102, 241, 0.03);
345
- --mesh-blue: rgba(129, 140, 248, 0.03);
346
- --bg-root: #f4f4f9;
347
- --bg-dark: #edecf4;
348
- --bg-card: #ffffff;
349
- --bg-elevated: #e5e4ee;
350
- --bg-section: #edecf4;
351
- --bg-input: #edecf4;
352
- --bg-hover: rgba(99, 102, 241, 0.05);
353
- --bg-selection: rgba(99, 102, 241, 0.10);
354
- --text-primary: #191c24;
355
- --text-secondary: #3a3a50;
356
- --text-muted: #5E5E7A;
357
- --text-dim: #A0A0B8;
358
- --brand-primary: #6366F1;
359
- --brand-strong: #2E2A5E;
360
- --brand-strong-text: #ffffff;
361
- --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
362
- --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
363
- --brand-cool: #818CF8;
364
- --brand-glow: #A5AAFC;
365
- --brand-purple: #6366F1;
366
- --brand-vibrant: #6366F1;
367
- --brand-emerald: #059669;
368
- --border-subtle: rgba(110, 108, 148, 0.20);
369
- --border-default: rgba(110, 108, 148, 0.35);
370
- --border-hover: rgba(110, 108, 148, 0.50);
371
- --border-accent: rgba(99, 102, 241, 0.15);
372
- --border-accent-hover: rgba(99, 102, 241, 0.30);
373
- --btn-primary-bg: #6366F1;
374
- --btn-primary-hover: #4F46E5;
375
- --btn-primary-text: #ffffff;
376
- --btn-cta-bg: #6366F1;
377
- --btn-cta-text: #ffffff;
378
- --code-keyword: #3E349E;
379
- --code-string: #059669;
380
- --code-function: #352B88;
381
- --code-number: #B45309;
382
- --code-success: #059669;
383
- --code-comment: #6B6E8A;
384
- --code-error: #ba1a1a;
385
- --shadow-card: 0 1px 3px rgba(25, 28, 36, 0.05), 0 0 0 1px rgba(200, 198, 218, 0.22);
386
- --shadow-dropdown: 0 8px 32px rgba(25, 28, 36, 0.10), 0 0 0 1px rgba(200, 198, 218, 0.28);
387
- --shadow-glow: none;
388
- --shadow-accent: 0 1px 3px rgba(25, 28, 36, 0.05), 0 0 0 1px rgba(99, 102, 241, 0.15);
389
- --tangle-gradient: linear-gradient(135deg, #6366F1, #818CF8);
390
- --tangle-gradient-text: linear-gradient(135deg, #4F46E5, #6366F1);
391
- --accent-gradient-strong: linear-gradient(135deg, #6366F1, #818CF8);
392
- --accent-surface-soft: rgba(99, 102, 241, 0.06);
393
- --accent-surface-strong: rgba(99, 102, 241, 0.12);
394
- --accent-text: #4F46E5;
395
- --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, sans-serif;
396
- --font-display: "Manrope", "Inter", sans-serif;
397
- --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
398
- --radius: 0.375rem;
399
- --radius-sm: 2px;
400
- --radius-md: 4px;
401
- --radius-lg: 6px;
402
- --radius-xl: 8px;
403
- --radius-pill: 999px;
404
- --radius-full: 999px;
405
- }
406
3
  @layer theme, base, components, utilities;
407
4
  @layer theme {
408
5
  :root, :host {
@@ -686,6 +283,9 @@
686
283
  .relative {
687
284
  position: relative;
688
285
  }
286
+ .static {
287
+ position: static;
288
+ }
689
289
  .sticky {
690
290
  position: sticky;
691
291
  }
@@ -4431,6 +4031,410 @@
4431
4031
  }
4432
4032
  }
4433
4033
  }
4034
+ :root,
4035
+ [data-sandbox-ui] {
4036
+ --md3-surface: #0a0a14;
4037
+ --md3-surface-dim: #07070d;
4038
+ --md3-surface-bright: #1b1a2c;
4039
+ --md3-surface-container-lowest: #000001;
4040
+ --md3-surface-container-low: #0d0c18;
4041
+ --md3-surface-container: #11101e;
4042
+ --md3-surface-container-high: #171624;
4043
+ --md3-surface-container-highest: #1f1e30;
4044
+ --md3-surface-variant: #1f1e30;
4045
+ --md3-on-surface: #fdfdfd;
4046
+ --md3-on-surface-variant: #aaa8b8;
4047
+ --md3-primary: #818CF8;
4048
+ --md3-primary-dim: #6366F1;
4049
+ --md3-primary-container: #4F46E5;
4050
+ --md3-on-primary: #ffffff;
4051
+ --md3-on-primary-container: #E0E7FF;
4052
+ --md3-primary-fixed: #A5AAFC;
4053
+ --md3-primary-fixed-dim: #818CF8;
4054
+ --md3-secondary: #C7D2FE;
4055
+ --md3-secondary-dim: #A5B4FC;
4056
+ --md3-secondary-container: #312E81;
4057
+ --md3-on-secondary: #E8E5FF;
4058
+ --md3-on-secondary-container: #E8E5FF;
4059
+ --md3-tertiary: #10B981;
4060
+ --md3-outline: #434260;
4061
+ --md3-outline-variant: #2A293D;
4062
+ --md3-error: #ff5277;
4063
+ --md3-error-dim: #eb2855;
4064
+ --md3-error-container: #82042b;
4065
+ --md3-on-error: #ffffff;
4066
+ --md3-on-error-container: #ffbdf2;
4067
+ --md3-inverse-surface: #fdfdfd;
4068
+ --md3-inverse-primary: #4F46E5;
4069
+ --md3-inverse-on-surface: #000000;
4070
+ --md3-surface-tint: #818CF8;
4071
+ --hsl-background: 244 28% 5%;
4072
+ --hsl-foreground: 240 18% 94%;
4073
+ --hsl-card: 246 30% 11%;
4074
+ --hsl-card-foreground: 240 18% 94%;
4075
+ --hsl-popover: 246 28% 14%;
4076
+ --hsl-popover-foreground: 240 18% 94%;
4077
+ --hsl-primary: 239 84% 67%;
4078
+ --hsl-primary-foreground: 0 0% 100%;
4079
+ --hsl-secondary: 248 24% 18%;
4080
+ --hsl-secondary-foreground: 240 16% 90%;
4081
+ --hsl-muted: 246 22% 15%;
4082
+ --hsl-muted-foreground: 240 14% 58%;
4083
+ --hsl-accent: 248 26% 20%;
4084
+ --hsl-accent-foreground: 240 16% 92%;
4085
+ --hsl-destructive: 348 90% 60%;
4086
+ --hsl-destructive-foreground: 0 0% 100%;
4087
+ --hsl-border: 244 14% 22%;
4088
+ --hsl-input: 246 28% 14%;
4089
+ --hsl-ring: 239 84% 67%;
4090
+ --hsl-success: 160 84% 39%;
4091
+ --hsl-warning: 40 94% 56%;
4092
+ --hsl-info: 200 88% 56%;
4093
+ --background: var(--hsl-background);
4094
+ --foreground: var(--hsl-foreground);
4095
+ --card: var(--hsl-card);
4096
+ --card-foreground: var(--hsl-card-foreground);
4097
+ --popover: var(--hsl-popover);
4098
+ --popover-foreground: var(--hsl-popover-foreground);
4099
+ --primary: var(--hsl-primary);
4100
+ --primary-foreground: var(--hsl-primary-foreground);
4101
+ --secondary: var(--hsl-secondary);
4102
+ --secondary-foreground: var(--hsl-secondary-foreground);
4103
+ --muted: var(--hsl-muted);
4104
+ --muted-foreground: var(--hsl-muted-foreground);
4105
+ --accent: var(--hsl-accent);
4106
+ --accent-foreground: var(--hsl-accent-foreground);
4107
+ --destructive: var(--hsl-destructive);
4108
+ --destructive-foreground: var(--hsl-destructive-foreground);
4109
+ --border: var(--hsl-border);
4110
+ --input: var(--hsl-input);
4111
+ --ring: var(--hsl-ring);
4112
+ --success: var(--hsl-success);
4113
+ --warning: var(--hsl-warning);
4114
+ --error: var(--hsl-destructive);
4115
+ --info: var(--hsl-info);
4116
+ --sidebar-background: 244 28% 5%;
4117
+ --sidebar-foreground: 240 18% 94%;
4118
+ --sidebar-primary: 239 84% 67%;
4119
+ --sidebar-primary-foreground: 0 0% 100%;
4120
+ --sidebar-accent: 248 26% 20%;
4121
+ --sidebar-accent-foreground: 240 16% 92%;
4122
+ --sidebar-border: 244 14% 17%;
4123
+ --sidebar-ring: 239 84% 67%;
4124
+ --depth-1: #0C0B1D;
4125
+ --depth-2: #141328;
4126
+ --depth-3: #1D1B38;
4127
+ --depth-4: #262448;
4128
+ --status-running: #10B981;
4129
+ --status-creating: #9B93F0;
4130
+ --status-stopped: #FFB800;
4131
+ --status-warm: #FF8A4C;
4132
+ --status-cold: #4AABFF;
4133
+ --status-error: #FF4D6D;
4134
+ --status-deleted: #6B7094;
4135
+ --surface-success-bg: #022c22;
4136
+ --surface-success-border: #14532d;
4137
+ --surface-success-text: #34D399;
4138
+ --surface-warning-bg: #451a03;
4139
+ --surface-warning-border: #78350f;
4140
+ --surface-warning-text: #fbbf24;
4141
+ --surface-danger-bg: #450a0a;
4142
+ --surface-danger-border: #7f1d1d;
4143
+ --surface-danger-text: #f87171;
4144
+ --surface-info-bg: #082f49;
4145
+ --surface-info-border: #0c4a6e;
4146
+ --surface-info-text: #38bdf8;
4147
+ --surface-teal-bg: #042f2e;
4148
+ --surface-teal-border: #134e4a;
4149
+ --surface-teal-text: #2dd4bf;
4150
+ --surface-violet-bg: #1e1b4b;
4151
+ --surface-violet-border: #3730a3;
4152
+ --surface-violet-text: #B8B2F5;
4153
+ --surface-orange-bg: #431407;
4154
+ --surface-orange-border: #7c2d12;
4155
+ --surface-orange-text: #fb923c;
4156
+ --surface-neutral-bg: var(--depth-3);
4157
+ --surface-neutral-border: var(--border-subtle);
4158
+ --surface-neutral-text: var(--text-muted);
4159
+ --glass-bg: var(--depth-2);
4160
+ --glass-bg-strong: var(--depth-3);
4161
+ --glass-border: var(--border-subtle);
4162
+ --glass-border-hover: var(--border-default);
4163
+ --glass-blur: 0px;
4164
+ --mesh-teal: rgba(16, 185, 129, 0.05);
4165
+ --mesh-violet: rgba(99, 102, 241, 0.07);
4166
+ --mesh-blue: rgba(129, 140, 248, 0.04);
4167
+ --tangle-gradient: linear-gradient(135deg, #6366F1, #818CF8);
4168
+ --tangle-gradient-text: linear-gradient(135deg, #A5AAFC, #818CF8);
4169
+ --accent-gradient-strong: linear-gradient(135deg, #6366F1, #818CF8);
4170
+ --accent-surface-soft: rgba(99, 102, 241, 0.12);
4171
+ --accent-surface-strong: rgba(99, 102, 241, 0.20);
4172
+ --accent-text: #A5AAFC;
4173
+ --bg-root: radial-gradient(ellipse 70% 50% at 20% 0%, rgba(99, 102, 241, 0.08), transparent),
4174
+ radial-gradient(ellipse 50% 40% at 80% 10%, rgba(129, 140, 248, 0.06), transparent),
4175
+ linear-gradient(180deg, var(--depth-1), #0D0C1E 100%);
4176
+ --bg-dark: var(--depth-1);
4177
+ --bg-card: hsl(var(--hsl-card));
4178
+ --bg-elevated: hsl(246 28% 17%);
4179
+ --bg-section: hsl(246 28% 9%);
4180
+ --bg-input: hsl(var(--hsl-input));
4181
+ --bg-hover: rgba(99, 102, 241, 0.08);
4182
+ --bg-selection: rgba(99, 102, 241, 0.18);
4183
+ --text-primary: hsl(var(--hsl-foreground));
4184
+ --text-secondary: hsl(240 16% 85%);
4185
+ --text-muted: #8688B0;
4186
+ --text-dim: #606294;
4187
+ --brand-primary: #6366F1;
4188
+ --brand-strong: #2E2A5E;
4189
+ --brand-strong-text: #ffffff;
4190
+ --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
4191
+ --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
4192
+ --brand-cool: #818CF8;
4193
+ --brand-glow: #A5AAFC;
4194
+ --brand-purple: #C7D2FE;
4195
+ --brand-vibrant: #6366F1;
4196
+ --brand-emerald: #10B981;
4197
+ --border-subtle: rgba(100, 100, 148, 0.10);
4198
+ --border-default: rgba(100, 100, 148, 0.18);
4199
+ --border-hover: rgba(100, 100, 148, 0.28);
4200
+ --border-accent: rgba(99, 102, 241, 0.18);
4201
+ --border-accent-hover: rgba(99, 102, 241, 0.35);
4202
+ --btn-primary-bg: #6366F1;
4203
+ --btn-primary-hover: #818CF8;
4204
+ --btn-primary-text: #ffffff;
4205
+ --btn-cta-bg: #818CF8;
4206
+ --btn-cta-text: #FFFFFF;
4207
+ --code-keyword: #A5AAFC;
4208
+ --code-string: #34D399;
4209
+ --code-function: #6D9FFF;
4210
+ --code-number: #FFB347;
4211
+ --code-success: #10B981;
4212
+ --code-comment: #606294;
4213
+ --code-error: #FF4D6D;
4214
+ --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.04);
4215
+ --shadow-dropdown: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.06);
4216
+ --shadow-glow: 0 0 32px rgba(99, 102, 241, 0.18);
4217
+ --shadow-accent: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(99, 102, 241, 0.2);
4218
+ --shadow-status-running: 0 0 6px rgba(16, 185, 129, 0.5);
4219
+ --shadow-status-creating: 0 0 6px rgba(99, 102, 241, 0.5);
4220
+ --shadow-status-error: 0 0 6px rgba(255, 77, 109, 0.5);
4221
+ --radius-sm: 6px;
4222
+ --radius-md: 8px;
4223
+ --radius-lg: 12px;
4224
+ --radius-xl: 16px;
4225
+ --radius-pill: 999px;
4226
+ --radius-full: 999px;
4227
+ --radius: 0.625rem;
4228
+ --control-height: 2.25rem;
4229
+ --panel-padding: 1rem;
4230
+ --content-max-width: 80rem;
4231
+ --font-size-xs: 0.6875rem;
4232
+ --font-size-sm: 0.75rem;
4233
+ --font-size-base: 0.9375rem;
4234
+ --font-size-lg: 1rem;
4235
+ --font-size-xl: 1.25rem;
4236
+ --line-height-tight: 1.3;
4237
+ --line-height-base: 1.75;
4238
+ --line-height-relaxed: 1.8;
4239
+ --avatar-size: 2rem;
4240
+ --timeline-dot-size: 0.625rem;
4241
+ --indicator-dot-size: 0.25rem;
4242
+ --code-padding-x: 0.75rem;
4243
+ --code-padding-y: 0.625rem;
4244
+ --code-font-size: 0.8125rem;
4245
+ --code-line-height: 1.5;
4246
+ --chat-message-px: 0.875rem;
4247
+ --chat-message-py: 0.5rem;
4248
+ --chat-input-py: 0.625rem;
4249
+ --card-padding: 1.25rem;
4250
+ --tool-card-px: 0.75rem;
4251
+ --tool-card-py: 0.5rem;
4252
+ --tool-icon-size: 1.75rem;
4253
+ --syntax-comment: #6B7094;
4254
+ --syntax-keyword: #A78FFF;
4255
+ --syntax-string: #10b981;
4256
+ --syntax-function: #6D9FFF;
4257
+ --syntax-number: #FFB347;
4258
+ --syntax-meta: #8263FF;
4259
+ --syntax-error: #FF4D6D;
4260
+ --syntax-variable: #C4C0D8;
4261
+ --syntax-foreground: #E8E6F6;
4262
+ --transition-fast: 0.1s ease;
4263
+ --transition-default: 0.16s ease;
4264
+ --transition-medium: 0.24s ease;
4265
+ --font-sans: "Geist", "DM Sans", ui-sans-serif, system-ui, sans-serif;
4266
+ --font-display: "Outfit", "Geist", sans-serif;
4267
+ --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
4268
+ }
4269
+ [data-sandbox-theme="vault"] {
4270
+ --md3-surface: #f8f9fb;
4271
+ --md3-surface-dim: #d9dae0;
4272
+ --md3-surface-bright: #f8f9fb;
4273
+ --md3-surface-container-lowest: #ffffff;
4274
+ --md3-surface-container-low: #f3f4f7;
4275
+ --md3-surface-container: #edeef2;
4276
+ --md3-surface-container-high: #e7e8ed;
4277
+ --md3-surface-container-highest: #e1e2e8;
4278
+ --md3-surface-variant: #e1e2e8;
4279
+ --md3-on-surface: #191c24;
4280
+ --md3-on-surface-variant: #464858;
4281
+ --md3-primary: #3E349E;
4282
+ --md3-primary-dim: #352B88;
4283
+ --md3-primary-container: #352B88;
4284
+ --md3-on-primary: #ffffff;
4285
+ --md3-on-primary-container: #9B93F0;
4286
+ --md3-primary-fixed: #E8E5FF;
4287
+ --md3-primary-fixed-dim: #C5C0F0;
4288
+ --md3-secondary: #524A78;
4289
+ --md3-secondary-dim: #3E3660;
4290
+ --md3-secondary-container: #E8E5FF;
4291
+ --md3-on-secondary: #ffffff;
4292
+ --md3-on-secondary-container: #524A78;
4293
+ --md3-tertiary: #065F46;
4294
+ --md3-tertiary-container: #D1FAE5;
4295
+ --md3-outline: #6B6E8A;
4296
+ --md3-outline-variant: #C7C6D6;
4297
+ --md3-error: #ba1a1a;
4298
+ --md3-error-dim: #93000a;
4299
+ --md3-error-container: #ffdad6;
4300
+ --md3-on-error: #ffffff;
4301
+ --md3-on-error-container: #93000a;
4302
+ --md3-inverse-surface: #2e2e3e;
4303
+ --md3-inverse-primary: #A5AAFC;
4304
+ --md3-inverse-on-surface: #f0f1f4;
4305
+ --md3-surface-tint: #6366F1;
4306
+ --hsl-background: 225 20% 97%;
4307
+ --hsl-foreground: 228 20% 12%;
4308
+ --hsl-card: 0 0% 100%;
4309
+ --hsl-card-foreground: 228 20% 12%;
4310
+ --hsl-popover: 0 0% 100%;
4311
+ --hsl-popover-foreground: 228 20% 12%;
4312
+ --hsl-primary: 239 84% 67%;
4313
+ --hsl-primary-foreground: 0 0% 100%;
4314
+ --hsl-secondary: 242 22% 42%;
4315
+ --hsl-secondary-foreground: 0 0% 100%;
4316
+ --hsl-muted: 240 14% 89%;
4317
+ --hsl-muted-foreground: 240 10% 36%;
4318
+ --hsl-accent: 248 22% 86%;
4319
+ --hsl-accent-foreground: 248 38% 30%;
4320
+ --hsl-destructive: 0 72% 41%;
4321
+ --hsl-destructive-foreground: 0 0% 100%;
4322
+ --hsl-border: 244 14% 78%;
4323
+ --hsl-input: 244 12% 80%;
4324
+ --hsl-ring: 239 84% 67%;
4325
+ --hsl-success: 160 84% 30%;
4326
+ --hsl-warning: 41 96% 50%;
4327
+ --hsl-info: 212 80% 50%;
4328
+ --depth-1: #f4f4f9;
4329
+ --depth-2: #edecf4;
4330
+ --depth-3: #e5e4ee;
4331
+ --depth-4: #dcdbe8;
4332
+ --status-running: #059669;
4333
+ --status-creating: #3E349E;
4334
+ --status-stopped: #B45309;
4335
+ --status-warm: #C05621;
4336
+ --status-cold: #1D6FA4;
4337
+ --status-error: #ba1a1a;
4338
+ --status-deleted: #6B6B82;
4339
+ --glass-bg: var(--depth-2);
4340
+ --glass-bg-strong: var(--depth-1);
4341
+ --glass-border: var(--border-subtle);
4342
+ --glass-border-hover: var(--border-default);
4343
+ --surface-success-bg: #ecfdf5;
4344
+ --surface-success-border: #a7f3d0;
4345
+ --surface-success-text: #047857;
4346
+ --surface-warning-bg: #fffbeb;
4347
+ --surface-warning-border: #fde68a;
4348
+ --surface-warning-text: #b45309;
4349
+ --surface-danger-bg: #fff1f2;
4350
+ --surface-danger-border: #fecdd3;
4351
+ --surface-danger-text: #b91c1c;
4352
+ --surface-info-bg: #f0f9ff;
4353
+ --surface-info-border: #bae6fd;
4354
+ --surface-info-text: #0369a1;
4355
+ --surface-teal-bg: #f0fdfa;
4356
+ --surface-teal-border: #99f6e4;
4357
+ --surface-teal-text: #0f766e;
4358
+ --surface-violet-bg: #F0EEFF;
4359
+ --surface-violet-border: #C5C0F0;
4360
+ --surface-violet-text: #3E349E;
4361
+ --surface-orange-bg: #fff7ed;
4362
+ --surface-orange-border: #fed7aa;
4363
+ --surface-orange-text: #c2410c;
4364
+ --surface-neutral-bg: var(--depth-3);
4365
+ --surface-neutral-border: var(--border-subtle);
4366
+ --surface-neutral-text: var(--text-muted);
4367
+ --sidebar-background: 232 18% 96%;
4368
+ --sidebar-foreground: 228 20% 12%;
4369
+ --sidebar-primary: 239 84% 67%;
4370
+ --sidebar-primary-foreground: 0 0% 100%;
4371
+ --sidebar-accent: 240 18% 90%;
4372
+ --sidebar-accent-foreground: 240 38% 30%;
4373
+ --sidebar-border: 244 14% 78%;
4374
+ --sidebar-ring: 239 84% 67%;
4375
+ --mesh-teal: rgba(5, 150, 105, 0.04);
4376
+ --mesh-violet: rgba(99, 102, 241, 0.03);
4377
+ --mesh-blue: rgba(129, 140, 248, 0.03);
4378
+ --bg-root: #f4f4f9;
4379
+ --bg-dark: #edecf4;
4380
+ --bg-card: #ffffff;
4381
+ --bg-elevated: #e5e4ee;
4382
+ --bg-section: #edecf4;
4383
+ --bg-input: #edecf4;
4384
+ --bg-hover: rgba(99, 102, 241, 0.05);
4385
+ --bg-selection: rgba(99, 102, 241, 0.10);
4386
+ --text-primary: #191c24;
4387
+ --text-secondary: #3a3a50;
4388
+ --text-muted: #5E5E7A;
4389
+ --text-dim: #A0A0B8;
4390
+ --brand-primary: #6366F1;
4391
+ --brand-strong: #2E2A5E;
4392
+ --brand-strong-text: #ffffff;
4393
+ --brand-strong-text-muted: rgba(255, 255, 255, 0.7);
4394
+ --brand-strong-text-dim: rgba(255, 255, 255, 0.5);
4395
+ --brand-cool: #818CF8;
4396
+ --brand-glow: #A5AAFC;
4397
+ --brand-purple: #6366F1;
4398
+ --brand-vibrant: #6366F1;
4399
+ --brand-emerald: #059669;
4400
+ --border-subtle: rgba(110, 108, 148, 0.20);
4401
+ --border-default: rgba(110, 108, 148, 0.35);
4402
+ --border-hover: rgba(110, 108, 148, 0.50);
4403
+ --border-accent: rgba(99, 102, 241, 0.15);
4404
+ --border-accent-hover: rgba(99, 102, 241, 0.30);
4405
+ --btn-primary-bg: #6366F1;
4406
+ --btn-primary-hover: #4F46E5;
4407
+ --btn-primary-text: #ffffff;
4408
+ --btn-cta-bg: #6366F1;
4409
+ --btn-cta-text: #ffffff;
4410
+ --code-keyword: #3E349E;
4411
+ --code-string: #059669;
4412
+ --code-function: #352B88;
4413
+ --code-number: #B45309;
4414
+ --code-success: #059669;
4415
+ --code-comment: #6B6E8A;
4416
+ --code-error: #ba1a1a;
4417
+ --shadow-card: 0 1px 3px rgba(25, 28, 36, 0.05), 0 0 0 1px rgba(200, 198, 218, 0.22);
4418
+ --shadow-dropdown: 0 8px 32px rgba(25, 28, 36, 0.10), 0 0 0 1px rgba(200, 198, 218, 0.28);
4419
+ --shadow-glow: none;
4420
+ --shadow-accent: 0 1px 3px rgba(25, 28, 36, 0.05), 0 0 0 1px rgba(99, 102, 241, 0.15);
4421
+ --tangle-gradient: linear-gradient(135deg, #6366F1, #818CF8);
4422
+ --tangle-gradient-text: linear-gradient(135deg, #4F46E5, #6366F1);
4423
+ --accent-gradient-strong: linear-gradient(135deg, #6366F1, #818CF8);
4424
+ --accent-surface-soft: rgba(99, 102, 241, 0.06);
4425
+ --accent-surface-strong: rgba(99, 102, 241, 0.12);
4426
+ --accent-text: #4F46E5;
4427
+ --font-sans: "Inter", "Geist", ui-sans-serif, system-ui, sans-serif;
4428
+ --font-display: "Manrope", "Inter", sans-serif;
4429
+ --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;
4430
+ --radius: 0.375rem;
4431
+ --radius-sm: 2px;
4432
+ --radius-md: 4px;
4433
+ --radius-lg: 6px;
4434
+ --radius-xl: 8px;
4435
+ --radius-pill: 999px;
4436
+ --radius-full: 999px;
4437
+ }
4434
4438
  @layer base {
4435
4439
  :root {
4436
4440
  --sandbox: var(--primary);