@kolkrabbi/kol-component 0.224.0 → 0.225.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.224.0",
+  "version": "0.225.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/atoms/ColorSwatch.jsx

@@ -40,6 +40,7 @@
  *   title           — passes through.
  */
 import TransparentX from '../utilities/TransparentX'
+import { Tooltip } from '../utilities/Popover.jsx'
 
 const SIZE_CLASSES = {
   fill:    'w-full aspect-square',
@@ -122,11 +123,11 @@ export default function ColorSwatch({
 
   if (interactive) {
     return (
+      <Tooltip label={title} asChild>
       <button
         {...rest}
         type="button"
         onClick={onClick}
-        title={title}
         aria-label={rest['aria-label'] ?? hex ?? 'transparent'}
         aria-pressed={selected}
         className={cls}
@@ -134,12 +135,15 @@ export default function ColorSwatch({
       >
         {inner}
       </button>
+      </Tooltip>
     )
   }
 
   return (
-    <span {...rest} aria-hidden="true" title={title} className={cls} style={style}>
+    <Tooltip label={title} asChild>
+    <span {...rest} aria-hidden="true" className={cls} style={style}>
       {inner}
     </span>
+    </Tooltip>
   )
 }

package/src/atoms/SelectionOverlay.jsx

@@ -1,5 +1,6 @@
 import { useContext } from 'react'
 import { CanvasZoomContext } from '../hooks/canvasZoom.js'
+import { Tooltip } from '../utilities/Popover.jsx'
 
 /* taxonomy-ok: presentational transform-chrome overlay. It nests no KOL
  * component (pure inline-styled squares + label), so by the letter of the
@@ -110,9 +111,9 @@ export default function SelectionOverlay({
         * the box about its centre. Independent of the resize handles: a path
         * hides those (node-edit owns their geometry) and still rotates. */}
       {rotate && (
+        <Tooltip label={rotateTitle} asChild>
         <div
           data-handle="ROT"
-          title={rotateTitle}
           style={{
             position: 'absolute',
             left: `calc(50% - ${size / 2}px)`,
@@ -126,6 +127,7 @@ export default function SelectionOverlay({
             pointerEvents: 'auto',
           }}
         />
+        </Tooltip>
       )}
       {showHandles && HANDLE_DIRS.map(({ dir, cursor, x: hx, y: hy }) => (
         <div

package/src/index.js

@@ -166,7 +166,7 @@ export { default as MediaLibrary, MediaLibraryProvider, useMediaLibrary, MediaPi
 /* the full-screen file viewer — public 2026-09-04 (user ruling): it already
  * rendered both mobile viewer views and was module-private, so every consumer
  * needing a phone viewer hand-rolled one. */
-export { MediaInspector } from './organisms/MediaLibraryPages.jsx'
+export { MediaInspector, mediaSettingsSections, SETTINGS_BASE as MEDIA_SETTINGS_BASE } from './organisms/MediaLibraryPages.jsx'
 export { default as MediaLibraryExplorer } from './organisms/MediaLibraryExplorer.jsx'
 export { default as MediaTileGallery } from './organisms/MediaTileGallery.jsx'
 export { default as MediaViewer } from './organisms/MediaViewer.jsx'

package/src/molecules/ColorInputRow.jsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import ColorSwatch from '../atoms/ColorSwatch'
 import Input from '../atoms/Input'
-import { usePopover, PopoverPanel } from '../utilities/Popover'
+import { usePopover, PopoverPanel, Tooltip } from '../utilities/Popover'
 
 /**
  * ColorInputRow — swatch chip + `#` hex input row. The single merged form of
@@ -150,11 +150,11 @@ export default function ColorInputRow({
       {chip(24)}
     </button>
   ) : isLockToggle ? (
+    <Tooltip label={locked ? 'Unlock' : 'Lock'} asChild>
     <button
       type="button"
       onClick={onToggleLock}
       aria-pressed={locked}
-      title={locked ? 'Unlock' : 'Lock'}
       className="group relative inline-flex h-6 w-6 shrink-0"
     >
       {chip('stretch')}
@@ -167,6 +167,7 @@ export default function ColorInputRow({
         <Icon name={locked ? 'lock' : 'unlock'} size={12} />
       </span>
     </button>
+    </Tooltip>
   ) : (
     chip(24)
   )

package/src/molecules/Dropdown.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { toneClass, TONE_VARS } from '../utilities/tone.js'
 import { Icon } from '@kolkrabbi/kol-icons'
-import { MenuDropdownItem } from './MenuItem.jsx'
+import { MenuDropdownItem, MenuDropdownDivider } from './MenuItem.jsx'
 import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
 import { glyphSize, indicatorSize } from '../hooks/glyphLadders.js'
 
@@ -160,7 +160,11 @@ const Dropdown = ({
     onOptionHover?.(null)
   }, [isOpen]) // eslint-disable-line react-hooks/exhaustive-deps
 
-  const currentOption = options.find((opt) => opt.value === value) || options[0]
+  /* `{ divider: true }` in `options` draws a hairline between groups (FoundationsTones, 2026-09-26 —
+   * user: none on top, the filled tones in order, outline and ghost apart). It is never a choice:
+   * the lookup, the fallback and the trigger's width all read the choices only. */
+  const choices = options.filter((opt) => !opt?.divider)
+  const currentOption = choices.find((opt) => opt.value === value) || choices[0]
 
   /* A clamped list (Popover caps the panel to the viewport) can open with the
    * checked row past the fold — scroll it into reach. Keyboard focus after
@@ -168,7 +172,7 @@ const Dropdown = ({
   const listRef = useRef(null)
   useEffect(() => {
     if (!isOpen) return
-    const idx = options.findIndex((opt) => opt.value === currentOption?.value)
+    const idx = options.findIndex((opt) => !opt?.divider && opt.value === currentOption?.value)
     listRef.current?.children[idx]?.scrollIntoView({ block: 'nearest' })
   }, [isOpen]) // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -215,7 +219,7 @@ const Dropdown = ({
               * trigger and list stay one piece at every selection */}
             <span className="kol-dd-label">
               <span>{currentOption?.label}</span>
-              {options.map((option) => (
+              {choices.map((option) => (
                 <span key={option.value} className="kol-dd-ghost" aria-hidden="true">
                   {option.label}
                 </span>
@@ -247,7 +251,8 @@ const Dropdown = ({
         {(resolvedVariant === 'primary' || resolvedVariant === 'grey') && <div className="kol-dd-div" />}
 
         <div ref={listRef} className="kol-dd-list" role="listbox">
-          {options.map((option) => {
+          {options.map((option, i) => {
+            if (option?.divider) return <MenuDropdownDivider key={`divider-${i}`} />
             const isActive = option.value === currentOption?.value
             return (
               <MenuDropdownItem

package/src/molecules/SectionText.jsx

@@ -115,7 +115,11 @@ export default function SectionText({
       {headline && <Headline className={cls(`kol-section-text-headline ${headlineClass ?? (HEADLINE_ROLE[headlineSize] ?? HEADLINE_ROLE['heading-02'])}${headlineCase === 'upper' ? ' kol-section-text-caps' : ''}`, 'headline')} style={slotStyle.headline}>{headline}</Headline>}
       {bodyNode && (inlineActions
         ? (
-          <div className="flex items-baseline justify-between gap-6">
+          /* SELF-STRETCH (the Hub review, 2026-09-26 — user, on fxr's /settings: "there should
+           * have been space between … on the right edge"). The column is `items-start`, so this
+           * row shrank to its content and `justify-between` had no room to act: the cluster sat
+           * against the subtitle on every PageHeader with actions. */
+          <div className="flex self-stretch items-baseline justify-between gap-6">
             {bodyNode}
             {cluster}
           </div>

package/src/molecules/ShapeDropdown.jsx

@@ -1,7 +1,7 @@
 import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import Button from '../atoms/Button.jsx'
-import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
+import { PopoverPanel, usePopover, Tooltip } from '../utilities/Popover.jsx'
 import { MenuDropdownItem } from './MenuItem.jsx'
 
 /**
@@ -44,15 +44,16 @@ const ShapeDropdown = ({ options = [], value, onChange, onAction, className = ''
   return (
     <div className={`inline-flex items-center ${className}`.trim()}>
       {current?.icon ? (
+        <Tooltip label={current.label}>
         <Button
           variant="ghost"
           size="sm"
           quiet
           iconOnly={current.icon}
           aria-label={current.label}
-          title={current.label}
           onClick={() => onAction?.(current.id)}
         />
+        </Tooltip>
       ) : (
         <Button variant="ghost" size="sm" quiet onClick={() => onAction?.(current?.id)}>
           {current?.label}

package/src/molecules/SplitToolButton.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
-import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
+import { PopoverPanel, usePopover, Tooltip } from '../utilities/Popover.jsx'
 import { glyphSize } from '../hooks/glyphLadders.js'
 
 /**
@@ -121,6 +121,7 @@ const SplitToolButton = ({
 
   return (
     <>
+      <Tooltip label={title} asChild>
       <button
         ref={popover.refs.setReference}
         {...popover.getReferenceProps({ onClick: handleTriggerClick })}
@@ -129,11 +130,11 @@ const SplitToolButton = ({
         disabled={disabled}
         aria-pressed={onTrigger ? undefined : active}
         aria-label={label}
-        title={title}
       >
         {triggerVariant && <IconC name={triggerVariant.icon} size={glyphSize(size, true)} />}
         <FoldIndicator />
       </button>
+      </Tooltip>
       {/* w-max — floats size to content, the menu-family law (2026-08-09). */}
       <PopoverPanel
         popover={popover}

package/src/molecules/SwatchControls.jsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
 import ColorSwatch from '../atoms/ColorSwatch.jsx'
+import { Tooltip } from '../utilities/Popover.jsx'
 
 /*
  * SwatchControls — the Photoshop-style top row of the colour panel, in two
@@ -107,16 +108,17 @@ export function EyedropPick({ sampleColor, onPick, disabled = false }) {
   return (
     <div className="flex items-start gap-1 shrink-0">
       {supported && (
+        <Tooltip label="Pick a color from the canvas" asChild>
         <button
           type="button"
           onClick={onPick}
           disabled={disabled}
           aria-label="Eyedropper"
-          title="Pick a color from the canvas"
           className="inline-flex cursor-pointer text-fg hover:opacity-80 disabled:opacity-40 disabled:cursor-not-allowed"
         >
           <Icon name="eyedrop" size={24} />
         </button>
+        </Tooltip>
       )}
       <ColorSwatch
         hex={sampleColor}

package/src/organisms/Canvas.jsx

@@ -1,5 +1,6 @@
 import { useCallback, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { CanvasZoomContext } from '../hooks/canvasZoom.js'
+import { Tooltip } from '../utilities/Popover.jsx'
 
 /**
  * Canvas — the editor's aspect-ratio stage.
@@ -628,22 +629,24 @@ export function PanZoomViewport({
         {/* Zoom % + fps — matching chips. Zoom (click resets to 100% /
             centered) first, fps to its right, shown while `f` toggles it. */}
         <div className="absolute bottom-3 right-3 z-[3] flex items-center gap-2">
+          <Tooltip label="Reset zoom (⌘0)" asChild>
           <button
             type="button"
             onClick={() => setView({ zoom: 1, x: 0, y: 0 })}
             className="px-2 py-1 rounded border border-fg-08 bg-surface-secondary kol-mono-12 text-emphasis tabular-nums"
             style={{ opacity: atRest && !showFps ? 0.55 : 1 }}
-            title="Reset zoom (⌘0)"
           >
             {Math.round(view.zoom * 100)}%
           </button>
+          </Tooltip>
           {showFps && (
+            <Tooltip label="Framerate — press F to hide" asChild>
             <span
               className="px-2 py-1 rounded border border-fg-08 bg-surface-secondary kol-mono-12 text-emphasis tabular-nums"
-              title="Framerate — press F to hide"
             >
               {fps} fps
             </span>
+            </Tooltip>
           )}
         </div>
       </div>

package/src/organisms/DocumentEditor.jsx

@@ -41,6 +41,9 @@ import { readDraft, writeDraft, clearDraft } from '../utilities/localDrafts.js'
  *                                   searchable list inside the editor inserts the pick at the caret
  * @param {Function} onPickAsset     `() => Promise<{ name, url, contentType } | null>` — a consumer's own picker instead
  * @param {Function} onClose
+ * @param {boolean}  inline          render IN the page, filling its container, instead of over it (the notes
+ *                                   page, media-shell 2026-09-26: the editor is the page's content there,
+ *                                   not a window over a list). No scrim, no Escape-to-close; the X still closes
  */
 const TYPES = [
   { value: 'md', label: 'MD', kind: 'markdown' },
@@ -64,6 +67,7 @@ const DRAFT_PAUSE = 400 // browser memory is free — a short pause, not D1's wr
 export default function DocumentEditor({
   mode = 'edit', name: nameProp = '', kind: kindProp, text, savedAt = 0, draft,
   onSave, onCreate, folder = '', assets, onPickAsset, onClose,
+  inline = false,
 }) {
   const [picking, setPicking] = useState(false)
   const [pickQuery, setPickQuery] = useState('')
@@ -186,9 +190,8 @@ export default function DocumentEditor({
     ? <img src={`data:image/svg+xml;charset=utf-8,${encodeURIComponent(value)}`} alt="" className="max-w-full max-h-full object-contain m-auto" />
     : <KindPreview o={{ key: name || 'document' }} text={value} kind={kind} />
 
-  return (
-    <FullscreenOverlay open onClose={close} closeButton={false} scrim>
-      <QuickLookFrame title={isNew ? `New document${folder ? ` in ${folder}` : ''}` : name} meta={status} onClose={close}
+  const frame = (
+      <QuickLookFrame className={inline ? 'kol-quicklook--inline' : ''} title={isNew ? `New document${folder ? ` in ${folder}` : ''}` : name} meta={status} onClose={close}
         actions={(
           <span className="flex items-center gap-2">
             <ViewToggle variant="text" viewMode={view} onViewChange={setView} options={views} />
@@ -198,7 +201,7 @@ export default function DocumentEditor({
           </span>
         )}>
         {/* the window's own caps, inline — Tailwind does not generate arbitrary values from package source */}
-        <div className="kol-doc-editor flex flex-col" style={{ width: 'min(1200px, var(--kol-ql-max-w))', height: 'min(760px, var(--kol-ql-media-h))' }}>
+        <div className="kol-doc-editor flex flex-col" style={inline ? { width: '100%', height: '100%' } : { width: 'min(1200px, var(--kol-ql-max-w))', height: 'min(760px, var(--kol-ql-media-h))' }}>
           {isNew && (
             <div className="flex flex-wrap items-center gap-3 p-4 border-b" style={{ borderColor: 'var(--kol-oq-08)' }}>
               <Input variant="filled" size="sm" value={name} aria-label="File name" placeholder="File name"
@@ -240,8 +243,8 @@ export default function DocumentEditor({
           </div>
         </div>
       </QuickLookFrame>
-    </FullscreenOverlay>
   )
+  return inline ? frame : <FullscreenOverlay open onClose={close} closeButton={false} scrim>{frame}</FullscreenOverlay>
 }
 
 /* THE FRONTMATTER AS FIELDS. One row per key; a list value (tags) is typed comma-separated. The

package/src/organisms/KeyframeEditor.jsx

@@ -3,6 +3,7 @@ import Button from '../atoms/Button.jsx'
 import Dropdown from '../molecules/Dropdown.jsx'
 import LabeledControl from '../molecules/LabeledControl.jsx'
 import Slider from '../molecules/Slider.jsx'
+import { Tooltip } from '../utilities/Popover.jsx'
 
 const deg = (r) => Math.round(((r || 0) * 180) / Math.PI)
 const rad = (d) => (d * Math.PI) / 180
@@ -117,7 +118,7 @@ export default function KeyframeEditor({
       </div>
       <div className="flex gap-2">
         <Button variant="primary" size="sm" className="flex-1" onClick={onAdd}>Add @ playhead</Button>
-        <Button variant="ghost" size="sm" title="Delete keyframe" onClick={onDelete} disabled={kfs.length <= 1}>Delete</Button>
+        <Tooltip label="Delete keyframe"><Button variant="ghost" size="sm" onClick={onDelete} disabled={kfs.length <= 1}>Delete</Button></Tooltip>
       </div>
 
       <span className="kol-helper-10 text-meta">Pose</span>

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)
@@ -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/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>

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>

package/src/utilities/Popover.jsx

@@ -1,5 +1,5 @@
-import { createContext, useContext, useState } from 'react'
-import { toneClass } from './tone.js'
+import { cloneElement, createContext, isValidElement, useContext, useLayoutEffect, useState, version as reactVersion } from 'react'
+import { toneClass, TONE_VARS } from './tone.js'
 import {
   useFloating,
   autoUpdate,
@@ -136,13 +136,29 @@ export function usePopover({
  * — the innermost wins, as the native `title` it replaced behaved. */
 const TooltipNest = createContext(null)
 
-export function Tooltip({
+/* `asChild` (the native-title sweep, 2026-09-26): the tooltip attaches to its one child element
+ * instead of wrapping it in a span — for a trigger whose box IS the layout (a grid cell, a rail row,
+ * an absolutely placed handle), where an inline-flex wrapper would move it. The child must be an
+ * element that takes a ref: an intrinsic tag always does; a component only if it forwards one
+ * (React 18 needs forwardRef), so Button / IconFrame keep the wrapper. Its own ref and handlers are
+ * kept — the reference props merge over the child's. */
+const childRefOf = (el) => ('ref' in (el.props ?? {}) ? el.props.ref : reactVersion.startsWith('18') ? el.ref : undefined)
+
+export function Tooltip(props) {
+  /* no label → no tooltip: several call sites pass an optional hint, and an empty panel is worse
+   * than none. A separate component so the hooks below never run conditionally. */
+  if (props.label == null || props.label === '') return props.children
+  return <TooltipOn {...props} />
+}
+
+function TooltipOn({
   label,
   shortcut,
   placement = 'bottom',
   offset = 6,
   children,
   triggerClassName = 'inline-flex',
+  asChild = false,
 }) {
   const [open, setOpen] = useState(false)
   const [covered, setCovered] = useState(false)
@@ -158,22 +174,56 @@ export function Tooltip({
     focus: true,
   })
 
+  /* THE TONE OF WHERE IT IS (user, 2026-09-26: "tooltip should probably use same tone as dropdowns
+   * and buttons"). The panel is portalled to body, outside the `kol-tone-*` wrapper that tones the
+   * controls around the trigger — Dropdown's problem, solved the same way: on open, copy the
+   * trigger's RESOLVED `--kol-tone-*` onto the panel. No tone in effect = nothing copied, and the
+   * tooltip keeps its own surface. */
+  const [ambient, setAmbient] = useState(null)
+  const shown = open && !covered
+  useLayoutEffect(() => {
+    const ref = popover.refs.reference.current
+    /* the SURROUNDINGS' tone, not the trigger's own: an `asChild` trigger can be a variant button
+     * (`kol-btn-ghost` carries its own `--kol-tone-*`), so read its parent; the wrapper span has no
+     * variant and inherits the ambient values as it is */
+    const el = asChild ? ref?.parentElement : ref
+    if (!shown || !(el instanceof Element)) return
+    const cs = getComputedStyle(el)
+    const vars = {}
+    for (const v of TONE_VARS) { const val = cs.getPropertyValue(v).trim(); if (val) vars[v] = val }
+    setAmbient(vars)
+  }, [shown]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  const child = asChild && isValidElement(children) ? children : null
+  const childRef = child ? childRefOf(child) : undefined
+  const setRef = (node) => {
+    popover.refs.setReference(node)
+    if (typeof childRef === 'function') childRef(node)
+    else if (childRef) childRef.current = node
+  }
   return (
     <>
-      <span
-        ref={popover.refs.setReference}
-        {...popover.getReferenceProps()}
-        className={triggerClassName}
-      >
-        <TooltipNest.Provider value={setCovered}>{children}</TooltipNest.Provider>
-      </span>
+      {child ? (
+        <TooltipNest.Provider value={setCovered}>
+          {cloneElement(child, { ...popover.getReferenceProps(child.props), ref: setRef })}
+        </TooltipNest.Provider>
+      ) : (
+        <span
+          ref={popover.refs.setReference}
+          {...popover.getReferenceProps()}
+          className={triggerClassName}
+        >
+          <TooltipNest.Provider value={setCovered}>{children}</TooltipNest.Provider>
+        </span>
+      )}
       <PopoverPanel
         popover={popover}
         focus={false}
         panel={false}
         className="kol-tooltip"
+        style={ambient ?? undefined}
       >
-        <span className="text-emphasis">{label}</span>
+        <span>{label}</span>
         {shortcut && <span className="kol-tooltip-key">{shortcut}</span>}
       </PopoverPanel>
     </>

package/src/utilities/QuadrantSync.jsx

@@ -38,6 +38,7 @@
  */
 
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { Tooltip } from './Popover.jsx'
 
 /* ── coordinates ─────────────────────────────────────────────────────────
  * Pure. No DOM writes. The invariant everything rests on: a cell is a
@@ -442,14 +443,15 @@ export default function QuadrantSync ({
                   className="kol-mono-12 text-fg-96 bg-fg-04 border border-fg-16"
                   style={{ width: 52, padding: '5px 6px', textAlign: 'center', borderRadius: 4 }}
                 />
+                <Tooltip label="Set divisions so cells come out square at the current size" asChild>
                 <button
                   type="button" onClick={applySquare}
-                  title="Set divisions so cells come out square at the current size"
                   className="kol-helper-10 text-fg-96 border border-fg-16"
                   style={{ marginLeft: 'auto', padding: '5px 9px', borderRadius: 4, background: 'transparent', cursor: 'pointer' }}
                 >
                   square
                 </button>
+                </Tooltip>
               </div>
               {aspect && (
                 <div className="kol-mono-10 text-fg-48" style={{ marginTop: 6 }}>