@kolkrabbi/kol-framework 0.32.0 → 0.33.0

package/kol-framework.css

@@ -146,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 {
@@ -208,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,
@@ -281,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; }
@@ -303,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.32.0",
+  "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