@kolkrabbi/kol-framework 0.47.0 → 0.49.0

package/kol-framework.css

@@ -74,6 +74,17 @@ body {
      which is the BRAND layout's rail. */
   --kol-shell-nav-w: 256px;
   --kol-shell-toc-w: 256px;
+  /* the rails' grab gesture (useDragResize, 2026-09-30) — the same four tokens SideNav's carries;
+     a drag under -snap hides the rail (the shell's own collapse), arrows step, release within
+     -snap-default of 256 lands on it */
+  --kol-shell-nav-snap: 12rem;
+  --kol-shell-nav-step: var(--kol-spacing-4);
+  --kol-shell-nav-snap-default: var(--kol-shell-nav-step);
+  --kol-shell-nav-w-collapsed: 0px;
+  --kol-shell-toc-snap: 12rem;
+  --kol-shell-toc-step: var(--kol-spacing-4);
+  --kol-shell-toc-snap-default: var(--kol-shell-toc-step);
+  --kol-shell-toc-w-collapsed: 0px;
   --kol-container-max: 100%;
 
   /* Opacity tokens (--kol-fg-*) + text-role tokens (--kol-text-*) live in
@@ -90,9 +101,12 @@ body {
      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.
+     ONE STEP (user ruling 2026-10-02, the phone pass): on a phone it is the
+     page ladder's 20, so the header, the frame and a page all stand on one
+     edge — it was 24 at every width, which put a phone page 4px off the
+     ladder. 24 returns at 768, where the 2026-07-31 ruling was made.
      Do NOT reach for this on page containers — that is --kol-pad-section-x. */
-  --kol-pad-chrome-x: var(--kol-spacing-6);
+  --kol-pad-chrome-x: var(--kol-spacing-5);
 
   /* Stepped page / section / band padding tokens.
      Used by chrome (topnav, sidenav) and landing bands. Scaled at 768 / 1024
@@ -106,6 +120,7 @@ body {
 
 @media (min-width: 768px) {
   :root {
+    --kol-pad-chrome-x:  var(--kol-spacing-6);
     --kol-pad-page-x:    32px;
     --kol-pad-page-y:    96px;
     --kol-pad-section-x: 32px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.47.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.",
+  "version": "0.49.0",
+  "description": "Site shell and page layout",
   "license": "MIT",
   "type": "module",
   "main": "./src/index.js",
@@ -21,8 +21,8 @@
     "react-router-dom": "^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-icons": "^0.30.0",
-    "@kolkrabbi/kol-component": "^0.230.0"
+    "@kolkrabbi/kol-component": "^0.239.0",
+    "@kolkrabbi/kol-icons": "^0.33.0"
   },
   "files": [
     "src",

package/src/PageHero.jsx

@@ -2,7 +2,7 @@ import { Link } from 'react-router-dom'
 import { SectionText } from '@kolkrabbi/kol-component'
 
 /**
- * PageHero — the page's opening band: label · title · lede, with an optional
+ * PageHero — A page's opening band. the page's opening band: label · title · lede, with an optional
  * mark beside the text and an optional back link above it.
  *
  * ONE HERO (page-family-is-not-a-set, kol-client-olina 2026-09-03; user, on

package/src/PageLayout.jsx

@@ -24,7 +24,7 @@ export const ShellTocCollapsedContext = createContext(null)
  * (sidenav-rail-hairline, 2026-08-26): `background`, `hairline`, `isActive`,
  * `onNavigate` … the next rail option needs no AppShell release. */
 /**
- * PageLayout — the brand-book page layout: the `.kol-brand-layout` grid with
+ * PageLayout — The brand-book page layout. the brand-book page layout: the `.kol-brand-layout` grid with
  * the sidenav in its first track, the page plane in the second, the mobile
  * drawer + hamburger, the modal provider and the optional TOC rail.
  *

package/src/ThemeToggle.jsx

@@ -3,7 +3,7 @@ import { Tooltip } from '@kolkrabbi/kol-component'
 import { useTheme } from './theme.js'
 
 /**
- * Theme toggle — two-position glyph-roll button (the approved 2-variant spec).
+ * Theme toggle — Switch between light and dark. Two-position glyph-roll button (the approved 2-variant spec).
  *
  * Clicking cycles **light ↔ dark**. `system` is not a position — see the
  * ruling above MODE_LABEL. Alt- or shift-click clears the choice and hands the