@kolkrabbi/kol-workshop 0.26.0 → 0.28.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-workshop",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "private": false,
   "description": "KOL workshop/docs system — a handrolled markdown engine, search, tag system (incl. a d3 tag graph), docs viewer, and docs shell. Sits above @kolkrabbi/kol-{theme,icons,component,framework}; content is consumer-injected (the package never globs docs).",
   "license": "MIT",
@@ -25,10 +25,10 @@
     "react-router-dom": "^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.150.1",
+    "@kolkrabbi/kol-component": "^0.179.0",
     "@kolkrabbi/kol-icons": "^0.25.0",
-    "@kolkrabbi/kol-theme": "^0.118.0",
-    "@kolkrabbi/kol-framework": "^0.36.0"
+    "@kolkrabbi/kol-framework": "^0.42.0",
+    "@kolkrabbi/kol-theme": "^0.138.0"
   },
   "files": [
     "src",

package/src/shell/ShellLayout.jsx

@@ -2,7 +2,7 @@ import { createContext, useState, useEffect, Suspense } from 'react'
 import { Outlet, Link, useLocation, useNavigate } from 'react-router-dom'
 import { ShellHeader } from '@kolkrabbi/kol-framework'
 import ShellSidebar from './ShellSidebar.jsx'
-import { Button, IconFrame, ShellDrawer, ShellSearchOverlay, Tooltip } from '@kolkrabbi/kol-component'
+import { Button, IconFrame, ShellDrawer, ShellSearchOverlay, Tooltip, CloseButton } from '@kolkrabbi/kol-component'
 import { matchSearchItems } from '../engine/search.js'
 import { useTagMode } from '../tags/TagModeContext.jsx'
 import TagModeOverlay from '../tags/TagModeOverlay.jsx'
@@ -36,6 +36,15 @@ export const ShellContentWidthContext = createContext(null)
 // useLayoutEffect(() => { setTocCollapsed(true) ; return () => setTocCollapsed(false) }, [setTocCollapsed])
 export const ShellTocCollapsedContext = createContext(null)
 
+// THE LEFT RAIL IS THE PAGE'S CALL TOO (2026-09-01). The TOC had this seam and
+// the nav did not, so a landing page could shed one rail and not the other —
+// the showcase home claimed "top nav (no sidebar)" in its docstring and rendered
+// under both. Same shape as the TOC seam: set on mount, restore on unmount, and
+// the header's own toggles keep working on top of it.
+// Usage: const setNavCollapsed = useContext(ShellNavCollapsedContext)
+// useLayoutEffect(() => { setNavCollapsed(true) ; return () => setNavCollapsed(false) }, [setNavCollapsed])
+export const ShellNavCollapsedContext = createContext(null)
+
 /* overflow-x-hidden (2026-07-30): long tree rows (component names + counters)
  * overflowed the 256px rail into an internal horizontal scroll — with the
  * scrollbar hidden it read as content silently walking off, and the pan
@@ -279,6 +288,7 @@ const ShellLayout = ({ routes = [], basePath = '/', brand: brandProp, brandLogoS
       <ShellFullHeightContext.Provider value={setIsFullHeight}>
         <ShellContentWidthContext.Provider value={setContentWidth}>
         <ShellTocCollapsedContext.Provider value={setTocCollapsed}>
+        <ShellNavCollapsedContext.Provider value={setNavCollapsed}>
         <div className="fixed inset-0 flex flex-col bg-surface-primary text-auto">
           <ShellHeader
             brand={brand}
@@ -414,7 +424,9 @@ const ShellLayout = ({ routes = [], basePath = '/', brand: brandProp, brandLogoS
             * for months. */}
           {isShortcutsOpen && (
             <div
-              className="fixed inset-0 z-50 flex items-center justify-center bg-fg-48"
+              /* THE scrim (overlay-scrim-outliers sweep, 2026-09-03): was a hand
+                 `bg-fg-48` — the ink wash, not the class's ab-black 48 */
+              className="fixed inset-0 z-50 flex items-center justify-center kol-overlay-scrim"
               onClick={() => setIsShortcutsOpen(false)}
               role="presentation"
             >
@@ -430,8 +442,10 @@ const ShellLayout = ({ routes = [], basePath = '/', brand: brandProp, brandLogoS
                   style={{ borderBottomColor: 'var(--kol-oq-08)' }}
                 >
                   <span className="kol-doc-eyebrow text-meta">Keyboard shortcuts</span>
-                  <Button variant="outline" quiet size="sm" iconOnly="x"
-                    aria-label="Close" onClick={() => setIsShortcutsOpen(false)} />
+                  {/* was `Button variant="outline" quiet` — the boxed treatment the
+                    * 2026-09-01 one-idiom ruling retired, still shipping here because
+                    * the idiom was a comment rather than a component (2026-09-03) */}
+                  <CloseButton onClick={() => setIsShortcutsOpen(false)} />
                 </div>
                 <ul className="flex flex-col px-4 py-3">
                   {SHORTCUTS.map((s) => (
@@ -452,6 +466,7 @@ const ShellLayout = ({ routes = [], basePath = '/', brand: brandProp, brandLogoS
             </div>
           )}
         </div>
+        </ShellNavCollapsedContext.Provider>
         </ShellTocCollapsedContext.Provider>
         </ShellContentWidthContext.Provider>
       </ShellFullHeightContext.Provider>

package/src/shell/index.js

@@ -7,7 +7,7 @@
  * against.
  */
 export { default as ShellLayout } from './ShellLayout.jsx'
-export { ShellTocContext, ShellFullHeightContext, ShellTocCollapsedContext, ShellContentWidthContext } from './ShellLayout.jsx'
+export { ShellTocContext, ShellFullHeightContext, ShellTocCollapsedContext, ShellNavCollapsedContext, ShellContentWidthContext } from './ShellLayout.jsx'
 export { default as ShellSidebar } from './ShellSidebar.jsx'
 /* RailSection — THE rail ladder. Every rail header at every rung comes from
  * here, in both rails; see the file header for why a class alone was not