@tangle-network/charts 0.10.0 → 0.12.0

package/README.md

@@ -244,7 +244,7 @@ const climb = timeSeries(rows, {
 
 The bar panels share the climb's columns: `smallMultiples(panels, { shared: "x", x: { label, domain, categories }, columns: 2, connect: false, markers })`, each panel with its own `unit`, `format`, `scale: "log"`, `domain` and `targets`. `docs/fixtures/magnetar-play.json` holds the Magnetar play's real 17c, 18b and 19b rows in these shapes (`docs/fixtures/export-magnetar-play.mjs` exports them on the Lab host), and `src/run-page-figures.test.ts` draws them.
 
-Attempt outcomes and checkers have one palette in every view. `OUTCOME_ORDER` is the stack order (ok, quota, lost, rate-limit, oom, refused, aborted, other; an open attempt is hatched, never an outcome); `OUTCOME_COLORS[outcome]` and `checkerColor(index)` return the `var(--chart-outcome-*)` and `var(--chart-checker-*)` tokens `figure.css` defines as `light-dark()` pairs, so they follow the page's `color-scheme`. Aborted and other share the neutral tone and always carry a label. `node scripts/palette-check.mjs <dataviz validate_palette.js>` checks both palettes, adjacent pairs in order, on the light surface and on #161616.
+Attempt outcomes, checkers and run endings have one palette in every view. Green, red and amber are status colours and mean one thing everywhere: an `ok` attempt and a solved run are green, a run that died is red, a stalled run and a rate-limited attempt are amber. `OUTCOME_ORDER` is the stack order (ok, quota, lost, rate-limit, oom, refused, aborted, other; an open attempt is hatched, never an outcome); `OUTCOME_COLORS[outcome]`, `checkerColor(index)` and `ENDING_COLORS[ending]` return the `var(--chart-outcome-*)`, `var(--chart-checker-*)` and `var(--chart-ending-*)` tokens `figure.css` defines as `light-dark()` pairs, so they follow the page's `color-scheme`. Aborted and other are two distinct greys and always carry a label. Checker hues (blue for the current checker, then magenta, cyan and violet) avoid the status colours, so a checker's colour never reads as a verdict; a failing verdict without a value is a neutral ring in the strip. `ENDING_ORDER` is solved, not solved, died, stalled, cancelled, live, never started. `node scripts/palette-check.mjs <dataviz validate_palette.js>` checks both palettes, adjacent pairs in order, on the light surface and on #161616.
 
 | Play page figure | 1440 light | 390 dark |
 |---|---|---|
@@ -302,6 +302,12 @@ Selection is controlled by bucket ID. Hover, focus, click, Enter, Space and touc
 
 **Provenance and extraction boundary.** Sparkline comes from `tangle-network/agent-app`, `src/web-react/sparkline.tsx` and its tests at `a8947683a050394d13848bb7e4cbbe7cf08d208e`. Stacked SVG rendering and select-never-toggle regressions come from merged ADC [PR #8746](https://github.com/tangle-network/agent-dev-container/pull/8746), `products/platform/web/src/client/components/UsageChartSvg.tsx` and `UsageChart.test.tsx` at `a1c3958fd73a3894d4515f9dc476dae9ace30ce0`. Platform's aggregation, currency/product/category functions, legend composition and portal-tooltip positioning are **not** copied. The persistent readout and native pointer popover avoid a new React DOM peer. This is not a new universal usage-chart API, a zero-baseline replacement for SpendCard's sparkline, or a consumer migration; Platform and Agent App are not edited.
 
+### Thousands of dots: `DotMap` and `unitDotLayout`
+
+`unitDotLayout(groups, width, height)` places one dot per item in a rectangle per group, the rectangles a squarified treemap sized by count, so a fleet of 6,000 runs reads as its groups first and its items second with no item hidden in an aggregate. It returns the rectangles, every item's `x, y` (interleaved, groups in input order) and a radius per item from its group's cell.
+
+`DotMap` draws those positions, or a semantic map's `x, y`, on one canvas: wheel or pinch zooms about the pointer, drag pans, a click selects, double-click or `0` fits, and `+ - ←→↑↓` work from the keyboard. Colours are palette indexes (`colors: Uint8Array` into `palette`, CSS colours or custom properties), so a lens change repaints without a new layout; `dimmed` greys filtered points, `radii` may vary per point (a dot sized by its run's hours inside its cell), and `labels` name clusters without overlapping. Hit tests use a uniform grid, one path is filled per colour, and the canvas records its last frame's draw time in `data-frame-ms`. The caller owns hover text (`describe`), selection, the legend and the details.
+
 ### React and package-boundary checks
 
 ```sh

package/dist/figure.css

@@ -395,7 +395,8 @@
 .tgc-tick-rate-limit { stroke: var(--chart-outcome-rate-limit); }
 .tgc-tick-oom { stroke: var(--chart-outcome-oom); }
 .tgc-tick-refused { stroke: var(--chart-outcome-refused); }
-.tgc-tick-aborted, .tgc-tick-other { stroke: var(--chart-outcome-neutral); }
+.tgc-tick-aborted { stroke: var(--chart-outcome-neutral); }
+.tgc-tick-other { stroke: var(--chart-outcome-other); }
 /* 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); }
@@ -409,24 +410,36 @@
 .tgc-view-narrow svg { max-width: 100%; height: auto; }
 
 /*
- * One fixed palette for attempt outcomes and check versions in every view (src/outcomes.ts names them). Each is a
- * light-dark() pair picked by the page's color-scheme. Outcomes pass the dataviz colour-vision checks as adjacent
- * pairs in stack order (ok, quota, lost, rate-limit, oom, refused) on the light surface and on #161616; checkers pass
- * as adjacent series (current, then older). `scripts/palette-check.mjs` re-runs the validator. A page may override
- * any of these properties; :where() keeps them at zero specificity.
+ * One fixed palette in every view (src/outcomes.ts names them), each a light-dark() pair picked by the page's
+ * color-scheme. Green, red and amber are status colours and mean one thing everywhere: green is a turn or run that
+ * worked (an `ok` attempt, a solved run), red a run that died, amber a run stalled or a turn rate-limited. Outcomes
+ * pass the dataviz colour-vision checks as adjacent pairs in stack order (ok, quota, lost, rate-limit, oom, refused) on
+ * the light surface and on #161616; `aborted` and `other` are two distinct greys. Checkers take hues no status uses
+ * (blue for the current checker, then magenta, cyan and violet for older ones) and pass as adjacent series; their
+ * marks also carry a vN label. Run endings reuse those colours. `scripts/palette-check.mjs` re-runs the validator. A
+ * page may override any of these properties; :where() keeps them at zero specificity.
  */
 :where(:root) {
-  --chart-outcome-ok: light-dark(#2a78d6, #3987e5);
+  --chart-outcome-ok: light-dark(#1baf7a, #199e70);
   --chart-outcome-quota: light-dark(#eb6834, #d95926);
-  --chart-outcome-lost: light-dark(#1baf7a, #199e70);
+  --chart-outcome-lost: light-dark(#0f9fb8, #1a9cb3);
   --chart-outcome-rate-limit: light-dark(#eda100, #c98500);
   --chart-outcome-oom: light-dark(#e87ba4, #d55181);
   --chart-outcome-refused: light-dark(#6250d6, #9085e9);
   --chart-outcome-neutral: #898781;
+  --chart-outcome-other: #b5b3ac;
   --chart-checker-0: light-dark(#2a78d6, #3987e5);
-  --chart-checker-1: light-dark(#1baf7a, #199e70);
-  --chart-checker-2: light-dark(#6250d6, #9085e9);
-  --chart-checker-3: light-dark(#eda100, #c98500);
+  --chart-checker-1: light-dark(#b8478f, #c2408f);
+  --chart-checker-2: light-dark(#0f9fb8, #1a9cb3);
+  --chart-checker-3: light-dark(#6250d6, #8c7ce6);
+  /* How a run ended: solved green, died red, stalled amber, live blue; not solved and cancelled are neutral. */
+  --chart-ending-solved: var(--chart-outcome-ok);
+  --chart-ending-died: light-dark(#d03b3b, #e05252);
+  --chart-ending-stalled: var(--chart-outcome-rate-limit);
+  --chart-ending-live: var(--chart-checker-0);
+  --chart-ending-not-solved: light-dark(#6b7a90, #8494ab);
+  --chart-ending-cancelled: var(--chart-outcome-neutral);
+  --chart-ending-never-started: color-mix(in srgb, var(--chart-outcome-other) 45%, transparent);
 }
 /* A series drawn in a checker's hue; past the fourth hue it is muted and named by its label. */
 .tgc-checker-0 { --tgc-series: var(--chart-checker-0); }
@@ -438,6 +451,8 @@
 .tgc-series-point.tgc-point-outline { fill: var(--chart-canvas); stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 1.75; }
 .tgc-series-point.tgc-point-undecided { fill: var(--chart-canvas); stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 1.5; stroke-dasharray: 2 1.5; }
 .tgc-strip-hatch .tgc-hatch { stroke: var(--tgc-series, var(--chart-muted)); }
+/* A failing verdict without a value is a neutral ring: in its checker's hue it read as that checker passing. */
+.tgc-series-point.tgc-point-outline.tgc-strip-fail { stroke: var(--chart-ink-muted); }
 .tgc-strip-edge { fill: none; stroke: var(--tgc-series, var(--chart-muted)); stroke-width: 1.25; }
 .tgc-strip-observation:focus-visible { outline: none; }
 .tgc-strip-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { A as IntervalMethod, C as BreakdownInput, D as Exclusion, E as Estimate, F as Tier, I as TierCounts, L as isRefusal, M as RateRow, N as Refusal, O as Figure, P as Setup, S as YTick, T as CostBasis, _ as MarkVerdict, a as timeline, b as YScale, c as OUTCOME_ORDER, d as PointFields, f as PointGlyph, g as MarkKind, h as ChartMark, i as TimelineTick, j as MatrixCell, k as Interval, l as TickOutcome, m as ChartBand, n as TimelineOptions, o as CHECKER_HUES, p as BandKind, r as TimelineSpan, s as OUTCOME_COLORS, t as TimelineLane, u as checkerColor, v as MarkerShape, w as ComparisonRow, x as YTarget, y as XCategory } from "./timeline-irTei5Fl.js";
+import { A as Exclusion, B as isRefusal, C as YScale, D as ComparisonRow, E as BreakdownInput, F as RateRow, I as Refusal, L as Setup, M as Interval, N as IntervalMethod, O as CostBasis, P as MatrixCell, R as Tier, S as XCategory, T as YTick, _ as ChartBand, a as timeline, b as MarkVerdict, c as ENDING_ORDER, d as RunEnding, f as TickOutcome, g as BandKind, h as PointGlyph, i as TimelineTick, j as Figure, k as Estimate, l as OUTCOME_COLORS, m as PointFields, n as TimelineOptions, o as CHECKER_HUES, p as checkerColor, r as TimelineSpan, s as ENDING_COLORS, t as TimelineLane, u as OUTCOME_ORDER, v as ChartMark, w as YTarget, x as MarkerShape, y as MarkKind, z as TierCounts } from "./timeline-BvVxPTGp.js";
 //#region src/block.d.ts
 interface RenderFigureOptions {
   /** Chart uses a closed data disclosure; plot keeps only the SVG and accessible data. */
@@ -301,4 +301,47 @@ interface SmallMultiplesOptions {
 }
 export declare function smallMultiples(panels: MultiplePanel[], o: SmallMultiplesOptions): Figure | Refusal;
 //#endregion
-export { type BandKind, type BreakdownInput, type BreakdownOptions, CHECKER_HUES, 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, OUTCOME_COLORS, OUTCOME_ORDER, type Observations, type PhaseWaterfallOptions, type PointFields, type PointGlyph, 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, type XCategory, type YScale, type YTarget, type YTick, checkerColor, isRefusal, timeline };
+//#region src/unit-dots.d.ts
+/**
+ * Unit dots: one dot per item, packed in a rectangle per group, the rectangles laid out as a squarified treemap sized
+ * by count. A fleet of 6,000 runs reads as its groups first and its items second, with no item hidden in an
+ * aggregate. Positions are in layout units (the `width` and `height` given); a canvas scales them to its pixels.
+ */
+interface DotGroup {
+  id: string;
+  label: string;
+  /** Items in this group; their positions come out in group order, then item order within the group. */
+  count: number;
+}
+interface DotGroupRect {
+  id: string;
+  label: string;
+  count: number;
+  x0: number;
+  y0: number;
+  x1: number;
+  y1: number;
+}
+interface UnitDotLayout {
+  rects: DotGroupRect[];
+  /** x, y of every item, interleaved, groups in input order. */
+  positions: Float32Array;
+  /** Each item's dot radius in layout units: one size per group, from its cell. */
+  radii: Float32Array;
+}
+interface UnitDotOptions {
+  /** Space between rectangles. Default 6. */
+  gap?: number;
+  /** Space above each rectangle's dots for its label. Default 16. */
+  header?: number;
+  /** The largest dot radius, so a group of three is not three giant discs. Default 6. */
+  maxRadius?: number;
+}
+/**
+ * Lays out `groups` in a `width` × `height` box: a treemap rectangle per group with a header for its label, and its
+ * items on a grid of square cells inside it, filled row by row. Groups keep their input order in `positions`; the
+ * treemap places larger groups first.
+ */
+export declare function unitDotLayout(groups: DotGroup[], width: number, height: number, o?: UnitDotOptions): UnitDotLayout;
+//#endregion
+export { type BandKind, type BreakdownInput, type BreakdownOptions, CHECKER_HUES, type ChartBand, type ChartMark, type ComparisonIntervalsOptions, type ComparisonRow, type CostBasis, type CostFrontierOptions, type DotGroup, type DotGroupRect, ENDING_COLORS, ENDING_ORDER, 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, OUTCOME_COLORS, OUTCOME_ORDER, type Observations, type PhaseWaterfallOptions, type PointFields, type PointGlyph, type RankedRatesOptions, type RateIdentity, type RateRow, type Refusal, type RenderFigureOptions, type RunEnding, 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 UnitDotLayout, type UnitDotOptions, type WaterfallPhase, type XCategory, type YScale, type YTarget, type YTick, checkerColor, isRefusal, timeline };

package/dist/index.js

@@ -1,4 +1,4 @@
-import { $ as capitalize, A as pts, B as MARKER_SHAPES, C as duration, D as kn, E as intervalName, F as tierSummary, G as line, H as hatch, I as tierTotal, J as rect, K as markerPath, L as usd, M as rateIntervalGap, N as rateOrder, O as pct, P as tierAtLeast, Q as wideWidth, R as usdTick, S as drawable, T as intervalGap, V as circle, W as hbar, X as text, Y as svgRoot, Z as titled, a as checkerClass, at as textWidth, b as TIERS_BEST_FIRST, d as drawGroups, et as esc, f as drawMarks, g as markLabelRows, h as groupRowHeight, i as OUTCOME_ORDER, it as textBlock, j as rateDataGap, k as perPass, l as MARK_VERDICTS, m as eventsTable, n as CHECKER_HUES, nt as listJoin, o as checkerColor, ot as wrap, p as eventsGap, q as polyline, r as OUTCOME_COLORS, rt as plural, s as EVENTS_READ, t as timeline, tt as fitLines, u as drawBands, v as isRefusal, w as estimateNote, x as costText, y as METHOD_NAME, z as table } from "./timeline-ApeJgFac.js";
+import { $ as titled, A as pct, B as usdTick, C as costText, D as intervalGap, E as estimateNote, F as rateOrder, H as MARKER_SHAPES, I as tierAtLeast, J as markerPath, K as hbar, L as tierSummary, M as pts, N as rateDataGap, O as intervalName, P as rateIntervalGap, Q as text, R as tierTotal, S as TIERS_BEST_FIRST, T as duration, U as circle, V as table, W as hatch, X as rect, Y as polyline, Z as svgRoot, _ as groupRowHeight, a as OUTCOME_COLORS, at as plural, b as isRefusal, c as checkerColor, ct as wrap, d as MARK_VERDICTS, et as wideWidth, f as drawBands, g as eventsTable, h as eventsGap, i as ENDING_ORDER, it as listJoin, j as perPass, k as kn, l as EVENTS_READ, m as drawMarks, n as CHECKER_HUES, nt as esc, o as OUTCOME_ORDER, ot as textBlock, p as drawGroups, q as line, r as ENDING_COLORS, rt as fitLines, s as checkerClass, st as textWidth, t as timeline, tt as capitalize, v as markLabelRows, w as drawable, x as METHOD_NAME, z as usd } from "./timeline-CVXBpZzt.js";
 //#region src/block.ts
 /**
 * The figure block: one markup for every figure on every surface.
@@ -1136,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(--tgc-series, var(--chart-accent)); stroke-width: 2; stroke-linejoin: round; }\n.tgc-series-point, .tgc-series-key { fill: var(--tgc-series, 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-outcome-ok); }\n.tgc-tick-quota { stroke: var(--chart-outcome-quota); }\n.tgc-tick-lost { stroke: var(--chart-outcome-lost); }\n.tgc-tick-rate-limit { stroke: var(--chart-outcome-rate-limit); }\n.tgc-tick-oom { stroke: var(--chart-outcome-oom); }\n.tgc-tick-refused { stroke: var(--chart-outcome-refused); }\n.tgc-tick-aborted, .tgc-tick-other { stroke: var(--chart-outcome-neutral); }\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\n/*\n * One fixed palette for attempt outcomes and check versions in every view (src/outcomes.ts names them). Each is a\n * light-dark() pair picked by the page's color-scheme. Outcomes pass the dataviz colour-vision checks as adjacent\n * pairs in stack order (ok, quota, lost, rate-limit, oom, refused) on the light surface and on #161616; checkers pass\n * as adjacent series (current, then older). `scripts/palette-check.mjs` re-runs the validator. A page may override\n * any of these properties; :where() keeps them at zero specificity.\n */\n:where(:root) {\n  --chart-outcome-ok: light-dark(#2a78d6, #3987e5);\n  --chart-outcome-quota: light-dark(#eb6834, #d95926);\n  --chart-outcome-lost: light-dark(#1baf7a, #199e70);\n  --chart-outcome-rate-limit: light-dark(#eda100, #c98500);\n  --chart-outcome-oom: light-dark(#e87ba4, #d55181);\n  --chart-outcome-refused: light-dark(#6250d6, #9085e9);\n  --chart-outcome-neutral: #898781;\n  --chart-checker-0: light-dark(#2a78d6, #3987e5);\n  --chart-checker-1: light-dark(#1baf7a, #199e70);\n  --chart-checker-2: light-dark(#6250d6, #9085e9);\n  --chart-checker-3: light-dark(#eda100, #c98500);\n}\n/* A series drawn in a checker's hue; past the fourth hue it is muted and named by its label. */\n.tgc-checker-0 { --tgc-series: var(--chart-checker-0); }\n.tgc-checker-1 { --tgc-series: var(--chart-checker-1); }\n.tgc-checker-2 { --tgc-series: var(--chart-checker-2); }\n.tgc-checker-3 { --tgc-series: var(--chart-checker-3); }\n.tgc-checker-other { --tgc-series: var(--chart-muted); }\n/* Recorded verdicts: a pass is filled, a fail or an incomparable value is an outline, an undecided one dashed. */\n.tgc-series-point.tgc-point-outline { fill: var(--chart-canvas); stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 1.75; }\n.tgc-series-point.tgc-point-undecided { fill: var(--chart-canvas); stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 1.5; stroke-dasharray: 2 1.5; }\n.tgc-strip-hatch .tgc-hatch { stroke: var(--tgc-series, var(--chart-muted)); }\n.tgc-strip-edge { fill: none; stroke: var(--tgc-series, var(--chart-muted)); stroke-width: 1.25; }\n.tgc-strip-observation:focus-visible { outline: none; }\n.tgc-strip-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }\n.tgc-point-badge { paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace); }\n.tgc-point-label { fill: var(--chart-ink-muted); }\n.tgc-glyph-note { fill: var(--chart-ink); font-weight: 600; }\n/* Status colours appear only on these glyphs. */\n.tgc-glyph-check { fill: var(--chart-pass, var(--status-running)); font-weight: 600; }\n.tgc-glyph-cross { fill: var(--chart-breach, var(--status-error)); font-weight: 600; }\n/* Recorded targets sit under the data: a target is a soft band between solid edges, a stretch a dashed outline. */\n.tgc-target-target { fill: color-mix(in srgb, var(--chart-ink) 7%, transparent); }\n.tgc-target-stretch { fill: none; }\n.tgc-target-target-edge, .tgc-target-target.tgc-target-line { stroke: var(--chart-ink-muted); stroke-width: 1; }\n.tgc-target-stretch-edge, .tgc-target-stretch.tgc-target-line { stroke: var(--chart-ink-muted); stroke-width: 1; stroke-dasharray: 4 3; }\n.tgc-target-label { fill: var(--chart-ink-muted); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n/* Group headers: a labelled bracket above the plot and a light rule at each inner edge. */\n.tgc-group-rule { stroke: var(--chart-ink-muted); stroke-width: 1.5; }\n.tgc-group-edge { stroke: var(--chart-rule); stroke-width: 1; }\n.tgc-group-label { fill: var(--chart-ink); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n/* The verdict key: glyphs in the neutral ink, so they describe a mark's form, not a series. */\n.tgc-key-mark { stroke-width: 1.5; }\n.tgc-key-filled { fill: var(--chart-ink-muted); stroke: none; }\n.tgc-key-outline { fill: none; stroke: var(--chart-ink-muted); }\n.tgc-key-dashed { fill: none; stroke: var(--chart-ink-muted); stroke-dasharray: 2 1.5; }\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(--tgc-series, var(--chart-accent)); stroke-width: 2; stroke-linejoin: round; }\n.tgc-series-point, .tgc-series-key { fill: var(--tgc-series, 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-outcome-ok); }\n.tgc-tick-quota { stroke: var(--chart-outcome-quota); }\n.tgc-tick-lost { stroke: var(--chart-outcome-lost); }\n.tgc-tick-rate-limit { stroke: var(--chart-outcome-rate-limit); }\n.tgc-tick-oom { stroke: var(--chart-outcome-oom); }\n.tgc-tick-refused { stroke: var(--chart-outcome-refused); }\n.tgc-tick-aborted { stroke: var(--chart-outcome-neutral); }\n.tgc-tick-other { stroke: var(--chart-outcome-other); }\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\n/*\n * One fixed palette in every view (src/outcomes.ts names them), each a light-dark() pair picked by the page's\n * color-scheme. Green, red and amber are status colours and mean one thing everywhere: green is a turn or run that\n * worked (an `ok` attempt, a solved run), red a run that died, amber a run stalled or a turn rate-limited. Outcomes\n * pass the dataviz colour-vision checks as adjacent pairs in stack order (ok, quota, lost, rate-limit, oom, refused) on\n * the light surface and on #161616; `aborted` and `other` are two distinct greys. Checkers take hues no status uses\n * (blue for the current checker, then magenta, cyan and violet for older ones) and pass as adjacent series; their\n * marks also carry a vN label. Run endings reuse those colours. `scripts/palette-check.mjs` re-runs the validator. A\n * page may override any of these properties; :where() keeps them at zero specificity.\n */\n:where(:root) {\n  --chart-outcome-ok: light-dark(#1baf7a, #199e70);\n  --chart-outcome-quota: light-dark(#eb6834, #d95926);\n  --chart-outcome-lost: light-dark(#0f9fb8, #1a9cb3);\n  --chart-outcome-rate-limit: light-dark(#eda100, #c98500);\n  --chart-outcome-oom: light-dark(#e87ba4, #d55181);\n  --chart-outcome-refused: light-dark(#6250d6, #9085e9);\n  --chart-outcome-neutral: #898781;\n  --chart-outcome-other: #b5b3ac;\n  --chart-checker-0: light-dark(#2a78d6, #3987e5);\n  --chart-checker-1: light-dark(#b8478f, #c2408f);\n  --chart-checker-2: light-dark(#0f9fb8, #1a9cb3);\n  --chart-checker-3: light-dark(#6250d6, #8c7ce6);\n  /* How a run ended: solved green, died red, stalled amber, live blue; not solved and cancelled are neutral. */\n  --chart-ending-solved: var(--chart-outcome-ok);\n  --chart-ending-died: light-dark(#d03b3b, #e05252);\n  --chart-ending-stalled: var(--chart-outcome-rate-limit);\n  --chart-ending-live: var(--chart-checker-0);\n  --chart-ending-not-solved: light-dark(#6b7a90, #8494ab);\n  --chart-ending-cancelled: var(--chart-outcome-neutral);\n  --chart-ending-never-started: color-mix(in srgb, var(--chart-outcome-other) 45%, transparent);\n}\n/* A series drawn in a checker's hue; past the fourth hue it is muted and named by its label. */\n.tgc-checker-0 { --tgc-series: var(--chart-checker-0); }\n.tgc-checker-1 { --tgc-series: var(--chart-checker-1); }\n.tgc-checker-2 { --tgc-series: var(--chart-checker-2); }\n.tgc-checker-3 { --tgc-series: var(--chart-checker-3); }\n.tgc-checker-other { --tgc-series: var(--chart-muted); }\n/* Recorded verdicts: a pass is filled, a fail or an incomparable value is an outline, an undecided one dashed. */\n.tgc-series-point.tgc-point-outline { fill: var(--chart-canvas); stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 1.75; }\n.tgc-series-point.tgc-point-undecided { fill: var(--chart-canvas); stroke: var(--tgc-series, var(--chart-accent)); stroke-width: 1.5; stroke-dasharray: 2 1.5; }\n.tgc-strip-hatch .tgc-hatch { stroke: var(--tgc-series, var(--chart-muted)); }\n/* A failing verdict without a value is a neutral ring: in its checker's hue it read as that checker passing. */\n.tgc-series-point.tgc-point-outline.tgc-strip-fail { stroke: var(--chart-ink-muted); }\n.tgc-strip-edge { fill: none; stroke: var(--tgc-series, var(--chart-muted)); stroke-width: 1.25; }\n.tgc-strip-observation:focus-visible { outline: none; }\n.tgc-strip-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }\n.tgc-point-badge { paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace); }\n.tgc-point-label { fill: var(--chart-ink-muted); }\n.tgc-glyph-note { fill: var(--chart-ink); font-weight: 600; }\n/* Status colours appear only on these glyphs. */\n.tgc-glyph-check { fill: var(--chart-pass, var(--status-running)); font-weight: 600; }\n.tgc-glyph-cross { fill: var(--chart-breach, var(--status-error)); font-weight: 600; }\n/* Recorded targets sit under the data: a target is a soft band between solid edges, a stretch a dashed outline. */\n.tgc-target-target { fill: color-mix(in srgb, var(--chart-ink) 7%, transparent); }\n.tgc-target-stretch { fill: none; }\n.tgc-target-target-edge, .tgc-target-target.tgc-target-line { stroke: var(--chart-ink-muted); stroke-width: 1; }\n.tgc-target-stretch-edge, .tgc-target-stretch.tgc-target-line { stroke: var(--chart-ink-muted); stroke-width: 1; stroke-dasharray: 4 3; }\n.tgc-target-label { fill: var(--chart-ink-muted); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n/* Group headers: a labelled bracket above the plot and a light rule at each inner edge. */\n.tgc-group-rule { stroke: var(--chart-ink-muted); stroke-width: 1.5; }\n.tgc-group-edge { stroke: var(--chart-rule); stroke-width: 1; }\n.tgc-group-label { fill: var(--chart-ink); paint-order: stroke; stroke: var(--chart-canvas); stroke-width: 3px; stroke-linejoin: round; }\n/* The verdict key: glyphs in the neutral ink, so they describe a mark's form, not a series. */\n.tgc-key-mark { stroke-width: 1.5; }\n.tgc-key-filled { fill: var(--chart-ink-muted); stroke: none; }\n.tgc-key-outline { fill: none; stroke: var(--chart-ink-muted); }\n.tgc-key-dashed { fill: none; stroke: var(--chart-ink-muted); stroke-dasharray: 2 1.5; }\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
@@ -2485,7 +2485,7 @@ function pointBadge(x, y, r, p, limit) {
 function stripMark(x, y, size, p) {
 	const h = size / 2;
 	if (p.verdict === "unknown") return `<g class="tgc-strip-mark tgc-point-undecided">${hatch(x - h, y - h, size, size, "tgc-strip-hatch")}${rect(x - h, y - h, size, size, "tgc-strip-edge")}</g>`;
-	return rect(x - h, y - h, size, size, p.verdict === "fail" ? "tgc-series-point tgc-point-outline" : "tgc-series-point");
+	return rect(x - h, y - h, size, size, p.verdict === "fail" ? "tgc-series-point tgc-point-outline tgc-strip-fail" : "tgc-series-point");
 }
 /**
 * Places each mark's badge to its right, or to its left at the plot's edge, skipping any that would cover a mark or
@@ -2747,7 +2747,7 @@ function plot(rows, o, width, xLabel, yLabel, grid, facts, stripName) {
 		cls: "tgc-ink-muted"
 	});
 	marks += drawBands(o.bands ?? [], px, top, bottom, xLabel, void 0, axis.extent);
-	marks += drawGroups(o.bands ?? [], axis.extent, top, bottom, left, right, xLabel);
+	const groups = drawGroups(o.bands ?? [], axis.extent, top, bottom, left, right, xLabel);
 	if (strip) marks += text(left - 8, bottom + 16, stripName, {
 		anchor: "end",
 		cls: "tgc-ink-muted",
@@ -2846,7 +2846,7 @@ function plot(rows, o, width, xLabel, yLabel, grid, facts, stripName) {
 	legendY += key.height;
 	marks += key.svg;
 	const events = drawMarks(o.marks ?? [], px, top - groupRowHeight(o.bands), 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}${badges}${tips}</svg>`;
+	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}${groups}${points}${badges}${tips}</svg>`;
 }
 function axisGutter(ticks, stripName) {
 	return Math.max(64, ...ticks.map((tick) => Math.ceil(textWidth(tick.label, 12, "mono")) + 20), stripName ? Math.ceil(textWidth(stripName, 11)) + 14 : 0);
@@ -3183,4 +3183,139 @@ function draw(panels, o, width, xLabel, yLabelOf, marksOf) {
 	return svgRoot(width, height + key.height, body + key.svg);
 }
 //#endregion
-export { CHECKER_HUES, OUTCOME_COLORS, OUTCOME_ORDER, breakdown, chartTokensCss, checkerColor, comparisonIntervals, costFrontier, figureCss, heatmap, isRefusal, latencyRange, metricBars, phaseWaterfall, rankedRates, rateOrder, renderFigure, renderNotes, renderRefusals, smallMultiples, taskMatrix, timeSeries, timeline };
+//#region src/unit-dots.ts
+/** Squarified treemap (Bruls, Huizing and van Wijk) of positive values, largest first, into the rectangle. */
+function squarify(values, x, y, w, h) {
+	const out = new Array(values.length);
+	const total = values.reduce((sum, value) => sum + value, 0);
+	if (!total) return values.map(() => [
+		x,
+		y,
+		0,
+		0
+	]);
+	const scale = w * h / total;
+	let i = 0;
+	while (i < values.length) {
+		const side = Math.min(w, h);
+		let row = [i];
+		let rowSum = values[i] * scale;
+		const worst = (sum, items) => {
+			const areas = items.map((k) => values[k] * scale);
+			const max = Math.max(...areas), min = Math.min(...areas);
+			return Math.max(side * side * max / (sum * sum), sum * sum / (side * side * min));
+		};
+		let j = i + 1;
+		while (j < values.length) {
+			const next = rowSum + values[j] * scale;
+			if (worst(next, [...row, j]) > worst(rowSum, row)) break;
+			row = [...row, j];
+			rowSum = next;
+			j++;
+		}
+		const thickness = rowSum / side;
+		let offset = 0;
+		for (const k of row) {
+			const length = values[k] * scale / thickness;
+			out[k] = w >= h ? [
+				x,
+				y + offset,
+				thickness,
+				length
+			] : [
+				x + offset,
+				y,
+				length,
+				thickness
+			];
+			offset += length;
+		}
+		if (w >= h) {
+			x += thickness;
+			w -= thickness;
+		} else {
+			y += thickness;
+			h -= thickness;
+		}
+		i = j;
+	}
+	return out;
+}
+/**
+* Lays out `groups` in a `width` × `height` box: a treemap rectangle per group with a header for its label, and its
+* items on a grid of square cells inside it, filled row by row. Groups keep their input order in `positions`; the
+* treemap places larger groups first.
+*/
+function unitDotLayout(groups, width, height, o = {}) {
+	const gap = o.gap ?? 6, header = o.header ?? 16, maxRadius = o.maxRadius ?? 6;
+	const order = groups.map((group, index) => ({
+		group,
+		index
+	})).filter(({ group }) => group.count > 0).sort((a, b) => b.group.count - a.group.count);
+	const totalItems = order.reduce((sum, item) => sum + item.group.count, 0) || 1;
+	const headerShare = header * width * .25 / (width * height) * totalItems;
+	const boxes = squarify(order.map(({ group }) => group.count + headerShare), 0, 0, width, height);
+	const rects = new Array(groups.length);
+	const total = groups.reduce((sum, group) => sum + Math.max(0, group.count), 0);
+	const positions = new Float32Array(total * 2);
+	const radii = new Float32Array(total);
+	const startOf = [];
+	let start = 0;
+	for (const group of groups) {
+		startOf.push(start);
+		start += Math.max(0, group.count);
+	}
+	order.forEach(({ group, index }, k) => {
+		const [bx, by, bw, bh] = boxes[k];
+		const x0 = bx + gap / 2, y0 = by + gap / 2, x1 = bx + bw - gap / 2, y1 = by + bh - gap / 2;
+		rects[index] = {
+			id: group.id,
+			label: group.label,
+			count: group.count,
+			x0,
+			y0,
+			x1,
+			y1
+		};
+		const innerW = Math.max(1, x1 - x0 - 4), innerH = Math.max(1, y1 - y0 - header - 2);
+		let best = {
+			cols: 1,
+			cell: 0
+		};
+		const ideal = Math.max(1, Math.round(Math.sqrt(group.count * innerW / innerH)));
+		for (let cols = Math.max(1, ideal - 2); cols <= ideal + 2; cols++) {
+			const rows = Math.ceil(group.count / cols);
+			const cell = Math.min(innerW / cols, innerH / rows);
+			if (cell > best.cell) best = {
+				cols,
+				cell
+			};
+		}
+		const r = Math.min(maxRadius, best.cell * .4);
+		for (let item = 0; item < group.count; item++) {
+			const col = item % best.cols, row = Math.floor(item / best.cols);
+			const p = startOf[index] + item;
+			positions[p * 2] = x0 + 2 + (col + .5) * best.cell;
+			positions[p * 2 + 1] = y0 + header + (row + .5) * best.cell;
+			radii[p] = r;
+		}
+	});
+	groups.forEach((group, index) => {
+		if (!rects[index]) rects[index] = {
+			id: group.id,
+			label: group.label,
+			count: 0,
+			x0: 0,
+			y0: 0,
+			x1: 0,
+			y1: 0
+		};
+	});
+	return {
+		rects,
+		positions,
+		radii
+	};
+}
+//#endregion
+export { CHECKER_HUES, ENDING_COLORS, ENDING_ORDER, OUTCOME_COLORS, OUTCOME_ORDER, breakdown, chartTokensCss, checkerColor, comparisonIntervals, costFrontier, figureCss, heatmap, isRefusal, latencyRange, metricBars, phaseWaterfall, rankedRates, rateOrder, renderFigure, renderNotes, renderRefusals, smallMultiples, taskMatrix, timeSeries, timeline, unitDotLayout };

package/dist/react/index.d.ts

@@ -1,4 +1,4 @@
-import { N as Refusal, O as Figure, S as YTick, _ as MarkVerdict, b as YScale, d as PointFields, f as PointGlyph, g as MarkKind, h as ChartMark, i as TimelineTick, l as TickOutcome, m as ChartBand, n as TimelineOptions, p as BandKind, r as TimelineSpan, t as TimelineLane, v as MarkerShape, x as YTarget, y as XCategory } from "../timeline-irTei5Fl.js";
+import { C as YScale, I as Refusal, S as XCategory, T as YTick, _ as ChartBand, b as MarkVerdict, f as TickOutcome, g as BandKind, h as PointGlyph, i as TimelineTick, j as Figure, m as PointFields, n as TimelineOptions, r as TimelineSpan, t as TimelineLane, v as ChartMark, w as YTarget, x as MarkerShape, y as MarkKind } from "../timeline-BvVxPTGp.js";
 import { ReactElement, ReactNode } from "react";
 //#region src/react/sparkline.d.ts
 type SparklineDirection = "rising" | "falling" | "flat";
@@ -272,4 +272,50 @@ interface TimelineViewProps {
 }
 export declare function TimelineView({ lanes, options, defaultCollapsed, presentation }: TimelineViewProps): import("react").JSX.Element;
 //#endregion
-export type { BandKind, ChartBand, ChartMark, Figure, FigureAtWidth, FigureViewProps, LineSeries, MarkKind, MarkVerdict, MarkerShape, MeterSegment, PointFields, PointGlyph, Refusal, SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, TickOutcome, TimelineLane, TimelineOptions, TimelineSpan, TimelineTick, TimelineViewProps, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow, XCategory, YScale, YTarget, YTick };
+//#region src/react/dot-map.d.ts
+interface DotMapRect {
+  x0: number;
+  y0: number;
+  x1: number;
+  y1: number;
+  label: string;
+  /** Shown after the label, such as the group's count. */
+  note?: string;
+}
+interface DotMapLabel {
+  x: number;
+  y: number;
+  text: string;
+}
+interface DotMapProps {
+  /** x and y of every point in layout units, interleaved. */
+  positions: Float32Array;
+  /** Each point's radius in layout units, or one radius for all. */
+  radii: Float32Array | number;
+  /** Each point's palette index. */
+  colors: Uint8Array;
+  /** CSS colours (custom properties allowed) by palette index. */
+  palette: readonly string[];
+  /** The box the positions are laid out in: [x0, y0, x1, y1]. The map fits it on first draw and on reset. */
+  extent: readonly [number, number, number, number];
+  /** Group rectangles drawn under the points, labelled at their top left. */
+  rects?: readonly DotMapRect[];
+  /** Labels drawn over the points, such as cluster names at their centroids. */
+  labels?: readonly DotMapLabel[];
+  /** 1 dims a point (filtered out); dimmed points draw first and faint. */
+  dimmed?: Uint8Array | null;
+  selected?: number | null;
+  /** Radius floor in screen pixels, so a dense semantic map stays visible zoomed out. Default 1.2. */
+  minPixelRadius?: number;
+  onHover?: (index: number | null) => void;
+  onSelect?: (index: number | null) => void;
+  /** Text for a point's hover card. */
+  describe?: (index: number) => string;
+  height?: number;
+  ariaLabel: string;
+}
+/** The categorical lens colours, in slot order, then "other": the palette a DotMap lens indexes. */
+export declare const DOT_MAP_CATEGORIES: readonly string[];
+export declare function DotMap({ positions, radii, colors, palette, extent, rects, labels, dimmed, selected, minPixelRadius, onHover, onSelect, describe, height, ariaLabel }: DotMapProps): import("react").JSX.Element;
+//#endregion
+export type { BandKind, ChartBand, ChartMark, DotMapLabel, DotMapProps, DotMapRect, Figure, FigureAtWidth, FigureViewProps, LineSeries, MarkKind, MarkVerdict, MarkerShape, MeterSegment, PointFields, PointGlyph, Refusal, SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, TickOutcome, TimelineLane, TimelineOptions, TimelineSpan, TimelineTick, TimelineViewProps, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow, XCategory, YScale, YTarget, YTick };

package/dist/react/index.js

@@ -1,6 +1,6 @@
-import { K as markerPath, U as hatchPath, _ as markName, c as MARK_HEADS, p as eventsGap, t as timeline, v as isRefusal } from "../timeline-ApeJgFac.js";
+import { G as hatchPath, J as markerPath, b as isRefusal, h as eventsGap, t as timeline, u as MARK_HEADS, y as markName } from "../timeline-CVXBpZzt.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as Fragment$1, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 //#region src/react/sparkline.tsx
 const DEFAULT_SPARKLINE_WIDTH = 96;
 const DEFAULT_SPARKLINE_HEIGHT = 24;
@@ -1736,4 +1736,435 @@ function TimelineView({ lanes, options, defaultCollapsed = [], presentation }) {
 	});
 }
 //#endregion
-export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, DayBars, FigureView, Gantt, HBars, Histogram, LIVE_SERIES, Lines, Meter, Spark, Sparkline, StackedBarChart, TimelineView, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, formatCompact, formatSparklineValue, formatWaterfallDuration, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, waterfallSpanGeometry, waterfallTicks };
+//#region src/react/dot-map.tsx
+/**
+* A canvas of many dots (thousands of runs or agents) that pans and zooms at 60 fps: unit dots in group rectangles
+* (`unitDotLayout`) or a semantic map's x/y. Colours are palette indexes, so a lens change repaints without a new
+* layout; the caller owns hover and selection and draws its own legend and details.
+*/
+/** The categorical lens colours, in slot order, then "other": the palette a DotMap lens indexes. */
+const DOT_MAP_CATEGORIES = Object.freeze([
+	"var(--chart-category-1)",
+	"var(--chart-category-2)",
+	"var(--chart-category-3)",
+	"var(--chart-category-other)"
+]);
+/** Resolves CSS colours (including custom properties and light-dark()) to what the page computes, for the canvas. */
+function resolveColors(host, palette) {
+	const probe = document.createElement("span");
+	probe.style.display = "none";
+	host.appendChild(probe);
+	const out = palette.map((color) => {
+		probe.style.color = "";
+		probe.style.color = color;
+		return getComputedStyle(probe).color || color;
+	});
+	probe.remove();
+	return out;
+}
+/** A uniform grid over the layout, for hit tests in constant time per pointer move. */
+function gridIndex(positions, extent, cell) {
+	const [x0, y0, x1, y1] = extent;
+	const cols = Math.max(1, Math.ceil((x1 - x0) / cell));
+	const rows = Math.max(1, Math.ceil((y1 - y0) / cell));
+	const cells = /* @__PURE__ */ new Map();
+	for (let i = 0; i < positions.length / 2; i++) {
+		const c = Math.min(cols - 1, Math.max(0, Math.floor((positions[i * 2] - x0) / cell)));
+		const key = Math.min(rows - 1, Math.max(0, Math.floor((positions[i * 2 + 1] - y0) / cell))) * cols + c;
+		const list = cells.get(key);
+		if (list) list.push(i);
+		else cells.set(key, [i]);
+	}
+	return {
+		cols,
+		rows,
+		cell,
+		cells,
+		x0,
+		y0
+	};
+}
+function DotMap({ positions, radii, colors, palette, extent, rects, labels, dimmed, selected, minPixelRadius = 1.2, onHover, onSelect, describe, height = 560, ariaLabel }) {
+	const box = useRef(null);
+	const canvas = useRef(null);
+	const [size, setSize] = useState({
+		width: 0,
+		height
+	});
+	const view = useRef({
+		scale: 1,
+		tx: 0,
+		ty: 0
+	});
+	const fitted = useRef("");
+	const frame = useRef(0);
+	const [hover, setHover] = useState(null);
+	const colorsResolved = useRef([]);
+	const count = positions.length / 2;
+	const maxRadius = useMemo(() => typeof radii === "number" ? radii : radii.reduce((max, r) => r > max ? r : max, 0), [radii]);
+	const index = useMemo(() => gridIndex(positions, extent, Math.max(maxRadius * 2, (extent[2] - extent[0]) / 200)), [
+		positions,
+		extent,
+		maxRadius
+	]);
+	useEffect(() => {
+		if (!box.current) return;
+		const observer = new ResizeObserver(([entry]) => setSize({
+			width: Math.floor(entry.contentRect.width),
+			height
+		}));
+		observer.observe(box.current);
+		return () => observer.disconnect();
+	}, [height]);
+	const fit = useCallback(() => {
+		const [x0, y0, x1, y1] = extent;
+		const pad = 8;
+		const scale = Math.min((size.width - 16) / Math.max(1e-9, x1 - x0), (size.height - 16) / Math.max(1e-9, y1 - y0));
+		view.current = {
+			scale,
+			tx: pad - x0 * scale + (size.width - 16 - (x1 - x0) * scale) / 2,
+			ty: pad - y0 * scale + (size.height - 16 - (y1 - y0) * scale) / 2
+		};
+	}, [extent, size]);
+	const draw = useCallback(() => {
+		frame.current = 0;
+		const element = canvas.current;
+		if (!element || !size.width) return;
+		const started = performance.now();
+		const dpr = window.devicePixelRatio || 1;
+		if (element.width !== Math.round(size.width * dpr) || element.height !== Math.round(size.height * dpr)) {
+			element.width = Math.round(size.width * dpr);
+			element.height = Math.round(size.height * dpr);
+		}
+		const ctx = element.getContext("2d");
+		if (!ctx) return;
+		if (!colorsResolved.current.length && box.current) colorsResolved.current = resolveColors(box.current, palette);
+		const { scale, tx, ty } = view.current;
+		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+		ctx.clearRect(0, 0, size.width, size.height);
+		const style = box.current ? getComputedStyle(box.current) : null;
+		const ink = style?.color || "#888";
+		if (rects?.length) {
+			ctx.lineWidth = 1;
+			ctx.font = "11px ui-sans-serif, system-ui, sans-serif";
+			for (const rect of rects) {
+				if (rect.x1 <= rect.x0) continue;
+				const x = rect.x0 * scale + tx, y = rect.y0 * scale + ty, w = (rect.x1 - rect.x0) * scale, h = (rect.y1 - rect.y0) * scale;
+				if (x > size.width || y > size.height || x + w < 0 || y + h < 0) continue;
+				ctx.globalAlpha = .35;
+				ctx.strokeStyle = ink;
+				ctx.strokeRect(x + .5, y + .5, w, h);
+				if (w > 36) {
+					ctx.globalAlpha = .8;
+					ctx.fillStyle = ink;
+					const text = rect.note ? `${rect.label} · ${rect.note}` : rect.label;
+					ctx.save();
+					ctx.beginPath();
+					ctx.rect(x, y, w - 4, 16);
+					ctx.clip();
+					ctx.fillText(text, x + 4, y + 12);
+					ctx.restore();
+				}
+			}
+			ctx.globalAlpha = 1;
+		}
+		const paths = /* @__PURE__ */ new Map();
+		const faint = new Path2D();
+		const r0 = typeof radii === "number" ? radii : 0;
+		for (let i = 0; i < count; i++) {
+			const x = positions[i * 2] * scale + tx;
+			const y = positions[i * 2 + 1] * scale + ty;
+			if (x < -8 || y < -8 || x > size.width + 8 || y > size.height + 8) continue;
+			const r = Math.max(minPixelRadius, (typeof radii === "number" ? r0 : radii[i]) * scale);
+			const path = dimmed?.[i] ? faint : paths.get(colors[i]) ?? paths.set(colors[i], new Path2D()).get(colors[i]);
+			path.moveTo(x + r, y);
+			path.arc(x, y, r, 0, Math.PI * 2);
+		}
+		ctx.globalAlpha = .18;
+		ctx.fillStyle = ink;
+		ctx.fill(faint);
+		ctx.globalAlpha = .92;
+		for (const [color, path] of paths) {
+			ctx.fillStyle = colorsResolved.current[color] ?? ink;
+			ctx.fill(path);
+		}
+		ctx.globalAlpha = 1;
+		if (selected !== null && selected !== void 0 && selected < count) {
+			const x = positions[selected * 2] * scale + tx, y = positions[selected * 2 + 1] * scale + ty;
+			const r = Math.max(4, (typeof radii === "number" ? r0 : radii[selected]) * scale + 3);
+			ctx.lineWidth = 2;
+			ctx.strokeStyle = ink;
+			ctx.beginPath();
+			ctx.arc(x, y, r, 0, Math.PI * 2);
+			ctx.stroke();
+		}
+		if (labels?.length) {
+			ctx.font = "600 12px ui-sans-serif, system-ui, sans-serif";
+			ctx.textAlign = "center";
+			ctx.lineWidth = 3;
+			const surface = style?.getPropertyValue("--dot-map-surface").trim() || style?.backgroundColor || "#161616";
+			const taken = [];
+			for (const label of labels) {
+				const x = label.x * scale + tx, y = label.y * scale + ty;
+				if (x < 0 || y < 0 || x > size.width || y > size.height) continue;
+				const w = ctx.measureText(label.text).width;
+				const box4 = [
+					x - w / 2 - 2,
+					y - 10,
+					x + w / 2 + 2,
+					y + 4
+				];
+				if (taken.some(([a, b, c, d]) => box4[0] < c && box4[2] > a && box4[1] < d && box4[3] > b)) continue;
+				taken.push(box4);
+				ctx.strokeStyle = surface;
+				ctx.strokeText(label.text, x, y);
+				ctx.fillStyle = ink;
+				ctx.fillText(label.text, x, y);
+			}
+			ctx.textAlign = "start";
+		}
+		element.dataset.frameMs = (performance.now() - started).toFixed(2);
+	}, [
+		size,
+		positions,
+		radii,
+		colors,
+		palette,
+		rects,
+		labels,
+		dimmed,
+		selected,
+		count,
+		minPixelRadius
+	]);
+	const schedule = useCallback(() => {
+		if (!frame.current) frame.current = requestAnimationFrame(draw);
+	}, [draw]);
+	useEffect(() => {
+		colorsResolved.current = [];
+	}, [palette]);
+	useEffect(() => {
+		if (!size.width) return;
+		const key = `${extent.join(",")}:${size.width}x${size.height}`;
+		if (fitted.current !== key) {
+			fit();
+			fitted.current = key;
+		}
+		schedule();
+	}, [
+		size,
+		extent,
+		fit,
+		schedule
+	]);
+	useEffect(() => schedule(), [schedule]);
+	useEffect(() => () => cancelAnimationFrame(frame.current), []);
+	const pick = useCallback((clientX, clientY) => {
+		const element = canvas.current;
+		if (!element) return null;
+		const bounds = element.getBoundingClientRect();
+		const { scale, tx, ty } = view.current;
+		const lx = (clientX - bounds.left - tx) / scale;
+		const ly = (clientY - bounds.top - ty) / scale;
+		const c = Math.floor((lx - index.x0) / index.cell);
+		const r = Math.floor((ly - index.y0) / index.cell);
+		let best = null;
+		let bestD = Infinity;
+		const reach = Math.max(1, Math.ceil(6 / (scale * index.cell)));
+		for (let dr = -reach; dr <= reach; dr++) for (let dc = -reach; dc <= reach; dc++) {
+			if (c + dc < 0 || r + dr < 0 || c + dc >= index.cols || r + dr >= index.rows) continue;
+			for (const i of index.cells.get((r + dr) * index.cols + (c + dc)) ?? []) {
+				const dx = positions[i * 2] - lx, dy = positions[i * 2 + 1] - ly;
+				const d = dx * dx + dy * dy;
+				const hit = Math.max(6 / scale, typeof radii === "number" ? radii : radii[i]);
+				if (d < bestD && d <= hit * hit) {
+					bestD = d;
+					best = i;
+				}
+			}
+		}
+		return best;
+	}, [
+		index,
+		positions,
+		radii
+	]);
+	const drag = useRef(null);
+	const touches = useRef(/* @__PURE__ */ new Map());
+	const pinch = useRef(null);
+	useEffect(() => {
+		const element = canvas.current;
+		if (!element) return;
+		const wheel = (event) => {
+			event.preventDefault();
+			const bounds = element.getBoundingClientRect();
+			const px = event.clientX - bounds.left, py = event.clientY - bounds.top;
+			const factor = Math.exp(-event.deltaY * .0015);
+			const v = view.current;
+			const scale = Math.min(v.scale * 400, Math.max(v.scale * .0025, v.scale * factor));
+			view.current = {
+				scale,
+				tx: px - (px - v.tx) / v.scale * scale,
+				ty: py - (py - v.ty) / v.scale * scale
+			};
+			schedule();
+		};
+		element.addEventListener("wheel", wheel, { passive: false });
+		return () => element.removeEventListener("wheel", wheel);
+	}, [schedule]);
+	const hovered = hover ? describe?.(hover.index) ?? null : null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: box,
+		className: "tgc-dot-map",
+		style: {
+			position: "relative",
+			height
+		},
+		"data-points": count,
+		children: [/* @__PURE__ */ jsx("canvas", {
+			ref: canvas,
+			role: "img",
+			"aria-label": ariaLabel,
+			tabIndex: 0,
+			style: {
+				width: "100%",
+				height,
+				display: "block",
+				touchAction: "none",
+				cursor: hover ? "pointer" : "grab"
+			},
+			onPointerDown: (event) => {
+				touches.current.set(event.pointerId, {
+					x: event.clientX,
+					y: event.clientY
+				});
+				if (touches.current.size === 2) {
+					const [a, b] = [...touches.current.values()];
+					pinch.current = {
+						distance: Math.hypot(a.x - b.x, a.y - b.y) || 1,
+						view: { ...view.current }
+					};
+					drag.current = null;
+				} else drag.current = {
+					x: event.clientX,
+					y: event.clientY,
+					moved: false
+				};
+				event.currentTarget.setPointerCapture(event.pointerId);
+			},
+			onPointerMove: (event) => {
+				if (touches.current.has(event.pointerId)) touches.current.set(event.pointerId, {
+					x: event.clientX,
+					y: event.clientY
+				});
+				const p = pinch.current;
+				if (p && touches.current.size === 2) {
+					const [a, b] = [...touches.current.values()];
+					const bounds = event.currentTarget.getBoundingClientRect();
+					const mx = (a.x + b.x) / 2 - bounds.left, my = (a.y + b.y) / 2 - bounds.top;
+					const scale = p.view.scale * ((Math.hypot(a.x - b.x, a.y - b.y) || 1) / p.distance);
+					view.current = {
+						scale,
+						tx: mx - (mx - p.view.tx) / p.view.scale * scale,
+						ty: my - (my - p.view.ty) / p.view.scale * scale
+					};
+					schedule();
+					return;
+				}
+				const d = drag.current;
+				if (d) {
+					const dx = event.clientX - d.x, dy = event.clientY - d.y;
+					if (d.moved || Math.abs(dx) + Math.abs(dy) > 3) {
+						d.moved = true;
+						view.current = {
+							...view.current,
+							tx: view.current.tx + dx,
+							ty: view.current.ty + dy
+						};
+						d.x = event.clientX;
+						d.y = event.clientY;
+						schedule();
+						return;
+					}
+				}
+				const i = pick(event.clientX, event.clientY);
+				const bounds = event.currentTarget.getBoundingClientRect();
+				setHover(i === null ? null : {
+					index: i,
+					x: event.clientX - bounds.left,
+					y: event.clientY - bounds.top
+				});
+				onHover?.(i);
+			},
+			onPointerUp: (event) => {
+				touches.current.delete(event.pointerId);
+				if (pinch.current) {
+					if (touches.current.size < 2) pinch.current = null;
+					drag.current = null;
+					return;
+				}
+				const d = drag.current;
+				drag.current = null;
+				if (d && !d.moved) onSelect?.(pick(event.clientX, event.clientY));
+			},
+			onPointerCancel: (event) => {
+				touches.current.delete(event.pointerId);
+				if (touches.current.size < 2) pinch.current = null;
+				drag.current = null;
+			},
+			onPointerLeave: () => {
+				setHover(null);
+				onHover?.(null);
+			},
+			onDoubleClick: () => {
+				fit();
+				schedule();
+			},
+			onKeyDown: (event) => {
+				const v = view.current;
+				const zoom = (factor) => {
+					const cx = size.width / 2, cy = size.height / 2;
+					view.current = {
+						scale: v.scale * factor,
+						tx: cx - (cx - v.tx) / v.scale * v.scale * factor,
+						ty: cy - (cy - v.ty) / v.scale * v.scale * factor
+					};
+				};
+				if (event.key === "+" || event.key === "=") zoom(1.4);
+				else if (event.key === "-") zoom(1 / 1.4);
+				else if (event.key === "0") fit();
+				else if (event.key === "ArrowLeft") view.current = {
+					...v,
+					tx: v.tx + 60
+				};
+				else if (event.key === "ArrowRight") view.current = {
+					...v,
+					tx: v.tx - 60
+				};
+				else if (event.key === "ArrowUp") view.current = {
+					...v,
+					ty: v.ty + 60
+				};
+				else if (event.key === "ArrowDown") view.current = {
+					...v,
+					ty: v.ty - 60
+				};
+				else return;
+				event.preventDefault();
+				schedule();
+			}
+		}), hover && hovered && /* @__PURE__ */ jsx("div", {
+			className: "tgc-dot-map-tip",
+			role: "tooltip",
+			style: {
+				position: "absolute",
+				left: Math.min(hover.x + 12, Math.max(0, size.width - 300)),
+				top: hover.y + 12,
+				pointerEvents: "none"
+			},
+			children: hovered
+		})]
+	});
+}
+//#endregion
+export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, DOT_MAP_CATEGORIES, DayBars, DotMap, FigureView, Gantt, HBars, Histogram, LIVE_SERIES, Lines, Meter, Spark, Sparkline, StackedBarChart, TimelineView, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, formatCompact, formatSparklineValue, formatWaterfallDuration, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, waterfallSpanGeometry, waterfallTicks };

package/dist/react/live.css

@@ -73,3 +73,18 @@ line.ov-gridline { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 22%,
 .ov-event-idle { background: var(--chart-live-hover, var(--chart-shade)); }
 .ov-event-missing { background: repeating-linear-gradient(135deg, var(--chart-live-faint, var(--chart-muted)) 0 1px, transparent 1px 4px); }
 .ov-refusal { margin: 0; color: var(--chart-live-muted, var(--chart-ink-muted)); font-size: .9em; }
+
+/*
+ * DotMap: thousands of dots on one canvas. A categorical lens names at most three categories in colour, the first
+ * three slots of the dataviz reference palette, which pass its all-pairs colour-vision checks in both themes (a
+ * scatter puts every pair side by side); every other category is the neutral "other". :where() keeps them overridable.
+ */
+:where(:root) {
+  --chart-category-1: light-dark(#2a78d6, #3987e5);
+  --chart-category-2: light-dark(#eb6834, #d95926);
+  --chart-category-3: light-dark(#1baf7a, #199e70);
+  --chart-category-other: #898781;
+}
+.tgc-dot-map { color: var(--chart-live-muted, #8a8a8a); }
+.tgc-dot-map canvas:focus-visible { outline: 2px solid var(--chart-accent, #7760bd); outline-offset: 2px; }
+.tgc-dot-map-tip { z-index: 2; max-width: 300px; padding: 6px 9px; border-radius: 6px; background: var(--chart-tip-bg, #262626); color: var(--chart-tip-ink, #eee); font: 12px/1.4 ui-sans-serif, system-ui, sans-serif; white-space: pre-line; box-shadow: 0 4px 14px rgb(0 0 0 / .3); }

package/dist/{timeline-irTei5Fl.d.ts → timeline-BvVxPTGp.d.ts}

@@ -225,13 +225,25 @@ interface PointFields {
 type TickOutcome = "ok" | "quota" | "lost" | "rate-limit" | "oom" | "refused" | "aborted" | "other";
 /**
  * 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.
+ * bar keeps it; `ok` is the status green, `aborted` and `other` are two distinct greys and always carry a label. An
+ * attempt still running is `open` and is drawn hatched, never as an outcome.
  */
 declare const OUTCOME_ORDER: readonly TickOutcome[];
 /** The CSS colour of each outcome, for a caller that paints its own marks (a legend, a stacked bar). */
 declare const OUTCOME_COLORS: Readonly<Record<TickOutcome, string>>;
-/** How many checkers have their own hue. Index 0 is the current checker; later indexes are older checkers. */
+/**
+ * How a run ended, in the order a legend lists them: `solved` (its check passed), `not solved` (it ended, its check
+ * did not pass), `died` (the platform or driver failed), `stalled`, `cancelled`, `live` and `never started`. Every
+ * view that colours runs by their ending uses these words and ENDING_COLORS, so green, red and amber mean one thing.
+ */
+type RunEnding = "solved" | "not solved" | "died" | "stalled" | "cancelled" | "live" | "never started";
+declare const ENDING_ORDER: readonly RunEnding[];
+/** The CSS colour of each run ending (`--chart-ending-*` in figure.css). */
+declare const ENDING_COLORS: Readonly<Record<RunEnding, string>>;
+/**
+ * How many checkers have their own hue. Index 0 is the current checker; later indexes are older checkers. Checker hues
+ * (blue, magenta, cyan, violet) avoid the status green, red and amber, so a checker's colour never reads as a verdict.
+ */
 declare const CHECKER_HUES = 4;
 /** The CSS colour of checker `index` (0 is current). Indexes past the fourth hue fold into the muted tone. */
 declare function checkerColor(index: number): string;
@@ -292,4 +304,4 @@ interface TimelineOptions {
 }
 declare function timeline(lanes: TimelineLane[], o: TimelineOptions): Figure | Refusal;
 //#endregion
-export { IntervalMethod as A, BreakdownInput as C, Exclusion as D, Estimate as E, Tier as F, TierCounts as I, isRefusal as L, RateRow as M, Refusal as N, Figure as O, Setup as P, YTick as S, CostBasis as T, MarkVerdict as _, timeline as a, YScale as b, OUTCOME_ORDER as c, PointFields as d, PointGlyph as f, MarkKind as g, ChartMark as h, TimelineTick as i, MatrixCell as j, Interval as k, TickOutcome as l, ChartBand as m, TimelineOptions as n, CHECKER_HUES as o, BandKind as p, TimelineSpan as r, OUTCOME_COLORS as s, TimelineLane as t, checkerColor as u, MarkerShape as v, ComparisonRow as w, YTarget as x, XCategory as y };
+export { Exclusion as A, isRefusal as B, YScale as C, ComparisonRow as D, BreakdownInput as E, RateRow as F, Refusal as I, Setup as L, Interval as M, IntervalMethod as N, CostBasis as O, MatrixCell as P, Tier as R, XCategory as S, YTick as T, ChartBand as _, timeline as a, MarkVerdict as b, ENDING_ORDER as c, RunEnding as d, TickOutcome as f, BandKind as g, PointGlyph as h, TimelineTick as i, Figure as j, Estimate as k, OUTCOME_COLORS as l, PointFields as m, TimelineOptions as n, CHECKER_HUES as o, checkerColor as p, TimelineSpan as r, ENDING_COLORS as s, TimelineLane as t, OUTCOME_ORDER as u, ChartMark as v, YTarget as w, MarkerShape as x, MarkKind as y, TierCounts as z };

package/dist/{timeline-ApeJgFac.js → timeline-CVXBpZzt.js}

@@ -635,13 +635,16 @@ function drawGroups(bands, extent, top, bottom, left, right, format, clip) {
 		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). */
+/**
+* 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). A ruling never merges: each ruling made or kept a check, so each keeps its own rule and label.
+*/
 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);
+		if (last && mark.kind !== "ruling" && 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]
@@ -768,8 +771,8 @@ const EVENTS_READ = "Vertical rules mark recorded events (solid: pass, dashed: d
 //#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.
+* bar keeps it; `ok` is the status green, `aborted` and `other` are two distinct greys and always carry a label. An
+* attempt still running is `open` and is drawn hatched, never as an outcome.
 */
 const OUTCOME_ORDER = [
 	"ok",
@@ -782,8 +785,22 @@ const OUTCOME_ORDER = [
 	"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 OUTCOME_COLORS = Object.freeze(Object.fromEntries(OUTCOME_ORDER.map((outcome) => [outcome, `var(--chart-outcome-${outcome === "aborted" ? "neutral" : outcome})`])));
+const ENDING_ORDER = [
+	"solved",
+	"not solved",
+	"died",
+	"stalled",
+	"cancelled",
+	"live",
+	"never started"
+];
+/** The CSS colour of each run ending (`--chart-ending-*` in figure.css). */
+const ENDING_COLORS = Object.freeze(Object.fromEntries(ENDING_ORDER.map((ending) => [ending, `var(--chart-ending-${ending.replace(" ", "-")})`])));
+/**
+* How many checkers have their own hue. Index 0 is the current checker; later indexes are older checkers. Checker hues
+* (blue, magenta, cyan, violet) avoid the status green, red and amber, so a checker's colour never reads as a verdict.
+*/
 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) {
@@ -1181,4 +1198,4 @@ function axisTicks(t0, t1, px, left, right, label) {
 	return fit([t0, t1]) ? [t0, t1] : [t0];
 }
 //#endregion
-export { capitalize 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, wideWidth 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, textWidth as at, TIERS_BEST_FIRST as b, MARK_HEADS as c, drawGroups as d, esc as et, drawMarks as f, markLabelRows as g, groupRowHeight as h, OUTCOME_ORDER as i, textBlock as it, rateDataGap as j, perPass as k, MARK_VERDICTS as l, eventsTable as m, CHECKER_HUES as n, listJoin as nt, checkerColor as o, wrap as ot, eventsGap as p, polyline as q, OUTCOME_COLORS as r, plural as rt, EVENTS_READ as s, timeline as t, fitLines as tt, drawBands as u, isRefusal as v, estimateNote as w, costText as x, METHOD_NAME as y, table as z };
+export { titled as $, pct as A, usdTick as B, costText as C, intervalGap as D, estimateNote as E, rateOrder as F, hatchPath as G, MARKER_SHAPES as H, tierAtLeast as I, markerPath as J, hbar as K, tierSummary as L, pts as M, rateDataGap as N, intervalName as O, rateIntervalGap as P, text as Q, tierTotal as R, TIERS_BEST_FIRST as S, duration as T, circle as U, table as V, hatch as W, rect as X, polyline as Y, svgRoot as Z, groupRowHeight as _, OUTCOME_COLORS as a, plural as at, isRefusal as b, checkerColor as c, wrap as ct, MARK_VERDICTS as d, wideWidth as et, drawBands as f, eventsTable as g, eventsGap as h, ENDING_ORDER as i, listJoin as it, perPass as j, kn as k, EVENTS_READ as l, drawMarks as m, CHECKER_HUES as n, esc as nt, OUTCOME_ORDER as o, textBlock as ot, drawGroups as p, line as q, ENDING_COLORS as r, fitLines as rt, checkerClass as s, textWidth as st, timeline as t, capitalize as tt, MARK_HEADS as u, markLabelRows as v, drawable as w, METHOD_NAME as x, markName as y, usd as z };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/charts",
-  "version": "0.10.0",
+  "version": "0.12.0",
   "description": "Static SVG and HTML figures for benchmarks and operational timing. Draws from producer data and refuses what it cannot draw honestly.",
   "type": "module",
   "license": "MIT",