@tangle-network/charts 0.6.0 → 0.8.0

package/README.md

@@ -164,32 +164,51 @@ A run page draws recorded events, never inferred ones. Every addition below has
 
 | Need | Static | React |
 |---|---|---|
-| Vertical events (first pass, deadline, died) and shaded spans (after pass, idle, no data) | `timeSeries(rows, { ..., marks, bands })` | `<Lines marks bands>` |
+| Vertical events (first pass, deadline, died, release, steer, ruling, wake) and shaded spans (after pass, idle, no data, blocked) | `timeSeries(rows, { ..., marks, bands })` | `<Lines marks bands>` |
 | Lanes of spans with marks; an open span runs to `now` | `timeline(lanes, { measure, now, marks })` | `<Gantt lanes now marks>` |
+| An agent tree over time: lanes under their parents, attempt ticks with ok and failed counts, walls across every lane, folding by subtree | `timeline(lanes, { measure, start, now, marks, bands, collapsed })` | `<TimelineView lanes options defaultCollapsed>` |
 | Part of a whole with untraced time hatched | `phaseWaterfall` (unaccounted leaves and the remainder are hatched) | `<Meter total segments>` |
 | One panel per arm on shared axes, with no-data panels and early ends | `smallMultiples(panels, { x, y, shared })` | `<FigureView figure>` |
 | Series that stay distinct without colour | later series add a dash and a marker shape | `series[].dash`, `series[].marker` |
 
 ```ts
-type ChartMark = { at: number; label: string; kind: "pass" | "deadline" | "died" | "event" };
-type ChartBand = { from: number; to: number; label: string; kind: "after-pass" | "idle" | "missing" };
-type TimelineLane = { id: string; label: string; spans: Array<{ start: number; end: number | null; state: string; note?: string }> };
+type ChartMark = { at: number; label: string; kind: "pass" | "deadline" | "died" | "event" | "release" | "steer" | "ruling" | "wake";
+  verdict?: "pass" | "fail" | "unknown"; source?: string; lane?: string };
+type ChartBand = { from: number; to: number; label: string; kind: "after-pass" | "idle" | "missing" | "blocked" };
+type TimelineLane = { id: string; label: string; spans: Array<{ start: number; end: number | null; state: string; note?: string }>;
+  parent?: string; depth?: number; ticks?: TimelineTick[]; detail?: string[] };
+type TimelineTick = { at: number; outcome: "ok" | "quota" | "rate-limit" | "oom" | "refused" | "aborted" | "other"; note?: string };
 type MultiplePanel = { id: string; label: string; unit?: string; domain?: [number, number]; points?: TimePoint[];
   missing?: { why: string; detail?: string }; end?: { at: number; kind: ChartMark["kind"]; label?: string }; marks?: ChartMark[] };
 type MeterSegment = { label: string; value: number | null; color?: string; kind?: "measured" | "untraced" };
 ```
 
 Mark kinds differ by stroke as well as colour: pass is solid, deadline dashed, died ends in a cross, and other events are dotted.
+A release carries a diamond head, a steer a triangle, a ruling a square and a wake a circle; releases, steers and wakes stop at the plot's edge so frequent events never wall off the data, and a ruling crosses it.
+A recorded `verdict` colours a mark (pass and fail take the status tones, unknown the muted tone), and a `source`, such as the operator or the keeper, follows its label.
+Mark labels take up to three rows above the data, placed by measured width so none overlap; marks of one kind and verdict at one place share a rule and a label (`rc17 (+18)`), and a label with no room is left to the hover and the table.
+A `blocked` band is a system-wide wall, such as a quota window: a breach wash across every lane under a solid top edge.
 Marks and bands appear in the figure's table (`Recorded events by …`) and, for React, in a text list under the plot.
-Static figures refuse marks or bands outside the x domain; React components throw `RangeError` for the same input, as `StackedBarChart` does.
+`timeSeries` and `smallMultiples` refuse marks or bands outside the x domain, and `timeline` names them at its edge instead (below); React components throw `RangeError` for marks or bands they cannot place, as `StackedBarChart` does.
+Axis labels never overlap at 720 or 358 px: `timeSeries` labels recorded positions spread evenly across the plot, and `timeline` uses the smallest clock step (1 min to 7 days) whose labels fit, naming the date at midnight.
 
-`timeline` refuses an open span without `now`, a span outside a supplied `start`/`end` window and reversed times. States named in `hatch` (default `missing`, `untraced`) are hatched; states in `muted` (default `idle`) use the muted tone.
-`Gantt` keeps its single-span `rows` input; `lanes` takes the same shape as `timeline`.
+`timeline` refuses an open span without `now`, a span, tick or `now` outside a supplied `start`/`end` window and reversed times. States named in `hatch` (default `missing`, `untraced`) are hatched; states in `muted` (default `idle`) use the muted tone.
+The window defaults to the extent of the data (spans, ticks and `now`), so a run that ended early is not drawn out to its deadline: a mark past the window, such as the deadline, is named at the edge it falls past with its distance (`Deadline +21.9 h →`), listed in the note, and not drawn; bands are clipped to the window.
+Pass `start` (the run's start) to show time before the first span.
+
+Lanes form a tree through `parent`: each lane is drawn under its parent with a connector, siblings and roots keep their input order, and `depth` defaults to the parent's depth plus one. A stated depth that disagrees with the parent, a parent that is not a lane and a parent chain that loops are refused.
+`ticks` are recorded attempts, such as driver turns, at the time each ended: ok ticks rise above the bar and failed ticks drop below it in their outcome's colour (quota and rate-limit a light breach tone, oom, refused and other the breach tone, aborted ink), and the lane ends with its counts, `21✓ 250✗`. A lane without `ticks` shows no counts; an empty `ticks` shows `0✓ 0✗`. Ticks of one outcome within 2 px are drawn as one, with the count and the commonest `note` in its hover. An unknown outcome is refused.
+A mark with a `lane` is drawn on that lane only (a steer to one agent, a wake of the root) instead of across every lane; a lane that is not in the figure is refused.
+`detail` is the caller's facts about a lane (profile, model, status, attempts, cost, top error), one hover line each on the lane's label and every span, and a column of the lanes table.
+`collapsed` folds the named lanes' subtrees: descendants are hidden, the label gains `+N`, and the folded lane's ticks and counts total its subtree. Passing `collapsed`, even empty, makes each parent lane's label a fold toggle (`data-toggle`, a button with `aria-expanded`); `TimelineView` keeps the fold state and wires the toggles to a click, Enter or Space, returning focus to the toggle.
+`Gantt` keeps its single-span `rows` input; `lanes` takes the same shape as `timeline` and draws spans only.
 
 `Meter` with `segments` draws each recorded part of `total`; the remainder no segment accounts for is hatched and labelled `untraced` (rename it with `untraced`). A null segment is listed as `not recorded` and takes no width; a missing total hatches the whole track. Parts that sum past the total throw.
 
 `smallMultiples` draws one panel per arm. A `missing` panel is hatched and reads `no data: <why>`; an `end` stops the line at a mark of its kind. It refuses mixed units, values outside the shared domain, points after an end and a missing panel that also carries data. `shared: "x"` keeps one x domain and requires each panel's own y `domain`. The lede counts `n of m <noun>s have data`.
 
+`TimelineView` is `FigureView` around `timeline(lanes, { ...options, collapsed })`; `defaultCollapsed` names the lanes folded on first render.
+
 `FigureView` embeds any static `Figure | Refusal` in React: the wide render in containers of 720 px or more, the phone render (or the table, when a figure has none) below that, and the data, reading and method in a closed disclosure. A refusal renders as its sentence. Import `figure.css` for its styles.
 
 `node scripts/capture-run-page.mjs [dir]` (after `npm run build`) captures each addition at 1440 px light and 390 px dark; the reviewed images are `docs/screenshots/run-page-*.png`.

package/dist/figure.css

@@ -352,9 +352,27 @@
 .tgc-mark-deadline { stroke: var(--chart-ink); stroke-dasharray: 5 3; }
 .tgc-mark-died { stroke: var(--chart-breach, var(--status-error)); stroke-width: 2; }
 .tgc-mark-event { stroke: var(--chart-ink-muted); stroke-dasharray: 1 3; stroke-linecap: round; }
+.tgc-mark-release { stroke: var(--chart-ink-muted); }
+.tgc-mark-steer { stroke: var(--chart-accent); stroke-dasharray: 1 3; stroke-linecap: round; }
+.tgc-mark-ruling { stroke: var(--chart-ink); stroke-dasharray: 6 2 1 2; }
+.tgc-mark-wake { stroke: var(--chart-ink-muted); stroke-dasharray: 1 3; stroke-linecap: round; }
+.tgc-mark-head { fill: var(--chart-ink-muted); stroke: var(--chart-canvas); stroke-width: 1; }
+[data-mark="steer"] .tgc-mark-head { fill: var(--chart-accent); }
+[data-mark="ruling"] .tgc-mark-head { fill: var(--chart-ink); }
+/* A recorded verdict colours the rule and head: pass and fail take the status tones, unknown the muted tone. */
+.tgc-verdict-pass .tgc-mark { stroke: var(--chart-pass, var(--status-running)); }
+.tgc-verdict-pass .tgc-mark-head { fill: var(--chart-pass, var(--status-running)); }
+.tgc-verdict-fail .tgc-mark { stroke: var(--chart-breach, var(--status-error)); }
+.tgc-verdict-fail .tgc-mark-head { fill: var(--chart-breach, var(--status-error)); }
+.tgc-verdict-unknown .tgc-mark { stroke: var(--chart-muted); }
+.tgc-verdict-unknown .tgc-mark-head { fill: var(--chart-muted); }
 .tgc-mark-label { fill: var(--chart-ink); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }
+.tgc-mark-edge { fill: var(--chart-ink-muted); }
 .tgc-band-after-pass { fill: color-mix(in srgb, var(--chart-pass, var(--status-running)) 12%, transparent); }
 .tgc-band-idle { fill: var(--chart-shade); }
+/* A system-wide wall, such as a quota window: a breach wash across every lane, topped by a solid edge. */
+.tgc-band-blocked { fill: color-mix(in srgb, var(--chart-breach, var(--status-error)) 9%, transparent); }
+.tgc-band-wall { stroke: var(--chart-breach, var(--status-error)); stroke-width: 2; }
 /* Missing data: a neutral wash under hatch lines, never a zero-height mark. */
 .tgc-hatch-bg { fill: color-mix(in srgb, var(--chart-muted) 10%, transparent); }
 .tgc-hatch { fill: none; stroke: var(--chart-muted); stroke-width: 1; }
@@ -362,6 +380,24 @@
 .tgc-span-muted { fill: var(--chart-muted); }
 .tgc-span-open { stroke: var(--chart-ink); stroke-width: 1.5; stroke-dasharray: 3 2; }
 .tgc-now { stroke: var(--chart-ink); stroke-width: 1.5; }
+/* Timeline trees and attempts. Ok ticks rise above the bar and failed ticks drop below it, so they read without colour. */
+.tgc-tree { fill: none; stroke: var(--chart-muted); stroke-width: 1; }
+.tgc-caret { fill: var(--chart-ink-muted); }
+.tgc-lane-toggle { cursor: pointer; }
+.tgc-lane-toggle:focus-visible { outline: none; }
+.tgc-lane-hit { fill: transparent; stroke: transparent; stroke-width: 2; }
+.tgc-lane-toggle:hover .tgc-lane-hit { fill: var(--chart-shade); }
+.tgc-lane-toggle:focus-visible .tgc-lane-hit { stroke: var(--chart-accent); }
+.tgc-tick { stroke-width: 1.5; }
+.tgc-tick-ok { stroke: var(--chart-pass, var(--status-running)); }
+.tgc-tick-quota, .tgc-tick-rate-limit { stroke: color-mix(in srgb, var(--chart-breach, var(--status-error)) 55%, var(--chart-canvas)); }
+.tgc-tick-oom, .tgc-tick-refused, .tgc-tick-other { stroke: var(--chart-breach, var(--status-error)); }
+.tgc-tick-aborted { stroke: var(--chart-ink); }
+/* Lane labels and counts keep a canvas halo, so rules and ticks under them never strike through the text. */
+.tgc-lane-label, .tgc-count { paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }
+.tgc-count { fill: var(--chart-ink); }
+.tgc-count-ok { fill: var(--chart-pass, var(--status-running)); }
+.tgc-count-failed { fill: var(--chart-breach, var(--status-error)); }
 
 /* FigureView (React) picks the render by measured width; the wide plot fills its container. */
 .tgc-figure-view { max-width: none; margin: 0; }

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { C as isRefusal, S as TierCounts, _ as MatrixCell, a as BandKind, b as Setup, c as MarkKind, d as CostBasis, f as Estimate, g as IntervalMethod, h as Interval, i as timeline, l as BreakdownInput, m as Figure, n as TimelineOptions, o as ChartBand, p as Exclusion, r as TimelineSpan, s as ChartMark, t as TimelineLane, u as ComparisonRow, v as RateRow, x as Tier, y as Refusal } from "./timeline-BAjzF-wL.js";
+import { C as Setup, E as isRefusal, S as Refusal, T as TierCounts, _ as Figure, a as TimelineTick, b as MatrixCell, c as ChartBand, d as MarkVerdict, f as BreakdownInput, g as Exclusion, h as Estimate, i as TimelineSpan, l as ChartMark, m as CostBasis, n as TimelineLane, o as timeline, p as ComparisonRow, r as TimelineOptions, s as BandKind, t as TickOutcome, u as MarkKind, v as Interval, w as Tier, x as RateRow, y as IntervalMethod } from "./timeline-CCEJug7n.js";
 //#region src/block.d.ts
 interface RenderFigureOptions {
   /** Chart uses a closed data disclosure; plot keeps only the SVG and accessible data. */
@@ -260,4 +260,4 @@ interface SmallMultiplesOptions {
 }
 export declare function smallMultiples(panels: MultiplePanel[], o: SmallMultiplesOptions): Figure | Refusal;
 //#endregion
-export { type BandKind, type BreakdownInput, type BreakdownOptions, type ChartBand, type ChartMark, type ComparisonIntervalsOptions, type ComparisonRow, type CostBasis, type CostFrontierOptions, type Estimate, type Exclusion, type Figure, type HeatmapCell, type HeatmapColumn, type HeatmapOptions, type HeatmapRow, type HeatmapStatus, type Interval, type IntervalMethod, type LatencyRangeOptions, type LatencyRangeRow, type MarkKind, type MatrixCell, type MetricBarsOptions, type MetricRow, type MultiplePanel, type Observations, type PhaseWaterfallOptions, type RankedRatesOptions, type RateIdentity, type RateRow, type Refusal, type RenderFigureOptions, type Setup, type SmallMultiplesOptions, type TaskMatrixOptions, type Tier, type TierCounts, type TimePoint, type TimeSeriesOptions, type TimeSeriesRow, type TimelineLane, type TimelineOptions, type TimelineSpan, type WaterfallPhase, isRefusal, timeline };
+export { type BandKind, type BreakdownInput, type BreakdownOptions, type ChartBand, type ChartMark, type ComparisonIntervalsOptions, type ComparisonRow, type CostBasis, type CostFrontierOptions, type Estimate, type Exclusion, type Figure, type HeatmapCell, type HeatmapColumn, type HeatmapOptions, type HeatmapRow, type HeatmapStatus, type Interval, type IntervalMethod, type LatencyRangeOptions, type LatencyRangeRow, type MarkKind, type MarkVerdict, type MatrixCell, type MetricBarsOptions, type MetricRow, type MultiplePanel, type Observations, type PhaseWaterfallOptions, type RankedRatesOptions, type RateIdentity, type RateRow, type Refusal, type RenderFigureOptions, type Setup, type SmallMultiplesOptions, type TaskMatrixOptions, type TickOutcome, type Tier, type TierCounts, type TimePoint, type TimeSeriesOptions, type TimeSeriesRow, type TimelineLane, type TimelineOptions, type TimelineSpan, type TimelineTick, type WaterfallPhase, isRefusal, timeline };

package/dist/index.js

@@ -1,4 +1,4 @@
-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";
+import { A as usdTick, B as rect, C as rateDataGap, D as tierSummary, E as tierAtLeast, G as esc, H as text, I as hbar, J as plural, K as fitLines, L as line, M as MARKER_SHAPES, N as circle, O as tierTotal, P as hatch, R as markerPath, S as pts, T as rateOrder, U as titled, V as svgRoot, W as capitalize, X as textWidth, Y as textBlock, Z as wrap, _ as intervalGap, a as drawMarks, b as pct, c as markLabelRows, d as METHOD_NAME, f as TIERS_BEST_FIRST, g as estimateNote, h as duration, i as drawBands, j as table, k as usd, m as drawable, n as EVENTS_READ, o as eventsGap, p as costText, q as listJoin, s as eventsTable, t as timeline, u as isRefusal, v as intervalName, w as rateIntervalGap, x as perPass, y as kn, z as polyline } from "./timeline-CCWFvLxg.js";
 //#region src/block.ts
 /**
 * The figure block: one markup for every figure on every surface.
@@ -526,138 +526,6 @@ function draw$2(rows, total, width, short) {
 	return svgRoot(width, top + rows.length * rowH + 2, body);
 }
 //#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/scale.ts
 function linear(domain, range) {
 	const [d0, d1] = domain;
@@ -1268,7 +1136,7 @@ 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: 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";
+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-release { stroke: var(--chart-ink-muted); }\n.tgc-mark-steer { stroke: var(--chart-accent); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-ruling { stroke: var(--chart-ink); stroke-dasharray: 6 2 1 2; }\n.tgc-mark-wake { stroke: var(--chart-ink-muted); stroke-dasharray: 1 3; stroke-linecap: round; }\n.tgc-mark-head { fill: var(--chart-ink-muted); stroke: var(--chart-canvas); stroke-width: 1; }\n[data-mark=\"steer\"] .tgc-mark-head { fill: var(--chart-accent); }\n[data-mark=\"ruling\"] .tgc-mark-head { fill: var(--chart-ink); }\n/* A recorded verdict colours the rule and head: pass and fail take the status tones, unknown the muted tone. */\n.tgc-verdict-pass .tgc-mark { stroke: var(--chart-pass, var(--status-running)); }\n.tgc-verdict-pass .tgc-mark-head { fill: var(--chart-pass, var(--status-running)); }\n.tgc-verdict-fail .tgc-mark { stroke: var(--chart-breach, var(--status-error)); }\n.tgc-verdict-fail .tgc-mark-head { fill: var(--chart-breach, var(--status-error)); }\n.tgc-verdict-unknown .tgc-mark { stroke: var(--chart-muted); }\n.tgc-verdict-unknown .tgc-mark-head { fill: var(--chart-muted); }\n.tgc-mark-label { fill: var(--chart-ink); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n.tgc-mark-edge { fill: var(--chart-ink-muted); }\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/* A system-wide wall, such as a quota window: a breach wash across every lane, topped by a solid edge. */\n.tgc-band-blocked { fill: color-mix(in srgb, var(--chart-breach, var(--status-error)) 9%, transparent); }\n.tgc-band-wall { stroke: var(--chart-breach, var(--status-error)); stroke-width: 2; }\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/* Timeline trees and attempts. Ok ticks rise above the bar and failed ticks drop below it, so they read without colour. */\n.tgc-tree { fill: none; stroke: var(--chart-muted); stroke-width: 1; }\n.tgc-caret { fill: var(--chart-ink-muted); }\n.tgc-lane-toggle { cursor: pointer; }\n.tgc-lane-toggle:focus-visible { outline: none; }\n.tgc-lane-hit { fill: transparent; stroke: transparent; stroke-width: 2; }\n.tgc-lane-toggle:hover .tgc-lane-hit { fill: var(--chart-shade); }\n.tgc-lane-toggle:focus-visible .tgc-lane-hit { stroke: var(--chart-accent); }\n.tgc-tick { stroke-width: 1.5; }\n.tgc-tick-ok { stroke: var(--chart-pass, var(--status-running)); }\n.tgc-tick-quota, .tgc-tick-rate-limit { stroke: color-mix(in srgb, var(--chart-breach, var(--status-error)) 55%, var(--chart-canvas)); }\n.tgc-tick-oom, .tgc-tick-refused, .tgc-tick-other { stroke: var(--chart-breach, var(--status-error)); }\n.tgc-tick-aborted { stroke: var(--chart-ink); }\n/* Lane labels and counts keep a canvas halo, so rules and ticks under them never strike through the text. */\n.tgc-lane-label, .tgc-count { paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n.tgc-count { fill: var(--chart-ink); }\n.tgc-count-ok { fill: var(--chart-pass, var(--status-running)); }\n.tgc-count-failed { fill: var(--chart-breach, var(--status-error)); }\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-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
@@ -2403,9 +2271,11 @@ function timeSeries(rows, o) {
 function plot(rows, o, width, xLabel, yLabel, facts) {
 	const ticks = Array.from({ length: 5 }, (_, i) => o.y.domain[0] + i / 4 * (o.y.domain[1] - o.y.domain[0]));
 	const left = axisGutter(ticks, yLabel);
-	const right = width - 24, top = 36, bottom = 260;
+	const right = width - 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 - o.y.domain[0]) / (o.y.domain[1] - o.y.domain[0]) * 224;
+	const labelRows = markLabelRows(o.marks ?? [], px, left, right);
+	const top = 36 + (labelRows ? labelRows * 14 + 2 : 0), bottom = top + 224;
+	const py = (y) => bottom - (y - o.y.domain[0]) / (o.y.domain[1] - o.y.domain[0]) * (bottom - top);
 	let marks = text(left, 18, o.y.label, { cls: "tgc-ink-muted" });
 	for (const [i, y] of ticks.entries()) marks += line(left, py(y), right, py(y), i === 0 ? "tgc-axis" : "tgc-gridline") + text(left - 8, py(y) + 4, yLabel(y), {
 		anchor: "end",
@@ -2413,17 +2283,16 @@ function plot(rows, o, width, xLabel, yLabel, facts) {
 		size: 12
 	});
 	const xs = [...new Set(rows.flatMap((row) => row.points.map((point) => point.x)))].sort((a, b) => a - b);
-	const tickStep = Math.max(1, Math.ceil(xs.length / (width < 720 ? 5 : 10)));
-	for (const [i, x] of xs.entries()) if (i % tickStep === 0 || i === xs.length - 1) marks += text(px(x), 280, xLabel(x), {
+	for (const x of xTicks(xs, px, left, right, width, xLabel)) marks += text(px(x), bottom + 20, xLabel(x), {
 		anchor: "middle",
 		cls: "tgc-ink-muted tgc-num"
 	});
-	marks += text((left + right) / 2, 303, o.x.label, {
+	marks += text((left + right) / 2, bottom + 43, o.x.label, {
 		anchor: "middle",
 		cls: "tgc-ink-muted"
 	});
 	marks += drawBands(o.bands ?? [], px, top, bottom, xLabel);
-	let legendY = 332;
+	let legendY = bottom + 72;
 	let points = "", tips = "", rules = "";
 	let pointId = 0;
 	for (const [seriesIndex, row] of rows.entries()) {
@@ -2447,7 +2316,7 @@ function plot(rows, o, width, xLabel, yLabel, facts) {
 			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));
 			const lines = pointFacts.flatMap((fact) => wrap(fact, tipWidth - 24, 12, "sans", 8).lines);
-			tips += `<g class="tgc-series-tip" data-series-tip="${key}" aria-hidden="true">${rect(tipX, top, tipWidth, lines.length * 17 + 24, "tgc-tip-bg", "rx=\"7\"")}${textBlock(lines, tipX + 12, 56, 17, "class=\"tgc-tip-ink\" font-size=\"12\"")}</g>`;
+			tips += `<g class="tgc-series-tip" data-series-tip="${key}" aria-hidden="true">${rect(tipX, top, tipWidth, lines.length * 17 + 24, "tgc-tip-bg", "rx=\"7\"")}${textBlock(lines, tipX + 12, top + 20, 17, "class=\"tgc-tip-ink\" font-size=\"12\"")}</g>`;
 			rules += `.tgc-trajectories:has([data-point="${key}"]:hover) [data-series-tip="${key}"],.tgc-trajectories:not(:has(.tgc-series-observation:hover)):has([data-point="${key}"]:focus-visible) [data-series-tip="${key}"]{opacity:1}`;
 		}
 		flush();
@@ -2455,162 +2324,39 @@ function plot(rows, o, width, xLabel, yLabel, facts) {
 		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;
 	}
-	const events = drawMarks(o.marks ?? [], px, top, bottom, left, right, xLabel);
+	const events = drawMarks(o.marks ?? [], px, top, bottom, left, right, xLabel, 22);
 	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>`;
 }
+/**
+* X labels at recorded positions, spread evenly across the plot and measured so none overlap: at most as many as fit,
+* each snapped to the nearest recorded x, always keeping the first and the last that fit.
+*/
+function xTicks(xs, px, left, right, width, label) {
+	if (!xs.length) return [];
+	const span = (x) => {
+		const w = textWidth(label(x), 12, "mono");
+		return [px(x) - w / 2, px(x) + w / 2];
+	};
+	const widest = Math.max(...xs.map((x) => textWidth(label(x), 12, "mono")));
+	const slots = Math.max(1, Math.min(xs.length, Math.floor((right - left) / (widest + 12)) + 1));
+	const anchors = slots === 1 ? [xs[0]] : Array.from({ length: slots }, (_, i) => left + (right - left) * i / (slots - 1)).map((target) => xs.reduce((best, x) => Math.abs(px(x) - target) < Math.abs(px(best) - target) ? x : best, xs[0]));
+	const kept = [];
+	for (const x of [...new Set(anchors)]) {
+		const [a, b] = span(x);
+		if (a < 2 || b > width - 2) continue;
+		const previous = kept.at(-1);
+		if (previous !== void 0 && a < span(previous)[1] + 10) {
+			if (x !== xs.at(-1) || kept.length === 1) continue;
+			kept.pop();
+		}
+		kept.push(x);
+	}
+	return kept;
+}
 function axisGutter(ticks, label) {
 	return Math.max(64, ...ticks.map((value) => Math.ceil(textWidth(label(value), 12, "mono")) + 20));
 }
 //#endregion
-//#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

package/dist/react/index.d.ts

@@ -1,5 +1,9 @@
-import { a as BandKind, c as MarkKind, m as Figure, o as ChartBand, r as TimelineSpan, s as ChartMark, t as TimelineLane, y as Refusal } from "../timeline-BAjzF-wL.js";
+import { S as Refusal, _ as Figure, a as TimelineTick, c as ChartBand, d as MarkVerdict, i as TimelineSpan, l as ChartMark, n as TimelineLane, r as TimelineOptions, s as BandKind, t as TickOutcome, u as MarkKind } from "../timeline-CCEJug7n.js";
 import { ReactElement, ReactNode } from "react";
+//#region src/svg.d.ts
+/** Point shapes: the second channel that keeps series distinct without colour. */
+type MarkerShape = "circle" | "square" | "triangle" | "diamond";
+//#endregion
 //#region src/react/sparkline.d.ts
 type SparklineDirection = "rising" | "falling" | "flat";
 type SparklineValues = readonly (number | null)[];
@@ -66,6 +70,12 @@ interface StackedBarBucket {
   readonly total: number | null;
   /** Stack order is input order. Charts neither groups nor sorts. */
   readonly segments: readonly StackedBarSegment[];
+  /**
+   * Caller-owned text about this bucket that the chart cannot derive, such as
+   * request counts. Appended to the bar's name, the live readout and the
+   * pointer tooltip; never parsed.
+   */
+  readonly description?: string;
 }
 interface StackedBarChartProps {
   label: string;
@@ -132,10 +142,6 @@ interface WaterfallHeaderProps extends WaterfallTimeAxisProps {
 }
 export declare function WaterfallHeader({ label, attribution, durationLabel, ...axis }: WaterfallHeaderProps): import("react").JSX.Element;
 //#endregion
-//#region src/svg.d.ts
-/** Point shapes: the second channel that keeps series distinct without colour. */
-type MarkerShape = "circle" | "square" | "triangle" | "diamond";
-//#endregion
 //#region src/react/live.d.ts
 export declare const LIVE_SERIES: readonly ['#8b7cf6', '#0ea5a0', '#c98500', '#e2508f', '#4a90e2'];
 export declare const formatCompact: (value: number | null | undefined) => string;
@@ -253,4 +259,14 @@ interface FigureViewProps {
 }
 export declare function FigureView({ figure, presentation }: FigureViewProps): import("react").JSX.Element;
 //#endregion
-export type { BandKind, ChartBand, ChartMark, Figure, FigureViewProps, LineSeries, MarkKind, MarkerShape, MeterSegment, Refusal, SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, TimelineLane, TimelineSpan, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow };
+//#region src/react/timeline-view.d.ts
+interface TimelineViewProps {
+  lanes: TimelineLane[];
+  options: Omit<TimelineOptions, 'collapsed'>;
+  /** Lane ids folded on first render, such as every lead on a large team. */
+  defaultCollapsed?: string[];
+  presentation?: FigureViewProps['presentation'];
+}
+export declare function TimelineView({ lanes, options, defaultCollapsed, presentation }: TimelineViewProps): import("react").JSX.Element;
+//#endregion
+export type { BandKind, ChartBand, ChartMark, Figure, FigureViewProps, LineSeries, MarkKind, MarkVerdict, MarkerShape, MeterSegment, Refusal, SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, TickOutcome, TimelineLane, TimelineOptions, TimelineSpan, TimelineTick, TimelineViewProps, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow };