@kolkrabbi/kol-shell 0.44.0 → 0.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.44.0",
+  "version": "0.46.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",
@@ -14,7 +14,7 @@
   "peerDependencies": {
     "@kolkrabbi/kol-component": ">=0.174.0",
     "@kolkrabbi/kol-icons": ">=0.16.0",
-    "@kolkrabbi/kol-theme": ">=0.136.0",
+    "@kolkrabbi/kol-theme": ">=0.137.0",
     "gsap": "^3.13.0",
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0"
@@ -23,7 +23,7 @@
     "@kolkrabbi/kol-component": "^0.176.0",
     "@kolkrabbi/kol-framework": "^0.41.0",
     "@kolkrabbi/kol-icons": "^0.25.0",
-    "@kolkrabbi/kol-theme": "^0.136.0"
+    "@kolkrabbi/kol-theme": "^0.137.0"
   },
   "files": [
     "src",

package/src/CatalogPage.jsx

@@ -50,6 +50,7 @@ import WalkthroughPanel from './WalkthroughPanel.jsx'
  *                                 framework container — the site tier, so a brand book adopting this page keeps its geometry
  * @param {ReactNode} trailingActions  the header's RIGHT slot (ContentFilters' — MediaLibrary's SELECT / FLAT); never empty beside the divider
  * @param {number}    minColumn      the grid track's floor in px (default 160); a shelf of three decks passes 280 — the six-track ceiling still applies
+ * @param {'catalog'|'file'} rowVariant  the list row (default `catalog`, the 36px no-thumb row); `file` = the 48px thumb row, for a catalog whose grid shows a cover
  * @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'] }`
@@ -96,6 +97,12 @@ export default function CatalogPage({
   /* the grid track's floor. 160 is a 26-tile catalog's; a shelf of three decks
      wants ~280 so the cards read at all. A ceiling of 6 tracks still applies. */
   minColumn = 160,
+  /* the LIST row's variant. `catalog` (default) is the 36px GridCard row — title
+     and detail on one line, no thumb — which is what every app-tier list was
+     ruled on (CatalogPageMonitorParity). A catalog whose grid shows a cover
+     passes `file`: the 48px thumb row, so the list shows the same cover small
+     (kol-client-olina 2026-09-03; user, on the bare row: "ugly ugly ugly"). */
+  rowVariant = 'catalog',
   iconComponent,
   showCountOnlyWhenFiltering = true,
   filtersProps,
@@ -105,7 +112,7 @@ export default function CatalogPage({
 }) {
   const open = walkthrough?.open === true
   return (
-    <PageShell width={width} className={className} style={{ overflow: 'hidden', ...style }}>
+    <PageShell width={width} className={className} style={{ overflow: 'hidden', '--kol-catalog-min': `${minColumn}px`, ...style }}>
       {header && <PageHeader {...header} />}
       <div style={{ flex: 1, position: 'relative' }}>
         {open && <WalkthroughPanel steps={walkthrough.steps} iconComponent={walkthrough.iconComponent} />}
@@ -141,13 +148,16 @@ export default function CatalogPage({
               * six-column ruling — below the ceiling the hide-set is
               * desktop-only geometry. */
             return (
-            <div style={{ display: 'grid', gridTemplateColumns: layout === 'list' ? 'repeat(auto-fill, minmax(min(100%, max(240px, calc((100% - 3 * 8px) / 4))), 1fr))' : `repeat(auto-fill, minmax(min(100%, max(${minColumn}px, calc((100% - 5 * 24px) / 6))), 1fr))`, gap: layout === 'list' ? 8 : 24 }}>
+            /* the catalog grid is a CLASS (`.kol-catalog-grid`, kol-theme ≥0.137.0) so the
+             * filter row's first group can read the track count it renders; `minColumn`
+             * reaches it as `--kol-catalog-min` on the page (set on PageShell above) */
+            <div className={layout === 'list' ? undefined : 'kol-catalog-grid'} style={layout === 'list' ? { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%, max(240px, calc((100% - 3 * 8px) / 4))), 1fr))', gap: 8 } : undefined}>
               {rows.map((item, i) => {
                 if (hidden.has(i)) return null
                 const c = cards[i]
                 const key = c.key ?? item.key ?? item.id ?? item.name ?? i
                 return layout === 'list'
-                  ? <ContentRow key={key} variant="catalog" media={c.media} ratio={c.ratio} title={c.title} detail={c.detail} actions={c.actions} onClick={c.onClick} href={c.href} onNavigate={c.onNavigate} />
+                  ? <ContentRow key={key} variant={rowVariant} media={c.media} ratio={c.ratio} 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'} 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>