@teamofsilicons/silicon-ui 0.3.0 → 0.4.0

package/components/animated-counter/animated-counter.js

@@ -7,7 +7,7 @@ import styles from "./animated-counter.module.css";
 const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
 const rise = { hidden: { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` }, shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] } }, gone: { opacity: 0, y: "-0.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] } } };
 const fade = { hidden: { opacity: 0, y: 0, filter: "blur(0px)" }, shown: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.instant } }, gone: { opacity: 0, y: 0, filter: "blur(0px)", transition: { duration: motionTokens.duration.instant } } };
-const reveal = { ...motionTokens.spring.smooth, visualDuration: motionTokens.duration.considered };
+const reveal = { ...motionTokens.spring.smooth, visualDuration: motionTokens.duration.expressive };
 /** Split a formatted number into columns keyed by place value, so 999 → 1,000 keeps the ones column the ones column. */
 function partsFor(value, decimals, locale) {
     const parts = new Intl.NumberFormat(locale, { minimumFractionDigits: decimals, maximumFractionDigits: decimals, numberingSystem: "latn" }).formatToParts(value);

package/components/bar-chart/bar-chart.js

@@ -8,7 +8,7 @@ const { spring, duration, ease, blur, stagger } = 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 = .01) => { 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 grow = physical(spring.morph);
+const grow = physical(spring.expressive);
 const glide = physical(spring.snappy);
 /** The zoom runs in fractions of the plot, so it rests far below a pixel. */
 const zoom = physical(spring.smooth, .00001);

package/components/billing-toggle/billing-toggle.js

@@ -7,7 +7,7 @@ import { motionTokens } from "../../lib/motion-tokens.js";
 import styles from "./billing-toggle.module.css";
 const { duration, ease, blur } = motionTokens;
 /** Critically damped: the thumb glides and lands without overshoot. */
-const glide = { type: "spring", visualDuration: 0.34, bounce: 0 };
+const glide = { type: "spring", visualDuration: motionTokens.spring.moderate.visualDuration, bounce: 0 };
 const DEFAULT_OPTIONS = [
     { value: "monthly", label: "Monthly" },
     { value: "yearly", label: "Yearly", badge: "Save 20%" },
@@ -66,7 +66,7 @@ export function BillingToggle({ value, onValueChange, options = DEFAULT_OPTIONS,
                 return (_jsxs("button", { ref: node => { refs.current[index] = node; }, type: "button", role: "radio", "aria-checked": selected, tabIndex: selected ? 0 : -1, className: styles.option, "data-selected": selected || undefined, onClick: () => onValueChange(option.value), onKeyDown: event => onKeyDown(event, index), children: [selected && !thumb ? _jsx("span", { className: styles.thumbStatic, "aria-hidden": "true" }) : null, _jsxs("span", { className: styles.content, children: [_jsx("span", { className: styles.label, children: option.label }), badgeText ? (_jsx("span", { className: styles.badge, "data-active": selected || undefined, children: _jsx(StableSwap, { text: badgeText, candidates: candidates, reduced: reduced }) })) : null] })] }, option.value));
             })] }));
 }
-const clip = { type: "spring", visualDuration: 0.36, bounce: 0 };
+const clip = { type: "spring", visualDuration: motionTokens.spring.moderate.visualDuration, bounce: 0 };
 /** A price that rolls to its new amount. The old price and the period ease their width, so nothing beside them jumps. */
 export function BillingPrice({ amount, currency = "$", period, was, decimals = 0, className }) {
     const reduced = !!useReducedMotion();

package/components/bottom-sheet/bottom-sheet.js

@@ -22,7 +22,7 @@ const STRETCH = 120;
 const LOW_DIM = .78;
 const settle = motionTokens.spring.smooth;
 /** Leaving is shorter than arriving; a flick keeps its velocity through the same spring. */
-const leave = { ...motionTokens.spring.smooth, visualDuration: .3 };
+const leave = { ...motionTokens.spring.smooth, visualDuration: motionTokens.spring.moderate.visualDuration };
 const fade = { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.standard] };
 /** iOS-style resistance: follows the finger at first, then approaches STRETCH. */
 const rubber = (distance) => (1 - 1 / (distance * .55 / STRETCH + 1)) * STRETCH;

package/components/button-group/button-group.module.css

@@ -69,7 +69,7 @@
   .menu[data-state="open"] .item { opacity: 0; transform: translate(calc(var(--menu-x) * .4), calc(var(--menu-y) * .4)); }
 }
 /* Radix unmounts when the exit animation ends, so a no-op keyframe times the exit while the transition does the visual work. */
-.menu[data-state="closed"] { opacity: 0; transform: translate(calc(var(--menu-x) * .5), calc(var(--menu-y) * .5)) scale(.985); transition: opacity 130ms var(--ease-standard), transform 130ms var(--ease-standard); animation: menu-exit 130ms linear both; pointer-events: none; }
+.menu[data-state="closed"] { opacity: 0; transform: translate(calc(var(--menu-x) * .5), calc(var(--menu-y) * .5)) scale(.985); transition: opacity var(--duration-instant) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); animation: menu-exit var(--duration-instant) linear both; pointer-events: none; }
 .item { display: flex; min-height: 36px; align-items: center; gap: var(--space-group); padding: 0 var(--space-group); border-radius: calc(var(--radius-container) - var(--space-related)); corner-shape: var(--corner-shape); color: inherit; font-size: var(--text-sm); text-decoration: none; cursor: pointer; outline: none; transition: opacity var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * 35ms), transform var(--duration-standard) var(--ease-enter) calc(min(var(--i, 0), 4) * 35ms); }
 .item[data-highlighted] { background: var(--surface-muted); }
 .item[data-disabled] { cursor: default; opacity: .45; }

package/components/calendar/calendar.js

@@ -1,10 +1,11 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { animate, AnimatePresence, motion, useMotionValue, useMotionValueEvent, useReducedMotion, useTransform } from "motion/react";
 import { motionTokens } from "../../lib/motion-tokens.js";
 import { useToday } from "../../lib/use-today.js";
+import { FluidHoverHighlight, useFluidHover } from "../../lib/fluid-hover.js";
 import styles from "./calendar.module.css";
 const startOfDay = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
 const monthStart = (date) => new Date(date.getFullYear(), date.getMonth(), 1);
@@ -29,14 +30,14 @@ const serverSnapshot = () => false;
 export { useToday } from "../../lib/use-today.js";
 const { spring, duration, ease } = motionTokens;
 /** Months sit side by side on one strip. Rapid clicks retarget the same spring, so the strip never queues or stacks panes. */
-const stripSpring = { type: "spring", visualDuration: 0.36, bounce: 0, restDelta: 0.002 };
+const stripSpring = { type: "spring", visualDuration: motionTokens.spring.moderate.visualDuration, bounce: 0, restDelta: 0.002 };
 const monthIndex = (date) => date.getFullYear() * 12 + date.getMonth();
 const fromIndex = (index) => new Date(Math.floor(index / 12), ((index % 12) + 12) % 12, 1);
 /** The title crossfades in place: the old month leaves toward the side the strip travels to while the new one arrives from the other. */
 const titleSlide = {
     enter: (direction) => ({ opacity: 0, x: direction * 12 }),
     center: { opacity: 1, x: 0, transition: { duration: duration.standard, ease: ease.enter } },
-    exit: (direction) => ({ opacity: 0, x: direction * -12, transition: { duration: 0.14, ease: ease.standard } }),
+    exit: (direction) => ({ opacity: 0, x: direction * -12, transition: { duration: motionTokens.duration.fast, ease: ease.standard } }),
 };
 /** Reduced motion swaps the title in place, with no travel and no blank frame. */
 const titleFade = { enter: { opacity: 1, x: 0 }, center: { opacity: 1, x: 0, transition: { duration: 0 } }, exit: { opacity: 0, transition: { duration: 0 } } };
@@ -57,7 +58,7 @@ function SelectionDisc({ cell, reduced }) {
     useLayoutEffect(() => {
         if (!visible) {
             hidden.current = true;
-            const fade = reduced ? { duration: 0 } : { duration: 0.14, ease: ease.standard };
+            const fade = reduced ? { duration: 0 } : { duration: motionTokens.duration.fast, ease: ease.standard };
             const controls = [animate(opacity, 0, fade), animate(scale, 0.6, fade)];
             return () => controls.forEach((control) => control.stop());
         }
@@ -75,6 +76,15 @@ function SelectionDisc({ cell, reduced }) {
     }, [cell, visible, reduced, col, row, opacity, scale]);
     return _jsx(motion.span, { className: styles.highlight, style: { transform, opacity }, "aria-hidden": "true", children: _jsx("span", { className: styles.highlightFill }) });
 }
+/**
+ * Fluid hover for one month's days: one fill glides to the day nearest the pointer, under the selected disc. Unavailable
+ * days light nothing, a gap between days stays inert, and focus keeps its own ring.
+ */
+function MonthDays({ children }) {
+    const box = useRef(null);
+    const hover = useFluidHover(box, { items: `.${styles.day}`, axis: "xy", disabled: "clear", gapClick: false, followFocus: false });
+    return _jsxs("div", { ref: box, className: styles.days, ...hover.handlers, children: [_jsx(FluidHoverHighlight, { hover: hover, className: styles.dayHover }), children] });
+}
 /** One month on the strip. Only the month being navigated to is focusable and exposed; the one sliding past is inert. */
 function MonthPane({ index, position, present, children }) {
     const x = useTransform(position, (value) => `calc(${(index - value) * 100}% + ${(index - value) * 16}px)`);
@@ -239,7 +249,7 @@ export function Calendar({ value, onChange, month: controlledMonth, onMonthChang
         const index = Math.round((startOfDay(value).getTime() - first.getTime()) / 864e5);
         return index >= 0 && index < 42 ? index : -1;
     };
-    const renderMonth = (paneMonth, present) => _jsxs(_Fragment, { children: [_jsx(SelectionDisc, { cell: cellOf(paneMonth), reduced: reducedMotion }), _jsx("div", { className: styles.grid, role: "grid", "aria-label": formatter.format(paneMonth), children: makeWeeks(paneMonth).map((week) => _jsx("div", { className: styles.week, role: "row", children: week.map((date) => {
+    const renderMonth = (paneMonth, present) => _jsxs(MonthDays, { children: [_jsx(SelectionDisc, { cell: cellOf(paneMonth), reduced: reducedMotion }), _jsx("div", { className: styles.grid, role: "grid", "aria-label": formatter.format(paneMonth), children: makeWeeks(paneMonth).map((week) => _jsx("div", { className: styles.week, role: "row", children: week.map((date) => {
                         const key = dateKey(date);
                         const selected = sameDay(date, value);
                         const isToday = sameDay(date, today);

package/components/calendar/calendar.module.css

@@ -15,7 +15,7 @@
 .navButton { width: 32px; }
 .todayButton { padding: 0 var(--space-group); font-size: var(--text-sm); font-weight: 500; line-height: 1; }
 @media (hover: hover) and (pointer: fine) { .navButton:hover:not([aria-disabled]), .todayButton:hover:not([aria-disabled]) { background: var(--surface-muted); color: var(--foreground); } }
-.navButton:active:not([aria-disabled]), .todayButton:active:not([aria-disabled]) { scale: .96; transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), 100ms; transition-timing-function: var(--ease-standard); }
+.navButton:active:not([aria-disabled]), .todayButton:active:not([aria-disabled]) { scale: .96; transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), var(--duration-fast); transition-timing-function: var(--ease-standard); }
 .navButton[aria-disabled], .todayButton[aria-disabled] { cursor: default; opacity: .36; }
 .weekdays, .week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: var(--space-tight); }
 .weekdays { margin-bottom: var(--space-related); color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; line-height: 24px; text-align: center; }
@@ -24,6 +24,9 @@
 .monthViewport { position: relative; display: grid; overflow: hidden; contain: paint; }
 .monthBody { position: relative; grid-area: 1 / 1; min-width: 0; will-change: transform; }
 .monthBody[inert] { pointer-events: none; }
+/* One month's days: the hover fill and the selected disc are placed against this box. */
+.days { position: relative; }
+.dayHover { border-radius: 50%; corner-shape: round; background: var(--surface-muted); }
 .grid { display: grid; row-gap: var(--space-tight); }
 .placeholderDay { aspect-ratio: 1; }
 .day { position: relative; display: grid; width: 100%; aspect-ratio: 1; min-width: 0; place-items: center; border: 0; border-radius: 50%; corner-shape: round; padding: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); font-weight: 400; line-height: 1; font-variant-numeric: tabular-nums; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard) var(--number-delay, 0ms); }
@@ -33,8 +36,8 @@
 /* The selected disc is one element per month, one cell in size, placed by week and weekday under the day buttons. It glides on a transform, so the strip sliding around it never bends its path. Press scales the inner fill so it never fights the glide. */
 .highlight { position: absolute; top: 0; left: 0; width: calc((100% - 24px) / 7); aspect-ratio: 1; pointer-events: none; will-change: transform; }
 .highlightFill { position: absolute; inset: 0; border-radius: 50%; corner-shape: round; background: var(--accent); transition: background-color var(--duration-fast) var(--ease-standard), scale var(--duration-spring) var(--ease-spring); }
-@media (hover: hover) and (pointer: fine) { .day:hover:not(:disabled):not(.selected)::before { background: var(--surface-muted); } .monthBody:has(.day.selected:hover) .highlightFill { background: var(--accent-strong); } }
-.day:active:not(:disabled)::before, .day:active:not(:disabled) .dayNumber, .monthBody:has(.day.selected:active:not(:disabled)) .highlightFill { scale: .94; transition-duration: var(--duration-fast), 100ms; transition-timing-function: var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .monthBody:has(.day.selected:hover) .highlightFill { background: var(--accent-strong); } }
+.day:active:not(:disabled)::before, .day:active:not(:disabled) .dayNumber, .monthBody:has(.day.selected:active:not(:disabled)) .highlightFill { scale: .94; transition-duration: var(--duration-fast), var(--duration-fast); transition-timing-function: var(--ease-standard); }
 /* Outside days dim their number, not the button, so a disc gliding onto one keeps its full strength. */
 .day.outside { color: var(--text-muted); }
 .day.outside:not(.selected) .dayNumber { opacity: .8; }

package/components/card/card.js

@@ -8,14 +8,14 @@ import { motionTokens } from "../../lib/motion-tokens.js";
 import styles from "./card.module.css";
 const { blur, duration, ease, spring, stagger } = motionTokens;
 /** One critically damped spring carries the surface both ways, so it never overshoots and can reverse mid-flight. Closing is a touch quicker. */
-const grow = { ...spring.smooth, visualDuration: .3 };
-const settle = { ...spring.smooth, visualDuration: .26 };
+const grow = { ...spring.smooth, visualDuration: motionTokens.spring.slow.visualDuration };
+const settle = { ...spring.smooth, visualDuration: motionTokens.spring.moderate.visualDuration };
 const RETURN_MS = 300;
 const fade = { duration: duration.instant };
 /** The photo drifts in slowly while the card is pointed at, and eases back a little faster. */
 const ZOOM = 1.04;
-const zoomIn = { duration: duration.considered * 2, ease: [...ease.standard] };
-const zoomOut = { duration: duration.considered, ease: [...ease.standard] };
+const zoomIn = { duration: duration.expressive * 2, ease: [...ease.standard] };
+const zoomOut = { duration: duration.expressive, ease: [...ease.standard] };
 /** Quick look extras arrive once the surface has mostly grown, so they never ride the stretch. */
 const reveal = { delay: duration.instant, duration: duration.standard, ease: [...ease.enter] };
 const closeIn = { delay: duration.instant, duration: duration.fast, ease: [...ease.enter] };

package/components/card-stack/card-stack.js

@@ -35,8 +35,8 @@ const unresistY = (shown) => {
 };
 const clampUnit = (value) => Math.min(1, Math.max(0, value));
 const throwSpring = { type: "spring", visualDuration: .5, bounce: 0 };
-const fadeOut = { duration: .22, delay: .12, ease: [...motionTokens.ease.standard] };
-const reducedFade = { duration: .15, ease: "linear" };
+const fadeOut = { duration: motionTokens.duration.exit, delay: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] };
+const reducedFade = { duration: motionTokens.duration.fast, ease: "linear" };
 function velocityOf(samples, now) {
     const recent = samples.filter(sample => now - sample.t <= 80);
     const first = recent[0], last = recent[recent.length - 1];

package/components/carousel/carousel.module.css

@@ -25,7 +25,7 @@
 .arrows { display: flex; flex: none; gap: var(--space-related); margin-left: auto; }
 .control { display: grid; width: var(--control-height-sm); height: var(--control-height-sm); flex: none; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; padding: 0; background: var(--surface); color: var(--foreground); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
 @media (hover: hover) and (pointer: fine) { .control:hover:not([aria-disabled="true"]) { background: var(--surface-muted); } }
-.control:active:not([aria-disabled="true"]) { transform: scale(.97); transition: transform 100ms var(--ease-standard); }
+.control:active:not([aria-disabled="true"]) { transform: scale(.97); transition: transform var(--duration-fast) var(--ease-standard); }
 .control[aria-disabled="true"] { color: var(--text-muted); cursor: default; opacity: .5; }
 .iconSlot { display: grid; width: 16px; height: 16px; place-items: center; }
 .icon { grid-area: 1 / 1; display: grid; place-items: center; }

package/components/chip-group/chip-group.js

@@ -9,7 +9,7 @@ const MORE = "\u0000more";
 const standard = [...motionTokens.ease.standard];
 const enterEase = [...motionTokens.ease.enter];
 const fade = { duration: motionTokens.duration.fast, ease: standard };
-const reducedFade = { duration: .15, ease: standard };
+const reducedFade = { duration: motionTokens.duration.fast, ease: standard };
 const exitFast = { duration: motionTokens.duration.fast, ease: standard };
 const shown = { opacity: 1, y: "0em", scale: 1, filter: "blur(0px)" };
 const textIn = { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` };

package/components/combobox/combobox.js

@@ -4,6 +4,7 @@ import { animate, AnimatePresence, motion, useReducedMotion } from "motion/react
 import { Check, ChevronDown, Search, X } from "lucide-react";
 import { forwardRef, useEffect, useId, useImperativeHandle, useMemo, useRef, useState, } from "react";
 import { motionTokens } from "../../lib/motion-tokens.js";
+import { useNearestItem } from "../../lib/fluid-hover.js";
 import styles from "./combobox.module.css";
 /** Follows the listbox height with a critically damped spring, so filtering never snaps the menu. */
 function AutoHeight({ children, reduceMotion }) {
@@ -32,6 +33,9 @@ export const Combobox = forwardRef(function Combobox({ label, options, value: co
     const [open, setOpen] = useState(false);
     const [query, setQuery] = useState("");
     const [activeIndex, setActiveIndex] = useState(-1);
+    // Fluid hover: the mouse makes the nearest option active, gaps and padding included, and a click there picks it.
+    // The listbox keeps focus in the input, so a press in its padding never closes the popover.
+    const nearest = useNearestItem({ items: '[role="option"]', onPick: (item) => setActiveIndex(Number(item.dataset.index)) });
     const selectedValue = controlledValue ?? uncontrolledValue;
     const selectedOption = options.find((option) => option.value === selectedValue);
     useImperativeHandle(forwardedRef, () => inputRef.current);
@@ -162,6 +166,6 @@ export const Combobox = forwardRef(function Combobox({ label, options, value: co
                             setQuery(event.target.value);
                             setOpen(true);
                             setActiveIndex(-1);
-                        }, onKeyDown: handleKeyDown }), _jsx(AnimatePresence, { initial: false, children: selectedOption && !disabled && (_jsx(motion.button, { type: "button", className: styles.clear, "aria-label": "Clear selection", onMouseDown: event => event.preventDefault(), onClick: clear, initial: reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.6, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, scale: 1, filter: "blur(0px)", transition: reduceMotion ? { duration: motionTokens.duration.instant } : { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast } } }, exit: { opacity: 0, ...(reduceMotion ? {} : { scale: 0.6, filter: `blur(${motionTokens.blur.subtle}px)` }), transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, whileTap: { scale: reduceMotion ? 1 : 0.96, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, children: _jsx(X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })) }), _jsx(ChevronDown, { className: styles.chevron, size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] }), description && _jsx("span", { id: hintId, className: styles.hint, children: description }), _jsx(AnimatePresence, { initial: false, children: open && (_jsx(motion.div, { className: styles.popover, initial: reduceMotion ? { opacity: 0 } : { opacity: 0, y: -6, scale: 0.97 }, animate: { opacity: 1, y: 0, scale: 1, transition: reduceMotion ? { duration: motionTokens.duration.instant } : { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] } } }, exit: { opacity: 0, ...(reduceMotion ? {} : { y: -4, scale: 0.98 }), transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, role: "presentation", children: _jsx(AutoHeight, { reduceMotion: reduceMotion, children: _jsx("div", { id: listboxId, className: styles.listbox, role: "listbox", "aria-label": `${label} options`, tabIndex: -1, children: filteredOptions.length ? filteredOptions.map((option, index) => (_jsxs("div", { ref: (element) => { optionRefs.current[option.value] = element; }, id: `${controlId}-option-${option.value}`, className: styles.option, "data-active": index === activeIndex ? "true" : undefined, "data-disabled": option.disabled ? "true" : undefined, role: "option", "aria-selected": option.value === selectedValue, "aria-disabled": option.disabled || undefined, onMouseDown: (event) => event.preventDefault(), onMouseEnter: () => !option.disabled && setActiveIndex(index), onClick: () => choose(option), children: [_jsx("span", { children: option.label }), option.value === selectedValue && _jsx(Check, { className: styles.check, size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] }, option.value))) : _jsx(motion.div, { className: styles.empty, role: "status", initial: reduceMotion ? false : { opacity: 0, y: 4, filter: `blur(${motionTokens.blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: emptyMessage }) }) }) })) })] }));
+                        }, onKeyDown: handleKeyDown }), _jsx(AnimatePresence, { initial: false, children: selectedOption && !disabled && (_jsx(motion.button, { type: "button", className: styles.clear, "aria-label": "Clear selection", onMouseDown: event => event.preventDefault(), onClick: clear, initial: reduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.6, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, scale: 1, filter: "blur(0px)", transition: reduceMotion ? { duration: motionTokens.duration.instant } : { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast } } }, exit: { opacity: 0, ...(reduceMotion ? {} : { scale: 0.6, filter: `blur(${motionTokens.blur.subtle}px)` }), transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, whileTap: { scale: reduceMotion ? 1 : 0.96, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, children: _jsx(X, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }) })) }), _jsx(ChevronDown, { className: styles.chevron, size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] }), description && _jsx("span", { id: hintId, className: styles.hint, children: description }), _jsx(AnimatePresence, { initial: false, children: open && (_jsx(motion.div, { className: styles.popover, initial: reduceMotion ? { opacity: 0 } : { opacity: 0, y: -6, scale: 0.97 }, animate: { opacity: 1, y: 0, scale: 1, transition: reduceMotion ? { duration: motionTokens.duration.instant } : { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] } } }, exit: { opacity: 0, ...(reduceMotion ? {} : { y: -4, scale: 0.98 }), transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, role: "presentation", children: _jsx(AutoHeight, { reduceMotion: reduceMotion, children: _jsx("div", { id: listboxId, className: styles.listbox, role: "listbox", "aria-label": `${label} options`, tabIndex: -1, onMouseDown: (event) => event.preventDefault(), ...nearest, children: filteredOptions.length ? filteredOptions.map((option, index) => (_jsxs("div", { ref: (element) => { optionRefs.current[option.value] = element; }, id: `${controlId}-option-${option.value}`, className: styles.option, "data-active": index === activeIndex ? "true" : undefined, "data-disabled": option.disabled ? "true" : undefined, role: "option", "aria-selected": option.value === selectedValue, "aria-disabled": option.disabled || undefined, onMouseDown: (event) => event.preventDefault(), "data-index": index, onClick: () => choose(option), children: [_jsx("span", { children: option.label }), option.value === selectedValue && _jsx(Check, { className: styles.check, size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] }, option.value))) : _jsx(motion.div, { className: styles.empty, role: "status", initial: reduceMotion ? false : { opacity: 0, y: 4, filter: `blur(${motionTokens.blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, transition: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: emptyMessage }) }) }) })) })] }));
 });
 Combobox.displayName = "Combobox";

package/components/command-palette/command-palette.js

@@ -4,6 +4,7 @@ import { useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "re
 import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
 import { Command as CommandIcon, Search, X } from "lucide-react";
 import { motionTokens } from "../../lib/motion-tokens.js";
+import { useNearestItem } from "../../lib/fluid-hover.js";
 import styles from "./command-palette.module.css";
 const enter = { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] };
 const leave = { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] };
@@ -74,6 +75,21 @@ export function CommandPalette({ items, placeholder = "Search commands", onSelec
         observer.observe(list);
         return () => observer.disconnect();
     }, []);
+    // Fluid hover: the mouse makes the nearest result active, group headings and padding included, and a click there runs it.
+    const nearest = useNearestItem({ items: '[role="option"]', onPick: item => {
+            const index = Number(item.dataset.index);
+            if (index !== safeActiveIndex) {
+                pointer.current = true;
+                setActiveIndex(index);
+            }
+        } });
+    function onListPointerMove(event) {
+        // Ignore the synthetic moves browsers send while the list scrolls under a still pointer.
+        if (event.clientX === lastPointer.current.x && event.clientY === lastPointer.current.y)
+            return;
+        lastPointer.current = { x: event.clientX, y: event.clientY };
+        nearest.onPointerMove(event);
+    }
     // One highlight follows the active result: a spring for the pointer, a 70ms slide for arrow keys, a fade when it first appears.
     useLayoutEffect(() => {
         const node = activeId ? document.getElementById(`${inputId}-${activeId}`) : null;
@@ -82,7 +98,7 @@ export function CommandPalette({ items, placeholder = "Search commands", onSelec
             animate(highlightOpacity, 0, { duration: reduced ? 0 : .1 });
             return;
         }
-        const move = !highlightShown.current || reduced ? { duration: 0 } : pointer.current ? motionTokens.spring.snappy : { duration: .07, ease: [...motionTokens.ease.enter] };
+        const move = !highlightShown.current || reduced ? { duration: 0 } : pointer.current ? motionTokens.spring.snappy : { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.enter] };
         // Rows sit inside positioned groups, so their offset is summed up to the list (layout transforms stay out of it).
         let top = 0;
         for (let element = node; element && element !== listRef.current; element = element.offsetParent)
@@ -137,15 +153,6 @@ export function CommandPalette({ items, placeholder = "Search commands", onSelec
                 onClose?.();
         }
     }
-    return _jsxs(motion.div, { className: styles.palette, initial: reduced ? false : { opacity: 0, y: 6, scale: .98 }, animate: { opacity: 1, y: 0, scale: 1 }, transition: reduced ? { duration: 0 } : { default: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] } }, children: [_jsxs("div", { className: styles.searchRow, children: [_jsx("span", { className: styles.searchIcon, children: _jsx(Search, { width: 18, height: 18, strokeWidth: 1.75, "aria-hidden": "true" }) }), _jsx("label", { className: styles.visuallyHidden, htmlFor: inputId, children: label }), _jsx("input", { ref: inputRef, id: inputId, role: "combobox", "aria-autocomplete": "list", "aria-expanded": "true", "aria-controls": `${inputId}-results`, "aria-activedescendant": activeId ? `${inputId}-${activeId}` : undefined, value: query, onChange: event => { setQuery(event.target.value); setActiveIndex(null); }, onKeyDown: handleKeyDown, placeholder: placeholder, autoComplete: "off" }), _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: query ? _jsx(motion.button, { className: styles.clearButton, type: "button", "aria-label": "Clear search", onClick: () => { setQuery(""); setActiveIndex(null); inputRef.current?.focus(); }, initial: reduced ? false : { opacity: 0, scale: .6, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, scale: 1, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, scale: .6, filter: `blur(${motionTokens.blur.subtle}px)`, transition: leave }, transition: reduced ? { duration: 0 } : { default: motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.instant } }, children: _jsx(X, { width: 15, height: 15, "aria-hidden": "true" }) }, "clear") : null }), onClose ? _jsx("button", { className: styles.closeButton, type: "button", "aria-label": "Close command palette", onClick: onClose, children: "Esc" }) : null, _jsx("kbd", { className: styles.commandKey, children: "\u2318 K" })] }), _jsx(motion.div, { className: styles.resultsFrame, initial: false, animate: { height: listHeight }, transition: reduced ? { duration: 0 } : motionTokens.spring.smooth, children: _jsxs(motion.div, { ref: listRef, layoutScroll: true, id: `${inputId}-results`, className: styles.results, role: "listbox", "aria-label": "Command results", children: [_jsx(motion.span, { className: styles.highlight, style: { y: highlightY, height: highlightHeight, opacity: highlightOpacity }, "aria-hidden": "true" }), _jsx(AnimatePresence, { mode: "wait", initial: false, children: filtered.length ? _jsx(motion.div, { initial: reduced ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, transition: leave }, transition: enter, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: glide, children: groupedItems.map(([group, entries]) => _jsxs(motion.div, { layout: glide ? "position" : false, className: styles.group, role: "group", "aria-label": group, variants: rowExit, initial: reduced ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: "exit", transition: reduced ? { duration: 0 } : { default: enter, layout: motionTokens.spring.smooth }, children: [_jsx("span", { className: styles.groupHeading, "aria-hidden": "true", children: group }), _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: glide, children: entries.map(({ item, index }) => _jsxs(motion.button, { layout: glide ? "position" : false, id: `${inputId}-${item.id}`, className: `${styles.result} ${index === safeActiveIndex ? styles.activeResult : ""}`, type: "button", role: "option", "aria-selected": index === safeActiveIndex, onClick: () => choose(item), onPointerMove: event => {
-                                                        // Ignore the synthetic moves browsers send while the list scrolls under a still pointer.
-                                                        if (event.clientX === lastPointer.current.x && event.clientY === lastPointer.current.y)
-                                                            return;
-                                                        lastPointer.current = { x: event.clientX, y: event.clientY };
-                                                        if (index !== safeActiveIndex) {
-                                                            pointer.current = true;
-                                                            setActiveIndex(index);
-                                                        }
-                                                    }, variants: rowExit, initial: reduced ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: "exit", transition: reduced ? { duration: 0 } : { default: enter, layout: motionTokens.spring.smooth }, children: [_jsx("span", { className: styles.itemIcon, "aria-hidden": "true", children: item.icon ?? _jsx(CommandIcon, { width: 16, height: 16 }) }), _jsxs("span", { className: styles.resultCopy, children: [_jsx("strong", { children: item.label }), item.description && _jsx("small", { children: item.description })] }), item.shortcut && _jsx("kbd", { className: styles.shortcut, children: item.shortcut })] }, item.id)) })] }, group)) }) }, "results") : _jsxs(motion.div, { className: styles.empty, initial: reduced ? false : { opacity: 0, y: 6, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, y: -4, transition: leave }, transition: enter, children: [_jsx("span", { children: _jsx(Search, { width: 20, height: 20, "aria-hidden": "true" }) }), _jsx("strong", { children: "No matching actions" }), _jsx("small", { children: "Try a different word or clear the search." })] }, "empty") })] }) })] });
+    return _jsxs(motion.div, { className: styles.palette, initial: reduced ? false : { opacity: 0, y: 6, scale: .98 }, animate: { opacity: 1, y: 0, scale: 1 }, transition: reduced ? { duration: 0 } : { default: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] } }, children: [_jsxs("div", { className: styles.searchRow, children: [_jsx("span", { className: styles.searchIcon, children: _jsx(Search, { width: 18, height: 18, strokeWidth: 1.75, "aria-hidden": "true" }) }), _jsx("label", { className: styles.visuallyHidden, htmlFor: inputId, children: label }), _jsx("input", { ref: inputRef, id: inputId, role: "combobox", "aria-autocomplete": "list", "aria-expanded": "true", "aria-controls": `${inputId}-results`, "aria-activedescendant": activeId ? `${inputId}-${activeId}` : undefined, value: query, onChange: event => { setQuery(event.target.value); setActiveIndex(null); }, onKeyDown: handleKeyDown, placeholder: placeholder, autoComplete: "off" }), _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: query ? _jsx(motion.button, { className: styles.clearButton, type: "button", "aria-label": "Clear search", onClick: () => { setQuery(""); setActiveIndex(null); inputRef.current?.focus(); }, initial: reduced ? false : { opacity: 0, scale: .6, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, scale: 1, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, scale: .6, filter: `blur(${motionTokens.blur.subtle}px)`, transition: leave }, transition: reduced ? { duration: 0 } : { default: motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.instant } }, children: _jsx(X, { width: 15, height: 15, "aria-hidden": "true" }) }, "clear") : null }), onClose ? _jsx("button", { className: styles.closeButton, type: "button", "aria-label": "Close command palette", onClick: onClose, children: "Esc" }) : null, _jsx("kbd", { className: styles.commandKey, children: "\u2318 K" })] }), _jsx(motion.div, { className: styles.resultsFrame, initial: false, animate: { height: listHeight }, transition: reduced ? { duration: 0 } : motionTokens.spring.smooth, children: _jsxs(motion.div, { ref: listRef, layoutScroll: true, id: `${inputId}-results`, className: styles.results, role: "listbox", "aria-label": "Command results", onPointerMove: onListPointerMove, onClick: nearest.onClick, children: [_jsx(motion.span, { className: styles.highlight, style: { y: highlightY, height: highlightHeight, opacity: highlightOpacity }, "aria-hidden": "true" }), _jsx(AnimatePresence, { mode: "wait", initial: false, children: filtered.length ? _jsx(motion.div, { initial: reduced ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, transition: leave }, transition: enter, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: glide, children: groupedItems.map(([group, entries]) => _jsxs(motion.div, { layout: glide ? "position" : false, className: styles.group, role: "group", "aria-label": group, variants: rowExit, initial: reduced ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: "exit", transition: reduced ? { duration: 0 } : { default: enter, layout: motionTokens.spring.smooth }, children: [_jsx("span", { className: styles.groupHeading, "aria-hidden": "true", children: group }), _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: glide, children: entries.map(({ item, index }) => _jsxs(motion.button, { layout: glide ? "position" : false, id: `${inputId}-${item.id}`, className: `${styles.result} ${index === safeActiveIndex ? styles.activeResult : ""}`, type: "button", role: "option", "aria-selected": index === safeActiveIndex, onClick: () => choose(item), "data-index": index, variants: rowExit, initial: reduced ? false : { opacity: 0 }, animate: { opacity: 1 }, exit: "exit", transition: reduced ? { duration: 0 } : { default: enter, layout: motionTokens.spring.smooth }, children: [_jsx("span", { className: styles.itemIcon, "aria-hidden": "true", children: item.icon ?? _jsx(CommandIcon, { width: 16, height: 16 }) }), _jsxs("span", { className: styles.resultCopy, children: [_jsx("strong", { children: item.label }), item.description && _jsx("small", { children: item.description })] }), item.shortcut && _jsx("kbd", { className: styles.shortcut, children: item.shortcut })] }, item.id)) })] }, group)) }) }, "results") : _jsxs(motion.div, { className: styles.empty, initial: reduced ? false : { opacity: 0, y: 6, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, y: -4, transition: leave }, transition: enter, children: [_jsx("span", { children: _jsx(Search, { width: 20, height: 20, "aria-hidden": "true" }) }), _jsx("strong", { children: "No matching actions" }), _jsx("small", { children: "Try a different word or clear the search." })] }, "empty") })] }) })] });
 }
 export default CommandPalette;

package/components/confirm-morph/confirm-morph.js

@@ -34,9 +34,9 @@ const faceVariants = {
 };
 const partVariants = {
     hidden: { opacity: 0, filter: `blur(${blur.soft}px)` },
-    shown: { opacity: 1, filter: "blur(0px)", transition: { duration: .26, ease: enter } },
+    shown: { opacity: 1, filter: "blur(0px)", transition: { duration: motionTokens.duration.exit, ease: enter } },
 };
-const reducedFace = { hidden: { opacity: 0 }, shown: { opacity: 1, transition: { duration: .14 } }, gone: { opacity: 0, transition: { duration: .1 } } };
+const reducedFace = { hidden: { opacity: 0 }, shown: { opacity: 1, transition: { duration: motionTokens.duration.fast } }, gone: { opacity: 0, transition: { duration: motionTokens.duration.instant } } };
 const reducedPart = { hidden: { opacity: 1 }, shown: { opacity: 1 } };
 function Face({ id, reduced, onSize, children, labelledBy }) {
     const ref = useRef(null);
@@ -61,7 +61,7 @@ function Part({ reduced, className, children }) {
 }
 /** A success disc that pops in with a tick drawing across it, the moment the action lands. */
 function Check({ reduced }) {
-    return _jsxs("svg", { className: styles.check, viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", children: [_jsx(motion.circle, { className: styles.checkDisc, cx: "9", cy: "9", r: "8", style: { transformOrigin: "9px 9px" }, initial: reduced ? false : { scale: .5, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { scale: physical(motionTokens.spring.snappy), opacity: { duration: .12 } } }), _jsx(motion.path, { className: styles.checkTick, d: "M5.6 9.3 7.8 11.4 12.4 6.7", strokeWidth: "1.9", strokeLinecap: "round", strokeLinejoin: "round", initial: reduced ? false : { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: .3, ease: enter, delay: .14 } })] });
+    return _jsxs("svg", { className: styles.check, viewBox: "0 0 18 18", fill: "none", "aria-hidden": "true", children: [_jsx(motion.circle, { className: styles.checkDisc, cx: "9", cy: "9", r: "8", style: { transformOrigin: "9px 9px" }, initial: reduced ? false : { scale: .5, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: { scale: physical(motionTokens.spring.snappy), opacity: { duration: motionTokens.duration.instant } } }), _jsx(motion.path, { className: styles.checkTick, d: "M5.6 9.3 7.8 11.4 12.4 6.7", strokeWidth: "1.9", strokeLinecap: "round", strokeLinejoin: "round", initial: reduced ? false : { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: .3, ease: enter, delay: .14 } })] });
 }
 /** A ring that drains with the countdown. */
 function Ring({ progress }) {
@@ -69,7 +69,7 @@ function Ring({ progress }) {
 }
 /** Seconds that swap in place: the old digit fades up and out, the new one rises in, on tabular figures so the width holds. */
 function Seconds({ value, reduced }) {
-    return _jsx("span", { className: styles.seconds, children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(motion.span, { className: styles.digit, initial: reduced ? { opacity: 0 } : { opacity: 0, y: 6, filter: `blur(${blur.subtle}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0 } : { opacity: 0, y: -6, filter: `blur(${blur.subtle}px)` }, transition: { duration: .22, ease: enter }, children: value }, value) }) });
+    return _jsx("span", { className: styles.seconds, children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: _jsx(motion.span, { className: styles.digit, initial: reduced ? { opacity: 0 } : { opacity: 0, y: 6, filter: `blur(${blur.subtle}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0 } : { opacity: 0, y: -6, filter: `blur(${blur.subtle}px)` }, transition: { duration: motionTokens.duration.exit, ease: enter }, children: value }, value) }) });
 }
 export function ConfirmMorph({ label, icon, prompt, confirmLabel = "Delete", cancelLabel = "Cancel", pendingLabel = "Deleting", doneLabel = "Deleted", errorLabel = "Couldn’t finish", retryLabel = "Retry", undoLabel = "Undo", undoingLabel = "Restoring", tone = "danger", confirmMode = "press", holdDuration = 1000, countdown = 3, countdownLabel, onConfirm, onUndo, onCancel, state: stateProp, defaultState = "idle", onStateChange, confirmTimeout = 6000, resultTimeout = 5000, cancelOnOutsidePress = true, disabled = false, className, ref, }) {
     const reduced = useReducedFlag();
@@ -252,7 +252,7 @@ export function ConfirmMorph({ label, icon, prompt, confirmLabel = "Delete", can
         holding.current = null;
         control.stop();
         if (hold.get() < 1) {
-            animate(hold, 0, reduced ? { duration: 0 } : { type: "spring", visualDuration: .3, bounce: 0 });
+            animate(hold, 0, reduced ? { duration: 0 } : { type: "spring", visualDuration: motionTokens.spring.fast.visualDuration, bounce: 0 });
             setAnnouncement(`Keep holding to ${confirmLabel.toLowerCase()}`);
         }
     };

package/components/context-menu/context-menu.js

@@ -5,6 +5,7 @@ import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { AnimatePresence, motion, useReducedMotion } from "motion/react";
 import { Check, Copy, MoreHorizontal, Trash2 } from "lucide-react";
 import { motionTokens } from "../../lib/motion-tokens.js";
+import { MenuHighlight, useMenuHighlight } from "../../lib/menu-highlight.js";
 import styles from "./context-menu.module.css";
 const MENU_WIDTH = 208;
 // Keeps the menu 8px inside the viewport. Rows are 34px with 5px padding and a 1px border; the real size is measured before paint.
@@ -22,11 +23,10 @@ export function ContextMenu({ children, items, label = "Context menu" }) {
     // Each open gets its own key, so reopening at a new point fades the old menu out in place
     // and grows a fresh one from the pointer instead of teleporting the visible menu.
     const [point, setPoint] = useState({ x: 0, y: 0, originX: 0, originY: 0, key: 0 });
-    const [highlight, setHighlight] = useState(null);
+    // Fluid hover: the nearest row is lit, gaps and padding included, and a click in a gap picks it.
+    const { highlight, reset, contentProps } = useMenuHighlight();
     const menuRef = useRef(null);
     const targetRef = useRef(null);
-    const pointer = useRef(false);
-    const clearTimer = useRef(0);
     // A primary press on the target while the menu is open closes it; the click that follows must not reopen it.
     const pressedWhileOpen = useRef(false);
     // An exiting menu keeps its last props, so its handlers check this before moving focus or selecting.
@@ -41,7 +41,6 @@ export function ContextMenu({ children, items, label = "Context menu" }) {
         const next = clampTo(anchor.current.x, anchor.current.y, node.offsetWidth, node.offsetHeight);
         setPoint(current => (current.x === next.x && current.y === next.y && current.originX === next.originX && current.originY === next.originY ? current : { ...next, key: current.key }));
     }, [open, point.key]);
-    useEffect(() => () => window.clearTimeout(clearTimer.current), []);
     useEffect(() => {
         if (!open)
             return;
@@ -68,9 +67,7 @@ export function ContextMenu({ children, items, label = "Context menu" }) {
         anchor.current = { x, y };
         const estimate = clampTo(x, y, MENU_WIDTH, Math.min(300, items.length * 34 + 12));
         setPoint(current => ({ ...estimate, key: current.key + 1 }));
-        window.clearTimeout(clearTimer.current);
-        pointer.current = false;
-        setHighlight(null);
+        reset();
         setPortal(true);
         setOpen(true);
     }
@@ -114,30 +111,15 @@ export function ContextMenu({ children, items, label = "Context menu" }) {
             targetRef.current?.focus();
         }
     }
-    function place(item, glide) {
-        window.clearTimeout(clearTimer.current);
-        const next = { index: Number(item.dataset.index), top: item.offsetTop, height: item.offsetHeight, danger: item.dataset.tone === "danger" };
-        setHighlight(current => ({ ...next, glide: glide && current !== null }));
-    }
-    // Keyboard focus places the highlight instantly; the pointer makes it glide between rows.
+    // Keyboard focus lights its row at once. A pointer-opened menu focuses its first row without lighting it, like a native menu.
     function onMenuFocus(event) {
-        const item = event.target instanceof HTMLElement ? event.target.closest('[role="menuitem"]') : null;
-        if (item) {
-            // A pointer-opened menu focuses its first row without showing a highlight, like a native menu.
-            if (!pointer.current && item.matches(":focus-visible"))
-                place(item, false);
-            return;
-        }
-        // A short grace period keeps the highlight gliding across the gap between rows.
-        window.clearTimeout(clearTimer.current);
-        clearTimer.current = window.setTimeout(() => setHighlight(null), pointer.current ? 70 : 0);
+        if (event.target instanceof HTMLElement && event.target.matches(":focus-visible"))
+            contentProps.onFocus(event);
     }
     return _jsxs(_Fragment, { children: [_jsx("div", { ref: targetRef, className: styles.target, tabIndex: 0, onPointerDown: event => { pressedWhileOpen.current = open && event.button === 0; }, onClick: onTargetClick, onContextMenu: event => { event.preventDefault(); showMenu(event.clientX, event.clientY); }, onKeyDown: onTargetKeyDown, "aria-label": label, "aria-haspopup": "menu", "aria-expanded": open, children: children }), portal ? createPortal(_jsx(AnimatePresence, { children: open && _jsxs(motion.div, { ref: node => { if (node)
-                        menuRef.current = node; }, className: styles.menu, role: "menu", "aria-label": label, tabIndex: -1, style: { left: point.x, top: point.y, transformOrigin: `${point.originX}px ${point.originY}px` }, onKeyDown: onMenuKeyDown, onFocus: onMenuFocus, onPointerMoveCapture: () => { pointer.current = true; }, onKeyDownCapture: () => { pointer.current = false; }, onPointerLeave: event => { if (live.current)
-                        event.currentTarget.focus({ preventScroll: true }); }, initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .96 }, animate: { opacity: 1, scale: 1 }, exit: reduced ? { opacity: 0, transition: { duration: motionTokens.duration.instant } } : { opacity: 0, scale: .98, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, transition: reduced ? { duration: motionTokens.duration.instant } : { default: motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] } }, children: [_jsx(motion.span, { className: styles.highlight, "data-tone": highlight?.danger ? "danger" : undefined, "aria-hidden": "true", initial: false, animate: highlight ? { y: highlight.top, height: highlight.height, opacity: 1 } : { opacity: 0 }, transition: { default: highlight?.glide && !reduced ? motionTokens.spring.snappy : { duration: 0 }, opacity: { duration: reduced ? 0 : motionTokens.duration.instant } } }), items.map((item, index) => _jsxs("button", { type: "button", role: "menuitem", tabIndex: -1, "data-index": index, "data-tone": item.destructive ? "danger" : undefined, style: { "--i": index }, disabled: item.disabled, className: [styles.item, item.destructive ? styles.destructive : ""].filter(Boolean).join(" "), onPointerMove: event => { if (!live.current)
-                                return; window.clearTimeout(clearTimer.current); if (document.activeElement !== event.currentTarget)
-                                event.currentTarget.focus({ preventScroll: true }); if (highlight?.index !== index)
-                                place(event.currentTarget, true); }, onPointerLeave: () => { if (live.current)
+                        menuRef.current = node; }, className: styles.menu, role: "menu", "aria-label": label, tabIndex: -1, style: { left: point.x, top: point.y, transformOrigin: `${point.originX}px ${point.originY}px` }, onKeyDown: onMenuKeyDown, ...contentProps, onFocus: onMenuFocus, onPointerLeave: event => { if (live.current)
+                        event.currentTarget.focus({ preventScroll: true }); }, initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .96 }, animate: { opacity: 1, scale: 1 }, exit: reduced ? { opacity: 0, transition: { duration: motionTokens.duration.instant } } : { opacity: 0, scale: .98, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, transition: reduced ? { duration: motionTokens.duration.instant } : { default: motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast, ease: [...motionTokens.ease.enter] } }, children: [_jsx(MenuHighlight, { state: highlight, className: styles.highlight }), items.map((item, index) => _jsxs("button", { type: "button", role: "menuitem", tabIndex: -1, "data-index": index, "data-tone": item.destructive ? "danger" : undefined, style: { "--i": index }, disabled: item.disabled, className: [styles.item, item.destructive ? styles.destructive : ""].filter(Boolean).join(" "), onPointerMove: event => { if (live.current && document.activeElement !== event.currentTarget)
+                                event.currentTarget.focus({ preventScroll: true }); }, onPointerLeave: () => { if (live.current)
                                 menuRef.current?.focus({ preventScroll: true }); }, onClick: () => { if (!live.current)
                                 return; live.current = false; item.onSelect?.(); setOpen(false); targetRef.current?.focus(); }, children: [_jsx("span", { className: styles.icon, "aria-hidden": "true", children: item.icon ?? (item.checked ? _jsx(Check, { size: 15 }) : _jsx(MoreHorizontal, { size: 15 })) }), _jsx("span", { children: item.label })] }, item.id))] }, point.key) }), document.body) : null] });
 }

package/components/copy-button/copy-button.js

@@ -8,9 +8,9 @@ import { useCopyFeedback } from "../../lib/use-copy-feedback.js";
 import styles from "./copy-button.module.css";
 /** Copy feedback is deliberately unhurried: a slow, almost critically damped spring and long, soft crossfades read as calm, never busy.
  *  The same motion plays in reverse when the confirmation hands back to idle, so nothing ever snaps. */
-const settle = { type: "spring", visualDuration: .5, bounce: .06 };
-const enter = { duration: .36, ease: [...motionTokens.ease.enter] };
-const leave = { duration: .2, ease: [...motionTokens.ease.standard] };
+const settle = { type: "spring", visualDuration: motionTokens.spring.slow.visualDuration, bounce: .06 };
+const enter = { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] };
+const leave = { duration: motionTokens.duration.exit, ease: [...motionTokens.ease.standard] };
 const instant = { duration: motionTokens.duration.instant };
 const soft = `blur(${motionTokens.blur.soft}px)`;
 const rest = { opacity: 1, y: 0, scale: 1, filter: "blur(0px)" };
@@ -18,7 +18,7 @@ const fadeIn = { ...rest, opacity: 0 };
 const fadeOut = { opacity: 0, transition: instant };
 /** Icons trade places in one soft breath: the old glyph shrinks into a blur while the new one grows out of it on the slow spring. */
 const iconIn = { opacity: 0, scale: .6, filter: soft };
-const iconOut = { opacity: 0, scale: .6, filter: soft, transition: { duration: .24, ease: [...motionTokens.ease.standard] } };
+const iconOut = { opacity: 0, scale: .6, filter: soft, transition: { duration: motionTokens.duration.exit, ease: [...motionTokens.ease.standard] } };
 const iconEnter = { scale: settle, opacity: { ...enter, delay: .03 }, filter: { ...enter, delay: .03 } };
 /** Letters rise about .3em out of a soft blur; the outgoing ones lift away a little faster. */
 const glyphIn = { opacity: 0, y: 4, filter: soft };

package/components/date-picker/date-picker.js

@@ -13,7 +13,7 @@ const instant = { duration: duration.instant };
 const valueRoll = {
     enter: (direction) => ({ opacity: 0, y: `${direction * 0.35}em`, filter: `blur(${blur.soft}px)` }),
     center: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: duration.standard, ease: ease.enter } },
-    exit: (direction) => ({ opacity: 0, y: `${direction * -0.3}em`, filter: `blur(${blur.subtle}px)`, transition: { duration: 0.14, ease: ease.standard } }),
+    exit: (direction) => ({ opacity: 0, y: `${direction * -0.3}em`, filter: `blur(${blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: ease.standard } }),
 };
 /** Reduced motion keeps a short crossfade; resting values match the roll so server and client markup agree. */
 const valueFade = { enter: { opacity: 0 }, center: { opacity: 1, y: 0, filter: "blur(0px)", transition: instant }, exit: { opacity: 0, transition: instant } };
@@ -21,7 +21,7 @@ const valueFade = { enter: { opacity: 0 }, center: { opacity: 1, y: 0, filter: "
 const statusRise = {
     enter: { opacity: 0, y: "0.3em", filter: `blur(${blur.soft}px)` },
     center: { opacity: 1, y: 0, filter: "blur(0px)", transition: { duration: duration.standard, ease: ease.enter } },
-    exit: { opacity: 0, y: "-0.3em", filter: `blur(${blur.subtle}px)`, transition: { duration: 0.14, ease: ease.standard } },
+    exit: { opacity: 0, y: "-0.3em", filter: `blur(${blur.subtle}px)`, transition: { duration: motionTokens.duration.fast, ease: ease.standard } },
 };
 export function DatePicker({ label, value, onChange, description, placeholder = "Select a date", minDate, maxDate, disabledDates, locale = "en-US", format = { month: "short", day: "numeric", year: "numeric" }, showToday, id, className, disabled, ...buttonProps }) {
     const generatedId = useId();
@@ -96,5 +96,5 @@ export function DatePicker({ label, value, onChange, description, placeholder =
     return _jsxs("div", { className: [styles.field, className].filter(Boolean).join(" "), ref: rootRef, onBlur: onBlur, children: [_jsx("label", { className: styles.label, htmlFor: controlId, children: label }), _jsxs("div", { className: styles.anchor, children: [_jsxs("button", { ...buttonProps, ref: triggerRef, id: controlId, type: "button", disabled: disabled, "aria-haspopup": "dialog", "aria-expanded": open, "aria-describedby": hintId, className: styles.trigger, onClick: () => (open ? close() : show()), onKeyDown: onTriggerKeyDown, children: [_jsx(CalendarDays, { size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("span", { className: styles.srOnly, children: shown }), _jsx("span", { className: styles.valueText, "aria-hidden": "true", children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: 1, children: value ? _jsx(motion.span, { className: styles.value, custom: 1, variants: reduce ? valueFade : valueRoll, initial: "enter", animate: "center", exit: "exit", children: parts.map((part, index) => _jsx(motion.span, { className: styles.part, layout: "position", layoutDependency: time, transition: partMotion, children: part.type === "literal" ? _jsx("span", { className: styles.partValue, children: part.value }) : _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: direction, children: _jsx(motion.span, { className: styles.partValue, custom: direction, variants: reduce ? valueFade : valueRoll, initial: "enter", animate: "center", exit: "exit", children: part.value }, part.value) }) }, `${index}-${part.type}`)) }, "value") : _jsx(motion.span, { className: styles.placeholder, custom: -1, variants: reduce ? valueFade : valueRoll, initial: "enter", animate: "center", exit: "exit", children: placeholder }, "placeholder") }) }), _jsx(ChevronDown, { className: styles.chevron, size: 16, strokeWidth: 1.75, "aria-hidden": "true" })] }), _jsx(AnimatePresence, { children: open && _jsxs(motion.div, { ref: popoverRef, className: styles.popover, role: "dialog", "aria-label": `${label} calendar`, onKeyDown: (event) => { if (event.key === "Escape") {
                                 event.stopPropagation();
                                 close();
-                            } }, initial: reduce ? { opacity: 0 } : { opacity: 0, y: -8, scale: .95 }, animate: { opacity: 1, y: 0, scale: 1, transition: reduce ? instant : { ...spring.snappy, opacity: { duration: duration.fast, ease: ease.enter } } }, exit: { opacity: 0, ...(reduce ? {} : { y: -6, scale: .97 }), transition: { duration: 0.14, ease: ease.standard } }, children: [_jsx(Calendar, { value: value, onChange: selectDate, month: month, onMonthChange: setMonth, minDate: minDate, maxDate: maxDate, disabledDates: disabledDates, locale: locale, showToday: showToday }), _jsxs("div", { className: styles.footer, children: [_jsx("button", { type: "button", onClick: () => selectDate(undefined), disabled: !value, children: "Clear" }), _jsx("span", { className: styles.status, children: _jsx(AnimatePresence, { initial: false, children: _jsx(motion.span, { variants: reduce ? valueFade : statusRise, initial: "enter", animate: "center", exit: "exit", children: value ? `Selected ${formatter.format(value)}` : "Choose a day" }, time ?? "none") }) })] })] }) })] }), description && _jsx("span", { id: hintId, className: styles.description, children: description })] });
+                            } }, initial: reduce ? { opacity: 0 } : { opacity: 0, y: -8, scale: .95 }, animate: { opacity: 1, y: 0, scale: 1, transition: reduce ? instant : { ...spring.snappy, opacity: { duration: duration.fast, ease: ease.enter } } }, exit: { opacity: 0, ...(reduce ? {} : { y: -6, scale: .97 }), transition: { duration: motionTokens.duration.fast, ease: ease.standard } }, children: [_jsx(Calendar, { value: value, onChange: selectDate, month: month, onMonthChange: setMonth, minDate: minDate, maxDate: maxDate, disabledDates: disabledDates, locale: locale, showToday: showToday }), _jsxs("div", { className: styles.footer, children: [_jsx("button", { type: "button", onClick: () => selectDate(undefined), disabled: !value, children: "Clear" }), _jsx("span", { className: styles.status, children: _jsx(AnimatePresence, { initial: false, children: _jsx(motion.span, { variants: reduce ? valueFade : statusRise, initial: "enter", animate: "center", exit: "exit", children: value ? `Selected ${formatter.format(value)}` : "Choose a day" }, time ?? "none") }) })] })] }) })] }), description && _jsx("span", { id: hintId, className: styles.description, children: description })] });
 }

package/components/date-picker/date-picker.module.css

@@ -26,7 +26,7 @@
 .status > span { grid-area: 1 / 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .footer button { border: 0; border-radius: var(--radius-control); padding: var(--space-tight) var(--space-related); background: transparent; color: var(--text-secondary); font: inherit; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
 @media (hover: hover) and (pointer: fine) { .footer button:hover:not(:disabled) { background: var(--surface-muted); color: var(--foreground); } }
-.footer button:active:not(:disabled) { transform: scale(.97); transition-duration: var(--duration-fast), var(--duration-fast), 100ms; transition-timing-function: var(--ease-standard); }
+.footer button:active:not(:disabled) { transform: scale(.97); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast); transition-timing-function: var(--ease-standard); }
 .footer button:disabled { cursor: not-allowed; opacity: .4; }
 .description { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); transition: opacity var(--duration-fast) var(--ease-standard); }
 /* The open calendar covers the hint; fading it keeps its first letters from peeking past the popover's rounded corner. */