@teamofsilicons/silicon-ui 0.3.0 → 0.4.0

package/components/time-picker/time-picker.js

@@ -4,6 +4,7 @@ import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { ChevronDown, Clock3 } from "lucide-react";
 import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { motionTokens } from "../../lib/motion-tokens.js";
+import { useNearestItem } from "../../lib/fluid-hover.js";
 import styles from "./time-picker.module.css";
 const pad = (value) => String(value).padStart(2, "0");
 const toMinutes = (value) => { const [h = NaN, m = NaN] = value.split(":").map(Number); return Number.isFinite(h) && Number.isFinite(m) ? h * 60 + m : 0; };
@@ -27,6 +28,8 @@ export function TimePicker({ label, value, defaultValue = "09:00", onChange, des
     const [internal, setInternal] = useState(defaultValue);
     const [open, setOpen] = useState(false);
     const [activeIndex, setActiveIndex] = useState(-1);
+    // Fluid hover: the mouse makes the nearest time active, gaps and padding included, and a click there picks it.
+    const nearest = useNearestItem({ items: '[role="option"]', onPick: item => setActiveIndex(Number(item.dataset.index)) });
     const selected = value ?? internal;
     const reduce = useReducedMotion();
     const [previous, setPrevious] = useState(selected);
@@ -90,6 +93,5 @@ export function TimePicker({ label, value, defaultValue = "09:00", onChange, des
             setActiveIndex(index => (index + (event.key === "ArrowDown" ? 1 : -1) + options.length) % options.length);
         }
     };
-    return _jsxs("div", { ref: rootRef, className: [styles.field, className].filter(Boolean).join(" "), children: [_jsx("span", { id: labelId, className: styles.label, children: label }), _jsxs("div", { className: styles.anchor, children: [_jsxs("button", { type: "button", className: styles.trigger, disabled: disabled, "aria-labelledby": `${labelId} ${valueId}`, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": `${id}-listbox`, onClick: () => open ? setOpen(false) : openMenu(), onKeyDown: onKeyDown, children: [_jsx(Clock3, { size: 16, "aria-hidden": "true" }), _jsx("span", { id: valueId, className: styles.srOnly, children: selected ? display(selected) : placeholder }), _jsx("span", { className: styles.valueText, "aria-hidden": "true", children: _jsx(AnimatePresence, { initial: false, custom: direction, children: _jsx(motion.span, { className: selected ? styles.value : styles.placeholder, custom: direction, variants: reduce ? valueFade : valueRoll, initial: "enter", animate: "center", exit: "exit", children: selected ? display(selected) : placeholder }, selected || "placeholder") }) }), _jsx(ChevronDown, { className: styles.chevron, size: 16, "aria-hidden": "true" })] }), _jsx(AnimatePresence, { initial: false, children: open && _jsx(motion.div, { id: `${id}-listbox`, className: styles.menu, role: "listbox", "aria-label": `${label} options`, initial: reduce ? { opacity: 0 } : { opacity: 0, y: -6, scale: .97 }, animate: { opacity: 1, y: 0, scale: 1, transition: reduce ? { duration: motionTokens.duration.instant } : { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: enter } } }, exit: { opacity: 0, ...(reduce ? {} : { y: -4, scale: .98 }), transition: { duration: motionTokens.duration.instant, ease: standard } }, children: options.map((option, index) => _jsxs("button", { ref: node => { optionRefs.current[index] = node; }, id: `${id}-option-${index}`, type: "button", role: "option", "aria-selected": option === selected, "data-active": activeIndex === index || undefined, className: styles.option, onPointerMove: () => { if (activeIndex !== index)
-                                    setActiveIndex(index); }, onClick: () => choose(option), children: [display(option), option === selected && _jsx("span", { className: styles.dot, "aria-hidden": "true" })] }, option)) }) })] }), description && _jsx("span", { className: styles.description, children: description })] });
+    return _jsxs("div", { ref: rootRef, className: [styles.field, className].filter(Boolean).join(" "), children: [_jsx("span", { id: labelId, className: styles.label, children: label }), _jsxs("div", { className: styles.anchor, children: [_jsxs("button", { type: "button", className: styles.trigger, disabled: disabled, "aria-labelledby": `${labelId} ${valueId}`, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": `${id}-listbox`, onClick: () => open ? setOpen(false) : openMenu(), onKeyDown: onKeyDown, children: [_jsx(Clock3, { size: 16, "aria-hidden": "true" }), _jsx("span", { id: valueId, className: styles.srOnly, children: selected ? display(selected) : placeholder }), _jsx("span", { className: styles.valueText, "aria-hidden": "true", children: _jsx(AnimatePresence, { initial: false, custom: direction, children: _jsx(motion.span, { className: selected ? styles.value : styles.placeholder, custom: direction, variants: reduce ? valueFade : valueRoll, initial: "enter", animate: "center", exit: "exit", children: selected ? display(selected) : placeholder }, selected || "placeholder") }) }), _jsx(ChevronDown, { className: styles.chevron, size: 16, "aria-hidden": "true" })] }), _jsx(AnimatePresence, { initial: false, children: open && _jsx(motion.div, { id: `${id}-listbox`, className: styles.menu, role: "listbox", "aria-label": `${label} options`, ...nearest, initial: reduce ? { opacity: 0 } : { opacity: 0, y: -6, scale: .97 }, animate: { opacity: 1, y: 0, scale: 1, transition: reduce ? { duration: motionTokens.duration.instant } : { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: enter } } }, exit: { opacity: 0, ...(reduce ? {} : { y: -4, scale: .98 }), transition: { duration: motionTokens.duration.instant, ease: standard } }, children: options.map((option, index) => _jsxs("button", { ref: node => { optionRefs.current[index] = node; }, id: `${id}-option-${index}`, type: "button", role: "option", "aria-selected": option === selected, "data-active": activeIndex === index || undefined, className: styles.option, "data-index": index, onClick: () => choose(option), children: [display(option), option === selected && _jsx("span", { className: styles.dot, "aria-hidden": "true" })] }, option)) }) })] }), description && _jsx("span", { className: styles.description, children: description })] });
 }

package/components/timeline/timeline.js

@@ -51,7 +51,7 @@ function relative(time, now) {
 /** A day's section. A new day opens from nothing and pushes the older days down; it clips only while it grows. */
 function DaySection({ id, fresh, reduced, children }) {
     const [entering, setEntering] = useState(fresh);
-    return _jsx(motion.section, { className: styles.group, "aria-labelledby": id, "data-entering": entering || undefined, initial: fresh ? { height: 0, opacity: 0 } : false, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0, transition: { duration: reduced ? motionTokens.duration.instant : motionTokens.duration.exit, ease: standard } }, transition: reduced ? { duration: .15 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.standard, ease: enter } }, onAnimationComplete: () => setEntering(false), children: children });
+    return _jsx(motion.section, { className: styles.group, "aria-labelledby": id, "data-entering": entering || undefined, initial: fresh ? { height: 0, opacity: 0 } : false, animate: { height: "auto", opacity: 1 }, exit: { height: 0, opacity: 0, transition: { duration: reduced ? motionTokens.duration.instant : motionTokens.duration.exit, ease: standard } }, transition: reduced ? { duration: motionTokens.duration.fast } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.standard, ease: enter } }, onAnimationComplete: () => setEntering(false), children: children });
 }
 function TimelineRow({ row, last, expanded, onToggle, timeLabel, timeFull }) {
     const clock = useContext(RevealClock);
@@ -63,11 +63,11 @@ function TimelineRow({ row, last, expanded, onToggle, timeLabel, timeFull }) {
     const [entering, setEntering] = useState(fresh);
     const shown = revealDelay !== null;
     const delay = (revealDelay ?? 0) + (fresh ? .12 : 0);
-    const pop = reduced ? { duration: 0, opacity: { duration: .15 } } : { ...motionTokens.spring.morph, visualDuration: .36, bounce: .32, delay, opacity: { duration: motionTokens.duration.fast, ease: enter, delay } };
-    const draw = reduced ? { duration: 0 } : { ...motionTokens.spring.smooth, visualDuration: .34, delay: delay + .1 };
+    const pop = reduced ? { duration: 0, opacity: { duration: motionTokens.duration.fast } } : { ...motionTokens.spring.morph, visualDuration: motionTokens.spring.slow.visualDuration, bounce: .32, delay, opacity: { duration: motionTokens.duration.fast, ease: enter, delay } };
+    const draw = reduced ? { duration: 0 } : { ...motionTokens.spring.smooth, visualDuration: motionTokens.spring.moderate.visualDuration, delay: delay + .1 };
     const tone = row.avatar ? undefined : row.tone ?? "neutral";
     const Trigger = row.detail ? "button" : "div";
-    return _jsxs(motion.li, { className: styles.item, "data-entering": entering || undefined, initial: fresh ? { height: 0 } : false, animate: { height: "auto" }, exit: { height: 0, opacity: 0, transition: reduced ? { duration: .1 } : { height: { ...motionTokens.spring.smooth, visualDuration: .3 }, opacity: { duration: .12 } } }, transition: reduced ? { duration: 0 } : motionTokens.spring.smooth, onAnimationComplete: () => setEntering(false), onViewportEnter: () => setRevealDelay(current => current ?? clock.schedule()), viewport: { once: true, amount: .2 }, children: [_jsx(motion.span, { className: styles.marker, "data-tone": tone, "aria-hidden": "true", initial: { scale: .4, opacity: 0 }, animate: shown ? { scale: 1, opacity: 1 } : undefined, transition: pop, children: row.avatar ? _jsx("img", { src: row.avatar, alt: "", width: 28, height: 28, decoding: "async" }) : row.icon }), !last && _jsx(motion.span, { className: styles.segment, "aria-hidden": "true", initial: { scaleY: 0 }, animate: shown ? { scaleY: 1 } : undefined, transition: draw }), _jsxs(motion.div, { className: styles.content, initial: fresh ? (reduced ? { opacity: 0 } : { opacity: 0, y: -10, filter: `blur(${motionTokens.blur.soft}px)` }) : false, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: reduced ? { duration: .15 } : { y: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.standard, ease: enter, delay: .05 }, filter: { duration: motionTokens.duration.standard, ease: enter, delay: .05 } }, children: [_jsxs(Trigger, { className: styles.trigger, ...(row.detail ? { type: "button", "data-timeline-trigger": "", "aria-expanded": expanded, "aria-controls": expanded ? detailId : undefined, onClick: onToggle } : {}), children: [_jsxs("span", { className: styles.text, children: [_jsxs("span", { className: styles.title, children: [row.actor && _jsx("span", { className: styles.actor, children: row.actor }), row.actor ? " " : "", row.title] }), row.meta && _jsx("span", { className: styles.meta, children: row.meta })] }), _jsxs("time", { className: styles.time, dateTime: new Date(row.time).toISOString(), title: timeFull, children: [_jsx(RiseText, { text: timeLabel, reduced: reduced }), _jsx("span", { className: styles.srOnly, children: timeFull })] }), row.detail && _jsx(motion.span, { className: styles.chevron, "aria-hidden": "true", initial: false, animate: { rotate: expanded ? 180 : 0 }, transition: reduced ? { duration: 0 } : motionTokens.spring.snappy, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) })] }), _jsx(AnimatePresence, { initial: false, children: expanded && row.detail && _jsx(motion.div, { id: detailId, className: styles.detail, initial: { height: 0 }, animate: { height: "auto" }, exit: { height: 0, transition: reduced ? { duration: 0 } : { ...motionTokens.spring.smooth, visualDuration: .28 } }, transition: reduced ? { duration: 0 } : motionTokens.spring.smooth, children: _jsx(motion.div, { className: styles.detailInner, initial: reduced ? { opacity: 0 } : { opacity: 0, y: -4, filter: `blur(${motionTokens.blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: motionTokens.duration.instant, ease: standard } }, transition: reduced ? { duration: .15 } : { duration: motionTokens.duration.standard, ease: enter, delay: .06 }, children: row.detail }) }, "detail") })] })] });
+    return _jsxs(motion.li, { className: styles.item, "data-entering": entering || undefined, initial: fresh ? { height: 0 } : false, animate: { height: "auto" }, exit: { height: 0, opacity: 0, transition: reduced ? { duration: motionTokens.duration.instant } : { height: { ...motionTokens.spring.smooth, visualDuration: motionTokens.spring.moderate.visualDuration }, opacity: { duration: motionTokens.duration.instant } } }, transition: reduced ? { duration: 0 } : motionTokens.spring.smooth, onAnimationComplete: () => setEntering(false), onViewportEnter: () => setRevealDelay(current => current ?? clock.schedule()), viewport: { once: true, amount: .2 }, children: [_jsx(motion.span, { className: styles.marker, "data-tone": tone, "aria-hidden": "true", initial: { scale: .4, opacity: 0 }, animate: shown ? { scale: 1, opacity: 1 } : undefined, transition: pop, children: row.avatar ? _jsx("img", { src: row.avatar, alt: "", width: 28, height: 28, decoding: "async" }) : row.icon }), !last && _jsx(motion.span, { className: styles.segment, "aria-hidden": "true", initial: { scaleY: 0 }, animate: shown ? { scaleY: 1 } : undefined, transition: draw }), _jsxs(motion.div, { className: styles.content, initial: fresh ? (reduced ? { opacity: 0 } : { opacity: 0, y: -10, filter: `blur(${motionTokens.blur.soft}px)` }) : false, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: reduced ? { duration: motionTokens.duration.fast } : { y: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.standard, ease: enter, delay: motionTokens.duration.instant }, filter: { duration: motionTokens.duration.standard, ease: enter, delay: motionTokens.duration.instant } }, children: [_jsxs(Trigger, { className: styles.trigger, ...(row.detail ? { type: "button", "data-timeline-trigger": "", "aria-expanded": expanded, "aria-controls": expanded ? detailId : undefined, onClick: onToggle } : {}), children: [_jsxs("span", { className: styles.text, children: [_jsxs("span", { className: styles.title, children: [row.actor && _jsx("span", { className: styles.actor, children: row.actor }), row.actor ? " " : "", row.title] }), row.meta && _jsx("span", { className: styles.meta, children: row.meta })] }), _jsxs("time", { className: styles.time, dateTime: new Date(row.time).toISOString(), title: timeFull, children: [_jsx(RiseText, { text: timeLabel, reduced: reduced }), _jsx("span", { className: styles.srOnly, children: timeFull })] }), row.detail && _jsx(motion.span, { className: styles.chevron, "aria-hidden": "true", initial: false, animate: { rotate: expanded ? 180 : 0 }, transition: reduced ? { duration: 0 } : motionTokens.spring.snappy, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) })] }), _jsx(AnimatePresence, { initial: false, children: expanded && row.detail && _jsx(motion.div, { id: detailId, className: styles.detail, initial: { height: 0 }, animate: { height: "auto" }, exit: { height: 0, transition: reduced ? { duration: 0 } : { ...motionTokens.spring.smooth, visualDuration: motionTokens.spring.moderate.visualDuration } }, transition: reduced ? { duration: 0 } : motionTokens.spring.smooth, children: _jsx(motion.div, { className: styles.detailInner, initial: reduced ? { opacity: 0 } : { opacity: 0, y: -4, filter: `blur(${motionTokens.blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: motionTokens.duration.instant, ease: standard } }, transition: reduced ? { duration: motionTokens.duration.fast } : { duration: motionTokens.duration.standard, ease: enter, delay: motionTokens.duration.instant }, children: row.detail }) }, "detail") })] })] });
 }
 /** An event's time in epoch milliseconds (an unreadable time sorts as the oldest). */
 function timeOf(at) {

package/components/toast/toast.js

@@ -108,7 +108,7 @@ export default function Toast({ title, description, open = true, onOpenChange, d
         // A thrown toast keeps its release velocity; a closed one sinks back toward the edge it came from.
         // The throw settles loosely: it is invisible once the fade ends, so no long unseen tail keeps it mounted.
         exit: (to) => to
-            ? { x: to, opacity: 0, transition: { x: { type: "spring", visualDuration: .3, bounce: 0, velocity: releaseVelocity.current, restDelta: 2, restSpeed: 40 }, opacity: { duration: motionTokens.duration.exit } } }
+            ? { x: to, opacity: 0, transition: { x: { type: "spring", visualDuration: motionTokens.spring.moderate.visualDuration, bounce: 0, velocity: releaseVelocity.current, restDelta: 2, restSpeed: 40 }, opacity: { duration: motionTokens.duration.exit } } }
             : { opacity: 0, y: 8, scale: .97, transition: { duration: motionTokens.duration.exit, ease: [...motionTokens.ease.standard] } },
     };
     const swap = { initial: reduce ? { opacity: 0 } : textIn, animate: textShown, exit: reduce ? fadeOut : textOut, transition: reduce ? { duration: motionTokens.duration.instant } : enter };

package/components/toast-stack/toast-stack.js

@@ -282,7 +282,7 @@ function ToastItem({ toast, target, expanded, front, hidden, paused, reduce, sto
         if (!cancelled && offset > 0 && velocity > -200 && offset + project(velocity) > width * .4) {
             swiped.current = true;
             if (!reduce)
-                animate(x, width + 40, { type: "spring", visualDuration: .32, bounce: 0, velocity: Math.max(velocity, 0) });
+                animate(x, width + 40, { type: "spring", visualDuration: motionTokens.spring.moderate.visualDuration, bounce: 0, velocity: Math.max(velocity, 0) });
             store.dismiss(id);
             return;
         }

package/components/tree-view/tree-view.js

@@ -4,6 +4,7 @@ import { useId, useRef, useState } from "react";
 import { ChevronRight, File, Folder, FolderOpen } from "lucide-react";
 import { AnimatePresence, motion, useIsPresent, useReducedMotion } from "motion/react";
 import { motionTokens } from "../../lib/motion-tokens.js";
+import { FluidHoverHighlight, useFluidHover } from "../../lib/fluid-hover.js";
 import styles from "./tree-view.module.css";
 /** A row is 36px plus the 2px gap above it; both collapse together, so nothing snaps when a row leaves. */
 const rowHeight = 38;
@@ -53,6 +54,9 @@ export function TreeView({ nodes, defaultExpandedIds = [], expandedIds, onExpand
     /** The folder that opened last; its new children fade in one after another, then everything else stays still. */
     const [openedId, setOpenedId] = useState(null);
     const refs = useRef(new Map());
+    const tree = useRef(null);
+    // Fluid hover: the nearest row is lit, gaps and padding included, and keyboard focus moves the fill without travel.
+    const hover = useFluidHover(tree, { items: '[role="treeitem"]' });
     const expanded = expandedIds ? new Set(expandedIds) : internalExpanded;
     const visible = flatten(nodes, expanded);
     const focusableId = visible.some(({ node }) => node.id === focusedId) ? focusedId : (visible[0]?.node.id ?? null);
@@ -131,17 +135,17 @@ export function TreeView({ nodes, defaultExpandedIds = [], expandedIds, onExpand
                 toggle(node);
         }
     }
-    return _jsx("div", { className: styles.tree, role: "tree", "aria-label": ariaLabel, "aria-multiselectable": "false", children: _jsx(AnimatePresence, { initial: false, mode: "sync", children: visible.map((item, index) => {
-                const hasChildren = Boolean(item.node.children?.length);
-                const isExpanded = hasChildren && expanded.has(item.node.id);
-                const isSelected = selectedId === item.node.id;
-                // Only rows that mount use this delay: the space opens in one motion and the new children follow in order.
-                const delay = openedIndex >= 0 && index > openedIndex ? Math.min(index - openedIndex - 1, 7) * motionTokens.stagger.item : 0;
-                return _jsx(motion.div, { className: styles.row, layout: reduced ? false : "position", initial: reduced ? false : { height: 0, opacity: 0, x: -6, overflow: "hidden" }, animate: { height: rowHeight, opacity: 1, x: 0, pointerEvents: "auto", transitionEnd: { overflow: "visible" }, transition: reduced ? still : { height: motionTokens.spring.smooth, opacity: { ...fadeIn, delay }, x: { ...motionTokens.spring.smooth, delay } } }, exit: reduced ? { opacity: 0, transition: still } : { height: 0, opacity: 0, x: -4, overflow: "hidden", pointerEvents: "none", transition: { height: motionTokens.spring.smooth, opacity: fadeOut, x: fadeOut } }, transition: reduced ? still : { layout: motionTokens.spring.smooth }, children: _jsxs("button", { ref: element => { if (element)
-                            refs.current.set(item.node.id, element);
-                        else
-                            refs.current.delete(item.node.id); }, type: "button", className: styles.item, role: "treeitem", "aria-level": item.depth, "aria-posinset": item.position, "aria-setsize": item.setSize, "aria-expanded": hasChildren ? isExpanded : undefined, "aria-selected": isSelected, tabIndex: focusableId === item.node.id ? 0 : -1, style: { "--tree-depth": item.depth }, onFocus: () => setFocusedId(item.node.id), onKeyDown: event => onKeyDown(event, item, index), onClick: () => { setFocusedId(item.node.id); select(item.node); if (hasChildren)
-                            toggle(item.node); }, children: [isSelected && _jsx(Selection, { layoutId: selectionLayoutId, reduced: reduced }), item.depth > 1 && _jsx(motion.span, { "aria-hidden": "true", className: styles.branch, initial: reduced ? false : { opacity: 0, scaleY: 0 }, animate: { opacity: 1, scaleY: 1 }, transition: reduced ? still : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter], delay } }), _jsx(motion.span, { className: styles.disclosure, "aria-hidden": "true", initial: false, animate: { rotate: isExpanded ? 90 : 0 }, transition: reduced ? still : motionTokens.spring.snappy, children: hasChildren ? _jsx(ChevronRight, { size: 14, strokeWidth: 1.9 }) : null }), _jsx("span", { className: [styles.icon, hasChildren ? styles.folder : fileTone(item.node.label, styles)].join(" "), "aria-hidden": "true", children: item.node.icon ?? (hasChildren ? _jsx(FolderIcon, { open: isExpanded, reduced: reduced }) : _jsx(File, { size: 16, strokeWidth: 1.7 })) }), _jsx("span", { className: styles.label, children: item.node.label })] }) }, item.node.id);
-            }) }) });
+    return _jsxs("div", { ref: tree, className: styles.tree, role: "tree", "aria-label": ariaLabel, "aria-multiselectable": "false", ...hover.handlers, children: [_jsx(FluidHoverHighlight, { hover: hover, className: styles.hover }), _jsx(AnimatePresence, { initial: false, mode: "sync", children: visible.map((item, index) => {
+                    const hasChildren = Boolean(item.node.children?.length);
+                    const isExpanded = hasChildren && expanded.has(item.node.id);
+                    const isSelected = selectedId === item.node.id;
+                    // Only rows that mount use this delay: the space opens in one motion and the new children follow in order.
+                    const delay = openedIndex >= 0 && index > openedIndex ? Math.min(index - openedIndex - 1, 7) * motionTokens.stagger.item : 0;
+                    return _jsx(motion.div, { className: styles.row, layout: reduced ? false : "position", initial: reduced ? false : { height: 0, opacity: 0, x: -6, overflow: "hidden" }, animate: { height: rowHeight, opacity: 1, x: 0, pointerEvents: "auto", transitionEnd: { overflow: "visible" }, transition: reduced ? still : { height: motionTokens.spring.smooth, opacity: { ...fadeIn, delay }, x: { ...motionTokens.spring.smooth, delay } } }, exit: reduced ? { opacity: 0, transition: still } : { height: 0, opacity: 0, x: -4, overflow: "hidden", pointerEvents: "none", transition: { height: motionTokens.spring.smooth, opacity: fadeOut, x: fadeOut } }, transition: reduced ? still : { layout: motionTokens.spring.smooth }, children: _jsxs("button", { ref: element => { if (element)
+                                refs.current.set(item.node.id, element);
+                            else
+                                refs.current.delete(item.node.id); }, type: "button", className: styles.item, role: "treeitem", "aria-level": item.depth, "aria-posinset": item.position, "aria-setsize": item.setSize, "aria-expanded": hasChildren ? isExpanded : undefined, "aria-selected": isSelected, tabIndex: focusableId === item.node.id ? 0 : -1, style: { "--tree-depth": item.depth }, onFocus: () => setFocusedId(item.node.id), onKeyDown: event => onKeyDown(event, item, index), onClick: () => { setFocusedId(item.node.id); select(item.node); if (hasChildren)
+                                toggle(item.node); }, children: [isSelected && _jsx(Selection, { layoutId: selectionLayoutId, reduced: reduced }), item.depth > 1 && _jsx(motion.span, { "aria-hidden": "true", className: styles.branch, initial: reduced ? false : { opacity: 0, scaleY: 0 }, animate: { opacity: 1, scaleY: 1 }, transition: reduced ? still : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter], delay } }), _jsx(motion.span, { className: styles.disclosure, "aria-hidden": "true", initial: false, animate: { rotate: isExpanded ? 90 : 0 }, transition: reduced ? still : motionTokens.spring.snappy, children: hasChildren ? _jsx(ChevronRight, { size: 14, strokeWidth: 1.9 }) : null }), _jsx("span", { className: [styles.icon, hasChildren ? styles.folder : fileTone(item.node.label, styles)].join(" "), "aria-hidden": "true", children: item.node.icon ?? (hasChildren ? _jsx(FolderIcon, { open: isExpanded, reduced: reduced }) : _jsx(File, { size: 16, strokeWidth: 1.7 })) }), _jsx("span", { className: styles.label, children: item.node.label })] }) }, item.node.id);
+                }) })] });
 }
 export default TreeView;

package/components/tree-view/tree-view.module.css

@@ -1,9 +1,11 @@
-.tree { display: block; width: 100%; min-width: 0; box-sizing: border-box; padding: var(--space-related) var(--space-related) var(--space-related); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); color: var(--foreground); overflow: hidden; }
+.tree { position: relative; display: block; width: 100%; min-width: 0; box-sizing: border-box; padding: var(--space-related) var(--space-related) var(--space-related); border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); color: var(--foreground); overflow: hidden; }
 /* Rows clip only while their height animates (Motion sets overflow), so the selection can glide between them unclipped. */
 .row { position: relative; display: flow-root; min-width: 0; height: 38px; }
 .item { position: relative; display: flex; width: 100%; min-width: 0; height: 36px; margin-top: var(--space-hair); align-items: center; gap: var(--space-related); padding: 0 var(--space-group); padding-left: calc(var(--space-group) + (var(--tree-depth) - 1) * var(--space-comfort)); border: 0; border-radius: var(--radius-detail); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); line-height: 1; text-align: left; cursor: pointer; outline: none; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
 /* Selection changes color only; a heavier weight would reflow the label. */
 .item[aria-selected="true"] { color: var(--foreground); }
+/* One hover fill glides between rows, under the selection and the row content. */
+.hover { border-radius: var(--radius-detail); background: var(--surface-muted); }
 .selection { position: absolute; inset: 0; z-index: 0; border-radius: var(--radius-detail); background: var(--surface-muted); }
 .branch { position: absolute; top: var(--space-tight); bottom: var(--space-tight); left: calc(var(--space-inset) + (var(--tree-depth) - 2) * var(--space-comfort)); z-index: 1; width: 1px; background: var(--border); transform-origin: top; pointer-events: none; }
 .disclosure, .icon, .label { position: relative; z-index: 1; }
@@ -18,5 +20,5 @@
 .json { color: color-mix(in oklab, var(--file-json) 78%, var(--foreground)); }
 /* Its own line height: the row sets 1, and the clipped box (needed for the ellipsis) would cut descenders like g. */
 .label { min-width: 0; overflow: hidden; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
-@media (hover: hover) and (pointer: fine) { .item:hover { background: var(--surface-muted); color: var(--foreground); } }
+@media (hover: hover) and (pointer: fine) { .item:hover { color: var(--foreground); } }
 @media (prefers-reduced-motion: reduce) { .item, .icon { transition: none; } }

package/components/usage-meter/usage-meter.js

@@ -9,7 +9,7 @@ const { spring, duration, ease, blur } = motionTokens;
 /** Motion drops inherited velocity on time-defined springs, so values that retarget mid-flight run the same springs written as stiffness and damping. */
 const physical = ({ visualDuration, bounce }, restDelta = .001) => { const root = (2 * Math.PI) / (visualDuration * 1.2); return { type: "spring", stiffness: root * root, damping: 2 * (1 - bounce) * root, restDelta, restSpeed: restDelta * 2 }; };
 const settle = physical(spring.smooth);
-const reveal = physical({ visualDuration: duration.considered + .1, bounce: 0 });
+const reveal = physical({ visualDuration: duration.expressive + .1, bounce: 0 });
 const turn = physical(spring.smooth);
 const fit = physical(spring.morph, .01);
 /** A segment stops two pixels short of the next, so neighbours read apart without an outline. */

package/components/user-menu/user-menu.js

@@ -5,6 +5,7 @@ import { createPortal } from "react-dom";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { ChevronDown, LoaderCircle, LogOut, Monitor, Moon, Sun, SunMoon } from "lucide-react";
 import { motionTokens } from "../../lib/motion-tokens.js";
+import { useNearestItem } from "../../lib/fluid-hover.js";
 import styles from "./user-menu.module.css";
 /** Statuses in menu order. Each one has its own dot shape as well as color: solid, barred, or hollow. */
 export const userStatuses = [
@@ -27,16 +28,16 @@ const exitEase = [0.4, 0, 1, 1];
 /** The panel grows out of the trigger on a critically damped spring; rows follow a beat later. Closing is a short fade. */
 const panelMotion = {
     closed: { opacity: 0, scale: .94 },
-    open: { opacity: 1, scale: 1, transition: { type: "spring", visualDuration: .3, bounce: 0, opacity: { duration: motionTokens.duration.fast, ease: enter }, delayChildren: .03, staggerChildren: .016 } },
+    open: { opacity: 1, scale: 1, transition: { type: "spring", visualDuration: motionTokens.spring.moderate.visualDuration, bounce: 0, opacity: { duration: motionTokens.duration.fast, ease: enter }, delayChildren: .03, staggerChildren: .016 } },
     exit: { opacity: 0, scale: .97, transition: { duration: motionTokens.duration.instant, ease: exitEase } },
 };
 const sheetMotion = {
     closed: { y: "100%" },
-    open: { y: 0, transition: { ...motionTokens.spring.smooth, visualDuration: .36, delayChildren: .06, staggerChildren: .02 } },
-    exit: { y: "100%", transition: { duration: .22, ease: exitEase } },
+    open: { y: 0, transition: { ...motionTokens.spring.smooth, visualDuration: motionTokens.spring.slow.visualDuration, delayChildren: .06, staggerChildren: .02 } },
+    exit: { y: "100%", transition: { duration: motionTokens.duration.exit, ease: exitEase } },
 };
 const stillMotion = { closed: { opacity: 0 }, open: { opacity: 1, transition: { duration: motionTokens.duration.instant } }, exit: { opacity: 0, transition: { duration: motionTokens.duration.instant } } };
-const rowMotion = { closed: { opacity: 0, y: 3 }, open: { opacity: 1, y: 0, transition: { duration: .2, ease: enter } } };
+const rowMotion = { closed: { opacity: 0, y: 3 }, open: { opacity: 1, y: 0, transition: { duration: motionTokens.duration.exit, ease: enter } } };
 /** A presence mark that morphs between statuses: the color crossfades while a hole opens for away and a bar slides in for busy. */
 export function PresenceDot({ status, className }) {
     return _jsx("span", { className: [styles.dot, className].filter(Boolean).join(" "), "data-status": status, "aria-hidden": "true" });
@@ -224,19 +225,20 @@ export function UserMenu({ user, status: statusProp, defaultStatus = "available"
         }
         setHighlight(current => ({ top: stop.offsetTop, height: stop.offsetHeight, tone: stop.dataset.tone, glide: current !== null }));
     }
-    // Focus follows a mouse or pen, so the keyboard carries on from wherever the pointer left the highlight.
-    function onItemPointerMove(event) {
-        if (event.pointerType === "touch")
-            return;
-        if (document.activeElement !== event.currentTarget)
-            event.currentTarget.focus({ preventScroll: true });
-    }
+    // Fluid hover: the mouse focuses the nearest row, separators and padding included, so the highlight (which follows focus)
+    // lights it and the keyboard carries on from there. A click in a gap picks that row.
+    const nearest = useNearestItem({ items: '[data-stop="item"]', onPick: item => { if (document.activeElement !== item)
+            item.focus({ preventScroll: true }); } });
     // The inline switches are not rows, so the pointer over them releases the highlight instead of dragging it along.
     function onListPointerMove(event) {
-        if (event.pointerType === "touch" || !highlight)
+        if (event.pointerType === "touch")
             return;
         const group = event.target instanceof HTMLElement ? event.target.closest('[data-stop="group"]') : null;
-        if (!group || group.contains(document.activeElement))
+        if (!group) {
+            nearest.onPointerMove(event);
+            return;
+        }
+        if (!highlight || group.contains(document.activeElement))
             return;
         setHighlight(null);
         surfaceRef.current?.focus({ preventScroll: true });
@@ -308,7 +310,7 @@ export function UserMenu({ user, status: statusProp, defaultStatus = "available"
     const glide = highlight?.glide && !reduced ? motionTokens.spring.snappy : { duration: 0 };
     const row = reduced ? undefined : rowMotion;
     const menuProps = { id: menuId, role: "menu", "aria-labelledby": triggerId, tabIndex: -1, onKeyDown };
-    const content = _jsxs(_Fragment, { children: [_jsxs(motion.div, { className: styles.header, variants: row, children: [_jsx(Face, { user: user, status: showStatus ? status : undefined, size: "md" }), _jsxs("div", { className: styles.identity, children: [_jsxs("div", { className: styles.nameRow, children: [_jsx("span", { className: styles.name, children: user.name }), user.plan && _jsx("span", { className: styles.plan, children: user.plan })] }), _jsx("span", { className: styles.email, title: user.email, children: user.email })] })] }), _jsxs("div", { ref: listRef, className: styles.list, onFocus: onListFocus, onPointerMove: onListPointerMove, onPointerLeave: onListPointerLeave, children: [_jsx(motion.span, { className: styles.highlight, "data-tone": highlight?.tone, "aria-hidden": "true", initial: false, animate: highlight ? { y: highlight.top, height: highlight.height, opacity: 1 } : { opacity: 0 }, transition: { default: glide, opacity: { duration: reduced ? 0 : motionTokens.duration.instant } } }), items.length > 0 && _jsxs(_Fragment, { children: [_jsx("div", { className: styles.separator, role: "separator" }), items.map(item => _jsxs(motion.button, { type: "button", role: "menuitem", tabIndex: -1, className: styles.item, "data-stop": "item", "data-label": item.label, variants: row, onPointerMove: onItemPointerMove, onClick: () => { close(true); item.onSelect?.(); }, children: [_jsx("span", { className: styles.icon, "aria-hidden": "true", children: item.icon }), _jsx("span", { className: styles.itemLabel, children: item.label }), item.keys && _jsx(Keys, { keys: item.keys })] }, item.label))] }), (showTheme || showStatus) && _jsxs(_Fragment, { children: [_jsx("div", { className: styles.separator, role: "separator" }), showStatus && _jsx(Segmented, { label: "Status", icon: _jsx(PresenceDot, { status: status }), value: status, onChange: changeStatus, options: userStatuses.map(option => ({ ...option, icon: _jsx(PresenceDot, { status: option.value }) })), variants: row }), showTheme && _jsx(Segmented, { label: "Theme", icon: _jsx(SunMoon, { size: 16, strokeWidth: 1.75 }), value: theme, onChange: changeTheme, options: themes, variants: row })] }), _jsx("div", { className: styles.separator, role: "separator" }), _jsxs(motion.button, { type: "button", role: "menuitem", tabIndex: -1, className: styles.item, "data-stop": "item", "data-tone": "danger", "data-label": "Sign out", variants: row, "aria-busy": signingOut || undefined, onPointerMove: onItemPointerMove, onClick: signOut, children: [_jsx("span", { className: styles.icon, "aria-hidden": "true", children: signingOut ? _jsx(LoaderCircle, { className: styles.spinner, size: 16, strokeWidth: 1.75 }) : _jsx(LogOut, { size: 16, strokeWidth: 1.75 }) }), _jsx("span", { className: styles.itemLabel, children: _jsx(Rise, { text: signingOut ? "Signing out" : "Sign out", reduced: reduced }) }), signOutKeys && _jsx(Keys, { keys: signOutKeys })] })] })] });
+    const content = _jsxs(_Fragment, { children: [_jsxs(motion.div, { className: styles.header, variants: row, children: [_jsx(Face, { user: user, status: showStatus ? status : undefined, size: "md" }), _jsxs("div", { className: styles.identity, children: [_jsxs("div", { className: styles.nameRow, children: [_jsx("span", { className: styles.name, children: user.name }), user.plan && _jsx("span", { className: styles.plan, children: user.plan })] }), _jsx("span", { className: styles.email, title: user.email, children: user.email })] })] }), _jsxs("div", { ref: listRef, className: styles.list, onFocus: onListFocus, onPointerMove: onListPointerMove, onClick: nearest.onClick, onPointerLeave: onListPointerLeave, children: [_jsx(motion.span, { className: styles.highlight, "data-tone": highlight?.tone, "aria-hidden": "true", initial: false, animate: highlight ? { y: highlight.top, height: highlight.height, opacity: 1 } : { opacity: 0 }, transition: { default: glide, opacity: { duration: reduced ? 0 : motionTokens.duration.instant } } }), items.length > 0 && _jsxs(_Fragment, { children: [_jsx("div", { className: styles.separator, role: "separator" }), items.map(item => _jsxs(motion.button, { type: "button", role: "menuitem", tabIndex: -1, className: styles.item, "data-stop": "item", "data-label": item.label, variants: row, onClick: () => { close(true); item.onSelect?.(); }, children: [_jsx("span", { className: styles.icon, "aria-hidden": "true", children: item.icon }), _jsx("span", { className: styles.itemLabel, children: item.label }), item.keys && _jsx(Keys, { keys: item.keys })] }, item.label))] }), (showTheme || showStatus) && _jsxs(_Fragment, { children: [_jsx("div", { className: styles.separator, role: "separator" }), showStatus && _jsx(Segmented, { label: "Status", icon: _jsx(PresenceDot, { status: status }), value: status, onChange: changeStatus, options: userStatuses.map(option => ({ ...option, icon: _jsx(PresenceDot, { status: option.value }) })), variants: row }), showTheme && _jsx(Segmented, { label: "Theme", icon: _jsx(SunMoon, { size: 16, strokeWidth: 1.75 }), value: theme, onChange: changeTheme, options: themes, variants: row })] }), _jsx("div", { className: styles.separator, role: "separator" }), _jsxs(motion.button, { type: "button", role: "menuitem", tabIndex: -1, className: styles.item, "data-stop": "item", "data-tone": "danger", "data-label": "Sign out", variants: row, "aria-busy": signingOut || undefined, onClick: signOut, children: [_jsx("span", { className: styles.icon, "aria-hidden": "true", children: signingOut ? _jsx(LoaderCircle, { className: styles.spinner, size: 16, strokeWidth: 1.75 }) : _jsx(LogOut, { size: 16, strokeWidth: 1.75 }) }), _jsx("span", { className: styles.itemLabel, children: _jsx(Rise, { text: signingOut ? "Signing out" : "Sign out", reduced: reduced }) }), signOutKeys && _jsx(Keys, { keys: signOutKeys })] })] })] });
     const panel = _jsx(AnimatePresence, { children: open && !sheet && _jsx(motion.div, { ref: surfaceRef, ...menuProps, className: styles.panel, "data-inline": inline || undefined, "data-align": align, variants: reduced ? stillMotion : panelMotion, initial: "closed", animate: "open", exit: "exit", children: content }, "panel") });
     const bottomSheet = _jsxs(AnimatePresence, { children: [open && sheet && _jsx(motion.div, { className: styles.scrim, "aria-hidden": "true", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: reduced ? .1 : .2, ease: standard }, onClick: () => close(true) }, "scrim"), open && sheet && _jsxs(motion.div, { ref: surfaceRef, ...menuProps, className: `${styles.panel} ${styles.sheet}`, "aria-modal": "true", variants: reduced ? stillMotion : sheetMotion, initial: "closed", animate: "open", exit: "exit", drag: reduced ? false : "y", dragConstraints: { top: 0, bottom: 0 }, dragElastic: { top: .04, bottom: .9 }, dragMomentum: false, onDragEnd: onDragEnd, children: [_jsx("span", { className: styles.handle, "aria-hidden": "true" }), content] }, "sheet")] });
     return _jsxs("span", { ref: rootRef, className: styles.root, children: [_jsxs("button", { ref: setTriggerRef, id: triggerId, type: "button", className: [styles.trigger, className].filter(Boolean).join(" "), "data-state": open ? "open" : "closed", "data-name": showName || undefined, "aria-haspopup": "menu", "aria-expanded": open, "aria-controls": open ? menuId : undefined, "aria-label": `Account menu, ${user.name}, ${user.name.trim().split(/\s+/).slice(0, 2).map(part => part[0]?.toUpperCase()).join("")}${showStatus ? `, ${statusLabel(status)}` : ""}`, onClick: onTriggerClick, onKeyDown: onTriggerKeyDown, children: [_jsx(Face, { user: user, status: showStatus ? status : undefined, size: "sm" }), showName && _jsxs(_Fragment, { children: [_jsx("span", { className: styles.triggerName, children: user.name }), _jsx(ChevronDown, { className: styles.chevron, size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] })] }), sheet ? createPortal(bottomSheet, document.body) : inline ? panel : hydrated ? createPortal(panel, document.body) : null] });

package/lib/fluid-hover.d.ts

@@ -0,0 +1,83 @@
+import type { FocusEvent, MouseEvent, PointerEvent, RefObject } from "react";
+/** An item's box in the container's own layout space (unaffected by transforms or scrolling). */
+export interface FluidRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export interface FluidHoverState {
+    /** Where the highlight sits, or null when nothing is lit. */
+    rect: FluidRect | null;
+    /** The lit item. */
+    item: HTMLElement | null;
+    /** False when the highlight should jump (keyboard, a resize) rather than travel. */
+    glide: boolean;
+    /** Steps on each new pointer entry, so the highlight fades in where it lands. */
+    session: number;
+}
+export interface FluidHoverOptions {
+    /** Selector for the items inside the container. */
+    items: string;
+    /** "y" for lists (default), "x" for a row of tabs, "xy" for grids. */
+    axis?: "x" | "y" | "xy";
+    /** Items the highlight skips (and a gap click never activates). Defaults to disabled or aria-disabled items. */
+    isItemDisabled?: (item: HTMLElement) => boolean;
+    /** "skip" (default) lights the nearest enabled item even over a disabled one; "clear" lights nothing over a disabled item (a calendar's unavailable days). */
+    disabled?: "skip" | "clear";
+    /** Route a click in a gap to the lit item. On by default; turn it off where empty space should stay inert. */
+    gapClick?: boolean;
+    /** Light the item that receives keyboard focus. On by default. */
+    followFocus?: boolean;
+}
+/** The item's box relative to the container, summing offsets through positioned ancestors in between. */
+export declare function rectOf(item: HTMLElement, container: HTMLElement): FluidRect;
+/**
+ * The item the pointer is inside, or else the one whose edge is nearest along the axis (both axes for a grid). Edges, not
+ * centres, so a gap next to a wide item still lights the item the pointer is closer to.
+ */
+export declare function pickNearest(items: HTMLElement[], x: number, y: number, axis: "x" | "y" | "xy"): HTMLElement | null;
+export declare function useFluidHover<T extends HTMLElement>(container: RefObject<T | null>, options: FluidHoverOptions): {
+    handlers: {
+        onMouseEnter: () => void;
+        onMouseMove: (event: MouseEvent<T>) => void;
+        onMouseLeave: () => void;
+        onKeyDownCapture: () => void;
+        onFocus: (event: FocusEvent<T>) => void;
+        onBlur: (event: FocusEvent<T>) => void;
+        onClick: (event: MouseEvent<T>) => void;
+    };
+    reset: () => void;
+    light: (item: HTMLElement | null, glide: boolean) => void;
+    /** Where the highlight sits, or null when nothing is lit. */
+    rect: FluidRect | null;
+    /** The lit item. */
+    item: HTMLElement | null;
+    /** False when the highlight should jump (keyboard, a resize) rather than travel. */
+    glide: boolean;
+    /** Steps on each new pointer entry, so the highlight fades in where it lands. */
+    session: number;
+};
+export interface NearestItemOptions extends Omit<FluidHoverOptions, "followFocus"> {
+    /** Called with the nearest enabled item as the mouse moves over the container. */
+    onPick: (item: HTMLElement) => void;
+}
+/**
+ * Fluid hover's picking without its highlight, for a list that already keeps its own active item and highlight (a listbox
+ * with aria-activedescendant, a roving list): the mouse picks the nearest enabled item, gaps and padding included, and a
+ * click in a gap goes to that item. Spread the result on the container.
+ */
+export declare function useNearestItem<T extends HTMLElement>({ items: selector, axis, isItemDisabled, gapClick, onPick }: NearestItemOptions): {
+    onPointerMove: (event: PointerEvent<T>) => void;
+    onClick: (event: MouseEvent<T>) => void;
+};
+export interface FluidHoverHighlightProps {
+    /** The state from useFluidHover (or any { rect, glide, session }). */
+    hover: Pick<FluidHoverState, "rect" | "glide" | "session">;
+    /** Radius, fill, z-index. The container must be position: relative; the highlight is placed at its top-left corner. */
+    className?: string;
+    /** Extra attributes for styling, such as data-tone. */
+    tone?: string;
+}
+/** The one highlight a fluid hover set renders: it springs between items on transforms, and fades in and out. */
+export declare function FluidHoverHighlight({ hover, className, tone }: FluidHoverHighlightProps): import("react").JSX.Element;

package/lib/fluid-hover.js

@@ -0,0 +1,184 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Fluid hover: in a set of items (a menu, a list, tabs, a grid), the item nearest the pointer is lit, even while the
+ * pointer is in a gap, the padding or past the last item, and one highlight springs between items. A click in a gap goes
+ * to the lit item, so what is lit is what a click hits. A new pointer entry fades the highlight in where it lands instead
+ * of sliding it over from the last item. The keyboard moves it without travel, and reduced motion keeps the fade but
+ * drops the travel.
+ *
+ *   const list = useRef<HTMLUListElement>(null);
+ *   const hover = useFluidHover(list, { items: "[data-item]" });
+ *   <ul ref={list} className={styles.list} {...hover.handlers}>      // .list { position: relative }
+ *     <FluidHoverHighlight hover={hover} className={styles.highlight} />
+ *     …items…
+ *   </ul>
+ *
+ * Adapted from Fluid Functionalism's use-fluid-hover and fluid-hover-highlight by Micka Touillaud (MIT),
+ * https://github.com/mickadesign/fluid-functionalism. Items are found by a selector instead of registering themselves,
+ * so a component adopts it without changing its items.
+ */
+import { useEffect, useEffectEvent, useRef, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { motionTokens } from "./motion-tokens.js";
+const defaultDisabled = (item) => item.matches(":disabled, [aria-disabled='true'], [data-disabled]");
+/** Controls that sit between items keep their own clicks. */
+const CONTROL = "input, textarea, select, button, a, summary, [contenteditable], [role='textbox'], [role='searchbox'], [role='button']";
+/** The item's box relative to the container, summing offsets through positioned ancestors in between. */
+export function rectOf(item, container) {
+    let top = item.offsetTop, left = item.offsetLeft;
+    let parent = item.offsetParent;
+    while (parent && parent !== container && container.contains(parent)) {
+        top += parent.offsetTop + parent.clientTop;
+        left += parent.offsetLeft + parent.clientLeft;
+        parent = parent.offsetParent;
+    }
+    return { top, left, width: item.offsetWidth, height: item.offsetHeight };
+}
+/**
+ * The item the pointer is inside, or else the one whose edge is nearest along the axis (both axes for a grid). Edges, not
+ * centres, so a gap next to a wide item still lights the item the pointer is closer to.
+ */
+export function pickNearest(items, x, y, axis) {
+    let nearest = null, best = Infinity;
+    for (const item of items) {
+        const r = item.getBoundingClientRect();
+        if (!r.width && !r.height)
+            continue;
+        if (x >= r.left && x <= r.right && y >= r.top && y <= r.bottom)
+            return item;
+        const dx = Math.max(r.left - x, 0, x - r.right), dy = Math.max(r.top - y, 0, y - r.bottom);
+        const distance = axis === "x" ? dx : axis === "y" ? dy : Math.hypot(dx, dy);
+        if (distance < best) {
+            best = distance;
+            nearest = item;
+        }
+    }
+    return nearest;
+}
+/** Hands a gap click to the item as a real mouse click (detail, modifiers and coordinates kept), so the item reads it as a pointer press, not a keyboard one. */
+function forwardClick(item, event) {
+    const { detail, clientX, clientY, screenX, screenY, ctrlKey, shiftKey, altKey, metaKey, button, buttons } = event;
+    item.dispatchEvent(new globalThis.MouseEvent("click", { bubbles: true, cancelable: true, composed: true, view: window, detail, clientX, clientY, screenX, screenY, ctrlKey, shiftKey, altKey, metaKey, button, buttons }));
+}
+/** Whether an event happened inside the element whose handler hears it, not in a portalled child (a submenu, a tooltip). */
+const isOwn = (event) => !(event.currentTarget instanceof Node) || !(event.target instanceof Node) || event.currentTarget.contains(event.target);
+export function useFluidHover(container, options) {
+    const { items: selector, axis = "y", isItemDisabled = defaultDisabled, disabled = "skip", gapClick = true, followFocus = true } = options;
+    const [state, setState] = useState({ rect: null, item: null, glide: false, session: 0 });
+    const current = useRef(state);
+    const pointer = useRef(false);
+    const entering = useRef(false);
+    const frame = useRef(0);
+    function commit(next) {
+        const prev = current.current;
+        if (prev.item === next.item && prev.session === next.session && sameRect(prev.rect, next.rect))
+            return;
+        current.current = next;
+        setState(next);
+    }
+    function light(item, glide) {
+        const root = container.current;
+        if (!root || !item)
+            return commit({ ...current.current, rect: null, item: null, glide });
+        let session = current.current.session;
+        if (entering.current) {
+            entering.current = false;
+            session += 1;
+        }
+        commit({ rect: rectOf(item, root), item, glide: glide && session === current.current.session, session });
+    }
+    const enabledItems = () => {
+        const root = container.current;
+        return root ? [...root.querySelectorAll(selector)].filter(item => !isItemDisabled(item)) : [];
+    };
+    // The lit item can move under a still highlight (a resize, content above it changing): follow it without travel.
+    const follow = useEffectEvent(() => { const { item } = current.current; if (item?.isConnected)
+        light(item, false); });
+    useEffect(() => {
+        const root = container.current;
+        if (!root || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => follow());
+        observer.observe(root);
+        return () => observer.disconnect();
+    }, [container]);
+    useEffect(() => () => cancelAnimationFrame(frame.current), []);
+    const handlers = {
+        onMouseEnter: () => { entering.current = true; },
+        onMouseMove: (event) => {
+            if (!isOwn(event))
+                return;
+            pointer.current = true;
+            const { clientX, clientY } = event;
+            cancelAnimationFrame(frame.current);
+            frame.current = requestAnimationFrame(() => {
+                const over = disabled === "clear" ? document.elementFromPoint(clientX, clientY)?.closest(selector) : null;
+                light(over && isItemDisabled(over) ? null : pickNearest(enabledItems(), clientX, clientY, axis), true);
+            });
+        },
+        onMouseLeave: () => { cancelAnimationFrame(frame.current); entering.current = false; light(null, false); },
+        onKeyDownCapture: () => { pointer.current = false; },
+        onFocus: (event) => {
+            if (!followFocus || pointer.current || !isOwn(event))
+                return;
+            const item = event.target instanceof HTMLElement ? event.target.closest(selector) : null;
+            if (item && container.current?.contains(item) && !isItemDisabled(item))
+                light(item, false);
+        },
+        onBlur: (event) => {
+            if (!pointer.current && !event.currentTarget.contains(event.relatedTarget))
+                light(null, false);
+        },
+        onClick: (event) => {
+            if (!gapClick || !isOwn(event))
+                return;
+            const target = event.target;
+            if (!target.isConnected || target.closest(selector) || target.closest(CONTROL))
+                return;
+            const { item } = current.current;
+            if (item?.isConnected && !isItemDisabled(item))
+                forwardClick(item, event);
+        },
+    };
+    /** Clears the highlight at once, such as when a menu opens again. */
+    const reset = () => { cancelAnimationFrame(frame.current); entering.current = true; light(null, false); };
+    return { ...state, handlers, reset, light };
+}
+/**
+ * Fluid hover's picking without its highlight, for a list that already keeps its own active item and highlight (a listbox
+ * with aria-activedescendant, a roving list): the mouse picks the nearest enabled item, gaps and padding included, and a
+ * click in a gap goes to that item. Spread the result on the container.
+ */
+// A hook only so callbacks that touch refs can be passed during render; it keeps no state.
+export function useNearestItem({ items: selector, axis = "y", isItemDisabled = defaultDisabled, gapClick = true, onPick }) {
+    const nearest = (event) => {
+        if (!isOwn(event))
+            return null;
+        const items = [...event.currentTarget.querySelectorAll(selector)].filter(item => !isItemDisabled(item));
+        return pickNearest(items, event.clientX, event.clientY, axis);
+    };
+    return {
+        onPointerMove: (event) => { if (event.pointerType !== "mouse")
+            return; const item = nearest(event); if (item)
+            onPick(item); },
+        onClick: (event) => {
+            if (!gapClick)
+                return;
+            const target = event.target;
+            if (!target.isConnected || target.closest(selector) || target.closest(CONTROL))
+                return;
+            const item = nearest(event);
+            if (item)
+                forwardClick(item, event);
+        },
+    };
+}
+const sameRect = (a, b) => a === b || (!!a && !!b && a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height);
+/** The one highlight a fluid hover set renders: it springs between items on transforms, and fades in and out. */
+export function FluidHoverHighlight({ hover, className, tone }) {
+    const reduced = useReducedMotion() ?? false;
+    const { rect, glide, session } = hover;
+    const place = rect ? { x: rect.left, y: rect.top, width: rect.width, height: rect.height } : undefined;
+    return (_jsx(AnimatePresence, { initial: false, children: place ? (_jsx(motion.span, { className: className, "data-tone": tone, "aria-hidden": "true", style: { position: "absolute", top: 0, left: 0, pointerEvents: "none" }, initial: { opacity: 0, ...place }, animate: { opacity: 1, ...place }, exit: { opacity: 0, transition: motionTokens.spring.fast.exit }, transition: { default: glide && !reduced ? motionTokens.spring.fast : { duration: 0 }, opacity: { duration: motionTokens.duration.fast } } }, session)) : null }));
+}

package/lib/menu-highlight.d.ts

@@ -1,28 +1,41 @@
-import type { FocusEvent } from "react";
-type Highlight = {
+import type { FocusEvent, MouseEvent } from "react";
+import { type FluidRect } from "./fluid-hover.js";
+/** A fluid hover highlight in a menu: where it sits, whether it travels, its pointer session, and its tone. */
+type FluidHighlight = {
+    rect: FluidRect | null;
+    glide: boolean;
+    session: number;
+    danger: boolean;
+};
+/** A marker positioned by top and height only (a list's current-page marker). */
+type BarHighlight = {
     top: number;
     height: number;
     danger: boolean;
     glide: boolean;
 };
 /**
- * One highlight that glides between the items of a Radix menu or listbox for the pointer, and jumps instantly for the keyboard.
- * Radix focuses the highlighted item, so the highlight follows focus inside the content. Spread `contentProps` on the content,
- * call `reset` when it opens, and render `<MenuHighlight state={highlight} className={styles.highlight} />` as its first child.
- * Items mark a destructive tone with `data-tone="danger"`.
+ * Fluid hover for a Radix menu or listbox (lib/fluid-hover): the item nearest the pointer is lit, gaps and padding
+ * included, a click in a gap picks the lit item, and the keyboard moves the highlight with Radix's focus, without travel.
+ * Spread `contentProps` on the content, call `reset` when it opens, and render `<MenuHighlight state={highlight} … />`
+ * as its first child. Items mark a destructive tone with `data-tone="danger"`.
  */
 export declare function useMenuHighlight(itemSelector?: string): {
-    highlight: Highlight | null;
+    highlight: FluidHighlight;
     reset: () => void;
     contentProps: {
-        onFocus: (event: FocusEvent<HTMLElement>) => void;
-        onPointerMoveCapture: () => void;
+        onMouseEnter: (event: MouseEvent<HTMLElement>) => void;
+        onMouseMove: (event: MouseEvent<HTMLElement>) => void;
+        onMouseLeave: () => void;
         onKeyDownCapture: () => void;
+        onFocus: (event: FocusEvent<HTMLElement>) => void;
+        onBlur: (event: FocusEvent<HTMLElement, Element>) => void;
+        onClick: (event: MouseEvent<HTMLElement>) => void;
     };
 };
-/** The gliding highlight itself. Position it absolutely inside the content, under the items. */
+/** The highlight itself: the fluid hover highlight, or a marker that moves by top and height (a current-page marker). */
 export declare function MenuHighlight({ state, className }: {
-    state: Highlight | null;
+    state: FluidHighlight | BarHighlight | null;
     className?: string;
 }): import("react").JSX.Element;
 export {};