Docs accuracy pass, guides, and a playable Web Audio synth demo

Docs/playground accuracy (from a full docs-vs-source audit):
- Playground: drag-feel select covers pickup/relative rotary modes, is
  disabled for faders, and generated code no longer emits props the
  target component does not accept
- API/README claims corrected: Shift-fine wheel scope, wheelStep and
  decimals defaults, trackInset row, data-part and ref-forwarding
  scope, VintageKnob readout exception, Meter peakHold tag, stale
  component lists, aria-valuetext wording, also-exported list

API consistency fixes surfaced by the audit and the tutorial:
- Keyboard gestures now fire onChangeStart (bracket parity with drag/
  wheel - fixes gesture-scoped undo patterns)
- name (hidden form input) added to Fader, LEDFader, ImageKnob
- PushButton gets a themed keyboard-only focus ring + data-focus-visible

New docs content:
- Getting Started: 7-step guide with live examples and a gotchas list
- Advanced guide: 8-step channel-strip tutorial ending in a live,
  themed, gesture-undoable strip with meter (plus headless demo)
- Synth section: playable Web Audio synth - osc/filter/env/LFO/master
  all dreamknob controls, momentary-pad keyboard, analyser-driven Meter
This commit is contained in:
Dreamodus 2026-07-12 18:27:06 -07:00
parent e9e52e43ed
commit 54189ad07a
15 changed files with 1069 additions and 53 deletions

View file

@ -27,16 +27,18 @@ import { MetalKnob, LEDKnob, Fader, logTaper } from 'dreamknob'
<Fader min={-60} max={12} step={0.5} unit=" dB" defaultValue={-6} label="Out" />
```
- **Feel**: grab-and-rotate rotary tracking (rc-knob style), or relative vertical /
horizontal drag (DAW plugin style), or absolute track dragging for faders. Scroll-wheel
nudge, full keyboard support, Shift for fine control, double-click reset, touch via
pointer capture, proper `role="slider"` accessibility.
- **Feel**: grab-and-rotate rotary tracking (rc-knob style) with pickup/relative modes,
or relative vertical / horizontal drag (DAW plugin style), or absolute track dragging
for faders. Scroll-wheel nudge, full keyboard support, Shift+scroll for fine control,
double-click reset, touch via pointer capture, proper `role="slider"` accessibility.
- **Numbers**: any range (negative, fractional, huge), decimal `step` with float-drift-safe
rounding, discrete `values` lists, evenly spaced detents (`steps`), linear / log /
power / custom tapers.
- **Styles**: `FlatKnob`, `MetalKnob`, `RubberKnob`, `VintageKnob`, `LEDKnob`, `NeonKnob`,
`SteppedKnob`, `Fader`, `LEDFader`, `SegmentDisplay` — every color themeable per instance.
- **Composable**: `<Knob>` + primitives (`Arc`, `Pointer`, `Ticks`, `Face`, `KnobValue`,
`KnobLabel`) for custom designs, or go fully headless with `useKnob`.
`SteppedKnob`, `ImageKnob` (film-strips), `Fader`, `LEDFader`, `Meter`, `XYPad`,
`PushButton`, `SegmentDisplay`, `AlphaDisplay` — every color themeable per instance.
- **Composable**: `<Knob>` + primitives (`Arc`, `Pointer`, `Ticks`, `TickLabels`, `Face`,
`KnobValue`, `KnobLabel`, `GlowFilter`) for custom designs, or go fully headless with
`useKnob`.
See `packages/dreamknob/README.md` and the docs app for the full API.