@kolkrabbi/kol-shell 0.20.0 → 0.22.0

package/package.json

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

package/src/SettingsScaffold.jsx

@@ -1,28 +1,72 @@
 import { useState } from 'react'
-import { Divider } from '@kolkrabbi/kol-component'
+import { ContentFilters } from '@kolkrabbi/kol-component'
 import PageShell from './PageShell.jsx'
 import PageHeader from './PageHeader.jsx'
-import TabStrip from './TabStrip.jsx'
 
 /**
- * SettingsScaffold — the settings-page idiom both shells re-implemented
- * inline: fixed PageShell, tab-driven PageHeader, TabStrip, Divider, then a
- * `flex:1 overflow:auto` body. Content is consumer-authored via
- * `renderContent(tabValue)` — sections/rows are content, not markup.
+ * SettingsScaffold — the settings-page idiom both shells re-implemented inline:
+ * fixed PageShell, a PageHeader masthead, one header row, then a scrolling body.
+ * Content is consumer-authored via `renderContent` — sections/rows are content,
+ * not markup.
  *
- * Building blocks exported for the body: `SettingsSection` (h2 + column) and
- * `LabelRow` (the 160px label-column row — the de-facto standard both repos
- * and monitor's ColorPickerPage share).
+ * THE HEADER ROW IS `ContentFilters`, THE ACTUAL ORGANISM (user ruling
+ * 2026-08-30, taken from kol-fxr's approved `/settings`). It was a local
+ * TabStrip + Divider, which made this a THIRD header shape in the estate beside
+ * PageHeader and ContentFilters — on the one page type every app has. fxr hand-
+ * wrote a lookalike to the organism's grammar and it drifted inside the hour:
+ * the organism's search is `size="md" iconSize={16} fieldHeight={28}`, and a
+ * copy passing none of those renders a different pill in the same row one page
+ * over. The user caught it as *"2 different content filters in settings and
+ * effexor home why"*.
+ *
+ * A row that looks like ContentFilters must BE ContentFilters.
+ *
+ * What that buys over the tab strip it replaces: search across the settings rows
+ * (`searchKeys` — a row's own label matches, so `loop`, `aspect`, `undo` all
+ * land), filter groups, the view strip, and `trailingActions` for a page's own
+ * controls. A TabStrip could carry none of it.
+ *
+ * Body building blocks live in **kol-component**, not here:
+ * `LabeledControlSection` (the eyebrow-headed section) and `SettingsRow` (the
+ * 160px label column). This file used to export its own `SettingsSection` +
+ * `LabelRow` — a second implementation of that pair, and the DS does not ship
+ * two of one thing (user ruling 2026-08-30: "dont ship duplicate components").
+ * Both retired to `_tmp/2026-08-30-shell-settings-duplicates/`.
+ *
+ * The DRAWER is the page's other half and is also kol-component's:
+ * `SettingsPanel` (ShellDrawer underneath — scrim, Escape, focus trap, scroll
+ * lock). Render page and drawer from ONE definition; that is what stops the two
+ * surfaces drifting. Put its opener in `header.actions`.
  *
  * Shortcuts single-source: both repos hand-maintained the shortcut list twice
  * (settings + overlay) and both pairs drifted. Feed ONE array to both your
- * `ShortcutsOverlay` and a `LabelRow` map here.
+ * `ShortcutsOverlay` and `SettingsShortcuts`.
  *
- * @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`)
+ * @param {Array}     props.tabs            `[{ value, label, title, subtitle }]` — title/subtitle feed the masthead, label the 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`)
+ * @param {string}    props.title           the filter row's own title (default `Preferences`)
+ * @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 {string}    props.tone            forwarded to ContentFilters (`sunken` is fxr's approved page)
+ * @param {Object}    props.filtersProps    escape hatch — anything else the organism takes
  */
-export default function SettingsScaffold({ tabs = [], defaultTab, renderContent, header }) {
+export default function SettingsScaffold({
+  tabs = [],
+  defaultTab,
+  renderContent,
+  header,
+  title = 'Preferences',
+  items,
+  filterGroups,
+  searchKeys,
+  trailingActions,
+  tone = 'sunken',
+  filtersProps,
+}) {
   const [tab, setTab] = useState(defaultTab ?? tabs[0]?.value)
   const active = tabs.find((t) => t.value === tab)
 
@@ -30,50 +74,30 @@ export default function SettingsScaffold({ tabs = [], defaultTab, renderContent,
     <PageShell mode="fixed">
       {/* `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 */}
+        * `voice="mono"`, `size`, `titleClass`, `eyebrow` all pass through.
+        * `actions` is where the drawer opener goes. */}
       <PageHeader title={active?.title} subtitle={active?.subtitle} {...header} />
-      <TabStrip
-        options={tabs}
-        value={tab}
-        onChange={setTab}
-        className="gap-6"
-        style={{ marginBottom: 24 }}
+      <ContentFilters
+        tone={tone}
+        title={title}
+        items={items ?? []}
+        totalCount={items?.length ?? 0}
+        filterGroups={filterGroups}
+        searchKeys={searchKeys}
+        trailingActions={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}
+        viewMode={tab}
+        onViewModeChange={setTab}
+        renderItem={(filtered) => (
+          <div style={{ flex: 1, overflow: 'auto', paddingTop: 4, paddingBottom: 4 }}>
+            {renderContent?.(tab, filtered)}
+          </div>
+        )}
+        {...filtersProps}
       />
-      <Divider className="mb-6" />
-      <div style={{ flex: 1, overflow: 'auto', paddingTop: 4, paddingBottom: 4 }}>
-        {renderContent?.(tab)}
-      </div>
     </PageShell>
   )
 }
-
-/** Section — `h2` header + 8px column, the body block both repos share. */
-export function SettingsSection({ title, children }) {
-  return (
-    <div>
-      {/* fg-96 on helper-14 — the tab strip's role (PageHeaderMonoTitle addendum 2,
-        * kol-fxr 2026-08-27; was fg-80 / helper-16 with no seam) */}
-      <h2 className="text-fg-96 kol-helper-14" style={{ marginBottom: 16 }}>{title}</h2>
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
-        {children}
-      </div>
-    </div>
-  )
-}
-
-/**
- * LabelRow — 160px flex-shrink-0 label column + value. `align="center"` for
- * control rows (a toggle), `align="baseline"` (default) for text rows.
- */
-export function LabelRow({ label, align = 'baseline', children }) {
-  return (
-    <div style={{ display: 'flex', gap: 12, alignItems: align }}>
-      {/* 160 wide, but it yields and truncates when the row is squeezed — the label
-        * is the prose, the value is the datum (SettingsShortcutsComboWrap, 2026-08-27) */}
-      <span className="text-fg-48 kol-helper-12 truncate" style={{ flex: '0 1 160px', minWidth: 0 }}>{label}</span>
-      {typeof children === 'string'
-        ? <span className="text-fg-32 kol-helper-12">{children}</span>
-        : children}
-    </div>
-  )
-}

package/src/SettingsShortcuts.jsx

@@ -1,11 +1,17 @@
-import { LabelRow } from './SettingsScaffold.jsx'
+import { SettingsRow } from '@kolkrabbi/kol-component'
+
+/* Was kol-shell's own `LabelRow`, retired 2026-08-30 — it was a second
+ * implementation of kol-component's `SettingsRow` (same 160px label column,
+ * same value cell), and the DS does not ship two of one thing. `align="fill"`
+ * keeps the combo left-aligned in its cell, which is what LabelRow's default
+ * baseline row did. */
 
 /**
  * SettingsShortcuts — the keyboard-shortcuts block of a settings page
  * (ShellHomeSystem, kol-fxr 2026-08-27): the same `[{ section, items: [{ id,
  * label, combo }] }]` array `ShortcutsOverlay` takes, laid out six columns ×
  * two sections per column, filled column-first (user, 2026-08-27) — each
- * section an eyebrow (`kol-eyebrow`, strong ink) over LabelRows. A combo is one
+ * section an eyebrow (`kol-eyebrow`, strong ink) over SettingsRows. A combo is one
  * token by nature — the value cell is `whitespace-nowrap` and the label yields
  * (SettingsShortcutsComboWrap, kol-monitor 2026-08-27: `⌘ K` broke as `⌘` over
  * `K` in the six-column grid — the cell was squeezed to min-content, not full).
@@ -20,9 +26,9 @@ export default function SettingsShortcuts({ sections = [], comboLabel = (c) => c
         <div key={section} style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
           <span className="kol-eyebrow text-strong mb-2">{section}</span>
           {items.map((k) => (
-            <LabelRow key={k.id ?? k.label} label={k.label}>
+            <SettingsRow key={k.id ?? k.label} label={k.label} align="fill">
               <span className="text-fg-32 kol-helper-12 whitespace-nowrap">{comboLabel(k.combo)}</span>
-            </LabelRow>
+            </SettingsRow>
           ))}
         </div>
       ))}

package/src/index.js

@@ -19,7 +19,7 @@ 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 SettingsScaffold, SettingsSection, LabelRow } from './SettingsScaffold.jsx'
+export { default as SettingsScaffold } from './SettingsScaffold.jsx'
 export { default as WalkthroughPanel } from './WalkthroughPanel.jsx'
 export { default as ShortcutsOverlay } from './ShortcutsOverlay.jsx'
 export { default as Logomark } from './Logomark.jsx'