@cutoff/audio-ui-react 1.0.0-preview.20260123.1125

package/dist/components/generic/controls/ImageSwitch.d.ts

@@ -0,0 +1,62 @@
+import { default as React } from 'react';
+import { AdaptiveBoxProps, AdaptiveSizeProps, BooleanControlProps } from '../../types';
+
+/**
+ * Props specific to image switch controls
+ */
+export type ImageSwitchProps = {
+    /** Width of the viewBox (determines viewBox width) */
+    frameWidth: number;
+    /** Height of the viewBox (determines viewBox height) */
+    frameHeight: number;
+    /** URL to the image for false/off state */
+    imageHrefFalse: string;
+    /** URL to the image for true/on state */
+    imageHrefTrue: string;
+};
+/**
+ * Props for the ImageSwitch component
+ */
+export type ImageSwitchComponentProps = BooleanControlProps & AdaptiveSizeProps & AdaptiveBoxProps & ImageSwitchProps;
+/**
+ * A boolean control that displays one of two images based on the boolean value.
+ *
+ * This component provides full access to all library features:
+ *
+ * - Complete layout system: AdaptiveBox with all sizing modes, label positioning, alignment
+ * - Full parameter model: BooleanParameter with latch/momentary modes
+ * - Complete interaction system: Click, drag-in/drag-out, and keyboard interactions
+ * - Full accessibility: ARIA attributes, focus management, keyboard navigation
+ *
+ * The image displayed is determined by the boolean value:
+ * - `false` (normalized 0.0) displays `imageHrefFalse`
+ * - `true` (normalized 1.0) displays `imageHrefTrue`
+ *
+ * Supports two modes of operation:
+ * 1. Strict Mode (Parameter only): Model provided via parameter prop.
+ * 2. Ad-Hoc Mode (Props only): Model created from individual props (label, latch, etc.).
+ *
+ * Note: This component does NOT support themable props (color, roundness, thickness) as
+ * visuals are entirely determined by the image content.
+ *
+ * @param props - Component props
+ * @returns Rendered ImageSwitch component
+ *
+ * @example
+ * ```tsx
+ * <ImageSwitch
+ *   value={isFavorite}
+ *   onChange={(e) => setIsFavorite(e.value)}
+ *   label="Favorite"
+ *   latch={true}
+ *   frameWidth={100}
+ *   frameHeight={100}
+ *   imageHrefFalse="/star-off.png"
+ *   imageHrefTrue="/star-on.png"
+ * />
+ * ```
+ */
+declare function ImageSwitch({ latch, value, onChange, label, adaptiveSize, size, displayMode, labelMode, labelPosition, labelAlign, frameWidth, frameHeight, imageHrefFalse, imageHrefTrue, parameter, paramId, midiResolution, onClick, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, className, style, }: ImageSwitchComponentProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ImageSwitch>;
+export default _default;
+//# sourceMappingURL=ImageSwitch.d.ts.map

package/dist/components/generic/controls/ImageSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSwitch.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/controls/ImageSwitch.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAGnF;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC3B,sDAAsD;IACtD,UAAU,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,WAAW,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,cAAc,EAAE,MAAM,CAAC;IACvB,yCAAyC;IACzC,aAAa,EAAE,MAAM,CAAC;CACzB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,yBAAyB,GAAG,mBAAmB,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,gBAAgB,CAAC;AAEtH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,iBAAS,WAAW,CAAC,EACjB,KAAa,EACb,KAAa,EACb,QAAQ,EACR,KAAK,EACL,YAAoB,EACpB,IAAe,EACf,WAAW,EACX,SAAS,EACT,aAAa,EACb,UAAU,EACV,UAAU,EACV,WAAW,EACX,cAAc,EACd,aAAa,EACb,SAAS,EACT,OAAO,EACP,cAAc,EACd,OAAO,EACP,WAAW,EACX,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,KAAK,GACR,EAAE,yBAAyB,2CAkC3B;;AAED,wBAAuC"}

package/dist/components/generic/controls/ImageSwitchView.d.ts

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { ControlComponent } from '../../types';
+
+/**
+ * Props specific to image switch visualization
+ */
+export type ImageSwitchViewProps = {
+    /** Normalized value between 0 and 1 */
+    normalizedValue: number;
+    /** Width of the viewBox (determines viewBox width) */
+    frameWidth: number;
+    /** Height of the viewBox (determines viewBox height) */
+    frameHeight: number;
+    /** URL to the image for false/off state */
+    imageHrefFalse: string;
+    /** URL to the image for true/on state */
+    imageHrefTrue: string;
+    /** Additional CSS class name */
+    className?: string;
+    /** Content to render (unused in image view but required by generic props) */
+    children?: React.ReactNode;
+};
+type ImageSwitchViewComponentProps = Omit<ImageSwitchViewProps, "normalizedValue" | "className" | "style" | "children">;
+declare const _default: ControlComponent<ImageSwitchViewComponentProps>;
+export default _default;
+//# sourceMappingURL=ImageSwitchView.d.ts.map

package/dist/components/generic/controls/ImageSwitchView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageSwitchView.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/controls/ImageSwitchView.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG3C;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG;IAC/B,uCAAuC;IACvC,eAAe,EAAE,MAAM,CAAC;IACxB,sDAAsD;IACtD,UAAU,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,WAAW,EAAE,MAAM,CAAC;IACpB,2CAA2C;IAC3C,cAAc,EAAE,MAAM,CAAC;IACvB,yCAAyC;IACzC,aAAa,EAAE,MAAM,CAAC;IACtB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,CAAC;AAiDF,KAAK,6BAA6B,GAAG,IAAI,CAAC,oBAAoB,EAAE,iBAAiB,GAAG,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC;wBAEvE,gBAAgB,CAAC,6BAA6B,CAAC;AAAhG,wBAAiG"}

package/dist/components/primitives/AdaptiveBox.d.ts

@@ -0,0 +1,127 @@
+import { default as React, CSSProperties, PropsWithChildren } from 'react';
+
+export type FlexAlign = "start" | "center" | "end";
+export type DisplayMode = "scaleToFit" | "fill";
+export type LabelMode = "none" | "hidden" | "visible";
+export type LabelPosition = "above" | "below";
+export interface AdaptiveBoxProps extends PropsWithChildren {
+    className?: string;
+    style?: CSSProperties;
+    displayMode?: DisplayMode;
+    labelMode?: LabelMode;
+    labelHeightUnits?: number;
+    labelOverflow?: "ellipsis" | "abbreviate" | "auto";
+    /**
+     * ViewBox width in the same coordinate system as the content.
+     * For SVG content, this maps to the SVG viewBox width.
+     * For Canvas/GL content (future), this will map to canvas/gl dimensions.
+     */
+    viewBoxWidth: number;
+    /**
+     * ViewBox height in the same coordinate system as the content.
+     * For SVG content, this maps to the SVG viewBox height.
+     * For Canvas/GL content (future), this will map to canvas/gl dimensions.
+     */
+    viewBoxHeight: number;
+    minWidth?: number;
+    minHeight?: number;
+    debug?: boolean;
+}
+/**
+ * AdaptiveBox provides a CSS/SVG-based layout system for controls with labels.
+ *
+ * Handles aspect ratio preservation, label positioning, and responsive sizing using
+ * container queries. The component automatically adapts its layout based on labelMode
+ * and viewBox dimensions to prevent layout shift during initial render.
+ *
+ * @param props - Component props including layout configuration and viewBox dimensions
+ * @returns Rendered AdaptiveBox with subcomponents (Svg, Label, HtmlOverlay) available via context
+ *
+ * @example
+ * ```tsx
+ * <AdaptiveBox
+ *   viewBoxWidth={100}
+ *   viewBoxHeight={100}
+ *   labelMode="visible"
+ * >
+ *   <AdaptiveBox.Svg>
+ *     <circle cx={50} cy={50} r={40} />
+ *   </AdaptiveBox.Svg>
+ *   <AdaptiveBox.Label>Volume</AdaptiveBox.Label>
+ * </AdaptiveBox>
+ * ```
+ */
+export declare function AdaptiveBox({ className, style, displayMode, labelMode, labelHeightUnits, labelOverflow, viewBoxWidth, viewBoxHeight, minWidth, minHeight, debug, children, }: AdaptiveBoxProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace AdaptiveBox {
+    var Svg: ({ vAlign, hAlign, className, style, children, onWheel, ...rest }: AdaptiveBoxSvgProps) => import("react/jsx-runtime").JSX.Element;
+    var Label: ({ className, style, position, align, children }: AdaptiveBoxLabelProps) => import("react/jsx-runtime").JSX.Element | null;
+    var HtmlOverlay: ({ className, style, pointerEvents, children }: AdaptiveBoxHtmlOverlayProps) => import("react/jsx-runtime").JSX.Element;
+}
+export interface AdaptiveBoxSvgProps extends PropsWithChildren {
+    vAlign?: FlexAlign;
+    hAlign?: FlexAlign;
+    className?: string;
+    style?: CSSProperties;
+    onWheel?: (e: React.WheelEvent<SVGSVGElement>) => void;
+    onClick?: React.MouseEventHandler<SVGSVGElement>;
+    onDoubleClick?: React.MouseEventHandler<SVGSVGElement>;
+    onMouseDown?: React.MouseEventHandler<SVGSVGElement>;
+    onMouseUp?: React.MouseEventHandler<SVGSVGElement>;
+    onMouseEnter?: React.MouseEventHandler<SVGSVGElement>;
+    onMouseLeave?: React.MouseEventHandler<SVGSVGElement>;
+    onTouchStart?: React.TouchEventHandler<SVGSVGElement>;
+    onTouchMove?: React.TouchEventHandler<SVGSVGElement>;
+    onTouchEnd?: React.TouchEventHandler<SVGSVGElement>;
+    onKeyDown?: React.KeyboardEventHandler<SVGSVGElement>;
+    onKeyUp?: React.KeyboardEventHandler<SVGSVGElement>;
+    onPointerDown?: React.PointerEventHandler<SVGSVGElement>;
+    onPointerMove?: React.PointerEventHandler<SVGSVGElement>;
+    onPointerUp?: React.PointerEventHandler<SVGSVGElement>;
+    onPointerCancel?: React.PointerEventHandler<SVGSVGElement>;
+    tabIndex?: number;
+    role?: string;
+    "aria-valuenow"?: number;
+    "aria-valuemin"?: number;
+    "aria-valuemax"?: number;
+    "aria-label"?: string;
+    "aria-valuetext"?: string;
+    "aria-orientation"?: "horizontal" | "vertical";
+    "aria-pressed"?: boolean | "mixed";
+}
+declare function Svg({ vAlign, hAlign, className, style, children, onWheel, ...rest }: AdaptiveBoxSvgProps): import("react/jsx-runtime").JSX.Element;
+export interface AdaptiveBoxLabelProps extends PropsWithChildren {
+    className?: string;
+    style?: CSSProperties;
+    position?: LabelPosition;
+    align?: FlexAlign;
+}
+declare function Label({ className, style, position, align, children }: AdaptiveBoxLabelProps): import("react/jsx-runtime").JSX.Element | null;
+export interface AdaptiveBoxHtmlOverlayProps extends PropsWithChildren {
+    className?: string;
+    style?: CSSProperties;
+    /**
+     * Pointer events behavior.
+     * - "none" (default): Clicks pass through to elements below (e.g., SVG)
+     * - "auto": Overlay is interactive
+     */
+    pointerEvents?: "none" | "auto";
+}
+/**
+ * HTML overlay positioned over the main content area (same grid cell as Svg/Canvas/GL).
+ * Used for rendering text, icons, or other HTML content on top of SVG graphics.
+ *
+ * This approach avoids Safari's foreignObject rendering bugs with container queries
+ * by rendering HTML content outside the SVG as a sibling element.
+ *
+ * The overlay provides a container query context (`containerType: "size"`) enabling
+ * responsive sizing with `cqmin`, `cqmax`, `cqw`, `cqh` units.
+ *
+ * Uses CSS Grid stacking: multiple elements in the same grid cell overlap
+ * in DOM order (later elements appear on top).
+ */
+declare function HtmlOverlay({ className, style, pointerEvents, children }: AdaptiveBoxHtmlOverlayProps): import("react/jsx-runtime").JSX.Element;
+export type AdaptiveBoxSvg = typeof Svg;
+export type AdaptiveBoxLabel = typeof Label;
+export type AdaptiveBoxHtmlOverlay = typeof HtmlOverlay;
+export default AdaptiveBox;
+//# sourceMappingURL=AdaptiveBox.d.ts.map

package/dist/components/primitives/AdaptiveBox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdaptiveBox.d.ts","sourceRoot":"","sources":["../../../src/components/primitives/AdaptiveBox.tsx"],"names":[],"mappings":"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"}

package/dist/components/primitives/controls/BooleanControl.d.ts

@@ -0,0 +1,66 @@
+import { default as React } from 'react';
+import { AdaptiveBoxProps, AdaptiveBoxLogicalSizeProps, BooleanControlProps, ControlComponent } from '../../types';
+
+export type BooleanControlComponentProps<P extends object = Record<string, unknown>> = BooleanControlProps & AdaptiveBoxProps & AdaptiveBoxLogicalSizeProps & {
+    /**
+     * The Visualization Component.
+     * Must adhere to ControlComponent contract.
+     */
+    view: ControlComponent<P>;
+    /**
+     * Props specific to the Visualization Component.
+     */
+    viewProps: P;
+    /**
+     * Content overlay (HTML) rendered over the SVG (e.g. text value, icons).
+     * Rendered via AdaptiveBox.HtmlOverlay to avoid foreignObject issues.
+     */
+    htmlOverlay?: React.ReactNode;
+};
+/**
+ * A Generic Boolean Control that connects a Data Model (BooleanParameter)
+ * to a Visualization View (ControlComponent).
+ *
+ * This component handles parameter resolution, value management, interaction handling,
+ * and layout management for boolean controls (Button, Toggle, etc.).
+ *
+ * Supports two modes of operation:
+ * 1. Strict Mode (Parameter only): Model provided via parameter prop.
+ * 2. Ad-Hoc Mode (Props only): Model created from individual props (label, latch, etc.).
+ *
+ * **Interaction Modes:**
+ * - **Editable Control**: When `onChange` is provided, the control is editable and responds to
+ *   all interaction methods (mouse, touch, keyboard) to change the value. The full interaction
+ *   system handles complex behaviors like drag-in/drag-out for momentary buttons.
+ * - **Clickable View**: When only `onClick` is provided (no `onChange`), the control is a
+ *   clickable view that triggers the onClick handler but does not change its value. Touch events
+ *   are handled to ensure onClick works on touch devices.
+ * - **Both**: When both `onChange` and `onClick` are provided, the control is editable and
+ *   also triggers onClick for mouse clicks (onChange handles touch events for value changes).
+ *
+ * @param props - Component props including parameter configuration, view component, and layout options
+ * @returns Rendered boolean control component
+ *
+ * @example
+ * ```tsx
+ * // Editable control
+ * <BooleanControl
+ *   value={isOn}
+ *   onChange={(e) => setIsOn(e.value)}
+ *   view={ButtonView}
+ *   viewProps={{ color: "blue", roundness: 0.3 }}
+ * />
+ *
+ * // Clickable view (non-editable)
+ * <BooleanControl
+ *   value={false}
+ *   onClick={() => handleClick()}
+ *   view={ButtonView}
+ *   viewProps={{ color: "gray" }}
+ * />
+ * ```
+ */
+export declare function BooleanControl<P extends object = Record<string, unknown>>(props: BooleanControlComponentProps<P>): import("react/jsx-runtime").JSX.Element;
+declare const _default: typeof BooleanControl;
+export default _default;
+//# sourceMappingURL=BooleanControl.d.ts.map

package/dist/components/primitives/controls/BooleanControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BooleanControl.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/controls/BooleanControl.tsx"],"names":[],"mappings":"AAQA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAM/G,MAAM,MAAM,4BAA4B,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAE/E,mBAAmB,GAEf,gBAAgB,GAEhB,2BAA2B,GAAG;IAC1B;;;OAGG;IACH,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAE1B;;OAEG;IACH,SAAS,EAAE,CAAC,CAAC;IAEb;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,4BAA4B,CAAC,CAAC,CAAC,2CAsMhH;wBAE4C,OAAO,cAAc;AAAlE,wBAAmE"}

package/dist/components/primitives/controls/ContinuousControl.d.ts

@@ -0,0 +1,46 @@
+import { default as React } from 'react';
+import { AdaptiveBoxProps, AdaptiveBoxLogicalSizeProps, ContinuousControlProps, ControlComponent, ValueLabelMode } from '../../types';
+
+export type ContinuousControlComponentProps<P extends object = Record<string, unknown>> = ContinuousControlProps & AdaptiveBoxProps & AdaptiveBoxLogicalSizeProps & {
+    /**
+     * The Visualization Component.
+     * Must adhere to ControlComponent contract.
+     */
+    view: ControlComponent<P>;
+    /**
+     * Props specific to the Visualization Component.
+     */
+    viewProps: P;
+    /**
+     * Content overlay (HTML) rendered over the SVG (e.g. text value).
+     * Rendered via AdaptiveBox.HtmlOverlay to avoid foreignObject issues.
+     */
+    htmlOverlay?: React.ReactNode;
+    /**
+     * Controls how the label and value are displayed.
+     * - "labelOnly": Always shows the label (default)
+     * - "valueOnly": Always shows the value
+     * - "interactive": Shows label normally, but temporarily swaps to value during interaction
+     * @default "labelOnly"
+     */
+    valueAsLabel?: ValueLabelMode;
+};
+/**
+ * A Generic Continuous Control that connects a Data Model (AudioParameter)
+ * to a Visualization View (ControlComponent).
+ *
+ * This component provides a generic wrapper for continuous controls (Knob, Slider, etc.),
+ * decoupling behavior (AudioParameter, interaction logic) from visualization (SVG rendering).
+ * It handles parameter resolution, normalization, interaction, and layout automatically.
+ *
+ * Supports double-click to reset to default value when editable (onChange provided).
+ * The default value is determined by the parameter's `defaultValue` property, or
+ * calculated as 0.0 for unipolar or 0.5 for bipolar parameters when not specified.
+ *
+ * @param props Component props including parameter configuration, view component, and layout props
+ * @returns Rendered continuous control with AdaptiveBox layout
+ */
+export declare function ContinuousControl<P extends object = Record<string, unknown>>(props: ContinuousControlComponentProps<P>): import("react/jsx-runtime").JSX.Element;
+declare const _default: typeof ContinuousControl;
+export default _default;
+//# sourceMappingURL=ContinuousControl.d.ts.map

package/dist/components/primitives/controls/ContinuousControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContinuousControl.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/controls/ContinuousControl.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,EACH,gBAAgB,EAChB,2BAA2B,EAC3B,sBAAsB,EACtB,gBAAgB,EAChB,cAAc,EACjB,MAAM,SAAS,CAAC;AAMjB,MAAM,MAAM,+BAA+B,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAElF,sBAAsB,GAElB,gBAAgB,GAEhB,2BAA2B,GAAG;IAC1B;;;OAGG;IACH,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAE1B;;OAEG;IACH,SAAS,EAAE,CAAC,CAAC;IAEb;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;AAEV;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACxE,KAAK,EAAE,+BAA+B,CAAC,CAAC,CAAC,2CAyL5C;wBAE+C,OAAO,iBAAiB;AAAxE,wBAAyE"}

package/dist/components/primitives/controls/DiscreteControl.d.ts

@@ -0,0 +1,70 @@
+import { default as React } from 'react';
+import { AdaptiveBoxProps, AdaptiveBoxLogicalSizeProps, DiscreteControlProps, ControlComponent } from '../../types';
+
+export type DiscreteControlComponentProps<P extends object = Record<string, unknown>> = DiscreteControlProps & AdaptiveBoxProps & AdaptiveBoxLogicalSizeProps & {
+    /**
+     * The Visualization Component.
+     * Must adhere to ControlComponent contract.
+     */
+    view: ControlComponent<P>;
+    /**
+     * Props specific to the Visualization Component.
+     */
+    viewProps: P;
+    /**
+     * Content overlay (HTML) rendered over the SVG (e.g. text value, icons).
+     * Rendered via AdaptiveBox.HtmlOverlay to avoid foreignObject issues.
+     */
+    htmlOverlay?: React.ReactNode;
+};
+/**
+ * A Generic Discrete Control that connects a Data Model (DiscreteParameter)
+ * to a Visualization View (ControlComponent).
+ *
+ * This component handles parameter resolution, value management, interaction handling,
+ * and layout management for discrete controls (CycleButton, Selector, etc.).
+ *
+ * **Important: Options vs Children**
+ *
+ * - **`options` prop**: Defines the parameter model (value, label, midiValue). Used for parameter structure.
+ * - **`children` (OptionView components)**: Provides visual content (ReactNodes) for rendering. Used for display.
+ *
+ * Supports four modes of operation:
+ * 1. **Ad-Hoc Mode (Options prop)**: Model from `options` prop, visual from `children` (if provided) or default rendering
+ * 2. **Ad-Hoc Mode (Children only)**: Model inferred from OptionView children, visual from children
+ * 3. **Strict Mode (Parameter only)**: Model from `parameter` prop, visual via `renderOption` callback
+ * 4. **Hybrid Mode (Parameter + Children)**: Model from `parameter` prop, visual from children (matched by value)
+ *
+ * @param props - Component props including parameter configuration, view component, and layout options
+ * @returns Rendered discrete control component
+ *
+ * @example
+ * ```tsx
+ * // Ad-Hoc Mode with options prop
+ * <DiscreteControl
+ *   value="sine"
+ *   onChange={(e) => setValue(e.value)}
+ *   options={[
+ *     { value: "sine", label: "Sine Wave" },
+ *     { value: "square", label: "Square Wave" }
+ *   ]}
+ *   view={KnobView}
+ *   viewProps={{ color: "blue", thickness: 0.4 }}
+ * />
+ *
+ * // Ad-Hoc Mode with children
+ * <DiscreteControl
+ *   value="sine"
+ *   onChange={(e) => setValue(e.value)}
+ *   view={KnobView}
+ *   viewProps={{ color: "blue", thickness: 0.4 }}
+ * >
+ *   <OptionView value="sine">Sine</OptionView>
+ *   <OptionView value="square">Square</OptionView>
+ * </DiscreteControl>
+ * ```
+ */
+export declare function DiscreteControl<P extends object = Record<string, unknown>>(props: DiscreteControlComponentProps<P>): import("react/jsx-runtime").JSX.Element;
+declare const _default: typeof DiscreteControl;
+export default _default;
+//# sourceMappingURL=DiscreteControl.d.ts.map

package/dist/components/primitives/controls/DiscreteControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DiscreteControl.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/controls/DiscreteControl.tsx"],"names":[],"mappings":"AAQA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAE,gBAAgB,EAAE,2BAA2B,EAAE,oBAAoB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAMhH,MAAM,MAAM,6BAA6B,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAEhF,oBAAoB,GAEhB,gBAAgB,GAEhB,2BAA2B,GAAG;IAC1B;;;OAGG;IACH,IAAI,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAE1B;;OAEG;IACH,SAAS,EAAE,CAAC,CAAC;IAEb;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC,CAAC;AAEV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,6BAA6B,CAAC,CAAC,CAAC,2CA+HlH;wBAE6C,OAAO,eAAe;AAApE,wBAAqE"}

package/dist/components/primitives/controls/OptionView.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+
+export type OptionViewProps = {
+    /** Value associated with this option */
+    value?: string | number;
+    /** Child content (Visual representation) */
+    children?: React.ReactNode;
+    /** Optional text label for the parameter model (accessibility/aria-label) */
+    label?: string;
+};
+export default function OptionView(_props: OptionViewProps): null;
+//# sourceMappingURL=OptionView.d.ts.map

package/dist/components/primitives/controls/OptionView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionView.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/controls/OptionView.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,eAAe,GAAG;IAC1B,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,MAAM,EAAE,eAAe,QAEzD"}

package/dist/components/primitives/svg/FilmstripImage.d.ts

@@ -0,0 +1,60 @@
+import { default as React, CSSProperties } from 'react';
+
+export type FilmstripImageProps = {
+    /** X coordinate of the top-left corner (default: 0) */
+    x?: number;
+    /** Y coordinate of the top-left corner (default: 0) */
+    y?: number;
+    /** Width of a SINGLE frame */
+    frameWidth: number;
+    /** Height of a SINGLE frame */
+    frameHeight: number;
+    /** Total number of frames in the strip */
+    frameCount: number;
+    /** Normalized value between 0 and 1 */
+    normalizedValue: number;
+    /** URL to the sprite sheet/filmstrip image */
+    imageHref: string;
+    /** Orientation of the strip (default: "vertical") */
+    orientation?: "vertical" | "horizontal";
+    /** Optional frame rotation in degrees (default: 0) */
+    frameRotation?: number;
+    /**
+     * If true, inverts the normalized value (0.0 -> 1.0 and 1.0 -> 0.0).
+     * Useful for filmstrips where frame 0 represents "on" and frame 1 represents "off".
+     * @default false
+     */
+    invertValue?: boolean;
+    /** Additional CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+};
+/**
+ * A primitive component that displays a single frame from a sprite sheet (filmstrip)
+ * based on a normalized value.
+ *
+ * This is the most performant way to animate complex knobs and UI elements in audio applications.
+ * It uses a nested SVG with a shifted viewBox to "scrub" through the filmstrip, which is hardware accelerated.
+ *
+ * The filmstrip image should contain all frames stacked vertically (default) or horizontally.
+ *
+ * @param {FilmstripImageProps} props - Component props
+ * @param {number} [props.x=0] - X coordinate of the top-left corner
+ * @param {number} [props.y=0] - Y coordinate of the top-left corner
+ * @param {number} props.frameWidth - Width of a single frame in the filmstrip
+ * @param {number} props.frameHeight - Height of a single frame in the filmstrip
+ * @param {number} props.frameCount - Total number of frames in the strip
+ * @param {number} props.normalizedValue - Normalized value between 0 and 1 (determines which frame to display)
+ * @param {string} props.imageHref - URL to the sprite sheet/filmstrip image
+ * @param {"vertical" | "horizontal"} [props.orientation="vertical"] - Orientation of the strip
+ * @param {number} [props.frameRotation=0] - Optional frame rotation in degrees
+ * @param {boolean} [props.invertValue=false] - If true, inverts the normalized value (0.0 -> 1.0 and 1.0 -> 0.0)
+ * @param {string} [props.className] - Additional CSS class name
+ * @param {CSSProperties} [props.style] - Inline styles
+ * @returns {JSX.Element} SVG group element containing the filmstrip frame
+ */
+declare function FilmstripImage({ x, y, frameWidth, frameHeight, frameCount, normalizedValue, imageHref, orientation, frameRotation, invertValue, className, style, }: FilmstripImageProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FilmstripImage>;
+export default _default;
+//# sourceMappingURL=FilmstripImage.d.ts.map

package/dist/components/primitives/svg/FilmstripImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilmstripImage.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/svg/FilmstripImage.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,MAAM,MAAM,mBAAmB,GAAG;IAC9B,uDAAuD;IACvD,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,uDAAuD;IACvD,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,8BAA8B;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB,uCAAuC;IACvC,eAAe,EAAE,MAAM,CAAC;IACxB,8CAA8C;IAC9C,SAAS,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,iBAAS,cAAc,CAAC,EACpB,CAAK,EACL,CAAK,EACL,UAAU,EACV,WAAW,EACX,UAAU,EACV,eAAe,EACf,SAAS,EACT,WAAwB,EACxB,aAAiB,EACjB,WAAmB,EACnB,SAAS,EACT,KAAK,GACR,EAAE,mBAAmB,2CA6CrB;;AAED,wBAA0C"}

package/dist/components/primitives/svg/Image.d.ts

@@ -0,0 +1,50 @@
+import { default as React, CSSProperties } from 'react';
+
+export type ImageProps = {
+    /** X coordinate of the top-left corner (default: 0) */
+    x?: number;
+    /** Y coordinate of the top-left corner (default: 0) */
+    y?: number;
+    /** Width of the image */
+    width: number;
+    /** Height of the image */
+    height: number;
+    /** Optional image URL to display */
+    imageHref?: string;
+    /** Optional SVG content to display (e.g., icon components) */
+    children?: React.ReactNode;
+    /** Optional SVG transform attribute */
+    transform?: string;
+    /** Additional CSS class name */
+    className?: string;
+    /**
+     * Inline styles.
+     * Supports `color` property for icon theming - icons using currentColor will inherit this value.
+     */
+    style?: CSSProperties;
+};
+/**
+ * A primitive component that displays static content at rectangular coordinates.
+ * The content is positioned at (x, y) with the specified width and height.
+ *
+ * This component can display an image (via imageHref) or arbitrary SVG content (via children).
+ * It is designed for straightforward rectangular image placement without radial/centered positioning.
+ *
+ * Useful for displaying images or icons at specific positions and sizes.
+ *
+ * @param {ImageProps} props - Component props
+ * @param {number} [props.x=0] - X coordinate of the top-left corner
+ * @param {number} [props.y=0] - Y coordinate of the top-left corner
+ * @param {number} props.width - Width of the image
+ * @param {number} props.height - Height of the image
+ * @param {string} [props.imageHref] - Optional image URL to display
+ * @param {React.ReactNode} [props.children] - Optional SVG content to display
+ * @param {string} [props.transform] - Optional SVG transform attribute
+ * @param {string} [props.className] - Additional CSS class name
+ * @param {CSSProperties} [props.style] - Inline styles
+ * @returns {JSX.Element} SVG group element containing the image
+ */
+declare function Image({ x, y, width, height, imageHref, children, transform, className, style }: ImageProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Image>;
+export default _default;
+//# sourceMappingURL=Image.d.ts.map

package/dist/components/primitives/svg/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/svg/Image.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,MAAM,MAAM,UAAU,GAAG;IACrB,uDAAuD;IACvD,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,uDAAuD;IACvD,CAAC,CAAC,EAAE,MAAM,CAAC;IACX,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACzB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,KAAK,CAAC,EAAE,CAAK,EAAE,CAAK,EAAE,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,UAAU,2CAoB3G;;AAED,wBAAiC"}

package/dist/components/primitives/svg/LabelRing.d.ts

@@ -0,0 +1,42 @@
+import { default as React, CSSProperties, ReactNode } from 'react';
+
+export type LabelRingProps = {
+    /** X coordinate of the center point */
+    cx: number;
+    /** Y coordinate of the center point */
+    cy: number;
+    /** Outer radius of the ring (content is centered at this radius) */
+    radius: number;
+    /** Array of content to render at each tick position */
+    labels: (string | number | ReactNode)[];
+    /** Orientation of the labels:
+     * - "upright": Text stays upright (default)
+     * - "radial": Text rotates to match the angle
+     */
+    orientation?: "upright" | "radial";
+    /** Openness of the ring in degrees (default 90) */
+    openness?: number;
+    /** Rotation offset in degrees (default 0) */
+    rotation?: number;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: CSSProperties;
+    /** CSS class name for the text elements (only applies to string/number labels) */
+    labelClassName?: string;
+    /** Inline styles for the text elements (only applies to string/number labels) */
+    labelStyle?: CSSProperties;
+    /**
+     * Default size for icon labels. Used to center the icons.
+     * If not provided, the component attempts to read `size`, `width`, or `height` from the icon props.
+     */
+    iconSize?: number;
+};
+/**
+ * A wrapper around TickRing designed for rendering text labels or icons at radial positions.
+ * Automatically handles positioning and rotation based on the specified orientation.
+ */
+declare function LabelRing({ cx, cy, radius, labels, orientation, openness, rotation, className, style, labelClassName, labelStyle, iconSize, }: LabelRingProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof LabelRing>;
+export default _default;
+//# sourceMappingURL=LabelRing.d.ts.map

package/dist/components/primitives/svg/LabelRing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LabelRing.d.ts","sourceRoot":"","sources":["../../../../src/components/primitives/svg/LabelRing.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGxD,MAAM,MAAM,cAAc,GAAG;IACzB,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,oEAAoE;IACpE,MAAM,EAAE,MAAM,CAAC;IACf,uDAAuD;IACvD,MAAM,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,EAAE,CAAC;IACxC;;;OAGG;IACH,WAAW,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACnC,mDAAmD;IACnD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,kFAAkF;IAClF,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iFAAiF;IACjF,UAAU,CAAC,EAAE,aAAa,CAAC;IAC3B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;;GAGG;AACH,iBAAS,SAAS,CAAC,EACf,EAAE,EACF,EAAE,EACF,MAAM,EACN,MAAM,EACN,WAAuB,EACvB,QAAa,EACb,QAAY,EACZ,SAAS,EACT,KAAK,EACL,cAAc,EACd,UAAU,EACV,QAAQ,GACX,EAAE,cAAc,2CAwFhB;;AAED,wBAAqC"}