native-document 1.0.116 → 1.0.118

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

@@ -1221,6 +1221,97 @@ var NativeComponents = (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);
@@ -1277,696 +1368,205 @@ var NativeComponents = (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;
 
-        /**
-         * 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 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.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);
-        };
+        }
+    }
 
-        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;
-            },
+    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.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.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.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;
-                });
+    ObservableItem.prototype.triggerFirstListener = function(operations) {
+        this.$firstListener(this.$currentValue, this.$previousValue, operations);
+    };
 
-                // Create computed observable from dependency observers
-                const observer = Observable.computed(computation, depObservers);
+    ObservableItem.prototype.triggerListeners = function(operations) {
+        const $listeners = this.$listeners;
+        const $previousValue = this.$previousValue;
+        const $currentValue = this.$currentValue;
 
-                $stores.set(name, { observer, subscribers: new Set(), resettable: false, composed: true });
-                return observer;
-            },
+        for(let i = 0, length = $listeners.length; i < length; i++) {
+            $listeners[i]($currentValue, $previousValue, operations);
+        }
+    };
 
-            /**
-             * Returns true if a store with the given name exists.
-             *
-             * @param {string} name
-             * @returns {boolean}
-             */
-            has(name) {
-                return $stores.has(name);
-            },
+    ObservableItem.prototype.triggerWatchers = function(operations) {
+        const $watchers = this.$watchers;
+        const $previousValue = this.$previousValue;
+        const $currentValue = this.$currentValue;
 
-            /**
-             * Resets a resettable store to its initial value and notifies all subscribers.
-             * Throws if the store was not created with createResettable().
-             *
-             * @param {string} name
-             */
-            reset(name) {
-                const item = $getStoreOrThrow('reset', name);
-                if (item.composed) {
-                    DebugManager.error('Store', `Store.reset('${name}') : composed stores cannot be reset. Their value is derived from dependencies.`);
-                    throw new NativeDocumentError(
-                        `Store.reset('${name}') : composed stores cannot be reset.`
-                    );
-                }
-                if (!item.resettable) {
-                    DebugManager.error('Store', `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`);
-                    throw new NativeDocumentError(
-                        `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`
-                    );
-                }
-                item.observer.reset();
-            },
+        const $currentValueCallbacks = $watchers.get($currentValue);
+        const $previousValueCallbacks = $watchers.get($previousValue);
+        if($currentValueCallbacks) {
+            $currentValueCallbacks(true, $previousValue, operations);
+        }
+        if($previousValueCallbacks) {
+            $previousValueCallbacks(false, $currentValue, operations);
+        }
+    };
 
-            /**
-             * 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);
+    ObservableItem.prototype.triggerAll = function(operations) {
+        this.triggerWatchers(operations);
+        this.triggerListeners(operations);
+    };
 
-                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.`
-                    );
-                }
+    ObservableItem.prototype.triggerWatchersAndFirstListener = function(operations) {
+        this.triggerWatchers(operations);
+        this.triggerFirstListener(operations);
+    };
 
-                const { observer: originalObserver, subscribers } = item;
-                const observerFollower = $createObservable(originalObserver.val());
+    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;
 
-                const onStoreChange    = value => observerFollower.set(value);
-                const onFollowerChange = value => originalObserver.set(value);
+    ObservableItem.prototype.$updateWithNewValue = function(newValue) {
+        newValue = newValue?.__$isObservable ? newValue.val() : newValue;
+        if(this.$currentValue === newValue) {
+            return;
+        }
+        this.$previousValue = this.$currentValue;
+        this.$currentValue = newValue;
+        this.trigger();
+        this.$previousValue = null;
+    };
 
-                originalObserver.subscribe(onStoreChange);
-                observerFollower.subscribe(onFollowerChange);
+    /**
+     * @param {*} data
+     */
+    ObservableItem.prototype.$setWithInterceptor = function(data) {
+        let newValue = (typeof data === 'function') ? data(this.$currentValue) : data;
+        const result = this.$interceptor(newValue, this.$currentValue);
 
-                observerFollower.destroy = () => {
-                    originalObserver.unsubscribe(onStoreChange);
-                    observerFollower.unsubscribe(onFollowerChange);
-                    subscribers.delete(observerFollower);
-                    observerFollower.cleanup();
-                };
-                observerFollower.dispose = observerFollower.destroy;
+        if (result !== undefined) {
+            newValue = result;
+        }
 
-                subscribers.add(observerFollower);
-                return observerFollower;
-            },
+        this.$updateWithNewValue(newValue);
+    };
 
-            /**
-             * 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());
+    /**
+     * @param {*} data
+     */
+    ObservableItem.prototype.$basicSet = function(data) {
+        let newValue = (typeof data === 'function') ? data(this.$currentValue) : data;
+        this.$updateWithNewValue(newValue);
+    };
 
-                const onStoreChange = value => observerFollower.set(value);
-                originalObserver.subscribe(onStoreChange);
+    ObservableItem.prototype.set = ObservableItem.prototype.$basicSet;
 
-                $applyReadOnly(observerFollower, name, 'follow');
+    ObservableItem.prototype.val = function() {
+        return this.$currentValue;
+    };
 
-                observerFollower.destroy = () => {
-                    originalObserver.unsubscribe(onStoreChange);
-                    subscribers.delete(observerFollower);
-                    observerFollower.cleanup();
-                };
-                observerFollower.dispose = observerFollower.destroy;
+    ObservableItem.prototype.disconnectAll = function() {
+        this.$previousValue = null;
+        this.$currentValue = null;
+        this.$listeners = null;
+        this.$watchers = null;
+        this.trigger = noneTrigger;
+    };
 
-                subscribers.add(observerFollower);
-                return observerFollower;
-            },
+    /**
+     * 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);
+    };
 
-            /**
-             * 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;
-            },
+    ObservableItem.prototype.cleanup = function() {
+        if (this.$cleanupListeners) {
+            for (let i = 0; i < this.$cleanupListeners.length; i++) {
+                this.$cleanupListeners[i]();
+            }
+            this.$cleanupListeners = null;
+        }
+        MemoryManager.unregister(this.$memoryId);
+        this.disconnectAll();
+        delete this.$value;
+    };
 
-            /**
-             * @param {string} name
-             * @returns {{ observer: ObservableItem, subscribers: Set } | null}
-             */
-            getWithSubscribers(name) {
-                return $stores.get(name) ?? null;
-            },
-
-            /**
-             * Destroys a store : cleans up the observer, destroys all followers, and removes the entry.
-             *
-             * @param {string} name
-             */
-            delete(name) {
-                const item = $stores.get(name);
-                if (!item) {
-                    DebugManager.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
-                    return;
-                }
-                item.subscribers.forEach(follower => follower.destroy());
-                item.subscribers.clear();
-                item.observer.cleanup();
-                $stores.delete(name);
-            },
-            /**
-             * Creates an isolated store group with its own state namespace.
-             * Each group is a fully independent StoreFactory instance —
-             * no key conflicts, no shared state with the parent store.
-             *
-             * @param {string | ((group: ReturnType<typeof StoreFactory>) => void)} name - Group name for debugging, or setup callback if no name is provided
-             * @param {((group: ReturnType<typeof StoreFactory>) => void)} [callback] - Setup function receiving the isolated store instance
-             * @returns {ReturnType<typeof StoreFactory>}
-             *
-             * @example
-             * // With name (recommended)
-             * const EventStore = Store.group('events', (group) => {
-             *     group.create('catalog', []);
-             *     group.create('filters', { category: null, date: null });
-             *     group.createResettable('selected', null);
-             *     group.createComposed('filtered', () => {
-             *         const catalog = EventStore.get('catalog').val();
-             *         const filters = EventStore.get('filters').val();
-             *         return catalog.filter(event => {
-             *             if (filters.category && event.category !== filters.category) return false;
-             *             return true;
-             *         });
-             *     }, ['catalog', 'filters']);
-             * });
-             *
-             * // Without name
-             * const CartStore = Store.group((group) => {
-             *     group.create('items', []);
-             * });
-             *
-             * // Usage
-             * EventStore.use('catalog'); // two-way follower
-             * EventStore.follow('filtered'); // read-only follower
-             * EventStore.get('filters'); // raw observable
-             *
-             * // Cross-group composed
-             * const OrderStore = Store.group('orders', (group) => {
-             *     group.createComposed('summary', () => {
-             *         const items = CartStore.get('items').val();
-             *         const events = EventStore.get('catalog').val();
-             *         return { items, events };
-             *     }, [CartStore.get('items'), EventStore.get('catalog')]);
-             * });
-             */
-            group(name, callback) {
-                if (typeof name === 'function') {
-                    callback = name;
-                    name = 'anonymous';
-                }
-                const store = StoreFactory();
-                callback && callback(store);
-                return store;
-            },
-            createPersistent(name, value, localstorage_key) {
-                localstorage_key = localstorage_key || name;
-                const observer = this.create(name, $getFromStorage(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.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.$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;
-            }
-        }
-    }
-
-    Object.defineProperty(ObservableItem.prototype, '$value', {
-        get() {
-            return this.$currentValue;
-        },
-        set(value) {
-            this.set(value);
-        },
-        configurable: true,
-    });
-
-    ObservableItem.prototype.__$isObservable = true;
-    const noneTrigger = function() {};
-
-    /**
-     * Intercepts and transforms values before they are set on the observable.
-     * The interceptor can modify the value or return undefined to use the original value.
-     *
-     * @param {(value) => any} callback - Interceptor function that receives (newValue, currentValue) and returns the transformed value or undefined
-     * @returns {ObservableItem} The observable instance for chaining
-     * @example
-     * const count = Observable(0);
-     * count.intercept((newVal, oldVal) => Math.max(0, newVal)); // Prevent negative values
-     */
-    ObservableItem.prototype.intercept = function(callback) {
-        this.$interceptor = callback;
-        this.set = this.$setWithInterceptor;
-        return this;
-    };
-
-    ObservableItem.prototype.triggerFirstListener = function(operations) {
-        this.$firstListener(this.$currentValue, this.$previousValue, operations);
-    };
-
-    ObservableItem.prototype.triggerListeners = function(operations) {
-        const $listeners = this.$listeners;
-        const $previousValue = this.$previousValue;
-        const $currentValue = this.$currentValue;
-
-        for(let i = 0, length = $listeners.length; i < length; i++) {
-            $listeners[i]($currentValue, $previousValue, operations);
-        }
-    };
-
-    ObservableItem.prototype.triggerWatchers = function(operations) {
-        const $watchers = this.$watchers;
-        const $previousValue = this.$previousValue;
-        const $currentValue = this.$currentValue;
-
-        const $currentValueCallbacks = $watchers.get($currentValue);
-        const $previousValueCallbacks = $watchers.get($previousValue);
-        if($currentValueCallbacks) {
-            $currentValueCallbacks(true, $previousValue, operations);
-        }
-        if($previousValueCallbacks) {
-            $previousValueCallbacks(false, $currentValue, operations);
-        }
-    };
-
-    ObservableItem.prototype.triggerAll = function(operations) {
-        this.triggerWatchers(operations);
-        this.triggerListeners(operations);
-    };
-
-    ObservableItem.prototype.triggerWatchersAndFirstListener = function(operations) {
-        this.triggerWatchers(operations);
-        this.triggerFirstListener(operations);
-    };
-
-    ObservableItem.prototype.assocTrigger = function() {
-        this.$firstListener = null;
-        if(this.$watchers?.size && this.$listeners?.length) {
-            this.trigger = (this.$listeners.length === 1) ? this.triggerWatchersAndFirstListener : this.triggerAll;
-            return;
-        }
-        if(this.$listeners?.length) {
-            if(this.$listeners.length === 1) {
-                this.$firstListener = this.$listeners[0];
-                this.trigger = this.triggerFirstListener;
-            }
-            else {
-                this.trigger = this.triggerListeners;
-            }
-            return;
-        }
-        if(this.$watchers?.size) {
-            this.trigger = this.triggerWatchers;
-            return;
-        }
-        this.trigger = noneTrigger;
-    };
-    ObservableItem.prototype.trigger = noneTrigger;
-
-    ObservableItem.prototype.$updateWithNewValue = function(newValue) {
-        newValue = newValue?.__$isObservable ? newValue.val() : newValue;
-        if(this.$currentValue === newValue) {
-            return;
-        }
-        this.$previousValue = this.$currentValue;
-        this.$currentValue = newValue;
-        this.trigger();
-        this.$previousValue = null;
-    };
-
-    /**
-     * @param {*} data
-     */
-    ObservableItem.prototype.$setWithInterceptor = function(data) {
-        let newValue = (typeof data === 'function') ? data(this.$currentValue) : data;
-        const result = this.$interceptor(newValue, this.$currentValue);
-
-        if (result !== undefined) {
-            newValue = result;
-        }
-
-        this.$updateWithNewValue(newValue);
-    };
-
-    /**
-     * @param {*} data
-     */
-    ObservableItem.prototype.$basicSet = function(data) {
-        let newValue = (typeof data === 'function') ? data(this.$currentValue) : data;
-        this.$updateWithNewValue(newValue);
-    };
-
-    ObservableItem.prototype.set = ObservableItem.prototype.$basicSet;
-
-    ObservableItem.prototype.val = function() {
-        return this.$currentValue;
-    };
-
-    ObservableItem.prototype.disconnectAll = function() {
-        this.$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();
-        delete this.$value;
-    };
-
-    /**
-     *
-     * @param {Function} callback
-     * @returns {(function(): void)}
-     */
-    ObservableItem.prototype.subscribe = function(callback) {
-        this.$listeners = this.$listeners ?? [];
+    /**
+     *
+     * @param {Function} callback
+     * @returns {(function(): void)}
+     */
+    ObservableItem.prototype.subscribe = function(callback) {
+        this.$listeners = this.$listeners ?? [];
 
         this.$listeners.push(callback);
         this.assocTrigger();
@@ -2384,7 +1984,6 @@ var NativeComponents = (function (exports) {
             }
             element.classes.toggle(className, value);
         }
-        data = null;
     };
 
     /**
@@ -3298,35 +2897,78 @@ var NativeComponents = (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);
             }
@@ -3338,14 +2980,6 @@ var NativeComponents = (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;
@@ -3355,10 +2989,10 @@ var NativeComponents = (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;
     };
 
@@ -3648,500 +3282,900 @@ var NativeComponents = (function (exports) {
     };
 
     /**
-     * Checks if the array is empty.
+     * Checks if the array is empty.
+     *
+     * @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([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);
+    };
+
+    /**
      *
-     * @returns {boolean} True if array has no elements
-     * @example
-     * const items = Observable.array([]);
-     * items.isEmpty(); // true
+     * @param {Function} callback
+     * @returns {Function}
      */
-    ObservableArray.prototype.isEmpty = function() {
-        return this.$currentValue.length === 0;
+    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;
     };
 
-    /**
-     * 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] });
+    const ObservableObject = function(target, configs) {
+        ObservableItem.call(this, target);
+        this.$observables = {};
+        this.configs = configs;
+
+        this.$load(target);
+
+        for(const name in target) {
+            if(!Object.hasOwn(this, name)) {
+                Object.defineProperty(this, name, {
+                    get: () => this.$observables[name],
+                    set: (value) => this.$observables[name].set(value)
+                });
+            }
+        }
+
     };
 
+    ObservableObject.prototype = Object.create(ObservableItem.prototype);
 
-    /**
-     * 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 = {};
+    Object.defineProperty(ObservableObject, '$value', {
+        get() {
+            return this.val();
+        },
+        set(value) {
+            this.set(value);
+        }
+    });
 
-        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;
+    ObservableObject.prototype.__$isObservableObject = true;
+    ObservableObject.prototype.__isProxy__ = true;
 
-                if (predicate.dependencies) {
-                    const deps = Array.isArray(predicate.dependencies)
-                        ? predicate.dependencies
-                        : [predicate.dependencies];
-                    observableDependencies.push.apply(observableDependencies, deps);
+    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;
-                    }
-                }
-                return true;
-            });
+    ObservableObject.prototype.set = function(newData) {
+        const data = Validator.isProxy(newData) ? newData.$value : newData;
+        const configs = this.configs;
 
-            viewArray.set(filtered);
-        };
+        for(const key in data) {
+            const targetItem = this.$observables[key];
+            const newValueOrigin = newData[key];
+            const newValue = data[key];
 
-        observableDependencies.forEach(dep => dep.subscribe(updateView));
+            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;
 
-        updateView();
+    ObservableObject.prototype.observables = function() {
+        return Object.values(this.$observables);
+    };
+    ObservableObject.prototype.$observables = ObservableObject.prototype.observables;
 
-        return viewArray;
+    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());
 
-    /**
-     * 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]))
+        this.originalSubscribe(callback);
+
+        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)
     };
 
     /**
-     * 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);
+     * @param {any[]} data
+     * @return Proxy[]
      */
-    ObservableArray.prototype.whereEvery = function(fields, filter) {
-        return this.where({
-            _: {
-                dependencies: filter.dependencies,
-                callback: (item) => fields.every(field => filter.callback(item[field]))
+    Observable.arrayOfObject = function(data) {
+        return data.map(item => Observable.object(item));
+    };
+
+    /**
+     * 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;
     };
 
-    ObservableArray.prototype.deepSubscribe = function(callback) {
-        const updatedValue = nextTick(() => callback(this.val()));
-        const $listeners = new WeakMap();
+    Observable.object = Observable.init;
+    Observable.json = Observable.init;
 
-        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));
-            }
-        };
+    /**
+     * 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()));
 
-        const unbindItem = (item) => {
-            const unsub = $listeners.get(item);
-            if (unsub) {
-                unsub();
-                $listeners.delete(item);
+        if(Validator.isFunction(dependencies)) {
+            if(!Validator.isObservable(dependencies.$observer)) {
+                throw new NativeDocumentError('Observable.computed : dependencies must be valid batch function');
             }
-        };
-
-        this.$currentValue.forEach(bindItem);
-        this.subscribe(updatedValue);
+            dependencies.$observer.subscribe(updatedValue);
+            return observable;
+        }
 
-        this.subscribe((items, _, operations) => {
-            switch (operations?.action) {
-                case 'push':
-                case 'unshift':
-                    operations.args.forEach(bindItem);
-                    break;
+        dependencies.forEach(dependency => {
+            if(Validator.isProxy(dependency)) {
+                dependency.$observables.forEach((observable) => {
+                    observable.subscribe(updatedValue);
+                });
+                return;
+            }
+            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()));
+                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');
+
     /**
      * Creates a `<button>` element.
      * @type {function(ButtonAttributes=, NdChild|NdChild[]=): HTMLButtonElement}