@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/filter-toolbar/filter-toolbar.js

@@ -0,0 +1,446 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { Check, ChevronLeft, ChevronRight, Plus, X } from "lucide-react";
+import { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useReducedMotion, useTransform } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./filter-toolbar.module.css";
+const enter = { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] };
+const leave = { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] };
+const still = { duration: 0 };
+const fade = { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] };
+const blur = (px) => `blur(${px}px)`;
+const clamp = (value) => Math.min(1, Math.max(0, value));
+const toOption = (entry) => typeof entry === "string" ? { value: entry } : entry;
+const optionText = (entry) => entry.label ?? entry.value;
+const textMotion = (reduced) => ({
+    initial: reduced ? { opacity: 0 } : { opacity: 0, y: "0.3em", filter: blur(motionTokens.blur.soft) },
+    animate: { opacity: 1, y: 0, filter: blur(0) },
+    exit: reduced ? { opacity: 0, transition: still } : { opacity: 0, y: "-0.3em", filter: blur(motionTokens.blur.subtle), transition: leave },
+    transition: reduced ? fade : enter,
+});
+/** Text that swaps with a rise and blur while its box springs to the new width, so nothing beside it snaps. */
+function MorphText({ text }) {
+    const reduced = useReducedMotion() ?? false;
+    const measure = useRef(null);
+    const width = useMotionValue("auto");
+    useLayoutEffect(() => {
+        const node = measure.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        let last = null;
+        // The observer reports the layout size, so an entering chip's scale never shrinks the measurement.
+        const observer = new ResizeObserver(([entry]) => {
+            if (!entry)
+                return;
+            const next = Math.ceil(entry.borderBoxSize?.[0]?.inlineSize ?? node.offsetWidth), changed = last !== null && last !== node.textContent;
+            last = node.textContent;
+            // Only a new value morphs; the first measure and font swaps settle at once.
+            if (changed && !reduced)
+                animate(width, next, motionTokens.spring.morph);
+            else
+                width.jump(next);
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [reduced, width]);
+    return _jsxs(motion.span, { className: styles.morphText, style: { width }, children: [_jsx("span", { ref: measure, className: styles.measure, "aria-hidden": "true", children: text }), _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(motion.span, { className: styles.morphValue, ...textMotion(reduced), children: text }, text) })] });
+}
+/** Springs a wrapper to the height of its content while filters change; other resizes follow at once. */
+function useFollowHeight(list, armed, reduced) {
+    const height = useMotionValue("auto");
+    useLayoutEffect(() => {
+        const node = list.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        let known = false;
+        const observer = new ResizeObserver(() => {
+            const next = node.offsetHeight;
+            if (!known || reduced || performance.now() > armed.current) {
+                known = true;
+                height.jump(next);
+                return;
+            }
+            animate(height, next, motionTokens.spring.smooth);
+        });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [armed, height, list, reduced]);
+    return height;
+}
+/** Chips glide with the slot widths, but a chip that wraps to another line would teleport. Resize observers run after
+ *  layout and before paint, so each jump is offset in the same frame and springs back to zero from where it was seen. */
+function useReflowGlide(list, armed, reduced) {
+    useLayoutEffect(() => {
+        const node = list.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        const tracks = new Map();
+        const check = () => {
+            const now = performance.now();
+            for (const child of Array.from(node.children)) {
+                const x = child.offsetLeft, y = child.offsetTop, track = tracks.get(child);
+                if (!track) {
+                    tracks.set(child, { x, y, dx: 0, dy: 0 });
+                    continue;
+                }
+                const jx = track.x - x, jy = track.y - y;
+                track.x = x;
+                track.y = y;
+                if (reduced || now > armed.current || (Math.abs(jy) < 1 && Math.abs(jx) < 40))
+                    continue;
+                track.stop?.();
+                const fromX = track.dx + jx, fromY = track.dy + jy;
+                const apply = (progress) => { track.dx = fromX * (1 - progress); track.dy = fromY * (1 - progress); child.style.translate = progress >= 1 ? "" : `${track.dx}px ${track.dy}px`; };
+                apply(0);
+                track.stop = animate(0, 1, { ...motionTokens.spring.smooth, onUpdate: apply, onComplete: () => apply(1) }).stop;
+            }
+            for (const child of tracks.keys())
+                if (child.parentElement !== node)
+                    tracks.delete(child);
+        };
+        const observer = new ResizeObserver(check);
+        const watch = () => { for (const child of Array.from(node.children))
+            observer.observe(child); };
+        const mutations = new MutationObserver(() => { watch(); check(); });
+        observer.observe(node);
+        watch();
+        mutations.observe(node, { childList: true });
+        return () => { observer.disconnect(); mutations.disconnect(); for (const track of tracks.values())
+            track.stop?.(); };
+    }, [armed, list, reduced]);
+}
+function describeChange(before, after) {
+    const text = (filter) => filter.value ? `${filter.label}: ${filter.value}` : filter.label;
+    const removed = before.filter(old => !after.some(filter => filter.id === old.id));
+    if (!after.length && removed.length > 1)
+        return "All filters cleared";
+    const added = after.filter(filter => !before.some(old => old.id === filter.id));
+    const changed = after.filter(filter => before.some(old => old.id === filter.id && old.value !== filter.value));
+    return [...added.map(filter => `Added ${text(filter)}`), ...changed.map(filter => `${filter.label} changed to ${filter.value ?? "any"}`), ...removed.map(filter => `Removed ${text(filter)}`)].join(". ");
+}
+/** A roving list with one highlight that glides under the pointer and jumps with the keyboard. */
+function MenuList({ rows, labelledBy, onChoose, onBack, onLeave, radio }) {
+    const reduced = useReducedMotion() ?? false;
+    const present = useIsPresent();
+    const list = useRef(null);
+    const pointer = useRef(false);
+    const typed = useRef({ text: "", at: 0 });
+    const [current, setCurrent] = useState(() => Math.max(0, rows.findIndex(row => row.checked)));
+    const [highlight, setHighlight] = useState(null);
+    const items = () => Array.from(list.current?.querySelectorAll("[data-row]") ?? []);
+    const move = (item) => {
+        const node = list.current;
+        if (!item || !node)
+            return;
+        item.focus({ preventScroll: true });
+        if (item.offsetTop < node.scrollTop)
+            node.scrollTop = item.offsetTop;
+        else if (item.offsetTop + item.offsetHeight > node.scrollTop + node.clientHeight)
+            node.scrollTop = item.offsetTop + item.offsetHeight - node.clientHeight;
+    };
+    function onKeyDown(event) {
+        const all = items(), index = all.indexOf(document.activeElement);
+        const go = (next) => { event.preventDefault(); pointer.current = false; move(all[next]); };
+        if (event.key === "ArrowDown")
+            return go(index < 0 ? 0 : (index + 1) % all.length);
+        if (event.key === "ArrowUp")
+            return go(index < 0 ? all.length - 1 : (index - 1 + all.length) % all.length);
+        if (event.key === "Home")
+            return go(0);
+        if (event.key === "End")
+            return go(all.length - 1);
+        if (event.key === "ArrowRight" && index >= 0 && rows[index]?.drill) {
+            event.preventDefault();
+            onChoose(rows[index], true);
+            return;
+        }
+        if (event.key === "ArrowLeft" && onBack) {
+            event.preventDefault();
+            onBack(true);
+            return;
+        }
+        if (event.key.length === 1 && /\S/.test(event.key) && !event.metaKey && !event.ctrlKey && !event.altKey) {
+            const now = performance.now();
+            typed.current = { text: now - typed.current.at < 700 ? typed.current.text + event.key.toLowerCase() : event.key.toLowerCase(), at: now };
+            const order = [...all.slice(index + (typed.current.text.length > 1 ? 0 : 1)), ...all.slice(0, index + (typed.current.text.length > 1 ? 0 : 1))];
+            const match = order.find(item => (item.dataset.text ?? "").toLowerCase().startsWith(typed.current.text));
+            if (match)
+                go(all.indexOf(match));
+        }
+    }
+    function onFocus(event) {
+        const item = event.target.closest("[data-row]");
+        if (!item)
+            return;
+        setCurrent(items().indexOf(item));
+        // Keyboard focus also draws the focus ring inside the highlight, where the scrolling list cannot clip it.
+        const glide = pointer.current && !reduced, ring = !pointer.current && item.matches(":focus-visible");
+        setHighlight(previous => ({ top: item.offsetTop, height: item.offsetHeight, glide: glide && !!previous?.shown, ring, shown: true }));
+    }
+    function onBlur(event) {
+        // The highlight fades where it is; it keeps its place so the fade is visible.
+        if (!list.current?.contains(event.relatedTarget))
+            setHighlight(previous => previous && { ...previous, glide: false, ring: false, shown: false });
+    }
+    return _jsxs("div", { ref: list, className: styles.list, role: "menu", "aria-labelledby": labelledBy, "data-current": present ? "" : undefined, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, onPointerLeave: () => { if (pointer.current && list.current?.contains(document.activeElement))
+            onLeave(); }, children: [_jsx(motion.span, { className: styles.highlight, "data-ring": highlight?.ring || undefined, "aria-hidden": "true", initial: false, animate: highlight ? { y: highlight.top, height: highlight.height, opacity: highlight.shown ? 1 : 0 } : { opacity: 0 }, transition: { default: highlight?.glide ? motionTokens.spring.snappy : still, opacity: { duration: reduced ? 0 : .08 } } }), rows.map((row, index) => _jsxs("button", { type: "button", className: styles.item, role: radio ? "menuitemradio" : "menuitem", "aria-checked": radio ? !!row.checked : undefined, tabIndex: index === current ? 0 : -1, "data-row": row.key, "data-text": row.label, onPointerMove: event => { pointer.current = true; if (document.activeElement !== event.currentTarget)
+                    event.currentTarget.focus({ preventScroll: true }); }, onClick: (event) => onChoose(row, event.detail === 0), children: [row.icon ? _jsx("span", { className: styles.itemIcon, "aria-hidden": "true", children: row.icon }) : null, _jsx("span", { className: styles.itemLabel, children: row.label }), row.meta ? _jsx("span", { className: styles.itemMeta, children: row.meta }) : null] }, row.key))] });
+}
+/** The room the panel may use: the viewport, narrowed on each axis by any ancestor that clips that axis, so a panel
+ *  inside a scrolling or clipped container flips and shifts within what is actually visible. */
+function roomFor(node) {
+    const room = { left: 0, top: 0, right: document.documentElement.clientWidth, bottom: window.innerHeight };
+    for (let parent = node.parentElement; parent && parent !== document.body; parent = parent.parentElement) {
+        const style = getComputedStyle(parent);
+        if (style.overflowX === "visible" && style.overflowY === "visible")
+            continue;
+        const box = parent.getBoundingClientRect();
+        if (style.overflowX !== "visible") {
+            room.left = Math.max(room.left, box.left);
+            room.right = Math.min(room.right, box.right);
+        }
+        if (style.overflowY !== "visible") {
+            room.top = Math.max(room.top, box.top);
+            room.bottom = Math.min(room.bottom, box.bottom);
+        }
+    }
+    return room;
+}
+/** An Add filter button that grows into its own menu: pick a field, then a value. The shape springs between the
+ *  button and the panel, and the panel renders in place, so keep its ancestors free of overflow clipping. */
+export function FilterMenu({ fields, onSelect, active = [], label = "Add filter", align = "end" }) {
+    const reduced = useReducedMotion() ?? false;
+    const id = useId(), panelId = `${id}panel`, titleId = `${id}title`;
+    const root = useRef(null), trigger = useRef(null), panel = useRef(null);
+    const phaseRef = useRef("closed"), run = useRef(0), focusNext = useRef(null);
+    const [phase, setPhase] = useState("closed");
+    const [fieldId, setFieldId] = useState(null);
+    const [direction, setDirection] = useState(1);
+    const [up, setUp] = useState(false);
+    // The content scales up from the trigger's center, so it reads as growing out of the button.
+    const [origin, setOrigin] = useState("100% 0");
+    // The surface is the button's own rounded rectangle. At rest it fills the trigger; while open it springs to the panel.
+    const width = useMotionValue("100%"), height = useMotionValue("100%");
+    const left = useMotionValue(0), target = useMotionValue(0);
+    // The panel content stays put at its final position while the surface edge travels across it.
+    const panelX = useTransform(() => target.get() - left.get());
+    // How far the shape has grown from the button (0) to the panel (1). The label and the content read it, so they
+    // reveal with the morph, never ahead of the growing edge, and reverse with it when a close interrupts an open.
+    const from = useMotionValue(0), to = useMotionValue(0);
+    const progress = useTransform(() => { const now = width.get(), start = from.get(), end = to.get(); return typeof now !== "number" ? 0 : end > start ? clamp((now - start) / (end - start)) : 1; });
+    const faceOut = useTransform(() => clamp(progress.get() / .35)), contentIn = useTransform(() => clamp((progress.get() - .4) / .5));
+    // Reduced motion jumps the shape, so progress goes 0 to 1 in one frame and these in-between values never paint.
+    const faceStyle = { opacity: useTransform(() => 1 - faceOut.get()), scale: useTransform(() => 1 - faceOut.get() * .04), filter: useTransform(() => faceOut.get() ? blur(faceOut.get() * motionTokens.blur.subtle) : "none") };
+    const contentStyle = { opacity: contentIn, transformOrigin: origin, scale: useTransform(() => .96 + contentIn.get() * .04), y: useTransform(() => (1 - contentIn.get()) * (up ? -6 : 6)), filter: useTransform(() => contentIn.get() === 1 ? "none" : blur((1 - contentIn.get()) * motionTokens.blur.soft)) };
+    const open = phase === "open", field = fields.find(entry => entry.id === fieldId) ?? null;
+    const openMenu = useCallback((focus) => {
+        const button = trigger.current, content = panel.current;
+        if (!button || !content)
+            return;
+        const rect = button.getBoundingClientRect(), panelWidth = content.offsetWidth + 2, panelHeight = content.offsetHeight + 2;
+        const room = roomFor(root.current ?? button), gutter = 16;
+        const min = room.left + gutter - rect.left, max = room.right - gutter - rect.left - panelWidth, end = rect.width - panelWidth;
+        let x = align === "end" ? (end >= min ? end : 0 <= max ? 0 : end) : (0 <= max ? 0 : end >= min ? end : 0);
+        x = Math.round(Math.min(Math.max(x, min), Math.max(min, max)));
+        const below = room.bottom - rect.top, above = rect.bottom - room.top;
+        const nextUp = below < panelHeight + gutter && above > below;
+        if (phaseRef.current === "closed") {
+            width.jump(rect.width);
+            height.jump(rect.height);
+            left.jump(0);
+        }
+        target.jump(x);
+        from.jump(rect.width);
+        to.jump(panelWidth);
+        phaseRef.current = "open";
+        run.current += 1;
+        focusNext.current = focus;
+        setPhase("open");
+        setUp(nextUp);
+        setFieldId(null);
+        setDirection(-1);
+        setOrigin(`${Math.round(rect.width / 2 - x)}px ${nextUp ? "100%" : "0"}`);
+        const transition = reduced ? still : motionTokens.spring.morph;
+        animate(left, x, transition);
+        animate(width, panelWidth, transition);
+        animate(height, panelHeight, transition);
+    }, [align, from, height, left, reduced, target, to, width]);
+    const closeMenu = useCallback((restore) => {
+        const button = trigger.current;
+        if (phaseRef.current !== "open" || !button)
+            return;
+        phaseRef.current = "closing";
+        const token = (run.current += 1);
+        setPhase("closing");
+        // Focus returns to the trigger; its ring shows only when the menu was closed from the keyboard.
+        if (restore)
+            button.focus({ preventScroll: true, focusVisible: restore === "keyboard" });
+        // Closing is quicker than opening: the snappy spring lands the shape back on the button.
+        const transition = reduced ? still : motionTokens.spring.snappy;
+        animate(left, 0, transition);
+        const rect = button.getBoundingClientRect();
+        animate(height, rect.height, transition);
+        animate(width, rect.width, { ...transition, onComplete: () => {
+                if (token !== run.current)
+                    return;
+                phaseRef.current = "closed";
+                width.jump("100%");
+                height.jump("100%");
+                setPhase("closed");
+                setFieldId(null);
+            } });
+    }, [height, left, reduced, width]);
+    // A new step changes the panel height; the surface follows on the smooth spring instead of snapping.
+    useLayoutEffect(() => {
+        const content = panel.current;
+        if (!content || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => {
+            if (phaseRef.current !== "open")
+                return;
+            animate(height, content.offsetHeight + 2, reduced ? still : motionTokens.spring.smooth);
+        });
+        observer.observe(content);
+        return () => observer.disconnect();
+    }, [height, reduced]);
+    // Focus moves into the panel once it is interactive: an item for keyboard users, the dialog itself for the pointer.
+    useLayoutEffect(() => {
+        const request = focusNext.current, content = panel.current;
+        if (!request || !content || phase !== "open")
+            return;
+        focusNext.current = null;
+        if (request === "panel") {
+            content.focus({ preventScroll: true });
+            return;
+        }
+        const items = Array.from(content.querySelectorAll("[data-current] [data-row]"));
+        const next = request === "first" ? items[0] : request === "last" ? items.at(-1) : request === "checked" ? items.find(item => item.getAttribute("aria-checked") === "true") ?? items[0] : items.find(item => item.dataset.row === request.key) ?? items[0];
+        next?.focus({ preventScroll: true });
+    }, [phase, fieldId]);
+    useEffect(() => {
+        if (phase !== "open")
+            return;
+        const onPointerDown = (event) => {
+            const node = root.current, hit = event.target;
+            if (!node || (hit && node.contains(hit)))
+                return;
+            closeMenu(false);
+            // A press on empty space hands focus back to the trigger; a press on another control keeps its own focus.
+            if (!hit?.closest?.("button, a[href], input, select, textarea, [tabindex], [contenteditable]"))
+                window.setTimeout(() => {
+                    const focused = document.activeElement;
+                    if (!focused || focused === document.body || node.contains(focused))
+                        trigger.current?.focus({ preventScroll: true, focusVisible: false });
+                }, 0);
+        };
+        document.addEventListener("pointerdown", onPointerDown, true);
+        return () => document.removeEventListener("pointerdown", onPointerDown, true);
+    }, [closeMenu, phase]);
+    function onPanelKeyDown(event) {
+        if (event.defaultPrevented)
+            return;
+        const items = Array.from(panel.current?.querySelectorAll("[data-current] [data-row]") ?? []);
+        if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+            event.preventDefault();
+            (event.key === "ArrowDown" ? items[0] : items.at(-1))?.focus({ preventScroll: true });
+        }
+        if (event.key === "ArrowLeft" && field) {
+            event.preventDefault();
+            goBack(true);
+        }
+    }
+    function goBack(keyboard) {
+        if (!field)
+            return;
+        focusNext.current = keyboard ? { key: field.id } : "panel";
+        setDirection(-1);
+        setFieldId(null);
+    }
+    function chooseField(row, keyboard) {
+        focusNext.current = keyboard ? "checked" : "panel";
+        setDirection(1);
+        setFieldId(row.key);
+    }
+    function chooseValue(row, keyboard) {
+        if (!field)
+            return;
+        onSelect({ id: field.id, label: field.label, value: row.label }, field);
+        closeMenu(keyboard ? "keyboard" : "pointer");
+    }
+    const current = (entry) => active.find(filter => filter.id === entry.id)?.value;
+    const fieldRows = fields.map(entry => ({ key: entry.id, label: entry.label, icon: entry.icon, drill: true,
+        meta: _jsxs(_Fragment, { children: [current(entry) ? _jsx("span", { className: styles.metaValue, children: current(entry) }) : null, _jsx(ChevronRight, { size: 15, strokeWidth: 1.8, "aria-hidden": "true" })] }) }));
+    const valueRows = field ? field.options.map(toOption).map(entry => {
+        const text = optionText(entry), checked = current(field) === text;
+        return { key: entry.value, label: text, icon: entry.icon, checked, meta: entry.hint != null || checked ? _jsxs(_Fragment, { children: [entry.hint != null ? _jsx("span", { className: styles.hint, children: entry.hint }) : null, _jsx("span", { className: styles.check, "data-on": checked || undefined, children: _jsx(Check, { size: 15, strokeWidth: 2, "aria-hidden": "true" }) })] }) : null };
+    }) : [];
+    // Steps travel in the direction of the move: forward slides in from the end edge, back from the start edge.
+    const step = {
+        enter: (dir) => reduced ? { opacity: 0 } : { opacity: 0, x: dir * 18, filter: blur(motionTokens.blur.soft) },
+        center: { opacity: 1, x: 0, filter: blur(0), transition: reduced ? fade : { ...enter, x: motionTokens.spring.smooth } },
+        exit: (dir) => reduced ? { opacity: 0, transition: still } : { opacity: 0, x: dir * -18, filter: blur(motionTokens.blur.subtle), transition: leave },
+    };
+    return _jsxs("div", { ref: root, className: styles.menu, "data-state": phase, "data-y": up ? "up" : "down", onKeyDown: event => { if (event.key === "Escape" && phaseRef.current === "open") {
+            event.preventDefault();
+            event.stopPropagation();
+            closeMenu("keyboard");
+        } }, onBlur: event => { const next = event.relatedTarget; if (phaseRef.current === "open" && next && !root.current?.contains(next))
+            closeMenu(false); }, children: [_jsx("button", { ref: trigger, type: "button", className: styles.trigger, "data-filter-trigger": "", "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": panelId, tabIndex: open ? -1 : undefined, onClick: event => { if (phaseRef.current !== "open")
+                    openMenu(event.detail === 0 ? "first" : "panel"); }, onKeyDown: event => { if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+                    event.preventDefault();
+                    openMenu(event.key === "ArrowDown" ? "first" : "last");
+                } }, children: _jsxs(motion.span, { className: styles.face, style: faceStyle, children: [_jsx(Plus, { size: 15, strokeWidth: 1.8, "aria-hidden": "true" }), label] }) }), _jsx(motion.div, { className: styles.surface, style: { left, width, height }, children: _jsx(motion.div, { ref: panel, id: panelId, className: styles.panel, role: "dialog", "aria-labelledby": titleId, tabIndex: -1, inert: !open, style: { x: panelX }, onKeyDown: onPanelKeyDown, children: _jsxs(motion.div, { style: contentStyle, children: [_jsxs("div", { className: styles.head, children: [_jsx(AnimatePresence, { initial: false, children: field ? _jsx(motion.button, { type: "button", className: styles.back, "aria-label": "Back to fields", onClick: event => goBack(event.detail === 0), initial: reduced ? { opacity: 0, width: 28, marginRight: 2 } : { opacity: 0, width: 0, marginRight: 0, scale: .6 }, animate: { opacity: 1, width: 28, marginRight: 2, scale: 1 }, exit: reduced ? { opacity: 0, transition: still } : { opacity: 0, width: 0, marginRight: 0, scale: .6, transition: { ...motionTokens.spring.snappy, opacity: leave } }, transition: reduced ? fade : { ...motionTokens.spring.snappy, opacity: enter }, children: _jsx(ChevronLeft, { size: 16, strokeWidth: 1.8, "aria-hidden": "true" }) }, "back") : null }), _jsx("span", { className: styles.title, id: titleId, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(motion.span, { className: styles.titleText, ...textMotion(reduced), children: field ? field.label : label }, field?.id ?? "fields") }) })] }), _jsx("div", { className: styles.stage, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: direction, children: _jsx(motion.div, { className: styles.step, custom: direction, variants: step, initial: "enter", animate: "center", exit: "exit", children: field
+                                            ? _jsx(MenuList, { rows: valueRows, labelledBy: titleId, radio: true, onChoose: chooseValue, onBack: goBack, onLeave: () => panel.current?.focus({ preventScroll: true }) })
+                                            : _jsx(MenuList, { rows: fieldRows, labelledBy: titleId, onChoose: chooseField, onLeave: () => panel.current?.focus({ preventScroll: true }) }) }, field?.id ?? "fields") }) })] }) }) })] });
+}
+export function FilterToolbar({ filters, onRemove, onClearAll, children, label = "Active filters", addFilter }) {
+    const reduced = useReducedMotion() ?? false;
+    const root = useRef(null), list = useRef(null);
+    const armed = useRef(0), pendingFocus = useRef(null);
+    const [seen, setSeen] = useState(filters);
+    const [message, setMessage] = useState("");
+    if (seen !== filters) {
+        setSeen(filters);
+        const next = describeChange(seen, filters);
+        if (next)
+            setMessage(next);
+    }
+    const signature = filters.map(filter => `${filter.id}:${filter.value ?? ""}`).join("|");
+    // Layout motion runs only for a moment after the filters change, so window resizes and font swaps settle at once.
+    useLayoutEffect(() => { armed.current = performance.now() + 900; }, [signature]);
+    const frameHeight = useFollowHeight(list, armed, reduced);
+    useReflowGlide(list, armed, reduced);
+    // A removed chip hands focus to its neighbor, or to the Add filter trigger once the list is empty.
+    useLayoutEffect(() => {
+        const index = pendingFocus.current, node = root.current;
+        if (index === null || !node)
+            return;
+        pendingFocus.current = null;
+        const next = filters[Math.min(index, filters.length - 1)];
+        const target = next ? node.querySelector(`[data-chip-remove="${CSS.escape(next.id)}"]`) : node.querySelector("[data-filter-trigger]");
+        target?.focus({ preventScroll: true });
+    }, [filters]);
+    const still = { duration: 0 };
+    // Each chip sits in a slot whose width grows or collapses, so the chips beside it, the toolbar, and its
+    // actions all follow in the normal flow. While the slot moves it clips, and the chip keeps its natural width.
+    // (Popping chips out of the flow would glide the chips but snap the width of a content-sized toolbar.)
+    const slot = (gap) => ({
+        initial: reduced ? false : { width: 0, marginRight: -gap, overflow: "clip", "--slot-moving": 1 },
+        animate: { width: "auto", marginRight: 0, transitionEnd: { overflow: "visible", "--slot-moving": 0 } },
+        exit: reduced ? { opacity: 0, transition: still } : { width: 0, marginRight: -gap, overflow: "clip", "--slot-moving": 1, pointerEvents: "none", transition: { ...motionTokens.spring.smooth, "--slot-moving": still } },
+        transition: reduced ? still : motionTokens.spring.smooth,
+    });
+    const chip = {
+        initial: reduced ? false : { opacity: 0, scale: .9, filter: blur(motionTokens.blur.soft) },
+        animate: { opacity: 1, scale: 1, filter: blur(0) },
+        exit: reduced ? { opacity: 0, transition: still } : { opacity: 0, scale: .9, filter: blur(motionTokens.blur.subtle), transition: leave },
+        transition: reduced ? still : { ...enter, scale: motionTokens.spring.snappy },
+    };
+    const text = reduced ? { ...textMotion(true), initial: false } : textMotion(false);
+    // The note waits for the leaving chips to fade before it rises in.
+    const emptyText = reduced ? text : { ...text, transition: { ...enter, delay: motionTokens.duration.instant * .75 } };
+    return _jsxs("div", { ref: root, className: styles.toolbar, role: "group", "aria-label": label, children: [_jsx(motion.div, { className: styles.frame, style: { height: frameHeight }, children: _jsxs("div", { ref: list, className: styles.chips, children: [_jsx(AnimatePresence, { initial: false, children: filters.map((filter, index) => _jsx(motion.span, { className: styles.slot, ...slot(8), children: _jsxs(motion.span, { className: styles.chip, ...chip, children: [_jsxs("span", { className: styles.chipLabel, children: [filter.label, filter.value ? _jsxs("span", { className: styles.value, children: [_jsx("span", { className: styles.separator, children: " \u00B7 " }), _jsx(MorphText, { text: filter.value })] }) : null] }), _jsx("button", { type: "button", "data-chip-remove": filter.id, "aria-label": `Remove ${filter.label}${filter.value ? `: ${filter.value}` : ""}`, onClick: event => { if (document.activeElement === event.currentTarget)
+                                                pendingFocus.current = index; onRemove(filter.id); }, children: _jsx(X, { size: 14, strokeWidth: 1.8, "aria-hidden": "true" }) })] }) }, filter.id)) }), _jsx(AnimatePresence, { initial: false, children: filters.length ? null : _jsx(motion.span, { className: styles.empty, ...emptyText, children: "No filters applied" }, "empty") })] }) }), _jsxs("div", { className: styles.actions, children: [addFilter ? _jsx(FilterMenu, { fields: addFilter.fields, onSelect: addFilter.onAdd, active: filters, label: addFilter.label, align: addFilter.align }) : null, children, _jsx(AnimatePresence, { initial: false, children: filters.length > 0 ? _jsx(motion.span, { className: styles.slot, ...slot(12), children: _jsx("button", { className: styles.clear, type: "button", onClick: () => { pendingFocus.current = -1; onClearAll?.(); }, children: _jsx(motion.span, { className: styles.clearText, ...text, children: "Clear all" }) }) }, "clear") : null })] }), _jsx("span", { className: styles.srOnly, role: "status", children: message })] });
+}
+export default FilterToolbar;

package/components/filter-toolbar/filter-toolbar.module.css

@@ -0,0 +1,70 @@
+.toolbar { position: relative; display: flex; min-height: var(--control-height-lg); align-items: flex-start; justify-content: space-between; gap: var(--space-inset); padding: var(--space-group) var(--space-inset); border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface); }
+/* The frame springs to the chip list height, so a new line of chips opens the toolbar instead of snapping it. */
+.frame { min-width: 0; flex: 1; }
+.chips { position: relative; display: flex; min-width: 0; min-height: var(--control-height-sm); flex-wrap: wrap; align-items: center; gap: var(--space-related); }
+/* The slot clips with a pill radius while it opens, so a growing chip reads as a pill stretching out, never as a hard cut. */
+.slot { display: inline-flex; max-width: 100%; min-width: 0; flex: none; border-radius: var(--radius-full); corner-shape: round; }
+/* --slot-moving is 1 while the slot animates: the chip then ignores the slot width instead of squeezing. */
+.chip { display: inline-flex; max-width: calc(100% + var(--slot-moving, 0) * 100vw); flex: none; min-height: var(--control-height-sm); align-items: center; gap: var(--space-related); padding: 0 var(--space-related) 0 var(--space-group); border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-muted); color: var(--text-secondary); font-size: var(--text-xs); }
+.chipLabel { overflow-x: clip; overflow-y: visible; text-overflow: ellipsis; white-space: nowrap; }
+.value { color: var(--foreground); font-weight: 500; }
+.separator { color: var(--text-secondary); font-weight: 400; }
+.morphText { position: relative; display: inline-flex; overflow-x: clip; overflow-y: visible; white-space: nowrap; vertical-align: bottom; }
+.morphValue { display: inline-block; flex: none; white-space: nowrap; }
+.measure { position: absolute; top: 0; left: 0; visibility: hidden; white-space: nowrap; pointer-events: none; }
+.chip button { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-muted); cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
+.chip button:active { transform: scale(.96); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-instant); transition-timing-function: var(--ease-standard), var(--ease-standard), var(--ease-standard); }
+.empty { position: absolute; top: 0; bottom: 0; left: 0; display: flex; max-width: 100%; align-items: center; overflow: hidden; color: var(--text-muted); font-size: var(--text-sm); white-space: nowrap; pointer-events: none; }
+.actions { display: inline-flex; flex: 0 0 auto; align-items: center; gap: var(--space-group); }
+.clear { min-height: var(--control-height-sm); padding: 0 var(--space-group); border: 0; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: transparent; color: var(--text-muted); font: inherit; font-size: var(--text-sm); line-height: var(--leading-body); letter-spacing: var(--tracking-body); white-space: nowrap; cursor: pointer; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
+.clearText { display: block; }
+.clear:active { transform: scale(.97); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-instant); transition-timing-function: var(--ease-standard), var(--ease-standard), var(--ease-standard); }
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
+/* Add filter: the trigger is transparent and the surface behind it is the button's rounded rectangle.
+   Opening springs that same surface to the panel size, so the button itself becomes the menu. */
+.menu { position: relative; display: inline-flex; flex: none; isolation: isolate; }
+.menu:not([data-state="closed"]) { z-index: 30; }
+.trigger { position: relative; z-index: 1; display: inline-flex; min-height: var(--control-height-sm); align-items: center; padding: 0 var(--space-group); border: 1px solid transparent; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); letter-spacing: var(--tracking-body); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
+.menu[data-state="open"] .trigger { pointer-events: none; }
+.face { display: inline-flex; align-items: center; gap: var(--space-related); }
+.face svg { flex: none; }
+/* clip, not hidden: focus and scripts cannot scroll the panel inside the growing shape. */
+.surface { position: absolute; top: 0; z-index: 0; box-sizing: border-box; overflow: clip; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface); transition: background-color var(--duration-fast) var(--ease-standard), border-radius var(--duration-spring) var(--ease-spring), box-shadow var(--duration-standard) var(--ease-standard); }
+.menu[data-y="up"] .surface { top: auto; bottom: 0; }
+.menu[data-state="open"] .surface { border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); box-shadow: var(--shadow-floating); }
+/* The trigger anchors the panel, so a press answers in color and never scales. */
+.menu[data-state="closed"] .trigger:active + .surface { background: color-mix(in oklab, var(--surface-muted), var(--border) 55%); }
+@media (hover: hover) and (pointer: fine) {
+  .menu[data-state="closed"] .trigger:hover + .surface { background: var(--surface-muted); box-shadow: var(--shadow-resting); }
+}
+.panel { position: absolute; top: 0; left: 0; width: min(var(--filter-menu-width, 16rem), calc(100vw - var(--space-block))); padding: 6px 6px 6px; outline: none; }
+.menu[data-y="up"] .panel { top: auto; bottom: 0; }
+.menu[data-state="closed"] .panel { visibility: hidden; }
+.head { display: flex; height: 32px; align-items: center; padding: 0 var(--space-related) 0 10px; }
+.menu[data-y="up"] .head { margin-top: 4px; }
+.back { display: grid; width: 28px; height: 28px; flex: none; place-items: center; margin-left: -6px; padding: 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+.back:active { background: var(--surface-muted); color: var(--foreground); }
+.title { position: relative; display: flex; min-width: 0; color: var(--foreground); font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-body); white-space: nowrap; }
+.titleText { display: block; }
+.stage { position: relative; margin-top: 2px; }
+.step { width: 100%; }
+.list { position: relative; display: grid; max-height: min(20rem, 55vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
+.highlight { position: absolute; top: 0; right: 0; left: 0; border-radius: calc(var(--radius-container) - 6px); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6%, transparent); opacity: 0; pointer-events: none; }
+.item:focus-visible { outline: none; }
+.item { position: relative; display: flex; min-width: 0; min-height: var(--control-height-sm); align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: calc(var(--radius-container) - 6px); corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); text-align: left; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
+.itemIcon { display: inline-flex; min-width: 16px; flex: none; align-items: center; justify-content: center; color: var(--text-secondary); }
+.itemLabel { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.itemMeta { display: inline-flex; min-width: 0; flex: none; align-items: center; gap: 6px; max-width: 50%; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.metaValue { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hint { min-width: 2ch; text-align: right; }
+.check { display: inline-flex; width: 15px; color: var(--foreground); opacity: 0; }
+.check[data-on] { opacity: 1; }
+@media (hover: hover) and (pointer: fine) {
+  .chip button:hover { background: var(--border); color: var(--foreground); }
+  .clear:hover { background: var(--surface-muted); color: var(--foreground); }
+  .back:hover { background: var(--surface-muted); color: var(--foreground); }
+}
+/* In a column the frame must size from its height, not a zero flex basis, or its spring is ignored and a new line of chips snaps. */
+@media (max-width: 520px) { .toolbar { align-items: stretch; flex-direction: column; } .frame { flex: none; } .actions { justify-content: flex-end; } }
+@media (prefers-reduced-motion: reduce) { .chip button, .clear, .surface, .back { transition: none; } .chip button:active, .clear:active { transform: none; } }

package/components/floating-button-group/floating-button-group.d.ts

@@ -0,0 +1,51 @@
+import type { CSSProperties, ReactNode } from "react";
+export type FloatingButtonGroupVariant = "muted" | "floating";
+export type FloatingButtonGroupSize = "sm" | "md";
+export type FloatingButtonGroupOrientation = "horizontal" | "vertical";
+export interface FloatingButtonGroupAction {
+    type?: "action";
+    /** Stable key, also passed to onAction. */
+    id: string;
+    /** Visible label, and the accessible name when the item shows only its icon. */
+    label: string;
+    icon?: ReactNode;
+    /** Shows only the icon. The label moves into a tooltip and the accessible name. Overrides the group's iconOnly. */
+    iconOnly?: boolean;
+    onSelect?: () => void;
+    disabled?: boolean;
+    /** Marks an action that switches a mode on, such as Present. Sets aria-pressed and keeps a quiet tint while on. */
+    pressed?: boolean;
+    /** A shortcut hint shown in the tooltip, such as "⌘Z". The component does not bind the key. */
+    shortcut?: string;
+    /** Other labels this item can switch to, such as ["Copied"] for Share. The button keeps the width of the widest, so a label change never moves anything. */
+    reserveLabels?: readonly string[];
+}
+export interface FloatingButtonGroupSeparator {
+    type: "separator";
+    id?: string;
+}
+export type FloatingButtonGroupItem = FloatingButtonGroupAction | FloatingButtonGroupSeparator;
+export interface FloatingButtonGroupProps {
+    items: readonly FloatingButtonGroupItem[];
+    /** Accessible name of the toolbar, such as "Board actions". */
+    label: string;
+    /** muted sits quietly on a page; floating raises the tray with the floating shadow for overlays such as a selection toolbar. */
+    variant?: FloatingButtonGroupVariant;
+    size?: FloatingButtonGroupSize;
+    orientation?: FloatingButtonGroupOrientation;
+    /** Shows every item as an icon only, with its label in a tooltip. Items with their own iconOnly win. */
+    iconOnly?: boolean;
+    /** Side of the item tooltips. Defaults to top for a row and right for a column. */
+    tooltipSide?: "top" | "bottom" | "left" | "right";
+    /** Called with the item id after the item's own onSelect. */
+    onAction?: (id: string) => void;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Separate soft buttons in a quiet tray. One shared highlight morphs, in position and size, to whichever button the pointer
+ * or keyboard focus is on, fades when the pointer leaves the tray, and settles darker in place while a button is pressed.
+ * It is the toolbar's only hover and focus indicator. Arrow keys move focus, Home and End jump to the ends, Enter and Space act.
+ */
+export declare function FloatingButtonGroup({ items, label, variant, size, orientation, iconOnly: groupIconOnly, tooltipSide, onAction, className, style }: FloatingButtonGroupProps): import("react").JSX.Element;
+export default FloatingButtonGroup;