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

package/dist/model/AudioParameter.d.ts

@@ -0,0 +1,437 @@
+import { MidiResolution } from '../types';
+
+export type AudioParameterType = "continuous" | "boolean" | "discrete";
+/**
+ * A scale function that transforms normalized values (0..1) to scaled values (0..1)
+ * Both forward and inverse must be provided for bidirectional conversion.
+ *
+ * The scale is applied in the normalized domain (0..1) to create non-linear mappings
+ * between the real value domain and the normalized/MIDI domain.
+ */
+export interface ScaleFunction {
+    /**
+     * Transform normalized value (0..1) to scaled value (0..1)
+     * Used when converting Real -> Normalized (in _normalizeReal)
+     *
+     * @param normalized - A value in the range [0, 1] representing position in real domain
+     * @returns A scaled value in the range [0, 1] for MIDI quantization
+     */
+    forward: (normalized: number) => number;
+    /**
+     * Transform scaled value (0..1) back to normalized value (0..1)
+     * Used when converting Normalized -> Real (in _denormalizeReal)
+     *
+     * @param scaled - A value in the range [0, 1] from MIDI domain
+     * @returns A normalized value in the range [0, 1] for real domain conversion
+     */
+    inverse: (scaled: number) => number;
+    /**
+     * Optional name for debugging/documentation
+     */
+    name?: string;
+}
+/**
+ * Predefined scale functions for common audio parameter transformations
+ */
+export declare const LinearScale: ScaleFunction;
+export declare const LogScale: ScaleFunction;
+export declare const ExpScale: ScaleFunction;
+export type ScaleType = ScaleFunction | "linear" | "log" | "exp";
+/**
+ * Definition for a single option in a discrete parameter.
+ *
+ * This type represents the parameter model definition (value, label, MIDI mapping).
+ * It is separate from visual content, which is provided via React children in components.
+ */
+export interface DiscreteOption {
+    /** The value associated with this option */
+    value: number | string;
+    /** The label for this option (used for display, accessibility, and parameter model) */
+    label: string;
+    /** Optional explicit MIDI value for custom mapping strategy */
+    midiValue?: number;
+}
+interface BaseAudioParameter<T = number | boolean | string> {
+    id: string;
+    name: string;
+    type: AudioParameterType;
+    midiResolution?: MidiResolution;
+    /** Default value for the parameter */
+    defaultValue?: T;
+}
+export interface ContinuousParameter extends BaseAudioParameter<number> {
+    type: "continuous";
+    min: number;
+    max: number;
+    step?: number;
+    unit?: string;
+    scale?: ScaleType;
+    /** Whether the parameter operates in bipolar mode (centered around zero) */
+    bipolar?: boolean;
+}
+export interface BooleanParameter extends BaseAudioParameter<boolean> {
+    type: "boolean";
+    mode?: "toggle" | "momentary";
+    trueLabel?: string;
+    falseLabel?: string;
+}
+export interface DiscreteParameter extends BaseAudioParameter<number | string> {
+    type: "discrete";
+    /** Array of option definitions (parameter model) */
+    options: DiscreteOption[];
+    midiMapping?: "spread" | "sequential" | "custom";
+}
+export type AudioParameter = ContinuousParameter | BooleanParameter | DiscreteParameter;
+/**
+ * Implementation class that handles normalization, denormalization, and MIDI conversion.
+ *
+ * ARCHITECTURE NOTE:
+ * This class uses the MIDI Integer Value as the central "Pivot" / Source of Truth.
+ *
+ * Flow:
+ * Real Value -> [Quantize] -> MIDI Integer -> [Normalize] -> Normalized Float (0..1)
+ * Normalized Float -> [Scale] -> MIDI Integer -> [Convert] -> Real Value
+ *
+ * This ensures deterministic behavior and alignment with hardware standards.
+ */
+export declare class AudioParameterConverter {
+    config: AudioParameter;
+    private maxMidi;
+    private scaleFunction;
+    constructor(config: AudioParameter);
+    private resolveScale;
+    /**
+     * [Internal] Pure math normalization from Real to 0..1.
+     *
+     * This is the first step in the conversion pipeline. It normalizes the real value
+     * to 0..1 in the real domain, then applies scale transformation (if not linear).
+     * The scale transformation happens in the normalized domain to create non-linear
+     * mappings (e.g., logarithmic for volume, exponential for envelope curves).
+     */
+    private _normalizeReal;
+    /**
+     * [Internal] Pure math denormalization from 0..1 to Real.
+     *
+     * This is the inverse of `_normalizeReal()`. It first applies the inverse scale
+     * transformation (if not linear), then denormalizes to the real value domain.
+     * Finally, it applies step quantization in the real domain (step is always linear,
+     * regardless of scale type).
+     */
+    private _denormalizeReal;
+    /**
+     * Convert Real Value to MIDI Integer (The Pivot).
+     *
+     * This is the central conversion method that quantizes real-world values to MIDI integers.
+     * The MIDI integer serves as the source of truth, ensuring deterministic behavior and
+     * alignment with hardware standards.
+     *
+     * The conversion flow:
+     * 1. Normalize the real value to 0..1 (applying scale transformation if needed)
+     * 2. Quantize to the configured MIDI resolution (7-bit = 0-127, 14-bit = 0-16383, etc.)
+     *
+     * @param realValue The real-world value (number, boolean, or string depending on parameter type)
+     * @returns The quantized MIDI integer value
+     *
+     * @example
+     * ```ts
+     * const converter = new AudioParameterConverter({
+     *   type: "continuous",
+     *   min: 0,
+     *   max: 100,
+     *   midiResolution: 7
+     * });
+     * converter.toMidi(50); // 64 (50% of 0-100 maps to 64 in 0-127 range)
+     * ```
+     */
+    toMidi(realValue: number | boolean | string): number;
+    /**
+     * Convert MIDI Integer to Real Value.
+     *
+     * This method performs the inverse of `toMidi()`, converting a quantized MIDI integer
+     * back to a real-world value. The conversion flow:
+     * 1. Normalize the MIDI integer to 0..1
+     * 2. Apply inverse scale transformation (if not linear)
+     * 3. Denormalize to the real value domain
+     * 4. Apply step quantization (if configured)
+     *
+     * @param midiValue The MIDI integer value (will be clamped to valid range)
+     * @returns The real-world value (number, boolean, or string depending on parameter type)
+     *
+     * @example
+     * ```ts
+     * const converter = new AudioParameterConverter({
+     *   type: "continuous",
+     *   min: 0,
+     *   max: 100,
+     *   step: 1,
+     *   midiResolution: 7
+     * });
+     * converter.fromMidi(64); // 50 (64/127 ≈ 0.5, maps to 50 in 0-100 range)
+     * ```
+     */
+    fromMidi(midiValue: number): number | boolean | string;
+    normalize(realValue: number | boolean | string): number;
+    denormalize(normalized: number): number | boolean | string;
+    /**
+     * Format a value for display as a string.
+     *
+     * This method generates a human-readable string representation of the value,
+     * including appropriate units and precision based on the parameter configuration.
+     *
+     * - Continuous parameters: Includes unit suffix and precision based on step size
+     * - Boolean parameters: Uses trueLabel/falseLabel or defaults to "On"/"Off"
+     * - Discrete parameters: Returns the label of the matching option
+     *
+     * @param value The value to format (number, boolean, or string)
+     * @returns Formatted string representation
+     *
+     * @example
+     * ```ts
+     * const converter = new AudioParameterConverter({
+     *   type: "continuous",
+     *   min: 0,
+     *   max: 100,
+     *   step: 0.1,
+     *   unit: "dB"
+     * });
+     * converter.format(50.5); // "50.5 dB"
+     *
+     * const boolConverter = new AudioParameterConverter({
+     *   type: "boolean",
+     *   trueLabel: "Enabled",
+     *   falseLabel: "Disabled"
+     * });
+     * boolConverter.format(true); // "Enabled"
+     * ```
+     */
+    format(value: number | boolean | string): string;
+    /**
+     * Get the maximum display text for sizing purposes.
+     * Returns the longest formatted string among all possible values.
+     * Useful for RadialText referenceText prop to ensure consistent sizing.
+     *
+     * @param options - Optional configuration
+     * @param options.includeUnit - Whether to include the unit in the result (default: true).
+     *                              Set to false when displaying value and unit on separate lines.
+     * @returns The longest formatted display string
+     *
+     * @example
+     * ```ts
+     * const converter = new AudioParameterConverter(volumeParam);
+     * // Single line with unit
+     * <RadialText text={currentValue} referenceText={converter.getMaxDisplayText()} />
+     *
+     * // Multiline: value on first line, unit on second
+     * <RadialText
+     *   text={[formattedValue, unit]}
+     *   referenceText={[converter.getMaxDisplayText({ includeUnit: false }), unit]}
+     * />
+     * ```
+     */
+    getMaxDisplayText(options?: {
+        includeUnit?: boolean;
+    }): string;
+}
+/**
+ * Configuration for creating a generic continuous control parameter (for knobs, sliders, etc.).
+ */
+export interface ContinuousControlConfig {
+    id?: string;
+    name?: string;
+    label?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    bipolar?: boolean;
+    unit?: string;
+    defaultValue?: number;
+    scale?: ScaleType;
+    midiResolution?: MidiResolution;
+}
+/**
+ * Factory for common AudioParameter configurations (including MIDI-flavoured presets).
+ *
+ * This factory provides convenient methods for creating standard parameter configurations
+ * that match common MIDI and audio industry conventions. All factory methods generate
+ * parameter IDs automatically from the name.
+ */
+export declare const AudioParameterFactory: {
+    /**
+     * Creates a standard 7-bit MIDI CC parameter (0-127).
+     *
+     * This is the most common MIDI control change format, used for most hardware controllers
+     * and software synthesizers. The parameter uses 7-bit resolution (128 steps).
+     *
+     * @param name The parameter name (used to generate ID and name fields)
+     * @returns A ContinuousParameter configured for 7-bit MIDI CC
+     *
+     * @example
+     * ```ts
+     * const volumeParam = AudioParameterFactory.createMidiStandard7Bit("Volume");
+     * // { type: "continuous", min: 0, max: 127, step: 1, midiResolution: 7, ... }
+     * ```
+     */
+    createMidiStandard7Bit: (name: string) => ContinuousParameter;
+    /**
+     * Creates a standard 14-bit MIDI CC parameter (0-16383).
+     *
+     * This provides higher resolution than 7-bit CC, useful for parameters that require
+     * fine-grained control. The parameter uses 14-bit resolution (16,384 steps).
+     *
+     * @param name The parameter name (used to generate ID and name fields)
+     * @returns A ContinuousParameter configured for 14-bit MIDI CC
+     *
+     * @example
+     * ```ts
+     * const fineTuneParam = AudioParameterFactory.createMidiStandard14Bit("Fine Tune");
+     * // { type: "continuous", min: 0, max: 16383, step: 1, midiResolution: 14, ... }
+     * ```
+     */
+    createMidiStandard14Bit: (name: string) => ContinuousParameter;
+    /**
+     * Creates a bipolar 7-bit MIDI CC parameter (-64 to 63, centered at 0).
+     *
+     * This is useful for parameters that have a center point, such as pan controls or
+     * modulation depth. The range is symmetric around zero, with 64 steps in each direction.
+     *
+     * @param name The parameter name (used to generate ID and name fields)
+     * @returns A ContinuousParameter configured for bipolar 7-bit MIDI CC
+     *
+     * @example
+     * ```ts
+     * const panParam = AudioParameterFactory.createMidiBipolar7Bit("Pan");
+     * // { type: "continuous", min: -64, max: 63, step: 1, defaultValue: 0, ... }
+     * ```
+     */
+    createMidiBipolar7Bit: (name: string) => ContinuousParameter;
+    /**
+     * Creates a bipolar 14-bit MIDI CC parameter (-8192 to 8191, centered at 0).
+     *
+     * This provides high-resolution bipolar control, useful for parameters that require
+     * fine-grained adjustment around a center point. The range is symmetric around zero,
+     * with 8,192 steps in each direction.
+     *
+     * @param name The parameter name (used to generate ID and name fields)
+     * @returns A ContinuousParameter configured for bipolar 14-bit MIDI CC
+     *
+     * @example
+     * ```ts
+     * const finePanParam = AudioParameterFactory.createMidiBipolar14Bit("Fine Pan");
+     * // { type: "continuous", min: -8192, max: 8191, step: 1, defaultValue: 0, ... }
+     * ```
+     */
+    createMidiBipolar14Bit: (name: string) => ContinuousParameter;
+    /**
+     * Creates a bipolar parameter with custom range (centered at 0).
+     *
+     * This is a flexible factory method for creating bipolar parameters with any range.
+     * The parameter is symmetric around zero, useful for pan controls, modulation depth,
+     * or any parameter that has a neutral center point.
+     *
+     * @param name The parameter name (used to generate ID and name fields)
+     * @param range The range value (default: 100). The parameter will span from -range to +range
+     * @param unit Optional unit suffix (e.g., "dB", "%")
+     * @returns A ContinuousParameter configured for bipolar control
+     *
+     * @example
+     * ```ts
+     * const panParam = AudioParameterFactory.createBipolar("Pan", 100, "%");
+     * // { type: "continuous", min: -100, max: 100, step: 1, defaultValue: 0, unit: "%", ... }
+     *
+     * const modDepthParam = AudioParameterFactory.createBipolar("Mod Depth", 50);
+     * // { type: "continuous", min: -50, max: 50, step: 1, defaultValue: 0, ... }
+     * ```
+     */
+    createBipolar: (name: string, range?: number, unit?: string) => ContinuousParameter;
+    /**
+     * Creates a boolean switch parameter (Off/On).
+     *
+     * This factory method creates a boolean parameter suitable for on/off controls,
+     * with support for both toggle (latch) and momentary modes.
+     *
+     * @param name The parameter name (used to generate ID and name fields)
+     * @param mode The switch mode: "toggle" (latch) or "momentary" (only active while pressed)
+     * @returns A BooleanParameter configured as a switch
+     *
+     * @example
+     * ```ts
+     * const powerParam = AudioParameterFactory.createSwitch("Power", "toggle");
+     * // { type: "boolean", mode: "toggle", trueLabel: "On", falseLabel: "Off", ... }
+     *
+     * const recordParam = AudioParameterFactory.createSwitch("Record", "momentary");
+     * // { type: "boolean", mode: "momentary", ... }
+     * ```
+     */
+    createSwitch: (name: string, mode?: "toggle" | "momentary") => BooleanParameter;
+    /**
+     * Creates a discrete (selector) parameter.
+     *
+     * This factory method creates a discrete parameter suitable for mode selectors,
+     * preset switches, or any control that cycles through discrete options.
+     *
+     * @param name The parameter name (used to generate ID and name fields)
+     * @param options Array of option objects, each with a value and label
+     * @returns A DiscreteParameter configured as a selector
+     *
+     * @example
+     * ```ts
+     * const waveParam = AudioParameterFactory.createSelector("Waveform", [
+     *   { value: "sine", label: "Sine" },
+     *   { value: "square", label: "Square" },
+     *   { value: "sawtooth", label: "Sawtooth" }
+     * ]);
+     * ```
+     */
+    createSelector: (name: string, options: Array<{
+        value: string | number;
+        label: string;
+    }>) => DiscreteParameter;
+    /**
+     * Creates a generic continuous control parameter (for ad-hoc UI controls like Knob/Slider).
+     *
+     * This is the most flexible factory method, allowing you to specify all aspects of a
+     * continuous parameter. It's useful when you need a parameter that doesn't fit the
+     * standard MIDI presets.
+     *
+     * The method handles bipolar mode automatically: if `bipolar` is true, it adjusts
+     * min/max to be symmetric around zero when only one boundary is provided. For default values:
+     * - If `defaultValue` is provided, it is used (even when `bipolar=true`)
+     * - If `defaultValue` is not provided and `bipolar=true`, the center of the range is calculated
+     *   (0 for symmetric ranges, otherwise the midpoint)
+     * - If `defaultValue` is not provided and `bipolar=false`, falls back to `min` or 0
+     *
+     * @param config Configuration object with optional fields for all parameter properties
+     * @returns A ContinuousParameter configured according to the provided config
+     *
+     * @example
+     * ```ts
+     * const volumeParam = AudioParameterFactory.createControl({
+     *   name: "Volume",
+     *   min: 0,
+     *   max: 100,
+     *   step: 0.1,
+     *   unit: "dB",
+     *   scale: "log"
+     * });
+     *
+     * const panParam = AudioParameterFactory.createControl({
+     *   name: "Pan",
+     *   bipolar: true,
+     *   unit: "%"
+     * });
+     * // Automatically sets min: -100, max: 100, defaultValue: 0
+     *
+     * const customBipolarParam = AudioParameterFactory.createControl({
+     *   name: "Custom",
+     *   min: 0,
+     *   max: 127,
+     *   bipolar: true,
+     *   defaultValue: 64
+     * });
+     * // Uses provided defaultValue: 64 (center of 0-127 range)
+     * ```
+     */
+    createControl: (config: ContinuousControlConfig) => ContinuousParameter;
+};
+export {};
+//# sourceMappingURL=AudioParameter.d.ts.map

package/dist/model/AudioParameter.d.ts.map

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

package/dist/styles/styles.css

@@ -0,0 +1,256 @@
+/*
+ * Copyright (c) 2026 Tylium.
+ * SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-TELF-1.0
+ * See LICENSE.md for details.
+ */
+
+@import url("themes.css");
+
+/* ==========================================================================
+   Base Element Styles
+   ========================================================================== */
+
+/* Form input elements - inherit theme text color and font size */
+textarea,
+input {
+    color: var(--audioui-text-color);
+    background-color: transparent;
+    font-size: var(--audioui-default-font-size);
+}
+
+/* ==========================================================================
+   SVG and Icon Styles
+   ========================================================================== */
+
+/* Prevent text selection in SVG content */
+svg text,
+svg foreignObject div {
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: default;
+}
+
+/* Make inline SVGs in knob content inherit text color */
+/* This works for inline <svg> elements and SVG components from libraries like react-icons */
+svg foreignObject div svg {
+    fill: currentColor;
+    color: inherit;
+    /* Ensure SVG icons scale down to fit, creating a visual margin */
+    max-width: 75%;
+    max-height: 75%;
+}
+
+/* Icon wrapper class for HTML overlay - ensures SVG icons fill their container */
+/* Used by CycleButton and other components that render icons in the overlay */
+.audioui-icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Ensure SVG icons inside the wrapper fill the container and inherit color */
+/* Icons automatically inherit text color via currentColor */
+.audioui-icon-wrapper svg {
+    width: 100%;
+    height: 100%;
+    fill: currentColor;
+    color: inherit;
+}
+
+/* ==========================================================================
+   Component Base Classes
+   ========================================================================== */
+
+/* Root class for all AudioUI components */
+.audioui {
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: default;
+}
+
+/* Container helper class for components that manage their own SVG sizing */
+.audioui-component-container {
+    height: auto;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+/* Remove default outline from SVG elements */
+.audioui-component-container svg {
+    height: auto;
+    outline: none;
+}
+
+/* ==========================================================================
+   Interactive States and Accessibility
+   ========================================================================== */
+
+/* Highlight effect for interactive components */
+/* Uses --audioui-highlight-effect from themes.css (user-customizable) */
+/*
+ * CSS isolation on text and foreignObject elements prevents the filter from affecting them,
+ * allowing the filter to affect only the SVG graphics (paths, circles, etc.) without
+ * requiring manual filter resets. This is cleaner than resetting filters on each element type.
+ */
+.audioui-highlight {
+    will-change: filter;
+    /* Fast transition for realtime audio UI - instant feedback preferred */
+    transition: filter var(--audioui-highlight-transition-duration) linear;
+}
+
+/* Apply highlight on hover OR when focused (keyboard/click) */
+/* The actual effect is defined by --audioui-highlight-effect in themes.css */
+/* Using :is() for cleaner selector grouping (modern browsers) */
+.audioui-highlight:hover,
+.audioui-highlight:focus,
+.audioui-highlight:focus-visible {
+    filter: var(--audioui-highlight-effect);
+    outline: none; /* Remove default browser focus ring */
+}
+
+/* Prevent filter from affecting text elements by isolating them */
+.audioui-highlight text {
+    isolation: isolate;
+}
+
+/* Prevent filter from affecting foreignObject elements (HTML content) by isolating them */
+.audioui-highlight foreignObject {
+    isolation: isolate;
+}
+
+/* ==========================================================================
+   Color Utility Classes
+   ========================================================================== */
+
+/* Base utility classes - only work if --audioui-primary-color is set by user */
+.audioui-stroke-primary {
+    stroke: var(--audioui-primary-color);
+}
+
+.audioui-fill-text {
+    fill: var(--audioui-text-color);
+}
+
+.audioui-fill-primary {
+    fill: var(--audioui-primary-color);
+}
+
+.audioui-fill-transparent {
+    fill: transparent;
+}
+
+.audioui-border-primary {
+    border-color: var(--audioui-primary-color);
+}
+
+.audioui-text-primary {
+    color: var(--audioui-primary-color);
+}
+
+/* ==========================================================================
+   Size Utility Classes
+   ========================================================================== */
+
+/* Square components (Button, Knob, CycleButton) - 1x1 aspect ratio */
+.audioui-size-square-xsmall {
+    width: var(--audioui-size-square-xsmall);
+    height: var(--audioui-size-square-xsmall);
+}
+
+.audioui-size-square-small {
+    width: var(--audioui-size-square-small);
+    height: var(--audioui-size-square-small);
+}
+
+.audioui-size-square-normal {
+    width: var(--audioui-size-square-normal);
+    height: var(--audioui-size-square-normal);
+}
+
+.audioui-size-square-large {
+    width: var(--audioui-size-square-large);
+    height: var(--audioui-size-square-large);
+}
+
+.audioui-size-square-xlarge {
+    width: var(--audioui-size-square-xlarge);
+    height: var(--audioui-size-square-xlarge);
+}
+
+/* Horizontal Slider (1x2 aspect ratio - width > height) */
+.audioui-size-hslider-xsmall {
+    width: var(--audioui-size-hslider-width-xsmall);
+    height: var(--audioui-size-hslider-height-xsmall);
+}
+
+.audioui-size-hslider-small {
+    width: var(--audioui-size-hslider-width-small);
+    height: var(--audioui-size-hslider-height-small);
+}
+
+.audioui-size-hslider-normal {
+    width: var(--audioui-size-hslider-width-normal);
+    height: var(--audioui-size-hslider-height-normal);
+}
+
+.audioui-size-hslider-large {
+    width: var(--audioui-size-hslider-width-large);
+    height: var(--audioui-size-hslider-height-large);
+}
+
+.audioui-size-hslider-xlarge {
+    width: var(--audioui-size-hslider-width-xlarge);
+    height: var(--audioui-size-hslider-height-xlarge);
+}
+
+/* Vertical Slider (2x1 aspect ratio - height > width) */
+.audioui-size-vslider-xsmall {
+    width: var(--audioui-size-vslider-width-xsmall);
+    height: var(--audioui-size-vslider-height-xsmall);
+}
+
+.audioui-size-vslider-small {
+    width: var(--audioui-size-vslider-width-small);
+    height: var(--audioui-size-vslider-height-small);
+}
+
+.audioui-size-vslider-normal {
+    width: var(--audioui-size-vslider-width-normal);
+    height: var(--audioui-size-vslider-height-normal);
+}
+
+.audioui-size-vslider-large {
+    width: var(--audioui-size-vslider-width-large);
+    height: var(--audioui-size-vslider-height-large);
+}
+
+.audioui-size-vslider-xlarge {
+    width: var(--audioui-size-vslider-width-xlarge);
+    height: var(--audioui-size-vslider-height-xlarge);
+}
+
+/* Keys (1x5 aspect ratio - width > height) */
+.audioui-size-keys-xsmall {
+    width: var(--audioui-size-keys-width-xsmall);
+    height: var(--audioui-size-keys-height-xsmall);
+}
+
+.audioui-size-keys-small {
+    width: var(--audioui-size-keys-width-small);
+    height: var(--audioui-size-keys-height-small);
+}
+
+.audioui-size-keys-normal {
+    width: var(--audioui-size-keys-width-normal);
+    height: var(--audioui-size-keys-height-normal);
+}
+
+.audioui-size-keys-large {
+    width: var(--audioui-size-keys-width-large);
+    height: var(--audioui-size-keys-height-large);
+}
+
+.audioui-size-keys-xlarge {
+    width: var(--audioui-size-keys-width-xlarge);
+    height: var(--audioui-size-keys-height-xlarge);
+}