@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/streamgraph/streamgraph.js

@@ -0,0 +1,376 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { animate, motion, useInView, useMotionValue, useReducedMotion, useSpring } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./streamgraph.module.css";
+const { spring } = motionTokens;
+const physical = ({ visualDuration, bounce }, restDelta = .0005) => { const root = (2 * Math.PI) / (visualDuration * 1.2); return { type: "spring", stiffness: root * root, damping: 2 * (1 - bounce) * root, restDelta, restSpeed: restDelta * 2 }; };
+const settle = physical(spring.smooth);
+const swell = physical({ visualDuration: .9, bounce: 0 });
+const glide = physical(spring.snappy, .01);
+const follow = { stiffness: glide.stiffness, damping: glide.damping, restDelta: .01 };
+/** Samples across the plot: every layer is resampled onto the same grid, so datasets of any length morph into each other. */
+const N = 161;
+const PAD = 10, GAP = 14;
+/** Neutral steps by layer. Stacked from the centre out, neighbours always sit at least ten steps apart; the accent is kept for the layer in focus. */
+/** The first four layers take the chart series in order (the first in the accent); later layers fall back to neutral steps that alternate in lightness. */
+const SHADES = [30, 18, 24, 14];
+const colorOf = (item, index) => item.color ?? (index < 4 ? `var(--series-${index + 1})` : `color-mix(in oklab, var(--foreground) ${SHADES[(index - 4) % SHADES.length]}%, var(--surface))`);
+/** The first layer sits in the middle of the stream and the rest alternate above and below it; a flat baseline stacks them in order. */
+function stackOrder(count, mode) {
+    const order = Array.from({ length: count }, (_, index) => index);
+    if (mode === "zero")
+        return order;
+    return order.reduce((list, index) => index === 0 ? [0] : index % 2 ? [...list, index] : [index, ...list], []);
+}
+const grouped = new Intl.NumberFormat("en-US", { maximumFractionDigits: 1 });
+const clamp = (value, low, high) => Math.min(high, Math.max(low, value));
+/** Resamples values onto the shared grid with monotone cubic tangents, so curves never swing past the data or below zero. */
+function resample(raw) {
+    const values = raw.map(value => Math.max(0, value || 0));
+    const out = new Array(N);
+    if (!values.length)
+        return out.fill(0);
+    if (values.length === 1)
+        return out.fill(values[0]);
+    const last = values.length - 1;
+    const slopes = values.slice(1).map((value, index) => value - values[index]);
+    const tangents = values.map((_, index) => index === 0 || index === last ? 0 : (Math.sign(slopes[index - 1]) + Math.sign(slopes[index])) * Math.min(Math.abs(slopes[index - 1]), Math.abs(slopes[index]), Math.abs(slopes[index - 1] + slopes[index]) / 4) || 0);
+    if (last > 1) {
+        tangents[0] = (3 * slopes[0] - tangents[1]) / 2;
+        tangents[last] = (3 * slopes[last - 1] - tangents[last - 1]) / 2;
+    }
+    else {
+        tangents[0] = tangents[1] = slopes[0];
+    }
+    for (let k = 0; k < N; k++) {
+        const at = (k / (N - 1)) * last, seg = Math.min(last - 1, Math.floor(at)), t = at - seg, t2 = t * t, t3 = t2 * t;
+        const a = values[seg], b = values[seg + 1];
+        const value = (2 * t3 - 3 * t2 + 1) * a + (t3 - 2 * t2 + t) * tangents[seg] + (3 * t2 - 2 * t3) * b + (t3 - t2) * tangents[seg + 1];
+        out[k] = clamp(value, Math.min(a, b), Math.max(a, b));
+    }
+    return out;
+}
+/** The baseline under the stack. Wiggle follows Byron and Wattenberg, then removes its linear drift so the stream stays level. */
+function baseline(layers, mode) {
+    const g = new Array(N).fill(0);
+    const totals = g.map((_, j) => layers.reduce((sum, layer) => sum + layer[j], 0));
+    if (mode === "zero" || !layers.length)
+        return g;
+    if (mode === "silhouette")
+        return totals.map(total => -total / 2);
+    for (let j = 1; j < N; j++) {
+        let s1 = 0, s2 = 0, below = 0;
+        for (const layer of layers) {
+            const change = layer[j] - layer[j - 1];
+            s1 += layer[j];
+            s2 += (below + change / 2) * layer[j];
+            below += change;
+        }
+        g[j] = g[j - 1] - (s1 ? s2 / s1 : 0);
+    }
+    // Least squares line through the centre of the stream, subtracted so it never tilts off the plot.
+    const centers = g.map((value, j) => value + totals[j] / 2);
+    const mx = (N - 1) / 2, my = centers.reduce((sum, value) => sum + value, 0) / N;
+    let num = 0, den = 0;
+    centers.forEach((value, j) => { num += (j - mx) * (value - my); den += (j - mx) ** 2; });
+    const slope = den ? num / den : 0;
+    return g.map((value, j) => value - (my + slope * (j - mx)));
+}
+const subscribeNothing = () => () => { };
+function useReducedMotionSafe() {
+    const hydrated = useSyncExternalStore(subscribeNothing, () => true, () => false);
+    return !!useReducedMotion() && hydrated;
+}
+/** Axis labels that fit: at most one per 72 pixels, counted back from the latest. */
+function axisPicks(data, width) {
+    const labeled = data.flatMap((item, index) => item.axisLabel ? [index] : []);
+    if (!width || !labeled.length)
+        return [];
+    const stride = Math.ceil(labeled.length / Math.max(2, Math.floor(width / 72)));
+    return labeled.reverse().filter((_, rank) => rank % stride === 0).reverse();
+}
+export function Streamgraph({ data, series, label, unit = "", height = 260, offset = "wiggle", formatValue, hiddenSeries, defaultHiddenSeries, onHiddenSeriesChange, onActiveChange, legend = true, directLabels = true, categoryLabel = "Date", emptyLabel = "No data for this range", ref, className }) {
+    const reduced = useReducedMotionSafe();
+    const figure = useRef(null);
+    const plot = useRef(null);
+    const tip = useRef(null);
+    const paths = useRef(new Map());
+    const labels = useRef(new Map());
+    useImperativeHandle(ref, () => figure.current);
+    const inView = useInView(figure, { once: true, amount: .3 });
+    const last = data.length - 1;
+    const empty = data.length === 0;
+    const [ownHidden, setOwnHidden] = useState(defaultHiddenSeries ?? []);
+    const hidden = hiddenSeries ?? ownHidden;
+    const toggle = (key) => {
+        const next = hidden.includes(key) ? hidden.filter(item => item !== key) : [...hidden, key];
+        if (hiddenSeries === undefined)
+            setOwnHidden(next);
+        onHiddenSeriesChange?.(next);
+    };
+    const visible = series.filter(item => !hidden.includes(item.key));
+    // Each layer becomes a dense curve on the shared grid; the painter blends from what is on screen to it.
+    const signature = `${series.map(item => item.key).join(",")}|${data.map(item => series.map(line => item.values[line.key] ?? 0).join(",")).join(";")}`;
+    const targets = useMemo(() => new Map(series.map(line => [line.key, resample(data.map(item => item.values[line.key] ?? 0))])), [signature]); // eslint-disable-line react-hooks/exhaustive-deps
+    const [hover, setHover] = useState(null);
+    const [seenSignature, setSeenSignature] = useState(signature);
+    if (seenSignature !== signature) {
+        setSeenSignature(signature);
+        setHover(null);
+    }
+    const index = hover && !empty ? Math.min(hover.index, last) : null;
+    const [legendKey, setLegendKey] = useState(null);
+    const wanted = hover?.key ?? legendKey;
+    const activeKey = wanted && visible.some(item => item.key === wanted) ? wanted : null;
+    const width = useRef(0);
+    const [plotWidth, setPlotWidth] = useState(0);
+    const shapes = useRef(new Map());
+    const presence = useRef(new Map());
+    const frame = useRef(null);
+    const spots = useRef(new Map());
+    const grow = useMotionValue(0);
+    const live = useRef({ series, offset });
+    useLayoutEffect(() => { live.current = { series, offset }; });
+    // One writer for every drawn attribute: morphs, toggles, the first swell, and resizes all repaint through here.
+    const paint = useCallback(() => {
+        const w = width.current;
+        if (!w)
+            return;
+        const { series: order, offset: mode } = live.current;
+        const layers = order.map(line => { const shape = shapes.current.get(line.key); const p = presence.current.get(line.key)?.value ?? 1; return shape ? shape.map(value => value * p) : new Array(N).fill(0); });
+        const stack = stackOrder(order.length, mode);
+        const g = baseline(stack.map(i => layers[i]), mode);
+        const lower = new Array(order.length), upper = new Array(order.length);
+        let running = g.slice();
+        for (const i of stack) {
+            const layer = layers[i];
+            lower[i] = running;
+            running = running.map((value, j) => value + layer[j]);
+            upper[i] = running;
+        }
+        let lo = Infinity, hi = -Infinity;
+        for (let j = 0; j < N; j++) {
+            lo = Math.min(lo, g[j]);
+            hi = Math.max(hi, running[j]);
+        }
+        if (!Number.isFinite(lo) || hi - lo < 1e-9) {
+            lo = -1;
+            hi = 1;
+        }
+        const span = hi - lo, s = grow.get();
+        const center = g.map((value, j) => (value + running[j]) / 2);
+        const toY = (value) => PAD + (1 - (value - lo) / span) * (height - PAD * 2);
+        const yAt = (value, j) => toY(center[j] + (value - center[j]) * s);
+        frame.current = { lower, upper, toY, center };
+        const xs = Array.from({ length: N }, (_, j) => (j / (N - 1)) * w);
+        order.forEach((line, i) => {
+            const top = upper[i], bottom = lower[i];
+            const node = paths.current.get(line.key);
+            if (node) {
+                let d = "";
+                for (let j = 0; j < N; j++)
+                    d += `${j ? "L" : "M"}${xs[j].toFixed(1)},${yAt(top[j], j).toFixed(1)}`;
+                for (let j = N - 1; j >= 0; j--)
+                    d += `L${xs[j].toFixed(1)},${yAt(bottom[j], j).toFixed(1)}`;
+                node.setAttribute("d", `${d}Z`);
+            }
+            // The label sits where its layer is thickest, and holds its spot until another stretch is clearly thicker.
+            const text = labels.current.get(line.key);
+            if (!text)
+                return;
+            let best = 4;
+            for (let j = 4; j < N - 4; j++)
+                if (top[j] - bottom[j] > top[best] - bottom[best])
+                    best = j;
+            const held = spots.current.get(line.key);
+            const j = held !== undefined && top[held] - bottom[held] >= (top[best] - bottom[best]) * .8 ? held : best;
+            spots.current.set(line.key, j);
+            const thickness = (top[j] - bottom[j]) / span * (height - PAD * 2) * s;
+            const room = text.getComputedTextLength?.() ?? 60;
+            const x = clamp(xs[j], room / 2 + 6, w - room / 2 - 6);
+            text.setAttribute("x", x.toFixed(1));
+            text.setAttribute("y", yAt((top[j] + bottom[j]) / 2, j).toFixed(1));
+            text.style.opacity = thickness >= 19 && room + 16 < w ? "1" : "0";
+        });
+    }, [grow, height]);
+    useLayoutEffect(() => {
+        const node = plot.current;
+        if (!node)
+            return;
+        const read = () => { width.current = node.clientWidth; setPlotWidth(node.clientWidth); paint(); };
+        read();
+        if (typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(read);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [paint]);
+    // New data blends every layer from the shape on screen; a layer that arrives grows out of the one below it.
+    const morph = useRef(null);
+    useEffect(() => {
+        const moves = [];
+        for (const [key, to] of targets) {
+            const from = shapes.current.get(key);
+            if (!from || reduced) {
+                shapes.current.set(key, to);
+                continue;
+            }
+            moves.push({ key, from, to });
+        }
+        for (const key of [...shapes.current.keys()])
+            if (!targets.has(key))
+                shapes.current.delete(key);
+        morph.current?.stop();
+        if (!moves.length) {
+            paint();
+            return;
+        }
+        morph.current = animate(0, 1, { ...settle, onUpdate: t => { for (const move of moves)
+                shapes.current.set(move.key, move.from.map((value, j) => value + (move.to[j] - value) * t)); paint(); }, onComplete: () => { for (const move of moves)
+                shapes.current.set(move.key, move.to); paint(); } });
+        return () => morph.current?.stop();
+    }, [paint, reduced, targets]);
+    // A hidden layer thins to nothing while the others close over it.
+    const hiddenKey = hidden.join("|");
+    useEffect(() => {
+        for (const line of series) {
+            const to = hidden.includes(line.key) ? 0 : 1;
+            const track = presence.current.get(line.key);
+            if (!track) {
+                presence.current.set(line.key, { value: to, stop: null });
+                continue;
+            }
+            if (track.value === to)
+                continue;
+            track.stop?.();
+            if (reduced) {
+                track.value = to;
+                track.stop = null;
+                continue;
+            }
+            const controls = animate(track.value, to, { ...settle, onUpdate: value => { track.value = value; paint(); } });
+            track.stop = () => controls.stop();
+        }
+        paint();
+    }, [hiddenKey, paint, reduced, series.length]); // eslint-disable-line react-hooks/exhaustive-deps
+    // The first time the chart is seen, the stream swells out of a hairline along its centre.
+    useEffect(() => {
+        if (empty)
+            return;
+        if (reduced) {
+            grow.jump(1);
+            paint();
+            return;
+        }
+        if (!inView || grow.get() >= 1)
+            return;
+        const controls = animate(grow, 1, { ...swell, onUpdate: paint });
+        return () => controls.stop();
+    }, [empty, grow, inView, paint, reduced]);
+    // The crosshair glides between points; the tooltip follows on its own spring and never leaves the plot.
+    const cursor = useMotionValue(0);
+    const cursorSpring = useSpring(cursor, follow);
+    const tipX = useMotionValue(0), tipY = useMotionValue(0);
+    const tipSpringX = useSpring(tipX, follow), tipSpringY = useSpring(tipY, follow);
+    const wasActive = useRef(false);
+    useLayoutEffect(() => {
+        const bubble = tip.current, w = width.current;
+        if (index === null || !bubble || !w) {
+            wasActive.current = false;
+            return;
+        }
+        const x = last > 0 ? (index / last) * w : w / 2;
+        let y = hover?.y ?? null;
+        const f = frame.current;
+        if (y === null && f && activeKey) {
+            const i = series.findIndex(line => line.key === activeKey), j = Math.round((x / w) * (N - 1));
+            if (i >= 0)
+                y = f.toY((f.upper[i][j] + f.lower[i][j]) / 2);
+        }
+        const tw = bubble.offsetWidth, th = bubble.offsetHeight;
+        let left = x + GAP;
+        if (left + tw > w)
+            left = x - GAP - tw;
+        const top = clamp((y ?? height / 2) - th / 2, 0, Math.max(0, height - th));
+        const instant = !wasActive.current || reduced;
+        cursor.set(x);
+        tipX.set(clamp(left, 0, Math.max(0, w - tw)));
+        tipY.set(top);
+        if (instant) {
+            cursorSpring.jump(x);
+            tipSpringX.jump(tipX.get());
+            tipSpringY.jump(top);
+        }
+        wasActive.current = true;
+    });
+    const onActive = useRef(onActiveChange);
+    useLayoutEffect(() => { onActive.current = onActiveChange; });
+    useEffect(() => { onActive.current?.(index, activeKey); }, [index, activeKey]);
+    // The layer under the pointer, found in the frame that is on screen.
+    const read = (clientX, clientY) => {
+        const rect = plot.current?.getBoundingClientRect(), f = frame.current;
+        if (!rect?.width || empty)
+            return null;
+        const share = clamp((clientX - rect.left) / rect.width, 0, 1), y = clientY - rect.top;
+        const at = last > 0 ? Math.round(share * last) : 0, j = Math.round(share * (N - 1));
+        let key = null;
+        if (f)
+            series.forEach((line, i) => { if (hidden.includes(line.key))
+                return; const top = f.toY(f.upper[i][j]), bottom = f.toY(f.lower[i][j]); if (y >= top - 1 && y <= bottom + 1)
+                key = line.key; });
+        return { index: at, key, y };
+    };
+    const onPointerMove = (event) => { if (event.pointerType === "mouse" || event.buttons)
+        setHover(read(event.clientX, event.clientY)); };
+    const onPointerDown = (event) => { if (event.pointerType !== "mouse")
+        event.currentTarget.setPointerCapture?.(event.pointerId); setHover(read(event.clientX, event.clientY)); };
+    const onKeyDown = (event) => {
+        if (empty)
+            return;
+        if (event.key === "Escape" && hover) {
+            event.preventDefault();
+            setHover(null);
+            return;
+        }
+        const from = index ?? last;
+        const keys = visible.map(line => line.key), at = activeKey ? keys.indexOf(activeKey) : -1;
+        const page = Math.max(1, Math.round(data.length / 6));
+        const moves = {
+            ArrowLeft: () => ({ index: clamp(from - 1, 0, last), key: activeKey, y: null }),
+            ArrowRight: () => ({ index: clamp(index === null ? last : from + 1, 0, last), key: activeKey, y: null }),
+            PageDown: () => ({ index: clamp(from - page, 0, last), key: activeKey, y: null }),
+            PageUp: () => ({ index: clamp(from + page, 0, last), key: activeKey, y: null }),
+            Home: () => ({ index: 0, key: activeKey, y: null }),
+            End: () => ({ index: last, key: activeKey, y: null }),
+            ArrowUp: () => ({ index: from, key: keys[at < 0 ? keys.length - 1 : Math.min(keys.length - 1, at + 1)] ?? null, y: null }),
+            ArrowDown: () => ({ index: from, key: keys[at < 0 ? 0 : Math.max(0, at - 1)] ?? null, y: null }),
+        };
+        const move = moves[event.key];
+        if (!move)
+            return;
+        event.preventDefault();
+        setHover(move());
+    };
+    const format = (value, line) => `${formatValue ? formatValue(value, line) : grouped.format(value)}${unit ? ` ${unit}` : ""}`;
+    const reading = index === null ? null : data[index];
+    const total = (datum) => visible.reduce((sum, line) => sum + Math.max(0, datum.values[line.key] ?? 0), 0);
+    const announce = reading ? `${reading.label}. ${activeKey ? `${series.find(line => line.key === activeKey)?.label} ${format(reading.values[activeKey] ?? 0, series.find(line => line.key === activeKey))}, ` : ""}${visible.length} layers, ${grouped.format(total(reading))}${unit ? ` ${unit}` : ""} in total` : "";
+    const summary = empty ? `${label}. ${emptyLabel}.` : `${label}, ${data[0].label} to ${data[last].label}. ${visible.map(line => `${line.label}, latest ${format(data[last].values[line.key] ?? 0, line)}`).join(". ")}.`;
+    const picks = axisPicks(data, plotWidth);
+    const tipLeft = reduced ? tipX : tipSpringX, tipTop = reduced ? tipY : tipSpringY;
+    return _jsxs("figure", { ref: figure, className: [styles.figure, className].filter(Boolean).join(" "), "aria-label": label, children: [legend && series.length > 1 && _jsx("div", { className: styles.legend, role: "group", "aria-label": `${label} layers`, onPointerLeave: () => setLegendKey(null), children: series.map((line, at) => _jsxs("button", { type: "button", className: styles.toggle, "aria-pressed": !hidden.includes(line.key), "data-active": activeKey === line.key || undefined, "data-dim": (activeKey !== null && activeKey !== line.key) || undefined, onClick: () => toggle(line.key), onPointerEnter: event => { if (event.pointerType === "mouse")
+                        setLegendKey(line.key); }, onFocus: event => { if (event.currentTarget.matches(":focus-visible"))
+                        setLegendKey(line.key); }, onBlur: () => setLegendKey(null), style: { "--series": colorOf(line, at) }, children: [_jsx("span", { className: styles.swatch, "aria-hidden": "true" }), _jsx("span", { className: styles.toggleLabel, children: line.label })] }, line.key)) }), _jsxs("div", { className: styles.chart, "data-active": index !== null || undefined, "data-layer": activeKey ? true : undefined, children: [_jsxs("div", { ref: plot, className: styles.plot, style: { height }, role: "group", tabIndex: empty ? -1 : 0, "aria-roledescription": "stream graph", "aria-label": `${label}. Use left and right arrows to move through time, up and down to change layer.`, onPointerMove: onPointerMove, onPointerDown: onPointerDown, onPointerUp: event => { if (event.pointerType !== "mouse")
+                            setHover(null); }, onPointerCancel: () => setHover(null), onPointerLeave: event => { if (event.pointerType === "mouse")
+                            setHover(null); }, onKeyDown: onKeyDown, onBlur: () => setHover(null), onFocus: event => { if (event.currentTarget.matches(":focus-visible") && !empty)
+                            setHover(current => current ?? { index: last, key: null, y: null }); }, children: [_jsxs("svg", { className: styles.svg, width: "100%", height: height, "aria-hidden": "true", focusable: "false", children: [series.map((line, at) => _jsx("path", { ref: node => { if (node)
+                                            paths.current.set(line.key, node);
+                                        else
+                                            paths.current.delete(line.key); }, className: styles.layer, "data-active": activeKey === line.key || undefined, "data-custom": line.color ? true : undefined, style: { "--series": colorOf(line, at) } }, line.key)), _jsx(motion.line, { className: styles.crosshair, x1: 0, x2: 0, y1: 0, y2: height, style: { x: reduced ? cursor : cursorSpring } }), directLabels && series.map(line => _jsx("text", { ref: node => { if (node)
+                                            labels.current.set(line.key, node);
+                                        else
+                                            labels.current.delete(line.key); }, className: styles.label, "data-active": activeKey === line.key || undefined, "data-custom": line.color ? true : undefined, "data-hidden": hidden.includes(line.key) || undefined, "data-dim": (activeKey !== null && activeKey !== line.key) || undefined, textAnchor: "middle", dominantBaseline: "central", children: line.label }, line.key))] }), _jsxs(motion.div, { ref: tip, className: styles.tooltip, style: { x: tipLeft, y: tipTop }, "aria-hidden": "true", children: [_jsx("p", { className: styles.tipTitle, children: reading?.label ?? "" }), stackOrder(series.length, offset).reverse().map(at => series[at]).filter(line => !hidden.includes(line.key)).map(line => _jsxs("p", { className: styles.tipRow, "data-active": activeKey === line.key || undefined, "data-dim": (activeKey !== null && activeKey !== line.key) || undefined, style: { "--series": colorOf(line, series.indexOf(line)) }, children: [_jsx("span", { className: styles.tipSwatch }), _jsx("span", { className: styles.tipName, children: line.label }), _jsx("span", { className: styles.tipValue, children: reading ? format(reading.values[line.key] ?? 0, line) : "" })] }, line.key))] }), (empty || visible.length === 0) && _jsx("p", { className: styles.message, children: empty ? emptyLabel : "Choose a layer to show" })] }), _jsx("div", { className: styles.axis, "aria-hidden": "true", children: picks.map(at => { const share = last > 0 ? at / last : .5; const item = data[at]; return _jsx("span", { className: styles.axisLabel, style: { left: `${share * 100}%`, translate: `${-share * 100}% 0` }, children: item.axisLabel }, `${item.key}`); }) })] }), _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: categoryLabel }), series.map(line => _jsx("th", { scope: "col", children: line.label }, line.key))] }) }), _jsx("tbody", { children: data.map(item => _jsxs("tr", { children: [_jsx("th", { scope: "row", children: item.label }), series.map(line => _jsx("td", { children: format(item.values[line.key] ?? 0, line) }, line.key))] }, item.key)) })] }) })] });
+}
+export default Streamgraph;

package/components/streamgraph/streamgraph.module.css

@@ -0,0 +1,55 @@
+.figure { display: grid; min-width: 0; gap: var(--space-inset); 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. */
+
+/* Layer toggles: a rect swatch mirrors the area it names. Hover or focus previews that layer in the plot. */
+.legend { display: flex; flex-wrap: wrap; gap: 2px 4px; min-width: 0; margin-inline: -8px; }
+.toggle { display: inline-flex; min-height: 32px; align-items: center; gap: 8px; padding: 0 10px 0 8px; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: var(--text-sm); line-height: var(--leading-body); -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
+.toggle:active { transform: scale(.97); }
+.toggle[data-active] { color: var(--foreground); background: color-mix(in oklab, var(--foreground) 5%, transparent); }
+.toggle[data-dim] { opacity: .56; }
+.toggle[aria-pressed="false"] { color: var(--text-muted); }
+.toggleLabel { white-space: nowrap; }
+.toggle[aria-pressed="false"] .toggleLabel { opacity: .72; text-decoration: line-through; text-decoration-color: color-mix(in oklab, currentColor 55%, transparent); }
+.swatch { width: 10px; height: 10px; flex: none; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: var(--series); transition: transform var(--duration-standard) var(--ease-spring), opacity var(--duration-fast) var(--ease-standard); }
+.toggle[aria-pressed="false"] .swatch { opacity: .35; transform: scale(.6); }
+@media (hover: hover) and (pointer: fine) { .toggle:hover { color: var(--foreground); } }
+
+.chart { position: relative; display: grid; grid-template-rows: auto 26px; min-width: 0; }
+.plot { position: relative; min-width: 0; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; cursor: crosshair; }
+.svg { display: block; overflow: visible; }
+
+/* A 2px surface stroke is the gap between neighbouring layers. */
+.layer { fill: color-mix(in oklab, var(--series) 82%, var(--surface)); stroke: var(--surface); stroke-width: 2; stroke-linejoin: round; transition: opacity var(--duration-fast) var(--ease-standard), fill var(--duration-standard) var(--ease-standard); }
+.chart[data-layer] .layer:not([data-active]) { opacity: .34; }
+.layer[data-active] { fill: var(--series); }
+
+.crosshair { stroke: var(--foreground); stroke-opacity: .5; stroke-width: 1; shape-rendering: crispEdges; opacity: 0; transition: opacity var(--duration-instant) var(--ease-standard); pointer-events: none; }
+.chart[data-active] .crosshair { opacity: 1; }
+
+.label { fill: var(--foreground); font-size: var(--text-xs); font-weight: 500; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-opacity: .85; stroke-linejoin: round; pointer-events: none; transition: opacity var(--duration-standard) var(--ease-standard), fill var(--duration-fast) var(--ease-standard); }
+.label[data-hidden] { opacity: 0 !important; }
+.chart[data-layer] .label[data-dim] { opacity: 0 !important; }
+
+.tooltip { position: absolute; top: 0; left: 0; z-index: 1; display: grid; min-width: 156px; max-width: min(256px, 100%); gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); 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); }
+.chart[data-active] .tooltip { opacity: 1; scale: 1; }
+.tipTitle { margin: 0 0 2px; color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.tipRow { display: flex; min-width: 0; align-items: center; gap: 8px; margin: 0; font-size: var(--text-sm); line-height: var(--leading-body); transition: opacity var(--duration-fast) var(--ease-standard); }
+.tipRow[data-dim] { opacity: .5; }
+.tipSwatch { width: 10px; height: 2.5px; flex: none; border-radius: var(--radius-full); corner-shape: round; background: var(--series); }
+.tipName { min-width: 0; flex: 1; overflow: hidden; color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; }
+.tipRow[data-active] .tipName { color: var(--foreground); }
+.tipValue { flex: none; margin-left: 8px; color: var(--foreground); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+.message { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--text-muted); font-size: var(--text-sm); pointer-events: none; }
+
+.axis { position: relative; min-width: 0; }
+.axisLabel { position: absolute; top: 8px; color: var(--text-muted); font-size: var(--text-xs); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; transition: opacity var(--duration-standard) var(--ease-standard); }
+/* New labels fade in while the stream morphs to a new range instead of popping in a single frame. */
+@starting-style { .axisLabel { opacity: 0; } }
+
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+@media (prefers-reduced-motion: reduce) {
+  .toggle, .swatch, .layer, .crosshair, .label, .tooltip, .tipRow, .axisLabel { transition: none; }
+}

package/components/swipe-actions/swipe-actions.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+export interface SwipeAction {
+    label: string;
+    icon: ReactNode;
+    /** Fill of the revealed action. Pair `danger` with a label that names the destructive result. */
+    tone?: "neutral" | "accent" | "danger";
+    /** Runs for a full swipe, a tap on the revealed action, or the More actions menu. Remove the item here unless `keepRow` is set. */
+    onSelect: () => void;
+    /** The row springs home after the action instead of sliding away and collapsing, for actions such as Mark as unread. */
+    keepRow?: boolean;
+}
+/**
+ * A list whose rows reveal actions on a horizontal swipe, the way a mail inbox does. Use it for short lists where people triage items quickly.
+ * Only one row stays open at a time; touching anywhere else or pressing Escape puts it away. Every row also has a More actions menu with the same
+ * actions, so keyboard and screen reader users never need the gesture.
+ */
+export interface SwipeActionsProps {
+    label: string;
+    children: ReactNode;
+    className?: string;
+}
+/** One row. `leading` actions sit under the left edge and `trailing` actions under the right; the outermost action on each side commits on a full swipe. */
+export interface SwipeActionsRowProps {
+    /** Names the row in its menu button, for example the message subject. */
+    label: string;
+    leading?: SwipeAction[];
+    trailing?: SwipeAction[];
+    /** Lets a long swipe commit the outermost action without a tap. On by default. */
+    fullSwipe?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+export declare function SwipeActions({ label, children, className }: SwipeActionsProps): import("react").JSX.Element;
+export declare function SwipeActionsRow({ label, leading, trailing, fullSwipe, children, className }: SwipeActionsRowProps): import("react").JSX.Element;
+export default SwipeActions;