@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/slope-chart/slope-chart.js

@@ -0,0 +1,183 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { AnimatePresence, motion, useInView, useMotionValue, useReducedMotion, useSpring } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./slope-chart.module.css";
+const { spring } = motionTokens;
+const follow = { stiffness: 480, damping: 42, restDelta: .01 };
+const LABEL_GAP = 20, PAD = 14, HEAD = 28;
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+const grouped = new Intl.NumberFormat("en-US", { maximumFractionDigits: 1 });
+const subscribeNothing = () => () => { };
+function useReducedMotionSafe() {
+    const hydrated = useSyncExternalStore(subscribeNothing, () => true, () => false);
+    return !!useReducedMotion() && hydrated;
+}
+/** 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) {
+    const order = wanted.map((y, index) => ({ y, index })).sort((a, b) => a.y - b.y);
+    let groups = order.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 arrow: up, down, or level. The number rolls in when it changes. */
+function Rank({ move, reduced }) {
+    const text = move === 0 ? "=" : `${Math.abs(move)}`;
+    return _jsxs("span", { className: styles.rank, "data-move": move > 0 ? "up" : move < 0 ? "down" : "level", "aria-hidden": "true", children: [move !== 0 && _jsx("svg", { width: "8", height: "8", viewBox: "0 0 8 8", children: _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", fill: "none", stroke: "currentColor", strokeWidth: "1.3", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("span", { className: styles.rankSwap, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(motion.span, { initial: reduced ? { opacity: 0 } : { opacity: 0, y: move >= 0 ? 6 : -6 }, animate: { opacity: 1, y: 0 }, exit: reduced ? { opacity: 0 } : { opacity: 0, y: move >= 0 ? -6 : 6 }, transition: reduced ? { duration: 0 } : spring.snappy, children: text }, text) }) })] });
+}
+export function SlopeChart({ data, label, startLabel, endLabel, formatValue, formatChange, height, highlightKey = null, activeKey, onActiveChange, ranks = true, emptyLabel = "No data", ref, className }) {
+    const reduced = useReducedMotionSafe();
+    const figure = useRef(null);
+    const stage = useRef(null);
+    const tip = useRef(null);
+    useImperativeHandle(ref, () => figure.current);
+    const inView = useInView(figure, { once: true, amount: .3 });
+    const empty = data.length === 0;
+    const plotHeight = height ?? Math.max(200, data.length * 44);
+    const [width, setWidth] = useState(0);
+    useLayoutEffect(() => {
+        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 narrow = width < 440;
+    const leftRoom = narrow ? (width < 300 ? 116 : 132) : 168, rightRoom = ranks ? (narrow ? 76 : 96) : (narrow ? 52 : 64);
+    const x0 = leftRoom, x1 = Math.max(x0 + 40, width - rightRoom);
+    // One shared value axis for both columns, padded so dots never touch the edges.
+    const values = data.flatMap(item => [item.start, item.end]);
+    let lo = Math.min(...values), 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 - PAD * 2);
+    const rankOf = (field) => { const sorted = [...data].sort((a, b) => b[field] - a[field]); return (item) => sorted.indexOf(item) + 1; };
+    const r0 = rankOf("start"), 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 [ownActive, setOwnActive] = useState(null);
+    const wanted = activeKey !== undefined ? activeKey : ownActive;
+    const active = wanted && data.some(item => item.key === wanted) ? wanted : null;
+    const setActive = (key) => { if (activeKey === undefined)
+        setOwnActive(key); if (key !== active)
+        onActiveChange?.(key); };
+    // The tooltip glides to the middle of the line in focus and stays inside the chart.
+    const tipX = useMotionValue(0), tipY = useMotionValue(0);
+    const tipSpringX = useSpring(tipX, follow), tipSpringY = useSpring(tipY, follow);
+    const wasShown = useRef(false);
+    const activeRow = rows.find(row => row.item.key === active) ?? null;
+    // The tooltip keeps the last item's content while it fades out, so it never collapses to an empty box mid-fade.
+    const [shownKey, setShownKey] = useState(null);
+    if (active && active !== shownKey)
+        setShownKey(active);
+    const tipRow = activeRow ?? rows.find(row => row.item.key === shownKey) ?? null;
+    useLayoutEffect(() => {
+        const bubble = tip.current;
+        if (!activeRow || !bubble || !width) {
+            wasShown.current = false;
+            return;
+        }
+        const tw = bubble.offsetWidth, th = bubble.offsetHeight;
+        const mid = (activeRow.y0 + activeRow.y1) / 2, cx = (x0 + x1) / 2;
+        const above = mid - th - 16 >= 0;
+        const left = clamp(cx - 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));
+        tipX.set(left);
+        tipY.set(top);
+        if (!wasShown.current || reduced) {
+            tipSpringX.jump(left);
+            tipSpringY.jump(top);
+        }
+        wasShown.current = true;
+    });
+    // The line nearest the pointer, measured at the pointer's position along the plot.
+    const nearest = (clientX, clientY) => {
+        const rect = stage.current?.getBoundingClientRect();
+        if (!rect || empty)
+            return null;
+        const x = clamp(clientX - rect.left, x0, x1), y = clientY - rect.top - HEAD;
+        const t = (x - x0) / Math.max(1, x1 - x0);
+        let best = null, distance = Infinity;
+        for (const row of rows) {
+            const inLine = Math.abs(row.y0 + (row.y1 - row.y0) * t - y);
+            const onLabel = clientX - rect.left < x0 ? Math.abs(row.l0 - y) : clientX - rect.left > 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 onPointerMove = (event) => { if (event.pointerType === "mouse" || event.buttons)
+        setActive(nearest(event.clientX, event.clientY)); };
+    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 announce = activeRow ? `${activeRow.item.label}, ${startLabel} ${format(activeRow.item.start)}, ${endLabel} ${format(activeRow.item.end)}, ${change(activeRow.item)}, ${rankText(activeRow)}` : "";
+    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(", ")}.`;
+    const settle = reduced ? { duration: 0 } : spring.morph;
+    const drawn = inView || reduced;
+    return _jsxs("figure", { ref: figure, className: [styles.figure, className].filter(Boolean).join(" "), "aria-label": label, children: [_jsxs("div", { ref: stage, className: styles.stage, "data-narrow": narrow || undefined, "data-active": active ? true : undefined, role: "group", tabIndex: empty ? -1 : 0, "aria-roledescription": "slope chart", "aria-label": `${label}. Use up and down arrows to move between items in ${endLabel} order.`, onPointerMove: onPointerMove, onPointerDown: event => { if (event.pointerType !== "mouse") {
+                    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: onKeyDown, onBlur: () => setActive(null), onFocus: event => { if (event.currentTarget.matches(":focus-visible") && !empty && !active)
+                    setActive(byEnd[0].item.key); }, children: [width > 0 && _jsxs(_Fragment, { children: [_jsxs("div", { className: styles.columns, "aria-hidden": "true", children: [_jsx("span", { className: styles.column, style: { left: x0, translate: "-50% 0" }, children: startLabel }), _jsx("span", { className: styles.column, style: { left: x1, translate: "-50% 0" }, children: endLabel })] }), _jsxs("div", { className: styles.plot, style: { height: plotHeight }, children: [_jsxs("svg", { className: styles.svg, width: width, height: plotHeight, "aria-hidden": "true", focusable: "false", children: [_jsx("line", { className: styles.axis, x1: x0, x2: x0, y1: 0, y2: plotHeight }), _jsx("line", { className: styles.axis, x1: x1, x2: x1, y1: 0, y2: plotHeight }), rows.map((row, i) => {
+                                                const key = row.item.key, on = active === key, accent = highlightKey === key;
+                                                const delay = reduced ? 0 : i * .05;
+                                                return _jsxs("g", { className: styles.item, "data-on": on || undefined, "data-accent": accent || undefined, "data-dim": (active !== null && !on) || undefined, children: [_jsx(motion.path, { className: styles.leader, initial: false, animate: { d: `M${x0 - 6},${row.l0}L${x0 - 1},${row.y0}` }, transition: settle }), _jsx(motion.path, { className: styles.leader, initial: false, animate: { d: `M${x1 + 6},${row.l1}L${x1 + 1},${row.y1}` }, transition: settle }), _jsx(motion.line, { className: styles.line, x1: x0, x2: x1, initial: reduced ? false : { y1: row.y0, y2: row.y1, pathLength: 0 }, animate: { y1: row.y0, y2: row.y1, pathLength: drawn ? 1 : 0 }, transition: { y1: settle, y2: settle, pathLength: reduced ? { duration: 0 } : { duration: .7, ease: motionTokens.ease.inOut, delay: .1 + delay } } }), _jsx(motion.circle, { className: styles.dot, cx: x0, r: 4, initial: reduced ? false : { cy: row.y0, scale: 0 }, animate: { cy: row.y0, scale: drawn ? 1 : 0 }, transition: { cy: settle, scale: reduced ? { duration: 0 } : { ...spring.snappy, delay } } }), _jsx(motion.circle, { className: styles.dot, cx: x1, r: 4, initial: reduced ? false : { cy: row.y1, scale: 0 }, animate: { cy: row.y1, scale: drawn ? 1 : 0 }, transition: { cy: settle, scale: reduced ? { duration: 0 } : { ...spring.snappy, delay: .7 + delay } } })] }, key);
+                                            })] }), rows.map((row, i) => {
+                                        const key = row.item.key, on = active === key, accent = highlightKey === key;
+                                        const delay = reduced ? 0 : i * .05;
+                                        return _jsxs("div", { className: styles.labels, "data-on": on || undefined, "data-accent": accent || undefined, "data-dim": (active !== null && !on) || undefined, "aria-hidden": "true", children: [_jsxs(motion.span, { className: styles.start, style: { right: width - x0 + 10, maxWidth: x0 - 10 }, initial: reduced ? false : { y: row.l0, opacity: 0 }, animate: { y: row.l0, opacity: drawn ? 1 : 0 }, transition: { y: settle, opacity: { duration: .3, delay } }, children: [_jsx("span", { className: styles.name, children: row.item.label }), _jsx("span", { className: styles.value, children: format(row.item.start) })] }), _jsxs(motion.span, { className: styles.end, style: { left: x1 + 10 }, initial: reduced ? false : { y: row.l1, opacity: 0 }, animate: { y: row.l1, opacity: drawn ? 1 : 0 }, transition: { y: settle, opacity: { duration: .3, delay: .7 + delay } }, children: [_jsx("span", { className: styles.value, children: format(row.item.end) }), ranks && _jsx(Rank, { move: row.rank0 - row.rank1, reduced: reduced })] })] }, key);
+                                    })] })] }), _jsxs(motion.div, { ref: tip, className: styles.tooltip, style: { x: reduced ? tipX : tipSpringX, y: reduced ? tipY : tipSpringY }, "aria-hidden": "true", children: [_jsx("p", { className: styles.tipTitle, children: tipRow?.item.label ?? "" }), _jsxs("p", { className: styles.tipRow, children: [_jsx("span", { className: styles.tipName, children: startLabel }), _jsx("span", { className: styles.tipValue, children: tipRow ? format(tipRow.item.start) : "" })] }), _jsxs("p", { className: styles.tipRow, children: [_jsx("span", { className: styles.tipName, children: endLabel }), _jsx("span", { className: styles.tipValue, children: tipRow ? format(tipRow.item.end) : "" })] }), _jsx("p", { className: styles.tipMeta, children: tipRow ? `${change(tipRow.item)}, ${rankText(tipRow)}` : "" })] }), empty && _jsx("p", { className: styles.message, children: emptyLabel })] }), _jsx("p", { className: styles.srOnly, "aria-live": "polite", "aria-atomic": "true", children: announce }), _jsx("p", { className: styles.srOnly, children: summary }), !empty && _jsx("div", { className: styles.srOnly, children: _jsxs("table", { children: [_jsx("caption", { children: label }), _jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: "Item" }), _jsx("th", { scope: "col", children: startLabel }), _jsx("th", { scope: "col", children: endLabel }), _jsx("th", { scope: "col", children: "Change" }), _jsx("th", { scope: "col", children: "Rank" })] }) }), _jsx("tbody", { children: byEnd.map(row => _jsxs("tr", { children: [_jsx("th", { scope: "row", children: row.item.label }), _jsx("td", { children: format(row.item.start) }), _jsx("td", { children: format(row.item.end) }), _jsx("td", { children: change(row.item) }), _jsxs("td", { children: [row.rank0, " to ", row.rank1] })] }, row.item.key)) })] }) })] });
+}
+export default SlopeChart;

package/components/slope-chart/slope-chart.module.css

@@ -0,0 +1,51 @@
+.figure { position: relative; display: grid; min-width: 0; margin: 0; color: var(--foreground); font-family: var(--font-body); letter-spacing: var(--tracking-body); }
+
+/* Series colors (--series-1 to --series-4) come from registry/foundation.css. */
+
+.stage { position: relative; min-width: 0; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
+.columns { position: relative; height: 28px; }
+.column { position: absolute; top: 0; color: var(--text-muted); font-size: var(--text-sm); line-height: 20px; white-space: nowrap; }
+
+.plot { position: relative; }
+.svg { display: block; overflow: visible; }
+.axis { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }
+
+/* Every line is one neutral ink; the story item takes the first series (derived from the accent) and the item in focus comes forward. */
+.item { --ink: color-mix(in oklab, var(--foreground) 36%, var(--surface)); transition: opacity var(--duration-standard) var(--ease-standard); }
+.item[data-accent] { --ink: var(--series-1); }
+.item[data-on]:not([data-accent]) { --ink: var(--foreground); }
+.item[data-dim] { opacity: .14; }
+.line { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; fill: none; transition: stroke var(--duration-fast) var(--ease-standard); }
+.dot { fill: var(--ink); stroke: var(--surface); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: fill var(--duration-fast) var(--ease-standard); }
+.leader { fill: none; stroke: var(--border-strong); stroke-width: 1; }
+
+.labels { transition: opacity var(--duration-standard) var(--ease-standard); }
+.labels[data-dim] { opacity: .3; }
+.start, .end { position: absolute; top: 0; display: flex; height: 20px; align-items: center; gap: 8px; margin-top: -10px; font-size: var(--text-sm); line-height: 20px; white-space: nowrap; pointer-events: none; }
+.start { justify-content: flex-end; max-width: 100%; }
+/* On a phone the labels step down a size so the longest names fit beside the first column instead of running off the edge. */
+.stage[data-narrow] .start, .stage[data-narrow] .end { gap: 6px; font-size: var(--text-xs); }
+.name { min-width: 0; overflow: hidden; color: var(--text-secondary); text-overflow: ellipsis; }
+.value { color: var(--foreground); font-variant-numeric: tabular-nums; }
+.labels[data-on] .name, .labels[data-accent] .name { color: var(--foreground); }
+/* Only the story item is medium; the item in focus changes color, not weight, so its label never shifts sideways. */
+.labels[data-accent] .value { font-weight: 500; }
+
+.rank { display: inline-flex; min-width: 30px; align-items: center; gap: 2px; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.rank[data-move="up"] { color: var(--text-secondary); }
+.rankSwap { position: relative; display: inline-flex; overflow: hidden; }
+
+.tooltip { position: absolute; top: 0; left: 0; z-index: 2; display: grid; min-width: 168px; max-width: min(240px, 100%); gap: 3px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-raised); box-shadow: var(--shadow-floating); opacity: 0; pointer-events: none; scale: .96; transition: opacity var(--duration-fast) var(--ease-standard), scale var(--duration-fast) var(--ease-standard); }
+.stage[data-active] .tooltip { opacity: 1; scale: 1; }
+.tipTitle { margin: 0 0 2px; color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); white-space: nowrap; }
+.tipRow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; font-size: var(--text-sm); line-height: 1.3; }
+.tipName { color: var(--text-secondary); }
+.tipValue { color: var(--foreground); font-weight: 500; font-variant-numeric: tabular-nums; }
+.tipMeta { margin: 2px 0 0; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); font-variant-numeric: tabular-nums; }
+
+.message { display: grid; min-height: 160px; place-items: center; margin: 0; color: var(--text-muted); font-size: var(--text-sm); }
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+@media (prefers-reduced-motion: reduce) {
+  .item, .line, .dot, .labels, .tooltip { transition: none; }
+}

package/components/slot-text/slot-text.d.ts

@@ -0,0 +1,26 @@
+import type { CSSProperties } from "react";
+/**
+ * Text and numbers that spin into their new value like slot machine reels. Every character is a reel; digits count through
+ * the wheel in the direction the number moved, letters shuffle through the alphabet, and reels stop one after another from
+ * left to right with a soft, overshoot-free landing. Use it for prices, stats, and launch moments where a change deserves a beat.
+ */
+export interface SlotTextProps {
+    /** The value to show. Numbers pass through format; strings render as they are. */
+    value: string | number;
+    /** Formats a number value. Defaults to en-US grouping, so 12480 reads 12,480. */
+    format?: (value: number) => string;
+    /** Seconds the first reel spins. Later reels add stagger. */
+    duration?: number;
+    /** Seconds between reels stopping, left to right. */
+    stagger?: number;
+    /** Extra full turns a digit makes before it lands. 0 rolls straight to the new digit. */
+    spins?: number;
+    /** Which end reels are matched from when the length changes. Numbers default to end, so 999 to 1,000 grows on the left. */
+    align?: "start" | "end";
+    /** Announce new values politely to screen readers. */
+    announce?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+export declare function SlotText({ value, format, duration, stagger, spins, align, announce, className, style }: SlotTextProps): import("react").JSX.Element;
+export default SlotText;

package/components/slot-text/slot-text.js

@@ -0,0 +1,119 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import { AnimatePresence, animate, motion, useMotionValue, usePresence, useReducedMotion, useTransform, useVelocity } from "motion/react";
+import styles from "./slot-text.module.css";
+const DIGITS = "0123456789";
+const LOWER = "abcdefghijklmnopqrstuvwxyz";
+const UPPER = LOWER.toUpperCase();
+/** Fast out, long soft landing, never past the target. */
+const LANDING = [.12, .8, .16, 1];
+const subscribe = () => () => { };
+/** Cell pitch in em. Keep in sync with .cell in the stylesheet. */
+const CELL = 1.6;
+function useReducedFlag() {
+    const hydrated = useSyncExternalStore(subscribe, () => true, () => false);
+    return !!useReducedMotion() && hydrated;
+}
+const classOf = (char) => DIGITS.includes(char) ? DIGITS : LOWER.includes(char) ? LOWER : UPPER.includes(char) ? UPPER : null;
+/** Deterministic shuffle so the same change always spins the same letters. */
+function seeded(seed) {
+    let state = seed >>> 0 || 1;
+    return () => { state = (state * 1664525 + 1013904223) >>> 0; return state / 4294967296; };
+}
+/** The reel's cells, from what is visible now to the target. */
+function buildStrip(from, to, spins, rising, seed) {
+    if (from === to)
+        return [to];
+    const set = classOf(to);
+    if (!set)
+        return [from, to];
+    if (set === DIGITS && classOf(from) === DIGITS) {
+        const a = Number(from), b = Number(to);
+        const steps = spins * 10 + (rising ? (b - a + 10) % 10 : (a - b + 10) % 10);
+        return Array.from({ length: steps + 1 }, (_, i) => String((a + (rising ? i : -i) + 100) % 10));
+    }
+    const random = seeded(seed);
+    const fillers = Array.from({ length: Math.max(2, spins * 5 + 2) }, () => set[Math.floor(random() * set.length)]);
+    return [from, ...fillers, to];
+}
+function Reel({ char, order, entering, rising, duration, stagger, spins, reduced }) {
+    const pos = useMotionValue(0);
+    const width = useMotionValue("auto");
+    const sizer = useRef(null);
+    const [isPresent, safeToRemove] = usePresence();
+    const [reel, setReel] = useState(() => ({
+        char,
+        strip: entering && !reduced ? buildStrip("", char, spins, rising, char.charCodeAt(0) + order) : [char],
+        from: 0,
+        grow: entering,
+        time: duration + order * stagger,
+    }));
+    // A new target restarts the reel from the cell that is on screen right now, keeping its sub-cell offset, so nothing jumps.
+    if (reel.char !== char) {
+        const current = pos.get();
+        const index = Math.max(0, Math.min(reel.strip.length - 1, Math.round(current)));
+        const visible = reel.strip[index];
+        setReel({
+            char,
+            strip: reduced ? [char] : buildStrip(visible, char, spins, rising, char.charCodeAt(0) * 31 + visible.charCodeAt(0) * 7 + order + reel.strip.length),
+            from: reduced ? 0 : current - index,
+            grow: false,
+            time: duration + order * stagger,
+        });
+    }
+    const blur = useTransform(useVelocity(pos), velocity => {
+        const amount = Math.min(Math.abs(velocity) * .05, 2.4);
+        return amount < .15 ? "none" : `blur(${amount.toFixed(2)}px)`;
+    });
+    // Cells are taller than the line, so the neighbours of a landed glyph sit fully outside the window.
+    const y = useTransform(pos, value => `translate3d(0, ${(-value * CELL).toFixed(4)}em, 0)`);
+    useLayoutEffect(() => {
+        const measured = sizer.current?.getBoundingClientRect().width ?? 0;
+        const last = reel.strip.length - 1;
+        if (reduced) {
+            pos.jump(last);
+            width.jump(measured);
+            return;
+        }
+        pos.jump(reel.from);
+        const spin = animate(pos, last, { duration: last === 0 ? .2 : reel.time, ease: [...LANDING] });
+        if (reel.grow)
+            width.jump(0);
+        if (width.get() === "auto") {
+            width.jump(measured);
+            return () => spin.stop();
+        }
+        const size = animate(width, measured, { type: "spring", visualDuration: Math.min(reel.time, .6), bounce: 0 });
+        return () => { spin.stop(); size.stop(); };
+    }, [reel, pos, width, reduced]);
+    useLayoutEffect(() => {
+        if (isPresent)
+            return;
+        if (reduced) {
+            safeToRemove();
+            return;
+        }
+        const exit = animate(width, 0, { type: "spring", visualDuration: .35, bounce: 0, onComplete: safeToRemove });
+        return () => exit.stop();
+    }, [isPresent, safeToRemove, width, reduced]);
+    return _jsxs(motion.span, { className: styles.slot, style: { width }, "data-exiting": isPresent ? undefined : "", children: [_jsx("span", { ref: sizer, className: styles.sizer, children: char === " " ? "\u00a0" : char }), _jsx("span", { className: styles.window, children: _jsx(motion.span, { className: styles.strip, style: { transform: y, filter: blur }, children: reel.strip.map((cell, i) => _jsx("span", { className: styles.cell, children: cell === " " ? "\u00a0" : cell }, i)) }) })] });
+}
+export function SlotText({ value, format, duration = .9, stagger = .07, spins = 1, align, announce = false, className, style }) {
+    const reduced = useReducedFlag();
+    const text = typeof value === "number" ? (format ? format(value) : value.toLocaleString("en-US")) : value;
+    const fromEnd = (align ?? (typeof value === "number" ? "end" : "start")) === "end";
+    const chars = Array.from(text);
+    // A leading run of symbols (a currency sign, a plus) is keyed from the start and never spins into a digit; the rest is
+    // keyed from the aligned end, so separators and suffixes stay on their own reels when the number grows.
+    const lead = fromEnd ? chars.findIndex(char => /[\p{L}\p{N}]/u.test(char)) : 0;
+    const prefix = lead < 0 ? chars.length : lead;
+    const keyOf = (i) => i < prefix ? `p${i}` : fromEnd ? `e${chars.length - 1 - i}` : `s${i}`;
+    const [initialKeys] = useState(() => new Set(chars.map((_, i) => keyOf(i))));
+    const [trend, setTrend] = useState({ value, rising: true });
+    if (trend.value !== value) {
+        setTrend({ value, rising: typeof value === "number" && typeof trend.value === "number" ? value >= trend.value : true });
+    }
+    return _jsxs("span", { className: [styles.root, className].filter(Boolean).join(" "), style: style, children: [_jsx("span", { className: styles.srOnly, "aria-live": announce ? "polite" : undefined, children: text }), _jsx("span", { className: styles.reels, "aria-hidden": "true", children: _jsx(AnimatePresence, { initial: false, children: chars.map((char, i) => _jsx(Reel, { char: char, order: i, entering: !initialKeys.has(keyOf(i)), rising: trend.rising, duration: duration, stagger: stagger, spins: spins, reduced: reduced }, keyOf(i))) }) })] });
+}
+export default SlotText;

package/components/slot-text/slot-text.module.css

@@ -0,0 +1,19 @@
+.root { position: relative; display: inline-block; font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap; vertical-align: bottom; }
+.reels { display: inline-flex; height: 1.15em; align-items: flex-start; }
+
+/* Each slot holds one character. Its width follows the character on a spring, so the word never resizes in one frame. */
+.slot { position: relative; display: inline-block; height: 1.15em; flex: none; overflow: visible; }
+.sizer { display: inline-block; visibility: hidden; white-space: pre; pointer-events: none; }
+
+/* The window reaches a little past the line so glyphs fade at the edges instead of being cut. */
+.window {
+  position: absolute;
+  inset: -.22em -.08em;
+  overflow: hidden;
+  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 .24em, #000 calc(100% - .24em), transparent);
+  mask-image: linear-gradient(to bottom, transparent, #000 .24em, #000 calc(100% - .24em), transparent);
+}
+.strip { position: absolute; top: calc(.22em - .225em); right: .08em; left: .08em; display: flex; flex-direction: column; align-items: center; will-change: transform; }
+.cell { display: block; height: 1.6em; padding-top: .225em; box-sizing: border-box; line-height: 1.15; white-space: pre; }
+
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

package/components/sortable-data-table/sortable-data-table.d.ts

@@ -0,0 +1,38 @@
+import type { ReactNode } from "react";
+export type SortDirection = "asc" | "desc";
+export type SortState = {
+    key: string;
+    direction: SortDirection;
+};
+export type DataColumn<T> = {
+    key: string;
+    label: string;
+    sortable?: boolean;
+    render?: (value: unknown, row: T) => ReactNode;
+    /** Right-aligns the column with tabular numerals. Detected when every value is a number. */
+    numeric?: boolean;
+    /** Fixed width such as 120 or "20%". Other columns are measured once and held, so sorting never reflows them. */
+    width?: number | string;
+};
+export type SortableDataTableProps<T extends Record<string, unknown>> = {
+    rows: T[];
+    columns: DataColumn<T>[];
+    rowKey: keyof T | ((row: T) => string);
+    caption?: string;
+    emptyMessage?: string;
+    /** Sort applied on the first render. */
+    defaultSort?: SortState;
+    onSortChange?: (sort: SortState) => void;
+    /** Adds a checkbox column, row click selection, and a count line with a clear action. */
+    selectable?: boolean;
+    selectedKeys?: string[];
+    defaultSelectedKeys?: string[];
+    onSelectionChange?: (keys: string[]) => void;
+    /** Noun for the count line, as in "6 projects". */
+    itemName?: {
+        one: string;
+        other: string;
+    };
+};
+export declare function SortableDataTable<T extends Record<string, unknown>>({ rows, columns, rowKey, caption, emptyMessage, defaultSort, onSortChange, selectable, selectedKeys, defaultSelectedKeys, onSelectionChange, itemName }: SortableDataTableProps<T>): import("react").JSX.Element;
+export default SortableDataTable;