@kolkrabbi/kol-shell 0.13.0 → 0.13.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.13.0",
+  "version": "0.13.2",
   "private": false,
   "description": "KOL application shell — fixed 48px NavRail + AppShell layout root, PageShell/PageHeader scaffolds, ContentFilters catalog organism, GridCard, SettingsScaffold, WalkthroughPanel, ShortcutsOverlay. App chrome (kol-framework owns site chrome). Nav items, content, shortcuts and settings are consumer-injected. Sits above @kolkrabbi/kol-{theme,component,framework}.",
   "license": "MIT",
@@ -13,7 +13,7 @@
   },
   "peerDependencies": {
     "@kolkrabbi/kol-component": ">=0.108.0",
-    "@kolkrabbi/kol-framework": ">=0.31.0",
+    "@kolkrabbi/kol-framework": ">=0.33.0",
     "@kolkrabbi/kol-icons": ">=0.16.0",
     "@kolkrabbi/kol-theme": ">=0.80.0",
     "react": "^18.3.0 || ^19.0.0",
@@ -21,8 +21,8 @@
   },
   "devDependencies": {
     "@kolkrabbi/kol-component": "^0.118.3",
-    "@kolkrabbi/kol-framework": "^0.31.0",
     "@kolkrabbi/kol-icons": "^0.24.0",
+    "@kolkrabbi/kol-framework": "^0.33.0",
     "@kolkrabbi/kol-theme": "^0.80.0"
   },
   "files": [

package/src/AppShell.jsx

@@ -19,10 +19,15 @@ import TouchDeviceOverlay, { useTouchPrimary } from './TouchDeviceOverlay.jsx'
  * fixed rail + `margin-left` offset is gone. `--kol-shell-rail-width`
  * (kol-theme ≥0.80.0) is LIVE — the sidenav's width in its current state —
  * for consumers that offset a fixed element by it; hidden rail = `0px`.
+ * REQUIRES `@kolkrabbi/kol-framework/kol-framework.css` imported after the
+ * theme (kol-mirror's bump, 2026-08-28): the grid, the sidenav's box and
+ * collapse rules and its width tokens live there, not in kol-theme — without
+ * it the root is `display: block` and the rail is a horizontal bar, with a
+ * green build and a clean console.
  *
  * @param {Array}  props.items         nav items `{ icon, path, label }`
  * @param {Array}  props.bottomItems   items pinned below the theme toggle
- * @param {Object} props.logomark      `{ svgUrl, title }` — the rail's footer mark, navigates to '/'
+ * @param {Object} props.logomark      `{ svgUrl, title }` — the rail's header mark, at the top in both states, navigates to '/'
  * @param {string} props.currentPath   the router's current pathname
  * @param {Function} props.onNavigate  `(path) => void`
  * @param {ElementType} props.iconComponent  icon renderer seam (see Button)

package/src/NavRail.jsx

@@ -15,8 +15,12 @@ import Logomark from './Logomark.jsx'
  * (`expandOnSelect={false}`).
  *
  * The bottom, specified once: theme slot → `bottomItems` (pinned rows) →
- * footer. The `logomark` moved from the top of the rail to the footer — the
- * brand sidebar's mark sits there, and the first glyph's y is the sidenav's.
+ * no footer (an app rail never carried the site's wordmark link). The
+ * `logomark` is the sidenav's `header` — at the TOP, both states, where every
+ * rail in the estate has carried it (RailLogomarkAtTop, 2026-08-28 — user, on
+ * 0.13.0's footer placement: "why did you move the logo from top to bottom?
+ * … I've never seen that before so you are the first"). Its `title` is the
+ * label beside the mark in the open rail; collapsed, the mark alone.
  */
 export default function NavRail({
   items = [],
@@ -44,17 +48,21 @@ export default function NavRail({
       expandOnSelect={false}
       defaultCollapsed
       hairline
-      footer={logomark ? (
+      footer={false}
+      header={logomark ? (
         <button
           type="button"
-          className="inline-flex items-center bg-transparent border-0 p-0 cursor-pointer text-body hover:text-emphasis"
+          className="flex items-center gap-3 w-full bg-transparent border-0 p-0 cursor-pointer text-emphasis no-underline text-left"
           onClick={() => onNavigate?.('/')}
           title={logomark.title}
           aria-label={logomark.title}
         >
-          <Logomark svgUrl={logomark.svgUrl} size={20} />
+          <span className="kol-sidenav-hop-icon inline-flex items-center justify-center w-5 h-5 shrink-0" aria-hidden="true">
+            <Logomark svgUrl={logomark.svgUrl} size={20} />
+          </span>
+          {logomark.title && <span className="kol-sidenav-hop-label kol-helper-12 flex-1 min-w-0 truncate">{logomark.title}</span>}
         </button>
-      ) : false}
+      ) : undefined}
     />
   )
 }