@kolkrabbi/kol-shell 0.65.0 → 0.66.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.65.0",
+  "version": "0.66.0",
   "private": false,
   "description": "The application shell",
   "license": "MIT",
@@ -12,7 +12,7 @@
     "./src/*": "./src/*"
   },
   "peerDependencies": {
-    "@kolkrabbi/kol-component": ">=0.265.0",
+    "@kolkrabbi/kol-component": ">=0.266.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-component": "^0.266.0",
     "@kolkrabbi/kol-icons": "^0.39.0",
-    "@kolkrabbi/kol-framework": "^0.49.0",
-    "@kolkrabbi/kol-theme": "^0.174.0"
+    "@kolkrabbi/kol-theme": "^0.174.0",
+    "@kolkrabbi/kol-framework": "^0.50.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 { ShortcutsOverlay } from '@kolkrabbi/kol-component'
+import { CommandOverlay } from '@kolkrabbi/kol-component'
 
-/* taxonomy-ok: organism — nests AppShell / HubHome / HubSettings / ShortcutsOverlay (relative) */
+/* taxonomy-ok: organism — nests AppShell / HubHome / HubSettings / HubDev (relative) + kol-component's CommandOverlay */
 
 /**
  * AppHub — An app's shell and hub in one. Shell + Hub in one call; the app passes its Tool as children (the app anatomy,
@@ -70,6 +70,7 @@ export default function AppHub({
   children,
 }) {
   const [sheet, setSheet] = useState(false)
+  const [sheetQuery, setSheetQuery] = useState('')
 
   useEffect(() => {
     if (!shortcutsKey) return undefined
@@ -122,7 +123,9 @@ export default function AppHub({
       {...shell}
     >
       {page}
-      {sheet && <ShortcutsOverlay shortcuts={shortcuts} currentPath={currentPath} onClose={() => setSheet(false)} />}
+      {/* 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('') }} />
     </AppShell>
   )
 }

package/src/HubDev.jsx

@@ -1,9 +1,8 @@
 import { useState } from 'react'
-import { PageHeader } from '@kolkrabbi/kol-component'
+import { PageHeader, TabsRow } 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 */
+/* taxonomy-ok: organism — nests PageShell (relative) + kol-component's PageHeader / TabsRow */
 
 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 */ } }
@@ -36,7 +35,7 @@ export default function HubDev({ tabs = [], title = 'Dev', subtitle = 'Experimen
       <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 />
+          <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>
       )}

package/src/PhoneNav.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Button, MobileTabBar } from '@kolkrabbi/kol-component'
+import { Button, TabsRow } from '@kolkrabbi/kol-component'
 
 /* taxonomy-ok: molecule — MobileTabBar + a More sheet of Buttons */
 
@@ -68,7 +68,9 @@ export default function PhoneNav({ items = [], currentPath = '/', onNavigate })
           ))}
         </div>
       )}
-      <MobileTabBar
+      <TabsRow
+        look="stacked"
+        placement="phone"
         tabs={tabs}
         value={value}
         onChange={(v) => (v === MORE ? setOpen((o) => !o) : onNavigate?.(v))}

package/src/TabStrip.jsx

@@ -1,34 +1,9 @@
+import { TabsRow } from '@kolkrabbi/kol-component'
+
 /**
- * TabStrip — A row of text tabs. the flat text-tab idiom both shells use twice (ContentFilters
- * view-mode/layout spans, Settings tabs): `kol-helper-14`, active
- * `text-fg-96`, rest `text-fg-32 hover:text-fg-48`.
- *
- * No auto-casing — labels render exactly as authored (the source repos'
- * `text-transform: uppercase` dropped per the DS law; author "GRID" if you
- * want GRID). `tracked` adds the 1px letter-spacing the view-mode strips
- * carried.
- *
- * SINGLE-SELECT ONLY. A `Set` form for multi-select was added 2026-08-15 so the
- * retired ContentFilters fork could render filter values through this — and
- * removed the same day with it. A multi-select, handler-carrying, active/rest
- * chip is a `Tag`; building a second one here under another name in another
- * package is exactly the duplication kol-shell exists to end.
- *
- * @param {Array} props.options  `[{ value, label }]`
+ * @deprecated 2026-10-17 — alias of kol-component's `TabsRow look="text"` (TabsStackedLayout: one tab component). Drops when nobody imports it (04-retirements.md).
+ * TabStrip — Old name for TabsRow's text look. Same props: `options` (`{ value, label }`) · `value` · `onChange` · `size` · `tracked` · `className` · `style`.
  */
-export default function TabStrip({ options = [], value, onChange, size = 14, tracked = false, className = 'gap-6', style }) {
-  return (
-    <div className={`flex items-center ${className}`.trim()} style={style}>
-      {options.map((opt) => (
-        <span
-          key={opt.value}
-          onClick={() => onChange?.(opt.value)}
-          className={`kol-helper-${size} cursor-pointer select-none ${value === opt.value ? 'text-fg-96' : 'text-fg-32 hover:text-fg-48'}`}
-          style={tracked ? { letterSpacing: 1 } : undefined}
-        >
-          {opt.label}
-        </span>
-      ))}
-    </div>
-  )
+export default function TabStrip({ options = [], className = 'gap-6', ...rest }) {
+  return <TabsRow look="text" tabs={options} className={className} {...rest} />
 }