@teamofsilicons/silicon-ui 0.2.0 → 0.4.0

package/components/chat-thread/chat-thread.module.css

@@ -14,32 +14,32 @@
 .scroller { min-height: 0; flex: 1; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-gutter: stable; }
 /* The content springs up from where it was when the thread grows; the clip keeps that travel out of the scroll range. */
 .track { overflow: clip; }
-.content { padding: 12px 16px 14px; will-change: transform; }
+.content { padding: var(--space-group) var(--space-inset) var(--space-inset); will-change: transform; }
 
 .list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
 
-.day { display: flex; align-items: center; gap: 12px; padding: 20px 4px 4px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; }
+.day { display: flex; align-items: center; gap: var(--space-group); padding: var(--space-comfort) var(--space-tight) var(--space-tight); color: var(--text-muted); font-size: var(--text-xs); font-weight: 500; }
 .day::before, .day::after { height: 1px; flex: 1; background: var(--border-subtle); content: ""; }
-.day:first-child { padding-top: 4px; }
+.day:first-child { padding-top: var(--space-tight); }
 .day > span:empty::before { content: "\00a0"; }
 
-.row { position: relative; display: flex; align-items: flex-end; gap: 8px; margin-top: 2px; }
-.row[data-first] { margin-top: 14px; }
-.day + .row { margin-top: 10px; }
+.row { position: relative; display: flex; align-items: flex-end; gap: var(--space-related); margin-top: var(--space-hair); }
+.row[data-first] { margin-top: var(--space-inset); }
+.day + .row { margin-top: var(--space-group); }
 .row[data-mine] { justify-content: flex-end; }
 
 .gutter { width: 28px; flex: none; align-self: flex-end; }
-.stack { display: flex; min-width: 0; max-width: min(78%, 34rem); flex-direction: column; align-items: flex-start; gap: 4px; }
+.stack { display: flex; min-width: 0; max-width: min(78%, 34rem); flex-direction: column; align-items: flex-start; gap: var(--space-tight); }
 .row[data-mine] .stack { align-items: flex-end; }
 
-.meta { display: flex; align-items: baseline; gap: 6px; margin: 0 0 2px; padding: 0 12px; color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.meta { display: flex; align-items: baseline; gap: var(--space-related); margin: 0 0 var(--space-hair); padding: 0 var(--space-group); color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 .author { color: var(--text-secondary); font-weight: 500; }
 
-.line { position: relative; display: flex; max-width: 100%; align-items: center; gap: 6px; }
+.line { position: relative; display: flex; max-width: 100%; align-items: center; gap: var(--space-related); }
 /* The author's face sits in the gutter, level with the bottom of their last bubble rather than the reactions under it. */
-.face { position: absolute; bottom: 0; left: -36px; display: flex; }
+.face { position: absolute; bottom: 0; left: calc(var(--space-block) * -1); display: flex; }
 .row[data-mine] .line { flex-direction: row-reverse; }
-.parts { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 4px; }
+.parts { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-tight); }
 .row[data-mine] .parts { align-items: flex-end; }
 
 /* Bubbles in a group share a soft edge on the author's side, so a run of messages reads as one voice. */
@@ -47,7 +47,7 @@
   --r: 18px;
   --tight: 6px;
   max-width: 100%;
-  padding: 8px 13px 9px;
+  padding: var(--space-related) var(--space-group) var(--space-related);
   border-radius: var(--r);
   background: var(--surface-muted);
   color: var(--foreground);
@@ -63,7 +63,7 @@
 .row[data-mine]:not([data-last]) .bubble { border-bottom-right-radius: var(--tight); }
 .row[data-failed] .bubble { opacity: .6; }
 
-.gallery { display: grid; width: min(240px, 100%); gap: 3px; grid-template-columns: 1fr; }
+.gallery { display: grid; width: min(240px, 100%); gap: var(--space-tight); grid-template-columns: 1fr; }
 .gallery[data-count="2"],
 .gallery[data-count="3"],
 .gallery[data-count="4"] { grid-template-columns: 1fr 1fr; }
@@ -73,10 +73,10 @@
 .gallery:not([data-count="1"]) .image { border-radius: var(--radius-detail); corner-shape: var(--corner-shape); }
 .gallery:not([data-count="1"]) { overflow: hidden; border-radius: var(--radius-control); corner-shape: var(--corner-shape); }
 .image img { display: block; width: 100%; height: 100%; object-fit: cover; }
-.more { position: absolute; inset: 0; display: grid; place-items: center; background: oklch(0% 0 0 / .45); color: #fff; font-size: var(--text-lg); font-weight: 500; }
+.more { position: absolute; inset: 0; display: grid; place-items: center; background: var(--media-scrim); color: var(--on-media); font-size: var(--text-lg); font-weight: 500; }
 
 .file {
-  display: flex; max-width: 100%; align-items: center; gap: 10px; padding: 9px 14px 9px 11px;
+  display: flex; max-width: 100%; align-items: center; gap: var(--space-group); padding: var(--space-related) var(--space-inset) var(--space-related) var(--space-group);
   border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface); color: var(--foreground); text-decoration: none;
   transition: background-color var(--duration-fast) var(--ease-standard);
 }
@@ -103,17 +103,17 @@
 @media (hover: none) { .reactButton { opacity: .7; } }
 
 .picker {
-  position: absolute; z-index: 5; bottom: calc(100% + 6px); right: -4px;
-  display: flex; gap: 2px; padding: 4px;
+  position: absolute; z-index: 5; bottom: calc(100% + var(--space-related)); right: calc(var(--space-tight) * -1);
+  display: flex; gap: var(--space-hair); padding: var(--space-tight);
   border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-raised); box-shadow: var(--shadow-floating);
   transform-origin: calc(100% - 18px) 100%;
 }
-.picker[data-mine] { right: auto; left: -4px; transform-origin: 18px 100%; }
-.pickerWrap[data-below] .picker { top: calc(100% + 6px); bottom: auto; transform-origin: calc(100% - 18px) 0; }
+.picker[data-mine] { right: auto; left: calc(var(--space-tight) * -1); transform-origin: 18px 100%; }
+.pickerWrap[data-below] .picker { top: calc(100% + var(--space-related)); bottom: auto; transform-origin: calc(100% - 18px) 0; }
 .pickerWrap[data-below] .picker[data-mine] { transform-origin: 18px 0; }
 .emoji {
   display: grid; width: 34px; height: 34px; place-items: center; padding: 0;
-  border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; cursor: pointer; font-size: 19px; line-height: 1;
+  border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; cursor: pointer; font-size: var(--text-lg); line-height: 1;
   -webkit-tap-highlight-color: transparent;
   transition: background-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
 }
@@ -121,31 +121,31 @@
 .emoji:active { transform: scale(.9); }
 @media (hover: hover) and (pointer: fine) { .emoji:hover { background: var(--surface-muted); transform: scale(1.12); } }
 
-.reactionClip { overflow: hidden; margin: -2px -4px; padding: 2px 4px 2px 8px; }
-.row[data-mine] .reactionClip { padding: 2px 8px 2px 4px; }
-.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
+.reactionClip { overflow: hidden; margin: calc(var(--space-hair) * -1) calc(var(--space-tight) * -1); padding: var(--space-hair) var(--space-tight) var(--space-hair) var(--space-related); }
+.row[data-mine] .reactionClip { padding: var(--space-hair) var(--space-related) var(--space-hair) var(--space-tight); }
+.reactions { display: flex; flex-wrap: wrap; gap: var(--space-tight); margin: 0; padding: 0; list-style: none; }
 .row[data-mine] .reactions { justify-content: flex-end; }
 .reaction {
-  display: inline-flex; height: 26px; align-items: center; gap: 5px; padding: 0 9px 0 7px;
+  display: inline-flex; height: 26px; align-items: center; gap: var(--space-tight); padding: 0 var(--space-related) 0 var(--space-related);
   border: 1px solid var(--border-subtle); 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; line-height: 1; font-variant-numeric: tabular-nums;
   -webkit-tap-highlight-color: transparent;
   transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
 }
-.reaction > span:first-child { font-size: 14px; }
+.reaction > span:first-child { font-size: var(--text-sm); }
 .reaction[aria-pressed="true"] { border-color: color-mix(in oklab, var(--accent) 28%, transparent); background: color-mix(in oklab, var(--accent) 8%, var(--surface)); color: var(--foreground); }
 @media (hover: hover) and (pointer: fine) { .reaction:hover { border-color: var(--border-strong); } }
 .reaction:active { transform: scale(.95); }
 .countRoll { display: inline-grid; overflow: hidden; font-variant-numeric: tabular-nums; }
 .countRoll > span { grid-area: 1 / 1; }
 
-.receipts { display: flex; min-height: 16px; align-items: center; gap: 6px; padding: 1px 6px 0; color: var(--text-muted); font-size: var(--text-xs); }
+.receipts { display: flex; min-height: 16px; align-items: center; gap: var(--space-related); padding: 1px var(--space-related) 0; color: var(--text-muted); font-size: var(--text-xs); }
 .readers { display: inline-flex; }
 .reader { display: inline-flex; border-radius: 50%; corner-shape: round; box-shadow: 0 0 0 2px var(--surface); }
-.reader + .reader { margin-left: -4px; }
-.status[data-status="failed"] { display: inline-flex; align-items: center; gap: 8px; color: var(--danger); }
+.reader + .reader { margin-left: calc(var(--space-tight) * -1); }
+.status[data-status="failed"] { display: inline-flex; align-items: center; gap: var(--space-related); color: var(--danger); }
 .retry {
-  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
+  display: inline-flex; align-items: center; gap: var(--space-tight); padding: var(--space-hair) var(--space-related);
   border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); color: var(--foreground); cursor: pointer;
   font: inherit; font-weight: 500; line-height: 16px;
   -webkit-tap-highlight-color: transparent;
@@ -157,8 +157,8 @@
 .avatar { display: inline-grid; flex: none; overflow: hidden; place-items: center; border-radius: 50%; corner-shape: round; background: var(--surface-muted); color: var(--text-secondary); font-weight: 500; }
 .avatar img { width: 100%; height: 100%; object-fit: cover; }
 
-.typing { display: grid; height: 36px; box-sizing: border-box; place-items: center; padding: 0 14px; }
-.dots { display: inline-flex; gap: 4px; }
+.typing { display: grid; height: 36px; box-sizing: border-box; place-items: center; padding: 0 var(--space-inset); }
+.dots { display: inline-flex; gap: var(--space-tight); }
 .dots i { width: 6px; height: 6px; border-radius: 50%; corner-shape: round; background: var(--text-muted); animation: breathe 1.2s var(--ease-in-out) infinite; }
 .dots i:nth-child(2) { animation-delay: .16s; }
 .dots i:nth-child(3) { animation-delay: .32s; }
@@ -169,8 +169,8 @@
 @media (prefers-reduced-motion: reduce) { .dots i { animation: none; opacity: .6; } }
 
 .pill {
-  position: absolute; z-index: 6; bottom: 12px; left: 50%; translate: -50% 0;
-  display: inline-flex; height: 32px; align-items: center; gap: 6px; padding: 0 14px 0 11px;
+  position: absolute; z-index: 6; bottom: var(--space-group); left: 50%; translate: -50% 0;
+  display: inline-flex; height: 32px; align-items: center; gap: var(--space-related); padding: 0 var(--space-inset) 0 var(--space-group);
   border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface-raised); box-shadow: var(--shadow-floating); color: var(--foreground); cursor: pointer;
   font: inherit; font-size: var(--text-xs); font-weight: 500; white-space: nowrap;
   -webkit-tap-highlight-color: transparent;
@@ -180,22 +180,22 @@
 .pill:active { scale: .97; }
 
 /* Composer. */
-.composer { display: grid; padding: 10px 12px 12px; border-top: 1px solid var(--border-subtle); transition: background-color var(--duration-fast) var(--ease-standard); }
+.composer { display: grid; padding: var(--space-group) var(--space-group) var(--space-group); border-top: 1px solid var(--border-subtle); transition: background-color var(--duration-fast) var(--ease-standard); }
 .composer[data-dragging] { background: var(--accent-subtle); }
 .trayClip { overflow: hidden; }
-.tray { display: flex; gap: 8px; margin: 0; padding: 8px 8px 10px 4px; overflow-x: auto; list-style: none; scrollbar-width: none; }
+.tray { display: flex; gap: var(--space-related); margin: 0; padding: var(--space-related) var(--space-related) var(--space-group) var(--space-tight); overflow-x: auto; list-style: none; scrollbar-width: none; }
 .pending { position: relative; flex: none; }
 .pendingImage { display: block; width: 56px; height: 56px; border-radius: var(--radius-control); corner-shape: var(--corner-shape); object-fit: cover; }
-.pendingFile { display: grid; width: 168px; height: 56px; box-sizing: border-box; align-content: center; column-gap: 8px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface); grid-template-columns: auto minmax(0, 1fr); }
+.pendingFile { display: grid; width: 168px; height: 56px; box-sizing: border-box; align-content: center; column-gap: var(--space-related); padding: 0 var(--space-group); border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface); grid-template-columns: auto minmax(0, 1fr); }
 .pendingFile > svg { grid-row: span 2; align-self: center; color: var(--text-secondary); }
 .pendingName { overflow: hidden; font-size: var(--text-xs); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
 .pendingSize { color: var(--text-muted); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 .remove {
-  position: absolute; top: -6px; right: -6px; display: grid; width: 20px; height: 20px; place-items: center; padding: 0;
+  position: absolute; top: calc(var(--space-related) * -1); right: calc(var(--space-related) * -1); display: grid; width: 20px; height: 20px; place-items: center; padding: 0;
   border: 2px solid var(--surface); border-radius: 50%; corner-shape: round; background: var(--foreground); color: var(--background); cursor: pointer;
 }
 
-.inputRow { display: flex; align-items: flex-end; gap: 6px; }
+.inputRow { display: flex; align-items: flex-end; gap: var(--space-related); }
 .attach {
   display: grid; width: 40px; height: 40px; flex: none; place-items: center; margin-bottom: 1px; padding: 0;
   border: 0; border-radius: var(--radius-full); corner-shape: round; background: transparent; color: var(--text-secondary); cursor: pointer;
@@ -216,7 +216,7 @@
 .field { position: relative; min-width: 0; flex: 1; overflow: hidden; border-radius: var(--radius-control); corner-shape: var(--corner-shape); }
 .mirror,
 .textarea {
-  box-sizing: border-box; width: 100%; margin: 0; padding: 9px 6px 9px 16px; border: 0;
+  box-sizing: border-box; width: 100%; margin: 0; padding: var(--space-related) var(--space-related) var(--space-related) var(--space-inset); border: 0;
   font: inherit; font-size: var(--text-base); letter-spacing: var(--tracking-body); line-height: 22px;
   overflow-wrap: break-word; white-space: pre-wrap; word-break: break-word;
 }
@@ -225,7 +225,7 @@
 .textarea::placeholder { color: var(--text-muted); }
 
 .send {
-  position: relative; display: grid; width: 32px; height: 32px; flex: none; place-items: center; margin: 0 4px 4px 0; overflow: hidden; padding: 0;
+  position: relative; display: grid; width: 32px; height: 32px; flex: none; place-items: center; margin: 0 var(--space-tight) var(--space-tight) 0; overflow: hidden; padding: 0;
   border: 0; border-radius: 50%; corner-shape: round; background: transparent; color: var(--text-muted); cursor: default;
   -webkit-tap-highlight-color: transparent;
   transition: background-color var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard), transform var(--duration-instant) var(--ease-standard);
@@ -237,6 +237,6 @@
 .srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 
 @media (max-width: 420px) {
-  .content { padding-inline: 12px; }
+  .content { padding-inline: var(--space-group); }
   .stack { max-width: 84%; }
 }

package/components/checkbox/checkbox.module.css

@@ -9,7 +9,7 @@
 .box:active:not(:disabled) .visual { transform: scale(.95); transition: border-color var(--duration-fast) var(--ease-standard), transform var(--duration-instant) var(--ease-standard); }
 .box:disabled { opacity: .5; cursor: not-allowed; }
 /* The label's first line centers on the square: (44px box - 19.6px line) / 2. */
-.copy { display: grid; gap: 2px; min-width: 0; margin-left: 1px; padding-top: calc((var(--control-height-md) - var(--text-sm) * 1.4) / 2); }
+.copy { display: grid; gap: var(--space-hair); min-width: 0; margin-left: 1px; padding-top: calc((var(--control-height-md) - var(--text-sm) * 1.4) / 2); }
 .copy label { color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); cursor: pointer; }
 .copy span { color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
 @media (prefers-reduced-motion: reduce) { .visual, .box:active:not(:disabled) .visual { transition: none; transform: none; } }

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

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

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

@@ -6,11 +6,11 @@
 /* The button is only the hit area and the layout box. What you see is the surface, which trails the box on a spring while the width morphs. */
 .chip { position: relative; display: inline-flex; max-width: 100%; padding: 0; border: 0; border-radius: var(--radius-full); corner-shape: round; background: none; color: var(--text-secondary); font: inherit; font-size: var(--text-sm); font-weight: 500; letter-spacing: var(--tracking-body); line-height: 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--duration-fast) var(--ease-standard); }
 /* Press answers on the body with the individual scale property, so it never fights the layout transform on the button. */
-.body { position: relative; isolation: isolate; display: inline-flex; min-width: 0; height: var(--control-height-sm); align-items: center; padding: 0 14px; transition: scale var(--duration-spring) var(--ease-spring); }
+.body { position: relative; isolation: isolate; display: inline-flex; min-width: 0; height: var(--control-height-sm); align-items: center; padding: 0 var(--space-inset); transition: scale var(--duration-spring) var(--ease-spring); }
 .chip:active .body { scale: .97; transition-duration: var(--duration-instant); transition-timing-function: var(--ease-standard); }
 .surface { position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; border: 1px solid var(--border); border-radius: var(--radius-full); corner-shape: round; background: var(--surface); transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); }
 /* The check grows from its left edge where the label started; the slot hands its width to the label in one layout step, and the label's offset springs it over. */
-.check { position: absolute; top: calc(50% - 7px); left: 12px; display: grid; width: 14px; height: 14px; place-items: center; color: var(--accent-strong); transform-origin: 0 50%; }
+.check { position: absolute; top: calc(50% - var(--space-related)); left: var(--space-group); display: grid; width: 14px; height: 14px; place-items: center; color: var(--accent-strong); transform-origin: 0 50%; }
 .check svg { display: block; overflow: visible; }
 .slot { width: 0; flex: none; }
 .body[data-selected="true"] .slot { width: 18px; }

package/components/code-block/code-block.module.css

@@ -23,21 +23,14 @@
 .chevron { display: grid; flex: none; place-items: center; color: var(--text-muted); }
 /* Each role has contrast in both themes; color supports, but never replaces, source text. */
 .comment { color: var(--text-muted); font-style: italic; }
-.string { color: oklch(46% .13 150); }
-.number { color: oklch(50% .14 55); }
-.keyword { color: oklch(48% .15 285); }
-.type { color: oklch(46% .13 230); }
-.function { color: oklch(43% .12 25); }
-.property { color: oklch(44% .12 85); }
-.tag { color: oklch(46% .13 230); }
+.string { color: var(--syntax-string); }
+.number { color: var(--syntax-number); }
+.keyword { color: var(--syntax-keyword); }
+.type { color: var(--syntax-type); }
+.function { color: var(--syntax-function); }
+.property { color: var(--syntax-property); }
+.tag { color: var(--syntax-type); }
 .punctuation { color: var(--text-secondary); }
-:global(:root[data-theme="dark"]) .string { color: oklch(77% .15 150); }
-:global(:root[data-theme="dark"]) .number { color: oklch(80% .14 75); }
-:global(:root[data-theme="dark"]) .keyword { color: oklch(78% .16 285); }
-:global(:root[data-theme="dark"]) .type { color: oklch(79% .13 230); }
-:global(:root[data-theme="dark"]) .function { color: oklch(80% .13 25); }
-:global(:root[data-theme="dark"]) .property { color: oklch(79% .12 85); }
-:global(:root[data-theme="dark"]) .tag { color: oklch(79% .13 230); }
 @media (hover: hover) and (pointer: fine) { .expand:hover { background: var(--surface-muted); color: var(--foreground); } .expand:hover .chevron { color: var(--foreground); } }
 @media (max-width: 420px) { .header { padding-left: var(--space-group); } .header :global(button) { width: var(--control-height-sm); padding-inline: 0; } .header :global(button) > span:last-of-type { display: none; } .viewport { --code-collapsed: calc(var(--code-lines, 0) * var(--text-xs) * 1.7 + var(--space-inset) * 2); } .pre { padding: var(--space-inset); font-size: var(--text-xs); } }
 @media (prefers-reduced-motion: reduce) { .expand { transition: none; } }

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

@@ -11,7 +11,7 @@
 }
 :global(:root[data-theme="dark"]) .root { --picker-fill: var(--surface-raised); --checker: repeating-conic-gradient(oklch(42% 0 0) 0 25%, oklch(30% 0 0) 0 50%) 0 0 / 10px 10px; }
 
-.trigger, .head { display: flex; height: 44px; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; }
+.trigger, .head { display: flex; height: 44px; align-items: center; gap: var(--space-group); padding: var(--space-related) var(--space-inset) var(--space-related) var(--space-related); }
 .trigger {
   border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--picker-fill); box-shadow: var(--shadow-resting); color: inherit; font: inherit; cursor: pointer;
   -webkit-tap-highlight-color: transparent; transition: border-color var(--duration-fast) var(--ease-standard);
@@ -22,76 +22,75 @@
 
 /* A chip over a checkerboard, so opacity reads as opacity. */
 .chip { position: relative; display: block; width: 32px; height: 32px; flex: none; overflow: hidden; border-radius: 50%; corner-shape: round; background: var(--checker); }
-.chip > span { position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; box-shadow: inset 0 0 0 1px oklch(0% 0 0 / .1); }
+.chip > span { position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; box-shadow: var(--edge-inset); }
 
 /* The floating layer. Its drop shadow follows the clipped shape, so the shadow grows with the panel. */
-.float { position: absolute; z-index: 20; top: -1px; left: -1px; filter: drop-shadow(0 18px 36px oklch(0% 0 0 / .12)) drop-shadow(0 2px 6px oklch(0% 0 0 / .06)); pointer-events: none; }
-:global(:root[data-theme="dark"]) .float { filter: drop-shadow(0 20px 44px oklch(0% 0 0 / .5)); }
+.float { position: absolute; z-index: var(--layer-popover); top: -1px; left: -1px; filter: var(--shadow-drop); pointer-events: none; }
 .float[data-open] { pointer-events: auto; }
-.panel { width: var(--picker-width); padding-bottom: 14px; border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--picker-fill); will-change: clip-path; }
-.head { gap: 10px; padding-right: 6px; }
+.panel { width: var(--picker-width); padding-bottom: var(--space-inset); border: 1px solid var(--border); border-radius: var(--radius-container); corner-shape: var(--corner-shape); background: var(--picker-fill); will-change: clip-path; }
+.head { gap: var(--space-group); padding-right: var(--space-related); }
 .head .triggerText { flex: 1; }
-.headActions { display: flex; gap: 2px; }
+.headActions { display: flex; gap: var(--space-hair); }
 .iconButton {
   display: grid; width: 32px; height: 32px; place-items: center; padding: 0; border: 0; border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: transparent; color: var(--text-secondary); cursor: pointer;
   transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
 }
 .iconButton:active { transform: scale(.94); }
 /* One column locked to the panel: a wider grade label ("AA large") must never widen the area and sliders mid drag. */
-.body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 8px 14px 0; }
+.body { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-inset); padding: var(--space-related) var(--space-inset) 0; }
 
 /* Saturation runs left to right, brightness bottom to top, over the pure hue. */
 .area {
   position: relative; height: 164px; border-radius: var(--radius-control); corner-shape: var(--corner-shape); cursor: crosshair; touch-action: none;
-  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent), var(--picker-hue);
-  box-shadow: inset 0 0 0 1px oklch(0% 0 0 / .08);
+  background: linear-gradient(to top, var(--color-black), transparent), linear-gradient(to right, var(--color-white), transparent), var(--picker-hue);
+  box-shadow: var(--edge-inset);
 }
 .areaThumb, .sliderThumb {
   position: absolute; width: 22px; height: 22px; border-radius: 50%; corner-shape: round; translate: -50% -50%; cursor: grab;
-  box-shadow: 0 0 0 3px #fff, 0 2px 8px oklch(0% 0 0 / .3), inset 0 0 0 1px oklch(0% 0 0 / .12);
+  box-shadow: 0 0 0 3px var(--color-white), var(--shadow-knob), var(--edge-inset);
   transition: scale var(--duration-spring) var(--ease-spring);
 }
 .areaThumb { background: var(--picker-opaque); }
 .area[data-active] .areaThumb, .sliderThumb[data-active] { scale: 1.2; cursor: grabbing; }
 
-.slider { position: relative; height: 14px; margin: 0 11px; border-radius: var(--radius-full); corner-shape: round; cursor: pointer; touch-action: none; }
-.slider::before { content: ""; position: absolute; inset: 0 -11px; border-radius: inherit; corner-shape: inherit; background: var(--track); box-shadow: inset 0 0 0 1px oklch(0% 0 0 / .08); }
+.slider { position: relative; height: 14px; margin: 0 var(--space-group); border-radius: var(--radius-full); corner-shape: round; cursor: pointer; touch-action: none; }
+.slider::before { content: ""; position: absolute; inset: 0 calc(var(--space-group) * -1); border-radius: inherit; corner-shape: inherit; background: var(--track); box-shadow: var(--edge-inset); }
 .sliderThumb { top: 50%; background: var(--checker); }
 .sliderThumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; corner-shape: inherit; background: var(--thumb-fill); }
 /* The gradient stops sit at the thumb's travel ends, so the color under the thumb is the value it reports. */
 .hue { --track: linear-gradient(to right, #f00 11px, #ff0 calc(11px + (100% - 22px) * .1666), #0f0 calc(11px + (100% - 22px) * .3333), #0ff 50%, #00f calc(11px + (100% - 22px) * .6666), #f0f calc(11px + (100% - 22px) * .8333), #f00 calc(100% - 11px)); }
 .alpha { --track: linear-gradient(to right, transparent 11px, var(--picker-opaque) calc(100% - 11px)), var(--checker); }
 
-.field { display: flex; height: 40px; align-items: stretch; overflow: hidden; margin-top: 2px; border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface-muted); transition: border-color var(--duration-fast) var(--ease-standard); }
+.field { display: flex; height: 40px; align-items: stretch; overflow: hidden; margin-top: var(--space-hair); border: 1px solid var(--border); border-radius: var(--radius-control); corner-shape: var(--corner-shape); background: var(--surface-muted); transition: border-color var(--duration-fast) var(--ease-standard); }
 .field[data-invalid] { border-color: var(--danger); }
 .format {
-  display: flex; min-width: 56px; align-items: center; justify-content: center; padding: 0 10px; border: 0; border-right: 1px solid var(--border); background: transparent;
+  display: flex; min-width: 56px; align-items: center; justify-content: center; padding: 0 var(--space-group); border: 0; border-right: 1px solid var(--border); background: transparent;
   color: var(--foreground); font: inherit; font-size: var(--text-xs); font-weight: 500; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard);
 }
 .inputWrap { position: relative; display: flex; min-width: 0; flex: 1; }
-.input, .morph { padding: 0 10px; font: inherit; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
+.input, .morph { padding: 0 var(--space-group); font: inherit; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
 .input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--foreground); caret-color: var(--foreground); }
 .input[data-morphing] { color: transparent; }
 .morph { position: absolute; inset: 0; display: flex; align-items: center; overflow: hidden; color: var(--foreground); pointer-events: none; white-space: nowrap; }
-.error { min-height: 0; margin: -10px 2px -4px; color: var(--danger); font-size: var(--text-xs); }
+.error { min-height: 0; margin: calc(var(--space-group) * -1) var(--space-hair) calc(var(--space-tight) * -1); color: var(--danger); font-size: var(--text-xs); }
 .error:empty { display: none; }
 
-.contrast { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); }
+.contrast { display: flex; align-items: center; gap: var(--space-group); font-size: var(--text-sm); }
 .sample { display: grid; width: 36px; height: 28px; flex: none; place-items: center; border: 1px solid var(--border); border-radius: var(--radius-detail); corner-shape: var(--corner-shape); background: var(--picker-bg); color: var(--picker-color); font-weight: 500; }
 .ratio { font-variant-numeric: tabular-nums; font-weight: 500; min-width: 4.4ch; }
 .against { flex: 1; min-width: 0; overflow: hidden; color: var(--text-secondary); font-size: var(--text-xs); text-overflow: ellipsis; white-space: nowrap; }
-.grade { position: relative; display: inline-grid; height: 22px; align-items: center; padding: 0 8px; border-radius: var(--radius-full); corner-shape: round; font-size: var(--text-xs); font-weight: 500; white-space: nowrap; transition: background-color var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard); }
+.grade { position: relative; display: inline-grid; height: 22px; align-items: center; padding: 0 var(--space-related); border-radius: var(--radius-full); corner-shape: round; font-size: var(--text-xs); font-weight: 500; white-space: nowrap; transition: background-color var(--duration-standard) var(--ease-standard), color var(--duration-standard) var(--ease-standard); }
 .grade[data-grade="pass"] { background: color-mix(in oklab, var(--success) 14%, transparent); color: var(--success); }
 .grade[data-grade="large"] { background: color-mix(in oklab, var(--warning) 16%, transparent); color: var(--warning); }
 .grade[data-grade="fail"] { background: color-mix(in oklab, var(--danger) 12%, transparent); color: var(--danger); }
 
-.swatches { display: flex; align-items: center; gap: 6px; min-height: 32px; }
+.swatches { display: flex; align-items: center; gap: var(--space-related); min-height: 32px; }
 .add {
   display: grid; width: 30px; height: 30px; flex: none; place-items: center; padding: 0; border: 1px dashed var(--border-strong); border-radius: 50%; corner-shape: round; background: transparent; color: var(--text-secondary); cursor: pointer;
   transition: color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
 }
 .add:active { transform: scale(.92); }
-.swatchList { display: flex; min-width: 0; flex: 1; gap: 6px; }
+.swatchList { display: flex; min-width: 0; flex: 1; gap: var(--space-related); }
 .swatchSlot { position: relative; flex: none; touch-action: pan-y; }
 .swatch { display: grid; width: 30px; height: 30px; place-items: center; padding: 0; border: 0; border-radius: 50%; corner-shape: round; background: transparent; cursor: pointer; }
 .swatchChip { width: 26px; height: 26px; transition: scale var(--duration-spring) var(--ease-spring); }

package/components/combobox/combobox.js

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

package/components/combobox/combobox.module.css

@@ -15,11 +15,11 @@
 @media (hover: hover) and (pointer: fine) { .clear:hover { background: var(--surface-muted); color: var(--foreground); } }
 .clear:focus-visible { --focus-outline-offset: 1px; }
 .hint { color: var(--text-muted); font-size: var(--text-xs); }
-.popover { position: absolute; z-index: 80; top: calc(100% + 8px); right: 0; left: 0; overflow: hidden; transform-origin: top center; border: 1px solid var(--border); border-radius: var(--radius-container); padding: 5px; background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); will-change: transform, opacity; }
+.popover { position: absolute; z-index: var(--layer-dropdown); top: calc(100% + var(--space-related)); right: 0; left: 0; overflow: hidden; transform-origin: top center; border: 1px solid var(--border); border-radius: var(--radius-container); padding: var(--space-tight); background: var(--surface-raised); color: var(--foreground); box-shadow: var(--shadow-floating); will-change: transform, opacity; }
 .autoHeight { overflow: hidden; }
 .listbox { max-height: min(300px, 40vh); overflow-y: auto; overscroll-behavior: contain; }
 /* Arrow keys move the highlight often, so it changes almost instantly. */
-.option { display: flex; min-height: 36px; align-items: center; justify-content: space-between; gap: var(--space-group); border-radius: calc(var(--radius-container) - 5px); padding: 0 12px; color: var(--foreground); font-size: var(--text-sm); cursor: pointer; outline: none; user-select: none; transition: background-color 80ms var(--ease-standard), color 80ms var(--ease-standard); }
+.option { display: flex; min-height: 36px; align-items: center; justify-content: space-between; gap: var(--space-group); border-radius: calc(var(--radius-container) - var(--space-tight)); padding: 0 var(--space-group); color: var(--foreground); font-size: var(--text-sm); cursor: pointer; outline: none; user-select: none; transition: background-color 80ms var(--ease-standard), color 80ms var(--ease-standard); }
 .option > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .option[data-active="true"] { background: var(--surface-muted); }
 .option[data-disabled="true"] { opacity: .42; cursor: not-allowed; }

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

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