@tangle-network/sandbox-ui 0.4.0 → 0.5.1

package/dist/chunk-H5XYSFYE.js

@@ -0,0 +1,228 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/markdown/code-block.tsx
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useState
+} from "react";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { Check, Copy } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var tangleDark = {
+  "hljs-comment": { color: "#6B7094", fontStyle: "italic" },
+  "hljs-quote": { color: "#6B7094", fontStyle: "italic" },
+  "hljs-doctag": { color: "#6B7094" },
+  "hljs-keyword": { color: "#A78FFF" },
+  "hljs-selector-tag": { color: "#A78FFF" },
+  "hljs-literal": { color: "#A78FFF" },
+  "hljs-type": { color: "#A78FFF" },
+  "hljs-class": { color: "#A78FFF" },
+  "hljs-string": { color: "#10b981" },
+  "hljs-template-tag": { color: "#10b981" },
+  "hljs-template-variable": { color: "#10b981" },
+  "hljs-addition": { color: "#10b981" },
+  "hljs-regexp": { color: "#10b981" },
+  "hljs-title": { color: "#6D9FFF" },
+  "hljs-section": { color: "#6D9FFF" },
+  "hljs-built_in": { color: "#6D9FFF" },
+  "hljs-name": { color: "#6D9FFF" },
+  "hljs-function": { color: "#6D9FFF" },
+  "hljs-selector-id": { color: "#6D9FFF" },
+  "hljs-selector-class": { color: "#6D9FFF" },
+  "hljs-attribute": { color: "#6D9FFF" },
+  "hljs-number": { color: "#FFB347" },
+  "hljs-symbol": { color: "#FFB347" },
+  "hljs-bullet": { color: "#FFB347" },
+  "hljs-link": { color: "#FFB347", textDecoration: "underline" },
+  "hljs-meta": { color: "#8263FF" },
+  "hljs-selector-pseudo": { color: "#8263FF" },
+  "hljs-deletion": { color: "#FF4D6D" },
+  "hljs-params": { color: "#C4C0D8" },
+  "hljs-variable": { color: "#C4C0D8" },
+  "hljs-tag": { color: "#C4C0D8" },
+  "hljs-attr": { color: "#C4C0D8" },
+  "hljs-subst": { color: "#C4C0D8" },
+  "hljs-strong": { fontWeight: "bold" },
+  "hljs-emphasis": { fontStyle: "italic" },
+  "hljs": { color: "#E8E6F6", background: "transparent" }
+};
+var tangleLight = {
+  "hljs-comment": { color: "#8B92B8", fontStyle: "italic" },
+  "hljs-quote": { color: "#8B92B8", fontStyle: "italic" },
+  "hljs-doctag": { color: "#8B92B8" },
+  "hljs-keyword": { color: "#5B3FCC" },
+  "hljs-selector-tag": { color: "#5B3FCC" },
+  "hljs-literal": { color: "#5B3FCC" },
+  "hljs-type": { color: "#5B3FCC" },
+  "hljs-class": { color: "#5B3FCC" },
+  "hljs-string": { color: "#0D7A57" },
+  "hljs-template-tag": { color: "#0D7A57" },
+  "hljs-template-variable": { color: "#0D7A57" },
+  "hljs-addition": { color: "#0D7A57" },
+  "hljs-regexp": { color: "#0D7A57" },
+  "hljs-title": { color: "#1B5EBF" },
+  "hljs-section": { color: "#1B5EBF" },
+  "hljs-built_in": { color: "#1B5EBF" },
+  "hljs-name": { color: "#1B5EBF" },
+  "hljs-function": { color: "#1B5EBF" },
+  "hljs-selector-id": { color: "#1B5EBF" },
+  "hljs-selector-class": { color: "#1B5EBF" },
+  "hljs-attribute": { color: "#1B5EBF" },
+  "hljs-number": { color: "#B85C00" },
+  "hljs-symbol": { color: "#B85C00" },
+  "hljs-bullet": { color: "#B85C00" },
+  "hljs-link": { color: "#B85C00", textDecoration: "underline" },
+  "hljs-meta": { color: "#6940C4" },
+  "hljs-selector-pseudo": { color: "#6940C4" },
+  "hljs-deletion": { color: "#CC1A3A" },
+  "hljs-params": { color: "#2D2D4A" },
+  "hljs-variable": { color: "#2D2D4A" },
+  "hljs-tag": { color: "#2D2D4A" },
+  "hljs-attr": { color: "#2D2D4A" },
+  "hljs-subst": { color: "#2D2D4A" },
+  "hljs-strong": { fontWeight: "bold" },
+  "hljs-emphasis": { fontStyle: "italic" },
+  "hljs": { color: "#1A1A2E", background: "transparent" }
+};
+function useIsVaultTheme() {
+  const detect = () => typeof document !== "undefined" && document.documentElement.getAttribute("data-sandbox-theme") === "vault";
+  const [isVault, setIsVault] = useState(detect);
+  useEffect(() => {
+    setIsVault(detect());
+    const observer = new MutationObserver(() => setIsVault(detect()));
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-sandbox-theme"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  return isVault;
+}
+var CodeBlock = memo(
+  ({ code, language, showLineNumbers = false, light: lightProp, className, children, ...props }) => {
+    const isVault = useIsVaultTheme();
+    const light = lightProp ?? isVault;
+    const theme = light ? tangleLight : tangleDark;
+    const bg = "bg-[var(--depth-2)] border-[var(--border-subtle)]";
+    const headerBg = light ? "bg-[var(--depth-3)] border-[var(--border-subtle)]" : "bg-[var(--depth-1)] border-[var(--border-subtle)]";
+    const langColor = "text-[var(--text-muted)]";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("group relative overflow-hidden rounded-lg border font-mono", bg, className),
+        ...props,
+        children: [
+          language && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between border-b px-4 py-1.5", headerBg), children: [
+            /* @__PURE__ */ jsx("span", { className: cn("text-[11px] font-mono font-medium uppercase tracking-widest", langColor), children: language }),
+            children
+          ] }),
+          !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 }),
+          /* @__PURE__ */ jsx(
+            SyntaxHighlighter,
+            {
+              language: language ?? "text",
+              style: theme,
+              showLineNumbers,
+              lineNumberStyle: {
+                color: light ? "#8B92B8" : "#4A4D6A",
+                minWidth: "2.5em",
+                paddingRight: "1em"
+              },
+              customStyle: {
+                margin: 0,
+                padding: "1rem",
+                background: "transparent",
+                fontSize: "0.8125rem",
+                lineHeight: "1.65",
+                overflowX: "auto"
+              },
+              codeTagProps: { style: { fontFamily: "var(--font-mono, 'JetBrains Mono', ui-monospace, monospace)" } },
+              wrapLines: false,
+              children: code
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+CodeBlock.displayName = "CodeBlock";
+var CopyButton = memo(({ text }) => {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch {
+    }
+  }, [text]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: handleCopy,
+      className: "flex items-center justify-center w-7 h-7 rounded-md bg-[var(--bg-section)] border border-[var(--border-subtle)] hover:border-[var(--border-default)] transition-colors",
+      title: "Copy to clipboard",
+      children: copied ? /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5 text-[var(--brand-emerald)]" }) : /* @__PURE__ */ jsx(Copy, { className: "w-3.5 h-3.5 text-[var(--text-muted)]" })
+    }
+  );
+});
+CopyButton.displayName = "CopyButton";
+
+// src/markdown/markdown.tsx
+import { memo as memo2 } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeSanitize from "rehype-sanitize";
+import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var Markdown = memo2(({ children, className }) => {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: cn("prose prose-sm dark:prose-invert max-w-none", className),
+      children: /* @__PURE__ */ jsx2(
+        ReactMarkdown,
+        {
+          remarkPlugins: [remarkGfm],
+          rehypePlugins: [rehypeSanitize],
+          components: {
+            pre({ children: preChildren }) {
+              return /* @__PURE__ */ jsx2(Fragment, { children: preChildren });
+            },
+            code({ className: codeClass, children: codeChildren, ...rest }) {
+              const match = /language-(\w+)/.exec(codeClass || "");
+              const language = match?.[1];
+              const code = String(codeChildren).replace(/\n$/, "");
+              if (!language && !code.includes("\n")) {
+                return /* @__PURE__ */ jsx2(
+                  "code",
+                  {
+                    className: cn(
+                      "px-1.5 py-0.5 rounded border border-[var(--border-subtle)] bg-[var(--depth-2)] text-[var(--code-keyword)] text-[0.85em] font-mono",
+                      codeClass
+                    ),
+                    ...rest,
+                    children: codeChildren
+                  }
+                );
+              }
+              return /* @__PURE__ */ jsx2(CodeBlock, { code, language, children: /* @__PURE__ */ jsx2(CopyButton, { text: code }) });
+            }
+          },
+          children
+        }
+      )
+    }
+  );
+});
+Markdown.displayName = "Markdown";
+
+export {
+  CodeBlock,
+  CopyButton,
+  Markdown
+};

package/dist/{chunk-TQN3VR4F.js → chunk-JP725R4W.js}

@@ -30,7 +30,7 @@ var TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   {
     ref,
     className: cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      "border-t bg-[var(--depth-2)] font-medium [&>tr]:last:border-b-0",
       className
     ),
     ...props
@@ -42,7 +42,7 @@ var TableRow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
   {
     ref,
     className: cn(
-      "border-border border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      "border-border border-b transition-colors hover:bg-[var(--depth-3)] data-[state=selected]:bg-[var(--depth-3)]",
       className
     ),
     ...props

package/dist/{chunk-CJ2RYVZH.js → chunk-NTSRY4GW.js}

@@ -1,3 +1,6 @@
+import {
+  CodeBlock
+} from "./chunk-H5XYSFYE.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -18,6 +21,52 @@ import {
   Eye
 } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
+var EXT_LANGUAGE = {
+  ts: "typescript",
+  tsx: "typescript",
+  js: "javascript",
+  jsx: "javascript",
+  mjs: "javascript",
+  cjs: "javascript",
+  css: "css",
+  scss: "scss",
+  json: "json",
+  jsonc: "json",
+  md: "markdown",
+  mdx: "markdown",
+  py: "python",
+  sh: "bash",
+  bash: "bash",
+  zsh: "bash",
+  html: "html",
+  htm: "html",
+  yaml: "yaml",
+  yml: "yaml",
+  toml: "toml",
+  rs: "rust",
+  go: "go",
+  sql: "sql",
+  xml: "xml"
+};
+function inferLanguage(detail, language) {
+  if (language) return language;
+  if (!detail) return void 0;
+  const ext = detail.split(".").pop()?.toLowerCase();
+  return ext ? EXT_LANGUAGE[ext] : void 0;
+}
+function isFilePath(detail) {
+  return /[/\\]/.test(detail) || /\.\w{1,6}$/.test(detail);
+}
+function FilePathChip({ path }) {
+  const parts = path.replace(/\\/g, "/").split("/");
+  const filename = parts.pop() ?? path;
+  const dir = parts.length > 0 ? parts.join("/") + "/" : "";
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 rounded-[var(--radius-sm)] border border-[var(--border-subtle)] bg-[var(--depth-1)] px-2.5 py-1.5 font-[var(--font-mono)] text-xs min-w-0", children: [
+    /* @__PURE__ */ jsx(FileCode, { className: "h-3.5 w-3.5 shrink-0 text-[var(--brand-cool)]" }),
+    dir && /* @__PURE__ */ jsx("span", { className: "truncate text-[var(--text-muted)]", children: dir }),
+    /* @__PURE__ */ jsx("span", { className: "shrink-0 font-semibold text-[var(--text-primary)]", children: filename })
+  ] });
+}
 var ICONS = {
   bash: Terminal,
   read: Eye,
@@ -42,12 +91,14 @@ function ToolCallStep({
   status,
   detail,
   output,
+  language,
   duration,
   className
 }) {
   const [expanded, setExpanded] = useState(false);
   const Icon = ICONS[type] || ICONS.unknown;
   const hasExpandable = !!(detail || output);
+  const lang = inferLanguage(detail, language);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -55,7 +106,7 @@ function ToolCallStep({
         "group overflow-hidden rounded-[var(--radius-lg)] border bg-[var(--bg-card)] transition-colors",
         status === "running" && "border-[var(--border-accent)]",
         status === "success" && "border-[var(--border-subtle)] hover:border-[var(--border-accent)]",
-        status === "error" && "border-red-500/30",
+        status === "error" && "border-[var(--surface-danger-border)]",
         className
       ),
       children: [
@@ -74,9 +125,9 @@ function ToolCallStep({
                 {
                   className: cn(
                     "flex h-8 w-8 shrink-0 items-center justify-center rounded-[var(--radius-md)] border",
-                    status === "running" && "border-[var(--border-accent)] bg-[var(--brand-cool)]/12 text-[var(--brand-cool)]",
-                    status === "success" && "border-emerald-500/30 bg-emerald-500/10 text-emerald-200",
-                    status === "error" && "border-red-500/30 bg-red-500/10 text-red-200"
+                    status === "running" && "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-[var(--brand-cool)]",
+                    status === "success" && "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+                    status === "error" && "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]"
                   ),
                   children: status === "running" ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin shrink-0" }) : /* @__PURE__ */ jsx(Icon, { className: cn("h-4 w-4 shrink-0", STATUS_COLORS[status]) })
                 }
@@ -87,9 +138,9 @@ function ToolCallStep({
                 {
                   className: cn(
                     "rounded-full border px-2 py-0.5 text-[11px] font-semibold uppercase tracking-[0.06em]",
-                    status === "running" && "border-[var(--border-accent)] bg-[var(--brand-cool)]/10 text-[var(--brand-cool)]",
-                    status === "success" && "border-emerald-500/30 bg-emerald-500/10 text-emerald-200",
-                    status === "error" && "border-red-500/30 bg-red-500/10 text-red-200"
+                    status === "running" && "border-[var(--border-accent)] bg-[var(--accent-surface-soft)] text-[var(--brand-cool)]",
+                    status === "success" && "border-[var(--surface-success-border)] bg-[var(--surface-success-bg)] text-[var(--surface-success-text)]",
+                    status === "error" && "border-[var(--surface-danger-border)] bg-[var(--surface-danger-bg)] text-[var(--surface-danger-text)]"
                   ),
                   children: status
                 }
@@ -107,9 +158,16 @@ function ToolCallStep({
             ]
           }
         ),
-        expanded && (detail || output) && /* @__PURE__ */ jsxs("div", { className: "space-y-2 border-t border-[var(--border-subtle)] bg-[var(--bg-section)]/50 px-4 py-4", children: [
-          detail && /* @__PURE__ */ jsx("div", { className: "text-xs font-[var(--font-mono)] text-[var(--text-muted)]", children: detail }),
-          output && /* @__PURE__ */ jsx("pre", { className: "max-h-48 overflow-x-auto rounded-[var(--radius-md)] border border-[var(--border-subtle)] bg-[var(--bg-input)] p-3 text-xs font-[var(--font-mono)] text-[var(--text-secondary)]", children: output })
+        expanded && (detail || output) && /* @__PURE__ */ jsxs("div", { className: "space-y-2 border-t border-[var(--border-subtle)] bg-[var(--bg-section)] px-4 py-4", children: [
+          detail && (isFilePath(detail) ? /* @__PURE__ */ jsx(FilePathChip, { path: detail }) : /* @__PURE__ */ jsx("div", { className: "text-xs font-[var(--font-mono)] text-[var(--text-muted)]", children: detail })),
+          output && /* @__PURE__ */ jsx(
+            CodeBlock,
+            {
+              code: output,
+              language: lang,
+              className: "max-h-72 overflow-auto text-xs"
+            }
+          )
         ] })
       ]
     }