juxscript 1.0.132 → 1.1.2

package/lib/componentsv2/input/InputEngine.d.ts

@@ -1,70 +0,0 @@
-import { BaseEngine, BaseState } from '../base/BaseEngine.js';
-import { OptionsContractSchema } from '../base/OptionsContract.js';
-export interface InputState extends BaseState {
-    value: string;
-    label: string | null;
-    placeholder: string;
-    type: 'text' | 'number' | 'password' | 'email';
-    error: string | null;
-    readonly: boolean;
-}
-export interface InputOptions {
-    value?: string | number;
-    label?: string | null;
-    placeholder?: string;
-    type?: 'text' | 'number' | 'password' | 'email';
-    error?: string | null;
-    readonly?: boolean;
-}
-export declare class InputEngine extends BaseEngine<InputState, InputOptions> {
-    constructor(id: string, options?: InputOptions);
-    /**
-     * OPTIONS CONTRACT
-     * Defines valid options with types, defaults, and aliases for common mistakes.
-     */
-    protected get optionsSchema(): OptionsContractSchema;
-    protected prepareState(id: string, options: InputOptions): InputState;
-    /**
-     * Set input value
-     * Method name matches state property: value
-     */
-    value(val: string | number): this;
-    /**
-     * Set label text
-     * Method name matches state property: label
-     */
-    label(text: string | null): this;
-    /**
-     * Set placeholder text
-     * Method name matches state property: placeholder
-     */
-    placeholder(text: string): this;
-    /**
-     * Set input type
-     * Method name matches state property: type
-     */
-    type(inputType: 'text' | 'number' | 'password' | 'email'): this;
-    /**
-     * Set error message
-     * Method name matches state property: error
-     */
-    error(message: string | null): this;
-    /**
-     * Set readonly state
-     * Method name matches state property: readonly
-     */
-    readonly(isReadonly: boolean): this;
-    /** @alias for value() */
-    setValue(val: string | number): this;
-    /** @alias for label() */
-    setLabel(text: string): this;
-    /** @alias for placeholder() */
-    setPlaceholder(text: string): this;
-    /** @alias for error() */
-    setError(message: string | null): this;
-    /** @alias for type() */
-    setType(inputType: 'text' | 'number' | 'password' | 'email'): this;
-    /** @alias for readonly() */
-    setReadonly(isReadonly: boolean): this;
-}
-//# sourceMappingURL=InputEngine.d.ts.map

package/lib/componentsv2/input/InputEngine.js

@@ -1,143 +0,0 @@
-import { BaseEngine } from '../base/BaseEngine.js';
-export class InputEngine extends BaseEngine {
-    constructor(id, options = {}) {
-        super(id, options);
-    }
-    /**
-     * OPTIONS CONTRACT
-     * Defines valid options with types, defaults, and aliases for common mistakes.
-     */
-    get optionsSchema() {
-        return {
-            value: {
-                type: 'string',
-                default: '',
-                description: 'Input value',
-                aliases: ['val', 'text', 'content', 'defaultValue', 'initialValue']
-            },
-            label: {
-                type: 'string',
-                default: null,
-                description: 'Label text displayed above input',
-                aliases: ['title', 'name', 'labelText']
-            },
-            placeholder: {
-                type: 'string',
-                default: '',
-                description: 'Placeholder text when input is empty',
-                aliases: ['hint', 'placeholderText']
-            },
-            type: {
-                type: 'string',
-                default: 'text',
-                description: 'Input type: "text", "number", "password", "email"',
-                aliases: ['inputType', 'kind']
-            },
-            error: {
-                type: 'string',
-                default: null,
-                description: 'Error message to display',
-                aliases: ['errorMessage', 'errorText', 'validationError']
-            },
-            readonly: {
-                type: 'boolean',
-                default: false,
-                description: 'Make input read-only',
-                aliases: ['readOnly', 'isReadonly', 'editable']
-            }
-        };
-    }
-    prepareState(id, options) {
-        return {
-            id,
-            classes: ['jux-input-wrapper'],
-            visible: true,
-            disabled: false,
-            loading: false,
-            attributes: {},
-            value: options.value !== undefined ? String(options.value) : '',
-            label: options.label ?? null,
-            placeholder: options.placeholder || '',
-            type: options.type || 'text',
-            error: options.error ?? null,
-            readonly: options.readonly || false
-        };
-    }
-    // --- State-Aligned Methods ---
-    /**
-     * Set input value
-     * Method name matches state property: value
-     */
-    value(val) {
-        this.updateState({ value: String(val) });
-        this.emit('change', { value: val });
-        return this;
-    }
-    /**
-     * Set label text
-     * Method name matches state property: label
-     */
-    label(text) {
-        this.updateState({ label: text });
-        return this;
-    }
-    /**
-     * Set placeholder text
-     * Method name matches state property: placeholder
-     */
-    placeholder(text) {
-        this.updateState({ placeholder: text });
-        return this;
-    }
-    /**
-     * Set input type
-     * Method name matches state property: type
-     */
-    type(inputType) {
-        this.updateState({ type: inputType });
-        return this;
-    }
-    /**
-     * Set error message
-     * Method name matches state property: error
-     */
-    error(message) {
-        this.updateState({ error: message });
-        this.emit('validation', { valid: !message, error: message });
-        return this;
-    }
-    /**
-     * Set readonly state
-     * Method name matches state property: readonly
-     */
-    readonly(isReadonly) {
-        this.updateState({ readonly: isReadonly });
-        return this;
-    }
-    // --- Convenience Aliases ---
-    /** @alias for value() */
-    setValue(val) {
-        return this.value(val);
-    }
-    /** @alias for label() */
-    setLabel(text) {
-        return this.label(text);
-    }
-    /** @alias for placeholder() */
-    setPlaceholder(text) {
-        return this.placeholder(text);
-    }
-    /** @alias for error() */
-    setError(message) {
-        return this.error(message);
-    }
-    /** @alias for type() */
-    setType(inputType) {
-        return this.type(inputType);
-    }
-    /** @alias for readonly() */
-    setReadonly(isReadonly) {
-        return this.readonly(isReadonly);
-    }
-}
-//# sourceMappingURL=InputEngine.js.map

package/lib/componentsv2/input/InputSkin.d.ts

@@ -1,11 +0,0 @@
-import { BaseSkin } from '../base/BaseSkin.js';
-import { InputEngine, InputState } from './InputEngine.js';
-export declare class InputSkin extends BaseSkin<InputState, InputEngine> {
-    #private;
-    constructor(engine: InputEngine);
-    protected get structureCss(): string;
-    protected createRoot(): HTMLElement;
-    protected bindEvents(root: HTMLElement): void;
-    protected updateSkin(state: InputState): void;
-}
-//# sourceMappingURL=InputSkin.d.ts.map

package/lib/componentsv2/input/InputSkin.js

@@ -1,89 +0,0 @@
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
-    if (kind === "m") throw new TypeError("Private method is not writable");
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
-    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
-};
-var _InputSkin_labelEl, _InputSkin_inputEl, _InputSkin_errorEl;
-import { BaseSkin } from '../base/BaseSkin.js';
-import structureCss from './structure.css';
-export class InputSkin extends BaseSkin {
-    constructor(engine) {
-        super(engine);
-        _InputSkin_labelEl.set(this, null);
-        _InputSkin_inputEl.set(this, null);
-        _InputSkin_errorEl.set(this, null);
-    }
-    get structureCss() {
-        return structureCss;
-    }
-    createRoot() {
-        return document.createElement('div');
-    }
-    bindEvents(root) {
-        root.addEventListener('input', (e) => {
-            const target = e.target;
-            if (target === __classPrivateFieldGet(this, _InputSkin_inputEl, "f")) {
-                this.engine.value(target.value);
-            }
-        });
-    }
-    updateSkin(state) {
-        if (!this.root)
-            return;
-        this.applySkinAttributes(this.root, state);
-        // Ensure DOM Structure
-        if (!__classPrivateFieldGet(this, _InputSkin_inputEl, "f")) {
-            this.root.innerHTML = ''; // Reset
-            // 1. Label
-            __classPrivateFieldSet(this, _InputSkin_labelEl, document.createElement('label'), "f");
-            __classPrivateFieldGet(this, _InputSkin_labelEl, "f").className = 'jux-input-label';
-            __classPrivateFieldGet(this, _InputSkin_labelEl, "f").htmlFor = `input-${state.id}`;
-            this.root.appendChild(__classPrivateFieldGet(this, _InputSkin_labelEl, "f"));
-            // 2. Input
-            __classPrivateFieldSet(this, _InputSkin_inputEl, document.createElement('input'), "f");
-            __classPrivateFieldGet(this, _InputSkin_inputEl, "f").id = `input-${state.id}`;
-            __classPrivateFieldGet(this, _InputSkin_inputEl, "f").className = 'jux-input-control';
-            this.root.appendChild(__classPrivateFieldGet(this, _InputSkin_inputEl, "f"));
-            // 3. Error
-            __classPrivateFieldSet(this, _InputSkin_errorEl, document.createElement('div'), "f");
-            __classPrivateFieldGet(this, _InputSkin_errorEl, "f").className = 'jux-input-error';
-            this.root.appendChild(__classPrivateFieldGet(this, _InputSkin_errorEl, "f"));
-        }
-        // Apply State
-        this.root.className = state.classes.join(' ');
-        if (state.label) {
-            __classPrivateFieldGet(this, _InputSkin_labelEl, "f").textContent = state.label;
-            __classPrivateFieldGet(this, _InputSkin_labelEl, "f").style.display = 'block';
-        }
-        else {
-            __classPrivateFieldGet(this, _InputSkin_labelEl, "f").style.display = 'none';
-        }
-        // Only update value if different to prevent cursor jumps
-        if (__classPrivateFieldGet(this, _InputSkin_inputEl, "f").value !== state.value) {
-            __classPrivateFieldGet(this, _InputSkin_inputEl, "f").value = state.value;
-        }
-        __classPrivateFieldGet(this, _InputSkin_inputEl, "f").type = state.type;
-        __classPrivateFieldGet(this, _InputSkin_inputEl, "f").placeholder = state.placeholder;
-        __classPrivateFieldGet(this, _InputSkin_inputEl, "f").disabled = state.disabled || state.loading;
-        __classPrivateFieldGet(this, _InputSkin_inputEl, "f").readOnly = state.readonly;
-        if (state.error) {
-            __classPrivateFieldGet(this, _InputSkin_errorEl, "f").textContent = state.error;
-            __classPrivateFieldGet(this, _InputSkin_errorEl, "f").style.display = 'block';
-            __classPrivateFieldGet(this, _InputSkin_inputEl, "f").setAttribute('aria-invalid', 'true');
-            this.root.classList.add('has-error');
-        }
-        else {
-            __classPrivateFieldGet(this, _InputSkin_errorEl, "f").style.display = 'none';
-            __classPrivateFieldGet(this, _InputSkin_inputEl, "f").removeAttribute('aria-invalid');
-            this.root.classList.remove('has-error');
-        }
-    }
-}
-_InputSkin_labelEl = new WeakMap(), _InputSkin_inputEl = new WeakMap(), _InputSkin_errorEl = new WeakMap();
-//# sourceMappingURL=InputSkin.js.map

package/lib/componentsv2/input/structure.css

@@ -1,47 +0,0 @@
-.jux-input-wrapper {
-    display: flex;
-    flex-direction: column;
-    gap: 4px; /* Space between label and input */
-    font-family: inherit;
-    width: 100%;
-}
-
-.jux-input-label {
-    font-size: 0.85rem;
-    font-weight: 500;
-    color: #444;
-}
-
-.jux-input-control {
-    padding: 8px 12px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    font-size: 1rem;
-    transition: border-color 0.2s, box-shadow 0.2s;
-}
-
-.jux-input-control:focus {
-    outline: none;
-    border-color: #007bff;
-    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
-}
-
-.jux-input-control:disabled {
-    background-color: #f5f5f5;
-    cursor: not-allowed;
-    opacity: 0.7;
-}
-
-.jux-input-error {
-    font-size: 0.75rem;
-    color: #dc3545;
-    min-height: 1.2em; /* Prevent layout jump */
-}
-
-/* Error State Overrides */
-.jux-input-wrapper.has-error .jux-input-control {
-    border-color: #dc3545;
-}
-.jux-input-wrapper.has-error .jux-input-label {
-    color: #dc3545;
-}

package/lib/componentsv2/list/List.d.ts

@@ -1,49 +0,0 @@
-import { ListEngine, ListOptions } from './ListEngine.js';
-import { JuxServiceContract } from '../base/BaseEngine.js';
-export type ListKnob = 'add' | 'edit' | 'move' | 'search' | 'delete' | 'sort';
-export type ListComponent = ListEngine & {
-    render: (targetId: string | HTMLElement) => ListComponent;
-    injectCSS: (id: string, cssContent: string) => void;
-    enableSearch: (enabled?: boolean) => ListComponent;
-    enableAdd: (enabled?: boolean) => ListComponent;
-    enableDelete: (enabled?: boolean) => ListComponent;
-    enableEdit: (enabled?: boolean) => ListComponent;
-    enableMove: (enabled?: boolean) => ListComponent;
-    enableSort: (enabled?: boolean) => ListComponent;
-    enableNoItems: (message?: string) => ListComponent;
-    knobs: (features: ListKnob[]) => ListComponent;
-    addPlugin: (plugin: JuxServiceContract<ListEngine>) => ListComponent;
-};
-/**
- * OPTIONS CONTRACT for List:
- *
- * | Option         | Type   | Default     | Aliases                              |
- * |----------------|--------|-------------|--------------------------------------|
- * | items          | array  | []          | data, list, values, options, entries |
- * | listType       | string | 'unordered' | type, ordered, ul, ol                |
- * | selectionMode  | string | 'none'      | selection, mode, selectable          |
- * | filterText     | string | ''          | filter, search, query, searchText    |
- * | sorted         | string | 'none'      | sort, order, sortOrder, sortDirection|
- * | noItemsMessage | string | null        | emptyMessage, emptyText, placeholder |
- * | columns        | array  | []          | cols, fields, headers                |
- * | idField        | string | '_juxId'    | idKey, idProperty, keyField          |
- *
- * METHODS (match state properties):
- * - .items(value)           - Set list items
- * - .listType(type)         - Set list type (ul/ol)
- * - .selectionMode(mode)    - Set selection mode
- * - .filterText(text)       - Set filter text
- * - .sorted(order)          - Set sort order
- * - .noItemsMessage(msg)    - Set empty state message
- * - .columns(cols)          - Set column definitions
- *
- * CONVENIENCE ALIASES:
- * - .setSelectionMode(mode) → .selectionMode(mode)
- * - .setColumns(cols)       → .columns(cols)
- * - .filter(text)           → .filterText(text)
- * - .enableNoItems(msg)     → .noItemsMessage(msg)
- * - .toggleSort(order?)     → cycles/sets sorted state
- * - .toggleListType()       → toggles listType state
- */
-export declare function List(id: string, options?: ListOptions): ListComponent;
-//# sourceMappingURL=List.d.ts.map

package/lib/componentsv2/list/List.js

@@ -1,105 +0,0 @@
-import { ListEngine } from './ListEngine.js';
-import { ListSkin } from './ListSkin.js';
-/**
- * OPTIONS CONTRACT for List:
- *
- * | Option         | Type   | Default     | Aliases                              |
- * |----------------|--------|-------------|--------------------------------------|
- * | items          | array  | []          | data, list, values, options, entries |
- * | listType       | string | 'unordered' | type, ordered, ul, ol                |
- * | selectionMode  | string | 'none'      | selection, mode, selectable          |
- * | filterText     | string | ''          | filter, search, query, searchText    |
- * | sorted         | string | 'none'      | sort, order, sortOrder, sortDirection|
- * | noItemsMessage | string | null        | emptyMessage, emptyText, placeholder |
- * | columns        | array  | []          | cols, fields, headers                |
- * | idField        | string | '_juxId'    | idKey, idProperty, keyField          |
- *
- * METHODS (match state properties):
- * - .items(value)           - Set list items
- * - .listType(type)         - Set list type (ul/ol)
- * - .selectionMode(mode)    - Set selection mode
- * - .filterText(text)       - Set filter text
- * - .sorted(order)          - Set sort order
- * - .noItemsMessage(msg)    - Set empty state message
- * - .columns(cols)          - Set column definitions
- *
- * CONVENIENCE ALIASES:
- * - .setSelectionMode(mode) → .selectionMode(mode)
- * - .setColumns(cols)       → .columns(cols)
- * - .filter(text)           → .filterText(text)
- * - .enableNoItems(msg)     → .noItemsMessage(msg)
- * - .toggleSort(order?)     → cycles/sets sorted state
- * - .toggleListType()       → toggles listType state
- */
-export function List(id, options = {}) {
-    // 1. Create the Logic
-    const engine = new ListEngine(id, options);
-    // Registration (Debug/Introspection)
-    if (typeof window !== 'undefined') {
-        // @ts-ignore
-        window.juxEngines = window.juxEngines || {};
-        // @ts-ignore
-        window.juxEngines[id] = engine;
-        // @ts-ignore
-        window.juxEnginesKeys = Object.keys(window.juxEngines);
-    }
-    // 2. Create the View (wired to the engine)
-    const skin = new ListSkin(engine);
-    // 3. Augment the Engine with Render capability
-    // @ts-ignore - Dynamic augmentation
-    engine.render = (targetId) => {
-        const target = typeof targetId === 'string'
-            ? document.getElementById(targetId)
-            : targetId;
-        if (target) {
-            skin.renderSkin(target);
-        }
-        else {
-            console.warn(`Jux List: Target ${targetId} not found.`);
-        }
-        return engine; // Maintain Fluent Chain
-    };
-    // 4. Augment with Styling & UI capability
-    // @ts-ignore
-    engine.injectCSS = (id, cssContent) => skin.injectCSS(id, cssContent);
-    // @ts-ignore
-    engine.enableSearch = (enabled = true) => { skin.enableSearch(enabled); return engine; };
-    // @ts-ignore
-    engine.enableAdd = (enabled = true) => { skin.enableAdd(enabled); return engine; };
-    // @ts-ignore
-    engine.enableDelete = (enabled = true) => { skin.enableDelete(enabled); return engine; };
-    // @ts-ignore
-    engine.enableEdit = (enabled = true) => { skin.enableEdit(enabled); return engine; };
-    // @ts-ignore
-    engine.enableMove = (enabled = true) => { skin.enableMove(enabled); return engine; };
-    // @ts-ignore
-    engine.enableSort = (enabled = true) => { skin.enableSort(enabled); return engine; };
-    // @ts-ignore
-    engine.knobs = (features) => {
-        features.forEach(k => {
-            switch (k) {
-                case 'add':
-                    skin.enableAdd(true);
-                    break;
-                case 'edit':
-                    skin.enableEdit(true);
-                    break;
-                case 'move':
-                    skin.enableMove(true);
-                    break;
-                case 'search':
-                    skin.enableSearch(true);
-                    break;
-                case 'delete':
-                    skin.enableDelete(true);
-                    break;
-                case 'sort':
-                    skin.enableSort(true);
-                    break;
-            }
-        });
-        return engine;
-    };
-    return engine;
-}
-//# sourceMappingURL=List.js.map

package/lib/componentsv2/list/ListEngine.d.ts

@@ -1,121 +0,0 @@
-import { BaseEngine, BaseState } from '../base/BaseEngine.js';
-import { OptionsContractSchema } from '../base/OptionsContract.js';
-export interface ListItem {
-    id: string;
-    text: string;
-    selected: boolean;
-    classes: string[];
-    [key: string]: any;
-}
-/**
- * Flexible input shape for creating items
- * Allows simple strings or detailed configuration objects.
- */
-export type ListItemInput = string | Record<string, any>;
-export interface ListState extends BaseState {
-    items: ListItem[];
-    listType: 'unordered' | 'ordered';
-    selectionMode: 'single' | 'multiple' | 'none';
-    filterText: string;
-    sorted: 'asc' | 'desc' | 'none';
-    noItemsMessage: string | null;
-    columns: (string | {
-        key: string;
-        label?: string;
-    })[];
-    idField: string;
-}
-export interface ListOptions {
-    items?: ListItemInput[];
-    listType?: 'unordered' | 'ordered';
-    selectionMode?: 'single' | 'multiple' | 'none';
-    filterText?: string;
-    sorted?: 'asc' | 'desc' | 'none';
-    noItemsMessage?: string | null;
-    columns?: (string | {
-        key: string;
-        label?: string;
-    })[];
-    idField?: string;
-}
-export declare class ListEngine extends BaseEngine<ListState, ListOptions> {
-    constructor(id: string, options?: ListOptions);
-    /**
-     * OPTIONS CONTRACT
-     * Defines valid options with types, defaults, and aliases for common mistakes.
-     */
-    protected get optionsSchema(): OptionsContractSchema;
-    /**
-     * CONTRACT IMPLEMENTATION:
-     * Convert loose Options into STRICT initial state.
-     */
-    protected prepareState(id: string, options: ListOptions): ListState;
-    private static normalizeItem;
-    /**
-     * Set items array
-     * Method name matches state property: items
-     */
-    items(value: ListItemInput[]): this;
-    /**
-     * Set list type
-     * Method name matches state property: listType
-     */
-    listType(type: 'unordered' | 'ordered'): this;
-    /**
-     * Set selection mode
-     * Method name matches state property: selectionMode
-     */
-    selectionMode(mode: 'single' | 'multiple' | 'none'): this;
-    /**
-     * Set filter text
-     * Method name matches state property: filterText
-     */
-    filterText(text: string): this;
-    /**
-     * Set sort order
-     * Method name matches state property: sorted
-     */
-    sorted(order: 'asc' | 'desc' | 'none'): this;
-    /**
-     * Set no items message
-     * Method name matches state property: noItemsMessage
-     */
-    noItemsMessage(message: string | null): this;
-    /**
-     * Set columns configuration
-     * Method name matches state property: columns
-     */
-    columns(cols: (string | {
-        key: string;
-        label?: string;
-    })[]): this;
-    /** @alias for selectionMode() */
-    setSelectionMode(mode: 'single' | 'multiple' | 'none'): this;
-    /** @alias for columns() */
-    setColumns(cols: (string | {
-        key: string;
-        label?: string;
-    })[]): this;
-    /** @alias for filterText() */
-    filter(text: string): this;
-    /** @alias for noItemsMessage() */
-    enableNoItems(message?: string): this;
-    /**
-     * Toggle sort order (cycles: none -> asc -> desc -> none)
-     * @alias Convenience method that cycles sorted state
-     */
-    toggleSort(order?: 'asc' | 'desc' | 'none'): this;
-    /**
-     * Toggle list type between ordered/unordered
-     * @alias Convenience method that toggles listType state
-     */
-    toggleListType(): this;
-    addItem(input: ListItemInput): this;
-    addItems(items: ListItemInput[]): this;
-    clearItems(): this;
-    removeItem(identifier: number | string): this;
-    updateItem(index: number, updates: Partial<ListItem> | string): this;
-    moveItem(fromIndex: number, toIndex: number): this;
-    toggleSelection(index: number): this;
-}
-//# sourceMappingURL=ListEngine.d.ts.map