@kolkrabbi/kol-component 0.236.0 → 0.238.0

package/src/molecules/MediaPlayer.jsx

@@ -0,0 +1,107 @@
+import usePlayback from '../hooks/usePlayback.js'
+import PlaybackBar, { clock } from './PlaybackBar.jsx'
+import QuickLookFrame from './QuickLookFrame.jsx'
+import FileIcon from '../atoms/FileIcon.jsx'
+import { useCover } from './PlayTile.jsx'
+
+/* taxonomy-ok: molecule — nests PlaybackBar + QuickLookFrame (relative) + FileIcon (atom). */
+
+/**
+ * MediaPlayer — Play a video or an audio file. the media, `PlaybackBar` and the `usePlayback` hook
+ * as ONE player (user ruling 2026-10-02: *"I was referring to the two players in the quicklook in
+ * media"*). It was four components — `VideoSheet` and `AudioSheet` (the Quick Look pair),
+ * `AudioPreview` (its own transport) and `AudioPlayer` (the browser's strip) — and each is an
+ * alias of this one now, on the retirement ledger.
+ *
+ * `variant` is what plays. `frame` is where: given, the player draws inside `QuickLookFrame` (the
+ * Quick Look window — the bar docked in its footer); absent, it plays inline (*"why would media
+ * player not just prop the window, its not called WINDOWmediaplayer"*).
+ *
+ *   video           the picture at its own ratio; click toggles play. Inline, the bar floats over
+ *                   its bottom edge (inset 16, radius 12)
+ *   audio           inline, the bar alone. In the window, Finder's layout: the artwork square (the
+ *                   file's embedded ID3 cover; none → `FileIcon`) beside `Time: mm:ss`
+ *
+ * No native controls, no autoplay (Quick Look opens paused), `playsInline`.
+ *
+ * @param {'video'|'audio'} variant  what plays (default `video`)
+ * @param {string}   src       the media URL
+ * @param {string}   poster    video — the poster URL
+ * @param {string}   ext       audio — the extension, for the no-cover icon
+ * @param {Function} onMeta    ({ w, h, len }) => void once metadata lands (audio reports `len` only)
+ * @param {Object}   frame     the window's header — `QuickLookFrame`'s title · meta · actions · onClose · nav · size
+ * @param {'none'|'metadata'|'auto'} preload  the native preload hint (default `metadata`)
+ * @param {string}   className inline only — the player's box (its width is the caller's)
+ */
+export default function MediaPlayer({ variant = 'video', src, poster, ext, onMeta, frame, preload = 'metadata', className = '' }) {
+  const audio = variant === 'audio'
+  const { ref, handlers, bar } = usePlayback((el) => onMeta?.(audio ? { len: el.duration } : { w: el.videoWidth, h: el.videoHeight, len: el.duration }))
+  const cover = useCover(audio && frame ? src : null)
+  const media = audio
+    ? <audio ref={ref} src={src} preload={preload} {...handlers} />
+    : <video ref={ref} src={src} poster={poster} playsInline preload={preload} className={frame ? 'kol-quicklook-media' : 'block w-full'} onClick={bar.onToggle} {...handlers} />
+
+  if (frame) {
+    return (
+      <QuickLookFrame {...frame} footer={<PlaybackBar {...bar} docked />}>
+        {media}
+        {audio && (
+          <div className="kol-quicklook-audio">
+            <div className="kol-quicklook-art">
+              {cover
+                ? <img src={cover} alt="" className="w-full h-full object-cover" />
+                : <FileIcon ext={ext} glyph="music-note" className="w-[52%]" />}
+            </div>
+            <span className="kol-mono-16 text-meta">Time: <b className="text-strong">{clock(bar.duration)}</b></span>
+          </div>
+        )}
+      </QuickLookFrame>
+    )
+  }
+
+  return (
+    <div className={`relative ${className}`.trim()}>
+      {media}
+      <PlaybackBar {...bar} docked={audio} />
+    </div>
+  )
+}
+
+/**
+ * @deprecated 2026-10-02 — use `<MediaPlayer variant="video" frame={…}>`. Drops when nobody imports it (04-retirements.md).
+ * VideoSheet — the video in the Quick Look window. Same props.
+ */
+export function VideoSheet({ frame, ...props }) {
+  return <MediaPlayer variant="video" frame={frame ?? {}} {...props} />
+}
+
+/**
+ * @deprecated 2026-10-02 — use `<MediaPlayer variant="audio" frame={…}>`; `onDuration(seconds)` is `onMeta({ len })`. Drops when nobody imports it (04-retirements.md).
+ * AudioSheet — audio in the Quick Look window.
+ */
+export function AudioSheet({ frame, onDuration, ...props }) {
+  return <MediaPlayer variant="audio" frame={frame ?? {}} onMeta={onDuration && ((m) => onDuration(m.len))} {...props} />
+}
+
+/**
+ * @deprecated 2026-10-02 — use `<MediaPlayer variant="audio">`; `onDuration(seconds)` is `onMeta({ len })`. Drops when nobody imports it (04-retirements.md).
+ * AudioPreview — the inline audio player. Its own transport is the `PlaybackBar` now.
+ */
+export function AudioPreview({ onDuration, ...props }) {
+  return <MediaPlayer variant="audio" onMeta={onDuration && ((m) => onDuration(m.len))} {...props} />
+}
+
+/**
+ * @deprecated 2026-10-02 — use `<MediaPlayer variant="audio">`. Drops when nobody imports it (04-retirements.md).
+ * AudioPlayer — the native audio strip with a label. The strip is the
+ * `PlaybackBar` now; the label is the caller's to draw.
+ */
+export function AudioPlayer({ src, label, preload, className = '' }) {
+  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>}
+      <MediaPlayer variant="audio" src={src} preload={preload} />
+    </figure>
+  )
+}

package/src/molecules/MenuItem.jsx

@@ -122,7 +122,10 @@ export function MenuItem({
  * stack reserves the widest label in its own face, and a row set in a different
  * one measured 3px wider and clipped the selected row beside its check. */
 const ROW_BY_SIZE = { xs: 'kol-mono-8 px-2 h-5', sm: 'kol-helper-12 px-3 h-8', md: 'kol-helper-12 px-3 h-8', lg: 'kol-helper-12 px-3 h-8' }
-export function MenuDropdownItem({ onClick, onPointerEnter, onPointerLeave, disabled, prefix, iconLeft, shortcut, hover = true, height, size = 'sm', children }) {
+/* `rowClass` — the row's type, side padding and height, whole, in place of the size's own
+ * (Dropdown passes it, 2026-10-02: its rows wear the trigger's face and sit on the trigger's
+ * text edge; a menu's rows keep `ROW_BY_SIZE`). */
+export function MenuDropdownItem({ onClick, onPointerEnter, onPointerLeave, disabled, prefix, iconLeft, shortcut, hover = true, height, size = 'sm', rowClass, children }) {
   return (
     <button
       type="button"
@@ -133,7 +136,7 @@ export function MenuDropdownItem({ onClick, onPointerEnter, onPointerLeave, disa
       disabled={disabled}
       role="menuitem"
       style={height != null ? { height } : undefined}
-      className={`kol-menu-btn w-full ${ROW_BY_SIZE[size] ?? ROW_BY_SIZE.sm} shrink-0 inline-flex items-center gap-2 text-body ${hover ? 'hover:text-emphasis' : ''} disabled:opacity-40 disabled:cursor-not-allowed text-left`}
+      className={`kol-menu-btn w-full ${rowClass ?? ROW_BY_SIZE[size] ?? ROW_BY_SIZE.sm} shrink-0 inline-flex items-center gap-2 text-body ${hover ? 'hover:text-emphasis' : ''} disabled:opacity-40 disabled:cursor-not-allowed text-left`}
     >
       {prefix && <span className="shrink-0 inline-flex items-center">{prefix}</span>}
       {iconLeft && <span className="shrink-0 w-4 inline-flex items-center justify-center">{iconLeft}</span>}

package/src/molecules/Modal.jsx

@@ -120,7 +120,7 @@ function ModalView({ state, closeWith }) {
         )}
         <div className="flex gap-2 justify-end">
           {state.kind !== 'alert' && <Button size="sm" onClick={cancel}>{state.cancelLabel ?? 'Cancel'}</Button>}
-          <Button variant="primary"   size="sm" onClick={submit}>{state.okLabel ?? 'OK'}</Button>
+          <Button tone="primary"   size="sm" onClick={submit}>{state.okLabel ?? 'OK'}</Button>
         </div>
       </div>
     </div>

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>
   )
 }