Tier 3: bubbles, animation, wrap mode, XYPad, AlphaDisplay, PushButton

- valueBubble/bubbleFormat: floating readout above knobs while dragging
  (Knob-based skins + ImageKnob)
- animateChanges: rAF ease-out tween of the pointer on programmatic
  value changes; user gestures snap; prefers-reduced-motion disables
- wrap: endless encoder mode — values and relative drags roll around
  min↔max; pairs with angleOffset={0} angleRange={360}
- XYPad: two-parameter pad with absolute drag, arrow keys (Shift
  coarse), Escape cancel, double-click reset, grid/crosshair, focus
  ring, hidden form inputs, change meta
- AlphaDisplay: fourteen-segment alphanumeric LED (A-Z, 0-9, symbols,
  decimal points, chars padding/align, glow/skew)
- PushButton: studio panel button with LED strip — toggle or momentary,
  controlled/uncontrolled, aria-pressed, hidden form input
- Docs: five new gallery cards incl. animated preset demo, API rows,
  README
This commit is contained in:
Dreamodus 2026-07-12 17:47:20 -07:00
parent 0aee48b749
commit e9e52e43ed
12 changed files with 936 additions and 8 deletions

View file

@ -71,6 +71,11 @@ All knobs render `role="slider"` with `aria-valuemin/max/now/text`.
- `wheelStep` / `wheelRequiresFocus` — tune wheel notches, or keep hover-scroll free.
- `onChange` / `onChangeStart` / `onChangeEnd` — gesture-aware callbacks with
`meta.source` (`'drag' | 'wheel' | 'keyboard' | 'reset' | 'api'`).
- `wrap` — endless encoder mode: values roll around min↔max (pair with
`angleOffset={0} angleRange={360}`).
- `animateChanges` — tween the pointer on programmatic changes (preset loads);
gestures never animate and `prefers-reduced-motion` is honored.
- `valueBubble` — floating readout above the control while dragging.
- `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.
@ -89,7 +94,10 @@ import {
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
XYPad, // two-parameter pad (cutoff/resonance, vector mixing)
PushButton, // panel button with LED strip (toggle or momentary)
SegmentDisplay, // standalone seven-segment numeric display
AlphaDisplay, // fourteen-segment alphanumeric display
} from 'dreamknob'
```