@tangle-network/charts 2.0.16 → 2.0.17

package/README.md

@@ -4,6 +4,8 @@ Benchmark figures as static SVG and HTML tables, plus optional React timing prim
 
 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.
 
+`VersionGraph` and `layoutVersionGraph` from `@tangle-network/charts/react` render version histories with lane and merge geometry, controlled selection, filtering, keyboard navigation and bounded rows. Import `react/live.css` and Brand tokens as above. Producers supply commit identities, parents, lane labels and scored chips; Charts preserves those facts and owns drawing, arrival motion and reduced-motion behavior.
+
 `FlowWaterfall` from `@tangle-network/charts/react` is the shared live trace inspector: an agent timeline (one row per agent, elbow handoffs, hatched waiting) and a virtualized span waterfall over one clock. It owns hierarchy layout, folding, search, playback, zoom, span cards and running-span growth. Producers own identity, `parentId`, explicit `status` and observed totals. Import `@tangle-network/charts/react/flow-waterfall.css`; its `fw-*` classes and six-field summary support hosts without a Tailwind build. Every color, radius and shadow in it is a Brand role (text, card, hairline, well, chart grid, status inks, the categorical tones for agents), so the host loads `@tangle-network/brand` `tokens.css` (or `legacy-light.css`) and sets its theme; the stylesheet has no color of its own. The React-free root exports the `FlowSpan` and `FlowTrace` types.
 
 `FlowWaterfall` accepts optional `graph` and `latestEvents` React nodes. Supplying `graph` adds Graph to its existing Agents/Steps view control, including `defaultView="graph"`. The trace clock and controlled selection survive switches. Graph hides waterfall-only controls; `latestEvents` stays mounted in the header across all views.

package/dist/react/index.d.ts

@@ -538,4 +538,65 @@ export declare function FlowWaterfall({ trace, live, startedAt, label, defaultCo
 /** Generic tool identity by name: a terminal, a file, a pencil, a lens, a globe or a branch, never a vendor mark. */
 export declare function toolGlyph(name: string | undefined): import("react").JSX.Element | undefined;
 //#endregion
-export type { BandKind, ChartBand, ChartMark, DotMapLabel, DotMapProps, DotMapRect, Figure, FigureAtWidth, FigureViewProps, FlowWaterfallProps, FlowWaterfallRow, ViewWindow as FlowWaterfallWindow, GapBand, GapProps, LineSeries, MarkKind, MarkVerdict, MarkerShape, MeterSegment, PointFields, PointGlyph, Refusal, SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, TickOutcome, TimelineLane, TimelineOptions, TimelineSpan, TimelineTick, TimelineViewProps, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow, XCategory, YScale, YTarget, YTick };
+//#region src/react/version-graph.d.ts
+/** `muted` chips sit beside the title; any other tone gets the second line. */
+/** A status tone from `statusOf`, or a non-status chip: `accent` for a series, `info` and `muted` for plain facts. */
+type VersionGraphTone = 'pass' | 'live' | 'attention' | 'fail' | 'neutral' | 'accent' | 'info' | 'muted';
+interface VersionGraphChip {
+  readonly label: string;
+  readonly tone?: VersionGraphTone;
+  readonly title?: string;
+}
+interface VersionGraphNode {
+  readonly id: string;
+  /** Parents in the model; one that is not in it (or is hidden) is skipped, and a hidden one passes its own on. */
+  readonly parents: readonly string[];
+  readonly lane: string;
+  readonly at: string | null;
+  readonly title: string;
+  readonly detail?: string | null;
+  /** A style hook and a filter key: `write`, `integrate`, `profile`, `version`, `authored`, `ghost`. */
+  readonly kind: string;
+  readonly chips?: readonly VersionGraphChip[];
+}
+interface VersionGraphLane {
+  readonly id: string;
+  readonly label: string;
+  readonly detail?: string | null;
+}
+/** Nodes newest first, every child above its parents. */
+interface VersionGraphModel {
+  readonly lanes: readonly VersionGraphLane[];
+  readonly nodes: readonly VersionGraphNode[];
+}
+/**
+ * Rows in model order, one column per lane that holds a shown node, and one edge from each shown node to each nearest
+ * shown ancestor: a hidden node (an integration when integrations are hidden, a commit of a lane filtered out) passes
+ * its parents on, so a lane's line stays connected.
+ */
+export declare function layoutVersionGraph(model: VersionGraphModel, shown?: (node: VersionGraphNode) => boolean): {
+  rows: {
+    node: VersionGraphNode;
+    row: number;
+    column: number;
+  }[];
+  edges: {
+    from: string;
+    to: string;
+    fromRow: number;
+    fromColumn: number;
+    toRow: number;
+    toColumn: number;
+  }[];
+  lanes: VersionGraphLane[];
+};
+export declare function VersionGraph({ model, selected, onSelect, label, shown, maxHeight }: {
+  model: VersionGraphModel;
+  selected: string | null;
+  onSelect: (id: string) => void;
+  label: string;
+  shown?: (node: VersionGraphNode) => boolean;
+  maxHeight?: number;
+}): import("react").JSX.Element;
+//#endregion
+export type { BandKind, ChartBand, ChartMark, DotMapLabel, DotMapProps, DotMapRect, Figure, FigureAtWidth, FigureViewProps, FlowWaterfallProps, FlowWaterfallRow, ViewWindow as FlowWaterfallWindow, GapBand, GapProps, LineSeries, MarkKind, MarkVerdict, MarkerShape, MeterSegment, PointFields, PointGlyph, Refusal, SparklineDirection, SparklineGeometry, SparklineGeometryOptions, SparklineLabelOptions, SparklinePoint, SparklineProps, SparklineValues, StackedBarBucket, StackedBarChartProps, StackedBarSegment, StackedBarSeries, TickOutcome, TimelineLane, TimelineOptions, TimelineSpan, TimelineTick, TimelineViewProps, VersionGraphChip, VersionGraphLane, VersionGraphModel, VersionGraphNode, VersionGraphTone, WaterfallBarProps, WaterfallHeaderProps, WaterfallRowProps, WaterfallSpanGeometry, WaterfallTimeAxisProps, WaterfallWindow, XCategory, YScale, YTarget, YTick };

package/dist/react/index.js

@@ -3354,7 +3354,7 @@ function useRowMotion(rows, element) {
 		const previous = known.current;
 		let order = 0;
 		for (const row of rows) {
-			const isRunning = spanRunning(row.span);
+			const isRunning = !!row.span && spanRunning(row.span);
 			if (!previous || !previous.has(row.id)) active.current.set(row.id, {
 				enter: Math.min(order++ * stagger, cap),
 				until: now + hold + cap
@@ -3365,7 +3365,7 @@ function useRowMotion(rows, element) {
 			});
 		}
 		known.current = new Set(rows.map((row) => row.id));
-		running.current = new Set(rows.filter((row) => spanRunning(row.span)).map((row) => row.id));
+		running.current = new Set(rows.filter((row) => row.span && spanRunning(row.span)).map((row) => row.id));
 		return new Map(active.current);
 	}, [
 		rows,
@@ -5062,4 +5062,239 @@ function FlowWaterfall({ trace, live, startedAt, label = "Trace waterfall", defa
 	});
 }
 //#endregion
-export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, DOT_MAP_CATEGORIES, DayBars, DotMap, Events, FigureView, FlowWaterfall, Gantt, Gap, HBars, Histogram, LIVE_SERIES, Lines, Meter, Spark, Sparkline, StackedBarChart, TimelineView, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, criticalPathIds, flowWaterfallRows, formatCompact, formatSparklineValue, formatWaterfallDuration, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, toolGlyph, waterfallSpanGeometry, waterfallTicks };
+//#region src/react/version-graph.tsx
+/** Recorded version lanes; callers supply their domain model, filters and selection. */
+/**
+* Rows in model order, one column per lane that holds a shown node, and one edge from each shown node to each nearest
+* shown ancestor: a hidden node (an integration when integrations are hidden, a commit of a lane filtered out) passes
+* its parents on, so a lane's line stays connected.
+*/
+function layoutVersionGraph(model, shown = () => true) {
+	const byId = new Map(model.nodes.map((node) => [node.id, node]));
+	const visible = model.nodes.filter(shown);
+	const visibleIds = new Set(visible.map((node) => node.id));
+	const lanes = model.lanes.filter((lane) => visible.some((node) => node.lane === lane.id));
+	for (const node of visible) if (!lanes.some((lane) => lane.id === node.lane)) lanes.push({
+		id: node.lane,
+		label: node.lane
+	});
+	const column = new Map(lanes.map((lane, i) => [lane.id, i]));
+	const rowOf = new Map(visible.map((node, i) => [node.id, i]));
+	const nearest = (id, seen) => {
+		if (seen.has(id)) return [];
+		seen.add(id);
+		if (visibleIds.has(id)) return [id];
+		const node = byId.get(id);
+		return node ? node.parents.flatMap((parent) => nearest(parent, seen)) : [];
+	};
+	const edges = [];
+	for (const node of visible) {
+		const seen = /* @__PURE__ */ new Set([node.id]);
+		const targets = [...new Set(node.parents.flatMap((parent) => nearest(parent, seen)))];
+		for (const target of targets) {
+			const toRow = rowOf.get(target);
+			if (toRow <= rowOf.get(node.id)) continue;
+			edges.push({
+				from: node.id,
+				to: target,
+				fromRow: rowOf.get(node.id),
+				fromColumn: column.get(node.lane),
+				toRow,
+				toColumn: column.get(byId.get(target).lane)
+			});
+		}
+	}
+	return {
+		rows: visible.map((node, i) => ({
+			node,
+			row: i,
+			column: column.get(node.lane)
+		})),
+		edges,
+		lanes
+	};
+}
+const WIDE = {
+	column: 16,
+	gutter: 14
+};
+const NARROW = {
+	column: 5,
+	gutter: 4
+};
+const LINE = 30;
+const TALL = 54;
+const BEND = 22;
+const COLORS = 8;
+const tall = (node) => (node.chips ?? []).some((chip) => chip.tone && chip.tone !== "muted");
+function VersionGraph({ model, selected, onSelect, label, shown, maxHeight = 600 }) {
+	const laid = useMemo(() => layoutVersionGraph(model, shown), [model, shown]);
+	const tops = useMemo(() => {
+		const out = [];
+		let y = 0;
+		for (const row of laid.rows) {
+			out.push(y);
+			y += tall(row.node) ? TALL : LINE;
+		}
+		out.push(y);
+		return out;
+	}, [laid]);
+	const height = tops.at(-1) ?? 0;
+	const [measure, measuredWidth] = useWidth();
+	const { column: COLUMN, gutter: GUTTER } = measuredWidth < 700 ? NARROW : WIDE;
+	const width = GUTTER + laid.lanes.length * COLUMN;
+	const x = (column) => GUTTER / 2 + column * COLUMN + COLUMN / 2;
+	const y = (row) => tops[row] + LINE / 2;
+	const path = (fromRow, fromColumn, toRow, toColumn) => {
+		const [x1, y1, x2, y2] = [
+			x(fromColumn),
+			y(fromRow),
+			x(toColumn),
+			y(toRow)
+		];
+		if (x1 === x2) return `M${x1},${y1} V${y2}`;
+		const bend = Math.min(BEND, y2 - y1);
+		return `M${x1},${y1} C${x1},${y1 + bend * .7} ${x2},${y1 + bend * .3} ${x2},${y1 + bend} V${y2}`;
+	};
+	const pane = useRef(null);
+	const focusTarget = useRef(null);
+	const arrived = useRef(/* @__PURE__ */ new Set());
+	const motion = useRowMotion(model.nodes, pane.current);
+	const [scrollTop, setScrollTop] = useState(0);
+	const first = Math.max(0, tops.findIndex((top) => top >= scrollTop) - 7);
+	const after = tops.findIndex((top) => top > scrollTop + maxHeight);
+	const end = after < 0 ? laid.rows.length : Math.min(laid.rows.length, after + 7);
+	const visible = laid.rows.slice(first, end);
+	const focusRow = (index) => {
+		const at = Math.max(0, Math.min(laid.rows.length - 1, index)), top = tops[at] ?? 0;
+		focusTarget.current = laid.rows[at]?.node.id ?? null;
+		if (pane.current) pane.current.scrollTop = top;
+		setScrollTop(top);
+		const target = pane.current?.querySelector(`[data-row="${at}"]`);
+		if (target) {
+			focusTarget.current = null;
+			target.focus();
+		}
+	};
+	useEffect(() => {
+		const at = laid.rows.findIndex((row) => row.node.id === selected), element = pane.current;
+		if (at < 0 || !element) return;
+		const top = tops[at], bottom = tops[at + 1];
+		if (top < element.scrollTop) element.scrollTop = Math.max(0, top - 8);
+		else if (bottom > element.scrollTop + element.clientHeight) element.scrollTop = bottom - element.clientHeight + 8;
+		setScrollTop(element.scrollTop);
+	}, [selected]);
+	const allLanes = useMemo(() => layoutVersionGraph(model).lanes, [model]);
+	const colorOf = new Map(allLanes.map((item, i) => [item.id, i % COLORS]));
+	return /* @__PURE__ */ jsx("div", {
+		ref: measure,
+		className: "tgc-version-graph",
+		"data-version-graph": label,
+		children: laid.rows.length === 0 ? /* @__PURE__ */ jsx("p", {
+			className: "ov-empty",
+			children: "Nothing to show with these filters."
+		}) : /* @__PURE__ */ jsx("div", {
+			ref: pane,
+			className: "vg-scroll",
+			style: {
+				maxHeight,
+				overflow: "auto"
+			},
+			onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
+			onKeyDown: (event) => {
+				const at = Number(event.target.closest("[data-row]")?.getAttribute("data-row"));
+				const next = event.key === "Home" ? 0 : event.key === "End" ? laid.rows.length - 1 : event.key === "ArrowDown" ? at + 1 : event.key === "ArrowUp" ? at - 1 : null;
+				if (next !== null) {
+					event.preventDefault();
+					focusRow(next);
+				}
+			},
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "vg-host",
+				style: { height },
+				children: [/* @__PURE__ */ jsxs("svg", {
+					className: "vg-lines",
+					width,
+					height,
+					"aria-hidden": "true",
+					children: [laid.edges.filter((edge) => y(edge.fromRow) <= scrollTop + maxHeight + TALL && y(edge.toRow) >= scrollTop - TALL).map((edge) => /* @__PURE__ */ jsx("path", {
+						"data-from": edge.from,
+						"data-to": edge.to,
+						className: `vg-c${colorOf.get(laid.lanes[edge.toColumn].id)} ${selected === edge.from || selected === edge.to ? "hot" : ""}`,
+						d: path(edge.fromRow, edge.fromColumn, edge.toRow, edge.toColumn)
+					}, `${edge.from}>${edge.to}`)), visible.map((row) => /* @__PURE__ */ jsx("circle", {
+						className: `vg-dot vg-c${colorOf.get(row.node.lane)} kind-${row.node.kind} ${selected === row.node.id ? "on" : ""}`,
+						cx: x(row.column),
+						cy: y(row.row),
+						r: row.node.kind === "integrate" ? 3 : 5
+					}, row.node.id))]
+				}), /* @__PURE__ */ jsx("ol", {
+					className: "vg-rows",
+					"aria-label": label,
+					style: {
+						paddingLeft: width,
+						paddingTop: tops[first]
+					},
+					children: visible.map((row) => {
+						const node = row.node;
+						const on = selected === node.id;
+						const arriving = motion.get(node.id)?.enter !== void 0 && !arrived.current.has(node.id);
+						const loud = (node.chips ?? []).filter((chip) => chip.tone && chip.tone !== "muted");
+						const quiet = (node.chips ?? []).filter((chip) => !chip.tone || chip.tone === "muted");
+						return /* @__PURE__ */ jsx("li", {
+							"aria-posinset": row.row + 1,
+							"aria-setsize": laid.rows.length,
+							style: { height: tops[row.row + 1] - tops[row.row] },
+							children: /* @__PURE__ */ jsxs("button", {
+								ref: (element) => {
+									if (!element) return;
+									if (arriving) arrived.current.add(node.id);
+									if (focusTarget.current === node.id) {
+										focusTarget.current = null;
+										element.focus();
+									}
+								},
+								type: "button",
+								className: `vg-row kind-${node.kind} ${on ? "on" : ""}`,
+								"aria-pressed": on,
+								disabled: node.kind === "ghost",
+								"data-node": node.id,
+								"data-row": row.row,
+								"data-arriving": arriving || void 0,
+								onClick: () => onSelect(node.id),
+								children: [/* @__PURE__ */ jsxs("span", {
+									className: "vg-line",
+									children: [
+										/* @__PURE__ */ jsx("b", {
+											className: "vg-title",
+											title: node.title,
+											children: node.title
+										}),
+										node.detail && /* @__PURE__ */ jsx("span", {
+											className: "vg-detail",
+											children: node.detail
+										}),
+										quiet.map((chip, i) => /* @__PURE__ */ jsx("span", {
+											className: "vg-chip tone-muted",
+											title: chip.title,
+											children: chip.label
+										}, i))
+									]
+								}), loud.length > 0 && /* @__PURE__ */ jsx("span", {
+									className: "vg-line vg-tags",
+									children: loud.map((chip, i) => /* @__PURE__ */ jsx("span", {
+										className: `vg-chip tone-${chip.tone}`,
+										title: chip.title,
+										children: chip.label
+									}, i))
+								})]
+							})
+						}, node.id);
+					})
+				})]
+			})
+		})
+	});
+}
+//#endregion
+export { DEFAULT_SPARKLINE_EMPTY_LABEL, DEFAULT_SPARKLINE_HEIGHT, DEFAULT_SPARKLINE_LABEL, DEFAULT_SPARKLINE_UNAVAILABLE_LABEL, DEFAULT_SPARKLINE_WIDTH, DOT_MAP_CATEGORIES, DayBars, DotMap, Events, FigureView, FlowWaterfall, Gantt, Gap, HBars, Histogram, LIVE_SERIES, Lines, Meter, Spark, Sparkline, StackedBarChart, TimelineView, VersionGraph, WaterfallBar, WaterfallHeader, WaterfallRow, WaterfallTimeAxis, criticalPathIds, flowWaterfallRows, formatCompact, formatSparklineValue, formatWaterfallDuration, layoutVersionGraph, sparklineGeometry, sparklineLabel, sparklinePointsAttribute, sparklineReadings, toolGlyph, waterfallSpanGeometry, waterfallTicks };

package/dist/react/live.css

@@ -129,3 +129,42 @@ line.ov-gridline { stroke: color-mix(in srgb, var(--chart-live-faint, #777) 22%,
 
 .ov-meter-steps span { overflow-wrap: anywhere; }
 @media (max-width: 720px) { .ov-meter-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ov-meter-steps li { padding: 12px; min-height: 94px; } }
+
+/* Recorded version history shares chart/Brand roles with the live timeline. */
+.tgc-version-graph { min-width: 0; font: 14px/1.4 var(--font-sans, sans-serif); color: var(--chart-live-fg, var(--text-primary));
+  --vg-c0: var(--chart-live-accent, var(--accent-text)); --vg-c1: light-dark(#2a7fa8, #6cc0e8); --vg-c2: light-dark(#7b4fc0, #b99af0); --vg-c3: light-dark(#1f7f88, #5fc2c9); --vg-c4: light-dark(#a8418f, #e58ccf); --vg-c5: light-dark(#5a6ad8, #8fa4ff); --vg-c6: light-dark(#45507a, #c0c4dc); --vg-c7: var(--chart-live-muted, var(--text-muted));
+}
+.tgc-version-graph .vg-host { position: relative; min-width: max-content; }
+.tgc-version-graph .vg-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
+.tgc-version-graph .vg-lines path { fill: none; stroke: currentColor; stroke-width: 2; opacity: .55; }
+.tgc-version-graph .vg-lines path.hot { opacity: 1; stroke-width: 2.5; }
+.tgc-version-graph .vg-lines .vg-dot { fill: currentColor; stroke: var(--chart-live-surface, var(--bg-surface)); stroke-width: 2; }
+.tgc-version-graph .vg-lines .vg-dot.kind-profile, .tgc-version-graph .vg-lines .vg-dot.kind-authored { fill: var(--chart-live-surface, var(--bg-surface)); stroke: currentColor; stroke-width: 2.5; }
+.tgc-version-graph .vg-lines .vg-dot.kind-ghost { fill: var(--chart-live-surface, var(--bg-surface)); stroke: var(--chart-live-faint, var(--text-muted)); stroke-dasharray: 2 2; }
+.tgc-version-graph .vg-lines .vg-dot.on { stroke: var(--chart-live-fg, var(--text-primary)); stroke-width: 3; }
+.tgc-version-graph .vg-c0 { color: var(--vg-c0); } .tgc-version-graph .vg-c1 { color: var(--vg-c1); } .tgc-version-graph .vg-c2 { color: var(--vg-c2); } .tgc-version-graph .vg-c3 { color: var(--vg-c3); }
+.tgc-version-graph .vg-c4 { color: var(--vg-c4); } .tgc-version-graph .vg-c5 { color: var(--vg-c5); } .tgc-version-graph .vg-c6 { color: var(--vg-c6); } .tgc-version-graph .vg-c7 { color: var(--vg-c7); }
+.tgc-version-graph .vg-rows { list-style: none; margin: 0; padding-right: 8px; }
+.tgc-version-graph .vg-rows > li { display: flex; }
+.tgc-version-graph .vg-row { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; width: 100%; min-width: 0; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--chart-live-fg, var(--text-primary)); font: inherit; text-align: left; cursor: pointer; }
+.tgc-version-graph .vg-row:hover, .tgc-version-graph .vg-row:focus-visible { background: var(--chart-live-raised, var(--bg-elevated)); }
+.tgc-version-graph .vg-row:focus-visible { outline: 2px solid var(--chart-live-accent, var(--accent-text)); outline-offset: -2px; }
+.tgc-version-graph .vg-row.on { background: color-mix(in srgb, var(--chart-live-accent, var(--accent-text)) 13%, var(--chart-live-surface, var(--bg-surface))); box-shadow: inset 2px 0 var(--chart-live-border, var(--border-color)); }
+.tgc-version-graph .vg-row:disabled { cursor: default; opacity: .8; }
+.tgc-version-graph .vg-line { display: flex; align-items: center; gap: 8px; min-width: 0; height: 30px; flex: none; }
+.tgc-version-graph .vg-line.vg-tags { height: 22px; flex-wrap: nowrap; overflow: hidden; }
+.tgc-version-graph .vg-title { font-weight: 600; max-width: 46ch; }
+.tgc-version-graph .vg-row.kind-integrate .vg-title { font-weight: 400; color: var(--chart-live-muted, var(--text-muted)); }
+.tgc-version-graph .vg-row.kind-ghost .vg-title { font-weight: 400; color: var(--chart-live-faint, var(--text-muted)); }
+.tgc-version-graph .vg-detail { font-size: var(--font-size-sm, 13px); color: var(--chart-live-muted, var(--text-muted)); }
+.tgc-version-graph .vg-chip { display: inline-block; flex: none; margin-left: 4px; padding: 0 8px; border-radius: 4px; font: 600 var(--font-size-sm, 13px)/1.6 var(--font-sans); white-space: nowrap; background: var(--chart-live-raised, var(--bg-elevated)); color: var(--chart-live-muted, var(--text-muted)); }
+.tgc-version-graph .vg-chip.tone-neutral { background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chart-live-muted, var(--text-muted)) 55%, transparent); }
+.tgc-version-graph .vg-chip.tone-accent { color: var(--chart-live-accent, var(--accent-text)); background: color-mix(in srgb, var(--chart-live-accent, var(--accent-text)) 14%, transparent); }
+.tgc-version-graph .vg-chip.tone-info { color: var(--chart-live-fg, var(--text-primary)); background: var(--chart-live-raised, var(--bg-elevated)); font-weight: 400; }
+
+.tgc-version-graph :is(.vg-title,.vg-detail) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@media (forced-colors: active) { .tgc-version-graph .vg-chip { forced-color-adjust: none; border: 1px solid CanvasText; } }
+
+.tgc-version-graph .vg-row[data-arriving] { transition: opacity var(--motion-arrive); }
+@starting-style { .tgc-version-graph .vg-row[data-arriving] { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .tgc-version-graph .vg-row[data-arriving] { transition: none; } }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/charts",
-  "version": "2.0.16",
+  "version": "2.0.17",
   "description": "Static SVG and HTML figures for benchmarks and operational timing. Draws from producer data and refuses what it cannot draw honestly.",
   "type": "module",
   "license": "MIT",