@kolkrabbi/kol-shell 0.64.0 → 0.65.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.64.0",
+  "version": "0.65.0",
   "private": false,
   "description": "The application shell",
   "license": "MIT",
@@ -12,7 +12,7 @@
     "./src/*": "./src/*"
   },
   "peerDependencies": {
-    "@kolkrabbi/kol-component": ">=0.246.0",
+    "@kolkrabbi/kol-component": ">=0.265.0",
     "@kolkrabbi/kol-icons": ">=0.16.0",
     "@kolkrabbi/kol-theme": ">=0.165.0",
     "gsap": "^3.13.0",
@@ -20,10 +20,10 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@kolkrabbi/kol-component": "^0.265.0",
+    "@kolkrabbi/kol-icons": "^0.39.0",
     "@kolkrabbi/kol-framework": "^0.49.0",
-    "@kolkrabbi/kol-theme": "^0.174.0",
-    "@kolkrabbi/kol-icons": "^0.38.0",
-    "@kolkrabbi/kol-component": "^0.261.0"
+    "@kolkrabbi/kol-theme": "^0.174.0"
   },
   "files": [
     "src",

package/src/AppHub.jsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import AppShell from './AppShell.jsx'
 import HubHome from './HubHome.jsx'
 import HubSettings from './HubSettings.jsx'
+import HubDev from './HubDev.jsx'
 import { ShortcutsOverlay } from '@kolkrabbi/kol-component'
 
 /* taxonomy-ok: organism — nests AppShell / HubHome / HubSettings / ShortcutsOverlay (relative) */
@@ -37,6 +38,9 @@ import { ShortcutsOverlay } from '@kolkrabbi/kol-component'
  *                              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 {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)
  * @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)
@@ -55,6 +59,7 @@ export default function AppHub({
   home,
   walkthrough,
   settings,
+  dev,
   shortcuts = [],
   themeToggle,
   settingsPath = '/settings',
@@ -79,12 +84,18 @@ export default function AppHub({
     return () => window.removeEventListener('keydown', onKey)
   }, [shortcutsKey])
 
+  /* the dev page is a dev server's only — a production build never routes it or draws its row */
+  const devOn = !!dev && (dev.always || !!import.meta.env?.DEV)
+  const devPath = dev?.path ?? '/dev'
+  const { path: _dp, always: _da, ...devProps } = dev ?? {}
   const page = home && currentPath === homePath
     ? <HubHome app={app} iconComponent={iconComponent} walkthrough={walkthrough} {...home} />
     : settings && currentPath === settingsPath
       ? <HubSettings app={app} shortcuts={shortcuts} themeToggle={themeToggle} {...settings} />
-      : children
-  const bottom = settings ? SETTINGS_ROW(settingsPath) : []
+      : 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 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]
 
@@ -111,7 +122,7 @@ export default function AppHub({
       {...shell}
     >
       {page}
-      {sheet && <ShortcutsOverlay shortcuts={shortcuts} onClose={() => setSheet(false)} />}
+      {sheet && <ShortcutsOverlay shortcuts={shortcuts} currentPath={currentPath} onClose={() => setSheet(false)} />}
     </AppShell>
   )
 }

package/src/AppStudio.jsx

@@ -37,6 +37,7 @@ import PageShell from './PageShell.jsx'
  * @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 {Object} [dev]        HubDev's props — AppHub's `dev`: a dev server's `code` page at `/dev`
  * @param {'mono'|'display'} [masthead='mono']
  * @param {Object} [shell]      any AppShell prop, spread last
  */
@@ -51,6 +52,7 @@ export default function AppStudio({
   use,
   pages = [],
   settings,
+  dev,
   walkthrough,
   shortcuts,
   themeToggle,
@@ -92,6 +94,7 @@ export default function AppStudio({
       home={home}
       walkthrough={walkthrough}
       settings={settings}
+      dev={dev}
       shortcuts={shortcuts}
       themeToggle={themeToggle}
       shortcutsKey={shortcutsKey}

package/src/HubDev.jsx

@@ -0,0 +1,46 @@
+import { useState } from 'react'
+import { PageHeader } from '@kolkrabbi/kol-component'
+import PageShell from './PageShell.jsx'
+import TabStrip from './TabStrip.jsx'
+
+/* taxonomy-ok: organism — nests PageShell / TabStrip (relative) + kol-component's PageHeader */
+
+const read = (key, fallback) => { try { return localStorage.getItem(key) ?? fallback } catch { return fallback } }
+const write = (key, value) => { try { localStorage.setItem(key, value) } catch { /* private mode: the tab just resets */ } }
+
+/**
+ * HubDev — A hub's development page. The one rail row for everything that is not the app yet: experiments,
+ * references, comparisons (CompareGridDevTab, kol-monitor 2026-10-17 — user: *"I would also maybe add
+ * 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
+ * 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.
+ *
+ * @param {Array}  tabs        `[{ value, label, description?, content }]`
+ * @param {string} [title='Dev']
+ * @param {string} [subtitle]  one line: what the page is
+ * @param {string} [storageKey] where the open tab is remembered
+ */
+export default function HubDev({ tabs = [], title = 'Dev', subtitle = 'Experiments and reference, not the app', storageKey = 'kol-dev-tab' }) {
+  const [stored, setStored] = useState(() => read(storageKey, tabs[0]?.value))
+  const active = tabs.find((t) => t.value === stored) ?? tabs[0]
+  const pick = (v) => { setStored(v); write(storageKey, v) }
+
+  return (
+    <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">
+          <TabStrip options={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>
+      )}
+      {active && <div className="min-w-0">{active.content}</div>}
+    </PageShell>
+  )
+}

package/src/index.js

@@ -26,7 +26,7 @@ export { default as TabStrip } from './TabStrip.jsx'
 export { default as SettingsScaffold } from './SettingsScaffold.jsx'
 export { default as WalkthroughPanel } from './WalkthroughPanel.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 { ShortcutsOverlay, shortcutInScope } 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'
@@ -37,6 +37,7 @@ 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'
+export { default as HubDev } from './HubDev.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'
 // a consumer slot in the opened rail — the page portals into it (NavRailConsumerSlot, kol-monitor 2026-10-15)