# 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`, `ImageKnob` (film-strips), `Fader`, `LEDFader`, `Meter`, `MeterBridge`,
  `Gauge`, `XYPad`, `PushButton`, `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.1/dreamknob-1.1.1.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).