juxscript 1.0.132 → 1.1.2

package/lib/componentsv2/list/structure.css

@@ -1,359 +0,0 @@
-.jux-list {
-  list-style: none; /* Default reset */
-  padding: 0;
-  margin: 0;
-}
-.jux-list.dark{
-  background: blue;
-}
-/* Explicit type styling based on dynamic class */
-.jux-list-type-ol {
-  list-style: decimal;
-  padding-left: 1.5rem; /* Make room for numbers */
-}
-
-.jux-list-type-ul {
-    list-style: none;
-}
-
-.jux-list-selectable .jux-list-item {
-    cursor: pointer;
-}
-
-/* Visual reflection of the disabled state */
-.jux-list[aria-disabled="true"] {
-  opacity: 0.5;
-  pointer-events: none;
-  cursor: not-allowed;
-  user-select: none;
-}
-
-.jux-list-item {
-  padding: var(--space-md) var(--space-lg);
-  border-bottom: var(--border-width);
-  border-color: var(--color-border);
-  transition: background-color var(--transition-fast);
-  margin: var(--space-sm);
-  cursor: default; /* Base cursor */
-  /* ✨ Uplift: Flex layout for content <-> controls separation */
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-.jux-list-item-highlight{
-
-    background-color: var(--color-surface-secondary-subtle, #ee76781a);
-    
-}
-/* Standard Hover Effect (Native CSS) */
-/* Apply to all items that are NOT disabled */
-.jux-list:not([aria-disabled="true"]) .jux-list-item:not(.jux-selected):hover {
-    background-color: var(--color-surface-hover, #f5f5f5);
-    border-radius: var(--radius-sm);
-}
-
-.jux-list-item:last-child {
-  border-bottom: none;
-}
-
-/* REMOVED: .jux-list-item-hoverable logic */
-
-.jux-list-item-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  min-width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-  margin-right: var(--space-lg);
-  color: var(--color-text-secondary);
-}
-
-.jux-list-item-content {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--space-lg);
-  flex: 1; /* Take available width */
-}
-
-/* Selected State Styling */
-.jux-selected {
-  background-color: var(--color-surface-active, #f0f7ff); /* fallback light blue */
-  border-color: var(--color-primary, #0066cc);
-  font-weight: 500;
-  color: var(--color-primary, #0066cc);
-}
-
-/* Checkmark indicator for selected items */
-.jux-selected .jux-list-item-content::before {
-  content: "✓";
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
-  margin-right: 0.5rem;
-  color: inherit;
-  font-weight: bold;
-}
-
-/* ═════════════════════════════════════════════════════════════════
-   ✨ CONTROLS (Edit/Delete)
-   ═════════════════════════════════════════════════════════════════ */
-.jux-item-controls {
-    display: flex;
-    gap: var(--space-sm);
-    opacity: 0; 
-    transform: translateX(10px);
-    transition: opacity 0.2s, transform 0.2s;
-}
-
-/* Uplift: Only show controls on hover for a cleaner UI */
-.jux-list-item:hover .jux-item-controls {
-    opacity: 1;
-    transform: translateX(0);
-}
-
-.jux-control {
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    opacity: 0.5;
-    transition: opacity 0.2s, background-color 0.2s;
-    font-size: 1.1rem;
-    padding: 4px 8px;
-    border-radius: var(--radius-sm);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.jux-control:hover { opacity: 1; background-color: var(--color-surface-hover); }
-.jux-action-delete:hover { color: #d32f2f; background-color: #fee2e2; }
-.jux-action-edit:hover { color: var(--color-primary, #0066cc); background-color: #e0f2fe; }
-
-/* ═════════════════════════════════════════════════════════════════
-   ✨ MODAL (Uplifted with Animations & Tokens)
-   ═════════════════════════════════════════════════════════════════ */
-.jux-modal-overlay {
-    position: fixed;
-    top: 0; left: 0; right: 0; bottom: 0;
-    background: rgba(0, 0, 0, 0.4);
-    backdrop-filter: blur(4px); /* Glass effect */
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 1000;
-    opacity: 0;
-    animation: jux-fade-in 0.2s forwards;
-}
-
-.jux-modal {
-    background: var(--color-surface-elevated, #fff);
-    padding: var(--space-xl);
-    border-radius: var(--radius-sm);
-    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
-    min-width: 360px;
-    display: flex;
-    flex-direction: column;
-    gap: var(--space-lg);
-    transform: scale(0.95);
-    opacity: 0;
-    animation: jux-scale-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
-}
-
-.jux-modal h3 {
-    margin: 0;
-    font-size: var(--font-size-lg);
-    font-weight: 600;
-    color: var(--color-text-primary);
-}
-
-.jux-modal input {
-    padding: var(--space-md);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-md);
-    font-size: var(--font-size-base);
-    width: 100%;
-    outline: none;
-    transition: border-color 0.2s, box-shadow 0.2s;
-    background: var(--color-surface-base);
-}
-
-.jux-modal input:focus {
-    border-color: var(--color-brand, #085156);
-    box-shadow: 0 0 0 3px var(--color-brand-subtle);
-    background: var(--color-background);
-}
-
-.jux-modal-actions {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--space-md);
-    margin-top: var(--space-sm);
-}
-
-.jux-modal-btn {
-    padding: 0.6rem 1.25rem;
-    cursor: pointer;
-    border: none;
-    border-radius: var(--radius-sm);
-    font-weight: 500;
-    font-size: var(--font-size-sm);
-    transition: all 0.2s;
-}
-
-.jux-btn-cancel {
-    background: transparent;
-    color: var(--color-text-secondary);
-}
-.jux-btn-cancel:hover {
-    background: var(--color-surface-hover);
-    color: var(--color-text-primary);
-}
-
-.jux-btn-save {
-    background: var(--color-brand, #085156);
-    color: #fff;
-    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-}
-.jux-btn-save:hover {
-    background: var(--color-brand-hover, #066666);
-    transform: translateY(-1px);
-    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
-}
-
-@keyframes jux-fade-in { from { opacity: 0; } to { opacity: 1; } }
-@keyframes jux-scale-in { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
-
-/* ═════════════════════════════════════════════════════════════════
-   ✨ TOOLBAR (Search & Actions)
-   ═════════════════════════════════════════════════════════════════ */
-.jux-list-toolbar {
-  display: flex;
-  gap: var(--space-sm);
-  padding: var(--space-md);
-  background-color: var(--color-surface-base);
-  border-bottom: var(--border-width);
-  border-color: var(--color-border);
-  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
-}
-
-.jux-search-input {
-  flex: 1;
-  padding: var(--space-sm) var(--space-md);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  font-family: inherit;
-  font-size: var(--font-size-sm);
-  outline: none;
-  transition: box-shadow 0.2s, border-color 0.2s;
-}
-
-.jux-search-input:focus {
-  border-color: var(--color-brand, #085156);
-  box-shadow: 0 0 0 2px var(--color-brand-subtle);
-}
-
-.jux-action-add {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  background-color: var(--color-surface-elevated, #fff);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 1.25rem;
-  line-height: 1;
-  color: var(--color-text-secondary);
-  transition: all 0.2s;
-}
-
-.jux-action-add:hover {
-  background-color: var(--color-surface-hover);
-  color: var(--color-brand);
-  border-color: var(--color-brand-subtle);
-}
-
-.jux-action-add:active {
-  transform: translateY(1px);
-}
-
-.jux-action-sort {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  background-color: var(--color-surface-elevated, #fff);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  cursor: pointer;
-  font-size: 1.1rem;
-  line-height: 1;
-  color: var(--color-text-secondary);
-  transition: all 0.2s;
-}
-
-.jux-action-sort:hover {
-  background-color: var(--color-surface-hover);
-  color: var(--color-brand);
-  border-color: var(--color-brand-subtle);
-}
-
-.jux-action-sort:active {
-  transform: translateY(1px);
-}
-
-/* ═════════════════════════════════════════════════════════════════
-   ✨ DRAG & DROP
-   ═════════════════════════════════════════════════════════════════ */
-.jux-list-item[draggable="true"] {
-    cursor: grab;
-}
-.jux-list-item[draggable="true"]:active {
-    cursor: grabbing;
-}
-
-/* Aspect of the item currently being dragged (in the list, not the ghost) */
-.jux-list-item.jux-dragging {
-    opacity: 0.4;
-    background-color: var(--color-surface-secondary);
-    border: 1px dashed var(--color-brand);
-}
-
-/* Aspect of the item under the cursor (drop target) */
-.jux-item-drop-target {
-    border-top: 2px solid var(--color-brand);
-    transition: none; /* Instant feedback */
-}
-
-.jux-action-drag {
-    cursor: grab;
-    font-size: 1.25rem;
-    line-height: 1;
-    color: var(--color-text-secondary);
-    display: flex;
-    align-items: center;
-}
-.jux-action-drag:active {
-    cursor: grabbing;
-}
-
-/* ═════════════════════════════════════════════════════════════════
-   ✨ EMPTY STATE
-   ═════════════════════════════════════════════════════════════════ */
-.jux-list-empty-state {
-    padding: var(--space-xl);
-    text-align: center;
-    color: var(--color-text-secondary);
-    font-style: italic;
-    background-color: var(--color-surface-base);
-    border-radius: var(--radius-sm);
-    margin: var(--space-sm);
-}
-

package/lib/componentsv2/plugins/ClientSQLitePlugin.d.ts

@@ -1,21 +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 declare const ClientSQLitePlugin: (config: ClientSQLiteConfig) => JuxServiceContract<BaseEngine<any>>;
-//# sourceMappingURL=ClientSQLitePlugin.d.ts.map

package/lib/componentsv2/plugins/ClientSQLitePlugin.js

@@ -1,130 +0,0 @@
-/**
- * Client-Side SQLite Plugin
- * Runs a real SQLite engine via WebAssembly (WASM) in the browser, persisted to IndexedDB.
- */
-export const ClientSQLitePlugin = (config) => ({
-    name: 'client-sqlite-wasm',
-    version: '1.0.0',
-    targetEnv: 'client',
-    install: (engine) => {
-        let db = null;
-        const IDB_NAME = 'JuxSqliteStorage';
-        const IDB_STORE = 'files';
-        // --- 1. IndexedDB HELPER (The "Hard Drive") ---
-        const getFile = (key) => {
-            return new Promise((resolve) => {
-                const r = indexedDB.open(IDB_NAME, 1);
-                r.onupgradeneeded = (e) => e.target.result.createObjectStore(IDB_STORE);
-                r.onsuccess = (e) => {
-                    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, data) => {
-            const r = indexedDB.open(IDB_NAME, 1);
-            r.onsuccess = (e) => {
-                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) => {
-            if (!res || !res.length)
-                return [];
-            const columns = res[0].columns;
-            const values = res[0].values;
-            return values.map((row) => {
-                const obj = {};
-                columns.forEach((col, i) => {
-                    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.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.initSqlJs({
-                locateFile: (file) => `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) => {
-                    db.run(sql);
-                    if (config.autoSave)
-                        saveFile(config.dbName, db.export());
-                    refresh();
-                },
-                sqlExec: (sql) => {
-                    return normalizeResults(db.exec(sql));
-                },
-                sqlExport: () => {
-                    return db.export();
-                }
-            });
-            refresh();
-        };
-        loadSqlJs();
-    }
-});
-//# sourceMappingURL=ClientSQLitePlugin.js.map

package/lib/componentsv2/plugins/IndexedDBPlugin.d.ts

@@ -1,18 +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 declare const IndexedDBPlugin: (config: IndexedDBConfig) => JuxServiceContract<BaseEngine<any>>;
-//# sourceMappingURL=IndexedDBPlugin.d.ts.map

package/lib/componentsv2/plugins/IndexedDBPlugin.js

@@ -1,75 +0,0 @@
-/**
- * IndexedDB Plugin
- * Asynchronous persistence for larger datasets.
- */
-export const IndexedDBPlugin = (config) => ({
-    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 = null;
-        const request = indexedDB.open(config.dbName, 1);
-        // 1. Schema Setup
-        request.onupgradeneeded = (e) => {
-            const d = e.target.result;
-            if (!d.objectStoreNames.contains(config.storeName)) {
-                d.createObjectStore(config.storeName);
-            }
-        };
-        // 2. IO Operations
-        const save = (data) => {
-            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) => {
-            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);
-    }
-});
-//# sourceMappingURL=IndexedDBPlugin.js.map

package/lib/componentsv2/plugins/LocalStoragePlugin.d.ts

@@ -1,20 +0,0 @@
-import { JuxServiceContract, BaseEngine } from '../base/BaseEngine.js';
-export interface LocalStorageConfig {
-    /** Unique key for storage (e.g. 'my-app-list-v1') */
-    key: string;
-    /**
-     * State Binding: The property key on the Engine's state to persist.
-     * e.g., 'items' for a ListEngine.
-     */
-    bindTo: string;
-    /** If true, clears storage on install (fresh start) */
-    clearOnInstall?: boolean;
-    /** If true, automatically saves to storage when state changes */
-    autoSave?: boolean;
-}
-/**
- * LocalStorage Plugin
- * Persists a slice of Engine State to Browser LocalStorage.
- */
-export declare const LocalStoragePlugin: (config: LocalStorageConfig) => JuxServiceContract<BaseEngine<any>>;
-//# sourceMappingURL=LocalStoragePlugin.d.ts.map

package/lib/componentsv2/plugins/LocalStoragePlugin.js

@@ -1,65 +0,0 @@
-/**
- * LocalStorage Plugin
- * Persists a slice of Engine State to Browser LocalStorage.
- */
-export const LocalStoragePlugin = (config) => ({
-    name: 'local-storage-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(`[LocalStoragePlugin] 🛑 Configuration Error: bindTo='${config.bindTo}' is not an Array. This plugin is designed for List/Collection data.`);
-            return;
-        }
-        const storageKey = `jux:${config.key}`;
-        // 1. Hydrate (Load from Storage)
-        const load = () => {
-            try {
-                const raw = localStorage.getItem(storageKey);
-                if (raw) {
-                    const data = JSON.parse(raw);
-                    // @ts-ignore - Generic update
-                    engine.updateState({ [config.bindTo]: data });
-                    // @ts-ignore
-                    if (engine.emit)
-                        engine.emit('plugin:hydrated', { source: 'localStorage', count: Array.isArray(data) ? data.length : 1 });
-                }
-            }
-            catch (e) {
-                console.error('[LocalStoragePlugin] Load Failed', e);
-            }
-        };
-        // 2. Persist (Save to Storage)
-        const save = (state) => {
-            try {
-                const value = state[config.bindTo];
-                localStorage.setItem(storageKey, JSON.stringify(value));
-            }
-            catch (e) {
-                console.error('[LocalStoragePlugin] Save Failed', e);
-            }
-        };
-        // Logic
-        if (config.clearOnInstall) {
-            localStorage.removeItem(storageKey);
-        }
-        else {
-            load();
-        }
-        if (config.autoSave !== false) {
-            engine.subscribe((state) => save(state));
-        }
-        // Expose manual triggers
-        engine.on('storage:save', () => save(engine.state));
-        engine.on('storage:load', load);
-        engine.on('storage:clear', () => {
-            localStorage.removeItem(storageKey);
-            // @ts-ignore
-            if (engine.emit)
-                engine.emit('plugin:cleared', { source: 'localStorage' });
-        });
-    }
-});
-//# sourceMappingURL=LocalStoragePlugin.js.map