native-document 1.0.153 → 1.0.154

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

@@ -34,7 +34,7 @@ var NativeComponents = (function (exports) {
     VALID_TYPES[COMMON_NODE_TYPES.DOCUMENT_FRAGMENT] = true;
     VALID_TYPES[COMMON_NODE_TYPES.COMMENT] = true;
 
-    const Validator = {
+    const Validator$1 = {
         isObservable(value) {
             return  value && (value.__$isObservable || value.__$Observable);
         },
@@ -51,7 +51,7 @@ var NativeComponents = (function (exports) {
             return value?.__isProxy__
         },
         isObservableOrProxy(value) {
-            return Validator.isObservable(value) || Validator.isProxy(value);
+            return Validator$1.isObservable(value) || Validator$1.isProxy(value);
         },
         isAnchor(value) {
             return value?.__Anchor__
@@ -134,8 +134,8 @@ var NativeComponents = (function (exports) {
             if(!data) {
                 return false;
             }
-            return Validator.isObject(data)
-                && Object.values(data).some(value => Validator.isObservable(value));
+            return Validator$1.isObject(data)
+                && Object.values(data).some(value => Validator$1.isObservable(value));
         },
         /**
          * Check if the data contains an observable reference.
@@ -158,7 +158,7 @@ var NativeComponents = (function (exports) {
     };
 
     const cssPropertyAccumulator = function(initialValue = {}) {
-        let data = Validator.isString(initialValue) ? initialValue.split(';').filter(Boolean) : initialValue;
+        let data = Validator$1.isString(initialValue) ? initialValue.split(';').filter(Boolean) : initialValue;
 
         return {
             add(key, value) {
@@ -166,7 +166,7 @@ var NativeComponents = (function (exports) {
                     data.push(key+':  '+value);
                     return;
                 }
-                if(Validator.isObject(key)) {
+                if(Validator$1.isObject(key)) {
                     value = key;
                     for(const property in value) {
                         data[property] = value[property];
@@ -185,11 +185,11 @@ var NativeComponents = (function (exports) {
     };
 
     const classPropertyAccumulator = function(initialValue = []) {
-        let data = Validator.isString(initialValue) ? initialValue.split(" ").filter(Boolean) : initialValue;
+        let data = Validator$1.isString(initialValue) ? initialValue.split(" ").filter(Boolean) : initialValue;
 
         return {
             add(key, value = true) {
-                if(Validator.isJson(key)) {
+                if(Validator$1.isJson(key)) {
                     for(const property in key) {
                         if(key[property]) {
                             data[property] = key[property];
@@ -312,6 +312,19 @@ var NativeComponents = (function (exports) {
         }
     };
 
+    const nextTick = function(fn) {
+        let pending = false;
+        return function(...args) {
+            if (pending) return;
+            pending = true;
+
+            Promise.resolve().then(() => {
+                fn.apply(this, args);
+                pending = false;
+            });
+        };
+    };
+
     const deepClone = (value, onObservableFound) => {
         try {
             if(window.structuredClone !== undefined) {
@@ -334,7 +347,7 @@ var NativeComponents = (function (exports) {
         }
 
         // Observables - keep the référence
-        if (Validator.isObservable(value)) {
+        if (Validator$1.isObservable(value)) {
             onObservableFound && onObservableFound(value);
             return value;
         }
@@ -412,7 +425,7 @@ var NativeComponents = (function (exports) {
      * @class ObservableItem
      */
     function ObservableItem(value, configs = null) {
-        value = Validator.isObservable(value) ? value.val() : value;
+        value = Validator$1.isObservable(value) ? value.val() : value;
 
         this.$previousValue = null;
         this.$currentValue = value;
@@ -426,7 +439,7 @@ var NativeComponents = (function (exports) {
         if(configs) {
             this.configs = configs;
             if(configs.reset) {
-                this.$initialValue = Validator.isObject(value) ? deepClone(value) : value;
+                this.$initialValue = Validator$1.isObject(value) ? deepClone(value) : value;
             }
         }
     }
@@ -443,6 +456,7 @@ var NativeComponents = (function (exports) {
 
     ObservableItem.prototype.__$Observable = true;
     ObservableItem.prototype.__$isObservable = true;
+    ObservableItem.computed = () => {};
     const noneTrigger = function() {};
 
     /**
@@ -643,7 +657,7 @@ var NativeComponents = (function (exports) {
         if(!watchValueList) {
             watchValueList = callback;
             this.$watchers.set(value, callback);
-        } else if(!Validator.isArray(watchValueList.list)) {
+        } else if(!Validator$1.isArray(watchValueList.list)) {
             watchValueList = [watchValueList, callback];
             callback = (value) => {
                 for(let i = 0, length = watchValueList.length; i < length; i++) {
@@ -715,151 +729,1277 @@ var NativeComponents = (function (exports) {
         this.subscribe(handler);
     };
 
-    /**
-     * Unsubscribe from an observable.
-     * @param {Function} callback
-     */
-    ObservableItem.prototype.unsubscribe = function(callback) {
-        if(!this.$listeners) return;
-        const index = this.$listeners.indexOf(callback);
-        if (index > -1) {
-            this.$listeners.splice(index, 1);
+    /**
+     * 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();
+    };
+
+
+
+
+    /**
+     * 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$1.isObservable(item) ? item.val() : item;
+    };
+
+
+    /**
+     * 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$1.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$1.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;
+    };
+
+
+
+    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;
+    };
+
+    ObservableItem.prototype.clone = function() {
+        let clonedValue = this.$currentValue;
+
+        if(clonedValue && typeof clonedValue === 'object') {
+            if(typeof clonedValue.clone === 'function') {
+                clonedValue = clonedValue.clone();
+            } else {
+                clonedValue = structuredClone(clonedValue);
+            }
+        }
+
+        return new ObservableItem(clonedValue);
+    };
+
+    function createMultiSourceFilter(sources, callbackFn){
+        const observables = sources.filter(Validator$1.isObservable);
+
+        const getValues = () => sources.map(src =>
+            Validator$1.isObservable(src) ? src.val() : src
+        );
+
+        return {
+            dependencies: observables.length > 0 ? observables : null,
+            callback: (value) => callbackFn(value, getValues())
+        };
+    }
+
+    function match(patternObservableOrValue, asRegexObservableOrValue = true, flagsObservableOrValue = ''){
+        return createMultiSourceFilter(
+            [patternObservableOrValue, asRegexObservableOrValue, flagsObservableOrValue],
+            (value, [pattern, asRegex, flags]) => {
+                if (!pattern) return true;
+
+                if (asRegex){
+                    try {
+                        const regex = new RegExp(pattern, flags);
+                        return regex.test(String(value));
+                    } catch (error){
+                        DebugManager$1.warn('Invalid regex pattern:', pattern, error);
+                        return false;
+                    }
+                }
+
+                if (!flags || flags === ''){
+                    return String(value).toLowerCase().includes(String(pattern).toLowerCase());
+                }
+                return String(value).includes(String(pattern));
+            }
+        );
+    }
+
+    const mutationMethods = ['push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice'];
+    const noMutationMethods = ['map', 'forEach', 'filter', 'reduce', 'some', 'every', 'find', 'findIndex', 'concat', 'includes', 'indexOf'];
+
+    /**
+     *
+     * @param target
+     * @param {{propagation: boolean, deep: boolean, reset: boolean}|null} configs
+     * @constructor
+     */
+    const ObservableArray = function (target, configs = null) {
+        if(!Array.isArray(target)) {
+            throw new NativeDocumentError('Observable.array : target must be an array');
+        }
+
+        ObservableItem.call(this, target, configs);
+    };
+
+    ObservableArray.prototype = Object.create(ObservableItem.prototype);
+    ObservableArray.prototype.constructor = ObservableArray;
+    ObservableArray.prototype.__$isObservableArray = true;
+
+
+    Object.defineProperty(ObservableArray.prototype, 'length', {
+        get() {
+            return this.$currentValue.length;
+        }
+    });
+
+
+    ObservableArray.prototype.$mutate = function(action, args, mutateFn) {
+        if(this.$mutationInterceptor) {
+            const value = this.$mutationInterceptor(args, { action });
+            if(args !== undefined) {
+                args = value;
+            }
+        }
+        mutateFn(args);
+    };
+
+    mutationMethods.forEach((method) => {
+        ObservableArray.prototype[method] = function(...values) {
+            return this.$mutate(method, values, (argsToUse) => {
+                const result = this.$currentValue[method].apply(this.$currentValue, argsToUse);
+                this.trigger({ action: method, args: argsToUse, result });
+                return result;
+            })
+        };
+    });
+
+    noMutationMethods.forEach((method) => {
+        ObservableArray.prototype[method] = function(...values) {
+            return this.$currentValue[method].apply(this.$currentValue, values);
+        };
+    });
+
+
+    const $clearEvent = { action: 'clear' };
+
+    /**
+     * Removes all items from the array and triggers an update.
+     *
+     * @returns {boolean} True if array was cleared, false if it was already empty
+     * @example
+     * const items = Observable.array([1, 2, 3]);
+     * items.clear(); // []
+     */
+    ObservableArray.prototype.clear = function() {
+        if(this.$currentValue.length === 0) {
+            return;
+        }
+        this.$mutate('clear', [], () => {
+            this.$currentValue.length = 0;
+            this.trigger($clearEvent);
+        });
+        return true;
+    };
+
+    /**
+     * Returns the element at the specified index in the array.
+     *
+     * @param {number} index - Zero-based index of the element to retrieve
+     * @returns {*} The element at the specified index
+     * @example
+     * const items = Observable.array(['a', 'b', 'c']);
+     * items.at(1); // 'b'
+     */
+    ObservableArray.prototype.at = function(index) {
+        return this.$currentValue[index];
+    };
+
+
+    /**
+     * Merges multiple values into the array and triggers an update.
+     * Similar to push but with a different operation name.
+     *
+     * @param {Array} values - Array of values to merge
+     * @example
+     * const items = Observable.array([1, 2]);
+     * items.merge([3, 4]); // [1, 2, 3, 4]
+     */
+    ObservableArray.prototype.merge = function(values) {
+        this.$mutate('merge', values, (valuesToMerge) => {
+            this.$currentValue.push.apply(this.$currentValue, valuesToMerge);
+            this.trigger({ action: 'merge',  args: valuesToMerge });
+        });
+    };
+
+    /**
+     * Counts the number of elements that satisfy the provided condition.
+     *
+     * @param {(value: *, index: number) => Boolean} condition - Function that tests each element (item, index) => boolean
+     * @returns {number} The count of elements that satisfy the condition
+     * @example
+     * const numbers = Observable.array([1, 2, 3, 4, 5]);
+     * numbers.count(n => n > 3); // 2
+     */
+    ObservableArray.prototype.count = function(condition) {
+        let count = 0;
+        this.$currentValue.forEach((item, index) => {
+            if(condition(item, index)) {
+                count++;
+            }
+        });
+        return count;
+    };
+
+    /**
+     * Swaps two elements at the specified indices and triggers an update.
+     *
+     * @param {number} indexA - Index of the first element
+     * @param {number} indexB - Index of the second element
+     * @returns {boolean} True if swap was successful, false if indices are out of bounds
+     * @example
+     * const items = Observable.array(['a', 'b', 'c']);
+     * items.swap(0, 2); // ['c', 'b', 'a']
+     */
+    ObservableArray.prototype.swap = function(indexA, indexB) {
+        this.$mutate('swap', [indexA, indexB], ([indexA, indexB]) => {
+            const value = this.$currentValue;
+            const length = value.length;
+            if(indexB < indexA) {
+                const temp = indexA;
+                indexA = indexB;
+                indexB = temp;
+            }
+            if(length < indexA || length < indexB) {
+                return false;
+            }
+            const elementA = value[indexA];
+            const elementB = value[indexB];
+
+            value[indexA] = elementB;
+            value[indexB] = elementA;
+            this.trigger({ action: 'swap', args: [indexA, indexB], result: [elementA, elementB] });
+        });
+        return true;
+    };
+
+    ObservableArray.prototype.swapItems = function(itemA, itemB) {
+        const indexA = this.$currentValue.indexOf(itemA);
+        const indexB = this.$currentValue.indexOf(itemB);
+
+        return this.swap(indexA, indexB);
+    };
+
+    ObservableArray.prototype.insertAfter = function(data, target) {
+        const targetIndex = this.$currentValue.indexOf(target);
+        return this.splice(targetIndex + 1, 0, data);
+    };
+
+    /**
+     * Removes the element at the specified index and triggers an update.
+     *
+     * @param {number} index - Index of the element to remove
+     * @returns {Array} Array containing the removed element, or empty array if index is invalid
+     * @example
+     * const items = Observable.array(['a', 'b', 'c']);
+     * items.remove(1); // ['b'] - Array is now ['a', 'c']
+     */
+    ObservableArray.prototype.remove = function(index) {
+        let deleted = [];
+        this.$mutate('remove', [index], ([idx]) => {
+            deleted = this.$currentValue.splice(idx, 1);
+            if(deleted.length === 0) {
+                return;
+            }
+            this.trigger({action: 'remove', args: [idx], result: deleted[0]});
+        });
+        return deleted;
+    };
+
+    /**
+     * Removes the first occurrence of the specified item from the array.
+     *
+     * @param {*} item - The item to remove
+     * @returns {Array} Array containing the removed element, or empty array if item not found
+     * @example
+     * const items = Observable.array(['a', 'b', 'c']);
+     * items.removeItem('b'); // ['b'] - Array is now ['a', 'c']
+     */
+    ObservableArray.prototype.removeItem = function(item) {
+        const indexOfItem = this.$currentValue.indexOf(item);
+        if(indexOfItem === -1) {
+            return [];
+        }
+        return this.remove(indexOfItem);
+    };
+
+    /**
+     * Checks if the array is empty.
+     *
+     * @returns {boolean} True if array has no elements
+     * @example
+     * const items = Observable.array([]);
+     * items.isEmpty(); // true
+     */
+    ObservableArray.prototype.empty = function() {
+        return this.$currentValue.length === 0;
+    };
+
+    /**
+     * Triggers a populate operation with the current array, iteration count, and callback.
+     * Used internally for rendering optimizations.
+     *
+     * @param {number} iteration - Iteration count for rendering
+     * @param {Function} callback - Callback function for rendering items
+     */
+    ObservableArray.prototype.populateAndRender = function(iteration, callback) {
+        this.trigger({ action: 'populate', args: [this.$currentValue, iteration, callback] });
+    };
+
+
+    /**
+     * Creates a filtered view of the array based on predicates.
+     * The filtered array updates automatically when source data or predicates change.
+     *
+     * @param {Object} predicates - Object mapping property names to filter conditions or functions
+     * @returns {ObservableArray} A new observable array containing filtered items
+     * @example
+     * const users = Observable.array([
+     *   { name: 'John', age: 25 },
+     *   { name: 'Jane', age: 30 }
+     * ]);
+     *
+     * const adults = users.where({ age: (val) => val >= 18 });
+     */
+    ObservableArray.prototype.where = function(predicates) {
+        if(typeof predicates === 'function') {
+            predicates = { _: predicates };
+        }
+        const sourceArray = this;
+        const observableDependencies = [sourceArray];
+        const filterCallbacks = {};
+
+        for (const [key, rawPredicate] of Object.entries(predicates)) {
+            const predicate = Validator$1.isObservable(rawPredicate) ? match(rawPredicate, false) : rawPredicate;
+            if (predicate && typeof predicate === 'object' && 'callback' in predicate) {
+                filterCallbacks[key] = predicate.callback;
+
+                if (predicate.dependencies) {
+                    const deps = Array.isArray(predicate.dependencies)
+                        ? predicate.dependencies
+                        : [predicate.dependencies];
+                    observableDependencies.push.apply(observableDependencies, deps);
+                }
+            } else if(typeof predicate === 'function') {
+                filterCallbacks[key] = predicate;
+            } else {
+                filterCallbacks[key] = (value) => value === predicate;
+            }
+        }
+
+        const viewArray = new ObservableArray([]);
+
+        const filters = Object.entries(filterCallbacks);
+        const updateView = () => {
+            const filtered = sourceArray.val().filter(item => {
+                for (const [key, callback] of filters) {
+                    if(key === '_') {
+                        if (!callback(item)) return false;
+                    } else {
+                        if (!callback(item[key])) return false;
+                    }
+                }
+                return true;
+            });
+
+            viewArray.set(filtered);
+        };
+
+        observableDependencies.forEach(dep => dep.subscribe(updateView));
+
+        updateView();
+
+        return viewArray;
+    };
+
+    /**
+     * Creates a filtered view where at least one of the specified fields matches the filter.
+     *
+     * @param {Array<string>} fields - Array of field names to check
+     * @param {FilterResult} filter - Filter condition with callback and dependencies
+     * @returns {ObservableArray} A new observable array containing filtered items
+     * @example
+     * const products = Observable.array([
+     *   { name: 'Apple', category: 'Fruit' },
+     *   { name: 'Carrot', category: 'Vegetable' }
+     * ]);
+     * const searchTerm = Observable('App');
+     * const filtered = products.whereSome(['name', 'category'], match(searchTerm));
+     */
+    ObservableArray.prototype.whereSome = function(fields, filter) {
+        return this.where({
+            _: {
+                dependencies: filter.dependencies,
+                callback: (item) => fields.some(field => filter.callback(item[field]))
+            }
+        });
+    };
+
+    /**
+     * Creates a filtered view where all specified fields match the filter.
+     *
+     * @param {Array<string>} fields - Array of field names to check
+     * @param {FilterResult} filter - Filter condition with callback and dependencies
+     * @returns {ObservableArray} A new observable array containing filtered items
+     * @example
+     * const items = Observable.array([
+     *   { status: 'active', verified: true },
+     *   { status: 'active', verified: false }
+     * ]);
+     * const activeFilter = equals('active');
+     * const filtered = items.whereEvery(['status', 'verified'], activeFilter);
+     */
+    ObservableArray.prototype.whereEvery = function(fields, filter) {
+        return this.where({
+            _: {
+                dependencies: filter.dependencies,
+                callback: (item) => fields.every(field => filter.callback(item[field]))
+            }
+        });
+    };
+
+    ObservableArray.prototype.deepSubscribe = function(callback) {
+        const updatedValue = nextTick(() => callback(this.val()));
+        const $listeners = new WeakMap();
+
+        const bindItem = (item) => {
+            if ($listeners.has(item)) {
+                return;
+            }
+            if (item?.__$isObservableArray) {
+                $listeners.set(item, item.deepSubscribe(updatedValue));
+                return;
+            }
+            if (item?.__$isObservable) {
+                item.subscribe(updatedValue);
+                $listeners.set(item, () => item.unsubscribe(updatedValue));
+            }
+        };
+
+        const unbindItem = (item) => {
+            const unsub = $listeners.get(item);
+            if (unsub) {
+                unsub();
+                $listeners.delete(item);
+            }
+        };
+
+        this.$currentValue.forEach(bindItem);
+        this.subscribe(updatedValue);
+
+        this.subscribe((items, _, operations) => {
+            switch (operations?.action) {
+                case 'push':
+                case 'unshift':
+                    operations.args.forEach(bindItem);
+                    break;
+
+                case 'splice': {
+                    const [start, deleteCount, ...newItems] = operations.args;
+                    operations.result?.forEach(unbindItem);
+                    newItems.forEach(bindItem);
+                    break;
+                }
+
+                case 'remove':
+                    unbindItem(operations.result);
+                    break;
+
+                case 'merge':
+                    operations.args.forEach(bindItem);
+                    break;
+
+                case 'clear':
+                    this.$currentValue.forEach(unbindItem);
+                    break;
+            }
+        });
+
+        return () => {
+            this.$currentValue.forEach(unbindItem);
+        };
+    };
+
+
+    ObservableArray.prototype.sync = function(targetObservable) {
+        if (!targetObservable || !targetObservable.__$isObservableArray) {
+            throw new NativeDocumentError('ObservableArray.sync : target must be an ObservableArray');
+        }
+
+        targetObservable.set([...this.$currentValue]);
+
+        const sync = (currentValue, _, operations) => {
+            if (!operations) {
+                targetObservable.set([...currentValue]);
+                return;
+            }
+
+            const { action, args } = operations;
+            targetObservable[action].apply(targetObservable, args);
+        };
+        this.subscribe(sync);
+
+        return () => this.unsubscribe(sync);
+    };
+
+    ObservableArray.prototype.clone = function() {
+        return new ObservableArray(this.resolve());
+    };
+
+    const ObservableObject = function(target, configs) {
+        ObservableItem.call(this, target);
+        this.$observables = {};
+        this.configs = configs;
+
+        this.$load(target);
+
+        for(const name in target) {
+            if(!Object.hasOwn(this, name)) {
+                Object.defineProperty(this, name, {
+                    get: () => this.$observables[name],
+                    set: (value) => this.$observables[name].set(value)
+                });
+            }
+        }
+
+    };
+
+    ObservableObject.prototype = Object.create(ObservableItem.prototype);
+
+    Object.defineProperty(ObservableObject, '$value', {
+        get() {
+            return this.val();
+        },
+        set(value) {
+            this.set(value);
+        }
+    });
+
+    ObservableObject.prototype.__$isObservableObject = true;
+    ObservableObject.prototype.__isProxy__ = true;
+
+    ObservableObject.prototype.$load = function(initialValue) {
+        const configs = this.configs;
+        for(const key in initialValue) {
+            const itemValue = initialValue[key];
+            if(Array.isArray(itemValue)) {
+                if(configs?.deep !== false) {
+                    const mappedItemValue = itemValue.map(item => {
+                        if(Validator$1.isJson(item)) {
+                            return new ObservableObject(item, configs);
+                        }
+                        if(Validator$1.isArray(item)) {
+                            return new ObservableArray(item, configs);
+                        }
+                        return new ObservableItem(item, configs);
+                    });
+                    this.$observables[key] = new ObservableArray(mappedItemValue, configs);
+                    continue;
+                }
+                this.$observables[key] = new ObservableArray(itemValue, configs);
+                continue;
+            }
+            if(Validator$1.isObservable(itemValue) || Validator$1.isProxy(itemValue)) {
+                this.$observables[key] = itemValue;
+                continue;
+            }
+            this.$observables[key] = (typeof itemValue === 'object') ? new ObservableObject(itemValue, configs) : new ObservableItem(itemValue, configs);
+        }
+    };
+
+    ObservableObject.prototype.val = function() {
+        const result = {};
+        for(const key in this.$observables) {
+            const dataItem = this.$observables[key];
+            if(Validator$1.isObservable(dataItem)) {
+                let value = dataItem.val();
+                if(Array.isArray(value)) {
+                    value = value.map(item => {
+                        if(Validator$1.isObservable(item)) {
+                            return item.val();
+                        }
+                        if(Validator$1.isProxy(item)) {
+                            return item.$value;
+                        }
+                        return item;
+                    });
+                }
+                result[key] = value;
+            } else if(Validator$1.isProxy(dataItem)) {
+                result[key] = dataItem.$value;
+            } else {
+                result[key] = dataItem;
+            }
+        }
+        return result;
+    };
+    ObservableObject.prototype.$val = ObservableObject.prototype.val;
+
+    ObservableObject.prototype.get = function(property) {
+        const item = this.$observables[property];
+        if(Validator$1.isObservable(item)) {
+            return item.val();
+        }
+        if(Validator$1.isProxy(item)) {
+            return item.$value;
+        }
+        return item;
+    };
+    ObservableObject.prototype.$get = ObservableObject.prototype.get;
+
+    ObservableObject.prototype.set = function(newData) {
+        const data = Validator$1.isProxy(newData) ? newData.$value : newData;
+        const configs = this.configs;
+
+        for(const key in data) {
+            const targetItem = this.$observables[key];
+            const newValueOrigin = newData[key];
+            const newValue = data[key];
+
+            if(Validator$1.isObservable(targetItem)) {
+                if(!Validator$1.isArray(newValue)) {
+                    targetItem.set(newValue);
+                    continue;
+                }
+                const firstElementFromOriginalValue = newValueOrigin.at(0);
+                if(Validator$1.isObservable(firstElementFromOriginalValue) || Validator$1.isProxy(firstElementFromOriginalValue)) {
+                    const newValues = newValue.map(item => {
+                        if(Validator$1.isProxy(firstElementFromOriginalValue)) {
+                            return new ObservableObject(item, configs);
+                        }
+                        return ObservableItem(item, configs);
+                    });
+                    targetItem.set(newValues);
+                    continue;
+                }
+                targetItem.set([...newValue]);
+                continue;
+            }
+            if(Validator$1.isProxy(targetItem)) {
+                targetItem.update(newValue);
+                continue;
+            }
+            this[key] = newValue;
+        }
+    };
+    ObservableObject.prototype.$set = ObservableObject.prototype.set;
+    ObservableObject.prototype.$updateWith = ObservableObject.prototype.set;
+
+    ObservableObject.prototype.observables = function() {
+        return Object.values(this.$observables);
+    };
+    ObservableObject.prototype.$observables = ObservableObject.prototype.observables;
+
+    ObservableObject.prototype.keys = function() {
+        return Object.keys(this.$observables);
+    };
+    ObservableObject.prototype.$keys = ObservableObject.prototype.keys;
+    ObservableObject.prototype.clone = function() {
+        return new ObservableObject(this.val(), this.configs);
+    };
+    ObservableObject.prototype.$clone = ObservableObject.prototype.clone;
+    ObservableObject.prototype.reset = function() {
+        for(const key in this.$observables) {
+            this.$observables[key].reset();
+        }
+    };
+    ObservableObject.prototype.originalSubscribe = ObservableObject.prototype.subscribe;
+    ObservableObject.prototype.subscribe = function(callback) {
+        const observables = this.observables();
+        const updatedValue = nextTick(() => this.trigger());
+
+        this.originalSubscribe(callback);
+
+        for (let i = 0, length = observables.length; i < length; i++) {
+            const observable = observables[i];
+            if (observable.__$isObservableArray) {
+                observable.deepSubscribe(updatedValue);
+                continue
+            }
+            observable.subscribe(updatedValue);
+        }
+    };
+    ObservableObject.prototype.configs = function() {
+        return this.configs;
+    };
+
+    ObservableObject.prototype.update = ObservableObject.prototype.set;
+
+    const $computed = (fn, dependencies) => ObservableItem.computed(fn, dependencies);
+    const $checker = (obs, fn) => obs.transform(fn);
+
+    //
+    // is... -> ObservableChecker<boolean>
+    //
+
+    ObservableItem.prototype.isEqualTo = function (value) {
+        if (value?.__$Observable) {
+            return $computed((a, b) => a === b, [this, value]);
+        }
+        return $checker(this, x => x === value);
+    };
+
+    ObservableItem.prototype.isNotEqualTo = function (value) {
+        if (value?.__$Observable) {
+            return $computed((a, b) => a !== b, [this, value]);
+        }
+        return $checker(this, x => x !== value);
+    };
+
+    ObservableItem.prototype.isGreaterThan = function (value) {
+        if (value?.__$Observable) {
+            return $computed((a, b) => a > b, [this, value]);
+        }
+        return $checker(this, x => x > value);
+    };
+
+    ObservableItem.prototype.isGreaterThanOrEqualTo = function (value) {
+        if (value?.__$Observable) {
+            return $computed((a, b) => a >= b, [this, value]);
+        }
+        return $checker(this, x => x >= value);
+    };
+
+    ObservableItem.prototype.isLessThan = function (value) {
+        if (value?.__$Observable) {
+            return $computed((a, b) => a < b, [this, value]);
+        }
+        return $checker(this, x => x < value);
+    };
+
+    ObservableItem.prototype.isLessThanOrEqualTo = function (value) {
+        if (value?.__$Observable) {
+            return $computed((a, b) => a <= b, [this, value]);
+        }
+        return $checker(this, x => x <= value);
+    };
+
+    ObservableItem.prototype.isBetween = function (min, max) {
+        if (min.__$Observable && max.__$Observable) {
+            return $computed((x, a, b) => x >= a && x <= b, [this, min, max]);
+        }
+        if (min.__$Observable) {
+            return $computed((x, a) => x >= a && x <= max, [this, min]);
+        }
+        if (max.__$Observable) {
+            return $computed((x, b) => x >= min && x <= b, [this, max]);
+        }
+        return $checker(this, x => x >= min && x <= max);
+    };
+
+    ObservableItem.prototype.isNull = function () {
+        return $checker(this, x => x == null);
+    };
+
+    ObservableItem.prototype.isTruthy = function () {
+        return $checker(this, x => !!x);
+    };
+
+    ObservableItem.prototype.isFalsy = function () {
+        return $checker(this, x => !x);
+    };
+
+    ObservableItem.prototype.isStartingWith = function (str) {
+        if (str?.__$Observable) {
+            return $computed((a, b) => String(a).startsWith(b), [this, str]);
+        }
+        return $checker(this, x => String(x).startsWith(str));
+    };
+
+    ObservableItem.prototype.isEndingWith = function (str) {
+        if (str?.__$Observable) {
+            return $computed((a, b) => String(a).endsWith(b), [this, str]);
+        }
+        return $checker(this, x => String(x).endsWith(str));
+    };
+
+    ObservableItem.prototype.isMatchingPattern = function (regex) {
+        if (regex?.__$Observable) {
+            return $computed((a, b) => new RegExp(b).test(String(a)), [this, regex]);
+        }
+        return $checker(this, x => regex.test(String(x)));
+    };
+
+    ObservableItem.prototype.isEmpty = function () {
+        return $checker(this, x => x == null || x === '' || (Array.isArray(x) && x.length === 0));
+    };
+
+    ObservableItem.prototype.isNotEmpty = function () {
+        return $checker(this, x => x == null || x === '' || (Array.isArray(x) && x.length !== 0));
+    };
+
+    ObservableItem.prototype.isIncludes = function (value) {
+        if (value?.__$Observable) {
+            return $computed((a, b) => {
+                if (Array.isArray(a)) return a.includes(b);
+                return String(a).includes(String(b));
+            }, [this, value]);
+        }
+        return $checker(this, x => {
+            if (Array.isArray(x)) return x.includes(value);
+            return String(x).includes(String(value));
+        });
+    };
+
+    ObservableItem.prototype.isIncludedIn = function (array) {
+        if (array?.__$Observable) {
+            return $computed((a, b) => b.includes(a), [this, array]);
+        }
+        return $checker(this, x => array.includes(x));
+    };
+
+    ObservableItem.prototype.isOneOf = ObservableItem.prototype.isIncludedIn;
+
+    ObservableItem.prototype.isHaving = function (key) {
+        if (key?.__$Observable) {
+            return $computed((a, b) => b in Object(a), [this, key]);
+        }
+        return $checker(this, x => key in Object(x));
+    };
+
+    //
+    // to... -> ObservableChecker<any>
+    //
+
+    ObservableItem.prototype.toUpperCase = function () {
+        return $checker(this, x => String(x).toUpperCase());
+    };
+
+    ObservableItem.prototype.toLowerCase = function () {
+        return $checker(this, x => String(x).toLowerCase());
+    };
+
+    ObservableItem.prototype.toTrimmed = function () {
+        return $checker(this, x => String(x).trim());
+    };
+
+    ObservableItem.prototype.toBoolean = function () {
+        return $checker(this, x => !!x);
+    };
+
+    ObservableItem.prototype.toLiteral = function (template, placeholder = '${v}') {
+        return $checker(this, x => template.replace(placeholder, x));
+    };
+
+    ObservableItem.prototype.toFormatted = ObservableItem.prototype.toLiteral;
+
+    ObservableItem.prototype.toProperty = function (key) {
+        const keys = key.split('.');
+        return $checker(this, x => {
+            let value = x;
+            for (const k of keys) {
+                if (value == null) return undefined;
+                value = value[k];
+            }
+            return value;
+        });
+    };
+
+    ObservableItem.prototype.toLength = function () {
+        return $checker(this, x => (x == null ? 0 : x.length));
+    };
+
+    ObservableItem.prototype.toClamped = function (min, max) {
+        if (min.__$Observable && max.__$Observable) {
+            return $computed((x, a, b) => Math.min(Math.max(x, a), b), [this, min, max]);
         }
-        this.assocTrigger();
+        if (min.__$Observable) {
+            return $computed((x, a) => Math.min(Math.max(x, a), max), [this, min]);
+        }
+        if (max.__$Observable) {
+            return $computed((x, b) => Math.min(Math.max(x, min), b), [this, max]);
+        }
+        return $checker(this, x => Math.min(Math.max(x, min), max));
     };
 
-
-
+    ObservableItem.prototype.toPercent = function (total) {
+        if (total?.__$Observable) {
+            return $computed((a, b) => (b === 0 ? 0 : (a / b) * 100), [this, total]);
+        }
+        return $checker(this, x => (total === 0 ? 0 : (x / total) * 100));
+    };
 
     /**
-     * Gets a property value from the observable's current value.
-     * If the property is an observable, returns its value.
+     * Creates an ObservableWhen that tracks whether an observable equals a specific 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)
+     * @param {ObservableItem} observer - The observable to watch
+     * @param {*} value - The value to compare against
+     * @class ObservableWhen
      */
-    ObservableItem.prototype.get = function(key) {
-        const item = this.$currentValue[key];
-        return Validator.isObservable(item) ? item.val() : item;
+    const ObservableWhen = function(observer, value) {
+        this.$target = value;
+        this.$observer = observer;
     };
 
+    ObservableWhen.prototype.__$Observable = true;
+    ObservableWhen.prototype.__$isObservableWhen = true;
 
     /**
-     * Compares the observable's current value with another value or observable.
+     * Subscribes to changes in the match status (true when observable equals target value).
      *
-     * @param {*|ObservableItem} other - Value or observable to compare against
-     * @returns {boolean} True if values are equal
+     * @param {Function} callback - Function called with boolean indicating if values match
+     * @returns {Function} Unsubscribe function
      * @example
-     * const a = Observable(5);
-     * const b = Observable(5);
-     * a.equals(5);  // true
-     * a.equals(b);  // true
-     * a.equals(10); // false
+     * const status = Observable('idle');
+     * const isLoading = status.when('loading');
+     * isLoading.subscribe(active => console.log('Loading:', active));
      */
-    ObservableItem.prototype.equals = function(other) {
-        if(Validator.isObservable(other)) {
-            return this.$currentValue === other.$currentValue;
-        }
-        return this.$currentValue === other;
+    ObservableWhen.prototype.subscribe = function(callback) {
+        return this.$observer.on(this.$target, callback);
     };
 
     /**
-     * Converts the observable's current value to a boolean.
+     * Returns true if the observable's current value equals the target value.
      *
-     * @returns {boolean} The boolean representation of the current value
-     * @example
-     * const count = Observable(0);
-     * count.toBool(); // false
-     * count.set(5);
-     * count.toBool(); // true
+     * @returns {boolean} True if observable value matches target value
      */
-    ObservableItem.prototype.toBool = function() {
-        return !!this.$currentValue;
+    ObservableWhen.prototype.val = function() {
+        return this.$observer.$currentValue === this.$target;
     };
 
     /**
-     * Toggles the boolean value of the observable (false becomes true, true becomes false).
+     * Returns true if the observable's current value equals the target value.
+     * Alias for val().
      *
-     * @example
-     * const isOpen = Observable(false);
-     * isOpen.toggle(); // Now true
-     * isOpen.toggle(); // Now false
+     * @returns {boolean} True if observable value matches target value
      */
-    ObservableItem.prototype.toggle = function() {
-        this.set(!this.$currentValue);
-    };
+    ObservableWhen.prototype.isMatch = ObservableWhen.prototype.val;
 
     /**
-     * Resets the observable to its initial value.
-     * Only works if the observable was created with { reset: true } config.
+     * Returns true if the observable's current value equals the target value.
+     * Alias for val().
      *
-     * @example
-     * const count = Observable(0, { reset: true });
-     * count.set(10);
-     * count.reset(); // Back to 0
+     * @returns {boolean} True if observable value matches target value
      */
-    ObservableItem.prototype.reset = function() {
-        if(!this.configs?.reset) {
-            return;
-        }
-        const resetValue = (Validator.isObject(this.$initialValue))
-            ? deepClone(this.$initialValue, (observable) => {
-                observable.reset();
-            })
-            : this.$initialValue;
-        this.set(resetValue);
-    };
+    ObservableWhen.prototype.isActive = ObservableWhen.prototype.val;
 
     /**
-     * Returns a string representation of the observable's current value.
      *
-     * @returns {string} String representation of the current value
+     * @param {ObservableItem} $observable
+     * @param {Function} $checker
+     * @class ObservableChecker
      */
-    ObservableItem.prototype.toString = function() {
-        return String(this.$currentValue);
+    function ObservableChecker($observable, $checker) {
+        this.observable = $observable;
+
+        ObservableItem.call(this);
+
+        this.$mutation = $checker;
+
+        $observable.subscribe((newValue) => {
+            this.$updateWithMutation(newValue);
+        });
+
+        this.$updateWithMutation($observable.val());
+    }
+
+    ObservableChecker.prototype = Object.create(ObservableItem.prototype);
+    ObservableChecker.prototype.constructor = ObservableChecker;
+    ObservableChecker.prototype.__$Observable = true;
+    ObservableChecker.prototype.__$isObservableChecker = true;
+
+
+    const ObservablePipe = ObservableChecker;
+    ObservablePipe.prototype.constructor = ObservablePipe;
+
+    ObservableChecker.prototype.$updateWithMutation = function(newValue) {
+        newValue = this.$mutation(newValue);
+        return this.set(newValue);
+    };
+
+    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}`;
+        },
     };
 
     /**
-     * Returns the primitive value of the observable (its current value).
-     * Called automatically in type coercion contexts.
+     * 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.
      *
-     * @returns {*} The current value of the observable
+     * @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.valueOf = function() {
-        return this.$currentValue;
+
+    ObservableItem.prototype.when = function(value) {
+        return new ObservableWhen(this, value);
     };
 
 
 
-    ObservableItem.prototype.persist = function(key, options = {}) {
-        let value = $getFromStorage(key, this.$currentValue);
-        if(options.get) {
-            value = options.get(value);
+    /**
+     * Create an Observable checker instance
+     * @param callback
+     * @returns {ObservableChecker}
+     */
+    ObservableItem.prototype.check = function(callback) {
+        return new ObservableChecker(this, callback)
+    };
+
+    ObservableItem.prototype.transform = ObservableItem.prototype.check;
+    ObservableItem.prototype.pluck = function(property) {
+        return new ObservableChecker(this, (value) => value[property]);
+    };
+    ObservableItem.prototype.is = function(callbackOrValue) {
+        if(typeof callbackOrValue === 'function') {
+            return new ObservableChecker(this, callbackOrValue);
         }
-        this.set(value);
-        const saver = $saveToStorage(this.$currentValue);
-        this.subscribe((newValue) => {
-            saver(key, options.set ? options.set(newValue) : newValue);
-        });
-        return this;
+        return new ObservableChecker(this, (value) => value === callbackOrValue);
     };
+    ObservableItem.prototype.select = ObservableItem.prototype.check;
 
-    ObservableItem.prototype.clone = function() {
-        let clonedValue = 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(clonedValue && typeof clonedValue === 'object') {
-            if(typeof clonedValue.clone === 'function') {
-                clonedValue = clonedValue.clone();
-            } else {
-                clonedValue = structuredClone(clonedValue);
-            }
+        if (typeof type === 'function') {
+            return new ObservableChecker(self, type);
         }
 
-        return new ObservableItem(clonedValue);
+        const formatter = Formatters[type];
+        const localeObservable = Formatters.locale;
+
+        return ObservableItem.computed(() => formatter(self.val(), localeObservable.val(), options),
+            [self, localeObservable]
+        );
     };
 
     /**
@@ -931,6 +2071,138 @@ var NativeComponents = (function (exports) {
         setInterval(() => MemoryManager.cleanObservables(threshold), interval);
     };
 
+
+    /**
+     * Creates an observable array with reactive array methods.
+     * All mutations trigger updates automatically.
+     *
+     * @param {Array} [target=[]] - Initial array value
+     * @param {Object|null} [configs=null] - Configuration options
+     * // @param {boolean} [configs.propagation=true] - Whether to propagate changes to parent observables
+     * // @param {boolean} [configs.deep=false] - Whether to make nested objects observable
+     * @param {boolean} [configs.reset=false] - Whether to store initial value for reset()
+     * @returns {ObservableArray} An observable array with reactive methods
+     * @example
+     * const items = Observable.array([1, 2, 3]);
+     * items.push(4); // Triggers update
+     * items.subscribe((arr) => console.log(arr));
+     */
+    Observable.array = function(target = [], configs = null) {
+        return new ObservableArray(target, configs);
+    };
+
+    /**
+     *
+     * @param {Function} callback
+     * @returns {Function}
+     */
+    Observable.batch = function(callback) {
+        const $observer = Observable(0);
+        const batch = function() {
+            if(Validator$1.isAsyncFunction(callback)) {
+                return (callback(...arguments)).then(() => {
+                    $observer.trigger();
+                }).catch(error => { throw error; });
+            }
+            callback(...arguments);
+            $observer.trigger();
+        };
+        batch.$observer = $observer;
+        return batch;
+    };
+
+
+    /**
+     * Creates a computed observable that automatically updates when its dependencies change.
+     * The callback is re-executed whenever any dependency observable changes.
+     *
+     * @param {Function} callback - Function that returns the computed value
+     * @param {Array<ObservableItem|ObservableChecker|ObservableProxy>|Function} [dependencies=[]] - Array of observables to watch, or batch function
+     * @returns {ObservableItem} A new observable that updates automatically
+     * @example
+     * const firstName = Observable('John');
+     * const lastName = Observable('Doe');
+     * const fullName = Observable.computed(
+     *   () => `${firstName.val()} ${lastName.val()}`,
+     *   [firstName, lastName]
+     * );
+     *
+     * // With batch function
+     * const batch = Observable.batch(() => { ...  });
+     * const computed = Observable.computed(() => { ... }, batch);
+     */
+    Observable.computed = function(callback, dependencies = []) {
+        const initialValue = callback();
+        const observable = new ObservableItem(initialValue);
+        const getValues = () => dependencies.map((item) => item.val());
+        const updatedValue = nextTick(() => observable.set(callback(...getValues())));
+
+        if(Validator$1.isFunction(dependencies)) {
+            if(!Validator$1.isObservable(dependencies.$observer)) {
+                throw new NativeDocumentError('Observable.computed : dependencies must be valid batch function');
+            }
+            dependencies.$observer.subscribe(updatedValue);
+            return observable;
+        }
+
+        dependencies.forEach(dependency => {
+            if(Validator$1.isProxy(dependency)) {
+                dependency.$observables.forEach((observable) => {
+                    observable.subscribe(updatedValue);
+                });
+                return;
+            }
+            dependency.subscribe(updatedValue);
+        });
+
+        return observable;
+    };
+    ObservableItem.computed = Observable.computed;
+
+
+    Observable.init = function(initialValue, configs = null) {
+        return new ObservableObject(initialValue, configs)
+    };
+
+    /**
+     *
+     * @param {any[]} data
+     * @return Proxy[]
+     */
+    Observable.arrayOfObject = function(data) {
+        return data.map(item => Observable.object(item));
+    };
+
+    /**
+     * Get the value of an observable or an object of observables.
+     * @param {ObservableItem|Object<ObservableItem>} data
+     * @returns {{}|*|null}
+     */
+    Observable.value = function(data) {
+        if(data?.__$isObservableArray) {
+            const result = [];
+            for(let i = 0, length = data.length; i < length; i++) {
+                const item = data.at(i);
+                result.push(Observable.value(item));
+            }
+            return result;
+        }
+        if(data?.__$Observable) {
+            return data.val();
+        }
+        if(Validator$1.isProxy(data)) {
+            return data.$value;
+        }
+        return data;
+    };
+
+    ObservableItem.prototype.resolve = function () {
+        return Observable.value(this);
+    };
+
+    Observable.object = Observable.init;
+    Observable.json = Observable.init;
+
     const BOOLEAN_ATTRIBUTES = new Set([
         'checked',
         'selected',
@@ -1048,7 +2320,7 @@ var NativeComponents = (function (exports) {
     const bindBooleanAttribute = (element, attributeName, value) => {
         const isObservable = value.__$isObservable;
         const defaultValue = isObservable? value.val() : value;
-        if(Validator.isBoolean(defaultValue)) {
+        if(Validator$1.isBoolean(defaultValue)) {
             element[attributeName] = defaultValue;
         }
         else {
@@ -1212,7 +2484,7 @@ var NativeComponents = (function (exports) {
             if(child.toNdElement) {
                 do {
                     child =  child.toNdElement();
-                    if(Validator.isElement(child)) {
+                    if(Validator$1.isElement(child)) {
                         return child;
                     }
                 } while (child.toNdElement);
@@ -1291,7 +2563,7 @@ var NativeComponents = (function (exports) {
         anchor.getParent = () => parent;
 
         anchor.appendChild = (child) => {
-            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            child = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
             parent.appendChild(child);
         };
 
@@ -1300,7 +2572,7 @@ var NativeComponents = (function (exports) {
         anchor.appendRaw = anchor.appendChildRaw;
 
         anchor.insertAtStart = (child) => {
-            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            child = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
             parent.firstChild ? parent.insertBefore(child, parent.firstChild) : parent.appendChild(child);
         };
         anchor.insertAtStartRaw = (child) => {
@@ -1314,7 +2586,7 @@ var NativeComponents = (function (exports) {
         };
 
         anchor.replaceContent = function(content) {
-            const child = Validator.isElement(content) ? content : ElementCreator.getChild(content);
+            const child = Validator$1.isElement(content) ? content : ElementCreator.getChild(content);
             parent.replaceChildren(child);
         };
 
@@ -1324,7 +2596,7 @@ var NativeComponents = (function (exports) {
         anchor.setContent = anchor.replaceContent;
 
         anchor.insertBefore = (child, anchor) => {
-            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            child = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
             parent.insertBefore(child, anchor);
         };
         anchor.insertBeforeRaw = (child, anchor) => {
@@ -1368,7 +2640,7 @@ var NativeComponents = (function (exports) {
             ? () => true: (parent) => (parent.firstChild === anchorStart && parent.lastChild === anchorEnd);
 
         const insertBefore = (parent, child, target) => {
-            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            const childElement = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
             insertBeforeRaw(parent, childElement, target);
         };
 
@@ -1418,7 +2690,7 @@ var NativeComponents = (function (exports) {
         anchorFragment.appendRaw = anchorFragment.appendChildRaw;
 
         anchorFragment.insertAtStart = function(child) {
-            child = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            child = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
             anchorFragment.insertAtStartRaw(child);
         };
 
@@ -1475,7 +2747,7 @@ var NativeComponents = (function (exports) {
         anchorFragment.delete = anchorFragment.removeWithAnchors;
 
         anchorFragment.replaceContent = function(child) {
-            const childElement = Validator.isElement(child) ? child : ElementCreator.getChild(child);
+            const childElement = Validator$1.isElement(child) ? child : ElementCreator.getChild(child);
             anchorFragment.replaceContentRaw(childElement);
         };
 
@@ -1543,7 +2815,7 @@ var NativeComponents = (function (exports) {
      * ShowIf(isVisible, Div({}, 'Hello World'));
      */
     const ShowIf = function(condition, child, { comment = null, shouldKeepInCache = true} = {}) {
-        if(!Validator.isObservable(condition)) {
+        if(!Validator$1.isObservable(condition)) {
             if(typeof condition === "boolean") {
                 return condition ? ElementCreator.getChild(child) : null;
             }
@@ -1558,7 +2830,7 @@ var NativeComponents = (function (exports) {
                 return childElement;
             }
             childElement = ElementCreator.getChild(child);
-            if(Validator.isFragment(childElement)) {
+            if(Validator$1.isFragment(childElement)) {
                 childElement = Array.from(childElement.childNodes);
             }
             return childElement;
@@ -5813,7 +7085,7 @@ var NativeComponents = (function (exports) {
             }
             else if (typeof condition === 'function') {
                 isRequired = condition(allValues);
-            } else if (Validator.isObservable(condition)) {
+            } else if (Validator$1.isObservable(condition)) {
                 isRequired = condition.val();
             } else {
                 isRequired = !!condition;
@@ -6006,7 +7278,7 @@ var NativeComponents = (function (exports) {
 
     Field.prototype.model = function(observable) {
         this.$description.value        = observable;
-        this.$description.initialValue = Validator.isObservable(observable)
+        this.$description.initialValue = Validator$1.isObservable(observable)
             ? observable.val()
             : observable;
         return this;
@@ -6015,7 +7287,7 @@ var NativeComponents = (function (exports) {
     Field.prototype.bind = Field.prototype.model;
 
     Field.prototype.errors = function(errors) {
-        if(!Validator.isObservable(errors)) {
+        if(!Validator$1.isObservable(errors)) {
             throw new Error('Errors must be an observable');
         }
         this.$description.errors = errors;
@@ -6064,12 +7336,12 @@ var NativeComponents = (function (exports) {
 
     Field.prototype.value = function() {
         const value = this.$model();
-        return Validator.isObservable(value) ? value.val() : value;
+        return Validator$1.isObservable(value) ? value.val() : value;
     };
 
     Field.prototype.setValue = function(newValue) {
         const value = this.$model();
-        if(Validator.isObservable(value)) {
+        if(Validator$1.isObservable(value)) {
             value.set(newValue);
             return this;
         }
@@ -6139,7 +7411,7 @@ var NativeComponents = (function (exports) {
 
     Field.prototype.reset = function() {
         const value = this.$model();
-        if(Validator.isObservable(value)) {
+        if(Validator$1.isObservable(value)) {
             value.set(this.$description.initialValue ?? this.$description.defaultValue ?? null);
         }
 
@@ -6241,7 +7513,7 @@ var NativeComponents = (function (exports) {
             return;
         }
 
-        if(Validator.isObservable(dataSource)) {
+        if(Validator$1.isObservable(dataSource)) {
             field.model(dataSource);
             return;
         }
@@ -6899,7 +8171,7 @@ var NativeComponents = (function (exports) {
 
     CheckboxField.prototype.checked = function() {
         const checked = this.$description.checked;
-        if(Validator.isObservable(checked)) {
+        if(Validator$1.isObservable(checked)) {
             return checked.val();
         }
         return checked;
@@ -6945,7 +8217,7 @@ var NativeComponents = (function (exports) {
 
     RadioField.prototype.checked = function() {
         const checked = this.$description.checked;
-        if(Validator.isObservable(checked)) {
+        if(Validator$1.isObservable(checked)) {
             return checked.val();
         }
         return checked;
@@ -8030,7 +9302,7 @@ var NativeComponents = (function (exports) {
         };
 
         this.$description.value.interceptMutations((items) =>
-            items.map(item => Validator.isObservable(item) ? item : $$1.object(item))
+            items.map(item => Validator$1.isObservable(item) ? item : $$1.object(item))
         );
     }
 
@@ -8076,10 +9348,10 @@ var NativeComponents = (function (exports) {
     };
 
     FieldCollection.prototype.model = function(observable) {
-        if(Validator.isObservable(observable)) {
+        if(Validator$1.isObservable(observable)) {
             this.$description.value = observable;
             this.$description.value.interceptMutations((items) =>
-                items.map(item => Validator.isObservable(item) ? item : $$1.object(item))
+                items.map(item => Validator$1.isObservable(item) ? item : $$1.object(item))
             );
             return this;
         }
@@ -8094,7 +9366,7 @@ var NativeComponents = (function (exports) {
         const raw  = this.$description.defaultItem
             ? this.$description.defaultItem()
             : {};
-        const item = Validator.isObservable(raw) ? raw : $$1.object(raw);
+        const item = Validator$1.isObservable(raw) ? raw : $$1.object(raw);
 
         this.$description.value.push(item);
         this.emit('add', item);
@@ -8119,7 +9391,7 @@ var NativeComponents = (function (exports) {
 
     FieldCollection.prototype.value = function() {
         return this.$description.value.map(item =>
-            Validator.isObservable(item) ? item.val() : item
+            Validator$1.isObservable(item) ? item.val() : item
         );
     };
 
@@ -8642,7 +9914,7 @@ var NativeComponents = (function (exports) {
 
     ListItem.prototype.selectable = function() {
         this.$description.selectable = true;
-        if(Validator.isObservable(this.$description.selected)) {
+        if(Validator$1.isObservable(this.$description.selected)) {
             return this;
         }
         this.$description.selected = $(false);
@@ -8650,7 +9922,7 @@ var NativeComponents = (function (exports) {
     };
 
     ListItem.prototype.selected = function(selected = true) {
-        if(Validator.isObservable(this.$description.selected)) {
+        if(Validator$1.isObservable(this.$description.selected)) {
             this.$description.selected.set(selected);
             return this;
         }
@@ -11471,7 +12743,7 @@ var NativeComponents = (function (exports) {
     };
 
     Splitter.prototype.panels = function(panels) {
-        if(Validator.isObservable(this.$description.panels)) {
+        if(Validator$1.isObservable(this.$description.panels)) {
             this.$description.panels.clear();
         } else {
             this.$description.panels = [];
@@ -12274,40 +13546,6 @@ var NativeComponents = (function (exports) {
         return this;
     };
 
-    /**
-     *
-     * @param {ObservableItem} $observable
-     * @param {Function} $checker
-     * @class ObservableChecker
-     */
-    function ObservableChecker($observable, $checker) {
-        this.observable = $observable;
-
-        ObservableItem.call(this);
-
-        this.$mutation = $checker;
-
-        $observable.subscribe((newValue) => {
-            this.$updateWithMutation(newValue);
-        });
-
-        this.$updateWithMutation($observable.val());
-    }
-
-    ObservableChecker.prototype = Object.create(ObservableItem.prototype);
-    ObservableChecker.prototype.constructor = ObservableChecker;
-    ObservableChecker.prototype.__$Observable = true;
-    ObservableChecker.prototype.__$isObservableChecker = true;
-
-
-    const ObservablePipe = ObservableChecker;
-    ObservablePipe.prototype.constructor = ObservablePipe;
-
-    ObservableChecker.prototype.$updateWithMutation = function(newValue) {
-        newValue = this.$mutation(newValue);
-        return this.set(newValue);
-    };
-
     NDElement.$getChild = ElementCreator.getChild;
 
     String.prototype.toNdElement = function () {