@teamofsilicons/silicon-ui 0.2.0 → 0.4.0

package/components/inline-edit/inline-edit.module.css

@@ -4,9 +4,9 @@
 .root[data-variant="title"] { --size: var(--text-xl); --leading: round(var(--size) * 1.3, 2px); --weight: 500; --ink: var(--foreground); }
 .root[data-variant="body"] { --pad-y: 5px; --size: var(--text-sm); --leading: round(var(--size) * 1.5, 1px); --weight: 400; --ink: var(--text-secondary); }
 /* Room for the actions is reserved in every state, so the text never rewraps when editing starts. */
-/* Inter at every size here: a heading host keeps its semantics but not the display face. */
-.line { display: block; min-width: 0; margin: 0; padding-inline-end: 66px; color: var(--ink); font-family: var(--font-body); font-size: var(--size); font-weight: var(--weight); line-height: var(--leading); letter-spacing: var(--tracking-body); }
-.root[data-multiline] .line { padding-inline-end: 38px; }
+/* The body face at every size here: a heading host keeps its semantics but not the display face. */
+.line { display: block; min-width: 0; margin: 0; padding-inline-end: var(--space-stage); color: var(--ink); font-family: var(--font-body); font-size: var(--size); font-weight: var(--weight); line-height: var(--leading); letter-spacing: var(--tracking-body); }
+.root[data-multiline] .line { padding-inline-end: var(--space-block); }
 .box { position: relative; display: inline-block; max-width: 100%; vertical-align: top; }
 .root[data-multiline] .box { display: block; }
 
@@ -16,7 +16,7 @@
 .root[data-multiline] .display { width: 100%; }
 .root[data-editing] .display { visibility: hidden; }
 /* While editing, a single line keeps a little extra room, so the next character never has to wait for the box. */
-.root[data-editing]:not([data-multiline]) .display { min-width: 5em; padding-inline-end: calc(var(--pad-x) + 16px); }
+.root[data-editing]:not([data-multiline]) .display { min-width: 5em; padding-inline-end: calc(var(--pad-x) + var(--space-inset)); }
 .display[aria-disabled="true"] { cursor: progress; }
 .layer { position: relative; display: block; transition: opacity var(--duration-standard) var(--ease-standard); }
 .layer[data-empty] { color: var(--text-muted); }
@@ -45,28 +45,28 @@ textarea.control { white-space: pre-wrap; overflow-wrap: break-word; }
 .root[data-flash="off"] .frame { transition-duration: var(--duration-considered); }
 
 /* The slot rides on the frame's edge, so it follows the width morph instead of jumping to the new width. */
-.slot { position: absolute; top: 50%; left: calc(100% + 6px); display: grid; min-height: 28px; margin-top: -14px; pointer-events: auto; }
-.root[data-multiline] .slot { top: 0; left: calc(100% + 8px); margin-top: calc(var(--pad-y) + var(--leading) / 2 - 13px); }
+.slot { position: absolute; top: 50%; left: calc(100% + var(--space-related)); display: grid; min-height: 28px; margin-top: calc(var(--space-inset) * -1); pointer-events: auto; }
+.root[data-multiline] .slot { top: 0; left: calc(100% + var(--space-related)); margin-top: calc(var(--pad-y) + var(--leading) / 2 - var(--space-group)); }
 .slotItem { display: grid; grid-area: 1 / 1; min-height: 28px; place-items: center start; }
-.actions { display: flex; gap: 4px; }
+.actions { display: flex; gap: var(--space-tight); }
 .root[data-multiline] .actions { flex-direction: column; }
 .save, .cancel { display: grid; width: 28px; height: 28px; flex: none; place-items: center; padding: 0; border: 1px solid transparent; border-radius: var(--radius-full); corner-shape: round; cursor: pointer; -webkit-tap-highlight-color: transparent; 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-instant) var(--ease-standard); }
 .save { background: var(--foreground); color: var(--background); }
 .cancel { border-color: var(--border); background: var(--surface); color: var(--text-secondary); }
 .save:active, .cancel:active { transform: scale(.96); }
 @media (hover: hover) and (pointer: fine) { .save:hover { background: color-mix(in oklab, var(--foreground) 86%, var(--background)); } .cancel:hover { border-color: var(--border-strong); background: var(--surface-muted); color: var(--foreground); } }
-.pencil { margin-left: 2px; color: var(--text-muted); cursor: pointer; }
-.spinner { display: block; width: 14px; height: 14px; margin-left: 2px; border: 1.5px solid var(--text-muted); border-right-color: transparent; border-radius: var(--radius-full); corner-shape: round; animation: spin .7s linear infinite; }
+.pencil { margin-left: var(--space-hair); color: var(--text-muted); cursor: pointer; }
+.spinner { display: block; width: 14px; height: 14px; margin-left: var(--space-hair); border: 1.5px solid var(--text-muted); border-right-color: transparent; border-radius: var(--radius-full); corner-shape: round; animation: spin .7s linear infinite; }
 .saved { display: grid; margin-left: 1px; place-items: center; color: var(--success); }
 .failedIcon { margin-left: 1px; color: var(--danger); }
 
 /* The message row opens from a true zero; its spacing lives inside the clipped slot. */
 .reveal { display: block; overflow: hidden; }
 .revealInner { position: relative; display: block; }
-.message { display: flex; align-items: flex-start; gap: 6px; padding: 6px var(--pad-x) 4px calc(var(--pad-x) + 1px); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 400; line-height: var(--leading-body); }
+.message { display: flex; align-items: flex-start; gap: var(--space-related); padding: var(--space-related) var(--pad-x) var(--space-tight) calc(var(--pad-x) + 1px); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 400; line-height: var(--leading-body); }
 .message[data-tone="error"] { color: var(--danger); }
-.messageIcon { flex: none; margin-top: 2px; color: var(--danger); }
-.retry { margin: 0 0 0 2px; padding: 0; border: 0; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: none; color: var(--foreground); font: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; cursor: pointer; }
+.messageIcon { flex: none; margin-top: var(--space-hair); color: var(--danger); }
+.retry { margin: 0 0 0 var(--space-hair); padding: 0; border: 0; border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: none; color: var(--foreground); font: inherit; font-weight: 500; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; cursor: pointer; }
 @media (hover: hover) and (pointer: fine) { .retry:hover { text-decoration-color: currentColor; } }
 .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 @keyframes spin { to { transform: rotate(360deg); } }

package/components/json-viewer/json-viewer.module.css

@@ -1,16 +1,16 @@
 .root { --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; --indent: 16px; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-container); background: var(--surface); color: var(--foreground); font-family: var(--font-body); letter-spacing: var(--tracking-body); }
 
 /* Toolbar: search with a match counter, then expand and collapse all. */
-.toolbar { display: flex; align-items: center; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border-subtle); }
-.search { position: relative; display: flex; min-width: 0; flex: 1; align-items: center; gap: 4px; min-height: 34px; padding: 0 4px 0 10px; border-radius: var(--radius-control); background: var(--surface-muted); cursor: text; }
+.toolbar { display: flex; align-items: center; gap: var(--space-hair); padding: var(--space-related); border-bottom: 1px solid var(--border-subtle); }
+.search { position: relative; display: flex; min-width: 0; flex: 1; align-items: center; gap: var(--space-tight); min-height: 34px; padding: 0 var(--space-tight) 0 var(--space-group); border-radius: var(--radius-control); background: var(--surface-muted); cursor: text; }
 .searchIcon { flex: none; color: var(--text-muted); }
-.input { min-width: 0; flex: 1; height: 34px; padding: 0 4px; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); outline: none; }
+.input { min-width: 0; flex: 1; height: 34px; padding: 0 var(--space-tight); border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); outline: none; }
 .input::placeholder { color: var(--text-muted); }
 .input::-webkit-search-cancel-button { display: none; }
 .matches { display: inline-flex; flex: none; align-items: center; gap: 0; }
-.count { min-width: 3.5ch; padding-inline: 4px; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; text-align: right; }
+.count { min-width: 3.5ch; padding-inline: var(--space-tight); color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; text-align: right; }
 .grow { flex: 1; }
-.divider { width: 1px; height: 18px; margin-inline: 4px; background: var(--border-subtle); }
+.divider { width: 1px; height: 18px; margin-inline: var(--space-tight); background: var(--border-subtle); }
 .tool { display: inline-grid; width: 34px; height: 34px; flex: none; place-items: center; padding: 0; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard); }
 .tool:disabled { cursor: default; opacity: .4; }
 .tool:active:not(:disabled) { background: var(--surface-muted); color: var(--foreground); }
@@ -18,10 +18,10 @@
 .search .tool:active:not(:disabled) { background: var(--surface); }
 
 /* Tree. Rows are one fixed height, so scrolling can aim at where a row will settle. */
-.tree { position: relative; max-height: var(--json-max-height, 420px); padding: 6px; overflow: auto; overflow-anchor: none; overscroll-behavior: contain; font-family: var(--mono); font-size: 13px; font-variant-ligatures: none; letter-spacing: 0; scrollbar-width: thin; }
+.tree { position: relative; max-height: var(--json-max-height, 420px); padding: var(--space-related); overflow: auto; overflow-anchor: none; overscroll-behavior: contain; font-family: var(--mono); font-size: var(--text-sm); font-variant-ligatures: none; letter-spacing: 0; scrollbar-width: thin; }
 .row { position: relative; border-radius: var(--radius-detail); cursor: default; outline: none; -webkit-tap-highlight-color: transparent; }
 .highlight { position: absolute; inset: 1px 0; border-radius: var(--radius-detail); background: var(--surface-muted); }
-.line { position: relative; display: flex; height: 30px; min-width: 0; align-items: center; gap: 6px; padding-right: 6px; padding-left: calc(4px + var(--level, 0) * var(--indent)); white-space: nowrap; }
+.line { position: relative; display: flex; height: 30px; min-width: 0; align-items: center; gap: var(--space-related); padding-right: var(--space-related); padding-left: calc(var(--space-tight) + var(--level, 0) * var(--indent)); white-space: nowrap; }
 .row[data-kind="node"] .line { cursor: pointer; }
 
 .chevron { display: inline-grid; width: 14px; height: 14px; flex: none; place-items: center; color: var(--text-muted); transition: transform var(--duration-spring) var(--ease-spring), color var(--duration-fast) var(--ease-standard); }
@@ -30,8 +30,8 @@
 
 .key { flex: none; max-width: 45%; overflow: hidden; color: var(--foreground); text-overflow: ellipsis; }
 .index { flex: none; color: var(--text-muted); font-variant-numeric: tabular-nums; }
-.colon { flex: none; margin-left: -5px; color: var(--text-muted); }
-.summary { display: inline-flex; min-width: 0; align-items: baseline; gap: 8px; overflow: hidden; }
+.colon { flex: none; margin-left: calc(var(--space-tight) * -1); color: var(--text-muted); }
+.summary { display: inline-flex; min-width: 0; align-items: baseline; gap: var(--space-related); overflow: hidden; }
 .preview { min-width: 0; overflow: hidden; color: var(--text-muted); text-overflow: ellipsis; }
 .countLabel { flex: none; color: var(--text-muted); font-family: var(--font-body); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 
@@ -45,14 +45,14 @@
 .mark { border-radius: var(--radius-detail); background: color-mix(in oklab, var(--warning) 22%, transparent); color: inherit; box-shadow: 0 0 0 1px color-mix(in oklab, var(--warning) 22%, transparent); transition: background-color var(--duration-fast) var(--ease-standard); }
 .mark[data-current] { background: color-mix(in oklab, var(--warning) 48%, transparent); }
 
-.more { display: inline-flex; align-items: baseline; gap: 10px; padding-left: 20px; font-family: var(--font-body); font-size: var(--text-sm); }
+.more { display: inline-flex; align-items: baseline; gap: var(--space-group); padding-left: var(--space-comfort); font-family: var(--font-body); font-size: var(--text-sm); }
 .moreLabel { color: var(--foreground); font-weight: 500; }
 .row[data-kind="more"] { cursor: pointer; }
 .muted { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 
 /* Copy actions appear at the row's end over a soft fade, on hover or on the current row. */
 /* Inset like the highlight, with its right corners, so the fade never shows a square edge past the row's rounded end. */
-.actions { position: absolute; top: 1px; right: 0; bottom: 1px; display: flex; align-items: center; gap: 0; padding-right: 1px; padding-left: 24px; border-radius: 0 var(--radius-detail) var(--radius-detail) 0; background: linear-gradient(to right, transparent, var(--surface) 22px); opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-standard); }
+.actions { position: absolute; top: 1px; right: 0; bottom: 1px; display: flex; align-items: center; gap: 0; padding-right: 1px; padding-left: var(--space-section); border-radius: 0 var(--radius-detail) var(--radius-detail) 0; background: linear-gradient(to right, transparent, var(--surface) 22px); opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-standard); }
 .row[data-active] .actions { background: linear-gradient(to right, transparent, var(--surface-muted) 22px); }
 .action { position: relative; display: inline-grid; width: 26px; height: 26px; place-items: center; padding: 0; border: 0; border-radius: var(--radius-detail); background: transparent; color: var(--text-secondary); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
 .action[data-state="done"] { color: var(--success); }
@@ -62,7 +62,7 @@
 .row[data-active] .actions, .row:focus-within .actions { opacity: 1; pointer-events: auto; }
 
 /* The current path, always readable in full through its copy action. */
-.pathBar { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; border-top: 1px solid var(--border-subtle); }
+.pathBar { display: flex; min-width: 0; align-items: center; gap: var(--space-group); padding: var(--space-related) var(--space-related) var(--space-related) var(--space-inset); border-top: 1px solid var(--border-subtle); }
 .path { min-width: 0; flex: 1; overflow: hidden; color: var(--text-secondary); font-family: var(--mono); font-size: var(--text-xs); letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; }
 .pathType { flex: none; color: var(--text-muted); font-size: var(--text-xs); }
 .pathCopy { width: 30px; height: 30px; border-radius: var(--radius-detail); }

package/components/line-chart/line-chart.js

@@ -10,7 +10,7 @@ const physical = ({ visualDuration, bounce }, restDelta = .001) => { const root
 const settle = physical(spring.smooth);
 const glide = physical(spring.snappy, .0001);
 const follow = { stiffness: glide.stiffness, damping: glide.damping, restDelta: .01 };
-const draw = { duration: duration.considered * 1.75, ease: [...ease.inOut] };
+const draw = { duration: duration.expressive * 1.75, ease: [...ease.inOut] };
 const fadeFast = { duration: duration.instant, ease: [...ease.standard] };
 /** Room above the top gridline, and the gap between the crosshair and its tooltip. */
 const TOP = 12, GAP = 14;

package/components/line-chart/line-chart.module.css

@@ -1,8 +1,8 @@
 .figure { display: grid; min-width: 0; gap: var(--space-inset); margin: 0; color: var(--foreground); font-family: var(--font-body); letter-spacing: var(--tracking-body); }
 
 /* Series toggles: a plain line swatch beside each name. A hidden series keeps its place, its swatch empties and its name steps back. */
-.legend { display: flex; flex-wrap: wrap; gap: 2px 4px; min-width: 0; margin-inline: -8px; }
-.toggle { display: inline-flex; min-height: 32px; align-items: center; gap: 8px; padding: 0 10px 0 8px; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: var(--text-sm); line-height: var(--leading-body); -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
+.legend { display: flex; flex-wrap: wrap; gap: var(--space-hair) var(--space-tight); min-width: 0; margin-inline: calc(var(--space-related) * -1); }
+.toggle { display: inline-flex; min-height: 32px; align-items: center; gap: var(--space-related); padding: 0 var(--space-group) 0 var(--space-related); border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: var(--text-sm); line-height: var(--leading-body); -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
 .toggle:active { transform: scale(.97); }
 .toggle[aria-pressed="false"] { color: var(--text-muted); }
 .toggleLabel { white-space: nowrap; transition: opacity var(--duration-fast) var(--ease-standard); }
@@ -31,25 +31,25 @@
 .chart[data-scrubbing] .dot:not([data-hidden]) { opacity: 1; }
 
 /* The tooltip floats over the plot, so it is the one layer here with a shadow. Springs carry its position; opacity and a small scale bring it in. */
-.tooltip { position: absolute; top: 0; left: 0; z-index: 1; display: grid; min-width: 140px; max-width: min(220px, 100%); gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface-raised); box-shadow: var(--shadow-floating); opacity: 0; pointer-events: none; scale: .96; transition: opacity var(--duration-fast) var(--ease-standard), scale var(--duration-fast) var(--ease-standard); }
+.tooltip { position: absolute; top: 0; left: 0; z-index: 1; display: grid; min-width: 140px; max-width: min(220px, 100%); gap: var(--space-tight); padding: var(--space-group) var(--space-group); border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface-raised); box-shadow: var(--shadow-floating); opacity: 0; pointer-events: none; scale: .96; transition: opacity var(--duration-fast) var(--ease-standard), scale var(--duration-fast) var(--ease-standard); }
 .chart[data-scrubbing] .tooltip { opacity: 1; scale: 1; }
-.tipTitle { margin: 0 0 2px; color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
-.tipRow { display: flex; min-width: 0; align-items: center; gap: 8px; margin: 0; font-size: var(--text-sm); line-height: var(--leading-body); }
+.tipTitle { margin: 0 0 var(--space-hair); color: var(--text-secondary); font-size: var(--text-xs); line-height: var(--leading-body); white-space: nowrap; font-variant-numeric: tabular-nums; }
+.tipRow { display: flex; min-width: 0; align-items: center; gap: var(--space-related); margin: 0; font-size: var(--text-sm); line-height: var(--leading-body); }
 .tipSwatch { width: 10px; height: 2.5px; flex: none; border-radius: var(--radius-full); corner-shape: round; background: var(--series); }
 .tipSwatch[data-dashed] { background: repeating-linear-gradient(to right, var(--series) 0 3px, transparent 3px 5px); }
 .tipName { min-width: 0; flex: 1; overflow: hidden; color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; }
-.tipValue { flex: none; margin-left: 8px; color: var(--foreground); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.tipValue { flex: none; margin-left: var(--space-related); color: var(--foreground); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
 
 .message { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--text-muted); font-size: var(--text-sm); pointer-events: none; }
 /* First load with nothing to keep on screen: a calm band that breathes where the lines will be. */
 .skeleton { position: absolute; inset: 30% 0 25%; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: linear-gradient(to bottom, transparent, color-mix(in oklab, var(--foreground) 5%, transparent)); animation: breathe 1.4s var(--ease-in-out) infinite alternate; }
 
 .gutter { position: relative; grid-area: 1 / 2; min-width: 0; }
-.tick { position: absolute; top: 0; left: 10px; display: block; height: 0; white-space: nowrap; pointer-events: none; }
+.tick { position: absolute; top: 0; left: var(--space-group); display: block; height: 0; white-space: nowrap; pointer-events: none; }
 .tickText { display: block; transform: translateY(-50%); color: var(--text-muted); font-size: var(--text-xs); line-height: 1; font-variant-numeric: tabular-nums; }
 
 .axis { position: relative; grid-area: 2 / 1; min-width: 0; }
-.axisLabel { position: absolute; top: 8px; color: var(--text-muted); font-size: var(--text-xs); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.axisLabel { position: absolute; top: var(--space-related); color: var(--text-muted); font-size: var(--text-xs); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
 
 .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 

package/components/mention-input/mention-input.js

@@ -4,6 +4,7 @@ import { forwardRef, useCallback, useId, useImperativeHandle, useLayoutEffect, u
 import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
 import { Hash } from "lucide-react";
 import { motionTokens } from "../../lib/motion-tokens.js";
+import { useNearestItem } from "../../lib/fluid-hover.js";
 import styles from "./mention-input.module.css";
 const EMPTY = { text: "", mentions: [] };
 const SYMBOL = { person: "@", channel: "#" };
@@ -111,6 +112,8 @@ export const MentionInput = forwardRef(function MentionInput({ value: valueProp,
     const [focused, setFocused] = useState(false);
     const [dismissed, setDismissed] = useState(null);
     const [active, setActive] = useState(0);
+    // Fluid hover: the mouse makes the nearest option active, gaps and padding included, and a click there picks it.
+    const nearest = useNearestItem({ items: '[role="option"]', onPick: item => setActive(Number(item.dataset.index)) });
     const commit = useCallback((next) => {
         if (valueProp === undefined)
             setInner(next);
@@ -404,8 +407,7 @@ export const MentionInput = forwardRef(function MentionInput({ value: valueProp,
     const optionId = (index) => `${uid}-option-${index}`;
     const popIn = reduced ? { opacity: 0 } : { opacity: 0, scale: .96, y: anchor?.above ? 4 : -4 };
     const countLabel = open ? (suggestions.length ? `${suggestions.length} ${trigger?.kind === "person" ? (suggestions.length === 1 ? "person" : "people") : (suggestions.length === 1 ? "channel" : "channels")}` : "No matches") : "";
-    return _jsxs("div", { ref: rootRef, className: [styles.root, className].filter(Boolean).join(" "), "data-disabled": disabled || undefined, children: [_jsxs(motion.div, { ref: fieldRef, className: styles.field, style: { height }, "data-focused": focused || undefined, children: [_jsxs("div", { ref: backdropRef, className: styles.backdrop, "aria-hidden": "true", children: [mirror, "\u200b"] }), _jsx("textarea", { ref: areaRef, id: id, name: name, className: styles.textarea, value: value.text, placeholder: placeholder, disabled: disabled, rows: minRows, spellCheck: true, role: "combobox", "aria-label": ariaLabel, "aria-describedby": describedBy, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listId : undefined, "aria-activedescendant": open && suggestions.length ? optionId(activeIndex) : undefined, onChange: onInput, onSelect: onSelect, onKeyDown: onKeyDown, onScroll: onScroll, onFocus: () => setFocused(true), onBlur: () => { setFocused(false); setCaret(null); } })] }), _jsx("span", { className: styles.srOnly, "aria-live": "polite", children: countLabel }), _jsx(AnimatePresence, { children: open && anchor && _jsx(motion.div, { className: styles.popover, "data-above": anchor.above || undefined, style: { left: anchor.x, top: anchor.y, height: panelHeight, transformOrigin: anchor.above ? "14px 100%" : "14px 0" }, initial: popIn, animate: { opacity: 1, scale: 1, y: 0, transition: reduced ? { duration: duration.fast } : { ...spring.snappy, opacity: { duration: duration.fast, ease: enter } } }, exit: { ...popIn, transition: { duration: duration.exit * .7, ease: standard } }, onMouseDown: event => event.preventDefault(), children: _jsx("div", { ref: bodyRef, className: styles.popoverBody, children: suggestions.length ? _jsxs("ul", { ref: listRef, id: listId, role: "listbox", "aria-label": trigger?.kind === "person" ? "People" : "Channels", className: styles.list, children: [_jsx(motion.li, { "aria-hidden": "true", className: styles.highlight, style: { y: hy, height: hh } }), suggestions.map((suggestion, index) => _jsxs("li", { id: optionId(index), role: "option", "aria-selected": index === activeIndex, "data-index": index, className: styles.option, onPointerMove: () => { if (index !== activeIndex)
-                                        setActive(index); }, onClick: () => choose(suggestion), children: [suggestion.kind === "person"
+    return _jsxs("div", { ref: rootRef, className: [styles.root, className].filter(Boolean).join(" "), "data-disabled": disabled || undefined, children: [_jsxs(motion.div, { ref: fieldRef, className: styles.field, style: { height }, "data-focused": focused || undefined, children: [_jsxs("div", { ref: backdropRef, className: styles.backdrop, "aria-hidden": "true", children: [mirror, "\u200b"] }), _jsx("textarea", { ref: areaRef, id: id, name: name, className: styles.textarea, value: value.text, placeholder: placeholder, disabled: disabled, rows: minRows, spellCheck: true, role: "combobox", "aria-label": ariaLabel, "aria-describedby": describedBy, "aria-autocomplete": "list", "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listId : undefined, "aria-activedescendant": open && suggestions.length ? optionId(activeIndex) : undefined, onChange: onInput, onSelect: onSelect, onKeyDown: onKeyDown, onScroll: onScroll, onFocus: () => setFocused(true), onBlur: () => { setFocused(false); setCaret(null); } })] }), _jsx("span", { className: styles.srOnly, "aria-live": "polite", children: countLabel }), _jsx(AnimatePresence, { children: open && anchor && _jsx(motion.div, { className: styles.popover, "data-above": anchor.above || undefined, style: { left: anchor.x, top: anchor.y, height: panelHeight, transformOrigin: anchor.above ? "14px 100%" : "14px 0" }, initial: popIn, animate: { opacity: 1, scale: 1, y: 0, transition: reduced ? { duration: duration.fast } : { ...spring.snappy, opacity: { duration: duration.fast, ease: enter } } }, exit: { ...popIn, transition: { duration: duration.exit * .7, ease: standard } }, onMouseDown: event => event.preventDefault(), ...nearest, children: _jsx("div", { ref: bodyRef, className: styles.popoverBody, children: suggestions.length ? _jsxs("ul", { ref: listRef, id: listId, role: "listbox", "aria-label": trigger?.kind === "person" ? "People" : "Channels", className: styles.list, children: [_jsx(motion.li, { "aria-hidden": "true", className: styles.highlight, style: { y: hy, height: hh } }), suggestions.map((suggestion, index) => _jsxs("li", { id: optionId(index), role: "option", "aria-selected": index === activeIndex, "data-index": index, className: styles.option, onClick: () => choose(suggestion), children: [suggestion.kind === "person"
                                             ? _jsx("span", { className: styles.avatar, "aria-hidden": "true", children: suggestion.item.avatar
                                                     // eslint-disable-next-line @next/next/no-img-element -- registry components stay framework agnostic
                                                     ? _jsx("img", { src: suggestion.item.avatar, alt: "", width: 28, height: 28, loading: "lazy" })

package/components/mention-input/mention-input.module.css

@@ -24,7 +24,7 @@
   box-sizing: border-box;
   width: 100%;
   margin: 0;
-  padding: 11px 14px;
+  padding: var(--space-group) var(--space-inset);
   border: 0;
   font: inherit;
   font-size: var(--text-base);
@@ -66,8 +66,8 @@
 
 /* A token is tinted around its own glyphs; the negative margin keeps every character where the textarea put it. */
 .token {
-  margin: 0 -3px;
-  padding: 1px 3px;
+  margin: 0 calc(var(--space-tight) * -1);
+  padding: 1px var(--space-tight);
   border-radius: var(--radius-detail); corner-shape: var(--corner-shape);
   background: var(--accent-subtle);
   color: var(--accent-strong);
@@ -78,7 +78,7 @@
 
 .popover {
   position: absolute;
-  z-index: 30;
+  z-index: var(--layer-dropdown);
   width: 272px;
   max-width: 100%;
   overflow: hidden;
@@ -88,7 +88,7 @@
   box-shadow: var(--shadow-floating);
 }
 .popover[data-above] { translate: 0 -100%; }
-.popoverBody { padding: 6px; }
+.popoverBody { padding: var(--space-related); }
 
 .list { position: relative; display: grid; margin: 0; padding: 0; list-style: none; }
 .highlight { position: absolute; top: 0; right: 0; left: 0; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6.5%, transparent); pointer-events: none; }
@@ -98,8 +98,8 @@
   display: flex;
   min-width: 0;
   align-items: center;
-  gap: 10px;
-  padding: 7px 10px 7px 8px;
+  gap: var(--space-group);
+  padding: var(--space-related) var(--space-group) var(--space-related) var(--space-related);
   border-radius: var(--radius-control); corner-shape: var(--corner-shape);
   cursor: pointer;
   font-size: var(--text-sm);
@@ -129,6 +129,6 @@
 .optionMeta { overflow: hidden; color: var(--text-muted); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
 .count { flex: none; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 
-.empty { margin: 0; padding: 10px 10px; color: var(--text-secondary); font-size: var(--text-sm); }
+.empty { margin: 0; padding: var(--space-group) var(--space-group); color: var(--text-secondary); font-size: var(--text-sm); }
 
 .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

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

@@ -1,7 +1,7 @@
 .card { min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-overlay); corner-shape: var(--corner-shape); padding: var(--space-section); background: var(--surface); box-shadow: var(--shadow-resting); }
 .top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-group); margin-bottom: var(--space-block); }
 .top span { color: var(--text-secondary); font-size: var(--text-sm); }
-.top small { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; padding: 3px 8px; color: var(--text-secondary); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
+.top small { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; padding: var(--space-tight) var(--space-related); color: var(--text-secondary); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
 .card p { margin: var(--space-inset) 0 0; color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-body); }
 @media (max-width: 380px) { .card { padding: var(--space-inset); } .top { align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--space-section); } }
 /* Text swaps: the outgoing copy is popped out of flow so the wrapper never holds both widths. */

package/components/money-input/money-input.js

@@ -4,6 +4,7 @@ import { forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayo
 import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
 import { Check, ChevronDown } from "lucide-react";
 import { motionTokens } from "../../lib/motion-tokens.js";
+import { useNearestItem } from "../../lib/fluid-hover.js";
 import styles from "./money-input.module.css";
 const enterEase = [...motionTokens.ease.enter];
 const standardEase = [...motionTokens.ease.standard];
@@ -374,6 +375,9 @@ export const MoneyInput = forwardRef(function MoneyInput({ label, hideLabel = fa
     /* ---------------------------------------------- Currency menu ---------------------------------------------- */
     const [menuOpen, setMenuOpen] = useState(false);
     const [activeCode, setActiveCode] = useState(code);
+    // Fluid hover: the mouse makes the nearest option active, gaps and padding included, and a click there picks it.
+    const nearest = useNearestItem({ items: '[role="option"]', onPick: item => { if (item.dataset.code)
+            setActiveCode(item.dataset.code); } });
     const menuRef = useRef(null);
     const listRef = useRef(null);
     const menuButtonRef = useRef(null);
@@ -489,11 +493,10 @@ export const MoneyInput = forwardRef(function MoneyInput({ label, hideLabel = fa
                                                 setDraft(settle(draft, info.digits)); onBlur?.(event); } })] }), info.position === "suffix" && _jsx(SymbolSlot, { symbol: info.symbol, reduced: reduced })] }) }), canSwitch ? _jsxs("div", { ref: menuRef, className: styles.menuAnchor, children: [_jsxs("button", { ref: menuButtonRef, type: "button", className: styles.currencyButton, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": menuOpen, "aria-controls": `${uid}-currencies`, "aria-label": `Currency, ${info.name}`, "data-open": menuOpen || undefined, onClick: () => (menuOpen ? closeMenu(true) : openMenu()), onKeyDown: event => { if (event.key === "ArrowDown" || event.key === "ArrowUp") {
                                     event.preventDefault();
                                     openMenu();
-                                } }, children: [_jsx("span", { className: styles.code, children: code }), _jsx(motion.span, { className: styles.chevron, "aria-hidden": "true", initial: false, animate: { rotate: menuOpen ? 180 : 0 }, transition: reduced ? { duration: 0 } : GLIDE, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) })] }), _jsx(AnimatePresence, { children: menuOpen && _jsx(motion.div, { className: styles.menu, initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .96, y: -4, filter: `blur(${blur.subtle}px)` }, animate: { opacity: 1, scale: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: duration.instant } } : { opacity: 0, scale: .97, y: -2, filter: `blur(${blur.subtle}px)`, transition: { duration: duration.instant, ease: standardEase } }, transition: reduced ? { duration: duration.instant } : { ...spring.snappy, opacity: { duration: duration.fast, ease: enterEase }, filter: { duration: duration.fast, ease: enterEase } }, children: _jsxs("div", { ref: listRef, id: `${uid}-currencies`, className: styles.list, role: "listbox", tabIndex: -1, "aria-label": "Currency", "aria-activedescendant": `${uid}-cur-${activeCode}`, onKeyDown: onMenuKeyDown, children: [_jsx(motion.span, { className: styles.highlight, style: { y: hy, height: hh, opacity: ho }, "aria-hidden": "true" }), options.map(option => _jsxs("div", { id: `${uid}-cur-${option.code}`, role: "option", "aria-selected": option.code === code, className: styles.option, "data-active": option.code === activeCode || undefined, ref: node => { if (node)
+                                } }, children: [_jsx("span", { className: styles.code, children: code }), _jsx(motion.span, { className: styles.chevron, "aria-hidden": "true", initial: false, animate: { rotate: menuOpen ? 180 : 0 }, transition: reduced ? { duration: 0 } : GLIDE, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) })] }), _jsx(AnimatePresence, { children: menuOpen && _jsx(motion.div, { className: styles.menu, initial: reduced ? { opacity: 0 } : { opacity: 0, scale: .96, y: -4, filter: `blur(${blur.subtle}px)` }, animate: { opacity: 1, scale: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: duration.instant } } : { opacity: 0, scale: .97, y: -2, filter: `blur(${blur.subtle}px)`, transition: { duration: duration.instant, ease: standardEase } }, transition: reduced ? { duration: duration.instant } : { ...spring.snappy, opacity: { duration: duration.fast, ease: enterEase }, filter: { duration: duration.fast, ease: enterEase } }, children: _jsxs("div", { ref: listRef, id: `${uid}-currencies`, className: styles.list, role: "listbox", tabIndex: -1, "aria-label": "Currency", "aria-activedescendant": `${uid}-cur-${activeCode}`, onKeyDown: onMenuKeyDown, onPointerDown: event => event.preventDefault(), ...nearest, children: [_jsx(motion.span, { className: styles.highlight, style: { y: hy, height: hh, opacity: ho }, "aria-hidden": "true" }), options.map(option => _jsxs("div", { id: `${uid}-cur-${option.code}`, role: "option", "aria-selected": option.code === code, className: styles.option, "data-active": option.code === activeCode || undefined, ref: node => { if (node)
                                                     optionRefs.current.set(option.code, node);
                                                 else
-                                                    optionRefs.current.delete(option.code); }, onPointerMove: event => { if (event.pointerType === "mouse" && option.code !== activeCode)
-                                                    setActiveCode(option.code); }, onPointerDown: event => event.preventDefault(), onClick: () => chooseCurrency(option), children: [_jsx("span", { className: styles.optionSymbol, "aria-hidden": "true", children: option.symbol }), _jsx("span", { className: styles.optionCode, children: option.code }), _jsx("span", { className: styles.optionName, children: option.name }), _jsx("span", { className: styles.check, "data-on": option.code === code || undefined, "aria-hidden": "true", children: _jsx(Check, { size: 16, strokeWidth: 1.75 }) })] }, option.code))] }) }, "menu") })] }) : _jsx("span", { className: styles.codeStatic, children: code })] }), (chips.length > 0 || range) && _jsxs("div", { className: styles.toolbar, children: [chips.length > 0 && _jsx("div", { className: styles.chips, role: "group", "aria-label": "Quick add", children: chips.map(amount => {
+                                                    optionRefs.current.delete(option.code); }, "data-code": option.code, onPointerDown: event => event.preventDefault(), onClick: () => chooseCurrency(option), children: [_jsx("span", { className: styles.optionSymbol, "aria-hidden": "true", children: option.symbol }), _jsx("span", { className: styles.optionCode, children: option.code }), _jsx("span", { className: styles.optionName, children: option.name }), _jsx("span", { className: styles.check, "data-on": option.code === code || undefined, "aria-hidden": "true", children: _jsx(Check, { size: 16, strokeWidth: 1.75 }) })] }, option.code))] }) }, "menu") })] }) : _jsx("span", { className: styles.codeStatic, children: code })] }), (chips.length > 0 || range) && _jsxs("div", { className: styles.toolbar, children: [chips.length > 0 && _jsx("div", { className: styles.chips, role: "group", "aria-label": "Quick add", children: chips.map(amount => {
                             const add = amount * pow10(info.digits);
                             const atMax = max !== undefined && (minor ?? 0) >= max;
                             return _jsxs("button", { type: "button", className: styles.chip, disabled: disabled, "aria-disabled": atMax || undefined, "aria-controls": inputId, "aria-label": `Add ${info.whole.format(amount)}`, onClick: () => nudge(add, "chip"), children: ["+", info.whole.format(amount)] }, amount);

package/components/money-input/money-input.module.css

@@ -3,7 +3,7 @@
 .label { justify-self: start; margin-bottom: var(--space-related); color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
 
 /* One tall shell: the amount on the left, the currency on the right. Set --money-input-height to resize it. */
-.control { position: relative; display: flex; min-width: 0; height: var(--money-input-height, 76px); box-sizing: border-box; align-items: center; gap: var(--space-related); padding: 0 8px 0 18px; border: 1px solid var(--border-strong); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-standard); }
+.control { position: relative; display: flex; min-width: 0; height: var(--money-input-height, 76px); box-sizing: border-box; align-items: center; gap: var(--space-related); padding: 0 var(--space-related) 0 var(--space-comfort); border: 1px solid var(--border-strong); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-standard); }
 @media (hover: hover) and (pointer: fine) { .control:hover:not([data-invalid]) { border-color: var(--foreground); } }
 .control[data-focused] { border-color: var(--foreground); }
 .control[data-invalid] { border-color: var(--danger); }
@@ -35,19 +35,19 @@
 
 /* Currency switch: plain text on the shell, a quiet fill on hover and while open. It answers a press with color, since it anchors a menu. */
 .menuAnchor { position: relative; flex: none; }
-.currencyButton { display: inline-flex; height: 36px; align-items: center; gap: 4px; padding: 0 8px 0 12px; border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--foreground); cursor: pointer; font: inherit; font-size: var(--text-sm); font-weight: 500; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard); }
+.currencyButton { display: inline-flex; height: 36px; align-items: center; gap: var(--space-tight); padding: 0 var(--space-related) 0 var(--space-group); border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--foreground); cursor: pointer; font: inherit; font-size: var(--text-sm); font-weight: 500; -webkit-tap-highlight-color: transparent; transition: background-color var(--duration-fast) var(--ease-standard); }
 @media (hover: hover) and (pointer: fine) { .currencyButton:hover:not(:disabled) { background: var(--surface-muted); } }
 .currencyButton:active:not(:disabled), .currencyButton[data-open] { background: var(--surface-muted); }
 .currencyButton:disabled { cursor: not-allowed; }
 .code { font-variant-numeric: tabular-nums; }
-.codeStatic { flex: none; padding: 0 10px; color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; }
+.codeStatic { flex: none; padding: 0 var(--space-group); color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; }
 .chevron { display: grid; width: 16px; height: 16px; place-items: center; color: var(--text-muted); }
 
 /* The menu grows out of the currency button's corner and opens 8px below the shell, whatever its height. */
-.menu { --drop: calc((var(--money-input-height, 76px) - 36px) / 2 + var(--space-related)); position: absolute; z-index: 30; top: calc(100% + var(--drop)); right: -8px; width: min(256px, calc(100vw - 2rem)); box-sizing: border-box; padding: 6px; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); box-shadow: var(--shadow-floating); transform-origin: calc(100% - 44px) calc(var(--drop) * -1 - 18px); }
-.list { position: relative; display: grid; max-height: 288px; gap: 2px; overflow-y: auto; overscroll-behavior: contain; outline: none; scrollbar-width: thin; }
+.menu { --drop: calc((var(--money-input-height, 76px) - 36px) / 2 + var(--space-related)); position: absolute; z-index: var(--layer-dropdown); top: calc(100% + var(--drop)); right: calc(var(--space-related) * -1); width: min(256px, calc(100vw - 2rem)); box-sizing: border-box; padding: var(--space-related); border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--surface-raised); box-shadow: var(--shadow-floating); transform-origin: calc(100% - 44px) calc(var(--drop) * -1 - 18px); }
+.list { position: relative; display: grid; max-height: 288px; gap: var(--space-hair); overflow-y: auto; overscroll-behavior: contain; outline: none; scrollbar-width: thin; }
 .highlight { position: absolute; top: 0; right: 0; left: 0; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6.5%, transparent); pointer-events: none; }
-.option { position: relative; display: flex; min-height: 36px; box-sizing: border-box; align-items: center; gap: 10px; padding: 0 10px; border-radius: var(--radius-control); corner-shape: var(--corner-shape); color: var(--text-secondary); cursor: pointer; font-size: var(--text-sm); user-select: none; -webkit-user-select: none; transition: color var(--duration-fast) var(--ease-standard); }
+.option { position: relative; display: flex; min-height: 36px; box-sizing: border-box; align-items: center; gap: var(--space-group); padding: 0 var(--space-group); border-radius: var(--radius-control); corner-shape: var(--corner-shape); color: var(--text-secondary); cursor: pointer; font-size: var(--text-sm); user-select: none; -webkit-user-select: none; transition: color var(--duration-fast) var(--ease-standard); }
 .option[data-active], .option[aria-selected="true"] { color: var(--foreground); }
 .optionSymbol { width: 22px; flex: none; color: var(--text-muted); text-align: center; }
 .optionCode { flex: none; font-weight: 500; font-variant-numeric: tabular-nums; }
@@ -57,10 +57,10 @@
 
 /* Quick add chips and the allowed range share one row under the shell. */
 .toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-related) var(--space-group); padding-top: var(--space-group); }
-.chips { display: flex; flex-wrap: wrap; gap: 6px; }
-.chip { height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); color: var(--text-secondary); cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; touch-action: manipulation; 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); }
+.chips { display: flex; flex-wrap: wrap; gap: var(--space-related); }
+.chip { height: 30px; padding: 0 var(--space-group); border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); color: var(--text-secondary); cursor: pointer; font: inherit; font-size: var(--text-xs); font-weight: 500; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; touch-action: manipulation; 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); }
 @media (hover: hover) and (pointer: fine) { .chip:hover:not(:disabled) { background: var(--surface-muted); color: var(--foreground); } }
-.chip:active:not(:disabled) { transform: scale(.96); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), 100ms; }
+.chip:active:not(:disabled) { transform: scale(.96); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), var(--duration-fast); }
 .chip[aria-disabled="true"] { opacity: .45; }
 .chip:disabled { opacity: .45; cursor: not-allowed; }
 .range { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; transition: color var(--duration-standard) var(--ease-standard); }
@@ -73,5 +73,5 @@
 
 .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
 
-@media (max-width: 420px) { .control { padding-left: 14px; } .group { font-size: var(--text-2xl); } }
+@media (max-width: 420px) { .control { padding-left: var(--space-inset); } .group { font-size: var(--text-2xl); } }
 @media (prefers-reduced-motion: reduce) { .control, .column, .check, .chip, .range { transition-duration: 0ms; } .chip:active:not(:disabled) { transform: none; } }

package/components/morph-select/morph-select.js

@@ -4,6 +4,7 @@ import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useSta
 import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
 import { Check, ChevronDown, Search, X } from "lucide-react";
 import { motionTokens } from "../../lib/motion-tokens.js";
+import { useNearestItem } from "../../lib/fluid-hover.js";
 import styles from "./morph-select.module.css";
 const { blur } = motionTokens;
 const enter = [...motionTokens.ease.enter];
@@ -49,9 +50,9 @@ function matches(option, needle) {
 const valueVariants = {
     enter: (change) => change.fly ? { opacity: 1, x: change.fly.x, y: change.fly.y, filter: "blur(0px)" } : { opacity: 0, x: 0, y: `${change.dir * .5}em`, filter: `blur(${blur.soft}px)` },
     rest: { opacity: 1, x: 0, y: 0, filter: "blur(0px)" },
-    exit: (change) => ({ opacity: 0, x: 0, y: change.fly ? "-0.3em" : `${change.dir * -.45}em`, filter: `blur(${blur.subtle}px)`, transition: { duration: .12, ease: standard } }),
+    exit: (change) => ({ opacity: 0, x: 0, y: change.fly ? "-0.3em" : `${change.dir * -.45}em`, filter: `blur(${blur.subtle}px)`, transition: { duration: motionTokens.duration.instant, ease: standard } }),
 };
-const valueFade = { enter: { opacity: 0 }, rest: { opacity: 1, x: 0, y: 0, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: .1 } } };
+const valueFade = { enter: { opacity: 0 }, rest: { opacity: 1, x: 0, y: 0, filter: "blur(0px)" }, exit: { opacity: 0, transition: { duration: motionTokens.duration.instant } } };
 /** The closed trigger's width, rounded up. offsetWidth rounds to the nearest pixel, and half a pixel short is enough to ellipsize the label. */
 const triggerWidth = (node) => {
     const exact = node.getBoundingClientRect().width, rounded = node.offsetWidth;
@@ -80,6 +81,8 @@ export function MorphSelect({ label, hideLabel = false, items, value, defaultVal
     const [open, setOpen] = useState(false);
     const [query, setQuery] = useState("");
     const [active, setActive] = useState(null);
+    // Fluid hover: the mouse makes the nearest option active, group labels and padding included, and a click there picks it.
+    const nearest = useNearestItem({ items: '[role="option"]', onPick: item => setActive(item.dataset.value ?? null) });
     const [change, setChange] = useState({ key: 0, value: null, dir: 1, fly: null });
     const needle = query.trim().toLowerCase();
     const visibleSections = useMemo(() => needle
@@ -377,15 +380,14 @@ export function MorphSelect({ label, hideLabel = false, items, value, defaultVal
                                             close(true);
                                         else
                                             openList(); }, onKeyDown: event => onKey(event, false), onKeyUp: event => { if (event.key === " ")
-                                            window.setTimeout(() => { suppressClick.current = false; }); }, children: _jsx("span", { ref: slotRef, className: styles.slot, "data-hidden": showSearch || undefined, children: _jsx(AnimatePresence, { initial: false, custom: changeForLayer, children: _jsx(motion.span, { className: styles.layer, custom: changeForLayer, variants: reduced ? valueFade : valueVariants, initial: "enter", animate: "rest", exit: "exit", transition: reduced ? { duration: .12 } : changeForLayer.fly ? { x: FLY, y: FLY, opacity: { duration: 0 } } : { y: GLIDE, opacity: { duration: .2, ease: enter }, filter: { duration: .22, ease: enter } }, children: renderValue(selectedOption) }, layerKey) }) }) }), canSearch && _jsxs(motion.div, { className: styles.searchRow, inert: !showSearch || undefined, initial: false, animate: showSearch ? { opacity: 1, filter: "blur(0px)" } : { opacity: 0, filter: reduced ? "blur(0px)" : `blur(${blur.subtle}px)` }, transition: showSearch ? { duration: .18, ease: enter, delay: reduced ? 0 : .04 } : { duration: .1, ease: standard }, children: [_jsx(Search, { className: styles.searchIcon, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": `Search ${label.toLowerCase()}`, "aria-expanded": open, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": open && current !== null ? optionId(indexOf.get(current) ?? 0) : undefined, placeholder: searchPlaceholder ?? selectedOption?.label ?? "Search", value: query, autoComplete: "off", spellCheck: false, onChange: event => onQuery(event.target.value), onKeyDown: event => onKey(event, true) }), _jsx(AnimatePresence, { initial: false, children: query && _jsx(motion.button, { type: "button", className: styles.clear, "aria-label": "Clear search", onPointerDown: event => event.preventDefault(), onClick: () => { onQuery(""); inputRef.current?.focus(); }, initial: { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: .6, transition: { duration: .1 } }, transition: reduced ? { duration: 0 } : GLIDE, children: _jsx(X, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }, "clear") }), _jsx("button", { type: "button", className: styles.closeHit, "aria-label": `Close ${label.toLowerCase()}`, onClick: () => close(true) })] }), _jsx(motion.span, { className: styles.chevron, "aria-hidden": "true", initial: false, animate: { rotate: open ? 180 : 0 }, transition: reduced ? { duration: 0 } : GLIDE, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) })] }), _jsx(motion.div, { ref: listFaceRef, className: styles.listFace, inert: !open || undefined, "aria-hidden": !open || undefined, initial: false, animate: open ? { opacity: 1, y: 0, filter: "blur(0px)" } : { opacity: 0, y: reduced ? 0 : -6, filter: reduced ? "blur(0px)" : `blur(${blur.subtle}px)` }, transition: open ? { y: GROW, opacity: { duration: .2, ease: enter, delay: reduced ? 0 : .04 }, filter: { duration: .22, ease: enter, delay: .04 } } : { duration: .1, ease: standard }, children: _jsx("div", { ref: scrollRef, className: styles.scroll, children: _jsxs("div", { id: listId, className: styles.options, role: "listbox", "aria-labelledby": labelId, children: [_jsx(motion.span, { className: styles.highlight, style: { y: hy, height: hh, opacity: ho }, "aria-hidden": "true" }), visibleSections.map(section => {
+                                            window.setTimeout(() => { suppressClick.current = false; }); }, children: _jsx("span", { ref: slotRef, className: styles.slot, "data-hidden": showSearch || undefined, children: _jsx(AnimatePresence, { initial: false, custom: changeForLayer, children: _jsx(motion.span, { className: styles.layer, custom: changeForLayer, variants: reduced ? valueFade : valueVariants, initial: "enter", animate: "rest", exit: "exit", transition: reduced ? { duration: motionTokens.duration.instant } : changeForLayer.fly ? { x: FLY, y: FLY, opacity: { duration: 0 } } : { y: GLIDE, opacity: { duration: motionTokens.duration.exit, ease: enter }, filter: { duration: motionTokens.duration.exit, ease: enter } }, children: renderValue(selectedOption) }, layerKey) }) }) }), canSearch && _jsxs(motion.div, { className: styles.searchRow, inert: !showSearch || undefined, initial: false, animate: showSearch ? { opacity: 1, filter: "blur(0px)" } : { opacity: 0, filter: reduced ? "blur(0px)" : `blur(${blur.subtle}px)` }, transition: showSearch ? { duration: motionTokens.duration.exit, ease: enter, delay: reduced ? 0 : motionTokens.stagger.word } : { duration: motionTokens.duration.instant, ease: standard }, children: [_jsx(Search, { className: styles.searchIcon, size: 16, strokeWidth: 1.75, "aria-hidden": "true" }), _jsx("input", { ref: inputRef, className: styles.input, type: "text", role: "combobox", "aria-label": `Search ${label.toLowerCase()}`, "aria-expanded": open, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": open && current !== null ? optionId(indexOf.get(current) ?? 0) : undefined, placeholder: searchPlaceholder ?? selectedOption?.label ?? "Search", value: query, autoComplete: "off", spellCheck: false, onChange: event => onQuery(event.target.value), onKeyDown: event => onKey(event, true) }), _jsx(AnimatePresence, { initial: false, children: query && _jsx(motion.button, { type: "button", className: styles.clear, "aria-label": "Clear search", onPointerDown: event => event.preventDefault(), onClick: () => { onQuery(""); inputRef.current?.focus(); }, initial: { opacity: 0, scale: .6 }, animate: { opacity: 1, scale: 1 }, exit: { opacity: 0, scale: .6, transition: { duration: motionTokens.duration.instant } }, transition: reduced ? { duration: 0 } : GLIDE, children: _jsx(X, { size: 14, strokeWidth: 1.75, "aria-hidden": "true" }) }, "clear") }), _jsx("button", { type: "button", className: styles.closeHit, "aria-label": `Close ${label.toLowerCase()}`, onClick: () => close(true) })] }), _jsx(motion.span, { className: styles.chevron, "aria-hidden": "true", initial: false, animate: { rotate: open ? 180 : 0 }, transition: reduced ? { duration: 0 } : GLIDE, children: _jsx(ChevronDown, { size: 16, strokeWidth: 1.75 }) })] }), _jsx(motion.div, { ref: listFaceRef, className: styles.listFace, inert: !open || undefined, "aria-hidden": !open || undefined, initial: false, animate: open ? { opacity: 1, y: 0, filter: "blur(0px)" } : { opacity: 0, y: reduced ? 0 : -6, filter: reduced ? "blur(0px)" : `blur(${blur.subtle}px)` }, transition: open ? { y: GROW, opacity: { duration: motionTokens.duration.exit, ease: enter, delay: reduced ? 0 : motionTokens.stagger.word }, filter: { duration: motionTokens.duration.exit, ease: enter, delay: motionTokens.stagger.word } } : { duration: motionTokens.duration.instant, ease: standard }, children: _jsx("div", { ref: scrollRef, className: styles.scroll, children: _jsxs("div", { id: listId, className: styles.options, role: "listbox", "aria-labelledby": labelId, onPointerDown: event => event.preventDefault(), ...nearest, children: [_jsx(motion.span, { className: styles.highlight, style: { y: hy, height: hh, opacity: ho }, "aria-hidden": "true" }), visibleSections.map(section => {
                                                 const rows = section.options.map(option => {
                                                     const index = indexOf.get(option.value) ?? 0;
                                                     const isSelected = option.value === selected, isActive = option.value === current;
                                                     return _jsxs("div", { id: optionId(index), role: "option", "aria-selected": isSelected, "aria-disabled": option.disabled || undefined, className: styles.option, "data-active": isActive || undefined, ref: node => { if (node)
                                                             optionRefs.current.set(option.value, node);
                                                         else
-                                                            optionRefs.current.delete(option.value); }, onPointerMove: event => { if (event.pointerType === "mouse" && !option.disabled && option.value !== current)
-                                                            setActive(option.value); }, onPointerDown: event => event.preventDefault(), onClick: event => commit(option, event.currentTarget), children: [_jsxs("span", { className: styles.optionValue, "data-part": "value", children: [option.icon && _jsx("span", { className: styles.icon, "aria-hidden": "true", children: option.icon }), _jsx("span", { className: styles.valueText, children: option.label })] }), option.meta && _jsx("span", { className: styles.meta, children: option.meta }), _jsx("span", { className: styles.check, "data-on": isSelected || undefined, "aria-hidden": "true", children: _jsx(Check, { size: 16, strokeWidth: 1.75 }) })] }, option.value);
+                                                            optionRefs.current.delete(option.value); }, "data-value": option.value, onPointerDown: event => event.preventDefault(), onClick: event => commit(option, event.currentTarget), children: [_jsxs("span", { className: styles.optionValue, "data-part": "value", children: [option.icon && _jsx("span", { className: styles.icon, "aria-hidden": "true", children: option.icon }), _jsx("span", { className: styles.valueText, children: option.label })] }), option.meta && _jsx("span", { className: styles.meta, children: option.meta }), _jsx("span", { className: styles.check, "data-on": isSelected || undefined, "aria-hidden": "true", children: _jsx(Check, { size: 16, strokeWidth: 1.75 }) })] }, option.value);
                                                 });
                                                 return section.label
                                                     ? _jsxs("div", { role: "group", "aria-labelledby": `${uid}-${section.key}`, className: styles.group, children: [_jsx("div", { id: `${uid}-${section.key}`, className: styles.groupLabel, role: "presentation", children: section.label }), rows] }, section.key)

package/components/morph-select/morph-select.module.css

@@ -1,7 +1,7 @@
 /* The root lays out the label and the anchor. The anchor holds the closed trigger's place; the shape floats over it and grows past it when open. */
 .root { --ms-h: var(--control-height-md); --ms-trigger-w: 0px; position: relative; display: inline-grid; justify-items: start; gap: var(--space-related); min-width: 0; color: var(--foreground); font-family: var(--font-body); font-size: var(--text-sm); letter-spacing: var(--tracking-body); line-height: var(--leading-body); }
 .root[data-align="end"] { justify-items: end; }
-.root[data-open] { z-index: 30; }
+.root[data-open] { z-index: var(--layer-dropdown); }
 .label { color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; }
 
 .anchor { position: relative; height: var(--ms-h); max-width: 100%; }
@@ -22,7 +22,7 @@
 /* The lid is the trigger row. It stays at the top of the surface in both states and sits above the list, so a lifted label passes over it. */
 .lid { position: absolute; z-index: 1; top: 0; right: 0; left: 0; height: var(--ms-h); }
 
-.trigger { box-sizing: border-box; display: flex; height: var(--ms-h); align-items: center; gap: var(--space-related); padding: 0 36px 0 14px; font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
+.trigger { box-sizing: border-box; display: flex; height: var(--ms-h); align-items: center; gap: var(--space-related); padding: 0 var(--space-block) 0 var(--space-inset); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; }
 .lid .trigger { position: absolute; inset: 0; width: 100%; margin: 0; border: 0; background: transparent; color: inherit; cursor: pointer; font-family: inherit; letter-spacing: inherit; text-align: left; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
 .lid .trigger:disabled { cursor: not-allowed; }
 /* An invisible copy that says how wide the closed trigger wants to be. It sits in flow until the first measurement lands, so the server render already has the right size. */
@@ -39,10 +39,10 @@
 .icon > svg { width: 16px; height: 16px; }
 .icon > img { width: 20px; height: 20px; border-radius: 50%; corner-shape: round; object-fit: cover; }
 
-.chevron { position: absolute; top: 50%; right: 12px; display: grid; width: 16px; height: 16px; margin-top: -8px; place-items: center; color: var(--text-muted); pointer-events: none; }
+.chevron { position: absolute; top: 50%; right: var(--space-group); display: grid; width: 16px; height: 16px; margin-top: calc(var(--space-related) * -1); place-items: center; color: var(--text-muted); pointer-events: none; }
 
 /* Search takes the lid's place when the list is long. */
-.searchRow { position: absolute; inset: 0; display: flex; align-items: center; gap: var(--space-related); padding: 0 2px 0 14px; }
+.searchRow { position: absolute; inset: 0; display: flex; align-items: center; gap: var(--space-related); padding: 0 var(--space-hair) 0 var(--space-inset); }
 .searchRow[inert] { pointer-events: none; }
 .searchIcon { flex: none; color: var(--text-muted); }
 .input { min-width: 0; height: 100%; flex: 1; padding: 0; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); letter-spacing: var(--tracking-body); outline: none; }
@@ -56,19 +56,19 @@
 }
 
 /* The list hangs under the lid at its own width, so it measures the same whatever size the surface is mid spring. */
-.listFace { position: absolute; top: var(--ms-h); left: 0; box-sizing: border-box; width: max(var(--ms-trigger-w), min(var(--ms-panel-w), calc(100vw - 2rem))); padding: 0 6px 6px; }
+.listFace { position: absolute; top: var(--ms-h); left: 0; box-sizing: border-box; width: max(var(--ms-trigger-w), min(var(--ms-panel-w), calc(100vw - 2rem))); padding: 0 var(--space-related) var(--space-related); }
 .root[data-align="end"] .listFace { right: 0; left: auto; }
-.listFace::before { content: ""; position: absolute; top: 0; right: 14px; left: 14px; height: 1px; background: var(--border-subtle); }
+.listFace::before { content: ""; position: absolute; top: 0; right: var(--space-inset); left: var(--space-inset); height: 1px; background: var(--border-subtle); }
 .listFace[inert] { pointer-events: none; }
-.scroll { max-height: var(--ms-list-max); overflow-y: auto; overscroll-behavior: contain; padding-top: 6px; scrollbar-width: thin; }
-.options { position: relative; display: grid; gap: 2px; }
+.scroll { max-height: var(--ms-list-max); overflow-y: auto; overscroll-behavior: contain; padding-top: var(--space-related); scrollbar-width: thin; }
+.options { position: relative; display: grid; gap: var(--space-hair); }
 .highlight { position: absolute; top: 0; right: 0; left: 0; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: color-mix(in oklab, var(--foreground) 6.5%, transparent); pointer-events: none; }
 
-.group { display: grid; gap: 2px; }
-.group + .group { margin-top: 4px; }
-.groupLabel { padding: 8px 10px 4px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; }
+.group { display: grid; gap: var(--space-hair); }
+.group + .group { margin-top: var(--space-tight); }
+.groupLabel { padding: var(--space-related) var(--space-group) var(--space-tight); color: var(--text-muted); font-size: var(--text-xs); font-weight: 400; }
 
-.option { position: relative; display: flex; min-height: 36px; box-sizing: border-box; align-items: center; gap: var(--space-related); padding: 0 10px 0 8px; border-radius: var(--radius-control); corner-shape: var(--corner-shape); color: var(--text-secondary); cursor: pointer; user-select: none; -webkit-user-select: none; transition: color var(--duration-fast) var(--ease-standard); }
+.option { position: relative; display: flex; min-height: 36px; box-sizing: border-box; align-items: center; gap: var(--space-related); padding: 0 var(--space-group) 0 var(--space-related); border-radius: var(--radius-control); corner-shape: var(--corner-shape); color: var(--text-secondary); cursor: pointer; user-select: none; -webkit-user-select: none; transition: color var(--duration-fast) var(--ease-standard); }
 .option[data-active], .option[aria-selected="true"] { color: var(--foreground); }
 .option[aria-disabled="true"] { color: var(--text-muted); cursor: not-allowed; opacity: .6; }
 /* Lid padding minus list inset, so a lifted label starts exactly level with where it lands. */
@@ -76,7 +76,7 @@
 .meta { flex: none; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 .check { display: grid; width: 16px; height: 16px; flex: none; place-items: center; color: var(--foreground); opacity: 0; transform: scale(.6); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
 .check[data-on] { opacity: 1; transform: none; }
-.empty { margin: 0; padding: 12px 10px 14px; color: var(--text-muted); font-size: var(--text-sm); }
+.empty { margin: 0; padding: var(--space-group) var(--space-group) var(--space-inset); color: var(--text-muted); font-size: var(--text-sm); }
 
 .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }