@kolkrabbi/kol-framework 0.36.0 → 0.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.36.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,7 +20,7 @@
     "react-router-dom": "^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.142.0",
+    "@kolkrabbi/kol-component": "^0.173.0",
     "@kolkrabbi/kol-icons": "^0.25.0"
   },
   "files": [

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

@@ -102,9 +102,34 @@ 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
@@ -127,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 */ }
   }
@@ -146,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,
@@ -155,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) => {