@localix-ai/flowdown 0.0.0-stage → 0.5.1

package/dist/render/view.js

@@ -0,0 +1,306 @@
+import { parseFileTree } from "../core/file-tree-parse.js";
+import { flowdownDialect } from "../core/remark-answer-blocks.js";
+import "../dialect.js";
+import { createDocument, usesHtml, usesMath } from "../document/index.js";
+import { createCutter, createFenceMemory, growingFence } from "../document/fence.js";
+import { tableRows } from "../document/table.js";
+import { parse } from "../engine/index.js";
+import { defaultUrlTransform } from "../engine/url.js";
+import { mergeLabels } from "./labels.js";
+import { createRenderer } from "./tree.js";
+import { callout, code, codeBar, codeFrame, copyButton, diagramSource, downloadButton, fileTree, readCodeBlock, readTabs, table, tabs } from "./views.js";
+import { expand, vnode } from "./vnode.js";
+// src/render/view.ts
+/**
+* A whole document as plain elements (`vnode.ts`): what `<Markdown>` draws with React, for the
+* targets that have no framework. The HTML text of one (`@localix-ai/flowdown/static`) and the page kept
+* up to date from one (`@localix-ai/flowdown/dom`) are both made here, so they hold the same elements.
+*/
+/** How long "Copied" stays before the button reads "Copy" again. */
+const COPIED_MS = 1600;
+const focusOn = (element) => element?.focus?.();
+const draw = createRenderer(vnode);
+const NOTHING = () => [];
+const CHILDREN = (_props, children) => children;
+/** How many body rows one piece of a table holds: the same pieces `<Markdown>` draws. */
+const ROWS = 16;
+const headingKeyOf = (own) => own ? [...own].map(([at, id]) => `${at}:${id}`).join(";") : "";
+function createView(options = {}) {
+	const labels = mergeLabels(options.labels);
+	const highlight = options.highlight ?? null;
+	const own = options.components;
+	let extensions = [flowdownDialect];
+	let math = null;
+	const urlTransform = options.urlTransform ?? defaultUrlTransform;
+	const ownCode = Boolean(own?.pre || own?.code);
+	const ownTable = Boolean(own?.table || own?.thead || own?.tbody || (options.extensions?.length ?? 0) > 0);
+	const prefix = options.idPrefix ?? "fd-";
+	const { diagram: pageDiagram, tree: pageTree } = options;
+	/** Where the block being drawn starts in the document, and whether it is the fence still growing. */
+	let offset = 0;
+	let growing = false;
+	const host = options.host ?? null;
+	/** Blocks, by where they start, that a reader's action changed: drawn again at the next render. */
+	const stale = /* @__PURE__ */ new Set();
+	/** How many live parts the block being drawn has made: with the block's offset, a part's name. */
+	let serial = 0;
+	const tabStates = /* @__PURE__ */ new Map();
+	const treeStates = /* @__PURE__ */ new Map();
+	/** The code blocks that read "Copied", each with the timer that ends it. */
+	const copied = /* @__PURE__ */ new Map();
+	const changed = (at) => {
+		stale.add(at);
+		host.redraw();
+	};
+	const buttons = (text, title, language) => {
+		if (!host) return [downloadButton(vnode, labels), copyButton(vnode, labels, false)];
+		const at = offset;
+		const id = `${at}.${serial++}`;
+		const copy = () => {
+			host.copy(text).then((done) => {
+				if (!done) return;
+				clearTimeout(copied.get(id));
+				copied.set(id, setTimeout(() => {
+					copied.delete(id);
+					changed(at);
+				}, COPIED_MS));
+				changed(at);
+			});
+		};
+		return [downloadButton(vnode, labels, () => host.download(text, title, language)), copyButton(vnode, labels, copied.has(id), copy)];
+	};
+	/** `[!TABS]` on a page: the WAI-ARIA tabs pattern, as `<Markdown>` has it. */
+	const liveTabs = (list, id) => {
+		const at = offset;
+		let state = tabStates.get(id);
+		if (!state) tabStates.set(id, state = {
+			active: 0,
+			buttons: []
+		});
+		const tab = state;
+		tab.buttons = [];
+		const current = tab.active < list.length ? tab.active : 0;
+		const select = (index, focus) => {
+			const next = (index + list.length) % list.length;
+			tab.active = next;
+			changed(at);
+			if (focus) focusOn(tab.buttons[next]);
+		};
+		return tabs(vnode, list, current, id, labels, (index) => ({
+			ref: (element) => {
+				tab.buttons[index] = element;
+			},
+			onClick: () => select(index, false),
+			onKeyDown: (event) => {
+				const target = {
+					ArrowRight: index + 1,
+					ArrowLeft: index - 1,
+					Home: 0,
+					End: list.length - 1
+				}[event.key];
+				if (target === void 0) return;
+				event.preventDefault();
+				select(target, true);
+			}
+		}));
+	};
+	/** A ```tree fence on a page: folders fold, and the arrow keys walk the rows (the tree pattern). */
+	const liveTree = (rows) => {
+		const at = offset;
+		const id = `${at}.${serial++}`;
+		let state = treeStates.get(id);
+		if (!state) treeStates.set(id, state = {
+			collapsed: /* @__PURE__ */ new Set(),
+			focused: null,
+			elements: /* @__PURE__ */ new Map()
+		});
+		const tree = state;
+		tree.elements = /* @__PURE__ */ new Map();
+		const toggle = (path) => {
+			if (!tree.collapsed.delete(path)) tree.collapsed.add(path);
+			changed(at);
+		};
+		const focus = (row) => {
+			if (row) focusOn(tree.elements.get(row.path));
+		};
+		return fileTree(vnode, {
+			rows,
+			collapsed: tree.collapsed,
+			focused: tree.focused,
+			on: (row, visible) => ({
+				ref: (element) => {
+					tree.elements.set(row.path, element);
+				},
+				onFocus: () => {
+					if (tree.focused === row.path) return;
+					tree.focused = row.path;
+					changed(at);
+				},
+				onClick: (event) => {
+					focusOn(event.currentTarget);
+					if (row.folder) toggle(row.path);
+				},
+				onKeyDown: (event) => {
+					const index = visible.indexOf(row);
+					const open = row.folder && !tree.collapsed.has(row.path);
+					const parent = row.parent === null ? void 0 : rows[row.parent];
+					const action = {
+						ArrowDown: () => focus(visible[index + 1]),
+						ArrowUp: () => focus(visible[index - 1]),
+						Home: () => focus(visible[0]),
+						End: () => focus(visible.at(-1)),
+						ArrowRight: () => open ? focus(visible[index + 1]) : row.folder && toggle(row.path),
+						ArrowLeft: () => open ? toggle(row.path) : focus(parent),
+						Enter: () => row.folder && toggle(row.path),
+						" ": () => row.folder && toggle(row.path)
+					}[event.key];
+					if (!action) return;
+					event.preventDefault();
+					event.stopPropagation();
+					action();
+				}
+			})
+		}, labels);
+	};
+	const components = {
+		blockquote: (props, children) => callout(vnode, props, children, labels),
+		table: (props, children) => table(vnode, props, children, false, labels, host?.table ? { ref: host.table } : void 0),
+		"answer-tabs": (props, children) => {
+			const list = readTabs(vnode, children);
+			if (list.length === 0) return [];
+			const at = props.node?.position?.start.offset ?? 0;
+			const id = `${prefix}${offset + at}`;
+			return host ? liveTabs(list, id) : tabs(vnode, list, 0, id, labels);
+		},
+		pre: ({ node: _node, ...props }, children) => {
+			const { language, title, text } = readCodeBlock(vnode, children);
+			return codeFrame(vnode, language, codeBar(vnode, language, title, buttons(text, title, language)), host?.table ? {
+				...props,
+				ref: host.table
+			} : props, children);
+		},
+		code: (props, children) => code(vnode, props, children, highlight),
+		...own
+	};
+	const special = (language, source) => language === "mermaid" ? pageDiagram ? pageDiagram(source, growing) : diagramSource(vnode, source, null, false) : pageTree ? pageTree(source) : treeOf(source);
+	const treeOf = (source) => {
+		const rows = parseFileTree(source);
+		if (rows.length === 0) return [];
+		if (host) return liveTree(rows);
+		return fileTree(vnode, {
+			rows,
+			collapsed: /* @__PURE__ */ new Set(),
+			focused: null
+		}, labels);
+	};
+	const one = (source, at, ids, using) => draw(parse(source, { extensions }), {
+		components: using,
+		urlTransform,
+		special,
+		labels,
+		offset: at,
+		headingIds: ids
+	});
+	const headParts = {
+		...components,
+		table: CHILDREN,
+		tbody: NOTHING
+	};
+	const bodyParts = {
+		...components,
+		table: CHILDREN,
+		thead: NOTHING,
+		tbody: CHILDREN
+	};
+	const memory = createFenceMemory();
+	const cut = createCutter();
+	/** A code fence still being written, in the pieces it is highlighted by. */
+	const growingCode = (language, title, body) => {
+		const known = Boolean(language && highlight && highlight("", language) !== null);
+		const className = [language ? `language-${language}` : null, known ? "fd-highlighted" : null].filter(Boolean).join(" ");
+		const pieces = cut(body).parts.map((text) => {
+			const html = known ? highlight(text, language) : null;
+			return html === null ? text : vnode.element("span", { innerHTML: html }, []);
+		});
+		if (!known && body) pieces.push("\n");
+		return codeFrame(vnode, language, codeBar(vnode, language, title, buttons(body, title, language)), host?.table ? { ref: host.table } : null, [vnode.element("code", { className: className || void 0 }, pieces)]);
+	};
+	const block = (open, closer, ids) => {
+		const fence = growing && !ownCode ? growingFence(open, closer, memory) : null;
+		if (fence && fence.language !== "mermaid" && fence.language !== "tree" && !(fence.language === "math" && math)) return growingCode(fence.language, fence.title, fence.body);
+		const source = closer ? open + closer : open;
+		const rows = ownTable ? null : tableRows(source);
+		if (rows) {
+			const pieces = [];
+			for (let at = 0; at < rows.rows.length; at += ROWS) pieces.push(one(rows.head + rows.rows.slice(at, at + ROWS).join("\n"), 0, null, bodyParts));
+			return vnode.element(components.table, null, [one(rows.head, 0, null, headParts), vnode.element("tbody", null, pieces)]);
+		}
+		return one(source, offset, ids, components);
+	};
+	const doc = createDocument();
+	/** What each block drew last: a block that did not change is not drawn again. */
+	const drawn = /* @__PURE__ */ new WeakMap();
+	return {
+		render(text, streaming = false) {
+			const state = doc.update(text, {
+				streaming,
+				math: Boolean(options.math),
+				headingIds: options.headingIds ?? false
+			});
+			math = options.math && usesMath(state.blocks) ? options.math : null;
+			const html = options.html && usesHtml(state.blocks) ? options.html : null;
+			extensions = [
+				flowdownDialect,
+				...math ? [math] : [],
+				...options.extensions ?? [],
+				...html ? [html] : []
+			];
+			const stages = `${math ? "m" : ""}${html ? "h" : ""}`;
+			const children = [];
+			const last = state.blocks.length - 1;
+			state.blocks.forEach((item, index) => {
+				const closer = index === last ? state.closer : "";
+				const grows = index === last && state.growing;
+				const ids = state.headingIds?.[index] ?? null;
+				const headingKey = headingKeyOf(ids);
+				let made = drawn.get(item);
+				if (made === void 0 || stale.has(item.offset) || made.stages !== stages || made.closer !== closer || made.growing !== grows || made.offset !== item.offset || made.headingKey !== headingKey) {
+					offset = item.offset;
+					growing = grows;
+					serial = 0;
+					const nodes = expand(block(item.source, closer, ids && ids.size > 0 ? ids : null));
+					made = {
+						stages,
+						closer,
+						growing: grows,
+						offset: item.offset,
+						headingKey,
+						nodes
+					};
+					drawn.set(item, made);
+				}
+				if (index > 0) children.push("\n");
+				for (const node of made.nodes) children.push(node);
+			});
+			stale.clear();
+			const caret = options.caret ?? streaming;
+			const { className, unstyled } = options;
+			return {
+				tag: "div",
+				props: {
+					className: unstyled ? className : className ? `flowdown ${className}` : "flowdown",
+					"data-streaming": streaming || void 0,
+					"data-caret": streaming && caret || void 0
+				},
+				children
+			};
+		},
+		dispose() {
+			for (const timer of copied.values()) clearTimeout(timer);
+			copied.clear();
+		}
+	};
+}
+export { createView };
+
+//# sourceMappingURL=view.js.map

package/dist/render/view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.js","names":["views.downloadButton","views.copyButton","views.tabs","views.fileTree","views.callout","views.table","views.readTabs","views.readCodeBlock","views.codeFrame","views.codeBar","views.code","views.diagramSource"],"sources":["../../src/render/view.ts"],"sourcesContent":["/**\n * A whole document as plain elements (`vnode.ts`): what `<Markdown>` draws with React, for the\n * targets that have no framework. The HTML text of one (`@localix-ai/flowdown/static`) and the page kept\n * up to date from one (`@localix-ai/flowdown/dom`) are both made here, so they hold the same elements.\n */\nimport { parseFileTree, type TreeRow } from '../core/file-tree-parse'\nimport { flowdownDialect } from '../core/remark-answer-blocks'\nimport { DIAGRAM_FENCE_LANGUAGE } from '../dialect'\nimport { createDocument, usesHtml, usesMath, type MarkdownBlock } from '../document'\nimport { createCutter, createFenceMemory, growingFence } from '../document/fence'\nimport { tableRows } from '../document/table'\nimport { parse } from '../engine'\nimport type { Extension, Node } from '../engine/types'\nimport { defaultUrlTransform, type UrlTransform } from '../engine/url'\nimport type { Props } from './factory'\nimport { mergeLabels, type LabelOverrides, type MarkdownLabels } from './labels'\nimport { createRenderer } from './tree'\nimport * as views from './views'\nimport { expand, vnode, type Drawn, type DrawnElement, type VComponent, type VNode } from './vnode'\n\n/** Your own elements for any tag (`a`, `img`, `pre`, `table`, …) or the dialect's. */\nexport type ViewComponents = Record<string, VComponent | undefined>\n\nexport interface ViewOptions {\n  components?: ViewComponents\n  /** Your own drawing of a ```mermaid fence; `growing` while the fence is still being written. */\n  diagram?: (source: string, growing: boolean) => VNode\n  /** Your own drawing of a ```tree fence. */\n  tree?: (source: string) => VNode\n  /** Your own syntax, after the dialect's (`Extension`). */\n  extensions?: Extension[]\n  /** Give headings ids (`setup`, `setup-1`) to link to. */\n  headingIds?: boolean\n  /** Raw HTML in the text, parsed and sanitized: `@localix-ai/flowdown/html`. Without it the tags are left out. */\n  html?: Extension | null\n  /** Typeset `$…$`: `@localix-ai/flowdown/math`. */\n  math?: Extension | null\n  /** Highlight fenced code: `@localix-ai/flowdown/highlight`, or your own. */\n  highlight?: views.Highlighter | null\n  /** The words the renderer adds (callout names, button labels), for a page in another language. */\n  labels?: LabelOverrides\n  /** Rewrite or refuse a link or image URL; by default only safe protocols are kept. */\n  urlTransform?: UrlTransform | null\n  className?: string\n  /** Leaves the `flowdown` class off the root element, so the package's stylesheet does not apply. */\n  unstyled?: boolean\n  /** The caret after streaming text; on by default while streaming. */\n  caret?: boolean\n  /**\n   * What the ids of a `[!TABS]` form's tabs and panels start with. Two documents on one page need\n   * two prefixes; `@localix-ai/flowdown/dom` gives each of its own.\n   */\n  idPrefix?: string\n  /** The page the view is drawn on: with one, its tabs, trees and buttons answer the reader. */\n  host?: ViewHost\n}\n\n/**\n * What makes a view alive. A view drawn as HTML text has none, and its tabs, file trees and code\n * buttons are drawn and nothing more; given one, they carry listeners (`onClick`, `onKeyDown`)\n * that change what the view shows and ask the host to draw it again.\n */\nexport interface ViewHost {\n  /** Something the reader did changed what the document shows: draw it again, now. */\n  redraw(): void\n  /** Put `text` on the clipboard; resolves whether it got there. */\n  copy(text: string): Promise<boolean>\n  /** Save `text` as a file named after its fence's title, or its language. */\n  download(text: string, title: string | undefined, language: string | undefined): void\n  /**\n   * The box of a table or the `<pre>` of a code block, each time it is drawn: a host that can\n   * measure makes a wide one a Tab stop.\n   */\n  table?(box: unknown): void\n}\n\n/** What a listener is given, as far as the view reads it. */\ninterface KeyPress {\n  key: string\n  preventDefault(): void\n  stopPropagation(): void\n}\n\n/** How long \"Copied\" stays before the button reads \"Copy\" again. */\nconst COPIED_MS = 1_600\n\nconst focusOn = (element: unknown): void =>\n  (element as { focus?: () => void } | undefined)?.focus?.()\n\nexport interface View {\n  /**\n   * The document's root element for `text`; `streaming` while the reply is still arriving. What\n   * a block drew is kept: a block that did not change gives the very same elements again, so a\n   * target that compares by identity leaves them alone.\n   */\n  render(text: string, streaming?: boolean): DrawnElement\n  /** Stops what a reader's action left running (a \"Copied\" that has yet to go back to \"Copy\"). */\n  dispose(): void\n}\n\nconst draw = createRenderer(vnode)\n\nconst NOTHING: VComponent = () => []\nconst CHILDREN: VComponent = (_props, children) => children\n\n/** How many body rows one piece of a table holds: the same pieces `<Markdown>` draws. */\nconst ROWS = 16\n\nconst headingKeyOf = (own: ReadonlyMap<number, string> | null): string =>\n  own ? [...own].map(([at, id]) => `${at}:${id}`).join(';') : ''\n\ninterface Kept {\n  stages: string\n  closer: string\n  growing: boolean\n  offset: number\n  headingKey: string\n  nodes: Drawn[]\n}\n\nexport function createView(options: ViewOptions = {}): View {\n  const labels: MarkdownLabels = mergeLabels(options.labels)\n  const highlight = options.highlight ?? null\n  const own = options.components\n  // What the document is read with. Math and raw HTML are passes a document without either does\n  // not pay for, exactly as `<Markdown>` leaves them out: set for each `render`.\n  let extensions: Extension[] = [flowdownDialect]\n  let math: Extension | null = null\n  const urlTransform = options.urlTransform ?? defaultUrlTransform\n  const ownCode = Boolean(own?.pre || own?.code)\n  const ownTable = Boolean(\n    own?.table || own?.thead || own?.tbody || (options.extensions?.length ?? 0) > 0,\n  )\n  const prefix = options.idPrefix ?? 'fd-'\n  const { diagram: pageDiagram, tree: pageTree } = options\n\n  /** Where the block being drawn starts in the document, and whether it is the fence still growing. */\n  let offset = 0\n  let growing = false\n\n  const host = options.host ?? null\n  /** Blocks, by where they start, that a reader's action changed: drawn again at the next render. */\n  const stale = new Set<number>()\n  /** How many live parts the block being drawn has made: with the block's offset, a part's name. */\n  let serial = 0\n  const tabStates = new Map<string, { active: number; buttons: unknown[] }>()\n  const treeStates = new Map<\n    string,\n    { collapsed: Set<string>; focused: string | null; elements: Map<string, unknown> }\n  >()\n  /** The code blocks that read \"Copied\", each with the timer that ends it. */\n  const copied = new Map<string, ReturnType<typeof setTimeout>>()\n\n  const changed = (at: number) => {\n    stale.add(at)\n    host!.redraw()\n  }\n\n  const buttons = (\n    text: string,\n    title: string | undefined,\n    language: string | undefined,\n  ): VNode[] => {\n    if (!host) return [views.downloadButton(vnode, labels), views.copyButton(vnode, labels, false)]\n    const at = offset\n    const id = `${at}.${serial++}`\n    const copy = () => {\n      // When the clipboard refuses there is nothing to say: the code is still selectable.\n      void host.copy(text).then((done) => {\n        if (!done) return\n        clearTimeout(copied.get(id))\n        copied.set(\n          id,\n          setTimeout(() => {\n            copied.delete(id)\n            changed(at)\n          }, COPIED_MS),\n        )\n        changed(at)\n      })\n    }\n    return [\n      views.downloadButton(vnode, labels, () => host.download(text, title, language)),\n      views.copyButton(vnode, labels, copied.has(id), copy),\n    ]\n  }\n\n  /** `[!TABS]` on a page: the WAI-ARIA tabs pattern, as `<Markdown>` has it. */\n  const liveTabs = (list: Array<views.TabView<VNode>>, id: string): VNode => {\n    const at = offset\n    let state = tabStates.get(id)\n    if (!state) tabStates.set(id, (state = { active: 0, buttons: [] }))\n    const tab = state\n    tab.buttons = []\n    // A streamed form can lose a tab between renders only by being re-parsed; never point past it.\n    const current = tab.active < list.length ? tab.active : 0\n    const select = (index: number, focus: boolean) => {\n      const next = (index + list.length) % list.length\n      tab.active = next\n      changed(at)\n      if (focus) focusOn(tab.buttons[next])\n    }\n    return views.tabs(vnode, list, current, id, labels, (index) => ({\n      ref: (element: unknown) => {\n        tab.buttons[index] = element\n      },\n      onClick: () => select(index, false),\n      onKeyDown: (event: KeyPress) => {\n        const moves: Record<string, number> = {\n          ArrowRight: index + 1,\n          ArrowLeft: index - 1,\n          Home: 0,\n          End: list.length - 1,\n        }\n        const target = moves[event.key]\n        if (target === undefined) return\n        event.preventDefault()\n        select(target, true)\n      },\n    }))\n  }\n\n  /** A ```tree fence on a page: folders fold, and the arrow keys walk the rows (the tree pattern). */\n  const liveTree = (rows: TreeRow[]): VNode => {\n    const at = offset\n    const id = `${at}.${serial++}`\n    let state = treeStates.get(id)\n    if (!state)\n      treeStates.set(id, (state = { collapsed: new Set(), focused: null, elements: new Map() }))\n    const tree = state\n    tree.elements = new Map()\n    const toggle = (path: string) => {\n      if (!tree.collapsed.delete(path)) tree.collapsed.add(path)\n      changed(at)\n    }\n    const focus = (row: TreeRow | undefined) => {\n      if (row) focusOn(tree.elements.get(row.path))\n    }\n    return views.fileTree(\n      vnode,\n      {\n        rows,\n        collapsed: tree.collapsed,\n        focused: tree.focused,\n        on: (row, visible) => ({\n          ref: (element: unknown) => {\n            tree.elements.set(row.path, element)\n          },\n          onFocus: () => {\n            if (tree.focused === row.path) return\n            tree.focused = row.path\n            changed(at)\n          },\n          onClick: (event: { currentTarget: unknown }) => {\n            // Safari leaves a clicked row unfocused; the keys must carry on from it.\n            focusOn(event.currentTarget)\n            if (row.folder) toggle(row.path)\n          },\n          onKeyDown: (event: KeyPress) => {\n            const index = visible.indexOf(row)\n            const open = row.folder && !tree.collapsed.has(row.path)\n            const parent = row.parent === null ? undefined : rows[row.parent]\n            const actions: Record<string, () => void> = {\n              ArrowDown: () => focus(visible[index + 1]),\n              ArrowUp: () => focus(visible[index - 1]),\n              Home: () => focus(visible[0]),\n              End: () => focus(visible.at(-1)),\n              ArrowRight: () => (open ? focus(visible[index + 1]) : row.folder && toggle(row.path)),\n              ArrowLeft: () => (open ? toggle(row.path) : focus(parent)),\n              Enter: () => row.folder && toggle(row.path),\n              ' ': () => row.folder && toggle(row.path),\n            }\n            const action = actions[event.key]\n            if (!action) return\n            // Handled here, so not also by the page around the reply; the keys the tree leaves\n            // (Escape, Tab) still reach it.\n            event.preventDefault()\n            event.stopPropagation()\n            action()\n          },\n        }),\n      },\n      labels,\n    )\n  }\n\n  const components: Record<string, VComponent | undefined> = {\n    blockquote: (props, children) => views.callout(vnode, props, children, labels),\n    table: (props, children) =>\n      views.table(\n        vnode,\n        props,\n        children,\n        false,\n        labels,\n        host?.table ? { ref: host.table } : undefined,\n      ),\n    'answer-tabs': (props, children) => {\n      const list = views.readTabs(vnode, children)\n      if (list.length === 0) return []\n      const at = (props.node as Node | undefined)?.position?.start.offset ?? 0\n      const id = `${prefix}${offset + at}`\n      return host ? liveTabs(list, id) : views.tabs(vnode, list, 0, id, labels)\n    },\n    pre: ({ node: _node, ...props }, children) => {\n      const { language, title, text } = views.readCodeBlock(vnode, children)\n      return views.codeFrame(\n        vnode,\n        language,\n        views.codeBar(vnode, language, title, buttons(text, title, language)),\n        host?.table ? { ...props, ref: host.table } : props,\n        children,\n      )\n    },\n    code: (props, children) => views.code(vnode, props, children, highlight),\n    ...own,\n  }\n\n  const special = (language: string, source: string): VNode =>\n    language === DIAGRAM_FENCE_LANGUAGE\n      ? pageDiagram\n        ? pageDiagram(source, growing)\n        : views.diagramSource(vnode, source, null, false)\n      : pageTree\n        ? pageTree(source)\n        : treeOf(source)\n\n  const treeOf = (source: string): VNode => {\n    const rows = parseFileTree(source)\n    if (rows.length === 0) return []\n    if (host) return liveTree(rows)\n    return views.fileTree(vnode, { rows, collapsed: new Set(), focused: null }, labels)\n  }\n\n  const one = (\n    source: string,\n    at: number,\n    ids: ReadonlyMap<number, string> | null,\n    using: Record<string, VComponent | undefined>,\n  ): VNode =>\n    draw(parse(source, { extensions }), {\n      components: using,\n      urlTransform,\n      special,\n      labels,\n      offset: at,\n      headingIds: ids,\n    })\n\n  // A table's own shell taken off: a piece yields its rows alone.\n  const headParts = { ...components, table: CHILDREN, tbody: NOTHING }\n  const bodyParts = { ...components, table: CHILDREN, thead: NOTHING, tbody: CHILDREN }\n\n  const memory = createFenceMemory()\n  const cut = createCutter()\n\n  /** A code fence still being written, in the pieces it is highlighted by. */\n  const growingCode = (language: string | undefined, title: string, body: string): VNode => {\n    // The class a finished block gets when its language is one the highlighter knows.\n    const known = Boolean(language && highlight && highlight('', language) !== null)\n    const className = [language ? `language-${language}` : null, known ? 'fd-highlighted' : null]\n      .filter(Boolean)\n      .join(' ')\n    const pieces: VNode[] = cut(body).parts.map((text) => {\n      const html = known ? highlight!(text, language!) : null\n      return html === null ? text : vnode.element('span', { innerHTML: html }, [])\n    })\n    // A finished block's text ends in a newline unless it is highlighted; so does this.\n    if (!known && body) pieces.push('\\n')\n    return views.codeFrame(\n      vnode,\n      language,\n      views.codeBar(vnode, language, title, buttons(body, title, language)),\n      host?.table ? { ref: host.table } : null,\n      [vnode.element('code', { className: className || undefined }, pieces)],\n    )\n  }\n\n  const block = (open: string, closer: string, ids: ReadonlyMap<number, string> | null): VNode => {\n    const fence = growing && !ownCode ? growingFence(open, closer, memory) : null\n    if (\n      fence &&\n      fence.language !== DIAGRAM_FENCE_LANGUAGE &&\n      fence.language !== 'tree' &&\n      // A `math` fence is a formula where the page typesets math, and code where it does not.\n      !(fence.language === 'math' && math)\n    )\n      return growingCode(fence.language, fence.title, fence.body)\n    const source = closer ? open + closer : open\n    // A table that is the whole block is drawn as its header and its rows, as `<Markdown>` does.\n    const rows = ownTable ? null : tableRows(source)\n    if (rows) {\n      const pieces: VNode[] = []\n      for (let at = 0; at < rows.rows.length; at += ROWS)\n        pieces.push(one(rows.head + rows.rows.slice(at, at + ROWS).join('\\n'), 0, null, bodyParts))\n      return vnode.element(components.table!, null, [\n        one(rows.head, 0, null, headParts),\n        vnode.element('tbody', null, pieces),\n      ])\n    }\n    return one(source, offset, ids, components)\n  }\n\n  const doc = createDocument()\n  /** What each block drew last: a block that did not change is not drawn again. */\n  const drawn = new WeakMap<MarkdownBlock, Kept>()\n\n  return {\n    render(text, streaming = false) {\n      const state = doc.update(text, {\n        streaming,\n        math: Boolean(options.math),\n        headingIds: options.headingIds ?? false,\n      })\n      math = options.math && usesMath(state.blocks) ? options.math : null\n      // Whether the document has HTML is decided for the whole of it, not per block: a tag still\n      // being typed (`<div`) is its own block, and only the whole document says it is HTML.\n      const html = options.html && usesHtml(state.blocks) ? options.html : null\n      extensions = [\n        flowdownDialect,\n        ...(math ? [math] : []),\n        ...(options.extensions ?? []),\n        // Raw HTML is made into elements last, so every pass before it sees the text as written.\n        ...(html ? [html] : []),\n      ]\n      const stages = `${math ? 'm' : ''}${html ? 'h' : ''}`\n      const children: Drawn[] = []\n      const last = state.blocks.length - 1\n      state.blocks.forEach((item, index) => {\n        const closer = index === last ? state.closer : ''\n        const grows = index === last && state.growing\n        const ids = state.headingIds?.[index] ?? null\n        const headingKey = headingKeyOf(ids)\n        let made = drawn.get(item)\n        if (\n          made === undefined ||\n          stale.has(item.offset) ||\n          made.stages !== stages ||\n          made.closer !== closer ||\n          made.growing !== grows ||\n          made.offset !== item.offset ||\n          made.headingKey !== headingKey\n        ) {\n          offset = item.offset\n          growing = grows\n          serial = 0\n          const nodes = expand(block(item.source, closer, ids && ids.size > 0 ? ids : null))\n          made = { stages, closer, growing: grows, offset: item.offset, headingKey, nodes }\n          drawn.set(item, made)\n        }\n        // One parse puts a line break between top-level blocks; so does this.\n        if (index > 0) children.push('\\n')\n        for (const node of made.nodes) children.push(node)\n      })\n      stale.clear()\n      const caret = options.caret ?? streaming\n      const { className, unstyled } = options\n      const props: Props = {\n        className: unstyled ? className : className ? `flowdown ${className}` : 'flowdown',\n        'data-streaming': streaming || undefined,\n        'data-caret': (streaming && caret) || undefined,\n      }\n      return { tag: 'div', props, children }\n    },\n    dispose() {\n      for (const timer of copied.values()) clearTimeout(timer)\n      copied.clear()\n    },\n  }\n}\n"],"mappings":"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"}

package/dist/render/views.d.ts

@@ -0,0 +1,16 @@
+/**
+ * What the dialect's own elements are made of, written once for every target that has elements.
+ *
+ * A view is a function of a {@link Factory} and of what the element shows right now: which tab is
+ * open, whether the code was just copied. It keeps no state and listens to nothing: a target that
+ * can (React, the DOM) holds the state and hands in the listeners, and one that cannot (a server)
+ * draws the element as it first appears.
+ */
+/** The language a `<code>`'s class names: `language-ts` is `ts`. */
+export declare function getLanguage(className?: string): string | undefined;
+/**
+ * Turns a fence's code into highlighted HTML, or returns null to leave it plain. The HTML goes into
+ * the page as is, so a highlighter must escape the code it was given (highlight.js and Shiki do);
+ * `@localix-ai/flowdown/highlight` is one.
+ */
+export type Highlighter = (code: string, language: string) => string | null;

package/dist/render/views.js

@@ -0,0 +1,261 @@
+import { CALLOUT_KINDS } from "../dialect.js";
+// src/render/views.ts
+/**
+* The few glyphs the renderer draws, inline. A dependency on an icon library for eleven outlines
+* would cost every consumer an install, and a theme cannot restyle an icon font as simply as an
+* SVG that strokes with `currentColor`.
+*
+* Each glyph is one `<path>`: its strokes are subpaths of the same outline, and its circle or
+* rounded square is written out as arcs. A reply with a dozen code blocks and callouts draws
+* dozens of icons, and every stroke that is its own element is one more node on the page.
+*
+* Outlines from Lucide (https://lucide.dev), ISC License, Copyright (c) Lucide Contributors.
+*/
+const OUTLINES = {
+	info: "M2 12a10 10 0 1 0 20 0 10 10 0 1 0-20 0zM12 16v-4M12 8h.01",
+	tip: "M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5M9 18h6M10 22h4",
+	important: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2zM12 7v2M12 13h.01",
+	warning: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4M12 17h.01",
+	caution: "M2.586 16.726A2 2 0 0 1 2 15.312V8.688a2 2 0 0 1 .586-1.414l4.688-4.688A2 2 0 0 1 8.688 2h6.624a2 2 0 0 1 1.414.586l4.688 4.688A2 2 0 0 1 22 8.688v6.624a2 2 0 0 1-.586 1.414l-4.688 4.688a2 2 0 0 1-1.414.586H8.688a2 2 0 0 1-1.414-.586zM12 8v4M12 16h.01",
+	chevron: "m9 18 6-6-6-6",
+	file: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7ZM14 2v4a2 2 0 0 0 2 2h4",
+	folder: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z",
+	folderOpen: "m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2",
+	copy: "M10 8h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2zM4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2",
+	check: "M20 6 9 17l-5-5",
+	download: "M12 15V3M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5"
+};
+/** One glyph. `props` go on its `<svg>` after its own. */
+const glyph = (f, outline, props) => f.element("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 1.75,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": true,
+	focusable: "false",
+	...props
+}, [f.element("path", { d: outline }, [])]);
+/** The language a `<code>`'s class names: `language-ts` is `ts`. */
+function getLanguage(className) {
+	return /language-([^\s]+)/.exec(className ?? "")?.[1];
+}
+/** The text of some children, whatever elements it is in. */
+function textOf(f, children) {
+	let out = "";
+	for (const child of f.read(children)) out += typeof child === "string" ? child : textOf(f, child.children);
+	return out;
+}
+const CALLOUT_OUTLINES = {
+	note: OUTLINES.info,
+	tip: OUTLINES.tip,
+	important: OUTLINES.important,
+	warning: OUTLINES.warning,
+	caution: OUTLINES.caution
+};
+function calloutKind(value) {
+	return typeof value === "string" && CALLOUT_KINDS.includes(value) ? value : null;
+}
+/**
+* A quote, or, when the dialect marked it, a typed callout (`> [!WARNING]`). An `aside` with
+* `role="note"` rather than a styled quote: a warning is not a quotation, and assistive tech should
+* announce it as the aside it is, its kind first.
+*
+* The kind is carried by the glyph alone, in its colour. Its name is spoken, not printed, and a
+* title is printed only when the author wrote one (`> [!TIP] Faster builds`).
+*/
+function callout(f, { node: _node, "data-callout": marked, "data-callout-title": title, className, cite, ...quoteProps }, children, labels) {
+	const kind = calloutKind(marked);
+	if (!kind) return f.element("blockquote", {
+		className,
+		cite,
+		...quoteProps
+	}, children);
+	return f.element("aside", {
+		...quoteProps,
+		className: className ? `fd-callout ${className}` : "fd-callout",
+		"data-callout": kind,
+		role: "note",
+		"aria-label": title || labels.callouts[kind]
+	}, [glyph(f, CALLOUT_OUTLINES[kind], { className: "fd-callout-icon" }), f.element("div", { className: "fd-callout-body" }, [...title ? [f.element("div", { className: "fd-callout-title" }, [f.text(title)])] : [], ...children])]);
+}
+/**
+* Code, inline or in a fence. A fenced block is highlighted when the page gave a highlighter and
+* the fence names a language it knows; otherwise its text is printed as is.
+*/
+function code(f, { node: _node, className, ...props }, children, highlight) {
+	const language = getLanguage(className);
+	const html = language && highlight ? highlight(textOf(f, children).replace(/\n$/, ""), language) : null;
+	if (html === null) return f.element("code", {
+		className,
+		...props
+	}, children);
+	return f.element("code", {
+		className: [className, "fd-highlighted"].filter(Boolean).join(" "),
+		...props,
+		innerHTML: html
+	}, []);
+}
+/** What a code block's bar and buttons need of a `<pre>`'s children: its one `<code>`. */
+function readCodeBlock(f, children) {
+	const items = f.read(children);
+	const only = items.length === 1 && typeof items[0] !== "string" ? items[0] : null;
+	return {
+		language: getLanguage(only?.props.className),
+		title: only?.props["data-title"],
+		text: only ? textOf(f, only.children).replace(/\n$/, "") : ""
+	};
+}
+/** The copy button of a code block, before and after a copy. */
+const copyButton = (f, labels, copied, onClick) => f.element("button", {
+	type: "button",
+	className: "fd-code-copy",
+	onClick,
+	"aria-label": copied ? labels.copied : labels.copy,
+	title: copied ? labels.copied : labels.copy,
+	"data-copied": copied || void 0
+}, [glyph(f, copied ? OUTLINES.check : OUTLINES.copy)]);
+/** Saves the code as a file: named as its fence's title, or `code.<ext>` from its language. */
+const downloadButton = (f, labels, onClick) => f.element("button", {
+	type: "button",
+	className: "fd-code-download",
+	onClick,
+	"aria-label": labels.download,
+	title: labels.download
+}, [glyph(f, OUTLINES.download)]);
+/** The bar of a code block: the file its fence names, its language, and the two buttons. */
+const codeBar = (f, language, title, buttons) => f.element("figcaption", { className: "fd-code-bar" }, [
+	...title ? [f.element("span", { className: "fd-code-title" }, [f.text(title)])] : [],
+	...language ? [f.element("span", { className: "fd-code-language" }, [f.text(language)])] : [],
+	...buttons
+]);
+/**
+* The frame of a code block: the bar, then the `<pre>`. A fence that names its file
+* (` ```ts title="src/app.ts" `) shows the file first, the language after it; a fence with no
+* language shows none.
+*/
+const codeFrame = (f, language, bar, preProps, children) => f.element("figure", {
+	className: "fd-code",
+	"data-language": language
+}, [bar, f.element("pre", { ...preProps }, children)]);
+/** The variants among some children: every element, whatever is between them. */
+function readTabs(f, children) {
+	const list = [];
+	for (const child of f.read(children)) if (typeof child !== "string") list.push({
+		label: child.props["data-label"],
+		children: child.children
+	});
+	return list;
+}
+/**
+* `[!TABS]`: the variants of one answer (an install per OS, an example per language), of which
+* the reader needs one. Every panel stays in the document, `hidden`, so a search on the page, a
+* copy of the whole reply and a screen reader's panel navigation still reach the others.
+*
+* The WAI-ARIA tabs pattern: one Tab stop for the row, each tab names the panel it controls.
+* `on` gives a tab its listeners and its handle (`onClick`, `onKeyDown`, `ref`).
+*/
+function tabs(f, list, current, base, labels, on) {
+	const tabId = (index) => `${base}-tab-${index}`;
+	const panelId = (index) => `${base}-panel-${index}`;
+	return f.element("div", { className: "fd-tabs" }, [f.element("div", {
+		className: "fd-tab-list",
+		role: "tablist",
+		"aria-label": labels.variants
+	}, list.map((tab, index) => f.element("button", {
+		key: index,
+		type: "button",
+		role: "tab",
+		id: tabId(index),
+		className: "fd-tab",
+		"aria-selected": index === current,
+		"aria-controls": panelId(index),
+		tabIndex: index === current ? 0 : -1,
+		...on?.(index)
+	}, [f.text(tab.label || String(index + 1))]))), ...list.map((tab, index) => f.element("div", {
+		key: index,
+		role: "tabpanel",
+		id: panelId(index),
+		"aria-labelledby": tabId(index),
+		className: "fd-tab-panel",
+		hidden: index !== current
+	}, tab.children))]);
+}
+/**
+* A table in a box of its own that scrolls sideways: a wide comparison then scrolls inside the
+* reply instead of widening the page. A box that scrolls is a named group the Tab key stops on, so the
+* arrow keys can scroll it (WCAG 2.1.1); a table that fits stays out of the Tab order.
+*/
+const table = (f, { node: _node, ...props }, children, scrolls, labels, box) => f.element("div", {
+	...box,
+	className: "fd-table",
+	role: scrolls ? "group" : void 0,
+	"aria-label": scrolls ? labels.scrollableTable : void 0,
+	tabIndex: scrolls ? 0 : void 0
+}, [f.element("table", props, children)]);
+/** The rows of a tree that no shut folder hides. */
+function visibleRows(rows, collapsed) {
+	const hidden = (row) => {
+		for (let parent = row.parent; parent !== null; parent = rows[parent].parent) if (collapsed.has(rows[parent].path)) return true;
+		return false;
+	};
+	return rows.filter((row) => !hidden(row));
+}
+/**
+* A ```tree fence: a directory layout drawn as a tree instead of box characters in monospace. The
+* tree is one Tab stop walked with the arrow keys (the WAI-ARIA tree pattern).
+*/
+function fileTree(f, { rows, collapsed, focused, icon, on }, labels) {
+	const visible = visibleRows(rows, collapsed);
+	const rover = visible.some((row) => row.path === focused) ? focused : visible[0]?.path;
+	return f.element("div", {
+		role: "tree",
+		"aria-label": labels.fileTree,
+		className: "fd-tree"
+	}, visible.map((row) => {
+		const open = !collapsed.has(row.path);
+		return f.element("div", {
+			key: row.path,
+			role: "treeitem",
+			"aria-level": row.depth + 1,
+			"aria-selected": false,
+			...row.folder ? { "aria-expanded": open } : {},
+			tabIndex: row.path === rover ? 0 : -1,
+			className: "fd-tree-row",
+			"data-folder": row.folder || void 0,
+			style: { "--fd-tree-depth": row.depth },
+			...on?.(row, visible)
+		}, [
+			...row.folder ? [glyph(f, OUTLINES.chevron, {
+				className: "fd-tree-chevron",
+				"data-open": open || void 0
+			})] : [],
+			icon ? icon(row, open) : glyph(f, row.folder ? open ? OUTLINES.folderOpen : OUTLINES.folder : OUTLINES.file, { className: "fd-tree-icon" }),
+			f.element("span", {
+				className: "fd-tree-name",
+				title: row.name
+			}, [f.text(row.name.replace(/\/$/, ""))]),
+			...row.comment ? [f.element("span", {
+				className: "fd-tree-comment",
+				title: row.comment
+			}, [f.text(row.comment)])] : []
+		]);
+	}));
+}
+/**
+* A ```mermaid fence shown as the source it is: before it is drawn, where nothing draws it, or
+* when it could not be drawn, with a line saying why.
+*/
+const diagramSource = (f, source, note, failed, figure) => f.element("figure", {
+	...figure,
+	className: "fd-diagram",
+	"data-state": failed ? "error" : "source"
+}, [f.element("pre", null, [f.element("code", { className: "language-mermaid" }, [f.text(source)])]), ...note ? [f.element("figcaption", {
+	className: "fd-diagram-note",
+	role: "status"
+}, [f.text(note)])] : []]);
+export { OUTLINES, callout, code, codeBar, codeFrame, copyButton, diagramSource, downloadButton, fileTree, getLanguage, glyph, readCodeBlock, readTabs, table, tabs, textOf, visibleRows };
+
+//# sourceMappingURL=views.js.map