@tangle-network/ui 11.11.8 → 11.13.0

package/dist/tool-previews/question-preview.d.ts

@@ -0,0 +1,7 @@
+import { ToolPart } from "../types/parts.js";
+//#region src/tool-previews/question-preview.d.ts
+export interface QuestionPreviewProps {
+  part: ToolPart;
+}
+export declare const QuestionPreview: import("react").MemoExoticComponent<({ part }: QuestionPreviewProps) => import("react").JSX.Element>;
+//#endregion

package/dist/tool-previews/question-preview.js

@@ -0,0 +1,63 @@
+import { PreviewCard, PreviewEmpty, PreviewError, PreviewLoading } from "./preview-primitives.js";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { MessageSquareQuote } from "lucide-react";
+//#region src/tool-previews/question-preview.tsx
+function toQuestionList(input) {
+	if (!input) return [];
+	if (typeof input === "string") return [input];
+	if (Array.isArray(input)) return input.map((item) => String(item)).filter(Boolean);
+	if (typeof input === "object") {
+		const record = input;
+		const value = record.questions ?? record.question ?? record.prompt;
+		if (Array.isArray(value)) return value.map((item) => String(item)).filter(Boolean);
+		if (typeof value === "string") return [value];
+	}
+	return [];
+}
+function toAnswerList(output) {
+	if (!output) return [];
+	if (typeof output === "string") return [output];
+	if (Array.isArray(output)) return output.map((item) => String(item)).filter(Boolean);
+	if (typeof output === "object") {
+		const record = output;
+		const value = record.answers ?? record.answer ?? record.response;
+		if (Array.isArray(value)) return value.map((item) => String(item)).filter(Boolean);
+		if (typeof value === "string") return [value];
+	}
+	return [];
+}
+const QuestionPreview = memo(({ part }) => {
+	const questions = useMemo(() => toQuestionList(part.state.input), [part.state.input]);
+	const answers = useMemo(() => toAnswerList(part.state.output), [part.state.output]);
+	return /* @__PURE__ */ jsxs(PreviewCard, {
+		icon: /* @__PURE__ */ jsx(MessageSquareQuote, { className: "h-4 w-4" }),
+		title: "Agent question",
+		description: questions.length > 1 ? `${questions.length} questions require attention` : void 0,
+		children: [
+			part.state.status === "running" ? /* @__PURE__ */ jsx(PreviewLoading, { label: "Waiting for an answer…" }) : null,
+			part.state.error ? /* @__PURE__ */ jsx(PreviewError, { error: part.state.error }) : null,
+			questions.length === 0 ? /* @__PURE__ */ jsx(PreviewEmpty, { label: "No question text was provided." }) : null,
+			questions.map((question, index) => /* @__PURE__ */ jsxs("div", {
+				className: "rounded-[var(--radius-md)] border border-border bg-muted px-3 py-3",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "text-xs font-semibold uppercase tracking-[0.08em] text-muted-foreground",
+						children: ["Question ", index + 1]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "mt-2 text-sm leading-relaxed text-foreground",
+						children: question
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "mt-3 rounded-[var(--radius-sm)] border border-border bg-card px-3 py-2 text-sm text-foreground",
+						children: answers[index] ?? (part.state.status === "completed" ? "No answer recorded." : "Awaiting answer")
+					})
+				]
+			}, `${question}-${index}`))
+		]
+	});
+});
+QuestionPreview.displayName = "QuestionPreview";
+//#endregion
+export { QuestionPreview };

package/dist/tool-previews/web-search-preview.d.ts

@@ -0,0 +1,7 @@
+import { ToolPart } from "../types/parts.js";
+//#region src/tool-previews/web-search-preview.d.ts
+export interface WebSearchPreviewProps {
+  part: ToolPart;
+}
+export declare const WebSearchPreview: import("react").MemoExoticComponent<({ part }: WebSearchPreviewProps) => import("react").JSX.Element>;
+//#endregion

package/dist/tool-previews/web-search-preview.js

@@ -0,0 +1,78 @@
+import { focusRing } from "../lib/focus.js";
+import { PreviewCard, PreviewEmpty, PreviewError, PreviewLoading } from "./preview-primitives.js";
+import { memo, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Globe } from "lucide-react";
+//#region src/tool-previews/web-search-preview.tsx
+function coerceString(value) {
+	return typeof value === "string" && value.trim() ? value : void 0;
+}
+function extractQuery(input, output) {
+	if (input && typeof input === "object") {
+		const record = input;
+		const query = coerceString(record.query) ?? coerceString(record.url);
+		if (query) return query;
+	}
+	if (output && typeof output === "object") return coerceString(output.query);
+}
+function parseResult(value) {
+	if (!value || typeof value !== "object") return null;
+	const record = value;
+	const title = coerceString(record.title) ?? coerceString(record.name) ?? "Untitled result";
+	const url = coerceString(record.url) ?? coerceString(record.link);
+	if (!url) return null;
+	return {
+		title,
+		url,
+		snippet: coerceString(record.snippet) ?? coerceString(record.description) ?? coerceString(record.text)
+	};
+}
+function extractResults(output) {
+	if (output && typeof output === "object") {
+		const record = output;
+		const candidate = record.results ?? record.items ?? record.output;
+		if (Array.isArray(candidate)) return candidate.map(parseResult).filter((value) => value !== null);
+	}
+	if (Array.isArray(output)) return output.map(parseResult).filter((value) => value !== null);
+	return [];
+}
+const WebSearchPreview = memo(({ part }) => {
+	const query = extractQuery(part.state.input, part.state.output);
+	const results = useMemo(() => extractResults(part.state.output), [part.state.output]);
+	return /* @__PURE__ */ jsxs(PreviewCard, {
+		icon: /* @__PURE__ */ jsx(Globe, { className: "h-4 w-4" }),
+		title: query ? `Web results for ${query}` : "Web results",
+		description: results.length > 0 ? `${results.length} result${results.length === 1 ? "" : "s"}` : void 0,
+		children: [
+			part.state.status === "running" ? /* @__PURE__ */ jsx(PreviewLoading, { label: "Searching the web…" }) : null,
+			part.state.error ? /* @__PURE__ */ jsx(PreviewError, { error: part.state.error }) : null,
+			part.state.status === "completed" && results.length === 0 ? /* @__PURE__ */ jsx(PreviewEmpty, { label: "No web results were returned." }) : null,
+			/* @__PURE__ */ jsx("div", {
+				className: "space-y-2",
+				children: results.map((result) => /* @__PURE__ */ jsxs("a", {
+					href: result.url,
+					target: "_blank",
+					rel: "noreferrer",
+					className: `block rounded-[var(--radius-md)] border border-border bg-muted/55 px-3 py-3 transition-colors hover:border-[var(--border-strong)] hover:bg-accent/50 ${focusRing}`,
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "text-sm font-medium text-foreground",
+							children: result.title
+						}),
+						/* @__PURE__ */ jsx("div", {
+							className: "mt-1 truncate text-xs text-primary",
+							children: result.url
+						}),
+						result.snippet ? /* @__PURE__ */ jsx("p", {
+							className: "mt-2 text-sm leading-relaxed text-muted-foreground",
+							children: result.snippet
+						}) : null
+					]
+				}, result.url))
+			})
+		]
+	});
+});
+WebSearchPreview.displayName = "WebSearchPreview";
+//#endregion
+export { WebSearchPreview };

package/dist/tool-previews/write-file-preview.d.ts

@@ -0,0 +1,11 @@
+import { ToolPart } from "../types/parts.js";
+//#region src/tool-previews/write-file-preview.d.ts
+export interface WriteFilePreviewProps {
+  part: ToolPart;
+}
+/**
+ * Preview for file write/create operations.
+ * Shows file path, line count, and the written content.
+ */
+export declare const WriteFilePreview: import("react").MemoExoticComponent<({ part }: WriteFilePreviewProps) => import("react").JSX.Element | null>;
+//#endregion

package/dist/tool-previews/write-file-preview.js

@@ -0,0 +1,52 @@
+import { CodeBlock, CopyButton } from "../markdown/code-block.js";
+import { PreviewCard, PreviewError, PreviewLoading } from "./preview-primitives.js";
+import { getSyntaxLanguage } from "../files/file-format.js";
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FileEdit } from "lucide-react";
+//#region src/tool-previews/write-file-preview.tsx
+function extractWriteContent(input) {
+	if (!input || typeof input !== "object") return null;
+	const obj = input;
+	return {
+		path: String(obj.file_path ?? obj.path ?? obj.filePath ?? "unknown"),
+		content: String(obj.content ?? obj.contents ?? obj.data ?? "")
+	};
+}
+/**
+* Preview for file write/create operations.
+* Shows file path, line count, and the written content.
+*/
+const WriteFilePreview = memo(({ part }) => {
+	const write = extractWriteContent(part.state.input);
+	if (!write) return null;
+	const lineCount = write.content.split("\n").length;
+	const language = getSyntaxLanguage(write.path);
+	return /* @__PURE__ */ jsxs(PreviewCard, {
+		icon: /* @__PURE__ */ jsx(FileEdit, { className: "h-4 w-4" }),
+		title: "Write file",
+		description: write.path,
+		meta: /* @__PURE__ */ jsxs("span", {
+			className: "text-xs text-muted-foreground",
+			children: [
+				"+",
+				lineCount,
+				" line",
+				lineCount !== 1 ? "s" : ""
+			]
+		}),
+		children: [
+			part.state.status === "running" ? /* @__PURE__ */ jsx(PreviewLoading, { label: "Writing file…" }) : null,
+			part.state.error ? /* @__PURE__ */ jsx(PreviewError, { error: part.state.error }) : null,
+			/* @__PURE__ */ jsx(CodeBlock, {
+				code: write.content,
+				language,
+				className: "rounded-[var(--radius-md)]",
+				children: /* @__PURE__ */ jsx(CopyButton, { text: write.content })
+			})
+		]
+	});
+});
+WriteFilePreview.displayName = "WriteFilePreview";
+//#endregion
+export { WriteFilePreview };

package/dist/tool-previews.d.ts

@@ -1,2 +1,8 @@
-import { a as WebSearchPreview, c as GlobResultsPreviewProps, d as WriteFilePreview, f as WriteFilePreviewProps, i as QuestionPreviewProps, l as GrepResultsPreview, m as CommandPreviewProps, n as DiffPreviewProps, o as WebSearchPreviewProps, p as CommandPreview, r as QuestionPreview, s as GlobResultsPreview, t as DiffPreview, u as GrepResultsPreviewProps } from "./index-2UntyjBb.js";
+import { CommandPreview, CommandPreviewProps } from "./tool-previews/command-preview.js";
+import { WriteFilePreview, WriteFilePreviewProps } from "./tool-previews/write-file-preview.js";
+import { GrepResultsPreview, GrepResultsPreviewProps } from "./tool-previews/grep-results-preview.js";
+import { GlobResultsPreview, GlobResultsPreviewProps } from "./tool-previews/glob-results-preview.js";
+import { WebSearchPreview, WebSearchPreviewProps } from "./tool-previews/web-search-preview.js";
+import { QuestionPreview, QuestionPreviewProps } from "./tool-previews/question-preview.js";
+import { DiffPreview, DiffPreviewProps } from "./tool-previews/diff-preview.js";
 export { CommandPreview, type CommandPreviewProps, DiffPreview, type DiffPreviewProps, GlobResultsPreview, type GlobResultsPreviewProps, GrepResultsPreview, type GrepResultsPreviewProps, QuestionPreview, type QuestionPreviewProps, WebSearchPreview, type WebSearchPreviewProps, WriteFilePreview, type WriteFilePreviewProps };

package/dist/tool-previews.js

@@ -1,2 +1,8 @@
-import { a as GrepResultsPreview, i as GlobResultsPreview, n as QuestionPreview, o as WriteFilePreview, r as WebSearchPreview, s as CommandPreview, t as DiffPreview } from "./diff-preview-BcK3nRXb.js";
+import { CommandPreview } from "./tool-previews/command-preview.js";
+import { WriteFilePreview } from "./tool-previews/write-file-preview.js";
+import { GrepResultsPreview } from "./tool-previews/grep-results-preview.js";
+import { GlobResultsPreview } from "./tool-previews/glob-results-preview.js";
+import { WebSearchPreview } from "./tool-previews/web-search-preview.js";
+import { QuestionPreview } from "./tool-previews/question-preview.js";
+import { DiffPreview } from "./tool-previews/diff-preview.js";
 export { CommandPreview, DiffPreview, GlobResultsPreview, GrepResultsPreview, QuestionPreview, WebSearchPreview, WriteFilePreview };

package/dist/{branding-26d5ARIr.d.ts → types/branding.d.ts}

@@ -1,6 +1,6 @@
 //#region src/types/branding.d.ts
 /** Visual branding for a run group header — injected by consuming app. */
-interface AgentBranding {
+export interface AgentBranding {
   label: string;
   accentClass: string;
   bgClass: string;
@@ -10,5 +10,4 @@ interface AgentBranding {
   iconClass: string;
   textClass: string;
 }
-//#endregion
-export { AgentBranding as t };
+//#endregion

package/dist/{message-vhUI0c5G.d.ts → types/message.d.ts}

@@ -1,6 +1,6 @@
 //#region src/types/message.d.ts
 /** A single message in a chat session. */
-interface SessionMessage {
+export interface SessionMessage {
   id: string;
   role: 'user' | 'assistant' | 'system';
   sessionID?: string;
@@ -12,5 +12,4 @@ interface SessionMessage {
   /** Monotonically increasing insertion index for stable ordering. */
   _insertionIndex?: number;
 }
-//#endregion
-export { SessionMessage as t };
+//#endregion

package/dist/{parts-5mhy9yJ3.d.ts → types/parts.d.ts}

@@ -1,16 +1,16 @@
 //#region src/types/parts.d.ts
-interface TextPart {
+export interface TextPart {
   type: 'text';
   text: string;
   /** If true this text was synthesised client-side (e.g. echo of user input). */
   synthetic?: boolean;
 }
-type ToolStatus = 'pending' | 'running' | 'completed' | 'error';
-interface ToolTime {
+export type ToolStatus = 'pending' | 'running' | 'completed' | 'error';
+export interface ToolTime {
   start?: number;
   end?: number;
 }
-interface ToolState {
+export interface ToolState {
   status: ToolStatus;
   input?: unknown;
   output?: unknown;
@@ -18,7 +18,7 @@ interface ToolState {
   metadata?: Record<string, unknown>;
   time?: ToolTime;
 }
-interface ToolPart {
+export interface ToolPart {
   type: 'tool';
   /** Unique ID for this tool invocation. */
   id: string;
@@ -27,11 +27,10 @@ interface ToolPart {
   state: ToolState;
   callID?: string;
 }
-interface ReasoningPart {
+export interface ReasoningPart {
   type: 'reasoning';
   text: string;
   time?: ToolTime;
 }
-type SessionPart = TextPart | ToolPart | ReasoningPart;
-//#endregion
-export { ToolState as a, ToolPart as i, SessionPart as n, ToolStatus as o, TextPart as r, ToolTime as s, ReasoningPart as t };
+export type SessionPart = TextPart | ToolPart | ReasoningPart;
+//#endregion

package/dist/{run-OyWmIDqu.d.ts → types/run.d.ts}

@@ -1,15 +1,15 @@
-import { t as SessionMessage } from "./message-vhUI0c5G.js";
+import { SessionMessage } from "./message.js";
 //#region src/types/run.d.ts
 /** Broad category of a tool invocation, used for display grouping. */
-type ToolCategory = "command" | "write" | "read" | "search" | "edit" | "task" | "web" | "todo" | "other";
-interface RunStats {
+export type ToolCategory = "command" | "write" | "read" | "search" | "edit" | "task" | "web" | "todo" | "other";
+export interface RunStats {
   toolCount: number;
   messageCount: number;
   thinkingDurationMs: number;
   textPartCount: number;
   toolCategories: Set<ToolCategory>;
 }
-interface FinalTextPart {
+export interface FinalTextPart {
   messageId: string;
   partIndex: number;
   text: string;
@@ -19,7 +19,7 @@ interface FinalTextPart {
  * logical "turn" of the agent. Runs are collapsible in the UI and
  * show a summary header when collapsed.
  */
-interface Run {
+export interface Run {
   id: string;
   messages: SessionMessage[];
   isComplete: boolean;
@@ -28,14 +28,13 @@ interface Run {
   summaryText: string | null;
   finalTextPart: FinalTextPart | null;
 }
-interface MessageRun {
+export interface MessageRun {
   type: "run";
   run: Run;
 }
-interface MessageUser {
+export interface MessageUser {
   type: "user";
   message: SessionMessage;
 }
-type GroupedMessage = MessageRun | MessageUser;
-//#endregion
-export { Run as a, MessageUser as i, GroupedMessage as n, RunStats as o, MessageRun as r, ToolCategory as s, FinalTextPart as t };
+export type GroupedMessage = MessageRun | MessageUser;
+//#endregion

package/dist/{tool-display-DgmL5rIU.d.ts → types/tool-display.d.ts}

@@ -1,21 +1,21 @@
-import { i as ToolPart } from "./parts-5mhy9yJ3.js";
+import { ToolPart } from "./parts.js";
 import { ReactNode } from "react";
 //#region src/types/tool-display.d.ts
 /**
  * Variant-specific rendering instructions for tool output.
  * Maps directly to specialised preview components.
  */
-type DisplayVariant = "command" | "write-file" | "read-file" | "diff" | "question" | "web-search" | "grep" | "glob" | "default";
+export type DisplayVariant = "command" | "write-file" | "read-file" | "diff" | "question" | "web-search" | "grep" | "glob" | "default";
 /**
  * Custom renderer for tool details. Return a ReactNode to override the
  * default ExpandedToolDetail, or null to fall back to the built-in renderer.
  */
-type CustomToolRenderer = (part: ToolPart) => ReactNode | null;
+export type CustomToolRenderer = (part: ToolPart) => ReactNode | null;
 /**
  * Visual metadata for a tool invocation — computed from the tool name,
  * input, and output by `getToolDisplayMetadata()`.
  */
-interface ToolDisplayMetadata {
+export interface ToolDisplayMetadata {
   title: string;
   description?: string;
   inputTitle?: string;
@@ -28,5 +28,4 @@ interface ToolDisplayMetadata {
   commandSnippet?: string;
   targetPath?: string;
 }
-//#endregion
-export { DisplayVariant as n, ToolDisplayMetadata as r, CustomToolRenderer as t };
+//#endregion

package/dist/types.d.ts

@@ -1,6 +1,6 @@
-import { t as SessionMessage } from "./message-vhUI0c5G.js";
-import { a as ToolState, i as ToolPart, n as SessionPart, o as ToolStatus, r as TextPart, s as ToolTime, t as ReasoningPart } from "./parts-5mhy9yJ3.js";
-import { t as AgentBranding } from "./branding-26d5ARIr.js";
-import { n as DisplayVariant, r as ToolDisplayMetadata, t as CustomToolRenderer } from "./tool-display-DgmL5rIU.js";
-import { a as Run, i as MessageUser, n as GroupedMessage, o as RunStats, r as MessageRun, s as ToolCategory, t as FinalTextPart } from "./run-OyWmIDqu.js";
+import { SessionMessage } from "./types/message.js";
+import { ReasoningPart, SessionPart, TextPart, ToolPart, ToolState, ToolStatus, ToolTime } from "./types/parts.js";
+import { AgentBranding } from "./types/branding.js";
+import { CustomToolRenderer, DisplayVariant, ToolDisplayMetadata } from "./types/tool-display.js";
+import { FinalTextPart, GroupedMessage, MessageRun, MessageUser, Run, RunStats, ToolCategory } from "./types/run.js";
 export { AgentBranding, CustomToolRenderer, DisplayVariant, FinalTextPart, GroupedMessage, MessageRun, MessageUser, ReasoningPart, Run, RunStats, SessionMessage, SessionPart, TextPart, ToolCategory, ToolDisplayMetadata, ToolPart, ToolState, ToolStatus, ToolTime };

package/dist/utils/copy-text.d.ts

@@ -0,0 +1,7 @@
+//#region src/utils/copy-text.d.ts
+/**
+ * Copy text to clipboard with a non-secure-context fallback.
+ * Returns true if a copy strategy likely succeeded.
+ */
+export declare function copyText(text: string): Promise<boolean>;
+//#endregion

package/dist/{utils-Bl_CZ0Qp.js → utils/copy-text.js}

@@ -24,14 +24,4 @@ async function copyText(text) {
 	}
 }
 //#endregion
-//#region src/utils/time-ago.ts
-function timeAgo(ts) {
-	const secs = Math.floor((Date.now() - ts) / 1e3);
-	if (secs < 5) return "just now";
-	if (secs < 60) return `${secs}s ago`;
-	const mins = Math.floor(secs / 60);
-	if (mins < 60) return `${mins}m ago`;
-	return `${Math.floor(mins / 60)}h ago`;
-}
-//#endregion
-export { copyText as n, timeAgo as t };
+export { copyText };

package/dist/utils/format.d.ts

@@ -0,0 +1,22 @@
+//#region src/utils/format.d.ts
+/** Format a duration in milliseconds to a human-readable string. */
+export declare function formatDuration(ms: number): string;
+/** Truncate text to `max` characters, appending "..." if truncated. */
+export declare function truncateText(text: string, max: number): string;
+/**
+ * Format an uptime duration in milliseconds with progressive
+ * granularity, so short-lived sandboxes don't render as "0d 0h".
+ *  - < 60s        → "Ns"
+ *  - < 60m        → "Nm Ss"
+ *  - < 24h        → "Nh Mm"
+ *  - otherwise    → "Nd Hh"
+ */
+export declare function formatUptime(ms: number): string;
+/**
+ * Format a byte count using binary units (KiB/MiB/GiB, surfaced as
+ * "KB/MB/GB" for readability). KB and MB use one decimal below 10 and
+ * round above; GB keeps two decimals below 10 so half-GB changes stay
+ * visible on memory dashboards, and drops to one decimal above.
+ */
+export declare function formatBytes(bytes: number): string;
+//#endregion

package/dist/{format-DfcLWqMa.js → utils/format.js}

@@ -51,4 +51,4 @@ function formatBytes(bytes) {
 	return `${gb < 10 ? gb.toFixed(2) : gb.toFixed(1)} GB`;
 }
 //#endregion
-export { truncateText as i, formatDuration as n, formatUptime as r, formatBytes as t };
+export { formatBytes, formatDuration, formatUptime, truncateText };

package/dist/utils/time-ago.d.ts

@@ -0,0 +1,3 @@
+//#region src/utils/time-ago.d.ts
+export declare function timeAgo(ts: number): string;
+//#endregion

package/dist/utils/time-ago.js

@@ -0,0 +1,11 @@
+//#region src/utils/time-ago.ts
+function timeAgo(ts) {
+	const secs = Math.floor((Date.now() - ts) / 1e3);
+	if (secs < 5) return "just now";
+	if (secs < 60) return `${secs}s ago`;
+	const mins = Math.floor(secs / 60);
+	if (mins < 60) return `${mins}m ago`;
+	return `${Math.floor(mins / 60)}h ago`;
+}
+//#endregion
+export { timeAgo };

package/dist/utils/tool-display.d.ts

@@ -0,0 +1,16 @@
+import { ToolPart } from "../types/parts.js";
+import { ToolDisplayMetadata } from "../types/tool-display.js";
+import { ToolCategory } from "../types/run.js";
+//#region src/utils/tool-display.d.ts
+export declare const TOOL_CATEGORY_ICONS: Record<ToolCategory, string>;
+export declare function getToolCategory(toolName: string): ToolCategory;
+/**
+ * Title is the bare verb ("Read", "Edit", "Shell"); the path, command, pattern
+ * or query lives in `description` only, so a row prints its subject once.
+ * `targetPath` / `commandSnippet` carry the untruncated value for consumers
+ * that need it (diff headers, expanded detail).
+ */
+export declare function getToolDisplayMetadata(part: ToolPart): ToolDisplayMetadata;
+/** Extract error text from a tool part, if any. */
+export declare function getToolErrorText(part: ToolPart, fallback?: string): string | undefined;
+//#endregion

package/dist/{tool-display-BAuAVa43.js → utils/tool-display.js}

@@ -155,4 +155,4 @@ function getToolErrorText(part, fallback) {
 	return part.state.error || fallback;
 }
 //#endregion
-export { getToolErrorText as i, getToolCategory as n, getToolDisplayMetadata as r, TOOL_CATEGORY_ICONS as t };
+export { TOOL_CATEGORY_ICONS, getToolCategory, getToolDisplayMetadata, getToolErrorText };

package/dist/utils.d.ts

@@ -1,2 +1,7 @@
-import { a as focusRingInset, c as getToolCategory, d as timeAgo, f as formatBytes, g as copyText, h as truncateText, i as focusRing, l as getToolDisplayMetadata, m as formatUptime, n as focusFieldInvalid, o as cn, p as formatDuration, r as focusFieldWithin, s as TOOL_CATEGORY_ICONS, t as focusField, u as getToolErrorText } from "./index-BgUHilZm.js";
+import { copyText } from "./utils/copy-text.js";
+import { formatBytes, formatDuration, formatUptime, truncateText } from "./utils/format.js";
+import { timeAgo } from "./utils/time-ago.js";
+import { TOOL_CATEGORY_ICONS, getToolCategory, getToolDisplayMetadata, getToolErrorText } from "./utils/tool-display.js";
+import { cn } from "./lib/utils.js";
+import { focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset } from "./lib/focus.js";
 export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText };

package/dist/utils.js

@@ -1,6 +1,7 @@
-import { a as focusRingInset, i as focusRing, n as focusFieldInvalid, r as focusFieldWithin, t as focusField } from "./focus-BcE_SHqz.js";
-import { t as cn } from "./utils-C_uf36nf.js";
-import { i as getToolErrorText, n as getToolCategory, r as getToolDisplayMetadata, t as TOOL_CATEGORY_ICONS } from "./tool-display-BAuAVa43.js";
-import { i as truncateText, n as formatDuration, r as formatUptime, t as formatBytes } from "./format-DfcLWqMa.js";
-import { n as copyText, t as timeAgo } from "./utils-Bl_CZ0Qp.js";
+import { focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset } from "./lib/focus.js";
+import { cn } from "./lib/utils.js";
+import { TOOL_CATEGORY_ICONS, getToolCategory, getToolDisplayMetadata, getToolErrorText } from "./utils/tool-display.js";
+import { formatBytes, formatDuration, formatUptime, truncateText } from "./utils/format.js";
+import { copyText } from "./utils/copy-text.js";
+import { timeAgo } from "./utils/time-ago.js";
 export { TOOL_CATEGORY_ICONS, cn, copyText, focusField, focusFieldInvalid, focusFieldWithin, focusRing, focusRingInset, formatBytes, formatDuration, formatUptime, getToolCategory, getToolDisplayMetadata, getToolErrorText, timeAgo, truncateText };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.11.8",
+  "version": "11.13.0",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -142,7 +142,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.9.0",
+    "@tangle-network/brand": "^1.10.0",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/editor/document-editor-pane.tsx

@@ -37,6 +37,8 @@ export interface DocumentEditorPaneProps
   tabs?: ArtifactPaneProps["tabs"];
   toolbar?: ReactNode;
   markdown?: string;
+  /** Persisted baseline when the host controls the current markdown draft. */
+  savedMarkdown?: string;
   /** Transform Markdown links and images through the shared URL policy. */
   urlTransform?: UrlTransform;
   mode?: DocumentEditorMode;
@@ -191,6 +193,7 @@ export function DocumentEditorPane({
   tabs,
   toolbar,
   markdown = "",
+  savedMarkdown,
   urlTransform,
   mode,
   defaultMode = "preview",
@@ -212,7 +215,7 @@ export function DocumentEditorPane({
     useState<DocumentEditorMode>(defaultMode);
   const activeMode = mode ?? uncontrolledMode;
   const isCollaborative = backend === "collaborative" && Boolean(collaboration);
-  const isDirty = normalizeMarkdown(draft) !== normalizeMarkdown(markdown);
+  const isDirty = normalizeMarkdown(draft) !== normalizeMarkdown(savedMarkdown ?? markdown);
   const saveStateLabel = readOnly
     ? "Read only"
     : isCollaborative

package/src/files/file-artifact-pane.test.tsx

@@ -231,3 +231,26 @@ describe("parseCsv", () => {
     expect(parseCsv("\n\n")).toEqual([]);
   });
 });
+
+describe("FileArtifactPane controlled drafts", () => {
+  it("retains a host draft and saves it against the persisted baseline", async () => {
+    const onSave = vi.fn();
+    const draft = "# Unsaved source draft";
+    const props = {
+      filename: "notes.md",
+      content: draft,
+      editor: { enabled: true, savedContent: "# Saved notes", onSave },
+    };
+    const view = render(<FileArtifactPane {...props} />);
+    const save = await screen.findByRole("button", { name: "Save changes" });
+    expect(screen.getByRole("heading", { name: "Unsaved source draft" })).toBeVisible();
+    expect(screen.getByText("Unsaved changes")).toBeVisible();
+    expect(save).toBeEnabled();
+    fireEvent.click(save);
+    expect(onSave).toHaveBeenCalledWith(draft);
+
+    view.rerender(<FileArtifactPane {...props} editor={{ ...props.editor, savedContent: draft }} />);
+    expect(screen.getByText("Saved")).toBeVisible();
+    expect(save).toBeDisabled();
+  });
+});

package/src/files/file-artifact-pane.tsx

@@ -18,6 +18,8 @@ const LazyDocumentEditorPane = lazy(async () => {
 
 export interface FileArtifactPaneEditorOptions {
   enabled?: boolean;
+  /** Persisted baseline when content is the current draft. */
+  savedContent?: string;
   mode?: DocumentEditorMode;
   defaultMode?: DocumentEditorMode;
   onModeChange?: (mode: DocumentEditorMode) => void;
@@ -155,6 +157,7 @@ export function FileArtifactPane({
           headerClassName={headerClassName}
           hideTitleBlock={hideTitleBlock}
           markdown={content ?? ""}
+          savedMarkdown={editor.savedContent}
           urlTransform={urlTransform}
           mode={editor.mode}
           defaultMode={editor.defaultMode}

package/src/files/rich-file-tree.stories.tsx

@@ -8,7 +8,7 @@ const meta: Meta<typeof RichFileTree> = {
   parameters: { layout: "padded", backgrounds: { default: "dark" } },
   decorators: [
     (Story) => (
-      <div className="w-[420px] h-[480px] rounded-xl border border-border bg-card overflow-hidden">
+      <div className="w-full max-w-[420px] h-[480px] rounded-xl border border-border bg-card overflow-hidden">
         <Story />
       </div>
     ),