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

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

@@ -0,0 +1,90 @@
+import { default as React } from 'react';
+import { ControlComponent, SliderVariant, SliderCursorSize } from '../../types';
+
+/**
+ * Props for the SliderView component
+ */
+export type SliderViewProps = {
+    /** Normalized value between 0 and 1 */
+    normalizedValue: number;
+    /** Whether to start fill from center (bipolar mode) */
+    bipolar?: boolean;
+    /** Visual variant of the slider */
+    variant?: SliderVariant;
+    /** Orientation of the slider */
+    orientation?: "horizontal" | "vertical";
+    /** Thickness of the slider (normalized 0.0-1.0, maps to 1-50) */
+    thickness?: number;
+    /** Corner roundness (normalized 0.0-1.0, maps to 0-20, or CSS variable string) */
+    roundness?: number | string;
+    /** Color prop (kept for API compatibility, but colors are read from CSS variables) */
+    color?: string;
+    /** 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;
+    /** Additional CSS class name */
+    className?: string;
+    /** Content to render (unused in default slider but required by generic props) */
+    children?: React.ReactNode;
+};
+/**
+ * Pure SVG presentation component for a slider.
+ * Renders background and filled rectangles based on normalized value.
+ *
+ * Colors are read from CSS variables (`--audioui-primary-color`, `--audioui-primary-50`)
+ * which are set by the parent Slider component based on the `color` prop.
+ *
+ * **Performance Optimizations:**
+ * - Memoized calculations: thickness translation, layout coordinates, strip padding, cursor dimensions, style objects
+ * - Constants moved outside component to avoid unnecessary dependency array entries
+ * - Simple boolean checks and nullish coalescing are not memoized (minimal overhead)
+ * - Style objects memoized to prevent unnecessary re-renders of child components
+ *
+ * @param {number} normalizedValue - Value between 0 and 1
+ * @param {boolean} [bipolar=false] - Whether to fill from center (bipolar mode)
+ * @param {SliderVariant} [variant="abstract"] - Visual variant of the slider
+ * @param {"horizontal" | "vertical"} [orientation="vertical"] - Orientation of the slider
+ * @param {number} [thickness=0.4] - Normalized thickness 0.0-1.0 (maps to 1-50)
+ * @param {number | string} [roundness] - Normalized roundness 0.0-1.0 (maps to 0-20) or CSS variable string
+ * @param {string} [color] - Color prop (kept for API compatibility, but not used - CSS variables are used instead)
+ * @param {SliderCursorSize} [cursorSize] - Cursor size option (None, Strip, Track, Tick, Label)
+ * @param {number} [cursorAspectRatio] - Aspect ratio of the cursor
+ * @param {number | string} [cursorRoundness] - Overrides cursor roundness (defaults to roundness prop)
+ * @param {string} [cursorImageHref] - Optional image URL for cursor
+ * @param {string} [cursorClassName] - Optional CSS class name for cursor
+ * @param {React.CSSProperties} [cursorStyle] - Optional inline styles for cursor
+ * @param {string} [className] - Optional CSS class name
+ * @returns {JSX.Element} SVG group element containing background and foreground strips
+ */
+declare function SliderView({ normalizedValue, bipolar, variant, orientation, thickness, roundness, cursorSize, cursorAspectRatio, cursorRoundness, cursorImageHref, cursorClassName, cursorStyle, className, }: SliderViewProps): JSX.Element;
+declare namespace SliderView {
+    var viewBox: {
+        readonly vertical: {
+            readonly width: 100;
+            readonly height: 300;
+        };
+        readonly horizontal: {
+            readonly width: 300;
+            readonly height: 100;
+        };
+    };
+}
+/**
+ * Props for specialized slider views (without normalizedValue, children, className, style, orientation)
+ */
+type SpecializedSliderProps = Omit<SliderViewProps, "normalizedValue" | "children" | "className" | "style" | "orientation">;
+declare const VerticalSliderView: ControlComponent<SpecializedSliderProps>;
+declare const HorizontalSliderView: ControlComponent<SpecializedSliderProps>;
+export { VerticalSliderView, HorizontalSliderView };
+declare const _default: React.MemoExoticComponent<typeof SliderView>;
+export default _default;
+//# sourceMappingURL=SliderView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SliderView.d.ts","sourceRoot":"","sources":["../../../../src/components/defaults/controls/SliderView.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAE,gBAAgB,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAS5E;;GAEG;AACH,MAAM,MAAM,eAAe,GAAG;IAC1B,uCAAuC;IACvC,eAAe,EAAE,MAAM,CAAC;IACxB,uDAAuD;IACvD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mCAAmC;IACnC,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,gCAAgC;IAChC,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IACxC,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kFAAkF;IAClF,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,sFAAsF;IACtF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,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;IAClC,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,iBAAS,UAAU,CAAC,EAChB,eAAe,EACf,OAAe,EACf,OAAoB,EACpB,WAAwB,EACxB,SAAe,EACf,SAA6B,EAC7B,UAAU,EACV,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,eAAe,EACf,WAAW,EACX,SAAS,GACZ,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CAoK/B;kBAlLQ,UAAU;;;;;;;;;;;;AAsMnB;;GAEG;AACH,KAAK,sBAAsB,GAAG,IAAI,CAC9B,eAAe,EACf,iBAAiB,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,GAAG,aAAa,CACzE,CAAC;AAiCF,QAAA,MAAM,kBAAkB,EAAwC,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;AAgCzG,QAAA,MAAM,oBAAoB,EAA0C,gBAAgB,CAAC,sBAAsB,CAAC,CAAC;AAE7G,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,CAAC;;AACpD,wBAAsC"}

package/dist/components/defaults/devices/Keys.d.ts

@@ -0,0 +1,104 @@
+import { default as React } from 'react';
+import { AdaptiveBoxProps, AdaptiveSizeProps, AudioControlEvent, BaseProps, ThemableProps } from '../../types';
+import { WHITE_KEY_NAMES } from '@cutoff/audio-ui-core';
+
+/**
+ * Type definition for note names (C to B)
+ */
+type NoteName = (typeof WHITE_KEY_NAMES)[number];
+/**
+ * Props for the Keys component
+ */
+export type KeysProps = BaseProps & AdaptiveSizeProps & Omit<AdaptiveBoxProps, "labelMode" | "labelPosition" | "labelAlign"> & ThemableProps & {
+    /** Number of keys on the keyboard
+     * @default 61 */
+    nbKeys?: number;
+    /** Starting note name (A-G)
+     * @default 'C' for 61 keys, 'A' for 88 keys */
+    startKey?: NoteName;
+    /** Octave transpose index (default: 0)
+     * Positive values shift notes up by that many octaves, negative values shift down
+     * @default 0 */
+    octaveShift?: number;
+    /** Array of notes that should be highlighted
+     * Notes can be specified as:
+     * - Strings in the format: NoteName + Octave (+ optional '#' for sharp), e.g., 'C4', 'F#5'
+     * - Numbers representing MIDI note IDs (e.g., 60 for C4, 61 for C#4, etc.)
+     * @example ['C4', 'E4', 'G4'] or [60, 64, 67] or ['C4', 64, 'G4'] */
+    notesOn?: (string | number)[];
+    /** Key styling mode
+     * - 'theme': Uses theme colors (current behavior, uses color prop and themable hook)
+     * - 'classic': Classic piano style with ivory white keys and ebony black keys
+     * - 'classic-inverted': Inverted classic style with ebony white keys and ivory black keys
+     * @default 'theme' */
+    keyStyle?: "theme" | "classic" | "classic-inverted";
+    /** Callback triggered when a key is pressed or released.
+     * Only active if this prop is provided. */
+    onChange?: (event: AudioControlEvent<{
+        note: number;
+        active: boolean;
+    }>) => void;
+};
+/**
+ * Piano Keys component that renders a piano keyboard visualization.
+ * Supports variable number of keys, different starting positions, and note highlighting.
+ *
+ * Features:
+ * - Configurable number of keys (default 61, supports any number from 1 to 128)
+ * - Customizable starting position (note and octave)
+ * - Highlights active notes (supports both note names and MIDI note numbers)
+ * - Maintains proper piano key layout and proportions
+ * - Responsive sizing through AdaptiveSvgComponent integration
+ * - Multiple size variants (xsmall, small, normal, large, xlarge)
+ *
+ * @property {boolean} adaptiveSize - Whether the keys component fills its container (ignores size constraints when true)
+ * @property {number} nbKeys - Number of keys on the keyboard (default 61)
+ * @property {NoteName} startKey - Starting note name (A-G) (default 'C' for 61 keys, 'A' for 88 keys)
+ * @property {number} octaveShift - Octave transpose index (default 0). Positive values shift notes up by that many octaves, negative values shift down.
+ * @property {(string | number)[]} notesOn - Array of notes that should be highlighted. Can contain note names (e.g., 'C4') or MIDI note numbers (e.g., 60 for C4).
+ * @property {string} className - Additional CSS classes
+ * @property {React.CSSProperties} style - Additional inline styles
+ * @property {SizeType} size - Size of the component (xsmall, small, normal, large, xlarge)
+ * @property {"theme" | "classic" | "classic-inverted"} keyStyle - Key styling mode (default "theme")
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Keys />
+ *
+ * // Full piano configuration with note names
+ * <Keys
+ *   nbKeys={88}
+ *   startKey="A"
+ *   octaveShift={0}
+ *   notesOn={['C4', 'E4', 'G4']}
+ * />
+ *
+ * // Using MIDI note numbers
+ * <Keys
+ *   notesOn={[60, 64, 67]} // C4, E4, G4
+ * />
+ *
+ * // Mixing note names and MIDI note numbers
+ * <Keys
+ *   notesOn={['C4', 64, 'G4']} // C4, E4, G4
+ * />
+ *
+ * // Custom styling with size
+ * <Keys
+ *   className="my-keyboard"
+ *   style={{ marginTop: '20px' }}
+ *   size="large"
+ * />
+ *
+ * // Classic piano style
+ * <Keys keyStyle="classic" />
+ *
+ * // Inverted classic style
+ * <Keys keyStyle="classic-inverted" />
+ * ```
+ */
+declare function Keys({ nbKeys, startKey, octaveShift, notesOn, adaptiveSize, size, displayMode, keyStyle, color, roundness, className, style, onChange, onClick, }: KeysProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof Keys>;
+export default _default;
+//# sourceMappingURL=Keys.d.ts.map

package/dist/components/defaults/devices/Keys.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Keys.d.ts","sourceRoot":"","sources":["../../../../src/components/defaults/devices/Keys.tsx"],"names":[],"mappings":"AAQA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAGpD,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAK3G,OAAO,EAKH,eAAe,EAGlB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,kCAAkC,CAAC;AAK1C;;GAEG;AACH,KAAK,QAAQ,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAGjD;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,SAAS,GAC7B,iBAAiB,GAGjB,IAAI,CAAC,gBAAgB,EAAE,WAAW,GAAG,eAAe,GAAG,YAAY,CAAC,GACpE,aAAa,GAAG;IACZ;qBACiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;mDAC+C;IAC/C,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB;;oBAEgB;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;yEAIqE;IACrE,OAAO,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;IAC9B;;;;0BAIsB;IACtB,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,kBAAkB,CAAC;IACpD;+CAC2C;IAC3C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,OAAO,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;CACpF,CAAC;AASN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0DG;AACH,iBAAS,IAAI,CAAC,EACV,MAAW,EACX,QAAoC,EACpC,WAAe,EACf,OAAY,EACZ,YAAoB,EACpB,IAAe,EACf,WAAW,EACX,QAAkB,EAClB,KAAK,EACL,SAAS,EACT,SAAc,EACd,KAAU,EACV,QAAQ,EACR,OAAO,GACV,EAAE,SAAS,2CAiZX;;AAGD,wBAAgC"}

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

@@ -0,0 +1,58 @@
+import { default as React } from 'react';
+import { AdaptiveBoxProps, AdaptiveSizeProps, BooleanControlProps } from '../../types';
+import { FilmstripProps } from './FilmStripContinuousControl';
+
+/**
+ * Props for the FilmStripBooleanControl component
+ */
+export type FilmStripBooleanControlProps = BooleanControlProps & AdaptiveSizeProps & AdaptiveBoxProps & FilmstripProps & {
+    /**
+     * If true, inverts the normalized value passed to the view (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;
+};
+/**
+ * A boolean control that displays frames from a filmstrip sprite sheet.
+ *
+ * This component supports the widely-used current industry standard for control representation:
+ * bitmap sprite sheets (filmstrips). While bitmap-based visualization is more constrained
+ * than SVG (no dynamic theming, fixed visual appearance), 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
+ *
+ * Typically uses 2 frames: frame 0 for false/off, frame 1 for true/on.
+ *
+ * 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 FilmStripBooleanControl component
+ *
+ * @example
+ * ```tsx
+ * <FilmStripBooleanControl
+ *   value={isOn}
+ *   onChange={(e) => setIsOn(e.value)}
+ *   label="Power"
+ *   latch={true}
+ *   frameWidth={100}
+ *   frameHeight={100}
+ *   frameCount={2}
+ *   imageHref="/button-frames.png"
+ * />
+ * ```
+ */
+declare function FilmStripBooleanControl({ latch, value, onChange, label, adaptiveSize, size, displayMode, labelMode, labelPosition, labelAlign, frameWidth, frameHeight, frameCount, imageHref, orientation, frameRotation, invertValue, parameter, paramId, midiResolution, onClick, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, className, style, }: FilmStripBooleanControlProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FilmStripBooleanControl>;
+export default _default;
+//# sourceMappingURL=FilmStripBooleanControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilmStripBooleanControl.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/controls/FilmStripBooleanControl.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnF,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,4BAA4B,GAAG,mBAAmB,GAC1D,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,GAAG;IACb;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,iBAAS,uBAAuB,CAAC,EAC7B,KAAa,EACb,KAAa,EACb,QAAQ,EACR,KAAK,EACL,YAAoB,EACpB,IAAe,EACf,WAAW,EACX,SAAS,EACT,aAAa,EACb,UAAU,EACV,UAAU,EACV,WAAW,EACX,UAAU,EACV,SAAS,EACT,WAAwB,EACxB,aAAiB,EACjB,WAAmB,EACnB,SAAS,EACT,OAAO,EACP,cAAc,EACd,OAAO,EACP,WAAW,EACX,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,KAAK,GACR,EAAE,4BAA4B,2CAqC9B;;AAED,wBAAmD"}

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

@@ -0,0 +1,82 @@
+import { default as React } from 'react';
+import { AdaptiveBoxProps, AdaptiveSizeProps, ContinuousControlProps, ValueLabelMode } from '../../types';
+
+/**
+ * Props specific to filmstrip controls
+ */
+export type FilmstripProps = {
+    /** Width of a SINGLE frame in the filmstrip */
+    frameWidth: number;
+    /** Height of a SINGLE frame in the filmstrip */
+    frameHeight: number;
+    /** Total number of frames in the strip */
+    frameCount: 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;
+};
+/**
+ * Props for the FilmStripContinuousControl component
+ */
+export type FilmStripContinuousControlProps = ContinuousControlProps & AdaptiveSizeProps & AdaptiveBoxProps & FilmstripProps & {
+    /**
+     * 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;
+    /**
+     * If true, inverts the normalized value (0.0 -> 1.0 and 1.0 -> 0.0).
+     * Useful for filmstrips where frame 0 represents the maximum value and frame N represents the minimum value.
+     * @default false
+     */
+    invertValue?: boolean;
+};
+/**
+ * A continuous control that displays frames from a filmstrip sprite sheet.
+ *
+ * This component supports the widely-used current industry standard for control representation:
+ * bitmap sprite sheets (filmstrips). While bitmap-based visualization is more constrained
+ * than SVG (no dynamic theming, fixed visual appearance), this component provides full
+ * access to all library features:
+ *
+ * - Complete layout system: AdaptiveBox with all sizing modes, label positioning, alignment
+ * - Full parameter model: AudioParameter with min/max ranges, scaling functions, units, formatting
+ * - Complete interaction system: Drag, wheel, and keyboard with configurable sensitivity and modes
+ * - Full accessibility: ARIA attributes, focus management, keyboard navigation
+ *
+ * The frame displayed is determined by the normalized value (0-1 maps to frame 0 to frameCount-1).
+ *
+ * Supports two modes of operation:
+ * 1. Parameter model mode: Provide `parameter` (ContinuousParameter) - all range/label info comes from the model
+ * 2. Ad-hoc mode: Provide `min`, `max`, `step`, `label` directly as props
+ *
+ * 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 FilmStripContinuousControl component
+ *
+ * @example
+ * ```tsx
+ * <FilmStripContinuousControl
+ *   value={50}
+ *   min={0}
+ *   max={100}
+ *   label="Volume"
+ *   frameWidth={100}
+ *   frameHeight={100}
+ *   frameCount={64}
+ *   imageHref="/knob-frames.png"
+ * />
+ * ```
+ */
+declare function FilmStripContinuousControl({ min, max, step, bipolar, value, onChange, valueFormatter, label, adaptiveSize, size, displayMode, labelMode, labelPosition, labelAlign, frameWidth, frameHeight, frameCount, imageHref, orientation, frameRotation, parameter, unit, scale, paramId, interactionMode, interactionDirection, interactionSensitivity, valueAsLabel, midiResolution, defaultValue, invertValue, onClick, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, className, style, }: FilmStripContinuousControlProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FilmStripContinuousControl>;
+export default _default;
+//# sourceMappingURL=FilmStripContinuousControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilmStripContinuousControl.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/controls/FilmStripContinuousControl.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGtG;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG;IACzB,+CAA+C;IAC/C,UAAU,EAAE,MAAM,CAAC;IACnB,gDAAgD;IAChD,WAAW,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB,8CAA8C;IAC9C,SAAS,EAAE,MAAM,CAAC;IAClB,qDAAqD;IACrD,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACxC,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,+BAA+B,GAAG,sBAAsB,GAChE,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,GAAG;IACb;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC;IAC9B;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,iBAAS,0BAA0B,CAAC,EAChC,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,UAAU,EACV,WAAW,EACX,UAAU,EACV,SAAS,EACT,WAAwB,EACxB,aAAiB,EACjB,SAAS,EACT,IAAI,EACJ,KAAK,EACL,OAAO,EACP,eAAe,EACf,oBAAoB,EACpB,sBAAsB,EACtB,YAA0B,EAC1B,cAAc,EACd,YAAY,EACZ,WAAmB,EACnB,OAAO,EACP,WAAW,EACX,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,KAAK,GACR,EAAE,+BAA+B,2CAgDjC;;AAED,wBAAsD"}

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

@@ -0,0 +1,55 @@
+import { default as React } from 'react';
+import { AdaptiveBoxProps, AdaptiveSizeProps, DiscreteControlProps } from '../../types';
+import { FilmstripProps } from './FilmStripContinuousControl';
+
+/**
+ * Props for the FilmStripDiscreteControl component
+ */
+export type FilmStripDiscreteControlProps = DiscreteControlProps & AdaptiveSizeProps & AdaptiveBoxProps & FilmstripProps;
+/**
+ * A discrete control that displays frames from a filmstrip sprite sheet.
+ *
+ * This component supports the widely-used current industry standard for control representation:
+ * bitmap sprite sheets (filmstrips). While bitmap-based visualization is more constrained
+ * than SVG (no dynamic theming, fixed visual appearance), this component provides full
+ * access to all library features:
+ *
+ * - Complete layout system: AdaptiveBox with all sizing modes, label positioning, alignment
+ * - Full parameter model: DiscreteParameter with options, labels, value mapping
+ * - Complete interaction system: Click and keyboard interactions for cycling/stepping
+ * - Full accessibility: ARIA attributes, focus management, keyboard navigation
+ *
+ * The frame displayed is determined by mapping the current value to a frame index.
+ *
+ * Supports three modes of operation:
+ * 1. Ad-Hoc Mode (Children only): Model inferred from OptionView children.
+ * 2. Strict Mode (Parameter only): Model provided via parameter prop. View via renderOption.
+ * 3. Hybrid Mode (Parameter + Children): Model from parameter, View from children (matched by value).
+ *
+ * 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 FilmStripDiscreteControl component
+ *
+ * @example
+ * ```tsx
+ * <FilmStripDiscreteControl
+ *   value="sine"
+ *   onChange={(e) => setValue(e.value)}
+ *   frameWidth={100}
+ *   frameHeight={100}
+ *   frameCount={4}
+ *   imageHref="/waveform-frames.png"
+ * >
+ *   <Option value="sine">Sine</Option>
+ *   <Option value="square">Square</Option>
+ *   <Option value="triangle">Triangle</Option>
+ *   <Option value="sawtooth">Sawtooth</Option>
+ * </FilmStripDiscreteControl>
+ * ```
+ */
+declare function FilmStripDiscreteControl({ value, defaultValue, onChange, label, adaptiveSize, size, displayMode, labelMode, labelPosition, labelAlign, frameWidth, frameHeight, frameCount, imageHref, orientation, frameRotation, parameter, paramId, options, midiResolution, midiMapping, children, onClick, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, className, style, }: FilmStripDiscreteControlProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof FilmStripDiscreteControl>;
+export default _default;
+//# sourceMappingURL=FilmStripDiscreteControl.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilmStripDiscreteControl.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/controls/FilmStripDiscreteControl.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEpF,OAAO,EAAE,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9D;;GAEG;AACH,MAAM,MAAM,6BAA6B,GAAG,oBAAoB,GAC5D,iBAAiB,GACjB,gBAAgB,GAChB,cAAc,CAAC;AAEnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,iBAAS,wBAAwB,CAAC,EAC9B,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,YAAoB,EACpB,IAAe,EACf,WAAW,EACX,SAAS,EACT,aAAa,EACb,UAAU,EACV,UAAU,EACV,WAAW,EACX,UAAU,EACV,SAAS,EACT,WAAwB,EACxB,aAAiB,EACjB,SAAS,EACT,OAAO,EACP,OAAO,EACP,cAAc,EACd,WAAW,EACX,QAAQ,EACR,OAAO,EACP,WAAW,EACX,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,KAAK,GACR,EAAE,6BAA6B,2CAwC/B;;AAED,wBAAoD"}

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

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+import { ControlComponent } from '../../types';
+
+/**
+ * Props specific to filmstrip visualization
+ */
+export type FilmstripViewProps = {
+    /** Normalized value between 0 and 1 */
+    normalizedValue: number;
+    /** Width of a SINGLE frame */
+    frameWidth: number;
+    /** Height of a SINGLE frame */
+    frameHeight: number;
+    /** Total number of frames in the strip */
+    frameCount: 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;
+    /** Content to render (unused in filmstrip but required by generic props) */
+    children?: React.ReactNode;
+};
+type FilmstripViewComponentProps = Omit<FilmstripViewProps, "normalizedValue" | "className" | "style" | "children">;
+declare const _default: ControlComponent<FilmstripViewComponentProps>;
+export default _default;
+//# sourceMappingURL=FilmstripView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FilmstripView.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/controls/FilmstripView.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG3C;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC7B,uCAAuC;IACvC,eAAe,EAAE,MAAM,CAAC;IACxB,8BAA8B;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,+BAA+B;IAC/B,WAAW,EAAE,MAAM,CAAC;IACpB,0CAA0C;IAC1C,UAAU,EAAE,MAAM,CAAC;IACnB,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,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,CAAC;AAkEF,KAAK,2BAA2B,GAAG,IAAI,CAAC,kBAAkB,EAAE,iBAAiB,GAAG,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC;wBAErE,gBAAgB,CAAC,2BAA2B,CAAC;AAA5F,wBAA6F"}

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

@@ -0,0 +1,74 @@
+import { default as React } from 'react';
+import { AdaptiveBoxProps, AdaptiveSizeProps, ContinuousControlProps, ValueLabelMode } from '../../types';
+
+/**
+ * Props specific to rotary image controls
+ */
+export type RotaryImageProps = {
+    /** Width of the viewBox (determines viewBox width) */
+    frameWidth: number;
+    /** Height of the viewBox (determines viewBox height) */
+    frameHeight: number;
+    /** URL to the image to rotate */
+    imageHref: string;
+    /** Optional rotation angle offset in degrees (default: 0) */
+    rotation?: number;
+    /** Openness of the arc in degrees (value between 0-360º; 0º: closed; 90º: 3/4 open; 180º: half-circle;)
+     * @default 90
+     */
+    openness?: number;
+};
+/**
+ * Props for the ImageKnob component
+ */
+export type ImageKnobProps = ContinuousControlProps & AdaptiveSizeProps & AdaptiveBoxProps & RotaryImageProps & {
+    /**
+     * 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 continuous control that rotates an image based on a normalized value.
+ *
+ * This component provides full access to all library features:
+ *
+ * - Complete layout system: AdaptiveBox with all sizing modes, label positioning, alignment
+ * - Full parameter model: AudioParameter with min/max ranges, scaling functions, units, formatting
+ * - Complete interaction system: Drag, wheel, and keyboard with configurable sensitivity and modes
+ * - Full accessibility: ARIA attributes, focus management, keyboard navigation
+ *
+ * The image rotation is determined by the normalized value (0-1 maps to rotation based on openness and rotation offset).
+ *
+ * Supports two modes of operation:
+ * 1. Parameter model mode: Provide `parameter` (ContinuousParameter) - all range/label info comes from the model
+ * 2. Ad-hoc mode: Provide `min`, `max`, `step`, `label` directly as props
+ *
+ * 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 ImageKnob component
+ *
+ * @example
+ * ```tsx
+ * <ImageKnob
+ *   value={50}
+ *   min={0}
+ *   max={100}
+ *   label="Volume"
+ *   frameWidth={100}
+ *   frameHeight={100}
+ *   imageHref="/knob-image.png"
+ *   openness={90}
+ *   rotation={0}
+ * />
+ * ```
+ */
+declare function ImageKnob({ min, max, step, bipolar, value, onChange, valueFormatter, label, adaptiveSize, size, displayMode, labelMode, labelPosition, labelAlign, frameWidth, frameHeight, imageHref, rotation, openness, parameter, unit, scale, paramId, interactionMode, interactionDirection, interactionSensitivity, valueAsLabel, midiResolution, defaultValue, onClick, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, className, style, }: ImageKnobProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ImageKnob>;
+export default _default;
+//# sourceMappingURL=ImageKnob.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageKnob.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/controls/ImageKnob.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,sBAAsB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGtG;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC3B,sDAAsD;IACtD,UAAU,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,WAAW,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,sBAAsB,GAC/C,iBAAiB,GACjB,gBAAgB,GAChB,gBAAgB,GAAG;IACf;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC;CACjC,CAAC;AAEN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,iBAAS,SAAS,CAAC,EACf,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,UAAU,EACV,WAAW,EACX,SAAS,EACT,QAAY,EACZ,QAAa,EACb,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,GACR,EAAE,cAAc,2CA+ChB;;AAED,wBAAqC"}

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

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+import { ControlComponent } from '../../types';
+
+/**
+ * Props specific to rotary image visualization
+ */
+export type ImageKnobViewProps = {
+    /** 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 to rotate */
+    imageHref: string;
+    /** Optional rotation angle offset in degrees (default: 0) */
+    rotation?: number;
+    /** Openness of the arc in degrees (value between 0-360º; 0º: closed; 90º: 3/4 open; 180º: half-circle;)
+     * @default 90
+     */
+    openness?: number;
+    /** Whether to start the arc from center (bipolar mode)
+     * @default false
+     */
+    bipolar?: boolean;
+    /** Optional number of discrete positions. When defined, the value will snap to the nearest position.
+     * Used by discrete controls to snap to option positions.
+     */
+    positions?: number;
+    /** Additional CSS class name */
+    className?: string;
+    /** Content to render (unused in rotary image but required by generic props) */
+    children?: React.ReactNode;
+};
+type ImageKnobViewComponentProps = Omit<ImageKnobViewProps, "normalizedValue" | "className" | "style" | "children">;
+declare const _default: ControlComponent<ImageKnobViewComponentProps>;
+export default _default;
+//# sourceMappingURL=ImageKnobView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageKnobView.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/controls/ImageKnobView.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG3C;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAC7B,uCAAuC;IACvC,eAAe,EAAE,MAAM,CAAC;IACxB,sDAAsD;IACtD,UAAU,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,WAAW,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,SAAS,EAAE,MAAM,CAAC;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,CAAC;AAuEF,KAAK,2BAA2B,GAAG,IAAI,CAAC,kBAAkB,EAAE,iBAAiB,GAAG,WAAW,GAAG,OAAO,GAAG,UAAU,CAAC,CAAC;wBAErE,gBAAgB,CAAC,2BAA2B,CAAC;AAA5F,wBAA6F"}

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

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+import { AdaptiveBoxProps, AdaptiveSizeProps, DiscreteControlProps } from '../../types';
+import { RotaryImageProps } from './ImageKnob';
+
+/**
+ * Props for the ImageRotarySwitch component
+ */
+export type ImageRotarySwitchProps = DiscreteControlProps & AdaptiveSizeProps & AdaptiveBoxProps & RotaryImageProps;
+/**
+ * A discrete control that rotates an image based on discrete option values.
+ *
+ * This component provides full access to all library features:
+ *
+ * - Complete layout system: AdaptiveBox with all sizing modes, label positioning, alignment
+ * - Full parameter model: DiscreteParameter with options, labels, value mapping
+ * - Complete interaction system: Click and keyboard interactions for cycling/stepping
+ * - Full accessibility: ARIA attributes, focus management, keyboard navigation
+ *
+ * The image rotation is determined by mapping the current value to a normalized position,
+ * with snapping to discrete positions based on the number of options.
+ *
+ * Supports three modes of operation:
+ * 1. Ad-Hoc Mode (Children only): Model inferred from OptionView children.
+ * 2. Strict Mode (Parameter only): Model provided via parameter prop. View via renderOption.
+ * 3. Hybrid Mode (Parameter + Children): Model from parameter, View from children (matched by value).
+ *
+ * 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 ImageRotarySwitch component
+ *
+ * @example
+ * ```tsx
+ * <ImageRotarySwitch
+ *   value="sine"
+ *   onChange={(e) => setValue(e.value)}
+ *   frameWidth={100}
+ *   frameHeight={100}
+ *   imageHref="/waveform-knob.png"
+ *   openness={90}
+ *   rotation={0}
+ * >
+ *   <Option value="sine">Sine</Option>
+ *   <Option value="square">Square</Option>
+ *   <Option value="triangle">Triangle</Option>
+ *   <Option value="sawtooth">Sawtooth</Option>
+ * </ImageRotarySwitch>
+ * ```
+ */
+declare function ImageRotarySwitch({ value, defaultValue, onChange, label, adaptiveSize, size, displayMode, labelMode, labelPosition, labelAlign, frameWidth, frameHeight, imageHref, rotation, openness, parameter, paramId, options, midiResolution, midiMapping, children, onClick, onMouseDown, onMouseUp, onMouseEnter, onMouseLeave, className, style, }: ImageRotarySwitchProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof ImageRotarySwitch>;
+export default _default;
+//# sourceMappingURL=ImageRotarySwitch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ImageRotarySwitch.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/controls/ImageRotarySwitch.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAGpF,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE/C;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,oBAAoB,GAAG,iBAAiB,GAAG,gBAAgB,GAAG,gBAAgB,CAAC;AAEpH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,iBAAS,iBAAiB,CAAC,EACvB,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,YAAoB,EACpB,IAAe,EACf,WAAW,EACX,SAAS,EACT,aAAa,EACb,UAAU,EACV,UAAU,EACV,WAAW,EACX,SAAS,EACT,QAAY,EACZ,QAAa,EACb,SAAS,EACT,OAAO,EACP,OAAO,EACP,cAAc,EACd,WAAW,EACX,QAAQ,EACR,OAAO,EACP,WAAW,EACX,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,KAAK,GACR,EAAE,sBAAsB,2CAuDxB;;AAED,wBAA6C"}