ziko 0.41.2 → 0.42.1

package/dist/ziko.mjs

@@ -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
@@ -11,23 +11,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,
@@ -61,20 +61,20 @@ const mapfun$1=(fun,...X)=>{
             const [a,b,z,phi]=[x.a,x.b,x.z,x.phi];
             switch(fun){
                 case Math.log: return complex(ln(z),phi); // Done
-                case Math.exp: return complex(e(a)*cos$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)
             }
@@ -945,6 +945,21 @@ const preload=(url)=>{
     }
 };
 
+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 = ",") => {
@@ -1100,59 +1115,188 @@ const register = (target, ...mixins) => {
   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 : import.meta.hot?.data?.__Ziko__?.__State__?.index ?? 0,
+    register: function(state){
+        console.log({
+            hmr : import.meta.hot?.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 (import.meta.hot) {
+    import.meta.hot.data.__Ziko__ = import.meta.hot.data.__Ziko__ || globalThis.__Ziko__;
+    globalThis.__Ziko__ = import.meta.hot.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());
@@ -2731,110 +2875,9 @@ class ZikoUseMediaQuery {
 
 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") {
@@ -2885,8 +2928,8 @@ class UIElement extends UINode{
       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",
@@ -2896,9 +2939,9 @@ class UIElement extends UINode{
       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" 
       // && 
@@ -2907,9 +2950,9 @@ class UIElement extends UINode{
       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;
@@ -2960,14 +3003,13 @@ class UIElement extends UINode{
     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]();
@@ -2986,14 +3028,14 @@ class UIElement extends UINode{
     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);
   }
@@ -3654,7 +3696,15 @@ class ZikoUISvg extends UIElement {
 
   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 {
@@ -4516,7 +4566,7 @@ class Complex extends ZikoMath{
             }
             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;
@@ -4524,15 +4574,15 @@ class Complex extends ZikoMath{
             }
             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"){
@@ -4600,8 +4650,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$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) {
@@ -4610,23 +4660,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$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() {
@@ -4648,10 +4698,10 @@ class Complex extends ZikoMath{
         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);
@@ -4660,14 +4710,14 @@ class Complex extends ZikoMath{
         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";
@@ -4698,7 +4748,7 @@ const complex=(a,b)=>{
 // } 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);
@@ -4746,8 +4796,8 @@ const sqrtn=(x,n)=>{
 };
 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);
@@ -4757,8 +4807,8 @@ 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 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);
@@ -4807,12 +4857,12 @@ const hypot=(...x)=>{
     )
 };
 
-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;
@@ -4834,13 +4884,13 @@ 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 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); 
@@ -4851,7 +4901,7 @@ const InElastic = (t, c4 = 2*PI/3) => {
     ? 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) => {
@@ -4859,7 +4909,7 @@ const OutElastic = (t, c4 = 2*PI/3) => {
     ? 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
@@ -4867,8 +4917,8 @@ const InOutElastic = (t, c5 = 2 * PI / 4.5) => {
     : 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);
@@ -4976,17 +5026,28 @@ const animation = (callback, {ease, t0, t1, start, duration} = {}) =>
   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;
   }
@@ -5004,7 +5065,9 @@ class Tick {
     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) {
@@ -5136,7 +5199,8 @@ const Scheduler = (tasks, { repeat = null} = {}) => new TimeScheduler(tasks, { r
 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;
@@ -5541,57 +5605,37 @@ function findCommonPath(paths) {
 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 = ""){
@@ -5827,8 +5871,67 @@ class ZikoUseStorage{
 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());
 }
 
-export { App, Arc, Back, Base, Canvas, Clock, Combinaison, Complex, Discret, E, EPSILON, Elastic, FileBasedRouting, Flex, Grid$1 as Grid, HTMLWrapper, InBack, InBounce, InCirc, InCubic, InElastic, InExpo, InOutBack, InOutBounce, InOutCirc, InOutCubic, InOutElastic, InOutExpo, InOutQuad, InOutQuart, InOutQuint, InOutSin, InQuad, InQuart, InQuint, InSin, Linear, Logic$1 as Logic, Matrix, OutBack, OutBounce, OutCirc, OutCubic, OutElastic, OutExpo, OutQuad, OutQuart, OutQuint, OutSin, PI$2 as PI, Permutation, Random, SPA, SVGWrapper, Scheduler, Step, Suspense, Svg, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement, UINode, Utils, ZikoApp, ZikoCustomEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventCustom, ZikoEventDrag, ZikoEventFocus, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventTouch, ZikoEventWheel, ZikoHead, ZikoMutationObserver, ZikoSPA, ZikoUICanvas, ZikoUIFlex, ZikoUIGrid, ZikoUIHTMLWrapper, ZikoUISVGWrapper, ZikoUISuspense, ZikoUISvg, ZikoUIText, ZikoUIXMLWrapper, ZikoUseRoot, __ZikoEvent__, abs, accum, acos$1 as acos, acosh, acot, add, animation, arange, arr2str, asin, asinh, atan, atan2, atanh, bindClickEvent, bindClipboardEvent, bindCustomEvent, bindDragEvent, bindFocusEvent, bindHashEvent, bindKeyEvent, bindMouseEvent, bindPointerEvent, bindTouchEvent, bindWheelEvent, cartesianProduct, ceil, clamp, clock, combinaison, complex, cos$1 as cos, cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, defineWC, deg2rad, div, e, fact, floor, geomspace, getEvent, hypot, inRange, isApproximatlyEqual, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linspace, ln, logspace, loop, map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ones, pgcd, pow$1 as pow, powerSet, ppcm, preload, prod, rad2deg, round, sec, sig, sign, sin$1 as sin, sinc, sinh, sleep, sqrt$1 as sqrt, sqrtn, step_fps, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, useChannel, useCustomEvent, useDerived, useEventEmitter, useFavIcon, useHashEvent, useHead, useInputEvent, useLocaleStorage, useMediaQuery, useMeta, useReactive, useRoot, useSessionStorage, useState, useSuccesifKeys, useSwipeEvent, useThread, useTitle, wait, waitForUIElm, waitForUIElmSync, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };
+export { App, Arc, Back, Base, Canvas, Clock, Combinaison, Complex, Discret, E, EPSILON, Elastic, FileBasedRouting, Flex, Grid$1 as Grid, HTMLWrapper, InBack, InBounce, InCirc, InCubic, InElastic, InExpo, InOutBack, InOutBounce, InOutCirc, InOutCubic, InOutElastic, InOutExpo, InOutQuad, InOutQuart, InOutQuint, InOutSin, InQuad, InQuart, InQuint, InSin, Linear, Logic$1 as Logic, Matrix, OutBack, OutBounce, OutCirc, OutCubic, OutElastic, OutExpo, OutQuad, OutQuart, OutQuint, OutSin, PI$2 as PI, Permutation, Random, SPA, SVGWrapper, Scheduler, Step, Suspense, Svg, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement, UINode, Utils, ZikoApp, ZikoCustomEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventCustom, ZikoEventDrag, ZikoEventFocus, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventTouch, ZikoEventWheel, ZikoHead, ZikoMutationObserver, ZikoSPA, ZikoUICanvas, ZikoUIFlex, ZikoUIGrid, ZikoUIHTMLWrapper, ZikoUISVGWrapper, ZikoUISuspense, ZikoUISvg, ZikoUIText, ZikoUIXMLWrapper, ZikoUseRoot, __ZikoEvent__, abs, accum, acos$1 as acos, acosh, acot, add, animation, arange, arr2str, asin, asinh, atan, atan2, atanh, bindClickEvent, bindClipboardEvent, bindCustomEvent, bindDragEvent, bindFocusEvent, bindHashEvent, bindKeyEvent, bindMouseEvent, bindPointerEvent, bindTouchEvent, bindWheelEvent, cartesianProduct, ceil, clamp, clock, combinaison, complex, cos$2 as cos, cosh$1 as cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, div, e, fact, floor, geomspace, getEvent, hypot, inRange, isApproximatlyEqual, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linspace, ln, logspace, loop, map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ones, pgcd, pow$1 as pow, powerSet, ppcm, preload, prod, rad2deg, round, sec, sig, sign, sin$2 as sin, sinc, sinh$1 as sinh, sleep, sqrt$2 as sqrt, sqrtn, step_fps, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, useChannel, useCustomEvent, useDerived, useEventEmitter, useFavIcon, useHashEvent, useHead, useInputEvent, useLocaleStorage, useMediaQuery, useMeta, useReactive, useRoot, useSessionStorage, useState, useSuccesifKeys, useSwipeEvent, useThread, useTitle, wait, waitForUIElm, waitForUIElmSync, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };