juxscript 1.1.240 → 1.1.244

package/lib/components/base/BaseComponent.ts

@@ -1,884 +0,0 @@
-import { State } from '../../reactivity/state.js';
-import { getOrCreateContainer } from '../helpers.js';
-import { registry } from '../registry.js';
-import { stateHistory } from '../history/StateHistory.js';
-import { formatIdAsLabel } from '../../utils/formatId.js';
-import { applyAnimations, Animations } from './Animations.js'; // ✅ Import Animations
-
-/**
- * Base state interface that ALL component states must extend
- */
-export interface BaseState {
-    visible?: boolean;
-    disabled?: boolean;
-    loading?: boolean;
-    class?: string;
-    style?: string;
-    attributes?: Record<string, string>;
-    // ✅ Form-specific properties (optional for all components)
-    label?: string;
-    required?: boolean;
-    name?: string;
-    errorMessage?: string;
-}
-
-/**
- * Abstract base class for all JUX components
- * Provides common storage, event routing, and lifecycle methods
- * 
- * Children must provide:
- * - TRIGGER_EVENTS constant (readonly string[])
- * - CALLBACK_EVENTS constant (readonly string[])
- * - render() implementation
- */
-export abstract class BaseComponent<TState extends BaseState = BaseState> {
-    // Common properties (all components have these)
-    state: TState;
-    container: HTMLElement | null = null;
-    _id: string;
-    id: string;
-
-    // Event & sync storage (populated by bind() and sync())
-    protected _bindings: Array<{ event: string, handler: Function }> = [];
-    protected _syncBindings: Array<{
-        property: string,
-        stateObj: State<any>,
-        toState?: Function,
-        toComponent?: Function
-    }> = [];
-    protected _triggerHandlers: Map<string, Function> = new Map();
-    protected _callbackHandlers: Map<string, Function> = new Map();
-    protected _isUpdatingSync: boolean = false;
-
-    // Form-specific protected properties (only used by form components)
-    protected _inputElement: HTMLElement | null = null;
-    protected _labelElement: HTMLLabelElement | null = null;
-    protected _errorElement: HTMLElement | null = null;
-    protected _onValidate?: (value: any) => boolean | string;
-    protected _hasBeenValidated: boolean = false;
-
-    constructor(id: string, initialState: TState) {
-        this._id = id;
-        this.id = id;
-
-        const stateWithDefaults: TState = {
-            visible: true,
-            disabled: false,
-            loading: false,
-            class: '',
-            style: '',
-            attributes: {},
-            ...initialState
-        };
-
-        this.state = new Proxy(stateWithDefaults, {
-            set: (target, prop, value) => {
-                const key = prop as keyof TState;
-                const oldValue = target[key];
-
-                if (oldValue !== value) {
-                    stateHistory.recordStateChange(this._id, prop as string, oldValue, value);
-                    target[key] = value;
-                    this.update(prop as string, value);
-
-                    if (!this._isUpdatingSync) {
-                        this._notifySyncedState(prop as string, value);
-                    }
-                }
-                return true;
-            }
-        });
-
-        // ✅ Apply ONLY animation extensions
-        applyAnimations(this);
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * ABSTRACT METHODS (Child must implement)
-     * ═════════════════════════════════════════════════════════════════ */
-
-    protected abstract getTriggerEvents(): readonly string[];
-    protected abstract getCallbackEvents(): readonly string[];
-    abstract render(targetId?: string | HTMLElement | BaseComponent<any>): this;
-
-    /**
-     * REACTIVE UPDATE HOOK (PUBLIC, CONCRETE)
-     * Called automatically when this.state[prop] changes via Proxy.
-     * Default implementation handles base properties.
-     * Children can override to add component-specific logic.
-     */
-    update(prop: string, value: any): void {
-        if (!this.container) return;
-
-        const el = this.container.querySelector(`#${this._id}`) as HTMLElement;
-        if (!el) return;
-
-        // Handle base properties
-        switch (prop) {
-            case 'visible':
-                el.style.display = value ? '' : 'none';
-                break;
-
-            case 'class':
-                const baseClasses = el.className.split(' ').filter(c => c.startsWith('jux-'));
-                const userClasses = value.split(' ').filter((c: string) => c);
-                el.className = [...baseClasses, ...userClasses].join(' ');
-                break;
-
-            case 'style':
-                el.setAttribute('style', value);
-                break;
-
-            case 'disabled':
-                el.setAttribute('aria-disabled', String(value));
-                const inputs = el.querySelectorAll('input, button, select, textarea');
-                inputs.forEach(input => {
-                    (input as HTMLInputElement).disabled = value;
-                });
-                break;
-
-            case 'loading':
-                el.classList.toggle('jux-loading', value);
-                el.setAttribute('aria-busy', String(value));
-                break;
-        }
-    }
-
-    /**
-     * ✨ Notify external State<T> objects when component state changes
-     * Prevents infinite loops with guard flag
-     */
-    protected _notifySyncedState(prop: string, value: any): void {
-        const syncBinding = this._syncBindings.find(b => b.property === prop);
-
-        if (syncBinding) {
-            const { stateObj, toState } = syncBinding;
-
-            // Set guard flag to prevent recursion
-            this._isUpdatingSync = true;
-
-            try {
-                const transformedValue = toState ? toState(value) : value;
-                stateObj.set(transformedValue);
-            } finally {
-                // Always clear guard flag
-                this._isUpdatingSync = false;
-            }
-        }
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * COMMON FLUENT API (Inherited by all components)
-     * ═════════════════════════════════════════════════════════════════ */
-
-    /**
-     * Set component style
-     */
-    style(value: string): this {
-        this.state.style = value; // ✅ Triggers update()
-        return this;
-    }
-
-    /**
-     * Set component class
-     */
-    class(value: string): this {
-        this.state.class = value; // ✅ Triggers update()
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * CSS CLASS MANAGEMENT
-     * ═════════════════════════════════════════════════════════════════ */
-
-    /**
-     * Add a CSS class to the component
-     */
-    addClass(value: string): this {
-        const current = this.state.class || '';
-        const classes = current.split(' ').filter((c: string) => c && c !== value);
-        classes.push(value);
-        this.state.class = classes.join(' '); // ✅ Triggers update()
-        return this;
-    }
-
-    /**
-     * Remove a CSS class from the component
-     */
-    removeClass(value: string): this {
-        const current = this.state.class || '';
-        const classes = current.split(' ').filter((c: string) => c && c !== value);
-        this.state.class = classes.join(' '); // ✅ Triggers update()
-        return this;
-    }
-
-    /**
-     * Toggle a CSS class on the component
-     */
-    toggleClass(value: string): this {
-        const current = this.state.class || '';
-        const hasClass = current.split(' ').includes(value);
-        return hasClass ? this.removeClass(value) : this.addClass(value);
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * VISIBILITY CONTROL
-     * ═════════════════════════════════════════════════════════════════ */
-
-    /**
-     * Set component visibility
-     */
-    visible(value: boolean): this {
-        this.state.visible = value; // ✅ Triggers update()
-        return this;
-    }
-
-    /**
-     * Show the component
-     */
-    show(): this {
-        return this.visible(true);
-    }
-
-    /**
-     * Hide the component
-     */
-    hide(): this {
-        return this.visible(false);
-    }
-
-    /**
-     * Toggle component visibility
-     */
-    toggleVisibility(): this {
-        const isVisible = (this.state as any).visible ?? true;
-        return this.visible(!isVisible);
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * ATTRIBUTE MANAGEMENT
-     * ═════════════════════════════════════════════════════════════════ */
-
-    /**
-     * Set a single HTML attribute
-     */
-    attr(name: string, value: string): this {
-        const attrs = (this.state as any).attributes || {};
-        (this.state as any).attributes = { ...attrs, [name]: value };
-        if (this.container) this.container.setAttribute(name, value);
-        return this;
-    }
-
-    /**
-     * Set multiple HTML attributes
-     */
-    attrs(attributes: Record<string, string>): this {
-        Object.entries(attributes).forEach(([name, value]) => {
-            this.attr(name, value);
-        });
-        return this;
-    }
-
-    /**
-     * Remove an HTML attribute
-     */
-    removeAttr(name: string): this {
-        const attrs = (this.state as any).attributes || {};
-        delete attrs[name];
-        if (this.container) this.container.removeAttribute(name);
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * DISABLED STATE
-     * ═════════════════════════════════════════════════════════════════ */
-
-    /**
-     * Set disabled state for interactive elements
-     */
-    disabled(value: boolean): this {
-        this.state.disabled = value; // ✅ Triggers update()
-        return this;
-    }
-
-    /**
-     * Enable the component
-     */
-    enable(): this {
-        return this.disabled(false);
-    }
-
-    /**
-     * Disable the component
-     */
-    disable(): this {
-        return this.disabled(true);
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * LOADING STATE
-     * ═════════════════════════════════════════════════════════════════ */
-
-    /**
-     * Set loading state
-     */
-    loading(value: boolean): this {
-        this.state.loading = value; // ✅ Triggers update()
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FOCUS MANAGEMENT
-     * ═════════════════════════════════════════════════════════════════ */
-
-    /**
-     * Focus the first focusable element in the component
-     */
-    focus(): this {
-        if (this.container) {
-            const focusable = this.container.querySelector('input, button, select, textarea, [tabindex]');
-            if (focusable) (focusable as HTMLElement).focus();
-        }
-        return this;
-    }
-
-    /**
-     * Blur the currently focused element in the component
-     */
-    blur(): this {
-        if (this.container) {
-            const focused = this.container.querySelector(':focus');
-            if (focused) (focused as HTMLElement).blur();
-        }
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * DOM MANIPULATION
-     * ═════════════════════════════════════════════════════════════════ */
-
-    /**
-     * Remove the component from the DOM
-     */
-    remove(): this {
-        if (this.container) {
-            this.container.remove();
-            this.container = null;
-
-            // ✅ Unregister when removed
-            registry.unregister(this._id);
-        }
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * EVENT BINDING (Shared logic)
-     * ═════════════════════════════════════════════════════════════════ */
-
-    bind(event: string, handler: Function): this {
-        // ✅ Record bind event
-        stateHistory.recordEvent(this._id, 'bind', event, { handlerName: handler.name });
-
-        if (this._isTriggerEvent(event)) {
-            this._triggerHandlers.set(event, handler);
-        } else if (this._isCallbackEvent(event)) {
-            this._callbackHandlers.set(event, handler);
-        } else {
-            this._bindings.push({ event, handler });
-        }
-        return this;
-    }
-
-    sync(property: string, stateObj: State<any>, toStateOrTransform?: Function, toComponent?: Function): this {
-        if (!stateObj || typeof stateObj.subscribe !== 'function') {
-            throw new Error(`${this.constructor.name}.sync: Expected a State object for property "${property}"`);
-        }
-
-        const actualToState = (toComponent !== undefined) ? toStateOrTransform : undefined;
-        const actualToComponent = (toComponent !== undefined) ? toComponent : toStateOrTransform;
-
-        // ✅ Record sync event
-        stateHistory.recordEvent(this._id, 'sync', property, {
-            hasToState: !!actualToState,
-            hasToComponent: !!actualToComponent
-        });
-
-        this._syncBindings.push({
-            property,
-            stateObj,
-            toState: actualToState,
-            toComponent: actualToComponent
-        });
-        return this;
-    }
-
-    protected _isTriggerEvent(event: string): boolean {
-        return this.getTriggerEvents().includes(event);
-    }
-
-    protected _isCallbackEvent(event: string): boolean {
-        return this.getCallbackEvents().includes(event);
-    }
-
-    protected _triggerCallback(eventName: string, ...args: any[]): void {
-        // ✅ Record callback event
-        stateHistory.recordEvent(this._id, 'callback', eventName, { argsCount: args.length });
-
-        if (this._callbackHandlers.has(eventName)) {
-            const handler = this._callbackHandlers.get(eventName)!;
-            handler(...args);
-        }
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT EVENT SHORTHANDS
-     * ═════════════════════════════════════════════════════════════════ */
-
-    /**
-     * Register a click event handler
-     */
-    click(handler: (e: MouseEvent) => void): this {
-        return this.bind('click', handler);
-    }
-
-    /**
-     * Register a double-click event handler
-     */
-    dblclick(handler: (e: MouseEvent) => void): this {
-        return this.bind('dblclick', handler);
-    }
-
-    /**
-     * Register a change event handler
-     */
-    change(handler: (e: Event) => void): this {
-        return this.bind('change', handler);
-    }
-
-    /**
-     * Register an input event handler
-     */
-    input(handler: (e: Event) => void): this {
-        return this.bind('input', handler);
-    }
-
-    /**
-     * Register a mouseover event handler
-     */
-    hover(handler: (e: MouseEvent) => void): this {
-        return this.bind('mouseover', handler);
-    }
-
-    /**
-     * Register a mouseout event handler
-     */
-    mouseout(handler: (e: MouseEvent) => void): this {
-        return this.bind('mouseout', handler);
-    }
-
-    /**
-     * Register a mousedown event handler
-     */
-    mousedown(handler: (e: MouseEvent) => void): this {
-        return this.bind('mousedown', handler);
-    }
-
-    /**
-     * Register a mouseup event handler
-     */
-    mouseup(handler: (e: MouseEvent) => void): this {
-        return this.bind('mouseup', handler);
-    }
-
-    /**
-     * Register a focus event handler (renamed to onFocus to avoid conflict with focus() method)
-     */
-    onFocus(handler: (e: FocusEvent) => void): this {
-        return this.bind('focus', handler);
-    }
-
-    /**
-     * Register a blur event handler (renamed to onBlur to avoid conflict with blur() method)
-     */
-    onBlur(handler: (e: FocusEvent) => void): this {
-        return this.bind('blur', handler);
-    }
-
-    /**
-     * Register a keydown event handler
-     */
-    keydown(handler: (e: KeyboardEvent) => void): this {
-        return this.bind('keydown', handler);
-    }
-
-    /**
-     * Register a keyup event handler
-     */
-    keyup(handler: (e: KeyboardEvent) => void): this {
-        return this.bind('keyup', handler);
-    }
-
-    /**
-     * Register a keypress event handler
-     */
-    keypress(handler: (e: KeyboardEvent) => void): this {
-        return this.bind('keypress', handler);
-    }
-
-    /**
-     * Register a submit event handler
-     */
-    submit(handler: (e: Event) => void): this {
-        return this.bind('submit', handler);
-    }
-
-    /**
-     * Register a scroll event handler
-     */
-    scroll(handler: (e: Event) => void): this {
-        return this.bind('scroll', handler);
-    }
-
-    /**
-     * Register a contextmenu (right-click) event handler
-     */
-    contextmenu(handler: (e: MouseEvent) => void): this {
-        return this.bind('contextmenu', handler);
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * TIME-TRAVEL DEBUGGING (PUBLIC API)
-     * ═════════════════════════════════════════════════════════════════ */
-
-    /**
-     * Roll back to previous state
-     */
-    rollback(): this {
-        const snapshot = stateHistory.moveBack();
-        if (snapshot && snapshot.componentId === this._id) {
-            stateHistory.startReplay();
-            (this.state as any)[snapshot.property] = snapshot.oldValue;
-            stateHistory.endReplay();
-        }
-        return this;
-    }
-
-    /**
-     * Roll forward to next state
-     */
-    rollforward(): this {
-        const snapshot = stateHistory.moveForward();
-        if (snapshot && snapshot.componentId === this._id) {
-            stateHistory.startReplay();
-            (this.state as any)[snapshot.property] = snapshot.newValue;
-            stateHistory.endReplay();
-        }
-        return this;
-    }
-
-    /**
-     * Get complete timeline of this component's changes
-     */
-    timeline(): Array<any> {
-        const stateChanges = stateHistory.getComponentHistory(this._id);
-        const events = stateHistory.getComponentEvents(this._id);
-        return [...stateChanges, ...events].sort((a, b) => a.timestamp - b.timestamp);
-    }
-
-    /**
-     * Get only state changes for this component
-     */
-    stateHistory() {
-        return stateHistory.getComponentHistory(this._id);
-    }
-
-    /**
-     * Get only events for this component
-     */
-    eventHistory() {
-        return stateHistory.getComponentEvents(this._id);
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * COMMON RENDER HELPERS
-     * ═════════════════════════════════════════════════════════════════ */
-
-    protected _setupContainer(targetId?: string | HTMLElement | BaseComponent<any>): HTMLElement {
-        // Determine Target Container Type
-
-        let container: HTMLElement;
-        if (targetId) {
-            if (typeof targetId === 'string') {
-                const id = targetId.startsWith('#') ? targetId.slice(1) : targetId;
-                const target = document.getElementById(id);
-                if (target) {
-                    container = target;
-                } else {
-                    console.warn(`[Jux] Target "${targetId}" not found, creating it with graceful fallback`);
-                    container = getOrCreateContainer(id);
-                }
-            } else if (targetId instanceof HTMLElement) {
-                container = targetId;
-            } else if (targetId instanceof BaseComponent) {
-                container = getOrCreateContainer(targetId._id);
-            } else {
-                throw new Error(`[Jux] Invalid targetId type: ${typeof targetId}`);
-            }
-        } else {
-            container = getOrCreateContainer(this._id);
-        }
-
-        this.container = container;
-
-        // ✅ Auto-register component when container is set up
-        registry.register(this);
-
-        return container;
-    }
-
-    protected _wireStandardEvents(element: HTMLElement): void {
-        this._bindings.forEach(({ event, handler }) => {
-            element.addEventListener(event, handler as EventListener);
-        });
-    }
-
-    /**
-     * Wire sync subscriptions with guard flag
-     */
-    protected _wireAllSyncs(): void {
-        this._syncBindings.forEach(({ property, stateObj, toComponent }) => {
-            const transform = toComponent || ((v: any) => v);
-
-            const method = (this as any)[property];
-
-            if (typeof method === 'function') {
-                // Set initial value
-                const initialValue = transform(stateObj.value);
-                this._isUpdatingSync = true;
-                method.call(this, initialValue);
-                this._isUpdatingSync = false;
-
-                // Subscribe to changes with guard
-                stateObj.subscribe((val: any) => {
-                    if (this._isUpdatingSync) return;
-
-                    const transformed = transform(val);
-                    this._isUpdatingSync = true;
-                    method.call(this, transformed);
-                    this._isUpdatingSync = false;
-                });
-            } else {
-                console.warn(
-                    `[Jux] ${this.constructor.name}.sync('${property}'): ` +
-                    `No method .${property}() found. Property will not be synced.`
-                );
-            }
-        });
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * PROPS ACCESSOR - Read-only access to component state
-     * ═════════════════════════════════════════════════════════════════ */
-
-    /**
-     * ✅ Read-only accessor for component state (getter, not a method)
-     * 
-     * Usage:
-     *   const myState = component.props;  // ✅ Correct
-     *   const myState = component.props(); // ❌ Error: props is not a function
-     */
-    get props(): Readonly<TState> {
-        return this.state as Readonly<TState>;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FORM INPUT API (Optional - only used by form components)
-     * ═════════════════════════════════════════════════════════════════ */
-
-    /**
-     * Set label for form inputs
-     */
-    label(value: string): this {
-        (this.state as any).label = value;
-        if (this._labelElement) {
-            const requiredSpan = this._labelElement.querySelector('.jux-input-required');
-            this._labelElement.textContent = value;
-            if (requiredSpan) this._labelElement.appendChild(requiredSpan);
-        }
-        return this;
-    }
-
-    /**
-     * Set required state for form inputs
-     */
-    required(value: boolean): this {
-        (this.state as any).required = value;
-        return this;
-    }
-
-    /**
-     * Set name attribute for form inputs
-     */
-    name(value: string): this {
-        (this.state as any).name = value;
-        return this;
-    }
-
-    /**
-     * Set custom validation handler
-     */
-    onValidate(handler: (value: any) => boolean | string): this {
-        this._onValidate = handler;
-        return this;
-    }
-
-    /**
-     * Validate form input (override in form components)
-     */
-    validate(): boolean {
-        console.warn(`${this.constructor.name}.validate() not implemented`);
-        return true;
-    }
-
-    /**
-     * Check if form input is valid (override in form components)
-     */
-    isValid(): boolean {
-        console.warn(`${this.constructor.name}.isValid() not implemented`);
-        return true;
-    }
-
-    /**
-     * Get current value (override in form components)
-     */
-    getValue(): any {
-        console.warn(`${this.constructor.name}.getValue() not implemented`);
-        return undefined;
-    }
-
-    /**
-     * Set current value (override in form components)
-     */
-    setValue(value: any): this {
-        console.warn(`${this.constructor.name}.setValue() not implemented`);
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FORM VALIDATION HELPERS (Protected - for form components)
-     * ═════════════════════════════════════════════════════════════════ */
-
-    protected _showError(message: string): void {
-        if (this._errorElement) {
-            this._errorElement.textContent = message;
-            this._errorElement.style.display = 'block';
-        }
-
-        if (this._inputElement) {
-            this._inputElement.classList.add('jux-input-invalid');
-        }
-
-        (this.state as any).errorMessage = message;
-    }
-
-    protected _clearError(): void {
-        if (this._errorElement) {
-            this._errorElement.textContent = '';
-            this._errorElement.style.display = 'none';
-        }
-
-        if (this._inputElement) {
-            this._inputElement.classList.remove('jux-input-invalid');
-        }
-
-        (this.state as any).errorMessage = undefined;
-    }
-
-    /**
-     * Build label element for form inputs
-     */
-    protected _renderLabel(): HTMLLabelElement {
-        const label = (this.state as any).label || formatIdAsLabel(this._id); // ✅ Auto-generate
-        const required = (this.state as any).required || false;
-
-        const labelEl = document.createElement('label');
-        labelEl.className = 'jux-input-label';
-        labelEl.htmlFor = `${this._id}-input`;
-        labelEl.textContent = label;
-
-        if (required) {
-            const requiredSpan = document.createElement('span');
-            requiredSpan.className = 'jux-input-required';
-            requiredSpan.textContent = ' *';
-            labelEl.appendChild(requiredSpan);
-        }
-
-        this._labelElement = labelEl;
-        return labelEl;
-    }
-
-    /**
-     * Build error element for form inputs
-     */
-    protected _renderError(): HTMLElement {
-        const errorEl = document.createElement('div');
-        errorEl.className = 'jux-input-error';
-        errorEl.id = `${this._id}-error`;
-        errorEl.style.display = 'none';
-
-        this._errorElement = errorEl;
-        return errorEl;
-    }
-
-    /**
-     * Wire up two-way sync for form inputs
-     */
-    protected _wireFormSync(inputElement: HTMLElement, eventName: string = 'input'): void {
-        const valueSync = this._syncBindings.find(b => b.property === 'value');
-
-        if (valueSync) {
-            const { stateObj, toState, toComponent } = valueSync;
-
-            const transformToState = toState || ((v: any) => v);
-            const transformToComponent = toComponent || ((v: any) => v);
-
-            let isUpdating = false;
-
-            // State → Component
-            stateObj.subscribe((val: any) => {
-                if (isUpdating) return;
-                const transformed = transformToComponent(val);
-                this.setValue(transformed);
-            });
-
-            // Component → State
-            inputElement.addEventListener(eventName, () => {
-                if (isUpdating) return;
-                isUpdating = true;
-
-                const value = this.getValue();
-                const transformed = transformToState(value);
-                this._clearError();
-
-                stateObj.set(transformed);
-
-                setTimeout(() => { isUpdating = false; }, 0);
-            });
-        } else {
-            // Default behavior without sync
-            inputElement.addEventListener(eventName, () => {
-                this._clearError();
-            });
-        }
-
-        // Only validate on blur IF the field has been validated before
-        inputElement.addEventListener('blur', () => {
-            if (this._hasBeenValidated) {
-                this.validate();
-            }
-        });
-    }
-}
-
-// ✅ Type assertion for Animations (all components have animation methods)
-export interface BaseComponent extends Animations { }