native-document 1.0.117 → 1.0.119

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

@@ -363,16 +363,16 @@ var NativeComponents = (function (exports) {
         // });
     };
 
-    let DebugManager$1 = {};
+    let DebugManager$2 = {};
     {
-        DebugManager$1 = {
+        DebugManager$2 = {
             log() {},
             warn() {},
             error() {},
             disable() {}
         };
     }
-    var DebugManager = DebugManager$1;
+    var DebugManager$1 = DebugManager$2;
 
     /**
      *
@@ -846,17 +846,17 @@ var NativeComponents = (function (exports) {
             const method = methods[name];
 
             if (typeof method !== 'function') {
-                DebugManager.warn('NDElement.extend', `"${name}" is not a function, skipping`);
+                DebugManager$1.warn('NDElement.extend', `"${name}" is not a function, skipping`);
                 continue;
             }
 
             if (protectedMethods.has(name)) {
-                DebugManager.error('NDElement.extend', `Cannot override protected method "${name}"`);
+                DebugManager$1.error('NDElement.extend', `Cannot override protected method "${name}"`);
                 throw new NativeDocumentError(`Cannot override protected method "${name}"`);
             }
 
             if (NDElement.prototype[name]) {
-                DebugManager.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
+                DebugManager$1.warn('NDElement.extend', `Overwriting existing prototype method "${name}"`);
             }
 
             NDElement.prototype[name] = method;
@@ -1081,7 +1081,7 @@ var NativeComponents = (function (exports) {
                     }
                 }
                 if (cleanedCount > 0) {
-                    DebugManager.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
+                    DebugManager$1.log('Memory Auto Clean', `🧹 Cleaned ${cleanedCount} orphaned observables`);
                 }
             }
         };
@@ -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,1087 +1368,596 @@ 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;
-            },
+    /**
+     *
+     * @param {Function} callback
+     * @returns {(function(): void)}
+     */
+    ObservableItem.prototype.subscribe = function(callback) {
+        this.$listeners = this.$listeners ?? [];
 
-            /**
-             * 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));
+        this.$listeners.push(callback);
+        this.assocTrigger();
+    };
 
-                const originalReset = observer.reset.bind(observer);
-                observer.reset = () => {
-                    LocalStorage.remove(localstorage_key);
-                    originalReset();
-                };
+    /**
+     * Watches for a specific value and executes callback when the observable equals that value.
+     * Creates a watcher that only triggers when the observable changes to the specified value.
+     *
+     * @param {*} value - The value to watch for
+     * @param {(value) => void|ObservableItem} callback - Callback function or observable to set when value matches
+     * @example
+     * const status = Observable('idle');
+     * status.on('loading', () => console.log('Started loading'));
+     * status.on('error', isError); // Set another observable
+     */
+    ObservableItem.prototype.on = function(value, callback) {
+        this.$watchers = this.$watchers ?? new Map();
 
-                return observer;
-            }
-        };
+        let watchValueList = this.$watchers.get(value);
 
+        if(callback.__$isObservable) {
+            callback = callback.set.bind(callback);
+        }
 
-        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;
+        if(!watchValueList) {
+            watchValueList = callback;
+            this.$watchers.set(value, callback);
+        } else if(!Validator.isArray(watchValueList.list)) {
+            watchValueList = [watchValueList, callback];
+            callback = (value) => {
+                for(let i = 0, length = watchValueList.length; i < length; i++) {
+                    watchValueList[i](value);
                 }
-                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.`);
-            }
-        });
+            };
+            callback.list = watchValueList;
+            this.$watchers.set(value, callback);
+        } else {
+            watchValueList.list.push(callback);
+        }
+
+        this.assocTrigger();
     };
 
-    const Store = StoreFactory();
+    /**
+     * Removes a watcher for a specific value. If no callback is provided, removes all watchers for that value.
+     *
+     * @param {*} value - The value to stop watching
+     * @param {Function} [callback] - Specific callback to remove. If omitted, removes all watchers for this value
+     * @example
+     * const status = Observable('idle');
+     * const handler = () => console.log('Loading');
+     * status.on('loading', handler);
+     * status.off('loading', handler); // Remove specific handler
+     * status.off('loading'); // Remove all handlers for 'loading'
+     */
+    ObservableItem.prototype.off = function(value, callback) {
+        if(!this.$watchers) return;
 
-    Store.create('locale', navigator.language.split('-')[0] || 'en');
+        const watchValueList = this.$watchers.get(value);
+        if(!watchValueList) return;
 
-    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;
-            }, {})
+        if(!callback || !Array.isArray(watchValueList.list)) {
+            this.$watchers?.delete(value);
+            this.assocTrigger();
+            return;
+        }
+        const index = watchValueList.indexOf(callback);
+        watchValueList?.splice(index, 1);
+        if(watchValueList.length === 1) {
+            this.$watchers.set(value, watchValueList[0]);
+        }
+        else if(watchValueList.length === 0) {
+            this.$watchers?.delete(value);
+        }
+        this.assocTrigger();
+    };
+
+    /**
+     * Subscribes to the observable but automatically unsubscribes after the first time the predicate matches.
+     *
+     * @param {(value) => Boolean|any} predicate - Value to match or function that returns true when condition is met
+     * @param {(value) => void} callback - Callback to execute when predicate matches, receives the matched value
+     * @example
+     * const status = Observable('loading');
+     * status.once('ready', (val) => console.log('Ready!'));
+     * status.once(val => val === 'error', (val) => console.log('Error occurred'));
+     */
+    ObservableItem.prototype.once = function(predicate, callback) {
+        const fn = typeof predicate === 'function' ? predicate : (v) => v === predicate;
+
+        const handler = (val) => {
+            if (fn(val)) {
+                this.unsubscribe(handler);
+                callback(val);
+            }
         };
+        this.subscribe(handler);
     };
 
-    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);
+    /**
+     * Unsubscribe from an observable.
+     * @param {Function} callback
+     */
+    ObservableItem.prototype.unsubscribe = function(callback) {
+        if(!this.$listeners) return;
+        const index = this.$listeners.indexOf(callback);
+        if (index > -1) {
+            this.$listeners.splice(index, 1);
+        }
+        this.assocTrigger();
     };
 
-    const Formatters = {
-        currency: (value, locale, { currency = 'XOF', notation, minimumFractionDigits, maximumFractionDigits } = {}) =>
-            new Intl.NumberFormat(locale, {
-                style: 'currency',
-                currency,
-                notation,
-                minimumFractionDigits,
-                maximumFractionDigits
-            }).format(value),
+    /**
+     * Create an Observable checker instance
+     * @param callback
+     * @returns {ObservableChecker}
+     */
+    ObservableItem.prototype.check = function(callback) {
+        return new ObservableChecker(this, callback)
+    };
 
-        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}`;
-        },
-    };
+    ObservableItem.prototype.transform = ObservableItem.prototype.check;
+    ObservableItem.prototype.pluck = ObservableItem.prototype.check;
+    ObservableItem.prototype.is = ObservableItem.prototype.check;
+    ObservableItem.prototype.select = ObservableItem.prototype.check;
 
     /**
+     * Gets a property value from the observable's current value.
+     * If the property is an observable, returns its value.
      *
-     * @param {*} value
-     * @param {{ propagation: boolean, reset: boolean} | null} configs
-     * @class ObservableItem
+     * @param {string|number} key - Property key to retrieve
+     * @returns {*} The value of the property, unwrapped if it's an observable
+     * @example
+     * const user = Observable({ name: 'John', age: Observable(25) });
+     * user.get('name'); // 'John'
+     * user.get('age'); // 25 (unwrapped from observable)
      */
-    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() {};
+    ObservableItem.prototype.get = function(key) {
+        const item = this.$currentValue[key];
+        return Validator.isObservable(item) ? item.val() : item;
+    };
 
     /**
-     * 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.
+     * Creates an ObservableWhen that represents whether the observable equals a specific value.
+     * Returns an object that can be subscribed to and will emit true/false.
      *
-     * @param {(value) => any} callback - Interceptor function that receives (newValue, currentValue) and returns the transformed value or undefined
-     * @returns {ObservableItem} The observable instance for chaining
+     * @param {*} value - The value to compare against
+     * @returns {ObservableWhen} An ObservableWhen instance that tracks when the observable equals the value
      * @example
-     * const count = Observable(0);
-     * count.intercept((newVal, oldVal) => Math.max(0, newVal)); // Prevent negative values
+     * const status = Observable('idle');
+     * const isLoading = status.when('loading');
+     * isLoading.subscribe(active => console.log('Loading:', active));
+     * status.set('loading'); // Logs: "Loading: true"
      */
-    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.when = function(value) {
+        return new ObservableWhen(this, value);
     };
 
-    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);
+    /**
+     * Compares the observable's current value with another value or observable.
+     *
+     * @param {*|ObservableItem} other - Value or observable to compare against
+     * @returns {boolean} True if values are equal
+     * @example
+     * const a = Observable(5);
+     * const b = Observable(5);
+     * a.equals(5);  // true
+     * a.equals(b);  // true
+     * a.equals(10); // false
+     */
+    ObservableItem.prototype.equals = function(other) {
+        if(Validator.isObservable(other)) {
+            return this.$currentValue === other.$currentValue;
         }
+        return this.$currentValue === other;
     };
 
-    ObservableItem.prototype.triggerAll = function(operations) {
-        this.triggerWatchers(operations);
-        this.triggerListeners(operations);
-    };
-
-    ObservableItem.prototype.triggerWatchersAndFirstListener = function(operations) {
-        this.triggerWatchers(operations);
-        this.triggerFirstListener(operations);
+    /**
+     * Converts the observable's current value to a boolean.
+     *
+     * @returns {boolean} The boolean representation of the current value
+     * @example
+     * const count = Observable(0);
+     * count.toBool(); // false
+     * count.set(5);
+     * count.toBool(); // true
+     */
+    ObservableItem.prototype.toBool = function() {
+        return !!this.$currentValue;
     };
 
-    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;
+    /**
+     * Toggles the boolean value of the observable (false becomes true, true becomes false).
+     *
+     * @example
+     * const isOpen = Observable(false);
+     * isOpen.toggle(); // Now true
+     * isOpen.toggle(); // Now false
+     */
+    ObservableItem.prototype.toggle = function() {
+        this.set(!this.$currentValue);
     };
-    ObservableItem.prototype.trigger = noneTrigger;
 
-    ObservableItem.prototype.$updateWithNewValue = function(newValue) {
-        newValue = newValue?.__$isObservable ? newValue.val() : newValue;
-        if(this.$currentValue === newValue) {
+    /**
+     * Resets the observable to its initial value.
+     * Only works if the observable was created with { reset: true } config.
+     *
+     * @example
+     * const count = Observable(0, { reset: true });
+     * count.set(10);
+     * count.reset(); // Back to 0
+     */
+    ObservableItem.prototype.reset = function() {
+        if(!this.configs?.reset) {
             return;
         }
-        this.$previousValue = this.$currentValue;
-        this.$currentValue = newValue;
-        this.trigger();
-        this.$previousValue = null;
+        const resetValue = (Validator.isObject(this.$initialValue))
+            ? deepClone(this.$initialValue, (observable) => {
+                observable.reset();
+            })
+            : this.$initialValue;
+        this.set(resetValue);
     };
 
     /**
-     * @param {*} data
+     * Returns a string representation of the observable's current value.
+     *
+     * @returns {string} String representation of the current value
      */
-    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);
+    ObservableItem.prototype.toString = function() {
+        return String(this.$currentValue);
     };
 
     /**
-     * @param {*} data
+     * Returns the primitive value of the observable (its current value).
+     * Called automatically in type coercion contexts.
+     *
+     * @returns {*} The current value of the observable
      */
-    ObservableItem.prototype.$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() {
+    ObservableItem.prototype.valueOf = 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.
+     * Creates a derived observable that formats the current value using Intl.
+     * Automatically reacts to both value changes and locale changes (Store.__nd.locale).
+     *
+     * @param {string | Function} type - Format type or custom formatter function
+     * @param {Object} [options={}] - Options passed to the formatter
+     * @returns {ObservableItem<string>}
      *
-     * @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!"
+     * // Currency
+     * price.format('currency')                                      // "15 000 FCFA"
+     * price.format('currency', { currency: 'EUR' })                 // "15 000,00 €"
+     * price.format('currency', { notation: 'compact' })             // "15 K FCFA"
+     *
+     * // Number
+     * count.format('number')                                        // "15 000"
+     *
+     * // Percent
+     * rate.format('percent')                                        // "15,0 %"
+     * rate.format('percent', { decimals: 2 })                       // "15,00 %"
+     *
+     * // Date
+     * date.format('date')                                           // "3 mars 2026"
+     * date.format('date', { dateStyle: 'full' })                    // "mardi 3 mars 2026"
+     * date.format('date', { format: 'DD/MM/YYYY' })                 // "03/03/2026"
+     * date.format('date', { format: 'DD MMM YYYY' })                // "03 mar 2026"
+     * date.format('date', { format: 'DD MMMM YYYY' })               // "03 mars 2026"
+     *
+     * // Time
+     * date.format('time')                                           // "20:30"
+     * date.format('time', { second: '2-digit' })                    // "20:30:00"
+     * date.format('time', { format: 'HH:mm:ss' })                   // "20:30:00"
+     *
+     * // Datetime
+     * date.format('datetime')                                       // "3 mars 2026, 20:30"
+     * date.format('datetime', { dateStyle: 'full' })                // "mardi 3 mars 2026, 20:30"
+     * date.format('datetime', { format: 'DD/MM/YYYY HH:mm' })       // "03/03/2026 20:30"
+     *
+     * // Relative
+     * date.format('relative')                                       // "dans 11 jours"
+     * date.format('relative', { unit: 'month' })                    // "dans 1 mois"
+     *
+     * // Plural
+     * count.format('plural', { singular: 'billet', plural: 'billets' }) // "3 billets"
+     *
+     * // Custom formatter
+     * price.format(value => `${value.toLocaleString()} FCFA`)
+     *
+     * // Reacts to locale changes automatically
+     * Store.setLocale('en-US');
      */
-    ObservableItem.prototype.onCleanup = function(callback) {
-        this.$cleanupListeners = this.$cleanupListeners ?? [];
-        this.$cleanupListeners.push(callback);
+    ObservableItem.prototype.format = function(type, options = {}) {
+        const self = this;
+
+        if (typeof type === 'function') {
+            return new ObservableChecker(self, type);
+        }
+
+        const formatter = Formatters[type];
+        const localeObservable = Formatters.locale;
+
+        return Observable.computed(() => formatter(self.val(), localeObservable.val(), options),
+            [self, localeObservable]
+        );
     };
 
-    ObservableItem.prototype.cleanup = function() {
-        if (this.$cleanupListeners) {
-            for (let i = 0; i < this.$cleanupListeners.length; i++) {
-                this.$cleanupListeners[i]();
-            }
-            this.$cleanupListeners = null;
+    ObservableItem.prototype.persist = function(key, options = {}) {
+        let value = $getFromStorage(key, this.$currentValue);
+        if(options.get) {
+            value = options.get(value);
         }
-        MemoryManager.unregister(this.$memoryId);
-        this.disconnectAll();
-        delete this.$value;
+        this.set(value);
+        const saver = $saveToStorage(this.$currentValue);
+        this.subscribe((newValue) => {
+            saver(key, options.set ? options.set(newValue) : newValue);
+        });
+        return this;
     };
 
     /**
      *
-     * @param {Function} callback
-     * @returns {(function(): void)}
+     * @param {*} value
+     * @param {{ propagation: boolean, reset: boolean} | null} configs
+     * @returns {ObservableItem}
+     * @constructor
      */
-    ObservableItem.prototype.subscribe = function(callback) {
-        this.$listeners = this.$listeners ?? [];
+    function Observable(value, configs = null) {
+        return new ObservableItem(value, configs);
+    }
 
-        this.$listeners.push(callback);
-        this.assocTrigger();
-    };
+    const $$1 = Observable;
 
     /**
-     * Watches for a specific value and executes callback when the observable equals that value.
-     * Creates a watcher that only triggers when the observable changes to the specified value.
      *
-     * @param {*} value - The value to watch for
-     * @param {(value) => void|ObservableItem} callback - Callback function or observable to set when value matches
-     * @example
-     * const status = Observable('idle');
-     * status.on('loading', () => console.log('Started loading'));
-     * status.on('error', isError); // Set another observable
+     * @param {string} propertyName
      */
-    ObservableItem.prototype.on = function(value, callback) {
-        this.$watchers = this.$watchers ?? new Map();
-
-        let watchValueList = this.$watchers.get(value);
-
-        if(callback.__$isObservable) {
-            callback = callback.set.bind(callback);
-        }
-
-        if(!watchValueList) {
-            watchValueList = callback;
-            this.$watchers.set(value, callback);
-        } else if(!Validator.isArray(watchValueList.list)) {
-            watchValueList = [watchValueList, callback];
-            callback = (value) => {
-                for(let i = 0, length = watchValueList.length; i < length; i++) {
-                    watchValueList[i](value);
-                }
-            };
-            callback.list = watchValueList;
-            this.$watchers.set(value, callback);
-        } else {
-            watchValueList.list.push(callback);
-        }
-
-        this.assocTrigger();
+    Observable.useValueProperty = function(propertyName = 'value') {
+        Object.defineProperty(ObservableItem.prototype, propertyName, {
+            get() {
+                return this.$currentValue;
+            },
+            set(value) {
+                this.set(value);
+            },
+            configurable: true,
+        });
     };
 
+
     /**
-     * Removes a watcher for a specific value. If no callback is provided, removes all watchers for that value.
      *
-     * @param {*} value - The value to stop watching
-     * @param {Function} [callback] - Specific callback to remove. If omitted, removes all watchers for this value
-     * @example
-     * const status = Observable('idle');
-     * const handler = () => console.log('Loading');
-     * status.on('loading', handler);
-     * status.off('loading', handler); // Remove specific handler
-     * status.off('loading'); // Remove all handlers for 'loading'
+     * @param id
+     * @returns {ObservableItem|null}
      */
-    ObservableItem.prototype.off = function(value, callback) {
-        if(!this.$watchers) return;
-
-        const watchValueList = this.$watchers.get(value);
-        if(!watchValueList) return;
-
-        if(!callback || !Array.isArray(watchValueList.list)) {
-            this.$watchers?.delete(value);
-            this.assocTrigger();
-            return;
-        }
-        const index = watchValueList.indexOf(callback);
-        watchValueList?.splice(index, 1);
-        if(watchValueList.length === 1) {
-            this.$watchers.set(value, watchValueList[0]);
-        }
-        else if(watchValueList.length === 0) {
-            this.$watchers?.delete(value);
+    Observable.getById = function(id) {
+        const item = MemoryManager.getObservableById(parseInt(id));
+        if(!item) {
+            throw new NativeDocumentError('Observable.getById : No observable found with id ' + id);
         }
-        this.assocTrigger();
+        return item;
     };
 
     /**
-     * Subscribes to the observable but automatically unsubscribes after the first time the predicate matches.
      *
-     * @param {(value) => Boolean|any} predicate - Value to match or function that returns true when condition is met
-     * @param {(value) => void} callback - Callback to execute when predicate matches, receives the matched value
-     * @example
-     * const status = Observable('loading');
-     * status.once('ready', (val) => console.log('Ready!'));
-     * status.once(val => val === 'error', (val) => console.log('Error occurred'));
+     * @param {ObservableItem} observable
      */
-    ObservableItem.prototype.once = function(predicate, callback) {
-        const fn = typeof predicate === 'function' ? predicate : (v) => v === predicate;
-
-        const handler = (val) => {
-            if (fn(val)) {
-                this.unsubscribe(handler);
-                callback(val);
-            }
-        };
-        this.subscribe(handler);
+    Observable.cleanup = function(observable) {
+        observable.cleanup();
     };
 
     /**
-     * Unsubscribe from an observable.
-     * @param {Function} callback
+     * Enable auto cleanup of observables.
+     * @param {Boolean} enable
+     * @param {{interval:Boolean, threshold:number}} options
      */
-    ObservableItem.prototype.unsubscribe = function(callback) {
-        if(!this.$listeners) return;
-        const index = this.$listeners.indexOf(callback);
-        if (index > -1) {
-            this.$listeners.splice(index, 1);
+    Observable.autoCleanup = function(enable = false, options = {}) {
+        if(!enable) {
+            return;
         }
-        this.assocTrigger();
-    };
-
-    /**
-     * Create an Observable checker instance
-     * @param callback
-     * @returns {ObservableChecker}
-     */
-    ObservableItem.prototype.check = function(callback) {
-        return new ObservableChecker(this, callback)
-    };
+        const { interval = 60000, threshold = 100 } = options;
 
-    ObservableItem.prototype.transform = ObservableItem.prototype.check;
-    ObservableItem.prototype.pluck = ObservableItem.prototype.check;
-    ObservableItem.prototype.is = ObservableItem.prototype.check;
-    ObservableItem.prototype.select = ObservableItem.prototype.check;
+        window.addEventListener('beforeunload', () => {
+            MemoryManager.cleanup();
+        });
 
-    /**
-     * Gets a property value from the observable's current value.
-     * If the property is an observable, returns its value.
-     *
-     * @param {string|number} key - Property key to retrieve
-     * @returns {*} The value of the property, unwrapped if it's an observable
-     * @example
-     * const user = Observable({ name: 'John', age: Observable(25) });
-     * user.get('name'); // 'John'
-     * user.get('age'); // 25 (unwrapped from observable)
-     */
-    ObservableItem.prototype.get = function(key) {
-        const item = this.$currentValue[key];
-        return Validator.isObservable(item) ? item.val() : item;
-    };
-
-    /**
-     * Creates an ObservableWhen that represents whether the observable equals a specific value.
-     * Returns an object that can be subscribed to and will emit true/false.
-     *
-     * @param {*} value - The value to compare against
-     * @returns {ObservableWhen} An ObservableWhen instance that tracks when the observable equals the value
-     * @example
-     * const status = Observable('idle');
-     * const isLoading = status.when('loading');
-     * isLoading.subscribe(active => console.log('Loading:', active));
-     * status.set('loading'); // Logs: "Loading: true"
-     */
-    ObservableItem.prototype.when = function(value) {
-        return new ObservableWhen(this, value);
-    };
-
-    /**
-     * Compares the observable's current value with another value or observable.
-     *
-     * @param {*|ObservableItem} other - Value or observable to compare against
-     * @returns {boolean} True if values are equal
-     * @example
-     * const a = Observable(5);
-     * const b = Observable(5);
-     * a.equals(5);  // true
-     * a.equals(b);  // true
-     * a.equals(10); // false
-     */
-    ObservableItem.prototype.equals = function(other) {
-        if(Validator.isObservable(other)) {
-            return this.$currentValue === other.$currentValue;
-        }
-        return this.$currentValue === other;
-    };
-
-    /**
-     * Converts the observable's current value to a boolean.
-     *
-     * @returns {boolean} The boolean representation of the current value
-     * @example
-     * const count = Observable(0);
-     * count.toBool(); // false
-     * count.set(5);
-     * count.toBool(); // true
-     */
-    ObservableItem.prototype.toBool = function() {
-        return !!this.$currentValue;
-    };
-
-    /**
-     * Toggles the boolean value of the observable (false becomes true, true becomes false).
-     *
-     * @example
-     * const isOpen = Observable(false);
-     * isOpen.toggle(); // Now true
-     * isOpen.toggle(); // Now false
-     */
-    ObservableItem.prototype.toggle = function() {
-        this.set(!this.$currentValue);
-    };
-
-    /**
-     * Resets the observable to its initial value.
-     * Only works if the observable was created with { reset: true } config.
-     *
-     * @example
-     * const count = Observable(0, { reset: true });
-     * count.set(10);
-     * count.reset(); // Back to 0
-     */
-    ObservableItem.prototype.reset = function() {
-        if(!this.configs?.reset) {
-            return;
-        }
-        const resetValue = (Validator.isObject(this.$initialValue))
-            ? deepClone(this.$initialValue, (observable) => {
-                observable.reset();
-            })
-            : this.$initialValue;
-        this.set(resetValue);
-    };
-
-    /**
-     * Returns a string representation of the observable's current value.
-     *
-     * @returns {string} String representation of the current value
-     */
-    ObservableItem.prototype.toString = function() {
-        return String(this.$currentValue);
-    };
-
-    /**
-     * Returns the primitive value of the observable (its current value).
-     * Called automatically in type coercion contexts.
-     *
-     * @returns {*} The current value of the observable
-     */
-    ObservableItem.prototype.valueOf = function() {
-        return this.$currentValue;
-    };
-
-
-    /**
-     * Creates a derived observable that formats the current value using Intl.
-     * Automatically reacts to both value changes and locale changes (Store.__nd.locale).
-     *
-     * @param {string | Function} type - Format type or custom formatter function
-     * @param {Object} [options={}] - Options passed to the formatter
-     * @returns {ObservableItem<string>}
-     *
-     * @example
-     * // Currency
-     * price.format('currency')                                      // "15 000 FCFA"
-     * price.format('currency', { currency: 'EUR' })                 // "15 000,00 €"
-     * price.format('currency', { notation: 'compact' })             // "15 K FCFA"
-     *
-     * // Number
-     * count.format('number')                                        // "15 000"
-     *
-     * // Percent
-     * rate.format('percent')                                        // "15,0 %"
-     * rate.format('percent', { decimals: 2 })                       // "15,00 %"
-     *
-     * // Date
-     * date.format('date')                                           // "3 mars 2026"
-     * date.format('date', { dateStyle: 'full' })                    // "mardi 3 mars 2026"
-     * date.format('date', { format: 'DD/MM/YYYY' })                 // "03/03/2026"
-     * date.format('date', { format: 'DD MMM YYYY' })                // "03 mar 2026"
-     * date.format('date', { format: 'DD MMMM YYYY' })               // "03 mars 2026"
-     *
-     * // Time
-     * date.format('time')                                           // "20:30"
-     * date.format('time', { second: '2-digit' })                    // "20:30:00"
-     * date.format('time', { format: 'HH:mm:ss' })                   // "20:30:00"
-     *
-     * // Datetime
-     * date.format('datetime')                                       // "3 mars 2026, 20:30"
-     * date.format('datetime', { dateStyle: 'full' })                // "mardi 3 mars 2026, 20:30"
-     * date.format('datetime', { format: 'DD/MM/YYYY HH:mm' })       // "03/03/2026 20:30"
-     *
-     * // Relative
-     * date.format('relative')                                       // "dans 11 jours"
-     * date.format('relative', { unit: 'month' })                    // "dans 1 mois"
-     *
-     * // Plural
-     * count.format('plural', { singular: 'billet', plural: 'billets' }) // "3 billets"
-     *
-     * // Custom formatter
-     * price.format(value => `${value.toLocaleString()} FCFA`)
-     *
-     * // Reacts to locale changes automatically
-     * Store.setLocale('en-US');
-     */
-    ObservableItem.prototype.format = function(type, options = {}) {
-        const self = this;
-
-        if (typeof type === 'function') {
-            return new ObservableChecker(self, type);
-        }
-
-        const formatter = Formatters[type];
-        const localeObservable = Formatters.locale;
-
-        return Observable.computed(() => formatter(self.val(), localeObservable.val(), options),
-            [self, localeObservable]
-        );
-    };
-
-    ObservableItem.prototype.persist = function(key, options = {}) {
-        let value = $getFromStorage(key, this.$currentValue);
-        if(options.get) {
-            value = options.get(value);
-        }
-        this.set(value);
-        const saver = $saveToStorage(this.$currentValue);
-        this.subscribe((newValue) => {
-            saver(key, options.set ? options.set(newValue) : newValue);
-        });
-        return this;
-    };
-
-    /**
-     *
-     * @param {*} value
-     * @param {{ propagation: boolean, reset: boolean} | null} configs
-     * @returns {ObservableItem}
-     * @constructor
-     */
-    function Observable(value, configs = null) {
-        return new ObservableItem(value, configs);
-    }
-
-    const $$1 = Observable;
-
-    /**
-     *
-     * @param {string} propertyName
-     */
-    Observable.useValueProperty = function(propertyName = 'value') {
-        Object.defineProperty(ObservableItem.prototype, propertyName, {
-            get() {
-                return this.$currentValue;
-            },
-            set(value) {
-                this.set(value);
-            },
-            configurable: true,
-        });
-    };
-
-
-    /**
-     *
-     * @param id
-     * @returns {ObservableItem|null}
-     */
-    Observable.getById = function(id) {
-        const item = MemoryManager.getObservableById(parseInt(id));
-        if(!item) {
-            throw new NativeDocumentError('Observable.getById : No observable found with id ' + id);
-        }
-        return item;
-    };
-
-    /**
-     *
-     * @param {ObservableItem} observable
-     */
-    Observable.cleanup = function(observable) {
-        observable.cleanup();
-    };
-
-    /**
-     * Enable auto cleanup of observables.
-     * @param {Boolean} enable
-     * @param {{interval:Boolean, threshold:number}} options
-     */
-    Observable.autoCleanup = function(enable = false, options = {}) {
-        if(!enable) {
-            return;
-        }
-        const { interval = 60000, threshold = 100 } = options;
-
-        window.addEventListener('beforeunload', () => {
-            MemoryManager.cleanup();
-        });
-
-        setInterval(() => MemoryManager.cleanObservables(threshold), interval);
+        setInterval(() => MemoryManager.cleanObservables(threshold), interval);
     };
 
     /**
@@ -2384,7 +1984,6 @@ var NativeComponents = (function (exports) {
             }
             element.classes.toggle(className, value);
         }
-        data = null;
     };
 
     /**
@@ -2494,6 +2093,10 @@ var NativeComponents = (function (exports) {
         return ElementCreator.createStaticTextNode(null, this);
     };
 
+    Number.prototype.toNdElement = function () {
+        return ElementCreator.createStaticTextNode(null, this.toString());
+    };
+
     Element.prototype.toNdElement = function () {
         return this;
     };
@@ -2752,23 +2355,117 @@ var NativeComponents = (function (exports) {
         processStyleAttribute: bindStyleAttribute,
     };
 
-    function Anchor(name, isUniqueChild = false) {
-        const anchorFragment = document.createDocumentFragment();
-        anchorFragment.__Anchor__ = true;
+    function AnchorWithSentinel(name) {
+        const instance = Reflect.construct(DocumentFragment, [], AnchorWithSentinel);
+        const sentinel = document.createComment((name || '') + ' Anchor Sentinel');
+        const events = {};
 
-        const anchorStart = document.createComment('Anchor Start : '+name);
-        const anchorEnd = document.createComment('/ Anchor End '+name);
+        instance.appendChild(sentinel);
 
-        anchorFragment.appendChild(anchorStart);
-        anchorFragment.appendChild(anchorEnd);
+        const observer = new MutationObserver(() => {
+            if (sentinel.parentNode !== instance && !(sentinel.parentNode instanceof DocumentFragment)) {
+                events.connected && events.connected(sentinel.parentNode);
+            }
+        });
+
+        observer.observe(document, { childList: true, subtree: true });
+
+
+        instance.$sentinel = sentinel;
+        instance.$observer = observer;
+        instance.$events = events;
+
+        return instance;
+    }
+
+    AnchorWithSentinel.prototype = Object.create(DocumentFragment.prototype);
+    AnchorWithSentinel.prototype.constructor = AnchorWithSentinel;
+
+    AnchorWithSentinel.prototype.onConnected = function(callback) {
+        this.$events.connected = callback;
+        return this;
+    };
+
+    AnchorWithSentinel.prototype.onConnectedOnce = function(callback) {
+        this.$events.connected = (parent) => {
+            callback(parent);
+            this.$observer.disconnect();
+            this.$events.connectedOnce = null;
+        };
+    };
+
+    function oneChildAnchorOverwriting(anchor, parent) {
+
+        anchor.remove = () => {
+            anchor.append.apply(anchor, parent.childNodes);
+        };
+
+        anchor.appendChild = (child) => {
+            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            parent.appendChild(child);
+        };
+
+        anchor.appendElement = anchor.appendChild;
+
+        anchor.removeChildren = () => {
+            parent.replaceChildren();
+        };
+
+        anchor.replaceContent = function(content) {
+            const child = Validator.isElement(content) ? content : ElementCreator.getChild(content);
+            parent.replaceChildren(child);
+        };
+        anchor.setContent = anchor.replaceContent;
+
+        anchor.insertBefore = (child, anchor) => {
+            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            parent.insertBefore(child, anchor);
+        };
+        anchor.appendChildBefore = anchor.insertBefore;
+
+        anchor.clear = anchor.remove;
+        anchor.detach = anchor.remove;
+
+        anchor.replaceChildren = function() {
+            parent.replaceChildren(...arguments);
+        };
+
+        anchor.getByIndex = (index) => {
+            return parent.childNodes[index];
+        };
+    }
+
+    function Anchor(name, isUniqueChild = false) {
+        const anchorFragment = new AnchorWithSentinel(name);
+
+        /**
+         * State :
+         * 1. Not injected in the DOM
+         * 2. Injected in the DOM and should be the only child of parent
+         * 3. Injected in the DOM and the parent may have other children
+         */
+
+        anchorFragment.onConnectedOnce((parent) => {
+            if(isUniqueChild) {
+                console.log('Lets overwrite some functions with parent ', parent);
+                oneChildAnchorOverwriting(anchorFragment, parent);
+            }
+        });
+
+        anchorFragment.__Anchor__ = true;
+
+        const anchorStart = document.createComment('Anchor Start : '+name);
+        const anchorEnd = document.createComment('/ Anchor End '+name);
+
+        anchorFragment.appendChild(anchorStart);
+        anchorFragment.appendChild(anchorEnd);
 
         anchorFragment.nativeInsertBefore = anchorFragment.insertBefore;
         anchorFragment.nativeAppendChild = anchorFragment.appendChild;
         anchorFragment.nativeAppend = anchorFragment.append;
 
         const isParentUniqueChild = isUniqueChild
-            ? () => true
-            : (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd);
+            ? () => true: (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd);
 
         const insertBefore = function(parent, child, target) {
             const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
@@ -2783,14 +2480,13 @@ var NativeComponents = (function (exports) {
             parent.insertBefore(childElement, target);
         };
 
-        anchorFragment.appendElement = function(child, before = null) {
+        anchorFragment.appendElement = function(child) {
             const parentNode = anchorStart.parentNode;
-            const targetBefore = before || anchorEnd;
             if(parentNode === anchorFragment) {
-                parentNode.nativeInsertBefore(child, targetBefore);
+                parentNode.nativeInsertBefore(child, anchorEnd);
                 return;
             }
-            parentNode?.insertBefore(child, targetBefore);
+            parentNode.insertBefore(child, anchorEnd);
         };
 
         anchorFragment.appendChild = function(child, before = null) {
@@ -2803,8 +2499,8 @@ var NativeComponents = (function (exports) {
             insertBefore(parent, child, before);
         };
 
-        anchorFragment.append = function(...args ) {
-            return anchorFragment.appendChild(args);
+        anchorFragment.append = function() {
+            return anchorFragment.appendChild(Array.from(arguments));
         };
 
         anchorFragment.removeChildren = function() {
@@ -2831,6 +2527,7 @@ var NativeComponents = (function (exports) {
                 return;
             }
             if(isParentUniqueChild(parent)) {
+                anchorFragment.append.apply(anchorFragment, parent.childNodes);
                 parent.replaceChildren(anchorStart, anchorEnd);
                 return;
             }
@@ -2875,9 +2572,11 @@ var NativeComponents = (function (exports) {
         anchorFragment.startElement = function() {
             return anchorStart;
         };
+
         anchorFragment.restore = function() {
             anchorFragment.appendChild(anchorFragment);
         };
+
         anchorFragment.clear = anchorFragment.remove;
         anchorFragment.detach = anchorFragment.remove;
 
@@ -3205,9 +2904,10 @@ var NativeComponents = (function (exports) {
      * @returns {Text}
      */
     const createTextNode = (value) => {
-        return (Validator.isObservable(value))
-            ? ElementCreator.createObservableNode(null, value)
-            : ElementCreator.createStaticTextNode(null, value);
+        if(value) {
+            return value.toNdElement();
+        }
+        return ElementCreator.createTextNode();
     };
 
 
@@ -3298,29 +2998,72 @@ var NativeComponents = (function (exports) {
         }
         const steps = [];
         if(this.$ndMethods) {
-            steps.push((clonedNode, data) => {
-                for(const methodName in this.$ndMethods) {
-                    clonedNode.nd[methodName](this.$ndMethods[methodName].bind(clonedNode, ...data));
-                }
-            });
+            const methods = Object.keys(this.$ndMethods);
+            if(methods.length === 1) {
+                const methodName = methods[0];
+                const callback = this.$ndMethods[methodName];
+                steps.push((clonedNode, data) => {
+                    clonedNode.nd[methodName](callback.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;
@@ -4135,6 +3878,406 @@ var NativeComponents = (function (exports) {
         return observable;
     };
 
+    const StoreFactory = function() {
+
+        const $stores = new Map();
+        const $followersCache = new Map();
+
+        /**
+         * Internal helper — retrieves a store entry or throws if not found.
+         */
+        const $getStoreOrThrow = (method, name) => {
+            const item = $stores.get(name);
+            if (!item) {
+                DebugManager$1.error('Store', `Store.${method}('${name}') : store not found. Did you call Store.create('${name}') first?`);
+                throw new NativeDocumentError(
+                    `Store.${method}('${name}') : store not found.`
+                );
+            }
+            return item;
+        };
+
+        /**
+         * Internal helper — blocks write operations on a read-only observer.
+         */
+        const $applyReadOnly = (observer, name, context) => {
+            const readOnlyError = (method) => () => {
+                DebugManager$1.error('Store', `Store.${context}('${name}') is read-only. '${method}()' is not allowed.`);
+                throw new NativeDocumentError(
+                    `Store.${context}('${name}') is read-only.`
+                );
+            };
+            observer.set    = readOnlyError('set');
+            observer.toggle = readOnlyError('toggle');
+            observer.reset  = readOnlyError('reset');
+        };
+
+        const $createObservable = (value, options = {}) => {
+            if(Array.isArray(value)) {
+                return Observable.array(value, options);
+            }
+            if(typeof value === 'object') {
+                return Observable.object(value, options);
+            }
+            return Observable(value, options);
+        };
+
+        const $api = {
+            /**
+             * Create a new state and return the observer.
+             * Throws if a store with the same name already exists.
+             *
+             * @param {string} name
+             * @param {*} value
+             * @returns {ObservableItem}
+             */
+            create(name, value) {
+                if ($stores.has(name)) {
+                    DebugManager$1.warn('Store', `Store.create('${name}') : a store with this name already exists. Use Store.get('${name}') to retrieve it.`);
+                    throw new NativeDocumentError(
+                        `Store.create('${name}') : a store with this name already exists.`
+                    );
+                }
+                const observer = $createObservable(value);
+                $stores.set(name, { observer, subscribers: new Set(), resettable: false, composed: false });
+                return observer;
+            },
+
+            /**
+             * Create a new resettable state and return the observer.
+             * The store can be reset to its initial value via Store.reset(name).
+             * Throws if a store with the same name already exists.
+             *
+             * @param {string} name
+             * @param {*} value
+             * @returns {ObservableItem}
+             */
+            createResettable(name, value) {
+                if ($stores.has(name)) {
+                    DebugManager$1.warn('Store', `Store.createResettable('${name}') : a store with this name already exists.`);
+                    throw new NativeDocumentError(
+                        `Store.createResettable('${name}') : a store with this name already exists.`
+                    );
+                }
+                const observer = $createObservable(value, { reset: true });
+                $stores.set(name, { observer, subscribers: new Set(), resettable: true, composed: false });
+                return observer;
+            },
+
+            /**
+             * Create a computed store derived from other stores.
+             * The value is automatically recalculated when any dependency changes.
+             * This store is read-only — Store.use() and Store.set() will throw.
+             * Throws if a store with the same name already exists.
+             *
+             * @param {string} name
+             * @param {() => *} computation - Function that returns the computed value
+             * @param {string[]} dependencies - Names of the stores to watch
+             * @returns {ObservableItem}
+             *
+             * @example
+             * Store.create('products', [{ id: 1, price: 10 }]);
+             * Store.create('cart', [{ productId: 1, quantity: 2 }]);
+             *
+             * Store.createComposed('total', () => {
+             *     const products = Store.get('products').val();
+             *     const cart     = Store.get('cart').val();
+             *     return cart.reduce((sum, item) => {
+             *         const product = products.find(p => p.id === item.productId);
+             *         return sum + (product.price * item.quantity);
+             *     }, 0);
+             * }, ['products', 'cart']);
+             */
+            createComposed(name, computation, dependencies) {
+                if ($stores.has(name)) {
+                    DebugManager$1.warn('Store', `Store.createComposed('${name}') : a store with this name already exists.`);
+                    throw new NativeDocumentError(
+                        `Store.createComposed('${name}') : a store with this name already exists.`
+                    );
+                }
+                if (typeof computation !== 'function') {
+                    throw new NativeDocumentError(
+                        `Store.createComposed('${name}') : computation must be a function.`
+                    );
+                }
+                if (!Array.isArray(dependencies) || dependencies.length === 0) {
+                    throw new NativeDocumentError(
+                        `Store.createComposed('${name}') : dependencies must be a non-empty array of store names.`
+                    );
+                }
+
+                // Resolve dependency observers
+                const depObservers = dependencies.map(depName => {
+                    if(typeof depName !== 'string') {
+                        return depName;
+                    }
+                    const depItem = $stores.get(depName);
+                    if (!depItem) {
+                        DebugManager$1.error('Store', `Store.createComposed('${name}') : dependency '${depName}' not found. Create it first.`);
+                        throw new NativeDocumentError(
+                            `Store.createComposed('${name}') : dependency store '${depName}' not found.`
+                        );
+                    }
+                    return depItem.observer;
+                });
+
+                // Create computed observable from dependency observers
+                const observer = Observable.computed(computation, depObservers);
+
+                $stores.set(name, { observer, subscribers: new Set(), resettable: false, composed: true });
+                return observer;
+            },
+
+            /**
+             * Returns true if a store with the given name exists.
+             *
+             * @param {string} name
+             * @returns {boolean}
+             */
+            has(name) {
+                return $stores.has(name);
+            },
+
+            /**
+             * Resets a resettable store to its initial value and notifies all subscribers.
+             * Throws if the store was not created with createResettable().
+             *
+             * @param {string} name
+             */
+            reset(name) {
+                const item = $getStoreOrThrow('reset', name);
+                if (item.composed) {
+                    DebugManager$1.error('Store', `Store.reset('${name}') : composed stores cannot be reset. Their value is derived from dependencies.`);
+                    throw new NativeDocumentError(
+                        `Store.reset('${name}') : composed stores cannot be reset.`
+                    );
+                }
+                if (!item.resettable) {
+                    DebugManager$1.error('Store', `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`);
+                    throw new NativeDocumentError(
+                        `Store.reset('${name}') : this store is not resettable. Use Store.createResettable('${name}', value) instead of Store.create().`
+                    );
+                }
+                item.observer.reset();
+            },
+
+            /**
+             * 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$1.error('Store', `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`);
+                    throw new NativeDocumentError(
+                        `Store.use('${name}') : composed stores are read-only. Use Store.follow('${name}') instead.`
+                    );
+                }
+
+                const { observer: originalObserver, subscribers } = item;
+                const observerFollower = $createObservable(originalObserver.val());
+
+                const onStoreChange    = value => observerFollower.set(value);
+                const onFollowerChange = value => originalObserver.set(value);
+
+                originalObserver.subscribe(onStoreChange);
+                observerFollower.subscribe(onFollowerChange);
+
+                observerFollower.destroy = () => {
+                    originalObserver.unsubscribe(onStoreChange);
+                    observerFollower.unsubscribe(onFollowerChange);
+                    subscribers.delete(observerFollower);
+                    observerFollower.cleanup();
+                };
+                observerFollower.dispose = observerFollower.destroy;
+
+                subscribers.add(observerFollower);
+                return observerFollower;
+            },
+
+            /**
+             * Returns a read-only follower of the store.
+             * The follower reflects store changes but cannot write back to the store.
+             * Any attempt to call .set(), .toggle() or .reset() will throw.
+             * Call follower.destroy() or follower.dispose() to unsubscribe.
+             *
+             * @param {string} name
+             * @returns {ObservableItem}
+             */
+            follow(name) {
+                const { observer: originalObserver, subscribers } = $getStoreOrThrow('follow', name);
+                const observerFollower = $createObservable(originalObserver.val());
+
+                const onStoreChange = value => observerFollower.set(value);
+                originalObserver.subscribe(onStoreChange);
+
+                $applyReadOnly(observerFollower, name, 'follow');
+
+                observerFollower.destroy = () => {
+                    originalObserver.unsubscribe(onStoreChange);
+                    subscribers.delete(observerFollower);
+                    observerFollower.cleanup();
+                };
+                observerFollower.dispose = observerFollower.destroy;
+
+                subscribers.add(observerFollower);
+                return observerFollower;
+            },
+
+            /**
+             * Returns the raw store observer directly (no follower, no cleanup contract).
+             * Use this for direct read access when you don't need to unsubscribe.
+             * WARNING : mutations on this observer impact all subscribers immediately.
+             *
+             * @param {string} name
+             * @returns {ObservableItem|null}
+             */
+            get(name) {
+                const item = $stores.get(name);
+                if (!item) {
+                    DebugManager$1.warn('Store', `Store.get('${name}') : store not found.`);
+                    return null;
+                }
+                return item.observer;
+            },
+
+            /**
+             * @param {string} name
+             * @returns {{ observer: ObservableItem, subscribers: Set } | null}
+             */
+            getWithSubscribers(name) {
+                return $stores.get(name) ?? null;
+            },
+
+            /**
+             * Destroys a store : cleans up the observer, destroys all followers, and removes the entry.
+             *
+             * @param {string} name
+             */
+            delete(name) {
+                const item = $stores.get(name);
+                if (!item) {
+                    DebugManager$1.warn('Store', `Store.delete('${name}') : store not found, nothing to delete.`);
+                    return;
+                }
+                item.subscribers.forEach(follower => follower.destroy());
+                item.subscribers.clear();
+                item.observer.cleanup();
+                $stores.delete(name);
+            },
+            /**
+             * Creates an isolated store group with its own state namespace.
+             * Each group is a fully independent StoreFactory instance —
+             * no key conflicts, no shared state with the parent store.
+             *
+             * @param {string | ((group: ReturnType<typeof StoreFactory>) => void)} name - Group name for debugging, or setup callback if no name is provided
+             * @param {((group: ReturnType<typeof StoreFactory>) => void)} [callback] - Setup function receiving the isolated store instance
+             * @returns {ReturnType<typeof StoreFactory>}
+             *
+             * @example
+             * // With name (recommended)
+             * const EventStore = Store.group('events', (group) => {
+             *     group.create('catalog', []);
+             *     group.create('filters', { category: null, date: null });
+             *     group.createResettable('selected', null);
+             *     group.createComposed('filtered', () => {
+             *         const catalog = EventStore.get('catalog').val();
+             *         const filters = EventStore.get('filters').val();
+             *         return catalog.filter(event => {
+             *             if (filters.category && event.category !== filters.category) return false;
+             *             return true;
+             *         });
+             *     }, ['catalog', 'filters']);
+             * });
+             *
+             * // Without name
+             * const CartStore = Store.group((group) => {
+             *     group.create('items', []);
+             * });
+             *
+             * // Usage
+             * EventStore.use('catalog'); // two-way follower
+             * EventStore.follow('filtered'); // read-only follower
+             * EventStore.get('filters'); // raw observable
+             *
+             * // Cross-group composed
+             * const OrderStore = Store.group('orders', (group) => {
+             *     group.createComposed('summary', () => {
+             *         const items = CartStore.get('items').val();
+             *         const events = EventStore.get('catalog').val();
+             *         return { items, events };
+             *     }, [CartStore.get('items'), EventStore.get('catalog')]);
+             * });
+             */
+            group(name, callback) {
+                if (typeof name === 'function') {
+                    callback = name;
+                    name = 'anonymous';
+                }
+                const store = StoreFactory();
+                callback && callback(store);
+                return store;
+            },
+            createPersistent(name, value, localstorage_key) {
+                localstorage_key = localstorage_key || name;
+                const observer = this.create(name, $getFromStorage(localstorage_key, value));
+                const saver = $saveToStorage(value);
+
+                observer.subscribe((val) => saver(localstorage_key, val));
+                return observer;
+            },
+            createPersistentResettable(name, value, localstorage_key) {
+                localstorage_key = localstorage_key || name;
+                const observer = this.createResettable(name, $getFromStorage(localstorage_key, value));
+                const saver = $saveToStorage(value);
+                observer.subscribe((val) => saver(localstorage_key, val));
+
+                const originalReset = observer.reset.bind(observer);
+                observer.reset = () => {
+                    LocalStorage.remove(localstorage_key);
+                    originalReset();
+                };
+
+                return observer;
+            }
+        };
+
+
+        return new Proxy($api, {
+            get(target, prop) {
+                if (typeof prop === 'symbol' || prop.startsWith('$') || prop in target) {
+                    return target[prop];
+                }
+                if (target.has(prop)) {
+                    if ($followersCache.has(prop)) {
+                        return $followersCache.get(prop);
+                    }
+                    const follower = target.follow(prop);
+                    $followersCache.set(prop, follower);
+                    return follower;
+                }
+                return undefined;
+            },
+            set(target, prop, value) {
+                DebugManager$1.error('Store', `Forbidden: You cannot overwrite the store key '${String(prop)}'. Use .use('${String(prop)}').set(value) instead.`);
+                throw new NativeDocumentError(`Store structure is immutable. Use .set() on the observable.`);
+            },
+            deleteProperty(target, prop) {
+                throw new NativeDocumentError(`Store keys cannot be deleted.`);
+            }
+        });
+    };
+
+    const Store = StoreFactory();
+
+    Store.create('locale', navigator.language.split('-')[0] || 'en');
+
     /**
      * Creates a `<button>` element.
      * @type {function(ButtonAttributes=, NdChild|NdChild[]=): HTMLButtonElement}