juxscript 1.0.62 → 1.0.63

package/lib/componentsv2/input/engine.ts

@@ -0,0 +1,76 @@
+import { BaseEngine, BaseState } from '../base/BaseEngine.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;
+    placeholder?: string;
+    type?: 'text' | 'number' | 'password' | 'email';
+    readonly?: boolean;
+}
+
+export class InputEngine extends BaseEngine<InputState, InputOptions> {
+
+    constructor(id: string, options: InputOptions = {}) {
+        super(id, options);
+    }
+
+    protected prepareState(id: string, options: InputOptions): InputState {
+        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: null,
+            readonly: options.readonly || false
+        };
+    }
+
+    // --- Mutators ---
+
+    setValue(value: string | number): this {
+        this.updateState({ value: String(value) });
+        this.emit('change', { value });
+        return this;
+    }
+
+    setLabel(label: string): this {
+        this.updateState({ label });
+        return this;
+    }
+
+    setPlaceholder(text: string): this {
+        this.updateState({ placeholder: text });
+        return this;
+    }
+
+    setError(message: string | null): this {
+        this.updateState({ error: message });
+        this.emit('validation', { valid: !message, error: message });
+        return this;
+    }
+
+    setType(type: 'text' | 'number' | 'password' | 'email'): this {
+        this.updateState({ type });
+        return this;
+    }
+
+    setReadonly(readonly: boolean): this {
+        this.updateState({ readonly });
+        return this;
+    }
+}

package/lib/componentsv2/input/skin.js

@@ -0,0 +1,91 @@
+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';
+export class InputSkin extends BaseSkin {
+    constructor(engine) {
+        super(engine);
+        _InputSkin_labelEl.set(this, null);
+        _InputSkin_inputEl.set(this, null);
+        _InputSkin_errorEl.set(this, null);
+        // Default aesthetic theme could be injected here
+    }
+    get structureCss() {
+        return new URL('./structure.css', import.meta.url).href;
+    }
+    createRoot() {
+        return document.createElement('div');
+    }
+    bindEvents(root) {
+        // We bind directly to the input element created in updateSkin
+        // delegation is tricky since we rebuild parts, but input is stable inside root usually.
+        root.addEventListener('input', (e) => {
+            const target = e.target;
+            if (target === __classPrivateFieldGet(this, _InputSkin_inputEl, "f")) {
+                this.engine.setValue(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=skin.js.map

package/lib/componentsv2/input/skin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skin.js","sourceRoot":"","sources":["skin.ts"],"names":[],"mappings":"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"}

package/lib/componentsv2/input/skin.ts

@@ -0,0 +1,91 @@
+import { BaseSkin } from '../base/BaseSkin.js';
+import { InputEngine, InputState } from './engine.js';
+
+export class InputSkin extends BaseSkin<InputState, InputEngine> {
+
+    #labelEl: HTMLLabelElement | null = null;
+    #inputEl: HTMLInputElement | null = null;
+    #errorEl: HTMLElement | null = null;
+
+    constructor(engine: InputEngine) {
+        super(engine);
+        // Default aesthetic theme could be injected here
+    }
+
+    protected get structureCss(): string {
+        return new URL('./structure.css', import.meta.url).href;
+    }
+
+    protected createRoot(): HTMLElement {
+        return document.createElement('div');
+    }
+
+    protected bindEvents(root: HTMLElement): void {
+        // We bind directly to the input element created in updateSkin
+        // delegation is tricky since we rebuild parts, but input is stable inside root usually.
+        root.addEventListener('input', (e) => {
+            const target = e.target as HTMLInputElement;
+            if (target === this.#inputEl) {
+                this.engine.setValue(target.value);
+            }
+        });
+    }
+
+    protected updateSkin(state: InputState): void {
+        if (!this.root) return;
+        this.applySkinAttributes(this.root, state);
+
+        // Ensure DOM Structure
+        if (!this.#inputEl) {
+            this.root.innerHTML = ''; // Reset
+
+            // 1. Label
+            this.#labelEl = document.createElement('label');
+            this.#labelEl.className = 'jux-input-label';
+            this.#labelEl.htmlFor = `input-${state.id}`;
+            this.root.appendChild(this.#labelEl);
+
+            // 2. Input
+            this.#inputEl = document.createElement('input');
+            this.#inputEl.id = `input-${state.id}`;
+            this.#inputEl.className = 'jux-input-control';
+            this.root.appendChild(this.#inputEl);
+
+            // 3. Error
+            this.#errorEl = document.createElement('div');
+            this.#errorEl.className = 'jux-input-error';
+            this.root.appendChild(this.#errorEl);
+        }
+
+        // Apply State
+        this.root.className = state.classes.join(' ');
+
+        if (state.label) {
+            this.#labelEl!.textContent = state.label;
+            this.#labelEl!.style.display = 'block';
+        } else {
+            this.#labelEl!.style.display = 'none';
+        }
+
+        // Only update value if different to prevent cursor jumps
+        if (this.#inputEl!.value !== state.value) {
+            this.#inputEl!.value = state.value;
+        }
+
+        this.#inputEl!.type = state.type;
+        this.#inputEl!.placeholder = state.placeholder;
+        this.#inputEl!.disabled = state.disabled || state.loading;
+        this.#inputEl!.readOnly = state.readonly;
+
+        if (state.error) {
+            this.#errorEl!.textContent = state.error;
+            this.#errorEl!.style.display = 'block';
+            this.#inputEl!.setAttribute('aria-invalid', 'true');
+            this.root.classList.add('has-error');
+        } else {
+            this.#errorEl!.style.display = 'none';
+            this.#inputEl!.removeAttribute('aria-invalid');
+            this.root.classList.remove('has-error');
+        }
+    }
+}

package/lib/componentsv2/input/structure.css

@@ -0,0 +1,47 @@
+.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/component.js

@@ -0,0 +1,83 @@
+import { ListEngine } from './engine.js';
+import { ListSkin } from './skin.js';
+/**
+ * Factory Function
+ * usage: jux.list('my-list', { items: ['A', 'B'] }).render('app')
+ *
+ * Strategy: FUNCTIONAL COMPOSITION
+ * We instantiate the pure Logic (Engine) and the View (Skin).
+ * We augment the Engine instance with a function, .render(), that delegates to the Skin method, renderSkin().
+ * This keeps the Engine class pure/headless, while offering a convenient API.
+ */
+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=component.js.map

package/lib/componentsv2/list/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sourceRoot":"","sources":["component.ts"],"names":[],"mappings":"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"}

package/lib/componentsv2/list/component.ts

@@ -0,0 +1,97 @@
+import { ListEngine, ListOptions } from './engine.js';
+import { ListSkin } from './skin.js';
+import { JuxServiceContract } from '../base/BaseEngine.js';
+
+export type ListKnob = 'add' | 'edit' | 'move' | 'search' | 'delete' | 'sort';
+
+// Define the Component Type (Engine + Render Capability)
+export type ListComponent = ListEngine & {
+    render: (targetId: string | HTMLElement) => ListComponent;
+    injectCSS: (id: string, cssContent: string) => void;
+    // New UI Capabilities
+    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;
+    // Extensions
+    addPlugin: (plugin: JuxServiceContract<ListEngine>) => ListComponent;
+};
+
+/**
+ * Factory Function
+ * usage: jux.list('my-list', { items: ['A', 'B'] }).render('app')
+ *
+ * Strategy: FUNCTIONAL COMPOSITION
+ * We instantiate the pure Logic (Engine) and the View (Skin).
+ * We augment the Engine instance with a function, .render(), that delegates to the Skin method, renderSkin().
+ * This keeps the Engine class pure/headless, while offering a convenient API.
+ */
+export function List(id: string, options: ListOptions = {}): ListComponent {
+    // 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: string | HTMLElement) => {
+        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 as ListComponent; // Maintain Fluent Chain
+    };
+
+    // 4. Augment with Styling & UI capability
+    // @ts-ignore
+    engine.injectCSS = (id: string, cssContent: string) => 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: ListKnob[]) => {
+        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 as ListComponent;
+}