zidane-ui 9.0.4 → 9.1.3

package/dist/chat/transcript/markdown.js

@@ -1,16 +1,25 @@
+import { CodeFrame } from "../../components/CodeFrame.js";
 import { HighlightedCode } from "../../code/HighlightedCode.js";
-import { useBackgroundMount, useForceMountRows } from "./LazyRow.js";
+import { useExtensionItems } from "../../extensions/ExtensionsProvider.js";
+import { useLinkRouter } from "../../extensions/links.js";
 import { openFenceOf, splitMarkdown, withoutPartialFence } from "../headless/markdown-chunks.js";
 import { cachedMarkdown } from "./markdown-cache.js";
+import { useBackgroundMount, useForceMountRows } from "./LazyRow.js";
+import { renderersFor } from "../../extensions/headless/select.js";
+import { useShellBlockRunner } from "./shell-block-scope.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, createContext, memo, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, Suspense, createContext, lazy, memo, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { isShellFence } from "zidane/chat/pure";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 //#region src/chat/transcript/markdown.tsx
 /**
 * The transcript's markdown: a reply, a command's detail, a summary, an
 * instruction file. GFM through react-markdown, no raw HTML, fences drawn by
-* a code block (highlighted by default).
+* a code block (highlighted by default). A ```mermaid fence draws as a
+* diagram (`MermaidDiagram`), unless an extension renderer claims mermaid
+* (then its code block draws it) or a {@link MarkdownDiagrams} above turns
+* that off; still streaming, it draws what parses so far.
 *
 * An app adds its own badges through props, keeping the parse and the
 * chunking here: `Link` for every link (references, PRs, link menus),
@@ -20,11 +29,13 @@ import remarkGfm from "remark-gfm";
 const INLINE_CODE_CLASS = "px-1 py-0.5 rounded-zg-xs bg-[var(--zg-code-bg)] text-[var(--zg-code-fg)] font-mono text-[0.85em] [overflow-wrap:anywhere]";
 /** A link in prose, opening in a new tab. The default {@link MarkdownProps.Link}. */
 function PlainLink({ href, title, children }) {
+	const onClick = useLinkRouter().anchorClick(href, { source: "transcript" });
 	return /* @__PURE__ */ jsx("a", {
 		href,
 		title,
 		target: "_blank",
 		rel: "noreferrer",
+		onClick,
 		className: "text-[var(--zg-accent)] hover:text-[var(--zg-accent-hover)] underline underline-offset-2 decoration-[var(--zg-accent)]/40 hover:decoration-[var(--zg-accent-hover)] transition-colors",
 		children
 	});
@@ -33,6 +44,46 @@ const PartsContext = createContext({
 	CodeBlock: HighlightedCode,
 	Link: PlainLink
 });
+const DiagramsContext = createContext(true);
+const MermaidDiagram = lazy(() => import("./MermaidDiagram.js").then((m) => ({ default: m.MermaidDiagram })));
+/**
+* Whether ```mermaid fences draw as diagrams here: on (`MarkdownDiagrams`), and no extension renderer
+* claims the language (it draws them through the code block slot then).
+*/
+function useDiagrams() {
+	const on = useContext(DiagramsContext);
+	const renderers = useExtensionItems("renderer");
+	return on && renderersFor(renderers, { language: "mermaid" }).length === 0;
+}
+/** A ```mermaid fence: the diagram, in an empty frame of its look while its code loads. */
+function DiagramFence({ code, streaming = false }) {
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(CodeFrame, {
+			code,
+			className: "zg-diagram my-2",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "zg-diagram-canvas",
+				"data-zg-diagram": "pending"
+			})
+		}),
+		children: /* @__PURE__ */ jsx(MermaidDiagram, {
+			code,
+			streaming
+		})
+	});
+}
+/**
+* Sets whether the {@link Markdown} below draws ```mermaid fences as diagrams. Without one they do.
+* `Transcript` sets it from its `renderDiagrams` option.
+*
+* @param props - The {@link MarkdownDiagramsProps}.
+*/
+function MarkdownDiagrams({ enabled, children }) {
+	return /* @__PURE__ */ jsx(DiagramsContext.Provider, {
+		value: enabled,
+		children
+	});
+}
 function childText(children) {
 	if (typeof children === "string") return children;
 	return Array.isArray(children) && children.every((c) => typeof c === "string") ? children.join("") : null;
@@ -61,12 +112,22 @@ function Code({ className, children }) {
 /** A fence: its text and language, drawn by the code block. */
 function Pre({ children }) {
 	const { CodeBlock } = useContext(PartsContext);
+	const diagrams = useDiagrams();
+	const shells = useShellBlockRunner();
 	const child = Array.isArray(children) ? children[0] : children;
 	if (child && typeof child === "object" && "props" in child) {
 		const { className, children: code } = child.props;
 		const language = /language-(\w+)/.exec(className ?? "")?.[1] ?? "plaintext";
+		const text = typeof code === "string" ? code.replace(/\n$/, "") : "";
+		if (diagrams && language === "mermaid" && text.trim()) return /* @__PURE__ */ jsx(DiagramFence, { code: text });
+		if (shells && isShellFence(language)) return /* @__PURE__ */ jsx(shells.Block, {
+			code: text,
+			language,
+			scope: shells.scope,
+			CodeBlock
+		});
 		return /* @__PURE__ */ jsx(CodeBlock, {
-			code: typeof code === "string" ? code.replace(/\n$/, "") : "",
+			code: text,
 			language
 		});
 	}
@@ -162,6 +223,7 @@ const Markdown = memo(({ children, className, style, document, streaming = false
 	]);
 	const tail = streaming ? openFenceOf(chunks[chunks.length - 1]) : null;
 	const searching = useForceMountRows();
+	const diagrams = useDiagrams();
 	const background = useBackgroundMount();
 	const [shown, setShown] = useState(CHUNKS_PER_FRAME);
 	const complete = useRef(!background || chunks.length <= CHUNKS_PER_FRAME);
@@ -191,7 +253,10 @@ const Markdown = memo(({ children, className, style, document, streaming = false
 					document,
 					plugins: remarkPlugins,
 					urlTransform
-				}) : null, fence ? /* @__PURE__ */ jsx(CodeBlock, {
+				}) : null, fence ? diagrams && fence.language === "mermaid" && fence.code.trim() ? /* @__PURE__ */ jsx(DiagramFence, {
+					code: fence.code,
+					streaming: true
+				}) : /* @__PURE__ */ jsx(CodeBlock, {
 					code: fence.code,
 					language: fence.language
 				}) : null] }, i);
@@ -200,4 +265,4 @@ const Markdown = memo(({ children, className, style, document, streaming = false
 	});
 });
 //#endregion
-export { Markdown };
+export { Markdown, MarkdownDiagrams };

package/dist/chat/transcript/messages.js

@@ -1,8 +1,9 @@
 import { useStaysMounted } from "../../motion/collapse.js";
 import { Grow, GrowPresence } from "../../motion/grow.js";
 import { useChatLabels } from "../useChatLabels.js";
-import { Dot, RowFrame, useRowIcons } from "./frame.js";
 import { useForceMountRows } from "./LazyRow.js";
+import { Dot, RowFrame, useRowIcons } from "./frame.js";
+import { createRecentMap } from "./recent-map.js";
 import { FoldHeader } from "./fold.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useMemo, useState } from "react";
@@ -11,7 +12,7 @@ import { memo, useMemo, useState } from "react";
 * Compact density's message group: an exchange's earlier messages folded
 * behind one line above its latest (`MessageGroupRow`).
 */
-const OPEN_STATE = /* @__PURE__ */ new Map();
+const OPEN_STATE = createRecentMap(500);
 /** Live entries above the current message: three messages in view counting it. */
 const STACK_SIZE = 2;
 const LINE = "22.4px";

package/dist/chat/transcript/notices.js

@@ -1,8 +1,8 @@
 import { useStaysMounted } from "../../motion/collapse.js";
 import { useChatLabels } from "../useChatLabels.js";
-import { failureTooltip } from "../headless/transcript/run-failures.js";
 import { Caret } from "./frame.js";
 import { useTranscriptRenderers } from "./renderers.js";
+import { failureTooltip } from "../headless/transcript/run-failures.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useId, useState } from "react";
 import { CONTINUE_PROMPT, SESSION_EVENT_STATUS_STYLE, describeSpawnEnd, sessionDirLabel, sessionEventExcerpt, sessionEventMeta, shortSessionId, spawnStartParts } from "zidane/chat/pure";

package/dist/chat/transcript/prompt.js

@@ -1,7 +1,7 @@
 import { useLightbox } from "../../components/Lightbox.js";
 import { useChatLabels } from "../useChatLabels.js";
-import { Dot, useRowIcons } from "./frame.js";
 import { copyPromptLines } from "./prompt-lines.js";
+import { Dot, useRowIcons } from "./frame.js";
 import { useTranscriptRenderers } from "./renderers.js";
 import { isPdfAttachment, isTextLike } from "../composer/attachment-ingest.js";
 import { TextPreview } from "../TextPreview.js";

package/dist/chat/transcript/prose.js

@@ -1,8 +1,8 @@
 import { useStaysMounted } from "../../motion/collapse.js";
 import { useChatLabels } from "../useChatLabels.js";
 import { Caret } from "./frame.js";
-import { useTranscriptRenderers } from "./renderers.js";
 import { ToolTiming } from "./tool-parts.js";
+import { useTranscriptRenderers } from "./renderers.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo, useState } from "react";
 //#region src/chat/transcript/prose.tsx

package/dist/chat/transcript/recent-map.d.ts

@@ -0,0 +1,20 @@
+//#region src/chat/transcript/recent-map.d.ts
+/**
+ * A module-level memory keyed by row or session id that outlives the
+ * component (a row's open state, a conversation's scroll position), capped:
+ * past `max` ids the least recently written goes, and a forgotten id reads
+ * as its default.
+ */
+interface RecentMap<V> {
+  get(id: string): V | undefined;
+  set(id: string, value: V): void;
+  readonly size: number;
+}
+/**
+ * Creates a {@link RecentMap}.
+ *
+ * @param max - Ids held before the least recently written goes.
+ */
+declare function createRecentMap<V>(max: number): RecentMap<V>;
+//#endregion
+export { RecentMap, createRecentMap };

package/dist/chat/transcript/recent-map.js

@@ -0,0 +1,22 @@
+//#region src/chat/transcript/recent-map.ts
+/**
+* Creates a {@link RecentMap}.
+*
+* @param max - Ids held before the least recently written goes.
+*/
+function createRecentMap(max) {
+	const map = /* @__PURE__ */ new Map();
+	return {
+		get: (id) => map.get(id),
+		set(id, value) {
+			map.delete(id);
+			map.set(id, value);
+			if (map.size > max) map.delete(map.keys().next().value);
+		},
+		get size() {
+			return map.size;
+		}
+	};
+}
+//#endregion
+export { createRecentMap };

package/dist/chat/transcript/references.js

@@ -1,4 +1,6 @@
 import { useOptionalChatHost } from "../ChatProvider.js";
+import { useExtensionsHost } from "../../extensions/ExtensionsProvider.js";
+import { extensionsChatReferences } from "../headless/extension-sources.js";
 import { beginChipWork } from "../headless/chip-settle.js";
 import { createReferenceStore } from "../headless/reference-store.js";
 import { useCallback, useEffect, useMemo, useSyncExternalStore } from "react";
@@ -8,8 +10,9 @@ import { findReferences } from "zidane/chat/pure";
 * Extension text references in components: the providers of a folder, the
 * references a text holds and the view of one, read from the host's
 * `references` (`ChatHost.references`) through one cache per host
-* (`createReferenceStore`). Without a host, or a host without references,
-* every text is plain.
+* (`createReferenceStore`). A chat host without references falls back to
+* the extensions host's `Reference` items (`extensionsChatReferences`), so
+* one source feeds the chips. Without either, every text is plain.
 */
 const stores = /* @__PURE__ */ new WeakMap();
 const NO_PROVIDERS = Object.freeze([]);
@@ -26,7 +29,8 @@ function referenceStoreFor(references) {
 	return store;
 }
 function useReferenceStore() {
-	const references = useOptionalChatHost()?.references;
+	const extensions = useExtensionsHost();
+	const references = useOptionalChatHost()?.references ?? extensionsChatReferences(extensions);
 	return references ? referenceStoreFor(references) : null;
 }
 /**

package/dist/chat/transcript/renderers.d.ts

@@ -1,5 +1,6 @@
 import { ToolRowModel } from "../headless/transcript/rows.js";
 import "../headless/transcript/index.js";
+import { HighlightedCodeProps } from "../../code/HighlightedCode.js";
 import { TranscriptRenderersProvider, TranscriptRenderersProviderProps } from "./renderer-slots.js";
 import { CSSProperties, ComponentType } from "react";
 import { PromptSegmentRef } from "zidane/chat/pure";
@@ -19,6 +20,12 @@ interface CodeBlockSlotProps {
   code: string;
   /** A fence's language (`plaintext` when it names none). */
   language: string;
+  /**
+   * Controls the frame shows beside its own (a shell block's Run button), as
+   * {@link HighlightedCodeProps.actions}. A replacement slot that drops them
+   * leaves the block without them.
+   */
+  actions?: HighlightedCodeProps['actions'];
 }
 /** Props of the `InlineText` renderer slot. */
 interface InlineTextSlotProps {
@@ -143,7 +150,10 @@ interface DefaultMarkdownProps extends MarkdownSlotProps {
 declare const DefaultMarkdown: import("react").MemoExoticComponent<(props: DefaultMarkdownProps) => import("react").JSX.Element>;
 /** The default renderer slots: safe markdown, highlighted code, plain inline text, and a generic attachment icon. Used when no {@link TranscriptRenderersProvider} is present. */
 declare const DEFAULT_TRANSCRIPT_RENDERERS: TranscriptRenderers;
-/** Returns the renderer slots in effect: the defaults merged with every enclosing {@link TranscriptRenderersProvider}. */
+/**
+ * Returns the renderer slots in effect: the defaults merged with every enclosing
+ * {@link TranscriptRenderersProvider}, and the extensions' language and tool renderers routed in.
+ */
 declare function useTranscriptRenderers(): TranscriptRenderers;
 //#endregion
 export { AttachmentLabelParts, CodeBlockSlotProps, DEFAULT_TRANSCRIPT_RENDERERS, DefaultInlineText, DefaultInlineTextProps, DefaultMarkdown, DefaultMarkdownProps, DefaultPrompt, DefaultPromptProps, DefaultSessionTitle, DefaultSessionTitleProps, InlineTextSlotProps, MarkdownSlotProps, PromptSlotProps, SessionTitleSlotProps, TextPreviewSlotProps, ToolBodySlotProps, TranscriptRenderers, TranscriptRenderersProvider, type TranscriptRenderersProviderProps, defaultAttachmentLabel, useTranscriptRenderers };

package/dist/chat/transcript/renderers.js

@@ -1,9 +1,11 @@
 import { HighlightedCode } from "../../code/HighlightedCode.js";
-import { TranscriptRenderersProvider, useTranscriptRendererOverrides } from "./renderer-slots.js";
+import { useExtensionItems } from "../../extensions/ExtensionsProvider.js";
 import { useChatLabels } from "../useChatLabels.js";
-import { useTranscriptActions } from "./actions.js";
 import { Markdown } from "./markdown.js";
+import { useTranscriptActions } from "./actions.js";
 import { PromptLines } from "./prompt-lines.js";
+import { TranscriptRenderersProvider, useTranscriptRendererOverrides } from "./renderer-slots.js";
+import { withExtensionRenderers } from "./extension-renderers.js";
 import { Fragment, jsx } from "react/jsx-runtime";
 import { memo } from "react";
 //#region src/chat/transcript/renderers.tsx
@@ -24,6 +26,10 @@ import { memo } from "react";
 *   attachmentLabel  the icon and name a prompt's file attachment shows
 *   ToolBody         a tool call's body drawn by the app (`hasToolBody` says
 *                    which calls), in place of its input and output panels
+*
+* Under an `ExtensionsProvider`, the extensions' renderers route in on top
+* (`extension-renderers.tsx`): a fence whose language, or a call whose tool,
+* has one draws through it, over the slot in effect as its default.
 */
 /**
 * Renders the text as is. The default `InlineText` slot.
@@ -104,9 +110,13 @@ const DEFAULT_TRANSCRIPT_RENDERERS = {
 	attachmentLabel: defaultAttachmentLabel
 };
 const resolved = /* @__PURE__ */ new WeakMap();
-/** Returns the renderer slots in effect: the defaults merged with every enclosing {@link TranscriptRenderersProvider}. */
+/**
+* Returns the renderer slots in effect: the defaults merged with every enclosing
+* {@link TranscriptRenderersProvider}, and the extensions' language and tool renderers routed in.
+*/
 function useTranscriptRenderers() {
 	const overrides = useTranscriptRendererOverrides();
+	const extensions = useExtensionItems("renderer");
 	let slots = resolved.get(overrides);
 	if (!slots) {
 		slots = {
@@ -115,7 +125,7 @@ function useTranscriptRenderers() {
 		};
 		resolved.set(overrides, slots);
 	}
-	return slots;
+	return withExtensionRenderers(slots, extensions);
 }
 //#endregion
 export { DEFAULT_TRANSCRIPT_RENDERERS, DefaultInlineText, DefaultMarkdown, DefaultPrompt, DefaultSessionTitle, TranscriptRenderersProvider, defaultAttachmentLabel, useTranscriptRenderers };

package/dist/chat/transcript/script-input.d.ts

@@ -0,0 +1,17 @@
+import { ToolRowModel } from "../headless/transcript/rows.js";
+import "../headless/transcript/index.js";
+import { LC as ScriptProgress } from "../../dist/index-WlE93Q6d.js";
+//#region src/chat/transcript/script-input.d.ts
+/**
+ * A tool row's progress and how it ended, as `ToolInput` takes them for a Codemode script.
+ *
+ * @param tool - The tool row.
+ */
+declare function scriptInputProps(tool: ToolRowModel): {
+  finished: boolean;
+  ok: boolean;
+  result: string | null;
+  scriptProgress?: ScriptProgress | undefined;
+};
+//#endregion
+export { scriptInputProps };

package/dist/chat/transcript/script-input.js

@@ -0,0 +1,16 @@
+//#region src/chat/transcript/script-input.ts
+/**
+* A tool row's progress and how it ended, as `ToolInput` takes them for a Codemode script.
+*
+* @param tool - The tool row.
+*/
+function scriptInputProps(tool) {
+	return {
+		...tool.scriptProgress ? { scriptProgress: tool.scriptProgress } : {},
+		finished: tool.ok !== null,
+		ok: tool.ok !== false,
+		result: tool.result
+	};
+}
+//#endregion
+export { scriptInputProps };

package/dist/chat/transcript/shell-block-scope.d.ts

@@ -0,0 +1,29 @@
+import { CodeBlockSlotProps } from "./renderers.js";
+import { ComponentType } from "react";
+//#region src/chat/transcript/shell-block-scope.d.ts
+/** The reply a block is in. */
+interface ShellBlockScope {
+  /** The session. */
+  sessionId: string;
+  /** The reply's turn. */
+  turnId: string;
+}
+/** Props for {@link RunnableCodeBlock}. */
+interface RunnableCodeBlockProps extends CodeBlockSlotProps {
+  /** The reply the block is in. */
+  scope: ShellBlockScope;
+  /** Draws the block itself (the `CodeBlock` slot); it receives the run controls as `actions`. */
+  CodeBlock: ComponentType<CodeBlockSlotProps>;
+}
+/** The scope, and the component that draws a runnable block in it. */
+interface ShellBlockRunner {
+  scope: ShellBlockScope;
+  Block: ComponentType<RunnableCodeBlockProps>;
+}
+declare const ShellBlockContext: import("react").Context<ShellBlockRunner | null>;
+/** The reply whose blocks can run here, or `null` (a streaming reply, a thought, a tool's input). */
+declare function useShellBlockScope(): ShellBlockScope | null;
+/** The scope with its block component, or `null` where blocks don't run. */
+declare function useShellBlockRunner(): ShellBlockRunner | null;
+//#endregion
+export { RunnableCodeBlockProps, ShellBlockContext, ShellBlockRunner, ShellBlockScope, useShellBlockRunner, useShellBlockScope };

package/dist/chat/transcript/shell-block-scope.js

@@ -0,0 +1,18 @@
+import { createContext, useContext } from "react";
+//#region src/chat/transcript/shell-block-scope.ts
+/**
+* The reply whose shell blocks can run, as `Markdown` reads it. `ShellBlockProvider` (`shell-block.tsx`) provides
+* the scope with the component that runs a block, so `Markdown` draws a runnable block without importing it: a page
+* that renders Markdown outside a transcript (an extension, onboarding) never loads the run controls.
+*/
+const ShellBlockContext = createContext(null);
+/** The reply whose blocks can run here, or `null` (a streaming reply, a thought, a tool's input). */
+function useShellBlockScope() {
+	return useContext(ShellBlockContext)?.scope ?? null;
+}
+/** The scope with its block component, or `null` where blocks don't run. */
+function useShellBlockRunner() {
+	return useContext(ShellBlockContext);
+}
+//#endregion
+export { ShellBlockContext, useShellBlockRunner, useShellBlockScope };

package/dist/chat/transcript/shell-block.d.ts

@@ -0,0 +1,27 @@
+import { RunnableCodeBlockProps, ShellBlockScope, useShellBlockScope } from "./shell-block-scope.js";
+import { ReactNode } from "react";
+//#region src/chat/transcript/shell-block.d.ts
+/** Props for {@link ShellBlockProvider}. */
+interface ShellBlockProviderProps {
+  /** The session the reply is in. */
+  sessionId: string;
+  /** The reply's turn. */
+  turnId: string;
+  /** The reply. */
+  children: ReactNode;
+}
+/**
+ * Lets the shell blocks of the reply below run (`RunnableCodeBlock`).
+ *
+ * @param props - The {@link ShellBlockProviderProps}.
+ */
+declare function ShellBlockProvider({ sessionId, turnId, children }: ShellBlockProviderProps): import("react").JSX.Element;
+/**
+ * A shell block with its run controls and its last run under it. A block with nothing to run, or an app that offers
+ * neither way to run, draws the plain block.
+ *
+ * @param props - The {@link RunnableCodeBlockProps}.
+ */
+declare function RunnableCodeBlock({ code, language, scope, CodeBlock }: RunnableCodeBlockProps): import("react").JSX.Element;
+//#endregion
+export { RunnableCodeBlock, type RunnableCodeBlockProps, ShellBlockProvider, ShellBlockProviderProps, type ShellBlockScope, useShellBlockScope };