@localix-ai/flowdown 0.0.0-stage → 0.5.1

package/dist/mermaid/look.js

@@ -0,0 +1,167 @@
+// src/mermaid/look.ts
+/**
+* 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.
+*/
+function resolveMermaidLook(root) {
+	const probe = document.createElement("span");
+	probe.style.display = "none";
+	root.append(probe);
+	const canvas = document.createElement("canvas");
+	canvas.width = 1;
+	canvas.height = 1;
+	const context = canvas.getContext("2d", { willReadFrequently: true });
+	const computed = (token) => {
+		probe.style.color = `var(${token})`;
+		return getComputedStyle(probe).color;
+	};
+	const rgbOf = (base, color, alpha) => {
+		if (!context) return [
+			255,
+			255,
+			255
+		];
+		context.globalAlpha = 1;
+		context.fillStyle = base;
+		context.fillRect(0, 0, 1, 1);
+		context.globalAlpha = alpha;
+		context.fillStyle = color;
+		context.fillRect(0, 0, 1, 1);
+		const [r = 255, g = 255, b = 255] = context.getImageData(0, 0, 1, 1).data;
+		return [
+			r,
+			g,
+			b
+		];
+	};
+	/** `color` at `alpha` over the opaque `base`, as hex. */
+	const over = (base, color, alpha = 1) => `#${rgbOf(base, color, alpha).map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
+	const ground = over(computed("--fd-bg-solid, #ffffff"), computed("--fd-bg"));
+	const [r, g, b] = rgbOf("#ffffff", ground, 1);
+	const dark = .2126 * r + .7152 * g + .0722 * b < 128;
+	const paint = (color, alpha = 1) => over(ground, color, alpha);
+	const token = (name) => paint(computed(name));
+	const fgColor = computed("--fd-fg");
+	const veil = (alpha) => paint(fgColor, alpha);
+	const bg = ground;
+	const fg = token("--fd-fg");
+	const soft = token("--fd-fg-soft");
+	const faint = token("--fd-fg-faint");
+	const border = token("--fd-border");
+	const strong = token("--fd-border-strong");
+	const node = veil(.06);
+	const charts = Array.from({ length: 8 }, (_, index) => token(`--fd-chart-${index + 1}`));
+	const fontFamily = getComputedStyle(root).fontFamily;
+	probe.remove();
+	const themeVariables = {
+		darkMode: dark,
+		dropShadow: "none",
+		background: bg,
+		fontFamily,
+		fontSize: "13px",
+		primaryColor: node,
+		primaryTextColor: fg,
+		primaryBorderColor: border,
+		secondaryColor: veil(.1),
+		secondaryTextColor: fg,
+		secondaryBorderColor: border,
+		tertiaryColor: veil(.03),
+		tertiaryTextColor: fg,
+		tertiaryBorderColor: border,
+		lineColor: faint,
+		textColor: fg,
+		titleColor: fg,
+		edgeLabelBackground: bg,
+		clusterBkg: veil(.03),
+		clusterBorder: border,
+		noteBkgColor: node,
+		noteTextColor: fg,
+		noteBorderColor: border,
+		actorBkg: node,
+		actorBorder: border,
+		actorTextColor: fg,
+		actorLineColor: border,
+		signalColor: soft,
+		signalTextColor: fg,
+		labelBoxBkgColor: node,
+		labelBoxBorderColor: border,
+		labelTextColor: fg,
+		loopTextColor: soft,
+		activationBkgColor: veil(.1),
+		activationBorderColor: strong,
+		sequenceNumberColor: bg,
+		...Object.fromEntries(charts.map((color, index) => [`pie${index + 1}`, color])),
+		...Object.fromEntries(Array.from({ length: 12 }, (_, i) => [`cScale${i}`, charts[i % charts.length]])),
+		...Object.fromEntries(Array.from({ length: 12 }, (_, i) => [`cScaleLabel${i}`, fg])),
+		...Object.fromEntries(Array.from({ length: 12 }, (_, i) => [`cScalePeer${i}`, paint(charts[i % charts.length], .16)])),
+		...Object.fromEntries(charts.map((color, index) => [`git${index}`, color])),
+		...Object.fromEntries(charts.map((_, index) => [`gitBranchLabel${index}`, bg])),
+		...Object.fromEntries(Array.from({ length: 4 }, (_, i) => [`quadrant${i + 1}Fill`, veil(.03 + i * .02)])),
+		...Object.fromEntries(Array.from({ length: 4 }, (_, i) => [`quadrant${i + 1}TextFill`, soft])),
+		quadrantPointFill: charts[0],
+		quadrantPointTextFill: fg,
+		quadrantXAxisTextFill: soft,
+		quadrantYAxisTextFill: soft,
+		radar: {
+			axisColor: border,
+			axisLabelFontSize: 13,
+			axisStrokeWidth: 1,
+			graticuleColor: border,
+			graticuleOpacity: .15,
+			graticuleStrokeWidth: 1,
+			curveOpacity: .14,
+			curveStrokeWidth: 2,
+			legendBoxSize: 10,
+			legendFontSize: 13
+		},
+		pieStrokeColor: bg,
+		pieOuterStrokeColor: border,
+		pieTitleTextColor: fg,
+		pieSectionTextColor: bg,
+		pieLegendTextColor: soft,
+		xyChart: {
+			backgroundColor: "transparent",
+			titleColor: fg,
+			xAxisLabelColor: soft,
+			xAxisTitleColor: soft,
+			xAxisTickColor: border,
+			xAxisLineColor: border,
+			yAxisLabelColor: soft,
+			yAxisTitleColor: soft,
+			yAxisTickColor: border,
+			yAxisLineColor: border,
+			plotColorPalette: charts.join(",")
+		}
+	};
+	const config = {
+		theme: "base",
+		htmlLabels: false,
+		themeVariables,
+		flowchart: {
+			htmlLabels: false,
+			curve: "basis",
+			padding: 12,
+			nodeSpacing: 36,
+			rankSpacing: 44
+		},
+		sequence: {
+			mirrorActors: false,
+			messageFontSize: 13,
+			actorFontSize: 13,
+			noteFontSize: 12
+		}
+	};
+	return {
+		key: JSON.stringify(themeVariables),
+		config
+	};
+}
+export { resolveMermaidLook };
+
+//# sourceMappingURL=look.js.map

package/dist/mermaid/look.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"look.js","names":[],"sources":["../../src/mermaid/look.ts"],"sourcesContent":["/** The Mermaid configuration a diagram is drawn with, and the identity it is cached under. */\nexport interface MermaidLook {\n  key: string\n  config: Record<string, unknown>\n}\n\n/**\n * Mermaid's own themes are fixed palettes that match no page around them, so a diagram is drawn\n * with Mermaid's `base` theme fed from the renderer's tokens (`--fd-*`, `styles.css`), read on\n * the element the diagram sits in: a page that recolours the Markdown recolours its diagrams.\n *\n * Mermaid derives shades with a colour library that cannot read `oklch()`, `color-mix()` or a\n * system colour, so each token is resolved by the browser (a probe element inside the root) and\n * rasterized to sRGB hex on a 1×1 canvas. A \"veil\", the text colour at a few percent over the\n * ground, is composited there too, since Mermaid needs an opaque colour where the page uses alpha.\n */\nexport function resolveMermaidLook(root: HTMLElement): MermaidLook {\n  const probe = document.createElement('span')\n  probe.style.display = 'none'\n  root.append(probe)\n  const canvas = document.createElement('canvas')\n  canvas.width = 1\n  canvas.height = 1\n  const context = canvas.getContext('2d', { willReadFrequently: true })\n\n  const computed = (token: string) => {\n    probe.style.color = `var(${token})`\n    return getComputedStyle(probe).color\n  }\n  const rgbOf = (base: string, color: string, alpha: number): [number, number, number] => {\n    if (!context) return [255, 255, 255]\n    context.globalAlpha = 1\n    context.fillStyle = base\n    context.fillRect(0, 0, 1, 1)\n    context.globalAlpha = alpha\n    context.fillStyle = color\n    context.fillRect(0, 0, 1, 1)\n    const [r = 255, g = 255, b = 255] = context.getImageData(0, 0, 1, 1).data\n    return [r, g, b]\n  }\n  /** `color` at `alpha` over the opaque `base`, as hex. */\n  const over = (base: string, color: string, alpha = 1): string =>\n    `#${rgbOf(base, color, alpha)\n      .map((channel) => channel.toString(16).padStart(2, '0'))\n      .join('')}`\n  // The ground may carry alpha (a glass panel); it is laid once over what shows through it,\n  // `--fd-bg-solid` (white unless the page says), and every veil below is mixed over that result.\n  // Over white, a dark translucent ground came out light grey, and the nodes with it.\n  const ground = over(computed('--fd-bg-solid, #ffffff'), computed('--fd-bg'))\n  const [r, g, b] = rgbOf('#ffffff', ground, 1)\n  const dark = 0.2126 * r + 0.7152 * g + 0.0722 * b < 128\n  const paint = (color: string, alpha = 1) => over(ground, color, alpha)\n  const token = (name: string) => paint(computed(name))\n  const fgColor = computed('--fd-fg')\n  const veil = (alpha: number) => paint(fgColor, alpha)\n\n  const bg = ground\n  const fg = token('--fd-fg')\n  const soft = token('--fd-fg-soft')\n  const faint = token('--fd-fg-faint')\n  const border = token('--fd-border')\n  const strong = token('--fd-border-strong')\n  const node = veil(0.06)\n  const charts = Array.from({ length: 8 }, (_, index) => token(`--fd-chart-${index + 1}`))\n  const fontFamily = getComputedStyle(root).fontFamily\n  probe.remove()\n\n  const themeVariables = {\n    darkMode: dark,\n    // Mermaid's own shadow under a node is a fixed light grey: a glow on a dark ground, and depth\n    // the flat panels around a diagram do not have on a light one.\n    dropShadow: 'none',\n    background: bg,\n    fontFamily,\n    fontSize: '13px',\n    primaryColor: node,\n    primaryTextColor: fg,\n    // The fill already separates a node from the ground; the outline only has to hold its edge,\n    // so it takes the ordinary border step rather than the strong one.\n    primaryBorderColor: border,\n    secondaryColor: veil(0.1),\n    secondaryTextColor: fg,\n    secondaryBorderColor: border,\n    tertiaryColor: veil(0.03),\n    tertiaryTextColor: fg,\n    tertiaryBorderColor: border,\n    lineColor: faint,\n    textColor: fg,\n    titleColor: fg,\n    edgeLabelBackground: bg,\n    clusterBkg: veil(0.03),\n    clusterBorder: border,\n    noteBkgColor: node,\n    noteTextColor: fg,\n    noteBorderColor: border,\n    actorBkg: node,\n    actorBorder: border,\n    actorTextColor: fg,\n    actorLineColor: border,\n    signalColor: soft,\n    signalTextColor: fg,\n    labelBoxBkgColor: node,\n    labelBoxBorderColor: border,\n    labelTextColor: fg,\n    loopTextColor: soft,\n    activationBkgColor: veil(0.1),\n    activationBorderColor: strong,\n    sequenceNumberColor: bg,\n    ...Object.fromEntries(charts.map((color, index) => [`pie${index + 1}`, color])),\n    // Radar, treemap, mindmap and timeline use cScale, while git graphs use gitN. Leaving those\n    // derived from neutral node fills gave data series indistinguishable grey colours.\n    ...Object.fromEntries(\n      Array.from({ length: 12 }, (_, i) => [`cScale${i}`, charts[i % charts.length]]),\n    ),\n    ...Object.fromEntries(Array.from({ length: 12 }, (_, i) => [`cScaleLabel${i}`, fg])),\n    ...Object.fromEntries(\n      Array.from({ length: 12 }, (_, i) => [\n        `cScalePeer${i}`,\n        paint(charts[i % charts.length]!, 0.16),\n      ]),\n    ),\n    ...Object.fromEntries(charts.map((color, index) => [`git${index}`, color])),\n    ...Object.fromEntries(charts.map((_, index) => [`gitBranchLabel${index}`, bg])),\n    ...Object.fromEntries(\n      Array.from({ length: 4 }, (_, i) => [`quadrant${i + 1}Fill`, veil(0.03 + i * 0.02)]),\n    ),\n    ...Object.fromEntries(Array.from({ length: 4 }, (_, i) => [`quadrant${i + 1}TextFill`, soft])),\n    quadrantPointFill: charts[0],\n    quadrantPointTextFill: fg,\n    quadrantXAxisTextFill: soft,\n    quadrantYAxisTextFill: soft,\n    radar: {\n      axisColor: border,\n      axisLabelFontSize: 13,\n      axisStrokeWidth: 1,\n      graticuleColor: border,\n      graticuleOpacity: 0.15,\n      graticuleStrokeWidth: 1,\n      curveOpacity: 0.14,\n      curveStrokeWidth: 2,\n      legendBoxSize: 10,\n      legendFontSize: 13,\n    },\n    pieStrokeColor: bg,\n    pieOuterStrokeColor: border,\n    pieTitleTextColor: fg,\n    pieSectionTextColor: bg,\n    pieLegendTextColor: soft,\n    xyChart: {\n      // Mermaid paints this as a plot-sized slab; transparent lets the page show through.\n      backgroundColor: 'transparent',\n      titleColor: fg,\n      xAxisLabelColor: soft,\n      xAxisTitleColor: soft,\n      xAxisTickColor: border,\n      xAxisLineColor: border,\n      yAxisLabelColor: soft,\n      yAxisTitleColor: soft,\n      yAxisTickColor: border,\n      yAxisLineColor: border,\n      plotColorPalette: charts.join(','),\n    },\n  }\n  const config = {\n    theme: 'base',\n    // SVG labels avoid HTML measurement frames whose temporary 2000px boxes can enter layout.\n    // The same vector geometry works in a transcript, an embedded board and the canvas viewer.\n    htmlLabels: false,\n    themeVariables,\n    flowchart: { htmlLabels: false, curve: 'basis', padding: 12, nodeSpacing: 36, rankSpacing: 44 },\n    sequence: { mirrorActors: false, messageFontSize: 13, actorFontSize: 13, noteFontSize: 12 },\n  }\n  // Keyed by the resolved colours, not the theme name: a palette change repaints every diagram\n  // even when \"dark\" stays \"dark\".\n  return { key: JSON.stringify(themeVariables), config }\n}\n"],"mappings":"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"}

package/dist/mermaid/normalize-svg.js

@@ -0,0 +1,44 @@
+// src/mermaid/normalize-svg.ts
+/**
+* Mermaid may serialize a flowchart's viewBox before its last node transforms have reached the
+* browser's geometry cache. Measure the finished vector once, before caching or displaying it.
+* This is drawing work; opening the viewer never reparses or measures the diagram.
+*/
+function normalizeMermaidSvg(vector) {
+	if (typeof document === "undefined" || !vector.includes("class=\"root\"")) return vector;
+	const holder = document.createElement("div");
+	holder.setAttribute("aria-hidden", "true");
+	Object.assign(holder.style, {
+		position: "fixed",
+		left: "-100000px",
+		top: "0",
+		width: "1000px",
+		opacity: "0",
+		pointerEvents: "none"
+	});
+	holder.innerHTML = vector;
+	document.body.append(holder);
+	try {
+		const svg = holder.querySelector("svg");
+		if (!svg || typeof svg.getBBox !== "function") return vector;
+		const bounds = svg.getBBox();
+		if (![
+			bounds.x,
+			bounds.y,
+			bounds.width,
+			bounds.height
+		].every(Number.isFinite) || bounds.width <= 0 || bounds.height <= 0) return vector;
+		const width = bounds.width + 16;
+		const height = bounds.height + 16;
+		svg.setAttribute("viewBox", `${bounds.x - 8} ${bounds.y - 8} ${width} ${height}`);
+		svg.style.maxWidth = `${width}px`;
+		return svg.outerHTML;
+	} catch {
+		return vector;
+	} finally {
+		holder.remove();
+	}
+}
+export { normalizeMermaidSvg };
+
+//# sourceMappingURL=normalize-svg.js.map

package/dist/mermaid/normalize-svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"normalize-svg.js","names":[],"sources":["../../src/mermaid/normalize-svg.ts"],"sourcesContent":["/**\n * Mermaid may serialize a flowchart's viewBox before its last node transforms have reached the\n * browser's geometry cache. Measure the finished vector once, before caching or displaying it.\n * This is drawing work; opening the viewer never reparses or measures the diagram.\n */\nexport function normalizeMermaidSvg(vector: string): string {\n  if (typeof document === 'undefined' || !vector.includes('class=\"root\"')) return vector\n  const holder = document.createElement('div')\n  holder.setAttribute('aria-hidden', 'true')\n  Object.assign(holder.style, {\n    position: 'fixed',\n    left: '-100000px',\n    top: '0',\n    width: '1000px',\n    opacity: '0',\n    pointerEvents: 'none',\n  })\n  // Only strict Mermaid output reaches here, never raw agent-authored SVG.\n  holder.innerHTML = vector\n  document.body.append(holder)\n  try {\n    const svg = holder.querySelector('svg')\n    if (!svg || typeof svg.getBBox !== 'function') return vector\n    const bounds = svg.getBBox()\n    if (\n      ![bounds.x, bounds.y, bounds.width, bounds.height].every(Number.isFinite) ||\n      bounds.width <= 0 ||\n      bounds.height <= 0\n    )\n      return vector\n    const width = bounds.width + 16\n    const height = bounds.height + 16\n    svg.setAttribute('viewBox', `${bounds.x - 8} ${bounds.y - 8} ${width} ${height}`)\n    svg.style.maxWidth = `${width}px`\n    return svg.outerHTML\n  } catch {\n    return vector\n  } finally {\n    holder.remove()\n  }\n}\n"],"mappings":";;;;;;AAKA,SAAgB,oBAAoB,QAAwB;CAC1D,IAAI,OAAO,aAAa,eAAe,CAAC,OAAO,SAAS,gBAAc,GAAG,OAAO;CAChF,MAAM,SAAS,SAAS,cAAc,KAAK;CAC3C,OAAO,aAAa,eAAe,MAAM;CACzC,OAAO,OAAO,OAAO,OAAO;EAC1B,UAAU;EACV,MAAM;EACN,KAAK;EACL,OAAO;EACP,SAAS;EACT,eAAe;CACjB,CAAC;CAED,OAAO,YAAY;CACnB,SAAS,KAAK,OAAO,MAAM;CAC3B,IAAI;EACF,MAAM,MAAM,OAAO,cAAc,KAAK;EACtC,IAAI,CAAC,OAAO,OAAO,IAAI,YAAY,YAAY,OAAO;EACtD,MAAM,SAAS,IAAI,QAAQ;EAC3B,IACE,CAAC;GAAC,OAAO;GAAG,OAAO;GAAG,OAAO;GAAO,OAAO;EAAM,CAAC,CAAC,MAAM,OAAO,QAAQ,KACxE,OAAO,SAAS,KAChB,OAAO,UAAU,GAEjB,OAAO;EACT,MAAM,QAAQ,OAAO,QAAQ;EAC7B,MAAM,SAAS,OAAO,SAAS;EAC/B,IAAI,aAAa,WAAW,GAAG,OAAO,IAAI,EAAE,GAAG,OAAO,IAAI,EAAE,GAAG,MAAM,GAAG,QAAQ;EAChF,IAAI,MAAM,WAAW,GAAG,MAAM;EAC9B,OAAO,IAAI;CACb,QAAQ;EACN,OAAO;CACT,UAAU;EACR,OAAO,OAAO;CAChB;AACF"}

package/dist/mermaid/renderer.d.ts

@@ -0,0 +1,22 @@
+import { MermaidLoader } from "./loader.js";
+import { MermaidLook } from "./look.js";
+/**
+ * The slice of the Mermaid API a diagram render needs. Narrowed so the renderer below can be
+ * driven by a stub in tests: Mermaid lays out through `getBBox`, which no DOM test runner has.
+ */
+export interface MermaidEngine {
+  initialize(config: Record<string, unknown>): void;
+  parse(text: string): Promise<unknown>;
+  render(id: string, text: string): Promise<{
+    svg: string;
+  }>;
+}
+export interface MermaidRenderer {
+  /** The finished SVG when this source was already drawn in this look, else undefined. */
+  peek(source: string, look: MermaidLook): string | undefined;
+  /** Identical requests share one layout; aborting releases only this caller. */
+  render(source: string, look: MermaidLook, signal?: AbortSignal): Promise<string>;
+}
+/** The page's renderer, with `load` as the loader its engine comes from. */
+export declare function mermaidRendererFor(load: MermaidLoader): MermaidRenderer;
+export type { MermaidLoader };

package/dist/mermaid/renderer.js

@@ -0,0 +1,132 @@
+import { createBoundedCache } from "../core/bounded-cache.js";
+import { loadOnce } from "../core/load-once.js";
+import { loadMermaid, setMermaidLoader } from "./loader.js";
+import { normalizeMermaidSvg } from "./normalize-svg.js";
+// src/mermaid/renderer.ts
+/** Drawn diagrams kept per session, and their total SVG size (characters) — a big ER diagram
+*  is hundreds of kilobytes, so the count alone would not bound the heap. */
+const CACHE_MAX_ENTRIES = 64;
+const CACHE_MAX_CHARACTERS = 8e6;
+/**
+* One render at a time, remembered by source and look.
+*
+* Mermaid keeps its configuration and its scratch DOM node in module state, so two renders in
+* flight overwrite each other's colours and ids — the second diagram of a message came out in
+* the first one's palette, or not at all. Renders therefore run through one queue (the shape
+* streamdown's Mermaid block uses for the same reason). Unmounted messages used to leave
+* every queued layout running; requests now share a job and release it on unmount, dropping an
+* unwanted queued job before it loads or lays out. The cache answers the other
+* defect: a virtualized chat unmounts messages on scroll, and re-laying a diagram out on
+* every pass is visible jank. The look is part of the key because its colours are baked into
+* the SVG.
+*/
+function createMermaidRenderer(load) {
+	const cache = createBoundedCache({
+		maxEntries: CACHE_MAX_ENTRIES,
+		maxWeight: CACHE_MAX_CHARACTERS,
+		weigh: (svg, key) => key.length + svg.length
+	});
+	const engine = loadOnce(load);
+	const pending = /* @__PURE__ */ new Map();
+	const queue = [];
+	let running = false;
+	let sequence = 0;
+	const keyOf = (source, look) => `${look.key}\0${source}`;
+	const aborted = () => new DOMException("Diagram render cancelled", "AbortError");
+	const draw = async (job) => {
+		const mermaid = await engine();
+		if (job.consumers.size === 0) throw aborted();
+		mermaid.initialize({
+			...job.look.config,
+			startOnLoad: false,
+			securityLevel: "strict",
+			suppressErrorRendering: true
+		});
+		await mermaid.parse(job.source);
+		if (job.consumers.size === 0) throw aborted();
+		sequence += 1;
+		const { svg } = await mermaid.render(`fd-mermaid-${sequence}`, job.source);
+		return job.consumers.size === 0 ? svg : normalizeMermaidSvg(svg);
+	};
+	const drain = async () => {
+		if (running) return;
+		running = true;
+		try {
+			while (queue.length > 0) {
+				const job = queue.shift();
+				job.started = true;
+				try {
+					const svg = await draw(job);
+					if (job.consumers.size > 0) cache.set(job.key, svg);
+					for (const consumer of job.consumers) consumer.resolve(svg);
+				} catch (error) {
+					for (const consumer of job.consumers) consumer.reject(error);
+				} finally {
+					for (const consumer of job.consumers) consumer.dispose();
+					job.consumers.clear();
+					pending.delete(job.key);
+				}
+			}
+		} finally {
+			running = false;
+		}
+	};
+	return {
+		peek: (source, look) => cache.get(keyOf(source, look)),
+		render(source, look, signal) {
+			if (signal?.aborted) return Promise.reject(aborted());
+			const key = keyOf(source, look);
+			const hit = cache.get(key);
+			if (hit !== void 0) return Promise.resolve(hit);
+			let job = pending.get(key);
+			if (!job) {
+				job = {
+					key,
+					source,
+					look,
+					consumers: /* @__PURE__ */ new Set(),
+					started: false
+				};
+				pending.set(key, job);
+				queue.push(job);
+			}
+			const requested = job;
+			const result = new Promise((resolve, reject) => {
+				const cancel = () => {
+					consumer.dispose();
+					requested.consumers.delete(consumer);
+					reject(aborted());
+					if (!requested.started && requested.consumers.size === 0) {
+						queue.splice(queue.indexOf(requested), 1);
+						pending.delete(key);
+					}
+				};
+				const consumer = {
+					resolve,
+					reject,
+					dispose: () => signal?.removeEventListener("abort", cancel)
+				};
+				requested.consumers.add(consumer);
+				signal?.addEventListener("abort", cancel, { once: true });
+			});
+			drain();
+			return result;
+		}
+	};
+}
+let pageRenderer = null;
+/**
+* The page's one renderer: one queue and one cache for every diagram on it. Mermaid is a single
+* global engine, so two renderers would interleave its `initialize` and `render` calls. The engine
+* comes from the loader the page passed most recently (`loader.ts`); it is fetched the first time
+* a document holds a diagram.
+*/
+const pageMermaidRenderer = () => pageRenderer ??= createMermaidRenderer(loadMermaid);
+/** The page's renderer, with `load` as the loader its engine comes from. */
+function mermaidRendererFor(load) {
+	setMermaidLoader(load);
+	return pageMermaidRenderer();
+}
+export { createMermaidRenderer, mermaidRendererFor, pageMermaidRenderer };
+
+//# sourceMappingURL=renderer.js.map

package/dist/mermaid/renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.js","names":[],"sources":["../../src/mermaid/renderer.ts"],"sourcesContent":["import { createBoundedCache } from '../core/bounded-cache'\nimport { loadOnce } from '../core/load-once'\nimport { loadMermaid, setMermaidLoader, type MermaidLoader } from './loader'\nimport type { MermaidLook } from './look'\nimport { normalizeMermaidSvg } from './normalize-svg'\n\n/**\n * The slice of the Mermaid API a diagram render needs. Narrowed so the renderer below can be\n * driven by a stub in tests: Mermaid lays out through `getBBox`, which no DOM test runner has.\n */\nexport interface MermaidEngine {\n  initialize(config: Record<string, unknown>): void\n  parse(text: string): Promise<unknown>\n  render(id: string, text: string): Promise<{ svg: string }>\n}\n\nexport interface MermaidRenderer {\n  /** The finished SVG when this source was already drawn in this look, else undefined. */\n  peek(source: string, look: MermaidLook): string | undefined\n  /** Identical requests share one layout; aborting releases only this caller. */\n  render(source: string, look: MermaidLook, signal?: AbortSignal): Promise<string>\n}\n\n/** Drawn diagrams kept per session, and their total SVG size (characters) — a big ER diagram\n *  is hundreds of kilobytes, so the count alone would not bound the heap. */\nconst CACHE_MAX_ENTRIES = 64\nconst CACHE_MAX_CHARACTERS = 8_000_000\n\n/**\n * One render at a time, remembered by source and look.\n *\n * Mermaid keeps its configuration and its scratch DOM node in module state, so two renders in\n * flight overwrite each other's colours and ids — the second diagram of a message came out in\n * the first one's palette, or not at all. Renders therefore run through one queue (the shape\n * streamdown's Mermaid block uses for the same reason). Unmounted messages used to leave\n * every queued layout running; requests now share a job and release it on unmount, dropping an\n * unwanted queued job before it loads or lays out. The cache answers the other\n * defect: a virtualized chat unmounts messages on scroll, and re-laying a diagram out on\n * every pass is visible jank. The look is part of the key because its colours are baked into\n * the SVG.\n */\nexport function createMermaidRenderer(load: () => Promise<MermaidEngine>): MermaidRenderer {\n  const cache = createBoundedCache<string, string>({\n    maxEntries: CACHE_MAX_ENTRIES,\n    maxWeight: CACHE_MAX_CHARACTERS,\n    weigh: (svg, key) => key.length + svg.length,\n  })\n  // A failed fetch of the Mermaid chunk is retried by the next diagram, not remembered.\n  const engine = loadOnce(load)\n  interface Consumer {\n    resolve(svg: string): void\n    reject(error: unknown): void\n    dispose(): void\n  }\n  interface Job {\n    key: string\n    source: string\n    look: MermaidLook\n    consumers: Set<Consumer>\n    started: boolean\n  }\n  const pending = new Map<string, Job>()\n  const queue: Job[] = []\n  let running = false\n  let sequence = 0\n  const keyOf = (source: string, look: MermaidLook) => `${look.key}\\0${source}`\n  const aborted = () => new DOMException('Diagram render cancelled', 'AbortError')\n\n  const draw = async (job: Job): Promise<string> => {\n    const mermaid = await engine()\n    // Loading the shared chunk cannot be cancelled, but a departed row needs no parse or layout.\n    if (job.consumers.size === 0) throw aborted()\n    mermaid.initialize({\n      ...job.look.config,\n      startOnLoad: false,\n      // Labels are model-authored text: strict makes Mermaid sanitize them and drop click\n      // handlers, so a diagram cannot carry script into the page.\n      securityLevel: 'strict',\n      // Without this a syntax error leaves Mermaid's \"bomb\" SVG appended to <body>.\n      suppressErrorRendering: true,\n    })\n    // `parse` throws a readable error before `render` touches the DOM.\n    await mermaid.parse(job.source)\n    if (job.consumers.size === 0) throw aborted()\n    sequence += 1\n    const { svg } = await mermaid.render(`fd-mermaid-${sequence}`, job.source)\n    return job.consumers.size === 0 ? svg : normalizeMermaidSvg(svg)\n  }\n\n  const drain = async () => {\n    if (running) return\n    running = true\n    try {\n      while (queue.length > 0) {\n        const job = queue.shift()!\n        job.started = true\n        try {\n          const svg = await draw(job)\n          if (job.consumers.size > 0) cache.set(job.key, svg)\n          for (const consumer of job.consumers) consumer.resolve(svg)\n        } catch (error) {\n          // A failed or abandoned diagram must not poison the next job.\n          for (const consumer of job.consumers) consumer.reject(error)\n        } finally {\n          for (const consumer of job.consumers) consumer.dispose()\n          job.consumers.clear()\n          pending.delete(job.key)\n        }\n      }\n    } finally {\n      running = false\n    }\n  }\n\n  return {\n    peek: (source, look) => cache.get(keyOf(source, look)),\n    render(source, look, signal) {\n      if (signal?.aborted) return Promise.reject(aborted())\n      const key = keyOf(source, look)\n      const hit = cache.get(key)\n      if (hit !== undefined) return Promise.resolve(hit)\n      let job = pending.get(key)\n      if (!job) {\n        job = { key, source, look, consumers: new Set(), started: false }\n        pending.set(key, job)\n        queue.push(job)\n      }\n      const requested = job\n      const result = new Promise<string>((resolve, reject) => {\n        const cancel = () => {\n          consumer.dispose()\n          requested.consumers.delete(consumer)\n          reject(aborted())\n          if (!requested.started && requested.consumers.size === 0) {\n            queue.splice(queue.indexOf(requested), 1)\n            pending.delete(key)\n          }\n        }\n        const consumer: Consumer = {\n          resolve,\n          reject,\n          dispose: () => signal?.removeEventListener('abort', cancel),\n        }\n        requested.consumers.add(consumer)\n        signal?.addEventListener('abort', cancel, { once: true })\n      })\n      void drain()\n      return result\n    },\n  }\n}\n\nexport type { MermaidLoader } from './loader'\n\nlet pageRenderer: MermaidRenderer | null = null\n\n/**\n * The page's one renderer: one queue and one cache for every diagram on it. Mermaid is a single\n * global engine, so two renderers would interleave its `initialize` and `render` calls. The engine\n * comes from the loader the page passed most recently (`loader.ts`); it is fetched the first time\n * a document holds a diagram.\n */\nexport const pageMermaidRenderer = (): MermaidRenderer =>\n  (pageRenderer ??= createMermaidRenderer(loadMermaid))\n\n/** The page's renderer, with `load` as the loader its engine comes from. */\nexport function mermaidRendererFor(load: MermaidLoader): MermaidRenderer {\n  setMermaidLoader(load)\n  return pageMermaidRenderer()\n}\n"],"mappings":"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"}