@seekalfred/primitives 0.6.0 → 0.7.1

package/dist/slope-chart/slope-chart.js

@@ -0,0 +1,568 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { prefersReducedMotion, useIsomorphicLayoutEffect } from "../lib/motion.js";
+import { SwapText } from "../lib/swap-text.js";
+import { MORPH, live, retarget } from "../lib/spring-tween.js";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/slope-chart/slope-chart.tsx
+/** Space between labels, around the plot (so dots never touch an edge) and for the column headings, in pixels. */
+const LABEL_GAP = 20;
+const PAD = 14;
+const HEAD = 28;
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+const GROUPED = new Intl.NumberFormat("en-US", { maximumFractionDigits: 1 });
+/** Moves labels apart just enough to stop overlaps: touching labels form a group centred on where its members want to be. */
+function spread(wanted, gap, low, high) {
+	let groups = wanted.map((y, index) => ({
+		y,
+		index
+	})).sort((a, b) => a.y - b.y).map((entry) => ({
+		members: [entry],
+		top: entry.y
+	}));
+	for (let changed = true; changed;) {
+		changed = false;
+		const next = [];
+		for (const group of groups) {
+			const prev = next[next.length - 1];
+			if (prev && prev.top + prev.members.length * gap > group.top) {
+				const members = [...prev.members, ...group.members];
+				next[next.length - 1] = {
+					members,
+					top: members.reduce((sum, member, k) => sum + member.y - k * gap, 0) / members.length
+				};
+				changed = true;
+			} else next.push(group);
+		}
+		groups = next.map((group) => ({
+			...group,
+			top: clamp(group.top, low, Math.max(low, high - (group.members.length - 1) * gap))
+		}));
+	}
+	const out = new Array(wanted.length);
+	groups.forEach((group) => group.members.forEach((member, k) => out[member.index] = group.top + k * gap));
+	return out;
+}
+/** Rank change: an arrow and the number of places, or "=" when level. The number rises or drops in when it changes. */
+function Rank({ move }) {
+	const text = move === 0 ? "=" : `${Math.abs(move)}`;
+	return /* @__PURE__ */ jsxs("span", {
+		"data-move": move > 0 ? "up" : move < 0 ? "down" : "level",
+		"aria-hidden": "true",
+		className: "slope-chart-rank",
+		children: [move !== 0 ? /* @__PURE__ */ jsx("svg", {
+			width: "8",
+			height: "8",
+			viewBox: "0 0 8 8",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1.3",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: /* @__PURE__ */ jsx("path", { d: move > 0 ? "M4 7V1M1.5 3.5 4 1l2.5 2.5" : "M4 1v6M1.5 4.5 4 7l2.5-2.5" })
+		}) : null, /* @__PURE__ */ jsx(SwapText, {
+			swapKey: text,
+			dir: move >= 0 ? 1 : -1,
+			motion: "rise",
+			children: text
+		})]
+	});
+}
+const SlopeChart = forwardRef(function SlopeChart({ data, label, startLabel, endLabel, formatValue, formatChange, height, highlightKey = null, activeKey, onActiveChange, ranks = true, emptyLabel = "No data", className }, ref) {
+	const figure = useRef(null);
+	const refs = useMemo(() => mergeRefs(ref, figure), [ref]);
+	const stage = useRef(null);
+	const plot = useRef(null);
+	const tip = useRef(null);
+	const empty = data.length === 0;
+	const plotHeight = height ?? Math.max(200, data.length * 44);
+	const [width, setWidth] = useState(0);
+	useIsomorphicLayoutEffect(() => {
+		const node = stage.current;
+		if (!node) return;
+		const read = () => setWidth(node.clientWidth);
+		read();
+		if (typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(read);
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	const ready = width > 0;
+	const narrow = width < 440;
+	const leftRoom = narrow ? width < 300 ? 116 : 132 : 168;
+	const rightRoom = ranks ? narrow ? 76 : 96 : narrow ? 52 : 64;
+	const x0 = leftRoom;
+	const x1 = Math.max(x0 + 40, width - rightRoom);
+	const values = data.flatMap((item) => [item.start, item.end]);
+	let lo = Math.min(...values);
+	let hi = Math.max(...values);
+	if (!Number.isFinite(lo)) {
+		lo = 0;
+		hi = 1;
+	}
+	if (hi - lo < 1e-9) {
+		lo -= 1;
+		hi += 1;
+	}
+	const yOf = (value) => PAD + (1 - (value - lo) / (hi - lo)) * (plotHeight - 28);
+	const rankOf = (field) => {
+		const sorted = [...data].sort((a, b) => b[field] - a[field]);
+		return (item) => sorted.indexOf(item) + 1;
+	};
+	const r0 = rankOf("start");
+	const r1 = rankOf("end");
+	const l0 = spread(data.map((item) => yOf(item.start)), LABEL_GAP, 8, plotHeight - 8);
+	const l1 = spread(data.map((item) => yOf(item.end)), LABEL_GAP, 8, plotHeight - 8);
+	const rows = data.map((item, i) => ({
+		item,
+		y0: yOf(item.start),
+		y1: yOf(item.end),
+		l0: l0[i],
+		l1: l1[i],
+		rank0: r0(item),
+		rank1: r1(item),
+		order: 0
+	}));
+	const byEnd = [...rows].sort((a, b) => a.rank1 - b.rank1);
+	byEnd.forEach((row, k) => {
+		row.order = k;
+	});
+	const lives = useRef(/* @__PURE__ */ new Map());
+	const box = useRef({
+		x0,
+		x1
+	});
+	const paint = useCallback(() => {
+		const root = plot.current;
+		if (!root) return;
+		const { x0, x1 } = box.current;
+		for (const node of root.querySelectorAll("[data-row]")) {
+			const at = lives.current.get(node.dataset.row);
+			if (!at) continue;
+			const line = node.querySelector("[data-part=line]");
+			line?.setAttribute("y1", String(at.y0.value));
+			line?.setAttribute("y2", String(at.y1.value));
+			node.querySelector("[data-part=dot0]")?.setAttribute("cy", String(at.y0.value));
+			node.querySelector("[data-part=dot1]")?.setAttribute("cy", String(at.y1.value));
+			node.querySelector("[data-part=lead0]")?.setAttribute("d", `M${x0 - 6},${at.l0.value}L${x0 - 1},${at.y0.value}`);
+			node.querySelector("[data-part=lead1]")?.setAttribute("d", `M${x1 + 6},${at.l1.value}L${x1 + 1},${at.y1.value}`);
+		}
+		for (const node of root.querySelectorAll("[data-label]")) {
+			const at = lives.current.get(node.dataset.label);
+			if (at) node.style.translate = `0 ${node.dataset.side === "end" ? at.l1.value : at.l0.value}px`;
+		}
+	}, []);
+	useIsomorphicLayoutEffect(() => {
+		box.current = {
+			x0,
+			x1
+		};
+		paint();
+	});
+	const signature = rows.map((row) => [
+		row.item.key,
+		row.y0,
+		row.y1,
+		row.l0,
+		row.l1
+	].map((part) => typeof part === "number" ? Math.round(part * 100) : part).join(":")).join("|");
+	const latest = useRef(rows);
+	useIsomorphicLayoutEffect(() => {
+		latest.current = rows;
+	});
+	useIsomorphicLayoutEffect(() => {
+		const current = latest.current;
+		const keys = new Set(current.map((row) => row.item.key));
+		for (const key of [...lives.current.keys()]) {
+			if (keys.has(key)) continue;
+			const gone = lives.current.get(key);
+			for (const value of Object.values(gone)) value.stop();
+			lives.current.delete(key);
+		}
+		for (const row of current) {
+			const at = lives.current.get(row.item.key);
+			if (!at) {
+				lives.current.set(row.item.key, {
+					y0: live(row.y0),
+					y1: live(row.y1),
+					l0: live(row.l0),
+					l1: live(row.l1)
+				});
+				continue;
+			}
+			retarget(at.y0, row.y0, MORPH, paint);
+			retarget(at.y1, row.y1, MORPH, paint);
+			retarget(at.l0, row.l0, MORPH, paint);
+			retarget(at.l1, row.l1, MORPH, paint);
+		}
+		paint();
+	}, [
+		signature,
+		paint,
+		ready
+	]);
+	useEffect(() => () => {
+		for (const at of lives.current.values()) for (const value of Object.values(at)) value.stop();
+	}, []);
+	const [drawn, setDrawn] = useState(false);
+	useEffect(() => {
+		const node = figure.current;
+		if (!node || prefersReducedMotion() || typeof IntersectionObserver === "undefined") {
+			setDrawn(true);
+			return;
+		}
+		const observer = new IntersectionObserver(([entry]) => {
+			if (!entry?.isIntersecting) return;
+			observer.disconnect();
+			setDrawn(true);
+		}, { threshold: .3 });
+		observer.observe(node);
+		return () => observer.disconnect();
+	}, []);
+	const [ownActive, setOwnActive] = useState(null);
+	const wanted = activeKey !== void 0 ? activeKey : ownActive;
+	const active = wanted && data.some((item) => item.key === wanted) ? wanted : null;
+	const setActive = (key) => {
+		if (activeKey === void 0) setOwnActive(key);
+		if (key !== active) onActiveChange?.(key);
+	};
+	const activeRow = rows.find((row) => row.item.key === active) ?? null;
+	const [shownKey, setShownKey] = useState(null);
+	if (active && active !== shownKey) setShownKey(active);
+	const tipRow = activeRow ?? rows.find((row) => row.item.key === shownKey) ?? null;
+	const shownBefore = useRef(false);
+	useIsomorphicLayoutEffect(() => {
+		const node = tip.current;
+		if (!activeRow || !node || !width) {
+			shownBefore.current = false;
+			return;
+		}
+		const tw = node.offsetWidth;
+		const th = node.offsetHeight;
+		const mid = (activeRow.y0 + activeRow.y1) / 2;
+		const above = mid - th - 16 >= 0;
+		const left = clamp((x0 + x1) / 2 - tw / 2, 0, Math.max(0, width - tw));
+		const top = clamp(HEAD + (above ? mid - th - 16 : mid + 16), 0, Math.max(0, plotHeight + HEAD - th));
+		if (!shownBefore.current) node.style.transition = "none";
+		node.style.translate = `${left}px ${top}px`;
+		if (!shownBefore.current) {
+			node.offsetWidth;
+			node.style.transition = "";
+		}
+		shownBefore.current = true;
+	});
+	const nearest = (clientX, clientY) => {
+		const rect = stage.current?.getBoundingClientRect();
+		if (!rect || empty) return null;
+		const px = clientX - rect.left;
+		const y = clientY - rect.top - HEAD;
+		const t = (clamp(px, x0, x1) - x0) / Math.max(1, x1 - x0);
+		let best = null;
+		let distance = Infinity;
+		for (const row of rows) {
+			const inLine = Math.abs(row.y0 + (row.y1 - row.y0) * t - y);
+			const onLabel = px < x0 ? Math.abs(row.l0 - y) : px > x1 ? Math.abs(row.l1 - y) : Infinity;
+			const d = Math.min(inLine, onLabel);
+			if (d < distance) {
+				distance = d;
+				best = row;
+			}
+		}
+		return distance <= 22 ? best?.item.key ?? null : null;
+	};
+	const onKeyDown = (event) => {
+		if (empty) return;
+		if (event.key === "Escape" && active) {
+			event.preventDefault();
+			setActive(null);
+			return;
+		}
+		const at = activeRow ? activeRow.order : -1;
+		const moves = {
+			ArrowDown: at + 1,
+			ArrowRight: at + 1,
+			ArrowUp: at < 0 ? 0 : at - 1,
+			ArrowLeft: at < 0 ? 0 : at - 1,
+			Home: 0,
+			End: byEnd.length - 1
+		};
+		if (!(event.key in moves)) return;
+		event.preventDefault();
+		setActive(byEnd[clamp(moves[event.key], 0, byEnd.length - 1)].item.key);
+	};
+	const format = (value) => formatValue ? formatValue(value) : GROUPED.format(value);
+	const change = (item) => formatChange ? formatChange(item.end - item.start, item) : `${item.end >= item.start ? "+" : "−"}${format(Math.abs(item.end - item.start))}`;
+	const rankText = (row) => row.rank0 === row.rank1 ? "same rank" : row.rank1 < row.rank0 ? `up ${row.rank0 - row.rank1} to rank ${row.rank1}` : `down ${row.rank1 - row.rank0} to rank ${row.rank1}`;
+	const describe = (row) => `${row.item.label}, ${startLabel} ${format(row.item.start)}, ${endLabel} ${format(row.item.end)}, ${change(row.item)}, ${rankText(row)}`;
+	const summary = empty ? `${label}. ${emptyLabel}.` : `${label}, ${startLabel} to ${endLabel}. ${byEnd.map((row) => `${row.item.label} ${format(row.item.start)} to ${format(row.item.end)}`).join(", ")}.`;
+	return /* @__PURE__ */ jsxs("figure", {
+		ref: refs,
+		"data-slot": "slope-chart",
+		"data-drawn": drawn || void 0,
+		"data-scrubbing": active !== null || void 0,
+		"aria-label": label,
+		className: cn("slope-chart box-border font-sans text-foreground", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				ref: stage,
+				"data-slot": "slope-chart-stage",
+				"data-narrow": narrow || void 0,
+				"data-active": active ? "" : void 0,
+				role: empty ? void 0 : "slider",
+				tabIndex: empty ? void 0 : 0,
+				"aria-label": empty ? void 0 : `${label}, explore items in ${endLabel} order`,
+				"aria-valuemin": empty ? void 0 : 1,
+				"aria-valuemax": empty ? void 0 : data.length,
+				"aria-valuenow": empty ? void 0 : (activeRow ? activeRow.order : 0) + 1,
+				"aria-valuetext": empty ? void 0 : activeRow ? describe(activeRow) : summary,
+				className: "slope-chart-stage",
+				onPointerMove: (event) => {
+					if (event.pointerType === "mouse" || event.buttons) setActive(nearest(event.clientX, event.clientY));
+				},
+				onPointerDown: (event) => {
+					if (event.pointerType === "mouse") return;
+					event.currentTarget.setPointerCapture?.(event.pointerId);
+					setActive(nearest(event.clientX, event.clientY));
+				},
+				onPointerUp: (event) => {
+					if (event.pointerType !== "mouse") setActive(null);
+				},
+				onPointerCancel: () => setActive(null),
+				onPointerLeave: (event) => {
+					if (event.pointerType === "mouse") setActive(null);
+				},
+				onKeyDown,
+				onBlur: () => setActive(null),
+				onFocus: (event) => {
+					if (event.currentTarget.matches(":focus-visible") && !empty && !active) setActive(byEnd[0].item.key);
+				},
+				children: [
+					ready && !empty ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
+						"aria-hidden": "true",
+						className: "relative h-7",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "slope-chart-column",
+							style: { left: x0 },
+							children: startLabel
+						}), /* @__PURE__ */ jsx("span", {
+							className: "slope-chart-column",
+							style: { left: x1 },
+							children: endLabel
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						ref: plot,
+						className: "relative",
+						style: { height: plotHeight },
+						children: [/* @__PURE__ */ jsxs("svg", {
+							width,
+							height: plotHeight,
+							"aria-hidden": "true",
+							focusable: "false",
+							className: "block overflow-visible",
+							children: [
+								/* @__PURE__ */ jsx("line", {
+									className: "slope-chart-axis",
+									x1: x0,
+									x2: x0,
+									y1: 0,
+									y2: plotHeight
+								}),
+								/* @__PURE__ */ jsx("line", {
+									className: "slope-chart-axis",
+									x1,
+									x2: x1,
+									y1: 0,
+									y2: plotHeight
+								}),
+								rows.map((row, i) => {
+									const key = row.item.key;
+									return /* @__PURE__ */ jsxs("g", {
+										"data-row": key,
+										"data-on": active === key || void 0,
+										"data-accent": highlightKey === key || void 0,
+										"data-dim": active !== null && active !== key || void 0,
+										className: "slope-chart-item motion-safe:animate-fade-in",
+										style: { "--delay": `${i * 50}ms` },
+										children: [
+											/* @__PURE__ */ jsx("path", {
+												"data-part": "lead0",
+												className: "slope-chart-leader",
+												d: `M${x0 - 6},${row.l0}L${x0 - 1},${row.y0}`
+											}),
+											/* @__PURE__ */ jsx("path", {
+												"data-part": "lead1",
+												className: "slope-chart-leader",
+												d: `M${x1 + 6},${row.l1}L${x1 + 1},${row.y1}`
+											}),
+											/* @__PURE__ */ jsx("line", {
+												"data-part": "line",
+												className: "slope-chart-line",
+												x1: x0,
+												x2: x1,
+												y1: row.y0,
+												y2: row.y1,
+												pathLength: 1
+											}),
+											/* @__PURE__ */ jsx("circle", {
+												"data-part": "dot0",
+												className: "slope-chart-dot",
+												cx: x0,
+												cy: row.y0,
+												r: 4
+											}),
+											/* @__PURE__ */ jsx("circle", {
+												"data-part": "dot1",
+												"data-end": "",
+												className: "slope-chart-dot",
+												cx: x1,
+												cy: row.y1,
+												r: 4
+											})
+										]
+									}, key);
+								})
+							]
+						}), rows.map((row, i) => {
+							const key = row.item.key;
+							const props = {
+								"data-label": key,
+								"data-on": active === key || void 0,
+								"data-accent": highlightKey === key || void 0,
+								className: "slope-chart-label"
+							};
+							const delay = { "--delay": `${i * 50}ms` };
+							return /* @__PURE__ */ jsxs("div", {
+								"aria-hidden": "true",
+								children: [/* @__PURE__ */ jsxs("span", {
+									...props,
+									"data-side": "start",
+									style: {
+										...delay,
+										right: width - x0 + 10,
+										maxWidth: x0 - 10
+									},
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "slope-chart-name",
+										children: row.item.label
+									}), /* @__PURE__ */ jsx("span", {
+										className: "slope-chart-value",
+										children: format(row.item.start)
+									})]
+								}), /* @__PURE__ */ jsxs("span", {
+									...props,
+									"data-side": "end",
+									style: {
+										...delay,
+										left: x1 + 10
+									},
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "slope-chart-value",
+										children: format(row.item.end)
+									}), ranks ? /* @__PURE__ */ jsx(Rank, { move: row.rank0 - row.rank1 }) : null]
+								})]
+							}, key);
+						})]
+					})] }) : null,
+					/* @__PURE__ */ jsxs("div", {
+						ref: tip,
+						"aria-hidden": "true",
+						"data-slot": "slope-chart-tooltip",
+						className: "line-chart-tooltip",
+						children: [
+							/* @__PURE__ */ jsx("p", {
+								className: "m-0 mb-0.5 whitespace-nowrap text-sm font-medium",
+								children: tipRow?.item.label ?? ""
+							}),
+							/* @__PURE__ */ jsxs("p", {
+								className: "m-0 flex items-center justify-between gap-3 text-sm",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-text-secondary",
+									children: startLabel
+								}), /* @__PURE__ */ jsx("span", {
+									className: "font-medium tabular-nums",
+									children: tipRow ? format(tipRow.item.start) : ""
+								})]
+							}),
+							/* @__PURE__ */ jsxs("p", {
+								className: "m-0 flex items-center justify-between gap-3 text-sm",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "text-text-secondary",
+									children: endLabel
+								}), /* @__PURE__ */ jsx("span", {
+									className: "font-medium tabular-nums",
+									children: tipRow ? format(tipRow.item.end) : ""
+								})]
+							}),
+							/* @__PURE__ */ jsx("p", {
+								className: "m-0 mt-0.5 text-xs tabular-nums text-muted-foreground",
+								children: tipRow ? `${change(tipRow.item)}, ${rankText(tipRow)}` : ""
+							})
+						]
+					}),
+					empty ? /* @__PURE__ */ jsx("p", {
+						className: "m-0 grid min-h-40 place-items-center text-sm text-muted-foreground",
+						children: emptyLabel
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "sr-only",
+				children: summary
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "sr-only",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: activeRow ? describe(activeRow) : ""
+			}),
+			empty ? null : /* @__PURE__ */ jsx("div", {
+				className: "sr-only",
+				children: /* @__PURE__ */ jsxs("table", { children: [
+					/* @__PURE__ */ jsx("caption", { children: label }),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Item"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: startLabel
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: endLabel
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Change"
+						}),
+						/* @__PURE__ */ jsx("th", {
+							scope: "col",
+							children: "Rank"
+						})
+					] }) }),
+					/* @__PURE__ */ jsx("tbody", { children: byEnd.map((row) => /* @__PURE__ */ jsxs("tr", { children: [
+						/* @__PURE__ */ jsx("th", {
+							scope: "row",
+							children: row.item.label
+						}),
+						/* @__PURE__ */ jsx("td", { children: format(row.item.start) }),
+						/* @__PURE__ */ jsx("td", { children: format(row.item.end) }),
+						/* @__PURE__ */ jsx("td", { children: change(row.item) }),
+						/* @__PURE__ */ jsxs("td", { children: [
+							row.rank0,
+							" to ",
+							row.rank1
+						] })
+					] }, row.item.key)) })
+				] })
+			})
+		]
+	});
+});
+//#endregion
+export { SlopeChart };
+
+//# sourceMappingURL=slope-chart.js.map

package/dist/slope-chart/slope-chart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slope-chart.js","names":[],"sources":["../../src/slope-chart/slope-chart.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type KeyboardEvent,\n  type PointerEvent,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { prefersReducedMotion, useIsomorphicLayoutEffect } from \"../lib/motion.js\";\nimport { live, MORPH, retarget, type Live } from \"../lib/spring-tween.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\n/**\n * SlopeChart: how several items changed between exactly two moments, and how\n * their order changed. Each item is one line from its first value to its second\n * on a shared axis, with its name and value at each end and the change in rank\n * beside the second value.\n *\n * The lines draw left to right once the chart is in view (a beat apart), the end\n * dots land as each pen arrives, and the labels fade in behind them. New data\n * moves every line, dot, leader and label from where it is on screen. Hovering,\n * touching or the arrow keys bring one item forward, fade the others' lines and\n * show its numbers; the arrow keys walk the items in the second period's order.\n *\n * Plain SVG written straight to the DOM by one small spring tween; labels are\n * real text (they truncate), so they sit beside the SVG and move with it.\n */\nexport interface SlopeItem {\n  /** Stable identity. An item keeps its line across datasets, so switching morphs it. */\n  key: string;\n  /** Name beside the start value, in the tooltip and in the table. */\n  label: string;\n  /** Value in the first period. */\n  start: number;\n  /** Value in the second period. */\n  end: number;\n}\n\nexport interface SlopeChartProps {\n  data: SlopeItem[];\n  /** What is measured, such as \"Conversion rate by channel\". Names the chart for assistive technology. */\n  label: string;\n  /** Heading of the first column, such as \"Q1\". */\n  startLabel: string;\n  /** Heading of the second column, such as \"Q2\". */\n  endLabel: string;\n  formatValue?: (value: number) => string;\n  /** Formats the change in the tooltip. Defaults to the difference, in formatValue's terms. */\n  formatChange?: (change: number, item: SlopeItem) => string;\n  /** Plot height in pixels. Defaults to 44 pixels per item, and at least 200. */\n  height?: number;\n  /** The item drawn in the accent, such as the one the story is about. */\n  highlightKey?: string | null;\n  /** Controlled item in focus. The others' lines fade while one is in focus. */\n  activeKey?: string | null;\n  onActiveChange?: (key: string | null) => void;\n  /** Rank movement beside each end value. @default true */\n  ranks?: boolean;\n  /** @default \"No data\" */\n  emptyLabel?: string;\n  /** Extra classes for the root. Merged last. */\n  className?: string;\n}\n\ntype Row = { item: SlopeItem; y0: number; y1: number; l0: number; l1: number; rank0: number; rank1: number; order: number };\ntype RowLive = { y0: Live; y1: Live; l0: Live; l1: Live };\n\n/** Space between labels, around the plot (so dots never touch an edge) and for the column headings, in pixels. */\nconst LABEL_GAP = 20;\nconst PAD = 14;\nconst HEAD = 28;\nconst clamp = (value: number, low: number, high: number) => Math.min(high, Math.max(low, value));\nconst GROUPED = new Intl.NumberFormat(\"en-US\", { maximumFractionDigits: 1 });\n\n/** Moves labels apart just enough to stop overlaps: touching labels form a group centred on where its members want to be. */\nfunction spread(wanted: number[], gap: number, low: number, high: number): number[] {\n  const order = wanted.map((y, index) => ({ y, index })).sort((a, b) => a.y - b.y);\n  let groups = order.map((entry) => ({ members: [entry], top: entry.y }));\n  for (let changed = true; changed; ) {\n    changed = false;\n    const next: typeof groups = [];\n    for (const group of groups) {\n      const prev = next[next.length - 1];\n      if (prev && prev.top + prev.members.length * gap > group.top) {\n        const members = [...prev.members, ...group.members];\n        next[next.length - 1] = { members, top: members.reduce((sum, member, k) => sum + member.y - k * gap, 0) / members.length };\n        changed = true;\n      } else next.push(group);\n    }\n    groups = next.map((group) => ({ ...group, top: clamp(group.top, low, Math.max(low, high - (group.members.length - 1) * gap)) }));\n  }\n  const out = new Array<number>(wanted.length);\n  groups.forEach((group) => group.members.forEach((member, k) => (out[member.index] = group.top + k * gap)));\n  return out;\n}\n\n/** Rank change: an arrow and the number of places, or \"=\" when level. The number rises or drops in when it changes. */\nfunction Rank({ move }: { move: number }) {\n  const text = move === 0 ? \"=\" : `${Math.abs(move)}`;\n  return (\n    <span data-move={move > 0 ? \"up\" : move < 0 ? \"down\" : \"level\"} aria-hidden=\"true\" className=\"slope-chart-rank\">\n      {move !== 0 ? (\n        <svg width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.3\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n          <path d={move > 0 ? \"M4 7V1M1.5 3.5 4 1l2.5 2.5\" : \"M4 1v6M1.5 4.5 4 7l2.5-2.5\"} />\n        </svg>\n      ) : null}\n      <SwapText swapKey={text} dir={move >= 0 ? 1 : -1} motion=\"rise\">\n        {text}\n      </SwapText>\n    </span>\n  );\n}\n\nexport const SlopeChart = forwardRef<HTMLElement, SlopeChartProps>(function SlopeChart(\n  {\n    data,\n    label,\n    startLabel,\n    endLabel,\n    formatValue,\n    formatChange,\n    height,\n    highlightKey = null,\n    activeKey,\n    onActiveChange,\n    ranks = true,\n    emptyLabel = \"No data\",\n    className,\n  },\n  ref,\n) {\n  const figure = useRef<HTMLElement | null>(null);\n  const refs = useMemo(() => mergeRefs(ref, figure), [ref]);\n  const stage = useRef<HTMLDivElement>(null);\n  const plot = useRef<HTMLDivElement>(null);\n  const tip = useRef<HTMLDivElement>(null);\n  const empty = data.length === 0;\n  const plotHeight = height ?? Math.max(200, data.length * 44);\n\n  const [width, setWidth] = useState(0);\n  useIsomorphicLayoutEffect(() => {\n    const node = stage.current;\n    if (!node) return;\n    const read = () => setWidth(node.clientWidth);\n    read();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(read);\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n  const ready = width > 0;\n  const narrow = width < 440;\n  const leftRoom = narrow ? (width < 300 ? 116 : 132) : 168;\n  const rightRoom = ranks ? (narrow ? 76 : 96) : narrow ? 52 : 64;\n  const x0 = leftRoom;\n  const x1 = Math.max(x0 + 40, width - rightRoom);\n\n  // One shared value axis for both columns.\n  const values = data.flatMap((item) => [item.start, item.end]);\n  let lo = Math.min(...values);\n  let hi = Math.max(...values);\n  if (!Number.isFinite(lo)) {\n    lo = 0;\n    hi = 1;\n  }\n  if (hi - lo < 1e-9) {\n    lo -= 1;\n    hi += 1;\n  }\n  const yOf = (value: number) => PAD + (1 - (value - lo) / (hi - lo)) * (plotHeight - PAD * 2);\n  const rankOf = (field: \"start\" | \"end\") => {\n    const sorted = [...data].sort((a, b) => b[field] - a[field]);\n    return (item: SlopeItem) => sorted.indexOf(item) + 1;\n  };\n  const r0 = rankOf(\"start\");\n  const r1 = rankOf(\"end\");\n  const l0 = spread(data.map((item) => yOf(item.start)), LABEL_GAP, 8, plotHeight - 8);\n  const l1 = spread(data.map((item) => yOf(item.end)), LABEL_GAP, 8, plotHeight - 8);\n  const rows: Row[] = data.map((item, i) => ({\n    item,\n    y0: yOf(item.start),\n    y1: yOf(item.end),\n    l0: l0[i]!,\n    l1: l1[i]!,\n    rank0: r0(item),\n    rank1: r1(item),\n    order: 0,\n  }));\n  const byEnd = [...rows].sort((a, b) => a.rank1 - b.rank1);\n  byEnd.forEach((row, k) => {\n    row.order = k;\n  });\n\n  // The chart draws in its own pixels; the lives hold each row's four heights, moved by one spring and written by paint().\n  const lives = useRef(new Map<string, RowLive>());\n  const box = useRef({ x0, x1 });\n  const paint = useCallback(() => {\n    const root = plot.current;\n    if (!root) return;\n    const { x0, x1 } = box.current;\n    for (const node of root.querySelectorAll<SVGGElement>(\"[data-row]\")) {\n      const at = lives.current.get(node.dataset.row!);\n      if (!at) continue;\n      const line = node.querySelector(\"[data-part=line]\");\n      line?.setAttribute(\"y1\", String(at.y0.value));\n      line?.setAttribute(\"y2\", String(at.y1.value));\n      node.querySelector(\"[data-part=dot0]\")?.setAttribute(\"cy\", String(at.y0.value));\n      node.querySelector(\"[data-part=dot1]\")?.setAttribute(\"cy\", String(at.y1.value));\n      node.querySelector(\"[data-part=lead0]\")?.setAttribute(\"d\", `M${x0 - 6},${at.l0.value}L${x0 - 1},${at.y0.value}`);\n      node.querySelector(\"[data-part=lead1]\")?.setAttribute(\"d\", `M${x1 + 6},${at.l1.value}L${x1 + 1},${at.y1.value}`);\n    }\n    for (const node of root.querySelectorAll<HTMLElement>(\"[data-label]\")) {\n      const at = lives.current.get(node.dataset.label!);\n      if (at) node.style.translate = `0 ${node.dataset.side === \"end\" ? at.l1.value : at.l0.value}px`;\n    }\n  }, []);\n  useIsomorphicLayoutEffect(() => {\n    box.current = { x0, x1 };\n    paint();\n  });\n\n  // New data moves every line, dot, leader and label from wherever it is on screen; a new item starts where it belongs.\n  const signature = rows.map((row) => [row.item.key, row.y0, row.y1, row.l0, row.l1].map((part) => (typeof part === \"number\" ? Math.round(part * 100) : part)).join(\":\")).join(\"|\");\n  const latest = useRef(rows);\n  useIsomorphicLayoutEffect(() => {\n    latest.current = rows;\n  });\n  useIsomorphicLayoutEffect(() => {\n    const current = latest.current;\n    const keys = new Set(current.map((row) => row.item.key));\n    for (const key of [...lives.current.keys()]) {\n      if (keys.has(key)) continue;\n      const gone = lives.current.get(key)!;\n      for (const value of Object.values(gone)) value.stop();\n      lives.current.delete(key);\n    }\n    for (const row of current) {\n      const at = lives.current.get(row.item.key);\n      if (!at) {\n        lives.current.set(row.item.key, { y0: live(row.y0), y1: live(row.y1), l0: live(row.l0), l1: live(row.l1) });\n        continue;\n      }\n      retarget(at.y0, row.y0, MORPH, paint);\n      retarget(at.y1, row.y1, MORPH, paint);\n      retarget(at.l0, row.l0, MORPH, paint);\n      retarget(at.l1, row.l1, MORPH, paint);\n    }\n    paint();\n    // The signature stands for the rows; ready is the first width.\n     \n  }, [signature, paint, ready]);\n  useEffect(\n    () => () => {\n      for (const at of lives.current.values()) for (const value of Object.values(at)) value.stop();\n    },\n    [],\n  );\n\n  // The lines draw once a third of the chart is in view.\n  const [drawn, setDrawn] = useState(false);\n  useEffect(() => {\n    const node = figure.current;\n    if (!node || prefersReducedMotion() || typeof IntersectionObserver === \"undefined\") {\n      setDrawn(true);\n      return;\n    }\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (!entry?.isIntersecting) return;\n        observer.disconnect();\n        setDrawn(true);\n      },\n      { threshold: 0.3 },\n    );\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, []);\n\n  const [ownActive, setOwnActive] = useState<string | null>(null);\n  const wanted = activeKey !== undefined ? activeKey : ownActive;\n  const active = wanted && data.some((item) => item.key === wanted) ? wanted : null;\n  const setActive = (key: string | null) => {\n    if (activeKey === undefined) setOwnActive(key);\n    if (key !== active) onActiveChange?.(key);\n  };\n  const activeRow = rows.find((row) => row.item.key === active) ?? null;\n  // The tooltip keeps the last item's content while it fades out, so it never collapses to an empty box mid-fade.\n  const [shownKey, setShownKey] = useState<string | null>(null);\n  if (active && active !== shownKey) setShownKey(active);\n  const tipRow = activeRow ?? rows.find((row) => row.item.key === shownKey) ?? null;\n\n  // The tooltip sits over the middle of the line in focus and stays inside the chart; it glides between items once showing.\n  const shownBefore = useRef(false);\n  useIsomorphicLayoutEffect(() => {\n    const node = tip.current;\n    if (!activeRow || !node || !width) {\n      shownBefore.current = false;\n      return;\n    }\n    const tw = node.offsetWidth;\n    const th = node.offsetHeight;\n    const mid = (activeRow.y0 + activeRow.y1) / 2;\n    const above = mid - th - 16 >= 0;\n    const left = clamp((x0 + x1) / 2 - tw / 2, 0, Math.max(0, width - tw));\n    const top = clamp(HEAD + (above ? mid - th - 16 : mid + 16), 0, Math.max(0, plotHeight + HEAD - th));\n    if (!shownBefore.current) node.style.transition = \"none\";\n    node.style.translate = `${left}px ${top}px`;\n    if (!shownBefore.current) {\n      void node.offsetWidth;\n      node.style.transition = \"\";\n    }\n    shownBefore.current = true;\n  });\n\n  // The line nearest the pointer, measured at the pointer's position along the plot; a label counts as its end of the line.\n  const nearest = (clientX: number, clientY: number) => {\n    const rect = stage.current?.getBoundingClientRect();\n    if (!rect || empty) return null;\n    const px = clientX - rect.left;\n    const y = clientY - rect.top - HEAD;\n    const t = (clamp(px, x0, x1) - x0) / Math.max(1, x1 - x0);\n    let best: Row | null = null;\n    let distance = Infinity;\n    for (const row of rows) {\n      const inLine = Math.abs(row.y0 + (row.y1 - row.y0) * t - y);\n      const onLabel = px < x0 ? Math.abs(row.l0 - y) : px > x1 ? Math.abs(row.l1 - y) : Infinity;\n      const d = Math.min(inLine, onLabel);\n      if (d < distance) {\n        distance = d;\n        best = row;\n      }\n    }\n    return distance <= 22 ? (best?.item.key ?? null) : null;\n  };\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (empty) return;\n    if (event.key === \"Escape\" && active) {\n      event.preventDefault();\n      setActive(null);\n      return;\n    }\n    const at = activeRow ? activeRow.order : -1;\n    const moves: Record<string, number> = {\n      ArrowDown: at + 1,\n      ArrowRight: at + 1,\n      ArrowUp: at < 0 ? 0 : at - 1,\n      ArrowLeft: at < 0 ? 0 : at - 1,\n      Home: 0,\n      End: byEnd.length - 1,\n    };\n    if (!(event.key in moves)) return;\n    event.preventDefault();\n    setActive(byEnd[clamp(moves[event.key]!, 0, byEnd.length - 1)]!.item.key);\n  };\n\n  const format = (value: number) => (formatValue ? formatValue(value) : GROUPED.format(value));\n  const change = (item: SlopeItem) =>\n    formatChange ? formatChange(item.end - item.start, item) : `${item.end >= item.start ? \"+\" : \"−\"}${format(Math.abs(item.end - item.start))}`;\n  const rankText = (row: Row) =>\n    row.rank0 === row.rank1 ? \"same rank\" : row.rank1 < row.rank0 ? `up ${row.rank0 - row.rank1} to rank ${row.rank1}` : `down ${row.rank1 - row.rank0} to rank ${row.rank1}`;\n  const describe = (row: Row) => `${row.item.label}, ${startLabel} ${format(row.item.start)}, ${endLabel} ${format(row.item.end)}, ${change(row.item)}, ${rankText(row)}`;\n  const summary = empty\n    ? `${label}. ${emptyLabel}.`\n    : `${label}, ${startLabel} to ${endLabel}. ${byEnd.map((row) => `${row.item.label} ${format(row.item.start)} to ${format(row.item.end)}`).join(\", \")}.`;\n\n  return (\n    <figure\n      ref={refs}\n      data-slot=\"slope-chart\"\n      data-drawn={drawn || undefined}\n      data-scrubbing={active !== null || undefined}\n      aria-label={label}\n      className={cn(\"slope-chart box-border font-sans text-foreground\", className)}\n    >\n      <div\n        ref={stage}\n        data-slot=\"slope-chart-stage\"\n        data-narrow={narrow || undefined}\n        data-active={active ? \"\" : undefined}\n        role={empty ? undefined : \"slider\"}\n        tabIndex={empty ? undefined : 0}\n        aria-label={empty ? undefined : `${label}, explore items in ${endLabel} order`}\n        aria-valuemin={empty ? undefined : 1}\n        aria-valuemax={empty ? undefined : data.length}\n        aria-valuenow={empty ? undefined : (activeRow ? activeRow.order : 0) + 1}\n        aria-valuetext={empty ? undefined : activeRow ? describe(activeRow) : summary}\n        className=\"slope-chart-stage\"\n        onPointerMove={(event: PointerEvent<HTMLDivElement>) => {\n          if (event.pointerType === \"mouse\" || event.buttons) setActive(nearest(event.clientX, event.clientY));\n        }}\n        onPointerDown={(event: PointerEvent<HTMLDivElement>) => {\n          if (event.pointerType === \"mouse\") return;\n          event.currentTarget.setPointerCapture?.(event.pointerId);\n          setActive(nearest(event.clientX, event.clientY));\n        }}\n        onPointerUp={(event) => {\n          if (event.pointerType !== \"mouse\") setActive(null);\n        }}\n        onPointerCancel={() => setActive(null)}\n        onPointerLeave={(event) => {\n          if (event.pointerType === \"mouse\") setActive(null);\n        }}\n        onKeyDown={onKeyDown}\n        onBlur={() => setActive(null)}\n        onFocus={(event) => {\n          if (event.currentTarget.matches(\":focus-visible\") && !empty && !active) setActive(byEnd[0]!.item.key);\n        }}\n      >\n        {ready && !empty ? (\n          <>\n            <div aria-hidden=\"true\" className=\"relative h-7\">\n              <span className=\"slope-chart-column\" style={{ left: x0 }}>\n                {startLabel}\n              </span>\n              <span className=\"slope-chart-column\" style={{ left: x1 }}>\n                {endLabel}\n              </span>\n            </div>\n            <div ref={plot} className=\"relative\" style={{ height: plotHeight }}>\n              <svg width={width} height={plotHeight} aria-hidden=\"true\" focusable=\"false\" className=\"block overflow-visible\">\n                <line className=\"slope-chart-axis\" x1={x0} x2={x0} y1={0} y2={plotHeight} />\n                <line className=\"slope-chart-axis\" x1={x1} x2={x1} y1={0} y2={plotHeight} />\n                {rows.map((row, i) => {\n                  const key = row.item.key;\n                  return (\n                    <g\n                      key={key}\n                      data-row={key}\n                      data-on={active === key || undefined}\n                      data-accent={highlightKey === key || undefined}\n                      data-dim={(active !== null && active !== key) || undefined}\n                      className=\"slope-chart-item motion-safe:animate-fade-in\"\n                      style={{ \"--delay\": `${i * 50}ms` } as CSSProperties}\n                    >\n                      <path data-part=\"lead0\" className=\"slope-chart-leader\" d={`M${x0 - 6},${row.l0}L${x0 - 1},${row.y0}`} />\n                      <path data-part=\"lead1\" className=\"slope-chart-leader\" d={`M${x1 + 6},${row.l1}L${x1 + 1},${row.y1}`} />\n                      <line data-part=\"line\" className=\"slope-chart-line\" x1={x0} x2={x1} y1={row.y0} y2={row.y1} pathLength={1} />\n                      <circle data-part=\"dot0\" className=\"slope-chart-dot\" cx={x0} cy={row.y0} r={4} />\n                      <circle data-part=\"dot1\" data-end=\"\" className=\"slope-chart-dot\" cx={x1} cy={row.y1} r={4} />\n                    </g>\n                  );\n                })}\n              </svg>\n              {rows.map((row, i) => {\n                const key = row.item.key;\n                const props = {\n                  \"data-label\": key,\n                  \"data-on\": active === key || undefined,\n                  \"data-accent\": highlightKey === key || undefined,\n                  className: \"slope-chart-label\",\n                };\n                const delay = { \"--delay\": `${i * 50}ms` };\n                return (\n                  <div key={key} aria-hidden=\"true\">\n                    <span {...props} data-side=\"start\" style={{ ...delay, right: width - x0 + 10, maxWidth: x0 - 10 }}>\n                      <span className=\"slope-chart-name\">{row.item.label}</span>\n                      <span className=\"slope-chart-value\">{format(row.item.start)}</span>\n                    </span>\n                    <span {...props} data-side=\"end\" style={{ ...delay, left: x1 + 10 }}>\n                      <span className=\"slope-chart-value\">{format(row.item.end)}</span>\n                      {ranks ? <Rank move={row.rank0 - row.rank1} /> : null}\n                    </span>\n                  </div>\n                );\n              })}\n            </div>\n          </>\n        ) : null}\n        <div ref={tip} aria-hidden=\"true\" data-slot=\"slope-chart-tooltip\" className=\"line-chart-tooltip\">\n          <p className=\"m-0 mb-0.5 whitespace-nowrap text-sm font-medium\">{tipRow?.item.label ?? \"\"}</p>\n          <p className=\"m-0 flex items-center justify-between gap-3 text-sm\">\n            <span className=\"text-text-secondary\">{startLabel}</span>\n            <span className=\"font-medium tabular-nums\">{tipRow ? format(tipRow.item.start) : \"\"}</span>\n          </p>\n          <p className=\"m-0 flex items-center justify-between gap-3 text-sm\">\n            <span className=\"text-text-secondary\">{endLabel}</span>\n            <span className=\"font-medium tabular-nums\">{tipRow ? format(tipRow.item.end) : \"\"}</span>\n          </p>\n          <p className=\"m-0 mt-0.5 text-xs tabular-nums text-muted-foreground\">{tipRow ? `${change(tipRow.item)}, ${rankText(tipRow)}` : \"\"}</p>\n        </div>\n        {empty ? <p className=\"m-0 grid min-h-40 place-items-center text-sm text-muted-foreground\">{emptyLabel}</p> : null}\n      </div>\n      <p className=\"sr-only\">{summary}</p>\n      <p className=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n        {activeRow ? describe(activeRow) : \"\"}\n      </p>\n      {empty ? null : (\n        <div className=\"sr-only\">\n          <table>\n            <caption>{label}</caption>\n            <thead>\n              <tr>\n                <th scope=\"col\">Item</th>\n                <th scope=\"col\">{startLabel}</th>\n                <th scope=\"col\">{endLabel}</th>\n                <th scope=\"col\">Change</th>\n                <th scope=\"col\">Rank</th>\n              </tr>\n            </thead>\n            <tbody>\n              {byEnd.map((row) => (\n                <tr key={row.item.key}>\n                  <th scope=\"row\">{row.item.label}</th>\n                  <td>{format(row.item.start)}</td>\n                  <td>{format(row.item.end)}</td>\n                  <td>{change(row.item)}</td>\n                  <td>\n                    {row.rank0} to {row.rank1}\n                  </td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </div>\n      )}\n    </figure>\n  );\n});\n"],"mappings":"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"}

package/dist/sparkline/index.d.ts

@@ -0,0 +1,2 @@
+import { SPARKLINE_DRAW_MS, Sparkline, SparklineProps, SparklineTone, sparklineVariants } from "./sparkline.js";
+export { SPARKLINE_DRAW_MS, Sparkline, type SparklineProps, type SparklineTone, sparklineVariants };

package/dist/sparkline/index.js

@@ -0,0 +1,2 @@
+import { SPARKLINE_DRAW_MS, Sparkline, sparklineVariants } from "./sparkline.js";
+export { SPARKLINE_DRAW_MS, Sparkline, sparklineVariants };