ziko 0.0.7 → 0.0.9

package/dist/ziko.mjs

@@ -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
@@ -3236,7 +3236,7 @@ class ZikoEventPointer extends ZikoEvent{
     //     if(up)this.handleUp()
     // }
 }
-var Pointer=target=>new ZikoEventPointer(target);
+var usePointerEvent=target=>new ZikoEventPointer(target);
 
 class ZikoEventMouse extends ZikoEvent{
     constructor(target){
@@ -3465,7 +3465,7 @@ function mouseover_controller(e){
         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);
@@ -3508,7 +3508,7 @@ class ZikoEventWheel extends ZikoEvent{
         return this;
      }    
 }
-const Wheel=Target=>new ZikoEventWheel(Target);
+const useWheelEventnent=Target=>new ZikoEventWheel(Target);
 
 function keydown_controller(e){
     EVENT_CONTROLLER.call(
@@ -3605,7 +3605,7 @@ class ZikoEventKey extends ZikoEvent{
 
 }
 
-var Key=Target=>new ZikoEventKey(Target);
+var useKeyEvenent=Target=>new ZikoEventKey(Target);
 
 function dragstart_controller(e){
     EVENT_CONTROLLER(this,e,"start",null);
@@ -3740,8 +3740,8 @@ class ZikoEventDrop extends ZikoEvent{
         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);
@@ -3796,7 +3796,7 @@ class ZikoEventClick extends ZikoEvent{
         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);
@@ -3879,7 +3879,7 @@ class ZikoEventClipboard extends ZikoEvent{
         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);
@@ -3934,7 +3934,7 @@ class ZikoEventFocus extends ZikoEvent{
         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);
@@ -3992,7 +3992,7 @@ class ZikoEventInput extends ZikoEvent{
         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);
@@ -4035,7 +4035,7 @@ class ZikoEventHash extends ZikoEvent{
         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);
@@ -4087,21 +4087,21 @@ class ZikoCustomEvent extends ZikoEvent{
         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++) {
@@ -4162,7 +4162,104 @@ class ZikoIntersectionObserver{
     }
 }
 
-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){
@@ -4209,601 +4306,1103 @@ class ZikoResizeObserver{
     }
 }
 
-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",
@@ -5582,606 +6181,252 @@ class ZikoUseFavIcon{
         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{
@@ -6268,6 +6513,7 @@ const useSuccesifKeys=(self,keys=[],callback=()=>{})=>{
 const Use={
     useStyle,
     useTheme,
+    useMediaQuery,
     useBattery,
     useGeolocation,
     useEventEmitter,
@@ -6303,6 +6549,22 @@ const Use={
     }
 };
 
+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;
@@ -6525,15 +6787,18 @@ class ZikoUIElement {
       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;
   }
@@ -6564,7 +6829,7 @@ class ZikoUIElement {
         return this;*/
   }
   setId(id) {
-    this.element.setAttribute("id", id);
+    this.setAttr("id", id);
     return this;
   }
   get id() {
@@ -6614,173 +6879,175 @@ class ZikoUIElement {
     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;
   }
@@ -7186,20 +7453,20 @@ class ZikoUITextArea extends ZikoUIElement {
 //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;
   }
@@ -7262,7 +7529,7 @@ class ZikoUIInput extends ZikoUIElement {
 }
 class ZikoUIInputSearch extends ZikoUIInput {
   constructor() {
-    super();
+    super("inputSearch");
     this._setType("search");
     this.Length = 0;
   }
@@ -7299,7 +7566,7 @@ class ZikoUIInputSearch extends ZikoUIInput {
 }
 class ZikoUIInputNumber extends ZikoUIInput {
   constructor(min, max ,step = 1) {
-    super();
+    super("inpuNumber");
     this._setType("number");
     this.setMin(min).setMax(max).setStep(step);
   }
@@ -7321,14 +7588,14 @@ class ZikoUIInputNumber extends ZikoUIInput {
 }
 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));
@@ -7336,37 +7603,37 @@ class ZikoUIInputColor extends ZikoUIInput {
 }
 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");
   }
@@ -7384,7 +7651,7 @@ class ZikoUIInputCheckbox extends ZikoUIInput {
 }
 class ZikoUIInputRadio extends ZikoUIInput {
   constructor() {
-    super();
+    super("inputRadio");
     this._setType("radio");
     this.cursor("pointer");
   }
@@ -7404,7 +7671,7 @@ class ZikoUIInputRadio extends ZikoUIInput {
 
 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");
@@ -8923,69 +9190,361 @@ const preload=(url)=>{
     } 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);
@@ -9054,32 +9613,24 @@ class ZikoSvgRectangle extends ZikoSvgElement{
 
 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;
     }  
   } 
@@ -9087,26 +9638,18 @@ const svgCircle=(x,y,r)=>new ZikoSvgCircle(x,y,r);
 
 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;
     } 
@@ -9141,6 +9684,67 @@ class ZikoSvgLine extends ZikoSvgElement{
   } 
 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();
@@ -9151,6 +9755,7 @@ class ZikoSvgPolygon extends ZikoSvgElement{
         "polygon",
       );
       this.element.setAttribute("points","");
+      this.addPoints(X,Y);
     }
     addPoint(x,y){
       let p=this.element.parentElement.createSVGPoint();
@@ -9171,6 +9776,31 @@ class ZikoSvgPolygon extends ZikoSvgElement{
   } 
 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();
@@ -9203,30 +9833,36 @@ class ZikoSvgImage extends ZikoSvgElement{
   } 
 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){
@@ -9249,108 +9885,49 @@ class ZikoSvgGroupe extends ZikoSvgElement{
     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){
@@ -9818,6 +10395,10 @@ const Graphics={
     svgRect,
     svgText,
     svgGroupe,
+    svgLink,
+    svgGrid,
+    svgObject,
+    svgPath,
     Canvas, 
     canvasArc,
     canvasCircle,
@@ -9913,7 +10494,10 @@ const __UI__={};
 const __Config__={
     default:{
         target:null,
-        render:true
+        render:true,
+        math:{
+            mode:"deg"
+        }
     },
     setDefault:function(pairs){
         const keys=Object.keys(pairs);
@@ -10035,7 +10619,7 @@ class ZikoUIApp extends ZikoUIFlex{
 
     }
     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;
       }
@@ -10048,8 +10632,7 @@ const Ziko={
     UI: UI$1,
     Time,
     Graphics,
-    Events,
-    Use,
+    Reactivity,
     Data,
     SPA,
 };
@@ -10072,8 +10655,7 @@ function ExtractAll(){
     UI$1.ExtractAll();
     Math$1.ExtractAll();
     Time.ExtractAll();
-    Events.ExtractAll();
-    Use.ExtractAll();
+    Reactivity.ExtractAll();
     Graphics.ExtractAll();
     Data.ExtractAll();
     return this;
@@ -10082,10 +10664,9 @@ function RemoveAll(){
     UI$1.RemoveAll();
     Math$1.RemoveAll();
     Time.RemoveAll();
-    Events.RemoveAll();
-    Use.RemoveAll();
+    Reactivity.RemoveAll();
     Graphics.RemoveAll();
     Data.RemoveAll();
 }
 
-export { Accordion, App, Article, Aside, Base, Canvas, Carousel, CodeCell, CodeNote, Combinaison, Complex, DarkThemes, Data, E, EPSILON, Ease, Events, ExtractAll, Fixed, Flex, Footer, Graphics, Grid$1 as Grid, Header, LightThemes, LinearSystem, Logic$1 as Logic, Main, Math$1 as Math, Matrix, Nav, PI, Permutation, Random, RemoveAll, SPA, Section$1 as Section, Signal, Svg, Table, Tabs, Themes, Time, UI$1 as UI, Utils, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBr, ZikoUICanvas, ZikoUICodeNote, ZikoUIComponent, ZikoUIElement, ZikoUIFigure, ZikoUIFooter, ZikoUIHeader, ZikoUIHr, ZikoUIHtmlTag, ZikoUIImage, ZikoUILink, ZikoUIMain, ZikoUINav, ZikoUISection, ZikoUISvg, ZikoUIVideo, __Config__, abs, accum, acos, acosh, acot, add, adoc2html, animation, arange, asin, asinh, atan, atan2, atanh, audio, bessel, beta, br, brs, btn, canvasArc, canvasCircle, canvasLine, canvasPoints, canvasRect, cartesianProduct, ceil, checkbox, choleskyDecomposition, clamp, complex, cos, cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, datalist, Ziko as default, deg2rad, div, e, fact, figure, floor, gamma, geomspace, h1, h2, h3, h4, h5, h6, hr, hrs, html, hypot, image, inRange, input, inputCamera, inputColor, inputDate, inputDateTime, inputEmail, inputImage, inputNumber, inputPassword, inputTime, isApproximatlyEqual, json2arr, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, li, link, linspace, ln, logspace, loop, luDecomposition, map, mapfun$1 as mapfun, markdown2html, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, ol, ones, p, pgcd, pow, powerSet, ppcm, prod, qrDecomposition, rad2deg, radio, round, search, sec, select, sig, sign, sin, sinc, sinh, slider, sqrt, sqrtn, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, svgCircle, svgEllipse, svgGroupe, svgImage, svgLine, svgPolygon, svgRect, svgText, tan, tanh, text$1 as text, textarea, timeTaken, time_memory_Taken, ul, useDebounce, useThrottle, video, wait, waitForUIElm, waitForUIElmSync, zeros };
+export { Accordion, App, Article, Aside, Base, Canvas, Carousel, CodeCell, CodeNote, Combinaison, Complex, DarkThemes, Data, E, EPSILON, Ease, ExtractAll, Fixed, Flex, Footer, Graphics, Grid$1 as Grid, Header, LightThemes, LinearSystem, Logic$1 as Logic, Main, Math$1 as Math, Matrix, Nav, PI, Permutation, Random, Reactivity, RemoveAll, SPA, Section$1 as Section, Signal, Str, Svg, Table, Tabs, Themes, Time, UI$1 as UI, Utils, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBr, ZikoUICanvas, ZikoUICodeNote, ZikoUIComponent, ZikoUIElement, ZikoUIFigure, ZikoUIFooter, ZikoUIHeader, ZikoUIHr, ZikoUIHtmlTag, ZikoUIImage, ZikoUILink, ZikoUIMain, ZikoUINav, ZikoUISection, ZikoUISvg, ZikoUIVideo, __Config__, abs, accum, acos, acosh, acot, add, adoc2html, animation, arange, asin, asinh, atan, atan2, atanh, audio, bessel, beta, br, brs, btn, canvasArc, canvasCircle, canvasLine, canvasPoints, canvasRect, cartesianProduct, ceil, checkbox, choleskyDecomposition, clamp, complex, cos, cosh, cot, coth, count, countWords, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, datalist, Ziko as default, deg2rad, div, e, fact, figure, floor, gamma, geomspace, h1, h2, h3, h4, h5, h6, hr, hrs, html, hypot, image, inRange, input, inputCamera, inputColor, inputDate, inputDateTime, inputEmail, inputImage, inputNumber, inputPassword, inputTime, isApproximatlyEqual, json2arr, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, li, link, linspace, ln, logspace, loop, luDecomposition, map, mapfun$1 as mapfun, markdown2html, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, ol, ones, p, pgcd, pow, powerSet, ppcm, prod, qrDecomposition, rad2deg, radio, removeExtraSpace, round, search, sec, select, sig, sign, sin, sinc, sinh, slider, sqrt, sqrtn, str, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, svgCircle, svgEllipse, svgGrid, svgGroupe, svgImage, svgLine, svgLink, svgObject, svgPath, svgPolyLine, svgPolygon, svgRect, svgText, tan, tanh, text$1 as text, textarea, timeTaken, time_memory_Taken, ul, useBattery, useBluetooth, useChannel, useClickEventnt as useClickEvent, useClipboardEvent, useCustomEvent, useDebounce, useDragEvent, useDropEvent, useEventEmitter, useFavIcon, useFocusEvent, useGeolocation, useHashEvent, useInputEvent, useKeyEvenent as useKeyEvent, useLocaleStorage, useMediaQuery, useMouseEvent, usePointerEvent, useSessionStorage, useStyle, useSuccesifKeys, useTheme, useThread, useThrottle, useTitle, useWheelEventnent as useWheelEvent, video, wait, waitForUIElm, waitForUIElmSync, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };