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:
parent
e9e52e43ed
commit
54189ad07a
15 changed files with 1069 additions and 53 deletions
|
|
@ -41,7 +41,7 @@ Every component shares one core:
|
|||
| Gesture | Behaviour |
|
||||
| --- | --- |
|
||||
| Drag | `rotary` (grab & turn, follows the pointer angle), `vertical`, `horizontal`, `both`, or absolute `track-*` (faders) |
|
||||
| Scroll wheel | one `step` per notch, `Shift` = fine |
|
||||
| Scroll wheel | one `step` per notch (else 1% of range); `Shift` = fine on continuous values — snapped controls always move whole steps |
|
||||
| `↑ → / ↓ ←` | ± one step (`Shift` = 10×) |
|
||||
| `PageUp/PageDown` | ± 10 % of range |
|
||||
| `Home/End` | min / max |
|
||||
|
|
@ -49,7 +49,8 @@ Every component shares one core:
|
|||
| `Escape` | cancel an in-flight drag, restoring the start value |
|
||||
| Touch / pen | pointer capture, `touch-action: none` |
|
||||
|
||||
All knobs render `role="slider"` with `aria-valuemin/max/now/text`.
|
||||
All knobs render `role="slider"` with `aria-valuemin/max/now` (and `aria-valuetext`
|
||||
when you provide `getAriaValueText`).
|
||||
|
||||
## Value handling
|
||||
|
||||
|
|
@ -76,8 +77,10 @@ All knobs render `role="slider"` with `aria-valuemin/max/now/text`.
|
|||
- `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.
|
||||
- `name` — hidden form input for plain `<form>` posts on every knob, fader and
|
||||
`PushButton` (`XYPad` uses `nameX`/`nameY`). Interactive components forward a ref
|
||||
to their root element, and primitive-drawn SVG parts carry `data-part` attributes
|
||||
for CSS styling.
|
||||
|
||||
## Prebuilt skins
|
||||
|
||||
|
|
@ -114,8 +117,17 @@ import { DreamknobProvider } from 'dreamknob'
|
|||
`base="light"` swaps in light-background defaults. Tokens: `accent`, `track`, `face`,
|
||||
`text`, `label`, `ticks`, `focusRing`, `fontMono`, `fontUI`.
|
||||
|
||||
Every skin takes the core props plus `size`, `label`, `showValue`, `unit`, `format`,
|
||||
and per-part color props (`color`, `trackColor`, `faceColor`, `bodyColor`, …).
|
||||
Every knob skin and fader takes the core props plus `size`, `label`, `showValue`,
|
||||
`unit`, `format`, and per-part color props (`color`, `trackColor`, `faceColor`,
|
||||
`bodyColor`, …). `VintageKnob` has no readout, so it omits `showValue`/`unit`/`format`;
|
||||
the display components (`Meter`, `SegmentDisplay`, `AlphaDisplay`) have their own
|
||||
smaller prop sets.
|
||||
|
||||
Also exported for custom builds: primitives (`Arc`, `Pointer`, `Ticks`, `TickLabels`,
|
||||
`Face`, `KnobValue`, `KnobLabel`, `GlowFilter`), theming (`useKnobTheme`, `darkTheme`,
|
||||
`lightTheme`), editing (`ValueInput`, `defaultParseValue`), colors (`mixColors`,
|
||||
`sampleGradient`), and the math kit (`clamp`, `roundTo`, `snapToStep`,
|
||||
`decimalsFromStep`, `findClosest`, `applyDetents`, tapers, angle/arc helpers).
|
||||
|
||||
## Compose your own
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue