@tangle-network/charts 0.3.0 → 0.4.0

package/README.md

@@ -2,6 +2,8 @@
 
 Benchmark figures as static SVG and HTML tables, plus optional React timing primitives.
 
+The React entry also exports `DayBars`, `HBars`, `Histogram`, `Lines`, `Meter`, `Spark`, and `Gantt` for live operational pages. Import `@tangle-network/charts/react/live.css` for their layout and set `--chart-live-*` theme tokens on an ancestor. Data, state colors, destination links, labels, and interpretation remain with the caller. `DayBars` accepts an `onOpen(index)` action with keyboard activation.
+
 `WaterfallHeader`, `WaterfallTimeAxis`, `WaterfallBar` and `WaterfallRow` from
 `@tangle-network/charts/react` own the timing presentation extracted from
 Intelligence's trace viewer. Supply actual span start/end milliseconds and the

package/dist/index.js

@@ -1273,7 +1273,7 @@ function plot$1(costed, unplaced, drawLine, o) {
 /** 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-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}}";
+const chartTokensCss = ":root{--chart-ink:#2d2d2d;--chart-ink-muted:#686868;--chart-muted:#787878;--chart-grid:#f1f2f7;--chart-rule:#c7c6d6;--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:#221f33;--chart-rule:#2a293d;--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:#0a0a14;color-scheme:dark}}\n:root[data-theme=\"dark\"]{--chart-ink:#e6e6e6;--chart-ink-muted:#a5a5a5;--chart-muted:#8e8e8e;--chart-grid:#221f33;--chart-rule:#2a293d;--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:#0a0a14;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:#f1f2f7;--chart-rule:#c7c6d6;--chart-shade:rgba(76, 63, 198, 0.06);--chart-accent:hsl(246 54% 51%);--chart-tier-c:#9b9ef0;--chart-tier-b:#7c7fe3;--chart-tier-a:#5b5bd6;--chart-tier-s:#272962;--chart-canvas:#ffffff;color-scheme:light}}";
 //#endregion
 //#region src/vertical-columns.ts
 function image(mark, x, y, size) {

package/dist/react/index.d.ts

@@ -131,4 +131,91 @@ interface WaterfallHeaderProps extends WaterfallTimeAxisProps {
 }
 export declare function WaterfallHeader({ label, attribution, durationLabel, ...axis }: WaterfallHeaderProps): import("react").JSX.Element;
 //#endregion
+//#region src/react/live.d.ts
+export declare const LIVE_SERIES: readonly ['#8b7cf6', '#0ea5a0', '#c98500', '#e2508f', '#4a90e2'];
+export declare const formatCompact: (value: number | null | undefined) => string;
+/** Bars per day (or per any label: `tick` shortens it on the axis), stacked by series, on one axis; hovering a bar lists
+ * every series' value for it, and `onOpen` makes a bar a link. */
+export declare function DayBars({ days, series, format, rows, missing, tick, onOpen }: {
+  days: string[];
+  series: {
+    name: string;
+    color: string;
+    values: (number | null)[];
+  }[];
+  format?: (v: number) => string;
+  rows?: number;
+  missing?: string;
+  tick?: (day: string) => string;
+  onOpen?: (index: number) => void;
+}): import("react").JSX.Element;
+/** Ranked horizontal bars with the value and an optional note on each row; past `limit` rows the rest are counted. */
+export declare function HBars({ rows, format, color, max, limit }: {
+  rows: {
+    label: string;
+    value: number;
+    note?: string;
+    color?: string;
+    href?: string;
+  }[];
+  format?: (v: number) => string;
+  color?: string;
+  max?: number;
+  limit?: number;
+}): import("react").JSX.Element;
+/** A histogram of counts per bin; each bar's tooltip names its range and count. */
+export declare function Histogram({ bins, format, color, unit, rows }: {
+  bins: {
+    lo: number;
+    hi: number;
+    n: number;
+  }[];
+  format?: (v: number) => string;
+  color?: string;
+  unit: string;
+  rows?: number;
+}): import("react").JSX.Element;
+/** Lines over time on one axis (at most four series); the crosshair readout lists each series at the nearest time. A
+ * `dots` series draws its points as marks (checkpoints) instead of a line; `axis` labels the time axis (default MM-DD). */
+export declare function Lines({ series, format, rows, axis }: {
+  series: {
+    name: string;
+    color: string;
+    points: [number, number][];
+    dots?: boolean;
+    label?: (t: number) => string;
+  }[];
+  format?: (v: number) => string;
+  rows?: number;
+  axis?: (t: number) => string;
+}): import("react").JSX.Element;
+/** A used-of-total meter with its numbers. */
+export declare function Meter({ used, total, format, tone, text }: {
+  used: number | null | undefined;
+  total: number | null | undefined;
+  format?: (v: number) => string;
+  tone?: string;
+  text?: string;
+}): import("react").JSX.Element;
+/** A small line of one series for a row in a list (one hue; the row's label carries identity). */
+export declare function Spark({ points, max, color }: {
+  points: [number, number][];
+  max?: number;
+  color?: string;
+}): import("react").JSX.Element;
+/** One bar per row on a shared time axis (who worked when): each row's bar spans its start to its end, coloured by its
+ * state; hovering a row names it, its state and its span. Times are epoch ms; `axis` labels the time axis. */
+export declare function Gantt({ rows, colors, axis, span }: {
+  rows: {
+    label: string;
+    start: number;
+    end: number;
+    state: string;
+    note?: string;
+  }[];
+  colors: Record<string, string>;
+  axis: (t: number) => string;
+  span: (start: number, end: number) => string;
+}): import("react").JSX.Element;
+//#endregion
 export type { SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow };

package/dist/react/index.js

@@ -1,5 +1,5 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment, useId, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, useEffect, useId, useRef, useState } from "react";
 //#region src/react/sparkline.tsx
 const DEFAULT_SPARKLINE_WIDTH = 96;
 const DEFAULT_SPARKLINE_HEIGHT = 24;
@@ -515,7 +515,7 @@ function StackedBarChart(props) {
 						children: "Value"
 					})
 				] }) }),
-				/* @__PURE__ */ jsx("tbody", { children: buckets.map((bucket) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("tr", { children: [
+				/* @__PURE__ */ jsx("tbody", { children: buckets.map((bucket) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("tr", { children: [
 					/* @__PURE__ */ jsx("th", {
 						scope: "row",
 						children: bucket.label
@@ -755,4 +755,561 @@ function WaterfallHeader({ label = "Span", attribution, durationLabel = "Duratio
 	});
 }
 //#endregion
-export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, Sparkline, StackedBarChart, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, formatSparklineValue, formatWaterfallDuration, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, waterfallSpanGeometry, waterfallTicks };
+//#region src/react/live.tsx
+/** Reusable, em-scaled charts for live operational series. Values, labels and status colors belong to callers. */
+const LIVE_SERIES = [
+	"#8b7cf6",
+	"#0ea5a0",
+	"#c98500",
+	"#e2508f",
+	"#4a90e2"
+];
+const formatCompact = (value) => value === null || value === void 0 || !Number.isFinite(value) ? "—" : new Intl.NumberFormat("en-US", {
+	notation: "compact",
+	maximumFractionDigits: 1
+}).format(value);
+const formatShare = (value) => value === null || !Number.isFinite(value) ? "—" : `${Math.round(value * 100)}%`;
+/** The rendered width and font size of an element, so an SVG chart draws at its real size and its geometry follows
+* the page's type. */
+function useWidth() {
+	const [element, ref] = useState(null);
+	const [size, setSize] = useState({
+		width: 0,
+		em: 16
+	});
+	useEffect(() => {
+		if (!element) return;
+		const observer = new ResizeObserver(([entry]) => setSize({
+			width: Math.floor(entry.contentRect.width),
+			em: parseFloat(getComputedStyle(element).fontSize) || 16
+		}));
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [element]);
+	return [
+		ref,
+		size.width,
+		size.em
+	];
+}
+/** A nice ceiling for an axis and its three gridline values. */
+function ticksFor(max) {
+	if (!(max > 0)) return {
+		top: 1,
+		ticks: [
+			0,
+			.5,
+			1
+		]
+	};
+	const power = 10 ** Math.floor(Math.log10(max));
+	const step = [
+		1,
+		2,
+		2.5,
+		5,
+		10
+	].map((m) => m * power).find((s) => s * 4 >= max) ?? power * 10;
+	const top = Math.ceil(max / step) * step;
+	return {
+		top,
+		ticks: [
+			0,
+			top / 2,
+			top
+		]
+	};
+}
+function Tooltip({ tip }) {
+	if (!tip) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "ov-tip",
+		role: "tooltip",
+		style: {
+			left: tip.x,
+			top: tip.y
+		},
+		children: [/* @__PURE__ */ jsx("strong", { children: tip.title }), tip.lines.map((line) => /* @__PURE__ */ jsxs("span", {
+			className: "ov-tip-line",
+			children: [
+				line.color && /* @__PURE__ */ jsx("i", { style: { background: line.color } }),
+				/* @__PURE__ */ jsx("span", { children: line.label }),
+				/* @__PURE__ */ jsx("b", { children: line.value })
+			]
+		}, line.label))]
+	});
+}
+/** Bars per day (or per any label: `tick` shortens it on the axis), stacked by series, on one axis; hovering a bar lists
+* every series' value for it, and `onOpen` makes a bar a link. */
+function DayBars({ days, series, format = formatCompact, rows = 13, missing = "No runs started", tick = (day) => day.slice(5), onOpen }) {
+	const [ref, width, em] = useWidth();
+	const height = Math.round(rows * em);
+	const [tip, setTip] = useState(null);
+	const totals = days.map((_, i) => series.reduce((sum, s) => sum + (s.values[i] ?? 0), 0));
+	const { top, ticks } = ticksFor(Math.max(...totals));
+	const left = Math.round(3.4 * em);
+	const bottom = Math.round(1.8 * em);
+	const plotW = Math.max(0, width - left - 8);
+	const plotH = height - bottom - 8;
+	const slot = days.length ? plotW / days.length : 0;
+	const bar = Math.max(3, slot * .72);
+	const labelEvery = Math.max(1, Math.ceil(days.length / Math.max(1, Math.floor(plotW / (4.5 * em)))));
+	const labelGap = Math.ceil(4.5 * em / Math.max(slot, 1));
+	const y = (v) => 8 + plotH - v / top * plotH;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: "ov-plot",
+		onMouseLeave: () => setTip(null),
+		children: [width > 0 && /* @__PURE__ */ jsxs("svg", {
+			width,
+			height,
+			role: "img",
+			"aria-label": `${series.map((s) => s.name).join(", ")} per day`,
+			children: [ticks.map((t) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+				x1: left,
+				x2: width - 8,
+				y1: y(t),
+				y2: y(t),
+				className: "ov-gridline"
+			}), /* @__PURE__ */ jsx("text", {
+				x: left - em * .4,
+				y: y(t),
+				dominantBaseline: "middle",
+				className: "ov-axis",
+				textAnchor: "end",
+				children: format(t)
+			})] }, t)), days.map((day, i) => {
+				let base = 0;
+				const x = left + i * slot + (slot - bar) / 2;
+				const showTip = () => setTip({
+					x: Math.min(left + i * slot + slot + 8, width - em * 14),
+					y: 8,
+					title: `${day} · ${series.every((s) => s.values[i] === null) ? missing : format(totals[i] ?? 0)}`,
+					lines: series.map((s) => ({
+						label: s.name,
+						value: s.values[i] === null ? missing : format(s.values[i] ?? 0),
+						color: s.color
+					}))
+				});
+				return /* @__PURE__ */ jsxs("g", {
+					role: onOpen ? "button" : void 0,
+					tabIndex: onOpen ? 0 : void 0,
+					"aria-label": onOpen ? `Open ${day}` : void 0,
+					onFocus: onOpen ? showTip : void 0,
+					onBlur: onOpen ? () => setTip(null) : void 0,
+					onKeyDown: onOpen ? (event) => {
+						if (event.key === "Enter" || event.key === " ") {
+							event.preventDefault();
+							onOpen(i);
+						}
+					} : void 0,
+					children: [
+						series.map((s) => {
+							const v = s.values[i] ?? 0;
+							if (!v) return null;
+							const y0 = y(base);
+							base += v;
+							const y1 = y(base);
+							return /* @__PURE__ */ jsx("rect", {
+								x,
+								y: y1,
+								width: bar,
+								height: Math.max(2, y0 - y1 - 2),
+								rx: 2,
+								fill: s.color
+							}, s.name);
+						}),
+						(i === days.length - 1 || i % labelEvery === 0 && i + labelGap <= days.length - 1) && /* @__PURE__ */ jsx("text", {
+							x: x + bar / 2,
+							y: height - em * .35,
+							className: "ov-axis",
+							textAnchor: "middle",
+							children: tick(day)
+						}),
+						/* @__PURE__ */ jsx("rect", {
+							x: left + i * slot,
+							y: 8,
+							width: slot,
+							height: plotH,
+							fill: "transparent",
+							style: onOpen ? { cursor: "pointer" } : void 0,
+							onClick: onOpen ? () => onOpen(i) : void 0,
+							onMouseEnter: showTip
+						})
+					]
+				}, day);
+			})]
+		}), /* @__PURE__ */ jsx(Tooltip, { tip })]
+	});
+}
+/** Ranked horizontal bars with the value and an optional note on each row; past `limit` rows the rest are counted. */
+function HBars({ rows, format = formatCompact, color = LIVE_SERIES[0], max, limit = 8 }) {
+	const top = max ?? Math.max(1, ...rows.map((row) => row.value));
+	if (!rows.length) return /* @__PURE__ */ jsx("p", {
+		className: "ov-empty",
+		children: "Nothing recorded."
+	});
+	const rest = rows.slice(limit);
+	return /* @__PURE__ */ jsxs("ol", {
+		className: "ov-hbars",
+		children: [rows.slice(0, limit).map((row) => {
+			const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "ov-hbar-label",
+					title: row.label,
+					children: row.label
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "ov-hbar-track",
+					children: /* @__PURE__ */ jsx("span", { style: {
+						width: `${Math.max(1, row.value / top * 100)}%`,
+						background: row.color ?? color
+					} })
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "ov-hbar-value",
+					children: format(row.value)
+				}),
+				row.note && /* @__PURE__ */ jsx("span", {
+					className: "ov-hbar-note",
+					children: row.note
+				})
+			] });
+			return /* @__PURE__ */ jsx("li", { children: row.href ? /* @__PURE__ */ jsx("a", {
+				href: row.href,
+				children: content
+			}) : /* @__PURE__ */ jsx("div", { children: content }) }, row.label);
+		}), rest.length > 0 && /* @__PURE__ */ jsxs("li", {
+			className: "ov-hbars-more",
+			children: [
+				"+",
+				rest.length,
+				" more · ",
+				format(rest.reduce((a, row) => a + row.value, 0))
+			]
+		})]
+	});
+}
+/** A histogram of counts per bin; each bar's tooltip names its range and count. */
+function Histogram({ bins, format = formatCompact, color = LIVE_SERIES[0], unit, rows = 12 }) {
+	const [ref, width, em] = useWidth();
+	const height = Math.round(rows * em);
+	const [tip, setTip] = useState(null);
+	const first = bins.findIndex((b) => b.n > 0);
+	const last = bins.length - 1 - [...bins].reverse().findIndex((b) => b.n > 0);
+	const shown = first < 0 ? [] : bins.slice(first, last + 1);
+	const { top, ticks } = ticksFor(Math.max(...shown.map((b) => b.n), 1));
+	const left = Math.round(3 * em);
+	const bottom = Math.round(1.8 * em);
+	const plotW = Math.max(0, width - left - 8);
+	const plotH = height - bottom - 8;
+	const slot = shown.length ? plotW / shown.length : 0;
+	const y = (v) => 8 + plotH - v / top * plotH;
+	if (!shown.length) return /* @__PURE__ */ jsx("p", {
+		className: "ov-empty",
+		children: "Nothing recorded."
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: "ov-plot",
+		onMouseLeave: () => setTip(null),
+		children: [width > 0 && /* @__PURE__ */ jsxs("svg", {
+			width,
+			height,
+			role: "img",
+			"aria-label": `Distribution of ${unit}`,
+			children: [ticks.map((t) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+				x1: left,
+				x2: width - 8,
+				y1: y(t),
+				y2: y(t),
+				className: "ov-gridline"
+			}), /* @__PURE__ */ jsx("text", {
+				x: left - em * .4,
+				y: y(t),
+				dominantBaseline: "middle",
+				className: "ov-axis",
+				textAnchor: "end",
+				children: formatCompact(t)
+			})] }, t)), shown.map((bin, i) => /* @__PURE__ */ jsxs("g", { children: [
+				/* @__PURE__ */ jsx("rect", {
+					x: left + i * slot + 2,
+					y: y(bin.n),
+					width: Math.max(3, slot - 4),
+					height: Math.max(bin.n ? 2 : 0, 8 + plotH - y(bin.n)),
+					rx: 2,
+					fill: color
+				}),
+				(i % Math.max(1, Math.ceil(shown.length / 6)) === 0 || i === shown.length - 1) && /* @__PURE__ */ jsx("text", {
+					x: left + i * slot + slot / 2,
+					y: height - em * .35,
+					className: "ov-axis",
+					textAnchor: "middle",
+					children: format(bin.lo)
+				}),
+				/* @__PURE__ */ jsx("rect", {
+					x: left + i * slot,
+					y: 8,
+					width: slot,
+					height: plotH,
+					fill: "transparent",
+					onMouseEnter: () => setTip({
+						x: Math.min(left + i * slot + slot + 6, width - em * 14),
+						y: 8,
+						title: `${format(bin.lo)} to ${format(bin.hi)} ${unit}`,
+						lines: [{
+							label: "count",
+							value: String(bin.n)
+						}]
+					})
+				})
+			] }, i))]
+		}), /* @__PURE__ */ jsx(Tooltip, { tip })]
+	});
+}
+/** Lines over time on one axis (at most four series); the crosshair readout lists each series at the nearest time. A
+* `dots` series draws its points as marks (checkpoints) instead of a line; `axis` labels the time axis (default MM-DD). */
+function Lines({ series, format = formatCompact, rows = 13, axis }) {
+	const [ref, width, em] = useWidth();
+	const height = Math.round(rows * em);
+	const [hover, setHover] = useState(null);
+	const all = series.flatMap((s) => s.points);
+	if (!all.length) return /* @__PURE__ */ jsx("p", {
+		className: "ov-empty",
+		children: "No history yet."
+	});
+	const t0 = Math.min(...all.map((p) => p[0]));
+	const t1 = Math.max(...all.map((p) => p[0]));
+	const { top, ticks } = ticksFor(Math.max(...all.map((p) => p[1])));
+	const left = Math.round(3.4 * em);
+	const bottom = Math.round(1.8 * em);
+	const plotW = Math.max(0, width - left - 10);
+	const plotH = height - bottom - 8;
+	const x = (t) => left + (t1 > t0 ? (t - t0) / (t1 - t0) * plotW : 0);
+	const y = (v) => 8 + plotH - v / top * plotH;
+	const nearest = (points, t) => points.reduce((best, p) => Math.abs(p[0] - t) < Math.abs(best[0] - t) ? p : best, points[0]);
+	const day = (t) => new Date(t).toISOString().slice(5, 16).replace("T", " ");
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: "ov-plot",
+		onMouseMove: (event) => {
+			const box = event.currentTarget.getBoundingClientRect();
+			const px = event.clientX - box.left;
+			setHover(px >= left ? t0 + (px - left) / Math.max(1, plotW) * (t1 - t0) : null);
+		},
+		onMouseLeave: () => setHover(null),
+		children: [width > 0 && /* @__PURE__ */ jsxs("svg", {
+			width,
+			height,
+			role: "img",
+			"aria-label": series.map((s) => s.name).join(", "),
+			children: [
+				ticks.map((t) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+					x1: left,
+					x2: width - 10,
+					y1: y(t),
+					y2: y(t),
+					className: "ov-gridline"
+				}), /* @__PURE__ */ jsx("text", {
+					x: left - em * .4,
+					y: y(t),
+					dominantBaseline: "middle",
+					className: "ov-axis",
+					textAnchor: "end",
+					children: format(t)
+				})] }, t)),
+				[
+					t0,
+					(t0 + t1) / 2,
+					t1
+				].map((t, i) => /* @__PURE__ */ jsx("text", {
+					x: x(t),
+					y: height - em * .35,
+					className: "ov-axis",
+					textAnchor: i === 0 ? "start" : i === 2 ? "end" : "middle",
+					children: axis ? axis(t) : day(t).slice(0, 5)
+				}, i)),
+				series.map((s) => s.dots ? /* @__PURE__ */ jsx("g", { children: s.points.map((p) => /* @__PURE__ */ jsx("circle", {
+					cx: x(p[0]),
+					cy: y(p[1]),
+					r: Math.max(3, em / 5),
+					fill: s.color,
+					stroke: "var(--chart-live-surface, #fff)",
+					strokeWidth: 1.5
+				}, p[0])) }, s.name) : /* @__PURE__ */ jsx("polyline", {
+					fill: "none",
+					stroke: s.color,
+					strokeWidth: Math.max(2, em / 8),
+					strokeLinejoin: "round",
+					points: s.points.map((p) => `${x(p[0])},${y(p[1])}`).join(" ")
+				}, s.name)),
+				hover !== null && /* @__PURE__ */ jsx("line", {
+					x1: x(hover),
+					x2: x(hover),
+					y1: 8,
+					y2: 8 + plotH,
+					className: "ov-crosshair"
+				}),
+				hover !== null && series.map((s) => {
+					const p = s.points.length ? nearest(s.points, hover) : null;
+					return p ? /* @__PURE__ */ jsx("circle", {
+						cx: x(p[0]),
+						cy: y(p[1]),
+						r: Math.max(4, em / 4),
+						fill: s.color,
+						stroke: "var(--chart-live-surface, #fff)",
+						strokeWidth: 2
+					}, s.name) : null;
+				})
+			]
+		}), hover !== null && /* @__PURE__ */ jsx(Tooltip, { tip: {
+			x: Math.min(x(hover) + 10, width - em * 14),
+			y: 8,
+			title: day(hover),
+			lines: series.filter((s) => s.points.length).map((s) => {
+				const p = nearest(s.points, hover);
+				return {
+					label: s.label ? s.label(p[0]) : s.name,
+					value: format(p[1]),
+					color: s.color
+				};
+			})
+		} })]
+	});
+}
+/** A used-of-total meter with its numbers. */
+function Meter({ used, total, format = formatCompact, tone, text }) {
+	const share = used !== null && used !== void 0 && total ? Math.min(1, used / total) : null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "ov-meter",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "ov-meter-track",
+			children: /* @__PURE__ */ jsx("span", { style: {
+				width: `${(share ?? 0) * 100}%`,
+				background: tone ?? (share !== null && share > .9 ? "var(--chart-live-danger, #d85050)" : share !== null && share > .7 ? "var(--chart-live-warning, #c98500)" : LIVE_SERIES[0])
+			} })
+		}), /* @__PURE__ */ jsx("span", {
+			className: "ov-meter-text",
+			children: text ?? `${format(used ?? NaN)} of ${format(total ?? NaN)} · ${formatShare(share)}`
+		})]
+	});
+}
+/** A small line of one series for a row in a list (one hue; the row's label carries identity). */
+function Spark({ points, max = 1, color = LIVE_SERIES[0] }) {
+	if (points.length < 2) return /* @__PURE__ */ jsx("span", {
+		className: "ov-spark-empty",
+		children: "collecting"
+	});
+	const t0 = points[0][0];
+	const t1 = points.at(-1)[0];
+	const w = 160;
+	const h = 32;
+	const domain = Math.max(1, max);
+	const d = points.map((p) => `${(p[0] - t0) / Math.max(1, t1 - t0) * w},${30 - Math.min(domain, p[1]) / domain * 28}`).join(" ");
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: `0 0 ${w} ${h}`,
+		className: "ov-spark",
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ jsx("polyline", {
+			fill: "none",
+			stroke: color,
+			strokeWidth: 1.6,
+			points: d
+		})
+	});
+}
+/** One bar per row on a shared time axis (who worked when): each row's bar spans its start to its end, coloured by its
+* state; hovering a row names it, its state and its span. Times are epoch ms; `axis` labels the time axis. */
+function Gantt({ rows, colors, axis, span }) {
+	const [ref, width, em] = useWidth();
+	const [tip, setTip] = useState(null);
+	if (!rows.length) return /* @__PURE__ */ jsx("p", {
+		className: "ov-empty",
+		children: "No agent has started."
+	});
+	const rowH = Math.round(1.25 * em);
+	const labelW = Math.min(Math.round(13 * em), Math.round(width * .32));
+	const top = 4;
+	const bottom = Math.round(1.8 * em);
+	const height = top + rows.length * rowH + bottom;
+	const t0 = Math.min(...rows.map((row) => row.start));
+	const t1 = Math.max(...rows.map((row) => row.end), t0 + 6e4);
+	const plotW = Math.max(0, width - labelW - 10);
+	const x = (t) => labelW + (t - t0) / (t1 - t0) * plotW;
+	const fallback = colors.unknown ?? "#8e8e8e";
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: "ov-plot",
+		onMouseLeave: () => setTip(null),
+		children: [width > 0 && /* @__PURE__ */ jsxs("svg", {
+			width,
+			height,
+			role: "img",
+			"aria-label": `${rows.length} agents over time`,
+			children: [[
+				0,
+				.25,
+				.5,
+				.75,
+				1
+			].map((f) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("line", {
+				x1: labelW + f * plotW,
+				x2: labelW + f * plotW,
+				y1: top,
+				y2: top + rows.length * rowH,
+				className: "ov-gridline"
+			}), /* @__PURE__ */ jsx("text", {
+				x: labelW + f * plotW,
+				y: height - em * .35,
+				className: "ov-axis",
+				textAnchor: f === 0 ? "start" : f === 1 ? "end" : "middle",
+				children: axis(t0 + f * (t1 - t0))
+			})] }, f)), rows.map((row, i) => {
+				const y = top + i * rowH;
+				const color = colors[row.state] ?? fallback;
+				return /* @__PURE__ */ jsxs("g", {
+					onMouseEnter: () => setTip({
+						x: Math.min(x(row.end) + 8, width - em * 16),
+						y: Math.max(0, y - em),
+						title: row.label,
+						lines: [{
+							label: row.state,
+							value: span(row.start, row.end),
+							color
+						}, ...row.note ? [{
+							label: row.note,
+							value: ""
+						}] : []]
+					}),
+					children: [
+						/* @__PURE__ */ jsx("rect", {
+							x: 0,
+							y,
+							width,
+							height: rowH,
+							fill: "transparent"
+						}),
+						/* @__PURE__ */ jsx("text", {
+							x: labelW - em * .5,
+							y: y + rowH / 2,
+							dominantBaseline: "middle",
+							textAnchor: "end",
+							className: "ov-axis ov-gantt-label",
+							children: row.label.length > 26 ? `${row.label.slice(0, 25)}…` : row.label
+						}),
+						/* @__PURE__ */ jsx("rect", {
+							x: x(row.start),
+							y: y + rowH * .18,
+							width: Math.max(2, x(row.end) - x(row.start)),
+							height: rowH * .64,
+							rx: 2,
+							fill: color
+						})
+					]
+				}, `${row.label}-${i}`);
+			})]
+		}), /* @__PURE__ */ jsx(Tooltip, { tip })]
+	});
+}
+//#endregion
+export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, DayBars, Gantt, HBars, Histogram, LIVE_SERIES, Lines, Meter, Spark, Sparkline, StackedBarChart, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, formatCompact, formatSparklineValue, formatWaterfallDuration, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, waterfallSpanGeometry, waterfallTicks };

package/dist/react/live.css

@@ -0,0 +1,27 @@
+/* Shared live charts. Consumers may set --chart-live-* tokens on an ancestor. */
+.ov-empty { margin: 0; color: var(--chart-live-faint, #777); font-size: .9em; }
+.ov-plot { position: relative; min-width: 0; }
+.ov-plot svg { display: block; overflow: visible; }
+line.ov-gridline { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 22%, transparent); stroke-width: 1; }
+.ov-axis { fill: var(--chart-live-muted, #666); font: .8em var(--chart-live-font-mono, monospace); font-variant-numeric: tabular-nums; }
+.ov-crosshair { stroke: var(--chart-live-faint, #777); stroke-dasharray: 3 3; }
+.ov-tip { position: absolute; z-index: 4; display: grid; gap: .25em; min-width: 12em; max-width: 18em; padding: .6em .75em; background: var(--chart-live-raised, #fff); border: 1px solid var(--chart-live-border, #aaa); border-radius: 8px; box-shadow: 0 10px 24px -12px #000; font-size: .85em; pointer-events: none; }
+.ov-tip-line { display: grid; grid-template-columns: auto 1fr auto; gap: .6em; align-items: center; color: var(--chart-live-muted, #666); }
+.ov-tip-line b { color: var(--chart-live-fg, #222); font-variant-numeric: tabular-nums; }
+.ov-hbars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, max-content) minmax(33%, 1fr) max-content; gap: .25em .7em; }
+.ov-hbars li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; }
+.ov-hbars li > a, .ov-hbars li > div { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; row-gap: .15em; align-items: center; padding: .3em .4em; border-radius: 6px; color: inherit; text-decoration: none; }
+.ov-hbars-more { grid-column: 1 / -1; padding: .1em .4em; font-size: .8em; color: var(--chart-live-faint, #777); }
+.ov-hbars li > a:hover, .ov-hbars li > div:hover { background: var(--chart-live-hover, #eee); text-decoration: none; }
+.ov-hbar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .95em; color: var(--chart-live-fg, #222); }
+.ov-hbar-track { height: .7em; border-radius: 3px; background: color-mix(in srgb, var(--chart-live-faint, #777) 14%, transparent); overflow: hidden; }
+.ov-hbar-track > span { display: block; height: 100%; border-radius: 3px; }
+.ov-hbar-value { font: .9em var(--chart-live-font-mono, monospace); font-variant-numeric: tabular-nums; text-align: right; color: var(--chart-live-fg, #222); }
+.ov-hbar-note { grid-column: 1 / -1; font-size: .78em; color: var(--chart-live-faint, #777); }
+.ov-meter { display: grid; gap: .3em; min-width: 0; }
+.ov-meter-track { display: block; height: .7em; border-radius: 3px; background: color-mix(in srgb, var(--chart-live-faint, #777) 14%, transparent); overflow: hidden; }
+.ov-meter-track > span { display: block; height: 100%; border-radius: 3px; }
+.ov-meter-text { font: .85em var(--chart-live-font-mono, monospace); font-variant-numeric: tabular-nums; color: var(--chart-live-muted, #666); }
+.ov-spark { display: block; width: 8em; height: 1.6em; }
+.ov-spark-empty { font-size: .8em; color: var(--chart-live-faint, #777); }
+.ov-tip-line i { display: inline-block; width: .7em; height: .7em; border-radius: 3px; margin-right: .4em; vertical-align: -.05em; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/charts",
-  "version": "0.3.0",
+  "version": "0.4.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",
@@ -14,7 +14,8 @@
   },
   "homepage": "https://github.com/tangle-network/brand/tree/main/packages/charts",
   "sideEffects": [
-    "./dist/figure.css"
+    "./dist/figure.css",
+    "./dist/react/live.css"
   ],
   "files": [
     "dist",
@@ -27,6 +28,7 @@
       "default": "./dist/index.js"
     },
     "./figure.css": "./dist/figure.css",
+    "./react/live.css": "./dist/react/live.css",
     "./react": {
       "types": "./dist/react/index.d.ts",
       "import": "./dist/react/index.js",
@@ -53,6 +55,6 @@
   ],
   "scripts": {
     "gen:css": "node scripts/gen-css.mjs",
-    "build": "node scripts/gen-css.mjs --check && tsdown && cp src/figure.css dist/figure.css"
+    "build": "node scripts/gen-css.mjs --check && tsdown && cp src/figure.css dist/figure.css && cp src/react/live.css dist/react/live.css"
   }
 }