@teamofsilicons/silicon-ui 0.2.0 → 0.4.0

package/components/elastic-slider/elastic-slider.module.css

@@ -15,7 +15,7 @@
 /* Only the band stretches. Ticks, thumb, and tag ride along without distorting. */
 .track { position: absolute; inset: 0; border-radius: var(--radius-full); corner-shape: round; background: var(--control-track); will-change: transform; }
 .fill { position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; background: var(--control-fill); }
-.tick { position: absolute; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: var(--radius-full); corner-shape: round; background: color-mix(in oklab, var(--foreground) 32%, transparent); pointer-events: none; transition: background-color var(--duration-fast) var(--ease-standard); }
+.tick { position: absolute; top: 50%; width: 4px; height: 4px; margin: calc(var(--space-hair) * -1) 0 0 calc(var(--space-hair) * -1); border-radius: var(--radius-full); corner-shape: round; background: color-mix(in oklab, var(--foreground) 32%, transparent); pointer-events: none; transition: background-color var(--duration-fast) var(--ease-standard); }
 .tick[data-on] { background: color-mix(in oklab, var(--control-glyph) 60%, transparent); }
 .thumbs { position: absolute; inset: 0 calc(var(--elastic-thumb) / 2); container-type: inline-size; pointer-events: none; }
 /* Each layer is as wide as the rail and slides by a percentage of itself, so placing the thumb needs no measuring. */
@@ -23,11 +23,11 @@
 .shift { position: absolute; inset: 0; }
 .thumb { position: absolute; top: 50%; right: 0; box-sizing: border-box; width: var(--elastic-thumb); height: var(--elastic-thumb); translate: 50% -50%; border: 0; border-radius: var(--radius-full); corner-shape: round; background: var(--control-thumb); box-shadow: var(--control-thumb-shadow); pointer-events: auto; cursor: grab; outline: none; transition: box-shadow var(--duration-fast) var(--ease-standard); }
 /* A generous invisible hit area for fingertips. */
-.thumb::after { content: ""; position: absolute; inset: -12px; border-radius: inherit; corner-shape: inherit; }
+.thumb::after { content: ""; position: absolute; inset: calc(var(--space-group) * -1); border-radius: inherit; corner-shape: inherit; }
 .root[data-dragging], .root[data-dragging] .control, .root[data-dragging] .thumb { cursor: grabbing; }
 /* The tag centers on the thumb until it would pass the component's edge, then holds there. It hangs from its bottom edge, so a swing pivots on the thumb. */
-.bubbleAnchor { --edge: calc(var(--elastic-thumb) / 2); --x: calc(var(--at, 0) * 1cqw); position: absolute; right: 0; bottom: calc(50% + var(--elastic-thumb) / 2 + 10px); display: flex; translate: clamp(calc(100% - var(--edge) - var(--x)), 50%, calc(100cqw + var(--edge) - var(--x))) 0; pointer-events: none; }
-@media (pointer: coarse) { .bubbleAnchor { bottom: calc(50% + var(--elastic-thumb) / 2 + 20px); } }
+.bubbleAnchor { --edge: calc(var(--elastic-thumb) / 2); --x: calc(var(--at, 0) * 1cqw); position: absolute; right: 0; bottom: calc(50% + var(--elastic-thumb) / 2 + var(--space-group)); display: flex; translate: clamp(calc(100% - var(--edge) - var(--x)), 50%, calc(100cqw + var(--edge) - var(--x))) 0; pointer-events: none; }
+@media (pointer: coarse) { .bubbleAnchor { bottom: calc(50% + var(--elastic-thumb) / 2 + var(--space-comfort)); } }
 .bubble { display: inline-flex; min-height: 1.75rem; align-items: center; padding: 0 var(--space-group); border-radius: var(--radius-full); corner-shape: round; background: var(--foreground); color: var(--background); box-shadow: var(--shadow-raised); font-size: var(--text-sm); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; transform-origin: 50% 130%; }
 .marks { position: relative; grid-area: 2 / 2; height: 1.25rem; margin: 0 calc(var(--elastic-thumb) / 2); color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 .markLabel { position: absolute; top: 0; translate: -50% 0; white-space: nowrap; cursor: pointer; transition: color var(--duration-fast) var(--ease-standard); }

package/components/expandable-card/expandable-card.js

@@ -17,7 +17,7 @@ const settleTime = 450;
 const boxTransition = (expanded, hold) => expanded || !hold ? morph : { ...morph, delay: closeHold };
 const contentTransition = (expanded) => expanded
     ? { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.standard], delay: 0.12 }
-    : { duration: 0.1, ease: [...motionTokens.ease.standard] };
+    : { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] };
 const still = { duration: 0 };
 /** Changed words in the summary rise in; unchanged words hold still. */
 const wordMotion = {

package/components/expandable-card/expandable-card.module.css

@@ -10,7 +10,7 @@
 .trigger:active { background: var(--surface-muted); }
 .copy { min-width: 0; }
 .copy strong { display: block; font-size: var(--text-sm); font-weight: 500; }
-.description { display: block; margin-top: 4px; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.description { display: block; margin-top: var(--space-tight); color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 .roll { position: relative; display: block; }
 .word { display: inline-block; white-space: pre; }
 .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

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

@@ -1,5 +1,5 @@
 /* A flat pill on the surface. Geometry comes from the component as --ebg-* variables, so the measured widths and the CSS agree. */
-.group { --ebg-h: 36px; --ebg-icon: 16px; --ebg-start: 10px; --ebg-gap: 7px; --ebg-end: 14px; --ebg-pad: 3px; position: relative; isolation: isolate; display: inline-flex; max-width: 100%; flex: none; align-items: center; gap: 2px; padding: var(--ebg-pad); border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); }
+.group { --ebg-h: 36px; --ebg-icon: 16px; --ebg-start: 10px; --ebg-gap: 7px; --ebg-end: 14px; --ebg-pad: 3px; position: relative; isolation: isolate; display: inline-flex; max-width: 100%; flex: none; align-items: center; gap: var(--space-hair); padding: var(--ebg-pad); border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); }
 
 /* The box never scales: its width is the animation, so a press answers with the icon and with color. The label overflows to the
    right of the icon and the clipped width reveals it. min-width keeps the spring's settle from pinching a collapsed button. */
@@ -17,8 +17,8 @@
 :global(:root[data-theme="dark"]) .item[data-tone="danger"][data-expanded] { background: color-mix(in oklab, var(--danger) 14%, var(--surface)); }
 :global(:root[data-theme="dark"]) .item[data-state="done"]:not([data-tone="danger"]) { background: color-mix(in oklab, var(--success) 14%, var(--surface)); }
 
-.icon { position: relative; display: grid; width: var(--ebg-icon); height: var(--ebg-icon); flex: none; place-items: center; transition: transform 320ms var(--ease-spring); }
-.item:active:not([aria-disabled="true"]) .icon { transform: scale(.86); transition-duration: 90ms; transition-timing-function: var(--ease-standard); }
+.icon { position: relative; display: grid; width: var(--ebg-icon); height: var(--ebg-icon); flex: none; place-items: center; transition: transform var(--duration-standard) var(--ease-spring); }
+.item:active:not([aria-disabled="true"]) .icon { transform: scale(.86); transition-duration: var(--duration-fast); transition-timing-function: var(--ease-standard); }
 .glyph { display: grid; grid-area: 1 / 1; place-items: center; width: 100%; height: 100%; }
 .glyph svg { width: 100%; height: 100%; stroke-width: 1.75; }
 

package/components/expanding-search/expanding-search.js

@@ -112,10 +112,10 @@ function Listbox({ id, label, groups, query, activeIndex, optionId, reduced, key
     }, [activeId, layoutKey, reduced, travel, fade, keyboard]);
     return _jsx("div", { ref: listRef, id: id, role: "listbox", "aria-label": label, className: styles.listbox, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: groups.map(group => {
                 const headingId = `${id}-${group.name || "results"}`.replace(/\s+/g, "-");
-                return _jsxs(motion.div, { role: "group", "aria-labelledby": group.name ? headingId : undefined, className: styles.group, layout: reduced ? false : "position", layoutDependency: layoutKey, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: { duration: .08 } }, transition: { opacity: { duration: motionTokens.duration.fast, ease: enter }, layout: motionTokens.spring.smooth }, children: [group.name && _jsx("div", { id: headingId, className: styles.groupLabel, role: "presentation", children: group.name }), _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: group.items.map(item => {
+                return _jsxs(motion.div, { role: "group", "aria-labelledby": group.name ? headingId : undefined, className: styles.group, layout: reduced ? false : "position", layoutDependency: layoutKey, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: { duration: motionTokens.duration.instant } }, transition: { opacity: { duration: motionTokens.duration.fast, ease: enter }, layout: motionTokens.spring.smooth }, children: [group.name && _jsx("div", { id: headingId, className: styles.groupLabel, role: "presentation", children: group.name }), _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: group.items.map(item => {
                                 const position = flat.indexOf(item);
                                 const active = position === activeIndex;
-                                return _jsxs(motion.div, { id: optionId(item), role: "option", "aria-selected": active, "data-active": active || undefined, className: styles.option, layout: reduced ? false : "position", layoutDependency: layoutKey, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: { duration: .08 } }, transition: { opacity: { duration: motionTokens.duration.fast, ease: enter }, layout: motionTokens.spring.smooth }, onPointerMove: () => { if (!active) {
+                                return _jsxs(motion.div, { id: optionId(item), role: "option", "aria-selected": active, "data-active": active || undefined, className: styles.option, layout: reduced ? false : "position", layoutDependency: layoutKey, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0, transition: { duration: motionTokens.duration.instant } }, transition: { opacity: { duration: motionTokens.duration.fast, ease: enter }, layout: motionTokens.spring.smooth }, onPointerMove: () => { if (!active) {
                                         keyboard.current = false;
                                         onHover(position);
                                     } }, onMouseDown: event => event.preventDefault(), onClick: () => onChoose(item), children: [active && _jsx(motion.span, { className: styles.highlight, style: { y: travel, opacity: fade }, "aria-hidden": "true" }), item.icon && _jsx("span", { className: styles.optionIcon, "aria-hidden": "true", children: item.icon }), _jsxs("span", { className: styles.optionText, children: [_jsx("span", { className: styles.optionTitle, children: _jsx(Match, { text: item.title, query: query }) }), item.meta && _jsx("span", { className: styles.optionMeta, children: item.meta })] })] }, item.id);
@@ -235,7 +235,7 @@ export function ExpandingSearch({ label, items, suggestions = [], suggestionsLab
                             setFocused(false);
                             if (open.current && !inputRef.current?.value.trim())
                                 collapse(false);
-                        }, onKeyDown: handleKeyDown }), _jsx(AnimatePresence, { initial: false, children: expanded && query && _jsx(motion.button, { type: "button", tabIndex: -1, className: styles.clear, "aria-label": "Clear search", onMouseDown: event => event.preventDefault(), onClick: () => { setQuery(""); setActive(-1); inputRef.current?.focus({ preventScroll: true }); }, initial: clearHidden, animate: { opacity: 1, scale: 1, filter: "blur(0px)" }, exit: { ...clearHidden, transition: { duration: reduced ? .1 : motionTokens.duration.instant, ease: standard } }, transition: reduced ? { duration: .15 } : { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast }, filter: { duration: motionTokens.duration.fast } }, children: _jsx(X, { width: 16, height: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }, "clear") })] }), _jsx(AnimatePresence, { children: panelOpen && _jsx(Panel, { width: width, reduced: reduced, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(motion.div, { className: styles.view, initial: reduced ? { opacity: 0 } : { opacity: 0, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: .1, ease: standard } }, transition: { duration: reduced ? .15 : motionTokens.duration.fast, ease: enter }, children: mode === "empty"
+                        }, onKeyDown: handleKeyDown }), _jsx(AnimatePresence, { initial: false, children: expanded && query && _jsx(motion.button, { type: "button", tabIndex: -1, className: styles.clear, "aria-label": "Clear search", onMouseDown: event => event.preventDefault(), onClick: () => { setQuery(""); setActive(-1); inputRef.current?.focus({ preventScroll: true }); }, initial: clearHidden, animate: { opacity: 1, scale: 1, filter: "blur(0px)" }, exit: { ...clearHidden, transition: { duration: reduced ? .1 : motionTokens.duration.instant, ease: standard } }, transition: reduced ? { duration: motionTokens.duration.fast } : { ...motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast }, filter: { duration: motionTokens.duration.fast } }, children: _jsx(X, { width: 16, height: 16, strokeWidth: 1.75, "aria-hidden": "true" }) }, "clear") })] }), _jsx(AnimatePresence, { children: panelOpen && _jsx(Panel, { width: width, reduced: reduced, children: _jsx(AnimatePresence, { mode: "popLayout", initial: false, children: _jsx(motion.div, { className: styles.view, initial: reduced ? { opacity: 0 } : { opacity: 0, filter: `blur(${motionTokens.blur.subtle}px)` }, animate: { opacity: 1, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: motionTokens.duration.instant, ease: standard } }, transition: { duration: reduced ? .15 : motionTokens.duration.fast, ease: enter }, children: mode === "empty"
                                 ? _jsxs("div", { className: styles.empty, children: [_jsxs("p", { className: styles.emptyTitle, children: ["No results for \u201C", trimmed, "\u201D"] }), _jsx("p", { className: styles.emptyHint, children: emptyHint })] })
                                 : _jsx(Listbox, { id: listboxId, label: mode === "suggestions" ? suggestionsLabel : `Results for ${trimmed}`, groups: groups, query: mode === "results" ? trimmed : "", activeIndex: activeIndex, optionId: optionId, reduced: reduced, keyboard: keyboard, onHover: setActive, onChoose: choose }) }, mode) }) }, "panel") }), _jsx("span", { className: styles.srOnly, role: "status", "aria-live": "polite", children: announcement })] });
 }

package/components/expanding-search/expanding-search.module.css

@@ -16,24 +16,24 @@
 .trigger { position: absolute; z-index: 1; inset: 0; margin: 0; padding: 0; border: 0; border-radius: inherit; corner-shape: inherit; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
 .trigger:focus-visible { outline: none; }
 /* The glass sits at the leading edge, so it is centered in the circle and rides that edge to its place in the open field. */
-.icon { position: absolute; top: calc(50% - 9px); left: calc(var(--control-height-md) / 2 - 10px); pointer-events: none; }
-.input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 40px 0 38px; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); text-overflow: ellipsis; outline: none; }
+.icon { position: absolute; top: calc(50% - var(--space-related)); left: calc(var(--control-height-md) / 2 - var(--space-group)); pointer-events: none; }
+.input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0 var(--space-page) 0 var(--space-block); border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); text-overflow: ellipsis; outline: none; }
 .input:focus-visible { outline: none; }
 .input::placeholder { color: var(--text-muted); opacity: 1; }
 .input[inert] { pointer-events: none; }
-.clear { position: absolute; z-index: 1; top: calc(50% - 14px); right: 7px; display: grid; width: 28px; height: 28px; place-items: center; margin: 0; padding: 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-muted); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); -webkit-tap-highlight-color: transparent; }
+.clear { position: absolute; z-index: 1; top: calc(50% - var(--space-inset)); right: var(--space-related); display: grid; width: 28px; height: 28px; place-items: center; margin: 0; padding: 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-muted); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); -webkit-tap-highlight-color: transparent; }
 
 /* A floating layer: its width is the field's, so it unfolds from the field on first open; its content keeps the final width and rides the leading edge. */
-.panel { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); box-shadow: var(--shadow-floating); pointer-events: auto; }
+.panel { position: absolute; z-index: var(--layer-dropdown); top: calc(100% + var(--space-related)); right: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); box-shadow: var(--shadow-floating); pointer-events: auto; }
 .root[data-anchor="start"] .panel { right: auto; left: 0; }
-.body { position: relative; width: calc(var(--es-width, 360px) - 2px); max-height: min(22rem, 60vh); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 6px; scrollbar-width: thin; }
+.body { position: relative; width: calc(var(--es-width, 360px) - 2px); max-height: min(22rem, 60vh); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-related); scrollbar-width: thin; }
 .view { position: relative; }
 /* A flex gap, not margins: a group popping out while it leaves never lets the next one's margin collapse through the list. */
-.listbox { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 4px; }
+.listbox { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--space-tight); }
 .group { position: relative; }
-.groupLabel { padding: 8px 12px 4px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); }
+.groupLabel { padding: var(--space-related) var(--space-group) var(--space-tight); color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); }
 /* Nested corners step down from the panel by its inset. The highlight paints under every row's content, so text never hides while it travels. */
-.option { position: relative; display: flex; min-height: 48px; align-items: center; gap: 12px; padding: 6px 12px; border-radius: calc(var(--radius-container) - 6px); corner-shape: var(--corner-shape); color: var(--foreground); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
+.option { position: relative; display: flex; min-height: 48px; align-items: center; gap: var(--space-group); padding: var(--space-related) var(--space-group); border-radius: calc(var(--radius-container) - var(--space-related)); corner-shape: var(--corner-shape); color: var(--foreground); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
 .highlight { position: absolute; z-index: -1; inset: 0; border-radius: inherit; corner-shape: inherit; background: color-mix(in oklab, var(--foreground) 6%, transparent); pointer-events: none; }
 .optionIcon { display: grid; flex: none; width: 18px; place-items: center; color: var(--text-muted); transition: color var(--duration-fast) var(--ease-standard); }
 .option[data-active] .optionIcon { color: var(--foreground); }
@@ -42,7 +42,7 @@
 .optionTitle { color: var(--foreground); font-size: var(--text-sm); }
 .optionMeta { color: var(--text-muted); font-size: var(--text-xs); }
 .mark { background: none; color: var(--foreground); font-weight: 500; }
-.empty { display: grid; gap: 2px; padding: 12px 12px 14px; }
+.empty { display: grid; gap: var(--space-hair); padding: var(--space-group) var(--space-group) var(--space-inset); }
 .emptyTitle { margin: 0; overflow-wrap: anywhere; color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
 .emptyHint { margin: 0; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
 .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

package/components/file-dropzone/file-dropzone.js

@@ -12,7 +12,7 @@ const exitFast = { duration: motionTokens.duration.fast, ease: [...motionTokens.
 const instant = { duration: 0 };
 const fade = { duration: motionTokens.duration.instant };
 /** Exits are shorter than entries: the same critically damped spring, settled sooner. */
-const collapse = { ...motionTokens.spring.smooth, visualDuration: .3 };
+const collapse = { ...motionTokens.spring.smooth, visualDuration: motionTokens.spring.moderate.visualDuration };
 const textIn = { opacity: 0, y: "0.3em", filter: `blur(${motionTokens.blur.soft}px)` };
 const textOut = { opacity: 0, y: "-0.3em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: exitFast };
 const shown = { opacity: 1, y: "0em", filter: "blur(0px)" };
@@ -21,7 +21,7 @@ const clamp = (value) => Math.min(Math.max(value, 0), 100);
 const SHAKE = { x: [0, -7, 6, -4, 3, -1.5, 0] };
 const shakeTransition = { duration: .42, ease: "easeOut" };
 /** New rows drop out of the target into the list, with a touch of life as they land. */
-const land = { type: "spring", visualDuration: .42, bounce: .14 };
+const land = { type: "spring", visualDuration: motionTokens.spring.slow.visualDuration, bounce: .14 };
 export function formatFileSize(bytes) {
     if (bytes < 1024)
         return `${bytes} B`;
@@ -76,7 +76,7 @@ function ErrorRow({ text }) {
 }
 /** The circle closes, then the tick draws through it. */
 function DrawnCheck({ reduce }) {
-    return _jsxs("svg", { className: styles.stateIcon, width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.25, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx(motion.path, { d: "M12 2.5a9.5 9.5 0 1 1 0 19a9.5 9.5 0 1 1 0-19", initial: reduce ? false : { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: motionTokens.duration.considered * .7, ease: [...motionTokens.ease.enter] } }), _jsx(motion.path, { d: "m8.2 12.4 2.6 2.6 5-5.2", initial: reduce ? false : { pathLength: 0 }, animate: { pathLength: 1 }, transition: { ...enter, delay: .16 } })] });
+    return _jsxs("svg", { className: styles.stateIcon, width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.25, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsx(motion.path, { d: "M12 2.5a9.5 9.5 0 1 1 0 19a9.5 9.5 0 1 1 0-19", initial: reduce ? false : { pathLength: 0 }, animate: { pathLength: 1 }, transition: { duration: motionTokens.duration.expressive * .7, ease: [...motionTokens.ease.enter] } }), _jsx(motion.path, { d: "m8.2 12.4 2.6 2.6 5-5.2", initial: reduce ? false : { pathLength: 0 }, animate: { pathLength: 1 }, transition: { ...enter, delay: .16 } })] });
 }
 function Thumb({ item }) {
     const [broken, setBroken] = useState(false);

package/components/file-dropzone/file-dropzone.module.css

@@ -4,9 +4,9 @@
 /* A folded prompt is a slimmer surface, so its corners step down to the panel radius. */
 .dropzone.compact { border-radius: var(--radius-container); corner-shape: var(--corner-shape); }
 /* The edge is a drawn stroke, fitted to the perimeter in script, so a drag can close its dashes into one line. */
-.edge { position: absolute; top: .5px; left: .5px; width: calc(100% - 1px); height: calc(100% - 1px); overflow: visible; pointer-events: none; }
+.edge { position: absolute; top: var(--space-hair); left: var(--space-hair); width: calc(100% - 1px); height: calc(100% - 1px); overflow: visible; pointer-events: none; }
 .edge rect { fill: none; stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3.5 3.5; stroke-dashoffset: 0; transition: stroke var(--duration-fast) var(--ease-standard), stroke-dasharray var(--duration-standard) var(--ease-standard), stroke-dashoffset var(--duration-standard) var(--ease-standard); }
-.trigger { display: flex; width: 100%; flex-direction: column; align-items: stretch; justify-content: center; border: 0; border-radius: inherit; corner-shape: inherit; padding: 34px var(--space-comfort); background: transparent; color: inherit; font: inherit; letter-spacing: var(--tracking-body); text-align: center; cursor: pointer; }
+.trigger { display: flex; width: 100%; flex-direction: column; align-items: stretch; justify-content: center; border: 0; border-radius: inherit; corner-shape: inherit; padding: var(--space-block) var(--space-comfort); background: transparent; color: inherit; font: inherit; letter-spacing: var(--tracking-body); text-align: center; cursor: pointer; }
 .trigger > * { pointer-events: none; }
 @media (hover: hover) and (pointer: fine) {
   .dropzone:has(.trigger:hover) { background: var(--surface-muted); }
@@ -19,24 +19,24 @@
 @keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.012); } }
 /* Light that follows the pointer: a wash inside, and a brighter stretch of the edge nearest the file. */
 .wash, .glow { position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; opacity: 0; pointer-events: none; transition: opacity var(--duration-standard) var(--ease-standard); }
-.glow { padding: 1.5px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
+.glow { padding: var(--space-hair); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
 .dragging .wash, .dragging .glow { opacity: 1; }
 .dragging .edge rect { stroke: color-mix(in oklab, var(--accent) 40%, var(--border)); stroke-dasharray: 7 0; stroke-dashoffset: 1.75; }
 /* No gaps between the prompt's parts: each slot carries its own space, so a folding slot takes its space with it. */
 .iconSlot, .noteSlot { display: flex; flex-direction: column; overflow: hidden; }
 /* Three sheets of paper, the target's one illustration. The slot's top margin is room for them to lift without clipping. */
-.sheets { position: relative; display: block; width: 36px; height: 44px; align-self: center; margin: 10px 0 14px; }
+.sheets { position: relative; display: block; width: 36px; height: 44px; align-self: center; margin: var(--space-group) 0 var(--space-inset); }
 .sheet {
   --r: 0deg; --x: 0px; --y: 0px;
-  position: absolute; inset: 0; display: grid; place-items: end center; padding: 0 0 5px;
+  position: absolute; inset: 0; display: grid; place-items: end center; padding: 0 0 var(--space-tight);
   border: 1px solid var(--border); border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: var(--surface-raised); color: var(--text-muted);
-  box-shadow: 0 1px 2px oklch(0% 0 0 / .05), 0 3px 8px oklch(0% 0 0 / .04);
+  box-shadow: var(--shadow-thumb);
   transform: translate(var(--x), var(--y)) rotate(var(--r));
   transform-origin: 50% 100%;
   transition: transform var(--duration-spring) var(--ease-spring), color var(--duration-standard) var(--ease-standard), border-color var(--duration-standard) var(--ease-standard);
 }
-.sheet::before, .sheet::after { position: absolute; top: 8px; left: 7px; width: 16px; height: 2px; border-radius: var(--radius-full); corner-shape: round; background: currentColor; content: ""; opacity: .3; }
-.sheet::after { top: 13px; width: 11px; }
+.sheet::before, .sheet::after { position: absolute; top: var(--space-related); left: var(--space-related); width: 16px; height: 2px; border-radius: var(--radius-full); corner-shape: round; background: currentColor; content: ""; opacity: .3; }
+.sheet::after { top: var(--space-group); width: 11px; }
 .sheet > svg { transition: transform var(--duration-spring) var(--ease-spring); }
 .dragging .sheet > svg { transform: translateY(-3px); }
 .sheet[data-sheet="back"] { --r: -10deg; --x: -9px; --y: 2px; }
@@ -53,31 +53,31 @@
 /* Full width and centered text: the label box never moves, so an outgoing label leaves from exactly where it was. */
 .label { position: relative; display: block; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
 .labelText { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: top; white-space: nowrap; }
-.hint { margin-top: 6px; color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
-.note { padding-top: 6px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
+.hint { margin-top: var(--space-related); color: var(--text-secondary); font-size: var(--text-sm); line-height: var(--leading-body); }
+.note { padding-top: var(--space-related); color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
 .input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
 .messageSlot { overflow: hidden; }
-.error { display: flex; align-items: flex-start; gap: 6px; padding-top: var(--space-group); color: var(--danger); font-size: var(--text-sm); line-height: var(--leading-body); }
+.error { display: flex; align-items: flex-start; gap: var(--space-related); padding-top: var(--space-group); color: var(--danger); font-size: var(--text-sm); line-height: var(--leading-body); }
 /* The icon sits on the first line's optical center, so a wrapped message keeps it at the top. */
-.errorIcon { flex: 0 0 auto; margin-top: 3px; }
+.errorIcon { flex: 0 0 auto; margin-top: var(--space-tight); }
 .errorCopy { position: relative; min-width: 0; flex: 1; }
 
 .list { display: grid; min-width: 0; margin: 0; padding: 0; list-style: none; container: dropzone-list / inline-size; }
-.inside .list { padding-inline: 12px; }
+.inside .list { padding-inline: var(--space-group); }
 /* Rows animate height; the gap lives inside the clipped row as margin, so a closing row reaches a true zero. */
 .item { min-width: 0; overflow: hidden; }
-.row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 58px; margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); padding: 8px 8px 8px 9px; background: var(--surface); transition: border-color var(--duration-standard) var(--ease-standard); }
+.row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-group); min-height: 58px; margin-top: var(--space-related); border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); padding: var(--space-related) var(--space-related) var(--space-related) var(--space-related); background: var(--surface); transition: border-color var(--duration-standard) var(--ease-standard); }
 .row.isFailed { border-color: color-mix(in oklab, var(--danger) 26%, var(--border)); }
 .fileIcon { display: grid; width: 40px; height: 40px; place-items: center; color: var(--text-secondary); }
-.thumb { display: block; width: 40px; height: 40px; overflow: hidden; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: var(--surface-muted); box-shadow: inset 0 0 0 1px oklch(0% 0 0 / .06); }
+.thumb { display: block; width: 40px; height: 40px; overflow: hidden; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: var(--surface-muted); box-shadow: var(--edge-inset); }
 .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
 .copy { display: grid; min-width: 0; }
 .name { overflow: hidden; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); text-overflow: ellipsis; white-space: nowrap; }
 .meta { display: flex; min-width: 0; align-items: center; margin-top: 1px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
-.dot { padding-inline: 6px; }
+.dot { padding-inline: var(--space-related); }
 /* The outgoing status is measured against this box when it pops out to leave. */
 .phase { position: relative; display: flex; min-width: 0; flex: 1; }
-.state { display: inline-flex; min-width: 0; align-items: center; gap: 5px; }
+.state { display: inline-flex; min-width: 0; align-items: center; gap: var(--space-tight); }
 .uploaded { color: var(--text-secondary); }
 .uploaded .stateIcon { color: var(--success); }
 .failed { color: var(--danger); }
@@ -85,18 +85,18 @@
 .reason { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 .percent { font-variant-numeric: tabular-nums; }
 .barFrame { display: block; overflow: hidden; }
-.bar { display: block; height: 4px; margin: 7px 0 2px; overflow: hidden; border-radius: var(--radius-full); corner-shape: round; background: var(--border); }
+.bar { display: block; height: 4px; margin: var(--space-related) 0 var(--space-hair); overflow: hidden; border-radius: var(--radius-full); corner-shape: round; background: var(--border); }
 /* The fill slides in from the left instead of scaling, so its rounded end keeps its shape at every value. */
 .barFill { display: block; width: 100%; height: 100%; border-radius: inherit; corner-shape: inherit; background: var(--accent); }
 .actions { display: flex; align-items: center; }
 .retrySlot { display: flex; overflow: hidden; }
-.retryInner { display: flex; padding: 3px 6px 3px 3px; }
+.retryInner { display: flex; padding: var(--space-tight) var(--space-related) var(--space-tight) var(--space-tight); }
 .retry, .remove { display: grid; place-items: center; border: 0; color: var(--text-secondary); font: inherit; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
-.retry { display: flex; height: 30px; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; padding: 0 12px 0 10px; background: var(--surface); color: var(--foreground); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-body); white-space: nowrap; }
+.retry { display: flex; height: 30px; align-items: center; gap: var(--space-tight); border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; padding: 0 var(--space-group) 0 var(--space-group); background: var(--surface); color: var(--foreground); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-body); white-space: nowrap; }
 /* On narrow lists Retry keeps only its icon, so the failure reason keeps the room to be read in full. */
 @container dropzone-list (max-width: 440px) { .retry { width: 30px; justify-content: center; padding: 0; } .retryLabel { display: none; } }
 /* On the narrowest lists the type icon steps aside for the name and status. */
-@container dropzone-list (max-width: 300px) { .row { grid-template-columns: minmax(0, 1fr) auto; padding-left: 14px; } .fileIcon, .thumb { display: none; } }
+@container dropzone-list (max-width: 300px) { .row { grid-template-columns: minmax(0, 1fr) auto; padding-left: var(--space-inset); } .fileIcon, .thumb { display: none; } }
 .remove { width: 32px; height: 32px; border-radius: var(--radius-full); corner-shape: round; background: transparent; }
 @media (hover: hover) and (pointer: fine) {
   .retry:hover { border-color: var(--border-strong); background: var(--surface-muted); }

package/components/file-upload/file-upload.module.css

@@ -1,38 +1,38 @@
 .root { display: grid; width: 100%; min-width: 0; color: var(--foreground); }
 .input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
 /* A full-width drop target: press feedback is color only, never a scale. */
-.dropzone { display: flex; min-height: 92px; align-items: center; gap: 12px; padding: 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface); cursor: pointer; transition: border-color var(--duration-standard) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard); }
+.dropzone { display: flex; min-height: 92px; align-items: center; gap: var(--space-group); padding: var(--space-inset); border: 1px dashed var(--border-strong); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface); cursor: pointer; transition: border-color var(--duration-standard) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard); }
 .dropzone.dragging, .dropzone:not(.disabled):active { border-color: var(--accent); background: var(--accent-subtle); }
 .dropzone.disabled { cursor: not-allowed; opacity: .52; }
 .uploadIcon, .fileIcon { display: grid; flex: 0 0 auto; place-items: center; color: var(--accent-strong); }
 /* The cloud lifts toward the file while it hovers over the drop target. */
 .uploadIcon { width: 24px; height: 24px; transition: transform var(--duration-spring) var(--ease-spring); }
 .dragging .uploadIcon { transform: translateY(-3px); }
-.copy { display: grid; min-width: 0; gap: 3px; flex: 1; }
+.copy { display: grid; min-width: 0; gap: var(--space-tight); flex: 1; }
 .copy strong { font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
 .label { position: relative; display: block; min-width: 0; }
 .labelText { display: block; }
 .copy > span { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); overflow-wrap: anywhere; }
 .browse { flex: 0 0 auto; color: var(--accent-strong); font-size: var(--text-xs); font-weight: 500; }
 .statusFrame { overflow: hidden; }
-.status { position: relative; min-height: 16px; margin: 0; padding-top: 8px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
+.status { position: relative; min-height: 16px; margin: 0; padding-top: var(--space-related); color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
 .statusText { display: block; }
 .fileList { display: grid; margin: 0; padding: 0; list-style: none; }
 /* The gap lives inside the clipped row, so a collapsing row reaches zero height instead of stopping at its padding. */
 .fileRow { overflow: hidden; }
-.fileItem { display: flex; margin-top: 6px; min-width: 0; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border: 1px solid var(--border-subtle); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface-muted); }
+.fileItem { display: flex; margin-top: var(--space-related); min-width: 0; align-items: center; gap: var(--space-group); padding: var(--space-group) var(--space-group) var(--space-group) var(--space-group); border: 1px solid var(--border-subtle); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface-muted); }
 .fileIcon { width: 24px; height: 24px; color: var(--text-secondary); }
-.fileCopy { display: grid; min-width: 0; flex: 1; gap: 2px; }
+.fileCopy { display: grid; min-width: 0; flex: 1; gap: var(--space-hair); }
 .fileCopy strong { overflow: hidden; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); text-overflow: ellipsis; white-space: nowrap; }
 .fileCopy > span { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
 .meta { display: flex; min-width: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
-.dot { padding-inline: 5px; }
+.dot { padding-inline: var(--space-tight); }
 .phase { position: relative; display: inline-block; }
 .phaseText { display: block; }
 .percent { display: inline-block; min-width: 4ch; }
 .fileCopy .error { color: var(--danger); }
 .barFrame { display: block; }
-.bar { display: block; height: 3px; margin: 5px 0 1px; overflow: hidden; border-radius: var(--radius-full); corner-shape: round; background: var(--border); }
+.bar { display: block; height: 3px; margin: var(--space-tight) 0 1px; overflow: hidden; border-radius: var(--radius-full); corner-shape: round; background: var(--border); }
 .barFill { display: block; width: 100%; height: 100%; border-radius: inherit; corner-shape: inherit; background: var(--accent); }
 .statusSlot { position: relative; display: grid; width: 26px; height: 26px; flex: 0 0 auto; place-items: center; }
 .retrySlot { display: grid; place-items: center; }

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

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from
 import { Check, ChevronLeft, ChevronRight, Plus, X } from "lucide-react";
 import { AnimatePresence, animate, motion, useIsPresent, useMotionValue, useReducedMotion, useTransform } from "motion/react";
 import { motionTokens } from "../../lib/motion-tokens.js";
+import { useNearestItem } from "../../lib/fluid-hover.js";
 import styles from "./filter-toolbar.module.css";
 const enter = { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] };
 const leave = { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] };
@@ -128,6 +129,10 @@ function MenuList({ rows, labelledBy, onChoose, onBack, onLeave, radio }) {
     const typed = useRef({ text: "", at: 0 });
     const [current, setCurrent] = useState(() => Math.max(0, rows.findIndex(row => row.checked)));
     const [highlight, setHighlight] = useState(null);
+    // Fluid hover: the mouse focuses the nearest row, gaps 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-row]", onPick: item => { pointer.current = true; if (document.activeElement !== item)
+            item.focus({ preventScroll: true }); } });
     const items = () => Array.from(list.current?.querySelectorAll("[data-row]") ?? []);
     const move = (item) => {
         const node = list.current;
@@ -183,9 +188,8 @@ function MenuList({ rows, labelledBy, onChoose, onBack, onLeave, radio }) {
         if (!list.current?.contains(event.relatedTarget))
             setHighlight(previous => previous && { ...previous, glide: false, ring: false, shown: false });
     }
-    return _jsxs("div", { ref: list, className: styles.list, role: "menu", "aria-labelledby": labelledBy, "data-current": present ? "" : undefined, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, onPointerLeave: () => { if (pointer.current && list.current?.contains(document.activeElement))
-            onLeave(); }, children: [_jsx(motion.span, { className: styles.highlight, "data-ring": highlight?.ring || undefined, "aria-hidden": "true", initial: false, animate: highlight ? { y: highlight.top, height: highlight.height, opacity: highlight.shown ? 1 : 0 } : { opacity: 0 }, transition: { default: highlight?.glide ? motionTokens.spring.snappy : still, opacity: { duration: reduced ? 0 : .08 } } }), rows.map((row, index) => _jsxs("button", { type: "button", className: styles.item, role: radio ? "menuitemradio" : "menuitem", "aria-checked": radio ? !!row.checked : undefined, tabIndex: index === current ? 0 : -1, "data-row": row.key, "data-text": row.label, onPointerMove: event => { pointer.current = true; if (document.activeElement !== event.currentTarget)
-                    event.currentTarget.focus({ preventScroll: true }); }, onClick: (event) => onChoose(row, event.detail === 0), children: [row.icon ? _jsx("span", { className: styles.itemIcon, "aria-hidden": "true", children: row.icon }) : null, _jsx("span", { className: styles.itemLabel, children: row.label }), row.meta ? _jsx("span", { className: styles.itemMeta, children: row.meta }) : null] }, row.key))] });
+    return _jsxs("div", { ref: list, className: styles.list, role: "menu", "aria-labelledby": labelledBy, "data-current": present ? "" : undefined, onKeyDown: onKeyDown, onFocus: onFocus, onBlur: onBlur, ...nearest, onPointerLeave: () => { if (pointer.current && list.current?.contains(document.activeElement))
+            onLeave(); }, children: [_jsx(motion.span, { className: styles.highlight, "data-ring": highlight?.ring || undefined, "aria-hidden": "true", initial: false, animate: highlight ? { y: highlight.top, height: highlight.height, opacity: highlight.shown ? 1 : 0 } : { opacity: 0 }, transition: { default: highlight?.glide ? motionTokens.spring.snappy : still, opacity: { duration: reduced ? 0 : .08 } } }), rows.map((row, index) => _jsxs("button", { type: "button", className: styles.item, role: radio ? "menuitemradio" : "menuitem", "aria-checked": radio ? !!row.checked : undefined, tabIndex: index === current ? 0 : -1, "data-row": row.key, "data-text": row.label, onClick: (event) => onChoose(row, event.detail === 0), children: [row.icon ? _jsx("span", { className: styles.itemIcon, "aria-hidden": "true", children: row.icon }) : null, _jsx("span", { className: styles.itemLabel, children: row.label }), row.meta ? _jsx("span", { className: styles.itemMeta, children: row.meta }) : null] }, row.key))] });
 }
 /** The room the panel may use: the viewport, narrowed on each axis by any ancestor that clips that axis, so a panel
  *  inside a scrolling or clipped container flips and shifts within what is actually visible. */

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

@@ -24,7 +24,7 @@
 /* Add filter: the trigger is transparent and the surface behind it is the button's rounded rectangle.
    Opening springs that same surface to the panel size, so the button itself becomes the menu. */
 .menu { position: relative; display: inline-flex; flex: none; isolation: isolate; }
-.menu:not([data-state="closed"]) { z-index: 30; }
+.menu:not([data-state="closed"]) { z-index: var(--layer-dropdown); }
 .trigger { position: relative; z-index: 1; display: inline-flex; min-height: var(--control-height-sm); align-items: center; padding: 0 var(--space-group); border: 1px solid transparent; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); letter-spacing: var(--tracking-body); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; }
 .menu[data-state="open"] .trigger { pointer-events: none; }
 .face { display: inline-flex; align-items: center; gap: var(--space-related); }
@@ -38,24 +38,24 @@
 @media (hover: hover) and (pointer: fine) {
   .menu[data-state="closed"] .trigger:hover + .surface { background: var(--surface-muted); box-shadow: var(--shadow-resting); }
 }
-.panel { position: absolute; top: 0; left: 0; width: min(var(--filter-menu-width, 16rem), calc(100vw - var(--space-block))); padding: 6px 6px 6px; outline: none; }
+.panel { position: absolute; top: 0; left: 0; width: min(var(--filter-menu-width, 16rem), calc(100vw - var(--space-block))); padding: var(--space-related) var(--space-related) var(--space-related); outline: none; }
 .menu[data-y="up"] .panel { top: auto; bottom: 0; }
 .menu[data-state="closed"] .panel { visibility: hidden; }
-.head { display: flex; height: 32px; align-items: center; padding: 0 var(--space-related) 0 10px; }
-.menu[data-y="up"] .head { margin-top: 4px; }
-.back { display: grid; width: 28px; height: 28px; flex: none; place-items: center; margin-left: -6px; padding: 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+.head { display: flex; height: 32px; align-items: center; padding: 0 var(--space-related) 0 var(--space-group); }
+.menu[data-y="up"] .head { margin-top: var(--space-tight); }
+.back { display: grid; width: 28px; height: 28px; flex: none; place-items: center; margin-left: calc(var(--space-related) * -1); padding: 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-secondary); cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
 .back:active { background: var(--surface-muted); color: var(--foreground); }
 .title { position: relative; display: flex; min-width: 0; color: var(--foreground); font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-body); white-space: nowrap; }
 .titleText { display: block; }
-.stage { position: relative; margin-top: 2px; }
+.stage { position: relative; margin-top: var(--space-hair); }
 .step { width: 100%; }
 .list { position: relative; display: grid; max-height: min(20rem, 55vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
-.highlight { position: absolute; top: 0; right: 0; left: 0; border-radius: calc(var(--radius-container) - 6px); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6%, transparent); opacity: 0; pointer-events: none; }
+.highlight { position: absolute; top: 0; right: 0; left: 0; border-radius: calc(var(--radius-container) - var(--space-related)); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6%, transparent); opacity: 0; pointer-events: none; }
 .item:focus-visible { outline: none; }
-.item { position: relative; display: flex; min-width: 0; min-height: var(--control-height-sm); align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: calc(var(--radius-container) - 6px); corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); text-align: left; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
+.item { position: relative; display: flex; min-width: 0; min-height: var(--control-height-sm); align-items: center; gap: var(--space-group); padding: 0 var(--space-group); border: 0; border-radius: calc(var(--radius-container) - var(--space-related)); corner-shape: var(--corner-shape); background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); text-align: left; cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent; }
 .itemIcon { display: inline-flex; min-width: 16px; flex: none; align-items: center; justify-content: center; color: var(--text-secondary); }
 .itemLabel { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.itemMeta { display: inline-flex; min-width: 0; flex: none; align-items: center; gap: 6px; max-width: 50%; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.itemMeta { display: inline-flex; min-width: 0; flex: none; align-items: center; gap: var(--space-related); max-width: 50%; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 .metaValue { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .hint { min-width: 2ch; text-align: right; }
 .check { display: inline-flex; width: 15px; color: var(--foreground); opacity: 0; }

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

@@ -33,7 +33,7 @@
 /* Buttons are not positioned, so the highlight measures them against the tray and stacks above their background. */
 .item { display: inline-flex; min-width: var(--fbg-h); height: var(--fbg-h); flex: none; align-items: center; justify-content: center; margin: 0; padding: 0 var(--fbg-pad-x); border: 0; border-radius: var(--fbg-radius); background: transparent; color: inherit; font: inherit; font-size: var(--text-sm); font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
 .sm .item { font-size: var(--text-xs); }
-.item[data-icon]:not([data-icon-only]) { padding-left: calc(var(--fbg-pad-x) - 2px); }
+.item[data-icon]:not([data-icon-only]) { padding-left: calc(var(--fbg-pad-x) - var(--space-hair)); }
 .item[data-icon-only] { width: var(--fbg-h); padding: 0; }
 .item[data-active], .item[aria-pressed="true"] { color: var(--foreground); }
 .item[aria-pressed="true"] { background: var(--fbg-on); }
@@ -45,21 +45,21 @@
 .slot { position: relative; z-index: 2; display: inline-grid; align-items: center; justify-items: center; }
 .slot > * { grid-area: 1 / 1; }
 .vertical .slot { justify-items: start; }
-.ghost { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; visibility: hidden; pointer-events: none; }
+.ghost { display: inline-flex; align-items: center; gap: var(--space-related); white-space: nowrap; visibility: hidden; pointer-events: none; }
 .iconSpace { display: block; width: 16px; height: 16px; flex: none; }
-.phase { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
+.phase { display: inline-flex; align-items: center; gap: var(--space-related); white-space: nowrap; }
 .icon { display: inline-flex; flex: none; }
 .icon svg { width: 16px; height: 16px; stroke-width: 1.75; }
 .text { display: block; }
 
-.separator { flex: none; align-self: center; width: 1px; height: calc(var(--fbg-h) * .5); margin-inline: 2px; border-radius: var(--radius-full); corner-shape: round; background: var(--fbg-rule); }
-.vertical .separator { width: calc(var(--fbg-h) * .5); height: 1px; margin: 2px 0; }
+.separator { flex: none; align-self: center; width: 1px; height: calc(var(--fbg-h) * .5); margin-inline: var(--space-hair); border-radius: var(--radius-full); corner-shape: round; background: var(--fbg-rule); }
+.vertical .separator { width: calc(var(--fbg-h) * .5); height: 1px; margin: var(--space-hair) 0; }
 
 .tip { display: inline-flex; align-items: baseline; gap: var(--space-group); white-space: nowrap; }
 .kbd { font: inherit; color: color-mix(in oklab, var(--background) 58%, var(--foreground)); font-variant-numeric: tabular-nums; }
 
 /* Side tooltips for a column match the library tooltip, rising a few pixels away from the rail instead of up. */
-.sideTip { --tip-x: -3px; z-index: 90; max-width: 15rem; padding: var(--space-group) var(--space-inset); border: 1px solid color-mix(in oklab, var(--background) 14%, var(--foreground)); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--foreground); color: var(--background); box-shadow: var(--shadow-raised); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; letter-spacing: var(--tracking-body); line-height: var(--leading-body); transform-origin: var(--radix-tooltip-content-transform-origin); transition: opacity var(--duration-fast) var(--ease-enter), transform var(--duration-fast) var(--ease-enter); }
+.sideTip { --tip-x: -3px; z-index: var(--layer-tooltip); max-width: 15rem; padding: var(--space-group) var(--space-inset); border: 1px solid color-mix(in oklab, var(--background) 14%, var(--foreground)); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--foreground); color: var(--background); box-shadow: var(--shadow-raised); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 400; letter-spacing: var(--tracking-body); line-height: var(--leading-body); transform-origin: var(--radix-tooltip-content-transform-origin); transition: opacity var(--duration-fast) var(--ease-enter), transform var(--duration-fast) var(--ease-enter); }
 .sideTip[data-side="left"] { --tip-x: 3px; }
 @starting-style {
   .sideTip[data-state$="-open"] { opacity: 0; transform: translateX(var(--tip-x)) scale(.97); }
@@ -70,5 +70,5 @@
 
 @media (prefers-reduced-motion: reduce) {
   .item, .highlight { transition: color var(--duration-instant) linear, background-color var(--duration-instant) linear, opacity var(--duration-instant) linear; }
-  .sideTip, .sideTip[data-state="closed"] { transform: none; transition: opacity 90ms linear; }
+  .sideTip, .sideTip[data-state="closed"] { transform: none; transition: opacity var(--duration-fast) linear; }
 }

package/components/gauge/gauge.js

@@ -9,7 +9,7 @@ const rise = { hidden: (direction) => ({ opacity: 0, y: `${.3 * direction}em`, f
 // Same keys as `rise` so the settled style is identical whichever branch renders on the server.
 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 } } };
 /** The first fill is slower and never overshoots, like a ring closing when the view opens. */
-const reveal = { ...motionTokens.spring.smooth, visualDuration: motionTokens.duration.considered * 1.6 };
+const reveal = { ...motionTokens.spring.smooth, visualDuration: motionTokens.duration.expressive * 1.6 };
 /** New copy rises in while the old copy leaves, popped out of flow so the line never holds both. */
 function Swap({ text, direction = 1 }) {
     const reduceMotion = !!useReducedMotion();

package/components/gauge/gauge.module.css

@@ -1,4 +1,4 @@
-.figure { display: grid; justify-items: center; min-width: 0; gap: 10px; margin: 0; text-align: center; }.figure figcaption { display: grid; gap: 3px; min-width: 0; }.figure strong { font-size: var(--text-sm); font-weight: 500; }.detail { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.figure { display: grid; justify-items: center; min-width: 0; gap: var(--space-group); margin: 0; text-align: center; }.figure figcaption { display: grid; gap: var(--space-tight); min-width: 0; }.figure strong { font-size: var(--text-sm); font-weight: 500; }.detail { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 .accent { --gauge-color: var(--accent); --gauge-text: var(--accent-strong); }.success { --gauge-color: var(--success); --gauge-text: var(--success); }.warning { --gauge-color: var(--warning); --gauge-text: var(--warning); }.danger { --gauge-color: var(--danger); --gauge-text: var(--danger); }
 
 /* An activity style ring: a thick stroke with round caps over a faint tint of its own color. The stroke scales with the ring. */
@@ -9,7 +9,7 @@
 .arc { stroke: var(--gauge-color); }
 
 /* The readout sits on the ring's true centre, which is the middle of a square as wide as the ring. */
-.readout { position: absolute; top: 0; left: 0; display: grid; width: 100%; aspect-ratio: 1; place-content: center; justify-items: center; gap: 4px; pointer-events: none; }
+.readout { position: absolute; top: 0; left: 0; display: grid; width: 100%; aspect-ratio: 1; place-content: center; justify-items: center; gap: var(--space-tight); pointer-events: none; }
 .number { position: relative; display: inline-flex; align-items: baseline; color: var(--foreground); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; letter-spacing: var(--tracking-display); line-height: 1; font-variant-numeric: tabular-nums; }
 .digits { display: inline-flex; justify-content: flex-end; white-space: nowrap; }
 .unit { margin-left: 1px; color: var(--text-secondary); font-family: var(--font-body); font-size: .5em; letter-spacing: 0; }

package/components/hover-card/hover-card.js

@@ -59,8 +59,8 @@ const Surface = forwardRef(function Surface({ instant, reduced, className, style
         const unsubscribe = progress.on("change", apply);
         apply(progress.get());
         const controls = isPresent
-            ? animate(progress, 1, still ? { duration: .14, ease: enter } : motionTokens.spring.smooth)
-            : animate(progress, 0, { duration: .12, ease: standard });
+            ? animate(progress, 1, still ? { duration: motionTokens.duration.fast, ease: enter } : motionTokens.spring.smooth)
+            : animate(progress, 0, { duration: motionTokens.duration.instant, ease: standard });
         // The fade leads the grow on the way in and runs alongside it on the way out; it starts from the current opacity either way.
         const fade = isPresent
             ? animate(opacity, 1, { duration: reduced ? .15 : still ? .09 : .16, ease: enter })

package/components/hover-card/hover-card.module.css

@@ -1,5 +1,5 @@
 /* A floating layer, so it earns the floating shadow. Transforms pivot on the placed origin, the corner nearest the trigger. */
-.card { z-index: 60; box-sizing: border-box; width: 18.5rem; max-width: min(18.5rem, var(--radix-popover-content-available-width, calc(100vw - 24px))); padding: var(--space-inset); border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); font-family: var(--font-body); letter-spacing: var(--tracking-body); transform-origin: var(--radix-popover-content-transform-origin); outline: none; }
+.card { z-index: var(--layer-popover); box-sizing: border-box; width: 18.5rem; max-width: min(18.5rem, var(--radix-popover-content-available-width, calc(100vw - 24px))); padding: var(--space-inset); border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); font-family: var(--font-body); letter-spacing: var(--tracking-body); transform-origin: var(--radix-popover-content-transform-origin); outline: none; }
 .profile { display: grid; gap: var(--space-group); }
 .head { display: flex; min-width: 0; align-items: center; gap: var(--space-group); }
 .avatar { position: relative; display: grid; width: 48px; height: 48px; flex: none; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-muted); color: var(--foreground); font-size: var(--text-sm); font-weight: 500; }
@@ -15,6 +15,6 @@
 .stat { display: flex; flex-direction: column-reverse; }
 .stat dt { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
 .stat dd { margin: 0; color: var(--foreground); font-size: var(--text-base); font-variant-numeric: tabular-nums; font-weight: 500; line-height: var(--leading-body); }
-.meta { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
+.meta { display: flex; align-items: center; gap: var(--space-related); color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
 .meta svg { flex: none; }
 @media (prefers-reduced-motion: reduce) { .avatar img { transition: none; } .avatar img[data-loading] { filter: none; } }

package/components/image-compare/image-compare.module.css

@@ -6,20 +6,20 @@
 .layer { position: absolute; inset: 0; }
 .layer :where(img, picture, video) { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
 /* Captions sit on a frosted chip so they read over any photo, below the divider. */
-.chip { position: absolute; z-index: 1; top: var(--space-group); left: var(--space-group); padding: 3px 10px; border-radius: var(--radius-full); corner-shape: round; background: color-mix(in oklab, var(--background) 74%, transparent); color: var(--foreground); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); letter-spacing: var(--tracking-body); pointer-events: none; -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
+.chip { position: absolute; z-index: 1; top: var(--space-group); left: var(--space-group); padding: var(--space-tight) var(--space-group); border-radius: var(--radius-full); corner-shape: round; background: color-mix(in oklab, var(--background) 74%, transparent); color: var(--foreground); font-size: var(--text-xs); font-weight: 500; line-height: var(--leading-body); letter-spacing: var(--tracking-body); pointer-events: none; -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); }
 .chip[data-place="end"] { right: var(--space-group); left: auto; }
 .chip[data-place="bottom"] { top: auto; bottom: var(--space-group); }
 /* The pivot is a frame-sized layer moved by a percentage of itself; its top-left corner is the divider's center. */
 .pivot { position: absolute; z-index: 2; inset: 0; pointer-events: none; }
 .rotor { position: absolute; top: 0; left: 0; width: 0; height: 0; }
-.line { position: absolute; top: calc((100cqw + 100cqh) * -1); left: -1px; width: 2px; height: calc((100cqw + 100cqh) * 2); background: var(--surface-raised); box-shadow: 0 0 0 .5px oklch(0% 0 0 / .14); }
+.line { position: absolute; top: calc((100cqw + 100cqh) * -1); left: -1px; width: 2px; height: calc((100cqw + 100cqh) * 2); background: var(--surface-raised); box-shadow: var(--shadow-hairline); }
 /* The line sits on photography, not on the theme, so it stays light in dark mode too. */
 :global(:root[data-theme="dark"]) .line { background: var(--foreground); }
 .handleSlot { position: absolute; top: 0; left: 0; }
 /* Centered with the translate property; Motion only animates its width and height, so the shape morphs without scaling the icons. */
 .handle { position: absolute; top: 0; left: 0; display: grid; box-sizing: border-box; width: 40px; height: 40px; place-items: center; translate: -50% -50%; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-raised); box-shadow: var(--shadow-raised); color: var(--foreground); pointer-events: auto; outline: 0 solid transparent; transition: border-color var(--duration-fast) var(--ease-standard); }
-.handle::after { content: ""; position: absolute; inset: -8px; border-radius: inherit; corner-shape: inherit; }
+.handle::after { content: ""; position: absolute; inset: calc(var(--space-related) * -1); border-radius: inherit; corner-shape: inherit; }
 @media (hover: hover) and (pointer: fine) { .root:hover .handle { border-color: var(--border-strong); } }
 .chevrons { display: flex; align-items: center; }
-.chevron { display: grid; margin-inline: -2.5px; place-items: center; }
+.chevron { display: grid; margin-inline: calc(var(--space-hair) * -1); place-items: center; }
 @media (prefers-reduced-motion: reduce) { .handle { transition: none; } }