juxscript 1.0.62 → 1.0.63

package/lib/componentsv2/list/structure.css

@@ -0,0 +1,359 @@
+.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.js

@@ -0,0 +1,130 @@
+/**
+ * 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/ClientSQLitePlugin.js.map

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

package/lib/componentsv2/plugins/ClientSQLitePlugin.ts

@@ -0,0 +1,154 @@
+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();
+    }
+});