juxscript 1.0.62 → 1.0.63

package/lib/componentsv2/grid/structure.css

@@ -0,0 +1,58 @@
+.jux-grid {
+    display: grid;
+    /* Default containment */
+    box-sizing: border-box;
+    position: relative;
+    transition: gap var(--transition-fast), width var(--transition-fast), height var(--transition-fast);
+}
+
+.jux-grid-cell {
+    /* Cells are containers for content */
+    position: relative;
+    min-width: 0; /* Prevent flex/grid blowouts */
+    min-height: 0;
+    
+    /* Layout flexibility for inner content */
+    display: flex;
+    flex-direction: column;
+}
+
+/* 
+   ✨ GRIDDER: The Blueprint Mode
+   Visualizes the Ordinal System 
+*/
+.jux-grid-ordinal-label {
+    display: none; /* Hidden by default */
+}
+
+.jux-gridder-active {
+    background-color: var(--color-surface-base);
+    outline: 2px dashed var(--color-brand-subtle);
+    gap: 4px !important; /* Force visible gap for inspection */
+}
+
+.jux-gridder-active .jux-grid-cell {
+    border: 1px dashed var(--color-border);
+    background-color: rgba(255, 255, 255, 0.5);
+    align-items: center;
+    justify-content: center;
+}
+
+.jux-gridder-active .jux-grid-ordinal-label {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: var(--color-brand);
+    color: #fff;
+    font-family: monospace;
+    font-size: 10px;
+    padding: 2px 4px;
+    opacity: 0.8;
+    z-index: 10;
+    border-bottom-right-radius: 4px;
+}
+
+.jux-grid:hover {
+    background-color: var(--color-surface-hover);
+}

package/lib/componentsv2/index.js

@@ -0,0 +1,218 @@
+import { GlobalBus } from './base/GlobalBus.js';
+import { ServerSQLitePlugin } from './plugins/ServerSQLitePlugin.js'; // The Real Server Deal
+import { LocalStoragePlugin } from './plugins/LocalStoragePlugin.js';
+import { IndexedDBPlugin } from './plugins/IndexedDBPlugin.js';
+import { ClientSQLitePlugin } from './plugins/ClientSQLitePlugin.js';
+import { List } from './list/component.js';
+import { Grid } from './grid/component.js';
+import { Input } from './input/component.js'; // ✅ Registered
+// Export individually
+export { List, Grid, Input };
+/**
+ * Curated documentation for core framework capabilities.
+ * These strings are appended to the reflection data in juxDef.tree.
+ */
+const STATIC_DOCS = {
+    // BaseEngine / Lifecycle
+    'rollback': 'Reverts state to previous Snapshot (Time Travel Undo).',
+    'rollforward': 'Redoes a previously rolled-back state change.',
+    'dispose': 'Cleans up global listeners to prevent memory leaks.',
+    'on': 'Subscribes to a local event on this component instance.',
+    'off': 'Unsubscribes from a local event.',
+    'listenTo': 'Subscribes to the Global "Neighborhood" Event Bus.',
+    'render': 'Mounts the component visual (Skin) to the DOM.',
+    'addPlugin': 'Injects external services/drivers (DI) into the engine.',
+    // Plugin Mixins
+    'query': 'Executes a raw SQL query against the attached database driver (via SQLitePlugin).',
+    'sqlRun': 'Executes a write operation against Client-Side WASM SQLite.',
+    'sqlExec': 'Executes a read query against Client-Side WASM SQLite.',
+    // List Config / Knobs
+    'knobs': 'Configures multiple UI features at once (add, edit, move, etc).',
+    'enableNoItems': 'Sets a custom message for empty states.',
+    'enableSearch': 'Shows a toolbar input for real-time text filtering.',
+    // Data Mutation
+    'addItems': 'Bulk insert optimization (single render cycle).',
+    'addItem': 'Adds a single item object or string.',
+    'updateItem': 'Patches properties of an item at specific index.',
+    'removeItem': 'Deletes item at index.',
+    'moveItem': 'Reorders item from index A to B (Drag & Drop).',
+    // Input Config
+    'setValue': 'Programmatically sets the input value.',
+    'setError': 'Displays validation error message below input.',
+    'setLabel': 'Updates the field label.'
+};
+export const tree = () => {
+    // Internal access to engines (private to this scope/getter)
+    const engines = (typeof window !== 'undefined' ? window.juxEngines : {}) || {};
+    const root = {};
+    // Reflection Helper: Inspects function source to gather docs
+    const inspectStart = (name, fn) => {
+        try {
+            const source = fn.toString();
+            // 1. Signature / Params
+            // Matches "methodName(a, b) {" or "(a, b) =>"
+            let params = '';
+            const paramMatch = source.match(/^[^(]*\(([^)]*)\)/);
+            if (paramMatch) {
+                // Start from arg list
+                params = paramMatch[1].replace(/\s+/g, ' ').trim();
+            }
+            // 2. Returns this? (Heuristic)
+            // Checks for "return this" or explicit arrow return of instance
+            const returnsThis = /return\s+this/.test(source) || /=>\s*this/.test(source);
+            // 3. Emissions (Heuristic)
+            // Scans for this.emit('event-name', ...)
+            const emissions = new Set();
+            const emitRegex = /this\.emit\(\s*['"]([^'"]+)['"]/g;
+            let match;
+            while ((match = emitRegex.exec(source)) !== null) {
+                emissions.add(match[1]);
+            }
+            // Format Output
+            let doc = `${name}(${params})`;
+            const extras = [];
+            if (returnsThis)
+                extras.push('returns this');
+            if (emissions.size > 0)
+                extras.push(`emits: ${Array.from(emissions).join(', ')}`);
+            if (extras.length > 0) {
+                doc += ` -> ${extras.join(' | ')}`;
+            }
+            // 4. Append Static Docs if available
+            if (STATIC_DOCS[name]) {
+                doc += `  // ${STATIC_DOCS[name]}`;
+            }
+            return doc;
+        }
+        catch (e) {
+            return `${name}(?)`;
+        }
+    };
+    Object.keys(engines).forEach(id => {
+        const engine = engines[id];
+        // Collect all discoverable methods (Instance + Inherited)
+        const capabilities = [];
+        const processed = new Set();
+        // Safe interaction helper
+        const addMethod = (k) => {
+            if (processed.has(k))
+                return;
+            if (k === 'constructor')
+                return;
+            try {
+                // FIX: Always access via instance to ensure 'this' context is correct for getters
+                // and to avoid invoking methods on the prototype object which lacks private state.
+                const val = engine[k];
+                if (typeof val === 'function') {
+                    processed.add(k);
+                    capabilities.push(inspectStart(k, val));
+                }
+            }
+            catch (e) {
+                // Ignore properties that cannot be accessed (e.g. strict mode violations, private getters)
+            }
+        };
+        // 1. Instance (Factory-added methods like .render, .knobs)
+        Object.getOwnPropertyNames(engine).forEach(k => addMethod(k));
+        // 2. Prototype Chain (Class Inheritance)
+        let proto = Object.getPrototypeOf(engine);
+        while (proto && proto !== Object.prototype) {
+            Object.getOwnPropertyNames(proto).forEach(k => addMethod(k));
+            proto = Object.getPrototypeOf(proto);
+        }
+        // Safe snapshot
+        root[id] = {
+            type: engine.constructor.name,
+            state: { ...engine.state },
+            listeners: engine.eventRegistry || {},
+            capabilities: capabilities.sort()
+        };
+    });
+    return root;
+};
+export const use = (query) => {
+    const engines = (typeof window !== 'undefined' ? window.juxEngines : {}) || {};
+    const keys = Object.keys(engines);
+    // 1. Exact Match
+    if (engines[query]) {
+        window.jux = engines[query];
+        console.log(`🎯 Active Engine set to: %c${query}`, 'font-weight:bold; color:#00ff00');
+        console.log(`   You can now call methods on %cwindow.jux`, 'font-style:italic');
+        return engines[query];
+    }
+    // 2. Fuzzy/Smart Match
+    const candidates = keys.filter(k => k.toLowerCase().includes(query.toLowerCase()));
+    if (candidates.length === 1) {
+        const match = candidates[0];
+        window.jux = engines[match];
+        console.log(`🎯 Smart Match! Active Engine set to: %c${match}`, 'font-weight:bold; color:#00ff00');
+        console.log(`   You can now call methods on %cwindow.jux`, 'font-style:italic');
+        return engines[match];
+    }
+    // 3. Ambiguous or No Match
+    if (candidates.length > 1) {
+        console.warn(`⚠️ Ambiguous match for "${query}". Did you mean:`);
+        console.table(candidates);
+    }
+    else {
+        console.warn(`❌ Engine "${query}" not found. Available IDs:`, keys);
+    }
+};
+export const engines = () => {
+    const engines = (typeof window !== 'undefined' ? window.juxEngines : {}) || {};
+    const keys = Object.keys(engines);
+    console.group('🔑 Available Engines');
+    keys.forEach(k => console.log(`"${k}"`));
+    console.groupEnd();
+    return keys;
+};
+export const log = () => {
+    console.group('JUX Runtime Inspector');
+    console.groupCollapsed('📦 Component Tree (Active Instances)');
+    const treeData = tree();
+    if (Object.keys(treeData).length === 0) {
+        console.log("No active components found.");
+    }
+    else {
+        console.table(Object.keys(treeData).map(k => ({
+            ID: k,
+            Type: treeData[k].type,
+            Items: (treeData[k].state.items?.length) ?? 'N/A'
+        })));
+        console.log(treeData);
+    }
+    console.groupEnd();
+    console.groupCollapsed('📡 Global Event Bus');
+    console.log(GlobalBus.registry);
+    console.groupEnd();
+    console.groupEnd();
+};
+/**
+ * juxDef: Global Introspection & Debugging Tool
+ * Exposed to window.juxDef for console access.
+ */
+export const juxDef = {
+    tree,
+    use,
+    engines,
+    log
+};
+// Automatically attach to window for DevTables/Console access
+if (typeof window !== 'undefined') {
+    // @ts-ignore
+    window.juxDef = juxDef;
+}
+// Export as a namespace object
+export const juxV2 = {
+    List,
+    Grid,
+    Input,
+    events: GlobalBus,
+    plugins: {
+        ServerSQLitePlugin,
+        LocalStoragePlugin,
+        IndexedDBPlugin,
+        ClientSQLitePlugin
+    }
+};
+//# sourceMappingURL=index.js.map

package/lib/componentsv2/index.js.map

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

package/lib/componentsv2/index.ts

@@ -0,0 +1,253 @@
+import { GlobalBus } from './base/GlobalBus.js';
+
+import { ServerSQLitePlugin } from './plugins/ServerSQLitePlugin.js'; // The Real Server Deal
+import { LocalStoragePlugin } from './plugins/LocalStoragePlugin.js';
+import { IndexedDBPlugin } from './plugins/IndexedDBPlugin.js';
+import { ClientSQLitePlugin } from './plugins/ClientSQLitePlugin.js';
+
+
+import { List } from './list/component.js';
+import { Grid } from './grid/component.js';
+import { Input } from './input/component.js'; // ✅ Registered
+
+// Export individually
+export {
+    List,
+    Grid,
+    Input
+};
+
+/**
+ * Curated documentation for core framework capabilities.
+ * These strings are appended to the reflection data in juxDef.tree.
+ */
+const STATIC_DOCS: Record<string, string> = {
+    // BaseEngine / Lifecycle
+    'rollback': 'Reverts state to previous Snapshot (Time Travel Undo).',
+    'rollforward': 'Redoes a previously rolled-back state change.',
+    'dispose': 'Cleans up global listeners to prevent memory leaks.',
+    'on': 'Subscribes to a local event on this component instance.',
+    'off': 'Unsubscribes from a local event.',
+    'listenTo': 'Subscribes to the Global "Neighborhood" Event Bus.',
+    'render': 'Mounts the component visual (Skin) to the DOM.',
+    'addPlugin': 'Injects external services/drivers (DI) into the engine.',
+
+    // Plugin Mixins
+    'query': 'Executes a raw SQL query against the attached database driver (via SQLitePlugin).',
+    'sqlRun': 'Executes a write operation against Client-Side WASM SQLite.',
+    'sqlExec': 'Executes a read query against Client-Side WASM SQLite.',
+
+    // List Config / Knobs
+    'knobs': 'Configures multiple UI features at once (add, edit, move, etc).',
+    'enableNoItems': 'Sets a custom message for empty states.',
+    'enableSearch': 'Shows a toolbar input for real-time text filtering.',
+
+    // Data Mutation
+    'addItems': 'Bulk insert optimization (single render cycle).',
+    'addItem': 'Adds a single item object or string.',
+    'updateItem': 'Patches properties of an item at specific index.',
+    'removeItem': 'Deletes item at index.',
+    'moveItem': 'Reorders item from index A to B (Drag & Drop).',
+
+    // Input Config
+    'setValue': 'Programmatically sets the input value.',
+    'setError': 'Displays validation error message below input.',
+    'setLabel': 'Updates the field label.'
+};
+
+export const tree = () => {
+    // Internal access to engines (private to this scope/getter)
+    const engines = (typeof window !== 'undefined' ? (window as any).juxEngines : {}) || {};
+    const root: Record<string, any> = {};
+
+    // Reflection Helper: Inspects function source to gather docs
+    const inspectStart = (name: string, fn: Function): string => {
+        try {
+            const source = fn.toString();
+
+            // 1. Signature / Params
+            // Matches "methodName(a, b) {" or "(a, b) =>"
+            let params = '';
+            const paramMatch = source.match(/^[^(]*\(([^)]*)\)/);
+            if (paramMatch) {
+                // Start from arg list
+                params = paramMatch[1].replace(/\s+/g, ' ').trim();
+            }
+
+            // 2. Returns this? (Heuristic)
+            // Checks for "return this" or explicit arrow return of instance
+            const returnsThis = /return\s+this/.test(source) || /=>\s*this/.test(source);
+
+            // 3. Emissions (Heuristic)
+            // Scans for this.emit('event-name', ...)
+            const emissions = new Set<string>();
+            const emitRegex = /this\.emit\(\s*['"]([^'"]+)['"]/g;
+            let match;
+            while ((match = emitRegex.exec(source)) !== null) {
+                emissions.add(match[1]);
+            }
+
+            // Format Output
+            let doc = `${name}(${params})`;
+            const extras: string[] = [];
+
+            if (returnsThis) extras.push('returns this');
+            if (emissions.size > 0) extras.push(`emits: ${Array.from(emissions).join(', ')}`);
+
+            if (extras.length > 0) {
+                doc += ` -> ${extras.join(' | ')}`;
+            }
+
+            // 4. Append Static Docs if available
+            if (STATIC_DOCS[name]) {
+                doc += `  // ${STATIC_DOCS[name]}`;
+            }
+
+            return doc;
+        } catch (e) {
+            return `${name}(?)`;
+        }
+    };
+
+    Object.keys(engines).forEach(id => {
+        const engine = engines[id];
+
+        // Collect all discoverable methods (Instance + Inherited)
+        const capabilities: string[] = [];
+        const processed = new Set<string>();
+
+        // Safe interaction helper
+        const addMethod = (k: string) => {
+            if (processed.has(k)) return;
+            if (k === 'constructor') return;
+
+            try {
+                // FIX: Always access via instance to ensure 'this' context is correct for getters
+                // and to avoid invoking methods on the prototype object which lacks private state.
+                const val = (engine as any)[k];
+
+                if (typeof val === 'function') {
+                    processed.add(k);
+                    capabilities.push(inspectStart(k, val));
+                }
+            } catch (e) {
+                // Ignore properties that cannot be accessed (e.g. strict mode violations, private getters)
+            }
+        };
+
+        // 1. Instance (Factory-added methods like .render, .knobs)
+        Object.getOwnPropertyNames(engine).forEach(k => addMethod(k));
+
+        // 2. Prototype Chain (Class Inheritance)
+        let proto = Object.getPrototypeOf(engine);
+        while (proto && proto !== Object.prototype) {
+            Object.getOwnPropertyNames(proto).forEach(k => addMethod(k));
+            proto = Object.getPrototypeOf(proto);
+        }
+
+        // Safe snapshot
+        root[id] = {
+            type: engine.constructor.name,
+            state: { ...engine.state },
+            listeners: engine.eventRegistry || {},
+            capabilities: capabilities.sort()
+        };
+    });
+    return root;
+};
+
+export const use = (query: string) => {
+    const engines = (typeof window !== 'undefined' ? (window as any).juxEngines : {}) || {};
+    const keys = Object.keys(engines);
+
+    // 1. Exact Match
+    if (engines[query]) {
+        (window as any).jux = engines[query];
+        console.log(`🎯 Active Engine set to: %c${query}`, 'font-weight:bold; color:#00ff00');
+        console.log(`   You can now call methods on %cwindow.jux`, 'font-style:italic');
+        return engines[query];
+    }
+
+    // 2. Fuzzy/Smart Match
+    const candidates = keys.filter(k => k.toLowerCase().includes(query.toLowerCase()));
+
+    if (candidates.length === 1) {
+        const match = candidates[0];
+        (window as any).jux = engines[match];
+        console.log(`🎯 Smart Match! Active Engine set to: %c${match}`, 'font-weight:bold; color:#00ff00');
+        console.log(`   You can now call methods on %cwindow.jux`, 'font-style:italic');
+        return engines[match];
+    }
+
+    // 3. Ambiguous or No Match
+    if (candidates.length > 1) {
+        console.warn(`⚠️ Ambiguous match for "${query}". Did you mean:`);
+        console.table(candidates);
+    } else {
+        console.warn(`❌ Engine "${query}" not found. Available IDs:`, keys);
+    }
+};
+
+export const engines = () => {
+    const engines = (typeof window !== 'undefined' ? (window as any).juxEngines : {}) || {};
+    const keys = Object.keys(engines);
+    console.group('🔑 Available Engines');
+    keys.forEach(k => console.log(`"${k}"`));
+    console.groupEnd();
+    return keys;
+};
+
+export const log = () => {
+    console.group('JUX Runtime Inspector');
+
+    console.groupCollapsed('📦 Component Tree (Active Instances)');
+    const treeData = tree();
+    if (Object.keys(treeData).length === 0) {
+        console.log("No active components found.");
+    } else {
+        console.table(Object.keys(treeData).map(k => ({
+            ID: k,
+            Type: treeData[k].type,
+            Items: (treeData[k].state.items?.length) ?? 'N/A'
+        })));
+        console.log(treeData);
+    }
+    console.groupEnd();
+
+    console.groupCollapsed('📡 Global Event Bus');
+    console.log(GlobalBus.registry);
+    console.groupEnd();
+
+    console.groupEnd();
+};
+
+/**
+ * juxDef: Global Introspection & Debugging Tool
+ * Exposed to window.juxDef for console access.
+ */
+export const juxDef = {
+    tree,
+    use,
+    engines,
+    log
+};
+
+// Automatically attach to window for DevTables/Console access
+if (typeof window !== 'undefined') {
+    // @ts-ignore
+    window.juxDef = juxDef;
+}
+
+// Export as a namespace object
+export const juxV2 = {
+    List,
+    Grid,
+    Input,
+    events: GlobalBus,
+    plugins: {
+        ServerSQLitePlugin,
+        LocalStoragePlugin,
+        IndexedDBPlugin,
+        ClientSQLitePlugin
+    }
+};

package/lib/componentsv2/input/component.js

@@ -0,0 +1,21 @@
+import { InputEngine } from './engine.js';
+import { InputSkin } from './skin.js';
+export function Input(id, options = {}) {
+    const engine = new InputEngine(id, options);
+    if (typeof window !== 'undefined') {
+        // @ts-ignore
+        window.juxEngines = window.juxEngines || {};
+        // @ts-ignore
+        window.juxEngines[id] = engine;
+    }
+    const skin = new InputSkin(engine);
+    // @ts-ignore
+    engine.render = (targetId) => {
+        const target = typeof targetId === 'string' ? document.getElementById(targetId) : targetId;
+        if (target)
+            skin.renderSkin(target);
+        return engine;
+    };
+    return engine;
+}
+//# sourceMappingURL=component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sourceRoot":"","sources":["component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAgB,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAMtC,MAAM,UAAU,KAAK,CAAC,EAAU,EAAE,UAAwB,EAAE;IACxD,MAAM,MAAM,GAAG,IAAI,WAAW,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;IAE5C,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAChC,aAAa;QACb,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,IAAI,EAAE,CAAC;QAC5C,aAAa;QACb,MAAM,CAAC,UAAU,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC;IACnC,CAAC;IAED,MAAM,IAAI,GAAG,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC;IAEnC,aAAa;IACb,MAAM,CAAC,MAAM,GAAG,CAAC,QAA8B,EAAE,EAAE;QAC/C,MAAM,MAAM,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC3F,IAAI,MAAM;YAAE,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC;QACpC,OAAO,MAAwB,CAAC;IACpC,CAAC,CAAC;IAEF,OAAO,MAAwB,CAAC;AACpC,CAAC"}

package/lib/componentsv2/input/component.ts

@@ -0,0 +1,28 @@
+import { InputEngine, InputOptions } from './engine.js';
+import { InputSkin } from './skin.js';
+
+export type InputComponent = InputEngine & {
+    render: (targetId: string | HTMLElement) => InputComponent;
+};
+
+export function Input(id: string, options: InputOptions = {}): InputComponent {
+    const engine = new InputEngine(id, options);
+
+    if (typeof window !== 'undefined') {
+        // @ts-ignore
+        window.juxEngines = window.juxEngines || {};
+        // @ts-ignore
+        window.juxEngines[id] = engine;
+    }
+
+    const skin = new InputSkin(engine);
+
+    // @ts-ignore
+    engine.render = (targetId: string | HTMLElement) => {
+        const target = typeof targetId === 'string' ? document.getElementById(targetId) : targetId;
+        if (target) skin.renderSkin(target);
+        return engine as InputComponent;
+    };
+
+    return engine as InputComponent;
+}

package/lib/componentsv2/input/engine.js

@@ -0,0 +1,50 @@
+import { BaseEngine } from '../base/BaseEngine.js';
+export class InputEngine extends BaseEngine {
+    constructor(id, options = {}) {
+        super(id, options);
+    }
+    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: null,
+            readonly: options.readonly || false
+        };
+    }
+    // --- Mutators ---
+    setValue(value) {
+        this.updateState({ value: String(value) });
+        this.emit('change', { value });
+        return this;
+    }
+    setLabel(label) {
+        this.updateState({ label });
+        return this;
+    }
+    setPlaceholder(text) {
+        this.updateState({ placeholder: text });
+        return this;
+    }
+    setError(message) {
+        this.updateState({ error: message });
+        this.emit('validation', { valid: !message, error: message });
+        return this;
+    }
+    setType(type) {
+        this.updateState({ type });
+        return this;
+    }
+    setReadonly(readonly) {
+        this.updateState({ readonly });
+        return this;
+    }
+}
+//# sourceMappingURL=engine.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"engine.js","sourceRoot":"","sources":["engine.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,uBAAuB,CAAC;AAmB9D,MAAM,OAAO,WAAY,SAAQ,UAAoC;IAEjE,YAAY,EAAU,EAAE,UAAwB,EAAE;QAC9C,KAAK,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;IACvB,CAAC;IAES,YAAY,CAAC,EAAU,EAAE,OAAqB;QACpD,OAAO;YACH,EAAE;YACF,OAAO,EAAE,CAAC,mBAAmB,CAAC;YAC9B,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,KAAK;YACf,OAAO,EAAE,KAAK;YACd,UAAU,EAAE,EAAE;YACd,KAAK,EAAE,OAAO,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE;YAC/D,KAAK,EAAE,OAAO,CAAC,KAAK,IAAI,IAAI;YAC5B,WAAW,EAAE,OAAO,CAAC,WAAW,IAAI,EAAE;YACtC,IAAI,EAAE,OAAO,CAAC,IAAI,IAAI,MAAM;YAC5B,KAAK,EAAE,IAAI;YACX,QAAQ,EAAE,OAAO,CAAC,QAAQ,IAAI,KAAK;SACtC,CAAC;IACN,CAAC;IAED,mBAAmB;IAEnB,QAAQ,CAAC,KAAsB;QAC3B,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC;QAC3C,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC;QAC/B,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,QAAQ,CAAC,KAAa;QAClB,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;QAC5B,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,cAAc,CAAC,IAAY;QACvB,IAAI,CAAC,WAAW,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC;QACxC,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,QAAQ,CAAC,OAAsB;QAC3B,IAAI,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;QACrC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,EAAE,KAAK,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;QAC7D,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,OAAO,CAAC,IAA8C;QAClD,IAAI,CAAC,WAAW,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC;QAC3B,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,WAAW,CAAC,QAAiB;QACzB,IAAI,CAAC,WAAW,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;QAC/B,OAAO,IAAI,CAAC;IAChB,CAAC;CACJ"}