ziko 0.39.0 → 0.40.0

package/dist/ziko.mjs

@@ -2,28 +2,28 @@
 /*
   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
 */
 
-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,
@@ -61,20 +61,20 @@ const mapfun$1=(fun,...X)=>{
             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)
             }
@@ -315,7 +315,7 @@ const linspace=(a,b,n=abs(b-a)+1,endpoint=true)=>{
     }
 };
 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;
@@ -1100,10 +1100,69 @@ const register = (target, ...mixins) => {
   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) {
@@ -1125,7 +1184,7 @@ const AttrsMethods = {
     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) {
@@ -1135,7 +1194,7 @@ const AttrsMethods = {
 };
 
 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();
@@ -1694,19 +1753,38 @@ const IndexingMethods = {
   },
 };
 
-// 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){
@@ -3113,18 +3191,14 @@ const tags = new Proxy({}, {
     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);
@@ -3716,175 +3790,6 @@ function trimKeys(obj) {
     }, 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();
@@ -4043,7 +3948,7 @@ class Matrix extends ZikoMath{
                         .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;
@@ -4566,7 +4471,7 @@ class Complex extends ZikoMath{
             }
             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;
@@ -4574,15 +4479,15 @@ class Complex extends ZikoMath{
             }
             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"){
@@ -4622,7 +4527,7 @@ class Complex extends ZikoMath{
         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++) {
@@ -4650,8 +4555,8 @@ class Complex extends ZikoMath{
         }
         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) {
@@ -4660,23 +4565,23 @@ class Complex extends ZikoMath{
         }
         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() {
@@ -4698,10 +4603,10 @@ class Complex extends ZikoMath{
         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);
@@ -4710,14 +4615,14 @@ class Complex extends ZikoMath{
         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";
@@ -4748,12 +4653,12 @@ const complex=(a,b)=>{
 // } 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);
@@ -4761,14 +4666,14 @@ const pow=(x,n)=>{
             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;
         }
@@ -4796,14 +4701,14 @@ const sqrtn=(x,n)=>{
 };
 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);
@@ -4831,7 +4736,7 @@ const atan2=(x,y,rad=true)=>{
         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;
         }
@@ -4857,229 +4762,469 @@ const hypot=(...x)=>{
     )
 };
 
-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();
@@ -5122,6 +5267,7 @@ const waitForUIElm=(UIElement)=>{
     }
   };
 
+// import Ease from "./ease.js";
 const wait=(delayInMS)=>{
     return new Promise((resolve) => setTimeout(resolve, delayInMS));
 };
@@ -5132,93 +5278,6 @@ const timeTaken = callback => {
     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;
@@ -5434,6 +5493,70 @@ function findCommonPath(paths) {
    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);
@@ -5672,4 +5795,4 @@ if(globalThis?.document){
     document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());
 }
 
-export { App, Base, Canvas, Combinaison, Complex, E, EPSILON, Ease, FileBasedRouting, Flex, Grid$1 as Grid, HTMLWrapper, Logic$1 as Logic, Matrix, PI$1 as PI, Permutation, Random, SPA, SVGWrapper, Str, Suspense, Svg, UIElement, UINode, Utils, ZikoApp, ZikoCustomEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventCustom, ZikoEventDrag, ZikoEventFocus, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventTouch, ZikoEventWheel, ZikoHead, ZikoMutationObserver, ZikoSPA, ZikoUICanvas, ZikoUIFlex, ZikoUIGrid, ZikoUIHTMLWrapper, ZikoUISVGWrapper, ZikoUISuspense, ZikoUISvg, ZikoUIText, ZikoUIXMLWrapper, ZikoUseRoot, __ZikoEvent__, abs, accum, acos, acosh, acot, add, arange, arr2str, asin, asinh, atan, atan2, atanh, bindClickEvent, bindClipboardEvent, bindCustomEvent, bindDragEvent, bindFocusEvent, bindHashEvent, bindKeyEvent, bindMouseEvent, bindPointerEvent, bindTouchEvent, bindWheelEvent, cartesianProduct, ceil, clamp, combinaison, complex, cos, cosh, cot, coth, count, countWords, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, deg2rad, div, e, fact, floor, geomspace, getEvent, hypot, inRange, isApproximatlyEqual, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linspace, ln, logspace, map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ones, pgcd, pow, powerSet, ppcm, preload, prod, rad2deg, removeExtraSpace, round, sec, sig, sign, sin, sinc, sinh, sqrt, sqrtn, str, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, timeTaken, time_memory_Taken, useAnimation, useChannel, useCustomEvent, useEventEmitter, useFavIcon, useFps, useHashEvent, useHead, useInputEvent, useLocaleStorage, useMediaQuery, useMeta, useRoot, useSessionStorage, useSuccesifKeys, useSwipeEvent, useThread, useTimeLoop, useTitle, wait, waitForUIElm, waitForUIElmSync, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };
+export { App, Arc, Back, Base, Canvas, Clock, Combinaison, Complex, Discret, E, EPSILON, Elastic, FileBasedRouting, Flex, Grid$1 as Grid, HTMLWrapper, InBack, InBounce, InCirc, InCubic, InElastic, InExpo, InOutBack, InOutBounce, InOutCirc, InOutCubic, InOutElastic, InOutExpo, InOutQuad, InOutQuart, InOutQuint, InOutSin, InQuad, InQuart, InQuint, InSin, Linear, Logic$1 as Logic, Matrix, OutBack, OutBounce, OutCirc, OutCubic, OutElastic, OutExpo, OutQuad, OutQuart, OutQuint, OutSin, PI$2 as PI, Permutation, Random, SPA, SVGWrapper, Scheduler, Step, Suspense, Svg, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement, UINode, Utils, ZikoApp, ZikoCustomEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventCustom, ZikoEventDrag, ZikoEventFocus, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventTouch, ZikoEventWheel, ZikoHead, ZikoMutationObserver, ZikoSPA, ZikoUICanvas, ZikoUIFlex, ZikoUIGrid, ZikoUIHTMLWrapper, ZikoUISVGWrapper, ZikoUISuspense, ZikoUISvg, ZikoUIText, ZikoUIXMLWrapper, ZikoUseRoot, __ZikoEvent__, abs, accum, acos$1 as acos, acosh, acot, add, animation, arange, arr2str, asin, asinh, atan, atan2, atanh, bindClickEvent, bindClipboardEvent, bindCustomEvent, bindDragEvent, bindFocusEvent, bindHashEvent, bindKeyEvent, bindMouseEvent, bindPointerEvent, bindTouchEvent, bindWheelEvent, cartesianProduct, ceil, clamp, clock, combinaison, complex, cos$1 as cos, cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, deg2rad, div, e, fact, floor, geomspace, getEvent, hypot, inRange, isApproximatlyEqual, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linspace, ln, logspace, loop, map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ones, pgcd, pow$1 as pow, powerSet, ppcm, preload, prod, rad2deg, round, sec, sig, sign, sin$1 as sin, sinc, sinh, sleep, sqrt$1 as sqrt, sqrtn, step_fps, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, useChannel, useCustomEvent, useDerived, useEventEmitter, useFavIcon, useHashEvent, useHead, useInputEvent, useLocaleStorage, useMediaQuery, useMeta, useReactive, useRoot, useSessionStorage, useState, useSuccesifKeys, useSwipeEvent, useThread, useTitle, wait, waitForUIElm, waitForUIElmSync, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };