@kolkrabbi/kol-shell 0.22.0 → 0.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.22.0",
+  "version": "0.23.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",

package/src/SettingsScaffold.jsx

@@ -42,7 +42,7 @@ import PageHeader from './PageHeader.jsx'
  * (settings + overlay) and both pairs drifted. Feed ONE array to both your
  * `ShortcutsOverlay` and `SettingsShortcuts`.
  *
- * @param {Array}     props.tabs            `[{ value, label, title, subtitle }]` — title/subtitle feed the masthead, label the strip
+ * @param {Array}     props.tabs            `[{ value, label, title, subtitle, row }]` — title/subtitle feed the masthead, label the strip. `row: 'layout'` puts an entry on the SECOND row (fxr's ABOUT / REPO); default is the view strip
  * @param {string}    props.defaultTab
  * @param {Function}  props.renderContent   `(tabValue, filteredItems) => node` — the scrolling body
  * @param {Object}    props.header          PageHeader props spread onto the masthead (`voice`, `size`, `titleClass`, `eyebrow`, `actions`)
@@ -70,6 +70,19 @@ export default function SettingsScaffold({
   const [tab, setTab] = useState(defaultTab ?? tabs[0]?.value)
   const active = tabs.find((t) => t.value === tab)
 
+  /* ONE PAGE SELECTOR DRAWN ACROSS TWO ROWS (SettingsScaffoldTabRows, kol-fxr
+   * 2026-08-30). fxr's SETTINGS above the rule and ABOUT / REPO below it are not
+   * two selectors — they are one set of destinations, split because the user
+   * ruled the side pages down to the smaller row. `row: 'layout'` says which.
+   *
+   * Both strips read and write the SAME `tab`, which is the whole point: before
+   * this, a page wanting both rows had to hand ContentFilters its own state
+   * through `filtersProps` and the scaffold's `tab` went dead — so
+   * `renderContent`'s first argument was a lie, and the masthead only got the
+   * right title because `header` happens to spread after it. */
+  const viewTabs = tabs.filter((t) => t.row !== 'layout')
+  const layoutTabs = tabs.filter((t) => t.row === 'layout')
+
   return (
     <PageShell mode="fixed">
       {/* `header` is spread onto the PageHeader (PageHeaderMonoTitle addendum,
@@ -88,9 +101,15 @@ export default function SettingsScaffold({
         /* THE TABS ARE THE VIEW STRIP — the same row fxr's SETTINGS and the home
          * page's RECENT / SAVED run on, not a strip of our own. That is the
          * whole point: one row grammar, not a settings dialect of it. */
-        viewModeOptions={tabs.length ? tabs : undefined}
+        viewModeOptions={viewTabs.length ? viewTabs : undefined}
         viewMode={tab}
         onViewModeChange={setTab}
+        /* a strip whose options do not contain the active tab simply shows
+         * nothing lit — which is correct: on ABOUT, the SETTINGS strip has no
+         * selection to draw. */
+        layoutOptions={layoutTabs.length ? layoutTabs : undefined}
+        layout={tab}
+        onLayoutChange={setTab}
         renderItem={(filtered) => (
           <div style={{ flex: 1, overflow: 'auto', paddingTop: 4, paddingBottom: 4 }}>
             {renderContent?.(tab, filtered)}