@kolkrabbi/kol-shell 0.57.1 → 0.59.0

package/README.md

@@ -36,6 +36,7 @@ Same consumer contract as every KOL package — raw `.jsx` source, so:
 | `WalkthroughPanel` | Centred stepped intro card; steps/illustrations/actions are content |
 | `ShortcutsOverlay` | Blurred scrim + flat 2-col shortcut sheet at `--kol-z-modal` |
 | `Logomark` | Fetch-and-inline SVG mark (currentColor-safe in dark mode) |
+| `AppStudio` | The workstation — the Hub plus Home · Library · Create · Use · opt-in pages · Settings, in that order, mono by default; each slot renames with `{ path, label, icon }` (reference app: `apps/studio`) |
 
 ## Wiring (react-router example)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.57.1",
+  "version": "0.59.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",
@@ -12,18 +12,18 @@
     "./src/*": "./src/*"
   },
   "peerDependencies": {
-    "@kolkrabbi/kol-component": ">=0.178.0",
+    "@kolkrabbi/kol-component": ">=0.229.0",
     "@kolkrabbi/kol-icons": ">=0.16.0",
-    "@kolkrabbi/kol-theme": ">=0.138.0",
+    "@kolkrabbi/kol-theme": ">=0.156.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.226.0",
-    "@kolkrabbi/kol-icons": "^0.28.0",
-    "@kolkrabbi/kol-framework": "^0.44.0",
-    "@kolkrabbi/kol-theme": "^0.153.0"
+    "@kolkrabbi/kol-component": "^0.229.0",
+    "@kolkrabbi/kol-theme": "^0.156.0",
+    "@kolkrabbi/kol-framework": "^0.45.0",
+    "@kolkrabbi/kol-icons": "^0.29.0"
   },
   "files": [
     "src",

package/src/AppHub.jsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import AppShell from './AppShell.jsx'
 import HubHome from './HubHome.jsx'
 import HubSettings from './HubSettings.jsx'
-import ShortcutsOverlay from './ShortcutsOverlay.jsx'
+import { ShortcutsOverlay } from '@kolkrabbi/kol-component'
 
 /* taxonomy-ok: organism — nests AppShell / HubHome / HubSettings / ShortcutsOverlay (relative) */
 
@@ -16,7 +16,7 @@ import ShortcutsOverlay from './ShortcutsOverlay.jsx'
  * those decisions made once. An app describes itself and supplies its tool.
  *
  * ROUTES: `homePath` (default `/`) is Home, `settingsPath` is Settings, every other path renders
- * `children` — the tool. A tool that should be what LOADS moves Home off `/` (media-shell, user
+ * `children` — the tool. A tool that should be what LOADS moves Home off `/` (media-hub, user
  * 2026-09-26: "the point of this is not to bury media, the column browser is what we want loaded"):
  * `homePath="/library"`, a rail row for it, and the mark still goes to `/` — the tool.
  * Router-agnostic like AppShell: pass `currentPath` + `onNavigate`, and your router's element
@@ -29,12 +29,19 @@ import ShortcutsOverlay from './ShortcutsOverlay.jsx'
  * @param {Array}    items      the tool's rail rows `{ icon, path, label }` — Home is the mark, Settings is pinned
  * @param {string}   currentPath · {Function} onNavigate · {ElementType} iconComponent   as AppShell
  * @param {string}   homePath   where Home lives (default `/`); anything else puts the tool at `/`
- * @param {Object}   home       HubHome's props (`items`, `toCard`, `views`, `actions`, `filterGroups`, …)
+ * @param {Object}   home       HubHome's props (`items`, `toCard`, `views`, `actions`, `filterGroups`, …).
+ *                              OPT-IN (apps review 2026-09-29): no `home`, no Home page — `homePath` renders the
+ *                              tool and the mark goes there (media-hub: the column browser IS the app)
  * @param {Array}    walkthrough  the steps Home's Walkthrough button opens
- * @param {Object}   settings   HubSettings' props (`content`, `tabs`, `picker`, `onOpenSettings`, `comboLabel`)
+ * @param {Object}   settings   HubSettings' props (`content`, `tabs`, `picker`, `onOpenSettings`, `comboLabel`).
+ *                              OPT-IN like AppShell's `bottomItems` (apps review 2026-09-29: *"not sure it makes sense
+ *                              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 {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)
+ * @param {'display'|'mono'} masthead  the app's one masthead (AppShell's) — set, Home and Settings follow it; unset
+ *                              (the default), they keep the Hub's mono title (2026-09-29)
  * @param {Object}   shell      any AppShell prop, spread last (`touch`, `pageWash`, `drawerOpenOn`, `railComponent`, …)
  */
 const SETTINGS_ROW = (path) => [{ icon: 'nav-settings', path, label: 'Settings' }]
@@ -53,6 +60,7 @@ export default function AppHub({
   settingsPath = '/settings',
   homePath = '/',
   shortcutsKey = 's',
+  masthead,
   shell,
   children,
 }) {
@@ -71,26 +79,34 @@ export default function AppHub({
     return () => window.removeEventListener('keydown', onKey)
   }, [shortcutsKey])
 
-  const page = currentPath === homePath
+  const page = home && currentPath === homePath
     ? <HubHome app={app} iconComponent={iconComponent} walkthrough={walkthrough} {...home} />
-    : currentPath === settingsPath
+    : settings && currentPath === settingsPath
       ? <HubSettings app={app} shortcuts={shortcuts} themeToggle={themeToggle} {...settings} />
       : children
+  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]
 
   return (
     <AppShell
       items={items}
-      bottomItems={SETTINGS_ROW(settingsPath)}
+      bottomItems={bottom}
+      barItems={barItems}
       logomark={app.logomark ? { svgUrl: app.logomark, title: app.name } : undefined}
       currentPath={currentPath}
       onNavigate={onNavigate}
       iconComponent={iconComponent}
       appName={app.name}
       railToggleKey={'\\'}
-      settingsPath={settingsPath}
-      settingsKey=","
+      settingsPath={settings ? settingsPath : undefined}
+      settingsKey={settings ? ',' : undefined}
       navKeys
-      touch="drawer"
+      /* THE PHONE BAR, not the drawer (apps review 2026-09-29): the drawer's hamburger is fixed
+       * top-right, over the masthead's own controls — validate:render caught it on every Hub page
+       * with a gear. `shell={{ touch: 'drawer' }}` still gets the drawer. */
+      touch="bar"
+      masthead={masthead}
       pageWash="var(--kol-fg-02)"
       {...shell}
     >

package/src/AppShell.jsx

@@ -4,6 +4,8 @@ import NavRail from './NavRail.jsx'
 import { NavHiddenContext } from './navHidden.js'
 import { SettingsToggleContext } from './settingsToggle.js'
 import TouchDeviceOverlay, { useTouchPrimary } from './TouchDeviceOverlay.jsx'
+import PhoneNav from './PhoneNav.jsx'
+import { TABBAR_H, MastheadContext } from '@kolkrabbi/kol-component'
 
 /**
  * AppShell — layout root: the rail + the content column. No header, no
@@ -42,7 +44,7 @@ import TouchDeviceOverlay, { useTouchPrimary } from './TouchDeviceOverlay.jsx'
  * toggle lives on the settings page, not in the rail (user, 2026-08-28).
  * @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'} props.touch  the touch-primary policy (default 'shell' = the rail regardless):
+ * @param {'shell'|'bare'|'overlay'|'drawer'|'bar'} props.touch  the touch-primary policy (default 'shell' = the rail regardless):
  *                                        'drawer' takes the rail OFF-CANVAS below `drawerBelow`, hands its width
  *                                        back to the content, and renders a trigger that brings it in over a scrim.
  *                                        Tapping a destination closes it. (ShellRailNoDrawerOnMobile, kol-chess
@@ -50,6 +52,20 @@ import TouchDeviceOverlay, { useTouchPrimary } from './TouchDeviceOverlay.jsx'
  *                                        `railToggleKey` is a KEY — a phone has no keyboard, so on the device where
  *                                        the rail costs most it could not be dismissed at all. `bare` was the only
  *                                        other way to reclaim the width and it throws navigation away entirely.)
+ *                                        'bar' (apps review 2026-09-29) takes the rail off below `drawerBelow` too, and
+ *                                        puts it in a BOTTOM BAR (`PhoneNav`, on kol-component's MobileTabBar): up to five
+ *                                        destinations, else four + More, a sheet with the rest and Settings. No
+ *                                        hamburger over the page's own controls, and ten pages still fit. The content
+ *                                        gets the bar's height as bottom padding. `barItems` overrides what it lists.
+ * @param {'display'|'mono'} [props.masthead]  THE APP'S MASTHEAD, set once here and read by every
+ *                                        page inside (apps review 2026-09-29, ruling D3): `PageHeader`, the Hub's
+ *                                        pages, `CatalogPage` and a tool's own title. `display` = the display
+ *                                        voice, no description (MEDIA, CURVES); `mono` = the mono title with its
+ *                                        description. One app, one header — media-hub wore both. NO DEFAULT (user, 2026-09-29): unset,
+ *                                        every page renders as its own props say, so a consumer's bump moves nothing
+ *                                        (fxr · mirror · monitor are mono by ruling).
+ * @param {Array}  [props.barItems]        the bar's destinations under `touch="bar"` (default items + bottomItems) —
+ *                                        a Hub passes Home first, which the rail draws as the mark instead
  * @param {number} [props.drawerBelow=768]  viewport width under which `touch="drawer"` folds. A width, not a
  *                                        pointer test: an iPad is coarse and has room, a narrow desktop window is
  *                                        fine-pointered and does not.
@@ -123,6 +139,8 @@ export default function AppShell({
   settingsKey,
   drawerBelow = 768,
   drawerOpenOn = NO_PATHS,
+  barItems,
+  masthead,
   children,
 }) {
   const [navHidden, setNavHidden] = useState(false)
@@ -141,6 +159,7 @@ export default function AppShell({
     return () => mq.removeEventListener('change', on)
   }, [drawerBelow])
   const drawer = touch === 'drawer' && narrow
+  const bar = touch === 'bar' && narrow
   const [drawerOpen, setDrawerOpen] = useState(false)
   useEffect(() => { if (!drawer) setDrawerOpen(false) }, [drawer])
   useEffect(() => {
@@ -299,6 +318,7 @@ export default function AppShell({
   if (touch === 'bare' && coarse && !wantsDesktop) return <div className="kol-app-shell contents" style={{ '--kol-shell-page-wash': pageWash }}>{children}</div>
 
   return (
+    <MastheadContext.Provider value={masthead}>
     <NavHiddenContext.Provider value={{ navHidden, setNavHidden }}>
       <SettingsToggleContext.Provider value={toggleSettings}>
       {/* `kol-app-shell` = the app tier: neutral ::selection (kol-theme).
@@ -311,7 +331,7 @@ export default function AppShell({
          * margin for `navHidden` closes it here — the rail then takes its own
          * `--kol-shell-drawer-width` rather than this token. */
         data-rail-drawer={drawer ? (drawerOpen ? 'open' : 'closed') : undefined}
-        style={navHidden || drawer ? { '--kol-shell-rail-width': '0px' } : undefined}
+        style={navHidden || drawer || bar ? { '--kol-shell-rail-width': '0px' } : undefined}
       >
       {touch === 'overlay' && <TouchDeviceOverlay appName={appName} />}
       {/* THE TRIGGER SHIPS HERE, not in every consumer's page header — the rail
@@ -339,7 +359,8 @@ export default function AppShell({
           onClick={() => setDrawerOpen(false)}
         />
       )}
-      {!navHidden && (
+      {bar && <PhoneNav items={barItems ?? [...(items ?? []), ...(bottomItems ?? [])]} currentPath={currentPath} onNavigate={navigate} />}
+      {!navHidden && !bar && (
         <Rail
           items={items}
           bottomItems={bottomItems}
@@ -355,11 +376,12 @@ export default function AppShell({
         * page paints its wash over it (ShellPageWash). */}
       {/* the margin IS the rail's live width, so the content is pushed
         * through the drag and the snap (RailFlatGrabOpen) */}
-      <div className="bg-surface-primary min-w-0" style={{ marginLeft: `var(--kol-shell-rail-width)`, '--kol-shell-page-wash': pageWash }}>
+      <div className="bg-surface-primary min-w-0" style={{ marginLeft: `var(--kol-shell-rail-width)`, '--kol-shell-page-wash': pageWash, ...(bar && { '--kol-shell-bar-h': `calc(${TABBAR_H}px + env(safe-area-inset-bottom, 0px))`, paddingBottom: 'var(--kol-shell-bar-h)' }) }}>
         {children}
       </div>
       </div>
       </SettingsToggleContext.Provider>
     </NavHiddenContext.Provider>
+    </MastheadContext.Provider>
   )
 }

package/src/AppStudio.jsx

@@ -0,0 +1,101 @@
+import { PageHeader } from '@kolkrabbi/kol-component'
+import AppHub from './AppHub.jsx'
+import CatalogPage from './CatalogPage.jsx'
+import PageShell from './PageShell.jsx'
+
+/* taxonomy-ok: organism — nests AppHub / CatalogPage / PageShell (relative) + kol-component's PageHeader */
+
+/**
+ * AppStudio — the WORKSTATION: the Hub plus a fixed page set (apps review §6c-4, 2026-09-29).
+ *
+ * fxr, mirror and monitor each hand-build the same shape — a landing Catalog, a Library of what the
+ * tool makes, a page that composes a new one, the tool itself full-bleed, a page or two of their own,
+ * Settings. monitor.kolkrabbi.io is the reference: Home · Library (patches, modules) · Create (CASE ·
+ * MODULES) · Rack · Stage · Settings. The Studio is that order, those keys, that masthead and that
+ * phone bar made once; an app passes the pages and nothing about how they sit.
+ *
+ *   Home      /              `home`     — HubHome: RECENT · SAVED, New ‹thing›, Walkthrough; the mark goes here
+ *   Library   /library       `library`  — a CatalogPage of the content
+ *   Create    /create        `create`   — a Catalog-headed editor page: `header` + the editor as `children`
+ *   Use       /use           `use`      — the tool, full-bleed: `children`, no page padding, no wash
+ *   …         pages[].path   `pages`    — opt-in pages (monitor: Stage), each `{ path, icon, label, children }`
+ *   Settings  /settings      `settings` — HubSettings, pinned at the rail's foot
+ *
+ * Library, Create and Use each take `{ path, label, icon }` to rename a slot (monitor calls Use
+ * "Rack" at /rack) — the ORDER is the Studio's, not the app's. Omit one and it is not there.
+ * MONO by default (fxr · mirror · monitor are mono by ruling); `masthead="display"` overrides.
+ * Router-agnostic like AppShell: `currentPath` + `onNavigate`. Everything else is AppHub's.
+ *
+ * @param {Object} app          AppHub's `{ name, subtitle, logomark, about, links }`
+ * @param {Object} home         HubHome's props — the landing Catalog (required: a Studio opens on Home)
+ * @param {Object} [library]    CatalogPage's props, plus `{ path, label, icon }`
+ * @param {Object} [create]     `{ header (PageHeader props), children, path, label, icon }`
+ * @param {Object} [use]        `{ children, path, label, icon }` — the tool
+ * @param {Array}  [pages]      `[{ path, icon, label, children }]` — opt-in pages, after Use
+ * @param {Object} [settings]   HubSettings' props
+ * @param {'mono'|'display'} [masthead='mono']
+ * @param {Object} [shell]      any AppShell prop, spread last
+ */
+export default function AppStudio({
+  app,
+  currentPath,
+  onNavigate,
+  iconComponent,
+  home,
+  library,
+  create,
+  use,
+  pages = [],
+  settings,
+  walkthrough,
+  shortcuts,
+  themeToggle,
+  shortcutsKey,
+  masthead = 'mono',
+  shell,
+}) {
+  const slot = (cfg, path, label, icon) => cfg && { ...cfg, path: cfg.path ?? path, label: cfg.label ?? label, icon: cfg.icon ?? icon }
+  const lib = slot(library, '/library', 'Library', 'nav-library')
+  const make = slot(create, '/create', 'Create', 'nav-create')
+  const tool = slot(use, '/use', 'Use', 'nav-rack')
+  const rows = [lib, make, tool, ...pages].filter(Boolean)
+  const at = (p) => currentPath === p || currentPath.startsWith(`${p}/`)
+
+  let page = null
+  if (lib && at(lib.path)) {
+    const { path: _p, label: _l, icon: _i, ...props } = lib
+    page = <CatalogPage {...props} />
+  } else if (make && at(make.path)) {
+    page = (
+      <PageShell>
+        {make.header && <PageHeader size="sm" {...make.header} />}
+        {make.children}
+      </PageShell>
+    )
+  } else if (tool && at(tool.path)) {
+    page = tool.children
+  } else {
+    page = pages.find((p) => at(p.path))?.children ?? null
+  }
+
+  return (
+    <AppHub
+      app={app}
+      items={rows.map(({ path, icon, label }) => ({ path, icon, label }))}
+      currentPath={currentPath}
+      onNavigate={onNavigate}
+      iconComponent={iconComponent}
+      home={home}
+      walkthrough={walkthrough}
+      settings={settings}
+      shortcuts={shortcuts}
+      themeToggle={themeToggle}
+      shortcutsKey={shortcutsKey}
+      masthead={masthead}
+      /* the tool sits on bare surface-primary, full-bleed; every other page keeps the Hub's wash */
+      shell={{ ...(tool && at(tool.path) ? { pageWash: null } : null), ...shell }}
+    >
+      {page}
+    </AppHub>
+  )
+}

package/src/CatalogPage.jsx

@@ -42,7 +42,8 @@ import WalkthroughPanel from './WalkthroughPanel.jsx'
  *                                 list · `kol-tone-secondary` on the root · the All / Recent view strip; `toCard` returns
  *                                 the deck's fields and handlers — `title date bytes count cover href onNavigate onDownload
  *                                 onFavourite onDelete favourited` — and the page renders the slots. Explicit props win.
- * @param {Object}   header        PageHeader props — `{ title, subtitle, size, voice, eyebrow }`
+ * @param {Object}   header        PageHeader props — `{ title, subtitle, size, voice, eyebrow, masthead }`; inside a
+ *                                 Shell the app's masthead wins, and a Catalog with NO Shell sets `masthead` here (2026-09-29)
  * @param {Array}    items         the objects `ContentFilters` filters and searches
  * @param {Function} toCard        (item, { view, layout }) => card props (see above)
  * @param {string}   filtersTitle  ContentFilters' title (e.g. "All Chromes")

package/src/HubHome.jsx

@@ -11,13 +11,13 @@ import CatalogPage from './CatalogPage.jsx'
  * that button's Close label, a "Get started" last step — and the case of the view
  * labels had already drifted. They are made here once.
  *
- * THE WALKTHROUGH IS OPT-IN (user, 2026-09-26, on media-shell): it never opens by
+ * THE WALKTHROUGH IS OPT-IN (user, 2026-09-26, on media-hub): it never opens by
  * itself. The Walkthrough button at the end of the action row opens it; the X inside
  * the card and the same button close it.
  *
  * @param {Object}   app          `{ name, subtitle }` — the masthead, when Home is the app's front door
  * @param {string}   title · subtitle  Home's own masthead instead — for a Home that is not the front
- *                                door (media-shell's Library at `/library`, 2026-09-26: it said "Media")
+ *                                door (media-hub's Library at `/library`, 2026-09-26: it said "Media")
  * @param {Array|Function} items  the catalog's items, or `(view) => items` — RECENT
  *                                and SAVED are different sets in every app
  * @param {Array}    views        the view strip (default RECENT · SAVED); rename a set by
@@ -25,7 +25,7 @@ import CatalogPage from './CatalogPage.jsx'
  * @param {Array}    walkthrough  steps (WalkthroughPanel's); a step whose `actions` is a
  *                                FUNCTION gets `close` — the "Get started" step's buttons
  * @param {ReactNode} actions     the app's buttons; the Walkthrough button follows them
- * THE LIST IS THE FILE ROW, one per line (user, 2026-09-26, on apps/shell: CatalogPage's
+ * THE LIST IS THE FILE ROW, one per line (user, 2026-09-26, on apps/hub: CatalogPage's
  * 36px `catalog` row four across "both a bad hover state and using columns wrong"; brand's
  * library row is the reference) — `rowVariant="file"` + `listLayout="stack"`: the ruled
  * 48px thumb row, `date` · `size` · `actions` from `toCard`. Only the Hub's default —

package/src/NavRail.jsx

@@ -221,7 +221,9 @@ function RailItem({ icon, path, label, sub, currentPath, onNavigate, iconCompone
             iconSize={16}
             iconComponent={iconComponent}
             variant="nav"
-            size="sm"
+            /* md, the row's rung — at sm it stood 26 beside the 32 glyph button (render gate R1,
+             * one row one size, found on apps/editor's labs rail 2026-09-29) */
+            size="md"
             className="shrink-0"
             style={{ color: 'var(--kol-oq-96)' }}
             aria-expanded={open}

package/src/PhoneNav.jsx

@@ -0,0 +1,78 @@
+import { useEffect, useState } from 'react'
+import { Button, MobileTabBar } from '@kolkrabbi/kol-component'
+
+/* taxonomy-ok: molecule — MobileTabBar + a More sheet of Buttons */
+
+/**
+ * PhoneNav — the rail, on a phone, as a bottom bar (AppShell `touch="bar"`, apps review
+ * 2026-09-29). The user: *"what about when there are like 10 pages? … this seems like something
+ * shell or hub should account for and ship, but not have per app fixes."*
+ *
+ * Up to FIVE destinations sit in the bar. More than five → the first FOUR, then **More**, a sheet
+ * holding the rest (Settings included). Ten pages = four + More. The bar is kol-component's
+ * `MobileTabBar` — the pill media already floated — not a second bar.
+ *
+ * Active = the rail's rule: `/` exact, anything else by prefix, the longest match wins. A
+ * destination inside More lights More.
+ *
+ * @param {Array}    items        `{ icon, path, label }` in rail order, bottom rows last
+ * @param {string}   currentPath
+ * @param {Function} onNavigate   `(path) => void`
+ */
+const MORE = '__more'
+const MAX = 5
+
+const activePath = (items, path) => items
+  .filter((i) => (i.path === '/' ? path === '/' : path === i.path || path.startsWith(`${i.path}/`)))
+  .sort((a, b) => b.path.length - a.path.length)[0]?.path
+
+export default function PhoneNav({ items = [], currentPath = '/', onNavigate }) {
+  const [open, setOpen] = useState(false)
+  useEffect(() => { setOpen(false) }, [currentPath])
+  useEffect(() => {
+    if (!open) return undefined
+    const onKey = (e) => { if (e.key === 'Escape') setOpen(false) }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [open])
+
+  const overflow = items.length > MAX
+  const inBar = overflow ? items.slice(0, MAX - 1) : items
+  const inMore = overflow ? items.slice(MAX - 1) : []
+  const active = activePath(items, currentPath)
+  const value = open || inMore.some((i) => i.path === active) ? MORE : active
+
+  const tabs = inBar.map((i) => ({ value: i.path, label: i.label, icon: i.icon }))
+  if (overflow) tabs.push({ value: MORE, label: 'More', icon: 'more' })
+
+  return (
+    <>
+      {open && (
+        /* a BUTTON scrim — iOS does not bubble a tap from a div (OverlayScrimTapDismiss, 2026-09-01) */
+        <button type="button" aria-label="Close more" className="kol-phone-nav-scrim kol-overlay-scrim" onClick={() => setOpen(false)} />
+      )}
+      {open && (
+        <div className="kol-phone-nav-more" role="menu" aria-label="More">
+          {inMore.map((i) => (
+            <Button
+              key={i.path}
+              variant="nav"
+              size="md"
+              iconLeft={i.icon}
+              aria-current={i.path === active ? 'page' : undefined}
+              className="w-full justify-start"
+              onClick={() => { setOpen(false); onNavigate?.(i.path) }}
+            >
+              {i.label}
+            </Button>
+          ))}
+        </div>
+      )}
+      <MobileTabBar
+        tabs={tabs}
+        value={value}
+        onChange={(v) => (v === MORE ? setOpen((o) => !o) : onNavigate?.(v))}
+      />
+    </>
+  )
+}

package/src/WalkthroughPanel.jsx

@@ -10,7 +10,7 @@ import { Button } from '@kolkrabbi/kol-component'
  * a step with `actions` renders that node centred instead of the text/image
  * split (the "Get started" step).
  *
- * `onClose` draws an X INSIDE the card, top-right (user, 2026-09-26, on media-shell:
+ * `onClose` draws an X INSIDE the card, top-right (user, 2026-09-26, on media-hub:
  * the panel had no close of its own, so every app put one outside the card or on a
  * page button). Unset = no X, exactly as before.
  */

package/src/index.js

@@ -14,6 +14,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 PhoneNav } from './PhoneNav.jsx'
 export { default as PageShell, PageBleed } from './PageShell.jsx'
 /* PageHeader MOVED to @kolkrabbi/kol-component 2026-09-03 (page-header-one-masthead).
  * Not re-exported: every kol-shell consumer already has kol-component as a peer,
@@ -24,7 +25,8 @@ export { default as PageShell, PageBleed } from './PageShell.jsx'
 export { default as TabStrip } from './TabStrip.jsx'
 export { default as SettingsScaffold } from './SettingsScaffold.jsx'
 export { default as WalkthroughPanel } from './WalkthroughPanel.jsx'
-export { default as ShortcutsOverlay } from './ShortcutsOverlay.jsx'
+/* lives in kol-component since 0.228.0 — re-exported so every kol-shell import keeps resolving */
+export { ShortcutsOverlay } from '@kolkrabbi/kol-component'
 export { default as Logomark } from './Logomark.jsx'
 // the app tier, shipped once (ShellHomeSystem, kol-fxr 2026-08-27)
 export { default as CatalogPage } from './CatalogPage.jsx'
@@ -35,3 +37,5 @@ export { default as TouchDeviceOverlay, useTouchPrimary } from './TouchDeviceOve
 export { default as AppHub } from './AppHub.jsx'
 export { default as HubHome } from './HubHome.jsx'
 export { default as HubSettings } from './HubSettings.jsx'
+// the Studio — the Hub + Home · Library · Create · Use · pages · Settings, the workstation (apps review §6c, 2026-09-29)
+export { default as AppStudio } from './AppStudio.jsx'

package/src/ShortcutsOverlay.jsx

@@ -1,100 +0,0 @@
-import { useEffect } from 'react'
-import { SettingsSections } from '@kolkrabbi/kol-component'
-
-/**
- * ShortcutsOverlay — the keyboard-shortcut sheet: blurred scrim, centred
- * panel, a 2-col grid (label · keys), Esc / backdrop-click close.
- * Ported from the shared cut (mirror's, "copied from kol-monitor").
- *
- * `shortcuts` is a prop — feed the SAME array your settings page renders
- * (both repos hand-maintained the list twice and both pairs drifted).
- * Stacks at `--kol-z-modal`, above the rail's sticky tier.
- *
- * TWO FORMS, DETECTED ON SHAPE (ShortcutsOverlaySections, kol-fxr 2026-08-15):
- *
- *   flat       `[{ label, keys }]`                  — one grid, as shipped
- *   sectioned  `[{ section, items: [{label,keys}] }]` — headings between groups
- *
- * The flat form renders EXACTLY as it did before, so no existing caller moves.
- * The sectioned form exists because a real keymap is grouped — kol-fxr's is
- * Edit · Selection · Layer · Tools · View, and its `shortcutsBySection()`
- * already emits this shape — and flattening it to adopt this component would
- * have lost the grouping. That consumer kept a 99-line local overlay instead,
- * which is the duplication this component exists to end.
- *
- * ONE COMPONENT WITH THE SETTINGS PAGE AND THE DRAWER (user, 2026-09-03:
- * *"align it more to the settings sidebar"* → *"lets normalise a component
- * they can grab"*). This sheet and `SettingsShortcuts` render the SAME keymap
- * array and had drifted into two anatomies — a bespoke two-column grid with a
- * plain `text-fg-32` heading and hand-rolled `<span>` pairs here, against
- * eyebrow sections over `SettingsRow`s there, down to the combo being `fg-96`
- * in one and `fg-32` in the other. Both go through `SettingsSections` now, the
- * same call the settings page and the settings drawer use, so a shortcut reads
- * identically wherever it is shown and a change to the row lands in all of
- * them. The FRAME stays each one's own: a scrim and a centred sheet here, a
- * six-column grid on the page, a right-anchored drawer over the thing you are
- * looking at.
- *
- * `keys` is a DISPLAY STRING and is never bound — this component shows a
- * keymap, it does not own one. Formatting a combo (⌘⇧Z) is the consumer's,
- * next to wherever the binding actually lives.
- *
- * @param {Array} props.shortcuts - `[{ label, combo }]` or `[{ section, items: [{ id, label, combo }] }]` — the same array `SettingsShortcuts` takes (ShellHomeSystemMonitorGaps, kol-monitor 2026-08-27: the overlay read `keys` while the settings block read `combo`; `combo` is the name, `keys` is tolerated for a release)
- * @param {Function} props.onClose
- */
-
-const isSectioned = (list) => Array.isArray(list?.[0]?.items)
-
-/* A shortcut as a settings ROW: the label on the left, the combo as the row's
- * value. `labelWidth="auto"` makes the label yield and the combo hug — a combo
- * is one token by nature and must not wrap. */
-const toRow = ({ label, combo, keys }) => ({
-  label,
-  align: 'fill',
-  labelWidth: 'auto',
-  value: <span className="text-fg-32 kol-helper-12 whitespace-nowrap">{combo ?? keys}</span>,
-})
-
-export default function ShortcutsOverlay({ shortcuts = [], onClose }) {
-  useEffect(() => {
-    const onKey = (e) => { if (e.key === 'Escape') onClose?.() }
-    window.addEventListener('keydown', onKey)
-    return () => window.removeEventListener('keydown', onKey)
-  }, [onClose])
-
-  const sectioned = isSectioned(shortcuts)
-
-  return (
-    <div
-      onClick={onClose}
-      /* THE scrim (overlay-scrim-outliers, kol-client-olina 2026-09-03; user: "we
-         removed the blur and put just color on the background … we missed this").
-         This drew its own — an 8 % inverse wash plus a 2px blur — after the
-         2026-09-01 no-blur ruling and the one-tint-48 class. */
-      className="fixed inset-0 select-none kol-overlay-scrim"
-      style={{ display: 'grid', placeItems: 'center', zIndex: 'var(--kol-z-modal)' }}
-    >
-      {/* `bg-oq-04`, not `bg-surface-primary` (user, 2026-09-03: *"this is too
-          bright"*). Over a near-black editor canvas the raised page surface
-          reads as a lit slab, and an `fg-16` stroke on top of it was the
-          brightest edge on screen. The OPAQUE ramp is right here: the sheet
-          must not let the canvas through, and `oq-04` is a 4 % lift off the
-          ground rather than a surface from the page's own ladder — so the
-          panel separates from the scrimmed canvas without a stroke. */}
-      <div
-        /* THE SHEET FITS THE WINDOW (editor review #4, 2026-09-27): a long keymap — the design
-         * editor's is six sections — ran past both edges of the viewport with no way to reach the
-         * rest. Capped to the window less a margin, scrolling inside. */
-        className="kol-shortcuts-panel text-fg-64 kol-helper-12 bg-oq-04 flex flex-col gap-6 overflow-y-auto"
-        style={{ padding: 24, borderRadius: 4, maxHeight: 'calc(100dvh - 48px)' }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <SettingsSections
-          sections={sectioned
-            ? shortcuts.map(({ section, items = [] }) => ({ label: section, rowGap: 1, rows: items.map(toRow) }))
-            : [{ rowGap: 1, rows: shortcuts.map(toRow) }]}
-        />
-      </div>
-    </div>
-  )
-}