ziko 0.38.1 → 0.40.0

package/dist/ziko.cjs

@@ -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
@@ -10,22 +10,22 @@
 
 '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,
@@ -63,20 +63,20 @@ const mapfun$1=(fun,...X)=>{
             const [a,b,z,phi]=[x.a,x.b,x.z,x.phi];
             switch(fun){
                 case Math.log: return complex(ln(z),phi); // Done
-                case Math.exp: return complex(e(a)*cos(b),e(a)*sin(b)); // Done
+                case Math.exp: return complex(e(a)*cos$1(b),e(a)*sin$1(b)); // Done
                 case Math.abs: return z; // Done
-                case Math.sqrt: return complex(sqrt(z)*cos(phi/2),sqrt(z)*sin(phi/2)); // Done
-                case Fixed.cos: return complex(cos(a)*cosh(b),-(sin(a)*sinh(b)));
-                case Fixed.sin: return complex(sin(a)*cosh(b),cos(a)*sinh(b));
+                case Math.sqrt: return complex(sqrt$1(z)*cos$1(phi/2),sqrt$1(z)*sin$1(phi/2)); // Done
+                case Fixed.cos: return complex(cos$1(a)*cosh(b),-(sin$1(a)*sinh(b)));
+                case Fixed.sin: return complex(sin$1(a)*cosh(b),cos$1(a)*sinh(b));
                 case Fixed.tan:{
-                    const DEN = cos(2*a)+cosh(2*b);
-                    return complex(sin(2*a)/DEN,sinh(2*b)/DEN);
+                    const DEN = cos$1(2*a)+cosh(2*b);
+                    return complex(sin$1(2*a)/DEN,sinh(2*b)/DEN);
                 }
-                case Fixed.cosh:return complex(cosh(a)*cos(b),sinh(a)*sin(b));
-                case Fixed.sinh:return complex(sinh(a)*cos(b),cosh(a)*sin(b));
+                case Fixed.cosh:return complex(cosh(a)*cos$1(b),sinh(a)*sin$1(b));
+                case Fixed.sinh:return complex(sinh(a)*cos$1(b),cosh(a)*sin$1(b));
                 case Fixed.tanh:{
-                    const DEN=cosh(2*a)+cos(2*b);
-                    return complex(sinh(2*a)/DEN,sin(2*b)/DEN)
+                    const DEN=cosh(2*a)+cos$1(2*b);
+                    return complex(sinh(2*a)/DEN,sin$1(2*b)/DEN)
                 }
                 default : return fun(x)
             }
@@ -317,7 +317,7 @@ const linspace=(a,b,n=abs(b-a)+1,endpoint=true)=>{
     }
 };
 const logspace=(a,b,n=b-a+1,base=E,endpoint=true)=>{
-    return linspace(a,b,n,endpoint).map(n=>pow(base,n))
+    return linspace(a,b,n,endpoint).map(n=>pow$1(base,n))
 };
 const geomspace=(a,b,n=abs(b-a)+1,endpoint=true)=>{
     if(Math.floor(n)!==n)return;
@@ -1045,7 +1045,7 @@ const json2xmlFile=(json,indent)=>{
     }
 };
 
-class ZikoUINode {
+class UINode {
     constructor(node){
         this.cache = {
             node
@@ -1059,7 +1059,7 @@ class ZikoUINode {
     } 
 }
 
-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));
@@ -1102,7 +1102,114 @@ const register = (target, ...mixins) => {
   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);
@@ -1648,723 +1755,175 @@ const IndexingMethods = {
   },
 };
 
-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;
@@ -3269,8 +2828,8 @@ function __init__global__(){
 }
 
 __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") {
@@ -3281,9 +2840,16 @@ class ZikoUIElement extends ZikoUINode{
       }
     }
     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())],
@@ -3293,7 +2859,6 @@ class ZikoUIElement extends ZikoUINode{
       isHidden: false,
       isFrozzen:false,
       legacyParent : null,
-      style: new ZikoUIElementStyle({}),
       attributes: {},
       filters: {},
       temp:{}
@@ -3318,7 +2883,6 @@ class ZikoUIElement extends ZikoUINode{
     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",
@@ -3400,25 +2964,17 @@ class ZikoUIElement extends ZikoUINode{
     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){
@@ -3436,43 +2992,6 @@ class ZikoUIElement extends ZikoUINode{
   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];
   }
@@ -3667,10 +3186,6 @@ const SVGTags = [
     "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;
@@ -3678,27 +3193,23 @@ const tags = new Proxy({}, {
     let type ;
     if(HTMLTags.includes(tag)) type = 'html';
     if(SVGTags.includes(tag)) type = 'svg';
-    if(HTMLTags.includes(tag)) return (...args)=>{
+    return (...args)=>{
       console.log(isStateGetter(args[0]));
-    //  if(typeof args[0] === 'function') {
-    //   console.log(args[0], args[0]?.() instanceof StateGetter)
-    //   globalThis.a = args[0]
-    //   console.log({t : a.constructor})
-    //  }
       if(
         ['string', 'number'].includes(typeof args[0]) 
-        || args[0] instanceof 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")
@@ -3708,14 +3219,14 @@ const tags = new Proxy({}, {
     //   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 += "%";
@@ -3783,13 +3294,13 @@ class ZikoUIFlex extends ZikoUIElement {
   }
 }
 
-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
@@ -3812,9 +3323,9 @@ function map_pos_y(align){
 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 += "%";
@@ -3842,11 +3353,11 @@ class ZikoUIGrid extends ZikoUIElement {
         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"
         });
@@ -3868,9 +3379,9 @@ class ZikoUISuspense extends ZikoUIElement{
 
 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));
     }
 }
@@ -3902,7 +3413,7 @@ class ZikoUISVGWrapper extends ZikoUIXMLWrapper{
 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");
@@ -4072,7 +3583,7 @@ class ZikoUICanvas extends ZikoUIElement{
 
 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={};
@@ -4281,175 +3792,6 @@ function trimKeys(obj) {
     }, Array.isArray(obj) ? [] : {});
 }
 
-const Patterns={
-    isDigit: /^\d+$/,
-    isURL: /^(https?:\/\/)?([\w\-]+\.)+[\w\-]+(\/[\w\-./?%&=]*)?$/,
-    isHexColor: /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/,
-    isIPv4: /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/,
-    isMACAddress: /^([0-9A-Fa-f]{2}[:-]){5}([0-9A-Fa-f]{2})$/,
-    isDate: /^\d{4}-\d{2}-\d{2}$/,
-};
-
-class Str{
-    constructor(string){
-        this.string=string;
-    }
-    isDigit() {
-        return Patterns.isDigit.test(this.string);
-    }
-    static isDigit(string){
-        return new Str(string).isDigit();
-    }
-    isNumber() {
-        return !isNaN(this.string);
-    }
-    static isNumber(string){
-        return new Str(string).isNumber();
-    }
-    isUrl(){
-        return Patterns.isURL.test(this.string);
-    }
-    static isUrl(string){
-        return new Str(string).isUrl();
-    }
-    isHexColor(){
-        return Patterns.isHexColor.test(this.string);
-    }
-    static isHexColor(string){
-        return new Str(string).isHexColor();
-    }
-    isIPv4(){
-        return Patterns.isIPv4.test(this.string);
-    }
-    static isIPv4(string){
-        return new Str(string).isIPv4();
-    }
-    isDate(){
-        return Patterns.isDate.test(this.string);
-    }
-    static isDate(string){
-        return new Str(string).isDate();
-    }
-    isMACAddress(){
-        return Patterns.isMACAddress.test(this.string);
-    }
-    static isMACAddress(string){
-        return new Str(string).isMACAddress();
-    }
-    isPascalCase(){
-        if (this.string.length === 0) return false;
-        const PascalCasePattern = /^[A-Z][a-zA-Z0-9]*$/;
-        return PascalCasePattern.test(this.string);
-    }
-    static isPascalCase(string){
-        return new Str(string).isPascalCase();
-    }
-    isCamelCase() {
-        if (this.string.length === 0) return false;        
-        const camelCasePattern = /^[a-z][a-zA-Z0-9]*$/;
-        return camelCasePattern.test(this.string);
-    }
-    static isCamelCase(string){
-        return new Str(string).isCamelCase();
-    }
-    isHyphenCase(){
-        return this.string.split('-').length > 1;
-    }
-    static isHyphenCase(string){
-        return new Str(string).isHyphenCase();
-    }
-    isSnakeCase(){
-        return this.string.split('_').length > 1;
-    }
-    static isSnakeCase(string){
-        return new Str(string).isSnakeCase();
-    }
-    isPalindrome(){
-        const str=this.string.toLocaleLowerCase();
-        let l=str.length,i;
-        for(i=0;i<l/2;i++)if(str[i]!=str[l-i-1])return false;
-        return true;
-    }
-    static isPalindrome(string){
-        return new Str(string).isPalindrome();
-    }
-    static isAnagrams(word,words){
-        word=word.split("").sort();
-        words=words.split("").sort();
-        return JSON.stringify(word)===JSON.stringify(words);
-    }
-    isIsogram(){
-        return [...new Set(this.string.toLowerCase())].length===this.string.length; 
-    }
-    static isIsogram(string){
-       return  new Str(string).isIsogram();
-    }
-    static camel2hyphencase(text) {
-        return text.replace(/[A-Z]/g, match => '-' + match.toLowerCase());
-    }
-    static camel2snakecase(text) {
-        return text.replace(/[A-Z]/g, match => '_' + match.toLowerCase());
-    }
-    static camel2pascalcase(text) {
-        return text.charAt(0).toUpperCase() + text.slice(1);
-    }
-    static camel2constantcase(text) {
-        return text.replace(/[A-Z]/g, match => '_' + match).toUpperCase();
-    }
-    static pascal2snakecase(text) {
-        return text.replace(/([A-Z])/g, (match, offset) => offset ? '_' + match.toLowerCase() : match.toLowerCase());
-    }
-    static pascal2hyphencase(text) {
-        return text.replace(/([A-Z])/g, (match, offset) => offset ? '-' + match.toLowerCase() : match.toLowerCase());
-    }
-    static pascal2camelcase(text) {
-        return text.charAt(0).toLowerCase() + text.slice(1);
-    }
-    static pascal2constantcase(text) {
-        return text.replace(/([A-Z])/g, (match, offset) => offset ? '_' + match : match).toUpperCase();
-    }
-    static snake2camelcase(text) {
-        return text.replace(/(_\w)/g, match => match[1].toUpperCase());
-    }
-    static snake2hyphencase(text) {
-        return text.replace(/_/g, "-");
-    }
-    static snake2pascalcase(text) {
-        return text.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
-    }
-    static snake2constantcase(text) {
-        return text.toUpperCase();
-    }
-    static hyphen2camelcase(text) {
-        return text.replace(/-([a-z])/g, match => match[1].toUpperCase());
-    }
-    static hyphen2snakecase(text) {
-        return text.replace(/-/g, '_');
-    }
-    static hyphen2pascalcase(text) {
-        return text.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
-    }
-    static hyphen2constantcase(text) {
-        return text.replace(/-/g, '_').toUpperCase();
-    }
-    static constant2camelcase(text) {
-        return text.toLowerCase().replace(/_([a-z])/g, match => match[1].toUpperCase());
-    }
-    static constant2snakecase(text) {
-        return text.toLowerCase();
-    }
-    static constant2pascalcase(text) {
-        return text.toLowerCase().split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
-    }
-    static constant2hyphencase(text) {
-        return text.toLowerCase().replace(/_/g, '-');
-    }
-}
-const removeExtraSpace=str=>str.replace(/\s+/g,' ');
-const count=(str,value)=>str.split("").filter(x => x==value).length;
-const countWords=(str,value)=>str.split(" ").filter(x => x==value).length;
-const str=string=>new Str(string);
-
 class Matrix extends ZikoMath{
     constructor(rows, cols, element = [] ) {
         super();
@@ -4608,7 +3950,7 @@ class Matrix extends ZikoMath{
                         .mul(determinat(deleteRowAndColumn(M, i)))
                 );*/
                 //const to_be_added=Utils.add(Utils.mul(pow(-1, i),Utils.mul(M[0][i],determinat(deleteRowAndColumn(M, i)))));
-                const to_be_added=Utils.add(Utils.mul(pow(-1, i),Utils.mul(M[0][i],determinat(deleteRowAndColumn(M, i)))));
+                const to_be_added=Utils.add(Utils.mul(pow$1(-1, i),Utils.mul(M[0][i],determinat(deleteRowAndColumn(M, i)))));
                 answer=Utils.add(answer,to_be_added);
             }
             return answer;
@@ -5131,7 +4473,7 @@ class Complex extends ZikoMath{
             }
             else if(("a" in b && "z" in a)){
                 this.a=a.a;
-                this.b=sqrt((a.z**2)-(a.a**2));
+                this.b=sqrt$1((a.z**2)-(a.a**2));
             }
             else if(("a" in b && "phi" in a)){
                 this.a=a.a;
@@ -5139,15 +4481,15 @@ class Complex extends ZikoMath{
             }
             else if(("b" in b && "z" in a)){
                 this.b=a.b;
-                this.a=sqrt((a.z**2)-(a.b**2));
+                this.a=sqrt$1((a.z**2)-(a.b**2));
             }
             else if(("b" in b && "phi" in a)){
                 this.b=b;
                 this.a=a.b/tan(a.phi);
             }
             else if(("z" in b && "phi" in a)){
-                this.a=a.z*cos(a.phi);
-                this.a=a.z*sin(a.phi);
+                this.a=a.z*cos$1(a.phi);
+                this.a=a.z*sin$1(a.phi);
             }
         }
         else if(typeof(a)==="number"&&typeof(b)==="number"){
@@ -5187,7 +4529,7 @@ class Complex extends ZikoMath{
         return new Complex(this.a, -this.b);
     }
     get inv() {
-        return new Complex(this.a / (pow(this.a, 2) + pow(this.b, 2)), -this.b / (pow(this.a, 2) + pow(this.b, 2)));
+        return new Complex(this.a / (pow$1(this.a, 2) + pow$1(this.b, 2)), -this.b / (pow$1(this.a, 2) + pow$1(this.b, 2)));
     }
     add(...z) {
         for (let i = 0; i < z.length; i++) {
@@ -5215,8 +4557,8 @@ class Complex extends ZikoMath{
         }
         let Z=+prod(this.z,...z.map(n=>n.z)).toFixed(15);
         let phi=+sum(this.phi,...z.map(n=>n.phi)).toFixed(15);
-        this.a=+(Z*cos(phi).toFixed(15)).toFixed(14);
-        this.b=+(Z*sin(phi).toFixed(15)).toFixed(14);    
+        this.a=+(Z*cos$1(phi).toFixed(15)).toFixed(14);
+        this.b=+(Z*sin$1(phi).toFixed(15)).toFixed(14);    
         return this;
     }
     div(...z) {
@@ -5225,23 +4567,23 @@ class Complex extends ZikoMath{
         }
         let Z=+(this.z/prod(...z.map(n=>n.z))).toFixed(15);
         let phi=+(this.phi-sum(...z.map(n=>n.phi))).toFixed(15);
-        this.a=+(Z*cos(phi).toFixed(15)).toFixed(15);
-        this.b=+(Z*sin(phi).toFixed(15)).toFixed(15);
+        this.a=+(Z*cos$1(phi).toFixed(15)).toFixed(15);
+        this.b=+(Z*sin$1(phi).toFixed(15)).toFixed(15);
         return this;
     }
     pow(n) {
         if (floor(n) === n && n > 0) {
             let z=+(this.z**n).toFixed(15);
             let phi=+(this.phi*n).toFixed(15);
-            this.a=+(z*cos(phi).toFixed(15)).toFixed(15);
-            this.b=+(z*sin(phi).toFixed(15)).toFixed(15);
+            this.a=+(z*cos$1(phi).toFixed(15)).toFixed(15);
+            this.b=+(z*sin$1(phi).toFixed(15)).toFixed(15);
         }
         return this;
     }
     static fromExpo(z, phi) {
         return new Complex(
-            +(z * cos(phi)).toFixed(13), 
-            +(z * sin(phi)).toFixed(13)
+            +(z * cos$1(phi)).toFixed(13), 
+            +(z * sin$1(phi)).toFixed(13)
             );
     }
     get expo() {
@@ -5263,10 +4605,10 @@ class Complex extends ZikoMath{
         return z.clone.pow(n);
     }
     static xpowZ(x){
-        return complex((x**this.a)*cos(this.b*ln(x)),(x**this.a)*sin(this.b*ln(x)));
+        return complex((x**this.a)*cos$1(this.b*ln(x)),(x**this.a)*sin$1(this.b*ln(x)));
     }
     sqrtn(n=2){
-        return complex(sqrtn(this.z,n)*cos(this.phi/n),sqrtn(this.z,n)*sin(this.phi/n));
+        return complex(sqrtn(this.z,n)*cos$1(this.phi/n),sqrtn(this.z,n)*sin$1(this.phi/n));
     }
     get sqrt(){
         return this.sqrtn(2);
@@ -5275,14 +4617,14 @@ class Complex extends ZikoMath{
         return complex(this.z,this.phi);
     }
     get cos(){
-        return complex(cos(this.a)*cosh(this.b),sin(this.a)*sinh(this.b))
+        return complex(cos$1(this.a)*cosh(this.b),sin$1(this.a)*sinh(this.b))
     }
     get sin(){
-        return complex(sin(this.a)*cosh(this.b),cos(this.a)*sinh(this.b))
+        return complex(sin$1(this.a)*cosh(this.b),cos$1(this.a)*sinh(this.b))
     }
     get tan(){
-        const de=cos(this.a*2)+cosh(this.b*2);
-        return complex(sin(2*this.a)/de,sinh(2*this.b)/de);
+        const de=cos$1(this.a*2)+cosh(this.b*2);
+        return complex(sin$1(2*this.a)/de,sinh(2*this.b)/de);
     }
     printInConsole() {
         let string = this.a + " + " + this.b + " * i";
@@ -5313,12 +4655,12 @@ const complex=(a,b)=>{
 // } from "../calculus/index.js";
 
 const abs=(...x)=>mapfun$1(Math.abs,...x);
-const sqrt=(...x)=>mapfun$1(Math.sqrt,...x);
-const pow=(x,n)=>{
+const sqrt$1=(...x)=>mapfun$1(Math.sqrt,...x);
+const pow$1=(x,n)=>{
     if(typeof x === "number"){
         if(typeof n === "number")return Math.pow(x,n);
         else if(n instanceof Complex)return Complex.fromExpo(x**n.a,n.b*ln(x))
-        else return mapfun$1(a=>pow(x,a),...n);
+        else return mapfun$1(a=>pow$1(x,a),...n);
     }
     else if(x instanceof Complex){
         if(typeof n === "number")return Complex.fromExpo(x.z**n,x.phi*n);
@@ -5326,14 +4668,14 @@ const pow=(x,n)=>{
             x.z**n.a*e(-x.phi*n.b),
             ln(x.z)*n.b+n.a*x.phi
         )
-        else return mapfun$1(a=>pow(x,a),...n);
+        else return mapfun$1(a=>pow$1(x,a),...n);
     }
     else if(x instanceof Array){
-        if(typeof n === "number") return mapfun$1(a=>pow(a,n),...x);
+        if(typeof n === "number") return mapfun$1(a=>pow$1(a,n),...x);
         else if(n instanceof Array){
             const Y=[];
             for(let i=0;i<x.length;i++){
-                Y.push(mapfun$1(a=>pow(x[i],a),...n));
+                Y.push(mapfun$1(a=>pow$1(x[i],a),...n));
             }
             return Y;
         }
@@ -5358,293 +4700,533 @@ const sqrtn=(x,n)=>{
             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();
@@ -5687,6 +5269,7 @@ const waitForUIElm=(UIElement)=>{
     }
   };
 
+// import Ease from "./ease.js";
 const wait=(delayInMS)=>{
     return new Promise((resolve) => setTimeout(resolve, delayInMS));
 };
@@ -5697,93 +5280,6 @@ const timeTaken = callback => {
     return r;
 };
 
-class ZikoTimeAnimation{
-    constructor(callback,ease=Ease.Linear,step=50,{t=[0,null],start=true,duration=3000}={}){
-        this.cache={
-            isRunning:false,
-            AnimationId:null,
-            startTime:null,
-            ease,
-            step,
-            intervall:t,
-            started:start,
-            duration
-        };
-        this.t=0;
-        this.tx=0;
-        this.ty=0;
-        this.i=0;
-        this.callback=callback;
-    }
-    #animation_handler(){
-            this.t+=this.cache.step;
-            this.i++;
-            this.tx=map(this.t,0,this.cache.duration,0,1);
-            this.ty=this.cache.ease(this.tx);
-            this.callback(this);
-            if(this.t>=this.cache.duration){
-                clearInterval(this.cache.AnimationId);
-                this.cache.isRunning=false;
-            }
-    }
-    reset(restart=true){
-        this.t=0;
-        this.tx=0;
-        this.ty=0;
-        this.i=0;
-        if(restart)this.start();
-        return this;
-    }
-    #animate(reset=true){
-        if(!this.cache.isRunning){
-            if(reset)this.reset(false);
-            this.cache.isRunning=true;
-            this.cache.startTime = Date.now();
-            this.cache.AnimationId=setInterval(this.#animation_handler.bind(this),this.cache.step);
-        }
-        return this;
-    }
-    start(){
-        this.#animate(true);
-        return this;
-    }
-    pause(){
-        if (this.cache.isRunning) {
-            clearTimeout(this.cache.AnimationId);
-            this.cache.isRunning = false;
-          }
-        return this;
-    }
-    resume(){
-        this.#animate(false);
-        return this;
-    }
-    stop(){
-        this.pause();
-        this.reset(false);
-        return this;
-    }
-    // clear(){
-    // }
-    // stream(){
-    // }
-}
-
-const useAnimation=(callback,ease=Ease.Linear,step=50,config)=>new ZikoTimeAnimation(callback,ease=Ease.Linear,step=50,config);
-
-const debounce=(fn,delay=1000)=>{
-    return (...args) => setTimeout(()=>fn(...args),delay);
-};
-const throttle=(fn,delay)=>{
-    let lastTime=0;
-    return (...args) => {
-        const now = new Date().getTime();
-        if(now-lastTime < delay) return;
-        lastTime = now;
-        fn(...args); 
-    }
-};
-
 class ZikoApp {
     constructor({head = null, wrapper = null, target = null}){
         this.head = head;
@@ -5999,6 +5495,70 @@ function findCommonPath(paths) {
    return commonPath;
 }
 
+function useDerived(deriveFn, sources) {
+    let value = deriveFn(...sources.map(s => s().value));
+    const subscribers = new Set();
+    let paused = false;
+
+    function getValue() {
+        return {
+            value,
+            isStateGetter: () => true,
+            _subscribe: (fn, UIElement) => {
+                subscribers.add(fn);
+
+                const observer = new MutationObserver(() => {
+                    if (!document.body.contains(UIElement.element)) {
+                        subscribers.delete(fn);
+                        observer.disconnect();
+                    }
+                });
+
+                observer.observe(document.body, { childList: true, subtree: true });
+            },
+        };
+    }
+
+    function setValue(newValue) {
+        if (paused) return;
+        if (typeof newValue === "function") newValue = newValue(value);
+        if (newValue !== value) {
+            value = newValue;
+            subscribers.forEach(fn => fn(value));
+        }
+    }
+
+    const controller = {
+        pause: () => { paused = true; },
+        resume: () => { paused = false; },
+        clear: () => { subscribers.clear(); },
+        force: (newValue) => {
+            if (typeof newValue === "function") newValue = newValue(value);
+            value = newValue;
+            subscribers.forEach(fn => fn(value));
+        },
+        getSubscribers: () => new Set(subscribers),
+    };
+
+    // Subscribe to source states
+    sources.forEach(source => {
+        const srcValue = source(); // getValue()
+        srcValue._subscribe(() => {
+            if (!paused) {
+                const newVal = deriveFn(...sources.map(s => s().value));
+                if (newVal !== value) {
+                    value = newVal;
+                    subscribers.forEach(fn => fn(value));
+                }
+            }
+        }, { element: document.body }); // dummy UIElement
+    });
+
+    return [getValue, setValue, controller];
+}
+
+const useReactive = (nested_value) => mapfun$1(n => useState(n), nested_value);
+
 class ZikoUseChannel{
     constructor(name = ""){
         this.channel = new BroadcastChannel(name);
@@ -6238,27 +5798,69 @@ if(globalThis?.document){
 }
 
 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;
@@ -6278,25 +5880,23 @@ exports.ZikoHead = ZikoHead;
 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;
@@ -6318,14 +5918,13 @@ exports.bindWheelEvent = bindWheelEvent;
 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;
@@ -6344,6 +5943,7 @@ exports.getEvent = getEvent;
 exports.hypot = hypot;
 exports.inRange = inRange;
 exports.isApproximatlyEqual = isApproximatlyEqual;
+exports.isStateGetter = isStateGetter;
 exports.json2arr = json2arr;
 exports.json2css = json2css;
 exports.json2csv = json2csv;
@@ -6356,6 +5956,7 @@ exports.lerp = lerp;
 exports.linspace = linspace;
 exports.ln = ln;
 exports.logspace = logspace;
+exports.loop = loop;
 exports.map = map;
 exports.mapfun = mapfun$1;
 exports.matrix = matrix;
@@ -6371,23 +5972,23 @@ exports.nums = nums;
 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;
@@ -6400,27 +6001,28 @@ exports.tan = tan;
 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;