@kolkrabbi/kol-component 0.163.0 → 0.165.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.163.0",
+  "version": "0.165.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/organisms/ColumnBrowser.jsx

@@ -94,11 +94,15 @@ const COL_ICON = { image: 'image', video: 'video', audio: 'file', playlist: 'vid
 
 /* ColumnBrowserChromeCorrections (kol-r2b2 2026-08-28, four user rulings measured live on admin.):
  * every column keeps its right edge, the last included — without it the browser reads as an
- * open-sided container when the columns do not fill the box (Finder closes it); a column's ONLY
- * row keeps its bottom hairline (`only:`) — its last row is also its first, and a missing
- * hairline beside neighbours that show one reads as a defect; and ONE ink for folders and files
- * — the `bg-fg-04` fill alone marks selection ("why is folder full opacity but not files?").
- * `muted` stays a prop for other callers; the file rows no longer pass it.
+ * open-sided container when the columns do not fill the box (Finder closes it); and ONE ink for
+ * folders and files — the fill alone marks selection ("why is folder full opacity but not
+ * files?"). `muted` stays a prop for other callers; the file rows no longer pass it.
+ * NO ROW DIVIDERS (BrowsePageRulingsAndSeams, kol-r2b2 2026-09-02): the `border-b last:border-b-0
+ * only:border-b` utilities and their inline `borderColor` are gone. The row is a PILL now — a
+ * constant 4px inset on every row so selecting never shifts the layout, radius-sm on the fill —
+ * and a hairline under a rounded pill draws the box the pill is trying not to be. The shape lives
+ * in kol-components-molecules.css with the fill, not as utilities racing it (ARCHITECTURE §5);
+ * this supersedes the `only:` hairline half of the 08-28 corrections, by the same repo's ruling.
  * STATE CLASSES (ColumnBrowserSeams, kol-r2b2 2026-08-28): `is-selected` / `is-cursor` on the row,
  * and the fill LIVES IN THE THEME now (kol-components-molecules.css) instead of a `bg-fg-04`
  * utility — the only hook a consumer had for "selected" was that utility, and a restyle that
@@ -111,11 +115,10 @@ function Row({ icon, label, active, cursor = false, trailing, onClick, muted = f
       /* Row metrics are the DS Table's (kol-components-organisms.css .kol-table-cell-*):
        * 12px 16px padding, mono 12, an oq-08 hairline between rows, none after the last. */
       /* `cursor` = the keyboard row, drawn with the hover fill so ↑/↓ always shows where you are. */
-      className={`kol-column-browser-row flex items-center gap-2 px-4 py-3 border-b last:border-b-0 only:border-b cursor-pointer transition-colors${
+      className={`kol-column-browser-row flex items-center gap-2 px-4 py-3 cursor-pointer transition-colors${
         active ? ' is-selected' : ''}${cursor ? ' is-cursor' : ''} ${
         active || cursor || !muted ? 'text-fg-default' : 'text-fg-48'
       }`}
-      style={{ borderColor: 'var(--kol-oq-08)' }}
       onClick={onClick}
     >
       <span className="w-5 shrink-0 flex items-center justify-center text-fg-48">

package/src/organisms/ContentFilters.jsx

@@ -34,6 +34,10 @@ import IconFrame from '../atoms/IconFrame.jsx'
  * @param {ReactNode} props.belowActions — the RIGHT half of the below-divider row, beside the count
  *   (kol-r2b2 2026-08-27: the sort group, once SELECT/FLAT moved up into the header strip)
  * @param {ReactNode} props.trailingActions — the header's RIGHT slot, where the view strip sits
+ * @param {'auto'|'header'|'below'} props.trailingPlacement — WHERE `trailingActions` sit (the showcase's icons page,
+ *   2026-09-02: brand's ground + guide cluster in this slot measured 223px and scrolled `main` sideways at 390):
+ *   `auto` (default) the header from `md`, their OWN line under the divider below it — full width, wrapping; `header` / `below` pin it.
+ *   The same rung `viewPlacement` and LIST/GRID have.
  *   (kol-r2b2 2026-08-27: a consumer's own controls — sort, flat, select — belong there;
  *   `headerActions` is the left group beside search and was never that)
  * @param {Function} props.onFilterChange — optional callback when filters change
@@ -101,6 +105,7 @@ const ContentFilters = ({
   searchKeys = ['label', 'name', 'title', 'type'],
   headerActions,
   trailingActions,
+  trailingPlacement = 'auto',
   leadingActions,
   belowActions,
   showCountOnlyWhenFiltering = false,
@@ -346,7 +351,7 @@ const ContentFilters = ({
             * for exactly this (lobby ruling 2026-07-30 — "icons only, NO
             * states"); the span here was the same defect that promoted it. */}
           {/* the icon gap matches the specimen header — 16 from md (FoundrySpecimenSections, 2026-08-27) */}
-          <h2 className="flex items-center gap-2 md:gap-4">
+          <h2 className={`flex items-center gap-2 md:gap-4 ${searchOpen ? 'max-md:hidden' : ''}`}>
             {titleIcon && <IconFrame name={titleIcon} variant="secondary" size="md" />}
             {/* `pr-4` by rule (ContentFiltersTitleGap, kol-website 2026-08-27): the
               * divider sat 24px from the title's text edge but 32 from the
@@ -359,8 +364,13 @@ const ContentFilters = ({
               * spending 40px of a 390px viewport on one divider. */}
             <span className={`${titleClassName} pr-2 md:pr-4`} style={titleUppercase ? { textTransform: 'uppercase', letterSpacing: 1 } : undefined}>{title}</span>
           </h2>
-          <Divider variant="vertical" />
-          <div className="flex items-center gap-1">
+          <Divider variant="vertical" className={searchOpen ? 'max-md:hidden' : ''} />
+          {/* THE OPEN SEARCH TAKES THE ROW BELOW `md` (2026-09-02, the showcase
+            * held to its own law): the pill is a fixed 200px, and beside the
+            * title at 390 it scrolled `main` sideways. Title and divider step
+            * aside while searching and return on close; the group grows to the
+            * row so the pill fits. */}
+          <div className="flex items-center gap-1 min-w-0 max-md:flex-1">
             {/* IconFrame, not a kol-btn with its chrome cancelled inline.
               * 05-control-chrome.md:109 — "any icon-only control in chrome is
               * IconFrame; nothing hand-writes the square". This wore
@@ -405,6 +415,7 @@ const ContentFilters = ({
               value={searchText}
               onChange={(e) => setSearchText(e.target.value)}
               expandedWidth={200}
+              className="max-w-full"
               triggerLabel="Search"
               /* NO placeholder. The field opens from a glyph you just clicked —
                * the caret is the affordance, and a greyed "Search…" sitting in
@@ -433,10 +444,17 @@ const ContentFilters = ({
         </div>
 
         <div className="flex items-center gap-6">
-          {trailingActions}
-          {/* The divider between a consumer's trailing controls and the strip is
-            * the organism's, as it is on the left between title and icons. */}
-          {trailingActions && layoutPlacement === 'header' && layoutStrip && <Divider variant="vertical" />}
+          {/* the consumer's trailing controls ride the header from `md` under
+            * `auto`; below it they move to the below-divider row (same rung as
+            * the view strip and LIST/GRID) so the header row never scrolls */}
+          {trailingActions && trailingPlacement !== 'below' && (
+            <div className={`${trailingPlacement === 'auto' ? 'hidden md:flex' : 'flex'} items-center gap-6`}>
+              {trailingActions}
+              {/* The divider between a consumer's trailing controls and the strip is
+                * the organism's, as it is on the left between title and icons. */}
+              {layoutPlacement === 'header' && layoutStrip && <Divider variant="vertical" />}
+            </div>
+          )}
           {layoutPlacement === 'header' && layoutStrip}
           {/* RECENT / SAVED is the SAME STRIP as LIST / GRID, not a ViewToggle.
             * Read off kol-monitor's original (_tmp/2026-08-15-shell-adoption/
@@ -466,6 +484,14 @@ const ContentFilters = ({
           {viewStrip('flex flex-wrap gap-y-2')}
         </div>
       )}
+      {/* the consumer's trailing controls: their OWN line below md (`auto`) or
+        * always (`below`) — full width, wrapping. In the below row's right
+        * group they measured 223px beside LIST/GRID in a 342px track. */}
+      {trailingActions && trailingPlacement !== 'header' && (
+        <div className={`${trailingPlacement === 'auto' ? 'md:hidden ' : ''}mb-3 flex flex-wrap items-center gap-6 gap-y-2`}>
+          {trailingActions}
+        </div>
+      )}
 
       {/* BELOW the divider: the filter GROUPS only. Left-aligned columns —
         * label above values — visible only while the filter toggle is open.

package/src/organisms/MediaLibraryPages.jsx

@@ -223,13 +223,13 @@ function MediaInspector({ files, index, onClose, onPrev, onNext, mediaUrl, downl
 /* Display settings for the ACTIVE bucket — kol-r2b2's drawer wiring on the DS
  * organism (the composition the user locked 2026-08-27). Every control sets a
  * default, never a gate. */
-function MediaSettings({ bucketMeta, settings, onChange, onReset, onClose, profile }) {
+function MediaSettings({ bucketMeta, settings, onChange, onReset, onClose, profile, settingsFooter }) {
   const set = (patch) => onChange({ ...settings, ...patch })
   const toggleKind = (k) => set({ kinds: settings.kinds.includes(k) ? settings.kinds.filter((x) => x !== k) : [...settings.kinds, k] })
   const noVariants = profile.variantSets === 0
   const noSegments = profile.segments === 0
   return (
-    <SettingsPanel variant="drawer" title="Display settings" onClose={onClose} footer={<SettingsFooter onReset={onReset} />}>
+    <SettingsPanel variant="drawer" title="Display settings" onClose={onClose} footer={<SettingsFooter onReset={onReset}>{settingsFooter}</SettingsFooter>}>
       <LabeledControlSection label="Structure" rowGap={1} divided>
         <SettingsRow label="Columns" hint="Finder-style columns instead of folder rows">
           <SettingsSwitch label="Columns" on={(settings.folderView ?? 'rows') === 'columns'} onChange={(v) => set({ folderView: v ? 'columns' : 'rows' })} />
@@ -299,7 +299,7 @@ const profileOf = (objects, rawFiles, systemCount) => ({
 /* ══ BROWSE — folder / files ═══════════════════════════════════════════════ */
 export function MediaLibraryBrowse({
   client, title = 'MEDIA', bucket, onBucketChange, prefix: prefixProp, onPrefix, defaults, settings: settingsProp, onSettingsChange,
-  folderTree, headerActions, refreshKey, onOpen, autoFocus = false, className = '',
+  folderTree, headerActions, refreshKey, onOpen, autoFocus = false, settingsFooter, className = '',
 }) {
   const [ownPrefix, setOwnPrefix] = useState('')
   const prefix = prefixProp ?? ownPrefix
@@ -399,7 +399,7 @@ export function MediaLibraryBrowse({
             onNext={() => setQuickLook((q) => ({ ...q, index: (q.index + 1) % q.files.length }))} />
         )}
         {settingsOpen && (
-          <MediaSettings bucketMeta={bucketMeta} settings={settings} profile={profile} onChange={setSettings} onReset={() => setSettings(null)} onClose={() => setSettingsOpen(false)} />
+          <MediaSettings bucketMeta={bucketMeta} settings={settings} profile={profile} onChange={setSettings} onReset={() => setSettings(null)} onClose={() => setSettingsOpen(false)} settingsFooter={settingsFooter} />
         )}
 
         {folderView === 'columns' ? (
@@ -468,7 +468,7 @@ export function MediaLibraryBrowse({
 /* ══ LIBRARY — the content-filters wall ═══════════════════════════════════ */
 export function MediaLibraryLibrary({
   client, title = 'MEDIA', bucket, onBucketChange, prefix = '', defaults, settings: settingsProp, onSettingsChange,
-  headerActions, refreshKey, header = true, stats = true, className = '',
+  headerActions, refreshKey, header = true, stats = true, settingsFooter, className = '',
 }) {
   const [ownBucket, setOwnBucket] = useState(bucket)
   const bucketId = bucket ?? ownBucket
@@ -633,7 +633,7 @@ export function MediaLibraryLibrary({
           onBucket={(v) => { if (v === 'all') return; if (bucket == null) setOwnBucket(v); onBucketChange?.(v) }} onSettings={() => setSettingsOpen(true)} />
       )}
       {settingsOpen && (
-        <MediaSettings bucketMeta={bucketMeta} settings={settings} profile={profile} onChange={setSettings} onReset={() => setSettings(null)} onClose={() => setSettingsOpen(false)} />
+        <MediaSettings bucketMeta={bucketMeta} settings={settings} profile={profile} onChange={setSettings} onReset={() => setSettings(null)} onClose={() => setSettingsOpen(false)} settingsFooter={settingsFooter} />
       )}
 
       {/* `stats={false}` (ColumnBrowserSeams, kol-r2b2 2026-08-28) — beside `header={false}`: a browse

package/src/organisms/SettingsPanel.jsx

@@ -238,12 +238,23 @@ export function SettingsChipRow({ options = [], selected = [], onToggle, allChip
 
 /** 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' }) {
+ *  no text button. `customised` is accepted for compatibility and unused.
+ *
+ *  `children` ride the SAME row, before reset (BrowsePageRulingsAndSeams,
+ *  kol-r2b2 2026-09-02): a consumer wanting one more control in that footer had
+ *  no way in, so kol-r2b2 ran a `MutationObserver` on `document.body` watching
+ *  for `[aria-label="Reset to defaults"]` and portalled a theme chip into its
+ *  parent — a copy string in a `querySelector`, watching the whole document, to
+ *  place one button. The slot is the seam that ends it.
+ *
+ *  `gap-2` on the row (user 2026-08-28): `flex justify-end` with no gap is right
+ *  for one control and wrong for two — the chip and the reset icon touched. */
+export function SettingsFooter({ onReset, resetLabel = 'Reset to defaults', children }) {
   return (
     <div className="flex flex-col gap-4">
       <Divider />
-      <div className="flex justify-end">
+      <div className="flex justify-end items-center gap-2">
+        {children}
         {onReset && <IconFrame name="refresh" variant="primary" size="sm" onClick={onReset} title={resetLabel} aria-label={resetLabel} />}
       </div>
     </div>