@localix-ai/flowdown 0.0.0-stage → 0.5.1

package/dist/document/table.js

@@ -0,0 +1,35 @@
+// src/document/table.ts
+/**
+* A block that is one table, read without parsing it: what a renderer needs to draw a long table
+* in pieces, a token costing only its last rows.
+*/
+const ROW = /^ {0,3}\|/;
+const DELIMITER_CELL = /^[ \t]*:?-+:?[ \t]*$/;
+/** The cells of a row written with its outer pipes. Null when a pipe could be an escaped one. */
+function cells(line) {
+	if (line.includes("\\")) return null;
+	return line.trim().replace(/^\|/, "").replace(/\|$/, "").split("|");
+}
+/**
+* The header (its two lines) and the body rows of a block that is one table and nothing else:
+* every line opens with a pipe, so none of them can be anything but a row. Null for any other
+* block, and for a table this cannot read with certainty; those are drawn by one parse, as ever.
+*/
+function tableRows(source) {
+	const text = source.replace(/^\n+/, "").trimEnd();
+	if (text.charCodeAt(0) !== 124 && !ROW.test(text)) return null;
+	const lines = text.split("\n");
+	if (lines.length < 3 || !lines.every((line) => ROW.test(line))) return null;
+	const header = cells(lines[0]);
+	const delimiter = cells(lines[1]);
+	if (!header || !delimiter || header.length !== delimiter.length) return null;
+	if (!delimiter.every((cell) => DELIMITER_CELL.test(cell))) return null;
+	if (!header.some((cell) => cell.trim())) return null;
+	return {
+		head: `${lines[0]}\n${lines[1]}\n`,
+		rows: lines.slice(2)
+	};
+}
+export { tableRows };
+
+//# sourceMappingURL=table.js.map

package/dist/document/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","names":[],"sources":["../../src/document/table.ts"],"sourcesContent":["/**\n * A block that is one table, read without parsing it: what a renderer needs to draw a long table\n * in pieces, a token costing only its last rows.\n */\nconst ROW = /^ {0,3}\\|/\nconst DELIMITER_CELL = /^[ \\t]*:?-+:?[ \\t]*$/\n\n/** The cells of a row written with its outer pipes. Null when a pipe could be an escaped one. */\nfunction cells(line: string): string[] | null {\n  if (line.includes('\\\\')) return null\n  const inner = line.trim().replace(/^\\|/, '').replace(/\\|$/, '')\n  return inner.split('|')\n}\n\n/** A table's header (its two lines, each with its line break) and its body rows. */\nexport interface TableRows {\n  head: string\n  rows: string[]\n}\n\n/**\n * The header (its two lines) and the body rows of a block that is one table and nothing else:\n * every line opens with a pipe, so none of them can be anything but a row. Null for any other\n * block, and for a table this cannot read with certainty; those are drawn by one parse, as ever.\n */\nexport function tableRows(source: string): TableRows | null {\n  const text = source.replace(/^\\n+/, '').trimEnd()\n  if (text.charCodeAt(0) !== 124 && !ROW.test(text)) return null\n  const lines = text.split('\\n')\n  if (lines.length < 3 || !lines.every((line) => ROW.test(line))) return null\n  const header = cells(lines[0]!)\n  const delimiter = cells(lines[1]!)\n  if (!header || !delimiter || header.length !== delimiter.length) return null\n  if (!delimiter.every((cell) => DELIMITER_CELL.test(cell))) return null\n  if (!header.some((cell) => cell.trim())) return null\n  return { head: `${lines[0]}\\n${lines[1]}\\n`, rows: lines.slice(2) }\n}\n"],"mappings":";;;;;AAIA,MAAM,MAAM;AACZ,MAAM,iBAAiB;;AAGvB,SAAS,MAAM,MAA+B;CAC5C,IAAI,KAAK,SAAS,IAAI,GAAG,OAAO;CAEhC,OADc,KAAK,KAAK,CAAC,CAAC,QAAQ,OAAO,EAAE,CAAC,CAAC,QAAQ,OAAO,EACjD,CAAC,CAAC,MAAM,GAAG;AACxB;;;;;;AAaA,SAAgB,UAAU,QAAkC;CAC1D,MAAM,OAAO,OAAO,QAAQ,QAAQ,EAAE,CAAC,CAAC,QAAQ;CAChD,IAAI,KAAK,WAAW,CAAC,MAAM,OAAO,CAAC,IAAI,KAAK,IAAI,GAAG,OAAO;CAC1D,MAAM,QAAQ,KAAK,MAAM,IAAI;CAC7B,IAAI,MAAM,SAAS,KAAK,CAAC,MAAM,OAAO,SAAS,IAAI,KAAK,IAAI,CAAC,GAAG,OAAO;CACvE,MAAM,SAAS,MAAM,MAAM,EAAG;CAC9B,MAAM,YAAY,MAAM,MAAM,EAAG;CACjC,IAAI,CAAC,UAAU,CAAC,aAAa,OAAO,WAAW,UAAU,QAAQ,OAAO;CACxE,IAAI,CAAC,UAAU,OAAO,SAAS,eAAe,KAAK,IAAI,CAAC,GAAG,OAAO;CAClE,IAAI,CAAC,OAAO,MAAM,SAAS,KAAK,KAAK,CAAC,GAAG,OAAO;CAChD,OAAO;EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,MAAM,GAAG;EAAK,MAAM,MAAM,MAAM,CAAC;CAAE;AACpE"}

package/dist/dom/index.d.ts

@@ -0,0 +1,21 @@
+import { ViewComponents, ViewOptions } from "../render/view.js";
+import { VComponent, VElement, VNode } from "../render/vnode.js";
+import { DEFAULT_LABELS, LabelOverrides, MarkdownLabels } from "../render/labels.js";
+import { Highlighter } from "../render/views.js";
+import { UrlTransform, defaultUrlTransform } from "../engine/url.js";
+import { Extension, Node } from "../engine/types.js";
+export type MountOptions = Omit<ViewOptions, 'host' | 'idPrefix'>;
+export interface UpdateOptions {
+  /** The text is a reply still arriving: its unfinished end is completed, and a caret follows it. */
+  streaming?: boolean;
+}
+export interface Mounted {
+  /** The document's root: `<div class="flowdown">`, the last child of what it was mounted in. */
+  readonly element: HTMLElement;
+  /** Shows `markdown`. Call it on every token: what did not change is not drawn again. */
+  update(markdown: string, options?: UpdateOptions): void;
+  /** Takes the document off the page and stops everything it started. */
+  destroy(): void;
+}
+export declare function mount(target: Element, options?: MountOptions): Mounted;
+export { DEFAULT_LABELS, type Extension, type Highlighter, type LabelOverrides, type MarkdownLabels, type Node, type UrlTransform, type VComponent, type VElement, type VNode, type ViewComponents, defaultUrlTransform };

package/dist/dom/index.js

@@ -0,0 +1,141 @@
+import { codeFileName, copyText, downloadFile } from "../browser/file-actions.js";
+import { DEFAULT_LABELS, mergeLabels } from "../render/labels.js";
+import { createView } from "../render/view.js";
+import { create, patch } from "./patch.js";
+import { defaultUrlTransform } from "../engine/url.js";
+// src/dom/index.ts
+/**
+* `@localix-ai/flowdown/dom`: Markdown on a page with no framework.
+*
+*     import { mount } from '@localix-ai/flowdown/dom'
+*     import '@localix-ai/flowdown/styles.css'
+*
+*     const reply = mount(document.querySelector('#reply'))
+*     for await (const text of stream) reply.update(text, { streaming: true })
+*     reply.update(text)
+*
+* The elements are the ones `<Markdown>` draws, and the page is kept up to date the same way: a
+* block that did not change is not touched, so a token costs the last block. Tabs switch, a file
+* tree folds, a code block copies and saves, a wide table scrolls: all with the keyboard too.
+*
+* It is also what a binding for a framework is made of: mount into the element the framework
+* gives you, call `update` when the text changes, `destroy` when the element goes.
+*/
+/** Documents mounted so far: each gets its own ids for its tabs. */
+let mounts = 0;
+/**
+* A table's box, or a code block's `<pre>`, scrolls sideways when what it holds is wider: then the
+* keyboard must reach it.
+*/
+function measure(box, labels) {
+	const scrolls = box.scrollWidth > box.clientWidth + 1;
+	if (scrolls === box.hasAttribute("tabindex")) return;
+	const label = box.localName === "pre" ? labels.scrollableCode : labels.scrollableTable;
+	if (scrolls) {
+		box.setAttribute("role", "group");
+		box.setAttribute("aria-label", label);
+		box.setAttribute("tabindex", "0");
+	} else {
+		box.removeAttribute("role");
+		box.removeAttribute("aria-label");
+		box.removeAttribute("tabindex");
+	}
+}
+function mount(target, options = {}) {
+	const document = target.ownerDocument;
+	const labels = mergeLabels(options.labels);
+	let text = "";
+	let streaming = false;
+	let shown = null;
+	let root = null;
+	let drawing = false;
+	let again = false;
+	let gone = false;
+	/** The table boxes on the page, and the ones made since the last drawing. */
+	const boxes = /* @__PURE__ */ new WeakSet();
+	let fresh = [];
+	/** Whether a measuring of the last code block is already waiting for the next frame. */
+	let asked = false;
+	const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver((entries) => {
+		for (const entry of entries) {
+			const box = entry.target.closest(".fd-table, pre");
+			if (box) measure(box, labels);
+		}
+	});
+	const view = createView({
+		...options,
+		idPrefix: `fd-${mounts += 1}-`,
+		host: {
+			redraw: () => draw(),
+			copy: copyText,
+			download: (code, title, language) => downloadFile(code, codeFileName(title, language)),
+			table: (box) => {
+				const element = box;
+				if (boxes.has(element)) return;
+				boxes.add(element);
+				fresh.push(element);
+			}
+		}
+	});
+	function draw() {
+		if (gone) return;
+		if (drawing) {
+			again = true;
+			return;
+		}
+		drawing = true;
+		try {
+			do {
+				again = false;
+				const next = view.render(text, streaming);
+				if (root === null || shown === null) {
+					root = create(next, document);
+					target.appendChild(root);
+				} else root = patch(root, shown, next, document);
+				shown = next;
+			} while (again);
+		} finally {
+			drawing = false;
+		}
+		for (const box of fresh) {
+			measure(box, labels);
+			if (observer) {
+				observer.observe(box);
+				const table = box.querySelector("table");
+				if (table) observer.observe(table);
+			}
+		}
+		fresh = [];
+		if (!asked && root !== null && typeof requestAnimationFrame === "function") {
+			asked = true;
+			requestAnimationFrame(() => {
+				asked = false;
+				if (gone || root === null) return;
+				const blocks = root.getElementsByTagName("pre");
+				const last = blocks[blocks.length - 1];
+				if (last && boxes.has(last)) measure(last, labels);
+			});
+		}
+	}
+	draw();
+	return {
+		get element() {
+			return root;
+		},
+		update(markdown, { streaming: live = false } = {}) {
+			text = markdown;
+			streaming = live;
+			draw();
+		},
+		destroy() {
+			if (gone) return;
+			gone = true;
+			observer?.disconnect();
+			view.dispose();
+			root?.remove();
+		}
+	};
+}
+export { DEFAULT_LABELS, defaultUrlTransform, mount };
+
+//# sourceMappingURL=index.js.map

package/dist/dom/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/dom/index.ts"],"sourcesContent":["/**\n * `@localix-ai/flowdown/dom`: Markdown on a page with no framework.\n *\n *     import { mount } from '@localix-ai/flowdown/dom'\n *     import '@localix-ai/flowdown/styles.css'\n *\n *     const reply = mount(document.querySelector('#reply'))\n *     for await (const text of stream) reply.update(text, { streaming: true })\n *     reply.update(text)\n *\n * The elements are the ones `<Markdown>` draws, and the page is kept up to date the same way: a\n * block that did not change is not touched, so a token costs the last block. Tabs switch, a file\n * tree folds, a code block copies and saves, a wide table scrolls: all with the keyboard too.\n *\n * It is also what a binding for a framework is made of: mount into the element the framework\n * gives you, call `update` when the text changes, `destroy` when the element goes.\n */\nimport { codeFileName, copyText, downloadFile } from '../browser/file-actions'\nimport { mergeLabels, type MarkdownLabels } from '../render/labels'\nimport { createView, type ViewOptions } from '../render/view'\nimport type { DrawnElement } from '../render/vnode'\nimport { create, patch } from './patch'\n\nexport type { ViewComponents } from '../render/view'\nexport type { VComponent, VElement, VNode } from '../render/vnode'\nexport { DEFAULT_LABELS, type LabelOverrides, type MarkdownLabels } from '../render/labels'\nexport type { Highlighter } from '../render/views'\nexport { defaultUrlTransform, type UrlTransform } from '../engine/url'\nexport type { Extension, Node } from '../engine/types'\n\nexport type MountOptions = Omit<ViewOptions, 'host' | 'idPrefix'>\n\nexport interface UpdateOptions {\n  /** The text is a reply still arriving: its unfinished end is completed, and a caret follows it. */\n  streaming?: boolean\n}\n\nexport interface Mounted {\n  /** The document's root: `<div class=\"flowdown\">`, the last child of what it was mounted in. */\n  readonly element: HTMLElement\n  /** Shows `markdown`. Call it on every token: what did not change is not drawn again. */\n  update(markdown: string, options?: UpdateOptions): void\n  /** Takes the document off the page and stops everything it started. */\n  destroy(): void\n}\n\n/** Documents mounted so far: each gets its own ids for its tabs. */\nlet mounts = 0\n\n/**\n * A table's box, or a code block's `<pre>`, scrolls sideways when what it holds is wider: then the\n * keyboard must reach it.\n */\nfunction measure(box: Element, labels: MarkdownLabels): void {\n  // One pixel of slack: a subpixel content width rounds up past the box it fits in.\n  const scrolls = box.scrollWidth > box.clientWidth + 1\n  if (scrolls === box.hasAttribute('tabindex')) return\n  const label = box.localName === 'pre' ? labels.scrollableCode : labels.scrollableTable\n  if (scrolls) {\n    box.setAttribute('role', 'group')\n    box.setAttribute('aria-label', label)\n    box.setAttribute('tabindex', '0')\n  } else {\n    box.removeAttribute('role')\n    box.removeAttribute('aria-label')\n    box.removeAttribute('tabindex')\n  }\n}\n\nexport function mount(target: Element, options: MountOptions = {}): Mounted {\n  const document = target.ownerDocument\n  const labels = mergeLabels(options.labels)\n  let text = ''\n  let streaming = false\n  let shown: DrawnElement | null = null\n  let root: HTMLElement | null = null\n  let drawing = false\n  let again = false\n  let gone = false\n\n  /** The table boxes on the page, and the ones made since the last drawing. */\n  const boxes = new WeakSet<Element>()\n  let fresh: Element[] = []\n  /** Whether a measuring of the last code block is already waiting for the next frame. */\n  let asked = false\n  const observer =\n    typeof ResizeObserver === 'undefined'\n      ? null\n      : new ResizeObserver((entries) => {\n          for (const entry of entries) {\n            const box = entry.target.closest('.fd-table, pre')\n            if (box) measure(box, labels)\n          }\n        })\n\n  const view = createView({\n    ...options,\n    idPrefix: `fd-${(mounts += 1)}-`,\n    host: {\n      redraw: () => draw(),\n      copy: copyText,\n      download: (code, title, language) => downloadFile(code, codeFileName(title, language)),\n      table: (box) => {\n        const element = box as Element\n        if (boxes.has(element)) return\n        boxes.add(element)\n        fresh.push(element)\n      },\n    },\n  })\n\n  function draw(): void {\n    if (gone) return\n    // A listener that fires while the page is being changed asks for one more drawing after it.\n    if (drawing) {\n      again = true\n      return\n    }\n    drawing = true\n    try {\n      do {\n        again = false\n        const next = view.render(text, streaming)\n        if (root === null || shown === null) {\n          root = create(next, document) as HTMLElement\n          target.appendChild(root)\n        } else {\n          root = patch(root, shown, next, document) as HTMLElement\n        }\n        shown = next\n      } while (again)\n    } finally {\n      drawing = false\n    }\n    // Measured once it is on the page, and again whenever it or its table changes size: a reply\n    // that streams a row in, a window made narrower.\n    for (const box of fresh) {\n      measure(box, labels)\n      if (observer) {\n        observer.observe(box)\n        const table = box.querySelector('table')\n        if (table) observer.observe(table)\n      }\n    }\n    fresh = []\n    // A line of code getting longer resizes nothing an observer watches. The block being written\n    // is the last one: it is measured once a frame, when the page is laid out anyway.\n    if (!asked && root !== null && typeof requestAnimationFrame === 'function') {\n      asked = true\n      requestAnimationFrame(() => {\n        asked = false\n        if (gone || root === null) return\n        const blocks = root.getElementsByTagName('pre')\n        const last = blocks[blocks.length - 1]\n        if (last && boxes.has(last)) measure(last, labels)\n      })\n    }\n  }\n\n  draw()\n\n  return {\n    get element() {\n      return root!\n    },\n    update(markdown, { streaming: live = false } = {}) {\n      text = markdown\n      streaming = live\n      draw()\n    },\n    destroy() {\n      if (gone) return\n      gone = true\n      observer?.disconnect()\n      view.dispose()\n      root?.remove()\n    },\n  }\n}\n"],"mappings":"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"}

package/dist/dom/patch.js

@@ -0,0 +1,104 @@
+import { attributeName, attributeOf } from "../render/vnode.js";
+// src/dom/patch.ts
+/**
+* Plain elements (`render/vnode.ts`) put on a page and kept up to date.
+*
+* What was drawn last is compared with what is drawn now, and only the difference touches the
+* page. Two elements that are the very same object are not looked into: a view hands back a block
+* that did not change as the same elements, so a token of a streaming reply costs its last block.
+*
+* The page is compared with nothing: what a reader changed on it by hand (a selection, a scroll
+* position, an attribute a script set) stays, as long as the drawing does not change in that place.
+*/
+const SVG = "http://www.w3.org/2000/svg";
+const inner = (node) => node.props?.innerHTML ?? null;
+/** `onClick` and its like: a function under a name that starts with `on`. */
+const isListener = (name) => name.length > 2 && name.charCodeAt(0) === 111 && name.charCodeAt(1) === 110;
+function setProp(element, name, value, was) {
+	if (name === "ref" || name === "key" || name === "node" || name === "innerHTML") return;
+	if (typeof value === "function" || typeof was === "function") {
+		if (isListener(name)) element[name.toLowerCase()] = typeof value === "function" ? value : null;
+		if (typeof value === "function") return;
+	}
+	const attribute = attributeOf(name, value);
+	if (attribute === null) element.removeAttribute(attributeName(name));
+	else element.setAttribute(attribute.name, attribute.value);
+	if (name === "checked") element.checked = Boolean(value);
+}
+/** The node for `drawn`, with everything inside it. */
+function create(drawn, document, svg = false) {
+	if (typeof drawn === "string") return document.createTextNode(drawn);
+	const inSvg = svg || drawn.tag === "svg";
+	const element = inSvg ? document.createElementNS(SVG, drawn.tag) : document.createElement(drawn.tag);
+	const props = drawn.props;
+	if (props !== null) for (const name in props) setProp(element, name, props[name], void 0);
+	const html = inner(drawn);
+	if (html !== null) element.innerHTML = String(html);
+	else {
+		const below = inSvg && drawn.tag !== "foreignObject";
+		for (const child of drawn.children) element.appendChild(create(child, document, below));
+	}
+	if (typeof props?.ref === "function") props.ref(element);
+	return element;
+}
+/**
+* Makes `node`, which shows `old`, show `next`. Returns the node that shows it: `node` itself, or
+* the one put in its place when the two are not the same kind of thing.
+*/
+function patch(node, old, next, document, svg = false) {
+	if (old === next) return node;
+	if (typeof next === "string") {
+		if (typeof old === "string") {
+			node.data = next;
+			return node;
+		}
+		return replace(node, next, document, svg);
+	}
+	if (typeof old === "string" || old.tag !== next.tag || inner(old) === null !== (inner(next) === null)) return replace(node, next, document, svg);
+	const element = node;
+	const before = old.props;
+	const after = next.props;
+	if (before !== after) {
+		if (after !== null) for (const name in after) {
+			const was = before === null ? void 0 : before[name];
+			if (was !== after[name]) setProp(element, name, after[name], was);
+		}
+		if (before !== null) {
+			for (const name in before) if (after === null || !(name in after)) setProp(element, name, void 0, before[name]);
+		}
+	}
+	const html = inner(next);
+	if (html !== null) {
+		if (String(html) !== String(inner(old))) element.innerHTML = String(html);
+	} else {
+		const inSvg = svg || next.tag === "svg";
+		patchChildren(element, old.children, next.children, document, inSvg && next.tag !== "foreignObject");
+	}
+	if (typeof after?.ref === "function") after.ref(element);
+	return node;
+}
+function replace(node, next, document, svg) {
+	const made = create(next, document, svg);
+	node.parentNode?.replaceChild(made, node);
+	return made;
+}
+/** Children are matched by place: a reply grows at its end, and what is before the end stays put. */
+function patchChildren(parent, old, next, document, svg) {
+	const shared = Math.min(old.length, next.length);
+	let child = parent.firstChild;
+	let index = 0;
+	for (; index < shared && child !== null; index += 1) {
+		const following = child.nextSibling;
+		patch(child, old[index], next[index], document, svg);
+		child = following;
+	}
+	while (child !== null) {
+		const following = child.nextSibling;
+		parent.removeChild(child);
+		child = following;
+	}
+	for (; index < next.length; index += 1) parent.appendChild(create(next[index], document, svg));
+}
+export { create, patch };
+
+//# sourceMappingURL=patch.js.map

package/dist/dom/patch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"patch.js","names":[],"sources":["../../src/dom/patch.ts"],"sourcesContent":["/**\n * Plain elements (`render/vnode.ts`) put on a page and kept up to date.\n *\n * What was drawn last is compared with what is drawn now, and only the difference touches the\n * page. Two elements that are the very same object are not looked into: a view hands back a block\n * that did not change as the same elements, so a token of a streaming reply costs its last block.\n *\n * The page is compared with nothing: what a reader changed on it by hand (a selection, a scroll\n * position, an attribute a script set) stays, as long as the drawing does not change in that place.\n */\nimport { attributeName, attributeOf, type Drawn, type DrawnElement } from '../render/vnode'\n\nconst SVG = 'http://www.w3.org/2000/svg'\n\nconst inner = (node: DrawnElement): unknown => node.props?.innerHTML ?? null\n\n/** `onClick` and its like: a function under a name that starts with `on`. */\nconst isListener = (name: string): boolean =>\n  name.length > 2 && name.charCodeAt(0) === 111 && name.charCodeAt(1) === 110\n\nfunction setProp(element: Element, name: string, value: unknown, was: unknown): void {\n  if (name === 'ref' || name === 'key' || name === 'node' || name === 'innerHTML') return\n  if (typeof value === 'function' || typeof was === 'function') {\n    // One listener a kind, kept as the element's own (`onclick`): drawing again replaces it.\n    if (isListener(name))\n      (element as unknown as Record<string, unknown>)[name.toLowerCase()] =\n        typeof value === 'function' ? value : null\n    if (typeof value === 'function') return\n  }\n  const attribute = attributeOf(name, value)\n  if (attribute === null) element.removeAttribute(attributeName(name))\n  else element.setAttribute(attribute.name, attribute.value)\n  // A box a reader has ticked no longer follows its attribute.\n  if (name === 'checked') (element as HTMLInputElement).checked = Boolean(value)\n}\n\n/** The node for `drawn`, with everything inside it. */\nexport function create(drawn: Drawn, document: Document, svg = false): Node {\n  if (typeof drawn === 'string') return document.createTextNode(drawn)\n  const inSvg = svg || drawn.tag === 'svg'\n  const element = inSvg\n    ? document.createElementNS(SVG, drawn.tag)\n    : document.createElement(drawn.tag)\n  const props = drawn.props\n  if (props !== null) for (const name in props) setProp(element, name, props[name], undefined)\n  const html = inner(drawn)\n  if (html !== null) element.innerHTML = String(html)\n  else {\n    const below = inSvg && drawn.tag !== 'foreignObject'\n    for (const child of drawn.children) element.appendChild(create(child, document, below))\n  }\n  if (typeof props?.ref === 'function') (props.ref as (element: Element) => void)(element)\n  return element\n}\n\n/**\n * Makes `node`, which shows `old`, show `next`. Returns the node that shows it: `node` itself, or\n * the one put in its place when the two are not the same kind of thing.\n */\nexport function patch(node: Node, old: Drawn, next: Drawn, document: Document, svg = false): Node {\n  if (old === next) return node\n  if (typeof next === 'string') {\n    if (typeof old === 'string') {\n      ;(node as Text).data = next\n      return node\n    }\n    return replace(node, next, document, svg)\n  }\n  if (\n    typeof old === 'string' ||\n    old.tag !== next.tag ||\n    (inner(old) === null) !== (inner(next) === null)\n  )\n    return replace(node, next, document, svg)\n  const element = node as Element\n  const before = old.props\n  const after = next.props\n  if (before !== after) {\n    if (after !== null)\n      for (const name in after) {\n        const was = before === null ? undefined : before[name]\n        if (was !== after[name]) setProp(element, name, after[name], was)\n      }\n    if (before !== null)\n      for (const name in before)\n        if (after === null || !(name in after)) setProp(element, name, undefined, before[name])\n  }\n  const html = inner(next)\n  if (html !== null) {\n    if (String(html) !== String(inner(old))) element.innerHTML = String(html)\n  } else {\n    const inSvg = svg || next.tag === 'svg'\n    patchChildren(\n      element,\n      old.children,\n      next.children,\n      document,\n      inSvg && next.tag !== 'foreignObject',\n    )\n  }\n  if (typeof after?.ref === 'function') (after.ref as (element: Element) => void)(element)\n  return node\n}\n\nfunction replace(node: Node, next: Drawn, document: Document, svg: boolean): Node {\n  const made = create(next, document, svg)\n  node.parentNode?.replaceChild(made, node)\n  return made\n}\n\n/** Children are matched by place: a reply grows at its end, and what is before the end stays put. */\nfunction patchChildren(\n  parent: Element,\n  old: readonly Drawn[],\n  next: readonly Drawn[],\n  document: Document,\n  svg: boolean,\n): void {\n  const shared = Math.min(old.length, next.length)\n  let child = parent.firstChild\n  let index = 0\n  for (; index < shared && child !== null; index += 1) {\n    const following = child.nextSibling\n    patch(child, old[index]!, next[index]!, document, svg)\n    child = following\n  }\n  // What the page holds past the drawing's end goes; what the drawing holds past the page's is made.\n  while (child !== null) {\n    const following = child.nextSibling\n    parent.removeChild(child)\n    child = following\n  }\n  for (; index < next.length; index += 1) parent.appendChild(create(next[index]!, document, svg))\n}\n"],"mappings":"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"}

package/dist/element/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * `@localix-ai/flowdown/element`: Markdown as an element of the page's own, for anything that writes HTML
+ * (Vue, Svelte, Solid, Angular, a template, a plain page).
+ *
+ *     import { defineMarkdownElement } from '@localix-ai/flowdown/element'
+ *     import '@localix-ai/flowdown/styles.css'
+ *
+ *     defineMarkdownElement()
+ *
+ *     <flow-down streaming></flow-down>
+ *     element.markdown = text
+ *
+ * The text is the `markdown` property; the `streaming` attribute says the reply is still arriving.
+ * Text written inside the element is shown until the property is first set. The document is drawn
+ * in the page, not in a shadow tree, so the page's stylesheet and theme reach it.
+ */
+import { MountOptions } from "../dom/index.js";
+export interface MarkdownElement extends HTMLElement {
+  /** The Markdown shown. */
+  markdown: string;
+  /** The reply is still arriving; the same as the `streaming` attribute. */
+  streaming: boolean;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    /** The element under its default name, so `querySelector('flow-down')` has `markdown`. */
+    'flow-down': MarkdownElement;
+  }
+}
+/**
+ * Registers the element under `name`. `options` are what every such element is drawn with: a
+ * highlighter, math, raw HTML, labels. Registering a name twice keeps the first.
+ */
+export declare function defineMarkdownElement(name?: string, options?: MountOptions): void;
+export type { MountOptions };

package/dist/element/index.js

@@ -0,0 +1,64 @@
+import { mount } from "../dom/index.js";
+// src/element/index.ts
+/**
+* `@localix-ai/flowdown/element`: Markdown as an element of the page's own, for anything that writes HTML
+* (Vue, Svelte, Solid, Angular, a template, a plain page).
+*
+*     import { defineMarkdownElement } from '@localix-ai/flowdown/element'
+*     import '@localix-ai/flowdown/styles.css'
+*
+*     defineMarkdownElement()
+*
+*     <flow-down streaming></flow-down>
+*     element.markdown = text
+*
+* The text is the `markdown` property; the `streaming` attribute says the reply is still arriving.
+* Text written inside the element is shown until the property is first set. The document is drawn
+* in the page, not in a shadow tree, so the page's stylesheet and theme reach it.
+*/
+/**
+* Registers the element under `name`. `options` are what every such element is drawn with: a
+* highlighter, math, raw HTML, labels. Registering a name twice keeps the first.
+*/
+function defineMarkdownElement(name = "flow-down", options = {}) {
+	if (typeof customElements === "undefined" || customElements.get(name)) return;
+	class Element extends HTMLElement {
+		static observedAttributes = ["streaming"];
+		#text = null;
+		#mounted = null;
+		get markdown() {
+			return this.#text ?? "";
+		}
+		set markdown(value) {
+			this.#text = value === null || value === void 0 ? "" : String(value);
+			this.#show();
+		}
+		get streaming() {
+			return this.hasAttribute("streaming");
+		}
+		set streaming(value) {
+			this.toggleAttribute("streaming", Boolean(value));
+		}
+		connectedCallback() {
+			if (this.#mounted) return;
+			if (this.#text === null) this.#text = this.textContent ?? "";
+			this.textContent = "";
+			this.#mounted = mount(this, options);
+			this.#show();
+		}
+		disconnectedCallback() {
+			this.#mounted?.destroy();
+			this.#mounted = null;
+		}
+		attributeChangedCallback() {
+			this.#show();
+		}
+		#show() {
+			this.#mounted?.update(this.#text ?? "", { streaming: this.streaming });
+		}
+	}
+	customElements.define(name, Element);
+}
+export { defineMarkdownElement };
+
+//# sourceMappingURL=index.js.map

package/dist/element/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/element/index.ts"],"sourcesContent":["/**\n * `@localix-ai/flowdown/element`: Markdown as an element of the page's own, for anything that writes HTML\n * (Vue, Svelte, Solid, Angular, a template, a plain page).\n *\n *     import { defineMarkdownElement } from '@localix-ai/flowdown/element'\n *     import '@localix-ai/flowdown/styles.css'\n *\n *     defineMarkdownElement()\n *\n *     <flow-down streaming></flow-down>\n *     element.markdown = text\n *\n * The text is the `markdown` property; the `streaming` attribute says the reply is still arriving.\n * Text written inside the element is shown until the property is first set. The document is drawn\n * in the page, not in a shadow tree, so the page's stylesheet and theme reach it.\n */\nimport { mount, type Mounted, type MountOptions } from '../dom'\n\nexport type { MountOptions } from '../dom'\n\nexport interface MarkdownElement extends HTMLElement {\n  /** The Markdown shown. */\n  markdown: string\n  /** The reply is still arriving; the same as the `streaming` attribute. */\n  streaming: boolean\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    /** The element under its default name, so `querySelector('flow-down')` has `markdown`. */\n    'flow-down': MarkdownElement\n  }\n}\n\n/**\n * Registers the element under `name`. `options` are what every such element is drawn with: a\n * highlighter, math, raw HTML, labels. Registering a name twice keeps the first.\n */\nexport function defineMarkdownElement(name = 'flow-down', options: MountOptions = {}): void {\n  // Read here, not at import: a server that renders the page has no elements to extend.\n  if (typeof customElements === 'undefined' || customElements.get(name)) return\n\n  class Element extends HTMLElement implements MarkdownElement {\n    static observedAttributes = ['streaming']\n    #text: string | null = null\n    #mounted: Mounted | null = null\n\n    get markdown(): string {\n      return this.#text ?? ''\n    }\n    set markdown(value: string) {\n      this.#text = value === null || value === undefined ? '' : String(value)\n      this.#show()\n    }\n\n    get streaming(): boolean {\n      return this.hasAttribute('streaming')\n    }\n    set streaming(value: boolean) {\n      this.toggleAttribute('streaming', Boolean(value))\n    }\n\n    connectedCallback(): void {\n      if (this.#mounted) return\n      // What the page wrote inside the element is its first text.\n      if (this.#text === null) this.#text = this.textContent ?? ''\n      this.textContent = ''\n      this.#mounted = mount(this, options)\n      this.#show()\n    }\n\n    disconnectedCallback(): void {\n      this.#mounted?.destroy()\n      this.#mounted = null\n    }\n\n    attributeChangedCallback(): void {\n      this.#show()\n    }\n\n    #show(): void {\n      this.#mounted?.update(this.#text ?? '', { streaming: this.streaming })\n    }\n  }\n\n  customElements.define(name, Element)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAgB,sBAAsB,OAAO,aAAa,UAAwB,CAAC,GAAS;CAE1F,IAAI,OAAO,mBAAmB,eAAe,eAAe,IAAI,IAAI,GAAG;CAEvE,MAAM,gBAAgB,YAAuC;EAC3D,OAAO,qBAAqB,CAAC,WAAW;EACxC,QAAuB;EACvB,WAA2B;EAE3B,IAAI,WAAmB;GACrB,OAAO,KAAK,SAAS;EACvB;EACA,IAAI,SAAS,OAAe;GAC1B,KAAK,QAAQ,UAAU,QAAQ,UAAU,KAAA,IAAY,KAAK,OAAO,KAAK;GACtE,KAAK,MAAM;EACb;EAEA,IAAI,YAAqB;GACvB,OAAO,KAAK,aAAa,WAAW;EACtC;EACA,IAAI,UAAU,OAAgB;GAC5B,KAAK,gBAAgB,aAAa,QAAQ,KAAK,CAAC;EAClD;EAEA,oBAA0B;GACxB,IAAI,KAAK,UAAU;GAEnB,IAAI,KAAK,UAAU,MAAM,KAAK,QAAQ,KAAK,eAAe;GAC1D,KAAK,cAAc;GACnB,KAAK,WAAW,MAAM,MAAM,OAAO;GACnC,KAAK,MAAM;EACb;EAEA,uBAA6B;GAC3B,KAAK,UAAU,QAAQ;GACvB,KAAK,WAAW;EAClB;EAEA,2BAAiC;GAC/B,KAAK,MAAM;EACb;EAEA,QAAc;GACZ,KAAK,UAAU,OAAO,KAAK,SAAS,IAAI,EAAE,WAAW,KAAK,UAAU,CAAC;EACvE;CACF;CAEA,eAAe,OAAO,MAAM,OAAO;AACrC"}