@tangle-network/sandbox-ui 0.14.0 → 0.15.1

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 (104) hide show
  1. package/dist/auth.d.ts +1 -74
  2. package/dist/auth.js +1 -4
  3. package/dist/chat.d.ts +1 -136
  4. package/dist/chat.js +2 -15
  5. package/dist/chunk-2BUPSB7O.js +0 -0
  6. package/dist/chunk-3J6FG3FJ.js +18 -0
  7. package/dist/chunk-76IQLPW2.js +206 -0
  8. package/dist/chunk-7ZA5SEK3.js +239 -0
  9. package/dist/chunk-AHBZCBDO.js +2960 -0
  10. package/dist/chunk-AZ3AWMTM.js +8 -0
  11. package/dist/chunk-CMY7W45U.js +380 -0
  12. package/dist/{chunk-QMU2PWOU.js → chunk-DNZ4DTNA.js} +71 -17
  13. package/dist/chunk-EI44GEQ5.js +6 -0
  14. package/dist/{chunk-5OQ27N57.js → chunk-GPT7VKK6.js} +34 -38
  15. package/dist/chunk-JBGKGLD7.js +16 -0
  16. package/dist/chunk-NJNME4J4.js +14 -0
  17. package/dist/chunk-QPAJR74X.js +20 -0
  18. package/dist/chunk-TK46XFLM.js +28 -0
  19. package/dist/chunk-WID73FPH.js +89 -0
  20. package/dist/chunk-YVXK4XRO.js +30 -0
  21. package/dist/dashboard.d.ts +538 -4
  22. package/dist/dashboard.js +15 -886
  23. package/dist/editor.d.ts +1 -120
  24. package/dist/editor.js +1 -5
  25. package/dist/files.d.ts +1 -129
  26. package/dist/files.js +2 -7
  27. package/dist/globals.css +2 -1265
  28. package/dist/hooks.d.ts +114 -11
  29. package/dist/hooks.js +17 -88
  30. package/dist/index.d.ts +24 -99
  31. package/dist/index.js +247 -252
  32. package/dist/markdown.d.ts +1 -29
  33. package/dist/markdown.js +2 -2
  34. package/dist/openui.d.ts +8 -115
  35. package/dist/openui.js +1 -6
  36. package/dist/pages.d.ts +1 -2
  37. package/dist/pages.js +68 -66
  38. package/dist/primitives.d.ts +14 -49
  39. package/dist/primitives.js +69 -77
  40. package/dist/run.d.ts +1 -14
  41. package/dist/run.js +2 -22
  42. package/dist/sdk-hooks.d.ts +3 -283
  43. package/dist/sdk-hooks.js +10 -14
  44. package/dist/stores.d.ts +2 -14
  45. package/dist/stores.js +11 -39
  46. package/dist/styles.css +2 -1265
  47. package/dist/{usage-chart-CPTcNlGs.d.ts → template-card-UhV3pmRC.d.ts} +16 -1
  48. package/dist/types.d.ts +11 -8
  49. package/dist/types.js +1 -0
  50. package/dist/utils.d.ts +1 -44
  51. package/dist/utils.js +6 -12
  52. package/dist/workspace.d.ts +5 -10
  53. package/dist/workspace.js +3 -19
  54. package/package.json +19 -54
  55. package/dist/active-sessions-store-CeOmXgv5.d.ts +0 -85
  56. package/dist/artifact-pane-Bh45Ssco.d.ts +0 -24
  57. package/dist/branding-DCi5VEik.d.ts +0 -13
  58. package/dist/button-CMQuQEW_.d.ts +0 -17
  59. package/dist/chat-container-f4yEs6KN.d.ts +0 -106
  60. package/dist/chunk-34A66VBG.js +0 -214
  61. package/dist/chunk-34I7UFSX.js +0 -92
  62. package/dist/chunk-36QY2W5G.js +0 -802
  63. package/dist/chunk-4CLN43XT.js +0 -45
  64. package/dist/chunk-54SQQMMM.js +0 -156
  65. package/dist/chunk-66EZOYZR.js +0 -102
  66. package/dist/chunk-BX6AQMUS.js +0 -183
  67. package/dist/chunk-DI3NZ5ZX.js +0 -192
  68. package/dist/chunk-DPGIXDAI.js +0 -220
  69. package/dist/chunk-DXMIEK4K.js +0 -1426
  70. package/dist/chunk-GSZA3TSY.js +0 -79
  71. package/dist/chunk-HB5Y37YU.js +0 -54
  72. package/dist/chunk-LQNEZDRM.js +0 -109
  73. package/dist/chunk-MA7YKRUP.js +0 -131
  74. package/dist/chunk-MKTSMWVD.js +0 -109
  75. package/dist/chunk-MQXABZTB.js +0 -1348
  76. package/dist/chunk-MT5FJ3ZT.js +0 -186
  77. package/dist/chunk-NKUPJC34.js +0 -2070
  78. package/dist/chunk-OEX7NZE3.js +0 -321
  79. package/dist/chunk-OKLQVY3Y.js +0 -139
  80. package/dist/chunk-Q56BYXQF.js +0 -61
  81. package/dist/chunk-QD4QE5P5.js +0 -40
  82. package/dist/chunk-QDH5GEGY.js +0 -630
  83. package/dist/chunk-QID2OOMG.js +0 -133
  84. package/dist/chunk-RQHJBTEU.js +0 -10
  85. package/dist/chunk-T7HMZEVO.js +0 -216
  86. package/dist/chunk-U6QTHMY6.js +0 -1290
  87. package/dist/chunk-US6JKJKH.js +0 -124
  88. package/dist/chunk-VX3XOUEB.js +0 -63
  89. package/dist/chunk-XLG757B6.js +0 -933
  90. package/dist/chunk-ZMNSRDMH.js +0 -127
  91. package/dist/chunk-ZNCEM5CD.js +0 -316
  92. package/dist/document-editor-pane-A70-EhdQ.d.ts +0 -124
  93. package/dist/document-editor-pane-TLPVRBBU.js +0 -11
  94. package/dist/expanded-tool-detail-Dh99mcbY.d.ts +0 -63
  95. package/dist/file-tabs-BLfxfmAH.d.ts +0 -51
  96. package/dist/parts-CyGkM6Fp.d.ts +0 -50
  97. package/dist/run-CtFZ6s-D.d.ts +0 -41
  98. package/dist/sidebar-drop-zone-tDBsuOH5.d.ts +0 -301
  99. package/dist/sidecar-CFU2W9j1.d.ts +0 -8
  100. package/dist/template-card-BAtvcAkU.d.ts +0 -18
  101. package/dist/tool-call-feed-Bs3MyQMT.d.ts +0 -68
  102. package/dist/tool-display-Ct9nFAzJ.d.ts +0 -32
  103. package/dist/use-sandbox-metrics-DWc0k9Xm.d.ts +0 -153
  104. package/dist/variant-list-BrHYcBCk.d.ts +0 -540
@@ -1,802 +0,0 @@
1
- import {
2
- cn
3
- } from "./chunk-RQHJBTEU.js";
4
-
5
- // src/primitives/select.tsx
6
- import * as SelectPrimitive from "@radix-ui/react-select";
7
- import { Check, ChevronDown, ChevronUp } from "lucide-react";
8
- import * as React from "react";
9
- import { jsx, jsxs } from "react/jsx-runtime";
10
- var Select = SelectPrimitive.Root;
11
- var SelectGroup = SelectPrimitive.Group;
12
- var SelectValue = SelectPrimitive.Value;
13
- var SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
14
- SelectPrimitive.Trigger,
15
- {
16
- ref,
17
- className: cn(
18
- "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-border bg-card px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-primary disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
19
- className
20
- ),
21
- ...props,
22
- children: [
23
- children,
24
- /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
25
- ]
26
- }
27
- ));
28
- SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
29
- var SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
30
- SelectPrimitive.ScrollUpButton,
31
- {
32
- ref,
33
- className: cn(
34
- "flex cursor-default items-center justify-center py-1",
35
- className
36
- ),
37
- ...props,
38
- children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" })
39
- }
40
- ));
41
- SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
42
- var SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
43
- SelectPrimitive.ScrollDownButton,
44
- {
45
- ref,
46
- className: cn(
47
- "flex cursor-default items-center justify-center py-1",
48
- className
49
- ),
50
- ...props,
51
- children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
52
- }
53
- ));
54
- SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
55
- var SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
56
- SelectPrimitive.Content,
57
- {
58
- ref,
59
- className: cn(
60
- "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card text-foreground shadow-[var(--shadow-card)] data-[state=closed]:animate-out data-[state=open]:animate-in",
61
- position === "popper" && "data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1",
62
- className
63
- ),
64
- position,
65
- ...props,
66
- children: [
67
- /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
68
- /* @__PURE__ */ jsx(
69
- SelectPrimitive.Viewport,
70
- {
71
- className: cn(
72
- "p-1",
73
- position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
74
- ),
75
- children
76
- }
77
- ),
78
- /* @__PURE__ */ jsx(SelectScrollDownButton, {})
79
- ]
80
- }
81
- ) }));
82
- SelectContent.displayName = SelectPrimitive.Content.displayName;
83
- var SelectLabel = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
84
- SelectPrimitive.Label,
85
- {
86
- ref,
87
- className: cn("px-2 py-1.5 font-semibold text-sm", className),
88
- ...props
89
- }
90
- ));
91
- SelectLabel.displayName = SelectPrimitive.Label.displayName;
92
- var SelectItem = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
93
- SelectPrimitive.Item,
94
- {
95
- ref,
96
- className: cn(
97
- "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none focus:bg-muted/50 focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
98
- className
99
- ),
100
- ...props,
101
- children: [
102
- /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) }) }),
103
- /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
104
- ]
105
- }
106
- ));
107
- SelectItem.displayName = SelectPrimitive.Item.displayName;
108
- var SelectSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
109
- SelectPrimitive.Separator,
110
- {
111
- ref,
112
- className: cn("-mx-1 my-1 h-px bg-border", className),
113
- ...props
114
- }
115
- ));
116
- SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
117
-
118
- // src/primitives/segmented-control.tsx
119
- import * as React2 from "react";
120
- import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
121
- function SegmentedControl({
122
- value,
123
- onValueChange,
124
- options,
125
- variant = "row",
126
- className,
127
- ...rest
128
- }) {
129
- if (typeof process !== "undefined" && process?.env?.NODE_ENV !== "production" && !rest["aria-label"] && !rest["aria-labelledby"]) {
130
- console.warn(
131
- '[SegmentedControl] role="radiogroup" requires either aria-label or aria-labelledby for accessibility.'
132
- );
133
- }
134
- const optionRefs = React2.useRef(/* @__PURE__ */ new Map());
135
- const hasMatch = options.some((o) => o.value === value);
136
- const handleKeyDown = (e) => {
137
- if (options.length === 0) return;
138
- let idx = options.findIndex((o) => o.value === value);
139
- if (idx === -1) idx = 0;
140
- let next;
141
- if (e.key === "ArrowRight" || e.key === "ArrowDown") next = (idx + 1) % options.length;
142
- else if (e.key === "ArrowLeft" || e.key === "ArrowUp") next = (idx - 1 + options.length) % options.length;
143
- else if (e.key === "Home") next = 0;
144
- else if (e.key === "End") next = options.length - 1;
145
- if (next !== void 0) {
146
- e.preventDefault();
147
- if (options[next].value !== value) {
148
- onValueChange(options[next].value);
149
- }
150
- optionRefs.current.get(options[next].value)?.focus();
151
- }
152
- };
153
- return /* @__PURE__ */ jsx2(
154
- "div",
155
- {
156
- role: "radiogroup",
157
- id: rest.id,
158
- "aria-label": rest["aria-label"],
159
- "aria-labelledby": rest["aria-labelledby"],
160
- onKeyDown: handleKeyDown,
161
- className: cn(
162
- "flex gap-1",
163
- variant === "row" && "flex-wrap items-center rounded-lg border border-border bg-card p-1",
164
- variant === "tabs" && "flex-nowrap items-end border-b border-border pb-0 overflow-x-auto",
165
- className
166
- ),
167
- children: options.map((option, i) => {
168
- const active = option.value === value;
169
- const focusable = active || !hasMatch && i === 0;
170
- return /* @__PURE__ */ jsxs2(
171
- "button",
172
- {
173
- ref: (el) => {
174
- if (el) optionRefs.current.set(option.value, el);
175
- else optionRefs.current.delete(option.value);
176
- },
177
- type: "button",
178
- role: "radio",
179
- "aria-checked": active,
180
- tabIndex: focusable ? 0 : -1,
181
- onClick: () => {
182
- if (!active) onValueChange(option.value);
183
- },
184
- className: cn(
185
- "relative inline-flex items-center gap-2 whitespace-nowrap text-sm transition-colors",
186
- variant === "row" && "rounded-md px-3 py-1.5",
187
- variant === "tabs" && "rounded-none border-b-2 -mb-px px-4 py-2",
188
- // Active styling is the ONLY styled state — unselected
189
- // segments stay transparent on purpose so they don't
190
- // compete visually with the selection.
191
- active ? variant === "row" ? "border border-transparent bg-[var(--accent-surface)] text-[var(--accent-text)] font-semibold" : "border-[var(--accent-text)] text-[var(--accent-text)] font-semibold" : variant === "row" ? "border border-transparent text-muted-foreground hover:text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"
192
- ),
193
- children: [
194
- /* @__PURE__ */ jsx2("span", { children: option.label }),
195
- option.adornment && /* @__PURE__ */ jsx2(
196
- "span",
197
- {
198
- className: cn(
199
- "text-xs",
200
- active ? "text-[var(--accent-text)]/80" : "text-muted-foreground"
201
- ),
202
- children: option.adornment
203
- }
204
- )
205
- ]
206
- },
207
- option.value
208
- );
209
- })
210
- }
211
- );
212
- }
213
-
214
- // src/primitives/switch.tsx
215
- import * as SwitchPrimitives from "@radix-ui/react-switch";
216
- import * as React3 from "react";
217
- import { jsx as jsx3 } from "react/jsx-runtime";
218
- var Switch = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
219
- SwitchPrimitives.Root,
220
- {
221
- className: cn(
222
- "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
223
- className
224
- ),
225
- ...props,
226
- ref,
227
- children: /* @__PURE__ */ jsx3(
228
- SwitchPrimitives.Thumb,
229
- {
230
- className: cn(
231
- "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
232
- )
233
- }
234
- )
235
- }
236
- ));
237
- Switch.displayName = SwitchPrimitives.Root.displayName;
238
-
239
- // src/primitives/toast.tsx
240
- import { cva } from "class-variance-authority";
241
- import {
242
- AlertCircle,
243
- AlertTriangle,
244
- CheckCircle2,
245
- Info,
246
- X
247
- } from "lucide-react";
248
- import * as React4 from "react";
249
- import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
250
- var toastVariants = cva(
251
- "pointer-events-auto relative flex w-full items-center justify-between gap-3 overflow-hidden rounded-lg border p-4 shadow-lg transition-all",
252
- {
253
- variants: {
254
- variant: {
255
- default: "border-border bg-background text-foreground",
256
- success: "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
257
- error: "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]",
258
- warning: "border-[var(--surface-warning-border)] bg-[var(--surface-warning-bg)] text-[var(--surface-warning-text)]",
259
- info: "border-[var(--surface-info-border)] bg-[var(--surface-info-bg)] text-[var(--surface-info-text)]"
260
- }
261
- },
262
- defaultVariants: {
263
- variant: "default"
264
- }
265
- }
266
- );
267
- var icons = {
268
- success: CheckCircle2,
269
- error: AlertCircle,
270
- warning: AlertTriangle,
271
- info: Info,
272
- default: Info
273
- };
274
- function ToastComponent({
275
- id,
276
- title,
277
- description,
278
- variant = "default",
279
- onDismiss
280
- }) {
281
- const Icon2 = icons[variant];
282
- return /* @__PURE__ */ jsxs3(
283
- "div",
284
- {
285
- className: cn(toastVariants({ variant })),
286
- role: "alert",
287
- "aria-live": "polite",
288
- children: [
289
- /* @__PURE__ */ jsxs3("div", { className: "flex items-start gap-3", children: [
290
- /* @__PURE__ */ jsx4(Icon2, { className: "h-5 w-5 shrink-0", "aria-hidden": "true" }),
291
- /* @__PURE__ */ jsxs3("div", { className: "flex-1", children: [
292
- /* @__PURE__ */ jsx4("p", { className: "font-medium text-sm", children: title }),
293
- description && /* @__PURE__ */ jsx4("p", { className: "mt-1 text-sm opacity-80", children: description })
294
- ] })
295
- ] }),
296
- /* @__PURE__ */ jsx4(
297
- "button",
298
- {
299
- type: "button",
300
- onClick: () => onDismiss(id),
301
- className: "shrink-0 rounded-md p-1 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2",
302
- "aria-label": "Dismiss notification",
303
- children: /* @__PURE__ */ jsx4(X, { className: "h-4 w-4" })
304
- }
305
- )
306
- ]
307
- }
308
- );
309
- }
310
- function ToastContainer({ toasts, onDismiss }) {
311
- return /* @__PURE__ */ jsx4(
312
- "div",
313
- {
314
- className: "fixed right-4 bottom-4 z-50 flex max-w-md flex-col gap-2",
315
- "aria-label": "Notifications",
316
- children: toasts.map((toast) => /* @__PURE__ */ jsx4(ToastComponent, { ...toast, onDismiss }, toast.id))
317
- }
318
- );
319
- }
320
- var ToastContext = React4.createContext(null);
321
- function ToastProvider({ children }) {
322
- const [toasts, setToasts] = React4.useState([]);
323
- const dismiss = React4.useCallback((id) => {
324
- setToasts((prev) => prev.filter((t) => t.id !== id));
325
- }, []);
326
- const toast = React4.useCallback(
327
- (input) => {
328
- const id = Math.random().toString(36).slice(2);
329
- const newToast = { id, ...input };
330
- setToasts((prev) => [...prev, newToast]);
331
- const duration = input.duration ?? 5e3;
332
- if (duration > 0) {
333
- setTimeout(() => dismiss(id), duration);
334
- }
335
- },
336
- [dismiss]
337
- );
338
- const success = React4.useCallback(
339
- (title, description) => {
340
- toast({ title, description, variant: "success" });
341
- },
342
- [toast]
343
- );
344
- const error = React4.useCallback(
345
- (title, description) => {
346
- toast({ title, description, variant: "error" });
347
- },
348
- [toast]
349
- );
350
- const warning = React4.useCallback(
351
- (title, description) => {
352
- toast({ title, description, variant: "warning" });
353
- },
354
- [toast]
355
- );
356
- const info = React4.useCallback(
357
- (title, description) => {
358
- toast({ title, description, variant: "info" });
359
- },
360
- [toast]
361
- );
362
- const value = React4.useMemo(
363
- () => ({ toasts, toast, success, error, warning, info, dismiss }),
364
- [toasts, toast, success, error, warning, info, dismiss]
365
- );
366
- return /* @__PURE__ */ jsxs3(ToastContext.Provider, { value, children: [
367
- children,
368
- /* @__PURE__ */ jsx4(ToastContainer, { toasts, onDismiss: dismiss })
369
- ] });
370
- }
371
- function useToast() {
372
- const context = React4.useContext(ToastContext);
373
- if (!context) {
374
- throw new Error("useToast must be used within a ToastProvider");
375
- }
376
- return context;
377
- }
378
-
379
- // src/primitives/label.tsx
380
- import * as LabelPrimitive from "@radix-ui/react-label";
381
- import { cva as cva2 } from "class-variance-authority";
382
- import * as React5 from "react";
383
- import { jsx as jsx5 } from "react/jsx-runtime";
384
- var labelVariants = cva2(
385
- "font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
386
- );
387
- var Label2 = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
388
- LabelPrimitive.Root,
389
- {
390
- ref,
391
- className: cn(labelVariants(), className),
392
- ...props
393
- }
394
- ));
395
- Label2.displayName = LabelPrimitive.Root.displayName;
396
-
397
- // src/primitives/terminal-display.tsx
398
- import * as React6 from "react";
399
- import { useEffect, useRef as useRef2 } from "react";
400
- import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
401
- var TerminalDisplay = React6.forwardRef(
402
- ({
403
- className,
404
- variant = "default",
405
- title = "Terminal",
406
- showHeader = true,
407
- autoScroll = true,
408
- maxHeight = "400px",
409
- children,
410
- ...props
411
- }, ref) => {
412
- const containerRef = useRef2(null);
413
- useEffect(() => {
414
- if (autoScroll && containerRef.current) {
415
- containerRef.current.scrollTop = containerRef.current.scrollHeight;
416
- }
417
- }, [autoScroll]);
418
- const variants = {
419
- default: "border-border",
420
- sandbox: "border-border shadow-[var(--shadow-accent)]"
421
- };
422
- return /* @__PURE__ */ jsxs4(
423
- "div",
424
- {
425
- ref,
426
- className: cn(
427
- "overflow-hidden rounded-xl border bg-background font-mono text-sm",
428
- variants[variant],
429
- className
430
- ),
431
- ...props,
432
- children: [
433
- showHeader && /* @__PURE__ */ jsx6("div", { className: "flex items-center border-b border-border bg-card px-4 py-3", children: /* @__PURE__ */ jsx6("span", { className: "text-muted-foreground text-xs", children: title }) }),
434
- /* @__PURE__ */ jsx6(
435
- "div",
436
- {
437
- ref: containerRef,
438
- className: "overflow-auto p-4",
439
- style: { maxHeight },
440
- children
441
- }
442
- )
443
- ]
444
- }
445
- );
446
- }
447
- );
448
- TerminalDisplay.displayName = "TerminalDisplay";
449
- var TerminalLine = React6.forwardRef(
450
- ({ className, type = "output", prompt = "$", timestamp, children, ...props }, ref) => {
451
- const typeStyles = {
452
- input: "text-foreground",
453
- output: "text-foreground",
454
- error: "text-[var(--surface-danger-text)]",
455
- success: "text-[var(--surface-success-text)]",
456
- info: "text-[var(--surface-info-text)]",
457
- thinking: "text-[var(--surface-warning-text)] animate-pulse",
458
- command: "text-foreground",
459
- warning: "text-[var(--surface-warning-text)]"
460
- };
461
- return /* @__PURE__ */ jsxs4(
462
- "div",
463
- {
464
- ref,
465
- className: cn(
466
- "flex items-start gap-2 py-0.5 leading-relaxed",
467
- typeStyles[type],
468
- className
469
- ),
470
- ...props,
471
- children: [
472
- (type === "input" || type === "command") && /* @__PURE__ */ jsx6("span", { className: "shrink-0 select-none text-[var(--surface-success-text)]", children: prompt }),
473
- type === "thinking" && /* @__PURE__ */ jsx6("span", { className: "shrink-0 select-none", children: "..." }),
474
- timestamp && /* @__PURE__ */ jsxs4("span", { className: "shrink-0 select-none text-muted-foreground opacity-50", children: [
475
- "[",
476
- timestamp,
477
- "]"
478
- ] }),
479
- /* @__PURE__ */ jsx6("span", { className: "whitespace-pre-wrap break-all", children })
480
- ]
481
- }
482
- );
483
- }
484
- );
485
- TerminalLine.displayName = "TerminalLine";
486
- var TerminalCursor = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
487
- "span",
488
- {
489
- ref,
490
- className: cn(
491
- "ml-0.5 inline-block h-4 w-2 animate-pulse bg-foreground",
492
- className
493
- ),
494
- ...props
495
- }
496
- ));
497
- TerminalCursor.displayName = "TerminalCursor";
498
- var TerminalInput = React6.forwardRef(
499
- ({ className, onSubmit, variant = "default", ...props }, ref) => {
500
- const [value, setValue] = React6.useState("");
501
- const handleKeyDown = (e) => {
502
- if (e.key === "Enter" && value.trim() && onSubmit) {
503
- onSubmit(value.trim());
504
- setValue("");
505
- }
506
- };
507
- const variants = {
508
- default: "border-border focus-within:border-border",
509
- sandbox: "border-border focus-within:border-[var(--border-accent-hover)]"
510
- };
511
- return /* @__PURE__ */ jsxs4(
512
- "div",
513
- {
514
- className: cn(
515
- "flex items-center rounded-lg border bg-background px-4 py-2.5 font-mono text-sm transition-colors",
516
- variants[variant],
517
- className
518
- ),
519
- children: [
520
- /* @__PURE__ */ jsx6("span", { className: "mr-2 select-none text-[var(--surface-success-text)]", children: "$" }),
521
- /* @__PURE__ */ jsx6(
522
- "input",
523
- {
524
- ref,
525
- type: "text",
526
- value,
527
- onChange: (e) => setValue(e.target.value),
528
- onKeyDown: handleKeyDown,
529
- className: "flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground",
530
- ...props
531
- }
532
- ),
533
- /* @__PURE__ */ jsx6(TerminalCursor, {})
534
- ]
535
- }
536
- );
537
- }
538
- );
539
- TerminalInput.displayName = "TerminalInput";
540
-
541
- // src/primitives/drop-zone.tsx
542
- import { useCallback as useCallback2, useRef as useRef3, useState as useState3 } from "react";
543
- import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
544
- function DropZone({
545
- onDrop,
546
- accept,
547
- disabled,
548
- overlay,
549
- title = "Drop files to upload",
550
- description = "Your files will be securely stored in the workspace.",
551
- icon = "cloud_upload",
552
- children,
553
- className
554
- }) {
555
- const [dragOver, setDragOver] = useState3(false);
556
- const counter = useRef3(0);
557
- const isAccepted = useCallback2(
558
- (file) => {
559
- if (!accept) return true;
560
- const extensions = accept.split(",").map((ext) => ext.trim().toLowerCase());
561
- const fileName = file.name.toLowerCase();
562
- return extensions.some((ext) => fileName.endsWith(ext));
563
- },
564
- [accept]
565
- );
566
- const handleDragEnter = useCallback2(
567
- (e) => {
568
- e.preventDefault();
569
- if (disabled) return;
570
- counter.current++;
571
- if (e.dataTransfer?.types.includes("Files")) setDragOver(true);
572
- },
573
- [disabled]
574
- );
575
- const handleDragLeave = useCallback2((e) => {
576
- e.preventDefault();
577
- counter.current--;
578
- if (counter.current === 0) setDragOver(false);
579
- }, []);
580
- const handleDragOver = useCallback2(
581
- (e) => {
582
- e.preventDefault();
583
- if (!disabled) e.dataTransfer.dropEffect = "copy";
584
- },
585
- [disabled]
586
- );
587
- const handleDrop = useCallback2(
588
- (e) => {
589
- e.preventDefault();
590
- counter.current = 0;
591
- setDragOver(false);
592
- if (disabled) return;
593
- const allFiles = Array.from(e.dataTransfer?.files || []);
594
- const accepted = accept ? allFiles.filter(isAccepted) : allFiles;
595
- if (accepted.length > 0) onDrop(accepted);
596
- },
597
- [disabled, accept, isAccepted, onDrop]
598
- );
599
- return /* @__PURE__ */ jsxs5(
600
- "div",
601
- {
602
- onDragEnter: handleDragEnter,
603
- onDragLeave: handleDragLeave,
604
- onDragOver: handleDragOver,
605
- onDrop: handleDrop,
606
- className: cn("relative", className),
607
- children: [
608
- dragOver && (overlay || /* @__PURE__ */ jsx7("div", { className: "fixed inset-0 z-[100] flex items-center justify-center pointer-events-none bg-background", children: /* @__PURE__ */ jsxs5("div", { className: "rounded-2xl border-2 border-dashed border-border bg-card p-16 text-center shadow-[var(--shadow-dropdown)] max-w-lg mx-auto", children: [
609
- /* @__PURE__ */ jsx7("div", { className: "mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-2xl border border-border bg-[var(--accent-surface-soft)]", children: typeof icon === "string" ? /* @__PURE__ */ jsxs5("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "h-10 w-10 text-[var(--accent-text)]", children: [
610
- /* @__PURE__ */ jsx7("title", { children: "Upload" }),
611
- /* @__PURE__ */ jsx7("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
612
- /* @__PURE__ */ jsx7("polyline", { points: "17 8 12 3 7 8" }),
613
- /* @__PURE__ */ jsx7("line", { x1: "12", x2: "12", y1: "3", y2: "15" })
614
- ] }) : icon }),
615
- /* @__PURE__ */ jsx7("h2", { className: "text-2xl font-bold text-foreground", children: title }),
616
- /* @__PURE__ */ jsx7("p", { className: "mt-2 text-sm text-muted-foreground", children: description })
617
- ] }) })),
618
- children
619
- ]
620
- }
621
- );
622
- }
623
-
624
- // src/primitives/upload-progress.tsx
625
- import { AlertCircle as AlertCircle2, CheckCircle2 as CheckCircle22, FileText, Loader2, RefreshCw, X as X2 } from "lucide-react";
626
- import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
627
- function formatSize(bytes) {
628
- if (bytes < 1024) return `${bytes}B`;
629
- if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)}KB`;
630
- return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
631
- }
632
- function UploadProgress({ files, onRemove, onRetry, className }) {
633
- if (files.length === 0) return null;
634
- return /* @__PURE__ */ jsx8("div", { className: cn("space-y-2", className), children: files.map((file) => /* @__PURE__ */ jsxs6(
635
- "div",
636
- {
637
- className: cn(
638
- "flex items-center gap-3 rounded-lg border px-3 py-2 text-sm",
639
- file.status === "error" ? "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)]" : file.status === "complete" ? "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)]" : "border-border bg-card"
640
- ),
641
- children: [
642
- file.status === "complete" && /* @__PURE__ */ jsx8(CheckCircle22, { className: "h-4 w-4 shrink-0 text-[var(--surface-success-text)]" }),
643
- file.status === "error" && /* @__PURE__ */ jsx8(AlertCircle2, { className: "h-4 w-4 shrink-0 text-[var(--surface-danger-text)]" }),
644
- file.status === "uploading" && /* @__PURE__ */ jsx8(Loader2, { className: "h-4 w-4 shrink-0 animate-spin text-primary" }),
645
- file.status === "pending" && /* @__PURE__ */ jsx8(FileText, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
646
- /* @__PURE__ */ jsxs6("div", { className: "min-w-0 flex-1", children: [
647
- /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
648
- /* @__PURE__ */ jsx8("span", { className: "truncate font-medium text-foreground", children: file.name }),
649
- /* @__PURE__ */ jsx8("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatSize(file.size) })
650
- ] }),
651
- file.status === "uploading" && file.progress !== void 0 && /* @__PURE__ */ jsx8("div", { className: "mt-1 h-1 w-full overflow-hidden rounded-full bg-muted/50", children: /* @__PURE__ */ jsx8(
652
- "div",
653
- {
654
- className: "h-full rounded-full bg-primary transition-all",
655
- style: { width: `${file.progress}%` }
656
- }
657
- ) }),
658
- file.status === "error" && file.error && /* @__PURE__ */ jsx8("p", { className: "mt-0.5 text-xs text-[var(--surface-danger-text)]", children: file.error })
659
- ] }),
660
- /* @__PURE__ */ jsxs6("div", { className: "flex shrink-0 items-center gap-1", children: [
661
- file.status === "error" && onRetry && /* @__PURE__ */ jsx8(
662
- "button",
663
- {
664
- type: "button",
665
- onClick: () => onRetry(file.id),
666
- className: "rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
667
- children: /* @__PURE__ */ jsx8(RefreshCw, { className: "h-3.5 w-3.5" })
668
- }
669
- ),
670
- onRemove && /* @__PURE__ */ jsx8(
671
- "button",
672
- {
673
- type: "button",
674
- onClick: () => onRemove(file.id),
675
- className: "rounded p-1 text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
676
- children: /* @__PURE__ */ jsx8(X2, { className: "h-3.5 w-3.5" })
677
- }
678
- )
679
- ] })
680
- ]
681
- },
682
- file.id
683
- )) });
684
- }
685
-
686
- // src/primitives/sidebar-drop-zone.tsx
687
- import { useCallback as useCallback3, useRef as useRef4, useState as useState4 } from "react";
688
- import { Upload } from "lucide-react";
689
- import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
690
- function SidebarDropZone({
691
- onDrop,
692
- accept,
693
- disabled,
694
- title = "Drop files here",
695
- description,
696
- icon,
697
- persistent = false,
698
- className
699
- }) {
700
- const [dragOver, setDragOver] = useState4(false);
701
- const counter = useRef4(0);
702
- const isAccepted = useCallback3(
703
- (file) => {
704
- if (!accept) return true;
705
- const extensions = accept.split(",").map((ext) => ext.trim().toLowerCase());
706
- const fileName = file.name.toLowerCase();
707
- return extensions.some((ext) => fileName.endsWith(ext));
708
- },
709
- [accept]
710
- );
711
- const handleDragEnter = useCallback3(
712
- (e) => {
713
- e.preventDefault();
714
- e.stopPropagation();
715
- if (disabled) return;
716
- counter.current++;
717
- if (e.dataTransfer?.types.includes("Files")) setDragOver(true);
718
- },
719
- [disabled]
720
- );
721
- const handleDragLeave = useCallback3((e) => {
722
- e.preventDefault();
723
- e.stopPropagation();
724
- counter.current--;
725
- if (counter.current === 0) setDragOver(false);
726
- }, []);
727
- const handleDragOver = useCallback3(
728
- (e) => {
729
- e.preventDefault();
730
- e.stopPropagation();
731
- if (!disabled) e.dataTransfer.dropEffect = "copy";
732
- },
733
- [disabled]
734
- );
735
- const handleDrop = useCallback3(
736
- (e) => {
737
- e.preventDefault();
738
- e.stopPropagation();
739
- counter.current = 0;
740
- setDragOver(false);
741
- if (disabled) return;
742
- const allFiles = Array.from(e.dataTransfer?.files || []);
743
- const accepted = accept ? allFiles.filter(isAccepted) : allFiles;
744
- if (accepted.length > 0) onDrop(accepted);
745
- },
746
- [disabled, accept, isAccepted, onDrop]
747
- );
748
- const isVisible = persistent || dragOver;
749
- return /* @__PURE__ */ jsx9(
750
- "div",
751
- {
752
- onDragEnter: handleDragEnter,
753
- onDragLeave: handleDragLeave,
754
- onDragOver: handleDragOver,
755
- onDrop: handleDrop,
756
- className: cn(
757
- "rounded-lg border-2 border-dashed transition-all duration-150",
758
- isVisible ? "p-4" : "p-0 border-transparent",
759
- dragOver ? "border-[var(--brand-cool,hsl(var(--ring)))] bg-[var(--accent-surface-soft)]" : persistent ? "border-[var(--border-subtle,hsl(var(--border)))] bg-transparent hover:border-[var(--border-default,hsl(var(--border)))] hover:bg-[var(--bg-hover,hsl(var(--accent)))]" : "",
760
- disabled && "opacity-50 pointer-events-none",
761
- className
762
- ),
763
- children: isVisible && /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-center gap-2 text-center", children: [
764
- /* @__PURE__ */ jsx9("div", { className: cn(
765
- "flex h-8 w-8 items-center justify-center rounded-lg transition-colors",
766
- dragOver ? "bg-[var(--brand-cool,hsl(var(--primary)))]/15 text-[var(--brand-cool,hsl(var(--primary)))]" : "text-[var(--text-muted,hsl(var(--muted-foreground)))]"
767
- ), children: icon ?? /* @__PURE__ */ jsx9(Upload, { className: "h-4 w-4" }) }),
768
- /* @__PURE__ */ jsx9("p", { className: cn(
769
- "text-xs font-medium",
770
- dragOver ? "text-[var(--text-primary,hsl(var(--foreground)))]" : "text-[var(--text-muted,hsl(var(--muted-foreground)))]"
771
- ), children: title }),
772
- description && /* @__PURE__ */ jsx9("p", { className: "text-[10px] text-[var(--text-muted,hsl(var(--muted-foreground)))]", children: description })
773
- ] })
774
- }
775
- );
776
- }
777
-
778
- export {
779
- Select,
780
- SelectGroup,
781
- SelectValue,
782
- SelectTrigger,
783
- SelectScrollUpButton,
784
- SelectScrollDownButton,
785
- SelectContent,
786
- SelectLabel,
787
- SelectItem,
788
- SelectSeparator,
789
- SegmentedControl,
790
- Switch,
791
- ToastContainer,
792
- ToastProvider,
793
- useToast,
794
- Label2 as Label,
795
- TerminalDisplay,
796
- TerminalLine,
797
- TerminalCursor,
798
- TerminalInput,
799
- DropZone,
800
- UploadProgress,
801
- SidebarDropZone
802
- };