@kolkrabbi/kol-shell 0.29.0 → 0.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "private": false,
   "description": "KOL application shell — fixed 48px NavRail + AppShell layout root, PageShell/PageHeader scaffolds, ContentFilters catalog organism, GridCard, SettingsScaffold, WalkthroughPanel, ShortcutsOverlay. App chrome (kol-framework owns site chrome). Nav items, content, shortcuts and settings are consumer-injected. Sits above @kolkrabbi/kol-{theme,component,framework}.",
   "license": "MIT",
@@ -20,7 +20,7 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.138.0",
+    "@kolkrabbi/kol-component": "^0.142.0",
     "@kolkrabbi/kol-icons": "^0.25.0",
     "@kolkrabbi/kol-framework": "^0.35.0",
     "@kolkrabbi/kol-theme": "^0.111.0"

package/src/NavRail.jsx

@@ -2,6 +2,11 @@ import { useEffect, useRef, useState } from 'react'
 import gsap from 'gsap'
 import { Button } from '@kolkrabbi/kol-component'
 import { GRAB } from '@kolkrabbi/kol-component/utilities/motion'
+/* the grab pill's proximity wake, travel and dwell — ONE implementation, shared
+ * with kol-framework's useDragResize (OneGrabGestureBothRails, kol-fxr
+ * 2026-08-30: two rails on one screen felt different because each package had
+ * built the gesture itself). It lived here until then. */
+import { useGrabEdge } from '@kolkrabbi/kol-component'
 import { Icon } from '@kolkrabbi/kol-icons'
 import Logomark from './Logomark.jsx'
 
@@ -83,36 +88,6 @@ const openWidth = () => {
  * lands on you, holds while you move inside the radius, then travels to where you
  * are now — inside `GRAB.range`, the middle band of the edge, so it never rides
  * up beside the logomark. One window listener, rAF-throttled. */
-function useGrabEdge(ref) {
-  useEffect(() => {
-    let raf = 0
-    const onMove = ({ clientX, clientY }) => {
-      if (raf) return
-      raf = requestAnimationFrame(() => {
-        raf = 0
-        const h = ref.current
-        if (!h) return
-        const r = h.getBoundingClientRect()
-        const dist = Math.abs(clientX - (r.left + r.width / 2))
-        const near = dist <= GRAB.near || (h.classList.contains('is-near') && dist <= GRAB.sleep)
-        h.classList.toggle('is-near', near)
-        if (!near) return
-        /* the travel band: bipolar from the middle, GRAB.range of the height */
-        const edge = (r.height * (1 - GRAB.range)) / 2
-        const along = Math.min(Math.max(clientY - r.top, edge), r.height - edge)
-        if (h.dataset.grabSeeded && Math.abs(along - Number(h.dataset.grabTarget)) < GRAB.stick) return
-        h.dataset.grabTarget = String(along)
-        const vars = { '--kol-rail-grab-y': `${along}px` }
-        /* the CSS fallback is 50%, a percentage — nothing to tween from, so the
-         * first sighting sets and every move after tweens */
-        if (h.dataset.grabSeeded) gsap.to(h, { ...vars, ...GRAB.travel, overwrite: 'auto' })
-        else { gsap.set(h, vars); h.dataset.grabSeeded = '1' }
-      })
-    }
-    window.addEventListener('pointermove', onMove)
-    return () => { window.removeEventListener('pointermove', onMove); cancelAnimationFrame(raf) }
-  }, [ref])
-}
 
 /* THE DRAG — hold the pill and the width follows the pointer between closed and
  * open; release snaps to the nearer state, a click (no travel past GRAB.slop)