@tangle-network/charts 0.1.10 → 0.1.12

package/README.md

@@ -82,3 +82,50 @@ Use `renderFigure(figure, noteNumber, { presentation: 'chart' })` for a chart-fi
 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.
+
+### Plots without visible report controls
+
+Use `renderFigure(figure, noteNumber, { presentation: "plot" })` to show the responsive plot alone.
+The complete data table remains available to assistive technology.
+This presentation has no visible finding, method text, disclosure or table control.
+Vertical plot axes use larger tick labels.
+The existing report and chart presentations keep their output and paper behavior.

package/dist/figure.css

@@ -309,3 +309,21 @@
 .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; }
+
+/* Plot presentation keeps the same complete data available to assistive technology. */
+.tgc-accessible-data { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+.tgc-figure-plot .tgc-vertical > text.tgc-num { font-size: 15px; }
+.tgc-figure-plot .tgc-wide, .tgc-figure-plot .tgc-narrow { overflow-x: auto; }
+
+.tgc-figure-plot .tgc-wide-fallback svg { min-width: var(--tgc-fallback-width); }
+.tgc-wide-fallback:focus-visible { outline: 2px solid var(--chart-accent); outline-offset: 2px; }

package/dist/index.d.ts

@@ -134,8 +134,8 @@ export declare function isRefusal(value: Figure | Refusal): value is Refusal;
 //#endregion
 //#region src/block.d.ts
 interface RenderFigureOptions {
-  /** Plot first, with interpretation and source details in a closed disclosure. */
-  presentation?: "chart";
+  /** Chart uses a closed data disclosure; plot keeps only the SVG and accessible data. */
+  presentation?: "chart" | "plot";
 }
 export declare function renderFigure(f: Figure, noteNumber: number, options?: RenderFigureOptions): string;
 /** Numbered notes for `figures`, in the order their blocks were numbered (1-based). */
@@ -181,7 +181,8 @@ export declare const chartTokensCss: string;
  */
 export declare function rateOrder<T extends Pick<RateRow, "rank" | "rate" | "estimate" | "attempts">>(rows: readonly T[]): T[];
 //#endregion
-//#region src/ranked-rates.d.ts
+//#region src/identity.d.ts
+/** Model and harness marks supplied explicitly by the consumer. */
 interface RateIdentity {
   model?: {
     label: string;
@@ -192,6 +193,8 @@ interface RateIdentity {
     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";
@@ -232,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, RateIdentity, RateRow, Refusal, RenderFigureOptions, 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

@@ -301,6 +301,47 @@ function capitalize(text) {
 	return text.charAt(0).toUpperCase() + text.slice(1);
 }
 //#endregion
+//#region src/svg.ts
+/**
+* SVG marks. Every mark carries a class and `figure.css` maps classes to the
+* `--chart-*` tokens, so a render holds no colour and follows the page theme.
+* Geometry stays in attributes, so an SVG shown without the stylesheet keeps
+* its layout.
+*/
+const r2 = (n) => Math.round(n * 100) / 100;
+function svgRoot(width, height, inner) {
+	const h = Math.ceil(height);
+	return `<svg class="tgc-svg" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${h}" viewBox="0 0 ${width} ${h}" aria-hidden="true" focusable="false">${inner}</svg>`;
+}
+/** A horizontal bar anchored at `x`, square at the baseline, 4 px round at the data end. */
+function hbar(x, y, w, h, cls) {
+	if (w <= 0) return "";
+	const r = Math.min(4, h / 2, w);
+	return `<path class="${cls}" d="M${r2(x)} ${r2(y)}h${r2(w - r)}a${r} ${r} 0 0 1 ${r} ${r}v${r2(h - 2 * r)}a${r} ${r} 0 0 1 -${r} ${r}h-${r2(w - r)}z"/>`;
+}
+function rect(x, y, w, h, cls, extra = "") {
+	if (w <= 0 || h <= 0) return "";
+	return `<rect class="${cls}" x="${r2(x)}" y="${r2(y)}" width="${r2(w)}" height="${r2(h)}"${extra ? ` ${extra}` : ""}/>`;
+}
+function line(x1, y1, x2, y2, cls) {
+	return `<line class="${cls}" x1="${r2(x1)}" y1="${r2(y1)}" x2="${r2(x2)}" y2="${r2(y2)}"/>`;
+}
+function circle(cx, cy, r, cls) {
+	return `<circle class="${cls}" cx="${r2(cx)}" cy="${r2(cy)}" r="${r}"/>`;
+}
+function polyline(points, cls) {
+	return `<polyline class="${cls}" points="${points.map(([x, y]) => `${r2(x)},${r2(y)}`).join(" ")}"/>`;
+}
+function text(x, y, value, o = {}) {
+	const anchor = o.anchor && o.anchor !== "start" ? ` text-anchor="${o.anchor}"` : "";
+	const weight = o.weight === 600 ? ` font-weight="600"` : "";
+	return `<text class="${o.cls ?? "tgc-ink"}" x="${r2(x)}" y="${r2(y)}" font-size="${o.size ?? 12}"${anchor}${weight}>${esc(value)}</text>`;
+}
+/** A group whose `<title>` is the hover text for everything inside it. */
+function titled(title, inner) {
+	return `<g><title>${esc(title)}</title>${inner}</g>`;
+}
+//#endregion
 //#region src/block.ts
 /**
 * The figure block: one markup for every figure on every surface.
@@ -312,10 +353,18 @@ function capitalize(text) {
 */
 const slug = (id) => id.replace(/[^a-z0-9-]+/gi, "-").toLowerCase();
 function renderFigure(f, noteNumber, options = {}) {
-	if (options.presentation !== void 0 && options.presentation !== "chart") throw new Error("renderFigure: unknown presentation.");
+	if (options.presentation !== void 0 && options.presentation !== "chart" && options.presentation !== "plot") 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 === "plot") {
+		const phonePlot = f.svg.narrow ? `<div class="tgc-narrow">${f.svg.narrow}</div>` : `<div class="tgc-narrow tgc-wide-fallback" role="region" aria-label="${esc(f.finding)} chart" tabindex="0" style="--tgc-fallback-width:720px">${f.svg.wide}</div>`;
+		return [
+			`<figure class="tgc-figure tgc-figure-chart tgc-figure-plot" id="fig-${id}" aria-label="${esc(f.finding)}">`,
+			`<div class="tgc-plot" role="${f.svg.interactive ? "group" : "img"}" aria-label="${esc(plotLabel)}"><div class="tgc-wide">${f.svg.wide}</div>${phonePlot}</div>`,
+			`<div class="tgc-accessible-data">${f.table}</div></figure>`
+		].join("");
+	}
 	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>`,
@@ -359,47 +408,6 @@ function renderRefusals(refusals) {
 	return `<ul class="tgc-refusals">${refusals.map((r) => `<li>${esc(r.refused)}</li>`).join("")}</ul>`;
 }
 //#endregion
-//#region src/svg.ts
-/**
-* SVG marks. Every mark carries a class and `figure.css` maps classes to the
-* `--chart-*` tokens, so a render holds no colour and follows the page theme.
-* Geometry stays in attributes, so an SVG shown without the stylesheet keeps
-* its layout.
-*/
-const r2 = (n) => Math.round(n * 100) / 100;
-function svgRoot(width, height, inner) {
-	const h = Math.ceil(height);
-	return `<svg class="tgc-svg" xmlns="http://www.w3.org/2000/svg" width="${width}" height="${h}" viewBox="0 0 ${width} ${h}" aria-hidden="true" focusable="false">${inner}</svg>`;
-}
-/** A horizontal bar anchored at `x`, square at the baseline, 4 px round at the data end. */
-function hbar(x, y, w, h, cls) {
-	if (w <= 0) return "";
-	const r = Math.min(4, h / 2, w);
-	return `<path class="${cls}" d="M${r2(x)} ${r2(y)}h${r2(w - r)}a${r} ${r} 0 0 1 ${r} ${r}v${r2(h - 2 * r)}a${r} ${r} 0 0 1 -${r} ${r}h-${r2(w - r)}z"/>`;
-}
-function rect(x, y, w, h, cls, extra = "") {
-	if (w <= 0 || h <= 0) return "";
-	return `<rect class="${cls}" x="${r2(x)}" y="${r2(y)}" width="${r2(w)}" height="${r2(h)}"${extra ? ` ${extra}` : ""}/>`;
-}
-function line(x1, y1, x2, y2, cls) {
-	return `<line class="${cls}" x1="${r2(x1)}" y1="${r2(y1)}" x2="${r2(x2)}" y2="${r2(y2)}"/>`;
-}
-function circle(cx, cy, r, cls) {
-	return `<circle class="${cls}" cx="${r2(cx)}" cy="${r2(cy)}" r="${r}"/>`;
-}
-function polyline(points, cls) {
-	return `<polyline class="${cls}" points="${points.map(([x, y]) => `${r2(x)},${r2(y)}`).join(" ")}"/>`;
-}
-function text(x, y, value, o = {}) {
-	const anchor = o.anchor && o.anchor !== "start" ? ` text-anchor="${o.anchor}"` : "";
-	const weight = o.weight === 600 ? ` font-weight="600"` : "";
-	return `<text class="${o.cls ?? "tgc-ink"}" x="${r2(x)}" y="${r2(y)}" font-size="${o.size ?? 12}"${anchor}${weight}>${esc(value)}</text>`;
-}
-/** A group whose `<title>` is the hover text for everything inside it. */
-function titled(title, inner) {
-	return `<g><title>${esc(title)}</title>${inner}</g>`;
-}
-//#endregion
 //#region src/table.ts
 /** A plain HTML table: the accessible form of a figure and its phone view. */
 function table(caption, columns, rows) {
@@ -1022,7 +1030,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" },
 		{
@@ -1105,7 +1113,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;
@@ -1263,32 +1271,15 @@ 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\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";
+const figureCss = "/* @tangle-network/charts — figure block and mark styles.\n *\n * Every colour is a --chart-* token from @tangle-network/brand tokens.css, so a\n * figure follows the page theme. A standalone document without brand tokens\n * embeds `chartTokensCss` first. Fonts fall back to Inter and JetBrains Mono.\n *\n * Each figure carries a 720 px and a 358 px render. The swap follows the\n * figure's own width (a container query), so a narrow column shows the phone\n * render even on a wide screen. */\n\n.tgc-figure {\n  margin: 32px 0 0;\n  padding: 0;\n  max-width: 720px;\n  color: var(--chart-ink);\n  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n\n.tgc-finding {\n  margin: 0 0 8px;\n  font-size: 16px;\n  line-height: 24px;\n  font-weight: 600;\n  color: var(--chart-ink);\n}\n\n.tgc-noteref {\n  margin-left: 2px;\n  font-size: 12px;\n  font-weight: 400;\n  color: var(--chart-ink-muted);\n  text-decoration: none;\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n}\n.tgc-noteref:hover,\n.tgc-noteref:focus-visible {\n  color: var(--chart-accent);\n  text-decoration: underline;\n}\n\n.tgc-lede {\n  margin: 0 0 16px;\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--text-secondary, var(--chart-ink));\n}\n\n.tgc-plot {\n  container-type: inline-size;\n}\n.tgc-wide svg,\n.tgc-narrow svg {\n  display: block;\n  overflow: visible;\n}\n.tgc-narrow {\n  display: none;\n}\n.tgc-narrow svg {\n  max-width: 100%;\n  height: auto;\n}\n@container (max-width: 719.98px) {\n  .tgc-wide {\n    display: none;\n  }\n  .tgc-narrow {\n    display: block;\n  }\n}\n\n.tgc-read {\n  margin: 8px 0 0;\n  font-size: 12px;\n  line-height: 16px;\n  color: var(--chart-ink-muted);\n}\n\n.tgc-data {\n  margin: 8px 0 0;\n  font-size: 12px;\n  line-height: 16px;\n}\n.tgc-data > summary {\n  cursor: pointer;\n  color: var(--chart-ink-muted);\n  width: fit-content;\n}\n.tgc-data > summary:hover {\n  color: var(--chart-ink);\n}\n.tgc-data[open] > summary {\n  margin-bottom: 8px;\n}\n\n.tgc-scroll {\n  overflow-x: auto;\n}\n.tgc-scroll:focus-visible {\n  outline: 2px solid var(--chart-accent);\n  outline-offset: 2px;\n}\n\n.tgc-table {\n  border-collapse: collapse;\n  min-width: 100%;\n  font-size: 12px;\n  line-height: 16px;\n  color: var(--chart-ink);\n  /* A host page's table rules must not restyle the figure's table. */\n  border: 0;\n  border-radius: 0;\n  background: none;\n}\n.tgc-table caption {\n  text-align: left;\n  padding: 0 0 8px;\n  color: var(--chart-ink-muted);\n}\n.tgc-table th,\n.tgc-table td {\n  padding: 6px 12px 6px 0;\n  border-bottom: 1px solid var(--chart-rule);\n  text-align: left;\n  vertical-align: top;\n  font-weight: 400;\n  font-size: inherit;\n  color: inherit;\n  background: none;\n  text-transform: none;\n  letter-spacing: normal;\n}\n.tgc-table thead th {\n  color: var(--chart-ink-muted);\n  white-space: nowrap;\n}\n.tgc-table tbody th {\n  position: sticky;\n  left: 0;\n  background: var(--chart-canvas, var(--depth-1, transparent));\n}\n.tgc-table .tgc-n {\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n}\n.tgc-table thead .tgc-n {\n  font-family: inherit;\n}\n.tgc-table tbody tr:hover {\n  background: var(--chart-shade);\n}\n.tgc-narrow-table .tgc-table {\n  display: block;\n  overflow-x: auto;\n}\n\n.tgc-notes {\n  margin: 16px 0 0;\n  padding-left: 20px;\n  font-size: 12px;\n  line-height: 16px;\n  color: var(--chart-ink-muted);\n}\n.tgc-notes li {\n  margin: 0 0 8px;\n  padding-left: 4px;\n}\n.tgc-notes li:target {\n  color: var(--chart-ink);\n}\n.tgc-backlink {\n  color: var(--chart-ink-muted);\n  text-decoration: none;\n}\n\n.tgc-refusals {\n  margin: 8px 0 0;\n  padding-left: 20px;\n  font-size: 14px;\n  line-height: 22px;\n  color: var(--chart-ink-muted);\n}\n\n/* Marks */\n.tgc-svg {\n  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n.tgc-svg .tgc-num {\n  font-family: var(--font-mono, \"JetBrains Mono\", ui-monospace, monospace);\n  font-variant-numeric: tabular-nums;\n}\n.tgc-ink {\n  fill: var(--chart-ink);\n}\n.tgc-ink-muted {\n  fill: var(--chart-ink-muted);\n}\n.tgc-bar,\n.tgc-ci,\n.tgc-pt-front {\n  fill: var(--chart-accent);\n}\n.tgc-gridline {\n  stroke: var(--chart-grid);\n  stroke-width: 1;\n}\n.tgc-rule {\n  stroke: var(--chart-rule);\n  stroke-width: 1;\n}\n.tgc-axis,\n.tgc-zero {\n  stroke: var(--chart-muted);\n  stroke-width: 1;\n}\n.tgc-whisker,\n.tgc-tick {\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-linecap: round;\n}\n.tgc-threshold {\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-dasharray: 3 3;\n}\n.tgc-front-line {\n  fill: none;\n  stroke: var(--chart-ink);\n  stroke-width: 1.5;\n  stroke-linejoin: round;\n}\n.tgc-pt,\n.tgc-open {\n  fill: none;\n  stroke: var(--chart-muted);\n  stroke-width: 1.5;\n}\n.tgc-pt-est {\n  fill: none;\n  stroke: var(--chart-accent);\n  stroke-width: 2;\n}\n.tgc-pt-ci,\n.tgc-strike {\n  stroke: var(--chart-muted);\n  stroke-width: 1.5;\n}\n.tgc-leader {\n  stroke: var(--chart-muted);\n  stroke-width: 1;\n}\n.tgc-ci-exact,\n.tgc-dot {\n  fill: var(--chart-muted);\n}\n.tgc-dashed {\n  stroke-dasharray: 2 2;\n}\n.tgc-tier-c {\n  fill: var(--chart-tier-c);\n}\n.tgc-tier-b {\n  fill: var(--chart-tier-b);\n}\n.tgc-tier-a {\n  fill: var(--chart-tier-a);\n}\n.tgc-tier-s {\n  fill: var(--chart-tier-s);\n}\n/* Neutral tint for counts: never the accent, capped at half strength so ink keeps 6:1. */\n.tgc-tint {\n  fill: color-mix(in srgb, var(--chart-muted) calc(var(--s, 0) * 50%), transparent);\n}\n\n@media print {\n  .tgc-plot {\n    container-type: normal;\n  }\n  .tgc-wide {\n    display: block;\n  }\n  .tgc-narrow {\n    display: none;\n  }\n  .tgc-wide svg {\n    width: 100%;\n    height: auto;\n  }\n  .tgc-figure {\n    break-inside: avoid;\n  }\n}\n\n/* Chart-led surfaces keep supporting text in the native disclosure. */\n.tgc-figure-chart { max-width: none; margin: 0; }\n.tgc-figure-chart .tgc-wide svg { width: 100%; height: auto; }\n.tgc-wide:has(.tgc-vertical), .tgc-narrow:has(.tgc-vertical) { overflow-x: auto; }\n.tgc-vertical { width: 100%; }\n.tgc-narrow .tgc-vertical { max-width: none; }\n.tgc-column-hit { fill: transparent; stroke: transparent; stroke-width: 2; }\n.tgc-column:focus-visible { outline: none; }\n.tgc-column:focus-visible .tgc-column-hit { stroke: var(--chart-accent); }\n.tgc-vertical-bar { fill: var(--chart-accent); }\n/* Identity assets keep their approved colors on a white plate in either theme. */\n.tgc-logo-plate { fill: #fff; stroke: var(--chart-rule); }\n.tgc-column-tip { opacity: 0; pointer-events: none; }\n.tgc-tip-bg { fill: var(--chart-ink); }\n.tgc-tip-ink { fill: var(--chart-canvas); }\n\n.tgc-series-line { fill: none; stroke: var(--chart-accent); stroke-width: 2; stroke-linejoin: round; }\n.tgc-series-point { fill: var(--chart-accent); stroke: var(--chart-canvas); stroke-width: 1; }\n.tgc-series-hit { fill: transparent; stroke: transparent; }\n.tgc-series-observation:focus-visible { outline: none; }\n.tgc-series-observation:focus-visible .tgc-series-hit { stroke: var(--chart-ink); stroke-width: 2; }\n.tgc-series-tip { opacity: 0; pointer-events: none; }\n\n.tgc-scalar-table { min-width: 620px; }\n.tgc-scalar-table tbody th { min-width: 180px; max-width: 260px; }\n\n/* Plot presentation keeps the same complete data available to assistive technology. */\n.tgc-accessible-data { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }\n.tgc-figure-plot .tgc-vertical > text.tgc-num { font-size: 15px; }\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-wide-fallback:focus-visible { outline: 2px solid var(--chart-accent); outline-offset: 2px; }\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-rates.ts
-/** Vertical rate geometry; values, eligibility and ordering stay with rankedRates. */
-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;
-}
+//#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>`;
 }
-const rateLabel = (rate) => `${Number((rate * 100).toFixed(1))}%`;
-function verticalRates(rows, viewport, ranked, o) {
+function verticalColumns(rows, viewport, measure, domain, tickLabel, scalarLayout = false) {
 	const width = Math.max(viewport, 64 + rows.length * 112);
 	const left = 48;
 	const top = 42;
@@ -1297,9 +1288,11 @@ function verticalRates(rows, viewport, ranked, o) {
 	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(o.identities?.[row.id]?.model?.label ?? row.label, labelWidth, 14, "sans", 8));
+	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 height = 408 + Math.max(0, labelLines - 1) * 18;
+	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,
@@ -1311,59 +1304,40 @@ function verticalRates(rows, viewport, ranked, o) {
 	]) {
 		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, pct(tick), {
+		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, o.measure, { cls: "tgc-ink-muted" });
+	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.rate * band;
-		const identity = o.identities?.[row.id];
-		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`);
+		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 (drawable(row.estimate)) {
-			marks += rect(x - barWidth / 2, y, barWidth, row.rate * band, "tgc-vertical-bar", "rx=\"5\"");
-			if (row.interval && rateIntervalGap(row) === null) {
-				const lo = bottom - row.interval.lower * band;
-				const hi = bottom - row.interval.upper * band;
+		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(x + barWidth / 2 + 7, Math.max(34, y - 9), rateLabel(row.rate), {
+			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, estimateNote(row.estimate, row.attempts), {
+		} else marks += text(x, 290, row.valueLabel, {
 			anchor: "middle",
 			cls: "tgc-ink-muted"
 		});
-		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, 311, 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, 308, tx, 319, "tgc-tick");
-			}
-		}
+		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);
@@ -1373,11 +1347,14 @@ function verticalRates(rows, viewport, ranked, o) {
 			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) marks += text(x, 405 + (labels[i].lines.length - 1) * 18, identity.harness.label, {
-			anchor: "middle",
-			cls: "tgc-ink-muted"
-		});
-		if (ranked) marks += text(x, 33, `Rank ${row.rank}`, {
+		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"
 		});
@@ -1389,7 +1366,67 @@ function verticalRates(rows, viewport, ranked, o) {
 		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(o.measure)} by setup"><style>${rules}</style>${grid}${columns}${tips}</svg>`;
+	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
@@ -2155,4 +2192,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.10",
+  "version": "0.1.12",
   "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",