@tangle-network/ui 1.0.0

package/dist/chunk-66BNMOVT.js

@@ -0,0 +1,167 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/markdown/code-block.tsx
+import {
+  memo,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import SyntaxHighlighter from "react-syntax-highlighter";
+import { Check, Copy } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function getSyntaxTheme() {
+  const el = typeof document !== "undefined" ? document.documentElement : null;
+  const v = (name, fallback) => el ? getComputedStyle(el).getPropertyValue(name).trim() || fallback : fallback;
+  const comment = v("--syntax-comment", "#6B7094");
+  const keyword = v("--syntax-keyword", "#A78FFF");
+  const string = v("--syntax-string", "#10b981");
+  const fn = v("--syntax-function", "#6D9FFF");
+  const number = v("--syntax-number", "#FFB347");
+  const meta = v("--syntax-meta", "#8263FF");
+  const error = v("--syntax-error", "#FF4D6D");
+  const variable = v("--syntax-variable", "#C4C0D8");
+  const fg = v("--syntax-foreground", "#E8E6F6");
+  return {
+    "hljs-comment": { color: comment, fontStyle: "italic" },
+    "hljs-quote": { color: comment, fontStyle: "italic" },
+    "hljs-doctag": { color: comment },
+    "hljs-keyword": { color: keyword },
+    "hljs-selector-tag": { color: keyword },
+    "hljs-literal": { color: keyword },
+    "hljs-type": { color: keyword },
+    "hljs-class": { color: keyword },
+    "hljs-string": { color: string },
+    "hljs-template-tag": { color: string },
+    "hljs-template-variable": { color: string },
+    "hljs-addition": { color: string },
+    "hljs-regexp": { color: string },
+    "hljs-title": { color: fn },
+    "hljs-section": { color: fn },
+    "hljs-built_in": { color: fn },
+    "hljs-name": { color: fn },
+    "hljs-function": { color: fn },
+    "hljs-selector-id": { color: fn },
+    "hljs-selector-class": { color: fn },
+    "hljs-attribute": { color: fn },
+    "hljs-number": { color: number },
+    "hljs-symbol": { color: number },
+    "hljs-bullet": { color: number },
+    "hljs-link": { color: number, textDecoration: "underline" },
+    "hljs-meta": { color: meta },
+    "hljs-selector-pseudo": { color: meta },
+    "hljs-deletion": { color: error },
+    "hljs-params": { color: variable },
+    "hljs-variable": { color: variable },
+    "hljs-tag": { color: variable },
+    "hljs-attr": { color: variable },
+    "hljs-subst": { color: variable },
+    "hljs-strong": { fontWeight: "bold" },
+    "hljs-emphasis": { fontStyle: "italic" },
+    "hljs": { color: fg, background: "transparent" }
+  };
+}
+var LIGHT_THEMES = /* @__PURE__ */ new Set(["vault", "dawn"]);
+function detectLightTheme() {
+  return typeof document !== "undefined" && LIGHT_THEMES.has(document.documentElement.getAttribute("data-sandbox-theme") ?? "");
+}
+function useIsLightTheme() {
+  const [isLight, setIsLight] = useState(detectLightTheme);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    setIsLight(detectLightTheme());
+    const observer = new MutationObserver(() => setIsLight(detectLightTheme()));
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-sandbox-theme"]
+    });
+    return () => observer.disconnect();
+  }, []);
+  return isLight;
+}
+var CodeBlock = memo(
+  ({ code, language, showLineNumbers = false, light: lightProp, className, children, ...props }) => {
+    const isLight = useIsLightTheme();
+    const light = lightProp ?? isLight;
+    const theme = getSyntaxTheme();
+    const bg = "bg-card border-border";
+    const headerBg = light ? "bg-muted/50 border-border" : "bg-background border-border";
+    const langColor = "text-muted-foreground";
+    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-3 py-1", headerBg), children: [
+            /* @__PURE__ */ jsx("span", { className: cn("text-[calc(var(--font-size-xs)-1px)] 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: "var(--code-padding-y, 0.625rem) var(--code-padding-x, 0.75rem)",
+                background: "transparent",
+                fontSize: "var(--code-font-size, 0.8125rem)",
+                lineHeight: "var(--code-line-height, 1.5)",
+                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 timerRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current);
+    };
+  }, []);
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      if (timerRef.current) clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setCopied(false), 2e3);
+    } catch (err) {
+      console.warn("Clipboard write failed:", err);
+    }
+  }, [text]);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      onClick: handleCopy,
+      className: "flex items-center justify-center w-6 h-6 rounded-md bg-muted border border-border hover:border-primary/20 transition-colors",
+      title: "Copy to clipboard",
+      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" })
+    }
+  );
+});
+CopyButton.displayName = "CopyButton";
+
+export {
+  CodeBlock,
+  CopyButton
+};

package/dist/chunk-7UO2ZMRQ.js

@@ -0,0 +1,133 @@
+import {
+  ToolCallGroup,
+  ToolCallStep
+} from "./chunk-2VH6PUXD.js";
+import {
+  Markdown
+} from "./chunk-CD53GZOM.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/run/tool-call-feed.tsx
+import { jsx } from "react/jsx-runtime";
+function ToolCallFeed({ segments, className }) {
+  if (segments.length === 0) return null;
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-1", className), children: segments.map((segment, i) => {
+    if (segment.kind === "text") {
+      return segment.content.trim() ? /* @__PURE__ */ jsx(Markdown, { children: segment.content }, i) : null;
+    }
+    if (segment.kind === "tool_call") {
+      return /* @__PURE__ */ jsx(
+        ToolCallStep,
+        {
+          type: segment.call.type,
+          label: segment.call.label,
+          status: segment.call.status,
+          detail: segment.call.detail,
+          output: segment.call.output,
+          duration: segment.call.duration
+        },
+        segment.call.id || i
+      );
+    }
+    if (segment.kind === "tool_group") {
+      return /* @__PURE__ */ jsx(ToolCallGroup, { title: segment.title, children: segment.calls.map((call) => /* @__PURE__ */ jsx(
+        ToolCallStep,
+        {
+          type: call.type,
+          label: call.label,
+          status: call.status,
+          detail: call.detail,
+          output: call.output,
+          duration: call.duration
+        },
+        call.id
+      )) }, i);
+    }
+    return null;
+  }) });
+}
+function parseToolEvent(event) {
+  const { type, data } = event;
+  if (type === "tool.invocation" || type === "tool_use") {
+    const toolName = data.name || data.tool || "unknown";
+    const input = data.input;
+    return {
+      id: data.id || data.toolUseId || createId(),
+      type: mapToolName(toolName),
+      label: formatToolLabel(toolName, input),
+      status: "running",
+      detail: input ? formatToolInput(toolName, input) : void 0
+    };
+  }
+  if (type === "tool.result" || type === "tool_result") {
+    return {
+      id: data.id || data.toolUseId || "",
+      type: mapToolName(data.name || data.tool || "unknown"),
+      label: formatToolLabel(data.name || data.tool || "unknown"),
+      status: data.error ? "error" : "success",
+      output: truncate(data.output || data.result || "", 500),
+      duration: data.duration
+    };
+  }
+  return null;
+}
+function createId() {
+  if (typeof globalThis.crypto !== "undefined" && typeof globalThis.crypto.randomUUID === "function") {
+    try {
+      return globalThis.crypto.randomUUID();
+    } catch {
+    }
+  }
+  return `tool_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 10)}`;
+}
+function mapToolName(name) {
+  const lower = name.toLowerCase();
+  if (lower.includes("bash") || lower.includes("terminal") || lower.includes("exec")) return "bash";
+  if (lower.includes("read") || lower.includes("cat")) return "read";
+  if (lower.includes("write") || lower.includes("create")) return "write";
+  if (lower.includes("edit") || lower.includes("replace")) return "edit";
+  if (lower.includes("glob") || lower.includes("find")) return "glob";
+  if (lower.includes("grep") || lower.includes("search")) return "grep";
+  if (lower.includes("list") || lower.includes("ls")) return "list";
+  if (lower.includes("inspect")) return "inspect";
+  if (lower.includes("audit")) return "audit";
+  return "unknown";
+}
+function formatToolLabel(toolName, input) {
+  const lower = toolName.toLowerCase();
+  if (lower.includes("bash") && input?.command) {
+    const cmd = String(input.command);
+    return cmd.length > 80 ? `${cmd.slice(0, 77)}...` : cmd;
+  }
+  if ((lower.includes("read") || lower.includes("cat")) && input?.path) {
+    return `Read ${input.path}`;
+  }
+  if (lower.includes("write") && input?.path) {
+    return `Write ${input.path}`;
+  }
+  if (lower.includes("edit") && input?.path) {
+    return `Edit ${input.path}`;
+  }
+  if (lower.includes("glob") && input?.pattern) {
+    return `Find ${input.pattern}`;
+  }
+  if (lower.includes("grep") && input?.pattern) {
+    return `Search for ${input.pattern}`;
+  }
+  return toolName;
+}
+function formatToolInput(toolName, input) {
+  if (input.command) return String(input.command);
+  if (input.path) return String(input.path);
+  return JSON.stringify(input, null, 2).slice(0, 300);
+}
+function truncate(text, max) {
+  return text.length > max ? text.slice(0, max - 3) + "..." : text;
+}
+
+export {
+  ToolCallFeed,
+  parseToolEvent
+};

package/dist/chunk-BX6AQMUS.js

@@ -0,0 +1,183 @@
+// src/utils/tool-display.ts
+var TOOL_NAME_PREFIX = "tool:";
+function normalizeToolName(tool) {
+  const n = tool?.toLowerCase() ?? "";
+  return n.startsWith(TOOL_NAME_PREFIX) ? n.slice(TOOL_NAME_PREFIX.length) : n;
+}
+function extractString(obj, key) {
+  if (typeof obj === "object" && obj !== null && key in obj) {
+    const val = obj[key];
+    if (typeof val === "string") return val;
+  }
+  return void 0;
+}
+function extractCommand(input) {
+  if (typeof input === "string") return input;
+  return extractString(input, "command") ?? extractString(input, "cmd");
+}
+function extractFilePath(input) {
+  return extractString(input, "file_path") ?? extractString(input, "path") ?? extractString(input, "filePath") ?? extractString(input, "file");
+}
+function cleanPath(path) {
+  const parts = path.split("/");
+  return parts.length > 3 ? ".../" + parts.slice(-2).join("/") : path;
+}
+var TOOL_CATEGORY_ICONS = {
+  command: "terminal",
+  write: "file-plus",
+  read: "file-text",
+  search: "search",
+  edit: "file-edit",
+  task: "cpu",
+  web: "globe",
+  todo: "check-square",
+  other: "box"
+};
+function getToolCategory(toolName) {
+  const name = normalizeToolName(toolName);
+  switch (name) {
+    case "bash":
+    case "shell":
+    case "command":
+    case "execute":
+      return "command";
+    case "write":
+    case "write_file":
+    case "create_file":
+      return "write";
+    case "read":
+    case "read_file":
+    case "cat":
+      return "read";
+    case "grep":
+    case "search":
+    case "rg":
+      return "search";
+    case "edit":
+    case "patch":
+    case "sed":
+      return "edit";
+    case "glob":
+    case "find":
+    case "ls":
+      return "search";
+    case "web_search":
+    case "web_fetch":
+    case "fetch":
+      return "web";
+    case "task":
+    case "agent":
+    case "spawn":
+      return "task";
+    case "todo":
+    case "todo_write":
+      return "todo";
+    default:
+      return "other";
+  }
+}
+function getToolDisplayMetadata(part) {
+  const name = normalizeToolName(part.tool);
+  const input = part.state.status !== "pending" ? part.state.input : void 0;
+  const filePath = extractFilePath(input);
+  const command = extractCommand(input);
+  switch (name) {
+    case "bash":
+    case "shell":
+    case "command":
+    case "execute":
+      return {
+        title: "Run command",
+        description: command ? truncateCommand(command) : void 0,
+        displayVariant: "command",
+        commandSnippet: command
+      };
+    case "write":
+    case "write_file":
+    case "create_file":
+      return {
+        title: filePath ? `Write ${cleanPath(filePath)}` : "Write file",
+        description: filePath,
+        displayVariant: "write-file",
+        targetPath: filePath
+      };
+    case "edit":
+    case "patch":
+      return {
+        title: filePath ? `Edit ${cleanPath(filePath)}` : "Edit file",
+        description: filePath,
+        hasDiffOutput: true,
+        diffFilePath: filePath,
+        displayVariant: "diff",
+        targetPath: filePath
+      };
+    case "read":
+    case "read_file":
+    case "cat":
+      return {
+        title: filePath ? `Read ${cleanPath(filePath)}` : "Read file",
+        description: filePath,
+        displayVariant: "read-file",
+        targetPath: filePath
+      };
+    case "grep":
+    case "search":
+    case "rg": {
+      const pattern = extractString(input, "pattern");
+      return {
+        title: pattern ? `Search: ${pattern}` : "Search",
+        description: pattern,
+        displayVariant: "grep"
+      };
+    }
+    case "glob":
+    case "find":
+    case "ls": {
+      const pattern = extractString(input, "pattern");
+      return {
+        title: pattern ? `Find: ${pattern}` : "Find files",
+        description: pattern,
+        displayVariant: "glob"
+      };
+    }
+    case "web_search":
+    case "web_fetch":
+    case "fetch": {
+      const query = extractString(input, "query") ?? extractString(input, "url");
+      return {
+        title: query ? `Web: ${truncateCommand(query)}` : "Web search",
+        description: query,
+        displayVariant: "web-search"
+      };
+    }
+    case "task":
+    case "agent":
+    case "spawn": {
+      const desc = extractString(input, "description") ?? extractString(input, "prompt");
+      return {
+        title: desc ? `Task: ${truncateCommand(desc)}` : "Agent task",
+        description: desc
+      };
+    }
+    default:
+      return {
+        title: part.tool || "Tool",
+        description: command ?? filePath ?? extractString(input, "pattern") ?? extractString(input, "query")
+      };
+  }
+}
+function truncateCommand(cmd) {
+  const first = cmd.split("\n")[0];
+  return first.length > 60 ? first.slice(0, 57) + "..." : first;
+}
+function getToolErrorText(part, fallback) {
+  if (part.state.status !== "error") return void 0;
+  return part.state.error || fallback;
+}
+
+export {
+  TOOL_CATEGORY_ICONS,
+  getToolCategory,
+  getToolDisplayMetadata,
+  getToolErrorText
+};

package/dist/chunk-CD53GZOM.js

@@ -0,0 +1,59 @@
+import {
+  CodeBlock,
+  CopyButton
+} from "./chunk-66BNMOVT.js";
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/markdown/markdown.tsx
+import { memo } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeSanitize from "rehype-sanitize";
+import { Fragment, jsx } from "react/jsx-runtime";
+var Markdown = memo(({ children, className }) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("prose prose-sm dark:prose-invert max-w-none", className),
+      children: /* @__PURE__ */ jsx(
+        ReactMarkdown,
+        {
+          remarkPlugins: [remarkGfm],
+          rehypePlugins: [rehypeSanitize],
+          components: {
+            pre({ children: preChildren }) {
+              return /* @__PURE__ */ jsx(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__ */ jsx(
+                  "code",
+                  {
+                    className: cn(
+                      "px-1.5 py-0.5 rounded border border-border bg-card text-[var(--code-keyword)] text-[0.85em] font-mono",
+                      codeClass
+                    ),
+                    ...rest,
+                    children: codeChildren
+                  }
+                );
+              }
+              return /* @__PURE__ */ jsx(CodeBlock, { code, language, children: /* @__PURE__ */ jsx(CopyButton, { text: code }) });
+            }
+          },
+          children
+        }
+      )
+    }
+  );
+});
+Markdown.displayName = "Markdown";
+
+export {
+  Markdown
+};

package/dist/chunk-CSAIKY36.js

@@ -0,0 +1,54 @@
+import {
+  cn
+} from "./chunk-RQHJBTEU.js";
+
+// src/primitives/artifact-pane.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function ArtifactPane({
+  eyebrow,
+  title,
+  subtitle,
+  meta,
+  headerActions,
+  tabs,
+  toolbar,
+  footer,
+  emptyState,
+  children,
+  className,
+  contentClassName
+}) {
+  const hasContent = children !== void 0 && children !== null;
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: cn(
+        "flex h-full min-h-0 flex-col overflow-hidden bg-background text-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "border-b border-border bg-muted/10", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 px-3 py-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+              eyebrow && /* @__PURE__ */ jsx("div", { className: "mb-1 inline-flex max-w-full items-center px-1 py-0.5 text-[10px] font-bold uppercase tracking-wider text-muted-foreground", children: eyebrow }),
+              /* @__PURE__ */ jsx("div", { className: "min-w-0 text-[13px] font-medium text-foreground", children: title }),
+              (subtitle || meta) && /* @__PURE__ */ jsxs("div", { className: "mt-1 flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 text-xs leading-relaxed text-muted-foreground", children: [
+                subtitle && /* @__PURE__ */ jsx("span", { className: "truncate", children: subtitle }),
+                meta && /* @__PURE__ */ jsx("span", { className: "flex items-center gap-2", children: meta })
+              ] })
+            ] }),
+            headerActions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-1.5", children: headerActions })
+          ] }),
+          tabs,
+          toolbar && /* @__PURE__ */ jsx("div", { className: "border-t border-border px-3 py-2", children: toolbar })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: cn("min-h-0 flex-1 overflow-auto", contentClassName), children: hasContent ? children : emptyState ? /* @__PURE__ */ jsx("div", { className: "flex h-full items-center justify-center p-6", children: emptyState }) : null }),
+        footer && /* @__PURE__ */ jsx("footer", { className: "shrink-0 border-t border-border bg-card px-3 py-2", children: footer })
+      ]
+    }
+  );
+}
+
+export {
+  ArtifactPane
+};