@kolkrabbi/kol-component 0.224.0 → 0.226.0

package/src/organisms/LayerStack.jsx

@@ -3,7 +3,7 @@ import { Icon } from '@kolkrabbi/kol-icons'
 import Button from '../atoms/Button.jsx'
 import Input from '../atoms/Input.jsx'
 import { MenuDropdownItem, MenuDropdownNest } from '../molecules/MenuItem.jsx'
-import { usePopover, PopoverPanel } from '../utilities/Popover.jsx'
+import { usePopover, PopoverPanel, Tooltip } from '../utilities/Popover.jsx'
 import { rowLabelForLayer, findLayerDeep } from '../hooks/layerTree.js'
 
 /* DS icon names for the engine's types — every one a shipped v1 glyph. A
@@ -51,11 +51,11 @@ function useShiftClickHandlers(onSelect, onShiftSelect) {
 
 function Chevron({ IconC, collapsed, onToggle, title }) {
   return (
+    <Tooltip label={title} asChild>
     <button
       type="button"
       onClick={onToggle}
       aria-expanded={!collapsed}
-      title={title}
       className="kol-layer-stack-collapse"
     >
       <IconC
@@ -64,6 +64,7 @@ function Chevron({ IconC, collapsed, onToggle, title }) {
         style={{ transform: collapsed ? 'rotate(-90deg)' : 'rotate(0deg)', transition: 'transform 150ms' }}
       />
     </button>
+    </Tooltip>
   )
 }
 
@@ -160,24 +161,26 @@ function LayerRow({
             </span>
           </button>
         )}
+        <Tooltip label={layer.visible ? 'Hide' : 'Show'} asChild>
         <button
           type="button"
           onClick={onToggleVisibility}
-          title={layer.visible ? 'Hide' : 'Show'}
           aria-pressed={!layer.visible}
           className={`kol-layer-stack-toggle kol-layer-stack-toggle--eye${active || !layer.visible ? ' is-pinned' : ''}`}
         >
           <IconC name={layer.visible ? 'eye-on' : 'eye-off'} size={12} />
         </button>
+        </Tooltip>
+        <Tooltip label={layer.locked ? 'Unlock' : 'Lock'} asChild>
         <button
           type="button"
           onClick={onToggleLock}
-          title={layer.locked ? 'Unlock' : 'Lock'}
           aria-pressed={!!layer.locked}
           className={`kol-layer-stack-toggle kol-layer-stack-toggle--lock${active || layer.locked ? ' is-pinned' : ''}${layer.locked ? ' is-on' : ''}`}
         >
           <IconC name={layer.locked ? 'lock' : 'unlock'} size={12} />
         </button>
+        </Tooltip>
       </div>
     </div>
   )
@@ -419,16 +422,17 @@ export default function LayerStack({
         * consumer's keymap. */}
       {onGroup && layerSelectionCount >= 2 && (
         <div className="mt-auto flex items-center gap-2 px-3 h-10 border-t border-fg-08">
+          <Tooltip label={`Group ${layerSelectionCount} selected layers`}>
           <Button
             iconComponent={IconC}
             variant="primary"
             size="sm"
             iconLeft="layers"
             onClick={() => onGroup(layerSelectedIds)}
-            title={`Group ${layerSelectionCount} selected layers`}
           >
             Group {layerSelectionCount}
           </Button>
+          </Tooltip>
         </div>
       )}
     </div>
@@ -469,6 +473,7 @@ export function AddLayerButton({
   return (
     <>
       <span ref={popover.refs.setReference} {...popover.getReferenceProps()} className="inline-flex">
+        <Tooltip label="Add layer">
         <Button
           iconComponent={IconC}
           variant="primary"
@@ -476,8 +481,8 @@ export function AddLayerButton({
           quiet
           iconOnly="plus"
           aria-label="Add layer"
-          title="Add layer"
         />
+        </Tooltip>
       </span>
       <PopoverPanel popover={popover} className="py-1" style={{ width: menuWidth }}>
         {types.map((t) => {

package/src/organisms/MediaLibrary.jsx

@@ -708,7 +708,7 @@ function FilesBody({ files, viewMode, onOpen, onPick }) {
   )
   /* the title voice is the family's ruled default (heading-04 card / heading-05
    * row, truncated by ContentText); the full key rides as the tooltip, as before */
-  const nameFor = (row) => <span title={row.key}>{row.displayKey}</span>
+  const nameFor = (row) => <Tooltip label={row.key} asChild><span>{row.displayKey}</span></Tooltip>
   const date = (row) => (row.uploaded ? String(row.uploaded).slice(0, 10) : undefined)
   const size = (row) => formatSize(row.size) || undefined
 

package/src/organisms/MediaLibraryExplorer.jsx

@@ -1,5 +1,7 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { MediaLibraryBrowse } from './MediaLibraryPages.jsx'
+import { useModal } from '../molecules/Modal.jsx'
+import useMediaQuery from '../hooks/useMediaQuery.js'
 
 /**
  * MediaLibraryExplorer — the media surface, and since 2026-09-22 a thin name for it.
@@ -17,15 +19,77 @@ import { MediaLibraryBrowse } from './MediaLibraryPages.jsx'
  * @param {'columns'|'rows'|'grid'|'list'} view  controlled view; omit and the page reads its own setting
  * @param {Function} onViewChange  (view) => void
  * @param {'columns'|'rows'|'grid'|'list'} defaultView  first view when uncontrolled and nothing is stored
+ *
+ * THE TOOL'S OWN BEHAVIOUR, opt-in (media parity, 2026-09-26 — user: "media in shell is just media in
+ * shell.. so there shouldnt really be a reason to diff"). apps/media carried these in its App.jsx, so
+ * the same tool one shell over had none of them. They are the product's, so they live with it:
+ *
+ * @param {boolean}  keys       the view keys — B browse · F files · R rows · C columns · G grid — and N
+ *                              (new folder, when `fileActions.createFolder` is given), plus K → `onKinds`.
+ *                              Ignored while typing and with ⌘ / Ctrl / ⌥ held
+ * @param {boolean}  phoneTabs  below 768 the surface is three tabs — Browse · Files · Kinds (Kinds only
+ *                              with `onKinds`); a tab picks the view, Kinds opens the overview and leaves
+ *                              the surface where it was
+ * @param {Function} onKinds    opens the app's file-formats overview (K, the Kinds tab)
  */
-export default function MediaLibraryExplorer({ view, onViewChange, defaultView, ...pageProps }) {
+const TABS = [
+  { value: 'browse', label: 'Browse', icon: 'folder' },
+  { value: 'files', label: 'Files', icon: 'view-list' },
+  { value: 'kinds', label: 'Kinds', icon: 'grid' },
+]
+/* a key → the view it shows and the phone tab that view belongs to (apps/media's map, verbatim) */
+const VIEW_KEYS = { b: ['columns', 'browse'], f: ['list', 'files'], r: ['rows', 'browse'], c: ['columns', 'browse'], g: ['grid', 'files'] }
+
+export default function MediaLibraryExplorer({ view, onViewChange, defaultView, keys = false, phoneTabs = false, onKinds, ...pageProps }) {
   const [ownView, setOwnView] = useState(view ?? defaultView)
   const current = view ?? ownView
+  const setView = (v) => { setOwnView(v); onViewChange?.(v) }
+  const [tab, setTab] = useState('browse')
+  const phone = useMediaQuery('(max-width: 767px)')
+  const modal = useModal()
+
+  /* the latest props for the key handler, without re-binding it every render */
+  const live = useRef()
+  live.current = { onKinds, prefix: pageProps.prefix ?? '', createFolder: pageProps.fileActions?.createFolder, modal }
+  useEffect(() => {
+    if (!keys) return undefined
+    const onKey = (e) => {
+      if (e.metaKey || e.ctrlKey || e.altKey) return
+      const el = e.target
+      if (el?.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el?.tagName ?? '')) return
+      const { onKinds: kinds, prefix, createFolder, modal: m } = live.current
+      if (VIEW_KEYS[e.key]) {
+        e.preventDefault()
+        const [v, t] = VIEW_KEYS[e.key]
+        setOwnView(v); onViewChange?.(v); setTab(t)
+      } else if (e.key === 'k' && kinds) {
+        e.preventDefault(); kinds()
+      } else if (e.key === 'n' && createFolder) {
+        e.preventDefault()
+        m.prompt(`New folder in ${prefix || 'the bucket root'}:`, '', { okLabel: 'Create' }).then((name) => {
+          if (name?.trim()) createFolder(`${prefix}${name.trim().replace(/^\/+|\/+$/g, '')}/`)
+        })
+      }
+    }
+    window.addEventListener('keydown', onKey)
+    return () => window.removeEventListener('keydown', onKey)
+  }, [keys]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const onTabChange = (v) => {
+    if (v === 'kinds') { onKinds?.(); return }
+    setTab(v)
+    setView(v === 'files' ? 'list' : 'columns')
+  }
+  const tabProps = phoneTabs && phone
+    ? { tabs: onKinds ? TABS : TABS.filter((t) => t.value !== 'kinds'), activeTab: tab, onTabChange }
+    : {}
+
   return (
     <MediaLibraryBrowse
       {...pageProps}
+      {...tabProps}
       view={current}
-      onViewChange={(v) => { setOwnView(v); onViewChange?.(v) }}
+      onViewChange={setView}
     />
   )
 }

package/src/organisms/MediaLibraryPages.jsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useMemo, useRef, useState } from 'react'
+import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'
 import formatSize from '../utilities/formatSize.js'
 import { Icon } from '@kolkrabbi/kol-icons'
 import Button from '../atoms/Button.jsx'
@@ -37,7 +37,8 @@ import { listDrafts, moveDrafts, DRAFTS_EVENT } from '../utilities/localDrafts.j
 import { parseFrontmatter } from '../utilities/frontmatter.js'
 import ShellSearchOverlay from './ShellSearchOverlay.jsx'
 import ColumnBrowser, { isFileDrag, Preview as ColumnPreview, SelectionPreview } from './ColumnBrowser.jsx'
-import SettingsPanel, { LabeledControlSection, SettingsRow, SettingsSwitch, SettingsChoice, SettingsMulti, SettingsFooter } from './SettingsPanel.jsx'
+import SettingsPanel, { SettingsSwitch, SettingsChoice, SettingsMulti, SettingsFooter } from './SettingsPanel.jsx'
+import SettingsSections from './SettingsSections.jsx'
 import { kindOf, extOf, KIND_LABEL, KINDS, DEFAULT_KINDS, isSystemFile, isSegment, groupSegments, groupVariants, posterFor, partition } from '../utilities/mediaKinds.js'
 import { nearestRatio } from '../utilities/ratios.js'
 
@@ -108,7 +109,7 @@ export const SETTINGS_BASE = {
   folderView: 'columns', // 'rows' | 'columns'
   sortBy: 'name',
   sortDir: 'asc',
-  columnHeight: 528, // px, or any CSS length — forwarded to ColumnBrowser `height` untouched
+  columnHeight: 528, // px, any CSS length (forwarded to ColumnBrowser `height` untouched), or 'fill' — what is left of the window
   columnWidths: {},
   rowPreview: true, // row view's preview pane beside the list (Finder's "Show preview")
   view: 'columns', // 'columns' | 'rows' | 'grid' | 'list' — the ONE view state (2026-09-22)
@@ -333,7 +334,7 @@ function FolderRow({ name, icon = 'folder', onClick, onDoubleClick, depth = 0, e
       {onToggle ? (
         <button type="button" aria-label={expanded ? `Collapse ${name}` : `Expand ${name}`} aria-expanded={!!expanded}
           onClick={(e) => { e.stopPropagation(); onToggle() }}
-          className="w-4 h-4 shrink-0 flex items-center justify-center text-fg-32 hover:text-fg-default transition-transform"
+          className="w-4 h-4 shrink-0 flex items-center justify-center text-oq-32 hover:text-fg-default transition-transform"
           style={{ transform: expanded ? 'rotate(90deg)' : 'none' }}>
           <Icon name="chevron-right" size={12} />
         </button>
@@ -683,61 +684,62 @@ export function MediaInspector({ files, index, onClose, onPrev, onNext, mediaUrl
   )
 }
 
-/* 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, settingsFooter }) {
+/* THE DISPLAY SETTINGS AS DATA (media-shell, user 2026-09-26: "missing settings sidebar? … or are
+ * we saying the shell has settings different from media?"). The rows were hard-wired JSX inside this
+ * drawer, so an app page could not show them and a second settings system grew beside it. Now ONE
+ * builder: this drawer renders it, and an app renders the same rows on its settings page and its own
+ * drawer (kol-shell `HubSettings sections`). `settings` is the page's per-bucket settings object,
+ * `onChange(next)` sets it, `profile` (what the bucket holds) drives the "nothing to fold" states —
+ * omit it where the listing is not at hand and those two switches stay enabled with plain hints.
+ * Every control sets a default, never a gate. */
+export function mediaSettingsSections({ settings, onChange, profile }) {
   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
+  const kinds = settings.kinds ?? []
+  const toggleKind = (k) => set({ kinds: kinds.includes(k) ? kinds.filter((x) => x !== k) : [...kinds, k] })
+  const noVariants = profile?.variantSets === 0
+  const noSegments = profile?.segments === 0
+  return [
+    { label: 'Structure', rowGap: 1, rows: [
+      { label: 'Columns', hint: 'Finder-style columns instead of folder rows',
+        render: () => <SettingsSwitch label="Columns" on={(settings.folderView ?? 'rows') === 'columns'} onChange={(v) => set({ folderView: v ? 'columns' : 'rows' })} /> },
+      { label: 'Preview', hint: 'the picked file beside the rows',
+        render: () => <SettingsSwitch label="Preview" on={settings.rowPreview ?? true} onChange={(v) => set({ rowPreview: v })} /> },
+      /* NOT "Columns" — that switch above means Finder's column browser. These are the row view's
+       * date/size FIELDS, which is what the user calls them. */
+      { label: 'Fields', hint: 'date and size beside each row, with a sort header',
+        render: () => <SettingsSwitch label="Fields" on={!!settings.rowColumns} onChange={(v) => set({ rowColumns: v })} /> },
+      { label: 'Flat', hint: 'ignore folders, show the whole subtree',
+        render: () => <SettingsSwitch label="Flat" on={settings.flat} onChange={(v) => set({ flat: v })} /> },
+      { label: 'Group resolutions', hint: noVariants ? 'no resolution sets in this bucket' : profile ? `${profile.variantSets} sets — previews the smallest file` : 'previews the smallest file of a set',
+        render: () => <SettingsSwitch label="Group resolutions" on={settings.groupVariants} onChange={(v) => set({ groupVariants: v })} disabled={noVariants} disabledHint="nothing to group here" /> },
+      { label: 'Fold HLS segments', hint: noSegments ? 'no segments in this bucket' : profile ? `${profile.segments} segments into stream rows` : 'segments into stream rows',
+        render: () => <SettingsSwitch label="Fold HLS segments" on={settings.foldSegments} onChange={(v) => set({ foldSegments: v })} disabled={noSegments} disabledHint="nothing to fold here" /> },
+    ] },
+    { label: 'Loading', rows: [
+      { label: 'Kinds', align: 'fill',
+        render: () => <SettingsMulti options={ALL_KINDS.map((k) => ({ value: k, label: KIND_LABEL[k] || k }))} selected={kinds} onToggle={toggleKind} noun="kinds" /> },
+      { label: 'Page size', hint: 'entries mounted at once', align: 'fill',
+        render: () => <SettingsChoice options={[{ value: 100, label: '100' }, { value: 200, label: '200' }, { value: 500, label: '500' }, { value: 0, label: 'All' }]} value={settings.pageSize} onChange={(v) => set({ pageSize: v })} /> },
+      { label: 'Video preview', hint: 'poster uses the sibling image; autoload fetches the file', align: 'fill',
+        render: () => <SettingsChoice options={[{ value: 'poster', label: 'Poster' }, { value: 'none', label: 'None' }, { value: 'autoload', label: 'Autoload' }]} value={settings.videoPreview} onChange={(v) => set({ videoPreview: v })} /> },
+    ] },
+    { label: 'Layout', rows: [
+      { label: 'View', align: 'fill',
+        render: () => <SettingsChoice options={[{ value: 'off', label: 'Off' }, { value: 'grid', label: 'Grid' }, { value: 'list', label: 'List' }]} value={settings.layout} onChange={(v) => set({ layout: v })} /> },
+      { label: 'Sort', align: 'fill',
+        render: () => <SettingsChoice options={SORT_OPTIONS} value={settings.sortBy} onChange={(v) => set({ sortBy: v })} /> },
+      { label: 'Direction', align: 'fill',
+        render: () => <SettingsChoice options={[{ value: 'asc', label: '↓ Asc' }, { value: 'desc', label: '↑ Desc' }]} value={settings.sortDir} onChange={(v) => set({ sortDir: v })} /> },
+    ] },
+  ]
+}
+
+/* Display settings for the ACTIVE bucket — kol-r2b2's drawer wiring on the DS organism (the
+ * composition the user locked 2026-08-27), drawn from `mediaSettingsSections`. */
+function MediaSettings({ settings, onChange, onReset, onClose, profile, settingsFooter }) {
   return (
     <SettingsPanel variant="drawer" title="Display settings" onClose={onClose} footer={<SettingsFooter onReset={onReset} resetLabel="Reset preferences">{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' })} />
-        </SettingsRow>
-        <SettingsRow label="Preview" hint="the picked file beside the rows">
-          <SettingsSwitch label="Preview" on={settings.rowPreview ?? true} onChange={(v) => set({ rowPreview: v })} />
-        </SettingsRow>
-        {/* NOT "Columns" — that switch three rows up means Finder's column browser. These are the
-            row view's date/size FIELDS, which is what the user calls them. */}
-        <SettingsRow label="Fields" hint="date and size beside each row, with a sort header">
-          <SettingsSwitch label="Fields" on={!!settings.rowColumns} onChange={(v) => set({ rowColumns: v })} />
-        </SettingsRow>
-        <SettingsRow label="Flat" hint="ignore folders, show the whole subtree">
-          <SettingsSwitch label="Flat" on={settings.flat} onChange={(v) => set({ flat: v })} />
-        </SettingsRow>
-        <SettingsRow label="Group resolutions" hint={noVariants ? 'no resolution sets in this bucket' : `${profile.variantSets} sets — previews the smallest file`}>
-          <SettingsSwitch label="Group resolutions" on={settings.groupVariants} onChange={(v) => set({ groupVariants: v })} disabled={noVariants} disabledHint="nothing to group here" />
-        </SettingsRow>
-        <SettingsRow label="Fold HLS segments" hint={noSegments ? 'no segments in this bucket' : `${profile.segments} segments into stream rows`}>
-          <SettingsSwitch label="Fold HLS segments" on={settings.foldSegments} onChange={(v) => set({ foldSegments: v })} disabled={noSegments} disabledHint="nothing to fold here" />
-        </SettingsRow>
-      </LabeledControlSection>
-      <LabeledControlSection label="Loading" divided>
-        <SettingsRow label="Kinds" align="fill">
-          <SettingsMulti options={ALL_KINDS.map((k) => ({ value: k, label: KIND_LABEL[k] || k }))} selected={settings.kinds} onToggle={toggleKind} noun="kinds" />
-        </SettingsRow>
-        <SettingsRow label="Page size" hint="entries mounted at once" align="fill">
-          <SettingsChoice options={[{ value: 100, label: '100' }, { value: 200, label: '200' }, { value: 500, label: '500' }, { value: 0, label: 'All' }]} value={settings.pageSize} onChange={(v) => set({ pageSize: v })} />
-        </SettingsRow>
-        <SettingsRow label="Video preview" hint="poster uses the sibling image; autoload fetches the file" align="fill">
-          <SettingsChoice options={[{ value: 'poster', label: 'Poster' }, { value: 'none', label: 'None' }, { value: 'autoload', label: 'Autoload' }]} value={settings.videoPreview} onChange={(v) => set({ videoPreview: v })} />
-        </SettingsRow>
-      </LabeledControlSection>
-      <LabeledControlSection label="Layout" divided>
-        <SettingsRow label="View" align="fill">
-          <SettingsChoice options={[{ value: 'off', label: 'Off' }, { value: 'grid', label: 'Grid' }, { value: 'list', label: 'List' }]} value={settings.layout} onChange={(v) => set({ layout: v })} />
-        </SettingsRow>
-        <SettingsRow label="Sort" align="fill">
-          <SettingsChoice options={SORT_OPTIONS} value={settings.sortBy} onChange={(v) => set({ sortBy: v })} />
-        </SettingsRow>
-        <SettingsRow label="Direction" align="fill">
-          <SettingsChoice options={[{ value: 'asc', label: '↓ Asc' }, { value: 'desc', label: '↑ Desc' }]} value={settings.sortDir} onChange={(v) => set({ sortDir: v })} />
-        </SettingsRow>
-      </LabeledControlSection>
-      {void bucketMeta}
+      <SettingsSections sections={mediaSettingsSections({ settings, onChange, profile })} divided />
     </SettingsPanel>
   )
 }
@@ -916,6 +918,44 @@ function LibraryHeader({ title, buckets, bucketId, appRoot, onBucket, bucketMeta
   )
 }
 
+/* `columnHeight: 'fill'` — THE BROWSER TAKES WHAT IS LEFT OF THE WINDOW (media-shell, user 2026-09-26:
+ * "why isnt the browser in media shell using available height like media does?"). apps/media had it
+ * as a hand-measured `calc(100dvh - 212px)` — its header, gaps and padding, counted once — so the same
+ * tool one shell over got the 528 base. Measured instead: the window, less the view's own top, less
+ * what the page draws under it (the count line), less the bottom padding / border / margin of every
+ * box around it. Follows a resize and any change above it. Floor 240 so a short window still browses. */
+/* `view` is the ELEMENT (state, via a callback ref), not a ref object: the view mounts after the data
+ * loads, and in a fixed-height page (kol-shell PageShell) nothing else resizes to wake the observer —
+ * a ref read once at mount stayed null and the browser sat at the 528 base. */
+function useFillHeight(on, view, pageEl) {
+  const [h, setH] = useState(null)
+  useLayoutEffect(() => {
+    if (!on || !view) return undefined
+    const measure = () => {
+      const page = pageEl.current
+      if (!page) return
+      const r = view.getBoundingClientRect()
+      /* what the page DRAWS under the view — its content's bottom, not its box's: a page stretched to
+       * fill its container (flex-1) would count its own empty space as "below" and freeze the height */
+      const contentBottom = Math.max(r.bottom, ...[...page.children].map((c) => c.getBoundingClientRect().bottom))
+      let below = contentBottom - r.bottom
+      for (let el = page; el && el !== document.body; el = el.parentElement) {
+        const cs = getComputedStyle(el)
+        below += parseFloat(cs.paddingBottom) + parseFloat(cs.borderBottomWidth) + (el === page ? 0 : parseFloat(cs.marginBottom))
+      }
+      const next = Math.max(240, Math.floor(window.innerHeight - r.top - below))
+      setH((p) => (p === next ? p : next))
+    }
+    measure()
+    const ro = new ResizeObserver(measure)
+    ro.observe(document.body)
+    if (pageEl.current) ro.observe(pageEl.current)
+    window.addEventListener('resize', measure)
+    return () => { ro.disconnect(); window.removeEventListener('resize', measure) }
+  }, [on, view]) // eslint-disable-line react-hooks/exhaustive-deps
+  return h
+}
+
 /* the profile — what the bucket holds; drives the chips and the settings' "nothing to fold" states */
 const profileOf = (objects, rawFiles, systemCount) => ({
   variantSets: groupVariants(objects.map((o) => ({ ...o, displayKey: o.key }))).filter((g) => g.variants).length,
@@ -1689,6 +1729,17 @@ export function MediaLibraryBrowse({
     setQuickLook({ files, index: at === -1 ? 0 : at })
   }, [rowSelection]) // eslint-disable-line react-hooks/exhaustive-deps
   const columnsRef = useRef(null)
+  /* the view box (whichever view is mounted) and the page root — what `fill` measures */
+  const [viewEl, viewRef] = useState(null)
+  /* stable, so the columns box is not re-attached (null, then itself) on every render */
+  const columnsBox = useCallback((el) => { columnsRef.current = el; viewRef(el) }, [])
+  const pageRef = useRef(null)
+  const fill = settings.columnHeight === 'fill'
+  const fillH = useFillHeight(fill, viewEl, pageRef)
+  /* a drag in fill mode is the SESSION's, never saved — one height on every reload (apps/media's ruling) */
+  const [dragH, setDragH] = useState(null)
+  const colH = fill ? (dragH ?? fillH ?? SETTINGS_BASE.columnHeight) : (settings.columnHeight ?? SETTINGS_BASE.columnHeight)
+  const onColH = (px) => (fill ? setDragH(px) : setSettings({ ...settings, columnHeight: px }))
   /* `flat` IS THE WALL'S, NOT THIS PAGE'S (user 2026-09-22: "there is no option to switch to flat
    * mode, bc its not in files view. this is row mode.. this makes no sense"). It reached here from
    * kol-r2b2's single surface and did two things that cannot be defended in a TREE: it struck every
@@ -1904,12 +1955,12 @@ export function MediaLibraryBrowse({
     const treeObjects = keep ? sortedObjects.filter((o) => keep.has(o.key)) : sortedObjects
     return (
   folderView === 'columns' || phone ? (
-            <div ref={columnsRef} className="relative">
+            <div ref={columnsBox} className="relative">
               <ColumnBrowser
                 autoFocus={autoFocus}
                 className={atTitleRoot ? 'is-root' : ''}
-                height={settings.columnHeight}
-                onHeightChange={(px) => setSettings({ ...settings, columnHeight: px })}
+                height={colH}
+                onHeightChange={onColH}
                 columnWidths={settings.columnWidths}
                 onColumnResize={(i, px) => setSettings({ ...settings, columnWidths: { ...(settings.columnWidths ?? {}), [i]: px } })}
                 objects={treeObjects.filter((o) => !isSystemFile(o.key)).map((o) => ({ ...o, key: `${VROOT}${o.key}` }))}
@@ -1993,7 +2044,7 @@ export function MediaLibraryBrowse({
              * the same line — the count line under them jumps otherwise, and a consumer's fill height
              * is ONE value for both — so the header comes out of this view's budget rather than being
              * added to it. The pane takes what is left. */
-            <div className="flex flex-col gap-2" style={{ height: settings.columnHeight ?? SETTINGS_BASE.columnHeight }}>
+            <div ref={viewRef} className="flex flex-col gap-2" style={{ height: colH }}>
             {/* the header labels the LIST, so it spans the list and stops where the preview starts */}
             {rowCols && (
               <RowHeader sortBy={settings.sortBy} sortDir={settings.sortDir} width={showRowPreview ? `calc(100% - ${previewWidth}px)` : '100%'}
@@ -2103,7 +2154,7 @@ export function MediaLibraryBrowse({
       onChange={(e) => setSettings({ ...settings, tileSize: Number(e.target.value) })} aria-label="Tile size" />
   )
   const wallPane = (files) => (
-    <div className="flex flex-col gap-2" style={{ height: settings.columnHeight ?? SETTINGS_BASE.columnHeight }}>
+    <div ref={viewRef} className="flex flex-col gap-2" style={{ height: colH }}>
     <div className="relative border rounded flex overflow-hidden flex-1 min-h-0" style={{ borderColor: 'var(--kol-oq-08)' }}>
     {/* THE MARQUEE IS THE PANE'S, not the tile grid's (user 2026-09-23: a drag only started where
       * there were tiles — the grid is as tall as its tiles, the pane is the whole frame). The rows'
@@ -2189,7 +2240,7 @@ export function MediaLibraryBrowse({
       : treeBody(filtered ? new Set(filtered.map((f) => f.key)) : null))
 
   return (
-    <div {...press} className={`flex flex-col gap-6 ${className}`.trim()}>
+    <div ref={pageRef} {...press} className={`flex flex-col gap-6 ${className}`.trim()}>
       <LibraryHeader title={title} buckets={buckets} bucketId={bucketMeta.id} appRoot={atTitleRoot} bucketMeta={bucketMeta} writable={writable} headerActions={headerActions} headerTrailing={headerTrailing} onTrash={trash ? () => setTrashOpen(true) : undefined}
         onHome={goTitleRoot}
         onBucket={(v) => { if (v === 'all') goTitleRoot(); else { setAppRoot(false); switchBucket(v) } }}

package/src/organisms/RecordManager.jsx

@@ -27,7 +27,7 @@ const ToolbarIcon = ({ name, label, onClick, active = false, triggerClassName })
        * icon, and only when pressed". Rest is bare; hover is ink only. */
       /* 20px glyph, half-step pad — "TOO SMALL, TOO MUCH PADDING" (user
        * frames 2026-08-09): the reference icons nearly fill their box. */
-      className={`inline-flex cursor-pointer rounded-sm border-0 p-0.5 transition-colors duration-150 ${active ? 'bg-fg-08 text-emphasis' : 'bg-transparent text-body hover:text-emphasis'}`}
+      className={`inline-flex cursor-pointer rounded-sm border-0 p-0.5 transition-colors duration-150 ${active ? 'bg-fg-08 text-emphasis' : 'bg-transparent text-oq-64 hover:text-emphasis'}`}
     >
       <Icon name={name} size={20} />
     </button>
@@ -255,7 +255,7 @@ export default function RecordManager({
               <button
                 type="button"
                 aria-label={reorderLabel(i + 1)}
-                className="inline-flex w-4 cursor-grab touch-none justify-center border-0 bg-transparent p-0 text-meta hover:text-emphasis"
+                className="inline-flex w-4 cursor-grab touch-none justify-center border-0 bg-transparent p-0 text-oq-48 hover:text-emphasis"
                 onPointerDown={(e) => startDrag(e, i)}
               >
                 <Icon name="drag-handle" size={16} />

package/src/organisms/SettingsPanel.jsx

@@ -171,7 +171,11 @@ export function LabeledControlSection({ label, divided = false, rowGap = 2, chil
  *  rebuilt this same Dropdown in a local `ChoiceRow`, which is the exact
  *  duplication this component exists to prevent. A component that wraps another
  *  has to forward the wrapped one's seams or it becomes a wall. */
-export function SettingsChoice({ options = [], value, onChange, ariaLabel, tone = 'default', size = 'sm', variant = 'primary', className = '' }) {
+/* `variant` UNSET by default (the Hub review, 2026-09-26): a forced `primary` blocked the
+ * tone of a `kol-tone-*` wrapper, so a sunken settings page drew a light well in every row
+ * unless the row said `tone="sunken"` itself. Unset, Dropdown takes the wrapper's tone and
+ * falls back to primary — the same render wherever there is no wrapper. */
+export function SettingsChoice({ options = [], value, onChange, ariaLabel, tone = 'default', size = 'sm', variant, className = '' }) {
   const opts = options.map((o) => (o != null && typeof o === 'object' ? o : { value: o, label: String(o) }))
   return <Dropdown size={size} variant={variant} tone={tone} value={value} onChange={onChange} options={opts} className={`w-full ${className}`.trim()} aria-label={ariaLabel} />
 }

package/src/organisms/SettingsSections.jsx

@@ -35,7 +35,7 @@ import { LabeledControlSection, SettingsRow } from './SettingsPanel.jsx'
  * first included: the rule is `.kol-section--divided + .kol-section--divided`,
  * so the first draws nothing and skipping it just costs the next its line.
  *
- * @param {Array<{label?: string, rows: Array<{label: ReactNode, render?: Function, value?: ReactNode, align?: string, labelWidth?: number|'auto', id?: string}>, rowGap?: number}>} sections - The settings body, in order
+ * @param {Array<{label?: string, rows: Array<{label: ReactNode, render?: Function, value?: ReactNode, hint?: string, align?: string, labelWidth?: number|'auto', id?: string}>, rowGap?: number}>} sections - The settings body, in order (`hint` → SettingsRow's hint)
  * @param {boolean} [divided=false] - Hairline above each section
  * @param {number|'auto'} [labelWidth] - Default label column for every row — `'auto'` makes the label yield and the control hug, which is what a narrow column or a nowrap value needs
  * @param {string} [align] - Default row alignment passed to `SettingsRow`
@@ -50,6 +50,7 @@ export default function SettingsSections({ sections = [], divided = false, label
             <SettingsRow
               key={row.id ?? row.label ?? j}
               label={row.label}
+              hint={row.hint}
               align={row.align ?? align}
               labelWidth={row.labelWidth ?? labelWidth}
             >

package/src/organisms/SpectrumGrid.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import ColorSwatch from '../atoms/ColorSwatch.jsx'
 import { resolveCssVar, resolveCssColor, isLight } from '../hooks/cssVar.js'
+import { Tooltip } from '../utilities/Popover.jsx'
 
 /**
  * SpectrumGrid — matrix view of the whole ramp system: rows = ramps, columns =
@@ -63,10 +64,9 @@ export default function SpectrumGrid({ ramps, stops = DEFAULT_STOPS, brandAnchor
             const textColor = isLight(color) ? '#000' : '#fff'
             const brand = isBrandAnchor(ramp, stop)
             return (
+              <Tooltip key={stop} label={`${ramp}-${stop}  ${hex}${brand ? '  · brand anchor' : ''}`} asChild>
               <div
-                key={stop}
                 className="relative aspect-[5/3] rounded overflow-hidden transition-transform hover:scale-[1.04]"
-                title={`${ramp}-${stop}  ${hex}${brand ? '  · brand anchor' : ''}`}
               >
                 <ColorSwatch hex={`var(--${ramp}-${stop})`} size="stretch" radius="none" frame={false} className="absolute inset-0" />
                 <div className="pointer-events-none absolute inset-0 px-2 py-1.5" style={{ color: textColor }}>
@@ -81,6 +81,7 @@ export default function SpectrumGrid({ ramps, stops = DEFAULT_STOPS, brandAnchor
                   )}
                 </div>
               </div>
+              </Tooltip>
             )
           })}
         </div>

package/src/organisms/TimelineDock.jsx

@@ -1,6 +1,7 @@
 import { useRef, useState } from 'react'
 import Input from '../atoms/Input.jsx'
 import Dropdown from '../molecules/Dropdown.jsx'
+import { Tooltip } from '../utilities/Popover.jsx'
 
 /* The six easings the key editor offers. The CURVES stay the consumer's
  * (its interpolator resolves the name); this is the menu, not the math. */
@@ -123,9 +124,11 @@ function TrackRow({ track, t, selected, setSelected, writeKeys }) {
 
   return (
     <div className="flex items-center gap-3">
-      <span className="kol-helper-10 text-meta truncate shrink-0 text-right" style={{ width: 120 }} title={track.label}>
+      <Tooltip label={track.label} asChild>
+      <span className="kol-helper-10 text-meta truncate shrink-0 text-right" style={{ width: 120 }}>
         {track.label}
       </span>
+      </Tooltip>
       <div
         ref={laneRef}
         className="relative flex-1 h-5 rounded cursor-copy"
@@ -136,13 +139,12 @@ function TrackRow({ track, t, selected, setSelected, writeKeys }) {
         {track.keys.map((k, i) => {
           const kt = drag.current?.index === i ? drag.current.t : k.t
           return (
+            <Tooltip key={i} label={`t=${kt.toFixed(2)} v=${typeof k.v === 'number' ? Math.round(k.v * 100) / 100 : k.v} (alt-click deletes)`} asChild>
             <span
-              key={i}
               data-diamond=""
               onPointerDown={onDiamondPointerDown(i)}
               onPointerMove={onDiamondPointerMove(i)}
               onPointerUp={onDiamondPointerUp(i)}
-              title={`t=${kt.toFixed(2)} v=${typeof k.v === 'number' ? Math.round(k.v * 100) / 100 : k.v} (alt-click deletes)`}
               className="absolute top-1/2 cursor-grab"
               style={{
                 left: `${kt * 100}%`,
@@ -152,6 +154,7 @@ function TrackRow({ track, t, selected, setSelected, writeKeys }) {
                 borderRadius: 1.5,
               }}
             />
+            </Tooltip>
           )
         })}
       </div>
@@ -247,7 +250,7 @@ export default function TimelineDock({ tracks = [], t = 0, onSeek, onChange, eas
   }
 
   return (
-    <div className={`kol-timeline-dock border-t border-fg-08 px-4 py-2 flex flex-col gap-1 select-none ${className}`.trim()} style={{ background: 'var(--kol-surface-primary)' }}>
+    <div className={`kol-timeline-dock border-t border-oq-08 px-4 py-2 flex flex-col gap-1 select-none ${className}`.trim()} style={{ background: 'var(--kol-surface-primary)' }}>
       <ScrubRuler t={t} onSeek={onSeek} />
       {tracks.map((track) => (
         <TrackRow key={track.id} track={track} t={t} selected={selected} setSelected={setSelected} writeKeys={writeKeys} />

package/src/organisms/ToolPalette.jsx

@@ -2,6 +2,7 @@ import { Icon } from '@kolkrabbi/kol-icons'
 import Button from '../atoms/Button.jsx'
 import Divider from '../atoms/Divider.jsx'
 import SplitToolButton from '../molecules/SplitToolButton.jsx'
+import { Tooltip } from '../utilities/Popover.jsx'
 
 /**
  * ToolPalette — the editor's tool bar as one row (kol-fxr `shell/panels/ToolPalette.jsx`,
@@ -45,7 +46,6 @@ const ToolPalette = ({
   <div className={`flex items-center gap-1 min-w-0 overflow-x-auto ${className}`.trim()}>
     {items.map((it, i) => {
       if (it.kind === 'divider') return <Divider key={`d${i}`} variant="vertical" height={20} className="mx-1.5 shrink-0" />
-      const tip = it.shortcut ? `${it.label} (${it.shortcut})` : it.label
       if (it.kind === 'split') {
         const variants = (it.variants ?? []).map((v) => (v.action && !it.action ? { ...v, onSelect: () => onAction?.(v.id) } : v))
         const run = (id) => (it.action ? onAction : onSelect)?.(id)
@@ -58,10 +58,13 @@ const ToolPalette = ({
       }
       const isTool = it.kind === 'tool'
       return (
-        <Button key={it.id} variant="ghost" size={size} quiet iconOnly={it.icon} iconComponent={iconComponent}
+        /* the DS tooltip carries the key as its own chip (the native-title sweep, 2026-09-26) */
+        <Tooltip key={it.id} label={it.label} shortcut={it.shortcut}>
+        <Button variant="ghost" size={size} quiet iconOnly={it.icon} iconComponent={iconComponent}
           pressed={isTool ? activeId === it.id : undefined} disabled={it.disabled}
-          aria-label={it.label} title={tip}
+          aria-label={it.label}
           onClick={(e) => { (isTool ? onSelect : onAction)?.(it.id); blur(e) }} />
+        </Tooltip>
       )
     })}
   </div>