@kolkrabbi/kol-shell 0.22.0 → 0.24.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-shell",
-  "version": "0.22.0",
+  "version": "0.24.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`)
@@ -50,7 +50,9 @@ import PageHeader from './PageHeader.jsx'
  * @param {Array}     props.items           rows to search/filter over; omit and the row is chrome only
  * @param {Array}     props.filterGroups    ContentFilters groups
  * @param {Array}     props.searchKeys      which keys `items` are searched on
- * @param {ReactNode} props.trailingActions the page's own controls, right of the row
+ * @param {ReactNode|Function} props.trailingActions the page's own controls, right of the row.
+ *                                  A FUNCTION receives `(tab, setTab)` — for a control that has to
+ *                                  move the page, e.g. an icon pair that jumps back to Settings
  * @param {string}    props.tone            forwarded to ContentFilters (`sunken` is fxr's approved page)
  * @param {Object}    props.filtersProps    escape hatch — anything else the organism takes
  */
@@ -70,6 +72,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,
@@ -84,13 +99,31 @@ export default function SettingsScaffold({
         totalCount={items?.length ?? 0}
         filterGroups={filterGroups}
         searchKeys={searchKeys}
-        trailingActions={trailingActions}
+        /* A NODE cannot reach the tab it sits beside. fxr's OPTIONS /
+         * SHORTCUTS pair stays visible on About and Repo (user 2026-08-28 — the
+         * row is the page's furniture, and hiding it made the header jump a
+         * line on every leave), and picking either one must return you to
+         * Settings. Owning `tab` here took that away: the pair changed the
+         * settings view while you sat on About and you had to click SETTINGS
+         * yourself (SettingsScaffoldTabFromTrailing, 2026-08-30).
+         *
+         * A render prop, not a controlled `tab`/`onTabChange` pair: the
+         * controlled shape hands page state back to the consumer, which is
+         * precisely what 0.23.0 removed. This hands out a setter and leaves the
+         * state where the last ticket put it. A plain node still works. */
+        trailingActions={typeof trailingActions === 'function' ? trailingActions(tab, setTab) : trailingActions}
         /* 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)}