Tier 2: drag feel, wheel overhaul, refs/meta/forms, Meter, gradients

- rotaryMode: 'absolute' | 'relative' (angle deltas, no grab jump) |
  'pickup' (MIDI-style: engages when the pointer sweeps past the value)
- dragAcceleration: velocity gain for relative drags (Shift bypasses);
  hideCursorOnDrag hides the cursor mid-gesture
- Wheel: trackpad delta accumulation (flicks can't rocket the value,
  one notch per wheel click), wheelStep override, wheelRequiresFocus
  opt-out of the hover scroll-trap
- onChange/onChangeStart/onChangeEnd now receive { source: 'drag' |
  'wheel' | 'keyboard' | 'reset' | 'api' }
- Every component forwards a ref to its root; name prop renders a
  hidden form input; SVG primitives carry data-part attributes
- Arc gradient: position-anchored color stops rendered as sliced arcs
  (mixColors/sampleGradient exported, unit-tested)
- New read-only Meter: LED level meter with peak hold, zones, readout
- Fader capColor/capLength for custom handle styling
- Docs: Meter/gradient/drag-feel gallery cards, white-cap fader demo,
  API rows, README
This commit is contained in:
Dreamodus 2026-07-12 15:18:54 -07:00
parent 804a85cca6
commit 0aee48b749
27 changed files with 756 additions and 134 deletions

View file

@ -64,7 +64,15 @@ All knobs render `role="slider"` with `aria-valuemin/max/now/text`.
- `detents={[0]}` + `detentSize` — magnetic snap points while dragging.
- `editable` — double-click (knobs) or click the readout (faders) to type an exact
value; `parseValue` customizes parsing (`"1.2k"` → 1200 out of the box).
- `onChange` / `onChangeStart` / `onChangeEnd` — gesture-aware callbacks.
- `rotaryMode``'absolute'` (rc-knob feel), `'relative'` (no grab jump), or
`'pickup'` (MIDI-style: engages when the pointer sweeps past the value).
- `dragAcceleration` — velocity gain for relative drags; `hideCursorOnDrag` hides
the cursor mid-gesture.
- `wheelStep` / `wheelRequiresFocus` — tune wheel notches, or keep hover-scroll free.
- `onChange` / `onChangeStart` / `onChangeEnd` — gesture-aware callbacks with
`meta.source` (`'drag' | 'wheel' | 'keyboard' | 'reset' | 'api'`).
- `name` — hidden form input for plain `<form>` posts; every component forwards a
ref to its root element, and SVG parts carry `data-part` attributes for CSS.
## Prebuilt skins
@ -80,6 +88,7 @@ import {
Fader, // linear channel fader, vertical or horizontal
LEDFader, // segmented LED meter-fader with color zones
ImageKnob, // film-strip sprite knob (KnobMan-style PNG strips)
Meter, // read-only LED level meter with peak hold
SegmentDisplay, // standalone seven-segment numeric display
} from 'dreamknob'
```