@localix-ai/flowdown 0.0.0-stage → 0.5.1

package/dist/math/index.js

@@ -0,0 +1,20 @@
+import { MATH_INLINE, eachFormula } from "../core/math-syntax.js";
+import { typesetMath } from "./typeset.js";
+// src/math/index.ts
+/** The math stage: what `<Markdown math>` takes. */
+const math = {
+	name: "math",
+	mathFences: true,
+	inline: MATH_INLINE,
+	transform(root) {
+		eachFormula(root, (node, display) => {
+			node.data = {
+				...node.data,
+				...typesetMath(node.value ?? "", display)
+			};
+		});
+	}
+};
+export { math as default, math, typesetMath };
+
+//# sourceMappingURL=index.js.map

package/dist/math/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/math/index.ts"],"sourcesContent":["/**\n * `@localix-ai/flowdown/math`: `$…$`, `$$…$$` and a ```` ```math ```` fence typeset with KaTeX.\n *\n * Its own entry so that only a page that imports it bundles KaTeX (a quarter of a megabyte). Pass\n * it to `<Markdown math={…}>` directly, or as a loader so it is fetched the first time a document\n * holds a formula:\n *\n *     <Markdown math={() => import('@localix-ai/flowdown/math')}>\n *\n * KaTeX's stylesheet is the page's to add (`import 'katex/dist/katex.min.css'`): a bundler-only\n * CSS import inside a library breaks the hosts that do not run one.\n */\nimport type { Extension } from '../engine/types'\nimport { eachFormula, MATH_INLINE } from '../core/math-syntax'\nimport { typesetMath } from './typeset'\n\nexport { typesetMath, type Typeset } from './typeset'\n\n/** The math stage: what `<Markdown math>` takes. */\nexport const math: Extension = {\n  name: 'math',\n  mathFences: true,\n  inline: MATH_INLINE,\n  transform(root) {\n    eachFormula(root, (node, display) => {\n      node.data = { ...node.data, ...typesetMath(node.value ?? '', display) }\n    })\n  },\n}\n\nexport default math\n"],"mappings":";;;;AAmBA,MAAa,OAAkB;CAC7B,MAAM;CACN,YAAY;CACZ,QAAQ;CACR,UAAU,MAAM;EACd,YAAY,OAAO,MAAM,YAAY;GACnC,KAAK,OAAO;IAAE,GAAG,KAAK;IAAM,GAAG,YAAY,KAAK,SAAS,IAAI,OAAO;GAAE;EACxE,CAAC;CACH;AACF"}

package/dist/math/typeset.d.ts

@@ -0,0 +1,12 @@
+/** What the renderer draws a formula from: the element KaTeX wraps it in, and the HTML inside. */
+export interface Typeset {
+  hName: 'span';
+  hProperties: {
+    className: string;
+    innerHTML: string;
+    title?: string;
+    style?: Record<string, string>;
+  };
+}
+/** One expression typeset: from the cache when it was set before. */
+export declare function typesetMath(source: string, displayMode: boolean): Typeset;

package/dist/math/typeset.js

@@ -0,0 +1,74 @@
+import { createBoundedCache } from "../core/bounded-cache.js";
+import katex from "katex";
+// src/math/typeset.ts
+const cache = createBoundedCache({
+	maxEntries: 1e3,
+	maxWeight: 6e6,
+	weigh: (entry, key) => entry.hProperties.innerHTML.length + key.length
+});
+function renderMath(source, displayMode) {
+	try {
+		return katex.renderToString(source, {
+			displayMode,
+			throwOnError: true
+		});
+	} catch {
+		return katex.renderToString(source, {
+			displayMode,
+			throwOnError: false,
+			strict: "ignore"
+		});
+	}
+}
+const UNESCAPES = {
+	"&": "&",
+	"&lt;": "<",
+	"&gt;": ">",
+	"&quot;": "\"",
+	"&#x27;": "'"
+};
+const unescape = (text) => text.replace(/&(?:amp|lt|gt|quot|#x27);/g, (entity) => UNESCAPES[entity]);
+/** KaTeX answers with one `<span>`: its attributes go on the element, its inside is the HTML. */
+const OUTER = /^<span((?: [a-z-]+="[^"]*")*)>([\s\S]*)<\/span>$/;
+function split(html) {
+	const outer = OUTER.exec(html);
+	if (!outer) return {
+		hName: "span",
+		hProperties: {
+			className: "katex",
+			innerHTML: html
+		}
+	};
+	const properties = {
+		className: "",
+		innerHTML: outer[2]
+	};
+	for (const [, name, value] of outer[1].matchAll(/ ([a-z-]+)="([^"]*)"/g)) if (name === "class") properties.className = value;
+	else if (name === "title") properties.title = unescape(value);
+	else if (name === "style") {
+		const style = {};
+		for (const rule of unescape(value).split(";")) {
+			const colon = rule.indexOf(":");
+			if (colon === -1) continue;
+			const property = rule.slice(0, colon).trim().replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+			style[property] = rule.slice(colon + 1).trim();
+		}
+		properties.style = style;
+	}
+	return {
+		hName: "span",
+		hProperties: properties
+	};
+}
+/** One expression typeset: from the cache when it was set before. */
+function typesetMath(source, displayMode) {
+	const key = `${displayMode ? "display" : "inline"}\0${source}`;
+	const hit = cache.get(key);
+	if (hit) return hit;
+	const typeset = split(renderMath(source, displayMode));
+	cache.set(key, typeset);
+	return typeset;
+}
+export { typesetMath };
+
+//# sourceMappingURL=typeset.js.map

package/dist/math/typeset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typeset.js","names":[],"sources":["../../src/math/typeset.ts"],"sourcesContent":["// A formula typeset by KaTeX, remembered by its source.\n//\n// A streaming reply is read again on every token, and typesetting is the expensive part of a\n// formula: thirty of them cost about 12 ms a pass against half a millisecond for the rest of the\n// Markdown. A finished formula never changes, so what KaTeX made of it is kept and reused: only\n// an expression not seen before pays KaTeX.\nimport katex from 'katex'\nimport { createBoundedCache } from '../core/bounded-cache'\n\n/** What the renderer draws a formula from: the element KaTeX wraps it in, and the HTML inside. */\nexport interface Typeset {\n  hName: 'span'\n  hProperties: {\n    className: string\n    innerHTML: string\n    title?: string\n    style?: Record<string, string>\n  }\n}\n\nconst cache = createBoundedCache<string, Typeset>({\n  maxEntries: 1_000,\n  // Characters of KaTeX HTML: a formula is a few KB, so this holds a long math-heavy session.\n  maxWeight: 6_000_000,\n  weigh: (entry, key) => entry.hProperties.innerHTML.length + key.length,\n})\n\nfunction renderMath(source: string, displayMode: boolean): string {\n  try {\n    return katex.renderToString(source, { displayMode, throwOnError: true })\n  } catch {\n    // KaTeX's own fallback: the source, marked as an error, instead of a thrown render.\n    return katex.renderToString(source, { displayMode, throwOnError: false, strict: 'ignore' })\n  }\n}\n\nconst UNESCAPES: Record<string, string> = {\n  '&amp;': '&',\n  '&lt;': '<',\n  '&gt;': '>',\n  '&quot;': '\"',\n  '&#x27;': \"'\",\n}\nconst unescape = (text: string): string =>\n  text.replace(/&(?:amp|lt|gt|quot|#x27);/g, (entity) => UNESCAPES[entity] as string)\n\n/** KaTeX answers with one `<span>`: its attributes go on the element, its inside is the HTML. */\nconst OUTER = /^<span((?: [a-z-]+=\"[^\"]*\")*)>([\\s\\S]*)<\\/span>$/\n\nfunction split(html: string): Typeset {\n  const outer = OUTER.exec(html)\n  if (!outer) return { hName: 'span', hProperties: { className: 'katex', innerHTML: html } }\n  const properties: Typeset['hProperties'] = { className: '', innerHTML: outer[2] as string }\n  for (const [, name, value] of (outer[1] as string).matchAll(/ ([a-z-]+)=\"([^\"]*)\"/g)) {\n    if (name === 'class') properties.className = value as string\n    else if (name === 'title') properties.title = unescape(value as string)\n    else if (name === 'style') {\n      const style: Record<string, string> = {}\n      for (const rule of unescape(value as string).split(';')) {\n        const colon = rule.indexOf(':')\n        if (colon === -1) continue\n        const property = rule\n          .slice(0, colon)\n          .trim()\n          .replace(/-([a-z])/g, (_, letter: string) => letter.toUpperCase())\n        style[property] = rule.slice(colon + 1).trim()\n      }\n      properties.style = style\n    }\n  }\n  return { hName: 'span', hProperties: properties }\n}\n\n/** One expression typeset: from the cache when it was set before. */\nexport function typesetMath(source: string, displayMode: boolean): Typeset {\n  const key = `${displayMode ? 'display' : 'inline'}\\0${source}`\n  const hit = cache.get(key)\n  if (hit) return hit\n  const typeset = split(renderMath(source, displayMode))\n  cache.set(key, typeset)\n  return typeset\n}\n"],"mappings":";;;AAoBA,MAAM,QAAQ,mBAAoC;CAChD,YAAY;CAEZ,WAAW;CACX,QAAQ,OAAO,QAAQ,MAAM,YAAY,UAAU,SAAS,IAAI;AAClE,CAAC;AAED,SAAS,WAAW,QAAgB,aAA8B;CAChE,IAAI;EACF,OAAO,MAAM,eAAe,QAAQ;GAAE;GAAa,cAAc;EAAK,CAAC;CACzE,QAAQ;EAEN,OAAO,MAAM,eAAe,QAAQ;GAAE;GAAa,cAAc;GAAO,QAAQ;EAAS,CAAC;CAC5F;AACF;AAEA,MAAM,YAAoC;CACxC,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,UAAU;CACV,UAAU;AACZ;AACA,MAAM,YAAY,SAChB,KAAK,QAAQ,+BAA+B,WAAW,UAAU,OAAiB;;AAGpF,MAAM,QAAQ;AAEd,SAAS,MAAM,MAAuB;CACpC,MAAM,QAAQ,MAAM,KAAK,IAAI;CAC7B,IAAI,CAAC,OAAO,OAAO;EAAE,OAAO;EAAQ,aAAa;GAAE,WAAW;GAAS,WAAW;EAAK;CAAE;CACzF,MAAM,aAAqC;EAAE,WAAW;EAAI,WAAW,MAAM;CAAa;CAC1F,KAAK,MAAM,GAAG,MAAM,UAAW,MAAM,EAAE,CAAY,SAAS,uBAAuB,GACjF,IAAI,SAAS,SAAS,WAAW,YAAY;MACxC,IAAI,SAAS,SAAS,WAAW,QAAQ,SAAS,KAAe;MACjE,IAAI,SAAS,SAAS;EACzB,MAAM,QAAgC,CAAC;EACvC,KAAK,MAAM,QAAQ,SAAS,KAAe,CAAC,CAAC,MAAM,GAAG,GAAG;GACvD,MAAM,QAAQ,KAAK,QAAQ,GAAG;GAC9B,IAAI,UAAU,IAAI;GAClB,MAAM,WAAW,KACd,MAAM,GAAG,KAAK,CAAC,CACf,KAAK,CAAC,CACN,QAAQ,cAAc,GAAG,WAAmB,OAAO,YAAY,CAAC;GACnE,MAAM,YAAY,KAAK,MAAM,QAAQ,CAAC,CAAC,CAAC,KAAK;EAC/C;EACA,WAAW,QAAQ;CACrB;CAEF,OAAO;EAAE,OAAO;EAAQ,aAAa;CAAW;AAClD;;AAGA,SAAgB,YAAY,QAAgB,aAA+B;CACzE,MAAM,MAAM,GAAG,cAAc,YAAY,SAAS,IAAI;CACtD,MAAM,MAAM,MAAM,IAAI,GAAG;CACzB,IAAI,KAAK,OAAO;CAChB,MAAM,UAAU,MAAM,WAAW,QAAQ,WAAW,CAAC;CACrD,MAAM,IAAI,KAAK,OAAO;CACtB,OAAO;AACT"}

package/dist/mermaid/diagram.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A ```mermaid fence. Drawn when the page gave `<Markdown>` a Mermaid loader, in the colours of the
+ * Markdown around it; until then, without one, while its fence is still being written, or when the
+ * source does not parse, it is shown as the source it is, with a line saying why.
+ */
+export declare function Diagram({ source }: {
+  source: string;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | Iterable<import("react").ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;

package/dist/mermaid/diagram.js

@@ -0,0 +1,114 @@
+"use client";
+import { GrowingFence, useRenderContext } from "../react/context.js";
+import { useLabels } from "../react/labels.js";
+import { react } from "../react/render.js";
+import { diagramSource } from "../render/views.js";
+import { loadMermaid } from "./loader.js";
+import { useContext, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/mermaid/diagram.tsx
+let drawing = null;
+const loadDrawing = () => import("./drawing.js").then((module) => {
+	drawing = module;
+	return module;
+});
+/**
+* A counter that moves whenever the page may have changed its colours: the system scheme, or a
+* theme class or attribute on the root element. A diagram is drawn in resolved colours (`look.ts`),
+* so it has to be drawn again when they change; the renderer's cache makes a redraw in a look it
+* has seen free.
+*/
+let schemeVersion = 0;
+function subscribeScheme(notify) {
+	const bump = () => {
+		schemeVersion += 1;
+		notify();
+	};
+	const media = window.matchMedia?.("(prefers-color-scheme: dark)");
+	media?.addEventListener("change", bump);
+	const observer = new MutationObserver(bump);
+	observer.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: [
+			"class",
+			"data-theme",
+			"style"
+		]
+	});
+	return () => {
+		media?.removeEventListener("change", bump);
+		observer.disconnect();
+	};
+}
+const useSchemeVersion = () => useSyncExternalStore(subscribeScheme, () => schemeVersion, () => 0);
+/**
+* A ```mermaid fence. Drawn when the page gave `<Markdown>` a Mermaid loader, in the colours of the
+* Markdown around it; until then, without one, while its fence is still being written, or when the
+* source does not parse, it is shown as the source it is, with a line saying why.
+*/
+function Diagram({ source }) {
+	const labels = useLabels();
+	const { mermaid } = useRenderContext();
+	const growing = useContext(GrowingFence);
+	const scheme = useSchemeVersion();
+	const figure = useRef(null);
+	const [state, setState] = useState(null);
+	useEffect(() => {
+		const root = figure.current;
+		if (!mermaid || growing || !root) return;
+		const controller = new AbortController();
+		const failed = (error) => {
+			if (controller.signal.aborted) return;
+			const reason = error instanceof Error ? error.message : String(error);
+			setState({
+				source,
+				error: reason.split("\n")[0] || reason
+			});
+		};
+		const draw = ({ resolveMermaidLook, pageMermaidRenderer }) => {
+			if (controller.signal.aborted) return;
+			const renderer = mermaid === "page" ? pageMermaidRenderer() : mermaid;
+			const look = resolveMermaidLook(root);
+			const ready = renderer.peek(source, look);
+			if (ready) {
+				setState({
+					source,
+					svg: ready
+				});
+				return;
+			}
+			renderer.render(source, look, controller.signal).then((svg) => {
+				if (!controller.signal.aborted) setState({
+					source,
+					svg
+				});
+			}, failed);
+		};
+		if (drawing) draw(drawing);
+		else {
+			if (mermaid === "page") loadMermaid().catch(() => {});
+			loadDrawing().then(draw, failed);
+		}
+		return () => controller.abort();
+	}, [
+		mermaid,
+		growing,
+		source,
+		scheme
+	]);
+	const drawn = state?.source === source ? state : null;
+	if (drawn?.svg && drawing) {
+		const { DrawnDiagram } = drawing;
+		return /* @__PURE__ */ jsx(DrawnDiagram, {
+			figure,
+			svg: drawn.svg,
+			source,
+			toolbar: !growing
+		});
+	}
+	const note = drawn?.error ? labels.diagramFailed(drawn.error) : mermaid ? labels.drawingDiagram : null;
+	return diagramSource(react, source, note, Boolean(drawn?.error), { ref: figure });
+}
+export { Diagram };
+
+//# sourceMappingURL=diagram.js.map

package/dist/mermaid/diagram.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diagram.js","names":[],"sources":["../../src/mermaid/diagram.tsx"],"sourcesContent":["'use client'\nimport { useContext, useEffect, useRef, useState, useSyncExternalStore } from 'react'\nimport { GrowingFence, useRenderContext } from '../react/context'\nimport { useLabels } from '../react/labels'\nimport { react } from '../react/render'\nimport { diagramSource } from '../render/views'\nimport type * as DrawingModule from './drawing'\nimport { loadMermaid } from './loader'\n\n/**\n * What draws a diagram (its toolbar, its colours, the renderer) is a chunk of its own: a reply\n * with no diagram, or a page that gave no Mermaid loader, never loads it. Once here it is used at\n * once, so a diagram drawn before (a row scrolled back into a virtualized chat) does not flash.\n */\ntype Drawing = typeof DrawingModule\nlet drawing: Drawing | null = null\nconst loadDrawing = () =>\n  import('./drawing').then((module) => {\n    drawing = module\n    return module\n  })\n\n/**\n * A counter that moves whenever the page may have changed its colours: the system scheme, or a\n * theme class or attribute on the root element. A diagram is drawn in resolved colours (`look.ts`),\n * so it has to be drawn again when they change; the renderer's cache makes a redraw in a look it\n * has seen free.\n */\nlet schemeVersion = 0\nfunction subscribeScheme(notify: () => void) {\n  const bump = () => {\n    schemeVersion += 1\n    notify()\n  }\n  const media = window.matchMedia?.('(prefers-color-scheme: dark)')\n  media?.addEventListener('change', bump)\n  const observer = new MutationObserver(bump)\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['class', 'data-theme', 'style'],\n  })\n  return () => {\n    media?.removeEventListener('change', bump)\n    observer.disconnect()\n  }\n}\nconst useSchemeVersion = () =>\n  useSyncExternalStore(\n    subscribeScheme,\n    () => schemeVersion,\n    () => 0,\n  )\n\ntype DrawState = { source: string; svg?: string; error?: string }\n\n/**\n * A ```mermaid fence. Drawn when the page gave `<Markdown>` a Mermaid loader, in the colours of the\n * Markdown around it; until then, without one, while its fence is still being written, or when the\n * source does not parse, it is shown as the source it is, with a line saying why.\n */\nexport function Diagram({ source }: { source: string }) {\n  const labels = useLabels()\n  const { mermaid } = useRenderContext()\n  const growing = useContext(GrowingFence)\n  const scheme = useSchemeVersion()\n  const figure = useRef<HTMLElement>(null)\n  const [state, setState] = useState<DrawState | null>(null)\n\n  useEffect(() => {\n    const root = figure.current\n    if (!mermaid || growing || !root) return\n    const controller = new AbortController()\n    const failed = (error: unknown) => {\n      if (controller.signal.aborted) return\n      const reason = error instanceof Error ? error.message : String(error)\n      setState({ source, error: reason.split('\\n')[0] || reason })\n    }\n    const draw = ({ resolveMermaidLook, pageMermaidRenderer }: Drawing) => {\n      if (controller.signal.aborted) return\n      const renderer = mermaid === 'page' ? pageMermaidRenderer() : mermaid\n      const look = resolveMermaidLook(root)\n      const ready = renderer.peek(source, look)\n      if (ready) {\n        setState({ source, svg: ready })\n        return\n      }\n      renderer.render(source, look, controller.signal).then((svg) => {\n        if (!controller.signal.aborted) setState({ source, svg })\n      }, failed)\n    }\n    if (drawing) draw(drawing)\n    else {\n      // The engine is the long fetch: it starts now, beside the chunk that will ask for it.\n      if (mermaid === 'page') loadMermaid().catch(() => {})\n      loadDrawing().then(draw, failed)\n    }\n    return () => controller.abort()\n    // `scheme` is not read here: it changes when the page's colours do, and the diagram is drawn\n    // again in the new ones.\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [mermaid, growing, source, scheme])\n\n  const drawn = state?.source === source ? state : null\n  if (drawn?.svg && drawing) {\n    const { DrawnDiagram } = drawing\n    return <DrawnDiagram figure={figure} svg={drawn.svg} source={source} toolbar={!growing} />\n  }\n  const note = drawn?.error\n    ? labels.diagramFailed(drawn.error)\n    : mermaid\n      ? labels.drawingDiagram\n      : null\n  return diagramSource(react, source, note, Boolean(drawn?.error), { ref: figure })\n}\n"],"mappings":";;;;;;;;;AAeA,IAAI,UAA0B;AAC9B,MAAM,oBACJ,OAAO,eAAY,CAAC,MAAM,WAAW;CACnC,UAAU;CACV,OAAO;AACT,CAAC;;;;;;;AAQH,IAAI,gBAAgB;AACpB,SAAS,gBAAgB,QAAoB;CAC3C,MAAM,aAAa;EACjB,iBAAiB;EACjB,OAAO;CACT;CACA,MAAM,QAAQ,OAAO,aAAa,8BAA8B;CAChE,OAAO,iBAAiB,UAAU,IAAI;CACtC,MAAM,WAAW,IAAI,iBAAiB,IAAI;CAC1C,SAAS,QAAQ,SAAS,iBAAiB;EACzC,YAAY;EACZ,iBAAiB;GAAC;GAAS;GAAc;EAAO;CAClD,CAAC;CACD,aAAa;EACX,OAAO,oBAAoB,UAAU,IAAI;EACzC,SAAS,WAAW;CACtB;AACF;AACA,MAAM,yBACJ,qBACE,uBACM,qBACA,CACR;;;;;;AASF,SAAgB,QAAQ,EAAE,UAA8B;CACtD,MAAM,SAAS,UAAU;CACzB,MAAM,EAAE,YAAY,iBAAiB;CACrC,MAAM,UAAU,WAAW,YAAY;CACvC,MAAM,SAAS,iBAAiB;CAChC,MAAM,SAAS,OAAoB,IAAI;CACvC,MAAM,CAAC,OAAO,YAAY,SAA2B,IAAI;CAEzD,gBAAgB;EACd,MAAM,OAAO,OAAO;EACpB,IAAI,CAAC,WAAW,WAAW,CAAC,MAAM;EAClC,MAAM,aAAa,IAAI,gBAAgB;EACvC,MAAM,UAAU,UAAmB;GACjC,IAAI,WAAW,OAAO,SAAS;GAC/B,MAAM,SAAS,iBAAiB,QAAQ,MAAM,UAAU,OAAO,KAAK;GACpE,SAAS;IAAE;IAAQ,OAAO,OAAO,MAAM,IAAI,CAAC,CAAC,MAAM;GAAO,CAAC;EAC7D;EACA,MAAM,QAAQ,EAAE,oBAAoB,0BAAmC;GACrE,IAAI,WAAW,OAAO,SAAS;GAC/B,MAAM,WAAW,YAAY,SAAS,oBAAoB,IAAI;GAC9D,MAAM,OAAO,mBAAmB,IAAI;GACpC,MAAM,QAAQ,SAAS,KAAK,QAAQ,IAAI;GACxC,IAAI,OAAO;IACT,SAAS;KAAE;KAAQ,KAAK;IAAM,CAAC;IAC/B;GACF;GACA,SAAS,OAAO,QAAQ,MAAM,WAAW,MAAM,CAAC,CAAC,MAAM,QAAQ;IAC7D,IAAI,CAAC,WAAW,OAAO,SAAS,SAAS;KAAE;KAAQ;IAAI,CAAC;GAC1D,GAAG,MAAM;EACX;EACA,IAAI,SAAS,KAAK,OAAO;OACpB;GAEH,IAAI,YAAY,QAAQ,YAAY,CAAC,CAAC,YAAY,CAAC,CAAC;GACpD,YAAY,CAAC,CAAC,KAAK,MAAM,MAAM;EACjC;EACA,aAAa,WAAW,MAAM;CAIhC,GAAG;EAAC;EAAS;EAAS;EAAQ;CAAM,CAAC;CAErC,MAAM,QAAQ,OAAO,WAAW,SAAS,QAAQ;CACjD,IAAI,OAAO,OAAO,SAAS;EACzB,MAAM,EAAE,iBAAiB;EACzB,OAAO,oBAAC,cAAD;GAAsB;GAAQ,KAAK,MAAM;GAAa;GAAQ,SAAS,CAAC;EAAU,CAAA;CAC3F;CACA,MAAM,OAAO,OAAO,QAChB,OAAO,cAAc,MAAM,KAAK,IAChC,UACE,OAAO,iBACP;CACN,OAAO,cAAc,OAAO,QAAQ,MAAM,QAAQ,OAAO,KAAK,GAAG,EAAE,KAAK,OAAO,CAAC;AAClF"}

package/dist/mermaid/drawing.js

@@ -0,0 +1,139 @@
+"use client";
+import { copyText, downloadFile } from "../browser/file-actions.js";
+import { CheckIcon, CopyIcon, DownloadIcon } from "../react/icons.js";
+import { useLabels } from "../react/labels.js";
+import { DiagramIcon, EnlargeIcon, SourceIcon } from "./icons.js";
+import { resolveMermaidLook } from "./look.js";
+import { pageMermaidRenderer } from "./renderer.js";
+import { Suspense, lazy, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/mermaid/drawing.tsx
+/**
+* The drawn half of a diagram: its toolbar, the colours it is drawn in and the page's renderer.
+* A chunk of its own, fetched with the Mermaid engine the first time a page draws a diagram: a
+* page whose replies hold none never loads it.
+*/
+/**
+* The enlarged viewer is its own chunk: most diagrams are never enlarged, so its pan and zoom
+* load on the first Enlarge (or when the pointer reaches the button), not with the renderer.
+*/
+const loadViewer = () => import("./viewer.js");
+const DiagramViewer = lazy(() => loadViewer().then((module) => ({ default: module.DiagramViewer })));
+/**
+* The drawn `<svg>` as a standalone file: serialized from the page, so it is what the reader sees.
+* The page sizes it by CSS; the file gets its own size from its `viewBox`.
+*/
+function serializeSvg(svg) {
+	const copy = svg.cloneNode(true);
+	const box = copy.getAttribute("viewBox")?.trim().split(/[\s,]+/).map(Number);
+	if (box && box.length === 4 && box.every(Number.isFinite)) {
+		copy.setAttribute("width", String(box[2]));
+		copy.setAttribute("height", String(box[3]));
+		copy.style.removeProperty("max-width");
+	}
+	const text = new XMLSerializer().serializeToString(copy);
+	return text.includes("xmlns=") ? text : text.replace("<svg", "<svg xmlns=\"http://www.w3.org/2000/svg\"");
+}
+/** How long "Copied" stays before the button reads "Copy source" again. */
+const COPIED_MS = 1600;
+/**
+* A drawn diagram and its toolbar: enlarge it, swap it for its source and back, copy the source,
+* save the picture. The toolbar shows on hover and on focus, and always under a finger.
+*/
+function DrawnDiagram({ figure, svg, source, toolbar }) {
+	const labels = useLabels();
+	const canvas = useRef(null);
+	const enlargeButton = useRef(null);
+	const [showSource, setShowSource] = useState(false);
+	const [enlarged, setEnlarged] = useState(false);
+	const [copied, setCopied] = useState(false);
+	const timer = useRef(void 0);
+	useEffect(() => () => clearTimeout(timer.current), []);
+	const copy = () => {
+		copyText(source).then((done) => {
+			if (!done) return;
+			setCopied(true);
+			clearTimeout(timer.current);
+			timer.current = setTimeout(() => setCopied(false), COPIED_MS);
+		});
+	};
+	const download = () => {
+		const drawn = canvas.current?.querySelector("svg");
+		downloadFile(drawn ? serializeSvg(drawn) : svg, "diagram.svg", "image/svg+xml");
+	};
+	const close = () => {
+		setEnlarged(false);
+		enlargeButton.current?.focus();
+	};
+	const Copied = copied ? CheckIcon : CopyIcon;
+	const Swap = showSource ? DiagramIcon : SourceIcon;
+	const swapLabel = showSource ? labels.showDiagram : labels.showSource;
+	return /* @__PURE__ */ jsxs("figure", {
+		ref: figure,
+		"aria-label": labels.diagram,
+		className: "fd-diagram",
+		"data-view": showSource ? "source" : void 0,
+		children: [
+			toolbar && /* @__PURE__ */ jsxs("div", {
+				className: "fd-diagram-actions",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						ref: enlargeButton,
+						type: "button",
+						className: "fd-diagram-action",
+						"aria-label": labels.enlarge,
+						title: labels.enlarge,
+						"aria-haspopup": "dialog",
+						onClick: () => setEnlarged(true),
+						onPointerEnter: () => void loadViewer(),
+						onFocus: () => void loadViewer(),
+						children: /* @__PURE__ */ jsx(EnlargeIcon, {})
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "fd-diagram-action",
+						"aria-label": swapLabel,
+						title: swapLabel,
+						onClick: () => setShowSource((shown) => !shown),
+						children: /* @__PURE__ */ jsx(Swap, {})
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "fd-diagram-action",
+						"aria-label": copied ? labels.copied : labels.copySource,
+						title: copied ? labels.copied : labels.copySource,
+						"data-copied": copied || void 0,
+						onClick: copy,
+						children: /* @__PURE__ */ jsx(Copied, {})
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "fd-diagram-action",
+						"aria-label": labels.downloadSvg,
+						title: labels.downloadSvg,
+						onClick: download,
+						children: /* @__PURE__ */ jsx(DownloadIcon, {})
+					})
+				]
+			}),
+			showSource ? /* @__PURE__ */ jsx("pre", { children: /* @__PURE__ */ jsx("code", {
+				className: "language-mermaid",
+				children: source
+			}) }) : /* @__PURE__ */ jsx("div", {
+				ref: canvas,
+				className: "fd-diagram-canvas",
+				dangerouslySetInnerHTML: { __html: svg }
+			}),
+			enlarged && /* @__PURE__ */ jsx(Suspense, {
+				fallback: null,
+				children: /* @__PURE__ */ jsx(DiagramViewer, {
+					svg,
+					onClose: close
+				})
+			})
+		]
+	});
+}
+export { DrawnDiagram, pageMermaidRenderer, resolveMermaidLook };
+
+//# sourceMappingURL=drawing.js.map

package/dist/mermaid/drawing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawing.js","names":[],"sources":["../../src/mermaid/drawing.tsx"],"sourcesContent":["'use client'\n/**\n * The drawn half of a diagram: its toolbar, the colours it is drawn in and the page's renderer.\n * A chunk of its own, fetched with the Mermaid engine the first time a page draws a diagram: a\n * page whose replies hold none never loads it.\n */\nimport { lazy, Suspense, useEffect, useRef, useState, type Ref } from 'react'\nimport { copyText, downloadFile } from '../browser/file-actions'\nimport { CheckIcon, CopyIcon, DownloadIcon } from '../react/icons'\nimport { useLabels } from '../react/labels'\nimport { DiagramIcon, EnlargeIcon, SourceIcon } from './icons'\n\nexport { resolveMermaidLook } from './look'\nexport { pageMermaidRenderer } from './renderer'\n\n/**\n * The enlarged viewer is its own chunk: most diagrams are never enlarged, so its pan and zoom\n * load on the first Enlarge (or when the pointer reaches the button), not with the renderer.\n */\nconst loadViewer = () => import('./viewer')\nconst DiagramViewer = lazy(() => loadViewer().then((module) => ({ default: module.DiagramViewer })))\n\n/**\n * The drawn `<svg>` as a standalone file: serialized from the page, so it is what the reader sees.\n * The page sizes it by CSS; the file gets its own size from its `viewBox`.\n */\nfunction serializeSvg(svg: SVGSVGElement): string {\n  const copy = svg.cloneNode(true) as SVGSVGElement\n  const box = copy\n    .getAttribute('viewBox')\n    ?.trim()\n    .split(/[\\s,]+/)\n    .map(Number)\n  if (box && box.length === 4 && box.every(Number.isFinite)) {\n    copy.setAttribute('width', String(box[2]))\n    copy.setAttribute('height', String(box[3]))\n    copy.style.removeProperty('max-width')\n  }\n  const text = new XMLSerializer().serializeToString(copy)\n  return text.includes('xmlns=')\n    ? text\n    : text.replace('<svg', '<svg xmlns=\"http://www.w3.org/2000/svg\"')\n}\n\n/** How long \"Copied\" stays before the button reads \"Copy source\" again. */\nconst COPIED_MS = 1_600\n\n/**\n * A drawn diagram and its toolbar: enlarge it, swap it for its source and back, copy the source,\n * save the picture. The toolbar shows on hover and on focus, and always under a finger.\n */\nexport function DrawnDiagram({\n  figure,\n  svg,\n  source,\n  toolbar,\n}: {\n  /** Not `ref`: React 18 does not pass one to a function component. */\n  figure: Ref<HTMLElement>\n  svg: string\n  source: string\n  toolbar: boolean\n}) {\n  const labels = useLabels()\n  const canvas = useRef<HTMLDivElement>(null)\n  const enlargeButton = useRef<HTMLButtonElement>(null)\n  const [showSource, setShowSource] = useState(false)\n  const [enlarged, setEnlarged] = useState(false)\n  const [copied, setCopied] = useState(false)\n  const timer = useRef<ReturnType<typeof setTimeout>>(undefined)\n  useEffect(() => () => clearTimeout(timer.current), [])\n\n  const copy = () => {\n    void copyText(source).then((done) => {\n      if (!done) return\n      setCopied(true)\n      clearTimeout(timer.current)\n      timer.current = setTimeout(() => setCopied(false), COPIED_MS)\n    })\n  }\n  const download = () => {\n    // The picture on the page when it is shown (what the reader sees), else the one drawn.\n    const drawn = canvas.current?.querySelector('svg')\n    downloadFile(drawn ? serializeSvg(drawn) : svg, 'diagram.svg', 'image/svg+xml')\n  }\n  const close = () => {\n    setEnlarged(false)\n    enlargeButton.current?.focus()\n  }\n  const Copied = copied ? CheckIcon : CopyIcon\n  const Swap = showSource ? DiagramIcon : SourceIcon\n  const swapLabel = showSource ? labels.showDiagram : labels.showSource\n\n  return (\n    <figure\n      ref={figure}\n      aria-label={labels.diagram}\n      className=\"fd-diagram\"\n      data-view={showSource ? 'source' : undefined}\n    >\n      {toolbar && (\n        <div className=\"fd-diagram-actions\">\n          <button\n            ref={enlargeButton}\n            type=\"button\"\n            className=\"fd-diagram-action\"\n            aria-label={labels.enlarge}\n            title={labels.enlarge}\n            aria-haspopup=\"dialog\"\n            onClick={() => setEnlarged(true)}\n            onPointerEnter={() => void loadViewer()}\n            onFocus={() => void loadViewer()}\n          >\n            <EnlargeIcon />\n          </button>\n          <button\n            type=\"button\"\n            className=\"fd-diagram-action\"\n            aria-label={swapLabel}\n            title={swapLabel}\n            onClick={() => setShowSource((shown) => !shown)}\n          >\n            <Swap />\n          </button>\n          <button\n            type=\"button\"\n            className=\"fd-diagram-action\"\n            aria-label={copied ? labels.copied : labels.copySource}\n            title={copied ? labels.copied : labels.copySource}\n            data-copied={copied || undefined}\n            onClick={copy}\n          >\n            <Copied />\n          </button>\n          <button\n            type=\"button\"\n            className=\"fd-diagram-action\"\n            aria-label={labels.downloadSvg}\n            title={labels.downloadSvg}\n            onClick={download}\n          >\n            <DownloadIcon />\n          </button>\n        </div>\n      )}\n      {showSource ? (\n        <pre>\n          <code className=\"language-mermaid\">{source}</code>\n        </pre>\n      ) : (\n        <div ref={canvas} className=\"fd-diagram-canvas\" dangerouslySetInnerHTML={{ __html: svg }} />\n      )}\n      {enlarged && (\n        <Suspense fallback={null}>\n          <DiagramViewer svg={svg} onClose={close} />\n        </Suspense>\n      )}\n    </figure>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,MAAM,mBAAmB,OAAO;AAChC,MAAM,gBAAgB,WAAW,WAAW,CAAC,CAAC,MAAM,YAAY,EAAE,SAAS,OAAO,cAAc,EAAE,CAAC;;;;;AAMnG,SAAS,aAAa,KAA4B;CAChD,MAAM,OAAO,IAAI,UAAU,IAAI;CAC/B,MAAM,MAAM,KACT,aAAa,SAAS,CAAC,EACtB,KAAK,CAAC,CACP,MAAM,QAAQ,CAAC,CACf,IAAI,MAAM;CACb,IAAI,OAAO,IAAI,WAAW,KAAK,IAAI,MAAM,OAAO,QAAQ,GAAG;EACzD,KAAK,aAAa,SAAS,OAAO,IAAI,EAAE,CAAC;EACzC,KAAK,aAAa,UAAU,OAAO,IAAI,EAAE,CAAC;EAC1C,KAAK,MAAM,eAAe,WAAW;CACvC;CACA,MAAM,OAAO,IAAI,cAAc,CAAC,CAAC,kBAAkB,IAAI;CACvD,OAAO,KAAK,SAAS,QAAQ,IACzB,OACA,KAAK,QAAQ,QAAQ,2CAAyC;AACpE;;AAGA,MAAM,YAAY;;;;;AAMlB,SAAgB,aAAa,EAC3B,QACA,KACA,QACA,WAOC;CACD,MAAM,SAAS,UAAU;CACzB,MAAM,SAAS,OAAuB,IAAI;CAC1C,MAAM,gBAAgB,OAA0B,IAAI;CACpD,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,MAAM,QAAQ,OAAsC,KAAA,CAAS;CAC7D,sBAAsB,aAAa,MAAM,OAAO,GAAG,CAAC,CAAC;CAErD,MAAM,aAAa;EACjB,SAAc,MAAM,CAAC,CAAC,MAAM,SAAS;GACnC,IAAI,CAAC,MAAM;GACX,UAAU,IAAI;GACd,aAAa,MAAM,OAAO;GAC1B,MAAM,UAAU,iBAAiB,UAAU,KAAK,GAAG,SAAS;EAC9D,CAAC;CACH;CACA,MAAM,iBAAiB;EAErB,MAAM,QAAQ,OAAO,SAAS,cAAc,KAAK;EACjD,aAAa,QAAQ,aAAa,KAAK,IAAI,KAAK,eAAe,eAAe;CAChF;CACA,MAAM,cAAc;EAClB,YAAY,KAAK;EACjB,cAAc,SAAS,MAAM;CAC/B;CACA,MAAM,SAAS,SAAS,YAAY;CACpC,MAAM,OAAO,aAAa,cAAc;CACxC,MAAM,YAAY,aAAa,OAAO,cAAc,OAAO;CAE3D,OACE,qBAAC,UAAD;EACE,KAAK;EACL,cAAY,OAAO;EACnB,WAAU;EACV,aAAW,aAAa,WAAW,KAAA;EAJrC,UAAA;GAMG,WACC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,UAAD;MACE,KAAK;MACL,MAAK;MACL,WAAU;MACV,cAAY,OAAO;MACnB,OAAO,OAAO;MACd,iBAAc;MACd,eAAe,YAAY,IAAI;MAC/B,sBAAsB,KAAK,WAAW;MACtC,eAAe,KAAK,WAAW;MAE/B,UAAA,oBAAC,aAAD,CAAc,CAAA;KACR,CAAA;KACR,oBAAC,UAAD;MACE,MAAK;MACL,WAAU;MACV,cAAY;MACZ,OAAO;MACP,eAAe,eAAe,UAAU,CAAC,KAAK;MAE9C,UAAA,oBAAC,MAAD,CAAO,CAAA;KACD,CAAA;KACR,oBAAC,UAAD;MACE,MAAK;MACL,WAAU;MACV,cAAY,SAAS,OAAO,SAAS,OAAO;MAC5C,OAAO,SAAS,OAAO,SAAS,OAAO;MACvC,eAAa,UAAU,KAAA;MACvB,SAAS;MAET,UAAA,oBAAC,QAAD,CAAS,CAAA;KACH,CAAA;KACR,oBAAC,UAAD;MACE,MAAK;MACL,WAAU;MACV,cAAY,OAAO;MACnB,OAAO,OAAO;MACd,SAAS;MAET,UAAA,oBAAC,cAAD,CAAe,CAAA;KACT,CAAA;IACL;;GAEN,aACC,oBAAC,OAAD,EAAA,UACE,oBAAC,QAAD;IAAM,WAAU;IAAoB,UAAA;GAAa,CAAA,EAC9C,CAAA,IAEL,oBAAC,OAAD;IAAK,KAAK;IAAQ,WAAU;IAAoB,yBAAyB,EAAE,QAAQ,IAAI;GAAI,CAAA;GAE5F,YACC,oBAAC,UAAD;IAAU,UAAU;IAClB,UAAA,oBAAC,eAAD;KAAoB;KAAK,SAAS;IAAQ,CAAA;GAClC,CAAA;EAEN;;AAEZ"}

package/dist/mermaid/icons.js

@@ -0,0 +1,16 @@
+import { icon } from "../react/icons.js";
+// src/mermaid/icons.tsx
+/**
+* The diagram's own glyphs, drawn like the renderer's others (`react/icons.tsx`): one path each.
+* Outlines from Lucide (https://lucide.dev), ISC License, Copyright (c) Lucide Contributors.
+*/
+const EnlargeIcon = icon("M15 3h6v6M21 3l-7 7M3 21l7-7M9 21H3v-6");
+const SourceIcon = icon("m18 16 4-4-4-4M6 8l-4 4 4 4M14.5 4l-5 16");
+const DiagramIcon = icon("M5 3h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM7 11v4a2 2 0 0 0 2 2h4M15 13h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2z");
+const PlusIcon = icon("M5 12h14M12 5v14");
+const MinusIcon = icon("M5 12h14");
+const FitIcon = icon("M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2");
+const CloseIcon = icon("M18 6 6 18M6 6l12 12");
+export { CloseIcon, DiagramIcon, EnlargeIcon, FitIcon, MinusIcon, PlusIcon, SourceIcon };
+
+//# sourceMappingURL=icons.js.map

package/dist/mermaid/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icons.js","names":[],"sources":["../../src/mermaid/icons.tsx"],"sourcesContent":["import { icon } from '../react/icons'\n\n/**\n * The diagram's own glyphs, drawn like the renderer's others (`react/icons.tsx`): one path each.\n * Outlines from Lucide (https://lucide.dev), ISC License, Copyright (c) Lucide Contributors.\n */\nexport const EnlargeIcon = icon('M15 3h6v6M21 3l-7 7M3 21l7-7M9 21H3v-6')\n\nexport const SourceIcon = icon('m18 16 4-4-4-4M6 8l-4 4 4 4M14.5 4l-5 16')\n\nexport const DiagramIcon = icon(\n  'M5 3h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zM7 11v4a2 2 0 0 0 2 2h4M15 13h4a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2z',\n)\n\nexport const PlusIcon = icon('M5 12h14M12 5v14')\n\nexport const MinusIcon = icon('M5 12h14')\n\nexport const FitIcon = icon(\n  'M3 7V5a2 2 0 0 1 2-2h2M17 3h2a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2h-2M7 21H5a2 2 0 0 1-2-2v-2',\n)\n\nexport const CloseIcon = icon('M18 6 6 18M6 6l12 12')\n"],"mappings":";;;;;;AAMA,MAAa,cAAc,KAAK,wCAAwC;AAExE,MAAa,aAAa,KAAK,0CAA0C;AAEzE,MAAa,cAAc,KACzB,uKACF;AAEA,MAAa,WAAW,KAAK,kBAAkB;AAE/C,MAAa,YAAY,KAAK,UAAU;AAExC,MAAa,UAAU,KACrB,gGACF;AAEA,MAAa,YAAY,KAAK,sBAAsB"}

package/dist/mermaid/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * `@localix-ai/flowdown/mermaid`: what a page that draws ```mermaid fences itself needs, with
+ * `components.diagram`: the page's one queue and cache of drawn diagrams, and the colours of
+ * the tokens around an element.
+ *
+ * Mermaid is one global engine, so every diagram on a page goes through `mermaidRendererFor`:
+ * the same renderer `<Markdown mermaid>` draws with, which lays out one diagram at a time and
+ * keeps what it drew. The engine itself is the loader's: nothing here imports it.
+ */
+import { MermaidEngine, MermaidRenderer, mermaidRendererFor } from "./renderer.js";
+import { MermaidLook, resolveMermaidLook } from "./look.js";
+import { MermaidLoader } from "./loader.js";
+export { type MermaidEngine, type MermaidLoader, type MermaidLook, type MermaidRenderer, mermaidRendererFor, resolveMermaidLook };

package/dist/mermaid/index.js

@@ -0,0 +1,3 @@
+import { mermaidRendererFor } from "./renderer.js";
+import { resolveMermaidLook } from "./look.js";
+export { mermaidRendererFor, resolveMermaidLook };

package/dist/mermaid/loader.d.ts

@@ -0,0 +1,5 @@
+import { MermaidEngine } from "./renderer.js";
+/** What `<Markdown mermaid={…}>` takes: a loader for the engine, `() => import('mermaid')`. */
+export type MermaidLoader = () => Promise<MermaidEngine | {
+  default: MermaidEngine;
+}>;

package/dist/mermaid/loader.js

@@ -0,0 +1,18 @@
+import { loadOnce } from "../core/load-once.js";
+// src/mermaid/loader.ts
+let latest = null;
+/**
+* The loader the page's engine comes from: the one passed most recently. A loader written inline
+* (a new function on each render) changes nothing once the engine is here.
+*/
+function setMermaidLoader(load) {
+	latest = load;
+}
+/** The page's Mermaid engine, fetched once; a failed fetch is tried again by the next diagram. */
+const loadMermaid = loadOnce(() => {
+	if (!latest) return Promise.reject(/* @__PURE__ */ new Error("No Mermaid loader was given"));
+	return latest().then((module) => "default" in module ? module.default : module);
+});
+export { loadMermaid, setMermaidLoader };
+
+//# sourceMappingURL=loader.js.map

package/dist/mermaid/loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.js","names":[],"sources":["../../src/mermaid/loader.ts"],"sourcesContent":["import { loadOnce } from '../core/load-once'\nimport type { MermaidEngine } from './renderer'\n\n/** What `<Markdown mermaid={…}>` takes: a loader for the engine, `() => import('mermaid')`. */\nexport type MermaidLoader = () => Promise<MermaidEngine | { default: MermaidEngine }>\n\nlet latest: MermaidLoader | null = null\n\n/**\n * The loader the page's engine comes from: the one passed most recently. A loader written inline\n * (a new function on each render) changes nothing once the engine is here.\n */\nexport function setMermaidLoader(load: MermaidLoader): void {\n  latest = load\n}\n\n/** The page's Mermaid engine, fetched once; a failed fetch is tried again by the next diagram. */\nexport const loadMermaid = loadOnce<MermaidEngine>(() => {\n  if (!latest) return Promise.reject(new Error('No Mermaid loader was given'))\n  return latest().then((module) => ('default' in module ? module.default : module))\n})\n"],"mappings":";;AAMA,IAAI,SAA+B;;;;;AAMnC,SAAgB,iBAAiB,MAA2B;CAC1D,SAAS;AACX;;AAGA,MAAa,cAAc,eAA8B;CACvD,IAAI,CAAC,QAAQ,OAAO,QAAQ,uBAAO,IAAI,MAAM,6BAA6B,CAAC;CAC3E,OAAO,OAAO,CAAC,CAAC,MAAM,WAAY,aAAa,SAAS,OAAO,UAAU,MAAO;AAClF,CAAC"}

package/dist/mermaid/look.d.ts

@@ -0,0 +1,16 @@
+/** The Mermaid configuration a diagram is drawn with, and the identity it is cached under. */
+export interface MermaidLook {
+  key: string;
+  config: Record<string, unknown>;
+}
+/**
+ * Mermaid's own themes are fixed palettes that match no page around them, so a diagram is drawn
+ * with Mermaid's `base` theme fed from the renderer's tokens (`--fd-*`, `styles.css`), read on
+ * the element the diagram sits in: a page that recolours the Markdown recolours its diagrams.
+ *
+ * Mermaid derives shades with a colour library that cannot read `oklch()`, `color-mix()` or a
+ * system colour, so each token is resolved by the browser (a probe element inside the root) and
+ * rasterized to sRGB hex on a 1×1 canvas. A "veil", the text colour at a few percent over the
+ * ground, is composited there too, since Mermaid needs an opaque colour where the page uses alpha.
+ */
+export declare function resolveMermaidLook(root: HTMLElement): MermaidLook;