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

package/README.md

@@ -0,0 +1,228 @@
+# @cutoff/audio-ui-react - Development Guide
+
+This package contains the React component library for AudioUI.
+
+> **For general usage, installation, and component documentation, see the [main README](../../README.md) at the project root.**
+
+## Development Setup
+
+### Prerequisites
+
+- Node.js (version 18 or higher)
+- pnpm (version 10.20.0 or higher)
+
+### Quick Start
+
+```bash
+# From the repository root, install all dependencies
+pnpm install
+
+# Build the library
+pnpm build --filter @cutoff/audio-ui-react
+
+# Or from this directory
+cd packages/react
+pnpm build
+```
+
+## Project Structure
+
+```
+packages/react/
+├── src/
+│   ├── components/      # React components
+│   │   ├── defaults/    # Default/built-in components
+│   │   │   ├── controls/  # Interactive controls (Button, Knob, Slider, CycleButton) and SVG views
+│   │   │   └── devices/   # Device components (Keys)
+│   │   ├── generic/     # Generic components (FilmStrip controls, Image-based controls)
+│   │   │   └── controls/  # Filmstrip and image-based control implementations
+│   │   ├── primitives/  # Base components for building final components
+│   │   │   ├── controls/  # Control primitives (ContinuousControl, DiscreteControl, BooleanControl, OptionView)
+│   │   │   └── svg/       # SVG view primitives (ValueRing, RotaryImage, RadialImage, etc.)
+│   │   └── types.ts      # Shared type definitions
+│   ├── hooks/           # Hooks wrapping core logic (useContinuousInteraction, useAudioParameter, etc.)
+│   ├── utils/           # Utility functions (theme utilities)
+│   └── index.ts         # Main exports
+├── dist/                # Built output (generated)
+├── docs/                # Technical documentation
+└── package.json
+```
+
+Note: Logic, styles, and constants are imported from `@cutoff/audio-ui-core`.
+
+## Development Workflow
+
+### Building the Library
+
+```bash
+# From repository root
+pnpm build --filter @cutoff/audio-ui-react
+
+# Or from this directory
+cd packages/react
+pnpm build
+```
+
+### Type Checking
+
+```bash
+# From repository root
+pnpm typecheck --filter @cutoff/audio-ui-react
+
+# Or from this directory
+cd packages/react
+pnpm typecheck
+```
+
+### Running Tests
+
+```bash
+# From repository root
+pnpm test --filter @cutoff/audio-ui-react
+
+# Or from this directory
+cd packages/react
+pnpm test
+```
+
+### Local Development with Playground
+
+The playground application (`apps/playground-react`) automatically uses the workspace version of this package. No linking is required when using pnpm workspaces.
+
+To develop and test changes:
+
+1. Make changes to components in `packages/react/src/`
+2. The playground app will pick up changes automatically (or rebuild if needed)
+3. Run the playground: `pnpm dev` from the repository root
+
+## React Version Requirements
+
+**Critical**: This project requires React 18. Before making changes:
+
+```bash
+# Check React versions
+pnpm ls react @types/react
+
+# Should show React 18.x versions consistently
+```
+
+If you encounter version conflicts:
+
+1. Install React 18 versions: `pnpm add react@^18.3.1 react-dom@^18.3.1 @types/react@^18.3.23 -w`
+2. Run type checks: `pnpm typecheck`
+3. Rebuild: `pnpm build`
+
+## Component Development
+
+### Adding New Components
+
+1. Create component file in:
+   - `src/components/defaults/controls/` (for built-in controls with theming)
+   - `src/components/generic/controls/` (for generic components like filmstrip/image-based)
+   - `src/components/primitives/controls/` (for control primitives)
+   - `src/components/primitives/svg/` (for SVG view primitives)
+2. Export from `src/index.ts`
+3. Add demo page in `apps/playground-react/app/controls/[component-name]/page.tsx` (or appropriate category)
+4. Build and test: `pnpm build && pnpm typecheck`
+
+### Component Guidelines
+
+- Use TypeScript with strict mode
+- Define props interfaces with JSDoc comments
+- Use functional components with hooks
+- Prefix unused parameters with underscore (`_param`)
+- Follow existing patterns for styling and theming
+- All components must have `"use client";` directive (Client Components)
+- **Use TypeScript path aliases** instead of relative paths:
+  - `@/primitives/*` for primitives components
+  - `@/hooks/*` for hooks
+  - `@/defaults/*` for default components
+  - `@/utils/*` for utilities
+  - `@/types` for type definitions
+
+### TypeScript Path Aliases
+
+The library uses path aliases to simplify imports. Use these instead of relative paths:
+
+```typescript
+// ✅ Good - using aliases
+import AdaptiveBox from "@/primitives/AdaptiveBox";
+import { useAudioParameter } from "@/hooks/useAudioParameter";
+import { setThemeColor } from "@/utils/theme";
+import { AdaptiveBoxProps } from "@/types";
+
+// ❌ Avoid - relative paths
+import AdaptiveBox from "../../primitives/AdaptiveBox";
+import { useAudioParameter } from "../../../hooks/useAudioParameter";
+```
+
+Available aliases:
+
+- `@/primitives/*` → `src/components/primitives/*`
+- `@/hooks/*` → `src/hooks/*`
+- `@/defaults/*` → `src/components/defaults/*`
+- `@/utils/*` → `src/utils/*`
+- `@/types` → `src/components/types`
+
+## Documentation
+
+Technical documentation is located in `docs/`:
+
+- **`docs/adaptive-box-layout.md`**: AdaptiveBox layout system specification
+- **`docs/color-system.md`**: Complete color system architecture
+- **`docs/color-property-examples.md`**: Practical color property usage examples
+- **`docs/cycle-button-architecture.md`**: CycleButton component architecture and design
+- **`docs/interaction-system.md`**: Complete interaction system architecture (drag, wheel, keyboard)
+- **`docs/keys-middle-c-positions.md`**: MIDI keyboard positioning specifications
+- **`docs/parameter-specs.md`**: Audio parameter specification and tripartite value system
+- **`docs/size-system.md`**: Component sizing system architecture
+- **`docs/svg-view-primitives.md`**: SVG view primitives for building custom controls
+- **`docs/text-rendering-strategy.md`**: Text rendering and measurement strategies
+- **`docs/webkit-foreignobject-issues.md`**: WebKit foreignObject compatibility notes
+
+## Common Development Tasks
+
+### Testing Changes
+
+```bash
+# Build and type check
+pnpm build && pnpm typecheck
+
+# Run tests
+pnpm test
+
+# Test visually in playground app (from root)
+pnpm dev
+```
+
+### Troubleshooting
+
+**React type errors**: Usually indicates version mismatch
+
+```bash
+pnpm ls react @types/react
+# Fix by installing consistent React 18 versions
+```
+
+**Build failures**: Check TypeScript errors
+
+```bash
+pnpm typecheck  # Shows detailed error information
+```
+
+**Playground app not updating**: Rebuild library first
+
+```bash
+# From root
+pnpm build --filter @cutoff/audio-ui-react
+pnpm dev
+```
+
+## Contributing
+
+1. Ensure React 18 compatibility
+2. Run type checks before committing: `pnpm typecheck`
+3. Test changes in playground app: `pnpm dev`
+4. Update documentation as needed
+
+For detailed component API and usage examples, see the [main README](../../README.md).

package/dist/components/defaults/controls/Button.d.ts

@@ -0,0 +1,51 @@
+import { default as React } from 'react';
+import { AdaptiveBoxProps, AdaptiveSizeProps, BooleanControlProps, ThemableProps } from '../../types';
+
+/**
+ * Props for the Button component (built-in control with theming support)
+ */
+export type ButtonProps = BooleanControlProps & AdaptiveSizeProps & AdaptiveBoxProps & ThemableProps;
+/**
+ * A button component for audio applications.
+ *
+ * Supports both toggle (latch) and momentary modes, with proper handling of
+ * global mouse events for momentary buttons to ensure reliable release behavior
+ * even when the mouse is dragged outside the button before release.
+ *
+ * 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.).
+ *
+ * @param props - Component props
+ * @returns Rendered Button component
+ *
+ * @example
+ * ```tsx
+ * // Ad-Hoc Mode - Toggle button
+ * <Button
+ *   label="Power"
+ *   latch={true}
+ *   value={isOn}
+ *   onChange={(e) => setIsOn(e.value)}
+ * />
+ *
+ * // Ad-Hoc Mode - Momentary button
+ * <Button
+ *   label="Record"
+ *   latch={false}
+ *   value={isRecording}
+ *   onChange={(e) => setIsRecording(e.value)}
+ * />
+ *
+ * // Strict Mode with parameter
+ * <Button
+ *   parameter={powerParam}
+ *   value={isOn}
+ *   onChange={(e) => setIsOn(e.value)}
+ * />
+ * ```
+ */
+declare function Button({ latch, value, onChange, label, adaptiveSize, size, displayMode, labelMode, labelPosition, labelAlign, labelOverflow, labelHeightUnits, parameter, paramId, midiResolution, color, roundness, onClick, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, className, style, }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Button>;
+export default _default;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/defaults/controls/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/defaults/controls/Button.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAMlG;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,mBAAmB,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,aAAa,CAAC;AAErG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,iBAAS,MAAM,CAAC,EACZ,KAAa,EACb,KAAa,EACb,QAAQ,EACR,KAAK,EACL,YAAoB,EACpB,IAAe,EACf,WAAW,EACX,SAAS,EACT,aAAa,EACb,UAAU,EACV,aAAa,EACb,gBAAgB,EAChB,SAAS,EACT,OAAO,EACP,cAAc,EACd,KAAK,EACL,SAAS,EACT,OAAO,EACP,WAAW,EACX,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,KAAK,GACR,EAAE,WAAW,2CAsCb;;AAED,wBAAkC"}

package/dist/components/defaults/controls/ButtonView.d.ts

@@ -0,0 +1,20 @@
+import { ControlComponent } from '../../types';
+
+/**
+ * Props for the ButtonView component
+ */
+export type ButtonViewProps = {
+    /** Normalized value between 0 and 1 */
+    normalizedValue: number;
+    /** Threshold for determining "on" state (default 0.5) */
+    threshold?: number;
+    /** Corner roundness (normalized 0.0-1.0, maps to 0-50, or CSS variable string) */
+    roundness?: number | string;
+    /** Color prop (kept for API compatibility, but colors are read from CSS variables) */
+    color: string;
+    /** Additional CSS class name */
+    className?: string;
+};
+declare const _default: ControlComponent<Omit<ButtonViewProps, "normalizedValue" | "className" | "style">>;
+export default _default;
+//# sourceMappingURL=ButtonView.d.ts.map

package/dist/components/defaults/controls/ButtonView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonView.d.ts","sourceRoot":"","sources":["../../../../src/components/defaults/controls/ButtonView.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC1B,uCAAuC;IACvC,eAAe,EAAE,MAAM,CAAC;IACxB,yDAAyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,sFAAsF;IACtF,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;wBAoF0C,gBAAgB,CACxD,IAAI,CAAC,eAAe,EAAE,iBAAiB,GAAG,WAAW,GAAG,OAAO,CAAC,CACnE;AAFD,wBAEE"}

package/dist/components/defaults/controls/CycleButton.d.ts

@@ -0,0 +1,82 @@
+import { default as React } from 'react';
+import { AdaptiveBoxProps, AdaptiveSizeProps, DiscreteControlProps, ThemableProps } from '../../types';
+
+/**
+ * Props for the CycleButton component
+ */
+export type CycleButtonProps = DiscreteControlProps & AdaptiveSizeProps & AdaptiveBoxProps & ThemableProps & {
+    /** Custom renderer for options (used when parameter is provided but no children map exists) */
+    renderOption?: (option: {
+        value: string | number;
+        label: string;
+    }) => React.ReactNode;
+    /** Thickness of the stroke (normalized 0.0-1.0, maps to 1-20). Used by rotary variant. */
+    thickness?: number;
+    /** Openness of the ring in degrees (value between 0-360º; 0º: closed; 90º: 3/4 open; 180º: half-circle;)
+     * @default 90
+     */
+    openness?: number;
+    /** Optional rotation angle offset in degrees
+     * @default 0
+     */
+    rotation?: number;
+};
+/**
+ * A discrete interaction control that cycles through a set of discrete options.
+ *
+ * This control supports discrete interaction only (click to cycle, keyboard to step).
+ * It does not support continuous interaction (drag/wheel).
+ *
+ * **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 multiple visual variants (rotary knob-style, LED indicators, etc.) and
+ * 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
+ * @returns Rendered CycleButton component
+ *
+ * @example
+ * ```tsx
+ * // Ad-Hoc Mode with options prop (data-driven)
+ * <CycleButton
+ *   options={[
+ *     { value: "sine", label: "Sine Wave" },
+ *     { value: "square", label: "Square Wave" }
+ *   ]}
+ * />
+ *
+ * // Ad-Hoc Mode with children (visual content)
+ * <CycleButton defaultValue="sine" label="Waveform">
+ *   <OptionView value="sine"><SineIcon /></OptionView>
+ *   <OptionView value="square"><SquareIcon /></OptionView>
+ * </CycleButton>
+ *
+ * // Hybrid: options for model, children for visuals
+ * <CycleButton
+ *   options={[
+ *     { value: "sine", label: "Sine Wave", midiValue: 0 },
+ *     { value: "square", label: "Square Wave", midiValue: 1 }
+ *   ]}
+ * >
+ *   <OptionView value="sine"><SineIcon /></OptionView>
+ *   <OptionView value="square"><SquareIcon /></OptionView>
+ * </CycleButton>
+ *
+ * // Strict Mode with custom renderer
+ * <CycleButton
+ *   parameter={waveformParam}
+ *   renderOption={(opt) => <Icon name={opt.value} />}
+ * />
+ * ```
+ */
+declare function CycleButton({ value, defaultValue, onChange, renderOption, label, adaptiveSize, size, displayMode, labelMode, labelPosition, labelAlign, labelOverflow, labelHeightUnits, color, roundness, thickness, openness, rotation, parameter, paramId, options, midiResolution, midiMapping, onClick, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, className, style, children, }: CycleButtonProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof CycleButton>;
+export default _default;
+//# sourceMappingURL=CycleButton.d.ts.map

package/dist/components/defaults/controls/CycleButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CycleButton.d.ts","sourceRoot":"","sources":["../../../../src/components/defaults/controls/CycleButton.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAiCnG;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG,oBAAoB,GAC/C,iBAAiB,GACjB,gBAAgB,GAChB,aAAa,GAAG;IACZ,+FAA+F;IAC/F,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IACtF,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,iBAAS,WAAW,CAAC,EACjB,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,YAAoB,EACpB,IAAe,EACf,WAAW,EACX,SAAS,EACT,aAAa,EACb,UAAU,EACV,aAAa,EACb,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,SAAe,EACf,QAA2B,EAC3B,QAA2B,EAC3B,SAAS,EACT,OAAO,EACP,OAAO,EACP,cAAc,EACd,WAAW,EACX,OAAO,EACP,WAAW,EACX,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,QAAQ,GACX,EAAE,gBAAgB,2CAkGlB;;AAED,wBAAuC"}

package/dist/components/defaults/controls/Knob.d.ts

@@ -0,0 +1,82 @@
+import { default as React } from 'react';
+import { AdaptiveBoxProps, AdaptiveSizeProps, ContinuousControlProps, ThemableProps, KnobVariant, ValueLabelMode } from '../../types';
+
+/**
+ * Default openness for knob ring in degrees (matches ValueRing default)
+ */
+export declare const DEFAULT_OPENNESS = 90;
+/**
+ * Default rotation angle offset in degrees (matches ValueRing default)
+ */
+export declare const DEFAULT_ROTATION = 0;
+/**
+ * Props for the Knob component (built-in control with theming support)
+ */
+export type KnobProps = ContinuousControlProps & AdaptiveSizeProps & AdaptiveBoxProps & ThemableProps & {
+    /** Visual variant of the knob
+     * @default "abstract"
+     */
+    variant?: KnobVariant;
+    /** Thickness of the knob's stroke (normalized 0.0-1.0, maps to 1-20)
+     * @default Variant-dependent: 0.4 for abstract/simplest, 0.2 for others
+     */
+    thickness?: number;
+    /** Openness of the ring in degrees (value between 0-360º; 0º: closed; 90º: 3/4 open; 180º: half-circle;)
+     * @default 90
+     */
+    openness?: number;
+    /** Optional rotation angle offset in degrees
+     * @default 0
+     */
+    rotation?: number;
+    /**
+     * Whether to use RotaryImage (true) or RadialImage (false) for iconCap overlay.
+     * When true, the icon rotates with the knob value; when false, the icon remains static.
+     * Only applies when variant is "iconCap" and children is provided.
+     * @default false
+     */
+    rotaryOverlay?: boolean;
+    /**
+     * SVG content to display as overlay in iconCap variant.
+     * Typically an icon component (e.g., wave icons) that will be rendered at the center of the knob.
+     * The icon inherits color via currentColor, so it will adapt to light/dark mode automatically.
+     * Only used when variant is "iconCap".
+     *
+     * @example
+     * ```tsx
+     * <Knob variant="iconCap" value={50} min={0} max={100}>
+     *   <SineWaveIcon />
+     * </Knob>
+     * ```
+     */
+    children?: 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;
+};
+/**
+ * Knob component provides a circular control for value adjustment.
+ * Supports continuous value ranges with optional bipolar mode, custom formatting,
+ * and multiple visual variants.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <Knob value={50} min={0} max={100} label="Volume" />
+ * ```
+ *
+ * @example With iconCap variant and icon
+ * ```tsx
+ * <Knob variant="iconCap" value={64} min={0} max={127} rotaryOverlay={true}>
+ *   <SineWaveIcon />
+ * </Knob>
+ * ```
+ */
+declare function Knob({ min, max, step, bipolar, value, onChange, valueFormatter, label, adaptiveSize, size, displayMode, labelMode, labelPosition, labelAlign, labelOverflow, labelHeightUnits, color, roundness, variant, thickness, openness, rotation, parameter, unit, scale, paramId, interactionMode, interactionDirection, interactionSensitivity, rotaryOverlay: svgOverlayRotary, children: svgOverlay, valueAsLabel, midiResolution, defaultValue, onClick, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, className, style, }: KnobProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Knob>;
+export default _default;
+//# sourceMappingURL=Knob.d.ts.map

package/dist/components/defaults/controls/Knob.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Knob.d.ts","sourceRoot":"","sources":["../../../../src/components/defaults/controls/Knob.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EACH,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,aAAa,EACb,WAAW,EACX,cAAc,EACjB,MAAM,SAAS,CAAC;AAOjB;;GAEG;AACH,eAAO,MAAM,gBAAgB,KAAK,CAAC;AAEnC;;GAEG;AACH,eAAO,MAAM,gBAAgB,IAAI,CAAC;AAElC;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,sBAAsB,GAC1C,iBAAiB,GACjB,gBAAgB,GAChB,aAAa,GAAG;IACZ;;OAEG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;AAEN;;;;;;;;;;;;;;;;GAgBG;AACH,iBAAS,IAAI,CAAC,EACV,GAAG,EACH,GAAG,EACH,IAAI,EACJ,OAAe,EACf,KAAK,EACL,QAAQ,EACR,cAAc,EACd,KAAK,EACL,YAAoB,EACpB,IAAe,EACf,WAAW,EACX,SAAS,EACT,aAAa,EACb,UAAU,EACV,aAAa,EACb,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,OAAoB,EACpB,SAAS,EACT,QAA2B,EAC3B,QAA2B,EAC3B,SAAS,EACT,IAAI,EACJ,KAAK,EACL,OAAO,EACP,eAAe,EACf,oBAAoB,EACpB,sBAAsB,EACtB,aAAa,EAAE,gBAAwB,EACvC,QAAQ,EAAE,UAAU,EACpB,YAA0B,EAC1B,cAAc,EACd,YAAY,EACZ,OAAO,EACP,WAAW,EACX,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,KAAK,GACR,EAAE,SAAS,2CAgGX;;AAED,wBAAgC"}

package/dist/components/defaults/controls/KnobView.d.ts

@@ -0,0 +1,43 @@
+import { default as React } from 'react';
+import { ControlComponent, KnobVariant } from '../../types';
+
+/**
+ * Props for the KnobView component
+ */
+export type KnobViewProps = {
+    /** Normalized value between 0 and 1 */
+    normalizedValue: number;
+    /** Whether to start the arc from center (bipolar mode) */
+    bipolar?: boolean;
+    /** Visual variant of the knob */
+    variant?: KnobVariant;
+    /** Thickness of the knob's stroke (normalized 0.0-1.0, maps to 1-20) */
+    thickness?: number;
+    /** Roundness for stroke linecap (normalized 0.0-1.0, 0.0 = square, >0.0 = round, or CSS variable string) */
+    roundness?: number | string;
+    /** Openness of the ring in degrees (value between 0-360º; 0º: closed; 90º: 3/4 open; 180º: half-circle;) */
+    openness?: number;
+    /** Optional rotation angle offset in degrees */
+    rotation?: number;
+    /** Resolved color string */
+    color?: string;
+    /** Additional CSS class name */
+    className?: string;
+    /**
+     * Whether to use RotaryImage (true) or RadialImage (false) for iconCap overlay.
+     * When true, the icon rotates with the knob value; when false, the icon remains static.
+     * Only applies when variant is "iconCap" and svgOverlay is provided.
+     * @default false
+     */
+    svgOverlayRotary?: boolean;
+    /**
+     * SVG content to display as overlay in iconCap variant.
+     * Typically an icon component (e.g., wave icons) that will be rendered at the center of the knob.
+     * The icon inherits color via currentColor, so it will adapt to light/dark mode automatically.
+     * Only used when variant is "iconCap".
+     */
+    svgOverlay?: React.ReactNode;
+};
+declare const _default: ControlComponent<Omit<KnobViewProps, "normalizedValue" | "className" | "style">>;
+export default _default;
+//# sourceMappingURL=KnobView.d.ts.map

package/dist/components/defaults/controls/KnobView.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KnobView.d.ts","sourceRoot":"","sources":["../../../../src/components/defaults/controls/KnobView.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAOxD;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IACxB,uCAAuC;IACvC,eAAe,EAAE,MAAM,CAAC;IACxB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iCAAiC;IACjC,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4GAA4G;IAC5G,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,4GAA4G;IAC5G,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC,CAAC;wBA8LwC,gBAAgB,CACtD,IAAI,CAAC,aAAa,EAAE,iBAAiB,GAAG,WAAW,GAAG,OAAO,CAAC,CACjE;AAFD,wBAEE"}

package/dist/components/defaults/controls/Slider.d.ts

@@ -0,0 +1,79 @@
+import { default as React } from 'react';
+import { AdaptiveBoxProps, AdaptiveSizeProps, ContinuousControlProps, ThemableProps, SliderVariant, SliderCursorSize, ValueLabelMode } from '../../types';
+
+/**
+ * Props for the Slider component (built-in control with theming support)
+ */
+export type SliderProps = ContinuousControlProps & AdaptiveSizeProps & AdaptiveBoxProps & ThemableProps & {
+    /** Visual variant of the slider
+     * @default "abstract"
+     */
+    variant?: SliderVariant;
+    /** Orientation of the slider
+     * @default 'vertical' */
+    orientation?: "horizontal" | "vertical";
+    /** Thickness of the slider (normalized 0.0-1.0, maps to 1-50)
+     * @default 0.4 */
+    thickness?: number;
+    /**
+     * 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;
+    /** Cursor size option - determines which component's width is used for the cursor */
+    cursorSize?: SliderCursorSize;
+    /** Aspect ratio of the cursor */
+    cursorAspectRatio?: number;
+    /** Overrides the roundness factor of the cursor. Defaults to `roundness` */
+    cursorRoundness?: number | string;
+    /** Optional image URL to display as cursor */
+    cursorImageHref?: string;
+    /** Optional CSS class name for the cursor */
+    cursorClassName?: string;
+    /** Optional inline styles for the cursor */
+    cursorStyle?: React.CSSProperties;
+};
+/**
+ * A slider component for audio applications.
+ * Supports both horizontal and vertical orientations with continuous value adjustment.
+ *
+ * Features:
+ * - Multiple visual variants (abstract, trackless, trackfull, stripless)
+ * - Configurable orientation (horizontal or vertical)
+ * - Bipolar mode support (centered at zero, grows in both directions)
+ * - Customizable thickness and roundness
+ * - Full theming support via CSS variables
+ * - Adaptive sizing or fixed size variants
+ * - Supports drag, wheel, and keyboard interactions
+ * - Custom value formatting
+ *
+ * @example
+ * ```tsx
+ * // Basic vertical slider
+ * <Slider value={50} min={0} max={100} onChange={(e) => setValue(e.value)} />
+ *
+ * // Horizontal bipolar slider (pan control)
+ * <Slider
+ *   orientation="horizontal"
+ *   bipolar
+ *   value={0}
+ *   min={-100}
+ *   max={100}
+ *   label="Pan"
+ * />
+ *
+ * // With parameter model
+ * <Slider
+ *   parameter={volumeParam}
+ *   value={volume}
+ *   onChange={handleVolumeChange}
+ * />
+ * ```
+ */
+declare function Slider({ orientation, min, max, step, bipolar, value, onChange, valueFormatter, label, adaptiveSize, size, displayMode, labelMode, labelPosition, labelAlign, labelOverflow, labelHeightUnits, color, roundness, variant, thickness, parameter, unit, scale, paramId, interactionMode, interactionDirection, interactionSensitivity, valueAsLabel, midiResolution, defaultValue, onClick, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, className, style, cursorSize, cursorAspectRatio, cursorRoundness, cursorImageHref, cursorClassName, cursorStyle, }: SliderProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Slider>;
+export default _default;
+//# sourceMappingURL=Slider.d.ts.map

package/dist/components/defaults/controls/Slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../../src/components/defaults/controls/Slider.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EACH,gBAAgB,EAChB,iBAAiB,EACjB,sBAAsB,EACtB,aAAa,EACb,aAAa,EACb,gBAAgB,EAChB,cAAc,EACjB,MAAM,SAAS,CAAC;AAIjB;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,sBAAsB,GAC5C,iBAAiB,GACjB,gBAAgB,GAChB,aAAa,GAAG;IACZ;;OAEG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;6BACyB;IACzB,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC;sBACkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B,qFAAqF;IACrF,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,iCAAiC;IACjC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,4EAA4E;IAC5E,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAClC,8CAA8C;IAC9C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6CAA6C;IAC7C,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CACrC,CAAC;AAEN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,iBAAS,MAAM,CAAC,EACZ,WAAwB,EACxB,GAAG,EACH,GAAG,EACH,IAAI,EACJ,OAAe,EACf,KAAK,EACL,QAAQ,EACR,cAAc,EACd,KAAK,EACL,YAAoB,EACpB,IAAe,EACf,WAAW,EACX,SAAS,EACT,aAAa,EACb,UAAU,EACV,aAAa,EACb,gBAAgB,EAChB,KAAK,EACL,SAAS,EACT,OAAoB,EACpB,SAAe,EACf,SAAS,EACT,IAAI,EACJ,KAAK,EACL,OAAO,EACP,eAAe,EACf,oBAAoB,EACpB,sBAAsB,EACtB,YAA0B,EAC1B,cAAc,EACd,YAAY,EACZ,OAAO,EACP,WAAW,EACX,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,KAAK,EACL,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,eAAe,EACf,WAAW,GACd,EAAE,WAAW,2CAkEb;;AAED,wBAAkC"}