@kolkrabbi/kol-shell 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.8.0",
+  "version": "0.9.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.99.0",
-    "@kolkrabbi/kol-icons": "^0.20.0",
     "@kolkrabbi/kol-framework": "^0.28.0",
-    "@kolkrabbi/kol-theme": "^0.68.0"
+    "@kolkrabbi/kol-icons": "^0.20.0",
+    "@kolkrabbi/kol-component": "^0.106.0",
+    "@kolkrabbi/kol-theme": "^0.71.0"
   },
   "files": [
     "src",

package/src/CatalogPage.jsx

@@ -18,7 +18,11 @@ import WalkthroughPanel from './WalkthroughPanel.jsx'
  *
  * Semantics are the consumer's: what RECENT / SAVED mean, what an item is,
  * what a click does. `toCard(item, { view, layout })` → `{ key, title, detail,
- * media, actions, onClick, href, onNavigate }` is the whole contract.
+ * media, actions, onClick, href, onNavigate, expanded, expandedContent }` is the
+ * whole contract — `expanded` / `expandedContent` reach `ContentCard catalog`'s
+ * 2×2 cell (ShellHomeSystemMonitorGaps, kol-monitor 2026-08-27; neighbour-hiding
+ * stays the consumer's). Anything `ContentFilters` takes that the page has no
+ * prop for goes through `filtersProps` — `mutuallyExclusiveFilters` was the gap.
  *
  * @param {Object}   header        PageHeader props — `{ title, subtitle, size, voice, eyebrow }`
  * @param {Array}    items         the objects `ContentFilters` filters and searches
@@ -34,6 +38,7 @@ import WalkthroughPanel from './WalkthroughPanel.jsx'
  * @param {ReactNode} actions      the bottom row's buttons
  * @param {ElementType} iconComponent  icon renderer seam for ContentFilters
  * @param {boolean}  showCountOnlyWhenFiltering  (default true)
+ * @param {Object}   filtersProps  spread onto ContentFilters last — e.g. `{ mutuallyExclusiveFilters: ['category', 'u_label'] }`
  */
 const LAYOUTS = [
   { value: 'list', label: 'LIST' },
@@ -57,6 +62,7 @@ export default function CatalogPage({
   actions,
   iconComponent,
   showCountOnlyWhenFiltering = true,
+  filtersProps,
   children,
   className = '',
   style,
@@ -88,10 +94,11 @@ export default function CatalogPage({
                 const key = c.key ?? item.key ?? item.id ?? item.name ?? i
                 return layout === 'list'
                   ? <ContentRow key={key} variant="catalog" title={c.title} detail={c.detail} actions={c.actions} onClick={c.onClick} href={c.href} onNavigate={c.onNavigate} />
-                  : <ContentCard key={key} variant="catalog" fit="cover" title={c.title} detail={c.detail} media={c.media} actions={c.actions} onClick={c.onClick} href={c.href} onNavigate={c.onNavigate} />
+                  : <ContentCard key={key} variant="catalog" fit="cover" title={c.title} detail={c.detail} media={c.media} actions={c.actions} onClick={c.onClick} href={c.href} onNavigate={c.onNavigate} expanded={c.expanded} expandedContent={c.expandedContent} />
               })}
             </div>
           )}
+          {...filtersProps}
         />
       </div>
       {children}

package/src/ShortcutsOverlay.jsx

@@ -30,7 +30,7 @@ import { useEffect } from 'react'
  * 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, keys }]` or `[{ section, items }]`
+ * @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
  */
 
@@ -38,10 +38,10 @@ const isSectioned = (list) => Array.isArray(list?.[0]?.items)
 
 /* One row of the shared grid. `contents` keeps the pair on the parent grid
  * rather than making the wrapper a cell of its own. */
-function Row({ label, keys }) {
+function Row({ label, combo, keys }) {
   return (
     <span className="contents">
-      <span>{label}</span><span className="text-fg-96">{keys}</span>
+      <span>{label}</span><span className="text-fg-96">{combo ?? keys}</span>
     </span>
   )
 }
@@ -71,13 +71,13 @@ export default function ShortcutsOverlay({ shortcuts = [], onClose }) {
               >
                 {section}
               </span>
-              {items.map(({ label, keys }) => (
-                <Row key={`${section}:${label}`} label={label} keys={keys} />
+              {items.map(({ label, combo, keys }) => (
+                <Row key={`${section}:${label}`} label={label} combo={combo} keys={keys} />
               ))}
             </span>
           ))
-          : shortcuts.map(({ label, keys }) => (
-            <Row key={label} label={label} keys={keys} />
+          : shortcuts.map(({ label, combo, keys }) => (
+            <Row key={label} label={label} combo={combo} keys={keys} />
           ))}
       </div>
     </div>