ziko 0.38.1 → 0.40.0

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sun Aug 17 2025 21:52:49 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;
@@ -1049,7 +1049,7 @@
         }
     };
 
-    class ZikoUINode {
+    class UINode {
         constructor(node){
             this.cache = {
                 node
@@ -1063,7 +1063,7 @@
         } 
     }
 
-    globalThis.node = (node) => new ZikoUINode(node);
+    globalThis.node = (node) => new UINode(node);
 
     function register_to_class(target, ...mixins){
         mixins.forEach(n => _register_to_class_(target, n));
@@ -1106,7 +1106,114 @@
       else register_to_instance(target, ...mixins);
       };
 
-    class ZikoUIText extends ZikoUINode {
+    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) {
+        if(name instanceof Object){
+          const [names,values]=[Object.keys(name),Object.values(name)];
+          for(let i=0;i<names.length;i++){
+            if(values[i] instanceof Array)value[i] = values[i].join(" ");
+            _set_attrs_.call(this, names[i], values[i]);
+          }
+        }
+        else {
+          if(value instanceof Array) value = value.join(" ");
+          _set_attrs_.call(this, name, value);
+        }
+        return this;
+      },
+      removeAttr(...names) {
+        for(let i=0;i<names.length;i++)this.element?.removeAttribute(names[i]);
+        return this;
+      },
+      getAttr(name){
+        name = is_camelcase(name) ? camel2hyphencase(name) : name;
+        return this.element.attributes[name].value;
+      },
+      setContentEditable(bool = true) {
+        this.setAttr("contenteditable", bool);
+        return this;
+      }
+    };
+
+    function _set_attrs_(name, value){
+        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();
+            getter._subscribe(
+                (newValue) => this.element?.setAttribute(name, newValue),
+                this 
+            );
+        }
+        else this.element?.setAttribute(name, value);
+        Object.assign(this.cache.attributes, {[name]:value});   
+    }
+
+    class ZikoUIText extends UINode {
         constructor(...value) {
           super("span", "text", false, ...value);
           this.element = globalThis?.document?.createTextNode(...value);
@@ -1652,723 +1759,175 @@
       },
     };
 
-    class ZikoUseStyle {
-      constructor(style = {}, use = style.hasOwnProperty("default")? "default" : Object.keys(style)[0], id = 0) {
-        this.id = "Ziko-Style-" + id;
-        this.keys = new Set();
-        this.styles = {
-          default: {
-            fontSize: "1em",
-            color : "green"
-          },
-          other: {
-            fontSize : "2em",
-            color : "cyan" 
-          }
-        };
-        style && this.add(style);
-        use && this.use(use);
-      }
-
-      get current() {
-        return [...this.keys].reduce((key, value) => {
-          key[value] = `var(--${value}-${this.id})`;
-          return key;
-        }, {});
-      }
-
-      add(name, style = {}) {
-        if (name && typeof name === 'object' && !Array.isArray(name)) {
-          Object.assign(this.styles, name);
-        } else if (typeof name === 'string') {
-          Object.assign(this.styles, { [name]: style });
-        }
-        return this;
-      }
-
-      #useStyleIndex(index) {
-        const keys = Object.keys(this.styles);
-        for (let a in this.styles[keys[index]]) {
-          if (Object.prototype.hasOwnProperty.call(this.styles[keys[index]], a)) {
-            document.documentElement.style.setProperty(`--${a}-${this.id}`, this.styles[keys[index]][a]);
-            this.keys.add(a);
-          }
-        }
-        return this;
-      }
-
-      #useStyleName(name) {
-        if (!this.styles[name]) return this;
-        for (let a in this.styles[name]) {
-          if (Object.prototype.hasOwnProperty.call(this.styles[name], a)) {
-            document.documentElement.style.setProperty(`--${a}-${this.id}`, this.styles[name][a]);
-            this.keys.add(a);
-          }
-        }
-        return this;
-      }
-
-      #useStyleObject(style) {
-        for (let a in style) {
-          if (Object.prototype.hasOwnProperty.call(style, a)) {
-            document.documentElement.style.setProperty(`--${a}-${this.id}`, style[a]);
-            this.keys.add(a);
-          }
-        }
-        return this;
-      }
-
-      use(style) {
-        if (typeof style === "number") return this.#useStyleIndex(style);
-        if (typeof style === "string") return this.#useStyleName(style);
-        if (style && typeof style === "object") return this.#useStyleObject(style);
-        return this;
-      }
-    }
-
-    const useStyle = (styles, use, id) => new ZikoUseStyle(styles, use, id);
-
-    const addSuffixeToNumber=(value,suffixe="px")=>{
-      if(typeof value === "number") value+=suffixe;
-      if(value instanceof Array)value=value.map(n=>typeof n==="number"?n+=suffixe:n).join(" ");
-      return value;
-    };
-
-    class ZikoUIElementStyle{
-        constructor(defaultStyle={}){
-            this.target=null;
-            this.styles=new Map(
-                [["default",defaultStyle]]
-            );
-            this.cache={
-                isHidden:false,
-                isFaddedOut:false,
-                transformation:{
-                    Flip:[0,0,0],
-                    matrix:new Matrix([
-                        [1,0,0,0],
-                        [0,1,0,0],
-                        [0,0,1,0],
-                        [0,0,0,1]
-                    ])
-                }
-            };
-        }
+    const StyleMethods = {
         style(styles){
-            for(const [key, value] of Object.entries(styles)){
-                if(Str.isCamelCase(key)){
-                    delete styles[key];
-                    Object.assign(styles,{[Str.camel2hyphencase(key)]:value});
+            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});
             }
-            if(this?.target?.element?.style)Object.assign(this?.target?.element?.style, styles);
-            return this;
-        }
-        linkTo(target){
-            this.target=target;
-            return this;
-        }
-        use(name="default"){
-            this.style(this.styles.get(name));
-            return this;
-        }
-        update(name,styles){
-            const old=this.styles.get(name);
-            old?this.styles.set(name,Object.assign(old,styles)):this.styles.set(name,styles);
-            return this;
-        }
-        add(name,styles){
-            this.styles.set(name,styles);
             return this;
-        }
-        replace(name,styles){
-            this.styles.set(name,styles);
+        },
+        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;
         }
-        delete(...names){
-            names.forEach(n=>this.styles.delete(n));
-            return this;
+    };
+
+    function EVENT_CONTROLLER(e,EVENT,setter,push_object){
+        this.event=e;
+        if(this.cache.preventDefault[EVENT])e.preventDefault();
+        console.log({setter});
+        if(setter)setter();
+        if(this.cache.stream.enabled[EVENT]&&push_object)this.cache.stream.history[EVENT].push(push_object);
+        this.cache.callbacks[EVENT].map(n=>n(this));
+        return this;
+    }
+    class ZikoEvent{
+        constructor(target){
+            this.target=null;
+            this.setTarget(target);
+            this.__dispose=this.dispose.bind(this);
+            // this.EventIndex=Garbage.Pointer.data.length;
+            // Garbage.Pointer.data.push({event:this,index:this.EventIndex});
         }
-        updateDefaultStyle(){
-            const defaultStyle=Object.fromEntries(
-                Object.entries(this.target.element.style).filter(n=>isNaN(+n[0]))
-            );   
-            this.update("default",defaultStyle);
-            return this;
+        get targetElement(){
+            return this.target.element
         }
-        hover(styles){
-            //this.updateDefaultStyle()
-            if(styles)this.add("hover",styles);
-            this.target?.element?.addEventListener("pointerenter",()=>this.use("hover"));
-            this.target?.element?.addEventListener("pointerleave",()=>this.use("default"));
+        setTarget(UI){
+            this.target=UI;
             return this;
         }
-        // Checkers 
-        isInline(){
-            return getComputedStyle(this.target.element).display.includes("inline");
+        __handle(event,handler,dispose){
+            const EVENT=(event==="drag")?event:`${this.cache.prefixe}${event}`;
+            this.dispose(dispose);
+            this.targetElement?.addEventListener(EVENT,handler);
+            return this;   
         }
-        isBlock(){
-            return !(this.isInline());
+        __onEvent(event,dispose,...callbacks){
+            if(callbacks.length===0){
+                if(this.cache.callbacks.length>1){
+                    this.cache.callbacks.map(n=>e=>n.call(this,e));
+                }   
+                else {
+                    return this;
+                }
+            }
+            else this.cache.callbacks[event]=callbacks.map(n=>e=>n.call(this,e));
+            this.__handle(event,this.__controller[event],dispose);
+            return this;  
         }
-        // Size
-        size(width,height){
-            this.style({
-                width,
-                height
-            });
+        preventDefault(config={}){
+            Object.assign(this.cache.preventDefault,config);
             return this;
         }
-        width(w){
-            if(w instanceof Object){
-              if(w instanceof Array)w={min:w[0],max:w[1]};
-              if("min" in w || "max" in w){
-                let min= w.min ?? w.max;
-                let max= w.max ?? w.min;
-                min=addSuffixeToNumber(min,"px");
-                max=addSuffixeToNumber(max,"px"); 
-                this.style({ minWidth: min, maxWidth: max }, { target, maskVector });
-              }
-            }
-            else {
-              w=addSuffixeToNumber(w,"px");
-              this.style({width:w});
-            }
-            return this
-        }
-        height(h){
-            if(h instanceof Object){
-              if(h instanceof Array)h={min:h[0],max:h[1]};
-              if("min" in h || "max" in h){
-                let min= h.min ?? h.max;
-                let max= h.max ?? h.min;
-                min=addSuffixeToNumber(min,"px");
-                max=addSuffixeToNumber(max,"px"); 
-                this.style({ minHeight: min, maxHeight: max }, { target, maskVector });
-              }
-            }
-            else {
-              h=addSuffixeToNumber(h,"px");
-              this.style({height:h});
-            }
-            return this
-        } 
-        enableResize(h=false,v=false){
-            let resize="none";
-            if(h)v?resize="both":resize="horizontal";
-            else v?resize="vertical":resize="none";
-            this.style({
-                resize,
-                overflow:"hidden"
-            });
-            if(this.isInline()){
-                console.group("Ziko Issue : Temporarily Incompatible Method");
-                console.warn(".enableResize has no effect on inline elements!");
-                console.info("%cConsider using other display types such as block, inline-block, flex, or grid for proper resizing behavior.","color:gold;background-color:#3333cc;padding:5px");
-                console.groupEnd();
+        pause(config={}){
+            const all=Object.fromEntries(Object.keys(this.cache.stream.enabled).map(n=>[n,true]));
+            config={...all,...config};
+            for(let key in config){
+                if(config[key]){
+                    this.targetElement?.removeEventListener(`${this.cache.prefixe}${key}`,this.__controller[`${this.cache.prefixe}${key}`]);
+                    this.cache.paused[`${this.cache.prefixe}${key}`]=true;
+                }
             }
             return this;
-        }   
-        // Apparence
-        hide({after, target, maskVector } = {}){
-            if(typeof after==="number"){
-                const wrapper=()=>this.hide({target,maskVector});
-                setTimeout(wrapper, after);
-                clearTimeout(wrapper);
-            }
-            else {
-              this.cache.isHidden=true;
-              this.style({display:"none"},{target,maskVector});
+         }
+        resume(config={}){
+            const all=Object.fromEntries(Object.keys(this.cache.stream.enabled).map(n=>[n,true]));
+            config={...all,...config};
+            for(let key in config){
+                if(config[key]){
+                    this.targetElement?.addEventListener(`${this.cache.prefixe}${key}`,this.__controller[`${this.cache.prefixe}${key}`]);
+                    this.cache.paused[`${this.cache.prefixe}${key}`]=false;
+                }
             }
             return this;
-        }
-        show({after, target, maskVector } = {}){
-            if(typeof after==="number"){
-                const wrapper=()=>this.show({target,maskVector});
-                setTimeout(wrapper, after);
-                clearTimeout(wrapper);
-            }
-            else {
-              this.cache.isHidden=false;
-              this.style({display:""},{target,maskVector});
-            }
+         }
+        dispose(config={}){
+            this.pause(config);
             return this;
-        }
-        color(color){
-            this.style({color});
+         }
+        stream(config={}){
+            this.cache.stream.t0=Date.now();
+            const all=Object.fromEntries(Object.keys(this.cache.stream.enabled).map(n=>[n,true]));
+            config={...all,...config};
+            Object.assign(this.cache.stream.enabled,config);
             return this;
-        }
-        background(background){
-            this.style({background});
+         }
+        clear(config={}){
+            const all=Object.fromEntries(Object.keys(this.cache.stream.clear).map(n=>[n,true]));
+            config={...all,...config};
+            for(let key in config){
+                if(config[key]){
+                    this.cache.stream.history[key]=[];
+                }
+            }
             return this;
         }
-        backgroundColor(backgroundColor){
-            this.style({backgroundColor});
-            return this;
-        }
-        opacity(opacity, { target, maskVector } = {}) {
-            this.style({ opacity }, { target, maskVector });
-            return this;
-        }
-        // Placement
-        position(position){
-            this.style({position});
-            return this
-        }
-        display(disp, { target, maskVector } = {}) {
-            this.style({ display: disp }, { target, maskVector });
-            return this;
-        }
-        zIndex(z){
-            this.style({zIndex:z});
-            return this;
-        }
-        float(float, { target, maskVector } = {}) {
-            this.style({ float: float }, { target, maskVector });
-            return this;
-        }
-        // Box Model 
-        border(border = "1px solid red", { target, maskVector } = {}){
-            this.style({border}, { target, maskVector });
-            return this;
-        }
-        borderTop(borderTop = "1px solid red", { target, maskVector } = {}){
-            this.style({borderTop}, { target, maskVector });
-            return this;
-        }
-        borderRight(borderRight = "1px solid red", { target, maskVector } = {}){
-            this.style({borderRight}, { target, maskVector });
-            return this;
-        }
-        borderBottom(borderBottom = "1px solid red", { target, maskVector } = {}){
-            this.style({borderBottom}, { target, maskVector });
-            return this;
-        }
-        borderLeft(borderLeft = "1px solid red", { target, maskVector } = {}){
-            this.style({borderLeft}, { target, maskVector });
-            return this;
-        }
-        borderRadius(radius){
-            radius=addSuffixeToNumber(radius,"px");
-            this.style({ borderRadius: radius }, { target, maskVector });
-            return this;
-        }
-        margin(margin){
-            margin=addSuffixeToNumber(margin,"px");
-            this.style({ margin }, { target, maskVector });
-            return this;
-        }
-        marginTop(marginTop){
-            marginTop=addSuffixeToNumber(marginTop,"px");
-            this.style({marginTop});
-            return this;
-        }
-        marginRight(marginRight){
-            marginRight=addSuffixeToNumber(marginRight,"px");
-            this.style({marginRight});
-            return this;
-        }
-        marginBootom(marginBootom){
-            marginBootom=addSuffixeToNumber(marginBootom,"px");
-            this.style({marginBootom});
-            return this;
-        }
-        marginLeft(marginLeft){
-            marginLeft=addSuffixeToNumber(marginLeft,"px");
-            this.style({marginLeft});
-            return this;
-        }
-        padding(padding){
-            padding=addSuffixeToNumber(padding,"px");
-            this.style({padding});
-            return this;
-        }
-        paddingTop(paddingTop){
-            paddingTop=addSuffixeToNumber(paddingTop,"px");
-            this.style({paddingTop});
-            return this;
-        }
-        paddingRight(paddingRight){
-            paddingRight=addSuffixeToNumber(paddingRight,"px");
-            this.style({paddingRight});
-            return this;
-        }
-        paddingBootom(paddingBootom){
-            paddingBootom=addSuffixeToNumber(paddingBootom,"px");
-            this.style({paddingBootom});
-            return this;
-        }
-        paddingLeft(paddingLeft){
-            paddingLeft=addSuffixeToNumber(paddingLeft,"px");
-            this.style({paddingLeft});
-            return this;
-        }
-        // Typographie
-        font(font){
-            this.style({font});
-            return this;
-        }
-        fontFamily(fontFamily=""){
-            this.style({fontFamily});
-            return this;
-        }
-        fontSize(fontSize){
-            this.style({fontSize});
-            return this;
-        }
-        // Misc
-        cursor(type="pointer"){
-            this.style({ cursor: type });
-            return this;
-        }  
-        overflow(x,y){
-            const values=["hidden","auto"];
-            this.style({
-              overflowX:typeof x==="number"?values[x]:x,
-              overflowY:typeof y==="number"?values[y]:y
-            },{target,maskVector});
-            return this;
-        }
-        clip(polygon, { target, maskVector } = {}) {
-            if (typeof polygon === "string") polygon = "polygon(" + polygon + ")";
-            this.style({ clipPath: polygon }, { target, maskVector });
-            return this;
-        }
-        // Transfromations
-        fadeOut(transitionTimming = 1) {
-            this.style({ 
-              transition:`opacity ${transitionTimming/1000}s`, 
-              opacity: 0 
-            });
-            this.cache.isFaddedOut=true;
-            return this;
-        }
-        fadeIn(transitionTimming = 1) {
-            this.style({ 
-              transition: `opacity ${transitionTimming/1000}s`, 
-              opacity: 1 
-            });
-            this.cache.isFaddedOut=false;
-            return this;
-        }
-        toggleFade(t_in = 1000,t_out=t_in){
-            this.cache.isFaddedOut?this.fadeIn(t_in):this.fadeOut(t_out);
-            return this;
-        }
-        morphBorderRadius(newValue, transitionTimming){
-            this.style({ 
-                borderRadius: newValue,
-                transition: `borderRadius ${transitionTimming/1000}s`, 
-            });
-            return this;
-        }
-        #applyTransformMatrix(transitionTimming){
-            const transformMatrix = this.cache.transformation.matrix.arr.join(",");
-            this.style({
-                transform: `matrix3d(${transformMatrix})`,
-                "-webkit-transform": `matrix3d(${transformMatrix})`,
-                "-moz-transform": `matrix3d(${transformMatrix})`, 
-                "-ms-transform": `matrix3d(${transformMatrix})`, 
-                "-o-transform": `matrix3d(${transformMatrix})` 
-            });
-            if (transitionTimming != 0) this.style({ transition: `transform ${transitionTimming/1000}s ease` });
-        }
-        translate(dx, dy = dx ,dz = 0, transitionTimming = 0) {
-            this.cache.transformation.matrix.set(3,0,dx);
-            this.cache.transformation.matrix.set(3,1,dy);
-            this.cache.transformation.matrix.set(3,2,dz);
-            this.#applyTransformMatrix(transitionTimming);
-            return this;
-        }
-        translateX(dx, transitionTimming = 0) {
-            this.cache.transformation.matrix.set(3,0,dx);
-            this.#applyTransformMatrix(transitionTimming);
-            return this;
-        }
-        translateY(dy, transitionTimming = 0) {
-            this.cache.transformation.matrix.set(3,1,dy);
-            this.#applyTransformMatrix(transitionTimming);
-            return this;
-        }
-        translateZ(dz, transitionTimming = 0) {
-            const d=-1/this.cache.transformation.matrix[2][2];
-            this.cache.transformation.matrix.set(3,2,z);
-            this.cache.transformation.matrix.set(3,3,1-(dz/d));
-            this.#applyTransformMatrix(transitionTimming);
-            return this;
-        }
-        perspective(distance,transitionTimming=0){
-            const z=this.cache.transformation.matrix[3][2];
-            this.cache.transformation.matrix.set(2,2,-1/d);
-            this.cache.transformation.matrix.set(3,3,1-(z/distance));
-            this.#applyTransformMatrix(transitionTimming);
-            return this; 
-        }
-        scale(sx, sy = sx, transitionTimming = 0) {
-            this.cache.transformation.matrix.set(0,0,sx);
-            this.cache.transformation.matrix.set(1,1,sy);
-            // const transformMatrix = this.cache.transformation.matrix.arr.join(",");
-            this.#applyTransformMatrix(transitionTimming);
-            return this;
-        }
-        scaleX(x = 1 , transitionTimming = 0) {
-            this.cache.transformation.matrix.set(0,0,x);
-            // const transformMatrix = this.cache.transformation.matrix.arr.join(",");
-            this.#applyTransformMatrix(transitionTimming);
-            return this;
-        }
-        scaleY(y = 1, transitionTimming = 0) {
-            this.cache.transformation.matrix.set(1,1,y);
-            this.cache.transformation.matrix.arr.join(",");
-            this.#applyTransformMatrix(transitionTimming);
-            return this;
-        }
-        skew(x, y = x, transitionTimming = 0) {
-            this.cache.transformation.matrix.set(0,1,x);
-            this.cache.transformation.matrix.set(1,0,y);
-            this.cache.transformation.matrix.arr.join(",");
-            this.#applyTransformMatrix(transitionTimming);
-            return this;
-        }
-        skewX(x = 1 , transitionTimming = 0) {
-            this.cache.transformation.matrix.set(0,1,x);
-            this.cache.transformation.matrix.arr.join(",");
-            this.#applyTransformMatrix(transitionTimming);
-            return this;
-        }
-        skewY(y = 1, transitionTimming = 0) {
-            this.cache.transformation.matrix.set(1,0,y);
-            this.cache.transformation.matrix.arr.join(",");
-            this.#applyTransformMatrix(transitionTimming);
-            return this;
-        }
-        rotateX(rx, transitionTimming = 0) {
-            this.cache.transformation.matrix.set(1,1,cos(rx));
-            this.cache.transformation.matrix.set(1,2,-sin(rx));
-            this.cache.transformation.matrix.set(2,1,sin(rx));
-            this.cache.transformation.matrix.set(1,2,cos(rx));
-            this.#applyTransformMatrix(transitionTimming);   
-            return this;
-        }
-        rotateY(ry, transitionTimming = 0) {
-            this.cache.transformation.matrix.set(0,0,cos(ry));
-            this.cache.transformation.matrix.set(0,2,sin(ry));
-            this.cache.transformation.matrix.set(2,0,-sin(ry));
-            this.cache.transformation.matrix.set(2,2,cos(ry));
-            this.#applyTransformMatrix(transitionTimming);   
-            return this;
-        }
-        rotateZ(rz, transitionTimming = 0) {
-            this.cache.transformation.matrix.set(0,0,cos(rz));
-            this.cache.transformation.matrix.set(0,1,-sin(rz));
-            this.cache.transformation.matrix.set(1,0,sin(rz));
-            this.cache.transformation.matrix.set(1,1,cos(rz)); 
-            this.#applyTransformMatrix(transitionTimming);  
-            return this;
-        }
-        flipeX(transitionTimming = 1) {
-            this.cache.transformation.Flip[0] += 180;
-            this.cache.transformation.Flip[0] %= 360;
-            this.rotateX(this.cache.transformation.Flip[0], transitionTimming);
-            return this;
-        }
-        flipeY(transitionTimming = 1) {
-            this.cache.transformation.Flip[1] += 180 ;
-            this.cache.transformation.Flip[1] %= 360;
-            this.rotateY(this.cache.transformation.Flip[1], transitionTimming);
-            return this;
-          }
-        flipeZ(transitionTimming = 1) {
-            this.cache.transformation.Flip[2] += 180;
-            this.cache.transformation.Flip[2] %= 360;
-            this.rotateZ(this.cache.transformation.Flip[2], transitionTimming);
-            return this;
-        }
-        slideHeightIn(transitionTimming = 1, h = this.h) {
-            this.style({ transition: transitionTimming + "s", height: h });
-            return this;
-        }
-        slideHeightOut(transitionTimming = 1) {
-            this.style({ transition: transitionTimming + "s", height: 0 });
-            this.target?.element?.n("transitionend", () =>
-              this.style({ opacity: "none" }),
-            );
-            return this;
-          }
-        slideWidthIn(transitionTimming = 1, w = this.w) {
-            this.style({ transition: transitionTimming + "s", width: w });
-            return this;
-        }
-        slideWidthOut(transitionTimming = 1) {
-            this.style({ transition: transitionTimming + "s", width: 0 });
-            const wrapper=()=>{
-                this.style({ opacity: "none" });
-            };
-            this.target?.element?.addEventListener("transitionend",wrapper);
-            this.target?.element?.removeEventListener("transitionend",wrapper);
-            return this;
-        }
-        slideIn({ transitionTimming = 1, w = "100%", h = "auto" } = {}) {
-            this.style({
-              transition: transitionTimming + "s",
-              width: w,
-              height: h,
-              visibility: "visible",
-            });
-            return this;
-        }
-        slideOut({ transitionTimming = 1, width = 0, heightransitionTimming = 0 } = {}) {
-            this.style({
-              visibility: "hidden",
-              transition: transitionTimming + "s",
-              opacity: "none",
-              width: width,
-              height: height,
-            });
-            const wrapper=()=>{
-                this.style({ opacity: "none" });
-            };
-            this.target?.element?.addEventListener("transitionend",wrapper);
-            this.target?.element?.removeEventListener("transitionend",wrapper);
-            return this;
-        }
-          
-    }
-
-    function EVENT_CONTROLLER(e,EVENT,setter,push_object){
-        this.event=e;
-        if(this.cache.preventDefault[EVENT])e.preventDefault();
-        console.log({setter});
-        if(setter)setter();
-        if(this.cache.stream.enabled[EVENT]&&push_object)this.cache.stream.history[EVENT].push(push_object);
-        this.cache.callbacks[EVENT].map(n=>n(this));
-        return this;
-    }
-    class ZikoEvent{
-        constructor(target){
-            this.target=null;
-            this.setTarget(target);
-            this.__dispose=this.dispose.bind(this);
-            // this.EventIndex=Garbage.Pointer.data.length;
-            // Garbage.Pointer.data.push({event:this,index:this.EventIndex});
-        }
-        get targetElement(){
-            return this.target.element
-        }
-        setTarget(UI){
-            this.target=UI;
-            return this;
-        }
-        __handle(event,handler,dispose){
-            const EVENT=(event==="drag")?event:`${this.cache.prefixe}${event}`;
-            this.dispose(dispose);
-            this.targetElement?.addEventListener(EVENT,handler);
-            return this;   
-        }
-        __onEvent(event,dispose,...callbacks){
-            if(callbacks.length===0){
-                if(this.cache.callbacks.length>1){
-                    this.cache.callbacks.map(n=>e=>n.call(this,e));
-                }   
-                else {
-                    return this;
-                }
-            }
-            else this.cache.callbacks[event]=callbacks.map(n=>e=>n.call(this,e));
-            this.__handle(event,this.__controller[event],dispose);
-            return this;  
-        }
-        preventDefault(config={}){
-            Object.assign(this.cache.preventDefault,config);
-            return this;
-        }
-        pause(config={}){
-            const all=Object.fromEntries(Object.keys(this.cache.stream.enabled).map(n=>[n,true]));
-            config={...all,...config};
-            for(let key in config){
-                if(config[key]){
-                    this.targetElement?.removeEventListener(`${this.cache.prefixe}${key}`,this.__controller[`${this.cache.prefixe}${key}`]);
-                    this.cache.paused[`${this.cache.prefixe}${key}`]=true;
-                }
-            }
-            return this;
-         }
-        resume(config={}){
-            const all=Object.fromEntries(Object.keys(this.cache.stream.enabled).map(n=>[n,true]));
-            config={...all,...config};
-            for(let key in config){
-                if(config[key]){
-                    this.targetElement?.addEventListener(`${this.cache.prefixe}${key}`,this.__controller[`${this.cache.prefixe}${key}`]);
-                    this.cache.paused[`${this.cache.prefixe}${key}`]=false;
-                }
-            }
-            return this;
-         }
-        dispose(config={}){
-            this.pause(config);
-            return this;
-         }
-        stream(config={}){
-            this.cache.stream.t0=Date.now();
-            const all=Object.fromEntries(Object.keys(this.cache.stream.enabled).map(n=>[n,true]));
-            config={...all,...config};
-            Object.assign(this.cache.stream.enabled,config);
-            return this;
-         }
-        clear(config={}){
-            const all=Object.fromEntries(Object.keys(this.cache.stream.clear).map(n=>[n,true]));
-            config={...all,...config};
-            for(let key in config){
-                if(config[key]){
-                    this.cache.stream.history[key]=[];
-                }
-            }
-            return this;
-        }
-    }
-
-    function input_controller(e){
-        EVENT_CONTROLLER.call(this,e,"input",null,null);
-    }
-    function change_controller(e){
-        EVENT_CONTROLLER.call(this,e,"change",null,null);
-    }
-    class ZikoEventInput extends ZikoEvent{
-        constructor(target){
-            super(target);
-            this.event=null;
-            this.cache={
-                prefixe:"",
-                preventDefault:{
-                    input:false,
-                    change:false,
-                },
-                paused:{
-                    input:false,
-                    change:false,      
-                },
-                stream:{
-                    enabled:{
-                        input:false,
-                        change:false,
-                    },
-                    clear:{
-                        input:false, 
-                        change:false,         
-                    },
-                    history:{
-                        input:[],
-                        change:[],
-                    }
-                },
-                callbacks:{
-                    input:[],
-                    change:[],
-                }
-            };
-            this.__controller={
-                input:input_controller.bind(this),
-                change:change_controller.bind(this),
-            };
+    }
+
+    function input_controller(e){
+        EVENT_CONTROLLER.call(this,e,"input",null,null);
+    }
+    function change_controller(e){
+        EVENT_CONTROLLER.call(this,e,"change",null,null);
+    }
+    class ZikoEventInput extends ZikoEvent{
+        constructor(target){
+            super(target);
+            this.event=null;
+            this.cache={
+                prefixe:"",
+                preventDefault:{
+                    input:false,
+                    change:false,
+                },
+                paused:{
+                    input:false,
+                    change:false,      
+                },
+                stream:{
+                    enabled:{
+                        input:false,
+                        change:false,
+                    },
+                    clear:{
+                        input:false, 
+                        change:false,         
+                    },
+                    history:{
+                        input:[],
+                        change:[],
+                    }
+                },
+                callbacks:{
+                    input:[],
+                    change:[],
+                }
+            };
+            this.__controller={
+                input:input_controller.bind(this),
+                change:change_controller.bind(this),
+            };
         }
         get value(){
             return this.target.value;
@@ -3273,8 +2832,8 @@
     }
 
     __init__global__();
-    class ZikoUIElement extends ZikoUINode{
-      constructor(element, name="", {type="html", useDefaultStyle=false}={}){
+    class UIElement extends UINode{
+      constructor({element, name ='', type="html", useDefaultStyle=false}={}){
         super();
         this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
         if(typeof element === "string") {
@@ -3285,9 +2844,16 @@
           }
         }
         else {
-          this.target = element.parentElement;
-        }
-        register(this, DomMethods, IndexingMethods, EventsMethodes);
+          this.target = element?.parentElement;
+        }
+        register(
+          this, 
+          AttrsMethods, 
+          DomMethods, 
+          StyleMethods,
+          IndexingMethods, 
+          EventsMethodes
+        );
         Object.assign(this.cache, {
           name,
           isInteractive : [true, false][Math.floor(2*Math.random())],
@@ -3297,7 +2863,6 @@
           isHidden: false,
           isFrozzen:false,
           legacyParent : null,
-          style: new ZikoUIElementStyle({}),
           attributes: {},
           filters: {},
           temp:{}
@@ -3322,7 +2887,6 @@
         if(element)Object.assign(this.cache,{element});
         this.uuid = `${this.cache.name}-${Random.string(16)}`;
         this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index();
-        this.cache.style.linkTo(this);
         useDefaultStyle && this.style({ 
           position: "relative",
           boxSizing:"border-box",
@@ -3404,25 +2968,17 @@
         else UI.element=this.element.cloneNode(true);
         return UI.render(render);
       }
-      style(styles){
-        styles instanceof ZikoUseStyle ? this.st.style(styles.current): this.st.style(styles);
-        return this;
-      }
-      size(width,height){
-        this.st.size(width,height);
-        return this; 
-      }
       [Symbol.iterator]() {
         return this.items[Symbol.iterator]();
       }
       maintain() {
-      for (let i = 0; i < this.items.length; i++) {
-        Object.defineProperty(this, i, {
-          value: this.items[i],
-          writable: true,
-          configurable: true,
-          enumerable: false 
-          });
+        for (let i = 0; i < this.items.length; i++) {
+          Object.defineProperty(this, i, {
+            value: this.items[i],
+            writable: true,
+            configurable: true,
+            enumerable: false 
+            });
         }
       }
       freeze(freeze){
@@ -3440,43 +2996,6 @@
       describe(label){
         if(label)this.setAttr("aria-label",label);
       }
-      animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
-        this.element?.animate(keyframe,{duration, iterations, easing});
-        return this;
-      }
-        // Attributes
-      #setAttr(name, value){
-        if(this.element?.tagName !== "svg") name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
-        if(this?.attr[name] && this?.attr[name]===value) return;
-        this.element?.setAttribute(name, value);
-        Object.assign(this.cache.attributes, {[name]:value});
-      }
-      setAttr(name, value) {
-        if(name instanceof Object){
-          const [names,values]=[Object.keys(name),Object.values(name)];
-          for(let i=0;i<names.length;i++){
-            if(values[i] instanceof Array)value[i] = values[i].join(" ");
-            this.#setAttr(names[i], values[i]);
-          }
-        }
-        else {
-          if(value instanceof Array)value = value.join(" ");
-          this.#setAttr(name, value);
-        }
-        return this;
-      }
-      removeAttr(...names) {
-        for(let i=0;i<names.length;i++)this.element?.removeAttribute(names[i]);
-        return this;
-      }
-      getAttr(name){
-        name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
-        return this.element.attributes[name].value;
-      }
-      setContentEditable(bool = true) {
-        this.setAttr("contenteditable", bool);
-        return this;
-      }
       get children() {
         return [...this.element.children];
       }
@@ -3671,10 +3190,6 @@
         "desc", "title", "metadata", "foreignObject"
       ];
 
-    const isStateGetter = (arg) => {
-        return typeof(arg) === 'function' && arg?.()?.isStateGetter?.()
-    };
-
     const tags = new Proxy({}, {
       get(target, prop) {
         if (typeof prop !== 'string') return undefined;
@@ -3682,27 +3197,23 @@
         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 ZikoUIElement 
+            || args[0] instanceof UIElement 
             || (typeof args[0] === 'function' && args[0]().isStateGetter())
-          ) return new ZikoUIElement(tag, tag, {type}).append(...args);
-          return new ZikoUIElement(tag).setAttr(args.shift()).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 ZikoUIElement(tag,"",{el_type : "svg"}).append(...args);
+        // if(SVGTags.includes(tag)) return (...args) => new UIElement(tag,"",{el_type : "svg"}).append(...args);
         // return (...args)=>{
-        //   if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
+        //   if(!(args[0] instanceof UIElement) && args[0] instanceof Object){
         //     let attributes = args.shift()
-        //     return new ZikoUIElement(tag).setAttr(attributes).append(...args)
+        //     return new UIElement(tag).setAttr(attributes).append(...args)
         //   }
-        //   return new ZikoUIElement(tag).append(...args);
+        //   return new UIElement(tag).append(...args);
         // }
         // // switch(tag){
         //   case "html"  : globalThis?.document?.createElement("html")
@@ -3712,14 +3223,14 @@
         //   case "meta"  :
         //   case "srcipt":
         //   case "body"  : return null; break;
-        //   default : return new ZikoUIElement(tag);
+        //   default : return new UIElement(tag);
         // }
       }
     });
 
-    class ZikoUIFlex extends ZikoUIElement {
+    class ZikoUIFlex extends UIElement {
       constructor(tag = "div", w = "100%", h = "100%") {
-        super(tag ,"Flex");
+        super({element : tag , name : "Flex"});
         this.direction = "cols";
         if (typeof w == "number") w += "%";
         if (typeof h == "number") h += "%";
@@ -3787,13 +3298,13 @@
       }
     }
 
-    const Flex = (...ZikoUIElement) =>{
+    const Flex = (...UIElement) =>{
       let tag="div";
-      if(typeof ZikoUIElement[0]==="string"){
-        tag=ZikoUIElement[0];
-        ZikoUIElement.pop();
+      if(typeof UIElement[0]==="string"){
+        tag=UIElement[0];
+        UIElement.pop();
       }
-      return new ZikoUIFlex(tag).append(...ZikoUIElement);
+      return new ZikoUIFlex(tag).append(...UIElement);
     };
     function set_vertical(direction){
       direction == 1
@@ -3816,9 +3327,9 @@
     return map_pos_x(-align);
     }
 
-    class ZikoUIGrid extends ZikoUIElement {
+    class ZikoUIGrid extends UIElement {
         constructor(tag ="div", w = "50vw", h = "50vh") {
-          super(tag,"Grid");
+          super({element : tag, name : "Grid"});
           this.direction = "cols";
           if (typeof w == "number") w += "%";
           if (typeof h == "number") h += "%";
@@ -3846,11 +3357,11 @@
             return this;
         }
     }
-    const Grid$1 = (...ZikoUIElement) => new ZikoUIGrid("div").append(...ZikoUIElement);
+    const Grid$1 = (...UIElement) => new ZikoUIGrid("div").append(...UIElement);
 
-    class ZikoUISuspense extends ZikoUIElement{
+    class ZikoUISuspense extends UIElement{
         constructor(fallback_ui, callback){
-            super("div", "suspense");
+            super({element : "div", name : "suspense"});
             this.setAttr({
                 dataTemp : "suspense"
             });
@@ -3872,9 +3383,9 @@
 
     const Suspense = (fallback_ui, callback) => new ZikoUISuspense(fallback_ui, callback);
 
-    class ZikoUIXMLWrapper extends ZikoUIElement{
+    class ZikoUIXMLWrapper extends UIElement{
         constructor(XMLContent, type){
-            super("div", "");
+            super({element : "div", name : ""});
             this.element.append(type==="svg"?svg2dom(XMLContent):html2dom(XMLContent));
         }
     }
@@ -3906,7 +3417,7 @@
     const HTMLWrapper = (HTMLContent) => new ZikoUIHTMLWrapper(HTMLContent);
     const SVGWrapper = (SVGContent) => new ZikoUISVGWrapper(SVGContent);
 
-    class ZikoUICanvas extends ZikoUIElement{
+    class ZikoUICanvas extends UIElement{
         constructor(w,h){
             super("canvas","canvas");
             this.ctx = this.element?.getContext("2d");
@@ -4076,7 +3587,7 @@
 
     const Canvas=(w,h)=>new ZikoUICanvas(w,h);
 
-    class ZikoUISvg extends ZikoUIElement {
+    class ZikoUISvg extends UIElement {
         constructor(w=360,h=300) {
           super("svg","svg");
           //this.cache={};
@@ -4285,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();
@@ -4612,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;
@@ -5135,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;
@@ -5143,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"){
@@ -5191,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++) {
@@ -5219,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) {
@@ -5229,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() {
@@ -5267,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);
@@ -5279,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";
@@ -5317,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);
@@ -5330,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;
             }
@@ -5362,293 +4704,533 @@
                 return Y;
             }
         }
-    };
-    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 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 asin=(...x) => mapfun$1(Fixed.asin,...x);
-    const atan=(...x) => mapfun$1(Fixed.atan,...x);
-    const acot=(...x) => mapfun$1(Fixed.acot,...x);
-    const cosh=(...x) => mapfun$1(Fixed.cosh,...x);
-    const sinh=(...x) => mapfun$1(Fixed.sinh,...x);
-    const tanh=(...x) => mapfun$1(Fixed.tanh,...x);
-    const coth=(...x) => mapfun$1(Fixed.coth,...x);
-    const acosh=(...x) => mapfun$1(Fixed.acosh,...x);
-    const asinh=(...x) => mapfun$1(Fixed.asinh,...x);
-    const atanh=(...x) => mapfun$1(Fixed.atanh,...x);
-    const ceil=(...x) => mapfun$1(Math.ceil,...x);
-    const floor=(...x) => mapfun$1(Math.floor,...x);
-    const round=(...x) => mapfun$1(Math.round,...x);
-    const atan2=(x,y,rad=true)=>{
-        if(typeof x === "number"){
-            if(typeof y === "number")return rad?Math.atan2(x,y):Math.atan2(x,y)*180/Math.PI;
-            else return mapfun$1(a=>atan2(x,a,rad),...y);
+    };
+    const e=(...x) => mapfun$1(Math.exp,...x);
+    const ln=(...x) => mapfun$1(Math.log,...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$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);
+    const cosh=(...x) => mapfun$1(Fixed.cosh,...x);
+    const sinh=(...x) => mapfun$1(Fixed.sinh,...x);
+    const tanh=(...x) => mapfun$1(Fixed.tanh,...x);
+    const coth=(...x) => mapfun$1(Fixed.coth,...x);
+    const acosh=(...x) => mapfun$1(Fixed.acosh,...x);
+    const asinh=(...x) => mapfun$1(Fixed.asinh,...x);
+    const atanh=(...x) => mapfun$1(Fixed.atanh,...x);
+    const ceil=(...x) => mapfun$1(Math.ceil,...x);
+    const floor=(...x) => mapfun$1(Math.floor,...x);
+    const round=(...x) => mapfun$1(Math.round,...x);
+    const atan2=(x,y,rad=true)=>{
+        if(typeof x === "number"){
+            if(typeof y === "number")return rad?Math.atan2(x,y):Math.atan2(x,y)*180/Math.PI;
+            else return mapfun$1(a=>atan2(x,a,rad),...y);
+        }
+        // else if(x instanceof Complex){
+        //     if(typeof n === "number")return Complex.fromExpo(x.z**n,x.phi*n);
+        //     else return mapfun(a=>pow(x,a),...n);
+        // }
+        else if(x instanceof Array){
+            if(typeof y === "number") return mapfun$1(a=>atan2(a,y,rad),...x);
+            else if(y instanceof Array){
+                const Y=[];
+                for(let i=0;i<x.length;i++){
+                    Y.push(mapfun$1(a=>pow$1(x[i],a),...y));
+                }
+                return Y;
+            }
+        }
+    };
+    const fact=(...x)=>mapfun$1(n=> {
+            let i,
+            y = 1;
+            if (n == 0) y = 1;
+            else if (n > 0) for (i = 1; i <= n; i++) y *= i;
+            else y = NaN;
+            return y;
+        },...x);
+    const sign=(...x)=>mapfun$1(Math.sign,...x);
+
+    const sig=(...x)=>mapfun$1(n=>1/(1+e(-n)),...x);
+
+    const hypot=(...x)=>{
+        if(x.every(n=>typeof n === "number"))return Math.hypot(...x);
+        if(x.every(n=>n instanceof Array))return mapfun$1(
+            Math.hypot,
+            ...x
+        )
+    };
+
+    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.state = {
+          isRunning: false,
+          animationId: null,
+          startTime: null,
+          ease,
+          step,
+        //   interval: [t0, t1],
+          autoStart: start,
+          duration
+        };
+
+        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();
+        }
+      }
+
+      // ---- 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;
+      }
+
+      // ---- 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;
         }
-        // else if(x instanceof Complex){
-        //     if(typeof n === "number")return Complex.fromExpo(x.z**n,x.phi*n);
-        //     else return mapfun(a=>pow(x,a),...n);
-        // }
-        else if(x instanceof Array){
-            if(typeof y === "number") return mapfun$1(a=>atan2(a,y,rad),...x);
-            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));
-                }
-                return Y;
-            }
+        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 });
         }
-    };
-    const fact=(...x)=>mapfun$1(n=> {
-            let i,
-            y = 1;
-            if (n == 0) y = 1;
-            else if (n > 0) for (i = 1; i <= n; i++) y *= i;
-            else y = NaN;
-            return y;
-        },...x);
-    const sign=(...x)=>mapfun$1(Math.sign,...x);
+      }
 
-    const sig=(...x)=>mapfun$1(n=>1/(1+e(-n)),...x);
+      onTick(cb) {
+        this._callbacks.add(cb);
+        return () => this._callbacks.delete(cb); 
+      }
 
-    const hypot=(...x)=>{
-        if(x.every(n=>typeof n === "number"))return Math.hypot(...x);
-        if(x.every(n=>n instanceof Array))return mapfun$1(
-            Math.hypot,
-            ...x
-        )
+      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); 
+        }
     };
 
-    class ZikoTimeLoop {
-      constructor(callback, step = 1000/30, startTime=0, endTime = Infinity, started = true) {
+    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,
-          AnimationId : null,
-          t0 : null,
+          id: null,
+          last_tick: null,
           step,
-          // fps,
-          startTime,
-          endTime,
-          started
+          t0,
+          t1,
+          autoplay,
+          pauseTime: null,
+          frame : 0,
         };
-        this.init();
-        this.i=0;
-      }
-      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);
+
+        if (autoplay) {
+          t0 ? this.startAfter(t0) : this.start();
+          if (t1 !== Infinity) this.stopAfter(t1);
         }
-        return this;
       }
-      // get TIME_STEP() {
-      //   // return this.cache.step?this.cache.step:1000 / this.cache.fps;
-      //   return this.cache.step;
-      // }
+
+      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();
@@ -5691,6 +5273,7 @@
         }
       };
 
+    // import Ease from "./ease.js";
     const wait=(delayInMS)=>{
         return new Promise((resolve) => setTimeout(resolve, delayInMS));
     };
@@ -5701,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;
@@ -6003,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);
@@ -6242,27 +5802,69 @@
     }
 
     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;
     exports.ZikoApp = ZikoApp;
     exports.ZikoCustomEvent = ZikoCustomEvent;
@@ -6282,25 +5884,23 @@
     exports.ZikoMutationObserver = ZikoMutationObserver;
     exports.ZikoSPA = ZikoSPA;
     exports.ZikoUICanvas = ZikoUICanvas;
-    exports.ZikoUIElement = ZikoUIElement;
     exports.ZikoUIFlex = ZikoUIFlex;
     exports.ZikoUIGrid = ZikoUIGrid;
     exports.ZikoUIHTMLWrapper = ZikoUIHTMLWrapper;
-    exports.ZikoUINode = ZikoUINode;
     exports.ZikoUISVGWrapper = ZikoUISVGWrapper;
     exports.ZikoUISuspense = ZikoUISuspense;
     exports.ZikoUISvg = ZikoUISvg;
     exports.ZikoUIText = ZikoUIText;
     exports.ZikoUIXMLWrapper = ZikoUIXMLWrapper;
     exports.ZikoUseRoot = ZikoUseRoot;
-    exports.ZikoUseStyle = ZikoUseStyle;
     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;
@@ -6322,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;
@@ -6348,6 +5947,7 @@
     exports.hypot = hypot;
     exports.inRange = inRange;
     exports.isApproximatlyEqual = isApproximatlyEqual;
+    exports.isStateGetter = isStateGetter;
     exports.json2arr = json2arr;
     exports.json2css = json2css;
     exports.json2csv = json2csv;
@@ -6360,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;
@@ -6375,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;
@@ -6404,27 +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.useStyle = useStyle;
+    exports.useState = useState;
     exports.useSuccesifKeys = useSuccesifKeys;
     exports.useSwipeEvent = useSwipeEvent;
     exports.useThread = useThread;
-    exports.useTimeLoop = useTimeLoop;
     exports.useTitle = useTitle;
     exports.wait = wait;
     exports.waitForUIElm = waitForUIElm;