@kolkrabbi/kol-shell 0.47.0 → 0.49.0

package/package.json

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

package/src/CatalogPage.jsx

@@ -1,3 +1,4 @@
+import { useCallback, useRef, useState } from 'react'
 import { ContentCard, ContentFilters, ContentRow } from '@kolkrabbi/kol-component'
 import PageShell from './PageShell.jsx'
 import { PageHeader } from '@kolkrabbi/kol-component'
@@ -52,7 +53,8 @@ import WalkthroughPanel from './WalkthroughPanel.jsx'
  *                                 `bleed` (default) fills the window — the app tier; `capped` centres on the
  *                                 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 {number}    minColumn      the grid track's floor in px (default 160) — a minimum, never a count
+ * @param {number}    maxColumns     the grid's ceiling (default 6, the ruling); a three-deck shelf passes 3 and the tracks share the width
  * @param {string}    cardVariant    the grid card's variant, per page (default `catalog`); `toCard` may return `variant` per card
  * @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 —
  *                                 its slots (`date` · `size` · `meta` · `selected`) come from `toCard` like everything else
@@ -103,6 +105,10 @@ 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 ceiling — the six-column ruling is a MAXIMUM; a three-deck shelf says 3
+     (kol-client-olina 2026-09-03; user: "why are the cards so small? they could
+     use 2 columns each" — raising the floor to force it was backwards) */
+  maxColumns = 6,
   /* 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
@@ -124,8 +130,32 @@ export default function CatalogPage({
   style,
 }) {
   const open = walkthrough?.open === true
+  /* THE TRACK COUNT, MEASURED (CatalogFilterFirstGroupTrackCount, 2026-09-03).
+   * `.kol-catalog-grid` and `.kol-filters-first` both read `--kol-catalog-n`
+   * from the page: up to 6 tracks, none narrower than `minColumn`, gap 24 —
+   * `min(6, floor((W + 24) / (minColumn + 24)))`, exactly what the old inline
+   * `auto-fill` resolved to, now a number the filter row can read too. In JS
+   * because the CSS form (`round()` over a length ÷ length) is Chromium-only —
+   * theme 0.137.0 rendered ONE column in Firefox. `undefined` until measured
+   * → the theme's fallback of 6, the pre-0.137.0 geometry. */
+  const [cols, setCols] = useState(null)
+  const observer = useRef(null)
+  /* a CALLBACK ref: the grid mounts and unmounts with the layout toggle, and a
+   * callback ref sees both — an effect keyed on a value out of this scope does
+   * not (the first cut referenced `renderItem`'s `layout` here and threw) */
+  const gridRef = useCallback((el) => {
+    observer.current?.disconnect()
+    observer.current = null
+    if (!el) return
+    const measure = (W) => setCols((c) => { const n = Math.max(1, Math.min(maxColumns, Math.floor((W + 24) / (minColumn + 24)))); return c === n ? c : n })
+    measure(el.getBoundingClientRect().width)
+    const ro = new ResizeObserver(([entry]) => measure(entry.contentRect.width))
+    ro.observe(el)
+    observer.current = ro
+  }, [minColumn, maxColumns])
+
   return (
-    <PageShell width={width} className={className} style={{ overflow: 'hidden', '--kol-catalog-min': `${minColumn}px`, ...style }}>
+    <PageShell width={width} className={className} style={{ overflow: 'hidden', '--kol-catalog-n': cols ?? undefined, ...style }}>
       {header && <PageHeader {...header} />}
       <div style={{ flex: 1, position: 'relative' }}>
         {open && <WalkthroughPanel steps={walkthrough.steps} iconComponent={walkthrough.iconComponent} />}
@@ -161,10 +191,10 @@ export default function CatalogPage({
               * six-column ruling — below the ceiling the hide-set is
               * desktop-only geometry. */
             return (
-            /* 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' ? (listLayout === 'stack' ? { display: 'flex', flexDirection: 'column', gap: 8 } : { display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(min(100%, max(240px, calc((100% - 3 * 8px) / 4))), 1fr))', gap: 8 }) : undefined}>
+            /* the catalog grid is a CLASS (`.kol-catalog-grid`, kol-theme ≥0.138.0) reading
+             * `--kol-catalog-n`, the count measured above and set on PageShell — the same
+             * number the filter row's first group reads */
+            <div ref={layout === 'list' ? undefined : gridRef} className={layout === 'list' ? undefined : 'kol-catalog-grid'} style={layout === 'list' ? (listLayout === 'stack' ? { display: 'flex', flexDirection: 'column', gap: 8 } : { 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]