@kolkrabbi/kol-shell 0.41.0 → 0.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.41.0",
+  "version": "0.42.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.174.0",
-    "@kolkrabbi/kol-framework": "^0.37.0",
+    "@kolkrabbi/kol-component": "^0.176.0",
+    "@kolkrabbi/kol-framework": "^0.40.0",
     "@kolkrabbi/kol-icons": "^0.25.0",
-    "@kolkrabbi/kol-theme": "^0.132.1"
+    "@kolkrabbi/kol-theme": "^0.134.0"
   },
   "files": [
     "src",

package/src/CatalogPage.jsx

@@ -18,7 +18,7 @@ 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, fit }` is
+ * media, actions, onClick, href, onNavigate, expanded, expandedContent, fit, ratio }` is
  * the whole contract — `expanded` / `expandedContent` reach `ContentCard catalog`'s
  * 2×2 cell (ShellHomeSystemMonitorGaps, kol-monitor 2026-08-27) — and the page
  * HIDES the cell's three neighbours itself (CatalogPageMonitorParity: the
@@ -27,7 +27,10 @@ import WalkthroughPanel from './WalkthroughPanel.jsx'
  * instead of reflowing around the expanded card); `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
+ * than the card lost its left rail to `cover`; `ratio` (catalogpage-card-ratio, kol-client-olina
+ * 2026-09-03) is the card's aspect, PER CARD for the same reason — one page renders the same artwork
+ * at 1:1, 4:5 and 9:16 side by side, and a deck is a 16:9 stage — unset falling through to the
+ * variant's A4, so nothing existing moves. 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 }`
@@ -131,7 +134,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={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} />
+                  : <ContentCard key={key} variant="catalog" fit={c.fit ?? 'cover'} ratio={c.ratio} 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>
             )