ziko 0.0.7 → 0.0.9

package/dist/ziko.cjs

@@ -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
@@ -3240,7 +3240,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){
@@ -3469,7 +3469,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);
@@ -3512,7 +3512,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(
@@ -3609,7 +3609,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);
@@ -3744,8 +3744,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);
@@ -3800,7 +3800,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);
@@ -3883,7 +3883,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);
@@ -3938,7 +3938,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);
@@ -3996,7 +3996,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);
@@ -4039,7 +4039,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);
@@ -4091,21 +4091,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++) {
@@ -4166,7 +4166,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){
@@ -4213,601 +4310,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",
@@ -5586,606 +6185,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{
@@ -6272,6 +6517,7 @@ const useSuccesifKeys=(self,keys=[],callback=()=>{})=>{
 const Use={
     useStyle,
     useTheme,
+    useMediaQuery,
     useBattery,
     useGeolocation,
     useEventEmitter,
@@ -6307,6 +6553,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;
@@ -6529,15 +6791,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;
   }
@@ -6568,7 +6833,7 @@ class ZikoUIElement {
         return this;*/
   }
   setId(id) {
-    this.element.setAttribute("id", id);
+    this.setAttr("id", id);
     return this;
   }
   get id() {
@@ -6618,173 +6883,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;
   }
@@ -7190,20 +7457,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;
   }
@@ -7266,7 +7533,7 @@ class ZikoUIInput extends ZikoUIElement {
 }
 class ZikoUIInputSearch extends ZikoUIInput {
   constructor() {
-    super();
+    super("inputSearch");
     this._setType("search");
     this.Length = 0;
   }
@@ -7303,7 +7570,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);
   }
@@ -7325,14 +7592,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));
@@ -7340,37 +7607,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");
   }
@@ -7388,7 +7655,7 @@ class ZikoUIInputCheckbox extends ZikoUIInput {
 }
 class ZikoUIInputRadio extends ZikoUIInput {
   constructor() {
-    super();
+    super("inputRadio");
     this._setType("radio");
     this.cursor("pointer");
   }
@@ -7408,7 +7675,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");
@@ -8927,69 +9194,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);
@@ -9058,32 +9617,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;
     }  
   } 
@@ -9091,26 +9642,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;
     } 
@@ -9145,6 +9688,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();
@@ -9155,6 +9759,7 @@ class ZikoSvgPolygon extends ZikoSvgElement{
         "polygon",
       );
       this.element.setAttribute("points","");
+      this.addPoints(X,Y);
     }
     addPoint(x,y){
       let p=this.element.parentElement.createSVGPoint();
@@ -9175,6 +9780,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();
@@ -9207,30 +9837,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){
@@ -9253,108 +9889,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){
@@ -9822,6 +10399,10 @@ const Graphics={
     svgRect,
     svgText,
     svgGroupe,
+    svgLink,
+    svgGrid,
+    svgObject,
+    svgPath,
     Canvas, 
     canvasArc,
     canvasCircle,
@@ -9917,7 +10498,10 @@ const __UI__={};
 const __Config__={
     default:{
         target:null,
-        render:true
+        render:true,
+        math:{
+            mode:"deg"
+        }
     },
     setDefault:function(pairs){
         const keys=Object.keys(pairs);
@@ -10039,7 +10623,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;
       }
@@ -10052,8 +10636,7 @@ const Ziko={
     UI: UI$1,
     Time,
     Graphics,
-    Events,
-    Use,
+    Reactivity,
     Data,
     SPA,
 };
@@ -10076,8 +10659,7 @@ function ExtractAll(){
     UI$1.ExtractAll();
     Math$1.ExtractAll();
     Time.ExtractAll();
-    Events.ExtractAll();
-    Use.ExtractAll();
+    Reactivity.ExtractAll();
     Graphics.ExtractAll();
     Data.ExtractAll();
     return this;
@@ -10086,8 +10668,7 @@ function RemoveAll(){
     UI$1.RemoveAll();
     Math$1.RemoveAll();
     Time.RemoveAll();
-    Events.RemoveAll();
-    Use.RemoveAll();
+    Reactivity.RemoveAll();
     Graphics.RemoveAll();
     Data.RemoveAll();
 }
@@ -10108,7 +10689,6 @@ exports.Data = Data;
 exports.E = E;
 exports.EPSILON = EPSILON;
 exports.Ease = Ease;
-exports.Events = Events;
 exports.ExtractAll = ExtractAll;
 exports.Fixed = Fixed;
 exports.Flex = Flex;
@@ -10126,10 +10706,12 @@ exports.Nav = Nav;
 exports.PI = PI;
 exports.Permutation = Permutation;
 exports.Random = Random;
+exports.Reactivity = Reactivity;
 exports.RemoveAll = RemoveAll;
 exports.SPA = SPA;
 exports.Section = Section$1;
 exports.Signal = Signal;
+exports.Str = Str;
 exports.Svg = Svg;
 exports.Table = Table;
 exports.Tabs = Tabs;
@@ -10193,6 +10775,8 @@ exports.cos = cos;
 exports.cosh = cosh;
 exports.cot = cot;
 exports.coth = coth;
+exports.count = count;
+exports.countWords = countWords;
 exports.csc = csc;
 exports.csv2arr = csv2arr;
 exports.csv2json = csv2json;
@@ -10271,6 +10855,7 @@ exports.prod = prod;
 exports.qrDecomposition = qrDecomposition;
 exports.rad2deg = rad2deg;
 exports.radio = radio;
+exports.removeExtraSpace = removeExtraSpace;
 exports.round = round;
 exports.search = search;
 exports.sec = sec;
@@ -10283,6 +10868,7 @@ exports.sinh = sinh;
 exports.slider = slider;
 exports.sqrt = sqrt;
 exports.sqrtn = sqrtn;
+exports.str = str;
 exports.sub = sub;
 exports.subSet = subSet;
 exports.sum = sum;
@@ -10292,9 +10878,14 @@ exports.svg2imgUrl = svg2imgUrl;
 exports.svg2str = svg2str;
 exports.svgCircle = svgCircle;
 exports.svgEllipse = svgEllipse;
+exports.svgGrid = svgGrid;
 exports.svgGroupe = svgGroupe;
 exports.svgImage = svgImage;
 exports.svgLine = svgLine;
+exports.svgLink = svgLink;
+exports.svgObject = svgObject;
+exports.svgPath = svgPath;
+exports.svgPolyLine = svgPolyLine;
 exports.svgPolygon = svgPolygon;
 exports.svgRect = svgRect;
 exports.svgText = svgText;
@@ -10305,10 +10896,42 @@ exports.textarea = textarea;
 exports.timeTaken = timeTaken;
 exports.time_memory_Taken = time_memory_Taken;
 exports.ul = ul;
+exports.useBattery = useBattery;
+exports.useBluetooth = useBluetooth;
+exports.useChannel = useChannel;
+exports.useClickEvent = useClickEventnt;
+exports.useClipboardEvent = useClipboardEvent;
+exports.useCustomEvent = useCustomEvent;
 exports.useDebounce = useDebounce;
+exports.useDragEvent = useDragEvent;
+exports.useDropEvent = useDropEvent;
+exports.useEventEmitter = useEventEmitter;
+exports.useFavIcon = useFavIcon;
+exports.useFocusEvent = useFocusEvent;
+exports.useGeolocation = useGeolocation;
+exports.useHashEvent = useHashEvent;
+exports.useInputEvent = useInputEvent;
+exports.useKeyEvent = useKeyEvenent;
+exports.useLocaleStorage = useLocaleStorage;
+exports.useMediaQuery = useMediaQuery;
+exports.useMouseEvent = useMouseEvent;
+exports.usePointerEvent = usePointerEvent;
+exports.useSessionStorage = useSessionStorage;
+exports.useStyle = useStyle;
+exports.useSuccesifKeys = useSuccesifKeys;
+exports.useTheme = useTheme;
+exports.useThread = useThread;
 exports.useThrottle = useThrottle;
+exports.useTitle = useTitle;
+exports.useWheelEvent = useWheelEventnent;
 exports.video = video;
 exports.wait = wait;
 exports.waitForUIElm = waitForUIElm;
 exports.waitForUIElmSync = waitForUIElmSync;
+exports.watch = watch;
+exports.watchAttr = watchAttr;
+exports.watchChildren = watchChildren;
+exports.watchIntersection = watchIntersection;
+exports.watchScreen = watchScreen;
+exports.watchSize = watchSize;
 exports.zeros = zeros;