@kolkrabbi/kol-framework 0.10.2 → 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.2",
+  "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/ThemeToggle.jsx

@@ -43,7 +43,8 @@ import { useTheme } from './theme.js'
  * no consumer shifts a pixel; migrate at your own pace:
  *   icon     → button + fill none + label off
  *   hop      → button + fill subtle + fullWidth (old: chrome pinned md)
- *   hop-bare → flush + fullWidth (old: 6/24 padding kept)
+ *   hop-bare → flush + fullWidth. Horizontal pad stays 24px (sidenav gutter);
+ *              vertical pad, type and glyph honour `size` since 2026-07-30.
  *
  * Theme state lives in useTheme (./theme.js); this component is only the
  * glyph-roll UI on top of it.
@@ -145,13 +146,24 @@ export default function ThemeToggle({
   }
   if (variant === 'hop' || variant === 'hop-bare') {
     const bare = variant === 'hop-bare'
+    /* hop-bare HONOURS `size` (user ruling 2026-07-30). It used to hardcode
+     * kol-mono-14 while its glyph still tracked `size`, so size="lg" produced a
+     * 24px glyph beside 14px text — and it took the SOLO glyph ladder despite
+     * carrying a label, against the glyph law in this docstring.
+     *
+     * One container across all three rungs: same bare full-width row, only the
+     * vertical pad, the type and the glyph move (4/6/8 · 12/14/16 · 14/16/18).
+     * The 24px horizontal gutter is FIXED at every size — it aligns the row with
+     * the sidenav's own pl-6, which is the whole reason this alias exists.
+     * `hop` stays pinned to md: its docstring promises old chrome verbatim. */
+    const barePadY = size === 'sm' ? 'py-1' : size === 'lg' ? 'py-2' : 'py-1.5'
     const chromeCls = bare
-      ? 'w-full inline-flex items-center justify-start gap-2 py-1.5 px-6 kol-mono-14 bg-transparent text-emphasis'
+      ? `w-full inline-flex items-center justify-start gap-2 ${barePadY} px-6 ${mono} bg-transparent text-emphasis`
       : 'kol-theme-toggle kol-theme-toggle-subtle kol-btn-md kol-mono-14 w-full justify-start gap-2'
     return (
       <button {...shared} className={`${chromeCls} ${className}`.trim()}>
         <span className="inline-flex items-center justify-center shrink-0" aria-hidden="true">
-          {iconSwap(glyphSolo)}
+          {iconSwap(bare ? glyphWithText : glyphSolo)}
         </span>
         <span className="kol-sidenav-hop-label flex-1 min-w-0 text-left">
           {MODE_LABEL[shown]}

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'