juxscript 1.1.240 → 1.1.244

package/lib/components/radio.ts

@@ -1,303 +0,0 @@
-import { BaseComponent, BaseState } from './base/BaseComponent.js';
-import { formatIdAsLabel } from '../utils/formatId.js'; // ✅ Import
-
-// Event definitions
-const TRIGGER_EVENTS = [] as const;
-const CALLBACK_EVENTS = ['change'] as const;
-
-export interface RadioOption {
-    label: string;
-    value: string;
-    disabled?: boolean;
-}
-
-export interface RadioOptions {
-    options?: RadioOption[];
-    value?: string;
-    label?: string;
-    required?: boolean;
-    disabled?: boolean;
-    name?: string;
-    orientation?: 'vertical' | 'horizontal';  // ✅ Add orientation
-    style?: string;
-    class?: string;
-    onValidate?: (value: string) => boolean | string;
-}
-
-interface RadioState extends BaseState {
-    options: RadioOption[];
-    value: string;
-    orientation: 'vertical' | 'horizontal';  // ✅ Add to state
-}
-
-export class Radio extends BaseComponent<RadioState> {
-    private _radioInputs: HTMLInputElement[] = [];
-
-    constructor(id: string, options: RadioOptions = {}) {
-        super(id, {
-            visible: true,
-            disabled: options.disabled ?? false,
-            loading: false,
-            class: options.class ?? '',
-            style: options.style ?? '',
-            attributes: {},
-            label: options.label ?? formatIdAsLabel(id), // ✅ Auto-generate
-            required: options.required ?? false,
-            name: options.name ?? id,
-            errorMessage: undefined,
-            options: options.options ?? [],
-            value: options.value ?? '',
-            orientation: options.orientation ?? 'vertical'
-        });
-
-        if (options.onValidate) {
-            this._onValidate = options.onValidate;
-        }
-    }
-
-    protected getTriggerEvents(): readonly string[] {
-        return TRIGGER_EVENTS;
-    }
-
-    protected getCallbackEvents(): readonly string[] {
-        return CALLBACK_EVENTS;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FLUENT API
-     * ═════════════════════════════════════════════════════════════════ */
-
-    //BaseComponent:
-    // - label(), required(), name(), onValidate()
-    // - validate(), isValid()
-    // - style(), class()
-    // - bind(), sync(), renderTo()
-    // - disabled(), enable(), disable()
-
-    options(value: RadioOption[]): this {
-        this.state.options = value;
-        return this;
-    }
-
-    value(value: string): this {
-        return this.setValue(value);
-    }
-
-    addOption(option: RadioOption): this {
-        this.state.options = [...this.state.options, option];
-        return this;
-    }
-
-    orientation(value: 'vertical' | 'horizontal'): this {
-        this.state.orientation = value;
-        return this;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * FORM INPUT IMPLEMENTATION
-     * ═════════════════════════════════════════════════════════════════ */
-
-    getValue(): string {
-        return this.state.value;
-    }
-
-    setValue(value: string): this {
-        this.state.value = value;
-
-        // Update all radio inputs
-        this._radioInputs.forEach(input => {
-            input.checked = input.value === value;
-        });
-
-        return this;
-    }
-
-    validate(): boolean {
-        this._hasBeenValidated = true;
-        const value = this.getValue();
-        const result = this._validateValue(value);
-
-        if (result === true) {
-            this._clearError();
-            return true;
-        } else {
-            this._showError(result as string);
-            return false;
-        }
-    }
-
-    isValid(): boolean {
-        const value = this.getValue();
-        return this._validateValue(value) === true;
-    }
-
-    protected _validateValue(value: string): boolean | string {
-        const { required, options } = this.state;
-
-        if (required && !value) {
-            return 'Please select an option';
-        }
-
-        // Validate that value is one of the options
-        if (value && !options.some(opt => opt.value === value)) {
-            return 'Invalid option selected';
-        }
-
-        if (this._onValidate) {
-            const result = this._onValidate(value);
-            if (result !== true) {
-                return result || 'Invalid value';
-            }
-        }
-
-        return true;
-    }
-
-    protected _buildInputElement(): HTMLElement {
-        // Radio uses a container, not a single input
-        const container = document.createElement('div');
-        container.className = 'jux-radio-options';
-        return container;
-    }
-
-    /* ═════════════════════════════════════════════════════════════════
-     * RENDER
-     * ═════════════════════════════════════════════════════════════════ */
-
-    render(targetId?: string | HTMLElement | BaseComponent<any>): this {
-        const container = this._setupContainer(targetId);
-
-        const { options, value, name, disabled, orientation, style, class: className } = this.state;
-
-        // Build wrapper
-        const wrapper = document.createElement('div');
-        wrapper.className = 'jux-radio';
-        wrapper.id = this._id;
-        if (className) wrapper.className += ` ${className}`;
-        if (style) wrapper.setAttribute('style', style);
-
-        // Label
-        if (this.state.label) {
-            wrapper.appendChild(this._renderLabel());
-        }
-
-        // Radio options container
-        const optionsContainer = document.createElement('div');
-        optionsContainer.className = `jux-radio-options jux-radio-${orientation}`;  // ✅ Add orientation class
-        this._inputElement = optionsContainer;
-
-        this._radioInputs = [];
-
-        options.forEach((option, index) => {
-            const radioWrapper = document.createElement('label');
-            radioWrapper.className = 'jux-radio-option';
-
-            const input = document.createElement('input');
-            input.type = 'radio';
-            input.className = 'jux-radio-input';
-            input.id = `${this._id}-option-${index}`;
-            input.name = name!; // ✅ Non-null assertion (name is always set in constructor)
-            input.value = option.value;
-            input.checked = option.value === value;
-            input.disabled = disabled || option.disabled || false;
-
-            this._radioInputs.push(input);
-
-            const radioMark = document.createElement('span');
-            radioMark.className = 'jux-radio-mark';
-
-            const labelText = document.createElement('span');
-            labelText.className = 'jux-radio-label-text';
-            labelText.textContent = option.label;
-
-            radioWrapper.appendChild(input);
-            radioWrapper.appendChild(radioMark);
-            radioWrapper.appendChild(labelText);
-
-            optionsContainer.appendChild(radioWrapper);
-        });
-
-        wrapper.appendChild(optionsContainer);
-
-        // Error element
-        wrapper.appendChild(this._renderError());
-
-        // Wire events
-        this._wireStandardEvents(wrapper);
-
-        // Wire radio-specific sync
-        const valueSync = this._syncBindings.find(b => b.property === 'value');
-
-        if (valueSync) {
-            const { stateObj, toState, toComponent } = valueSync;
-
-            const transformToState = toState || ((v: string) => v);
-            const transformToComponent = toComponent || ((v: any) => String(v));
-
-            let isUpdating = false;
-
-            // State → Component
-            stateObj.subscribe((val: any) => {
-                if (isUpdating) return;
-                const transformed = transformToComponent(val);
-                this.setValue(transformed);
-            });
-
-            // Component → State
-            this._radioInputs.forEach(input => {
-                input.addEventListener('change', () => {
-                    if (isUpdating) return;
-                    isUpdating = true;
-
-                    const selectedValue = input.value;
-                    this.state.value = selectedValue;
-                    this._clearError();
-
-                    const transformed = transformToState(selectedValue);
-                    stateObj.set(transformed);
-
-                    // 🎯 Fire the change callback event
-                    this._triggerCallback('change', selectedValue);
-
-                    setTimeout(() => { isUpdating = false; }, 0);
-                });
-            });
-        } else {
-            // Default behavior without sync
-            this._radioInputs.forEach(input => {
-                input.addEventListener('change', () => {
-                    this.state.value = input.value;
-                    this._clearError();
-
-                    // 🎯 Fire the change callback event
-                    this._triggerCallback('change', input.value);
-                });
-            });
-        }
-
-        // Always add blur validation
-        this._radioInputs.forEach(input => {
-            input.addEventListener('blur', () => {
-                if (this._hasBeenValidated) {
-                    this.validate();
-                }
-            });
-        });
-
-        // Sync label changes
-        const labelSync = this._syncBindings.find(b => b.property === 'label');
-        if (labelSync) {
-            const transform = labelSync.toComponent || ((v: any) => String(v));
-            labelSync.stateObj.subscribe((val: any) => {
-                this.label(transform(val));
-            });
-        }
-
-        container.appendChild(wrapper);
-        return this;
-    }
-}
-
-export function radio(id: string, options: RadioOptions = {}): Radio {
-    return new Radio(id, options);
-}

package/lib/components/registry.d.ts

@@ -1,34 +0,0 @@
-/**
- * Simplified JUX Component Registry
- * Lean console debugging interface
- */
-import { BaseComponent } from './base/BaseComponent.js';
-declare class ComponentRegistry {
-    private components;
-    register(component: BaseComponent<any>): void;
-    unregister(id: string): void;
-    /**
-     * Get component by index or ID
-     */
-    get(indexOrId: number | string): BaseComponent<any> | undefined;
-    /**
-     * Print indexed list to console
-     */
-    list(): void;
-    /**
-     * Show component tree with state, history, events
-     */
-    tree(indexOrId?: number | string): void;
-    private _printTree;
-    /**
-     * Get all components
-     */
-    all(): BaseComponent<any>[];
-    /**
-     * Clear registry
-     */
-    clear(): void;
-}
-export declare const registry: ComponentRegistry;
-export {};
-//# sourceMappingURL=registry.d.ts.map

package/lib/components/registry.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"registry.d.ts","sourceRoot":"","sources":["registry.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAGxD,cAAM,iBAAiB;IACnB,OAAO,CAAC,UAAU,CAA4B;IAE9C,QAAQ,CAAC,SAAS,EAAE,aAAa,CAAC,GAAG,CAAC,GAAG,IAAI;IAO7C,UAAU,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI;IAI5B;;OAEG;IACH,GAAG,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,GAAG,SAAS;IAO/D;;OAEG;IACH,IAAI,IAAI,IAAI;IAaZ;;OAEG;IACH,IAAI,CAAC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI;IAkBvC,OAAO,CAAC,UAAU;IAkClB;;OAEG;IACH,GAAG,IAAI,aAAa,CAAC,GAAG,CAAC,EAAE;IAI3B;;OAEG;IACH,KAAK,IAAI,IAAI;CAIhB;AAED,eAAO,MAAM,QAAQ,mBAA0B,CAAC"}

package/lib/components/registry.js

@@ -1,163 +0,0 @@
-/**
- * Simplified JUX Component Registry
- * Lean console debugging interface
- */
-import { stateHistory } from './history/StateHistory.js';
-class ComponentRegistry {
-    constructor() {
-        this.components = [];
-    }
-    register(component) {
-        // Avoid duplicates
-        if (!this.components.find(c => c._id === component._id)) {
-            this.components.push(component);
-        }
-    }
-    unregister(id) {
-        this.components = this.components.filter(c => c._id !== id);
-    }
-    /**
-     * Get component by index or ID
-     */
-    get(indexOrId) {
-        if (typeof indexOrId === 'number') {
-            return this.components[indexOrId];
-        }
-        return this.components.find(c => c._id === indexOrId);
-    }
-    /**
-     * Print indexed list to console
-     */
-    list() {
-        if (this.components.length === 0) {
-            console.log('📭 No components registered');
-            return;
-        }
-        console.log('\n📋 Registered Components:\n');
-        this.components.forEach((comp, idx) => {
-            console.log(`  [${idx}] ${comp._id} → ${comp.constructor.name}`);
-        });
-        console.log(`\n💡 Access via: _jux.get(${0}) or _jux.get('${this.components[0]._id}')\n`);
-    }
-    /**
-     * Show component tree with state, history, events
-     */
-    tree(indexOrId) {
-        let comp;
-        if (indexOrId === undefined) {
-            // Show all components
-            this.components.forEach((c, idx) => this._printTree(c, idx));
-            return;
-        }
-        comp = this.get(indexOrId);
-        if (!comp) {
-            console.error(`❌ Component not found: ${indexOrId}`);
-            return;
-        }
-        this._printTree(comp, typeof indexOrId === 'number' ? indexOrId : undefined);
-    }
-    _printTree(comp, index) {
-        const idx = index !== undefined ? `[${index}]` : '';
-        const stateChanges = stateHistory.getComponentHistory(comp._id);
-        const events = stateHistory.getComponentEvents(comp._id);
-        const syncCount = comp._syncBindings?.length || 0;
-        const bindCount = comp._bindings?.length || 0;
-        console.group(`🌳 ${idx} ${comp._id} (${comp.constructor.name})`);
-        console.log('📊 State:', comp.state);
-        if (stateChanges.length > 0) {
-            console.log(`📜 History: ${stateChanges.length} changes`);
-            console.log('   Last 3:', stateChanges.slice(-3).map(s => `${s.property}: ${s.oldValue} → ${s.newValue}`));
-        }
-        if (syncCount > 0) {
-            console.log(`🔗 Syncs: ${syncCount} active`);
-        }
-        if (bindCount > 0 || events.length > 0) {
-            console.log(`⚡ Events: ${bindCount} binds, ${events.length} fired`);
-        }
-        console.log(`\n💡 Commands:`);
-        console.log(`   _jux.get(${index ?? `'${comp._id}'`}).state.prop = value`);
-        console.log(`   _jux.get(${index ?? `'${comp._id}'`}).rollback()`);
-        console.log(`   _jux.get(${index ?? `'${comp._id}'`}).timeline()`);
-        console.groupEnd();
-    }
-    /**
-     * Get all components
-     */
-    all() {
-        return this.components;
-    }
-    /**
-     * Clear registry
-     */
-    clear() {
-        this.components = [];
-        stateHistory.clear();
-    }
-}
-export const registry = new ComponentRegistry();
-// ✅ Expose lean console interface
-if (typeof window !== 'undefined') {
-    window._jux = {
-        /**
-         * Get component by index or ID
-         * @example
-         *   const h = _jux.get(0)           // Get first component
-         *   const h = _jux.get('hero-1')    // Get by ID
-         *   h.state.title = 'New Title'     // Direct mutation
-         *   h.rollback()                    // Undo last change
-         */
-        get: (indexOrId) => registry.get(indexOrId),
-        /**
-         * List all components with indices
-         * @example
-         *   _jux.list()
-         *   // [0] hero-1 → Hero
-         *   // [1] nav-main → Nav
-         */
-        list: () => registry.list(),
-        /**
-         * Show component tree (state, history, events, syncs)
-         * @example
-         *   _jux.tree()           // Show all
-         *   _jux.tree(0)          // Show first component
-         *   _jux.tree('hero-1')   // Show specific component
-         */
-        tree: (indexOrId) => registry.tree(indexOrId),
-        /**
-         * Get all components
-         */
-        all: () => registry.all(),
-        /**
-         * Clear all components and history
-         */
-        clear: () => registry.clear(),
-        /**
-         * Access global state history
-         */
-        history: {
-            stats: () => stateHistory.getStats(),
-            timeline: () => stateHistory.getTimeline(),
-            clear: () => stateHistory.clear()
-        }
-    };
-    console.log(`
-🎨 JUX DevTools Ready!
-
-Quick Commands:
-  _jux.list()              List all components with indices
-  _jux.tree()              Show component tree (state, history, events)
-  _jux.get(0)              Get first component
-  _jux.get('hero-1')       Get component by ID
-
-Direct Manipulation:
-  const h = _jux.get(0)
-  h.state.title = 'New!'   Mutate state directly
-  h.rollback()             Undo last change
-  h.rollforward()          Redo change
-  h.timeline()             View full history
-
-History:
-  _jux.history.stats()     Global statistics
-  _jux.history.timeline()  Complete timeline
-    `);
-}

package/lib/components/registry.ts

@@ -1,193 +0,0 @@
-/**
- * Simplified JUX Component Registry
- * Lean console debugging interface
- */
-
-import { BaseComponent } from './base/BaseComponent.js';
-import { stateHistory } from './history/StateHistory.js';
-
-class ComponentRegistry {
-    private components: BaseComponent<any>[] = [];
-
-    register(component: BaseComponent<any>): void {
-        // Avoid duplicates
-        if (!this.components.find(c => c._id === component._id)) {
-            this.components.push(component);
-        }
-    }
-
-    unregister(id: string): void {
-        this.components = this.components.filter(c => c._id !== id);
-    }
-
-    /**
-     * Get component by index or ID
-     */
-    get(indexOrId: number | string): BaseComponent<any> | undefined {
-        if (typeof indexOrId === 'number') {
-            return this.components[indexOrId];
-        }
-        return this.components.find(c => c._id === indexOrId);
-    }
-
-    /**
-     * Print indexed list to console
-     */
-    list(): void {
-        if (this.components.length === 0) {
-            console.log('📭 No components registered');
-            return;
-        }
-
-        console.log('\n📋 Registered Components:\n');
-        this.components.forEach((comp, idx) => {
-            console.log(`  [${idx}] ${comp._id} → ${comp.constructor.name}`);
-        });
-        console.log(`\n💡 Access via: _jux.get(${0}) or _jux.get('${this.components[0]._id}')\n`);
-    }
-
-    /**
-     * Show component tree with state, history, events
-     */
-    tree(indexOrId?: number | string): void {
-        let comp: BaseComponent<any> | undefined;
-
-        if (indexOrId === undefined) {
-            // Show all components
-            this.components.forEach((c, idx) => this._printTree(c, idx));
-            return;
-        }
-
-        comp = this.get(indexOrId);
-        if (!comp) {
-            console.error(`❌ Component not found: ${indexOrId}`);
-            return;
-        }
-
-        this._printTree(comp, typeof indexOrId === 'number' ? indexOrId : undefined);
-    }
-
-    private _printTree(comp: BaseComponent<any>, index?: number): void {
-        const idx = index !== undefined ? `[${index}]` : '';
-        const stateChanges = stateHistory.getComponentHistory(comp._id);
-        const events = stateHistory.getComponentEvents(comp._id);
-        const syncCount = (comp as any)._syncBindings?.length || 0;
-        const bindCount = (comp as any)._bindings?.length || 0;
-
-        console.group(`🌳 ${idx} ${comp._id} (${comp.constructor.name})`);
-
-        console.log('📊 State:', comp.state);
-
-        if (stateChanges.length > 0) {
-            console.log(`📜 History: ${stateChanges.length} changes`);
-            console.log('   Last 3:', stateChanges.slice(-3).map(s =>
-                `${s.property}: ${s.oldValue} → ${s.newValue}`
-            ));
-        }
-
-        if (syncCount > 0) {
-            console.log(`🔗 Syncs: ${syncCount} active`);
-        }
-
-        if (bindCount > 0 || events.length > 0) {
-            console.log(`⚡ Events: ${bindCount} binds, ${events.length} fired`);
-        }
-
-        console.log(`\n💡 Commands:`);
-        console.log(`   _jux.get(${index ?? `'${comp._id}'`}).state.prop = value`);
-        console.log(`   _jux.get(${index ?? `'${comp._id}'`}).rollback()`);
-        console.log(`   _jux.get(${index ?? `'${comp._id}'`}).timeline()`);
-
-        console.groupEnd();
-    }
-
-    /**
-     * Get all components
-     */
-    all(): BaseComponent<any>[] {
-        return this.components;
-    }
-
-    /**
-     * Clear registry
-     */
-    clear(): void {
-        this.components = [];
-        stateHistory.clear();
-    }
-}
-
-export const registry = new ComponentRegistry();
-
-// ✅ Expose lean console interface
-if (typeof window !== 'undefined') {
-    (window as any)._jux = {
-        /**
-         * Get component by index or ID
-         * @example
-         *   const h = _jux.get(0)           // Get first component
-         *   const h = _jux.get('hero-1')    // Get by ID
-         *   h.state.title = 'New Title'     // Direct mutation
-         *   h.rollback()                    // Undo last change
-         */
-        get: (indexOrId: number | string) => registry.get(indexOrId),
-
-        /**
-         * List all components with indices
-         * @example
-         *   _jux.list()
-         *   // [0] hero-1 → Hero
-         *   // [1] nav-main → Nav
-         */
-        list: () => registry.list(),
-
-        /**
-         * Show component tree (state, history, events, syncs)
-         * @example
-         *   _jux.tree()           // Show all
-         *   _jux.tree(0)          // Show first component
-         *   _jux.tree('hero-1')   // Show specific component
-         */
-        tree: (indexOrId?: number | string) => registry.tree(indexOrId),
-
-        /**
-         * Get all components
-         */
-        all: () => registry.all(),
-
-        /**
-         * Clear all components and history
-         */
-        clear: () => registry.clear(),
-
-        /**
-         * Access global state history
-         */
-        history: {
-            stats: () => stateHistory.getStats(),
-            timeline: () => stateHistory.getTimeline(),
-            clear: () => stateHistory.clear()
-        }
-    };
-
-    console.log(`
-🎨 JUX DevTools Ready!
-
-Quick Commands:
-  _jux.list()              List all components with indices
-  _jux.tree()              Show component tree (state, history, events)
-  _jux.get(0)              Get first component
-  _jux.get('hero-1')       Get component by ID
-
-Direct Manipulation:
-  const h = _jux.get(0)
-  h.state.title = 'New!'   Mutate state directly
-  h.rollback()             Undo last change
-  h.rollforward()          Redo change
-  h.timeline()             View full history
-
-History:
-  _jux.history.stats()     Global statistics
-  _jux.history.timeline()  Complete timeline
-    `);
-}