@localix-ai/flowdown 0.0.0-stage → 0.5.1

package/dist/react/render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.js","names":[],"sources":["../../src/react/render.tsx"],"sourcesContent":["import { createElement, Fragment, isValidElement, type ComponentType, type ReactNode } from 'react'\nimport type { Node } from '../engine/types'\nimport type { Factory, Props, Read } from '../render/factory'\nimport { createRenderer, type RenderOptions as TreeOptions } from '../render/tree'\n\nexport { ID_PREFIX } from '../render/tree'\n\n/** An element of the page's own for a tag: it gets the tag's props, and the node it draws. */\nexport type Components = {\n  [Tag in keyof React.JSX.IntrinsicElements]?: ComponentType<\n    React.JSX.IntrinsicElements[Tag] & { node?: Node }\n  >\n} & {\n  // `any`: a page's own tag takes whatever props its extension wrote. `never` here refused a map\n  // that spreads one in beside HTML tags (a class component's `defaultProps` do not fit it).\n  // oxlint-disable-next-line typescript/no-explicit-any\n  [tag: string]: ComponentType<any> | undefined\n}\n\n// oxlint-disable-next-line typescript/no-explicit-any\ntype Component = ComponentType<any>\n\nexport type RenderOptions = Omit<TreeOptions<ReactNode, Component>, 'components'> & {\n  components: Components\n}\n\nconst read = (children: ReactNode[], out: Array<Exclude<Read<ReactNode, Component>, null>>) => {\n  for (const child of children) {\n    if (typeof child === 'string') out.push(child)\n    else if (typeof child === 'number') out.push(String(child))\n    else if (Array.isArray(child)) read(child as ReactNode[], out)\n    else if (isValidElement(child)) {\n      const props = child.props as Props & { children?: ReactNode }\n      const inner =\n        props.children === undefined || props.children === null\n          ? []\n          : Array.isArray(props.children)\n            ? (props.children as ReactNode[])\n            : [props.children]\n      if (child.type === Fragment) read(inner, out)\n      else out.push({ tag: child.type as string | Component, props, children: inner })\n    }\n  }\n  return out\n}\n\n/** React's elements, as the factory every HTML renderer of the package is written against. */\nexport const react: Factory<ReactNode, Component> = {\n  element(tag, props, children) {\n    if (props !== null && props.innerHTML !== undefined) {\n      // Markup already made (highlighted code, a typeset formula) is the element's whole inside.\n      const { innerHTML, ...rest } = props\n      return createElement(tag, { ...rest, dangerouslySetInnerHTML: { __html: innerHTML } })\n    }\n    return createElement(tag, props, ...children)\n  },\n  text: (value) => value,\n  fragment: (children) => createElement(Fragment, null, ...children),\n  read: (children) => read(children, []),\n}\n\nconst draw = createRenderer(react)\n\n/** Draws a tree. Every call gives new elements; the caller remembers them by the tree's text. */\nexport const render = (root: Node, options: RenderOptions): ReactNode =>\n  draw(root, options as TreeOptions<ReactNode, Component>)\n"],"mappings":";;;AA0BA,MAAM,QAAQ,UAAuB,QAA0D;CAC7F,KAAK,MAAM,SAAS,UAClB,IAAI,OAAO,UAAU,UAAU,IAAI,KAAK,KAAK;MACxC,IAAI,OAAO,UAAU,UAAU,IAAI,KAAK,OAAO,KAAK,CAAC;MACrD,IAAI,MAAM,QAAQ,KAAK,GAAG,KAAK,OAAsB,GAAG;MACxD,IAAI,eAAe,KAAK,GAAG;EAC9B,MAAM,QAAQ,MAAM;EACpB,MAAM,QACJ,MAAM,aAAa,KAAA,KAAa,MAAM,aAAa,OAC/C,CAAC,IACD,MAAM,QAAQ,MAAM,QAAQ,IACzB,MAAM,WACP,CAAC,MAAM,QAAQ;EACvB,IAAI,MAAM,SAAS,UAAU,KAAK,OAAO,GAAG;OACvC,IAAI,KAAK;GAAE,KAAK,MAAM;GAA4B;GAAO,UAAU;EAAM,CAAC;CACjF;CAEF,OAAO;AACT;;AAGA,MAAa,QAAuC;CAClD,QAAQ,KAAK,OAAO,UAAU;EAC5B,IAAI,UAAU,QAAQ,MAAM,cAAc,KAAA,GAAW;GAEnD,MAAM,EAAE,WAAW,GAAG,SAAS;GAC/B,OAAO,cAAc,KAAK;IAAE,GAAG;IAAM,yBAAyB,EAAE,QAAQ,UAAU;GAAE,CAAC;EACvF;EACA,OAAO,cAAc,KAAK,OAAO,GAAG,QAAQ;CAC9C;CACA,OAAO,UAAU;CACjB,WAAW,aAAa,cAAc,UAAU,MAAM,GAAG,QAAQ;CACjE,OAAO,aAAa,KAAK,UAAU,CAAC,CAAC;AACvC;AAEA,MAAM,OAAO,eAAe,KAAK;;AAGjC,MAAa,UAAU,MAAY,YACjC,KAAK,MAAM,OAA4C"}

package/dist/react/scrolls.js

@@ -0,0 +1,62 @@
+"use client";
+import { useState } from "react";
+// src/react/scrolls.ts
+/**
+* Whether a box scrolls sideways: a table's box, or the `<pre>` of a code block.
+*
+* A box that scrolls is a named group the Tab key stops on, so the arrow keys can scroll it:
+* without that what is past the edge cannot be reached from the keyboard at all (WCAG 2.1.1). A box
+* whose content fits stays out of the Tab order. It is measured again whenever it, or the `inner`
+* element that holds its content, changes size.
+*
+* A line of code getting longer resizes neither, so the caller says when its text has changed
+* (`again`): the box is then measured once in the next frame, when the page is laid out anyway. A
+* measuring per token would lay the page out per token.
+*
+* Two hooks and no effect: a code block is drawn again on every token of its text, and an update
+* there is short enough that each hook a component calls shows in the stream's whole time.
+*/
+function useScrolls(inner) {
+	const [scrolls, setScrolls] = useState(false);
+	const [box] = useState(() => watch(setScrolls, inner));
+	return [
+		box.attach,
+		scrolls,
+		box.again
+	];
+}
+/** The watching of one box, from React attaching it (`attach(element)`) to its leaving (`attach(null)`). */
+function watch(tell, inner) {
+	let box = null;
+	let observer = null;
+	let frame = 0;
+	const measure = () => {
+		if (box) tell(box.scrollWidth > box.clientWidth + 1);
+	};
+	return {
+		attach(element) {
+			if (frame) cancelAnimationFrame(frame);
+			frame = 0;
+			observer?.disconnect();
+			observer = null;
+			box = element;
+			if (!element) return;
+			measure();
+			if (typeof ResizeObserver === "undefined") return;
+			observer = new ResizeObserver(measure);
+			observer.observe(element);
+			const content = inner ? element.querySelector(inner) : null;
+			if (content) observer.observe(content);
+		},
+		again() {
+			if (!box || typeof requestAnimationFrame !== "function") return;
+			frame ||= requestAnimationFrame(() => {
+				frame = 0;
+				measure();
+			});
+		}
+	};
+}
+export { useScrolls };
+
+//# sourceMappingURL=scrolls.js.map

package/dist/react/scrolls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrolls.js","names":[],"sources":["../../src/react/scrolls.ts"],"sourcesContent":["'use client'\n\nimport { useState } from 'react'\n\n/**\n * Whether a box scrolls sideways: a table's box, or the `<pre>` of a code block.\n *\n * A box that scrolls is a named group the Tab key stops on, so the arrow keys can scroll it:\n * without that what is past the edge cannot be reached from the keyboard at all (WCAG 2.1.1). A box\n * whose content fits stays out of the Tab order. It is measured again whenever it, or the `inner`\n * element that holds its content, changes size.\n *\n * A line of code getting longer resizes neither, so the caller says when its text has changed\n * (`again`): the box is then measured once in the next frame, when the page is laid out anyway. A\n * measuring per token would lay the page out per token.\n *\n * Two hooks and no effect: a code block is drawn again on every token of its text, and an update\n * there is short enough that each hook a component calls shows in the stream's whole time.\n */\nexport function useScrolls<T extends HTMLElement>(\n  inner?: string,\n): [attach: (element: T | null) => void, scrolls: boolean, again: () => void] {\n  const [scrolls, setScrolls] = useState(false)\n  const [box] = useState(() => watch<T>(setScrolls, inner))\n  return [box.attach, scrolls, box.again]\n}\n\n/** The watching of one box, from React attaching it (`attach(element)`) to its leaving (`attach(null)`). */\nfunction watch<T extends HTMLElement>(tell: (scrolls: boolean) => void, inner: string | undefined) {\n  let box: T | null = null\n  let observer: ResizeObserver | null = null\n  let frame = 0\n  // One pixel of slack: a subpixel content width rounds up past the box it fits in.\n  const measure = () => {\n    if (box) tell(box.scrollWidth > box.clientWidth + 1)\n  }\n  return {\n    attach(element: T | null): void {\n      if (frame) cancelAnimationFrame(frame)\n      frame = 0\n      observer?.disconnect()\n      observer = null\n      box = element\n      if (!element) return\n      measure()\n      if (typeof ResizeObserver === 'undefined') return\n      observer = new ResizeObserver(measure)\n      observer.observe(element)\n      const content = inner ? element.querySelector(inner) : null\n      if (content) observer.observe(content)\n    },\n    again(): void {\n      if (!box || typeof requestAnimationFrame !== 'function') return\n      frame ||= requestAnimationFrame(() => {\n        frame = 0\n        measure()\n      })\n    },\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,SAAgB,WACd,OAC4E;CAC5E,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,OAAO,eAAe,MAAS,YAAY,KAAK,CAAC;CACxD,OAAO;EAAC,IAAI;EAAQ;EAAS,IAAI;CAAK;AACxC;;AAGA,SAAS,MAA6B,MAAkC,OAA2B;CACjG,IAAI,MAAgB;CACpB,IAAI,WAAkC;CACtC,IAAI,QAAQ;CAEZ,MAAM,gBAAgB;EACpB,IAAI,KAAK,KAAK,IAAI,cAAc,IAAI,cAAc,CAAC;CACrD;CACA,OAAO;EACL,OAAO,SAAyB;GAC9B,IAAI,OAAO,qBAAqB,KAAK;GACrC,QAAQ;GACR,UAAU,WAAW;GACrB,WAAW;GACX,MAAM;GACN,IAAI,CAAC,SAAS;GACd,QAAQ;GACR,IAAI,OAAO,mBAAmB,aAAa;GAC3C,WAAW,IAAI,eAAe,OAAO;GACrC,SAAS,QAAQ,OAAO;GACxB,MAAM,UAAU,QAAQ,QAAQ,cAAc,KAAK,IAAI;GACvD,IAAI,SAAS,SAAS,QAAQ,OAAO;EACvC;EACA,QAAc;GACZ,IAAI,CAAC,OAAO,OAAO,0BAA0B,YAAY;GACzD,UAAU,4BAA4B;IACpC,QAAQ;IACR,QAAQ;GACV,CAAC;EACH;CACF;AACF"}

package/dist/react/table-rows.js

@@ -0,0 +1,66 @@
+"use client";
+import { tableRows } from "../document/table.js";
+import { draw } from "./draw.js";
+import { createElement, memo } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+// src/react/table-rows.tsx
+/**
+* A table is one block, and a model that prints results row by row grows it to hundreds of rows:
+* drawn through one parse, every token read and drew the whole table again. A row depends only on
+* the header above it, so the table is drawn as its header and its rows in pieces of {@link ROWS};
+* a piece that is complete is parsed and drawn once, and a token redraws only the last piece.
+*
+* Each piece is the header and its own rows through the same parser, so the cells are what one
+* parse of the whole table makes: the same elements, in the same table.
+*/
+const ROWS = 16;
+const Children = ({ children }) => /* @__PURE__ */ jsx(Fragment$1, { children });
+const Nothing = () => null;
+/** A document's options with the table's own shell taken off: a piece yields its rows alone. */
+const parts = /* @__PURE__ */ new WeakMap();
+function partsOf(options) {
+	let made = parts.get(options);
+	if (!made) {
+		const { components } = options;
+		made = {
+			head: {
+				...options,
+				components: {
+					...components,
+					table: Children,
+					tbody: Nothing
+				}
+			},
+			body: {
+				...options,
+				components: {
+					...components,
+					table: Children,
+					thead: Nothing,
+					tbody: Children
+				}
+			}
+		};
+		parts.set(options, made);
+	}
+	return made;
+}
+/** A header with some of its rows, read and drawn once for as long as its text is the same. */
+const Piece = memo(function Piece({ source, options }) {
+	return draw(source, 0, null, options);
+});
+function TableRows({ head, rows, options }) {
+	const { head: headParts, body: bodyParts } = partsOf(options);
+	const pieces = [];
+	for (let at = 0; at < rows.length; at += ROWS) pieces.push(/* @__PURE__ */ jsx(Piece, {
+		source: head + rows.slice(at, at + ROWS).join("\n"),
+		options: bodyParts
+	}, at));
+	return createElement(options.components.table, null, /* @__PURE__ */ jsx(Piece, {
+		source: head,
+		options: headParts
+	}), /* @__PURE__ */ jsx("tbody", { children: pieces }));
+}
+export { TableRows, tableRows };
+
+//# sourceMappingURL=table-rows.js.map

package/dist/react/table-rows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-rows.js","names":[],"sources":["../../src/react/table-rows.tsx"],"sourcesContent":["'use client'\nimport { createElement, memo, type ReactNode } from 'react'\nimport { draw, type BlockOptions } from './draw'\n\nexport { tableRows } from '../document/table'\n\n/**\n * A table is one block, and a model that prints results row by row grows it to hundreds of rows:\n * drawn through one parse, every token read and drew the whole table again. A row depends only on\n * the header above it, so the table is drawn as its header and its rows in pieces of {@link ROWS};\n * a piece that is complete is parsed and drawn once, and a token redraws only the last piece.\n *\n * Each piece is the header and its own rows through the same parser, so the cells are what one\n * parse of the whole table makes: the same elements, in the same table.\n */\nconst ROWS = 16\n\nconst Children = ({ children }: { children?: ReactNode }) => <>{children}</>\nconst Nothing = () => null\n\n/** A document's options with the table's own shell taken off: a piece yields its rows alone. */\nconst parts = new WeakMap<BlockOptions, { head: BlockOptions; body: BlockOptions }>()\nfunction partsOf(options: BlockOptions) {\n  let made = parts.get(options)\n  if (!made) {\n    const { components } = options\n    made = {\n      head: { ...options, components: { ...components, table: Children, tbody: Nothing } as never },\n      body: {\n        ...options,\n        components: { ...components, table: Children, thead: Nothing, tbody: Children } as never,\n      },\n    }\n    parts.set(options, made)\n  }\n  return made\n}\n\n/** A header with some of its rows, read and drawn once for as long as its text is the same. */\nconst Piece = memo(function Piece({ source, options }: { source: string; options: BlockOptions }) {\n  return draw(source, 0, null, options)\n})\n\nexport function TableRows({\n  head,\n  rows,\n  options,\n}: {\n  head: string\n  rows: string[]\n  /** What the block is read and drawn with. One object per document: a piece compares it. */\n  options: BlockOptions\n}) {\n  const { head: headParts, body: bodyParts } = partsOf(options)\n  const pieces: ReactNode[] = []\n  for (let at = 0; at < rows.length; at += ROWS)\n    pieces.push(\n      <Piece key={at} source={head + rows.slice(at, at + ROWS).join('\\n')} options={bodyParts} />,\n    )\n  return createElement(\n    options.components.table as never,\n    null,\n    <Piece source={head} options={headParts} />,\n    <tbody>{pieces}</tbody>,\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAM,OAAO;AAEb,MAAM,YAAY,EAAE,eAAyC,oBAAA,YAAA,EAAG,SAAW,CAAA;AAC3E,MAAM,gBAAgB;;AAGtB,MAAM,wBAAQ,IAAI,QAAkE;AACpF,SAAS,QAAQ,SAAuB;CACtC,IAAI,OAAO,MAAM,IAAI,OAAO;CAC5B,IAAI,CAAC,MAAM;EACT,MAAM,EAAE,eAAe;EACvB,OAAO;GACL,MAAM;IAAE,GAAG;IAAS,YAAY;KAAE,GAAG;KAAY,OAAO;KAAU,OAAO;IAAQ;GAAW;GAC5F,MAAM;IACJ,GAAG;IACH,YAAY;KAAE,GAAG;KAAY,OAAO;KAAU,OAAO;KAAS,OAAO;IAAS;GAChF;EACF;EACA,MAAM,IAAI,SAAS,IAAI;CACzB;CACA,OAAO;AACT;;AAGA,MAAM,QAAQ,KAAK,SAAS,MAAM,EAAE,QAAQ,WAAsD;CAChG,OAAO,KAAK,QAAQ,GAAG,MAAM,OAAO;AACtC,CAAC;AAED,SAAgB,UAAU,EACxB,MACA,MACA,WAMC;CACD,MAAM,EAAE,MAAM,WAAW,MAAM,cAAc,QAAQ,OAAO;CAC5D,MAAM,SAAsB,CAAC;CAC7B,KAAK,IAAI,KAAK,GAAG,KAAK,KAAK,QAAQ,MAAM,MACvC,OAAO,KACL,oBAAC,OAAD;EAAgB,QAAQ,OAAO,KAAK,MAAM,IAAI,KAAK,IAAI,CAAC,CAAC,KAAK,IAAI;EAAG,SAAS;CAAY,GAA9E,EAA8E,CAC5F;CACF,OAAO,cACL,QAAQ,WAAW,OACnB,MACA,oBAAC,OAAD;EAAO,QAAQ;EAAM,SAAS;CAAY,CAAA,GAC1C,oBAAC,SAAD,EAAA,UAAQ,OAAc,CAAA,CACxB;AACF"}

package/dist/react/table.js

@@ -0,0 +1,22 @@
+"use client";
+import { table } from "../render/views.js";
+import { useLabels } from "./labels.js";
+import { react } from "./render.js";
+import { useScrolls } from "./scrolls.js";
+// src/react/table.tsx
+/**
+* A table in a box of its own that scrolls sideways: a wide comparison then scrolls inside the
+* reply instead of widening the page, which on a phone pushed every line of text off screen.
+*
+* A box that scrolls is a Tab stop, and one that fits is not: see `useScrolls`. The box is measured
+* again whenever it or the table changes size: a reply that streams a row in, or a window made
+* narrower.
+*/
+function Table({ children, ...props }) {
+	const labels = useLabels();
+	const [attach, scrolls] = useScrolls("table");
+	return table(react, props, children === void 0 ? [] : [children], scrolls, labels, { ref: attach });
+}
+export { Table };
+
+//# sourceMappingURL=table.js.map

package/dist/react/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","names":[],"sources":["../../src/react/table.tsx"],"sourcesContent":["'use client'\n\nimport type { ComponentPropsWithoutRef } from 'react'\nimport type { Props } from '../render/factory'\nimport { table } from '../render/views'\nimport { useLabels } from './labels'\nimport { react } from './render'\nimport { useScrolls } from './scrolls'\n\n/**\n * A table in a box of its own that scrolls sideways: a wide comparison then scrolls inside the\n * reply instead of widening the page, which on a phone pushed every line of text off screen.\n *\n * A box that scrolls is a Tab stop, and one that fits is not: see `useScrolls`. The box is measured\n * again whenever it or the table changes size: a reply that streams a row in, or a window made\n * narrower.\n */\nexport function Table({\n  children,\n  ...props\n}: ComponentPropsWithoutRef<'table'> & { node?: unknown }) {\n  const labels = useLabels()\n  const [attach, scrolls] = useScrolls<HTMLDivElement>('table')\n  return table(react, props as Props, children === undefined ? [] : [children], scrolls, labels, {\n    ref: attach,\n  })\n}\n"],"mappings":";;;;;;;;;;;;;;AAiBA,SAAgB,MAAM,EACpB,UACA,GAAG,SACsD;CACzD,MAAM,SAAS,UAAU;CACzB,MAAM,CAAC,QAAQ,WAAW,WAA2B,OAAO;CAC5D,OAAO,MAAM,OAAO,OAAgB,aAAa,KAAA,IAAY,CAAC,IAAI,CAAC,QAAQ,GAAG,SAAS,QAAQ,EAC7F,KAAK,OACP,CAAC;AACH"}

package/dist/react/tabs.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from "react";
+type TabProps = {
+  children?: ReactNode;
+  node?: unknown;
+  'data-label'?: string;
+};
+/**
+ * One variant of a `[!TABS]` form. Its label rides as a data attribute; the panel is drawn by
+ * `Tabs`, so on its own this is just its content.
+ */
+export declare function Tab({ children }: TabProps): import("react").JSX.Element;
+/**
+ * `[!TABS]`: the variants of one answer (an install per OS, an example per language), of which
+ * the reader needs one. The first is shown. 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, the arrow keys, Home and End move between
+ * tabs and select them, each tab names the panel it controls.
+ */
+export declare function Tabs({ children }: {
+  children?: ReactNode;
+  node?: unknown;
+}): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null | undefined;
+export {};

package/dist/react/tabs.js

@@ -0,0 +1,58 @@
+"use client";
+import { readTabs, tabs } from "../render/views.js";
+import { useLabels } from "./labels.js";
+import { react } from "./render.js";
+import { useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+// src/react/tabs.tsx
+/**
+* One variant of a `[!TABS]` form. Its label rides as a data attribute; the panel is drawn by
+* `Tabs`, so on its own this is just its content.
+*/
+function Tab({ children }) {
+	return /* @__PURE__ */ jsx(Fragment$1, { children });
+}
+/**
+* `[!TABS]`: the variants of one answer (an install per OS, an example per language), of which
+* the reader needs one. The first is shown. 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, the arrow keys, Home and End move between
+* tabs and select them, each tab names the panel it controls.
+*/
+function Tabs({ children }) {
+	const labels = useLabels();
+	const base = useId();
+	const [active, setActive] = useState(0);
+	const buttons = useRef([]);
+	const list = readTabs(react, children === void 0 ? [] : [children]);
+	if (list.length === 0) return null;
+	const current = active < list.length ? active : 0;
+	const select = (index) => {
+		const next = (index + list.length) % list.length;
+		setActive(next);
+		buttons.current[next]?.focus();
+	};
+	const onKeyDown = (event, index) => {
+		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);
+	};
+	return tabs(react, list, current, base, labels, (index) => ({
+		ref: (element) => {
+			buttons.current[index] = element;
+		},
+		onClick: () => setActive(index),
+		onKeyDown: (event) => onKeyDown(event, index)
+	}));
+}
+export { Tab, Tabs };
+
+//# sourceMappingURL=tabs.js.map

package/dist/react/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","names":[],"sources":["../../src/react/tabs.tsx"],"sourcesContent":["'use client'\nimport { useId, useRef, useState, type KeyboardEvent, type ReactNode } from 'react'\nimport { readTabs, tabs } from '../render/views'\nimport { useLabels } from './labels'\nimport { react } from './render'\n\ntype TabProps = { children?: ReactNode; node?: unknown; 'data-label'?: string }\n\n/**\n * One variant of a `[!TABS]` form. Its label rides as a data attribute; the panel is drawn by\n * `Tabs`, so on its own this is just its content.\n */\nexport function Tab({ children }: TabProps) {\n  return <>{children}</>\n}\n\n/**\n * `[!TABS]`: the variants of one answer (an install per OS, an example per language), of which\n * the reader needs one. The first is shown. Every panel stays in the document, `hidden`, so a\n * search on the page, a copy of the whole reply and a screen reader's panel navigation still\n * reach the others.\n *\n * The WAI-ARIA tabs pattern: one Tab stop for the row, the arrow keys, Home and End move between\n * tabs and select them, each tab names the panel it controls.\n */\nexport function Tabs({ children }: { children?: ReactNode; node?: unknown }) {\n  const labels = useLabels()\n  const base = useId()\n  const [active, setActive] = useState(0)\n  const buttons = useRef<Array<HTMLButtonElement | null>>([])\n  const list = readTabs(react, children === undefined ? [] : [children])\n  if (list.length === 0) return null\n  // A streamed form can lose a tab between renders only by being re-parsed; never point past it.\n  const current = active < list.length ? active : 0\n\n  const select = (index: number) => {\n    const next = (index + list.length) % list.length\n    setActive(next)\n    buttons.current[next]?.focus()\n  }\n  const onKeyDown = (event: KeyboardEvent<HTMLButtonElement>, index: number) => {\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)\n  }\n\n  return tabs(react, list, current, base, labels, (index) => ({\n    ref: (element: HTMLButtonElement | null) => {\n      buttons.current[index] = element\n    },\n    onClick: () => setActive(index),\n    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => onKeyDown(event, index),\n  }))\n}\n"],"mappings":";;;;;;;;;;;AAYA,SAAgB,IAAI,EAAE,YAAsB;CAC1C,OAAO,oBAAA,YAAA,EAAG,SAAW,CAAA;AACvB;;;;;;;;;;AAWA,SAAgB,KAAK,EAAE,YAAsD;CAC3E,MAAM,SAAS,UAAU;CACzB,MAAM,OAAO,MAAM;CACnB,MAAM,CAAC,QAAQ,aAAa,SAAS,CAAC;CACtC,MAAM,UAAU,OAAwC,CAAC,CAAC;CAC1D,MAAM,OAAO,SAAS,OAAO,aAAa,KAAA,IAAY,CAAC,IAAI,CAAC,QAAQ,CAAC;CACrE,IAAI,KAAK,WAAW,GAAG,OAAO;CAE9B,MAAM,UAAU,SAAS,KAAK,SAAS,SAAS;CAEhD,MAAM,UAAU,UAAkB;EAChC,MAAM,QAAQ,QAAQ,KAAK,UAAU,KAAK;EAC1C,UAAU,IAAI;EACd,QAAQ,QAAQ,KAAK,EAAE,MAAM;CAC/B;CACA,MAAM,aAAa,OAAyC,UAAkB;EAO5E,MAAM,SAAS;GALb,YAAY,QAAQ;GACpB,WAAW,QAAQ;GACnB,MAAM;GACN,KAAK,KAAK,SAAS;EAEF,EAAE,MAAM;EAC3B,IAAI,WAAW,KAAA,GAAW;EAC1B,MAAM,eAAe;EACrB,OAAO,MAAM;CACf;CAEA,OAAO,KAAK,OAAO,MAAM,SAAS,MAAM,SAAS,WAAW;EAC1D,MAAM,YAAsC;GAC1C,QAAQ,QAAQ,SAAS;EAC3B;EACA,eAAe,UAAU,KAAK;EAC9B,YAAY,UAA4C,UAAU,OAAO,KAAK;CAChF,EAAE;AACJ"}

package/dist/react/use-smooth-text.d.ts

@@ -0,0 +1,6 @@
+/**
+ * `text` as it should be shown now. While `streaming`, growth is paced; when it stops, what is
+ * left is shown out. The second value says whether the shown text is still behind: a caller keeps
+ * its "still arriving" look until it is false.
+ */
+export declare function useSmoothText(text: string, streaming: boolean, catchUp?: number): [shown: string, behind: boolean];

package/dist/react/use-smooth-text.js

@@ -0,0 +1,157 @@
+"use client";
+import { continues } from "../core/continues.js";
+import { useEffect, useState } from "react";
+/** The least time between two steps: about 30 a second, each of which is drawn. */
+const STEP_MS = 30;
+/** How fast the speed itself follows the backlog. */
+const EASE_MS = 140;
+/** A reply that has not grown for this long is between words, not inside one. */
+const PAUSE_MS = 160;
+/** A word longer than this (a URL, a hash) is shown in pieces rather than waited for. */
+const LONGEST_WORD = 24;
+const isSpace = (code) => code === 32 || code === 10 || code === 9 || code === 13;
+/** CJK and kana are written without spaces: every character there is a place to stop. */
+const isWide = (code) => code >= 11904 && code <= 65519;
+/** Where the last word of `text` begins, or its length when it ends on a break. */
+function lastWordStart(text) {
+	let at = text.length;
+	while (at > 0) {
+		const code = text.charCodeAt(at - 1);
+		if (isSpace(code) || isWide(code)) break;
+		at--;
+	}
+	return at;
+}
+/**
+* How much of `text` may be shown: all of it once it is `settled`, and otherwise all but a last
+* word that is still being typed. A long token (a URL, a hash) is not waited for.
+*/
+function showable(text, settled) {
+	if (settled) return text.length;
+	const start = lastWordStart(text);
+	return text.length - start > LONGEST_WORD ? text.length : start;
+}
+/** From `at`, the end of the word it is inside (and the spaces after it), no further than `limit`. */
+function wordEnd(text, at, limit) {
+	if (at >= limit) return limit;
+	let end = at;
+	const reach = Math.min(limit, at + LONGEST_WORD);
+	while (end < reach) {
+		const code = text.charCodeAt(end);
+		if (isSpace(code) || isWide(code)) break;
+		end++;
+	}
+	if (end === reach && reach < limit) return at;
+	while (end < limit && isSpace(text.charCodeAt(end))) end++;
+	if (end < limit && isLowSurrogate(text.charCodeAt(end))) end++;
+	return end;
+}
+const isLowSurrogate = (code) => code >= 56320 && code <= 57343;
+/**
+* One step: how much of `text` is shown `elapsed` ms after `pace`. `settled` says no more of the
+* last word is coming (the reply ended, or has stood still for a moment).
+*/
+function advance(text, pace, elapsed, catchUp, settled) {
+	const limit = showable(text, settled);
+	if (pace.shown >= limit) return {
+		shown: Math.min(pace.shown, text.length),
+		speed: 0
+	};
+	const wanted = (limit - pace.shown) / catchUp;
+	const speed = pace.speed + (wanted - pace.speed) * Math.min(1, elapsed / EASE_MS);
+	let shown = wordEnd(text, Math.min(limit, pace.shown + Math.max(1, Math.round(speed * elapsed))), limit);
+	if (shown < text.length && isLowSurrogate(text.charCodeAt(shown))) shown++;
+	return {
+		shown,
+		speed
+	};
+}
+const reducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const now = () => typeof performance === "undefined" ? 0 : performance.now();
+function commonPrefix(a, b) {
+	const limit = Math.min(a.length, b.length);
+	let at = 0;
+	while (at < limit && a.charCodeAt(at) === b.charCodeAt(at)) at++;
+	return at;
+}
+/**
+* The pacer of one text: how much of it is shown, and the frame loop that shows more. It lives
+* outside React's state on purpose: the length belongs to the text it was counted in, and is
+* corrected in the same render that brings a new text, never a frame later.
+*/
+function createPacer(initial) {
+	let text = initial;
+	let pace = {
+		shown: initial.length,
+		speed: 0
+	};
+	let streaming = false;
+	let grew = 0;
+	let stepped = 0;
+	let frame = 0;
+	return {
+		/** The length of `next` to show now. */
+		take(next, live) {
+			if (next !== text) {
+				const shown = !live && !streaming ? next.length : continues(next, text, pace.shown) ? pace.shown : commonPrefix(text, next);
+				text = next;
+				pace = {
+					shown,
+					speed: pace.speed
+				};
+				grew = now();
+			}
+			streaming = live;
+			if (pace.shown < text.length && reducedMotion()) pace = {
+				shown: text.length,
+				speed: 0
+			};
+			return Math.min(pace.shown, text.length);
+		},
+		/** Show the rest, a step at a time; `redraw` is called after each step that showed more. */
+		run(catchUp, redraw) {
+			if (frame !== 0 || pace.shown >= text.length) return;
+			stepped = now();
+			const step = (time) => {
+				const elapsed = time - stepped;
+				if (elapsed >= STEP_MS) {
+					stepped = time;
+					const settled = !streaming || time - grew > PAUSE_MS;
+					const next = advance(text, pace, elapsed, catchUp, settled);
+					const moved = next.shown !== pace.shown;
+					pace = next;
+					if (moved) redraw();
+				}
+				frame = pace.shown < text.length ? requestAnimationFrame(step) : 0;
+			};
+			frame = requestAnimationFrame(step);
+		},
+		stop() {
+			cancelAnimationFrame(frame);
+			frame = 0;
+		}
+	};
+}
+/**
+* `text` as it should be shown now. While `streaming`, growth is paced; when it stops, what is
+* left is shown out. The second value says whether the shown text is still behind: a caller keeps
+* its "still arriving" look until it is false.
+*/
+function useSmoothText(text, streaming, catchUp = 240) {
+	const [pacer] = useState(() => createPacer(text));
+	const [, setDrawn] = useState(0);
+	const end = pacer.take(text, streaming);
+	useEffect(() => {
+		pacer.run(catchUp, () => setDrawn((count) => count + 1));
+	}, [
+		pacer,
+		text,
+		streaming,
+		catchUp
+	]);
+	useEffect(() => () => pacer.stop(), [pacer]);
+	return [end >= text.length ? text : text.slice(0, end), end < text.length];
+}
+export { advance, showable, useSmoothText, wordEnd };
+
+//# sourceMappingURL=use-smooth-text.js.map

package/dist/react/use-smooth-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-smooth-text.js","names":[],"sources":["../../src/react/use-smooth-text.ts"],"sourcesContent":["'use client'\n/**\n * Pacing a reply that arrives in bursts.\n *\n * A model's text reaches the page in uneven pieces: a network frame holds one word or forty, a\n * cache hit holds the whole reply. Drawn as it lands, the page jumps by a line at a time and then\n * stands still. This shows the text at an even pace instead, a few frames behind what has arrived:\n *\n *   - the speed follows the backlog (what has arrived and is not shown yet is shown over about\n *     `catchUp` ms) and changes gradually, so a burst speeds the flow up instead of landing whole;\n *   - text is shown a word at a time: a word typed letter by letter at the end of a line grows\n *     there and then jumps to the next line when it no longer fits, and a whole word never does;\n *   - when the reply ends, what is left is shown at the same pace instead of landing at once;\n *   - text that was there before streaming began is shown at once: only growth is paced;\n *   - with `prefers-reduced-motion`, nothing is paced.\n *\n * It never shows text that has not arrived, and costs nothing once it has caught up: the frame\n * loop runs only while there is a backlog.\n */\nimport { useEffect, useState } from 'react'\nimport { continues } from '../core/continues'\n\n/** How long a backlog takes to show, by default. */\nexport const DEFAULT_CATCH_UP_MS = 240\n/** The least time between two steps: about 30 a second, each of which is drawn. */\nconst STEP_MS = 30\n/** How fast the speed itself follows the backlog. */\nconst EASE_MS = 140\n/** A reply that has not grown for this long is between words, not inside one. */\nconst PAUSE_MS = 160\n/** A word longer than this (a URL, a hash) is shown in pieces rather than waited for. */\nconst LONGEST_WORD = 24\n\nexport interface Pace {\n  /** Characters shown. */\n  shown: number\n  /** Characters a millisecond, as of the last step. */\n  speed: number\n}\n\nconst isSpace = (code: number) => code === 32 || code === 10 || code === 9 || code === 13\n/** CJK and kana are written without spaces: every character there is a place to stop. */\nconst isWide = (code: number) => code >= 0x2e80 && code <= 0xffef\n\n/** Where the last word of `text` begins, or its length when it ends on a break. */\nfunction lastWordStart(text: string): number {\n  let at = text.length\n  while (at > 0) {\n    const code = text.charCodeAt(at - 1)\n    if (isSpace(code) || isWide(code)) break\n    at--\n  }\n  return at\n}\n\n/**\n * How much of `text` may be shown: all of it once it is `settled`, and otherwise all but a last\n * word that is still being typed. A long token (a URL, a hash) is not waited for.\n */\nexport function showable(text: string, settled: boolean): number {\n  if (settled) return text.length\n  const start = lastWordStart(text)\n  return text.length - start > LONGEST_WORD ? text.length : start\n}\n\n/** From `at`, the end of the word it is inside (and the spaces after it), no further than `limit`. */\nexport function wordEnd(text: string, at: number, limit: number): number {\n  if (at >= limit) return limit\n  let end = at\n  const reach = Math.min(limit, at + LONGEST_WORD)\n  while (end < reach) {\n    const code = text.charCodeAt(end)\n    if (isSpace(code) || isWide(code)) break\n    end++\n  }\n  // No break in reach: a long token, shown as far as the pace got.\n  if (end === reach && reach < limit) return at\n  while (end < limit && isSpace(text.charCodeAt(end))) end++\n  // A surrogate pair is one character.\n  if (end < limit && isLowSurrogate(text.charCodeAt(end))) end++\n  return end\n}\n\nconst isLowSurrogate = (code: number) => code >= 0xdc00 && code <= 0xdfff\n\n/**\n * One step: how much of `text` is shown `elapsed` ms after `pace`. `settled` says no more of the\n * last word is coming (the reply ended, or has stood still for a moment).\n */\nexport function advance(\n  text: string,\n  pace: Pace,\n  elapsed: number,\n  catchUp: number,\n  settled: boolean,\n): Pace {\n  const limit = showable(text, settled)\n  if (pace.shown >= limit) return { shown: Math.min(pace.shown, text.length), speed: 0 }\n  const backlog = limit - pace.shown\n  const wanted = backlog / catchUp\n  const speed = pace.speed + (wanted - pace.speed) * Math.min(1, elapsed / EASE_MS)\n  const reached = Math.min(limit, pace.shown + Math.max(1, Math.round(speed * elapsed)))\n  let shown = wordEnd(text, reached, limit)\n  if (shown < text.length && isLowSurrogate(text.charCodeAt(shown))) shown++\n  return { shown, speed }\n}\n\nconst reducedMotion = () =>\n  typeof window !== 'undefined' &&\n  typeof window.matchMedia === 'function' &&\n  window.matchMedia('(prefers-reduced-motion: reduce)').matches\n\nconst now = () => (typeof performance === 'undefined' ? 0 : performance.now())\n\nfunction commonPrefix(a: string, b: string): number {\n  const limit = Math.min(a.length, b.length)\n  let at = 0\n  while (at < limit && a.charCodeAt(at) === b.charCodeAt(at)) at++\n  return at\n}\n\n/**\n * The pacer of one text: how much of it is shown, and the frame loop that shows more. It lives\n * outside React's state on purpose: the length belongs to the text it was counted in, and is\n * corrected in the same render that brings a new text, never a frame later.\n */\nfunction createPacer(initial: string) {\n  // Text that is there from the start (a settled reply, a remount mid-stream) is not replayed.\n  let text = initial\n  let pace: Pace = { shown: initial.length, speed: 0 }\n  let streaming = false\n  let grew = 0\n  let stepped = 0\n  let frame = 0\n\n  return {\n    /** The length of `next` to show now. */\n    take(next: string, live: boolean): number {\n      if (next !== text) {\n        // A reply that is not streaming is shown whole, whatever it was before. Otherwise, a\n        // different text, not a longer one (a regenerated reply, an edit): keep what they share.\n        const shown =\n          !live && !streaming\n            ? next.length\n            : continues(next, text, pace.shown)\n              ? pace.shown\n              : commonPrefix(text, next)\n        text = next\n        pace = { shown, speed: pace.speed }\n        grew = now()\n      }\n      streaming = live\n      if (pace.shown < text.length && reducedMotion()) pace = { shown: text.length, speed: 0 }\n      return Math.min(pace.shown, text.length)\n    },\n    /** Show the rest, a step at a time; `redraw` is called after each step that showed more. */\n    run(catchUp: number, redraw: () => void) {\n      if (frame !== 0 || pace.shown >= text.length) return\n      stepped = now()\n      const step = (time: number) => {\n        const elapsed = time - stepped\n        if (elapsed >= STEP_MS) {\n          stepped = time\n          // A reply that has stood still for a moment is not in the middle of a word.\n          const settled = !streaming || time - grew > PAUSE_MS\n          const next = advance(text, pace, elapsed, catchUp, settled)\n          const moved = next.shown !== pace.shown\n          pace = next\n          if (moved) redraw()\n        }\n        frame = pace.shown < text.length ? requestAnimationFrame(step) : 0\n      }\n      frame = requestAnimationFrame(step)\n    },\n    stop() {\n      cancelAnimationFrame(frame)\n      frame = 0\n    },\n  }\n}\n\n/**\n * `text` as it should be shown now. While `streaming`, growth is paced; when it stops, what is\n * left is shown out. The second value says whether the shown text is still behind: a caller keeps\n * its \"still arriving\" look until it is false.\n */\nexport function useSmoothText(\n  text: string,\n  streaming: boolean,\n  catchUp: number = DEFAULT_CATCH_UP_MS,\n): [shown: string, behind: boolean] {\n  const [pacer] = useState(() => createPacer(text))\n  const [, setDrawn] = useState(0)\n  const end = pacer.take(text, streaming)\n\n  // `text` and `streaming` are here to start the loop again when there is more to show.\n  // oxlint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(() => {\n    pacer.run(catchUp, () => setDrawn((count) => count + 1))\n  }, [pacer, text, streaming, catchUp])\n  useEffect(() => () => pacer.stop(), [pacer])\n\n  return [end >= text.length ? text : text.slice(0, end), end < text.length]\n}\n"],"mappings":"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"}

package/dist/react/use-stage.d.ts

@@ -0,0 +1,9 @@
+/**
+ * A stage of the pipeline that a page may load on demand: math (`@localix-ai/flowdown/math`), raw HTML
+ * (`@localix-ai/flowdown/html`). Given as the module itself (it is used at once, server rendering
+ * included), or as a loader that imports it (it is fetched the first time a document needs it).
+ */
+export type StageLoader<T> = () => Promise<T | {
+  default: T;
+}>;
+export type StageOption<T> = T | StageLoader<T> | null;

package/dist/react/use-stage.js

@@ -0,0 +1,57 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+// src/react/use-stage.ts
+/** A failed load is tried again this many times, this far apart. */
+const STAGE_RETRIES = 3;
+const STAGE_RETRY_MS = 1500;
+/** Stages already loaded on this page, by the loader that brought them. */
+const loaded = /* @__PURE__ */ new WeakMap();
+const unwrap = (module) => "default" in module ? module.default : module;
+/**
+* The stage for a document, or null while it is not there. Each `<Markdown>` calls its loader
+* once, the first time its document needs the stage, and keeps what it brought: a loader written
+* inline, a new function on every render, is not called again, and the stage does not drop out
+* while the page re-renders (on every token of a reply). The bundler fetches the module once for
+* the whole page. Until it resolves the document renders without it; a failed load is tried again
+* a few times, a second and a half apart, and after that the document stays without it (the next
+* document to mount asks again).
+*/
+function useStage(option, needed, { retries = STAGE_RETRIES, retryMs = STAGE_RETRY_MS } = {}) {
+	const lazy = typeof option === "function" ? option : null;
+	const latest = useRef(lazy);
+	useEffect(() => {
+		latest.current = lazy;
+	});
+	const [stage, setStage] = useState(() => lazy ? loaded.get(lazy) ?? null : null);
+	const [failures, setFailures] = useState(0);
+	const isLazy = lazy !== null;
+	useEffect(() => {
+		const load = latest.current;
+		if (!isLazy || !needed || stage || !load || failures > retries) return;
+		let current = true;
+		let retry;
+		load().then((module) => {
+			const value = unwrap(module);
+			loaded.set(load, value);
+			if (current) setStage(value);
+		}, () => {
+			if (current) retry = setTimeout(() => setFailures((count) => count + 1), retryMs);
+		});
+		return () => {
+			current = false;
+			clearTimeout(retry);
+		};
+	}, [
+		isLazy,
+		needed,
+		stage,
+		failures,
+		retries,
+		retryMs
+	]);
+	if (!option || !needed) return null;
+	return lazy ? stage : option;
+}
+export { useStage };
+
+//# sourceMappingURL=use-stage.js.map

package/dist/react/use-stage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-stage.js","names":[],"sources":["../../src/react/use-stage.ts"],"sourcesContent":["'use client'\nimport { useEffect, useRef, useState } from 'react'\n\n/**\n * A stage of the pipeline that a page may load on demand: math (`@localix-ai/flowdown/math`), raw HTML\n * (`@localix-ai/flowdown/html`). Given as the module itself (it is used at once, server rendering\n * included), or as a loader that imports it (it is fetched the first time a document needs it).\n */\nexport type StageLoader<T> = () => Promise<T | { default: T }>\nexport type StageOption<T> = T | StageLoader<T> | null\n\n/** A failed load is tried again this many times, this far apart. */\nconst STAGE_RETRIES = 3\nconst STAGE_RETRY_MS = 1_500\n\n/** Stages already loaded on this page, by the loader that brought them. */\nconst loaded = new WeakMap<StageLoader<object>, object>()\n\nconst unwrap = <T extends object>(module: T | { default: T }): T =>\n  'default' in module ? module.default : module\n\n/**\n * The stage for a document, or null while it is not there. Each `<Markdown>` calls its loader\n * once, the first time its document needs the stage, and keeps what it brought: a loader written\n * inline, a new function on every render, is not called again, and the stage does not drop out\n * while the page re-renders (on every token of a reply). The bundler fetches the module once for\n * the whole page. Until it resolves the document renders without it; a failed load is tried again\n * a few times, a second and a half apart, and after that the document stays without it (the next\n * document to mount asks again).\n */\nexport function useStage<T extends object>(\n  option: StageOption<T>,\n  needed: boolean,\n  {\n    retries = STAGE_RETRIES,\n    retryMs = STAGE_RETRY_MS,\n  }: { retries?: number; retryMs?: number } = {},\n): T | null {\n  const lazy = typeof option === 'function' ? (option as StageLoader<T>) : null\n  const latest = useRef(lazy)\n  useEffect(() => {\n    latest.current = lazy\n  })\n  // A stage another document on the page already loaded is there from the first render.\n  const [stage, setStage] = useState<T | null>(() =>\n    lazy ? ((loaded.get(lazy) as T | undefined) ?? null) : null,\n  )\n  // Each failed load counts here, and a new count asks again: a chunk that failed to come over a\n  // bad connection is there a moment later, and the reader should not have to reload the page.\n  const [failures, setFailures] = useState(0)\n  const isLazy = lazy !== null\n  useEffect(() => {\n    const load = latest.current\n    if (!isLazy || !needed || stage || !load || failures > retries) return\n    let current = true\n    let retry: ReturnType<typeof setTimeout> | undefined\n    load().then(\n      (module) => {\n        const value = unwrap(module)\n        loaded.set(load, value)\n        if (current) setStage(value)\n      },\n      () => {\n        // The document stays readable without the stage meanwhile, and after the last try.\n        if (current) retry = setTimeout(() => setFailures((count) => count + 1), retryMs)\n      },\n    )\n    return () => {\n      current = false\n      clearTimeout(retry)\n    }\n  }, [isLazy, needed, stage, failures, retries, retryMs])\n  if (!option || !needed) return null\n  return lazy ? stage : (option as T)\n}\n"],"mappings":";;;;AAYA,MAAM,gBAAgB;AACtB,MAAM,iBAAiB;;AAGvB,MAAM,yBAAS,IAAI,QAAqC;AAExD,MAAM,UAA4B,WAChC,aAAa,SAAS,OAAO,UAAU;;;;;;;;;;AAWzC,SAAgB,SACd,QACA,QACA,EACE,UAAU,eACV,UAAU,mBACgC,CAAC,GACnC;CACV,MAAM,OAAO,OAAO,WAAW,aAAc,SAA4B;CACzE,MAAM,SAAS,OAAO,IAAI;CAC1B,gBAAgB;EACd,OAAO,UAAU;CACnB,CAAC;CAED,MAAM,CAAC,OAAO,YAAY,eACxB,OAAS,OAAO,IAAI,IAAI,KAAuB,OAAQ,IACzD;CAGA,MAAM,CAAC,UAAU,eAAe,SAAS,CAAC;CAC1C,MAAM,SAAS,SAAS;CACxB,gBAAgB;EACd,MAAM,OAAO,OAAO;EACpB,IAAI,CAAC,UAAU,CAAC,UAAU,SAAS,CAAC,QAAQ,WAAW,SAAS;EAChE,IAAI,UAAU;EACd,IAAI;EACJ,KAAK,CAAC,CAAC,MACJ,WAAW;GACV,MAAM,QAAQ,OAAO,MAAM;GAC3B,OAAO,IAAI,MAAM,KAAK;GACtB,IAAI,SAAS,SAAS,KAAK;EAC7B,SACM;GAEJ,IAAI,SAAS,QAAQ,iBAAiB,aAAa,UAAU,QAAQ,CAAC,GAAG,OAAO;EAClF,CACF;EACA,aAAa;GACX,UAAU;GACV,aAAa,KAAK;EACpB;CACF,GAAG;EAAC;EAAQ;EAAQ;EAAO;EAAU;EAAS;CAAO,CAAC;CACtD,IAAI,CAAC,UAAU,CAAC,QAAQ,OAAO;CAC/B,OAAO,OAAO,QAAS;AACzB"}

package/dist/remark.d.ts

@@ -0,0 +1,20 @@
+/**
+ * `@localix-ai/flowdown/remark`: the dialect as a remark plugin, without React or the engine's renderer.
+ *
+ * For a unified pipeline of your own: a static site build, a renderer that is not React. The
+ * dialect becomes ordinary HTML with `fd-` classes and data attributes, which `styles.css` draws;
+ * `answer-tabs` / `answer-tab` elements hold the variants of a `[!TABS]` form, for your own tab
+ * component. GitHub's syntax is `remark-gfm`'s to read, before this plugin:
+ *
+ *     unified().use(remarkParse).use(remarkGfm).use(remarkFlowdown).use(remarkRehype).use(rehypeStringify)
+ */
+import { remarkAnswerBlocks } from "./core/remark-answer-blocks.js";
+import { sanitizeSchemaFor } from "./core/sanitize-schema.js";
+import { MarkdownHeading, extractMarkdownHeadings, headingIdsByOffset, remarkHeadingIds } from "./core/headings.js";
+import { BlockSplitter, MarkdownBlock, createBlockSplitter, splitBlocks } from "./core/blocks.js";
+import { escapeLiteralDollars, isLiteralDollar } from "./core/dollars.js";
+import { hasHtmlSyntax, hasMathSyntax } from "./core/syntax.js";
+import { markdownProseWithoutCode } from "./core/prose.js";
+import { TreeRow, parseFileTree } from "./core/file-tree-parse.js";
+import { ANSWER_FORM_EXAMPLES, ATTRIBUTION_PREFIX, CALLOUT_KINDS, CONTAINER_KINDS, CalloutKind, CalloutMarker, ContainerKind, ContainerMarker, DIAGRAM_FENCE_LANGUAGE, DIAGRAM_KINDS, TREE_FENCE_LANGUAGE, containerMarker, fenceTitle, parseCalloutMarker, parseContainerMarker } from "./dialect.js";
+export { ANSWER_FORM_EXAMPLES, ATTRIBUTION_PREFIX, type BlockSplitter, CALLOUT_KINDS, CONTAINER_KINDS, CalloutKind, CalloutMarker, ContainerKind, ContainerMarker, DIAGRAM_FENCE_LANGUAGE, DIAGRAM_KINDS, type MarkdownBlock, type MarkdownHeading, TREE_FENCE_LANGUAGE, type TreeRow, containerMarker, createBlockSplitter, escapeLiteralDollars, extractMarkdownHeadings as extractHeadings, fenceTitle, hasHtmlSyntax, hasMathSyntax, headingIdsByOffset, isLiteralDollar, markdownProseWithoutCode, parseCalloutMarker, parseContainerMarker, parseFileTree, remarkAnswerBlocks, remarkAnswerBlocks as remarkFlowdown, remarkHeadingIds, sanitizeSchemaFor, splitBlocks };

package/dist/remark.js

@@ -0,0 +1,10 @@
+import { remarkAnswerBlocks } from "./core/remark-answer-blocks.js";
+import { sanitizeSchemaFor } from "./core/sanitize-schema.js";
+import { extractMarkdownHeadings, headingIdsByOffset, remarkHeadingIds } from "./core/headings.js";
+import { createBlockSplitter, splitBlocks } from "./core/blocks.js";
+import { escapeLiteralDollars, isLiteralDollar } from "./core/dollars.js";
+import { hasHtmlSyntax, hasMathSyntax } from "./core/syntax.js";
+import { markdownProseWithoutCode } from "./core/prose.js";
+import { parseFileTree } from "./core/file-tree-parse.js";
+import { ANSWER_FORM_EXAMPLES, ATTRIBUTION_PREFIX, CALLOUT_KINDS, CONTAINER_KINDS, DIAGRAM_FENCE_LANGUAGE, DIAGRAM_KINDS, TREE_FENCE_LANGUAGE, containerMarker, fenceTitle, parseCalloutMarker, parseContainerMarker } from "./dialect.js";
+export { ANSWER_FORM_EXAMPLES, ATTRIBUTION_PREFIX, CALLOUT_KINDS, CONTAINER_KINDS, DIAGRAM_FENCE_LANGUAGE, DIAGRAM_KINDS, TREE_FENCE_LANGUAGE, containerMarker, createBlockSplitter, escapeLiteralDollars, extractMarkdownHeadings as extractHeadings, fenceTitle, hasHtmlSyntax, hasMathSyntax, headingIdsByOffset, isLiteralDollar, markdownProseWithoutCode, parseCalloutMarker, parseContainerMarker, parseFileTree, remarkAnswerBlocks, remarkAnswerBlocks as remarkFlowdown, remarkHeadingIds, sanitizeSchemaFor, splitBlocks };

package/dist/render/factory.d.ts

@@ -0,0 +1,15 @@
+/**
+ * What a renderer for HTML is written against, so that it is written once.
+ *
+ * Everything that decides what a document looks like as elements (which tag a node becomes, what a
+ * callout or a code block is made of) is a function of a {@link Factory}: it asks for elements and
+ * never says what an element is. React answers with its own, a server with text, the DOM with
+ * nodes. A new framework is a factory of a few lines, and draws every document as the others do.
+ */
+/**
+ * An element's properties, by the names the DOM gives them (`className`, `tabIndex`, `colSpan`),
+ * as React takes them and hast writes them; `data-*` and `aria-*` as they are written. `style` is
+ * an object. `innerHTML` is markup already made and escaped (highlighted code, a typeset formula).
+ * A function is a listener (`onClick`): a target that cannot listen leaves it out.
+ */
+export type Props = Record<string, unknown>;