@kolkrabbi/kol-shell 0.19.0 → 0.20.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.19.0",
+  "version": "0.20.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-icons": "^0.24.0",
-    "@kolkrabbi/kol-component": "^0.128.0",
+    "@kolkrabbi/kol-component": "^0.132.0",
+    "@kolkrabbi/kol-icons": "^0.25.0",
     "@kolkrabbi/kol-framework": "^0.35.0",
-    "@kolkrabbi/kol-theme": "^0.89.0"
+    "@kolkrabbi/kol-theme": "^0.96.0"
   },
   "files": [
     "src",

package/src/PageHeader.jsx

@@ -49,10 +49,25 @@ export default function PageHeader({ eyebrow, title, subtitle, actions, subtitle
   const roles = TITLE[voice] ?? TITLE.sans
   const h1 = <h1 className={`text-fg-96 ${titleClass ?? roles[size] ?? roles.md}`}>{title}</h1>
   const lede = subtitle && <p className="text-oq-64 kol-mono-14 min-w-0" style={{ marginTop: actions ? undefined : 12, maxWidth: subtitleMaxWidth }}>{subtitle}</p>
-  /* the cluster shares a baseline row with the lede (or the title): flexbox
-     exposes a flex item's FIRST baseline, so putting them in one row is the
-     one way to land on the subtitle's line rather than the h1's */
-  const cluster = actions && <div className="flex items-center gap-4 shrink-0">{actions}</div>
+  /* The cluster shares a baseline row with the lede (or the title): flexbox
+     exposes a flex item's FIRST baseline, so putting them in one row is the one
+     way to land on the subtitle's line rather than the h1's.
+     
+     AND IT CONTRIBUTES NO HEIGHT (PageHeaderActionsGrowsBlock, kol-fxr
+     2026-08-28). A flex row takes its tallest child, so a cluster of `sm`
+     controls (28px since kol-theme 0.90.0) against a one-line `kol-mono-14`
+     lede (18px) made the masthead 10px taller — measured, monitor's `/` at 65.2
+     against fxr's `/settings` at 75.2 with identical titles. The masthead is the
+     one block every page of an app shares, so a page with a control cluster sat
+     10px lower than every page without one, with no way to opt out.
+     
+     `h-0` + `self-center` is the fix and it is not a magic number: a zero-height
+     box centred on the row makes the children overflow it symmetrically, so the
+     row's height is the TEXT's and the cluster is free at any rung (the gap is
+     10px at `sm`, 14 at `md` — a constant would have been wrong). Horizontal
+     layout is untouched: the box still takes its width, so `justify-between`
+     holds and a long lede cannot run under the controls. */
+  const cluster = actions && <div className="flex items-center gap-4 shrink-0 h-0 self-center">{actions}</div>
   return (
     /* the block owns its own rhythm — margins inline, never in a shared type
        class, which leaks estate-wide (ShellHeaderFilterRefinements, 2026-08-15) */

package/src/index.js

@@ -19,7 +19,6 @@ export { default as PageHeader } from './PageHeader.jsx'
  * where it always did. This package shipped a recreated duplicate 0.1.0–0.2.0;
  * retired 2026-08-15, quarantined in _tmp/. Import it from kol-component. */
 export { default as TabStrip } from './TabStrip.jsx'
-export { default as GridCard } from './GridCard.jsx'
 export { default as SettingsScaffold, SettingsSection, LabelRow } from './SettingsScaffold.jsx'
 export { default as WalkthroughPanel } from './WalkthroughPanel.jsx'
 export { default as ShortcutsOverlay } from './ShortcutsOverlay.jsx'

package/src/GridCard.jsx

@@ -1,75 +0,0 @@
-/**
- * @deprecated 2026-08-26 — absorbed by `ContentCard variant="catalog" (row: ContentRow variant="catalog")` in @kolkrabbi/kol-component
- * (the Content Set, 2026-08-15). Step 1 of the retirement wave: this export
- * stays and renders unchanged until the next major, then it is removed.
- * Consumers: swap on your next bump. Map + row-by-row diff:
- * docs/documentation/03-components/06-content-card-system.md.
- *
- * GridCard — A4-ratio card for catalog grids (monitor's full cut: expanded
- * 2×2 mode + previewFit). Preview clipped on top, label plate at bottom;
- * `variant="list"` renders the compact 36px row.
- *
- * Recreated from both repos with the shipped divergences fixed:
- * - the label plate's hardcoded `borderTop: rgba(255,255,255,0.06)` (a live
- *   light-theme bug in both apps) → `border-t border-fg-04`
- * - monitor's `textTransform: capitalize` on the list detail dropped (no
- *   auto-casing law — author the string in the case it should render)
- *
- * Preview fits: `.kol-shell-card-preview--{natural|compact|cover}` in
- * kol-theme. Grid geometry law (documented default, both source repos):
- * grid = `repeat(6, 1fr)` gap 24 · list = `repeat(4, 1fr)` gap 8.
- * Neighbour-hiding for `expanded` stays consumer-side.
- */
-export default function GridCard({ title, detail, preview, expanded, expandedContent, onClick, variant, action, previewFit = 'natural' }) {
-  if (variant === 'list') {
-    return (
-      <div
-        onClick={onClick}
-        className="flex items-center justify-between px-3 cursor-pointer bg-surface-tertiary hover:bg-fg-04 rounded border border-fg-04 transition-colors select-none"
-        style={{ height: 36 }}
-      >
-        <span className="kol-helper-12 text-fg-64">{title}</span>
-        {action || (detail && <span className="kol-helper-10 text-fg-32">{detail}</span>)}
-      </div>
-    )
-  }
-
-  return (
-    <div
-      onClick={onClick}
-      className="bg-fg-04 hover:bg-surface-tertiary border border-fg-04"
-      style={{
-        borderRadius: 4, cursor: 'pointer',
-        aspectRatio: expanded ? undefined : '1 / 1.41421',
-        gridColumn: expanded ? 'span 2' : 'span 1',
-        gridRow: expanded ? 'span 2' : 'span 1',
-        position: 'relative', overflow: 'hidden',
-        display: 'flex', flexDirection: expanded ? 'row-reverse' : 'column',
-        transition: 'all 300ms var(--kol-ease-house)',
-      }}
-    >
-      <div style={{
-        overflow: 'hidden',
-        position: 'relative',
-        flex: expanded ? '0 0 50%' : 1,
-        minHeight: 0,
-        minWidth: 0,
-      }}>
-        <div className={`kol-shell-card-preview kol-shell-card-preview--${previewFit}`} style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}>
-          {preview}
-        </div>
-      </div>
-
-      {expanded ? (
-        <div style={{ flex: 1, padding: 24, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', overflow: 'auto' }}>
-          {expandedContent}
-        </div>
-      ) : (
-        <div className="bg-surface-primary border-t border-fg-04" style={{ padding: '12px 16px', width: '100%' }}>
-          <div className="text-fg-96 kol-helper-14" style={{ marginBottom: 4 }}>{title}</div>
-          {detail && <div className="text-fg-32 kol-helper-8">{detail}</div>}
-        </div>
-      )}
-    </div>
-  )
-}