@tangle-network/charts 0.1.12 → 0.2.0

package/README.md

@@ -27,7 +27,7 @@ Malformed rates, intervals, matrix counts, and breakdown counts return a refusal
 Unmeasured and flagged matrix attempts keep distinct marks and table counts, even without tier grades.
 An interval whisker is omitted when its bounds exclude the row's rate.
 
-It has no runtime dependencies and uses no DOM, so it runs in a Worker, a build step or a browser.
+The static root has no runtime dependencies and uses no DOM, so it runs in a Worker, a build step or a browser. The separate opt-in `@tangle-network/charts/react` entrypoint requires React; it is never re-exported by the root.
 
 ## Use
 
@@ -129,3 +129,77 @@ 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.
+
+## Optional React renderers
+
+```tsx
+import { useState } from "react";
+import { Sparkline, StackedBarChart } from "@tangle-network/charts/react";
+
+export function RecordedUnits() {
+  const [selectedBucketId, onSelectionChange] = useState<string | null>(null);
+  return <>
+    <Sparkline label="Completion delta" values={[-2, 0, null, 3]} format={String} />
+    <StackedBarChart
+      label="Recorded units"
+      series={[{ id: "a", label: "Series A", color: "var(--chart-accent)" }]}
+      buckets={[
+        { id: "first", label: "First window", total: 3, segments: [{ seriesId: "a", value: 3 }] },
+        { id: "missing", label: "Second window", total: null, segments: [{ seriesId: "a", value: null }] },
+      ]}
+      maxValue={10}
+      formatValue={(value) => `${value} units`}
+      selectedBucketId={selectedBucketId}
+      onSelectionChange={onSelectionChange}
+    />
+  </>;
+}
+```
+
+Install React 18 or 19 in the consuming app. It is an **optional peer** so static-only consumers need neither React nor its types. There is no React DOM, chart framework or UI-package runtime dependency. The renderers need no generated stylesheet; `figure.css` remains exclusively the unchanged static-figure stylesheet. Supply application font/color styles and readable series colors. Apps with server/client component boundaries mark their interactive wrapper as a client component.
+
+**Different scales, on purpose.** `Sparkline` ports Agent App's observed-extent scale; it does not implicitly include zero. Equal readings sit at mid-height, a single reading is a point, null/nonfinite samples retain their sample index and break the line, and finite negative readings are supported. Width/height props control its viewBox. Its accessible name describes the count, gaps, range and direction; the SVG description contains each sample's formatted value. It is not animated and has no selection interaction. The default `en-US` formatter retains Agent App's two-decimal behavior; pass `format={String}` or a domain-specific formatter when exact precision is important.
+
+`StackedBarChart` always uses the caller's **explicit `[0, maxValue]` domain**. It accepts already-grouped buckets with unique IDs, labels, supplied totals and ordered segments referencing declared series IDs. It never fetches, sorts, groups, calculates billed amounts, chooses a currency, maps products/categories, or invents a maximum. Input bucket order is the sample axis, not an inferred date axis; supply every intended bucket, including gaps. Omitted segments are not synthesized as zero.
+
+A null/nonfinite total or segment makes the whole stack a gap rather than a misleading complete bar. The known values remain in the readout and data table. Zero remains measured zero and draws no positive segment. As in the handoff, positive subpixel segments have a one-pixel visual minimum; their reported values and the total are not changed. Negative or out-of-domain finite values, duplicate/unknown identities, and inconsistent complete totals throw `RangeError` rather than clamp or silently aggregate. Nonnegative stacks do not model credits or diverging signed stacks. The existing static `Refusal` API is unchanged; it is not repurposed as React component state.
+
+Selection is controlled by bucket ID. Hover, focus, click, Enter, Space and touch activation select rather than toggle; mouse leave, blur and Escape dismiss. A removed selected ID shows no stale readout, and reordering never selects another bucket by index. The stabilized SVG keeps full-height hit targets and highlights the actual stack. A named keyboard-scrollable region contains its fluid SVG with a 400px minimum. A cursor-adjacent tooltip repeats the selected values for mouse and pen users. It flips at viewport edges and uses a native manual popover to escape transformed or clipped panels. Browsers without popover support use a fixed-position fallback, which a transformed ancestor can constrain. The selected breakdown remains in flow and live-announced; every bucket also carries its formatted values in its accessible name, and a native “View data” disclosure contains the full table. No Tailwind build or hover-only tooltip is required to read the values.
+
+**Provenance and extraction boundary.** Sparkline comes from `tangle-network/agent-app`, `src/web-react/sparkline.tsx` and its tests at `a8947683a050394d13848bb7e4cbbe7cf08d208e`. Stacked SVG rendering and select-never-toggle regressions come from merged ADC [PR #8746](https://github.com/tangle-network/agent-dev-container/pull/8746), `products/platform/web/src/client/components/UsageChartSvg.tsx` and `UsageChart.test.tsx` at `a1c3958fd73a3894d4515f9dc476dae9ace30ce0`. Platform's aggregation, currency/product/category functions, legend composition and portal-tooltip positioning are **not** copied. The persistent readout and native pointer popover avoid a new React DOM peer. This is not a new universal usage-chart API, a zero-baseline replacement for SpendCard's sparkline, or a consumer migration; Platform and Agent App are not edited.
+
+### React and package-boundary checks
+
+```sh
+pnpm exec vitest run packages/charts/src/react/sparkline.test.tsx packages/charts/src/react/stacked-bar-chart.test.tsx
+pnpm exec vitest run packages/charts/src/package-boundary.test.ts
+pnpm exec vitest run packages/charts
+pnpm --filter @tangle-network/charts exec tsc --noEmit
+pnpm --filter @tangle-network/charts build
+```
+
+The package-boundary test builds and packs Charts, installs the tarball in an OS-temporary consumer with a normal offline npm install (no peer-omission flags), asserts React/React DOM/React types cannot resolve, and executes the static root without DOM globals. It compares root exports, static SVG/tables, Refusals, report/chart/plot HTML and CSS with the untouched source implementation, then compiles a static-only consumer with `lib: ["ES2022"]`, `types: []` and `skipLibCheck: false`. Only afterward does it supply the workspace React peer/types to verify the packed React runtime and declarations. It runs under the existing root `pnpm test`; no CI workflow or shared UI smoke-script changes are needed.
+
+The component tests cover gap/zero/one/equal/negative cases, controlled identity, keyboard/touch selection, nonvisual values and resize contracts. The jsdom resize check verifies fluid/minimum-width attributes and preserved selection, **not browser-computed layout**; The retained packed-browser fixture checks Chromium at 1100px and 390px, keyboard selection, emulated touch, light/dark Brand tokens, reduced motion, and top-layer positioning inside a transformed, paint-contained panel. It passes with React 18 and React 19; the React 18 consumer also compiles the packed declarations with React 18 types. Physical touch hardware and screen-reader audio remain unchecked.
+
+### Packed browser proof
+
+Build Charts, then run the reusable fixture from the repository root.
+Pass a tarball path to test a published artifact after downloading it with npm pack.
+
+```sh
+pnpm --filter @tangle-network/charts build
+PORT=46489 node scripts/charts-browser-smoke.mjs /absolute/path/to/charts.tgz
+python3 scripts/charts-browser-proof.py http://127.0.0.1:46489 /tmp/charts-proof
+```
+
+Set `CHARTS_REACT_VERSION=18` to install and check an isolated React 18 runtime and type consumer.
+The default fixture uses the installed workspace React peer and bundles only the packed Charts export.
+The fixture imports Brand token CSS and creates a transformed, paint-contained panel.
+It needs Python Playwright and Chromium at `/snap/bin/chromium`.
+Receipts and screenshots are in [the retained proof](../../docs/evidence/charts-react-189/README.md).

package/dist/figure.css

@@ -322,8 +322,13 @@
 
 /* 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 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-wide-fallback:focus-visible { outline: 2px solid var(--chart-accent); outline-offset: 2px; }
+.tgc-phone-plot:focus-visible, .tgc-wide-fallback:focus-visible { outline: 2px solid var(--chart-accent); outline-offset: 2px; }

package/dist/index.js

@@ -358,7 +358,7 @@ function renderFigure(f, noteNumber, options = {}) {
 	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>`;
+		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>`,
@@ -1271,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\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";
+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
@@ -2345,6 +2345,10 @@ function timeSeries(rows, o) {
 	}
 	const xLabel = (x) => o.formatX ? o.formatX(x) : String(x);
 	const yLabel = (y) => scalarLabel(y, o.y.unit, o.formatY);
+	if (axisGutter(Array.from({ length: 5 }, (_, i) => o.y.domain[0] + i / 4 * (o.y.domain[1] - o.y.domain[0])), yLabel) >= 270) return {
+		id,
+		refused: "Formatted y-axis labels leave no room for the phone chart. Use a shorter formatter or unit."
+	};
 	const flat = rows.flatMap((row) => row.points.map((point) => ({
 		row,
 		point
@@ -2397,18 +2401,17 @@ function timeSeries(rows, o) {
 	};
 }
 function plot(rows, o, width, xLabel, yLabel, facts) {
-	const left = 64, right = width - 24, top = 36, bottom = 260;
+	const ticks = Array.from({ length: 5 }, (_, i) => o.y.domain[0] + i / 4 * (o.y.domain[1] - o.y.domain[0]));
+	const left = axisGutter(ticks, yLabel);
+	const 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
-		});
-	}
+	for (const [i, y] of ticks.entries()) marks += line(left, py(y), right, py(y), i === 0 ? "tgc-axis" : "tgc-gridline") + text(left - 8, py(y) + 4, yLabel(y), {
+		anchor: "end",
+		cls: "tgc-ink-muted tgc-num",
+		size: 12
+	});
 	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), {
@@ -2448,10 +2451,13 @@ function plot(rows, o, width, xLabel, yLabel, facts) {
 		}
 		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\"");
+		marks += `<g style="stroke-dasharray:${dash}">${line(left, legendY - 4, left + 24, legendY - 4, "tgc-series-line")}</g>` + textBlock(label.lines, left + 32, 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>`;
 }
+function axisGutter(ticks, label) {
+	return Math.max(64, ...ticks.map((value) => Math.ceil(textWidth(label(value), 12, "mono")) + 20));
+}
 //#endregion
 export { breakdown, chartTokensCss, comparisonIntervals, costFrontier, figureCss, isRefusal, metricBars, rankedRates, rateOrder, renderFigure, renderNotes, renderRefusals, taskMatrix, timeSeries };

package/dist/react/index.d.ts

@@ -0,0 +1,84 @@
+import { ReactElement } from "react";
+//#region src/react/sparkline.d.ts
+type SparklineDirection = "rising" | "falling" | "flat";
+type SparklineValues = readonly (number | null)[];
+interface SparklinePoint {
+  readonly x: number;
+  readonly y: number;
+}
+interface SparklineGeometry {
+  readonly readings: readonly number[];
+  readonly points: readonly SparklinePoint[];
+  /** One run per set of consecutive, finite samples. */
+  readonly segments: readonly (readonly SparklinePoint[])[];
+  readonly gaps: number;
+  readonly min: number;
+  readonly max: number;
+  readonly first: number;
+  readonly last: number;
+  readonly direction: SparklineDirection;
+}
+interface SparklineGeometryOptions {
+  width?: number;
+  height?: number;
+  inset?: number;
+}
+export declare const DEFAULT_SPARKLINE_WIDTH = 96;
+export declare const DEFAULT_SPARKLINE_HEIGHT = 24;
+export declare const DEFAULT_SPARKLINE_LABEL = "Trend";
+export declare const DEFAULT_SPARKLINE_EMPTY_LABEL = "No history yet";
+export declare const DEFAULT_SPARKLINE_UNAVAILABLE_LABEL = "No readings available";
+export declare function formatSparklineValue(value: number): string;
+export declare function sparklineReadings(values: SparklineValues): number[];
+export declare function sparklineGeometry(values: SparklineValues, { width, height, inset }?: SparklineGeometryOptions): SparklineGeometry;
+export declare function sparklinePointsAttribute(points: readonly SparklinePoint[]): string;
+interface SparklineLabelOptions {
+  label?: string;
+  format?: (value: number) => string;
+}
+export declare function sparklineLabel(values: SparklineValues, { label, format }?: SparklineLabelOptions): string;
+interface SparklineProps extends SparklineLabelOptions {
+  values: SparklineValues;
+  width?: number;
+  height?: number;
+  emptyLabel?: string;
+  unavailableLabel?: string;
+  className?: string;
+}
+export declare function Sparkline({ values, label, format, width, height, emptyLabel, unavailableLabel, className }: SparklineProps): ReactElement;
+//#endregion
+//#region src/react/stacked-bar-chart.d.ts
+interface StackedBarSeries {
+  readonly id: string;
+  readonly label: string;
+  /** Caller-owned CSS color, e.g. a brand token. Never inferred from an ID. */
+  readonly color: string;
+}
+interface StackedBarSegment {
+  readonly seriesId: string;
+  readonly value: number | null;
+}
+interface StackedBarBucket {
+  readonly id: string;
+  readonly label: string;
+  /** Pre-aggregated by the caller. Null/nonfinite readings are gaps, not zero. */
+  readonly total: number | null;
+  /** Stack order is input order. Charts neither groups nor sorts. */
+  readonly segments: readonly StackedBarSegment[];
+}
+interface StackedBarChartProps {
+  label: string;
+  series: readonly StackedBarSeries[];
+  buckets: readonly StackedBarBucket[];
+  /** Explicit [0, maxValue] domain. Zero is valid only for zero-valued data. */
+  maxValue: number;
+  formatValue: (value: number) => string;
+  selectedBucketId: string | null;
+  onSelectionChange: (bucketId: string | null) => void;
+  emptyLabel?: string;
+  unavailableLabel?: string;
+  className?: string;
+}
+export declare function StackedBarChart(props: StackedBarChartProps): import("react").JSX.Element;
+//#endregion
+export type { SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries };

package/dist/react/index.js

@@ -0,0 +1,538 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, useId, useRef, useState } from "react";
+//#region src/react/sparkline.tsx
+const DEFAULT_SPARKLINE_WIDTH = 96;
+const DEFAULT_SPARKLINE_HEIGHT = 24;
+const DEFAULT_SPARKLINE_LABEL = "Trend";
+const DEFAULT_SPARKLINE_EMPTY_LABEL = "No history yet";
+const DEFAULT_SPARKLINE_UNAVAILABLE_LABEL = "No readings available";
+const DEFAULT_INSET = 2.5;
+const STROKE_WIDTH = 1.5;
+const DOT_RADIUS = 1.75;
+const NUMBER_FORMAT = new Intl.NumberFormat("en-US", { maximumFractionDigits: 2 });
+const hidden = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	padding: 0,
+	margin: -1,
+	overflow: "hidden",
+	clipPath: "inset(50%)",
+	whiteSpace: "nowrap",
+	border: 0
+};
+function formatSparklineValue(value) {
+	return NUMBER_FORMAT.format(value);
+}
+function isReading(value) {
+	return typeof value === "number" && Number.isFinite(value);
+}
+function sparklineReadings(values) {
+	return values.filter(isReading);
+}
+function round(value) {
+	return Math.round(value * 100) / 100;
+}
+function sparklineGeometry(values, { width = 96, height = 24, inset = DEFAULT_INSET } = {}) {
+	if (!Number.isFinite(width) || !Number.isFinite(height) || !Number.isFinite(inset) || width <= 0 || height <= 0 || inset < 0 || inset * 2 > Math.min(width, height)) throw new RangeError("Sparkline requires finite positive dimensions and an inset inside the viewBox");
+	const plotted = [];
+	for (let index = 0; index < values.length; index += 1) {
+		const value = values[index];
+		if (isReading(value)) plotted.push({
+			index,
+			value
+		});
+	}
+	const readings = plotted.map(({ value }) => value);
+	const gaps = values.length - readings.length;
+	if (readings.length === 0) return {
+		readings,
+		points: [],
+		segments: [],
+		gaps,
+		min: 0,
+		max: 0,
+		first: 0,
+		last: 0,
+		direction: "flat"
+	};
+	let min = readings[0];
+	let max = readings[0];
+	for (const value of readings) {
+		if (value < min) min = value;
+		if (value > max) max = value;
+	}
+	const first = readings[0];
+	const last = readings[readings.length - 1];
+	const span = max - min;
+	const points = plotted.map(({ index, value }) => {
+		const fraction = span === 0 ? .5 : Number.isFinite(span) ? (value - min) / span : (value / 2 - min / 2) / (max / 2 - min / 2);
+		return {
+			x: round(values.length <= 1 ? width / 2 : inset + (width - 2 * inset) * index / (values.length - 1)),
+			y: round(height - inset - (height - 2 * inset) * fraction)
+		};
+	});
+	const segments = [];
+	let run = [];
+	let previous = Number.NEGATIVE_INFINITY;
+	plotted.forEach(({ index }, position) => {
+		if (index !== previous + 1 && run.length > 0) {
+			segments.push(run);
+			run = [];
+		}
+		run.push(points[position]);
+		previous = index;
+	});
+	if (run.length > 0) segments.push(run);
+	return {
+		readings,
+		points,
+		segments,
+		gaps,
+		min,
+		max,
+		first,
+		last,
+		direction: last > first ? "rising" : last < first ? "falling" : "flat"
+	};
+}
+function sparklinePointsAttribute(points) {
+	return points.map(({ x, y }) => `${x},${y}`).join(" ");
+}
+function sparklineLabel(values, { label = DEFAULT_SPARKLINE_LABEL, format = formatSparklineValue } = {}) {
+	const { readings, gaps, min, max, first, last, direction } = sparklineGeometry(values);
+	const missing = gaps === 0 ? "" : `, ${gaps} not available`;
+	if (readings.length === 0) return gaps === 0 ? `${label}: no readings yet` : `${label}: no readings${missing}`;
+	if (readings.length === 1) return `${label}: one reading${missing}, ${format(first)}`;
+	if (max === min) return `${label}: ${readings.length} readings${missing}, unchanged at ${format(first)}`;
+	const movement = direction === "flat" ? "net unchanged" : direction;
+	return `${label}: ${readings.length} readings${missing}, range ${format(min)} to ${format(max)}, ${movement} from ${format(first)} to ${format(last)}`;
+}
+function Sparkline({ values, label = DEFAULT_SPARKLINE_LABEL, format = formatSparklineValue, width = 96, height = 24, emptyLabel = DEFAULT_SPARKLINE_EMPTY_LABEL, unavailableLabel = DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, className }) {
+	const geometry = sparklineGeometry(values, {
+		width,
+		height
+	});
+	const accessibleName = sparklineLabel(values, {
+		label,
+		format
+	});
+	if (geometry.points.length === 0) return /* @__PURE__ */ jsxs("span", {
+		"data-sparkline": geometry.gaps > 0 ? "unavailable" : "empty",
+		className,
+		children: [/* @__PURE__ */ jsx("span", {
+			style: hidden,
+			children: accessibleName
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			children: geometry.gaps > 0 ? unavailableLabel : emptyLabel
+		})]
+	});
+	const drawsLine = geometry.segments.some((segment) => segment.length > 1);
+	const end = geometry.points[geometry.points.length - 1];
+	return /* @__PURE__ */ jsxs("svg", {
+		role: "img",
+		"aria-label": accessibleName,
+		"data-scale": "extent",
+		"data-sparkline": drawsLine ? "line" : "point",
+		"data-direction": geometry.direction,
+		"data-gaps": geometry.gaps > 0 ? geometry.gaps : void 0,
+		width,
+		height,
+		viewBox: `0 0 ${width} ${height}`,
+		className,
+		focusable: "false",
+		children: [
+			/* @__PURE__ */ jsx("desc", { children: Array.from(values, (value, index) => `Sample ${index + 1}: ${isReading(value) ? format(value) : "not available"}`).join("; ") }),
+			geometry.segments.map((segment, index) => {
+				if (segment.length > 1) return /* @__PURE__ */ jsx("polyline", {
+					points: sparklinePointsAttribute(segment),
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: STROKE_WIDTH,
+					strokeLinecap: "round",
+					strokeLinejoin: "round",
+					vectorEffect: "non-scaling-stroke"
+				}, `segment-${index}`);
+				const only = segment[0];
+				if (only.x === end.x && only.y === end.y) return null;
+				return /* @__PURE__ */ jsx("circle", {
+					cx: only.x,
+					cy: only.y,
+					r: DOT_RADIUS,
+					fill: "currentColor"
+				}, `segment-${index}`);
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: end.x,
+				cy: end.y,
+				r: DOT_RADIUS,
+				fill: "currentColor"
+			})
+		]
+	});
+}
+//#endregion
+//#region src/react/stacked-bar-chart.tsx
+/**
+* Renderer extracted from ADC PR #8746, a1c3958fd73a3894d4515f9dc476dae9ace30ce0:
+* products/platform/web/src/client/components/UsageChartSvg.tsx.
+* Keeps its viewBox, hit targets, actual-stack highlight and select-never-toggle
+* interaction. Product/category mapping, aggregation, currency and the portal
+* tooltip formatting remain caller-owned; no React DOM dependency is needed here.
+*/
+function isValue(value) {
+	return value !== null && Number.isFinite(value);
+}
+function hasGap(bucket) {
+	return !isValue(bucket.total) || bucket.segments.some(({ value }) => !isValue(value));
+}
+function validate({ series, buckets, maxValue }) {
+	if (!Number.isFinite(maxValue) || maxValue < 0) throw new RangeError("StackedBarChart maxValue must be finite and nonnegative");
+	const seriesIds = /* @__PURE__ */ new Set();
+	for (const { id } of series) {
+		if (!id || seriesIds.has(id)) throw new RangeError("StackedBarChart requires unique, nonempty series IDs");
+		seriesIds.add(id);
+	}
+	const bucketIds = /* @__PURE__ */ new Set();
+	for (const bucket of buckets) {
+		if (!bucket.id || bucketIds.has(bucket.id)) throw new RangeError("StackedBarChart requires unique, nonempty bucket IDs");
+		bucketIds.add(bucket.id);
+		const segments = /* @__PURE__ */ new Set();
+		let sum = 0;
+		for (const { seriesId, value } of bucket.segments) {
+			if (!seriesIds.has(seriesId) || segments.has(seriesId)) throw new RangeError("StackedBarChart segments require distinct, declared series IDs");
+			segments.add(seriesId);
+			if (isValue(value)) {
+				if (value < 0 || value > maxValue) throw new RangeError("StackedBarChart values must lie in [0, maxValue]");
+				sum += value;
+			}
+		}
+		if (isValue(bucket.total) && (bucket.total < 0 || bucket.total > maxValue)) throw new RangeError("StackedBarChart totals must lie in [0, maxValue]");
+		if (!hasGap(bucket)) {
+			const total = bucket.total;
+			const tolerance = Number.EPSILON * 8 * Math.max(Math.abs(sum), Math.abs(total), Number.MIN_VALUE);
+			if (!Number.isFinite(sum) || Math.abs(sum - total) > tolerance) throw new RangeError("StackedBarChart total must match its supplied segments");
+		}
+	}
+}
+function StackedBarChart(props) {
+	const { label, series, buckets, maxValue, formatValue, selectedBucketId, onSelectionChange, emptyLabel = "No data yet", unavailableLabel = "Not available", className } = props;
+	const readoutId = useId();
+	const touchInteraction = useRef(false);
+	const [pointerBucketId, setPointerBucketId] = useState(null);
+	const pointerPosition = useRef({
+		x: 0,
+		y: 0
+	});
+	const tooltipRef = useRef(null);
+	const positionTooltip = (element) => {
+		const viewport = element.ownerDocument.defaultView;
+		if (!viewport) return;
+		const { width, height } = element.getBoundingClientRect();
+		const { x, y } = pointerPosition.current;
+		const left = x + 14 + width <= viewport.innerWidth - 8 ? x + 14 : x - width - 14;
+		const top = y + 14 + height <= viewport.innerHeight - 8 ? y + 14 : y - height - 14;
+		element.style.transform = `translate(${Math.max(8, Math.min(left, viewport.innerWidth - width - 8))}px, ${Math.max(8, Math.min(top, viewport.innerHeight - height - 8))}px)`;
+	};
+	const trackPointer = (event, bucketId) => {
+		pointerPosition.current = {
+			x: event.clientX,
+			y: event.clientY
+		};
+		if (pointerBucketId !== bucketId) setPointerBucketId(bucketId);
+		if (tooltipRef.current) positionTooltip(tooltipRef.current);
+	};
+	validate(props);
+	const bySeries = new Map(series.map((entry) => [entry.id, entry]));
+	const formatted = (value) => isValue(value) ? formatValue(value) : unavailableLabel;
+	const summary = (bucket) => `${bucket.label}: total ${formatted(bucket.total)}` + (hasGap(bucket) ? ` — ${unavailableLabel}` : "") + (bucket.segments.length ? ` — ${bucket.segments.map((segment) => `${bySeries.get(segment.seriesId).label} ${formatted(segment.value)}`).join(", ")}` : "");
+	const activeIndex = selectedBucketId === null ? -1 : buckets.findIndex(({ id }) => id === selectedBucketId);
+	const activeBucket = activeIndex >= 0 ? buckets[activeIndex] : null, marginTop = 12, marginRight = 16, marginLeft = 56;
+	const chartHeight = 220;
+	const innerHeight = 176;
+	const barGap = 6;
+	const barWidth = Math.max(8, Math.min(36, 648 / Math.max(1, buckets.length) - barGap));
+	const viewWidth = Math.max(buckets.length * (barWidth + barGap) + marginLeft + marginRight, 400);
+	const denseLabels = buckets.length > 14;
+	if (buckets.length === 0) return /* @__PURE__ */ jsxs("p", {
+		className,
+		children: [
+			label,
+			": ",
+			emptyLabel
+		]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className,
+		"data-stacked-bar-chart": "",
+		"data-scale": "zero",
+		children: [
+			/* @__PURE__ */ jsx("section", {
+				tabIndex: 0,
+				"aria-label": `${label} chart`,
+				style: { overflowX: "auto" },
+				children: /* @__PURE__ */ jsxs("svg", {
+					"aria-label": label,
+					width: "100%",
+					viewBox: `0 0 ${viewWidth} ${chartHeight}`,
+					style: {
+						display: "block",
+						minWidth: 400,
+						maxWidth: "100%",
+						maxHeight: 300
+					},
+					preserveAspectRatio: "xMinYMin meet",
+					children: [[
+						0,
+						.25,
+						.5,
+						.75,
+						1
+					].map((fraction) => {
+						const y = 188 - fraction * innerHeight;
+						return /* @__PURE__ */ jsxs("g", {
+							"aria-hidden": "true",
+							children: [/* @__PURE__ */ jsx("line", {
+								x1: marginLeft,
+								y1: y,
+								x2: viewWidth - marginRight,
+								y2: y,
+								stroke: "currentColor",
+								strokeDasharray: fraction === 0 ? "0" : "3 3",
+								opacity: fraction === 0 ? .4 : .2
+							}), /* @__PURE__ */ jsx("text", {
+								x: 48,
+								y,
+								dy: "0.32em",
+								textAnchor: "end",
+								fontSize: "11",
+								fill: "currentColor",
+								fontFamily: "inherit",
+								children: formatValue(maxValue * fraction)
+							})]
+						}, fraction);
+					}), buckets.map((bucket, index) => {
+						const x = marginLeft + index * (barWidth + barGap) + barGap / 2;
+						const isActive = index === activeIndex;
+						const gap = hasGap(bucket);
+						const stackHeight = !gap && maxValue > 0 ? bucket.total / maxValue * innerHeight : 0;
+						let yOffset = 0;
+						const select = () => onSelectionChange(bucket.id);
+						const clear = () => {
+							if (isActive) onSelectionChange(null);
+						};
+						return /* @__PURE__ */ jsxs("g", {
+							role: "button",
+							tabIndex: 0,
+							"data-bucket-id": bucket.id,
+							"data-gap": gap || void 0,
+							"aria-label": summary(bucket),
+							"aria-describedby": isActive ? readoutId : void 0,
+							onPointerEnter: (event) => {
+								touchInteraction.current = event.pointerType === "touch";
+								if (!touchInteraction.current) {
+									trackPointer(event, bucket.id);
+									select();
+								}
+							},
+							onPointerLeave: () => {
+								if (!touchInteraction.current) {
+									setPointerBucketId(null);
+									clear();
+								}
+							},
+							onPointerDown: (event) => {
+								touchInteraction.current = event.pointerType === "touch";
+								if (touchInteraction.current) setPointerBucketId(null);
+							},
+							onPointerMove: (event) => {
+								touchInteraction.current = event.pointerType === "touch";
+								if (!touchInteraction.current) {
+									trackPointer(event, bucket.id);
+									if (selectedBucketId !== bucket.id) select();
+								}
+							},
+							onMouseEnter: (event) => {
+								if (!touchInteraction.current) {
+									trackPointer(event, bucket.id);
+									select();
+								}
+							},
+							onMouseMove: (event) => {
+								if (!touchInteraction.current) {
+									trackPointer(event, bucket.id);
+									if (selectedBucketId !== bucket.id) select();
+								}
+							},
+							onMouseLeave: () => {
+								if (!touchInteraction.current) {
+									setPointerBucketId(null);
+									clear();
+								}
+							},
+							onFocus: select,
+							onBlur: clear,
+							onClick: select,
+							onKeyDown: (event) => {
+								setPointerBucketId(null);
+								if (event.key === "Enter" || event.key === " ") {
+									event.preventDefault();
+									select();
+								} else if (event.key === "Escape") {
+									event.preventDefault();
+									clear();
+								}
+							},
+							style: { cursor: "pointer" },
+							children: [
+								/* @__PURE__ */ jsx("rect", {
+									"data-hit-target": "",
+									x,
+									y: marginTop,
+									width: barWidth,
+									height: innerHeight,
+									fill: "transparent",
+									stroke: "none",
+									rx: 3
+								}),
+								!gap && bucket.segments.map((segment, segmentIndex) => {
+									const height = maxValue > 0 ? segment.value / maxValue * innerHeight : 0;
+									const y = 188 - yOffset - height;
+									yOffset += height;
+									return /* @__PURE__ */ jsx("rect", {
+										"data-series-id": segment.seriesId,
+										x,
+										y,
+										width: barWidth,
+										height: Math.max(height, height > 0 ? 1 : 0),
+										rx: segmentIndex === bucket.segments.length - 1 ? 3 : 0,
+										fill: bySeries.get(segment.seriesId).color,
+										opacity: isActive ? 1 : .92,
+										pointerEvents: "none"
+									}, segment.seriesId);
+								}),
+								gap && /* @__PURE__ */ jsx("text", {
+									x: x + barWidth / 2,
+									y: 184,
+									textAnchor: "middle",
+									fill: "currentColor",
+									"aria-hidden": "true",
+									pointerEvents: "none",
+									children: "—"
+								}),
+								isActive && /* @__PURE__ */ jsx("rect", {
+									"data-selection": "",
+									x,
+									y: 188 - Math.max(1, stackHeight),
+									width: barWidth,
+									height: Math.max(1, stackHeight),
+									fill: "none",
+									stroke: "currentColor",
+									strokeWidth: 1.5,
+									rx: 3,
+									pointerEvents: "none"
+								}),
+								/* @__PURE__ */ jsx("text", {
+									x: x + barWidth / 2,
+									y: 204,
+									textAnchor: denseLabels ? "end" : "middle",
+									fontSize: "10",
+									fill: "currentColor",
+									fontFamily: "inherit",
+									pointerEvents: "none",
+									"aria-hidden": "true",
+									transform: denseLabels ? `rotate(-40, ${x + barWidth / 2}, 204)` : void 0,
+									children: bucket.label
+								})
+							]
+						}, bucket.id);
+					})]
+				})
+			}),
+			activeBucket && pointerBucketId === activeBucket.id && !touchInteraction.current && /* @__PURE__ */ jsxs("div", {
+				"data-chart-tooltip": "",
+				role: "tooltip",
+				"aria-hidden": "true",
+				popover: "manual",
+				ref: (element) => {
+					tooltipRef.current = element;
+					if (element) {
+						if (typeof element.showPopover === "function") element.showPopover();
+						positionTooltip(element);
+					}
+				},
+				style: {
+					position: "fixed",
+					inset: "auto",
+					margin: 0,
+					left: 0,
+					top: 0,
+					zIndex: 1e3,
+					pointerEvents: "none",
+					width: "max-content",
+					maxWidth: "min(280px, calc(100vw - 16px))",
+					padding: "10px 12px",
+					borderRadius: "var(--radius-md, 8px)",
+					background: "var(--md3-surface-container-highest, #3b3b3b)",
+					color: "var(--md3-on-surface, #e6e6e6)",
+					border: "1px solid var(--md3-outline-variant, #4c4c4c)",
+					fontFamily: "inherit",
+					fontSize: "0.75rem",
+					lineHeight: 1.5,
+					overflowWrap: "anywhere"
+				},
+				children: [
+					/* @__PURE__ */ jsx("strong", { children: activeBucket.label }),
+					/* @__PURE__ */ jsxs("div", { children: ["Total ", formatted(activeBucket.total)] }),
+					activeBucket.segments.map((segment) => /* @__PURE__ */ jsxs("div", { children: [
+						bySeries.get(segment.seriesId).label,
+						": ",
+						formatted(segment.value)
+					] }, segment.seriesId))
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				id: readoutId,
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: activeBucket ? summary(activeBucket) : "Hover, tap, or focus a bar to see its breakdown."
+			}),
+			/* @__PURE__ */ jsxs("details", { children: [/* @__PURE__ */ jsx("summary", { children: "View data" }), /* @__PURE__ */ jsxs("table", { children: [
+				/* @__PURE__ */ jsx("caption", { children: label }),
+				/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("th", {
+						scope: "col",
+						children: "Bucket"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						scope: "col",
+						children: "Series"
+					}),
+					/* @__PURE__ */ jsx("th", {
+						scope: "col",
+						children: "Value"
+					})
+				] }) }),
+				/* @__PURE__ */ jsx("tbody", { children: buckets.map((bucket) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("th", {
+						scope: "row",
+						children: bucket.label
+					}),
+					/* @__PURE__ */ jsx("td", { children: "Total" }),
+					/* @__PURE__ */ jsx("td", { children: formatted(bucket.total) })
+				] }), bucket.segments.map((segment) => /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("th", {
+						scope: "row",
+						children: bucket.label
+					}),
+					/* @__PURE__ */ jsx("td", { children: bySeries.get(segment.seriesId).label }),
+					/* @__PURE__ */ jsx("td", { children: formatted(segment.value) })
+				] }, segment.seriesId))] }, bucket.id)) })
+			] })] })
+		]
+	});
+}
+//#endregion
+export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, Sparkline, StackedBarChart, formatSparklineValue, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/charts",
-  "version": "0.1.12",
+  "version": "0.2.0",
   "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",
@@ -26,7 +26,20 @@
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
-    "./figure.css": "./dist/figure.css"
+    "./figure.css": "./dist/figure.css",
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "import": "./dist/react/index.js",
+      "default": "./dist/react/index.js"
+    }
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "tsdown": "^0.23.0",