@vessel-dsp/control-ui 0.6.4

package/dist/state.js

@@ -0,0 +1,33 @@
+import { applyControlMessage, defaultControlState, validateMessage } from '@vessel-dsp/core';
+import { findPanelControl, valueForControl } from './controls.js';
+export function createControlUiState(panel) {
+    return defaultControlState(panel);
+}
+export function applyControlUiMessage(panel, state, message) {
+    const validationError = validateMessage(panel, message);
+    if (validationError !== null) {
+        throw new Error(validationError);
+    }
+    return applyControlMessage(state, message);
+}
+export function controlMessageForValue(panel, controlId, value, requestId) {
+    const control = findPanelControl(panel, controlId);
+    if (control === undefined) {
+        throw new Error(`unknown control id "${controlId}"`);
+    }
+    if (control.kind === 'led') {
+        throw new Error(`LED control "${controlId}" is read-only in control-ui`);
+    }
+    const message = {
+        type: 'control/set',
+        controlId,
+        value: valueForControl(control, value),
+        ...(requestId === undefined ? {} : { requestId }),
+    };
+    const validationError = validateMessage(panel, message);
+    if (validationError !== null) {
+        throw new Error(validationError);
+    }
+    return message;
+}
+//# sourceMappingURL=state.js.map

package/dist/state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"state.js","sourceRoot":"","sources":["../src/state.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAC7F,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE/D,MAAM,UAAU,oBAAoB,CAAC,KAAY;IAC7C,OAAO,mBAAmB,CAAC,KAAK,CAAC,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,KAAY,EAAE,KAAmB,EAAE,OAAqB;IAC1F,MAAM,eAAe,GAAG,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IACxD,IAAI,eAAe,KAAK,IAAI,EAAE,CAAC;QAC3B,MAAM,IAAI,KAAK,CAAC,eAAe,CAAC,CAAC;IACrC,CAAC;IACD,OAAO,mBAAmB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AAC/C,CAAC;AAED,MAAM,UAAU,sBAAsB,CAClC,KAAY,EACZ,SAAiB,EACjB,KAAsC,EACtC,SAAkB;IAElB,MAAM,OAAO,GAAG,gBAAgB,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC;IACnD,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QACxB,MAAM,IAAI,KAAK,CAAC,uBAAuB,SAAS,GAAG,CAAC,CAAC;IACzD,CAAC;IACD,IAAI,OAAO,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;QACzB,MAAM,IAAI,KAAK,CAAC,gBAAgB,SAAS,8BAA8B,CAAC,CAAC;IAC7E,CAAC;IAED,MAAM,OAAO,GAAiB;QAC1B,IAAI,EAAE,aAAa;QACnB,SAAS;QACT,KAAK,EAAE,eAAe,CAAC,OAAO,EAAE,KAAK,CAAC;QACtC,GAAG,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,CAAC;KACpD,CAAC;IACF,MAAM,eAAe,GAAG,eAAe,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;IACxD,IAAI,eAAe,KAAK,IAAI,EAAE,CAAC;QAC3B,MAAM,IAAI,KAAK,CAAC,eAAe,CAAC,CAAC;IACrC,CAAC;IACD,OAAO,OAAO,CAAC;AACnB,CAAC"}

package/dist/styles.css

@@ -0,0 +1,333 @@
+:where(.vdsp-control-ui-theme, .vdsp-control-ui-surface) {
+    --vdsp-control-ui-accent-color: #f97316;
+    --vdsp-control-ui-background-color: #f8fafc;
+    --vdsp-control-ui-border-color: #94a3b8;
+    --vdsp-control-ui-control-color: #111827;
+    --vdsp-control-ui-text-color: #111827;
+    --vdsp-control-ui-muted-text-color: #64748b;
+    --vdsp-control-ui-focus-ring-color: #f59e0b;
+    color: var(--vdsp-control-ui-text-color);
+}
+
+.vdsp-control-ui-theme {
+    display: contents;
+}
+
+.vdsp-control-ui-surface {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
+    gap: 12px;
+    align-items: start;
+    max-width: 100%;
+}
+
+.vdsp-control-ui-surface__item {
+    min-width: 0;
+}
+
+.vdsp-control-ui-frame {
+    display: grid;
+    justify-items: center;
+    align-content: start;
+    gap: 6px;
+    min-width: 0;
+    color: var(--vdsp-control-ui-text-color);
+}
+
+.vdsp-control-ui-label,
+.vdsp-control-ui-readout {
+    max-width: 100%;
+    overflow-wrap: anywhere;
+    text-align: center;
+    line-height: 1.2;
+}
+
+.vdsp-control-ui-label {
+    color: color-mix(in srgb, var(--vdsp-control-ui-text-color) 72%, white);
+    font-size: 0.78rem;
+    font-weight: 650;
+}
+
+.vdsp-control-ui-readout {
+    color: var(--vdsp-control-ui-muted-text-color);
+    font-size: 0.72rem;
+}
+
+.vdsp-control-ui-control {
+    box-sizing: border-box;
+    font: inherit;
+    color: var(--vdsp-control-ui-text-color);
+}
+
+.vdsp-control-ui-control:focus-visible {
+    outline: 2px solid var(--vdsp-control-ui-focus-ring-color);
+    outline-offset: 3px;
+}
+
+.vdsp-control-ui-frame.is-disabled {
+    opacity: 0.55;
+}
+
+.vdsp-control-ui-knob {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: 64px;
+    height: 64px;
+    aspect-ratio: 1;
+    border: 0;
+    border-radius: 50%;
+    background: transparent;
+    padding: 0;
+    cursor: ew-resize;
+    touch-action: none;
+    user-select: none;
+}
+
+.vdsp-control-ui-knob:active {
+    cursor: ew-resize;
+}
+
+.vdsp-control-ui-knob.is-dragging {
+    cursor: ew-resize;
+}
+
+.vdsp-control-ui-is-knob-dragging,
+.vdsp-control-ui-is-knob-dragging * {
+    cursor: ew-resize !important;
+}
+
+.vdsp-control-ui-knob:disabled {
+    cursor: not-allowed;
+}
+
+.vdsp-control-ui-knob__progress,
+.vdsp-control-ui-knob__progress-fill {
+    position: absolute;
+    inset: 0;
+    border-radius: 50%;
+    pointer-events: none;
+    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
+    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
+}
+
+.vdsp-control-ui-knob__progress {
+    background: conic-gradient(
+        from -150deg,
+        var(--vdsp-control-ui-border-color) 0 var(--vdsp-control-ui-knob-sweep, 300deg),
+        transparent var(--vdsp-control-ui-knob-sweep, 300deg) 360deg
+    );
+}
+
+.vdsp-control-ui-knob__progress-fill {
+    background: conic-gradient(
+        from -150deg,
+        var(--vdsp-control-ui-accent-color) 0 var(--vdsp-control-ui-knob-progress, 0deg),
+        transparent var(--vdsp-control-ui-knob-progress, 0deg) 360deg
+    );
+}
+
+.vdsp-control-ui-knob__body {
+    position: absolute;
+    inset: 7px;
+    border: 1px solid color-mix(in srgb, var(--vdsp-control-ui-control-color) 72%, white);
+    border-radius: 50%;
+    background: var(--vdsp-control-ui-control-color);
+    box-shadow: inset 0 1px 2px rgb(255 255 255 / 0.18), 0 2px 5px rgb(0 0 0 / 0.2);
+    pointer-events: none;
+}
+
+.vdsp-control-ui-knob__indicator-line {
+    position: absolute;
+    left: 50%;
+    top: 6px;
+    width: 2px;
+    height: 18px;
+    border-radius: 999px;
+    background: var(--vdsp-control-ui-background-color);
+    box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08);
+    transform: translateX(-50%) rotate(var(--vdsp-control-ui-knob-rotation, 0deg));
+    transform-origin: 50% 19px;
+}
+
+.vdsp-control-ui-footswitch {
+    width: 58px;
+    height: 58px;
+    aspect-ratio: 1;
+    border: 1px solid var(--vdsp-control-ui-border-color);
+    border-radius: 50%;
+    background: var(--vdsp-control-ui-control-color);
+    box-shadow: none;
+    cursor: pointer;
+}
+
+.vdsp-control-ui-footswitch.is-pressing,
+.vdsp-control-ui-footswitch:active {
+    border-width: 3px;
+}
+
+.vdsp-control-ui-footswitch__cap {
+    display: none;
+    width: 28px;
+    height: 28px;
+    margin: auto;
+    border-radius: 50%;
+    background: #f8fafc;
+}
+
+.vdsp-control-ui-toggle {
+    display: inline-flex;
+    align-items: center;
+    width: 52px;
+    height: 30px;
+    border: 1px solid var(--vdsp-control-ui-border-color);
+    border-radius: 999px;
+    background: var(--vdsp-control-ui-control-color);
+    box-shadow: none;
+    padding: 3px;
+    cursor: pointer;
+}
+
+.vdsp-control-ui-toggle.is-checked {
+    background: var(--vdsp-control-ui-accent-color);
+}
+
+.vdsp-control-ui-toggle__track {
+    display: block;
+    width: 100%;
+}
+
+.vdsp-control-ui-toggle__thumb {
+    display: block;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: var(--vdsp-control-ui-background-color);
+    box-shadow: none;
+    transition: transform 120ms ease;
+}
+
+.vdsp-control-ui-toggle.is-checked .vdsp-control-ui-toggle__thumb {
+    transform: translateX(20px);
+}
+
+.vdsp-control-ui-slider-shell {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: 100%;
+    min-height: 32px;
+}
+
+.vdsp-control-ui-slider-shell.is-vertical {
+    min-height: 112px;
+}
+
+.vdsp-control-ui-slider {
+    --vdsp-control-ui-slider-position: 50%;
+    width: min(132px, 100%);
+    accent-color: var(--vdsp-control-ui-accent-color);
+    background: transparent;
+    -webkit-appearance: none;
+    appearance: none;
+}
+
+.vdsp-control-ui-slider[data-orientation="vertical"] {
+    width: 112px;
+    transform: rotate(-90deg);
+}
+
+.vdsp-control-ui-slider::-webkit-slider-runnable-track {
+    height: 4px;
+    border: 0;
+    border-radius: 999px;
+    background: linear-gradient(
+        90deg,
+        var(--vdsp-control-ui-accent-color) 0 var(--vdsp-control-ui-slider-position),
+        color-mix(in srgb, var(--vdsp-control-ui-control-color) 52%, white)
+            var(--vdsp-control-ui-slider-position) 100%
+    );
+    box-shadow: none;
+    -webkit-appearance: none;
+}
+
+.vdsp-control-ui-slider::-webkit-slider-thumb {
+    width: 14px;
+    height: 14px;
+    margin-top: -5px;
+    border: 0;
+    border-radius: 50%;
+    background: var(--vdsp-control-ui-accent-color);
+    box-shadow: none;
+    -webkit-appearance: none;
+}
+
+.vdsp-control-ui-slider::-moz-range-track {
+    height: 4px;
+    border: 0;
+    border-radius: 999px;
+    background: linear-gradient(
+        90deg,
+        var(--vdsp-control-ui-accent-color) 0 var(--vdsp-control-ui-slider-position),
+        color-mix(in srgb, var(--vdsp-control-ui-control-color) 52%, white)
+            var(--vdsp-control-ui-slider-position) 100%
+    );
+    box-shadow: none;
+}
+
+.vdsp-control-ui-slider::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    border: 0;
+    border-radius: 50%;
+    background: var(--vdsp-control-ui-accent-color);
+    box-shadow: none;
+}
+
+.vdsp-control-ui-select {
+    width: min(100%, 144px);
+    min-height: 34px;
+    border: 1px solid var(--vdsp-control-ui-border-color);
+    border-radius: 0;
+    background-color: var(--vdsp-control-ui-control-color);
+    background-image:
+        linear-gradient(45deg, transparent 50%, currentColor 50%),
+        linear-gradient(135deg, currentColor 50%, transparent 50%);
+    background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
+    background-repeat: no-repeat;
+    background-size: 5px 5px, 5px 5px;
+    box-shadow: none;
+    color: var(--vdsp-control-ui-background-color);
+    padding: 4px 28px 4px 8px;
+    appearance: none;
+    cursor: pointer;
+}
+
+.vdsp-control-ui-select option {
+    background-color: var(--vdsp-control-ui-control-color);
+    color: var(--vdsp-control-ui-background-color);
+}
+
+.vdsp-control-ui-led {
+    width: 22px;
+    height: 22px;
+    aspect-ratio: 1;
+    border: 1px solid color-mix(in srgb, var(--vdsp-control-ui-border-color) 70%, black);
+    border-radius: 50%;
+    background: #7f1d1d;
+    box-shadow: inset 0 1px 4px rgb(0 0 0 / 0.45);
+}
+
+.vdsp-control-ui-led.is-on {
+    background: color-mix(
+        in srgb,
+        var(--vdsp-control-ui-accent-color) calc(var(--vdsp-control-ui-led-intensity, 1) * 100%),
+        #7f1d1d
+    );
+    box-shadow: 0 0 14px color-mix(in srgb, var(--vdsp-control-ui-accent-color) 70%, transparent);
+}
+
+.vdsp-control-ui-control:disabled,
+.vdsp-control-ui-surface.is-disabled .vdsp-control-ui-control {
+    cursor: not-allowed;
+}

package/dist/theme.d.ts

@@ -0,0 +1,14 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { ControlUiTheme } from './types';
+type ThemeStyle = CSSProperties & Record<`--vdsp-control-ui-${string}`, string | number | undefined>;
+export type ControlUiThemeProviderProps = Readonly<{
+    theme: ControlUiTheme;
+    className?: string | undefined;
+    style?: CSSProperties | undefined;
+    children: ReactNode;
+}>;
+export declare function ControlUiThemeProvider({ theme, className, style, children }: ControlUiThemeProviderProps): import("react").JSX.Element;
+export declare function useControlUiTheme(): ControlUiTheme;
+export declare function themeToCssVariables(theme: ControlUiTheme): ThemeStyle;
+export {};
+//# sourceMappingURL=theme.d.ts.map

package/dist/theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9C,KAAK,UAAU,GAAG,aAAa,GAAG,MAAM,CAAC,qBAAqB,MAAM,EAAE,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAIrG,MAAM,MAAM,2BAA2B,GAAG,QAAQ,CAAC;IAC/C,KAAK,EAAE,cAAc,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAClC,QAAQ,EAAE,SAAS,CAAC;CACvB,CAAC,CAAC;AAEH,wBAAgB,sBAAsB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,2BAA2B,+BAaxG;AAED,wBAAgB,iBAAiB,IAAI,cAAc,CAElD;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,GAAG,UAAU,CAcrE"}

package/dist/theme.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+import { cx } from './utils.js';
+const ControlUiThemeContext = createContext({});
+export function ControlUiThemeProvider({ theme, className, style, children }) {
+    const themeStyle = {
+        ...style,
+        ...themeToCssVariables(theme),
+    };
+    return (_jsx(ControlUiThemeContext.Provider, { value: theme, children: _jsx("div", { className: cx('vdsp-control-ui-theme', className), style: themeStyle, children: children }) }));
+}
+export function useControlUiTheme() {
+    return useContext(ControlUiThemeContext);
+}
+export function themeToCssVariables(theme) {
+    return {
+        ...(theme.accentColor === undefined ? {} : { '--vdsp-control-ui-accent-color': theme.accentColor }),
+        ...(theme.backgroundColor === undefined
+            ? {}
+            : { '--vdsp-control-ui-background-color': theme.backgroundColor }),
+        ...(theme.borderColor === undefined ? {} : { '--vdsp-control-ui-border-color': theme.borderColor }),
+        ...(theme.controlColor === undefined ? {} : { '--vdsp-control-ui-control-color': theme.controlColor }),
+        ...(theme.textColor === undefined ? {} : { '--vdsp-control-ui-text-color': theme.textColor }),
+        ...(theme.mutedTextColor === undefined ? {} : { '--vdsp-control-ui-muted-text-color': theme.mutedTextColor }),
+        ...(theme.focusRingColor === undefined
+            ? {}
+            : { '--vdsp-control-ui-focus-ring-color': theme.focusRingColor }),
+    };
+}
+//# sourceMappingURL=theme.js.map

package/dist/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC;AAI7B,MAAM,qBAAqB,GAAG,aAAa,CAAiB,EAAE,CAAC,CAAC;AAShE,MAAM,UAAU,sBAAsB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAA+B;IACrG,MAAM,UAAU,GAAe;QAC3B,GAAG,KAAK;QACR,GAAG,mBAAmB,CAAC,KAAK,CAAC;KAChC,CAAC;IAEF,OAAO,CACH,KAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACxC,cAAK,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,UAAU,YACpE,QAAQ,GACP,GACuB,CACpC,CAAC;AACN,CAAC;AAED,MAAM,UAAU,iBAAiB;IAC7B,OAAO,UAAU,CAAC,qBAAqB,CAAC,CAAC;AAC7C,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,KAAqB;IACrD,OAAO;QACH,GAAG,CAAC,KAAK,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,gCAAgC,EAAE,KAAK,CAAC,WAAW,EAAE,CAAC;QACnG,GAAG,CAAC,KAAK,CAAC,eAAe,KAAK,SAAS;YACnC,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,EAAE,oCAAoC,EAAE,KAAK,CAAC,eAAe,EAAE,CAAC;QACtE,GAAG,CAAC,KAAK,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,gCAAgC,EAAE,KAAK,CAAC,WAAW,EAAE,CAAC;QACnG,GAAG,CAAC,KAAK,CAAC,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,iCAAiC,EAAE,KAAK,CAAC,YAAY,EAAE,CAAC;QACtG,GAAG,CAAC,KAAK,CAAC,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,8BAA8B,EAAE,KAAK,CAAC,SAAS,EAAE,CAAC;QAC7F,GAAG,CAAC,KAAK,CAAC,cAAc,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,oCAAoC,EAAE,KAAK,CAAC,cAAc,EAAE,CAAC;QAC7G,GAAG,CAAC,KAAK,CAAC,cAAc,KAAK,SAAS;YAClC,CAAC,CAAC,EAAE;YACJ,CAAC,CAAC,EAAE,oCAAoC,EAAE,KAAK,CAAC,cAAc,EAAE,CAAC;KACxE,CAAC;AACN,CAAC"}

package/dist/types.d.ts

@@ -0,0 +1,43 @@
+import type { Knob, LedIndicator, SliderControl, SwitchControl } from '@vessel-dsp/core';
+export type ControlAppearance = 'knob' | 'detented-rotary-select' | 'footswitch' | 'toggle' | 'graphic-eq-slider' | 'slider' | 'led' | 'hidden';
+export type ControlAppearanceMap = Partial<Record<string, ControlAppearance>>;
+export type ControlUiControlRef = Readonly<{
+    kind: 'knob';
+    control: Knob;
+}> | Readonly<{
+    kind: 'slider';
+    control: SliderControl;
+}> | Readonly<{
+    kind: 'switch';
+    control: SwitchControl;
+}> | Readonly<{
+    kind: 'led';
+    control: LedIndicator;
+}>;
+export type ControlUiTheme = Readonly<{
+    accentColor?: string | undefined;
+    backgroundColor?: string | undefined;
+    borderColor?: string | undefined;
+    controlColor?: string | undefined;
+    textColor?: string | undefined;
+    mutedTextColor?: string | undefined;
+    focusRingColor?: string | undefined;
+}>;
+export type ControlFrameClassNames = Readonly<{
+    frame?: string | undefined;
+    label?: string | undefined;
+    readout?: string | undefined;
+    control?: string | undefined;
+}>;
+export type ControlSurfaceClassNames = ControlFrameClassNames & Readonly<{
+    root?: string | undefined;
+    face?: string | undefined;
+    item?: string | undefined;
+    knob?: string | undefined;
+    footswitch?: string | undefined;
+    toggle?: string | undefined;
+    slider?: string | undefined;
+    select?: string | undefined;
+    led?: string | undefined;
+}>;
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACR,IAAI,EACJ,YAAY,EACZ,aAAa,EACb,aAAa,EAChB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,MAAM,iBAAiB,GACvB,MAAM,GACN,wBAAwB,GACxB,YAAY,GACZ,QAAQ,GACR,mBAAmB,GACnB,QAAQ,GACR,KAAK,GACL,QAAQ,CAAC;AAEf,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,CAAC,CAAC;AAE9E,MAAM,MAAM,mBAAmB,GACzB,QAAQ,CAAC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,IAAI,CAAA;CAAE,CAAC,GACzC,QAAQ,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,OAAO,EAAE,aAAa,CAAA;CAAE,CAAC,GACpD,QAAQ,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAC;IAAC,OAAO,EAAE,aAAa,CAAA;CAAE,CAAC,GACpD,QAAQ,CAAC;IAAE,IAAI,EAAE,KAAK,CAAC;IAAC,OAAO,EAAE,YAAY,CAAA;CAAE,CAAC,CAAC;AAEvD,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;IAClC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,eAAe,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACrC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACvC,CAAC,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAChC,CAAC,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,sBAAsB,GAAG,QAAQ,CAAC;IACrE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CAC5B,CAAC,CAAC"}

package/dist/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/dist/useControlState.d.ts

@@ -0,0 +1,13 @@
+import type { ControlState, ControlValue, Panel, PanelMessage } from '@vessel-dsp/core';
+export type UseControlStateOptions = Readonly<{
+    initialState?: ControlState | undefined;
+    onMessage?: ((message: PanelMessage) => void) | undefined;
+}>;
+export type UseControlStateResult = Readonly<{
+    state: ControlState;
+    setState: (state: ControlState) => void;
+    dispatchMessage: (message: PanelMessage) => ControlState;
+    setControlValue: (controlId: string, value: ControlValue | number | boolean) => ControlState;
+}>;
+export declare function useControlState(panel: Panel, options?: UseControlStateOptions): UseControlStateResult;
+//# sourceMappingURL=useControlState.d.ts.map

package/dist/useControlState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlState.d.ts","sourceRoot":"","sources":["../src/useControlState.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAGxF,MAAM,MAAM,sBAAsB,GAAG,QAAQ,CAAC;IAC1C,YAAY,CAAC,EAAE,YAAY,GAAG,SAAS,CAAC;IACxC,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,YAAY,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC7D,CAAC,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG,QAAQ,CAAC;IACzC,KAAK,EAAE,YAAY,CAAC;IACpB,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACxC,eAAe,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,YAAY,CAAC;IACzD,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,YAAY,GAAG,MAAM,GAAG,OAAO,KAAK,YAAY,CAAC;CAChG,CAAC,CAAC;AAEH,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,GAAE,sBAA2B,GAAG,qBAAqB,CA4BzG"}

package/dist/useControlState.js

@@ -0,0 +1,23 @@
+import { useCallback, useMemo, useState } from 'react';
+import { applyControlUiMessage, controlMessageForValue, createControlUiState } from './state.js';
+export function useControlState(panel, options = {}) {
+    const defaultState = useMemo(() => options.initialState ?? createControlUiState(panel), [panel, options.initialState]);
+    const [state, setState] = useState(defaultState);
+    const dispatchMessage = useCallback((message) => {
+        const nextState = applyControlUiMessage(panel, state, message);
+        setState(nextState);
+        options.onMessage?.(message);
+        return nextState;
+    }, [panel, state, options]);
+    const setControlValue = useCallback((controlId, value) => {
+        const message = controlMessageForValue(panel, controlId, value);
+        return dispatchMessage(message);
+    }, [dispatchMessage, panel]);
+    return {
+        state,
+        setState,
+        dispatchMessage,
+        setControlValue,
+    };
+}
+//# sourceMappingURL=useControlState.js.map

package/dist/useControlState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useControlState.js","sourceRoot":"","sources":["../src/useControlState.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAc9F,MAAM,UAAU,eAAe,CAAC,KAAY,EAAE,UAAkC,EAAE;IAC9E,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,YAAY,IAAI,oBAAoB,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC,CAAC;IACvH,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAe,YAAY,CAAC,CAAC;IAE/D,MAAM,eAAe,GAAG,WAAW,CAC/B,CAAC,OAAqB,EAAE,EAAE;QACtB,MAAM,SAAS,GAAG,qBAAqB,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAAC;QAC/D,QAAQ,CAAC,SAAS,CAAC,CAAC;QACpB,OAAO,CAAC,SAAS,EAAE,CAAC,OAAO,CAAC,CAAC;QAC7B,OAAO,SAAS,CAAC;IACrB,CAAC,EACD,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,CAAC,CAC1B,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CAC/B,CAAC,SAAiB,EAAE,KAAsC,EAAE,EAAE;QAC1D,MAAM,OAAO,GAAG,sBAAsB,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC;QAChE,OAAO,eAAe,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC,EACD,CAAC,eAAe,EAAE,KAAK,CAAC,CAC3B,CAAC;IAEF,OAAO;QACH,KAAK;QACL,QAAQ;QACR,eAAe;QACf,eAAe;KAClB,CAAC;AACN,CAAC"}

package/dist/utils.d.ts

@@ -0,0 +1,4 @@
+export declare function cx(...values: readonly (string | false | null | undefined)[]): string | undefined;
+export declare function clampNumber(value: number, min: number, max: number): number;
+export declare function formatNumber(value: number): string;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,SAAS,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,MAAM,GAAG,SAAS,CAGhG;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAW3E;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAKlD"}

package/dist/utils.js

@@ -0,0 +1,23 @@
+export function cx(...values) {
+    const className = values.filter((value) => typeof value === 'string' && value.length > 0).join(' ');
+    return className.length > 0 ? className : undefined;
+}
+export function clampNumber(value, min, max) {
+    if (Number.isNaN(value)) {
+        return min;
+    }
+    if (value === Number.POSITIVE_INFINITY) {
+        return max;
+    }
+    if (value === Number.NEGATIVE_INFINITY) {
+        return min;
+    }
+    return Math.min(max, Math.max(min, value));
+}
+export function formatNumber(value) {
+    if (Number.isInteger(value)) {
+        return String(value);
+    }
+    return String(Math.round(value * 1000) / 1000);
+}
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,EAAE,CAAC,GAAG,MAAsD;IACxE,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAmB,EAAE,CAAC,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACrH,OAAO,SAAS,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;AACxD,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW;IAC/D,IAAI,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;QACtB,OAAO,GAAG,CAAC;IACf,CAAC;IACD,IAAI,KAAK,KAAK,MAAM,CAAC,iBAAiB,EAAE,CAAC;QACrC,OAAO,GAAG,CAAC;IACf,CAAC;IACD,IAAI,KAAK,KAAK,MAAM,CAAC,iBAAiB,EAAE,CAAC;QACrC,OAAO,GAAG,CAAC;IACf,CAAC;IACD,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC;AAC/C,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,KAAa;IACtC,IAAI,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;QAC1B,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC;IACD,OAAO,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;AACnD,CAAC"}

package/package.json

@@ -0,0 +1,72 @@
+{
+    "name": "@vessel-dsp/control-ui",
+    "version": "0.6.4",
+    "description": "React control-surface components for VesselDSP panel data.",
+    "keywords": [
+        "guitar-pedal",
+        "electronics",
+        "react",
+        "controls",
+        "vdsp"
+    ],
+    "homepage": "https://vessel-dsp.github.io/core/",
+    "bugs": {
+        "url": "https://github.com/vessel-dsp/core/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/vessel-dsp/core.git"
+    },
+    "license": "MIT",
+    "sideEffects": [
+        "./dist/styles.css",
+        "./src/styles.css"
+    ],
+    "type": "module",
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "bun": "./dist/index.js",
+            "import": "./dist/index.js"
+        },
+        "./styles.css": {
+            "default": "./dist/styles.css"
+        },
+        "./package.json": {
+            "default": "./package.json"
+        }
+    },
+    "main": "./dist/index.js",
+    "module": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "files": [
+        "dist",
+        "README.md",
+        "LICENSE.md"
+    ],
+    "scripts": {
+        "build": "tsc -p tsconfig.build.json && bun run ../../scripts/fix-dist-imports.ts dist && cp src/styles.css dist/styles.css",
+        "clean": "rm -rf dist",
+        "prepack": "bun run build",
+        "pack:dry-run": "npm pack --dry-run",
+        "typecheck": "tsc --noEmit -p tsconfig.json"
+    },
+    "dependencies": {
+        "@vessel-dsp/core": "0.6.4"
+    },
+    "peerDependencies": {
+        "react": ">=18.2 <20",
+        "react-dom": ">=18.2 <20"
+    },
+    "devDependencies": {
+        "@types/react": "^18.3.18",
+        "@types/react-dom": "^18.3.5",
+        "@types/react-test-renderer": "^18.3.1",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "react-test-renderer": "^18.3.1"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}