DreamKnob/packages/dreamknob/CHANGELOG.md
Dreamodus 5b97091902 v1.1.1: second integration-feedback release
Readout legibility (the #1 ask):
- bold own-cell decimal point + colon in seven/fourteen-seg (not hairlines)
- weight prop thickens strokes; gap controls inter-cell kerning

Display colors:
- SegmentDisplay defaults to theme.ledGreen, AlphaDisplay to theme.ledAmber
- valueColor fn + value-space zones on SegmentDisplay (self-coloring readouts)
- charset: colon in both, $ and % in 14-seg; disabled + data-disabled

Knob captions: sublabel (second line) + labelSize (independent of dial size).

New components:
- ToggleSwitch (rocker/slider boolean, role=switch)
- Gauge (read-only radial arc meter, round sibling of Meter)
- TransportButton (play/stop/record/pause/panic, record blinks)
- LampRow (console-print lamp bank), LabeledField, Rack (panel chrome)

Responsiveness: fill on Meter + Fader (stretch to container).
Niceties: PushButton leadingIcon; theme ledGreen/ledAmber/panel tokens.

54 -> 63 exports. 38 unit tests. Browser-verified.
2026-07-13 19:20:23 -07:00

6.1 KiB

Changelog

1.1.1 — 2026-07-13

Second integration-feedback release — the friction that showed up once the displays and switches went into dense, resizable, themed product panels.

Readout legibility

  • Seven-segment decimal point and colon now render as bold cells with their own width (not hairlines between digits), so 17.5 and 1:23:45 stay readable at status-bar sizes
  • weight prop on SegmentDisplay/AlphaDisplay thickens the segments (a font weight); gap controls inter-cell spacing for crowded readouts like 18.1/24

Displays: theme + value colors

  • SegmentDisplay defaults to theme.ledGreen, AlphaDisplay to theme.ledAmber — theme your readouts once instead of prop-drilling color
  • valueColor: (v) => string and value-space zones on SegmentDisplay — a resource readout colors itself green/amber/red without app-side math
  • Charset: : colon (both displays), $ and % (14-seg)
  • disabled + data-disabled on displays (uniform dimming like the controls)

Knob captions

  • sublabel — a second caption line (SEED over world #7)
  • labelSize — caption size independent of the dial diameter

New components

  • ToggleSwitch — rocker/slider boolean (role="switch"), the knob slides OFF↔ON; showStateLabel, ←/→ keys
  • Gauge — read-only radial arc meter (the round sibling of Meter) for CPU/RAM/load; zones or valueColor, needle, center readout
  • TransportButton — play/pause/stop/record/rewind/forward/panic family styled to match the controls beside it; record blinks (reduced-motion aware)
  • LampRow — a row of indicator lamps with console-print captions
  • LabeledField — label · control · unit in one aligned row (share labelWidth)
  • Rack — channel-strip / rack container owning panel chrome + spacing

Responsiveness & niceties

  • fill on Meter and Fader — stretch to the container instead of fixed px
  • led="dot" corner behavior plus a leadingIcon slot on PushButton
  • Theme gains ledGreen, ledAmber, panel tokens

1.1.0 — 2026-07-13

Integration-feedback release — everything in here came from wiring dreamknob into a real product.

New components

  • IndicatorLamp — pressable LED lamp (role="switch"), toggle/momentary, blink (reduced-motion aware), readOnly status-light mode
  • SegmentSwitch — hardware-styled segmented selector (radiogroup, roving focus, arrow/Home/End keys, LED tick)
  • ScrubField — After-Effects-style numeric field: label scrubbing (Shift = fine), draft typing (Enter commits, Esc reverts), arrow steps, wheel; role="spinbutton"
  • MeterBridge — labeled multi-strip meter block with per-channel peak-hold text
  • PushButton gains led="dot" — corner-dot LED that scales down for small icon-only toggles (led now boolean | 'strip' | 'dot')

New capabilities

  • commitMode="release" — drags preview visually but emit a single onChange on pointer-up; Esc discards the preview (expensive parameters)
  • Meter accepts value={[l, r, ...]} for multi-channel bars with a shared clip LED
  • Theme gains zoneGood / zoneWarn / zoneHot; Meter, MeterBridge and LEDFader default their zones from the theme
  • XYPad axes accept invert and per-axis detents; arrow keys follow the visual direction on inverted axes
  • Fader gains valuePosition: 'top' | 'end' | 'none''end' renders one-line inspector rows with a stable readout width
  • LEDKnob / LEDFader / Meter gain unit; displayDecimals is no longer capped
  • Skins without visible readouts now default aria-valuetext from format/unit (SteppedKnob announces position names)

Fixes

  • Meter clamps geometry below breadth 14 — no negative-dimension SVG rects on thin strips
  • mixColors falls back to CSS color-mix() for non-hex inputs, so theme tokens can be var(--x) / oklch() without breaking gradients and glows
  • Type-in editing now fires a proper edit gesture: onChangeStartonChangeonChangeEnd with source: 'edit' (was a bare 'api' set with no gesture events)
  • The ChangeMeta.source contract is documented (docs + types.ts): every user gesture brackets exactly one Start/End pair; 'api' fires neither
  • Disabled controls set data-disabled on the wrapper (including labels/readouts) and dim uniformly

1.0.0 — 2026-07-12

Initial release.

Controls

  • Rotary knob skins: FlatKnob, MetalKnob, RubberKnob, VintageKnob, LEDKnob, NeonKnob, SteppedKnob, ImageKnob (film-strip sprites)
  • Linear: Fader (custom cap color/length), LEDFader (meter-zone segments)
  • Displays: Meter (peak hold + latching clip LED with clipValue peak detection), SegmentDisplay (7-seg incl. letters/hex), AlphaDisplay (14-seg alphanumeric)
  • XYPad (two-parameter pad), PushButton (toggle/momentary with LED)
  • Composable <Knob> + primitives (Arc with gradients, Pointer, Ticks, TickLabels, Face, KnobValue, KnobLabel, GlowFilter) and fully headless useKnob

Interaction core

  • Rotary (absolute / relative / pickup), relative vertical/horizontal, absolute track modes; drag acceleration; cursor hiding; magnetic detents; endless wrap mode
  • Wheel with trackpad delta accumulation, wheelStep, focus-gated capture
  • Full keyboard support, Escape drag-cancel, double-click reset, type-in editing (editable, "1.2k" parsing), Shift fine control
  • Value model: any range, decimal steps with float-safe rounding, discrete values, detent steps, linear/log/pow/custom tapers, bipolar origin
  • onChange/onChangeStart/onChangeEnd with gesture meta.source; gesture-scoped undo friendly
  • animateChanges tween for programmatic changes (reduced-motion aware), valueBubble

Integration

  • Theming via DreamknobProvider (dark/light bases, per-instance override)
  • Keyboard-only focus rings, role="slider"/role="meter" semantics, aria-orientation, data-* state attributes, data-part CSS hooks
  • forwardRef on all interactive components, hidden form inputs via name, touch via pointer capture (mobile verified), SSR-safe rendering