@tangle-network/ui 11.0.0 → 11.2.0

package/dist/{chunk-LELGOLFV.js → chunk-GGDYWMFF.js}

@@ -6,10 +6,10 @@ import {
 } from "./chunk-ZRVH3WCA.js";
 import {
   ArtifactPane
-} from "./chunk-CSAIKY36.js";
+} from "./chunk-LTEKI7YJ.js";
 import {
   Markdown
-} from "./chunk-FJBTCTZM.js";
+} from "./chunk-P5F43A65.js";
 import {
   CodeBlock,
   CopyButton
@@ -407,7 +407,7 @@ function PdfPreview({ blobUrl, filename }) {
   ) });
 }
 function TextPreview({ content }) {
-  return /* @__PURE__ */ jsx3("pre", { className: "bg-background rounded-[var(--radius-md)] border border-border p-4 overflow-auto max-h-[70vh] text-sm text-foreground font-mono leading-[1.55]", children: content });
+  return /* @__PURE__ */ jsx3("pre", { className: "bg-card rounded-[var(--radius-md)] border border-border p-4 overflow-auto max-h-[70vh] text-sm text-foreground font-mono leading-[1.55]", children: content });
 }
 function UnsupportedPreview({
   filename,
@@ -422,7 +422,7 @@ function UnsupportedPreview({
   ] });
 }
 function MarkdownPreview({ content }) {
-  return /* @__PURE__ */ jsx3("div", { className: "rounded-[var(--radius-md)] border border-border bg-background p-5", children: /* @__PURE__ */ jsx3(Markdown, { className: "prose-sm max-w-none", children: content }) });
+  return /* @__PURE__ */ jsx3("div", { className: "rounded-[var(--radius-md)] border border-border bg-background p-5", children: /* @__PURE__ */ jsx3(Markdown, { children: content }) });
 }
 function EmptyPreview({ filename }) {
   return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center justify-center py-16 text-muted-foreground", children: [
@@ -560,7 +560,7 @@ import { lazy, Suspense } from "react";
 import { Download as Download2, X as X3 } from "lucide-react";
 import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var LazyDocumentEditorPane = lazy(async () => {
-  const module = await import("./document-editor-pane-WCTA3ZOE.js");
+  const module = await import("./document-editor-pane-OQNGM4RJ.js");
   return { default: module.DocumentEditorPane };
 });
 function FileArtifactPane({
@@ -580,6 +580,8 @@ function FileArtifactPane({
   toolbar,
   footer,
   className,
+  headerClassName,
+  hideTitleBlock,
   editor
 }) {
   const showTabs = tabs.length > 0 && onTabSelect && onTabClose;
@@ -594,7 +596,7 @@ function FileArtifactPane({
   ) : void 0;
   const isMarkdown = detectFileFormat(filename, mimeType) === "markdown" || (path ? detectFileFormat(path, mimeType) === "markdown" : false);
   const isEditableMarkdown = isMarkdown && editor?.enabled;
-  const headerActions = /* @__PURE__ */ jsxs4(Fragment, { children: [
+  const headerActions = onDownload || onClose ? /* @__PURE__ */ jsxs4(Fragment, { children: [
     onDownload && /* @__PURE__ */ jsx5(
       "button",
       {
@@ -615,7 +617,7 @@ function FileArtifactPane({
         children: /* @__PURE__ */ jsx5(X3, { className: "h-4 w-4" })
       }
     )
-  ] });
+  ] }) : void 0;
   if (isEditableMarkdown) {
     return /* @__PURE__ */ jsx5(
       Suspense,
@@ -632,6 +634,8 @@ function FileArtifactPane({
             className,
             tabs: paneTabs,
             headerActions,
+            headerClassName,
+            hideTitleBlock,
             children: /* @__PURE__ */ jsx5("div", { className: "flex min-h-[12rem] items-center justify-center rounded-[var(--radius-lg)] border border-dashed border-border bg-muted text-sm text-muted-foreground", children: "Loading editor\u2026" })
           }
         ),
@@ -647,6 +651,8 @@ function FileArtifactPane({
             className,
             tabs: paneTabs,
             headerActions,
+            headerClassName,
+            hideTitleBlock,
             markdown: content ?? "",
             mode: editor.mode,
             defaultMode: editor.defaultMode,
@@ -679,6 +685,8 @@ function FileArtifactPane({
       className,
       tabs: paneTabs,
       headerActions,
+      headerClassName,
+      hideTitleBlock,
       children: /* @__PURE__ */ jsx5(
         FilePreview,
         {

package/dist/{chunk-CCM2KRQH.js → chunk-HW4ROISY.js}

@@ -11,7 +11,7 @@ import {
 } from "./chunk-OEX7NZE3.js";
 import {
   parseToolEvent
-} from "./chunk-KBOD47AW.js";
+} from "./chunk-J3YZIQNI.js";
 
 // src/hooks/use-dropdown-menu.ts
 import { useEffect, useRef, useState } from "react";

package/dist/{chunk-KBOD47AW.js → chunk-J3YZIQNI.js}

@@ -1,10 +1,10 @@
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-INMWNFAS.js";
+} from "./chunk-4ORVXSMU.js";
 import {
   Markdown
-} from "./chunk-FJBTCTZM.js";
+} from "./chunk-P5F43A65.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";

package/dist/{chunk-CSAIKY36.js → chunk-LTEKI7YJ.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-RQHJBTEU.js";
 
 // src/primitives/artifact-pane.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function ArtifactPane({
   eyebrow,
   title,
@@ -16,9 +16,14 @@ function ArtifactPane({
   emptyState,
   children,
   className,
-  contentClassName
+  contentClassName,
+  headerClassName,
+  hideTitleBlock = false
 }) {
   const hasContent = children !== void 0 && children !== null;
+  const showTitleRow = !hideTitleBlock || Boolean(headerActions);
+  const hasHeader = showTitleRow || Boolean(tabs) || Boolean(toolbar);
+  const toolbarNeedsDivider = showTitleRow || Boolean(tabs);
   return /* @__PURE__ */ jsxs(
     "section",
     {
@@ -27,20 +32,20 @@ function ArtifactPane({
         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: [
+        hasHeader && /* @__PURE__ */ jsxs("header", { className: cn("border-b border-border bg-muted/10", headerClassName), children: [
+          showTitleRow && /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 px-3 py-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: !hideTitleBlock && /* @__PURE__ */ jsxs(Fragment, { 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 })
+          toolbar && /* @__PURE__ */ jsx("div", { className: cn("px-3 py-2", toolbarNeedsDivider && "border-t border-border"), 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 })

package/dist/{chunk-KHO7DYXH.js → chunk-OTZWQJ5W.js}

@@ -6,20 +6,20 @@ import {
 import {
   InlineThinkingItem,
   RunGroup
-} from "./chunk-HHYUPAOJ.js";
+} from "./chunk-SRAKCVPO.js";
 import {
   ToolCallGroup,
   ToolCallStep
-} from "./chunk-INMWNFAS.js";
+} from "./chunk-4ORVXSMU.js";
 import {
   getToolDisplayMetadata
 } from "./chunk-ULDNFLIM.js";
 import {
   OpenUIArtifactRenderer
-} from "./chunk-52Y3FMFI.js";
+} from "./chunk-3M7BPSSW.js";
 import {
   Markdown
-} from "./chunk-FJBTCTZM.js";
+} from "./chunk-P5F43A65.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -103,6 +103,7 @@ var MessageList = memo2(
 MessageList.displayName = "MessageList";
 
 // src/chat/agent-timeline.tsx
+import { useState as useState2 } from "react";
 import {
   AlertTriangle,
   CheckCircle2,
@@ -170,11 +171,12 @@ var TONE_STYLES = {
 function formatTime2(date) {
   return date.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit" });
 }
-function AgentTimelineRow({ isLast, accentClassName, children }) {
+var CARD_ROW_DOT = "mt-[calc((2.5rem-var(--timeline-dot-size))/2)]";
+function AgentTimelineRow({ isLast, accentClassName, dotClassName = "mt-2", children }) {
   return /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-[1.25rem_minmax(0,1fr)] gap-x-4", children: [
     /* @__PURE__ */ jsxs3("div", { className: "relative flex justify-center", children: [
       !isLast && /* @__PURE__ */ jsx4("span", { className: "absolute top-4 bottom-[-0.75rem] left-1/2 w-px -translate-x-1/2 bg-border" }),
-      /* @__PURE__ */ jsx4("span", { className: cn("relative mt-2 h-[var(--timeline-dot-size)] w-[var(--timeline-dot-size)] rounded-full ring-4 ring-[var(--bg-root)]", accentClassName) })
+      /* @__PURE__ */ jsx4("span", { className: cn("relative h-[var(--timeline-dot-size)] w-[var(--timeline-dot-size)] rounded-full ring-4 ring-[var(--bg-root)]", dotClassName, accentClassName) })
     ] }),
     /* @__PURE__ */ jsx4("div", { className: "min-w-0 pb-3", children })
   ] });
@@ -233,80 +235,111 @@ function AgentTimeline({
   isThinking,
   emptyState,
   className,
-  renderToolActions
+  renderToolActions,
+  collapseAfter
 }) {
+  const [expanded, setExpanded] = useState2(false);
   if (items.length === 0 && !isThinking) {
     return emptyState ? /* @__PURE__ */ jsx4("div", { className: cn("flex h-full items-center justify-center p-4", className), children: emptyState }) : null;
   }
   const renderedItems = isThinking ? [...items, { id: "__thinking__", kind: "custom", content: /* @__PURE__ */ jsx4(ThinkingIndicator, {}) }] : items;
-  const timelineItems = renderedItems.filter((item) => !(item.kind === "message" && item.role === "user"));
-  return /* @__PURE__ */ jsx4("div", { className: cn("mx-auto w-full max-w-5xl px-4 py-4", className), children: renderedItems.map((item, index) => {
-    if (item.kind === "message" && item.role === "user") {
-      return /* @__PURE__ */ jsx4("div", { className: "mt-6 mb-4 first:mt-0", children: /* @__PURE__ */ jsx4(UserMessage, { content: item.content, timestamp: item.timestamp }) }, item.id);
+  const isUserMessage = (item) => item.kind === "message" && item.role === "user";
+  const timelineItems = renderedItems.filter((item) => !isUserMessage(item));
+  const limit = collapseAfter ?? Infinity;
+  const collapsible = timelineItems.length > limit;
+  const collapsed = collapsible && !expanded;
+  let renderList = renderedItems;
+  let hiddenCount = 0;
+  if (collapsed) {
+    const visible = [];
+    let spineCount = 0;
+    for (const item of renderedItems) {
+      if (spineCount >= limit) break;
+      visible.push(item);
+      if (!isUserMessage(item)) spineCount += 1;
     }
-    const timelineIndex = timelineItems.indexOf(item);
-    const isLast = timelineIndex === timelineItems.length - 1;
-    if (item.kind === "message") {
-      return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--brand-glow)]", children: /* @__PURE__ */ jsx4(AssistantMessage, { item }) }, item.id);
-    }
-    if (item.kind === "tool") {
-      return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", children: /* @__PURE__ */ jsx4(
-        ToolCallStep,
-        {
-          type: item.call.type,
-          label: item.call.label,
-          status: item.call.status,
-          detail: item.call.detail,
-          output: item.call.output,
-          duration: item.call.duration,
-          part: item.part,
-          actions: item.part ? renderToolActions?.(item.part) : void 0
-        }
-      ) }, item.id);
-    }
-    if (item.kind === "tool_group") {
-      return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", children: /* @__PURE__ */ jsx4(ToolCallGroup, { title: item.title, children: item.calls.map((call, callIndex) => {
-        const part = item.parts?.[callIndex];
-        return /* @__PURE__ */ jsx4(
+    renderList = visible;
+    hiddenCount = timelineItems.length - limit;
+  }
+  const visibleSpine = renderList.filter((item) => !isUserMessage(item));
+  const lastSpineItem = collapsible ? void 0 : visibleSpine[visibleSpine.length - 1];
+  return /* @__PURE__ */ jsxs3("div", { className: cn("mx-auto w-full max-w-5xl px-4 py-4", className), children: [
+    renderList.map((item) => {
+      if (item.kind === "message" && item.role === "user") {
+        return /* @__PURE__ */ jsx4("div", { className: "mt-6 mb-4 first:mt-0", children: /* @__PURE__ */ jsx4(UserMessage, { content: item.content, timestamp: item.timestamp }) }, item.id);
+      }
+      const isLast = item === lastSpineItem;
+      if (item.kind === "message") {
+        return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--brand-glow)]", children: /* @__PURE__ */ jsx4(AssistantMessage, { item }) }, item.id);
+      }
+      if (item.kind === "tool") {
+        return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", dotClassName: CARD_ROW_DOT, children: /* @__PURE__ */ jsx4(
           ToolCallStep,
           {
-            type: call.type,
-            label: call.label,
-            status: call.status,
-            detail: call.detail,
-            output: call.output,
-            duration: call.duration,
-            part,
-            actions: part ? renderToolActions?.(part) : void 0
+            type: item.call.type,
+            label: item.call.label,
+            status: item.call.status,
+            detail: item.call.detail,
+            output: item.call.output,
+            duration: item.call.duration,
+            part: item.part,
+            actions: item.part ? renderToolActions?.(item.part) : void 0
+          }
+        ) }, item.id);
+      }
+      if (item.kind === "tool_group") {
+        return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", dotClassName: CARD_ROW_DOT, children: /* @__PURE__ */ jsx4(ToolCallGroup, { title: item.title, children: item.calls.map((call, callIndex) => {
+          const part = item.parts?.[callIndex];
+          return /* @__PURE__ */ jsx4(
+            ToolCallStep,
+            {
+              type: call.type,
+              label: call.label,
+              status: call.status,
+              detail: call.detail,
+              output: call.output,
+              duration: call.duration,
+              part,
+              actions: part ? renderToolActions?.(part) : void 0
+            },
+            call.id
+          );
+        }) }) }, item.id);
+      }
+      if (item.kind === "status") {
+        return /* @__PURE__ */ jsx4(
+          AgentTimelineRow,
+          {
+            isLast,
+            accentClassName: TONE_STYLES[item.tone ?? "default"].dot,
+            children: /* @__PURE__ */ jsx4(StatusCard, { item })
           },
-          call.id
+          item.id
         );
-      }) }) }, item.id);
-    }
-    if (item.kind === "status") {
-      return /* @__PURE__ */ jsx4(
-        AgentTimelineRow,
-        {
-          isLast,
-          accentClassName: TONE_STYLES[item.tone ?? "default"].dot,
-          children: /* @__PURE__ */ jsx4(StatusCard, { item })
-        },
-        item.id
-      );
-    }
-    if (item.kind === "artifact") {
-      return /* @__PURE__ */ jsx4(
-        AgentTimelineRow,
-        {
-          isLast,
-          accentClassName: TONE_STYLES[item.tone ?? "default"].dot,
-          children: /* @__PURE__ */ jsx4(ArtifactCard, { item })
-        },
-        item.id
-      );
-    }
-    return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", children: item.content }, item.id);
-  }) });
+      }
+      if (item.kind === "artifact") {
+        return /* @__PURE__ */ jsx4(
+          AgentTimelineRow,
+          {
+            isLast,
+            accentClassName: TONE_STYLES[item.tone ?? "default"].dot,
+            children: /* @__PURE__ */ jsx4(ArtifactCard, { item })
+          },
+          item.id
+        );
+      }
+      return /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast, accentClassName: "bg-[var(--border-hover)]", dotClassName: CARD_ROW_DOT, children: item.content }, item.id);
+    }),
+    collapsible ? /* @__PURE__ */ jsx4(AgentTimelineRow, { isLast: true, accentClassName: "bg-[var(--border-hover)]", children: /* @__PURE__ */ jsx4(
+      "button",
+      {
+        type: "button",
+        onClick: () => setExpanded((value) => !value),
+        className: "text-xs font-medium text-muted-foreground transition-colors hover:text-foreground",
+        children: collapsed ? `Show ${hiddenCount} more step${hiddenCount === 1 ? "" : "s"}` : "Show less"
+      }
+    ) }) : null
+  ] });
 }
 
 // src/chat/chat-container.tsx
@@ -552,7 +585,8 @@ var ChatContainer = memo3(
     renderRunActions,
     renderUserMessageActions,
     renderToolActions,
-    renderTimelineToolActions
+    renderTimelineToolActions,
+    collapseTimelineAfter
   }) => {
     const scrollRef = useRef(null);
     const groups = useRunGroups({ messages, partMap, isStreaming });
@@ -578,7 +612,8 @@ var ChatContainer = memo3(
             {
               items: timeline.items,
               isThinking: timeline.showThinking,
-              renderToolActions: renderTimelineToolActions
+              renderToolActions: renderTimelineToolActions,
+              collapseAfter: collapseTimelineAfter
             }
           ) }) : /* @__PURE__ */ jsx5("div", { className: "mx-auto flex min-h-full w-full max-w-3xl flex-col justify-end", children: /* @__PURE__ */ jsx5(
             MessageList,

package/dist/{chunk-FJBTCTZM.js → chunk-P5F43A65.js}

@@ -16,7 +16,7 @@ var Markdown = memo(({ children, className }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("prose prose-sm dark:prose-invert max-w-none", className),
+      className: cn("tangle-prose max-w-none text-sm", className),
       children: /* @__PURE__ */ jsx(
         ReactMarkdown,
         {

package/dist/{chunk-SZ44QDA6.js → chunk-RADUPP44.js}

@@ -6,10 +6,10 @@ import {
 } from "./chunk-Q56BYXQF.js";
 import {
   ArtifactPane
-} from "./chunk-CSAIKY36.js";
+} from "./chunk-LTEKI7YJ.js";
 import {
   Markdown
-} from "./chunk-FJBTCTZM.js";
+} from "./chunk-P5F43A65.js";
 import {
   cn
 } from "./chunk-RQHJBTEU.js";
@@ -1030,6 +1030,8 @@ function DocumentEditorPane({
   footer,
   className,
   contentClassName,
+  headerClassName,
+  hideTitleBlock,
   tabs,
   toolbar,
   markdown = "",
@@ -1126,10 +1128,13 @@ function DocumentEditorPane({
     "div",
     {
       className: cn(
-        "rounded-[var(--radius-lg)] border border-border bg-background p-5",
+        // The outer margin is the card's gutter (rather than padding on the tab
+        // panel) so `previewClassName` can govern the whole box — gutter, border,
+        // surface, and inner padding — e.g. to render the document full-bleed.
+        "m-4 rounded-[var(--radius-lg)] border border-border bg-card p-5",
         previewClassName
       ),
-      children: /* @__PURE__ */ jsx5(Markdown, { className: "prose-sm max-w-none", children: draft })
+      children: /* @__PURE__ */ jsx5(Markdown, { children: draft })
     }
   );
   const localEditor = /* @__PURE__ */ jsx5(
@@ -1174,9 +1179,11 @@ function DocumentEditorPane({
           tabs,
           className,
           contentClassName,
+          headerClassName,
           toolbar: editorToolbar,
+          hideTitleBlock,
           children: [
-            /* @__PURE__ */ jsx5(TabsContent, { value: "preview", className: "mt-0 h-full px-4 py-4", children: preview }),
+            /* @__PURE__ */ jsx5(TabsContent, { value: "preview", className: "mt-0 h-full", children: preview }),
             /* @__PURE__ */ jsx5(TabsContent, { value: "edit", className: "mt-0 h-full px-4 py-4", children: isCollaborative ? collaborativeEditor : localEditor })
           ]
         }