@kolkrabbi/kol-shell 0.9.2 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.9.2",
+  "version": "0.10.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",
@@ -12,7 +12,7 @@
     "./src/*": "./src/*"
   },
   "peerDependencies": {
-    "@kolkrabbi/kol-component": ">=0.99.0",
+    "@kolkrabbi/kol-component": ">=0.108.0",
     "@kolkrabbi/kol-framework": ">=0.20.0",
     "@kolkrabbi/kol-icons": ">=0.16.0",
     "@kolkrabbi/kol-theme": ">=0.68.0",
@@ -20,10 +20,10 @@
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.107.0",
+    "@kolkrabbi/kol-component": "^0.108.0",
+    "@kolkrabbi/kol-framework": "^0.28.0",
     "@kolkrabbi/kol-theme": "^0.72.0",
-    "@kolkrabbi/kol-icons": "^0.22.0",
-    "@kolkrabbi/kol-framework": "^0.28.0"
+    "@kolkrabbi/kol-icons": "^0.22.0"
   },
   "files": [
     "src",

package/src/CatalogPage.jsx

@@ -20,8 +20,11 @@ import WalkthroughPanel from './WalkthroughPanel.jsx'
  * what a click does. `toCard(item, { view, layout })` → `{ key, title, detail,
  * 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); `fit` (`cover` default | `natural` | `compact`) is the
+ * 2×2 cell (ShellHomeSystemMonitorGaps, kol-monitor 2026-08-27) — and the page
+ * HIDES the cell's three neighbours itself (CatalogPageMonitorParity: the
+ * consumer never sees the filtered row order, so it cannot; monitor's
+ * `computeHiddenSet` for the 6-column grid, verbatim — the grid stays still
+ * 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
@@ -48,6 +51,20 @@ const LAYOUTS = [
   { value: 'grid', label: 'GRID' },
 ]
 
+/* The 2×2 expanded card's three neighbours — the cell to the right, the two
+ * beneath — skipped so the grid stays still (monitor's computeHiddenSet, verbatim). */
+function computeHiddenSet(items, expandedIdx) {
+  if (expandedIdx < 0) return new Set()
+  const hiddenSet = new Set()
+  const blockCol = Math.floor((expandedIdx % 6) / 2)
+  const blockRow = Math.floor(Math.floor(expandedIdx / 6) / 2)
+  const base = blockRow * 12 + blockCol * 2
+  ;[base, base + 1, base + 6, base + 7].forEach(i => {
+    if (i !== expandedIdx && i < items.length) hiddenSet.add(i)
+  })
+  return hiddenSet
+}
+
 export default function CatalogPage({
   header,
   items = [],
@@ -90,17 +107,23 @@ export default function CatalogPage({
           defaultViewMode={defaultView}
           layoutOptions={open ? undefined : layouts}
           defaultLayout={defaultLayout}
-          renderItem={(rows, viewMode, layout) => open ? null : (
+          renderItem={(rows, viewMode, layout) => {
+            if (open) return null
+            const cards = rows.map((item) => toCard ? toCard(item, { view: viewMode, layout }) : { title: item.title ?? item.name, detail: item.detail })
+            const hidden = layout === 'list' ? new Set() : computeHiddenSet(rows, cards.findIndex((c) => c.expanded))
+            return (
             <div style={{ display: 'grid', gridTemplateColumns: layout === 'list' ? 'repeat(4, 1fr)' : 'repeat(6, 1fr)', gap: layout === 'list' ? 8 : 24 }}>
               {rows.map((item, i) => {
-                const c = toCard ? toCard(item, { view: viewMode, layout }) : { title: item.title ?? item.name, detail: item.detail }
+                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" 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} />
               })}
             </div>
-          )}
+            )
+          }}
           {...filtersProps}
         />
       </div>