@kolkrabbi/kol-framework 0.53.0 → 0.55.0

package/kol-framework.css

@@ -160,7 +160,20 @@ body {
   gap: 0.75rem;
   width: 100%;
   position: relative;
-  padding: 0.5rem 2.5rem 0.5rem 1.5rem;
+  /* the gutter is THE CHROME INSET (`--kol-pad-chrome-x`, 05-layout-systems: 20 on a phone, 24 from 768) — the rail
+   * carried a literal 1.5rem of its own until 2026-10-24, right on the desk and wrong in the phone drawer */
+  padding: 0.5rem 2.5rem 0.5rem var(--kol-pad-chrome-x);
+  /* THE CLIP MODEL (user 2026-10-24: "some shifting and not very smooth animation between collapsed and
+   * expanded"): the collapsed row is the same row with its padding and gap eased on the grid's own 180ms
+   * clock, the label fading under the rail's edge — not a second layout that snaps in while the column is
+   * still moving. The glyph slides from the gutter to the narrow column's centre; nothing jumps. */
+  white-space: nowrap;
+  overflow: hidden;
+  transition: padding 180ms ease, gap 180ms ease;
+}
+.kol-sidenav-hop-label {
+  overflow: hidden;
+  transition: opacity 120ms ease;
 }
 /* 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
@@ -175,14 +188,25 @@ body {
   align-items: center;
   gap: 0.75rem;
   width: 100%;
-  padding: 1rem 2.5rem 0 1.5rem;
+  padding: 1rem 2.5rem 0 var(--kol-pad-chrome-x);
+  white-space: nowrap;
+  overflow: hidden;
+  transition: padding 180ms ease, gap 180ms ease;
 }
 /* the caret rides a PLAIN span (Icon stamps inline-flex on its own element,
  * which would outrank the collapsed display:none) */
+/* the caret's box lives HERE, not as a utility on the element (2026-10-24: the foldernote's caret is a <button>, and
+ * an `inline-flex` utility on it outranked the collapsed rule's display:none, so the chevron showed on the narrow
+ * rail) — a 12px line box for the span and the button alike */
 .kol-sidenav-hop-caret {
   position: absolute;
   top: 0.75rem;
   right: 0.75rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  transition: transform 150ms ease, opacity 120ms ease, visibility 0s linear 120ms;
 }
 .kol-sidenav-list {
   display: flex;
@@ -194,11 +218,13 @@ body {
  * 2026-08-26): a non-routing label sitting where a leaf sits, its rows one
  * step further in. Type and color ride the element as utilities
  * (kol-helper-10; text-subtle, text-emphasis when a leaf beneath it is the
- * route); the box lives here. No text-transform — the retired fork's
- * `uppercase` does not return (type law: only the display voice carries one). */
+ * route); the box lives here. The `uppercase` rides the element as a utility
+ * too (user ruling 2026-10-24 on the another-creation reference, reversing the
+ * 2026-08-26 line that kept it out). */
 .kol-sidenav-group {
   display: block;
-  padding: 0.25rem 1.5rem 0.25rem 3.5rem;
+  /* one step in from the gutter: the inset + the icon column (20) + the gap (12) */
+  padding: 0.25rem var(--kol-pad-chrome-x) 0.25rem calc(var(--kol-pad-chrome-x) + 2rem);
 }
 /* THE COLLAPSE RULE (WorkspaceSidebarGeometry, kol-fxr 2026-08-27 — user: "I
  * would rather all use the same geometry layout"): a row that can survive
@@ -208,9 +234,9 @@ body {
  * thing narrowing (the brand sidebar's model) instead of rows vanishing. */
 .kol-sidenav-section {
   display: block;
-  padding: 0.5rem 1.5rem 0.25rem 1.5rem;
+  padding: 0.5rem var(--kol-pad-chrome-x) 0.25rem var(--kol-pad-chrome-x);
 }
-.kol-sidenav-footer { padding-inline: 1.5rem 1rem; }
+.kol-sidenav-footer { padding-inline: var(--kol-pad-chrome-x) 1rem; }
 
 /* The aside's OWN box (SideNavMobilePosition, kol-website 2026-08-25) — the
  * hop's law above, one element up. `sticky top-0 self-start h-dvh flex
@@ -238,9 +264,11 @@ body {
  * rail — one look, two triggers. */
 :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; }
+/* the narrow row is the wide row with its gutter eased to the column's centre — (56 − 20) / 2 — and its label
+ * faded, so the toggle animates as one motion (the clip model, above) */
+:root[data-sidenav="collapsed"] .kol-sidenav-hop { padding: var(--kol-spacing-2) 0 var(--kol-spacing-2) calc((var(--kol-sidenav-w-collapsed) - 1.25rem) / 2); gap: 0; }
+:root[data-sidenav="collapsed"] .kol-sidenav-header { padding: 1rem 0 0 calc((var(--kol-sidenav-w-collapsed) - 1.25rem) / 2); gap: 0; }
+:root[data-sidenav="collapsed"] .kol-sidenav-hop-label { opacity: 0; }
 :root[data-sidenav="collapsed"] .kol-sidenav-body { display: none; }
 :root[data-sidenav="collapsed"] .kol-sidenav-hop-count,
 :root[data-sidenav="collapsed"] .kol-sidenav-section-toggle { display: none; }
@@ -248,9 +276,12 @@ body {
  * port): the disclosure caret and the disclosed list are noise in a rail with
  * no labels; the theme slot and footer centre; the footer wordmark swaps for
  * its initial — both spans live in one <a>, so the link survives either state. */
-:root[data-sidenav="collapsed"] .kol-sidenav-hop-caret,
+:root[data-sidenav="collapsed"] .kol-sidenav-hop-caret { opacity: 0; visibility: hidden; pointer-events: none; }
 :root[data-sidenav="collapsed"] .kol-sidenav-section,
 :root[data-sidenav="collapsed"] .kol-sidenav-list { display: none; }
+@media (prefers-reduced-motion: reduce) {
+  .kol-brand-layout, .kol-sidenav-hop, .kol-sidenav-header, .kol-sidenav-hop-label, .kol-sidenav-hop-caret { transition: none; }
+}
 :root[data-sidenav="collapsed"] .kol-sidenav-theme-slot { padding-inline: 0; justify-content: center; }
 :root[data-sidenav="collapsed"] .kol-sidenav-footer { padding-inline: 0; justify-content: center; }
 .kol-sidenav-footer-mark { display: none; }
@@ -322,28 +353,29 @@ body {
 }
 
 @media (max-width: 767px) {
-  /* Mobile drawer mode: hide the sidebar from the layout grid entirely.
-     SideNav repositions as a fixed slide-in panel triggered by the hamburger
-     in BrandLayout. Backdrop is the sibling .kol-sidenav-backdrop. */
+  /* THE PHONE MODE IS THE APP RAIL'S DRAWER (user 2026-10-24): the rail leaves the grid and slides in from
+     the left on the shell's curve; SiteLayout stamps `data-rail-drawer` on the root and renders the shell's
+     trigger (`.kol-shell-drawer-trigger`, top-right, hamburger/×) and scrim (`.kol-shell-drawer-scrim`) —
+     both kol-theme's, shared with AppShell. The round top-left hamburger and the opacity backdrop are in
+     `_tmp/2026-10-24-site-drawer/`. */
   .kol-brand-layout { grid-template-columns: minmax(0, 1fr); }
   .kol-sidenav {
     position: fixed;
     inset: 0 auto 0 0;
     width: min(80vw, 280px);
     transform: translateX(-100%);
-    transition: transform 220ms ease;
+    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1);
   }
   .kol-sidenav.is-drawer-open { transform: translateX(0); }
+  @media (prefers-reduced-motion: reduce) { .kol-sidenav { transition: none; } }
   /* 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; }
+  /* the open drawer's row is the WIDE row — the gutter at 1.5rem as on the desk (user 2026-10-24: "mobile is missing
+     padding left?"; this line restored `padding: 8px 0`, the narrow row's zero gutter, so the rows hugged the edge) */
+  .kol-sidenav.is-drawer-open .kol-sidenav-hop { padding: 0.5rem 2.5rem 0.5rem var(--kol-pad-chrome-x); justify-content: flex-start; gap: 0.75rem; }
+  .kol-sidenav.is-drawer-open .kol-sidenav-header { padding: 1rem 2.5rem 0 var(--kol-pad-chrome-x); justify-content: flex-start; gap: 0.75rem; }
   .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; }
-  .kol-brand-layout[data-drawer-open="true"] .kol-sidenav-backdrop {
-    opacity: 1;
-    pointer-events: auto;
-  }
 }
 
 /* SideNav primitives (.kol-sidenav-hop, -hop-icon, -hop-label, -link,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.53.0",
+  "version": "0.55.0",
   "description": "Site shell and page layout",
   "license": "MIT",
   "type": "module",
@@ -14,16 +14,16 @@
     "./kol-brand-color.css": "./kol-brand-color.css"
   },
   "peerDependencies": {
-    "@kolkrabbi/kol-component": ">=0.283.0",
+    "@kolkrabbi/kol-component": ">=0.298.0",
     "@kolkrabbi/kol-icons": ">=0.18.0",
-    "@kolkrabbi/kol-theme": ">=0.179.0",
+    "@kolkrabbi/kol-theme": ">=0.186.0",
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0",
     "react-router-dom": "^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.284.0",
-    "@kolkrabbi/kol-icons": "^0.41.0"
+    "@kolkrabbi/kol-component": "^0.301.0",
+    "@kolkrabbi/kol-icons": "^0.45.0"
   },
   "files": [
     "src",

package/src/CategoryPage.jsx

@@ -0,0 +1,45 @@
+import { useNavigate } from 'react-router-dom'
+import { ContentCard, ContentCollection } from '@kolkrabbi/kol-component'
+import PageHero from './PageHero.jsx'
+
+/**
+ * CategoryPage — A category's overview, from the nav tree. the FOLDERNOTE: the page a rail category opens
+ * on — its label and lede over its pages as cards — read from the same tree the rail reads, so nothing is
+ * listed by hand and a page added to the rail is on the overview the same moment (site-hub W4, user
+ * 2026-10-24: kol-branding's three categories each hand-wrote this page).
+ *
+ * The tree is `SideNav`'s: `{ id, label, icon, lede?, pages: [{ to, label, card? }] }`. A page with a `card`
+ * is on the overview — `{ eyebrow, body, media, meta }`, the article card's fields (`media` a node or an
+ * image src); a page without one (the overview's own row, a plain link) is not. The card opens its page.
+ *
+ * @param {Array}  navTree   the sidenav's tree
+ * @param {string} id        the category's id
+ * @param {string} [min]     the collection's column minimum (ContentCollection `min`, default 280px)
+ * @param {string} [ratio]   the card media's ratio (default 16 / 9)
+ */
+export default function CategoryPage({ navTree = [], id, min = '280px', ratio = '16 / 9' }) {
+  const navigate = useNavigate()
+  const cat = navTree.find((c) => c.id === id)
+  if (!cat) return null
+  const pages = (cat.pages ?? []).filter((p) => p.card)
+  return (
+    <div className="kol-page flex flex-col gap-10">
+      <PageHero label={cat.eyebrow} title={cat.label} lede={cat.lede} />
+      <ContentCollection min={min}>
+        {pages.map((p) => (
+          <ContentCard
+            key={p.to}
+            variant="article"
+            ratio={ratio}
+            media={typeof p.card.media === 'string' ? <img src={p.card.media} alt="" className="size-full object-cover" /> : p.card.media}
+            eyebrow={p.card.eyebrow}
+            title={p.label}
+            body={p.card.body}
+            date={p.card.meta}
+            onClick={() => navigate(p.to)}
+          />
+        ))}
+      </ContentCollection>
+    </div>
+  )
+}

package/src/PageSection.jsx

@@ -1,7 +1,7 @@
 import { Divider, SectionText } from '@kolkrabbi/kol-component'
 
 /* The chapter section of the brand-book page kit — `PageHero` · `PageSection`
- * · `PageLayout`. Its head COMPOSES `SectionText` (page-family-is-not-a-set,
+ * · `SiteLayout`. Its head COMPOSES `SectionText` (page-family-is-not-a-set,
  * 2026-09-03) instead of hand-stacking label / title / lede: the voices are the
  * same `.kol-prose-*` trio as before, passed as the base's seams, and each class
  * carries its own bottom margin, so the block's gap is 0 and nothing moved. */

package/src/SideNav.jsx

@@ -3,7 +3,7 @@ import { NavRail } from '@kolkrabbi/kol-component'
 import ThemeToggle from './ThemeToggle'
 
 /**
- * SideNav — `NavRail variant="site"` under its old name (2026-10-22, the one nav rail).
+ * SideNav — The grouped navigation rail. `NavRail variant="site"` under its old name (2026-10-22, the one nav rail).
  *
  * @deprecated — use `NavRail variant="site"` from `@kolkrabbi/kol-component`. This name is on the
  * retirement ledger; it stays so every site keeps resolving.
@@ -40,6 +40,9 @@ function RouterSideNav({ onNavigate, ...props }) {
   )
 }
 
+/* the theme is a TREE ROW (user 2026-10-24, site-hub): `ThemeToggle variant="row"` wears the rail's hop
+ * box and follows the collapse as every row does, so there is no `icon` fallback; collapsed it carries the
+ * toggle's own tooltip, as the rows carry theirs */
 const themeSlot = (on = true) => (on === false ? false : ({ collapsed }) => (
-  <ThemeToggle variant={collapsed ? 'icon' : 'hop-bare'} size="md" />
+  <ThemeToggle variant="row" tooltip={collapsed} />
 ))

package/src/{PageLayout.jsx → SiteLayout.jsx}

@@ -1,8 +1,7 @@
 import { createContext, useEffect, useState } from 'react'
 import { Outlet, useLocation } from 'react-router-dom'
 import SideNav from './SideNav.jsx'
-import { Icon } from '@kolkrabbi/kol-icons'
-import { ModalProvider } from '@kolkrabbi/kol-component'
+import { Button, ModalProvider } from '@kolkrabbi/kol-component'
 
 /* Pages can register right-rail TOC content via this context.
  * Usage: const setTocContent = useContext(ShellTocContext)
@@ -24,11 +23,23 @@ 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 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.
+ * SiteLayout — The site frame. the frame every site on the site rail stands in: the `.kol-brand-layout`
+ * grid with `NavRail variant="site"` (through `SideNav`) in its first track, the page plane in the
+ * second, the phone drawer, the modal provider and the optional TOC rail. A site is this plus a nav
+ * tree and routes — `apps/site-hub` is the reference.
  *
- * WAS `AppShell` (page-family-is-not-a-set, kol-client-olina 2026-09-03). The
+ * WAS `PageLayout` (user 2026-10-24: "why not SiteLayout instead? to at least name it with variant
+ * 'site'") — the frame is named for the rail variant it frames, as `AppShell` is for the app rail.
+ * `PageLayout` stays an alias on the retirements ledger, as `AppShell` already was.
+ *
+ * THE PHONE MODE IS THE APP RAIL'S DRAWER (user 2026-10-24: "I think we should use that hamburger
+ * siderail"): below 768 the rail goes off-canvas and slides in from the left on the shell's 220ms
+ * curve, a 32px nav Button pinned top-right swaps hamburger for × (`.kol-shell-drawer-trigger`,
+ * kol-theme), a scrim BUTTON closes on tap (`.kol-shell-drawer-scrim`; iOS Safari does not bubble
+ * taps from a div), Escape closes, and a tap on a destination closes. The round top-left hamburger
+ * and the opacity backdrop this frame carried are in `_tmp/2026-10-24-site-drawer/`.
+ *
+ * BEFORE THAT it was `AppShell` (page-family-is-not-a-set, kol-client-olina 2026-09-03). The
  * ticket asked for a `PageLayout` to ship beside the fifteen `.kol-brand-layout`
  * rules kol-framework already owned — every consumer `BrandLayout.jsx` in the
  * estate is a copy of this file's markup. The component existed; the name did
@@ -58,8 +69,20 @@ export const ShellTocCollapsedContext = createContext(null)
  * @param {string}    pageWash           the plane's wash, a CSS color (e.g. `'var(--kol-fg-02)'`)
  * @param {boolean}   bare               plane + outlet only (default false)
  */
-export default function PageLayout({ navTree = [], header, footer, defaultTocContent, sideNav, pageWash, bare = false }) {
+const NARROW = '(max-width: 767px)'
+
+export default function SiteLayout({ navTree = [], header, footer, defaultTocContent, sideNav, pageWash, bare = false }) {
   const [drawerOpen, setDrawerOpen] = useState(false)
+  /* DRAWER MODE below 768 — a width query, as AppShell's `drawerBelow`; JS owns the breakpoint and
+   * stamps `data-rail-drawer` on the root, the CSS only paints */
+  const [narrow, setNarrow] = useState(() => typeof window !== 'undefined' && window.matchMedia(NARROW).matches)
+  useEffect(() => {
+    const mq = window.matchMedia(NARROW)
+    const on = () => setNarrow(mq.matches)
+    mq.addEventListener('change', on)
+    return () => mq.removeEventListener('change', on)
+  }, [])
+  useEffect(() => { if (!narrow) setDrawerOpen(false) }, [narrow])
   const [tocContent, setTocContent] = useState(null)
   const [tocCollapsed, setTocCollapsed] = useState(false)
   const { pathname } = useLocation()
@@ -114,25 +137,30 @@ export default function PageLayout({ navTree = [], header, footer, defaultTocCon
              * and the PLANE wears `pageWash` over it (BrandLayout's line,
              * 2026-08-24 → 08-27). */
             className="kol-brand-layout bg-surface-primary min-h-dvh"
-            data-drawer-open={drawerOpen ? 'true' : undefined}
+            data-rail-drawer={narrow ? (drawerOpen ? 'open' : 'closed') : undefined}
             data-toc={showToc ? 'true' : undefined}
           >
-            {/* tip-ok: phone-only (md:hidden) — a hover tip never shows on touch; the aria-label names it */}
-            <button
-              type="button"
-              className="kol-sidenav-hamburger md:hidden fixed top-3 left-3 z-30 w-10 h-10 inline-flex items-center justify-center rounded-full bg-surface-primary border border-fg-08 text-emphasis"
-              aria-label={drawerOpen ? 'Close menu' : 'Open menu'}
-              aria-expanded={drawerOpen}
-              onClick={() => setDrawerOpen((v) => !v)}
-            >
-              <Icon name={drawerOpen ? 'x' : 'hamburger'} size={18} />
-            </button>
-
-            <div
-              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"
-            />
+            {/* THE TRIGGER SHIPS HERE, as the app rail's does in AppShell — hamburger closed, × open; 32px clears the
+              * 24px touch floor; pinned top-right so it never meets the left-hand panel */}
+            {narrow && (
+              <Button
+                variant="nav"
+                iconOnly={drawerOpen ? 'x' : 'hamburger'}
+                aria-label={drawerOpen ? 'Close navigation' : 'Open navigation'}
+                aria-expanded={drawerOpen}
+                className="kol-shell-drawer-trigger"
+                onClick={() => setDrawerOpen((o) => !o)}
+              />
+            )}
+            {narrow && drawerOpen && (
+              /* A BUTTON, not a div: iOS Safari does not bubble tap-clicks from non-interactive elements */
+              <button
+                type="button"
+                aria-label="Close navigation"
+                className="kol-shell-drawer-scrim"
+                onClick={() => setDrawerOpen(false)}
+              />
+            )}
 
             <SideNav navTree={navTree} drawerOpen={drawerOpen} onCloseDrawer={() => setDrawerOpen(false)} {...sideNav} />
             <div className="min-w-0" style={plane}>

package/src/ThemeToggle.jsx

@@ -37,6 +37,14 @@ import { useTheme } from './theme.js'
  *     same prop list minus `fill`; no square pinning (there is no box);
  *     size scales text + glyph only.
  *
+ *   variant "row" — the sidenav's TREE ROW (user 2026-10-24, site-hub: "this theme toggle is not
+ *     the same kind of row item as the rest … just the rolling icon and pair it with a text in the
+ *     same as in the rows"): `.kol-sidenav-hop` with the roll at 16 in the 20px icon column and
+ *     the target's words in `.kol-sidenav-hop-label`, the rows' voice (kol-helper-12). The box is
+ *     the rail's rule, so it collapses as a row does — no `icon` fallback. Takes no size, fill,
+ *     label or width: a row is the rail's geometry, not the toggle's. kol-framework's SideNav
+ *     passes it to the rail's theme slot.
+ *
  * Glyph law: text-adjacent 14/16/18 (stays inside the rung line box);
  * solo 16/20/24 (the pinned-square pairing).
  *
@@ -162,6 +170,25 @@ export default function ThemeToggle({
   const tip = 'Theme'
   const wrap = (node) => (tooltip ? <Tooltip label={tip}>{node}</Tooltip> : node)
 
+  /* ── THE ROW — the rail's tree row verbatim (NavRailSite's `rowCls` + glyph + label; the box lives in
+   * .kol-sidenav-hop, kol-framework.css, never a utility here — the 2026-08-09 defect) ── */
+  if (variant === 'row') {
+    /* the row's tooltip is the RAIL's: to the right, on a block trigger, present in both states and merely
+     * disabled when the labels show (user 2026-10-24: collapsed, the toggle sat half off the rail — the default
+     * inline-flex trigger sized itself to the hidden label and centred wide; and a trigger that came and went
+     * remounted the row on every toggle) */
+    return (
+      <Tooltip label={tip} placement="right" triggerClassName="block w-full" disabled={!tooltip}>
+        <button {...shared} className={`kol-sidenav-hop kol-helper-12 text-emphasis bg-transparent border-0 cursor-pointer text-left ${extra}`.trim()}>
+          <span className="kol-sidenav-hop-icon inline-flex items-center justify-center w-5 h-5 shrink-0" aria-hidden="true">
+            {iconSwap(16)}
+          </span>
+          <span className="kol-sidenav-hop-label flex-1 min-w-0">{MODE_LABEL[next]}</span>
+        </button>
+      </Tooltip>
+    )
+  }
+
   /* ── DEPRECATED aliases — old chrome verbatim (0.6.x) ── */
   if (variant === 'icon') {
     return wrap(

package/src/index.js

@@ -7,8 +7,10 @@
  * and kol-brand-color.css.
  */
 
-export { default as PageLayout, default as AppShell } from './PageLayout.jsx'
-export { ShellTocContext, ShellTocCollapsedContext } from './PageLayout.jsx'
+/* the site frame — `SiteLayout` (2026-10-24, named for the rail variant it frames); `PageLayout` and `AppShell` are
+ * its earlier names, aliases on the retirements ledger */
+export { default as SiteLayout, default as PageLayout, default as AppShell } from './SiteLayout.jsx'
+export { ShellTocContext, ShellTocCollapsedContext } from './SiteLayout.jsx'
 export { default as SideNav } from './SideNav.jsx'
 /* MOVED to kol-component 2026-09-03 (editor-set-is-behind-its-source): its
  * EditorShell needs the same rails and cannot import this package. Re-exported
@@ -24,3 +26,4 @@ export { default as PageSection } from './PageSection.jsx'
 export { default as PortalFooter } from './PortalFooter.jsx'
 export { default as ScrollToTop } from './ScrollToTop.jsx'
 export { default as PageHero, default as BrandHero, default as SubPageHero } from './PageHero.jsx'
+export { default as CategoryPage } from './CategoryPage.jsx'

package/src/theme.js

@@ -63,6 +63,12 @@ export function applyTheme(theme) {
   if (theme === 'system') {
     delete document.documentElement.dataset.theme
     try { localStorage.removeItem(THEME_STORAGE_KEY) } catch { /* storage blocked */ }
+    /* THE APP'S DEFAULT STANDS IN FOR THE OS (AppHubDefaultTheme, kol-mirror 2026-10-24 — user: *"make this repo dark
+     * mode default"*): a dark-first app stamps `data-theme-default="dark"` on the root (the Hub does it from
+     * `defaultTheme`), and handing the page back to the system lands on that, not on prefers-color-scheme — stamped,
+     * never persisted, so the saved choice stays "none" and a reload stamps the same default again. */
+    const fallback = document.documentElement.dataset.themeDefault
+    if (fallback === 'light' || fallback === 'dark') document.documentElement.dataset.theme = fallback
     return
   }
   document.documentElement.dataset.theme = theme