@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,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
- };