native-document 1.0.116 → 1.0.118

package/dist/native-document.dev.js

@@ -1,10 +1,10 @@
 var NativeDocument = (function (exports) {
     'use strict';
 
-    let DebugManager = {};
+    let DebugManager$1 = {};
 
     {
-        DebugManager = {
+        DebugManager$1 = {
             enabled: false,
 
             enable() {
@@ -35,7 +35,7 @@ var NativeDocument = (function (exports) {
         };
 
     }
-    var DebugManager$1 = DebugManager;
+    var DebugManager = DebugManager$1;
 
     class NativeDocumentError extends Error {
         constructor(message, context = {}) {
@@ -313,10 +313,10 @@ var NativeDocument = (function (exports) {
         subtree: true,
     });
 
-    let PluginsManager = null;
+    let PluginsManager$1 = null;
 
     {
-        PluginsManager = (function() {
+        PluginsManager$1 = (function() {
 
             const $plugins = new Map();
             const $pluginByEvents = new Map();
@@ -382,7 +382,7 @@ var NativeDocument = (function (exports) {
                             try{
                                 callback.call(plugin, ...data);
                             } catch (error) {
-                                DebugManager$1.error('Plugin Manager', `Error in plugin ${plugin.$name} for event ${eventName}`, error);
+                                DebugManager.error('Plugin Manager', `Error in plugin ${plugin.$name} for event ${eventName}`, error);
                             }
                         }
                     }
@@ -391,12 +391,12 @@ var NativeDocument = (function (exports) {
         }());
     }
 
-    var PluginsManager$1 = PluginsManager;
+    var PluginsManager = PluginsManager$1;
 
     function NDElement(element) {
         this.$element = element;
         {
-            PluginsManager$1.emit('NDElementCreated', element, this);
+            PluginsManager.emit('NDElementCreated', element, this);
         }
     }
 
@@ -561,7 +561,7 @@ var NativeDocument = (function (exports) {
             }
             {
                 if (this[name] && !this.$localExtensions.has(name)) {
-                    DebugManager$1.warn('NDElement.extend', `Method "${name}" already exists and will be overwritten`);
+                    DebugManager.warn('NDElement.extend', `Method "${name}" already exists and will be overwritten`);
                 }
                 this.$localExtensions.set(name, method);
             }
@@ -612,23 +612,23 @@ var NativeDocument = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager$1.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+                DebugManager.warn('NDElement.extend', `"${name}" is not a function, skipping`);
                 continue;
             }
 
             if (protectedMethods.has(name)) {
-                DebugManager$1.error('NDElement.extend', `Cannot override protected method "${name}"`);
+                DebugManager.error('NDElement.extend', `Cannot override protected method "${name}"`);
                 throw new NativeDocumentError(`Cannot override protected method "${name}"`);
             }
 
             if (NDElement.prototype[name]) {
-                DebugManager$1.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+                DebugManager.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
 
             NDElement.prototype[name] = method;
         }
         {
-            PluginsManager$1.emit('NDElementExtended', methods);
+            PluginsManager.emit('NDElementExtended', methods);
         }
 
         return NDElement;
@@ -779,7 +779,7 @@ var NativeDocument = (function (exports) {
             const foundReserved = Object.keys(attributes).filter(key => reserved.includes(key));
 
             if (foundReserved.length > 0) {
-                DebugManager$1.warn('Validator', `Reserved attributes found: ${foundReserved.join(', ')}`);
+                DebugManager.warn('Validator', `Reserved attributes found: ${foundReserved.join(', ')}`);
             }
 
             return attributes;
@@ -866,7 +866,7 @@ var NativeDocument = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
@@ -1001,6 +1001,97 @@ var NativeDocument = (function (exports) {
         return cloned;
     };
 
+    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));
+        },
+
+        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));
+        },
+
+        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));
+        },
+
+        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}`;
+        },
+    };
+
     const LocalStorage = {
         getJson(key) {
             let value = localStorage.getItem(key);
@@ -1057,703 +1148,212 @@ var NativeDocument = (function (exports) {
         }
     };
 
-    const StoreFactory = function() {
+    /**
+     *
+     * @param {*} value
+     * @param {{ propagation: boolean, reset: boolean} | null} configs
+     * @class ObservableItem
+     */
+    function ObservableItem(value, configs = null) {
+        value = Validator.isObservable(value) ? value.val() : value;
 
-        const $stores = new Map();
-        const $followersCache = new Map();
+        this.$previousValue = null;
+        this.$currentValue = value;
+        {
+            this.$isCleanedUp = false;
+        }
 
-        /**
-         * Internal helper — retrieves a store entry or throws if not found.
-         */
-        const $getStoreOrThrow = (method, name) => {
-            const item = $stores.get(name);
-            if (!item) {
-                DebugManager$1.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;
-        };
+        this.$firstListener = null;
+        this.$listeners = null;
+        this.$watchers = null;
 
-        /**
-         * Internal helper — blocks write operations on a read-only observer.
-         */
-        const $applyReadOnly = (observer, name, context) => {
-            const readOnlyError = (method) => () => {
-                DebugManager$1.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');
-        };
+        this.$memoryId = null;
 
-        const $createObservable = (value, options = {}) => {
-            if(Array.isArray(value)) {
-                return Observable.array(value, options);
-            }
-            if(typeof value === 'object') {
-                return Observable.object(value, options);
+        if(configs) {
+            this.configs = configs;
+            if(configs.reset) {
+                this.$initialValue = Validator.isObject(value) ? deepClone(value) : value;
             }
-            return Observable(value, options);
-        };
+        }
+        {
+            PluginsManager.emit('CreateObservable', this);
+        }
+    }
 
-        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$1.warn('Store', `Store.create('${name}') : a store with this name already exists. Use Store.get('${name}') to retrieve it.`);
-                    throw new NativeDocumentError(
-                        `Store.create('${name}') : a store with this name already exists.`
-                    );
-                }
-                const observer = $createObservable(value);
-                $stores.set(name, { observer, subscribers: new Set(), resettable: false, composed: false });
-                return observer;
-            },
+    Object.defineProperty(ObservableItem.prototype, '$value', {
+        get() {
+            return this.$currentValue;
+        },
+        set(value) {
+            this.set(value);
+        },
+        configurable: true,
+    });
 
-            /**
-             * 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$1.warn('Store', `Store.createResettable('${name}') : a store with this name already exists.`);
-                    throw new NativeDocumentError(
-                        `Store.createResettable('${name}') : a store with this name already exists.`
-                    );
-                }
-                const observer = $createObservable(value, { reset: true });
-                $stores.set(name, { observer, subscribers: new Set(), resettable: true, composed: false });
-                return observer;
-            },
+    ObservableItem.prototype.__$isObservable = true;
+    const noneTrigger = function() {};
 
-            /**
-             * 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$1.warn('Store', `Store.createComposed('${name}') : a store with this name already exists.`);
-                    throw new NativeDocumentError(
-                        `Store.createComposed('${name}') : a store with this name already exists.`
-                    );
-                }
-                if (typeof computation !== 'function') {
-                    throw new NativeDocumentError(
-                        `Store.createComposed('${name}') : computation must be a function.`
-                    );
-                }
-                if (!Array.isArray(dependencies) || dependencies.length === 0) {
-                    throw new NativeDocumentError(
-                        `Store.createComposed('${name}') : dependencies must be a non-empty array of store names.`
-                    );
-                }
+    /**
+     * Intercepts and transforms values before they are set on the observable.
+     * The interceptor can modify the value or return undefined to use the original value.
+     *
+     * @param {(value) => any} callback - Interceptor function that receives (newValue, currentValue) and returns the transformed value or undefined
+     * @returns {ObservableItem} The observable instance for chaining
+     * @example
+     * const count = Observable(0);
+     * count.intercept((newVal, oldVal) => Math.max(0, newVal)); // Prevent negative values
+     */
+    ObservableItem.prototype.intercept = function(callback) {
+        this.$interceptor = callback;
+        this.set = this.$setWithInterceptor;
+        return this;
+    };
 
-                // Resolve dependency observers
-                const depObservers = dependencies.map(depName => {
-                    if(typeof depName !== 'string') {
-                        return depName;
-                    }
-                    const depItem = $stores.get(depName);
-                    if (!depItem) {
-                        DebugManager$1.error('Store', `Store.createComposed('${name}') : dependency '${depName}' not found. Create it first.`);
-                        throw new NativeDocumentError(
-                            `Store.createComposed('${name}') : dependency store '${depName}' not found.`
-                        );
-                    }
-                    return depItem.observer;
-                });
-
-                // Create computed observable from dependency observers
-                const observer = Observable.computed(computation, depObservers);
+    ObservableItem.prototype.triggerFirstListener = function(operations) {
+        this.$firstListener(this.$currentValue, this.$previousValue, operations);
+    };
 
-                $stores.set(name, { observer, subscribers: new Set(), resettable: false, composed: true });
-                return observer;
-            },
+    ObservableItem.prototype.triggerListeners = function(operations) {
+        const $listeners = this.$listeners;
+        const $previousValue = this.$previousValue;
+        const $currentValue = this.$currentValue;
 
-            /**
-             * Returns true if a store with the given name exists.
-             *
-             * @param {string} name
-             * @returns {boolean}
-             */
-            has(name) {
-                return $stores.has(name);
-            },
+        for(let i = 0, length = $listeners.length; i < length; i++) {
+            $listeners[i]($currentValue, $previousValue, operations);
+        }
+    };
 
-            /**
-             * 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$1.error('Store', `Store.reset('${name}') : composed stores cannot be reset. Their value is derived from dependencies.`);
-                    throw new NativeDocumentError(
-                        `Store.reset('${name}') : composed stores cannot be reset.`
-                    );
-                }
-                if (!item.resettable) {
-                    DebugManager$1.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();
-            },
+    ObservableItem.prototype.triggerWatchers = function(operations) {
+        const $watchers = this.$watchers;
+        const $previousValue = this.$previousValue;
+        const $currentValue = this.$currentValue;
 
-            /**
-             * 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);
+        const $currentValueCallbacks = $watchers.get($currentValue);
+        const $previousValueCallbacks = $watchers.get($previousValue);
+        if($currentValueCallbacks) {
+            $currentValueCallbacks(true, $previousValue, operations);
+        }
+        if($previousValueCallbacks) {
+            $previousValueCallbacks(false, $currentValue, operations);
+        }
+    };
 
-                if (item.composed) {
-                    DebugManager$1.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.`
-                    );
-                }
+    ObservableItem.prototype.triggerAll = function(operations) {
+        this.triggerWatchers(operations);
+        this.triggerListeners(operations);
+    };
 
-                const { observer: originalObserver, subscribers } = item;
-                const observerFollower = $createObservable(originalObserver.val());
+    ObservableItem.prototype.triggerWatchersAndFirstListener = function(operations) {
+        this.triggerWatchers(operations);
+        this.triggerFirstListener(operations);
+    };
 
-                const onStoreChange    = value => observerFollower.set(value);
-                const onFollowerChange = value => originalObserver.set(value);
+    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.$firstListener.length === 0 ? this.$firstListener : this.triggerFirstListener;
+            }
+            else {
+                this.trigger = this.triggerListeners;
+            }
+            return;
+        }
+        if(this.$watchers?.size) {
+            this.trigger = this.triggerWatchers;
+            return;
+        }
+        this.trigger = noneTrigger;
+    };
+    ObservableItem.prototype.trigger = noneTrigger;
 
-                originalObserver.subscribe(onStoreChange);
-                observerFollower.subscribe(onFollowerChange);
+    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);
+        }
+        this.trigger();
+        this.$previousValue = null;
+        {
+            PluginsManager.emit('ObservableAfterChange', this);
+        }
+    };
 
-                observerFollower.destroy = () => {
-                    originalObserver.unsubscribe(onStoreChange);
-                    observerFollower.unsubscribe(onFollowerChange);
-                    subscribers.delete(observerFollower);
-                    observerFollower.cleanup();
-                };
-                observerFollower.dispose = observerFollower.destroy;
+    /**
+     * @param {*} data
+     */
+    ObservableItem.prototype.$setWithInterceptor = function(data) {
+        let newValue = (typeof data === 'function') ? data(this.$currentValue) : data;
+        const result = this.$interceptor(newValue, this.$currentValue);
 
-                subscribers.add(observerFollower);
-                return observerFollower;
-            },
+        if (result !== undefined) {
+            newValue = result;
+        }
 
-            /**
-             * 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());
+        this.$updateWithNewValue(newValue);
+    };
 
-                const onStoreChange = value => observerFollower.set(value);
-                originalObserver.subscribe(onStoreChange);
+    /**
+     * @param {*} data
+     */
+    ObservableItem.prototype.$basicSet = function(data) {
+        let newValue = (typeof data === 'function') ? data(this.$currentValue) : data;
+        this.$updateWithNewValue(newValue);
+    };
 
-                $applyReadOnly(observerFollower, name, 'follow');
+    ObservableItem.prototype.set = ObservableItem.prototype.$basicSet;
 
-                observerFollower.destroy = () => {
-                    originalObserver.unsubscribe(onStoreChange);
-                    subscribers.delete(observerFollower);
-                    observerFollower.cleanup();
-                };
-                observerFollower.dispose = observerFollower.destroy;
+    ObservableItem.prototype.val = function() {
+        return this.$currentValue;
+    };
 
-                subscribers.add(observerFollower);
-                return observerFollower;
-            },
+    ObservableItem.prototype.disconnectAll = function() {
+        this.$previousValue = null;
+        this.$currentValue = null;
+        this.$listeners = null;
+        this.$watchers = null;
+        this.trigger = noneTrigger;
+    };
 
-            /**
-             * 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$1.warn('Store', `Store.get('${name}') : store not found.`);
-                    return null;
-                }
-                return item.observer;
-            },
+    /**
+     * 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);
+    };
 
-            /**
-             * @param {string} name
-             * @returns {{ observer: ObservableItem, subscribers: Set } | null}
-             */
-            getWithSubscribers(name) {
-                return $stores.get(name) ?? null;
-            },
-
-            /**
-             * Destroys a store : cleans up the observer, destroys all followers, and removes the entry.
-             *
-             * @param {string} name
-             */
-            delete(name) {
-                const item = $stores.get(name);
-                if (!item) {
-                    DebugManager$1.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
-                    return;
-                }
-                item.subscribers.forEach(follower => follower.destroy());
-                item.subscribers.clear();
-                item.observer.cleanup();
-                $stores.delete(name);
-            },
-            /**
-             * Creates an isolated store group with its own state namespace.
-             * Each group is a fully independent StoreFactory instance —
-             * no key conflicts, no shared state with the parent store.
-             *
-             * @param {string | ((group: ReturnType<typeof StoreFactory>) => void)} name - Group name for debugging, or setup callback if no name is provided
-             * @param {((group: ReturnType<typeof StoreFactory>) => void)} [callback] - Setup function receiving the isolated store instance
-             * @returns {ReturnType<typeof StoreFactory>}
-             *
-             * @example
-             * // With name (recommended)
-             * const EventStore = Store.group('events', (group) => {
-             *     group.create('catalog', []);
-             *     group.create('filters', { category: null, date: null });
-             *     group.createResettable('selected', null);
-             *     group.createComposed('filtered', () => {
-             *         const catalog = EventStore.get('catalog').val();
-             *         const filters = EventStore.get('filters').val();
-             *         return catalog.filter(event => {
-             *             if (filters.category && event.category !== filters.category) return false;
-             *             return true;
-             *         });
-             *     }, ['catalog', 'filters']);
-             * });
-             *
-             * // Without name
-             * const CartStore = Store.group((group) => {
-             *     group.create('items', []);
-             * });
-             *
-             * // Usage
-             * EventStore.use('catalog'); // two-way follower
-             * EventStore.follow('filtered'); // read-only follower
-             * EventStore.get('filters'); // raw observable
-             *
-             * // Cross-group composed
-             * const OrderStore = Store.group('orders', (group) => {
-             *     group.createComposed('summary', () => {
-             *         const items = CartStore.get('items').val();
-             *         const events = EventStore.get('catalog').val();
-             *         return { items, events };
-             *     }, [CartStore.get('items'), EventStore.get('catalog')]);
-             * });
-             */
-            group(name, callback) {
-                if (typeof name === 'function') {
-                    callback = name;
-                    name = 'anonymous';
-                }
-                const store = StoreFactory();
-                callback && callback(store);
-                return store;
-            },
-            createPersistent(name, value, localstorage_key) {
-                localstorage_key = localstorage_key || name;
-                const observer = this.create(name, $getFromStorage(localstorage_key, value));
-                const saver = $saveToStorage(value);
-
-                observer.subscribe((val) => saver(localstorage_key, val));
-                return observer;
-            },
-            createPersistentResettable(name, value, localstorage_key) {
-                localstorage_key = localstorage_key || name;
-                const observer = this.createResettable(name, $getFromStorage(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);
-                    }
-                    const follower = target.follow(prop);
-                    $followersCache.set(prop, follower);
-                    return follower;
-                }
-                return undefined;
-            },
-            set(target, prop, value) {
-                DebugManager$1.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.`);
-            }
-        });
-    };
-
-    const Store = StoreFactory();
-
-    Store.create('locale', navigator.language.split('-')[0] || 'en');
-
-    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));
-        },
-
-        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));
-        },
-
-        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));
-        },
-
-        relative: (value, locale, { unit = 'day', numeric = 'auto' } = {}) => {
-            const diff = Math.round((value - Date.now()) / (1000 * 60 * 60 * 24));
-            return new Intl.RelativeTimeFormat(locale, { numeric }).format(diff, unit);
-        },
-
-        plural: (value, locale, { singular, plural } = {}) => {
-            const rule = new Intl.PluralRules(locale).select(value);
-            return `${value} ${rule === 'one' ? singular : plural}`;
-        },
-    };
-
-    /**
-     *
-     * @param {*} value
-     * @param {{ propagation: boolean, reset: boolean} | null} configs
-     * @class ObservableItem
-     */
-    function ObservableItem(value, configs = null) {
-        value = Validator.isObservable(value) ? value.val() : value;
-
-        this.$previousValue = null;
-        this.$currentValue = value;
-        {
-            this.$isCleanedUp = false;
-        }
-
-        this.$firstListener = null;
-        this.$listeners = null;
-        this.$watchers = null;
-
-        this.$memoryId = null;
-
-        if(configs) {
-            this.configs = configs;
-            if(configs.reset) {
-                this.$initialValue = Validator.isObject(value) ? deepClone(value) : value;
-            }
-        }
-        {
-            PluginsManager$1.emit('CreateObservable', this);
-        }
-    }
-
-    Object.defineProperty(ObservableItem.prototype, '$value', {
-        get() {
-            return this.$currentValue;
-        },
-        set(value) {
-            this.set(value);
-        },
-        configurable: true,
-    });
-
-    ObservableItem.prototype.__$isObservable = true;
-    const noneTrigger = function() {};
-
-    /**
-     * Intercepts and transforms values before they are set on the observable.
-     * The interceptor can modify the value or return undefined to use the original value.
-     *
-     * @param {(value) => any} callback - Interceptor function that receives (newValue, currentValue) and returns the transformed value or undefined
-     * @returns {ObservableItem} The observable instance for chaining
-     * @example
-     * const count = Observable(0);
-     * count.intercept((newVal, oldVal) => Math.max(0, newVal)); // Prevent negative values
-     */
-    ObservableItem.prototype.intercept = function(callback) {
-        this.$interceptor = callback;
-        this.set = this.$setWithInterceptor;
-        return this;
-    };
-
-    ObservableItem.prototype.triggerFirstListener = function(operations) {
-        this.$firstListener(this.$currentValue, this.$previousValue, operations);
-    };
-
-    ObservableItem.prototype.triggerListeners = function(operations) {
-        const $listeners = this.$listeners;
-        const $previousValue = this.$previousValue;
-        const $currentValue = this.$currentValue;
-
-        for(let i = 0, length = $listeners.length; i < length; i++) {
-            $listeners[i]($currentValue, $previousValue, operations);
-        }
-    };
-
-    ObservableItem.prototype.triggerWatchers = function(operations) {
-        const $watchers = this.$watchers;
-        const $previousValue = this.$previousValue;
-        const $currentValue = this.$currentValue;
-
-        const $currentValueCallbacks = $watchers.get($currentValue);
-        const $previousValueCallbacks = $watchers.get($previousValue);
-        if($currentValueCallbacks) {
-            $currentValueCallbacks(true, $previousValue, operations);
-        }
-        if($previousValueCallbacks) {
-            $previousValueCallbacks(false, $currentValue, operations);
-        }
-    };
-
-    ObservableItem.prototype.triggerAll = function(operations) {
-        this.triggerWatchers(operations);
-        this.triggerListeners(operations);
-    };
-
-    ObservableItem.prototype.triggerWatchersAndFirstListener = function(operations) {
-        this.triggerWatchers(operations);
-        this.triggerFirstListener(operations);
-    };
-
-    ObservableItem.prototype.assocTrigger = function() {
-        this.$firstListener = null;
-        if(this.$watchers?.size && this.$listeners?.length) {
-            this.trigger = (this.$listeners.length === 1) ? this.triggerWatchersAndFirstListener : this.triggerAll;
-            return;
-        }
-        if(this.$listeners?.length) {
-            if(this.$listeners.length === 1) {
-                this.$firstListener = this.$listeners[0];
-                this.trigger = this.triggerFirstListener;
-            }
-            else {
-                this.trigger = this.triggerListeners;
-            }
-            return;
-        }
-        if(this.$watchers?.size) {
-            this.trigger = this.triggerWatchers;
-            return;
-        }
-        this.trigger = noneTrigger;
-    };
-    ObservableItem.prototype.trigger = noneTrigger;
-
-    ObservableItem.prototype.$updateWithNewValue = function(newValue) {
-        newValue = newValue?.__$isObservable ? newValue.val() : newValue;
-        if(this.$currentValue === newValue) {
-            return;
-        }
-        this.$previousValue = this.$currentValue;
-        this.$currentValue = newValue;
-        {
-            PluginsManager$1.emit('ObservableBeforeChange', this);
-        }
-        this.trigger();
-        this.$previousValue = null;
-        {
-            PluginsManager$1.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;
-        }
-
-        this.$updateWithNewValue(newValue);
-    };
-
-    /**
-     * @param {*} data
-     */
-    ObservableItem.prototype.$basicSet = function(data) {
-        let newValue = (typeof data === 'function') ? data(this.$currentValue) : data;
-        this.$updateWithNewValue(newValue);
-    };
-
-    ObservableItem.prototype.set = ObservableItem.prototype.$basicSet;
-
-    ObservableItem.prototype.val = function() {
-        return this.$currentValue;
-    };
-
-    ObservableItem.prototype.disconnectAll = function() {
-        this.$previousValue = null;
-        this.$currentValue = null;
-        this.$listeners = null;
-        this.$watchers = null;
-        this.trigger = noneTrigger;
-    };
-
-    /**
-     * Registers a cleanup callback that will be executed when the observable is cleaned up.
-     * Useful for disposing resources, removing event listeners, or other cleanup tasks.
-     *
-     * @param {Function} callback - Cleanup function to execute on observable disposal
-     * @example
-     * const obs = Observable(0);
-     * obs.onCleanup(() => console.log('Cleaned up!'));
-     * obs.cleanup(); // Logs: "Cleaned up!"
-     */
-    ObservableItem.prototype.onCleanup = function(callback) {
-        this.$cleanupListeners = this.$cleanupListeners ?? [];
-        this.$cleanupListeners.push(callback);
-    };
-
-    ObservableItem.prototype.cleanup = function() {
-        if (this.$cleanupListeners) {
-            for (let i = 0; i < this.$cleanupListeners.length; i++) {
-                this.$cleanupListeners[i]();
-            }
-            this.$cleanupListeners = null;
-        }
-        MemoryManager.unregister(this.$memoryId);
-        this.disconnectAll();
-        {
-            this.$isCleanedUp = true;
-        }
-        delete this.$value;
-    };
+    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;
+    };
 
     /**
      *
@@ -1763,7 +1363,7 @@ var NativeDocument = (function (exports) {
     ObservableItem.prototype.subscribe = function(callback) {
         {
             if (this.$isCleanedUp) {
-                DebugManager$1.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
+                DebugManager.warn('Observable subscription', '⚠️ Attempted to subscribe to a cleaned up observable.');
                 return;
             }
             if (typeof callback !== 'function') {
@@ -1775,7 +1375,7 @@ var NativeDocument = (function (exports) {
         this.$listeners.push(callback);
         this.assocTrigger();
         {
-            PluginsManager$1.emit('ObservableSubscribe', this);
+            PluginsManager.emit('ObservableSubscribe', this);
         }
     };
 
@@ -1886,7 +1486,7 @@ var NativeDocument = (function (exports) {
         }
         this.assocTrigger();
         {
-            PluginsManager$1.emit('ObservableUnsubscribe', this);
+            PluginsManager.emit('ObservableUnsubscribe', this);
         }
     };
 
@@ -2203,7 +1803,6 @@ var NativeDocument = (function (exports) {
             }
             element.classes.toggle(className, value);
         }
-        data = null;
     };
 
     /**
@@ -2362,7 +1961,7 @@ var NativeDocument = (function (exports) {
     Function.prototype.toNdElement = function () {
         const child = this;
         {
-            PluginsManager$1.emit('BeforeProcessComponent', child);
+            PluginsManager.emit('BeforeProcessComponent', child);
         }
         return ElementCreator.getChild(child());
     };
@@ -2549,14 +2148,14 @@ var NativeDocument = (function (exports) {
         processChildren: (children, parent) => {
             if(children === null) return;
             {
-                PluginsManager$1.emit('BeforeProcessChildren', parent);
+                PluginsManager.emit('BeforeProcessChildren', parent);
             }
             let child = ElementCreator.getChild(children);
             if(child) {
                 parent.appendChild(child);
             }
             {
-                PluginsManager$1.emit('AfterProcessChildren', parent);
+                PluginsManager.emit('AfterProcessChildren', parent);
             }
         },
         async safeRemove(element) {
@@ -2642,7 +2241,7 @@ var NativeDocument = (function (exports) {
         anchorFragment.appendChild = function(child, before = null) {
             const parent = anchorEnd.parentNode;
             if(!parent) {
-                DebugManager$1.error('Anchor', 'Anchor : parent not found', child);
+                DebugManager.error('Anchor', 'Anchor : parent not found', child);
                 return;
             }
             before = before ?? anchorEnd;
@@ -2905,16 +2504,16 @@ var NativeDocument = (function (exports) {
       "ContextMenu"
     ];
 
-    const property$1 = {
+    const property = {
         configurable: true,
         get() {
             return new NDElement(this);
         }
     };
 
-    Object.defineProperty(HTMLElement.prototype, 'nd', property$1);
+    Object.defineProperty(HTMLElement.prototype, 'nd', property);
 
-    Object.defineProperty(DocumentFragment.prototype, 'nd', property$1);
+    Object.defineProperty(DocumentFragment.prototype, 'nd', property);
 
     Object.defineProperty(NDElement.prototype, 'nd', {
         configurable: true,
@@ -3267,35 +2866,78 @@ var NativeDocument = (function (exports) {
         }
         const steps = [];
         if(this.$ndMethods) {
-            steps.push((clonedNode, data) => {
-                for(const methodName in this.$ndMethods) {
+            const methods = Object.keys(this.$ndMethods);
+            if(methods.length === 1) {
+                const methodName = methods[0];
+                steps.push((clonedNode, data) => {
                     clonedNode.nd[methodName](this.$ndMethods[methodName].bind(clonedNode, ...data));
-                }
-            });
+                });
+            } else {
+                steps.push((clonedNode, data) => {
+                    const nd = clonedNode.nd;
+                    for(const methodName in this.$ndMethods) {
+                        nd[methodName](this.$ndMethods[methodName].bind(clonedNode, ...data));
+                    }
+                });
+            }
         }
         if(this.$classes) {
             const cache = {};
-            steps.push((clonedNode, data) => {
-                ElementCreator.processClassAttribute(clonedNode, buildProperties(cache, this.$classes, data));
-            });
+            const keys = Object.keys(this.$classes);
+
+            if(keys.length === 1) {
+                const key = keys[0];
+                const callback = this.$classes[key];
+                steps.push((clonedNode, data) => {
+                    cache[key] = callback.apply(null, data);
+                    ElementCreator.processClassAttribute(clonedNode, cache);
+                });
+            } else {
+                steps.push((clonedNode, data) => {
+                    ElementCreator.processClassAttribute(clonedNode, buildProperties(cache, this.$classes, data));
+                });
+            }
         }
         if(this.$styles) {
             const cache = {};
-            steps.push((clonedNode, data) => {
-                ElementCreator.processStyleAttribute(clonedNode, buildProperties(cache, this.$styles, data));
-            });
+            const keys = Object.keys(this.$styles);
+
+            if(keys.length === 1) {
+                const key = keys[0];
+                const callback = this.$styles[key];
+                steps.push((clonedNode, data) => {
+                    cache[key] = callback.apply(null, data);
+                    ElementCreator.processStyleAttribute(clonedNode, cache);
+                });
+            } else {
+                steps.push((clonedNode, data) => {
+                    ElementCreator.processStyleAttribute(clonedNode, buildProperties(cache, this.$styles, data));
+                });
+            }
         }
         if(this.$attrs) {
             const cache = {};
-            steps.push((clonedNode, data) => {
-                ElementCreator.processAttributes(clonedNode, buildProperties(cache, this.$attrs, data));
-            });
+            const keys = Object.keys(this.$attrs);
+
+            if(keys.length === 1) {
+                const key = keys[0];
+                const callback = this.$attrs[key];
+                steps.push((clonedNode, data) => {
+                    cache[key] = callback.apply(null, data);
+                    ElementCreator.processAttributes(clonedNode, cache);
+                });
+            } else {
+                steps.push((clonedNode, data) => {
+                    ElementCreator.processAttributes(clonedNode, buildProperties(cache, this.$attrs, data));
+                });
+            }
         }
 
         const stepsCount = steps.length;
+        const $element = this.$element;
 
-        this.cloneNode = function(data) {
-            const clonedNode = this.$element.cloneNode(false);
+        this.cloneNode = (data) => {
+            const clonedNode = $element.cloneNode(false);
             for(let i = 0; i < stepsCount; i++) {
                 steps[i](clonedNode, data);
             }
@@ -3307,14 +2949,6 @@ var NativeDocument = (function (exports) {
         return this.$element.cloneNode(false);
     };
 
-    NodeCloner.prototype.cloneTextNodeByProperty = function(data) {
-        return createTextNode(data[0][this.$content]);
-    };
-
-    NodeCloner.prototype.cloneTextNodeByCallback = function(data) {
-        return createTextNode(this.$content.apply(null, data));
-    };
-
     NodeCloner.prototype.attach = function(methodName, callback) {
         this.$ndMethods = this.$ndMethods || {};
         this.$ndMethods[methodName] = callback;
@@ -3324,10 +2958,10 @@ var NativeDocument = (function (exports) {
     NodeCloner.prototype.text = function(value) {
         this.$content = value;
         if(typeof value === 'function') {
-            this.cloneNode = NodeCloner.prototype.cloneTextNodeByCallback;
+            this.cloneNode = (data) => createTextNode(value.apply(null, data));
             return this;
         }
-        this.cloneNode = NodeCloner.prototype.cloneTextNodeByProperty;
+        this.cloneNode = (data) => createTextNode(data[0][value]);
         return this;
     };
 
@@ -3386,8 +3020,7 @@ var NativeDocument = (function (exports) {
                     $node.dynamicCloneNode = (data) => {
                         const clonedNode = $node.nodeCloner.cloneNode(data);
                         for(let i = 0; i < childNodesLength; i++) {
-                            const child = childNodes[i].dynamicCloneNode(data);
-                            clonedNode.appendChild(child);
+                            clonedNode.appendChild(childNodes[i].dynamicCloneNode(data));
                         }
                         return clonedNode;
                     };
@@ -3395,8 +3028,7 @@ var NativeDocument = (function (exports) {
                     $node.dynamicCloneNode = (data) => {
                         const clonedNode = $node.cloneNode();
                         for(let i = 0; i < childNodesLength; i++) {
-                            const child = childNodes[i].dynamicCloneNode(data);
-                            clonedNode.appendChild(child);
+                            clonedNode.appendChild(childNodes[i].dynamicCloneNode(data));
                         }
                         return clonedNode;
                     };
@@ -3410,11 +3042,10 @@ var NativeDocument = (function (exports) {
             const binder = createTemplateCloner(this);
             $node = $fn(binder);
             if(!$node.nodeCloner) {
-                console.log('nodeCloner not found on :');
                 $node.nodeCloner = new NodeCloner($node);
             }
             assignClonerToNode($node);
-            this.clone = (data) => $node.dynamicCloneNode(data);
+            this.clone = $node.dynamicCloneNode;
             return $node.dynamicCloneNode(data);
         };
 
@@ -3466,10 +3097,9 @@ var NativeDocument = (function (exports) {
         let wrapper = (args) => {
             $cache = new TemplateCloner(fn);
 
-            wrapper = (args) => {
-                return $cache.clone(args);
-            };
-            return $cache.clone(args);
+            const node = $cache.clone(args);
+            wrapper = $cache.clone;
+            return node;
         };
 
         if(fn.length < 2) {
@@ -4059,7 +3689,7 @@ var NativeDocument = (function (exports) {
 
         ObservableItem.call(this, target, configs);
         {
-            PluginsManager$1.emit('CreateObservableArray', this);
+            PluginsManager.emit('CreateObservableArray', this);
         }
     };
 
@@ -4220,501 +3850,901 @@ var NativeDocument = (function (exports) {
     /**
      * Checks if the array is empty.
      *
-     * @returns {boolean} True if array has no elements
+     * @returns {boolean} True if array has no elements
+     * @example
+     * const items = Observable.array([]);
+     * items.isEmpty(); // true
+     */
+    ObservableArray.prototype.isEmpty = function() {
+        return this.$currentValue.length === 0;
+    };
+
+    /**
+     * Triggers a populate operation with the current array, iteration count, and callback.
+     * Used internally for rendering optimizations.
+     *
+     * @param {number} iteration - Iteration count for rendering
+     * @param {Function} callback - Callback function for rendering items
+     */
+    ObservableArray.prototype.populateAndRender = function(iteration, callback) {
+        this.trigger({ action: 'populate', args: [this.$currentValue, iteration, callback] });
+    };
+
+
+    /**
+     * Creates a filtered view of the array based on predicates.
+     * The filtered array updates automatically when source data or predicates change.
+     *
+     * @param {Object} predicates - Object mapping property names to filter conditions or functions
+     * @returns {ObservableArray} A new observable array containing filtered items
+     * @example
+     * const users = Observable.array([
+     *   { name: 'John', age: 25 },
+     *   { name: 'Jane', age: 30 }
+     * ]);
+     * const adults = users.where({ age: (val) => val >= 18 });
+     */
+    ObservableArray.prototype.where = function(predicates) {
+        const sourceArray = this;
+        const observableDependencies = [sourceArray];
+        const filterCallbacks = {};
+
+        for (const [key, rawPredicate] of Object.entries(predicates)) {
+            const predicate = Validator.isObservable(rawPredicate) ? match(rawPredicate, false) : rawPredicate;
+            if (predicate && typeof predicate === 'object' && 'callback' in predicate) {
+                filterCallbacks[key] = predicate.callback;
+
+                if (predicate.dependencies) {
+                    const deps = Array.isArray(predicate.dependencies)
+                        ? predicate.dependencies
+                        : [predicate.dependencies];
+                    observableDependencies.push.apply(observableDependencies, deps);
+                }
+            } else if(typeof predicate === 'function') {
+                filterCallbacks[key] = predicate;
+            } else {
+                filterCallbacks[key] = (value) => value === predicate;
+            }
+        }
+
+        const viewArray = Observable.array();
+
+        const filters = Object.entries(filterCallbacks);
+        const updateView = () => {
+            const filtered = sourceArray.val().filter(item => {
+                for (const [key, callback] of filters) {
+                    if(key === '_') {
+                        if (!callback(item)) return false;
+                    } else {
+                        if (!callback(item[key])) return false;
+                    }
+                }
+                return true;
+            });
+
+            viewArray.set(filtered);
+        };
+
+        observableDependencies.forEach(dep => dep.subscribe(updateView));
+
+        updateView();
+
+        return viewArray;
+    };
+
+    /**
+     * Creates a filtered view where at least one of the specified fields matches the filter.
+     *
+     * @param {Array<string>} fields - Array of field names to check
+     * @param {FilterResult} filter - Filter condition with callback and dependencies
+     * @returns {ObservableArray} A new observable array containing filtered items
+     * @example
+     * const products = Observable.array([
+     *   { name: 'Apple', category: 'Fruit' },
+     *   { name: 'Carrot', category: 'Vegetable' }
+     * ]);
+     * const searchTerm = Observable('App');
+     * const filtered = products.whereSome(['name', 'category'], match(searchTerm));
+     */
+    ObservableArray.prototype.whereSome = function(fields, filter) {
+        return this.where({
+            _: {
+                dependencies: filter.dependencies,
+                callback: (item) => fields.some(field => filter.callback(item[field]))
+            }
+        });
+    };
+
+    /**
+     * Creates a filtered view where all specified fields match the filter.
+     *
+     * @param {Array<string>} fields - Array of field names to check
+     * @param {FilterResult} filter - Filter condition with callback and dependencies
+     * @returns {ObservableArray} A new observable array containing filtered items
+     * @example
+     * const items = Observable.array([
+     *   { status: 'active', verified: true },
+     *   { status: 'active', verified: false }
+     * ]);
+     * const activeFilter = equals('active');
+     * const filtered = items.whereEvery(['status', 'verified'], activeFilter);
+     */
+    ObservableArray.prototype.whereEvery = function(fields, filter) {
+        return this.where({
+            _: {
+                dependencies: filter.dependencies,
+                callback: (item) => fields.every(field => filter.callback(item[field]))
+            }
+        });
+    };
+
+    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.
+     *
+     * @param {Array} [target=[]] - Initial array value
+     * @param {Object|null} [configs=null] - Configuration options
+     * // @param {boolean} [configs.propagation=true] - Whether to propagate changes to parent observables
+     * // @param {boolean} [configs.deep=false] - Whether to make nested objects observable
+     * @param {boolean} [configs.reset=false] - Whether to store initial value for reset()
+     * @returns {ObservableArray} An observable array with reactive methods
      * @example
-     * const items = Observable.array([]);
-     * items.isEmpty(); // true
+     * const items = Observable.array([1, 2, 3]);
+     * items.push(4); // Triggers update
+     * items.subscribe((arr) => console.log(arr));
      */
-    ObservableArray.prototype.isEmpty = function() {
-        return this.$currentValue.length === 0;
+    Observable.array = function(target = [], configs = null) {
+        return new ObservableArray(target, configs);
     };
 
     /**
-     * Triggers a populate operation with the current array, iteration count, and callback.
-     * Used internally for rendering optimizations.
      *
-     * @param {number} iteration - Iteration count for rendering
-     * @param {Function} callback - Callback function for rendering items
+     * @param {Function} callback
+     * @returns {Function}
      */
-    ObservableArray.prototype.populateAndRender = function(iteration, callback) {
-        this.trigger({ action: 'populate', args: [this.$currentValue, iteration, callback] });
+    Observable.batch = function(callback) {
+        const $observer = Observable(0);
+        const batch = function() {
+            if(Validator.isAsyncFunction(callback)) {
+                return (callback(...arguments)).then(() => {
+                    $observer.trigger();
+                }).catch(error => { throw error; });
+            }
+            callback(...arguments);
+            $observer.trigger();
+        };
+        batch.$observer = $observer;
+        return batch;
     };
 
+    const ObservableObject = function(target, configs) {
+        ObservableItem.call(this, target);
+        this.$observables = {};
+        this.configs = configs;
 
-    /**
-     * Creates a filtered view of the array based on predicates.
-     * The filtered array updates automatically when source data or predicates change.
-     *
-     * @param {Object} predicates - Object mapping property names to filter conditions or functions
-     * @returns {ObservableArray} A new observable array containing filtered items
-     * @example
-     * const users = Observable.array([
-     *   { name: 'John', age: 25 },
-     *   { name: 'Jane', age: 30 }
-     * ]);
-     * const adults = users.where({ age: (val) => val >= 18 });
-     */
-    ObservableArray.prototype.where = function(predicates) {
-        const sourceArray = this;
-        const observableDependencies = [sourceArray];
-        const filterCallbacks = {};
+        this.$load(target);
 
-        for (const [key, rawPredicate] of Object.entries(predicates)) {
-            const predicate = Validator.isObservable(rawPredicate) ? match(rawPredicate, false) : rawPredicate;
-            if (predicate && typeof predicate === 'object' && 'callback' in predicate) {
-                filterCallbacks[key] = predicate.callback;
+        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)
+                });
+            }
+        }
 
-                if (predicate.dependencies) {
-                    const deps = Array.isArray(predicate.dependencies)
-                        ? predicate.dependencies
-                        : [predicate.dependencies];
-                    observableDependencies.push.apply(observableDependencies, deps);
+    };
+
+    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;
                 }
-            } else if(typeof predicate === 'function') {
-                filterCallbacks[key] = predicate;
+                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 this.$observables) {
+            const dataItem = this.$observables[key];
+            if(Validator.isObservable(dataItem)) {
+                let value = dataItem.val();
+                if(Array.isArray(value)) {
+                    value = value.map(item => {
+                        if(Validator.isObservable(item)) {
+                            return item.val();
+                        }
+                        if(Validator.isProxy(item)) {
+                            return item.$value;
+                        }
+                        return item;
+                    });
+                }
+                result[key] = value;
+            } else if(Validator.isProxy(dataItem)) {
+                result[key] = dataItem.$value;
             } else {
-                filterCallbacks[key] = (value) => value === predicate;
+                result[key] = dataItem;
             }
         }
+        return result;
+    };
+    ObservableObject.prototype.$val = ObservableObject.prototype.val;
 
-        const viewArray = Observable.array();
+    ObservableObject.prototype.get = function(property) {
+        const item = this.$observables[property];
+        if(Validator.isObservable(item)) {
+            return item.val();
+        }
+        if(Validator.isProxy(item)) {
+            return item.$value;
+        }
+        return item;
+    };
+    ObservableObject.prototype.$get = ObservableObject.prototype.get;
 
-        const filters = Object.entries(filterCallbacks);
-        const updateView = () => {
-            const filtered = sourceArray.val().filter(item => {
-                for (const [key, callback] of filters) {
-                    if(key === '_') {
-                        if (!callback(item)) return false;
-                    } else {
-                        if (!callback(item[key])) return false;
-                    }
+    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;
                 }
-                return true;
-            });
+                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;
+            }
+            if(Validator.isProxy(targetItem)) {
+                targetItem.update(newValue);
+                continue;
+            }
+            this[key] = newValue;
+        }
+    };
+    ObservableObject.prototype.$set = ObservableObject.prototype.set;
+    ObservableObject.prototype.$updateWith = ObservableObject.prototype.set;
 
-            viewArray.set(filtered);
-        };
+    ObservableObject.prototype.observables = function() {
+        return Object.values(this.$observables);
+    };
+    ObservableObject.prototype.$observables = ObservableObject.prototype.observables;
 
-        observableDependencies.forEach(dep => dep.subscribe(updateView));
+    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());
 
-        updateView();
+        this.originalSubscribe(callback);
 
-        return viewArray;
+        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;
+
+    Observable.init = function(initialValue, configs = null) {
+        return new ObservableObject(initialValue, configs)
+    };
+
+    /**
+     *
+     * @param {any[]} data
+     * @return Proxy[]
+     */
+    Observable.arrayOfObject = function(data) {
+        return data.map(item => Observable.object(item));
     };
 
     /**
-     * Creates a filtered view where at least one of the specified fields matches the filter.
-     *
-     * @param {Array<string>} fields - Array of field names to check
-     * @param {FilterResult} filter - Filter condition with callback and dependencies
-     * @returns {ObservableArray} A new observable array containing filtered items
-     * @example
-     * const products = Observable.array([
-     *   { name: 'Apple', category: 'Fruit' },
-     *   { name: 'Carrot', category: 'Vegetable' }
-     * ]);
-     * const searchTerm = Observable('App');
-     * const filtered = products.whereSome(['name', 'category'], match(searchTerm));
+     * Get the value of an observable or an object of observables.
+     * @param {ObservableItem|Object<ObservableItem>} data
+     * @returns {{}|*|null}
      */
-    ObservableArray.prototype.whereSome = function(fields, filter) {
-        return this.where({
-            _: {
-                dependencies: filter.dependencies,
-                callback: (item) => fields.some(field => filter.callback(item[field]))
+    Observable.value = function(data) {
+        if(Validator.isObservable(data)) {
+            return data.val();
+        }
+        if(Validator.isProxy(data)) {
+            return data.$value;
+        }
+        if(Validator.isArray(data)) {
+            const result = [];
+            for(let i = 0, length = data.length; i < length; i++) {
+                const item = data[i];
+                result.push(Observable.value(item));
             }
-        });
+            return result;
+        }
+        return data;
     };
 
+    Observable.object = Observable.init;
+    Observable.json = Observable.init;
+
     /**
-     * Creates a filtered view where all specified fields match the filter.
+     * Creates a computed observable that automatically updates when its dependencies change.
+     * The callback is re-executed whenever any dependency observable changes.
      *
-     * @param {Array<string>} fields - Array of field names to check
-     * @param {FilterResult} filter - Filter condition with callback and dependencies
-     * @returns {ObservableArray} A new observable array containing filtered items
+     * @param {Function} callback - Function that returns the computed value
+     * @param {Array<ObservableItem|ObservableChecker|ObservableProxy>|Function} [dependencies=[]] - Array of observables to watch, or batch function
+     * @returns {ObservableItem} A new observable that updates automatically
      * @example
-     * const items = Observable.array([
-     *   { status: 'active', verified: true },
-     *   { status: 'active', verified: false }
-     * ]);
-     * const activeFilter = equals('active');
-     * const filtered = items.whereEvery(['status', 'verified'], activeFilter);
-     */
-    ObservableArray.prototype.whereEvery = function(fields, filter) {
-        return this.where({
-            _: {
-                dependencies: filter.dependencies,
-                callback: (item) => fields.every(field => filter.callback(item[field]))
-            }
-        });
-    };
-
-    ObservableArray.prototype.deepSubscribe = function(callback) {
-        const updatedValue = nextTick(() => callback(this.val()));
-        const $listeners = new WeakMap();
+     * const firstName = Observable('John');
+     * const lastName = Observable('Doe');
+     * const fullName = Observable.computed(
+     *   () => `${firstName.val()} ${lastName.val()}`,
+     *   [firstName, lastName]
+     * );
+     *
+     * // With batch function
+     * const batch = Observable.batch(() => { ...  });
+     * const computed = Observable.computed(() => { ... }, batch);
+    */
+    Observable.computed = function(callback, dependencies = []) {
+        const initialValue = callback();
+        const observable = new ObservableItem(initialValue);
+        const updatedValue = nextTick(() => observable.set(callback()));
+        {
+            PluginsManager.emit('CreateObservableComputed', observable, dependencies);
+        }
 
-        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));
+        if(Validator.isFunction(dependencies)) {
+            if(!Validator.isObservable(dependencies.$observer)) {
+                throw new NativeDocumentError('Observable.computed : dependencies must be valid batch function');
             }
-        };
+            dependencies.$observer.subscribe(updatedValue);
+            return observable;
+        }
 
-        const unbindItem = (item) => {
-            const unsub = $listeners.get(item);
-            if (unsub) {
-                unsub();
-                $listeners.delete(item);
+        dependencies.forEach(dependency => {
+            if(Validator.isProxy(dependency)) {
+                dependency.$observables.forEach((observable) => {
+                    observable.subscribe(updatedValue);
+                });
+                return;
             }
-        };
-
-        this.$currentValue.forEach(bindItem);
-        this.subscribe(updatedValue);
-
-        this.subscribe((items, _, operations) => {
-            switch (operations?.action) {
-                case 'push':
-                case 'unshift':
-                    operations.args.forEach(bindItem);
-                    break;
+            dependency.subscribe(updatedValue);
+        });
 
-                case 'splice': {
-                    const [start, deleteCount, ...newItems] = operations.args;
-                    operations.result?.forEach(unbindItem);
-                    newItems.forEach(bindItem);
-                    break;
-                }
+        return observable;
+    };
 
-                case 'remove':
-                    unbindItem(operations.result);
-                    break;
+    const StoreFactory = function() {
 
-                case 'merge':
-                    operations.args.forEach(bindItem);
-                    break;
+        const $stores = new Map();
+        const $followersCache = new Map();
 
-                case 'clear':
-                    this.$currentValue.forEach(unbindItem);
-                    break;
+        /**
+         * Internal helper — retrieves a store entry or throws if not found.
+         */
+        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 () => {
-            this.$currentValue.forEach(unbindItem);
+            return item;
         };
-    };
 
-    /**
-     * Creates an observable array with reactive array methods.
-     * All mutations trigger updates automatically.
-     *
-     * @param {Array} [target=[]] - Initial array value
-     * @param {Object|null} [configs=null] - Configuration options
-     * // @param {boolean} [configs.propagation=true] - Whether to propagate changes to parent observables
-     * // @param {boolean} [configs.deep=false] - Whether to make nested objects observable
-     * @param {boolean} [configs.reset=false] - Whether to store initial value for reset()
-     * @returns {ObservableArray} An observable array with reactive methods
-     * @example
-     * const items = Observable.array([1, 2, 3]);
-     * items.push(4); // Triggers update
-     * items.subscribe((arr) => console.log(arr));
-     */
-    Observable.array = function(target = [], configs = null) {
-        return new ObservableArray(target, configs);
-    };
+        /**
+         * 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');
+        };
 
-    /**
-     *
-     * @param {Function} callback
-     * @returns {Function}
-     */
-    Observable.batch = function(callback) {
-        const $observer = Observable(0);
-        const batch = function() {
-            if(Validator.isAsyncFunction(callback)) {
-                return (callback(...arguments)).then(() => {
-                    $observer.trigger();
-                }).catch(error => { throw error; });
+        const $createObservable = (value, options = {}) => {
+            if(Array.isArray(value)) {
+                return Observable.array(value, options);
             }
-            callback(...arguments);
-            $observer.trigger();
+            if(typeof value === 'object') {
+                return Observable.object(value, options);
+            }
+            return Observable(value, options);
         };
-        batch.$observer = $observer;
-        return batch;
-    };
 
-    const ObservableObject = function(target, configs) {
-        ObservableItem.call(this, target);
-        this.$observables = {};
-        this.configs = configs;
+        const $api = {
+            /**
+             * Create a new state and return the observer.
+             * Throws if a store with the same name already exists.
+             *
+             * @param {string} name
+             * @param {*} value
+             * @returns {ObservableItem}
+             */
+            create(name, value) {
+                if ($stores.has(name)) {
+                    DebugManager.warn('Store', `Store.create('${name}') : a store with this name already exists. Use Store.get('${name}') to retrieve it.`);
+                    throw new NativeDocumentError(
+                        `Store.create('${name}') : a store with this name already exists.`
+                    );
+                }
+                const observer = $createObservable(value);
+                $stores.set(name, { observer, subscribers: new Set(), resettable: false, composed: false });
+                return observer;
+            },
+
+            /**
+             * Create a new resettable state and return the observer.
+             * The store can be reset to its initial value via Store.reset(name).
+             * Throws if a store with the same name already exists.
+             *
+             * @param {string} name
+             * @param {*} value
+             * @returns {ObservableItem}
+             */
+            createResettable(name, value) {
+                if ($stores.has(name)) {
+                    DebugManager.warn('Store', `Store.createResettable('${name}') : a store with this name already exists.`);
+                    throw new NativeDocumentError(
+                        `Store.createResettable('${name}') : a store with this name already exists.`
+                    );
+                }
+                const observer = $createObservable(value, { reset: true });
+                $stores.set(name, { observer, subscribers: new Set(), resettable: true, composed: false });
+                return observer;
+            },
 
-        this.$load(target);
+            /**
+             * Create a computed store derived from other stores.
+             * The value is automatically recalculated when any dependency changes.
+             * This store is read-only — Store.use() and Store.set() will throw.
+             * Throws if a store with the same name already exists.
+             *
+             * @param {string} name
+             * @param {() => *} computation - Function that returns the computed value
+             * @param {string[]} dependencies - Names of the stores to watch
+             * @returns {ObservableItem}
+             *
+             * @example
+             * Store.create('products', [{ id: 1, price: 10 }]);
+             * Store.create('cart', [{ productId: 1, quantity: 2 }]);
+             *
+             * Store.createComposed('total', () => {
+             *     const products = Store.get('products').val();
+             *     const cart     = Store.get('cart').val();
+             *     return cart.reduce((sum, item) => {
+             *         const product = products.find(p => p.id === item.productId);
+             *         return sum + (product.price * item.quantity);
+             *     }, 0);
+             * }, ['products', 'cart']);
+             */
+            createComposed(name, computation, dependencies) {
+                if ($stores.has(name)) {
+                    DebugManager.warn('Store', `Store.createComposed('${name}') : a store with this name already exists.`);
+                    throw new NativeDocumentError(
+                        `Store.createComposed('${name}') : a store with this name already exists.`
+                    );
+                }
+                if (typeof computation !== 'function') {
+                    throw new NativeDocumentError(
+                        `Store.createComposed('${name}') : computation must be a function.`
+                    );
+                }
+                if (!Array.isArray(dependencies) || dependencies.length === 0) {
+                    throw new NativeDocumentError(
+                        `Store.createComposed('${name}') : dependencies must be a non-empty array of store names.`
+                    );
+                }
 
-        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)
+                // Resolve dependency observers
+                const depObservers = dependencies.map(depName => {
+                    if(typeof depName !== 'string') {
+                        return depName;
+                    }
+                    const depItem = $stores.get(depName);
+                    if (!depItem) {
+                        DebugManager.error('Store', `Store.createComposed('${name}') : dependency '${depName}' not found. Create it first.`);
+                        throw new NativeDocumentError(
+                            `Store.createComposed('${name}') : dependency store '${depName}' not found.`
+                        );
+                    }
+                    return depItem.observer;
                 });
-            }
-        }
-
-    };
 
-    ObservableObject.prototype = Object.create(ObservableItem.prototype);
+                // Create computed observable from dependency observers
+                const observer = Observable.computed(computation, depObservers);
 
-    Object.defineProperty(ObservableObject, '$value', {
-        get() {
-            return this.val();
-        },
-        set(value) {
-            this.set(value);
-        }
-    });
+                $stores.set(name, { observer, subscribers: new Set(), resettable: false, composed: true });
+                return observer;
+            },
 
-    ObservableObject.prototype.__$isObservableObject = true;
-    ObservableObject.prototype.__isProxy__ = true;
+            /**
+             * Returns true if a store with the given name exists.
+             *
+             * @param {string} name
+             * @returns {boolean}
+             */
+            has(name) {
+                return $stores.has(name);
+            },
 
-    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;
+            /**
+             * 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.`
+                    );
                 }
-                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);
-        }
-    };
+                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();
+            },
 
-    ObservableObject.prototype.val = function() {
-        const result = {};
-        for(const key in this.$observables) {
-            const dataItem = this.$observables[key];
-            if(Validator.isObservable(dataItem)) {
-                let value = dataItem.val();
-                if(Array.isArray(value)) {
-                    value = value.map(item => {
-                        if(Validator.isObservable(item)) {
-                            return item.val();
-                        }
-                        if(Validator.isProxy(item)) {
-                            return item.$value;
-                        }
-                        return item;
-                    });
+            /**
+             * Returns a two-way synchronized follower of the store.
+             * Writing to the follower propagates the value back to the store and all its subscribers.
+             * Throws if called on a composed store — use Store.follow() instead.
+             * Call follower.destroy() or follower.dispose() to unsubscribe.
+             *
+             * @param {string} name
+             * @returns {ObservableItem}
+             */
+            use(name) {
+                const item = $getStoreOrThrow('use', name);
+
+                if (item.composed) {
+                    DebugManager.error('Store', `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`);
+                    throw new NativeDocumentError(
+                        `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`
+                    );
                 }
-                result[key] = value;
-            } else if(Validator.isProxy(dataItem)) {
-                result[key] = dataItem.$value;
-            } else {
-                result[key] = dataItem;
-            }
-        }
-        return result;
-    };
-    ObservableObject.prototype.$val = ObservableObject.prototype.val;
 
-    ObservableObject.prototype.get = function(property) {
-        const item = this.$observables[property];
-        if(Validator.isObservable(item)) {
-            return item.val();
-        }
-        if(Validator.isProxy(item)) {
-            return item.$value;
-        }
-        return item;
-    };
-    ObservableObject.prototype.$get = ObservableObject.prototype.get;
+                const { observer: originalObserver, subscribers } = item;
+                const observerFollower = $createObservable(originalObserver.val());
 
-    ObservableObject.prototype.set = function(newData) {
-        const data = Validator.isProxy(newData) ? newData.$value : newData;
-        const configs = this.configs;
+                const onStoreChange    = value => observerFollower.set(value);
+                const onFollowerChange = value => originalObserver.set(value);
 
-        for(const key in data) {
-            const targetItem = this.$observables[key];
-            const newValueOrigin = newData[key];
-            const newValue = data[key];
+                originalObserver.subscribe(onStoreChange);
+                observerFollower.subscribe(onFollowerChange);
 
-            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);
-                    });
-                    targetItem.set(newValues);
-                    continue;
-                }
-                targetItem.set([...newValue]);
-                continue;
-            }
-            if(Validator.isProxy(targetItem)) {
-                targetItem.update(newValue);
-                continue;
-            }
-            this[key] = newValue;
-        }
-    };
-    ObservableObject.prototype.$set = ObservableObject.prototype.set;
-    ObservableObject.prototype.$updateWith = ObservableObject.prototype.set;
+                observerFollower.destroy = () => {
+                    originalObserver.unsubscribe(onStoreChange);
+                    observerFollower.unsubscribe(onFollowerChange);
+                    subscribers.delete(observerFollower);
+                    observerFollower.cleanup();
+                };
+                observerFollower.dispose = observerFollower.destroy;
 
-    ObservableObject.prototype.observables = function() {
-        return Object.values(this.$observables);
-    };
-    ObservableObject.prototype.$observables = ObservableObject.prototype.observables;
+                subscribers.add(observerFollower);
+                return observerFollower;
+            },
+
+            /**
+             * Returns a read-only follower of the store.
+             * The follower reflects store changes but cannot write back to the store.
+             * Any attempt to call .set(), .toggle() or .reset() will throw.
+             * Call follower.destroy() or follower.dispose() to unsubscribe.
+             *
+             * @param {string} name
+             * @returns {ObservableItem}
+             */
+            follow(name) {
+                const { observer: originalObserver, subscribers } = $getStoreOrThrow('follow', name);
+                const observerFollower = $createObservable(originalObserver.val());
 
-    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 onStoreChange = value => observerFollower.set(value);
+                originalObserver.subscribe(onStoreChange);
 
-        this.originalSubscribe(callback);
+                $applyReadOnly(observerFollower, name, 'follow');
 
-        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;
-    };
+                observerFollower.destroy = () => {
+                    originalObserver.unsubscribe(onStoreChange);
+                    subscribers.delete(observerFollower);
+                    observerFollower.cleanup();
+                };
+                observerFollower.dispose = observerFollower.destroy;
 
-    ObservableObject.prototype.update = ObservableObject.prototype.set;
+                subscribers.add(observerFollower);
+                return observerFollower;
+            },
 
-    Observable.init = function(initialValue, configs = null) {
-        return new ObservableObject(initialValue, configs)
-    };
+            /**
+             * Returns the raw store observer directly (no follower, no cleanup contract).
+             * Use this for direct read access when you don't need to unsubscribe.
+             * WARNING : mutations on this observer impact all subscribers immediately.
+             *
+             * @param {string} name
+             * @returns {ObservableItem|null}
+             */
+            get(name) {
+                const item = $stores.get(name);
+                if (!item) {
+                    DebugManager.warn('Store', `Store.get('${name}') : store not found.`);
+                    return null;
+                }
+                return item.observer;
+            },
 
-    /**
-     *
-     * @param {any[]} data
-     * @return Proxy[]
-     */
-    Observable.arrayOfObject = function(data) {
-        return data.map(item => Observable.object(item));
-    };
+            /**
+             * @param {string} name
+             * @returns {{ observer: ObservableItem, subscribers: Set } | null}
+             */
+            getWithSubscribers(name) {
+                return $stores.get(name) ?? null;
+            },
 
-    /**
-     * Get the value of an observable or an object of observables.
-     * @param {ObservableItem|Object<ObservableItem>} data
-     * @returns {{}|*|null}
-     */
-    Observable.value = function(data) {
-        if(Validator.isObservable(data)) {
-            return data.val();
-        }
-        if(Validator.isProxy(data)) {
-            return data.$value;
-        }
-        if(Validator.isArray(data)) {
-            const result = [];
-            for(let i = 0, length = data.length; i < length; i++) {
-                const item = data[i];
-                result.push(Observable.value(item));
-            }
-            return result;
-        }
-        return data;
-    };
+            /**
+             * Destroys a store : cleans up the observer, destroys all followers, and removes the entry.
+             *
+             * @param {string} name
+             */
+            delete(name) {
+                const item = $stores.get(name);
+                if (!item) {
+                    DebugManager.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
+                    return;
+                }
+                item.subscribers.forEach(follower => follower.destroy());
+                item.subscribers.clear();
+                item.observer.cleanup();
+                $stores.delete(name);
+            },
+            /**
+             * Creates an isolated store group with its own state namespace.
+             * Each group is a fully independent StoreFactory instance —
+             * no key conflicts, no shared state with the parent store.
+             *
+             * @param {string | ((group: ReturnType<typeof StoreFactory>) => void)} name - Group name for debugging, or setup callback if no name is provided
+             * @param {((group: ReturnType<typeof StoreFactory>) => void)} [callback] - Setup function receiving the isolated store instance
+             * @returns {ReturnType<typeof StoreFactory>}
+             *
+             * @example
+             * // With name (recommended)
+             * const EventStore = Store.group('events', (group) => {
+             *     group.create('catalog', []);
+             *     group.create('filters', { category: null, date: null });
+             *     group.createResettable('selected', null);
+             *     group.createComposed('filtered', () => {
+             *         const catalog = EventStore.get('catalog').val();
+             *         const filters = EventStore.get('filters').val();
+             *         return catalog.filter(event => {
+             *             if (filters.category && event.category !== filters.category) return false;
+             *             return true;
+             *         });
+             *     }, ['catalog', 'filters']);
+             * });
+             *
+             * // Without name
+             * const CartStore = Store.group((group) => {
+             *     group.create('items', []);
+             * });
+             *
+             * // Usage
+             * EventStore.use('catalog'); // two-way follower
+             * EventStore.follow('filtered'); // read-only follower
+             * EventStore.get('filters'); // raw observable
+             *
+             * // Cross-group composed
+             * const OrderStore = Store.group('orders', (group) => {
+             *     group.createComposed('summary', () => {
+             *         const items = CartStore.get('items').val();
+             *         const events = EventStore.get('catalog').val();
+             *         return { items, events };
+             *     }, [CartStore.get('items'), EventStore.get('catalog')]);
+             * });
+             */
+            group(name, callback) {
+                if (typeof name === 'function') {
+                    callback = name;
+                    name = 'anonymous';
+                }
+                const store = StoreFactory();
+                callback && callback(store);
+                return store;
+            },
+            createPersistent(name, value, localstorage_key) {
+                localstorage_key = localstorage_key || name;
+                const observer = this.create(name, $getFromStorage(localstorage_key, value));
+                const saver = $saveToStorage(value);
 
-    Observable.object = Observable.init;
-    Observable.json = Observable.init;
+                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));
 
-    /**
-     * Creates a computed observable that automatically updates when its dependencies change.
-     * The callback is re-executed whenever any dependency observable changes.
-     *
-     * @param {Function} callback - Function that returns the computed value
-     * @param {Array<ObservableItem|ObservableChecker|ObservableProxy>|Function} [dependencies=[]] - Array of observables to watch, or batch function
-     * @returns {ObservableItem} A new observable that updates automatically
-     * @example
-     * const firstName = Observable('John');
-     * const lastName = Observable('Doe');
-     * const fullName = Observable.computed(
-     *   () => `${firstName.val()} ${lastName.val()}`,
-     *   [firstName, lastName]
-     * );
-     *
-     * // With batch function
-     * const batch = Observable.batch(() => { ...  });
-     * const computed = Observable.computed(() => { ... }, batch);
-    */
-    Observable.computed = function(callback, dependencies = []) {
-        const initialValue = callback();
-        const observable = new ObservableItem(initialValue);
-        const updatedValue = nextTick(() => observable.set(callback()));
-        {
-            PluginsManager$1.emit('CreateObservableComputed', observable, dependencies);
-        }
+                const originalReset = observer.reset.bind(observer);
+                observer.reset = () => {
+                    LocalStorage.remove(localstorage_key);
+                    originalReset();
+                };
 
-        if(Validator.isFunction(dependencies)) {
-            if(!Validator.isObservable(dependencies.$observer)) {
-                throw new NativeDocumentError('Observable.computed : dependencies must be valid batch function');
+                return observer;
             }
-            dependencies.$observer.subscribe(updatedValue);
-            return observable;
-        }
+        };
 
-        dependencies.forEach(dependency => {
-            if(Validator.isProxy(dependency)) {
-                dependency.$observables.forEach((observable) => {
-                    observable.subscribe(updatedValue);
-                });
-                return;
+
+        return new Proxy($api, {
+            get(target, prop) {
+                if (typeof prop === 'symbol' || prop.startsWith('$') || prop in target) {
+                    return target[prop];
+                }
+                if (target.has(prop)) {
+                    if ($followersCache.has(prop)) {
+                        return $followersCache.get(prop);
+                    }
+                    const follower = target.follow(prop);
+                    $followersCache.set(prop, follower);
+                    return follower;
+                }
+                return undefined;
+            },
+            set(target, prop, value) {
+                DebugManager.error('Store', `Forbidden: You cannot overwrite the store key '${String(prop)}'. Use .use('${String(prop)}').set(value) instead.`);
+                throw new NativeDocumentError(`Store structure is immutable. Use .set() on the observable.`);
+            },
+            deleteProperty(target, prop) {
+                throw new NativeDocumentError(`Store keys cannot be deleted.`);
             }
-            dependency.subscribe(updatedValue);
         });
-
-        return observable;
     };
 
+    const Store = StoreFactory();
+
+    Store.create('locale', navigator.language.split('-')[0] || 'en');
+
     /**
      * 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.
@@ -4790,7 +4820,7 @@ var NativeDocument = (function (exports) {
                 }
                 cache.set(keyId, { keyId, isNew: true, child: new WeakRef(child), indexObserver});
             } catch (e) {
-                DebugManager$1.error('ForEach', `Error creating element for key ${keyId}` , e);
+                DebugManager.error('ForEach', `Error creating element for key ${keyId}` , e);
                 throw e;
             }
             return keyId;
@@ -5180,7 +5210,7 @@ var NativeDocument = (function (exports) {
      */
     const ShowIf = function(condition, child, { comment = null, shouldKeepInCache = true} = {}) {
         if(!(Validator.isObservable(condition)) && !Validator.isObservableWhenResult(condition)) {
-            return DebugManager$1.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
+            return DebugManager.warn('ShowIf', "ShowIf : condition must be an Observable / "+comment, condition);
         }
         const element = Anchor('Show if : '+(comment || ''));
 
@@ -6599,7 +6629,7 @@ var NativeDocument = (function (exports) {
                 window.history.pushState({ name: route.name(), params, path}, route.name() || path , path);
                 this.handleRouteChange(route, params, query, path);
             } catch (e) {
-                DebugManager$1.error('HistoryRouter', 'Error in pushState', e);
+                DebugManager.error('HistoryRouter', 'Error in pushState', e);
             }
         };
         /**
@@ -6612,7 +6642,7 @@ var NativeDocument = (function (exports) {
                 window.history.replaceState({ name: route.name(), params, path}, route.name() || path , path);
                 this.handleRouteChange(route, params, {}, path);
             } catch(e) {
-                DebugManager$1.error('HistoryRouter', 'Error in replaceState', e);
+                DebugManager.error('HistoryRouter', 'Error in replaceState', e);
             }
         };
         this.forward = function() {
@@ -6639,7 +6669,7 @@ var NativeDocument = (function (exports) {
                     }
                     this.handleRouteChange(route, params, query, path);
                 } catch(e) {
-                    DebugManager$1.error('HistoryRouter', 'Error in popstate event', e);
+                    DebugManager.error('HistoryRouter', 'Error in popstate event', e);
                 }
             });
             const { route, params, query, path } = this.resolve(defaultPath || (window.location.pathname+window.location.search));
@@ -6864,7 +6894,7 @@ var NativeDocument = (function (exports) {
                     listener(request);
                     next && next(request);
                 } catch (e) {
-                    DebugManager$1.warn('Route Listener', 'Error in listener:', e);
+                    DebugManager.warn('Route Listener', 'Error in listener:', e);
                 }
             }
         };
@@ -7042,7 +7072,7 @@ var NativeDocument = (function (exports) {
      */
     Router.create = function(options, callback) {
         if(!Validator.isFunction(callback)) {
-            DebugManager$1.error('Router', 'Callback must be a function');
+            DebugManager.error('Router', 'Callback must be a function');
             throw new RouterError('Callback must be a function');
         }
         const router = new Router(options);
@@ -7246,7 +7276,7 @@ var NativeDocument = (function (exports) {
     exports.HtmlElementWrapper = HtmlElementWrapper;
     exports.NDElement = NDElement;
     exports.Observable = Observable;
-    exports.PluginsManager = PluginsManager$1;
+    exports.PluginsManager = PluginsManager;
     exports.SingletonView = SingletonView;
     exports.Store = Store;
     exports.StoreFactory = StoreFactory;