@tangle-network/charts 0.7.0 → 0.9.0

package/dist/timeline-BAwebuqb.js

@@ -0,0 +1,1185 @@
+//#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}` : ""}/>`;
+}
+/**
+* 45° hatch lines clipped to a rectangle, as one path `d`. Pure geometry with
+* no pattern id, so a hatch survives duplicate SVGs on one page and hidden
+* wide/narrow renders. Shared with the React renderers.
+*/
+function hatchPath(x, y, w, h, step = 6) {
+	if (!(w > 0) || !(h > 0)) return "";
+	let d = "";
+	for (let k = step / 2; k < w + h; k += step) {
+		const x0 = Math.max(0, k - h), x1 = Math.min(w, k);
+		d += `M${r2(x + x0)} ${r2(y + k - x0)}L${r2(x + x1)} ${r2(y + k - x1)}`;
+	}
+	return d;
+}
+/** A hatched rectangle: a neutral wash plus hatch lines. Missing data is hatched, never drawn as zero. */
+function hatch(x, y, w, h, cls) {
+	if (w <= 0 || h <= 0) return "";
+	return `<g class="${cls}" data-hatched="true">${rect(x, y, w, h, "tgc-hatch-bg")}<path class="tgc-hatch" d="${hatchPath(x, y, w, h)}"/></g>`;
+}
+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}"/>`;
+}
+const MARKER_SHAPES = [
+	"circle",
+	"square",
+	"triangle",
+	"diamond"
+];
+/** A marker outline as a path `d`, centred on (cx, cy) with radius-like size `r`. Shared with the React renderers. */
+function markerPath(shape, cx, cy, r) {
+	const [x, y] = [r2(cx), r2(cy)];
+	if (shape === "square") {
+		const s = r2(r * .9);
+		return `M${r2(x - s)} ${r2(y - s)}h${r2(2 * s)}v${r2(2 * s)}h${r2(-2 * s)}z`;
+	}
+	if (shape === "triangle") {
+		const s = r2(r * 1.2);
+		return `M${x} ${r2(y - s)}L${r2(x + s)} ${r2(y + s * .8)}L${r2(x - s)} ${r2(y + s * .8)}z`;
+	}
+	if (shape === "diamond") {
+		const s = r2(r * 1.3);
+		return `M${x} ${r2(y - s)}L${r2(x + s)} ${y}L${x} ${r2(y + s)}L${r2(x - s)} ${y}z`;
+	}
+	return `M${r2(x - r)} ${y}a${r} ${r} 0 1 0 ${r2(2 * r)} 0a${r} ${r} 0 1 0 ${r2(-2 * r)} 0`;
+}
+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
+//#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/format.ts
+const TIERS_BEST_FIRST = [
+	"S",
+	"A",
+	"B",
+	"C",
+	"F"
+];
+const LADDER = [
+	"F",
+	"C",
+	"B",
+	"A",
+	"S"
+];
+function tierAtLeast(tier, floor) {
+	return LADDER.indexOf(tier) >= LADDER.indexOf(floor);
+}
+function pct(value) {
+	return `${Math.round(value * 100)}%`;
+}
+/** A difference in points: "+25 pts". */
+function pts(value) {
+	const n = Math.round(value * 100);
+	return `${n > 0 ? "+" : n < 0 ? "−" : ""}${Math.abs(n)} pts`;
+}
+function usd(value) {
+	if (value >= 100) return `$${Math.round(value).toLocaleString("en-US")}`;
+	if (value >= 1) return `$${value.toFixed(2)}`;
+	if (value >= .01) return `$${value.toFixed(3)}`;
+	return `$${value.toFixed(4)}`;
+}
+/** Axis ticks: "$30", "$2.5", "$0.05". */
+function usdTick(value) {
+	return `$${Number(value.toPrecision(2)).toLocaleString("en-US", { maximumFractionDigits: 4 })}`;
+}
+function duration(ms) {
+	const s = ms / 1e3;
+	if (s < 60) return `${Math.round(s)} s`;
+	if (s < 3600) return `${(s / 60).toFixed(1)} min`;
+	return `${(s / 3600).toFixed(1)} h`;
+}
+function kn(k, n) {
+	return `${k}/${n}`;
+}
+const METHOD_NAME = {
+	"task-cluster-bootstrap": "task-clustered bootstrap",
+	"mcnemar-exact": "exact McNemar",
+	wilson: "Wilson score"
+};
+/** "95% Wilson score" */
+function intervalName(interval) {
+	return `${Math.round((interval.level ?? 0) * 100)}% ${interval.method ? METHOD_NAME[interval.method] : ""}`.trim();
+}
+/** Why an interval cannot be drawn, or null when it can. */
+function intervalGap(interval) {
+	if (!interval) return "no interval";
+	const missing = [interval.level === null ? "level" : "", interval.method === null ? "method" : ""].filter(Boolean);
+	if (missing.length) return `the interval names no ${missing.join(" or ")}`;
+	if (!(interval.method in METHOD_NAME)) return "the interval method is unknown";
+	if (!Number.isFinite(interval.level) || interval.level <= 0 || interval.level >= 1) return "the interval level is outside 0–1";
+	if (!Number.isFinite(interval.lower) || !Number.isFinite(interval.upper)) return "the interval bounds are not finite";
+	if (!(interval.lower <= interval.upper)) return "the interval bounds are out of order";
+	return null;
+}
+/** Whether a rate bar may be drawn for this estimate. */
+function drawable(estimate) {
+	return estimate === "descriptive" || estimate === "bootstrap";
+}
+function estimateNote(estimate, units) {
+	if (estimate === "none") return units === 1 ? "1 unit" : `${units} units`;
+	if (estimate === "insufficient") return "too few units";
+	return "";
+}
+/**
+* The positive cost per pass this figure can print or place, or null.
+* A zero value needs a separate verified-free representation; this field alone
+* cannot distinguish a free run from missing spend, so it prints "unknown".
+*/
+function perPass(cost) {
+	return cost.basis !== "unknown" && cost.perSolvedUsd !== null && Number.isFinite(cost.perSolvedUsd) && cost.perSolvedUsd > 0 ? cost.perSolvedUsd : null;
+}
+/** "$23.76", "$23.76 est.", "unknown", "no pass" */
+function costText(cost, solved) {
+	if (solved === 0) return "no pass";
+	const value = perPass(cost);
+	if (value === null) return "unknown";
+	return cost.basis === "receipts" ? usd(value) : `${usd(value)} est.`;
+}
+/** Wilson can describe an eligible rate; clustered bootstrap needs the producer's bootstrap class. */
+function rateIntervalGap(row) {
+	if (!drawable(row.estimate)) return `${row.estimate} estimate`;
+	if (!Number.isFinite(row.rate) || row.rate < 0 || row.rate > 1) return "rate is outside 0–1";
+	const gap = intervalGap(row.interval);
+	if (gap) return gap;
+	if (row.interval.method === "mcnemar-exact") return "exact McNemar applies to paired comparisons, not rates";
+	if (row.estimate === "descriptive" && row.interval.method !== "wilson") return `descriptive estimate does not support ${intervalName(row.interval)}`;
+	if (row.interval.lower < 0 || row.interval.upper > 1) return "the rate interval is outside 0–1";
+	if (row.rate < row.interval.lower - 1e-6 || row.rate > row.interval.upper + 1e-6) return "the rate falls outside its interval";
+	return null;
+}
+/** Check the source arithmetic before using a rate in a finding or a mark. */
+function rateDataGap(row) {
+	if (!Number.isInteger(row.attempts) || row.attempts < 0 || !Number.isInteger(row.solved) || row.solved < 0 || row.solved > row.attempts) return "passed and attempt counts are invalid";
+	if (!Number.isFinite(row.rate) || row.rate < 0 || row.rate > 1) return "rate is outside 0–1";
+	if (row.attempts > 0 && Math.abs(row.rate - row.solved / row.attempts) > 1e-6) return "rate disagrees with passed/attempts";
+	if (row.attempts === 0 && row.rate !== 0) return "rate has no attempts";
+	if (drawable(row.estimate) && row.attempts === 0) return "drawable estimate has no attempts";
+	return null;
+}
+/**
+* The order rows are drawn in. Ranked rows keep their rank. Otherwise rows
+* with enough units to draw a rate come first, highest rate first; rows with
+* too few units follow, most units first, so a 1/1 row never heads the list.
+*/
+function rateOrder(rows) {
+	if (rows.length > 0 && rows.every((row) => row.rank !== null && row.estimate === "bootstrap")) return [...rows].sort((a, b) => a.rank - b.rank);
+	const drawn = rows.filter((row) => drawable(row.estimate)).sort((a, b) => b.rate - a.rate);
+	const counted = rows.filter((row) => !drawable(row.estimate)).sort((a, b) => b.attempts - a.attempts);
+	return [...drawn, ...counted];
+}
+/** "2A 1F" */
+function tierSummary(tiers, unmeasured = 0, flagged = 0) {
+	const parts = tiers ? TIERS_BEST_FIRST.filter((t) => tiers[t] > 0).map((t) => `${tiers[t]}${t}`) : [];
+	if (flagged) parts.push(`${flagged} flagged`);
+	if (unmeasured) parts.push(`${unmeasured}U`);
+	return parts.join(" ");
+}
+function tierTotal(tiers) {
+	return tiers ? LADDER.reduce((sum, t) => sum + tiers[t], 0) : 0;
+}
+//#endregion
+//#region src/types.ts
+function isRefusal(value) {
+	return "refused" in value;
+}
+//#endregion
+//#region src/events.ts
+/**
+* Recorded events and spans drawn over a continuous x axis: vertical marks
+* (first pass, deadline, death, release, steer, ruling, wake) and shaded bands
+* (time after the first pass, idle time, no data, a system-wide wall). The
+* producer records every position; the library never places an event.
+*/
+const MARK_KINDS = [
+	"pass",
+	"deadline",
+	"died",
+	"event",
+	"release",
+	"steer",
+	"ruling",
+	"wake"
+];
+const MARK_VERDICTS = [
+	"pass",
+	"fail",
+	"unknown"
+];
+const BAND_KINDS = [
+	"after-pass",
+	"idle",
+	"missing",
+	"blocked",
+	"group"
+];
+/** The head shape of each kind that has one, shared with the React marks. */
+const MARK_HEADS = {
+	release: "diamond",
+	steer: "triangle",
+	ruling: "square",
+	wake: "circle"
+};
+/** Why the marks or bands cannot be drawn on `domain` (null when they can). Omit `domain` to check shape only. */
+function eventsGap(marks = [], bands = [], domain) {
+	const inside = (value) => !domain || value >= domain[0] && value <= domain[1];
+	for (const mark of marks) {
+		if (!mark || typeof mark.label !== "string" || !mark.label.trim()) return "Every mark needs a label.";
+		if (!MARK_KINDS.includes(mark.kind)) return `${mark.label}: unknown mark kind.`;
+		if (mark.verdict !== void 0 && !MARK_VERDICTS.includes(mark.verdict)) return `${mark.label}: a verdict is pass, fail or unknown.`;
+		if (mark.source !== void 0 && (typeof mark.source !== "string" || !mark.source.trim())) return `${mark.label}: a source needs a name.`;
+		if (!Number.isFinite(mark.at) || !inside(mark.at)) return `${mark.label}: mark position must be finite and inside the axis domain.`;
+	}
+	for (const band of bands) {
+		if (!band || typeof band.label !== "string" || !band.label.trim()) return "Every band needs a label.";
+		if (!BAND_KINDS.includes(band.kind)) return `${band.label}: unknown band kind.`;
+		if (!Number.isFinite(band.from) || !Number.isFinite(band.to) || (band.kind === "group" ? band.from > band.to : band.from >= band.to) || !inside(band.from) || !inside(band.to)) return `${band.label}: a band needs finite, increasing bounds inside the axis domain.`;
+	}
+	return null;
+}
+/** An `event` whose source is `gap`: a break in time between positions of an ordinal axis. It never crosses the data. */
+function isGap(mark) {
+	return mark.kind === "event" && mark.source === "gap";
+}
+/** A mark's label with its source, as drawn and listed. */
+function markName(mark) {
+	return mark.source ? `${mark.label} · ${mark.source}` : mark.label;
+}
+/** The kind cell of the events table: the kind, then the verdict and the lane when recorded. */
+function markKindLabel(mark) {
+	return [
+		mark.kind,
+		mark.verdict,
+		mark.lane && `lane ${mark.lane}`
+	].filter(Boolean).join(" · ");
+}
+/**
+* Bands sit under the data; a missing band is hatched over a neutral wash. A band is clipped to `clip` when given.
+* `extent` maps a band's bounds to pixels when a bound covers more than a point, such as a column of an ordinal axis.
+* Group bands are drawn by `drawGroups`, not here.
+*/
+function drawBands(bands, px, top, bottom, format, clip, extent) {
+	return bands.map((band) => {
+		if (band.kind === "group") return "";
+		const from = clip ? Math.max(band.from, clip[0]) : band.from, to = clip ? Math.min(band.to, clip[1]) : band.to;
+		if (to <= from) return "";
+		const [x0, x1] = extent ? extent(from, to) : [px(from), px(to)];
+		const x = x0, w = x1 - x0, cls = `tgc-band tgc-band-${band.kind}`;
+		const mark = band.kind === "missing" ? hatch(x, top, w, bottom - top, cls) : rect(x, top, w, bottom - top, cls) + (band.kind === "blocked" ? line(x, top, x + w, top, "tgc-band-wall") : "");
+		return titled(`${band.label}: ${format(band.from)} to ${format(band.to)}`, `<g data-band="${band.kind}">${mark}</g>`);
+	}).join("");
+}
+/** The header row height `drawGroups` needs, or 0 without group bands. */
+function groupRowHeight(bands = []) {
+	return bands.some((band) => band.kind === "group") ? 18 : 0;
+}
+/**
+* Group bands as labelled brackets in the header row that ends at `top`, with a rule at each inner edge through the
+* data. A label that does not fit its bracket is cut with an ellipsis; the full label is the bracket's hover.
+*/
+function drawGroups(bands, extent, top, bottom, left, right, format, clip) {
+	return bands.filter((band) => band.kind === "group").map((band) => {
+		const from = clip ? Math.max(band.from, clip[0]) : band.from, to = clip ? Math.min(band.to, clip[1]) : band.to;
+		if (to < from) return "";
+		const [x0, x1] = extent(from, to), w = x1 - x0;
+		const label = w >= 24 ? wrap(band.label, w - 10, 11, "sans", 1).lines[0] : "";
+		const edges = [x0, x1].filter((x) => x > left + .5 && x < right - .5).map((x) => line(x, top - 16, x, bottom, "tgc-group-edge")).join("");
+		const bracket = line(x0 + 2, top - 3, x1 - 2, top - 3, "tgc-group-rule") + (label ? text(x0 + 3, top - 7, label, {
+			size: 11,
+			cls: "tgc-group-label"
+		}) : "");
+		return titled(`${band.label}: ${format(band.from)} to ${format(band.to)}`, `<g data-band="group">${edges}${bracket}</g>`);
+	}).join("");
+}
+/** Marks of one kind and verdict merge when under 3 px apart, or under 12 px apart with the same label (a re-checked tag). */
+function groupMarks(marks, px) {
+	const groups = [];
+	for (const mark of [...marks].sort((a, b) => a.at - b.at)) {
+		const x = px(mark.at), last = groups.at(-1), lead = last?.marks[0];
+		const near = last && px(last.marks.at(-1).at);
+		if (last && lead.kind === mark.kind && lead.verdict === mark.verdict && (x - near < 3 || x - near < 12 && markName(lead) === markName(mark))) last.marks.push(mark);
+		else groups.push({
+			x,
+			marks: [mark]
+		});
+	}
+	return groups;
+}
+/**
+* Places labels in up to `rows` rows without overlap, measured from their text. Edge labels go first so an event
+* past the window is always named; a mark label that fits no row is left to its rule's hover and the table.
+*/
+function layoutLabels(groups, left, right, o) {
+	const rows = o.rows ?? 3, maxW = Math.max(48, Math.min(200, (right - left) * .42)), gap = 6;
+	const taken = Array.from({ length: rows }, () => []);
+	const fits = (row, a, b) => taken[row].every(([p, q]) => b + gap <= p || a >= q + gap);
+	const place = (value, start, end, prefer, flexible) => {
+		const label = wrap(value, maxW, 11, "sans", 1).lines[0], w = textWidth(label, 11);
+		for (const anchor of flexible ? [prefer, prefer === "start" ? "end" : "start"] : [prefer]) {
+			const [a, b] = anchor === "start" ? [start, start + w] : [end - w, end];
+			if (a < left - 4 || b > right + 4) continue;
+			for (let row = 0; row < rows; row++) if (fits(row, a, b)) {
+				taken[row].push([a, b]);
+				return {
+					row,
+					x: anchor === "start" ? start : end,
+					anchor,
+					text: label
+				};
+			}
+		}
+		return null;
+	};
+	const [w0, w1] = o.window ?? [-Infinity, Infinity];
+	const edges = [...(o.after ?? []).map((mark) => place(`${markName(mark)} +${duration(mark.at - w1)} →`, right, right, "end", false)), ...(o.before ?? []).map((mark) => place(`← ${markName(mark)} −${duration(w0 - mark.at)}`, left, left, "start", false))].filter((p) => p !== null);
+	const placed = /* @__PURE__ */ new Map();
+	for (const group of [...groups.filter((g) => !isGap(g.marks[0])), ...groups.filter((g) => isGap(g.marks[0]))]) {
+		const flip = group.x > left + (right - left) * .62;
+		const spot = place(markName(group.marks[0]) + (group.marks.length > 1 ? ` (+${group.marks.length - 1})` : ""), group.x + 4, group.x - 4, flip ? "end" : "start", true);
+		if (spot) placed.set(group, spot);
+	}
+	return {
+		placed,
+		edges,
+		rows: Math.max(0, ...[...placed.values(), ...edges].map((p) => p.row + 1))
+	};
+}
+/** How many label rows `drawMarks` uses for these marks, so a figure can reserve them above its data. */
+function markLabelRows(marks, px, left, right, o = {}) {
+	return layoutLabels(groupMarks(marks, px), left, right, o).rows;
+}
+/** The head shape of a release, steer, ruling or wake, centred on (x, y). Empty for the plain rule kinds. */
+function markHead(kind, x, y, r = 3.5) {
+	const shape = MARK_HEADS[kind];
+	return shape ? `<path class="tgc-mark-head" d="${markerPath(shape, x, y, r)}"/>` : "";
+}
+/**
+* Marks and their labels. Labels go in rows from `labelTop`, placed by measured width so none overlap, and are drawn
+* over every rule; marks of one kind and verdict at one place share a rule and a label. Rules run from `labelTop` to
+* `bottom`, except that release, steer and wake stems stop at their head, just below `top`.
+*/
+function drawMarks(marks, px, top, bottom, left, right, format, labelTop = top, o = {}) {
+	const groups = groupMarks(marks, px);
+	const { placed, edges } = layoutLabels(groups, left, right, o);
+	const rowY = (row) => labelTop + 12 + row * 14;
+	let out = groups.map((group) => {
+		const { x, marks: members } = group, mark = members[0];
+		const stem = MARK_HEADS[mark.kind] !== void 0 && mark.kind !== "ruling" || isGap(mark);
+		let glyph = line(x, Math.min(top, labelTop), x, stem ? top + 4 : bottom, `tgc-mark tgc-mark-${mark.kind}`);
+		if (mark.kind === "died") glyph += line(x - 4, bottom - 8, x + 4, bottom, "tgc-mark tgc-mark-died") + line(x - 4, bottom, x + 4, bottom - 8, "tgc-mark tgc-mark-died");
+		glyph += markHead(mark.kind, x, top + 4);
+		const verdict = mark.verdict ? ` data-verdict="${mark.verdict}" class="tgc-verdict-${mark.verdict}"` : "";
+		return titled(members.map((m) => `${markName(m)}: ${format(m.at)}${m.verdict ? ` · ${m.verdict}` : ""}`).join("\n"), `<g data-mark="${mark.kind}"${members.length > 1 ? ` data-merged="${members.length}"` : ""}${verdict}>${glyph}</g>`);
+	}).join("");
+	for (const group of groups) {
+		const spot = placed.get(group);
+		if (spot) out += text(spot.x, rowY(spot.row), spot.text, {
+			size: 11,
+			anchor: spot.anchor,
+			cls: "tgc-mark-label"
+		});
+	}
+	for (const edge of edges) out += `<g data-edge="${edge.anchor === "end" ? "after" : "before"}">${text(edge.x, rowY(edge.row), edge.text, {
+		size: 11,
+		anchor: edge.anchor,
+		cls: "tgc-mark-label tgc-mark-edge"
+	})}</g>`;
+	return out;
+}
+/** The table form of marks and bands, in axis order. Empty when there are none. */
+function eventsTable(marks, bands, axisLabel, format) {
+	if (!marks.length && !bands.length) return "";
+	const rows = [...marks.map((mark) => ({
+		at: mark.at,
+		cells: [
+			markName(mark),
+			markKindLabel(mark),
+			format(mark.at),
+			""
+		]
+	})), ...bands.map((band) => ({
+		at: band.from,
+		cells: [
+			band.label,
+			band.kind === "missing" ? "no data" : band.kind,
+			format(band.from),
+			format(band.to)
+		]
+	}))].sort((a, b) => a.at - b.at);
+	return table(`Recorded events by ${axisLabel}`, [
+		{ label: "Event" },
+		{ label: "Kind" },
+		{
+			label: `${axisLabel} from`,
+			numeric: true
+		},
+		{
+			label: `${axisLabel} to`,
+			numeric: true
+		}
+	], rows.map((row) => row.cells));
+}
+const EVENTS_READ = "Vertical rules mark recorded events (solid: pass, dashed: deadline, cross: died, dotted: other; a diamond is a release, a triangle a steer, a square a ruling and a circle a wake, coloured by verdict when one is recorded); tinted spans are recorded periods, a wall-topped span is a system-wide block, and hatched spans have no data.";
+//#endregion
+//#region src/outcomes.ts
+/**
+* Outcomes in stack order. Adjacent outcomes pass the colour-vision checks in both themes in this order, so a stacked
+* bar keeps it; `aborted` and `other` share the neutral tone and always carry a label. An attempt still running is
+* `open` and is drawn hatched, never as an outcome.
+*/
+const OUTCOME_ORDER = [
+	"ok",
+	"quota",
+	"lost",
+	"rate-limit",
+	"oom",
+	"refused",
+	"aborted",
+	"other"
+];
+/** The CSS colour of each outcome, for a caller that paints its own marks (a legend, a stacked bar). */
+const OUTCOME_COLORS = Object.freeze(Object.fromEntries(OUTCOME_ORDER.map((outcome) => [outcome, `var(--chart-outcome-${outcome === "aborted" || outcome === "other" ? "neutral" : outcome})`])));
+/** How many checkers have their own hue. Index 0 is the current checker; later indexes are older checkers. */
+const CHECKER_HUES = 4;
+/** The CSS colour of checker `index` (0 is current). Indexes past the fourth hue fold into the muted tone. */
+function checkerColor(index) {
+	return Number.isInteger(index) && index >= 0 && index < 4 ? `var(--chart-checker-${index})` : "var(--chart-muted)";
+}
+/** The class a figure puts on a series drawn in checker `index`'s colour. */
+function checkerClass(index) {
+	if (index === void 0) return "";
+	return Number.isInteger(index) && index >= 0 && index < 4 ? `tgc-checker-${index}` : "tgc-checker-other";
+}
+//#endregion
+//#region src/timeline.ts
+/**
+* Lanes of recorded spans on one time axis, with recorded marks; an open span runs to the supplied `now`. Lanes can
+* form a tree (`parent`), carry attempt ticks coloured by outcome with ok and failed counts, and fold by subtree.
+*/
+const TICK_OUTCOMES = OUTCOME_ORDER;
+const utcClock = (ms) => new Date(ms).toISOString().slice(11, 16);
+const MIN = 6e4;
+const DAY = 864e5;
+const MONTHS = [
+	"Jan",
+	"Feb",
+	"Mar",
+	"Apr",
+	"May",
+	"Jun",
+	"Jul",
+	"Aug",
+	"Sep",
+	"Oct",
+	"Nov",
+	"Dec"
+];
+/** Axis steps: the smallest whose labels fit without overlap is used. */
+const STEPS = [
+	1,
+	2,
+	5,
+	10,
+	15,
+	30,
+	60,
+	120,
+	180,
+	360,
+	720,
+	1440,
+	2880,
+	10080
+].map((m) => m * MIN);
+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 byId = new Map(lanes.map((lane) => [lane.id, lane]));
+	for (const lane of lanes) {
+		const seen = /* @__PURE__ */ new Set();
+		for (let at = lane; at.parent !== void 0; at = byId.get(at.parent)) {
+			if (!byId.has(at.parent)) return {
+				id,
+				refused: `${at.label}: parent ${at.parent} is not a lane.`
+			};
+			if (seen.has(at.id)) return {
+				id,
+				refused: `${lane.label}: its parent chain loops back to ${at.label}.`
+			};
+			seen.add(at.id);
+		}
+		if (lane.depth !== void 0 && (!Number.isInteger(lane.depth) || lane.depth < 0)) return {
+			id,
+			refused: `${lane.label}: depth must be a whole number of at least 0.`
+		};
+	}
+	const depthOf = /* @__PURE__ */ new Map();
+	const depth = (lane) => depthOf.get(lane.id) ?? depthOf.set(lane.id, lane.parent === void 0 ? lane.depth ?? 0 : depth(byId.get(lane.parent)) + 1).get(lane.id);
+	for (const lane of lanes) {
+		const at = depth(lane);
+		if (lane.depth !== void 0 && lane.depth !== at) return {
+			id,
+			refused: `${lane.label}: depth ${lane.depth} is not one below its parent's ${at - 1}.`
+		};
+	}
+	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.`
+		};
+	}
+	for (const lane of lanes) for (const tick of lane.ticks ?? []) {
+		if (!tick || !Number.isFinite(tick.at)) return {
+			id,
+			refused: `${lane.label}: every tick needs a finite time.`
+		};
+		if (!TICK_OUTCOMES.includes(tick.outcome)) return {
+			id,
+			refused: `${lane.label}: tick outcome ${String(tick.outcome)} is not one of ${TICK_OUTCOMES.join(", ")}.`
+		};
+	}
+	const shape = eventsGap(o.marks, o.bands);
+	if (shape) return {
+		id,
+		refused: shape
+	};
+	const marks = o.marks ?? [], bands = o.bands ?? [];
+	const stray = marks.find((mark) => mark.lane !== void 0 && !byId.has(mark.lane));
+	if (stray) return {
+		id,
+		refused: `${stray.label}: lane ${stray.lane} is not a lane.`
+	};
+	const ends = (span) => span.end ?? o.now;
+	const ticks = lanes.flatMap((lane) => lane.ticks ?? []);
+	const data = [
+		...spans.flatMap(({ span }) => [span.start, ends(span)]),
+		...ticks.map((tick) => tick.at),
+		...o.now === void 0 ? [] : [o.now]
+	];
+	const times = data.length ? data : [...marks.map((m) => m.at), ...bands.flatMap((b) => [b.from, b.to])];
+	if (!times.length) return {
+		id,
+		refused: "No spans, ticks, 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 (data.some((t) => t < t0 || t > t1)) return {
+		id,
+		refused: "A span, tick or now falls outside the recorded window."
+	};
+	const fmt = o.formatTime ?? utcClock;
+	const axisLabel = o.formatTime ?? ((ms) => ms % DAY === 0 ? `${MONTHS[new Date(ms).getUTCMonth()]} ${new Date(ms).getUTCDate()}` : utcClock(ms));
+	const hatched = new Set(o.hatch ?? ["missing", "untraced"]), muted = new Set(o.muted ?? ["idle"]);
+	const foldable = o.collapsed !== void 0, folded = new Set(o.collapsed ?? []);
+	const kids = /* @__PURE__ */ new Map();
+	for (const lane of lanes) kids.set(lane.parent, [...kids.get(lane.parent) ?? [], lane]);
+	const subtree = (lane) => (kids.get(lane.id) ?? []).flatMap((kid) => [kid, ...subtree(kid)]);
+	const rows = [];
+	const visit = (lane) => {
+		const below = subtree(lane), fold = folded.has(lane.id) && below.length > 0;
+		const own = lane.ticks, all = fold && (own || below.some((kid) => kid.ticks)) ? [...own ?? [], ...below.flatMap((kid) => kid.ticks ?? [])] : own;
+		rows.push({
+			lane,
+			depth: depthOf.get(lane.id),
+			children: (kids.get(lane.id) ?? []).length,
+			hidden: fold ? below.length : 0,
+			folded: fold,
+			ticks: all
+		});
+		if (!fold) (kids.get(lane.id) ?? []).forEach(visit);
+	};
+	(kids.get(void 0) ?? []).forEach(visit);
+	const rowOf = new Map(rows.map((row, i) => [row.lane.id, i]));
+	const shownAt = (laneId) => {
+		for (let at = byId.get(laneId); at; at = at.parent === void 0 ? void 0 : byId.get(at.parent)) if (rowOf.has(at.id)) return rowOf.get(at.id);
+		return 0;
+	};
+	const inWindow = (mark) => mark.at >= t0 && mark.at <= t1;
+	const wide = marks.filter((mark) => mark.lane === void 0 && inWindow(mark));
+	const onLane = marks.filter((mark) => mark.lane !== void 0 && inWindow(mark));
+	const before = marks.filter((mark) => mark.at < t0), after = marks.filter((mark) => mark.at > t1);
+	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 counts = (list) => {
+		const by = /* @__PURE__ */ new Map();
+		for (const tick of list) by.set(tick.outcome, (by.get(tick.outcome) ?? 0) + 1);
+		const ok = by.get("ok") ?? 0, failed = list.length - ok;
+		const why = [...by].filter(([outcome]) => outcome !== "ok").sort((a, b) => b[1] - a[1]).map(([outcome, n]) => `${n} ${outcome}`).join(", ");
+		return {
+			ok,
+			failed,
+			why,
+			text: `${ok}✓ ${failed}✗`,
+			sentence: `${ok} ok, ${failed} failed${why ? ` (${why})` : ""}`
+		};
+	};
+	const detail = (lane) => (lane.detail ?? []).filter((fact) => typeof fact === "string" && fact.trim());
+	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}` : ""}`, ...detail(lane)].join("\n");
+	const hasTicks = rows.some((row) => row.ticks !== void 0);
+	const countWidth = hasTicks ? Math.max(...rows.filter((row) => row.ticks).map((row) => textWidth(counts(row.ticks).text, 11, "mono"))) : 0;
+	const draw = (width) => {
+		const phone = width === 358, indent = phone ? 10 : 12;
+		const caretX = (depth) => 4 + depth * indent;
+		const labelX = (depth) => caretX(depth) + 11;
+		const tail = (row) => row.hidden ? ` +${row.hidden}` : "";
+		const left = phone ? 12 : Math.max(120, Math.min(Math.round(width * .34), Math.ceil(Math.max(...rows.map((row) => labelX(row.depth) + textWidth(row.lane.label + tail(row), 12))) + 10)));
+		const right = phone ? width - 12 : width - 16 - (countWidth ? countWidth + 10 : 0);
+		const px = (t) => left + (t - t0) / (t1 - t0) * (right - left);
+		const labelRows = markLabelRows(wide, px, left, right, {
+			before,
+			after,
+			window: [t0, t1]
+		});
+		const top = 8 + (labelRows ? labelRows * 14 + 6 : 0) + groupRowHeight(bands);
+		const rowH = phone ? 40 : 24, bottom = top + rows.length * rowH;
+		const barTop = (y) => y + (phone ? 19 : 5), barH = 14;
+		let body = drawBands(bands, px, top, bottom, fmt, [t0, t1]) + drawGroups(bands, (from, to) => [px(from), px(to)], top, bottom, left, right, fmt, [t0, t1]);
+		for (const t of axisTicks(t0, t1, px, left, right, axisLabel)) body += line(px(t), top, px(t), bottom, "tgc-gridline") + text(px(t), bottom + 16, axisLabel(t), {
+			size: 11,
+			cls: "tgc-ink-muted tgc-num",
+			anchor: "middle"
+		});
+		body += drawMarks(wide, px, top - 8, bottom, left, right, fmt, 4, {
+			before,
+			after,
+			window: [t0, t1]
+		});
+		rows.forEach((row, i) => {
+			const { lane } = row, y = top + i * rowH, mid = y + (phone ? 9 : 12), baseline = y + (phone ? 13 : 16);
+			const parentRow = lane.parent === void 0 ? void 0 : rowOf.get(lane.parent);
+			if (parentRow !== void 0) {
+				const x = caretX(row.depth - 1) + 3, from = phone ? y + 2 : top + parentRow * rowH + 19;
+				body += `<path class="tgc-tree" d="M${x} ${from}V${mid}H${labelX(row.depth) - (row.children ? 13 : 3)}"/>`;
+			}
+			const countText = row.ticks ? counts(row.ticks) : void 0;
+			const room = (phone ? width - 12 - (countText ? textWidth(countText.text, 11, "mono") + 8 : 0) : left - 8) - labelX(row.depth) - textWidth(tail(row), 12);
+			const label = wrap(lane.label, Math.max(24, room), phone ? 11 : 12, "sans", 1).lines[0];
+			const name = `<text class="tgc-ink tgc-lane-label" x="${labelX(row.depth)}" y="${baseline}" font-size="${phone ? 11 : 12}">${esc(label)}${row.hidden ? `<tspan class="tgc-ink-muted">${esc(tail(row))}</tspan>` : ""}</text>`;
+			const caret = row.children ? `<path class="tgc-caret" d="${row.folded ? `M${caretX(row.depth)} ${mid - 4}l6 4l-6 4z` : `M${caretX(row.depth) - 1} ${mid - 3}h8l-4 6z`}"/>` : "";
+			const facts = [
+				lane.label,
+				...detail(lane),
+				...countText ? [`Attempts: ${countText.sentence}${row.hidden ? `, including ${row.hidden} folded ${plural(row.hidden, "lane")}` : ""}`] : []
+			].join("\n");
+			const toggle = foldable && row.children ? ` data-toggle="${esc(lane.id)}" class="tgc-lane-toggle" role="button" tabindex="0" aria-expanded="${!row.folded}" aria-label="${esc(`${row.folded ? "Unfold" : "Fold"} ${lane.label}`)}"` : "";
+			const hit = toggle ? rect(caretX(row.depth) - 3, y + 1, (phone ? width - 12 : left - 4) - caretX(row.depth) + 3, phone ? 16 : rowH - 2, "tgc-lane-hit", "rx=\"3\"") : "";
+			body += `<g data-lane="${esc(lane.id)}" data-depth="${row.depth}"${row.folded ? ` data-folded="${row.hidden}"` : ""}><g${toggle}><title>${esc(facts)}</title>${hit}${caret}${name}</g>`;
+			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, barTop(y), w, barH, "tgc-span tgc-span-missing") : rect(x, barTop(y), 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 (row.ticks?.length) body += drawTicks(row.ticks, lane.label, px, barTop(y), barH, fmt);
+			if (countText) {
+				const x = phone ? width - 12 : width - 16;
+				body += titled(`${lane.label}: ${countText.sentence}${row.hidden ? ` across ${row.hidden + 1} lanes` : ""}`, `<text class="tgc-num tgc-count" x="${x}" y="${baseline}" font-size="11" text-anchor="end">${countText.ok}<tspan class="tgc-count-ok">✓</tspan> ${countText.failed}<tspan class="tgc-count-failed">✗</tspan></text>`);
+			}
+			body += "</g>";
+		});
+		for (const mark of onLane) {
+			const y = top + shownAt(mark.lane) * rowH, cy = barTop(y) + barH / 2, x = px(mark.at);
+			const glyph = markHead(mark.kind, x, cy, phone ? 3 : 3.5) || line(x, barTop(y) - 3, x, barTop(y) + barH + 3, `tgc-mark tgc-mark-${mark.kind}`);
+			const verdict = mark.verdict ? ` data-verdict="${mark.verdict}" class="tgc-verdict-${mark.verdict}"` : "";
+			body += titled(`${markName(mark)}: ${fmt(mark.at)}${mark.verdict ? ` · ${mark.verdict}` : ""}`, `<g data-mark="${mark.kind}" data-lane-mark="${esc(mark.lane)}"${verdict}>${glyph}</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"
+		});
+		return svgRoot(width, bottom + (o.now === void 0 ? 22 : 36), body);
+	};
+	const all = counts(ticks);
+	const tree = lanes.some((lane) => lane.parent !== void 0 || lane.depth);
+	const folds = foldable && rows.some((row) => row.children);
+	const laneTable = tree || ticks.length || lanes.some((lane) => lane.ticks || detail(lane).length) ? table(`${capitalize(o.measure)}: lanes`, [
+		{ label: "Lane" },
+		{ label: "Started by" },
+		{
+			label: "Depth",
+			numeric: true
+		},
+		{
+			label: "Attempts ok",
+			numeric: true
+		},
+		{
+			label: "Attempts failed",
+			numeric: true
+		},
+		{ label: "Failed by outcome" },
+		{ label: "Detail" }
+	], lanes.map((lane) => {
+		const c = lane.ticks ? counts(lane.ticks) : void 0;
+		return [
+			lane.label,
+			lane.parent === void 0 ? "" : byId.get(lane.parent).label,
+			String(depthOf.get(lane.id)),
+			c ? String(c.ok) : "not recorded",
+			c ? String(c.failed) : "not recorded",
+			c?.why ?? "",
+			detail(lane).join(" · ")
+		];
+	})) : "";
+	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)}).${ticks.length ? ` ${ticks.length} recorded ${plural(ticks.length, "attempt")}: ${all.sentence}.` : ""}`,
+		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.`,
+			...tree ? [`An indented lane was started by the lane its connector leads to${folds ? "; a caret folds a lane's subtree, and a folded lane's ticks and counts include its subtree" : ""}.`] : [],
+			...hasTicks ? ["Each tick is one recorded attempt: ok ticks rise above the bar and failed ticks drop below it in their outcome's colour; the counts at the right are ok (✓) and failed (✗)."] : [],
+			...marks.length + bands.length ? [EVENTS_READ] : []
+		].join(" "),
+		svg: {
+			wide: draw(720),
+			narrow: draw(358),
+			...folds ? { interactive: true } : {}
+		},
+		table: laneTable + 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.${ticks.length ? " Ticks are recorded attempts at their recorded times; ticks of one outcome within 2 px are drawn as one, with the count in its hover." : ""}`,
+			n: `${spans.length} spans${ticks.length ? ` and ${ticks.length} attempts` : ""} 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.`), ...[...before, ...after].map((mark) => `${markName(mark)} falls ${mark.at < t0 ? `${duration(t0 - mark.at)} before` : `${duration(mark.at - t1)} after`} the recorded window; it is named at the edge, not drawn.`)]
+		}
+	};
+}
+/** Ticks of one outcome within 2 px merge into one stroke whose hover gives the count and time range. */
+function drawTicks(ticks, label, px, barTop, barH, fmt) {
+	const buckets = /* @__PURE__ */ new Map();
+	for (const tick of [...ticks].sort((a, b) => a.at - b.at)) {
+		const key = `${tick.outcome}|${Math.round(px(tick.at) / 2)}`;
+		buckets.set(key, [...buckets.get(key) ?? [], tick]);
+	}
+	return `<g class="tgc-ticks">${[...buckets.values()].sort((a, b) => Number(a[0].outcome === "ok") - Number(b[0].outcome === "ok")).map((bucket) => {
+		const first = bucket[0], last = bucket.at(-1), ok = first.outcome === "ok";
+		const x = px(bucket.reduce((sum, tick) => sum + tick.at, 0) / bucket.length);
+		const notes = /* @__PURE__ */ new Map();
+		for (const tick of bucket) if (tick.note) notes.set(tick.note, (notes.get(tick.note) ?? 0) + 1);
+		const note = [...notes].sort((a, b) => b[1] - a[1])[0]?.[0];
+		return titled(`${label}: ${bucket.length > 1 ? `${bucket.length} × ` : ""}${first.outcome} ${fmt(first.at)}${bucket.length > 1 ? ` to ${fmt(last.at)}` : ""}${note ? ` · ${note.length > 160 ? `${note.slice(0, 159)}…` : note}` : ""}`, line(x, ok ? barTop - 4 : barTop + barH / 2, x, ok ? barTop + barH / 2 : barTop + barH + 4, `tgc-tick tgc-tick-${first.outcome}`));
+	}).join("")}</g>`;
+}
+/** Clock-aligned ticks at the smallest step whose labels fit between `left` and `right` without overlapping. */
+function axisTicks(t0, t1, px, left, right, label) {
+	const fit = (list) => {
+		let end = -Infinity;
+		for (const t of list) {
+			const w = textWidth(label(t), 11, "mono"), a = px(t) - w / 2, b = px(t) + w / 2;
+			if (a < left - 14 || b > right + 14 || a < end + 10) return false;
+			end = b;
+		}
+		return true;
+	};
+	for (const step of STEPS) {
+		const list = [];
+		for (let t = Math.ceil(t0 / step) * step; t <= t1 && list.length <= 12; t += step) list.push(t);
+		if (list.length >= 2 && list.length <= 12 && fit(list)) return list;
+	}
+	return fit([t0, t1]) ? [t0, t1] : [t0];
+}
+//#endregion
+export { esc as $, pts as A, MARKER_SHAPES as B, duration as C, kn as D, intervalName as E, tierSummary as F, line as G, hatch as H, tierTotal as I, rect as J, markerPath as K, usd as L, rateIntervalGap as M, rateOrder as N, pct as O, tierAtLeast as P, capitalize as Q, usdTick as R, drawable as S, intervalGap as T, hatchPath as U, circle as V, hbar as W, text as X, svgRoot as Y, titled as Z, markName as _, checkerClass as a, wrap as at, TIERS_BEST_FIRST as b, MARK_HEADS as c, drawGroups as d, fitLines as et, drawMarks as f, markLabelRows as g, groupRowHeight as h, OUTCOME_ORDER as i, textWidth as it, rateDataGap as j, perPass as k, MARK_VERDICTS as l, eventsTable as m, CHECKER_HUES as n, plural as nt, checkerColor as o, eventsGap as p, polyline as q, OUTCOME_COLORS as r, textBlock as rt, EVENTS_READ as s, timeline as t, listJoin as tt, drawBands as u, isRefusal as v, estimateNote as w, costText as x, METHOD_NAME as y, table as z };