@kolkrabbi/kol-component 0.124.0 → 0.126.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.124.0",
+  "version": "0.126.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/molecules/Dropdown.jsx

@@ -61,6 +61,19 @@ const Dropdown = ({
    * Both write variables on the panel that `.kol-dd-list` reads. */
   maxRows = 10,
   rowHeight,
+  /* `onOptionHover(value | null)` (DropdownOptionHoverPreview, kol-mirror
+   * 2026-08-28): the pointer entering a row reports its value, leaving reports
+   * `null` — so a picker over a VISUAL setting can preview the hovered option
+   * live and revert on leave. mirror's blend-mode picker applies the hovered
+   * mode to the composite: you scrub 16 modes against the actual image instead
+   * of committing to each one to look at it. The same case is every picker over
+   * easing curves, palettes, filters, fonts — the DS owns the panel, only the
+   * consumer knows what to preview, so this reports and nothing else.
+   *
+   * `null` fires ON CLOSE too, and that half is load-bearing: a panel dismissed
+   * while a row is hovered would otherwise leave the consumer previewing
+   * forever. It never fires while closed — a closed dropdown has no rows. */
+  onOptionHover,
   defaultOpen = false,
   className = ''
 }) => {
@@ -96,6 +109,21 @@ const Dropdown = ({
     setIsOpen(false)
   }
 
+  /* the hover report, and the close that ends it. `hovered` is a ref, not
+   * state — the preview is the consumer's business and re-rendering the panel
+   * on every row crossed would be a render per pointermove for nothing. */
+  const hovered = useRef(null)
+  const reportHover = (v) => {
+    if (hovered.current === v) return
+    hovered.current = v
+    onOptionHover?.(v)
+  }
+  useEffect(() => {
+    if (isOpen || hovered.current == null) return
+    hovered.current = null
+    onOptionHover?.(null)
+  }, [isOpen]) // eslint-disable-line react-hooks/exhaustive-deps
+
   const currentOption = options.find((opt) => opt.value === value) || options[0]
 
   /* A clamped list (Popover caps the panel to the viewport) can open with the
@@ -174,6 +202,8 @@ const Dropdown = ({
                  * brighten. The check mark is what marks the current value. */
                 hover={false}
                 height={rowHeight}
+                onPointerEnter={onOptionHover ? () => reportHover(option.value) : undefined}
+                onPointerLeave={onOptionHover ? () => reportHover(null) : undefined}
                 onClick={() => handleSelect(option)}
                 shortcut={isActive ? <Icon name="check" size={11} /> : undefined}
               >

package/src/molecules/MenuItem.jsx

@@ -99,12 +99,14 @@ export function MenuItem({
  *   - children  — main label, flex-1.
  *   - shortcut  — trailing content (text shortcut hint, ✓ marker, or icon).
  */
-export function MenuDropdownItem({ onClick, disabled, prefix, iconLeft, shortcut, hover = true, height, children }) {
+export function MenuDropdownItem({ onClick, onPointerEnter, onPointerLeave, disabled, prefix, iconLeft, shortcut, hover = true, height, children }) {
   return (
     <button
       type="button"
       data-menu-item
       onClick={onClick}
+      onPointerEnter={onPointerEnter}
+      onPointerLeave={onPointerLeave}
       disabled={disabled}
       role="menuitem"
       style={height != null ? { height } : undefined}

package/src/utilities/motion.js

@@ -46,20 +46,32 @@ export const SPRING = {
  *   near / sleep  the pill wakes within 20px of the line and sleeps only past
  *                 40 — hovering the line itself flapped the class every frame
  *                 and restarted the fade, so the hysteresis is not optional
- *   marks         it rests on 20/40/60/80 % of the rail's height and is STICKY:
- *                 it leaves a mark only within `stick` of the pitch to another
- *                 (user: "following the mouse a little too much"). The middle
- *                 of each gap is dead on purpose
- *   travel        a long chase, so the pill trails the pointer and catches up
+ *   stick         DWELL, not a grid (user ruling 2026-08-28: "I don't like the
+ *                 snapping of the grabber, it's too far — let's make it come to
+ *                 the cursor but have some sticky time where it lands, so it's
+ *                 not constantly jerking"). The pill targets the pointer's own
+ *                 position on the line and re-targets only once the pointer is
+ *                 `stick` px away: it lands ON you, holds while you move inside
+ *                 the radius, then travels to where you are now.
+ *
+ *                 It was four marks at 20/40/60/80 % of the edge until this
+ *                 ruling — on a ~900px rail that is ~180px apart, so every
+ *                 re-target was a long throw to a point the pointer was not at,
+ *                 and the dwell read as the pill refusing to come to you and
+ *                 then lurching. The earlier "snap to something so it has
+ *                 somewhere to stick to" is served by dwell; the grid was the
+ *                 wrong model for it.
+ *   travel        the chase. 1.1s, down from 2.8 with the grid: the throw now
+ *                 covers a fraction of the distance, and a long tween over a
+ *                 short throw reads as lag rather than weight
  *   snap          the width tween on release
  *   slop          under this, a pointerdown/up is a CLICK, not a drag
  */
 export const GRAB = {
   near: 20,
   sleep: 40,
-  marks: [0.2, 0.4, 0.6, 0.8],
-  stick: 0.2 * 0.3,
-  travel: { duration: 2.8, ease: EASE.outGsap },
+  stick: 90,
+  travel: { duration: 1.1, ease: EASE.outGsap },
   snap: { duration: 0.5, ease: EASE.outGsap },
   slop: 3,
 }