native-document 1.0.95 → 1.0.99

package/dist/native-document.dev.js

@@ -37,59 +37,6 @@ var NativeDocument = (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`);
-                }
-            }
-        };
-    }());
-
     class NativeDocumentError extends Error {
         constructor(message, context = {}) {
             super(message);
@@ -191,6 +138,181 @@ var NativeDocument = (function (exports) {
         return this.observable.cleanup();
     };
 
+    const DocumentObserver = {
+        mounted: new WeakMap(),
+        beforeUnmount: new WeakMap(),
+        mountedSupposedSize: 0,
+        unmounted: new WeakMap(),
+        unmountedSupposedSize: 0,
+        observer: null,
+
+        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);
+        },
+
+        executeUnmountedCallback(node) {
+            const data = DocumentObserver.unmounted.get(node);
+            if(!data) {
+                return;
+            }
+            data.inDom = false;
+            if(!data.unmounted) {
+                return;
+            }
+
+            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;
+            }
+
+            if(shouldRemove) {
+                data.disconnect();
+                node.nd?.remove();
+            }
+        },
+
+        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);
+                        }
+                    }
+                }
+
+                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);
+                        }
+                    }
+                }
+            }
+        },
+
+        /**
+         * @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;
+
+            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;
+                }
+            };
+
+            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 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;
+            };
+
+            return {
+                disconnect: () => data?.disconnect(),
+
+                mounted: (callback) => {
+                    addListener('mounted', callback);
+                    DocumentObserver.mounted.set(element, data);
+                    if (!mountedRegistered) {
+                        DocumentObserver.mountedSupposedSize++;
+                        mountedRegistered = true;
+                    }
+                },
+
+                unmounted: (callback) => {
+                    addListener('unmounted', callback);
+                    DocumentObserver.unmounted.set(element, data);
+                    if (!unmountedRegistered) {
+                        DocumentObserver.unmountedSupposedSize++;
+                        unmountedRegistered = true;
+                    }
+                },
+
+                off: (type, callback) => {
+                    removeListener(type, callback);
+                }
+            };
+        }
+    };
+
+    DocumentObserver.observer = new MutationObserver(DocumentObserver.checkMutation);
+    DocumentObserver.observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+    });
+
     let PluginsManager$1 = null;
 
     {
@@ -271,1385 +393,1898 @@ var NativeDocument = (function (exports) {
 
     var PluginsManager = PluginsManager$1;
 
-    /**
-     * 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;
+    function NDElement(element) {
+        this.$element = element;
+        this.$observer = null;
+        {
+            PluginsManager.emit('NDElementCreated', element, this);
+        }
+    }
+
+    NDElement.prototype.__$isNDElement = true;
+
+    NDElement.prototype.valueOf = function() {
+        return this.$element;
     };
 
-    ObservableWhen.prototype.__$isObservableWhen = true;
+    NDElement.prototype.ref = function(target, name) {
+        target[name] = this.$element;
+        return this;
+    };
 
-    /**
-     * 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);
+    NDElement.prototype.refSelf = function(target, name) {
+        target[name] = this;
+        return this;
     };
 
-    /**
-     * 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;
+    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;
     };
 
-    /**
-     * 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;
+    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;
+    };
 
-    /**
-     * 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;
+    NDElement.prototype.lifecycle = function(states) {
+        this.$observer = this.$observer || DocumentObserver.watch(this.$element);
 
-    const nextTick = function(fn) {
-        let pending = false;
-        return function(...args) {
-            if (pending) return;
-            pending = true;
+        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;
+    };
 
-            Promise.resolve().then(() => {
-                fn.apply(this, args);
-                pending = false;
-            });
-        };
+    NDElement.prototype.mounted = function(callback) {
+        return this.lifecycle({ mounted: callback });
     };
 
-    /**
-     *
-     * @param {*} item
-     * @param {string|null} defaultKey
-     * @param {?Function} key
-     * @returns {*}
-     */
-    const getKey = (item, defaultKey, key) => {
-        if (Validator.isString(key)) {
-            const val = Validator.isObservable(item) ? item.val() : item;
-            const result = val?.[key];
-            return Validator.isObservable(result) ? result.val() : (result ?? defaultKey);
-        }
+    NDElement.prototype.unmounted = function(callback) {
+        return this.lifecycle({ unmounted: callback });
+    };
 
-        if (Validator.isFunction(key)) {
-            return key(item, defaultKey);
+    NDElement.prototype.beforeUnmount = function(id, callback) {
+        const el = this.$element;
+
+        if(!DocumentObserver.beforeUnmount.has(el)) {
+            DocumentObserver.beforeUnmount.set(el, new Map());
+            const originalRemove = el.remove.bind(el);
+
+            let  $isUnmounting = false;
+
+            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;
+                }
+            };
         }
 
-        const val = Validator.isObservable(item) ? item.val() : item;
-        return val ?? defaultKey;
+        DocumentObserver.beforeUnmount.get(el).set(id, callback);
+        return this;
     };
 
-    const trim = function(str, char) {
-        return str.replace(new RegExp(`^[${char}]+|[${char}]+$`, 'g'), '');
+    NDElement.prototype.htmlElement = function() {
+        return this.$element;
     };
 
-    const deepClone = (value, onObservableFound) => {
-        try {
-            if(window.structuredClone !== undefined) {
-                return window.structuredClone(value);
-            }
-        } catch (e){}
-
-        if (value === null || typeof value !== 'object') {
-            return value;
-        }
+    NDElement.prototype.node = NDElement.prototype.htmlElement;
 
-        // Dates
-        if (value instanceof Date) {
-            return new Date(value.getTime());
+    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);
 
-        // Arrays
-        if (Array.isArray(value)) {
-            return value.map(item => deepClone(item));
-        }
+        return this;
+    };
 
-        // Observables - keep the référence
-        if (Validator.isObservable(value)) {
-            onObservableFound && onObservableFound(value);
-            return value;
-        }
+    NDElement.prototype.openShadow = function(style = null) {
+        return this.shadow('open', style);
+    };
 
-        // Objects
-        const cloned = {};
-        for (const key in value) {
-            if (Object.hasOwn(value, key)) {
-                cloned[key] = deepClone(value[key]);
-            }
-        }
-        return cloned;
+    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 {*} value
-     * @param {{ propagation: boolean, reset: boolean} | null} configs
-     * @class ObservableItem
+     * @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);
      */
-    function ObservableItem(value, configs = null) {
-        value = Validator.isObservable(value) ? value.val() : value;
+    NDElement.prototype.attach = function(methodName, bindingHydrator) {
+        bindingHydrator.$hydrate(this.$element, methodName);
+        return this.$element;
+    };
 
-        this.$previousValue = null;
-        this.$currentValue = value;
+    /**
+     * Extends the current NDElement instance with custom methods.
+     * Methods are bound to the instance and available for chaining.
+     *
+     * @param {Object} methods - Object containing method definitions
+     * @returns {this} The NDElement instance with added methods for chaining
+     * @example
+     * element.nd.with({
+     *   highlight() {
+     *     this.$element.style.background = 'yellow';
+     *     return this;
+     *   }
+     * }).highlight().onClick(() => console.log('Clicked'));
+     */
+    NDElement.prototype.with = function(methods) {
+        if (!methods || typeof methods !== 'object') {
+            throw new NativeDocumentError('extend() requires an object of methods');
+        }
         {
-            this.$isCleanedUp = false;
+            if (!this.$localExtensions) {
+                this.$localExtensions = new Map();
+            }
         }
 
-        this.$firstListener = null;
-        this.$listeners = null;
-        this.$watchers = null;
-
-        this.$memoryId = null;
+        for (const name in methods) {
+            const method = methods[name];
 
-        if(configs) {
-            this.configs = configs;
-            if(configs.reset) {
-                this.$initialValue = Validator.isObject(value) ? deepClone(value) : value;
+            if (typeof method !== 'function') {
+                console.warn(`⚠️ extends(): "${name}" is not a function, skipping`);
+                continue;
+            }
+            {
+                if (this[name] && !this.$localExtensions.has(name)) {
+                    DebugManager.warn('NDElement.extend', `Method "${name}" already exists and will be overwritten`);
+                }
+                this.$localExtensions.set(name, method);
             }
-        }
-        {
-            PluginsManager.emit('CreateObservable', this);
-        }
-    }
 
-    Object.defineProperty(ObservableItem.prototype, '$value', {
-        get() {
-            return this.$currentValue;
-        },
-        set(value) {
-            this.set(value);
-        },
-        configurable: true,
-    });
+            this[name] = method.bind(this);
+        }
 
-    ObservableItem.prototype.__$isObservable = true;
-    const noneTrigger = function() {};
+        return this;
+    };
 
     /**
-     * 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.
+     * Extends the NDElement prototype with new methods available to all NDElement instances.
+     * Use this to add global methods to all NDElements.
      *
-     * @param {(value) => any} callback - Interceptor function that receives (newValue, currentValue) and returns the transformed value or undefined
-     * @returns {ObservableItem} The observable instance for chaining
+     * @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 count = Observable(0);
-     * count.intercept((newVal, oldVal) => Math.max(0, newVal)); // Prevent negative values
+     * NDElement.extend({
+     *   fadeIn() {
+     *     this.$element.style.opacity = '1';
+     *     return this;
+     *   }
+     * });
+     * // Now all NDElements have .fadeIn() method
+     * Div().nd.fadeIn();
      */
-    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;
+    NDElement.extend = function(methods) {
+        if (!methods || typeof methods !== 'object') {
+            throw new NativeDocumentError('NDElement.extend() requires an object of methods');
+        }
 
-        for(let i = 0, length = $listeners.length; i < length; i++) {
-            $listeners[i]($currentValue, $previousValue, operations);
+        if (Array.isArray(methods)) {
+            throw new NativeDocumentError('NDElement.extend() requires an object, not an array');
         }
-    };
 
-    ObservableItem.prototype.triggerWatchers = function(operations) {
-        const $watchers = this.$watchers;
-        const $previousValue = this.$previousValue;
-        const $currentValue = this.$currentValue;
+        const protectedMethods = new Set([
+            'constructor', 'valueOf', '$element', '$observer',
+            'ref', 'remove', 'cleanup', 'with', 'extend', 'attach',
+            'lifecycle', 'mounted', 'unmounted', 'unmountChildren'
+        ]);
 
-        const $currentValueCallbacks = $watchers.get($currentValue);
-        const $previousValueCallbacks = $watchers.get($previousValue);
-        if($currentValueCallbacks) {
-            $currentValueCallbacks(true, $previousValue, operations);
-        }
-        if($previousValueCallbacks) {
-            $previousValueCallbacks(false, $currentValue, operations);
-        }
-    };
+        for (const name in methods) {
+            if (!Object.hasOwn(methods, name)) {
+                continue;
+            }
 
-    ObservableItem.prototype.triggerAll = function(operations) {
-        this.triggerWatchers(operations);
-        this.triggerListeners(operations);
-    };
+            const method = methods[name];
 
-    ObservableItem.prototype.triggerWatchersAndFirstListener = function(operations) {
-        this.triggerWatchers(operations);
-        this.triggerFirstListener(operations);
-    };
+            if (typeof method !== 'function') {
+                DebugManager.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+                continue;
+            }
 
-    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;
+            if (protectedMethods.has(name)) {
+                DebugManager.error('NDElement.extend', `Cannot override protected method "${name}"`);
+                throw new NativeDocumentError(`Cannot override protected method "${name}"`);
             }
-            else {
-                this.trigger = this.triggerListeners;
+
+            if (NDElement.prototype[name]) {
+                DebugManager.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
-            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;
-        {
-            PluginsManager.emit('ObservableBeforeChange', this);
+            NDElement.prototype[name] = method;
         }
-        this.trigger();
-        this.$previousValue = null;
         {
-            PluginsManager.emit('ObservableAfterChange', this);
-        }
-    };
-
-    /**
-     * @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;
+            PluginsManager.emit('NDElementExtended', methods);
         }
 
-        this.$updateWithNewValue(newValue);
+        return NDElement;
     };
 
-    /**
-     * @param {*} data
-     */
-    ObservableItem.prototype.$basicSet = function(data) {
-        let newValue = (typeof data === 'function') ? data(this.$currentValue) : data;
-        this.$updateWithNewValue(newValue);
+    const COMMON_NODE_TYPES = {
+        ELEMENT: 1,
+        TEXT: 3,
+        COMMENT: 8,
+        DOCUMENT_FRAGMENT: 11
     };
 
-    ObservableItem.prototype.set = ObservableItem.prototype.$basicSet;
+    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];
+            }
 
-    ObservableItem.prototype.val = function() {
-        return this.$currentValue;
-    };
+            const invalid = children.filter(child => !this.isValidChild(child));
+            return invalid.length === 0;
+        },
+        validateChildren(children) {
+            if (!Array.isArray(children)) {
+                children = [children];
+            }
 
-    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);
-                }
+            const invalid = children.filter(child => !this.isValidChild(child));
+            if (invalid.length > 0) {
+                throw new NativeDocumentError(`Invalid children detected: ${invalid.map(i => typeof i).join(', ')}`);
             }
-        }
-        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]();
+            return children;
+        },
+        /**
+         * Check if the data contains observables.
+         * @param {Array|Object} data
+         * @returns {boolean}
+         */
+        containsObservables(data) {
+            if(!data) {
+                return false;
             }
-            this.$cleanupListeners = null;
-        }
-        MemoryManager.unregister(this.$memoryId);
-        this.disconnectAll();
-        {
-            this.$isCleanedUp = true;
-        }
-        delete this.$value;
-    };
-
-    /**
-     *
-     * @param {Function} callback
-     * @returns {(function(): void)}
-     */
-    ObservableItem.prototype.subscribe = function(callback) {
-        {
-            if (this.$isCleanedUp) {
-                DebugManager.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
-                return;
+            return Validator.isObject(data)
+                && Object.values(data).some(value => Validator.isObservable(value));
+        },
+        /**
+         * Check if the data contains an observable reference.
+         * @param {string} data
+         * @returns {boolean}
+         */
+        containsObservableReference(data) {
+            if(!data || typeof data !== 'string') {
+                return false;
             }
+            return /\{\{#ObItem::\([0-9]+\)\}\}/.test(data);
+        },
+        validateAttributes(attributes) {},
+
+        validateEventCallback(callback) {
             if (typeof callback !== 'function') {
-                throw new NativeDocumentError('Callback must be a function');
+                throw new NativeDocumentError('Event callback must be a function');
             }
         }
-        this.$listeners = this.$listeners ?? [];
-
-        this.$listeners.push(callback);
-        this.assocTrigger();
-        {
-            PluginsManager.emit('ObservableSubscribe', this);
-        }
     };
+    {
+        Validator.validateAttributes = function(attributes) {
+            if (!attributes || typeof attributes !== 'object') {
+                return attributes;
+            }
 
-    /**
-     * 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();
+            const reserved = [];
+            const foundReserved = Object.keys(attributes).filter(key => reserved.includes(key));
 
-        let watchValueList = this.$watchers.get(value);
+            if (foundReserved.length > 0) {
+                DebugManager.warn('Validator', `Reserved attributes found: ${foundReserved.join(', ')}`);
+            }
 
-        if(callback.__$isObservable) {
-            callback = callback.set.bind(callback);
-        }
+            return attributes;
+        };
+    }
 
-        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);
-        }
+    function Anchor(name, isUniqueChild = false) {
+        const anchorFragment = document.createDocumentFragment();
+        anchorFragment.__Anchor__ = true;
 
-        this.assocTrigger();
-    };
+        const anchorStart = document.createComment('Anchor Start : '+name);
+        const anchorEnd = document.createComment('/ Anchor End '+name);
 
-    /**
-     * 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;
+        anchorFragment.appendChild(anchorStart);
+        anchorFragment.appendChild(anchorEnd);
 
-        const watchValueList = this.$watchers.get(value);
-        if(!watchValueList) return;
+        anchorFragment.nativeInsertBefore = anchorFragment.insertBefore;
+        anchorFragment.nativeAppendChild = anchorFragment.appendChild;
+        anchorFragment.nativeAppend = anchorFragment.append;
 
-        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();
-    };
+        const isParentUniqueChild = (parent) => (isUniqueChild || (parent.firstChild === anchorStart && parent.lastChild === anchorEnd));
 
-    /**
-     * 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 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);
+        };
 
-        const handler = (val) => {
-            if (fn(val)) {
-                this.unsubscribe(handler);
-                callback(val);
+        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);
         };
-        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();
-        {
-            PluginsManager.emit('ObservableUnsubscribe', this);
-        }
-    };
+        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);
+        };
 
-    /**
-     * Create an Observable checker instance
-     * @param callback
-     * @returns {ObservableChecker}
-     */
-    ObservableItem.prototype.check = function(callback) {
-        return new ObservableChecker(this, callback)
-    };
+        anchorFragment.append = function(...args ) {
+            return anchorFragment.appendChild(args);
+        };
 
-    /**
-     * 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;
-    };
+        anchorFragment.removeChildren = async function() {
+            const parent = anchorEnd.parentNode;
+            if(parent === anchorFragment) {
+                return;
+            }
+            // if(isParentUniqueChild(parent)) {
+            //     parent.replaceChildren(anchorStart, anchorEnd);
+            //     return;
+            // }
 
+            let itemToRemove = anchorStart.nextSibling, tempItem;
+            const removes = [];
+            while(itemToRemove && itemToRemove !== anchorEnd) {
+                tempItem = itemToRemove.nextSibling;
+                removes.push(itemToRemove.remove());
+                itemToRemove =  tempItem;
+            }
+            await Promise.all(removes);
+        };
+
+        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);
+        };
+
+        anchorFragment.removeWithAnchors = async function() {
+            await anchorFragment.removeChildren();
+            anchorStart.remove();
+            anchorEnd.remove();
+        };
+
+        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);
+        };
+
+        anchorFragment.setContent = anchorFragment.replaceContent;
+
+        anchorFragment.insertBefore = function(child, anchor = null) {
+            anchorFragment.appendChild(child, anchor);
+        };
+
+
+        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;
+    }
     /**
-     * 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 {HTMLElement|DocumentFragment|Text|String|Array} children
+     * @param {{ parent?: HTMLElement, name?: String}} configs
+     * @returns {DocumentFragment}
+     */
+    function createPortal(children, { parent, name = 'unnamed' } = {}) {
+        const anchor = Anchor('Portal '+name);
+        anchor.appendChild(ElementCreator.getChild(children));
+
+        (parent || document.body).appendChild(anchor);
+        return anchor;
+    }
+
+    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`);
+                }
+            }
+        };
+    }());
+
+    /**
+     * 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
-     * @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"
+     * @class ObservableWhen
      */
-    ObservableItem.prototype.when = function(value) {
-        return new ObservableWhen(this, value);
+    const ObservableWhen = function(observer, value) {
+        this.$target = value;
+        this.$observer = observer;
     };
 
+    ObservableWhen.prototype.__$isObservableWhen = true;
+
     /**
-     * Compares the observable's current value with another value or observable.
+     * Subscribes to changes in the match status (true when observable equals target value).
      *
-     * @param {*|ObservableItem} other - Value or observable to compare against
-     * @returns {boolean} True if values are equal
+     * @param {Function} callback - Function called with boolean indicating if values match
+     * @returns {Function} Unsubscribe function
      * @example
-     * const a = Observable(5);
-     * const b = Observable(5);
-     * a.equals(5);  // true
-     * a.equals(b);  // true
-     * a.equals(10); // false
+     * const status = Observable('idle');
+     * const isLoading = status.when('loading');
+     * isLoading.subscribe(active => console.log('Loading:', active));
      */
-    ObservableItem.prototype.equals = function(other) {
-        if(Validator.isObservable(other)) {
-            return this.$currentValue === other.$currentValue;
-        }
-        return this.$currentValue === other;
+    ObservableWhen.prototype.subscribe = function(callback) {
+        return this.$observer.on(this.$target, callback);
     };
 
     /**
-     * Converts the observable's current value to a boolean.
+     * Returns true if the observable's current value equals the target value.
      *
-     * @returns {boolean} The boolean representation of the current value
-     * @example
-     * const count = Observable(0);
-     * count.toBool(); // false
-     * count.set(5);
-     * count.toBool(); // true
+     * @returns {boolean} True if observable value matches target value
      */
-    ObservableItem.prototype.toBool = function() {
-        return !!this.$currentValue;
+    ObservableWhen.prototype.val = function() {
+        return this.$observer.$currentValue === this.$target;
     };
 
     /**
-     * Toggles the boolean value of the observable (false becomes true, true becomes false).
+     * Returns true if the observable's current value equals the target value.
+     * Alias for val().
      *
-     * @example
-     * const isOpen = Observable(false);
-     * isOpen.toggle(); // Now true
-     * isOpen.toggle(); // Now false
+     * @returns {boolean} True if observable value matches target value
      */
-    ObservableItem.prototype.toggle = function() {
-        this.set(!this.$currentValue);
-    };
+    ObservableWhen.prototype.isMatch = ObservableWhen.prototype.val;
 
     /**
-     * Resets the observable to its initial value.
-     * Only works if the observable was created with { reset: true } config.
+     * Returns true if the observable's current value equals the target value.
+     * Alias for val().
      *
-     * @example
-     * const count = Observable(0, { reset: true });
-     * count.set(10);
-     * count.reset(); // Back to 0
+     * @returns {boolean} True if observable value matches target value
      */
-    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);
-    };
+    ObservableWhen.prototype.isActive = ObservableWhen.prototype.val;
 
-    /**
-     * 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);
+    const nextTick = function(fn) {
+        let pending = false;
+        return function(...args) {
+            if (pending) return;
+            pending = true;
+
+            Promise.resolve().then(() => {
+                fn.apply(this, args);
+                pending = false;
+            });
+        };
     };
 
     /**
-     * Returns the primitive value of the observable (its current value).
-     * Called automatically in type coercion contexts.
      *
-     * @returns {*} The current value of the observable
+     * @param {*} item
+     * @param {string|null} defaultKey
+     * @param {?Function} key
+     * @returns {*}
      */
-    ObservableItem.prototype.valueOf = function() {
-        return this.$currentValue;
+    const getKey = (item, defaultKey, key) => {
+        if (Validator.isString(key)) {
+            const val = Validator.isObservable(item) ? item.val() : item;
+            const result = val?.[key];
+            return Validator.isObservable(result) ? result.val() : (result ?? defaultKey);
+        }
+
+        if (Validator.isFunction(key)) {
+            return key(item, defaultKey);
+        }
+
+        const val = Validator.isObservable(item) ? item.val() : item;
+        return val ?? defaultKey;
     };
 
-    const DocumentObserver = {
-        mounted: new WeakMap(),
-        beforeUnmount: new WeakMap(),
-        mountedSupposedSize: 0,
-        unmounted: new WeakMap(),
-        unmountedSupposedSize: 0,
-        observer: null,
+    const trim = function(str, char) {
+        return str.replace(new RegExp(`^[${char}]+|[${char}]+$`, 'g'), '');
+    };
 
-        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;
+    const deepClone = (value, onObservableFound) => {
+        try {
+            if(window.structuredClone !== undefined) {
+                return window.structuredClone(value);
             }
-            data.mounted(node);
-        },
+        } catch (e){}
 
-        executeUnmountedCallback(node) {
-            const data = DocumentObserver.unmounted.get(node);
-            if(!data) {
-                return;
-            }
-            data.inDom = false;
-            if(!data.unmounted) {
-                return;
-            }
+        if (value === null || typeof value !== 'object') {
+            return value;
+        }
 
-            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;
+        // Dates
+        if (value instanceof Date) {
+            return new Date(value.getTime());
+        }
+
+        // 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;
+    };
 
-            if(shouldRemove) {
-                data.disconnect();
-                node.nd?.remove();
+    const LocalStorage = {
+        getJson(key) {
+            let value = localStorage.getItem(key);
+            try {
+                return JSON.parse(value);
+            } catch (e) {
+                throw new NativeDocumentError('invalid_json:'+key);
             }
         },
+        getNumber(key) {
+            return Number(this.get(key));
+        },
+        getBool(key) {
+            const value = this.get(key);
+            return value === 'true' || value === '1';
+        },
+        setJson(key, value) {
+            localStorage.setItem(key, JSON.stringify(value));
+        },
+        setBool(key, value) {
+            localStorage.setItem(key, value ? 'true' : 'false');
+        },
+        get(key, defaultValue = null) {
+            return localStorage.getItem(key) || defaultValue;
+        },
+        set(key, value) {
+            return localStorage.setItem(key, value);
+        },
+        remove(key) {
+            localStorage.removeItem(key);
+        },
+        has(key) {
+            return localStorage.getItem(key) != 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);
-                        }
-                    }
-                }
+    const $getFromStorage = (key, value) => {
+        if(!LocalStorage.has(key)) {
+            return value;
+        }
+        switch (typeof value) {
+            case 'object': return LocalStorage.getJson(key) ?? value;
+            case 'boolean': return LocalStorage.getBool(key) ?? value;
+            case 'number': return LocalStorage.getNumber(key) ?? value;
+            default: return LocalStorage.get(key, value) ?? value;
+        }
+    };
 
-                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);
-                        }
-                    }
-                }
-            }
-        },
+    const $saveToStorage = (value) => {
+        switch (typeof value) {
+            case 'object': return LocalStorage.setJson;
+            case 'boolean': return LocalStorage.setBool;
+            default: return LocalStorage.set;
+        }
+    };
+
+    const StoreFactory = function() {
+
+        const $stores = new Map();
+        const $followersCache = new Map();
 
         /**
-         * @param {HTMLElement} element
-         * @param {boolean} inDom
-         * @returns {{ disconnect: Function, mounted: Function, unmounted: Function, off: Function }}
+         * Internal helper — retrieves a store entry or throws if not found.
          */
-        watch: function(element, inDom = false) {
-            let mountedRegistered   = false;
-            let unmountedRegistered = 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 item;
+        };
 
-            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;
-                }
+        /**
+         * Internal helper — blocks write operations on a read-only observer.
+         */
+        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');
+        };
 
-            const addListener = (type, callback) => {
-                if (!data[type]) {
-                    data[type] = callback;
-                    return;
+        const $createObservable = (value, options = {}) => {
+            if(Array.isArray(value)) {
+                return Observable.array(value, options);
+            }
+            if(typeof value === 'object') {
+                return Observable.object(value, options);
+            }
+            return Observable(value, options);
+        };
+
+        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.`
+                    );
                 }
-                if (!Array.isArray(data[type])) {
-                    data[type] = [data[type], callback];
-                    return;
+                const observer = $createObservable(value);
+                $stores.set(name, { observer, subscribers: new Set(), resettable: false, composed: false });
+                return observer;
+            },
+
+            /**
+             * 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.`
+                    );
                 }
-                data[type].push(callback);
-            };
+                const observer = $createObservable(value, { reset: true });
+                $stores.set(name, { observer, subscribers: new Set(), resettable: true, composed: false });
+                return observer;
+            },
 
-            const removeListener = (type, callback) => {
-                if(!data?.[type]) {
-                    return;
+            /**
+             * 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(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 (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.`
+                    );
+                }
+
+                // Resolve dependency observers
+                const depObservers = dependencies.map(depName => {
+                    if(typeof depName !== 'string') {
+                        return depName;
                     }
-                    if(data[type].length === 0) {
-                        data[type] = null;
+                    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;
-                }
-                data[type] = null;
-            };
+                    return depItem.observer;
+                });
 
-            return {
-                disconnect: () => data?.disconnect(),
+                // Create computed observable from dependency observers
+                const observer = Observable.computed(computation, depObservers);
 
-                mounted: (callback) => {
-                    addListener('mounted', callback);
-                    DocumentObserver.mounted.set(element, data);
-                    if (!mountedRegistered) {
-                        DocumentObserver.mountedSupposedSize++;
-                        mountedRegistered = true;
-                    }
-                },
+                $stores.set(name, { observer, subscribers: new Set(), resettable: false, composed: true });
+                return observer;
+            },
 
-                unmounted: (callback) => {
-                    addListener('unmounted', callback);
-                    DocumentObserver.unmounted.set(element, data);
-                    if (!unmountedRegistered) {
-                        DocumentObserver.unmountedSupposedSize++;
-                        unmountedRegistered = true;
-                    }
-                },
+            /**
+             * Returns true if a store with the given name exists.
+             *
+             * @param {string} name
+             * @returns {boolean}
+             */
+            has(name) {
+                return $stores.has(name);
+            },
 
-                off: (type, callback) => {
-                    removeListener(type, callback);
+            /**
+             * 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.`
+                    );
                 }
-            };
-        }
-    };
-
-    DocumentObserver.observer = new MutationObserver(DocumentObserver.checkMutation);
-    DocumentObserver.observer.observe(document.body, {
-        childList: true,
-        subtree: true,
-    });
+                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();
+            },
 
-    function NDElement(element) {
-        this.$element = element;
-        this.$observer = null;
-        {
-            PluginsManager.emit('NDElementCreated', element, this);
-        }
-    }
+            /**
+             * 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);
 
-    NDElement.prototype.__$isNDElement = true;
+                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.`
+                    );
+                }
 
-    NDElement.prototype.valueOf = function() {
-        return this.$element;
-    };
+                const { observer: originalObserver, subscribers } = item;
+                const observerFollower = $createObservable(originalObserver.val());
 
-    NDElement.prototype.ref = function(target, name) {
-        target[name] = this.$element;
-        return this;
-    };
+                const onStoreChange    = value => observerFollower.set(value);
+                const onFollowerChange = value => originalObserver.set(value);
 
-    NDElement.prototype.refSelf = function(target, name) {
-        target[name] = this;
-        return this;
-    };
+                originalObserver.subscribe(onStoreChange);
+                observerFollower.subscribe(onFollowerChange);
 
-    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;
-    };
+                observerFollower.destroy = () => {
+                    originalObserver.unsubscribe(onStoreChange);
+                    observerFollower.unsubscribe(onFollowerChange);
+                    subscribers.delete(observerFollower);
+                    observerFollower.cleanup();
+                };
+                observerFollower.dispose = observerFollower.destroy;
 
-    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;
-    };
+                subscribers.add(observerFollower);
+                return observerFollower;
+            },
 
-    NDElement.prototype.lifecycle = function(states) {
-        this.$observer = this.$observer || DocumentObserver.watch(this.$element);
+            /**
+             * 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());
 
-        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;
-    };
+                const onStoreChange = value => observerFollower.set(value);
+                originalObserver.subscribe(onStoreChange);
 
-    NDElement.prototype.mounted = function(callback) {
-        return this.lifecycle({ mounted: callback });
-    };
+                $applyReadOnly(observerFollower, name, 'follow');
 
-    NDElement.prototype.unmounted = function(callback) {
-        return this.lifecycle({ unmounted: callback });
-    };
+                observerFollower.destroy = () => {
+                    originalObserver.unsubscribe(onStoreChange);
+                    subscribers.delete(observerFollower);
+                    observerFollower.cleanup();
+                };
+                observerFollower.dispose = observerFollower.destroy;
 
-    NDElement.prototype.beforeUnmount = function(id, callback) {
-        const el = this.$element;
+                subscribers.add(observerFollower);
+                return observerFollower;
+            },
 
-        if(!DocumentObserver.beforeUnmount.has(el)) {
-            DocumentObserver.beforeUnmount.set(el, new Map());
-            const originalRemove = el.remove.bind(el);
+            /**
+             * 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;
+            },
 
-            let  $isUnmounting = false;
+            /**
+             * @param {string} name
+             * @returns {{ observer: ObservableItem, subscribers: Set } | null}
+             */
+            getWithSubscribers(name) {
+                return $stores.get(name) ?? null;
+            },
 
-            el.remove = async () => {
-                if($isUnmounting) {
+            /**
+             * 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;
                 }
-                $isUnmounting = true;
+                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(localstorage_key, value));
+                const saver = $saveToStorage(value);
 
-                try {
-                    const callbacks = DocumentObserver.beforeUnmount.get(el);
-                    for (const cb of callbacks.values()) {
-                        await cb.call(this, el);
+                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(localstorage_key, value));
+                const saver = $saveToStorage(value);
+                observer.subscribe((val) => saver(localstorage_key, val));
+
+                const originalReset = observer.reset.bind(observer);
+                observer.reset = () => {
+                    LocalStorage.remove(localstorage_key);
+                    originalReset();
+                };
+
+                return observer;
+            }
+        };
+
+
+        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);
                     }
-                } finally {
-                    originalRemove();
-                    $isUnmounting = false;
+                    const follower = target.follow(prop);
+                    $followersCache.set(prop, follower);
+                    return follower;
                 }
-            };
-        }
-
-        DocumentObserver.beforeUnmount.get(el).set(id, callback);
-        return this;
+                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.`);
+            }
+        });
     };
 
-    NDElement.prototype.htmlElement = function() {
-        return this.$element;
-    };
+    const Store = StoreFactory();
 
-    NDElement.prototype.node = NDElement.prototype.htmlElement;
+    Store.create('locale', 'fr');
 
-    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);
+    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;
+            }, {})
+        };
+    };
+
+    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));
+        },
 
-        return this;
-    };
+        time: (value, locale, { format, hour = '2-digit', minute = '2-digit', second } = {}) => {
+            if (format) {
+                const { d, parts } = $parseDateParts(value, locale);
+                return $applyDatePattern(format, d, parts);
+            }
+            return new Intl.DateTimeFormat(locale, { hour, minute, second }).format(new Date(value));
+        },
 
-    NDElement.prototype.openShadow = function(style = null) {
-        return this.shadow('open', style);
-    };
+        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);
+            }
+            return new Intl.DateTimeFormat(locale, { dateStyle, hour, minute, second }).format(new Date(value));
+        },
 
-    NDElement.prototype.closedShadow = function(style = null) {
-        return this.shadow('closed', style);
+        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}`;
+        },
     };
 
     /**
-     * Attaches a template binding to the element by hydrating it with the specified method.
      *
-     * @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 {*} value
+     * @param {{ propagation: boolean, reset: boolean} | null} configs
+     * @class ObservableItem
      */
-    NDElement.prototype.attach = function(methodName, bindingHydrator) {
-        bindingHydrator.$hydrate(this.$element, methodName);
-        return this.$element;
-    };
+    function ObservableItem(value, configs = null) {
+        value = Validator.isObservable(value) ? value.val() : value;
 
-    /**
-     * Extends the current NDElement instance with custom methods.
-     * Methods are bound to the instance and available for chaining.
-     *
-     * @param {Object} methods - Object containing method definitions
-     * @returns {this} The NDElement instance with added methods for chaining
-     * @example
-     * element.nd.with({
-     *   highlight() {
-     *     this.$element.style.background = 'yellow';
-     *     return this;
-     *   }
-     * }).highlight().onClick(() => console.log('Clicked'));
-     */
-    NDElement.prototype.with = function(methods) {
-        if (!methods || typeof methods !== 'object') {
-            throw new NativeDocumentError('extend() requires an object of methods');
-        }
+        this.$previousValue = null;
+        this.$currentValue = value;
         {
-            if (!this.$localExtensions) {
-                this.$localExtensions = new Map();
-            }
+            this.$isCleanedUp = false;
         }
 
-        for (const name in methods) {
-            const method = methods[name];
+        this.$firstListener = null;
+        this.$listeners = null;
+        this.$watchers = null;
 
-            if (typeof method !== 'function') {
-                console.warn(`⚠️ extends(): "${name}" is not a function, skipping`);
-                continue;
-            }
-            {
-                if (this[name] && !this.$localExtensions.has(name)) {
-                    DebugManager.warn('NDElement.extend', `Method "${name}" already exists and will be overwritten`);
-                }
-                this.$localExtensions.set(name, method);
-            }
+        this.$memoryId = null;
 
-            this[name] = method.bind(this);
+        if(configs) {
+            this.configs = configs;
+            if(configs.reset) {
+                this.$initialValue = Validator.isObject(value) ? deepClone(value) : value;
+            }
+        }
+        {
+            PluginsManager.emit('CreateObservable', this);
         }
+    }
 
-        return this;
-    };
+    Object.defineProperty(ObservableItem.prototype, '$value', {
+        get() {
+            return this.$currentValue;
+        },
+        set(value) {
+            this.set(value);
+        },
+        configurable: true,
+    });
+
+    ObservableItem.prototype.__$isObservable = true;
+    const noneTrigger = function() {};
 
     /**
-     * Extends the NDElement prototype with new methods available to all NDElement instances.
-     * Use this to add global methods to all NDElements.
+     * 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 {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
+     * @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
-     * NDElement.extend({
-     *   fadeIn() {
-     *     this.$element.style.opacity = '1';
-     *     return this;
-     *   }
-     * });
-     * // Now all NDElements have .fadeIn() method
-     * Div().nd.fadeIn();
+     * const count = Observable(0);
+     * count.intercept((newVal, oldVal) => Math.max(0, newVal)); // Prevent negative values
      */
-    NDElement.extend = function(methods) {
-        if (!methods || typeof methods !== 'object') {
-            throw new NativeDocumentError('NDElement.extend() requires an object of methods');
-        }
+    ObservableItem.prototype.intercept = function(callback) {
+        this.$interceptor = callback;
+        this.set = this.$setWithInterceptor;
+        return this;
+    };
 
-        if (Array.isArray(methods)) {
-            throw new NativeDocumentError('NDElement.extend() requires an object, not an array');
+    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);
         }
+    };
 
-        const protectedMethods = new Set([
-            'constructor', 'valueOf', '$element', '$observer',
-            'ref', 'remove', 'cleanup', 'with', 'extend', 'attach',
-            'lifecycle', 'mounted', 'unmounted', 'unmountChildren'
-        ]);
+    ObservableItem.prototype.triggerWatchers = function(operations) {
+        const $watchers = this.$watchers;
+        const $previousValue = this.$previousValue;
+        const $currentValue = this.$currentValue;
 
-        for (const name in methods) {
-            if (!Object.hasOwn(methods, name)) {
-                continue;
-            }
+        const $currentValueCallbacks = $watchers.get($currentValue);
+        const $previousValueCallbacks = $watchers.get($previousValue);
+        if($currentValueCallbacks) {
+            $currentValueCallbacks(true, $previousValue, operations);
+        }
+        if($previousValueCallbacks) {
+            $previousValueCallbacks(false, $currentValue, operations);
+        }
+    };
 
-            const method = methods[name];
+    ObservableItem.prototype.triggerAll = function(operations) {
+        this.triggerWatchers(operations);
+        this.triggerListeners(operations);
+    };
 
-            if (typeof method !== 'function') {
-                DebugManager.warn('NDElement.extend', `"${name}" is not a function, skipping`);
-                continue;
-            }
+    ObservableItem.prototype.triggerWatchersAndFirstListener = function(operations) {
+        this.triggerWatchers(operations);
+        this.triggerFirstListener(operations);
+    };
 
-            if (protectedMethods.has(name)) {
-                DebugManager.error('NDElement.extend', `Cannot override protected method "${name}"`);
-                throw new NativeDocumentError(`Cannot override protected method "${name}"`);
+    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;
             }
-
-            if (NDElement.prototype[name]) {
-                DebugManager.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+            else {
+                this.trigger = this.triggerListeners;
             }
+            return;
+        }
+        if(this.$watchers?.size) {
+            this.trigger = this.triggerWatchers;
+            return;
+        }
+        this.trigger = noneTrigger;
+    };
+    ObservableItem.prototype.trigger = noneTrigger;
 
-            NDElement.prototype[name] = method;
+    ObservableItem.prototype.$updateWithNewValue = function(newValue) {
+        newValue = newValue?.__$isObservable ? newValue.val() : newValue;
+        if(this.$currentValue === newValue) {
+            return;
         }
+        this.$previousValue = this.$currentValue;
+        this.$currentValue = newValue;
         {
-            PluginsManager.emit('NDElementExtended', methods);
+            PluginsManager.emit('ObservableBeforeChange', this);
+        }
+        this.trigger();
+        this.$previousValue = null;
+        {
+            PluginsManager.emit('ObservableAfterChange', this);
         }
+    };
 
-        return NDElement;
+    /**
+     * @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);
     };
 
-    function TemplateBinding(hydrate) {
-        this.$hydrate = hydrate;
-    }
+    /**
+     * @param {*} data
+     */
+    ObservableItem.prototype.$basicSet = function(data) {
+        let newValue = (typeof data === 'function') ? data(this.$currentValue) : data;
+        this.$updateWithNewValue(newValue);
+    };
 
-    TemplateBinding.prototype.__$isTemplateBinding = true;
+    ObservableItem.prototype.set = ObservableItem.prototype.$basicSet;
 
-    const COMMON_NODE_TYPES = {
-        ELEMENT: 1,
-        TEXT: 3,
-        COMMENT: 8,
-        DOCUMENT_FRAGMENT: 11
+    ObservableItem.prototype.val = function() {
+        return this.$currentValue;
     };
 
-    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];
+    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;
+    };
 
-            const invalid = children.filter(child => !this.isValidChild(child));
-            return invalid.length === 0;
-        },
-        validateChildren(children) {
-            if (!Array.isArray(children)) {
-                children = [children];
-            }
+    /**
+     * 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);
+    };
 
-            const invalid = children.filter(child => !this.isValidChild(child));
-            if (invalid.length > 0) {
-                throw new NativeDocumentError(`Invalid children detected: ${invalid.map(i => typeof i).join(', ')}`);
+    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();
+        {
+            this.$isCleanedUp = true;
+        }
+        delete this.$value;
+    };
 
-            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));
-        },
-        /**
-         * Check if the data contains an observable reference.
-         * @param {string} data
-         * @returns {boolean}
-         */
-        containsObservableReference(data) {
-            if(!data || typeof data !== 'string') {
-                return false;
+    /**
+     *
+     * @param {Function} callback
+     * @returns {(function(): void)}
+     */
+    ObservableItem.prototype.subscribe = function(callback) {
+        {
+            if (this.$isCleanedUp) {
+                DebugManager.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
+                return;
             }
-            return /\{\{#ObItem::\([0-9]+\)\}\}/.test(data);
-        },
-        validateAttributes(attributes) {},
-
-        validateEventCallback(callback) {
             if (typeof callback !== 'function') {
-                throw new NativeDocumentError('Event callback must be a function');
+                throw new NativeDocumentError('Callback must be a function');
             }
         }
-    };
-    {
-        Validator.validateAttributes = function(attributes) {
-            if (!attributes || typeof attributes !== 'object') {
-                return attributes;
-            }
+        this.$listeners = this.$listeners ?? [];
 
-            const reserved = [];
-            const foundReserved = Object.keys(attributes).filter(key => reserved.includes(key));
+        this.$listeners.push(callback);
+        this.assocTrigger();
+        {
+            PluginsManager.emit('ObservableSubscribe', this);
+        }
+    };
 
-            if (foundReserved.length > 0) {
-                DebugManager.warn('Validator', `Reserved attributes found: ${foundReserved.join(', ')}`);
-            }
+    /**
+     * 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();
 
-            return attributes;
-        };
-    }
+        let watchValueList = this.$watchers.get(value);
 
-    function Anchor(name, isUniqueChild = false) {
-        const anchorFragment = document.createDocumentFragment();
-        anchorFragment.__Anchor__ = true;
+        if(callback.__$isObservable) {
+            callback = callback.set.bind(callback);
+        }
 
-        const anchorStart = document.createComment('Anchor Start : '+name);
-        const anchorEnd = document.createComment('/ Anchor End '+name);
+        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);
+        }
 
-        anchorFragment.appendChild(anchorStart);
-        anchorFragment.appendChild(anchorEnd);
+        this.assocTrigger();
+    };
 
-        anchorFragment.nativeInsertBefore = anchorFragment.insertBefore;
-        anchorFragment.nativeAppendChild = anchorFragment.appendChild;
-        anchorFragment.nativeAppend = anchorFragment.append;
+    /**
+     * 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 isParentUniqueChild = (parent) => (isUniqueChild || (parent.firstChild === anchorStart && parent.lastChild === anchorEnd));
+        const watchValueList = this.$watchers.get(value);
+        if(!watchValueList) return;
 
-        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);
-        };
+        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();
+    };
 
-        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);
-        };
+    /**
+     * 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;
 
-        anchorFragment.appendChild = function(child, before = null) {
-            const parent = anchorEnd.parentNode;
-            if(!parent) {
-                DebugManager.error('Anchor', 'Anchor : parent not found', child);
-                return;
+        const handler = (val) => {
+            if (fn(val)) {
+                this.unsubscribe(handler);
+                callback(val);
             }
-            before = before ?? anchorEnd;
-            insertBefore(parent, child, before);
         };
+        this.subscribe(handler);
+    };
 
-        anchorFragment.append = function(...args ) {
-            return anchorFragment.appendChild(args);
-        };
+    /**
+     * 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();
+        {
+            PluginsManager.emit('ObservableUnsubscribe', this);
+        }
+    };
 
-        anchorFragment.removeChildren = async function() {
-            const parent = anchorEnd.parentNode;
-            if(parent === anchorFragment) {
-                return;
-            }
-            // if(isParentUniqueChild(parent)) {
-            //     parent.replaceChildren(anchorStart, anchorEnd);
-            //     return;
-            // }
+    /**
+     * Create an Observable checker instance
+     * @param callback
+     * @returns {ObservableChecker}
+     */
+    ObservableItem.prototype.check = function(callback) {
+        return new ObservableChecker(this, 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);
-        };
+    ObservableItem.prototype.transform = ObservableItem.prototype.check;
+    ObservableItem.prototype.pluck = ObservableItem.prototype.check;
+    ObservableItem.prototype.is = ObservableItem.prototype.check;
+    ObservableItem.prototype.select = ObservableItem.prototype.check;
 
-        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);
-        };
+    /**
+     * 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;
+    };
 
-        anchorFragment.removeWithAnchors = async function() {
-            await anchorFragment.removeChildren();
-            anchorStart.remove();
-            anchorEnd.remove();
-        };
+    /**
+     * 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);
+    };
 
-        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);
-        };
+    /**
+     * 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;
+    };
 
-        anchorFragment.setContent = anchorFragment.replaceContent;
+    /**
+     * 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.insertBefore = function(child, anchor = null) {
-            anchorFragment.appendChild(child, anchor);
-        };
+    /**
+     * 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);
+    };
 
+    /**
+     * 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.endElement = function() {
-            return anchorEnd;
-        };
+    /**
+     * 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);
+    };
 
-        anchorFragment.startElement = function() {
-            return anchorStart;
-        };
-        anchorFragment.restore = function() {
-            anchorFragment.appendChild(anchorFragment);
-        };
-        anchorFragment.clear = anchorFragment.remove;
-        anchorFragment.detach = anchorFragment.remove;
+    /**
+     * 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.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;
-    }
     /**
+     * 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"
      *
-     * @param {HTMLElement|DocumentFragment|Text|String|Array} children
-     * @param {{ parent?: HTMLElement, name?: String}} configs
-     * @returns {DocumentFragment}
+     * // 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');
      */
-    function createPortal(children, { parent, name = 'unnamed' } = {}) {
-        const anchor = Anchor('Portal '+name);
-        anchor.appendChild(ElementCreator.getChild(children));
+    ObservableItem.prototype.format = function(type, options = {}) {
+        const self = this;
 
-        (parent || document.body).appendChild(anchor);
-        return anchor;
-    }
+        if (typeof type === 'function') {
+            return new ObservableChecker(self, type);
+        }
 
-    DocumentFragment.prototype.setAttribute = () => {};
+        {
+            if (!Formatters[type]) {
+                throw new NativeDocumentError(
+                    `Observable.format : unknown type '${type}'. Available : ${Object.keys(Formatters).join(', ')}.`
+                );
+            }
+        }
 
-    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 formatter = Formatters[type];
+        const localeObservable = Store.follow('locale');
+
+        return Observable.computed(() => formatter(self.val(), localeObservable.val(), options),
+            [self, localeObservable]
+        );
+    };
+
+    ObservableItem.prototype.persist = function(key, options = {}) {
+        let value = $getFromStorage(key, this.$currentValue);
+        if(options.get) {
+            value = options.get(value);
+        }
+        this.set(value);
+        const saver = $saveToStorage(this.$currentValue);
+        this.subscribe((newValue) => {
+            saver(key, options.set ? options.set(newValue) : newValue);
+        });
+        return this;
+    };
 
     /**
      *
@@ -1853,6 +2488,12 @@ var NativeDocument = (function (exports) {
         return element;
     }
 
+    function TemplateBinding(hydrate) {
+        this.$hydrate = hydrate;
+    }
+
+    TemplateBinding.prototype.__$isTemplateBinding = true;
+
     String.prototype.toNdElement = function () {
         const formattedChild = this.resolveObservableTemplate ? this.resolveObservableTemplate() : this;
         if(Validator.isString(formattedChild)) {
@@ -3640,6 +4281,68 @@ var NativeDocument = (function (exports) {
         });
     };
 
+    ObservableArray.prototype.deepSubscribe = function(callback) {
+        const updatedValue = nextTick(() => callback(this.val()));
+        const $listeners = new WeakMap();
+
+        const bindItem = (item) => {
+            if ($listeners.has(item)) {
+                return;
+            }
+            if (item?.__$isObservableArray) {
+                $listeners.set(item, item.deepSubscribe(updatedValue));
+                return;
+            }
+            if (item?.__$isObservable) {
+                item.subscribe(updatedValue);
+                $listeners.set(item, () => item.unsubscribe(updatedValue));
+            }
+        };
+
+        const unbindItem = (item) => {
+            const unsub = $listeners.get(item);
+            if (unsub) {
+                unsub();
+                $listeners.delete(item);
+            }
+        };
+
+        this.$currentValue.forEach(bindItem);
+        this.subscribe(updatedValue);
+
+        this.subscribe((items, _, operations) => {
+            switch (operations?.action) {
+                case 'push':
+                case 'unshift':
+                    operations.args.forEach(bindItem);
+                    break;
+
+                case 'splice': {
+                    const [start, deleteCount, ...newItems] = operations.args;
+                    operations.result?.forEach(unbindItem);
+                    newItems.forEach(bindItem);
+                    break;
+                }
+
+                case 'remove':
+                    unbindItem(operations.result);
+                    break;
+
+                case 'merge':
+                    operations.args.forEach(bindItem);
+                    break;
+
+                case 'clear':
+                    this.$currentValue.forEach(unbindItem);
+                    break;
+            }
+        });
+
+        return () => {
+            this.$currentValue.forEach(unbindItem);
+        };
+    };
+
     /**
      * Creates an observable array with reactive array methods.
      * All mutations trigger updates automatically.
@@ -3679,10 +4382,71 @@ var NativeDocument = (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.json(item, configs);
+                        }
+                        if(Validator.isArray(item)) {
+                            return Observable.array(item, configs);
+                        }
+                        return Observable(item, configs);
+                    });
+                    this.$observables[key] = Observable.array(mappedItemValue, configs);
+                    continue;
+                }
+                this.$observables[key] = Observable.array(itemValue, configs);
+                continue;
+            }
+            if(Validator.isObservable(itemValue) || Validator.isProxy(itemValue)) {
+                this.$observables[key] = itemValue;
+                continue;
+            }
+            this.$observables[key] = (typeof itemValue === 'object') ? Observable.object(itemValue, configs) : Observable(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)) {
@@ -3705,9 +4469,10 @@ var NativeDocument = (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();
         }
@@ -3716,100 +4481,88 @@ var NativeDocument = (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.init(item, configs);
                         }
                         return Observable(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();
-            }
-        };
-
-        const $val = () => ObservableObjectValue(data);
-
-        const $clone = () => Observable.init($val(), configs);
+    ObservableObject.prototype.observables = function() {
+        return Object.values(this.$observables);
+    };
+    ObservableObject.prototype.$observables = ObservableObject.prototype.observables;
 
-        const $updateWith = (values) => {
-            Observable.update(proxy, values);
-        };
+    ObservableObject.prototype.keys = function() {
+        return Object.keys(this.$observables);
+    };
+    ObservableObject.prototype.$keys = ObservableObject.prototype.keys;
+    ObservableObject.prototype.clone = function() {
+        return Observable.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.trigger());
 
-        const $get = (key) => ObservableGet(data, key);
+        this.originalSubscribe(callback);
 
-        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;
+        for (let i = 0, length = observables.length; i < length; i++) {
+            const observable = observables[i];
+            if (observable.__$isObservableArray) {
+                observable.deepSubscribe(updatedValue);
+                continue
             }
-        });
+            observable.subscribe(updatedValue);
+        }
+    };
+    ObservableObject.prototype.configs = function() {
+        return this.configs;
+    };
+
+    ObservableObject.prototype.update = ObservableObject.prototype.set;
 
-        return proxy;
+    Observable.init = function(initialValue, configs = null) {
+        return new ObservableObject(initialValue, configs)
     };
 
     /**
@@ -3844,43 +4597,6 @@ var NativeDocument = (function (exports) {
         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;
 
@@ -3932,79 +4648,6 @@ var NativeDocument = (function (exports) {
         return observable;
     };
 
-    const Store = (function() {
-
-        const $stores = new Map();
-
-        return {
-            /**
-             * Create a new state follower and return it.
-             * @param {string} name
-             * @returns {ObservableItem}
-             */
-            use(name) {
-                const {observer: originalObserver, subscribers } = $stores.get(name);
-                const observerFollower = Observable(originalObserver.val());
-                const unSubscriber = originalObserver.subscribe(value => observerFollower.set(value));
-                const updaterUnsubscriber = observerFollower.subscribe(value => originalObserver.set(value));
-                observerFollower.destroy = () => {
-                    unSubscriber();
-                    updaterUnsubscriber();
-                    observerFollower.cleanup();
-                };
-                subscribers.add(observerFollower);
-
-                return observerFollower;
-            },
-            /**
-             * @param {string} name
-             * @returns {ObservableItem}
-             */
-            follow(name) {
-                return this.use(name);
-            },
-            /**
-             * Create a new state and return the observer.
-             * @param {string} name
-             * @param {*} value
-             * @returns {ObservableItem}
-             */
-            create(name, value) {
-                const observer = Observable(value);
-                $stores.set(name, { observer, subscribers: new Set()});
-                return observer;
-            },
-            /**
-             * Get the observer for a state.
-             * @param {string} name
-             * @returns {null|ObservableItem}
-             */
-            get(name) {
-                const item = $stores.get(name);
-                return item ? item.observer : null;
-            },
-            /**
-             *
-             * @param {string} name
-             * @returns {{observer: ObservableItem, subscribers: Set}}
-             */
-            getWithSubscribers(name) {
-                return $stores.get(name);
-            },
-            /**
-             * Delete a state.
-             * @param {string} name
-             */
-            delete(name) {
-                const item = $stores.get(name);
-                if(!item) return;
-                item.observer.cleanup();
-                item.subscribers.forEach(follower => follower.destroy());
-                item.observer.clear();
-            }
-        };
-    }());
-
     /**
      * Renders a list of items from an observable array or object, automatically updating when data changes.
      * Efficiently manages DOM updates by tracking items with keys.
@@ -6430,11 +7073,14 @@ var NativeDocument = (function (exports) {
                     configs.body = params;
                 }
                 else {
-                    configs.headers['Content-Type'] = 'application/json';
                     if(method !== 'GET') {
+                        configs.headers['Content-Type'] = 'application/json';
                         configs.body = JSON.stringify(params);
                     } else {
-                        configs.params = params;
+                        const queryString = new URLSearchParams(params).toString();
+                        if (queryString) {
+                            endpoint = endpoint + (endpoint.includes('?') ? '&' : '?') + queryString;
+                        }
                     }
                 }
             }
@@ -6505,6 +7151,7 @@ var NativeDocument = (function (exports) {
     exports.PluginsManager = PluginsManager;
     exports.SingletonView = SingletonView;
     exports.Store = Store;
+    exports.StoreFactory = StoreFactory;
     exports.TemplateCloner = TemplateCloner;
     exports.Validator = Validator;
     exports.autoMemoize = autoMemoize;