@tangle-network/sandbox-ui 0.66.0 → 0.68.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 (9) hide show
  1. package/dist/chat.d.ts +1 -1
  2. package/dist/chat.js +1 -3
  3. package/dist/{chunk-ZR3UHRGW.js → chunk-XL573ZOV.js} +0 -2
  4. package/dist/globals.css +35 -163
  5. package/dist/index.d.ts +1 -1
  6. package/dist/index.js +1 -3
  7. package/dist/styles.css +35 -163
  8. package/dist/tokens.css +28 -28
  9. package/package.json +5 -5
package/dist/chat.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { MessageRole } from '@tangle-network/ui/chat';
2
- export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatInput, ChatInputProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, PendingFile, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from '@tangle-network/ui/chat';
2
+ export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from '@tangle-network/ui/chat';
3
3
  import * as react_jsx_runtime from 'react/jsx-runtime';
4
4
  import { ReasoningEffort, HarnessType } from '@tangle-network/agent-interface';
5
5
  export { modelProvider, snapHarnessToModel } from '@tangle-network/agent-interface';
package/dist/chat.js CHANGED
@@ -5,7 +5,6 @@ import {
5
5
  AgentTimeline,
6
6
  ArtifactAgentDock,
7
7
  ChatContainer,
8
- ChatInput,
9
8
  ChatMessage,
10
9
  DEFAULT_REASONING_LEVEL_OPTIONS,
11
10
  HARNESS_REASONING_OPTIONS,
@@ -18,7 +17,7 @@ import {
18
17
  modelProvider,
19
18
  snapHarnessToModel,
20
19
  snapModelToHarness
21
- } from "./chunk-ZR3UHRGW.js";
20
+ } from "./chunk-XL573ZOV.js";
22
21
  import "./chunk-HU4B2M4K.js";
23
22
  import "./chunk-SF6LPMMN.js";
24
23
  import "./chunk-EI44GEQ5.js";
@@ -30,7 +29,6 @@ export {
30
29
  AgentTimeline,
31
30
  ArtifactAgentDock,
32
31
  ChatContainer,
33
- ChatInput,
34
32
  ChatMessage,
35
33
  DEFAULT_REASONING_LEVEL_OPTIONS,
36
34
  HARNESS_REASONING_OPTIONS,
package/dist/{chunk-ZR3UHRGW.js → chunk-XL573ZOV.js} RENAMED
@@ -15,7 +15,6 @@ import {
15
15
  import {
16
16
  AgentTimeline,
17
17
  ChatContainer,
18
- ChatInput,
19
18
  ChatMessage as ChatMessage2,
20
19
  MessageList,
21
20
  ThinkingIndicator,
@@ -1554,7 +1553,6 @@ export {
1554
1553
  createFetchTransport,
1555
1554
  AgentTimeline,
1556
1555
  ChatContainer,
1557
- ChatInput,
1558
1556
  ChatMessage2 as ChatMessage,
1559
1557
  MessageList,
1560
1558
  ThinkingIndicator,
package/dist/globals.css CHANGED
@@ -500,9 +500,6 @@
500
500
  .my-2 {
501
501
  margin-block: calc(var(--spacing) * 2);
502
502
  }
503
- .my-3 {
504
- margin-block: calc(var(--spacing) * 3);
505
- }
506
503
  .my-4 {
507
504
  margin-block: calc(var(--spacing) * 4);
508
505
  }
@@ -665,6 +662,10 @@
665
662
  .aspect-square {
666
663
  aspect-ratio: 1 / 1;
667
664
  }
665
+ .size-2 {
666
+ width: calc(var(--spacing) * 2);
667
+ height: calc(var(--spacing) * 2);
668
+ }
668
669
  .size-3 {
669
670
  width: calc(var(--spacing) * 3);
670
671
  height: calc(var(--spacing) * 3);
@@ -849,9 +850,6 @@
849
850
  .max-h-\[90vh\] {
850
851
  max-height: 90vh;
851
852
  }
852
- .max-h-\[160px\] {
853
- max-height: 160px;
854
- }
855
853
  .max-h-\[min\(60vh\,420px\)\] {
856
854
  max-height: min(60vh, 420px);
857
855
  }
@@ -888,9 +886,6 @@
888
886
  .min-h-\[38px\] {
889
887
  min-height: 38px;
890
888
  }
891
- .min-h-\[42px\] {
892
- min-height: 42px;
893
- }
894
889
  .min-h-\[44px\] {
895
890
  min-height: 44px;
896
891
  }
@@ -1700,9 +1695,6 @@
1700
1695
  .rounded-\[28px\] {
1701
1696
  border-radius: 28px;
1702
1697
  }
1703
- .rounded-\[calc\(var\(--radius-md\)\+2px\)\] {
1704
- border-radius: calc(var(--radius-md) + 2px);
1705
- }
1706
1698
  .rounded-\[calc\(var\(--radius-xl\)\+2px\)\] {
1707
1699
  border-radius: calc(var(--radius-xl) + 2px);
1708
1700
  }
@@ -1849,24 +1841,12 @@
1849
1841
  border-color: color-mix(in oklab, var(--brand-emerald) 50%, transparent);
1850
1842
  }
1851
1843
  }
1852
- .border-\[var\(--chat-input-border\,var\(--border-default\)\)\] {
1853
- border-color: var(--chat-input-border,var(--border-default));
1854
- }
1855
- .border-\[var\(--chat-send-border\,var\(--border-accent\)\)\] {
1856
- border-color: var(--chat-send-border,var(--border-accent));
1857
- }
1858
1844
  .border-\[var\(--code-error\)\]\/20 {
1859
1845
  border-color: var(--code-error);
1860
1846
  @supports (color: color-mix(in lab, red, red)) {
1861
1847
  border-color: color-mix(in oklab, var(--code-error) 20%, transparent);
1862
1848
  }
1863
1849
  }
1864
- .border-\[var\(--code-error\)\]\/30 {
1865
- border-color: var(--code-error);
1866
- @supports (color: color-mix(in lab, red, red)) {
1867
- border-color: color-mix(in oklab, var(--code-error) 30%, transparent);
1868
- }
1869
- }
1870
1850
  .border-\[var\(--code-number\)\]\/20 {
1871
1851
  border-color: var(--code-number);
1872
1852
  @supports (color: color-mix(in lab, red, red)) {
@@ -1903,12 +1883,6 @@
1903
1883
  .border-\[var\(--surface-danger-border\)\] {
1904
1884
  border-color: var(--surface-danger-border);
1905
1885
  }
1906
- .border-\[var\(--surface-danger-border\)\]\/60 {
1907
- border-color: var(--surface-danger-border);
1908
- @supports (color: color-mix(in lab, red, red)) {
1909
- border-color: color-mix(in oklab, var(--surface-danger-border) 60%, transparent);
1910
- }
1911
- }
1912
1886
  .border-\[var\(--surface-info-border\)\] {
1913
1887
  border-color: var(--surface-info-border);
1914
1888
  }
@@ -1933,9 +1907,6 @@
1933
1907
  .border-background {
1934
1908
  border-color: var(--color-background);
1935
1909
  }
1936
- .border-blue-400 {
1937
- border-color: var(--color-blue-400);
1938
- }
1939
1910
  .border-blue-500\/30 {
1940
1911
  border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 30%, transparent);
1941
1912
  @supports (color: color-mix(in lab, red, red)) {
@@ -2095,6 +2066,9 @@
2095
2066
  .\!bg-transparent {
2096
2067
  background-color: transparent !important;
2097
2068
  }
2069
+ .bg-\[\#0a0a0c\] {
2070
+ background-color: #0a0a0c;
2071
+ }
2098
2072
  .bg-\[color-mix\(in_oklch\,var\(--color-warning\,orange\)_18\%\,transparent\)\] {
2099
2073
  background-color: var(--color-warning,orange);
2100
2074
  @supports (color: color-mix(in lab, red, red)) {
@@ -2170,12 +2144,6 @@
2170
2144
  background-color: color-mix(in oklab, var(--code-error) 5%, transparent);
2171
2145
  }
2172
2146
  }
2173
- .bg-\[var\(--code-error\)\]\/14 {
2174
- background-color: var(--code-error);
2175
- @supports (color: color-mix(in lab, red, red)) {
2176
- background-color: color-mix(in oklab, var(--code-error) 14%, transparent);
2177
- }
2178
- }
2179
2147
  .bg-\[var\(--code-number\)\] {
2180
2148
  background-color: var(--code-number);
2181
2149
  }
@@ -2290,12 +2258,6 @@
2290
2258
  .bg-blue-500 {
2291
2259
  background-color: var(--color-blue-500);
2292
2260
  }
2293
- .bg-blue-500\/8 {
2294
- background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 8%, transparent);
2295
- @supports (color: color-mix(in lab, red, red)) {
2296
- background-color: color-mix(in oklab, var(--color-blue-500) 8%, transparent);
2297
- }
2298
- }
2299
2261
  .bg-blue-500\/15 {
2300
2262
  background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 15%, transparent);
2301
2263
  @supports (color: color-mix(in lab, red, red)) {
@@ -2576,9 +2538,6 @@
2576
2538
  .bg-\[linear-gradient\(180deg\,rgba\(255\,255\,255\,0\.03\)\,transparent\)\] {
2577
2539
  background-image: linear-gradient(180deg,rgba(255,255,255,0.03),transparent);
2578
2540
  }
2579
- .bg-\[linear-gradient\(180deg\,rgba\(255\,255\,255\,0\.04\)\,transparent\)\] {
2580
- background-image: linear-gradient(180deg,rgba(255,255,255,0.04),transparent);
2581
- }
2582
2541
  .from-white\/5 {
2583
2542
  --tw-gradient-from: color-mix(in srgb, #fff 5%, transparent);
2584
2543
  @supports (color: color-mix(in lab, red, red)) {
@@ -2746,9 +2705,6 @@
2746
2705
  .py-\[2px\] {
2747
2706
  padding-block: 2px;
2748
2707
  }
2749
- .py-\[var\(--chat-input-py\)\] {
2750
- padding-block: var(--chat-input-py);
2751
- }
2752
2708
  .py-\[var\(--chat-message-py\)\] {
2753
2709
  padding-block: var(--chat-message-py);
2754
2710
  }
@@ -3025,10 +2981,6 @@
3025
2981
  --tw-leading: var(--leading-tight);
3026
2982
  line-height: var(--leading-tight);
3027
2983
  }
3028
- .font-\[var\(--chat-label-weight\,600\)\] {
3029
- --tw-font-weight: var(--chat-label-weight,600);
3030
- font-weight: var(--chat-label-weight,600);
3031
- }
3032
2984
  .font-\[var\(--font-display\)\] {
3033
2985
  --tw-font-weight: var(--font-display);
3034
2986
  font-weight: var(--font-display);
@@ -3089,14 +3041,6 @@
3089
3041
  --tw-tracking: 0.18em;
3090
3042
  letter-spacing: 0.18em;
3091
3043
  }
3092
- .tracking-\[var\(--chat-label-tracking\,0\.14em\)\] {
3093
- --tw-tracking: var(--chat-label-tracking,0.14em);
3094
- letter-spacing: var(--chat-label-tracking,0.14em);
3095
- }
3096
- .tracking-\[var\(--chat-label-tracking\,0\.16em\)\] {
3097
- --tw-tracking: var(--chat-label-tracking,0.16em);
3098
- letter-spacing: var(--chat-label-tracking,0.16em);
3099
- }
3100
3044
  .tracking-\[var\(--tracking-snug\,-0\.01em\)\] {
3101
3045
  --tw-tracking: var(--tracking-snug,-0.01em);
3102
3046
  letter-spacing: var(--tracking-snug,-0.01em);
@@ -3154,9 +3098,6 @@
3154
3098
  color: color-mix(in oklab, var(--accent-text) 80%, transparent);
3155
3099
  }
3156
3100
  }
3157
- .text-\[var\(--brand-cool\)\] {
3158
- color: var(--brand-cool);
3159
- }
3160
3101
  .text-\[var\(--brand-cool\,hsl\(var\(--primary\)\)\)\] {
3161
3102
  color: var(--brand-cool,hsl(var(--primary)));
3162
3103
  }
@@ -3178,12 +3119,6 @@
3178
3119
  .text-\[var\(--btn-primary-text\)\] {
3179
3120
  color: var(--btn-primary-text);
3180
3121
  }
3181
- .text-\[var\(--chat-label-size\,11px\)\] {
3182
- color: var(--chat-label-size,11px);
3183
- }
3184
- .text-\[var\(--chat-send-color\,white\)\] {
3185
- color: var(--chat-send-color,white);
3186
- }
3187
3122
  .text-\[var\(--code-error\)\] {
3188
3123
  color: var(--code-error);
3189
3124
  }
@@ -3485,14 +3420,6 @@
3485
3420
  --tw-shadow: 0 8px 30px var(--tw-shadow-color, rgba(0,0,0,0.45));
3486
3421
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3487
3422
  }
3488
- .shadow-\[var\(--chat-input-shadow\,0_1px_2px_rgba\(15\,23\,42\,0\.05\)\)\] {
3489
- --tw-shadow: var(--chat-input-shadow,0 1px 2px rgba(15,23,42,0.05));
3490
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3491
- }
3492
- .shadow-\[var\(--chat-send-shadow\,0_6px_16px_rgba\(15\,23\,42\,0\.12\)\)\] {
3493
- --tw-shadow: var(--chat-send-shadow,0 6px 16px rgba(15,23,42,0.12));
3494
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3495
- }
3496
3423
  .shadow-\[var\(--shadow-accent\)\] {
3497
3424
  --tw-shadow: var(--shadow-accent);
3498
3425
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3705,12 +3632,6 @@
3705
3632
  -webkit-user-select: none;
3706
3633
  user-select: none;
3707
3634
  }
3708
- .\[background\:var\(--chat-input-bg\,var\(--bg-card\)\)\] {
3709
- background: var(--chat-input-bg,var(--bg-card));
3710
- }
3711
- .\[background\:var\(--chat-send-bg\,var\(--brand-primary\)\)\] {
3712
- background: var(--chat-send-bg,var(--brand-primary));
3713
- }
3714
3635
  .\[scrollbar-gutter\:stable\] {
3715
3636
  scrollbar-gutter: stable;
3716
3637
  }
@@ -3880,11 +3801,6 @@
3880
3801
  border-color: var(--border-accent-hover);
3881
3802
  }
3882
3803
  }
3883
- .focus-within\:border-\[var\(--chat-input-focus-border\,var\(--border-accent\)\)\] {
3884
- &:focus-within {
3885
- border-color: var(--chat-input-focus-border,var(--border-accent));
3886
- }
3887
- }
3888
3804
  .focus-within\:border-border {
3889
3805
  &:focus-within {
3890
3806
  border-color: var(--color-border);
@@ -3898,12 +3814,6 @@
3898
3814
  }
3899
3815
  }
3900
3816
  }
3901
- .focus-within\:shadow-\[var\(--chat-input-focus-shadow\,0_10px_30px_rgba\(15\,23\,42\,0\.08\)\)\] {
3902
- &:focus-within {
3903
- --tw-shadow: var(--chat-input-focus-shadow,0 10px 30px rgba(15,23,42,0.08));
3904
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3905
- }
3906
- }
3907
3817
  .hover\:-translate-y-0\.5 {
3908
3818
  &:hover {
3909
3819
  @media (hover: hover) {
@@ -3912,14 +3822,6 @@
3912
3822
  }
3913
3823
  }
3914
3824
  }
3915
- .hover\:translate-y-\[-1px\] {
3916
- &:hover {
3917
- @media (hover: hover) {
3918
- --tw-translate-y: -1px;
3919
- translate: var(--tw-translate-x) var(--tw-translate-y);
3920
- }
3921
- }
3922
- }
3923
3825
  .hover\:border-\[var\(--border-accent\)\] {
3924
3826
  &:hover {
3925
3827
  @media (hover: hover) {
@@ -4090,16 +3992,6 @@
4090
3992
  }
4091
3993
  }
4092
3994
  }
4093
- .hover\:bg-\[var\(--code-error\)\]\/24 {
4094
- &:hover {
4095
- @media (hover: hover) {
4096
- background-color: var(--code-error);
4097
- @supports (color: color-mix(in lab, red, red)) {
4098
- background-color: color-mix(in oklab, var(--code-error) 24%, transparent);
4099
- }
4100
- }
4101
- }
4102
- }
4103
3995
  .hover\:bg-\[var\(--status-error\,\#ff4d6d\)\]\/25 {
4104
3996
  &:hover {
4105
3997
  @media (hover: hover) {
@@ -4524,13 +4416,6 @@
4524
4416
  }
4525
4417
  }
4526
4418
  }
4527
- .hover\:\[background\:var\(--chat-send-hover-bg\,var\(--brand-strong\)\)\] {
4528
- &:hover {
4529
- @media (hover: hover) {
4530
- background: var(--chat-send-hover-bg,var(--brand-strong));
4531
- }
4532
- }
4533
- }
4534
4419
  .focus\:border-\[var\(--border-accent\)\] {
4535
4420
  &:focus {
4536
4421
  border-color: var(--border-accent);
@@ -4741,19 +4626,6 @@
4741
4626
  --tw-ring-color: var(--border-accent);
4742
4627
  }
4743
4628
  }
4744
- .focus-visible\:ring-\[var\(--chat-send-ring\,var\(--border-accent\)\)\] {
4745
- &:focus-visible {
4746
- --tw-ring-color: var(--chat-send-ring,var(--border-accent));
4747
- }
4748
- }
4749
- .focus-visible\:ring-\[var\(--code-error\)\]\/50 {
4750
- &:focus-visible {
4751
- --tw-ring-color: var(--code-error);
4752
- @supports (color: color-mix(in lab, red, red)) {
4753
- --tw-ring-color: color-mix(in oklab, var(--code-error) 50%, transparent);
4754
- }
4755
- }
4756
- }
4757
4629
  .focus-visible\:ring-primary\/20 {
4758
4630
  &:focus-visible {
4759
4631
  --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
@@ -5425,15 +5297,15 @@
5425
5297
  [data-sandbox-ui],
5426
5298
  [data-theme="dark"],
5427
5299
  .dark {
5428
- --md3-surface: #0a0a14;
5429
- --md3-surface-dim: #07070d;
5430
- --md3-surface-bright: #1b1a2c;
5431
- --md3-surface-container-lowest: #000001;
5432
- --md3-surface-container-low: #0d0c18;
5433
- --md3-surface-container: #11101e;
5434
- --md3-surface-container-high: #171624;
5435
- --md3-surface-container-highest: #1f1e30;
5436
- --md3-surface-variant: #1f1e30;
5300
+ --md3-surface: #16161f;
5301
+ --md3-surface-dim: #111119;
5302
+ --md3-surface-bright: #2a2940;
5303
+ --md3-surface-container-lowest: #101017;
5304
+ --md3-surface-container-low: #16161f;
5305
+ --md3-surface-container: #1c1b27;
5306
+ --md3-surface-container-high: #232231;
5307
+ --md3-surface-container-highest: #2c2b3d;
5308
+ --md3-surface-variant: #2c2b3d;
5437
5309
  --md3-on-surface: #fdfdfd;
5438
5310
  --md3-on-surface-variant: #aaa8b8;
5439
5311
  --md3-primary: #818CF8;
@@ -5449,8 +5321,8 @@
5449
5321
  --md3-on-secondary: #E8E5FF;
5450
5322
  --md3-on-secondary-container: #E8E5FF;
5451
5323
  --md3-tertiary: #10B981;
5452
- --md3-outline: #434260;
5453
- --md3-outline-variant: #2A293D;
5324
+ --md3-outline: #4a4965;
5325
+ --md3-outline-variant: #34324a;
5454
5326
  --md3-error: #ff5277;
5455
5327
  --md3-error-dim: #eb2855;
5456
5328
  --md3-error-container: #82042b;
@@ -5460,24 +5332,24 @@
5460
5332
  --md3-inverse-primary: #4F46E5;
5461
5333
  --md3-inverse-on-surface: #000000;
5462
5334
  --md3-surface-tint: #818CF8;
5463
- --hsl-background: 240 8% 5%;
5335
+ --hsl-background: 240 7% 9%;
5464
5336
  --hsl-foreground: 240 6% 93%;
5465
- --hsl-card: 240 5% 8%;
5337
+ --hsl-card: 240 5% 13%;
5466
5338
  --hsl-card-foreground: 240 6% 93%;
5467
- --hsl-popover: 240 4% 13%;
5339
+ --hsl-popover: 240 5% 17%;
5468
5340
  --hsl-popover-foreground: 240 6% 93%;
5469
5341
  --hsl-primary: 239 84% 67%;
5470
5342
  --hsl-primary-foreground: 0 0% 100%;
5471
- --hsl-secondary: 240 5% 11%;
5343
+ --hsl-secondary: 240 5% 15%;
5472
5344
  --hsl-secondary-foreground: 240 6% 93%;
5473
- --hsl-muted: 240 5% 11%;
5474
- --hsl-muted-foreground: 240 4% 62%;
5475
- --hsl-accent: 240 5% 11%;
5345
+ --hsl-muted: 240 5% 15%;
5346
+ --hsl-muted-foreground: 240 4% 64%;
5347
+ --hsl-accent: 240 5% 15%;
5476
5348
  --hsl-accent-foreground: 240 6% 93%;
5477
5349
  --hsl-destructive: 348 90% 60%;
5478
5350
  --hsl-destructive-foreground: 0 0% 100%;
5479
- --hsl-border: 240 3% 13%;
5480
- --hsl-input: 240 5% 11%;
5351
+ --hsl-border: 240 5% 16%;
5352
+ --hsl-input: 240 5% 15%;
5481
5353
  --hsl-ring: 239 84% 67%;
5482
5354
  --hsl-success: 160 84% 39%;
5483
5355
  --hsl-warning: 40 94% 56%;
@@ -5505,18 +5377,18 @@
5505
5377
  --warning: var(--hsl-warning);
5506
5378
  --error: var(--hsl-destructive);
5507
5379
  --info: var(--hsl-info);
5508
- --sidebar-background: 240 5% 8%;
5380
+ --sidebar-background: 240 6% 11%;
5509
5381
  --sidebar-foreground: 240 6% 93%;
5510
5382
  --sidebar-primary: 239 84% 67%;
5511
5383
  --sidebar-primary-foreground: 0 0% 100%;
5512
- --sidebar-accent: 240 5% 11%;
5384
+ --sidebar-accent: 240 5% 15%;
5513
5385
  --sidebar-accent-foreground: 240 6% 93%;
5514
- --sidebar-border: 240 3% 13%;
5386
+ --sidebar-border: 240 5% 16%;
5515
5387
  --sidebar-ring: 239 84% 67%;
5516
- --depth-1: #0b0b0d;
5517
- --depth-2: #141416;
5518
- --depth-3: #1a1a1d;
5519
- --depth-4: #202023;
5388
+ --depth-1: #15151a;
5389
+ --depth-2: #1f1f23;
5390
+ --depth-3: #26262b;
5391
+ --depth-4: #2e2e34;
5520
5392
  --status-running: #10B981;
5521
5393
  --status-creating: #9B93F0;
5522
5394
  --status-stopped: #FFB800;
@@ -5562,7 +5434,7 @@
5562
5434
  --accent-surface-soft: rgba(255, 255, 255, 0.04);
5563
5435
  --accent-surface-strong: rgba(129, 140, 248, 0.14);
5564
5436
  --accent-text: #b9bffb;
5565
- --bg-root: #0b0b0d;
5437
+ --bg-root: #15151a;
5566
5438
  --bg-dark: var(--depth-1);
5567
5439
  --bg-card: var(--depth-2);
5568
5440
  --bg-elevated: var(--depth-4);
package/dist/index.d.ts CHANGED
@@ -4,7 +4,7 @@ export { CodeBlock as CodeBlockDisplay, Markdown, MarkdownProps } from '@tangle-
4
4
  export { AgentWorkbench, ApprovalConfidenceStat, ApprovalItem, ApprovalQueue, ApprovalQueueProps, AuditCheck, AuditResults, AuditResultsProps, BannerType, CalendarEvent, CalendarView, CalendarViewProps, ContextBadge, DirectoryPane, DirectoryPaneProps, FormAudit, RuntimePane, RuntimePaneProps, SESSION_CREATED_EVENT, SandboxWorkbench, SandboxWorkbenchArtifact, SandboxWorkbenchCustomArtifact, SandboxWorkbenchFileArtifact, SandboxWorkbenchLayoutOptions, SandboxWorkbenchMarkdownArtifact, SandboxWorkbenchOpenUIArtifact, SandboxWorkbenchProps, SandboxWorkbenchSessionProps, SessionActivityMonitor, SessionActivityMonitorProps, SessionCreatedDetail, SessionOptimisticController, SessionSidebar, SessionSidebarBadge, SessionSidebarFilter, SessionSidebarItem, SessionSidebarLink, SessionSidebarProps, ShellShouldRevalidateArgs, ShellShouldRevalidateOptions, StatusBanner, StatusBannerProps, StatusBar, StatusBarProps, TaskBoard, TaskBoardColumn, TaskBoardItem, TaskBoardProps, TerminalLine, TerminalPanel, TerminalProps, UseOptimisticSessionItemsOptions, WorkspaceLayout, WorkspaceLayoutProps, createShellShouldRevalidate, dispatchSessionCreated, shellShouldRevalidate, useOptimisticSessionItems } from './workspace.js';
5
5
  export { ArtifactView, BRAND_PRISM_THEME, CodeSurface, CodeSurfaceProps, CodeView, CodeViewProps, DiffStats, DiffView, DiffViewProps, FileBreadcrumb, FileBreadcrumbProps, GitStatusBadge, PanelHeader, PanelHeaderProps, PillTabItem, PillTabs, PillTabsProps, PreviewView, PreviewViewProps, SandboxArtifact, SandboxArtifactPane, SandboxArtifactPaneProps, SandboxArtifactTerminal, buildUnifiedPatch, computeDiffStats, resolveLanguage } from './workbench.js';
6
6
  export { OpenUIAction, OpenUIActionsNode, OpenUIArtifactRenderer, OpenUIArtifactRendererProps, OpenUIBadgeNode, OpenUICardNode, OpenUICodeNode, OpenUIComponentNode, OpenUIGridNode, OpenUIHeadingNode, OpenUIKeyValueNode, OpenUIMarkdownNode, OpenUIPrimitive, OpenUISeparatorNode, OpenUIStackNode, OpenUIStatNode, OpenUITableNode, OpenUITextNode } from '@tangle-network/ui/openui';
7
- export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatInput, ChatInputProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, PendingFile, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from '@tangle-network/ui/chat';
7
+ export { AgentTimeline, AgentTimelineArtifactItem, AgentTimelineCustomItem, AgentTimelineItem, AgentTimelineMessageItem, AgentTimelineProps, AgentTimelineStatusItem, AgentTimelineTone, AgentTimelineToolGroupItem, AgentTimelineToolItem, ChatContainer, ChatContainerProps, ChatMessage, ChatMessageProps, MessageList, MessageListProps, MessageRole, ThinkingIndicator, ThinkingIndicatorProps, UserMessage, UserMessageProps } from '@tangle-network/ui/chat';
8
8
  export { AgentComposer, AgentComposerProps, AgentProfileCapability, AgentProfileDraft, AgentProfileOption, AgentProfilePicker, AgentProfilePickerProps, AgentSessionControls, AgentSessionControlsProps, AgentSessionHarnessControl, AgentSessionModelControl, AgentSessionProfileControl, AgentSessionReasoningControl, ArtifactAgentDock, ArtifactAgentDockProps, ArtifactAgentDockTransport, ArtifactDockMessage, ArtifactDockStreamEvent, ArtifactKind, ArtifactScope, ComposerFile, DEFAULT_REASONING_LEVEL_OPTIONS, HARNESS_REASONING_OPTIONS, ReasoningLevel, ReasoningLevelOption, ReasoningLevelPicker, ReasoningLevelPickerProps, createFetchTransport, isModelCompatibleWithHarness, snapModelToHarness } from './chat.js';
9
9
  export { ExpandedToolDetail, ExpandedToolDetailProps, InlineThinkingItem, InlineThinkingItemProps, InlineToolItem, InlineToolItemProps, LiveDuration, RunGroup, RunGroupProps } from '@tangle-network/ui/run';
10
10
  export { CommandPreview, DiffPreview, GlobResultsPreview, GrepResultsPreview, QuestionPreview, WebSearchPreview, WriteFilePreview } from '@tangle-network/ui/tool-previews';
package/dist/index.js CHANGED
@@ -90,7 +90,6 @@ import {
90
90
  AgentTimeline,
91
91
  ArtifactAgentDock,
92
92
  ChatContainer,
93
- ChatInput,
94
93
  ChatMessage,
95
94
  DEFAULT_REASONING_LEVEL_OPTIONS,
96
95
  HARNESS_REASONING_OPTIONS,
@@ -103,7 +102,7 @@ import {
103
102
  modelProvider,
104
103
  snapHarnessToModel,
105
104
  snapModelToHarness
106
- } from "./chunk-ZR3UHRGW.js";
105
+ } from "./chunk-XL573ZOV.js";
107
106
  import {
108
107
  ExpandedToolDetail,
109
108
  InlineThinkingItem,
@@ -381,7 +380,6 @@ export {
381
380
  CardHeader,
382
381
  CardTitle,
383
382
  ChatContainer,
384
- ChatInput,
385
383
  ChatMessage,
386
384
  ClusterStatusBar,
387
385
  CodeBlock,
package/dist/styles.css CHANGED
@@ -500,9 +500,6 @@
500
500
  .my-2 {
501
501
  margin-block: calc(var(--spacing) * 2);
502
502
  }
503
- .my-3 {
504
- margin-block: calc(var(--spacing) * 3);
505
- }
506
503
  .my-4 {
507
504
  margin-block: calc(var(--spacing) * 4);
508
505
  }
@@ -665,6 +662,10 @@
665
662
  .aspect-square {
666
663
  aspect-ratio: 1 / 1;
667
664
  }
665
+ .size-2 {
666
+ width: calc(var(--spacing) * 2);
667
+ height: calc(var(--spacing) * 2);
668
+ }
668
669
  .size-3 {
669
670
  width: calc(var(--spacing) * 3);
670
671
  height: calc(var(--spacing) * 3);
@@ -849,9 +850,6 @@
849
850
  .max-h-\[90vh\] {
850
851
  max-height: 90vh;
851
852
  }
852
- .max-h-\[160px\] {
853
- max-height: 160px;
854
- }
855
853
  .max-h-\[min\(60vh\,420px\)\] {
856
854
  max-height: min(60vh, 420px);
857
855
  }
@@ -888,9 +886,6 @@
888
886
  .min-h-\[38px\] {
889
887
  min-height: 38px;
890
888
  }
891
- .min-h-\[42px\] {
892
- min-height: 42px;
893
- }
894
889
  .min-h-\[44px\] {
895
890
  min-height: 44px;
896
891
  }
@@ -1700,9 +1695,6 @@
1700
1695
  .rounded-\[28px\] {
1701
1696
  border-radius: 28px;
1702
1697
  }
1703
- .rounded-\[calc\(var\(--radius-md\)\+2px\)\] {
1704
- border-radius: calc(var(--radius-md) + 2px);
1705
- }
1706
1698
  .rounded-\[calc\(var\(--radius-xl\)\+2px\)\] {
1707
1699
  border-radius: calc(var(--radius-xl) + 2px);
1708
1700
  }
@@ -1849,24 +1841,12 @@
1849
1841
  border-color: color-mix(in oklab, var(--brand-emerald) 50%, transparent);
1850
1842
  }
1851
1843
  }
1852
- .border-\[var\(--chat-input-border\,var\(--border-default\)\)\] {
1853
- border-color: var(--chat-input-border,var(--border-default));
1854
- }
1855
- .border-\[var\(--chat-send-border\,var\(--border-accent\)\)\] {
1856
- border-color: var(--chat-send-border,var(--border-accent));
1857
- }
1858
1844
  .border-\[var\(--code-error\)\]\/20 {
1859
1845
  border-color: var(--code-error);
1860
1846
  @supports (color: color-mix(in lab, red, red)) {
1861
1847
  border-color: color-mix(in oklab, var(--code-error) 20%, transparent);
1862
1848
  }
1863
1849
  }
1864
- .border-\[var\(--code-error\)\]\/30 {
1865
- border-color: var(--code-error);
1866
- @supports (color: color-mix(in lab, red, red)) {
1867
- border-color: color-mix(in oklab, var(--code-error) 30%, transparent);
1868
- }
1869
- }
1870
1850
  .border-\[var\(--code-number\)\]\/20 {
1871
1851
  border-color: var(--code-number);
1872
1852
  @supports (color: color-mix(in lab, red, red)) {
@@ -1903,12 +1883,6 @@
1903
1883
  .border-\[var\(--surface-danger-border\)\] {
1904
1884
  border-color: var(--surface-danger-border);
1905
1885
  }
1906
- .border-\[var\(--surface-danger-border\)\]\/60 {
1907
- border-color: var(--surface-danger-border);
1908
- @supports (color: color-mix(in lab, red, red)) {
1909
- border-color: color-mix(in oklab, var(--surface-danger-border) 60%, transparent);
1910
- }
1911
- }
1912
1886
  .border-\[var\(--surface-info-border\)\] {
1913
1887
  border-color: var(--surface-info-border);
1914
1888
  }
@@ -1933,9 +1907,6 @@
1933
1907
  .border-background {
1934
1908
  border-color: var(--color-background);
1935
1909
  }
1936
- .border-blue-400 {
1937
- border-color: var(--color-blue-400);
1938
- }
1939
1910
  .border-blue-500\/30 {
1940
1911
  border-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 30%, transparent);
1941
1912
  @supports (color: color-mix(in lab, red, red)) {
@@ -2095,6 +2066,9 @@
2095
2066
  .\!bg-transparent {
2096
2067
  background-color: transparent !important;
2097
2068
  }
2069
+ .bg-\[\#0a0a0c\] {
2070
+ background-color: #0a0a0c;
2071
+ }
2098
2072
  .bg-\[color-mix\(in_oklch\,var\(--color-warning\,orange\)_18\%\,transparent\)\] {
2099
2073
  background-color: var(--color-warning,orange);
2100
2074
  @supports (color: color-mix(in lab, red, red)) {
@@ -2170,12 +2144,6 @@
2170
2144
  background-color: color-mix(in oklab, var(--code-error) 5%, transparent);
2171
2145
  }
2172
2146
  }
2173
- .bg-\[var\(--code-error\)\]\/14 {
2174
- background-color: var(--code-error);
2175
- @supports (color: color-mix(in lab, red, red)) {
2176
- background-color: color-mix(in oklab, var(--code-error) 14%, transparent);
2177
- }
2178
- }
2179
2147
  .bg-\[var\(--code-number\)\] {
2180
2148
  background-color: var(--code-number);
2181
2149
  }
@@ -2290,12 +2258,6 @@
2290
2258
  .bg-blue-500 {
2291
2259
  background-color: var(--color-blue-500);
2292
2260
  }
2293
- .bg-blue-500\/8 {
2294
- background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 8%, transparent);
2295
- @supports (color: color-mix(in lab, red, red)) {
2296
- background-color: color-mix(in oklab, var(--color-blue-500) 8%, transparent);
2297
- }
2298
- }
2299
2261
  .bg-blue-500\/15 {
2300
2262
  background-color: color-mix(in srgb, oklch(62.3% 0.214 259.815) 15%, transparent);
2301
2263
  @supports (color: color-mix(in lab, red, red)) {
@@ -2576,9 +2538,6 @@
2576
2538
  .bg-\[linear-gradient\(180deg\,rgba\(255\,255\,255\,0\.03\)\,transparent\)\] {
2577
2539
  background-image: linear-gradient(180deg,rgba(255,255,255,0.03),transparent);
2578
2540
  }
2579
- .bg-\[linear-gradient\(180deg\,rgba\(255\,255\,255\,0\.04\)\,transparent\)\] {
2580
- background-image: linear-gradient(180deg,rgba(255,255,255,0.04),transparent);
2581
- }
2582
2541
  .from-white\/5 {
2583
2542
  --tw-gradient-from: color-mix(in srgb, #fff 5%, transparent);
2584
2543
  @supports (color: color-mix(in lab, red, red)) {
@@ -2746,9 +2705,6 @@
2746
2705
  .py-\[2px\] {
2747
2706
  padding-block: 2px;
2748
2707
  }
2749
- .py-\[var\(--chat-input-py\)\] {
2750
- padding-block: var(--chat-input-py);
2751
- }
2752
2708
  .py-\[var\(--chat-message-py\)\] {
2753
2709
  padding-block: var(--chat-message-py);
2754
2710
  }
@@ -3025,10 +2981,6 @@
3025
2981
  --tw-leading: var(--leading-tight);
3026
2982
  line-height: var(--leading-tight);
3027
2983
  }
3028
- .font-\[var\(--chat-label-weight\,600\)\] {
3029
- --tw-font-weight: var(--chat-label-weight,600);
3030
- font-weight: var(--chat-label-weight,600);
3031
- }
3032
2984
  .font-\[var\(--font-display\)\] {
3033
2985
  --tw-font-weight: var(--font-display);
3034
2986
  font-weight: var(--font-display);
@@ -3089,14 +3041,6 @@
3089
3041
  --tw-tracking: 0.18em;
3090
3042
  letter-spacing: 0.18em;
3091
3043
  }
3092
- .tracking-\[var\(--chat-label-tracking\,0\.14em\)\] {
3093
- --tw-tracking: var(--chat-label-tracking,0.14em);
3094
- letter-spacing: var(--chat-label-tracking,0.14em);
3095
- }
3096
- .tracking-\[var\(--chat-label-tracking\,0\.16em\)\] {
3097
- --tw-tracking: var(--chat-label-tracking,0.16em);
3098
- letter-spacing: var(--chat-label-tracking,0.16em);
3099
- }
3100
3044
  .tracking-\[var\(--tracking-snug\,-0\.01em\)\] {
3101
3045
  --tw-tracking: var(--tracking-snug,-0.01em);
3102
3046
  letter-spacing: var(--tracking-snug,-0.01em);
@@ -3154,9 +3098,6 @@
3154
3098
  color: color-mix(in oklab, var(--accent-text) 80%, transparent);
3155
3099
  }
3156
3100
  }
3157
- .text-\[var\(--brand-cool\)\] {
3158
- color: var(--brand-cool);
3159
- }
3160
3101
  .text-\[var\(--brand-cool\,hsl\(var\(--primary\)\)\)\] {
3161
3102
  color: var(--brand-cool,hsl(var(--primary)));
3162
3103
  }
@@ -3178,12 +3119,6 @@
3178
3119
  .text-\[var\(--btn-primary-text\)\] {
3179
3120
  color: var(--btn-primary-text);
3180
3121
  }
3181
- .text-\[var\(--chat-label-size\,11px\)\] {
3182
- color: var(--chat-label-size,11px);
3183
- }
3184
- .text-\[var\(--chat-send-color\,white\)\] {
3185
- color: var(--chat-send-color,white);
3186
- }
3187
3122
  .text-\[var\(--code-error\)\] {
3188
3123
  color: var(--code-error);
3189
3124
  }
@@ -3485,14 +3420,6 @@
3485
3420
  --tw-shadow: 0 8px 30px var(--tw-shadow-color, rgba(0,0,0,0.45));
3486
3421
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3487
3422
  }
3488
- .shadow-\[var\(--chat-input-shadow\,0_1px_2px_rgba\(15\,23\,42\,0\.05\)\)\] {
3489
- --tw-shadow: var(--chat-input-shadow,0 1px 2px rgba(15,23,42,0.05));
3490
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3491
- }
3492
- .shadow-\[var\(--chat-send-shadow\,0_6px_16px_rgba\(15\,23\,42\,0\.12\)\)\] {
3493
- --tw-shadow: var(--chat-send-shadow,0 6px 16px rgba(15,23,42,0.12));
3494
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3495
- }
3496
3423
  .shadow-\[var\(--shadow-accent\)\] {
3497
3424
  --tw-shadow: var(--shadow-accent);
3498
3425
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -3705,12 +3632,6 @@
3705
3632
  -webkit-user-select: none;
3706
3633
  user-select: none;
3707
3634
  }
3708
- .\[background\:var\(--chat-input-bg\,var\(--bg-card\)\)\] {
3709
- background: var(--chat-input-bg,var(--bg-card));
3710
- }
3711
- .\[background\:var\(--chat-send-bg\,var\(--brand-primary\)\)\] {
3712
- background: var(--chat-send-bg,var(--brand-primary));
3713
- }
3714
3635
  .\[scrollbar-gutter\:stable\] {
3715
3636
  scrollbar-gutter: stable;
3716
3637
  }
@@ -3880,11 +3801,6 @@
3880
3801
  border-color: var(--border-accent-hover);
3881
3802
  }
3882
3803
  }
3883
- .focus-within\:border-\[var\(--chat-input-focus-border\,var\(--border-accent\)\)\] {
3884
- &:focus-within {
3885
- border-color: var(--chat-input-focus-border,var(--border-accent));
3886
- }
3887
- }
3888
3804
  .focus-within\:border-border {
3889
3805
  &:focus-within {
3890
3806
  border-color: var(--color-border);
@@ -3898,12 +3814,6 @@
3898
3814
  }
3899
3815
  }
3900
3816
  }
3901
- .focus-within\:shadow-\[var\(--chat-input-focus-shadow\,0_10px_30px_rgba\(15\,23\,42\,0\.08\)\)\] {
3902
- &:focus-within {
3903
- --tw-shadow: var(--chat-input-focus-shadow,0 10px 30px rgba(15,23,42,0.08));
3904
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3905
- }
3906
- }
3907
3817
  .hover\:-translate-y-0\.5 {
3908
3818
  &:hover {
3909
3819
  @media (hover: hover) {
@@ -3912,14 +3822,6 @@
3912
3822
  }
3913
3823
  }
3914
3824
  }
3915
- .hover\:translate-y-\[-1px\] {
3916
- &:hover {
3917
- @media (hover: hover) {
3918
- --tw-translate-y: -1px;
3919
- translate: var(--tw-translate-x) var(--tw-translate-y);
3920
- }
3921
- }
3922
- }
3923
3825
  .hover\:border-\[var\(--border-accent\)\] {
3924
3826
  &:hover {
3925
3827
  @media (hover: hover) {
@@ -4090,16 +3992,6 @@
4090
3992
  }
4091
3993
  }
4092
3994
  }
4093
- .hover\:bg-\[var\(--code-error\)\]\/24 {
4094
- &:hover {
4095
- @media (hover: hover) {
4096
- background-color: var(--code-error);
4097
- @supports (color: color-mix(in lab, red, red)) {
4098
- background-color: color-mix(in oklab, var(--code-error) 24%, transparent);
4099
- }
4100
- }
4101
- }
4102
- }
4103
3995
  .hover\:bg-\[var\(--status-error\,\#ff4d6d\)\]\/25 {
4104
3996
  &:hover {
4105
3997
  @media (hover: hover) {
@@ -4524,13 +4416,6 @@
4524
4416
  }
4525
4417
  }
4526
4418
  }
4527
- .hover\:\[background\:var\(--chat-send-hover-bg\,var\(--brand-strong\)\)\] {
4528
- &:hover {
4529
- @media (hover: hover) {
4530
- background: var(--chat-send-hover-bg,var(--brand-strong));
4531
- }
4532
- }
4533
- }
4534
4419
  .focus\:border-\[var\(--border-accent\)\] {
4535
4420
  &:focus {
4536
4421
  border-color: var(--border-accent);
@@ -4741,19 +4626,6 @@
4741
4626
  --tw-ring-color: var(--border-accent);
4742
4627
  }
4743
4628
  }
4744
- .focus-visible\:ring-\[var\(--chat-send-ring\,var\(--border-accent\)\)\] {
4745
- &:focus-visible {
4746
- --tw-ring-color: var(--chat-send-ring,var(--border-accent));
4747
- }
4748
- }
4749
- .focus-visible\:ring-\[var\(--code-error\)\]\/50 {
4750
- &:focus-visible {
4751
- --tw-ring-color: var(--code-error);
4752
- @supports (color: color-mix(in lab, red, red)) {
4753
- --tw-ring-color: color-mix(in oklab, var(--code-error) 50%, transparent);
4754
- }
4755
- }
4756
- }
4757
4629
  .focus-visible\:ring-primary\/20 {
4758
4630
  &:focus-visible {
4759
4631
  --tw-ring-color: color-mix(in srgb, hsl(var(--primary)) 20%, transparent);
@@ -5425,15 +5297,15 @@
5425
5297
  [data-sandbox-ui],
5426
5298
  [data-theme="dark"],
5427
5299
  .dark {
5428
- --md3-surface: #0a0a14;
5429
- --md3-surface-dim: #07070d;
5430
- --md3-surface-bright: #1b1a2c;
5431
- --md3-surface-container-lowest: #000001;
5432
- --md3-surface-container-low: #0d0c18;
5433
- --md3-surface-container: #11101e;
5434
- --md3-surface-container-high: #171624;
5435
- --md3-surface-container-highest: #1f1e30;
5436
- --md3-surface-variant: #1f1e30;
5300
+ --md3-surface: #16161f;
5301
+ --md3-surface-dim: #111119;
5302
+ --md3-surface-bright: #2a2940;
5303
+ --md3-surface-container-lowest: #101017;
5304
+ --md3-surface-container-low: #16161f;
5305
+ --md3-surface-container: #1c1b27;
5306
+ --md3-surface-container-high: #232231;
5307
+ --md3-surface-container-highest: #2c2b3d;
5308
+ --md3-surface-variant: #2c2b3d;
5437
5309
  --md3-on-surface: #fdfdfd;
5438
5310
  --md3-on-surface-variant: #aaa8b8;
5439
5311
  --md3-primary: #818CF8;
@@ -5449,8 +5321,8 @@
5449
5321
  --md3-on-secondary: #E8E5FF;
5450
5322
  --md3-on-secondary-container: #E8E5FF;
5451
5323
  --md3-tertiary: #10B981;
5452
- --md3-outline: #434260;
5453
- --md3-outline-variant: #2A293D;
5324
+ --md3-outline: #4a4965;
5325
+ --md3-outline-variant: #34324a;
5454
5326
  --md3-error: #ff5277;
5455
5327
  --md3-error-dim: #eb2855;
5456
5328
  --md3-error-container: #82042b;
@@ -5460,24 +5332,24 @@
5460
5332
  --md3-inverse-primary: #4F46E5;
5461
5333
  --md3-inverse-on-surface: #000000;
5462
5334
  --md3-surface-tint: #818CF8;
5463
- --hsl-background: 240 8% 5%;
5335
+ --hsl-background: 240 7% 9%;
5464
5336
  --hsl-foreground: 240 6% 93%;
5465
- --hsl-card: 240 5% 8%;
5337
+ --hsl-card: 240 5% 13%;
5466
5338
  --hsl-card-foreground: 240 6% 93%;
5467
- --hsl-popover: 240 4% 13%;
5339
+ --hsl-popover: 240 5% 17%;
5468
5340
  --hsl-popover-foreground: 240 6% 93%;
5469
5341
  --hsl-primary: 239 84% 67%;
5470
5342
  --hsl-primary-foreground: 0 0% 100%;
5471
- --hsl-secondary: 240 5% 11%;
5343
+ --hsl-secondary: 240 5% 15%;
5472
5344
  --hsl-secondary-foreground: 240 6% 93%;
5473
- --hsl-muted: 240 5% 11%;
5474
- --hsl-muted-foreground: 240 4% 62%;
5475
- --hsl-accent: 240 5% 11%;
5345
+ --hsl-muted: 240 5% 15%;
5346
+ --hsl-muted-foreground: 240 4% 64%;
5347
+ --hsl-accent: 240 5% 15%;
5476
5348
  --hsl-accent-foreground: 240 6% 93%;
5477
5349
  --hsl-destructive: 348 90% 60%;
5478
5350
  --hsl-destructive-foreground: 0 0% 100%;
5479
- --hsl-border: 240 3% 13%;
5480
- --hsl-input: 240 5% 11%;
5351
+ --hsl-border: 240 5% 16%;
5352
+ --hsl-input: 240 5% 15%;
5481
5353
  --hsl-ring: 239 84% 67%;
5482
5354
  --hsl-success: 160 84% 39%;
5483
5355
  --hsl-warning: 40 94% 56%;
@@ -5505,18 +5377,18 @@
5505
5377
  --warning: var(--hsl-warning);
5506
5378
  --error: var(--hsl-destructive);
5507
5379
  --info: var(--hsl-info);
5508
- --sidebar-background: 240 5% 8%;
5380
+ --sidebar-background: 240 6% 11%;
5509
5381
  --sidebar-foreground: 240 6% 93%;
5510
5382
  --sidebar-primary: 239 84% 67%;
5511
5383
  --sidebar-primary-foreground: 0 0% 100%;
5512
- --sidebar-accent: 240 5% 11%;
5384
+ --sidebar-accent: 240 5% 15%;
5513
5385
  --sidebar-accent-foreground: 240 6% 93%;
5514
- --sidebar-border: 240 3% 13%;
5386
+ --sidebar-border: 240 5% 16%;
5515
5387
  --sidebar-ring: 239 84% 67%;
5516
- --depth-1: #0b0b0d;
5517
- --depth-2: #141416;
5518
- --depth-3: #1a1a1d;
5519
- --depth-4: #202023;
5388
+ --depth-1: #15151a;
5389
+ --depth-2: #1f1f23;
5390
+ --depth-3: #26262b;
5391
+ --depth-4: #2e2e34;
5520
5392
  --status-running: #10B981;
5521
5393
  --status-creating: #9B93F0;
5522
5394
  --status-stopped: #FFB800;
@@ -5562,7 +5434,7 @@
5562
5434
  --accent-surface-soft: rgba(255, 255, 255, 0.04);
5563
5435
  --accent-surface-strong: rgba(129, 140, 248, 0.14);
5564
5436
  --accent-text: #b9bffb;
5565
- --bg-root: #0b0b0d;
5437
+ --bg-root: #15151a;
5566
5438
  --bg-dark: var(--depth-1);
5567
5439
  --bg-card: var(--depth-2);
5568
5440
  --bg-elevated: var(--depth-4);
package/dist/tokens.css CHANGED
@@ -9,15 +9,15 @@
9
9
  [data-sandbox-ui],
10
10
  [data-theme="dark"],
11
11
  .dark {
12
- --md3-surface: #0a0a14;
13
- --md3-surface-dim: #07070d;
14
- --md3-surface-bright: #1b1a2c;
15
- --md3-surface-container-lowest: #000001;
16
- --md3-surface-container-low: #0d0c18;
17
- --md3-surface-container: #11101e;
18
- --md3-surface-container-high: #171624;
19
- --md3-surface-container-highest: #1f1e30;
20
- --md3-surface-variant: #1f1e30;
12
+ --md3-surface: #16161f;
13
+ --md3-surface-dim: #111119;
14
+ --md3-surface-bright: #2a2940;
15
+ --md3-surface-container-lowest: #101017;
16
+ --md3-surface-container-low: #16161f;
17
+ --md3-surface-container: #1c1b27;
18
+ --md3-surface-container-high: #232231;
19
+ --md3-surface-container-highest: #2c2b3d;
20
+ --md3-surface-variant: #2c2b3d;
21
21
  --md3-on-surface: #fdfdfd;
22
22
  --md3-on-surface-variant: #aaa8b8;
23
23
 
@@ -36,8 +36,8 @@
36
36
  --md3-on-secondary-container: #E8E5FF;
37
37
 
38
38
  --md3-tertiary: #10B981;
39
- --md3-outline: #434260;
40
- --md3-outline-variant: #2A293D;
39
+ --md3-outline: #4a4965;
40
+ --md3-outline-variant: #34324a;
41
41
 
42
42
  --md3-error: #ff5277;
43
43
  --md3-error-dim: #eb2855;
@@ -51,24 +51,24 @@
51
51
  --md3-surface-tint: #818CF8;
52
52
 
53
53
  /* Semantic HSL bridge — flat neutral spine (Tangle Quiet) */
54
- --hsl-background: 240 8% 5%; /* #0b0b0d */
54
+ --hsl-background: 240 7% 9%; /* #15151a canvas — lifted off pure black */
55
55
  --hsl-foreground: 240 6% 93%; /* #ececee */
56
- --hsl-card: 240 5% 8%; /* #141416 surface */
56
+ --hsl-card: 240 5% 13%; /* #1f1f23 surface, clearly above canvas */
57
57
  --hsl-card-foreground: 240 6% 93%;
58
- --hsl-popover: 240 4% 13%; /* #202023 elevated */
58
+ --hsl-popover: 240 5% 17%; /* #28282d elevated */
59
59
  --hsl-popover-foreground: 240 6% 93%;
60
60
  --hsl-primary: 239 84% 67%;
61
61
  --hsl-primary-foreground: 0 0% 100%;
62
- --hsl-secondary: 240 5% 11%; /* #1a1a1d surface-2 */
62
+ --hsl-secondary: 240 5% 15%; /* #242428 surface-2 */
63
63
  --hsl-secondary-foreground: 240 6% 93%;
64
- --hsl-muted: 240 5% 11%; /* #1a1a1d — neutral hover well */
65
- --hsl-muted-foreground: 240 4% 62%; /* #9a9aa2 text-muted */
66
- --hsl-accent: 240 5% 11%; /* neutral hover (indigo lives in accent-surface-strong) */
64
+ --hsl-muted: 240 5% 15%; /* #242428 — neutral hover well */
65
+ --hsl-muted-foreground: 240 4% 64%; /* #9c9ca6 text-muted */
66
+ --hsl-accent: 240 5% 15%; /* neutral hover (indigo lives in accent-surface-strong) */
67
67
  --hsl-accent-foreground: 240 6% 93%;
68
68
  --hsl-destructive: 348 90% 60%;
69
69
  --hsl-destructive-foreground: 0 0% 100%;
70
- --hsl-border: 240 3% 13%; /* hairline ≈ rgba(255,255,255,0.07) */
71
- --hsl-input: 240 5% 11%;
70
+ --hsl-border: 240 5% 16%; /* soft edge — fill carries separation, not the line */
71
+ --hsl-input: 240 5% 15%;
72
72
  --hsl-ring: 239 84% 67%;
73
73
  --hsl-success: 160 84% 39%;
74
74
  --hsl-warning: 40 94% 56%;
@@ -100,20 +100,20 @@
100
100
  --info: var(--hsl-info);
101
101
 
102
102
  /* Sidebar tokens — flat surface + hairline */
103
- --sidebar-background: 240 5% 8%; /* #141416 surface */
103
+ --sidebar-background: 240 6% 11%; /* #1a1a1f surface */
104
104
  --sidebar-foreground: 240 6% 93%;
105
105
  --sidebar-primary: 239 84% 67%;
106
106
  --sidebar-primary-foreground: 0 0% 100%;
107
- --sidebar-accent: 240 5% 11%; /* neutral hover */
107
+ --sidebar-accent: 240 5% 15%; /* neutral hover */
108
108
  --sidebar-accent-foreground: 240 6% 93%;
109
- --sidebar-border: 240 3% 13%; /* hairline */
109
+ --sidebar-border: 240 5% 16%; /* soft edge */
110
110
  --sidebar-ring: 239 84% 67%;
111
111
 
112
112
  /* Depth scale — flat neutral spine (Tangle Quiet) */
113
- --depth-1: #0b0b0d;
114
- --depth-2: #141416;
115
- --depth-3: #1a1a1d;
116
- --depth-4: #202023;
113
+ --depth-1: #15151a;
114
+ --depth-2: #1f1f23;
115
+ --depth-3: #26262b;
116
+ --depth-4: #2e2e34;
117
117
 
118
118
  /* Status colors */
119
119
  --status-running: #10B981;
@@ -172,7 +172,7 @@
172
172
  --accent-text: #b9bffb;
173
173
 
174
174
  /* Surfaces — flat single-neutral (no radial mesh) */
175
- --bg-root: #0b0b0d;
175
+ --bg-root: #15151a;
176
176
  --bg-dark: var(--depth-1);
177
177
  --bg-card: var(--depth-2);
178
178
  --bg-elevated: var(--depth-4);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tangle-network/sandbox-ui",
3
- "version": "0.66.0",
3
+ "version": "0.68.0",
4
4
  "description": "Unified UI component library for Tangle Sandbox — primitives, chat, dashboard, terminal, editor, and workspace components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -123,8 +123,8 @@
123
123
  },
124
124
  "peerDependencies": {
125
125
  "@tangle-network/agent-interface": ">=0.17.0 <1.0.0",
126
- "@tangle-network/brand": "^0.6.0",
127
- "@tangle-network/ui": "^5.1.0",
126
+ "@tangle-network/brand": "^0.8.0",
127
+ "@tangle-network/ui": "^8.0.0",
128
128
  "@xyflow/react": "^12.0.0",
129
129
  "react": "^18 || ^19",
130
130
  "react-dom": "^18 || ^19"
@@ -178,8 +178,8 @@
178
178
  "@tailwindcss/postcss": "^4.2.2",
179
179
  "@tailwindcss/vite": "^4.2.2",
180
180
  "@tangle-network/agent-interface": ">=0.17.0 <1.0.0",
181
- "@tangle-network/brand": "^0.6.0",
182
- "@tangle-network/ui": "^5.1.0",
181
+ "@tangle-network/brand": "^0.8.0",
182
+ "@tangle-network/ui": "^8.0.0",
183
183
  "@tanstack/react-query": "^5.91.0",
184
184
  "@testing-library/dom": "^10.4.1",
185
185
  "@testing-library/jest-dom": "^6.9.1",