vantage-md 0.5.7 → 0.5.9

package/dist/react.cjs

@@ -51,7 +51,31 @@ let remark_rehype = require("remark-rehype");
 remark_rehype = __toESM(remark_rehype, 1);
 let rehype_stringify = require("rehype-stringify");
 rehype_stringify = __toESM(rehype_stringify, 1);
+//#region src/rehypeVantageAnchors.ts
+/** What `rehypeVantageDirectives` stamps, in hast property form. */
+const OQ_ID_PROPERTY$1 = "dataVantageOqId";
+function rehypeVantageAnchors() {
+	return (tree) => {
+		(0, unist_util_visit.visit)(tree, "element", (node) => {
+			const carried = node.properties?.[OQ_ID_PROPERTY$1];
+			if (typeof carried !== "string" || carried === "") return;
+			delete node.properties[OQ_ID_PROPERTY$1];
+			if (typeof node.properties.id === "string" && node.properties.id !== "") return;
+			node.properties.id = carried;
+		});
+	};
+}
+//#endregion
 //#region src/rehypeSourceLines.ts
+/**
+* Tags that get a `data-source-line`.
+*
+* `td`/`th` are here for review mode: a comment anchors to the cell it was
+* written on, so the cell needs a line of its own to be found again. Every cell
+* in a row reports the *row's* start line — a GFM row is one source line — so a
+* line no longer names at most one anchorable element, and whatever resolves an
+* anchor has to break the tie by block hash (`useReviewHighlights`).
+*/
 const BLOCK_TAGS = /* @__PURE__ */ new Set([
 	"p",
 	"h1",
@@ -64,6 +88,8 @@ const BLOCK_TAGS = /* @__PURE__ */ new Set([
 	"blockquote",
 	"pre",
 	"table",
+	"td",
+	"th",
 	"tr",
 	"ul",
 	"ol",
@@ -266,12 +292,17 @@ const VANTAGE_RUNS = [
 	"only"
 ];
 /**
-* The tags a `section`/`block` directive may stamp.
+* The tags a `section`/`block` directive may **target**.
 *
-* Deliberately `rehypeSourceLines`'s `BLOCK_TAGS`: a stamped block should also
-* be a block with a `data-source-line`, so the styling surface and the anchor
-* surface coincide. It also keeps an inline directive from stamping the `<em>`
-* that happens to follow it inside a paragraph.
+* Deliberately `rehypeSourceLines`'s `BLOCK_TAGS`: a directive's target should
+* also be a block with a `data-source-line`, so the styling surface and the
+* anchor surface coincide. It also keeps an inline directive from stamping the
+* `<em>` that happens to follow it inside a paragraph.
+*
+* It does **not** bound a `section`'s range. Every element in the span is
+* stamped, on the tag list or not, because a member only has to be a box in the
+* flow for the section's vertical rule to cross it — see `styleRange` in
+* `rehypeVantageDirectives.ts` for the hole that restricting the range left.
 *
 * It lives here rather than in the plugin because the CLI checker has to answer
 * "will this directive stamp anything?" from an mdast tree with no hast in
@@ -321,6 +352,23 @@ const VANTAGE_ANCHOR_TARGETS = [
 	"table"
 ];
 VANTAGE_ANCHOR_TARGETS.filter((tag) => tag !== "pre" && tag !== "table");
+/**
+* The shape of an `oq` directive's `id`: `OQ-` then an optional short uppercase
+* prefix then digits. `OQ-9`, `OQ-TP6` and `OQ-A03` are ids; `OQ-foo`, `OQ-tp6`
+* and a bare `OQ6` are not.
+*
+* The prefix is what keeps ids distinct once one document references another's
+* questions — `trust-paths.md`'s `OQ-4` and a design sketch's `OQ-4` are
+* different questions, and a bare number cannot say which one a cross-document
+* reference means. It is optional because most documents never leave their own
+* file, and requiring it everywhere would fire on every single-doc sketch.
+*
+* Three consumers read it from here and none of them may re-spell it: the
+* plugin that stamps the anchor, the sanitiser that allowlists the value, and
+* the checker's `vantage/oq-id-format`. A fourth copy is how the checker starts
+* calling a working anchor malformed.
+*/
+const VANTAGE_OQ_ID = /^OQ-(?:[A-Z][A-Z0-9]{0,5})?[0-9]+$/;
 const STYLE_KEYS = {
 	tone: VANTAGE_TONES,
 	emphasis: VANTAGE_EMPHASIS,
@@ -453,11 +501,13 @@ function parseVantageDirective(comment) {
 //#endregion
 //#region src/rehypeVantageDirectives.ts
 /**
-* What a `section`/`block` and an `oq` directive may stamp.
+* What a `section`/`block` and an `oq` directive may **target**.
 *
 * Both lists live in `vantageDirectives.ts`, with the reasoning for each tag,
 * because the CLI checker resolves the same question over mdast and must reach
 * the same answer (D5).
+*
+* Neither list bounds a `section`'s range: see `styleRange`.
 */
 const STYLE_TARGET_TAGS = new Set(VANTAGE_STYLE_TARGETS);
 const ANCHOR_TARGET_TAGS = new Set(VANTAGE_ANCHOR_TARGETS);
@@ -504,6 +554,18 @@ const RUN_PROPERTY = "dataVantageRun";
 const OQ_PROPERTY = "dataVantageOq";
 const LEANING_PROPERTY = "dataVantageLeaning";
 /**
+* The id, carried as a `data-` attribute rather than written straight to `id`.
+*
+* This plugin runs *before* `rehypeSanitize` — it has to, it reads comments and
+* the sanitiser deletes them — and the sanitiser's default schema clobbers `id`
+* with the prefix `user-content-`. A bare `id` set here would reach the page as
+* `user-content-OQ-4`, every `#OQ-4` link in every document would land nowhere,
+* and nothing would error. `rehypeVantageAnchors` promotes this to a real `id`
+* on the other side of the sanitiser, which is the same reason `rehypeSlug` is
+* registered there (`pipeline.ts`).
+*/
+const OQ_ID_PROPERTY = "dataVantageOqId";
+/**
 * The three properties `collapsed=true` stamps across a section.
 *
 * The heading takes a *different* attribute from the blocks it hides, and that
@@ -576,6 +638,22 @@ function accepts(name, key, value) {
 * `section` before anything else degrades to that one block, and `block` is
 * always that one block. A heading nested inside a stamped `blockquote` or
 * `li` does not end the section: the walk never descends.
+*
+* **Every element in the span, not only a `VANTAGE_STYLE_TARGETS` one.** That
+* list gates the *target* and nothing else. Restricting the range to it as well
+* used to leave a raw-HTML `<figure>`, `<dl>` or `<details>` unstamped between
+* two stamped paragraphs — and the section's one continuous vertical rule is
+* drawn per member, so an unstamped member is a hole the height of the block
+* plus its margins. Measured over the real stylesheet: 44px for a one-line
+* `<figure>`, against the 40px a neighbour can bleed upward, and arbitrarily
+* large for anything taller. `collapsed=true` had the same shape of bug the
+* other way round — it hid the paragraphs and left the figure on the page.
+*
+* The two lists answering different questions is the point, not an oversight:
+* a *target* must be a block a review anchor can name, because a directive
+* pointing at something unanchorable is a directive with no addressable effect.
+* A *member* only has to be a box in the flow, because all it does is carry the
+* run's tone across itself.
 */
 function styleRange(children, targetIndex, name) {
 	const range = [targetIndex];
@@ -585,7 +663,7 @@ function styleRange(children, targetIndex, name) {
 		const node = children[i];
 		const nodeDepth = headingDepth(node);
 		if (nodeDepth !== void 0 && nodeDepth <= depth) break;
-		if (node.type === "element" && STYLE_TARGET_TAGS.has(node.tagName)) range.push(i);
+		if (node.type === "element") range.push(i);
 	}
 	return range;
 }
@@ -644,6 +722,8 @@ function stampStyle(children, targetIndex, name, pairs, state) {
 }
 function stampOq(target, pairs) {
 	setProperty(target, OQ_PROPERTY, "true");
+	const id = pairs.get("id");
+	if (id !== void 0 && id !== "") setProperty(target, OQ_ID_PROPERTY, id);
 	const leaning = pairs.get("leaning");
 	if (leaning === void 0) return;
 	const text = leaning.replace(/\s+/g, " ").trim().slice(0, MAX_LEANING);
@@ -949,6 +1029,7 @@ const sanitizeSchema = {
 			["dataVantageCollapseToggle", COLLAPSE_GROUP_ID],
 			["dataVantageRun", ...VANTAGE_RUNS],
 			["dataVantageOq", "true"],
+			["dataVantageOqId", VANTAGE_OQ_ID],
 			["dataVantageAlert", ...VANTAGE_ALERTS],
 			"dataVantageLeaning"
 		],
@@ -998,6 +1079,7 @@ function buildRehypePlugins(options = {}) {
 	plugins.push(rehypeVantageAlerts);
 	plugins.push(rehypeVantageDirectives);
 	if (sanitize) plugins.push([rehype_sanitize.default, sanitizeSchema]);
+	plugins.push(rehypeVantageAnchors);
 	plugins.push(rehype_slug.default);
 	if (highlight) plugins.push(rehype_highlight.default);
 	if (math) plugins.push(rehypeCaptureMathStamps, rehype_katex.default, rehypeRestoreMathStamps);
@@ -1120,27 +1202,92 @@ function errorPosition(error) {
 	return { message };
 }
 //#endregion
+//#region src/mermaidTheme.ts
+/** Whether the document is asking for the dark palette right now. */
+function currentMermaidTheme() {
+	return typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "default";
+}
+/**
+* Theme variables per theme. Mermaid derives most of its palette from these, so
+* the set is deliberately small: the surfaces, the ink, and the lines.
+*/
+const THEME_VARIABLES = {
+	dark: {
+		background: "#1d293d",
+		mainBkg: "#314158",
+		nodeBorder: "#90a1b9",
+		nodeTextColor: "#f1f5f9",
+		lineColor: "#90a1b9",
+		textColor: "#e2e8f0",
+		edgeLabelBackground: "#1d293d"
+	},
+	default: {
+		background: "#f8fafc",
+		mainBkg: "#f1f5f9",
+		nodeBorder: "#62748e",
+		nodeTextColor: "#0f172b",
+		lineColor: "#62748e",
+		textColor: "#1d293d",
+		edgeLabelBackground: "#f8fafc"
+	}
+};
+function mermaidThemeVariables(theme) {
+	return THEME_VARIABLES[theme];
+}
+//#endregion
 //#region src/mermaidCache.ts
 const svgCache = /* @__PURE__ */ new Map();
+const cacheKey = (code, theme) => `${theme}${code}`;
+/** The SVG for this fence in the theme the page is currently asking for. */
+function getCachedSvg(code, theme = currentMermaidTheme()) {
+	return svgCache.get(cacheKey(code, theme));
+}
+function setCachedSvg(code, svg, theme = currentMermaidTheme()) {
+	svgCache.set(cacheKey(code, theme), svg);
+}
 //#endregion
 //#region src/mermaidLoader.ts
 let mermaidInstance = null;
 let mermaidLoading = null;
-const isDark = () => typeof document !== "undefined" && document.documentElement.classList.contains("dark");
+/** The theme the loaded instance was last configured for, `null` until loaded. */
+let configuredTheme = null;
+function configure(m, theme) {
+	m.initialize({
+		startOnLoad: false,
+		theme,
+		themeVariables: mermaidThemeVariables(theme),
+		securityLevel: "strict",
+		suppressErrorRendering: true
+	});
+	configuredTheme = theme;
+}
+/**
+* The mermaid module, configured for the theme the page is asking for *now*.
+*
+* Re-configuring on a theme change is the point. `initialize` used to run once,
+* on first import, so every diagram rendered after a light/dark switch still
+* came out in the palette the session started in — a white slab of a flowchart
+* on the dark page, or a black one on the light page. `initialize` merges into
+* mermaid's global config, so calling it again is how the next `render` picks
+* the new palette up; the cache is keyed by theme so the old SVGs are not
+* served instead (`mermaidCache.ts`).
+*/
 async function getMermaid() {
-	if (mermaidInstance) return mermaidInstance;
+	const theme = currentMermaidTheme();
+	if (mermaidInstance) {
+		if (configuredTheme !== theme) configure(mermaidInstance, theme);
+		return mermaidInstance;
+	}
 	if (!mermaidLoading) mermaidLoading = import("mermaid").then((mod) => {
 		const m = mod.default;
-		m.initialize({
-			startOnLoad: false,
-			theme: isDark() ? "dark" : "default",
-			securityLevel: "strict",
-			suppressErrorRendering: true
-		});
+		configure(m, currentMermaidTheme());
 		mermaidInstance = m;
 		return m;
 	});
-	return mermaidLoading;
+	const loaded = await mermaidLoading;
+	const wanted = currentMermaidTheme();
+	if (configuredTheme !== wanted) configure(loaded, wanted);
+	return loaded;
 }
 //#endregion
 //#region src/MermaidDiagram.tsx
@@ -1193,7 +1340,7 @@ const MaximizeIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 	strokeWidth: "2",
 	strokeLinecap: "round",
 	strokeLinejoin: "round",
-	className: "w-4 h-4 text-gray-600",
+	className: "w-4 h-4 text-gray-600 dark:text-slate-200",
 	children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "15 3 21 3 21 9" }),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("polyline", { points: "9 21 3 21 3 15" }),
@@ -1354,32 +1501,32 @@ function ZoomableSvg({ svg }) {
 				dangerouslySetInnerHTML: { __html: svg }
 			})
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "absolute bottom-4 right-4 flex items-center gap-1 rounded-lg bg-white/95 shadow-md border border-gray-200 px-1.5 py-1",
+			className: "absolute bottom-4 right-4 flex items-center gap-1 rounded-lg bg-white/95 dark:bg-slate-800/95 shadow-md border border-gray-200 dark:border-slate-600 px-1.5 py-1",
 			children: [
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					onClick: () => zoomBy(1 / 1.3),
-					className: "p-1.5 rounded hover:bg-gray-100 text-gray-600",
+					className: "p-1.5 rounded hover:bg-gray-100 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-200",
 					"aria-label": "Zoom out",
 					title: "Zoom out",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MinusIcon, {})
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 					onClick: reset,
-					className: "px-2 py-1 text-xs font-medium rounded hover:bg-gray-100 text-gray-600 min-w-[3rem]",
+					className: "px-2 py-1 text-xs font-medium rounded hover:bg-gray-100 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-200 min-w-[3rem]",
 					title: "Reset zoom (or double-click)",
 					children: [Math.round(scale * 100), "%"]
 				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					onClick: () => zoomBy(1.3),
-					className: "p-1.5 rounded hover:bg-gray-100 text-gray-600",
+					className: "p-1.5 rounded hover:bg-gray-100 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-200",
 					"aria-label": "Zoom in",
 					title: "Zoom in",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlusIcon, {})
 				}),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "w-px h-5 bg-gray-200 mx-0.5" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: "w-px h-5 bg-gray-200 dark:bg-slate-600 mx-0.5" }),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					onClick: reset,
-					className: "p-1.5 rounded hover:bg-gray-100 text-gray-600",
+					className: "p-1.5 rounded hover:bg-gray-100 dark:hover:bg-slate-700 text-gray-600 dark:text-slate-200",
 					"aria-label": "Reset view",
 					title: "Reset view",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResetIcon, {})
@@ -1417,38 +1564,74 @@ function DiagramModal({ isOpen, onClose, children }) {
 		className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4",
 		onClick: onClose,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: "bg-white rounded-lg shadow-xl w-[96vw] h-[94vh] flex flex-col overflow-hidden",
+			className: "bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 rounded-lg shadow-xl w-[96vw] h-[94vh] flex flex-col overflow-hidden",
 			role: "dialog",
 			"aria-modal": "true",
 			onClick: (e) => e.stopPropagation(),
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "flex items-center justify-between p-4 border-b shrink-0",
+				className: "flex items-center justify-between p-4 border-b border-gray-200 dark:border-slate-700 shrink-0",
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
 					className: "text-lg font-semibold",
 					children: "Mermaid Diagram"
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 					onClick: onClose,
-					className: "p-1 hover:bg-gray-100 rounded-full transition-colors",
+					className: "p-1 hover:bg-gray-100 dark:hover:bg-slate-700 rounded-full transition-colors",
 					"aria-label": "Close modal",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon, {})
 				})]
 			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "flex-1 overflow-hidden bg-gray-50",
+				className: "flex-1 overflow-hidden bg-gray-50 dark:bg-slate-800",
 				children
 			})]
 		})
 	});
 }
+/**
+* The palette the page is asking for, re-read whenever `<html>`'s class list
+* changes.
+*
+* A diagram is an SVG baked at render time, so unlike everything else on the
+* page it does not restyle when the theme flips — it has to be drawn again. The
+* observer is what notices; the effect below is what redraws. Without it a
+* session that started in light mode kept white boxes with black ink on the
+* dark page for as long as it lived.
+*
+* `useSyncExternalStore` rather than state plus an effect: the class list *is*
+* an external store, and reading it in an effect would both miss a flip that
+* landed before the effect ran and set state synchronously inside one.
+*/
+function subscribeToTheme(onChange) {
+	if (typeof MutationObserver === "undefined") return () => {};
+	const observer = new MutationObserver(onChange);
+	observer.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["class"]
+	});
+	return () => observer.disconnect();
+}
+/** Server render has no `<html>` to read, and no diagram to draw either. */
+const serverTheme = () => "default";
+function useMermaidTheme() {
+	return (0, react.useSyncExternalStore)(subscribeToTheme, currentMermaidTheme, serverTheme);
+}
 const MermaidDiagramInner = ({ code }) => {
-	const hasCached = svgCache.has(code);
-	const [svg, setSvg] = (0, react.useState)(() => svgCache.get(code) || "");
-	const [errorMessage, setErrorMessage] = (0, react.useState)(null);
+	const theme = useMermaidTheme();
 	const [showSource, setShowSource] = (0, react.useState)(false);
 	const [isModalOpen, setIsModalOpen] = (0, react.useState)(false);
-	const [isLoading, setIsLoading] = (0, react.useState)(!hasCached);
 	const [minHeight, setMinHeight] = (0, react.useState)("auto");
 	const containerRef = (0, react.useRef)(null);
 	const lastHeightRef = (0, react.useRef)(null);
+	/**
+	* What this render produced, and which (code, theme) it was for.
+	*
+	* Keyed rather than plain, and read past the cache rather than instead of it,
+	* because a theme flip has to invalidate both: the cache is a miss in the new
+	* palette, and last render's SVG is the wrong palette. Deriving `svg` here
+	* rather than mirroring the cache into state is also what keeps a cache hit
+	* from being a `setState` inside an effect.
+	*/
+	const [rendered, setRendered] = (0, react.useState)(null);
+	const [failure, setFailure] = (0, react.useState)(null);
 	const stableId = (0, react.useMemo)(() => {
 		let hash = 0;
 		for (let i = 0; i < code.length; i++) {
@@ -1458,9 +1641,14 @@ const MermaidDiagramInner = ({ code }) => {
 		}
 		return `mermaid-${Math.abs(hash).toString(36)}`;
 	}, [code]);
+	const attempt = `${theme} ${stableId}`;
+	const svg = getCachedSvg(code, theme) ?? (rendered?.key === attempt ? rendered.svg : "");
+	const errorMessage = failure?.key === attempt ? failure.message : null;
+	const isLoading = svg === "" && errorMessage === null;
 	(0, react.useEffect)(() => {
-		if (hasCached) return;
+		if (getCachedSvg(code, theme) !== void 0) return;
 		let mounted = true;
+		const key = `${theme} ${stableId}`;
 		const renderDiagram = async () => {
 			try {
 				if (containerRef.current) {
@@ -1472,17 +1660,18 @@ const MermaidDiagramInner = ({ code }) => {
 				const id = `${stableId}-${Date.now()}`;
 				const { svg: renderedSvg } = await m.render(id, code);
 				if (mounted) {
-					svgCache.set(code, renderedSvg);
-					setSvg(renderedSvg);
-					setErrorMessage(null);
-					setIsLoading(false);
+					setCachedSvg(code, renderedSvg, theme);
+					setRendered({
+						key,
+						svg: renderedSvg
+					});
 				}
 			} catch (err) {
 				console.error("Mermaid render error:", err);
-				if (mounted) {
-					setErrorMessage(extractErrorMessage(err));
-					setIsLoading(false);
-				}
+				if (mounted) setFailure({
+					key,
+					message: extractErrorMessage(err)
+				});
 			}
 		};
 		renderDiagram();
@@ -1492,7 +1681,7 @@ const MermaidDiagramInner = ({ code }) => {
 	}, [
 		code,
 		stableId,
-		hasCached
+		theme
 	]);
 	if (errorMessage) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		"data-testid": "mermaid-container",
@@ -1532,7 +1721,7 @@ const MermaidDiagramInner = ({ code }) => {
 			dangerouslySetInnerHTML: { __html: svg }
 		}), svg && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			onClick: () => setIsModalOpen(true),
-			className: "absolute top-2 right-2 p-2 bg-white/90 shadow-sm border rounded-md opacity-0 group-hover:opacity-100 transition-opacity hover:bg-gray-50",
+			className: "absolute top-2 right-2 p-2 bg-white/90 dark:bg-slate-800/90 shadow-sm border border-gray-200 dark:border-slate-600 rounded-md opacity-0 group-hover:opacity-100 transition-opacity hover:bg-gray-50 dark:hover:bg-slate-700",
 			"aria-label": "Maximize diagram",
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MaximizeIcon, {})
 		})]
@@ -2192,18 +2381,20 @@ async function renderMermaidBlocks(container, options = {}) {
 	const { className = "mermaid", onError } = options;
 	const codeBlocks = container.querySelectorAll("pre > code.language-mermaid, pre > code[class*=\"language-mermaid\"]");
 	if (codeBlocks.length === 0) return;
-	const mermaid = await getMermaid();
+	let loading;
+	const mermaidOnce = () => loading ??= getMermaid();
 	const renderPromises = Array.from(codeBlocks).map(async (codeEl) => {
 		const preEl = codeEl.parentElement;
 		if (!preEl) return;
 		const code = codeEl.textContent || "";
 		if (!code.trim()) return;
-		const cached = svgCache.get(code);
+		const cached = getCachedSvg(code);
 		if (cached) {
 			replaceWithSvg(preEl, cached, className);
 			return;
 		}
 		try {
+			const mermaid = await mermaidOnce();
 			let hash = 0;
 			for (let i = 0; i < code.length; i++) {
 				hash = (hash << 5) - hash + code.charCodeAt(i);
@@ -2211,7 +2402,7 @@ async function renderMermaidBlocks(container, options = {}) {
 			}
 			const id = `mermaid-${Math.abs(hash).toString(36)}-${Date.now()}`;
 			const { svg } = await mermaid.render(id, code);
-			svgCache.set(code, svg);
+			setCachedSvg(code, svg);
 			replaceWithSvg(preEl, svg, className);
 		} catch (err) {
 			if (onError) onError(code, err instanceof Error ? err : new Error(String(err)));
@@ -2219,9 +2410,34 @@ async function renderMermaidBlocks(container, options = {}) {
 	});
 	await Promise.all(renderPromises);
 }
+/**
+* Attributes the wrapper inherits from the `<pre>` it replaces.
+*
+* The splice is the same shape of problem `rehypeVantageMathStamps` solves for
+* KaTeX: the pipeline stamped the fence, and swapping the element out throws
+* the stamps away. A mermaid diagram inside a toned section then drew no slice
+* of the section's vertical rule, leaving a hole as tall as the diagram; a
+* collapsed section left the diagram visible under a closed heading; and a
+* `#L` anchor pointing at the fence resolved to nothing.
+*
+* Named individually rather than copied wholesale: `class` is the caller's
+* (`className`), and `id` would be duplicated onto a second element.
+*/
+const CARRIED_ATTRIBUTES = [
+	"data-source-line",
+	"data-vantage-tone",
+	"data-vantage-emphasis",
+	"data-vantage-run",
+	"data-vantage-collapsed",
+	"data-vantage-collapse-group"
+];
 function replaceWithSvg(preEl, svg, className) {
 	const wrapper = document.createElement("div");
 	wrapper.className = className;
+	for (const name of CARRIED_ATTRIBUTES) {
+		const value = preEl.getAttribute(name);
+		if (value !== null) wrapper.setAttribute(name, value);
+	}
 	wrapper.innerHTML = svg;
 	preEl.replaceWith(wrapper);
 }