@kolkrabbi/kol-workshop 0.31.0 → 0.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-workshop",
-  "version": "0.31.0",
+  "version": "0.32.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",
@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "d3": "^7.9.0",
-    "@kolkrabbi/kol-search": "^0.2.0",
     "@kolkrabbi/kol-brand": "^0.1.3",
-    "@kolkrabbi/kol-markdown": "^0.1.2"
+    "@kolkrabbi/kol-markdown": "^0.1.2",
+    "@kolkrabbi/kol-search": "^0.2.0"
   },
   "peerDependencies": {
     "@kolkrabbi/kol-component": ">=0.228.0",
@@ -28,9 +28,9 @@
   },
   "devDependencies": {
     "@kolkrabbi/kol-component": "^0.230.0",
-    "@kolkrabbi/kol-framework": "^0.46.0",
-    "@kolkrabbi/kol-theme": "^0.157.0",
-    "@kolkrabbi/kol-icons": "^0.29.1"
+    "@kolkrabbi/kol-icons": "^0.30.0",
+    "@kolkrabbi/kol-theme": "^0.158.0",
+    "@kolkrabbi/kol-framework": "^0.47.0"
   },
   "files": [
     "src",

package/src/shell/ShellLayout.jsx

@@ -79,9 +79,39 @@ export const SHELL_SCROLL_ROOT = '#shell-scroll'
  * overflow (`.shell-rail`, kol-components-workshop.css): exactly one region
  * tall, a seam toward the page, the chrome inset inside the seam.
  * overflow-x-hidden (2026-07-30): long tree rows must not scroll sideways. */
-const NavColumn = ({ children }) => (
+/* RESIZABLE RAILS (2026-09-30, the names audit; Round 3 Q3 — decided on the recommendation, the
+ * user asleep, for review). A 6px grab strip on the edge facing the page: drag to set the width
+ * (200–420, remembered), double-click to reset to the shell's 256. The width is the shell's own
+ * token, `--kol-shell-nav-w` / `--kol-shell-toc-w`, set on the shell root, so the grid tracks and
+ * the rail's own box follow it. */
+const RAIL_MIN = 200
+const RAIL_MAX = 420
+const RailGrip = ({ side, width, onChange }) => {
+  const start = (e) => {
+    e.preventDefault()
+    const x0 = e.clientX
+    const w0 = width
+    const move = (m) => onChange(Math.round(Math.min(RAIL_MAX, Math.max(RAIL_MIN, w0 + (side === 'end' ? m.clientX - x0 : x0 - m.clientX)))))
+    const up = () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up) }
+    window.addEventListener('pointermove', move)
+    window.addEventListener('pointerup', up)
+  }
+  return (
+    <div
+      role="separator"
+      aria-orientation="vertical"
+      aria-label="Resize rail"
+      onPointerDown={start}
+      onDoubleClick={() => onChange(null)}
+      className={`absolute top-0 hidden h-full w-1.5 cursor-col-resize hover:bg-oq-08 lg:block ${side === 'end' ? 'right-0' : 'left-0'}`}
+    />
+  )
+}
+
+const NavColumn = ({ children, grip }) => (
   <aside aria-label="Navigation" className="shell-rail shell-rail--nav shell-sidebar-sticky hidden lg:block pt-6 md:pt-6 lg:pt-8 pb-8">
     {children}
+    {grip}
   </aside>
 )
 
@@ -118,8 +148,9 @@ const MainColumn = ({ children, fullHeight, width = 'canvas', padStart, padEnd }
 /* `xl`, not `lg` — the grid only declares a third column at xl (gridCols
  * below). The breakpoint here and the one in gridCols are one decision and
  * must not be stated twice differently. */
-const TocColumn = ({ children }) => (
+const TocColumn = ({ children, grip }) => (
   <aside aria-label="Table of contents" className="shell-rail shell-rail--toc shell-sidebar-sticky hidden xl:block pt-6 md:pt-6 lg:pt-8 pb-8">
+    {grip}
     {/* The width is the grid track (--kol-shell-toc-w). An empty rail still
       * holds its column (user ruling 2026-08-01): a rail that disappears
       * re-flows main and the same page ends up at two widths. */}
@@ -164,6 +195,10 @@ const ShellLayout = ({ routes = [], basePath = '/', brand: brandProp, brandLogoS
   const [prefs, setPrefs] = useState(readSettings)
   const setPref = (key, value) => setPrefs((p) => { const next = { ...p, [key]: value }; writeSettings(next); return next })
   const [navCollapsed, setNavCollapsed] = useState(() => readSettings().navHidden === true)
+  /* rail widths — null = the shell's token; a number is the viewer's own (remembered) */
+  const [navW, setNavW] = useState(() => readSettings().navW ?? null)
+  const [tocW, setTocW] = useState(() => readSettings().tocW ?? null)
+  const setRailW = (key, set) => (w) => { set(w); writeSettings({ ...readSettings(), [key]: w }) }
   const [tocCollapsed, setTocCollapsed] = useState(() => readSettings().tocHidden === true)
   const [isSettingsOpen, setIsSettingsOpen] = useState(false)
   /* ONE QUERY (user ruling 2026-08-01). The palette's text used to live here
@@ -430,13 +465,17 @@ const ShellLayout = ({ routes = [], basePath = '/', brand: brandProp, brandLogoS
         <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">
+        <div
+          className="fixed inset-0 flex flex-col bg-surface-primary text-auto"
+          style={{ ...(navW ? { '--kol-shell-nav-w': `${navW}px` } : {}), ...(tocW ? { '--kol-shell-toc-w': `${tocW}px` } : {}) }}
+        >
           <ShellHeader
             brand={brand}
             nav={navItems}
             isActive={isActive}
             onNavigate={handleNavigate}
             actions={searchTrigger}
+            menuBelowLg
             onMenuClick={() => {
               if (window.matchMedia('(min-width: 1024px)').matches) {
                 /* Both rails to ONE target state — independent `!p` flips made
@@ -464,7 +503,7 @@ const ShellLayout = ({ routes = [], basePath = '/', brand: brandProp, brandLogoS
           >
               <div className={`shell-content-grid grid ${gridCols}`} data-layout={layoutType} style={{ paddingInline: 'var(--kol-pad-chrome-x)' }}>
                   {showNav && (
-                    <NavColumn>
+                    <NavColumn grip={<RailGrip side="end" width={navW ?? 256} onChange={setRailW('navW', setNavW)} />}>
                       {renderSidebar ? renderSidebar({ activeRoute }) : <ShellSidebar routes={routes} basePath={basePath} />}
                     </NavColumn>
                   )}
@@ -482,7 +521,7 @@ const ShellLayout = ({ routes = [], basePath = '/', brand: brandProp, brandLogoS
                     * the grid's third track so main keeps one width across
                     * every route (user ruling 2026-08-01). */}
                   {showToc && (
-                    <TocColumn>
+                    <TocColumn grip={<RailGrip side="start" width={tocW ?? 256} onChange={setRailW('tocW', setTocW)} />}>
                       {effectiveTocContent}
                     </TocColumn>
                   )}