@kolkrabbi/kol-framework 0.25.0 → 0.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-framework",
-  "version": "0.25.0",
+  "version": "0.27.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",
@@ -20,8 +20,8 @@
     "react-router-dom": "^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.70.0",
-    "@kolkrabbi/kol-icons": "^0.18.0"
+    "@kolkrabbi/kol-icons": "^0.18.0",
+    "@kolkrabbi/kol-component": "^0.80.0"
   },
   "files": [
     "src",

package/src/AppShell.jsx

@@ -18,7 +18,10 @@ export const ShellTocCollapsedContext = createContext(null)
 /* `getActivePage` — ACCEPTED-but-inert since the 2026-08-09 SideNav port (the
  * two-level elder model derives the active category from the route); kept so
  * no call site breaks. */
-export default function AppShell({ navTree = [], getActivePage: _getActivePage, header, footer, defaultTocContent }) {
+/* `sideNav` — every SideNav prop AppShell does not own, spread onto the rail
+ * (sidenav-rail-hairline, 2026-08-26): `background`, `hairline`, `isActive`,
+ * `onNavigate` … the next rail option needs no AppShell release. */
+export default function AppShell({ navTree = [], getActivePage: _getActivePage, header, footer, defaultTocContent, sideNav }) {
   const [drawerOpen, setDrawerOpen] = useState(false)
   const [tocContent, setTocContent] = useState(null)
   const [tocCollapsed, setTocCollapsed] = useState(false)
@@ -41,7 +44,12 @@ export default function AppShell({ navTree = [], getActivePage: _getActivePage,
       <ShellTocContext.Provider value={setTocContent}>
         <ShellTocCollapsedContext.Provider value={setTocCollapsed}>
           <div
-            className="kol-brand-layout"
+            /* the PAGE is surface-tertiary, the rail surface-primary — the brand
+             * split (appshell-content-surface, kol-studio 2026-08-26, user:
+             * "sidenav primary, site tertiary, like brand"). BrandLayout's own
+             * line, verbatim; the fork dropped it on 2026-08-09 and every
+             * AppShell app rendered one flat colour. */
+            className="kol-brand-layout bg-surface-tertiary min-h-dvh"
             data-drawer-open={drawerOpen ? 'true' : undefined}
             data-toc={showToc ? 'true' : undefined}
           >
@@ -61,7 +69,7 @@ export default function AppShell({ navTree = [], getActivePage: _getActivePage,
               aria-hidden="true"
             />
 
-            <SideNav navTree={navTree} drawerOpen={drawerOpen} onCloseDrawer={() => setDrawerOpen(false)} />
+            <SideNav navTree={navTree} drawerOpen={drawerOpen} onCloseDrawer={() => setDrawerOpen(false)} {...sideNav} />
             <div className="min-w-0">
               {header}
               <Outlet />

package/src/SideNav.jsx

@@ -42,9 +42,11 @@ import useDragResize from './useDragResize'
  * the `kol-sidenav` storage schema, owned by useDragResize. Collapsed rows
  * get a DS Tooltip — the glyph is otherwise the only thing naming them.
  *
- * `background` (2026-08-09, prop): `true` (default) paints the rail surface +
- * right hairline; `false` renders chromeless so the rail can float over a
- * consumer's media (the brand-hero model — the consumer owns the plane).
+ * `background` (2026-08-09, prop): `true` (default) paints the rail surface;
+ * `false` renders chromeless so the rail can float over a consumer's media
+ * (the brand-hero model — the consumer owns the plane). `hairline` (2026-08-26,
+ * default `false`) paints the right-edge `border-r border-fg-08` — split out
+ * of `background` so the line is a choice of its own.
  */
 
 const pageBase =
@@ -78,6 +80,12 @@ export default function SideNav({
   onNavigate,
   isActive,
   background = true,
+  /* the right-edge hairline is OPT-IN (sidenav-rail-hairline, kol-studio
+   * 2026-08-26 — user: the footer's border-t is right, the border-r is wrong
+   * as a default). It used to ride `background` — two decisions under one
+   * name; a rail floating over media and a rail without a line are different
+   * choices. */
+  hairline = false,
 }) {
   const { pathname } = useLocation()
   const isPageActive = (to) => (isActive ? isActive(to) : pathname === to)
@@ -152,7 +160,7 @@ export default function SideNav({
        * (kol-framework.css). `sticky … h-dvh z-20` here outranked the 767px
        * drawer rule's `position: fixed`, so every consumer page opened one
        * viewport down on phones. Only colour utilities ride the element. */
-      className={`kol-sidenav${background ? ' bg-surface-primary border-r border-fg-08' : ''}${collapsed ? ' is-collapsed' : ''}${drawerOpen ? ' is-drawer-open' : ''}`}
+      className={`kol-sidenav${background ? ' bg-surface-primary' : ''}${hairline ? ' border-r border-fg-08' : ''}${collapsed ? ' is-collapsed' : ''}${drawerOpen ? ' is-drawer-open' : ''}`}
     >
       {/* NO chip Button in either state (user build order 2026-08-09 — "MAKE
         * IT"; supersedes the elder A/B): the pill-marked grab edge below is