@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/sortable-data-table/sortable-data-table.js

@@ -0,0 +1,240 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { ArrowUp } from "lucide-react";
+import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./sortable-data-table.module.css";
+const collator = new Intl.Collator("en", { numeric: true, sensitivity: "base" });
+const isEmpty = (value) => value == null || value === "";
+const comparable = (value) => value instanceof Date ? value.getTime() : value;
+const blur = (px) => `blur(${px}px)`;
+const enter = { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] };
+const leave = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] };
+const instant = { duration: motionTokens.duration.instant };
+/** Changing text rises in from the side it is moving toward and lifts away on the other. */
+const rise = {
+    enter: (direction) => ({ opacity: 0, y: `${.3 * direction}em`, filter: blur(motionTokens.blur.soft) }),
+    shown: { opacity: 1, y: "0em", filter: blur(0), transition: enter },
+    gone: (direction) => ({ opacity: 0, y: `${-.3 * direction}em`, filter: blur(motionTokens.blur.subtle), transition: leave }),
+};
+/** Reduced motion keeps the same properties as rise (no travel, no blur) so the server and a reduced-motion client render identical styles. */
+const fade = { enter: { opacity: 0, y: "0em", filter: blur(0) }, shown: { opacity: 1, y: "0em", filter: blur(0), transition: instant }, gone: { opacity: 0, y: "0em", filter: blur(0), transition: instant } };
+/** Check and dash share three points, so the header box morphs between all and some. */
+const checkPath = "M4.25 9.25 L7.25 12.25 L13.75 5.75";
+const dashPath = "M4.75 9 L9 9 L13.25 9";
+/** Text that changes in place. The slot eases to the new width, so the words beside it never jump. */
+function Swap({ value, direction, reduced, className }) {
+    const inner = useRef(null);
+    const width = useMotionValue("auto");
+    useLayoutEffect(() => {
+        const node = inner.current;
+        if (!node)
+            return;
+        let settled = false;
+        const measure = () => {
+            const next = node.getBoundingClientRect().width;
+            if (settled && !reduced)
+                animate(width, next, motionTokens.spring.morph);
+            else
+                width.jump(next);
+            settled = true;
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [reduced, width]);
+    return _jsx(motion.span, { className: [styles.swap, className].filter(Boolean).join(" "), style: { width }, children: _jsx("span", { ref: inner, className: styles.swapInner, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: direction, children: _jsx(motion.span, { className: styles.swapText, custom: direction, variants: reduced ? fade : rise, initial: "enter", animate: "shown", exit: "gone", children: value }, value) }) }) });
+}
+/** The arrow fades in where a column becomes sorted and flips on a spring when the direction changes. */
+function SortGlyph({ active, descending, reduced }) {
+    const rotate = useMotionValue(descending ? 180 : 0);
+    const seen = useRef({ active, hiddenAt: -Infinity });
+    useLayoutEffect(() => {
+        const state = seen.current;
+        if (active) {
+            // Turn only while the arrow is visible; a freshly shown arrow starts pointing the right way.
+            const visible = state.active || performance.now() - state.hiddenAt < 160;
+            if (visible && !reduced)
+                animate(rotate, descending ? 180 : 0, motionTokens.spring.snappy);
+            else
+                rotate.jump(descending ? 180 : 0);
+        }
+        else if (state.active)
+            state.hiddenAt = performance.now();
+        state.active = active;
+    }, [active, descending, reduced, rotate]);
+    const transition = reduced ? instant : active ? { opacity: enter, filter: enter, scale: motionTokens.spring.snappy } : { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] };
+    return _jsxs("span", { className: styles.sortIcon, "aria-hidden": "true", children: [_jsx(ArrowUp, { className: styles.sortHint, size: 16, strokeWidth: 1.75 }), _jsx(motion.span, { className: styles.sortArrow, style: { rotate }, initial: false, animate: active ? { opacity: 1, scale: 1, filter: blur(0) } : { opacity: 0, scale: .6, filter: blur(motionTokens.blur.subtle) }, transition: transition, children: _jsx(ArrowUp, { size: 16, strokeWidth: 1.75 }) })] });
+}
+function SelectBox({ checked, mixed = false, label, nav, reduced, onToggle, inputRef }) {
+    const local = useRef(null);
+    const ref = inputRef ?? local;
+    const on = checked || mixed;
+    useLayoutEffect(() => { if (ref.current)
+        ref.current.indeterminate = mixed; }, [mixed, ref]);
+    const opacity = { duration: on ? motionTokens.duration.instant : motionTokens.duration.fast, ease: [...motionTokens.ease.standard] };
+    return _jsxs("label", { className: styles.selectHit, children: [_jsx("input", { ref: ref, type: "checkbox", className: styles.selectInput, checked: checked, "aria-label": label, "data-nav": nav, onChange: event => onToggle(event.nativeEvent.shiftKey === true) }), _jsxs("span", { className: styles.selectBox, "data-on": on || undefined, "aria-hidden": "true", children: [_jsx(motion.span, { className: styles.selectFill, initial: false, animate: { opacity: on ? 1 : 0, scale: on ? 1 : .6 }, transition: reduced ? { duration: 0 } : { scale: motionTokens.spring.snappy, opacity } }), _jsx("svg", { className: styles.selectMark, viewBox: "0 0 18 18", fill: "none", focusable: "false", children: _jsx(motion.path, { initial: false, animate: { d: mixed ? dashPath : checkPath, pathLength: on ? 1 : 0, opacity: on ? 1 : 0 }, transition: reduced ? { duration: 0 } : { d: motionTokens.spring.morph, pathLength: motionTokens.spring.snappy, opacity }, stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round" }) })] })] });
+}
+export function SortableDataTable({ rows, columns, rowKey, caption = "Data table", emptyMessage = "No rows to show", defaultSort, onSortChange, selectable = false, selectedKeys, defaultSelectedKeys, onSelectionChange, itemName = { one: "row", other: "rows" } }) {
+    const reduced = useReducedMotion() ?? false;
+    const tableRef = useRef(null);
+    const selectAllRef = useRef(null);
+    const anchor = useRef(null);
+    const [sort, setSort] = useState(defaultSort ?? null);
+    const [announcement, setAnnouncement] = useState("");
+    const [internalSelection, setInternalSelection] = useState(defaultSelectedKeys ?? []);
+    const selection = useMemo(() => new Set(selectedKeys ?? internalSelection), [internalSelection, selectedKeys]);
+    const sortedRows = useMemo(() => {
+        if (!sort)
+            return rows;
+        return rows.map((row, index) => ({ row, index })).sort((a, b) => {
+            const left = comparable(a.row[sort.key]);
+            const right = comparable(b.row[sort.key]);
+            // Empty values stay at the bottom in both directions.
+            if (isEmpty(left) || isEmpty(right))
+                return isEmpty(left) === isEmpty(right) ? a.index - b.index : isEmpty(left) ? 1 : -1;
+            const result = typeof left === "number" && typeof right === "number" ? left - right : collator.compare(String(left), String(right));
+            return (sort.direction === "asc" ? result : -result) || a.index - b.index;
+        }).map(entry => entry.row);
+    }, [rows, sort]);
+    const numeric = useMemo(() => new Set(columns.filter(column => column.numeric ?? (rows.some(row => typeof row[column.key] === "number") && rows.every(row => typeof row[column.key] === "number" || isEmpty(row[column.key])))).map(column => column.key)), [columns, rows]);
+    const getRowKey = (row) => String(typeof rowKey === "function" ? rowKey(row) : row[rowKey]);
+    const keys = sortedRows.map(getRowKey);
+    const order = keys.join("\u0000");
+    const selectedCount = keys.filter(key => selection.has(key)).length;
+    const allSelected = keys.length > 0 && selectedCount === keys.length;
+    // Measure the natural column widths once, then hold them with a fixed layout so nothing reflows while rows move.
+    const signature = [selectable ? "select" : "", ...columns.map(column => column.key)].join("\u0000");
+    const [locked, setLocked] = useState(null);
+    const widths = locked?.signature === signature ? locked.widths : null;
+    useLayoutEffect(() => {
+        const table = tableRef.current;
+        if (!table || widths)
+            return;
+        const measure = () => {
+            const total = table.getBoundingClientRect().width;
+            if (!total || getComputedStyle(table).display !== "table")
+                return false;
+            const next = {};
+            table.querySelectorAll("thead th[data-key]").forEach(cell => { next[cell.dataset.key ?? ""] = cell.getBoundingClientRect().width / total * 100; });
+            setLocked({ signature, widths: next });
+            return true;
+        };
+        if (measure())
+            return;
+        const observer = new ResizeObserver(() => { if (measure())
+            observer.disconnect(); });
+        observer.observe(table);
+        return () => observer.disconnect();
+    }, [signature, widths]);
+    // A still tint under the sorted column fills the gaps that open while rows pass each other.
+    const [band, setBand] = useState(null);
+    const seenSort = useRef(false);
+    useLayoutEffect(() => {
+        const table = tableRef.current;
+        const key = sort?.key;
+        const update = () => {
+            const cell = key ? table?.querySelector(`thead th[data-key="${CSS.escape(key)}"]`) : null;
+            setBand(current => !cell ? null : current?.left === cell.offsetLeft && current.width === cell.offsetWidth ? current : { left: cell.offsetLeft, width: cell.offsetWidth });
+        };
+        update();
+        if (!table || !key)
+            return;
+        // On a phone the header is a scrolling strip of sort controls; keep the active one in view.
+        const cell = table.querySelector(`thead th[data-key="${CSS.escape(key)}"]`);
+        const strip = cell?.parentElement;
+        if (cell && strip && strip.scrollWidth > strip.clientWidth && getComputedStyle(table).display !== "table") {
+            const bounds = strip.getBoundingClientRect(), target = cell.getBoundingClientRect(), inset = 8;
+            const start = Math.max(bounds.left, strip.querySelector("th:not([data-key])")?.getBoundingClientRect().right ?? bounds.left) + inset;
+            const shift = target.right > bounds.right - inset ? target.right - bounds.right + inset : target.left < start ? target.left - start : 0;
+            if (shift)
+                strip.scrollTo({ left: strip.scrollLeft + shift, behavior: reduced || !seenSort.current ? "auto" : "smooth" });
+        }
+        seenSort.current = true;
+        const observer = new ResizeObserver(update);
+        observer.observe(table);
+        return () => observer.disconnect();
+    }, [reduced, sort?.key, widths]);
+    const shownCount = selectedCount || keys.length;
+    const noun = selectedCount ? "selected" : keys.length === 1 ? itemName.one : itemName.other;
+    const [lastCount, setLastCount] = useState(shownCount);
+    const [countDirection, setCountDirection] = useState(1);
+    if (shownCount !== lastCount) {
+        setLastCount(shownCount);
+        setCountDirection(shownCount > lastCount ? 1 : -1);
+    }
+    function sortBy(column) {
+        const next = { key: column.key, direction: sort?.key === column.key && sort.direction === "asc" ? "desc" : "asc" };
+        setSort(next);
+        onSortChange?.(next);
+        setAnnouncement(`Sorted by ${column.label}, ${next.direction === "asc" ? "ascending" : "descending"}`);
+    }
+    function commit(next) {
+        const list = keys.filter(key => next.has(key));
+        if (selectedKeys === undefined)
+            setInternalSelection(list);
+        onSelectionChange?.(list);
+        setAnnouncement(list.length ? `${list.length} of ${keys.length} selected` : "Selection cleared");
+    }
+    function toggleRow(key, extend) {
+        const next = new Set(selection);
+        const checked = !selection.has(key);
+        const from = extend && anchor.current ? keys.indexOf(anchor.current) : -1;
+        const to = keys.indexOf(key);
+        (from < 0 ? [key] : keys.slice(Math.min(from, to), Math.max(from, to) + 1)).forEach(item => checked ? next.add(item) : next.delete(item));
+        anchor.current = key;
+        commit(next);
+    }
+    function clearSelection() {
+        commit(new Set());
+        selectAllRef.current?.focus();
+    }
+    function onRowClick(event, key) {
+        if (!selectable || event.target.closest("a, button, input, label, select, textarea, [role='button'], [contenteditable='true']") || window.getSelection()?.toString())
+            return;
+        toggleRow(key, event.shiftKey);
+        // Keep the keyboard path where the pointer left off, so arrows continue from this row.
+        event.currentTarget.querySelector("input[type='checkbox']")?.focus({ preventScroll: true });
+    }
+    /** Arrows walk the header controls and the row checkboxes; Escape clears the selection. */
+    function onKeyDown(event) {
+        const target = event.target;
+        if (event.key === "Escape" && selectedCount) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (target.dataset.clear !== undefined)
+                clearSelection();
+            else
+                commit(new Set());
+            return;
+        }
+        const nav = target.dataset.nav;
+        if (!nav)
+            return;
+        const list = (name) => [...event.currentTarget.querySelectorAll(`[data-nav="${name}"]`)];
+        const items = list(nav);
+        const index = items.indexOf(target);
+        const steps = nav === "head"
+            ? { ArrowRight: [items, index + 1], ArrowLeft: [items, index - 1], Home: [items, 0], End: [items, items.length - 1], ...(target === selectAllRef.current ? { ArrowDown: [list("row"), 0] } : {}) }
+            : { ArrowDown: [items, index + 1], ArrowUp: index === 0 && selectAllRef.current ? [[selectAllRef.current], 0] : [items, index - 1], Home: [items, 0], End: [items, items.length - 1] };
+        const step = steps[event.key];
+        const next = step?.[0][step[1]];
+        if (!next)
+            return;
+        event.preventDefault();
+        next.focus();
+    }
+    return _jsxs("div", { className: styles.wrapper, onKeyDown: onKeyDown, children: [_jsxs("div", { className: styles.scroller, children: [band ? _jsx("span", { className: styles.band, style: { left: band.left, width: band.width }, "aria-hidden": "true" }) : null, _jsxs("table", { ref: tableRef, role: "table", className: styles.table, "data-fixed": widths ? "" : undefined, "data-selectable": selectable || undefined, children: [_jsx("caption", { children: caption }), _jsxs("colgroup", { children: [selectable ? _jsx("col", { className: styles.selectCol }) : null, columns.map((column, index) => _jsx("col", { style: { width: column.width !== undefined ? (typeof column.width === "number" ? `${column.width}px` : column.width) : widths && index > 0 ? `${widths[column.key]}%` : undefined } }, column.key))] }), _jsx("thead", { role: "rowgroup", children: _jsxs("tr", { role: "row", children: [selectable ? _jsx("th", { scope: "col", role: "columnheader", className: styles.selectCell, children: _jsx(SelectBox, { inputRef: selectAllRef, checked: allSelected, mixed: selectedCount > 0 && !allSelected, label: "Select all rows", nav: "head", reduced: reduced, onToggle: () => commit(allSelected ? new Set() : new Set(keys)) }) }) : null, columns.map((column, index) => {
+                                            const active = sort?.key === column.key;
+                                            const sortable = column.sortable !== false;
+                                            return _jsx("th", { scope: "col", role: "columnheader", "data-key": column.key, "data-primary": index === 0 || undefined, "data-sorted": active || undefined, "data-numeric": numeric.has(column.key) || undefined, "data-sortable": sortable || undefined, "aria-sort": !sortable ? undefined : active ? (sort.direction === "asc" ? "ascending" : "descending") : "none", children: sortable ? _jsx("button", { className: styles.sortButton, type: "button", "data-nav": "head", onClick: () => sortBy(column), "aria-label": `Sort by ${column.label}${active ? `, currently ${sort.direction === "asc" ? "ascending" : "descending"}` : ""}`, children: _jsxs("span", { className: styles.sortInner, children: [_jsx("span", { children: column.label }), _jsx(SortGlyph, { active: active, descending: active && sort.direction === "desc", reduced: reduced })] }) }) : column.label }, column.key);
+                                        })] }) }), _jsx("tbody", { role: "rowgroup", children: sortedRows.length ? sortedRows.map((row, index) => {
+                                    const key = keys[index];
+                                    const selected = selectable && selection.has(key);
+                                    return _jsxs(motion.tr, { role: "row", layout: reduced ? false : "position", layoutDependency: order, transition: motionTokens.spring.smooth, "data-selected": selected || undefined, onClick: event => onRowClick(event, key), onMouseDown: event => { if (selectable && event.shiftKey)
+                                            event.preventDefault(); }, children: [selectable ? _jsx("td", { role: "cell", className: styles.selectCell, children: _jsx(SelectBox, { checked: selected, label: `Select ${String(row[columns[0]?.key] ?? key)}`, nav: "row", reduced: reduced, onToggle: extend => toggleRow(key, extend) }) }) : null, columns.map((column, columnIndex) => _jsx("td", { role: "cell", "data-label": column.label, "data-primary": columnIndex === 0 || undefined, "data-sorted": sort?.key === column.key || undefined, "data-numeric": numeric.has(column.key) || undefined, children: column.render ? column.render(row[column.key], row) : String(row[column.key] ?? "–") }, column.key))] }, key);
+                                }) : _jsx("tr", { role: "row", children: _jsx("td", { role: "cell", className: styles.empty, colSpan: columns.length + (selectable ? 1 : 0), children: emptyMessage }) }) })] })] }), selectable ? _jsxs("div", { className: styles.footer, children: [_jsxs("span", { className: styles.srOnly, children: [shownCount, " ", noun] }), _jsxs("span", { className: styles.count, "data-active": selectedCount > 0 || undefined, "aria-hidden": "true", children: [_jsx(Swap, { className: styles.number, value: String(shownCount), direction: countDirection, reduced: reduced }), _jsx(Swap, { value: noun, direction: selectedCount ? 1 : -1, reduced: reduced })] }), _jsx(AnimatePresence, { initial: false, children: selectedCount ? _jsx(motion.button, { type: "button", className: styles.clear, "data-clear": "", onClick: clearSelection, initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .96, filter: blur(motionTokens.blur.soft) }, animate: { opacity: 1, scale: 1, filter: blur(0) }, exit: reduced ? { opacity: 0, transition: instant } : { opacity: 0, scale: .98, filter: blur(motionTokens.blur.subtle), transition: leave }, transition: reduced ? instant : enter, whileTap: reduced ? undefined : { scale: .97, transition: { duration: motionTokens.duration.instant } }, children: "Clear selection" }, "clear") : null })] }) : null, _jsx("p", { className: styles.srOnly, role: "status", children: announcement })] });
+}
+export default SortableDataTable;

package/components/sortable-data-table/sortable-data-table.module.css

@@ -0,0 +1,116 @@
+/* Cells are opaque so rows passing each other during a sort cover one another cleanly instead of blending text. */
+.wrapper { --column-tint: var(--surface-muted); position: relative; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); color: var(--foreground); font-family: var(--font-body); }
+.scroller { position: relative; overflow-x: auto; overscroll-behavior-x: contain; }
+.band { position: absolute; top: 0; bottom: 0; background: var(--column-tint); pointer-events: none; }
+.table { position: relative; z-index: 1; width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); line-height: var(--leading-body); letter-spacing: var(--tracking-body); text-align: left; }
+.table[data-fixed] { table-layout: fixed; }
+.table caption, .srOnly { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+.selectCol { width: 44px; }
+
+.table th, .table td { --cell-base: var(--surface); --cell-fill: var(--cell-base); background-color: var(--cell-fill); transition: background-color var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard); }
+.table th[data-sorted], .table td[data-sorted] { --cell-base: var(--column-tint); }
+.table th { height: 44px; padding: 0 var(--space-inset); border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; text-align: left; white-space: nowrap; }
+.table th[data-sortable] { padding: 0; }
+.table th[data-sorted] { color: var(--foreground); }
+.table td { height: 52px; padding: 0 var(--space-inset); border-bottom: 1px solid var(--border-subtle); color: var(--foreground); font-weight: 400; vertical-align: middle; overflow-wrap: anywhere; }
+.table tbody tr:last-child td { border-bottom: 0; }
+.table [data-numeric] { text-align: right; font-variant-numeric: tabular-nums; }
+.table[data-selectable] tbody tr { cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.table[data-selectable] tbody tr[data-selected] td { --cell-fill: color-mix(in oklab, var(--accent) 8%, var(--cell-base)); }
+.table[data-selectable] [data-primary]:not([data-sortable]), .table[data-selectable] th[data-primary] .sortButton { padding-left: var(--space-related); }
+
+.sortButton { display: flex; width: 100%; height: 44px; align-items: center; justify-content: flex-start; border: 0; padding: 0 var(--space-inset); background: transparent; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.table th[data-numeric] .sortButton { justify-content: flex-end; }
+.sortInner { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-control); transition: color var(--duration-fast) var(--ease-standard); }
+/* Right-aligned columns lead with the arrow so the label lines up with the digits below it. */
+.table th[data-numeric] .sortInner { flex-direction: row-reverse; }
+.sortIcon { position: relative; display: grid; width: 16px; height: 16px; flex: none; place-items: center; }
+.sortHint, .sortArrow { position: absolute; inset: 0; display: grid; place-items: center; }
+.sortHint { color: var(--text-muted); opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard); }
+.sortArrow { color: var(--foreground); }
+.sortButton:focus-visible .sortHint { opacity: .6; }
+.table th[data-sorted] .sortHint { opacity: 0; }
+
+.selectCell { width: 44px; }
+.table .selectCell { padding: 0 0 0 var(--space-inset); }
+.selectHit { position: relative; display: flex; width: 100%; height: 44px; align-items: center; cursor: pointer; }
+.selectInput { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
+.selectBox { position: relative; display: block; width: 18px; height: 18px; flex: none; border: 1px solid var(--border-strong); border-radius: var(--radius-detail); background: var(--surface); color: var(--control-glyph); pointer-events: none; transition: border-color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
+.selectBox[data-on] { border-color: var(--control-on); }
+.selectFill { position: absolute; inset: -1px; border-radius: inherit; corner-shape: inherit; background: var(--control-on); }
+.selectMark { position: absolute; inset: -1px; width: 18px; height: 18px; overflow: visible; }
+/* The native checkbox is hidden, so its keyboard focus outline is drawn on the visible box. */
+.selectInput:focus-visible + .selectBox { outline: var(--focus-outline-width, 2px) solid var(--focus-outline, color-mix(in oklab, var(--accent-strong) 72%, transparent)); outline-offset: 2px; }
+.selectInput:active + .selectBox { transform: scale(.95); transition: border-color var(--duration-fast) var(--ease-standard), transform 110ms var(--ease-standard); }
+
+.footer { display: flex; height: 44px; align-items: center; justify-content: space-between; gap: var(--space-group); padding: 0 var(--space-related) 0 var(--space-inset); border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-body); letter-spacing: var(--tracking-body); }
+.count { display: inline-flex; min-width: 0; align-items: baseline; gap: .28em; white-space: nowrap; transition: color var(--duration-standard) var(--ease-standard); }
+.count[data-active] { color: var(--foreground); }
+.swap { display: inline-block; }
+.swapInner { position: relative; display: inline-flex; width: max-content; }
+.swapText { display: inline-block; white-space: nowrap; }
+.number { font-variant-numeric: tabular-nums; }
+.clear { height: 30px; flex: none; border: 0; border-radius: var(--radius-control); padding: 0 var(--space-group); background: transparent; color: var(--foreground); font: inherit; font-weight: 500; letter-spacing: inherit; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard); -webkit-tap-highlight-color: transparent; }
+
+.empty { height: 120px !important; color: var(--text-muted) !important; text-align: center !important; }
+
+@media (hover: hover) and (pointer: fine) {
+  .table tbody tr:hover td { --cell-fill: color-mix(in oklab, var(--foreground) 3%, var(--cell-base)); }
+  .table[data-selectable] tbody tr[data-selected]:hover td { --cell-fill: color-mix(in oklab, var(--accent) 11%, var(--cell-base)); }
+  .table tbody tr:has(.empty):hover td { --cell-fill: var(--cell-base); }
+  .sortButton:hover .sortInner { color: var(--foreground); }
+  .sortButton:hover .sortHint { opacity: .6; }
+  .table th[data-sorted] .sortButton:hover .sortHint { opacity: 0; }
+  .selectHit:hover .selectBox:not([data-on]) { border-color: var(--text-muted); }
+  .clear:hover { background: var(--surface-muted); }
+}
+
+@media (max-width: 620px) {
+  .scroller { overflow: visible; }
+  .band { display: none; }
+  .table { display: block; width: 100%; min-width: 0; max-width: 100%; }
+  .table thead { display: block; }
+  /* The header becomes a strip of sort controls, so sorting stays one tap away on a phone. */
+  .table thead tr { display: flex; align-items: center; gap: var(--space-tight); padding: var(--space-tight) var(--space-related); overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: none; }
+  .table thead tr::-webkit-scrollbar { display: none; }
+  .table th { display: block; flex: none; height: auto; border: 0; padding: 0; background: transparent; }
+  /* Select all stays pinned while the sort controls scroll beneath it. */
+  .table th.selectCell { position: sticky; left: calc(-1 * var(--space-related)); z-index: 1; width: 40px; margin-left: calc(-1 * var(--space-related)); padding: 0 0 0 var(--space-group); background: var(--surface); }
+  .table th.selectCell .selectHit { height: 32px; }
+  /* Once the strip scrolls, a fade off the pinned cell hides the word sliding under it. */
+  .table th.selectCell::after { position: absolute; top: 0; bottom: 0; left: 100%; width: 36px; background: linear-gradient(to right, var(--surface) 45%, transparent); content: ""; opacity: 0; pointer-events: none; animation: stripFade linear both; animation-timeline: scroll(nearest inline); animation-range: 0 24px; }
+  .table th .sortButton, .table[data-selectable] th[data-primary] .sortButton { width: auto; height: 32px; border-radius: var(--radius-control); padding: 0 10px; transition: background-color var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard); }
+  .table th[data-sorted] .sortButton { background: var(--surface-muted); }
+  .table th[data-numeric] .sortInner { flex-direction: row; }
+  .sortButton:focus-visible { --focus-outline-offset: 1px; }
+  .table tbody { display: block; width: 100%; }
+  /* Rows fold into two lines: the first column with its number, then the remaining details. */
+  .table tbody tr { --row-fill: var(--surface); position: relative; display: flex; width: 100%; min-height: 64px; box-sizing: border-box; flex-wrap: wrap; align-items: baseline; align-content: center; gap: 2px var(--space-related); padding: 10px var(--space-inset); border-bottom: 1px solid var(--border-subtle); background-color: var(--row-fill); transition: background-color var(--duration-standard) var(--ease-standard); }
+  .table tbody tr::after { order: 1; flex-basis: 100%; content: ""; }
+  .table[data-selectable] tbody tr { padding-left: 44px; }
+  .table[data-selectable] tbody tr[data-selected] { --row-fill: color-mix(in oklab, var(--accent) 8%, var(--surface)); }
+  .table tbody tr:last-child { border-bottom: 0; }
+  .table td { order: 2; display: block; min-width: 0; height: auto; border: 0; padding: 0; background: transparent; color: var(--text-secondary); font-size: var(--text-xs); text-align: left; }
+  .table[data-selectable] td[data-primary]:not([data-sortable]) { padding-left: 0; }
+  .table td[data-primary] { order: 0; flex: 1 1 0; color: var(--foreground); font-size: var(--text-sm); font-weight: 500; }
+  .table td[data-numeric]:not([data-primary]) { order: 0; flex: none; margin-left: auto; padding-left: var(--space-related); color: var(--foreground); font-size: var(--text-sm); }
+  .table td[data-numeric] ~ td[data-numeric] { order: 2; margin-left: 0; padding-left: 0; color: var(--text-secondary); font-size: var(--text-xs); }
+  /* The sorted value lifts to full contrast, echoing the tinted column on wider screens. */
+  .table td[data-sorted]:not([data-primary]) { color: var(--foreground); }
+  .table td.selectCell { position: absolute; top: 0; bottom: 0; left: var(--space-tight); display: flex; width: 36px; align-items: center; padding: 0; }
+  .table td.selectCell .selectHit { justify-content: center; }
+  .table .empty { flex: 1 0 100%; height: auto !important; padding: var(--space-section) 0; }
+  .table[data-selectable] tbody tr:has(.empty) { padding-left: var(--space-inset); }
+}
+@media (max-width: 620px) and (hover: hover) and (pointer: fine) {
+  .table tbody tr:hover { --row-fill: color-mix(in oklab, var(--foreground) 3%, var(--surface)); }
+  .table[data-selectable] tbody tr[data-selected]:hover { --row-fill: color-mix(in oklab, var(--accent) 11%, var(--surface)); }
+  .table tbody tr:hover td { background: transparent; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .table th, .table td, .table tbody tr, .sortInner, .sortHint, .selectBox, .count, .clear, .table th .sortButton { transition: none !important; }
+  .selectInput:active + .selectBox { transform: none; }
+}
+
+@keyframes stripFade { to { opacity: 1; } }

package/components/sparkline/sparkline.d.ts

@@ -0,0 +1,19 @@
+export interface SparklineProps {
+    data: number[];
+    label: string;
+    value?: string;
+    change?: string;
+    tone?: "accent" | "success" | "warning" | "danger";
+    width?: number;
+    height?: number;
+    /** One label per point, such as a date. It replaces the change while that point is scrubbed. */
+    labels?: string[];
+    /** Formats a scrubbed point for the headline. Defaults to a grouped number. */
+    formatValue?: (value: number, index: number) => string;
+    /** A quiet neutral fill under the line. */
+    area?: boolean;
+    /** Pointer and keyboard scrubbing through the points. */
+    interactive?: boolean;
+}
+export declare function Sparkline({ data, label, value, change, tone, width, height, labels, formatValue, area, interactive }: SparklineProps): import("react").JSX.Element;
+export default Sparkline;

package/components/sparkline/sparkline.js

@@ -0,0 +1,239 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { AnimatePresence, animate, motion, useInView, useMotionValue, useMotionValueEvent, useReducedMotion, useTransform } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./sparkline.module.css";
+/** Copy that holds a number enters from the side it moved toward: a larger value rises from below, a smaller one drops from above. */
+const rise = { hidden: (direction) => ({ opacity: 0, y: `${.3 * direction}em`, filter: `blur(${motionTokens.blur.soft}px)` }), shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] } }, gone: (direction) => ({ opacity: 0, y: `${-.3 * direction}em`, filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] } }) };
+const fade = { hidden: { opacity: 0, y: 0, filter: "blur(0px)" }, shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.instant } }, gone: { opacity: 0, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.instant } } };
+const amountIn = (text) => Number(text.replace(/,/g, "").replace(/−/g, "-").match(/-?\d+(?:\.\d+)?/)?.[0] ?? NaN);
+const grouped = new Intl.NumberFormat("en-US");
+/** The first draw: one smooth stroke, slow at both ends like a pen. */
+const draw = { duration: motionTokens.duration.considered * 1.75, ease: [...motionTokens.ease.inOut] };
+const quick = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] };
+/** A number keeps its unchanged digits still, keyed by place from the right. Words key on everything up to them, so only the first changed word and what follows it roll. */
+function chunksOf(text, whole) {
+    if (!text)
+        return [];
+    if (whole)
+        return [{ slot: "all", key: text, text }];
+    if (!/\p{L}/u.test(text))
+        return [...text].map((char, index, all) => ({ slot: `n${all.length - index}`, key: char, text: char }));
+    const words = text.split(/(?<=\s)/);
+    return words.map((word, index) => ({ slot: `w${index}`, key: words.slice(0, index + 1).join(""), text: word }));
+}
+/** Text that changes rolls in place, like a numeric content transition; `morph` springs the wrapper to the new width so nothing beside it jumps. */
+function Roll({ text, direction, whole = false, morph = false, tone }) {
+    const reduceMotion = !!useReducedMotion();
+    const sizer = useRef(null);
+    const width = useMotionValue("auto");
+    const [shown, setShown] = useState({ text, direction: 1 });
+    if (shown.text !== text)
+        setShown({ text, direction: direction ?? (amountIn(text) < amountIn(shown.text) ? -1 : 1) });
+    useEffect(() => {
+        const node = sizer.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        let measured = null;
+        // Layout size, not the transformed rect, so a scaling parent never leaves the text clipped. Only a new text springs; font loads jump.
+        const observer = new ResizeObserver(([entry]) => {
+            if (!entry)
+                return;
+            const next = entry.borderBoxSize?.[0]?.inlineSize ?? node.offsetWidth;
+            if (measured !== null && measured !== node.textContent && !reduceMotion)
+                animate(width, next, motionTokens.spring.morph);
+            else
+                width.jump(next);
+            measured = node.textContent;
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [morph, reduceMotion, width]);
+    const numeric = !whole && !/\p{L}/u.test(text);
+    const variants = reduceMotion ? fade : rise;
+    const anchor = numeric ? "right" : "left";
+    return _jsxs(motion.span, { className: styles.roll, "data-end": numeric || undefined, "data-whole": whole || undefined, style: morph ? { width } : undefined, children: [morph && _jsx("span", { ref: sizer, className: styles.sizer, "aria-hidden": "true", children: text }), _jsx("span", { className: styles.track, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: shown.direction, anchorX: anchor, children: chunksOf(text, whole).map(chunk => _jsx(motion.span, { className: styles.slot, custom: shown.direction, variants: variants, initial: "hidden", animate: "shown", exit: "gone", children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: shown.direction, anchorX: anchor, children: _jsx(motion.span, { className: tone ? `${styles.glyph} ${tone}` : styles.glyph, custom: shown.direction, variants: variants, initial: "hidden", animate: "shown", exit: "gone", children: chunk.text }, `${tone ?? ""}${chunk.key}`) }) }, chunk.slot)) }) })] });
+}
+/** Space kept above the highest and below the lowest point, and half the line width. */
+const inset = 5, cap = 1.25;
+const grid = Array.from({ length: 161 }, (_, index) => index / 160);
+/** A smooth line through every point, sampled densely in unit space (x and y both 0 to 1, y up). Monotone cubic tangents keep it from swinging past the data. */
+function curveFor(data) {
+    const min = Math.min(...data), span = Math.max(...data) - min;
+    const ys = data.map(value => span ? (value - min) / span : .5);
+    const last = ys.length - 1, step = 1 / last;
+    const slopes = ys.slice(1).map((y, index) => (y - ys[index]) / step);
+    const tangents = ys.map((_, index) => index === 0 || index === last ? slopes[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;
+    }
+    const samples = Math.max(1, Math.min(16, Math.round(128 / last)));
+    const points = [];
+    for (let index = 0; index < last; index++)
+        for (let sample = 0; sample < samples; sample++) {
+            const t = sample / samples, t2 = t * t, t3 = t2 * t;
+            const y = (2 * t3 - 3 * t2 + 1) * ys[index] + (t3 - 2 * t2 + t) * step * tangents[index] + (3 * t2 - 2 * t3) * ys[index + 1] + (t3 - t2) * step * tangents[index + 1];
+            points.push([(index + t) * step, Math.min(1, Math.max(0, y))]);
+        }
+    points.push([1, ys[last]]);
+    return points;
+}
+/** Height of the sampled line at x, straight between samples. */
+function heightAt(shape, x) {
+    let low = 0, high = shape.length - 1;
+    if (x <= shape[low][0])
+        return shape[low][1];
+    if (x >= shape[high][0])
+        return shape[high][1];
+    while (high - low > 1) {
+        const middle = (low + high) >> 1;
+        if (shape[middle][0] < x)
+            low = middle;
+        else
+            high = middle;
+    }
+    const [x0, y0] = shape[low], [x1, y1] = shape[high];
+    return x1 === x0 ? y1 : y0 + ((y1 - y0) * (x - x0)) / (x1 - x0);
+}
+/** Every drawn string for one frame, in the chart's own pixels so strokes and dots stay round at any width. */
+function geometryOf(shape, w, h, at) {
+    const toY = (y) => inset + (1 - y) * (h - inset * 2);
+    const points = shape.map(([x, y]) => [x * w, toY(y)]);
+    const pairs = points.map(([x, y]) => `${x.toFixed(2)},${y.toFixed(2)}`);
+    const cx = at * w, cy = toY(heightAt(shape, at));
+    return { points, line: pairs.join(" "), trail: `M${pairs.join("L")}`, fill: `M${pairs.join("L")}L${w},${h}L0,${h}Z`, dot: `${cx},${cy} ${cx},${cy}`, cx };
+}
+/** Where the pen is along the line once `progress` of its length is drawn, so the fill follows the tip. */
+function tipAt(points, progress) {
+    const steps = points.slice(1).map(([x, y], index) => Math.hypot(x - points[index][0], y - points[index][1]));
+    let left = progress * steps.reduce((sum, step) => sum + step, 0);
+    for (let index = 0; index < steps.length; index++) {
+        const step = steps[index], from = points[index][0];
+        if (left <= step)
+            return from + (points[index + 1][0] - from) * (step ? left / step : 1);
+        left -= step;
+    }
+    return points[points.length - 1][0];
+}
+export function Sparkline({ data, label, value, change, tone = "accent", width = 160, height = 52, labels, formatValue, area = true, interactive = true }) {
+    const safeData = data.length > 1 ? data : [data[0] ?? 0, data[0] ?? 0];
+    const last = safeData.length - 1;
+    const key = safeData.join(",");
+    const target = useMemo(() => curveFor(key.split(",").map(Number)), [key]);
+    const description = `${label}: ${value ?? safeData[last]}. ${change ?? ""}`.trim();
+    const uid = `sparkline${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+    const ref = useRef(null);
+    const plot = useRef(null);
+    const inView = useInView(ref, { once: true, amount: .5 });
+    const reduceMotion = !!useReducedMotion();
+    const [box, setBox] = useState({ w: width, h: height });
+    const [active, setActive] = useState(null);
+    const [landed, setLanded] = useState(false);
+    const index = active === null ? null : Math.min(active, last);
+    const [moved, setMoved] = useState({ index, direction: 1 });
+    if (moved.index !== index)
+        setMoved({ index, direction: index === null || moved.index === null ? 1 : Math.sign(index - moved.index) || 1 });
+    const [first] = useState(() => geometryOf(target, width, height, 1));
+    const shape = useRef(target);
+    const size = useRef(box);
+    const drawn = useMotionValue(0), cursor = useMotionValue(1);
+    const line = useMotionValue(first.line), trail = useMotionValue(first.trail), fill = useMotionValue(first.fill), dot = useMotionValue(first.dot);
+    const cursorX = useMotionValue(first.cx), lit = useMotionValue(first.cx + cap + 16), dim = useMotionValue(first.cx + cap), reveal = useMotionValue(0);
+    const lineOpacity = useTransform(drawn, progress => progress > .001 ? 1 : 0);
+    // One writer for every drawn attribute: the morphing shape, the cursor, the pen and the measured size all repaint through here.
+    const paint = useCallback(() => {
+        const { w, h } = size.current, progress = drawn.get();
+        const next = geometryOf(shape.current, w, h, cursor.get());
+        line.set(next.line);
+        trail.set(next.trail);
+        fill.set(next.fill);
+        dot.set(next.dot);
+        cursorX.set(next.cx);
+        lit.set(next.cx + cap + 16);
+        dim.set(next.cx + cap);
+        reveal.set(progress >= 1 ? w + 32 : tipAt(next.points, progress) + 16);
+    }, [cursor, cursorX, dim, dot, drawn, fill, line, lit, reveal, trail]);
+    useMotionValueEvent(cursor, "change", paint);
+    useMotionValueEvent(drawn, "change", paint);
+    // The chart draws in its own pixels: measure the width, keep the height in proportion.
+    useLayoutEffect(() => {
+        const node = plot.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => { const w = node.clientWidth; if (w)
+            setBox(current => Math.abs(current.w - w) < .5 ? current : { w, h: (w * height) / width }); });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [height, width]);
+    useLayoutEffect(() => { size.current = box; paint(); }, [box, paint]);
+    // The line draws left to right once it is seen, the fill follows the pen, then the end dot lands.
+    useEffect(() => {
+        // Reduced motion shows the finished line at once; the dot lands a frame later, after hydration has matched the server.
+        if (reduceMotion) {
+            drawn.jump(1);
+            const frame = requestAnimationFrame(() => setLanded(true));
+            return () => cancelAnimationFrame(frame);
+        }
+        if (!inView)
+            return;
+        const controls = animate(drawn, 1, { ...draw, onComplete: () => setLanded(true) });
+        return () => controls.stop();
+    }, [drawn, inView, reduceMotion]);
+    // New data morphs the line from the shape on screen, sampled on shared x positions so a series that gains or loses points still flows.
+    useEffect(() => {
+        const from = shape.current;
+        if (from === target)
+            return;
+        if (reduceMotion) {
+            shape.current = target;
+            paint();
+            return;
+        }
+        const xs = [...new Set([...grid, ...target.map(([x]) => x)])].sort((a, b) => a - b);
+        const start = xs.map(x => heightAt(from, x)), goal = xs.map(x => heightAt(target, x));
+        const controls = animate(0, 1, { ...motionTokens.spring.smooth, onUpdate: progress => { shape.current = xs.map((x, at) => [x, start[at] + (goal[at] - start[at]) * progress]); paint(); }, onComplete: () => { shape.current = target; paint(); } });
+        return () => controls.stop();
+    }, [paint, reduceMotion, target]);
+    // The cursor springs to the scrubbed point and rides the line between points; leaving sends it home to the latest value.
+    useEffect(() => {
+        const to = index === null ? 1 : index / last;
+        if (reduceMotion) {
+            cursor.jump(to);
+            return;
+        }
+        const controls = animate(cursor, to, motionTokens.spring.snappy);
+        return () => controls.stop();
+    }, [cursor, index, last, reduceMotion]);
+    const scrubbing = index !== null;
+    const format = (at) => formatValue ? formatValue(safeData[at], at) : grouped.format(safeData[at]);
+    const point = format(index ?? last), when = labels?.[index ?? last];
+    const headline = value === undefined ? undefined : scrubbing ? point : value;
+    const aside = index === null ? change ?? "" : value === undefined ? [point, when].filter(Boolean).join(" · ") : when ?? `${index + 1} of ${last + 1}`;
+    const pointAt = (clientX) => { const rect = plot.current?.getBoundingClientRect(); return rect?.width ? Math.max(0, Math.min(last, Math.round(((clientX - rect.left) / rect.width) * last))) : last; };
+    const onKeyDown = (event) => {
+        if (event.key === "Escape" && scrubbing) {
+            event.preventDefault();
+            setActive(null);
+            return;
+        }
+        const from = index ?? last, page = Math.max(1, Math.round((last + 1) / 6));
+        const next = { ArrowLeft: from - 1, ArrowDown: from - 1, ArrowRight: from + 1, ArrowUp: from + 1, PageDown: from - page, PageUp: from + page, Home: 0, End: last }[event.key];
+        if (next === undefined)
+            return;
+        event.preventDefault();
+        setActive(Math.max(0, Math.min(last, next)));
+    };
+    const scrub = interactive ? {
+        role: "slider", tabIndex: 0, "aria-label": `${label}, explore values`, "aria-valuemin": 1, "aria-valuemax": last + 1, "aria-valuenow": (index ?? last) + 1, "aria-valuetext": `${when ?? (index === null ? "Latest" : `Point ${index + 1} of ${last + 1}`)}: ${point}`,
+        onPointerDown: (event) => setActive(pointAt(event.clientX)),
+        onPointerMove: (event) => { if (event.pointerType === "mouse" || event.buttons)
+            setActive(pointAt(event.clientX)); },
+        onPointerUp: (event) => { if (event.pointerType !== "mouse")
+            setActive(null); },
+        onPointerLeave: () => setActive(null), onPointerCancel: () => setActive(null), onBlur: () => setActive(null), onKeyDown,
+    } : {};
+    return _jsxs("figure", { ref: ref, className: styles.figure, "aria-label": description, children: [_jsxs("figcaption", { className: styles.caption, children: [_jsx("span", { className: styles.label, children: _jsx(Roll, { text: label, whole: true }) }), headline !== undefined && _jsx("strong", { children: _jsx(Roll, { text: headline, morph: true }) }), _jsx("small", { className: styles[tone], children: _jsx(Roll, { text: aside, direction: scrubbing ? moved.direction : undefined, tone: scrubbing ? styles.point : undefined, morph: true }) })] }), _jsx("div", { ref: plot, className: styles.plot, "data-interactive": interactive || undefined, ...scrub, children: _jsxs("svg", { className: styles.chart, viewBox: `0 0 ${box.w} ${box.h}`, "aria-hidden": "true", focusable: "false", children: [_jsxs("defs", { children: [_jsx("clipPath", { id: `${uid}-lit`, clipPathUnits: "userSpaceOnUse", children: _jsx(motion.rect, { x: -16, y: -16, width: lit, height: box.h + 32 }) }), _jsx("clipPath", { id: `${uid}-dim`, clipPathUnits: "userSpaceOnUse", children: _jsx(motion.rect, { x: dim, y: -16, width: box.w + 32, height: box.h + 32 }) }), _jsx("clipPath", { id: `${uid}-fill`, clipPathUnits: "userSpaceOnUse", children: _jsx(motion.rect, { x: -16, y: -16, width: reveal, height: box.h + 32 }) })] }), area && _jsx(motion.path, { className: `${styles.area} ${styles[tone]}`, d: fill, clipPath: `url(#${uid}-fill)` }), _jsx("line", { className: styles.baseline, x1: "0", y1: box.h - .5, x2: box.w, y2: box.h - .5 }), _jsx(motion.path, { className: styles.trail, d: trail, clipPath: `url(#${uid}-dim)`, initial: false, animate: { opacity: scrubbing && landed ? 1 : 0 }, transition: reduceMotion ? { duration: 0 } : quick }), _jsx(motion.polyline, { className: [styles.line, styles[tone]].join(" "), points: line, clipPath: `url(#${uid}-lit)`, style: { pathLength: drawn, opacity: lineOpacity } }), _jsx(motion.line, { className: styles.cursor, x1: cursorX, x2: cursorX, y1: 0, y2: box.h, initial: false, animate: { opacity: scrubbing ? 1 : 0 }, transition: reduceMotion ? { duration: 0 } : quick }), _jsx(motion.polyline, { className: [styles.end, styles[tone]].join(" "), points: dot, initial: false, animate: { opacity: landed ? 1 : 0, strokeWidth: landed ? scrubbing ? 10 : 7 : 0 }, transition: reduceMotion ? { duration: 0 } : { opacity: quick, strokeWidth: motionTokens.spring.snappy }, fill: "none", strokeLinecap: "round" })] }) })] });
+}
+export default Sparkline;