Dreamodus
d8b7b55505
Bugs from real-product integration: - Meter/LEDFader clamp geometry below breadth 14 (no negative SVG rects) - mixColors falls back to CSS color-mix() so theme tokens can be var()/oklch() - type-in editing fires a real edit gesture (Start/onChange/End, source 'edit') - ScrubField Enter/Escape no longer double-commit or commit-on-revert via blur - disabled dims the whole control uniformly, data-disabled on the wrapper New capabilities: - commitMode 'release': drags preview, emit once on pointer-up, Esc discards - Meter accepts value=[l, r, ...]; theme zoneGood/zoneWarn/zoneHot defaults - XYPad per-axis invert + detents; Fader valuePosition top|end|none - LED skins: unit labels, uncapped displayDecimals, aria-valuetext defaults New components: IndicatorLamp, SegmentSwitch, ScrubField, MeterBridge, PushButton led='dot'. Docs: change-contract table, recipes, gallery cards.
2.9 KiB
2.9 KiB
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
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
stepwith float-drift-safe rounding, discretevalueslists, evenly spaced detents (steps), linear / log / power / custom tapers. - Styles:
FlatKnob,MetalKnob,RubberKnob,VintageKnob,LEDKnob,NeonKnob,SteppedKnob,ImageKnob(film-strips),Fader,LEDFader,Meter,MeterBridge,XYPad,PushButton,IndicatorLamp,SegmentSwitch,ScrubField,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 withuseKnob.
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:
pnpm add https://git.dreamodus.software/Dreamodus/DreamKnob/releases/download/v1.1.0/dreamknob-1.1.0.tgz
Or build locally — the package builds to packages/dreamknob/dist (ESM + CJS + types):
# 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.