@tangle-network/charts 0.3.1 → 0.6.0

package/dist/index.js

@@ -1,347 +1,4 @@
-//#region src/text.ts
-/**
-* Text: escaping, measurement and wrapping.
-*
-* Layout runs with no DOM (a Worker, a build step), so text width comes from
-* Inter's advance widths, the face tangle.tools and the reports load. Numbers
-* render in a monospace face at 0.6 em per glyph. Widths carry a 4% margin so a
-* fallback face does not collide with its neighbour.
-*/
-/** Every dynamic string in markup passes through here. */
-function esc(value) {
-	return String(value).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
-}
-const REGULAR = [
-	281,
-	288,
-	466,
-	633,
-	642,
-	982,
-	644,
-	300,
-	365,
-	365,
-	501,
-	662,
-	288,
-	460,
-	288,
-	360,
-	631,
-	407,
-	610,
-	618,
-	646,
-	608,
-	620,
-	566,
-	619,
-	620,
-	288,
-	302,
-	662,
-	662,
-	662,
-	511,
-	966,
-	690,
-	654,
-	730,
-	722,
-	601,
-	590,
-	746,
-	743,
-	269,
-	571,
-	672,
-	565,
-	903,
-	753,
-	765,
-	639,
-	765,
-	644,
-	642,
-	646,
-	744,
-	690,
-	985,
-	682,
-	679,
-	629,
-	365,
-	360,
-	365,
-	471,
-	456,
-	323,
-	562,
-	612,
-	571,
-	612,
-	583,
-	370,
-	613,
-	591,
-	242,
-	242,
-	549,
-	242,
-	876,
-	591,
-	600,
-	612,
-	612,
-	376,
-	528,
-	327,
-	591,
-	562,
-	818,
-	546,
-	562,
-	552,
-	426,
-	333,
-	426,
-	662
-];
-const SEMIBOLD = [
-	252,
-	321,
-	523,
-	644,
-	650,
-	1004,
-	663,
-	326,
-	373,
-	373,
-	540,
-	673,
-	319,
-	465,
-	319,
-	379,
-	660,
-	423,
-	623,
-	636,
-	666,
-	629,
-	640,
-	576,
-	640,
-	640,
-	319,
-	329,
-	673,
-	673,
-	673,
-	543,
-	999,
-	728,
-	659,
-	737,
-	722,
-	605,
-	588,
-	749,
-	746,
-	277,
-	580,
-	703,
-	565,
-	922,
-	759,
-	769,
-	645,
-	773,
-	652,
-	650,
-	660,
-	736,
-	728,
-	1020,
-	720,
-	713,
-	652,
-	373,
-	379,
-	373,
-	481,
-	469,
-	351,
-	574,
-	624,
-	583,
-	624,
-	591,
-	389,
-	625,
-	612,
-	262,
-	262,
-	569,
-	262,
-	900,
-	612,
-	609,
-	624,
-	624,
-	397,
-	549,
-	353,
-	612,
-	587,
-	839,
-	569,
-	588,
-	566,
-	455,
-	359,
-	455,
-	673
-];
-const EXTRA = {
-	"·": 300,
-	"×": 670,
-	"—": 1e3,
-	"–": 500,
-	"…": 900,
-	"≥": 670,
-	"≤": 670,
-	"±": 670,
-	"→": 954,
-	"−": 662
-};
-const MARGIN = 1.04;
-function textWidth(text, size, face = "sans") {
-	if (face === "mono") return text.length * .6 * size * MARGIN;
-	const table = face === "sans-semibold" ? SEMIBOLD : REGULAR;
-	let units = 0;
-	for (const ch of text) {
-		const code = ch.codePointAt(0) ?? 0;
-		units += code >= 32 && code <= 126 ? table[code - 32] : EXTRA[ch] ?? 620;
-	}
-	return units / 1e3 * size * MARGIN;
-}
-/**
-* Breaks `text` into at most `maxLines` lines no wider than `width`. Breaks at
-* spaces, and after `-`, `/`, `_` or `·` when a word alone is too wide. A line
-* that still overflows the last allowed line ends with an ellipsis; callers put
-* the full text in a `<title>` and in the table.
-*/
-function wrap(text, width, size, face = "sans", maxLines = 2) {
-	const fits = (s) => textWidth(s, size, face) <= width;
-	const lines = [];
-	const glue = [];
-	let line = "";
-	const breakLine = (next, joiner) => {
-		lines.push(line);
-		glue.push(joiner);
-		line = next;
-	};
-	for (const word of text.split(/\s+/).filter(Boolean)) {
-		const joined = line ? `${line} ${word}` : word;
-		if (fits(joined)) line = joined;
-		else if (fits(word)) {
-			if (line) breakLine(word, " ");
-			else line = word;
-		} else {
-			const pieces = word.match(/[^\-/_·]+[\-/_·]?|[\-/_·]/g) ?? [word];
-			for (const [index, piece] of pieces.entries()) {
-				const joiner = index === 0 ? " " : "";
-				const candidate = line ? `${line}${joiner}${piece}` : piece;
-				if (fits(candidate) || !line) line = candidate;
-				else breakLine(piece, joiner);
-			}
-		}
-	}
-	if (line) lines.push(line);
-	if (lines.length <= maxLines && lines.every(fits)) return {
-		lines,
-		truncated: false
-	};
-	const kept = lines.slice(0, maxLines);
-	let last = lines.slice(maxLines - 1).reduce((acc, l, i) => i === 0 ? l : `${acc}${glue[maxLines - 2 + i]}${l}`, "");
-	while (last.length > 1 && !fits(`${last}…`)) last = last.slice(0, -1);
-	kept[maxLines - 1] = `${last.trimEnd()}…`;
-	return {
-		lines: kept,
-		truncated: true
-	};
-}
-/** One `<text>` element with a line per `<tspan>`. */
-function textBlock(lines, x, y, lineHeight, attrs) {
-	if (lines.length === 1) return `<text x="${x}" y="${y}" ${attrs}>${esc(lines[0])}</text>`;
-	return `<text x="${x}" y="${y}" ${attrs}>${lines.map((line, i) => `<tspan x="${x}" dy="${i === 0 ? 0 : lineHeight}">${esc(line)}</tspan>`).join("")}</text>`;
-}
-/** Joins `parts` with " · ", starting a new line wherever the next part would pass `width`. */
-function fitLines(parts, width, size, face = "sans") {
-	const lines = [];
-	for (const part of parts) {
-		const last = lines[lines.length - 1];
-		if (last !== void 0 && textWidth(`${last} · ${part}`, size, face) <= width) lines[lines.length - 1] = `${last} · ${part}`;
-		else lines.push(part);
-	}
-	return lines;
-}
-function plural(count, one, many = `${one}s`) {
-	return count === 1 ? one : many;
-}
-/** "a, b and c" */
-function listJoin(items) {
-	if (items.length <= 1) return items.join("");
-	return `${items.slice(0, -1).join(", ")} and ${items[items.length - 1]}`;
-}
-function capitalize(text) {
-	return text.charAt(0).toUpperCase() + text.slice(1);
-}
-//#endregion
-//#region src/svg.ts
-/**
-* SVG marks. Every mark carries a class and `figure.css` maps classes to the
-* `--chart-*` tokens, so a render holds no colour and follows the page theme.
-* Geometry stays in attributes, so an SVG shown without the stylesheet keeps
-* its layout.
-*/
-const r2 = (n) => Math.round(n * 100) / 100;
-function svgRoot(width, height, inner) {
-	const h = Math.ceil(height);
-	return `<svg class="tgc-svg" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${h}" viewBox="0 0 ${width} ${h}" aria-hidden="true" focusable="false">${inner}</svg>`;
-}
-/** A horizontal bar anchored at `x`, square at the baseline, 4 px round at the data end. */
-function hbar(x, y, w, h, cls) {
-	if (w <= 0) return "";
-	const r = Math.min(4, h / 2, w);
-	return `<path class="${cls}" d="M${r2(x)} ${r2(y)}h${r2(w - r)}a${r} ${r} 0 0 1 ${r} ${r}v${r2(h - 2 * r)}a${r} ${r} 0 0 1 -${r} ${r}h-${r2(w - r)}z"/>`;
-}
-function rect(x, y, w, h, cls, extra = "") {
-	if (w <= 0 || h <= 0) return "";
-	return `<rect class="${cls}" x="${r2(x)}" y="${r2(y)}" width="${r2(w)}" height="${r2(h)}"${extra ? ` ${extra}` : ""}/>`;
-}
-function line(x1, y1, x2, y2, cls) {
-	return `<line class="${cls}" x1="${r2(x1)}" y1="${r2(y1)}" x2="${r2(x2)}" y2="${r2(y2)}"/>`;
-}
-function circle(cx, cy, r, cls) {
-	return `<circle class="${cls}" cx="${r2(cx)}" cy="${r2(cy)}" r="${r}"/>`;
-}
-function polyline(points, cls) {
-	return `<polyline class="${cls}" points="${points.map(([x, y]) => `${r2(x)},${r2(y)}`).join(" ")}"/>`;
-}
-function text(x, y, value, o = {}) {
-	const anchor = o.anchor && o.anchor !== "start" ? ` text-anchor="${o.anchor}"` : "";
-	const weight = o.weight === 600 ? ` font-weight="600"` : "";
-	return `<text class="${o.cls ?? "tgc-ink"}" x="${r2(x)}" y="${r2(y)}" font-size="${o.size ?? 12}"${anchor}${weight}>${esc(value)}</text>`;
-}
-/** A group whose `<title>` is the hover text for everything inside it. */
-function titled(title, inner) {
-	return `<g><title>${esc(title)}</title>${inner}</g>`;
-}
-//#endregion
+import { C as listJoin, D as wrap, E as textWidth, S as fitLines, T as textBlock, _ as svgRoot, a as eventsTable, b as capitalize, c as MARKER_SHAPES, f as hbar, g as rect, h as polyline, i as eventsGap, l as circle, m as markerPath, n as drawBands, o as isRefusal, p as line, r as drawMarks, s as table, t as EVENTS_READ, u as hatch, v as text, w as plural, x as esc, y as titled } from "./events-Cw6abvgR.js";
 //#region src/block.ts
 /**
 * The figure block: one markup for every figure on every surface.
@@ -408,14 +65,6 @@ function renderRefusals(refusals) {
 	return `<ul class="tgc-refusals">${refusals.map((r) => `<li>${esc(r.refused)}</li>`).join("")}</ul>`;
 }
 //#endregion
-//#region src/table.ts
-/** A plain HTML table: the accessible form of a figure and its phone view. */
-function table(caption, columns, rows) {
-	const head = columns.map((c) => `<th scope="col"${c.numeric ? " class=\"tgc-n\"" : ""}>${esc(c.label)}</th>`).join("");
-	const body = rows.map((row) => `<tr>${row.map((cell, i) => i === 0 ? `<th scope="row">${esc(cell)}</th>` : `<td${columns[i]?.numeric ? " class=\"tgc-n\"" : ""}>${esc(cell)}</td>`).join("")}</tr>`).join("");
-	return `<table class="tgc-table"><caption>${esc(caption)}</caption><thead><tr>${head}</tr></thead><tbody>${body}</tbody></table>`;
-}
-//#endregion
 //#region src/breakdown.ts
 /**
 * `breakdown`: why attempts fail.
@@ -529,6 +178,354 @@ function wide$1(input, get) {
 	return svgRoot(720, y + 4, head + body);
 }
 //#endregion
+//#region src/heatmap.ts
+/** Recorded values and producer-supplied states in a complete matrix. */
+function heatmap(columns, rows, o) {
+	const id = o.id ?? "heatmap";
+	if (!columns.length || !rows.length) return {
+		id,
+		refused: "A heatmap needs rows and columns."
+	};
+	if (!o.measure?.trim() || !o.unit?.trim() || !o.statusRule?.trim()) return {
+		id,
+		refused: "A heatmap needs a measure, unit and status rule."
+	};
+	if (new Set(columns.map((c) => c.id)).size !== columns.length || new Set(rows.map((r) => r.id)).size !== rows.length) return {
+		id,
+		refused: "Duplicate heatmap row or column ids."
+	};
+	for (const row of rows) {
+		if (row.cells.length !== columns.length) return {
+			id,
+			refused: `${row.label}: expected ${columns.length} cells, got ${row.cells.length}.`
+		};
+		for (const [i, cell] of row.cells.entries()) {
+			if (![
+				"pass",
+				"breach",
+				"no-data"
+			].includes(cell.status)) return {
+				id,
+				refused: `${row.label} × ${columns[i].label}: unknown status.`
+			};
+			if (cell.status === "no-data" ? cell.value !== null : cell.value === null || !Number.isFinite(cell.value) || cell.value < 0) return {
+				id,
+				refused: `${row.label} × ${columns[i].label}: status and value disagree.`
+			};
+		}
+	}
+	const fmt = (v) => o.formatValue?.(v) ?? new Intl.NumberFormat("en-US", { maximumFractionDigits: 1 }).format(v);
+	const counts = rows.flatMap((r) => r.cells).reduce((a, c) => (a[c.status]++, a), {
+		pass: 0,
+		breach: 0,
+		"no-data": 0
+	});
+	const measured = counts.pass + counts.breach;
+	const finding = `${counts.breach} of ${measured} measured ${plural(measured, "cell")} breach ${o.statusRule}.`;
+	const lede = `${counts.pass} pass · ${counts.breach} breach · ${counts["no-data"]} no data across ${rows.length} ${plural(rows.length, "row")}.`;
+	const cellLabel = (cell) => cell.value === null ? "No data" : `${fmt(cell.value)} ${o.unit} · ${cell.status}`;
+	const tableHtml = table(`${capitalize(o.measure)} by row and column`, [{ label: "Row" }, ...columns.map((c) => ({
+		label: c.label,
+		numeric: true
+	}))], rows.map((r) => [r.label, ...r.cells.map(cellLabel)]));
+	return {
+		id,
+		finding,
+		lede,
+		read: `Every cell shows its recorded ${o.measure}; colour shows the producer's pass or breach status. A dash means no data.`,
+		svg: {
+			wide: drawWide(columns, rows, fmt),
+			narrow: drawNarrow(columns, rows, fmt)
+		},
+		table: tableHtml,
+		note: {
+			method: `Producer-supplied status. ${o.statusRule}. Values are ${o.unit}; no data is never zero.`,
+			n: `${measured} measured of ${rows.length * columns.length} cells.`,
+			exclusions: [`${counts["no-data"]} cells have no data.`]
+		}
+	};
+}
+function cellMark(cell, x, y, w, h, label, fmt) {
+	const value = cell.value === null ? "—" : fmt(cell.value);
+	const status = cell.status === "no-data" ? "no data" : cell.status;
+	return titled(`${label}: ${value} · ${status}`, rect(x, y, w, h, `tgc-heat-${cell.status}`, "rx=\"5\"") + text(x + w / 2, y + h / 2 + 5, value, {
+		cls: `tgc-heat-label tgc-num${cell.status === "no-data" ? " tgc-heat-missing" : ""}`,
+		anchor: "middle",
+		size: 13,
+		weight: 600
+	}));
+}
+function drawWide(columns, rows, fmt) {
+	const left = 144, gap = 4, cellW = Math.max(58, (568 - gap * (columns.length - 1)) / columns.length);
+	const width = Math.ceil(left + columns.length * (cellW + gap));
+	let head = "", headHeight = 44;
+	columns.forEach((c, i) => {
+		const label = wrap(c.label, cellW - 5, 10, "sans", 3);
+		head += titled(c.label, textBlock(label.lines, left + i * (cellW + gap) + cellW / 2, 14, 12, "class=\"tgc-ink-muted\" font-size=\"10\" text-anchor=\"middle\""));
+		headHeight = Math.max(headHeight, 12 + label.lines.length * 12 + 10);
+	});
+	let body = "";
+	rows.forEach((r, j) => {
+		const y = headHeight + j * 32;
+		const name = wrap(r.label, 136, 12, "sans", 1);
+		body += titled(r.label, text(2, y + 19, name.lines[0], {
+			size: 12,
+			weight: 600
+		}));
+		r.cells.forEach((cell, i) => {
+			body += cellMark(cell, left + i * (cellW + gap), y, cellW, 28, `${r.label} · ${columns[i].label}`, fmt);
+		});
+	});
+	return svgRoot(width, headHeight + rows.length * 32 + 2, head + body);
+}
+function drawNarrow(columns, rows, fmt) {
+	const width = 358, cols = 3, cellW = 322 / cols;
+	const groups = Math.ceil(columns.length / cols), groupH = 49, rowH = 29 + groups * groupH + 12;
+	let body = "";
+	rows.forEach((r, j) => {
+		const top = j * rowH;
+		body += text(12, top + 18, r.label, {
+			size: 14,
+			weight: 600
+		});
+		columns.forEach((c, i) => {
+			const group = Math.floor(i / cols), x = 12 + i % cols * 113.33333333333333, y = top + 29 + group * groupH;
+			const label = wrap(c.label, 104.33333333333333, 10, "sans", 1);
+			body += titled(c.label, text(x + 2, y + 9, label.lines[0], {
+				size: 10,
+				cls: "tgc-ink-muted"
+			}));
+			body += cellMark(r.cells[i], x, y + 13, cellW, 29, `${r.label} · ${c.label}`, fmt);
+		});
+	});
+	return svgRoot(width, rows.length * rowH, body);
+}
+//#endregion
+//#region src/latency-range.ts
+/** p50 point, p95 extent, and a caller-supplied SLO. */
+function latencyRange(rows, o) {
+	const id = o.id ?? "latency-range";
+	if (!rows.length) return {
+		id,
+		refused: "No latency ranges recorded."
+	};
+	if (!o.measure?.trim() || !Number.isFinite(o.sloMs) || o.sloMs <= 0 || !Number.isInteger(o.minN) || o.minN < 1) return {
+		id,
+		refused: "A latency range needs a measure, positive SLO and minimum n."
+	};
+	if (new Set(rows.map((r) => r.id)).size !== rows.length) return {
+		id,
+		refused: "Duplicate latency row ids."
+	};
+	for (const r of rows) {
+		if (!Number.isInteger(r.n) || r.n < o.minN) return {
+			id,
+			refused: `${r.label}: n=${r.n} is below the stated minimum n=${o.minN}.`
+		};
+		if (!Number.isFinite(r.p50Ms) || !Number.isFinite(r.p95Ms) || r.p50Ms <= 0 || r.p95Ms < r.p50Ms) return {
+			id,
+			refused: `${r.label}: invalid p50 or p95 for a log axis.`
+		};
+	}
+	const breached = rows.filter((r) => r.p95Ms > o.sloMs);
+	const fmt = (ms) => `${(ms / 1e3).toFixed(1)} s`;
+	const min = Math.min(o.sloMs, ...rows.map((r) => r.p50Ms)) / 1.5;
+	const max = Math.max(o.sloMs, ...rows.map((r) => r.p95Ms)) * 1.12;
+	return {
+		id,
+		finding: `${breached.length} of ${rows.length} ${plural(rows.length, "range")} exceed the ${fmt(o.sloMs)} p95 SLO.`,
+		lede: `${rows.length} of ${rows.length + (o.excluded?.length ?? 0)} ${plural(rows.length + (o.excluded?.length ?? 0), "setup")} have at least ${o.minN} observations.`,
+		read: "The dot is p50; the bar runs from p50 to p95 on a logarithmic time axis. The dashed rule is the p95 SLO. Input order is preserved.",
+		svg: {
+			wide: draw$3(rows, o, min, max, 720),
+			narrow: draw$3(rows, o, min, max, 358)
+		},
+		table: table(`${capitalize(o.measure)} by setup`, [
+			{ label: "Setup" },
+			{
+				label: "p50",
+				numeric: true
+			},
+			{
+				label: "p95",
+				numeric: true
+			},
+			{
+				label: "n",
+				numeric: true
+			},
+			{ label: "p95 SLO" }
+		], rows.map((r) => [
+			r.label,
+			fmt(r.p50Ms),
+			fmt(r.p95Ms),
+			String(r.n),
+			r.p95Ms > o.sloMs ? "breach" : "pass"
+		])),
+		note: {
+			method: `Recorded p50 and p95 in milliseconds on a logarithmic time axis; producer supplies quantiles. The p95 SLO is ${fmt(o.sloMs)}.`,
+			n: `${rows.reduce((s, r) => s + r.n, 0)} observations across ${rows.length} rows; minimum n=${o.minN} per row.`,
+			exclusions: o.excluded ?? []
+		}
+	};
+}
+function draw$3(rows, o, min, max, width) {
+	const phone = width === 358, left = phone ? 122 : 148, right = phone ? 69 : 92;
+	const plotW = width - left - right, top = 48, rowH = phone ? 49 : 39;
+	const scale = (ms) => left + (Math.log(ms) - Math.log(min)) / (Math.log(max) - Math.log(min)) * plotW;
+	let body = line(scale(o.sloMs), 37, scale(o.sloMs), top + rows.length * rowH, "tgc-threshold");
+	body += text(scale(o.sloMs) + 3, 15, `SLO ${(o.sloMs / 1e3).toFixed(0)} s`, {
+		size: 11,
+		cls: "tgc-ink-muted tgc-num"
+	});
+	for (let exponent = Math.floor(Math.log10(min)); exponent <= Math.ceil(Math.log10(max)); exponent++) for (const step of [1, 5]) {
+		const tick = step * 10 ** exponent;
+		if (tick <= min || tick >= max || Math.abs(scale(tick) - scale(o.sloMs)) < 19) continue;
+		body += line(scale(tick), 40, scale(tick), top + rows.length * rowH, "tgc-gridline");
+		body += text(scale(tick), 35, `${Number((tick / 1e3).toPrecision(2))} s`, {
+			size: 10,
+			cls: "tgc-ink-muted tgc-num",
+			anchor: "middle"
+		});
+	}
+	rows.forEach((r, i) => {
+		const y = top + i * rowH;
+		const label = wrap(r.label, left - 10, phone ? 11 : 13, "sans", phone ? 2 : 1);
+		body += titled(r.label, label.lines.map((part, j) => text(2, y + 5 + j * 14, part, {
+			size: phone ? 11 : 13,
+			weight: 600
+		})).join(""));
+		const cy = y + (phone ? 7 : 0), status = r.p95Ms > o.sloMs ? "breach" : "pass";
+		body += titled(`${r.label}: p50 ${(r.p50Ms / 1e3).toFixed(1)} s; p95 ${(r.p95Ms / 1e3).toFixed(1)} s; n=${r.n}; ${status}`, rect(scale(r.p50Ms), cy - 5, Math.max(2, scale(r.p95Ms) - scale(r.p50Ms)), 10, `tgc-range-${status}`, "rx=\"5\"") + circle(scale(r.p50Ms), cy, 6, `tgc-range-dot-${status}`));
+		body += text(width - 4, cy + 4, `${(r.p95Ms / 1e3).toFixed(1)} · ${r.n}`, {
+			cls: "tgc-ink tgc-num",
+			anchor: "end",
+			size: phone ? 10 : 12
+		});
+	});
+	return svgRoot(width, top + rows.length * rowH + 4, body);
+}
+//#endregion
+//#region src/phase-waterfall.ts
+/** Static cumulative timing from ordered, disjoint producer phases. */
+function phaseWaterfall(phases, o) {
+	const id = o.id ?? "phase-waterfall";
+	if (!phases.length) return {
+		id,
+		refused: "No phases recorded."
+	};
+	if (!o.measure?.trim() || !Number.isFinite(o.totalMs) || o.totalMs <= 0) return {
+		id,
+		refused: "A waterfall needs a measure and positive total time."
+	};
+	if (new Set(phases.map((p) => p.id)).size !== phases.length) return {
+		id,
+		refused: "Duplicate phase ids."
+	};
+	if (phases.some((p) => p.id === "__unaccounted")) return {
+		id,
+		refused: "Phase id __unaccounted is reserved."
+	};
+	for (const phase of phases) {
+		if (!Number.isFinite(phase.ms) || phase.ms < 0) return {
+			id,
+			refused: `${phase.label}: invalid duration.`
+		};
+		if (phase.kind !== void 0 && phase.kind !== "measured" && phase.kind !== "unaccounted") return {
+			id,
+			refused: `${phase.label}: unknown phase kind.`
+		};
+	}
+	const accounted = phases.reduce((s, p) => s + p.ms, 0);
+	if (accounted > o.totalMs + .001) return {
+		id,
+		refused: `Phase durations ${accounted} ms exceed the reported total ${o.totalMs} ms; phases may overlap.`
+	};
+	const unassigned = Math.max(0, o.totalMs - accounted);
+	const namedUnaccounted = phases.filter((p) => p.kind === "unaccounted").reduce((s, p) => s + p.ms, 0);
+	const fmt = (ms) => `${(ms / 1e3).toFixed(2)} s`;
+	const short = (ms) => ms < 1e3 ? `${Number(ms.toPrecision(3))} ms` : fmt(ms);
+	const largest = phases.reduce((a, p) => p.ms > a.ms ? p : a, phases[0]);
+	const all = unassigned > .001 ? [...phases, {
+		id: "__unaccounted",
+		label: "Unassigned remainder",
+		ms: unassigned,
+		kind: "unaccounted"
+	}] : phases;
+	let cumulative = 0;
+	const rows = all.map((p) => {
+		const start = cumulative;
+		cumulative += p.ms;
+		return {
+			...p,
+			start
+		};
+	});
+	return {
+		id,
+		finding: largest.kind === "unaccounted" ? `${capitalize(largest.label)} is the largest leaf, but its work is unaccounted: ${fmt(largest.ms)} of ${fmt(o.totalMs)}.` : `${capitalize(largest.label)} takes the longest recorded phase: ${fmt(largest.ms)} of ${fmt(o.totalMs)}.`,
+		lede: `${fmt(accounted)} in ${phases.length} ordered ${plural(phases.length, "leaf")}; ${fmt(namedUnaccounted)} producer-labelled unaccounted and ${fmt(unassigned)} unassigned remainder.`,
+		read: "Each bar begins where the previous phase ends. Hatched bars are producer-labelled unaccounted leaves or the unassigned remainder; zero phases remain listed without a positive bar.",
+		svg: {
+			wide: draw$2(rows, o.totalMs, 720, short),
+			narrow: draw$2(rows, o.totalMs, 358, short)
+		},
+		table: table(`${capitalize(o.measure)} by phase`, [
+			{ label: "Phase" },
+			{
+				label: "Duration",
+				numeric: true
+			},
+			{
+				label: "Cumulative",
+				numeric: true
+			},
+			{ label: "Kind" }
+		], rows.map((p) => [
+			p.label,
+			short(p.ms),
+			fmt(p.start + p.ms),
+			p.kind === "unaccounted" ? "unaccounted" : "measured"
+		])),
+		note: {
+			method: "Ordered disjoint leaf durations as supplied by the producer; no overlap or critical-path inference. Hatching marks producer-labelled unaccounted leaves and the calculated remainder; the table names which is which.",
+			n: `${phases.length} phases, ${fmt(o.totalMs)} reported total.`,
+			exclusions: []
+		}
+	};
+}
+function draw$2(rows, total, width, short) {
+	const phone = width === 358, left = phone ? 12 : 190, right = phone ? 52 : 64;
+	const plotW = width - left - right, rowH = phone ? 42 : 24, top = 27;
+	let body = "";
+	for (let i = 0; i <= 4; i++) {
+		const x = left + plotW * i / 4;
+		body += line(x, 23, x, top + rows.length * rowH, "tgc-gridline");
+		body += text(x, 15, `${(total * i / 4e3).toFixed(0)} s`, {
+			size: 10,
+			cls: "tgc-ink-muted tgc-num",
+			anchor: i === 0 ? "start" : i === 4 ? "end" : "middle"
+		});
+	}
+	rows.forEach((p, i) => {
+		const y = top + i * rowH, start = left + p.start / total * plotW, w = p.ms / total * plotW;
+		const label = wrap(p.label, phone ? width - 65 : left - 6, phone ? 11 : 12, "sans", 1);
+		body += titled(p.label, text(phone ? 12 : 2, y + (phone ? 13 : 18), label.lines[0], {
+			size: phone ? 11 : 12,
+			cls: p.id === "__unaccounted" ? "tgc-ink-muted" : "tgc-ink"
+		}));
+		const barY = y + (phone ? 21 : 5), barW = Math.max(p.ms > 0 ? 1 : 0, w);
+		const bar = p.kind === "unaccounted" ? hatch(start, barY, barW, 13, "tgc-waterfall-unaccounted") : rect(start, barY, barW, 13, "tgc-waterfall-bar", "rx=\"2\"");
+		body += titled(`${p.label}: ${short(p.ms)}; cumulative ${((p.start + p.ms) / 1e3).toFixed(2)} s`, bar);
+		body += text(width - 2, barY + 11, short(p.ms), {
+			size: phone ? 10 : 11,
+			cls: "tgc-ink tgc-num",
+			anchor: "end"
+		});
+	});
+	return svgRoot(width, top + rows.length * rowH + 2, body);
+}
+//#endregion
 //#region src/format.ts
 const TIERS_BEST_FIRST = [
 	"S",
@@ -850,8 +847,8 @@ function comparisonIntervals(rows, setups, o) {
 		lede,
 		read,
 		svg: {
-			wide: draw(drawn, domain, 720, 272, 264),
-			narrow: draw(drawn, domain, 358, 0, 0)
+			wide: draw$1(drawn, domain, 720, 272, 264),
+			narrow: draw$1(drawn, domain, 358, 0, 0)
 		},
 		table: table(`Comparisons on ${o.measure}`, columns, tableRows),
 		note: {
@@ -862,7 +859,7 @@ function comparisonIntervals(rows, setups, o) {
 	};
 }
 /** labelW 0 stacks the label above the bar (phone). */
-function draw(drawn, domain, width, plotX, labelW) {
+function draw$1(drawn, domain, width, plotX, labelW) {
 	const x = linear(domain, [plotX, width - 8]);
 	let body = "";
 	let y = 8;
@@ -1271,9 +1268,9 @@ function plot$1(costed, unplaced, drawLine, o) {
 //#endregion
 //#region src/css.generated.ts
 /** The figure block and mark styles (src/figure.css), for documents that inline their CSS. */
-const figureCss = "/* @tangle-network/charts — figure block and mark styles.\n *\n * Every colour is a --chart-* token from @tangle-network/brand tokens.css, so a\n * figure follows the page theme. A standalone document without brand tokens\n * embeds `chartTokensCss` first. Fonts fall back to Inter and JetBrains Mono.\n *\n * Each figure carries a 720 px and a 358 px render. The swap follows the\n * figure's own width (a container query), so a narrow column shows the phone\n * render even on a wide screen. */\n\n.tgc-figure {\n  margin: 32px 0 0;\n  padding: 0;\n  max-width: 720px;\n  color: var(--chart-ink);\n  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n\n.tgc-finding {\n  margin: 0 0 8px;\n  font-size: 16px;\n  line-height: 24px;\n  font-weight: 600;\n  color: var(--chart-ink);\n}\n\n.tgc-noteref {\n  margin-left: 2px;\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--chart-ink-muted);\n  text-decoration: none;\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n}\n.tgc-noteref:hover,\n.tgc-noteref:focus-visible {\n  color: var(--chart-accent);\n  text-decoration: underline;\n}\n\n.tgc-lede {\n  margin: 0 0 16px;\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--text-secondary, var(--chart-ink));\n}\n\n.tgc-plot {\n  container-type: inline-size;\n}\n.tgc-wide svg,\n.tgc-narrow svg {\n  display: block;\n  overflow: visible;\n}\n.tgc-narrow {\n  display: none;\n}\n.tgc-narrow svg {\n  max-width: 100%;\n  height: auto;\n}\n@container (max-width: 719.98px) {\n  .tgc-wide {\n    display: none;\n  }\n  .tgc-narrow {\n    display: block;\n  }\n}\n\n.tgc-read {\n  margin: 8px 0 0;\n  font-size: 12px;\n  line-height: 16px;\n  color: var(--chart-ink-muted);\n}\n\n.tgc-data {\n  margin: 8px 0 0;\n  font-size: 12px;\n  line-height: 16px;\n}\n.tgc-data > summary {\n  cursor: pointer;\n  color: var(--chart-ink-muted);\n  width: fit-content;\n}\n.tgc-data > summary:hover {\n  color: var(--chart-ink);\n}\n.tgc-data[open] > summary {\n  margin-bottom: 8px;\n}\n\n.tgc-scroll {\n  overflow-x: auto;\n}\n.tgc-scroll:focus-visible {\n  outline: 2px solid var(--chart-accent);\n  outline-offset: 2px;\n}\n\n.tgc-table {\n  border-collapse: collapse;\n  min-width: 100%;\n  font-size: 12px;\n  line-height: 16px;\n  color: var(--chart-ink);\n  /* A host page's table rules must not restyle the figure's table. */\n  border: 0;\n  border-radius: 0;\n  background: none;\n}\n.tgc-table caption {\n  text-align: left;\n  padding: 0 0 8px;\n  color: var(--chart-ink-muted);\n}\n.tgc-table th,\n.tgc-table td {\n  padding: 6px 12px 6px 0;\n  border-bottom: 1px solid var(--chart-rule);\n  text-align: left;\n  vertical-align: top;\n  font-weight: 400;\n  font-size: inherit;\n  color: inherit;\n  background: none;\n  text-transform: none;\n  letter-spacing: normal;\n}\n.tgc-table thead th {\n  color: var(--chart-ink-muted);\n  white-space: nowrap;\n}\n.tgc-table tbody th {\n  position: sticky;\n  left: 0;\n  background: var(--chart-canvas, var(--depth-1, transparent));\n}\n.tgc-table .tgc-n {\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.tgc-table thead .tgc-n {\n  font-family: inherit;\n}\n.tgc-table tbody tr:hover {\n  background: var(--chart-shade);\n}\n.tgc-narrow-table .tgc-table {\n  display: block;\n  overflow-x: auto;\n}\n\n.tgc-notes {\n  margin: 16px 0 0;\n  padding-left: 20px;\n  font-size: 12px;\n  line-height: 16px;\n  color: var(--chart-ink-muted);\n}\n.tgc-notes li {\n  margin: 0 0 8px;\n  padding-left: 4px;\n}\n.tgc-notes li:target {\n  color: var(--chart-ink);\n}\n.tgc-backlink {\n  color: var(--chart-ink-muted);\n  text-decoration: none;\n}\n\n.tgc-refusals {\n  margin: 8px 0 0;\n  padding-left: 20px;\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--chart-ink-muted);\n}\n\n/* Marks */\n.tgc-svg {\n  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n.tgc-svg .tgc-num {\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n  font-variant-numeric: tabular-nums;\n}\n.tgc-ink {\n  fill: var(--chart-ink);\n}\n.tgc-ink-muted {\n  fill: var(--chart-ink-muted);\n}\n.tgc-bar,\n.tgc-ci,\n.tgc-pt-front {\n  fill: var(--chart-accent);\n}\n.tgc-gridline {\n  stroke: var(--chart-grid);\n  stroke-width: 1;\n}\n.tgc-rule {\n  stroke: var(--chart-rule);\n  stroke-width: 1;\n}\n.tgc-axis,\n.tgc-zero {\n  stroke: var(--chart-muted);\n  stroke-width: 1;\n}\n.tgc-whisker,\n.tgc-tick {\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-linecap: round;\n}\n.tgc-threshold {\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-dasharray: 3 3;\n}\n.tgc-front-line {\n  fill: none;\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-linejoin: round;\n}\n.tgc-pt,\n.tgc-open {\n  fill: none;\n  stroke: var(--chart-muted);\n  stroke-width: 1.5;\n}\n.tgc-pt-est {\n  fill: none;\n  stroke: var(--chart-accent);\n  stroke-width: 2;\n}\n.tgc-pt-ci,\n.tgc-strike {\n  stroke: var(--chart-muted);\n  stroke-width: 1.5;\n}\n.tgc-leader {\n  stroke: var(--chart-muted);\n  stroke-width: 1;\n}\n.tgc-ci-exact,\n.tgc-dot {\n  fill: var(--chart-muted);\n}\n.tgc-dashed {\n  stroke-dasharray: 2 2;\n}\n.tgc-tier-c {\n  fill: var(--chart-tier-c);\n}\n.tgc-tier-b {\n  fill: var(--chart-tier-b);\n}\n.tgc-tier-a {\n  fill: var(--chart-tier-a);\n}\n.tgc-tier-s {\n  fill: var(--chart-tier-s);\n}\n/* Neutral tint for counts: never the accent, capped at half strength so ink keeps 6:1. */\n.tgc-tint {\n  fill: color-mix(in srgb, var(--chart-muted) calc(var(--s, 0) * 50%), transparent);\n}\n\n@media print {\n  .tgc-plot {\n    container-type: normal;\n  }\n  .tgc-wide {\n    display: block;\n  }\n  .tgc-narrow {\n    display: none;\n  }\n  .tgc-wide svg {\n    width: 100%;\n    height: auto;\n  }\n  .tgc-figure {\n    break-inside: avoid;\n  }\n}\n\n/* Chart-led surfaces keep supporting text in the native disclosure. */\n.tgc-figure-chart { max-width: none; margin: 0; }\n.tgc-figure-chart .tgc-wide svg { width: 100%; height: auto; }\n.tgc-wide:has(.tgc-vertical), .tgc-narrow:has(.tgc-vertical) { overflow-x: auto; }\n.tgc-vertical { width: 100%; }\n.tgc-narrow .tgc-vertical { max-width: none; }\n.tgc-column-hit { fill: transparent; stroke: transparent; stroke-width: 2; }\n.tgc-column:focus-visible { outline: none; }\n.tgc-column:focus-visible .tgc-column-hit { stroke: var(--chart-accent); }\n.tgc-vertical-bar { fill: var(--chart-accent); }\n/* Identity assets keep their approved colors on a white plate in either theme. */\n.tgc-logo-plate { fill: #fff; stroke: var(--chart-rule); }\n.tgc-column-tip { opacity: 0; pointer-events: none; }\n.tgc-tip-bg { fill: var(--chart-ink); }\n.tgc-tip-ink { fill: var(--chart-canvas); }\n\n.tgc-series-line { fill: none; stroke: var(--chart-accent); stroke-width: 2; stroke-linejoin: round; }\n.tgc-series-point { fill: var(--chart-accent); stroke: var(--chart-canvas); stroke-width: 1; }\n.tgc-series-hit { fill: transparent; stroke: transparent; }\n.tgc-series-observation:focus-visible { outline: none; }\n.tgc-series-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }\n.tgc-series-tip { opacity: 0; pointer-events: none; }\n\n.tgc-scalar-table { min-width: 620px; }\n.tgc-scalar-table tbody th { min-width: 180px; max-width: 260px; }\n\n/* Plot presentation keeps the same complete data available to assistive technology. */\n.tgc-accessible-data { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }\n.tgc-figure-plot .tgc-wide svg { box-sizing: content-box; width: calc(100% - 48px); padding: 0 24px; }\n.tgc-figure-plot svg text { font-size: 14px; }\n.tgc-figure-plot svg text.tgc-num { font-size: 15px; }\n/* Larger tooltip text needs padding outside the original report backdrop. */\n.tgc-figure-plot .tgc-tip-bg { stroke: var(--chart-ink); stroke-width: 24px; }\n.tgc-figure-plot .tgc-phone-plot svg { min-width: var(--tgc-phone-width); }\n.tgc-figure-plot .tgc-wide, .tgc-figure-plot .tgc-narrow { overflow-x: auto; }\n\n.tgc-figure-plot .tgc-wide-fallback svg { min-width: var(--tgc-fallback-width); }\n.tgc-phone-plot:focus-visible, .tgc-wide-fallback:focus-visible { outline: 2px solid var(--chart-accent); outline-offset: 2px; }\n";
+const figureCss = "/* @tangle-network/charts — figure block and mark styles.\n *\n * Every colour is a --chart-* token from @tangle-network/brand tokens.css, so a\n * figure follows the page theme. A standalone document without brand tokens\n * embeds `chartTokensCss` first. Fonts fall back to Inter and JetBrains Mono.\n *\n * Each figure carries a 720 px and a 358 px render. The swap follows the\n * figure's own width (a container query), so a narrow column shows the phone\n * render even on a wide screen. */\n\n.tgc-figure {\n  margin: 32px 0 0;\n  padding: 0;\n  max-width: 720px;\n  color: var(--chart-ink);\n  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n\n.tgc-finding {\n  margin: 0 0 8px;\n  font-size: 18px;\n  line-height: 25px;\n  font-weight: 650;\n  color: var(--chart-ink);\n}\n\n.tgc-noteref {\n  margin-left: 2px;\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--chart-ink-muted);\n  text-decoration: none;\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n}\n.tgc-noteref:hover,\n.tgc-noteref:focus-visible {\n  color: var(--chart-accent);\n  text-decoration: underline;\n}\n\n.tgc-lede {\n  margin: 0 0 16px;\n  font-size: 15px;\n  line-height: 23px;\n  color: var(--text-secondary, var(--chart-ink));\n}\n\n.tgc-plot {\n  container-type: inline-size;\n}\n.tgc-wide svg,\n.tgc-narrow svg {\n  display: block;\n  overflow: visible;\n}\n.tgc-narrow {\n  display: none;\n}\n.tgc-narrow svg {\n  max-width: 100%;\n  height: auto;\n}\n@container (max-width: 719.98px) {\n  .tgc-wide {\n    display: none;\n  }\n  .tgc-narrow {\n    display: block;\n  }\n}\n\n.tgc-read {\n  margin: 8px 0 0;\n  font-size: 13px;\n  line-height: 18px;\n  color: var(--chart-ink-muted);\n}\n\n.tgc-data {\n  margin: 8px 0 0;\n  font-size: 12px;\n  line-height: 16px;\n}\n.tgc-data > summary {\n  cursor: pointer;\n  color: var(--chart-ink-muted);\n  width: fit-content;\n}\n.tgc-data > summary:hover {\n  color: var(--chart-ink);\n}\n.tgc-data[open] > summary {\n  margin-bottom: 8px;\n}\n\n.tgc-scroll {\n  overflow-x: auto;\n}\n.tgc-scroll:focus-visible {\n  outline: 2px solid var(--chart-accent);\n  outline-offset: 2px;\n}\n\n.tgc-table {\n  border-collapse: collapse;\n  min-width: 100%;\n  font-size: 12px;\n  line-height: 16px;\n  color: var(--chart-ink);\n  /* A host page's table rules must not restyle the figure's table. */\n  border: 0;\n  border-radius: 0;\n  background: none;\n}\n.tgc-table caption {\n  text-align: left;\n  padding: 0 0 8px;\n  color: var(--chart-ink-muted);\n}\n.tgc-table th,\n.tgc-table td {\n  padding: 6px 12px 6px 0;\n  border-bottom: 1px solid var(--chart-rule);\n  text-align: left;\n  vertical-align: top;\n  font-weight: 400;\n  font-size: inherit;\n  color: inherit;\n  background: none;\n  text-transform: none;\n  letter-spacing: normal;\n}\n.tgc-table thead th {\n  color: var(--chart-ink-muted);\n  white-space: nowrap;\n}\n.tgc-table tbody th {\n  position: sticky;\n  left: 0;\n  background: var(--chart-canvas, var(--depth-1, transparent));\n}\n.tgc-table .tgc-n {\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.tgc-table thead .tgc-n {\n  font-family: inherit;\n}\n.tgc-table tbody tr:hover {\n  background: var(--chart-shade);\n}\n.tgc-narrow-table .tgc-table {\n  display: block;\n  overflow-x: auto;\n}\n\n.tgc-notes {\n  margin: 16px 0 0;\n  padding-left: 20px;\n  font-size: 12px;\n  line-height: 16px;\n  color: var(--chart-ink-muted);\n}\n.tgc-notes li {\n  margin: 0 0 8px;\n  padding-left: 4px;\n}\n.tgc-notes li:target {\n  color: var(--chart-ink);\n}\n.tgc-backlink {\n  color: var(--chart-ink-muted);\n  text-decoration: none;\n}\n\n.tgc-refusals {\n  margin: 8px 0 0;\n  padding-left: 20px;\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--chart-ink-muted);\n}\n\n/* Marks */\n.tgc-svg {\n  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n.tgc-svg .tgc-num {\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n  font-variant-numeric: tabular-nums;\n}\n.tgc-ink {\n  fill: var(--chart-ink);\n}\n.tgc-ink-muted {\n  fill: var(--chart-ink-muted);\n}\n.tgc-bar,\n.tgc-ci,\n.tgc-pt-front {\n  fill: var(--chart-accent);\n}\n.tgc-gridline {\n  stroke: var(--chart-grid);\n  stroke-width: 1;\n}\n.tgc-rule {\n  stroke: var(--chart-rule);\n  stroke-width: 1;\n}\n.tgc-axis,\n.tgc-zero {\n  stroke: var(--chart-muted);\n  stroke-width: 1;\n}\n.tgc-whisker,\n.tgc-tick {\n  stroke: var(--chart-ink);\n  stroke-width: 2;\n  stroke-linecap: round;\n}\n.tgc-threshold {\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-dasharray: 3 3;\n}\n.tgc-front-line {\n  fill: none;\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-linejoin: round;\n}\n.tgc-pt,\n.tgc-open {\n  fill: none;\n  stroke: var(--chart-muted);\n  stroke-width: 1.5;\n}\n.tgc-pt-est {\n  fill: none;\n  stroke: var(--chart-accent);\n  stroke-width: 2;\n}\n.tgc-pt-ci,\n.tgc-strike {\n  stroke: var(--chart-muted);\n  stroke-width: 1.5;\n}\n.tgc-leader {\n  stroke: var(--chart-muted);\n  stroke-width: 1;\n}\n.tgc-ci-exact,\n.tgc-dot {\n  fill: var(--chart-muted);\n}\n.tgc-dashed {\n  stroke-dasharray: 2 2;\n}\n.tgc-tier-c {\n  fill: var(--chart-tier-c);\n}\n.tgc-tier-b {\n  fill: var(--chart-tier-b);\n}\n.tgc-tier-a {\n  fill: var(--chart-tier-a);\n}\n.tgc-tier-s {\n  fill: var(--chart-tier-s);\n}\n/* Neutral tint for counts: never the accent, capped at half strength so ink keeps 6:1. */\n.tgc-tint {\n  fill: color-mix(in srgb, var(--chart-muted) calc(var(--s, 0) * 50%), transparent);\n}\n\n@media print {\n  .tgc-plot {\n    container-type: normal;\n  }\n  .tgc-wide {\n    display: block;\n  }\n  .tgc-narrow {\n    display: none;\n  }\n  .tgc-wide svg {\n    width: 100%;\n    height: auto;\n  }\n  .tgc-figure {\n    break-inside: avoid;\n  }\n}\n\n/* Chart-led surfaces keep supporting text in the native disclosure. */\n.tgc-figure-chart { max-width: none; margin: 0; }\n.tgc-figure-chart .tgc-wide svg { width: 100%; height: auto; }\n.tgc-wide:has(.tgc-vertical), .tgc-narrow:has(.tgc-vertical) { overflow-x: auto; }\n.tgc-vertical { width: 100%; }\n.tgc-narrow .tgc-vertical { max-width: none; }\n.tgc-column-hit { fill: transparent; stroke: transparent; stroke-width: 2; }\n.tgc-column:focus-visible { outline: none; }\n.tgc-column:focus-visible .tgc-column-hit { stroke: var(--chart-accent); }\n.tgc-vertical-bar { fill: var(--chart-accent); }\n/* Identity assets keep their approved colors on a white plate in either theme. */\n.tgc-logo-plate { fill: #fff; stroke: var(--chart-rule); }\n.tgc-column-tip { opacity: 0; pointer-events: none; }\n.tgc-tip-bg { fill: var(--chart-ink); }\n.tgc-tip-ink { fill: var(--chart-canvas); }\n\n.tgc-series-line { fill: none; stroke: var(--chart-accent); stroke-width: 2; stroke-linejoin: round; }\n.tgc-series-point, .tgc-series-key { fill: var(--chart-accent); stroke: var(--chart-canvas); stroke-width: 2; }\n\n/* Semantic states stay tied to Brand status tokens. No-data has its own neutral mark. */\n.tgc-heat-pass { fill: color-mix(in srgb, var(--chart-pass, var(--status-running)) 19%, var(--chart-canvas)); stroke: var(--chart-pass, var(--status-running)); stroke-width: .8; }\n.tgc-heat-breach { fill: color-mix(in srgb, var(--chart-breach, var(--status-error)) 17%, var(--chart-canvas)); stroke: var(--chart-breach, var(--status-error)); stroke-width: .8; }\n.tgc-heat-no-data { fill: var(--chart-grid); stroke: var(--chart-rule); stroke-width: .8; }\n.tgc-heat-label { fill: var(--chart-ink); }\n.tgc-heat-missing { fill: var(--chart-ink-muted); }\n.tgc-wide:has(.tgc-heat-pass), .tgc-wide:has(.tgc-heat-breach) { overflow-x: auto; }\n.tgc-range-pass { fill: var(--chart-pass, var(--status-running)); }\n.tgc-range-breach { fill: var(--chart-breach, var(--status-error)); }\n.tgc-range-dot-pass { fill: var(--chart-canvas); stroke: var(--chart-pass, var(--status-running)); stroke-width: 3; }\n.tgc-range-dot-breach { fill: var(--chart-canvas); stroke: var(--chart-breach, var(--status-error)); stroke-width: 3; }\n.tgc-waterfall-bar { fill: var(--chart-accent); }\n.tgc-series-hit { fill: transparent; stroke: transparent; }\n.tgc-series-observation:focus-visible { outline: none; }\n.tgc-series-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }\n.tgc-series-tip { opacity: 0; pointer-events: none; }\n\n.tgc-scalar-table { min-width: 620px; }\n.tgc-scalar-table tbody th { min-width: 180px; max-width: 260px; }\n\n/* Plot presentation keeps the same complete data available to assistive technology. */\n.tgc-accessible-data { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }\n.tgc-figure-plot .tgc-wide svg { box-sizing: content-box; width: calc(100% - 48px); padding: 0 24px; }\n.tgc-figure-plot svg text { font-size: 14px; }\n.tgc-figure-plot svg text.tgc-num { font-size: 15px; }\n/* Larger tooltip text needs padding outside the original report backdrop. */\n.tgc-figure-plot .tgc-tip-bg { stroke: var(--chart-ink); stroke-width: 24px; }\n.tgc-figure-plot .tgc-phone-plot svg { min-width: var(--tgc-phone-width); }\n.tgc-figure-plot .tgc-wide, .tgc-figure-plot .tgc-narrow { overflow-x: auto; }\n\n.tgc-figure-plot .tgc-wide-fallback svg { min-width: var(--tgc-fallback-width); }\n.tgc-phone-plot:focus-visible, .tgc-wide-fallback:focus-visible { outline: 2px solid var(--chart-accent); outline-offset: 2px; }\n\n/* Recorded events and spans. Kinds differ by stroke pattern as well as token, so they read without colour. */\n.tgc-mark { stroke-width: 1.5; }\n.tgc-mark-pass { stroke: var(--chart-pass, var(--status-running)); }\n.tgc-mark-deadline { stroke: var(--chart-ink); stroke-dasharray: 5 3; }\n.tgc-mark-died { stroke: var(--chart-breach, var(--status-error)); stroke-width: 2; }\n.tgc-mark-event { stroke: var(--chart-ink-muted); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-label { fill: var(--chart-ink); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n.tgc-band-after-pass { fill: color-mix(in srgb, var(--chart-pass, var(--status-running)) 12%, transparent); }\n.tgc-band-idle { fill: var(--chart-shade); }\n/* Missing data: a neutral wash under hatch lines, never a zero-height mark. */\n.tgc-hatch-bg { fill: color-mix(in srgb, var(--chart-muted) 10%, transparent); }\n.tgc-hatch { fill: none; stroke: var(--chart-muted); stroke-width: 1; }\n.tgc-span { fill: var(--chart-accent); }\n.tgc-span-muted { fill: var(--chart-muted); }\n.tgc-span-open { stroke: var(--chart-ink); stroke-width: 1.5; stroke-dasharray: 3 2; }\n.tgc-now { stroke: var(--chart-ink); stroke-width: 1.5; }\n\n/* FigureView (React) picks the render by measured width; the wide plot fills its container. */\n.tgc-figure-view { max-width: none; margin: 0; }\n.tgc-view-plot svg { display: block; overflow: visible; }\n.tgc-view-wide svg { width: 100%; height: auto; }\n.tgc-view-narrow svg { max-width: 100%; height: auto; }\n";
 /** --chart-* resolved per theme, for documents without brand tokens: light, dark by preference or [data-theme="dark"], light in print. */
-const chartTokensCss = ":root{--chart-ink:#2d2d2d;--chart-ink-muted:#686868;--chart-muted:#787878;--chart-grid:#f1f2f7;--chart-rule:#c7c6d6;--chart-shade:rgba(76, 63, 198, 0.06);--chart-accent:hsl(246 54% 51%);--chart-tier-c:#9b9ef0;--chart-tier-b:#7c7fe3;--chart-tier-a:#5b5bd6;--chart-tier-s:#272962;--chart-canvas:#ffffff;color-scheme:light}\n@media (prefers-color-scheme: dark){:root:not([data-theme=\"light\"]){--chart-ink:#e6e6e6;--chart-ink-muted:#a5a5a5;--chart-muted:#8e8e8e;--chart-grid:#221f33;--chart-rule:#2a293d;--chart-shade:rgba(165, 180, 252, 0.07);--chart-accent:#818CF8;--chart-tier-c:#4a4a95;--chart-tier-b:#5b5bd6;--chart-tier-a:#8b87f0;--chart-tier-s:#b1a9ff;--chart-canvas:#0a0a14;color-scheme:dark}}\n:root[data-theme=\"dark\"]{--chart-ink:#e6e6e6;--chart-ink-muted:#a5a5a5;--chart-muted:#8e8e8e;--chart-grid:#221f33;--chart-rule:#2a293d;--chart-shade:rgba(165, 180, 252, 0.07);--chart-accent:#818CF8;--chart-tier-c:#4a4a95;--chart-tier-b:#5b5bd6;--chart-tier-a:#8b87f0;--chart-tier-s:#b1a9ff;--chart-canvas:#0a0a14;color-scheme:dark}\n@media print{:root,:root:not([data-theme=\"light\"]),:root[data-theme=\"dark\"]{--chart-ink:#2d2d2d;--chart-ink-muted:#686868;--chart-muted:#787878;--chart-grid:#f1f2f7;--chart-rule:#c7c6d6;--chart-shade:rgba(76, 63, 198, 0.06);--chart-accent:hsl(246 54% 51%);--chart-tier-c:#9b9ef0;--chart-tier-b:#7c7fe3;--chart-tier-a:#5b5bd6;--chart-tier-s:#272962;--chart-canvas:#ffffff;color-scheme:light}}";
+const chartTokensCss = ":root{--chart-ink:#2d2d2d;--chart-ink-muted:#686868;--chart-muted:#787878;--chart-grid:#f1f2f7;--chart-rule:#c7c6d6;--chart-shade:rgba(76, 63, 198, 0.06);--chart-accent:hsl(246 54% 51%);--chart-tier-c:#9b9ef0;--chart-tier-b:#7c7fe3;--chart-tier-a:#5b5bd6;--chart-tier-s:#272962;--chart-pass:#059669;--chart-breach:#ba1a1a;--chart-canvas:#ffffff;color-scheme:light}\n@media (prefers-color-scheme: dark){:root:not([data-theme=\"light\"]){--chart-ink:#e6e6e6;--chart-ink-muted:#a5a5a5;--chart-muted:#8e8e8e;--chart-grid:#221f33;--chart-rule:#2a293d;--chart-shade:rgba(165, 180, 252, 0.07);--chart-accent:#818CF8;--chart-tier-c:#4a4a95;--chart-tier-b:#5b5bd6;--chart-tier-a:#8b87f0;--chart-tier-s:#b1a9ff;--chart-pass:#10B981;--chart-breach:#FF4D6D;--chart-canvas:#0a0a14;color-scheme:dark}}\n:root[data-theme=\"dark\"]{--chart-ink:#e6e6e6;--chart-ink-muted:#a5a5a5;--chart-muted:#8e8e8e;--chart-grid:#221f33;--chart-rule:#2a293d;--chart-shade:rgba(165, 180, 252, 0.07);--chart-accent:#818CF8;--chart-tier-c:#4a4a95;--chart-tier-b:#5b5bd6;--chart-tier-a:#8b87f0;--chart-tier-s:#b1a9ff;--chart-pass:#10B981;--chart-breach:#FF4D6D;--chart-canvas:#0a0a14;color-scheme:dark}\n@media print{:root,:root:not([data-theme=\"light\"]),:root[data-theme=\"dark\"]{--chart-ink:#2d2d2d;--chart-ink-muted:#686868;--chart-muted:#787878;--chart-grid:#f1f2f7;--chart-rule:#c7c6d6;--chart-shade:rgba(76, 63, 198, 0.06);--chart-accent:hsl(246 54% 51%);--chart-tier-c:#9b9ef0;--chart-tier-b:#7c7fe3;--chart-tier-a:#5b5bd6;--chart-tier-s:#272962;--chart-pass:#059669;--chart-breach:#ba1a1a;--chart-canvas:#ffffff;color-scheme:light}}";
 //#endregion
 //#region src/vertical-columns.ts
 function image(mark, x, y, size) {
@@ -1731,12 +1728,13 @@ function narrow(rows, layout, o) {
 			marks += barMarks(row, x0, x1, cy, o);
 			cy += row.tiers ? 30 : 20;
 		}
-		const factLines = fitLines([
+		const facts = [
 			`${kn(row.solved, row.attempts)} passed`,
 			...drawable(row.estimate) ? [] : [estimateNote(row.estimate, row.attempts)],
 			...layout.cost && !(row.solved === 0 && perPass(row.cost) === null) ? [perPass(row.cost) === null ? "cost unknown" : `${costText(row.cost, row.solved)} per pass`] : [],
 			...layout.median ? [row.medianWallMs === null ? "run time unknown" : `${duration(row.medianWallMs)} run`] : []
-		], 358, 12, "mono");
+		];
+		const factLines = fitLines(facts, 358, 12, "mono");
 		marks += textBlock(factLines, 0, cy + 12, 16, `class="tgc-ink-muted tgc-num" font-size="12"`);
 		body += titled(hoverText(row), marks);
 		y = cy + factLines.length * 16 + 4;
@@ -2187,11 +2185,6 @@ function narrowMatrix(tasks, setups, at, means, kinds, o, scaleMax) {
 	return svgRoot(358, y + lg.h + 4, body + lg.svg);
 }
 //#endregion
-//#region src/types.ts
-function isRefusal(value) {
-	return "refused" in value;
-}
-//#endregion
 //#region src/scalar.ts
 /** Validation and display of recorded scalar observations; no statistics are computed here. */
 function domainGap(domain) {
@@ -2320,6 +2313,11 @@ function timeSeries(rows, o) {
 		id,
 		refused: gap
 	};
+	const events = eventsGap(o.marks, o.bands, o.x.domain);
+	if (events) return {
+		id,
+		refused: events
+	};
 	if (!rows.length || rows.every((row) => !row.points.length)) return {
 		id,
 		refused: "No trajectory observations recorded."
@@ -2354,6 +2352,8 @@ function timeSeries(rows, o) {
 		point
 	})));
 	const measured = flat.filter(({ point }) => point.y !== null);
+	const marks = o.marks ?? [], bands = o.bands ?? [];
+	const hasEvents = marks.length + bands.length > 0;
 	const facts = (row, point) => [
 		row.label,
 		`${o.x.label}: ${xLabel(point.x)}`,
@@ -2366,7 +2366,7 @@ function timeSeries(rows, o) {
 		id,
 		finding: `${capitalize(o.y.label)} by ${o.x.label}.`,
 		lede: `${measured.length} of ${flat.length} positions have a recorded value.`,
-		read: "Points show recorded values. Lines connect adjacent measured positions; missing positions break the line. Whiskers show recorded intervals.",
+		read: `Points show recorded values. Lines connect adjacent measured positions; missing positions break the line. Whiskers show recorded intervals.${hasEvents ? ` ${EVENTS_READ}` : ""}`,
 		svg: {
 			wide: plot(rows, o, 720, xLabel, yLabel, facts),
 			narrow: plot(rows, o, 358, xLabel, yLabel, facts),
@@ -2392,11 +2392,11 @@ function timeSeries(rows, o) {
 			observationLabel(point.observations),
 			scalarIntervalLabel(point.interval, o.y.unit, o.formatY),
 			point.annotation ?? ""
-		])).replace("class=\"tgc-table\"", "class=\"tgc-table tgc-scalar-table\""),
+		])).replace("class=\"tgc-table\"", "class=\"tgc-table tgc-scalar-table\"") + eventsTable(marks, bands, o.x.label, xLabel),
 		note: {
 			method: "Recorded scalar observations. Missing positions are not interpolated; no uncertainty or statistical comparison is inferred.",
 			n: "Observation counts are recorded separately at each position.",
-			exclusions: flat.filter(({ point }) => point.y === null).map(({ row, point }) => `${row.label}, ${o.x.label} ${xLabel(point.x)}: not measured.`)
+			exclusions: [...flat.filter(({ point }) => point.y === null).map(({ row, point }) => `${row.label}, ${o.x.label} ${xLabel(point.x)}: not measured.`), ...bands.filter((band) => band.kind === "missing").map((band) => `${band.label}: no data from ${o.x.label} ${xLabel(band.from)} to ${xLabel(band.to)}.`)]
 		}
 	};
 }
@@ -2422,6 +2422,7 @@ function plot(rows, o, width, xLabel, yLabel, facts) {
 		anchor: "middle",
 		cls: "tgc-ink-muted"
 	});
+	marks += drawBands(o.bands ?? [], px, top, bottom, xLabel);
 	let legendY = 332;
 	let points = "", tips = "", rules = "";
 	let pointId = 0;
@@ -2441,7 +2442,7 @@ function plot(rows, o, width, xLabel, yLabel, facts) {
 			segment.push([x, y]);
 			const pointFacts = facts(row, point);
 			const key = pointId++;
-			let dot = circle(x, y, 10, "tgc-series-hit") + circle(x, y, 3.5, "tgc-series-point");
+			let dot = circle(x, y, 10, "tgc-series-hit") + (seriesIndex === 0 ? circle(x, y, 3.5, "tgc-series-point") : `<path class="tgc-series-point" d="${markerPath(MARKER_SHAPES[seriesIndex % MARKER_SHAPES.length], x, y, 3.5)}"/>`);
 			if (point.interval) dot += line(x, py(point.interval.lower), x, py(point.interval.upper), "tgc-whisker") + line(x - 4, py(point.interval.lower), x + 4, py(point.interval.lower), "tgc-whisker") + line(x - 4, py(point.interval.upper), x + 4, py(point.interval.upper), "tgc-whisker");
 			points += `<g class="tgc-series-observation" data-point="${key}" tabindex="0" role="img" aria-label="${esc(pointFacts.join(" · "))}"><title>${esc(pointFacts.join(" · "))}</title>${dot}</g>`;
 			const tipWidth = Math.min(280, width - 24), tipX = Math.max(12, Math.min(width - tipWidth - 12, x - tipWidth / 2));
@@ -2451,13 +2452,376 @@ function plot(rows, o, width, xLabel, yLabel, facts) {
 		}
 		flush();
 		const label = wrap(row.label, right - left - 32, 12, "sans", 8);
-		marks += `<g style="stroke-dasharray:${dash}">${line(left, legendY - 4, left + 24, legendY - 4, "tgc-series-line")}</g>` + textBlock(label.lines, left + 32, legendY, 16, "class=\"tgc-ink\" font-size=\"12\"");
+		marks += `<g style="stroke-dasharray:${dash}">${line(left, legendY - 4, left + 24, legendY - 4, "tgc-series-line")}</g>` + (rows.length > 1 ? `<path class="tgc-series-key" d="${markerPath(MARKER_SHAPES[seriesIndex % MARKER_SHAPES.length], left + 12, legendY - 4, 3.5)}"/>` : "") + textBlock(label.lines, left + 32, legendY, 16, "class=\"tgc-ink\" font-size=\"12\"");
 		legendY += label.lines.length * 16 + 8;
 	}
-	return `<svg class="tgc-svg tgc-trajectories" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${legendY + 12}" viewBox="0 0 ${width} ${legendY + 12}" role="group" aria-label="${esc(o.y.label)} by ${esc(o.x.label)}"><style>${rules}</style>${marks}${points}${tips}</svg>`;
+	const events = drawMarks(o.marks ?? [], px, top, bottom, left, right, xLabel);
+	return `<svg class="tgc-svg tgc-trajectories" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${legendY + 12}" viewBox="0 0 ${width} ${legendY + 12}" role="group" aria-label="${esc(o.y.label)} by ${esc(o.x.label)}"><style>${rules}</style>${marks}${events}${points}${tips}</svg>`;
 }
 function axisGutter(ticks, label) {
 	return Math.max(64, ...ticks.map((value) => Math.ceil(textWidth(label(value), 12, "mono")) + 20));
 }
 //#endregion
-export { breakdown, chartTokensCss, comparisonIntervals, costFrontier, figureCss, isRefusal, metricBars, rankedRates, rateOrder, renderFigure, renderNotes, renderRefusals, taskMatrix, timeSeries };
+//#region src/timeline.ts
+/** Lanes of recorded spans on one time axis, with recorded marks; an open span runs to the supplied `now`. */
+const utcClock = (ms) => new Date(ms).toISOString().slice(11, 16);
+function timeline(lanes, o) {
+	const id = o.id ?? "timeline";
+	if (!lanes.length) return {
+		id,
+		refused: "No lanes recorded."
+	};
+	if (!o.measure?.trim()) return {
+		id,
+		refused: "A timeline needs a measure."
+	};
+	if (new Set(lanes.map((lane) => lane.id)).size !== lanes.length) return {
+		id,
+		refused: "Duplicate lane ids."
+	};
+	if (o.now !== void 0 && !Number.isFinite(o.now)) return {
+		id,
+		refused: "now must be a finite time."
+	};
+	const spans = lanes.flatMap((lane) => lane.spans.map((span) => ({
+		lane,
+		span
+	})));
+	for (const { lane, span } of spans) {
+		if (typeof span.state !== "string" || !span.state.trim()) return {
+			id,
+			refused: `${lane.label}: every span needs a state.`
+		};
+		if (!Number.isFinite(span.start) || span.end !== null && (!Number.isFinite(span.end) || span.end < span.start)) return {
+			id,
+			refused: `${lane.label}: span times must be finite and end at or after their start.`
+		};
+		if (span.end === null && o.now === void 0) return {
+			id,
+			refused: `${lane.label}: an open span needs now.`
+		};
+		if (span.end === null && o.now < span.start) return {
+			id,
+			refused: `${lane.label}: an open span starts after now.`
+		};
+	}
+	const shape = eventsGap(o.marks, o.bands);
+	if (shape) return {
+		id,
+		refused: shape
+	};
+	const marks = o.marks ?? [], bands = o.bands ?? [];
+	const ends = (span) => span.end ?? o.now;
+	const times = [
+		...spans.flatMap(({ span }) => [span.start, ends(span)]),
+		...marks.map((m) => m.at),
+		...bands.flatMap((b) => [b.from, b.to]),
+		...o.now === void 0 ? [] : [o.now]
+	];
+	if (!times.length) return {
+		id,
+		refused: "No spans, marks or bands recorded."
+	};
+	const t0 = o.start ?? Math.min(...times), t1 = o.end ?? Math.max(...times);
+	if (!Number.isFinite(t0) || !Number.isFinite(t1) || t1 <= t0) return {
+		id,
+		refused: "The window needs two finite, increasing times."
+	};
+	if (times.some((t) => t < t0 || t > t1)) return {
+		id,
+		refused: "A span, mark, band or now falls outside the recorded window."
+	};
+	const fmt = o.formatTime ?? utcClock;
+	const hatched = new Set(o.hatch ?? ["missing", "untraced"]), muted = new Set(o.muted ?? ["idle"]);
+	const open = spans.filter(({ span }) => span.end === null).length;
+	const noData = spans.filter(({ span }) => hatched.has(span.state));
+	const noDataMs = noData.reduce((sum, { span }) => sum + ends(span) - span.start, 0);
+	const spanLabel = (lane, span) => `${lane.label}: ${span.state} ${fmt(span.start)} to ${span.end === null ? `now (${fmt(o.now)}, open)` : fmt(span.end)}, ${duration(ends(span) - span.start)}${span.note ? ` · ${span.note}` : ""}`;
+	const draw = (width) => {
+		const phone = width === 358, left = phone ? 12 : 150, right = width - 16;
+		const top = marks.length ? 8 + Math.min(3, marks.length) * 14 + 4 : 8;
+		const rowH = phone ? 38 : 24, bottom = top + lanes.length * rowH;
+		const px = (t) => left + (t - t0) / (t1 - t0) * (right - left);
+		let body = drawBands(bands, px, top, bottom, fmt);
+		for (let i = 0; i <= 4; i++) {
+			const x = left + (right - left) * i / 4;
+			body += line(x, top, x, bottom, "tgc-gridline") + text(x, bottom + 16, fmt(t0 + (t1 - t0) * i / 4), {
+				size: 11,
+				cls: "tgc-ink-muted tgc-num",
+				anchor: i === 0 ? "start" : i === 4 ? "end" : "middle"
+			});
+		}
+		lanes.forEach((lane, i) => {
+			const y = top + i * rowH;
+			const label = wrap(lane.label, phone ? width - 24 : left - 10, phone ? 11 : 12, "sans", 1);
+			body += titled(lane.label, text(phone ? 12 : 2, y + (phone ? 12 : 16), label.lines[0], { size: phone ? 11 : 12 }));
+			const barY = y + (phone ? 18 : 5), barH = phone ? 14 : 14;
+			for (const span of lane.spans) {
+				const x = px(span.start), w = Math.max(1, px(ends(span)) - x);
+				const mark = hatched.has(span.state) ? hatch(x, barY, w, barH, "tgc-span tgc-span-missing") : rect(x, barY, w, barH, `tgc-span${muted.has(span.state) ? " tgc-span-muted" : ""}${span.end === null ? " tgc-span-open" : ""}`, "rx=\"2\"");
+				body += titled(spanLabel(lane, span), `<g data-state="${span.state.replace(/[^a-z0-9-]/gi, "")}"${span.end === null ? " data-open=\"true\"" : ""}>${mark}</g>`);
+			}
+		});
+		if (o.now !== void 0) body += line(px(o.now), top, px(o.now), bottom, "tgc-now") + text(px(o.now), bottom + 30, `now ${fmt(o.now)}`, {
+			size: 11,
+			cls: "tgc-ink tgc-num",
+			anchor: px(o.now) > (left + right) / 2 ? "end" : "start"
+		});
+		body += drawMarks(marks, px, 4, bottom, left, right, fmt);
+		return svgRoot(width, bottom + (o.now === void 0 ? 22 : 36), body);
+	};
+	return {
+		id,
+		finding: `${capitalize(o.measure)} across ${lanes.length} ${plural(lanes.length, "lane")}, ${fmt(t0)} to ${fmt(t1)}.`,
+		lede: `${spans.length} recorded ${plural(spans.length, "span")}; ${open} open${o.now === void 0 ? "" : ` at ${fmt(o.now)}`}; ${noData.length} without data (${duration(noDataMs)}).`,
+		read: `Each lane shows its recorded spans on one time axis. Muted spans are ${[...muted].join(", ") || "none"}; hatched spans have no data; an open span runs to now.${marks.length + bands.length ? ` ${EVENTS_READ}` : ""}`,
+		svg: {
+			wide: draw(720),
+			narrow: draw(358)
+		},
+		table: table(`${capitalize(o.measure)} by lane`, [
+			{ label: "Lane" },
+			{ label: "State" },
+			{
+				label: "Start",
+				numeric: true
+			},
+			{
+				label: "End",
+				numeric: true
+			},
+			{
+				label: "Duration",
+				numeric: true
+			},
+			{ label: "Note" }
+		], spans.map(({ lane, span }) => [
+			lane.label,
+			span.state,
+			fmt(span.start),
+			span.end === null ? "open" : fmt(span.end),
+			duration(ends(span) - span.start),
+			span.note ?? ""
+		])) + eventsTable(marks, bands, "time", fmt),
+		note: {
+			method: "Recorded span start and end times as supplied by the producer; open spans are drawn to the supplied now. No span is inferred, merged or reordered.",
+			n: `${spans.length} spans in ${lanes.length} lanes.`,
+			exclusions: noData.map(({ lane, span }) => `${lane.label}: ${span.state} ${fmt(span.start)} to ${span.end === null ? "now" : fmt(span.end)} has no data.`)
+		}
+	};
+}
+//#endregion
+//#region src/small-multiples.ts
+/**
+* One small trajectory per arm on shared axes. A panel without data is a
+* hatched "no data: <reason>" panel, never a zero line; a panel that stopped
+* early ends at its recorded end mark.
+*/
+function smallMultiples(panels, o) {
+	const id = o.id ?? "small-multiples";
+	if (o.shared !== "both" && o.shared !== "x") return {
+		id,
+		refused: "Small multiples need shared axes: both or x."
+	};
+	const axis = domainGap(o.x.domain) ?? domainGap(o.y.domain);
+	if (axis) return {
+		id,
+		refused: axis
+	};
+	if (!o.y.unit?.trim()) return {
+		id,
+		refused: "Small multiples need a y unit."
+	};
+	if (!panels.length) return {
+		id,
+		refused: "No panels recorded."
+	};
+	if (new Set(panels.map((p) => p.id)).size !== panels.length) return {
+		id,
+		refused: "Duplicate panel ids."
+	};
+	for (const panel of panels) {
+		if (panel.unit !== void 0 && panel.unit !== o.y.unit) return {
+			id,
+			refused: `Mixed units: ${panel.label} records ${panel.unit}, the figure draws ${o.y.unit}.`
+		};
+		if (panel.missing) {
+			if (!panel.missing.why?.trim()) return {
+				id,
+				refused: `${panel.label}: a missing panel needs its reason.`
+			};
+			if (panel.points?.length || panel.end) return {
+				id,
+				refused: `${panel.label}: a missing panel cannot also carry points or an end.`
+			};
+			continue;
+		}
+		if (!panel.points?.length) return {
+			id,
+			refused: `${panel.label}: a panel needs points or a missing reason.`
+		};
+		const domain = domainOf(panel, o);
+		if (!domain) return {
+			id,
+			refused: `${panel.label}: an x-only shared figure needs each panel's y domain.`
+		};
+		const own = domainGap(domain);
+		if (own) return {
+			id,
+			refused: `${panel.label}: ${own}`
+		};
+		let previous = -Infinity;
+		for (const point of panel.points) {
+			if (!Number.isFinite(point.x) || point.x <= previous || point.x < o.x.domain[0] || point.x > o.x.domain[1]) return {
+				id,
+				refused: `${panel.label}: x values must be finite, strictly increasing and inside the shared domain.`
+			};
+			previous = point.x;
+			const problem = scalarGap(point.y, point.interval, point.observations, domain);
+			if (problem) return {
+				id,
+				refused: `${panel.label} at ${point.x}: ${problem}`
+			};
+		}
+		if (panel.end) {
+			const endGap = eventsGap([{
+				at: panel.end.at,
+				kind: panel.end.kind,
+				label: panel.end.label ?? panel.end.kind
+			}], [], o.x.domain);
+			if (endGap) return {
+				id,
+				refused: `${panel.label}: ${endGap}`
+			};
+			if (previous > panel.end.at) return {
+				id,
+				refused: `${panel.label}: points are recorded after the panel's end.`
+			};
+		}
+		const markGap = eventsGap(panel.marks, [], o.x.domain);
+		if (markGap) return {
+			id,
+			refused: `${panel.label}: ${markGap}`
+		};
+	}
+	const noun = o.noun?.trim() || "panel";
+	const xLabel = (x) => o.formatX ? o.formatX(x) : String(x);
+	const yLabel = (y) => scalarLabel(y, o.y.unit, o.formatY);
+	const withData = panels.filter((p) => !p.missing), ended = withData.filter((p) => p.end);
+	const marksOf = (p) => [...p.marks ?? [], ...p.end ? [{
+		at: p.end.at,
+		kind: p.end.kind,
+		label: p.end.label ?? p.end.kind
+	}] : []];
+	const rows = panels.flatMap((p) => p.missing ? [[
+		p.label,
+		"",
+		`no data: ${p.missing.why}`,
+		p.missing.detail ?? ""
+	]] : p.points.map((pt) => [
+		p.label,
+		xLabel(pt.x),
+		pt.y === null ? "not measured" : yLabel(pt.y),
+		observationLabel(pt.observations)
+	]));
+	const events = panels.flatMap((p) => marksOf(p).map((m) => ({
+		...m,
+		label: `${p.label}: ${m.label}`
+	})));
+	return {
+		id,
+		finding: `${capitalize(o.y.label)} by ${o.x.label}, one panel per ${noun}, on ${o.shared === "both" ? "shared axes" : "a shared x axis"}.`,
+		lede: `${withData.length} of ${panels.length} ${plural(panels.length, noun)} have data${ended.length ? `; ${ended.length} ended before the window closed` : ""}.`,
+		read: `Each panel is one ${noun} on ${o.shared === "both" ? "the same x and y axes" : "the same x axis; y axes differ per panel"}. Hatched panels have no data and name the reason. A vertical rule with a cross marks where a line ended.`,
+		svg: {
+			wide: draw(panels, o, 720, xLabel, yLabel, marksOf),
+			narrow: draw(panels, o, 358, xLabel, yLabel, marksOf)
+		},
+		table: table(`${capitalize(o.y.label)} by ${o.x.label} and ${noun}`, [
+			{ label: capitalize(noun) },
+			{
+				label: o.x.label,
+				numeric: true
+			},
+			{
+				label: o.y.label,
+				numeric: true
+			},
+			{ label: "Observations or detail" }
+		], rows) + eventsTable(events, [], o.x.label, xLabel),
+		note: {
+			method: "Recorded values per panel on explicit axis domains. Missing panels and positions are not interpolated or drawn as zero; no ranking is made.",
+			n: `${withData.length} of ${panels.length} ${plural(panels.length, noun)} with data.`,
+			exclusions: [...panels.filter((p) => p.missing).map((p) => `${p.label}: no data: ${p.missing.why}${p.missing.detail ? ` (${p.missing.detail})` : ""}.`), ...ended.map((p) => `${p.label}: ${p.end.label ?? p.end.kind} at ${o.x.label} ${xLabel(p.end.at)}.`)]
+		}
+	};
+}
+function domainOf(panel, o) {
+	return o.shared === "both" ? o.y.domain : panel.domain ?? null;
+}
+function draw(panels, o, width, xLabel, yLabel, marksOf) {
+	const cols = width === 358 ? 1 : Math.min(3, panels.length), gap = 16;
+	const panelW = (width - gap * (cols - 1)) / cols, panelH = width === 358 ? 150 : 170;
+	let body = "";
+	panels.forEach((panel, i) => {
+		const ox = i % cols * (panelW + gap), oy = Math.floor(i / cols) * (panelH + gap);
+		const domain = domainOf(panel, o) ?? o.y.domain;
+		const left = ox + Math.max(...[domain[0], domain[1]].map((v) => Math.ceil(textWidth(yLabel(v), 10, "mono")) + 10), 40), right = ox + panelW - 6;
+		const top = oy + 40, bottom = oy + panelH - 24;
+		const px = (x) => left + (x - o.x.domain[0]) / (o.x.domain[1] - o.x.domain[0]) * (right - left);
+		const py = (y) => bottom - (y - domain[0]) / (domain[1] - domain[0]) * (bottom - top);
+		const name = wrap(panel.label, panelW - 4, 12, "sans-semibold", 1);
+		body += titled(panel.label, text(ox + 2, oy + 14, name.lines[0], {
+			size: 12,
+			weight: 600
+		}));
+		if (panel.missing) {
+			body += `<g data-panel="${esc(panel.id)}" data-missing="true">${hatch(ox, top - 12, panelW, bottom - top + 12, "tgc-panel-missing")}`;
+			const why = wrap(`no data: ${panel.missing.why}`, panelW - 24, 12, "sans", 3);
+			body += titled(`${panel.label}: no data: ${panel.missing.why}${panel.missing.detail ? ` (${panel.missing.detail})` : ""}`, textBlock(why.lines, ox + panelW / 2, (top + bottom) / 2 - (why.lines.length - 1) * 8, 16, "class=\"tgc-mark-label\" font-size=\"12\" text-anchor=\"middle\""));
+			body += "</g>";
+			return;
+		}
+		body += `<g data-panel="${esc(panel.id)}">`;
+		for (const [j, y] of [
+			domain[0],
+			(domain[0] + domain[1]) / 2,
+			domain[1]
+		].entries()) {
+			body += line(left, py(y), right, py(y), j === 0 ? "tgc-axis" : "tgc-gridline");
+			if (j !== 1) body += text(left - 6, py(y) + 4, yLabel(y), {
+				size: 10,
+				anchor: "end",
+				cls: "tgc-ink-muted tgc-num"
+			});
+		}
+		body += text(left, bottom + 16, xLabel(o.x.domain[0]), {
+			size: 10,
+			cls: "tgc-ink-muted tgc-num"
+		}) + text(right, bottom + 16, xLabel(o.x.domain[1]), {
+			size: 10,
+			anchor: "end",
+			cls: "tgc-ink-muted tgc-num"
+		});
+		let segment = [];
+		const flush = () => {
+			if (segment.length > 1) body += polyline(segment, "tgc-series-line");
+			segment = [];
+		};
+		for (const point of panel.points) {
+			if (point.y === null) {
+				flush();
+				continue;
+			}
+			segment.push([px(point.x), py(point.y)]);
+			body += titled(`${panel.label} · ${o.x.label} ${xLabel(point.x)} · ${yLabel(point.y)} · ${observationLabel(point.observations)}`, circle(px(point.x), py(point.y), 2.5, "tgc-series-point"));
+		}
+		flush();
+		body += drawMarks(marksOf(panel), px, top - 12, bottom, left, right, xLabel);
+		body += "</g>";
+	});
+	const rows = Math.ceil(panels.length / cols);
+	return svgRoot(width, rows * panelH + (rows - 1) * gap, body);
+}
+//#endregion
+export { breakdown, chartTokensCss, comparisonIntervals, costFrontier, figureCss, heatmap, isRefusal, latencyRange, metricBars, phaseWaterfall, rankedRates, rateOrder, renderFigure, renderNotes, renderRefusals, smallMultiples, taskMatrix, timeSeries, timeline };