@kolkrabbi/kol-shell 0.19.0 → 0.19.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +3 -3
- package/src/PageHeader.jsx +19 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kolkrabbi/kol-shell",
|
|
3
|
-
"version": "0.19.
|
|
3
|
+
"version": "0.19.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"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}.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -20,10 +20,10 @@
|
|
|
20
20
|
"react-dom": "^18.3.0 || ^19.0.0"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
|
-
"@kolkrabbi/kol-icons": "^0.24.0",
|
|
24
23
|
"@kolkrabbi/kol-component": "^0.128.0",
|
|
25
24
|
"@kolkrabbi/kol-framework": "^0.35.0",
|
|
26
|
-
"@kolkrabbi/kol-
|
|
25
|
+
"@kolkrabbi/kol-icons": "^0.25.0",
|
|
26
|
+
"@kolkrabbi/kol-theme": "^0.94.0"
|
|
27
27
|
},
|
|
28
28
|
"files": [
|
|
29
29
|
"src",
|
package/src/PageHeader.jsx
CHANGED
|
@@ -49,10 +49,25 @@ export default function PageHeader({ eyebrow, title, subtitle, actions, subtitle
|
|
|
49
49
|
const roles = TITLE[voice] ?? TITLE.sans
|
|
50
50
|
const h1 = <h1 className={`text-fg-96 ${titleClass ?? roles[size] ?? roles.md}`}>{title}</h1>
|
|
51
51
|
const lede = subtitle && <p className="text-oq-64 kol-mono-14 min-w-0" style={{ marginTop: actions ? undefined : 12, maxWidth: subtitleMaxWidth }}>{subtitle}</p>
|
|
52
|
-
/*
|
|
53
|
-
exposes a flex item's FIRST baseline, so putting them in one row is the
|
|
54
|
-
|
|
55
|
-
|
|
52
|
+
/* The cluster shares a baseline row with the lede (or the title): flexbox
|
|
53
|
+
exposes a flex item's FIRST baseline, so putting them in one row is the one
|
|
54
|
+
way to land on the subtitle's line rather than the h1's.
|
|
55
|
+
|
|
56
|
+
AND IT CONTRIBUTES NO HEIGHT (PageHeaderActionsGrowsBlock, kol-fxr
|
|
57
|
+
2026-08-28). A flex row takes its tallest child, so a cluster of `sm`
|
|
58
|
+
controls (28px since kol-theme 0.90.0) against a one-line `kol-mono-14`
|
|
59
|
+
lede (18px) made the masthead 10px taller — measured, monitor's `/` at 65.2
|
|
60
|
+
against fxr's `/settings` at 75.2 with identical titles. The masthead is the
|
|
61
|
+
one block every page of an app shares, so a page with a control cluster sat
|
|
62
|
+
10px lower than every page without one, with no way to opt out.
|
|
63
|
+
|
|
64
|
+
`h-0` + `self-center` is the fix and it is not a magic number: a zero-height
|
|
65
|
+
box centred on the row makes the children overflow it symmetrically, so the
|
|
66
|
+
row's height is the TEXT's and the cluster is free at any rung (the gap is
|
|
67
|
+
10px at `sm`, 14 at `md` — a constant would have been wrong). Horizontal
|
|
68
|
+
layout is untouched: the box still takes its width, so `justify-between`
|
|
69
|
+
holds and a long lede cannot run under the controls. */
|
|
70
|
+
const cluster = actions && <div className="flex items-center gap-4 shrink-0 h-0 self-center">{actions}</div>
|
|
56
71
|
return (
|
|
57
72
|
/* the block owns its own rhythm — margins inline, never in a shared type
|
|
58
73
|
class, which leaks estate-wide (ShellHeaderFilterRefinements, 2026-08-15) */
|