@tangle-network/sandbox-ui 0.13.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 (106) 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-ESVYBDGA.js → chunk-AG7QDC2Q.js} +182 -2
  10. package/dist/chunk-AHBZCBDO.js +2960 -0
  11. package/dist/chunk-AZ3AWMTM.js +8 -0
  12. package/dist/chunk-CMY7W45U.js +380 -0
  13. package/dist/{chunk-QMU2PWOU.js → chunk-DNZ4DTNA.js} +71 -17
  14. package/dist/chunk-EI44GEQ5.js +6 -0
  15. package/dist/{chunk-5OQ27N57.js → chunk-GPT7VKK6.js} +34 -38
  16. package/dist/chunk-JBGKGLD7.js +16 -0
  17. package/dist/chunk-NJNME4J4.js +14 -0
  18. package/dist/chunk-QPAJR74X.js +20 -0
  19. package/dist/chunk-TK46XFLM.js +28 -0
  20. package/dist/chunk-WID73FPH.js +89 -0
  21. package/dist/chunk-YVXK4XRO.js +30 -0
  22. package/dist/dashboard.d.ts +538 -4
  23. package/dist/dashboard.js +15 -886
  24. package/dist/editor.d.ts +1 -120
  25. package/dist/editor.js +1 -5
  26. package/dist/files.d.ts +1 -129
  27. package/dist/files.js +2 -7
  28. package/dist/globals.css +5 -1265
  29. package/dist/hooks.d.ts +114 -11
  30. package/dist/hooks.js +17 -88
  31. package/dist/index.d.ts +24 -99
  32. package/dist/index.js +247 -252
  33. package/dist/markdown.d.ts +1 -29
  34. package/dist/markdown.js +2 -2
  35. package/dist/openui.d.ts +8 -115
  36. package/dist/openui.js +1 -6
  37. package/dist/pages.d.ts +1 -2
  38. package/dist/pages.js +68 -66
  39. package/dist/primitives.d.ts +14 -49
  40. package/dist/primitives.js +69 -77
  41. package/dist/run.d.ts +1 -14
  42. package/dist/run.js +2 -22
  43. package/dist/sdk-hooks.d.ts +3 -283
  44. package/dist/sdk-hooks.js +10 -14
  45. package/dist/stores.d.ts +2 -14
  46. package/dist/stores.js +11 -39
  47. package/dist/styles.css +5 -1265
  48. package/dist/{usage-chart-CPTcNlGs.d.ts → template-card-UhV3pmRC.d.ts} +16 -1
  49. package/dist/terminal.js +39 -2
  50. package/dist/types.d.ts +11 -8
  51. package/dist/types.js +1 -0
  52. package/dist/utils.d.ts +1 -44
  53. package/dist/utils.js +6 -12
  54. package/dist/workspace.d.ts +5 -10
  55. package/dist/workspace.js +3 -19
  56. package/package.json +23 -54
  57. package/dist/active-sessions-store-CeOmXgv5.d.ts +0 -85
  58. package/dist/artifact-pane-Bh45Ssco.d.ts +0 -24
  59. package/dist/branding-DCi5VEik.d.ts +0 -13
  60. package/dist/button-CMQuQEW_.d.ts +0 -17
  61. package/dist/chat-container-f4yEs6KN.d.ts +0 -106
  62. package/dist/chunk-34A66VBG.js +0 -214
  63. package/dist/chunk-34I7UFSX.js +0 -92
  64. package/dist/chunk-36QY2W5G.js +0 -802
  65. package/dist/chunk-4CLN43XT.js +0 -45
  66. package/dist/chunk-54SQQMMM.js +0 -156
  67. package/dist/chunk-66EZOYZR.js +0 -102
  68. package/dist/chunk-BX6AQMUS.js +0 -183
  69. package/dist/chunk-DI3NZ5ZX.js +0 -192
  70. package/dist/chunk-DPGIXDAI.js +0 -220
  71. package/dist/chunk-DXMIEK4K.js +0 -1426
  72. package/dist/chunk-GSZA3TSY.js +0 -79
  73. package/dist/chunk-HB5Y37YU.js +0 -54
  74. package/dist/chunk-LQNEZDRM.js +0 -109
  75. package/dist/chunk-MA7YKRUP.js +0 -131
  76. package/dist/chunk-MKTSMWVD.js +0 -109
  77. package/dist/chunk-MQXABZTB.js +0 -1348
  78. package/dist/chunk-MT5FJ3ZT.js +0 -186
  79. package/dist/chunk-NKUPJC34.js +0 -2070
  80. package/dist/chunk-OEX7NZE3.js +0 -321
  81. package/dist/chunk-OKLQVY3Y.js +0 -139
  82. package/dist/chunk-Q56BYXQF.js +0 -61
  83. package/dist/chunk-QD4QE5P5.js +0 -40
  84. package/dist/chunk-QDH5GEGY.js +0 -630
  85. package/dist/chunk-QID2OOMG.js +0 -133
  86. package/dist/chunk-RQHJBTEU.js +0 -10
  87. package/dist/chunk-T7HMZEVO.js +0 -216
  88. package/dist/chunk-U6QTHMY6.js +0 -1290
  89. package/dist/chunk-US6JKJKH.js +0 -124
  90. package/dist/chunk-VX3XOUEB.js +0 -63
  91. package/dist/chunk-XLG757B6.js +0 -933
  92. package/dist/chunk-ZMNSRDMH.js +0 -127
  93. package/dist/chunk-ZNCEM5CD.js +0 -316
  94. package/dist/document-editor-pane-A70-EhdQ.d.ts +0 -124
  95. package/dist/document-editor-pane-TLPVRBBU.js +0 -11
  96. package/dist/expanded-tool-detail-Dh99mcbY.d.ts +0 -63
  97. package/dist/file-tabs-BLfxfmAH.d.ts +0 -51
  98. package/dist/parts-CyGkM6Fp.d.ts +0 -50
  99. package/dist/run-CtFZ6s-D.d.ts +0 -41
  100. package/dist/sidebar-drop-zone-tDBsuOH5.d.ts +0 -301
  101. package/dist/sidecar-CFU2W9j1.d.ts +0 -8
  102. package/dist/template-card-BAtvcAkU.d.ts +0 -18
  103. package/dist/tool-call-feed-Bs3MyQMT.d.ts +0 -68
  104. package/dist/tool-display-Ct9nFAzJ.d.ts +0 -32
  105. package/dist/use-sandbox-metrics-B64diPqN.d.ts +0 -141
  106. package/dist/variant-list-BrHYcBCk.d.ts +0 -540
@@ -1,133 +0,0 @@
1
- import {
2
- ToolCallGroup,
3
- ToolCallStep
4
- } from "./chunk-MT5FJ3ZT.js";
5
- import {
6
- Markdown
7
- } from "./chunk-T7HMZEVO.js";
8
- import {
9
- cn
10
- } from "./chunk-RQHJBTEU.js";
11
-
12
- // src/run/tool-call-feed.tsx
13
- import { jsx } from "react/jsx-runtime";
14
- function ToolCallFeed({ segments, className }) {
15
- if (segments.length === 0) return null;
16
- return /* @__PURE__ */ jsx("div", { className: cn("space-y-1", className), children: segments.map((segment, i) => {
17
- if (segment.kind === "text") {
18
- return segment.content.trim() ? /* @__PURE__ */ jsx(Markdown, { children: segment.content }, i) : null;
19
- }
20
- if (segment.kind === "tool_call") {
21
- return /* @__PURE__ */ jsx(
22
- ToolCallStep,
23
- {
24
- type: segment.call.type,
25
- label: segment.call.label,
26
- status: segment.call.status,
27
- detail: segment.call.detail,
28
- output: segment.call.output,
29
- duration: segment.call.duration
30
- },
31
- segment.call.id || i
32
- );
33
- }
34
- if (segment.kind === "tool_group") {
35
- return /* @__PURE__ */ jsx(ToolCallGroup, { title: segment.title, children: segment.calls.map((call) => /* @__PURE__ */ jsx(
36
- ToolCallStep,
37
- {
38
- type: call.type,
39
- label: call.label,
40
- status: call.status,
41
- detail: call.detail,
42
- output: call.output,
43
- duration: call.duration
44
- },
45
- call.id
46
- )) }, i);
47
- }
48
- return null;
49
- }) });
50
- }
51
- function parseToolEvent(event) {
52
- const { type, data } = event;
53
- if (type === "tool.invocation" || type === "tool_use") {
54
- const toolName = data.name || data.tool || "unknown";
55
- const input = data.input;
56
- return {
57
- id: data.id || data.toolUseId || createId(),
58
- type: mapToolName(toolName),
59
- label: formatToolLabel(toolName, input),
60
- status: "running",
61
- detail: input ? formatToolInput(toolName, input) : void 0
62
- };
63
- }
64
- if (type === "tool.result" || type === "tool_result") {
65
- return {
66
- id: data.id || data.toolUseId || "",
67
- type: mapToolName(data.name || data.tool || "unknown"),
68
- label: formatToolLabel(data.name || data.tool || "unknown"),
69
- status: data.error ? "error" : "success",
70
- output: truncate(data.output || data.result || "", 500),
71
- duration: data.duration
72
- };
73
- }
74
- return null;
75
- }
76
- function createId() {
77
- if (typeof globalThis.crypto !== "undefined" && typeof globalThis.crypto.randomUUID === "function") {
78
- try {
79
- return globalThis.crypto.randomUUID();
80
- } catch {
81
- }
82
- }
83
- return `tool_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}`;
84
- }
85
- function mapToolName(name) {
86
- const lower = name.toLowerCase();
87
- if (lower.includes("bash") || lower.includes("terminal") || lower.includes("exec")) return "bash";
88
- if (lower.includes("read") || lower.includes("cat")) return "read";
89
- if (lower.includes("write") || lower.includes("create")) return "write";
90
- if (lower.includes("edit") || lower.includes("replace")) return "edit";
91
- if (lower.includes("glob") || lower.includes("find")) return "glob";
92
- if (lower.includes("grep") || lower.includes("search")) return "grep";
93
- if (lower.includes("list") || lower.includes("ls")) return "list";
94
- if (lower.includes("inspect")) return "inspect";
95
- if (lower.includes("audit")) return "audit";
96
- return "unknown";
97
- }
98
- function formatToolLabel(toolName, input) {
99
- const lower = toolName.toLowerCase();
100
- if (lower.includes("bash") && input?.command) {
101
- const cmd = String(input.command);
102
- return cmd.length > 80 ? `${cmd.slice(0, 77)}...` : cmd;
103
- }
104
- if ((lower.includes("read") || lower.includes("cat")) && input?.path) {
105
- return `Read ${input.path}`;
106
- }
107
- if (lower.includes("write") && input?.path) {
108
- return `Write ${input.path}`;
109
- }
110
- if (lower.includes("edit") && input?.path) {
111
- return `Edit ${input.path}`;
112
- }
113
- if (lower.includes("glob") && input?.pattern) {
114
- return `Find ${input.pattern}`;
115
- }
116
- if (lower.includes("grep") && input?.pattern) {
117
- return `Search for ${input.pattern}`;
118
- }
119
- return toolName;
120
- }
121
- function formatToolInput(toolName, input) {
122
- if (input.command) return String(input.command);
123
- if (input.path) return String(input.path);
124
- return JSON.stringify(input, null, 2).slice(0, 300);
125
- }
126
- function truncate(text, max) {
127
- return text.length > max ? text.slice(0, max - 3) + "..." : text;
128
- }
129
-
130
- export {
131
- ToolCallFeed,
132
- parseToolEvent
133
- };
@@ -1,10 +0,0 @@
1
- // src/lib/utils.ts
2
- import { clsx } from "clsx";
3
- import { twMerge } from "tailwind-merge";
4
- function cn(...inputs) {
5
- return twMerge(clsx(inputs));
6
- }
7
-
8
- export {
9
- cn
10
- };
@@ -1,216 +0,0 @@
1
- import {
2
- cn
3
- } from "./chunk-RQHJBTEU.js";
4
-
5
- // src/markdown/code-block.tsx
6
- import {
7
- memo,
8
- useCallback,
9
- useEffect,
10
- useRef,
11
- useState
12
- } from "react";
13
- import SyntaxHighlighter from "react-syntax-highlighter";
14
- import { Check, Copy } from "lucide-react";
15
- import { jsx, jsxs } from "react/jsx-runtime";
16
- function getSyntaxTheme() {
17
- const el = typeof document !== "undefined" ? document.documentElement : null;
18
- const v = (name, fallback) => el ? getComputedStyle(el).getPropertyValue(name).trim() || fallback : fallback;
19
- const comment = v("--syntax-comment", "#6B7094");
20
- const keyword = v("--syntax-keyword", "#A78FFF");
21
- const string = v("--syntax-string", "#10b981");
22
- const fn = v("--syntax-function", "#6D9FFF");
23
- const number = v("--syntax-number", "#FFB347");
24
- const meta = v("--syntax-meta", "#8263FF");
25
- const error = v("--syntax-error", "#FF4D6D");
26
- const variable = v("--syntax-variable", "#C4C0D8");
27
- const fg = v("--syntax-foreground", "#E8E6F6");
28
- return {
29
- "hljs-comment": { color: comment, fontStyle: "italic" },
30
- "hljs-quote": { color: comment, fontStyle: "italic" },
31
- "hljs-doctag": { color: comment },
32
- "hljs-keyword": { color: keyword },
33
- "hljs-selector-tag": { color: keyword },
34
- "hljs-literal": { color: keyword },
35
- "hljs-type": { color: keyword },
36
- "hljs-class": { color: keyword },
37
- "hljs-string": { color: string },
38
- "hljs-template-tag": { color: string },
39
- "hljs-template-variable": { color: string },
40
- "hljs-addition": { color: string },
41
- "hljs-regexp": { color: string },
42
- "hljs-title": { color: fn },
43
- "hljs-section": { color: fn },
44
- "hljs-built_in": { color: fn },
45
- "hljs-name": { color: fn },
46
- "hljs-function": { color: fn },
47
- "hljs-selector-id": { color: fn },
48
- "hljs-selector-class": { color: fn },
49
- "hljs-attribute": { color: fn },
50
- "hljs-number": { color: number },
51
- "hljs-symbol": { color: number },
52
- "hljs-bullet": { color: number },
53
- "hljs-link": { color: number, textDecoration: "underline" },
54
- "hljs-meta": { color: meta },
55
- "hljs-selector-pseudo": { color: meta },
56
- "hljs-deletion": { color: error },
57
- "hljs-params": { color: variable },
58
- "hljs-variable": { color: variable },
59
- "hljs-tag": { color: variable },
60
- "hljs-attr": { color: variable },
61
- "hljs-subst": { color: variable },
62
- "hljs-strong": { fontWeight: "bold" },
63
- "hljs-emphasis": { fontStyle: "italic" },
64
- "hljs": { color: fg, background: "transparent" }
65
- };
66
- }
67
- var LIGHT_THEMES = /* @__PURE__ */ new Set(["vault", "dawn"]);
68
- function detectLightTheme() {
69
- return typeof document !== "undefined" && LIGHT_THEMES.has(document.documentElement.getAttribute("data-sandbox-theme") ?? "");
70
- }
71
- function useIsLightTheme() {
72
- const [isLight, setIsLight] = useState(detectLightTheme);
73
- useEffect(() => {
74
- if (typeof document === "undefined") return;
75
- setIsLight(detectLightTheme());
76
- const observer = new MutationObserver(() => setIsLight(detectLightTheme()));
77
- observer.observe(document.documentElement, {
78
- attributes: true,
79
- attributeFilter: ["data-sandbox-theme"]
80
- });
81
- return () => observer.disconnect();
82
- }, []);
83
- return isLight;
84
- }
85
- var CodeBlock = memo(
86
- ({ code, language, showLineNumbers = false, light: lightProp, className, children, ...props }) => {
87
- const isLight = useIsLightTheme();
88
- const light = lightProp ?? isLight;
89
- const theme = getSyntaxTheme();
90
- const bg = "bg-card border-border";
91
- const headerBg = light ? "bg-muted/50 border-border" : "bg-background border-border";
92
- const langColor = "text-muted-foreground";
93
- return /* @__PURE__ */ jsxs(
94
- "div",
95
- {
96
- className: cn("group relative overflow-hidden rounded-lg border font-mono", bg, className),
97
- ...props,
98
- children: [
99
- language && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between border-b px-3 py-1", headerBg), children: [
100
- /* @__PURE__ */ jsx("span", { className: cn("text-[calc(var(--font-size-xs)-1px)] font-mono font-medium uppercase tracking-widest", langColor), children: language }),
101
- children
102
- ] }),
103
- !language && children && /* @__PURE__ */ jsx("div", { className: "absolute right-2 top-2 z-10 flex items-center gap-2 opacity-0 transition-opacity group-hover:opacity-100", children }),
104
- /* @__PURE__ */ jsx(
105
- SyntaxHighlighter,
106
- {
107
- language: language ?? "text",
108
- style: theme,
109
- showLineNumbers,
110
- lineNumberStyle: {
111
- color: light ? "#8B92B8" : "#4A4D6A",
112
- minWidth: "2.5em",
113
- paddingRight: "1em"
114
- },
115
- customStyle: {
116
- margin: 0,
117
- padding: "var(--code-padding-y, 0.625rem) var(--code-padding-x, 0.75rem)",
118
- background: "transparent",
119
- fontSize: "var(--code-font-size, 0.8125rem)",
120
- lineHeight: "var(--code-line-height, 1.5)",
121
- overflowX: "auto"
122
- },
123
- codeTagProps: { style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } },
124
- wrapLines: false,
125
- children: code
126
- }
127
- )
128
- ]
129
- }
130
- );
131
- }
132
- );
133
- CodeBlock.displayName = "CodeBlock";
134
- var CopyButton = memo(({ text }) => {
135
- const [copied, setCopied] = useState(false);
136
- const timerRef = useRef(null);
137
- useEffect(() => {
138
- return () => {
139
- if (timerRef.current) clearTimeout(timerRef.current);
140
- };
141
- }, []);
142
- const handleCopy = useCallback(async () => {
143
- try {
144
- await navigator.clipboard.writeText(text);
145
- setCopied(true);
146
- if (timerRef.current) clearTimeout(timerRef.current);
147
- timerRef.current = setTimeout(() => setCopied(false), 2e3);
148
- } catch (err) {
149
- console.warn("Clipboard write failed:", err);
150
- }
151
- }, [text]);
152
- return /* @__PURE__ */ jsx(
153
- "button",
154
- {
155
- onClick: handleCopy,
156
- className: "flex items-center justify-center w-6 h-6 rounded-md bg-muted border border-border hover:border-primary/20 transition-colors",
157
- title: "Copy to clipboard",
158
- children: copied ? /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-emerald-500" }) : /* @__PURE__ */ jsx(Copy, { className: "w-3.5 h-3.5 text-muted-foreground" })
159
- }
160
- );
161
- });
162
- CopyButton.displayName = "CopyButton";
163
-
164
- // src/markdown/markdown.tsx
165
- import { memo as memo2 } from "react";
166
- import ReactMarkdown from "react-markdown";
167
- import remarkGfm from "remark-gfm";
168
- import rehypeSanitize from "rehype-sanitize";
169
- import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
170
- var Markdown = memo2(({ children, className }) => {
171
- return /* @__PURE__ */ jsx2(
172
- "div",
173
- {
174
- className: cn("prose prose-sm dark:prose-invert max-w-none", className),
175
- children: /* @__PURE__ */ jsx2(
176
- ReactMarkdown,
177
- {
178
- remarkPlugins: [remarkGfm],
179
- rehypePlugins: [rehypeSanitize],
180
- components: {
181
- pre({ children: preChildren }) {
182
- return /* @__PURE__ */ jsx2(Fragment, { children: preChildren });
183
- },
184
- code({ className: codeClass, children: codeChildren, ...rest }) {
185
- const match = /language-(\w+)/.exec(codeClass || "");
186
- const language = match?.[1];
187
- const code = String(codeChildren).replace(/\n$/, "");
188
- if (!language && !code.includes("\n")) {
189
- return /* @__PURE__ */ jsx2(
190
- "code",
191
- {
192
- className: cn(
193
- "px-1.5 py-0.5 rounded border border-border bg-card text-[var(--code-keyword)] text-[0.85em] font-mono",
194
- codeClass
195
- ),
196
- ...rest,
197
- children: codeChildren
198
- }
199
- );
200
- }
201
- return /* @__PURE__ */ jsx2(CodeBlock, { code, language, children: /* @__PURE__ */ jsx2(CopyButton, { text: code }) });
202
- }
203
- },
204
- children
205
- }
206
- )
207
- }
208
- );
209
- });
210
- Markdown.displayName = "Markdown";
211
-
212
- export {
213
- CodeBlock,
214
- CopyButton,
215
- Markdown
216
- };