vantage-md 0.5.5 → 0.5.7

package/dist/react.cjs

@@ -1,1853 +1,2275 @@
-'use strict';
-
-var react = require('react');
-var ReactMarkdown = require('react-markdown');
-var remarkGfm = require('remark-gfm');
-var remarkMath = require('remark-math');
-var rehypeRaw = require('rehype-raw');
-var rehypeSanitize = require('rehype-sanitize');
-var rehypeHighlight = require('rehype-highlight');
-var rehypeKatex = require('rehype-katex');
-var rehypeSlug = require('rehype-slug');
-var YAML = require('yaml');
-var smolToml = require('smol-toml');
-var jsxRuntime = require('react/jsx-runtime');
-var unified = require('unified');
-var remarkParse = require('remark-parse');
-var remarkRehype = require('remark-rehype');
-var rehypeStringify = require('rehype-stringify');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var ReactMarkdown__default = /*#__PURE__*/_interopDefault(ReactMarkdown);
-var remarkGfm__default = /*#__PURE__*/_interopDefault(remarkGfm);
-var remarkMath__default = /*#__PURE__*/_interopDefault(remarkMath);
-var rehypeRaw__default = /*#__PURE__*/_interopDefault(rehypeRaw);
-var rehypeSanitize__default = /*#__PURE__*/_interopDefault(rehypeSanitize);
-var rehypeHighlight__default = /*#__PURE__*/_interopDefault(rehypeHighlight);
-var rehypeKatex__default = /*#__PURE__*/_interopDefault(rehypeKatex);
-var rehypeSlug__default = /*#__PURE__*/_interopDefault(rehypeSlug);
-var YAML__default = /*#__PURE__*/_interopDefault(YAML);
-var remarkParse__default = /*#__PURE__*/_interopDefault(remarkParse);
-var remarkRehype__default = /*#__PURE__*/_interopDefault(remarkRehype);
-var rehypeStringify__default = /*#__PURE__*/_interopDefault(rehypeStringify);
-
-// src/MarkdownViewer.tsx
-
-// src/rehypeSourceLines.ts
-var BLOCK_TAGS = /* @__PURE__ */ new Set([
-  "p",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "li",
-  "blockquote",
-  "pre",
-  "table",
-  "tr",
-  "ul",
-  "ol",
-  "hr",
-  "div"
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+let react = require("react");
+react = __toESM(react, 1);
+let react_markdown = require("react-markdown");
+react_markdown = __toESM(react_markdown, 1);
+let remark_gfm = require("remark-gfm");
+remark_gfm = __toESM(remark_gfm, 1);
+let remark_math = require("remark-math");
+remark_math = __toESM(remark_math, 1);
+let rehype_raw = require("rehype-raw");
+rehype_raw = __toESM(rehype_raw, 1);
+let rehype_sanitize = require("rehype-sanitize");
+rehype_sanitize = __toESM(rehype_sanitize, 1);
+let rehype_highlight = require("rehype-highlight");
+rehype_highlight = __toESM(rehype_highlight, 1);
+let rehype_katex = require("rehype-katex");
+rehype_katex = __toESM(rehype_katex, 1);
+let rehype_slug = require("rehype-slug");
+rehype_slug = __toESM(rehype_slug, 1);
+let unist_util_visit = require("unist-util-visit");
+let yaml = require("yaml");
+yaml = __toESM(yaml, 1);
+let smol_toml = require("smol-toml");
+let react_jsx_runtime = require("react/jsx-runtime");
+let unified = require("unified");
+let remark_parse = require("remark-parse");
+remark_parse = __toESM(remark_parse, 1);
+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/rehypeSourceLines.ts
+const BLOCK_TAGS = /* @__PURE__ */ new Set([
+	"p",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"li",
+	"blockquote",
+	"pre",
+	"table",
+	"tr",
+	"ul",
+	"ol",
+	"hr",
+	"div"
 ]);
-function visit(node, offset) {
-  if ("children" in node) {
-    for (const child of node.children) {
-      if (child.type === "element") {
-        if (BLOCK_TAGS.has(child.tagName) && child.position?.start?.line) {
-          child.properties = child.properties || {};
-          child.properties["dataSourceLine"] = child.position.start.line + offset;
-        }
-        visit(child, offset);
-      }
-    }
-  }
+function visit$1(node, offset) {
+	if ("children" in node) {
+		for (const child of node.children) if (child.type === "element") {
+			if (BLOCK_TAGS.has(child.tagName) && child.position?.start?.line) {
+				child.properties = child.properties || {};
+				child.properties["dataSourceLine"] = child.position.start.line + offset;
+			}
+			visit$1(child, offset);
+		}
+	}
 }
-var rehypeSourceLines = (options) => {
-  const offset = options?.offset ?? 0;
-  return (tree) => {
-    visit(tree, offset);
-  };
+const rehypeSourceLines = (options) => {
+	const offset = options?.offset ?? 0;
+	return (tree) => {
+		visit$1(tree, offset);
+	};
 };
-var rehypeSourceLines_default = rehypeSourceLines;
-
-// src/vantageDirectives.ts
-var VANTAGE_TONES = [
-  "note",
-  "tip",
-  "important",
-  "warning",
-  "caution",
-  "muted"
+//#endregion
+//#region src/rehypeVantageAlerts.ts
+/**
+* GFM alerts — `> [!WARNING]` — compiled into `data-vantage-alert`.
+*
+* `remark-gfm` does not implement alerts, so until this plugin existed a
+* `> [!WARNING]` rendered as an ordinary blockquote with the literal marker
+* visible as its first words. Worse than merely unstyled: `@tailwindcss/typography`
+* italicises blockquotes and draws `open-quote`/`close-quote` around the first
+* paragraph, so a callout came out as an italic *quotation* whose opening words
+* were `"[!WARNING]`. That was the "Known gaps" entry in
+* `docs/reference/inline-markup.md` and OQ-10, filed rather than fixed, while
+* `styleGuide.ts` went on telling every agent to write them.
+*
+* The tokens are deliberately the ones the `tone` vocabulary already resolves —
+* an alert *is* the six-colour light/dark treatment `tone` shipped, which is
+* exactly what the gap entry said whoever fixed this should do rather than
+* building a second palette. `[!WARNING]` and `<!-- vantage: block tone=warning -->`
+* therefore agree by construction, and adding a theme still touches one
+* custom-property block.
+*
+* **This runs in the shared pipeline, so all four renderers get it** — the live
+* viewer, the package's exported viewer, the static export and the CLI checker's
+* `renderMarkdown`. That is what makes an injected title element acceptable here
+* where the collapse caret's glyph had to be drawn in CSS: the caret is injected
+* by app JS that may never run, and this is not (D5).
+*
+* ## What it does not do
+*
+* It does not touch a blockquote that carries no marker, and an unrecognised
+* marker (`[!HINT]`) is left exactly as it was — visible literal text, which is
+* the honest rendering of something GitHub also would not style. Silently
+* swallowing it would hide a typo that reads as a callout on neither renderer.
+*/
+/**
+* The five GFM alert kinds, lowercased.
+*
+* Deliberately *not* re-derived from `VANTAGE_TONES`: that list carries a sixth
+* token, `muted`, which is ours and is not an alert word. The overlap is the
+* point — the five that coincide share a palette — but the two vocabularies are
+* closed by different authorities and a change to one must not silently move the
+* other. A test asserts the five are a subset of the tones.
+*/
+const VANTAGE_ALERTS = [
+	"note",
+	"tip",
+	"important",
+	"warning",
+	"caution"
 ];
-var VANTAGE_EMPHASIS = ["strong", "normal", "quiet"];
-var VANTAGE_BADGES = [
-  "draft",
-  "stale",
-  "blocked",
-  "done",
-  "wip"
+/** The visible label per kind. Title case, as GitHub renders it. */
+const ALERT_TITLES = {
+	note: "Note",
+	tip: "Tip",
+	important: "Important",
+	warning: "Warning",
+	caution: "Caution"
+};
+/**
+* The marker, anchored and requiring the rest of its line to be empty.
+*
+* GFM puts the marker alone on the blockquote's first line, and holding to that
+* is what keeps a paragraph that merely *begins* with bracketed text from being
+* eaten. The trailing newline is optional only for the degenerate blockquote
+* whose entire content is the marker.
+*
+* Measured against the real chain rather than assumed: `remark-parse` reads
+* `[!TIP]` as a shortcut link reference, and because no definition matches,
+* `mdast-util-to-hast` puts it back as **one** leading text node —
+* `"[!TIP]\nThe generalization: "` — not as a `[`/label/`]` triple. So a single
+* anchored test on the first text node is enough, and the plugin does not have
+* to reassemble the marker across siblings.
+*/
+const MARKER = /^\[!(NOTE|TIP|IMPORTANT|WARNING|CAUTION)\][ \t]*(?:\r?\n|$)/;
+/** The first child, if it is an element. */
+function firstElement(node) {
+	const child = node.children.find((c) => c.type === "element" || c.type === "text" && c.value.trim() !== "");
+	return child?.type === "element" ? child : void 0;
+}
+/**
+* Compile `> [!KIND]` blockquotes into `data-vantage-alert="kind"`.
+*
+* Order in the chain matters twice, and both are stated in `pipeline.ts`:
+*
+* - **after `rehypeSourceLines`**, so the injected title carries no
+*   `data-source-line`. That is what keeps it out of `anchorBlockWithin`, which
+*   filters candidates to those with a finite line — otherwise a review comment
+*   on an alert would anchor to the word "Warning" instead of to the prose.
+* - **before `rehypeSanitize`**, so nothing reaches the DOM the schema has not
+*   passed. `dataVantageAlert` is allowlisted there by name *and* value, like
+*   every other `data-vantage-*` attribute.
+*/
+function rehypeVantageAlerts() {
+	return (tree) => {
+		(0, unist_util_visit.visit)(tree, "element", (node) => {
+			if (node.tagName !== "blockquote") return;
+			const paragraph = firstElement(node);
+			if (paragraph === void 0 || paragraph.tagName !== "p") return;
+			const lead = paragraph.children[0];
+			if (lead === void 0 || lead.type !== "text") return;
+			const match = MARKER.exec(lead.value);
+			if (match === null) return;
+			const kind = match[1].toLowerCase();
+			lead.value = lead.value.slice(match[0].length);
+			if (lead.value === "" && paragraph.children.length === 1) node.children = node.children.filter((c) => c !== paragraph);
+			node.properties = {
+				...node.properties,
+				dataVantageAlert: kind
+			};
+			node.children.unshift({
+				type: "element",
+				tagName: "div",
+				properties: { className: ["vantage-alert-title"] },
+				children: [{
+					type: "text",
+					value: ALERT_TITLES[kind]
+				}]
+			});
+		});
+	};
+}
+//#endregion
+//#region src/vantageDirectives.ts
+/**
+* The `tone` vocabulary: GitHub's alert words plus `muted`.
+*
+* Semantic, never chromatic (P2, Ledger OQ-3). A document says what a section
+* *is*; the theme decides what that looks like, which is what lets one document
+* render correctly in light, in dark, and in themes that do not exist yet.
+*/
+const VANTAGE_TONES = [
+	"note",
+	"tip",
+	"important",
+	"warning",
+	"caution",
+	"muted"
+];
+/** How much the block should pull the eye — separate from `tone` on purpose. */
+const VANTAGE_EMPHASIS = [
+	"strong",
+	"normal",
+	"quiet"
 ];
-var VANTAGE_COLLAPSED = ["true", "false"];
-var VANTAGE_RUNS = ["start", "middle", "end", "only"];
-var VANTAGE_STYLE_TARGETS = [
-  "p",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "li",
-  "blockquote",
-  "pre",
-  "table",
-  "tr",
-  "ul",
-  "ol",
-  "hr",
-  "div"
+/** A small chip beside the heading. */
+const VANTAGE_BADGES = [
+	"draft",
+	"stale",
+	"blocked",
+	"done",
+	"wip"
 ];
-var VANTAGE_ANCHOR_TARGETS = [
-  "p",
-  "h1",
-  "h2",
-  "h3",
-  "h4",
-  "h5",
-  "h6",
-  "li",
-  "blockquote",
-  "pre",
-  "table"
+/**
+* `collapsed` is a token, not a flag: `false` is the default written down.
+*
+* It stamps nothing on its own. Its one real effect is overriding a
+* `collapsed=true` earlier in the same merged directive run — last key wins — so
+* it is in the vocabulary rather than being an unknown value that drops. It
+* cannot cancel an *enclosing* collapsed section: a nested heading is a hidden
+* member of the outer group by design (A3), and the outer run is stamped before
+* any inner directive has been resolved.
+*/
+const VANTAGE_COLLAPSED = ["true", "false"];
+/**
+* Where a block sits in a stamped run, so section-wide CSS can join its members
+* without an adjacent-sibling combinator.
+*
+* Not cosmetic. Review mode inserts comment cards as siblings *inside* a
+* stamped run (`useReviewHighlights`), so `[tone] + [tone]` severs at every
+* commented paragraph and bleeds across the boundary between two adjacent runs
+* of different tone. An attribute survives both.
+*/
+const VANTAGE_RUNS = [
+	"start",
+	"middle",
+	"end",
+	"only"
 ];
-var STYLE_KEYS = {
-  tone: VANTAGE_TONES,
-  emphasis: VANTAGE_EMPHASIS,
-  badge: VANTAGE_BADGES,
-  collapsed: VANTAGE_COLLAPSED
+/**
+* The tags a `section`/`block` directive may stamp.
+*
+* 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.
+*
+* 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
+* sight. A checker with its own copy of this list is a checker that calls a
+* working directive an orphan, or stays silent about a dead one (D5).
+*/
+const VANTAGE_STYLE_TARGETS = [
+	"p",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"li",
+	"blockquote",
+	"pre",
+	"table",
+	"tr",
+	"ul",
+	"ol",
+	"hr",
+	"div"
+];
+/**
+* The tags an `oq` directive may stamp — strictly the tags the review system
+* can resolve an anchor on (`ANCHOR_TAGS` in the app's `MarkdownViewer`, and the
+* block map in `useReviewHighlights`). `ul`, `ol`, `tr`, `hr` and `div` are in
+* neither, so a button on one of them would build an anchor no review pass can
+* find — the "mis-wired button" D6 forbids.
+*
+* The gap between this list and `VANTAGE_STYLE_TARGETS` is why an `oq`
+* directive at column 0 above a list silently does nothing: the target is the
+* `<ul>`, not the `<li>`. The checker says so.
+*/
+const VANTAGE_ANCHOR_TARGETS = [
+	"p",
+	"h1",
+	"h2",
+	"h3",
+	"h4",
+	"h5",
+	"h6",
+	"li",
+	"blockquote",
+	"pre",
+	"table"
+];
+VANTAGE_ANCHOR_TARGETS.filter((tag) => tag !== "pre" && tag !== "table");
+const STYLE_KEYS = {
+	tone: VANTAGE_TONES,
+	emphasis: VANTAGE_EMPHASIS,
+	badge: VANTAGE_BADGES,
+	collapsed: VANTAGE_COLLAPSED
 };
-var DIRECTIVE_VOCABULARY = {
-  section: STYLE_KEYS,
-  block: STYLE_KEYS,
-  oq: { id: null, leaning: null }
+/**
+* Name → key → the closed value set for that key.
+*
+* `section` and `block` share their keys: they differ in *extent*, not in what
+* they can say. `oq`'s two keys are the design's only values with no closed set
+* — `id` is a token an author chose and `leaning` is a sentence (§8.3) — so
+* neither can be value-allowlisted, which is recorded here as `null` rather
+* than left to a caller to guess.
+*/
+const DIRECTIVE_VOCABULARY = {
+	section: STYLE_KEYS,
+	block: STYLE_KEYS,
+	oq: {
+		id: null,
+		leaning: null
+	}
 };
-var WS = /[ \t\r\n]*/y;
-var SENTINEL_PREFIX = /^[ \t\r\n]*vantage:/;
-var NAME = /[a-z][a-z0-9-]*/y;
-var UNQUOTED = /[A-Za-z0-9_.:#-]+/y;
-var QUOTED = /"[^"]*"/y;
+/**
+* `ws` is `[ \t\r\n]` — the design's grammar leaves it undefined, and `\n` has
+* to be in the set because a directive may legally wrap: a multi-line comment
+* is one node whose value contains the newlines.
+*/
+const WS = /[ \t\r\n]*/y;
+const SENTINEL_PREFIX = /^[ \t\r\n]*vantage:/;
+const NAME = /[a-z][a-z0-9-]*/y;
+const UNQUOTED = /[A-Za-z0-9_.:#-]+/y;
+/**
+* A quoted value holds anything but a `"`, `--` included: measured through the
+* real chain, `leaning="a--b"` reaches the tree intact, because HTML5 closes a
+* comment on `-->` or `--!>` and on nothing else. There is deliberately **no**
+* `--` restriction here. What a quoted value cannot hold is a terminator: a
+* `-->` inside one ends the comment early and spills the tail into the document
+* as literal text, which is a finding for the checker rather than a rule here —
+* by the time this function runs, the truncation has already happened.
+*/
+const QUOTED = /"[^"]*"/y;
+/** The whole non-whitespace run at `offset`, capped, for a quotable message. */
 function token(comment, offset) {
-  const rest = comment.slice(offset);
-  const end = rest.search(/[ \t\r\n]/);
-  const word = end === -1 ? rest : rest.slice(0, end);
-  return word.length > 24 ? `${word.slice(0, 24)}\u2026` : word;
+	const rest = comment.slice(offset);
+	const end = rest.search(/[ \t\r\n]/);
+	const word = end === -1 ? rest : rest.slice(0, end);
+	return word.length > 24 ? `${word.slice(0, 24)}…` : word;
 }
+/** The sticky match at `offset`, or `null` if the pattern does not apply. */
 function matchAt(pattern, comment, offset) {
-  pattern.lastIndex = offset;
-  const match = pattern.exec(comment);
-  return match === null ? null : match[0];
+	pattern.lastIndex = offset;
+	const match = pattern.exec(comment);
+	return match === null ? null : match[0];
 }
+/** How much whitespace sits at `offset`. `WS` matches everywhere, empty. */
 function skipWhitespace(comment, offset) {
-  return matchAt(WS, comment, offset)?.length ?? 0;
+	return matchAt(WS, comment, offset)?.length ?? 0;
 }
 function malformed(reason, offset) {
-  return { kind: "malformed", reason, offset };
+	return {
+		kind: "malformed",
+		reason,
+		offset
+	};
 }
+/**
+* Parse one comment's **inner** text — the value of a hast `comment` node, with
+* `<!--` and `-->` already stripped. `null` means "no sentinel, not ours".
+*
+* Hand-rolled rather than one regular expression, because a repeated capture
+* group keeps only its last match and the checker needs an offset per token to
+* point at the character that broke.
+*/
 function parseVantageDirective(comment) {
-  const sentinel = SENTINEL_PREFIX.exec(comment);
-  if (sentinel === null) return null;
-  let at = sentinel[0].length;
-  at += skipWhitespace(comment, at);
-  const nameOffset = at;
-  const name = matchAt(NAME, comment, at);
-  if (name === null) {
-    return malformed("no directive name after `vantage:`", at);
-  }
-  at += name.length;
-  const pairs = [];
-  while (at < comment.length) {
-    const gap = skipWhitespace(comment, at);
-    at += gap;
-    if (at >= comment.length) break;
-    if (gap === 0) {
-      return malformed(`\`${token(comment, at)}\` needs a space before it`, at);
-    }
-    const keyOffset = at;
-    const key = matchAt(NAME, comment, at);
-    if (key === null) {
-      return malformed(
-        `\`${token(comment, at)}\` is not a \`key=value\` pair`,
-        at
-      );
-    }
-    at += key.length;
-    if (comment[at] !== "=") {
-      return malformed(`\`${key}\` is not followed by \`=value\``, at);
-    }
-    at += 1;
-    const valueOffset = at;
-    const quoted = matchAt(QUOTED, comment, at);
-    if (quoted !== null) {
-      at += quoted.length;
-      pairs.push({
-        key,
-        value: quoted.slice(1, -1),
-        keyOffset,
-        valueOffset,
-        quoted: true
-      });
-      continue;
-    }
-    const unquoted = matchAt(UNQUOTED, comment, at);
-    if (unquoted === null) {
-      const found = token(comment, at);
-      return malformed(
-        found === "" ? `\`${key}=\` has no value` : `\`${found}\` is not a valid value for \`${key}\``,
-        at
-      );
-    }
-    at += unquoted.length;
-    pairs.push({ key, value: unquoted, keyOffset, valueOffset, quoted: false });
-  }
-  return { kind: "directive", name, nameOffset, pairs };
+	const sentinel = SENTINEL_PREFIX.exec(comment);
+	if (sentinel === null) return null;
+	let at = sentinel[0].length;
+	at += skipWhitespace(comment, at);
+	const nameOffset = at;
+	const name = matchAt(NAME, comment, at);
+	if (name === null) return malformed("no directive name after `vantage:`", at);
+	at += name.length;
+	const pairs = [];
+	while (at < comment.length) {
+		const gap = skipWhitespace(comment, at);
+		at += gap;
+		if (at >= comment.length) break;
+		if (gap === 0) return malformed(`\`${token(comment, at)}\` needs a space before it`, at);
+		const keyOffset = at;
+		const key = matchAt(NAME, comment, at);
+		if (key === null) return malformed(`\`${token(comment, at)}\` is not a \`key=value\` pair`, at);
+		at += key.length;
+		if (comment[at] !== "=") return malformed(`\`${key}\` is not followed by \`=value\``, at);
+		at += 1;
+		const valueOffset = at;
+		const quoted = matchAt(QUOTED, comment, at);
+		if (quoted !== null) {
+			at += quoted.length;
+			pairs.push({
+				key,
+				value: quoted.slice(1, -1),
+				keyOffset,
+				valueOffset,
+				quoted: true
+			});
+			continue;
+		}
+		const unquoted = matchAt(UNQUOTED, comment, at);
+		if (unquoted === null) {
+			const found = token(comment, at);
+			return malformed(found === "" ? `\`${key}=\` has no value` : `\`${found}\` is not a valid value for \`${key}\``, at);
+		}
+		at += unquoted.length;
+		pairs.push({
+			key,
+			value: unquoted,
+			keyOffset,
+			valueOffset,
+			quoted: false
+		});
+	}
+	return {
+		kind: "directive",
+		name,
+		nameOffset,
+		pairs
+	};
 }
-
-// src/rehypeVantageDirectives.ts
-var STYLE_TARGET_TAGS = new Set(VANTAGE_STYLE_TARGETS);
-var ANCHOR_TARGET_TAGS = new Set(VANTAGE_ANCHOR_TARGETS);
-var HEADING_DEPTHS = /* @__PURE__ */ new Map([
-  ["h1", 1],
-  ["h2", 2],
-  ["h3", 3],
-  ["h4", 4],
-  ["h5", 5],
-  ["h6", 6]
+//#endregion
+//#region src/rehypeVantageDirectives.ts
+/**
+* What a `section`/`block` and an `oq` directive may stamp.
+*
+* 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).
+*/
+const STYLE_TARGET_TAGS = new Set(VANTAGE_STYLE_TARGETS);
+const ANCHOR_TARGET_TAGS = new Set(VANTAGE_ANCHOR_TARGETS);
+const HEADING_DEPTHS = /* @__PURE__ */ new Map([
+	["h1", 1],
+	["h2", 2],
+	["h3", 3],
+	["h4", 4],
+	["h5", 5],
+	["h6", 6]
 ]);
-var RANGE_PROPERTIES = /* @__PURE__ */ new Map([
-  ["tone", "dataVantageTone"],
-  ["emphasis", "dataVantageEmphasis"]
-]);
-var POINT_PROPERTIES = /* @__PURE__ */ new Map([["badge", "dataVantageBadge"]]);
-var RUN_PROPERTY = "dataVantageRun";
-var OQ_PROPERTY = "dataVantageOq";
-var LEANING_PROPERTY = "dataVantageLeaning";
-var COLLAPSED_PROPERTY = "dataVantageCollapsed";
-var COLLAPSE_GROUP_PROPERTY = "dataVantageCollapseGroup";
-var COLLAPSE_TOGGLE_PROPERTY = "dataVantageCollapseToggle";
-var MAX_LEANING = 500;
+/**
+* Key → hast property, for the keys that treat a whole run.
+*
+* A camelCase hast property serialises to the kebab-case attribute, so
+* `dataVantageTone` is `data-vantage-tone` in every renderer.
+*
+* `tone` and `emphasis` describe what a section *is* and how loud it is, so
+* every block in the range wears them: the tone rule is a slice of one
+* continuous line down the section, and the weight applies to all of its prose.
+*
+* `collapsed` is not here because it is not one property on one block: it puts a
+* toggle on the heading and a collapsed flag plus a group id on every block the
+* heading hides, which `stampStyle` does with the three properties below.
+*/
+const RANGE_PROPERTIES = /* @__PURE__ */ new Map([["tone", "dataVantageTone"], ["emphasis", "dataVantageEmphasis"]]);
+/**
+* Key → hast property, for the keys that mark one block: the directive's target.
+*
+* `badge` is the asymmetry in the vocabulary and the reason this second map
+* exists. It is not a treatment of a run but a single chip — "a small chip after
+* the heading text" (§4.3), drawn as `[data-vantage-badge]::after` — so a
+* section-wide stamp paints the word once per paragraph, list, table and fence
+* under the heading instead of once beside it.
+*
+* The chip is fixed here rather than in the stylesheet, because narrowing the
+* CSS to `:is(h1, …, h6)` would silently draw nothing for the two placements
+* that legitimately badge a non-heading — `block badge=…` on a paragraph, and a
+* `section` that degraded onto one (A1) — and would leave an attribute stamped
+* on every block that says something untrue about it.
+*/
+const POINT_PROPERTIES = /* @__PURE__ */ new Map([["badge", "dataVantageBadge"]]);
+const RUN_PROPERTY = "dataVantageRun";
+const OQ_PROPERTY = "dataVantageOq";
+const LEANING_PROPERTY = "dataVantageLeaning";
+/**
+* The three properties `collapsed=true` stamps across a section.
+*
+* The heading takes a *different* attribute from the blocks it hides, and that
+* asymmetry is the whole design (A3): a nested `###` inside a collapsed `##` is
+* both a hidden member of the outer group and the toggle for its own, so one
+* shared attribute would make it permanently invisible and unreachable by
+* either toggle. There is no `<details>` and no wrapper — the run stays a flat
+* list of siblings, which is what keeps review comment cards, the typography
+* plugin's `h2 + *` margin resets and the anchor surface working.
+*
+* Hiding is CSS, and that CSS is gated on two markers the toggle JS sets — the
+* prose container's readiness, and an armed marker on each block whose group it
+* gave a caret (`docs/reference/inline-markup.md`, "Collapse without a wrapper"). A renderer without the JS
+* — the CLI checker's HTML, an external consumer of this package — shows every
+* block, and so does any block that ended up with no control.
+*/
+const COLLAPSED_PROPERTY = "dataVantageCollapsed";
+const COLLAPSE_GROUP_PROPERTY = "dataVantageCollapseGroup";
+const COLLAPSE_TOGGLE_PROPERTY = "dataVantageCollapseToggle";
+/** A review-comment body, not prose. Bounds the attribute; 500 is generous. */
+const MAX_LEANING = 500;
+/**
+* Nodes that may sit between a directive and its target.
+*
+* A whitespace-only `text` node always does — measured, with or without a blank
+* line in the source. Comments do too, and an unrelated `<!-- TODO -->` must not
+* break the chain: it is invisible in every renderer and deleted by the
+* sanitiser, so letting it change a directive's meaning would make behaviour
+* depend on something no reader can see.
+*/
 function isSkippable(node) {
-  if (node.type === "comment" || node.type === "doctype") return true;
-  if (node.type === "text") return node.value.trim() === "";
-  return false;
+	if (node.type === "comment" || node.type === "doctype") return true;
+	if (node.type === "text") return node.value.trim() === "";
+	return false;
 }
 function headingDepth(node) {
-  if (node.type !== "element") return void 0;
-  return HEADING_DEPTHS.get(node.tagName);
+	if (node.type !== "element") return void 0;
+	return HEADING_DEPTHS.get(node.tagName);
 }
 function setProperty(element, property, value) {
-  element.properties = element.properties ?? {};
-  element.properties[property] = value;
+	element.properties = element.properties ?? {};
+	element.properties[property] = value;
 }
+/**
+* Where a member sits in a stamped run: `only` for a lone block, otherwise
+* `start`, `middle`, `end`. See `VANTAGE_RUNS`.
+*/
 function runValue(index, length) {
-  if (length === 1) return "only";
-  if (index === 0) return "start";
-  return index === length - 1 ? "end" : "middle";
+	if (length === 1) return "only";
+	if (index === 0) return "start";
+	return index === length - 1 ? "end" : "middle";
 }
+/** The closed value set for one key, or `undefined` when the key is unknown. */
 function vocabularyOf(name, key) {
-  return DIRECTIVE_VOCABULARY[name]?.[key];
+	return DIRECTIVE_VOCABULARY[name]?.[key];
 }
 function accepts(name, key, value) {
-  const values = vocabularyOf(name, key);
-  if (values === void 0) return false;
-  return values === null || values.includes(value);
+	const values = vocabularyOf(name, key);
+	if (values === void 0) return false;
+	return values === null || values.includes(value);
 }
+/**
+* The nodes one style directive reaches, as indexes into its own parent's
+* children — never outside that array, so a directive inside a blockquote or a
+* list item cannot stamp past it.
+*
+* Position picks the target (the next sibling element); the name picks how far
+* the stamp goes. `section` before a heading takes the heading and every
+* following sibling until the first heading of the same or shallower depth;
+* `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.
+*/
 function styleRange(children, targetIndex, name) {
-  const range = [targetIndex];
-  const depth = name === "section" ? headingDepth(children[targetIndex]) : void 0;
-  if (depth === void 0) return range;
-  for (let i = targetIndex + 1; i < children.length; i++) {
-    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);
-    }
-  }
-  return range;
+	const range = [targetIndex];
+	const depth = name === "section" ? headingDepth(children[targetIndex]) : void 0;
+	if (depth === void 0) return range;
+	for (let i = targetIndex + 1; i < children.length; i++) {
+		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);
+	}
+	return range;
 }
+/**
+* Whether this directive collapses its section — three ways to say no.
+*
+* `collapsed=false` stamps nothing: it is the default written down, and "not
+* collapsed" is not a thing an attribute can usefully say. Its only effect is
+* upstream of here — `stampRun` merges a run of comments last-key-wins, so a
+* `false` cancels a `true` in the *same* run. It does not cancel an *enclosing*
+* section: `styleRange` walks the outer heading's whole sibling span before any
+* inner directive is resolved, and a nested heading being a hidden member of the
+* outer group is the design (A3), not an oversight.
+*
+* A `block` scope is **dropped**, and so is a `section` that degraded onto
+* a non-heading, because both would hide a lone paragraph with nothing left
+* behind to reveal it — content that is simply gone, which is the P1/D8 failure
+* the readiness gate exists to prevent. Only a heading can be a summary.
+*/
 function collapsesSection(name, pairs, target) {
-  if (name !== "section") return false;
-  if (pairs.get("collapsed") !== "true") return false;
-  return headingDepth(target) !== void 0;
+	if (name !== "section") return false;
+	if (pairs.get("collapsed") !== "true") return false;
+	return headingDepth(target) !== void 0;
 }
 function stampStyle(children, targetIndex, name, pairs, state) {
-  const target = children[targetIndex];
-  if (!STYLE_TARGET_TAGS.has(target.tagName)) return;
-  const rangeStamps = [];
-  const targetStamps = [];
-  for (const [key, value] of pairs) {
-    if (!accepts(name, key, value)) continue;
-    const rangeProperty = RANGE_PROPERTIES.get(key);
-    if (rangeProperty !== void 0) {
-      rangeStamps.push([rangeProperty, value]);
-      continue;
-    }
-    const pointProperty = POINT_PROPERTIES.get(key);
-    if (pointProperty !== void 0) targetStamps.push([pointProperty, value]);
-  }
-  const collapses = collapsesSection(name, pairs, target);
-  if (rangeStamps.length === 0 && targetStamps.length === 0 && !collapses) {
-    return;
-  }
-  const range = styleRange(children, targetIndex, name);
-  const group = collapses && range.length > 1 ? String(state.nextGroup++) : void 0;
-  for (let i = 0; i < range.length; i++) {
-    const element = children[range[i]];
-    for (const [property, value] of rangeStamps) {
-      setProperty(element, property, value);
-    }
-    if (i === 0) {
-      for (const [property, value] of targetStamps) {
-        setProperty(element, property, value);
-      }
-    }
-    if (rangeStamps.length > 0) {
-      setProperty(element, RUN_PROPERTY, runValue(i, range.length));
-    }
-    if (group === void 0) continue;
-    if (i === 0) {
-      setProperty(element, COLLAPSE_TOGGLE_PROPERTY, group);
-    } else {
-      setProperty(element, COLLAPSED_PROPERTY, "true");
-      setProperty(element, COLLAPSE_GROUP_PROPERTY, group);
-    }
-  }
+	const target = children[targetIndex];
+	if (!STYLE_TARGET_TAGS.has(target.tagName)) return;
+	const rangeStamps = [];
+	const targetStamps = [];
+	for (const [key, value] of pairs) {
+		if (!accepts(name, key, value)) continue;
+		const rangeProperty = RANGE_PROPERTIES.get(key);
+		if (rangeProperty !== void 0) {
+			rangeStamps.push([rangeProperty, value]);
+			continue;
+		}
+		const pointProperty = POINT_PROPERTIES.get(key);
+		if (pointProperty !== void 0) targetStamps.push([pointProperty, value]);
+	}
+	const collapses = collapsesSection(name, pairs, target);
+	if (rangeStamps.length === 0 && targetStamps.length === 0 && !collapses) return;
+	const range = styleRange(children, targetIndex, name);
+	const group = collapses && range.length > 1 ? String(state.nextGroup++) : void 0;
+	for (let i = 0; i < range.length; i++) {
+		const element = children[range[i]];
+		for (const [property, value] of rangeStamps) setProperty(element, property, value);
+		if (i === 0) for (const [property, value] of targetStamps) setProperty(element, property, value);
+		if (rangeStamps.length > 0) setProperty(element, RUN_PROPERTY, runValue(i, range.length));
+		if (group === void 0) continue;
+		if (i === 0) setProperty(element, COLLAPSE_TOGGLE_PROPERTY, group);
+		else {
+			setProperty(element, COLLAPSED_PROPERTY, "true");
+			setProperty(element, COLLAPSE_GROUP_PROPERTY, group);
+		}
+	}
 }
 function stampOq(target, pairs) {
-  setProperty(target, OQ_PROPERTY, "true");
-  const leaning = pairs.get("leaning");
-  if (leaning === void 0) return;
-  const text = leaning.replace(/\s+/g, " ").trim().slice(0, MAX_LEANING);
-  if (text !== "") setProperty(target, LEANING_PROPERTY, text);
+	setProperty(target, OQ_PROPERTY, "true");
+	const leaning = pairs.get("leaning");
+	if (leaning === void 0) return;
+	const text = leaning.replace(/\s+/g, " ").trim().slice(0, MAX_LEANING);
+	if (text !== "") setProperty(target, LEANING_PROPERTY, text);
 }
+/**
+* Merge one run of directives onto one target, then stamp.
+*
+* Merging is defined on the tree, not on the source: every directive comment up
+* to the target merges, last-key-wins, whether or not blank lines separate
+* them. Measured — adjacent comments and comments separated by a blank line
+* produce byte-identical trees, so a rule that told them apart would have to
+* re-read line numbers to do it.
+*/
 function stampRun(children, targetIndex, run, state) {
-  const target = children[targetIndex];
-  const style = /* @__PURE__ */ new Map();
-  const oq = /* @__PURE__ */ new Map();
-  let styleName;
-  let hasOq = false;
-  for (const directive of run) {
-    if (directive.name === "section" || directive.name === "block") {
-      styleName = directive.name;
-      for (const pair of directive.pairs) style.set(pair.key, pair.value);
-    } else if (directive.name === "oq") {
-      hasOq = true;
-      for (const pair of directive.pairs) oq.set(pair.key, pair.value);
-    }
-  }
-  if (styleName !== void 0) {
-    stampStyle(children, targetIndex, styleName, style, state);
-  }
-  if (hasOq && ANCHOR_TARGET_TAGS.has(target.tagName)) {
-    stampOq(target, oq);
-  }
+	const target = children[targetIndex];
+	const style = /* @__PURE__ */ new Map();
+	const oq = /* @__PURE__ */ new Map();
+	let styleName;
+	let hasOq = false;
+	for (const directive of run) if (directive.name === "section" || directive.name === "block") {
+		styleName = directive.name;
+		for (const pair of directive.pairs) style.set(pair.key, pair.value);
+	} else if (directive.name === "oq") {
+		hasOq = true;
+		for (const pair of directive.pairs) oq.set(pair.key, pair.value);
+	}
+	if (styleName !== void 0) stampStyle(children, targetIndex, styleName, style, state);
+	if (hasOq && ANCHOR_TARGET_TAGS.has(target.tagName)) stampOq(target, oq);
 }
+/** A directive comment, or `undefined` for anything else — malformed included. */
 function directiveOf(node) {
-  if (node.type !== "comment") return void 0;
-  const parsed = parseVantageDirective(node.value);
-  return parsed !== null && parsed.kind === "directive" ? parsed : void 0;
+	if (node.type !== "comment") return void 0;
+	const parsed = parseVantageDirective(node.value);
+	return parsed !== null && parsed.kind === "directive" ? parsed : void 0;
 }
+/**
+* One left-to-right pass over a parent's children, recursing into elements.
+*
+* The whole tree, not just the root: `rehype-raw` leaves comment nodes inside
+* `blockquote`, inside `li`, inside `td` and inline inside `p`, and the real
+* Open Questions layout puts the `oq` directive inside a list item — so a
+* root-only walk finds none of them.
+*
+* Pass order is also what resolves a nested section: an inner heading's
+* directive necessarily sits at a higher child index than the outer directive
+* that ranged over it, so each property is simply last-write-wins.
+*/
 function processChildren(parent, state) {
-  const children = parent.children;
-  let i = 0;
-  while (i < children.length) {
-    const node = children[i];
-    if (node.type === "element") {
-      processChildren(node, state);
-      i++;
-      continue;
-    }
-    const first = directiveOf(node);
-    if (first === void 0) {
-      i++;
-      continue;
-    }
-    const run = [first];
-    let j = i + 1;
-    let targetIndex = -1;
-    for (; j < children.length; j++) {
-      const next = children[j];
-      if (next.type === "element") {
-        targetIndex = j;
-        break;
-      }
-      if (!isSkippable(next)) break;
-      const directive = directiveOf(next);
-      if (directive !== void 0) run.push(directive);
-    }
-    if (targetIndex >= 0) stampRun(children, targetIndex, run, state);
-    i = j;
-  }
+	const children = parent.children;
+	let i = 0;
+	while (i < children.length) {
+		const node = children[i];
+		if (node.type === "element") {
+			processChildren(node, state);
+			i++;
+			continue;
+		}
+		const first = directiveOf(node);
+		if (first === void 0) {
+			i++;
+			continue;
+		}
+		const run = [first];
+		let j = i + 1;
+		let targetIndex = -1;
+		for (; j < children.length; j++) {
+			const next = children[j];
+			if (next.type === "element") {
+				targetIndex = j;
+				break;
+			}
+			if (!isSkippable(next)) break;
+			const directive = directiveOf(next);
+			if (directive !== void 0) run.push(directive);
+		}
+		if (targetIndex >= 0) stampRun(children, targetIndex, run, state);
+		i = j;
+	}
 }
-var rehypeVantageDirectives = () => {
-  return (tree) => {
-    processChildren(tree, { nextGroup: 1 });
-  };
+const rehypeVantageDirectives = () => {
+	return (tree) => {
+		processChildren(tree, { nextGroup: 1 });
+	};
 };
-var rehypeVantageDirectives_default = rehypeVantageDirectives;
-
-// src/rehypeVantageMathStamps.ts
-var CARRIED_KEY = "vantageDisplayMathStamps";
+//#endregion
+//#region src/rehypeVantageMathStamps.ts
+/**
+* Where the snapshot lives between the two halves.
+*
+* `file.data` rather than a closure or a module-level map: `buildPipeline` is
+* allowed to be built once and run over many documents, and per-file state is
+* the only kind that cannot leak from one of those to the next.
+*/
+const CARRIED_KEY = "vantageDisplayMathStamps";
 function classNames(node) {
-  const value = node.properties?.className;
-  return Array.isArray(value) ? value.map(String) : [];
+	const value = node.properties?.className;
+	return Array.isArray(value) ? value.map(String) : [];
 }
+/**
+* A `<pre>` `rehype-katex` will replace — its own condition, restated.
+*
+* `language-math` is the only class to test: `rehype-katex` keys the
+* pre-as-scope branch on it, and the sanitiser strips the `math-display` that
+* `remark-math` also emits (measured — a stamped fence arrives here with
+* `className: ["language-math"]` alone).
+*/
 function isDisplayMath(node) {
-  if (node.type !== "element" || node.tagName !== "pre") return false;
-  return node.children.some(
-    (child) => child.type === "element" && child.tagName === "code" && classNames(child).includes("language-math")
-  );
+	if (node.type !== "element" || node.tagName !== "pre") return false;
+	return node.children.some((child) => child.type === "element" && child.tagName === "code" && classNames(child).includes("language-math"));
 }
+/**
+* What is worth carrying: everything this pipeline stamped itself.
+*
+* Deliberately not the whole property bag. `className`, `style` and `id` belong
+* to the element KaTeX is about to build, and copying a `<pre>`'s onto a
+* `<span class="katex-display">` would fight it.
+*/
 function carriedProperties(properties) {
-  const carried = {};
-  for (const [key, value] of Object.entries(properties ?? {})) {
-    if (key === "dataSourceLine" || key.startsWith("dataVantage")) {
-      carried[key] = value;
-    }
-  }
-  return carried;
+	const carried = {};
+	for (const [key, value] of Object.entries(properties ?? {})) if (key === "dataSourceLine" || key.startsWith("dataVantage")) carried[key] = value;
+	return carried;
 }
 function collect(parent, out) {
-  const children = parent.children;
-  for (let i = 0; i < children.length; i++) {
-    const node = children[i];
-    if (node.type !== "element") continue;
-    if (isDisplayMath(node)) {
-      const properties = carriedProperties(node.properties);
-      if (Object.keys(properties).length > 0) {
-        out.push({
-          parent,
-          anchor: i === 0 ? void 0 : children[i - 1],
-          properties
-        });
-      }
-      continue;
-    }
-    collect(node, out);
-  }
+	const children = parent.children;
+	for (let i = 0; i < children.length; i++) {
+		const node = children[i];
+		if (node.type !== "element") continue;
+		if (isDisplayMath(node)) {
+			const properties = carriedProperties(node.properties);
+			if (Object.keys(properties).length > 0) out.push({
+				parent,
+				anchor: i === 0 ? void 0 : children[i - 1],
+				properties
+			});
+			continue;
+		}
+		collect(node, out);
+	}
 }
 function reapply(carried) {
-  for (const { parent, anchor, properties } of carried) {
-    const siblings = parent.children;
-    let index = 0;
-    if (anchor !== void 0) {
-      const at = siblings.indexOf(anchor);
-      if (at === -1) continue;
-      index = at + 1;
-    }
-    const replacement = siblings[index];
-    if (replacement === void 0 || replacement.type !== "element") continue;
-    if (!classNames(replacement).some((name) => name.startsWith("katex"))) {
-      continue;
-    }
-    replacement.properties ??= {};
-    for (const [key, value] of Object.entries(properties)) {
-      replacement.properties[key] ??= value;
-    }
-  }
+	for (const { parent, anchor, properties } of carried) {
+		const siblings = parent.children;
+		let index = 0;
+		if (anchor !== void 0) {
+			const at = siblings.indexOf(anchor);
+			if (at === -1) continue;
+			index = at + 1;
+		}
+		const replacement = siblings[index];
+		if (replacement === void 0 || replacement.type !== "element") continue;
+		if (!classNames(replacement).some((name) => name.startsWith("katex"))) continue;
+		replacement.properties ??= {};
+		for (const [key, value] of Object.entries(properties)) replacement.properties[key] ??= value;
+	}
 }
-var rehypeCaptureMathStamps = () => {
-  return (tree, file) => {
-    const carried = [];
-    collect(tree, carried);
-    file.data[CARRIED_KEY] = carried;
-  };
+/** Snapshot every stamped display-math block. Register before `rehypeKatex`. */
+const rehypeCaptureMathStamps = () => {
+	return (tree, file) => {
+		const carried = [];
+		collect(tree, carried);
+		file.data[CARRIED_KEY] = carried;
+	};
 };
-var rehypeRestoreMathStamps = () => {
-  return (_tree, file) => {
-    const carried = file.data[CARRIED_KEY];
-    delete file.data[CARRIED_KEY];
-    if (Array.isArray(carried)) reapply(carried);
-  };
+/** Re-apply the snapshot. Register immediately after `rehypeKatex`. */
+const rehypeRestoreMathStamps = () => {
+	return (_tree, file) => {
+		const carried = file.data[CARRIED_KEY];
+		delete file.data[CARRIED_KEY];
+		if (Array.isArray(carried)) reapply(carried);
+	};
 };
-var SAFE_STYLE_PROPERTIES = [
-  // Box metrics. `top`/`right`/`bottom`/`left` are inert now that `position` is
-  // banned, and they stay only because dropping them would fail the whole
-  // attribute for a document that writes one — the all-or-nothing rule below
-  // makes every removal a behaviour change. They buy an attacker nothing that
-  // negative `margin` does not already buy.
-  "height",
-  "min-height",
-  "max-height",
-  "width",
-  "min-width",
-  "max-width",
-  "top",
-  "bottom",
-  "left",
-  "right",
-  "margin",
-  "margin-top",
-  "margin-right",
-  "margin-bottom",
-  "margin-left",
-  "padding",
-  "padding-top",
-  "padding-right",
-  "padding-bottom",
-  "padding-left",
-  // Rules and boxes.
-  "border",
-  "border-style",
-  "border-color",
-  "border-width",
-  "border-top-width",
-  "border-right-width",
-  "border-bottom-width",
-  "border-left-width",
-  "border-top-style",
-  "border-right-style",
-  "border-bottom-style",
-  "border-left-style",
-  "border-top-color",
-  "border-right-color",
-  "border-bottom-color",
-  "border-left-color",
-  "border-radius",
-  // Typography.
-  "color",
-  "background-color",
-  "font",
-  "font-size",
-  "font-style",
-  "font-weight",
-  "font-family",
-  "font-variant",
-  "line-height",
-  "letter-spacing",
-  "word-spacing",
-  "text-align",
-  "text-decoration",
-  "text-indent",
-  "white-space",
-  "vertical-align",
-  "list-style-type",
-  // Flow.
-  "display",
-  "float",
-  "clear",
-  "opacity",
-  "overflow"
-];
-var VALUE = `[^;:()"'\\\\]*`;
-var DECLARATION = `(?:(?:${SAFE_STYLE_PROPERTIES.join("|")})\\s*:${VALUE})`;
-var SAFE_STYLE = new RegExp(
-  `^\\s*(?:${DECLARATION};\\s*)*${DECLARATION}?$`,
-  "i"
-);
-var COLLAPSE_GROUP_ID = /^[0-9]+$/;
-var sanitizeSchema = {
-  ...rehypeSanitize.defaultSchema,
-  tagNames: [
-    ...rehypeSanitize.defaultSchema.tagNames || [],
-    // KaTeX MathML elements
-    "math",
-    "semantics",
-    "mrow",
-    "mi",
-    "mo",
-    "mn",
-    "msup",
-    "msub",
-    "mfrac",
-    "mover",
-    "munder",
-    "msqrt",
-    "mroot",
-    "mtable",
-    "mtr",
-    "mtd",
-    "mtext",
-    "mspace",
-    "annotation",
-    // Other
-    "figure",
-    "figcaption",
-    "summary",
-    "details"
-  ],
-  attributes: {
-    ...rehypeSanitize.defaultSchema.attributes,
-    "*": [
-      ...rehypeSanitize.defaultSchema.attributes?.["*"] || [],
-      "className",
-      ["style", SAFE_STYLE],
-      "dataSourceLine",
-      // What `rehypeVantageDirectives` compiles a `<!-- vantage: … -->` comment
-      // into, named individually — never by a `data-vantage-*` wildcard, which
-      // would readmit whatever a future bug emits and whatever a document
-      // hand-writes as raw HTML.
-      //
-      // The value lists are the belt to the plugin's braces: the vocabulary is
-      // closed in the plugin *and* here, imported from the one module that
-      // defines it, so even if a refactor let an unvalidated value reach the
-      // tree the sanitiser still refuses it.
-      ["dataVantageTone", ...VANTAGE_TONES],
-      ["dataVantageEmphasis", ...VANTAGE_EMPHASIS],
-      ["dataVantageBadge", ...VANTAGE_BADGES],
-      ["dataVantageCollapsed", ...VANTAGE_COLLAPSED],
-      // The other half of `collapsed`: which group a hidden block belongs to,
-      // and which group a heading toggles. Both are plugin-minted counters with
-      // no vocabulary to allowlist, so they take a pattern instead —
-      // `hast-util-sanitize` accepts a `RegExp` in place of a literal value.
-      // A pattern rather than a bare name because the JS interpolates the value
-      // into a selector: anything but digits has no business reaching it.
-      ["dataVantageCollapseGroup", COLLAPSE_GROUP_ID],
-      ["dataVantageCollapseToggle", COLLAPSE_GROUP_ID],
-      ["dataVantageRun", ...VANTAGE_RUNS],
-      ["dataVantageOq", "true"],
-      // The design's one genuinely free-text value: the body of a review
-      // comment, so it cannot be value-allowlisted and this entry is name-only.
-      // Two defences remain rather than three — `hast` escapes the value on
-      // serialisation and React sets it through the DOM property path, so it
-      // cannot break out of the attribute — and the honest record of that is in
-      // the design doc rather than a third layer implied here.
-      "dataVantageLeaning"
-    ],
-    code: [...rehypeSanitize.defaultSchema.attributes?.code || [], "className"],
-    span: [
-      ...rehypeSanitize.defaultSchema.attributes?.span || [],
-      "className",
-      ["style", SAFE_STYLE]
-    ],
-    div: [
-      ...rehypeSanitize.defaultSchema.attributes?.div || [],
-      "className",
-      ["style", SAFE_STYLE]
-    ],
-    a: [...rehypeSanitize.defaultSchema.attributes?.a || [], "id", "className"],
-    math: ["xmlns"],
-    annotation: ["encoding"],
-    img: [...rehypeSanitize.defaultSchema.attributes?.img || [], "loading"],
-    td: [...rehypeSanitize.defaultSchema.attributes?.td || [], ["style", SAFE_STYLE]],
-    th: [...rehypeSanitize.defaultSchema.attributes?.th || [], ["style", SAFE_STYLE]]
-  }
+//#endregion
+//#region src/sanitize.ts
+/**
+* Sanitization schema for the rendering pipeline.
+* Allows GFM, KaTeX MathML, syntax highlighting classes, and
+* data-source-line attributes while blocking XSS vectors.
+*/
+const DECLARATION = `(?:(?:${[
+	"height",
+	"min-height",
+	"max-height",
+	"width",
+	"min-width",
+	"max-width",
+	"top",
+	"bottom",
+	"left",
+	"right",
+	"margin",
+	"margin-top",
+	"margin-right",
+	"margin-bottom",
+	"margin-left",
+	"padding",
+	"padding-top",
+	"padding-right",
+	"padding-bottom",
+	"padding-left",
+	"border",
+	"border-style",
+	"border-color",
+	"border-width",
+	"border-top-width",
+	"border-right-width",
+	"border-bottom-width",
+	"border-left-width",
+	"border-top-style",
+	"border-right-style",
+	"border-bottom-style",
+	"border-left-style",
+	"border-top-color",
+	"border-right-color",
+	"border-bottom-color",
+	"border-left-color",
+	"border-radius",
+	"color",
+	"background-color",
+	"font",
+	"font-size",
+	"font-style",
+	"font-weight",
+	"font-family",
+	"font-variant",
+	"line-height",
+	"letter-spacing",
+	"word-spacing",
+	"text-align",
+	"text-decoration",
+	"text-indent",
+	"white-space",
+	"vertical-align",
+	"list-style-type",
+	"display",
+	"float",
+	"clear",
+	"opacity",
+	"overflow"
+].join("|")})\\s*:[^;:()"'\\\\]*)`;
+const SAFE_STYLE = new RegExp(`^\\s*(?:${DECLARATION};\\s*)*${DECLARATION}?$`, "i");
+/**
+* A collapse group id: one or more digits, anchored.
+*
+* The plugin mints these as a per-document counter, so there is no vocabulary to
+* list. Keeping the shape narrow matters anyway — the toggle JS builds a
+* `[data-vantage-collapse-group="…"]` selector out of the value, and a document
+* that hand-wrote raw HTML is the only way a non-numeric one could ever appear.
+*/
+const COLLAPSE_GROUP_ID = /^[0-9]+$/;
+/**
+* Never set `allowComments` here.
+*
+* `hast-util-sanitize` drops comment nodes because that boolean defaults to
+* `false` — comments are not elements, so `tagNames` has nothing to do with it.
+* `rehypeVantageDirectives` relies on that deletion: it consumes a
+* `<!-- vantage: … -->` comment into attributes and deliberately leaves the node
+* for the sanitiser. Turning the switch on readmits every directive comment —
+* valid and malformed alike — into the rendered HTML, which breaks the carrier's
+* whole premise. `vantageDirectives.test.ts` ("leaves no comment in the rendered
+* markup") is the guard.
+*/
+const sanitizeSchema = {
+	...rehype_sanitize.defaultSchema,
+	tagNames: [
+		...rehype_sanitize.defaultSchema.tagNames || [],
+		"math",
+		"semantics",
+		"mrow",
+		"mi",
+		"mo",
+		"mn",
+		"msup",
+		"msub",
+		"mfrac",
+		"mover",
+		"munder",
+		"msqrt",
+		"mroot",
+		"mtable",
+		"mtr",
+		"mtd",
+		"mtext",
+		"mspace",
+		"annotation",
+		"figure",
+		"figcaption",
+		"summary",
+		"details"
+	],
+	attributes: {
+		...rehype_sanitize.defaultSchema.attributes,
+		"*": [
+			...rehype_sanitize.defaultSchema.attributes?.["*"] || [],
+			"className",
+			["style", SAFE_STYLE],
+			"dataSourceLine",
+			["dataVantageTone", ...VANTAGE_TONES],
+			["dataVantageEmphasis", ...VANTAGE_EMPHASIS],
+			["dataVantageBadge", ...VANTAGE_BADGES],
+			["dataVantageCollapsed", ...VANTAGE_COLLAPSED],
+			["dataVantageCollapseGroup", COLLAPSE_GROUP_ID],
+			["dataVantageCollapseToggle", COLLAPSE_GROUP_ID],
+			["dataVantageRun", ...VANTAGE_RUNS],
+			["dataVantageOq", "true"],
+			["dataVantageAlert", ...VANTAGE_ALERTS],
+			"dataVantageLeaning"
+		],
+		code: [...rehype_sanitize.defaultSchema.attributes?.code || [], "className"],
+		span: [
+			...rehype_sanitize.defaultSchema.attributes?.span || [],
+			"className",
+			["style", SAFE_STYLE]
+		],
+		div: [
+			...rehype_sanitize.defaultSchema.attributes?.div || [],
+			"className",
+			["style", SAFE_STYLE]
+		],
+		a: [
+			...rehype_sanitize.defaultSchema.attributes?.a || [],
+			"id",
+			"className"
+		],
+		math: ["xmlns"],
+		annotation: ["encoding"],
+		img: [...rehype_sanitize.defaultSchema.attributes?.img || [], "loading"],
+		td: [...rehype_sanitize.defaultSchema.attributes?.td || [], ["style", SAFE_STYLE]],
+		th: [...rehype_sanitize.defaultSchema.attributes?.th || [], ["style", SAFE_STYLE]]
+	}
 };
-
-// src/pipeline.ts
+//#endregion
+//#region src/pipeline.ts
+/**
+* The mdast half of the chain. Exported on its own because there is a real
+* mdast-only consumer: the CLI checker parses documents without ever running
+* rehype (`packages/vantage-check/src/core/document.ts`), and it has to parse
+* them exactly the way the viewer does.
+*/
 function buildRemarkPlugins(options = {}) {
-  const { gfm = true, math = true } = options;
-  const plugins = [];
-  if (gfm) plugins.push([remarkGfm__default.default, { singleTilde: false }]);
-  if (math) plugins.push([remarkMath__default.default, { singleDollarTextMath: false }]);
-  return plugins;
+	const { gfm = true, math = true } = options;
+	const plugins = [];
+	if (gfm) plugins.push([remark_gfm.default, { singleTilde: false }]);
+	if (math) plugins.push([remark_math.default, { singleDollarTextMath: false }]);
+	return plugins;
 }
+/** The hast half. Deliberately not exported: see `buildPipeline`. */
 function buildRehypePlugins(options = {}) {
-  const {
-    math = true,
-    highlight = true,
-    sourceLines = true,
-    sanitize = true,
-    bodyLineOffset = 0
-  } = options;
-  const plugins = [rehypeRaw__default.default];
-  if (sourceLines) {
-    plugins.push([rehypeSourceLines_default, { offset: bodyLineOffset }]);
-  }
-  plugins.push(rehypeVantageDirectives_default);
-  if (sanitize) plugins.push([rehypeSanitize__default.default, sanitizeSchema]);
-  plugins.push(rehypeSlug__default.default);
-  if (highlight) plugins.push(rehypeHighlight__default.default);
-  if (math) {
-    plugins.push(rehypeCaptureMathStamps, rehypeKatex__default.default, rehypeRestoreMathStamps);
-  }
-  return plugins;
+	const { math = true, highlight = true, sourceLines = true, sanitize = true, bodyLineOffset = 0 } = options;
+	const plugins = [rehype_raw.default];
+	if (sourceLines) plugins.push([rehypeSourceLines, { offset: bodyLineOffset }]);
+	plugins.push(rehypeVantageAlerts);
+	plugins.push(rehypeVantageDirectives);
+	if (sanitize) plugins.push([rehype_sanitize.default, sanitizeSchema]);
+	plugins.push(rehype_slug.default);
+	if (highlight) plugins.push(rehype_highlight.default);
+	if (math) plugins.push(rehypeCaptureMathStamps, rehype_katex.default, rehypeRestoreMathStamps);
+	return plugins;
 }
+/**
+* Both halves from one options object.
+*
+* This is what every renderer calls. It takes one object rather than exposing
+* the two builders because `math` spans both halves — `remark-math` parses the
+* delimiters, `rehype-katex` renders the result — and two calls are two places
+* to forget the second one.
+*
+* Returns fresh arrays on every call and reads no module-level state; keep it
+* that way, so a plugin in the chain cannot become a function of how many times
+* the chain has been built.
+*/
 function buildPipeline(options = {}) {
-  return {
-    remarkPlugins: buildRemarkPlugins(options),
-    rehypePlugins: buildRehypePlugins(options)
-  };
+	return {
+		remarkPlugins: buildRemarkPlugins(options),
+		rehypePlugins: buildRehypePlugins(options)
+	};
 }
+//#endregion
+//#region src/frontmatter.ts
+/**
+* Frontmatter parser for YAML (---) and TOML (+++) delimited content.
+* Works in both browser and server environments.
+*/
+/**
+* Parse frontmatter from markdown content.
+* Supports YAML (delimited by ---) and TOML (delimited by +++).
+*/
 function parseFrontmatter(content) {
-  if (content.startsWith("+++")) {
-    return parseFrontmatterWithDelimiter(content, "+++", "toml");
-  }
-  if (content.startsWith("---")) {
-    return parseFrontmatterWithDelimiter(content, "---", "yaml");
-  }
-  return withOffset(content, {
-    frontmatter: {},
-    body: content,
-    format: "none"
-  });
+	if (content.startsWith("+++")) return parseFrontmatterWithDelimiter(content, "+++", "toml");
+	if (content.startsWith("---")) return parseFrontmatterWithDelimiter(content, "---", "yaml");
+	return withOffset(content, {
+		frontmatter: {},
+		body: content,
+		format: "none"
+	});
 }
+/**
+* Fill in `bodyLineOffset`. `body` is always a suffix of `content`, so the
+* newlines in the prefix that was stripped are exactly the shift — which also
+* accounts for the blank line consumed after the closing delimiter.
+*/
 function withOffset(content, parsed) {
-  const stripped = content.slice(0, content.length - parsed.body.length);
-  let bodyLineOffset = 0;
-  for (const ch of stripped) {
-    if (ch === "\n") bodyLineOffset++;
-  }
-  return { ...parsed, bodyLineOffset };
+	const stripped = content.slice(0, content.length - parsed.body.length);
+	let bodyLineOffset = 0;
+	for (const ch of stripped) if (ch === "\n") bodyLineOffset++;
+	return {
+		...parsed,
+		bodyLineOffset
+	};
 }
 function parseFrontmatterWithDelimiter(content, delimiter, format) {
-  const searchStart = delimiter.length;
-  const endIndex = content.indexOf(`
-${delimiter}`, searchStart);
-  if (endIndex === -1) {
-    return withOffset(content, {
-      frontmatter: {},
-      body: content,
-      format: "none",
-      problem: { kind: "unterminated", delimiter }
-    });
-  }
-  const raw = content.slice(searchStart + 1, endIndex).trim();
-  const bodyStart = endIndex + 1 + delimiter.length;
-  const body = content.slice(bodyStart).replace(/^\n/, "");
-  try {
-    const parsed = format === "toml" ? smolToml.parse(raw) : YAML__default.default.parse(raw);
-    return withOffset(content, {
-      frontmatter: parsed || {},
-      body,
-      format,
-      ...isMapping(parsed) ? {} : { problem: { kind: "not-a-mapping", delimiter } }
-    });
-  } catch (error) {
-    return withOffset(content, {
-      frontmatter: {},
-      body: content,
-      format: "none",
-      problem: { kind: "invalid", delimiter, ...errorPosition(error) }
-    });
-  }
+	const searchStart = delimiter.length;
+	const endIndex = content.indexOf(`\n${delimiter}`, searchStart);
+	if (endIndex === -1) return withOffset(content, {
+		frontmatter: {},
+		body: content,
+		format: "none",
+		problem: {
+			kind: "unterminated",
+			delimiter
+		}
+	});
+	const raw = content.slice(searchStart + 1, endIndex).trim();
+	const bodyStart = endIndex + 1 + delimiter.length;
+	const body = content.slice(bodyStart).replace(/^\n/, "");
+	try {
+		const parsed = format === "toml" ? (0, smol_toml.parse)(raw) : yaml.default.parse(raw);
+		return withOffset(content, {
+			frontmatter: parsed || {},
+			body,
+			format,
+			...isMapping(parsed) ? {} : { problem: {
+				kind: "not-a-mapping",
+				delimiter
+			} }
+		});
+	} catch (error) {
+		return withOffset(content, {
+			frontmatter: {},
+			body: content,
+			format: "none",
+			problem: {
+				kind: "invalid",
+				delimiter,
+				...errorPosition(error)
+			}
+		});
+	}
 }
+/** Empty frontmatter is fine; a scalar or a list where a table belongs is not. */
 function isMapping(value) {
-  return value === null || value === void 0 || typeof value === "object" && !Array.isArray(value);
+	return value === null || value === void 0 || typeof value === "object" && !Array.isArray(value);
 }
+/**
+* Pull the parser's message and, where it gave one, the position inside the
+* frontmatter block. `yaml` reports `linePos`; `smol-toml` reports `line` and
+* `column`. Both are optional and both are read defensively — a missing
+* position costs a less precise report, a wrong assumption costs a crash.
+*/
 function errorPosition(error) {
-  const message = error instanceof Error ? error.message : String(error);
-  const source = error;
-  const yamlPosition = source?.linePos?.[0];
-  if (typeof yamlPosition?.line === "number") {
-    return {
-      message,
-      line: yamlPosition.line,
-      ...typeof yamlPosition.col === "number" ? { column: yamlPosition.col } : {}
-    };
-  }
-  if (typeof source?.line === "number") {
-    return {
-      message,
-      line: source.line,
-      ...typeof source.column === "number" ? { column: source.column } : {}
-    };
-  }
-  return { message };
+	const message = error instanceof Error ? error.message : String(error);
+	const source = error;
+	const yamlPosition = source?.linePos?.[0];
+	if (typeof yamlPosition?.line === "number") return {
+		message,
+		line: yamlPosition.line,
+		...typeof yamlPosition.col === "number" ? { column: yamlPosition.col } : {}
+	};
+	if (typeof source?.line === "number") return {
+		message,
+		line: source.line,
+		...typeof source.column === "number" ? { column: source.column } : {}
+	};
+	return { message };
 }
-
-// src/mermaidCache.ts
-var svgCache = /* @__PURE__ */ new Map();
-
-// src/mermaidLoader.ts
-var mermaidInstance = null;
-var mermaidLoading = null;
-var isDark = () => typeof document !== "undefined" && document.documentElement.classList.contains("dark");
+//#endregion
+//#region src/mermaidCache.ts
+const svgCache = /* @__PURE__ */ new Map();
+//#endregion
+//#region src/mermaidLoader.ts
+let mermaidInstance = null;
+let mermaidLoading = null;
+const isDark = () => typeof document !== "undefined" && document.documentElement.classList.contains("dark");
 async function getMermaid() {
-  if (mermaidInstance) 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
-      });
-      mermaidInstance = m;
-      return m;
-    });
-  }
-  return mermaidLoading;
+	if (mermaidInstance) 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
+		});
+		mermaidInstance = m;
+		return m;
+	});
+	return mermaidLoading;
 }
-var AlertTriangleIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "w-4 h-4 shrink-0",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 9v4" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 17h.01" })
-    ]
-  }
-);
-var ChevronDownIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
-  "svg",
-  {
-    width: "12",
-    height: "12",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "w-3 h-3",
-    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 9 6 6 6-6" })
-  }
-);
-var ChevronUpIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
-  "svg",
-  {
-    width: "12",
-    height: "12",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "w-3 h-3",
-    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m18 15-6-6-6 6" })
-  }
-);
-var MaximizeIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "w-4 h-4 text-gray-600",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "15 3 21 3 21 9" }),
-      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 21 3 21 3 15" }),
-      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", x2: "14", y1: "3", y2: "10" }),
-      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", x2: "10", y1: "21", y2: "14" })
-    ]
-  }
-);
-var CloseIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    width: "20",
-    height: "20",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "w-5 h-5",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
-    ]
-  }
-);
-var PlusIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "w-4 h-4",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14" })
-    ]
-  }
-);
-var MinusIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
-  "svg",
-  {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "w-4 h-4",
-    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 12h14" })
-  }
-);
-var ResetIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "w-4 h-4",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 3v5h5" })
-    ]
-  }
-);
-var MIN_SCALE = 0.2;
-var MAX_SCALE = 8;
+//#endregion
+//#region src/MermaidDiagram.tsx
+const AlertTriangleIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	className: "w-4 h-4 shrink-0",
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 9v4" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 17h.01" })
+	]
+});
+const ChevronDownIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	width: "12",
+	height: "12",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	className: "w-3 h-3",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 9 6 6 6-6" })
+});
+const ChevronUpIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	width: "12",
+	height: "12",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	className: "w-3 h-3",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m18 15-6-6-6 6" })
+});
+const MaximizeIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	className: "w-4 h-4 text-gray-600",
+	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" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "21",
+			x2: "14",
+			y1: "3",
+			y2: "10"
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("line", {
+			x1: "3",
+			x2: "10",
+			y1: "21",
+			y2: "14"
+		})
+	]
+});
+const CloseIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	width: "20",
+	height: "20",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	className: "w-5 h-5",
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })]
+});
+const PlusIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	className: "w-4 h-4",
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5 12h14" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 5v14" })]
+});
+const MinusIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	className: "w-4 h-4",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5 12h14" })
+});
+const ResetIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	width: "16",
+	height: "16",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	className: "w-4 h-4",
+	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3 3v5h5" })]
+});
+const MIN_SCALE = .2;
+const MAX_SCALE = 8;
+/**
+* Zoom + pan viewport for the maximized diagram. Wheel/buttons zoom (anchored
+* on the cursor), drag pans, double-click resets, and it fills whatever space
+* the modal gives it.
+*/
 function ZoomableSvg({ svg }) {
-  const [scale, setScale] = react.useState(1);
-  const [offset, setOffset] = react.useState({ x: 0, y: 0 });
-  const dragRef = react.useRef(null);
-  const [isDragging, setIsDragging] = react.useState(false);
-  const viewportRef = react.useRef(null);
-  const reset = react.useCallback(() => {
-    setScale(1);
-    setOffset({ x: 0, y: 0 });
-  }, []);
-  const zoomBy = react.useCallback(
-    (factor, anchor) => {
-      setScale((prev) => {
-        const next = Math.min(MAX_SCALE, Math.max(MIN_SCALE, prev * factor));
-        if (next === prev) return prev;
-        const rect = viewportRef.current?.getBoundingClientRect();
-        if (rect) {
-          const ax = (anchor?.x ?? rect.width / 2) - rect.width / 2;
-          const ay = (anchor?.y ?? rect.height / 2) - rect.height / 2;
-          setOffset((o) => ({
-            x: ax - (ax - o.x) * next / prev,
-            y: ay - (ay - o.y) * next / prev
-          }));
-        }
-        return next;
-      });
-    },
-    []
-  );
-  const handleWheel = react.useCallback(
-    (e) => {
-      e.preventDefault();
-      const rect = viewportRef.current?.getBoundingClientRect();
-      const anchor = rect ? { x: e.clientX - rect.left, y: e.clientY - rect.top } : void 0;
-      zoomBy(e.deltaY < 0 ? 1.15 : 1 / 1.15, anchor);
-    },
-    [zoomBy]
-  );
-  const handlePointerDown = (e) => {
-    e.currentTarget.setPointerCapture(e.pointerId);
-    dragRef.current = {
-      startX: e.clientX,
-      startY: e.clientY,
-      originX: offset.x,
-      originY: offset.y
-    };
-    setIsDragging(true);
-  };
-  const handlePointerMove = (e) => {
-    const d = dragRef.current;
-    if (!d) return;
-    setOffset({
-      x: d.originX + (e.clientX - d.startX),
-      y: d.originY + (e.clientY - d.startY)
-    });
-  };
-  const endDrag = (e) => {
-    if (dragRef.current) {
-      try {
-        e.currentTarget.releasePointerCapture(e.pointerId);
-      } catch {
-      }
-    }
-    dragRef.current = null;
-    setIsDragging(false);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref: viewportRef,
-        onWheel: handleWheel,
-        onPointerDown: handlePointerDown,
-        onPointerMove: handlePointerMove,
-        onPointerUp: endDrag,
-        onPointerLeave: endDrag,
-        onDoubleClick: reset,
-        className: "w-full h-full overflow-hidden touch-none select-none",
-        style: { cursor: isDragging ? "grabbing" : "grab" },
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "mermaid-zoom flex items-center justify-center w-full h-full",
-            style: {
-              transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
-              transformOrigin: "center center",
-              transition: isDragging ? "none" : "transform 0.08s ease-out"
-            },
-            dangerouslySetInnerHTML: { __html: svg }
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.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", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: () => zoomBy(1 / 1.3),
-          className: "p-1.5 rounded hover:bg-gray-100 text-gray-600",
-          "aria-label": "Zoom out",
-          title: "Zoom out",
-          children: /* @__PURE__ */ jsxRuntime.jsx(MinusIcon, {})
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          onClick: reset,
-          className: "px-2 py-1 text-xs font-medium rounded hover:bg-gray-100 text-gray-600 min-w-[3rem]",
-          title: "Reset zoom (or double-click)",
-          children: [
-            Math.round(scale * 100),
-            "%"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: () => zoomBy(1.3),
-          className: "p-1.5 rounded hover:bg-gray-100 text-gray-600",
-          "aria-label": "Zoom in",
-          title: "Zoom in",
-          children: /* @__PURE__ */ jsxRuntime.jsx(PlusIcon, {})
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-5 bg-gray-200 mx-0.5" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          onClick: reset,
-          className: "p-1.5 rounded hover:bg-gray-100 text-gray-600",
-          "aria-label": "Reset view",
-          title: "Reset view",
-          children: /* @__PURE__ */ jsxRuntime.jsx(ResetIcon, {})
-        }
-      )
-    ] })
-  ] });
+	const [scale, setScale] = (0, react.useState)(1);
+	const [offset, setOffset] = (0, react.useState)({
+		x: 0,
+		y: 0
+	});
+	const dragRef = (0, react.useRef)(null);
+	const [isDragging, setIsDragging] = (0, react.useState)(false);
+	const viewportRef = (0, react.useRef)(null);
+	const reset = (0, react.useCallback)(() => {
+		setScale(1);
+		setOffset({
+			x: 0,
+			y: 0
+		});
+	}, []);
+	const zoomBy = (0, react.useCallback)((factor, anchor) => {
+		setScale((prev) => {
+			const next = Math.min(MAX_SCALE, Math.max(MIN_SCALE, prev * factor));
+			if (next === prev) return prev;
+			const rect = viewportRef.current?.getBoundingClientRect();
+			if (rect) {
+				const ax = (anchor?.x ?? rect.width / 2) - rect.width / 2;
+				const ay = (anchor?.y ?? rect.height / 2) - rect.height / 2;
+				setOffset((o) => ({
+					x: ax - (ax - o.x) * next / prev,
+					y: ay - (ay - o.y) * next / prev
+				}));
+			}
+			return next;
+		});
+	}, []);
+	const handleWheel = (0, react.useCallback)((e) => {
+		e.preventDefault();
+		const rect = viewportRef.current?.getBoundingClientRect();
+		const anchor = rect ? {
+			x: e.clientX - rect.left,
+			y: e.clientY - rect.top
+		} : void 0;
+		zoomBy(e.deltaY < 0 ? 1.15 : 1 / 1.15, anchor);
+	}, [zoomBy]);
+	const handlePointerDown = (e) => {
+		e.currentTarget.setPointerCapture(e.pointerId);
+		dragRef.current = {
+			startX: e.clientX,
+			startY: e.clientY,
+			originX: offset.x,
+			originY: offset.y
+		};
+		setIsDragging(true);
+	};
+	const handlePointerMove = (e) => {
+		const d = dragRef.current;
+		if (!d) return;
+		setOffset({
+			x: d.originX + (e.clientX - d.startX),
+			y: d.originY + (e.clientY - d.startY)
+		});
+	};
+	const endDrag = (e) => {
+		if (dragRef.current) try {
+			e.currentTarget.releasePointerCapture(e.pointerId);
+		} catch {}
+		dragRef.current = null;
+		setIsDragging(false);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "relative w-full h-full",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			ref: viewportRef,
+			onWheel: handleWheel,
+			onPointerDown: handlePointerDown,
+			onPointerMove: handlePointerMove,
+			onPointerUp: endDrag,
+			onPointerLeave: endDrag,
+			onDoubleClick: reset,
+			className: "w-full h-full overflow-hidden touch-none select-none",
+			style: { cursor: isDragging ? "grabbing" : "grab" },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "mermaid-zoom flex items-center justify-center w-full h-full",
+				style: {
+					transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
+					transformOrigin: "center center",
+					transition: isDragging ? "none" : "transform 0.08s ease-out"
+				},
+				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",
+			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",
+					"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]",
+					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",
+					"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)("button", {
+					onClick: reset,
+					className: "p-1.5 rounded hover:bg-gray-100 text-gray-600",
+					"aria-label": "Reset view",
+					title: "Reset view",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResetIcon, {})
+				})
+			]
+		})]
+	});
 }
 function extractErrorMessage(err) {
-  if (err instanceof Error) {
-    const msg = err.message;
-    const parseMatch = msg.match(
-      /(?:Parse error|Syntax error|Error).*?(?:line \d+.*)/i
-    );
-    if (parseMatch) return parseMatch[0];
-    return msg.split("\n")[0].slice(0, 200);
-  }
-  if (typeof err === "string") return err.split("\n")[0].slice(0, 200);
-  return "Unknown error";
+	if (err instanceof Error) {
+		const msg = err.message;
+		const parseMatch = msg.match(/(?:Parse error|Syntax error|Error).*?(?:line \d+.*)/i);
+		if (parseMatch) return parseMatch[0];
+		return msg.split("\n")[0].slice(0, 200);
+	}
+	if (typeof err === "string") return err.split("\n")[0].slice(0, 200);
+	return "Unknown error";
 }
-function DiagramModal({
-  isOpen,
-  onClose,
-  children
-}) {
-  react.useEffect(() => {
-    if (!isOpen) return;
-    const handler = (e) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", handler);
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.removeEventListener("keydown", handler);
-      document.body.style.overflow = "unset";
-    };
-  }, [isOpen, onClose]);
-  if (!isOpen) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4",
-      onClick: onClose,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: "bg-white rounded-lg shadow-xl w-[96vw] h-[94vh] flex flex-col overflow-hidden",
-          role: "dialog",
-          "aria-modal": "true",
-          onClick: (e) => e.stopPropagation(),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between p-4 border-b shrink-0", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold", children: "Mermaid Diagram" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: onClose,
-                  className: "p-1 hover:bg-gray-100 rounded-full transition-colors",
-                  "aria-label": "Close modal",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon, {})
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-hidden bg-gray-50", children })
-          ]
-        }
-      )
-    }
-  );
+/** Simple modal for expanding diagrams */
+function DiagramModal({ isOpen, onClose, children }) {
+	(0, react.useEffect)(() => {
+		if (!isOpen) return;
+		const handler = (e) => {
+			if (e.key === "Escape") onClose();
+		};
+		document.addEventListener("keydown", handler);
+		document.body.style.overflow = "hidden";
+		return () => {
+			document.removeEventListener("keydown", handler);
+			document.body.style.overflow = "unset";
+		};
+	}, [isOpen, onClose]);
+	if (!isOpen) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		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",
+			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",
+				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",
+					"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",
+				children
+			})]
+		})
+	});
 }
-var MermaidDiagramInner = ({ code }) => {
-  const hasCached = svgCache.has(code);
-  const [svg, setSvg] = react.useState(() => svgCache.get(code) || "");
-  const [errorMessage, setErrorMessage] = react.useState(null);
-  const [showSource, setShowSource] = react.useState(false);
-  const [isModalOpen, setIsModalOpen] = react.useState(false);
-  const [isLoading, setIsLoading] = react.useState(!hasCached);
-  const [minHeight, setMinHeight] = react.useState("auto");
-  const containerRef = react.useRef(null);
-  const lastHeightRef = react.useRef(null);
-  const stableId = react.useMemo(() => {
-    let hash = 0;
-    for (let i = 0; i < code.length; i++) {
-      const char = code.charCodeAt(i);
-      hash = (hash << 5) - hash + char;
-      hash = hash & hash;
-    }
-    return `mermaid-${Math.abs(hash).toString(36)}`;
-  }, [code]);
-  react.useEffect(() => {
-    if (hasCached) return;
-    let mounted = true;
-    const renderDiagram = async () => {
-      try {
-        if (containerRef.current) {
-          const height = containerRef.current.offsetHeight;
-          lastHeightRef.current = height;
-          setMinHeight(`${height}px`);
-        }
-        const m = await getMermaid();
-        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);
-        }
-      } catch (err) {
-        console.error("Mermaid render error:", err);
-        if (mounted) {
-          setErrorMessage(extractErrorMessage(err));
-          setIsLoading(false);
-        }
-      }
-    };
-    renderDiagram();
-    return () => {
-      mounted = false;
-    };
-  }, [code, stableId, hasCached]);
-  if (errorMessage) {
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        "data-testid": "mermaid-container",
-        className: "my-4 rounded-md border border-yellow-300/40 bg-yellow-50/50 dark:border-yellow-700/40 dark:bg-yellow-950/20 overflow-hidden",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-4 py-2.5 text-sm text-yellow-800 dark:text-yellow-200", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(AlertTriangleIcon, {}),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Diagram syntax error" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-yellow-700/70 dark:text-yellow-300/60", children: [
-              "\u2014 ",
-              errorMessage
-            ] })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t border-yellow-300/30 dark:border-yellow-700/30", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "button",
-              {
-                onClick: () => setShowSource(!showSource),
-                className: "flex items-center gap-1.5 px-4 py-1.5 text-xs text-yellow-700/60 dark:text-yellow-400/50 hover:text-yellow-800 dark:hover:text-yellow-300 transition-colors w-full",
-                children: [
-                  showSource ? /* @__PURE__ */ jsxRuntime.jsx(ChevronUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(ChevronDownIcon, {}),
-                  showSource ? "Hide source" : "Show source"
-                ]
-              }
-            ),
-            showSource && /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "px-4 pb-3 text-xs font-mono text-yellow-800/70 dark:text-yellow-200/60 overflow-auto whitespace-pre-wrap", children: code })
-          ] })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        ref: containerRef,
-        "data-testid": "mermaid-container",
-        className: "relative group inline-block max-w-full",
-        style: { minHeight: isLoading ? minHeight : "auto" },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: `mermaid flex justify-center my-4 overflow-x-auto transition-opacity duration-150 ${isLoading ? "opacity-50" : "opacity-100"}`,
-              dangerouslySetInnerHTML: { __html: svg }
-            }
-          ),
-          svg && /* @__PURE__ */ jsxRuntime.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",
-              "aria-label": "Maximize diagram",
-              children: /* @__PURE__ */ jsxRuntime.jsx(MaximizeIcon, {})
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(DiagramModal, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), children: /* @__PURE__ */ jsxRuntime.jsx(ZoomableSvg, { svg }) })
-  ] });
+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 [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);
+	const stableId = (0, react.useMemo)(() => {
+		let hash = 0;
+		for (let i = 0; i < code.length; i++) {
+			const char = code.charCodeAt(i);
+			hash = (hash << 5) - hash + char;
+			hash = hash & hash;
+		}
+		return `mermaid-${Math.abs(hash).toString(36)}`;
+	}, [code]);
+	(0, react.useEffect)(() => {
+		if (hasCached) return;
+		let mounted = true;
+		const renderDiagram = async () => {
+			try {
+				if (containerRef.current) {
+					const height = containerRef.current.offsetHeight;
+					lastHeightRef.current = height;
+					setMinHeight(`${height}px`);
+				}
+				const m = await getMermaid();
+				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);
+				}
+			} catch (err) {
+				console.error("Mermaid render error:", err);
+				if (mounted) {
+					setErrorMessage(extractErrorMessage(err));
+					setIsLoading(false);
+				}
+			}
+		};
+		renderDiagram();
+		return () => {
+			mounted = false;
+		};
+	}, [
+		code,
+		stableId,
+		hasCached
+	]);
+	if (errorMessage) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-testid": "mermaid-container",
+		className: "my-4 rounded-md border border-yellow-300/40 bg-yellow-50/50 dark:border-yellow-700/40 dark:bg-yellow-950/20 overflow-hidden",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex items-center gap-2 px-4 py-2.5 text-sm text-yellow-800 dark:text-yellow-200",
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertTriangleIcon, {}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: "font-medium",
+					children: "Diagram syntax error"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+					className: "text-yellow-700/70 dark:text-yellow-300/60",
+					children: ["— ", errorMessage]
+				})
+			]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "border-t border-yellow-300/30 dark:border-yellow-700/30",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+				onClick: () => setShowSource(!showSource),
+				className: "flex items-center gap-1.5 px-4 py-1.5 text-xs text-yellow-700/60 dark:text-yellow-400/50 hover:text-yellow-800 dark:hover:text-yellow-300 transition-colors w-full",
+				children: [showSource ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronUpIcon, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronDownIcon, {}), showSource ? "Hide source" : "Show source"]
+			}), showSource && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+				className: "px-4 pb-3 text-xs font-mono text-yellow-800/70 dark:text-yellow-200/60 overflow-auto whitespace-pre-wrap",
+				children: code
+			})]
+		})]
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: containerRef,
+		"data-testid": "mermaid-container",
+		className: "relative group inline-block max-w-full",
+		style: { minHeight: isLoading ? minHeight : "auto" },
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: `mermaid flex justify-center my-4 overflow-x-auto transition-opacity duration-150 ${isLoading ? "opacity-50" : "opacity-100"}`,
+			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",
+			"aria-label": "Maximize diagram",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MaximizeIcon, {})
+		})]
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DiagramModal, {
+		isOpen: isModalOpen,
+		onClose: () => setIsModalOpen(false),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomableSvg, { svg })
+	})] });
 };
-var MermaidDiagram = react.memo(
-  MermaidDiagramInner,
-  (prevProps, nextProps) => prevProps.code === nextProps.code
-);
-
-// src/vantageFrontmatter.ts
-var DOC_STATUSES = [
-  "draft",
-  "in-review",
-  "accepted",
-  "deprecated"
+const MermaidDiagram = (0, react.memo)(MermaidDiagramInner, (prevProps, nextProps) => prevProps.code === nextProps.code);
+//#endregion
+//#region src/vantageFrontmatter.ts
+/**
+* The document lifecycle vocabulary. Closed; extending it is a code change.
+*
+* This is the repo's own existing set, not a new one — `styleGuide.ts` tells
+* every agent to write `status: in-review # draft | in-review | accepted |
+* deprecated`, and every document under `docs/` follows it. It is deliberately
+* *not* the `badge` set (`draft stale blocked done wip`): `badge` is
+* section-scoped workflow state, `status` is document lifecycle state, and
+* `in-review` — the value the design doc's own only example renders — is not a
+* badge word at all. Only `draft` is a member of both, and a token set is per key.
+*/
+const DOC_STATUSES = [
+	"draft",
+	"in-review",
+	"accepted",
+	"deprecated"
 ];
-var VANTAGE_FRONTMATTER_KEYS = ["status-chip"];
-var DOC_STATUS_TONES = {
-  draft: "muted",
-  "in-review": "warning",
-  accepted: "tip",
-  deprecated: "caution"
+/** Every key this build knows under `vantage:`. Closed. */
+const VANTAGE_FRONTMATTER_KEYS = ["status-chip"];
+/**
+* Which tone each status borrows its colours from.
+*
+* The chip has no palette of its own: it reuses the tone chips
+* (`.vantage-chip--<tone>` in `styles/directives.css`), which is also what makes
+* a `draft` chip and a `badge=draft` chip the same visual object. A map rather
+* than a computed class name, so the whole status→tone relation is one readable
+* table and a test can assert it covers the vocabulary.
+*/
+const DOC_STATUS_TONES = {
+	draft: "muted",
+	"in-review": "warning",
+	accepted: "tip",
+	deprecated: "caution"
 };
-var STATUS_CHIP_VALUES = [
-  ...DOC_STATUSES,
-  "true",
-  "false"
+/** The legal `status-chip` values, in the order a message should list them. */
+const STATUS_CHIP_VALUES = [
+	...DOC_STATUSES,
+	"true",
+	"false"
 ];
+/** Narrowing helper the chip and the checker both use. */
 function isDocStatus(value) {
-  return typeof value === "string" && DOC_STATUSES.includes(value);
+	return typeof value === "string" && DOC_STATUSES.includes(value);
 }
 function isTable(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Date);
+	return typeof value === "object" && value !== null && !Array.isArray(value) && !(value instanceof Date);
 }
+/**
+* Read the `vantage:` key out of parsed frontmatter.
+*
+* Pure: no module state, no mutation of the input, no logging. The same object
+* in twice gives equal results out.
+*/
 function readVantageFrontmatter(frontmatter) {
-  const issues = [];
-  if (!Object.hasOwn(frontmatter, "vantage")) return { issues };
-  const value = frontmatter["vantage"];
-  if (!isTable(value)) {
-    issues.push({ kind: "not-a-table", value });
-    return { issues };
-  }
-  let statusChip;
-  for (const key of Object.keys(value)) {
-    if (!VANTAGE_FRONTMATTER_KEYS.includes(key)) {
-      issues.push({ kind: "unknown-key", key });
-      continue;
-    }
-    if (key === "status-chip") {
-      statusChip = readStatusChip(frontmatter, value[key], issues);
-    }
-  }
-  return { ...statusChip === void 0 ? {} : { statusChip }, issues };
+	const issues = [];
+	if (!Object.hasOwn(frontmatter, "vantage")) return { issues };
+	const value = frontmatter["vantage"];
+	if (!isTable(value)) {
+		issues.push({
+			kind: "not-a-table",
+			value
+		});
+		return { issues };
+	}
+	let statusChip;
+	for (const key of Object.keys(value)) {
+		if (!VANTAGE_FRONTMATTER_KEYS.includes(key)) {
+			issues.push({
+				kind: "unknown-key",
+				key
+			});
+			continue;
+		}
+		if (key === "status-chip") statusChip = readStatusChip(frontmatter, value[key], issues);
+	}
+	return {
+		...statusChip === void 0 ? {} : { statusChip },
+		issues
+	};
 }
+/**
+* `status-chip` takes two shapes, and the boolean one is the recommended shape.
+*
+* `true` **inherits** the document's own top-level `status:`, so the chip cannot
+* disagree with it — which is the entire point of §5.3 ("makes `status: draft`
+* visible rather than only buried in a metadata card"; the row stays, the chip
+* promotes the value rather than moving it). A literal token is kept
+* because the design doc's first draft of that example used one, and the
+* disagreement it makes possible is turned into a checker finding rather than
+* banned.
+*
+* Discrimination is on `typeof`, never truthiness: `true` is a YAML boolean and
+* `2026-08-31` is a `Date`, and both would sail through a truthy test.
+*/
 function readStatusChip(frontmatter, raw, issues) {
-  const status = frontmatter["status"];
-  if (raw === false) return void 0;
-  if (raw === true) {
-    if (isDocStatus(status)) return status;
-    issues.push({ kind: "status-chip-orphan", status });
-    return void 0;
-  }
-  if (isDocStatus(raw)) {
-    if (isDocStatus(status) && status !== raw) {
-      issues.push({ kind: "status-chip-disagrees", chip: raw, status });
-    }
-    return raw;
-  }
-  issues.push({
-    kind: "bad-value",
-    key: "status-chip",
-    value: raw,
-    legal: STATUS_CHIP_VALUES
-  });
-  return void 0;
+	const status = frontmatter["status"];
+	if (raw === false) return void 0;
+	if (raw === true) {
+		if (isDocStatus(status)) return status;
+		issues.push({
+			kind: "status-chip-orphan",
+			status
+		});
+		return;
+	}
+	if (isDocStatus(raw)) {
+		if (isDocStatus(status) && status !== raw) issues.push({
+			kind: "status-chip-disagrees",
+			chip: raw,
+			status
+		});
+		return raw;
+	}
+	issues.push({
+		kind: "bad-value",
+		key: "status-chip",
+		value: raw,
+		legal: STATUS_CHIP_VALUES
+	});
 }
-var DocumentStatusChipInner = ({
-  status
-}) => /* @__PURE__ */ jsxRuntime.jsx(
-  "span",
-  {
-    className: `vantage-chip vantage-chip--${DOC_STATUS_TONES[status]}`,
-    "data-vantage-status": status,
-    title: `Document status: ${status}`,
-    children: status
-  }
-);
-var DocumentStatusChip = react.memo(DocumentStatusChipInner);
-var FileTextIcon = () => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    width: "14",
-    height: "14",
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: "2",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    className: "text-slate-400",
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 9H8" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 13H8" }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 17H8" })
-    ]
-  }
-);
+//#endregion
+//#region src/DocumentStatusChip.tsx
+/**
+* The document's lifecycle status, as a chip.
+*
+* Non-interactive on purpose. D4 says a control that cannot work must not
+* render, and the cheapest way to satisfy that in *every* rendering — the app,
+* the package's exported viewer, an exported static site — is not to be a
+* control at all. So there is no `onClick`, no `<button>` and no
+* `isStaticMode()` gate: gating it would delete the chip from every exported
+* site, which is the one place D5 costs nothing.
+*
+* The text is the token verbatim, lowercase. No display map (`"In review"`) —
+* that is a second vocabulary that drifts from the first, and the visual
+* flourish belongs in CSS, where `text-transform` cannot change what the
+* document's text content is.
+*
+* Styling comes entirely from `styles/directives.css` — `.vantage-chip` for the
+* geometry, shared by selector list with the `badge=` pseudo-element, and
+* `.vantage-chip--<tone>` for the colours. No Tailwind utility appears here, so
+* the chip survives in a consumer that does not run Tailwind and no class name
+* has to be discovered by a content scan.
+*/
+const DocumentStatusChipInner = ({ status }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	className: `vantage-chip vantage-chip--${DOC_STATUS_TONES[status]}`,
+	"data-vantage-status": status,
+	title: `Document status: ${status}`,
+	children: status
+});
+const DocumentStatusChip = (0, react.memo)(DocumentStatusChipInner);
+//#endregion
+//#region src/FrontmatterDisplay.tsx
+const FileTextIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+	width: "14",
+	height: "14",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	className: "text-slate-400",
+	children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M10 9H8" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M16 13H8" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M16 17H8" })
+	]
+});
 function isStringArray(value) {
-  return Array.isArray(value) && value.every((item) => typeof item === "string");
+	return Array.isArray(value) && value.every((item) => typeof item === "string");
 }
 function isPlainObject(value) {
-  return typeof value === "object" && value !== null && !Array.isArray(value);
+	return typeof value === "object" && value !== null && !Array.isArray(value);
 }
 function formatValue(value) {
-  if (value instanceof Date) {
-    return value.toISOString().split("T")[0];
-  }
-  if (Array.isArray(value)) {
-    return value.map(String).join(", ");
-  }
-  if (typeof value === "boolean") {
-    return value ? "true" : "false";
-  }
-  if (isPlainObject(value)) {
-    return JSON.stringify(value, null, 2);
-  }
-  return String(value);
+	if (value instanceof Date) return value.toISOString().split("T")[0];
+	if (Array.isArray(value)) return value.map(String).join(", ");
+	if (typeof value === "boolean") return value ? "true" : "false";
+	if (isPlainObject(value)) return JSON.stringify(value, null, 2);
+	return String(value);
 }
 function TagList({ items }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5", children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
-      children: item
-    },
-    item
-  )) });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "flex flex-wrap gap-1.5",
+		children: items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/40 dark:text-blue-300",
+			children: item
+		}, item))
+	});
 }
 function ValueCell({ value }) {
-  if (isStringArray(value) && value.length > 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(TagList, { items: value });
-  }
-  if (isPlainObject(value)) {
-    return /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-md px-3 py-2 text-xs font-mono overflow-x-auto text-slate-600 dark:text-slate-300", children: formatValue(value) });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: formatValue(value) });
+	if (isStringArray(value) && value.length > 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TagList, { items: value });
+	if (isPlainObject(value)) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
+		className: "bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-700 rounded-md px-3 py-2 text-xs font-mono overflow-x-auto text-slate-600 dark:text-slate-300",
+		children: formatValue(value)
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		className: "font-medium",
+		children: formatValue(value)
+	});
 }
 function flattenEntries(entries) {
-  const result = [];
-  for (const [key, value] of entries) {
-    if (key === "vantage") continue;
-    if (key === "taxonomies" && isPlainObject(value)) {
-      for (const [taxKey, taxVal] of Object.entries(value)) {
-        result.push([taxKey, taxVal]);
-      }
-    } else if (key === "extra" && isPlainObject(value)) {
-      for (const [extraKey, extraVal] of Object.entries(value)) {
-        result.push([extraKey, extraVal]);
-      }
-    } else {
-      result.push([key, value]);
-    }
-  }
-  return result;
+	const result = [];
+	for (const [key, value] of entries) {
+		if (key === "vantage") continue;
+		if (key === "taxonomies" && isPlainObject(value)) for (const [taxKey, taxVal] of Object.entries(value)) result.push([taxKey, taxVal]);
+		else if (key === "extra" && isPlainObject(value)) for (const [extraKey, extraVal] of Object.entries(value)) result.push([extraKey, extraVal]);
+		else result.push([key, value]);
+	}
+	return result;
 }
-var FrontmatterDisplayInner = ({
-  frontmatter
-}) => {
-  const entries = flattenEntries(Object.entries(frontmatter));
-  const { statusChip } = readVantageFrontmatter(frontmatter);
-  if (entries.length === 0 && statusChip === void 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    statusChip !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "vantage-chrome", children: /* @__PURE__ */ jsxRuntime.jsx(DocumentStatusChip, { status: statusChip }) }),
-    entries.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-8 rounded-lg overflow-hidden bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-800/80 border border-slate-200 dark:border-slate-700 shadow-sm", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2.5 bg-white/60 dark:bg-slate-900/40 border-b border-slate-200 dark:border-slate-700 flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(FileTextIcon, {}),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider", children: "Metadata" })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4", children: /* @__PURE__ */ jsxRuntime.jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: entries.map(([key, value]) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "tr",
-        {
-          className: "border-b border-slate-200/60 dark:border-slate-700/60 last:border-0",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-2 pr-4 font-medium text-slate-500 dark:text-slate-400 whitespace-nowrap align-top w-1/4 min-w-[100px]", children: key }),
-            /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-2 text-slate-800 dark:text-slate-200 align-top", children: /* @__PURE__ */ jsxRuntime.jsx(ValueCell, { value }) })
-          ]
-        },
-        key
-      )) }) }) })
-    ] })
-  ] });
+const FrontmatterDisplayInner = ({ frontmatter }) => {
+	const entries = flattenEntries(Object.entries(frontmatter));
+	const { statusChip } = readVantageFrontmatter(frontmatter);
+	if (entries.length === 0 && statusChip === void 0) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [statusChip !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: "vantage-chrome",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DocumentStatusChip, { status: statusChip })
+	}), entries.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: "mb-8 rounded-lg overflow-hidden bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-800 dark:to-slate-800/80 border border-slate-200 dark:border-slate-700 shadow-sm",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "px-4 py-2.5 bg-white/60 dark:bg-slate-900/40 border-b border-slate-200 dark:border-slate-700 flex items-center gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileTextIcon, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider",
+				children: "Metadata"
+			})]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "p-4",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
+				className: "w-full text-sm",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("tbody", { children: entries.map(([key, value]) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("tr", {
+					className: "border-b border-slate-200/60 dark:border-slate-700/60 last:border-0",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+						className: "py-2 pr-4 font-medium text-slate-500 dark:text-slate-400 whitespace-nowrap align-top w-1/4 min-w-[100px]",
+						children: key
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("td", {
+						className: "py-2 text-slate-800 dark:text-slate-200 align-top",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ValueCell, { value })
+					})]
+				}, key)) })
+			})
+		})]
+	})] });
 };
-var FrontmatterDisplay = react.memo(FrontmatterDisplayInner);
-
-// src/lineAnchor.ts
+const FrontmatterDisplay = (0, react.memo)(FrontmatterDisplayInner);
+//#endregion
+//#region src/lineAnchor.ts
+/**
+* Parsing for GitHub-style line anchors, with no DOM in sight.
+*
+* Split out from scrollToLineAnchor.ts so that non-browser consumers — the
+* `vantage-check` CLI, which validates `#L42` links against the file on disk —
+* can share the *same* syntax the viewer honours instead of reimplementing it
+* and drifting.
+*/
+/**
+* Parse a GitHub-style line anchor hash.
+* Supports: #L42, #L42-L50, #L42-50
+* Returns null if the hash is not a line anchor.
+*/
 function parseLineAnchor(hash) {
-  if (!hash) return null;
-  const frag = hash.startsWith("#") ? hash.slice(1) : hash;
-  const match = frag.match(/^L(\d+)(?:-L?(\d+))?$/);
-  if (!match) return null;
-  const start = parseInt(match[1], 10);
-  const end = match[2] ? parseInt(match[2], 10) : start;
-  return { start: Math.min(start, end), end: Math.max(start, end) };
+	if (!hash) return null;
+	const match = (hash.startsWith("#") ? hash.slice(1) : hash).match(/^L(\d+)(?:-L?(\d+))?$/);
+	if (!match) return null;
+	const start = parseInt(match[1], 10);
+	const end = match[2] ? parseInt(match[2], 10) : start;
+	return {
+		start: Math.min(start, end),
+		end: Math.max(start, end)
+	};
 }
-
-// src/scrollToLineAnchor.ts
-var HIGHLIGHT_CLASS = "line-anchor-highlight";
+//#endregion
+//#region src/scrollToLineAnchor.ts
+/**
+* Framework-agnostic line anchor utilities.
+* Scroll to and highlight the elements a GitHub-style line anchor
+* (#L42, #L42-L50) names. The parsing half lives in lineAnchor.ts, which has
+* no DOM dependency.
+*/
+const HIGHLIGHT_CLASS$1 = "line-anchor-highlight";
+/**
+* Clear all line anchor highlights from a container.
+*/
 function clearLineAnchorHighlights(container) {
-  container.querySelectorAll(`.${HIGHLIGHT_CLASS}`).forEach((node) => {
-    node.classList.remove(HIGHLIGHT_CLASS);
-  });
+	container.querySelectorAll(`.${HIGHLIGHT_CLASS$1}`).forEach((node) => {
+		node.classList.remove(HIGHLIGHT_CLASS$1);
+	});
 }
+/**
+* Scroll to and highlight line-anchored elements in a container.
+*
+* @param container - The DOM element containing rendered markdown
+* @param hash - The URL hash (e.g. "#L42" or "#L42-L50")
+* @returns A cleanup function that removes the highlights
+*/
 function scrollToLineAnchor(container, hash) {
-  clearLineAnchorHighlights(container);
-  const range = parseLineAnchor(hash);
-  if (!range) return null;
-  const blocks = container.querySelectorAll("[data-source-line]");
-  let firstMatch = null;
-  for (const block of blocks) {
-    const line = parseInt(block.dataset.sourceLine || "0", 10);
-    if (line >= range.start && line <= range.end) {
-      block.classList.add(HIGHLIGHT_CLASS);
-      if (!firstMatch) firstMatch = block;
-    }
-  }
-  if (!firstMatch) {
-    let closest = null;
-    let closestLine = 0;
-    for (const block of blocks) {
-      const line = parseInt(
-        block.dataset.sourceLine || "0",
-        10
-      );
-      if (line <= range.start && line > closestLine) {
-        closestLine = line;
-        closest = block;
-      }
-    }
-    if (closest) {
-      closest.classList.add(HIGHLIGHT_CLASS);
-      firstMatch = closest;
-    }
-  }
-  if (firstMatch) {
-    requestAnimationFrame(() => {
-      const scrollParent = findScrollParent(container);
-      if (scrollParent) {
-        const offset = firstMatch.getBoundingClientRect().top - scrollParent.getBoundingClientRect().top + scrollParent.scrollTop;
-        scrollParent.scrollTo({ top: offset - 32, behavior: "smooth" });
-      } else {
-        firstMatch.scrollIntoView({ behavior: "smooth", block: "start" });
-      }
-    });
-  }
-  return () => clearLineAnchorHighlights(container);
+	clearLineAnchorHighlights(container);
+	const range = parseLineAnchor(hash);
+	if (!range) return null;
+	const blocks = container.querySelectorAll("[data-source-line]");
+	let firstMatch = null;
+	for (const block of blocks) {
+		const line = parseInt(block.dataset.sourceLine || "0", 10);
+		if (line >= range.start && line <= range.end) {
+			block.classList.add(HIGHLIGHT_CLASS$1);
+			if (!firstMatch) firstMatch = block;
+		}
+	}
+	if (!firstMatch) {
+		let closest = null;
+		let closestLine = 0;
+		for (const block of blocks) {
+			const line = parseInt(block.dataset.sourceLine || "0", 10);
+			if (line <= range.start && line > closestLine) {
+				closestLine = line;
+				closest = block;
+			}
+		}
+		if (closest) {
+			closest.classList.add(HIGHLIGHT_CLASS$1);
+			firstMatch = closest;
+		}
+	}
+	if (firstMatch) requestAnimationFrame(() => {
+		const scrollParent = findScrollParent(container);
+		if (scrollParent) {
+			const offset = firstMatch.getBoundingClientRect().top - scrollParent.getBoundingClientRect().top + scrollParent.scrollTop;
+			scrollParent.scrollTo({
+				top: offset - 32,
+				behavior: "smooth"
+			});
+		} else firstMatch.scrollIntoView({
+			behavior: "smooth",
+			block: "start"
+		});
+	});
+	return () => clearLineAnchorHighlights(container);
 }
 function findScrollParent(el) {
-  let node = el;
-  while (node) {
-    const overflow = getComputedStyle(node).overflowY;
-    if (overflow === "auto" || overflow === "scroll") return node;
-    node = node.parentElement;
-  }
-  return null;
+	let node = el;
+	while (node) {
+		const overflow = getComputedStyle(node).overflowY;
+		if (overflow === "auto" || overflow === "scroll") return node;
+		node = node.parentElement;
+	}
+	return null;
 }
-
-// src/useLineAnchor.ts
-var HIGHLIGHT_CLASS2 = "line-anchor-highlight";
+//#endregion
+//#region src/useLineAnchor.ts
+const HIGHLIGHT_CLASS = "line-anchor-highlight";
+/**
+* React hook that handles GitHub-style line anchors (#L42, #L42-L50).
+*
+* - Parses the URL hash for line references
+* - Finds block elements with matching `data-source-line` attributes
+* - Scrolls to and highlights them
+* - Dismisses on Escape or click on the highlight
+*
+* @param containerRef - Ref to the DOM element containing rendered markdown
+* @param hash - The current URL hash (e.g. "#L42", from location.hash or window.location.hash)
+*/
 function useLineAnchor(containerRef, hash) {
-  const clearHighlights = react.useCallback(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    clearLineAnchorHighlights(el);
-  }, [containerRef]);
-  react.useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    clearHighlights();
-    const range = parseLineAnchor(hash);
-    if (!range) return;
-    const blocks = el.querySelectorAll("[data-source-line]");
-    let firstMatch = null;
-    for (const block of blocks) {
-      const line = parseInt(
-        block.dataset.sourceLine || "0",
-        10
-      );
-      if (line >= range.start && line <= range.end) {
-        block.classList.add(HIGHLIGHT_CLASS2);
-        if (!firstMatch) firstMatch = block;
-      }
-    }
-    if (!firstMatch) {
-      let closest = null;
-      let closestLine = 0;
-      for (const block of blocks) {
-        const line = parseInt(
-          block.dataset.sourceLine || "0",
-          10
-        );
-        if (line <= range.start && line > closestLine) {
-          closestLine = line;
-          closest = block;
-        }
-      }
-      if (closest) {
-        closest.classList.add(HIGHLIGHT_CLASS2);
-        firstMatch = closest;
-      }
-    }
-    if (firstMatch) {
-      let scrollParent = el;
-      while (scrollParent) {
-        const overflow = getComputedStyle(scrollParent).overflowY;
-        if (overflow === "auto" || overflow === "scroll") break;
-        scrollParent = scrollParent.parentElement;
-      }
-      if (scrollParent) {
-        const target = firstMatch;
-        requestAnimationFrame(() => {
-          const offset = target.getBoundingClientRect().top - scrollParent.getBoundingClientRect().top + scrollParent.scrollTop;
-          scrollParent.scrollTo({ top: offset - 32, behavior: "smooth" });
-        });
-      }
-    }
-  }, [hash, containerRef, clearHighlights]);
-  react.useEffect(() => {
-    const handler = (e) => {
-      if (e.key === "Escape") {
-        clearHighlights();
-        if (window.location.hash) {
-          history.replaceState(null, "", window.location.pathname);
-        }
-      }
-    };
-    document.addEventListener("keydown", handler);
-    return () => document.removeEventListener("keydown", handler);
-  }, [clearHighlights]);
-  react.useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    const handler = (e) => {
-      const target = e.target;
-      if (target.closest(`.${HIGHLIGHT_CLASS2}`)) {
-        clearHighlights();
-        if (window.location.hash) {
-          history.replaceState(null, "", window.location.pathname);
-        }
-      }
-    };
-    el.addEventListener("click", handler);
-    return () => el.removeEventListener("click", handler);
-  }, [containerRef, clearHighlights]);
-  return { clearHighlights };
+	const clearHighlights = (0, react.useCallback)(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		clearLineAnchorHighlights(el);
+	}, [containerRef]);
+	(0, react.useEffect)(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		clearHighlights();
+		const range = parseLineAnchor(hash);
+		if (!range) return;
+		const blocks = el.querySelectorAll("[data-source-line]");
+		let firstMatch = null;
+		for (const block of blocks) {
+			const line = parseInt(block.dataset.sourceLine || "0", 10);
+			if (line >= range.start && line <= range.end) {
+				block.classList.add(HIGHLIGHT_CLASS);
+				if (!firstMatch) firstMatch = block;
+			}
+		}
+		if (!firstMatch) {
+			let closest = null;
+			let closestLine = 0;
+			for (const block of blocks) {
+				const line = parseInt(block.dataset.sourceLine || "0", 10);
+				if (line <= range.start && line > closestLine) {
+					closestLine = line;
+					closest = block;
+				}
+			}
+			if (closest) {
+				closest.classList.add(HIGHLIGHT_CLASS);
+				firstMatch = closest;
+			}
+		}
+		if (firstMatch) {
+			let scrollParent = el;
+			while (scrollParent) {
+				const overflow = getComputedStyle(scrollParent).overflowY;
+				if (overflow === "auto" || overflow === "scroll") break;
+				scrollParent = scrollParent.parentElement;
+			}
+			if (scrollParent) {
+				const target = firstMatch;
+				requestAnimationFrame(() => {
+					const offset = target.getBoundingClientRect().top - scrollParent.getBoundingClientRect().top + scrollParent.scrollTop;
+					scrollParent.scrollTo({
+						top: offset - 32,
+						behavior: "smooth"
+					});
+				});
+			}
+		}
+	}, [
+		hash,
+		containerRef,
+		clearHighlights
+	]);
+	(0, react.useEffect)(() => {
+		const handler = (e) => {
+			if (e.key === "Escape") {
+				clearHighlights();
+				if (window.location.hash) history.replaceState(null, "", window.location.pathname);
+			}
+		};
+		document.addEventListener("keydown", handler);
+		return () => document.removeEventListener("keydown", handler);
+	}, [clearHighlights]);
+	(0, react.useEffect)(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const handler = (e) => {
+			if (e.target.closest(`.${HIGHLIGHT_CLASS}`)) {
+				clearHighlights();
+				if (window.location.hash) history.replaceState(null, "", window.location.pathname);
+			}
+		};
+		el.addEventListener("click", handler);
+		return () => el.removeEventListener("click", handler);
+	}, [containerRef, clearHighlights]);
+	return { clearHighlights };
 }
-var MarkdownViewerInner = ({
-  content,
-  currentPath = "",
-  hash = "",
-  baseUrl = "/",
-  imageApiBase,
-  className,
-  onNavigate
-}) => {
-  const containerRef = react.useRef(null);
-  useLineAnchor(containerRef, hash);
-  const { frontmatter, body, bodyLineOffset } = react.useMemo(() => {
-    return parseFrontmatter(content);
-  }, [content]);
-  const { remarkPlugins, rehypePlugins } = react.useMemo(
-    () => buildPipeline({ bodyLineOffset }),
-    [bodyLineOffset]
-  );
-  const handleLinkClick = react.useCallback(
-    (e, href) => {
-      if (href.startsWith("#")) {
-        e.preventDefault();
-        const id = href.slice(1);
-        const el = document.getElementById(id);
-        if (el) {
-          const scrollContainer = el.closest("[data-content-scroll]") || el.closest(".overflow-y-auto");
-          if (scrollContainer) {
-            const offset = el.getBoundingClientRect().top - scrollContainer.getBoundingClientRect().top + scrollContainer.scrollTop;
-            scrollContainer.scrollTo({ top: offset - 16 });
-          } else {
-            el.scrollIntoView();
-          }
-        }
-        return;
-      }
-      if (href.startsWith("http") || href.startsWith("mailto:")) return;
-      if (onNavigate) {
-        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
-        e.preventDefault();
-        const [pathPart, hashPart] = href.split("#");
-        const parts = currentPath.split("/");
-        parts.pop();
-        const dir = parts.join("/");
-        const cleanHref = pathPart.replace(/^\.\//, "");
-        const resolvedPath = dir ? `${dir}/${cleanHref}` : cleanHref;
-        onNavigate(resolvedPath + (hashPart ? `#${hashPart}` : ""));
-      }
-    },
-    [currentPath, onNavigate]
-  );
-  const resolveHref = react.useCallback(
-    (href) => {
-      if (!href) return "";
-      if (href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("#") || href.startsWith("/")) {
-        return href;
-      }
-      const [pathPart, hashPart] = href.split("#");
-      const parts = currentPath.split("/");
-      parts.pop();
-      const dir = parts.join("/");
-      const cleanHref = pathPart.replace(/^\.\//, "");
-      const resolvedPath = dir ? `${dir}/${cleanHref}` : cleanHref;
-      return `${baseUrl}${resolvedPath}${hashPart ? `#${hashPart}` : ""}`;
-    },
-    [currentPath, baseUrl]
-  );
-  const transformImageUri = react.useCallback(
-    (uri, key) => {
-      if (key === "href") return uri;
-      if (uri.startsWith("http") || uri.startsWith("data:")) return uri;
-      const parts = currentPath.split("/");
-      parts.pop();
-      const dir = parts.join("/");
-      const resolvedPath = dir ? `${dir}/${uri}` : uri;
-      if (imageApiBase) {
-        return `${imageApiBase}/content?path=${encodeURIComponent(resolvedPath)}`;
-      }
-      return `${baseUrl}${resolvedPath}`;
-    },
-    [currentPath, baseUrl, imageApiBase]
-  );
-  const markdownComponents = react.useMemo(
-    () => ({
-      a({
-        href,
-        children,
-        ...props
-      }) {
-        const resolvedHref = resolveHref(href);
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "a",
-          {
-            href: resolvedHref,
-            onClick: (e) => href && handleLinkClick(e, href),
-            ...props,
-            children
-          }
-        );
-      },
-      code(props) {
-        const { children, className: codeClassName, ...rest } = props;
-        const match = /language-(\w+)/.exec(codeClassName || "");
-        if (match && match[1] === "mermaid") {
-          return /* @__PURE__ */ jsxRuntime.jsx(MermaidDiagram, { code: String(children).replace(/\n$/, "") });
-        }
-        return /* @__PURE__ */ jsxRuntime.jsx("code", { className: codeClassName, ...rest, children });
-      }
-    }),
-    [handleLinkClick, resolveHref]
-  );
-  const proseClasses = [
-    "prose prose-slate dark:prose-invert max-w-none",
-    "prose-headings:font-semibold prose-headings:tracking-tight prose-headings:text-slate-900 dark:prose-headings:text-slate-100",
-    "prose-h1:text-[2em] prose-h1:mb-3 prose-h1:pb-[0.3em] prose-h1:border-b prose-h1:border-slate-200 dark:prose-h1:border-slate-700",
-    "prose-h2:text-[1.5em] prose-h2:mt-6 prose-h2:mb-3 prose-h2:pb-[0.3em] prose-h2:border-b prose-h2:border-slate-200 dark:prose-h2:border-slate-700",
-    "prose-h3:text-[1.25em] prose-h3:mt-6 prose-h3:mb-2",
-    "prose-h4:text-[1em] prose-h4:mt-6 prose-h4:mb-2",
-    "prose-p:text-slate-700 dark:prose-p:text-slate-300 prose-p:leading-[1.5] prose-p:my-[16px]",
-    "prose-ul:my-[16px] prose-ul:list-disc prose-li:my-0.5 prose-li:marker:text-slate-900 dark:prose-li:marker:text-slate-300",
-    "prose-ol:my-[16px] prose-li:marker:text-slate-900 dark:prose-li:marker:text-slate-300",
-    "prose-pre:bg-slate-50 dark:prose-pre:bg-slate-800 prose-pre:border prose-pre:border-slate-200 dark:prose-pre:border-slate-700 prose-pre:p-4 prose-pre:rounded-md prose-pre:text-[85%] prose-pre:leading-[1.45]",
-    "prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-a:no-underline hover:prose-a:underline",
-    "prose-img:rounded-lg prose-img:my-4",
-    "prose-blockquote:border-l-[0.25em] prose-blockquote:border-slate-300 dark:prose-blockquote:border-slate-600 prose-blockquote:pl-4 prose-blockquote:text-slate-600 dark:prose-blockquote:text-slate-400 prose-blockquote:italic",
-    "prose-code:before:content-none prose-code:after:content-none",
-    "prose-code:bg-slate-100 dark:prose-code:bg-slate-800 prose-code:px-[0.4em] prose-code:py-[0.2em] prose-code:rounded-md prose-code:text-slate-800 dark:prose-code:text-slate-200 prose-code:font-mono prose-code:text-[85%] prose-code:font-normal prose-code:border prose-code:border-slate-200/50 dark:prose-code:border-slate-700/50",
-    "prose-table:text-sm",
-    "prose-th:px-3 prose-th:py-1.5 prose-th:border prose-th:border-slate-200 dark:prose-th:border-slate-700",
-    "prose-td:px-3 prose-td:py-1.5 prose-td:border prose-td:border-slate-200 dark:prose-td:border-slate-700"
-  ].join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: containerRef,
-      className: className ? `${proseClasses} ${className}` : proseClasses,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(FrontmatterDisplay, { frontmatter }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ReactMarkdown__default.default,
-          {
-            remarkPlugins,
-            rehypePlugins,
-            urlTransform: transformImageUri,
-            components: markdownComponents,
-            children: body
-          }
-        )
-      ]
-    }
-  );
+//#endregion
+//#region src/MarkdownViewer.tsx
+/**
+* React markdown viewer component.
+*
+* Renders markdown with the full Vantage pipeline: GFM, math, syntax
+* highlighting, mermaid diagrams, line anchors, and frontmatter display.
+*
+* This is a standalone component with no dependency on Vantage's stores,
+* router, or review system.
+*/
+const MarkdownViewerInner = ({ content, currentPath = "", hash = "", baseUrl = "/", imageApiBase, className, onNavigate }) => {
+	const containerRef = (0, react.useRef)(null);
+	useLineAnchor(containerRef, hash);
+	const { frontmatter, body, bodyLineOffset } = (0, react.useMemo)(() => {
+		return parseFrontmatter(content);
+	}, [content]);
+	const { remarkPlugins, rehypePlugins } = (0, react.useMemo)(() => buildPipeline({ bodyLineOffset }), [bodyLineOffset]);
+	const handleLinkClick = (0, react.useCallback)((e, href) => {
+		if (href.startsWith("#")) {
+			e.preventDefault();
+			const id = href.slice(1);
+			const el = document.getElementById(id);
+			if (el) {
+				const scrollContainer = el.closest("[data-content-scroll]") || el.closest(".overflow-y-auto");
+				if (scrollContainer) {
+					const offset = el.getBoundingClientRect().top - scrollContainer.getBoundingClientRect().top + scrollContainer.scrollTop;
+					scrollContainer.scrollTo({ top: offset - 16 });
+				} else el.scrollIntoView();
+			}
+			return;
+		}
+		if (href.startsWith("http") || href.startsWith("mailto:")) return;
+		if (onNavigate) {
+			if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
+			e.preventDefault();
+			const [pathPart, hashPart] = href.split("#");
+			const parts = currentPath.split("/");
+			parts.pop();
+			const dir = parts.join("/");
+			const cleanHref = pathPart.replace(/^\.\//, "");
+			onNavigate((dir ? `${dir}/${cleanHref}` : cleanHref) + (hashPart ? `#${hashPart}` : ""));
+		}
+	}, [currentPath, onNavigate]);
+	const resolveHref = (0, react.useCallback)((href) => {
+		if (!href) return "";
+		if (href.startsWith("http") || href.startsWith("mailto:") || href.startsWith("#") || href.startsWith("/")) return href;
+		const [pathPart, hashPart] = href.split("#");
+		const parts = currentPath.split("/");
+		parts.pop();
+		const dir = parts.join("/");
+		const cleanHref = pathPart.replace(/^\.\//, "");
+		return `${baseUrl}${dir ? `${dir}/${cleanHref}` : cleanHref}${hashPart ? `#${hashPart}` : ""}`;
+	}, [currentPath, baseUrl]);
+	const transformImageUri = (0, react.useCallback)((uri, key) => {
+		if (key === "href") return uri;
+		if (uri.startsWith("http") || uri.startsWith("data:")) return uri;
+		const parts = currentPath.split("/");
+		parts.pop();
+		const dir = parts.join("/");
+		const resolvedPath = dir ? `${dir}/${uri}` : uri;
+		if (imageApiBase) return `${imageApiBase}/content?path=${encodeURIComponent(resolvedPath)}`;
+		return `${baseUrl}${resolvedPath}`;
+	}, [
+		currentPath,
+		baseUrl,
+		imageApiBase
+	]);
+	const markdownComponents = (0, react.useMemo)(() => ({
+		a({ href, children, ...props }) {
+			const resolvedHref = resolveHref(href);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+				href: resolvedHref,
+				onClick: (e) => href && handleLinkClick(e, href),
+				...props,
+				children
+			});
+		},
+		code(props) {
+			const { children, className: codeClassName, ...rest } = props;
+			const match = /language-(\w+)/.exec(codeClassName || "");
+			if (match && match[1] === "mermaid") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MermaidDiagram, { code: String(children).replace(/\n$/, "") });
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", {
+				className: codeClassName,
+				...rest,
+				children
+			});
+		}
+	}), [handleLinkClick, resolveHref]);
+	const proseClasses = [
+		"prose prose-slate dark:prose-invert max-w-none",
+		"prose-headings:font-semibold prose-headings:tracking-tight prose-headings:text-slate-900 dark:prose-headings:text-slate-100",
+		"prose-h1:text-[2em] prose-h1:mb-3 prose-h1:pb-[0.3em] prose-h1:border-b prose-h1:border-slate-200 dark:prose-h1:border-slate-700",
+		"prose-h2:text-[1.5em] prose-h2:mt-6 prose-h2:mb-3 prose-h2:pb-[0.3em] prose-h2:border-b prose-h2:border-slate-200 dark:prose-h2:border-slate-700",
+		"prose-h3:text-[1.25em] prose-h3:mt-6 prose-h3:mb-2",
+		"prose-h4:text-[1em] prose-h4:mt-6 prose-h4:mb-2",
+		"prose-p:text-slate-700 dark:prose-p:text-slate-300 prose-p:leading-[1.5] prose-p:my-[16px]",
+		"prose-ul:my-[16px] prose-ul:list-disc prose-li:my-0.5 prose-li:marker:text-slate-900 dark:prose-li:marker:text-slate-300",
+		"prose-ol:my-[16px] prose-li:marker:text-slate-900 dark:prose-li:marker:text-slate-300",
+		"prose-pre:bg-slate-50 dark:prose-pre:bg-slate-800 prose-pre:border prose-pre:border-slate-200 dark:prose-pre:border-slate-700 prose-pre:p-4 prose-pre:rounded-md prose-pre:text-[85%] prose-pre:leading-[1.45]",
+		"prose-a:text-blue-600 dark:prose-a:text-blue-400 prose-a:no-underline hover:prose-a:underline",
+		"prose-img:rounded-lg prose-img:my-4",
+		"prose-blockquote:border-l-[0.25em] prose-blockquote:border-slate-300 dark:prose-blockquote:border-slate-600 prose-blockquote:pl-4 prose-blockquote:text-slate-600 dark:prose-blockquote:text-slate-400 prose-blockquote:italic",
+		"prose-code:before:content-none prose-code:after:content-none",
+		"prose-code:bg-slate-100 dark:prose-code:bg-slate-800 prose-code:px-[0.4em] prose-code:py-[0.2em] prose-code:rounded-md prose-code:text-slate-800 dark:prose-code:text-slate-200 prose-code:font-mono prose-code:text-[85%] prose-code:font-normal prose-code:border prose-code:border-slate-200/50 dark:prose-code:border-slate-700/50",
+		"prose-table:text-sm",
+		"prose-th:px-3 prose-th:py-1.5 prose-th:border prose-th:border-slate-200 dark:prose-th:border-slate-700",
+		"prose-td:px-3 prose-td:py-1.5 prose-td:border prose-td:border-slate-200 dark:prose-td:border-slate-700"
+	].join(" ");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		ref: containerRef,
+		className: className ? `${proseClasses} ${className}` : proseClasses,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FrontmatterDisplay, { frontmatter }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_markdown.default, {
+			remarkPlugins,
+			rehypePlugins,
+			urlTransform: transformImageUri,
+			components: markdownComponents,
+			children: body
+		})]
+	});
 };
-var MarkdownViewer = react.memo(
-  MarkdownViewerInner,
-  (prevProps, nextProps) => prevProps.content === nextProps.content && prevProps.currentPath === nextProps.currentPath && prevProps.hash === nextProps.hash && prevProps.className === nextProps.className
-);
+const MarkdownViewer = (0, react.memo)(MarkdownViewerInner, (prevProps, nextProps) => prevProps.content === nextProps.content && prevProps.currentPath === nextProps.currentPath && prevProps.hash === nextProps.hash && prevProps.className === nextProps.className);
+//#endregion
+//#region src/renderMarkdown.ts
+/**
+* Framework-agnostic markdown -> HTML rendering pipeline.
+* Uses the same remark/rehype chain as the Vantage viewer.
+*/
+/**
+* Render a markdown string to HTML using the full Vantage pipeline.
+*
+* Features (all enabled by default):
+* - GitHub Flavored Markdown (tables, strikethrough, task lists)
+* - KaTeX math rendering, inline and block ($$...$$ only; single $ is not a delimiter)
+* - Syntax highlighting via highlight.js
+* - `data-source-line` attributes for line anchors
+* - XSS sanitization
+* - Heading slugs/anchors
+* - YAML/TOML frontmatter parsing
+*
+* Mermaid diagrams are NOT rendered server-side (they require a browser).
+* Mermaid code blocks are preserved as `<pre><code class="language-mermaid">`.
+* Use the React `<MarkdownViewer>` component for client-side mermaid rendering.
+*/
 async function renderMarkdown(content, options = {}) {
-  const {
-    gfm = true,
-    math = true,
-    highlight = true,
-    sourceLines = true,
-    sanitize = true,
-    frontmatter: parseFm = true
-  } = options;
-  let parsed;
-  if (parseFm) {
-    parsed = parseFrontmatter(content);
-  } else {
-    parsed = {
-      frontmatter: {},
-      body: content,
-      format: "none",
-      bodyLineOffset: 0
-    };
-  }
-  const { remarkPlugins, rehypePlugins } = buildPipeline({
-    gfm,
-    math,
-    highlight,
-    sourceLines,
-    sanitize,
-    bodyLineOffset: parsed.bodyLineOffset
-  });
-  const processor = unified.unified().use(remarkParse__default.default).use(remarkPlugins).use(remarkRehype__default.default, { allowDangerousHtml: true }).use(rehypePlugins).use(rehypeStringify__default.default);
-  const result = await processor.process(parsed.body);
-  return {
-    html: String(result),
-    frontmatter: parsed.frontmatter,
-    body: parsed.body
-  };
+	const { gfm = true, math = true, highlight = true, sourceLines = true, sanitize = true, frontmatter: parseFm = true } = options;
+	let parsed;
+	if (parseFm) parsed = parseFrontmatter(content);
+	else parsed = {
+		frontmatter: {},
+		body: content,
+		format: "none",
+		bodyLineOffset: 0
+	};
+	const { remarkPlugins, rehypePlugins } = buildPipeline({
+		gfm,
+		math,
+		highlight,
+		sourceLines,
+		sanitize,
+		bodyLineOffset: parsed.bodyLineOffset
+	});
+	const result = await (0, unified.unified)().use(remark_parse.default).use(remarkPlugins).use(remark_rehype.default, { allowDangerousHtml: true }).use(rehypePlugins).use(rehype_stringify.default).process(parsed.body);
+	return {
+		html: String(result),
+		frontmatter: parsed.frontmatter,
+		body: parsed.body
+	};
 }
-
-// src/renderMermaidBlocks.ts
+//#endregion
+//#region src/renderMermaidBlocks.ts
+/**
+* Client-side utility to find and render mermaid code blocks in a container.
+*
+* After calling `renderMarkdown()`, mermaid blocks come through as
+* `<pre><code class="language-mermaid">...</code></pre>`. This function
+* finds those blocks and replaces them with rendered SVG diagrams.
+*
+* Framework-agnostic — works in any browser environment.
+*/
+/**
+* Find all `<pre><code class="language-mermaid">` blocks in a container
+* and replace them with rendered SVG diagrams.
+*
+* @param container - DOM element containing rendered markdown HTML
+* @param options - Optional configuration
+* @returns Promise that resolves when all diagrams are rendered
+*
+* @example
+* ```ts
+* import { renderMarkdown, renderMermaidBlocks } from "vantage-md";
+*
+* const { html } = await renderMarkdown(content);
+* container.innerHTML = html;
+* await renderMermaidBlocks(container);
+* ```
+*/
 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();
-  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);
-    if (cached) {
-      replaceWithSvg(preEl, cached, className);
-      return;
-    }
-    try {
-      let hash = 0;
-      for (let i = 0; i < code.length; i++) {
-        hash = (hash << 5) - hash + code.charCodeAt(i);
-        hash = hash & hash;
-      }
-      const id = `mermaid-${Math.abs(hash).toString(36)}-${Date.now()}`;
-      const { svg } = await mermaid.render(id, code);
-      svgCache.set(code, svg);
-      replaceWithSvg(preEl, svg, className);
-    } catch (err) {
-      if (onError) {
-        onError(code, err instanceof Error ? err : new Error(String(err)));
-      }
-    }
-  });
-  await Promise.all(renderPromises);
+	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();
+	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);
+		if (cached) {
+			replaceWithSvg(preEl, cached, className);
+			return;
+		}
+		try {
+			let hash = 0;
+			for (let i = 0; i < code.length; i++) {
+				hash = (hash << 5) - hash + code.charCodeAt(i);
+				hash = hash & hash;
+			}
+			const id = `mermaid-${Math.abs(hash).toString(36)}-${Date.now()}`;
+			const { svg } = await mermaid.render(id, code);
+			svgCache.set(code, svg);
+			replaceWithSvg(preEl, svg, className);
+		} catch (err) {
+			if (onError) onError(code, err instanceof Error ? err : new Error(String(err)));
+		}
+	});
+	await Promise.all(renderPromises);
 }
 function replaceWithSvg(preEl, svg, className) {
-  const wrapper = document.createElement("div");
-  wrapper.className = className;
-  wrapper.innerHTML = svg;
-  preEl.replaceWith(wrapper);
+	const wrapper = document.createElement("div");
+	wrapper.className = className;
+	wrapper.innerHTML = svg;
+	preEl.replaceWith(wrapper);
 }
-
-// src/resolveLinks.ts
+//#endregion
+//#region src/resolveLinks.ts
+/**
+* Rewrite relative links in rendered HTML.
+*
+* Processes all `href="..."` attributes, skipping:
+* - Absolute URLs (http://, https://, mailto:, etc.)
+* - Anchor-only links (#section)
+* - Already-absolute paths (/path/to/file)
+*
+* @example
+* ```ts
+* import { renderMarkdown, resolveLinks } from "vantage-md";
+*
+* const { html } = await renderMarkdown(content);
+*
+* // Simple: prepend a base path
+* const resolved = resolveLinks(html, { basePath: "/docs/", currentPath: "guides/setup.md" });
+*
+* // Custom: full control over link rewriting
+* const resolved = resolveLinks(html, {
+*   currentPath: "guides/setup.md",
+*   rewriter: (href, currentPath) => `/kb/${currentPath}/../${href}`,
+* });
+* ```
+*/
 function resolveLinks(html, options = {}) {
-  const { basePath = "/", rewriter, currentPath = "" } = options;
-  const parts = currentPath.split("/");
-  parts.pop();
-  const currentDir = parts.join("/");
-  return html.replace(
-    /href="([^"]*?)"/g,
-    (_match, href) => {
-      if (href.startsWith("http://") || href.startsWith("https://") || href.startsWith("mailto:") || href.startsWith("data:") || href.startsWith("#") || href.startsWith("/")) {
-        return `href="${href}"`;
-      }
-      if (rewriter) {
-        const result = rewriter(href, currentPath);
-        if (result !== null) {
-          return `href="${result}"`;
-        }
-        return `href="${href}"`;
-      }
-      const [pathPart, hashPart] = href.split("#");
-      const cleanHref = pathPart.replace(/^\.\//, "");
-      const resolvedPath = currentDir ? `${currentDir}/${cleanHref}` : cleanHref;
-      const base = basePath.endsWith("/") ? basePath : `${basePath}/`;
-      const finalHref = `${base}${resolvedPath}${hashPart ? `#${hashPart}` : ""}`;
-      return `href="${finalHref}"`;
-    }
-  );
+	const { basePath = "/", rewriter, currentPath = "" } = options;
+	const parts = currentPath.split("/");
+	parts.pop();
+	const currentDir = parts.join("/");
+	return html.replace(/href="([^"]*?)"/g, (_match, href) => {
+		if (href.startsWith("http://") || href.startsWith("https://") || href.startsWith("mailto:") || href.startsWith("data:") || href.startsWith("#") || href.startsWith("/")) return `href="${href}"`;
+		if (rewriter) {
+			const result = rewriter(href, currentPath);
+			if (result !== null) return `href="${result}"`;
+			return `href="${href}"`;
+		}
+		const [pathPart, hashPart] = href.split("#");
+		const cleanHref = pathPart.replace(/^\.\//, "");
+		const resolvedPath = currentDir ? `${currentDir}/${cleanHref}` : cleanHref;
+		return `href="${`${basePath.endsWith("/") ? basePath : `${basePath}/`}${resolvedPath}${hashPart ? `#${hashPart}` : ""}`}"`;
+	});
 }
-
+//#endregion
 exports.DOC_STATUSES = DOC_STATUSES;
 exports.DOC_STATUS_TONES = DOC_STATUS_TONES;
 exports.DocumentStatusChip = DocumentStatusChip;
@@ -1862,12 +2284,12 @@ exports.isDocStatus = isDocStatus;
 exports.parseFrontmatter = parseFrontmatter;
 exports.parseLineAnchor = parseLineAnchor;
 exports.readVantageFrontmatter = readVantageFrontmatter;
-exports.rehypeSourceLines = rehypeSourceLines_default;
+exports.rehypeSourceLines = rehypeSourceLines;
 exports.renderMarkdown = renderMarkdown;
 exports.renderMermaidBlocks = renderMermaidBlocks;
 exports.resolveLinks = resolveLinks;
 exports.sanitizeSchema = sanitizeSchema;
 exports.scrollToLineAnchor = scrollToLineAnchor;
 exports.useLineAnchor = useLineAnchor;
-//# sourceMappingURL=react.cjs.map
+
 //# sourceMappingURL=react.cjs.map