@kolkrabbi/kol-component 0.236.0 → 0.237.0

package/src/molecules/MultiSelect.jsx

@@ -0,0 +1,70 @@
+import { useState } from 'react'
+import { Icon } from '@kolkrabbi/kol-icons'
+import { MenuDropdownItem } from './MenuItem.jsx'
+import { PopoverPanel, usePopover } from '../utilities/Popover.jsx'
+import { indicatorSize } from '../hooks/glyphLadders.js'
+
+/**
+ * MultiSelect — Several settings in one dropdown. closed it is the Dropdown's trigger, reading the
+ * current value of every setting; open it is a popover with one column per setting, each under
+ * its name, and it stays open while you pick across columns.
+ *
+ * WHY IT EXISTS (user, 2026-10-01, on the preview card's knob bar — variant, tone and size as
+ * three controls in a row: *"or make a new component with multi select dropdown toggle, like an
+ * 'overlay multi settings' component"*, then on the first mock: *"it should popover … I want this
+ * component available for further development"*). First cut — the shape is open.
+ *
+ * Each setting is pick-one; the component holds several of them. For many-of-N in one list use
+ * `SettingsMulti`; for one setting use `Dropdown`.
+ *
+ * @param {Array}    groups     `[{ id, label, options: [{ value, label }] }]` — one column each
+ * @param {Object}   value      `{ [group.id]: value }` (controlled)
+ * @param {Function} onChange   `(groupId, value) => void`
+ * @param {ReactNode} [label]   the trigger's text; default is every current value, joined
+ * @param {'xs'|'sm'|'md'|'lg'} [size='sm']
+ * @param {string}   [className]
+ */
+const SIZE_TYPE = { xs: 'kol-mono-8', sm: 'kol-mono-12', md: 'kol-mono-14', lg: 'kol-mono-16' }
+
+export default function MultiSelect({ groups = [], value = {}, onChange, label, size = 'sm', defaultOpen = false, className = '' }) {
+  const [open, setOpen] = useState(defaultOpen)
+  const popover = usePopover({ open, onOpenChange: setOpen, placement: 'bottom-start', offset: 4, role: 'dialog' })
+  const labelOf = (g) => g.options.find((o) => o.value === value[g.id])?.label ?? value[g.id]
+  return (
+    <div className={`relative inline-block align-middle ${className}`.trim()}>
+      <button
+        ref={popover.refs.setReference}
+        {...popover.getReferenceProps()}
+        type="button"
+        className={`kol-btn kol-btn-${size} ${SIZE_TYPE[size] ?? SIZE_TYPE.sm} kol-dd-trigger`}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        data-state={open ? 'open' : 'closed'}
+      >
+        <span className="kol-dd-label"><span>{label ?? groups.map(labelOf).filter(Boolean).join(' · ')}</span></span>
+        <Icon name="chevron-down" size={indicatorSize(size)} className="kol-dd-caret" />
+      </button>
+      <PopoverPanel popover={popover} className="w-max p-1">
+        <div className="flex">
+          {groups.map((g) => (
+            <div key={g.id} role="listbox" aria-label={g.label} className="flex min-w-32 flex-col">
+              {/* the columns touch, so the headings' rules read as one line */}
+              <div className="kol-helper-12 mb-1 flex h-8 shrink-0 items-center border-b border-oq-08 px-3 text-meta">{g.label}</div>
+              {g.options.map((o) => (
+                <MenuDropdownItem
+                  key={o.value}
+                  hover={false}
+                  size={size}
+                  onClick={() => onChange?.(g.id, o.value)}
+                  shortcut={o.value === value[g.id] ? <Icon name="check" size={11} /> : null}
+                >
+                  {o.label ?? o.value}
+                </MenuDropdownItem>
+              ))}
+            </div>
+          ))}
+        </div>
+      </PopoverPanel>
+    </div>
+  )
+}

package/src/molecules/OptionRow.jsx

@@ -1,5 +1,5 @@
 /**
- * OptionRow — One row in a list you move through. one row in a list you move through: the palette's results, a browser's rows, a
+ * OptionRow — One row in a list you move through. one row in a list you move through: the search modal's results, a browser's rows, a
  * dropdown's options. Lifted out of ShellSearchOverlay (2026-09-30), where it was hand-rolled next to
  * DropdownTagFilter's, FieldRow's and ColumnBrowser's own — four rows for one job.
  *

package/src/molecules/PlayTile.jsx

@@ -0,0 +1,70 @@
+import { useEffect, useRef, useState } from 'react';
+import IconFrame from '../atoms/IconFrame.jsx';
+import { readCover } from '../utilities/id3.js';
+
+/* taxonomy-ok: molecule — nests IconFrame (atom). */
+
+/**
+ * AudioTile · VideoTile — kol-r2b2's tiles, promoted verbatim (ColumnBrowserMediaFacts
+ * 2026-08-27; re-ruled the same day, PlayDiscAndVideoBar). 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 player, `MediaPlayer`.
+ *
+ * They lived in `AudioPreview.jsx` beside a player of the same name until 2026-10-02, when
+ * that player became `MediaPlayer`; this file is what was left.
+ *
+ * @param {string}    src       the media URL
+ * @param {string}    poster    VideoTile — the poster URL
+ * @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')}`;
+
+/* the file's embedded cover, or null — shared with MediaPlayer's audio window */
+export function useCover(src) {
+  const [cover, setCover] = useState(null);
+  useEffect(() => {
+    if (!src) return undefined;
+    let live = true;
+    readCover(src).then((url) => { if (live) setCover(url); }).catch(() => {});
+    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>
+  );
+}

package/src/molecules/PlaybackBar.jsx

@@ -1,9 +1,10 @@
 /* eslint-disable react-hooks/refs -- floating-ui's `refs.setReference` is a callback ref, as in the DS Tooltip */
 import { useState } from 'react'
 import IconFrame from '../atoms/IconFrame.jsx'
+import Slider from './Slider.jsx'
 import { usePopover, PopoverPanel } from '../utilities/Popover.jsx'
 
-/* taxonomy-ok: molecule — nests IconFrame (atom) + PopoverPanel (relative). */
+/* taxonomy-ok: molecule — nests IconFrame (atom) + Slider / PopoverPanel (relative). */
 
 /* mm:ss — the reference bar shows two-digit minutes (00:12 · 00:25) */
 export const clock = (s) => `${String(Math.floor((s || 0) / 60)).padStart(2, '0')}:${String(Math.floor((s || 0) % 60)).padStart(2, '0')}`
@@ -18,9 +19,9 @@ const RATES = [1, 1.5, 2]
  * gap-7` — white glyphs whatever the theme (`.kol-playback-bar`, kol-theme ≥0.75.0:
  * opacity .8, 1 on hover / focus-visible), the transport cluster (`skip-back-15` ·
  * play / pause · `skip-forward-15`, ghost IconFrames, gap-5), elapsed as `mm:ss`
- * (`kol-mono-16 tabular-nums`), a native range scrubber (2px track at white 40 %,
- * a 4 × 28 white pill knob — `.kol-playback-scrub`), the TOTAL length (not the
- * remaining), volume behind `speaker` (the vertical `slider-black` range in a
+ * (`kol-mono-16 tabular-nums`), the scrubber (`Slider variant="scrub"`: a 2px
+ * track, a 4 × 28 pill knob — white over media), the TOTAL length (not the
+ * remaining), volume behind `speaker` (`Slider direction="vertical"` in a
  * PopoverPanel), and `>>` (`chevrons-right`) cycling the speed 1 → 1.5 → 2.
  *
  * PRESENTATIONAL — the sheet owns the media element (`usePlayback`); this bar
@@ -59,23 +60,13 @@ export default function PlaybackBar({ playing, time, duration, rate = 1, onToggl
         <IconFrame name="skip-forward-15" variant="ghost" size="md" iconSize={22} onClick={() => onSeek(time + 15)} aria-label="Forward 15 seconds" />
       </div>
       <span className="kol-mono-16 tabular-nums opacity-80">{clock(time)}</span>
-      <input type="range" className="kol-playback-scrub flex-1 min-w-0" min={0} max={duration || 0} step={0.1} value={time} onChange={(e) => onSeek(Number(e.target.value))} aria-label="Scrub" />
+      <Slider variant="scrub" readout="none" className="flex-1 min-w-0" min={0} max={duration || 0} step={0.1} value={time} onChange={onSeek} aria-label="Scrub" />
       <span className="kol-mono-16 tabular-nums opacity-80">{clock(duration)}</span>
       <span ref={pop.refs.setReference} {...pop.getReferenceProps()} className="inline-flex">
         <IconFrame name="speaker" variant={open ? 'secondary' : 'ghost'} size="md" onClick={() => {}} aria-label="Volume" />
       </span>
       <PopoverPanel popover={pop} className="p-2">
-        <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); onVolume?.(v / 100); setVolume(v) }}
-            className="slider-black cursor-pointer w-24 -rotate-90"
-            aria-label="Volume"
-          />
-        </div>
+        <Slider direction="vertical" readout="none" min={0} max={100} value={volume} onChange={(v) => { onVolume?.(v / 100); setVolume(v) }} aria-label="Volume" />
       </PopoverPanel>
       {onRate && (
         <span className="flex items-center gap-1">

package/src/molecules/RowMenuButton.jsx

@@ -16,5 +16,5 @@ import useCoarsePointer from '../hooks/useCoarsePointer.js'
 export default function RowMenuButton({ onOpen, variant = 'ghost', className = '' }) {
   const coarse = useCoarsePointer()
   if (!coarse || !onOpen) return null
-  return <Button variant={variant} size="md" iconOnly="more" aria-label="More actions" className={`shrink-0 ${className}`.trim()} onClick={onOpen} />
+  return <Button tone={variant} size="md" iconOnly="more" aria-label="More actions" className={`shrink-0 ${className}`.trim()} onClick={onOpen} />
 }

package/src/molecules/ShapeDropdown.jsx

@@ -46,7 +46,7 @@ const ShapeDropdown = ({ options = [], value, onChange, onAction, className = ''
       {current?.icon ? (
         <Tooltip label={current.label}>
         <Button
-          variant="ghost"
+          tone="ghost"
           size="sm"
           quiet
           iconOnly={current.icon}
@@ -55,7 +55,7 @@ const ShapeDropdown = ({ options = [], value, onChange, onAction, className = ''
         />
         </Tooltip>
       ) : (
-        <Button variant="ghost" size="sm" quiet onClick={() => onAction?.(current?.id)}>
+        <Button tone="ghost" size="sm" quiet onClick={() => onAction?.(current?.id)}>
           {current?.label}
         </Button>
       )}
@@ -67,7 +67,7 @@ const ShapeDropdown = ({ options = [], value, onChange, onAction, className = ''
         {...popover.getReferenceProps()}
         className="inline-flex"
       >
-        <Button variant="ghost" size="sm" quiet iconOnly="chevron-down" iconSize={10} aria-label="Variants" />
+        <Button tone="ghost" size="sm" quiet iconOnly="chevron-down" iconSize={10} aria-label="Variants" />
       </span>
       {/* w-max: a float sizes to its CONTENT (floating-ui contract) — without
         * it the absolutely-positioned panel can stretch against its containing

package/src/molecules/Slider.jsx

@@ -1,9 +1,10 @@
 import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react'
 import Input from '../atoms/Input.jsx'
+import SliderPanel from './SliderPanel.jsx'
 
 /**
  * Slider — range slider with label and a value readout. The LINEAR VARIANT of
- * RotaryDial (atoms/RotaryDial.jsx): both implement the shared value-control
+ * Knob (molecules/Knob.jsx): both implement the shared value-control
  * contract — `value` / `min` / `max` / `step` / `onChange(next: number)` /
  * `label` / `size` / `disabled` / `formatValue` / `defaultValue`.
  * Controlled; onChange always fires with the plain number.
@@ -33,16 +34,20 @@ import Input from '../atoms/Input.jsx'
  * @param {number} props.value - Controlled value within min–max
  * @param {Function} props.onChange - (next: number) => void change handler
  * @param {number} props.step - Slider step increment (default: 1)
- * @param {number} props.size - Track length in px (mirrors RotaryDial's dial px size); unset = fluid flex-1 track
+ * @param {number} props.size - Track length in px (mirrors Knob's dial px size); unset = fluid flex-1 track
  * @param {boolean} props.disabled - Disables track + readout and dims the control (default: false)
- * @param {Function} props.formatValue - Optional formatter for displayed value; RotaryDial's default readout is `${value}%`
+ * @param {Function} props.formatValue - Optional formatter for displayed value; Knob's default readout is `${value}%`
  * @param {string} props.className - Additional wrapper classes
  * @param {number} props.displayWidth - Width of the value readout, in characters (default: 6)
  * @param {string} props.fontSize - Font size for label/value (e.g., '11px')
  * @param {Object} props.style - forwarded to the wrapper; the seam for `--kol-slider-track` / `--kol-slider-playhead`
- * @param {number} props.defaultValue - alt-click the control resets to this (falls back to `min`). Same contract on RotaryDial
- * @param {'input'|'value'|'none'} props.readout - `input` (default) an editable Input · `value` a plain right-aligned span, RotaryDial's own display-only readout · `none`
- * @param {'minimal'|'dual'} props.variant - `dual` = two thumbs on one rail
+ * @param {number} props.defaultValue - alt-click the control resets to this (falls back to `min`). Same contract on Knob
+ * @param {'input'|'value'|'none'} props.readout - `input` (default) an editable Input · `value` a plain right-aligned span, Knob's own display-only readout · `none`
+ * @param {'minimal'|'dual'|'scrub'|'panel'} props.variant - `dual` = two thumbs on one rail · `scrub` = a media scrubber: the thin track with the 4 × 28 pill knob (`.kol-playback-scrub`; `PlaybackBar`'s, 2026-10-02) · `panel` = the rack slider (was kol-hardware `Fader`, merged 2026-10-01): a drawn 2px track for a hardware panel; takes `value · onChange · min · max · step · label` plus `onHold`
+ * @param {'horizontal'|'vertical'} props.direction - `vertical` stands the track upright at `height`, label above and readout below (2026-10-02 — the volume ranges were hand-drawn for want of it). On `panel`, horizontal takes the row and shows a readout
+ * @param {number} props.height - vertical only — the track's length in px (default 96; panel 60)
+ * @param {string} props['aria-label'] - names the range when there is no visible `label`
+ * @param {Function} props.onHold - panel only — touch hold, 500ms: `({ label, value, min, max, step }) => void`; the holder opens its sheet
  * @param {number} props.value2 - dual only — the out value
  * @param {Function} props.onChange2 - dual only — (next: number) => void for the out thumb
  * @param {string} props.label1 - dual only — replaces the formatted in value above the rail
@@ -73,6 +78,10 @@ const Slider = ({
   playhead = null,
   onPlayheadChange,
   style,
+  direction,
+  height,
+  onHold,
+  'aria-label': ariaLabel,
 }) => {
   /* Label ↔ input pairing — the <label> is a sibling of the range input, so
    * without an htmlFor/id pair the visible label confers no accessible name. */
@@ -160,7 +169,7 @@ const Slider = ({
     if (e.key === 'Escape') { setDraft(displayValue); setEditing(false); e.currentTarget.blur() }
   }
 
-  /* alt-click anywhere on the control resets — RotaryDial carries the same
+  /* alt-click anywhere on the control resets — Knob carries the same
    * gesture, so a reset that worked on the knob and not the fader would be the
    * shared value-control contract splitting again. */
   const onAltReset = (e) => {
@@ -169,6 +178,10 @@ const Slider = ({
     onChange(defaultValue ?? min)
   }
 
+  if (variant === 'panel') {
+    return <SliderPanel value={value} onChange={onChange} min={min} max={max} step={step} label={label} direction={direction} height={height} onHold={onHold} />
+  }
+
   if (variant === 'dual') {
     const v1 = value ?? min
     const v2 = value2 ?? max
@@ -236,56 +249,80 @@ const Slider = ({
     )
   }
 
+  const vertical = direction === 'vertical'
+  const scrub = variant === 'scrub'
+  const length = vertical ? height ?? 96 : size
+
+  const labelNode = label && (
+    <label
+      htmlFor={sliderId}
+      className={`kol-helper-12 whitespace-nowrap shrink-0 w-fit ${disabled ? 'opacity-50' : ''}`}
+      style={fontSize ? { fontSize } : undefined}
+    >
+      {label}
+    </label>
+  )
+
+  const range = (
+    <input
+      id={sliderId}
+      type="range"
+      min={min}
+      max={max}
+      step={step}
+      value={value}
+      onChange={handleChange}
+      disabled={disabled}
+      aria-label={ariaLabel}
+      className={`${scrub ? 'kol-playback-scrub' : 'slider-black cursor-pointer disabled:cursor-default'} disabled:opacity-50 ${vertical ? '-rotate-90 flex-none' : length ? 'flex-none' : 'flex-1 w-full min-w-0'}`}
+      /* upright, the drag is vertical — so the page's pan is the horizontal one */
+      style={length ? { width: length, ...(vertical && { touchAction: 'pan-x' }) } : undefined}
+    />
+  )
+
+  const readoutNode = readout === 'input' ? (
+    <Input
+      type="text"
+      inputMode="decimal"
+      variant="filled"
+      size="sm"
+      chars={displayWidth}
+      value={draft}
+      disabled={disabled}
+      onFocus={(e) => { setEditing(true); e.target.select() }}
+      onChange={(e) => setDraft(e.target.value)}
+      onBlur={commit}
+      onKeyDown={onKeyDown}
+      inputClassName="text-center"
+    />
+  ) : readout === 'value' ? (
+    /* `value` is Knob's readout, not a second design — a mixer running
+     * ~23 faders in a 24px row cannot afford an input chip on every one, and
+     * that is why the easy call sites could not move. */
+    <span
+      className={`kol-helper-12 shrink-0 w-fit text-right ${disabled ? 'opacity-50' : ''}`}
+      style={fontSize ? { fontSize } : undefined}
+    >
+      {displayValue}
+    </span>
+  ) : null
+
+  if (vertical) {
+    return (
+      <div className={`inline-flex flex-col items-center gap-2 ${className}`} style={style} onClick={onAltReset}>
+        {labelNode}
+        {/* a native range turned upright: the box is the track's length tall, the input that long */}
+        <div className="w-6 flex items-center justify-center" style={{ height: length }}>{range}</div>
+        {readoutNode}
+      </div>
+    )
+  }
+
   return (
-    <div className={`control-slider gap-3 shadow-none ${className}`} style={style} onClick={onAltReset}>
-      {label && (
-        <label
-          htmlFor={sliderId}
-          className={`kol-helper-12 whitespace-nowrap shrink-0 w-fit ${disabled ? 'opacity-50' : ''}`}
-          style={fontSize ? { fontSize } : undefined}
-        >
-          {label}
-        </label>
-      )}
-      <input
-        id={sliderId}
-        type="range"
-        min={min}
-        max={max}
-        step={step}
-        value={value}
-        onChange={handleChange}
-        disabled={disabled}
-        className={`slider-black cursor-pointer disabled:cursor-default disabled:opacity-50 ${size ? 'flex-none' : 'flex-1 w-full'}`}
-        style={size ? { width: size } : undefined}
-      />
-      {readout === 'input' && (
-        <Input
-          type="text"
-          inputMode="decimal"
-          variant="filled"
-          size="sm"
-          chars={displayWidth}
-          value={draft}
-          disabled={disabled}
-          onFocus={(e) => { setEditing(true); e.target.select() }}
-          onChange={(e) => setDraft(e.target.value)}
-          onBlur={commit}
-          onKeyDown={onKeyDown}
-          inputClassName="text-center"
-        />
-      )}
-      {/* `value` is RotaryDial's readout, not a second design — a mixer running
-       * ~23 faders in a 24px row cannot afford an input chip on every one, and
-       * that is why the easy call sites could not move. */}
-      {readout === 'value' && (
-        <span
-          className={`kol-helper-12 shrink-0 w-fit text-right ${disabled ? 'opacity-50' : ''}`}
-          style={fontSize ? { fontSize } : undefined}
-        >
-          {displayValue}
-        </span>
-      )}
+    <div className={`control-slider gap-3 shadow-none ${scrub ? 'h-7' : ''} ${className}`} style={style} onClick={onAltReset}>
+      {labelNode}
+      {range}
+      {readoutNode}
     </div>
   )
 }

package/src/molecules/SliderPanel.jsx

@@ -0,0 +1,88 @@
+import { useRef, useCallback } from 'react'
+import { armLongPress } from '../utilities/armLongPress.js'
+
+const NO_HOLD = { move() {}, cancel() {} }
+
+/**
+ * SliderPanel — Slider's `variant="panel"`: the rack slider. A 2px track and an 8px thumb for a
+ * 24px hardware panel, drawn rather than a native range, with a vertical direction. It was
+ * kol-hardware's `Fader` (kol-monitor's rack, lifted 2026-09-01) and is carried here class for
+ * class — merged into Slider 2026-10-01 (user ruling: one slider, not two that look alike).
+ * Not exported: reach it through `<Slider variant="panel">`.
+ */
+export default function SliderPanel({ value, onChange, min = 0, max = 100, step = 1, label, direction = 'horizontal', height, onHold }) {
+  const trackRef = useRef(null)
+  const vertical = direction === 'vertical'
+
+  const handlePointerDown = useCallback((e) => {
+    e.preventDefault()
+    const track = trackRef.current
+    if (!track) return
+
+    const update = (e) => {
+      const rect = track.getBoundingClientRect()
+      const ratio = vertical
+        ? Math.max(0, Math.min(1, 1 - (e.clientY - rect.top) / rect.height))
+        : Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+      const raw = min + ratio * (max - min)
+      onChange(Math.round(raw / step) * step)
+    }
+
+    update(e)
+    const id = e.pointerId
+    const onMove = (e) => { if (e.pointerId === id) { hold.move(e); update(e) } }  // a second finger is a pan
+    const onUp = () => {
+      hold.cancel()
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+    }
+    // Touch: hold still 500ms → the holder's sheet instead of the drag
+    const hold = onHold ? armLongPress(e, () => { onUp(); onHold({ label, value, min, max, step }) }) : NO_HOLD
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+  }, [min, max, step, onChange, vertical, onHold, label, value])
+
+  const norm = max > min ? ((value ?? 0) - min) / (max - min) : 0
+
+  if (vertical) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
+        {label && (
+          <span className="kol-helper-8 text-fg-32" style={{ textTransform: 'uppercase', lineHeight: 1 }}>
+            {label}
+          </span>
+        )}
+        <div
+          ref={trackRef}
+          onPointerDown={handlePointerDown}
+          className="bg-fg-16"
+          style={{ width: 2, height: height ?? 60, position: 'relative', cursor: 'ns-resize', touchAction: 'none' }}
+        >
+          <div className="bg-fg-16" style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: `${norm * 100}%` }} />
+          <div className="bg-fg-72" style={{ position: 'absolute', bottom: `calc(${norm * 100}% - 4px)`, left: -3, width: 8, height: 8, borderRadius: '50%' }} />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 8, flex: 1 }}>
+      {label && (
+        <span className="kol-helper-8 text-fg-32" style={{ textTransform: 'uppercase', lineHeight: 1, flexShrink: 0, minWidth: 20 }}>
+          {label}
+        </span>
+      )}
+      <div
+        ref={trackRef}
+        onPointerDown={handlePointerDown}
+        className="bg-fg-16"
+        style={{ flex: 1, height: 2, position: 'relative', cursor: 'pointer', touchAction: 'none' }}
+      >
+        <div className="bg-fg-72" style={{ position: 'absolute', left: `calc(${norm * 100}% - 4px)`, top: -3, width: 8, height: 8, borderRadius: '50%' }} />
+      </div>
+      <span className="kol-helper-8 text-fg-32" style={{ lineHeight: 1, flexShrink: 0, minWidth: 16, textAlign: 'right' }}>
+        {Math.round(value ?? 0)}
+      </span>
+    </div>
+  )
+}

package/src/molecules/SplitToolButton.jsx

@@ -17,7 +17,7 @@ import { glyphSize } from '../hooks/glyphLadders.js'
  * corner fold inside its own box, and `blurOnClick` must blur the button
  * itself. The class output — kol-btn kol-btn-ghost kol-btn-icon kol-btn-{size}
  * + kol-btn-quiet / kol-btn-pressed — is exactly what
- * `<Button variant="ghost" quiet pressed iconOnly>` emits, so the box and the
+ * `<Button tone="ghost" quiet pressed iconOnly>` emits, so the box and the
  * visual contract stay Button's.
  *
  * `size` was a raw px number (28) with a transcribed 14px glyph until 0.182.0:

package/src/molecules/SwatchControls.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Icon } from '@kolkrabbi/kol-icons'
-import ColorSwatch from '../atoms/ColorSwatch.jsx'
+import ColorSwatch from './ColorSwatch.jsx'
 import { Tooltip } from '../utilities/Popover.jsx'
 
 /*

package/src/molecules/TiltBento.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import useInViewAttention from '../hooks/useInViewAttention.js'
 import { motion } from 'framer-motion'
-import HlsVideo from '../atoms/HlsVideo.jsx'
+import BackgroundVideo from '../utilities/BackgroundVideo.jsx'
 import AssetPlaceholder from '../utilities/AssetPlaceholder.jsx'
 import Button from '../atoms/Button.jsx'
 import Image from '../atoms/Image.jsx'
@@ -9,7 +9,7 @@ import useTilt from '../hooks/useTilt.js'
 import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
 
 /* taxonomy-ok: nests the same-file Media helper plus DS atoms/molecules
- * (HlsVideo, AssetPlaceholder, Button, Image) it composes — an organism. */
+ * (BackgroundVideo, AssetPlaceholder, Button, Image) it composes — an organism. */
 
 /**
  * True on coarse-pointer (touch/no-hover) devices. Local to TiltBento, mirrors
@@ -37,7 +37,7 @@ function useCoarsePointer() {
 
 /**
  * Media — internal, NOT exported. Sniffs `src` by extension and renders the
- * right full-bleed media element: `.m3u8` → HlsVideo, `.mov|.mp4|.webm` →
+ * right full-bleed media element: `.m3u8` → BackgroundVideo, `.mov|.mp4|.webm` →
  * autoplay <video>, any other src → the Image molecule (its own broken-asset
  * fallback), and no src → AssetPlaceholder. Positioning/fit arrive via
  * `className`; Image gets an inline height so its base `h-auto` can't beat the
@@ -45,7 +45,7 @@ function useCoarsePointer() {
  */
 function Media({ src, poster, className }) {
   if (!src) return <AssetPlaceholder className={className} />
-  if (/\.m3u8$/i.test(src)) return <HlsVideo src={src} poster={poster} className={className} />
+  if (/\.m3u8$/i.test(src)) return <BackgroundVideo src={src} poster={poster} className={className} />
   if (/\.(mov|mp4|webm)$/i.test(src)) {
     return (
       <video
@@ -198,7 +198,7 @@ export default function TiltBento({
               <div className={revealClass}>
                 <Button
                   href={href}
-                  variant="primary"
+                  tone="primary"
                   size="sm"
                   {...(isExternal
                     ? { target: '_blank', rel: 'noreferrer noopener' }

package/src/organisms/ColumnBrowser.jsx

@@ -4,7 +4,7 @@ import KindPreview, { KIND_GLYPH } from '../molecules/KindPreview.jsx'
 import FileIcon from '../atoms/FileIcon.jsx'
 import RowMenuButton from '../molecules/RowMenuButton.jsx'
 import OptionRow from '../molecules/OptionRow.jsx'
-import { formatLength } from '../molecules/AudioPreview.jsx'
+import { formatLength } from '../molecules/PlayTile.jsx'
 import { kindOf as dsKindOf, KIND_LABEL as DS_KIND_LABEL } from '../utilities/mediaKinds.js'
 import useGrabEdge from '../hooks/useGrabEdge.js'
 import useMediaQuery from '../hooks/useMediaQuery.js'

package/src/organisms/ContentFilters.jsx

@@ -117,7 +117,7 @@ const ContentFilters = ({
   searchKeys = ['label', 'name', 'title', 'type'],
   /* CONTROLLED SEARCH (2026-09-30) — same seam as `filtersOpen`: a consumer that must know the
    * query (media swaps the tree for a flat list while one is typed) or hand one in (⌘Enter from its
-   * palette) owns it. Absent, the text stays private, exactly as before. */
+   * search modal) owns it. Absent, the text stays private, exactly as before. */
   searchValue,
   onSearchChange,
   headerActions,

package/src/organisms/CurveEditor.jsx

@@ -79,7 +79,7 @@ function TermsEditor({ def, commit }) {
     <div className="flex flex-col gap-2">
       <div className="flex items-center justify-between">
         <span className="kol-helper-10 text-meta">Vectors</span>
-        <Button variant="primary" size="sm" onClick={addTerm}>Add</Button>
+        <Button tone="primary" size="sm" onClick={addTerm}>Add</Button>
       </div>
       <div className="grid grid-cols-[1fr_1fr_1fr_auto] gap-1.5 items-center min-w-0 [&>*]:min-w-0">
         <span className="kol-helper-10 text-fg-48 text-center">amp</span>
@@ -103,7 +103,7 @@ function TermRow({ term, onSet, onRemove, canRemove }) {
       {cell('amp', 1)}
       {cell('freq', 1)}
       {cell('phase', 0)}
-      <Button variant="ghost" size="sm" onClick={onRemove} disabled={!canRemove} aria-label="Remove vector">×</Button>
+      <Button tone="ghost" size="sm" onClick={onRemove} disabled={!canRemove} aria-label="Remove vector">×</Button>
     </>
   )
 }