Dreamodus/DreamKnob
1
0
Fork 0
Code Issues Pull requests Projects Releases 6 Packages Wiki Activity Actions
No description http://dreamknob.dreamodus.software
20 commits 1 branch 6 tags 264 KiB
Find a file
Dreamodus 8b462dfb83 v1.1.4: light-theme support (LED wells, panel buttons, readouts) 
The controls whose chrome was hardcoded dark now adapt to a light base —
previously they rendered as dark chips/holes on light themes. (Flat knobs and
faders already adapted: their face is the `face` token.)

- `ledWell` theme token — the recessed screen behind LED segments (LEDKnob,
  LEDFader, Meter) and the default well of SegmentDisplay / AlphaDisplay now
  comes from the theme. Dark base keeps #0b0d0e; light base is `transparent`,
  so LED controls and readouts render as clean flat rings / bars / digits on
  the light panel. faceColor / background props still override.
- `scheme` theme token ('dark' | 'light', set by base) + a shared
  panelButtonChrome() helper drive the raised gradient/border/shadow of
  PushButton (and Button), TransportButton and SegmentSwitch — light raised
  buttons on light themes instead of dark chips; unlit LED pips flip to a
  faint dark so they still read.
- Docs: a "Light theme" gallery card showing the panel family under
  base="light"; ledWell/scheme documented; install URLs bumped to v1.1.4.

Library + docs typecheck and build; 46 tests pass.
2026-07-14 14:21:57 -07:00
apps/docs v1.1.4: light-theme support (LED wells, panel buttons, readouts) 2026-07-14 14:21:57 -07:00
packages/dreamknob v1.1.4: light-theme support (LED wells, panel buttons, readouts) 2026-07-14 14:21:57 -07:00
.gitignore Release 1.0.0: license, changelog, packaging closeout 2026-07-12 21:05:34 -07:00
LICENSE Release 1.0.0: license, changelog, packaging closeout 2026-07-12 21:05:34 -07:00
package.json Initial release: dreamknob library + showcase 2026-07-12 14:26:52 -07:00
pnpm-lock.yaml Initial release: dreamknob library + showcase 2026-07-12 14:26:52 -07:00
pnpm-workspace.yaml Initial release: dreamknob library + showcase 2026-07-12 14:26:52 -07:00
README.md v1.1.4: light-theme support (LED wells, panel buttons, readouts) 2026-07-14 14:21:57 -07:00

README.md

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 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:

pnpm add https://git.dreamodus.software/Dreamodus/DreamKnob/releases/download/v1.1.4/dreamknob-1.1.4.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.