@kolkrabbi/kol-shell 0.60.0 → 0.61.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.60.0",
+  "version": "0.61.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-component": "^0.239.0",
+    "@kolkrabbi/kol-framework": "^0.49.0",
     "@kolkrabbi/kol-icons": "^0.33.0",
-    "@kolkrabbi/kol-framework": "^0.48.0",
-    "@kolkrabbi/kol-theme": "^0.163.0"
+    "@kolkrabbi/kol-theme": "^0.165.0"
   },
   "files": [
     "src",

package/src/AppShell.jsx

@@ -42,6 +42,7 @@ 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 {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 +131,7 @@ export default function AppShell({
   onNavigate,
   iconComponent,
   railComponent: Rail = NavRail,
+  railFade = true,
   railToggleKey,
   touch = 'shell',
   appName,
@@ -370,6 +372,7 @@ export default function AppShell({
           onNavigate={navigate}
           iconComponent={iconComponent}
           drawer={drawer}
+          fade={railFade}
         />
       )}
       {/* 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
@@ -277,6 +281,7 @@ export default function NavRail({
   iconComponent,
   hidden = false,
   drawer = false,
+  fade = true,
 }) {
   const railRef = useRef(null)
   const grabRef = useRef(null)
@@ -340,9 +345,12 @@ 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()}>
+        {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)}