@localix-ai/flowdown 0.0.0-stage → 0.5.1

package/dist/react/draw.js

@@ -0,0 +1,17 @@
+import { parse } from "../engine/index.js";
+import { render } from "./render.js";
+// src/react/draw.ts
+/** One text read and drawn: a whole document, or one of its blocks. */
+function draw(source, offset, headingIds, options) {
+	return render(parse(source, { extensions: options.extensions }), {
+		components: options.components,
+		urlTransform: options.urlTransform,
+		special: options.special,
+		labels: options.labels,
+		offset,
+		headingIds
+	});
+}
+export { draw };
+
+//# sourceMappingURL=draw.js.map

package/dist/react/draw.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draw.js","names":[],"sources":["../../src/react/draw.ts"],"sourcesContent":["import type { ReactNode } from 'react'\nimport { parse } from '../engine'\nimport type { Extension } from '../engine/types'\nimport type { UrlTransform } from '../engine/url'\nimport { render, type Components, type RenderOptions } from './render'\n\n/** What a block needs besides its text; one object per document, so blocks can compare it. */\nexport interface BlockOptions {\n  components: Components\n  /** The syntax every block is read with: the dialect, the stages that are there, the page's. */\n  extensions: Extension[]\n  urlTransform: UrlTransform\n  special: RenderOptions['special']\n  /** The page draws code itself (`components.pre` or `.code`): a growing fence goes to it too. */\n  ownCode: boolean\n  /** The page draws tables itself, or its extensions read them: a table is then parsed whole. */\n  ownTable: boolean\n  /** The names of a task list's boxes. */\n  labels?: RenderOptions['labels']\n}\n\n/** One text read and drawn: a whole document, or one of its blocks. */\nexport function draw(\n  source: string,\n  offset: number,\n  headingIds: ReadonlyMap<number, string> | null,\n  options: BlockOptions,\n): ReactNode {\n  return render(parse(source, { extensions: options.extensions }), {\n    components: options.components,\n    urlTransform: options.urlTransform,\n    special: options.special,\n    labels: options.labels,\n    offset,\n    headingIds,\n  })\n}\n"],"mappings":";;;;AAsBA,SAAgB,KACd,QACA,QACA,YACA,SACW;CACX,OAAO,OAAO,MAAM,QAAQ,EAAE,YAAY,QAAQ,WAAW,CAAC,GAAG;EAC/D,YAAY,QAAQ;EACpB,cAAc,QAAQ;EACtB,SAAS,QAAQ;EACjB,QAAQ,QAAQ;EAChB;EACA;CACF,CAAC;AACH"}

package/dist/react/file-tree.d.ts

@@ -0,0 +1,16 @@
+import { TreeRow } from "../core/file-tree-parse.js";
+import { ComponentType, ReactNode, SVGProps } from "react";
+/** The glyph drawn before a row; a host can colour files by type (`getIcon`). */
+export type TreeIcon = ComponentType<SVGProps<SVGSVGElement>>;
+export interface FileTreeProps {
+  /** The fence's body: `├──` / `└──` lines. */
+  source: string;
+  getIcon?: (row: TreeRow, open: boolean) => TreeIcon;
+}
+/**
+ * A ```tree fence: a directory layout drawn as a tree instead of box characters in monospace. A
+ * folder folds and unfolds on click, and the tree is one Tab stop walked with the arrow keys (the
+ * WAI-ARIA tree pattern), so a long layout can be read one branch at a time.
+ */
+export declare function FileTree({ source, getIcon }: FileTreeProps): ReactNode;
+export type { TreeRow };

package/dist/react/file-tree.js

@@ -0,0 +1,69 @@
+"use client";
+import { parseFileTree } from "../core/file-tree-parse.js";
+import { fileTree } from "../render/views.js";
+import { useLabels } from "./labels.js";
+import { react } from "./render.js";
+import { createElement, useMemo, useRef, useState } from "react";
+// src/react/file-tree.tsx
+/**
+* A ```tree fence: a directory layout drawn as a tree instead of box characters in monospace. A
+* folder folds and unfolds on click, and the tree is one Tab stop walked with the arrow keys (the
+* WAI-ARIA tree pattern), so a long layout can be read one branch at a time.
+*/
+function FileTree({ source, getIcon }) {
+	const labels = useLabels();
+	const rows = useMemo(() => parseFileTree(source), [source]);
+	const [collapsed, setCollapsed] = useState(() => /* @__PURE__ */ new Set());
+	const [focused, setFocused] = useState(null);
+	const elements = useRef(/* @__PURE__ */ new Map());
+	if (rows.length === 0) return null;
+	const toggle = (path) => setCollapsed((current) => {
+		const next = new Set(current);
+		if (next.has(path)) next.delete(path);
+		else next.add(path);
+		return next;
+	});
+	const focus = (row) => {
+		if (row) elements.current.get(row.path)?.focus();
+	};
+	const onKeyDown = (event, row, visible) => {
+		const index = visible.indexOf(row);
+		const open = row.folder && !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();
+	};
+	return fileTree(react, {
+		rows,
+		collapsed,
+		focused,
+		...getIcon ? { icon: (row, open) => createElement(getIcon(row, open), { className: "fd-tree-icon" }) } : null,
+		on: (row, visible) => ({
+			ref: (element) => {
+				if (element) elements.current.set(row.path, element);
+				else elements.current.delete(row.path);
+			},
+			onFocus: () => setFocused(row.path),
+			onClick: (event) => {
+				event.currentTarget.focus();
+				if (row.folder) toggle(row.path);
+			},
+			onKeyDown: (event) => onKeyDown(event, row, visible)
+		})
+	}, labels);
+}
+export { FileTree };
+
+//# sourceMappingURL=file-tree.js.map

package/dist/react/file-tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-tree.js","names":[],"sources":["../../src/react/file-tree.tsx"],"sourcesContent":["'use client'\nimport {\n  createElement,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentType,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  type SVGProps,\n} from 'react'\nimport { parseFileTree, type TreeRow } from '../core/file-tree-parse'\nimport { fileTree } from '../render/views'\nimport { useLabels } from './labels'\nimport { react } from './render'\n\nexport type { TreeRow } from '../core/file-tree-parse'\n\n/** The glyph drawn before a row; a host can colour files by type (`getIcon`). */\nexport type TreeIcon = ComponentType<SVGProps<SVGSVGElement>>\n\nexport interface FileTreeProps {\n  /** The fence's body: `├──` / `└──` lines. */\n  source: string\n  getIcon?: (row: TreeRow, open: boolean) => TreeIcon\n}\n\n/**\n * A ```tree fence: a directory layout drawn as a tree instead of box characters in monospace. A\n * folder folds and unfolds on click, and the tree is one Tab stop walked with the arrow keys (the\n * WAI-ARIA tree pattern), so a long layout can be read one branch at a time.\n */\nexport function FileTree({ source, getIcon }: FileTreeProps) {\n  const labels = useLabels()\n  const rows = useMemo(() => parseFileTree(source), [source])\n  const [collapsed, setCollapsed] = useState<ReadonlySet<string>>(() => new Set())\n  const [focused, setFocused] = useState<string | null>(null)\n  const elements = useRef(new Map<string, HTMLElement>())\n  if (rows.length === 0) return null\n\n  const toggle = (path: string) =>\n    setCollapsed((current) => {\n      const next = new Set(current)\n      if (next.has(path)) next.delete(path)\n      else next.add(path)\n      return next\n    })\n  const focus = (row: TreeRow | undefined) => {\n    if (row) elements.current.get(row.path)?.focus()\n  }\n\n  const onKeyDown = (event: KeyboardEvent<HTMLElement>, row: TreeRow, visible: TreeRow[]) => {\n    const index = visible.indexOf(row)\n    const open = row.folder && !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: a board or a shortcut layer around the reply would\n    // otherwise move a card or scroll on the same arrow press. Keys the tree leaves (Escape, Tab)\n    // still reach it.\n    event.preventDefault()\n    event.stopPropagation()\n    action()\n  }\n\n  return fileTree<ReactNode, never>(\n    react as never,\n    {\n      rows,\n      collapsed,\n      focused,\n      ...(getIcon\n        ? {\n            icon: (row: TreeRow, open: boolean) =>\n              createElement(getIcon(row, open), { className: 'fd-tree-icon' }),\n          }\n        : null),\n      on: (row, visible) => ({\n        ref: (element: HTMLElement | null) => {\n          if (element) elements.current.set(row.path, element)\n          else elements.current.delete(row.path)\n        },\n        onFocus: () => setFocused(row.path),\n        onClick: (event: MouseEvent<HTMLElement>) => {\n          // Safari leaves a clicked row unfocused; the keys must carry on from it.\n          event.currentTarget.focus()\n          if (row.folder) toggle(row.path)\n        },\n        onKeyDown: (event: KeyboardEvent<HTMLElement>) => onKeyDown(event, row, visible),\n      }),\n    },\n    labels,\n  )\n}\n"],"mappings":";;;;;;;;;;;;AAiCA,SAAgB,SAAS,EAAE,QAAQ,WAA0B;CAC3D,MAAM,SAAS,UAAU;CACzB,MAAM,OAAO,cAAc,cAAc,MAAM,GAAG,CAAC,MAAM,CAAC;CAC1D,MAAM,CAAC,WAAW,gBAAgB,+BAAoC,IAAI,IAAI,CAAC;CAC/E,MAAM,CAAC,SAAS,cAAc,SAAwB,IAAI;CAC1D,MAAM,WAAW,uBAAO,IAAI,IAAyB,CAAC;CACtD,IAAI,KAAK,WAAW,GAAG,OAAO;CAE9B,MAAM,UAAU,SACd,cAAc,YAAY;EACxB,MAAM,OAAO,IAAI,IAAI,OAAO;EAC5B,IAAI,KAAK,IAAI,IAAI,GAAG,KAAK,OAAO,IAAI;OAC/B,KAAK,IAAI,IAAI;EAClB,OAAO;CACT,CAAC;CACH,MAAM,SAAS,QAA6B;EAC1C,IAAI,KAAK,SAAS,QAAQ,IAAI,IAAI,IAAI,CAAC,EAAE,MAAM;CACjD;CAEA,MAAM,aAAa,OAAmC,KAAc,YAAuB;EACzF,MAAM,QAAQ,QAAQ,QAAQ,GAAG;EACjC,MAAM,OAAO,IAAI,UAAU,CAAC,UAAU,IAAI,IAAI,IAAI;EAClD,MAAM,SAAS,IAAI,WAAW,OAAO,KAAA,IAAY,KAAK,IAAI;EAW1D,MAAM,SAAS;GATb,iBAAiB,MAAM,QAAQ,QAAQ,EAAE;GACzC,eAAe,MAAM,QAAQ,QAAQ,EAAE;GACvC,YAAY,MAAM,QAAQ,EAAE;GAC5B,WAAW,MAAM,QAAQ,GAAG,EAAE,CAAC;GAC/B,kBAAmB,OAAO,MAAM,QAAQ,QAAQ,EAAE,IAAI,IAAI,UAAU,OAAO,IAAI,IAAI;GACnF,iBAAkB,OAAO,OAAO,IAAI,IAAI,IAAI,MAAM,MAAM;GACxD,aAAa,IAAI,UAAU,OAAO,IAAI,IAAI;GAC1C,WAAW,IAAI,UAAU,OAAO,IAAI,IAAI;EAErB,EAAE,MAAM;EAC7B,IAAI,CAAC,QAAQ;EAIb,MAAM,eAAe;EACrB,MAAM,gBAAgB;EACtB,OAAO;CACT;CAEA,OAAO,SACL,OACA;EACE;EACA;EACA;EACA,GAAI,UACA,EACE,OAAO,KAAc,SACnB,cAAc,QAAQ,KAAK,IAAI,GAAG,EAAE,WAAW,eAAe,CAAC,EACnE,IACA;EACJ,KAAK,KAAK,aAAa;GACrB,MAAM,YAAgC;IACpC,IAAI,SAAS,SAAS,QAAQ,IAAI,IAAI,MAAM,OAAO;SAC9C,SAAS,QAAQ,OAAO,IAAI,IAAI;GACvC;GACA,eAAe,WAAW,IAAI,IAAI;GAClC,UAAU,UAAmC;IAE3C,MAAM,cAAc,MAAM;IAC1B,IAAI,IAAI,QAAQ,OAAO,IAAI,IAAI;GACjC;GACA,YAAY,UAAsC,UAAU,OAAO,KAAK,OAAO;EACjF;CACF,GACA,MACF;AACF"}

package/dist/react/growing-code.js

@@ -0,0 +1,36 @@
+"use client";
+import { createCutter, createFenceMemory, growingFence } from "../document/fence.js";
+import { CodeFrame } from "./code-block.js";
+import { useRenderContext } from "./context.js";
+import { memo, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/react/growing-code.tsx
+const Piece = memo(function Piece({ text, language, highlight }) {
+	const html = language && highlight ? highlight(text, language) : null;
+	return html === null ? text : /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: html } });
+}, (before, after) => before.language === after.language && before.highlight === after.highlight && (before.done && after.done && before.run === after.run || before.text === after.text));
+function GrowingCode({ language, title, body }) {
+	const { highlight } = useRenderContext();
+	const known = useMemo(() => Boolean(language && highlight && highlight("", language) !== null), [language, highlight]);
+	const className = [language ? `language-${language}` : null, known ? "fd-highlighted" : null].filter(Boolean).join(" ");
+	const [cut] = useState(createCutter);
+	const { parts, run } = useMemo(() => cut(body), [cut, body]);
+	return /* @__PURE__ */ jsx(CodeFrame, {
+		language,
+		title,
+		text: body,
+		children: /* @__PURE__ */ jsxs("code", {
+			className: className || void 0,
+			children: [parts.map((text, index) => /* @__PURE__ */ jsx(Piece, {
+				text,
+				done: index < parts.length - 1,
+				run,
+				language: known ? language : void 0,
+				highlight
+			}, index)), !known && body ? "\n" : null]
+		})
+	});
+}
+export { GrowingCode, createFenceMemory, growingFence };
+
+//# sourceMappingURL=growing-code.js.map

package/dist/react/growing-code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"growing-code.js","names":[],"sources":["../../src/react/growing-code.tsx"],"sourcesContent":["'use client'\nimport { memo, useMemo, useState } from 'react'\nimport { createCutter } from '../document/fence'\nimport { CodeFrame } from './code-block'\nimport { useRenderContext, type Highlighter } from './context'\n\nexport { createFenceMemory, growingFence, type FenceMemory } from '../document/fence'\n\n/**\n * A code fence still being written, as an agent writing a file streams it: hundreds of lines,\n * one token at a time. Drawn through react-markdown, every token would parse, draw and highlight\n * the whole fence again. Here the code is cut into pieces of {@link LINES} lines; a piece that is\n * complete is drawn and highlighted once, and a token redraws only the last piece.\n *\n * A piece is highlighted on its own, so a construct that spans two pieces (a block comment, a\n * template string) can be coloured wrongly for the moment the fence is open. When it closes the\n * block is drawn as any finished block is, highlighted whole.\n */\ninterface PieceProps {\n  text: string\n  /** A complete piece of run `run`: its text does not change while the run lasts. */\n  done: boolean\n  run: number\n  language: string | undefined\n  highlight: Highlighter | null\n}\n\nconst Piece = memo(\n  function Piece({ text, language, highlight }: PieceProps) {\n    const html = language && highlight ? highlight(text, language) : null\n    return html === null ? text : <span dangerouslySetInnerHTML={{ __html: html }} />\n  },\n  (before, after) =>\n    before.language === after.language &&\n    before.highlight === after.highlight &&\n    ((before.done && after.done && before.run === after.run) || before.text === after.text),\n)\n\nexport function GrowingCode({\n  language,\n  title,\n  body,\n}: {\n  language: string | undefined\n  title?: string\n  body: string\n}) {\n  const { highlight } = useRenderContext()\n  // The class a finished block gets when its language is one the highlighter knows.\n  const known = useMemo(\n    () => Boolean(language && highlight && highlight('', language) !== null),\n    [language, highlight],\n  )\n  const className = [language ? `language-${language}` : null, known ? 'fd-highlighted' : null]\n    .filter(Boolean)\n    .join(' ')\n  const [cut] = useState(createCutter)\n  const { parts, run } = useMemo(() => cut(body), [cut, body])\n  return (\n    <CodeFrame language={language} title={title} text={body}>\n      <code className={className || undefined}>\n        {parts.map((text, index) => (\n          <Piece\n            key={index}\n            text={text}\n            done={index < parts.length - 1}\n            run={run}\n            language={known ? language : undefined}\n            highlight={highlight}\n          />\n        ))}\n        {/* A finished block's text ends in a newline unless it is highlighted; so does this. */}\n        {!known && body ? '\\n' : null}\n      </code>\n    </CodeFrame>\n  )\n}\n"],"mappings":";;;;;;;AA2BA,MAAM,QAAQ,KACZ,SAAS,MAAM,EAAE,MAAM,UAAU,aAAyB;CACxD,MAAM,OAAO,YAAY,YAAY,UAAU,MAAM,QAAQ,IAAI;CACjE,OAAO,SAAS,OAAO,OAAO,oBAAC,QAAD,EAAM,yBAAyB,EAAE,QAAQ,KAAK,EAAI,CAAA;AAClF,IACC,QAAQ,UACP,OAAO,aAAa,MAAM,YAC1B,OAAO,cAAc,MAAM,cACzB,OAAO,QAAQ,MAAM,QAAQ,OAAO,QAAQ,MAAM,OAAQ,OAAO,SAAS,MAAM,KACtF;AAEA,SAAgB,YAAY,EAC1B,UACA,OACA,QAKC;CACD,MAAM,EAAE,cAAc,iBAAiB;CAEvC,MAAM,QAAQ,cACN,QAAQ,YAAY,aAAa,UAAU,IAAI,QAAQ,MAAM,IAAI,GACvE,CAAC,UAAU,SAAS,CACtB;CACA,MAAM,YAAY,CAAC,WAAW,YAAY,aAAa,MAAM,QAAQ,mBAAmB,IAAI,CAAC,CAC1F,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CACX,MAAM,CAAC,OAAO,SAAS,YAAY;CACnC,MAAM,EAAE,OAAO,QAAQ,cAAc,IAAI,IAAI,GAAG,CAAC,KAAK,IAAI,CAAC;CAC3D,OACE,oBAAC,WAAD;EAAqB;EAAiB;EAAO,MAAM;EACjD,UAAA,qBAAC,QAAD;GAAM,WAAW,aAAa,KAAA;GAA9B,UAAA,CACG,MAAM,KAAK,MAAM,UAChB,oBAAC,OAAD;IAEQ;IACN,MAAM,QAAQ,MAAM,SAAS;IACxB;IACL,UAAU,QAAQ,WAAW,KAAA;IAClB;GACZ,GANM,KAMN,CACF,GAEA,CAAC,SAAS,OAAO,OAAO,IACrB;;CACG,CAAA;AAEf"}

package/dist/react/helpers.d.ts

@@ -0,0 +1,6 @@
+import { getLanguage } from "../render/views.js";
+import { ReactNode } from "react";
+/** Flatten a markdown node's children to their plain text (elements → their own children). */
+export declare function childrenToText(node: ReactNode): string;
+export declare function isCodeBlock(children: ReactNode, className?: string): boolean;
+export { getLanguage };

package/dist/react/helpers.js

@@ -0,0 +1,17 @@
+import { getLanguage } from "../render/views.js";
+import { isValidElement } from "react";
+// src/react/helpers.ts
+/** Flatten a markdown node's children to their plain text (elements → their own children). */
+function childrenToText(node) {
+	if (typeof node === "string") return node;
+	if (typeof node === "number") return String(node);
+	if (Array.isArray(node)) return node.map((child) => childrenToText(child)).join("");
+	if (isValidElement(node)) return childrenToText(node.props.children);
+	return "";
+}
+function isCodeBlock(children, className) {
+	return Boolean(getLanguage(className)) || childrenToText(children).includes("\n");
+}
+export { childrenToText, getLanguage, isCodeBlock };
+
+//# sourceMappingURL=helpers.js.map

package/dist/react/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","names":[],"sources":["../../src/react/helpers.ts"],"sourcesContent":["import { isValidElement, type ReactNode } from 'react'\nimport { getLanguage } from '../render/views'\n\nexport { getLanguage }\n\n/** Flatten a markdown node's children to their plain text (elements → their own children). */\nexport function childrenToText(node: ReactNode): string {\n  if (typeof node === 'string') return node\n  if (typeof node === 'number') return String(node)\n  if (Array.isArray(node)) return node.map((child) => childrenToText(child as ReactNode)).join('')\n  if (isValidElement(node)) {\n    return childrenToText((node.props as { children?: ReactNode }).children)\n  }\n  return ''\n}\n\nexport function isCodeBlock(children: ReactNode, className?: string): boolean {\n  return Boolean(getLanguage(className)) || childrenToText(children).includes('\\n')\n}\n"],"mappings":";;;;AAMA,SAAgB,eAAe,MAAyB;CACtD,IAAI,OAAO,SAAS,UAAU,OAAO;CACrC,IAAI,OAAO,SAAS,UAAU,OAAO,OAAO,IAAI;CAChD,IAAI,MAAM,QAAQ,IAAI,GAAG,OAAO,KAAK,KAAK,UAAU,eAAe,KAAkB,CAAC,CAAC,CAAC,KAAK,EAAE;CAC/F,IAAI,eAAe,IAAI,GACrB,OAAO,eAAgB,KAAK,MAAmC,QAAQ;CAEzE,OAAO;AACT;AAEA,SAAgB,YAAY,UAAqB,WAA6B;CAC5E,OAAO,QAAQ,YAAY,SAAS,CAAC,KAAK,eAAe,QAAQ,CAAC,CAAC,SAAS,IAAI;AAClF"}

package/dist/react/icons.js

@@ -0,0 +1,23 @@
+import { OUTLINES, glyph } from "../render/views.js";
+import { react } from "./render.js";
+// src/react/icons.tsx
+function icon(outline) {
+	return function Icon(props) {
+		return glyph(react, outline, props);
+	};
+}
+OUTLINES.info;
+OUTLINES.tip;
+OUTLINES.important;
+OUTLINES.warning;
+OUTLINES.caution;
+OUTLINES.chevron;
+OUTLINES.file;
+OUTLINES.folder;
+OUTLINES.folderOpen;
+const CopyIcon = icon(OUTLINES.copy);
+const CheckIcon = icon(OUTLINES.check);
+const DownloadIcon = icon(OUTLINES.download);
+export { CheckIcon, CopyIcon, DownloadIcon, icon };
+
+//# sourceMappingURL=icons.js.map

package/dist/react/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","names":[],"sources":["../../src/react/icons.tsx"],"sourcesContent":["import type { ReactElement, SVGProps } from 'react'\nimport type { Props } from '../render/factory'\nimport { glyph, OUTLINES } from '../render/views'\nimport { react } from './render'\n\n/** The renderer's glyphs (`render/views.ts`) as React components, for a page that reuses one. */\ntype IconProps = SVGProps<SVGSVGElement>\n\nexport function icon(outline: string) {\n  return function Icon(props: IconProps) {\n    return glyph(react, outline, props as Props) as ReactElement\n  }\n}\n\nexport const InfoIcon = icon(OUTLINES.info)\n\nexport const TipIcon = icon(OUTLINES.tip)\n\nexport const ImportantIcon = icon(OUTLINES.important)\n\nexport const WarningIcon = icon(OUTLINES.warning)\n\nexport const CautionIcon = icon(OUTLINES.caution)\n\nexport const ChevronIcon = icon(OUTLINES.chevron)\n\nexport const FileIcon = icon(OUTLINES.file)\n\nexport const FolderIcon = icon(OUTLINES.folder)\n\nexport const FolderOpenIcon = icon(OUTLINES.folderOpen)\n\nexport const CopyIcon = icon(OUTLINES.copy)\n\nexport const CheckIcon = icon(OUTLINES.check)\n\nexport const DownloadIcon = icon(OUTLINES.download)\n"],"mappings":";;;AAQA,SAAgB,KAAK,SAAiB;CACpC,OAAO,SAAS,KAAK,OAAkB;EACrC,OAAO,MAAM,OAAO,SAAS,KAAc;CAC7C;AACF;AAE6B,SAAS;AAEV,SAAS;AAEH,SAAS;AAEX,SAAS;AAET,SAAS;AAET,SAAS;AAEZ,SAAS;AAEP,SAAS;AAEL,SAAS;AAE5C,MAAa,WAAW,KAAK,SAAS,IAAI;AAE1C,MAAa,YAAY,KAAK,SAAS,KAAK;AAE5C,MAAa,eAAe,KAAK,SAAS,QAAQ"}

package/dist/react/labels.js

@@ -0,0 +1,9 @@
+"use client";
+import { DEFAULT_LABELS, mergeLabels } from "../render/labels.js";
+import { createContext, useContext } from "react";
+// src/react/labels.tsx
+const LabelsContext = createContext(DEFAULT_LABELS);
+const useLabels = () => useContext(LabelsContext);
+export { DEFAULT_LABELS, LabelsContext, mergeLabels, useLabels };
+
+//# sourceMappingURL=labels.js.map

package/dist/react/labels.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"labels.js","names":[],"sources":["../../src/react/labels.tsx"],"sourcesContent":["'use client'\nimport { createContext, useContext } from 'react'\nimport { DEFAULT_LABELS, type MarkdownLabels } from '../render/labels'\n\nexport {\n  DEFAULT_LABELS,\n  mergeLabels,\n  type LabelOverrides,\n  type MarkdownLabels,\n} from '../render/labels'\n\nexport const LabelsContext = createContext<MarkdownLabels>(DEFAULT_LABELS)\n\nexport const useLabels = () => useContext(LabelsContext)\n"],"mappings":";;;;AAWA,MAAa,gBAAgB,cAA8B,cAAc;AAEzE,MAAa,kBAAkB,WAAW,aAAa"}

package/dist/react/markdown.d.ts

@@ -0,0 +1,78 @@
+import { Extension } from "../engine/types.js";
+import { MermaidLoader } from "../mermaid/loader.js";
+import { MarkdownComponents } from "./context.js";
+import { Highlighter } from "../render/views.js";
+import { LabelOverrides } from "../render/labels.js";
+import { UrlTransform } from "../engine/url.js";
+import "./render.js";
+import { StageOption } from "./use-stage.js";
+import "./draw.js";
+import { ReactNode } from "react";
+export interface MarkdownProps {
+  /** The Markdown. */
+  children: string;
+  /**
+   * The text is a reply still arriving. Its unfinished end is completed so it does not flash raw
+   * syntax (`**bo` reads as bold, a fence still being written as code), and a caret follows it.
+   */
+  streaming?: boolean;
+  /**
+   * Show a streaming reply at an even pace instead of in the bursts it arrives in: whole words,
+   * a few frames behind the text, finishing at the same pace when the reply ends. `true`, or the
+   * time in milliseconds a burst takes to show (240 by default). Off by default.
+   */
+  smooth?: boolean | number;
+  /** The caret after streaming text; on by default while `streaming`. */
+  caret?: boolean;
+  /**
+   * Your own elements for any tag (`a`, `img`, `pre`, `table`, …) or the dialect's, and your own
+   * drawing of a ```mermaid fence (`diagram`) or a ```tree fence (`tree`).
+   */
+  components?: MarkdownComponents;
+  /**
+   * Your own syntax, after the dialect's: inline rules, fences by language, and passes over the
+   * tree, each run on every block. A node's position counts from the start of its block. Keep the
+   * list's reference stable (a module constant): a new list reads every block again.
+   */
+  extensions?: Extension[];
+  /**
+   * Give headings ids (`setup`, `setup-1`) to link to, the same ids `extractHeadings` returns.
+   * Each block's headings are read once, so it costs a streaming reply only its last block.
+   */
+  headingIds?: boolean;
+  /**
+   * Raw HTML in the text, parsed and sanitized. `true` (the default) fetches the parser the first
+   * time a document holds HTML, and leaves the tags out until it is there; pass `@localix-ai/flowdown/html`
+   * itself to have it in the first render (a server); `false` drops raw HTML.
+   */
+  html?: boolean | StageOption<Extension>;
+  /** Typeset `$…$`: `@localix-ai/flowdown/math`, or a loader for it. Off by default. */
+  math?: StageOption<Extension>;
+  /** Draw ```mermaid fences: `() => import('mermaid')`. Off by default: they show as code. */
+  mermaid?: MermaidLoader | null;
+  /** Highlight fenced code: `@localix-ai/flowdown/highlight`, or your own. Off by default. */
+  highlight?: Highlighter | null;
+  /** The words the renderer adds (callout names, button labels), for a page in another language. */
+  labels?: LabelOverrides;
+  /**
+   * Rewrite or refuse a link or image URL. Omitted (or null), relative URLs and http, https,
+   * mailto, irc, ircs and xmpp are kept and everything else is emptied (`javascript:`, `tel:` and
+   * `data:` among them).
+   */
+  urlTransform?: UrlTransform | null;
+  className?: string;
+  /**
+   * Leaves the `flowdown` class off the root element, so the package's stylesheet does not
+   * apply: for a small surface that draws every element with `components` at its own scale.
+   */
+  unstyled?: boolean;
+}
+/**
+ * Markdown with the flowdown dialect: GitHub Markdown, callouts, steps, tabs, stats, pros and cons,
+ * figures, file trees and, when the page supplies them, diagrams, formulas and highlighted code.
+ *
+ * The document is drawn as its top-level blocks, each remembered by its text: while a reply
+ * streams, the blocks above its end do not change, and only the last one is parsed and drawn
+ * again on each token.
+ */
+export declare function Markdown({ children, streaming: arriving, smooth, caret: caretOption, components, extensions, headingIds, html, math: mathOption, mermaid, highlight, labels, urlTransform, className, unstyled }: MarkdownProps): ReactNode;

package/dist/react/markdown.js

@@ -0,0 +1,206 @@
+"use client";
+import { useSmoothText } from "./use-smooth-text.js";
+import { normalizeLineEndings } from "../core/blocks.js";
+import { createDocument, usesHtml, usesMath, usesRareEntity } from "../document/index.js";
+import { flowdownDialect } from "../core/remark-answer-blocks.js";
+import "../dialect.js";
+import { createFenceMemory, growingFence } from "../document/fence.js";
+import { tableRows } from "../document/table.js";
+import { addEntities, hasAllEntities } from "../engine/entities.js";
+import { Diagram } from "../mermaid/diagram.js";
+import { setMermaidLoader } from "../mermaid/loader.js";
+import { mergeLabels } from "../render/labels.js";
+import { Callout } from "./callout.js";
+import { Code, CodeBlock } from "./code-block.js";
+import { GrowingCode } from "./growing-code.js";
+import { GrowingFence, RenderContextValue } from "./context.js";
+import { FileTree } from "./file-tree.js";
+import { LabelsContext } from "./labels.js";
+import { defaultUrlTransform } from "../engine/url.js";
+import { draw } from "./draw.js";
+import { useStage } from "./use-stage.js";
+import { Table } from "./table.js";
+import { TableRows } from "./table-rows.js";
+import { Tab, Tabs } from "./tabs.js";
+import { Fragment, memo, useContext, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/react/markdown.tsx
+/** The package's own HTML stage, fetched as a chunk of its own the first time it is needed. */
+const loadHtml = () => import("../html/index.js");
+/** Every HTML5 named reference: ten kilobytes fetched the first time a document uses a rare one. */
+const loadEntities = () => import("../engine/entity-table.js").then((module) => {
+	addEntities(module.ENTITY_TABLE);
+	return module;
+});
+/** A page's own diagram, told whether its fence is the one still being written. */
+function OwnDiagram({ as: Page, source }) {
+	return /* @__PURE__ */ jsx(Page, {
+		source,
+		growing: useContext(GrowingFence)
+	});
+}
+/**
+* The elements a document is drawn with: the dialect's (callouts, tabs, code blocks), then the
+* page's. The two fences that are not code (```mermaid, ```tree) are drawn by `special`, outside
+* both `pre` and `code`, so a page's own code block never receives a diagram.
+*/
+function buildComponents(overrides) {
+	const { diagram: PageDiagram, tree: PageTree, ...elements } = overrides ?? {};
+	return {
+		components: {
+			blockquote: Callout,
+			table: Table,
+			"answer-tabs": Tabs,
+			"answer-tab": Tab,
+			pre: CodeBlock,
+			code: Code,
+			...elements
+		},
+		special: (language, source) => language === "mermaid" ? PageDiagram ? /* @__PURE__ */ jsx(OwnDiagram, {
+			as: PageDiagram,
+			source
+		}) : /* @__PURE__ */ jsx(Diagram, { source }) : PageTree ? /* @__PURE__ */ jsx(PageTree, { source }) : /* @__PURE__ */ jsx(FileTree, { source })
+	};
+}
+const Block = memo(function Block({ source: open, closer, offset, growing, headingIds, options }) {
+	const [memory] = useState(createFenceMemory);
+	const fence = growing && !options.ownCode ? growingFence(open, closer, memory) : null;
+	if (fence && fence.language !== "mermaid" && fence.language !== "tree" && !(fence.language === "math" && options.extensions?.some((stage) => stage.name === "math"))) return /* @__PURE__ */ jsx(GrowingCode, { ...fence });
+	const source = closer ? open + closer : open;
+	const table = options.ownTable ? null : tableRows(source);
+	if (table) return /* @__PURE__ */ jsx(TableRows, {
+		...table,
+		options
+	});
+	return /* @__PURE__ */ jsx(GrowingFence.Provider, {
+		value: growing,
+		children: draw(source, offset, headingIds, options)
+	});
+}, (before, after) => before.source === after.source && before.closer === after.closer && before.offset === after.offset && before.growing === after.growing && before.headingKey === after.headingKey && before.options === after.options);
+const NO_EXTENSIONS = [];
+/**
+* How many blocks a group holds. Small enough that the group a reply is growing in is cheap to
+* go through on every token, large enough that a long reply is few groups.
+*/
+const GROUP = 32;
+const headingKeyOf = (own) => own ? [...own].map(([at, id]) => `${at}:${id}`).join(";") : "";
+/**
+* The blocks at one run of places in the document. A block never moves to another group, so it
+* keeps what it holds (an open tab, a drawn diagram) for as long as it is there. While a reply
+* streams only its last group changes: React passes over each group above as one element, where
+* a flat list had it compare every block of the reply on every token.
+*/
+const BlockGroup = memo(function BlockGroup({ blocks, ids, from, to, closer, growing, options }) {
+	const drawn = [];
+	for (let index = from; index < to; index++) {
+		const block = blocks[index];
+		const own = ids?.[index] ?? null;
+		const last = index === to - 1;
+		drawn.push(/* @__PURE__ */ jsxs(Fragment, { children: [index > 0 ? "\n" : null, /* @__PURE__ */ jsx(Block, {
+			source: block.source,
+			closer: last ? closer : "",
+			offset: block.offset,
+			growing: last && growing,
+			headingIds: own && own.size > 0 ? own : null,
+			headingKey: headingKeyOf(own),
+			options
+		})] }, index));
+	}
+	return drawn;
+}, (before, after) => {
+	if (before.from !== after.from || before.to !== after.to || before.closer !== after.closer || before.growing !== after.growing || before.options !== after.options || before.ids === null !== (after.ids === null)) return false;
+	for (let index = after.to - 1; index >= after.from; index--) {
+		const was = before.blocks[index];
+		const is = after.blocks[index];
+		if (was !== is && (was.source !== is.source || was.offset !== is.offset)) return false;
+		if (after.ids) {
+			const had = before.ids[index];
+			const has = after.ids[index];
+			if (had !== has && ((had?.size ?? 0) > 0 || (has?.size ?? 0) > 0)) {
+				if (headingKeyOf(had) !== headingKeyOf(has)) return false;
+			}
+		}
+	}
+	return true;
+});
+/**
+* Markdown with the flowdown dialect: GitHub Markdown, callouts, steps, tabs, stats, pros and cons,
+* figures, file trees and, when the page supplies them, diagrams, formulas and highlighted code.
+*
+* The document is drawn as its top-level blocks, each remembered by its text: while a reply
+* streams, the blocks above its end do not change, and only the last one is parsed and drawn
+* again on each token.
+*/
+function Markdown({ children, streaming: arriving = false, smooth = false, caret: caretOption, components, extensions = NO_EXTENSIONS, headingIds = false, html = true, math: mathOption = null, mermaid = null, highlight = null, labels, urlTransform, className, unstyled = false }) {
+	const whole = normalizeLineEndings(children);
+	const [text, behind] = useSmoothText(whole, arriving && smooth !== false, typeof smooth === "number" ? smooth : 240);
+	const streaming = arriving || behind;
+	const caret = caretOption ?? streaming;
+	const [doc] = useState(createDocument);
+	const { blocks, closer, growing: endsInFence, headingIds: ids } = doc.update(text, {
+		streaming,
+		math: Boolean(mathOption),
+		headingIds
+	});
+	const math = useStage(mathOption, mathOption !== null && usesMath(blocks));
+	const htmlStage = useStage(html === true ? loadHtml : html === false ? null : html, html !== false && usesHtml(blocks));
+	const entities = useStage(loadEntities, !hasAllEntities() && usesRareEntity(blocks));
+	const labelValue = useMemo(() => mergeLabels(labels), [labels]);
+	const options = useMemo(() => ({
+		...buildComponents(components),
+		labels: labelValue,
+		extensions: [
+			flowdownDialect,
+			...math ? [math] : [],
+			...extensions,
+			...htmlStage ? [htmlStage] : []
+		],
+		urlTransform: urlTransform ?? defaultUrlTransform,
+		ownCode: Boolean(components?.pre || components?.code),
+		ownTable: Boolean(components?.table || components?.thead || components?.tbody || extensions.length)
+	}), [
+		htmlStage,
+		math,
+		urlTransform,
+		components,
+		extensions,
+		entities,
+		labelValue
+	]);
+	const context = useMemo(() => {
+		if (mermaid) setMermaidLoader(mermaid);
+		return {
+			highlight,
+			mermaid: mermaid ? "page" : null
+		};
+	}, [highlight, mermaid]);
+	const groups = [];
+	for (let from = 0; from < blocks.length; from += GROUP) {
+		const to = Math.min(from + GROUP, blocks.length);
+		const last = to === blocks.length;
+		groups.push(/* @__PURE__ */ jsx(BlockGroup, {
+			blocks,
+			ids,
+			from,
+			to,
+			closer: last ? closer : "",
+			growing: last && endsInFence,
+			options
+		}, from));
+	}
+	return /* @__PURE__ */ jsx(LabelsContext.Provider, {
+		value: labelValue,
+		children: /* @__PURE__ */ jsx(RenderContextValue.Provider, {
+			value: context,
+			children: /* @__PURE__ */ jsx("div", {
+				className: unstyled ? className : className ? `flowdown ${className}` : "flowdown",
+				"data-streaming": streaming || void 0,
+				"data-caret": streaming && caret || void 0,
+				children: groups
+			})
+		})
+	});
+}
+export { Markdown, buildComponents };
+
+//# sourceMappingURL=markdown.js.map

package/dist/react/markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"markdown.js","names":[],"sources":["../../src/react/markdown.tsx"],"sourcesContent":["'use client'\nimport { DEFAULT_CATCH_UP_MS, useSmoothText } from './use-smooth-text'\nimport { useContext, Fragment, memo, useMemo, useState, type ReactNode } from 'react'\nimport { normalizeLineEndings, type MarkdownBlock } from '../core/blocks'\nimport { createDocument, usesHtml, usesMath, usesRareEntity } from '../document'\nimport { flowdownDialect } from '../core/remark-answer-blocks'\nimport { DIAGRAM_FENCE_LANGUAGE } from '../dialect'\nimport { addEntities, hasAllEntities } from '../engine/entities'\nimport type { Extension } from '../engine/types'\nimport { Diagram } from '../mermaid/diagram'\nimport { setMermaidLoader, type MermaidLoader } from '../mermaid/loader'\nimport { Callout } from './callout'\nimport { Code, CodeBlock } from './code-block'\nimport { createFenceMemory, GrowingCode, growingFence } from './growing-code'\nimport {\n  GrowingFence,\n  RenderContextValue,\n  type Highlighter,\n  type MarkdownComponents,\n  type RenderContext,\n} from './context'\nimport { FileTree } from './file-tree'\nimport { LabelsContext, mergeLabels, type LabelOverrides } from './labels'\nimport { defaultUrlTransform, type UrlTransform } from '../engine/url'\nimport { draw, type BlockOptions } from './draw'\nimport type { Components, RenderOptions } from './render'\nimport { useStage, type StageOption } from './use-stage'\nimport { Table } from './table'\nimport { TableRows, tableRows } from './table-rows'\nimport { Tab, Tabs } from './tabs'\n\nexport interface MarkdownProps {\n  /** The Markdown. */\n  children: string\n  /**\n   * The text is a reply still arriving. Its unfinished end is completed so it does not flash raw\n   * syntax (`**bo` reads as bold, a fence still being written as code), and a caret follows it.\n   */\n  streaming?: boolean\n  /**\n   * Show a streaming reply at an even pace instead of in the bursts it arrives in: whole words,\n   * a few frames behind the text, finishing at the same pace when the reply ends. `true`, or the\n   * time in milliseconds a burst takes to show (240 by default). Off by default.\n   */\n  smooth?: boolean | number\n  /** The caret after streaming text; on by default while `streaming`. */\n  caret?: boolean\n  /**\n   * Your own elements for any tag (`a`, `img`, `pre`, `table`, …) or the dialect's, and your own\n   * drawing of a ```mermaid fence (`diagram`) or a ```tree fence (`tree`).\n   */\n  components?: MarkdownComponents\n  /**\n   * Your own syntax, after the dialect's: inline rules, fences by language, and passes over the\n   * tree, each run on every block. A node's position counts from the start of its block. Keep the\n   * list's reference stable (a module constant): a new list reads every block again.\n   */\n  extensions?: Extension[]\n  /**\n   * Give headings ids (`setup`, `setup-1`) to link to, the same ids `extractHeadings` returns.\n   * Each block's headings are read once, so it costs a streaming reply only its last block.\n   */\n  headingIds?: boolean\n  /**\n   * Raw HTML in the text, parsed and sanitized. `true` (the default) fetches the parser the first\n   * time a document holds HTML, and leaves the tags out until it is there; pass `@localix-ai/flowdown/html`\n   * itself to have it in the first render (a server); `false` drops raw HTML.\n   */\n  html?: boolean | StageOption<Extension>\n  /** Typeset `$…$`: `@localix-ai/flowdown/math`, or a loader for it. Off by default. */\n  math?: StageOption<Extension>\n  /** Draw ```mermaid fences: `() => import('mermaid')`. Off by default: they show as code. */\n  mermaid?: MermaidLoader | null\n  /** Highlight fenced code: `@localix-ai/flowdown/highlight`, or your own. Off by default. */\n  highlight?: Highlighter | null\n  /** The words the renderer adds (callout names, button labels), for a page in another language. */\n  labels?: LabelOverrides\n  /**\n   * Rewrite or refuse a link or image URL. Omitted (or null), relative URLs and http, https,\n   * mailto, irc, ircs and xmpp are kept and everything else is emptied (`javascript:`, `tel:` and\n   * `data:` among them).\n   */\n  urlTransform?: UrlTransform | null\n  className?: string\n  /**\n   * Leaves the `flowdown` class off the root element, so the package's stylesheet does not\n   * apply: for a small surface that draws every element with `components` at its own scale.\n   */\n  unstyled?: boolean\n}\n\ninterface BlockProps {\n  source: string\n  /**\n   * The line that closes the fence the reply ends inside, on the last block only: kept beside\n   * the text, not joined to it, so a long fence is not copied on every token.\n   */\n  closer: string\n  offset: number\n  growing: boolean\n  /** The anchors of the headings inside this block, by their offset in the document. */\n  headingIds: ReadonlyMap<number, string> | null\n  /** The same anchors as text: the memo compares this, since the map is new on every render. */\n  headingKey: string\n  options: BlockOptions\n}\n\nexport { draw, type BlockOptions } from './draw'\n\n/** The package's own HTML stage, fetched as a chunk of its own the first time it is needed. */\nconst loadHtml = () => import('../html/index')\n\n/** Every HTML5 named reference: ten kilobytes fetched the first time a document uses a rare one. */\nconst loadEntities = () =>\n  import('../engine/entity-table').then((module) => {\n    addEntities(module.ENTITY_TABLE)\n    return module\n  })\n\n/** A page's own diagram, told whether its fence is the one still being written. */\nfunction OwnDiagram({\n  as: Page,\n  source,\n}: {\n  as: NonNullable<MarkdownComponents['diagram']>\n  source: string\n}) {\n  return <Page source={source} growing={useContext(GrowingFence)} />\n}\n\n/**\n * The elements a document is drawn with: the dialect's (callouts, tabs, code blocks), then the\n * page's. The two fences that are not code (```mermaid, ```tree) are drawn by `special`, outside\n * both `pre` and `code`, so a page's own code block never receives a diagram.\n */\nexport function buildComponents(overrides: MarkdownComponents | undefined): {\n  components: Components\n  special: RenderOptions['special']\n} {\n  const { diagram: PageDiagram, tree: PageTree, ...elements } = overrides ?? {}\n  return {\n    components: {\n      blockquote: Callout,\n      table: Table,\n      'answer-tabs': Tabs,\n      'answer-tab': Tab,\n      pre: CodeBlock,\n      code: Code,\n      ...elements,\n    } as Components,\n    special: (language, source) =>\n      language === DIAGRAM_FENCE_LANGUAGE ? (\n        PageDiagram ? (\n          <OwnDiagram as={PageDiagram} source={source} />\n        ) : (\n          <Diagram source={source} />\n        )\n      ) : PageTree ? (\n        <PageTree source={source} />\n      ) : (\n        <FileTree source={source} />\n      ),\n  }\n}\n\nconst Block = memo(\n  function Block({ source: open, closer, offset, growing, headingIds, options }: BlockProps) {\n    const [memory] = useState(createFenceMemory)\n    const fence = growing && !options.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' && options.extensions?.some((stage) => stage.name === 'math'))\n    )\n      return <GrowingCode {...fence} />\n    const source = closer ? open + closer : open\n    // A table that is the whole block is drawn row by row, unless the page reads tables itself\n    // (its own elements or extensions see the table whole).\n    const table = options.ownTable ? null : tableRows(source)\n    if (table) return <TableRows {...table} options={options} />\n    return (\n      <GrowingFence.Provider value={growing}>\n        {draw(source, offset, headingIds, options)}\n      </GrowingFence.Provider>\n    )\n  },\n  (before, after) =>\n    before.source === after.source &&\n    before.closer === after.closer &&\n    before.offset === after.offset &&\n    before.growing === after.growing &&\n    before.headingKey === after.headingKey &&\n    before.options === after.options,\n)\n\nconst NO_EXTENSIONS: Extension[] = []\n\n/**\n * How many blocks a group holds. Small enough that the group a reply is growing in is cheap to\n * go through on every token, large enough that a long reply is few groups.\n */\nconst GROUP = 32\n\nconst headingKeyOf = (own: ReadonlyMap<number, string> | null | undefined): string =>\n  own ? [...own].map(([at, id]) => `${at}:${id}`).join(';') : ''\n\ninterface BlockGroupProps {\n  /** The document's blocks and anchors; the group draws the ones from `from` up to `to`. */\n  blocks: readonly MarkdownBlock[]\n  ids: ReadonlyArray<ReadonlyMap<number, string>> | null\n  from: number\n  to: number\n  /** The closing line and the growing fence of the document's last block, when it is in here. */\n  closer: string\n  growing: boolean\n  options: BlockOptions\n}\n\n/**\n * The blocks at one run of places in the document. A block never moves to another group, so it\n * keeps what it holds (an open tab, a drawn diagram) for as long as it is there. While a reply\n * streams only its last group changes: React passes over each group above as one element, where\n * a flat list had it compare every block of the reply on every token.\n */\nconst BlockGroup = memo(\n  function BlockGroup({ blocks, ids, from, to, closer, growing, options }: BlockGroupProps) {\n    const drawn: ReactNode[] = []\n    for (let index = from; index < to; index++) {\n      const block = blocks[index]!\n      // A block gets only its own anchors, keyed by their text: a map is new on every render,\n      // and comparing it would redraw every block.\n      const own = ids?.[index] ?? null\n      const last = index === to - 1\n      drawn.push(\n        <Fragment key={index}>\n          {/* One parse puts a line break between top-level blocks; so does this, so the text of\n              the page (and a copy of it) is the same either way. */}\n          {index > 0 ? '\\n' : null}\n          <Block\n            source={block.source}\n            closer={last ? closer : ''}\n            offset={block.offset}\n            growing={last && growing}\n            headingIds={own && own.size > 0 ? own : null}\n            headingKey={headingKeyOf(own)}\n            options={options}\n          />\n        </Fragment>,\n      )\n    }\n    return drawn\n  },\n  (before, after) => {\n    if (\n      before.from !== after.from ||\n      before.to !== after.to ||\n      before.closer !== after.closer ||\n      before.growing !== after.growing ||\n      before.options !== after.options ||\n      (before.ids === null) !== (after.ids === null)\n    )\n      return false\n    // From the end: in the group a reply is growing in, the block that changed is the last one.\n    for (let index = after.to - 1; index >= after.from; index--) {\n      const was = before.blocks[index]!\n      const is = after.blocks[index]!\n      // The splitter hands back a block that did not change as the same object.\n      if (was !== is && (was.source !== is.source || was.offset !== is.offset)) return false\n      if (after.ids) {\n        const had = before.ids![index]\n        const has = after.ids[index]\n        // Most blocks have no heading: two empty maps are not spelled out to be compared.\n        if (had !== has && ((had?.size ?? 0) > 0 || (has?.size ?? 0) > 0)) {\n          if (headingKeyOf(had) !== headingKeyOf(has)) return false\n        }\n      }\n    }\n    return true\n  },\n)\n\n/**\n * Markdown with the flowdown dialect: GitHub Markdown, callouts, steps, tabs, stats, pros and cons,\n * figures, file trees and, when the page supplies them, diagrams, formulas and highlighted code.\n *\n * The document is drawn as its top-level blocks, each remembered by its text: while a reply\n * streams, the blocks above its end do not change, and only the last one is parsed and drawn\n * again on each token.\n */\nexport function Markdown({\n  children,\n  streaming: arriving = false,\n  smooth = false,\n  caret: caretOption,\n  components,\n  extensions = NO_EXTENSIONS,\n  headingIds = false,\n  html = true,\n  math: mathOption = null,\n  mermaid = null,\n  highlight = null,\n  labels,\n  urlTransform,\n  className,\n  unstyled = false,\n}: MarkdownProps): ReactNode {\n  // `\\r\\n` from a Windows file or a server that sends it reads as `\\n` everywhere below.\n  const whole = normalizeLineEndings(children)\n  // Paced, the reply is still \"streaming\" until all of it is shown, a moment after it ended.\n  const [text, behind] = useSmoothText(\n    whole,\n    arriving && smooth !== false,\n    typeof smooth === 'number' ? smooth : DEFAULT_CATCH_UP_MS,\n  )\n  const streaming = arriving || behind\n  const caret = caretOption ?? streaming\n  // One document per `<Markdown>`: it completes the unfinished end of a streaming reply, cuts the\n  // text into blocks and remembers them, so on the next token only the end of the reply is read.\n  // Blocks that did not change come back as the same objects.\n  const [doc] = useState(createDocument)\n  const {\n    blocks,\n    closer,\n    growing: endsInFence,\n    headingIds: ids,\n  } = doc.update(text, { streaming, math: Boolean(mathOption), headingIds })\n\n  const math = useStage(mathOption, mathOption !== null && usesMath(blocks))\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 htmlStage = useStage(\n    html === true ? loadHtml : html === false ? null : html,\n    html !== false && usesHtml(blocks),\n  )\n  // A name outside the common ones shows as written until the whole table is there.\n  const entities = useStage(loadEntities, !hasAllEntities() && usesRareEntity(blocks))\n  const labelValue = useMemo(() => mergeLabels(labels), [labels])\n  const options = useMemo<BlockOptions>(\n    () => ({\n      ...buildComponents(components),\n      labels: labelValue,\n      // Raw HTML is made into elements last, so every pass before it sees the text as written.\n      extensions: [\n        flowdownDialect,\n        ...(math ? [math] : []),\n        ...extensions,\n        ...(htmlStage ? [htmlStage] : []),\n      ],\n      urlTransform: urlTransform ?? defaultUrlTransform,\n      ownCode: Boolean(components?.pre || components?.code),\n      ownTable: Boolean(\n        components?.table || components?.thead || components?.tbody || extensions.length,\n      ),\n    }),\n    // `entities` is here so that blocks are read again once every name can be decoded.\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n    [htmlStage, math, urlTransform, components, extensions, entities, labelValue],\n  )\n  const context = useMemo<RenderContext>(() => {\n    if (mermaid) setMermaidLoader(mermaid)\n    return { highlight, mermaid: mermaid ? 'page' : null }\n  }, [highlight, mermaid])\n  const groups: ReactNode[] = []\n  for (let from = 0; from < blocks.length; from += GROUP) {\n    const to = Math.min(from + GROUP, blocks.length)\n    const last = to === blocks.length\n    groups.push(\n      <BlockGroup\n        key={from}\n        blocks={blocks}\n        ids={ids}\n        from={from}\n        to={to}\n        closer={last ? closer : ''}\n        growing={last && endsInFence}\n        options={options}\n      />,\n    )\n  }\n\n  return (\n    <LabelsContext.Provider value={labelValue}>\n      <RenderContextValue.Provider value={context}>\n        <div\n          className={unstyled ? className : className ? `flowdown ${className}` : 'flowdown'}\n          data-streaming={streaming || undefined}\n          data-caret={(streaming && caret) || undefined}\n        >\n          {groups}\n        </div>\n      </RenderContextValue.Provider>\n    </LabelsContext.Provider>\n  )\n}\n"],"mappings":"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"}

package/dist/react/render.d.ts

@@ -0,0 +1,8 @@
+import { Node } from "../engine/types.js";
+import { ComponentType } from "react";
+/** An element of the page's own for a tag: it gets the tag's props, and the node it draws. */
+export type Components = { [Tag in keyof React.JSX.IntrinsicElements]?: ComponentType<React.JSX.IntrinsicElements[Tag] & {
+  node?: Node;
+}>; } & {
+  [tag: string]: ComponentType<any> | undefined;
+};

package/dist/react/render.js

@@ -0,0 +1,41 @@
+import { createRenderer } from "../render/tree.js";
+import { Fragment, createElement, isValidElement } from "react";
+// src/react/render.tsx
+const read = (children, out) => {
+	for (const child of children) if (typeof child === "string") out.push(child);
+	else if (typeof child === "number") out.push(String(child));
+	else if (Array.isArray(child)) read(child, out);
+	else if (isValidElement(child)) {
+		const props = child.props;
+		const inner = props.children === void 0 || props.children === null ? [] : Array.isArray(props.children) ? props.children : [props.children];
+		if (child.type === Fragment) read(inner, out);
+		else out.push({
+			tag: child.type,
+			props,
+			children: inner
+		});
+	}
+	return out;
+};
+/** React's elements, as the factory every HTML renderer of the package is written against. */
+const react = {
+	element(tag, props, children) {
+		if (props !== null && props.innerHTML !== void 0) {
+			const { innerHTML, ...rest } = props;
+			return createElement(tag, {
+				...rest,
+				dangerouslySetInnerHTML: { __html: innerHTML }
+			});
+		}
+		return createElement(tag, props, ...children);
+	},
+	text: (value) => value,
+	fragment: (children) => createElement(Fragment, null, ...children),
+	read: (children) => read(children, [])
+};
+const draw = createRenderer(react);
+/** Draws a tree. Every call gives new elements; the caller remembers them by the tree's text. */
+const render = (root, options) => draw(root, options);
+export { react, render };
+
+//# sourceMappingURL=render.js.map