@kolkrabbi/kol-shell 0.60.0 → 0.62.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.60.0",
+  "version": "0.62.0",
   "private": false,
   "description": "The application shell",
   "license": "MIT",
@@ -14,16 +14,16 @@
   "peerDependencies": {
     "@kolkrabbi/kol-component": ">=0.229.0",
     "@kolkrabbi/kol-icons": ">=0.16.0",
-    "@kolkrabbi/kol-theme": ">=0.156.0",
+    "@kolkrabbi/kol-theme": ">=0.165.0",
     "gsap": "^3.13.0",
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.237.0",
-    "@kolkrabbi/kol-icons": "^0.33.0",
-    "@kolkrabbi/kol-framework": "^0.48.0",
-    "@kolkrabbi/kol-theme": "^0.163.0"
+    "@kolkrabbi/kol-component": "^0.240.0",
+    "@kolkrabbi/kol-icons": "^0.33.1",
+    "@kolkrabbi/kol-theme": "^0.166.0",
+    "@kolkrabbi/kol-framework": "^0.49.0"
   },
   "files": [
     "src",

package/src/AppShell.jsx

@@ -42,6 +42,10 @@ import { TABBAR_H, MastheadContext } from '@kolkrabbi/kol-component'
  * open/close is the consumer's `onNavigate` (kol-mirror's model: navigating to
  * `/settings` while already there returns to the last page), and the theme
  * toggle lives on the settings page, not in the rail (user, 2026-08-28).
+ * @param {boolean} [props.railFade=true]  the rail's list fades out at its foot (`NavRail fade`); `false` opts out
+ * @param {'fold'|'enter'} [props.railSections='fold']  how a section row opens: `fold` unfolds it in place (the
+ *                                        accordion), `enter` replaces the list with its rows under a Back row
+ *                                        (`NavRail sections`, 2026-10-06 — labs' catalog)
  * @param {string}  props.railToggleKey  a key that toggles the rail (e.g. '\\') — ignored while typing in a field;
  *                                        the rail comes back on every `currentPath` change (ShellHomeSystem, 2026-08-27)
  * @param {'shell'|'bare'|'overlay'|'drawer'|'bar'} props.touch  the touch-primary policy (default 'shell' = the rail regardless):
@@ -130,6 +134,8 @@ export default function AppShell({
   onNavigate,
   iconComponent,
   railComponent: Rail = NavRail,
+  railFade = true,
+  railSections = 'fold',
   railToggleKey,
   touch = 'shell',
   appName,
@@ -370,6 +376,8 @@ export default function AppShell({
           onNavigate={navigate}
           iconComponent={iconComponent}
           drawer={drawer}
+          fade={railFade}
+          sections={railSections}
         />
       )}
       {/* THE BACK OF THE BACK — surface-primary, always, in every app; the

package/src/NavRail.jsx

@@ -70,6 +70,10 @@ import Logomark from './Logomark.jsx'
  * @param {boolean} drawer  off-canvas mode: no grab, no drag, no token writes, rows always
  *   labelled, and the rail sizes itself from `--kol-shell-drawer-width` (default 240px).
  *   AppShell sets this from `touch="drawer"` — see ShellRailNoDrawerOnMobile, 2026-08-31.
+ * @param {boolean} [fade=true]  the list fades out at its foot — the workshop rail's fade
+ *   (2026-10-01), here too on the user's word (2026-10-02). The rows sit in their own scroll
+ *   region between the mark and the pinned bottom rows, so a list longer than the window scrolls
+ *   and runs out under the fade instead of being cut by the edge. `false` draws the list plain.
  */
 const RAIL_W = '--kol-shell-rail-width'
 const CLOSED = 48
@@ -163,7 +167,7 @@ function IconAt({ name, size, component }) {
   return <Cmp name={name} size={size} />
 }
 
-function RailItem({ icon, path, label, sub, currentPath, onNavigate, iconComponent, railOpen, onOpenRail }) {
+function RailItem({ icon, path, label, sub, currentPath, onNavigate, iconComponent, railOpen, onOpenRail, onEnter }) {
   const [open, setOpen] = useState(false)
   /* A SECTION ROW IS NOT A DESTINATION (RailSectionPressOpensRail, kol-fxr
    * 2026-08-30 — user: *"if I press effects from collapsed nav it should maybe
@@ -179,8 +183,13 @@ function RailItem({ icon, path, label, sub, currentPath, onNavigate, iconCompone
    * "nothing auto-expands" — that rule is about ARRIVING on a route; this is an
    * explicit press. */
   const isSection = sub?.length > 0
+  /* …AND IN AN OPEN RAIL THE SAME PRESS FOLDS AND UNFOLDS IT (2026-10-05, labs on a phone). Open,
+   * it still fell through to `onNavigate` with that path no consumer dispatches: dead at a desk,
+   * and worse on a touch drawer, where AppShell closes the drawer on every navigate — pressing a
+   * section's name shut the nav and loaded nothing. */
   const press = () => {
-    if (isSection && !railOpen) { onOpenRail?.(); setOpen(true); return }
+    if (isSection && onEnter) { if (!railOpen) onOpenRail?.(); onEnter(); return }
+    if (isSection) { if (!railOpen) onOpenRail?.(); setOpen((v) => !railOpen || !v); return }
     onNavigate?.(path)
   }
   const active = path === '/' ? currentPath === '/' : currentPath.startsWith(path)
@@ -217,7 +226,7 @@ function RailItem({ icon, path, label, sub, currentPath, onNavigate, iconCompone
         {sub?.length > 0 && (
           <Tooltip label={label} placement="right" triggerClassName="inline-flex shrink-0">
           <Button
-            iconOnly={open ? 'chevron-down' : 'chevron-right'}
+            iconOnly={onEnter ? 'chevron-right' : open ? 'chevron-down' : 'chevron-right'}
             iconSize={16}
             iconComponent={iconComponent}
             variant="nav"
@@ -226,14 +235,14 @@ function RailItem({ icon, path, label, sub, currentPath, onNavigate, iconCompone
             size="md"
             className="shrink-0"
             style={{ color: 'var(--kol-oq-96)' }}
-            aria-expanded={open}
-            onClick={() => setOpen((v) => !v)}
+            aria-expanded={onEnter ? undefined : open}
+            onClick={onEnter ? press : () => setOpen((v) => !v)}
             aria-label={`${label} sub categories`}
           />
           </Tooltip>
         )}
       </div>
-      {railOpen && open && sub.map((s) => {
+      {railOpen && open && !onEnter && sub.map((s) => {
         const on = s.path === '/' ? currentPath === '/' : currentPath.startsWith(s.path)
         return (
           <Tooltip key={s.path} label={s.label} placement="right" asChild>
@@ -277,18 +286,29 @@ export default function NavRail({
   iconComponent,
   hidden = false,
   drawer = false,
+  fade = true,
+  sections = 'fold',
 }) {
   const railRef = useRef(null)
   const grabRef = useRef(null)
   const [railOpen, setRailOpen] = useState(false)
+  /* ENTER MODE (`sections="enter"`, 2026-10-06 — the user, on labs: "having a 'enter' mode in the
+   * left sidebar instead of collapse folder?"): pressing a section replaces the list with that
+   * section's rows under a Back row, instead of unfolding it in place. `fold` is the accordion
+   * every rail had and keeps. Per consumer, not a law: labs' catalog is five sections of up to
+   * ten rows each, which is where an accordion stops reading. */
+  const [entered, setEntered] = useState(null)
   const snapOpenRef = useRef(null)
   /* the grab strip is not rendered in drawer mode, so the hook's ref stays null
    * and it no-ops on its own — no second argument needed */
   useGrabEdge(grabRef)
   useRailDrag(railRef, grabRef, setRailOpen, snapOpenRef, !drawer)
   if (hidden) return null
+  const enterMode = sections === 'enter'
+  const section = enterMode && entered ? items.find((i) => i.path === entered) : null
   const row = (item) => (
-    <RailItem key={item.path} {...item} currentPath={currentPath} onNavigate={onNavigate} iconComponent={iconComponent} railOpen={drawer || railOpen} onOpenRail={() => snapOpenRef.current?.()} />
+    <RailItem key={item.path} {...item} currentPath={currentPath} onNavigate={onNavigate} iconComponent={iconComponent} railOpen={drawer || railOpen} onOpenRail={() => snapOpenRef.current?.()}
+      onEnter={enterMode ? () => setEntered(item.path) : undefined} />
   )
   return (
     <div
@@ -340,9 +360,17 @@ export default function NavRail({
         </div>
         </Tooltip>
       )}
-      {items.map(row)}
-      {/* the spacer IS the layout */}
-      <div className="flex-1" />
+      {/* THE LIST IS ITS OWN REGION (2026-10-02): it takes the room between the mark and the pinned
+        * bottom rows — what the bare spacer used to hold — scrolls when the rows outrun the window,
+        * and fades at its foot unless `fade={false}`. Same column, same gap, as the rail's own. */}
+      <div className={`kol-shell-rail-list flex min-h-0 w-full flex-1 flex-col items-start gap-2 overflow-y-auto overflow-x-hidden ${fade ? 'kol-shell-rail-list--fade' : ''}`.trim()}>
+        {section ? (
+          <>
+            <RailItem icon="arrow-left" path={section.path} label={section.label} currentPath="" onNavigate={() => setEntered(null)} iconComponent={iconComponent} railOpen={drawer || railOpen} />
+            {section.sub.map((s) => <RailItem key={s.path} {...s} currentPath={currentPath} onNavigate={onNavigate} iconComponent={iconComponent} railOpen={drawer || railOpen} />)}
+          </>
+        ) : items.map(row)}
+      </div>
       {/* the rule runs the full rail width, out past the px-2 */}
       {bottomItems.length > 0 && <div className="self-stretch -mx-2 border-t border-fg-08" />}
       {bottomItems.map(row)}