@cocreate/plugins 1.2.1 → 1.4.0

package/src/index.js

@@ -1,592 +1,254 @@
-import Observer from "@cocreate/observer";
-import {dotNotationToObject} from "@cocreate/utils";
+/********************************************************************************
+ * Copyright (C) 2026 CoCreate and Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published
+ * by the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ *
+ ********************************************************************************/
 
-/**
- * @typedef {Object} PluginDefinition
- * @property {Array<string|Object>} [js] - List of JS files to load. Can be strings (URLs) or objects with src, integrity, etc
- * @property {Array<string>} [css] - List of CSS files to load.
- */
-
-// --- CONFIGURATION ---
+import Observer from "@cocreate/observer";
+import { processOperators } from "./operators.js";
 
-/**
- * @type {Object.<string, PluginDefinition>}
- * Configuration object containing plugin definitions.
- * Populated dynamically from CoCreate.config.js or defaults.
- */
 const plugins = {};
-
-// --- CORE ENGINE ---
-
-/**
- * Global Cache for script promises to prevent race conditions and duplicate loads.
- * Stores the pending Promise for a script source URL.
- * @type {Map<string, Promise<void>>}
- */
 const scriptCache = new Map();
-
-/**
- * Cache the CSS marker once on load to determine injection point.
- * Used to ensure plugin CSS is injected in the correct order relative to user styles.
- * @type {Element|null}
- */
 const cssMarker = typeof document !== 'undefined' ? document.querySelector('link[plugins]') : null;
 
 /**
- * Global Initialization Function.
- * Processes one or more elements to detect and attach plugins.
- * * @param {HTMLElement|NodeList|Array<HTMLElement>} elements - Single Element, NodeList, or Array of Elements to initialize.
- * @returns {void}
+ * Initializes plugins on a collection of HTML elements.
+ * @param {HTMLElement|HTMLElement[]|NodeList} elements 
  */
- function init(elements) {
+export function init(elements) {
     if (!elements) return;
-
-    let collection = [];
-    if (elements instanceof HTMLElement || elements instanceof Element) {
-        collection = [elements];
-    } else if (elements.length !== undefined && typeof elements !== 'function') {
-        collection = Array.from(elements);
-    } else {
-        collection = [elements];
-    }
-
+    const collection = (elements instanceof HTMLElement || elements instanceof Element) 
+        ? [elements] 
+        : Array.from(elements);
+    
     collection.forEach(el => {
-        if (el && typeof el.getAttribute === 'function') {
+        if (el) {
             processPlugin(el);
         }
     });
 }
 
-/**
- * Processes an individual element to detect, load resources for, and execute plugins.
- * Reads the 'plugin' attribute (e.g., plugin="chart, map") to identify targets.
- * * @async
- * @param {HTMLElement} el - The DOM element to process.
- * @returns {Promise<void>} Resolves when all resources for the plugins are loaded.
- */
-async function processPlugin(el) {
-    const rawAttr = el.getAttribute("plugin");
-    if (!rawAttr) return;
-
-    const pluginNames = rawAttr.split(',').map(s => s.trim());
-    
-    for (const pluginName of pluginNames) {
-        const pluginDef = plugins[pluginName];
-        
-        // Only attempt to load resources if a configuration exists
-        if (pluginDef) {
-            // Load CSS
-            if (pluginDef.css) pluginDef.css.forEach(href => {
-                if (!document.querySelector(`link[href="${href}"]`)) {
-                    const link = document.createElement("link");
-                    link.rel = "stylesheet"; 
-                    link.href = href;
-                    
-                    // CSS INJECTION STRATEGY:
-                    // 1. Priority: Check for a specific marker element <link plugin> 
-                    //    (Cached globally in cssMarker)
-                    
-                    if (cssMarker) {
-                        // Insert before the marker
-                        cssMarker.parentNode.insertBefore(link, cssMarker);
-                    } else {
-                        // 2. Fallback: Prepend before existing CSS
-                        // To allow custom CSS to easily override plugin defaults, we must ensure 
-                        // plugin CSS loads BEFORE user CSS.
-                        const firstStyle = document.head.querySelector('link[rel="stylesheet"], style');
-                        
-                        if (firstStyle) {
-                            document.head.insertBefore(link, firstStyle);
-                        } else {
-                            // If no CSS exists yet, appending is safe
-                            document.head.appendChild(link);
-                        }
+async function preloadResources(pluginNames) {
+    for (const name of pluginNames) {
+        const pluginDef = plugins[name];
+        if (pluginDef && !window[name]) {
+            if (pluginDef.css) {
+                pluginDef.css.forEach(href => {
+                    if (!document.querySelector(`link[href="${href}"]`)) {
+                        const link = document.createElement("link");
+                        link.rel = "stylesheet"; 
+                        link.href = href;
+                        if (cssMarker) cssMarker.parentNode.insertBefore(link, cssMarker);
+                        else document.head.appendChild(link);
                     }
-                }
-            });
+                });
+            }
 
-            // Load JS with Promise Cache
             if (pluginDef.js) {
-                const preWindowKeys = (typeof window !== 'undefined') ? new Set(Object.keys(window)) : new Set();
-
                 for (const item of pluginDef.js) {
                     const src = typeof item === 'string' ? item : item.src;
-                    const integrity = typeof item === 'object' ? item.integrity : null;
-                    const crossOrigin = typeof item === 'object' ? item.crossOrigin : null;
-
+                    if (!src) continue;
                     if (!scriptCache.has(src)) {
-                        const scriptPromise = new Promise((resolve, reject) => {
-                            // Check if already in DOM (manual load)
-                            const existing = document.querySelector(`script[src="${src}"]`);
-                            if (existing) {
-                                if (existing.dataset.loaded === "true") {
-                                    resolve();
-                                } else {
-                                    const prevOnload = existing.onload;
-                                    existing.onload = () => {
-                                        if (prevOnload) prevOnload();
-                                        existing.dataset.loaded = "true";
-                                        resolve();
-                                    };
-                                    existing.onerror = reject;
-                                }
-                            } else {
-                                const s = document.createElement("script");
-                                s.src = src;
-                                if (integrity) {
-                                    s.integrity = integrity;
-                                    s.crossOrigin = crossOrigin || "anonymous";
-                                }
-                                s.onload = () => {
-                                    s.dataset.loaded = "true";
-                                    resolve();
-                                };
-                                s.onerror = reject;
+                        const existingScript = document.querySelector(`script[src*="${src}"]`);
+                        if (existingScript && (existingScript.dataset.loaded === "true" || window[name])) {
+                            scriptCache.set(src, Promise.resolve());
+                        } else {
+                            const s = document.createElement("script");
+                            s.src = src;
+                            scriptCache.set(src, new Promise((resolve) => {
+                                s.onload = () => { s.dataset.loaded = "true"; resolve(); };
+                                s.onerror = () => resolve();
                                 document.head.appendChild(s);
-                            }
-                        });
-                        scriptCache.set(src, scriptPromise);
-                    }
-
-                    try {
-                        await scriptCache.get(src);
-                    } catch (e) {
-                        console.error(`Failed to load script: ${src}`, e);
-                    }
-                }
-
-                // After loading JS files, map newly-added globals to the expected plugin name.
-                // Exact (case-insensitive) matching only.
-                try {
-                    if (typeof window !== 'undefined') {
-                        const expectedName = pluginName;
-                        const lower = expectedName.toLowerCase();
-
-                        const allKeys = Object.keys(window);
-                        const newKeys = allKeys.filter(k => !preWindowKeys.has(k));
-                        let mappedKey = null;
-
-                        for (const k of newKeys) {
-                            if (k.toLowerCase() === lower) { mappedKey = k; break; }
-                        }
-
-                        if (!mappedKey) {
-                            for (const k of allKeys) {
-                                if (k.toLowerCase() === lower) { mappedKey = k; break; }
-                            }
-                        }
-
-                        if (mappedKey && !window[expectedName]) {
-                            window[expectedName] = window[mappedKey];
-                            console.debug(`Mapped plugin global: window.${expectedName} <- window.${mappedKey}`);
+                            }));
                         }
                     }
-                } catch (err) {
-                    // Non-fatal
+                    await scriptCache.get(src);
                 }
             }
         }
-        
-        // Attempt to execute plugin even if no config was found (it might be on window already)
-        executeGenericPlugin(el, pluginName);
     }
 }
 
-/**
- * Helper to determine if a function should be called with 'new'.
- * Uses heuristics like ES6 class syntax, lack of prototype (arrow function), or PascalCase naming.
- * * @param {Function} func - The function to check.
- * @param {string} [name] - The property name associated with the function (for casing check).
- * @returns {boolean} True if the function appears to be a constructor.
- */
-const isConstructor = (func, name) => {
-    try {
-        if (typeof func !== 'function') return false;
-        if (/^\s*class\s+/.test(func.toString())) return true;
-        if (!func.prototype) return false;
-        const n = name || func.name;
-        if (n && /^[A-Z]/.test(n)) return true;
-    } catch(e) {}
-    return false;
-};
-
-/**
- * Executes the logic for a generic plugin on a specific element.
- * Handles:
- * 1. Resolving the target class/function from window.
- * 2. Initializing the base instance.
- * 3. Processing attribute paths and nested JSON objects to execute methods or set properties.
- * * @param {HTMLElement} el - The target element.
- * @param {string} name - The name of the plugin (case-insensitive identifier).
- * @returns {void}
- */
-function executeGenericPlugin(el, name) {
-    const prefix = name.toLowerCase();
-    const mainAttr = el.getAttribute(prefix);
-    let rawData = {};
-
-    for (let attr of el.attributes) {
-        let key = attr.name;
-        if (key === prefix) {
-            key = name;
-        } else if (key.startsWith(prefix + '-')) {
-            key = key.replaceAll("-", ".");    
-        } else if (!key.startsWith(prefix + '.')) {
-          continue 
-        }
-
-        try { 
-            rawData[key] = JSON.parse(attr.value);
-        } catch(e) {
-            rawData[key] = attr.value; 
-        }   
-
+async function processPlugin(el) {
+    if (!el.attributes) return;
+
+    // Direct attributes collection map lookup to avoid binding/context prototype errors
+    const pluginAttrNode = el.attributes['plugin'] || el.attributes.getNamedItem?.('plugin');
+    const rawPluginAttr = pluginAttrNode?.value?.trim();
+    if (!rawPluginAttr) return;
+
+    const context = {
+        element: el,
+        this: el,
+        plugin: null,  // Tracks active sibling plugin instance
+        data: { ...el.dataset },
+        event: {},
+        crud: window.CoCreate?.crud || null
     };
 
-    // 2. Resolve parameters (Token Resolver)
-    let resolved = processParams(el, rawData);
-    resolved = dotNotationToObject(resolved);
-
-    let Plugin = window[name] || window[prefix]; 
-    if (!Plugin) {
-        console.error(`Plugin for ${name} not found on window.`);
-        return;
-    }
-
-    // Iterate over resolved object. 
-    // Since we use dotNotationToObject, keys like "swiper.effect" are already nested as { swiper: { effect: ... } }
-    for (let key in resolved) {
-        // We generally expect the root key to match the plugin name (e.g., 'swiper')
-        // We unwrap this root key to pass the actual config to the Plugin.
-        if (key === name || key.toLowerCase() === prefix) {
-            try {
-                // Determine Target: Use existing instance on element if available, else use Window Plugin
-                let Target = el[name] || Plugin;
-                let val = resolved[key];
-                
-                // Pass context: Window as parent, Plugin Name as property (for potential context binding)
-                // el and name used to store the result on the element.
-                update(Target, val, window, name, el, name, el);
+    try {
+        let configs = [];
+        
+        // Unified Direct Parser: Pure JSON parsing with simple zero-argument fallback
+        if (rawPluginAttr.startsWith('{') || rawPluginAttr.startsWith('[')) {
+            const parsedConfig = JSON.parse(rawPluginAttr);
+            configs = Array.isArray(parsedConfig) ? parsedConfig : [parsedConfig];
+        } else {
+            // Symmetrical Fallback: Plain strings mapped straight to constructor blocks
+            configs = [{ [rawPluginAttr]: [] }];
+        }
+        
+        const targetPlugins = new Set();
+        configs.forEach(conf => {
+            Object.keys(conf).forEach(k => {
+                if (!k.startsWith('$')) {
+                    targetPlugins.add(k.split('.')[0]);
+                }
+            });
+        });
+        
+        await preloadResources(Array.from(targetPlugins));
 
-                console.log(`Processed ${name}`);
-            } catch (e) {
-                console.error(`Error processing ${name}:`, e);
-            }
+        // Execute each configuration block sequentially
+        for (const configBlock of configs) {
+            await executeConfigBlock(context, configBlock);
         }
+    } catch (err) {
+        console.error("[Plugin System] Failed to parse and execute plugin configuration:", err, rawPluginAttr);
     }
 }
 
-function resolvePathWithParent(root, path) {
-    if (!root || !path || typeof path !== "string") return { parent: null, value: undefined };
-    const parts = path.split(".").filter(Boolean);
-    if (!parts.length) return { parent: null, value: undefined };
-
-    let parent = null;
-    let current = root;
-    for (let i = 0; i < parts.length; i++) {
-        const part = parts[i];
-        if (current == null) return { parent: null, value: undefined };
-        parent = current;
-        current = current[part];
+function instantiatePlugin(ConstructorFunc, argsArray) {
+    if (typeof ConstructorFunc !== 'function') return ConstructorFunc;
+    
+    // Check standard ES6 class structure
+    const isEs6Class = /^\s*class\s+/.test(ConstructorFunc.toString());
+    
+    if (isEs6Class) {
+        return new ConstructorFunc(...argsArray);
     }
-    return { parent, value: current };
-}
-
-function normalizeCrudPayload(value) {
-    if (!value || typeof value !== "object" || Array.isArray(value)) return value;
-
-    if (value.type && Array.isArray(value[value.type])) return value[value.type];
-    if (value.method && typeof value.method === "string") {
-        const type = value.method.split(".")[0];
-        if (type && Array.isArray(value[type])) return value[type];
+    
+    try {
+        // Fallback Step A: Attempt standard function invocation (e.g. particlesJS)
+        return ConstructorFunc(...argsArray);
+    } catch (err) {
+        // Fallback Step B: If invocation throws constructor error (e.g. Babel transpiled ES5 classes)
+        if (err instanceof TypeError) {
+            return new ConstructorFunc(...argsArray);
+        }
+        throw err;
     }
-    return value;
-}
-
-function getPluginInstancesFromElement(el) {
-    if (!el || !el.__cocreatePluginInstances) return [];
-    return Object.values(el.__cocreatePluginInstances).filter(Boolean);
-}
-
-function isReferenceAssignment(val) {
-    return typeof val === "string" && val.trim().startsWith("=");
-}
-
-function normalizeReferencePath(refPath) {
-    if (typeof refPath !== "string") return "";
-    return refPath.trim().replace(/^=\s*/, "");
 }
 
-function resolveCallableReference(refPath, parent, hostElement) {
-    const normalized = normalizeReferencePath(refPath);
-    if (!normalized) return { fn: undefined, context: undefined, methodName: undefined };
-
-    const methodName = normalized.split(".").pop();
-    const startsWithThis = normalized === "$this" || normalized.startsWith("$this.");
-    const startsWithWindow = normalized === "$window" || normalized.startsWith("$window.");
-    const startsWithToken = normalized.startsWith("$");
-
-    const candidates = [];
-    if (startsWithThis) {
-        const path = normalized.replace(/^\$this\.?/, "");
-        candidates.push({ root: hostElement || parent, path });
-    } else if (startsWithWindow) {
-        const path = normalized.replace(/^\$window\.?/, "");
-        candidates.push({ root: window, path });
-    } else if (startsWithToken) {
-        const path = normalized.replace(/^\$/, "");
-        candidates.push({ root: hostElement, path });
-        candidates.push({ root: parent, path });
-        candidates.push({ root: window, path });
-    } else {
-        candidates.push({ root: hostElement, path: normalized });
-        candidates.push({ root: parent, path: normalized });
-        candidates.push({ root: window, path: normalized });
-    }
-
-    for (const candidate of candidates) {
-        if (!candidate.root) continue;
-        const { parent: resolvedParent, value } = resolvePathWithParent(candidate.root, candidate.path);
-        if (typeof value === "function") {
-            return { fn: value, context: resolvedParent, methodName };
-        }
-    }
-
-    if (methodName) {
-        const instances = getPluginInstancesFromElement(hostElement || parent);
-        for (const instance of instances) {
-            if (instance && typeof instance[methodName] === "function") {
-                return { fn: instance[methodName], context: instance, methodName };
+async function executeConfigBlock(context, configBlock) {
+    for (const [key, value] of Object.entries(configBlock)) {
+        // 1. If key is an operator, process it natively via AST engine
+        if (key.startsWith("$")) {
+            await processOperators(context, { [key]: value });
+            continue;
+        }
+
+        // 2. Intercept standard lifecycle methods to bind them directly as functions on the Element
+        if (["getValue", "setValue", "read", "write"].includes(key)) {
+            context.element[key] = async function(...args) {
+                const localContext = {
+                    ...context,
+                    event: { ...context.event, value: args[0], arguments: args }
+                };
+                return await processOperators(localContext, value);
+            };
+            continue;
+        }
+
+        const parts = key.split('.');
+        const rootPluginName = parts[0];
+
+        // 3. Resolve target from window object using dot notation
+        let ConstructorFunc = window;
+        for (const part of parts) {
+            if (ConstructorFunc) {
+                ConstructorFunc = ConstructorFunc[part];
             }
         }
-    }
-
-    return { fn: undefined, context: undefined, methodName };
-}
-
-function createFunctionAdapter(refPath, parent, property, hostElement) {
-    const normalizedRefPath = normalizeReferencePath(refPath);
-    const methodName = normalizedRefPath.split(".").pop();
 
-    return function (...args) {
-        const resolved = resolveCallableReference(normalizedRefPath, parent, hostElement);
-        const fn = resolved.fn;
-        const context = resolved.context;
-
-        if (typeof fn !== "function") {
-            console.error(`Plugin adapter failed: "${normalizedRefPath}" did not resolve to a function for ${property}.`);
-            return;
-        }
-
-        if (property === "setValue") {
-            const payload = normalizeCrudPayload(args[0]);
-
-            if (methodName === "addEventSource" && context && typeof context.getEventSources === "function") {
-                const sources = context.getEventSources();
-                if (Array.isArray(sources)) {
-                    sources.forEach(source => source && typeof source.remove === "function" && source.remove());
-                }
+        // 4. If it's a function, treat it as a constructor to initialize the plugin
+        if (typeof ConstructorFunc === 'function' && !context.element[rootPluginName]) {
+            let constructorArgs = [];
+            if (value !== undefined) {
+                const evaluatedArgs = await processOperators(context, value);
+                constructorArgs = Array.isArray(evaluatedArgs) ? evaluatedArgs : [evaluatedArgs];
             }
 
-            return fn.call(context || this, payload);
-        }
-
-        return fn.apply(context || this, args);
-    };
-}
-
-function update(Target, val, parent, property, elParent, elProperty, hostElement) {
-    // RESOLUTION: Handle case-insensitivity before processing targets.
-    // If Target is missing, check parent for a property matching 'property' (case-insensitive).
-    if (!Target && parent && property) {
-        const lowerProp = String(property).toLowerCase();
-        for (const key in parent) {
-            if (key.toLowerCase() === lowerProp) {
-                Target = parent[key];
-                property = key;
-                if (elProperty) elProperty = key; // Update element structure key to match real property
-                break;
+            // Create the plugin instance and bind it directly to the element under its root name
+            const instance = instantiatePlugin(ConstructorFunc, constructorArgs);
+            context.element[rootPluginName] = instance;
+            context.plugin = instance; // Update context.plugin reference for sibling method chaining
+            continue;
+        }
+
+        // 5. Explicit Instance Method Chaining (e.g. "FullCalendar.render")
+        let methodTarget = context.element[rootPluginName];
+        if (methodTarget && parts.length > 1) {
+            let method = methodTarget;
+            let parent = methodTarget;
+            for (let i = 1; i < parts.length; i++) {
+                parent = method;
+                if (method) method = method[parts[i]];
             }
-        }
-    }
-
-    let instance;
-    if (typeof Target === 'function') {
-        if (isReferenceAssignment(val) && parent && property) {
-            instance = createFunctionAdapter(val, parent, property, hostElement);
-            parent[property] = instance;
-            if (elParent && elProperty) elParent[elProperty] = instance;
-            return;
-        }
-
-        if (!isConstructor(Target, property)) {
-            // Call as a function (method or standalone)
-            // Use 'parent' as context (this) if available to maintain class references
-            if (parent) {
-                if (Array.isArray(val)) {
-                    instance = Target.apply(parent, val);
-                } else {
-                    instance = Target.call(parent, val);
-                }
-            } else {
-                if (Array.isArray(val)) {
-                    instance = Target(...val);
-                } else {
-                    instance = Target(val);
+            if (typeof method === 'function') {
+                let methodArgs = [];
+                if (value !== undefined) {
+                    const evaluatedArgs = await processOperators(context, value);
+                    methodArgs = Array.isArray(evaluatedArgs) ? evaluatedArgs : [evaluatedArgs];
                 }
-            }
-        } else {
-            // Call as a Constructor
-            if (Array.isArray(val)) {
-                instance = new Target(...val);
-            } else {
-                instance = new Target(val);
+                await method.apply(parent, methodArgs);
+                continue;
             }
         }
-        
-        // Assign the result to the element structure
-        if (elParent && elProperty) {
-            elParent[elProperty] = instance;
-        }
 
-        if (instance && instance.el && typeof instance.el === "object") {
-            if (!instance.el.__cocreatePluginInstances) instance.el.__cocreatePluginInstances = {};
-            const key = property || (Target && Target.name) || "instance";
-            instance.el.__cocreatePluginInstances[key] = instance;
-        }
-
-    } else if (typeof Target === 'object' && Target !== null && typeof val === 'object' && val !== null && !Array.isArray(val)) {
-        // Prepare the next level of the element structure
-        if (elParent && elProperty) {
-            if (!elParent[elProperty]) {
-                elParent[elProperty] = {};
-            }
-            const nextElParent = elParent[elProperty];
-            
-            for (let key in val) {
-                update(Target[key], val[key], Target, key, nextElParent, key, hostElement);
+        // 6. Sibling Method Chaining (e.g. "render" directly on context.plugin)
+        if (context.plugin && typeof context.plugin[key] === 'function') {
+            let methodArgs = [];
+            if (value !== undefined) {
+                const evaluatedArgs = await processOperators(context, value);
+                methodArgs = Array.isArray(evaluatedArgs) ? evaluatedArgs : [evaluatedArgs];
             }
+            await context.plugin[key].apply(context.plugin, methodArgs);
+            continue;
         }
-    } else if (parent && property) {
-        if (isReferenceAssignment(val)) {
-            const adapter = createFunctionAdapter(val, parent, property, hostElement);
-            parent[property] = adapter;
-            if (elParent && elProperty) elParent[elProperty] = adapter;
-            return;
-        }
-
-        // If it's not a function, we are setting a value on the plugin object
-        parent[property] = val;
-        
-        // Map the value to the element structure
-        if (elParent && elProperty) {
-            elParent[elProperty] = val;
-        }
-        
-        console.log(`Set plugin property ${property} to`, val);
-    }
-}
-
-/**
- * Generic Parameter Processor
- * Handles: 
- * - $this / $this.children
- * - $window.path.to.function(arg)
- * - $anime.stagger(100)
- * - Global access: $document, $window, etc.
- */
-function processParams(el, params) {
-    if (typeof params === 'string' && params.startsWith('\u0024')) {
-        try {
-            // 1. Check for Method Call: $root.path.to.func(arg)
-            const callMatch = params.match(/^\u0024([^.]+)\.(.+)\((.*)\)$/);
-            if (callMatch) {
-                const [_, root, path, arg] = callMatch;
-                const obj = (root === 'this') ? el : window[root];
-                
-                // If root object exists, drill down
-                if (obj) {
-                    const func = path.split('.').reduce((o, k) => (o || {})[k], obj);
-                    if (typeof func === 'function') {
-                        // Parse argument if JSON-like, else string
-                        const parsedArg = arg ? (function() { try { return JSON.parse(arg); } catch(e) { return arg; } })() : undefined;
-                        return func(parsedArg);
-                    }
-                }
-            }
-            
-            // 2. Check for Property Access: $root.path.to.prop or just $root
-            const propMatch = params.match(/^\u0024([^.]+)(?:\.(.+))?$/);
-            if (propMatch) {
-                const [_, root, path] = propMatch;
-                const obj = (root === 'this') ? el : window[root];
-                
-                if (obj) {
-                    if (!path) return (obj instanceof HTMLCollection) ? Array.from(obj) : obj;
-                    
-                    const val = path.split('.').reduce((o, k) => (o || {})[k], obj);
-                    // Convert HTMLCollections to Arrays
-                    return (val instanceof HTMLCollection) ? Array.from(val) : val;
-                }
-            }
 
-            // 3. Check for standalone globals like $document or $window
-            const globalKey = params.substring(1);
-            if (window[globalKey]) {
-                return window[globalKey];
-            }
-
-        } catch (e) {
-            console.warn("Failed to resolve dynamic token:", params);
-        }
+        // 7. Fallback: Process operators or generic actions on properties
+        await processOperators(context, { [key]: value });
     }
-    
-    if (Array.isArray(params)) return params.map(p => processParams(el, p));
-    if (typeof params === 'object' && params !== null) {
-        const res = {};
-        for (let k in params) res[k] = processParams(el, params[k]);
-        return res;
-    }
-    return params;
 }
 
-// --- STARTUP LOGIC ---
-
 if (typeof document !== 'undefined') {
-    // Dynamic Import: Loads config if available, handles error if missing.
-    // Works with 'npm start' (Bundlers) by creating a code-split chunk.
+    const selector = "[plugin]";
+    Observer.init({
+        name: "plugin",
+        types: ["addedNodes", "attributes"],
+        selector: selector,
+        attributeFilter: ["plugin"],
+        callback: (mutation) => init(mutation.target)
+    });
+
     import("./CoCreate.config.js")
         .then((Config) => {
-            // LOGIC: Merge exports into plugins object
-            if (Config.plugins) {
-                Object.assign(plugins, Config.plugins);
-            } 
-            else if (Config.default) {
-                if (Config.default.plugins) {
-                    Object.assign(plugins, Config.default.plugins);
-                } else {
-                    Object.assign(plugins, Config.default);
-                }
-            }
+            const data = Config.plugins || Config.default?.plugins || Config.default || {};
+            Object.assign(plugins, data);
         })
-        .catch((err) => {
-            // Optional: fail silently for optional config
-        })
-        .finally(() => {
-            // Start Observer
-            Observer.init({
-                name: "plugin",
-                types: ["addedNodes", "attributes"],
-                selector: "[plugin]",
-                attributeFilter: ["plugin"],
-                callback: (mutation) => {
-                    init(mutation.target);
-                }
-            });
-            
-            // Initial Init
-            init(document.querySelectorAll("[plugin]"));
-        });
-}
-
-export default { init, plugins }
+        .catch(() => {})
+        .finally(() => init(document.querySelectorAll(selector)));
+}