@kolkrabbi/kol-shell 0.25.0 → 0.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.25.0",
+  "version": "0.26.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-component": "^0.135.0",
-    "@kolkrabbi/kol-icons": "^0.25.0",
+    "@kolkrabbi/kol-component": "^0.136.0",
     "@kolkrabbi/kol-framework": "^0.35.0",
-    "@kolkrabbi/kol-theme": "^0.99.0"
+    "@kolkrabbi/kol-icons": "^0.25.0",
+    "@kolkrabbi/kol-theme": "^0.100.0"
   },
   "files": [
     "src",

package/src/AppShell.jsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import NavRail from './NavRail.jsx'
 import { NavHiddenContext } from './navHidden.js'
+import { SettingsToggleContext } from './settingsToggle.js'
 import TouchDeviceOverlay, { useTouchPrimary } from './TouchDeviceOverlay.jsx'
 
 /**
@@ -71,6 +72,14 @@ import TouchDeviceOverlay, { useTouchPrimary } from './TouchDeviceOverlay.jsx'
  *                                        Bare and with ⌥, ignored while typing in a field. Needs
  *                                        `settingsPath`; alone it does nothing.
  */
+/* the physical-key name for a bound character. Only the keys people actually
+ * bind — a full layout table would be a lie about coverage. */
+const CODE_FOR_KEY = {
+  ',': 'Comma', '.': 'Period', '/': 'Slash', ';': 'Semicolon', "'": 'Quote',
+  '[': 'BracketLeft', ']': 'BracketRight', '\\': 'Backslash', '`': 'Backquote',
+  '-': 'Minus', '=': 'Equal',
+}
+
 export default function AppShell({
   items,
   bottomItems,
@@ -117,7 +126,15 @@ export default function AppShell({
   useEffect(() => {
     if (!settingsKey || !settingsPath) return undefined
     const onKey = (e) => {
-      if (e.key !== settingsKey || e.metaKey || e.ctrlKey) return
+      /* MATCH THE PHYSICAL KEY (SettingsToggleGestureConsumerSeam, kol-fxr
+       * 2026-08-30). Option rewrites `e.key` on macOS — **the chord for `,` is
+       * `≤`** — so an `e.key` comparison silently drops it while the bare key
+       * works, which is the worst way to fail. `e.code` is the same physical key
+       * either way; it is why the Option-digit handler above reads `Digit1…`
+       * rather than `¡ ™ £`. `e.key` still matches too, so a character with no
+       * entry in the table below is unaffected. */
+      const wanted = CODE_FOR_KEY[settingsKey]
+      if (!(e.key === settingsKey || (wanted && e.code === wanted)) || e.metaKey || e.ctrlKey) return
       const t = e.target
       if (t?.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t?.tagName)) return
       e.preventDefault()
@@ -191,6 +208,7 @@ export default function AppShell({
 
   return (
     <NavHiddenContext.Provider value={{ navHidden, setNavHidden }}>
+      <SettingsToggleContext.Provider value={toggleSettings}>
       {/* `kol-app-shell` = the app tier: neutral ::selection (kol-theme).
         * A hidden rail zeroes the live width token, so the content's own
         * margin closes with it — one variable, both sides. */}
@@ -218,6 +236,7 @@ export default function AppShell({
         {children}
       </div>
       </div>
+      </SettingsToggleContext.Provider>
     </NavHiddenContext.Provider>
   )
 }

package/src/index.js

@@ -12,6 +12,7 @@
  */
 export { default as AppShell } from './AppShell.jsx'
 export { NavHiddenContext, useNavHidden } from './navHidden.js'
+export { SettingsToggleContext, useSettingsToggle } from './settingsToggle.js'
 export { default as NavRail } from './NavRail.jsx'
 export { default as PageShell, PageBleed } from './PageShell.jsx'
 export { default as PageHeader } from './PageHeader.jsx'

package/src/settingsToggle.js

@@ -0,0 +1,22 @@
+import { createContext, useContext } from 'react'
+
+/* Settings-toggle context — own file so AppShell exports only components
+ * (the react-refresh constraint `navHidden.js` was split out for).
+ *
+ * WHY A HOOK AND NOT JUST THE PROPS (SettingsToggleGestureConsumerSeam, kol-fxr
+ * 2026-08-30). `settingsKey` navigates unconditionally, and that is wrong for an
+ * app whose settings are sometimes a DRAWER: on kol-fxr's `/editor`, `,` opens
+ * the panel in place and must not leave the canvas. Its rule is "open whatever
+ * settings is available", which only the app can know.
+ *
+ * So the shell keeps what is genuinely shared — the return path, and the rail
+ * row toggling — and hands out the toggle for a consumer that owns the gesture.
+ * Without this, fxr had to keep its whole local copy (a `lastPage` ref and a
+ * branch in `onNavigate`) to keep one line of app-specific routing, which is
+ * the duplication `settingsPath` exists to end.
+ *
+ * No-op when `settingsPath` is unset, and safe outside an AppShell — a hook
+ * that throws on a missing provider would make it unusable in exactly the
+ * conditional places it is for. */
+export const SettingsToggleContext = createContext(null)
+export const useSettingsToggle = () => useContext(SettingsToggleContext) ?? (() => {})