@kolkrabbi/kol-component 0.102.3 → 0.104.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.102.3",
+  "version": "0.104.0",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/index.js

@@ -137,7 +137,7 @@ export { default as LoaderOverlay } from './utilities/LoaderOverlay.jsx'
 export { default as MediaLibrary, MediaLibraryProvider, useMediaLibrary, MediaPicker, MediaBrowser } from './organisms/MediaLibrary.jsx'
 export { default as MediaTileGallery } from './organisms/MediaTileGallery.jsx'
 export { default as MediaViewer } from './organisms/MediaViewer.jsx'
-export { default as SettingsPanel, SettingsSection, SettingsRow, SettingsSwitch, SettingsChoice, SettingsChipRow, SettingsFooter } from './organisms/SettingsPanel.jsx'
+export { default as SettingsPanel, SettingsSection, SettingsRow, SettingsSwitch, SettingsChoice, SettingsMulti, SettingsChipRow, SettingsFooter } from './organisms/SettingsPanel.jsx'
 export { default as SectionNewsletter } from './organisms/SectionNewsletter.jsx'
 export { default as NewsletterBand } from './organisms/NewsletterBand.jsx'
 export { default as ColumnBrowser } from './organisms/ColumnBrowser.jsx'

package/src/molecules/ShellDrawer.jsx

@@ -43,6 +43,9 @@ export default function ShellDrawer({
   backdrop = true,
   children,
   className = '',
+  /* SettingsPanelApproved (2026-08-27): the settings drawer has neither */
+  edge = true,
+  shadow = true,
 }) {
   const reduced = usePrefersReducedMotion()
   const panelRef = useRef(null)
@@ -149,8 +152,10 @@ export default function ShellDrawer({
         role="dialog"
         aria-modal="true"
         tabIndex={-1}
-        className={`fixed inset-y-0 z-[200] flex max-w-full flex-col bg-surface-primary px-4 py-4 outline-none md:px-5 lg:px-6 ${backdrop ? 'shadow-2xl' : ''} ${
-          side === 'right' ? 'right-0 border-l' : 'left-0 border-r'
+        /* `edge` / `shadow` (SettingsPanelApproved, 2026-08-27): the approved settings
+         * drawer has neither — the sheet meets the page flat */
+        className={`fixed inset-y-0 z-[200] flex max-w-full flex-col bg-surface-primary px-4 py-4 outline-none md:px-5 lg:px-6 ${backdrop && shadow ? 'shadow-2xl' : ''} ${
+          side === 'right' ? `right-0 ${edge ? 'border-l' : ''}` : `left-0 ${edge ? 'border-r' : ''}`
         } border-oq-08 ${width == null ? 'w-full' : ''} ${motionPanel} ${className}`}
         style={width != null ? { width: typeof width === 'number' ? `${width}px` : width } : undefined}
       >

package/src/organisms/ColumnBrowser.jsx

@@ -163,7 +163,17 @@ export default function ColumnBrowser({
    * a Finder-style breadcrumb — fired whenever it changes; a folder pick or an
    * outside prefix change fires null */
   const pick = (o) => { setPicked(o); onPick?.(o) }
-  useEffect(() => { if (picked) pick(null) }, [prefix]) // eslint-disable-line react-hooks/exhaustive-deps
+  /* picking a FILE in a column that has an open folder closes that folder
+   * (Finder: one highlight per column) — the prefix collapses to the file's
+   * level, and the cursor STAYS on the file instead of re-seeding
+   * (SettingsPanelApproved §4, kol-r2b2 2026-08-27) */
+  const keepCursor = useRef(false)
+  const pickFile = (level, o) => {
+    pick(o)
+    if (prefix !== level) { keepCursor.current = true; pickedByCollapse.current = true; onPrefix(level) }
+  }
+  const pickedByCollapse = useRef(false)
+  useEffect(() => { if (pickedByCollapse.current) { pickedByCollapse.current = false; return } if (picked) pick(null) }, [prefix]) // eslint-disable-line react-hooks/exhaustive-deps
   const levelsOf = (pfx) => {
     const out = ['']
     if (pfx) {
@@ -190,7 +200,10 @@ export default function ColumnBrowser({
     return { col, idx: Math.max(0, idx) }
   }
   const [cursor, setCursor] = useState(() => seedCursor(prefix))
-  useEffect(() => { setCursor(seedCursor(prefix)) }, [prefix, objects.length]) // eslint-disable-line react-hooks/exhaustive-deps
+  useEffect(() => {
+    if (keepCursor.current) { keepCursor.current = false; return }
+    setCursor(seedCursor(prefix))
+  }, [prefix, objects.length]) // eslint-disable-line react-hooks/exhaustive-deps
   /* the cursor is NOT drawn until the keyboard is used (ColumnBrowserCursorStart,
    * kol-r2b2 2026-08-27): at rest it sat on row 0 beside the open folder and
    * read as a second selection. Arrows arm it; a click seeds it. */
@@ -200,7 +213,7 @@ export default function ColumnBrowser({
   const land = (level, item) => {
     if (!item) return
     if (item.type === 'folder') { pick(null); onPrefix(level + item.name) }
-    else pick(item.o)
+    else pickFile(level, item.o)
   }
 
   const onKeyDown = (e) => {
@@ -309,7 +322,7 @@ export default function ColumnBrowser({
                 muted={shown?.key !== o.key}
                 active={shown?.key === o.key}
                 cursor={cursorActive && cursor.col === k && cursor.idx === folders.length + i}
-                onClick={() => { setCursor({ col: k, idx: folders.length + i }); setCursorActive(true); rootRef.current?.focus(); pick(o) }}
+                onClick={() => { setCursor({ col: k, idx: folders.length + i }); setCursorActive(true); rootRef.current?.focus(); pickFile(level, o) }}
               />
             ))}
             {folders.length === 0 && files.length === 0 && (

package/src/organisms/SectionCards.jsx

@@ -1,4 +1,5 @@
 import SectionCardItem from '../molecules/SectionCardItem.jsx'
+import { surfaceClass } from './sectionSurface.js'
 import SectionText, { HEADLINE_ROLE } from '../molecules/SectionText.jsx'
 import useSectionTheme from '../hooks/useSectionTheme.js'
 import { minHeightClass } from './sectionHeights.js'
@@ -29,9 +30,12 @@ import { minHeightClass } from './sectionHeights.js'
  * @param {object|Function} itemStyle       inline style per card, or `(index) => style`
  * @param {object}    slotClass · slotStyle  per-slot class / style on the header text
  * @param {string}    sectionClassName · wrapperClassName · cardsWrapperClassName · actionsClassName · headerClassName · headerTextWidthClass  layout seams
+ * @param {'primary'|'secondary'|'tertiary'|'inverse'|'auto'|'none'|string} background  the section's surface
+ *   (SectionBackgroundProp, 2026-08-27) — a named surface, `none`, or a raw utility / token string; default = what it painted before
  */
 export default function SectionCards({
   theme,
+  background,
   height = '60',
   features = [],
   eyebrow,
@@ -60,7 +64,7 @@ export default function SectionCards({
   const eb = eyebrow ?? label
   const [themeRef, themeStamp] = useSectionTheme(theme)
   return (
-    <section ref={themeRef} data-theme={themeStamp} className={`w-full flex flex-col justify-center ${minHeightClass(height)} ${theme ? 'bg-surface-primary' : ''} ${sectionClassName}`.replace(/\s+/g, ' ').trim()}>
+    <section ref={themeRef} data-theme={themeStamp} className={`w-full flex flex-col justify-center ${minHeightClass(height)} ${surfaceClass(background, theme ? 'primary' : 'none')} ${sectionClassName}`.replace(/\s+/g, ' ').trim()}>
       <div className={wrapperClassName}>
         {(eb || headline || body) && (
           <SectionText

package/src/organisms/SectionCta.jsx

@@ -1,4 +1,5 @@
 import Button from '../atoms/Button.jsx'
+import { surfaceClass } from './sectionSurface.js'
 import SectionText from '../molecules/SectionText.jsx'
 import { minHeightClass } from './sectionHeights.js'
 
@@ -26,9 +27,12 @@ import { minHeightClass } from './sectionHeights.js'
  * @param {string}    email         contact-row value + `mailto:` target; omit to drop the row
  * @param {{label: ReactNode, value: ReactNode, href?: string}[]} secondaryRows  extra rows between prompt and contact
  * @param {string}    className     extra classes on the section
+ * @param {'primary'|'secondary'|'tertiary'|'inverse'|'auto'|'none'|string} background  the section's surface
+ *   (SectionBackgroundProp, 2026-08-27) — a named surface, `none`, or a raw utility / token string; default = what it painted before
  */
 export default function SectionCta({
   variant = 'editorial',
+  background,
   height = '60',
   headline,
   body,
@@ -45,7 +49,7 @@ export default function SectionCta({
 }) {
   if (variant === 'centered') {
     return (
-      <section className={`w-full flex flex-col justify-center py-24 ${minHeightClass(height)} ${className}`.replace(/\s+/g, ' ').trim()}>
+      <section className={`w-full flex flex-col justify-center py-24 ${surfaceClass(background, 'auto')} ${minHeightClass(height)} ${className}`.replace(/\s+/g, ' ').trim()}>
         <div className="w-full max-w-[var(--kol-container-max,var(--kol-content-shell,1800px))] mx-auto">
           <div className="w-32 h-px bg-fg-24 mx-auto mb-8" />
           <SectionText
@@ -72,7 +76,7 @@ export default function SectionCta({
     ...(email ? [{ label: contactLabel, value: email, href: `mailto:${email}` }] : []),
   ]
   return (
-    <section className={`w-full bg-auto flex flex-col justify-center ${minHeightClass(height)} ${className}`.replace(/\s+/g, ' ').trim()}>
+    <section className={`w-full ${surfaceClass(background, 'auto')} flex flex-col justify-center ${minHeightClass(height)} ${className}`.replace(/\s+/g, ' ').trim()}>
       {/* the family's ONE cap — the shell's --kol-container-max ladder (user
         * ruling 2026-08-26; the 1600 SectionCtaEditorial asked for was a third
         * number beside split's 1200 and cards' 1400) — the surface stays full

package/src/organisms/SectionFaq.jsx

@@ -1,4 +1,5 @@
 import { useState } from 'react'
+import { surfaceClass } from './sectionSurface.js'
 import { Accordion, AccordionPanel } from '../molecules/Accordion.jsx'
 import SectionText from '../molecules/SectionText.jsx'
 import { minHeightClass } from './sectionHeights.js'
@@ -17,6 +18,8 @@ import { minHeightClass } from './sectionHeights.js'
  * @param {boolean}   [singleOpen=false]  opening one panel closes the others
  * @param {number}    [defaultOpen]       index open on mount (singleOpen) — omit for all closed
  * @param {string}    className · innerClassName  layout seams
+ * @param {'primary'|'secondary'|'tertiary'|'inverse'|'auto'|'none'|string} background  the section's surface
+ *   (SectionBackgroundProp, 2026-08-27) — a named surface, `none`, or a raw utility / token string; default = what it painted before
  */
 export default function SectionFaq({
   eyebrow,
@@ -29,6 +32,7 @@ export default function SectionFaq({
   singleOpen = false,
   defaultOpen,
   height = '60',
+  background,
   slotClass,
   slotStyle,
   className = '',
@@ -40,7 +44,7 @@ export default function SectionFaq({
   const eb = eyebrow ?? label
   const [open, setOpen] = useState(defaultOpen ?? null)
   return (
-    <section className={`kol-section-faq w-full flex flex-col justify-center px-5 py-16 md:px-8 md:py-24 lg:px-14 ${minHeightClass(height)} ${className}`.replace(/\s+/g, ' ').trim()}>
+    <section className={`kol-section-faq w-full flex flex-col justify-center px-5 py-16 md:px-8 md:py-24 lg:px-14 ${minHeightClass(height)} ${surfaceClass(background, 'none')} ${className}`.replace(/\s+/g, ' ').trim()}>
       <div className="w-full max-w-[var(--kol-container-max,var(--kol-content-shell,1800px))] mx-auto">
       <div className={innerClassName}>
         {(eb || headline || body || actions) && (

package/src/organisms/SectionHero.jsx

@@ -1,4 +1,5 @@
 import { isValidElement } from 'react'
+import { surfaceClass } from './sectionSurface.js'
 import HlsVideo from '../atoms/HlsVideo.jsx'
 import Image from '../atoms/Image.jsx'
 import OverlayGlassPanel from '../utilities/OverlayGlassPanel.jsx'
@@ -143,10 +144,13 @@ function MediaLayer({ media }) {
  *                                   split: 'left' | 'right' — the media side
  * @param {boolean}   fullBleed      span the full viewport width (100vw breakout) — split
  * @param {string}    className      extra classes on the section
+ * @param {'primary'|'secondary'|'tertiary'|'inverse'|'auto'|'none'|string} background  the section's surface
+ *   (SectionBackgroundProp, 2026-08-27) — a named surface, `none`, or a raw utility / token string; default = what it painted before
  */
 export default function SectionHero({
   variant = 'media',
   theme,
+  background,
   fullBleed = false,
   media,
   overlayOpacity = 0,
@@ -189,7 +193,7 @@ export default function SectionHero({
   /* `label` = alias of `eyebrow` (2026-08-27) */
   const eb = eyebrow ?? label
   const [themeRef, themeStamp] = useSectionTheme(theme)
-  const themed = theme ? 'bg-surface-primary' : ''
+  const themed = surfaceClass(background, theme ? 'primary' : 'none')
 
   if (variant === 'split') {
     const mediaFirst = align !== 'right'

package/src/organisms/SectionNewsletter.jsx

@@ -1,4 +1,5 @@
 import { useId, useState } from 'react'
+import { surfaceClass } from './sectionSurface.js'
 import Input from '../atoms/Input.jsx'
 import Button from '../atoms/Button.jsx'
 import SectionText from '../molecules/SectionText.jsx'
@@ -44,10 +45,13 @@ import { minHeightClass } from './sectionHeights.js'
  * @param {string}    inputId      id override for the email input (default useId-generated)
  * @param {object}    slotClass · slotStyle   per-slot class / style on the SectionText (reveal seam)
  * @param {string}    className    extra classes on the section
+ * @param {'primary'|'secondary'|'tertiary'|'inverse'|'auto'|'none'|string} background  the section's surface
+ *   (SectionBackgroundProp, 2026-08-27) — a named surface, `none`, or a raw utility / token string; default = what it painted before
  */
 export default function SectionNewsletter({
   height = '60',
   theme,
+  background,
   eyebrow,
   label,
   headline,
@@ -99,7 +103,7 @@ export default function SectionNewsletter({
       id={id}
       ref={themeRef}
       data-theme={themeStamp}
-      className={`kol-section-newsletter w-full flex flex-col justify-center py-24 ${theme ? 'bg-surface-primary text-auto' : ''} ${minHeightClass(height)} ${className}`.replace(/\s+/g, ' ').trim()}
+      className={`kol-section-newsletter w-full flex flex-col justify-center py-24 ${surfaceClass(background, theme ? 'primary' : 'none')} ${theme ? 'text-auto' : ''} ${minHeightClass(height)} ${className}`.replace(/\s+/g, ' ').trim()}
     >
       {/* the family's ONE cap — the shell's --kol-container-max ladder — and
         * inside it the lede's MEASURE on a wrapper (SectionNewsletterForm,

package/src/organisms/SectionSplit.jsx

@@ -1,4 +1,5 @@
 import SectionText from '../molecules/SectionText.jsx'
+import { surfaceClass } from './sectionSurface.js'
 import useSectionTheme from '../hooks/useSectionTheme.js'
 import { minHeightClass } from './sectionHeights.js'
 
@@ -50,10 +51,13 @@ import { minHeightClass } from './sectionHeights.js'
  * @param {boolean}   fullBleed    span the full viewport width
  * @param {object}    slotClass · slotStyle  per-slot class / style on the text block (reveal seam)
  * @param {string}    className · innerClassName · columnClassName  layout seams
+ * @param {'primary'|'secondary'|'tertiary'|'inverse'|'auto'|'none'|string} background  the section's surface
+ *   (SectionBackgroundProp, 2026-08-27) — a named surface, `none`, or a raw utility / token string; default = what it painted before
  */
 
 export default function SectionSplit({
   theme,
+  background,
   eyebrow,
   label,
   headline,
@@ -93,7 +97,7 @@ export default function SectionSplit({
     <section
       ref={themeRef}
       data-theme={themeStamp}
-      className={`kol-section-split flex flex-col justify-center px-5 py-16 md:px-8 md:py-24 lg:px-14 lg:py-32 [--kol-section-py:4rem] md:[--kol-section-py:6rem] lg:[--kol-section-py:8rem] ${minHeightClass(height)} ${bleed} ${className}`.replace(/\s+/g, ' ').trim()}
+      className={`kol-section-split flex flex-col justify-center px-5 py-16 md:px-8 md:py-24 lg:px-14 lg:py-32 [--kol-section-py:4rem] md:[--kol-section-py:6rem] lg:[--kol-section-py:8rem] ${minHeightClass(height)} ${surfaceClass(background, 'none')} ${bleed} ${className}`.replace(/\s+/g, ' ').trim()}
       style={sectionStyle}
     >
       {/* ONE cap for the whole section family (user ruling 2026-08-26): the shell's

package/src/organisms/SettingsPanel.jsx

@@ -1,6 +1,8 @@
 import Button from '../atoms/Button.jsx'
 import Dropdown from '../molecules/Dropdown.jsx'
-import SectionLabel from '../atoms/SectionLabel.jsx'
+import Divider from '../atoms/Divider.jsx'
+import IconFrame from '../atoms/IconFrame.jsx'
+import LabeledControl from '../molecules/LabeledControl.jsx'
 import ToggleSwitch from '../atoms/ToggleSwitch.jsx'
 import ShellDrawer from '../molecules/ShellDrawer.jsx'
 import FullscreenOverlay from '../utilities/FullscreenOverlay.jsx'
@@ -35,8 +37,8 @@ import FullscreenOverlay from '../utilities/FullscreenOverlay.jsx'
  * @param {'drawer'|'overlay'} variant  presentation
  * @param {number|string} width  panel width (default 380)
  * @param {string}   title     header line 1
- * @param {string}   subtitle  header line 2 — the context, e.g. the bucket label
- * @param {string}   intro     the one-line note under the header
+ * @param {string}   subtitle  header line 2 (the approved drawer passes none)
+ * @param {string}   intro     a note under the header (the approved drawer passes none)
  * @param {Function} onClose   × · scrim · Escape
  * @param {ReactNode} footer   the foot slot — `SettingsFooter` is the default shape
  * @param {ReactNode} children the sections
@@ -90,55 +92,53 @@ export default function SettingsPanel({
   }
 
   return (
-    <ShellDrawer open={open} onClose={onClose} side="right" width={width} header={header} className={className}>
-      <div className="flex flex-col gap-4">{body}</div>
+    /* THE APPROVED DRAWER (SettingsPanelApproved, kol-r2b2 2026-08-27 — user: "LOCK
+       THIS"): no edge, no shadow, a Divider under the header, the sections. */
+    <ShellDrawer open={open} onClose={onClose} side="right" width={width} header={header} className={className} edge={false} shadow={false}>
+      <div className="flex flex-col gap-4"><Divider />{body}</div>
     </ShellDrawer>
   )
 }
 
 /**
- * SettingsRow — label + hint on the left, the control on the right. A GRID,
- * not a flex pair: the source's `justify-between` let a long hint wrap UNDER
- * the control and parked the control at the top of a two-line hint. Here the
- * text column is `minmax(0, 1fr)` so it wraps inside itself, and the control
- * centres on the row.
+ * SettingsRow — a `LabeledControl inline` (SettingsPanelApproved, 2026-08-27):
+ * uppercase label (`kol-helper-10` tracked, meta ink) in a 160px column, the
+ * control fills the rest. A switch sits at the far right (`align="end"`, the
+ * default); a dropdown fills the row (`align="fill"`). No hint sentences on the
+ * page — `hint` rides the control's `title`.
  */
-export function SettingsRow({ label, hint, children }) {
+export function SettingsRow({ label, hint, align = 'end', labelWidth = 160, children }) {
   return (
-    <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-6 py-1">
-      <div className="flex min-w-0 flex-col">
-        <span className="kol-mono-12 text-emphasis">{label}</span>
-        {hint && <span className="kol-mono-12 text-meta">{hint}</span>}
-      </div>
-      <div className="shrink-0">{children}</div>
-    </div>
+    <LabeledControl inline label={typeof label === 'string' ? label.toUpperCase() : label} labelWidth={labelWidth}>
+      <span title={hint} className={`inline-flex w-full ${align === 'fill' ? '' : 'justify-end'}`.trim()}>{children}</span>
+    </LabeledControl>
   )
 }
 
 /** SettingsSwitch — the row's on/off control: the DS ToggleSwitch, bare, sm.
  *  `disabledHint` rides `title` so a switch that cannot act says why. */
-export function SettingsSwitch({ on = false, onChange, disabled = false, disabledHint, label }) {
+export function SettingsSwitch({ on = false, onChange, disabled = false, disabledHint, label, title }) {
   return (
     <ToggleSwitch
       size="sm"
       checked={on}
       onChange={onChange}
       disabled={disabled}
-      title={disabled ? disabledHint : undefined}
+      title={title ?? (disabled ? disabledHint : undefined)}
       aria-label={label}
     />
   )
 }
 
-/** SettingsSection — a section of the panel: the estate's section label (the DS
- *  `SectionLabel`, sm — SettingsPanelEyebrowAndDropdowns, user 2026-08-27: "it's
- *  literally SECTION LABEL, SUPER COMMON PATTERN") over its rows.
- *  @param {string} label · @param {boolean} divided  a hairline above (between sections) */
-export function SettingsSection({ label, divided = false, children, className = '' }) {
+/** SettingsSection — a section of the panel (SettingsPanelApproved, 2026-08-27):
+ *  the EYEBROW (`kol-eyebrow text-fg-80`) standing apart from the rows (gap-3),
+ *  the rows in their own stack — `rowGap` 1 for switch rows (24 tall already),
+ *  2 for dropdown rows. `divided` = a hairline above (between sections). */
+export function SettingsSection({ label, divided = false, rowGap = 2, children, className = '' }) {
   return (
     <div className={`flex flex-col gap-3 ${divided ? 'kol-section--divided' : ''} ${className}`.replace(/\s+/g, ' ').trim()}>
-      {label && <SectionLabel text={label} size="sm" />}
-      {children}
+      {label && <p className="kol-eyebrow text-fg-80">{label}</p>}
+      <div className={`flex flex-col ${rowGap === 1 ? 'gap-1' : 'gap-2'}`}>{children}</div>
     </div>
   )
 }
@@ -149,7 +149,7 @@ export function SettingsSection({ label, divided = false, children, className =
  *  width is the call site's (`className="w-40"`). */
 export function SettingsChoice({ options = [], value, onChange, ariaLabel, className = '' }) {
   const opts = options.map((o) => (o != null && typeof o === 'object' ? o : { value: o, label: String(o) }))
-  return <Dropdown size="sm" variant="primary" value={value} onChange={onChange} options={opts} className={className} aria-label={ariaLabel} />
+  return <Dropdown size="sm" variant="primary" value={value} onChange={onChange} options={opts} className={`w-full ${className}`.trim()} aria-label={ariaLabel} />
 }
 
 /* THE CONTROL CHIP (SettingsPanelCompliance, user 2026-08-27: "WROOOONG" on the
@@ -160,6 +160,24 @@ export function SettingsChoice({ options = [], value, onChange, ariaLabel, class
 export const CHIP_CLS = 'kol-control kol-control-sm kol-mono-12'
 export const chipCls = (on) => `${CHIP_CLS} ${on ? 'kol-control--filled' : 'text-meta hover:text-emphasis'}`
 
+/**
+ * SettingsMulti — a many-of-N control as ONE Dropdown (SettingsPanelApproved,
+ * 2026-08-27 — the kinds row): the trigger reads `N of M <noun>`, every entry
+ * toggles and `✓` marks the ones that are on. No grouping.
+ * @param {Array}  options   [{ value, label }]
+ * @param {Array|Set} selected
+ * @param {Function} onToggle (value) => void
+ * @param {string} noun      the trigger's noun (default 'kinds')
+ */
+export function SettingsMulti({ options = [], selected = [], onToggle, noun = 'kinds', className = '' }) {
+  const on = selected instanceof Set ? selected : new Set(selected)
+  const opts = [
+    { value: '__summary', label: `${on.size} of ${options.length} ${noun}` },
+    ...options.map((o) => ({ value: o.value, label: `${on.has(o.value) ? '✓ ' : ''}${o.label ?? String(o.value)}` })),
+  ]
+  return <Dropdown size="sm" variant="primary" value="__summary" options={opts} onChange={(v) => (v === '__summary' ? null : onToggle?.(v))} className={`w-full ${className}`.trim()} />
+}
+
 /**
  * SettingsChipRow — a wrap of toggle chips with optional counts (an
  * allow-list: every chip sets a default, never a gate). `allChip` puts an
@@ -198,12 +216,16 @@ export function SettingsChipRow({ options = [], selected = [], onToggle, allChip
   )
 }
 
-/** SettingsFooter — the state word and the reset action. */
-export function SettingsFooter({ customised = false, onReset, resetLabel = 'Reset to defaults' }) {
+/** SettingsFooter — a Divider, then one `IconFrame refresh` (primary · sm) at the
+ *  right = reset to defaults (SettingsPanelApproved, 2026-08-27). No status word,
+ *  no text button. `customised` is accepted for compatibility and unused. */
+export function SettingsFooter({ onReset, resetLabel = 'Reset to defaults' }) {
   return (
-    <div className="flex items-center justify-between">
-      <span className="kol-mono-12 text-meta">{customised ? 'customised' : 'defaults'}</span>
-      {onReset && <Button variant="ghost" size="sm" onClick={onReset}>{resetLabel}</Button>}
+    <div className="flex flex-col gap-4">
+      <Divider />
+      <div className="flex justify-end">
+        {onReset && <IconFrame name="refresh" variant="primary" size="sm" onClick={onReset} title={resetLabel} aria-label={resetLabel} />}
+      </div>
     </div>
   )
 }

package/src/organisms/sectionSurface.js

@@ -0,0 +1,17 @@
+/* ONE surface prop across the section family (SectionBackgroundProp, kol-website
+ * 2026-08-27 — user: "ALL section family should pass bg as props"). A named
+ * surface, `none`, or a raw utility / token string for the odd case
+ * (`'bg-fg-absolute-16'`). Each section's default is what it painted before,
+ * so nothing moves on the bump. `theme` keeps scoping ink; this is the paint. */
+export const SURFACES = {
+  primary: 'bg-surface-primary',
+  secondary: 'bg-surface-secondary',
+  tertiary: 'bg-surface-tertiary',
+  inverse: 'bg-surface-inverse',
+  auto: 'bg-auto',
+  none: '',
+}
+export const surfaceClass = (background, fallback = 'none') => {
+  const key = background ?? fallback
+  return key in SURFACES ? SURFACES[key] : key
+}