native-document 1.0.153 → 1.0.155

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

@@ -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) {
@@ -443,6 +456,7 @@ var NativeComponents = (function (exports) {
 
     ObservableItem.prototype.__$Observable = true;
     ObservableItem.prototype.__$isObservable = true;
+    ObservableItem.computed = () => {};
     const noneTrigger = function() {};
 
     /**
@@ -794,72 +808,1198 @@ var NativeComponents = (function (exports) {
     };
 
     /**
-     * Resets the observable to its initial value.
-     * Only works if the observable was created with { reset: true } config.
+     * 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;
+    };
+
+
+
+    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.isObservable);
+
+        const getValues = () => sources.map(src =>
+            Validator.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.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.isJson(item)) {
+                            return new ObservableObject(item, configs);
+                        }
+                        if(Validator.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.isObservable(itemValue) || Validator.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.isObservable(dataItem)) {
+                let value = dataItem.val();
+                if(Array.isArray(value)) {
+                    value = value.map(item => {
+                        if(Validator.isObservable(item)) {
+                            return item.val();
+                        }
+                        if(Validator.isProxy(item)) {
+                            return item.$value;
+                        }
+                        return item;
+                    });
+                }
+                result[key] = value;
+            } else if(Validator.isProxy(dataItem)) {
+                result[key] = dataItem.$value;
+            } else {
+                result[key] = dataItem;
+            }
+        }
+        return result;
+    };
+    ObservableObject.prototype.$val = ObservableObject.prototype.val;
+
+    ObservableObject.prototype.get = function(property) {
+        const item = this.$observables[property];
+        if(Validator.isObservable(item)) {
+            return item.val();
+        }
+        if(Validator.isProxy(item)) {
+            return item.$value;
+        }
+        return item;
+    };
+    ObservableObject.prototype.$get = ObservableObject.prototype.get;
+
+    ObservableObject.prototype.set = function(newData) {
+        const data = Validator.isProxy(newData) ? newData.$value : newData;
+        const configs = this.configs;
+
+        for(const key in data) {
+            const targetItem = this.$observables[key];
+            const newValueOrigin = newData[key];
+            const newValue = data[key];
+
+            if(Validator.isObservable(targetItem)) {
+                if(!Validator.isArray(newValue)) {
+                    targetItem.set(newValue);
+                    continue;
+                }
+                const firstElementFromOriginalValue = newValueOrigin.at(0);
+                if(Validator.isObservable(firstElementFromOriginalValue) || Validator.isProxy(firstElementFromOriginalValue)) {
+                    const newValues = newValue.map(item => {
+                        if(Validator.isProxy(firstElementFromOriginalValue)) {
+                            return new ObservableObject(item, configs);
+                        }
+                        return ObservableItem(item, configs);
+                    });
+                    targetItem.set(newValues);
+                    continue;
+                }
+                targetItem.set([...newValue]);
+                continue;
+            }
+            if(Validator.isProxy(targetItem)) {
+                targetItem.update(newValue);
+                continue;
+            }
+            this[key] = newValue;
+        }
+    };
+    ObservableObject.prototype.$set = ObservableObject.prototype.set;
+    ObservableObject.prototype.$updateWith = ObservableObject.prototype.set;
+
+    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]);
+        }
+        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));
+    };
+
+    /**
+     * Creates an ObservableWhen that tracks whether an observable equals a specific value.
+     *
+     * @param {ObservableItem} observer - The observable to watch
+     * @param {*} value - The value to compare against
+     * @class ObservableWhen
+     */
+    const ObservableWhen = function(observer, value) {
+        this.$target = value;
+        this.$observer = observer;
+    };
+
+    ObservableWhen.prototype.__$Observable = true;
+    ObservableWhen.prototype.__$isObservableWhen = true;
+
+    /**
+     * Subscribes to changes in the match status (true when observable equals target value).
+     *
+     * @param {Function} callback - Function called with boolean indicating if values match
+     * @returns {Function} Unsubscribe function
+     * @example
+     * const status = Observable('idle');
+     * const isLoading = status.when('loading');
+     * isLoading.subscribe(active => console.log('Loading:', active));
+     */
+    ObservableWhen.prototype.subscribe = function(callback) {
+        return this.$observer.on(this.$target, callback);
+    };
+
+    /**
+     * Returns true if the observable's current value equals the target value.
+     *
+     * @returns {boolean} True if observable value matches target value
+     */
+    ObservableWhen.prototype.val = function() {
+        return this.$observer.$currentValue === this.$target;
+    };
+
+    /**
+     * Returns true if the observable's current value equals the target value.
+     * Alias for val().
+     *
+     * @returns {boolean} True if observable value matches target value
+     */
+    ObservableWhen.prototype.isMatch = ObservableWhen.prototype.val;
+
+    /**
+     * Returns true if the observable's current value equals the target value.
+     * Alias for val().
+     *
+     * @returns {boolean} True if observable value matches target value
+     */
+    ObservableWhen.prototype.isActive = ObservableWhen.prototype.val;
+
+    /**
+     *
+     * @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);
+    };
+
+    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}`;
+        },
+    };
+
+    /**
+     * 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 count = Observable(0, { reset: true });
-     * count.set(10);
-     * count.reset(); // Back to 0
+     * const status = Observable('idle');
+     * const isLoading = status.when('loading');
+     * isLoading.subscribe(active => console.log('Loading:', active));
+     * status.set('loading'); // Logs: "Loading: true"
      */
-    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);
+    ObservableItem.prototype.when = function(value) {
+        return new ObservableWhen(this, value);
     };
 
+
+
     /**
-     * Returns the primitive value of the observable (its current value).
-     * Called automatically in type coercion contexts.
-     *
-     * @returns {*} The current value of the observable
+     * Create an Observable checker instance
+     * @param callback
+     * @returns {ObservableChecker}
      */
-    ObservableItem.prototype.valueOf = function() {
-        return this.$currentValue;
+    ObservableItem.prototype.check = function(callback) {
+        return new ObservableChecker(this, callback)
     };
 
-
-
-    ObservableItem.prototype.persist = function(key, options = {}) {
-        let value = $getFromStorage(key, this.$currentValue);
-        if(options.get) {
-            value = options.get(value);
+    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.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.isFunction(dependencies)) {
+            if(!Validator.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.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.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',
@@ -10442,6 +11714,18 @@ var NativeComponents = (function (exports) {
     const Row = HStack;
     const Col = VStack;
 
+    let withValidation = (fn) => fn;
+
+    const normalizeComponentArgs = function(props, children = null) {
+        if(props && children) {
+            return { props, children };
+        }
+        if(typeof props !== 'object' || Array.isArray(props) || props === null || props.constructor.name !== 'Object' ||  props.$hydrate) { // IF it's not a JSON
+            return { props: children, children: props }
+        }
+        return { props, children };
+    };
+
     const EVENTS = [
       "Click",
       "DblClick",
@@ -10723,26 +12007,188 @@ var NativeComponents = (function (exports) {
         }
     };
 
-    Object.defineProperty(HTMLElement.prototype, 'classes', {
-        configurable: true,
-        get() {
-            return {
-                $element: this,
-                ...classListMethods
-            };
-        }
-    });
+    Object.defineProperty(HTMLElement.prototype, 'classes', {
+        configurable: true,
+        get() {
+            return {
+                $element: this,
+                ...classListMethods
+            };
+        }
+    });
+
+    DocumentFragment.prototype.__IS_FRAGMENT = true;
+
+    Function.prototype.args = function(...args) {
+        return withValidation(this);
+    };
+
+    Function.prototype.errorBoundary = function(callback) {
+        const handler = (...args)  => {
+            try {
+                return this.apply(this, args);
+            } catch(e) {
+                return callback(e, {caller: handler, args: args });
+            }
+        };
+        return handler;
+    };
+
+    NDElement.$getChild = ElementCreator.getChild;
+
+    String.prototype.toNdElement = function () {
+        return ElementCreator.createStaticTextNode(null, this);
+    };
+
+    Number.prototype.toNdElement = function () {
+        return ElementCreator.createStaticTextNode(null, this.toString());
+    };
+
+    Element.prototype.toNdElement = function () {
+        return this;
+    };
+    Text.prototype.toNdElement = function () {
+        return this;
+    };
+    Comment.prototype.toNdElement = function () {
+        return this;
+    };
+    Document.prototype.toNdElement = function () {
+        return this;
+    };
+    DocumentFragment.prototype.toNdElement = function () {
+        return this;
+    };
+
+    ObservableItem.prototype.toNdElement = function () {
+        return ElementCreator.createObservableNode(null, this);
+    };
+
+    ObservableChecker.prototype.toNdElement = ObservableItem.prototype.toNdElement;
+
+    NDElement.prototype.toNdElement = function () {
+        const element = this.$element ?? this.$build?.() ?? this.build?.() ?? null;
+        if(this.$attachements) {
+            if(!this.$attachements.contains(this.$element)) {
+                this.$attachements.append(this.$element);
+            }
+            return this.$attachements;
+        }
+        return element;
+    };
+
+    Array.prototype.toNdElement = function () {
+        const fragment = document.createDocumentFragment();
+        for(let i = 0, length = this.length; i < length; i++) {
+            const child = ElementCreator.getChild(this[i]);
+            if(child === null) continue;
+            fragment.appendChild(child);
+        }
+        return fragment;
+    };
+
+    Function.prototype.toNdElement = function () {
+        const child = this;
+        return ElementCreator.getChild(child());
+    };
+
+    /**
+     * @param {HTMLElement} el
+     * @param {number} timeout
+     */
+    const waitForVisualEnd = (el, timeout = 1000) => {
+        return new Promise((resolve) => {
+            let isResolved = false;
+
+            const cleanupAndResolve = (e) => {
+                if (e && e.target !== el) return;
+                if (isResolved) return;
+
+                isResolved = true;
+                el.removeEventListener('transitionend', cleanupAndResolve);
+                el.removeEventListener('animationend', cleanupAndResolve);
+                clearTimeout(timer);
+                resolve();
+            };
+
+            el.addEventListener('transitionend', cleanupAndResolve);
+            el.addEventListener('animationend', cleanupAndResolve);
+
+            const timer = setTimeout(cleanupAndResolve, timeout);
+
+            const style = window.getComputedStyle(el);
+            const hasTransition = style.transitionDuration !== '0s';
+            const hasAnimation = style.animationDuration !== '0s';
+
+            if (!hasTransition && !hasAnimation) {
+                cleanupAndResolve();
+            }
+        });
+    };
+
+    NDElement.prototype.transitionOut = function(transitionName) {
+        const exitClass = transitionName + '-exit';
+        const el = this.$element;
+        this.beforeUnmount('transition-exit', async function() {
+            el.classes.add(exitClass);
+            await waitForVisualEnd(el);
+            el.classes.remove(exitClass);
+        });
+        return this;
+    };
+
+    NDElement.prototype.transitionIn = function(transitionName) {
+        const startClass = transitionName + '-enter-from';
+        const endClass = transitionName + '-enter-to';
 
-    const normalizeComponentArgs = function(props, children = null) {
-        if(props && children) {
-            return { props, children };
-        }
-        if(typeof props !== 'object' || Array.isArray(props) || props === null || props.constructor.name !== 'Object' ||  props.$hydrate) { // IF it's not a JSON
-            return { props: children, children: props }
+        const el = this.$element;
+
+        el.classes.add(startClass);
+
+        this.mounted(() => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    el.classes.remove(startClass);
+                    el.classes.add(endClass);
+
+                    waitForVisualEnd(el).then(() => {
+                        el.classes.remove(endClass);
+                    });
+                });
+            });
+        });
+        return this;
+    };
+
+
+    NDElement.prototype.transition = function (transitionName) {
+        this.transitionIn(transitionName);
+        this.transitionOut(transitionName);
+        return this;
+    };
+
+    NDElement.prototype.animate = function(animationName) {
+        const el = this.$element;
+        el.classes.add(animationName);
+
+        waitForVisualEnd(el).then(() => {
+            el.classes.remove(animationName);
+        });
+
+        return this;
+    };
+
+    ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
+        if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
+            bindBooleanAttribute(element, attributeName, this);
+            return;
         }
-        return { props, children };
+
+        bindAttributeWithObservable(element, attributeName, this);
     };
 
+    ObservableChecker.prototype.handleNdAttribute = ObservableItem.prototype.handleNdAttribute;
+
     const createHtmlElement = (element, _attributes, _children = null) => {
         let { props: attributes, children = null } = normalizeComponentArgs(_attributes, _children);
 
@@ -12274,195 +13720,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 () {
-        return ElementCreator.createStaticTextNode(null, this);
-    };
-
-    Number.prototype.toNdElement = function () {
-        return ElementCreator.createStaticTextNode(null, this.toString());
-    };
-
-    Element.prototype.toNdElement = function () {
-        return this;
-    };
-    Text.prototype.toNdElement = function () {
-        return this;
-    };
-    Comment.prototype.toNdElement = function () {
-        return this;
-    };
-    Document.prototype.toNdElement = function () {
-        return this;
-    };
-    DocumentFragment.prototype.toNdElement = function () {
-        return this;
-    };
-
-    ObservableItem.prototype.toNdElement = function () {
-        return ElementCreator.createObservableNode(null, this);
-    };
-
-    ObservableChecker.prototype.toNdElement = ObservableItem.prototype.toNdElement;
-
-    NDElement.prototype.toNdElement = function () {
-        const element = this.$element ?? this.$build?.() ?? this.build?.() ?? null;
-        if(this.$attachements) {
-            if(!this.$attachements.contains(this.$element)) {
-                this.$attachements.append(this.$element);
-            }
-            return this.$attachements;
-        }
-        return element;
-    };
-
-    Array.prototype.toNdElement = function () {
-        const fragment = document.createDocumentFragment();
-        for(let i = 0, length = this.length; i < length; i++) {
-            const child = ElementCreator.getChild(this[i]);
-            if(child === null) continue;
-            fragment.appendChild(child);
-        }
-        return fragment;
-    };
-
-    Function.prototype.toNdElement = function () {
-        const child = this;
-        return ElementCreator.getChild(child());
-    };
-
-    /**
-     * @param {HTMLElement} el
-     * @param {number} timeout
-     */
-    const waitForVisualEnd = (el, timeout = 1000) => {
-        return new Promise((resolve) => {
-            let isResolved = false;
-
-            const cleanupAndResolve = (e) => {
-                if (e && e.target !== el) return;
-                if (isResolved) return;
-
-                isResolved = true;
-                el.removeEventListener('transitionend', cleanupAndResolve);
-                el.removeEventListener('animationend', cleanupAndResolve);
-                clearTimeout(timer);
-                resolve();
-            };
-
-            el.addEventListener('transitionend', cleanupAndResolve);
-            el.addEventListener('animationend', cleanupAndResolve);
-
-            const timer = setTimeout(cleanupAndResolve, timeout);
-
-            const style = window.getComputedStyle(el);
-            const hasTransition = style.transitionDuration !== '0s';
-            const hasAnimation = style.animationDuration !== '0s';
-
-            if (!hasTransition && !hasAnimation) {
-                cleanupAndResolve();
-            }
-        });
-    };
-
-    NDElement.prototype.transitionOut = function(transitionName) {
-        const exitClass = transitionName + '-exit';
-        const el = this.$element;
-        this.beforeUnmount('transition-exit', async function() {
-            el.classes.add(exitClass);
-            await waitForVisualEnd(el);
-            el.classes.remove(exitClass);
-        });
-        return this;
-    };
-
-    NDElement.prototype.transitionIn = function(transitionName) {
-        const startClass = transitionName + '-enter-from';
-        const endClass = transitionName + '-enter-to';
-
-        const el = this.$element;
-
-        el.classes.add(startClass);
-
-        this.mounted(() => {
-            requestAnimationFrame(() => {
-                requestAnimationFrame(() => {
-                    el.classes.remove(startClass);
-                    el.classes.add(endClass);
-
-                    waitForVisualEnd(el).then(() => {
-                        el.classes.remove(endClass);
-                    });
-                });
-            });
-        });
-        return this;
-    };
-
-
-    NDElement.prototype.transition = function (transitionName) {
-        this.transitionIn(transitionName);
-        this.transitionOut(transitionName);
-        return this;
-    };
-
-    NDElement.prototype.animate = function(animationName) {
-        const el = this.$element;
-        el.classes.add(animationName);
-
-        waitForVisualEnd(el).then(() => {
-            el.classes.remove(animationName);
-        });
-
-        return this;
-    };
-
-    ObservableItem.prototype.handleNdAttribute = function(element, attributeName) {
-        if(BOOLEAN_ATTRIBUTES.has(attributeName)) {
-            bindBooleanAttribute(element, attributeName, this);
-            return;
-        }
-
-        bindAttributeWithObservable(element, attributeName, this);
-    };
-
-    ObservableChecker.prototype.handleNdAttribute = ObservableItem.prototype.handleNdAttribute;
-
     function ColumnGroup(title, props = {}) {
         this.$description = {
             header: title,