@kolkrabbi/kol-shell 0.6.2 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.6.2",
+  "version": "0.7.1",
   "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",
@@ -15,15 +15,15 @@
     "@kolkrabbi/kol-component": ">=0.38.0",
     "@kolkrabbi/kol-framework": ">=0.20.0",
     "@kolkrabbi/kol-icons": ">=0.16.0",
-    "@kolkrabbi/kol-theme": ">=0.41.0",
+    "@kolkrabbi/kol-theme": ">=0.67.0",
     "react": "^18.3.0 || ^19.0.0",
     "react-dom": "^18.3.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@kolkrabbi/kol-component": "^0.69.1",
-    "@kolkrabbi/kol-framework": "^0.24.0",
-    "@kolkrabbi/kol-icons": "^0.18.0",
-    "@kolkrabbi/kol-theme": "^0.53.0"
+    "@kolkrabbi/kol-icons": "^0.19.0",
+    "@kolkrabbi/kol-theme": "^0.67.0",
+    "@kolkrabbi/kol-component": "^0.97.2",
+    "@kolkrabbi/kol-framework": "^0.27.1"
   },
   "files": [
     "src",

package/src/PageHeader.jsx

@@ -23,14 +23,20 @@
  * @param {ReactNode} title
  * @param {ReactNode} subtitle  mono line under the title
  * @param {string}    size      sm | md | lg (default md)
+ * @param {'sans'|'mono'} voice  the title's family (default sans). `mono` = the
+ *                    app tier's masthead (PageHeaderMonoTitle, kol-fxr 2026-08-27 —
+ *                    user ruling: kol-monitor's JetBrains Mono 32 / 500 is the look):
+ *                    kol-mono-heading-03 · kol-mono-display-03 · kol-mono-display-02
+ *                    (kol-theme ≥0.67.0). The subtitle stays kol-mono-14.
+ * @param {string}    titleClass  replaces the title role whole (the ContentText seam)
  */
 const TITLE = {
-  sm: 'kol-sans-heading-03',
-  md: 'kol-sans-display-03',
-  lg: 'kol-sans-display-02',
+  sans: { sm: 'kol-sans-heading-03', md: 'kol-sans-display-03', lg: 'kol-sans-display-02' },
+  mono: { sm: 'kol-mono-heading-03', md: 'kol-mono-display-03', lg: 'kol-mono-display-02' },
 }
 
-export default function PageHeader({ eyebrow, title, subtitle, size = 'md', className = '' }) {
+export default function PageHeader({ eyebrow, title, subtitle, size = 'md', voice = 'sans', titleClass, className = '' }) {
+  const roles = TITLE[voice] ?? TITLE.sans
   return (
     /* the block owns its own rhythm — margins inline, never in a shared type
        class, which leaks estate-wide (ShellHeaderFilterRefinements, 2026-08-15) */
@@ -48,7 +54,7 @@ export default function PageHeader({ eyebrow, title, subtitle, size = 'md', clas
           {eyebrow}
         </p>
       )}
-      <h1 className={`text-fg-96 ${TITLE[size] ?? TITLE.md}`}>{title}</h1>
+      <h1 className={`text-fg-96 ${titleClass ?? roles[size] ?? roles.md}`}>{title}</h1>
       {subtitle && (
         <p className="text-oq-64 kol-mono-14" style={{ marginTop: 12 }}>{subtitle}</p>
       )}

package/src/SettingsScaffold.jsx

@@ -20,14 +20,18 @@ import TabStrip from './TabStrip.jsx'
  *
  * @param {Array} props.tabs - `[{ value, label, title, subtitle }]` — title/subtitle feed the header
  * @param {Function} props.renderContent - `(tabValue) => node`
+ * @param {Object}   props.header - PageHeader props spread onto the scaffold's header (`voice`, `size`, `titleClass`, `eyebrow`)
  */
-export default function SettingsScaffold({ tabs = [], defaultTab, renderContent }) {
+export default function SettingsScaffold({ tabs = [], defaultTab, renderContent, header }) {
   const [tab, setTab] = useState(defaultTab ?? tabs[0]?.value)
   const active = tabs.find((t) => t.value === tab)
 
   return (
     <PageShell mode="fixed">
-      <PageHeader title={active?.title} subtitle={active?.subtitle} />
+      {/* `header` is spread onto the PageHeader (PageHeaderMonoTitle addendum,
+        * kol-fxr 2026-08-27): a consumer could not reach this title at all —
+        * `voice="mono"`, `size`, `titleClass`, `eyebrow` all pass through */}
+      <PageHeader title={active?.title} subtitle={active?.subtitle} {...header} />
       <TabStrip
         options={tabs}
         value={tab}