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.
6.1 KiB
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.5and1:23:45stay readable at status-bar sizes weightprop onSegmentDisplay/AlphaDisplaythickens the segments (a font weight);gapcontrols inter-cell spacing for crowded readouts like18.1/24
Displays: theme + value colors
SegmentDisplaydefaults totheme.ledGreen,AlphaDisplaytotheme.ledAmber— theme your readouts once instead of prop-drillingcolorvalueColor: (v) => stringand value-spacezonesonSegmentDisplay— a resource readout colors itself green/amber/red without app-side math- Charset:
:colon (both displays),$and%(14-seg) disabled+data-disabledon displays (uniform dimming like the controls)
Knob captions
sublabel— a second caption line (SEEDoverworld #7)labelSize— caption size independent of the dial diameter
New components
ToggleSwitch— rocker/slider boolean (role="switch"), the knob slides OFF↔ON;showStateLabel, ←/→ keysGauge— read-only radial arc meter (the round sibling ofMeter) for CPU/RAM/load; zones orvalueColor, needle, center readoutTransportButton— play/pause/stop/record/rewind/forward/panic family styled to match the controls beside it;recordblinks (reduced-motion aware)LampRow— a row of indicator lamps with console-print captionsLabeledField— label · control · unit in one aligned row (sharelabelWidth)Rack— channel-strip / rack container owning panel chrome + spacing
Responsiveness & niceties
fillonMeterandFader— stretch to the container instead of fixed pxled="dot"corner behavior plus aleadingIconslot onPushButton- Theme gains
ledGreen,ledAmber,paneltokens
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),readOnlystatus-light modeSegmentSwitch— 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 textPushButtongainsled="dot"— corner-dot LED that scales down for small icon-only toggles (lednowboolean | 'strip' | 'dot')
New capabilities
commitMode="release"— drags preview visually but emit a singleonChangeon pointer-up; Esc discards the preview (expensive parameters)Meteracceptsvalue={[l, r, ...]}for multi-channel bars with a shared clip LED- Theme gains
zoneGood/zoneWarn/zoneHot;Meter,MeterBridgeandLEDFaderdefault their zones from the theme XYPadaxes acceptinvertand per-axisdetents; arrow keys follow the visual direction on inverted axesFadergainsvaluePosition: 'top' | 'end' | 'none'—'end'renders one-line inspector rows with a stable readout widthLEDKnob/LEDFader/Metergainunit;displayDecimalsis no longer capped- Skins without visible readouts now default
aria-valuetextfromformat/unit(SteppedKnobannounces position names)
Fixes
Meterclamps geometry belowbreadth14 — no negative-dimension SVG rects on thin stripsmixColorsfalls back to CSScolor-mix()for non-hex inputs, so theme tokens can bevar(--x)/oklch()without breaking gradients and glows- Type-in editing now fires a proper edit gesture:
onChangeStart→onChange→onChangeEndwithsource: 'edit'(was a bare'api'set with no gesture events) - The
ChangeMeta.sourcecontract is documented (docs +types.ts): every user gesture brackets exactly one Start/End pair;'api'fires neither - Disabled controls set
data-disabledon 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 withclipValuepeak detection),SegmentDisplay(7-seg incl. letters/hex),AlphaDisplay(14-seg alphanumeric) XYPad(two-parameter pad),PushButton(toggle/momentary with LED)- Composable
<Knob>+ primitives (Arcwith gradients,Pointer,Ticks,TickLabels,Face,KnobValue,KnobLabel,GlowFilter) and fully headlessuseKnob
Interaction core
- Rotary (absolute / relative / pickup), relative vertical/horizontal, absolute track
modes; drag acceleration; cursor hiding; magnetic detents; endless
wrapmode - 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, detentsteps, linear/log/pow/custom tapers, bipolarorigin onChange/onChangeStart/onChangeEndwith gesturemeta.source; gesture-scoped undo friendlyanimateChangestween 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-partCSS hooks forwardRefon all interactive components, hidden form inputs vianame, touch via pointer capture (mobile verified), SSR-safe rendering