@kolkrabbi/kol-framework 0.35.0 → 0.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.35.0",
+  "version": "0.37.0",
   "description": "KOL app shell — sidenav, layout, theme toggle, footer, heroes + brand color layer. SideNav takes nav data as props so the tree stays app-local.",
   "license": "MIT",
   "type": "module",
@@ -20,8 +20,8 @@
     "react-router-dom": "^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.120.0",
-    "@kolkrabbi/kol-icons": "^0.24.0"
+    "@kolkrabbi/kol-component": "^0.173.0",
+    "@kolkrabbi/kol-icons": "^0.25.0"
   },
   "files": [
     "src",

package/src/ThemeToggle.jsx

@@ -27,7 +27,7 @@ import { useTheme } from './theme.js'
  *                                    that — a sidebar row is not a button.
  *     iconRight  bool                glyph right of the text (left default)
  *     label      bool                text on/off — off pins the square box
- *                                    per rung (28/32/36; icon-only is a
+ *                                    per size (22/26/32/40; icon-only is a
  *                                    geometry condition, not a variant)
  *     fullWidth  bool                stretches to a sidenav row
  *     size       'sm' | 'md' | 'lg'  moves pad + text + glyph together

package/src/useDragResize.js

@@ -1,4 +1,12 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
+/* THE SAME GRAB AS THE SHELL RAIL (OneGrabGestureBothRails, kol-fxr 2026-08-30 —
+ * user: *"why dont we use the grab animation and other sidenav settings to be
+ * consistent?"*). fxr's /labs shows both rails at once and only the left one
+ * woke as the cursor neared it, because each package had built the gesture
+ * itself. The hook lives in kol-component, the one package both can reach —
+ * kol-shell dropped its framework peer in 0.16.0, so neither could import the
+ * other's. */
+import { useGrabEdge } from '@kolkrabbi/kol-component'
 
 /* Grab-edge resize + collapse for SideNav — THE single control since 0.17.0
  * (user build order 2026-08-09, completing the SideNavGrabResize brief: the
@@ -94,14 +102,44 @@ const readBack = (n) => {
  *   side  — which EDGE the grab handle sits on. 'left' (default) is a rail on
  *           the left of the viewport whose handle is on its right edge, so
  *           rightward drag = wider. 'right' inverts both the pointer sign and
- *           the arrow keys. */
+ *           the arrow keys.
+ *   persistWidth — remember a dragged WIDTH across sessions. **Default false**
+ *           (sidenav-drag-width-outranks-breakpoints, kol-client-olina
+ *           2026-09-03; user: *"why would you want that in persistent memory?
+ *           and even if you did, shouldnt it be an opt in via prop? off by
+ *           default"*).
+ *
+ *           It used to be unconditional, and the width was replayed on boot as
+ *           an INLINE custom property on `:root` — which outranks every
+ *           stylesheet rule, so one drag on a laptop killed both shipped rungs
+ *           (`--kol-sidenav-w: 264px` and the 320px `min-width:1536px` rule)
+ *           permanently, on every machine, with no UI saying so and no selector
+ *           a consumer could beat. Measured at 1600×900: a stored 210 rendered
+ *           210 and the 1536 rung did nothing. A one-off gesture had become a
+ *           permanent global.
+ *
+ *           Off, a drag still works and lasts the session; the rail follows the
+ *           stylesheet and its breakpoints on the next boot. On, the old
+ *           behaviour returns for an app that genuinely wants the rail
+ *           remembered — and it is still an inline stamp, so an app opting in is
+ *           choosing to outrank its own breakpoints. That precedence is worth
+ *           inverting, but it is a bigger change than this ticket asked for.
+ *
+ *           STATE is untouched: collapsed/expanded still persists via
+ *           `stateKey`, unconditionally, as it always did. The ticket says the
+ *           two are separate questions and only asks about the width. */
 export default function useDragResize(ref, options = {}) {
-  const { token = 'kol-sidenav', side = 'left', defaultCollapsed = false } = options
+  const { token = 'kol-sidenav', side = 'left', defaultCollapsed = false, persistWidth = false } = options
   /* -1 on a right-hand rail: the same rightward pointer travel that widens a
    * left rail must NARROW a right one, because its handle faces the canvas. */
   const dir = side === 'right' ? -1 : 1
   const names = useMemo(() => buildNames(token), [token])
 
+  /* the handle's own ref, so the shared gesture can find it. Returned in
+   * `grabProps`, so a consumer already spreading those gets the wake, the
+   * travel and the dwell with no change. */
+  const grabRef = useRef(null)
+  useGrabEdge(grabRef)
   const drag = useRef(null) // { startX, startW, snapPx, maxPx, moved } during a drag
   const defaultPx = useRef(null)
   const collapsedPx = useRef(null)
@@ -114,7 +152,10 @@ export default function useDragResize(ref, options = {}) {
     setWidthPx(w)
     try {
       localStorage.setItem(names.stateKey, c ? 'collapsed' : 'expanded')
-      if (w == null) localStorage.removeItem(names.widthKey)
+      /* width only when asked for; off, the key is not written AND any key a
+       * previous version left behind is cleared, so a consumer that bumps stops
+       * replaying a width it never opted into */
+      if (!persistWidth || w == null) localStorage.removeItem(names.widthKey)
       else localStorage.setItem(names.widthKey, String(Math.round(w)))
     } catch { /* storage blocked */ }
   }
@@ -133,7 +174,9 @@ export default function useDragResize(ref, options = {}) {
     let w = null
     let stored = null
     try {
-      w = parseFloat(localStorage.getItem(names.widthKey)) || null
+      /* off → never read it, and drop a key an earlier version wrote */
+      if (persistWidth) w = parseFloat(localStorage.getItem(names.widthKey)) || null
+      else localStorage.removeItem(names.widthKey)
       stored = localStorage.getItem(names.stateKey)
     } catch { /* storage blocked */ }
     /* nothing stored → the consumer's boot state (RailSideNavPixelParity,
@@ -142,7 +185,7 @@ export default function useDragResize(ref, options = {}) {
     const c = stored ? stored === 'collapsed' : !!defaultCollapsed
     if (w) { writeWidth(names, w); setWidthPx(w) }
     if (c) { stampCollapsed(names, true); setCollapsed(true) }
-  }, [names, defaultCollapsed])
+  }, [names, defaultCollapsed, persistWidth])
 
   useEffect(() => {
     const onMove = (e) => {
@@ -249,6 +292,11 @@ export default function useDragResize(ref, options = {}) {
     collapsed,
     toggleCollapsed,
     grabProps: {
+      ref: grabRef,
+      /* the pill is drawn by `.kol-rail-grab` (kol-animation.css) — the hook
+       * only supplies `is-near` and `--kol-rail-grab-y`. A consumer's own
+       * className, spread after this, still wins. */
+      className: 'kol-rail-grab',
       role: 'separator',
       'aria-orientation': 'vertical',
       'aria-label': 'Resize navigation',