@kolkrabbi/kol-component 0.164.0 → 0.165.0

package/package.json

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