@kolkrabbi/kol-shell 0.66.0 → 0.68.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.66.0",
+  "version": "0.68.0",
   "private": false,
   "description": "The application shell",
   "license": "MIT",
@@ -20,10 +20,10 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.266.0",
+    "@kolkrabbi/kol-component": "^0.268.0",
+    "@kolkrabbi/kol-framework": "^0.51.0",
     "@kolkrabbi/kol-icons": "^0.39.0",
-    "@kolkrabbi/kol-theme": "^0.174.0",
-    "@kolkrabbi/kol-framework": "^0.50.0"
+    "@kolkrabbi/kol-theme": "^0.175.0"
   },
   "files": [
     "src",

package/src/AppHub.jsx

@@ -3,9 +3,9 @@ import AppShell from './AppShell.jsx'
 import HubHome from './HubHome.jsx'
 import HubSettings from './HubSettings.jsx'
 import HubDev from './HubDev.jsx'
-import { CommandOverlay } from '@kolkrabbi/kol-component'
+import { ShortcutsOverlay } from '@kolkrabbi/kol-component'
 
-/* taxonomy-ok: organism — nests AppShell / HubHome / HubSettings / HubDev (relative) + kol-component's CommandOverlay */
+/* taxonomy-ok: organism — nests AppShell / HubHome / HubSettings / HubDev (relative) + kol-component's ShortcutsOverlay */
 
 /**
  * AppHub — An app's shell and hub in one. Shell + Hub in one call; the app passes its Tool as children (the app anatomy,
@@ -39,8 +39,8 @@ import { CommandOverlay } from '@kolkrabbi/kol-component'
  *                              to neccessarily have settings manditory part of the rail"*) — no `settings`, no rail
  *                              row, no route, no `,` key. It was pinned whether the app had settings or not.
  * @param {Object}   dev        HubDev's props (`tabs`, `title`, `subtitle`) + `path` (default `/dev`). OPT-IN, and only on
- *                              a dev server (`import.meta.env.DEV`; `always: true` overrides) — a `code` row above
- *                              Settings (CompareGridDevTab, kol-monitor 2026-10-17)
+ *                              a dev server (`import.meta.env.DEV`; `always: true` overrides) — a `code` row after
+ *                              the app's own rows (CompareGridDevTab · HubDevChrome, kol-monitor)
  * @param {Array}    shortcuts  `[{ section, items: [{ id, label, combo }] }]` — the sheet AND Settings
  * @param {ReactNode} themeToggle  Settings' masthead toggle (a node — kol-framework is not a peer)
  * @param {string}   shortcutsKey  default `s`; `null` turns the sheet key off (a tool that owns S)
@@ -70,12 +70,11 @@ export default function AppHub({
   children,
 }) {
   const [sheet, setSheet] = useState(false)
-  const [sheetQuery, setSheetQuery] = useState('')
 
   useEffect(() => {
     if (!shortcutsKey) return undefined
     const onKey = (e) => {
-      if (e.key.toLowerCase() !== shortcutsKey || e.metaKey || e.ctrlKey || e.altKey || e.repeat) return
+      if (e.key !== shortcutsKey || e.shiftKey || e.metaKey || e.ctrlKey || e.altKey || e.repeat) return
       const t = e.target
       if (t?.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(t?.tagName)) return
       e.preventDefault()
@@ -96,13 +95,16 @@ export default function AppHub({
       : devOn && (currentPath === devPath || currentPath?.startsWith(`${devPath}/`))
         ? <HubDev storageKey={`kol-dev-tab:${app.name ?? 'app'}`} {...devProps} />
         : children
-  const bottom = [...(devOn ? [{ icon: 'code', path: devPath, label: 'Dev' }] : []), ...(settings ? SETTINGS_ROW(settingsPath) : [])]
+  /* the Dev row closes the app's own rows — under Stage in monitor (HubDevChrome, kol-monitor 2026-10-18 — user:
+   * *"why did the dev tab move? it was fine where it was. below stage"*); Settings keeps the bottom alone */
+  const rows = devOn ? [...items, { icon: 'code', path: devPath, label: 'Dev' }] : items
+  const bottom = settings ? SETTINGS_ROW(settingsPath) : []
   /* the phone bar lists Home as a tab — the rail draws it as the mark, the bar has no mark */
-  const barItems = [...(home ? [{ icon: 'home-01', path: homePath, label: 'Home' }] : []), ...items, ...bottom]
+  const barItems = [...(home ? [{ icon: 'home-01', path: homePath, label: 'Home' }] : []), ...rows, ...bottom]
 
   return (
     <AppShell
-      items={items}
+      items={rows}
       bottomItems={bottom}
       barItems={barItems}
       logomark={app.logomark ? { svgUrl: app.logomark, title: app.name } : undefined}
@@ -123,9 +125,10 @@ export default function AppHub({
       {...shell}
     >
       {page}
-      {/* THE SHEET IS THE OVERLAY'S SHORTCUTS MODE (5.3, 2026-10-17): the whole keymap at a glance, this page's
-        * first, the rest under Elsewhere; typing filters, Enter runs a row */}
-      <CommandOverlay open={sheet} mode="shortcuts" shortcuts={shortcuts} currentPath={currentPath} query={sheetQuery} onQueryChange={setSheetQuery} onClose={() => { setSheet(false); setSheetQuery('') }} />
+      {/* THE SHEET IS A LIST, NOT A SEARCH (ShortcutsOverlayList, kol-monitor 2026-10-18 — user: *"its alist of
+        * shortcuts NOT A SEARCH"*, *"why are we showing disabled shortcuts, named category elsewhere"*): this
+        * page's sections only, no field, no Run; `S` toggles it, Esc closes it. Reverses 5.3 (2026-10-17). */}
+      {sheet && <ShortcutsOverlay shortcuts={shortcuts} currentPath={currentPath} onClose={() => setSheet(false)} />}
     </AppShell>
   )
 }

package/src/HubDev.jsx

@@ -13,14 +13,14 @@ const write = (key, value) => { try { localStorage.setItem(key, value) } catch {
  * instructions for making the dev tab to the hub … localhost only using the </> icon"*). Each app had built
  * this page by hand and each read differently; this is the page made once, for reading.
  *
- * The shape: a small mono masthead with one line saying what the page is, the tabs on their own row under
- * it, the active tab's one-line description, then the tab's content at full width. Detail belongs in the
+ * The shape: a small mono masthead with one line saying what the page is, the chip tabs on their own row under
+ * it, then the tab's content at full width. Detail belongs in the
  * content's own toggles, not in more text here. The open tab is remembered per app.
  *
  * Rendered by `AppHub` / `AppStudio` from their `dev` prop, only on a dev server (`import.meta.env.DEV`),
- * at `/dev`, behind the `code` rail row.
+ * at `/dev`, behind a `code` rail row after the app's own rows.
  *
- * @param {Array}  tabs        `[{ value, label, description?, content }]`
+ * @param {Array}  tabs        `[{ value, label, content }]`
  * @param {string} [title='Dev']
  * @param {string} [subtitle]  one line: what the page is
  * @param {string} [storageKey] where the open tab is remembered
@@ -34,10 +34,9 @@ export default function HubDev({ tabs = [], title = 'Dev', subtitle = 'Experimen
     <PageShell className="gap-6">
       <PageHeader size="sm" voice="mono" title={title} subtitle={subtitle} />
       {tabs.length > 1 && (
-        <div className="flex flex-col gap-2 border-b border-fg-08 pb-4">
-          <TabsRow look="text" tabs={tabs.map(({ value, label }) => ({ value, label }))} value={active?.value} onChange={pick} tracked />
-          {active?.description && <p className="kol-helper-12 text-meta">{active.description}</p>}
-        </div>
+        /* chip tabs — the ones ui.kolkrabbi.io's component pages use — and nothing between them and the
+         * content (HubDevChrome, kol-monitor 2026-10-18 — user: *"why are we puttin sub description below the tabs?"*) */
+        <TabsRow look="chip" tabs={tabs.map(({ value, label }) => ({ value, label }))} value={active?.value} onChange={pick} ariaLabel={title} />
       )}
       {active && <div className="min-w-0">{active.content}</div>}
     </PageShell>