@kolkrabbi/kol-hardware 0.1.0

package/src/switches/RockerSwitch.jsx

@@ -0,0 +1,53 @@
+/**
+ * RockerSwitch — the I/O rocker with a backlit paddle (kol-monitor's
+ * `PowerModule`, the switch alone, lifted 2026-09-01). 28 × 38 housing on the
+ * hardware cap; the paddle sits top when on (LED red, glowing) and bottom when
+ * off; static I / O legends on the housing show whichever half is uncovered.
+ *
+ * @param {boolean}  on
+ * @param {Function} onToggle
+ */
+export default function RockerSwitch({ on, onToggle }) {
+  return (
+    <div
+      onClick={onToggle}
+      style={{
+        width: 28,
+        height: 38,
+        borderRadius: 3,
+        backgroundColor: 'var(--kol-ctl-hw-cap)',
+        border: '2px solid var(--kol-ctl-hw-cap-edge)',
+        cursor: 'pointer',
+        position: 'relative',
+        overflow: 'hidden',
+        boxShadow: 'inset 0 0 4px rgba(0,0,0,0.6)',
+      }}
+    >
+      {/* Rocker paddle */}
+      <div style={{
+        position: 'absolute',
+        left: 2,
+        right: 2,
+        height: '50%',
+        top: on ? 0 : '50%',
+        borderRadius: 2,
+        backgroundColor: on ? 'var(--kol-ctl-led-red)' : 'var(--kol-ctl-hw-cap-edge)',
+        boxShadow: on
+          ? '0 0 8px color-mix(in srgb, var(--kol-ctl-led-red) 50%, transparent), inset 0 1px 0 var(--kol-ctl-hw-cap-edge)'
+          : 'inset 0 1px 0 var(--kol-ctl-hw-cap-edge)',
+        transition: 'top 0.1s, background-color 0.15s, box-shadow 0.15s',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}>
+        <span className="kol-helper-8" style={{ color: on ? 'var(--kol-color-ab-white)' : 'var(--kol-ctl-hw-on-cap)', lineHeight: 1 }}>
+          {on ? 'I' : 'O'}
+        </span>
+      </div>
+
+      {/* Static labels on housing */}
+      <span className="kol-helper-xxxxs" style={{ position: 'absolute', top: 3, left: 0, right: 0, textAlign: 'center', color: on ? 'transparent' : 'var(--kol-ctl-hw-cap-edge)', pointerEvents: 'none' }}>I</span>
+      <span className="kol-helper-xxxxs" style={{ position: 'absolute', bottom: 3, left: 0, right: 0, textAlign: 'center', color: on ? 'var(--kol-ctl-hw-cap-edge)' : 'transparent', pointerEvents: 'none' }}>O</span>
+    </div>
+  )
+}

package/src/switches/Toggle.jsx

@@ -0,0 +1,95 @@
+import { useState, useRef, useEffect } from 'react'
+
+const SIZES = { sm: 8, md: 12 }
+const LONG_PRESS_MS = 500
+const BLINK_MS_DEFAULT = 500
+
+/**
+ * Toggle — the LED-dot on/off button with a label (kol-monitor's rack, lifted
+ * 2026-09-01). `momentary` fires `onChange(true)` and the dot flashes 120ms;
+ * `onLongPress` (hold ≥500ms) fires instead of `onChange`; `blink` pulses the
+ * dot as an indicator; `forceLit` holds it on.
+ *
+ * @param {boolean}  value · onChange `(next) => void`
+ * @param {string}   label
+ * @param {boolean}  horizontal   label beside the dot instead of below
+ * @param {'sm'|'md'} size        8 · 12 (default md)
+ * @param {number}   padding      hit padding (default 4)
+ * @param {boolean}  momentary
+ * @param {string}   color        CSS colour (default `var(--kol-ctl-led-red)`)
+ * @param {Function} onLongPress
+ * @param {boolean}  blink · {number} blinkPeriodMs (500)
+ * @param {boolean}  forceLit
+ */
+export default function Toggle({ value, onChange, label, horizontal = false, size = 'md', padding = 4, momentary = false, color = 'var(--kol-ctl-led-red)', onLongPress, blink = false, blinkPeriodMs = BLINK_MS_DEFAULT, forceLit = false }) {
+  const [lit, setLit] = useState(false)
+  const [blinkOn, setBlinkOn] = useState(true)
+  const timerRef = useRef(null)
+  const longPressTimerRef = useRef(null)
+  const longPressFiredRef = useRef(false)
+  const s = SIZES[size]
+  const isOn = momentary ? lit : value
+
+  useEffect(() => {
+    if (!blink) return
+    const halfPeriod = Math.max(20, blinkPeriodMs / 2)
+    const id = setInterval(() => setBlinkOn(b => !b), halfPeriod)
+    return () => clearInterval(id)
+  }, [blink, blinkPeriodMs])
+
+  const fireClick = () => {
+    if (momentary) {
+      onChange(true)
+      setLit(true)
+      clearTimeout(timerRef.current)
+      timerRef.current = setTimeout(() => setLit(false), 120)
+    } else {
+      onChange(!value)
+    }
+  }
+
+  const handlePointerDown = () => {
+    if (!onLongPress) return
+    longPressFiredRef.current = false
+    longPressTimerRef.current = setTimeout(() => {
+      longPressFiredRef.current = true
+      onLongPress()
+    }, LONG_PRESS_MS)
+  }
+
+  const handlePointerUp = () => {
+    if (!onLongPress) return
+    clearTimeout(longPressTimerRef.current)
+  }
+
+  const handleClick = () => {
+    if (onLongPress && longPressFiredRef.current) return
+    fireClick()
+  }
+
+  return (
+    <div
+      onPointerDown={handlePointerDown}
+      onPointerUp={handlePointerUp}
+      onPointerLeave={handlePointerUp}
+      onClick={handleClick}
+      className={`inline-flex ${horizontal ? 'flex-row' : 'flex-col'} items-center gap-1 select-none`}
+      style={{ cursor: 'pointer', touchAction: 'none', padding }}
+    >
+      <div style={{
+        width: s,
+        height: s,
+        borderRadius: '50%',
+        backgroundColor: color,
+        opacity: blink ? (blinkOn ? 1 : 0.3) : (isOn || forceLit ? 1 : 0.3),
+        border: 'none',
+        transition: 'opacity 0.1s, background-color 0.15s',
+      }} />
+      {label && (
+        <span className="kol-helper-8 text-fg-32" style={{ textTransform: 'uppercase', lineHeight: 1 }}>
+          {label}
+        </span>
+      )}
+    </div>
+  )
+}

package/src/value/EnvelopeGenerator.jsx

@@ -0,0 +1,122 @@
+import { useMemo, useState } from 'react'
+import { Button, Input, SegmentedToggle } from '@kolkrabbi/kol-component'
+import Knob from './Knob.jsx'
+import Toggle from '../switches/Toggle.jsx'
+import SignalScope from '../indicators/SignalScope.jsx'
+import SignalReference from '../panel/SignalReference.jsx'
+import { compileExpression, fitRange } from '../signal/expression.js'
+import { envelopeAt, envelopeLength, ADSR_DEFAULTS } from '../signal/adsr.js'
+import { EXPRESSION_SECTIONS, EXPRESSION_TABS, ADSR_SECTIONS, ADSR_TABS, ADSR_PRESETS } from '../signal/reference.js'
+
+/**
+ * EnvelopeGenerator — a value over time, typed as an equation or shaped as an ADSR envelope
+ * (signal engine, 2026-09-27). One tool for what kol-mirror's /expressions page, kol-monitor's
+ * Scope+ and Env modules and the design editor's Oscilloscope each built alone: the scope in the
+ * middle, the window controls under it, the reference beside it — mirror's layout.
+ *
+ * Uncontrolled: `default*` seeds it, `onChange` reports every change as
+ * `{ mode, expr, adsr, min, max, sec, ofs }` — hand it to a store, a module, a layer.
+ *
+ * @param {'equation'|'adsr'} defaultMode
+ * @param {string}  defaultExpr
+ * @param {object}  defaultAdsr        knob values 0…100 (`ADSR_DEFAULTS`)
+ * @param {Array}   saved · savedAdsr  the host's own rows for each mode's Saved tab
+ * @param {boolean} reference          show the reference panel (default true)
+ */
+const MODES = [{ value: 'equation', label: 'Equation' }, { value: 'adsr', label: 'ADSR' }]
+const num = (s, fallback) => { const n = parseFloat(s); return Number.isFinite(n) ? n : fallback }
+
+function Field({ label, value, onCommit }) {
+  return (
+    <label className="flex items-center gap-2">
+      <span className="kol-helper-10 uppercase text-fg-48">{label}</span>
+      <Input size="xs" chars={4} value={String(value)} onCommit={onCommit} />
+    </label>
+  )
+}
+
+export default function EnvelopeGenerator({
+  defaultMode = 'equation', defaultExpr = 'wave(t)', defaultAdsr = ADSR_DEFAULTS,
+  saved, savedAdsr, reference = true, onChange, className = '',
+}) {
+  const [mode, setMode] = useState(defaultMode)
+  const [expr, setExpr] = useState(defaultExpr)
+  const [adsr, setAdsr] = useState({ ...ADSR_DEFAULTS, ...defaultAdsr })
+  const [cycle, setCycle] = useState(true)
+  const [view, setView] = useState({ min: 0, max: 100, sec: 5, ofs: 0 })
+
+  const compiled = useMemo(() => compileExpression(expr), [expr])
+  const adsrSec = envelopeLength(adsr)
+  const sample = mode === 'equation'
+    ? (t) => compiled.fn(t, Math.round(t * 60), 0, 100)
+    : (t) => envelopeAt(t, adsr, { cycle })
+  const sec = mode === 'equation' ? view.sec : adsrSec
+  const ofs = mode === 'equation' ? view.ofs : 0
+
+  const emit = (patch) => onChange?.({ mode, expr, adsr, ...view, ...patch })
+  const change = {
+    mode: (m) => { setMode(m); emit({ mode: m }) },
+    expr: (e) => { setExpr(e); emit({ expr: e }) },
+    adsr: (p) => { const next = { ...adsr, ...p }; setAdsr(next); emit({ adsr: next }) },
+    view: (p) => { const next = { ...view, ...p }; setView(next); emit(next) },
+  }
+  const fit = () => { const r = fitRange(expr, { sec: view.sec, ofs: view.ofs }); if (r) change.view(r) }
+  const reset = () => change.view({ min: 0, max: 100, sec: 5, ofs: 0 })
+  const pick = (code) => {
+    if (mode === 'equation') { change.expr(code); return }
+    const preset = ADSR_PRESETS.find((p) => p.id === code)
+    if (preset) change.adsr(preset.params)
+  }
+
+  return (
+    <div className={`flex flex-col gap-4 ${className}`}>
+      <SegmentedToggle value={mode} onChange={change.mode} options={MODES} size="sm" />
+      <div className={`grid gap-6 ${reference ? 'lg:grid-cols-[minmax(0,1fr)_320px]' : ''}`}>
+        <div className="flex min-w-0 flex-col gap-3">
+          {mode === 'equation' && (
+            <Input
+              value={expr}
+              onCommit={(v) => change.expr(v || 'wave(t)')}
+              aria-label="Expression"
+              className={compiled.ok ? '' : 'text-[var(--kol-ctl-led-red)]'}
+            />
+          )}
+          <SignalScope sample={sample} min={mode === 'equation' ? view.min : 0} max={mode === 'equation' ? view.max : 100} sec={sec} ofs={ofs} />
+          {mode === 'equation' ? (
+            <>
+              <div className="flex items-center justify-between">
+                <Button variant="ghost" size="sm" iconLeft="maximize" onClick={fit}>Fit</Button>
+                <Button variant="ghost" size="sm" iconLeft="refresh" onClick={reset}>Reset</Button>
+              </div>
+              <div className="flex flex-wrap items-center justify-between gap-3">
+                <Field label="Min" value={view.min} onCommit={(v) => change.view({ min: num(v, view.min) })} />
+                <Field label="Max" value={view.max} onCommit={(v) => change.view({ max: num(v, view.max) })} />
+                <Field label="Sec" value={view.sec} onCommit={(v) => change.view({ sec: Math.max(0.1, num(v, view.sec)) })} />
+                <Field label="Ofs" value={view.ofs} onCommit={(v) => change.view({ ofs: num(v, view.ofs) })} />
+              </div>
+            </>
+          ) : (
+            <div className="flex flex-wrap items-end justify-center gap-6 py-2">
+              {[['attack', 'A'], ['decay', 'D'], ['sustain', 'S'], ['release', 'R']].map(([key, label]) => (
+                <Knob key={key} value={adsr[key]} onChange={(v) => change.adsr({ [key]: v })} label={label} size="lg" defaultValue={ADSR_DEFAULTS[key]} />
+              ))}
+              <Toggle value={cycle} onChange={setCycle} label="cycle" />
+              <span className="kol-helper-10 text-fg-48">{adsrSec.toFixed(2)} s</span>
+            </div>
+          )}
+        </div>
+        {reference && (
+          <SignalReference
+            className="rounded-[4px] border border-oq-08 p-4"
+            sections={mode === 'equation' ? EXPRESSION_SECTIONS : ADSR_SECTIONS}
+            tabs={mode === 'equation' ? EXPRESSION_TABS : ADSR_TABS}
+            saved={mode === 'equation' ? saved : savedAdsr}
+            onPick={pick}
+            onAppend={mode === 'equation' ? (code) => change.expr(`${expr}+${code}`) : undefined}
+            key={mode}
+          />
+        )}
+      </div>
+    </div>
+  )
+}

package/src/value/Fader.jsx

@@ -0,0 +1,99 @@
+import { useRef, useCallback, useState } from 'react'
+import ParamSheet from './ParamSheet.jsx'
+import { armLongPress } from './armLongPress.js'
+
+/**
+ * Fader — the rack slider (kol-monitor's panel `Slider`, lifted 2026-09-01;
+ * named `Fader` because `Slider` is kol-component's app control and the two are
+ * different tiers on purpose — a 2px track on a 24px eurorack panel is not app
+ * chrome). Same conventions as Knob: `kol-helper-8` label, inline styles, pointer
+ * drag; on touch a 500ms hold opens `ParamSheet`.
+ *
+ * @param {number}   value · onChange `(value) => void`
+ * @param {number}   min (0) · max (100) · step (1)
+ * @param {string}   label
+ * @param {'horizontal'|'vertical'} direction  horizontal = flex-1 track + numeric readout; vertical = fixed `height`
+ * @param {number}   height    vertical only (default 60)
+ */
+export default function Fader({ value, onChange, min = 0, max = 100, step = 1, label, direction = 'horizontal', height }) {
+  const trackRef = useRef(null)
+  const vertical = direction === 'vertical'
+  const [sheet, setSheet] = useState(false)
+
+  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 big sheet instead of the drag
+    const hold = armLongPress(e, () => { onUp(); setSheet(true) })
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+  }, [min, max, step, onChange, vertical])
+
+  const norm = max > min ? ((value ?? 0) - min) / (max - min) : 0
+  const sheetEl = sheet && (
+    <ParamSheet label={label} value={value} min={min} max={max} step={step} onChange={onChange} onClose={() => setSheet(false)} />
+  )
+
+  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>
+        {sheetEl}
+      </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>
+      {sheetEl}
+    </div>
+  )
+}

package/src/value/Knob.jsx

@@ -0,0 +1,130 @@
+import { useCallback, useState } from 'react'
+import ParamSheet from './ParamSheet.jsx'
+import { armLongPress } from './armLongPress.js'
+
+const SIZES = { sm: 24, md: 32, lg: 40, xl: 64 }
+
+/**
+ * Knob — SVG rotary knob with drag-to-change (kol-monitor's rack, lifted
+ * 2026-09-01). 270° sweep; drag ns, 200px of travel = the range; ⌥-click resets
+ * to `defaultValue`; on touch a 500ms hold opens `ParamSheet` instead of the drag.
+ *
+ * @param {number}   value · onChange `(value) => void`
+ * @param {number}   min · max        default 0–100, or −100–100 when `bipolar`
+ * @param {string}   label            `kol-helper-8`, uppercase
+ * @param {'column'|'row'|'row-left'|'row-right'} variant  label placement (default column)
+ * @param {boolean}  bipolar          −/+ legend and a centred default
+ * @param {number}   labelMinWidth    row-right only
+ * @param {'sm'|'md'|'lg'|'xl'} size  24 · 32 · 40 · 64 (default sm)
+ * @param {number}   defaultValue     ⌥-click / sheet reset target (default 50, or 0 bipolar)
+ */
+export default function Knob({ value, onChange, min, max, label, variant = 'column', bipolar = false, labelMinWidth, size: sizeProp = 'sm', defaultValue }) {
+  const size = SIZES[sizeProp] || SIZES.sm
+  const effMin = min ?? (bipolar ? -100 : 0)
+  const effMax = max ?? 100
+  const effDefault = defaultValue ?? (bipolar ? 0 : 50)
+  const angle = ((value - effMin) / (effMax - effMin)) * 270 - 135
+  const r = size / 2
+  const ir = r * 0.56
+  const [sheet, setSheet] = useState(false)
+
+  const handlePointerDown = useCallback((e) => {
+    e.preventDefault()
+    // Alt/Option + click resets to default instead of starting a drag
+    if (e.altKey) {
+      onChange(effDefault)
+      return
+    }
+    const startY = e.clientY
+    const startVal = value
+    const range = effMax - effMin
+
+    const id = e.pointerId
+    const handleMove = (e) => {
+      if (e.pointerId !== id) return  // a second finger is a pan, not this knob
+      hold.move(e)
+      const delta = (startY - e.clientY) * (range / 200)
+      const next = Math.round(Math.max(effMin, Math.min(effMax, startVal + delta)))
+      onChange(next)
+    }
+    const handleUp = () => {
+      hold.cancel()
+      window.removeEventListener('pointermove', handleMove)
+      window.removeEventListener('pointerup', handleUp)
+    }
+    // Touch: hold still 500ms → the big sheet instead of the drag
+    const hold = armLongPress(e, () => { handleUp(); setSheet(true) })
+    window.addEventListener('pointermove', handleMove)
+    window.addEventListener('pointerup', handleUp)
+  }, [value, effMin, effMax, effDefault, onChange])
+
+  const sheetEl = sheet && (
+    <ParamSheet label={label} value={value} min={effMin} max={effMax} defaultValue={effDefault} onChange={onChange} onClose={() => setSheet(false)} />
+  )
+
+  const knobSvg = (
+    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
+      <circle cx={r} cy={r} r={r * 0.75} style={{ fill: 'var(--kol-ctl-hw-cap)', stroke: 'var(--kol-fg-24)' }} strokeWidth="1" />
+      <line
+        x1={r} y1={r}
+        x2={r + ir * Math.cos((angle - 90) * Math.PI / 180)}
+        y2={r + ir * Math.sin((angle - 90) * Math.PI / 180)}
+        style={{ stroke: 'var(--kol-ctl-hw-on-cap)' }} strokeWidth="1.5" strokeLinecap="round"
+      />
+    </svg>
+  )
+
+  if (variant === 'row-left' || variant === 'row') {
+    return (
+      <div
+        onPointerDown={handlePointerDown}
+        style={{ cursor: 'ns-resize', touchAction: 'none', display: 'flex', alignItems: 'center', gap: 4 }}
+      >
+        {label && (
+          <span className="kol-helper-8 text-fg-32" style={{ textTransform: 'uppercase', lineHeight: 1 }}>
+            {label}
+          </span>
+        )}
+        {knobSvg}
+        {sheetEl}
+      </div>
+    )
+  }
+
+  if (variant === 'row-right') {
+    return (
+      <div
+        onPointerDown={handlePointerDown}
+        style={{ cursor: 'ns-resize', touchAction: 'none', display: 'flex', alignItems: 'center', gap: 4 }}
+      >
+        {knobSvg}
+        {label && (
+          <span className="kol-helper-8 text-fg-32" style={{ textTransform: 'uppercase', lineHeight: 1, minWidth: labelMinWidth }}>
+            {label}
+          </span>
+        )}
+        {sheetEl}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      onPointerDown={handlePointerDown}
+      style={{ cursor: 'ns-resize', touchAction: 'none', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}
+    >
+      {bipolar && (
+        <span className="kol-helper-8 text-fg-32" style={{ lineHeight: 1 }}>
+          -/+
+        </span>
+      )}
+      {knobSvg}
+      {label && (
+        <span className="kol-helper-8 text-fg-32" style={{ textTransform: 'uppercase', lineHeight: 1 }}>
+          {label}
+        </span>
+      )}
+      {sheetEl}
+    </div>
+  )
+}

package/src/value/ParamSheet.jsx

@@ -0,0 +1,41 @@
+import { createPortal } from 'react-dom'
+import { useEffect } from 'react'
+import { Slider } from '@kolkrabbi/kol-component'
+
+/**
+ * ParamSheet — a knob or fader, big, at the bottom of the screen. Opened by a
+ * long-press on the control (touch only): a rack knob is 24px and a finger is
+ * not, so precision on a phone comes from a full-width track, not from zoom
+ * (user, 2026-09-01: "if sometimes things are hard to reach"). Long-press, not
+ * double-tap — Safari owns double-tap, and ⌥-click is already reset.
+ *
+ * The DS Slider is the track and the readout; this file only owns the plate
+ * and the scrim. The long-press arming is `armLongPress`.
+ *
+ * @param {string}   label
+ * @param {number}   value · min · max · step (default 1) · defaultValue
+ * @param {Function} onChange  `(value) => void`
+ * @param {Function} onClose   Esc and tap-outside call it
+ */
+export default function ParamSheet({ label, value, min, max, step = 1, defaultValue, onChange, onClose }) {
+  useEffect(() => {
+    const key = (e) => { if (e.key === 'Escape') onClose() }
+    window.addEventListener('keydown', key)
+    return () => window.removeEventListener('keydown', key)
+  }, [onClose])
+
+  return createPortal(
+    /* NO SCRIM, deliberately (overlay-scrim-outliers sweep, 2026-09-03): lifted
+       verbatim from monitor's rack, where the tap-away backdrop is untinted so
+       the rack stays readable while a value is dragged on the sheet. */
+    <div className="fixed inset-0" style={{ zIndex: 'var(--kol-z-modal)' }} onClick={onClose}>
+      <div
+        className="absolute inset-x-0 bottom-0 bg-surface-primary border-t border-fg-08 p-4 pb-8 text-auto"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <Slider label={label || 'value'} value={value} min={min} max={max} step={step} defaultValue={defaultValue} onChange={onChange} />
+      </div>
+    </div>,
+    document.body,
+  )
+}

package/src/value/armLongPress.js

@@ -0,0 +1,17 @@
+// armLongPress — the hold that opens a ParamSheet (Knob + Fader; kol-monitor 2026-09-01).
+
+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 }
+}