@cocreate/events 1.29.0 → 1.30.0

package/src/index.js

@@ -20,1134 +20,618 @@
 // you must obtain a commercial license from CoCreate LLC.
 // For details, visit <https://cocreate.app/licenses/> or contact us at sales@cocreate.app.
 
-import { queryElements, queryData } from "@cocreate/utils";
+import { queryElements } from "@cocreate/utils";
 import action from "@cocreate/actions";
 import observer from "@cocreate/observer";
 import "@cocreate/element-prototype";
+import { getAttribute } from "@cocreate/element-prototype/src/getAttribute";
 
 const CoCreateEvents = {
-	elements2: new Map(),
-	init: function (prefix, events) {
-		if (prefix && events) {
-			this.initPrefix(prefix, events);
-		} else {
-			this.initPrefix("toggle", ["click"]);
-			this.initPrefix("click", ["click"]);
-			this.initPrefix("hover", ["mouseover", "mouseout"]);
-			this.initPrefix("mouseover", ["mouseover"]);
-			this.initPrefix("mouseout", ["mouseout"]);
-			this.initPrefix("input", ["input"]);
-			this.initPrefix("change", ["change"]);
-			this.initPrefix("selected", ["click"]);
-			this.initPrefix("onload", ["onload"]);
-			this.initPrefix("observe", ["observer"]);
-			this.initPrefix("intersection", ["intersection"]);
-			this.initPrefix("resize", ["onload", "resize"]);
-			this.initPrefix("localstorage", ["onload"]);
-			this.initPrefix("focus", ["focus"]);
-			this.initPrefix("blur", ["blur"]);
-		}
-
-		let customEventEls = document.querySelectorAll("[event-name]");
-		let names = {};
-		for (let customEventEl of customEventEls) {
-			let name = customEventEl.getAttribute("event-name");
-			name = name.split(",");
-			for (let i = 0; i < name.length; i++) {
-				name[i].trim();
-				if (!names[name]) {
-					names[name] = name;
-					this.initPrefix(name);
-				}
-			}
-		}
-
-		const self = this;
-		observer.init({
-			name: "CoCreateEventName",
-			types: ["addedNodes"],
-			selector: `[event-name]`,
-			callback: function (mutation) {
-				let name = mutation.target.getAttribute("event-name");
-				self.initPrefix(name);
-			}
-		});
-	},
-
-	initPrefix: function (prefix, events) {
-		const self = this;
-
-		action.init({
-			name: prefix,
-			endEvent: `${prefix}End`,
-			callback: (data) => {
-				this.__updateElements(
-					data.element,
-					prefix,
-					null,
-					null,
-					data.params
-				);
-			}
-		});
-
-		let selector = `[${prefix}], [${prefix}-key], [${prefix}-attribute], [${prefix}-value], [${prefix}-action], [${prefix}-query]`;
-
-		observer.init({
-			name: "CoCreateEventattributes",
-			types: ["attributes", "addedNodes"],
-			attributeFilter: [
-				`${prefix}-key`,
-				`${prefix}-value`,
-				`${prefix}-query`,
-				`${prefix}-events`,
-				`${prefix}-bubbles`,
-				`${prefix}-cancelable`,
-				`${prefix}-composed`,
-				`${prefix}-preventDefault`,
-				`${prefix}-stopPropagation`,
-				`${prefix}-stopImmediatePropagation`
-			],
-			selector,
-			callback: function (mutation) {
-				self.initElements([mutation.target], prefix, events);
-			}
-		});
-
-		let elements = document.querySelectorAll(selector);
-		this.initElements(elements, prefix, events);
-	},
-
-	elements: new Map(),
-	initElements: function (elements, prefix, events = []) {
-		const self = this;
-		for (const el of elements) {
-			let isEventable = true;
-			let prefixes = this.elements.get(el);
-			if (!prefixes) {
-				prefixes = { [prefix]: { events } };
-				this.elements.set(el, prefixes);
-			} else if (!prefixes[prefix]) {
-				prefixes[prefix] = { events };
-			} else {
-				isEventable = false;
-			}
-
-			let customEvents = el.getAttribute(`${prefix}-events`);
-			if (customEvents) {
-				customEvents = customEvents.split(",");
-				for (let i = 0; i < customEvents.length; i++)
-					customEvents[i] = customEvents[i].trim();
-
-				for (let i = 0; i < events.length; i++)
-					el.removeEventListener(events[i], eventFunction);
-
-				events = customEvents;
-				prefixes[prefix].events = events;
-				isEventable = true;
-			}
-
-			if (!events || !isEventable) continue;
-
-			if (events.includes("onload")) {
-				this.__updateElements(el, prefix);
-			}
-
-			if (events.includes("observer")) {
-				let target;
-				for (let attribute of el.attributes) {
-					if (attribute.name === "observe-target") {
-						target = attribute.value;
-						break;
-					} else if ([`${prefix}-query`].includes(attribute.name)) {
-						target = attribute.value;
-						break;
-					}
-				}
-
-				let attributeFilter = (
-					el.getAttribute(`${prefix}-attributes`) || ""
-				)
-					.split(/\s*,\s*/)
-					.filter((item) => item);
-
-				let observeAttribute = (
-					el.getAttribute(`${prefix}-observe`) || ""
-				)
-					.split(/\s*,\s*/)
-					.filter((item) => item);
-
-				let observerConfig = {
-					types: observeAttribute,
-					callback: function (mutation) {
-						self.__updateElements(el, prefix, mutation.target);
-					}
-				};
-
-				if (target) {
-					if (
-						target &&
-						!observeAttribute.length &&
-						!attributeFilter.length
-					) {
-						observerConfig.types.push("addedNodes");
-					}
-					observerConfig.target = target;
-				}
-
-				if (attributeFilter.length) {
-					observerConfig.types.push("attributes");
-					observerConfig.attributeFilter = attributeFilter;
-				}
-
-				if (observerConfig.types.length) observer.init(observerConfig);
-			}
-
-			if (events.includes("resize")) {
-				const resizeObserver = new ResizeObserver((entries) => {
-					const lastEntry = entries[entries.length - 1];
-					const { width, height } = lastEntry.contentRect;
-					el.setAttribute(`${prefix}-if-value`, width + "px");
-					self.__updateElements(el, prefix);
-				});
-				resizeObserver.observe(el);
-			}
-
-			if (events.includes("intersection")) {
-				const rootSelector = el.getAttribute(`${prefix}-root`);
-				const rootMargin =
-					el.getAttribute(`${prefix}-root-margin`) || "0px";
-				const threshold = el.getAttribute(`${prefix}-threshold`)
-					? JSON.parse(el.getAttribute(`${prefix}-threshold`))
-					: [0];
-				const trigger = el.getAttribute(`${prefix}-trigger`) || "both"; // Default to "both"
-
-				// Resolve root from the selector or use null for viewport
-				const root = rootSelector
-					? document.querySelector(rootSelector)
-					: null;
-
-				// Validate and filter threshold values
-				const validThreshold = Array.isArray(threshold)
-					? threshold.filter((value) => value >= 0 && value <= 1)
-					: [0];
-
-				// Returns true if attribute is present AND does not equal "false"
-				const onceAttr = el.getAttribute(`${prefix}-once`);
-                const once = onceAttr !== null && onceAttr !== "false";
-
-				// Create IntersectionObserver
-				const intersectionObserver = new IntersectionObserver(
-					(entries) => {
-						entries.forEach((entry) => {
-							const isVisible = entry.isIntersecting;
-
-							// Determine if we should trigger based on the "trigger" attribute
-							if (
-								(trigger === "visible" && isVisible) ||
-								(trigger === "not-visible" && !isVisible) ||
-								trigger === "both"
-							) {
-								// Set an attribute to reflect visibility state
-								el.setAttribute(
-									`${prefix}-is-visible`,
-									isVisible ? "true" : "false"
-								);
-
-								// Call __updateElements
-								self.__updateElements(
-									el,
-									prefix
-								);
-								// Disconnect if once is true
-                                if (once) {
-                                    intersectionObserver.unobserve(entry.target);
+    elements: new Map(),
+
+    init: function (prefix, events) {
+        if (prefix && events) {
+            this.initPrefix(prefix, events);
+        } else {
+            const defaults = {
+                "toggle": ["click"],
+                "click": ["click"],
+                "hover": ["mouseover", "mouseout"],
+                "mouseover": ["mouseover"],
+                "mouseout": ["mouseout"],
+                "input": ["input"],
+                "change": ["change"],
+                "selected": ["click"],
+                "onload": ["onload"],
+                "observe": ["observer"],
+                "intersection": ["intersection"],
+                "resize": ["onload", "resize"],
+                "localstorage": ["onload"],
+                "focus": ["focus"],
+                "blur": ["blur"]
+            };
+
+            for (const [p, e] of Object.entries(defaults)) {
+                this.initPrefix(p, e);
+            }
+        }
+
+        // Initialize from existing elements with [event-name]
+        const customEventEls = document.querySelectorAll("[event-name]");
+        const processedNames = new Set();
+        
+        for (const customEventEl of customEventEls) {
+            let names = customEventEl.getAttribute("event-name");
+            if (!names) continue;
+            
+            names.split(",").forEach(name => {
+                name = name.trim();
+                if (name && !processedNames.has(name)) {
+                    processedNames.add(name);
+                    this.initPrefix(name);
+                }
+            });
+        }
+
+        // Observe for new elements with [event-name]
+        observer.init({
+            name: "CoCreateEventName",
+            types: ["addedNodes"],
+            selector: `[event-name]`,
+            callback: (mutation) => {
+                const names = mutation.target.getAttribute("event-name");
+                if (names) {
+                    names.split(",").forEach(name => {
+                        this.initPrefix(name.trim());
+                    });
+                }
+            }
+        });
+    },
+
+    initPrefix: function (prefix, events) {
+        action.init({
+            name: prefix,
+            endEvent: `${prefix}End`,
+            callback: (data) => {
+                this.__updateElements(
+                    data.element,
+                    prefix,
+                    null,
+                    null,
+                    data.params
+                );
+            }
+        });
+
+        // Updated selector to use dash for options: prefix-group, prefix-query
+        const selector = `[${prefix}], [${prefix}-group], [${prefix}-query]`;
+
+        observer.init({
+            name: "CoCreateEventAttributes",
+            types: ["attributes", "addedNodes"],
+            selector,
+            callback: (mutation) => {
+                if (mutation.type === 'attributes') {
+                    if (mutation.attributeName.startsWith(prefix)) {
+                        this.initElements([mutation.target], prefix, events);
+                    }
+                } else {
+                    this.initElements([mutation.target], prefix, events);
+                }
+            }
+        });
+
+        const elements = document.querySelectorAll(selector);
+        this.initElements(elements, prefix, events);
+    },
+
+    initElements: function (elements, prefix, events = []) {
+        for (const el of elements) {
+            let isEventable = true;
+            let elData = this.elements.get(el);
+
+            if (!elData) {
+                elData = { [prefix]: { events } };
+                this.elements.set(el, elData);
+            } else if (!elData[prefix]) {
+                elData[prefix] = { events };
+            } else {
+                isEventable = false;
+            }
+
+            // Check for custom events defined on the element using dash
+            let customEventsAttr = el.getAttribute(`${prefix}-events`);
+            if (customEventsAttr) {
+                // Remove listeners for previously assumed events before overriding
+                events.forEach(event => el.removeEventListener(event, eventFunction));
+
+                events = customEventsAttr.split(",").map(e => e.trim());
+                elData[prefix].events = events;
+                isEventable = true;
+            }
+
+            if (!events || !isEventable) continue;
+
+            // --- Handle Special Events ---
+
+            if (events.includes("onload")) {
+                this.__updateElements(el, prefix);
+            }
+
+            if (events.includes("observer")) {
+                this._initObserver(el, prefix);
+            }
+
+            if (events.includes("resize")) {
+                this._initResizeObserver(el, prefix);
+            }
+
+            if (events.includes("intersection")) {
+                this._initIntersectionObserver(el, prefix);
+            }
+
+            // --- Handle Standard Events ---
+
+            for (const eventName of events) {
+                if (["onload", "observer", "intersection", "resize"].includes(eventName)) {
+                    continue;
+                }
+
+                // Remove existing listener to prevent duplicates
+                el.removeEventListener(eventName, eventFunction);
+
+                const options = {};
+                // Updated to use dash for options
+                const attributes = ["bubbles", "cancelable", "composed"];
+
+                for (const attr of attributes) {
+                    const attrValue = el.getAttribute(`${eventName}-${attr}`);
+                    if (attrValue !== null) {
+                        options[attr] = attrValue !== "false";
+                    }
+                }
+
+                el.addEventListener(eventName, eventFunction, options);
+            }
+        }
+
+        const self = this;
+        function eventFunction(event) {
+            const target = event.currentTarget;
+            if (!target) return;
+
+            const elData = self.elements.get(target);
+            if (!elData || !elData[prefix]) return;
+
+            const prefixData = elData[prefix];
+
+            // Debounce/Prevent duplicate mouse events if needed
+            if (prefixData.prev === event.type && ["mouseover", "mouseout"].includes(event.type)) {
+                return;
+            }
+            prefixData.prev = event.type;
+
+            // Check for 'actions' blocking
+            const actionsAttr = target.getAttribute("actions") || "";
+            if (actionsAttr.includes(prefix)) return;
+
+            // Handle lifecycle controls (using dash)
+            const lifecycleAttributes = [
+                { attr: "prevent-default", method: "preventDefault" },
+                { attr: "stop-propagation", method: "stopPropagation" },
+                { attr: "stop-immediate-propagation", method: "stopImmediatePropagation" }
+            ];
+            
+            for (const { attr, method } of lifecycleAttributes) {
+                const attrValue = target.getAttribute(`${prefix}-${attr}`);
+                if (attrValue !== null && attrValue !== "false") {
+                    event[method]();
+                }
+            }
+
+            self.__updateElements(target, prefix, prefixData.events);
+        }
+    },
+
+    _initObserver: function (el, prefix) {
+        // Updated to dash: prefix-selector, prefix-query, prefix-attribute-filter, prefix-types
+        let selector = el.getAttribute(`${prefix}-selector`) || el.getAttribute(`${prefix}-query`) || "";
+        let attributeFilter = (el.getAttribute(`${prefix}-attribute-filter`) || "")
+            .split(/\s*,\s*/)
+            .filter(item => item);
+        
+        let types = (el.getAttribute(`${prefix}-types`) || "")
+            .split(/\s*,\s*/)
+            .filter(item => item);
+
+        const config = {
+            types: types,
+            callback: () => {
+                this.__updateElements(el, prefix);
+            }
+        };
+
+        if (selector) {
+            if (!types.length && !attributeFilter.length) {
+                config.types.push("addedNodes");
+            }
+            config.selector = selector;
+        }
+
+        if (attributeFilter.length) {
+            config.types.push("attributes");
+            config.attributeFilter = attributeFilter;
+        }
+
+        if (config.types.length) {
+            observer.init(config);
+        }
+    },
+
+    _initResizeObserver: function (el, prefix) {
+        const resizeObserver = new ResizeObserver((entries) => {
+            const lastEntry = entries[entries.length - 1];
+            const { width } = lastEntry.contentRect;
+            // Keeps dash style for this status attribute
+            el.setAttribute(`${prefix}-if-value`, width + "px");
+            this.__updateElements(el, prefix);
+        });
+        resizeObserver.observe(el);
+    },
+
+    _initIntersectionObserver: function (el, prefix) {
+        // Updated to dash
+        const rootSelector = el.getAttribute(`${prefix}-root`);
+        const rootMargin = el.getAttribute(`${prefix}-root-margin`) || "0px";
+        const thresholdRaw = el.getAttribute(`${prefix}-threshold`);
+        const threshold = thresholdRaw ? JSON.parse(thresholdRaw) : [0];
+        const trigger = el.getAttribute(`${prefix}-trigger`) || "both";
+
+        const root = rootSelector ? document.querySelector(rootSelector) : null;
+        const validThreshold = Array.isArray(threshold) 
+            ? threshold.filter(v => v >= 0 && v <= 1) 
+            : [0];
+
+        const once = el.getAttribute(`${prefix}-once`);
+        const isOnce = once !== null && once !== "false";
+
+        const intersectionObserver = new IntersectionObserver(
+            (entries) => {
+                entries.forEach((entry) => {
+                    const isVisible = entry.isIntersecting;
+
+                    if (
+                        (trigger === "visible" && isVisible) ||
+                        (trigger === "not-visible" && !isVisible) ||
+                        trigger === "both"
+                    ) {
+                        el.setAttribute(`${prefix}-is-visible`, isVisible ? "true" : "false");
+                        this.__updateElements(el, prefix);
+
+                        if (isOnce) {
+                            intersectionObserver.unobserve(entry.target);
+                        }
+                    }
+                });
+            },
+            { root, rootMargin, threshold: validThreshold }
+        );
+
+        intersectionObserver.observe(el);
+    },
+
+    __updateElements: async function (rootElement, prefix, events, params) {
+        if (!rootElement.isConnected) return;
+
+        // 1. Determine targets based on prefix-group
+        let sourceElements = [rootElement];
+        const sourceGroup = rootElement.getAttribute(`${prefix}-group`);
+        
+        if (sourceGroup) {
+            sourceElements = document.querySelectorAll(`[${prefix}-group="${sourceGroup}"]`);
+        }
+
+        // 2. Iterate through sourceElements
+        for (const sourceElement of sourceElements) {
+            
+            // --- Global Options (Dash) ---
+
+            // onEvent
+            const onEvent = sourceElement.getAttribute(`${prefix}-on`);
+            if (onEvent) {
+                await new Promise((resolve) => {
+                    const handleEvent = () => {
+                        document.removeEventListener(onEvent, handleEvent);
+                        resolve();
+                    };
+                    document.addEventListener(onEvent, handleEvent);
+                });
+            }
+
+            // setInterval
+            const intervalAttr = sourceElement.getAttribute(`${prefix}-set-interval`);
+            if (intervalAttr !== null) {
+                const intervalMs = parseInt(intervalAttr, 10) || 0;
+                
+                if (!sourceElement.eventsInterval) {
+                    sourceElement.eventsInterval = {};
+                }
+                
+                const currentInterval = sourceElement.eventsInterval[prefix];
+
+                if (intervalMs > 0) {
+                    // Start or update interval
+                    if (!currentInterval || currentInterval.delay !== intervalMs) {
+                        if (currentInterval) clearInterval(currentInterval.id);
+                        
+                        sourceElement.eventsInterval[prefix] = {
+                            delay: intervalMs,
+                            id: setInterval(() => {
+                                if (!sourceElement.isConnected) {
+                                    const entry = sourceElement.eventsInterval?.[prefix];
+                                    if (entry) {
+                                        clearInterval(entry.id);
+                                        delete sourceElement.eventsInterval[prefix];
+                                    }
+                                    return;
                                 }
-							}
-						});
-					},
-					{ root, rootMargin, threshold: validThreshold }
-				);
-
-				intersectionObserver.observe(el);
-			}
-
-			for (let i = 0; i < events.length; i++) {
-				// Skip specific lifecycle events
-				if (
-					events[i] === "onload" ||
-					events[i] === "observer" ||
-					events[i] === "intersection" ||
-					events[i] === "resize"
-				) {
-					continue;
-				}
-
-				// Remove any existing event listener
-				el.removeEventListener(events[i], eventFunction);
-
-				// Initialize an empty options object
-				const options = {};
-
-				// Attributes to check dynamically
-				const attributes = ["bubbles", "cancelable", "composed"];
-
-				for (let j = 0; j < attributes.length; j++) {
-					const attrValue = el.getAttribute(
-						`${events[i]}-${attributes[j]}`
-					);
-					if (attrValue !== null) {
-						options[attributes[j]] = attrValue !== "false";
-					}
-				}
-
-				// Add the new event listener with the dynamically constructed options
-				el.addEventListener(events[i], eventFunction, options);
-			}
-
-			function eventFunction(event) {
-				// TODO: apply debounce.
-				// let debounce;
-				// clearTimeout(debounce);
-				// debounce = setTimeout(function() {
-				const target = event.currentTarget;
-				if (target) {
-					let prefixes = self.elements.get(target);
-					if (
-						prefixes[prefix].prev === event.type &&
-						["mouseover", "mouseout"].includes(event.type)
-					)
-						return;
-					else prefixes[prefix].prev = event.type;
-
-					let attribute = target.getAttribute("actions") || "";
-					if (attribute.includes(prefix)) return;
-					// if (target.closest(`[actions*="${prefix}"]`))
-					// 	return;
-
-					// Define the lifecycle attributes (matching JavaScript event methods)
-					const lifecycleAttributes = [
-						"preventDefault",
-						"stopPropagation",
-						"stopImmediatePropagation"
-					];
-
-					// Handle lifecycle attributes dynamically
-					for (let i = 0; i < lifecycleAttributes.length; i++) {
-						const attr = `${prefix}-${lifecycleAttributes[i]}`; // Add prefix dynamically
-						const attrValue = target.getAttribute(attr); // Directly get the attribute value
-
-						// If attribute exists and is not explicitly "false", apply the corresponding event method
-						if (attrValue !== null && attrValue !== "false") {
-							event[lifecycleAttributes[i]]();
-						}
-					}
-
-					self.__updateElements(
-						target,
-						prefix,
-						null,
-						prefixes[prefix].events
-					);
-				}
-			}
-		}
-	},
-
-	__updateElements: async function (el, prefix, target, events, params) {
-		if (!el.isConnected) return;
-
-		let elements = [el];
-		let targetGroup = el.getAttribute(`${prefix}-group`);
-		if (targetGroup) {
-			elements = document.querySelectorAll(
-				`[${prefix}-group="${targetGroup}"]`
-			);
-		}
-
-		for (let element of elements) {
-			// const requestAnimationFrameAttr = element.getAttribute(
-			// 	`${prefix}-requestAnimationFrame`
-			// );
-
-			// if (
-			// 	requestAnimationFrameAttr !== null &&
-			// 	requestAnimationFrameAttr !== "false"
-			// ) {
-			// 	// Double requestAnimationFrame
-			// 	await new Promise((resolve) => {
-			// 		requestAnimationFrame(() => {
-			// 			requestAnimationFrame(() => {
-			// 				resolve();
-			// 			});
-			// 		});
-			// 	});
-			// }
-
-			let interval = element.getAttribute(`${prefix}-setInterval`);
-			if (interval !== null) {
-				let intervalMs = parseInt(interval, 10) || 0;
-				if (!element.eventsInterval) {
-					element.eventsInterval = {};
-				}
-				let intervalEntry = element.eventsInterval[prefix];
-				if (intervalMs > 0) {
-					if (!intervalEntry || intervalEntry.delay !== intervalMs) {
-						if (intervalEntry) {
-							clearInterval(intervalEntry.id);
-						}
-						element.eventsInterval[prefix] = {
-							delay: intervalMs,
-							id: setInterval(() => {
-								if (!element.isConnected) {
-									const entry =
-										element.eventsInterval &&
-										element.eventsInterval[prefix];
-									if (entry) {
-										clearInterval(entry.id);
-										delete element.eventsInterval[prefix];
-									}
-									return;
-								}
-								self.__updateElements(
-									element,
-									prefix,
-									target,
-									events,
-									params
-								);
-							}, intervalMs)
-						};
-					}
-				} else if (intervalEntry) {
-					clearInterval(intervalEntry.id);
-					delete element.eventsInterval[prefix];
-				}
-			}
-
-			let delay = element.getAttribute(`${prefix}-setTimeout`);
-			if (delay) {
-				delay = parseInt(delay, 10) || 0;
-				if (delay > 0) {
-					await new Promise((resolve) => setTimeout(resolve, delay));
-				}
-			}
-
-			if (!element.isConnected) return;
-
-			let once = element.getAttribute(`${prefix}-once`);
-			if (once || once === "") {
-				if (!element.eventsOnce) {
-					element.eventsOnce = [prefix];
-				} else if (element.eventsOnce.includes(prefix)) {
-					continue;
-				} else {
-					element.eventsOnce.push(prefix);
-				}
-			}
-
-			// TODO: support empty value when prefix-attribute defined, add and remove the attribute
-			let targetAttribute = element.getAttribute(`${prefix}-attribute`);
-			let targetPosition = element.getAttribute(
-				`${prefix}-insert-adjacent`
-			);
-
-			let onEvent = element.getAttribute(`${prefix}-on`);
-			if (onEvent) {
-				await new Promise((resolve, reject) => {
-					const handleEvent = () => {
-						document.removeEventListener(onEvent, handleEvent);
-						resolve();
-					};
-					document.addEventListener(onEvent, handleEvent);
-				});
-			}
-
-			let values;
-			if (prefix === "localstorage") {
-				let key = element.getAttribute("localstorage-get");
-				if (key) {
-					values = localStorage.getItem(key);
-				} else if ((key = element.getAttribute("localstorage-set"))) {
-					values = await element.getValue();
-					if (values) {
-						localStorage.setItem(key, values);
-					}
-				}
-
-				if (!key) return;
-			} else {
-				values = element.getAttribute(`${prefix}-value`);
-
-				if (values === null) {
-					let valueElements = queryElements({
-						element,
-						prefix: `${prefix}-value`
-					});
-					if (valueElements.length) {
-						let elementValues = [];
-						for (let i = 0; i < valueElements.length; i++) {
-							elementValues.push(valueElements[i].getValue());
-						}
-						if (elementValues.length) {
-							values = elementValues;
-						}
-					}
-				}
-
-				if (values === null) {
-					values = element.getAttribute(`${prefix}-if-value`);
-				}
-				if (values === null) {
-					values = element.getAttribute(prefix);
-				}
-			}
-
-			if (values || values === "") {
-				if (typeof values === "string") {
-					values = values.split(",");
-				} else if (!Array.isArray(values)) {
-					values = [values];
-				}
-			} else {
-				values = await element.getValue();
-				if (!Array.isArray(values)) {
-					values = [values];
-				}
-			}
-
-			if ((targetAttribute && !values) || values.length === 0) {
-				return;
-			}
-
-			let ifCondition = element.getAttribute(`${prefix}-if`);
-			let elseIfCondition = element.getAttribute(`${prefix}-else-if`);
-			let elseCondition = element.getAttribute(`${prefix}-else`);
-
-			let ifValue = element.getAttribute(`${prefix}-if-value`);
-			if (ifCondition) {
-				if (!ifValue && ifValue !== "")
-					ifValue = (await element.getValue()) || values;
-				//values // await element.getValue()
-				else if (ifValue || ifValue === "") {
-					ifValue = [ifValue];
-				} else {
-					ifValue = values;
-				}
-
-				if (!Array.isArray(ifValue)) {
-					ifValue = [ifValue];
-				}
-			}
-
-			if (ifCondition) {
-				// If the 'if' condition is not met, stop processing this element.
-				if (!evaluateCondition(ifCondition, ifValue)) {
-					return;
-				}
-			} else if (elseCondition) {
-				// If there's no 'if' condition but there is an 'else' condition,
-				// stop processing if the 'else' condition is met.
-				// This creates an "execute unless" behavior for the 'else' attribute.
-				if (evaluateCondition(elseIfCondition, ifValue)) {
-					return;
-				}
-			}
-
-			let targetText = element.getAttribute(`${prefix}-text`);
-			let targetHtml = element.getAttribute(`${prefix}-html`);
-			let targetKey = element.getAttribute(`${prefix}-key`);
-
-			if (prefix === "selected") {
-				if (el !== element) {
-					element.removeAttribute("selected");
-				} else {
-					element.setAttribute("selected", "");
-				}
-			}
-
-			let deactivate = false;
-			if (el !== element) {
-				deactivate = true;
-			}
-			if (events && events.includes("click")) {
-				// TODO: handling of attributes that represent states aria-expanded, aria-selected etc.
-			}
-
-			// values = values.map(x => x.trim());
-			values = values.map((x) => {
-				if (typeof x === "string") x = x.trim(); // Update x with the trimmed value
-				let prop = element.getAttribute(`${prefix}-property`);
-				if (prop) {
-					x = `${prop}:${x}`; // Update x with prop if it exists
-				}
-				return x; // Return the updated x
-			});
-			let targetElements;
-			if (element.hasAttribute(`${prefix}-query`)) {
-				targetElements = queryElements({
-					element,
-					prefix,
-					selector: params
-				});
-			} else {
-				targetElements = [element];
-			}
-
-			let action =
-				element.getAttribute(`${prefix}-action`) ||
-				element.getAttribute(`${prefix}-method`);
-			for (let i = 0; i < targetElements.length; i++) {
-				if (action) {
-					if (targetElements[i][action]) {
-						targetElements[i][action]();
-					}
-				} else if (
-					!targetAttribute &&
-					targetAttribute !== "" &&
-					!targetPosition &&
-					["click", "focus", "blur"].includes(prefix)
-				) {
-					// TODO: click causes an infinite loop if targetElement[i] is a child of element do to event propactaion
-					if (
-						(targetElements[i] === element &&
-							element.hasAttribute(prefix)) ||
-						(params &&
-							targetElements[i] !== element &&
-							!element.contains(targetElements[i]))
-					)
-						targetElements[i][prefix]();
-				} else {
-					this.setValue(
-						prefix,
-						targetElements[i],
-						targetAttribute,
-						values,
-						targetKey,
-						deactivate,
-						events,
-						targetPosition
-					);
-				}
-			}
-		}
-
-		el.dispatchEvent(
-			new CustomEvent(`${prefix}End`, {
-				detail: {}
-			})
-		);
-	},
-
-	setValue: async function (
-		prefix,
-		element,
-		attrName,
-		values,
-		key,
-		deactivate,
-		events,
-		targetPosition
-	) {
-		if (events && events.includes("mouseout")) {
-			if (element.matches(":hover")) {
-				element.addEventListener(
-					"mouseout",
-					() => {
-						this.setValue(
-							prefix,
-							element,
-							attrName,
-							values,
-							key,
-							deactivate,
-							events,
-							targetPosition
-						);
-					},
-					{ once: true }
-				);
-				return;
-			}
-		}
-
-		let attrValues, oldValue;
-		if (key) {
-			key = `{{${key}}}`;
-			// let value = values[0]
-			replaceKey(prefix, element, key, values);
-		} else {
-			// TODO: if html in iframe
-			let domTextEditor;
-			if (element.parentElement) {
-				domTextEditor =
-					element.parentElement.closest("[contenteditable]");
-			}
-
-			if (attrName === "style") {
-				if (element.getAttribute(attrName)) {
-					attrValues = element
-						.getAttribute(attrName)
-						.split(";")
-						.map((x) => x.trim());
-					attrValues = attrValues.map(function (item, index) {
-						return item.replace(" ", "");
-					});
-					oldValue =
-						values.filter((x) => attrValues.includes(x))[0] || "";
-				}
-				let newValue = this.__getNextValue(values, oldValue);
-
-				if (oldValue) {
-					let [property, value] = oldValue.split(":");
-					element.style[property] = "";
-				}
-
-				if (newValue != "") {
-					newValue = newValue.split(";").map((x) => x.trim());
-					for (let style of newValue) {
-						let [property, value] = style.split(":");
-						element.style[property] = value;
-					}
-				}
-			} else {
-				if (attrName === "value") {
-					oldValue = await element.getValue();
-				} else if (
-					attrName === "text" ||
-					attrName === "html" ||
-					element.getAttribute(attrName)
-				) {
-					attrValues = element
-						.getAttribute(attrName)
-						.split(" ")
-						.map((x) => x.trim());
-					oldValue =
-						values.filter((x) => attrValues.includes(x))[0] || "";
-				}
-
-				let newValue = this.__getNextValue(values, oldValue);
-				if (deactivate) newValue = "";
-				if (attrName === "class") {
-					if (oldValue) {
-						oldValue.split(" ").forEach((className) => {
-							element.classList.remove(className);
-						});
-						if (values.length === 1) {
-							return;
-						}
-					}
-
-					if (newValue) {
-						newValue.split(" ").forEach((className) => {
-							element.classList.add(className);
-						});
-					}
-				} else if (attrName === "value") {
-					element.setValue(newValue, false);
-				} else if (
-					["$click", "$focus", "$blur", "$save", "$read"].includes(
-						attrName
-					)
-				) {
-					element[attrName.substring(1)]();
-				} else if (attrName) {
-					// TODO: removeAttribute vs setting empty value, how best to define. operator $remove ???
-					if (newValue === "" && element.hasAttribute(attrName)) {
-						element.removeAttribute(attrName);
-					} else {
-						element.setAttribute(attrName, newValue);
-					}
-				} else if (targetPosition) {
-					if (domTextEditor) {
-						CoCreate.text.insertAdjacentElement({
-							domTextEditor,
-							position: targetPosition,
-							target: element,
-							elementValue: newValue
-						});
-					} else if (targetPosition === "replace") {
-						element.insertAdjacentHTML("beforebegin", newValue); // Insert before oldElement
-						element.remove(); // Remove oldElement
-					} else {
-						element.insertAdjacentHTML(targetPosition, newValue);
-					}
-				} else {
-					if (
-						!attrName &&
-						["click", "focus", "blur"].includes(newValue)
-					) {
-						element[newValue]();
-					} else if (["click", "focus", "blur"].includes(attrName)) {
-						element[attrName]();
-					}
-				}
-			}
-		}
-	},
-
-	__getNextValue: function (values, val) {
-		let size = values.length;
-		let nn = values.indexOf(val);
-		if (nn == -1) {
-			return values[0];
-		} else {
-			return values[(nn + 1) % size];
-		}
-	}
+                                // Recursive call
+                                this.__updateElements(rootElement, prefix, events, params);
+                            }, intervalMs)
+                        };
+                    }
+                } else if (currentInterval) {
+                    // Clear interval if set to 0
+                    clearInterval(currentInterval.id);
+                    delete sourceElement.eventsInterval[prefix];
+                }
+            }
+
+            // setTimeout
+            const delayAttr = sourceElement.getAttribute(`${prefix}-set-timeout`);
+            if (delayAttr) {
+                const delayTime = parseInt(delayAttr, 10) || 0;
+                if (delayTime > 0) {
+                    await new Promise(resolve => setTimeout(resolve, delayTime));
+                }
+            }
+
+            if (!sourceElement.isConnected) return;
+
+            // once
+            const onceAttr = sourceElement.getAttribute(`${prefix}-once`);
+            if (onceAttr !== null) { 
+                if (!sourceElement.eventsOnce) {
+                    sourceElement.eventsOnce = [prefix];
+                } else if (sourceElement.eventsOnce.includes(prefix)) {
+                    continue; // Skip if already ran
+                } else {
+                    sourceElement.eventsOnce.push(prefix);
+                }
+            }
+
+            // --- Resolve Targets ---
+            const querySelector = sourceElement.getAttribute(`${prefix}-query`);
+            let targetElements = [sourceElement];
+
+            if (querySelector || params) {
+                targetElements = queryElements({
+                    element: sourceElement,
+                    prefix: prefix,
+                    selector: querySelector || params
+                });
+            }
+
+            // --- Execute Action on Targets ---
+            for (const targetElement of targetElements) {
+                await this.setValue(
+                    rootElement,
+                    sourceElement,
+                    targetElement,
+                    prefix,
+                    events
+                );
+            }
+        }
+
+        rootElement.dispatchEvent(
+            new CustomEvent(`${prefix}End`, { detail: {} })
+        );
+    },
+
+    setValue: async function (rootElement, sourceElement, targetElement, prefix, events) {
+        // Handle Mouseout toggle logic
+        if (events && events.includes("mouseout")) {
+            if (targetElement.matches(":hover")) {
+                targetElement.addEventListener(
+                    "mouseout",
+                    () => {
+                        this.setValue(rootElement, sourceElement, targetElement, prefix, events);
+                    },
+                    { once: true }
+                );
+                return;
+            }
+        }
+
+        const deactivate = (rootElement !== sourceElement);
+
+        // Iterate Attributes
+        for (const attribute of sourceElement.attributes) {
+            const name = attribute.name;
+            
+            // Optimization: Skip if shorter than prefix + dot + min char
+            if (name.length <= prefix.length + 1) continue;
+            
+            // STRICT RULE: Only process attributes with DOT separator.
+            // All options use Dash, so they will be ignored here.
+            if (!name.startsWith(prefix) || name[prefix.length] !== '.') continue;
+
+            // Extract target name (e.g., 'value', 'style', 'src', 'data-something')
+            const targetName = name.substring(prefix.length + 1);
+
+            // Get Value
+            let value = sourceElement.getAttribute(name);
+            if (!value && sourceElement.getValue) {
+                value = await sourceElement.getValue();
+            }
+
+            // Parse CSV for rotation
+            let values = [];
+            if (typeof value === 'string') {
+                values = value.split(',').map(v => v.trim());
+            } else if (Array.isArray(value)) {
+                values = value;
+            } else {
+                values = [value];
+            }
+
+            let oldValue = "";
+            let newValue = "";
+
+            switch (targetName) {
+                case 'style':
+                    if (targetElement.getAttribute("style")) {
+                        // Normalize style string for comparison
+                        const styles = targetElement.getAttribute("style")
+                            .split(";")
+                            .map(x => x.trim().replace(/\s/g, ""));
+                        
+                        oldValue = values.find(x => styles.includes(x.replace(/\s/g, ""))) || "";
+                    }
+                    newValue = this.__getNextValue(values, oldValue, deactivate);
+
+                    if (oldValue) {
+                        const [prop] = oldValue.split(":");
+                        if (prop) targetElement.style[prop.trim()] = "";
+                    }
+
+                    if (newValue) {
+                        const styles = newValue.split(";");
+                        for (const s of styles) {
+                            const [prop, val] = s.split(":");
+                            if (prop && val) targetElement.style[prop.trim()] = val.trim();
+                        }
+                    }
+                    break;
+
+                case 'class':
+                    const currentClasses = Array.from(targetElement.classList);
+                    oldValue = values.find(val => {
+                        const requiredClasses = val.split(" ");
+                        return requiredClasses.every(c => currentClasses.includes(c));
+                    }) || "";
+
+                    newValue = this.__getNextValue(values, oldValue, deactivate);
+
+                    if (oldValue) {
+                        oldValue.split(" ").forEach(c => targetElement.classList.remove(c));
+                        if (values.length === 1 && !newValue) return; 
+                    }
+
+                    if (newValue) {
+                        newValue.split(" ").forEach(c => targetElement.classList.add(c));
+                    }
+                    break;
+
+                case 'insertadjacenthtml':
+                case 'insertadjacenttext':
+                case 'insertAdjacentHTML': 
+                case 'insertAdjacentText':
+                    const position = sourceElement.getAttribute(name);; 
+                    if (!position) continue;
+
+                    let content = "";
+                    if (sourceElement.getValue) {
+                        content = await sourceElement.getValue();
+                    }
+
+                    // Check for CoCreate Rich Text integration
+                    let domTextEditor = targetElement.parentElement?.closest("[contenteditable]");
+
+                    if (domTextEditor && typeof CoCreate !== 'undefined' && CoCreate.text) {
+                        CoCreate.text.insertAdjacentElement({
+                            domTextEditor,
+                            position,
+                            target: targetElement,
+                            elementValue: content
+                        });
+                    } else {
+                        const isHtml = targetName.toLowerCase().includes('html');
+                        if (isHtml) {
+                            targetElement.insertAdjacentHTML(position, content);
+                        } else {
+                            targetElement.insertAdjacentText(position, content);
+                        }
+                    }
+                    break;
+
+                case 'value':
+                    if (targetElement.getValue) {
+                        oldValue = await targetElement.getValue();
+                    } else {
+                        oldValue = targetElement.value || "";
+                    }
+
+                    if (!values.includes(oldValue)) oldValue = "";
+                    newValue = this.__getNextValue(values, oldValue, deactivate);
+
+                    if (targetElement.setValue) {
+                        targetElement.setValue(newValue);
+                    } else {
+                        targetElement.value = newValue;
+                    }
+                    break;
+
+                default:
+                    // Generic handling: Try Property first, then Attribute
+                    
+                    // 1. Try Property
+                    if (targetElement[targetName] !== undefined) {
+                        oldValue = targetElement[targetName];
+                        if (!values.includes(oldValue) && typeof oldValue !== 'function') oldValue = "";
+                        
+                        newValue = this.__getNextValue(values, oldValue, deactivate);
+
+                        if (typeof targetElement[targetName] === 'function') {
+                            targetElement[targetName](newValue);
+                        } else {
+                            targetElement[targetName] = newValue;
+                        }
+                    } 
+                    // 2. Fallback to Attribute
+                    else {
+                        oldValue = targetElement.getAttribute(targetName);
+                        if (!values.includes(oldValue)) oldValue = "";
+                        
+                        newValue = this.__getNextValue(values, oldValue, deactivate);
+
+                        // Handle Namespaced Attributes (e.g. svg:href) if encoded in name
+                        if (targetName.includes('.')) {
+                            const realName = targetName.replace('.', ':');
+                            targetElement.setAttribute(realName, newValue);
+                        } else {
+                            targetElement.setAttribute(targetName, newValue);
+                        }
+                    }
+                    break;
+            }
+        }
+    },
+
+    __getNextValue: function (values, val, deactivate) {
+        if (deactivate) return "";
+        const size = values.length;
+        const nn = values.indexOf(val);
+        if (nn === -1) {
+            return values[0];
+        } else {
+            return values[(nn + 1) % size];
+        }
+    }
 };
 
-const eventElements = new Map();
-const eventKeys = new Map();
-const elementAttributes = new Map();
-
-function replaceKey(prefix, element, key, values) {
-	let currentValue = key;
-
-	if (eventElements.has(element)) {
-		currentValue = eventElements.get(element).get(key);
-	}
-	let value = CoCreateEvents.__getNextValue(values, currentValue);
-	eventKeys.set(key, value);
-	eventElements.set(element, eventKeys);
-
-	let attributes = elementAttributes.get(element);
-	if (!attributes) {
-		attributes = {};
-		elementAttributes.set(element, attributes);
-	}
-
-	for (let attribute of element.attributes) {
-		let newName = attribute.name;
-		let newValue = attribute.value;
-		let attrName = attribute.name;
-		let attrValue = attribute.value;
-		let setAttr = false;
-
-		if (attrName === "clone-data") console.log("clone-data");
-		if (
-			attrValue.includes(currentValue) ||
-			(attributes[attrName] &&
-				attributes[attrName].valueKeys &&
-				attributes[attrName].valueKeys[key])
-		) {
-			if (!attributes[attrName])
-				attributes[attrName] = { originalValue: attrValue };
-			else if (!attributes[attrName].originalValue)
-				attributes[attrName].originalValue = attrValue;
-			if (!attributes[attrName].valueKeys)
-				attributes[attrName].valueKeys = { [key]: value };
-			else attributes[attrName].valueKeys[key] = value;
-
-			newValue = attributes[attrName].originalValue;
-			for (let valueKey of Object.keys(attributes[attrName].valueKeys)) {
-				const valueKeyRegex = new RegExp(valueKey, "g");
-				newValue = newValue.replace(valueKeyRegex, value);
-			}
-			setAttr = true;
-		}
-		// if (attrName.includes(currentValue) || attributes[attrName] && attributes[attrName].nameKeys && attributes[attrName].nameKeys[key]){
-		// 	if (!attributes[attrName])
-		// 		attributes[attrName] = { originalName: attrName }
-		// 	else if (!attributes[attrName].originalName)
-		// 		attributes[attrName].originalName = attrName
-
-		// 	if (!attributes[attrName].nameKeys)
-		// 		attributes[attrName].nameKeys = {[key]: value}
-
-		// 	newName = attributes[attrName].originalName
-		// 	for (let nameKey of Object.keys(attributes[attrName].nameKeys)) {
-		// 		let r
-		// 		if (attrName === nameKey)
-		// 			r = nameKey
-		// 		else
-		// 			r = attributes[attrName].nameKeys[nameKey]
-
-		// 		const nameKeyRegex = new RegExp(r, "g");
-		// 		newName = newName.replace(nameKeyRegex, value);
-		// 	}
-
-		// 	attributes[attrName].nameKeys[key] = value;
-
-		// 	element.removeAttribute(attrName);
-		// 	setAttr = true;
-
-		// }
-		if (setAttr) element.setAttribute(newName, newValue);
-	}
-	let html = element.innerHTML;
-	if (
-		html.indexOf(currentValue) !== -1 ||
-		(element.htmlKeys && element.htmlKeys[key])
-	) {
-		if (!element.originalHtml) element.originalHtml = html;
-		if (!element.htmlKeys) element.htmlKeys = { [key]: value };
-		else element.htmlKeys[key] = value;
-
-		let newHTML = element.originalHtml;
-		if (newHTML) {
-			for (let elementKey of Object.keys(element.htmlKeys)) {
-				const htmlKeyRegex = new RegExp(elementKey, "g");
-				newHTML = newHTML.replace(htmlKeyRegex, value);
-			}
-
-			element.innerHTML = newHTML;
-		}
-	}
-}
-
-function evaluateCondition(condition, values) {
-	let orConditions = condition.split(/\s*\|\|\s*/);
-
-	if (orConditions.length > 1) {
-		return orConditions.some((cond) => checkCondition(cond, values));
-	} else {
-		let andConditions = condition.split(/\s*&&\s*/);
-		return andConditions.every((cond) => checkCondition(cond, values));
-	}
-}
-
-function checkCondition(condition, value) {
-	let isNegated = condition.startsWith("!");
-	if (isNegated) {
-		condition = condition.substring(1);
-	}
-	const operatorMatch = condition.match(/(<=|>=|<|>)(.+)/);
-	if (operatorMatch) condition = operatorMatch[2].trim();
-
-	let parse = true;
-	if (condition === "true") {
-		return !!value[0];
-	} else if (condition === "false") {
-		return !value[0];
-	}
-	// else if (condition === "[]" && typeof value[0] === "string") {
-	// 	parse = false;
-	// }
-
-	// TODO: why parse updated conditin to boolean false
-	// if (parse && condition !== "false") condition = parseCondition(condition);
-
-	if (
-		typeof condition === "number" ||
-		(typeof condition === "string" && /\d/.test(condition))
-	) {
-		condition = parseNumberCondition(condition);
-	} else if (typeof value[0] === "object" && typeof condition === "string") {
-		condition = parseJsonCondition(condition);
-	}
-
-	let result;
-
-	if (condition === "$template") {
-		result = /{{\s*([\w\W]+)\s*}}/g.test(value[0]);
-	} else if (Array.isArray(value) && !(typeof condition === "object")) {
-		if (operatorMatch) {
-			condition = parseFloat(condition);
-			result = value.some((v) => {
-				v = parseFloat(v);
-				switch (operatorMatch[1]) {
-					case "<":
-						return v < condition;
-					case ">":
-						return v > condition;
-					case "<=":
-						return v <= condition;
-					case ">=":
-						return v >= condition;
-					default:
-						return false;
-				}
-			});
-		} else result = value.includes(condition);
-	} else if (Array.isArray(value)) {
-		// TODO: handle comparing array to array, vs querying the array items for a match
-		result = queryData(value, condition);
-	} else if (
-		typeof value === "object" &&
-		value !== null &&
-		typeof parsedCond === "object"
-	) {
-		result = queryData(value, condition);
-	} else {
-		result = value === condition;
-	}
-
-	result = isNegated ? !result : result;
-	return result;
-}
-
-function parseJsonCondition(condition) {
-	try {
-		// Attempt to parse the condition as JSON
-		let parsedJson = JSON.parse(condition);
-		return parsedJson;
-	} catch (e) {
-		return condition;
-	}
-}
-function parseNumberCondition(condition) {
-	if (typeof condition === "string") {
-		const num = parseFloat(condition);
-		return !isNaN(num) ? num : condition;
-	}
-	return condition;
-}
-
-// Helper function for delay using Promises
-const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
-
-/**
- * Waits for a specific element property to meet a readiness condition,
- * based on retry attributes defined on the element.
- * Incorporates optional exponential backoff for retry delays.
- * Returns a Promise that resolves to true if the condition is met within
- * the allowed attempts, and false otherwise.
- *
- * @param {HTMLElement} element The element with the onload-retry-* attributes.
- * @returns {Promise<boolean>} A Promise resolving to true if ready, false if timed out.
- */
-async function checkElementReadinessWithBackoff(element) {
-	const propertyName = element.getAttribute("onload-retry-property");
-
-	if (!propertyName) {
-		return true; // No retry needed
-	}
-
-	// --- Retry Parameters ---
-	const maxAttempts =
-		parseInt(element.getAttribute("onload-retry-attempts") || "3", 10) || 3;
-	// Initial delay (used for the first wait and as the base for backoff)
-	const initialDelayMs =
-		parseInt(element.getAttribute("onload-retry-delay") || "100", 10) ||
-		100;
-	// Exponential backoff factor (e.g., 2 for doubling). <= 1 means fixed delay.
-	// Default to 1 (no backoff) if missing or invalid.
-	const backoffFactor =
-		parseFloat(
-			element.getAttribute("onload-retry-backoff-factor") || "1"
-		) || 1;
-	// Optional maximum delay cap. Use Infinity if missing, invalid, or <= 0.
-	const maxDelayMs = parseInt(
-		element.getAttribute("onload-retry-max-delay") || "0",
-		10
-	);
-	const effectiveMaxDelay =
-		maxDelayMs && maxDelayMs > 0 ? maxDelayMs : Infinity;
-
-	console.log(
-		`Checking readiness for property "${propertyName}" on element ${
-			element.id || ""
-		}. Max attempts: ${maxAttempts}, Initial Delay: ${initialDelayMs}ms, Backoff Factor: ${backoffFactor}, Max Delay: ${
-			effectiveMaxDelay === Infinity ? "None" : effectiveMaxDelay + "ms"
-		}.`
-	);
-
-	// Initialize the delay to be used for the *first* wait.
-	let currentDelay = initialDelayMs;
-
-	for (let attempt = 1; attempt <= maxAttempts; attempt++) {
-		console.log(
-			`Attempt ${attempt}/${maxAttempts}: Checking "${propertyName}"...`
-		);
-		try {
-			const propertyValue = element[propertyName];
-			// Example check: Adjust condition as needed
-			if (propertyValue !== undefined && propertyValue > 0) {
-				console.log(
-					`Property "${propertyName}" ready on attempt ${attempt}. Value: ${propertyValue}`
-				);
-				return true; // Condition met
-			}
-		} catch (error) {
-			console.error(
-				`Error accessing property "${propertyName}" on attempt ${attempt}:`,
-				error
-			);
-		}
-
-		// If condition not met and more attempts remain:
-		if (attempt < maxAttempts) {
-			// Determine the actual delay for this wait, applying the cap
-			const delayForThisWait = Math.min(currentDelay, effectiveMaxDelay);
-
-			console.log(
-				`Waiting ${Math.round(
-					delayForThisWait
-				)}ms before next attempt...`
-			);
-			await delay(delayForThisWait);
-
-			// Calculate the delay for the *next* potential wait, only if backoff is active
-			if (backoffFactor > 1) {
-				currentDelay = currentDelay * backoffFactor;
-				// Note: We apply the cap just before the actual delay,
-				// but the base 'currentDelay' keeps growing exponentially.
-				// Alternatively, you could cap 'currentDelay' itself here:
-				// currentDelay = Math.min(currentDelay * backoffFactor, effectiveMaxDelay);
-				// Let's stick to capping just before delay() for now.
-			}
-			// If backoffFactor <= 1, currentDelay remains initialDelayMs (implicitly handled by initialization)
-		}
-	}
-
-	// If loop finishes without condition being met
-	console.warn(
-		`Readiness check failed for property "${propertyName}" on element ${
-			element.id || ""
-		} after ${maxAttempts} attempts.`
-	);
-	return false; // Timed out
-}
-
-// --- Example Usage (calling code doesn't change) ---
-
-async function handleElementProcessingWithBackoff(element) {
-	// Call the function that now supports backoff
-	const isReady = await checkElementReadinessWithBackoff(element);
-
-	if (isReady) {
-		console.log(
-			`Element ${element.id || ""} is ready. Proceeding with actions.`
-		);
-		// --- Execute subsequent actions ---
-		if (element.hasAttribute("onload-attribute")) {
-			/* ... */
-		}
-		if (element.hasAttribute("onload-query")) {
-			/* ... */
-		}
-	} else {
-		console.warn(
-			`Skipping actions for element ${
-				element.id || ""
-			} because readiness check failed.`
-		);
-	}
-}
-
-// --- Example Elements ---
-
-// With Backoff (Delays: 100, 200, 400, 800 - capped)
-// <span id="elem1" onload-retry-property="scrollWidth"
-//   onload-retry-attempts="5" onload-retry-delay="100"
-//   onload-retry-backoff-factor="2" onload-retry-max-delay="500">
-//   Content 1
-// </span>
-// Waits would be: 100ms, 200ms, 400ms, 500ms (capped)
-
-// No Backoff (factor missing/invalid/<=1)
-// <span id="elem2" onload-retry-property="clientHeight"
-//   onload-retry-attempts="4" onload-retry-delay="300">
-//   Content 2
-// </span>
-// Waits would be: 300ms, 300ms, 300ms
-
-// const element1 = document.getElementById('elem1');
-// if (element1) handleElementProcessingWithBackoff(element1);
-// const element2 = document.getElementById('elem2');
-// if (element2) handleElementProcessingWithBackoff(element2);
-
 CoCreateEvents.init();
 
-export default CoCreateEvents;
+export default CoCreateEvents;