@kolkrabbi/kol-framework 0.31.0 → 0.32.0

package/kol-framework.css

@@ -43,7 +43,16 @@ body {
   /* 16rem — the rail width, one number (2026-07-31). It read 260 while every
      grid track that had to line up with it read 256, so the shell header's
      brand block sat 4 off the sidebar column it exists to align to. */
-  --kol-sidenav-w: 16rem;
+  --kol-sidenav-w: 264px;
+  /* A LADDER, not one number (SideNavWidthLadder, kol-website 2026-08-28 —
+     user ruling on the brand book: 320 desktop · 264 laptop · collapsed
+     tablet · hamburger mobile; the footer wordmark truncated at 16rem on a
+     desktop). 264 here, 320 from 1536 (Tailwind's `2xl`, the site's desktop
+     rung — the framework carries no named desktop breakpoint) in the media
+     rule below the grid; ≤1024 and <768 were already the collapse and the
+     drawer. useDragResize snaps to whichever rung the window is on; a stored
+     drag still wins on load. Anything that must line up with the rail reads
+     this token — a literal 256 is now wrong at every width. */
   /* Grab-edge gesture (lobby: SideNavGrabResize, 2026-08-09). Minted HERE —
      no --kol-* token carried these before (checked: only -w, -w-collapsed,
      -dot-left shipped). kol-mirror carried them as bare literals, the
@@ -253,6 +262,9 @@ body {
  * (useDragResize stamps the attribute for the drag's duration). */
 :root[data-sidenav-dragging] .kol-brand-layout { transition: none; }
 
+/* the desktop rung of the ladder (SideNavWidthLadder) */
+@media (min-width: 1536px) { :root { --kol-sidenav-w: 320px; } }
+
 /* ───── Brand doc layout (sidebar + content) ─────
    The grid lives in CSS for its dynamic --kol-sidenav-w + transition. */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.31.0",
+  "version": "0.32.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",

package/src/SideNav.jsx

@@ -344,16 +344,22 @@ function SideNavInner({
         * THE single collapse/resize control — click toggles, drag resizes,
         * snap-to-default on release, Home/Enter/Space on the keyboard. */}
 
-      <div className="kol-sidenav-scroll flex-1 flex flex-col justify-between overflow-y-auto pt-4 pb-4 [scrollbar-width:thin]">
+      {/* ONLY the tree scrolls (fxr's re-measure, 2026-08-28): the theme slot
+        * and the pinned rows used to sit inside this region, so on a 26-row
+        * collapsed tree they scrolled off below the footer — "pinned" only
+        * held while the tree was shorter than the rail. They are the block
+        * after it now, above the footer, the tree scrolling underneath. */}
+      <div className="kol-sidenav-scroll flex-1 overflow-y-auto pt-4 pb-4 [scrollbar-width:thin]">
         <nav aria-label="Sections">
           <ul className="kol-sidenav-tree flex flex-col gap-[2px]">
             {navTree.map(renderCat)}
           </ul>
         </nav>
+      </div>
 
-        {/* hop-bare carries its own gutter padding; collapsed falls back to
-            `icon` — a full-width label can't sit in the collapsed rail. */}
-        <div>
+      {/* hop-bare carries its own gutter padding; collapsed falls back to
+          `icon` — a full-width label can't sit in the collapsed rail. */}
+      <div className="pb-4">
           {themeToggle && (
             <div className="kol-sidenav-theme-slot flex">
               <ThemeToggle variant={collapsed ? 'icon' : 'hop-bare'} size="md" />
@@ -366,7 +372,6 @@ function SideNavInner({
               <ul className="kol-sidenav-tree flex flex-col gap-[2px]">{bottomItems.map(renderCat)}</ul>
             </nav>
           )}
-        </div>
       </div>
 
       {footer !== false && footer !== null && (