@kolkrabbi/kol-component 0.103.0 → 0.104.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.103.0",
+  "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/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>
   )
 }