ziko 0.39.0 → 0.40.0

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Mon Aug 18 2025 11:00:54 GMT+0100 (UTC+01:00)
+  Date : Tue Aug 19 2025 09:41:09 GMT+0100 (UTC+01:00)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -14,22 +14,22 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Ziko = {}));
 })(this, (function (exports) { 'use strict';
 
-    const { PI: PI$1, E } = Math;
+    const { PI: PI$2, E } = Math;
     const EPSILON=Number.EPSILON;
 
-    const {PI, cos: cos$1, sin: sin$1, tan: tan$1, acos: acos$1, asin: asin$1, atan: atan$1, cosh: cosh$1, sinh: sinh$1, tanh: tanh$1, acosh: acosh$1, asinh: asinh$1, atanh: atanh$1, log} = Math;
+    const {PI: PI$1, cos: cos$2, sin: sin$2, tan: tan$1, acos: acos$2, asin: asin$1, atan: atan$1, cosh: cosh$1, sinh: sinh$1, tanh: tanh$1, acosh: acosh$1, asinh: asinh$1, atanh: atanh$1, log} = Math;
     let Fixed={
-        cos: cos$1,
-        sin: sin$1,
+        cos: cos$2,
+        sin: sin$2,
         tan: tan$1,
-        sinc: x => sin$1(PI*x)/(PI*x),
-        sec: x => 1/cos$1(x),
-        csc: x => 1/sin$1(x),
+        sinc: x => sin$2(PI$1*x)/(PI$1*x),
+        sec: x => 1/cos$2(x),
+        csc: x => 1/sin$2(x),
         cot: x => 1/tan$1(x),
-        acos: acos$1,
+        acos: acos$2,
         asin: asin$1,
         atan: atan$1,
-        acot: x => PI/2-atan$1(x),
+        acot: x => PI$1/2-atan$1(x),
         cosh: cosh$1,
         sinh: sinh$1,
         tanh: tanh$1,
@@ -67,20 +67,20 @@
                 const [a,b,z,phi]=[x.a,x.b,x.z,x.phi];
                 switch(fun){
                     case Math.log: return complex(ln(z),phi); // Done
-                    case Math.exp: return complex(e(a)*cos(b),e(a)*sin(b)); // Done
+                    case Math.exp: return complex(e(a)*cos$1(b),e(a)*sin$1(b)); // Done
                     case Math.abs: return z; // Done
-                    case Math.sqrt: return complex(sqrt(z)*cos(phi/2),sqrt(z)*sin(phi/2)); // Done
-                    case Fixed.cos: return complex(cos(a)*cosh(b),-(sin(a)*sinh(b)));
-                    case Fixed.sin: return complex(sin(a)*cosh(b),cos(a)*sinh(b));
+                    case Math.sqrt: return complex(sqrt$1(z)*cos$1(phi/2),sqrt$1(z)*sin$1(phi/2)); // Done
+                    case Fixed.cos: return complex(cos$1(a)*cosh(b),-(sin$1(a)*sinh(b)));
+                    case Fixed.sin: return complex(sin$1(a)*cosh(b),cos$1(a)*sinh(b));
                     case Fixed.tan:{
-                        const DEN = cos(2*a)+cosh(2*b);
-                        return complex(sin(2*a)/DEN,sinh(2*b)/DEN);
+                        const DEN = cos$1(2*a)+cosh(2*b);
+                        return complex(sin$1(2*a)/DEN,sinh(2*b)/DEN);
                     }
-                    case Fixed.cosh:return complex(cosh(a)*cos(b),sinh(a)*sin(b));
-                    case Fixed.sinh:return complex(sinh(a)*cos(b),cosh(a)*sin(b));
+                    case Fixed.cosh:return complex(cosh(a)*cos$1(b),sinh(a)*sin$1(b));
+                    case Fixed.sinh:return complex(sinh(a)*cos$1(b),cosh(a)*sin$1(b));
                     case Fixed.tanh:{
-                        const DEN=cosh(2*a)+cos(2*b);
-                        return complex(sinh(2*a)/DEN,sin(2*b)/DEN)
+                        const DEN=cosh(2*a)+cos$1(2*b);
+                        return complex(sinh(2*a)/DEN,sin$1(2*b)/DEN)
                     }
                     default : return fun(x)
                 }
@@ -321,7 +321,7 @@
         }
     };
     const logspace=(a,b,n=b-a+1,base=E,endpoint=true)=>{
-        return linspace(a,b,n,endpoint).map(n=>pow(base,n))
+        return linspace(a,b,n,endpoint).map(n=>pow$1(base,n))
     };
     const geomspace=(a,b,n=abs(b-a)+1,endpoint=true)=>{
         if(Math.floor(n)!==n)return;
@@ -1106,10 +1106,69 @@
       else register_to_instance(target, ...mixins);
       };
 
+    function useState(initialValue) {
+        let value = initialValue;
+        const subscribers = new Set();
+        let paused = false;
+
+        function getValue() {
+            return {
+                value,
+                isStateGetter: () => true,
+                _subscribe: (
+                    fn, 
+                    // UIElement 
+                ) => {
+                    subscribers.add(fn);
+
+                    // const observer = new MutationObserver(() => {
+                    //     if (!document.body.contains(UIElement.element)) {
+                    //         subscribers.delete(fn);
+                    //         observer.disconnect();
+                    //     }
+                    // });
+
+                    // observer.observe(document.body, { childList: true, subtree: true });
+                },
+            };
+        }
+
+        function setValue(newValue) {
+            if (paused) return;
+            if (typeof newValue === "function") newValue = newValue(value);
+            if (newValue !== value) {
+                value = newValue;
+                subscribers.forEach(fn => fn(value));
+            }
+        }
+
+        const controller = {
+            pause: () => { paused = true; },
+            resume: () => { paused = false; },
+            clear: () => { subscribers.clear(); },
+            force: (newValue) => { // force update even if paused
+                if (typeof newValue === "function") newValue = newValue(value);
+                value = newValue;
+                subscribers.forEach(fn => fn(value));
+            },
+            getSubscribers: () => new Set(subscribers),
+        };
+
+        return [getValue, setValue, controller];
+    }
+
     const isStateGetter = (arg) => {
         return typeof(arg) === 'function' && arg?.()?.isStateGetter?.()
     };
 
+    const camel2hyphencase = (text = '') => text.replace(/[A-Z]/g, match => '-' + match.toLowerCase());
+
+    const is_camelcase = (text = '') =>{
+        if (text.length === 0) return false; 
+        const camelCasePattern = /^[a-z][a-zA-Z0-9]*$/;
+        return camelCasePattern.test(text);
+    };
+
     // To Do add getter, watchAttr
     const AttrsMethods = {
       setAttr(name, value) {
@@ -1131,7 +1190,7 @@
         return this;
       },
       getAttr(name){
-        name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
+        name = is_camelcase(name) ? camel2hyphencase(name) : name;
         return this.element.attributes[name].value;
       },
       setContentEditable(bool = true) {
@@ -1141,7 +1200,7 @@
     };
 
     function _set_attrs_(name, value){
-        if(this.element?.tagName !== "svg") name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
+        if(this.element?.tagName !== "svg") name = is_camelcase(name) ? camel2hyphencase(name) : name;
         if(this?.attr[name] && this?.attr[name]===value) return;
         if(isStateGetter(value)){
             const getter = value();
@@ -1700,19 +1759,38 @@
       },
     };
 
-    // Process width and height
     const StyleMethods = {
         style(styles){
-            Object.assign(this.element.style, styles);
+            for(let key in styles){
+                const value = styles[key];
+                if(isStateGetter(value)){
+                    const getter = value();
+                    Object.assign(this.element.style, {[key] : getter.value});
+                    getter._subscribe(
+                        (newValue) => {
+                            console.log({newValue});
+                            Object.assign(this.element.style, {[key] : newValue});
+                        },
+                        // this 
+                    );
+                }
+                else Object.assign(this.element.style, {[key] : value});
+            }
             return this;
         },
         size(width, height){
             return this.style({width, height})
+        },
+        hide(){
+
+        },
+        show(){
+
         },
         animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
             this.element?.animate(keyframe,{duration, iterations, easing});
             return this;
-      }
+        }
     };
 
     function EVENT_CONTROLLER(e,EVENT,setter,push_object){
@@ -3119,18 +3197,14 @@
         let type ;
         if(HTMLTags.includes(tag)) type = 'html';
         if(SVGTags.includes(tag)) type = 'svg';
-        if(HTMLTags.includes(tag)) return (...args)=>{
+        return (...args)=>{
           console.log(isStateGetter(args[0]));
-        //  if(typeof args[0] === 'function') {
-        //   console.log(args[0], args[0]?.() instanceof StateGetter)
-        //   globalThis.a = args[0]
-        //   console.log({t : a.constructor})
-        //  }
           if(
             ['string', 'number'].includes(typeof args[0]) 
             || args[0] instanceof UIElement 
             || (typeof args[0] === 'function' && args[0]().isStateGetter())
-          ) return new UIElement({element :tag, name : tag, type}).append(...args);
+          ) return new UIElement({element : tag, name : tag, type}).append(...args);
+          // console.log(args[0])
           return new UIElement({element : tag}).setAttr(args.shift()).append(...args)
         }
         // if(SVGTags.includes(tag)) return (...args) => new UIElement(tag,"",{el_type : "svg"}).append(...args);
@@ -3722,175 +3796,6 @@
         }, Array.isArray(obj) ? [] : {});
     }
 
-    const Patterns={
-        isDigit: /^\d+$/,
-        isURL: /^(https?:\/\/)?([\w\-]+\.)+[\w\-]+(\/[\w\-./?%&=]*)?$/,
-        isHexColor: /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/,
-        isIPv4: /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
-        isMACAddress: /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/,
-        isDate: /^\d{4}-\d{2}-\d{2}$/,
-    };
-
-    class Str{
-        constructor(string){
-            this.string=string;
-        }
-        isDigit() {
-            return Patterns.isDigit.test(this.string);
-        }
-        static isDigit(string){
-            return new Str(string).isDigit();
-        }
-        isNumber() {
-            return !isNaN(this.string);
-        }
-        static isNumber(string){
-            return new Str(string).isNumber();
-        }
-        isUrl(){
-            return Patterns.isURL.test(this.string);
-        }
-        static isUrl(string){
-            return new Str(string).isUrl();
-        }
-        isHexColor(){
-            return Patterns.isHexColor.test(this.string);
-        }
-        static isHexColor(string){
-            return new Str(string).isHexColor();
-        }
-        isIPv4(){
-            return Patterns.isIPv4.test(this.string);
-        }
-        static isIPv4(string){
-            return new Str(string).isIPv4();
-        }
-        isDate(){
-            return Patterns.isDate.test(this.string);
-        }
-        static isDate(string){
-            return new Str(string).isDate();
-        }
-        isMACAddress(){
-            return Patterns.isMACAddress.test(this.string);
-        }
-        static isMACAddress(string){
-            return new Str(string).isMACAddress();
-        }
-        isPascalCase(){
-            if (this.string.length === 0) return false;
-            const PascalCasePattern = /^[A-Z][a-zA-Z0-9]*$/;
-            return PascalCasePattern.test(this.string);
-        }
-        static isPascalCase(string){
-            return new Str(string).isPascalCase();
-        }
-        isCamelCase() {
-            if (this.string.length === 0) return false;        
-            const camelCasePattern = /^[a-z][a-zA-Z0-9]*$/;
-            return camelCasePattern.test(this.string);
-        }
-        static isCamelCase(string){
-            return new Str(string).isCamelCase();
-        }
-        isHyphenCase(){
-            return this.string.split('-').length > 1;
-        }
-        static isHyphenCase(string){
-            return new Str(string).isHyphenCase();
-        }
-        isSnakeCase(){
-            return this.string.split('_').length > 1;
-        }
-        static isSnakeCase(string){
-            return new Str(string).isSnakeCase();
-        }
-        isPalindrome(){
-            const str=this.string.toLocaleLowerCase();
-            let l=str.length,i;
-            for(i=0;i<l/2;i++)if(str[i]!=str[l-i-1])return false;
-            return true;
-        }
-        static isPalindrome(string){
-            return new Str(string).isPalindrome();
-        }
-        static isAnagrams(word,words){
-            word=word.split("").sort();
-            words=words.split("").sort();
-            return JSON.stringify(word)===JSON.stringify(words);
-        }
-        isIsogram(){
-            return [...new Set(this.string.toLowerCase())].length===this.string.length; 
-        }
-        static isIsogram(string){
-           return  new Str(string).isIsogram();
-        }
-        static camel2hyphencase(text) {
-            return text.replace(/[A-Z]/g, match => '-' + match.toLowerCase());
-        }
-        static camel2snakecase(text) {
-            return text.replace(/[A-Z]/g, match => '_' + match.toLowerCase());
-        }
-        static camel2pascalcase(text) {
-            return text.charAt(0).toUpperCase() + text.slice(1);
-        }
-        static camel2constantcase(text) {
-            return text.replace(/[A-Z]/g, match => '_' + match).toUpperCase();
-        }
-        static pascal2snakecase(text) {
-            return text.replace(/([A-Z])/g, (match, offset) => offset ? '_' + match.toLowerCase() : match.toLowerCase());
-        }
-        static pascal2hyphencase(text) {
-            return text.replace(/([A-Z])/g, (match, offset) => offset ? '-' + match.toLowerCase() : match.toLowerCase());
-        }
-        static pascal2camelcase(text) {
-            return text.charAt(0).toLowerCase() + text.slice(1);
-        }
-        static pascal2constantcase(text) {
-            return text.replace(/([A-Z])/g, (match, offset) => offset ? '_' + match : match).toUpperCase();
-        }
-        static snake2camelcase(text) {
-            return text.replace(/(_\w)/g, match => match[1].toUpperCase());
-        }
-        static snake2hyphencase(text) {
-            return text.replace(/_/g, "-");
-        }
-        static snake2pascalcase(text) {
-            return text.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
-        }
-        static snake2constantcase(text) {
-            return text.toUpperCase();
-        }
-        static hyphen2camelcase(text) {
-            return text.replace(/-([a-z])/g, match => match[1].toUpperCase());
-        }
-        static hyphen2snakecase(text) {
-            return text.replace(/-/g, '_');
-        }
-        static hyphen2pascalcase(text) {
-            return text.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
-        }
-        static hyphen2constantcase(text) {
-            return text.replace(/-/g, '_').toUpperCase();
-        }
-        static constant2camelcase(text) {
-            return text.toLowerCase().replace(/_([a-z])/g, match => match[1].toUpperCase());
-        }
-        static constant2snakecase(text) {
-            return text.toLowerCase();
-        }
-        static constant2pascalcase(text) {
-            return text.toLowerCase().split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
-        }
-        static constant2hyphencase(text) {
-            return text.toLowerCase().replace(/_/g, '-');
-        }
-    }
-    const removeExtraSpace=str=>str.replace(/\s+/g,' ');
-    const count=(str,value)=>str.split("").filter(x => x==value).length;
-    const countWords=(str,value)=>str.split(" ").filter(x => x==value).length;
-    const str=string=>new Str(string);
-
     class Matrix extends ZikoMath{
         constructor(rows, cols, element = [] ) {
             super();
@@ -4049,7 +3954,7 @@
                             .mul(determinat(deleteRowAndColumn(M, i)))
                     );*/
                     //const to_be_added=Utils.add(Utils.mul(pow(-1, i),Utils.mul(M[0][i],determinat(deleteRowAndColumn(M, i)))));
-                    const to_be_added=Utils.add(Utils.mul(pow(-1, i),Utils.mul(M[0][i],determinat(deleteRowAndColumn(M, i)))));
+                    const to_be_added=Utils.add(Utils.mul(pow$1(-1, i),Utils.mul(M[0][i],determinat(deleteRowAndColumn(M, i)))));
                     answer=Utils.add(answer,to_be_added);
                 }
                 return answer;
@@ -4572,7 +4477,7 @@
                 }
                 else if(("a" in b && "z" in a)){
                     this.a=a.a;
-                    this.b=sqrt((a.z**2)-(a.a**2));
+                    this.b=sqrt$1((a.z**2)-(a.a**2));
                 }
                 else if(("a" in b && "phi" in a)){
                     this.a=a.a;
@@ -4580,15 +4485,15 @@
                 }
                 else if(("b" in b && "z" in a)){
                     this.b=a.b;
-                    this.a=sqrt((a.z**2)-(a.b**2));
+                    this.a=sqrt$1((a.z**2)-(a.b**2));
                 }
                 else if(("b" in b && "phi" in a)){
                     this.b=b;
                     this.a=a.b/tan(a.phi);
                 }
                 else if(("z" in b && "phi" in a)){
-                    this.a=a.z*cos(a.phi);
-                    this.a=a.z*sin(a.phi);
+                    this.a=a.z*cos$1(a.phi);
+                    this.a=a.z*sin$1(a.phi);
                 }
             }
             else if(typeof(a)==="number"&&typeof(b)==="number"){
@@ -4628,7 +4533,7 @@
             return new Complex(this.a, -this.b);
         }
         get inv() {
-            return new Complex(this.a / (pow(this.a, 2) + pow(this.b, 2)), -this.b / (pow(this.a, 2) + pow(this.b, 2)));
+            return new Complex(this.a / (pow$1(this.a, 2) + pow$1(this.b, 2)), -this.b / (pow$1(this.a, 2) + pow$1(this.b, 2)));
         }
         add(...z) {
             for (let i = 0; i < z.length; i++) {
@@ -4656,8 +4561,8 @@
             }
             let Z=+prod(this.z,...z.map(n=>n.z)).toFixed(15);
             let phi=+sum(this.phi,...z.map(n=>n.phi)).toFixed(15);
-            this.a=+(Z*cos(phi).toFixed(15)).toFixed(14);
-            this.b=+(Z*sin(phi).toFixed(15)).toFixed(14);    
+            this.a=+(Z*cos$1(phi).toFixed(15)).toFixed(14);
+            this.b=+(Z*sin$1(phi).toFixed(15)).toFixed(14);    
             return this;
         }
         div(...z) {
@@ -4666,23 +4571,23 @@
             }
             let Z=+(this.z/prod(...z.map(n=>n.z))).toFixed(15);
             let phi=+(this.phi-sum(...z.map(n=>n.phi))).toFixed(15);
-            this.a=+(Z*cos(phi).toFixed(15)).toFixed(15);
-            this.b=+(Z*sin(phi).toFixed(15)).toFixed(15);
+            this.a=+(Z*cos$1(phi).toFixed(15)).toFixed(15);
+            this.b=+(Z*sin$1(phi).toFixed(15)).toFixed(15);
             return this;
         }
         pow(n) {
             if (floor(n) === n && n > 0) {
                 let z=+(this.z**n).toFixed(15);
                 let phi=+(this.phi*n).toFixed(15);
-                this.a=+(z*cos(phi).toFixed(15)).toFixed(15);
-                this.b=+(z*sin(phi).toFixed(15)).toFixed(15);
+                this.a=+(z*cos$1(phi).toFixed(15)).toFixed(15);
+                this.b=+(z*sin$1(phi).toFixed(15)).toFixed(15);
             }
             return this;
         }
         static fromExpo(z, phi) {
             return new Complex(
-                +(z * cos(phi)).toFixed(13), 
-                +(z * sin(phi)).toFixed(13)
+                +(z * cos$1(phi)).toFixed(13), 
+                +(z * sin$1(phi)).toFixed(13)
                 );
         }
         get expo() {
@@ -4704,10 +4609,10 @@
             return z.clone.pow(n);
         }
         static xpowZ(x){
-            return complex((x**this.a)*cos(this.b*ln(x)),(x**this.a)*sin(this.b*ln(x)));
+            return complex((x**this.a)*cos$1(this.b*ln(x)),(x**this.a)*sin$1(this.b*ln(x)));
         }
         sqrtn(n=2){
-            return complex(sqrtn(this.z,n)*cos(this.phi/n),sqrtn(this.z,n)*sin(this.phi/n));
+            return complex(sqrtn(this.z,n)*cos$1(this.phi/n),sqrtn(this.z,n)*sin$1(this.phi/n));
         }
         get sqrt(){
             return this.sqrtn(2);
@@ -4716,14 +4621,14 @@
             return complex(this.z,this.phi);
         }
         get cos(){
-            return complex(cos(this.a)*cosh(this.b),sin(this.a)*sinh(this.b))
+            return complex(cos$1(this.a)*cosh(this.b),sin$1(this.a)*sinh(this.b))
         }
         get sin(){
-            return complex(sin(this.a)*cosh(this.b),cos(this.a)*sinh(this.b))
+            return complex(sin$1(this.a)*cosh(this.b),cos$1(this.a)*sinh(this.b))
         }
         get tan(){
-            const de=cos(this.a*2)+cosh(this.b*2);
-            return complex(sin(2*this.a)/de,sinh(2*this.b)/de);
+            const de=cos$1(this.a*2)+cosh(this.b*2);
+            return complex(sin$1(2*this.a)/de,sinh(2*this.b)/de);
         }
         printInConsole() {
             let string = this.a + " + " + this.b + " * i";
@@ -4754,12 +4659,12 @@
     // } from "../calculus/index.js";
 
     const abs=(...x)=>mapfun$1(Math.abs,...x);
-    const sqrt=(...x)=>mapfun$1(Math.sqrt,...x);
-    const pow=(x,n)=>{
+    const sqrt$1=(...x)=>mapfun$1(Math.sqrt,...x);
+    const pow$1=(x,n)=>{
         if(typeof x === "number"){
             if(typeof n === "number")return Math.pow(x,n);
             else if(n instanceof Complex)return Complex.fromExpo(x**n.a,n.b*ln(x))
-            else return mapfun$1(a=>pow(x,a),...n);
+            else return mapfun$1(a=>pow$1(x,a),...n);
         }
         else if(x instanceof Complex){
             if(typeof n === "number")return Complex.fromExpo(x.z**n,x.phi*n);
@@ -4767,14 +4672,14 @@
                 x.z**n.a*e(-x.phi*n.b),
                 ln(x.z)*n.b+n.a*x.phi
             )
-            else return mapfun$1(a=>pow(x,a),...n);
+            else return mapfun$1(a=>pow$1(x,a),...n);
         }
         else if(x instanceof Array){
-            if(typeof n === "number") return mapfun$1(a=>pow(a,n),...x);
+            if(typeof n === "number") return mapfun$1(a=>pow$1(a,n),...x);
             else if(n instanceof Array){
                 const Y=[];
                 for(let i=0;i<x.length;i++){
-                    Y.push(mapfun$1(a=>pow(x[i],a),...n));
+                    Y.push(mapfun$1(a=>pow$1(x[i],a),...n));
                 }
                 return Y;
             }
@@ -4802,14 +4707,14 @@
     };
     const e=(...x) => mapfun$1(Math.exp,...x);
     const ln=(...x) => mapfun$1(Math.log,...x);
-    const cos=(...x) => mapfun$1(Fixed.cos,...x);
-    const sin=(...x) => mapfun$1(Fixed.sin,...x);
+    const cos$1=(...x) => mapfun$1(Fixed.cos,...x);
+    const sin$1=(...x) => mapfun$1(Fixed.sin,...x);
     const tan=(...x) => mapfun$1(Fixed.tan,...x);
     const sec=(...x) => mapfun$1(Fixed.sec,...x);
     const sinc=(...x) => mapfun$1(Fixed.sinc,...x);
     const csc=(...x) => mapfun$1(Fixed.csc,...x);
     const cot=(...x) => mapfun$1(Fixed.cot,...x);
-    const acos=(...x) => mapfun$1(Fixed.acos,...x);
+    const acos$1=(...x) => mapfun$1(Fixed.acos,...x);
     const asin=(...x) => mapfun$1(Fixed.asin,...x);
     const atan=(...x) => mapfun$1(Fixed.atan,...x);
     const acot=(...x) => mapfun$1(Fixed.acot,...x);
@@ -4837,7 +4742,7 @@
             else if(y instanceof Array){
                 const Y=[];
                 for(let i=0;i<x.length;i++){
-                    Y.push(mapfun$1(a=>pow(x[i],a),...y));
+                    Y.push(mapfun$1(a=>pow$1(x[i],a),...y));
                 }
                 return Y;
             }
@@ -4863,229 +4768,469 @@
         )
     };
 
-    class ZikoTimeLoop {
-      constructor(callback, step = 1000/30, startTime=0, endTime = Infinity, started = true) {
+    const {PI, sqrt, cos, sin, acos, pow} = Math;
+
+    const Linear = t => t;
+    const InSin = t => 1 - cos((t * PI) / 2);
+    const OutSin = t => sin((t * PI) / 2);
+    const InOutSin = t => -(cos(PI * t) - 1) / 2;
+
+    const InQuad = t => t**2;
+    const OutQuad = t => 1 - (1-t)**2;
+    const InOutQuad = t => t < 0.5 ? 2 * (t**2) : 1 - (-2 * t + 2)**2 / 2;
+
+    const InCubic = t => t**3;
+    const OutCubic = t => 1 - (1-t)**3;
+    const InOutCubic = t => t < 0.5 ? 4 * (t**3) : 1 - (-2 * t + 2)**3 / 2;
+
+    const InQuart = t => t**4;
+    const OutQuart = t => 1 - (1-t)**4;
+    const InOutQuart = t => t < 0.5 ? 8 * (t**4) : 1 - (-2 * t + 2)**4 / 2;
+
+    const InQuint = t => t**5;
+    const OutQuint = t => 1 - (1-t)**5;
+    const InOutQuint = t => t < 0.5 ? 16 * (t**5) : 1 - (-2 * t + 2)**5 / 2;
+
+    const InExpo = t => t === 0 ? 0 : 2**(10*t - 10);
+    const OutExpo = t => t === 1 ? 1 : 1 - 2**(-10 * t);
+    const InOutExpo = t => t === 0? 0: t === 1? 1: t < 0.5 ? 2**(20 * t - 10) / 2: (2 - 2**(-20 * t + 10)) / 2;
+
+    const InCirc = t => 1 - sqrt(1 - t**2);
+    const OutCirc = t => sqrt(1 - (t-1)**2);
+    const InOutCirc = t => t < 0.5? (1 - sqrt(1 - (2*t)**2)) / 2: (sqrt(1 - (-2*t+2)**2) + 1) / 2;
+
+    const Arc = t => 1 - sin(acos(t));
+    const Back = (t, x = 1) => (t**2) * ((x+1)*t - x);
+    const Elastic = t => -2*pow(2, 10 * (t - 1)) * cos(20 * PI * t / 3 * t);
+
+    const InBack = (t, c1 = 1.70158, c3 = c1 + 1) => c3 * pow(t,3)- c1 * (t**2); 
+    const OutBack = (t, c1 = 1.70158, c3 = c1 + 1) => 1 + c3 * pow(t - 1, 3) + c1 * pow(t - 1, 2); 
+    const InOutBack = (t, c1 = 1.70158, c2 = c1 * 1.525) => t < 0.5 ? (pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2)) / 2 : (pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2;  
+
+    const InElastic = (t, c4 = 2*PI/3) => {
+        return t === 0
+        ? 0
+        : t === 1
+        ? 1
+        : -pow(2, 10 * t - 10) * sin((t * 10 - 10.75) * c4);    
+    };
+
+    const OutElastic = (t, c4 = 2*PI/3) => {
+        return t === 0
+        ? 0
+        : t === 1
+        ? 1
+        : pow(2, -10 * t) * sin((t * 10 - 0.75) * c4) + 1;
+    }; 
+    const InOutElastic = (t, c5 = 2 * PI / 4.5) => {
+        return t === 0
+        ? 0
+        : t === 1
+        ? 1
+        : t < 0.5
+        ? -(pow(2, 20 * t - 10) * sin((20 * t - 11.125) * c5)) / 2
+        : (pow(2, -20 * t + 10) * sin((20 * t - 11.125) * c5)) / 2 + 1;
+    };
+
+    const InBounce = (t, n1 = 7.5625, d1 = 2.75) => 1 - OutBounce(1-t, n1, d1);
+    const OutBounce = (t, n1 = 7.5625, d1 = 2.75) => {
+        if(t<1/d1) return n1 * t * t;
+        if(t < 2 / d1) return n1 * (t -= 1.5 / d1) * t + 0.75;
+        if(t < 2.5 / d1) return n1 * (t -= 2.25 / d1) * t + 0.9375;
+        return n1 * (t -= 2.625 / d1) * t + 0.984375;
+    };
+
+    const InOutBounce = (t, n1 = 7.5625, d1 = 2.75) => t < 0.5 ? OutBounce(1 - 2 * t, n1, d1)/2 : OutBounce(2 * t - 1, n1, d1)/2;
+
+
+    const Step = (t, steps = 5) => Math.floor(t*steps) / steps;
+    const Discret = (t, segments = 5) => Math.ceil(t*segments) / segments;
+
+    class TimeAnimation {
+      constructor(callback, { ease = Linear, step = 50, t0 = 0, start = true, duration = 3000 } = {}) {
         this.callback = callback;
-        this.cache = {
+        this.state = {
           isRunning: false,
-          AnimationId : null,
-          t0 : null,
+          animationId: null,
+          startTime: null,
+          ease,
           step,
-          // fps,
-          startTime,
-          endTime,
-          started
+        //   interval: [t0, t1],
+          autoStart: start,
+          duration
         };
-        this.init();
-        this.i=0;
+
+        this.t = 0;   // elapsed time
+        this.tx = 0;  // normalized [0,1]
+        this.ty = 0;  // eased value
+        this.i = 0;   // frame index
+
+        if (this.state.autoStart) {
+          this.start();
+        }
       }
-      init(){
-        // if(this.cache.step && this.cache.fps){
-        //   console.warn(`Fps will be adjusted from ${this.cache.fps} to ${1000/this.cache.step} to ensure a smoother animation`);
-        //   this.cache.fps=1000/this.cache.step;
-        // }
-        if(this.cache.started){
-          this.cache.startTime?this.startAfter(this.cache.startTime):this.start();
-          if(this.cache.endTime&&this.cache.endTime!==Infinity)this.stopAfter(this.cache.endTime);
+
+      // ---- private loop handler ----
+      #tick = () => {
+        this.t += this.state.step;
+        this.i++;
+
+        this.tx = map(this.t, 0, this.state.duration, 0, 1);
+        this.ty = this.state.ease(this.tx);
+
+        this.callback(this);
+
+        if (this.t >= this.state.duration) {
+          clearInterval(this.state.animationId);
+          this.state.isRunning = false;
+        }
+      };
+
+      // ---- core runner ----
+      #run(reset = true) {
+        if (!this.state.isRunning) {
+          if (reset) this.reset(false);
+
+          this.state.isRunning = true;
+          this.state.startTime = Date.now();
+          this.state.animationId = setInterval(this.#tick, this.state.step);
         }
         return this;
       }
-      // get TIME_STEP() {
-      //   // return this.cache.step?this.cache.step:1000 / this.cache.fps;
-      //   return this.cache.step;
-      // }
+
+      // ---- lifecycle methods ----
+      start() {
+        return this.#run(true);
+      }
+
+      pause() {
+        if (this.state.isRunning) {
+          clearInterval(this.state.animationId);
+          this.state.isRunning = false;
+        }
+        return this;
+      }
+
+      resume() {
+        return this.#run(false);
+      }
+
+      stop() {
+        this.pause();
+        this.reset(false);
+        return this;
+      }
+
+      reset(restart = true) {
+        this.t = 0;
+        this.tx = 0;
+        this.ty = 0;
+        this.i = 0;
+
+        if (restart) this.start();
+        return this;
+      }
+    }
+
+    // Hook-style factory
+    const animation = (callback, {ease, t0, t1, start, duration} = {}) =>
+      new TimeAnimation(callback, {ease, t0, t1, start, duration});
+
+    class Tick {
+      constructor(ms, fn) {
+        this.ms = ms;
+        this.fn = fn;
+        this.id = null;
+        this.running = false;
+      }
+
+      start() {
+        if (!this.running) {
+          this.running = true;
+          this.id = setInterval(this.fn, this.ms);
+        }
+        return this;
+      }
+
+      stop() {
+        if (this.running) {
+          this.running = false;
+          clearInterval(this.id);
+          this.id = null;
+        }
+        return this;
+      }
+
+      isRunning() {
+        return this.running;
+      }
+    }
+    const tick = (ms, fn) => new Tick(ms, fn);
+
+    class Clock extends Tick {
+      constructor(tickMs = 1000 / 60) {
+        super(tickMs, () => this._tick());
+        this.elapsed = 0;
+        this._lastTime = performance.now();
+        this._callbacks = new Set();
+      }
+
+      _tick() {
+        const now = performance.now();
+        const delta = now - this._lastTime;
+        this.elapsed += delta;
+        this._lastTime = now;
+
+        for (const cb of this._callbacks) {
+          cb({ elapsed: this.elapsed, delta });
+        }
+      }
+
+      onTick(cb) {
+        this._callbacks.add(cb);
+        return () => this._callbacks.delete(cb); 
+      }
+
+      reset() {
+        this.elapsed = 0;
+        this._lastTime = performance.now();
+      }
+
+      pause() {
+        super.stop();
+      }
+
+      resume() {
+        this._lastTime = performance.now();
+        super.start();
+      }
+    }
+
+    const clock = (tickMs) => new Clock(tickMs);
+
+
+    /* 
+
+        const clock = new Clock(200);
+
+        clock.onTick(({ elapsed, delta }) => {
+          console.log(`Elapsed: ${elapsed.toFixed(0)}ms, Delta: ${delta.toFixed(0)}ms`);
+        });
+
+        clock.start();
+
+        setTimeout(() => clock.pause(), 1000);  
+        setTimeout(() => clock.resume(), 2000); 
+
+    */
+
+    class TimeScheduler {
+      constructor(tasks = [], { repeat = 1, loop = false } = {}) {
+        this.tasks = tasks;
+        this.repeat = repeat;
+        this.loop = loop;
+
+        this.stopped = false;
+        this.running = false;
+
+        // lifecycle hooks
+        this.onStart = null;
+        this.onTask = null;
+        this.onEnd = null;
+      }
+
+      async run() {
+        if (this.running) return;
+        this.running = true;
+        this.stopped = false;
+
+        if (this.onStart) this.onStart();
+
+        let repeatCount = this.repeat;
+
+        do {
+          for (const task of this.tasks) {
+            if (this.stopped) return;
+
+            if (Array.isArray(task)) {
+              // Parallel tasks
+              await Promise.all(
+                task.map(({ fn, delay = 0 }) =>
+                  new Promise(async (resolve) => {
+                    if (delay > 0) await new Promise(r => setTimeout(r, delay));
+                    if (this.onTask) this.onTask(fn);
+                    await fn();
+                    resolve();
+                  })
+                )
+              );
+            } else {
+              // Single task
+              const { fn, delay = 0 } = task;
+              if (delay > 0) await new Promise(r => setTimeout(r, delay));
+              if (this.onTask) this.onTask(fn);
+              await fn();
+            }
+          }
+        } while (this.loop && !this.stopped && (repeatCount === Infinity || repeatCount-- > 1));
+
+        if (!this.stopped && this.onEnd) this.onEnd();
+        this.running = false;
+      }
+
+      stop() {
+        this.stopped = true;
+        this.running = false;
+      }
+
+      addTask(task) {
+        this.tasks.push(task);
+      }
+
+      clearTasks() {
+        this.tasks = [];
+      }
+    }
+
+    const Scheduler = (tasks, { repeat = null} = {}) => new TimeScheduler(tasks, { repeat});
+
+    const step_fps = (step_or_fps) => 1000 / step_or_fps;
+
+    const debounce=(fn,delay=1000)=>{
+        return (...args) => setTimeout(()=>fn(...args),delay);
+    };
+    const throttle=(fn,delay)=>{
+        let lastTime=0;
+        return (...args) => {
+            const now = new Date().getTime();
+            if(now-lastTime < delay) return;
+            lastTime = now;
+            fn(...args); 
+        }
+    };
+
+    function timeout(ms, fn) {
+      let id;
+      const promise = new Promise((resolve) => {
+        id = setTimeout(() => {
+          if (fn) fn();
+          resolve();
+        }, ms);
+      });
+
+      return {
+        id,
+        clear: () => clearTimeout(id),
+        promise
+      };
+    }
+
+    const sleep= ms => new Promise(res => setTimeout(res, ms));
+
+    // use it with await
+
+    class TimeLoop {
+      constructor(callback, { step = 1000, t0 = 0, t1 = Infinity, autoplay = true } = {}) {
+        this.callback = callback;
+        this.cache = {
+          isRunning: false,
+          id: null,
+          last_tick: null,
+          step,
+          t0,
+          t1,
+          autoplay,
+          pauseTime: null,
+          frame : 0,
+        };
+
+        if (autoplay) {
+          t0 ? this.startAfter(t0) : this.start();
+          if (t1 !== Infinity) this.stopAfter(t1);
+        }
+      }
+
+      get frame(){
+        return this.cache.frame;
+      }
+      get elapsed(){
+        return this.cache.elapsed;
+      }
+
       start() {
         if (!this.cache.isRunning) {
-          this.i=0;
+          this.cache.frame = 0;
           this.cache.isRunning = true;
-          this.cache.t0 = Date.now();
+          this.cache.last_tick = Date.now();
           this.animate();
         }
         return this;
       }
+
       pause() {
         if (this.cache.isRunning) {
-          clearTimeout(this.cache.AnimationId);
+          clearTimeout(this.cache.id);
           this.cache.isRunning = false;
+          this.cache.pauseTime = Date.now();
         }
         return this;
       }
-      stop(){
-        this.pause();
-        this.i=0;
+
+      resume() {
+        if (!this.cache.isRunning) {
+          this.cache.isRunning = true;
+          if (this.cache.pauseTime) {
+            // adjust start time so delta stays consistent
+            const pausedDuration = Date.now() - this.cache.pauseTime;
+            this.cache.last_tick += pausedDuration;
+          }
+          this.animate();
+        }
         return this;
       }
-      resume(){
-        this.cache.isRunning=true;
-        this.animate();
+
+      stop() {
+        this.pause();
+        this.cache.frame = 0;
         return this;
       }
-      startAfter(t=1000){
-        setTimeout(this.start.bind(this),t);
+
+      startAfter(t = 1000) {
+        setTimeout(() => this.start(), t);
         return this;
       }
-      stopAfter(t=1000){
-        setTimeout(this.stop.bind(this),t);
-        return this;   
+
+      stopAfter(t = 1000) {
+        setTimeout(() => this.stop(), t);
+        return this;
       }
+
       animate = () => {
         if (this.cache.isRunning) {
           const now = Date.now();
-          const delta = now - this.cache.t0;
-          if (delta > this.cache.step) {
+          const delta = now - this.cache.last_tick;
+
+          if (delta >= this.cache.step) {
+            this.cache.elapsed = now - (this.cache.t0 || 0);
             this.callback(this);
-            this.i++;
-            this.cache.t0 = now - (delta % this.cache.step);
+            this.cache.frame++;
+            this.cache.last_tick = now - (delta % this.cache.step);
           }
-          this.cache.AnimationId = setTimeout(this.animate, 0);
-        }  }
-    }
-    const useFps = fps => 1000/fps;
-    const useTimeLoop = (callback, step, startTime, endTime, started) => new ZikoTimeLoop(callback, step, startTime, endTime, started);
-
-    const Ease={
-        Linear:function(t){
-            return t;
-        },
-        InSin(t){
-            return 1 - Math.cos((t * Math.PI) / 2);
-        },
-        OutSin(t){
-            return Math.sin((t * Math.PI) / 2);
-        },
-        InOutSin(t){
-            return  -(Math.cos(Math.PI * t) - 1) / 2;
-        },
-        InQuad(t){
-            return t**2;
-        },
-        OutQuad(t){
-            return 1 - Math.pow((1 - t),2)
-        },
-        InOutQuad(t){
-            return t < 0.5 ? 2 * Math.pow(t,2) : 1 - Math.pow(-2 * t + 2, 2) / 2;
-        },
-        InCubic(t){
-            return t**3;    
-        },
-        OutCubic(t){
-            return 1 - Math.pow((1 - t),3)
-        },
-        InOutCubic(t){
-            return t < 0.5 ? 4 * Math.pow(t,3) : 1 - Math.pow(-2 * t + 2, 3) / 2;
-        },
-        InQuart(t){
-            return t**4;
-        },
-        OutQuart(t){
-            return 1 - Math.pow((1 - t),4);
-        },
-        InOutQuart(t){
-            return t < 0.5 ? 8 * Math.pow(t,4) : 1 - Math.pow(-2 * t + 2, 4) / 2;
-        },
-        InQuint(t){
-            return t**5;
-        },
-        OutQuint(t){
-            return 1 - Math.pow((1 - t),5);
-        },
-        InOutQuint(t){
-            return t < 0.5 ? 16 * Math.pow(t,5) : 1 - Math.pow(-2 * t + 2, 5) / 2;
-        },
-        InExpo(t){
-            return t === 0 ? 0 : Math.pow(2, 10 * t - 10);
-        },
-        OutExpo(t){
-            return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
-        },
-        InOutExpo(t){
-            return t === 0? 0: t === 1? 1: t < 0.5 ? Math.pow(2, 20 * t - 10) / 2: (2 - Math.pow(2, -20 * t + 10)) / 2;
-        },
-        InCirc(t){
-            return 1 - Math.sqrt(1 - Math.pow(t, 2));
-        },
-        OutCirc(t){
-            return Math.sqrt(1 - Math.pow(t - 1, 2));
-        },
-        InOutCic(t){
-            return t < 0.5? (1 - Math.sqrt(1 - Math.pow(2 * t, 2))) / 2: (Math.sqrt(1 - Math.pow(-2 * t + 2, 2)) + 1) / 2;
-        },
-        Arc(t){
-            return 1 - Math.sin(Math.acos(t));
-        },
-        Back(t){
-            // To Be Changed
-            let x=1;
-            return Math.pow(t, 2) * ((x + 1) * t - x);  
-        },
-        Elastic(t){
-            return -2*Math.pow(2, 10 * (t - 1)) * Math.cos(20 * Math.PI * t / 3 * t);
-        },
-        InBack(t){
-            const c1 = 1.70158;
-            const c3 = c1 + 1;
-            return c3 *Math.pow(t,3)- c1 * (t**2);      
-        },
-        OutBack(t){
-            const c1 = 1.70158;
-            const c3 = c1 + 1;
-            return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);     
-        },
-        InOutBack(t){
-            const c1 = 1.70158;
-            const c2 = c1 * 1.525;
-            return t < 0.5
-            ? (Math.pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2)) / 2
-            : (Math.pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2;        
-        },
-        InElastic(t){
-            const c4 = (2 * Math.PI) / 3;return t === 0
-            ? 0
-            : t === 1
-            ? 1
-            : -Math.pow(2, 10 * t - 10) * Math.sin((t * 10 - 10.75) * c4);
-        },
-        OutElastic(t){
-            const c4 = (2 * Math.PI) / 3;
-            return t === 0
-            ? 0
-            : t === 1
-            ? 1
-            : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
-        },
-        InOutElastic(t){
-            const c5 = (2 * Math.PI) / 4.5;
-            return t === 0
-            ? 0
-            : t === 1
-            ? 1
-            : t < 0.5
-            ? -(Math.pow(2, 20 * t - 10) * Math.sin((20 * t - 11.125) * c5)) / 2
-            : (Math.pow(2, -20 * t + 10) * Math.sin((20 * t - 11.125) * c5)) / 2 + 1;
-        },
-        InBounce(t){
-            return 1 - Ease.OutBounce(1-t);
-        },
-        OutBounce(t){
-            const n1 = 7.5625;
-            const d1 = 2.75;
-            if (t < 1 / d1) {
-                return n1 * t * t;
-            } else if (t < 2 / d1) {
-                return n1 * (t -= 1.5 / d1) * t + 0.75;
-            } else if (t < 2.5 / d1) {
-                return n1 * (t -= 2.25 / d1) * t + 0.9375;
-            } else {
-                return n1 * (t -= 2.625 / d1) * t + 0.984375;
-            }
 
-        },
-        InOutBounce(t){
-            return t < 0.5
-            ? (1 - Ease.OutBounce(1 - 2 * t)) / 2
-            : (1 + Ease.OutBounce(2 * t - 1)) / 2;
+          this.cache.id = setTimeout(this.animate, 0);
         }
-    };
+      }
+    }
+
+    const loop = (callback, options = {}) => new TimeLoop(callback, options);
+
+
+    // Helpers
+    // const useFps = (fps) => 1000 / fps;
+
+    // const _loop = loop( e => {
+    //   console.log("Frame:", e.frame, " Elapsed: ", e.elapsed);
+    // });
 
     const time_memory_Taken = (callback) => {
         const t0 = Date.now();
@@ -5128,6 +5273,7 @@
         }
       };
 
+    // import Ease from "./ease.js";
     const wait=(delayInMS)=>{
         return new Promise((resolve) => setTimeout(resolve, delayInMS));
     };
@@ -5138,93 +5284,6 @@
         return r;
     };
 
-    class ZikoTimeAnimation{
-        constructor(callback,ease=Ease.Linear,step=50,{t=[0,null],start=true,duration=3000}={}){
-            this.cache={
-                isRunning:false,
-                AnimationId:null,
-                startTime:null,
-                ease,
-                step,
-                intervall:t,
-                started:start,
-                duration
-            };
-            this.t=0;
-            this.tx=0;
-            this.ty=0;
-            this.i=0;
-            this.callback=callback;
-        }
-        #animation_handler(){
-                this.t+=this.cache.step;
-                this.i++;
-                this.tx=map(this.t,0,this.cache.duration,0,1);
-                this.ty=this.cache.ease(this.tx);
-                this.callback(this);
-                if(this.t>=this.cache.duration){
-                    clearInterval(this.cache.AnimationId);
-                    this.cache.isRunning=false;
-                }
-        }
-        reset(restart=true){
-            this.t=0;
-            this.tx=0;
-            this.ty=0;
-            this.i=0;
-            if(restart)this.start();
-            return this;
-        }
-        #animate(reset=true){
-            if(!this.cache.isRunning){
-                if(reset)this.reset(false);
-                this.cache.isRunning=true;
-                this.cache.startTime = Date.now();
-                this.cache.AnimationId=setInterval(this.#animation_handler.bind(this),this.cache.step);
-            }
-            return this;
-        }
-        start(){
-            this.#animate(true);
-            return this;
-        }
-        pause(){
-            if (this.cache.isRunning) {
-                clearTimeout(this.cache.AnimationId);
-                this.cache.isRunning = false;
-              }
-            return this;
-        }
-        resume(){
-            this.#animate(false);
-            return this;
-        }
-        stop(){
-            this.pause();
-            this.reset(false);
-            return this;
-        }
-        // clear(){
-        // }
-        // stream(){
-        // }
-    }
-
-    const useAnimation=(callback,ease=Ease.Linear,step=50,config)=>new ZikoTimeAnimation(callback,ease=Ease.Linear,step=50,config);
-
-    const debounce=(fn,delay=1000)=>{
-        return (...args) => setTimeout(()=>fn(...args),delay);
-    };
-    const throttle=(fn,delay)=>{
-        let lastTime=0;
-        return (...args) => {
-            const now = new Date().getTime();
-            if(now-lastTime < delay) return;
-            lastTime = now;
-            fn(...args); 
-        }
-    };
-
     class ZikoApp {
         constructor({head = null, wrapper = null, target = null}){
             this.head = head;
@@ -5440,6 +5499,70 @@
        return commonPath;
     }
 
+    function useDerived(deriveFn, sources) {
+        let value = deriveFn(...sources.map(s => s().value));
+        const subscribers = new Set();
+        let paused = false;
+
+        function getValue() {
+            return {
+                value,
+                isStateGetter: () => true,
+                _subscribe: (fn, UIElement) => {
+                    subscribers.add(fn);
+
+                    const observer = new MutationObserver(() => {
+                        if (!document.body.contains(UIElement.element)) {
+                            subscribers.delete(fn);
+                            observer.disconnect();
+                        }
+                    });
+
+                    observer.observe(document.body, { childList: true, subtree: true });
+                },
+            };
+        }
+
+        function setValue(newValue) {
+            if (paused) return;
+            if (typeof newValue === "function") newValue = newValue(value);
+            if (newValue !== value) {
+                value = newValue;
+                subscribers.forEach(fn => fn(value));
+            }
+        }
+
+        const controller = {
+            pause: () => { paused = true; },
+            resume: () => { paused = false; },
+            clear: () => { subscribers.clear(); },
+            force: (newValue) => {
+                if (typeof newValue === "function") newValue = newValue(value);
+                value = newValue;
+                subscribers.forEach(fn => fn(value));
+            },
+            getSubscribers: () => new Set(subscribers),
+        };
+
+        // Subscribe to source states
+        sources.forEach(source => {
+            const srcValue = source(); // getValue()
+            srcValue._subscribe(() => {
+                if (!paused) {
+                    const newVal = deriveFn(...sources.map(s => s().value));
+                    if (newVal !== value) {
+                        value = newVal;
+                        subscribers.forEach(fn => fn(value));
+                    }
+                }
+            }, { element: document.body }); // dummy UIElement
+        });
+
+        return [getValue, setValue, controller];
+    }
+
+    const useReactive = (nested_value) => mapfun$1(n => useState(n), nested_value);
+
     class ZikoUseChannel{
         constructor(name = ""){
             this.channel = new BroadcastChannel(name);
@@ -5679,27 +5802,67 @@
     }
 
     exports.App = App;
+    exports.Arc = Arc;
+    exports.Back = Back;
     exports.Base = Base;
     exports.Canvas = Canvas;
+    exports.Clock = Clock;
     exports.Combinaison = Combinaison;
     exports.Complex = Complex;
+    exports.Discret = Discret;
     exports.E = E;
     exports.EPSILON = EPSILON;
-    exports.Ease = Ease;
+    exports.Elastic = Elastic;
     exports.FileBasedRouting = FileBasedRouting;
     exports.Flex = Flex;
     exports.Grid = Grid$1;
     exports.HTMLWrapper = HTMLWrapper;
+    exports.InBack = InBack;
+    exports.InBounce = InBounce;
+    exports.InCirc = InCirc;
+    exports.InCubic = InCubic;
+    exports.InElastic = InElastic;
+    exports.InExpo = InExpo;
+    exports.InOutBack = InOutBack;
+    exports.InOutBounce = InOutBounce;
+    exports.InOutCirc = InOutCirc;
+    exports.InOutCubic = InOutCubic;
+    exports.InOutElastic = InOutElastic;
+    exports.InOutExpo = InOutExpo;
+    exports.InOutQuad = InOutQuad;
+    exports.InOutQuart = InOutQuart;
+    exports.InOutQuint = InOutQuint;
+    exports.InOutSin = InOutSin;
+    exports.InQuad = InQuad;
+    exports.InQuart = InQuart;
+    exports.InQuint = InQuint;
+    exports.InSin = InSin;
+    exports.Linear = Linear;
     exports.Logic = Logic$1;
     exports.Matrix = Matrix;
-    exports.PI = PI$1;
+    exports.OutBack = OutBack;
+    exports.OutBounce = OutBounce;
+    exports.OutCirc = OutCirc;
+    exports.OutCubic = OutCubic;
+    exports.OutElastic = OutElastic;
+    exports.OutExpo = OutExpo;
+    exports.OutQuad = OutQuad;
+    exports.OutQuart = OutQuart;
+    exports.OutQuint = OutQuint;
+    exports.OutSin = OutSin;
+    exports.PI = PI$2;
     exports.Permutation = Permutation;
     exports.Random = Random;
     exports.SPA = SPA;
     exports.SVGWrapper = SVGWrapper;
-    exports.Str = Str;
+    exports.Scheduler = Scheduler;
+    exports.Step = Step;
     exports.Suspense = Suspense;
     exports.Svg = Svg;
+    exports.Tick = Tick;
+    exports.TimeAnimation = TimeAnimation;
+    exports.TimeLoop = TimeLoop;
+    exports.TimeScheduler = TimeScheduler;
     exports.UIElement = UIElement;
     exports.UINode = UINode;
     exports.Utils = Utils;
@@ -5733,10 +5896,11 @@
     exports.__ZikoEvent__ = __ZikoEvent__;
     exports.abs = abs;
     exports.accum = accum;
-    exports.acos = acos;
+    exports.acos = acos$1;
     exports.acosh = acosh;
     exports.acot = acot;
     exports.add = add;
+    exports.animation = animation;
     exports.arange = arange;
     exports.arr2str = arr2str;
     exports.asin = asin;
@@ -5758,14 +5922,13 @@
     exports.cartesianProduct = cartesianProduct;
     exports.ceil = ceil;
     exports.clamp = clamp;
+    exports.clock = clock;
     exports.combinaison = combinaison;
     exports.complex = complex;
-    exports.cos = cos;
+    exports.cos = cos$1;
     exports.cosh = cosh;
     exports.cot = cot;
     exports.coth = coth;
-    exports.count = count;
-    exports.countWords = countWords;
     exports.csc = csc;
     exports.csv2arr = csv2arr;
     exports.csv2json = csv2json;
@@ -5784,6 +5947,7 @@
     exports.hypot = hypot;
     exports.inRange = inRange;
     exports.isApproximatlyEqual = isApproximatlyEqual;
+    exports.isStateGetter = isStateGetter;
     exports.json2arr = json2arr;
     exports.json2css = json2css;
     exports.json2csv = json2csv;
@@ -5796,6 +5960,7 @@
     exports.linspace = linspace;
     exports.ln = ln;
     exports.logspace = logspace;
+    exports.loop = loop;
     exports.map = map;
     exports.mapfun = mapfun$1;
     exports.matrix = matrix;
@@ -5811,23 +5976,23 @@
     exports.obj2str = obj2str;
     exports.ones = ones;
     exports.pgcd = pgcd;
-    exports.pow = pow;
+    exports.pow = pow$1;
     exports.powerSet = powerSet;
     exports.ppcm = ppcm;
     exports.preload = preload;
     exports.prod = prod;
     exports.rad2deg = rad2deg;
-    exports.removeExtraSpace = removeExtraSpace;
     exports.round = round;
     exports.sec = sec;
     exports.sig = sig;
     exports.sign = sign;
-    exports.sin = sin;
+    exports.sin = sin$1;
     exports.sinc = sinc;
     exports.sinh = sinh;
-    exports.sqrt = sqrt;
+    exports.sleep = sleep;
+    exports.sqrt = sqrt$1;
     exports.sqrtn = sqrtn;
-    exports.str = str;
+    exports.step_fps = step_fps;
     exports.sub = sub;
     exports.subSet = subSet;
     exports.sum = sum;
@@ -5840,26 +6005,28 @@
     exports.tanh = tanh;
     exports.text = text;
     exports.throttle = throttle;
+    exports.tick = tick;
     exports.timeTaken = timeTaken;
     exports.time_memory_Taken = time_memory_Taken;
-    exports.useAnimation = useAnimation;
+    exports.timeout = timeout;
     exports.useChannel = useChannel;
     exports.useCustomEvent = useCustomEvent;
+    exports.useDerived = useDerived;
     exports.useEventEmitter = useEventEmitter;
     exports.useFavIcon = useFavIcon;
-    exports.useFps = useFps;
     exports.useHashEvent = useHashEvent;
     exports.useHead = useHead;
     exports.useInputEvent = useInputEvent;
     exports.useLocaleStorage = useLocaleStorage;
     exports.useMediaQuery = useMediaQuery;
     exports.useMeta = useMeta;
+    exports.useReactive = useReactive;
     exports.useRoot = useRoot;
     exports.useSessionStorage = useSessionStorage;
+    exports.useState = useState;
     exports.useSuccesifKeys = useSuccesifKeys;
     exports.useSwipeEvent = useSwipeEvent;
     exports.useThread = useThread;
-    exports.useTimeLoop = useTimeLoop;
     exports.useTitle = useTitle;
     exports.wait = wait;
     exports.waitForUIElm = waitForUIElm;