@suzumiyaaoba/mdxr 0.3.0 → 0.4.0

package/dist/cli.mjs

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
-import { Ap as splitPathLines, Cp as takeUsedIcons, Dp as fenceFilename, Fp as isRecord, Gd as reportModel, Ip as nonEmpty, Jf as isStatus, Kd as comparisonModel, Kf as STATUSES, Lp as own, Np as langForPath, Op as fenceLang, Pp as isComponent, Rp as safeHref, V as shadcnModules, Vd as calculate, Wd as REPORT_SPECS, _l as PLOT_NAMES, af as display, ap as textList, cf as parseJson, dc as queryPlanModel, df as tableRecords, fc as diagramModel, gp as numOf, hp as attrTrue, if as columnsOf, jl as PlanHeader, jp as SKIP_LANGS, kp as parseLineRange, lc as bundleModel, lf as readRecords, of as isDataRecord, pc as flameModel, qd as schemaRows, sf as numberValue, t as builtinComponents, uc as dependencyMatrixModel, uf as records, vl as plotModel, wp as DocContext, xf as parseDiff, zp as urlScheme } from "./ui-DOxuV3n8.mjs";
-import { a as loadUserModule, c as srcDir, i as importBundledCode, n as loadConfig, o as resolveModuleEntry, r as SHARED_PACKAGES, s as pkgRoot } from "./config-DhBFpSdB.mjs";
+import { Ap as parseLineRange, Bp as urlScheme, Fp as isComponent, Gd as reportModel, Ip as isRecord, Jf as isStatus, Kd as comparisonModel, Kf as STATUSES, Lp as nonEmpty, Mp as SKIP_LANGS, Op as fenceFilename, Pp as langForPath, Rp as own, Tp as DocContext, V as shadcnModules, Vd as calculate, Wd as REPORT_SPECS, _l as PLOT_NAMES, _p as numOf, af as display, ap as numList, cf as parseJson, dc as queryPlanModel, df as tableRecords, fc as diagramModel, gp as attrTrue, if as columnsOf, jl as PlanHeader, jp as splitPathLines, kp as fenceLang, lc as bundleModel, lf as readRecords, of as isDataRecord, op as textList, pc as flameModel, qd as schemaRows, sf as numberValue, t as builtinComponents, uc as dependencyMatrixModel, uf as records, vl as plotModel, wp as takeUsedIcons, xf as parseDiff, zp as safeHref } from "./ui-D89i0Cq-.mjs";
+import { a as loadUserModule, c as srcDir, i as importBundledCode, n as loadConfig, o as resolveModuleEntry, r as SHARED_PACKAGES, s as pkgRoot } from "./config-DQeZaek7.mjs";
 import module from "node:module";
 import fsp, { access, readFile, readdir, writeFile } from "node:fs/promises";
 import path from "node:path";
@@ -23,15 +23,18 @@ import { visit } from "unist-util-visit";
 import fs, { existsSync, readFileSync, realpathSync } from "node:fs";
 import { visitParents } from "unist-util-visit-parents";
 import * as valibot from "valibot";
-import { Fragment, createElement } from "react";
+import { Fragment, createContext, createElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { icons } from "@iconify-json/lucide";
 import { icons as icons$1 } from "@iconify-json/vscode-icons";
+import { differenceInCalendarDays, isValid, parseISO } from "date-fns";
+import { cn } from "cn";
 import { build } from "esbuild";
 import os from "node:os";
 import { spawn } from "node:child_process";
 import { once } from "node:events";
-import { compile } from "@mdx-js/mdx";
 import { renderToStaticMarkup, renderToString } from "react-dom/server";
+import { compile } from "@mdx-js/mdx";
 import rehypeKatex from "rehype-katex";
 import { transformerMetaHighlight, transformerMetaWordHighlight, transformerNotationDiff, transformerNotationErrorLevel, transformerNotationFocus, transformerNotationHighlight, transformerNotationWordHighlight, transformerRemoveNotationEscape } from "@shikijs/transformers";
 import { createHighlighter } from "shiki";
@@ -1177,8 +1180,11 @@ const toList = (items) => ({
 * 2. `<Toc>` elements (`:::toc` included) get a nested link list injected as
 *    children — `depth`/`min` attributes bound the heading levels included
 *    (defaults: h2–h3, i.e. min=2 depth=3).
+*
+* The flat heading list is also left on `file.data.mdxrHeadings` for the
+* page-level sidebar ToC.
 */
-const remarkMdxrHeadings = () => (tree) => {
+const remarkMdxrHeadings = () => (tree, file) => {
 	const counts = /* @__PURE__ */ new Map();
 	const used = /* @__PURE__ */ new Set();
 	const headings = [];
@@ -1209,6 +1215,11 @@ const remarkMdxrHeadings = () => (tree) => {
 		const items = headings.filter((h) => h.depth >= minDepth && h.depth <= maxDepth && h.text !== "");
 		node.children = items.length === 0 ? [] : [toList(nest(items))];
 	});
+	file.data.mdxrHeadings = headings.filter((h) => h.text !== "").map(({ depth, slug, text }) => ({
+		depth,
+		slug,
+		text
+	}));
 };
 //#endregion
 //#region src/remark/no-js.ts
@@ -1483,6 +1494,8 @@ const flag = (node, name) => {
 	for (const a of node.attributes) if (isRecord(a) && a.name === name) return a.value === null || a.value === true || attrTrue(a.value);
 	return false;
 };
+/** Attribute explicitly set to the string `"false"` (open="false" opt-outs). */
+const flagOff = (node, name) => attr(node, name) === "false";
 /** Numeric part of an attribute — `"120ms"` → 120. */
 const num = (node, name) => numOf(attr(node, name));
 /** Comma-separated attribute list (`labels="a,b"`). */
@@ -1501,36 +1514,29 @@ const hoistable = (c) => c.type === "paragraph" && isParent(c) && c.children.eve
 * elements hoisted out of element-only paragraphs (see `hoistable`).
 */
 const els = (node, name) => {
-	const out = [];
-	for (const c of node.children ?? []) {
-		if (isMdxEl(c)) {
-			if (name === void 0 || c.name === name) out.push(c);
-			continue;
-		}
-		if (hoistable(c)) {
-			for (const cc of c.children) if (isMdxEl(cc) && (name === void 0 || cc.name === name)) out.push(cc);
-		}
-	}
-	return out;
+	return (node.children ?? []).flatMap((c) => hoistable(c) ? c.children : [c]).filter((c) => isMdxEl(c) && (name === void 0 || c.name === name));
 };
 /**
 * `node` minus the named JSX children — direct elements removed, matching
 * elements stripped out of paragraphs (now-empty paragraphs dropped).
 */
-const withoutEls = (node, names) => ({
-	...node,
-	children: (node.children ?? []).flatMap((c) => {
-		if (isMdxEl(c)) return names.includes(c.name ?? "") ? [] : [c];
-		if (c.type === "paragraph" && isParent(c)) {
-			const kids = c.children.filter((cc) => !(isMdxEl(cc) && names.includes(cc.name ?? "")));
-			return kids.every((cc) => cc.type === "text" && "value" in cc && typeof cc.value === "string" && cc.value.trim() === "") ? [] : [{
-				...c,
-				children: kids
-			}];
-		}
-		return [c];
-	})
-});
+const withoutEls = (node, names) => {
+	const removed = new Set(names);
+	return {
+		...node,
+		children: (node.children ?? []).flatMap((c) => {
+			if (isMdxEl(c)) return removed.has(c.name ?? "") ? [] : [c];
+			if (hoistable(c)) {
+				const kids = c.children.filter((cc) => !(isMdxEl(cc) && removed.has(cc.name ?? "")));
+				return kids.every((cc) => cc.type === "text" && "value" in cc && typeof cc.value === "string" && cc.value.trim() === "") ? [] : [{
+					...c,
+					children: kids
+				}];
+			}
+			return [c];
+		})
+	};
+};
 /** All literal text under `node` (text + inlineCode values, tree order). */
 const textOf = (node) => Array.isArray(node) ? node.map(textContent$1).join("") : textContent$1(node);
 const txt = (value) => ({
@@ -1663,6 +1669,53 @@ const phrasing = (nodes) => nodes.flatMap((n) => {
 	const t = deepText([n]).trim();
 	return t === "" ? [] : [txt(t)];
 });
+const boldHtml = (node, ctx) => [strong(ctx.inline(node))];
+const emphasisHtml = (node, ctx) => [em(ctx.inline(node))];
+const deleteHtml = (node, ctx) => [del(ctx.inline(node))];
+const codeHtml = (node) => [icode(deepText(node.children ?? []))];
+const HTML_INLINE = {
+	a: (node, ctx) => {
+		const href = attr(node, "href");
+		const inner = ctx.inline(node);
+		return href === void 0 ? inner : [link(href, inner)];
+	},
+	b: boldHtml,
+	br: () => [brk()],
+	code: codeHtml,
+	del: deleteHtml,
+	em: emphasisHtml,
+	i: emphasisHtml,
+	img: (node) => {
+		return [{
+			alt: attr(node, "alt"),
+			type: "image",
+			url: attr(node, "src") ?? ""
+		}];
+	},
+	kbd: codeHtml,
+	s: deleteHtml,
+	samp: codeHtml,
+	strike: deleteHtml,
+	strong: boldHtml
+};
+/** Wrap adjacent inline nodes while retaining nested block structure. */
+const blocksOf = (nodes) => {
+	const blocks = [];
+	let inline = [];
+	for (const node of nodes) {
+		if (PHRASING.has(node.type)) {
+			inline.push(...phrasing([node]));
+			continue;
+		}
+		if (inline.length > 0) {
+			blocks.push(para(inline));
+			inline = [];
+		}
+		blocks.push(node);
+	}
+	if (inline.length > 0) blocks.push(para(inline));
+	return blocks;
+};
 /**
 * Raw HTML elements written into a document are mdxJsx elements too —
 * give the meaningful ones a markdown form (`<a>` → link, `<code>` →
@@ -1672,49 +1725,52 @@ const htmlEl = (node, ctx, inline) => {
 	const name = node.name ?? "";
 	const kids = () => phrasing(ctx.children(node));
 	const blocks = () => ctx.children(node);
-	if (name === "a") {
-		const href = attr(node, "href");
-		const inner = kids();
-		return href === void 0 ? inner : [link(href, inner)];
-	}
-	if (name === "img") return [{
-		alt: attr(node, "alt"),
-		type: "image",
-		url: attr(node, "src") ?? ""
-	}];
-	if (name === "br") return [brk()];
-	if (name === "strong" || name === "b") return [strong(kids())];
-	if (name === "em" || name === "i") return [em(kids())];
-	if (name === "del" || name === "s" || name === "strike") return [del(kids())];
-	if (name === "code" || name === "kbd" || name === "samp") return [icode(deepText(node.children ?? []))];
+	const inlineRenderer = own(HTML_INLINE, name);
+	if (inlineRenderer !== void 0) return inlineRenderer(node, ctx);
 	if (name === "hr") return [thematic()];
 	if (name === "p") return [para(kids())];
 	if (/^h[1-6]$/u.test(name)) return [heading(Number(name[1]), kids())];
 	if (name === "blockquote") return [quote(blocks())];
 	if (name === "pre") return [pre(deepText(node.children ?? []))];
 	if (name === "ul" || name === "ol") {
-		const items = els(node, "li").map((li) => item([para(phrasing(ctx.children(li)))]));
+		const items = els(node, "li").map((li) => item(blocksOf(ctx.children(li))));
 		return items.length === 0 ? blocks() : [list(items, name === "ol")];
 	}
 	return inline ? kids() : blocks();
 };
+const renderMdxElement = (node, ctx, registry) => {
+	const name = node.name ?? "";
+	const entry = own(registry, name);
+	if (entry === void 0) {
+		if (/^[a-z]/u.test(name)) return htmlEl(node, ctx, node.type === "mdxJsxTextElement");
+		ctx.warn(name);
+		return ctx.children(node);
+	}
+	if (node.type === "mdxJsxTextElement") return entry.text?.(node, ctx) ?? phrasing(entry.flow?.(node, ctx) ?? ctx.children(node));
+	if (entry.flow !== void 0) return entry.flow(node, ctx);
+	const inlineOut = entry.text?.(node, ctx);
+	return inlineOut === void 0 ? ctx.children(node) : [para(inlineOut)];
+};
 /** Replace every mdxJsx element under `root` with its ASCII representation. */
 const transformAscii = (root, registry, serialize, warn) => {
 	const transformElement = (n, ctx) => {
-		if (isMdxEl(n)) {
-			const name = n.name ?? "";
-			const entry = own(registry, name);
-			if (entry === void 0) {
-				if (/^[a-z]/u.test(name)) return htmlEl(n, ctx, n.type === "mdxJsxTextElement");
-				warn(name);
-				return ctx.children(n);
+		if (isMdxEl(n)) return renderMdxElement(n, ctx, registry);
+		if (isParent(n)) {
+			if (hoistable(n)) {
+				const children = n.children.filter(isMdxEl).map((child) => ({
+					...child,
+					type: "mdxJsxFlowElement"
+				}));
+				return blocksOf(ctx.children({
+					...n,
+					children
+				}));
 			}
-			if (n.type === "mdxJsxTextElement") return entry.text?.(n, ctx) ?? phrasing(entry.flow?.(n, ctx) ?? ctx.children(n));
-			if (entry.flow !== void 0) return entry.flow(n, ctx);
-			const inlineOut = entry.text?.(n, ctx);
-			return inlineOut === void 0 ? ctx.children(n) : [para(inlineOut)];
+			return [{
+				...n,
+				children: ctx.children(n)
+			}];
 		}
-		if (isParent(n)) n.children = ctx.children(n);
 		return [n];
 	};
 	const transformNodes = (nodes, ctx) => nodes.flatMap((node) => {
@@ -1784,7 +1840,7 @@ const STATUS_ICON = {
 	unverified: "?",
 	up: "✓"
 };
-const statusIcon = (status) => status === void 0 ? "•" : STATUS_ICON[status.toLowerCase()] ?? "•";
+const statusIcon = (status) => status === void 0 ? "•" : own(STATUS_ICON, status.toLowerCase()) ?? "•";
 /** Left-align `s` in a `width`-wide column (no padding past the width). */
 const pad = (s, width) => s.length >= width ? s : s + " ".repeat(width - s.length);
 //#endregion
@@ -1796,6 +1852,11 @@ const suffix = (parts) => {
 };
 /** Bare `a · b · c` joining (no leading separator). */
 const joined = (parts) => parts.filter(nonEmpty).join(" · ");
+/** A disclosure with literal summary text and an already serialized body. */
+const detailsBlock = (summary, body) => {
+	const escaped = summary.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;");
+	return html(`<details>\n<summary>${escaped}</summary>\n\n${body.trim()}\n\n</details>`);
+};
 /**
 * `**Title — extra**` caption paragraph, emitted only when something is
 * there. A title-less caption drops a leading ` — `/space so `extra` alone
@@ -1824,7 +1885,7 @@ const tally$1 = (entries, key) => {
 //#endregion
 //#region src/ascii/charts.ts
 /** Attribute → number list (`values="12, 8, 4"`). */
-const nums = (node, key) => csv(node, key).map(Number).filter((v) => !Number.isNaN(v));
+const nums = (node, key) => numList(attr(node, key));
 /** `label ██████░░ 42` fence rows from name/value pairs. */
 const barRows = (rows, max) => {
 	const W = 24;
@@ -2190,7 +2251,7 @@ const term = (node, ctx) => [para([strong([txt(attr(node, "name") ?? "")]), ...c
 const details = (node, ctx) => {
 	const summary = attr(node, "summary") ?? "Details";
 	const body = ctx.serialize(ctx.children(node)).trim();
-	return [html(`<details>\n<summary>${summary}</summary>\n\n${body}\n\n</details>`)];
+	return [detailsBlock(summary, body)];
 };
 const documentRenderers = {
 	Callout: { flow: (n, ctx) => {
@@ -2286,7 +2347,7 @@ const nodeRows = (node) => {
 	if (grid && isParent(grid)) return tableRecords(grid.children.map((row) => isParent(row) ? row.children.map(textOf) : []));
 	return els(node, "RecordItem").map(nodeAttributes);
 };
-const recordsTable = (rows, cols) => rows.length ? [table(cols ?? columnsOf(rows), rows.map((row) => (cols ?? columnsOf(rows)).map((key) => display(row[key]) || "—")))] : [para([txt("No data")])];
+const recordsTable = (rows, cols) => rows.length ? [table(cols ?? columnsOf(rows), rows.map((row) => (cols ?? columnsOf(rows)).map((key) => display(own(row, key)) || "—")))] : [para([txt("No data")])];
 const narrative = (node, ctx) => {
 	if (attr(node, "data") !== void 0) return ctx.children(node);
 	const children = node.children?.filter((child) => {
@@ -2411,14 +2472,14 @@ Object.assign(extendedRenderers, {
 		"pnpm",
 		"yarn",
 		"bun"
-	].map((manager) => `${manager} ${manager === "npm" ? "install" : "add"}${attr(node, "dev") === "true" ? " -D" : ""} ${attr(node, "packages") ?? ""}`).join("\n"), "sh")] },
+	].map((manager) => `${manager} ${manager === "npm" ? "install" : "add"}${flag(node, "dev") ? " -D" : ""} ${attr(node, "packages") ?? ""}`).join("\n"), "sh")] },
 	PageBreak: { flow: () => [{ type: "thematicBreak" }] },
 	PdfPreview: { flow: (node) => sourceLink(node, "src", `${attr(node, "title") ?? "PDF document"} (page ${attr(node, "page") ?? "1"})`) },
 	PrintLayout: { flow: (node, ctx) => ctx.children(node) },
 	PromptTemplate: { flow: (node) => {
 		const rows = nodeRows(node);
 		const defaults = Object.fromEntries(rows.map((row) => [display(row.name), display(row.value)]));
-		const prompt = (attr(node, "template") ?? "").replaceAll(/\{\{\s*(?<variable>[\w.-]+)\s*\}\}/gu, (match, name) => defaults[name] ?? match);
+		const prompt = (attr(node, "template") ?? "").replaceAll(/\{\{\s*(?<variable>[\w.-]+)\s*\}\}/gu, (match, name) => own(defaults, name) ?? match);
 		return [
 			...caption(attr(node, "title") ?? "Prompt template"),
 			...recordsTable(rows),
@@ -2534,28 +2595,20 @@ const numbered = (entries, statusKey, ctx) => list(entries.map((e) => item([para
 ])])), true);
 const NOTE_RE = /\s+(?:—|#)\s+/u;
 const PLACEHOLDER_RE = /^(?:\.{3}|…)$/u;
-const treeEntries = (nodes) => {
-	const out = [];
-	const walk = (n) => {
-		if (n.type === "list" && isParent(n)) {
-			for (const li of n.children) {
-				if (li.type !== "listItem" || !isParent(li)) continue;
-				const nested = li.children.filter((c) => c.type === "list");
-				const labelText = li.children.filter((c) => c.type !== "list").map((c) => textOf(c)).join("").trim();
-				const m = NOTE_RE.exec(labelText);
-				out.push({
-					children: treeEntries(nested),
-					name: (m === null ? labelText : labelText.slice(0, m.index)).trim(),
-					...m === null ? {} : { note: labelText.slice(m.index + m[0].length).trim() }
-				});
-			}
-			return;
-		}
-		if (isParent(n)) for (const c of n.children) walk(c);
+const treeEntry = (node, children) => {
+	const label = node.children.filter((child) => child.type !== "list").map(textOf).join("").trim();
+	const note = NOTE_RE.exec(label);
+	return {
+		children,
+		name: (note === null ? label : label.slice(0, note.index)).trim(),
+		...note === null ? {} : { note: label.slice(note.index + note[0].length).trim() }
 	};
-	for (const c of nodes) walk(c);
-	return out;
 };
+const treeEntries = (nodes) => nodes.flatMap((node) => {
+	if (!isParent(node)) return [];
+	if (node.type === "list") return node.children.filter((child) => child.type === "listItem" && isParent(child)).map((child) => treeEntry(child, treeEntries(child.children.filter((nested) => nested.type === "list"))));
+	return treeEntries(node.children);
+});
 const treeLines = (entries, prefix) => entries.flatMap((e, i) => {
 	const last = i === entries.length - 1;
 	const name = PLACEHOLDER_RE.test(e.name) ? "…" : e.name;
@@ -2652,14 +2705,18 @@ const investigationRenderers = {
 		...nonEmpty(attr(n, "path")) ? [txt(" — "), icode(pathAt(n))] : [],
 		...ctx.inline(n).length === 0 ? [] : [txt(": "), ...ctx.inline(n)]
 	])] },
-	Hypotheses: { flow: (n, ctx) => [...caption(attr(n, "title")), list(els(n, "Hypothesis").map((h) => {
-		const status = (attr(h, "status") ?? "untested").toLowerCase();
-		return item([para([
-			txt(`${statusIcon(status)} `),
-			...nonEmpty(attr(h, "title")) ? [strong([txt(attr(h, "title") ?? "")])] : [],
-			...ctx.inline(h).length === 0 ? [] : [txt(" — "), ...ctx.inline(h)]
-		]), ...ctx.children(withoutEls(n, ["Hypothesis"]))], status === "supported" ? true : void 0);
-	}))] },
+	Hypotheses: { flow: (n, ctx) => [
+		...caption(attr(n, "title")),
+		list(els(n, "Hypothesis").map((h) => {
+			const status = (attr(h, "status") ?? "untested").toLowerCase();
+			return item([para([
+				txt(`${statusIcon(status)} `),
+				...nonEmpty(attr(h, "title")) ? [strong([txt(attr(h, "title") ?? "")])] : [],
+				...ctx.inline(h).length === 0 ? [] : [txt(" — "), ...ctx.inline(h)]
+			])], status === "supported" ? true : void 0);
+		})),
+		...ctx.children(withoutEls(n, ["Hypothesis"]))
+	] },
 	Hypothesis: { flow: (n, ctx) => [para([txt(`${statusIcon(attr(n, "status"))} `), ...nonEmpty(attr(n, "title")) ? [strong([txt(attr(n, "title") ?? "")])] : []]), ...ctx.children(n)] },
 	Prop: { flow: (n, ctx) => [para([
 		icode(attr(n, "name") ?? ""),
@@ -2784,12 +2841,13 @@ const comment = (node, ctx) => {
 const graph = (node, ctx) => {
 	const nodes = els(node, "Node");
 	const edges = els(node, "Edge");
+	const connected = new Set(edges.flatMap((edge) => [attr(edge, "from"), attr(edge, "to")]));
 	const nodeNotes = nodes.flatMap((nd) => {
 		const label = attr(nd, "label");
 		const note = attr(nd, "note");
 		const path = attr(nd, "path");
 		const status = attr(nd, "status");
-		if ((label === void 0 || label === attr(nd, "id")) && note === void 0 && path === void 0 && status === void 0) return [];
+		if ((label === void 0 || label === attr(nd, "id")) && note === void 0 && path === void 0 && status === void 0 && connected.has(attr(nd, "id"))) return [];
 		const head = [
 			icode(attr(nd, "id") ?? ""),
 			txt(" = "),
@@ -2912,9 +2970,10 @@ const waterfall = (node, ctx) => {
 	const title = attr(node, "title");
 	if (nonEmpty(title)) lines.push(`${title}  (0 → ${total}${unit})`);
 	for (const s of spans) {
-		const from = Math.round(s.start / Math.max(1, total) * W);
-		const len = Math.max(1, Math.round(s.duration / Math.max(1, total) * W));
-		const cells = `${" ".repeat(Math.min(W, from))}${"█".repeat(Math.min(len, W - from))}`;
+		const scale = Math.max(1, total);
+		const from = Math.max(0, Math.min(W, Math.round(s.start / scale * W)));
+		const to = Math.max(from, Math.min(W, Math.round((s.start + Math.max(0, s.duration)) / scale * W)));
+		const cells = `${" ".repeat(from)}${"█".repeat(to - from)}`;
 		lines.push(`${pad(s.name, nameW)} ${cells} ${s.durationRaw || `${s.duration}${unit}`}${nonEmpty(s.note) ? `  ${s.note}` : ""}`);
 	}
 	return [pre(lines.join("\n")), ...ctx.children(withoutEls(node, ["Span"]))];
@@ -2970,6 +3029,7 @@ const outputRenderers = {
 };
 //#endregion
 //#region src/ascii/planning.ts
+/** ASCII renderers for planning & status components. */
 /** `owner` attr → a normalized `@name` chip (leading `@`s collapsed). */
 const ownerChip = (node) => {
 	const owner = attr(node, "owner");
@@ -3009,8 +3069,8 @@ const approvalStatus = (s) => {
 const DAY_MS = 864e5;
 const dayOf = (iso) => {
 	if (iso === void 0) return;
-	const t = Date.parse(iso);
-	return Number.isNaN(t) ? void 0 : Math.floor(t / DAY_MS);
+	const date = parseISO(iso);
+	return isValid(date) ? differenceInCalendarDays(date, new Date(1970, 0, 1)) : void 0;
 };
 const TASK_CHAR = {
 	blocked: "▒",
@@ -3018,56 +3078,75 @@ const TASK_CHAR = {
 	done: "█",
 	todo: "░"
 };
+const GANTT_WIDTH = 40;
+const ganttTasks = (node) => els(node, "Task").flatMap((el) => {
+	const start = dayOf(attr(el, "start"));
+	if (start === void 0) return [];
+	return [{
+		el,
+		end: Math.max(start, dayOf(attr(el, "end")) ?? start),
+		name: attr(el, "name") ?? "",
+		progress: num(el, "progress"),
+		start,
+		status: (attr(el, "status") ?? "todo").toLowerCase()
+	}];
+});
+const ganttMilestones = (node) => els(node, "Milestone").flatMap((el) => {
+	const date = dayOf(attr(el, "date"));
+	return date === void 0 ? [] : [{
+		date,
+		el,
+		name: attr(el, "name") ?? ""
+	}];
+});
+const ganttRange = (node, tasks, milestones) => {
+	const start = dayOf(attr(node, "start"));
+	const end = dayOf(attr(node, "end"));
+	let first = start ?? Math.min(...tasks.map((task) => task.start), ...milestones.map((milestone) => milestone.date));
+	let last = end ?? Math.max(...tasks.map((task) => task.end), ...milestones.map((milestone) => milestone.date));
+	if (last < first) {
+		if (end !== void 0 && start === void 0) first = last;
+		else last = first;
+	}
+	return {
+		first,
+		last
+	};
+};
+const ganttColumn = (day, range) => Math.max(0, Math.min(GANTT_WIDTH, Math.round((day - range.first) / (range.last - range.first + 1) * GANTT_WIDTH)));
+const ganttTaskLine = (task, range, nameWidth) => {
+	const from = ganttColumn(task.start, range);
+	const to = Math.max(from + 1, ganttColumn(task.end + 1, range));
+	const outside = task.end < range.first || task.start > range.last;
+	const glyph = own(TASK_CHAR, task.status) ?? "░";
+	const filled = (to - from) * Math.min(100, Math.max(0, task.progress ?? 0)) / 100;
+	const cells = Array.from({ length: GANTT_WIDTH }, (_, i) => {
+		if (outside || i < from || i >= to) return " ";
+		return i - from < filled ? "█" : glyph;
+	}).join("");
+	const tail = joined([ownerChip(task.el), attr(task.el, "note")]);
+	return `${pad(task.name, nameWidth)} ${cells}${tail === "" ? "" : `  ${tail}`}`;
+};
+const ganttMilestoneLine = (milestone, range, nameWidth) => {
+	const position = milestone.date < range.first || milestone.date > range.last ? -1 : Math.min(39, ganttColumn(milestone.date, range));
+	const cells = Array.from({ length: GANTT_WIDTH }, (_, i) => i === position ? "◆" : " ").join("");
+	const tail = joined([attr(milestone.el, "status"), attr(milestone.el, "note")]);
+	return `${pad(milestone.name, nameWidth)} ${cells}${tail === "" ? "" : `  ${tail}`}`;
+};
 const gantt = (node, ctx) => {
-	const tasks = els(node, "Task").flatMap((t) => {
-		const start = dayOf(attr(t, "start"));
-		return start === void 0 ? [] : [{
-			el: t,
-			end: dayOf(attr(t, "end")) ?? start,
-			name: attr(t, "name") ?? "",
-			progress: num(t, "progress"),
-			start,
-			status: (attr(t, "status") ?? "todo").toLowerCase()
-		}];
-	});
-	const milestones = els(node, "Milestone").flatMap((m) => {
-		const date = dayOf(attr(m, "date"));
-		return date === void 0 ? [] : [{
-			date,
-			el: m,
-			name: attr(m, "name") ?? ""
-		}];
-	});
+	const tasks = ganttTasks(node);
+	const milestones = ganttMilestones(node);
 	if (tasks.length === 0 && milestones.length === 0) return ctx.children(node);
-	const lo = dayOf(attr(node, "start")) ?? Math.min(...tasks.map((t) => t.start), ...milestones.map((m) => m.date));
-	const hi = dayOf(attr(node, "end")) ?? Math.max(...tasks.map((t) => t.end + 1), ...milestones.map((m) => m.date + 1));
-	const span = Math.max(1, hi - lo);
-	const W = 40;
-	const at = (day) => Math.max(0, Math.min(W, Math.round((day - lo) / span * W)));
-	const nameW = Math.min(24, Math.max(8, ...tasks.map((t) => t.name.length), ...milestones.map((m) => m.name.length)));
-	const iso = (d) => (/* @__PURE__ */ new Date(d * DAY_MS)).toISOString().slice(0, 10);
-	const lines = [];
+	const range = ganttRange(node, tasks, milestones);
+	const nameWidth = Math.min(24, Math.max(8, ...tasks.map((task) => task.name.length), ...milestones.map((milestone) => milestone.name.length)));
+	const iso = (day) => (/* @__PURE__ */ new Date(day * DAY_MS)).toISOString().slice(0, 10);
 	const title = attr(node, "title");
-	if (nonEmpty(title)) lines.push(title);
-	lines.push(`${pad("", nameW)} ${iso(lo)} → ${iso(hi)}`);
-	for (const t of tasks) {
-		const from = at(t.start);
-		const to = Math.max(from + 1, at(t.end + 1));
-		const cells = Array.from({ length: W }, (_, i) => {
-			if (i < from || i >= to) return " ";
-			const ch = TASK_CHAR[t.status] ?? "░";
-			if (t.progress === void 0 || t.progress <= 0) return ch;
-			return i - from < (to - from) * Math.min(100, t.progress) / 100 ? "█" : ch;
-		}).join("");
-		const owner = attr(t.el, "owner");
-		const tail = joined([nonEmpty(owner) ? `@${owner.replace(/^@+/u, "")}` : void 0, attr(t.el, "note")]);
-		lines.push(`${pad(t.name, nameW)} ${cells}${tail === "" ? "" : `  ${tail}`}`);
-	}
-	for (const m of milestones) {
-		const cells = Array.from({ length: W }, (_, i) => i === at(m.date) ? "◆" : " ").join("");
-		const tail = joined([attr(m.el, "status"), attr(m.el, "note")]);
-		lines.push(`${pad(m.name, nameW)} ${cells}${tail === "" ? "" : `  ${tail}`}`);
-	}
+	const lines = [
+		...nonEmpty(title) ? [title] : [],
+		`${pad("", nameWidth)} ${iso(range.first)} → ${iso(range.last)}`,
+		...tasks.map((task) => ganttTaskLine(task, range, nameWidth)),
+		...milestones.map((milestone) => ganttMilestoneLine(milestone, range, nameWidth))
+	];
 	return [pre(lines.join("\n")), ...ctx.children(withoutEls(node, ["Task", "Milestone"]))];
 };
 const CELL_GLYPH = {
@@ -3103,7 +3182,7 @@ const CELL_GLYPH = {
 };
 const matrixCell = (cell) => {
 	const key = cell.trim().toLowerCase();
-	return key === "" ? "—" : CELL_GLYPH[key] ?? cell.trim();
+	return key === "" ? "—" : own(CELL_GLYPH, key) ?? cell.trim();
 };
 /** `- label | a | b` list items → matrix rows. */
 const matrixRows = (node) => {
@@ -3135,12 +3214,16 @@ const planningRenderers = {
 		attr(a, "role"),
 		attr(a, "status"),
 		attr(a, "date")
-	])], []))), ...ctx.children(withoutEls(n, ["Approval"]))] },
+	])], ctx.children(a)))), ...ctx.children(withoutEls(n, ["Approval"]))] },
 	Board: { flow: (n, ctx) => [
 		...caption(attr(n, "title")),
 		...els(n, "Lane").flatMap((lane) => {
 			const cards = els(lane, "BoardCard");
-			return [para([txt(`${statusIcon(attr(lane, "status"))} `), strong([txt(`${attr(lane, "title") ?? ""} (${cards.length})`)])]), list(cards.map((c) => boardCard(c, ctx)))];
+			return [
+				para([txt(`${statusIcon(attr(lane, "status"))} `), strong([txt(`${attr(lane, "title") ?? ""} (${cards.length})`)])]),
+				list(cards.map((c) => boardCard(c, ctx))),
+				...ctx.children(withoutEls(lane, ["BoardCard"]))
+			];
 		}),
 		...ctx.children(withoutEls(n, ["Lane"]))
 	] },
@@ -3202,11 +3285,11 @@ const planningRenderers = {
 		])],
 		text: (n) => [strong([txt(attr(n, "value") ?? "")]), txt(` ${attr(n, "label") ?? ""}`)]
 	},
-	Stats: { flow: (n) => [list(els(n, "Stat").map((s) => item([para([
+	Stats: { flow: (n, ctx) => [list(els(n, "Stat").map((s) => item([para([
 		strong([txt(attr(s, "value") ?? "")]),
 		txt(` ${attr(s, "label") ?? ""}`),
 		...nonEmpty(attr(s, "delta")) ? [txt(` (${attr(s, "delta")})`)] : []
-	])])))] },
+	])]))), ...ctx.children(withoutEls(n, ["Stat"]))] },
 	StatusBadge: { text: (n) => [icode(attr(n, "status") ?? "")] },
 	Step: { flow: (n, ctx) => [para([
 		txt(`${statusIcon(attr(n, "status"))} `),
@@ -3269,7 +3352,7 @@ const VERDICT_LABEL = {
 	pass: "Passed",
 	warn: "Warning"
 };
-const verdictLabel = (s) => s === void 0 ? void 0 : VERDICT_LABEL[s.toLowerCase()] ?? s;
+const verdictLabel = (s) => s === void 0 ? void 0 : own(VERDICT_LABEL, s.toLowerCase()) ?? s;
 const DURATION_MS = {
 	h: 36e5,
 	m: 6e4,
@@ -3318,9 +3401,14 @@ const DAY_CELL = {
 const uptimeStrip = (node) => {
 	const days = els(node, "Day");
 	if (days.length === 0) return "";
-	return days.map((d) => DAY_CELL[(attr(d, "status") ?? "up").toLowerCase()] ?? "█").join("");
+	return days.map((d) => own(DAY_CELL, (attr(d, "status") ?? "up").toLowerCase()) ?? "█").join("");
+};
+const percentText = (value) => nonEmpty(value) && !value.endsWith("%") ? `${value}%` : value;
+const serviceRow = (node, ctx) => statusItem$1(attr(node, "status"), [txt(attr(node, "name") ?? ""), ...suffix([attr(node, "status"), percentText(attr(node, "uptime"))])], ctx.children(node));
+const releaseVersion = (node) => {
+	const version = attr(node, "version") ?? "";
+	return version.startsWith("v") ? version : `v${version}`;
 };
-const serviceRow = (node) => statusItem$1(attr(node, "status"), [txt(attr(node, "name") ?? ""), ...suffix([attr(node, "status"), nonEmpty(attr(node, "uptime")) ? `${attr(node, "uptime")}%` : void 0])], []);
 const entryRow = (node, ctx) => {
 	const scope = attr(node, "scope");
 	return item([para([
@@ -3368,7 +3456,7 @@ const reportRenderers = {
 					attr(b, "before") ?? "",
 					attr(b, "after") ?? "",
 					d,
-					attr(b, "note") ?? ctx.text(b)
+					joined([attr(b, "note"), ctx.text(b)])
 				];
 			})),
 			...ctx.children(withoutEls(n, ["Bench"]))
@@ -3439,7 +3527,8 @@ const reportRenderers = {
 			"field",
 			"type",
 			"flags",
-			"default"
+			"default",
+			"description"
 		], els(n, "DbField").map((f) => {
 			const flags = [
 				flag(f, "pk") ? "pk" : void 0,
@@ -3451,7 +3540,8 @@ const reportRenderers = {
 				[icode(attr(f, "name") ?? "")],
 				[icode(attr(f, "type") ?? "")],
 				flags,
-				attr(f, "default") ?? ""
+				attr(f, "default") ?? "",
+				ctx.text(f)
 			];
 		})),
 		...ctx.children(withoutEls(n, ["DbField"]))
@@ -3464,7 +3554,7 @@ const reportRenderers = {
 	EnvVar: { flow: (n, ctx) => [para([
 		icode(attr(n, "name") ?? ""),
 		...flag(n, "required") ? [txt(" "), icode("required")] : [],
-		...suffix([flag(n, "secret") ? "secret" : attr(n, "value"), nonEmpty(attr(n, "default")) ? `default ${attr(n, "default")}` : void 0]),
+		...suffix([flag(n, "secret") ? "secret" : attr(n, "value"), !flag(n, "secret") && nonEmpty(attr(n, "default")) ? `default ${attr(n, "default")}` : void 0]),
 		...ctx.inline(n).length === 0 ? [] : [txt(" — "), ...ctx.inline(n)]
 	])] },
 	EnvVars: { flow: (n, ctx) => [
@@ -3479,7 +3569,7 @@ const reportRenderers = {
 			[icode(attr(e, "name") ?? "")],
 			flag(e, "required") ? "yes" : "",
 			flag(e, "secret") ? "•••" : attr(e, "value") ?? "",
-			attr(e, "default") ?? "",
+			flag(e, "secret") ? "•••" : attr(e, "default") ?? "",
 			ctx.text(e)
 		])),
 		...ctx.children(withoutEls(n, ["EnvVar"]))
@@ -3553,7 +3643,7 @@ const reportRenderers = {
 			attr(p, "version") ?? "",
 			attr(p, "kind") ?? "",
 			attr(p, "license") ?? "",
-			ctx.text(p)
+			joined([attr(p, "note"), ctx.text(p)])
 		])),
 		...ctx.children(withoutEls(n, ["Package"]))
 	] },
@@ -3563,17 +3653,17 @@ const reportRenderers = {
 		...ctx.children(withoutEls(n, ["Stop"]))
 	] },
 	Release: { flow: (n, ctx) => [
-		heading(3, [...nonEmpty(attr(n, "href")) ? [link(attr(n, "href") ?? "", [txt(`v${attr(n, "version") ?? ""}`)])] : [icode(`v${attr(n, "version") ?? ""}`)], ...nonEmpty(attr(n, "title")) ? [txt(` — ${attr(n, "title")}`)] : []]),
+		heading(3, [...nonEmpty(attr(n, "href")) ? [link(attr(n, "href") ?? "", [txt(releaseVersion(n))])] : [icode(releaseVersion(n))], ...nonEmpty(attr(n, "title")) ? [txt(` — ${attr(n, "title")}`)] : []]),
 		...nonEmpty(attr(n, "date")) ? [para([em([txt(attr(n, "date") ?? "")])])] : [],
 		...els(n, "Entry").length === 0 ? ctx.children(n) : [list(els(n, "Entry").map((e) => entryRow(e, ctx))), ...ctx.children(withoutEls(n, ["Entry"]))]
 	] },
 	Review: { flow: (n, ctx) => [...caption(attr(n, "title"), `${nonEmpty(attr(n, "verdict")) ? ` — ${verdictLabel(attr(n, "verdict"))}` : ""}${tally$1(els(n, "Comment"), "severity")}`), ...ctx.children(n)] },
 	Schema: { flow: (n, ctx) => [...caption(attr(n, "title"), nonEmpty(attr(n, "engine")) ? ` (${attr(n, "engine")})` : ""), ...ctx.children(n)] },
-	Service: { flow: (n) => [para([
+	Service: { flow: (n, ctx) => [para([
 		txt(`${statusIcon(attr(n, "status"))} `),
 		txt(attr(n, "name") ?? ""),
-		...suffix([attr(n, "status"), nonEmpty(attr(n, "uptime")) ? `${attr(n, "uptime")}%` : void 0])
-	])] },
+		...suffix([attr(n, "status"), percentText(attr(n, "uptime"))])
+	]), ...ctx.children(n)] },
 	Severity: { text: (n) => [icode((attr(n, "level") ?? "").toUpperCase())] },
 	StatusPage: { flow: (n, ctx) => {
 		const services = els(n, "Service");
@@ -3588,7 +3678,7 @@ const reportRenderers = {
 					...suffix([[attr(u, "from"), attr(u, "to")].filter(nonEmpty).join(" → ")])
 				]), ...strip === "" ? [] : [pre(strip)]];
 			}),
-			...services.length === 0 ? [] : [list(services.map(serviceRow))],
+			...services.length === 0 ? [] : [list(services.map((service) => serviceRow(service, ctx)))],
 			...ctx.children(withoutEls(n, ["Service", "Uptime"]))
 		];
 	} },
@@ -3661,33 +3751,39 @@ const menuItem = {
 	text: (n, ctx) => ctx.inline(n)
 };
 /** `[x]`/`[ ]`/`( )` control from a checked-ish attribute. */
+const controlOn = (n) => {
+	if (flag(n, "checked") || flagOff(n, "checked")) return flag(n, "checked");
+	return flag(n, "defaultChecked") || flag(n, "pressed");
+};
 const control = (mark) => ({
 	flow: (n, ctx) => {
 		const inner = ctx.inline(n);
 		const label = attr(n, "label");
 		return [para([
-			icode(mark(flag(n, "checked") || flag(n, "defaultChecked") || flag(n, "pressed"))),
+			icode(mark(controlOn(n))),
 			...inner.length === 0 ? [] : [txt(" "), ...inner],
 			...nonEmpty(label) ? [txt(` ${label}`)] : []
 		])];
 	},
-	text: (n, ctx) => [icode(mark(flag(n, "checked") || flag(n, "defaultChecked") || flag(n, "pressed"))), ...ctx.inline(n).length === 0 ? [] : [txt(" "), ...ctx.inline(n)]]
+	text: (n, ctx) => [icode(mark(controlOn(n))), ...ctx.inline(n).length === 0 ? [] : [txt(" "), ...ctx.inline(n)]]
 });
 /** `` `[____]` ``-style empty input stand-in. */
+const inputText = (n) => {
+	const value = attr(n, "value") ?? attr(n, "defaultValue");
+	if (value !== void 0) return attr(n, "type") === "password" ? "••••" : value;
+	return attr(n, "placeholder") ?? attr(n, "label") ?? "____";
+};
 const input = {
-	flow: (n) => [pre(`[ ${attr(n, "placeholder") ?? attr(n, "value") ?? attr(n, "label") ?? "____"} ]`)],
-	text: (n) => [icode(`[${attr(n, "placeholder") ?? attr(n, "value") ?? attr(n, "label") ?? "____"}]`)]
+	flow: (n) => [pre(`[ ${inputText(n)} ]`)],
+	text: (n) => [icode(`[${inputText(n)}]`)]
 };
 /** `<details>` disclosure — summary from AccordionTrigger/collapsible label. */
 const disclosure = (trigger, fallback) => ({ flow: (n, ctx) => {
 	const [head] = els(n, trigger);
 	const summary = head === void 0 ? attr(n, "label") ?? fallback : ctx.text(head);
-	const rest = ctx.children({
-		...n,
-		children: (n.children ?? []).filter((c) => !named(c, trigger))
-	});
+	const rest = ctx.children(withoutEls(n, [trigger]));
 	const body = ctx.serialize(rest).trim();
-	return [html(`<details>\n<summary>${summary}</summary>\n\n${body}\n\n</details>`)];
+	return [detailsBlock(summary, body)];
 } });
 /** `<Tabs>` → `**tab**` headings + content sections. */
 const tabs = { flow: (n, ctx) => {
@@ -3762,7 +3858,7 @@ const frac = (n) => {
 	const max = num(n, "max") ?? 100;
 	return {
 		text: `${attr(n, "value") ?? Math.round(value)}${nonEmpty(attr(n, "max")) ? `/${attr(n, "max")}` : "%"}`,
-		v: max === 0 ? 0 : Math.min(1, value / max)
+		v: max <= 0 ? 0 : Math.max(0, Math.min(1, value / max))
 	};
 };
 const progress = {
@@ -3813,7 +3909,7 @@ const otp = {
 		return [pre(`[ ${"_ ".repeat(count).trim()} ]`)];
 	},
 	text: (n) => {
-		const count = num(n, "maxLength") ?? 6;
+		const count = Math.max(0, num(n, "maxLength") ?? 6);
 		return [icode(`[${"_".repeat(count)}]`)];
 	}
 };
@@ -4091,50 +4187,54 @@ const mdxToAscii = async (source, filePath = "document.mdx") => {
 };
 //#endregion
 //#region src/catalog.ts
+const OPTIONAL_TYPES = /* @__PURE__ */ new Set([
+	"exact_optional",
+	"nullish",
+	"optional"
+]);
+const describeLiteral = (value) => {
+	if (typeof value === "bigint") return `${value}n`;
+	return JSON.stringify(value) ?? String(value);
+};
+const pipeConstraint = (schema) => {
+	if (!Array.isArray(schema.pipe)) return;
+	return schema.pipe.find((s) => isRecord(s) && (s.type === "picklist" || s.type === "union" || s.type === "literal"));
+};
 /** Structural view of a valibot schema — enough for catalog introspection. */
 const describeSchema = (schema) => {
 	if (!isRecord(schema)) return "unknown";
-	if (schema.type === "array") return `${describeSchema(schema.item)}[]`;
-	if (schema.type === "literal") return JSON.stringify(schema.literal);
-	if (schema.type === "picklist" && Array.isArray(schema.options)) return schema.options.map((o) => JSON.stringify(o)).join(" | ");
-	if (schema.type === "union" && Array.isArray(schema.options)) return schema.options.map(describeSchema).join(" | ");
-	if (Array.isArray(schema.pipe)) {
-		const constrained = schema.pipe.find((s) => isRecord(s) && (s.type === "picklist" || s.type === "union" || s.type === "literal"));
-		if (constrained !== void 0) return describeSchema(constrained);
+	switch (schema.type) {
+		case "nullable":
+		case "nullish": return `${describeSchema(schema.wrapped)} | null`;
+		case "optional":
+		case "exact_optional": return describeSchema(schema.wrapped);
+		case "array": {
+			const item = describeSchema(schema.item);
+			return item.includes(" | ") ? `(${item})[]` : `${item}[]`;
+		}
+		case "literal": return describeLiteral(schema.literal);
+		case "picklist":
+		case "union": if (Array.isArray(schema.options)) {
+			const describe = schema.type === "picklist" ? describeLiteral : describeSchema;
+			return schema.options.map(describe).join(" | ");
+		}
 	}
+	const constrained = pipeConstraint(schema);
+	if (constrained !== void 0) return describeSchema(constrained);
 	return typeof schema.type === "string" ? schema.type : "unknown";
 };
-const WRAPPER_TYPES = /* @__PURE__ */ new Set([
-	"nullable",
-	"nullish",
-	"optional"
-]);
-const unwrapProp = (raw) => {
-	let s = isRecord(raw) ? raw : {};
-	let required = true;
-	let def;
-	while (typeof s.type === "string" && WRAPPER_TYPES.has(s.type)) {
-		required = false;
-		def ??= s.default;
-		s = isRecord(s.wrapped) ? s.wrapped : {};
-	}
-	return {
-		def,
-		required,
-		s
-	};
-};
 const propsOf = (schema) => {
 	if (!isRecord(schema) || !isRecord(schema.entries)) return {};
 	const out = {};
 	for (const [key, raw] of Object.entries(schema.entries)) {
-		const { def, required, s } = unwrapProp(raw);
+		const optional = isRecord(raw) && typeof raw.type === "string" && OPTIONAL_TYPES.has(raw.type);
+		const def = optional ? raw.default : void 0;
 		Object.defineProperty(out, key, {
 			configurable: true,
 			enumerable: true,
 			value: {
-				required,
-				type: describeSchema(s),
+				required: !optional,
+				type: describeSchema(raw),
 				...def === void 0 ? {} : { default: def }
 			},
 			writable: true
@@ -4451,7 +4551,7 @@ const openInBrowser = async (target) => {
 };
 //#endregion
 //#region src/client-js.ts
-let cache;
+let cache$1;
 const buildClientJs = async () => {
 	return (await build({
 		absWorkingDir: pkgRoot,
@@ -4479,11 +4579,11 @@ const buildClientJs = async () => {
 * bundle is identical for every render in a process.
 */
 const clientJs = async () => {
-	cache ??= buildClientJs();
+	cache$1 ??= buildClientJs();
 	try {
-		return await cache;
+		return await cache$1;
 	} catch (error) {
-		cache = void 0;
+		cache$1 = void 0;
 		throw error;
 	}
 };
@@ -4577,6 +4677,338 @@ addEventListener('DOMContentLoaded', function () {
 });
 `;
 //#endregion
+//#region src/components/ui/toc.tsx
+/**
+* Table of contents with active-anchor tracking and depth-aware line styling.
+* Adapted from the Crux UI / ABUI registry (`@abui/toc`), itself derived from
+* fumadocs' TOC. Two list variants: `TOCItems` (straight line) and
+* `ClerkTOCItems` (line that follows the heading hierarchy).
+*/
+const ActiveAnchorContext = createContext([]);
+const ScrollContext = createContext({ current: null });
+const TOCContext = createContext([]);
+/** The ids of visible anchors. */
+const useActiveAnchors = () => useContext(ActiveAnchorContext);
+const useTOCItems = () => useContext(TOCContext);
+const mergeRefs = (...refs) => (value) => {
+	for (const ref of refs) if (typeof ref === "function") ref(value);
+	else if (ref !== null && ref !== void 0) ref.current = value;
+};
+/** Track which of the `watch` heading ids are on screen. */
+const useAnchorObserver = (watch, single) => {
+	const observerRef = useRef(null);
+	const visibleRef = useRef(/* @__PURE__ */ new Set());
+	const [activeAnchor, setActiveAnchor] = useState([]);
+	const onChange = useCallback((entries) => {
+		const visible = visibleRef.current;
+		for (const entry of entries) if (entry.isIntersecting) visible.add(entry.target.id);
+		else visible.delete(entry.target.id);
+		if (visible.size > 0) {
+			const items = watch.filter((item) => visible.has(item));
+			setActiveAnchor(single ? items.slice(0, 1) : items);
+			return;
+		}
+		const viewTop = entries[0]?.rootBounds?.top ?? 0;
+		let fallback;
+		let min = -1;
+		for (const id of watch) {
+			const element = document.getElementById(id);
+			if (element === null) continue;
+			const d = Math.abs(viewTop - element.getBoundingClientRect().top);
+			if (min === -1 || d < min) {
+				fallback = element;
+				min = d;
+			}
+		}
+		setActiveAnchor(fallback === void 0 ? [] : [fallback.id]);
+	}, [watch, single]);
+	useEffect(() => {
+		if (observerRef.current !== null) return;
+		observerRef.current = new IntersectionObserver(onChange, {
+			rootMargin: "0px",
+			threshold: .98
+		});
+		return () => {
+			observerRef.current?.disconnect();
+			observerRef.current = null;
+		};
+	}, [onChange]);
+	useEffect(() => {
+		const observer = observerRef.current;
+		if (observer === null) return;
+		const elements = watch.flatMap((heading) => document.getElementById(heading) ?? []);
+		for (const element of elements) observer.observe(element);
+		return () => {
+			for (const element of elements) observer.unobserve(element);
+		};
+	}, [watch]);
+	return activeAnchor;
+};
+const TOCProvider = ({ toc, single = false, children }) => {
+	const headings = useMemo(() => toc.map((item) => item.url.split("#")[1] ?? ""), [toc]);
+	const activeAnchors = useAnchorObserver(headings, single);
+	return /* @__PURE__ */ jsx(TOCContext.Provider, {
+		value: toc,
+		children: /* @__PURE__ */ jsx(ActiveAnchorContext.Provider, {
+			value: activeAnchors,
+			children
+		})
+	});
+};
+/** Scrollable container; the first active item is kept in view. */
+const TOCScrollArea = ({ ref, className, children, ...props }) => {
+	const viewRef = useRef(null);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("relative ms-px min-h-0 [scrollbar-width:none] overflow-auto [mask-image:linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3 text-sm", className),
+		ref: mergeRefs(viewRef, ref),
+		...props,
+		children: /* @__PURE__ */ jsx(ScrollContext.Provider, {
+			value: viewRef,
+			children
+		})
+	});
+};
+const calcThumb = (container, active) => {
+	if (active.length === 0 || container.clientHeight === 0) return [0, 0];
+	let upper = Number.MAX_VALUE;
+	let lower = 0;
+	for (const item of active) {
+		const element = container.querySelector(`a[href="#${CSS.escape(item)}"]`);
+		if (element === null) continue;
+		const styles = getComputedStyle(element);
+		upper = Math.min(upper, element.offsetTop + Number.parseFloat(styles.paddingTop));
+		lower = Math.max(lower, element.offsetTop + element.clientHeight - Number.parseFloat(styles.paddingBottom));
+	}
+	return [upper, lower - upper];
+};
+const updateThumb = (element, [top, height]) => {
+	element.style.setProperty("--toc-top", `${top}px`);
+	element.style.setProperty("--toc-height", `${height}px`);
+};
+/** Active indicator that slides alongside the visible entries. */
+const TocThumb = ({ containerRef, ...props }) => {
+	const thumbRef = useRef(null);
+	const active = useActiveAnchors();
+	useEffect(() => {
+		const container = containerRef.current;
+		if (container === null) return;
+		const onUpdate = () => {
+			if (thumbRef.current !== null) updateThumb(thumbRef.current, calcThumb(container, active));
+		};
+		const observer = new ResizeObserver(onUpdate);
+		observer.observe(container);
+		onUpdate();
+		return () => {
+			observer.disconnect();
+		};
+	}, [containerRef, active]);
+	return /* @__PURE__ */ jsx("div", {
+		ref: thumbRef,
+		role: "none",
+		...props
+	});
+};
+const TOCItem = ({ ref, onActiveChange, children, ...props }) => {
+	const containerRef = useContext(ScrollContext);
+	const anchorRef = useRef(null);
+	const activeOrder = useActiveAnchors().indexOf(props.href.slice(1));
+	const isActive = activeOrder !== -1;
+	const shouldScroll = activeOrder === 0;
+	useLayoutEffect(() => {
+		const anchor = anchorRef.current;
+		const container = containerRef.current;
+		if (container === null || anchor === null || !shouldScroll || !anchor.isConnected) return;
+		const containerRect = container.getBoundingClientRect();
+		const anchorRect = anchor.getBoundingClientRect();
+		if (!(anchorRect.top < containerRect.top || anchorRect.bottom > containerRect.bottom)) return;
+		const anchorCenter = anchor.offsetTop - container.offsetTop + anchor.offsetHeight / 2;
+		container.scrollTo({
+			behavior: "smooth",
+			top: Math.max(0, anchorCenter - container.clientHeight / 2)
+		});
+	}, [containerRef, shouldScroll]);
+	useEffect(() => {
+		onActiveChange?.(isActive);
+	}, [isActive, onActiveChange]);
+	return /* @__PURE__ */ jsx("a", {
+		"data-active": isActive,
+		ref: mergeRefs(anchorRef, ref),
+		...props,
+		children
+	});
+};
+const EMPTY_CLS = "rounded-lg border bg-card p-3 text-xs text-muted-foreground";
+const ITEM_CLS = "py-1.5 text-sm text-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 hover:text-accent-foreground data-[active=true]:text-primary";
+const SimpleTOCItem = ({ item }) => /* @__PURE__ */ jsx(TOCItem, {
+	className: cn(ITEM_CLS, item.depth <= 2 && "ps-3", item.depth === 3 && "ps-6", item.depth >= 4 && "ps-8"),
+	href: item.url,
+	children: item.title
+});
+/** TOC list with a straight border line. */
+const TOCItems = ({ ref, className, emptyText = "No Headings", ...props }) => {
+	const containerRef = useRef(null);
+	const items = useTOCItems();
+	if (items.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: EMPTY_CLS,
+		children: emptyText
+	});
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TocThumb, {
+		className: "bg-primary absolute top-(--toc-top) h-(--toc-height) w-px transition-all",
+		containerRef
+	}), /* @__PURE__ */ jsx("div", {
+		className: cn("border-foreground/10 flex flex-col border-s", className),
+		ref: mergeRefs(ref, containerRef),
+		...props,
+		children: items.map((item) => /* @__PURE__ */ jsx(SimpleTOCItem, { item }, item.url))
+	})] });
+};
+const getItemOffset = (depth) => {
+	if (depth <= 2) return 14;
+	return depth === 3 ? 26 : 36;
+};
+const getLineOffset = (depth) => depth >= 3 ? 10 : 0;
+/** One vertical segment per entry, shifted right for nested headings. */
+const clerkLine = (container, items) => {
+	let width = 0;
+	let height = 0;
+	const d = [];
+	for (const [i, item] of items.entries()) {
+		const element = container.querySelector(`a[href="${CSS.escape(item.url)}"]`);
+		if (element === null) continue;
+		const styles = getComputedStyle(element);
+		const offset = getLineOffset(item.depth) + 1;
+		const top = element.offsetTop + Number.parseFloat(styles.paddingTop);
+		const bottom = element.offsetTop + element.clientHeight - Number.parseFloat(styles.paddingBottom);
+		width = Math.max(offset, width);
+		height = Math.max(height, bottom);
+		d.push(`${i === 0 ? "M" : "L"}${offset} ${top}`, `L${offset} ${bottom}`);
+	}
+	return {
+		height,
+		path: d.join(" "),
+		width: width + 1
+	};
+};
+const ClerkTOCItemElement = ({ item, upper = item.depth, lower = item.depth }) => {
+	const offset = getLineOffset(item.depth);
+	const upperOffset = getLineOffset(upper);
+	const lowerOffset = getLineOffset(lower);
+	return /* @__PURE__ */ jsxs(TOCItem, {
+		className: cn("relative", ITEM_CLS),
+		href: item.url,
+		style: { paddingInlineStart: getItemOffset(item.depth) },
+		children: [
+			offset === upperOffset ? null : /* @__PURE__ */ jsx("svg", {
+				"aria-hidden": "true",
+				className: "absolute start-0 -top-1.5 size-4 rtl:-scale-x-100",
+				viewBox: "0 0 16 16",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: /* @__PURE__ */ jsx("line", {
+					className: "stroke-foreground/10",
+					strokeWidth: "1",
+					x1: upperOffset,
+					x2: offset,
+					y1: "0",
+					y2: "12"
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: cn("bg-foreground/10 absolute inset-y-0 w-px", offset !== upperOffset && "top-1.5", offset !== lowerOffset && "bottom-1.5"),
+				style: { insetInlineStart: offset }
+			}),
+			item.title
+		]
+	});
+};
+/** TOC list whose line bends to follow the heading hierarchy. */
+const ClerkTOCItems = ({ ref, className, emptyText = "No Headings", ...props }) => {
+	const containerRef = useRef(null);
+	const items = useTOCItems();
+	const [svg, setSvg] = useState();
+	useEffect(() => {
+		const container = containerRef.current;
+		if (container === null) return;
+		const onResize = () => {
+			if (container.clientHeight > 0) setSvg(clerkLine(container, items));
+		};
+		const observer = new ResizeObserver(onResize);
+		onResize();
+		observer.observe(container);
+		return () => {
+			observer.disconnect();
+		};
+	}, [items]);
+	if (items.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: EMPTY_CLS,
+		children: emptyText
+	});
+	const mask = svg && {
+		height: svg.height,
+		maskImage: `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="1" fill="none" /></svg>`)}")`,
+		width: svg.width
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [mask ? /* @__PURE__ */ jsx("div", {
+		className: "absolute start-0 top-0 rtl:-scale-x-100",
+		style: mask,
+		children: /* @__PURE__ */ jsx(TocThumb, {
+			className: "bg-primary mt-(--toc-top) h-(--toc-height) transition-all",
+			containerRef
+		})
+	}) : null, /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col", className),
+		ref: mergeRefs(containerRef, ref),
+		...props,
+		children: items.map((item, i) => /* @__PURE__ */ jsx(ClerkTOCItemElement, {
+			item,
+			lower: items[i + 1]?.depth,
+			upper: items[i - 1]?.depth
+		}, item.url))
+	})] });
+};
+const PageTOC = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("flex flex-col gap-3", className),
+	...props
+});
+const PageTOCItems = ({ variant = "default", ...props }) => /* @__PURE__ */ jsx(TOCScrollArea, { children: variant === "clerk" ? /* @__PURE__ */ jsx(ClerkTOCItems, { ...props }) : /* @__PURE__ */ jsx(TOCItems, { ...props }) });
+//#endregion
+//#region src/ui/page-toc.tsx
+/** `<aside>` holding the sidebar and the JSON island with its headings. */
+const PAGE_TOC_ID = "mdxr-page-toc";
+const PAGE_TOC_DATA_ID = "mdxr-page-toc-data";
+/** Heading levels listed in the sidebar (h2–h3, like `:::toc`). */
+const MIN_DEPTH = 2;
+const MAX_DEPTH = 3;
+/** A single entry isn't worth a sidebar. */
+const MIN_ENTRIES = 2;
+/** The headings the sidebar lists — empty when the page gets no sidebar. */
+const pageTocHeadings = (headings) => {
+	const items = headings.filter((h) => h.depth >= MIN_DEPTH && h.depth <= MAX_DEPTH);
+	return items.length < MIN_ENTRIES ? [] : items;
+};
+/**
+* Page-level "On this page" sidebar built on the Crux UI ToC: a clerk-style
+* outline whose thumb follows the headings currently on screen. Rendered next
+* to `<main>` by `htmlDocument` (not part of the MDX tree) and hydrated by its
+* own root, so it works with or without the document hydration bundle.
+*/
+const PageToc = ({ headings }) => {
+	const toc = useMemo(() => headings.map((h) => ({
+		depth: h.depth,
+		title: h.text,
+		url: `#${h.slug}`
+	})), [headings]);
+	return /* @__PURE__ */ jsx(TOCProvider, {
+		toc,
+		children: /* @__PURE__ */ jsxs(PageTOC, {
+			className: "min-h-0",
+			children: [/* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground m-0 text-xs font-semibold",
+				children: "On this page"
+			}), /* @__PURE__ */ jsx(PageTOCItems, { variant: "clerk" })]
+		})
+	});
+};
+//#endregion
 //#region src/html.ts
 /**
 * JS destined for an inline `<script>` element: neutralize the two byte
@@ -4612,6 +5044,10 @@ const iconSvg = (name) => {
 * `handleDocEvent`); THEME_JS restores the stored choice before paint.
 */
 const THEME_TOGGLE_HTML = `<button type="button" class="mdxr-theme" data-mdxr-theme data-mode="auto" title="Theme: auto" aria-label="Switch theme (current: auto)"><span class="mdxr-theme-i mdxr-theme-i-auto">${iconSvg("sun-moon")}</span><span class="mdxr-theme-i mdxr-theme-i-light">${iconSvg("sun")}</span><span class="mdxr-theme-i mdxr-theme-i-dark">${iconSvg("moon")}</span></button>`;
+/** JSON for an inline `<script type="application/json">` island. */
+const jsonIsland = (data) => JSON.stringify(data).replaceAll("<", String.raw`\u003c`);
+const pageTocHtml = (toc) => toc === void 0 ? "" : `<aside id="${PAGE_TOC_ID}" aria-label="On this page" class="fixed top-20 left-[calc(50%+25.5rem)] hidden max-h-[calc(100vh-7rem)] w-52 flex-col xl:flex print:hidden">${toc.html}</aside>
+<script type="application/json" id="${PAGE_TOC_DATA_ID}">${jsonIsland(toc.headings)}<\/script>`;
 const htmlDocument = (o) => `<!doctype html>
 <html lang="en">
 <head>
@@ -4626,10 +5062,12 @@ ${o.needsKatex === true ? `<link rel="stylesheet" href="${KATEX_CDN_URL}">` : ""
 <body class="bg-white text-neutral-900 antialiased dark:bg-neutral-950 dark:text-neutral-100">
 ${THEME_TOGGLE_HTML}
 <main id="mdxr-root" class="prose prose-neutral dark:prose-invert mx-auto max-w-3xl px-6 py-10">${o.body}</main>
+${pageTocHtml(o.pageToc)}
 <script>${inlineScript(o.clientJs)}<\/script>
 ${o.needsMermaid ? `<script type="module">${inlineScript(MERMAID_JS)}<\/script>` : ""}
 ${o.liveReload === true ? `<script>${inlineScript(LIVE_RELOAD_JS)}<\/script>` : ""}
 ${o.hydrateJs === void 0 ? "" : `<script>${inlineScript(o.hydrateJs)}<\/script>`}
+${o.pageTocJs === void 0 ? "" : `<script>${inlineScript(o.pageTocJs)}<\/script>`}
 </body>
 </html>
 `;
@@ -4883,14 +5321,16 @@ const iconSets = (usedIcons) => ({
 */
 const scanVProps = (stripped, alias) => {
 	const esc = alias.replaceAll(/[$()*+.?[\\\]^{|}]/gu, "\\$&");
-	const access = new RegExp(`\\b${esc}\\s*\\?\\.\\s*(\\w+)|\\b${esc}\\s*\\.\\s*(\\w+)`, "gu");
+	const identifierPart = String.raw`[\p{ID_Continue}$\u200C\u200D]`;
+	const start = `(?<!${identifierPart})${esc}`;
+	const access = new RegExp(`${start}\\s*\\??\\.\\s*(\\w+)`, "gu");
 	const props = /* @__PURE__ */ new Set();
 	for (const use of stripped.matchAll(access)) {
-		const prop = use[1] ?? use[2];
+		const [, prop] = use;
 		if (prop !== void 0) props.add(prop);
 	}
 	const leftover = stripped.replaceAll(access, "");
-	return new RegExp(`\\b${esc}\\b`, "u").test(leftover) ? "all" : props;
+	return new RegExp(`${start}(?!${identifierPart})`, "u").test(leftover) ? "all" : props;
 };
 /**
 * `/* … *\/` and `// …` are legal inside a multiline import clause, and a
@@ -4988,7 +5428,8 @@ const scanMdxrImports = async (importer) => {
 const EXTRA_MODULES = {
 	builtinComponents: path.join(srcDir, "ui/index.js"),
 	defineConfig: path.join(srcDir, "config.js"),
-	mountDocument: path.join(srcDir, "hydrate-runtime.js")
+	mountDocument: path.join(srcDir, "hydrate-runtime.js"),
+	mountPageToc: path.join(srcDir, "page-toc-runtime.js")
 };
 /**
 * The virtual module's `v` export. `export * as v` would materialize the
@@ -5086,6 +5527,7 @@ const buildHydrateScript = async (spec) => {
 	};
 	const mountDocument = bind("mountDocument");
 	const planHeader = spec.header === void 0 ? "undefined" : bind("PlanHeader");
+	const mountPageToc = spec.pageToc === true ? `${bind("mountPageToc")}();` : "";
 	for (const name of spec.usedComponents) {
 		if (!Object.hasOwn(builtinComponents, name)) continue;
 		const exported = name === "pre" ? "Pre" : name;
@@ -5104,6 +5546,7 @@ ${mountDocument}({
   planHeader: ${planHeader},
   userModule: ${spec.componentsPath === void 0 ? "undefined" : "__mdxrUser"},
 });
+${mountPageToc}
 `;
 	const result = await build({
 		absWorkingDir: pkgRoot,
@@ -5605,6 +6048,7 @@ const mdxToHtml = async (source, components, filePath = "document.mdx", opts = {
 		context,
 		fileLinks: Object.fromEntries(fileLinks),
 		frontmatter,
+		headings: compiled.data.mdxrHeadings ?? [],
 		hydrated,
 		renderWithHeader: (header) => {
 			try {
@@ -5624,6 +6068,44 @@ const mdxToHtml = async (source, components, filePath = "document.mdx", opts = {
 	};
 };
 //#endregion
+//#region src/page-toc-js.ts
+let cache;
+const buildPageTocJs = async () => {
+	return (await build({
+		absWorkingDir: pkgRoot,
+		bundle: true,
+		define: { "process.env.NODE_ENV": "\"production\"" },
+		format: "iife",
+		jsx: "automatic",
+		jsxImportSource: "react",
+		logLevel: "silent",
+		minify: true,
+		platform: "browser",
+		stdin: {
+			contents: "import { mountPageToc } from \"./page-toc-runtime.js\"; mountPageToc();",
+			loader: "js",
+			resolveDir: path.join(pkgRoot, "src"),
+			sourcefile: "mdxr-page-toc.js"
+		},
+		target: "es2022",
+		write: false
+	})).outputFiles[0]?.text ?? "";
+};
+/**
+* Standalone bundle that hydrates the sidebar ToC — used only when the
+* document has no hydration bundle of its own (that one mounts the ToC with
+* the React copy it already ships). Memoized: identical for every render.
+*/
+const pageTocJs = async () => {
+	cache ??= buildPageTocJs();
+	try {
+		return await cache;
+	} catch (error) {
+		cache = void 0;
+		throw error;
+	}
+};
+//#endregion
 //#region src/assets/css.ts
 /** Base CSS appended after Tailwind utilities (covers what utilities can't). */
 const BASE_CSS = `
@@ -6131,6 +6613,7 @@ const buildHydrateBundle = async (args) => {
 			fileLinks: args.fileLinks,
 			header: args.headerProps,
 			now: args.now,
+			pageToc: args.pageToc,
 			usedComponents: args.usedComponents,
 			usedIcons: args.usedIcons
 		});
@@ -6167,6 +6650,23 @@ const frontmatterHeader = (fm, body) => {
 		version: fm("version")
 	};
 };
+/** Sidebar ToC entries — frontmatter `toc: false` opts the page out. */
+const sidebarHeadings = (frontmatter, headings) => frontmatter.toc === false || frontmatter.toc === "false" ? [] : pageTocHeadings(headings);
+/**
+* SSR markup for the sidebar ToC plus the script that hydrates it. The
+* document bundle mounts the ToC itself when there is one; otherwise the
+* standalone bundle does. Without JS the sidebar stays plain anchor links.
+*/
+const renderPageToc = async (headings, interactive, hasDocumentBundle) => {
+	if (headings.length === 0) return {};
+	return {
+		pageToc: {
+			headings,
+			html: (interactive ? renderToString : renderToStaticMarkup)(createElement(PageToc, { headings }))
+		},
+		pageTocJs: interactive && !hasDocumentBundle ? await pageTocJs() : void 0
+	};
+};
 /** Render MDX source text to a standalone HTML document. */
 const render = async (source, opts = {}) => {
 	const dir = path.resolve(opts.dir ?? process.cwd());
@@ -6179,7 +6679,7 @@ const render = async (source, opts = {}) => {
 		...builtinComponents,
 		...user.components
 	};
-	const { body, code, fileLinks, frontmatter, renderedAt, renderWithHeader, usedComponents, usedIcons } = await mdxToHtml(source, components, filePath, {
+	const { body, code, fileLinks, frontmatter, headings, renderedAt, renderWithHeader, usedComponents, usedIcons } = await mdxToHtml(source, components, filePath, {
 		editor: config.editor,
 		hydrate: opts.hydrate
 	});
@@ -6228,6 +6728,7 @@ const render = async (source, opts = {}) => {
 	];
 	const { css, dependencies } = await buildCss(sources, config.themePath);
 	opts.onDependencies?.(dependencies);
+	const tocHeadings = sidebarHeadings(frontmatter, headings);
 	const [js, hydrateJs] = await Promise.all([clientJs(), buildHydrateBundle({
 		code,
 		config,
@@ -6235,9 +6736,11 @@ const render = async (source, opts = {}) => {
 		headerProps,
 		hydrate: opts.hydrate,
 		now: renderedAt,
+		pageToc: tocHeadings.length > 0,
 		usedComponents,
 		usedIcons: docIcons
 	})]);
+	const { pageToc, pageTocJs: tocJs } = await renderPageToc(tocHeadings, opts.hydrate ?? true, hydrateJs !== void 0);
 	return htmlDocument({
 		body: docBody,
 		clientJs: js,
@@ -6246,6 +6749,8 @@ const render = async (source, opts = {}) => {
 		liveReload: opts.liveReload,
 		needsKatex: /class="[^"]*katex/u.test(docBody),
 		needsMermaid: /class="[^"]*mermaid/u.test(docBody),
+		pageToc,
+		pageTocJs: tocJs,
 		title
 	});
 };