@vessel-dsp/control-ui 0.6.4

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Joseph Cheng
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,74 @@
+# @vessel-dsp/control-ui
+
+React controls for rendering a VesselDSP `Panel` from `@vessel-dsp/core`.
+
+`control-ui` is the optional browser layer. It does not parse `.vdsp`, run DSP,
+own an audio runtime, render schematics, or import stompbox preview code.
+
+## Install
+
+```bash
+npm install @vessel-dsp/core @vessel-dsp/control-ui react react-dom
+```
+
+Import the default CSS when you want the bundled styling:
+
+```ts
+import '@vessel-dsp/control-ui/styles.css';
+```
+
+## Controlled Surface
+
+```tsx
+import {
+    ControlSurface,
+    ControlUiThemeProvider,
+    createControlUiState,
+} from '@vessel-dsp/control-ui';
+import { extractPanel, parseCircuitDocumentFile } from '@vessel-dsp/core';
+
+const document = parseCircuitDocumentFile(vdspSource, { filename: 'pedal.vdsp' });
+const panel = extractPanel(document);
+const state = createControlUiState(panel);
+
+export function PedalControls() {
+    return (
+        <ControlUiThemeProvider theme={{ accentColor: '#f59e0b' }}>
+            <ControlSurface
+                panel={panel}
+                state={state}
+                onMessage={(message) => {
+                    audioRuntime.send(message);
+                }}
+            />
+        </ControlUiThemeProvider>
+    );
+}
+```
+
+The surface emits core `PanelMessage` objects. The host app owns transport,
+namespacing, and audio-engine routing.
+
+## Styling
+
+The package ships stable `vdsp-control-ui-*` class names and CSS variables.
+Every component accepts `className` and `classNames` hooks, so apps can add
+Tailwind or other utility classes without forking the controls:
+
+```tsx
+<ControlSurface
+    panel={panel}
+    state={state}
+    className="grid-cols-4 gap-4"
+    classNames={{
+        control: 'shadow-sm',
+        knob: 'ring-1 ring-slate-300',
+        select: 'text-sm',
+    }}
+/>
+```
+
+Use `ControlUiThemeProvider` to theme a subtree through CSS custom properties.
+The provider maps a small theme object to variables such as
+`--vdsp-control-ui-accent-color`, `--vdsp-control-ui-control-color`, and
+`--vdsp-control-ui-focus-ring-color`.

package/dist/ControlSurface.d.ts

@@ -0,0 +1,14 @@
+import type { ControlState, Panel, PanelMessage } from '@vessel-dsp/core';
+import type { ControlAppearanceMap, ControlSurfaceClassNames } from './types';
+export type ControlSurfaceProps = Readonly<{
+    panel: Panel;
+    state: ControlState;
+    disabled?: boolean;
+    appearance?: ControlAppearanceMap | undefined;
+    className?: string | undefined;
+    classNames?: ControlSurfaceClassNames | undefined;
+    onMessage?: ((message: PanelMessage) => void) | undefined;
+    onStateChange?: ((state: ControlState, message: PanelMessage) => void) | undefined;
+}>;
+export declare function ControlSurface({ panel, state, disabled, appearance, className, classNames, onMessage, onStateChange, }: ControlSurfaceProps): import("react").JSX.Element;
+//# sourceMappingURL=ControlSurface.d.ts.map

package/dist/ControlSurface.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlSurface.d.ts","sourceRoot":"","sources":["../src/ControlSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAgB,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAIxF,OAAO,KAAK,EAAE,oBAAoB,EAA0B,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAUtG,MAAM,MAAM,mBAAmB,GAAG,QAAQ,CAAC;IACvC,KAAK,EAAE,KAAK,CAAC;IACb,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,oBAAoB,GAAG,SAAS,CAAC;IAC9C,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,wBAAwB,GAAG,SAAS,CAAC;IAClD,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC1D,aAAa,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CACtF,CAAC,CAAC;AAEH,wBAAgB,cAAc,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,QAAgB,EAChB,UAAU,EACV,SAAS,EACT,UAAU,EACV,SAAS,EACT,aAAa,GAChB,EAAE,mBAAmB,+BA+BrB"}

package/dist/ControlSurface.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { controlValueForId } from './controls.js';
+import { createControlSurfaceRenderPlan } from './render-plan.js';
+import { applyControlUiMessage, controlMessageForValue } from './state.js';
+import { cx } from './utils.js';
+import { DetentedRotarySelect } from './components/DetentedRotarySelect.js';
+import { FootswitchButton } from './components/FootswitchButton.js';
+import { GraphicEqSlider } from './components/GraphicEqSlider.js';
+import { KnobControl } from './components/KnobControl.js';
+import { LedIndicator } from './components/LedIndicator.js';
+import { SwitchSelectControl } from './components/SwitchSelectControl.js';
+import { ToggleSwitchControl } from './components/ToggleSwitchControl.js';
+export function ControlSurface({ panel, state, disabled = false, appearance, className, classNames, onMessage, onStateChange, }) {
+    const plan = createControlSurfaceRenderPlan(panel, { appearance });
+    function emitControlValue(controlId, value) {
+        if (disabled) {
+            return;
+        }
+        const message = controlMessageForValue(panel, controlId, value);
+        onMessage?.(message);
+        if (onStateChange !== undefined) {
+            onStateChange(applyControlUiMessage(panel, state, message), message);
+        }
+    }
+    return (_jsx("div", { className: cx('vdsp-control-ui-surface', disabled && 'is-disabled', classNames?.root, className), "data-vdsp-control-surface": true, children: plan.map((item) => (_jsx("div", { className: cx('vdsp-control-ui-surface__item', classNames?.item), "data-vdsp-control-item": item.controlId, "data-vdsp-face-id": item.faceId, children: renderControlItem(item, state, disabled, classNames, emitControlValue) }, item.id))) }));
+}
+function renderControlItem(item, state, disabled, classNames, emitControlValue) {
+    const value = controlValueForId(state, item.controlId);
+    const frameClassNames = frameClassNamesFor(item, classNames);
+    if (item.control.kind === 'knob') {
+        if (item.appearance === 'detented-rotary-select') {
+            return (_jsx(DetentedRotarySelect, { control: item.control.control, position: value?.kind === 'knob' ? value.position : item.control.control.defaultPosition, disabled: disabled, label: item.label, classNames: frameClassNames, onPositionChange: (position) => emitControlValue(item.controlId, position) }));
+        }
+        return (_jsx(KnobControl, { control: item.control.control, position: value?.kind === 'knob' ? value.position : item.control.control.defaultPosition, disabled: disabled, label: item.label, classNames: frameClassNames, onPositionChange: (position) => emitControlValue(item.controlId, position) }));
+    }
+    if (item.control.kind === 'slider') {
+        return (_jsx(GraphicEqSlider, { control: item.control.control, position: value?.kind === 'slider' ? value.position : item.control.control.defaultPosition, disabled: disabled, label: item.label, classNames: frameClassNames, onPositionChange: (position) => emitControlValue(item.controlId, position) }));
+    }
+    if (item.control.kind === 'switch') {
+        const position = value?.kind === 'switch' ? value.position : item.control.control.defaultPosition;
+        if (item.appearance === 'footswitch') {
+            return (_jsx(FootswitchButton, { control: item.control.control, pressed: position > 0, disabled: disabled, label: item.label, classNames: frameClassNames, onPressedChange: (pressed) => emitControlValue(item.controlId, pressed ? 1 : 0) }));
+        }
+        if (item.appearance === 'toggle') {
+            return (_jsx(ToggleSwitchControl, { control: item.control.control, position: position, disabled: disabled, label: item.label, classNames: frameClassNames, onPositionChange: (nextPosition) => emitControlValue(item.controlId, nextPosition) }));
+        }
+        return (_jsx(SwitchSelectControl, { control: item.control.control, position: position, disabled: disabled, label: item.label, classNames: frameClassNames, onPositionChange: (nextPosition) => emitControlValue(item.controlId, nextPosition) }));
+    }
+    return (_jsx(LedIndicator, { control: item.control.control, value: value?.kind === 'led' ? value : { kind: 'led', on: false }, disabled: disabled, label: item.label, classNames: frameClassNames }));
+}
+function frameClassNamesFor(item, classNames) {
+    if (classNames === undefined) {
+        return undefined;
+    }
+    return {
+        frame: classNames.frame,
+        label: classNames.label,
+        readout: classNames.readout,
+        control: cx(classNames.control, controlSpecificClassName(item, classNames)),
+    };
+}
+function controlSpecificClassName(item, classNames) {
+    switch (item.appearance) {
+        case 'knob':
+            return classNames.knob;
+        case 'detented-rotary-select':
+            return classNames.select;
+        case 'footswitch':
+            return classNames.footswitch;
+        case 'toggle':
+            return classNames.toggle;
+        case 'graphic-eq-slider':
+        case 'slider':
+            return classNames.slider;
+        case 'led':
+            return classNames.led;
+        case 'hidden':
+            return undefined;
+    }
+}
+//# sourceMappingURL=ControlSurface.js.map

package/dist/ControlSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlSurface.js","sourceRoot":"","sources":["../src/ControlSurface.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AAC/C,OAAO,EAAE,8BAA8B,EAAiC,MAAM,eAAe,CAAC;AAC9F,OAAO,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAExE,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAC7B,OAAO,EAAE,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAavE,MAAM,UAAU,cAAc,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,UAAU,EACV,SAAS,EACT,UAAU,EACV,SAAS,EACT,aAAa,GACK;IAClB,MAAM,IAAI,GAAG,8BAA8B,CAAC,KAAK,EAAE,EAAE,UAAU,EAAE,CAAC,CAAC;IAEnE,SAAS,gBAAgB,CAAC,SAAiB,EAAE,KAAsC;QAC/E,IAAI,QAAQ,EAAE,CAAC;YACX,OAAO;QACX,CAAC;QACD,MAAM,OAAO,GAAG,sBAAsB,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;QAChE,SAAS,EAAE,CAAC,OAAO,CAAC,CAAC;QACrB,IAAI,aAAa,KAAK,SAAS,EAAE,CAAC;YAC9B,aAAa,CAAC,qBAAqB,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE,OAAO,CAAC,CAAC;QACzE,CAAC;IACL,CAAC;IAED,OAAO,CACH,cACI,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,QAAQ,IAAI,aAAa,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,CAAC,+BACrE,IAAI,YAE9B,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAChB,cAEI,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE,UAAU,EAAE,IAAI,CAAC,4BACxC,IAAI,CAAC,SAAS,uBACnB,IAAI,CAAC,MAAM,YAE7B,iBAAiB,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAAgB,CAAC,IALlE,IAAI,CAAC,EAAE,CAMV,CACT,CAAC,GACA,CACT,CAAC;AACN,CAAC;AAED,SAAS,iBAAiB,CACtB,IAA8B,EAC9B,KAAmB,EACnB,QAAiB,EACjB,UAAgD,EAChD,gBAAqF;IAErF,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IACvD,MAAM,eAAe,GAAG,kBAAkB,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;IAE7D,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;QAC/B,IAAI,IAAI,CAAC,UAAU,KAAK,wBAAwB,EAAE,CAAC;YAC/C,OAAO,CACH,KAAC,oBAAoB,IACjB,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAC7B,QAAQ,EAAE,KAAK,EAAE,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,EACxF,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,eAAe,EAC3B,gBAAgB,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,GAC5E,CACL,CAAC;QACN,CAAC;QACD,OAAO,CACH,KAAC,WAAW,IACR,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAC7B,QAAQ,EAAE,KAAK,EAAE,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,EACxF,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,eAAe,EAC3B,gBAAgB,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,GAC5E,CACL,CAAC;IACN,CAAC;IAED,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QACjC,OAAO,CACH,KAAC,eAAe,IACZ,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAC7B,QAAQ,EAAE,KAAK,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,EAC1F,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,eAAe,EAC3B,gBAAgB,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,CAAC,GAC5E,CACL,CAAC;IACN,CAAC;IAED,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;QACjC,MAAM,QAAQ,GAAG,KAAK,EAAE,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC;QAClG,IAAI,IAAI,CAAC,UAAU,KAAK,YAAY,EAAE,CAAC;YACnC,OAAO,CACH,KAAC,gBAAgB,IACb,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAC7B,OAAO,EAAE,QAAQ,GAAG,CAAC,EACrB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,eAAe,EAC3B,eAAe,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GACjF,CACL,CAAC;QACN,CAAC;QACD,IAAI,IAAI,CAAC,UAAU,KAAK,QAAQ,EAAE,CAAC;YAC/B,OAAO,CACH,KAAC,mBAAmB,IAChB,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAC7B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,eAAe,EAC3B,gBAAgB,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,GACpF,CACL,CAAC;QACN,CAAC;QACD,OAAO,CACH,KAAC,mBAAmB,IAChB,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAC7B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,eAAe,EAC3B,gBAAgB,EAAE,CAAC,YAAY,EAAE,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,SAAS,EAAE,YAAY,CAAC,GACpF,CACL,CAAC;IACN,CAAC;IAED,OAAO,CACH,KAAC,YAAY,IACT,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAC7B,KAAK,EAAE,KAAK,EAAE,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,EACjE,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,eAAe,GAC7B,CACL,CAAC;AACN,CAAC;AAED,SAAS,kBAAkB,CACvB,IAA8B,EAC9B,UAAgD;IAEhD,IAAI,UAAU,KAAK,SAAS,EAAE,CAAC;QAC3B,OAAO,SAAS,CAAC;IACrB,CAAC;IAED,OAAO;QACH,KAAK,EAAE,UAAU,CAAC,KAAK;QACvB,KAAK,EAAE,UAAU,CAAC,KAAK;QACvB,OAAO,EAAE,UAAU,CAAC,OAAO;QAC3B,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,wBAAwB,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;KAC9E,CAAC;AACN,CAAC;AAED,SAAS,wBAAwB,CAC7B,IAA8B,EAC9B,UAAoC;IAEpC,QAAQ,IAAI,CAAC,UAAU,EAAE,CAAC;QACtB,KAAK,MAAM;YACP,OAAO,UAAU,CAAC,IAAI,CAAC;QAC3B,KAAK,wBAAwB;YACzB,OAAO,UAAU,CAAC,MAAM,CAAC;QAC7B,KAAK,YAAY;YACb,OAAO,UAAU,CAAC,UAAU,CAAC;QACjC,KAAK,QAAQ;YACT,OAAO,UAAU,CAAC,MAAM,CAAC;QAC7B,KAAK,mBAAmB,CAAC;QACzB,KAAK,QAAQ;YACT,OAAO,UAAU,CAAC,MAAM,CAAC;QAC7B,KAAK,KAAK;YACN,OAAO,UAAU,CAAC,GAAG,CAAC;QAC1B,KAAK,QAAQ;YACT,OAAO,SAAS,CAAC;IACzB,CAAC;AACL,CAAC"}

package/dist/appearance.d.ts

@@ -0,0 +1,3 @@
+import type { ControlAppearance, ControlUiControlRef } from './types';
+export declare function resolveControlAppearance(control: ControlUiControlRef, override?: ControlAppearance): ControlAppearance;
+//# sourceMappingURL=appearance.d.ts.map

package/dist/appearance.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../src/appearance.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEtE,wBAAgB,wBAAwB,CACpC,OAAO,EAAE,mBAAmB,EAC5B,QAAQ,CAAC,EAAE,iBAAiB,GAC7B,iBAAiB,CA0BnB"}

package/dist/appearance.js

@@ -0,0 +1,25 @@
+export function resolveControlAppearance(control, override) {
+    if (override !== undefined) {
+        return override;
+    }
+    switch (control.kind) {
+        case 'knob':
+            return (control.control.steps?.length ?? 0) > 0 ? 'detented-rotary-select' : 'knob';
+        case 'slider':
+            return 'graphic-eq-slider';
+        case 'switch':
+            if (control.control.switchKind === '3pdt') {
+                return 'footswitch';
+            }
+            if (control.control.positions === 2 &&
+                (control.control.switchKind === 'spdt' ||
+                    control.control.switchKind === 'spst' ||
+                    control.control.switchKind === 'toggle')) {
+                return 'toggle';
+            }
+            return 'detented-rotary-select';
+        case 'led':
+            return 'led';
+    }
+}
+//# sourceMappingURL=appearance.js.map

package/dist/appearance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"appearance.js","sourceRoot":"","sources":["../src/appearance.ts"],"names":[],"mappings":"AAEA,MAAM,UAAU,wBAAwB,CACpC,OAA4B,EAC5B,QAA4B;IAE5B,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QACzB,OAAO,QAAQ,CAAC;IACpB,CAAC;IAED,QAAQ,OAAO,CAAC,IAAI,EAAE,CAAC;QACnB,KAAK,MAAM;YACP,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,MAAM,CAAC;QACxF,KAAK,QAAQ;YACT,OAAO,mBAAmB,CAAC;QAC/B,KAAK,QAAQ;YACT,IAAI,OAAO,CAAC,OAAO,CAAC,UAAU,KAAK,MAAM,EAAE,CAAC;gBACxC,OAAO,YAAY,CAAC;YACxB,CAAC;YACD,IACI,OAAO,CAAC,OAAO,CAAC,SAAS,KAAK,CAAC;gBAC/B,CAAC,OAAO,CAAC,OAAO,CAAC,UAAU,KAAK,MAAM;oBAClC,OAAO,CAAC,OAAO,CAAC,UAAU,KAAK,MAAM;oBACrC,OAAO,CAAC,OAAO,CAAC,UAAU,KAAK,QAAQ,CAAC,EAC9C,CAAC;gBACC,OAAO,QAAQ,CAAC;YACpB,CAAC;YACD,OAAO,wBAAwB,CAAC;QACpC,KAAK,KAAK;YACN,OAAO,KAAK,CAAC;IACrB,CAAC;AACL,CAAC"}

package/dist/components/ControlFrame.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+import type { ControlFrameClassNames } from '../types';
+export type ControlFrameProps = Readonly<{
+    label?: ReactNode;
+    readout?: ReactNode;
+    disabled?: boolean;
+    className?: string | undefined;
+    classNames?: ControlFrameClassNames | undefined;
+    children?: ReactNode;
+}>;
+export declare function ControlFrame({ label, readout, disabled, className, classNames, children }: ControlFrameProps): import("react").JSX.Element;
+//# sourceMappingURL=ControlFrame.d.ts.map

package/dist/components/ControlFrame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlFrame.d.ts","sourceRoot":"","sources":["../../src/components/ControlFrame.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAGvD,MAAM,MAAM,iBAAiB,GAAG,QAAQ,CAAC;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,sBAAsB,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,EAAE,SAAS,CAAC;CACxB,CAAC,CAAC;AAEH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAgB,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,iBAAiB,+BAYpH"}

package/dist/components/ControlFrame.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils.js';
+export function ControlFrame({ label, readout, disabled = false, className, classNames, children }) {
+    return (_jsxs("div", { className: cx('vdsp-control-ui-frame', disabled && 'is-disabled', classNames?.frame, className), children: [label === undefined ? null : (_jsx("span", { className: cx('vdsp-control-ui-label', classNames?.label), children: label })), children, readout === undefined ? null : (_jsx("span", { className: cx('vdsp-control-ui-readout', classNames?.readout), children: readout }))] }));
+}
+//# sourceMappingURL=ControlFrame.js.map

package/dist/components/ControlFrame.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlFrame.js","sourceRoot":"","sources":["../../src/components/ControlFrame.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC;AAW9B,MAAM,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,GAAG,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAqB;IACjH,OAAO,CACH,eAAK,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,QAAQ,IAAI,aAAa,EAAE,UAAU,EAAE,KAAK,EAAE,SAAS,CAAC,aAC/F,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,eAAM,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,UAAU,EAAE,KAAK,CAAC,YAAG,KAAK,GAAQ,CAClF,EACA,QAAQ,EACR,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC5B,eAAM,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,UAAU,EAAE,OAAO,CAAC,YAAG,OAAO,GAAQ,CACxF,IACC,CACT,CAAC;AACN,CAAC"}

package/dist/components/DetentedRotarySelect.d.ts

@@ -0,0 +1,13 @@
+import type { Knob } from '@vessel-dsp/core';
+import type { ControlFrameClassNames } from '../types';
+export type DetentedRotarySelectProps = Readonly<{
+    control: Knob;
+    position: number;
+    disabled?: boolean;
+    label?: string;
+    className?: string | undefined;
+    classNames?: ControlFrameClassNames | undefined;
+    onPositionChange?: ((position: number) => void) | undefined;
+}>;
+export declare function DetentedRotarySelect({ control, position, disabled, label, className, classNames, onPositionChange, }: DetentedRotarySelectProps): import("react").JSX.Element;
+//# sourceMappingURL=DetentedRotarySelect.d.ts.map

package/dist/components/DetentedRotarySelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetentedRotarySelect.d.ts","sourceRoot":"","sources":["../../src/components/DetentedRotarySelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAE7C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAIvD,MAAM,MAAM,yBAAyB,GAAG,QAAQ,CAAC;IAC7C,OAAO,EAAE,IAAI,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,sBAAsB,GAAG,SAAS,CAAC;IAChD,gBAAgB,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC/D,CAAC,CAAC;AAEH,wBAAgB,oBAAoB,CAAC,EACjC,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,KAAoB,EACpB,SAAS,EACT,UAAU,EACV,gBAAgB,GACnB,EAAE,yBAAyB,+BAyB3B"}

package/dist/components/DetentedRotarySelect.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { nearestKnobStep } from '@vessel-dsp/core';
+import { cx } from '../utils.js';
+import { ControlFrame } from './ControlFrame.js';
+export function DetentedRotarySelect({ control, position, disabled = false, label = control.name, className, classNames, onPositionChange, }) {
+    const steps = control.steps ?? [
+        { index: 0, position: 0, label: 'Position 1' },
+        { index: 1, position: 1, label: 'Position 2' },
+    ];
+    const selected = nearestKnobStep(steps, position)?.position ?? position;
+    return (_jsx(ControlFrame, { label: label, disabled: disabled, className: className, classNames: classNames, children: _jsx("select", { className: cx('vdsp-control-ui-control', 'vdsp-control-ui-select', classNames?.control), value: String(selected), "aria-label": control.name, disabled: disabled, "data-vdsp-control-id": control.id, onChange: (event) => onPositionChange?.(Number(event.currentTarget.value)), children: steps.map((step) => (_jsx("option", { value: String(step.position), children: step.label ?? `Position ${step.index + 1}` }, step.index))) }) }));
+}
+//# sourceMappingURL=DetentedRotarySelect.js.map

package/dist/components/DetentedRotarySelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DetentedRotarySelect.js","sourceRoot":"","sources":["../../src/components/DetentedRotarySelect.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAY9C,MAAM,UAAU,oBAAoB,CAAC,EACjC,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,OAAO,CAAC,IAAI,EACpB,SAAS,EACT,UAAU,EACV,gBAAgB,GACQ;IACxB,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,IAAI;QAC3B,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE;QAC9C,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE;KACjD,CAAC;IACF,MAAM,QAAQ,GAAG,eAAe,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE,QAAQ,IAAI,QAAQ,CAAC;IAExE,OAAO,CACH,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,YACxF,iBACI,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,wBAAwB,EAAE,UAAU,EAAE,OAAO,CAAC,EACvF,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC,gBACX,OAAO,CAAC,IAAI,EACxB,QAAQ,EAAE,QAAQ,0BACI,OAAO,CAAC,EAAE,EAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,YAEzE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACjB,iBAAyB,KAAK,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,YAChD,IAAI,CAAC,KAAK,IAAI,YAAY,IAAI,CAAC,KAAK,GAAG,CAAC,EAAE,IADlC,IAAI,CAAC,KAAK,CAEd,CACZ,CAAC,GACG,GACE,CAClB,CAAC;AACN,CAAC"}

package/dist/components/FootswitchButton.d.ts

@@ -0,0 +1,15 @@
+import type { SwitchControl } from '@vessel-dsp/core';
+import type { ControlFrameClassNames } from '../types';
+export type FootswitchButtonProps = Readonly<{
+    control?: SwitchControl;
+    label?: string;
+    pressed: boolean;
+    disabled?: boolean;
+    className?: string | undefined;
+    classNames?: ControlFrameClassNames | undefined;
+    onPressedChange?: ((pressed: boolean) => void) | undefined;
+    onPress?: (() => void) | undefined;
+    onRelease?: (() => void) | undefined;
+}>;
+export declare function FootswitchButton({ control, label, pressed, disabled, className, classNames, onPressedChange, onPress, onRelease, }: FootswitchButtonProps): import("react").JSX.Element;
+//# sourceMappingURL=FootswitchButton.d.ts.map

package/dist/components/FootswitchButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FootswitchButton.d.ts","sourceRoot":"","sources":["../../src/components/FootswitchButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEtD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAIvD,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC;IACzC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,sBAAsB,GAAG,SAAS,CAAC;IAChD,eAAe,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC3D,OAAO,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IACnC,SAAS,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACxC,CAAC,CAAC;AAEH,wBAAgB,gBAAgB,CAAC,EAC7B,OAAO,EACP,KAAqC,EACrC,OAAO,EACP,QAAgB,EAChB,SAAS,EACT,UAAU,EACV,eAAe,EACf,OAAO,EACP,SAAS,GACZ,EAAE,qBAAqB,+BA0DvB"}

package/dist/components/FootswitchButton.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { cx } from '../utils.js';
+import { ControlFrame } from './ControlFrame.js';
+export function FootswitchButton({ control, label = control?.name ?? 'Footswitch', pressed, disabled = false, className, classNames, onPressedChange, onPress, onRelease, }) {
+    const [isPressing, setIsPressing] = useState(false);
+    function handleClick() {
+        if (!disabled) {
+            onPressedChange?.(!pressed);
+        }
+    }
+    function handlePress() {
+        if (!disabled) {
+            setIsPressing(true);
+            onPress?.();
+        }
+    }
+    function handleRelease() {
+        if (!disabled) {
+            setIsPressing(false);
+            onRelease?.();
+        }
+    }
+    return (_jsx(ControlFrame, { label: label, disabled: disabled, className: className, classNames: classNames, children: _jsx("button", { type: "button", className: cx('vdsp-control-ui-control', 'vdsp-control-ui-footswitch', isPressing && 'is-pressing', classNames?.control), "aria-label": label, "aria-pressed": pressed, disabled: disabled, "data-vdsp-control-id": control?.id, onClick: handleClick, onPointerDown: handlePress, onPointerUp: handleRelease, onPointerCancel: handleRelease, onKeyDown: (event) => {
+                if (event.key === ' ' || event.key === 'Enter') {
+                    event.preventDefault();
+                    handlePress();
+                }
+            }, onKeyUp: (event) => {
+                if (event.key === ' ' || event.key === 'Enter') {
+                    event.preventDefault();
+                    handleRelease();
+                }
+            }, children: _jsx("span", { className: "vdsp-control-ui-footswitch__cap" }) }) }));
+}
+//# sourceMappingURL=FootswitchButton.js.map

package/dist/components/FootswitchButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FootswitchButton.js","sourceRoot":"","sources":["../../src/components/FootswitchButton.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAc9C,MAAM,UAAU,gBAAgB,CAAC,EAC7B,OAAO,EACP,KAAK,GAAG,OAAO,EAAE,IAAI,IAAI,YAAY,EACrC,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,UAAU,EACV,eAAe,EACf,OAAO,EACP,SAAS,GACW;IACpB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,SAAS,WAAW;QAChB,IAAI,CAAC,QAAQ,EAAE,CAAC;YACZ,eAAe,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;QAChC,CAAC;IACL,CAAC;IAED,SAAS,WAAW;QAChB,IAAI,CAAC,QAAQ,EAAE,CAAC;YACZ,aAAa,CAAC,IAAI,CAAC,CAAC;YACpB,OAAO,EAAE,EAAE,CAAC;QAChB,CAAC;IACL,CAAC;IAED,SAAS,aAAa;QAClB,IAAI,CAAC,QAAQ,EAAE,CAAC;YACZ,aAAa,CAAC,KAAK,CAAC,CAAC;YACrB,SAAS,EAAE,EAAE,CAAC;QAClB,CAAC;IACL,CAAC;IAED,OAAO,CACH,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,YACxF,iBACI,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,EAAE,CACT,yBAAyB,EACzB,4BAA4B,EAC5B,UAAU,IAAI,aAAa,EAC3B,UAAU,EAAE,OAAO,CACtB,gBACW,KAAK,kBACH,OAAO,EACrB,QAAQ,EAAE,QAAQ,0BACI,OAAO,EAAE,EAAE,EACjC,OAAO,EAAE,WAAW,EACpB,aAAa,EAAE,WAAW,EAC1B,WAAW,EAAE,aAAa,EAC1B,eAAe,EAAE,aAAa,EAC9B,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE;gBACjB,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;oBAC7C,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,WAAW,EAAE,CAAC;gBAClB,CAAC;YACL,CAAC,EACD,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;gBACf,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;oBAC7C,KAAK,CAAC,cAAc,EAAE,CAAC;oBACvB,aAAa,EAAE,CAAC;gBACpB,CAAC;YACL,CAAC,YAED,eAAM,SAAS,EAAC,iCAAiC,GAAG,GAC/C,GACE,CAClB,CAAC;AACN,CAAC"}

package/dist/components/GraphicEqSlider.d.ts

@@ -0,0 +1,13 @@
+import type { SliderControl } from "@vessel-dsp/core";
+import type { ControlFrameClassNames } from "../types";
+export type GraphicEqSliderProps = Readonly<{
+    control: SliderControl;
+    position: number;
+    disabled?: boolean;
+    label?: string;
+    className?: string | undefined;
+    classNames?: ControlFrameClassNames | undefined;
+    onPositionChange?: ((position: number) => void) | undefined;
+}>;
+export declare function GraphicEqSlider({ control, position, disabled, label, className, classNames, onPositionChange, }: GraphicEqSliderProps): import("react").JSX.Element;
+//# sourceMappingURL=GraphicEqSlider.d.ts.map

package/dist/components/GraphicEqSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphicEqSlider.d.ts","sourceRoot":"","sources":["../../src/components/GraphicEqSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAGtD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAIvD,MAAM,MAAM,oBAAoB,GAAG,QAAQ,CAAC;IAC3C,OAAO,EAAE,aAAa,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,sBAAsB,GAAG,SAAS,CAAC;IAChD,gBAAgB,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC5D,CAAC,CAAC;AAEH,wBAAgB,eAAe,CAAC,EAC/B,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,KAAoB,EACpB,SAAS,EACT,UAAU,EACV,gBAAgB,GAChB,EAAE,oBAAoB,+BAgDtB"}

package/dist/components/GraphicEqSlider.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { formatControlValue } from "../controls.js";
+import { cx } from "../utils.js";
+import { ControlFrame } from "./ControlFrame.js";
+export function GraphicEqSlider({ control, position, disabled = false, label = control.name, className, classNames, onPositionChange, }) {
+    const readout = formatControlValue({ kind: "slider", control }, { kind: "slider", position });
+    const sliderPosition = Math.round(position * 100);
+    const sliderStyle = {
+        "--vdsp-control-ui-slider-position": `${sliderPosition}%`,
+    };
+    return (_jsx(ControlFrame, { label: label, readout: readout, disabled: disabled, className: className, classNames: classNames, children: _jsx("div", { className: cx("vdsp-control-ui-slider-shell", control.orientation === "vertical" && "is-vertical"), "data-orientation": control.orientation, children: _jsx("input", { className: cx("vdsp-control-ui-control", "vdsp-control-ui-slider", classNames?.control), type: "range", min: 0, max: 100, step: 1, value: sliderPosition, style: sliderStyle, "aria-label": control.name, disabled: disabled, "data-vdsp-control-id": control.id, "data-orientation": control.orientation, onChange: (event) => onPositionChange?.(Number(event.currentTarget.value) / 100) }) }) }));
+}
+//# sourceMappingURL=GraphicEqSlider.js.map

package/dist/components/GraphicEqSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GraphicEqSlider.js","sourceRoot":"","sources":["../../src/components/GraphicEqSlider.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEjD,OAAO,EAAE,EAAE,EAAE,MAAM,UAAU,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAY9C,MAAM,UAAU,eAAe,CAAC,EAC/B,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,KAAK,GAAG,OAAO,CAAC,IAAI,EACpB,SAAS,EACT,UAAU,EACV,gBAAgB,GACM;IACtB,MAAM,OAAO,GAAG,kBAAkB,CACjC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,EAC3B,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAC5B,CAAC;IACF,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,GAAG,CAAC,CAAC;IAClD,MAAM,WAAW,GAAG;QACnB,mCAAmC,EAAE,GAAG,cAAc,GAAG;KACc,CAAC;IAEzE,OAAO,CACN,KAAC,YAAY,IACZ,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,UAAU,EAAE,UAAU,YAEtB,cACC,SAAS,EAAE,EAAE,CACZ,8BAA8B,EAC9B,OAAO,CAAC,WAAW,KAAK,UAAU,IAAI,aAAa,CACnD,sBACiB,OAAO,CAAC,WAAW,YAErC,gBACC,SAAS,EAAE,EAAE,CACZ,yBAAyB,EACzB,wBAAwB,EACxB,UAAU,EAAE,OAAO,CACnB,EACD,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,CAAC,EACP,KAAK,EAAE,cAAc,EACrB,KAAK,EAAE,WAAW,gBACN,OAAO,CAAC,IAAI,EACxB,QAAQ,EAAE,QAAQ,0BACI,OAAO,CAAC,EAAE,sBACd,OAAO,CAAC,WAAW,EACrC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CACnB,gBAAgB,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,GAAG,CAAC,GAE3D,GACG,GACQ,CACf,CAAC;AACH,CAAC"}

package/dist/components/KnobControl.d.ts

@@ -0,0 +1,13 @@
+import type { Knob } from '@vessel-dsp/core';
+import type { ControlFrameClassNames } from '../types';
+export type KnobControlProps = Readonly<{
+    control: Knob;
+    position: number;
+    disabled?: boolean;
+    label?: string;
+    className?: string | undefined;
+    classNames?: ControlFrameClassNames | undefined;
+    onPositionChange?: ((position: number) => void) | undefined;
+}>;
+export declare function KnobControl({ control, position, disabled, label, className, classNames, onPositionChange, }: KnobControlProps): import("react").JSX.Element;
+//# sourceMappingURL=KnobControl.d.ts.map

package/dist/components/KnobControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KnobControl.d.ts","sourceRoot":"","sources":["../../src/components/KnobControl.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAG7C,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAmBvD,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACpC,OAAO,EAAE,IAAI,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,sBAAsB,GAAG,SAAS,CAAC;IAChD,gBAAgB,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC/D,CAAC,CAAC;AAEH,wBAAgB,WAAW,CAAC,EACxB,OAAO,EACP,QAAQ,EACR,QAAgB,EAChB,KAAoB,EACpB,SAAS,EACT,UAAU,EACV,gBAAgB,GACnB,EAAE,gBAAgB,+BA6LlB"}