@kolkrabbi/kol-component 0.236.0 → 0.237.0

package/src/organisms/FeaturedCarousel.jsx

@@ -1,13 +1,13 @@
 import { isValidElement, useCallback, useEffect, useRef, useState } from 'react'
 import useEmblaCarousel from 'embla-carousel-react'
 import Image from '../atoms/Image.jsx'
-import HlsVideo from '../atoms/HlsVideo.jsx'
+import BackgroundVideo from '../utilities/BackgroundVideo.jsx'
 import EmblaNav from '../molecules/EmblaNav.jsx'
 import OverlayGlassPanel from '../utilities/OverlayGlassPanel.jsx'
 
 /**
  * Per-slide media layer: a `{ src, kind }` descriptor becomes a cover-fit
- * Image / HlsVideo / inert <video> pinned over the frame
+ * Image / BackgroundVideo / inert <video> pinned over the frame
  * (`.kol-featured-carousel-media` — absolute inset-0 object-cover, CSS in
  * @kol/theme, out-cascades Image's baked `h-auto`). A ready ReactNode renders
  * as-is and must position itself (give it that same class). `onEnded` /
@@ -36,7 +36,7 @@ function SlideMedia({ media, active = true, onEnded, onTimeUpdate }) {
 
   if (kind === 'video') {
     // Non-HLS file (mp4/webm): a plain inert video. HLS manifests and the
-    // poster-only case go through HlsVideo, which owns hls.js attachment and
+    // poster-only case go through BackgroundVideo, which owns hls.js attachment and
     // the non-interactive hardening set. `loop` is dropped once `onEnded` is
     // wired so the active slide plays once, then advances.
     if (src && !src.endsWith('.m3u8')) {
@@ -57,7 +57,7 @@ function SlideMedia({ media, active = true, onEnded, onTimeUpdate }) {
       )
     }
     return (
-      <HlsVideo
+      <BackgroundVideo
         src={src}
         poster={poster}
         active={active}

package/src/organisms/KeyframeEditor.jsx

@@ -105,7 +105,7 @@ export default function KeyframeEditor({
         {kfs.map((kf, i) => (
           <Button
             key={i}
-            variant={i === sel ? 'primary' : 'secondary'}
+            tone={i === sel ? 'primary' : 'inverted'}
             size="sm"
             className="w-full"
             style={{ justifyContent: 'space-between' }}
@@ -117,8 +117,8 @@ export default function KeyframeEditor({
         ))}
       </div>
       <div className="flex gap-2">
-        <Button variant="primary" size="sm" className="flex-1" onClick={onAdd}>Add @ playhead</Button>
-        <Tooltip label="Delete keyframe"><Button variant="ghost" size="sm" onClick={onDelete} disabled={kfs.length <= 1}>Delete</Button></Tooltip>
+        <Button tone="primary" size="sm" className="flex-1" onClick={onAdd}>Add @ playhead</Button>
+        <Tooltip label="Delete keyframe"><Button tone="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

@@ -425,7 +425,7 @@ export default function LayerStack({
           <Tooltip label={`Group ${layerSelectionCount} selected layers`}>
           <Button
             iconComponent={IconC}
-            variant="primary"
+            tone="primary"
             size="sm"
             iconLeft="layers"
             onClick={() => onGroup(layerSelectedIds)}
@@ -476,7 +476,7 @@ export function AddLayerButton({
         <Tooltip label="Add layer">
         <Button
           iconComponent={IconC}
-          variant="primary"
+          tone="primary"
           size="sm"
           quiet
           iconOnly="plus"

package/src/organisms/MediaLibrary.jsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useEffect, useMemo, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
-import ActionButton from '../atoms/ActionButton.jsx'
+import ActionButton from '../molecules/ActionButton.jsx'
 import Button from '../atoms/Button.jsx'
 import Divider from '../atoms/Divider.jsx'
 import Input from '../atoms/Input.jsx'

package/src/organisms/MediaLibraryPages.jsx

@@ -8,7 +8,7 @@ import Divider from '../atoms/Divider.jsx'
 import Input from '../atoms/Input.jsx'
 import Tag from '../atoms/Tag.jsx'
 import IconFrame from '../atoms/IconFrame.jsx'
-import ActionButton from '../atoms/ActionButton.jsx'
+import ActionButton from '../molecules/ActionButton.jsx'
 import SizeOrDownload from '../atoms/SizeOrDownload.jsx'
 import ToggleCheckbox from '../atoms/ToggleCheckbox.jsx'
 import ViewToggle from '../atoms/ViewToggle.jsx'
@@ -29,10 +29,10 @@ import useMarquee from '../hooks/useMarquee.js'
 import useLongPress from '../hooks/useLongPress.js'
 import useMediaQuery from '../hooks/useMediaQuery.js'
 import KindPreview from '../molecules/KindPreview.jsx'
-import AudioSheet from '../molecules/AudioSheet.jsx'
-import VideoSheet from '../molecules/VideoSheet.jsx'
+import MediaPlayer from '../molecules/MediaPlayer.jsx'
+import Slider from '../molecules/Slider.jsx'
 import QuickLookFrame from '../molecules/QuickLookFrame.jsx'
-import { formatLength } from '../molecules/AudioPreview.jsx'
+import { formatLength } from '../molecules/PlayTile.jsx'
 import FullscreenOverlay from '../utilities/FullscreenOverlay.jsx'
 import { useModal } from '../molecules/Modal.jsx'
 import ContentFilters from './ContentFilters.jsx'
@@ -65,7 +65,7 @@ import { nearestRatio } from '../utilities/ratios.js'
  *                        SortControls · the selection bar while selecting), the
  *                        wall on ContentCard / ContentRow default, paging, the
  *                        per-bucket list cache, the stats line, the inspector
- *                        lightbox (image · VideoSheet · AudioSheet · DocPage via
+ *                        lightbox (image · MediaPlayer · DocPage via
  *                        KindPreview)
  *
  * Both take the injected `client` (`{ listMedia, mediaUrl, proxied?, buckets? }`
@@ -686,9 +686,9 @@ export function MediaInspector({ files, index, onClose, onPrev, onNext, mediaUrl
             onLoad={(e) => setDims({ key: o.key, w: e.target.naturalWidth, h: e.target.naturalHeight })} />
         </QuickLookFrame>
       ) : isVideo(o.contentType) ? (
-        <VideoSheet key={o.key} src={mediaUrl(o.key)} poster={poster ? mediaUrl(poster) : undefined} onMeta={(m) => setDims({ key: o.key, ...m })} frame={frame} />
+        <MediaPlayer key={o.key} variant="video" src={mediaUrl(o.key)} poster={poster ? mediaUrl(poster) : undefined} onMeta={(m) => setDims({ key: o.key, ...m })} frame={frame} />
       ) : kind === 'audio' ? (
-        <AudioSheet key={o.key} src={mediaUrl(o.key)} ext={extOf(o.key)} onDuration={(len) => setDims({ key: o.key, len })} frame={frame} />
+        <MediaPlayer key={o.key} variant="audio" src={mediaUrl(o.key)} ext={extOf(o.key)} onMeta={(m) => setDims({ key: o.key, ...m })} frame={frame} />
       ) : (
         <QuickLookFrame {...frame}>
           <KindPreview o={o} fit="sheet" urlOf={(x) => mediaUrl(x.key)} poster={poster ? mediaUrl(poster) : undefined} />
@@ -849,7 +849,7 @@ function TrashPanel({ trash, onClose, run, confirm }) {
     <SettingsPanel variant="drawer" title="Trash" onClose={onClose}
       footer={items.length > 0 && trash.empty ? (
         <SettingsFooter>
-          <Button variant="primary" size="sm" onClick={async () => {
+          <Button tone="primary" size="sm" onClick={async () => {
             if (confirm && !(await confirm(`Empty the trash? ${items.length} item${items.length === 1 ? '' : 's'} will be gone for good.`, { okLabel: 'Empty trash' }))) return
             run(async () => { await trash.empty(); setSel(new Set()) })
           }}>Empty trash</Button>
@@ -1069,9 +1069,9 @@ export function MediaLibraryBrowse({
    * media-hub, "two too many"). Given, the gear calls it and this page opens no drawer of its own —
    * inside a Hub the Hub's Settings is the one place. Absent, the gear opens the drawer as always. */
   onOpenSettings,
-  /* `searchSuggestions` — what the palette lists before you type. Absent: favourites, smart
+  /* `searchSuggestions` — what the search modal lists before you type. Absent: favourites, smart
    * folders, then the bucket's top-level folders. An array replaces them; a function receives them
-   * and returns the list. Rows are the palette's shape; a row with `run` calls it instead of
+   * and returns the list. Rows are the search modal's shape; a row with `run` calls it instead of
    * jumping to `id` as a file key. */
   searchSuggestions,
   /* `bucketLevel` — keep title → bucket → folders with ONE bucket (kol-client-olina 2026-09-23).
@@ -1604,13 +1604,13 @@ export function MediaLibraryBrowse({
     openQuickLook({ files, index })
   }
 
-  /* SEARCH IS THE DS'S OWN PALETTE (2026-09-22). `/` is the file-manager habit and ⌘K the app one,
+  /* SEARCH IS THE DS'S OWN MODAL (2026-09-22). `/` is the file-manager habit and ⌘K the app one,
    * so both open it; it searches the bucket's keys and JUMPS — it does not filter the list under
    * you, which is what the filter bar is for. */
   const [searchOpen, setSearchOpen] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
   /* the filter bar's own query — lifted so a typed one swaps the tree for a flat list, and so the
-   * palette's ⌘Enter can hand its query over */
+   * search modal's ⌘Enter can hand its query over */
   const [barQuery, setBarQuery] = useState('')
   /* THE ARROWS IN THE GRID AND THE ROWS (user 2026-09-23: *"arrow navigation doesnt work in grid
    * mode? nor in row mode"*). The columns have always had theirs (`ColumnBrowser`); these are the
@@ -2197,12 +2197,12 @@ export function MediaLibraryBrowse({
    * do in grid view"*) — in steps of the control ramp, not pixels, so a row is always a control height */
   const RAMP = ['xs', 'sm', 'md', 'lg']
   const rowSlider = (
-    <input type="range" className="slider-black w-32 cursor-pointer" min={0} max={RAMP.length - 1} step={1} value={Math.max(0, RAMP.indexOf(rowSize))}
-      onChange={(e) => setSettings({ ...settings, rowSize: RAMP[Number(e.target.value)] })} aria-label="Row size" />
+    <Slider readout="none" size={128} min={0} max={RAMP.length - 1} step={1} value={Math.max(0, RAMP.indexOf(rowSize))}
+      onChange={(v) => setSettings({ ...settings, rowSize: RAMP[v] })} aria-label="Row size" />
   )
   const sizeSlider = (
-    <input type="range" className="slider-black w-32 cursor-pointer" min={100} max={360} step={20} value={tileSize}
-      onChange={(e) => setSettings({ ...settings, tileSize: Number(e.target.value) })} aria-label="Tile size" />
+    <Slider readout="none" size={128} min={100} max={360} step={20} value={tileSize}
+      onChange={(v) => setSettings({ ...settings, tileSize: v })} aria-label="Tile size" />
   )
   /* `hits` = a query's results: no folders, no root level, each file named by its whole path —
    * in the tree views as a list, the rows' shape; the wall keeps its tiles */
@@ -2256,7 +2256,7 @@ export function MediaLibraryBrowse({
     </div>
   )
 
-  /* The palette's own ruling (2026-08-01) is that Enter COMMITS the query rather than navigating
+  /* The search modal's own ruling (2026-08-01) is that Enter COMMITS the query rather than navigating
    * to whatever happened to be first — so `onExpand` is where a committed query lands, and here
    * that means the top hit. Arrow-then-Enter and a click go through `onSelect`, same jump. */
   const searchResults = rankMedia(objects, searchQuery, { limit: 50 }).map((o) => ({
@@ -2265,7 +2265,7 @@ export function MediaLibraryBrowse({
     hint: o.key.slice(0, o.key.lastIndexOf('/') + 1) || 'the bucket root',
     group: KIND_LABEL[kindOf(o)] || 'File',
   }))
-  /* THE PALETTE OPENS ON SOMEWHERE TO GO (user 2026-09-30: it opened blank in olina). */
+  /* THE SEARCH MODAL OPENS ON SOMEWHERE TO GO (user 2026-09-30: it opened blank in olina). */
   const openFolder = (path) => { setAppRoot(false); goFolder(path) }
   const leafOf = (path) => path.replace(/\/$/, '').split('/').pop()
   const hintOf = (path) => dirOf(path) || 'the bucket root'
@@ -3034,8 +3034,8 @@ export function MediaLibraryLibrary({
     if (editingKey === o.key) {
       return (
         <div className="flex gap-2">
-          <Button variant="primary" size="sm" onClick={commitRename} disabled={renaming}>{renaming ? 'Saving…' : 'Save'}</Button>
-          <Button variant="ghost" size="sm" onClick={cancelRename} disabled={renaming}>Cancel</Button>
+          <Button tone="primary" size="sm" onClick={commitRename} disabled={renaming}>{renaming ? 'Saving…' : 'Save'}</Button>
+          <Button tone="ghost" size="sm" onClick={cancelRename} disabled={renaming}>Cancel</Button>
         </div>
       )
     }

package/src/organisms/RecordManager.jsx

@@ -355,7 +355,7 @@ export default function RecordManager({
             )}
             {saveState != null && <span className="kol-helper-10 text-meta truncate leading-normal">{saveState}</span>}
             {onPublish && (
-              <Button variant="primary" size="sm" onClick={() => onPublish(record)}>
+              <Button tone="primary" size="sm" onClick={() => onPublish(record)}>
                 {publishLabel}
               </Button>
             )}

package/src/organisms/SectionHero.jsx

@@ -1,7 +1,7 @@
 import { isValidElement } from 'react'
 import { FULL_BLEED, bleedClass } from './sectionBleed.js'
 import { surfaceClass } from '../utilities/sectionSurface.js'
-import HlsVideo from '../atoms/HlsVideo.jsx'
+import BackgroundVideo from '../utilities/BackgroundVideo.jsx'
 import Image from '../atoms/Image.jsx'
 import OverlayGlassPanel from '../utilities/OverlayGlassPanel.jsx'
 import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
@@ -42,7 +42,7 @@ const SPLIT_HEIGHTS = {
 }
 
 /**
- * Background layer: a media descriptor becomes a cover-fit Image / HlsVideo /
+ * Background layer: a media descriptor becomes a cover-fit Image / BackgroundVideo /
  * inert <video> (`.kol-full-bleed-hero-media` pins it absolute + object-cover
  * — CSS in @kol/theme); a ready ReactNode renders as-is and must position
  * itself (give it that same class).
@@ -69,7 +69,7 @@ function MediaLayer({ media }) {
         />
       )
     }
-    return <HlsVideo src={src} poster={poster} className="kol-full-bleed-hero-media" />
+    return <BackgroundVideo src={src} poster={poster} className="kol-full-bleed-hero-media" />
   }
 
   return (

package/src/organisms/SectionNewsletter.jsx

@@ -1,4 +1,5 @@
 import { useId, useState } from 'react'
+import { VARIANT_TONE } from '../utilities/tone.js'
 import { bleedClass } from './sectionBleed.js'
 import { surfaceClass } from '../utilities/sectionSurface.js'
 import Input from '../atoms/Input.jsx'
@@ -185,7 +186,7 @@ export default function SectionNewsletter({
             />
             <Button
               type="submit"
-              variant={submitVariant}
+              {...(VARIANT_TONE[submitVariant] ? { tone: VARIANT_TONE[submitVariant] } : { variant: submitVariant })}
               size={controlSize}
               disabled={status === 'submitting'}
               className="w-full sm:w-auto"

package/src/organisms/ShellSearchOverlay.jsx

@@ -59,7 +59,7 @@ export function HighlightMatch({ label, query, ranges }) {
 }
 
 /**
- * ShellSearchOverlay — The ⌘K search palette. the ⌘K command palette: fullscreen dim + centered
+ * ShellSearchOverlay — The ⌘K search modal. the ⌘K search modal: fullscreen dim + centered
  * panel, a bare SearchInput on top, result rows beneath (HighlightMatch
  * label, dim hint line, right-aligned group label). Distinct from Modal
  * (prompt/confirm only) — this is the search/command primitive.
@@ -78,7 +78,7 @@ export function HighlightMatch({ label, query, ranges }) {
  * @param {Function} onClose       () => void — backdrop click, Escape, post-select
  * @param {Array}    results       pre-filtered rows: { id, label, group?, hint?, icon? }
  * @param {Array}    [suggestions] rows shown while the query is empty (same shape) —
- *                                 the palette opens on somewhere to go, not a blank box
+ *                                 the search modal opens on somewhere to go, not a blank box
  * @param {string}   query         controlled query (drives the highlight slice)
  * @param {Function} onQueryChange (string) => void — input change
  * @param {Function} onSelect      (item) => void — row click / Enter; consumer navigates
@@ -96,8 +96,8 @@ export default function ShellSearchOverlay({
   onClose,
   results: rawResults = [],
   suggestions = [],
-  /* EXPANDED — the palette's second state (user ruling 2026-08-01). Enter
-   * commits the query and opens `children` as the results body; the palette
+  /* EXPANDED — the search modal's second state (user ruling 2026-08-01). Enter
+   * commits the query and opens `children` as the results body; the search modal
    * and the old tag overlay are one surface with two states, not two
    * components. `chips` are the committed tag facets of the same query. */
   expanded = false,
@@ -176,7 +176,7 @@ export default function ShellSearchOverlay({
       if (active >= 0) select(results[active])
       else onExpand?.()
     } else if (e.key === 'Tab') {
-      /* Focus trap — the input is the palette's only tab stop. */
+      /* Focus trap — the input is the search modal's only tab stop. */
       e.preventDefault()
     }
   }
@@ -214,7 +214,7 @@ export default function ShellSearchOverlay({
             ))}
           </div>
         )}
-        {/* A REAL FIELD, inset in the panel (2026-09-30, shadcn's palette as
+        {/* A REAL FIELD, inset in the panel (2026-09-30, shadcn's search modal as
           * the aim) — the flush `bare` strip read as a hole, not a control. */}
         <div className="kol-tone-grey p-2">
         <SearchInput
@@ -243,8 +243,8 @@ export default function ShellSearchOverlay({
           *   group     section heading the row files under — 'Atoms', 'Documentation', 'Tags'
           *   icon      optional leading glyph (kol-icons name)
           *   hint      subtext shown when the LABEL was not what matched
-          *   href      a destination; dismisses the palette
-          *   action    a closure; runs and KEEPS the palette open (tag rows)
+          *   href      a destination; dismisses the search modal
+          *   action    a closure; runs and KEEPS the search modal open (tag rows)
           * Built by `buildShellSearchItems` (showcase/src/nav/shell-nav.js). */}
         {expanded ? (
           <div className="border-t border-fg-08 max-h-[70vh] overflow-y-auto">{children}</div>

package/src/organisms/SpectrumGrid.jsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import ColorSwatch from '../atoms/ColorSwatch.jsx'
+import ColorSwatch from '../molecules/ColorSwatch.jsx'
 import { resolveCssVar, resolveCssColor, isLight } from '../hooks/cssVar.js'
 import { Tooltip } from '../utilities/Popover.jsx'
 

package/src/organisms/ToolPalette.jsx

@@ -60,7 +60,7 @@ const ToolPalette = ({
       return (
         /* 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}
+        <Button tone="ghost" size={size} quiet iconOnly={it.icon} iconComponent={iconComponent}
           pressed={isTool ? activeId === it.id : undefined} disabled={it.disabled}
           aria-label={it.label}
           onClick={(e) => { (isTool ? onSelect : onAction)?.(it.id); blur(e) }} />

package/src/{atoms/HlsVideo.jsx → utilities/BackgroundVideo.jsx}

@@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'
 import Hls from 'hls.js'
 
 /**
- * HlsVideo — background/decorative HLS-streaming video atom. A single native
+ * BackgroundVideo — A background video with no controls. the background/decorative HLS-streaming video. A single native
  * <video>: the effect attaches an .m3u8 stream via hls.js (Safari-native HLS
  * when hls.js isn't supported) and destroys the instance on unmount/src
  * change. Deliberately inert — pointer-events none plus the full hardening
@@ -11,6 +11,10 @@ import Hls from 'hls.js'
  * these without explicit approval. All layout/sizing arrives via `className`
  * (consumer decides `absolute inset-0 object-cover`, etc.).
  *
+ * NAMED FOR WHAT IT IS FOR (user ruling 2026-10-01): it was `HlsVideo`, which says how it streams,
+ * and it sat in atoms. It has no UI — nothing to operate — so it is a utility; `HlsVideo` is the
+ * alias on the retirement ledger.
+ *
  * @param {string}   src       HLS manifest URL (.m3u8); attach effect re-runs on change
  * @param {string}   poster    native poster frame shown before playback
  * @param {string}   className all layout/sizing/positioning (consumer-supplied)
@@ -19,7 +23,7 @@ import Hls from 'hls.js'
  *   off-stage carousel slide pauses instead of autoplaying beside the
  *   active one (FeaturedCarouselFullWidth, 2026-08-26)
  */
-export default function HlsVideo({ src, poster, className, onEnded, active = true, ...props }) {
+export default function BackgroundVideo({ src, poster, className, onEnded, active = true, ...props }) {
   const videoRef = useRef(null)
 
   useEffect(() => {

package/src/utilities/ErrorBoundary.jsx

@@ -60,7 +60,7 @@ export default class ErrorBoundary extends Component {
           )}
 
           <div className="flex gap-4 justify-center flex-wrap">
-            <Button variant="primary" onClick={this.handleReset}>Try again</Button>
+            <Button tone="primary" onClick={this.handleReset}>Try again</Button>
             <Button href={this.props.homeHref ?? '/'}>Go home</Button>
           </div>
         </div>

package/src/utilities/QuadrantSync.jsx

@@ -469,7 +469,10 @@ export default function QuadrantSync ({
               <input
                 id="kq-fade" type="range" min={15} max={100} value={Math.round(fade * 100)}
                 onChange={(e) => setFade(Number(e.target.value) / 100)}
-                style={{ width: '100%', accentColor: handleColor, display: 'block' }}
+                /* Slider's own track, not the browser's range (2026-10-02): a utility cannot import the
+                 * Slider molecule, so the range wears its class and its `--kol-slider-track` seam */
+                className="slider-black w-full block cursor-pointer"
+                style={{ '--kol-slider-track': handleColor }}
               />
             </div>
 

package/src/utilities/armLongPress.js

@@ -0,0 +1,18 @@
+// armLongPress — the touch hold a value control reports (Slider/Knob `variant="panel"`; kol-monitor 2026-09-01,
+// moved here from kol-hardware 2026-10-01 with the controls that arm it).
+
+const HOLD_MS = 500
+const SLOP_PX = 6
+
+/* Arm a long-press on a touch pointerdown. Returns `{ move, cancel }`: feed
+ * pointermoves to `move` (past SLOP it disarms — that is a drag, not a hold),
+ * call `cancel` on pointerup. `fire` runs once when the hold lands. A mouse
+ * never arms — desktop keeps drag + ⌥-click and nothing else. */
+export function armLongPress(e, fire) {
+  if (e.pointerType !== 'touch') return { move: () => {}, cancel: () => {} }
+  const x = e.clientX, y = e.clientY
+  let t = setTimeout(() => { t = null; fire() }, HOLD_MS)
+  const cancel = () => { if (t) { clearTimeout(t); t = null } }
+  const move = (ev) => { if (t && Math.hypot(ev.clientX - x, ev.clientY - y) > SLOP_PX) cancel() }
+  return { move, cancel }
+}

package/src/utilities/mediaSearch.js

@@ -2,7 +2,7 @@
  * mediaSearch — the media library's search, on the KOL engine (`@kolkrabbi/kol-search`).
  *
  * Four places in the media pages each ran their own `key.toLowerCase().includes(q)` — the browse
- * filter, the ⌘K palette, the smart-folder text match, the picker's filter (apps review,
+ * filter, the ⌘K search modal, the smart-folder text match, the picker's filter (apps review,
  * 2026-09-29). One helper now, so the media search speaks the same language as every other KOL
  * search: several words must ALL match, `-word` must not, `"a phrase"`, `tag:x` / `#x`,
  * `kind:image` / `is:video`, `after:2026-09-01`. A plain substring still finds what it found.
@@ -24,7 +24,7 @@ const toItem = (o, nameOf) => ({
   o,
 })
 
-/** ranked hits, best first — the palette's order. `nameOf(o)` overrides the title (a display key). */
+/** ranked hits, best first — the search modal's order. `nameOf(o)` overrides the title (a display key). */
 export function rankMedia(objects, query, { nameOf, limit } = {}) {
   const q = String(query ?? '').trim()
   if (!q) return limit ? objects.slice(0, limit) : objects

package/src/utilities/tone.js

@@ -26,6 +26,12 @@ export const TONES = ['primary', 'secondary', 'inverted', 'outline', 'ghost', 'g
 export const toneClass = (tone) =>
   tone === 'inverse' ? 'kol-tone-sunken' : TONES.includes(tone) ? `kol-tone-${tone}` : ''
 
+/* THE SIX VARIANTS THAT WERE TONES (user ruling 2026-10-01). Button's `variant` named five grounds
+ * and a legacy alias of one; each is a tone under a second name — the theme's variant classes are
+ * aliases of the tone bundles. `variant` keeps `accent · danger · nav`; these six are deprecated
+ * aliases on the retirement ledger. `secondary` is the misleading one: it paints `inverted`. */
+export const VARIANT_TONE = { primary: 'primary', secondary: 'inverted', outline: 'outline', ghost: 'ghost', grey: 'grey', control: 'ghost' }
+
 /* the properties a bundle sets — Dropdown copies them from its trigger onto
  * the PORTALLED panel, which the cascade cannot reach */
 export const TONE_VARS = [

package/src/atoms/AudioPlayer.jsx

@@ -1,51 +0,0 @@
-/**
- * AudioPlayer — A native audio player with a label. the interactive audio atom: one native <audio> with the UA's
- * own control strip, and an optional label line above it.
- *
- * WHY IT EXISTS. Audio was the one media kind the design system had nothing for,
- * so every consumer hand-rolled a bare `<audio controls>` and inherited whatever
- * the browser painted. The MediaLibrary widening (kol-component 0.39.0) made
- * audio objects arrive — 116 sound files in `kol-vault-media` alone — and left
- * minting this as the open taxonomy call; this is that call made: an ATOM,
- * beside HlsVideo.
- *
- * THE CONTRAST WITH HlsVideo, which is the thing to read before touching either.
- * Same tier, same shape — one native media element, all layout via `className`,
- * no composition — and **inverted intent**. HlsVideo is deliberately inert:
- * `pointer-events: none`, `controls={false}`, plus the hardening set (no PiP, no
- * download, no fullscreen, no remote playback, no context menu). It is
- * decorative. This atom exists **to be operated**, so none of that hardening
- * crosses over, and `controls` is not a prop — an audio player without controls
- * is not a variant, it is a different component.
- *
- * The native strip is UA-painted and not themeable past `color-scheme`. Do not
- * reach for pseudo-element hacks; a branded transport would be a separate
- * `AudioTransport` molecule built on this atom.
- *
- * Layout is the call site's: the padding, the centring and the width that lived
- * in the consumer source are all call-site concerns and none of them are baked
- * in here.
- *
- * @param {string} src        audio URL; renders nothing when absent (the guard
- *                            style the other media atoms use)
- * @param {string} [label]    line above the player; the element is omitted entirely
- *                            when absent. Authored casing — no text-transform
- * @param {'none'|'metadata'|'auto'} [preload='metadata']  native preload hint
- * @param {string} [className] all layout/sizing (consumer-supplied)
- */
-export default function AudioPlayer({
-  src,
-  label,
-  preload = 'metadata',
-  className = '',
-  ...props
-}) {
-  if (!src) return null
-
-  return (
-    <figure className={`kol-audio-player flex flex-col gap-3 ${className}`.trim()}>
-      {label && <figcaption className="kol-mono-12 text-fg-48">{label}</figcaption>}
-      <audio src={src} preload={preload} controls className="w-full" {...props} />
-    </figure>
-  )
-}

package/src/molecules/AudioPreview.jsx

@@ -1,140 +0,0 @@
-/* eslint-disable react-hooks/refs -- floating-ui's `refs.setReference` is a callback ref, not a ref read; the DS Tooltip wires it the same way */
-import { useEffect, useRef, useState } from 'react';
-import IconFrame from '../atoms/IconFrame.jsx';
-import Slider from './Slider.jsx';
-import { usePopover, PopoverPanel } from '../utilities/Popover.jsx';
-import { readCover } from '../utilities/id3.js';
-
-/* taxonomy-ok: molecule — nests IconFrame (atom) + Slider / PopoverPanel (relative). */
-
-/**
- * AudioPreview · AudioTile · VideoTile — kol-r2b2's players, promoted verbatim
- * (ColumnBrowserMediaFacts 2026-08-27; the tiles re-ruled the same day,
- * PlayDiscAndVideoBar): players composed from DS parts (IconFrame · Slider ·
- * Popover) — the DS AudioPlayer is a native <audio controls>, whose one-row
- * layout can't be reshaped. Finder model (user ruling 2026-08-27): the COLUMN
- * gets a square tile over full-bleed artwork with ONE control — the Finder
- * play/pause disc (`.kol-play-disc`: round, hidden at rest, shown on hover of
- * `.kol-media-tile`) — `AudioTile` (artwork = the file's embedded ID3 cover,
- * `readCover`) / `VideoTile` (artwork = the poster; the media element is hidden
- * — the tile never shows a decoded video frame). Timeline + volume belong to
- * the OVERLAY / Quick Look — `AudioPreview` (play/pause · Slider seek with an
- * m:ss readout · volume behind `slider-01`, a vertical `slider-black` range in
- * a PopoverPanel, placement top; no title line — the name sits in the facts)
- * and `VideoSheet` (the QuickTime bar).
- *
- * @param {string}   src         the media URL
- * @param {string}   poster      VideoTile — the poster URL
- * @param {Function} onDuration  AudioPreview — (seconds) => void once metadata lands
- * @param {string}   className   AudioPreview — wrapper classes (the width is the consumer's)
- * @param {ReactNode} fallback   AudioTile — shown when the file carries no cover art (2026-09-23:
- *                               it was an empty square, so a WAV read as a missing file)
- */
-export const formatLength = (s) => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`;
-const fmt = formatLength;
-
-function useCover(src) {
-  const [cover, setCover] = useState(null);
-  useEffect(() => {
-    let live = true;
-    readCover(src).then((url) => { if (live) setCover(url); });
-    return () => { live = false; };
-  }, [src]);
-  return cover;
-}
-
-/* One disc for both tiles — the ruled Finder play/pause. The theme's
- * `.kol-play-disc` paints it after the IconFrame variants, so nothing is restated here. */
-function PlayDisc({ playing, onClick }) {
-  return (
-    <IconFrame name={playing ? 'pause' : 'play'} variant="secondary" size="lg" radius="full" onClick={onClick} aria-label={playing ? 'Pause' : 'Play'} className="relative kol-play-disc" />
-  );
-}
-
-export function AudioTile({ src, fallback = null }) {
-  const ref = useRef(null);
-  const [playing, setPlaying] = useState(false);
-  const cover = useCover(src);
-  return (
-    <div className="kol-media-tile relative w-full aspect-square rounded overflow-hidden flex items-center justify-center">
-      <audio ref={ref} src={src} preload="metadata" onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} onEnded={() => setPlaying(false)} />
-      {cover ? <img src={cover} alt="" className="absolute inset-0 w-full h-full object-cover" /> : fallback && <div className="absolute inset-0 flex items-center justify-center">{fallback}</div>}
-      <PlayDisc playing={playing} onClick={() => (playing ? ref.current.pause() : ref.current.play())} />
-    </div>
-  );
-}
-
-export function VideoTile({ src, poster }) {
-  const ref = useRef(null);
-  const [playing, setPlaying] = useState(false);
-  return (
-    <div className="kol-media-tile relative w-full aspect-square rounded overflow-hidden flex items-center justify-center">
-      {/* Same as audio: the media element is hidden, the artwork (the poster) is the tile. */}
-      <video ref={ref} src={src} playsInline preload="metadata" className={poster ? 'hidden' : 'absolute inset-0 w-full h-full object-cover'} onPlay={() => setPlaying(true)} onPause={() => setPlaying(false)} onEnded={() => setPlaying(false)} />
-      {poster && <img src={poster} alt="" className="absolute inset-0 w-full h-full object-cover" />}
-      <PlayDisc playing={playing} onClick={() => (playing ? ref.current.pause() : ref.current.play())} />
-    </div>
-  );
-}
-
-function useAudio(onDuration) {
-  const ref = useRef(null);
-  const [playing, setPlaying] = useState(false);
-  const [time, setTime] = useState(0);
-  const [duration, setDuration] = useState(0);
-  const toggle = () => (playing ? ref.current.pause() : ref.current.play());
-  const element = (src) => (
-    <audio
-      ref={ref}
-      src={src}
-      preload="metadata"
-      onPlay={() => setPlaying(true)}
-      onPause={() => setPlaying(false)}
-      onEnded={() => setPlaying(false)}
-      onTimeUpdate={(e) => setTime(e.target.currentTime)}
-      onLoadedMetadata={(e) => { setDuration(e.target.duration); onDuration?.(e.target.duration); }}
-    />
-  );
-  return { ref, playing, time, duration, toggle, element, setTime };
-}
-
-export default function AudioPreview({ src, className = '', onDuration }) {
-  const { ref, playing, time, duration, toggle, element, setTime } = useAudio(onDuration);
-  const [volume, setVolume] = useState(100);
-  const [open, setOpen] = useState(false);
-  const pop = usePopover({ open, onOpenChange: setOpen, placement: 'top' });
-
-  return (
-    <div className={`flex items-center gap-2 ${className}`}>
-      {element(src)}
-      <IconFrame name={playing ? 'pause' : 'play'} variant="ghost" size="sm" onClick={toggle} />
-      <Slider
-        className="flex-1"
-        min={0}
-        max={duration || 0}
-        step={0.1}
-        value={time}
-        onChange={(v) => { ref.current.currentTime = v; setTime(v); }}
-        formatValue={fmt}
-        displayWidth={5}
-      />
-      <span ref={pop.refs.setReference} {...pop.getReferenceProps()} className="inline-flex">
-        <IconFrame name="slider-01" variant={open ? 'secondary' : 'ghost'} size="sm" onClick={() => {}} />
-      </span>
-      <PopoverPanel popover={pop} className="p-2">
-        {/* DS track class on a native range, turned upright: the one thing the DS Slider can't do. */}
-        <div className="w-6 h-24 flex items-center justify-center">
-          <input
-            type="range"
-            min={0}
-            max={100}
-            value={volume}
-            onChange={(e) => { const v = Number(e.target.value); ref.current.volume = v / 100; setVolume(v); }}
-            className="slider-black cursor-pointer w-24 -rotate-90"
-            aria-label="Volume"
-          />
-        </div>
-      </PopoverPanel>
-    </div>
-  );
-}