Dreamodus
d183d7d16b
- PushButton/Button forward native button props (...rest) and compose their own event handlers with consumer/Radix-injected ones, so a Button works as a Radix `asChild` trigger (dropdowns/tooltips/popovers). Prop types now extend React.ButtonHTMLAttributes. - Meter gains opt-in metering: `ballistics` (PPM attack/decay), `peakDecay` (peak-hold fall tail), `scale="db"` (feed amplitude → dBFS with reference lines; min/max default -60/0), and `integrated` (windowed LUFS-ish loudness readout + marker). New rAF engine in meterEngine.ts with ampToDb/dbToAmp helpers; default behavior unchanged. - New `PanKnob` — bipolar stereo pan: fills from center, center detent, L<n>/C/R<n> readout, -50..50 default. - Docs: ApiDocs rows + recipes (dBFS meter, pan strip, Button-as-trigger), gallery cards (dBFS meter, Pan) + a Regenerate Button in the panel. CHANGELOG 1.1.3; version 1.1.3; install URLs bumped. Library + docs typecheck and build; 46 tests pass. - Meter dBFS readout: muted-grey unit labels (LUFS matched to dB), value-first layout in an aligned 2-column grid so peak/loudness decimals line up, and ghost pad digits removed — the loudness row no longer looks like a stray tag. - Action buttons (Button / PushButton mode="action") no longer show an LED by default — an action has no state to indicate. led defaults to 'strip' for toggle/momentary and false for action; led="dot"/"strip" opts back in. - Meter dBFS readout: units (dB / LUFS) sit centered directly under each value; grid alignment tidied and ghost pad digits removed. Docs: dBFS-meter card moved next to the Meters card (same component) + a horizontal example.
77 lines
3 KiB
Markdown
77 lines
3 KiB
Markdown
# dreamknob
|
|
|
|
A feature-full, studio-grade **React + TypeScript knob & fader library** with a headless
|
|
interaction core — plus a showcase/documentation site.
|
|
|
|
```
|
|
pnpm install # install everything
|
|
pnpm dev # run the showcase at http://localhost:5173
|
|
pnpm test # library unit tests
|
|
pnpm build # build library + docs
|
|
```
|
|
|
|
## Workspace layout
|
|
|
|
| Path | What it is |
|
|
| --- | --- |
|
|
| `packages/dreamknob` | The library. Zero runtime dependencies, ESM + CJS + `.d.ts`. |
|
|
| `apps/docs` | Vite showcase: gallery, live playground with code generation, API docs. |
|
|
|
|
## The library in 10 seconds
|
|
|
|
```tsx
|
|
import { MetalKnob, LEDKnob, Fader, logTaper } from 'dreamknob'
|
|
|
|
<MetalKnob size={90} min={0} max={100} step={0.5} defaultValue={64} label="Gain" />
|
|
<LEDKnob min={20} max={20000} taper={logTaper} defaultValue={632} label="Freq" />
|
|
<Fader min={-60} max={12} step={0.5} unit=" dB" defaultValue={-6} label="Out" />
|
|
```
|
|
|
|
- **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`, `PanKnob`, `ImageKnob` (film-strips), `Fader`, `LEDFader`, `Meter`
|
|
(PPM ballistics · dBFS · loudness), `MeterBridge`, `Gauge`, `XYPad`, `PushButton`,
|
|
`Button`, `IndicatorLamp`, `LampRow`, `ToggleSwitch`, `SegmentSwitch`,
|
|
`TransportButton`, `ScrubField`, `SegmentDisplay`, `AlphaDisplay`, plus
|
|
`LabeledField`/`Rack` layout — 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.
|
|
|
|
## Using it in another app
|
|
|
|
The easiest way is the published release on our Forgejo:
|
|
|
|
```bash
|
|
pnpm add https://git.dreamodus.software/Dreamodus/DreamKnob/releases/download/v1.1.3/dreamknob-1.1.3.tgz
|
|
```
|
|
|
|
Or build locally — the package builds to `packages/dreamknob/dist` (ESM + CJS + types):
|
|
|
|
```bash
|
|
# 1. Tarball (most robust — behaves exactly like an npm install)
|
|
cd packages/dreamknob && pnpm build && pnpm pack
|
|
# then in your app:
|
|
pnpm add /path/to/dreamknob-1.0.0.tgz
|
|
|
|
# 2. File dependency (picks up rebuilds on reinstall)
|
|
pnpm add file:../dreamknob/packages/dreamknob
|
|
|
|
# 3. Link for active development against your app
|
|
cd packages/dreamknob && pnpm link --global
|
|
cd your-app && pnpm link --global dreamknob
|
|
```
|
|
|
|
Peer deps: `react >= 18`, `react-dom >= 18`. No CSS import needed.
|
|
|
|
## License
|
|
|
|
MIT © Dreamodus Software Inc. — see [LICENSE](LICENSE).
|