@kolkrabbi/kol-framework 0.31.1 → 0.33.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
@@ -137,6 +146,21 @@ body {
   position: relative;
   padding: 0.5rem 2.5rem 0.5rem 1.5rem;
 }
+/* THE HEADER SLOT (RailLogomarkAtTop, kol-fxr 2026-08-28 — user, on the
+ * raven in the footer: "why did you move the logo from top to bottom?"): the
+ * `header` node sits ABOVE the tree, outside the scroll region, in the hop's
+ * own horizontal geometry — its `.kol-sidenav-hop-icon` centres on the icon
+ * column collapsed and left-aligns to it expanded, its `.kol-sidenav-hop-label`
+ * hides with the labels. 1rem above it; the scroll region's own top pad is the
+ * gap to the first row, so the first tree glyph's y is one number in every
+ * consumer that passes the same header. */
+.kol-sidenav-header {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  width: 100%;
+  padding: 1rem 2.5rem 0 1.5rem;
+}
 /* the caret rides a PLAIN span (Icon stamps inline-flex on its own element,
  * which would outrank the collapsed display:none) */
 .kol-sidenav-hop-caret {
@@ -199,6 +223,7 @@ body {
 :root[data-sidenav="collapsed"] .kol-brand-layout { grid-template-columns: var(--kol-sidenav-w-collapsed) minmax(0, 1fr); }
 :root[data-sidenav="collapsed"] .kol-sidenav-hops { padding: 0 0 var(--kol-spacing-4); margin-bottom: var(--kol-spacing-4); }
 :root[data-sidenav="collapsed"] .kol-sidenav-hop { padding: var(--kol-spacing-2) 0; justify-content: center; gap: 0; }
+:root[data-sidenav="collapsed"] .kol-sidenav-header { padding: 1rem 0 0; justify-content: center; gap: 0; }
 :root[data-sidenav="collapsed"] .kol-sidenav-hop-label { display: none; }
 :root[data-sidenav="collapsed"] .kol-sidenav-body { display: none; }
 :root[data-sidenav="collapsed"] .kol-sidenav-hop-count,
@@ -253,6 +278,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. */
 
@@ -269,6 +297,7 @@ body {
   .kol-brand-layout { grid-template-columns: var(--kol-sidenav-w-collapsed) minmax(0, 1fr); }
   .kol-sidenav-hops { padding: 0 0 var(--kol-spacing-4); margin-bottom: var(--kol-spacing-4); }
   .kol-sidenav-hop { padding: var(--kol-spacing-2) 0; justify-content: center; gap: 0; }
+  .kol-sidenav-header { padding: 1rem 0 0; justify-content: center; gap: 0; }
   .kol-sidenav-hop-label { display: none; }
   .kol-sidenav-section { display: none; }
   .kol-sidenav-body { display: none; }
@@ -291,6 +320,7 @@ body {
   .kol-sidenav.is-drawer-open { transform: translateX(0); }
   /* Restore expanded labels + body inside the open drawer (override the rail rules above). */
   .kol-sidenav.is-drawer-open .kol-sidenav-hop { padding: 8px 0; justify-content: flex-start; gap: 12px; }
+  .kol-sidenav.is-drawer-open .kol-sidenav-header { padding: 1rem 2.5rem 0 1.5rem; justify-content: flex-start; gap: 12px; }
   .kol-sidenav.is-drawer-open .kol-sidenav-hop-label { display: inline; }
   .kol-sidenav.is-drawer-open .kol-sidenav-section { display: block; }
   .kol-sidenav.is-drawer-open .kol-sidenav-body { display: block; }

package/package.json

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

@@ -71,6 +71,14 @@ import useDragResize from './useDragResize'
  * pixel (fxr measured 48 vs 56 wide, 20 vs 16px glyphs, 40 vs 38 pitch, first
  * glyph at y 76 vs 26 between the old NavRail and this rail collapsed). The
  * seams the shell needed, all opt-in, a tree with none of them renders as before:
+ *   `header`           a node ABOVE the tree, outside the scroll region, in the
+ *                      hop's geometry (`.kol-sidenav-header`, kol-framework.css)
+ *                      — the app's logomark (RailLogomarkAtTop, 2026-08-28 —
+ *                      user: "why did you move the logo from top to bottom?").
+ *                      Give it a `.kol-sidenav-hop-icon` span (20px mark on the
+ *                      icon column) and, optionally, a `.kol-sidenav-hop-label`;
+ *                      both follow the collapse. Same node in every consumer =
+ *                      the first tree glyph at one y — the parity contract
  *   `bottomItems`      top-level nodes pinned BELOW the theme slot, above the
  *                      footer (the shell pins theme → Settings; a Settings row in
  *                      the tree landed above the theme instead — "same rail, two
@@ -143,6 +151,7 @@ function SideNavInner({
    * name; a rail floating over media and a rail without a line are different
    * choices. */
   hairline = false,
+  header,
   bottomItems = [],
   footer,
   themeToggle = true,
@@ -344,6 +353,8 @@ function SideNavInner({
         * THE single collapse/resize control — click toggles, drag resizes,
         * snap-to-default on release, Home/Enter/Space on the keyboard. */}
 
+      {header && <div className="kol-sidenav-header">{header}</div>}
+
       {/* 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