ziko 0.0.7 → 0.0.9

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Mon May 20 2024 19:37:06 GMT+0100 (UTC+01:00)
+  Date : Thu Jun 13 2024 19:22:25 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
@@ -3242,7 +3242,7 @@
       //     if(up)this.handleUp()
       // }
   }
-  var Pointer=target=>new ZikoEventPointer(target);
+  var usePointerEvent=target=>new ZikoEventPointer(target);
 
   class ZikoEventMouse extends ZikoEvent{
       constructor(target){
@@ -3471,7 +3471,7 @@
           null    
       );
   }
-  const Mouse=target=>new ZikoEventMouse(target);
+  const useMouseEvent=target=>new ZikoEventMouse(target);
 
   function wheel_controller(e){
       EVENT_CONTROLLER.call(this,e,"wheel",null,null);
@@ -3514,7 +3514,7 @@
           return this;
        }    
   }
-  const Wheel=Target=>new ZikoEventWheel(Target);
+  const useWheelEventnent=Target=>new ZikoEventWheel(Target);
 
   function keydown_controller(e){
       EVENT_CONTROLLER.call(
@@ -3611,7 +3611,7 @@
 
   }
 
-  var Key=Target=>new ZikoEventKey(Target);
+  var useKeyEvenent=Target=>new ZikoEventKey(Target);
 
   function dragstart_controller(e){
       EVENT_CONTROLLER(this,e,"start",null);
@@ -3746,8 +3746,8 @@
           return this;
       } 
   }
-  const Drag=Target=>new ZikoEventDrag(Target);
-  const Drop=Target=>new ZikoEventDrop(Target);
+  const useDragEvent=Target=>new ZikoEventDrag(Target);
+  const useDropEvent=Target=>new ZikoEventDrop(Target);
 
   function click_controller(e){
       EVENT_CONTROLLER.call(this,e,"click",null,null);
@@ -3802,7 +3802,7 @@
           return this;
        }     
   }
-  const Click=Target=>new ZikoEventClick(Target);
+  const useClickEventnt=Target=>new ZikoEventClick(Target);
 
   function copy_controller(e){
       EVENT_CONTROLLER.call(this,e,"copy",null,null);
@@ -3885,7 +3885,7 @@
           return this;
        }   
   }
-  const Clipboard=Target=>new ZikoEventClipboard(Target);
+  const useClipboardEvent=Target=>new ZikoEventClipboard(Target);
 
   function focus_controller(e){
       EVENT_CONTROLLER.call(this,e,"focus",null,null);
@@ -3940,7 +3940,7 @@
           return this;
        }     
   }
-  const Focus=Target=>new ZikoEventFocus(Target);
+  const useFocusEvent=Target=>new ZikoEventFocus(Target);
 
   function input_controller(e){
       EVENT_CONTROLLER.call(this,e,"input",null,null);
@@ -3998,7 +3998,7 @@
           return this;
        }     
   }
-  const Input$1=Target=>new ZikoEventInput(Target);
+  const useInputEvent=Target=>new ZikoEventInput(Target);
 
   function hashchange_controller(e){
       EVENT_CONTROLLER.call(this,e,"hashchange",null,null);
@@ -4041,7 +4041,7 @@
           return this;
        }    
   }
-  const HashEvent=Target=>new ZikoEventHash(Target);
+  const useHashEvent=Target=>new ZikoEventHash(Target);
 
   const custom_event_controller=event_name=>function(e){
       EVENT_CONTROLLER.call(this,e,event_name,null,null);
@@ -4093,21 +4093,21 @@
           return this;
       }
   }
-  const customEvent=Target=>new ZikoCustomEvent(Target);
+  const useCustomEvent=Target=>new ZikoCustomEvent(Target);
 
   const Events={
-      Pointer,
-      Mouse,
-      Wheel,
-      Key,
-      Drag,
-      Drop,
-      Click,
-      Clipboard,
-      Focus,
-      Input: Input$1,
-      HashEvent,
-      customEvent,
+      usePointerEvent,
+      useMouseEvent,
+      useWheelEvent: useWheelEventnent,
+      useKeyEvent: useKeyEvenent,
+      useDragEvent,
+      useDropEvent,
+      useClickEvent: useClickEventnt,
+      useClipboardEvent,
+      useFocusEvent,
+      useInputEvent,
+      useHashEvent,
+      useCustomEvent,
       ExtractAll: function () {
           const keys = Object.keys(this);
           for (let i = 0; i < keys.length; i++) {
@@ -4168,7 +4168,104 @@
       }
   }
 
-  const WatchIntersection=(UI,callback,config)=>new ZikoIntersectionObserver(UI,callback,config);
+  const watchIntersection=(UI,callback,config)=>new ZikoIntersectionObserver(UI,callback,config);
+
+  class ZikoMutationObserver {
+      constructor(UIElement, options) {
+        this.UIElement = UIElement;
+        this.options = options || { attributes: true, childList: true, subtree: true };
+        this.observer = null;
+        this.streamingEnabled = true;
+        this.mutationHistory = {
+          attributes: [],
+          childList: [],
+          subtree: [],
+        };
+    
+        this.observeCallback = (mutationsList, observer) => {
+          if (this.streamingEnabled) {
+            for (const mutation of mutationsList) {
+              switch(mutation.type){
+                case 'attributes':this.mutationHistory.attributes.push(mutation.target.getAttribute(mutation.attributeName));break;
+                case 'childList':this.mutationHistory.childList.push(mutation);break;
+                case 'subtree':this.mutationHistory.subtree.push(mutation);break;
+              }
+            }
+          }
+          if (this.callback) {
+            this.callback(mutationsList, observer);
+          }
+        };
+      }
+    
+      observe(callback) {
+        if(!this.observer) {
+          this.observer = new MutationObserver(this.observeCallback);
+          this.observer.observe(this.UIElement.element, this.options);
+          this.callback = callback;
+          this.streamingEnabled = true;
+        }
+      }
+    
+      pause(options) {
+        if (this.observer) {
+          this.observer.disconnect();
+          if (options) {
+            this.observer.observe(this.UIElement, options);
+          }
+        }
+      }
+    
+      reset(options) {
+        if (this.observer) {
+          this.observer.disconnect();
+          this.observer.observe(this.UIElement, options || this.options);
+        }
+      }
+    
+      clear() {
+        if (this.observer) {
+          this.observer.disconnect();
+          this.observer = null;
+          this.mutationHistory = {
+            attributes: [],
+            childList: [],
+            subtree: [],
+          };
+        }
+        this.streamingEnabled = false;
+        return this;
+      }
+    
+      getMutationHistory() {
+        return this.mutationHistory;
+      }
+    
+      enableStreaming() {
+        this.streamingEnabled = true;
+        return this;
+      }
+    
+      disableStreaming() {
+        this.streamingEnabled = false;
+        return this;
+      }
+    }
+
+  const watch=(UIElement,options={},callback=null)=>{
+      const Observer= new ZikoMutationObserver(UIElement,options);
+      if(callback)Observer.observe(callback);
+      return Observer
+  };
+  const watchAttr = (UIElement, callback = null) => {
+    const options = { attributes: true, childList: false, subtree: false };
+    return watch(UIElement, options, ([e])=>callback(e));
+  };
+
+  const watchChildren = (UIElement, callback = null) => {
+    const options = { attributes: false, childList: true, subtree: false };
+    return watch(UIElement, options, ([e])=>callback(e));
+  };
 
   class ZikoResizeObserver{
       constructor(UIElement,callback){
@@ -4215,601 +4312,1103 @@
       }
   }
 
-  const WatchSize=(UI,callback)=>new ZikoResizeObserver(UI,callback);
+  const watchSize=(UI,callback)=>new ZikoResizeObserver(UI,callback);
 
-  class ZikoUseStyle{
-      constructor(style,id=0){
-        this.id="Ziko-Style-"+id;
-        this.use(style);
-        this.keys=new Set();
-        this.styles={
-          default:{
-            fontSize:"1em"
-          }
-        };
-      }
-      get current(){
-        return [...this.keys].reduce((key, value) => {
-          key[value] = `var(--${value}-${this.id})`;
-          return key;
-        }, {});
+  class ZikoTimeLoop {
+    constructor(callback, {fps,step,t=[0,null],start=true}={}) {
+      this.callback = callback;
+      this.cache = {
+        isRunning: false,
+        AnimationId : null,
+        startTime : null,
+        step,
+        fps,
+        t,
+        started:start
+      };
+      this.adjust();
+      this.i=0;
+    }
+    adjust(){
+      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;
       }
-      add(name,style={}){
-        if(name instanceof Object)Object.assign(this.styles,name);
-        else Object.assign(this.styles,{[name]:style});
-        return this;
+      if(this.cache.started){
+        const t=this.cache.t;
+        t[0]?this.startAfter(t[0]):this.start();
+        if(t[1]&&t[1]!==Infinity)this.stopAfter(t[1]);
       }
-      #useStyleIndex(index){
-        const keys=Object.keys(this.styles);
-          for(let a in this.styles[keys[index]]){
-            document.documentElement.style.setProperty(`--${a}-${this.id}`, this.styles[keys[index]][a]);
-            this.keys.add(a);
-          }
-
-          return this;
+      return this;
+    }
+    get TIME_STEP() {
+      return this.cache.step?this.cache.step:1000 / this.cache.fps;
+    }
+    start() {
+      if (!this.cache.isRunning) {
+        this.i=0;
+        this.cache.isRunning = true;
+        this.cache.startTime = Date.now();
+        this.animate();
       }
-      #useStyleName(name){
-        for(let a in this.styles[name]){
-          document.documentElement.style.setProperty(`--${a}-${this.id}`, this.styles[name][a]);
-          this.keys.add(a);
-        }
-        return this;
+      return this;
+    }
+    pause() {
+      if (this.cache.isRunning) {
+        clearTimeout(this.cache.AnimationId);
+        this.cache.isRunning = false;
       }
-      #useStyleObject(Style){
-        for(let a in Style){
-          document.documentElement.style.setProperty(`--${a}-${this.id}`, Style[a]);
-          this.keys.add(a);
+      return this;
+    }
+    stop(){
+      this.pause();
+      this.i=0;
+      return this;
+    }
+    resume(){
+      this.cache.isRunning=true;
+      this.animate();
+      return this;
+    }
+    startAfter(t=1000){
+      setTimeout(this.start.bind(this),t);
+      return this;
+    }
+    stopAfter(t=1000){
+      setTimeout(this.stop.bind(this),t);
+      return this;   
+    }
+    animate = () => {
+      if (this.cache.isRunning) {
+        const now = Date.now();
+        const delta = now - this.cache.startTime;
+        if (delta > this.TIME_STEP) {
+          this.callback(this);
+          this.i++;
+          this.cache.startTime = now - (delta % this.TIME_STEP);
         }
-        return this;
-      }
-      use(style){
-        if(typeof style === "number")this.#useStyleIndex(style);
-        if(typeof style === "string")this.#useStyleName(style);
-        if(style instanceof Object)this.#useStyleObject(style);
-        return this;
-      }
-    }  
-  const useStyle=id=>style=>new ZikoUseStyle(style,id);
+        this.cache.AnimationId = setTimeout(this.animate, 0);
+      }  }
+  }
+
+  const loop = (callback, options) => new ZikoTimeLoop(callback, options);
 
-  const LightThemes={
-      cozyCottonCandy: {
-        background: "#FCE4EC",
-        currentLine: "#F8BBD0",
-        selection: "#FFCDD2",
-        foreground: "#673AB7",
-        comment: "#9575CD",
-        cyan: "#00BCD4",
-        green: "#4CAF50",
-        orange: "#FF9800",
-        pink: "#E91E63",
-        purple: "#9C27B0",
-        red: "#F44336",
-        yellow: "#FFEB3B"
+  const Ease={
+      Linear:function(t){
+          return t;
       },
-      crystalClear: {
-        background: "#F6F8FA",
-        currentLine: "#E8F0F5",
-        selection: "#D4E9F7",
-        foreground: "#485766",
-        comment: "#8492A6",
-        cyan: "#00ACC1",
-        green: "#8BC34A",
-        orange: "#FFA726",
-        pink: "#FF4081",
-        purple: "#7E57C2",
-        red: "#EF5350",
-        yellow: "#FFD740"
+      InSin(t){
+          return 1 - Math.cos((t * Math.PI) / 2);
       },
-      lightdreamyDusk: {
-        background: "#F5F5F5",
-        currentLine: "#E8E8E8",
-        selection: "#DADADA",
-        foreground: "#555555",
-        comment: "#999999",
-        cyan: "#5FB3B3",
-        green: "#68C386",
-        orange: "#FFB67A",
-        pink: "#FF94B0",
-        purple: "#B78BC3",
-        red: "#FF6666",
-        yellow: "#FFD666"
+      OutSin(t){
+          return Math.sin((t * Math.PI) / 2);
       },
-      luminousLavender: {
-        background: "#F3E5F5",
-        currentLine: "#E1BEE7",
-        selection: "#CE93D8",
-        foreground: "#311B92",
-        comment: "#673AB7",
-        cyan: "#00BCD4",
-        green: "#8BC34A",
-        orange: "#FF9800",
-        pink: "#E91E63",
-        purple: "#9C27B0",
-        red: "#F44336",
-        yellow: "#FFEB3B"
+      InOutSin(t){
+          return  -(Math.cos(Math.PI * t) - 1) / 2;
       },
-      meadowMornings: {
-        background: "#F3E5F5",
-        currentLine: "#E1BEE7",
-        selection: "#CE93D8",
-        foreground: "#311B92",
-        comment: "#673AB7",
-        cyan: "#00BCD4",
-        green: "#8BC34A",
-        orange: "#FF9800",
-        pink: "#E91E63",
-        purple: "#9C27B0",
-        red: "#F44336",
-        yellow: "#FFEB3B"
+      InQuad(t){
+          return t**2;
       },
-      moonlitMauve: {
-        background: "#F3E5F5",
-        currentLine: "#E1BEE7",
-        selection: "#CE93D8",
-        foreground: "#311B92",
-        comment: "#673AB7",
-        cyan: "#00BCD4",
-        green: "#8BC34A",
-        orange: "#FF9800",
-        pink: "#E91E63",
-        purple: "#9C27B0",
-        red: "#F44336",
-        yellow: "#FFEB3B"
+      OutQuad(t){
+          return 1 - Math.pow((1 - t),2)
       },
-      morningMist: {
-        background: "#F6F6F6",
-        currentLine: "#EAEAEA",
-        selection: "#D8D8D8",
-        foreground: "#333333",
-        comment: "#808080",
-        cyan: "#00A6A6",
-        green: "#4CAF50",
-        orange: "#FFA726",
-        pink: "#FF4081",
-        purple: "#9C27B0",
-        red: "#FF5252",
-        yellow: "#FFD740"
+      InOutQuad(t){
+          return t < 0.5 ? 2 * Math.pow(t,2) : 1 - Math.pow(-2 * t + 2, 2) / 2;
       },
-      oceanBreeze: {
-        background: "#ECF1F4",
-        currentLine: "#DDE8ED",
-        selection: "#BFD3C1",
-        foreground: "#37474F",
-        comment: "#607D8B",
-        cyan: "#00BCD4",
-        green: "#8BC34A",
-        orange: "#FF9800",
-        pink: "#E91E63",
-        purple: "#673AB7",
-        red: "#F44336",
-        yellow: "#FFEB3B"
+      InCubic(t){
+          return t**3;    
       },
-      pastelParadise: {
-        background: "#F5F5F5",
-        currentLine: "#E8E8E8",
-        selection: "#DADADA",
-        foreground: "#555555",
-        comment: "#999999",
-        cyan: "#5FB3B3",
-        green: "#68C386",
-        orange: "#FFB67A",
-        pink: "#FF94B0",
-        purple: "#B78BC3",
-        red: "#FF6666",
-        yellow: "#FFD666"
+      OutCubic(t){
+          return 1 - Math.pow((1 - t),3)
       },
-      pastelPetals: {
-        background: "#FCE4EC",
-        currentLine: "#F8BBD0",
-        selection: "#FFCDD2",
-        foreground: "#673AB7",
-        comment: "#9575CD",
-        cyan: "#00BCD4",
-        green: "#4CAF50",
-        orange: "#FF9800",
-        pink: "#E91E63",
-        purple: "#9C27B0",
-        red: "#F44336",
-        yellow: "#FFEB3B"
+      InOutCubic(t){
+          return t < 0.5 ? 4 * Math.pow(t,3) : 1 - Math.pow(-2 * t + 2, 3) / 2;
       },
-      sereneSnowfall: {
-        background: "#F9F9F9",
-        currentLine: "#EDEDED",
-        selection: "#D8D8D8",
-        foreground: "#454545",
-        comment: "#888888",
-        cyan: "#5FA5A5",
-        green: "#5BC47E",
-        orange: "#FFBC8D",
-        pink: "#FFA7BF",
-        purple: "#B88AAE",
-        red: "#FF7575",
-        yellow: "#FFD98F"
+      InQuart(t){
+          return t**4;
       },
-      softSherbet: {
-        background: "#FDF8F3",
-        currentLine: "#FAF1EB",
-        selection: "#FFEBEE",
-        foreground: "#6D4C41",
-        comment: "#A1887F",
-        cyan: "#00BCD4",
-        green: "#689F38",
-        orange: "#FFA000",
-        pink: "#EC407A",
-        purple: "#8E24AA",
-        red: "#E53935",
-        yellow: "#FFC107"
+      OutQuart(t){
+          return 1 - Math.pow((1 - t),4);
       },
-      subtleSerenity: {
-        background: "#F3F5F7",
-        currentLine: "#E8EDF2",
-        selection: "#D1D9E6",
-        foreground: "#2C3E50",
-        comment: "#95A5A6",
-        cyan: "#3498DB",
-        green: "#2ECC71",
-        orange: "#F39C12",
-        pink: "#E74C3C",
-        purple: "#9B59B6",
-        red: "#C0392B",
-        yellow: "#F1C40F"
+      InOutQuart(t){
+          return t < 0.5 ? 8 * Math.pow(t,4) : 1 - Math.pow(-2 * t + 2, 4) / 2;
       },
-      summerSunset: {
-        background: "#FCE4EC",
-        currentLine: "#F8BBD0",
-        selection: "#FFCDD2",
-        foreground: "#4E342E",
-        comment: "#795548",
-        cyan: "#009688",
-        green: "#43A047",
-        orange: "#FF5722",
-        pink: "#E91E63",
-        purple: "#9C27B0",
-        red: "#F44336",
-        yellow: "#FFEB3B"
+      InQuint(t){
+          return t**5;
       },
-      sunnyDay: {
-        background: "#FFF8E1",
-        currentLine: "#FFF3E0",
-        selection: "#FFE0B2",
-        foreground: "#4E342E",
-        comment: "#795548",
-        cyan: "#00BCD4",
-        green: "#8BC34A",
-        orange: "#FF9800",
-        pink: "#E91E63",
-        purple: "#673AB7",
-        red: "#F44336",
-        yellow: "#FFEB3B"
+      OutQuint(t){
+          return 1 - Math.pow((1 - t),5);
       },
-      tranquilTwilight: {
-        background: "#F9F9F9",
-        currentLine: "#EDEDED",
-        selection: "#D8D8D8",
-        foreground: "#454545",
-        comment: "#888888",
-        cyan: "#5FA5A5",
-        green: "#5BC47E",
-        orange: "#FFBC8D",
-        pink: "#FFA7BF",
-        purple: "#B88AAE",
-        red: "#FF7575",
-        yellow: "#FFD98F"
+      InOutQuint(t){
+          return t < 0.5 ? 16 * Math.pow(t,5) : 1 - Math.pow(-2 * t + 2, 5) / 2;
       },
-      tranquilWaves: {
-        background: "#F9F9F9",
-        currentLine: "#E4E4E4",
-        selection: "#D4D4D4",
-        foreground: "#2C3E50",
-        comment: "#7F8C8D",
-        cyan: "#3498DB",
-        green: "#2ECC71",
-        orange: "#F39C12",
-        pink: "#E74C3C",
-        purple: "#9B59B6",
-        red: "#C0392B",
-        yellow: "#F1C40F"
+      InExpo(t){
+          return t === 0 ? 0 : Math.pow(2, 10 * t - 10);
       },
-      whisperingWillow: {
-        background: "#F6F8FA",
-        currentLine: "#E8F0F5",
-        selection: "#D4E9F7",
-        foreground: "#485766",
-        comment: "#8492A6",
-        cyan: "#00ACC1",
-        green: "#8BC34A",
-        orange: "#FFA726",
-        pink: "#FF4081",
-        purple: "#7E57C2",
-        red: "#EF5350",
-        yellow: "#FFD740"
-      }
-    };
-
-  const DarkThemes = {
-      antiqueRose: {
-        background: "#1C1014",
-        currentLine: "#2B1B21",
-        selection: "#443034",
-        foreground: "#D8B5B5",
-        comment: "#7F5E5E",
-        cyan: "#6FA2A2",
-        green: "#66A66F",
-        orange: "#FFB97A",
-        pink: "#FFA8BD",
-        purple: "#B78DA5",
-        red: "#FF6C6C",
-        yellow: "#FFD579"
+      OutExpo(t){
+          return t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
       },
-      auroraBorealis: {
-        background: "#1D1426",
-        currentLine: "#2B1E35",
-        selection: "#432D4E",
-        foreground: "#C2AABF",
-        comment: "#7F6E8E",
-        cyan: "#7EA5D3",
-        green: "#77C992",
-        orange: "#FFC476",
-        pink: "#FFA8B3",
-        purple: "#AE9AC3",
-        red: "#FF6C6C",
-        yellow: "#FFD576"
+      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;
       },
-      autumnHarvest: {
-        background: "#291C10",
-        currentLine: "#3A2A1E",
-        selection: "#573C2C",
-        foreground: "#D4C3A2",
-        comment: "#7F6F52",
-        cyan: "#82B4BF",
-        green: "#7FB074",
-        orange: "#FFAB6E",
-        pink: "#FF8196",
-        purple: "#B394A9",
-        red: "#FF6565",
-        yellow: "#FFD270"
+      InCirc(t){
+          return 1 - Math.sqrt(1 - Math.pow(t, 2));
       },
-      aylin: {
-        background: "#13161E",
-        currentLine: "#161A28",
-        selection: "#222B3E",
-        foreground: "#D2D8E0",
-        comment: "#697098",
-        cyan: "#78D1E1",
-        green: "#98C379",
-        orange: "#EBCB8B",
-        pink: "#D16D9E",
-        purple: "#C678DD",
-        red: "#E88388",
-        yellow: "#EBCB8B"
+      OutCirc(t){
+          return Math.sqrt(1 - Math.pow(t - 1, 2));
       },
-      azureBlue: {
-        background: "#001B29",
-        currentLine: "#002C3E",
-        selection: "#004E6B",
-        foreground: "#C3D7E2",
-        comment: "#5F7C92",
-        cyan: "#75B7D1",
-        green: "#70C8A7",
-        orange: "#FFB476",
-        pink: "#FF92B0",
-        purple: "#B88BC3",
-        red: "#FF6666",
-        yellow: "#FFD666"
+      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;
       },
-      cobalt2: {
-        background: "#193549",
-        currentLine: "#1F4662",
-        selection: "#193549",
-        foreground: "#B9BED0",
-        comment: "#627D98",
-        cyan: "#4DB5BD",
-        green: "#86B300",
-        orange: "#FFB86C",
-        pink: "#FF7F7B",
-        purple: "#9B64FB",
-        red: "#FF6672",
-        yellow: "#FFCC99"
-      },
-      cobaltMaterialTheme: {
-        background: "#263238",
-        currentLine: "#37474F",
-        selection: "#80CBC4",
-        foreground: "#CFD8DC",
-        comment: "#78909C",
-        cyan: "#80CBC4",
-        green: "#A5D6A7",
-        orange: "#FFD54F",
-        pink: "#FF80AB",
-        purple: "#CE93D8",
-        red: "#EF5350",
-        yellow: "#FFEE58"
-      },
-      cosmicBlue: {
-        background: "#1B2836",
-        currentLine: "#223348",
-        selection: "#39516D",
-        foreground: "#C0D4E5",
-        comment: "#728CAB",
-        cyan: "#75A6FF",
-        green: "#5ED99F",
-        orange: "#FFAD6F",
-        pink: "#FF90B6",
-        purple: "#A889C5",
-        red: "#FF6E6E",
-        yellow: "#FCD256"
-      },
-      cosmicSunset: {
-        background: "#1B1921",
-        currentLine: "#272530",
-        selection: "#3C3948",
-        foreground: "#B8B4CB",
-        comment: "#7A738B",
-        cyan: "#77B4D8",
-        green: "#6CC09E",
-        orange: "#FFA677",
-        pink: "#FF95B2",
-        purple: "#B48FC1",
-        red: "#FF6565",
-        yellow: "#FFD566"
-      },
-      cyberForest: {
-        background: "#0D151D",
-        currentLine: "#18262F",
-        selection: "#2B3B47",
-        foreground: "#CDD7E0",
-        comment: "#667B8B",
-        cyan: "#7EC4CF",
-        green: "#68CC96",
-        orange: "#FFAC6C",
-        pink: "#FF89B4",
-        purple: "#A889C5",
-        red: "#FF6565",
-        yellow: "#FFCB6B"
+      Arc(t){
+          return 1 - Math.sin(Math.acos(t));
       },
-      cyberPunkCity: {
-        background: "#000000",
-        currentLine: "#121212",
-        selection: "#1F1F1F",
-        foreground: "#DADADA",
-        comment: "#626262",
-        cyan: "#71B7FF",
-        green: "#50D890",
-        orange: "#FFB86C",
-        pink: "#FF79C6",
-        purple: "#BB86FC",
-        red: "#FF5454",
-        yellow: "#FDD663"
+      Back(t){
+          // To Be Changed
+          let x=1;
+          return Math.pow(t, 2) * ((x + 1) * t - x);  
       },
-      cyberpunkNeon: {
-        background: "#121212",
-        currentLine: "#1B1B1B",
-        selection: "#262626",
-        foreground: "#DADADA",
-        comment: "#6C6C6C",
-        cyan: "#69AEDB",
-        green: "#4ECCA3",
-        orange: "#FFB86C",
-        pink: "#FF79C6",
-        purple: "#D08EFF",
-        red: "#FF5454",
-        yellow: "#FDD663"
+      Elastic(t){
+          return -2*Math.pow(2, 10 * (t - 1)) * Math.cos(20 * Math.PI * t / 3 * t);
       },
-      darkDesert: {
-        background: "#1E2022",
-        currentLine: "#282A2E",
-        selection: "#393D42",
-        foreground: "#C0C5CE",
-        comment: "#5C6368",
-        cyan: "#6FB3E0",
-        green: "#88C076",
-        orange: "#FFB454",
-        pink: "#FF7F90",
-        purple: "#B48EAD",
-        red: "#FF6666",
-        yellow: "#FFCC66"
+      InBack(t){
+          const c1 = 1.70158;
+          const c3 = c1 + 1;
+          return c3 *Math.pow(t,3)- c1 * (t**2);      
       },
-      darkMint: {
-        background: "#11161A",
-        currentLine: "#1B2128",
-        selection: "#3D4853",
-        foreground: "#D9DEE5",
-        comment: "#65737E",
-        cyan: "#88C0D0",
-        green: "#98C379",
-        orange: "#FFB86C",
-        pink: "#FF7F8B",
-        purple: "#C594C5",
-        red: "#FF6561",
-        yellow: "#FAD07B"
+      OutBack(t){
+          const c1 = 1.70158;
+          const c3 = c1 + 1;
+          return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);     
       },
-      deepOcean: {
-        background: "#121C2C",
-        currentLine: "#182236",
-        selection: "#2B3E50",
-        foreground: "#BDC3C7",
-        comment: "#6C7A89",
-        cyan: "#59ABE3",
-        green: "#26A65B",
-        orange: "#F9690E",
-        pink: "#EB3B5A",
-        purple: "#D2527F",
-        red: "#E74C3C",
-        yellow: "#F5AB35"
+      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;        
       },
-      deepOceanBlue: {
-        background: "#1B2F40",
-        currentLine: "#263B53",
-        selection: "#3A536E",
-        foreground: "#BFC9D4",
-        comment: "#657C8E",
-        cyan: "#6CB5FF",
-        green: "#65C287",
-        orange: "#FFA974",
-        pink: "#FF87B4",
-        purple: "#AE9BFF",
-        red: "#FF6666",
-        yellow: "#FFD67B"
+      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);
       },
-      deepOceanSunset: {
-        background: "#151D2A",
-        currentLine: "#1D2735",
-        selection: "#31405B",
-        foreground: "#D5D9E0",
-        comment: "#6C7B8B",
-        cyan: "#6FAAD4",
-        green: "#66C295",
-        orange: "#FFA476",
-        pink: "#FF94B0",
-        purple: "#B08FC0",
-        red: "#FF6565",
-        yellow: "#FFD466"
+      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;
       },
-      deepSpace: {
-        background: "#0F1419",
-        currentLine: "#1A232D",
-        selection: "#3A4758",
-        foreground: "#CDD9E5",
-        comment: "#657C96",
-        cyan: "#6CB6FF",
-        green: "#4CAF50",
-        orange: "#FFB454",
-        pink: "#FF75B5",
-        purple: "#9A76FF",
-        red: "#FF5555",
-        yellow: "#FFC857"
+      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;
       },
-      dracula: {
-        background: "#282a36",
-        currentLine: "#44475a",
-        selection: "#44475a",
-        foreground: "#f8f8f2",
-        comment: "#6272a4",
-        cyan: "#8be9fd",
-        green: "#50fa7b",
-        orange: "#ffb86c",
-        pink: "#ff79c6",
-        purple: "#bd93f9",
-        red: "#ff5555",
-        yellow: "#f1fa8c"
+      InBounce(t){
+          return 1 - Ease.OutBounce(1-t);
       },
-      dreamyDusk: {
-        background: "#22243D",
-        currentLine: "#313558",
-        selection: "#4C4F6D",
-        foreground: "#A5A7C5",
-        comment: "#6F728E",
-        cyan: "#81A2BE",
-        green: "#7FB074",
-        orange: "#FFB476",
-        pink: "#FF91A4",
-        purple: "#AE8DC2",
-        red: "#FF7272",
-        yellow: "#FFD67A"
+      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;
+          }
+
       },
-      electricLagoon: {
-        background: "#15232B",
-        currentLine: "#20323E",
+      InOutBounce(t){
+          return t < 0.5
+          ? (1 - Ease.OutBounce(1 - 2 * t)) / 2
+          : (1 + Ease.OutBounce(2 * t - 1)) / 2;
+      }
+  };
+
+  const useDebounce=(fn,delay=1000)=>{
+      let id;
+      return (...args)=>id?clearTimeout(id):setTimeout(()=>fn(...args),delay)
+  };
+  const useThrottle=(fn,delay)=>{
+      let lastTime=0;
+      return (...args)=>{
+          const now=new Date().getTime();
+          if(now-lastTime<delay)return;
+          lastTime=now;
+          fn(...args); 
+      }
+  };
+
+  const time_memory_Taken = (callback) => {
+      const t0 = Date.now();
+      const m0 = performance.memory.usedJSHeapSize;
+      const result = callback();
+      const t1 = Date.now();
+      const m1 = performance.memory.usedJSHeapSize;
+      const elapsedTime = t1 - t0;
+      const usedMemory = m1 - m0;
+      return { 
+          elapsedTime,
+          usedMemory, 
+          result 
+      };
+    };
+
+  const waitForUIElm=(UIElement)=>{
+      return new Promise(resolve => {
+          if (UIElement.element) {
+              return resolve(UIElement.element);
+          }
+    
+          const observer = new MutationObserver(() => {
+              if (UIElement.element) {
+                  resolve(UIElement.element);
+                  observer.disconnect();
+              }
+          });
+    
+          observer.observe(document.body, {
+              childList: true,
+              subtree: true
+          });
+      });
+    };
+    const waitForUIElmSync=(UIElement,timeout=2000)=>{
+      const t0=Date.now();
+      while(Date.now()-t0<timeout){
+        if(UIElement.element)return UIElement.element
+      }
+    };
+
+  const wait=(delayInMS)=>{
+      return new Promise((resolve) => setTimeout(resolve, delayInMS));
+  };
+  const timeTaken = callback => {
+      console.time('timeTaken');
+      const r = callback();
+      console.timeEnd('timeTaken');
+      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 animation=(callback,config)=>new ZikoTimeAnimation(callback,config);
+
+  const Time={
+      wait,
+      timeTaken,
+      useThrottle,
+      useDebounce,
+      Ease,
+      time_memory_Taken,
+      loop,
+      animation,
+      waitForUIElm,
+      waitForUIElmSync,
+      ExtractAll: function () {
+          const keys = Object.keys(this);
+          for (let i = 0; i < keys.length; i++) {
+              const key = keys[i];
+              if (key !== 'ExtractAll' && key !== 'RemoveAll') {
+                  globalThis[key] = this[key];
+              }
+          }
+          return this;
+      },
+      RemoveAll: function () {
+          const keys = Object.keys(this);
+          for (let i = 0; i < keys.length; i++) {
+              const key = keys[i];
+              if (key !== 'RemoveAll') {
+                  delete globalThis[key];
+              }
+          }
+          return this;
+      }
+  };
+
+  class ZikoScreenObserver {
+      constructor(callback=e=>console.log({x:e.x,y:e.y})) {
+        this.previousX = globalThis?.screenX;
+        this.previousY = globalThis?.screenY;
+        this.view=[-1,-1,1,1];
+        this.start(callback);
+      }
+      get xMin(){
+          return this.view[0];
+      }
+      get yMin(){
+          return this.view[1];
+      }
+      get xMax(){
+          return this.view[2];
+      }
+      get yMax(){
+          return this.view[3];
+      }
+      get x(){
+          return globalThis?.screenX;
+      }
+      get y(){
+          return globalThis?.screenY;
+      }
+      get scx(){
+          return screen.availWidth/2;
+      }
+      get scy(){
+          return screen.availHeight/2;
+      }
+      get wcx(){
+          return screenX+globalThis?.innerWidth/2;
+      }
+      get wcx_v(){
+          return map(this.wcx,0,screen.availWidth,this.view[0],this.view[2]);
+      }
+      get wcy(){
+          return screenY+globalThis?.innerHeight/2;
+      }
+      get wcy_v(){
+          return -map(this.wcy,0,screen.availHeight,this.view[1],this.view[3]);
+      }
+      get dx(){
+          return map(this.x,0,screen.availWidth,this.xMin,this.xMax); 
+      }
+      get dy(){
+          return map(this.y,0,screen.availHeight,this.yMin,this.yMax); 
+      }
+      start(callback){
+          this.loop = loop(()=>{
+              let currentX = globalThis?.screenX;
+              let currentY = globalThis?.screenY;
+              if (this.previousX !== currentX || this.previousY !== currentY) {
+                  callback(this);
+                  this.previousX = currentX;
+                  this.previousY = currentY;
+              }
+          },
+          {fps:10,t:[0,Infinity],start:true});
+          return this;
+      }
+  }
+  const watchScreen=(callback)=>new ZikoScreenObserver(callback);
+  globalThis.watchScreen=watchScreen;
+
+  /*
+  a=ul("x","y","dx","dy","wcx","wxy")
+  watchScreen(e=>{
+   a[0].setValue("x : "+e.x) 
+   a[1].setValue("y : "+e.y) 
+   a[2].setValue("dx : "+e.dx) 
+   a[3].setValue("dy : "+e.dy) 
+   a[4].setValue("wCx : "+e.wcx) 
+   a[5].setValue("wCy : "+e.wcy) 
+  })
+   */
+
+  const Observer={
+      watch,
+      watchAttr,
+      watchChildren,
+      watchIntersection,
+      watchSize,
+      watchScreen,
+      ExtractAll: function () {
+          const keys = Object.keys(this);
+          for (let i = 0; i < keys.length; i++) {
+              const key = keys[i];
+              if (key !== 'ExtractAll' && key !== 'RemoveAll') {
+                  globalThis[key] = this[key];
+              }
+          }
+          return this;
+      },
+      RemoveAll: function () {
+          const keys = Object.keys(this);
+          for (let i = 0; i < keys.length; i++) {
+              const key = keys[i];
+              if (key !== 'RemoveAll') {
+                  delete globalThis[key];
+              }
+          }
+          return this;
+      }
+  };
+
+  class ZikoUseStyle{
+      constructor(style,id=0){
+        this.id="Ziko-Style-"+id;
+        this.use(style);
+        this.keys=new Set();
+        this.styles={
+          default:{
+            fontSize:"1em"
+          }
+        };
+      }
+      get current(){
+        return [...this.keys].reduce((key, value) => {
+          key[value] = `var(--${value}-${this.id})`;
+          return key;
+        }, {});
+      }
+      add(name,style={}){
+        if(name instanceof Object)Object.assign(this.styles,name);
+        else Object.assign(this.styles,{[name]:style});
+        return this;
+      }
+      #useStyleIndex(index){
+        const keys=Object.keys(this.styles);
+          for(let a in this.styles[keys[index]]){
+            document.documentElement.style.setProperty(`--${a}-${this.id}`, this.styles[keys[index]][a]);
+            this.keys.add(a);
+          }
+
+          return this;
+      }
+      #useStyleName(name){
+        for(let a in this.styles[name]){
+          document.documentElement.style.setProperty(`--${a}-${this.id}`, this.styles[name][a]);
+          this.keys.add(a);
+        }
+        return this;
+      }
+      #useStyleObject(Style){
+        for(let a in Style){
+          document.documentElement.style.setProperty(`--${a}-${this.id}`, Style[a]);
+          this.keys.add(a);
+        }
+        return this;
+      }
+      use(style){
+        if(typeof style === "number")this.#useStyleIndex(style);
+        if(typeof style === "string")this.#useStyleName(style);
+        if(style instanceof Object)this.#useStyleObject(style);
+        return this;
+      }
+    }  
+  const useStyle=id=>style=>new ZikoUseStyle(style,id);
+
+  const LightThemes={
+      cozyCottonCandy: {
+        background: "#FCE4EC",
+        currentLine: "#F8BBD0",
+        selection: "#FFCDD2",
+        foreground: "#673AB7",
+        comment: "#9575CD",
+        cyan: "#00BCD4",
+        green: "#4CAF50",
+        orange: "#FF9800",
+        pink: "#E91E63",
+        purple: "#9C27B0",
+        red: "#F44336",
+        yellow: "#FFEB3B"
+      },
+      crystalClear: {
+        background: "#F6F8FA",
+        currentLine: "#E8F0F5",
+        selection: "#D4E9F7",
+        foreground: "#485766",
+        comment: "#8492A6",
+        cyan: "#00ACC1",
+        green: "#8BC34A",
+        orange: "#FFA726",
+        pink: "#FF4081",
+        purple: "#7E57C2",
+        red: "#EF5350",
+        yellow: "#FFD740"
+      },
+      lightdreamyDusk: {
+        background: "#F5F5F5",
+        currentLine: "#E8E8E8",
+        selection: "#DADADA",
+        foreground: "#555555",
+        comment: "#999999",
+        cyan: "#5FB3B3",
+        green: "#68C386",
+        orange: "#FFB67A",
+        pink: "#FF94B0",
+        purple: "#B78BC3",
+        red: "#FF6666",
+        yellow: "#FFD666"
+      },
+      luminousLavender: {
+        background: "#F3E5F5",
+        currentLine: "#E1BEE7",
+        selection: "#CE93D8",
+        foreground: "#311B92",
+        comment: "#673AB7",
+        cyan: "#00BCD4",
+        green: "#8BC34A",
+        orange: "#FF9800",
+        pink: "#E91E63",
+        purple: "#9C27B0",
+        red: "#F44336",
+        yellow: "#FFEB3B"
+      },
+      meadowMornings: {
+        background: "#F3E5F5",
+        currentLine: "#E1BEE7",
+        selection: "#CE93D8",
+        foreground: "#311B92",
+        comment: "#673AB7",
+        cyan: "#00BCD4",
+        green: "#8BC34A",
+        orange: "#FF9800",
+        pink: "#E91E63",
+        purple: "#9C27B0",
+        red: "#F44336",
+        yellow: "#FFEB3B"
+      },
+      moonlitMauve: {
+        background: "#F3E5F5",
+        currentLine: "#E1BEE7",
+        selection: "#CE93D8",
+        foreground: "#311B92",
+        comment: "#673AB7",
+        cyan: "#00BCD4",
+        green: "#8BC34A",
+        orange: "#FF9800",
+        pink: "#E91E63",
+        purple: "#9C27B0",
+        red: "#F44336",
+        yellow: "#FFEB3B"
+      },
+      morningMist: {
+        background: "#F6F6F6",
+        currentLine: "#EAEAEA",
+        selection: "#D8D8D8",
+        foreground: "#333333",
+        comment: "#808080",
+        cyan: "#00A6A6",
+        green: "#4CAF50",
+        orange: "#FFA726",
+        pink: "#FF4081",
+        purple: "#9C27B0",
+        red: "#FF5252",
+        yellow: "#FFD740"
+      },
+      oceanBreeze: {
+        background: "#ECF1F4",
+        currentLine: "#DDE8ED",
+        selection: "#BFD3C1",
+        foreground: "#37474F",
+        comment: "#607D8B",
+        cyan: "#00BCD4",
+        green: "#8BC34A",
+        orange: "#FF9800",
+        pink: "#E91E63",
+        purple: "#673AB7",
+        red: "#F44336",
+        yellow: "#FFEB3B"
+      },
+      pastelParadise: {
+        background: "#F5F5F5",
+        currentLine: "#E8E8E8",
+        selection: "#DADADA",
+        foreground: "#555555",
+        comment: "#999999",
+        cyan: "#5FB3B3",
+        green: "#68C386",
+        orange: "#FFB67A",
+        pink: "#FF94B0",
+        purple: "#B78BC3",
+        red: "#FF6666",
+        yellow: "#FFD666"
+      },
+      pastelPetals: {
+        background: "#FCE4EC",
+        currentLine: "#F8BBD0",
+        selection: "#FFCDD2",
+        foreground: "#673AB7",
+        comment: "#9575CD",
+        cyan: "#00BCD4",
+        green: "#4CAF50",
+        orange: "#FF9800",
+        pink: "#E91E63",
+        purple: "#9C27B0",
+        red: "#F44336",
+        yellow: "#FFEB3B"
+      },
+      sereneSnowfall: {
+        background: "#F9F9F9",
+        currentLine: "#EDEDED",
+        selection: "#D8D8D8",
+        foreground: "#454545",
+        comment: "#888888",
+        cyan: "#5FA5A5",
+        green: "#5BC47E",
+        orange: "#FFBC8D",
+        pink: "#FFA7BF",
+        purple: "#B88AAE",
+        red: "#FF7575",
+        yellow: "#FFD98F"
+      },
+      softSherbet: {
+        background: "#FDF8F3",
+        currentLine: "#FAF1EB",
+        selection: "#FFEBEE",
+        foreground: "#6D4C41",
+        comment: "#A1887F",
+        cyan: "#00BCD4",
+        green: "#689F38",
+        orange: "#FFA000",
+        pink: "#EC407A",
+        purple: "#8E24AA",
+        red: "#E53935",
+        yellow: "#FFC107"
+      },
+      subtleSerenity: {
+        background: "#F3F5F7",
+        currentLine: "#E8EDF2",
+        selection: "#D1D9E6",
+        foreground: "#2C3E50",
+        comment: "#95A5A6",
+        cyan: "#3498DB",
+        green: "#2ECC71",
+        orange: "#F39C12",
+        pink: "#E74C3C",
+        purple: "#9B59B6",
+        red: "#C0392B",
+        yellow: "#F1C40F"
+      },
+      summerSunset: {
+        background: "#FCE4EC",
+        currentLine: "#F8BBD0",
+        selection: "#FFCDD2",
+        foreground: "#4E342E",
+        comment: "#795548",
+        cyan: "#009688",
+        green: "#43A047",
+        orange: "#FF5722",
+        pink: "#E91E63",
+        purple: "#9C27B0",
+        red: "#F44336",
+        yellow: "#FFEB3B"
+      },
+      sunnyDay: {
+        background: "#FFF8E1",
+        currentLine: "#FFF3E0",
+        selection: "#FFE0B2",
+        foreground: "#4E342E",
+        comment: "#795548",
+        cyan: "#00BCD4",
+        green: "#8BC34A",
+        orange: "#FF9800",
+        pink: "#E91E63",
+        purple: "#673AB7",
+        red: "#F44336",
+        yellow: "#FFEB3B"
+      },
+      tranquilTwilight: {
+        background: "#F9F9F9",
+        currentLine: "#EDEDED",
+        selection: "#D8D8D8",
+        foreground: "#454545",
+        comment: "#888888",
+        cyan: "#5FA5A5",
+        green: "#5BC47E",
+        orange: "#FFBC8D",
+        pink: "#FFA7BF",
+        purple: "#B88AAE",
+        red: "#FF7575",
+        yellow: "#FFD98F"
+      },
+      tranquilWaves: {
+        background: "#F9F9F9",
+        currentLine: "#E4E4E4",
+        selection: "#D4D4D4",
+        foreground: "#2C3E50",
+        comment: "#7F8C8D",
+        cyan: "#3498DB",
+        green: "#2ECC71",
+        orange: "#F39C12",
+        pink: "#E74C3C",
+        purple: "#9B59B6",
+        red: "#C0392B",
+        yellow: "#F1C40F"
+      },
+      whisperingWillow: {
+        background: "#F6F8FA",
+        currentLine: "#E8F0F5",
+        selection: "#D4E9F7",
+        foreground: "#485766",
+        comment: "#8492A6",
+        cyan: "#00ACC1",
+        green: "#8BC34A",
+        orange: "#FFA726",
+        pink: "#FF4081",
+        purple: "#7E57C2",
+        red: "#EF5350",
+        yellow: "#FFD740"
+      }
+    };
+
+  const DarkThemes = {
+      antiqueRose: {
+        background: "#1C1014",
+        currentLine: "#2B1B21",
+        selection: "#443034",
+        foreground: "#D8B5B5",
+        comment: "#7F5E5E",
+        cyan: "#6FA2A2",
+        green: "#66A66F",
+        orange: "#FFB97A",
+        pink: "#FFA8BD",
+        purple: "#B78DA5",
+        red: "#FF6C6C",
+        yellow: "#FFD579"
+      },
+      auroraBorealis: {
+        background: "#1D1426",
+        currentLine: "#2B1E35",
+        selection: "#432D4E",
+        foreground: "#C2AABF",
+        comment: "#7F6E8E",
+        cyan: "#7EA5D3",
+        green: "#77C992",
+        orange: "#FFC476",
+        pink: "#FFA8B3",
+        purple: "#AE9AC3",
+        red: "#FF6C6C",
+        yellow: "#FFD576"
+      },
+      autumnHarvest: {
+        background: "#291C10",
+        currentLine: "#3A2A1E",
+        selection: "#573C2C",
+        foreground: "#D4C3A2",
+        comment: "#7F6F52",
+        cyan: "#82B4BF",
+        green: "#7FB074",
+        orange: "#FFAB6E",
+        pink: "#FF8196",
+        purple: "#B394A9",
+        red: "#FF6565",
+        yellow: "#FFD270"
+      },
+      aylin: {
+        background: "#13161E",
+        currentLine: "#161A28",
+        selection: "#222B3E",
+        foreground: "#D2D8E0",
+        comment: "#697098",
+        cyan: "#78D1E1",
+        green: "#98C379",
+        orange: "#EBCB8B",
+        pink: "#D16D9E",
+        purple: "#C678DD",
+        red: "#E88388",
+        yellow: "#EBCB8B"
+      },
+      azureBlue: {
+        background: "#001B29",
+        currentLine: "#002C3E",
+        selection: "#004E6B",
+        foreground: "#C3D7E2",
+        comment: "#5F7C92",
+        cyan: "#75B7D1",
+        green: "#70C8A7",
+        orange: "#FFB476",
+        pink: "#FF92B0",
+        purple: "#B88BC3",
+        red: "#FF6666",
+        yellow: "#FFD666"
+      },
+      cobalt2: {
+        background: "#193549",
+        currentLine: "#1F4662",
+        selection: "#193549",
+        foreground: "#B9BED0",
+        comment: "#627D98",
+        cyan: "#4DB5BD",
+        green: "#86B300",
+        orange: "#FFB86C",
+        pink: "#FF7F7B",
+        purple: "#9B64FB",
+        red: "#FF6672",
+        yellow: "#FFCC99"
+      },
+      cobaltMaterialTheme: {
+        background: "#263238",
+        currentLine: "#37474F",
+        selection: "#80CBC4",
+        foreground: "#CFD8DC",
+        comment: "#78909C",
+        cyan: "#80CBC4",
+        green: "#A5D6A7",
+        orange: "#FFD54F",
+        pink: "#FF80AB",
+        purple: "#CE93D8",
+        red: "#EF5350",
+        yellow: "#FFEE58"
+      },
+      cosmicBlue: {
+        background: "#1B2836",
+        currentLine: "#223348",
+        selection: "#39516D",
+        foreground: "#C0D4E5",
+        comment: "#728CAB",
+        cyan: "#75A6FF",
+        green: "#5ED99F",
+        orange: "#FFAD6F",
+        pink: "#FF90B6",
+        purple: "#A889C5",
+        red: "#FF6E6E",
+        yellow: "#FCD256"
+      },
+      cosmicSunset: {
+        background: "#1B1921",
+        currentLine: "#272530",
+        selection: "#3C3948",
+        foreground: "#B8B4CB",
+        comment: "#7A738B",
+        cyan: "#77B4D8",
+        green: "#6CC09E",
+        orange: "#FFA677",
+        pink: "#FF95B2",
+        purple: "#B48FC1",
+        red: "#FF6565",
+        yellow: "#FFD566"
+      },
+      cyberForest: {
+        background: "#0D151D",
+        currentLine: "#18262F",
+        selection: "#2B3B47",
+        foreground: "#CDD7E0",
+        comment: "#667B8B",
+        cyan: "#7EC4CF",
+        green: "#68CC96",
+        orange: "#FFAC6C",
+        pink: "#FF89B4",
+        purple: "#A889C5",
+        red: "#FF6565",
+        yellow: "#FFCB6B"
+      },
+      cyberPunkCity: {
+        background: "#000000",
+        currentLine: "#121212",
+        selection: "#1F1F1F",
+        foreground: "#DADADA",
+        comment: "#626262",
+        cyan: "#71B7FF",
+        green: "#50D890",
+        orange: "#FFB86C",
+        pink: "#FF79C6",
+        purple: "#BB86FC",
+        red: "#FF5454",
+        yellow: "#FDD663"
+      },
+      cyberpunkNeon: {
+        background: "#121212",
+        currentLine: "#1B1B1B",
+        selection: "#262626",
+        foreground: "#DADADA",
+        comment: "#6C6C6C",
+        cyan: "#69AEDB",
+        green: "#4ECCA3",
+        orange: "#FFB86C",
+        pink: "#FF79C6",
+        purple: "#D08EFF",
+        red: "#FF5454",
+        yellow: "#FDD663"
+      },
+      darkDesert: {
+        background: "#1E2022",
+        currentLine: "#282A2E",
+        selection: "#393D42",
+        foreground: "#C0C5CE",
+        comment: "#5C6368",
+        cyan: "#6FB3E0",
+        green: "#88C076",
+        orange: "#FFB454",
+        pink: "#FF7F90",
+        purple: "#B48EAD",
+        red: "#FF6666",
+        yellow: "#FFCC66"
+      },
+      darkMint: {
+        background: "#11161A",
+        currentLine: "#1B2128",
+        selection: "#3D4853",
+        foreground: "#D9DEE5",
+        comment: "#65737E",
+        cyan: "#88C0D0",
+        green: "#98C379",
+        orange: "#FFB86C",
+        pink: "#FF7F8B",
+        purple: "#C594C5",
+        red: "#FF6561",
+        yellow: "#FAD07B"
+      },
+      deepOcean: {
+        background: "#121C2C",
+        currentLine: "#182236",
+        selection: "#2B3E50",
+        foreground: "#BDC3C7",
+        comment: "#6C7A89",
+        cyan: "#59ABE3",
+        green: "#26A65B",
+        orange: "#F9690E",
+        pink: "#EB3B5A",
+        purple: "#D2527F",
+        red: "#E74C3C",
+        yellow: "#F5AB35"
+      },
+      deepOceanBlue: {
+        background: "#1B2F40",
+        currentLine: "#263B53",
+        selection: "#3A536E",
+        foreground: "#BFC9D4",
+        comment: "#657C8E",
+        cyan: "#6CB5FF",
+        green: "#65C287",
+        orange: "#FFA974",
+        pink: "#FF87B4",
+        purple: "#AE9BFF",
+        red: "#FF6666",
+        yellow: "#FFD67B"
+      },
+      deepOceanSunset: {
+        background: "#151D2A",
+        currentLine: "#1D2735",
+        selection: "#31405B",
+        foreground: "#D5D9E0",
+        comment: "#6C7B8B",
+        cyan: "#6FAAD4",
+        green: "#66C295",
+        orange: "#FFA476",
+        pink: "#FF94B0",
+        purple: "#B08FC0",
+        red: "#FF6565",
+        yellow: "#FFD466"
+      },
+      deepSpace: {
+        background: "#0F1419",
+        currentLine: "#1A232D",
+        selection: "#3A4758",
+        foreground: "#CDD9E5",
+        comment: "#657C96",
+        cyan: "#6CB6FF",
+        green: "#4CAF50",
+        orange: "#FFB454",
+        pink: "#FF75B5",
+        purple: "#9A76FF",
+        red: "#FF5555",
+        yellow: "#FFC857"
+      },
+      dracula: {
+        background: "#282a36",
+        currentLine: "#44475a",
+        selection: "#44475a",
+        foreground: "#f8f8f2",
+        comment: "#6272a4",
+        cyan: "#8be9fd",
+        green: "#50fa7b",
+        orange: "#ffb86c",
+        pink: "#ff79c6",
+        purple: "#bd93f9",
+        red: "#ff5555",
+        yellow: "#f1fa8c"
+      },
+      dreamyDusk: {
+        background: "#22243D",
+        currentLine: "#313558",
+        selection: "#4C4F6D",
+        foreground: "#A5A7C5",
+        comment: "#6F728E",
+        cyan: "#81A2BE",
+        green: "#7FB074",
+        orange: "#FFB476",
+        pink: "#FF91A4",
+        purple: "#AE8DC2",
+        red: "#FF7272",
+        yellow: "#FFD67A"
+      },
+      electricLagoon: {
+        background: "#15232B",
+        currentLine: "#20323E",
         selection: "#344E5F",
         foreground: "#A6C0B9",
         comment: "#6C8F81",
@@ -5588,606 +6187,252 @@
           return this;
       }
       get current(){
-          return document.__FavIcon__.href;
-      }
-      onChange(callback){
-          if(this.cache.Emitter)this.cache.Emitter.on("ziko:favicon-changed",callback);
-          return this;
-      }
-      useEventEmitter(){
-          this.cache.Emitter=useEventEmitter();
-          return this;
-      }
-
-  }
-  const useFavIcon=(FavIcon,useEventEmitter)=>new ZikoUseFavIcon(FavIcon,useEventEmitter);
-
-  class ZikoUseChannel{
-      constructor(name=""){
-          this.channel=new BroadcastChannel(name);
-          this.EVENTS_DATAS_PAIRS=new Map();
-          this.EVENTS_HANDLERS_PAIRS=new Map();
-          this.LAST_RECEIVED_EVENT="";
-          this.UUID="ziko-channel"+Random.string(10);
-          this.SUBSCRIBERS=new Set([this.UUID]);
-      }
-      get broadcast(){
-          // update receiver
-          return this;
-      }
-      emit(event, data){
-          this.EVENTS_DATAS_PAIRS.set(event,data);
-          this.#maintainEmit(event);
-          return this;
-      }
-      on(event,handler=console.log){
-          this.EVENTS_HANDLERS_PAIRS.set(event,handler);
-          this.#maintainOn();
-          return this;
-      }
-      #maintainOn(){
-          this.channel.onmessage = (e) => {
-              this.LAST_RECEIVED_EVENT=e.data.last_sended_event;
-              const USER_ID=e.data.userId;
-              this.SUBSCRIBERS.add(USER_ID);
-              const Data=e.data.EVENTS_DATAS_PAIRS.get(this.LAST_RECEIVED_EVENT);
-              const Handler=this.EVENTS_HANDLERS_PAIRS.get(this.LAST_RECEIVED_EVENT);
-              if(Data && Handler)Handler(Data);
-            };
-            return this;
-      }
-      #maintainEmit(event){
-          this.channel.postMessage({
-              EVENTS_DATAS_PAIRS:this.EVENTS_DATAS_PAIRS,
-              last_sended_event:event,
-              userId:this.UUID
-          });
-          return this;
-      }
-      close(){
-          this.channel.close();
-          return this;
-      }
-  }
-  const useChannel=name=>new ZikoUseChannel(name);
-
-  class ZikoUseThreed {
-      #workerContent;
-      constructor() {
-          this.#workerContent = (
-              function (msg) {
-                  try {
-                      const func = new Function("return " + msg.data.fun)();
-                      let result = func();
-                      postMessage({ result });
-                  } catch (error) {
-                      postMessage({ error: error.message });
-                  } finally {
-                      if (msg.data.close) self.close();
-                  }
-              }
-          ).toString();
-          this.blob = new Blob(["this.onmessage = " + this.#workerContent], { type: "text/javascript" });
-          this.worker = new Worker(window.URL.createObjectURL(this.blob));
-      }
-      call(func, callback, close = true) {
-          this.worker.postMessage({
-              fun: func.toString(),
-              close
-          });
-          this.worker.onmessage = function (e) {
-              if (e.data.error) {
-                  console.error(e.data.error);
-              } else {
-                  callback(e.data.result);
-              }
-          };
-          return this;
-      }
-  }
-
-  const useThread = (func, callback , close) => {
-      const T = new ZikoUseThreed();
-      if (func) {
-          T.call(func, callback , close);
-      }
-      return T;
-  };
-
-  class ZikoUseBluetooth{
-      constructor(options={acceptAllDevices:true}){
-          this.options=options;
-          this.__Emitter__=useEventEmitter();
-          if(this.isSupported)this.#init();
-      }   
-      async #init(){
-          this.promise=navigator.bluetooth.requestDevice(this.options).then(device=>this.device=device);
-      }
-      get isSupported(){
-          return !!navigator.bluetooth;
-      }
-      get current(){
-          // Synchrouns Code
-          return this.device;
-      }
-      connect(){
-          this.server=this.device.gatt.connect();
-          this.__Emitter__.emit("ziko:bluetooth-connected");
-          return this;
-      }
-      disconnect(){
-          this.device.gatt.disconnect();
-          this.__Emitter__.emit("ziko:bluetooth-disconnected");
-          return this;
-      }
-      onConnect(callback){
-          this.__Emitter__.on("ziko:bluetooth-connected",callback);
-          return this;
-      }
-      onDisconnect(callback){
-          this.__Emitter__.on("ziko:bluetooth-disconnected",callback);
-          return this;
-      }
-      dispose(){
-
-      }
-      async battery(callback){
-          const batteryService = await this.server.getPrimaryService("battery_service");
-          const batteryLevelCharacteristic = await batteryService.getCharacteristic("battery_level");
-          const batteryLevel = await batteryLevelCharacteristic.readValue();
-          const batteryPercent = await batteryLevel.getUint8(0);
-          callback(batteryPercent);
-      }
-  }
-  const useBluetooth=(options)=>new ZikoUseBluetooth(options);
-
-  class ZikoUseBattery{
-      constructor(){
-          if(this.isSupported)this.#init();
-      }   
-      async #init(){
-          this.__Battery__=await navigator.getBattery(); 
-      }
-      get isSupported(){
-          return !!navigator.getBattery;
-      }
-      get current(){
-          // Synchrouns Code
-          const {
-              level,
-              charging,
-              chargingTime,
-              dischargingTime
-          }=this.__Battery__;
-          return {
-              level,
-              charging,
-              chargingTime,
-              dischargingTime
-          }
-      }
-      onChargingChange(callback){
-          this.__Battery__.addEventListener("chargingchange",callback);
-          return this;
-      }
-      onLevelChange(callback){
-          this.__Battery__.addEventListener("levelchange",callback);
-          return this;
-      }
-  }
-  const useBattery=()=>new ZikoUseBattery();
-
-  class ZikoUseGeolocation{
-      constructor(){
-          if(this.isSupported)this.#init();
-      }   
-      async #init(){
-          navigator.geolocation.getCurrentPosition(e=>this.__Geolocation__=e);
-      }
-      get isSupported(){
-          return !!navigator.geolocation;
-      }
-      get current(){
-          // Synchrouns Code
-          return this.__Geolocation__;
+          return document.__FavIcon__.href;
       }
-  }
-  const useGeolocation=()=>new ZikoUseGeolocation();
-
-  class ZikoTimeLoop {
-    constructor(callback, {fps,step,t=[0,null],start=true}={}) {
-      this.callback = callback;
-      this.cache = {
-        isRunning: false,
-        AnimationId : null,
-        startTime : null,
-        step,
-        fps,
-        t,
-        started:start
-      };
-      this.adjust();
-      this.i=0;
-    }
-    adjust(){
-      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;
+      onChange(callback){
+          if(this.cache.Emitter)this.cache.Emitter.on("ziko:favicon-changed",callback);
+          return this;
       }
-      if(this.cache.started){
-        const t=this.cache.t;
-        t[0]?this.startAfter(t[0]):this.start();
-        if(t[1])this.stopAfter(t[1]);
+      useEventEmitter(){
+          this.cache.Emitter=useEventEmitter();
+          return this;
       }
-      return this;
-    }
-    get TIME_STEP() {
-      return this.cache.step?this.cache.step:1000 / this.cache.fps;
-    }
-    start() {
-      if (!this.cache.isRunning) {
-        this.i=0;
-        this.cache.isRunning = true;
-        this.cache.startTime = Date.now();
-        this.animate();
+
+  }
+  const useFavIcon=(FavIcon,useEventEmitter)=>new ZikoUseFavIcon(FavIcon,useEventEmitter);
+
+  /*
+   [
+              {
+                  query: '(min-width: 600px)',
+                  callback: () => console.log(1)
+              },
+              {
+                  query: '(max-width: 300px)',
+                  callback: () => console.log(2)
+              }
+          ]
+  */
+  class ZikoUseMediaQuery {
+      constructor(mediaQueryRules=[],fallback=()=>{}) {
+          this.mediaQueryRules = mediaQueryRules;
+          this.fallback = fallback;
+          this.lastCalledCallback = null;
+          this.init();
       }
-      return this;
-    }
-    pause() {
-      if (this.cache.isRunning) {
-        clearTimeout(this.cache.AnimationId);
-        this.cache.isRunning = false;
+
+      init() {
+          this.mediaQueryRules.forEach(({ query, callback }) => {
+              const mediaQueryList = globalThis.matchMedia(query);
+              const checkMatches = () => {
+                  const anyMatch = this.mediaQueryRules.some(({ query }) => globalThis.matchMedia(query).matches);
+                  if (mediaQueryList.matches) {
+                      callback();
+                      this.lastCalledCallback = callback;
+                  } else if (!anyMatch && this.lastCalledCallback !== this.fallback) {
+                      this.fallback();
+                      this.lastCalledCallback = this.fallback;
+                  }
+              };
+              checkMatches();
+              mediaQueryList.addListener(checkMatches);
+          });
       }
-      return this;
-    }
-    stop(){
-      this.pause();
-      this.i=0;
-      return this;
-    }
-    resume(){
-      this.cache.isRunning=true;
-      this.animate();
-      return this;
-    }
-    startAfter(t=1000){
-      setTimeout(this.start.bind(this),t);
-      return this;
-    }
-    stopAfter(t=1000){
-      setTimeout(this.stop.bind(this),t);
-      return this;   
-    }
-    animate = () => {
-      if (this.cache.isRunning) {
-        const now = Date.now();
-        const delta = now - this.cache.startTime;
-        if (delta > this.TIME_STEP) {
-          this.callback(this);
-          this.i++;
-          this.cache.startTime = now - (delta % this.TIME_STEP);
-        }
-        this.cache.AnimationId = setTimeout(this.animate, 0);
-      }  }
   }
 
-  const loop = (callback, options) => new ZikoTimeLoop(callback, options);
+  const useMediaQuery = (mediaQueryRules,fallback) => new ZikoUseMediaQuery(mediaQueryRules,fallback);
 
-  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;
+  class ZikoUseChannel{
+      constructor(name=""){
+          this.channel=new BroadcastChannel(name);
+          this.EVENTS_DATAS_PAIRS=new Map();
+          this.EVENTS_HANDLERS_PAIRS=new Map();
+          this.LAST_RECEIVED_EVENT="";
+          this.UUID="ziko-channel"+Random.string(10);
+          this.SUBSCRIBERS=new Set([this.UUID]);
+      }
+      get broadcast(){
+          // update receiver
+          return this;
+      }
+      emit(event, data){
+          this.EVENTS_DATAS_PAIRS.set(event,data);
+          this.#maintainEmit(event);
+          return this;
+      }
+      on(event,handler=console.log){
+          this.EVENTS_HANDLERS_PAIRS.set(event,handler);
+          this.#maintainOn();
+          return this;
       }
-  };
-
-  const useDebounce=(fn,delay=1000)=>{
-      let id;
-      return (...args)=>id?clearTimeout(id):setTimeout(()=>fn(...args),delay)
-  };
-  const useThrottle=(fn,delay)=>{
-      let lastTime=0;
-      return (...args)=>{
-          const now=new Date().getTime();
-          if(now-lastTime<delay)return;
-          lastTime=now;
-          fn(...args); 
+      #maintainOn(){
+          this.channel.onmessage = (e) => {
+              this.LAST_RECEIVED_EVENT=e.data.last_sended_event;
+              const USER_ID=e.data.userId;
+              this.SUBSCRIBERS.add(USER_ID);
+              const Data=e.data.EVENTS_DATAS_PAIRS.get(this.LAST_RECEIVED_EVENT);
+              const Handler=this.EVENTS_HANDLERS_PAIRS.get(this.LAST_RECEIVED_EVENT);
+              if(Data && Handler)Handler(Data);
+            };
+            return this;
       }
-  };
-
-  const time_memory_Taken = (callback) => {
-      const t0 = Date.now();
-      const m0 = performance.memory.usedJSHeapSize;
-      const result = callback();
-      const t1 = Date.now();
-      const m1 = performance.memory.usedJSHeapSize;
-      const elapsedTime = t1 - t0;
-      const usedMemory = m1 - m0;
-      return { 
-          elapsedTime,
-          usedMemory, 
-          result 
-      };
-    };
+      #maintainEmit(event){
+          this.channel.postMessage({
+              EVENTS_DATAS_PAIRS:this.EVENTS_DATAS_PAIRS,
+              last_sended_event:event,
+              userId:this.UUID
+          });
+          return this;
+      }
+      close(){
+          this.channel.close();
+          return this;
+      }
+  }
+  const useChannel=name=>new ZikoUseChannel(name);
 
-  const waitForUIElm=(UIElement)=>{
-      return new Promise(resolve => {
-          if (UIElement.element) {
-              return resolve(UIElement.element);
-          }
-    
-          const observer = new MutationObserver(() => {
-              if (UIElement.element) {
-                  resolve(UIElement.element);
-                  observer.disconnect();
+  class ZikoUseThreed {
+      #workerContent;
+      constructor() {
+          this.#workerContent = (
+              function (msg) {
+                  try {
+                      const func = new Function("return " + msg.data.fun)();
+                      let result = func();
+                      postMessage({ result });
+                  } catch (error) {
+                      postMessage({ error: error.message });
+                  } finally {
+                      if (msg.data.close) self.close();
+                  }
               }
+          ).toString();
+          this.blob = new Blob(["this.onmessage = " + this.#workerContent], { type: "text/javascript" });
+          this.worker = new Worker(window.URL.createObjectURL(this.blob));
+      }
+      call(func, callback, close = true) {
+          this.worker.postMessage({
+              fun: func.toString(),
+              close
           });
-    
-          observer.observe(document.body, {
-              childList: true,
-              subtree: true
-          });
-      });
-    };
-    const waitForUIElmSync=(UIElement,timeout=2000)=>{
-      const t0=Date.now();
-      while(Date.now()-t0<timeout){
-        if(UIElement.element)return UIElement.element
+          this.worker.onmessage = function (e) {
+              if (e.data.error) {
+                  console.error(e.data.error);
+              } else {
+                  callback(e.data.result);
+              }
+          };
+          return this;
       }
-    };
-
-  const wait=(delayInMS)=>{
-      return new Promise((resolve) => setTimeout(resolve, delayInMS));
-  };
-  const timeTaken = callback => {
-      console.time('timeTaken');
-      const r = callback();
-      console.timeEnd('timeTaken');
-      return r;
+  }
+
+  const useThread = (func, callback , close) => {
+      const T = new ZikoUseThreed();
+      if (func) {
+          T.call(func, callback , close);
+      }
+      return T;
   };
 
-  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;
+  class ZikoUseBluetooth{
+      constructor(options={acceptAllDevices:true}){
+          this.options=options;
+          this.__Emitter__=useEventEmitter();
+          if(this.isSupported)this.#init();
+      }   
+      async #init(){
+          this.promise=navigator.bluetooth.requestDevice(this.options).then(device=>this.device=device);
       }
-      #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;
-              }
+      get isSupported(){
+          return !!navigator.bluetooth;
       }
-      reset(restart=true){
-          this.t=0;
-          this.tx=0;
-          this.ty=0;
-          this.i=0;
-          if(restart)this.start();
-          return this;
+      get current(){
+          // Synchrouns Code
+          return this.device;
       }
-      #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);
-          }
+      connect(){
+          this.server=this.device.gatt.connect();
+          this.__Emitter__.emit("ziko:bluetooth-connected");
           return this;
       }
-      start(){
-          this.#animate(true);
+      disconnect(){
+          this.device.gatt.disconnect();
+          this.__Emitter__.emit("ziko:bluetooth-disconnected");
           return this;
       }
-      pause(){
-          if (this.cache.isRunning) {
-              clearTimeout(this.cache.AnimationId);
-              this.cache.isRunning = false;
-            }
+      onConnect(callback){
+          this.__Emitter__.on("ziko:bluetooth-connected",callback);
           return this;
       }
-      resume(){
-          this.#animate(false);
+      onDisconnect(callback){
+          this.__Emitter__.on("ziko:bluetooth-disconnected",callback);
           return this;
       }
-      stop(){
-          this.pause();
-          this.reset(false);
-          return this;
+      dispose(){
+
+      }
+      async battery(callback){
+          const batteryService = await this.server.getPrimaryService("battery_service");
+          const batteryLevelCharacteristic = await batteryService.getCharacteristic("battery_level");
+          const batteryLevel = await batteryLevelCharacteristic.readValue();
+          const batteryPercent = await batteryLevel.getUint8(0);
+          callback(batteryPercent);
       }
-      // clear(){
-      // }
-      // stream(){
-      // }
   }
-
-  const animation=(callback,config)=>new ZikoTimeAnimation(callback,config);
+  const useBluetooth=(options)=>new ZikoUseBluetooth(options);
 
-  const Time={
-      wait,
-      timeTaken,
-      useThrottle,
-      useDebounce,
-      Ease,
-      time_memory_Taken,
-      loop,
-      animation,
-      waitForUIElm,
-      waitForUIElmSync,
-      ExtractAll: function () {
-          const keys = Object.keys(this);
-          for (let i = 0; i < keys.length; i++) {
-              const key = keys[i];
-              if (key !== 'ExtractAll' && key !== 'RemoveAll') {
-                  globalThis[key] = this[key];
-              }
+  class ZikoUseBattery{
+      constructor(){
+          if(this.isSupported)this.#init();
+      }   
+      async #init(){
+          this.__Battery__=await navigator.getBattery(); 
+      }
+      get isSupported(){
+          return !!navigator.getBattery;
+      }
+      get current(){
+          // Synchrouns Code
+          const {
+              level,
+              charging,
+              chargingTime,
+              dischargingTime
+          }=this.__Battery__;
+          return {
+              level,
+              charging,
+              chargingTime,
+              dischargingTime
           }
+      }
+      onChargingChange(callback){
+          this.__Battery__.addEventListener("chargingchange",callback);
           return this;
-      },
-      RemoveAll: function () {
-          const keys = Object.keys(this);
-          for (let i = 0; i < keys.length; i++) {
-              const key = keys[i];
-              if (key !== 'RemoveAll') {
-                  delete globalThis[key];
-              }
-          }
+      }
+      onLevelChange(callback){
+          this.__Battery__.addEventListener("levelchange",callback);
           return this;
       }
-  };
+  }
+  const useBattery=()=>new ZikoUseBattery();
+
+  class ZikoUseGeolocation{
+      constructor(){
+          if(this.isSupported)this.#init();
+      }   
+      async #init(){
+          navigator.geolocation.getCurrentPosition(e=>this.__Geolocation__=e);
+      }
+      get isSupported(){
+          return !!navigator.geolocation;
+      }
+      get current(){
+          // Synchrouns Code
+          return this.__Geolocation__;
+      }
+  }
+  const useGeolocation=()=>new ZikoUseGeolocation();
 
   // To do : remove old items
   class ZikoUseStorage{
@@ -6274,6 +6519,7 @@
   const Use={
       useStyle,
       useTheme,
+      useMediaQuery,
       useBattery,
       useGeolocation,
       useEventEmitter,
@@ -6309,6 +6555,22 @@
       }
   };
 
+  const Reactivity={
+      Events,
+      Observer,
+      Use,
+      ExtractAll: function () {
+          this.Events.ExtractAll();
+          this.Observer.ExtractAll();
+          this.Use.ExtractAll();
+      },
+      RemoveAll: function () {
+          this.Events.RemoveAll();
+          this.Observer.RemoveAll();
+          this.Use.RemoveAll();
+      }
+  };
+
   class ZikoUIElement {
     constructor(element,name="") {
       this.target = globalThis.__Ziko__.__Config__.default.target||globalThis.document.body;
@@ -6531,15 +6793,18 @@
         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.element.setAttribute(names[i], values[i]);
-          Object.assign(this.cache.attributes, Object.fromEntries([[names[i], values[i]]]));
+          if(this?.attr[name[i]]!==value[i]){
+            this.element.setAttribute(names[i], values[i]);
+            Object.assign(this.cache.attributes, Object.fromEntries([[names[i], values[i]]]));
+          }
         }
       }
       else {
         if(value instanceof Array)value = value.join(" ");
-        this.element.setAttribute(name, value);
-        Object.assign(this.cache.attributes, Object.fromEntries([[name, value]]));
-
+        if(this?.attr[name]!==value){
+          this.element.setAttribute(name, value);
+          Object.assign(this.cache.attributes, Object.fromEntries([[name, value]]));
+        }
       }
       return this;
     }
@@ -6570,7 +6835,7 @@
           return this;*/
     }
     setId(id) {
-      this.element.setAttribute("id", id);
+      this.setAttr("id", id);
       return this;
     }
     get id() {
@@ -6620,173 +6885,175 @@
       return this;
     }
     onPtrMove(...callbacks){
-      if(!this.events.ptr)this.events.ptr = Pointer(this);
+      if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
       this.events.ptr.onMove(...callbacks);
       return this;
     }
     onPtrDown(...callbacks){
-      if(!this.events.ptr)this.events.ptr = Pointer(this);
+      if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
       this.events.ptr.onDown(...callbacks);
       return this;
     }
     onPtrUp(...callbacks){
-      if(!this.events.ptr)this.events.ptr = Pointer(this);
+      if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
       this.events.ptr.onUp(...callbacks);
       return this;
     }
     onPtrEnter(...callbacks){
-      if(!this.events.ptr)this.events.ptr = Pointer(this);
+      if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
       this.events.ptr.onEnter(...callbacks);
       return this;
     }
     onPtrLeave(...callbacks){
-      if(!this.events.ptr)this.events.ptr = Pointer(this);
+      if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
       this.events.ptr.onLeave(...callbacks);
       return this;
     }
     onPtrOut(...callbacks){
-      if(!this.events.ptr)this.events.ptr = Pointer(this);
+      if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
       this.events.ptr.onOut(...callbacks);
       return this;
     }
     onMouseMove(...callbacks){
-      if(!this.events.mouse)this.events.mouse = Mouse(this);
+      if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
       this.events.mouse.onMove(...callbacks);
       return this;
     }
     onMouseDown(...callbacks){
-      if(!this.events.mouse)this.events.mouse = Mouse(this);
+      if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
       this.events.mouse.onDown(...callbacks);
       return this;
     }
     onMouseUp(...callbacks){
-      if(!this.events.mouse)this.events.mouse = Mouse(this);
+      if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
       this.events.mouse.onUp(...callbacks);
       return this;
     }
     onMouseEnter(...callbacks){
-      if(!this.events.mouse)this.events.mouse = Mouse(this);
+      if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
       this.events.mouse.onEnter(...callbacks);
       return this;
     }
     onMouseLeave(...callbacks){
-      if(!this.events.mouse)this.events.mouse = Mouse(this);
+      if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
       this.events.mouse.onLeave(...callbacks);
       return this;
     }
     onMouseOut(...callbacks){
-      if(!this.events.mouse)this.events.mouse = Mouse(this);
+      if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
       this.events.mouse.onOut(...callbacks);
       return this;
     }
     onWheel(...callbacks){
-      if(!this.events.wheel)this.events.wheel = Wheel(this);
+      if(!this.events.wheel)this.events.wheel = useWheelEventnent(this);
       this.events.wheel.onWheel(...callbacks);
       return this;
     }
     onKeyDown(...callbacks){
-      if(!this.events.key)this.events.key = Key(this);
+      if(!this.events.key)this.events.key = useKeyEvenent(this);
       this.events.key.onDown(...callbacks);
       return this;
     }
     onKeyPress(...callbacks){
-      if(!this.events.key)this.events.key = Key(this);
+      if(!this.events.key)this.events.key = useKeyEvenent(this);
       this.events.key.onPress(...callbacks);
       return this;
     }
     onKeyUp(...callbacks){
-      if(!this.events.key)this.events.key = Key(this);
+      if(!this.events.key)this.events.key = useKeyEvenent(this);
       this.events.key.onUp(...callbacks);
       return this;
     }
     onKeysDown({keys=[],callback}={}){
-      if(!this.events.key)this.events.key = Key(this);
+      if(!this.events.key)this.events.key = useKeyEvenent(this);
       this.events.key.handleSuccessifKeys({keys,callback});
       return this;
     }
     onDragStart(...callbacks){
-      if(!this.events.drag)this.events.drag = Drag(this);
+      if(!this.events.drag)this.events.drag = useDragEvent(this);
       this.events.drag.onStart(...callbacks);
       return this;
     }
     onDrag(...callbacks){
-      if(!this.events.drag)this.events.drag = Drag(this);
+      if(!this.events.drag)this.events.drag = useDragEvent(this);
       this.events.drag.onDrag(...callbacks);
       return this;
     }
     onDragEnd(...callbacks){
-      if(!this.events.drag)this.events.drag = Drag(this);
+      if(!this.events.drag)this.events.drag = useDragEvent(this);
       this.events.drag.onEnd(...callbacks);
       return this;
     }
     onDrop(...callbacks){
-      if(!this.events.drop)this.events.drop = Drop(this);
+      if(!this.events.drop)this.events.drop = useDropEvent(this);
       this.events.drop.onDrop(...callbacks);
       return this;
     }
     onClick(...callbacks){
-      if(!this.events.click)this.events.click = Click(this);
+      if(!this.events.click)this.events.click = useClickEventnt(this);
       this.events.click.onClick(...callbacks);
       return this;
     }
     onDbClick(...callbacks){
-      if(!this.events.click)this.events.click = Click(this);
+      if(!this.events.click)this.events.click = useClickEventnt(this);
       this.events.click.onDbClick(...callbacks);
       return this;
     }
     onCopy(...callbacks){
-      if(!this.events.clipboard)this.events.clipboard = Clipboard(this);
+      if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
       this.events.clipboard.onCopy(...callbacks);
       return this;
     }
     onCut(...callbacks){
-      if(!this.events.clipboard)this.events.clipboard = Clipboard(this);
+      if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
       this.events.clipboard.onCut(...callbacks);
       return this;
     }
     onPaste(...callbacks){
-      if(!this.events.clipboard)this.events.clipboard = Clipboard(this);
+      if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
       this.events.clipboard.onPaste(...callbacks);
       return this;
     }
     onSelect(...callbacks){
-      if(!this.events.clipboard)this.events.clipboard = Clipboard(this);
+      if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
       this.events.clipboard.onSelect(...callbacks);
       return this;
     }
     onFocus(...callbacks){
-      if(!this.events.focus)this.events.focus = Focus(this);
+      if(!this.events.focus)this.events.focus = useFocusEvent(this);
       this.events.focus.onFocus(...callbacks);
       return this;
     }
     onBlur(...callbacks){
-      if(!this.events.focus)this.events.focus = Focus(this);
+      if(!this.events.focus)this.events.focus = useFocusEvent(this);
       this.events.focus.onFocus(...callbacks);
       return this;
     }
     on(event_name,...callbacks){
-      if(!this.events.custom)this.events.custom = customEvent(this);
+      if(!this.events.custom)this.events.custom = useCustomEvent(this);
       this.events.custom.on(event_name,...callbacks);
       return this;
     }
     emit(event_name,detail={}){
-      if(!this.events.custom)this.events.custom = customEvent(this);
+      if(!this.events.custom)this.events.custom = useCustomEvent(this);
       this.events.custom.emit(event_name,detail);
       return this;
     }
-    watchAttr(){
-
+    watchAttr(callback){
+      if(!this.observer.attr)this.observer.attr = watchAttr(this,callback);
+      return this;
     }
-    watchChildren(){
-
+    watchChildren(callback){
+      if(!this.observer.children)this.observer.children = watchChildren(this,callback);
+      return this;
     }
     watchSize(callback){
-      if(!this.observer.resize)this.observer.resize = WatchSize(this,callback);
+      if(!this.observer.resize)this.observer.resize = watchSize(this,callback);
       this.observer.resize.start();
       return this;
     }
     watchIntersection(callback,config){
-      if(!this.observer.intersection)this.observer.intersection = WatchIntersection(this,callback,config);
+      if(!this.observer.intersection)this.observer.intersection = watchIntersection(this,callback,config);
       this.observer.intersection.start();
       return this;
     }
@@ -7192,20 +7459,20 @@
   //import { debounce,throttle} from "../../Data/decorators.js";
 
   class ZikoUIInput extends ZikoUIElement {
-    constructor(value = "",datalist) {
-      super();
+    constructor(name , value = "",datalist) {
+      super("input",name);
       this.element = document.createElement("input");
       Object.assign(this.events,{input:null});
       this.setValue(value);
       if(datalist)this.linkDatalist(datalist);
     }
     onInput(...callbacks){
-      if(!this.events.input)this.events.input = Input$1(this);
+      if(!this.events.input)this.events.input = useInputEvent(this);
       this.events.input.onInput(...callbacks);
       return this;
     }
     onChange(...callbacks){
-      if(!this.events.input)this.events.input = Input$1(this);
+      if(!this.events.input)this.events.input = useInputEvent(this);
       this.events.input.onChange(...callbacks);
       return this;
     }
@@ -7268,7 +7535,7 @@
   }
   class ZikoUIInputSearch extends ZikoUIInput {
     constructor() {
-      super();
+      super("inputSearch");
       this._setType("search");
       this.Length = 0;
     }
@@ -7305,7 +7572,7 @@
   }
   class ZikoUIInputNumber extends ZikoUIInput {
     constructor(min, max ,step = 1) {
-      super();
+      super("inpuNumber");
       this._setType("number");
       this.setMin(min).setMax(max).setStep(step);
     }
@@ -7327,14 +7594,14 @@
   }
   class ZikoUIInputSlider extends ZikoUIInputNumber {
     constructor(val = 0, min = 0, max = 10, step = 1) {
-      super();
+      super("inputSlider");
       this._setType("range");
       this.setMin(min).setMax(max).setValue(val).setStep(step);
     }
   }
   class ZikoUIInputColor extends ZikoUIInput {
     constructor() {
-      super();
+      super("inputColor");
       this._setType("color");
       this.background(this.value);
       this.onInput(() => this.background(this.value));
@@ -7342,37 +7609,37 @@
   }
   class ZikoUIInputPassword extends ZikoUIInput {
     constructor() {
-      super();
+      super("inputPassword");
       this._setType("password");
     }
   }
   class ZikoUIInputEmail extends ZikoUIInput {
     constructor() {
-      super();
+      super("inputEmail");
       this._setType("email");
     }
   }
   class ZikoUIInputTime extends ZikoUIInput {
     constructor() {
-      super();
+      super("inputTime");
       this._setType("time");
     }
   }
   class ZikoUIInputDate extends ZikoUIInput {
     constructor() {
-      super();
+      super("inputDate");
       this._setType("date");
     }
   }
   class ZikoUIInputDateTime extends ZikoUIInput {
     constructor() {
-      super();
+      super("inputDateTime");
       this._setType("datetime-local");
     }
   }
   class ZikoUIInputCheckbox extends ZikoUIInput {
     constructor() {
-      super();
+      super("inputCheckbox");
       this._setType("checkbox");
       this.cursor("pointer");
     }
@@ -7390,7 +7657,7 @@
   }
   class ZikoUIInputRadio extends ZikoUIInput {
     constructor() {
-      super();
+      super("inputRadio");
       this._setType("radio");
       this.cursor("pointer");
     }
@@ -7410,7 +7677,7 @@
 
   class ZikoUIInputImage extends ZikoUIElement {
     constructor(text = "File") {
-      super();
+      super("inputImage");
       this._aux_element = btn(text).setTarget(this.Target);
       this.element = document.createElement("input");
       this.element.setAttribute("type", "file");
@@ -8929,69 +9196,361 @@
       } else {
         throw new Error(`Failed to fetch data from ${url}. Status: ${xhr.status}`);
       }
-  };
-
-  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 Data={
-      parseXML,
-      preload,
-      markdown2html,
-      adoc2html,
-      csv2arr,
-      csv2matrix,
-      csv2object,
-      csv2json,
-      csv2sql,
-      json2arr,
-      json2csv,
-      json2csvFile,
-      json2yml,
-      json2ymlFile,
-      json2xml,
-      json2xmlFile,
-      svg2str,
-      svg2ascii,
-      svg2imgUrl,
-      svg2img,
-      ExtractAll: function () {
-          const keys = Object.keys(this);
-          for (let i = 0; i < keys.length; i++) {
-              const key = keys[i];
-              if (key !== 'ExtractAll' && key !== 'RemoveAll') {
-                  globalThis[key] = this[key];
-              }
-          }
-          return this;
-      },
-      RemoveAll: function () {
-          const keys = Object.keys(this);
-          for (let i = 0; i < keys.length; i++) {
-              const key = keys[i];
-              if (key !== 'RemoveAll') {
-                  delete globalThis[key];
-              }
-          }
-          return this;
+  };
+
+  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 Patterns={
+      isDigit: /^\d+$/,
+      isEmail: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+      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);
+
+  const Data={
+      str,
+      Str,
+      parseXML,
+      preload,
+      markdown2html,
+      adoc2html,
+      csv2arr,
+      csv2matrix,
+      csv2object,
+      csv2json,
+      csv2sql,
+      json2arr,
+      json2csv,
+      json2csvFile,
+      json2yml,
+      json2ymlFile,
+      json2xml,
+      json2xmlFile,
+      svg2str,
+      svg2ascii,
+      svg2imgUrl,
+      svg2img,
+      ExtractAll: function () {
+          const keys = Object.keys(this);
+          for (let i = 0; i < keys.length; i++) {
+              const key = keys[i];
+              if (key !== 'ExtractAll' && key !== 'RemoveAll') {
+                  globalThis[key] = this[key];
+              }
+          }
+          return this;
+      },
+      RemoveAll: function () {
+          const keys = Object.keys(this);
+          for (let i = 0; i < keys.length; i++) {
+              const key = keys[i];
+              if (key !== 'RemoveAll') {
+                  delete globalThis[key];
+              }
+          }
+          return this;
+      }
+  };
+
+  // import svgRect from "./Elements/rect.js";
+  // import svgCircle from "./Elements/circle.js";
+  // import svgEllipse from "./Elements/ellipse.js";
+  // import svgLine from "./Elements/line.js";
+  // //import svgPath from "./Elements/path.js";
+  // import svgPolygon from "./Elements/polygon.js";
+  // import svgImage from "./Elements/image.js";
+  // import svgText from "./Elements/text.js";
+  // import svgGroupe from "./Elements/groupe.js";
+  // import svgLink from "./Elements/link.js";
+  // //import svgObject from "./Elements/foreignObject.js";
+  // //import svgGrid from "./Elements/grid.js";
+
+    class ZikoUISvg extends ZikoUIElement {
+      constructor(w=360,h=300) {
+        super("svg","svg");
+        //this.cache={};
+        this.setAttr("width",w);
+        this.setAttr("height",h);
+        this.style({border:"1px black solid"});
+        //this.view(-w/2,-h/2,w/2,h/2)
+        this.view(-10,-10,10,10);
+      }
+      view(x1,y1,x2,y2){
+        let width=Math.abs(x2-x1);
+        let height=Math.abs(y2-y1);
+        this.setAttr("viewBox",[x1,y1,width,height].join(" "));
+        this.st.scaleY(-1);
+        return this;
+      }
+      add(...svgElement){
+        for(let i=0;i<svgElement.length;i++){
+          this.element.appendChild(svgElement[i].element);
+          this.items.push(svgElement[i]);
+        }
+        this.maintain();
+        return this;
+      }
+      remove(...svgElement){
+        for(let i=0;i<svgElement.length;i++){
+          this.element.removeChild(svgElement[i].element);
+          this.items=this.items.filter(n=>!svgElement);
+        }
+        this.maintain();
+        return this;     
+      }
+      // text(text,x,y){
+      //   let item=svgText(text,x,y);
+      //   this.element.appendChild(item.element);
+      //   item.x(x-item.element.getComputedTextLength()/2);
+      //   return item;
+      // }
+      // rect(x,y,w,h){
+      //   let item=svgRect(x,y,w,h);
+      //   this.add(item);
+      //   return item;
+      // }
+      // line(x1,y1,x2,y2){
+      //   let item=svgLine(x1,y1,x2,y2);
+      //   this.element.appendChild(item.element);
+      //   return item;
+      // }
+      // circle(cx,cy,r){
+      //   let item=svgCircle(cx,cy,r);
+      //   this.element.appendChild(item.element);
+      //   return item;
+      // }
+      // ellipse(cx,cy,rx,ry){
+      //   let item=svgEllipse(cx,cy,rx,ry);
+      //   this.element.appendChild(item.element);
+      //   return item;
+      // }
+      // polygon(X,Y){
+      //   let item=svgPolygon(X,Y);
+      //   this.element.appendChild(item.element);
+      //   item.addPoints(X,Y)
+      //   return item;
+      // }
+      // image(src,w,h,x,y){
+      //   let item=svgImage(src,w,h,x,y);
+      //   this.element.appendChild(item.element);
+      //   return item;
+      // }
+      mask(){
+    
+      }
+      toString(){
+        return  (new XMLSerializer()).serializeToString(this.element);
+      }
+      btoa(){
+        return btoa(this.toString())
+      }
+      toImg(){
+        return 'data:image/svg+xml;base64,'+this.btoa()
       }
-  };
+      toImg2(){
+        return "data:image/svg+xml;charset=utf8,"+this.toString().replaceAll("<","%3C").replaceAll(">","%3E").replaceAll("#","%23").replaceAll('"',"'");
+      }
+    }
+
+    const Svg =(w,h)=>new ZikoUISvg(w,h);
 
   class ZikoSvgElement {
-    constructor() {
-      this.cache = {};
+    constructor(type) {
+      this.cache = {
+        type
+      };
+    }
+    pos(x,y){
+      return this.posX(x).posY(y);
+    }
+    posX(x){
+      if(["circle","ellipse"].includes(this.cache.type))this.element.cx.baseVal.value=x;
+      else this.element.x.baseVal.value=x;
+      return this;
+    }
+    posY(y){
+      if(["circle","ellipse"].includes(this.cache.type))this.element.cy.baseVal.value=y;
+      else this.element.y.baseVal.value=y;
+      return this;
+    }
+    translate(x,y){
+      return this;
     }
     color({ stroke, fill }) {
       this.element.setAttribute("stroke", stroke);
@@ -9060,32 +9619,24 @@
 
   class ZikoSvgCircle extends ZikoSvgElement{
       constructor(cx,cy,r){
-        super();
+        super("circle");
         this.element=document.createElementNS(
           "http://www.w3.org/2000/svg",
           "circle",
         );
-        this.cx(cx).cy(cy).r(r);
-      }
-      cx(cx){
-         this.element.cx.baseVal.value=cx;
-         return this;
-      }
-      cy(cy){
-         this.element.cy.baseVal.value=cy;
-         return this;
+        this.pos(cx,cy).setR(r);
       }
-      r(r){
+      setR(r){
          this.element.r.baseVal.value=r;
          return this;
       }
-      get R(){
+      get r(){
         return this.element.r.baseVal.value;
       }
-      get Cx(){
+      get cx(){
         return this.element.cx.baseVal.value;
       } 
-      get Cy(){
+      get cy(){
         return this.element.cy.baseVal.value;
       }  
     } 
@@ -9093,26 +9644,18 @@
 
   class ZikoSvgEllipse extends ZikoSvgElement{
       constructor(cx,cy,rx,ry){
-        super();
+        super("ellipse");
         this.element=document.createElementNS(
           "http://www.w3.org/2000/svg",
           "ellipse",
         );
-        this.cx(cx).cy(cy).rx(rx).ry(ry);
-      }
-      cx(cx){
-         this.element.cx.baseVal.value=cx;
-         return this;
+        this.pos(cx,cy).setRx(rx).setRy(ry);
       }
-      cy(cy){
-         this.element.cy.baseVal.value=cy;
-         return this;
-      }
-      rx(rx){
+      setRx(rx){
          this.element.rx.baseVal.value=rx;
          return this;
       } 
-      ry(ry){
+      setRy(ry){
          this.element.ry.baseVal.value=ry;
          return this;
       } 
@@ -9147,6 +9690,67 @@
     } 
   const svgLine=(x1,y1,x2,y2)=>new ZikoSvgLine(x1,y1,x2,y2);
 
+  class ZikoSvgPolyLine extends ZikoSvgElement{}
+  const svgPolyLine=(X,Y)=>new ZikoSvgPolyLine(X,Y);
+
+  class ZikoSvgPath extends ZikoSvgElement{
+      constructor(){
+      super();
+        this.element=document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "path",
+        );
+        this.path="";
+        
+      }
+      setPath(){
+          this.element.setAttribute("d",this.path);
+          return this;
+      }
+      clear(){
+          this.path="";
+          this.setPath();
+          return this;
+      }
+      moveTo(x,y){
+          this.path+=`M${x} ${y} `;
+          this.setPath();
+          return this;
+      }
+      lineTo(x,y){
+          this.path+=`L${x} ${y} `;
+          this.setPath();
+          return this;
+      }
+      hr(x){
+          this.path+=`H${x} `;
+          this.setPath();
+          return this;
+      }
+      vr(y){
+          this.path+=`V${y} `;
+          this.setPath();
+          return this;
+      }
+      bezier(x1,y1,x2,y2,x,y){
+          this.path+=`C ${x1} ${y1},${x2} ${y2},${x} ${y} `;
+          this.setPath();
+          return this;      
+      }
+      quadratic(x1,y1,x,y){
+          this.path+=`Q ${x1} ${y1} ${x} ${y} `;
+          this.setPath();
+          return this;      
+      }
+      close(){
+          this.path+="Z";
+          this.setPath();
+          return this;
+      }
+  }
+
+  const svgPath=()=>new ZikoSvgPath();
+
   class ZikoSvgPolygon extends ZikoSvgElement{
       constructor(X=[],Y=[]){
         super();
@@ -9157,6 +9761,7 @@
           "polygon",
         );
         this.element.setAttribute("points","");
+        this.addPoints(X,Y);
       }
       addPoint(x,y){
         let p=this.element.parentElement.createSVGPoint();
@@ -9177,6 +9782,31 @@
     } 
   const svgPolygon=(X,Y)=>new ZikoSvgPolygon(X,Y);
 
+  class ZikoSvgText extends ZikoSvgElement{
+      constructor(text,x,y){
+        super();
+        this.element=document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "text",
+        );
+        this.setText(text);
+        this.x(x).y(y);
+      }
+      x(x){
+         this.element.setAttribute("x",x);
+         return this;
+      }
+      y(y){
+         this.element.setAttribute("y",y);
+         return this;
+      }
+      setText(text=""){
+        this.element.textContent=text;
+        return this;
+      }
+    } 
+  const svgText=(text,x,y)=>new ZikoSvgText(text,x,y);
+
   class ZikoSvgImage extends ZikoSvgElement{
       constructor(src="",w="100%",h="100%",x=0,y=0){
         super();
@@ -9209,30 +9839,36 @@
     } 
   const svgImage=(src,w,h,x,y)=>new ZikoSvgImage(src,w,h,x,y);
 
-  class ZikoSvgText extends ZikoSvgElement{
-      constructor(text,x,y){
-        super();
+  class ZikoSvgForeignObject extends ZikoSvgElement{
+      constructor(x=0,y=0,w="100%",h="100%",...ZikoUIElement){
+        super("foreignObject");
+        this.items=[];
         this.element=document.createElementNS(
           "http://www.w3.org/2000/svg",
-          "text",
+          "foreignObject",
         );
-        this.setText(text);
-        this.x(x).y(y);
-      }
-      x(x){
-         this.element.setAttribute("x",x);
-         return this;
+        this.container=Flex().setTarget(this.element).vertical(0,0).size("auto","auto");
+        this.container.st.scaleY(-1);
+        this.posX(x).posY(y).width(w).height(h);
+      } 
+      width(w){
+          this.element.setAttribute("width",w);
+          return this;
       }
-      y(y){
-         this.element.setAttribute("y",y);
-         return this;
+      height(h){
+          this.element.setAttribute("height",h);
+          return this;
       }
-      setText(text=""){
-        this.element.textContent=text;
+      add(...ZikoUIElement){
+        this.container.append(...ZikoUIElement);
         return this;
-      }
+        }
+      remove(...ZikoUIElement){
+        this.container.append(...ZikoUIElement);
+        return this;   
+        }
     } 
-  const svgText=(text,x,y)=>new ZikoSvgText(text,x,y);
+  const svgObject=(x,y,r)=>new ZikoSvgForeignObject(x,y,r);
 
   class ZikoSvgGroupe extends ZikoSvgElement{
       constructor(...svgElement){
@@ -9255,108 +9891,49 @@
       remove(...svgElement){
         for(let i=0;i<svgElement.length;i++){
           this.element.removeChild(svgElement[i].element);
-          this.items=this.items.filter(n=>!svgElement);
+          this.items=this.items.filter(n=>n!=svgElement);
         }
         return this;     
       }
   }
   const svgGroupe=(...svgElement)=>new ZikoSvgGroupe(...svgElement);
 
-  //import svgObject from "./Elements/foreignObject.js";
-  //import svgGrid from "./Elements/grid.js";
-
-    class ZikoUISvg extends ZikoUIElement {
-      constructor(w=360,h=300) {
-        super("svg","svg");
-        // this.element=document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        //this.cache={};
-        this.setAttr("width",w);
-        this.setAttr("height",h);
-        this.style({border:"1px black solid"});
-        //this.view(-w/2,-h/2,w/2,h/2)
-        //this.view(-10,-10,10,10);
-        //this.render();
-      }
-      view(x1,y1,x2,y2){
-        let width=Math.abs(x2-x1);
-        let height=Math.abs(y2-y1);
-        //this.element.style.transform="scale("+Math.sign(x2-x1)+","+(-Math.sign(y2-y1))+")";
-        this.setAttr("viewBox",[x1,y1,width,height].join(" "));
-        //console.log({width:width,height:height})
-        return this;
-    
+  class ZikoSvgLink extends ZikoSvgElement{
+      constructor(href,...svgElement){
+        super();
+        this.items=[];
+        this.element=document.createElementNS(
+          "http://www.w3.org/2000/svg",
+          "a",
+        );
+        this.element.setAttribute("href",href);
+        this.add(...svgElement);
       }
       add(...svgElement){
         for(let i=0;i<svgElement.length;i++){
           this.element.appendChild(svgElement[i].element);
           this.items.push(svgElement[i]);
         }
-        this.maintain();
-        return this;
+        if(svgElement.length===1)return svgElement[0]
+        return svgElement;
       }
       remove(...svgElement){
         for(let i=0;i<svgElement.length;i++){
           this.element.removeChild(svgElement[i].element);
-          this.items=this.items.filter(n=>!svgElement);
+          this.items=this.items.filter(n=>n!=svgElement);
         }
-        this.maintain();
         return this;     
       }
-      // text(text,x,y){
-      //   let item=svgText(text,x,y);
-      //   this.element.appendChild(item.element);
-      //   item.x(x-item.element.getComputedTextLength()/2);
-      //   return item;
-      // }
-      // rect(x,y,w,h){
-      //   let item=svgRect(x,y,w,h);
-      //   this.add(item);
-      //   return item;
-      // }
-      // line(x1,y1,x2,y2){
-      //   let item=svgLine(x1,y1,x2,y2);
-      //   this.element.appendChild(item.element);
-      //   return item;
-      // }
-      // circle(cx,cy,r){
-      //   let item=svgCircle(cx,cy,r);
-      //   this.element.appendChild(item.element);
-      //   return item;
-      // }
-      // ellipse(cx,cy,rx,ry){
-      //   let item=svgEllipse(cx,cy,rx,ry);
-      //   this.element.appendChild(item.element);
-      //   return item;
-      // }
-      // polygon(X,Y){
-      //   let item=svgPolygon(X,Y);
-      //   this.element.appendChild(item.element);
-      //   item.addPoints(X,Y)
-      //   return item;
-      // }
-      // image(src,w,h,x,y){
-      //   let item=svgImage(src,w,h,x,y);
-      //   this.element.appendChild(item.element);
-      //   return item;
-      // }
-      mask(){
-    
-      }
-      toString(){
-        return  (new XMLSerializer()).serializeToString(this.element);
-      }
-      btoa(){
-        return btoa(this.toString())
-      }
-      toImg(){
-        return 'data:image/svg+xml;base64,'+this.btoa()
-      }
-      toImg2(){
-        return "data:image/svg+xml;charset=utf8,"+this.toString().replaceAll("<","%3C").replaceAll(">","%3E").replaceAll("#","%23").replaceAll('"',"'");
-      }
-    }
-
-    const Svg =(w,h)=>new ZikoUISvg(w,h);
+  }
+  const svgLink=(href,...svgElement)=>new ZikoSvgLink(href,...svgElement);
+
+  const svgGrid=(w,h,r=10,c=10)=>{
+      let path=svgPath().fill("none").stroke("coral").strokeWidth(0.6);
+      console.log({x:w/r,y:h/c});
+      for(let i=0;i<w;i++) path.moveTo(0,i*w/r).hr(w);
+      for(let j=0;j<h;j++) path.moveTo(j*h/c,0).vr(h);
+      return path
+  };
 
   class ZikoUICanvas extends ZikoUIElement{
       constructor(w,h){
@@ -9824,6 +10401,10 @@
       svgRect,
       svgText,
       svgGroupe,
+      svgLink,
+      svgGrid,
+      svgObject,
+      svgPath,
       Canvas, 
       canvasArc,
       canvasCircle,
@@ -9919,7 +10500,10 @@
   const __Config__={
       default:{
           target:null,
-          render:true
+          render:true,
+          math:{
+              mode:"deg"
+          }
       },
       setDefault:function(pairs){
           const keys=Object.keys(pairs);
@@ -10041,7 +10625,7 @@
 
       }
       onHashChange(...callbacks){
-          if(!this.events.hash)this.events.hash = HashEvent(this);
+          if(!this.events.hash)this.events.hash = useHashEvent(this);
           this.events.hash.onChange(...callbacks);
           return this;
         }
@@ -10054,8 +10638,7 @@
       UI: UI$1,
       Time,
       Graphics,
-      Events,
-      Use,
+      Reactivity,
       Data,
       SPA,
   };
@@ -10078,8 +10661,7 @@
       UI$1.ExtractAll();
       Math$1.ExtractAll();
       Time.ExtractAll();
-      Events.ExtractAll();
-      Use.ExtractAll();
+      Reactivity.ExtractAll();
       Graphics.ExtractAll();
       Data.ExtractAll();
       return this;
@@ -10088,8 +10670,7 @@
       UI$1.RemoveAll();
       Math$1.RemoveAll();
       Time.RemoveAll();
-      Events.RemoveAll();
-      Use.RemoveAll();
+      Reactivity.RemoveAll();
       Graphics.RemoveAll();
       Data.RemoveAll();
   }
@@ -10110,7 +10691,6 @@
   exports.E = E;
   exports.EPSILON = EPSILON;
   exports.Ease = Ease;
-  exports.Events = Events;
   exports.ExtractAll = ExtractAll;
   exports.Fixed = Fixed;
   exports.Flex = Flex;
@@ -10128,10 +10708,12 @@
   exports.PI = PI;
   exports.Permutation = Permutation;
   exports.Random = Random;
+  exports.Reactivity = Reactivity;
   exports.RemoveAll = RemoveAll;
   exports.SPA = SPA;
   exports.Section = Section$1;
   exports.Signal = Signal;
+  exports.Str = Str;
   exports.Svg = Svg;
   exports.Table = Table;
   exports.Tabs = Tabs;
@@ -10195,6 +10777,8 @@
   exports.cosh = cosh;
   exports.cot = cot;
   exports.coth = coth;
+  exports.count = count;
+  exports.countWords = countWords;
   exports.csc = csc;
   exports.csv2arr = csv2arr;
   exports.csv2json = csv2json;
@@ -10273,6 +10857,7 @@
   exports.qrDecomposition = qrDecomposition;
   exports.rad2deg = rad2deg;
   exports.radio = radio;
+  exports.removeExtraSpace = removeExtraSpace;
   exports.round = round;
   exports.search = search;
   exports.sec = sec;
@@ -10285,6 +10870,7 @@
   exports.slider = slider;
   exports.sqrt = sqrt;
   exports.sqrtn = sqrtn;
+  exports.str = str;
   exports.sub = sub;
   exports.subSet = subSet;
   exports.sum = sum;
@@ -10294,9 +10880,14 @@
   exports.svg2str = svg2str;
   exports.svgCircle = svgCircle;
   exports.svgEllipse = svgEllipse;
+  exports.svgGrid = svgGrid;
   exports.svgGroupe = svgGroupe;
   exports.svgImage = svgImage;
   exports.svgLine = svgLine;
+  exports.svgLink = svgLink;
+  exports.svgObject = svgObject;
+  exports.svgPath = svgPath;
+  exports.svgPolyLine = svgPolyLine;
   exports.svgPolygon = svgPolygon;
   exports.svgRect = svgRect;
   exports.svgText = svgText;
@@ -10307,12 +10898,44 @@
   exports.timeTaken = timeTaken;
   exports.time_memory_Taken = time_memory_Taken;
   exports.ul = ul;
+  exports.useBattery = useBattery;
+  exports.useBluetooth = useBluetooth;
+  exports.useChannel = useChannel;
+  exports.useClickEvent = useClickEventnt;
+  exports.useClipboardEvent = useClipboardEvent;
+  exports.useCustomEvent = useCustomEvent;
   exports.useDebounce = useDebounce;
+  exports.useDragEvent = useDragEvent;
+  exports.useDropEvent = useDropEvent;
+  exports.useEventEmitter = useEventEmitter;
+  exports.useFavIcon = useFavIcon;
+  exports.useFocusEvent = useFocusEvent;
+  exports.useGeolocation = useGeolocation;
+  exports.useHashEvent = useHashEvent;
+  exports.useInputEvent = useInputEvent;
+  exports.useKeyEvent = useKeyEvenent;
+  exports.useLocaleStorage = useLocaleStorage;
+  exports.useMediaQuery = useMediaQuery;
+  exports.useMouseEvent = useMouseEvent;
+  exports.usePointerEvent = usePointerEvent;
+  exports.useSessionStorage = useSessionStorage;
+  exports.useStyle = useStyle;
+  exports.useSuccesifKeys = useSuccesifKeys;
+  exports.useTheme = useTheme;
+  exports.useThread = useThread;
   exports.useThrottle = useThrottle;
+  exports.useTitle = useTitle;
+  exports.useWheelEvent = useWheelEventnent;
   exports.video = video;
   exports.wait = wait;
   exports.waitForUIElm = waitForUIElm;
   exports.waitForUIElmSync = waitForUIElmSync;
+  exports.watch = watch;
+  exports.watchAttr = watchAttr;
+  exports.watchChildren = watchChildren;
+  exports.watchIntersection = watchIntersection;
+  exports.watchScreen = watchScreen;
+  exports.watchSize = watchSize;
   exports.zeros = zeros;
 
   Object.defineProperty(exports, '__esModule', { value: true });