relly-ui 0.0.0-stage → 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,970 @@
+export declare abstract class BaseComponent<T = any> implements IBaseComponent<T>, Listenable, SerializableComponent {
+    protected bindingEngine?: BindingEngine | undefined;
+    protected presetManager?: PresetManager | undefined;
+    element: HTMLElement;
+    protected labelEl: HTMLElement;
+    protected controlEl: HTMLElement;
+    protected label: string;
+    protected tooltipText?: string;
+    protected tooltipEl?: HTMLElement;
+    protected conditionPredicate?: ConditionPredicate;
+    protected targetObject?: any;
+    protected property?: string;
+    protected initialValue?: T;
+    protected prevValue?: T;
+    protected onChangeCallback?: OnChangeCallback<T>;
+    protected isListening: boolean;
+    protected contextMenuItems?: ContextMenuItem[];
+    constructor(label: string, targetObject?: any, property?: string, bindingEngine?: BindingEngine | undefined, presetManager?: PresetManager | undefined);
+    setLabel(label: string): this;
+    getLabel(): string;
+    setTooltip(tooltip: string): this;
+    getTooltip(): string | undefined;
+    showIf(predicate: ConditionPredicate): this;
+    checkVisibility(): boolean;
+    setContextMenu(items: ContextMenuItem[]): this;
+    getContextMenu(): ContextMenuItem[] | undefined;
+    reset(): this;
+    onChange(callback: OnChangeCallback<T>): this;
+    listen(): this;
+    getValue(): T;
+    setValue(value: T): this;
+    protected disabled: boolean;
+    setDisabled(disabled: boolean): this;
+    isDisabled(): boolean;
+    checkDirty(): void;
+    protected triggerChange(value: T, prev: T): void;
+    getSerializableKey(): string | null;
+    /**
+     * Updates the UI elements based on current value.
+     * To be implemented by subclasses.
+     */
+    abstract update(): this;
+    destroy(): void;
+}
+
+export declare class BindingEngine {
+    private listeners;
+    private rafId;
+    private isRunning;
+    private isPaused;
+    register(component: Listenable): void;
+    unregister(component: Listenable): void;
+    pause(): void;
+    resume(): void;
+    private start;
+    private stop;
+    destroy(): void;
+}
+
+export declare class Button extends BaseComponent<void> {
+    private buttonEl;
+    private clickHandler?;
+    private soundEngine?;
+    constructor(label: string, onClick?: OnClickCallback, soundEngine?: SoundEngine);
+    setSoundEngine(soundEngine: SoundEngine): this;
+    setLabel(label: string): this;
+    onClick(callback: OnClickCallback): this;
+    update(): this;
+}
+
+export declare class Checkbox extends BaseComponent<boolean> {
+    private wrapperEl;
+    private boxEl;
+    private soundEngine?;
+    constructor(label: string, targetObject: any, property: string, bindingEngine?: BindingEngine, presetManager?: PresetManager, soundEngine?: SoundEngine);
+    setSoundEngine(soundEngine: SoundEngine): this;
+    update(): this;
+}
+
+export declare class ColorPicker extends BaseComponent<string> {
+    private wrapperEl;
+    private previewEl;
+    private hexTextEl;
+    private nativeColorInput;
+    private eyeDropperBtn?;
+    private swatchesContainer?;
+    private swatches;
+    private swatchButtons;
+    private soundEngine?;
+    constructor(label: string, targetObject: any, property: string, bindingEngine?: BindingEngine, presetManager?: PresetManager, soundEngine?: SoundEngine);
+    setSoundEngine(soundEngine: SoundEngine): this;
+    setSwatches(swatches: string[]): this;
+    getSwatches(): string[];
+    update(): this;
+}
+
+export declare interface ComponentFactoryOptions {
+    type: ComponentType;
+    label?: string;
+    object?: any;
+    property?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    options?: string[] | number[] | Record<string, any>;
+    onClick?: OnClickCallback;
+    onChange?: OnChangeCallback;
+    onToggle?: OnChangeCallback;
+    format?: (value: any) => string;
+    swatches?: string[];
+    color?: string;
+    fillColor?: string;
+    range?: [number, number];
+    bufferSize?: number;
+    collapsed?: boolean;
+    tooltip?: string;
+    contextMenu?: ContextMenuItem[];
+    showIf?: ConditionPredicate;
+    disabled?: boolean;
+    status?: StatusType;
+    badge?: string;
+    detail?: string;
+    listen?: boolean;
+}
+
+export declare type ComponentType = 'checkbox' | 'slider' | 'button' | 'select' | 'dynamicLabel' | 'graph' | 'color' | 'point2d' | 'point3d' | 'vector3' | 'range' | 'segmented' | 'status' | 'section' | 'folder' | 'row';
+
+export declare type ConditionPredicate = () => boolean;
+
+export declare abstract class ContainerHelper {
+    protected contentEl: HTMLElement;
+    protected bindingEngine: BindingEngine;
+    protected presetManager: PresetManager;
+    protected soundEngine?: SoundEngine | undefined;
+    protected children: Array<BaseComponent | {
+        destroy(): void;
+    }>;
+    protected accordion: boolean;
+    constructor(contentEl: HTMLElement, bindingEngine: BindingEngine, presetManager: PresetManager, soundEngine?: SoundEngine | undefined);
+    setAccordion(enabled: boolean): this;
+    isAccordion(): boolean;
+    onSectionExpanded(expandedSection: Section): void;
+    addCheckbox(targetOrOptions: any, property?: string): Checkbox;
+    createCheckbox(targetOrOptions: any, property?: string): Checkbox;
+    addSlider(targetOrOptions: any, property?: string): Slider;
+    createSlider(targetOrOptions: any, property?: string): Slider;
+    addButton(labelOrOptions: string | {
+        label?: string;
+        onClick?: OnClickCallback;
+        tooltip?: string;
+        showIf?: ConditionPredicate;
+    }, onClick?: OnClickCallback): Button;
+    createButton(labelOrOptions: string | {
+        label?: string;
+        onClick?: OnClickCallback;
+        tooltip?: string;
+        showIf?: ConditionPredicate;
+    }, onClick?: OnClickCallback): Button;
+    addSelect(targetOrOptions: any, property?: string, options?: any): Select;
+    createSelect(targetOrOptions: any, property?: string, options?: any): Select;
+    addDynamicLabel(targetOrOptions: any, property?: string): DynamicLabel;
+    createDynamicLabel(targetOrOptions: any, property?: string): DynamicLabel;
+    addGraph(targetOrOptions: any, property?: string): Graph;
+    createGraph(targetOrOptions: any, property?: string): Graph;
+    addFPSGraph(label?: string): Graph;
+    createFPSGraph(label?: string): Graph;
+    addMemoryGraph(label?: string): Graph;
+    createMemoryGraph(label?: string): Graph;
+    addColor(targetOrOptions: any, property?: string): ColorPicker;
+    createColor(targetOrOptions: any, property?: string): ColorPicker;
+    addPoint2D(targetOrOptions: any, property?: string, options?: Point2DOptions): Point2D;
+    createPoint2D(targetOrOptions: any, property?: string, options?: Point2DOptions): Point2D;
+    addPoint3D(targetOrOptions: any, property?: string, options?: Point3DOptions): Point3D;
+    createPoint3D(targetOrOptions: any, property?: string, options?: Point3DOptions): Point3D;
+    addVector3(targetOrOptions: any, property?: string, options?: Point3DOptions): Point3D;
+    createVector3(targetOrOptions: any, property?: string, options?: Point3DOptions): Point3D;
+    addRange(targetOrOptions: any, property?: string, options?: RangeOptions): RangeSlider;
+    createRange(targetOrOptions: any, property?: string, options?: RangeOptions): RangeSlider;
+    addSegmented(targetOrOptions: any, property?: string, options?: string[] | number[] | Record<string, any>): Segmented;
+    createSegmented(targetOrOptions: any, property?: string, options?: string[] | number[] | Record<string, any>): Segmented;
+    addStatus(targetOrOptions: any, property?: string, initialStatus?: StatusType, badge?: string, detail?: string): StatusIndicator;
+    createStatus(targetOrOptions: any, property?: string, initialStatus?: StatusType, badge?: string, detail?: string): StatusIndicator;
+    addRow(): Row;
+    createRow(): Row;
+    addSection(labelOrOptions?: string | {
+        label?: string;
+        title?: string;
+        collapsed?: boolean;
+    }, collapsed?: boolean): Section;
+    addFolder(labelOrOptions?: string | {
+        label?: string;
+        title?: string;
+        collapsed?: boolean;
+    }, collapsed?: boolean): Section;
+    createSection(labelOrOptions?: string | {
+        label?: string;
+        title?: string;
+        collapsed?: boolean;
+    }, collapsed?: boolean): Section;
+    createFolder(labelOrOptions?: string | {
+        label?: string;
+        title?: string;
+        collapsed?: boolean;
+    }, collapsed?: boolean): Section;
+    createComponent(options: ComponentFactoryOptions): any;
+    destroyChildren(): void;
+}
+
+export declare interface ContextMenuItem {
+    label: string;
+    icon?: string;
+    action: (component?: any) => void;
+    danger?: boolean;
+    separator?: boolean;
+    disabled?: boolean;
+}
+
+export declare class ContextMenuManager {
+    private panelEl;
+    private soundEngine?;
+    private menuEl;
+    private currentComponent?;
+    private onDocClickBound;
+    private onKeyDownBound;
+    constructor(panelEl: HTMLElement, soundEngine?: SoundEngine | undefined);
+    private onContextMenu;
+    show(items: ContextMenuItem[], clientX: number, clientY: number): void;
+    hide(): void;
+    destroy(): void;
+}
+
+export declare const CYBERPUNK_THEME: RellyTheme;
+
+export declare const DARK_THEME: RellyTheme;
+
+export declare const DRACULA_THEME: RellyTheme;
+
+export declare class Draggable {
+    private handle;
+    private panel;
+    private soundEngine?;
+    private isDragging;
+    private startX;
+    private startY;
+    private initialLeft;
+    private initialTop;
+    private wasSnapped;
+    snapThreshold: number;
+    magneticSnap: boolean;
+    private onMouseDownBound;
+    private onMouseMoveBound;
+    private onMouseUpBound;
+    private onResizeBound;
+    constructor(handle: HTMLElement, panel: HTMLElement, soundEngine?: SoundEngine | undefined);
+    clampToViewport(): void;
+    private onResize;
+    private onMouseDown;
+    private onMouseMove;
+    private onMouseUp;
+    destroy(): void;
+}
+
+export declare class DynamicLabel extends BaseComponent<any> {
+    private valueBadge;
+    private formatter;
+    constructor(label: string, targetObject?: any, property?: string, bindingEngine?: BindingEngine);
+    setFormat(formatter: LabelFormatter): this;
+    update(): this;
+}
+
+export declare class Graph extends BaseComponent<number | Record<string, number>> {
+    private canvasContainer;
+    private canvas;
+    private ctx;
+    private statsEl;
+    private graphTooltipEl;
+    private legendEl;
+    private primarySeries;
+    private seriesList;
+    private seriesMap;
+    private bufferSize;
+    private min;
+    private max;
+    private autoRange;
+    private smoothCurves;
+    private isPaused;
+    private formatter;
+    private cssWidth;
+    private cssHeight;
+    private sampleInterval;
+    private lastSampleTime;
+    private hoverIndex;
+    private resizeObserver;
+    private mediaQueryList;
+    private soundEngine?;
+    constructor(label: string, targetObject?: any, property?: string, bindingEngine?: BindingEngine, soundEngine?: SoundEngine);
+    private setupListeners;
+    private updateDPRListener;
+    private onResolutionChange;
+    private initCanvasSize;
+    private resizeCanvas;
+    private onMouseMove;
+    private onMouseLeave;
+    private onCanvasClick;
+    private updateTooltip;
+    setSoundEngine(soundEngine: SoundEngine): this;
+    togglePause(): this;
+    setPaused(paused: boolean): this;
+    isGraphPaused(): boolean;
+    setSampleInterval(ms: number): this;
+    getSampleInterval(): number;
+    checkDirty(): void;
+    setSmooth(smooth: boolean): this;
+    setFormat(fn: (val: number) => string): this;
+    setRange(min: number, max: number): this;
+    setAutoRange(enabled: boolean): this;
+    setColor(lineColor: string, fillColor?: string): this;
+    setBufferSize(size: number): this;
+    setHeight(height: number): this;
+    addSeries(id: string, options: GraphSeriesOptions): this;
+    private updateLegend;
+    push(val: number | Record<string, number>): this;
+    pushSeries(id: string, val: number): this;
+    private updateStats;
+    update(): this;
+    private draw;
+    destroy(): void;
+}
+
+export declare interface GraphOptions {
+    min?: number;
+    max?: number;
+    autoRange?: boolean;
+    color?: string;
+    fillColor?: string;
+    bufferSize?: number;
+    height?: number;
+    smooth?: boolean;
+    sampleInterval?: number;
+    format?: (value: number) => string;
+}
+
+export declare interface GraphSeriesOptions {
+    label?: string;
+    color: string;
+    fillColor?: string;
+}
+
+export declare class HotkeyManager {
+    private hotkey;
+    private onToggle;
+    private onKeyDownBound;
+    constructor(hotkey: string | null, onToggle: () => void);
+    private onKeyDown;
+    setHotkey(hotkey: string | null): void;
+    destroy(): void;
+}
+
+export declare interface IBaseComponent<T = any> {
+    element: HTMLElement;
+    setLabel(label: string): this;
+    getLabel(): string;
+    setTooltip(text: string): this;
+    getTooltip(): string | undefined;
+    setDisabled(disabled: boolean): this;
+    isDisabled(): boolean;
+    showIf(predicate: ConditionPredicate): this;
+    setContextMenu(items: ContextMenuItem[]): this;
+    getContextMenu(): ContextMenuItem[] | undefined;
+    setValue(value: T): this;
+    getValue(): T;
+    onChange(callback: OnChangeCallback<T>): this;
+    listen(): this;
+    update(): this;
+    destroy(): void;
+}
+
+export declare class ImportModal {
+    private parentEl;
+    private onApply;
+    element: HTMLElement;
+    private textareaEl;
+    private errorEl;
+    private dropzoneEl;
+    private fileInput;
+    constructor(parentEl: HTMLElement, onApply: (data: Record<string, any>) => void);
+    private handleFileSelect;
+    private readFile;
+    show(): void;
+    hide(): void;
+    private apply;
+    destroy(): void;
+}
+
+declare type LabelFormatter = (value: any) => string;
+
+export declare const LIGHT_THEME: RellyTheme;
+
+declare interface Listenable {
+    checkDirty(): void;
+}
+
+export declare const MATRIX_THEME: RellyTheme;
+
+export declare const NORD_THEME: RellyTheme;
+
+export declare type OnChangeCallback<T = any> = (value: T, prevValue: T) => void;
+
+export declare type OnClickCallback = (event: MouseEvent) => void;
+
+export declare class Point2D extends BaseComponent<Point2DVal> {
+    private containerEl;
+    private xInput;
+    private yInput;
+    private min?;
+    private max?;
+    private step;
+    constructor(label: string, targetObject: any, property: string, bindingEngine?: BindingEngine, presetManager?: PresetManager);
+    private setupInputScrubbing;
+    setMin(min: number): this;
+    setMax(max: number): this;
+    setStep(step: number): this;
+    getValue(): Point2DVal;
+    setValue(value: Point2DVal): this;
+    private handleInputChange;
+    update(): this;
+}
+
+export declare interface Point2DOptions {
+    min?: number;
+    max?: number;
+    step?: number;
+}
+
+declare type Point2DVal = {
+    x: number;
+    y: number;
+} | [number, number];
+
+export declare class Point3D extends BaseComponent<Point3DVal> {
+    private containerEl;
+    private xInput;
+    private yInput;
+    private zInput;
+    private min?;
+    private max?;
+    private step;
+    constructor(label: string, targetObject: any, property: string, bindingEngine?: BindingEngine, presetManager?: PresetManager);
+    private setupInputScrubbing;
+    private handleInputChange;
+    setMin(min?: number): this;
+    setMax(max?: number): this;
+    setStep(step: number): this;
+    update(): this;
+}
+
+export declare interface Point3DOptions {
+    min?: number;
+    max?: number;
+    step?: number;
+}
+
+export declare type Point3DVal = [number, number, number] | {
+    x: number;
+    y: number;
+    z: number;
+};
+
+export declare class PresetManager {
+    private components;
+    private pendingValues;
+    private changeCallback?;
+    setOnChange(cb: () => void): void;
+    notifyChange(): void;
+    register(component: SerializableComponent): void;
+    setPendingValues(values: Record<string, any>): void;
+    getPendingValues(): Record<string, any>;
+    unregister(component: SerializableComponent): void;
+    export(): Record<string, any>;
+    import(data: Record<string, any>): void;
+    save(storageKey?: string): void;
+    load(storageKey?: string): void;
+    clear(): void;
+}
+
+export declare interface RangeOptions {
+    min?: number;
+    max?: number;
+    step?: number;
+    format?: (min: number, max: number) => string;
+}
+
+export declare class RangeSlider extends BaseComponent<RangeVal> {
+    private wrapperEl;
+    private trackEl;
+    private barEl;
+    private thumbMin;
+    private thumbMax;
+    private inputMin;
+    private inputMax;
+    private min;
+    private max;
+    private step;
+    private soundEngine?;
+    private formatter;
+    constructor(label: string, targetObject: any, property: string, bindingEngine?: BindingEngine, presetManager?: PresetManager, soundEngine?: SoundEngine);
+    private setupListeners;
+    private setupThumbDrag;
+    private setupBarDrag;
+    private applyStep;
+    private getCurrentRange;
+    private setRangeValue;
+    setMin(min: number): this;
+    setMax(max: number): this;
+    setStep(step: number): this;
+    setFormat(fn: (min: number, max: number) => string): this;
+    setSoundEngine(soundEngine: SoundEngine): this;
+    update(): this;
+}
+
+export declare type RangeVal = [number, number] | {
+    min: number;
+    max: number;
+};
+
+export declare interface RellyTheme {
+    bg: string;
+    fg: string;
+    headerBg: string;
+    headerFg: string;
+    accent: string;
+    accentHover: string;
+    border: string;
+    inputBg: string;
+    inputHover: string;
+    radius: string;
+    font: string;
+    fontSize: string;
+    rowHeight: string;
+}
+
+declare class RellyUI extends ContainerHelper {
+    static version: string;
+    private hostEl?;
+    private shadowRoot;
+    private panelEl;
+    private headerEl;
+    private titleEl;
+    private collapseBtn;
+    private copyToastEl;
+    private themeManager;
+    protected soundEngine: SoundEngine;
+    private draggableInstance?;
+    private resizableInstance?;
+    private hotkeyInstance?;
+    private searchBarInstance?;
+    private tabsManagerInstance?;
+    private importModalInstance?;
+    private toastManager;
+    private contextMenuManager;
+    private isPanelCollapsed;
+    private isPanelHidden;
+    private isMiniHud;
+    private ghostOnIdle;
+    private idleOpacity;
+    private onResizeBound;
+    private autoSave;
+    private autoSaveKey;
+    private autoSaveTimeout;
+    private sparklineCtx?;
+    private sparklineData;
+    private sparklineAnimId?;
+    constructor(options?: RellyUIOptions);
+    private mount;
+    addTab(label: string): Tab;
+    createTab(label: string): Tab;
+    copyJSON(): string;
+    notify(message: string, type?: ToastType, duration?: number): HTMLElement;
+    getToastManager(): ToastManager;
+    getContextMenuManager(): ContextMenuManager;
+    importJSON(json: string | Record<string, any>): this;
+    loadSchema(schema: SchemaDefinition): this;
+    setTitle(title: string): this;
+    setTheme(theme: ThemeInput): this;
+    setSoundPack(pack: SoundPack): this;
+    getSoundPack(): SoundPack;
+    getSoundEngine(): SoundEngine;
+    toggleMiniHud(): this;
+    setMiniHud(mini: boolean): this;
+    isMiniHudMode(): boolean;
+    setGhostMode(enabled: boolean, idleOpacity?: number): this;
+    isGhostMode(): boolean;
+    setSoundVolume(volume: number): this;
+    getSoundVolume(): number;
+    private initSparkline;
+    private drawSparkline;
+    clampToViewport(): this;
+    toggleCollapse(): this;
+    setCollapsed(collapsed: boolean): this;
+    queueAutoSave(): void;
+    saveSession(key?: string): void;
+    loadSession(key?: string): boolean;
+    clearSession(key?: string): void;
+    setAutoSave(enabled: boolean, key?: string): this;
+    toggle(): this;
+    show(): this;
+    hide(): this;
+    save(storageKey?: string): this;
+    load(storageKey?: string): this;
+    export(): Record<string, any>;
+    import(data: Record<string, any>): this;
+    getElement(): HTMLElement;
+    getShadowRoot(): ShadowRoot | null;
+    getHost(): HTMLElement | null;
+    destroy(): void;
+}
+export { RellyUI }
+export default RellyUI;
+
+export declare interface RellyUIOptions {
+    /**
+     * Title shown in the panel header. Defaults to 'RellyUI'.
+     */
+    title?: string;
+    /**
+     * Target DOM container. If omitted, appends to document.body as a floating panel.
+     */
+    container?: HTMLElement | string;
+    /**
+     * Whether to encapsulate the panel and styles inside Shadow DOM (100% style isolation).
+     * Defaults to true.
+     */
+    shadowDOM?: boolean;
+    /**
+     * Whether to display a real-time search bar to filter components.
+     * Defaults to false.
+     */
+    searchBar?: boolean;
+    /**
+     * Search configuration options.
+     */
+    searchOptions?: SearchOptions;
+    /**
+     * Width of the panel in pixels or CSS string. Defaults to 280.
+     */
+    width?: number | string;
+    /**
+     * Height of the panel in pixels or CSS string. Defaults to auto.
+     */
+    height?: number | string;
+    /**
+     * Whether the panel is resizable via bottom-right drag handle.
+     * Defaults to true.
+     */
+    resizable?: boolean;
+    /**
+     * Whether subtle Web Audio micro-sound effects are enabled.
+     * Defaults to true.
+     */
+    sound?: boolean;
+    /**
+     * Sound pack profile ('synth' | 'mechanical' | 'bubble' | 'arcade').
+     * Defaults to 'synth'.
+     */
+    soundPack?: SoundPack;
+    /**
+     * Automatically persist component values and panel layout/position to localStorage.
+     * Defaults to false.
+     */
+    autoSave?: boolean;
+    /**
+     * localStorage key for autoSave. Defaults to 'relly-ui-session'.
+     */
+    autoSaveKey?: string;
+    /**
+     * Master volume for synthetic sound effects (0.0 to 1.0).
+     * Defaults to 1.0.
+     */
+    soundVolume?: number;
+    /**
+     * Ghost mode: panel fades to semi-transparent when cursor is idle outside panel.
+     * Defaults to false.
+     */
+    ghostOnIdle?: boolean;
+    /**
+     * Idle opacity when ghostOnIdle is true (0.1 to 1.0). Defaults to 0.38.
+     */
+    idleOpacity?: number;
+    /**
+     * Accordion mode: expanding one section automatically collapses sibling sections.
+     * Defaults to false.
+     */
+    accordion?: boolean;
+    /**
+     * Whether the panel starts collapsed. Defaults to false.
+     */
+    collapsed?: boolean;
+    /**
+     * Keyboard code to toggle panel visibility. Defaults to 'KeyH'. Set null or empty string to disable.
+     */
+    hotkey?: string | null;
+    /**
+     * Theme configuration or preset name ('dark' | 'light' | 'cyberpunk' | 'nord' | 'dracula').
+     */
+    theme?: ThemeInput;
+    /**
+     * Whether to automatically inject CSS styles. Defaults to true.
+     */
+    autoInjectStyles?: boolean;
+    /**
+     * Initial floating position.
+     */
+    position?: {
+        top?: number;
+        left?: number;
+        right?: number;
+        bottom?: number;
+    };
+    /**
+     * Allow moving the panel via drag-and-drop. Defaults to true.
+     */
+    draggable?: boolean;
+}
+
+export declare class Resizable {
+    private panel;
+    private minWidth;
+    private minHeight;
+    handleEl: HTMLElement;
+    private isResizing;
+    private startX;
+    private startY;
+    private initialWidth;
+    private initialHeight;
+    private onMouseDownBound;
+    private onMouseMoveBound;
+    private onMouseUpBound;
+    private onResizeBound;
+    constructor(panel: HTMLElement, minWidth?: number, minHeight?: number);
+    clampToViewport(): void;
+    private onWindowResize;
+    private onMouseDown;
+    private onMouseMove;
+    private onMouseUp;
+    destroy(): void;
+}
+
+export declare class Row extends ContainerHelper {
+    element: HTMLElement;
+    protected disabled: boolean;
+    constructor(bindingEngine: BindingEngine, presetManager: PresetManager, soundEngine?: SoundEngine);
+    setDisabled(disabled: boolean): this;
+    isDisabled(): boolean;
+    destroy(): void;
+}
+
+export declare interface SchemaControl extends ComponentFactoryOptions {
+    children?: SchemaControl[];
+}
+
+export declare interface SchemaDefinition {
+    title?: string;
+    target?: any;
+    controls: SchemaControl[];
+}
+
+export declare class SchemaLoader {
+    static load(container: ContainerHelper, schema: SchemaDefinition): void;
+}
+
+export declare class SearchBar {
+    private bodyEl;
+    element: HTMLElement;
+    private inputEl;
+    private clearBtn;
+    private ignoreCase;
+    private onGlobalKeyDownBound;
+    constructor(bodyEl: HTMLElement, options?: SearchOptions);
+    private onGlobalKeyDown;
+    focus(): this;
+    getInput(): HTMLInputElement;
+    filter(query: string): void;
+    clear(): void;
+    private resetFilter;
+    destroy(): void;
+}
+
+export declare interface SearchOptions {
+    ignoreCase?: boolean;
+    placeholder?: string;
+}
+
+export declare class Section extends ContainerHelper implements Listenable {
+    private label;
+    element: HTMLElement;
+    private headerEl;
+    private titleEl;
+    private arrowEl;
+    private isCollapsed;
+    private conditionPredicate?;
+    protected parentContainer?: ContainerHelper;
+    protected disabled: boolean;
+    constructor(label: string, bindingEngine: BindingEngine, presetManager: PresetManager, initialCollapsed?: boolean, soundEngine?: SoundEngine);
+    setParentContainer(parent: ContainerHelper): this;
+    setDisabled(disabled: boolean): this;
+    isDisabled(): boolean;
+    setLabel(label: string): this;
+    getLabel(): string;
+    toggle(): this;
+    setCollapsed(collapsed: boolean): this;
+    showIf(predicate: ConditionPredicate): this;
+    checkVisibility(): boolean;
+    checkDirty(): void;
+    destroy(): void;
+}
+
+export declare class Segmented extends BaseComponent<any> {
+    private containerEl;
+    private gliderEl;
+    private buttons;
+    private optionsMap;
+    private soundEngine?;
+    constructor(label: string, targetObject: any, property: string, options?: string[] | number[] | Record<string, any>, bindingEngine?: BindingEngine, presetManager?: PresetManager, soundEngine?: SoundEngine);
+    setOptions(options: string[] | number[] | Record<string, any>): this;
+    private createButton;
+    setSoundEngine(soundEngine: SoundEngine): this;
+    update(): this;
+}
+
+export declare interface SegmentedOptions {
+    options: string[] | number[] | Record<string, any>;
+}
+
+export declare class Select extends BaseComponent<any> {
+    private selectEl;
+    private optionsMap;
+    constructor(label: string, targetObject: any, property: string, options?: any[] | Record<string, any>, bindingEngine?: BindingEngine, presetManager?: PresetManager);
+    setOptions(options: any[] | Record<string, any>): this;
+    update(): this;
+}
+
+declare interface SerializableComponent {
+    getSerializableKey(): string | null;
+    getValue(): any;
+    setValue(val: any): void;
+}
+
+export declare class Slider extends BaseComponent<number> {
+    private containerEl;
+    private rangeInput;
+    private numberInput;
+    private soundEngine?;
+    private lastSoundTime;
+    private min;
+    private max;
+    private step;
+    constructor(label: string, targetObject: any, property: string, bindingEngine?: BindingEngine, presetManager?: PresetManager, soundEngine?: SoundEngine);
+    private setupJogScrubbing;
+    private triggerSound;
+    setSoundEngine(soundEngine: SoundEngine): this;
+    setMin(min: number): this;
+    setMax(max: number): this;
+    setStep(step: number): this;
+    private applyConstraints;
+    update(): this;
+}
+
+export declare class SoundEngine {
+    private ctx;
+    private enabled;
+    private volume;
+    private soundPack;
+    constructor(enabled?: boolean, soundPack?: SoundPack);
+    setEnabled(enabled: boolean): void;
+    isEnabled(): boolean;
+    setVolume(vol: number): void;
+    getVolume(): number;
+    setSoundPack(pack: SoundPack): this;
+    getSoundPack(): SoundPack;
+    private initCtx;
+    playClick(): void;
+    playToggle(state: boolean): void;
+    playNotify(): void;
+    playSnap(): void;
+    playMiniHud(isEntering?: boolean): void;
+    playTick(): void;
+    playTab(): void;
+}
+
+export declare type SoundPack = 'synth' | 'mechanical' | 'bubble' | 'arcade';
+
+export declare class StatusIndicator extends BaseComponent<string> {
+    private wrapperEl;
+    private ledEl;
+    private badgeEl;
+    private detailEl;
+    private currentStatus;
+    private customBadge?;
+    private customDetail?;
+    constructor(label: string, targetObject?: any, property?: string, bindingEngine?: BindingEngine);
+    setStatus(status: StatusType, badge?: string, detail?: string): this;
+    setBadge(badge: string): this;
+    setDetail(detail: string): this;
+    update(): this;
+}
+
+export declare interface StatusOptions {
+    badge?: string;
+    detail?: string;
+}
+
+export declare type StatusType = 'online' | 'busy' | 'offline' | 'info' | 'ready';
+
+export declare const SYNTHWAVE_THEME: RellyTheme;
+
+export declare class Tab extends ContainerHelper {
+    private label;
+    contentEl: HTMLElement;
+    buttonEl: HTMLButtonElement;
+    constructor(label: string, bindingEngine: BindingEngine, presetManager: PresetManager, soundEngine?: SoundEngine);
+    getLabel(): string;
+    setActive(active: boolean): void;
+    destroy(): void;
+}
+
+export declare class TabsManager {
+    private bindingEngine;
+    private presetManager;
+    private soundEngine?;
+    barEl: HTMLElement;
+    bodyEl: HTMLElement;
+    private tabs;
+    private activeTab;
+    constructor(parentHeader: HTMLElement, parentBody: HTMLElement, bindingEngine: BindingEngine, presetManager: PresetManager, soundEngine?: SoundEngine | undefined);
+    addTab(label: string): Tab;
+    switchTab(tab: Tab, playSound?: boolean): void;
+    getActiveTab(): Tab | null;
+    destroy(): void;
+}
+
+export declare type ThemeInput = ThemePreset | Partial<RellyTheme>;
+
+export declare class ThemeManager {
+    private panelElement;
+    private currentTheme;
+    private currentThemeName?;
+    constructor(panelElement: HTMLElement, themeInput?: ThemeInput);
+    applyTheme(themeInput: ThemeInput): void;
+    getCurrentThemeName(): string | undefined;
+    private applyToDOM;
+    getTheme(): RellyTheme;
+}
+
+export declare type ThemePreset = 'dark' | 'light' | 'cyberpunk' | 'nord' | 'dracula' | 'tokyo-night' | 'matrix' | 'synthwave';
+
+export declare class ToastManager {
+    private parentEl;
+    private soundEngine?;
+    private containerEl;
+    constructor(parentEl: HTMLElement, soundEngine?: SoundEngine | undefined);
+    notify(message: string, type?: ToastType, duration?: number): HTMLElement;
+    private getIconSvg;
+    destroy(): void;
+}
+
+export declare type ToastType = 'info' | 'success' | 'warning' | 'error';
+
+export declare const TOKYO_NIGHT_THEME: RellyTheme;
+
+export { }