@kolkrabbi/kol-framework 0.10.3 → 0.11.1

package/kol-framework.css

@@ -31,8 +31,21 @@ body {
 
 :root {
   --kol-topnav-h: 0px;
-  --kol-sidenav-w: 260px;
+  /* 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-collapsed: 56px;
+  /* The workshop shell's RIGHT rail. EQUAL TO THE LEFT (user ruling
+     2026-08-01) — the two rails frame the same content and a lopsided frame is
+     a frame nobody drew on purpose; it read 14rem against the left's 16rem.
+     Kept as its own token rather than aliased: the right rail can be ruled
+     different later without touching the sidenav.
+     The track is RESERVED whether or not the rail has anything in it — a rail
+     that vanishes on a heading-less page re-flows main, so the same shell
+     renders at two widths. Distinct from --kol-toc-w further down, which is
+     the BRAND layout's rail: same concept, two shells, two numbers. */
+  --kol-shell-toc-w: 16rem;
   --kol-container-max: 100%;
 
   /* Opacity tokens (--kol-fg-*) + text-role tokens (--kol-text-*) live in
@@ -44,6 +57,15 @@ body {
      Intentional: site chrome uses browser-ease for a softer feel. */
   --kol-t-btn: background 200ms ease, color 200ms ease, border-color 200ms ease;
 
+  /* Shell CHROME inset (2026-07-31, user ruling: "24, it's what lives in
+     kolkrabbi") — a separate concern from the page ladder below, and
+     deliberately tighter: chrome is not page content. The shell header and the
+     shell content frame both read this, so they cannot disagree; before it,
+     the header carried bare Tailwind steps and the frame carried the page ramp.
+     FLAT, not stepped — one value at every width, on the user's word.
+     Do NOT reach for this on page containers — that is --kol-pad-section-x. */
+  --kol-pad-chrome-x: var(--kol-spacing-6);
+
   /* Stepped page / section / band padding tokens.
      Used by chrome (topnav, sidenav) and landing bands. Scaled at 768 / 1024
      breakpoints so one set of rules covers mobile → desktop without clamp(). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.10.3",
+  "version": "0.11.1",
   "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",
@@ -27,7 +27,7 @@
     "app-shell"
   ],
   "dependencies": {
-    "@kolkrabbi/kol-component": "0.15.1",
+    "@kolkrabbi/kol-component": "0.19.0",
     "@kolkrabbi/kol-icons": "0.8.11"
   },
   "peerDependencies": {

package/src/AppShell.jsx

@@ -53,7 +53,7 @@ export default function AppShell({ navTree = [], getActivePage, header, footer,
             </button>
 
             <div
-              className="kol-sidenav-backdrop fixed inset-0 z-20 bg-black/50 opacity-0 pointer-events-none transition-opacity duration-200 md:hidden"
+              className="kol-sidenav-backdrop fixed inset-0 z-20 kol-overlay-scrim opacity-0 pointer-events-none transition-opacity duration-200 md:hidden"
               onClick={() => setDrawerOpen(false)}
               aria-hidden="true"
             />

package/src/ShellHeader.jsx

@@ -42,6 +42,13 @@ import ThemeToggle from './ThemeToggle.jsx'
  * @param {string}    className      extra classes on the outer bar
  */
 
+/* ONE header-action glyph size (user 2026-08-01: "icon in navbar is small and
+ * wrong"). The row mixed sizes: the ThemeToggle draws its solo glyph at 24 on
+ * the `lg` rung while search, GitHub and the hamburger sat at 18 — four
+ * controls, two scales, in a row eight inches wide. Named once here so a new
+ * control cannot pick its own. */
+export const HEADER_ICON = 24
+
 const iconBtnCls =
   'flex h-9 w-9 items-center justify-center rounded p-0 bg-transparent border-0 cursor-pointer transition-colors hover:bg-fg-08 hover:text-emphasis'
 
@@ -66,7 +73,11 @@ export default function ShellHeader({
     <header className={`kol-shell-header sticky top-0 z-50 shrink-0 bg-surface-primary ${className}`.trim()}>
       {/* Row 1: brand block + controls */}
       <div className="border-b border-fg-08">
-        <div className="w-full px-4 py-4 md:px-5 lg:px-6">
+        {/* Chrome inset from --kol-pad-chrome-x, not Tailwind steps
+          * (2026-07-31): the header sat on its own improvised steps while the
+          * shell content frame sat on the page ramp, so the sidebar hung right
+          * of the wordmark above it. One token, both surfaces. */}
+        <div className="w-full py-4" style={{ paddingInline: 'var(--kol-pad-chrome-x)' }}>
           <div className="flex items-center justify-between">
             {/* kol-shell-header-brand reserves the nav-column width at lg+ so
              * the Row-2 tabs align to the shell grid. */}
@@ -93,7 +104,7 @@ export default function ShellHeader({
                     onClick={onMenuClick}
                     aria-label="Open navigation menu"
                   >
-                    <Icon name="hamburger" size={18} />
+                    <Icon name="hamburger" size={HEADER_ICON} />
                   </button>
                 </Tooltip>
               )}
@@ -105,7 +116,7 @@ export default function ShellHeader({
       {/* Row 2: section tabs + inline search + rail toggles */}
       {hasTabRow && (
         <div className="border-b border-fg-08">
-          <div className="w-full px-4 md:px-5 lg:px-6">
+          <div className="w-full" style={{ paddingInline: 'var(--kol-pad-chrome-x)' }}>
             <div className="kol-shell-header-tabs">
               <nav className="flex flex-1 gap-6" aria-label="Sections">
                 {nav.map((item) => {

package/src/index.js

@@ -10,7 +10,7 @@
 export { default as AppShell } from './AppShell.jsx'
 export { ShellTocContext, ShellTocCollapsedContext } from './AppShell.jsx'
 export { default as SideNav } from './SideNav.jsx'
-export { default as ShellHeader } from './ShellHeader.jsx'
+export { default as ShellHeader, HEADER_ICON } from './ShellHeader.jsx'
 export { default as ThemeToggle } from './ThemeToggle.jsx'
 export { useTheme, applyTheme, getInitialTheme, THEME_STORAGE_KEY } from './theme.js'
 export { default as Layout } from './Layout.jsx'