@tangle-network/charts 0.1.9 → 0.1.11

package/README.md

@@ -68,3 +68,56 @@ pnpm --filter @tangle-network/charts build     # fails when src/css.generated.ts
 ## Release
 
 Versions publish from the brand release workflow through npm trusted publishing, like `@tangle-network/brand` and `@tangle-network/ui`.
+
+### Chart-first vertical rates
+
+`rankedRates(rows, { measure: 'pass rate', orientation: 'vertical', order: 'input', identities })` draws vertical bars on a full 0–100% axis.
+`order: 'input'` keeps unranked producer order; omit it to keep the existing ordering behavior.
+Optional `identities` maps setup IDs to `model` and `harness` marks, each with an explicit `{ label, src }`.
+Images must use same-origin absolute paths or HTTPS URLs; the library never infers a provider from a model name.
+Hover or focus a column to read its actual count, eligible interval, known cost and run time.
+Zero has no positive bar, and ineligible estimates keep their count without a bar.
+
+Use `renderFigure(figure, noteNumber, { presentation: 'chart' })` for a chart-first surface.
+The plot fills its container; data, reading instructions and method stay in a closed disclosure.
+The default report presentation, underlying table and note links remain available.
+Many columns keep a readable minimum width and scroll horizontally.
+
+### Recorded scalar values and histories
+
+`metricBars` draws continuous scores or counts on an explicit zero-based axis.
+It preserves input order and draws no rank.
+A known zero has no positive bar; a null value prints `not measured`.
+Observation counts use the caller's explicit unit.
+
+```ts
+import { isRefusal, metricBars, renderFigure, renderRefusals } from "@tangle-network/charts";
+
+const figure = metricBars([
+  { id: "a", label: "Setup A", value: 0, observations: { count: 13, label: "tasks" } },
+  { id: "b", label: "Setup B", value: null, observations: { count: 0, label: "tasks" } },
+], { measure: "mean composite score", unit: "score", domain: [0, 1] });
+const html = isRefusal(figure) ? renderRefusals([figure]) : renderFigure(figure, 1, { presentation: "chart" });
+```
+
+`timeSeries` draws recorded scalar values at strictly increasing, finite positions.
+The caller includes every configured position, with null for a missing observation.
+Null breaks the line; the library never interpolates a missing value.
+
+```ts
+import { isRefusal, renderFigure, renderRefusals, timeSeries } from "@tangle-network/charts";
+
+const figure = timeSeries([{ id: "a", label: "Setup A", points: [
+  { x: 1, y: 0, observations: { count: 13, label: "tasks" } },
+  { x: 2, y: null, observations: { count: 0, label: "tasks" } },
+  { x: 3, y: 0.5, observations: { count: 5, label: "tasks" } },
+] }], { x: { label: "shot", domain: [1, 3] }, y: { label: "mean composite score", unit: "score", domain: [0, 1] } });
+const html = isRefusal(figure) ? renderRefusals([figure]) : renderFigure(figure, 1, { presentation: "chart" });
+```
+
+Both examples show behavior controls, not benchmark results.
+Both functions refuse out-of-domain values, invalid intervals and measured values with zero observations.
+Intervals arrive with their recorded bounds, confidence level and method; neither function computes them.
+Optional annotations carry independent recorded facts, such as all checks passing.
+Hover or focus a mark for its value, observation count, interval and annotation.
+The data table retains missing positions and full labels.

package/dist/figure.css

@@ -293,3 +293,29 @@
     break-inside: avoid;
   }
 }
+
+/* Chart-led surfaces keep supporting text in the native disclosure. */
+.tgc-figure-chart { max-width: none; margin: 0; }
+.tgc-figure-chart .tgc-wide svg { width: 100%; height: auto; }
+.tgc-wide:has(.tgc-vertical), .tgc-narrow:has(.tgc-vertical) { overflow-x: auto; }
+.tgc-vertical { width: 100%; }
+.tgc-narrow .tgc-vertical { max-width: none; }
+.tgc-column-hit { fill: transparent; stroke: transparent; stroke-width: 2; }
+.tgc-column:focus-visible { outline: none; }
+.tgc-column:focus-visible .tgc-column-hit { stroke: var(--chart-accent); }
+.tgc-vertical-bar { fill: var(--chart-accent); }
+/* Identity assets keep their approved colors on a white plate in either theme. */
+.tgc-logo-plate { fill: #fff; stroke: var(--chart-rule); }
+.tgc-column-tip { opacity: 0; pointer-events: none; }
+.tgc-tip-bg { fill: var(--chart-ink); }
+.tgc-tip-ink { fill: var(--chart-canvas); }
+
+.tgc-series-line { fill: none; stroke: var(--chart-accent); stroke-width: 2; stroke-linejoin: round; }
+.tgc-series-point { fill: var(--chart-accent); stroke: var(--chart-canvas); stroke-width: 1; }
+.tgc-series-hit { fill: transparent; stroke: transparent; }
+.tgc-series-observation:focus-visible { outline: none; }
+.tgc-series-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }
+.tgc-series-tip { opacity: 0; pointer-events: none; }
+
+.tgc-scalar-table { min-width: 620px; }
+.tgc-scalar-table tbody th { min-width: 180px; max-width: 260px; }

package/dist/index.d.ts

@@ -112,10 +112,11 @@ interface Figure {
   lede: string;
   /** How to read the marks. */
   read: string;
-  /** 720 px and 358 px renders; a null narrow render means the table is the phone view. */
+  /** Wide and phone renders; vertical columns retain a readable minimum width. Null means the phone view uses the table. */
   svg: {
     wide: string;
     narrow: string | null;
+    interactive?: boolean;
   };
   /** An HTML table with every number the plot shows. */
   table: string;
@@ -132,7 +133,11 @@ interface Refusal {
 export declare function isRefusal(value: Figure | Refusal): value is Refusal;
 //#endregion
 //#region src/block.d.ts
-export declare function renderFigure(f: Figure, noteNumber: number): string;
+interface RenderFigureOptions {
+  /** Plot first, with interpretation and source details in a closed disclosure. */
+  presentation?: "chart";
+}
+export declare function renderFigure(f: Figure, noteNumber: number, options?: RenderFigureOptions): string;
 /** Numbered notes for `figures`, in the order their blocks were numbered (1-based). */
 export declare function renderNotes(figures: Figure[]): string;
 /** What a page leaves out, and why. */
@@ -176,8 +181,25 @@ export declare const chartTokensCss: string;
  */
 export declare function rateOrder<T extends Pick<RateRow, "rank" | "rate" | "estimate" | "attempts">>(rows: readonly T[]): T[];
 //#endregion
+//#region src/identity.d.ts
+/** Model and harness marks supplied explicitly by the consumer. */
+interface RateIdentity {
+  model?: {
+    label: string;
+    src: string;
+  };
+  harness?: {
+    label: string;
+    src: string;
+  };
+}
+//#endregion
 //#region src/ranked-rates.d.ts
 interface RankedRatesOptions {
+  /** Vertical columns on the same full 0–100% scale; horizontal is the default. */
+  orientation?: "vertical";
+  /** Explicit display identities keyed by setup id; never inferred from labels. */
+  identities?: Readonly<Record<string, RateIdentity>>;
   /** What the rate measures, lower case: "solve rate". */
   measure: string;
   /** Preserve unranked input order instead of sorting observed rates. */
@@ -213,4 +235,60 @@ interface TaskMatrixOptions {
 }
 export declare function taskMatrix(tasks: string[], setupsIn: Setup[], cells: MatrixCell[], o?: TaskMatrixOptions): Figure | Refusal;
 //#endregion
-export type { BreakdownInput, BreakdownOptions, ComparisonIntervalsOptions, ComparisonRow, CostBasis, CostFrontierOptions, Estimate, Exclusion, Figure, Interval, IntervalMethod, MatrixCell, RankedRatesOptions, RateRow, Refusal, Setup, TaskMatrixOptions, Tier, TierCounts };
+//#region src/scalar.d.ts
+interface Observations {
+  count: number | null;
+  /** Explicit plural noun, such as tasks, traces or findings. */
+  label: string;
+}
+//#endregion
+//#region src/metric-bars.d.ts
+interface MetricRow {
+  id: string;
+  label: string;
+  value: number | null;
+  interval?: Interval | null;
+  observations?: Observations;
+}
+interface MetricBarsOptions {
+  measure: string;
+  unit: string;
+  /** Zero is the baseline; out-of-domain values are refused rather than clipped. */
+  domain: [number, number];
+  formatValue?: (value: number) => string;
+  identities?: Readonly<Record<string, RateIdentity>>;
+  id?: string;
+}
+export declare function metricBars(rows: MetricRow[], o: MetricBarsOptions): Figure | Refusal;
+//#endregion
+//#region src/time-series.d.ts
+interface TimePoint {
+  x: number;
+  y: number | null;
+  observations?: Observations;
+  interval?: Interval | null;
+  /** A recorded fact independent of the scalar, such as all checks passed. */
+  annotation?: string;
+}
+interface TimeSeriesRow {
+  id: string;
+  label: string;
+  points: TimePoint[];
+}
+interface TimeSeriesOptions {
+  x: {
+    label: string;
+    domain: [number, number];
+  };
+  y: {
+    label: string;
+    unit: string;
+    domain: [number, number];
+  };
+  formatX?: (value: number) => string;
+  formatY?: (value: number) => string;
+  id?: string;
+}
+export declare function timeSeries(rows: TimeSeriesRow[], o: TimeSeriesOptions): Figure | Refusal;
+//#endregion
+export type { BreakdownInput, BreakdownOptions, ComparisonIntervalsOptions, ComparisonRow, CostBasis, CostFrontierOptions, Estimate, Exclusion, Figure, Interval, IntervalMethod, MatrixCell, MetricBarsOptions, MetricRow, Observations, RankedRatesOptions, RateIdentity, RateRow, Refusal, RenderFigureOptions, Setup, TaskMatrixOptions, Tier, TierCounts, TimePoint, TimeSeriesOptions, TimeSeriesRow };

package/dist/index.js

@@ -311,15 +311,28 @@ function capitalize(text) {
 * once per page, numbered, each with a way back to its figure.
 */
 const slug = (id) => id.replace(/[^a-z0-9-]+/gi, "-").toLowerCase();
-function renderFigure(f, noteNumber) {
+function renderFigure(f, noteNumber, options = {}) {
+	if (options.presentation !== void 0 && options.presentation !== "chart") throw new Error("renderFigure: unknown presentation.");
 	const id = slug(f.id);
 	const plotLabel = `${f.finding} ${f.lede}`;
 	const narrow = f.svg.narrow ? `<div class="tgc-narrow">${f.svg.narrow}</div>` : `<div class="tgc-narrow tgc-narrow-table">${f.table}</div>`;
+	if (options.presentation === "chart") return [
+		`<figure class="tgc-figure tgc-figure-chart" id="fig-${id}" aria-label="${esc(f.finding)}">`,
+		`<div class="tgc-plot" id="ref-${noteNumber}" role="group" aria-label="${esc(plotLabel)}"><div class="tgc-wide">${f.svg.wide}</div>${narrow}</div>`,
+		`<details class="tgc-data"><summary>Data and method</summary>`,
+		`<p class="tgc-lede">${esc(f.lede)}</p><p class="tgc-read">${esc(f.read)}</p>`,
+		`<p class="tgc-read">${esc([
+			f.note.method,
+			f.note.n,
+			...f.note.exclusions
+		].join(" "))}</p>`,
+		`<div class="tgc-scroll" role="region" aria-label="${esc(f.finding)} data" tabindex="0">${f.table}</div></details></figure>`
+	].join("");
 	return [
 		`<figure class="tgc-figure" id="fig-${id}" aria-labelledby="fig-${id}-finding">`,
 		`<h3 class="tgc-finding" id="fig-${id}-finding">${esc(f.finding)}<sup><a class="tgc-noteref" href="#note-${noteNumber}" id="ref-${noteNumber}" role="doc-noteref" aria-label="Note ${noteNumber}">${noteNumber}</a></sup></h3>`,
 		`<p class="tgc-lede">${esc(f.lede)}</p>`,
-		`<div class="tgc-plot" role="img" aria-label="${esc(plotLabel)}">`,
+		`<div class="tgc-plot" role="${f.svg.interactive ? "group" : "img"}" aria-label="${esc(plotLabel)}">`,
 		`<div class="tgc-wide">${f.svg.wide}</div>`,
 		narrow,
 		`</div>`,
@@ -1009,7 +1022,7 @@ function costFrontier(rows, o) {
 		row.cost.basis,
 		row.onFront === null ? "not computed" : row.onFront ? "yes" : "no"
 	]);
-	const { svg, numbered } = plot(costed, unplaced, drawLine, o);
+	const { svg, numbered } = plot$1(costed, unplaced, drawLine, o);
 	const tableHtml = table(`${capitalize(o.measure)} and cost per pass`, numbered.size ? [
 		{ label: "Setup" },
 		{
@@ -1092,7 +1105,7 @@ function narrowList(rows) {
 function unplacedText(rows) {
 	return listJoin(rows.map((r) => `${r.label} (${unplacedReason(r)})`));
 }
-function plot(costed, unplaced, drawLine, o) {
+function plot$1(costed, unplaced, drawLine, o) {
 	const left = 48;
 	const right = 696;
 	const bottom = 272;
@@ -1250,10 +1263,164 @@ function plot(costed, unplaced, drawLine, o) {
 //#endregion
 //#region src/css.generated.ts
 /** The figure block and mark styles (src/figure.css), for documents that inline their CSS. */
-const figureCss = "/* @tangle-network/charts — figure block and mark styles.\n *\n * Every colour is a --chart-* token from @tangle-network/brand tokens.css, so a\n * figure follows the page theme. A standalone document without brand tokens\n * embeds `chartTokensCss` first. Fonts fall back to Inter and JetBrains Mono.\n *\n * Each figure carries a 720 px and a 358 px render. The swap follows the\n * figure's own width (a container query), so a narrow column shows the phone\n * render even on a wide screen. */\n\n.tgc-figure {\n  margin: 32px 0 0;\n  padding: 0;\n  max-width: 720px;\n  color: var(--chart-ink);\n  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n\n.tgc-finding {\n  margin: 0 0 8px;\n  font-size: 16px;\n  line-height: 24px;\n  font-weight: 600;\n  color: var(--chart-ink);\n}\n\n.tgc-noteref {\n  margin-left: 2px;\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--chart-ink-muted);\n  text-decoration: none;\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n}\n.tgc-noteref:hover,\n.tgc-noteref:focus-visible {\n  color: var(--chart-accent);\n  text-decoration: underline;\n}\n\n.tgc-lede {\n  margin: 0 0 16px;\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--text-secondary, var(--chart-ink));\n}\n\n.tgc-plot {\n  container-type: inline-size;\n}\n.tgc-wide svg,\n.tgc-narrow svg {\n  display: block;\n  overflow: visible;\n}\n.tgc-narrow {\n  display: none;\n}\n.tgc-narrow svg {\n  max-width: 100%;\n  height: auto;\n}\n@container (max-width: 719.98px) {\n  .tgc-wide {\n    display: none;\n  }\n  .tgc-narrow {\n    display: block;\n  }\n}\n\n.tgc-read {\n  margin: 8px 0 0;\n  font-size: 12px;\n  line-height: 16px;\n  color: var(--chart-ink-muted);\n}\n\n.tgc-data {\n  margin: 8px 0 0;\n  font-size: 12px;\n  line-height: 16px;\n}\n.tgc-data > summary {\n  cursor: pointer;\n  color: var(--chart-ink-muted);\n  width: fit-content;\n}\n.tgc-data > summary:hover {\n  color: var(--chart-ink);\n}\n.tgc-data[open] > summary {\n  margin-bottom: 8px;\n}\n\n.tgc-scroll {\n  overflow-x: auto;\n}\n.tgc-scroll:focus-visible {\n  outline: 2px solid var(--chart-accent);\n  outline-offset: 2px;\n}\n\n.tgc-table {\n  border-collapse: collapse;\n  min-width: 100%;\n  font-size: 12px;\n  line-height: 16px;\n  color: var(--chart-ink);\n  /* A host page's table rules must not restyle the figure's table. */\n  border: 0;\n  border-radius: 0;\n  background: none;\n}\n.tgc-table caption {\n  text-align: left;\n  padding: 0 0 8px;\n  color: var(--chart-ink-muted);\n}\n.tgc-table th,\n.tgc-table td {\n  padding: 6px 12px 6px 0;\n  border-bottom: 1px solid var(--chart-rule);\n  text-align: left;\n  vertical-align: top;\n  font-weight: 400;\n  font-size: inherit;\n  color: inherit;\n  background: none;\n  text-transform: none;\n  letter-spacing: normal;\n}\n.tgc-table thead th {\n  color: var(--chart-ink-muted);\n  white-space: nowrap;\n}\n.tgc-table tbody th {\n  position: sticky;\n  left: 0;\n  background: var(--chart-canvas, var(--depth-1, transparent));\n}\n.tgc-table .tgc-n {\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.tgc-table thead .tgc-n {\n  font-family: inherit;\n}\n.tgc-table tbody tr:hover {\n  background: var(--chart-shade);\n}\n.tgc-narrow-table .tgc-table {\n  display: block;\n  overflow-x: auto;\n}\n\n.tgc-notes {\n  margin: 16px 0 0;\n  padding-left: 20px;\n  font-size: 12px;\n  line-height: 16px;\n  color: var(--chart-ink-muted);\n}\n.tgc-notes li {\n  margin: 0 0 8px;\n  padding-left: 4px;\n}\n.tgc-notes li:target {\n  color: var(--chart-ink);\n}\n.tgc-backlink {\n  color: var(--chart-ink-muted);\n  text-decoration: none;\n}\n\n.tgc-refusals {\n  margin: 8px 0 0;\n  padding-left: 20px;\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--chart-ink-muted);\n}\n\n/* Marks */\n.tgc-svg {\n  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n.tgc-svg .tgc-num {\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n  font-variant-numeric: tabular-nums;\n}\n.tgc-ink {\n  fill: var(--chart-ink);\n}\n.tgc-ink-muted {\n  fill: var(--chart-ink-muted);\n}\n.tgc-bar,\n.tgc-ci,\n.tgc-pt-front {\n  fill: var(--chart-accent);\n}\n.tgc-gridline {\n  stroke: var(--chart-grid);\n  stroke-width: 1;\n}\n.tgc-rule {\n  stroke: var(--chart-rule);\n  stroke-width: 1;\n}\n.tgc-axis,\n.tgc-zero {\n  stroke: var(--chart-muted);\n  stroke-width: 1;\n}\n.tgc-whisker,\n.tgc-tick {\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-linecap: round;\n}\n.tgc-threshold {\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-dasharray: 3 3;\n}\n.tgc-front-line {\n  fill: none;\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-linejoin: round;\n}\n.tgc-pt,\n.tgc-open {\n  fill: none;\n  stroke: var(--chart-muted);\n  stroke-width: 1.5;\n}\n.tgc-pt-est {\n  fill: none;\n  stroke: var(--chart-accent);\n  stroke-width: 2;\n}\n.tgc-pt-ci,\n.tgc-strike {\n  stroke: var(--chart-muted);\n  stroke-width: 1.5;\n}\n.tgc-leader {\n  stroke: var(--chart-muted);\n  stroke-width: 1;\n}\n.tgc-ci-exact,\n.tgc-dot {\n  fill: var(--chart-muted);\n}\n.tgc-dashed {\n  stroke-dasharray: 2 2;\n}\n.tgc-tier-c {\n  fill: var(--chart-tier-c);\n}\n.tgc-tier-b {\n  fill: var(--chart-tier-b);\n}\n.tgc-tier-a {\n  fill: var(--chart-tier-a);\n}\n.tgc-tier-s {\n  fill: var(--chart-tier-s);\n}\n/* Neutral tint for counts: never the accent, capped at half strength so ink keeps 6:1. */\n.tgc-tint {\n  fill: color-mix(in srgb, var(--chart-muted) calc(var(--s, 0) * 50%), transparent);\n}\n\n@media print {\n  .tgc-plot {\n    container-type: normal;\n  }\n  .tgc-wide {\n    display: block;\n  }\n  .tgc-narrow {\n    display: none;\n  }\n  .tgc-wide svg {\n    width: 100%;\n    height: auto;\n  }\n  .tgc-figure {\n    break-inside: avoid;\n  }\n}\n";
+const figureCss = "/* @tangle-network/charts — figure block and mark styles.\n *\n * Every colour is a --chart-* token from @tangle-network/brand tokens.css, so a\n * figure follows the page theme. A standalone document without brand tokens\n * embeds `chartTokensCss` first. Fonts fall back to Inter and JetBrains Mono.\n *\n * Each figure carries a 720 px and a 358 px render. The swap follows the\n * figure's own width (a container query), so a narrow column shows the phone\n * render even on a wide screen. */\n\n.tgc-figure {\n  margin: 32px 0 0;\n  padding: 0;\n  max-width: 720px;\n  color: var(--chart-ink);\n  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n\n.tgc-finding {\n  margin: 0 0 8px;\n  font-size: 16px;\n  line-height: 24px;\n  font-weight: 600;\n  color: var(--chart-ink);\n}\n\n.tgc-noteref {\n  margin-left: 2px;\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--chart-ink-muted);\n  text-decoration: none;\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n}\n.tgc-noteref:hover,\n.tgc-noteref:focus-visible {\n  color: var(--chart-accent);\n  text-decoration: underline;\n}\n\n.tgc-lede {\n  margin: 0 0 16px;\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--text-secondary, var(--chart-ink));\n}\n\n.tgc-plot {\n  container-type: inline-size;\n}\n.tgc-wide svg,\n.tgc-narrow svg {\n  display: block;\n  overflow: visible;\n}\n.tgc-narrow {\n  display: none;\n}\n.tgc-narrow svg {\n  max-width: 100%;\n  height: auto;\n}\n@container (max-width: 719.98px) {\n  .tgc-wide {\n    display: none;\n  }\n  .tgc-narrow {\n    display: block;\n  }\n}\n\n.tgc-read {\n  margin: 8px 0 0;\n  font-size: 12px;\n  line-height: 16px;\n  color: var(--chart-ink-muted);\n}\n\n.tgc-data {\n  margin: 8px 0 0;\n  font-size: 12px;\n  line-height: 16px;\n}\n.tgc-data > summary {\n  cursor: pointer;\n  color: var(--chart-ink-muted);\n  width: fit-content;\n}\n.tgc-data > summary:hover {\n  color: var(--chart-ink);\n}\n.tgc-data[open] > summary {\n  margin-bottom: 8px;\n}\n\n.tgc-scroll {\n  overflow-x: auto;\n}\n.tgc-scroll:focus-visible {\n  outline: 2px solid var(--chart-accent);\n  outline-offset: 2px;\n}\n\n.tgc-table {\n  border-collapse: collapse;\n  min-width: 100%;\n  font-size: 12px;\n  line-height: 16px;\n  color: var(--chart-ink);\n  /* A host page's table rules must not restyle the figure's table. */\n  border: 0;\n  border-radius: 0;\n  background: none;\n}\n.tgc-table caption {\n  text-align: left;\n  padding: 0 0 8px;\n  color: var(--chart-ink-muted);\n}\n.tgc-table th,\n.tgc-table td {\n  padding: 6px 12px 6px 0;\n  border-bottom: 1px solid var(--chart-rule);\n  text-align: left;\n  vertical-align: top;\n  font-weight: 400;\n  font-size: inherit;\n  color: inherit;\n  background: none;\n  text-transform: none;\n  letter-spacing: normal;\n}\n.tgc-table thead th {\n  color: var(--chart-ink-muted);\n  white-space: nowrap;\n}\n.tgc-table tbody th {\n  position: sticky;\n  left: 0;\n  background: var(--chart-canvas, var(--depth-1, transparent));\n}\n.tgc-table .tgc-n {\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.tgc-table thead .tgc-n {\n  font-family: inherit;\n}\n.tgc-table tbody tr:hover {\n  background: var(--chart-shade);\n}\n.tgc-narrow-table .tgc-table {\n  display: block;\n  overflow-x: auto;\n}\n\n.tgc-notes {\n  margin: 16px 0 0;\n  padding-left: 20px;\n  font-size: 12px;\n  line-height: 16px;\n  color: var(--chart-ink-muted);\n}\n.tgc-notes li {\n  margin: 0 0 8px;\n  padding-left: 4px;\n}\n.tgc-notes li:target {\n  color: var(--chart-ink);\n}\n.tgc-backlink {\n  color: var(--chart-ink-muted);\n  text-decoration: none;\n}\n\n.tgc-refusals {\n  margin: 8px 0 0;\n  padding-left: 20px;\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--chart-ink-muted);\n}\n\n/* Marks */\n.tgc-svg {\n  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n.tgc-svg .tgc-num {\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n  font-variant-numeric: tabular-nums;\n}\n.tgc-ink {\n  fill: var(--chart-ink);\n}\n.tgc-ink-muted {\n  fill: var(--chart-ink-muted);\n}\n.tgc-bar,\n.tgc-ci,\n.tgc-pt-front {\n  fill: var(--chart-accent);\n}\n.tgc-gridline {\n  stroke: var(--chart-grid);\n  stroke-width: 1;\n}\n.tgc-rule {\n  stroke: var(--chart-rule);\n  stroke-width: 1;\n}\n.tgc-axis,\n.tgc-zero {\n  stroke: var(--chart-muted);\n  stroke-width: 1;\n}\n.tgc-whisker,\n.tgc-tick {\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-linecap: round;\n}\n.tgc-threshold {\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-dasharray: 3 3;\n}\n.tgc-front-line {\n  fill: none;\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-linejoin: round;\n}\n.tgc-pt,\n.tgc-open {\n  fill: none;\n  stroke: var(--chart-muted);\n  stroke-width: 1.5;\n}\n.tgc-pt-est {\n  fill: none;\n  stroke: var(--chart-accent);\n  stroke-width: 2;\n}\n.tgc-pt-ci,\n.tgc-strike {\n  stroke: var(--chart-muted);\n  stroke-width: 1.5;\n}\n.tgc-leader {\n  stroke: var(--chart-muted);\n  stroke-width: 1;\n}\n.tgc-ci-exact,\n.tgc-dot {\n  fill: var(--chart-muted);\n}\n.tgc-dashed {\n  stroke-dasharray: 2 2;\n}\n.tgc-tier-c {\n  fill: var(--chart-tier-c);\n}\n.tgc-tier-b {\n  fill: var(--chart-tier-b);\n}\n.tgc-tier-a {\n  fill: var(--chart-tier-a);\n}\n.tgc-tier-s {\n  fill: var(--chart-tier-s);\n}\n/* Neutral tint for counts: never the accent, capped at half strength so ink keeps 6:1. */\n.tgc-tint {\n  fill: color-mix(in srgb, var(--chart-muted) calc(var(--s, 0) * 50%), transparent);\n}\n\n@media print {\n  .tgc-plot {\n    container-type: normal;\n  }\n  .tgc-wide {\n    display: block;\n  }\n  .tgc-narrow {\n    display: none;\n  }\n  .tgc-wide svg {\n    width: 100%;\n    height: auto;\n  }\n  .tgc-figure {\n    break-inside: avoid;\n  }\n}\n\n/* Chart-led surfaces keep supporting text in the native disclosure. */\n.tgc-figure-chart { max-width: none; margin: 0; }\n.tgc-figure-chart .tgc-wide svg { width: 100%; height: auto; }\n.tgc-wide:has(.tgc-vertical), .tgc-narrow:has(.tgc-vertical) { overflow-x: auto; }\n.tgc-vertical { width: 100%; }\n.tgc-narrow .tgc-vertical { max-width: none; }\n.tgc-column-hit { fill: transparent; stroke: transparent; stroke-width: 2; }\n.tgc-column:focus-visible { outline: none; }\n.tgc-column:focus-visible .tgc-column-hit { stroke: var(--chart-accent); }\n.tgc-vertical-bar { fill: var(--chart-accent); }\n/* Identity assets keep their approved colors on a white plate in either theme. */\n.tgc-logo-plate { fill: #fff; stroke: var(--chart-rule); }\n.tgc-column-tip { opacity: 0; pointer-events: none; }\n.tgc-tip-bg { fill: var(--chart-ink); }\n.tgc-tip-ink { fill: var(--chart-canvas); }\n\n.tgc-series-line { fill: none; stroke: var(--chart-accent); stroke-width: 2; stroke-linejoin: round; }\n.tgc-series-point { fill: var(--chart-accent); stroke: var(--chart-canvas); stroke-width: 1; }\n.tgc-series-hit { fill: transparent; stroke: transparent; }\n.tgc-series-observation:focus-visible { outline: none; }\n.tgc-series-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }\n.tgc-series-tip { opacity: 0; pointer-events: none; }\n\n.tgc-scalar-table { min-width: 620px; }\n.tgc-scalar-table tbody th { min-width: 180px; max-width: 260px; }\n";
 /** --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:#f2f2f2;--chart-rule:#d0d0d0;--chart-shade:rgba(76, 63, 198, 0.06);--chart-accent:hsl(246 54% 51%);--chart-tier-c:#9b9ef0;--chart-tier-b:#7c7fe3;--chart-tier-a:#5b5bd6;--chart-tier-s:#272962;--chart-canvas:#ffffff;color-scheme:light}\n@media (prefers-color-scheme: dark){:root:not([data-theme=\"light\"]){--chart-ink:#e6e6e6;--chart-ink-muted:#a5a5a5;--chart-muted:#8e8e8e;--chart-grid:#353535;--chart-rule:#4c4c4c;--chart-shade:rgba(165, 180, 252, 0.07);--chart-accent:#818CF8;--chart-tier-c:#4a4a95;--chart-tier-b:#5b5bd6;--chart-tier-a:#8b87f0;--chart-tier-s:#b1a9ff;--chart-canvas:#161616;color-scheme:dark}}\n:root[data-theme=\"dark\"]{--chart-ink:#e6e6e6;--chart-ink-muted:#a5a5a5;--chart-muted:#8e8e8e;--chart-grid:#353535;--chart-rule:#4c4c4c;--chart-shade:rgba(165, 180, 252, 0.07);--chart-accent:#818CF8;--chart-tier-c:#4a4a95;--chart-tier-b:#5b5bd6;--chart-tier-a:#8b87f0;--chart-tier-s:#b1a9ff;--chart-canvas:#161616;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:#f2f2f2;--chart-rule:#d0d0d0;--chart-shade:rgba(76, 63, 198, 0.06);--chart-accent:hsl(246 54% 51%);--chart-tier-c:#9b9ef0;--chart-tier-b:#7c7fe3;--chart-tier-a:#5b5bd6;--chart-tier-s:#272962;--chart-canvas:#ffffff;color-scheme:light}}";
 //#endregion
+//#region src/vertical-columns.ts
+function image(mark, x, y, size) {
+	return `<image href="${esc(mark.src)}" x="${x}" y="${y}" width="${size}" height="${size}" preserveAspectRatio="xMidYMid meet"><title>${esc(mark.label)}</title></image>`;
+}
+function verticalColumns(rows, viewport, measure, domain, tickLabel, scalarLayout = false) {
+	const width = Math.max(viewport, 64 + rows.length * 112);
+	const left = 48;
+	const top = 42;
+	const bottom = 302;
+	const band = 260;
+	const slot = 112;
+	const barWidth = Math.min(viewport < 720 ? 44 : 64, slot * .55);
+	const labelWidth = Math.min(100, 170);
+	const labels = rows.map((row) => wrap(row.identity?.model?.label ?? row.label, labelWidth, 14, "sans", 8));
+	const labelLines = Math.max(...labels.map((label) => label.lines.length));
+	const harnessLabels = rows.map((row) => wrap(row.identity?.harness?.label ?? "", labelWidth, 12, "sans", 8));
+	const harnessLines = scalarLayout ? Math.max(1, ...harnessLabels.map((label) => label.lines.length)) : 1;
+	const height = 408 + Math.max(0, labelLines - 1) * 18 + (harnessLines - 1) * 16;
+	let grid = "";
+	for (const tick of [
+		0,
+		.2,
+		.4,
+		.6,
+		.8,
+		1
+	]) {
+		const y = bottom - tick * band;
+		grid += `<line class="${tick === 0 ? "tgc-axis" : "tgc-gridline"}" x1="${left}" y1="${y}" x2="100%" y2="${y}"/>`;
+		grid += text(38, y + 4, tickLabel(domain[0] + tick * (domain[1] - domain[0])), {
+			cls: "tgc-ink-muted tgc-num",
+			anchor: "end"
+		});
+	}
+	grid += text(left, 18, measure, { cls: "tgc-ink-muted" });
+	let columns = "";
+	let tips = "";
+	let rules = "";
+	for (const [i, row] of rows.entries()) {
+		const x = left + slot * (i + .5);
+		const y = bottom - ((row.value ?? domain[0]) - domain[0]) / (domain[1] - domain[0]) * band;
+		const identity = row.identity;
+		const facts = row.facts;
+		let marks = rect(x - slot / 2 + 3, 18, 106, height - top + 12, "tgc-column-hit", "rx=\"6\"");
+		if (row.value !== null) {
+			marks += rect(x - barWidth / 2, y, barWidth, (row.value - domain[0]) / (domain[1] - domain[0]) * band, "tgc-vertical-bar", "rx=\"5\"");
+			if (row.interval) {
+				const lo = bottom - (row.interval.lower - domain[0]) / (domain[1] - domain[0]) * band;
+				const hi = bottom - (row.interval.upper - domain[0]) / (domain[1] - domain[0]) * band;
+				marks += line(x, lo, x, hi, "tgc-whisker");
+				marks += line(x - 5, lo, x + 5, lo, "tgc-whisker") + line(x - 5, hi, x + 5, hi, "tgc-whisker");
+			}
+			marks += text(scalarLayout ? x : x + barWidth / 2 + 7, Math.max(34, y - 9), scalarLayout ? wrap(row.valueLabel, 100, 15, "mono", 1).lines[0] : row.valueLabel, {
+				size: 15,
+				weight: 600,
+				anchor: "middle",
+				cls: "tgc-ink tgc-num"
+			});
+		} else marks += text(x, 290, row.valueLabel, {
+			anchor: "middle",
+			cls: "tgc-ink-muted"
+		});
+		if (row.belowBar) marks += row.belowBar(x, barWidth, bottom);
+		if (identity?.model) {
+			marks += rect(x - 18, 325, 36, 36, "tgc-logo-plate", "rx=\"6\"");
+			marks += image(identity.model, x - 16, 327, 32);
+		}
+		if (identity?.harness) {
+			marks += rect(x + 3, 345, 22, 22, "tgc-logo-plate", "rx=\"5\"");
+			marks += image(identity.harness, x + 6, 348, 16);
+		}
+		marks += textBlock(labels[i].lines, x, 386, 18, "class=\"tgc-ink\" font-size=\"14\" text-anchor=\"middle\"");
+		if (identity?.harness) {
+			const harnessY = 405 + (labels[i].lines.length - 1) * 18;
+			marks += scalarLayout ? textBlock(harnessLabels[i].lines, x, harnessY, 16, "class=\"tgc-ink-muted\" font-size=\"12\" text-anchor=\"middle\"") : text(x, harnessY, identity.harness.label, {
+				anchor: "middle",
+				cls: "tgc-ink-muted"
+			});
+		}
+		if (row.rankLabel) marks += text(x, 33, row.rankLabel, {
+			anchor: "middle",
+			cls: "tgc-ink-muted tgc-num"
+		});
+		columns += `<g class="tgc-column" data-column="${i}" tabindex="0" role="img" aria-label="${esc(facts.join(" · "))}"><title>${esc(facts.join(" · "))}</title>${marks}</g>`;
+		const tipWidth = Math.min(280, width - 24);
+		const tipX = Math.max(12, Math.min(width - tipWidth - 12, x - tipWidth / 2));
+		const tipLines = facts.flatMap((fact) => wrap(fact, tipWidth - 24, 12, "sans", 8).lines);
+		const tipHeight = tipLines.length * 17 + 24;
+		tips += `<g class="tgc-column-tip" data-tip="${i}" aria-hidden="true">${rect(tipX, top, tipWidth, tipHeight, "tgc-tip-bg", "rx=\"7\"")}${textBlock(tipLines, tipX + 12, 62, 17, "class=\"tgc-tip-ink\" font-size=\"12\"")}</g>`;
+		rules += `.tgc-vertical:has(.tgc-column[data-column="${i}"]:hover) [data-tip="${i}"],.tgc-vertical:not(:has(.tgc-column:hover)):has(.tgc-column[data-column="${i}"]:focus-visible) [data-tip="${i}"]{opacity:1}`;
+	}
+	return `<svg class="tgc-svg tgc-vertical" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" style="height:${height}px;min-width:${64 + rows.length * 112}px" role="group" aria-label="${esc(measure)} by setup"><style>${rules}</style>${grid}${columns}${tips}</svg>`;
+}
+//#endregion
+//#region src/vertical-rates.ts
+/** Rate-specific annotations for the shared vertical columns. */
+const rateLabel = (rate) => `${Number((rate * 100).toFixed(1))}%`;
+function verticalRates(rows, viewport, ranked, o) {
+	return verticalColumns(rows.map((row) => {
+		const facts = [
+			row.label,
+			`${kn(row.solved, row.attempts)} passed`,
+			drawable(row.estimate) ? rateLabel(row.rate) : estimateNote(row.estimate, row.attempts)
+		];
+		if (row.interval && rateIntervalGap(row) === null) facts.push(`${intervalName(row.interval)}: ${rateLabel(row.interval.lower)}–${rateLabel(row.interval.upper)}`);
+		if (row.solved > 0 && perPass(row.cost) !== null) facts.push(`${costText(row.cost, row.solved)} per pass`);
+		if (row.medianWallMs !== null) facts.push(`${duration(row.medianWallMs)} median run`);
+		return {
+			id: row.id,
+			label: row.label,
+			value: drawable(row.estimate) ? row.rate : null,
+			valueLabel: drawable(row.estimate) ? rateLabel(row.rate) : estimateNote(row.estimate, row.attempts),
+			interval: rateIntervalGap(row) === null ? row.interval : null,
+			facts,
+			identity: o.identities?.[row.id],
+			...ranked ? { rankLabel: `Rank ${row.rank}` } : {},
+			belowBar: (x, barWidth, bottom) => {
+				let marks = "";
+				if (row.tiers && row.attempts > 0 && drawable(row.estimate)) {
+					let cursor = x - barWidth / 2;
+					for (const tier of TIERS_BEST_FIRST) {
+						const segment = row.tiers[tier] / row.attempts * barWidth;
+						if (segment > 0) marks += rect(cursor, bottom + 9, segment, 5, tier === "F" ? "tgc-open" : `tgc-tier-${tier.toLowerCase()}`);
+						cursor += segment;
+					}
+					if (o.passTier) {
+						const count = TIERS_BEST_FIRST.filter((tier) => tierAtLeast(tier, o.passTier)).reduce((sum, tier) => sum + row.tiers[tier], 0);
+						const tx = x - barWidth / 2 + count / row.attempts * barWidth;
+						marks += line(tx, bottom + 6, tx, bottom + 17, "tgc-tick");
+					}
+				}
+				return marks;
+			}
+		};
+	}), viewport, o.measure, [0, 1], pct);
+}
+//#endregion
+//#region src/identity.ts
+function identityGap(rows, identities) {
+	if (!identities) return null;
+	for (const [id, identity] of Object.entries(identities)) {
+		if (!rows.some((row) => row.id === id)) return `Identity names unknown setup ${id}.`;
+		if (!identity || typeof identity !== "object") return `Invalid display identity for ${id}.`;
+		for (const mark of [identity.model, identity.harness]) {
+			if (!mark) continue;
+			if (typeof mark.label !== "string" || !mark.label.trim() || typeof mark.src !== "string") return `Invalid display identity for ${id}.`;
+			const local = /^\/(?!\/)[^\s<>"']+$/.test(mark.src);
+			const https = /^https:\/\/[a-z0-9.-]+(?::\d+)?\/[^\s<>"']*$/i.test(mark.src);
+			if (!local && !https) return `Invalid identity image for ${id}.`;
+		}
+	}
+	return null;
+}
+//#endregion
 //#region src/ranked-rates.ts
 /**
 * `rankedRates`: which setup passes most, and how uncertain is each rate.
@@ -1280,6 +1447,15 @@ const TICKS = [
 ];
 function rankedRates(input, o) {
 	const id = o.id ?? "ranked-rates";
+	if (o.orientation !== void 0 && o.orientation !== "vertical") return {
+		id,
+		refused: "Unknown bar orientation."
+	};
+	const identityProblem = identityGap(input, o.identities);
+	if (identityProblem) return {
+		id,
+		refused: identityProblem
+	};
 	const noun = o.nouns ?? {
 		attempt: "attempt",
 		setup: "setup"
@@ -1404,7 +1580,11 @@ function rankedRates(input, o) {
 		finding,
 		lede,
 		read,
-		svg: {
+		svg: o.orientation === "vertical" ? {
+			wide: verticalRates(rows, 720, layout.ranked, o),
+			narrow: verticalRates(rows, 358, layout.ranked, o),
+			interactive: true
+		} : {
 			wide: wide(rows, layout, noun, o),
 			narrow: narrow(rows, layout, o)
 		},
@@ -2004,4 +2184,266 @@ function isRefusal(value) {
 	return "refused" in value;
 }
 //#endregion
-export { breakdown, chartTokensCss, comparisonIntervals, costFrontier, figureCss, isRefusal, rankedRates, rateOrder, renderFigure, renderNotes, renderRefusals, taskMatrix };
+//#region src/scalar.ts
+/** Validation and display of recorded scalar observations; no statistics are computed here. */
+function domainGap(domain) {
+	return domain.length !== 2 || !domain.every(Number.isFinite) || domain[0] >= domain[1] || !Number.isFinite(domain[1] - domain[0]) ? "The axis needs two finite, increasing bounds." : null;
+}
+function scalarGap(value, interval, observations, domain) {
+	if (value !== null && (!Number.isFinite(value) || value < domain[0] || value > domain[1])) return "The value is outside the recorded axis domain.";
+	if (observations) {
+		if (!observations.label.trim()) return "An observation count needs its unit.";
+		if (observations.count !== null && (!Number.isInteger(observations.count) || observations.count < 0)) return "Observation counts must be nonnegative whole numbers or null.";
+		if (observations.count === 0 && value !== null) return "A measured value cannot have zero observations.";
+	}
+	if (interval) {
+		if (value === null) return "An unmeasured value cannot have an interval.";
+		if (interval.method !== null && !Object.hasOwn(METHOD_NAME, interval.method)) return "The interval method is unknown.";
+		const gap = intervalGap(interval);
+		if (gap) return gap;
+		if (interval.lower < domain[0] || interval.upper > domain[1]) return "The interval is outside the axis domain.";
+	}
+	return null;
+}
+function scalarLabel(value, unit, format) {
+	return `${format ? format(value) : String(value)}${unit ? ` ${unit}` : ""}`;
+}
+function observationLabel(observations) {
+	return observations ? `${observations.count ?? "unknown"} ${observations.label}` : "observation count unknown";
+}
+/** Shift the recorded decimal level, without rounding it to a different confidence. */
+function confidencePercent(level) {
+	const [coefficient, exponent] = String(level).split("e-");
+	const digits = (exponent ? `0.${"0".repeat(Number(exponent) - 1)}${coefficient.replace(".", "")}` : coefficient).slice(2).padEnd(2, "0");
+	const fraction = digits.slice(2).replace(/0+$/, "");
+	return `${Number(digits.slice(0, 2))}${fraction ? `.${fraction}` : ""}%`;
+}
+function scalarIntervalLabel(interval, unit, format) {
+	return interval ? `${scalarLabel(interval.lower, unit, format)}–${scalarLabel(interval.upper, unit, format)} (${confidencePercent(interval.level)} ${METHOD_NAME[interval.method]})` : "not recorded";
+}
+//#endregion
+//#region src/metric-bars.ts
+/** Scalar bars preserve input order and draw only producer-recorded values and intervals. */
+function metricBars(rows, o) {
+	const id = o.id ?? "metric-bars";
+	const gap = domainGap(o.domain);
+	if (gap) return {
+		id,
+		refused: gap
+	};
+	if (o.domain[0] !== 0) return {
+		id,
+		refused: "Bars require a zero baseline."
+	};
+	if (!rows.length) return {
+		id,
+		refused: `No ${o.measure} recorded.`
+	};
+	if (new Set(rows.map((row) => row.id)).size !== rows.length) return {
+		id,
+		refused: "Duplicate scalar row ids."
+	};
+	const identityProblem = identityGap(rows, o.identities);
+	if (identityProblem) return {
+		id,
+		refused: identityProblem
+	};
+	for (const row of rows) {
+		const problem = scalarGap(row.value, row.interval, row.observations, o.domain);
+		if (problem) return {
+			id,
+			refused: `${row.label}: ${problem}`
+		};
+	}
+	const label = (value) => scalarLabel(value, o.unit, o.formatValue);
+	const columns = rows.map((row) => ({
+		id: row.id,
+		label: row.label,
+		value: row.value,
+		valueLabel: row.value === null ? "not measured" : label(row.value),
+		interval: row.interval ?? null,
+		identity: o.identities?.[row.id],
+		facts: [
+			row.label,
+			`${o.measure}: ${row.value === null ? "not measured" : label(row.value)}`,
+			observationLabel(row.observations),
+			...row.interval ? [`Interval: ${scalarIntervalLabel(row.interval, o.unit, o.formatValue)}`] : []
+		]
+	}));
+	const measured = rows.filter((row) => row.value !== null);
+	return {
+		id,
+		finding: `${capitalize(o.measure)} by setup.`,
+		lede: `${measured.length} of ${rows.length} recorded values.`,
+		read: "Bars start at zero. Missing values have no bar; whiskers show recorded intervals. Input order is preserved.",
+		svg: {
+			wide: verticalColumns(columns, 720, o.measure, o.domain, (value) => scalarLabel(value, "", o.formatValue), true),
+			narrow: verticalColumns(columns, 358, o.measure, o.domain, (value) => scalarLabel(value, "", o.formatValue), true),
+			interactive: true
+		},
+		table: table(`${capitalize(o.measure)} by setup`, [
+			{ label: "Setup" },
+			{
+				label: o.measure,
+				numeric: true
+			},
+			{ label: "Observations" },
+			{ label: "Recorded interval" }
+		], rows.map((row) => [
+			row.label,
+			row.value === null ? "not measured" : label(row.value),
+			observationLabel(row.observations),
+			scalarIntervalLabel(row.interval, o.unit, o.formatValue)
+		])).replace("class=\"tgc-table\"", "class=\"tgc-table tgc-scalar-table\""),
+		note: {
+			method: "Recorded scalar values, in input order. No rank, interval or statistical comparison is inferred.",
+			n: rows.map((row) => `${row.label}: ${observationLabel(row.observations)}`).join("; "),
+			exclusions: rows.filter((row) => row.value === null).map((row) => `${row.label}: not measured.`)
+		}
+	};
+}
+//#endregion
+//#region src/time-series.ts
+/** Recorded trajectories. Explicit null observations break lines without interpolation. */
+function timeSeries(rows, o) {
+	const id = o.id ?? "time-series";
+	const gap = domainGap(o.x.domain) ?? domainGap(o.y.domain);
+	if (gap) return {
+		id,
+		refused: gap
+	};
+	if (!rows.length || rows.every((row) => !row.points.length)) return {
+		id,
+		refused: "No trajectory observations recorded."
+	};
+	if (new Set(rows.map((row) => row.id)).size !== rows.length) return {
+		id,
+		refused: "Duplicate trajectory ids."
+	};
+	for (const row of rows) {
+		let previous = -Infinity;
+		for (const point of row.points) {
+			if (!Number.isFinite(point.x) || point.x <= previous || point.x < o.x.domain[0] || point.x > o.x.domain[1]) return {
+				id,
+				refused: `${row.label}: x values must be finite, strictly increasing and inside the axis domain.`
+			};
+			previous = point.x;
+			const problem = scalarGap(point.y, point.interval, point.observations, o.y.domain);
+			if (problem) return {
+				id,
+				refused: `${row.label} at ${point.x}: ${problem}`
+			};
+		}
+	}
+	const xLabel = (x) => o.formatX ? o.formatX(x) : String(x);
+	const yLabel = (y) => scalarLabel(y, o.y.unit, o.formatY);
+	const flat = rows.flatMap((row) => row.points.map((point) => ({
+		row,
+		point
+	})));
+	const measured = flat.filter(({ point }) => point.y !== null);
+	const facts = (row, point) => [
+		row.label,
+		`${o.x.label}: ${xLabel(point.x)}`,
+		`${o.y.label}: ${point.y === null ? "not measured" : yLabel(point.y)}`,
+		observationLabel(point.observations),
+		...point.interval ? [`Interval: ${scalarIntervalLabel(point.interval, o.y.unit, o.formatY)}`] : [],
+		...point.annotation ? [point.annotation] : []
+	];
+	return {
+		id,
+		finding: `${capitalize(o.y.label)} by ${o.x.label}.`,
+		lede: `${measured.length} of ${flat.length} positions have a recorded value.`,
+		read: "Points show recorded values. Lines connect adjacent measured positions; missing positions break the line. Whiskers show recorded intervals.",
+		svg: {
+			wide: plot(rows, o, 720, xLabel, yLabel, facts),
+			narrow: plot(rows, o, 358, xLabel, yLabel, facts),
+			interactive: true
+		},
+		table: table(`${capitalize(o.y.label)} by ${o.x.label}`, [
+			{ label: "Setup" },
+			{
+				label: o.x.label,
+				numeric: true
+			},
+			{
+				label: o.y.label,
+				numeric: true
+			},
+			{ label: "Observations" },
+			{ label: "Recorded interval" },
+			{ label: "Recorded annotation" }
+		], flat.map(({ row, point }) => [
+			row.label,
+			xLabel(point.x),
+			point.y === null ? "not measured" : yLabel(point.y),
+			observationLabel(point.observations),
+			scalarIntervalLabel(point.interval, o.y.unit, o.formatY),
+			point.annotation ?? ""
+		])).replace("class=\"tgc-table\"", "class=\"tgc-table tgc-scalar-table\""),
+		note: {
+			method: "Recorded scalar observations. Missing positions are not interpolated; no uncertainty or statistical comparison is inferred.",
+			n: "Observation counts are recorded separately at each position.",
+			exclusions: flat.filter(({ point }) => point.y === null).map(({ row, point }) => `${row.label}, ${o.x.label} ${xLabel(point.x)}: not measured.`)
+		}
+	};
+}
+function plot(rows, o, width, xLabel, yLabel, facts) {
+	const left = 64, right = width - 24, top = 36, bottom = 260;
+	const px = (x) => left + (x - o.x.domain[0]) / (o.x.domain[1] - o.x.domain[0]) * (right - left);
+	const py = (y) => bottom - (y - o.y.domain[0]) / (o.y.domain[1] - o.y.domain[0]) * 224;
+	let marks = text(left, 18, o.y.label, { cls: "tgc-ink-muted" });
+	for (let i = 0; i <= 4; i++) {
+		const y = o.y.domain[0] + i / 4 * (o.y.domain[1] - o.y.domain[0]);
+		marks += line(left, py(y), right, py(y), i === 0 ? "tgc-axis" : "tgc-gridline") + text(56, py(y) + 4, yLabel(y), {
+			anchor: "end",
+			cls: "tgc-ink-muted tgc-num",
+			size: 11
+		});
+	}
+	const xs = [...new Set(rows.flatMap((row) => row.points.map((point) => point.x)))].sort((a, b) => a - b);
+	const tickStep = Math.max(1, Math.ceil(xs.length / (width < 720 ? 5 : 10)));
+	for (const [i, x] of xs.entries()) if (i % tickStep === 0 || i === xs.length - 1) marks += text(px(x), 280, xLabel(x), {
+		anchor: "middle",
+		cls: "tgc-ink-muted tgc-num"
+	});
+	marks += text((left + right) / 2, 303, o.x.label, {
+		anchor: "middle",
+		cls: "tgc-ink-muted"
+	});
+	let legendY = 332;
+	let points = "", tips = "", rules = "";
+	let pointId = 0;
+	for (const [seriesIndex, row] of rows.entries()) {
+		const dash = seriesIndex === 0 ? "" : `${2 + seriesIndex * 2} 3`;
+		let segment = [];
+		const flush = () => {
+			if (segment.length > 1) marks += `<g data-series="${esc(row.id)}" style="stroke-dasharray:${dash}">${polyline(segment, "tgc-series-line")}</g>`;
+			segment = [];
+		};
+		for (const point of row.points) {
+			if (point.y === null) {
+				flush();
+				continue;
+			}
+			const x = px(point.x), y = py(point.y);
+			segment.push([x, y]);
+			const pointFacts = facts(row, point);
+			const key = pointId++;
+			let dot = circle(x, y, 10, "tgc-series-hit") + circle(x, y, 3.5, "tgc-series-point");
+			if (point.interval) dot += line(x, py(point.interval.lower), x, py(point.interval.upper), "tgc-whisker") + line(x - 4, py(point.interval.lower), x + 4, py(point.interval.lower), "tgc-whisker") + line(x - 4, py(point.interval.upper), x + 4, py(point.interval.upper), "tgc-whisker");
+			points += `<g class="tgc-series-observation" data-point="${key}" tabindex="0" role="img" aria-label="${esc(pointFacts.join(" · "))}"><title>${esc(pointFacts.join(" · "))}</title>${dot}</g>`;
+			const tipWidth = Math.min(280, width - 24), tipX = Math.max(12, Math.min(width - tipWidth - 12, x - tipWidth / 2));
+			const lines = pointFacts.flatMap((fact) => wrap(fact, tipWidth - 24, 12, "sans", 8).lines);
+			tips += `<g class="tgc-series-tip" data-series-tip="${key}" aria-hidden="true">${rect(tipX, top, tipWidth, lines.length * 17 + 24, "tgc-tip-bg", "rx=\"7\"")}${textBlock(lines, tipX + 12, 56, 17, "class=\"tgc-tip-ink\" font-size=\"12\"")}</g>`;
+			rules += `.tgc-trajectories:has([data-point="${key}"]:hover) [data-series-tip="${key}"],.tgc-trajectories:not(:has(.tgc-series-observation:hover)):has([data-point="${key}"]:focus-visible) [data-series-tip="${key}"]{opacity:1}`;
+		}
+		flush();
+		const label = wrap(row.label, right - left - 32, 12, "sans", 8);
+		marks += `<g style="stroke-dasharray:${dash}">${line(left, legendY - 4, 88, legendY - 4, "tgc-series-line")}</g>` + textBlock(label.lines, 96, legendY, 16, "class=\"tgc-ink\" font-size=\"12\"");
+		legendY += label.lines.length * 16 + 8;
+	}
+	return `<svg class="tgc-svg tgc-trajectories" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${legendY + 12}" viewBox="0 0 ${width} ${legendY + 12}" role="group" aria-label="${esc(o.y.label)} by ${esc(o.x.label)}"><style>${rules}</style>${marks}${points}${tips}</svg>`;
+}
+//#endregion
+export { breakdown, chartTokensCss, comparisonIntervals, costFrontier, figureCss, isRefusal, metricBars, rankedRates, rateOrder, renderFigure, renderNotes, renderRefusals, taskMatrix, timeSeries };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/charts",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "Benchmark figures as static SVG and HTML tables: ranked rates, cost frontier, comparison intervals, task matrix and breakdown. Draws from producer data and refuses what it cannot draw honestly.",
   "type": "module",
   "license": "MIT",