native-document 1.0.94 → 1.0.98

package/dist/native-document.components.min.js

@@ -374,59 +374,6 @@ var NativeComponents = (function (exports) {
     }
     var DebugManager = DebugManager$1;
 
-    const MemoryManager = (function() {
-
-        let $nextObserverId = 0;
-        const $observables = new Map();
-
-        return {
-            /**
-             * Register an observable and return an id.
-             *
-             * @param {ObservableItem} observable
-             * @param {Function} getListeners
-             * @returns {number}
-             */
-            register(observable) {
-                const id = ++$nextObserverId;
-                $observables.set(id, new WeakRef(observable));
-                return id;
-            },
-            unregister(id) {
-                $observables.delete(id);
-            },
-            getObservableById(id) {
-                return $observables.get(id)?.deref();
-            },
-            cleanup() {
-                for (const [_, weakObservableRef] of $observables) {
-                    const observable = weakObservableRef.deref();
-                    if (observable) {
-                        observable.cleanup();
-                    }
-                }
-                $observables.clear();
-            },
-            /**
-             * Clean observables that are not referenced anymore.
-             * @param {number} threshold
-             */
-            cleanObservables(threshold) {
-                if($observables.size < threshold) return;
-                let cleanedCount = 0;
-                for (const [id, weakObservableRef] of $observables) {
-                    if (!weakObservableRef.deref()) {
-                        $observables.delete(id);
-                        cleanedCount++;
-                    }
-                }
-                if (cleanedCount > 0) {
-                    DebugManager.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
-                }
-            }
-        };
-    }());
-
     /**
      *
      * @param {ObservableItem} $observable
@@ -519,1191 +466,1993 @@ var NativeComponents = (function (exports) {
         return this.observable.cleanup();
     };
 
-    /**
-     * Creates an ObservableWhen that tracks whether an observable equals a specific value.
-     *
-     * @param {ObservableItem} observer - The observable to watch
-     * @param {*} value - The value to compare against
-     * @class ObservableWhen
-     */
-    const ObservableWhen = function(observer, value) {
-        this.$target = value;
-        this.$observer = observer;
-    };
-
-    ObservableWhen.prototype.__$isObservableWhen = true;
+    const DocumentObserver = {
+        mounted: new WeakMap(),
+        beforeUnmount: new WeakMap(),
+        mountedSupposedSize: 0,
+        unmounted: new WeakMap(),
+        unmountedSupposedSize: 0,
+        observer: null,
 
-    /**
-     * Subscribes to changes in the match status (true when observable equals target value).
-     *
-     * @param {Function} callback - Function called with boolean indicating if values match
-     * @returns {Function} Unsubscribe function
-     * @example
-     * const status = Observable('idle');
-     * const isLoading = status.when('loading');
-     * isLoading.subscribe(active => console.log('Loading:', active));
-     */
-    ObservableWhen.prototype.subscribe = function(callback) {
-        return this.$observer.on(this.$target, callback);
-    };
+        executeMountedCallback(node) {
+            const data = DocumentObserver.mounted.get(node);
+            if(!data) {
+                return;
+            }
+            data.inDom = true;
+            if(!data.mounted) {
+                return;
+            }
+            if(Array.isArray(data.mounted)) {
+                for(const cb of data.mounted) {
+                    cb(node);
+                }
+                return;
+            }
+            data.mounted(node);
+        },
 
-    /**
-     * Returns true if the observable's current value equals the target value.
-     *
-     * @returns {boolean} True if observable value matches target value
-     */
-    ObservableWhen.prototype.val = function() {
-        return this.$observer.$currentValue === this.$target;
-    };
+        executeUnmountedCallback(node) {
+            const data = DocumentObserver.unmounted.get(node);
+            if(!data) {
+                return;
+            }
+            data.inDom = false;
+            if(!data.unmounted) {
+                return;
+            }
 
-    /**
-     * Returns true if the observable's current value equals the target value.
-     * Alias for val().
-     *
-     * @returns {boolean} True if observable value matches target value
-     */
-    ObservableWhen.prototype.isMatch = ObservableWhen.prototype.val;
+            let shouldRemove = false;
+            if(Array.isArray(data.unmounted)) {
+                for(const cb of data.unmounted) {
+                    if(cb(node) === true) {
+                        shouldRemove = true;
+                    }
+                }
+            } else {
+                shouldRemove = data.unmounted(node) === true;
+            }
 
-    /**
-     * Returns true if the observable's current value equals the target value.
-     * Alias for val().
-     *
-     * @returns {boolean} True if observable value matches target value
-     */
-    ObservableWhen.prototype.isActive = ObservableWhen.prototype.val;
+            if(shouldRemove) {
+                data.disconnect();
+                node.nd?.remove();
+            }
+        },
 
-    const invoke = function(fn, args, context) {
-        if(context) {
-            fn.apply(context, args);
-        } else {
-            fn(...args);
-        }
-    };
-    /**
-     *
-     * @param {Function} fn
-     * @param {number} delay
-     * @param {{leading?:Boolean, trailing?:Boolean, debounce?:Boolean, check: Function}}options
-     * @returns {(function(...[*]): void)|*}
-     */
-    const debounce = function(fn, delay, options = {}) {
-        let timer = null;
-        let lastArgs = null;
+        checkMutation: function(mutationsList) {
+            for(const mutation of mutationsList) {
+                if(DocumentObserver.mountedSupposedSize > 0) {
+                    for(const node of mutation.addedNodes) {
+                        DocumentObserver.executeMountedCallback(node);
+                        if(!node.querySelectorAll) {
+                            continue;
+                        }
+                        const children = node.querySelectorAll('[data--nd-mounted]');
+                        for(const child of children) {
+                            DocumentObserver.executeMountedCallback(child);
+                        }
+                    }
+                }
 
-        return  function(...args) {
-            const context = options.context === true ? this : null;
-            if(options.check) {
-                options.check(...args);
+                if (DocumentObserver.unmountedSupposedSize > 0) {
+                    for (const node of mutation.removedNodes) {
+                        DocumentObserver.executeUnmountedCallback(node);
+                        if(!node.querySelectorAll) {
+                            continue;
+                        }
+                        const children = node.querySelectorAll('[data--nd-unmounted]');
+                        for(const child of children) {
+                            DocumentObserver.executeUnmountedCallback(child);
+                        }
+                    }
+                }
             }
-            lastArgs = args;
+        },
 
-            // debounce mode: reset the timer for each call
-            clearTimeout(timer);
-            timer = setTimeout(() => invoke(fn, lastArgs, context), delay);
-        }
-    };
+        /**
+         * @param {HTMLElement} element
+         * @param {boolean} inDom
+         * @returns {{ disconnect: Function, mounted: Function, unmounted: Function, off: Function }}
+         */
+        watch: function(element, inDom = false) {
+            let mountedRegistered   = false;
+            let unmountedRegistered = false;
 
-    const nextTick = function(fn) {
-        let pending = false;
-        return function(...args) {
-            if (pending) return;
-            pending = true;
+            let data = {
+                inDom,
+                mounted: null,
+                unmounted: null,
+                disconnect: () => {
+                    if (mountedRegistered) {
+                        DocumentObserver.mounted.delete(element);
+                        DocumentObserver.mountedSupposedSize--;
+                    }
+                    if (unmountedRegistered) {
+                        DocumentObserver.unmounted.delete(element);
+                        DocumentObserver.unmountedSupposedSize--;
+                    }
+                    data = null;
+                }
+            };
 
-            Promise.resolve().then(() => {
-                fn.apply(this, args);
-                pending = false;
-            });
-        };
-    };
+            const addListener = (type, callback) => {
+                if (!data[type]) {
+                    data[type] = callback;
+                    return;
+                }
+                if (!Array.isArray(data[type])) {
+                    data[type] = [data[type], callback];
+                    return;
+                }
+                data[type].push(callback);
+            };
 
-    const deepClone = (value, onObservableFound) => {
-        // Primitives
-        if (value === null || typeof value !== 'object') {
-            return value;
-        }
+            const removeListener = (type, callback) => {
+                if(!data?.[type]) {
+                    return;
+                }
+                if(Array.isArray(data[type])) {
+                    const index = data[type].indexOf(callback);
+                    if(index > -1) {
+                        data[type].splice(index, 1);
+                    }
+                    if(data[type].length === 1) {
+                        data[type] = data[type][0];
+                    }
+                    if(data[type].length === 0) {
+                        data[type] = null;
+                    }
+                    return;
+                }
+                data[type] = null;
+            };
 
-        // Dates
-        if (value instanceof Date) {
-            return new Date(value.getTime());
-        }
+            return {
+                disconnect: () => data?.disconnect(),
 
-        // Arrays
-        if (Array.isArray(value)) {
-            return value.map(item => deepClone(item));
-        }
+                mounted: (callback) => {
+                    addListener('mounted', callback);
+                    DocumentObserver.mounted.set(element, data);
+                    if (!mountedRegistered) {
+                        DocumentObserver.mountedSupposedSize++;
+                        mountedRegistered = true;
+                    }
+                },
 
-        // Observables - keep the référence
-        if (Validator.isObservable(value)) {
-            onObservableFound && onObservableFound(value);
-            return value;
-        }
+                unmounted: (callback) => {
+                    addListener('unmounted', callback);
+                    DocumentObserver.unmounted.set(element, data);
+                    if (!unmountedRegistered) {
+                        DocumentObserver.unmountedSupposedSize++;
+                        unmountedRegistered = true;
+                    }
+                },
 
-        // Objects
-        const cloned = {};
-        for (const key in value) {
-            if (value.hasOwnProperty(key)) {
-                cloned[key] = deepClone(value[key]);
-            }
+                off: (type, callback) => {
+                    removeListener(type, callback);
+                }
+            };
         }
-        return cloned;
     };
 
-    /**
-     *
-     * @param {*} value
-     * @param {{ propagation: boolean, reset: boolean} | null} configs
-     * @class ObservableItem
-     */
-    function ObservableItem(value, configs = null) {
-        value = Validator.isObservable(value) ? value.val() : value;
-
-        this.$previousValue = null;
-        this.$currentValue = value;
-
-        this.$firstListener = null;
-        this.$listeners = null;
-        this.$watchers = null;
-
-        this.$memoryId = null;
+    DocumentObserver.observer = new MutationObserver(DocumentObserver.checkMutation);
+    DocumentObserver.observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+    });
 
-        if(configs) {
-            this.configs = configs;
-            if(configs.reset) {
-                this.$initialValue = Validator.isObject(value) ? deepClone(value) : value;
-            }
-        }
+    function NDElement(element) {
+        this.$element = element;
+        this.$observer = null;
     }
 
-    Object.defineProperty(ObservableItem.prototype, '$value', {
-        get() {
-            return this.$currentValue;
-        },
-        set(value) {
-            this.set(value);
-        },
-        configurable: true,
-    });
+    NDElement.prototype.__$isNDElement = true;
 
-    ObservableItem.prototype.__$isObservable = true;
-    const noneTrigger = function() {};
+    NDElement.prototype.valueOf = function() {
+        return this.$element;
+    };
 
-    /**
-     * Intercepts and transforms values before they are set on the observable.
-     * The interceptor can modify the value or return undefined to use the original value.
-     *
-     * @param {(value) => any} callback - Interceptor function that receives (newValue, currentValue) and returns the transformed value or undefined
-     * @returns {ObservableItem} The observable instance for chaining
-     * @example
-     * const count = Observable(0);
-     * count.intercept((newVal, oldVal) => Math.max(0, newVal)); // Prevent negative values
-     */
-    ObservableItem.prototype.intercept = function(callback) {
-        this.$interceptor = callback;
-        this.set = this.$setWithInterceptor;
+    NDElement.prototype.ref = function(target, name) {
+        target[name] = this.$element;
         return this;
     };
 
-    ObservableItem.prototype.triggerFirstListener = function(operations) {
-        this.$firstListener(this.$currentValue, this.$previousValue, operations);
+    NDElement.prototype.refSelf = function(target, name) {
+        target[name] = this;
+        return this;
     };
 
-    ObservableItem.prototype.triggerListeners = function(operations) {
-        const $listeners = this.$listeners;
-        const $previousValue = this.$previousValue;
-        const $currentValue = this.$currentValue;
-
-        for(let i = 0, length = $listeners.length; i < length; i++) {
-            $listeners[i]($currentValue, $previousValue, operations);
+    NDElement.prototype.unmountChildren = function() {
+        let element = this.$element;
+        for(let i = 0, length = element.children.length; i < length; i++) {
+            let elementChildren = element.children[i];
+            if(!elementChildren.$ndProx) {
+                elementChildren.nd?.remove();
+            }
+            elementChildren = null;
         }
+        element = null;
+        return this;
     };
 
-    ObservableItem.prototype.triggerWatchers = function(operations) {
-        const $watchers = this.$watchers;
-        const $previousValue = this.$previousValue;
-        const $currentValue = this.$currentValue;
+    NDElement.prototype.remove = function() {
+        let element = this.$element;
+        element.nd.unmountChildren();
+        element.$ndProx = null;
+        delete element.nd?.on?.prevent;
+        delete element.nd?.on;
+        delete element.nd;
+        element = null;
+        return this;
+    };
 
-        const $currentValueCallbacks = $watchers.get($currentValue);
-        const $previousValueCallbacks = $watchers.get($previousValue);
-        if($currentValueCallbacks) {
-            $currentValueCallbacks(true, $previousValue, operations);
+    NDElement.prototype.lifecycle = function(states) {
+        this.$observer = this.$observer || DocumentObserver.watch(this.$element);
+
+        if(states.mounted) {
+            this.$element.setAttribute('data--nd-mounted', '1');
+            this.$observer.mounted(states.mounted);
         }
-        if($previousValueCallbacks) {
-            $previousValueCallbacks(false, $currentValue, operations);
+        if(states.unmounted) {
+            this.$element.setAttribute('data--nd-unmounted', '1');
+            this.$observer.unmounted(states.unmounted);
         }
+        return this;
     };
 
-    ObservableItem.prototype.triggerAll = function(operations) {
-        this.triggerWatchers(operations);
-        this.triggerListeners(operations);
+    NDElement.prototype.mounted = function(callback) {
+        return this.lifecycle({ mounted: callback });
     };
 
-    ObservableItem.prototype.triggerWatchersAndFirstListener = function(operations) {
-        this.triggerWatchers(operations);
-        this.triggerFirstListener(operations);
+    NDElement.prototype.unmounted = function(callback) {
+        return this.lifecycle({ unmounted: callback });
     };
 
-    ObservableItem.prototype.assocTrigger = function() {
-        this.$firstListener = null;
-        if(this.$watchers?.size && this.$listeners?.length) {
-            this.trigger = (this.$listeners.length === 1) ? this.triggerWatchersAndFirstListener : this.triggerAll;
-            return;
-        }
-        if(this.$listeners?.length) {
-            if(this.$listeners.length === 1) {
-                this.$firstListener = this.$listeners[0];
-                this.trigger = this.triggerFirstListener;
-            }
-            else {
-                this.trigger = this.triggerListeners;
-            }
-            return;
-        }
-        if(this.$watchers?.size) {
-            this.trigger = this.triggerWatchers;
-            return;
-        }
-        this.trigger = noneTrigger;
-    };
-    ObservableItem.prototype.trigger = noneTrigger;
+    NDElement.prototype.beforeUnmount = function(id, callback) {
+        const el = this.$element;
 
-    ObservableItem.prototype.$updateWithNewValue = function(newValue) {
-        newValue = newValue?.__$isObservable ? newValue.val() : newValue;
-        if(this.$currentValue === newValue) {
-            return;
-        }
-        this.$previousValue = this.$currentValue;
-        this.$currentValue = newValue;
-        this.trigger();
-        this.$previousValue = null;
-    };
+        if(!DocumentObserver.beforeUnmount.has(el)) {
+            DocumentObserver.beforeUnmount.set(el, new Map());
+            const originalRemove = el.remove.bind(el);
 
-    /**
-     * @param {*} data
-     */
-    ObservableItem.prototype.$setWithInterceptor = function(data) {
-        let newValue = (typeof data === 'function') ? data(this.$currentValue) : data;
-        const result = this.$interceptor(newValue, this.$currentValue);
+            let  $isUnmounting = false;
 
-        if (result !== undefined) {
-            newValue = result;
+            el.remove = async () => {
+                if($isUnmounting) {
+                    return;
+                }
+                $isUnmounting = true;
+
+                try {
+                    const callbacks = DocumentObserver.beforeUnmount.get(el);
+                    for (const cb of callbacks.values()) {
+                        await cb.call(this, el);
+                    }
+                } finally {
+                    originalRemove();
+                    $isUnmounting = false;
+                }
+            };
         }
 
-        this.$updateWithNewValue(newValue);
+        DocumentObserver.beforeUnmount.get(el).set(id, callback);
+        return this;
     };
 
-    /**
-     * @param {*} data
-     */
-    ObservableItem.prototype.$basicSet = function(data) {
-        let newValue = (typeof data === 'function') ? data(this.$currentValue) : data;
-        this.$updateWithNewValue(newValue);
+    NDElement.prototype.htmlElement = function() {
+        return this.$element;
     };
 
-    ObservableItem.prototype.set = ObservableItem.prototype.$basicSet;
-
-    ObservableItem.prototype.val = function() {
-        return this.$currentValue;
-    };
+    NDElement.prototype.node = NDElement.prototype.htmlElement;
 
-    ObservableItem.prototype.disconnectAll = function() {
-        this.$listeners?.splice(0);
-        this.$previousValue = null;
-        this.$currentValue = null;
-        if(this.$watchers) {
-            for (const [_, watchValueList] of this.$watchers) {
-                if(Validator.isArray(watchValueList)) {
-                    watchValueList.splice(0);
-                }
-            }
+    NDElement.prototype.shadow = function(mode, style = null) {
+        const $element = this.$element;
+        const children = Array.from($element.childNodes);
+        const shadowRoot = $element.attachShadow({ mode });
+        if(style) {
+            const styleNode = document.createElement("style");
+            styleNode.textContent = style;
+            shadowRoot.appendChild(styleNode);
         }
-        this.$watchers?.clear();
-        this.$listeners = null;
-        this.$watchers = null;
-        this.trigger = noneTrigger;
+        $element.append = shadowRoot.append.bind(shadowRoot);
+        $element.appendChild = shadowRoot.appendChild.bind(shadowRoot);
+        shadowRoot.append(...children);
+
+        return this;
     };
 
-    /**
-     * Registers a cleanup callback that will be executed when the observable is cleaned up.
-     * Useful for disposing resources, removing event listeners, or other cleanup tasks.
-     *
-     * @param {Function} callback - Cleanup function to execute on observable disposal
-     * @example
-     * const obs = Observable(0);
-     * obs.onCleanup(() => console.log('Cleaned up!'));
-     * obs.cleanup(); // Logs: "Cleaned up!"
-     */
-    ObservableItem.prototype.onCleanup = function(callback) {
-        this.$cleanupListeners = this.$cleanupListeners ?? [];
-        this.$cleanupListeners.push(callback);
+    NDElement.prototype.openShadow = function(style = null) {
+        return this.shadow('open', style);
     };
 
-    ObservableItem.prototype.cleanup = function() {
-        if (this.$cleanupListeners) {
-            for (let i = 0; i < this.$cleanupListeners.length; i++) {
-                this.$cleanupListeners[i]();
-            }
-            this.$cleanupListeners = null;
-        }
-        MemoryManager.unregister(this.$memoryId);
-        this.disconnectAll();
-        delete this.$value;
+    NDElement.prototype.closedShadow = function(style = null) {
+        return this.shadow('closed', style);
     };
 
     /**
+     * Attaches a template binding to the element by hydrating it with the specified method.
      *
-     * @param {Function} callback
-     * @returns {(function(): void)}
+     * @param {string} methodName - Name of the hydration method to call
+     * @param {BindingHydrator} bindingHydrator - Template binding with $hydrate method
+     * @returns {HTMLElement} The underlying HTML element
+     * @example
+     * const onClick = $binder.attach((event, data) => console.log(data));
+     * element.nd.attach('onClick', onClick);
      */
-    ObservableItem.prototype.subscribe = function(callback) {
-        this.$listeners = this.$listeners ?? [];
-
-        this.$listeners.push(callback);
-        this.assocTrigger();
+    NDElement.prototype.attach = function(methodName, bindingHydrator) {
+        bindingHydrator.$hydrate(this.$element, methodName);
+        return this.$element;
     };
 
     /**
-     * Watches for a specific value and executes callback when the observable equals that value.
-     * Creates a watcher that only triggers when the observable changes to the specified value.
+     * Extends the current NDElement instance with custom methods.
+     * Methods are bound to the instance and available for chaining.
      *
-     * @param {*} value - The value to watch for
-     * @param {(value) => void|ObservableItem} callback - Callback function or observable to set when value matches
+     * @param {Object} methods - Object containing method definitions
+     * @returns {this} The NDElement instance with added methods for chaining
      * @example
-     * const status = Observable('idle');
-     * status.on('loading', () => console.log('Started loading'));
-     * status.on('error', isError); // Set another observable
+     * element.nd.with({
+     *   highlight() {
+     *     this.$element.style.background = 'yellow';
+     *     return this;
+     *   }
+     * }).highlight().onClick(() => console.log('Clicked'));
      */
-    ObservableItem.prototype.on = function(value, callback) {
-        this.$watchers = this.$watchers ?? new Map();
+    NDElement.prototype.with = function(methods) {
+        if (!methods || typeof methods !== 'object') {
+            throw new NativeDocumentError('extend() requires an object of methods');
+        }
 
-        let watchValueList = this.$watchers.get(value);
+        for (const name in methods) {
+            const method = methods[name];
 
-        if(callback.__$isObservable) {
-            callback = callback.set.bind(callback);
-        }
+            if (typeof method !== 'function') {
+                console.warn(`⚠️ extends(): "${name}" is not a function, skipping`);
+                continue;
+            }
 
-        if(!watchValueList) {
-            watchValueList = callback;
-            this.$watchers.set(value, callback);
-        } else if(!Validator.isArray(watchValueList.list)) {
-            watchValueList = [watchValueList, callback];
-            callback = (value) => {
-                for(let i = 0, length = watchValueList.length; i < length; i++) {
-                    watchValueList[i](value);
-                }
-            };
-            callback.list = watchValueList;
-            this.$watchers.set(value, callback);
-        } else {
-            watchValueList.list.push(callback);
+            this[name] = method.bind(this);
         }
 
-        this.assocTrigger();
+        return this;
     };
 
     /**
-     * Removes a watcher for a specific value. If no callback is provided, removes all watchers for that value.
+     * Extends the NDElement prototype with new methods available to all NDElement instances.
+     * Use this to add global methods to all NDElements.
      *
-     * @param {*} value - The value to stop watching
-     * @param {Function} [callback] - Specific callback to remove. If omitted, removes all watchers for this value
+     * @param {Object} methods - Object containing method definitions to add to prototype
+     * @returns {typeof NDElement} The NDElement constructor
+     * @throws {NativeDocumentError} If methods is not an object or contains non-function values
      * @example
-     * const status = Observable('idle');
-     * const handler = () => console.log('Loading');
-     * status.on('loading', handler);
-     * status.off('loading', handler); // Remove specific handler
-     * status.off('loading'); // Remove all handlers for 'loading'
+     * NDElement.extend({
+     *   fadeIn() {
+     *     this.$element.style.opacity = '1';
+     *     return this;
+     *   }
+     * });
+     * // Now all NDElements have .fadeIn() method
+     * Div().nd.fadeIn();
      */
-    ObservableItem.prototype.off = function(value, callback) {
-        if(!this.$watchers) return;
-
-        const watchValueList = this.$watchers.get(value);
-        if(!watchValueList) return;
-
-        if(!callback || !Array.isArray(watchValueList.list)) {
-            this.$watchers?.delete(value);
-            this.assocTrigger();
-            return;
-        }
-        const index = watchValueList.indexOf(callback);
-        watchValueList?.splice(index, 1);
-        if(watchValueList.length === 1) {
-            this.$watchers.set(value, watchValueList[0]);
+    NDElement.extend = function(methods) {
+        if (!methods || typeof methods !== 'object') {
+            throw new NativeDocumentError('NDElement.extend() requires an object of methods');
         }
-        else if(watchValueList.length === 0) {
-            this.$watchers?.delete(value);
+
+        if (Array.isArray(methods)) {
+            throw new NativeDocumentError('NDElement.extend() requires an object, not an array');
         }
-        this.assocTrigger();
-    };
 
-    /**
-     * Subscribes to the observable but automatically unsubscribes after the first time the predicate matches.
-     *
-     * @param {(value) => Boolean|any} predicate - Value to match or function that returns true when condition is met
-     * @param {(value) => void} callback - Callback to execute when predicate matches, receives the matched value
-     * @example
-     * const status = Observable('loading');
-     * status.once('ready', (val) => console.log('Ready!'));
-     * status.once(val => val === 'error', (val) => console.log('Error occurred'));
-     */
-    ObservableItem.prototype.once = function(predicate, callback) {
-        const fn = typeof predicate === 'function' ? predicate : (v) => v === predicate;
+        const protectedMethods = new Set([
+            'constructor', 'valueOf', '$element', '$observer',
+            'ref', 'remove', 'cleanup', 'with', 'extend', 'attach',
+            'lifecycle', 'mounted', 'unmounted', 'unmountChildren'
+        ]);
 
-        const handler = (val) => {
-            if (fn(val)) {
-                this.unsubscribe(handler);
-                callback(val);
+        for (const name in methods) {
+            if (!Object.hasOwn(methods, name)) {
+                continue;
             }
-        };
-        this.subscribe(handler);
-    };
 
-    /**
-     * Unsubscribe from an observable.
-     * @param {Function} callback
-     */
-    ObservableItem.prototype.unsubscribe = function(callback) {
-        if(!this.$listeners) return;
-        const index = this.$listeners.indexOf(callback);
-        if (index > -1) {
-            this.$listeners.splice(index, 1);
-        }
-        this.assocTrigger();
-    };
+            const method = methods[name];
 
-    /**
-     * Create an Observable checker instance
-     * @param callback
-     * @returns {ObservableChecker}
-     */
-    ObservableItem.prototype.check = function(callback) {
-        return new ObservableChecker(this, callback)
-    };
+            if (typeof method !== 'function') {
+                DebugManager.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+                continue;
+            }
 
-    /**
-     * Gets a property value from the observable's current value.
-     * If the property is an observable, returns its value.
-     *
-     * @param {string|number} key - Property key to retrieve
-     * @returns {*} The value of the property, unwrapped if it's an observable
-     * @example
-     * const user = Observable({ name: 'John', age: Observable(25) });
-     * user.get('name'); // 'John'
-     * user.get('age'); // 25 (unwrapped from observable)
-     */
-    ObservableItem.prototype.get = function(key) {
-        const item = this.$currentValue[key];
-        return Validator.isObservable(item) ? item.val() : item;
-    };
+            if (protectedMethods.has(name)) {
+                DebugManager.error('NDElement.extend', `Cannot override protected method "${name}"`);
+                throw new NativeDocumentError(`Cannot override protected method "${name}"`);
+            }
 
-    /**
-     * Creates an ObservableWhen that represents whether the observable equals a specific value.
-     * Returns an object that can be subscribed to and will emit true/false.
-     *
-     * @param {*} value - The value to compare against
-     * @returns {ObservableWhen} An ObservableWhen instance that tracks when the observable equals the value
-     * @example
-     * const status = Observable('idle');
-     * const isLoading = status.when('loading');
-     * isLoading.subscribe(active => console.log('Loading:', active));
-     * status.set('loading'); // Logs: "Loading: true"
-     */
-    ObservableItem.prototype.when = function(value) {
-        return new ObservableWhen(this, value);
-    };
+            if (NDElement.prototype[name]) {
+                DebugManager.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+            }
 
-    /**
-     * Compares the observable's current value with another value or observable.
-     *
-     * @param {*|ObservableItem} other - Value or observable to compare against
-     * @returns {boolean} True if values are equal
-     * @example
-     * const a = Observable(5);
-     * const b = Observable(5);
-     * a.equals(5);  // true
-     * a.equals(b);  // true
-     * a.equals(10); // false
-     */
-    ObservableItem.prototype.equals = function(other) {
-        if(Validator.isObservable(other)) {
-            return this.$currentValue === other.$currentValue;
+            NDElement.prototype[name] = method;
         }
-        return this.$currentValue === other;
-    };
-
-    /**
-     * Converts the observable's current value to a boolean.
-     *
-     * @returns {boolean} The boolean representation of the current value
-     * @example
-     * const count = Observable(0);
-     * count.toBool(); // false
-     * count.set(5);
-     * count.toBool(); // true
-     */
-    ObservableItem.prototype.toBool = function() {
-        return !!this.$currentValue;
-    };
 
-    /**
-     * Toggles the boolean value of the observable (false becomes true, true becomes false).
-     *
-     * @example
-     * const isOpen = Observable(false);
-     * isOpen.toggle(); // Now true
-     * isOpen.toggle(); // Now false
-     */
-    ObservableItem.prototype.toggle = function() {
-        this.set(!this.$currentValue);
+        return NDElement;
     };
 
-    /**
-     * Resets the observable to its initial value.
-     * Only works if the observable was created with { reset: true } config.
-     *
-     * @example
-     * const count = Observable(0, { reset: true });
-     * count.set(10);
-     * count.reset(); // Back to 0
-     */
-    ObservableItem.prototype.reset = function() {
-        if(!this.configs?.reset) {
-            return;
-        }
-        const resetValue = (Validator.isObject(this.$initialValue))
-            ? deepClone(this.$initialValue, (observable) => {
-                observable.reset();
-            })
-            : this.$initialValue;
-        this.set(resetValue);
+    const COMMON_NODE_TYPES = {
+        ELEMENT: 1,
+        TEXT: 3,
+        COMMENT: 8,
+        DOCUMENT_FRAGMENT: 11
     };
 
-    /**
-     * Returns a string representation of the observable's current value.
-     *
-     * @returns {string} String representation of the current value
-     */
-    ObservableItem.prototype.toString = function() {
-        return String(this.$currentValue);
-    };
-
-    /**
-     * Returns the primitive value of the observable (its current value).
-     * Called automatically in type coercion contexts.
-     *
-     * @returns {*} The current value of the observable
-     */
-    ObservableItem.prototype.valueOf = function() {
-        return this.$currentValue;
-    };
-
-    const DocumentObserver = {
-        mounted: new WeakMap(),
-        mountedSupposedSize: 0,
-        unmounted: new WeakMap(),
-        unmountedSupposedSize: 0,
-        observer: null,
-        executeMountedCallback(node) {
-            const data = DocumentObserver.mounted.get(node);
-            if(!data) {
-                return;
+    const Validator = {
+        isObservable(value) {
+            return  value?.__$isObservable;
+        },
+        isTemplateBinding(value) {
+            return  value?.__$isTemplateBinding;
+        },
+        isObservableWhenResult(value) {
+            return value && (value.__$isObservableWhen || (typeof value === 'object' && '$target' in value && '$observer' in value));
+        },
+        isArrayObservable(value) {
+            return  value?.__$isObservableArray;
+        },
+        isProxy(value) {
+            return value?.__isProxy__
+        },
+        isObservableOrProxy(value) {
+            return Validator.isObservable(value) || Validator.isProxy(value);
+        },
+        isAnchor(value) {
+            return value?.__Anchor__
+        },
+        isObservableChecker(value) {
+            return value?.__$isObservableChecker || value instanceof ObservableChecker;
+        },
+        isArray(value) {
+            return Array.isArray(value);
+        },
+        isString(value) {
+            return typeof value === 'string';
+        },
+        isNumber(value) {
+            return typeof value === 'number';
+        },
+        isBoolean(value) {
+            return typeof value === 'boolean';
+        },
+        isFunction(value) {
+            return typeof value === 'function';
+        },
+        isAsyncFunction(value) {
+            return typeof value === 'function' && value.constructor.name === 'AsyncFunction';
+        },
+        isObject(value) {
+            return typeof value === 'object' && value !== null;
+        },
+        isJson(value) {
+            return !(typeof value !== 'object' || value === null || Array.isArray(value) || value.constructor.name !== 'Object')
+        },
+        isElement(value) {
+            return value && (
+                value.nodeType === COMMON_NODE_TYPES.ELEMENT ||
+                value.nodeType === COMMON_NODE_TYPES.TEXT ||
+                value.nodeType === COMMON_NODE_TYPES.DOCUMENT_FRAGMENT ||
+                value.nodeType === COMMON_NODE_TYPES.COMMENT
+            );
+        },
+        isFragment(value) {
+            return value?.nodeType === COMMON_NODE_TYPES.DOCUMENT_FRAGMENT;
+        },
+        isStringOrObservable(value) {
+            return this.isString(value) || this.isObservable(value);
+        },
+        isValidChild(child) {
+            return child === null ||
+                this.isElement(child) ||
+                this.isObservable(child) ||
+                this.isNDElement(child) ||
+                ['string', 'number', 'boolean'].includes(typeof child);
+        },
+        isNDElement(child) {
+            return child?.__$isNDElement || child instanceof NDElement;
+        },
+        isValidChildren(children) {
+            if (!Array.isArray(children)) {
+                children = [children];
             }
-            data.inDom = true;
-            data.mounted && data.mounted(node);
+
+            const invalid = children.filter(child => !this.isValidChild(child));
+            return invalid.length === 0;
         },
-        executeUnmountedCallback(node) {
-            const data = DocumentObserver.unmounted.get(node);
-            if(!data) {
-                return;
+        validateChildren(children) {
+            if (!Array.isArray(children)) {
+                children = [children];
             }
 
-            data.inDom = false;
-            if(data.unmounted && data.unmounted(node) === true) {
-                data.disconnect();
-                node.nd?.remove();
+            const invalid = children.filter(child => !this.isValidChild(child));
+            if (invalid.length > 0) {
+                throw new NativeDocumentError(`Invalid children detected: ${invalid.map(i => typeof i).join(', ')}`);
             }
-        },
-        checkMutation: function(mutationsList) {
-            for(const mutation of mutationsList) {
-                if(DocumentObserver.mountedSupposedSize > 0 ) {
-                    for(const node of mutation.addedNodes) {
-                        DocumentObserver.executeMountedCallback(node);
-                        if(!node.querySelectorAll) {
-                            return;
-                        }
-                        const children = node.querySelectorAll('[data--nd-mounted]');
-                        if(!children.length) {
-                            return;
-                        }
-                        for(const node of children) {
-                            DocumentObserver.executeMountedCallback(node);
-                        }
-                    }
-                }
 
-                if(DocumentObserver.unmountedSupposedSize > 0 ) {
-                    for(const node of mutation.removedNodes) {
-                        DocumentObserver.executeUnmountedCallback(node);
-                        if(!node.querySelectorAll) {
-                            return;
-                        }
-                        const children = node.querySelectorAll('[data--nd-unmounted]');
-                        if(!children.length) {
-                            return;
-                        }
-                        for(const node of children) {
-                            DocumentObserver.executeUnmountedCallback(node);
-                        }
-                    }
-                }
+            return children;
+        },
+        /**
+         * Check if the data contains observables.
+         * @param {Array|Object} data
+         * @returns {boolean}
+         */
+        containsObservables(data) {
+            if(!data) {
+                return false;
             }
+            return Validator.isObject(data)
+                && Object.values(data).some(value => Validator.isObservable(value));
         },
         /**
-         *
-         * @param {HTMLElement} element
-         * @param {boolean} inDom
-         * @returns {{watch: (function(): Map<any, any>), disconnect: (function(): boolean), mounted: (function(*): Set<any>), unmounted: (function(*): Set<any>)}}
+         * Check if the data contains an observable reference.
+         * @param {string} data
+         * @returns {boolean}
          */
-        watch: function(element, inDom = false) {
-            let data = {
-                inDom,
-                mounted: null,
-                unmounted: null,
-                disconnect: () => {
-                    DocumentObserver.mounted.delete(element);
-                    DocumentObserver.unmounted.delete(element);
-                    DocumentObserver.mountedSupposedSize--;
-                    DocumentObserver.unmountedSupposedSize--;
-                    data = null;
-                }
-            };
+        containsObservableReference(data) {
+            if(!data || typeof data !== 'string') {
+                return false;
+            }
+            return /\{\{#ObItem::\([0-9]+\)\}\}/.test(data);
+        },
+        validateAttributes(attributes) {},
 
-            return {
-                disconnect: data.disconnect,
-                mounted: (callback) => {
-                    data.mounted = callback;
-                    DocumentObserver.mounted.set(element, data);
-                    DocumentObserver.mountedSupposedSize++;
-                },
-                unmounted: (callback) => {
-                    data.unmounted = callback;
-                    DocumentObserver.unmounted.set(element, data);
-                    DocumentObserver.unmountedSupposedSize++;
-                }
-            };
+        validateEventCallback(callback) {
+            if (typeof callback !== 'function') {
+                throw new NativeDocumentError('Event callback must be a function');
+            }
         }
     };
 
-    DocumentObserver.observer = new MutationObserver(DocumentObserver.checkMutation);
-    DocumentObserver.observer.observe(document.body, {
-        childList: true,
-        subtree: true,
-    });
-
-    function NDElement(element) {
-        this.$element = element;
-        this.$observer = null;
-    }
+    function Anchor(name, isUniqueChild = false) {
+        const anchorFragment = document.createDocumentFragment();
+        anchorFragment.__Anchor__ = true;
 
-    NDElement.prototype.__$isNDElement = true;
+        const anchorStart = document.createComment('Anchor Start : '+name);
+        const anchorEnd = document.createComment('/ Anchor End '+name);
 
-    NDElement.prototype.valueOf = function() {
-        return this.$element;
-    };
+        anchorFragment.appendChild(anchorStart);
+        anchorFragment.appendChild(anchorEnd);
 
-    NDElement.prototype.ref = function(target, name) {
-        target[name] = this.$element;
-        return this;
-    };
+        anchorFragment.nativeInsertBefore = anchorFragment.insertBefore;
+        anchorFragment.nativeAppendChild = anchorFragment.appendChild;
+        anchorFragment.nativeAppend = anchorFragment.append;
 
-    NDElement.prototype.refSelf = function(target, name) {
-        target[name] = this;
-        return this;
-    };
+        const isParentUniqueChild = (parent) => (isUniqueChild || (parent.firstChild === anchorStart && parent.lastChild === anchorEnd));
 
-    NDElement.prototype.unmountChildren = function() {
-        let element = this.$element;
-        for(let i = 0, length = element.children.length; i < length; i++) {
-            let elementChildren = element.children[i];
-            if(!elementChildren.$ndProx) {
-                elementChildren.nd?.remove();
+        const insertBefore = function(parent, child, target) {
+            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            if(parent === anchorFragment) {
+                parent.nativeInsertBefore(childElement, target);
+                return;
             }
-            elementChildren = null;
-        }
-        element = null;
-        return this;
-    };
+            if(isParentUniqueChild(parent) && target === anchorEnd) {
+                parent.append(childElement,  target);
+                return;
+            }
+            parent.insertBefore(childElement, target);
+        };
 
-    NDElement.prototype.remove = function() {
-        let element = this.$element;
-        element.nd.unmountChildren();
-        element.$ndProx = null;
-        delete element.nd?.on?.prevent;
-        delete element.nd?.on;
-        delete element.nd;
-        element = null;
-        return this;
-    };
+        anchorFragment.appendElement = function(child, before = null) {
+            const parentNode = anchorStart.parentNode;
+            const targetBefore = before || anchorEnd;
+            if(parentNode === anchorFragment) {
+                parentNode.nativeInsertBefore(child, targetBefore);
+                return;
+            }
+            parentNode?.insertBefore(child, targetBefore);
+        };
 
-    NDElement.prototype.lifecycle = function(states) {
-        this.$observer = this.$observer || DocumentObserver.watch(this.$element);
+        anchorFragment.appendChild = function(child, before = null) {
+            const parent = anchorEnd.parentNode;
+            if(!parent) {
+                DebugManager.error('Anchor', 'Anchor : parent not found', child);
+                return;
+            }
+            before = before ?? anchorEnd;
+            insertBefore(parent, child, before);
+        };
 
-        if(states.mounted) {
-            this.$element.setAttribute('data--nd-mounted', '1');
-            this.$observer.mounted(states.mounted);
-        }
-        if(states.unmounted) {
-            this.$element.setAttribute('data--nd-unmounted', '1');
-            this.$observer.unmounted(states.unmounted);
-        }
-        return this;
-    };
+        anchorFragment.append = function(...args ) {
+            return anchorFragment.appendChild(args);
+        };
 
-    NDElement.prototype.mounted = function(callback) {
-        return this.lifecycle({ mounted: callback });
-    };
+        anchorFragment.removeChildren = async function() {
+            const parent = anchorEnd.parentNode;
+            if(parent === anchorFragment) {
+                return;
+            }
+            // if(isParentUniqueChild(parent)) {
+            //     parent.replaceChildren(anchorStart, anchorEnd);
+            //     return;
+            // }
 
-    NDElement.prototype.unmounted = function(callback) {
-        return this.lifecycle({ unmounted: callback });
-    };
+            let itemToRemove = anchorStart.nextSibling, tempItem;
+            const removes = [];
+            while(itemToRemove && itemToRemove !== anchorEnd) {
+                tempItem = itemToRemove.nextSibling;
+                removes.push(itemToRemove.remove());
+                itemToRemove =  tempItem;
+            }
+            await Promise.all(removes);
+        };
 
-    NDElement.prototype.htmlElement = function() {
-        return this.$element;
-    };
+        anchorFragment.remove = async function() {
+            const parent = anchorEnd.parentNode;
+            if(parent === anchorFragment) {
+                return;
+            }
+            let itemToRemove = anchorStart.nextSibling, tempItem;
+            const allItemToRemove = [];
+            const removes = [];
+            while(itemToRemove && itemToRemove !== anchorEnd) {
+                tempItem = itemToRemove.nextSibling;
+                allItemToRemove.push(itemToRemove);
+                removes.push(itemToRemove.remove());
+                itemToRemove = tempItem;
+            }
+            await Promise.all(removes);
+            anchorFragment.nativeAppend(...allItemToRemove);
+        };
 
-    NDElement.prototype.node = NDElement.prototype.htmlElement;
+        anchorFragment.removeWithAnchors = async function() {
+            await anchorFragment.removeChildren();
+            anchorStart.remove();
+            anchorEnd.remove();
+        };
 
-    NDElement.prototype.shadow = function(mode, style = null) {
-        const $element = this.$element;
-        const children = Array.from($element.childNodes);
-        const shadowRoot = $element.attachShadow({ mode });
-        if(style) {
-            const styleNode = document.createElement("style");
-            styleNode.textContent = style;
-            shadowRoot.appendChild(styleNode);
-        }
-        $element.append = shadowRoot.append.bind(shadowRoot);
-        $element.appendChild = shadowRoot.appendChild.bind(shadowRoot);
-        shadowRoot.append(...children);
+        anchorFragment.replaceContent = async function(child) {
+            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            const parent = anchorEnd.parentNode;
+            if(!parent) {
+                return;
+            }
+            // if(isParentUniqueChild(parent)) {
+            //     parent.replaceChildren(anchorStart, childElement, anchorEnd);
+            //     return;
+            // }
+            await anchorFragment.removeChildren();
+            parent.insertBefore(childElement, anchorEnd);
+        };
 
-        return this;
-    };
+        anchorFragment.setContent = anchorFragment.replaceContent;
 
-    NDElement.prototype.openShadow = function(style = null) {
-        return this.shadow('open', style);
-    };
+        anchorFragment.insertBefore = function(child, anchor = null) {
+            anchorFragment.appendChild(child, anchor);
+        };
 
-    NDElement.prototype.closedShadow = function(style = null) {
-        return this.shadow('closed', style);
-    };
+
+        anchorFragment.endElement = function() {
+            return anchorEnd;
+        };
+
+        anchorFragment.startElement = function() {
+            return anchorStart;
+        };
+        anchorFragment.restore = function() {
+            anchorFragment.appendChild(anchorFragment);
+        };
+        anchorFragment.clear = anchorFragment.remove;
+        anchorFragment.detach = anchorFragment.remove;
+
+        anchorFragment.getByIndex = function(index) {
+            let currentNode = anchorStart;
+            for(let i = 0; i <= index; i++) {
+                if(!currentNode.nextSibling) {
+                    return null;
+                }
+                currentNode = currentNode.nextSibling;
+            }
+            return currentNode !== anchorStart ? currentNode : null;
+        };
+
+        return anchorFragment;
+    }
+    DocumentFragment.prototype.setAttribute = () => {};
+
+    const BOOLEAN_ATTRIBUTES = new Set([
+        'checked',
+        'selected',
+        'disabled',
+        'readonly',
+        'required',
+        'autofocus',
+        'multiple',
+        'autocomplete',
+        'hidden',
+        'contenteditable',
+        'spellcheck',
+        'translate',
+        'draggable',
+        'async',
+        'defer',
+        'autoplay',
+        'controls',
+        'loop',
+        'muted',
+        'download',
+        'reversed',
+        'open',
+        'default',
+        'formnovalidate',
+        'novalidate',
+        'scoped',
+        'itemscope',
+        'allowfullscreen',
+        'allowpaymentrequest',
+        'playsinline'
+    ]);
+
+    const MemoryManager = (function() {
+
+        let $nextObserverId = 0;
+        const $observables = new Map();
+
+        return {
+            /**
+             * Register an observable and return an id.
+             *
+             * @param {ObservableItem} observable
+             * @param {Function} getListeners
+             * @returns {number}
+             */
+            register(observable) {
+                const id = ++$nextObserverId;
+                $observables.set(id, new WeakRef(observable));
+                return id;
+            },
+            unregister(id) {
+                $observables.delete(id);
+            },
+            getObservableById(id) {
+                return $observables.get(id)?.deref();
+            },
+            cleanup() {
+                for (const [_, weakObservableRef] of $observables) {
+                    const observable = weakObservableRef.deref();
+                    if (observable) {
+                        observable.cleanup();
+                    }
+                }
+                $observables.clear();
+            },
+            /**
+             * Clean observables that are not referenced anymore.
+             * @param {number} threshold
+             */
+            cleanObservables(threshold) {
+                if($observables.size < threshold) return;
+                let cleanedCount = 0;
+                for (const [id, weakObservableRef] of $observables) {
+                    if (!weakObservableRef.deref()) {
+                        $observables.delete(id);
+                        cleanedCount++;
+                    }
+                }
+                if (cleanedCount > 0) {
+                    DebugManager.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                }
+            }
+        };
+    }());
 
     /**
-     * Attaches a template binding to the element by hydrating it with the specified method.
+     * Creates an ObservableWhen that tracks whether an observable equals a specific value.
      *
-     * @param {string} methodName - Name of the hydration method to call
-     * @param {BindingHydrator} bindingHydrator - Template binding with $hydrate method
-     * @returns {HTMLElement} The underlying HTML element
-     * @example
-     * const onClick = $binder.attach((event, data) => console.log(data));
-     * element.nd.attach('onClick', onClick);
+     * @param {ObservableItem} observer - The observable to watch
+     * @param {*} value - The value to compare against
+     * @class ObservableWhen
      */
-    NDElement.prototype.attach = function(methodName, bindingHydrator) {
-        bindingHydrator.$hydrate(this.$element, methodName);
-        return this.$element;
+    const ObservableWhen = function(observer, value) {
+        this.$target = value;
+        this.$observer = observer;
     };
 
+    ObservableWhen.prototype.__$isObservableWhen = true;
+
     /**
-     * Extends the current NDElement instance with custom methods.
-     * Methods are bound to the instance and available for chaining.
+     * Subscribes to changes in the match status (true when observable equals target value).
      *
-     * @param {Object} methods - Object containing method definitions
-     * @returns {this} The NDElement instance with added methods for chaining
+     * @param {Function} callback - Function called with boolean indicating if values match
+     * @returns {Function} Unsubscribe function
      * @example
-     * element.nd.with({
-     *   highlight() {
-     *     this.$element.style.background = 'yellow';
-     *     return this;
-     *   }
-     * }).highlight().onClick(() => console.log('Clicked'));
+     * const status = Observable('idle');
+     * const isLoading = status.when('loading');
+     * isLoading.subscribe(active => console.log('Loading:', active));
      */
-    NDElement.prototype.with = function(methods) {
-        if (!methods || typeof methods !== 'object') {
-            throw new NativeDocumentError('extend() requires an object of methods');
-        }
-
-        for (const name in methods) {
-            const method = methods[name];
-
-            if (typeof method !== 'function') {
-                console.warn(`⚠️ extends(): "${name}" is not a function, skipping`);
-                continue;
-            }
-
-            this[name] = method.bind(this);
-        }
-
-        return this;
+    ObservableWhen.prototype.subscribe = function(callback) {
+        return this.$observer.on(this.$target, callback);
     };
 
     /**
-     * Extends the NDElement prototype with new methods available to all NDElement instances.
-     * Use this to add global methods to all NDElements.
+     * Returns true if the observable's current value equals the target value.
      *
-     * @param {Object} methods - Object containing method definitions to add to prototype
-     * @returns {typeof NDElement} The NDElement constructor
-     * @throws {NativeDocumentError} If methods is not an object or contains non-function values
-     * @example
-     * NDElement.extend({
-     *   fadeIn() {
-     *     this.$element.style.opacity = '1';
-     *     return this;
-     *   }
-     * });
-     * // Now all NDElements have .fadeIn() method
-     * Div().nd.fadeIn();
+     * @returns {boolean} True if observable value matches target value
      */
-    NDElement.extend = function(methods) {
-        if (!methods || typeof methods !== 'object') {
-            throw new NativeDocumentError('NDElement.extend() requires an object of methods');
-        }
+    ObservableWhen.prototype.val = function() {
+        return this.$observer.$currentValue === this.$target;
+    };
 
-        if (Array.isArray(methods)) {
-            throw new NativeDocumentError('NDElement.extend() requires an object, not an array');
-        }
+    /**
+     * Returns true if the observable's current value equals the target value.
+     * Alias for val().
+     *
+     * @returns {boolean} True if observable value matches target value
+     */
+    ObservableWhen.prototype.isMatch = ObservableWhen.prototype.val;
 
-        const protectedMethods = new Set([
-            'constructor', 'valueOf', '$element', '$observer',
-            'ref', 'remove', 'cleanup', 'with', 'extend', 'attach',
-            'lifecycle', 'mounted', 'unmounted', 'unmountChildren'
-        ]);
+    /**
+     * Returns true if the observable's current value equals the target value.
+     * Alias for val().
+     *
+     * @returns {boolean} True if observable value matches target value
+     */
+    ObservableWhen.prototype.isActive = ObservableWhen.prototype.val;
 
-        for (const name in methods) {
-            if (!methods.hasOwnProperty(name)) {
-                continue;
+    const invoke = function(fn, args, context) {
+        if(context) {
+            fn.apply(context, args);
+        } else {
+            fn(...args);
+        }
+    };
+    /**
+     *
+     * @param {Function} fn
+     * @param {number} delay
+     * @param {{leading?:Boolean, trailing?:Boolean, debounce?:Boolean, check: Function}}options
+     * @returns {(function(...[*]): void)|*}
+     */
+    const debounce = function(fn, delay, options = {}) {
+        let timer = null;
+        let lastArgs = null;
+
+        return  function(...args) {
+            const context = options.context === true ? this : null;
+            if(options.check) {
+                options.check(...args);
             }
+            lastArgs = args;
 
-            const method = methods[name];
+            // debounce mode: reset the timer for each call
+            clearTimeout(timer);
+            timer = setTimeout(() => invoke(fn, lastArgs, context), delay);
+        }
+    };
 
-            if (typeof method !== 'function') {
-                DebugManager.warn('NDElement.extend', `"${name}" is not a function, skipping`);
-                continue;
-            }
+    const nextTick = function(fn) {
+        let pending = false;
+        return function(...args) {
+            if (pending) return;
+            pending = true;
 
-            if (protectedMethods.has(name)) {
-                DebugManager.error('NDElement.extend', `Cannot override protected method "${name}"`);
-                throw new NativeDocumentError(`Cannot override protected method "${name}"`);
-            }
+            Promise.resolve().then(() => {
+                fn.apply(this, args);
+                pending = false;
+            });
+        };
+    };
 
-            if (NDElement.prototype[name]) {
-                DebugManager.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+    const deepClone = (value, onObservableFound) => {
+        try {
+            if(window.structuredClone !== undefined) {
+                return window.structuredClone(value);
             }
+        } catch (e){}
 
-            NDElement.prototype[name] = method;
+        if (value === null || typeof value !== 'object') {
+            return value;
         }
 
-        return NDElement;
-    };
+        // Dates
+        if (value instanceof Date) {
+            return new Date(value.getTime());
+        }
 
-    const COMMON_NODE_TYPES = {
-        ELEMENT: 1,
-        TEXT: 3,
-        COMMENT: 8,
-        DOCUMENT_FRAGMENT: 11
+        // Arrays
+        if (Array.isArray(value)) {
+            return value.map(item => deepClone(item));
+        }
+
+        // Observables - keep the référence
+        if (Validator.isObservable(value)) {
+            onObservableFound && onObservableFound(value);
+            return value;
+        }
+
+        // Objects
+        const cloned = {};
+        for (const key in value) {
+            if (Object.hasOwn(value, key)) {
+                cloned[key] = deepClone(value[key]);
+            }
+        }
+        return cloned;
     };
 
-    const Validator = {
-        isObservable(value) {
-            return  value?.__$isObservable;
-        },
-        isTemplateBinding(value) {
-            return  value?.__$isTemplateBinding;
-        },
-        isObservableWhenResult(value) {
-            return value && (value.__$isObservableWhen || (typeof value === 'object' && '$target' in value && '$observer' in value));
-        },
-        isArrayObservable(value) {
-            return  value?.__$isObservableArray;
-        },
-        isProxy(value) {
-            return value?.__isProxy__
-        },
-        isObservableOrProxy(value) {
-            return Validator.isObservable(value) || Validator.isProxy(value);
-        },
-        isAnchor(value) {
-            return value?.__Anchor__
-        },
-        isObservableChecker(value) {
-            return value?.__$isObservableChecker || value instanceof ObservableChecker;
-        },
-        isArray(value) {
-            return Array.isArray(value);
-        },
-        isString(value) {
-            return typeof value === 'string';
-        },
-        isNumber(value) {
-            return typeof value === 'number';
-        },
-        isBoolean(value) {
-            return typeof value === 'boolean';
-        },
-        isFunction(value) {
-            return typeof value === 'function';
-        },
-        isAsyncFunction(value) {
-            return typeof value === 'function' && value.constructor.name === 'AsyncFunction';
+    const LocalStorage$1 = {
+        getJson(key) {
+            let value = localStorage.getItem(key);
+            try {
+                return JSON.parse(value);
+            } catch (e) {
+                throw new NativeDocumentError('invalid_json:'+key);
+            }
         },
-        isObject(value) {
-            return typeof value === 'object' && value !== null;
+        getNumber(key) {
+            return Number(this.get(key));
         },
-        isJson(value) {
-            return !(typeof value !== 'object' || value === null || Array.isArray(value) || value.constructor.name !== 'Object')
+        getBool(key) {
+            const value = this.get(key);
+            return value === 'true' || value === '1';
         },
-        isElement(value) {
-            return value && (
-                value.nodeType === COMMON_NODE_TYPES.ELEMENT ||
-                value.nodeType === COMMON_NODE_TYPES.TEXT ||
-                value.nodeType === COMMON_NODE_TYPES.DOCUMENT_FRAGMENT ||
-                value.nodeType === COMMON_NODE_TYPES.COMMENT
-            );
+        setJson(key, value) {
+            localStorage.setItem(key, JSON.stringify(value));
         },
-        isFragment(value) {
-            return value?.nodeType === COMMON_NODE_TYPES.DOCUMENT_FRAGMENT;
+        setBool(key, value) {
+            localStorage.setItem(key, value ? 'true' : 'false');
         },
-        isStringOrObservable(value) {
-            return this.isString(value) || this.isObservable(value);
+        get(key, defaultValue = null) {
+            return localStorage.getItem(key) || defaultValue;
         },
-        isValidChild(child) {
-            return child === null ||
-                this.isElement(child) ||
-                this.isObservable(child) ||
-                this.isNDElement(child) ||
-                ['string', 'number', 'boolean'].includes(typeof child);
+        set(key, value) {
+            return localStorage.setItem(key, value);
         },
-        isNDElement(child) {
-            return child?.__$isNDElement || child instanceof NDElement;
+        remove(key) {
+            localStorage.removeItem(key);
         },
-        isValidChildren(children) {
-            if (!Array.isArray(children)) {
-                children = [children];
-            }
+        has(key) {
+            return localStorage.getItem(key) != null;
+        }
+    };
 
-            const invalid = children.filter(child => !this.isValidChild(child));
-            return invalid.length === 0;
-        },
-        validateChildren(children) {
-            if (!Array.isArray(children)) {
-                children = [children];
-            }
+    const $getFromStorage$1 = (key, value) => {
+        if(!LocalStorage$1.has(key)) {
+            return value;
+        }
+        switch (typeof value) {
+            case 'object': return LocalStorage$1.getJson(key) ?? value;
+            case 'boolean': return LocalStorage$1.getBool(key) ?? value;
+            case 'number': return LocalStorage$1.getNumber(key) ?? value;
+            default: return LocalStorage$1.get(key, value) ?? value;
+        }
+    };
 
-            const invalid = children.filter(child => !this.isValidChild(child));
-            if (invalid.length > 0) {
-                throw new NativeDocumentError(`Invalid children detected: ${invalid.map(i => typeof i).join(', ')}`);
-            }
+    const $saveToStorage$1 = (value) => {
+        switch (typeof value) {
+            case 'object': return LocalStorage$1.setJson;
+            case 'boolean': return LocalStorage$1.setBool;
+            default: return LocalStorage$1.set;
+        }
+    };
+
+    const StoreFactory = function() {
+
+        const $stores = new Map();
+        const $followersCache = new Map();
 
-            return children;
-        },
         /**
-         * Check if the data contains observables.
-         * @param {Array|Object} data
-         * @returns {boolean}
+         * Internal helper — retrieves a store entry or throws if not found.
          */
-        containsObservables(data) {
-            if(!data) {
-                return false;
+        const $getStoreOrThrow = (method, name) => {
+            const item = $stores.get(name);
+            if (!item) {
+                DebugManager.error('Store', `Store.${method}('${name}') : store not found. Did you call Store.create('${name}') first?`);
+                throw new NativeDocumentError(
+                    `Store.${method}('${name}') : store not found.`
+                );
             }
-            return Validator.isObject(data)
-                && Object.values(data).some(value => Validator.isObservable(value));
-        },
+            return item;
+        };
+
         /**
-         * Check if the data contains an observable reference.
-         * @param {string} data
-         * @returns {boolean}
+         * Internal helper — blocks write operations on a read-only observer.
          */
-        containsObservableReference(data) {
-            if(!data || typeof data !== 'string') {
-                return false;
-            }
-            return /\{\{#ObItem::\([0-9]+\)\}\}/.test(data);
-        },
-        validateAttributes(attributes) {},
+        const $applyReadOnly = (observer, name, context) => {
+            const readOnlyError = (method) => () => {
+                DebugManager.error('Store', `Store.${context}('${name}') is read-only. '${method}()' is not allowed.`);
+                throw new NativeDocumentError(
+                    `Store.${context}('${name}') is read-only.`
+                );
+            };
+            observer.set    = readOnlyError('set');
+            observer.toggle = readOnlyError('toggle');
+            observer.reset  = readOnlyError('reset');
+        };
 
-        validateEventCallback(callback) {
-            if (typeof callback !== 'function') {
-                throw new NativeDocumentError('Event callback must be a function');
+        const $createObservable = (value, options = {}) => {
+            if(Array.isArray(value)) {
+                return Observable$1.array(value, options);
             }
-        }
-    };
+            if(typeof value === 'object') {
+                return Observable$1.object(value, options);
+            }
+            return Observable$1(value, options);
+        };
 
-    function Anchor(name, isUniqueChild = false) {
-        const anchorFragment = document.createDocumentFragment();
-        anchorFragment.__Anchor__ = true;
+        const $api = {
+            /**
+             * Create a new state and return the observer.
+             * Throws if a store with the same name already exists.
+             *
+             * @param {string} name
+             * @param {*} value
+             * @returns {ObservableItem}
+             */
+            create(name, value) {
+                if ($stores.has(name)) {
+                    DebugManager.warn('Store', `Store.create('${name}') : a store with this name already exists. Use Store.get('${name}') to retrieve it.`);
+                    throw new NativeDocumentError(
+                        `Store.create('${name}') : a store with this name already exists.`
+                    );
+                }
+                const observer = $createObservable(value);
+                $stores.set(name, { observer, subscribers: new Set(), resettable: false, composed: false });
+                return observer;
+            },
 
-        const anchorStart = document.createComment('Anchor Start : '+name);
-        const anchorEnd = document.createComment('/ Anchor End '+name);
+            /**
+             * Create a new resettable state and return the observer.
+             * The store can be reset to its initial value via Store.reset(name).
+             * Throws if a store with the same name already exists.
+             *
+             * @param {string} name
+             * @param {*} value
+             * @returns {ObservableItem}
+             */
+            createResettable(name, value) {
+                if ($stores.has(name)) {
+                    DebugManager.warn('Store', `Store.createResettable('${name}') : a store with this name already exists.`);
+                    throw new NativeDocumentError(
+                        `Store.createResettable('${name}') : a store with this name already exists.`
+                    );
+                }
+                const observer = $createObservable(value, { reset: true });
+                $stores.set(name, { observer, subscribers: new Set(), resettable: true, composed: false });
+                return observer;
+            },
 
-        anchorFragment.appendChild(anchorStart);
-        anchorFragment.appendChild(anchorEnd);
+            /**
+             * Create a computed store derived from other stores.
+             * The value is automatically recalculated when any dependency changes.
+             * This store is read-only — Store.use() and Store.set() will throw.
+             * Throws if a store with the same name already exists.
+             *
+             * @param {string} name
+             * @param {() => *} computation - Function that returns the computed value
+             * @param {string[]} dependencies - Names of the stores to watch
+             * @returns {ObservableItem}
+             *
+             * @example
+             * Store.create('products', [{ id: 1, price: 10 }]);
+             * Store.create('cart', [{ productId: 1, quantity: 2 }]);
+             *
+             * Store.createComposed('total', () => {
+             *     const products = Store.get('products').val();
+             *     const cart     = Store.get('cart').val();
+             *     return cart.reduce((sum, item) => {
+             *         const product = products.find(p => p.id === item.productId);
+             *         return sum + (product.price * item.quantity);
+             *     }, 0);
+             * }, ['products', 'cart']);
+             */
+            createComposed(name, computation, dependencies) {
+                if ($stores.has(name)) {
+                    DebugManager.warn('Store', `Store.createComposed('${name}') : a store with this name already exists.`);
+                    throw new NativeDocumentError(
+                        `Store.createComposed('${name}') : a store with this name already exists.`
+                    );
+                }
+                if (typeof computation !== 'function') {
+                    throw new NativeDocumentError(
+                        `Store.createComposed('${name}') : computation must be a function.`
+                    );
+                }
+                if (!Array.isArray(dependencies) || dependencies.length === 0) {
+                    throw new NativeDocumentError(
+                        `Store.createComposed('${name}') : dependencies must be a non-empty array of store names.`
+                    );
+                }
 
-        anchorFragment.nativeInsertBefore = anchorFragment.insertBefore;
-        anchorFragment.nativeAppendChild = anchorFragment.appendChild;
+                // Resolve dependency observers
+                const depObservers = dependencies.map(depName => {
+                    if(typeof depName !== 'string') {
+                        return depName;
+                    }
+                    const depItem = $stores.get(depName);
+                    if (!depItem) {
+                        DebugManager.error('Store', `Store.createComposed('${name}') : dependency '${depName}' not found. Create it first.`);
+                        throw new NativeDocumentError(
+                            `Store.createComposed('${name}') : dependency store '${depName}' not found.`
+                        );
+                    }
+                    return depItem.observer;
+                });
 
-        const isParentUniqueChild = (parent) => (isUniqueChild || (parent.firstChild === anchorStart && parent.lastChild === anchorEnd));
+                // Create computed observable from dependency observers
+                const observer = Observable$1.computed(computation, depObservers);
 
-        const insertBefore = function(parent, child, target) {
-            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
-            if(parent === anchorFragment) {
-                parent.nativeInsertBefore(childElement, target);
-                return;
-            }
-            if(isParentUniqueChild(parent) && target === anchorEnd) {
-                parent.append(childElement,  target);
-                return;
-            }
-            parent.insertBefore(childElement, target);
-        };
+                $stores.set(name, { observer, subscribers: new Set(), resettable: false, composed: true });
+                return observer;
+            },
 
-        anchorFragment.appendElement = function(child, before = null) {
-            const parentNode = anchorStart.parentNode;
-            const targetBefore = before || anchorEnd;
-            if(parentNode === anchorFragment) {
-                parentNode.nativeInsertBefore(child, targetBefore);
-                return;
+            /**
+             * Returns true if a store with the given name exists.
+             *
+             * @param {string} name
+             * @returns {boolean}
+             */
+            has(name) {
+                return $stores.has(name);
+            },
+
+            /**
+             * Resets a resettable store to its initial value and notifies all subscribers.
+             * Throws if the store was not created with createResettable().
+             *
+             * @param {string} name
+             */
+            reset(name) {
+                const item = $getStoreOrThrow('reset', name);
+                if (item.composed) {
+                    DebugManager.error('Store', `Store.reset('${name}') : composed stores cannot be reset. Their value is derived from dependencies.`);
+                    throw new NativeDocumentError(
+                        `Store.reset('${name}') : composed stores cannot be reset.`
+                    );
+                }
+                if (!item.resettable) {
+                    DebugManager.error('Store', `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`);
+                    throw new NativeDocumentError(
+                        `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`
+                    );
+                }
+                item.observer.reset();
+            },
+
+            /**
+             * Returns a two-way synchronized follower of the store.
+             * Writing to the follower propagates the value back to the store and all its subscribers.
+             * Throws if called on a composed store — use Store.follow() instead.
+             * Call follower.destroy() or follower.dispose() to unsubscribe.
+             *
+             * @param {string} name
+             * @returns {ObservableItem}
+             */
+            use(name) {
+                const item = $getStoreOrThrow('use', name);
+
+                if (item.composed) {
+                    DebugManager.error('Store', `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`);
+                    throw new NativeDocumentError(
+                        `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`
+                    );
+                }
+
+                const { observer: originalObserver, subscribers } = item;
+                const observerFollower = $createObservable(originalObserver.val());
+
+                const onStoreChange    = value => observerFollower.set(value);
+                const onFollowerChange = value => originalObserver.set(value);
+
+                originalObserver.subscribe(onStoreChange);
+                observerFollower.subscribe(onFollowerChange);
+
+                observerFollower.destroy = () => {
+                    originalObserver.unsubscribe(onStoreChange);
+                    observerFollower.unsubscribe(onFollowerChange);
+                    subscribers.delete(observerFollower);
+                    observerFollower.cleanup();
+                };
+                observerFollower.dispose = observerFollower.destroy;
+
+                subscribers.add(observerFollower);
+                return observerFollower;
+            },
+
+            /**
+             * Returns a read-only follower of the store.
+             * The follower reflects store changes but cannot write back to the store.
+             * Any attempt to call .set(), .toggle() or .reset() will throw.
+             * Call follower.destroy() or follower.dispose() to unsubscribe.
+             *
+             * @param {string} name
+             * @returns {ObservableItem}
+             */
+            follow(name) {
+                const { observer: originalObserver, subscribers } = $getStoreOrThrow('follow', name);
+                const observerFollower = $createObservable(originalObserver.val());
+
+                const onStoreChange = value => observerFollower.set(value);
+                originalObserver.subscribe(onStoreChange);
+
+                $applyReadOnly(observerFollower, name, 'follow');
+
+                observerFollower.destroy = () => {
+                    originalObserver.unsubscribe(onStoreChange);
+                    subscribers.delete(observerFollower);
+                    observerFollower.cleanup();
+                };
+                observerFollower.dispose = observerFollower.destroy;
+
+                subscribers.add(observerFollower);
+                return observerFollower;
+            },
+
+            /**
+             * Returns the raw store observer directly (no follower, no cleanup contract).
+             * Use this for direct read access when you don't need to unsubscribe.
+             * WARNING : mutations on this observer impact all subscribers immediately.
+             *
+             * @param {string} name
+             * @returns {ObservableItem|null}
+             */
+            get(name) {
+                const item = $stores.get(name);
+                if (!item) {
+                    DebugManager.warn('Store', `Store.get('${name}') : store not found.`);
+                    return null;
+                }
+                return item.observer;
+            },
+
+            /**
+             * @param {string} name
+             * @returns {{ observer: ObservableItem, subscribers: Set } | null}
+             */
+            getWithSubscribers(name) {
+                return $stores.get(name) ?? null;
+            },
+
+            /**
+             * Destroys a store : cleans up the observer, destroys all followers, and removes the entry.
+             *
+             * @param {string} name
+             */
+            delete(name) {
+                const item = $stores.get(name);
+                if (!item) {
+                    DebugManager.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
+                    return;
+                }
+                item.subscribers.forEach(follower => follower.destroy());
+                item.subscribers.clear();
+                item.observer.cleanup();
+                $stores.delete(name);
+            },
+            /**
+             * Creates an isolated store group with its own state namespace.
+             * Each group is a fully independent StoreFactory instance —
+             * no key conflicts, no shared state with the parent store.
+             *
+             * @param {string | ((group: ReturnType<typeof StoreFactory>) => void)} name - Group name for debugging, or setup callback if no name is provided
+             * @param {((group: ReturnType<typeof StoreFactory>) => void)} [callback] - Setup function receiving the isolated store instance
+             * @returns {ReturnType<typeof StoreFactory>}
+             *
+             * @example
+             * // With name (recommended)
+             * const EventStore = Store.group('events', (group) => {
+             *     group.create('catalog', []);
+             *     group.create('filters', { category: null, date: null });
+             *     group.createResettable('selected', null);
+             *     group.createComposed('filtered', () => {
+             *         const catalog = EventStore.get('catalog').val();
+             *         const filters = EventStore.get('filters').val();
+             *         return catalog.filter(event => {
+             *             if (filters.category && event.category !== filters.category) return false;
+             *             return true;
+             *         });
+             *     }, ['catalog', 'filters']);
+             * });
+             *
+             * // Without name
+             * const CartStore = Store.group((group) => {
+             *     group.create('items', []);
+             * });
+             *
+             * // Usage
+             * EventStore.use('catalog'); // two-way follower
+             * EventStore.follow('filtered'); // read-only follower
+             * EventStore.get('filters'); // raw observable
+             *
+             * // Cross-group composed
+             * const OrderStore = Store.group('orders', (group) => {
+             *     group.createComposed('summary', () => {
+             *         const items = CartStore.get('items').val();
+             *         const events = EventStore.get('catalog').val();
+             *         return { items, events };
+             *     }, [CartStore.get('items'), EventStore.get('catalog')]);
+             * });
+             */
+            group(name, callback) {
+                if (typeof name === 'function') {
+                    callback = name;
+                    name = 'anonymous';
+                }
+                const store = StoreFactory();
+                callback && callback(store);
+                return store;
+            },
+            createPersistent(name, value, localstorage_key) {
+                localstorage_key = localstorage_key || name;
+                const observer = this.create(name, $getFromStorage$1(localstorage_key, value));
+                const saver = $saveToStorage$1(value);
+
+                observer.subscribe((val) => saver(localstorage_key, val));
+                return observer;
+            },
+            createPersistentResettable(name, value, localstorage_key) {
+                localstorage_key = localstorage_key || name;
+                const observer = this.createResettable(name, $getFromStorage$1(localstorage_key, value));
+                const saver = $saveToStorage$1(value);
+                observer.subscribe((val) => saver(localstorage_key, val));
+
+                const originalReset = observer.reset.bind(observer);
+                observer.reset = () => {
+                    LocalStorage$1.remove(localstorage_key);
+                    originalReset();
+                };
+
+                return observer;
             }
-            parentNode?.insertBefore(child, targetBefore);
         };
 
-        anchorFragment.appendChild = function(child, before = null) {
-            const parent = anchorEnd.parentNode;
-            if(!parent) {
-                DebugManager.error('Anchor', 'Anchor : parent not found', child);
-                return;
+
+        return new Proxy($api, {
+            get(target, prop) {
+                if (typeof prop === 'symbol' || prop.startsWith('$') || prop in target) {
+                    return target[prop];
+                }
+                if (target.has(prop)) {
+                    if ($followersCache.has(prop)) {
+                        return $followersCache.get(prop);
+                    }
+                    const follower = target.follow(prop);
+                    $followersCache.set(prop, follower);
+                    return follower;
+                }
+                return undefined;
+            },
+            set(target, prop, value) {
+                DebugManager.error('Store', `Forbidden: You cannot overwrite the store key '${String(prop)}'. Use .use('${String(prop)}').set(value) instead.`);
+                throw new NativeDocumentError(`Store structure is immutable. Use .set() on the observable.`);
+            },
+            deleteProperty(target, prop) {
+                throw new NativeDocumentError(`Store keys cannot be deleted.`);
             }
-            before = before ?? anchorEnd;
-            insertBefore(parent, child, before);
-        };
-        anchorFragment.append = function(...args ) {
-            return anchorFragment.appendChild(args);
+        });
+    };
+
+    const Store = StoreFactory();
+
+    Store.create('locale', 'fr');
+
+    const $parseDateParts = (value, locale) => {
+        const d = new Date(value);
+        return {
+            d,
+            parts: new Intl.DateTimeFormat(locale, {
+                year:   'numeric',
+                month:  'long',
+                day:    '2-digit',
+                hour:   '2-digit',
+                minute: '2-digit',
+                second: '2-digit',
+            }).formatToParts(d).reduce((acc, { type, value }) => {
+                acc[type] = value;
+                return acc;
+            }, {})
         };
+    };
 
-        anchorFragment.removeChildren = function() {
-            const parent = anchorEnd.parentNode;
-            if(parent === anchorFragment) {
-                return;
-            }
-            if(isParentUniqueChild(parent)) {
-                parent.replaceChildren(anchorStart, anchorEnd);
-                return;
+    const $applyDatePattern = (pattern, d, parts) => {
+        const pad = n => String(n).padStart(2, '0');
+        return pattern
+            .replace('YYYY', parts.year)
+            .replace('YY',   parts.year.slice(-2))
+            .replace('MMMM', parts.month)
+            .replace('MMM',  parts.month.slice(0, 3))
+            .replace('MM',   pad(d.getMonth() + 1))
+            .replace('DD',   pad(d.getDate()))
+            .replace('D',    d.getDate())
+            .replace('HH',   parts.hour)
+            .replace('mm',   parts.minute)
+            .replace('ss',   parts.second);
+    };
+
+    const Formatters = {
+
+        currency: (value, locale, { currency = 'XOF', notation, minimumFractionDigits, maximumFractionDigits } = {}) =>
+            new Intl.NumberFormat(locale, {
+                style: 'currency',
+                currency,
+                notation,
+                minimumFractionDigits,
+                maximumFractionDigits
+            }).format(value),
+
+        number: (value, locale, { notation, minimumFractionDigits, maximumFractionDigits } = {}) =>
+            new Intl.NumberFormat(locale, {
+                notation,
+                minimumFractionDigits,
+                maximumFractionDigits
+            }).format(value),
+
+        percent: (value, locale, { decimals = 1 } = {}) =>
+            new Intl.NumberFormat(locale, {
+                style:                'percent',
+                maximumFractionDigits: decimals
+            }).format(value),
+
+        date: (value, locale, { format, dateStyle = 'long' } = {}) => {
+            if (format) {
+                const { d, parts } = $parseDateParts(value, locale);
+                return $applyDatePattern(format, d, parts);
             }
+            return new Intl.DateTimeFormat(locale, { dateStyle }).format(new Date(value));
+        },
 
-            let itemToRemove = anchorStart.nextSibling, tempItem;
-            const fragment = document.createDocumentFragment();
-            while(itemToRemove && itemToRemove !== anchorEnd) {
-                tempItem = itemToRemove.nextSibling;
-                fragment.append(itemToRemove);
-                itemToRemove =  tempItem;
+        time: (value, locale, { format, hour = '2-digit', minute = '2-digit', second } = {}) => {
+            if (format) {
+                const { d, parts } = $parseDateParts(value, locale);
+                return $applyDatePattern(format, d, parts);
             }
-            fragment.replaceChildren();
-        };
-        anchorFragment.remove = function() {
-            const parent = anchorEnd.parentNode;
-            if(parent === anchorFragment) {
-                return;
+            return new Intl.DateTimeFormat(locale, { hour, minute, second }).format(new Date(value));
+        },
+
+        datetime: (value, locale, { format, dateStyle = 'long', hour = '2-digit', minute = '2-digit', second } = {}) => {
+            if (format) {
+                const { d, parts } = $parseDateParts(value, locale);
+                return $applyDatePattern(format, d, parts);
             }
-            let itemToRemove = anchorStart.nextSibling, tempItem;
-            while(itemToRemove && itemToRemove !== anchorEnd) {
-                tempItem = itemToRemove.nextSibling;
-                anchorFragment.nativeAppendChild(itemToRemove);
-                itemToRemove = tempItem;
+            return new Intl.DateTimeFormat(locale, { dateStyle, hour, minute, second }).format(new Date(value));
+        },
+
+        relative: (value, locale, { unit = 'day', numeric = 'auto' } = {}) => {
+            const diff = Math.round((value - Date.now()) / (1000 * 60 * 60 * 24));
+            return new Intl.RelativeTimeFormat(locale, { numeric }).format(diff, unit);
+        },
+
+        plural: (value, locale, { singular, plural } = {}) => {
+            const rule = new Intl.PluralRules(locale).select(value);
+            return `${value} ${rule === 'one' ? singular : plural}`;
+        },
+    };
+
+    /**
+     *
+     * @param {*} value
+     * @param {{ propagation: boolean, reset: boolean} | null} configs
+     * @class ObservableItem
+     */
+    function ObservableItem(value, configs = null) {
+        value = Validator.isObservable(value) ? value.val() : value;
+
+        this.$previousValue = null;
+        this.$currentValue = value;
+
+        this.$firstListener = null;
+        this.$listeners = null;
+        this.$watchers = null;
+
+        this.$memoryId = null;
+
+        if(configs) {
+            this.configs = configs;
+            if(configs.reset) {
+                this.$initialValue = Validator.isObject(value) ? deepClone(value) : value;
             }
-        };
+        }
+    }
 
-        anchorFragment.removeWithAnchors = function() {
-            anchorFragment.removeChildren();
-            anchorStart.remove();
-            anchorEnd.remove();
-        };
+    Object.defineProperty(ObservableItem.prototype, '$value', {
+        get() {
+            return this.$currentValue;
+        },
+        set(value) {
+            this.set(value);
+        },
+        configurable: true,
+    });
+
+    ObservableItem.prototype.__$isObservable = true;
+    const noneTrigger = function() {};
+
+    /**
+     * Intercepts and transforms values before they are set on the observable.
+     * The interceptor can modify the value or return undefined to use the original value.
+     *
+     * @param {(value) => any} callback - Interceptor function that receives (newValue, currentValue) and returns the transformed value or undefined
+     * @returns {ObservableItem} The observable instance for chaining
+     * @example
+     * const count = Observable(0);
+     * count.intercept((newVal, oldVal) => Math.max(0, newVal)); // Prevent negative values
+     */
+    ObservableItem.prototype.intercept = function(callback) {
+        this.$interceptor = callback;
+        this.set = this.$setWithInterceptor;
+        return this;
+    };
+
+    ObservableItem.prototype.triggerFirstListener = function(operations) {
+        this.$firstListener(this.$currentValue, this.$previousValue, operations);
+    };
+
+    ObservableItem.prototype.triggerListeners = function(operations) {
+        const $listeners = this.$listeners;
+        const $previousValue = this.$previousValue;
+        const $currentValue = this.$currentValue;
+
+        for(let i = 0, length = $listeners.length; i < length; i++) {
+            $listeners[i]($currentValue, $previousValue, operations);
+        }
+    };
+
+    ObservableItem.prototype.triggerWatchers = function(operations) {
+        const $watchers = this.$watchers;
+        const $previousValue = this.$previousValue;
+        const $currentValue = this.$currentValue;
+
+        const $currentValueCallbacks = $watchers.get($currentValue);
+        const $previousValueCallbacks = $watchers.get($previousValue);
+        if($currentValueCallbacks) {
+            $currentValueCallbacks(true, $previousValue, operations);
+        }
+        if($previousValueCallbacks) {
+            $previousValueCallbacks(false, $currentValue, operations);
+        }
+    };
+
+    ObservableItem.prototype.triggerAll = function(operations) {
+        this.triggerWatchers(operations);
+        this.triggerListeners(operations);
+    };
+
+    ObservableItem.prototype.triggerWatchersAndFirstListener = function(operations) {
+        this.triggerWatchers(operations);
+        this.triggerFirstListener(operations);
+    };
+
+    ObservableItem.prototype.assocTrigger = function() {
+        this.$firstListener = null;
+        if(this.$watchers?.size && this.$listeners?.length) {
+            this.trigger = (this.$listeners.length === 1) ? this.triggerWatchersAndFirstListener : this.triggerAll;
+            return;
+        }
+        if(this.$listeners?.length) {
+            if(this.$listeners.length === 1) {
+                this.$firstListener = this.$listeners[0];
+                this.trigger = this.triggerFirstListener;
+            }
+            else {
+                this.trigger = this.triggerListeners;
+            }
+            return;
+        }
+        if(this.$watchers?.size) {
+            this.trigger = this.triggerWatchers;
+            return;
+        }
+        this.trigger = noneTrigger;
+    };
+    ObservableItem.prototype.trigger = noneTrigger;
+
+    ObservableItem.prototype.$updateWithNewValue = function(newValue) {
+        newValue = newValue?.__$isObservable ? newValue.val() : newValue;
+        if(this.$currentValue === newValue) {
+            return;
+        }
+        this.$previousValue = this.$currentValue;
+        this.$currentValue = newValue;
+        this.trigger();
+        this.$previousValue = null;
+    };
+
+    /**
+     * @param {*} data
+     */
+    ObservableItem.prototype.$setWithInterceptor = function(data) {
+        let newValue = (typeof data === 'function') ? data(this.$currentValue) : data;
+        const result = this.$interceptor(newValue, this.$currentValue);
+
+        if (result !== undefined) {
+            newValue = result;
+        }
+
+        this.$updateWithNewValue(newValue);
+    };
+
+    /**
+     * @param {*} data
+     */
+    ObservableItem.prototype.$basicSet = function(data) {
+        let newValue = (typeof data === 'function') ? data(this.$currentValue) : data;
+        this.$updateWithNewValue(newValue);
+    };
+
+    ObservableItem.prototype.set = ObservableItem.prototype.$basicSet;
+
+    ObservableItem.prototype.val = function() {
+        return this.$currentValue;
+    };
+
+    ObservableItem.prototype.disconnectAll = function() {
+        this.$listeners?.splice(0);
+        this.$previousValue = null;
+        this.$currentValue = null;
+        if(this.$watchers) {
+            for (const [_, watchValueList] of this.$watchers) {
+                if(Validator.isArray(watchValueList)) {
+                    watchValueList.splice(0);
+                }
+            }
+        }
+        this.$watchers?.clear();
+        this.$listeners = null;
+        this.$watchers = null;
+        this.trigger = noneTrigger;
+    };
+
+    /**
+     * Registers a cleanup callback that will be executed when the observable is cleaned up.
+     * Useful for disposing resources, removing event listeners, or other cleanup tasks.
+     *
+     * @param {Function} callback - Cleanup function to execute on observable disposal
+     * @example
+     * const obs = Observable(0);
+     * obs.onCleanup(() => console.log('Cleaned up!'));
+     * obs.cleanup(); // Logs: "Cleaned up!"
+     */
+    ObservableItem.prototype.onCleanup = function(callback) {
+        this.$cleanupListeners = this.$cleanupListeners ?? [];
+        this.$cleanupListeners.push(callback);
+    };
+
+    ObservableItem.prototype.cleanup = function() {
+        if (this.$cleanupListeners) {
+            for (let i = 0; i < this.$cleanupListeners.length; i++) {
+                this.$cleanupListeners[i]();
+            }
+            this.$cleanupListeners = null;
+        }
+        MemoryManager.unregister(this.$memoryId);
+        this.disconnectAll();
+        delete this.$value;
+    };
+
+    /**
+     *
+     * @param {Function} callback
+     * @returns {(function(): void)}
+     */
+    ObservableItem.prototype.subscribe = function(callback) {
+        this.$listeners = this.$listeners ?? [];
+
+        this.$listeners.push(callback);
+        this.assocTrigger();
+    };
+
+    /**
+     * Watches for a specific value and executes callback when the observable equals that value.
+     * Creates a watcher that only triggers when the observable changes to the specified value.
+     *
+     * @param {*} value - The value to watch for
+     * @param {(value) => void|ObservableItem} callback - Callback function or observable to set when value matches
+     * @example
+     * const status = Observable('idle');
+     * status.on('loading', () => console.log('Started loading'));
+     * status.on('error', isError); // Set another observable
+     */
+    ObservableItem.prototype.on = function(value, callback) {
+        this.$watchers = this.$watchers ?? new Map();
+
+        let watchValueList = this.$watchers.get(value);
+
+        if(callback.__$isObservable) {
+            callback = callback.set.bind(callback);
+        }
+
+        if(!watchValueList) {
+            watchValueList = callback;
+            this.$watchers.set(value, callback);
+        } else if(!Validator.isArray(watchValueList.list)) {
+            watchValueList = [watchValueList, callback];
+            callback = (value) => {
+                for(let i = 0, length = watchValueList.length; i < length; i++) {
+                    watchValueList[i](value);
+                }
+            };
+            callback.list = watchValueList;
+            this.$watchers.set(value, callback);
+        } else {
+            watchValueList.list.push(callback);
+        }
+
+        this.assocTrigger();
+    };
+
+    /**
+     * Removes a watcher for a specific value. If no callback is provided, removes all watchers for that value.
+     *
+     * @param {*} value - The value to stop watching
+     * @param {Function} [callback] - Specific callback to remove. If omitted, removes all watchers for this value
+     * @example
+     * const status = Observable('idle');
+     * const handler = () => console.log('Loading');
+     * status.on('loading', handler);
+     * status.off('loading', handler); // Remove specific handler
+     * status.off('loading'); // Remove all handlers for 'loading'
+     */
+    ObservableItem.prototype.off = function(value, callback) {
+        if(!this.$watchers) return;
+
+        const watchValueList = this.$watchers.get(value);
+        if(!watchValueList) return;
+
+        if(!callback || !Array.isArray(watchValueList.list)) {
+            this.$watchers?.delete(value);
+            this.assocTrigger();
+            return;
+        }
+        const index = watchValueList.indexOf(callback);
+        watchValueList?.splice(index, 1);
+        if(watchValueList.length === 1) {
+            this.$watchers.set(value, watchValueList[0]);
+        }
+        else if(watchValueList.length === 0) {
+            this.$watchers?.delete(value);
+        }
+        this.assocTrigger();
+    };
+
+    /**
+     * Subscribes to the observable but automatically unsubscribes after the first time the predicate matches.
+     *
+     * @param {(value) => Boolean|any} predicate - Value to match or function that returns true when condition is met
+     * @param {(value) => void} callback - Callback to execute when predicate matches, receives the matched value
+     * @example
+     * const status = Observable('loading');
+     * status.once('ready', (val) => console.log('Ready!'));
+     * status.once(val => val === 'error', (val) => console.log('Error occurred'));
+     */
+    ObservableItem.prototype.once = function(predicate, callback) {
+        const fn = typeof predicate === 'function' ? predicate : (v) => v === predicate;
+
+        const handler = (val) => {
+            if (fn(val)) {
+                this.unsubscribe(handler);
+                callback(val);
+            }
+        };
+        this.subscribe(handler);
+    };
+
+    /**
+     * Unsubscribe from an observable.
+     * @param {Function} callback
+     */
+    ObservableItem.prototype.unsubscribe = function(callback) {
+        if(!this.$listeners) return;
+        const index = this.$listeners.indexOf(callback);
+        if (index > -1) {
+            this.$listeners.splice(index, 1);
+        }
+        this.assocTrigger();
+    };
+
+    /**
+     * Create an Observable checker instance
+     * @param callback
+     * @returns {ObservableChecker}
+     */
+    ObservableItem.prototype.check = function(callback) {
+        return new ObservableChecker(this, callback)
+    };
+
+    ObservableItem.prototype.transform = ObservableItem.prototype.check;
+    ObservableItem.prototype.pluck = ObservableItem.prototype.check;
+    ObservableItem.prototype.is = ObservableItem.prototype.check;
+    ObservableItem.prototype.select = ObservableItem.prototype.check;
+
+    /**
+     * Gets a property value from the observable's current value.
+     * If the property is an observable, returns its value.
+     *
+     * @param {string|number} key - Property key to retrieve
+     * @returns {*} The value of the property, unwrapped if it's an observable
+     * @example
+     * const user = Observable({ name: 'John', age: Observable(25) });
+     * user.get('name'); // 'John'
+     * user.get('age'); // 25 (unwrapped from observable)
+     */
+    ObservableItem.prototype.get = function(key) {
+        const item = this.$currentValue[key];
+        return Validator.isObservable(item) ? item.val() : item;
+    };
+
+    /**
+     * Creates an ObservableWhen that represents whether the observable equals a specific value.
+     * Returns an object that can be subscribed to and will emit true/false.
+     *
+     * @param {*} value - The value to compare against
+     * @returns {ObservableWhen} An ObservableWhen instance that tracks when the observable equals the value
+     * @example
+     * const status = Observable('idle');
+     * const isLoading = status.when('loading');
+     * isLoading.subscribe(active => console.log('Loading:', active));
+     * status.set('loading'); // Logs: "Loading: true"
+     */
+    ObservableItem.prototype.when = function(value) {
+        return new ObservableWhen(this, value);
+    };
+
+    /**
+     * Compares the observable's current value with another value or observable.
+     *
+     * @param {*|ObservableItem} other - Value or observable to compare against
+     * @returns {boolean} True if values are equal
+     * @example
+     * const a = Observable(5);
+     * const b = Observable(5);
+     * a.equals(5);  // true
+     * a.equals(b);  // true
+     * a.equals(10); // false
+     */
+    ObservableItem.prototype.equals = function(other) {
+        if(Validator.isObservable(other)) {
+            return this.$currentValue === other.$currentValue;
+        }
+        return this.$currentValue === other;
+    };
+
+    /**
+     * Converts the observable's current value to a boolean.
+     *
+     * @returns {boolean} The boolean representation of the current value
+     * @example
+     * const count = Observable(0);
+     * count.toBool(); // false
+     * count.set(5);
+     * count.toBool(); // true
+     */
+    ObservableItem.prototype.toBool = function() {
+        return !!this.$currentValue;
+    };
 
-        anchorFragment.replaceContent = function(child) {
-            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
-            const parent = anchorEnd.parentNode;
-            if(!parent) {
-                return;
-            }
-            if(isParentUniqueChild(parent)) {
-                parent.replaceChildren(anchorStart, childElement, anchorEnd);
-                return;
-            }
-            anchorFragment.removeChildren();
-            parent.insertBefore(childElement, anchorEnd);
-        };
+    /**
+     * Toggles the boolean value of the observable (false becomes true, true becomes false).
+     *
+     * @example
+     * const isOpen = Observable(false);
+     * isOpen.toggle(); // Now true
+     * isOpen.toggle(); // Now false
+     */
+    ObservableItem.prototype.toggle = function() {
+        this.set(!this.$currentValue);
+    };
 
-        anchorFragment.setContent = anchorFragment.replaceContent;
+    /**
+     * Resets the observable to its initial value.
+     * Only works if the observable was created with { reset: true } config.
+     *
+     * @example
+     * const count = Observable(0, { reset: true });
+     * count.set(10);
+     * count.reset(); // Back to 0
+     */
+    ObservableItem.prototype.reset = function() {
+        if(!this.configs?.reset) {
+            return;
+        }
+        const resetValue = (Validator.isObject(this.$initialValue))
+            ? deepClone(this.$initialValue, (observable) => {
+                observable.reset();
+            })
+            : this.$initialValue;
+        this.set(resetValue);
+    };
 
-        anchorFragment.insertBefore = function(child, anchor = null) {
-            anchorFragment.appendChild(child, anchor);
-        };
+    /**
+     * Returns a string representation of the observable's current value.
+     *
+     * @returns {string} String representation of the current value
+     */
+    ObservableItem.prototype.toString = function() {
+        return String(this.$currentValue);
+    };
 
+    /**
+     * Returns the primitive value of the observable (its current value).
+     * Called automatically in type coercion contexts.
+     *
+     * @returns {*} The current value of the observable
+     */
+    ObservableItem.prototype.valueOf = function() {
+        return this.$currentValue;
+    };
 
-        anchorFragment.endElement = function() {
-            return anchorEnd;
-        };
 
-        anchorFragment.startElement = function() {
-            return anchorStart;
-        };
-        anchorFragment.restore = function() {
-            anchorFragment.appendChild(anchorFragment);
-        };
-        anchorFragment.clear = anchorFragment.remove;
-        anchorFragment.detach = anchorFragment.remove;
+    /**
+     * Creates a derived observable that formats the current value using Intl.
+     * Automatically reacts to both value changes and locale changes (Store.__nd.locale).
+     *
+     * @param {string | Function} type - Format type or custom formatter function
+     * @param {Object} [options={}] - Options passed to the formatter
+     * @returns {ObservableItem<string>}
+     *
+     * @example
+     * // Currency
+     * price.format('currency')                                      // "15 000 FCFA"
+     * price.format('currency', { currency: 'EUR' })                 // "15 000,00 €"
+     * price.format('currency', { notation: 'compact' })             // "15 K FCFA"
+     *
+     * // Number
+     * count.format('number')                                        // "15 000"
+     *
+     * // Percent
+     * rate.format('percent')                                        // "15,0 %"
+     * rate.format('percent', { decimals: 2 })                       // "15,00 %"
+     *
+     * // Date
+     * date.format('date')                                           // "3 mars 2026"
+     * date.format('date', { dateStyle: 'full' })                    // "mardi 3 mars 2026"
+     * date.format('date', { format: 'DD/MM/YYYY' })                 // "03/03/2026"
+     * date.format('date', { format: 'DD MMM YYYY' })                // "03 mar 2026"
+     * date.format('date', { format: 'DD MMMM YYYY' })               // "03 mars 2026"
+     *
+     * // Time
+     * date.format('time')                                           // "20:30"
+     * date.format('time', { second: '2-digit' })                    // "20:30:00"
+     * date.format('time', { format: 'HH:mm:ss' })                   // "20:30:00"
+     *
+     * // Datetime
+     * date.format('datetime')                                       // "3 mars 2026, 20:30"
+     * date.format('datetime', { dateStyle: 'full' })                // "mardi 3 mars 2026, 20:30"
+     * date.format('datetime', { format: 'DD/MM/YYYY HH:mm' })       // "03/03/2026 20:30"
+     *
+     * // Relative
+     * date.format('relative')                                       // "dans 11 jours"
+     * date.format('relative', { unit: 'month' })                    // "dans 1 mois"
+     *
+     * // Plural
+     * count.format('plural', { singular: 'billet', plural: 'billets' }) // "3 billets"
+     *
+     * // Custom formatter
+     * price.format(value => `${value.toLocaleString()} FCFA`)
+     *
+     * // Reacts to locale changes automatically
+     * Store.setLocale('en-US');
+     */
+    ObservableItem.prototype.format = function(type, options = {}) {
+        const self = this;
 
-        anchorFragment.getByIndex = function(index) {
-            let currentNode = anchorStart;
-            for(let i = 0; i <= index; i++) {
-                if(!currentNode.nextSibling) {
-                    return null;
-                }
-                currentNode = currentNode.nextSibling;
-            }
-            return currentNode !== anchorStart ? currentNode : null;
-        };
+        if (typeof type === 'function') {
+            return new ObservableChecker(self, type);
+        }
 
-        return anchorFragment;
-    }
-    DocumentFragment.prototype.setAttribute = () => {};
+        const formatter = Formatters[type];
+        const localeObservable = Store.follow('locale');
 
-    const BOOLEAN_ATTRIBUTES = new Set([
-        'checked',
-        'selected',
-        'disabled',
-        'readonly',
-        'required',
-        'autofocus',
-        'multiple',
-        'autocomplete',
-        'hidden',
-        'contenteditable',
-        'spellcheck',
-        'translate',
-        'draggable',
-        'async',
-        'defer',
-        'autoplay',
-        'controls',
-        'loop',
-        'muted',
-        'download',
-        'reversed',
-        'open',
-        'default',
-        'formnovalidate',
-        'novalidate',
-        'scoped',
-        'itemscope',
-        'allowfullscreen',
-        'allowpaymentrequest',
-        'playsinline'
-    ]);
+        return Observable$1.computed(() => formatter(self.val(), localeObservable.val(), options),
+            [self, localeObservable]
+        );
+    };
+
+    ObservableItem.prototype.persist = function(key, options = {}) {
+        let value = $getFromStorage$1(key, this.$currentValue);
+        if(options.get) {
+            value = options.get(value);
+        }
+        this.set(value);
+        const saver = $saveToStorage$1(this.$currentValue);
+        this.subscribe((newValue) => {
+            saver(key, options.set ? options.set(newValue) : newValue);
+        });
+        return this;
+    };
 
     /**
      *
@@ -1712,17 +2461,17 @@ var NativeComponents = (function (exports) {
      * @returns {ObservableItem}
      * @constructor
      */
-    function Observable(value, configs = null) {
+    function Observable$1(value, configs = null) {
         return new ObservableItem(value, configs);
     }
 
-    const $$1 = Observable;
+    const $$1 = Observable$1;
 
     /**
      *
      * @param {string} propertyName
      */
-    Observable.useValueProperty = function(propertyName = 'value') {
+    Observable$1.useValueProperty = function(propertyName = 'value') {
         Object.defineProperty(ObservableItem.prototype, propertyName, {
             get() {
                 return this.$currentValue;
@@ -1740,7 +2489,7 @@ var NativeComponents = (function (exports) {
      * @param id
      * @returns {ObservableItem|null}
      */
-    Observable.getById = function(id) {
+    Observable$1.getById = function(id) {
         const item = MemoryManager.getObservableById(parseInt(id));
         if(!item) {
             throw new NativeDocumentError('Observable.getById : No observable found with id ' + id);
@@ -1752,7 +2501,7 @@ var NativeComponents = (function (exports) {
      *
      * @param {ObservableItem} observable
      */
-    Observable.cleanup = function(observable) {
+    Observable$1.cleanup = function(observable) {
         observable.cleanup();
     };
 
@@ -1761,7 +2510,7 @@ var NativeComponents = (function (exports) {
      * @param {Boolean} enable
      * @param {{interval:Boolean, threshold:number}} options
      */
-    Observable.autoCleanup = function(enable = false, options = {}) {
+    Observable$1.autoCleanup = function(enable = false, options = {}) {
         if(!enable) {
             return;
         }
@@ -1953,6 +2702,88 @@ var NativeComponents = (function (exports) {
         return ElementCreator.getChild(child());
     };
 
+    /**
+     * @param {HTMLElement} el
+     * @param {number} timeout
+     */
+    const waitForVisualEnd = (el, timeout = 1000) => {
+        return new Promise((resolve) => {
+            let isResolved = false;
+
+            const cleanupAndResolve = (e) => {
+                if (e && e.target !== el) return;
+                if (isResolved) return;
+
+                isResolved = true;
+                el.removeEventListener('transitionend', cleanupAndResolve);
+                el.removeEventListener('animationend', cleanupAndResolve);
+                clearTimeout(timer);
+                resolve();
+            };
+
+            el.addEventListener('transitionend', cleanupAndResolve);
+            el.addEventListener('animationend', cleanupAndResolve);
+
+            const timer = setTimeout(cleanupAndResolve, timeout);
+
+            const style = window.getComputedStyle(el);
+            const hasTransition = style.transitionDuration !== '0s';
+            const hasAnimation = style.animationDuration !== '0s';
+
+            if (!hasTransition && !hasAnimation) {
+                cleanupAndResolve();
+            }
+        });
+    };
+
+    NDElement.prototype.transitionOut = function(transitionName) {
+        const exitClass = transitionName + '-exit';
+        this.beforeUnmount('transition-exit', async function() {
+            this.$element.classes.add(exitClass);
+            await waitForVisualEnd(this.$element);
+            this.$element.classes.remove(exitClass);
+        });
+        return this;
+    };
+
+    NDElement.prototype.transitionIn = function(transitionName) {
+        const startClass = transitionName + '-enter-from';
+        const endClass = transitionName + '-enter-to';
+
+        this.$element.classes.add(startClass);
+
+        this.mounted(() => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    this.$element.classes.remove(startClass);
+                    this.$element.classes.add(endClass);
+
+                    waitForVisualEnd(this.$element).then(() => {
+                        this.$element.classes.remove(endClass);
+                    });
+                });
+            });
+        });
+        return this;
+    };
+
+
+    NDElement.prototype.transition = function (transitionName) {
+        this.transitionIn(transitionName);
+        this.transitionOut(transitionName);
+        return this;
+    };
+
+    NDElement.prototype.animate = function(animationName) {
+        this.$element.classes.add(animationName);
+
+        waitForVisualEnd(this.$element).then(() => {
+            this.$element.classes.remove(animationName);
+        });
+
+        return this;
+    };
+
     String.prototype.handleNdAttribute = function(element, attributeName) {
         element.setAttribute(attributeName, this);
     };
@@ -2050,6 +2881,10 @@ var NativeComponents = (function (exports) {
                 parent.appendChild(child);
             }
         },
+        async safeRemove(element) {
+            await element.remove();
+
+        },
         getChild(child) {
             if(child == null) {
                 return null;
@@ -2390,10 +3225,10 @@ var NativeComponents = (function (exports) {
     /**
      *
      * @param {string} name
-     * @param {?Function} customWrapper
+     * @param {?Function=} customWrapper
      * @returns {Function}
      */
-    function HtmlElementWrapper(name, customWrapper) {
+    function HtmlElementWrapper(name, customWrapper = null) {
         return createHtmlElement.bind(null, name, customWrapper);
     }
 
@@ -2433,7 +3268,7 @@ var NativeComponents = (function (exports) {
     String.prototype.use = function(args) {
         const value = this;
 
-        return Observable.computed(() => {
+        return Observable$1.computed(() => {
             return value.replace(/\$\{(.*?)}/g, (match, key) => {
                 const data = args[key];
                 if(Validator.isObservable(data)) {
@@ -2453,7 +3288,7 @@ var NativeComponents = (function (exports) {
                 return value;
             }
             const [_, id] = value.match(/\{\{#ObItem::\(([0-9]+)\)\}\}/);
-            return Observable.getById(id);
+            return Observable$1.getById(id);
         });
     };
 
@@ -2726,7 +3561,7 @@ var NativeComponents = (function (exports) {
             }
         }
 
-        const viewArray = Observable.array();
+        const viewArray = Observable$1.array();
 
         const filters = Object.entries(filterCallbacks);
         const updateView = () => {
@@ -2812,7 +3647,7 @@ var NativeComponents = (function (exports) {
      * items.push(4); // Triggers update
      * items.subscribe((arr) => console.log(arr));
      */
-    Observable.array = function(target = [], configs = null) {
+    Observable$1.array = function(target = [], configs = null) {
         return new ObservableArray(target, configs);
     };
 
@@ -2821,8 +3656,8 @@ var NativeComponents = (function (exports) {
      * @param {Function} callback
      * @returns {Function}
      */
-    Observable.batch = function(callback) {
-        const $observer = Observable(0);
+    Observable$1.batch = function(callback) {
+        const $observer = Observable$1(0);
         const batch = function() {
             if(Validator.isAsyncFunction(callback)) {
                 return (callback(...arguments)).then(() => {
@@ -2836,10 +3671,71 @@ var NativeComponents = (function (exports) {
         return batch;
     };
 
-    const ObservableObjectValue = function(data) {
+    const ObservableObject = function(target, configs) {
+        ObservableItem.call(this, target);
+        this.$observables = {};
+        this.configs = configs;
+
+        this.$load(target);
+
+        for(const name in target) {
+            if(!Object.hasOwn(this, name)) {
+                Object.defineProperty(this, name, {
+                    get: () => this.$observables[name],
+                    set: (value) => this.$observables[name].set(value)
+                });
+            }
+        }
+
+    };
+
+    ObservableObject.prototype = Object.create(ObservableItem.prototype);
+
+    Object.defineProperty(ObservableObject, '$value', {
+        get() {
+            return this.val();
+        },
+        set(value) {
+            this.set(value);
+        }
+    });
+
+    ObservableObject.prototype.__$isObservableObject = true;
+    ObservableObject.prototype.__isProxy__ = true;
+
+    ObservableObject.prototype.$load = function(initialValue) {
+        const configs = this.configs;
+        for(const key in initialValue) {
+            const itemValue = initialValue[key];
+            if(Array.isArray(itemValue)) {
+                if(configs?.deep !== false) {
+                    const mappedItemValue = itemValue.map(item => {
+                        if(Validator.isJson(item)) {
+                            return Observable$1.json(item, configs);
+                        }
+                        if(Validator.isArray(item)) {
+                            return Observable$1.array(item, configs);
+                        }
+                        return Observable$1(item, configs);
+                    });
+                    this.$observables[key] = Observable$1.array(mappedItemValue, configs);
+                    continue;
+                }
+                this.$observables[key] = Observable$1.array(itemValue, configs);
+                continue;
+            }
+            if(Validator.isObservable(itemValue) || Validator.isProxy(itemValue)) {
+                this.$observables[key] = itemValue;
+                continue;
+            }
+            this.$observables[key] = Observable$1(itemValue, configs);
+        }
+    };
+
+    ObservableObject.prototype.val = function() {
         const result = {};
-        for(const key in data) {
-            const dataItem = data[key];
+        for(const key in this.$observables) {
+            const dataItem = this.$observables[key];
             if(Validator.isObservable(dataItem)) {
                 let value = dataItem.val();
                 if(Array.isArray(value)) {
@@ -2862,9 +3758,10 @@ var NativeComponents = (function (exports) {
         }
         return result;
     };
+    ObservableObject.prototype.$val = ObservableObject.prototype.val;
 
-    const ObservableGet = function(target, property) {
-        const item = target[property];
+    ObservableObject.prototype.get = function(property) {
+        const item = this.$observables[property];
         if(Validator.isObservable(item)) {
             return item.val();
         }
@@ -2873,100 +3770,87 @@ var NativeComponents = (function (exports) {
         }
         return item;
     };
+    ObservableObject.prototype.$get = ObservableObject.prototype.get;
 
-    /**
-     * Creates an observable proxy for an object where each property becomes an observable.
-     * Properties can be accessed directly or via getter methods.
-     *
-     * @param {Object} initialValue - Initial object value
-     * @param {Object|null} [configs=null] - Configuration options
-     * // @param {boolean} [configs.propagation=true] - Whether changes propagate to parent
-     * @param {boolean} [configs.deep=false] - Whether to make nested objects observable
-     * @param {boolean} [configs.reset=false] - Whether to enable reset() method
-     * @returns {ObservableProxy} A proxy where each property is an observable
-     * @example
-     * const user = Observable.init({
-     *   name: 'John',
-     *   age: 25,
-     *   address: { city: 'NYC' }
-     * }, { deep: true });
-     *
-     * user.name.val(); // 'John'
-     * user.name.set('Jane');
-     * user.name = 'Jane X'
-     * user.age.subscribe(val => console.log('Age:', val));
-     */
-    Observable.init = function(initialValue, configs = null) {
-        const data = {};
-        for(const key in initialValue) {
-            const itemValue = initialValue[key];
-            if(Array.isArray(itemValue)) {
-                if(configs?.deep !== false) {
-                    const mappedItemValue = itemValue.map(item => {
-                        if(Validator.isJson(item)) {
-                            return Observable.json(item, configs);
-                        }
-                        if(Validator.isArray(item)) {
-                            return Observable.array(item, configs);
+    ObservableObject.prototype.set = function(newData) {
+        const data = Validator.isProxy(newData) ? newData.$value : newData;
+        const configs = this.configs;
+
+        for(const key in data) {
+            const targetItem = this.$observables[key];
+            const newValueOrigin = newData[key];
+            const newValue = data[key];
+
+            if(Validator.isObservable(targetItem)) {
+                if(!Validator.isArray(newValue)) {
+                    targetItem.set(newValue);
+                    continue;
+                }
+                const firstElementFromOriginalValue = newValueOrigin.at(0);
+                if(Validator.isObservable(firstElementFromOriginalValue) || Validator.isProxy(firstElementFromOriginalValue)) {
+                    const newValues = newValue.map(item => {
+                        if(Validator.isProxy(firstElementFromOriginalValue)) {
+                            return Observable$1.init(item, configs);
                         }
-                        return Observable(item, configs);
+                        return Observable$1(item, configs);
                     });
-                    data[key] = Observable.array(mappedItemValue, configs);
+                    targetItem.set(newValues);
                     continue;
                 }
-                data[key] = Observable.array(itemValue, configs);
+                targetItem.set([...newValue]);
                 continue;
             }
-            if(Validator.isObservable(itemValue) || Validator.isProxy(itemValue)) {
-                data[key] = itemValue;
+            if(Validator.isProxy(targetItem)) {
+                targetItem.update(newValue);
                 continue;
             }
-            data[key] = Observable(itemValue, configs);
+            this[key] = newValue;
         }
+    };
+    ObservableObject.prototype.$set = ObservableObject.prototype.set;
+    ObservableObject.prototype.$updateWith = ObservableObject.prototype.set;
 
-        const $reset = () => {
-            for(const key in data) {
-                const item = data[key];
-                item.reset();
-            }
-        };
+    ObservableObject.prototype.observables = function() {
+        return Object.values(this.$observables);
+    };
+    ObservableObject.prototype.$observables = ObservableObject.prototype.observables;
 
-        const $val = () => ObservableObjectValue(data);
+    ObservableObject.prototype.keys = function() {
+        return Object.keys(this.$observables);
+    };
+    ObservableObject.prototype.$keys = ObservableObject.prototype.keys;
+    ObservableObject.prototype.clone = function() {
+        return Observable$1.init(this.val(), this.configs);
+    };
+    ObservableObject.prototype.$clone = ObservableObject.prototype.clone;
+    ObservableObject.prototype.reset = function() {
+        for(const key in this.$observables) {
+            this.$observables[key].reset();
+        }
+    };
+    ObservableObject.prototype.originalSubscribe = ObservableObject.prototype.subscribe;
+    ObservableObject.prototype.subscribe = function(callback) {
+        const observables = this.observables();
+        const updatedValue = nextTick(() => {
+            this.$currentValue = this.val();
+            this.trigger();
+        });
 
-        const $clone = () => Observable.init($val(), configs);
+        this.originalSubscribe(callback);
 
-        const $updateWith = (values) => {
-            Observable.update(proxy, values);
-        };
+        for(let i = 0, length = observables.length; i < length; i++) {
+            const observable = observables[i];
+            observable.subscribe(updatedValue);
+        }
+    };
+    ObservableObject.prototype.configs = function() {
+        return this.configs;
+    };
 
-        const $get = (key) => ObservableGet(data, key);
-
-        const proxy = new Proxy(data, {
-            get(target, property) {
-                if(property === '__isProxy__') { return true; }
-                if(property === '$value') { return $val() }
-                if(property === 'get' || property === '$get') { return $get; }
-                if(property === 'val' || property === '$val') { return $val; }
-                if(property === 'set' || property === '$set' || property === '$updateWith') { return $updateWith; }
-                if(property === 'observables' || property === '$observables') { return Object.values(target); }
-                if(property === 'keys'|| property === '$keys') { return Object.keys(initialValue); }
-                if(property === 'clone' || property === '$clone') { return $clone; }
-                if(property === 'reset') { return $reset; }
-                if(property === 'configs') { return configs; }
-                return target[property];
-            },
-            set(target, prop, newValue) {
-                if(target[prop] !== undefined) {
-                    Validator.isObservable(newValue)
-                        ? target[prop].set(newValue.val())
-                        : target[prop].set(newValue);
-                    return true;
-                }
-                return true;
-            }
-        });
+    ObservableObject.prototype.update = ObservableObject.prototype.set;
 
-        return proxy;
+    Observable$1.init = function(initialValue, configs = null) {
+        return new ObservableObject(initialValue, configs)
     };
 
     /**
@@ -2974,8 +3858,8 @@ var NativeComponents = (function (exports) {
      * @param {any[]} data
      * @return Proxy[]
      */
-    Observable.arrayOfObject = function(data) {
-        return data.map(item => Observable.object(item));
+    Observable$1.arrayOfObject = function(data) {
+        return data.map(item => Observable$1.object(item));
     };
 
     /**
@@ -2983,7 +3867,7 @@ var NativeComponents = (function (exports) {
      * @param {ObservableItem|Object<ObservableItem>} data
      * @returns {{}|*|null}
      */
-    Observable.value = function(data) {
+    Observable$1.value = function(data) {
         if(Validator.isObservable(data)) {
             return data.val();
         }
@@ -2994,52 +3878,15 @@ var NativeComponents = (function (exports) {
             const result = [];
             for(let i = 0, length = data.length; i < length; i++) {
                 const item = data[i];
-                result.push(Observable.value(item));
+                result.push(Observable$1.value(item));
             }
             return result;
         }
         return data;
     };
 
-
-    Observable.update = function($target, newData) {
-        const data = Validator.isProxy(newData) ? newData.$value : newData;
-        const configs = $target.configs;
-
-        for(const key in data) {
-            const targetItem = $target[key];
-            const newValueOrigin = newData[key];
-            const newValue = data[key];
-
-            if(Validator.isObservable(targetItem)) {
-                if(Validator.isArray(newValue)) {
-                    const firstElementFromOriginalValue = newValueOrigin.at(0);
-                    if(Validator.isObservable(firstElementFromOriginalValue) || Validator.isProxy(firstElementFromOriginalValue)) {
-                        const newValues = newValue.map(item => {
-                            if(Validator.isProxy(firstElementFromOriginalValue)) {
-                                return Observable.init(item, configs);
-                            }
-                            return Observable(item, configs);
-                        });
-                        targetItem.set(newValues);
-                        continue;
-                    }
-                    targetItem.set([...newValue]);
-                    continue;
-                }
-                targetItem.set(newValue);
-                continue;
-            }
-            if(Validator.isProxy(targetItem)) {
-                Observable.update(targetItem, newValue);
-                continue;
-            }
-            $target[key] = newValue;
-        }
-    };
-
-    Observable.object = Observable.init;
-    Observable.json = Observable.init;
+    Observable$1.object = Observable$1.init;
+    Observable$1.json = Observable$1.init;
 
     /**
      * Creates a computed observable that automatically updates when its dependencies change.
@@ -3060,7 +3907,7 @@ var NativeComponents = (function (exports) {
      * const batch = Observable.batch(() => { ...  });
      * const computed = Observable.computed(() => { ... }, batch);
     */
-    Observable.computed = function(callback, dependencies = []) {
+    Observable$1.computed = function(callback, dependencies = []) {
         const initialValue = callback();
         const observable = new ObservableItem(initialValue);
         const updatedValue = nextTick(() => observable.set(callback()));
@@ -3086,40 +3933,196 @@ var NativeComponents = (function (exports) {
         return observable;
     };
 
+    /**
+     * Creates a `<div>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDivElement}
+     */
     HtmlElementWrapper('div');
+
+    /**
+     * Creates a `<span>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLSpanElement}
+     */
     HtmlElementWrapper('span');
+
+    /**
+     * Creates a `<label>` element.
+     * @type {function(LabelAttributes=, NdChild|NdChild[]=): HTMLLabelElement}
+     */
     HtmlElementWrapper('label');
+
+    /**
+     * Creates a `<p>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLParagraphElement}
+     */
     HtmlElementWrapper('p');
+
+    /**
+     * Creates a `<strong>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('strong');
+
+    /**
+     * Creates a `<h1>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+     */
     HtmlElementWrapper('h1');
+
+    /**
+     * Creates a `<h2>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+     */
     HtmlElementWrapper('h2');
+
+    /**
+     * Creates a `<h3>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+     */
     HtmlElementWrapper('h3');
+
+    /**
+     * Creates a `<h4>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+     */
     HtmlElementWrapper('h4');
+
+    /**
+     * Creates a `<h5>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+     */
     HtmlElementWrapper('h5');
+
+    /**
+     * Creates a `<h6>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLHeadingElement}
+     */
     HtmlElementWrapper('h6');
 
+    /**
+     * Creates a `<br>` element.
+     * @type {function(GlobalAttributes=): HTMLBRElement}
+     */
     HtmlElementWrapper('br');
 
+    /**
+     * Creates an `<a>` element.
+     * @type {function(AnchorAttributes=, NdChild|NdChild[]=): HTMLAnchorElement}
+     */
     HtmlElementWrapper('a');
+
+    /**
+     * Creates a `<pre>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLPreElement}
+     */
     HtmlElementWrapper('pre');
+
+    /**
+     * Creates a `<code>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('code');
+
+    /**
+     * Creates a `<blockquote>` element.
+     * @type {function(GlobalAttributes & { cite?: string }=, NdChild|NdChild[]=): HTMLQuoteElement}
+     */
     HtmlElementWrapper('blockquote');
+
+    /**
+     * Creates an `<hr>` element.
+     * @type {function(GlobalAttributes=): HTMLHRElement}
+     */
     HtmlElementWrapper('hr');
+
+    /**
+     * Creates an `<em>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('em');
+
+    /**
+     * Creates a `<small>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('small');
+
+    /**
+     * Creates a `<mark>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('mark');
+
+    /**
+     * Creates a `<del>` element.
+     * @type {function(ModAttributes=, NdChild|NdChild[]=): HTMLModElement}
+     */
     HtmlElementWrapper('del');
+
+    /**
+     * Creates an `<ins>` element.
+     * @type {function(ModAttributes=, NdChild|NdChild[]=): HTMLModElement}
+     */
     HtmlElementWrapper('ins');
+
+    /**
+     * Creates a `<sub>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('sub');
+
+    /**
+     * Creates a `<sup>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('sup');
+
+    /**
+     * Creates an `<abbr>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('abbr');
+
+    /**
+     * Creates a `<cite>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('cite');
+
+    /**
+     * Creates a `<q>` element.
+     * @type {function(GlobalAttributes & { cite?: string }=, NdChild|NdChild[]=): HTMLQuoteElement}
+     */
     HtmlElementWrapper('q');
 
+    /**
+     * Creates a `<dl>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDListElement}
+     */
     HtmlElementWrapper('dl');
+
+    /**
+     * Creates a `<dt>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('dt');
+
+    /**
+     * Creates a `<dd>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('dd');
 
+    /**
+     * Creates a `<form>` element.
+     * Extended with fluent methods: `.submit()`, `.post()`, `.get()`, `.multipartFormData()`.
+     * @type {function(FormAttributes=, NdChild|NdChild[]=): HTMLFormElement & {
+     *   submit: (actionOrFn: string | ((e: SubmitEvent) => void)) => HTMLFormElement,
+     *   post: (action: string) => HTMLFormElement,
+     *   get: (action: string) => HTMLFormElement,
+     *   multipartFormData: () => HTMLFormElement,
+     * }}
+     */
     HtmlElementWrapper('form', function(el) {
 
         el.submit = function(action) {
@@ -3149,70 +4152,317 @@ var NativeComponents = (function (exports) {
         return el;
     });
 
+    /**
+     * Creates an `<input>` element.
+     * @type {function(InputAttributes=): HTMLInputElement}
+     */
     HtmlElementWrapper('input');
 
+    /**
+     * Creates a `<textarea>` element.
+     * @type {function(TextAreaAttributes=, NdChild|NdChild[]=): HTMLTextAreaElement}
+     */
     HtmlElementWrapper('textarea');
 
+    /**
+     * Creates a `<select>` element.
+     * @type {function(SelectAttributes=, NdChild|NdChild[]=): HTMLSelectElement}
+     */
     HtmlElementWrapper('select');
-    HtmlElementWrapper('fieldset', );
+
+    /**
+     * Creates a `<fieldset>` element.
+     * @type {function(GlobalAttributes & { disabled?: Observable<boolean>|boolean }=, NdChild|NdChild[]=): HTMLFieldSetElement}
+     */
+    HtmlElementWrapper('fieldset');
+
+    /**
+     * Creates an `<option>` element.
+     * @type {function(OptionAttributes=, NdChild|NdChild[]=): HTMLOptionElement}
+     */
     HtmlElementWrapper('option');
+
+    /**
+     * Creates a `<legend>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLLegendElement}
+     */
     HtmlElementWrapper('legend');
+
+    /**
+     * Creates a `<datalist>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLDataListElement}
+     */
     HtmlElementWrapper('datalist');
+
+    /**
+     * Creates an `<output>` element.
+     * @type {function(OutputAttributes=, NdChild|NdChild[]=): HTMLOutputElement}
+     */
     HtmlElementWrapper('output');
+
+    /**
+     * Creates a `<progress>` element.
+     * @type {function(ProgressAttributes=, NdChild|NdChild[]=): HTMLProgressElement}
+     */
     HtmlElementWrapper('progress');
-    HtmlElementWrapper('meter');
 
+    /**
+     * Creates a `<meter>` element.
+     * @type {function(MeterAttributes=, NdChild|NdChild[]=): HTMLMeterElement}
+     */
+    HtmlElementWrapper('meter');
 
+    /**
+     * Creates a `<button>` element.
+     * @type {function(ButtonAttributes=, NdChild|NdChild[]=): HTMLButtonElement}
+     */
     const Button$1 = HtmlElementWrapper('button');
 
+    /**
+     * Creates a `<main>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('main');
+
+    /**
+     * Creates a `<section>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('section');
+
+    /**
+     * Creates an `<article>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('article');
+
+    /**
+     * Creates an `<aside>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('aside');
+
+    /**
+     * Creates a `<nav>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('nav');
+
+    /**
+     * Creates a `<figure>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('figure');
+
+    /**
+     * Creates a `<figcaption>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('figcaption');
 
+    /**
+     * Creates a `<header>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('header');
+
+    /**
+     * Creates a `<footer>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('footer');
 
+    /**
+     * Creates an `<img>` element.
+     * @type {function(ImgAttributes=): HTMLImageElement}
+     */
     HtmlElementWrapper('img');
 
+    /**
+     * Creates a `<details>` element.
+     * @type {function(DetailsAttributes=, NdChild|NdChild[]=): HTMLDetailsElement}
+     */
     HtmlElementWrapper('details');
+
+    /**
+     * Creates a `<summary>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('summary');
+
+    /**
+     * Creates a `<dialog>` element.
+     * @type {function(DialogAttributes=, NdChild|NdChild[]=): HTMLDialogElement}
+     */
     HtmlElementWrapper('dialog');
+
+    /**
+     * Creates a `<menu>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLMenuElement}
+     */
     HtmlElementWrapper('menu');
 
+    /**
+     * Creates an `<ol>` element.
+     * @type {function(OlAttributes=, NdChild|NdChild[]=): HTMLOListElement}
+     */
     HtmlElementWrapper('ol');
+
+    /**
+     * Creates a `<ul>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLUListElement}
+     */
     HtmlElementWrapper('ul');
+
+    /**
+     * Creates a `<li>` element.
+     * @type {function(GlobalAttributes & { value?: number }=, NdChild|NdChild[]=): HTMLLIElement}
+     */
     HtmlElementWrapper('li');
 
+    /**
+     * Creates an `<audio>` element.
+     * @type {function(AudioAttributes=, NdChild|NdChild[]=): HTMLAudioElement}
+     */
     HtmlElementWrapper('audio');
+
+    /**
+     * Creates a `<video>` element.
+     * @type {function(VideoAttributes=, NdChild|NdChild[]=): HTMLVideoElement}
+     */
     HtmlElementWrapper('video');
+
+    /**
+     * Creates a `<source>` element.
+     * @type {function(SourceAttributes=): HTMLSourceElement}
+     */
     HtmlElementWrapper('source');
+
+    /**
+     * Creates a `<track>` element.
+     * @type {function(TrackAttributes=): HTMLTrackElement}
+     */
     HtmlElementWrapper('track');
+
+    /**
+     * Creates a `<canvas>` element.
+     * @type {function(CanvasAttributes=, NdChild|NdChild[]=): HTMLCanvasElement}
+     */
     HtmlElementWrapper('canvas');
+
+    /**
+     * Creates an `<svg>` element.
+     * @type {function(SvgAttributes=, NdChild|NdChild[]=): SVGSVGElement}
+     */
     HtmlElementWrapper('svg');
 
+    /**
+     * Creates a `<time>` element.
+     * @type {function(TimeAttributes=, NdChild|NdChild[]=): HTMLTimeElement}
+     */
     HtmlElementWrapper('time');
+
+    /**
+     * Creates a `<data>` element.
+     * @type {function(GlobalAttributes & { value?: Observable<string>|string }=, NdChild|NdChild[]=): HTMLDataElement}
+     */
     HtmlElementWrapper('data');
+
+    /**
+     * Creates an `<address>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('address');
+
+    /**
+     * Creates a `<kbd>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('kbd');
+
+    /**
+     * Creates a `<samp>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('samp');
+
+    /**
+     * Creates a `<var>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLElement}
+     */
     HtmlElementWrapper('var');
+
+    /**
+     * Creates a `<wbr>` element.
+     * @type {function(GlobalAttributes=): HTMLElement}
+     */
     HtmlElementWrapper('wbr');
 
+    /**
+     * Creates a `<caption>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableCaptionElement}
+     */
     HtmlElementWrapper('caption');
+
+    /**
+     * Creates a `<table>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableElement}
+     */
     const Table = HtmlElementWrapper('table');
+
+    /**
+     * Creates a `<thead>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableSectionElement}
+     */
     HtmlElementWrapper('thead');
+
+    /**
+     * Creates a `<tfoot>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableSectionElement}
+     */
     HtmlElementWrapper('tfoot');
+
+    /**
+     * Creates a `<tbody>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableSectionElement}
+     */
     HtmlElementWrapper('tbody');
+
+    /**
+     * Creates a `<tr>` element.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): HTMLTableRowElement}
+     */
     const Tr = HtmlElementWrapper('tr');
+
+    /**
+     * Alias for {@link Tr}.
+     * @type {typeof Tr}
+     */
     const TRow = Tr;
+
+    /**
+     * Creates a `<th>` element.
+     * @type {function(ThAttributes=, NdChild|NdChild[]=): HTMLTableCellElement}
+     */
     const Th = HtmlElementWrapper('th');
+
+    /**
+     * Alias for {@link Th}.
+     * @type {typeof Th}
+     */
     const THeadCell$1 = Th;
+
+    /**
+     * Creates a `<td>` element.
+     * @type {function(TdAttributes=, NdChild|NdChild[]=): HTMLTableCellElement}
+     */
     HtmlElementWrapper('td');
 
+    /**
+     * Creates an empty `DocumentFragment` wrapper.
+     * Useful for grouping elements without adding a DOM node.
+     * @type {function(GlobalAttributes=, NdChild|NdChild[]=): DocumentFragment}
+     */
     HtmlElementWrapper('');
 
     /**
@@ -6326,10 +7576,10 @@ var NativeComponents = (function (exports) {
         this.$element = null;
         this.$configs = configs;
         this.$fields = new Map();
-        this.$submitting = Observable(false);
-        this.$errors = Observable(null);
-        this.$isDirty = Observable(false);
-        this.$isValid = Observable(false);
+        this.$submitting = Observable$1(false);
+        this.$errors = Observable$1(null);
+        this.$isDirty = Observable$1(false);
+        this.$isValid = Observable$1(false);
     }
 
     FormControl.defaultLayoutTemplate = null;
@@ -7650,7 +8900,7 @@ var NativeComponents = (function (exports) {
             defaultItem: null,
             value: (config?.data && Validator.isObservable(config.data))
                 ? config.data
-                : Observable.array(config?.data || []),
+                : Observable$1.array(config?.data || []),
             rules: null,
             layout: null,
             template: null,
@@ -7747,8 +8997,8 @@ var NativeComponents = (function (exports) {
         defaultItemData = Validator.isObservable(defaultItemData)
             ? defaultItemData
             : Validator.isObject(defaultItemData)
-                ? Observable.init(defaultItemData)
-                : Observable(defaultItemData);
+                ? Observable$1.init(defaultItemData)
+                : Observable$1(defaultItemData);
 
         this.$items = this.$items || new WeakMap();
 
@@ -10230,9 +11480,9 @@ var NativeComponents = (function (exports) {
             ...configs
         });
 
-        this.$currentPage = Observable(1);
-        this.$selectedRows = Observable.array();
-        this.$expandedRows = Observable.array();
+        this.$currentPage = Observable$1(1);
+        this.$selectedRows = Observable$1.array();
+        this.$expandedRows = Observable$1.array();
     }
 
     DataTable.defaultToolbarTemplate = null;