@kolkrabbi/kol-shell 0.8.0 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "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-component": "^0.106.0",
     "@kolkrabbi/kol-framework": "^0.28.0",
-    "@kolkrabbi/kol-theme": "^0.68.0"
+    "@kolkrabbi/kol-icons": "^0.20.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/SettingsScaffold.jsx

@@ -68,7 +68,9 @@ export function SettingsSection({ title, children }) {
 export function LabelRow({ label, align = 'baseline', children }) {
   return (
     <div style={{ display: 'flex', gap: 12, alignItems: align }}>
-      <span className="text-fg-48 kol-helper-12" style={{ width: 160, flexShrink: 0 }}>{label}</span>
+      {/* 160 wide, but it yields and truncates when the row is squeezed — the label
+        * is the prose, the value is the datum (SettingsShortcutsComboWrap, 2026-08-27) */}
+      <span className="text-fg-48 kol-helper-12 truncate" style={{ flex: '0 1 160px', minWidth: 0 }}>{label}</span>
       {typeof children === 'string'
         ? <span className="text-fg-32 kol-helper-12">{children}</span>
         : children}

package/src/SettingsShortcuts.jsx

@@ -5,7 +5,10 @@ import { LabelRow } from './SettingsScaffold.jsx'
  * (ShellHomeSystem, kol-fxr 2026-08-27): the same `[{ section, items: [{ id,
  * label, combo }] }]` array `ShortcutsOverlay` takes, laid out six columns ×
  * two sections per column, filled column-first (user, 2026-08-27) — each
- * section an eyebrow (`kol-eyebrow`, strong ink) over LabelRows.
+ * section an eyebrow (`kol-eyebrow`, strong ink) over LabelRows. A combo is one
+ * token by nature — the value cell is `whitespace-nowrap` and the label yields
+ * (SettingsShortcutsComboWrap, kol-monitor 2026-08-27: `⌘ K` broke as `⌘` over
+ * `K` in the six-column grid — the cell was squeezed to min-content, not full).
  *
  * @param {Array}    sections    `[{ section, items: [{ id, label, combo }] }]`
  * @param {Function} comboLabel  (combo) => string (default: the combo as given)
@@ -17,7 +20,9 @@ export default function SettingsShortcuts({ sections = [], comboLabel = (c) => c
         <div key={section} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
           <span className="kol-eyebrow text-strong mb-2">{section}</span>
           {items.map((k) => (
-            <LabelRow key={k.id ?? k.label} label={k.label}>{comboLabel(k.combo)}</LabelRow>
+            <LabelRow key={k.id ?? k.label} label={k.label}>
+              <span className="text-fg-32 kol-helper-12 whitespace-nowrap">{comboLabel(k.combo)}</span>
+            </LabelRow>
           ))}
         </div>
       ))}

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>