@tangle-network/sandbox-ui 0.2.2 → 0.3.4

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 (70) hide show
  1. package/README.md +201 -10
  2. package/dist/auth.js +2 -2
  3. package/dist/chat-container-C8eHLw8z.d.ts +67 -0
  4. package/dist/chat.d.ts +70 -78
  5. package/dist/chat.js +8 -8
  6. package/dist/chunk-4F2GJRGU.js +756 -0
  7. package/dist/{chunk-HYEAX3DC.js → chunk-5LV6DZZF.js} +445 -114
  8. package/dist/{chunk-QSQBDR3N.js → chunk-BX6AQMUS.js} +5 -2
  9. package/dist/chunk-CCKNIAS7.js +124 -0
  10. package/dist/chunk-CJ2RYVZH.js +128 -0
  11. package/dist/{chunk-KMXV7DDX.js → chunk-CNWVHQFY.js} +1 -1
  12. package/dist/{chunk-OU4TRNQZ.js → chunk-COCSO7FG.js} +3 -3
  13. package/dist/chunk-FJSVPBKY.js +85 -0
  14. package/dist/chunk-FRGMMANX.js +102 -0
  15. package/dist/{chunk-E6FS7R4X.js → chunk-HWLX5NME.js} +1 -1
  16. package/dist/chunk-HY5IBRCE.js +1171 -0
  17. package/dist/chunk-JF6E2DS5.js +610 -0
  18. package/dist/chunk-MUOL44AE.js +121 -0
  19. package/dist/chunk-MXCSSOGH.js +105 -0
  20. package/dist/{chunk-NI2EI43H.js → chunk-PDV7W4NY.js} +9 -124
  21. package/dist/chunk-QGI5E7JD.js +1106 -0
  22. package/dist/chunk-TQN3VR4F.js +92 -0
  23. package/dist/{chunk-SOT2V7TX.js → chunk-TXI4MZAZ.js} +62 -144
  24. package/dist/chunk-WUR652Y3.js +1140 -0
  25. package/dist/chunk-YDBXQQLC.js +336 -0
  26. package/dist/{chunk-4EIWPJMJ.js → chunk-ZP6GSX4D.js} +36 -27
  27. package/dist/dashboard.d.ts +4 -111
  28. package/dist/dashboard.js +17 -4
  29. package/dist/{expanded-tool-detail-OkXGqTHe.d.ts → expanded-tool-detail-BDi_h_dZ.d.ts} +11 -4
  30. package/dist/file-tabs-CmaoDVBI.d.ts +72 -0
  31. package/dist/files.d.ts +25 -44
  32. package/dist/files.js +8 -3
  33. package/{src/styles → dist}/globals.css +16 -67
  34. package/dist/hooks.d.ts +5 -4
  35. package/dist/hooks.js +14 -9
  36. package/dist/index-BOjBJwzD.d.ts +219 -0
  37. package/dist/index.d.ts +39 -10
  38. package/dist/index.js +190 -121
  39. package/dist/markdown.d.ts +1 -24
  40. package/dist/markdown.js +1 -7
  41. package/dist/openui.d.ts +115 -0
  42. package/dist/openui.js +11 -0
  43. package/dist/pages.d.ts +3 -2
  44. package/dist/pages.js +19 -16
  45. package/dist/primitives.js +25 -19
  46. package/dist/run.d.ts +2 -2
  47. package/dist/run.js +8 -7
  48. package/dist/{use-sidecar-auth-Bb0-w3lX.d.ts → sdk-hooks.d.ts} +61 -72
  49. package/dist/sdk-hooks.js +29 -0
  50. package/dist/styles.css +179 -0
  51. package/dist/tokens.css +275 -0
  52. package/dist/{tool-display-BvsVW_Ur.d.ts → tool-display-Ct9nFAzJ.d.ts} +1 -1
  53. package/dist/types.d.ts +1 -1
  54. package/dist/{usage-chart-DINgSVL5.d.ts → usage-chart-CY9xo3KX.d.ts} +8 -3
  55. package/dist/use-pty-session-DeZSxOCN.d.ts +69 -0
  56. package/dist/utils.d.ts +1 -1
  57. package/dist/utils.js +1 -1
  58. package/dist/workspace.d.ts +171 -33
  59. package/dist/workspace.js +25 -1
  60. package/package.json +10 -3
  61. package/tailwind.config.cjs +39 -0
  62. package/dist/chunk-2UHPE5T7.js +0 -201
  63. package/dist/chunk-6MQIDUPA.js +0 -502
  64. package/dist/chunk-J4OADEUK.js +0 -814
  65. package/dist/chunk-KYY2X6LY.js +0 -318
  66. package/dist/chunk-L6ZDH5F4.js +0 -334
  67. package/dist/chunk-M34OA6PQ.js +0 -233
  68. package/dist/chunk-M6VLC32S.js +0 -219
  69. package/dist/chunk-U62G5TS7.js +0 -472
  70. package/src/styles/tokens.css +0 -73
@@ -0,0 +1,179 @@
1
+ @import "./tokens.css";
2
+
3
+ @tailwind base;
4
+ @tailwind components;
5
+ @tailwind utilities;
6
+
7
+ @layer base {
8
+ :root {
9
+ --sandbox: var(--primary);
10
+ --sandbox-glow: var(--info);
11
+ }
12
+
13
+ * {
14
+ border-color: hsl(var(--border));
15
+ }
16
+
17
+ body {
18
+ @apply antialiased;
19
+ background-color: hsl(var(--background));
20
+ color: hsl(var(--foreground));
21
+ font-family: var(--font-sans);
22
+ font-feature-settings:
23
+ "rlig" 1,
24
+ "calt" 1;
25
+ }
26
+
27
+ /* Custom scrollbar */
28
+ ::-webkit-scrollbar {
29
+ width: 8px;
30
+ height: 8px;
31
+ }
32
+
33
+ ::-webkit-scrollbar-track {
34
+ @apply bg-transparent;
35
+ }
36
+
37
+ ::-webkit-scrollbar-thumb {
38
+ @apply bg-border rounded-full;
39
+ }
40
+
41
+ ::-webkit-scrollbar-thumb:hover {
42
+ @apply bg-muted-foreground/50;
43
+ }
44
+ }
45
+
46
+ @layer utilities {
47
+ /* Gradient text -- Tangle default accent */
48
+ .text-gradient-sandbox {
49
+ background-image: var(--tangle-gradient);
50
+ @apply bg-clip-text text-transparent;
51
+ }
52
+
53
+ /* Glow effects */
54
+ .glow-sandbox {
55
+ box-shadow: 0 0 40px -10px hsl(var(--sandbox) / 0.4);
56
+ }
57
+
58
+ /* Glass effect */
59
+ .glass {
60
+ backdrop-filter: blur(24px);
61
+ background-color: hsl(var(--card) / 0.8);
62
+ border: 1px solid hsl(var(--border) / 0.5);
63
+ }
64
+
65
+ /* Subtle noise texture */
66
+ .noise {
67
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
68
+ opacity: 0.02;
69
+ }
70
+
71
+ /* Terminal styling */
72
+ .terminal-cursor {
73
+ @apply inline-block w-2 h-5 bg-foreground animate-pulse;
74
+ }
75
+
76
+ /* Shimmer animation */
77
+ .shimmer {
78
+ background: linear-gradient(
79
+ 90deg,
80
+ hsl(var(--muted)) 0%,
81
+ hsl(var(--accent)) 50%,
82
+ hsl(var(--muted)) 100%
83
+ );
84
+ background-size: 200% 100%;
85
+ animation: shimmer 2s infinite;
86
+ }
87
+
88
+ @keyframes shimmer {
89
+ 0% {
90
+ background-position: -200% 0;
91
+ }
92
+ 100% {
93
+ background-position: 200% 0;
94
+ }
95
+ }
96
+
97
+ /* Fade in animation */
98
+ .animate-in {
99
+ animation: fade-in 0.3s ease-out;
100
+ }
101
+
102
+ @keyframes fade-in {
103
+ from {
104
+ opacity: 0;
105
+ transform: translateY(10px);
106
+ }
107
+ to {
108
+ opacity: 1;
109
+ transform: translateY(0);
110
+ }
111
+ }
112
+
113
+ /* Pulse ring animation */
114
+ .pulse-ring {
115
+ @apply relative;
116
+ }
117
+
118
+ .pulse-ring::before {
119
+ content: "";
120
+ @apply absolute inset-0 rounded-full;
121
+ animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
122
+ }
123
+
124
+ @keyframes pulse-ring {
125
+ 0%,
126
+ 100% {
127
+ box-shadow: 0 0 0 0 currentColor;
128
+ opacity: 0.4;
129
+ }
130
+ 50% {
131
+ box-shadow: 0 0 0 8px currentColor;
132
+ opacity: 0;
133
+ }
134
+ }
135
+ }
136
+
137
+ /* Fonts -- Inter (UI) + JetBrains Mono (code). */
138
+ @font-face {
139
+ font-family: "Inter";
140
+ src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiA.woff2") format("woff2");
141
+ font-weight: 300;
142
+ font-style: normal;
143
+ font-display: swap;
144
+ }
145
+ @font-face {
146
+ font-family: "Inter";
147
+ src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuLyfAZ9hiA.woff2") format("woff2");
148
+ font-weight: 400;
149
+ font-style: normal;
150
+ font-display: swap;
151
+ }
152
+ @font-face {
153
+ font-family: "Inter";
154
+ src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuI2fAZ9hiA.woff2") format("woff2");
155
+ font-weight: 500;
156
+ font-style: normal;
157
+ font-display: swap;
158
+ }
159
+ @font-face {
160
+ font-family: "Inter";
161
+ src: url("https://fonts.gstatic.com/s/inter/v18/UcCO3FwrK3iLTeHuS_nVMrMxCp50SjIw2boKoduKmMEVuFuYAZ9hiA.woff2") format("woff2");
162
+ font-weight: 700;
163
+ font-style: normal;
164
+ font-display: swap;
165
+ }
166
+ @font-face {
167
+ font-family: "JetBrains Mono";
168
+ src: url("https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTOlOV.woff2") format("woff2");
169
+ font-weight: 400;
170
+ font-style: normal;
171
+ font-display: swap;
172
+ }
173
+ @font-face {
174
+ font-family: "JetBrains Mono";
175
+ src: url("https://fonts.gstatic.com/s/jetbrainsmono/v18/tDbY2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKxTPlOV.woff2") format("woff2");
176
+ font-weight: 500;
177
+ font-style: normal;
178
+ font-display: swap;
179
+ }
@@ -0,0 +1,275 @@
1
+ /* Tangle Sandbox UI design tokens */
2
+
3
+ /* MD3 surface hierarchy — Stitch design system */
4
+ :root,
5
+ [data-sandbox-ui] {
6
+ --md3-surface: #12131a;
7
+ --md3-surface-dim: #12131a;
8
+ --md3-surface-bright: #383841;
9
+ --md3-surface-container-lowest: #0d0e15;
10
+ --md3-surface-container-low: #1a1b23;
11
+ --md3-surface-container: #1e1f27;
12
+ --md3-surface-container-high: #292931;
13
+ --md3-surface-container-highest: #34343c;
14
+ --md3-surface-variant: #34343c;
15
+ --md3-on-surface: #e3e1ec;
16
+ --md3-on-surface-variant: #ccc3d7;
17
+ --md3-primary: #d1bcff;
18
+ --md3-primary-container: #a178ff;
19
+ --md3-on-primary: #3c0090;
20
+ --md3-on-primary-container: #34007f;
21
+ --md3-primary-fixed: #e9ddff;
22
+ --md3-primary-fixed-dim: #d1bcff;
23
+ --md3-secondary: #b6c4ff;
24
+ --md3-secondary-container: #133eae;
25
+ --md3-on-secondary: #00277f;
26
+ --md3-on-secondary-container: #a3b5ff;
27
+ --md3-secondary-fixed: #dce1ff;
28
+ --md3-secondary-fixed-dim: #b6c4ff;
29
+ --md3-tertiary: #c7c5d0;
30
+ --md3-tertiary-container: #90909a;
31
+ --md3-outline: #958da1;
32
+ --md3-outline-variant: #4a4455;
33
+ --md3-error: #ffb4ab;
34
+ --md3-error-container: #93000a;
35
+ --md3-on-error: #690005;
36
+ --md3-inverse-surface: #e3e1ec;
37
+ --md3-inverse-primary: #6f35df;
38
+ --md3-surface-tint: #d1bcff;
39
+ /* Semantic HSL bridge for shadcn/radix primitives */
40
+ --hsl-background: 245 18% 7%;
41
+ --hsl-foreground: 220 20% 96%;
42
+ --hsl-card: 246 21% 10%;
43
+ --hsl-card-foreground: 220 20% 96%;
44
+ --hsl-popover: 246 21% 10%;
45
+ --hsl-popover-foreground: 220 20% 96%;
46
+ --hsl-primary: 226 84% 66%;
47
+ --hsl-primary-foreground: 220 20% 98%;
48
+ --hsl-secondary: 243 18% 16%;
49
+ --hsl-secondary-foreground: 220 18% 92%;
50
+ --hsl-muted: 243 18% 14%;
51
+ --hsl-muted-foreground: 230 16% 68%;
52
+ --hsl-accent: 243 18% 18%;
53
+ --hsl-accent-foreground: 220 18% 94%;
54
+ --hsl-destructive: 0 82% 63%;
55
+ --hsl-destructive-foreground: 220 20% 98%;
56
+ --hsl-border: 242 17% 20%;
57
+ --hsl-input: 243 18% 16%;
58
+ --hsl-ring: 226 84% 66%;
59
+ --hsl-success: 142 70% 48%;
60
+ --hsl-warning: 41 96% 58%;
61
+ --hsl-info: 199 89% 60%;
62
+
63
+ /* Tailwind/shadcn variable aliases */
64
+ --background: var(--hsl-background);
65
+ --foreground: var(--hsl-foreground);
66
+ --card: var(--hsl-card);
67
+ --card-foreground: var(--hsl-card-foreground);
68
+ --popover: var(--hsl-popover);
69
+ --popover-foreground: var(--hsl-popover-foreground);
70
+ --primary: var(--hsl-primary);
71
+ --primary-foreground: var(--hsl-primary-foreground);
72
+ --secondary: var(--hsl-secondary);
73
+ --secondary-foreground: var(--hsl-secondary-foreground);
74
+ --muted: var(--hsl-muted);
75
+ --muted-foreground: var(--hsl-muted-foreground);
76
+ --accent: var(--hsl-accent);
77
+ --accent-foreground: var(--hsl-accent-foreground);
78
+ --destructive: var(--hsl-destructive);
79
+ --destructive-foreground: var(--hsl-destructive-foreground);
80
+ --border: var(--hsl-border);
81
+ --input: var(--hsl-input);
82
+ --ring: var(--hsl-ring);
83
+ --success: var(--hsl-success);
84
+ --warning: var(--hsl-warning);
85
+ --error: var(--hsl-destructive);
86
+ --info: var(--hsl-info);
87
+
88
+ /* Brand gradients */
89
+ --tangle-gradient: linear-gradient(135deg, hsl(226 84% 66%), hsl(199 89% 60%));
90
+ --tangle-gradient-text: linear-gradient(45deg, hsl(226 84% 72%), hsl(199 89% 66%));
91
+ --accent-gradient-strong: linear-gradient(135deg, hsl(var(--hsl-primary)), var(--brand-glow));
92
+ --accent-surface-soft: hsl(var(--hsl-primary) / 0.12);
93
+ --accent-surface-strong: hsl(var(--hsl-primary) / 0.18);
94
+ --accent-text: var(--brand-cool);
95
+
96
+ /* Surfaces */
97
+ --bg-root: radial-gradient(circle at top, rgba(98, 114, 243, 0.14), transparent 34%), linear-gradient(180deg, hsl(var(--hsl-background)), hsl(246 19% 9%) 82%);
98
+ --bg-dark: hsl(246 19% 9%);
99
+ --bg-card: hsl(var(--hsl-card));
100
+ --bg-elevated: hsl(245 20% 12%);
101
+ --bg-section: hsl(246 18% 8%);
102
+ --bg-input: hsl(var(--hsl-input));
103
+ --bg-hover: hsl(243 18% 18%);
104
+ --bg-selection: hsl(226 84% 66% / 0.15);
105
+
106
+ /* Text */
107
+ --text-primary: hsl(var(--hsl-foreground));
108
+ --text-secondary: hsl(220 18% 88%);
109
+ --text-muted: hsl(var(--hsl-muted-foreground));
110
+
111
+ /* Brand accents */
112
+ --brand-primary: hsl(var(--hsl-primary));
113
+ --brand-strong: hsl(226 80% 60%);
114
+ --brand-cool: hsl(220 88% 70%);
115
+ --brand-glow: hsl(199 89% 66%);
116
+ --brand-purple: hsl(254 84% 72%);
117
+ --brand-vibrant: hsl(214 90% 63%);
118
+
119
+ /* Borders */
120
+ --border-subtle: hsl(var(--hsl-border) / 0.55);
121
+ --border-default: hsl(var(--hsl-border) / 0.8);
122
+ --border-hover: hsl(var(--hsl-border) / 1);
123
+ --border-accent: hsl(var(--hsl-primary) / 0.35);
124
+ --border-accent-hover: hsl(var(--hsl-primary) / 0.55);
125
+
126
+ /* Buttons */
127
+ --btn-primary-bg: hsl(var(--hsl-primary));
128
+ --btn-primary-hover: hsl(226 84% 72%);
129
+ --btn-cta-bg: hsl(220 20% 98%);
130
+ --btn-cta-text: hsl(245 18% 10%);
131
+
132
+ /* Code / runtime syntax */
133
+ --code-keyword: hsl(254 88% 76%);
134
+ --code-string: hsl(199 89% 72%);
135
+ --code-function: hsl(214 90% 72%);
136
+ --code-number: hsl(41 96% 66%);
137
+ --code-success: hsl(var(--hsl-success));
138
+ --code-comment: hsl(230 14% 60%);
139
+ --code-error: hsl(var(--hsl-destructive));
140
+
141
+ /* Shadows */
142
+ --shadow-card: 0 18px 60px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(118, 146, 255, 0.08);
143
+ --shadow-dropdown: 0 24px 80px rgba(0, 0, 0, 0.45);
144
+ --shadow-glow: 0 0 40px rgba(96, 165, 250, 0.14);
145
+ --shadow-accent: 0 18px 48px rgba(0, 0, 0, 0.24), 0 0 0 1px hsl(var(--hsl-primary) / 0.12);
146
+
147
+ /* Radii */
148
+ --radius-sm: 10px;
149
+ --radius-md: 14px;
150
+ --radius-lg: 18px;
151
+ --radius-xl: 24px;
152
+ --radius-pill: 999px;
153
+ --radius-full: 999px;
154
+ --radius: 0.875rem;
155
+
156
+ /* Density-aware metrics */
157
+ --control-height: 2.5rem;
158
+ --panel-padding: 1rem;
159
+ --content-max-width: 80rem;
160
+
161
+ /* Transitions */
162
+ --transition-fast: 0.15s ease;
163
+ --transition-default: 0.2s ease;
164
+ --transition-medium: 0.3s ease;
165
+
166
+ /* Fonts */
167
+ --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
168
+ --font-mono: "JetBrains Mono", ui-monospace, monospace;
169
+ }
170
+
171
+ [data-sandbox-theme="builder"] {
172
+ --hsl-primary: 214 90% 63%;
173
+ --hsl-ring: 214 90% 63%;
174
+ --brand-cool: hsl(214 90% 68%);
175
+ --brand-glow: hsl(190 92% 62%);
176
+ --tangle-gradient: linear-gradient(135deg, hsl(214 90% 63%), hsl(190 92% 62%));
177
+ --accent-gradient-strong: linear-gradient(135deg, hsl(214 90% 63%), hsl(190 92% 62%));
178
+ }
179
+
180
+ [data-sandbox-theme="consumer"] {
181
+ --hsl-background: 222 16% 10%;
182
+ --hsl-card: 223 18% 13%;
183
+ --hsl-input: 223 18% 15%;
184
+ --hsl-primary: 187 75% 48%;
185
+ --hsl-ring: 187 75% 48%;
186
+ --brand-cool: hsl(187 75% 54%);
187
+ --brand-glow: hsl(164 74% 56%);
188
+ --tangle-gradient: linear-gradient(135deg, hsl(187 75% 48%), hsl(164 74% 56%));
189
+ --accent-gradient-strong: linear-gradient(135deg, hsl(187 75% 48%), hsl(164 74% 56%));
190
+ }
191
+
192
+ [data-sandbox-theme="vault"] {
193
+ /* Vault AI — navy/emerald fintech palette matching tangle.tools/taxes */
194
+ --hsl-background: 210 17% 97%;
195
+ --hsl-foreground: 210 20% 10%;
196
+ --hsl-card: 0 0% 100%;
197
+ --hsl-card-foreground: 210 20% 10%;
198
+ --hsl-popover: 0 0% 100%;
199
+ --hsl-popover-foreground: 210 20% 10%;
200
+ --hsl-primary: 212 100% 10%;
201
+ --hsl-primary-foreground: 0 0% 100%;
202
+ --hsl-secondary: 152 100% 22%;
203
+ --hsl-secondary-foreground: 0 0% 100%;
204
+ --hsl-muted: 210 14% 95%;
205
+ --hsl-muted-foreground: 215 10% 40%;
206
+ --hsl-accent: 210 20% 94%;
207
+ --hsl-accent-foreground: 210 20% 10%;
208
+ --hsl-destructive: 0 72% 41%;
209
+ --hsl-destructive-foreground: 0 0% 100%;
210
+ --hsl-border: 214 18% 88%;
211
+ --hsl-input: 214 18% 90%;
212
+ --hsl-ring: 152 100% 22%;
213
+ --hsl-success: 152 82% 34%;
214
+ --hsl-warning: 41 96% 50%;
215
+ --hsl-info: 212 80% 50%;
216
+
217
+ --bg-root: #f8f9fa;
218
+ --bg-dark: #f3f4f5;
219
+ --bg-card: #ffffff;
220
+ --bg-elevated: #edeeef;
221
+ --bg-section: #f3f4f5;
222
+ --bg-input: #f3f4f5;
223
+ --bg-hover: #e7e8e9;
224
+ --bg-selection: rgba(0, 110, 42, 0.08);
225
+
226
+ --text-primary: #001831;
227
+ --text-secondary: #43474e;
228
+ --text-muted: #73777f;
229
+
230
+ --brand-primary: #001831;
231
+ --brand-strong: #002d54;
232
+ --brand-cool: #006e2a;
233
+ --brand-glow: #3ce36a;
234
+ --brand-purple: #001831;
235
+ --brand-vibrant: #006e2a;
236
+
237
+ --border-subtle: rgba(0, 24, 49, 0.06);
238
+ --border-default: rgba(0, 24, 49, 0.1);
239
+ --border-hover: rgba(0, 24, 49, 0.15);
240
+ --border-accent: rgba(0, 110, 42, 0.2);
241
+ --border-accent-hover: rgba(0, 110, 42, 0.4);
242
+
243
+ --btn-primary-bg: #001831;
244
+ --btn-primary-hover: #002d54;
245
+ --btn-cta-bg: #006e2a;
246
+ --btn-cta-text: #ffffff;
247
+
248
+ --code-keyword: #002d54;
249
+ --code-string: #006e2a;
250
+ --code-function: #001831;
251
+ --code-number: #b45309;
252
+ --code-success: #006e2a;
253
+ --code-comment: #73777f;
254
+ --code-error: #ba1a1a;
255
+
256
+ --shadow-card: 0 20px 48px rgba(0, 24, 49, 0.06);
257
+ --shadow-dropdown: 0 24px 64px rgba(0, 24, 49, 0.12);
258
+ --shadow-glow: 0 0 40px rgba(0, 110, 42, 0.08);
259
+
260
+ --tangle-gradient: linear-gradient(135deg, #001831, #002d54);
261
+ --tangle-gradient-text: linear-gradient(135deg, #001831, #006e2a);
262
+ --accent-gradient-strong: linear-gradient(135deg, #001831, #002d54);
263
+
264
+ --font-sans: "Inter", "Manrope", ui-sans-serif, system-ui, sans-serif;
265
+ --font-mono: "JetBrains Mono", ui-monospace, monospace;
266
+ }
267
+
268
+ [data-density="compact"] {
269
+ --radius-sm: 8px;
270
+ --radius-md: 12px;
271
+ --radius-lg: 16px;
272
+ --radius-xl: 20px;
273
+ --control-height: 2.25rem;
274
+ --panel-padding: 0.75rem;
275
+ }
@@ -5,7 +5,7 @@ import { ReactNode } from 'react';
5
5
  * Variant-specific rendering instructions for tool output.
6
6
  * Maps directly to specialised preview components.
7
7
  */
8
- type DisplayVariant = "command" | "write-file" | "question" | "web-search" | "grep" | "glob" | "default";
8
+ type DisplayVariant = "command" | "write-file" | "read-file" | "diff" | "question" | "web-search" | "grep" | "glob" | "default";
9
9
  /**
10
10
  * Custom renderer for tool details. Return a ReactNode to override the
11
11
  * default ExpandedToolDetail, or null to fall back to the built-in renderer.
package/dist/types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export { R as ReasoningPart, S as SessionMessage, a as SessionPart, T as TextPart, b as ToolPart, c as ToolState, d as ToolStatus, e as ToolTime } from './parts-CyGkM6Fp.js';
2
2
  export { F as FinalTextPart, G as GroupedMessage, M as MessageRun, a as MessageUser, R as Run, b as RunStats, T as ToolCategory } from './run-CtFZ6s-D.js';
3
3
  export { S as Session } from './sidecar-CFU2W9j1.js';
4
- export { C as CustomToolRenderer, D as DisplayVariant, T as ToolDisplayMetadata } from './tool-display-BvsVW_Ur.js';
4
+ export { C as CustomToolRenderer, D as DisplayVariant, T as ToolDisplayMetadata } from './tool-display-Ct9nFAzJ.js';
5
5
  export { A as AgentBranding } from './branding-DCi5VEik.js';
6
6
  import 'react';
@@ -21,8 +21,10 @@ interface BillingDashboardProps {
21
21
  onManageSubscription: () => void;
22
22
  onAddCredits: () => void;
23
23
  variant?: "sandbox";
24
+ className?: string;
25
+ cardClassName?: string;
24
26
  }
25
- declare function BillingDashboard({ subscription, balance, usage, onManageSubscription, onAddCredits, variant, }: BillingDashboardProps): react_jsx_runtime.JSX.Element;
27
+ declare function BillingDashboard({ subscription, balance, usage, onManageSubscription, onAddCredits, variant, className, cardClassName, }: BillingDashboardProps): react_jsx_runtime.JSX.Element;
26
28
 
27
29
  interface PricingTier {
28
30
  id: string;
@@ -42,8 +44,10 @@ interface PricingPageProps {
42
44
  onSelectTier: (tierId: string) => void;
43
45
  variant?: "sandbox";
44
46
  loading?: boolean;
47
+ className?: string;
48
+ cardClassName?: string;
45
49
  }
46
- declare function PricingPage({ tiers, currentTierId, billingPeriod, onBillingPeriodChange, onSelectTier, variant, loading, }: PricingPageProps): react_jsx_runtime.JSX.Element;
50
+ declare function PricingPage({ tiers, currentTierId, billingPeriod, onBillingPeriodChange, onSelectTier, variant, loading, className, cardClassName, }: PricingPageProps): react_jsx_runtime.JSX.Element;
47
51
 
48
52
  interface UsageDataPoint {
49
53
  date: string;
@@ -54,7 +58,8 @@ interface UsageChartProps {
54
58
  title: string;
55
59
  unit: string;
56
60
  variant?: "agentrun" | "automateai" | "tradingbots" | "sandbox";
61
+ className?: string;
57
62
  }
58
- declare function UsageChart({ data, title, unit, variant, }: UsageChartProps): react_jsx_runtime.JSX.Element;
63
+ declare function UsageChart({ data, title, unit, variant, className, }: UsageChartProps): react_jsx_runtime.JSX.Element;
59
64
 
60
65
  export { type BillingSubscription as B, type PricingTier as P, type UsageDataPoint as U, type BillingBalance as a, type BillingUsage as b, BillingDashboard as c, type BillingDashboardProps as d, PricingPage as e, type PricingPageProps as f, UsageChart as g, type UsageChartProps as h };
@@ -0,0 +1,69 @@
1
+ interface AuthUser {
2
+ customer_id: string;
3
+ email: string;
4
+ name?: string;
5
+ tier: string;
6
+ github?: {
7
+ login: string;
8
+ connected: boolean;
9
+ } | null;
10
+ session_expires_at?: string;
11
+ }
12
+ interface UseAuthOptions {
13
+ apiBaseUrl: string;
14
+ revalidateOnFocus?: boolean;
15
+ shouldRetryOnError?: boolean;
16
+ }
17
+ interface UseAuthResult {
18
+ user: AuthUser | null;
19
+ isLoading: boolean;
20
+ isError: boolean;
21
+ error: Error | null;
22
+ mutate: () => Promise<void>;
23
+ }
24
+ /**
25
+ * Hook for managing authentication state.
26
+ * Fetches user session from the API and provides loading/error states.
27
+ */
28
+ declare function useAuth({ apiBaseUrl, revalidateOnFocus, shouldRetryOnError, }: UseAuthOptions): UseAuthResult;
29
+ /**
30
+ * Creates a fetcher function that includes auth credentials.
31
+ * Uses both cookie-based session and localStorage API key for backwards compatibility.
32
+ */
33
+ declare function createAuthFetcher(_apiBaseUrl: string): <T = unknown>(url: string, options?: RequestInit) => Promise<T>;
34
+ /**
35
+ * Hook to get the API key from localStorage.
36
+ * For backwards compatibility with API key-based auth.
37
+ */
38
+ declare function useApiKey(): string | null;
39
+
40
+ interface UsePtySessionOptions {
41
+ /** Base URL of the sidecar (e.g. "http://localhost:9100"). */
42
+ apiUrl: string;
43
+ /** Bearer token for authentication. */
44
+ token: string;
45
+ /** Called with raw PTY output (may contain ANSI escape codes). */
46
+ onData: (data: string) => void;
47
+ }
48
+ interface UsePtySessionReturn {
49
+ /** Whether the SSE stream is connected and receiving data. */
50
+ isConnected: boolean;
51
+ /** Connection or API error, if any. */
52
+ error: string | null;
53
+ /** Send a command to the PTY session. */
54
+ sendCommand: (command: string) => Promise<void>;
55
+ /** Tear down and reconnect. */
56
+ reconnect: () => void;
57
+ }
58
+ /**
59
+ * Manages a PTY session against the sidecar terminal API.
60
+ *
61
+ * Protocol:
62
+ * - POST /terminals → create session → { data: { sessionId } }
63
+ * - GET /terminals/{id}/stream → SSE output (raw PTY with ANSI codes)
64
+ * - POST /terminals/{id}/execute → send command { command: "..." }
65
+ * - DELETE /terminals/{id} → close session
66
+ */
67
+ declare function usePtySession({ apiUrl, token, onData }: UsePtySessionOptions): UsePtySessionReturn;
68
+
69
+ export { type AuthUser as A, type UseAuthOptions as U, type UseAuthResult as a, type UsePtySessionOptions as b, type UsePtySessionReturn as c, createAuthFetcher as d, useAuth as e, usePtySession as f, useApiKey as u };
package/dist/utils.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { b as ToolPart } from './parts-CyGkM6Fp.js';
2
- import { T as ToolDisplayMetadata } from './tool-display-BvsVW_Ur.js';
2
+ import { T as ToolDisplayMetadata } from './tool-display-Ct9nFAzJ.js';
3
3
  import { T as ToolCategory } from './run-CtFZ6s-D.js';
4
4
  import { ClassValue } from 'clsx';
5
5
  import 'react';
package/dist/utils.js CHANGED
@@ -11,7 +11,7 @@ import {
11
11
  getToolCategory,
12
12
  getToolDisplayMetadata,
13
13
  getToolErrorText
14
- } from "./chunk-QSQBDR3N.js";
14
+ } from "./chunk-BX6AQMUS.js";
15
15
  import {
16
16
  cn
17
17
  } from "./chunk-RQHJBTEU.js";