ziko 0.41.2 → 0.42.1

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sat Aug 23 2025 14:24:46 GMT+0100 (UTC+01:00)
+  Date : Sun Aug 24 2025 12:52:45 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
@@ -17,23 +17,23 @@
     const { PI: PI$2, E } = Math;
     const EPSILON=Number.EPSILON;
 
-    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;
+    const {PI: PI$1, cos: cos$3, sin: sin$3, tan: tan$1, acos: acos$2, asin: asin$1, atan: atan$1, cosh: cosh$2, sinh: sinh$2, tanh: tanh$1, acosh: acosh$1, asinh: asinh$1, atanh: atanh$1, log: log$1} = Math;
     let Fixed={
-        cos: cos$2,
-        sin: sin$2,
+        cos: cos$3,
+        sin: sin$3,
         tan: tan$1,
-        sinc: x => sin$2(PI$1*x)/(PI$1*x),
-        sec: x => 1/cos$2(x),
-        csc: x => 1/sin$2(x),
+        sinc: x => sin$3(PI$1*x)/(PI$1*x),
+        sec: x => 1/cos$3(x),
+        csc: x => 1/sin$3(x),
         cot: x => 1/tan$1(x),
         acos: acos$2,
         asin: asin$1,
         atan: atan$1,
         acot: x => PI$1/2-atan$1(x),
-        cosh: cosh$1,
-        sinh: sinh$1,
+        cosh: cosh$2,
+        sinh: sinh$2,
         tanh: tanh$1,
-        coth: n => (1/2*log((1+n)/(1-n))),
+        coth: n => (1/2*log$1((1+n)/(1-n))),
         acosh: acosh$1,
         asinh: asinh$1,
         atanh: atanh$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$1(b),e(a)*sin$1(b)); // Done
+                    case Math.exp: return complex(e(a)*cos$2(b),e(a)*sin$2(b)); // Done
                     case Math.abs: return z; // Done
-                    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 Math.sqrt: return complex(sqrt$2(z)*cos$2(phi/2),sqrt$2(z)*sin$2(phi/2)); // Done
+                    case Fixed.cos: return complex(cos$2(a)*cosh$1(b),-(sin$2(a)*sinh$1(b)));
+                    case Fixed.sin: return complex(sin$2(a)*cosh$1(b),cos$2(a)*sinh$1(b));
                     case Fixed.tan:{
-                        const DEN = cos$1(2*a)+cosh(2*b);
-                        return complex(sin$1(2*a)/DEN,sinh(2*b)/DEN);
+                        const DEN = cos$2(2*a)+cosh$1(2*b);
+                        return complex(sin$2(2*a)/DEN,sinh$1(2*b)/DEN);
                     }
-                    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.cosh:return complex(cosh$1(a)*cos$2(b),sinh$1(a)*sin$2(b));
+                    case Fixed.sinh:return complex(sinh$1(a)*cos$2(b),cosh$1(a)*sin$2(b));
                     case Fixed.tanh:{
-                        const DEN=cosh(2*a)+cos$1(2*b);
-                        return complex(sinh(2*a)/DEN,sin$1(2*b)/DEN)
+                        const DEN=cosh$1(2*a)+cos$2(2*b);
+                        return complex(sinh$1(2*a)/DEN,sin$2(2*b)/DEN)
                     }
                     default : return fun(x)
                 }
@@ -951,6 +951,21 @@
         }
     };
 
+    async function fetchdom(url='https://github.com/zakarialaoui10'){
+      const data=await fetch(url);
+      const html=await data.text();
+      const dom= new DOMParser().parseFromString(html,'text/xml');
+      return dom.documentElement
+    }
+    function fetchdomSync(url='https://github.com/zakarialaoui10'){
+      const data=preload(url);
+      const dom= new DOMParser().parseFromString(data,'text/xml');
+      return dom.documentElement;
+    }
+
+    globalThis.fetchdom=fetchdom;
+    globalThis.fetchdomSync=fetchdomSync;
+
     const csv2arr = (csv, delimiter = ",")=>csv.trim().trimEnd().split("\n").map(n=>n.split(delimiter));
     const csv2matrix = (csv, delimiter = ",")=>new Matrix(csv2arr(csv,delimiter));
     const csv2object = (csv, delimiter = ",") => {
@@ -1106,59 +1121,188 @@
       else register_to_instance(target, ...mixins);
       };
 
+    function parseQueryParams$1(queryString) {
+        const params = {};
+        queryString.replace(/[A-Z0-9]+?=([\w|:|\/\.]*)/gi, (match) => {
+            const [key, value] = match.split('=');
+            params[key] = value;
+        });
+        return params;
+    }
+
+    function defineParamsGetter$1(target ){
+        Object.defineProperties(target, {
+            'QueryParams': {
+                get: function() {
+                    return parseQueryParams$1(globalThis.location.search.substring(1));
+                },
+                configurable: false,
+                enumerable: true 
+            },
+            'HashParams': {
+                get: function() {
+                    const hash = globalThis.location.hash.substring(1);
+                    return hash.split("#");
+                },
+                configurable: false,
+                enumerable: true 
+            }
+        });
+    }
+
+    class UIStore extends Array {
+        constructor(...args) {
+            super(...args); 
+        }
+        getItemById(id) {
+            return this.find(n => n.element.id === id);
+        }
+        getItemsByTagName(tag) {
+            return this.filter(n => n.element.tagName.toLowerCase() === tag.toLowerCase());
+        }
+        getElementsByClassName(className) {
+            return this.filter(n => n.element.classList?.contains(className));
+        }
+        querySelector(selector) {
+            const el = globalThis?.document?.querySelector(selector);
+            if (!el) return null;
+            return this.find(ui => ui.element === el) || null;
+        }
+        querySelectorAll(selector) {
+            const els = globalThis?.document?.querySelectorAll(selector);
+            return Array.from(els)
+                .map(el => this.find(ui => ui.element === el))
+                .filter(Boolean);
+        }
+    }
+
+    // create the singleton
+    const __UI__ = new UIStore();
+
+    const __Config__ = {
+        default:{
+            target:null,
+            render:true,
+            math:{
+                mode:"deg"
+            }
+        },
+        setDefault:function(pairs){
+            const keys=Object.keys(pairs);
+            const values=Object.values(pairs);
+            for(let i=0; i<keys.length; i++) this.default[keys[i]]=values[i];
+        },
+        init:()=>{
+            // document.documentElement.setAttribute("data-engine","zikojs")
+        },
+        renderingMode :"spa",
+        isSSC : false,
+    };
+
+    const __HYDRATION__ = {
+        store : new Map(),
+        index : 0,
+        register: function(component){
+            this.store.set(this.index++, component);
+        }
+    };
+
+    const __CACHE__ = {
+        ui_index : 0,
+        get_ui_index:function(){
+            return this.ui_index ++
+        },
+        register_ui: function(UIElement){
+            
+        }
+    };
+
+    const __State__ = {
+        store : new Map(),
+        index : undefined?.data?.__Ziko__?.__State__?.index ?? 0,
+        register: function(state){
+            console.log({
+                hmr : undefined?.data.__Ziko__.__State__.index,
+                index : this.index
+            });
+            this.store.set(this.index++, state);
+        }
+        
+    };
+
+    function __init__global__(){
+        if ( !globalThis?.__Ziko__ ){
+            globalThis.__Ziko__ = {
+                        __UI__,
+                        __HYDRATION__,
+                        __State__,
+                        __Config__,
+                        __CACHE__,
+                    };
+            defineParamsGetter$1(__Ziko__);
+        }
+    }
+
+    if(!globalThis.__Ziko__) __init__global__();
+
+        // HMR persistence
+    if (undefined) {
+        undefined.data.__Ziko__ = undefined.data.__Ziko__ || globalThis.__Ziko__;
+        globalThis.__Ziko__ = undefined.data.__Ziko__;
+        // import.meta.hot.accept(n=>console.log(n));
+        // console.log(import.meta.hot.data.__Ziko__.__State__.store)
+    }
+
+
+
     function useState(initialValue) {
-        let value = initialValue;
-        const subscribers = new Set();
-        let paused = false;
+
+        // console.log(import.meta.hot.data.__Ziko__.__State__.store.get(0))
+
+        const {store, index} = __Ziko__.__State__;
+        __Ziko__.__State__.register({
+                value : initialValue,
+                subscribers : new Set(),
+                paused : false
+        });
+
+        const current = store.get(index);
 
         function getValue() {
             return {
-                value,
+                value: current.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 });
-                },
+                _subscribe: (fn) => current.subscribers.add(fn),
             };
         }
 
         function setValue(newValue) {
-            if (paused) return;
-            if (typeof newValue === "function") newValue = newValue(value);
-            if (newValue !== value) {
-                value = newValue;
-                subscribers.forEach(fn => fn(value));
+            if (current.paused) return;
+            if (typeof newValue === "function") newValue = newValue(current.value);
+            if (newValue !== current.value) {
+                current.value = newValue;
+                current.subscribers.forEach(fn => fn(current.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));
+            pause: () => { current.paused = true; },
+            resume: () => { current.paused = false; },
+            clear: () => { current.subscribers.clear(); },
+            force: (newValue) => {
+                if (typeof newValue === "function") newValue = newValue(current.value);
+                current.value = newValue;
+                current.subscribers.forEach(fn => fn(current.value));
             },
-            getSubscribers: () => new Set(subscribers),
+            getSubscribers: () => new Set(current.subscribers),
         };
 
         return [getValue, setValue, controller];
     }
 
+
     const isStateGetter = (arg) => {
-        return typeof(arg) === 'function' && arg?.()?.isStateGetter?.()
+        return typeof arg === 'function' && arg?.()?.isStateGetter?.();
     };
 
     const camel2hyphencase = (text = '') => text.replace(/[A-Z]/g, match => '-' + match.toLowerCase());
@@ -2737,110 +2881,9 @@
 
     const useMediaQuery = (mediaQueryRules,fallback) => new ZikoUseMediaQuery(mediaQueryRules,fallback);
 
-    function parseQueryParams$1(queryString) {
-        const params = {};
-        queryString.replace(/[A-Z0-9]+?=([\w|:|\/\.]*)/gi, (match) => {
-            const [key, value] = match.split('=');
-            params[key] = value;
-        });
-        return params;
-    }
-
-    function defineParamsGetter$1(target ){
-        Object.defineProperties(target, {
-            'QueryParams': {
-                get: function() {
-                    return parseQueryParams$1(globalThis.location.search.substring(1));
-                },
-                configurable: false,
-                enumerable: true 
-            },
-            'HashParams': {
-                get: function() {
-                    const hash = globalThis.location.hash.substring(1);
-                    return hash.split("#");
-                },
-                configurable: false,
-                enumerable: true 
-            }
-        });
-    }
-
-    const __UI__={
-        __all__(){
-            return Object.values(this)
-              .filter(Array.isArray)
-              .flat();
-        },
-        querySelectorAll(){
-            return this.__all__().filter(n=>n)
-        },
-        getElementByIndex(index){
-            return this.__all__().find(n=>n.ui_index===index);
-        },
-        getElementById(id){
-            return null;
-        },
-        getElementsByClass(){
-
-        },
-        getElementsByTagName(){
-            
-        }
-    };
-
-    const __Config__ = {
-        default:{
-            target:null,
-            render:true,
-            math:{
-                mode:"deg"
-            }
-        },
-        setDefault:function(pairs){
-            const keys=Object.keys(pairs);
-            const values=Object.values(pairs);
-            for(let i=0; i<keys.length; i++) this.default[keys[i]]=values[i];
-        },
-        init:()=>{
-            // document.documentElement.setAttribute("data-engine","zikojs")
-        },
-        renderingMode :"spa",
-        isSSC : false,
-    };
-
-    const __HYDRATION__ = {
-        map : new Map(),
-        index : 0,
-        increment : function(){
-            return this.index ++
-        }
-    };
-    const __HYDRATION_MAP__ = new Map();
-
-    const __CACHE__ = {
-        ui_index : 0,
-        get_ui_index:function(){
-            return this.ui_index ++
-        }
-    };
-
-    function __init__global__(){
-        if ( !globalThis?.__Ziko__ ){
-            globalThis.__Ziko__ = {
-                        __UI__,
-                        __HYDRATION__,
-                        __HYDRATION_MAP__,
-                        __Config__,
-                        __CACHE__,
-                    };
-            defineParamsGetter$1(__Ziko__);
-        }
-    }
-
     __init__global__();
     class UIElement extends UINode{
-      constructor({element, name ='', type="html", useDefaultStyle=false}={}){
+      constructor({element, name ='', type="html", render = __Ziko__.__Config__.default.render, useDefaultStyle=false}={}){
         super();
         this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
         if(typeof element === "string") {
@@ -2891,8 +2934,8 @@
           resize:null,
           intersection:null
         };
-        if(element)Object.assign(this.cache,{element});
-        this.uuid = `${this.cache.name}-${Random.string(16)}`;
+        if(element) Object.assign(this.cache,{element});
+        // this.uuid = `${this.cache.name}-${Random.string(16)}`
         this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index();
         useDefaultStyle && this.style({ 
           position: "relative",
@@ -2902,9 +2945,9 @@
           width : "auto",
           height : "auto"
          });
-        this.items = [];
+        this.items = new UIStore();
         globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
-        element && globalThis.__Ziko__.__Config__.default.render && this?.render?.();
+        element && render && this?.render?.();
         if(
           // globalThis.__Ziko__.__Config__.renderingMode !== "spa" 
           // && 
@@ -2913,9 +2956,9 @@
           this.isInteractive()
         ){
           this.setAttr("ziko-hydration-index", globalThis.__Ziko__.__HYDRATION__.index);
-          globalThis.__Ziko__.__HYDRATION__.map.set(globalThis.__Ziko__.__HYDRATION__.index, ()=>this);
-          globalThis.__Ziko__.__HYDRATION__.increment();
+          globalThis.__Ziko__.__HYDRATION__.register(() => this);
         }
+        globalThis.__Ziko__.__UI__.push(this);
       }
       get element(){
         return this.cache.element;
@@ -2966,14 +3009,13 @@
         return this.element.getBoundingClientRect().left;
       }
       clone(render=false) {
-        const UI = new this.constructor();
-        UI.__proto__=this.__proto__;
-        if(this.items.length){
-          const items = [...this.items].map(n=>n.clone());
-          UI.append(...items);
-        }
-        else UI.element=this.element.cloneNode(true);
-        return UI.render(render);
+        // UI.__proto__=this.__proto__;
+        // if(this.items.length){
+        //   const items = [...this.items].map(n=>n.clone());
+        //   UI.append(...items);
+        // }
+        // else UI.element=this.element.cloneNode(true);
+        // return UI.render(render);
       }
       [Symbol.iterator]() {
         return this.items[Symbol.iterator]();
@@ -2992,14 +3034,14 @@
         this.cache.isFrozzen=freeze;
         return this;
       }
-      setTarget(tg) {
-        if(this.isBody) return ;
-        if (tg?.isZikoUIElement) tg = tg.element;
-        this.unrender();
-        this.target = tg;
-        this.render();
-        return this;
-      }
+      // setTarget(tg) {
+      //   if(this.isBody) return ;
+      //   if (tg?.isZikoUIElement) tg = tg.element;
+      //   this.unrender();
+      //   this.target = tg;
+      //   this.render();
+      //   return this;
+      // }
       describe(label){
         if(label)this.setAttr("aria-label",label);
       }
@@ -3660,7 +3702,15 @@
 
       const Svg =(w,h)=>new ZikoUISvg(w,h);
 
-    function defineWC(name, UIElement, props = {}, { mode = 'open'} = {}) {
+    function define_wc(name, UIElement, props = {}, { mode = 'open'} = {}) {
+        if (globalThis.customElements?.get(name)) {
+            console.warn(`Custom element "${name}" is already defined`);
+            return; // skip redefinition
+        }
+        if(name.search('-') === -1){
+            console.warn(`"${name}" is not a valid custom element name`);
+            return; 
+        }
         globalThis.customElements?.define(
             name,
             class extends HTMLElement {
@@ -4522,7 +4572,7 @@
                 }
                 else if(("a" in b && "z" in a)){
                     this.a=a.a;
-                    this.b=sqrt$1((a.z**2)-(a.a**2));
+                    this.b=sqrt$2((a.z**2)-(a.a**2));
                 }
                 else if(("a" in b && "phi" in a)){
                     this.a=a.a;
@@ -4530,15 +4580,15 @@
                 }
                 else if(("b" in b && "z" in a)){
                     this.b=a.b;
-                    this.a=sqrt$1((a.z**2)-(a.b**2));
+                    this.a=sqrt$2((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$1(a.phi);
-                    this.a=a.z*sin$1(a.phi);
+                    this.a=a.z*cos$2(a.phi);
+                    this.a=a.z*sin$2(a.phi);
                 }
             }
             else if(typeof(a)==="number"&&typeof(b)==="number"){
@@ -4606,8 +4656,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$1(phi).toFixed(15)).toFixed(14);
-            this.b=+(Z*sin$1(phi).toFixed(15)).toFixed(14);    
+            this.a=+(Z*cos$2(phi).toFixed(15)).toFixed(14);
+            this.b=+(Z*sin$2(phi).toFixed(15)).toFixed(14);    
             return this;
         }
         div(...z) {
@@ -4616,23 +4666,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$1(phi).toFixed(15)).toFixed(15);
-            this.b=+(Z*sin$1(phi).toFixed(15)).toFixed(15);
+            this.a=+(Z*cos$2(phi).toFixed(15)).toFixed(15);
+            this.b=+(Z*sin$2(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$1(phi).toFixed(15)).toFixed(15);
-                this.b=+(z*sin$1(phi).toFixed(15)).toFixed(15);
+                this.a=+(z*cos$2(phi).toFixed(15)).toFixed(15);
+                this.b=+(z*sin$2(phi).toFixed(15)).toFixed(15);
             }
             return this;
         }
         static fromExpo(z, phi) {
             return new Complex(
-                +(z * cos$1(phi)).toFixed(13), 
-                +(z * sin$1(phi)).toFixed(13)
+                +(z * cos$2(phi)).toFixed(13), 
+                +(z * sin$2(phi)).toFixed(13)
                 );
         }
         get expo() {
@@ -4654,10 +4704,10 @@
             return z.clone.pow(n);
         }
         static xpowZ(x){
-            return complex((x**this.a)*cos$1(this.b*ln(x)),(x**this.a)*sin$1(this.b*ln(x)));
+            return complex((x**this.a)*cos$2(this.b*ln(x)),(x**this.a)*sin$2(this.b*ln(x)));
         }
         sqrtn(n=2){
-            return complex(sqrtn(this.z,n)*cos$1(this.phi/n),sqrtn(this.z,n)*sin$1(this.phi/n));
+            return complex(sqrtn(this.z,n)*cos$2(this.phi/n),sqrtn(this.z,n)*sin$2(this.phi/n));
         }
         get sqrt(){
             return this.sqrtn(2);
@@ -4666,14 +4716,14 @@
             return complex(this.z,this.phi);
         }
         get cos(){
-            return complex(cos$1(this.a)*cosh(this.b),sin$1(this.a)*sinh(this.b))
+            return complex(cos$2(this.a)*cosh$1(this.b),sin$2(this.a)*sinh$1(this.b))
         }
         get sin(){
-            return complex(sin$1(this.a)*cosh(this.b),cos$1(this.a)*sinh(this.b))
+            return complex(sin$2(this.a)*cosh$1(this.b),cos$2(this.a)*sinh$1(this.b))
         }
         get tan(){
-            const de=cos$1(this.a*2)+cosh(this.b*2);
-            return complex(sin$1(2*this.a)/de,sinh(2*this.b)/de);
+            const de=cos$2(this.a*2)+cosh$1(this.b*2);
+            return complex(sin$2(2*this.a)/de,sinh$1(2*this.b)/de);
         }
         printInConsole() {
             let string = this.a + " + " + this.b + " * i";
@@ -4704,7 +4754,7 @@
     // } from "../calculus/index.js";
 
     const abs=(...x)=>mapfun$1(Math.abs,...x);
-    const sqrt$1=(...x)=>mapfun$1(Math.sqrt,...x);
+    const sqrt$2=(...x)=>mapfun$1(Math.sqrt,...x);
     const pow$1=(x,n)=>{
         if(typeof x === "number"){
             if(typeof n === "number")return Math.pow(x,n);
@@ -4752,8 +4802,8 @@
     };
     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 cos$2=(...x) => mapfun$1(Fixed.cos,...x);
+    const sin$2=(...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);
@@ -4763,8 +4813,8 @@
     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 cosh$1=(...x) => mapfun$1(Fixed.cosh,...x);
+    const sinh$1=(...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);
@@ -4813,12 +4863,12 @@
         )
     };
 
-    const {PI, sqrt, cos, sin, acos, pow} = Math;
+    const {PI, sqrt: sqrt$1, cos: cos$1, sin: sin$1, 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 InSin = t => 1 - cos$1((t * PI) / 2);
+    const OutSin = t => sin$1((t * PI) / 2);
+    const InOutSin = t => -(cos$1(PI * t) - 1) / 2;
 
     const InQuad = t => t**2;
     const OutQuad = t => 1 - (1-t)**2;
@@ -4840,13 +4890,13 @@
     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 InCirc = t => 1 - sqrt$1(1 - t**2);
+    const OutCirc = t => sqrt$1(1 - (t-1)**2);
+    const InOutCirc = t => t < 0.5? (1 - sqrt$1(1 - (2*t)**2)) / 2: (sqrt$1(1 - (-2*t+2)**2) + 1) / 2;
 
-    const Arc = t => 1 - sin(acos(t));
+    const Arc = t => 1 - sin$1(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 Elastic = t => -2*pow(2, 10 * (t - 1)) * cos$1(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); 
@@ -4857,7 +4907,7 @@
         ? 0
         : t === 1
         ? 1
-        : -pow(2, 10 * t - 10) * sin((t * 10 - 10.75) * c4);    
+        : -pow(2, 10 * t - 10) * sin$1((t * 10 - 10.75) * c4);    
     };
 
     const OutElastic = (t, c4 = 2*PI/3) => {
@@ -4865,7 +4915,7 @@
         ? 0
         : t === 1
         ? 1
-        : pow(2, -10 * t) * sin((t * 10 - 0.75) * c4) + 1;
+        : pow(2, -10 * t) * sin$1((t * 10 - 0.75) * c4) + 1;
     }; 
     const InOutElastic = (t, c5 = 2 * PI / 4.5) => {
         return t === 0
@@ -4873,8 +4923,8 @@
         : 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;
+        ? -(pow(2, 20 * t - 10) * sin$1((20 * t - 11.125) * c5)) / 2
+        : (pow(2, -20 * t + 10) * sin$1((20 * t - 11.125) * c5)) / 2 + 1;
     };
 
     const InBounce = (t, n1 = 7.5625, d1 = 2.75) => 1 - OutBounce(1-t, n1, d1);
@@ -4982,17 +5032,28 @@
       new TimeAnimation(callback, {ease, t0, t1, start, duration});
 
     class Tick {
-      constructor(ms, fn) {
+      constructor(fn, ms, count = Infinity, start) {
         this.ms = ms;
         this.fn = fn;
+        this.count = count;
+        this.frame = 1;
         this.id = null;
         this.running = false;
+        if(start) this.start();
       }
 
       start() {
         if (!this.running) {
           this.running = true;
-          this.id = setInterval(this.fn, this.ms);
+          this.frame = 1;
+          this.id = setInterval(() => {
+            if (this.frame > this.count) {
+              this.stop();
+              return;
+            }
+            this.fn.call(null, this);
+            this.frame++;
+          }, this.ms);
         }
         return this;
       }
@@ -5010,7 +5071,9 @@
         return this.running;
       }
     }
-    const tick = (ms, fn) => new Tick(ms, fn);
+
+    // Helper factory
+    const tick = (fn, ms, count = Infinity, start = true) => new Tick(fn, ms, count, start);
 
     class Clock extends Tick {
       constructor(tickMs = 1000 / 60) {
@@ -5142,7 +5205,8 @@
     const step_fps = (step_or_fps) => 1000 / step_or_fps;
 
     const debounce=(fn,delay=1000)=>{
-        return (...args) => setTimeout(()=>fn(...args),delay);
+        let id;
+        return (...args) => id ? clearTimeout(id) : setTimeout(()=>fn(...args),delay);
     };
     const throttle=(fn,delay)=>{
         let lastTime=0;
@@ -5547,57 +5611,37 @@
     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) => {
-                    subscribers.add(fn);
-                },
-            };
-        }
-
-        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];
+        return () => ({
+            value,
+            isStateGetter : () => true,
+            _subscribe: (fn) => subscribers.add(fn)
+        })
     }
 
-    const useReactive = (nested_value) => mapfun$1(n => useState(n), nested_value);
+    const useReactive = (nested_value) => mapfun$1(
+        n => {
+            const state = useState(n);
+            // console.log(state)
+            return {
+                get : state[0],
+                set : state[1],
+            }
+        }, 
+        nested_value
+    );
 
     class ZikoUseChannel{
         constructor(name = ""){
@@ -5833,6 +5877,65 @@
     const useLocaleStorage=(key,initialValue)=>new ZikoUseStorage(localStorage,key,initialValue);
     const useSessionStorage=(key,initialValue)=>new ZikoUseStorage(sessionStorage,key,initialValue);
 
+    let {sqrt, cos, sin, exp, log, cosh, sinh} = Math;
+    // Math.abs = new Proxy(Math.abs, {
+    //   apply(target, thisArg, args) {
+    //     const x = args[0]
+    //       if(typeof x === 'number') return target.apply(thisArg, args);
+    //       if(x?.isComplex?.()){
+    //         const {a, b, z, phi} = x
+    //         const complex = (a, b) => new x.constructor(a, b) 
+    //         switch(target.name){
+    //           case 'abs' : return a.z;
+    //           case 'sqrt' : return complex(sqrt(z)*cos(phi/2),sqrt(z)*sin(phi/2));
+    //         }
+    //       }
+          
+    //   }
+    // });
+
+
+    for (const key of Object.getOwnPropertyNames(Math)) {
+      const fn = Math[key];
+      if (typeof fn === "function") {
+        Math[key] = new Proxy(fn, {
+          apply(target, thisArg, args) {
+            // console.log(target)
+            const x = args[0];
+            if(typeof x === 'number' || args.length === 0) return target.apply(thisArg, args);
+            if(x?.isComplex?.()){
+                const {a, b, z, phi} = x;
+                const complex = (a, b) => new x.constructor(a, b);
+                switch(target.name){
+                    case 'abs' : return x.z;
+                    case 'sqrt' : return complex(sqrt(z)*cos(phi/2),sqrt(z)*sin(phi/2));
+                    case 'log' : return complex(log(z), phi);
+                    case 'exp' : return complex(exp(a)*cos(b),exp(a)*sin(b));
+                    case 'cos' : return complex(cos(a)*cosh(b),-(sin(a)*sinh(b)));
+                    case 'sin' : return complex(sin(a)*cosh(b),cos(a)*sinh(b));
+                    case 'tan' : {
+                        const DEN = cos(2*a)+cosh(2*b);
+                        return complex(sin(2*a) /DEN, sinh(2*b)/DEN);
+                    }
+                    case 'cosh' : return complex(cosh(a)*cos(b),sinh(a)*sin(b));
+                    case 'sinh' : return complex(sinh(a)*cos(b),cosh(a)*sin(b));
+                    case 'tanh' : {
+                        const DEN=cosh(2*a)+cos(2*b);
+                        return complex(sinh(2*a)/DEN,sin(2*b)/DEN)
+                    }
+                    default : return target.apply(thisArg, args)
+                 }
+            }
+            // if( x.isMatrix?.()){
+            //     const {rows, cols, arr} = x
+            //     // return new x.constructor(rows, cols, arr.flat(1).map(n=>));
+            // }
+            throw new TypeError(`Math.${key} expects only numbers`);
+          }
+        });
+      }
+    }
+
     if(globalThis?.document){
         document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());
     }
@@ -5961,8 +6064,8 @@
     exports.clock = clock;
     exports.combinaison = combinaison;
     exports.complex = complex;
-    exports.cos = cos$1;
-    exports.cosh = cosh;
+    exports.cos = cos$2;
+    exports.cosh = cosh$1;
     exports.cot = cot;
     exports.coth = coth;
     exports.csc = csc;
@@ -5973,7 +6076,7 @@
     exports.csv2sql = csv2sql;
     exports.debounce = debounce;
     exports.defineParamsGetter = defineParamsGetter;
-    exports.defineWC = defineWC;
+    exports.define_wc = define_wc;
     exports.deg2rad = deg2rad;
     exports.div = div;
     exports.e = e;
@@ -6023,11 +6126,11 @@
     exports.sec = sec;
     exports.sig = sig;
     exports.sign = sign;
-    exports.sin = sin$1;
+    exports.sin = sin$2;
     exports.sinc = sinc;
-    exports.sinh = sinh;
+    exports.sinh = sinh$1;
     exports.sleep = sleep;
-    exports.sqrt = sqrt$1;
+    exports.sqrt = sqrt$2;
     exports.sqrtn = sqrtn;
     exports.step_fps = step_fps;
     exports.sub = sub;