@kolkrabbi/kol-shell 0.17.1 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.17.1",
+  "version": "0.19.0",
   "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",
@@ -20,10 +20,10 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-framework": "^0.35.0",
-    "@kolkrabbi/kol-component": "^0.127.0",
     "@kolkrabbi/kol-icons": "^0.24.0",
-    "@kolkrabbi/kol-theme": "^0.88.0"
+    "@kolkrabbi/kol-component": "^0.128.0",
+    "@kolkrabbi/kol-framework": "^0.35.0",
+    "@kolkrabbi/kol-theme": "^0.89.0"
   },
   "files": [
     "src",

package/src/AppShell.jsx

@@ -45,7 +45,9 @@ import TouchDeviceOverlay, { useTouchPrimary } from './TouchDeviceOverlay.jsx'
  *                                        localStorage `kol-desktop` is '1' (fxr's gate); `overlay` keeps the shell and
  *                                        mounts TouchDeviceOverlay once (monitor's)
  * @param {string}  props.appName       TouchDeviceOverlay's subject
- * @param {boolean} props.navKeys       Option+1…9 navigates to `items[n-1].path` through `onNavigate` — the
+ * @param {boolean} props.navKeys       Option+1…9 navigates to the rail's nth ROW through `onNavigate` — with a
+ *                                        `logomark` that is the mark ('/') then the items, which is the order on
+ *                                        screen (AppShellNavKeysHomeFirst, 2026-08-28); without one, `items[n-1]`. The
  *                                        rail-order counterpart of `railToggleKey` (AppShellNavKeys, kol-monitor
  *                                        2026-08-28 — user: "make command or alt 1234 go from home 1 2 3 4 in the
  *                                        sidenav without clicking"). Option, not Command: ⌘1–9 is the browser's
@@ -95,7 +97,21 @@ export default function AppShell({
     return () => window.removeEventListener('keydown', onKey)
   }, [railToggleKey])
 
-  /* Option+digit → the rail item in that position (never while typing) */
+  /* Option+digit → the rail ROW in that position (never while typing).
+   *
+   * THE MARK IS ROW 1 (AppShellNavKeysHomeFirst, kol-monitor 2026-08-28 — user:
+   * "alt 1 skips home and goes straight to 2"). 0.12.0 navigated to
+   * `items[n - 1]`, but the rail's first row is the LOGOMARK, which `NavRail`
+   * renders above the items and wires to '/'. So ⌥1 landed on the second rung
+   * and every key after it was off by one, with Home having no key at all —
+   * against the sentence that asked for the feature, quoted in the prop's own
+   * docblock above: "make command or alt 1234 go from HOME 1 2 3 4". Home was
+   * position 1 in the ask; the implementation counted a list it was never in.
+   *
+   * With a `logomark`, the order is the order you see: the mark, then the items.
+   * Without one, `items[n - 1]` exactly as before, so an app that renders no
+   * mark is untouched. */
+  const navPaths = (logomark ? ['/'] : []).concat((items ?? []).map((i) => i?.path)).filter(Boolean)
   useEffect(() => {
     if (!navKeys) return undefined
     const onKey = (e) => {
@@ -103,14 +119,14 @@ export default function AppShell({
       if (!m || !e.altKey || e.metaKey || e.ctrlKey) return
       const t = e.target
       if (t?.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t?.tagName)) return
-      const item = items?.[Number(m[1]) - 1]
-      if (!item?.path) return
+      const path = navPaths[Number(m[1]) - 1]
+      if (!path) return
       e.preventDefault()
-      onNavigate?.(item.path)
+      onNavigate?.(path)
     }
     window.addEventListener('keydown', onKey)
     return () => window.removeEventListener('keydown', onKey)
-  }, [navKeys, items, onNavigate])
+  }, [navKeys, navPaths.join('\u0000'), onNavigate]) // eslint-disable-line react-hooks/exhaustive-deps
 
   let wantsDesktop = false
   try { wantsDesktop = typeof localStorage !== 'undefined' && localStorage.getItem('kol-desktop') === '1' } catch { /* storage blocked */ }

package/src/PageShell.jsx

@@ -9,6 +9,31 @@
  * Gutter is `--kol-shell-page-pad` (kol-theme). `PageBleed` breaks it for
  * full-width embeds (monitor's rack bleed).
  *
+ * `scrollbar-gutter: stable` on both modes (PageShellScrollbarGutter,
+ * kol-monitor 2026-08-28 — user: "Create is the odd one out"). A page's content
+ * width used to depend on whether it scrolls: `scroll` mode scrolls the
+ * document, so the viewport's scrollbar takes its width out of the content box;
+ * `fixed` mode is `overflow: hidden` and keeps it. That would cost nothing if
+ * anything downstream were measured in absolute units — but `.kol-filters-first`
+ * is `calc((100cqw - 120px) / 6)` (ContentFiltersFirstGroupFixedWidth), so a
+ * scrollbar's width divides by six into the first filter group and every group
+ * after it shifts, along with the 6-column grid beneath. One catalog column has
+ * to mean one thing on every surface of an app.
+ *
+ * WHERE the declaration lands is not symmetric, and it is why this is on the
+ * component rather than in the theme: in `fixed` mode this element IS the scroll
+ * container (`overflow: hidden` qualifies), so it reserves the gutter and its
+ * content box matches a scrolling page's. In `scroll` mode it is not one
+ * (`overflow: visible`), the property does not apply, and the viewport keeps
+ * doing what it already did — so this is inert there rather than a second
+ * gutter. Equal widths, one declaration.
+ *
+ * Inert, too, wherever scrollbars overlay rather than take space (macOS with a
+ * trackpad): there was no delta to fix and there is none to introduce.
+ * The fuller fix — `html { scrollbar-gutter: stable }` — would also equalise a
+ * SHORT scrolling page against a long one; that is an estate-wide change to
+ * every consumer's root element and is not this ticket's.
+ *
  * The background is `var(--kol-shell-page-wash, var(--kol-surface-primary))`
  * (ShellPageWash, 2026-08-27): unset, today's primary pixel; set by
  * `AppShell pageWash`, a transparent wash over the shell's primary back —
@@ -26,6 +51,7 @@ export default function PageShell({ mode = 'scroll', className = '', style, chil
       style={{
         background: 'var(--kol-shell-page-wash, var(--kol-surface-primary))',
         padding: 'var(--kol-shell-page-pad)',
+        scrollbarGutter: 'stable',
         display: 'flex',
         flexDirection: 'column',
         ...modeStyle,