@kolkrabbi/kol-shell 0.9.0 → 0.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "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-framework": "^0.28.0",
-    "@kolkrabbi/kol-icons": "^0.20.0",
-    "@kolkrabbi/kol-component": "^0.106.0",
-    "@kolkrabbi/kol-theme": "^0.71.0"
+    "@kolkrabbi/kol-component": "^0.107.0",
+    "@kolkrabbi/kol-theme": "^0.72.0",
+    "@kolkrabbi/kol-icons": "^0.22.0",
+    "@kolkrabbi/kol-framework": "^0.28.0"
   },
   "files": [
     "src",

package/src/CatalogPage.jsx

@@ -18,10 +18,13 @@ 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, expanded, expandedContent }` is the
- * whole contract — `expanded` / `expandedContent` reach `ContentCard catalog`'s
+ * media, actions, onClick, href, onNavigate, expanded, expandedContent, fit }` 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
+ * stays the consumer's); `fit` (`cover` default | `natural` | `compact`) is the
+ * card's media fit, PER CARD because one catalog mixes photographs (cover) and
+ * diagrams (natural) — CatalogPageCardFit, kol-monitor: a rack preview wider
+ * than the card lost its left rail to `cover`. 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 }`
@@ -94,7 +97,7 @@ 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} expanded={c.expanded} expandedContent={c.expandedContent} />
+                  : <ContentCard key={key} variant="catalog" fit={c.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>
           )}

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>
       ))}