@tangle-network/charts 0.1.8 → 0.1.10

package/README.md

@@ -68,3 +68,17 @@ 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.

package/dist/figure.css

@@ -293,3 +293,19 @@
     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); }

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. */
@@ -177,7 +182,21 @@ 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
+interface RateIdentity {
+  model?: {
+    label: string;
+    src: string;
+  };
+  harness?: {
+    label: string;
+    src: string;
+  };
+}
 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 +232,4 @@ 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 };
+export type { BreakdownInput, BreakdownOptions, ComparisonIntervalsOptions, ComparisonRow, CostBasis, CostFrontierOptions, Estimate, Exclusion, Figure, Interval, IntervalMethod, MatrixCell, RankedRatesOptions, RateIdentity, RateRow, Refusal, RenderFigureOptions, Setup, TaskMatrixOptions, Tier, TierCounts };

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>`,
@@ -776,7 +789,12 @@ function comparisonIntervals(rows, setups, o) {
 		refused: rows.every((r) => r.interval === null) ? `${rows.length} ${plural(rows.length, "comparison")} listed; none carries an interval.` : `No comparison can be drawn. ${refused.join("; ")}.`
 	};
 	const clears = drawn.filter(({ row }) => row.interval.lower > row.minimumEffect && (intervalGap(row.exactInterval) !== null || row.exactInterval.lower > row.minimumEffect));
-	const finding = clears.length === drawn.length ? drawn.length === 1 ? "The comparison clears its registered minimum effect." : `Each of the ${drawn.length} comparisons clears its registered minimum effect.` : clears.length === 0 ? `No comparison clears its registered minimum effect.` : `${clears.length} of ${drawn.length} comparisons clear their registered minimum effect.`;
+	const minimum = drawn[0].row.minimumEffect;
+	const sameMinimum = drawn.every(({ row }) => row.minimumEffect === minimum);
+	const pluralSubject = clears.length > 1 && clears.length < drawn.length;
+	const difference = drawn.every(({ row }) => row.minimumEffect >= 0) ? "improvement" : "difference";
+	const requirement = sameMinimum ? `the required ${difference} of more than ${new Intl.NumberFormat("en-US", { maximumFractionDigits: 12 }).format(minimum * 100)} percentage points in ${o.measure}` : `${pluralSubject ? "their" : "its"} required ${difference}${pluralSubject ? "s" : ""}`;
+	const finding = `${clears.length === drawn.length ? drawn.length === 1 ? "The comparison" : "Every comparison" : clears.length === 0 ? "No comparison" : `${clears.length} of ${drawn.length} comparisons`} ${pluralSubject ? "support" : "supports"} ${requirement}.`;
 	const pairs = drawn.reduce((s, d) => s + d.row.pairs, 0);
 	const lede = `${drawn.length} ${plural(drawn.length, "comparison")} over ${pairs} paired ${plural(pairs, "attempt")}${refused.length ? `; ${refused.length} not drawn` : ""}.`;
 	const names = [...new Set(drawn.map((d) => intervalName(d.row.interval)))];
@@ -966,12 +984,14 @@ function costFrontier(rows, o) {
 		const cheapest = [...costed].sort((a, b) => cost(a) - cost(b))[0];
 		finding = `${cheapest.label} has the lowest cost per pass, ${usd(cost(cheapest))}${est(cheapest)}.`;
 	}
-	const lede = `${costed.length} of ${rows.length} setups are plotted; ` + (drawLine ? `${front.length} sit on the producer's frontier.` : front.length === 1 ? "1 sits on the producer's frontier." : "the producer computed no frontier.");
+	const lowest = Math.min(...costed.map(cost));
+	const highest = Math.max(...costed.map(cost));
+	const lede = (lowest === highest ? `Cost per pass is ${usd(lowest)}.` : `Cost per pass ranges from ${usd(lowest)} to ${usd(highest)}.`) + (costed.some((row) => row.cost.basis === "estimated") ? " Costs include estimates." : "");
 	const read = `Higher ${o.measure} and lower cost per pass are better; on the wide plot, better is up and right.` + (drawLine ? " Filled points sit on the frontier; the line joins them." : "") + (costed.some((r) => r.onFront && r.cost.basis !== "receipts") ? " A hollow accent ring is a frontier point with an estimated cost." : "");
 	const intervals = [...new Set(costed.filter((r) => rateIntervalGap(r) === null).map((r) => intervalName(r.interval)))];
 	const method = [
 		`Cost per pass is model spend over passed attempts, ${[...new Set(costed.map((r) => r.cost.basis))].map((b) => b === "receipts" ? "from router receipts" : b === "estimated" ? "estimated, not billed" : "from an unrecorded source").join(" or ")}.`,
-		front.length ? "The frontier is the producer's: no setup off it is both cheaper and higher." : "The producer did not compute a frontier.",
+		front.length ? `A frontier setup has no alternative with both lower cost and higher ${o.measure}.` : "",
 		intervals.length ? `Vertical lines: ${intervals.join(", ")} on the ${o.measure}.` : ""
 	].filter(Boolean).join(" ");
 	const columns = [
@@ -1243,10 +1263,135 @@ 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";
 /** --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;
+}
+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) {
+	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(o.identities?.[row.id]?.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;
+	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, pct(tick), {
+			cls: "tgc-ink-muted tgc-num",
+			anchor: "end"
+		});
+	}
+	grid += text(left, 18, o.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`);
+		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;
+				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), {
+				size: 15,
+				weight: 600,
+				anchor: "middle",
+				cls: "tgc-ink tgc-num"
+			});
+		} else marks += text(x, 290, estimateNote(row.estimate, row.attempts), {
+			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 (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) 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}`, {
+			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(o.measure)} by setup"><style>${rules}</style>${grid}${columns}${tips}</svg>`;
+}
+//#endregion
 //#region src/ranked-rates.ts
 /**
 * `rankedRates`: which setup passes most, and how uncertain is each rate.
@@ -1273,6 +1418,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"
@@ -1397,7 +1551,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)
 		},

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/charts",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "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",