@tangle-network/charts 0.1.11 → 0.1.13

package/README.md

@@ -121,3 +121,16 @@ Intervals arrive with their recorded bounds, confidence level and method; neithe
 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.
+
+Plot presentation uses labels of at least 14px and numeric axes of 15px.
+Dedicated phone SVGs retain their intended width inside a keyboard-accessible scroll region.
+Wide plots reserve side gutters so enlarged labels remain visible.
+These typography rules do not apply to report or chart presentation.

package/dist/figure.css

@@ -319,3 +319,16 @@
 
 .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-wide svg { box-sizing: content-box; width: calc(100% - 48px); padding: 0 24px; }
+.tgc-figure-plot svg text { font-size: 14px; }
+.tgc-figure-plot svg text.tgc-num { font-size: 15px; }
+/* Larger tooltip text needs padding outside the original report backdrop. */
+.tgc-figure-plot .tgc-tip-bg { stroke: var(--chart-ink); stroke-width: 24px; }
+.tgc-figure-plot .tgc-phone-plot svg { min-width: var(--tgc-phone-width); }
+.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-phone-plot:focus-visible, .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). */

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 tgc-phone-plot" role="region" aria-label="${esc(f.finding)} chart" tabindex="0" style="--tgc-phone-width:358px">${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) {
@@ -1263,7 +1271,7 @@ function plot$1(costed, unplaced, drawLine, o) {
 //#endregion
 //#region src/css.generated.ts
 /** The figure block and mark styles (src/figure.css), for documents that inline their CSS. */
-const figureCss = "/* @tangle-network/charts — figure block and mark styles.\n *\n * Every colour is a --chart-* token from @tangle-network/brand tokens.css, so a\n * figure follows the page theme. A standalone document without brand tokens\n * embeds `chartTokensCss` first. Fonts fall back to Inter and JetBrains Mono.\n *\n * Each figure carries a 720 px and a 358 px render. The swap follows the\n * figure's own width (a container query), so a narrow column shows the phone\n * render even on a wide screen. */\n\n.tgc-figure {\n  margin: 32px 0 0;\n  padding: 0;\n  max-width: 720px;\n  color: var(--chart-ink);\n  font-family: var(--font-sans, Inter, ui-sans-serif, system-ui, sans-serif);\n}\n\n.tgc-finding {\n  margin: 0 0 8px;\n  font-size: 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";
+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-wide svg { box-sizing: content-box; width: calc(100% - 48px); padding: 0 24px; }\n.tgc-figure-plot svg text { font-size: 14px; }\n.tgc-figure-plot svg text.tgc-num { font-size: 15px; }\n/* Larger tooltip text needs padding outside the original report backdrop. */\n.tgc-figure-plot .tgc-tip-bg { stroke: var(--chart-ink); stroke-width: 24px; }\n.tgc-figure-plot .tgc-phone-plot svg { min-width: var(--tgc-phone-width); }\n.tgc-figure-plot .tgc-wide, .tgc-figure-plot .tgc-narrow { overflow-x: auto; }\n\n.tgc-figure-plot .tgc-wide-fallback svg { min-width: var(--tgc-fallback-width); }\n.tgc-phone-plot:focus-visible, .tgc-wide-fallback:focus-visible { outline: 2px solid var(--chart-accent); outline-offset: 2px; }\n";
 /** --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

package/package.json

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