juxscript 1.0.102 → 1.0.103

package/lib/componentsv2/list/skin.ts

@@ -1,369 +0,0 @@
-import { BaseSkin } from '../base/BaseSkin.js';
-import { ListEngine, ListState, ListItem } from './engine.js';
-import structureCss from './structure.css';
-
-
-export class ListSkin extends BaseSkin<ListState, ListEngine> {
-    // UI Feature Flags
-    #showSearch = false;
-    #showAdd = false;
-    #showDelete = false;
-    #showEdit = false;
-    #showMove = false;
-    #showSort = false;
-
-    // Internal Drag State
-    #dragSourceIndex: number | null = null;
-
-    // DOM References (Stable elements to prevent re-render thrashing)
-    #toolbar: HTMLElement | null = null;
-    #listContainer: HTMLElement | null = null;
-
-    // Toolbar Componenets
-    #searchInput: HTMLInputElement | null = null;
-    #addBtn: HTMLButtonElement | null = null;
-    #sortBtn: HTMLButtonElement | null = null;
-
-    constructor(engine: ListEngine) {
-        super(engine);
-    }
-
-    // --- Public UI API ---
-    enableSearch(enabled: boolean): void { this.#showSearch = enabled; this.#renderToolbar(); }
-    enableAdd(enabled: boolean): void { this.#showAdd = enabled; this.#renderToolbar(); }
-    enableDelete(enabled: boolean): void { this.#showDelete = enabled; this.updateSkin(this.engine.state); }
-    enableMove(enabled: boolean): void { this.#showMove = enabled; this.updateSkin(this.engine.state); }
-    enableSort(enabled: boolean): void { this.#showSort = enabled; this.#renderToolbar(); }
-    enableNoItems(message: string = 'No items found.'): void { this.engine.enableNoItems(message); }
-
-    enableEdit(enabled: boolean): void {
-        this.#showEdit = enabled;
-        this.updateSkin(this.engine.state);
-    }
-    protected get structureCss(): string {
-        return structureCss;
-    }
-    // --- Template Skin Implementation ---
-
-    protected bindEvents(root: HTMLElement): void {
-        // 1. Delegation: Toolbar Events (Handled via direct element ref where possible now, or delegation fallback)
-
-        // We attach the input listener globally on root for delegation,
-        // but now that we hold the #searchInput ref, we could bind directly.
-        // Delegation is still safer if elements are recreated.
-        root.addEventListener('input', (e: Event) => {
-            const target = e.target as HTMLInputElement;
-            if (target.matches('.jux-search-input')) {
-                this.engine.filter(target.value);
-            }
-        });
-
-        root.addEventListener('click', (e: MouseEvent) => {
-            const target = e.target as HTMLElement;
-
-            // Toolbar: Add
-            if (target.closest('.jux-action-add')) {
-                this.engine.addItem('New Item');
-                const newIndex = this.engine.state.items.length - 1;
-                if (newIndex >= 0) this.#openEditModal(newIndex);
-                return;
-            }
-
-            // Toolbar: Sort
-            if (target.closest('.jux-action-sort')) {
-                this.engine.toggleSort();
-                return;
-            }
-
-            // List Item Actions
-            const li = target.closest('li');
-            if (!li) return;
-
-            // ✅ USE ID for robust targeting
-            const id = li.dataset.id;
-            const indexStr = li.dataset.index;
-            if (!indexStr || !id) return;
-
-            const index = parseInt(indexStr, 10);
-
-            // Action: Delete
-            if (target.closest('.jux-action-delete')) {
-                this.engine.removeItem(id); // ✅ Valid per new engine signature
-                e.stopImmediatePropagation();
-                return;
-            }
-
-            // Action: Edit
-            if (target.closest('.jux-action-edit')) {
-                this.#openEditModal(index);
-                e.stopImmediatePropagation();
-                return;
-            }
-
-            // List Item: Selection
-            if (!target.closest('.jux-control')) {
-                this.engine.toggleSelection(index);
-            }
-        });
-
-        // 2. Drag & Drop Logic
-        root.addEventListener('dragstart', (e: DragEvent) => {
-            if (!this.#showMove) return;
-            const li = (e.target as HTMLElement).closest('li');
-            if (li) {
-                this.#dragSourceIndex = parseInt(li.dataset.index || '-1', 10);
-                e.dataTransfer!.effectAllowed = 'move';
-                e.dataTransfer!.setData('text/plain', li.dataset.index || '');
-                requestAnimationFrame(() => li.classList.add('jux-dragging'));
-            }
-        });
-
-        root.addEventListener('dragend', (e: DragEvent) => {
-            const li = (e.target as HTMLElement).closest('li');
-            if (li) li.classList.remove('jux-dragging');
-            root.querySelectorAll('.jux-item-drop-target').forEach(el => el.classList.remove('jux-item-drop-target'));
-            this.#dragSourceIndex = null;
-        });
-
-        root.addEventListener('dragover', (e: DragEvent) => {
-            if (!this.#showMove) return;
-            e.preventDefault();
-            const li = (e.target as HTMLElement).closest('li');
-            if (li && !li.classList.contains('jux-dragging')) {
-                e.dataTransfer!.dropEffect = 'move';
-                root.querySelectorAll('.jux-item-drop-target').forEach(el => el.classList.remove('jux-item-drop-target'));
-                li.classList.add('jux-item-drop-target');
-            }
-        });
-
-        root.addEventListener('drop', (e: DragEvent) => {
-            if (!this.#showMove) return;
-            e.preventDefault();
-            const li = (e.target as HTMLElement).closest('li');
-            if (li && this.#dragSourceIndex !== null) {
-                const toIndex = parseInt(li.dataset.index || '-1', 10);
-                if (toIndex !== -1 && this.#dragSourceIndex !== toIndex) {
-                    this.engine.moveItem(this.#dragSourceIndex, toIndex);
-                }
-            }
-        });
-    }
-
-    // --- Internals: Modal Editing ---
-    #openEditModal(index: number): void {
-        const item = this.engine.state.items[index];
-        if (!item) return;
-
-        const overlay = document.createElement('div');
-        overlay.className = 'jux-modal-overlay';
-        overlay.innerHTML = `
-            <div class="jux-modal">
-                <h3>Edit Item</h3>
-                <input type="text" id="jux-edit-input" value="${item.text.replace(/"/g, '&quot;')}" />
-                <div class="jux-modal-actions">
-                    <button class="jux-modal-btn jux-btn-cancel" id="jux-edit-cancel">Cancel</button>
-                    <button class="jux-modal-btn jux-btn-save" id="jux-edit-save">Save</button>
-                </div>
-            </div>
-        `;
-        document.body.appendChild(overlay);
-        const input = overlay.querySelector('#jux-edit-input') as HTMLInputElement;
-        const close = () => document.body.removeChild(overlay);
-        const save = () => {
-            if (input.value.trim()) this.engine.updateItem(index, input.value);
-            close();
-        };
-
-        overlay.querySelector('#jux-edit-cancel')?.addEventListener('click', close);
-        overlay.querySelector('#jux-edit-save')?.addEventListener('click', save);
-        overlay.addEventListener('click', (e) => { if (e.target === overlay) close(); });
-        input.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter') save();
-            if (e.key === 'Escape') close();
-        });
-        setTimeout(() => { input.focus(); input.select(); }, 0);
-    }
-
-    /**
-     * Skin Contract: Update/Changes
-     */
-    protected updateSkin(state: ListState): void {
-        if (!this.root) return;
-
-        // ✅ Ensure standard ID is set
-        this.root.id = state.id;
-
-        // Perform the DOM Update
-        const performUpdate = () => {
-            this.applySkinAttributes(this.root!, state);
-
-            // Lazy Creation
-            if (!this.#listContainer) {
-                this.root!.innerHTML = '';
-                this.#toolbar = document.createElement('div');
-                this.#toolbar.className = 'jux-list-toolbar';
-                this.root!.appendChild(this.#toolbar);
-
-                this.#listContainer = document.createElement('div');
-                this.root!.appendChild(this.#listContainer);
-                this.#renderToolbar(); // Initial render
-            }
-
-            // Always update toolbar state (e.g. icon direction) without destroying inputs
-            this.#renderToolbar();
-
-            // Container Classes
-            const classes = [...state.classes];
-            if (state.selectionMode !== 'none') classes.push('jux-list-selectable');
-            this.#listContainer!.className = classes.join(' ');
-
-            // Filtering
-            const visibleItems = state.items
-                .map((item, originalIndex) => ({ item, originalIndex }))
-                .filter(({ item }) =>
-                    state.filterText
-                        ? item.text.toLowerCase().includes(state.filterText.toLowerCase())
-                        : true
-                );
-
-            // Rendering Content
-            if (visibleItems.length === 0 && state.noItemsMessage) {
-                this.#listContainer!.innerHTML = `<div class="jux-list-empty-state">${state.noItemsMessage}</div>`;
-            } else {
-                const tag = state.listType === 'ordered' ? 'ol' : 'ul';
-                const html = visibleItems
-                    .map(({ item, originalIndex }) => this.#renderListItem(item, originalIndex, state))
-                    .join('');
-
-                this.#listContainer!.innerHTML = `<${tag} class="jux-list-element jux-list-type-${tag}">${html}</${tag}>`;
-            }
-        };
-
-        // ✨ View Transitions Logic
-        // We SKIP transition if the search input is focused, otherwise typing janks the UI.
-        const isSearching = document.activeElement &&
-            (document.activeElement === this.#searchInput);
-
-        if (!isSearching && typeof document !== 'undefined' && 'startViewTransition' in document) {
-            // @ts-ignore
-            document.startViewTransition(performUpdate);
-        } else {
-            performUpdate();
-        }
-    }
-
-    // --- DOM-Based Toolbar Rendering ---
-    #renderToolbar(): void {
-        if (!this.#toolbar) return;
-
-        // 1. Search Logic
-        if (this.#showSearch) {
-            if (!this.#searchInput) {
-                this.#searchInput = document.createElement('input');
-                this.#searchInput.type = 'text';
-                this.#searchInput.className = 'jux-search-input';
-                this.#searchInput.placeholder = 'Filter items...';
-                // Insert at start
-                this.#toolbar.prepend(this.#searchInput);
-            }
-        } else if (this.#searchInput) {
-            this.#searchInput.remove();
-            this.#searchInput = null;
-        }
-
-        // 2. Sort Logic
-        if (this.#showSort) {
-            if (!this.#sortBtn) {
-                this.#sortBtn = document.createElement('button');
-                this.#sortBtn.className = 'jux-action-sort';
-                this.#sortBtn.type = 'button';
-                this.#sortBtn.ariaLabel = 'Sort';
-                this.#toolbar.appendChild(this.#sortBtn);
-            }
-            // Update Icon state
-            const s = this.engine.state.sorted;
-            const icon = s === 'asc' ? '↑' : (s === 'desc' ? '↓' : '↕');
-            if (this.#sortBtn.textContent !== icon) {
-                this.#sortBtn.textContent = icon;
-            }
-        } else if (this.#sortBtn) {
-            this.#sortBtn.remove();
-            this.#sortBtn = null;
-        }
-
-        // 3. Add Logic
-        if (this.#showAdd) {
-            if (!this.#addBtn) {
-                this.#addBtn = document.createElement('button');
-                this.#addBtn.className = 'jux-action-add';
-                this.#addBtn.type = 'button';
-                this.#addBtn.ariaLabel = 'Add Item';
-                this.#addBtn.textContent = '+';
-                this.#toolbar.appendChild(this.#addBtn);
-            }
-        } else if (this.#addBtn) {
-            this.#addBtn.remove();
-            this.#addBtn = null;
-        }
-
-        // Parent Visibility
-        const hasChildren = this.#showSearch || this.#showSort || this.#showAdd;
-        this.#toolbar.style.display = hasChildren ? 'flex' : 'none';
-
-        // ensure Search input is first by re-prepending if it exists
-        if (this.#searchInput && this.#toolbar.firstChild !== this.#searchInput) {
-            this.#toolbar.prepend(this.#searchInput);
-        }
-    }
-
-    #renderListItem(item: ListItem, index: number, state: ListState): string {
-        const css = [
-            'jux-list-item',
-            item.selected ? 'jux-selected' : '',
-            ...(item.classes || [])
-        ].filter(Boolean).join(' ');
-
-        // ✅ Determine Content based on Columns configuration
-        let content = item.text;
-
-        if (state.columns && state.columns.length > 0) {
-            content = state.columns.map(col => {
-                const key = typeof col === 'string' ? col : col.key;
-                const cssClass = (typeof col === 'object' && col.label) ? `jux-col-${key}` : ''; // Basic class hook
-                const value = item[key] ?? '';
-                // If complex object, stringify or fallback
-                const displayVal = (typeof value === 'object') ? JSON.stringify(value) : String(value);
-
-                return `<span class="jux-col ${cssClass}">${displayVal}</span>`;
-            }).join(' <span class="jux-col-sep"> </span> ');
-        } else {
-            // Default Fallback logic: If no columns but item.text is boring ("[object Object]"), try to find keys
-            if (content === '[object Object]') {
-                const keys = Object.keys(item).filter(k =>
-                    k !== 'id' && k !== 'selected' && k !== 'classes' && k !== 'text' && k !== 'value'
-                );
-                if (keys.length > 0) {
-                    content = `${item[keys[0]]}`;
-                }
-            }
-        }
-
-        const moveBtn = this.#showMove ? `<span class="jux-action-drag jux-control" title="Drag to reorder">≡</span>` : '';
-        const editBtn = this.#showEdit ? `<button class="jux-action-edit jux-control" aria-label="Edit">✎</button>` : '';
-        const deleteBtn = this.#showDelete ? `<button class="jux-action-delete jux-control" aria-label="Delete">×</button>` : '';
-        const draggableAttr = this.#showMove ? 'draggable="true"' : '';
-        const transitionName = `jux-item-${item.id.replace(/[^a-zA-Z0-9-_]/g, '-')}`;
-
-        return `
-            <li data-id="${item.id}" data-index="${index}" class="${css}" ${draggableAttr} style="view-transition-name: ${transitionName}">
-                <div class="jux-list-item-content">
-                    ${content}
-                </div>
-                <div class="jux-item-controls">
-                    ${moveBtn}
-                    ${editBtn}
-                    ${deleteBtn}
-                </div>
-            </li>`;
-    }
-}

package/lib/componentsv2/plugins/ClientSQLitePlugin.ts

@@ -1,154 +0,0 @@
-import { JuxServiceContract, BaseEngine } from '../base/BaseEngine.js';
-
-export interface ClientSQLiteConfig {
-    /** Key used for IndexedDB storage (the "filename") */
-    dbName: string;
-
-    /** SQL to run if creating a brand new DB (Schema) */
-    initSql?: string;
-
-    /** Main Query to bind to the Engine State */
-    query?: string;
-
-    /** State property to bind results to (e.g. 'items') */
-    bindTo?: string;
-
-    /** Transform row object to State Item shape */
-    mapRow?: (row: any) => any;
-
-    /** If true, persists to IDB after every write operation */
-    autoSave?: boolean;
-}
-
-/**
- * Client-Side SQLite Plugin
- * Runs a real SQLite engine via WebAssembly (WASM) in the browser, persisted to IndexedDB.
- */
-export const ClientSQLitePlugin = (config: ClientSQLiteConfig): JuxServiceContract<BaseEngine<any>> => ({
-    name: 'client-sqlite-wasm',
-    version: '1.0.0',
-    targetEnv: 'client',
-
-    install: (engine) => {
-        let db: any = null;
-        const IDB_NAME = 'JuxSqliteStorage';
-        const IDB_STORE = 'files';
-
-        // --- 1. IndexedDB HELPER (The "Hard Drive") ---
-        const getFile = (key: string): Promise<Uint8Array | null> => {
-            return new Promise((resolve) => {
-                const r = indexedDB.open(IDB_NAME, 1);
-                r.onupgradeneeded = (e: any) => e.target.result.createObjectStore(IDB_STORE);
-                r.onsuccess = (e: any) => {
-                    const t = e.target.result.transaction([IDB_STORE], 'readonly').objectStore(IDB_STORE).get(key);
-                    t.onsuccess = () => resolve(t.result);
-                    t.onerror = () => resolve(null);
-                };
-            });
-        };
-
-        const saveFile = (key: string, data: Uint8Array) => {
-            const r = indexedDB.open(IDB_NAME, 1);
-            r.onsuccess = (e: any) => {
-                const tx = e.target.result.transaction([IDB_STORE], 'readwrite');
-                tx.objectStore(IDB_STORE).put(data, key);
-            };
-        };
-
-        // --- 2. SQL Helper (Result Transformation) ---
-        // sql.js return format: [{ columns: ['id', 'name'], values: [[1, 'Bob']] }]
-        // We convert this to: [{ id: 1, name: 'Bob' }]
-        const normalizeResults = (res: any[]) => {
-            if (!res || !res.length) return [];
-            const columns = res[0].columns;
-            const values = res[0].values;
-            return values.map((row: any[]) => {
-                const obj: any = {};
-                columns.forEach((col: string, i: number) => {
-                    obj[col] = row[i];
-                });
-                return obj;
-            });
-        };
-
-        // --- 3. REFRESH LOGIC ---
-        const refresh = () => {
-            if (!db || !config.query || !config.bindTo) return;
-            try {
-                // @ts-ignore
-                if (engine.loading) engine.loading(true);
-
-                // Run Query
-                const raw = db.exec(config.query);
-                const rows = normalizeResults(raw);
-
-                // Map & Update State
-                const items = config.mapRow ? rows.map(config.mapRow) : rows;
-                // @ts-ignore
-                engine.updateState({ [config.bindTo]: items });
-
-                // @ts-ignore
-                if (engine.loading) engine.loading(false);
-                // @ts-ignore
-                if (engine.emit) engine.emit('sql:refresh', { count: items.length });
-
-            } catch (e) {
-                console.error('[ClientSQLite] Query Error:', e);
-                // @ts-ignore
-                if (engine.loading) engine.loading(false);
-            }
-        };
-
-        // --- 4. INITIALIZATION ---
-        const loadSqlJs = async () => {
-            // Lazy load sql.js from CDN if not present
-            if (!(window as any).initSqlJs) {
-                await new Promise(resolve => {
-                    const script = document.createElement('script');
-                    // sql-wasm.js is the glue code that loads the .wasm binary
-                    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.8.0/sql-wasm.js';
-                    script.onload = resolve;
-                    document.head.appendChild(script);
-                });
-            }
-
-            const SQL = await (window as any).initSqlJs({
-                locateFile: (file: string) => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.8.0/${file}`
-            });
-
-            // "Mount" the file from IDB
-            const binary = await getFile(config.dbName);
-
-            if (binary) {
-                db = new SQL.Database(binary);
-                // @ts-ignore
-                if (engine.emit) engine.emit('sql:mounted', { size: binary.length });
-            } else {
-                db = new SQL.Database();
-                if (config.initSql) db.run(config.initSql);
-                if (config.autoSave) saveFile(config.dbName, db.export());
-                // @ts-ignore
-                if (engine.emit) engine.emit('sql:created');
-            }
-
-            // Expose SQL methods to Engine (Mixins)
-            Object.assign(engine, {
-                sqlRun: (sql: string) => {
-                    db.run(sql);
-                    if (config.autoSave) saveFile(config.dbName, db.export());
-                    refresh();
-                },
-                sqlExec: (sql: string) => {
-                    return normalizeResults(db.exec(sql));
-                },
-                sqlExport: () => {
-                    return db.export();
-                }
-            });
-
-            refresh();
-        };
-
-        loadSqlJs();
-    }
-});

package/lib/componentsv2/plugins/IndexedDBPlugin.ts

@@ -1,96 +0,0 @@
-import { JuxServiceContract, BaseEngine } from '../base/BaseEngine.js';
-
-export interface IndexedDBConfig {
-    dbName: string;
-    storeName: string;
-
-    /** 
-     * State Binding: The property key on the Engine's state to persist.
-     * e.g., 'items'
-     */
-    bindTo: string;
-
-    /** If true, loads data immediately on install */
-    autoLoad?: boolean;
-}
-
-/**
- * IndexedDB Plugin
- * Asynchronous persistence for larger datasets.
- */
-export const IndexedDBPlugin = (config: IndexedDBConfig): JuxServiceContract<BaseEngine<any>> => ({
-    name: 'indexed-db-persist',
-    version: '1.0.0',
-    targetEnv: 'client',
-
-    install: (engine) => {
-
-        // @ts-ignore
-        const initialState = engine.state[config.bindTo];
-        if (initialState !== undefined && !Array.isArray(initialState)) {
-            console.error(`[IndexedDBPlugin] 🛑 Configuration Error: bindTo='${config.bindTo}' is not an Array. This plugin is designed for List/Collection data.`);
-            return;
-        }
-
-        let db: IDBDatabase | null = null;
-        const request = indexedDB.open(config.dbName, 1);
-
-        // 1. Schema Setup
-        request.onupgradeneeded = (e: any) => {
-            const d = e.target.result;
-            if (!d.objectStoreNames.contains(config.storeName)) {
-                d.createObjectStore(config.storeName);
-            }
-        };
-
-        // 2. IO Operations
-        const save = (data: any) => {
-            if (!db) return;
-            const tx = db.transaction([config.storeName], 'readwrite');
-            const store = tx.objectStore(config.storeName);
-            store.put(data, 'state_snapshot'); // Storing entire bound state as one blob for simplicity
-        };
-
-        const load = () => {
-            if (!db) return;
-            // @ts-ignore
-            if (typeof engine.loading === 'function') engine.loading(true);
-
-            const tx = db.transaction([config.storeName], 'readonly');
-            const store = tx.objectStore(config.storeName);
-            const req = store.get('state_snapshot');
-
-            req.onsuccess = () => {
-                if (req.result) {
-                    // @ts-ignore
-                    engine.updateState({ [config.bindTo]: req.result });
-                    // @ts-ignore
-                    if (engine.emit) engine.emit('plugin:hydrated', { source: 'IndexedDB' });
-                }
-                // @ts-ignore
-                if (typeof engine.loading === 'function') engine.loading(false);
-            };
-
-            req.onerror = () => {
-                // @ts-ignore
-                if (typeof engine.loading === 'function') engine.loading(false);
-            };
-        };
-
-        // 3. Initialization
-        request.onsuccess = (e: any) => {
-            db = e.target.result;
-
-            if (config.autoLoad) {
-                load();
-            }
-
-            // Auto-save subscription (debounced slightly in real world, direct here)
-            engine.subscribe((state) => {
-                if (db) save(state[config.bindTo]);
-            });
-        };
-
-        request.onerror = (e) => console.error('[IndexedDBPlugin] Open Error', e);
-    }
-});