@tangle-network/charts 0.2.0 → 0.3.1

package/README.md

@@ -1,6 +1,17 @@
 # @tangle-network/charts
 
-Benchmark figures as static SVG and HTML tables.
+Benchmark figures as static SVG and HTML tables, plus optional React timing primitives.
+
+`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
+same `{ startMs, endMs }` window to every row. Hierarchy, selection, attribution,
+formatting and failure interpretation stay with the consumer. The original
+minimum/clipped marker remains visible; its tooltip reports the actual duration.
+Set `--waterfall-timing-width`, `--waterfall-duration-width` and the existing
+`--intel-waterfall-*` colors for the consumer's layout and theme. No stylesheet,
+router or React DOM dependency is required.
+
 Five figures cover the decisions a benchmark reader makes:
 
 | Figure | Question |

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

@@ -1,4 +1,4 @@
-import { ReactElement } from "react";
+import { ReactElement, ReactNode } from "react";
 //#region src/react/sparkline.d.ts
 type SparklineDirection = "rising" | "falling" | "flat";
 type SparklineValues = readonly (number | null)[];
@@ -81,4 +81,54 @@ interface StackedBarChartProps {
 }
 export declare function StackedBarChart(props: StackedBarChartProps): import("react").JSX.Element;
 //#endregion
-export type { SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries };
+//#region src/react/waterfall.d.ts
+interface WaterfallWindow {
+  readonly startMs: number;
+  readonly endMs: number;
+}
+interface WaterfallSpanGeometry {
+  readonly offsetPct: number;
+  readonly widthPct: number;
+  readonly startOffsetMs: number;
+  readonly durationMs: number;
+  readonly clipped: boolean;
+}
+/** The Intelligence clipping/minimum-marker policy, applied to relative times. */
+export declare function waterfallSpanGeometry(startMs: number, endMs: number, window: WaterfallWindow): WaterfallSpanGeometry;
+/** Intelligence's round-duration ticks, with the original 208px default. */
+export declare function waterfallTicks(windowMs: number, widthPx?: number, minLabelGapPx?: number): number[];
+export declare function formatWaterfallDuration(ms: number): string;
+interface WaterfallTimeAxisProps {
+  windowMs: number;
+  originMs?: number;
+  widthPx?: number;
+  formatDuration?: (ms: number) => string;
+  className?: string;
+}
+export declare function WaterfallTimeAxis({ windowMs, originMs, widthPx, formatDuration, className }: WaterfallTimeAxisProps): import("react").JSX.Element | null;
+interface WaterfallBarProps {
+  startMs: number;
+  endMs: number;
+  window: WaterfallWindow;
+  tone?: "default" | "error" | "critical";
+  formatDuration?: (ms: number) => string;
+  className?: string;
+}
+export declare function WaterfallBar({ startMs, endMs, window, tone, formatDuration, className }: WaterfallBarProps): import("react").JSX.Element;
+interface WaterfallRowProps extends Omit<WaterfallBarProps, "className"> {
+  label: ReactNode;
+  attribution?: ReactNode;
+  timingClassName?: string;
+  durationClassName?: string;
+  className?: string;
+}
+/** Non-interactive row body; its caller owns treeitems, buttons and selection. */
+export declare function WaterfallRow({ label, attribution, startMs, endMs, window, tone, formatDuration, className, timingClassName, durationClassName }: WaterfallRowProps): import("react").JSX.Element;
+interface WaterfallHeaderProps extends WaterfallTimeAxisProps {
+  label?: ReactNode;
+  attribution?: ReactNode;
+  durationLabel?: ReactNode;
+}
+export declare function WaterfallHeader({ label, attribution, durationLabel, ...axis }: WaterfallHeaderProps): 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

@@ -535,4 +535,224 @@ function StackedBarChart(props) {
 	});
 }
 //#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 };
+//#region src/react/waterfall.tsx
+/** The Intelligence clipping/minimum-marker policy, applied to relative times. */
+function waterfallSpanGeometry(startMs, endMs, window) {
+	if (![
+		startMs,
+		endMs,
+		window.startMs,
+		window.endMs
+	].every(Number.isFinite) || endMs < startMs || window.endMs < window.startMs) throw new RangeError("Waterfall requires finite, ordered span and window times");
+	const durationMs = endMs - startMs;
+	const startOffsetMs = startMs - window.startMs;
+	const windowMs = window.endMs - window.startMs;
+	const span = windowMs === 0 ? 1 : windowMs;
+	const rawOffsetPct = startOffsetMs / span * 100;
+	const endPct = rawOffsetPct + durationMs / span * 100;
+	const fullyOutside = endPct <= 0 || rawOffsetPct >= 100;
+	const offsetPct = Math.min(99, Math.max(0, rawOffsetPct));
+	return {
+		offsetPct,
+		widthPct: fullyOutside ? .5 : Math.max(.5, Math.min(100 - offsetPct, endPct - offsetPct)),
+		startOffsetMs,
+		durationMs,
+		clipped: fullyOutside || rawOffsetPct < 0 || endPct > 100
+	};
+}
+function niceTickMs(spanMs, target = 4) {
+	if (!(spanMs > 0)) return 1;
+	const rough = spanMs / target;
+	const mag = 10 ** Math.floor(Math.log10(rough));
+	const norm = rough / mag;
+	return (norm >= 5 ? 5 : norm >= 2 ? 2 : 1) * mag;
+}
+/** Intelligence's round-duration ticks, with the original 208px default. */
+function waterfallTicks(windowMs, widthPx = 208, minLabelGapPx = 64) {
+	if (!Number.isFinite(windowMs) || windowMs < 0 || !Number.isFinite(widthPx) || widthPx <= 0 || !Number.isFinite(minLabelGapPx) || minLabelGapPx <= 0) throw new RangeError("Waterfall axis requires finite, nonnegative time and positive dimensions");
+	if (windowMs === 0) return [];
+	const step = niceTickMs(windowMs, Math.max(2, Math.floor(widthPx / minLabelGapPx)));
+	const raw = [];
+	for (let t = 0; t <= windowMs + 1e-6; t += step) raw.push(t);
+	const minGapPct = minLabelGapPx / widthPx * 100;
+	const kept = [];
+	let lastPct = Number.NEGATIVE_INFINITY;
+	for (const t of raw) {
+		const pct = t / windowMs * 100;
+		if (kept.length === 0 || pct - lastPct >= minGapPct) {
+			kept.push(t);
+			lastPct = pct;
+		}
+	}
+	return kept;
+}
+function formatWaterfallDuration(ms) {
+	if (ms < 1e3) return `${Math.round(ms)}ms`;
+	if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
+	if (ms < 36e5) return `${(ms / 6e4).toFixed(1)}m`;
+	return `${(ms / 36e5).toFixed(1)}h`;
+}
+const timingCell = {
+	width: "var(--waterfall-timing-width, 208px)",
+	flexShrink: 0
+};
+const rowStyle = {
+	display: "flex",
+	alignItems: "center",
+	gap: "0.5rem",
+	width: "100%",
+	minWidth: 0
+};
+const labelStyle = {
+	display: "flex",
+	alignItems: "center",
+	gap: "0.5rem",
+	flex: "1 1 0%",
+	minWidth: 0
+};
+const durationStyle = {
+	width: "var(--waterfall-duration-width, 4rem)",
+	flexShrink: 0,
+	textAlign: "right",
+	fontFamily: "var(--font-mono, monospace)",
+	fontVariantNumeric: "tabular-nums"
+};
+const ordered = (start, end) => Number.isFinite(start) && Number.isFinite(end) && end >= start;
+function WaterfallTimeAxis({ windowMs, originMs = 0, widthPx = 208, formatDuration = formatWaterfallDuration, className }) {
+	if (!ordered(0, windowMs) || !Number.isFinite(originMs)) return null;
+	const ticks = waterfallTicks(windowMs, widthPx);
+	if (windowMs === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		"data-waterfall-axis": "",
+		"aria-hidden": "true",
+		style: {
+			...timingCell,
+			position: "relative",
+			height: "var(--waterfall-axis-height, 1.5rem)"
+		},
+		children: ticks.map((t) => {
+			const pct = t / windowMs * 100;
+			return /* @__PURE__ */ jsxs("span", {
+				style: {
+					position: "absolute",
+					top: 0,
+					bottom: 0,
+					left: `${pct}%`,
+					display: "flex",
+					flexDirection: "column",
+					alignItems: "start"
+				},
+				children: [/* @__PURE__ */ jsx("span", { style: {
+					height: "0.5rem",
+					width: 1,
+					background: "var(--intel-chart-grid, var(--color-border, #d1d3e1))"
+				} }), /* @__PURE__ */ jsx("span", {
+					style: {
+						marginTop: "0.25rem",
+						whiteSpace: "nowrap",
+						fontFamily: "var(--font-mono, monospace)",
+						fontSize: "var(--waterfall-axis-font-size, 11px)",
+						lineHeight: 1,
+						fontVariantNumeric: "tabular-nums",
+						transform: pct > 75 ? "translateX(-100%)" : void 0
+					},
+					children: formatDuration(originMs + t)
+				})]
+			}, t);
+		})
+	});
+}
+function WaterfallBar({ startMs, endMs, window, tone = "default", formatDuration = formatWaterfallDuration, className }) {
+	if (!ordered(startMs, endMs) || !ordered(window.startMs, window.endMs)) return /* @__PURE__ */ jsx("span", {
+		className,
+		"data-waterfall-track": "",
+		"data-unavailable": "true",
+		title: "Timing unavailable",
+		style: {
+			...timingCell,
+			textAlign: "center"
+		},
+		children: "—"
+	});
+	const geometry = waterfallSpanGeometry(startMs, endMs, window);
+	const color = tone === "error" ? "var(--intel-waterfall-error, #dc2626)" : tone === "critical" ? "var(--intel-waterfall-critical, #0891b2)" : "var(--intel-waterfall-bar, #2563eb)";
+	return /* @__PURE__ */ jsx("span", {
+		className,
+		"data-waterfall-track": "",
+		"data-tone": tone,
+		title: `+${formatDuration(geometry.startOffsetMs)} · ${formatDuration(geometry.durationMs)}${tone === "critical" ? " · critical path" : ""}`,
+		style: {
+			...timingCell,
+			position: "relative",
+			height: "var(--waterfall-bar-height, 0.875rem)",
+			overflow: "hidden",
+			borderRadius: "var(--waterfall-bar-radius, 999px)",
+			background: "var(--intel-waterfall-track, rgb(148 163 184 / 22%))"
+		},
+		children: /* @__PURE__ */ jsx("span", {
+			"data-waterfall-bar": "",
+			"data-clipped": geometry.clipped || void 0,
+			style: {
+				position: "absolute",
+				top: 0,
+				height: "100%",
+				borderRadius: "inherit",
+				background: color,
+				left: `${geometry.offsetPct}%`,
+				width: `${geometry.widthPct}%`,
+				boxShadow: tone === "default" ? void 0 : `0 0 0 1px ${color}`
+			}
+		})
+	});
+}
+/** Non-interactive row body; its caller owns treeitems, buttons and selection. */
+function WaterfallRow({ label, attribution, startMs, endMs, window, tone, formatDuration = formatWaterfallDuration, className, timingClassName, durationClassName }) {
+	return /* @__PURE__ */ jsxs("span", {
+		"data-waterfall-row": "",
+		className,
+		style: rowStyle,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"data-waterfall-label": "",
+				style: labelStyle,
+				children: label
+			}),
+			attribution,
+			/* @__PURE__ */ jsx(WaterfallBar, {
+				startMs,
+				endMs,
+				window,
+				tone,
+				formatDuration,
+				className: timingClassName
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-waterfall-duration": "",
+				className: durationClassName,
+				style: durationStyle,
+				children: ordered(startMs, endMs) ? formatDuration(endMs - startMs) : "—"
+			})
+		]
+	});
+}
+function WaterfallHeader({ label = "Span", attribution, durationLabel = "Duration", ...axis }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-waterfall-header": "",
+		style: rowStyle,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				style: labelStyle,
+				children: label
+			}),
+			attribution,
+			/* @__PURE__ */ jsx(WaterfallTimeAxis, { ...axis }),
+			/* @__PURE__ */ jsx("span", {
+				style: durationStyle,
+				children: durationLabel
+			})
+		]
+	});
+}
+//#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 };

package/package.json

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