comark-ui 0.7.1 → 0.7.2

package/dist/client-Bjd6VcGQ.mjs

@@ -0,0 +1,241 @@
+import { theme } from "comark-zoom/theme";
+//#region src/script.ts
+/**
+* Starts the Copy image and Copy source buttons of every `.cmm` Mermaid diagram on the page and returns a function that
+* stops them. Every caller shares one set of listeners, which stop with the last caller. The function is
+* self-contained: the HTML renderer inlines its source as a script, so it must not use anything from outside its body.
+*/
+function start() {
+	const running = window.__comarkMermaid;
+	if (running) {
+		running.users++;
+		return running.stop;
+	}
+	const listeners = new AbortController();
+	const signal = listeners.signal;
+	document.documentElement.setAttribute("data-mermaid-ready", "");
+	const links = /* @__PURE__ */ new Set();
+	const PROPERTIES = [
+		"fill",
+		"fill-opacity",
+		"stroke",
+		"stroke-opacity",
+		"stroke-width",
+		"stroke-dasharray",
+		"stroke-linecap",
+		"stroke-linejoin",
+		"opacity",
+		"color",
+		"rx",
+		"ry",
+		"font-family",
+		"font-size",
+		"font-weight",
+		"font-style",
+		"letter-spacing",
+		"text-anchor",
+		"dominant-baseline",
+		"paint-order"
+	];
+	function background(from) {
+		const probe = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+		for (let at = from; at && probe; at = at.parentElement) {
+			const color = getComputedStyle(at).backgroundColor;
+			probe.clearRect(0, 0, 1, 1);
+			probe.fillStyle = color;
+			probe.fillRect(0, 0, 1, 1);
+			if (probe.getImageData(0, 0, 1, 1).data[3] === 255) return color;
+		}
+		return "#fff";
+	}
+	function png(root) {
+		const svg = root.querySelector(".pele-diagram>svg");
+		if (!svg) return Promise.reject(/* @__PURE__ */ new Error("no diagram"));
+		const width = Number(svg.getAttribute("width")) || svg.viewBox.baseVal.width;
+		const height = Number(svg.getAttribute("height")) || svg.viewBox.baseVal.height;
+		if (!(width > 0 && height > 0)) return Promise.reject(/* @__PURE__ */ new Error("no size"));
+		const copy = svg.cloneNode(true);
+		if (!(copy instanceof SVGSVGElement)) return Promise.reject(/* @__PURE__ */ new Error("no diagram"));
+		const from = [svg, ...svg.querySelectorAll("*")];
+		const to = [copy, ...copy.querySelectorAll("*")];
+		from.forEach((node, index) => {
+			const into = to[index];
+			if (!(into instanceof SVGElement)) return;
+			const style = getComputedStyle(node);
+			for (const property of PROPERTIES) into.style.setProperty(property, style.getPropertyValue(property));
+		});
+		copy.setAttribute("viewBox", `0 0 ${width} ${height}`);
+		copy.setAttribute("width", String(width));
+		copy.setAttribute("height", String(height));
+		copy.style.maxWidth = "none";
+		copy.style.width = `${width}px`;
+		copy.style.height = `${height}px`;
+		const scale = Math.min(2, 4096 / width, 4096 / height);
+		const canvas = document.createElement("canvas");
+		canvas.width = Math.max(1, Math.round(width * scale));
+		canvas.height = Math.max(1, Math.round(height * scale));
+		const fill = background(svg.parentElement ?? root);
+		const image = new Image();
+		return new Promise((resolve, reject) => {
+			image.onerror = () => reject(/* @__PURE__ */ new Error("not drawn"));
+			image.onload = () => {
+				const context = canvas.getContext("2d");
+				if (!context) return reject(/* @__PURE__ */ new Error("no canvas"));
+				context.fillStyle = fill;
+				context.fillRect(0, 0, canvas.width, canvas.height);
+				context.drawImage(image, 0, 0, canvas.width, canvas.height);
+				canvas.toBlob((blob) => blob ? resolve(blob) : reject(/* @__PURE__ */ new Error("no image")), "image/png");
+			};
+			image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(new XMLSerializer().serializeToString(copy))}`;
+		});
+	}
+	const part = (root, selector) => root.querySelector(`:scope>.cmm-bar>${selector}`);
+	function say(root, button, message, state) {
+		const status = part(root, ".cmm-status");
+		if (!status) return;
+		button.setAttribute("data-state", state);
+		status.textContent = message;
+		setTimeout(() => {
+			if (status.textContent !== message) return;
+			button.removeAttribute("data-state");
+			status.textContent = "";
+		}, state === "done" ? 1500 : 6e3);
+	}
+	function copyImage(root, button) {
+		const open = part(root, ".cmm-open");
+		if (open) open.hidden = true;
+		const image = png(root);
+		image.catch(() => {});
+		const clipboard = navigator.clipboard;
+		(clipboard && "ClipboardItem" in window ? clipboard.write([new ClipboardItem({ "image/png": image })]) : Promise.reject(/* @__PURE__ */ new Error("no clipboard"))).then(() => say(root, button, "Image copied", "done"), () => image.then((blob) => {
+			if (!open) return;
+			if (open.href) {
+				URL.revokeObjectURL(open.href);
+				links.delete(open.href);
+			}
+			open.href = URL.createObjectURL(blob);
+			links.add(open.href);
+			open.hidden = false;
+			say(root, button, "Couldn't copy the image. Open the PNG to save it.", "failed");
+		}, () => say(root, button, "Couldn't draw the image. Copy the source instead.", "failed")));
+	}
+	function copySource(root, button) {
+		const source = (root.getAttribute("data-source") ?? "").replace(/\n$/, "");
+		const longest = Math.max(2, ...(source.match(/`+/g) ?? []).map((run) => run.length));
+		const fence = "`".repeat(longest + 1);
+		const markdown = `${fence}mermaid\n${source}\n${fence}`;
+		const shown = root.querySelector(":scope>.cmm-markdown");
+		const failed = () => {
+			const pre = shown ?? document.createElement("pre");
+			pre.className = "cmm-markdown";
+			pre.textContent = markdown;
+			if (!shown) root.append(pre);
+			const range = document.createRange();
+			range.selectNodeContents(pre);
+			const selection = getSelection();
+			selection?.removeAllRanges();
+			selection?.addRange(range);
+			say(root, button, "Couldn't copy, so the source is selected. Press Ctrl+C or ⌘C.", "failed");
+		};
+		const clipboard = navigator.clipboard;
+		if (!clipboard) return failed();
+		clipboard.writeText(markdown).then(() => {
+			shown?.remove();
+			say(root, button, "Source copied", "done");
+		}, failed);
+	}
+	document.addEventListener("click", (event) => {
+		const button = event.target instanceof Element ? event.target.closest(".cmm>.cmm-bar>button") : null;
+		const root = button?.parentElement?.parentElement;
+		if (!button || !root) return;
+		if (button.classList.contains("cmm-image")) copyImage(root, button);
+		else if (button.classList.contains("cmm-source")) copySource(root, button);
+	}, { signal });
+	const state = {
+		users: 1,
+		stop: () => {
+			if (--state.users > 0) return;
+			listeners.abort();
+			for (const link of links) URL.revokeObjectURL(link);
+			document.documentElement.removeAttribute("data-mermaid-ready");
+			window.__comarkMermaid = void 0;
+		}
+	};
+	window.__comarkMermaid = state;
+	return state.stop;
+}
+//#endregion
+//#region src/client.ts
+/**
+* comark-pele's diagrams on the shared `--comark-*` tokens, on a card like comark-diagrams'. Pele paints with its
+* `--pele-*` variables, so setting them on the wrapper themes every diagram, light and dark, without drawing it
+* again. The rules sit in the `comark` layer, so host `--pele-*` values are preserved and win over these fallbacks.
+*/
+const mermaidCss = `@layer comark{${[
+	theme(".cmm,.pele-diagram"),
+	theme(":root"),
+	`:where(:root){--pele-bg:var(--_comark-background);--pele-fg:var(--_comark-foreground);--pele-muted:var(--_comark-muted);--pele-line:var(--_comark-muted);--pele-surface:var(--_comark-accent);--pele-surface-alt:color-mix(in srgb,var(--_comark-accent),var(--_comark-foreground) 6%);--pele-border:var(--_comark-border);--pele-accent:var(--ui-primary,var(--primary,var(--_comark-foreground)));--pele-critical:var(--ui-error,var(--destructive,#dc2626));--pele-error:var(--ui-error,var(--destructive,#dc2626));--pele-font:var(--_comark-font);--pele-radius:calc(var(--_comark-radius) - 4px);--pele-series-1:var(--comark-chart-1,var(--ui-chart-1,var(--chart-1,#3b82f6)));--pele-series-2:var(--comark-chart-2,var(--ui-chart-2,var(--chart-2,#f97316)));--pele-series-3:var(--comark-chart-3,var(--ui-chart-3,var(--chart-3,#10b981)));--pele-series-4:var(--comark-chart-4,var(--ui-chart-4,var(--chart-4,#a855f7)));--pele-series-5:var(--comark-chart-5,var(--ui-chart-5,var(--chart-5,#f43f5e)));--pele-series-6:var(--comark-chart-6,var(--ui-chart-6,var(--chart-6,#eab308)));--pele-series-7:var(--comark-chart-7,var(--ui-chart-7,var(--chart-7,#06b6d4)));--pele-series-8:var(--comark-chart-8,var(--ui-chart-8,var(--chart-8,#ec4899)))}`,
+	".pele-diagram{box-sizing:border-box;margin-block:1.5rem;padding:1rem;overflow-x:auto;border:1px solid var(--_comark-border);border-radius:var(--_comark-radius);background:var(--_comark-background);color:var(--_comark-foreground);text-align:center}",
+	".pele-diagram>svg{min-width:min(28rem,var(--cmm-svg,28rem))}",
+	".pele-source{margin:0;color:var(--_comark-muted);text-align:left}",
+	".cmm{--comark-wide-width:calc(var(--cmm-svg) + 2rem + 2px);--pele-zoom-top:auto;--pele-zoom-bottom:.5rem;position:relative;margin-block:1.5rem}",
+	".cmm>.pele-diagram{margin-block:0}",
+	".cmm-bar{position:absolute;top:.375rem;right:.375rem;z-index:1;display:flex;align-items:center;gap:.125rem;padding:.125rem;border-radius:calc(var(--_comark-radius) - 2px);background:var(--_comark-background);opacity:0;transition:opacity .15s}",
+	"html:not([data-mermaid-ready]) .cmm-bar{display:none}",
+	".cmm:is(:hover,:focus-within)>.cmm-bar,.cmm-bar:has(.cmm-status:not(:empty),.cmm-open:not([hidden])){opacity:1}",
+	"@media (hover:none){.cmm-bar{opacity:1}}",
+	".cmm:has(>.pele-diagram[data-error]) .cmm-image{display:none}",
+	".cmm-bar>button{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin:0;padding:0;border:1px solid transparent;border-radius:calc(var(--_comark-radius) - 2px);background:transparent;color:var(--_comark-muted);position:relative;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,color .15s ease}",
+	"@media (hover:hover){.cmm-bar>button:hover{background:var(--_comark-accent);color:var(--_comark-foreground)}}",
+	"@media (prefers-reduced-motion:no-preference){.cmm-bar>button{transition:background-color .15s ease,color .15s ease,scale .15s ease-out}.cmm-bar>button:active{scale:.96}}",
+	".cmm-bar>button:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--_comark-ring) 50%,transparent)}",
+	".cmm-bar svg{width:.75rem;height:.75rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}",
+	".cmm-done,.cmm-bar>[data-state=done] .cmm-idle{display:none}",
+	".cmm-bar>[data-state=done] .cmm-done{display:block}",
+	".cmm-open{padding:0 .375rem;color:var(--_comark-foreground);font:500 .75rem/1.5rem var(--_comark-font);text-decoration:underline;text-underline-offset:2px}",
+	".cmm-open[hidden]{display:none}",
+	".cmm-status{position:absolute;top:calc(100% + .25rem);right:0;width:max-content;max-width:18rem;padding:.25rem .5rem;border-radius:calc(var(--_comark-radius) - 4px);background:var(--_comark-foreground);color:var(--_comark-background);font:.75rem/1.25rem var(--_comark-font);text-align:left;pointer-events:none}",
+	".cmm-status:empty{display:none}",
+	".cmm-markdown{margin:.5rem 0 0;padding:.75rem 1rem;overflow-x:auto;border:1px solid var(--_comark-border);border-radius:var(--_comark-radius);background:var(--_comark-accent);color:var(--_comark-foreground);font:.8125rem/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre}",
+	".cz-item>.pele-diagram>svg{min-width:0}",
+	"@media print{.pele-diagram{break-inside:avoid}.cmm-bar{display:none}}"
+].join("")}}`;
+/** Sizes Mermaid cards after Pele draws them in Vue, React, and Svelte, and adds the styles to the page once. */
+function addMermaidStyles() {
+	for (const card of document.querySelectorAll(".pele-diagram")) {
+		const svg = card.querySelector(":scope > svg");
+		const width = Number(svg?.getAttribute("width"));
+		const block = card.parentElement?.classList.contains("cmm") ? card.parentElement : card;
+		if (Number.isFinite(width) && width > 0 && !card.querySelector(":scope > .pele-error")) {
+			block.dataset.wide = "";
+			block.style.setProperty("--cmm-svg", `${Math.ceil(width)}px`);
+		} else {
+			delete block.dataset.wide;
+			block.style.removeProperty("--cmm-svg");
+		}
+	}
+	if (document.querySelector("style[data-comark-mermaid]")) return;
+	const style = document.createElement("style");
+	style.dataset.comarkMermaid = "";
+	style.textContent = mermaidCss;
+	document.head.append(style);
+}
+const icon = (name, path) => `<svg class="cmm-${name}" viewBox="0 0 24 24" aria-hidden="true">${path}</svg>`;
+const done = icon("done", "<path d=\"M20 6 9 17l-5-5\"/>");
+/**
+* The inside of a diagram's bar, the same in every renderer: Copy image, Copy source, the link to the PNG for when the
+* clipboard refuses it, and the status line that says whether the copy worked.
+*/
+function mermaidBar() {
+	return `<button type="button" class="cmm-image" aria-label="Copy image" title="Copy image">` + icon("idle", "<rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><circle cx=\"9\" cy=\"9\" r=\"2\"/><path d=\"m21 15-5-5L5 21\"/>") + `${done}</button><button type="button" class="cmm-source" aria-label="Copy source" title="Copy source">` + icon("idle", "<path d=\"m16 18 6-6-6-6\"/><path d=\"m8 6-6 6 6 6\"/>") + `${done}</button><a class="cmm-open" target="_blank" rel="noopener" hidden>Open PNG</a><span class="cmm-status" role="status"></span>`;
+}
+/**
+* Adds the Mermaid styles and starts the buttons of every diagram on the page, and returns a function that stops them.
+* The Vue, React, and Svelte diagrams call it on mount and stop it on unmount.
+*/
+function startMermaid() {
+	addMermaidStyles();
+	return start();
+}
+//#endregion
+export { start as a, startMermaid as i, mermaidBar as n, mermaidCss as r, addMermaidStyles as t };

package/dist/client.d.mts

@@ -6,7 +6,17 @@ import { t as typesetCss } from "./typeset-css-DdOGL7WF.mjs";
  * again. The rules sit in the `comark` layer, so host `--pele-*` values are preserved and win over these fallbacks.
  */
 export declare const mermaidCss: string;
-/** Adds the Mermaid styles to the page once. The Vue, React, and Svelte diagrams call it when Pele draws them. */
+/** Sizes Mermaid cards after Pele draws them in Vue, React, and Svelte, and adds the styles to the page once. */
 export declare function addMermaidStyles(): void;
+/**
+ * The inside of a diagram's bar, the same in every renderer: Copy image, Copy source, the link to the PNG for when the
+ * clipboard refuses it, and the status line that says whether the copy worked.
+ */
+export declare function mermaidBar(): string;
+/**
+ * Adds the Mermaid styles and starts the buttons of every diagram on the page, and returns a function that stops them.
+ * The Vue, React, and Svelte diagrams call it on mount and stop it on unmount.
+ */
+export declare function startMermaid(): () => void;
 //#endregion
 export { typesetCss };

package/dist/client.mjs

@@ -1,26 +1,3 @@
-import { t as typesetCss } from "./typeset-css-DPB0S1bV.mjs";
-import { theme } from "comark-zoom/theme";
-//#region src/client.ts
-/**
-* comark-pele's diagrams on the shared `--comark-*` tokens, on a card like comark-diagrams'. Pele paints with its
-* `--pele-*` variables, so setting them on the wrapper themes every diagram, light and dark, without drawing it
-* again. The rules sit in the `comark` layer, so host `--pele-*` values are preserved and win over these fallbacks.
-*/
-const mermaidCss = `@layer comark{${[
-	theme(".pele-diagram"),
-	theme(":root"),
-	`:where(:root){--pele-bg:var(--_comark-background);--pele-fg:var(--_comark-foreground);--pele-muted:var(--_comark-muted);--pele-line:var(--_comark-muted);--pele-surface:var(--_comark-accent);--pele-surface-alt:color-mix(in srgb,var(--_comark-accent),var(--_comark-foreground) 6%);--pele-border:var(--_comark-border);--pele-accent:var(--ui-primary,var(--primary,var(--_comark-foreground)));--pele-critical:var(--ui-error,var(--destructive,#dc2626));--pele-error:var(--ui-error,var(--destructive,#dc2626));--pele-font:var(--_comark-font);--pele-radius:calc(var(--_comark-radius) - 4px);--pele-series-1:var(--comark-chart-1,var(--ui-chart-1,var(--chart-1,#3b82f6)));--pele-series-2:var(--comark-chart-2,var(--ui-chart-2,var(--chart-2,#f97316)));--pele-series-3:var(--comark-chart-3,var(--ui-chart-3,var(--chart-3,#10b981)));--pele-series-4:var(--comark-chart-4,var(--ui-chart-4,var(--chart-4,#a855f7)));--pele-series-5:var(--comark-chart-5,var(--ui-chart-5,var(--chart-5,#f43f5e)));--pele-series-6:var(--comark-chart-6,var(--ui-chart-6,var(--chart-6,#eab308)));--pele-series-7:var(--comark-chart-7,var(--ui-chart-7,var(--chart-7,#06b6d4)));--pele-series-8:var(--comark-chart-8,var(--ui-chart-8,var(--chart-8,#ec4899)))}`,
-	".pele-diagram{margin:1.5rem 0;padding:1rem;overflow-x:auto;border:1px solid var(--_comark-border);border-radius:var(--_comark-radius);background:var(--_comark-background);color:var(--_comark-foreground);text-align:center}",
-	".pele-source{margin:0;color:var(--_comark-muted);text-align:left}",
-	"@media print{.pele-diagram{break-inside:avoid}}"
-].join("")}}`;
-/** Adds the Mermaid styles to the page once. The Vue, React, and Svelte diagrams call it when Pele draws them. */
-function addMermaidStyles() {
-	if (document.querySelector("style[data-comark-mermaid]")) return;
-	const style = document.createElement("style");
-	style.dataset.comarkMermaid = "";
-	style.textContent = mermaidCss;
-	document.head.append(style);
-}
-//#endregion
-export { addMermaidStyles, mermaidCss, typesetCss };
+import { t as typesetCss } from "./typeset-css-5aJ7cSmh.mjs";
+import { i as startMermaid, n as mermaidBar, r as mermaidCss, t as addMermaidStyles } from "./client-Bjd6VcGQ.mjs";
+export { addMermaidStyles, mermaidBar, mermaidCss, startMermaid, typesetCss };

package/dist/html.d.mts

@@ -1,6 +1,12 @@
-import { a as criticCss, n as Preset, r as PresetOptions } from "./index-B0YvApci.mjs";
+import { a as criticCss, n as Preset, r as PresetOptions } from "./index-jkwx6SyG.mjs";
 import { NodeHandler } from "comark";
 //#region src/html.d.ts
+/**
+ * The text of the inline `<script>` that runs the Mermaid diagrams' Copy image and Copy source buttons. It's the same on
+ * every render and changes only between versions, so a page with a strict Content Security Policy can allow it by its
+ * hash without rendering a document first.
+ */
+export declare const mermaidScript: string;
 /** Every plugin for `@comark/html`, with the `components` to render them. */
 declare const _default: (options?: PresetOptions) => Preset<NodeHandler>;
 //#endregion

package/dist/html.mjs

@@ -1,6 +1,7 @@
-import { t as typesetCss } from "./typeset-css-DPB0S1bV.mjs";
+import { t as typesetCss } from "./typeset-css-5aJ7cSmh.mjs";
 import { n as preset, t as criticCss } from "./src-DROB05U6.mjs";
-import { mermaidCss } from "./client.mjs";
+import { a as start, n as mermaidBar, r as mermaidCss } from "./client-Bjd6VcGQ.mjs";
+import { escapeHtml } from "comark/utils";
 import * as annotate from "comark-annotate/html";
 import * as badge from "comark-badge/html";
 import * as cards from "comark-cards/html";
@@ -38,14 +39,31 @@ import * as tests from "comark-tests/html";
 import * as zoom from "comark-zoom/html";
 //#region src/html.ts
 const styled = /* @__PURE__ */ new WeakSet();
-const mermaid = {
+/**
+* The text of the inline `<script>` that runs the Mermaid diagrams' Copy image and Copy source buttons. It's the same on
+* every render and changes only between versions, so a page with a strict Content Security Policy can allow it by its
+* hash without rendering a document first.
+*/
+const mermaidScript = `(${start.toString()})()`;
+const attr = (value) => escapeHtml(value, { "\"": "&quot;" });
+/**
+* Wraps Pele's card in `.cmm` with the bar of buttons and the source they copy. The wrapper is a wide block with the
+* diagram's own width, so a page that gives wide blocks room shows a long flowchart at its size rather than shrinking
+* its labels to fit the column. A drawn diagram zooms with comark-zoom unless the preset turns zoom off.
+*/
+const mermaid = (zooms) => ({
 	default: pele,
 	components: { pele: ((node, state) => {
-		const styles = styled.has(state.context) ? "" : `<style data-comark-mermaid>${mermaidCss}</style>`;
+		const first = !styled.has(state.context);
 		styled.add(state.context);
-		return styles + Pele(node);
+		const card = Pele(node);
+		const source = node[1].content;
+		const width = /^<div[^>]*><svg[^>]* width="([\d.]+)"/.exec(card)?.[1];
+		const wide = width ? ` data-wide style="--cmm-svg:${Math.ceil(Number(width))}px"` : "";
+		const zoomed = zooms && width ? card.replace(/^<div/, "<div data-zoom tabindex=\"0\"") : card;
+		return (first ? `<style data-comark-mermaid>${mermaidCss}</style>` : "") + `<div class="cmm"${wide} data-source="${attr(source)}">${zoomed}<div class="cmm-bar">${mermaidBar()}</div>${first ? `<script>${mermaidScript}<\/script>` : ""}${zooms && width ? zoom.runtime(state) : ""}</div>`;
 	}) }
-};
+});
 const typeset = () => `<style data-comark-typeset>${typesetCss}</style>`;
 /** Every plugin for `@comark/html`, with the `components` to render them. */
 var html_default = (options) => preset({
@@ -72,7 +90,7 @@ var html_default = (options) => preset({
 	mark,
 	math,
 	media,
-	mermaid,
+	mermaid: mermaid(options?.zoom !== false),
 	metrics,
 	outline,
 	properties,
@@ -87,4 +105,4 @@ var html_default = (options) => preset({
 	zoom
 }, options);
 //#endregion
-export { criticCss, html_default as default };
+export { criticCss, html_default as default, mermaidScript };

package/dist/{index-B0YvApci.d.mts → index-jkwx6SyG.d.mts}

@@ -19,6 +19,7 @@ import { CalloutsOptions, ReferencesOptions } from "comark-github";
 import { AnchorsOptions, ExternalOptions } from "comark-links";
 import { MathOptions } from "comark-mathml";
 import { MediaOptions } from "comark-media";
+import { OutlineOptions } from "comark-outline";
 import { PeleConfig } from "comark-pele";
 import { PropertiesOptions } from "comark-properties";
 import { QuizOptions } from "comark-quiz";
@@ -94,7 +95,8 @@ type PresetOptions = {
   steps?: boolean;
   readingTime?: ReadingTimeOptions | boolean;
   tabs?: TabsOptions | boolean;
-  outline?: boolean;
+  /** `{ rail: true }` adds a side outline beside the text of every document with two headings or more. Off by default. */
+  outline?: OutlineOptions | boolean;
   xref?: XrefOptions | boolean;
   /** Reads no JUnit reports unless you pass `{ root }` or `{ read }`; inline reports render either way. */
   tests?: TestsOptions | boolean;
@@ -155,7 +157,7 @@ type Renderer<C> = {
   sources: Part<C>;
   steps: Part<C>;
   tabs: Part<C, TabsOptions>;
-  outline: Part<C>;
+  outline: Part<C, OutlineOptions>;
   tests: Part<C, TestsOptions>;
   zoom: Part<C, ZoomOptions>;
   code: Part<C, CodeOptions>;

package/dist/index.d.mts

@@ -1,3 +1,3 @@
 import { t as typesetCss } from "./typeset-css-DdOGL7WF.mjs";
-import { a as criticCss, c as typeset, i as Renderer, n as Preset, o as preset, r as PresetOptions, s as TYPESET_TAG, t as AnyPlugin } from "./index-B0YvApci.mjs";
+import { a as criticCss, c as typeset, i as Renderer, n as Preset, o as preset, r as PresetOptions, s as TYPESET_TAG, t as AnyPlugin } from "./index-jkwx6SyG.mjs";
 export { AnyPlugin, Preset, PresetOptions, Renderer, TYPESET_TAG, criticCss, preset, typeset, typesetCss };

package/dist/index.mjs

@@ -1,3 +1,3 @@
-import { t as typesetCss } from "./typeset-css-DPB0S1bV.mjs";
+import { t as typesetCss } from "./typeset-css-5aJ7cSmh.mjs";
 import { i as typeset, n as preset, r as TYPESET_TAG, t as criticCss } from "./src-DROB05U6.mjs";
 export { TYPESET_TAG, criticCss, preset, typeset, typesetCss };

package/dist/react.d.mts

@@ -1,4 +1,4 @@
-import { a as criticCss, n as Preset, r as PresetOptions } from "./index-B0YvApci.mjs";
+import { a as criticCss, n as Preset, r as PresetOptions } from "./index-jkwx6SyG.mjs";
 import { ComponentType } from "react";
 //#region src/react.d.ts
 type AnyComponent = ComponentType<any>;

package/dist/react.mjs

@@ -1,7 +1,7 @@
-import { t as typesetCss } from "./typeset-css-DPB0S1bV.mjs";
+import { t as typesetCss } from "./typeset-css-5aJ7cSmh.mjs";
 import { n as preset, t as criticCss } from "./src-DROB05U6.mjs";
-import { addMermaidStyles } from "./client.mjs";
-import { createElement } from "react";
+import { i as startMermaid, n as mermaidBar, t as addMermaidStyles } from "./client-Bjd6VcGQ.mjs";
+import { createElement, useEffect } from "react";
 import * as badge from "comark-badge/react";
 import * as cards from "comark-cards/react";
 import * as carousel from "comark-carousel/react";
@@ -35,9 +35,23 @@ import * as tabs from "comark-tabs/react";
 import * as tests from "comark-tests/react";
 import * as zoom from "comark-zoom/react";
 //#region src/react.ts
+const Pele = createPeleComponent({
+	onRender: addMermaidStyles,
+	onError: addMermaidStyles
+});
+function Mermaid(props) {
+	useEffect(() => startMermaid(), []);
+	return createElement("div", {
+		className: "cmm",
+		"data-source": props.content
+	}, createElement(Pele, props), createElement("div", {
+		className: "cmm-bar",
+		dangerouslySetInnerHTML: { __html: mermaidBar() }
+	}));
+}
 const mermaid = {
 	default: pele,
-	components: { pele: createPeleComponent({ onRender: addMermaidStyles }) }
+	components: { pele: Mermaid }
 };
 const typeset = () => createElement("style", {
 	"data-comark-typeset": "",

package/dist/skills/comark-ui/SKILL.md

@@ -55,7 +55,7 @@ Read the reference for each block you use before you write it. Mix the blocks fr
 | A change on screen, before and after | `::compare` | [annotate](references/annotate.md) |
 | A command's output, such as a test run or a build, as colored text | `::cast` | [cast](references/cast.md) |
 | Numbers, such as sizes, timings, before/after metrics, a trend, or a timeline | `::chart` | [charts](references/charts.md) |
-| A flow, a sequence, an architecture, or a schema as a diagram | a `d2`, `dot`, `plantuml`, `dbml`, `goat`, or `svgbob` fence | [diagrams](references/diagrams.md) |
+| A flow, a sequence, an architecture, or a schema as a diagram | a `mermaid`, `d2`, `dot`, `plantuml`, `dbml`, `goat`, or `svgbob` fence | [diagrams](references/diagrams.md) |
 | Links and `@mentions` with the site's favicon or the person's avatar | links, `@user`, `:chip` | [chips](references/chips.md) |
 | Colors, such as design tokens before and after, or a palette | a color in inline code, `::palette` | [colors](references/colors.md) |
 | A suggested change to one file, before and after | `::diff` | [diff](references/diff.md) |

package/dist/skills/comark-ui/references/diagrams.md

@@ -21,10 +21,16 @@ queue -> map: pigeon pin
 | `goat` or `svgbob` | ASCII art, as lines and arrows |
 
 - The title in brackets after the language goes under the diagram and names it for screen readers. Give every diagram one.
-- Every other fence stays code, `mermaid` included, so draw flows in `d2` or `dot`.
+- Every other fence stays code, except `mermaid`, which comark-ui draws with comark-pele (see Mermaid below).
 - A diagram Kroki can't draw stays code, and `meta.issues` quotes the tool's error. So does one drawn while the server can't be reached; the next parse tries again.
 - The plugin drops anything that could run from the SVG: scripts, event handlers, embedded HTML, and animations. Write labels as plain text. A D2 Markdown label (`|md … |`) is embedded HTML, so it comes out empty, and nothing reports it.
 
+## Mermaid
+
+Through comark-ui, a ` ```mermaid ` fence is drawn as SVG by comark-pele while rendering, with no network, and themed with the other blocks. A diagram Pele can't draw shows its source, and nothing goes in `meta.issues`, so check it in a render.
+
+With `comark-ui/html`, a click, `Enter`, or `Space` zooms the diagram, and its buttons copy it as a PNG on the page's background or as its ` ```mermaid ` fence. The Vue, React, and Svelte entries draw the same buttons, and Pele zooms the diagram in place there. `zoom: false` in `comarkUi()` turns the zoom off; the buttons stay. A host with a strict Content Security Policy allows the buttons' script by the hash of `mermaidScript` from `comark-ui/html`, and Copy image needs `img-src data:`.
+
 ## Check each diagram
 
 Send an internal architecture or a schema with sensitive names only to the host's own Kroki server. With the default `server`, each diagram's source goes to `https://kroki.io`, a public service.

package/dist/skills/comark-ui/references/outline.md

@@ -30,7 +30,15 @@ The redesign moves the filters into one row and adds an empty state.
 - Every `::toc` lists the whole document, wherever it sits. With no heading from h2 to `depth`, it renders nothing, and the plugin reports it.
 - Write `::toc` where other tools use `[[toc]]`, which Comark reads as a span.
 
+## Side outline
+
+The `rail` option adds an "On this page" outline beside the text of every document with two headings or more to list, and marks the section being read. It isn't Markdown: a document can't turn it on, and `::toc` still works beside it. Write short h2 and h3 headings, since they become its links.
+
+- Options: `rail: true`, or `{ title, depth }` (default "On this page" and 3).
+- The page sets `--comark-inset-end` on `:root` for a panel that covers its right edge. While the outline keeps a column beside wide blocks, it sets `data-comark-rail` and `--comark-rail-width` on `<html>`, and the page shrinks `--comark-wide-end` by it, so wide blocks move toward the room before the text.
+- It hides where it doesn't fit, and rather than narrow a diagram.
+
 ## Register
 
-- In `comark-ui`: on in every entry, with no options.
+- In `comark-ui`: on in every entry; `outline: { rail: true }` adds the side outline.
 - Alone: `pnpm add comark @comark/html comark-outline`, then `createHtmlRenderer({ plugins: [outline()], components })` with both from `comark-outline/html`. `comark-outline/vue`, `/react`, and `/svelte` render it too. It reads the headings itself, so it works in any plugin order and without Comark's toc plugin, which only fills `meta.toc` for a sidebar. The npm name is `comark-outline` because npm refused `comark-toc`.

package/dist/svelte/Mermaid.svelte

@@ -0,0 +1,16 @@
+<!-- Pele's card in `.cmm` with the bar of buttons, as `comark-ui/html` draws it. In the browser Pele's own `mount()`
+     zooms the diagram in place, so it doesn't zoom with comark-zoom. -->
+<script>
+  import { onMount } from "svelte";
+  import { createPeleComponent } from "comark-pele/svelte";
+  import { addMermaidStyles, mermaidBar, startMermaid } from "comark-ui/client";
+
+  const Pele = createPeleComponent({ onRender: addMermaidStyles, onError: addMermaidStyles });
+  let { content = "", ...rest } = $props();
+  onMount(() => startMermaid());
+</script>
+
+<div class="cmm" data-source={content}>
+  <Pele {content} {...rest} />
+  <div class="cmm-bar">{@html mermaidBar()}</div>
+</div>

package/dist/svelte/index.js

@@ -1,6 +1,5 @@
 // Every plugin with components for `@comark/svelte`, which leaves out annotate, diff, and quiz.
 import { preset } from "comark-ui";
-import { addMermaidStyles } from "comark-ui/client";
 import * as badge from "comark-badge/svelte";
 import * as cards from "comark-cards/svelte";
 import * as carousel from "comark-carousel/svelte";
@@ -22,7 +21,7 @@ import * as magicMove from "comark-magic-move/svelte";
 import * as mark from "comark-mark/svelte";
 import * as math from "comark-mathml/svelte";
 import * as media from "comark-media/svelte";
-import pele, { createPeleComponent } from "comark-pele/svelte";
+import pele from "comark-pele/svelte";
 import * as metrics from "comark-metrics/svelte";
 import * as outline from "comark-outline/svelte";
 import * as properties from "comark-properties/svelte";
@@ -33,15 +32,12 @@ import * as table from "comark-table/svelte";
 import * as tabs from "comark-tabs/svelte";
 import * as tests from "comark-tests/svelte";
 import * as zoom from "comark-zoom/svelte";
+import Mermaid from "./Mermaid.svelte";
 import typeset from "./Typeset.svelte";
 
 export { criticCss } from "comark-ui";
 
-// Pele calls `onRender` only in the browser, after it draws, so the styles arrive like the other components' do.
-const mermaid = {
-  default: pele,
-  components: { pele: createPeleComponent({ onRender: addMermaidStyles }) },
-};
+const mermaid = { default: pele, components: { pele: Mermaid } };
 
 export default (options) =>
   preset(

package/dist/{typeset-css-DPB0S1bV.mjs → typeset-css-5aJ7cSmh.mjs}

@@ -181,6 +181,20 @@ const rules = `
   .shiki:not(:where(.light *)) span[style*="--shiki-dark:"] { color: var(--shiki-dark) !important; }
 }
 
+/* A block marked data-wide, such as a before/after comparison or a diagram wider than the text, grows past the column
+   into the room the page gives it on each side, --comark-wide-start and --comark-wide-end, up to its own width
+   (--comark-wide-width) and --comark-wide-max. It stays centered on the column while both sides have room, and moves
+   toward the side that has more when one doesn't. Without room set, it keeps to the column. Only the document's own
+   blocks grow, not one inside a list or tabs. */
+:scope > [data-wide] {
+  /* Room a page works out from the window can come out negative on a phone, where the column fills it: none, then. */
+  --_ty-start: max(0px, var(--comark-wide-start, 0px));
+  --_ty-end: max(0px, var(--comark-wide-end, 0px));
+  --_ty-wide: max(100%, min(var(--comark-wide-width, 100vw), var(--comark-wide-max, 72rem), 100% + var(--_ty-start) + var(--_ty-end)));
+  width: var(--_ty-wide);
+  margin-inline: clamp(-1 * var(--_ty-start), (100% - var(--_ty-wide)) / 2, 100% + var(--_ty-end) - var(--_ty-wide)) 0;
+}
+
 /* The first child adds no space above. Last, so it wins ties. */
 :scope > :where(:first-child):not(${own}),
 :scope > :where(:first-child) > :where(:first-child):not(${own}),

package/dist/vue.d.mts

@@ -1,4 +1,4 @@
-import { a as criticCss, n as Preset, r as PresetOptions } from "./index-B0YvApci.mjs";
+import { a as criticCss, n as Preset, r as PresetOptions } from "./index-jkwx6SyG.mjs";
 import { Component } from "vue";
 //#region src/vue.d.ts
 /** Every plugin with components for `@comark/vue`, which leaves out annotate, diff, and quiz. */

package/dist/vue.mjs

@@ -1,7 +1,7 @@
-import { t as typesetCss } from "./typeset-css-DPB0S1bV.mjs";
+import { t as typesetCss } from "./typeset-css-5aJ7cSmh.mjs";
 import { n as preset, t as criticCss } from "./src-DROB05U6.mjs";
-import { addMermaidStyles } from "./client.mjs";
-import { defineComponent, h } from "vue";
+import { i as startMermaid, n as mermaidBar, t as addMermaidStyles } from "./client-Bjd6VcGQ.mjs";
+import { defineComponent, h, onBeforeUnmount, onMounted } from "vue";
 import * as badge from "comark-badge/vue";
 import * as cards from "comark-cards/vue";
 import * as carousel from "comark-carousel/vue";
@@ -35,9 +35,36 @@ import * as tabs from "comark-tabs/vue";
 import * as tests from "comark-tests/vue";
 import * as zoom from "comark-zoom/vue";
 //#region src/vue.ts
+const Pele = createPeleComponent({
+	onRender: addMermaidStyles,
+	onError: addMermaidStyles
+});
+const Mermaid = defineComponent({
+	name: "ComarkMermaid",
+	inheritAttrs: false,
+	props: { content: {
+		type: String,
+		default: ""
+	} },
+	setup(props, { attrs }) {
+		let stop = () => {};
+		onMounted(() => stop = startMermaid());
+		onBeforeUnmount(() => stop());
+		return () => h("div", {
+			class: "cmm",
+			"data-source": props.content
+		}, [h(Pele, {
+			...attrs,
+			content: props.content
+		}), h("div", {
+			class: "cmm-bar",
+			innerHTML: mermaidBar()
+		})]);
+	}
+});
 const mermaid = {
 	default: pele,
-	components: { pele: createPeleComponent({ onRender: addMermaidStyles }) }
+	components: { pele: Mermaid }
 };
 const typeset = defineComponent({
 	name: "ComarkTypeset",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "comark-ui",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Every comark-ui block in one install: annotated screenshots, charts, diffs, tabs, zoom, and more, registered in the order they need with shared icons. Turn any of them off or pass its options.",
   "keywords": [
     "comark",
@@ -47,49 +47,49 @@
   },
   "dependencies": {
     "comark-pele": "^1.1.0",
-    "comark-badge": "^0.7.1",
-    "comark-annotate": "^0.7.1",
-    "comark-cards": "^0.7.1",
-    "comark-carousel": "^0.7.1",
-    "comark-cast": "^0.7.1",
-    "comark-charts": "^0.7.1",
-    "comark-chips": "^0.7.1",
-    "comark-cjk": "^0.7.1",
-    "comark-code": "^0.7.1",
-    "comark-code-notes": "^0.7.1",
-    "comark-colors": "^0.7.1",
-    "comark-critic": "^0.7.1",
-    "comark-deflist": "^0.7.1",
-    "comark-details": "^0.7.1",
-    "comark-diff": "^0.7.1",
-    "comark-diagrams": "^0.7.1",
-    "comark-fields": "^0.7.1",
-    "comark-figure": "^0.7.1",
-    "comark-file-tree": "^0.7.1",
-    "comark-footnotes": "^0.7.1",
-    "comark-embed": "^0.7.1",
-    "comark-icon": "^0.7.1",
-    "comark-include": "^0.7.1",
-    "comark-keys": "^0.7.1",
-    "comark-links": "^0.7.1",
-    "comark-mark": "^0.7.1",
-    "comark-magic-move": "^0.7.1",
-    "comark-github": "^0.7.1",
-    "comark-mathml": "^0.7.1",
-    "comark-media": "^0.7.1",
-    "comark-metrics": "^0.7.1",
-    "comark-qr": "^0.7.1",
-    "comark-properties": "^0.7.1",
-    "comark-outline": "^0.7.1",
-    "comark-quiz": "^0.7.1",
-    "comark-sources": "^0.7.1",
-    "comark-reading-time": "^0.7.1",
-    "comark-table": "^0.7.1",
-    "comark-steps": "^0.7.1",
-    "comark-tabs": "^0.7.1",
-    "comark-tests": "^0.7.1",
-    "comark-xref": "^0.7.1",
-    "comark-zoom": "^0.7.1"
+    "comark-annotate": "^0.7.2",
+    "comark-badge": "^0.7.2",
+    "comark-carousel": "^0.7.2",
+    "comark-cards": "^0.7.2",
+    "comark-cast": "^0.7.2",
+    "comark-charts": "^0.7.2",
+    "comark-chips": "^0.7.2",
+    "comark-code": "^0.7.2",
+    "comark-code-notes": "^0.7.2",
+    "comark-colors": "^0.7.2",
+    "comark-cjk": "^0.7.2",
+    "comark-deflist": "^0.7.2",
+    "comark-critic": "^0.7.2",
+    "comark-details": "^0.7.2",
+    "comark-diagrams": "^0.7.2",
+    "comark-fields": "^0.7.2",
+    "comark-embed": "^0.7.2",
+    "comark-figure": "^0.7.2",
+    "comark-diff": "^0.7.2",
+    "comark-file-tree": "^0.7.2",
+    "comark-github": "^0.7.2",
+    "comark-icon": "^0.7.2",
+    "comark-include": "^0.7.2",
+    "comark-keys": "^0.7.2",
+    "comark-footnotes": "^0.7.2",
+    "comark-links": "^0.7.2",
+    "comark-mark": "^0.7.2",
+    "comark-mathml": "^0.7.2",
+    "comark-media": "^0.7.2",
+    "comark-magic-move": "^0.7.2",
+    "comark-metrics": "^0.7.2",
+    "comark-outline": "^0.7.2",
+    "comark-qr": "^0.7.2",
+    "comark-quiz": "^0.7.2",
+    "comark-reading-time": "^0.7.2",
+    "comark-properties": "^0.7.2",
+    "comark-steps": "^0.7.2",
+    "comark-table": "^0.7.2",
+    "comark-tabs": "^0.7.2",
+    "comark-tests": "^0.7.2",
+    "comark-sources": "^0.7.2",
+    "comark-xref": "^0.7.2",
+    "comark-zoom": "^0.7.2"
   },
   "devDependencies": {
     "@comark/html": "^0.8.1",