ziko 0.36.2 → 0.38.0

package/dist/ziko.mjs

@@ -2,96 +2,15 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Thu Aug 14 2025 10:09:49 GMT+0100 (UTC+01:00)
+  Date : Fri Aug 15 2025 21:37:17 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
 */
 
-function composeClass(Class, mixin) {
-  const descriptors = Object.getOwnPropertyDescriptors(mixin);
-
-  class Composed extends Class {
-    constructor(...args) {
-      super(...args);
-      for (const key of Reflect.ownKeys(descriptors)) {
-        const desc = descriptors[key];
-
-        if (typeof desc.value === 'function') {
-          this[key] = desc.value.bind(this);
-        }
-      }
-    }
-  }
-
-  for (const key of Reflect.ownKeys(descriptors)) {
-    const desc = descriptors[key];
-
-    if ('get' in desc || 'set' in desc) {
-      Object.defineProperty(Composed.prototype, key, desc);
-    } else if (typeof desc.value !== 'function') {
-      Object.defineProperty(Composed.prototype, key, desc);
-    }
-  }
-
-  return Composed;
-}
-
-function composeInstance(instance, mixin) {
-  const descriptors = Object.getOwnPropertyDescriptors(mixin);
-
-  for (const key of Reflect.ownKeys(descriptors)) {
-    const desc = descriptors[key];
-
-    if ('get' in desc || 'set' in desc) {
-      Object.defineProperty(instance, key, desc);
-    } else if (typeof desc.value === 'function') {
-      instance[key] = desc.value.bind(instance);
-    } else {
-      instance[key] = desc.value;
-    }
-  }
-}
-
-function compose(target, ...mixin) {
-  if (typeof target === 'function') {
-    return mixin.forEach(item =>composeClass(target, item));
-  } else if (typeof target === 'object') {
-    mixin.forEach(item =>composeInstance(target, item));
-  } else {
-    throw new TypeError("compose: target must be a class or instance");
-  }
-}
-
-const __ExtractAll__ =(obj)=> {
-    const keys = Object.keys(obj);
-    for (let i = 0; i < keys.length; i++) {
-        const key = keys[i];
-        if (!["__ExtractAll__","__RemoveAll__","ExtractAll","RemoveAll"].includes(key)) {
-            globalThis[key] = obj[key];
-        }
-    }
-};
-const __RemoveAll__ =(obj)=> {
-    const keys = Object.keys(obj);
-    for (let i = 0; i < keys.length; i++) {
-        const key = keys[i];
-        if (key !== '__RemoveAll__') {
-            delete globalThis[key];
-        }
-    }
-};
-
 const { PI: PI$1, E } = Math;
 const EPSILON=Number.EPSILON;
 
-var __Const__ = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  E: E,
-  EPSILON: EPSILON,
-  PI: PI$1
-});
-
 const {PI, cos: cos$1, sin: sin$1, tan: tan$1, acos: acos$1, asin: asin$1, atan: atan$1, cosh: cosh$1, sinh: sinh$1, tanh: tanh$1, acosh: acosh$1, asinh: asinh$1, atanh: atanh$1, log} = Math;
 let Fixed={
     cos: cos$1,
@@ -125,35 +44,30 @@ Fixed = new Proxy(Fixed, {
 
 class ZikoMath {}
 
-/** @module Math */
- /**
- * map a function to ...X
- * @param {function} fun
- * @param {...any} X
- * @returns {any|any[]}
- */
+// To generalise
+
 const mapfun$1=(fun,...X)=>{
     const Y=X.map(x=>{
-        if(x===null)return fun(null);
-        if(["number","string","boolean","bigint","undefined"].includes(typeof x))return fun(x);
-        if(x instanceof Array)return x.map(n=>mapfun$1(fun,n));
-        if(ArrayBuffer.isView(x))return x.map(n=>fun(n));
-        if(x instanceof Set)return new Set(mapfun$1(fun,...[...x]));
-        if(x instanceof Map)return new Map([...x].map(n=>[n[0],mapfun$1(fun,n[1])]));
+        if(x===null) return fun(null);
+        if(["number","string","boolean","bigint","undefined"].includes(typeof x)) return fun(x);
+        if(x instanceof Array) return x.map(n=>mapfun$1(fun,n));
+        if(ArrayBuffer.isView(x)) return x.map(n=>fun(n));
+        if(x instanceof Set) return new Set(mapfun$1(fun,...[...x]));
+        if(x instanceof Map) return new Map([...x].map(n=>[n[0],mapfun$1(fun,n[1])]));
         if(x instanceof Matrix){
-            return new Matrix(x.rows,x.cols,mapfun$1(x.arr.flat(1)))
+            return new Matrix(x.rows,x.cols, mapfun$1(x.arr.flat(1)))
         }
         if(x instanceof Complex){
             const [a,b,z,phi]=[x.a,x.b,x.z,x.phi];
             switch(fun){
-                case Math.log:return complex(ln(z),phi); // Done
-                case Math.exp:return complex(e(a)*cos(b),e(a)*sin(b)); // Done
-                case Math.abs:return z; // Done
-                case Math.sqrt:return complex(sqrt(z)*cos(phi/2),sqrt(z)*sin(phi/2)); // Done
-                case Fixed.cos:return complex(cos(a)*cosh(b),-(sin(a)*sinh(b)));
-                case Fixed.sin:return complex(sin(a)*cosh(b),cos(a)*sinh(b));
+                case Math.log: return complex(ln(z),phi); // Done
+                case Math.exp: return complex(e(a)*cos(b),e(a)*sin(b)); // Done
+                case Math.abs: return z; // Done
+                case Math.sqrt: return complex(sqrt(z)*cos(phi/2),sqrt(z)*sin(phi/2)); // Done
+                case Fixed.cos: return complex(cos(a)*cosh(b),-(sin(a)*sinh(b)));
+                case Fixed.sin: return complex(sin(a)*cosh(b),cos(a)*sinh(b));
                 case Fixed.tan:{
-                    const DEN=cos(2*a)+cosh(2*b);
+                    const DEN = cos(2*a)+cosh(2*b);
                     return complex(sin(2*a)/DEN,sinh(2*b)/DEN);
                 }
                 case Fixed.cosh:return complex(cosh(a)*cos(b),sinh(a)*sin(b));
@@ -166,7 +80,7 @@ const mapfun$1=(fun,...X)=>{
             }
         }
         else if(x instanceof Object){
-            return fun(Object) || Object.fromEntries(Object.entries(x).map(n=>n=[n[0],mapfun$1(fun,n[1])]))
+            return Object.fromEntries(Object.entries(x).map(n=>n=[n[0],mapfun$1(fun,n[1])]))
         }
     });
    return Y.length==1?Y[0]:Y; 
@@ -606,7 +520,7 @@ const ppcm = (n1, n2) => {
     } else console.log("error");
 };
 
-const Utils$1={
+const Utils={
     add,
     sub,
     mul,
@@ -640,37 +554,6 @@ const Utils$1={
     isApproximatlyEqual
 };
 
-var __Utils__ = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Utils: Utils$1,
-  add: add,
-  arange: arange,
-  cartesianProduct: cartesianProduct,
-  clamp: clamp,
-  deg2rad: deg2rad,
-  div: div,
-  geomspace: geomspace,
-  inRange: inRange,
-  isApproximatlyEqual: isApproximatlyEqual,
-  lerp: lerp,
-  linspace: linspace,
-  logspace: logspace,
-  map: map,
-  mapfun: mapfun$1,
-  modulo: modulo,
-  mul: mul,
-  norm: norm,
-  nums: nums,
-  ones: ones,
-  pgcd: pgcd,
-  ppcm: ppcm,
-  prod: prod,
-  rad2deg: rad2deg,
-  sub: sub,
-  sum: sum,
-  zeros: zeros
-});
-
 const powerSet=originalSet=>{
     const subSets = [];
     const NUMBER_OF_COMBINATIONS = 2 ** originalSet.length;
@@ -883,17 +766,6 @@ class Combinaison {
 }
 const combinaison=(comboOptions, comboLength, discount=false)=>Combinaison[discount?"withDiscount":"withoutDiscount"](comboOptions, comboLength);
 
-var __Discrect__ = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Base: Base,
-  Combinaison: Combinaison,
-  Logic: Logic$1,
-  Permutation: Permutation,
-  combinaison: combinaison,
-  powerSet: powerSet,
-  subSet: subSet
-});
-
 class Random {
     static float(a = 1, b) {
         return b ? Math.random() * (b - a) + a : a * Math.random();
@@ -928,7 +800,7 @@ class Random {
     }
     static choice(choices = [1, 2, 3], p = new Array(choices.length).fill(1 / choices.length)) {
         let newchoice = new Array(100);
-        p=Utils$1.accum(...p).map(n=>n*100);
+        p=Utils.accum(...p).map(n=>n*100);
         newchoice.fill(choices[0], 0, p[0]);
         for (let i = 1; i < choices.length; i++) newchoice.fill(choices[i], p[i - 1], p[i]);
         return newchoice[this.int(newchoice.length - 1)];
@@ -1062,11 +934,6 @@ class Random {
     }
 }
 
-var __Random__ = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Random: Random
-});
-
 const preload=(url)=>{
     const xhr = new XMLHttpRequest();
     xhr.open("GET", url, false); 
@@ -1093,11 +960,6 @@ function fetchdomSync(url='https://github.com/zakarialaoui10'){
 globalThis.fetchdom=fetchdom;
 globalThis.fetchdomSync=fetchdomSync;
 
-var Api = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  preload: preload
-});
-
 const csv2arr = (csv, delimiter = ",")=>csv.trim().trimEnd().split("\n").map(n=>n.split(delimiter));
 const csv2matrix = (csv, delimiter = ",")=>new Matrix(csv2arr(csv,delimiter));
 const csv2object = (csv, delimiter = ",") => {
@@ -1212,6 +1074,72 @@ class ZikoUINode {
 
 globalThis.node = (node) => new ZikoUINode(node);
 
+function composeClass(Class, mixin) {
+  const descriptors = Object.getOwnPropertyDescriptors(mixin);
+
+  class Composed extends Class {
+    constructor(...args) {
+      super(...args);
+      for (const key of Reflect.ownKeys(descriptors)) {
+        const desc = descriptors[key];
+
+        if (typeof desc.value === 'function') {
+          this[key] = desc.value.bind(this);
+        }
+      }
+    }
+  }
+
+  for (const key of Reflect.ownKeys(descriptors)) {
+    const desc = descriptors[key];
+
+    if ('get' in desc || 'set' in desc) {
+      Object.defineProperty(Composed.prototype, key, desc);
+    } else if (typeof desc.value !== 'function') {
+      Object.defineProperty(Composed.prototype, key, desc);
+    }
+  }
+
+  return Composed;
+}
+
+function composeInstance(instance, mixin) {
+  const descriptors = Object.getOwnPropertyDescriptors(mixin);
+
+  for (const key of Reflect.ownKeys(descriptors)) {
+    const desc = descriptors[key];
+
+    if ('get' in desc || 'set' in desc) {
+      Object.defineProperty(instance, key, desc);
+    } else if (typeof desc.value === 'function') {
+      instance[key] = desc.value.bind(instance);
+    } else {
+      instance[key] = desc.value;
+    }
+  }
+}
+
+function compose(target, ...mixin) {
+  if (typeof target === 'function') {
+    return mixin.forEach(item =>composeClass(target, item));
+  } else if (typeof target === 'object') {
+    mixin.forEach(item =>composeInstance(target, item));
+  } else {
+    throw new TypeError("compose: target must be a class or instance");
+  }
+}
+
+class ZikoUIText extends ZikoUINode {
+    constructor(...value) {
+      super("span", "text", false, ...value);
+      this.element = globalThis?.document?.createTextNode(...value);
+    }
+    isText(){
+      return true
+    }
+}
+const text = (...str) => new ZikoUIText(...str);
+
 const DomMethods = {
   append(...ele) {
     __addItem__.call(this, "append", "push", ...ele);
@@ -1288,17 +1216,26 @@ function __addItem__(adder, pusher, ...ele) {
   }
   for (let i = 0; i < ele.length; i++) {
     if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-    if (
-      typeof globalThis?.Node === "function" &&
-      ele[i] instanceof globalThis?.Node
-    )
-      ele[i] = new this.constructor(ele[i]);
-    if (ele[i]?.isZikoUIElement) {
-      ele[i].cache.parent = this;
-      this.element[adder](ele[i].element);
-      ele[i].target = this.element;
-      this.items[pusher](ele[i]);
-    } else if (ele[i] instanceof Object) {
+        // Fix Items Latter
+    if (ele[i] instanceof Function) {
+     const getter = ele[i]();
+      if (getter.isStateGetter) {
+        ele[i] = text(getter.value);
+        getter._subscribe(
+            (newValue) => (ele[i].element.textContent = newValue),
+            ele[i] 
+        );
+        // this.element.appendChild(textNode);
+      }
+    }
+    if (typeof globalThis?.Node === "function" && ele[i] instanceof globalThis?.Node) ele[i] = new this.constructor(ele[i]);
+    if (ele[i]?.isZikoUINode) {
+        ele[i].cache.parent = this;
+        this.element?.[adder](ele[i].element);
+        ele[i].target = this.element;
+        this.items[pusher](ele[i]);
+    } 
+    else if (ele[i] instanceof Object) {
       if (ele[i]?.style) this.style(ele[i]?.style);
       if (ele[i]?.attr) {
         Object.entries(ele[i].attr).forEach((n) =>
@@ -1327,7 +1264,7 @@ const IndexingMethods = {
   },
 };
 
-const Events$1 = {
+const Events = {
     'Click' : [
         'Click',
         'DblClick'
@@ -1548,7 +1485,7 @@ class __ZikoEvent__ {
 
 class ZikoEventClick extends __ZikoEvent__{
     constructor(target, customizer){
-        super(target, Events$1.Click, details_setter$a, customizer);
+        super(target, Events.Click, details_setter$a, customizer);
     }
 }
 function details_setter$a(){
@@ -1560,7 +1497,7 @@ const bindClickEvent = (target, customizer) => new ZikoEventClick(target, custom
 
 class ZikoEventClipboard extends __ZikoEvent__{
     constructor(target, customizer){
-        super(target, Events$1.Clipboard, details_setter$9, customizer);
+        super(target, Events.Clipboard, details_setter$9, customizer);
     }
 }
 function details_setter$9(){
@@ -1594,7 +1531,7 @@ const bindCustomEvent = (target, events, customizer) => new ZikoEventCustom(targ
 
 class ZikoEventDrag extends __ZikoEvent__{
     constructor(target, customizer){
-        super(target, Events$1.Drag, details_setter$7, customizer);
+        super(target, Events.Drag, details_setter$7, customizer);
     }
 }
 function details_setter$7(){
@@ -1604,7 +1541,7 @@ const bindDragEvent = (target, customizer) => new ZikoEventDrag(target, customiz
 
 class ZikoEventFocus extends __ZikoEvent__{
     constructor(target, customizer){
-        super(target, Events$1.Focus, details_setter$6, customizer);
+        super(target, Events.Focus, details_setter$6, customizer);
     }
 }
 function details_setter$6(){
@@ -1614,7 +1551,7 @@ const bindFocusEvent = (target, customizer) => new ZikoEventFocus(target, custom
 
 let ZikoEventHash$1 = class ZikoEventHash extends __ZikoEvent__{
     constructor(target, customizer){
-        super(target, Events$1.Hash, details_setter$5, customizer);
+        super(target, Events.Hash, details_setter$5, customizer);
     }
 };
 function details_setter$5(){
@@ -1624,7 +1561,7 @@ const bindHashEvent = (target, customizer) => new ZikoEventHash$1(target, custom
 
 class ZikoEventKey extends __ZikoEvent__{
     constructor(target, customizer){
-        super(target, Events$1.Key, details_setter$4, customizer);
+        super(target, Events.Key, details_setter$4, customizer);
     }
 }
 function details_setter$4(){
@@ -1645,7 +1582,7 @@ const bindKeyEvent = (target, customizer) => new ZikoEventKey(target, customizer
 
 class ZikoEventMouse extends __ZikoEvent__{
     constructor(target, customizer){
-        super(target, Events$1.Mouse, details_setter$3, customizer);
+        super(target, Events.Mouse, details_setter$3, customizer);
     }
 }
 function details_setter$3(){
@@ -1655,7 +1592,7 @@ const bindMouseEvent = (target, customizer) => new ZikoEventMouse(target, custom
 
 class ZikoEventPointer extends __ZikoEvent__{
     constructor(target, customizer){
-        super(target, Events$1.Ptr, details_setter$2, customizer);
+        super(target, Events.Ptr, details_setter$2, customizer);
         this.isDown = false;
     }
 }
@@ -1696,7 +1633,7 @@ const bindPointerEvent = (target, customizer) => new ZikoEventPointer(target, cu
 
 class ZikoEventTouch extends __ZikoEvent__{
     constructor(target, customizer){
-        super(target, Events$1.Touch, details_setter$1, customizer);
+        super(target, Events.Touch, details_setter$1, customizer);
     }
 }
 function details_setter$1(){
@@ -1706,7 +1643,7 @@ const bindTouchEvent = (target, customizer) => new ZikoEventTouch(target, custom
 
 class ZikoEventWheel extends __ZikoEvent__{
     constructor(target, customizer){
-        super(target, Events$1.Wheel, details_setter, customizer);
+        super(target, Events.Wheel, details_setter, customizer);
     }
 }
 function details_setter(){
@@ -1727,7 +1664,7 @@ const binderMap = {
 
 const EventsMethodes = {};
 
-Object.entries(Events$1).forEach(([name, eventList]) => {
+Object.entries(Events).forEach(([name, eventList]) => {
   eventList.forEach(event => {
     const methodName = `on${event}`;
     EventsMethodes[methodName] = function (...callbacks) {
@@ -2709,27 +2646,6 @@ e=>{
 })
 */
 
-// export * from "./click.js";
-// export * from "./pointer.js";
-// export * from "./mouse.js";
-// export * from "./wheel.js";
-// export * from "./key.js";
-// export * from "./drag.js";
-// export * from "./clipboard.js";
-// export * from "./focus.js";
-
-var Events = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  ZikoCustomEvent: ZikoCustomEvent,
-  ZikoEventHash: ZikoEventHash,
-  ZikoEventInput: ZikoEventInput,
-  ZikoEventSwipe: ZikoEventSwipe,
-  useCustomEvent: useCustomEvent,
-  useHashEvent: useHashEvent,
-  useInputEvent: useInputEvent,
-  useSwipeEvent: useSwipeEvent
-});
-
 class ZikoMutationObserver {
     constructor(targetUIElement, options) {
       this.target = targetUIElement;
@@ -3022,17 +2938,6 @@ class ZikoScreenObserver {
 
 const watchScreen=(callback)=>new ZikoScreenObserver(callback);
 
-var Observer = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  ZikoMutationObserver: ZikoMutationObserver,
-  watch: watch,
-  watchAttr: watchAttr,
-  watchChildren: watchChildren,
-  watchIntersection: watchIntersection,
-  watchScreen: watchScreen,
-  watchSize: watchSize
-});
-
 const useSuccesifKeys=(self,keys=[],callback=()=>{})=>{
     self.cache.stream.enabled.down=true;
     const length=keys.length;
@@ -3109,7 +3014,7 @@ class ZikoUseEventEmitter {
 
 const useEventEmitter=()=>new ZikoUseEventEmitter();
 
-let ZikoUseFavIcon$1 = class ZikoUseFavIcon{
+class ZikoUseFavIcon{
     constructor(FavIcon,useEventEmitter=true){
         this.#init();
         this.cache={
@@ -3143,10 +3048,10 @@ let ZikoUseFavIcon$1 = class ZikoUseFavIcon{
         return this;
     }
 
-};
-const useFavIcon$1=(FavIcon,useEventEmitter)=>new ZikoUseFavIcon$1(FavIcon,useEventEmitter);
+}
+const useFavIcon=(FavIcon,useEventEmitter)=>new ZikoUseFavIcon(FavIcon,useEventEmitter);
 
-let ZikoMeta$1 = class ZikoMeta{
+class ZikoMeta{
     constructor({viewport,charset,description,author,keywords}){
         this.document = globalThis?.document; 
         this.meta={};
@@ -3194,10 +3099,10 @@ let ZikoMeta$1 = class ZikoMeta{
         this.set("author",author);
         return this;
     }
-};
-const useMeta$1=({viewport,charset,description,author,keywords})=>new ZikoMeta$1({viewport,charset,description,author,keywords});
+}
+const useMeta=({viewport,charset,description,author,keywords})=>new ZikoMeta({viewport,charset,description,author,keywords});
 
-let ZikoUseTitle$1 = class ZikoUseTitle{
+class ZikoUseTitle{
     constructor(title=document.title,useEventEmitter=true){
         this.cache={
             Emitter:null
@@ -3223,19 +3128,19 @@ let ZikoUseTitle$1 = class ZikoUseTitle{
         if(this.cache.Emitter)this.cache.Emitter.on("ziko:title-changed",callback);
         return this;
     }
-};
-const useTitle$1=(title, useEventEmitter)=>new ZikoUseTitle$1(title, useEventEmitter);
+}
+const useTitle=(title, useEventEmitter)=>new ZikoUseTitle(title, useEventEmitter);
 
 // import {useLink} from "./";
-let ZikoHead$1 = class ZikoHead{
+class ZikoHead{
     constructor({title,lang,icon,meta,noscript}){
         this.html = globalThis?.document?.documentElement;
         this.head = globalThis?.document?.head;
 
-        title && useTitle$1(title);
+        title && useTitle(title);
         lang && this.setLang(lang);
-        icon && useFavIcon$1(icon);
-        meta && useMeta$1(meta);
+        icon && useFavIcon(icon);
+        meta && useMeta(meta);
         noscript && this.setNoScript();
     }
     setLang(lang){
@@ -3244,9 +3149,9 @@ let ZikoHead$1 = class ZikoHead{
     setNoScript(content){
 
     }
-};
+}
 
-const useHead$1=({ title, lang, icon, meta, noscript })=>new ZikoHead$1({ title, lang, icon, meta, noscript });
+const useHead=({ title, lang, icon, meta, noscript })=>new ZikoHead({ title, lang, icon, meta, noscript });
 
 /*
  [
@@ -3289,27 +3194,105 @@ class ZikoUseMediaQuery {
 
 const useMediaQuery = (mediaQueryRules,fallback) => new ZikoUseMediaQuery(mediaQueryRules,fallback);
 
-// export * from "./window"
+function parseQueryParams$1(queryString) {
+    const params = {};
+    queryString.replace(/[A-Z0-9]+?=([\w|:|\/\.]*)/gi, (match) => {
+        const [key, value] = match.split('=');
+        params[key] = value;
+    });
+    return params;
+}
+
+function defineParamsGetter$1(target ){
+    Object.defineProperties(target, {
+        'QueryParams': {
+            get: function() {
+                return parseQueryParams$1(globalThis.location.search.substring(1));
+            },
+            configurable: false,
+            enumerable: true 
+        },
+        'HashParams': {
+            get: function() {
+                const hash = globalThis.location.hash.substring(1);
+                return hash.split("#");
+            },
+            configurable: false,
+            enumerable: true 
+        }
+    });
+}
 
-var Hooks = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  ZikoHead: ZikoHead$1,
-  ZikoUseStyle: ZikoUseStyle,
-  useFavIcon: useFavIcon$1,
-  useHead: useHead$1,
-  useMediaQuery: useMediaQuery,
-  useMeta: useMeta$1,
-  useStyle: useStyle,
-  useSuccesifKeys: useSuccesifKeys,
-  useTitle: useTitle$1
-});
+const __UI__={
+    __all__(){
+        return Object.values(this)
+          .filter(Array.isArray)
+          .flat();
+    },
+    querySelectorAll(){
+        return this.__all__().filter(n=>n)
+    },
+    getElementByIndex(index){
+        return this.__all__().find(n=>n.ui_index===index);
+    },
+    getElementById(id){
+        return null;
+    },
+    getElementsByClass(){
+
+    },
+    getElementsByTagName(){
+        
+    }
+};
+
+const __Config__ = {
+    default:{
+        target:null,
+        render:true,
+        math:{
+            mode:"deg"
+        }
+    },
+    setDefault:function(pairs){
+        const keys=Object.keys(pairs);
+        const values=Object.values(pairs);
+        for(let i=0; i<keys.length; i++) this.default[keys[i]]=values[i];
+    },
+    init:()=>{
+        // document.documentElement.setAttribute("data-engine","zikojs")
+    },
+    renderingMode :"spa",
+    isSSC : false,
+};
+
+const __HYDRATION__ = {
+    map : new Map(),
+    index : 0,
+    increment : function(){
+        return this.index ++
+    }
+};
+const __HYDRATION_MAP__ = new Map();
 
-const Reactivity={
-    ...Events,
-    ...Observer,
-    ...Hooks,
+const __CACHE__ = {
+    ui_index : 0,
+    get_ui_index:function(){
+        return this.ui_index ++
+    }
 };
 
+if ( !globalThis?.__Ziko__ ){
+    globalThis.__Ziko__ = {
+                __UI__,
+                __HYDRATION__,
+                __HYDRATION_MAP__,
+                __Config__,
+                __CACHE__,
+            };
+    defineParamsGetter$1(__Ziko__);
+}
+
 class ZikoUIElement extends ZikoUINode{
   constructor(element, name="", {el_type="html", useDefaultStyle=false}={}){
     super();
@@ -3400,7 +3383,6 @@ class ZikoUIElement extends ZikoUINode{
   isInteractive(){
     return this.cache.isInteractive;
   }
-  // Remove get
   isZikoUIElement(){
     return true;
   }
@@ -3478,84 +3460,8 @@ class ZikoUIElement extends ZikoUINode{
       });
     }
   }
-  filter(condition_callback, if_callback = () => {}, else_callback = () => {}) {
-    const FilterItems = this.items.filter(condition_callback);
-    FilterItems.forEach(if_callback);
-    this.items
-      .filter((item) => !FilterItems.includes(item))
-      .forEach(else_callback);
-    return this;
-  }
-  filterByTextContent(text, exactMatch = false) {
-    this.items.forEach((n) => n.render());
-    this.filter(
-      (n) => !(exactMatch ? n.text === text : n.text.includes(text)),
-      (e) => e.unrender(),
-    );
-    // this.items.filter(n=>{
-    //   const content=n.element.textContent;
-    //   return !(exactMatch?content===text:content.includes(text))
-    // }).map(n=>n.unrender());
-    //  return this;
-  }
-  filterByClass(value) {
-    this.items.map((n) => n.render());
-    this.items
-      .filter((n) => !n.classes.includes(value))
-      .map((n) => n.unrender());
-    return this;
-  }
-  sortByTextContent(value, displays) {
-    let item = this.children;
-    item
-      .filter((n) => !n.textContent.toLowerCase().includes(value.toLowerCase()))
-      .map((n) => {
-        n.style.display = "none";
-      });
-    item
-      .filter((n) => n.textContent.toLowerCase().includes(value.toLowerCase()))
-      .map((n, i) => (n.style.display = displays[i]));
-    //return item.filter(n=>n.style.display!="none")
-    item.filter((n) => n.style.display != "none");
-    return this;
-  }
-  get #SwitchedStyleRTL_LTR(){
-    const CalculedStyle = globalThis.getComputedStyle(this.element); 
-    const SwitchedStyle = {};
-    if(CalculedStyle.marginRight!=="0px")Object.assign(SwitchedStyle, {marginLeft: CalculedStyle.marginRight});
-    if(CalculedStyle.marginLeft!=="0px")Object.assign(SwitchedStyle, {marginRight: CalculedStyle.marginLeft});
-    if(CalculedStyle.paddingRight!=="0px")Object.assign(SwitchedStyle, {paddingLeft: CalculedStyle.paddingRight});
-    if(CalculedStyle.paddingLeft!=="0px")Object.assign(SwitchedStyle, {paddingRight: CalculedStyle.paddingLeft});
-    if(CalculedStyle.left!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.left});
-    if(CalculedStyle.right!=="0px")Object.assign(SwitchedStyle, {left: CalculedStyle.right});
-    if(CalculedStyle.textAlign === "right")Object.assign(SwitchedStyle, {textAlign: "left"});
-    if(CalculedStyle.textAlign === "left")Object.assign(SwitchedStyle, {textAlign: "right"});
-    if(CalculedStyle.float === "right")Object.assign(SwitchedStyle, {float: "left"});
-    if(CalculedStyle.float === "left")Object.assign(SwitchedStyle, {float: "right"});
-    if(CalculedStyle.borderRadiusLeft!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.borderRadiusRight});
-    if(CalculedStyle.borderRadiusRight!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.borderRadiusLeft});
-    if(["flex","inline-flex"].includes(CalculedStyle.display)){
-      if(CalculedStyle.justifyContent === "flex-end")Object.assign(SwitchedStyle, {justifyContent: "flex-start"});
-      if(CalculedStyle.justifyContent === "flex-start")Object.assign(SwitchedStyle, {justifyContent: "flex-end"});
-    }
-    return SwitchedStyle;
-  }
-  useRtl(switchAll = false){
-    switchAll ? this.style({
-      ...this.#SwitchedStyleRTL_LTR,
-      direction : "rtl"
-    }) : this.style({direction : "rtl"}); 
-    return this;
-  }
-  useLtr(switchAll = false){
-    switchAll ? this.style({
-      ...this.#SwitchedStyleRTL_LTR,
-      direction : "ltr"
-    }) : this.style({direction : "ltr"}); 
-    return this;
-  }
-  freeze(freeze){
-    this.cache.isFrozzen=freeze;
+  freeze(freeze){
+    this.cache.isFrozzen=freeze;
     return this;
   }
   setTarget(tg) {
@@ -3575,9 +3481,9 @@ class ZikoUIElement extends ZikoUINode{
   }
     // Attributes
   #setAttr(name, value){
-    if(this.element.tagName !== "svg") name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
+    if(this.element?.tagName !== "svg") name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
     if(this?.attr[name] && this?.attr[name]===value) return;
-    this.element.setAttribute(name, value);
+    this.element?.setAttribute(name, value);
     Object.assign(this.cache.attributes, {[name]:value});
   }
   setAttr(name, value) {
@@ -3675,657 +3581,318 @@ class ZikoUIElement extends ZikoUINode{
     this.observer.intersection.start();
     return this;
   }
-  // setFullScreen(set = true, e) {
-  //   if(!this.element.requestFullscreen){
-  //     console.error("Fullscreen API is not supported in this browser.");
-  //     return this;
-  //   }
-  //   if (set) this.element.requestFullscreen(e);
-  //   else globalThis.document.exitFullscreen();
-  //   return this;
-  // }
-  // toggleFullScreen(e) {
-  //   if (!globalThis.document.fullscreenElement) this.element.requestFullscreen(e);
-  //   else globalThis.document.exitFullscreen();
-  //   return this;
-  // }
+
 }
 
-class __ZikoUIText__ extends ZikoUIElement {
-    constructor(tag, name, lineBreak,...value) {
-      super(tag, name);
-      this.addValue(...value);
-      this.style({margin:0,padding:0});
-      Object.assign(this.cache,{
-        lineBreak,
-      });
-    }
-    get isText(){
-      return true;
-    }
-    get value(){
-      return this.element.textContent;
-    }
-    clear() {
-      this.element.childNodes.forEach((e) => e.remove());
-      this.element.textContent = "";
-      return this;
-    }
-    addValue(...value) {
-      value.forEach((item,i) => {
-        if (typeof item === "string" || typeof item === "number") this.element?.appendChild(globalThis?.document.createTextNode(item));
-        else if (item instanceof ZikoUIElement) this.element?.appendChild(item.element);
-        else if (item instanceof Complex || item instanceof Matrix) this.element?.appendChild(new Text(item.toString()));
-        else if (item instanceof Array) this.element?.appendChild(new Text(arr2str(item)));
-        else if (item instanceof Object) this.element?.appendChild(new Text(obj2str(item)));
-        
-        // if(
-        //   (item !== value[value.length - 1]) 
-        //   && !(value[i+1] instanceof ZikoUIElement)
-        //   && !(value[i-1] instanceof ZikoUIElement)
-        // ) this.element?.appendChild(new Text(" "))
-        
-        if(this.cache.lineBreak)this.element?.appendChild(globalThis.document?.createElement("br"));
-      });
-      // if(this.element?.innerHTML){
-      //   this.element.innerHTML = this.element.innerHTML.replace(/\n/g, '<br>').replace(/(?<!<[^>]+) /g, '&nbsp;');
-      // }
-      return this
+const HTMLTags = [
+  'a',
+  'abb',
+  'address',
+  'area',
+  'article',
+  'aside',
+  'audio',
+  'b',
+  'base',
+  'bdi',
+  'bdo',
+  'blockquote',
+  'br',
+  'button',
+  'canvas',
+  'caption',
+  'cite',
+  'code',
+  'col',
+  'colgroup',
+  'data',
+  'datalist',
+  'dd',
+  'del',
+  'details',
+  'dfn',
+  'dialog',
+  'div',
+  'dl',
+  'dt',
+  'em',
+  'embed',
+  'fieldset',
+  'figcaption',
+  'figure',
+  'footer',
+  'form',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'header',
+  'hgroup',
+  'hr',
+  'i',
+  'iframe',
+  'img',
+  'ipnut',
+  'ins',
+  'kbd',
+  'label',
+  'legend',
+  'li',
+  'main',
+  'map',
+  'mark',
+  'menu',
+  'meter',
+  'nav',
+  'object',
+  'ol',
+  'optgroup',
+  'option',
+  'output',
+  'p',
+  'param',
+  'picture',
+  'pre',
+  'progress',
+  'q',
+  'rp',
+  'rt',
+  'ruby',
+  's',
+  'samp',
+  'search',
+  'section',
+  'select',
+  'small',
+  'source',
+  'span',
+  'strong',
+  'sub',
+  'summary',
+  'sup',
+  'svg',
+  'table',
+  'tbody',
+  'td',
+  'template',
+  'textarea',
+  'tfoot',
+  'th',
+  'thead',
+  'time',
+  'title',
+  'tr',
+  'track',
+  'u',
+  'ul',
+  'var',
+  'video',
+  'wbr'
+];
+
+const SVGTags = [
+    "svg", "g", "defs", "symbol", "use", "image", "switch",
+    "rect", "circle", "ellipse", "line", "polyline", "polygon", "path",
+    "text", "tspan", "textPath", "altGlyph", "altGlyphDef", "altGlyphItem", "glyph", "glyphRef",
+    "linearGradient", "radialGradient", "pattern", "solidColor",
+    "filter", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix",
+    "feDiffuseLighting", "feDisplacementMap", "feDropShadow", "feFlood", "feFuncA", "feFuncR", "feFuncG", "feFuncB",
+    "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "feSpecularLighting",
+    "feTile", "feTurbulence",
+    "animate", "animateMotion", "animateTransform", "set",
+    "script",
+    "desc", "title", "metadata", "foreignObject"
+  ];
+
+const tags = new Proxy({}, {
+  get(target, prop) {
+    if (typeof prop !== 'string') return undefined;
+    let tag = prop.replaceAll("_","-").toLowerCase();
+    if(HTMLTags.includes(tag)) return (...args)=>{
+      if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
+        let attributes = args.shift();
+        // console.log(args)
+        return new ZikoUIElement(tag).setAttr(attributes).append(...args)
+      }
+      return new ZikoUIElement(tag).append(...args);
     }
-    setValue(...value) {
-      this.clear();
-      this.addValue(...value);
-      return this;
+    if(SVGTags.includes(tag)) return (...args)=>new ZikoUIElement(tag,"",{el_type : "svg"}).append(...args);
+    return (...args)=>{
+      if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
+        let attributes = args.shift();
+        return new ZikoUIElement(tag).setAttr(attributes).append(...args)
+      }
+      return new ZikoUIElement(tag).append(...args);
     }
-  }
+    // switch(tag){
+    //   case "html"  : globalThis?.document?.createElement("html")
+    //   case "head"  :
+    //   case "style" :
+    //   case "link"  :
+    //   case "meta"  :
+    //   case "srcipt":
+    //   case "body"  : return null; break;
+    //   default : return new ZikoUIElement(tag);
+    // }
+  }
+});
 
-class ZikoUIText extends __ZikoUIText__ {
-    constructor(...value) {
-      super("span", "text", false, ...value);
-    }
-}
-class ZikoUIQuote extends __ZikoUIText__ {
-  constructor(...value) {
-    super("q", "quote", false, ...value);
-    this.style({
-      fontStyle: "italic"
-    });
+class ZikoUIFlex extends ZikoUIElement {
+  constructor(tag = "div", w = "100%", h = "100%") {
+    super(tag ,"Flex");
+    this.direction = "cols";
+    if (typeof w == "number") w += "%";
+    if (typeof h == "number") h += "%";
+    this.style({ width: w, height: h });
+    this.style({ display: "flex" });
+    // this.render();
   }
-  get isQuote(){
-    return true
+  get isFlex(){
+    return true;
   }
-}
-class ZikoUIDefintion extends __ZikoUIText__ {
-  constructor(...value) {
-    super("dfn", "dfnText", false, ...value);
+  resp(px,wrap = true) {
+    this.wrap(wrap);
+    if (this.element.clientWidth < px) this.vertical();
+    else this.horizontal();
+    return this;
   }
-  get isDfnText(){
-    return true
+  setSpaceAround() {
+    this.style({ justifyContent: "space-around" });
+    return this;
   }
-}
-class ZikoUISupText extends __ZikoUIText__ {
-  constructor(sup) {
-    super("sup", "supText", false, sup);
+  setSpaceBetween() {
+    this.style({ justifyContent: "space-between" });
+    return this;
   }
-  get isSupText(){
-    return true
+  setBaseline() {
+    this.style({ alignItems: "baseline" });
+    return this;
   }
-}
-class ZikoUISubText extends __ZikoUIText__ {
-  constructor(...value) {
-    super("sub", "subText", false, ...value);
+  gap(g) {
+    if (this.direction === "row") this.style({ columnGap: g });
+    else if (this.direction === "column") this.style({ rowGap: g });
+    return this;
   }
-  get isSubText(){
-    return true
+  wrap(value = "wrap") {
+    const values = ["no-wrap", "wrap","wrap-reverse"];
+    this.style({
+      flexWrap: typeof value === "string" ? value : values[+value],
+    });
+    return this;
   }
-}
-class ZikoUICodeText extends __ZikoUIText__ {
-  constructor(...value) {
-    super("code", "codeText", false, ...value);
+  _justifyContent(align = "center") {
+    this.style({ justifyContent: align });
+    return this;
   }
-  get isCodeText(){
-    return true
+  vertical(x, y, order=1) {
+    set_vertical.call(this,order);
+    this.style({
+      alignItems: typeof(x)==="number"?map_pos_x.call(this,x):x,
+      justifyContent: typeof(y)=="number"?map_pos_y.call(this,y):y
+    });
+    return this;
   }
-}
-class ZikoUIAbbrText extends __ZikoUIText__ {
-  constructor(abbr, title) {
-    super("abbr", "abbrText", false, abbr);
-    this.setAttr("title", title);
+  horizontal(x, y, order=1) {
+    set_horizontal.call(this,order);
+    this.style({
+      alignItems: typeof(y)=="number"?map_pos_y.call(this,y):y,
+      justifyContent: typeof(x)==="number"?map_pos_x.call(this,x):x
+    });
+    return this;
   }
-  get isAbbrText(){
-    return true
-  }
-}
-const text = (...str) => new ZikoUIText(...str);
-const quote = (...str) => new ZikoUIQuote(...str);
-const dfnText = (...str) => new ZikoUIDefintion(...str);
-const supText = (...str) => new ZikoUISupText(...str);
-const subText = (...str) => new ZikoUISubText(...str);
-const codeText = (...str) => new ZikoUICodeText(...str);
-const abbrText = (abbr, title) => new ZikoUIAbbrText(abbr, title);
-
-class ZikoUIParagraphe extends __ZikoUIText__ {
-    constructor(...value) {
-      super("p", "p", true, ...value);
-    }
-    get isPara(){
-      return true;
-    }
-}
-class ZikoUIBlockQuote extends __ZikoUIText__ {
-    constructor(cite,quote) {
-      super("blockquote", "blockquote", true, quote);
-      this.setAttr("cite", cite);
-    }
-    get isBlockQuote(){
-      return true;
-    }
-}
-const p = (...ZikoUIElement) => new ZikoUIParagraphe(...ZikoUIElement);
-const blockQuote = (cite, quote) => new ZikoUIBlockQuote(cite, quote);
-
-class ZikoUIHeading extends ZikoUIElement {
-    constructor(type = 1, value = "") {
-      super(`h${type}`,`h${type}`);
-      this.element.textContent = value;
-    }
-    get isHeading(){
-      return true;
-    }
-    get value() {
-      return this.element.innerText;
-    }
-    setValue(text = "") {
-      this.element.innerText = text;
-      return;
-    }
-    addValue(text = "") {
-      this.element.innerText += text;
-      return this;
-    }
-  }
-const h1=(text="")=>new ZikoUIHeading(1, text);
-const h2=(text="")=>new ZikoUIHeading(2, text);
-const h3=(text="")=>new ZikoUIHeading(3, text);
-const h4=(text="")=>new ZikoUIHeading(4, text);
-const h5=(text="")=>new ZikoUIHeading(5, text);
-const h6=(text="")=>new ZikoUIHeading(6, text);
-
-var Text$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  ZikoUIAbbrText: ZikoUIAbbrText,
-  ZikoUIBlockQuote: ZikoUIBlockQuote,
-  ZikoUICodeText: ZikoUICodeText,
-  ZikoUIDefintion: ZikoUIDefintion,
-  ZikoUIHeading: ZikoUIHeading,
-  ZikoUIParagraphe: ZikoUIParagraphe,
-  ZikoUIQuote: ZikoUIQuote,
-  ZikoUISubText: ZikoUISubText,
-  ZikoUISupText: ZikoUISupText,
-  ZikoUIText: ZikoUIText,
-  abbrText: abbrText,
-  blockQuote: blockQuote,
-  codeText: codeText,
-  dfnText: dfnText,
-  h1: h1,
-  h2: h2,
-  h3: h3,
-  h4: h4,
-  h5: h5,
-  h6: h6,
-  p: p,
-  quote: quote,
-  subText: subText,
-  supText: supText,
-  text: text
-});
-
-class ZikoUILI extends ZikoUIElement{
-  constructor(UI){
-    super("li","li");
-    this.append(UI);
-  }
-  get isLi(){
-    return true;
-  }
-}
-class ZikoUIList extends ZikoUIElement {
-    constructor(element,name) {
-      super(element,name);
-      delete this.append;
-      this.style({ listStylePosition: "inside" });
-    }
-    get isList(){
-      return true;
-    }
-    append(...arr){
-      for (let i = 0; i < arr.length; i++) {
-        let li = null;
-        if(["string","number"].includes(typeof arr[i]))arr[i]=text(arr[i]);
-        if (arr[i] instanceof ZikoUIElement)li=new ZikoUILI(arr[i]);
-        li.setTarget(this.element);
-        this.items.push(li[0]);
-        this.maintain();
-      }
-    }
-    remove(...ele) {
-      if(ele.length==0){
-        if(this.target.children.length) this.target.removeChild(this.element);
-      }
-      else {
-        const remove = (ele) => {
-          if(typeof ele === "number") ele=this.items[ele];
-          if(ele instanceof ZikoUIElement)this.element?.removeChild(ele.parent.element);
-            this.items=this.items.filter(n=>n!==ele);
-        };
-        for (let i = 0; i < ele.length; i++) remove(ele[i]);
-        for (let i = 0; i < this.items.length; i++)
-          Object.assign(this, { [[i]]: this.items[i] });
-      }
-      return this;
-    }
-    insertAt(index, ...ele) {
-      if (index >= this.element.children.length) this.append(...ele);
-      else
-        for (let i = 0; i < ele.length; i++) {
-          let li = null;
-          if(["number","string"].includes(typeof ele[i]))ele[i]=text(ele[i]);
-          if (ele[i] instanceof ZikoUIElement)li=new ZikoUILI(ele[i]);
-          this.element?.insertBefore(li.element, this.items[index].parent.element);
-          this.items.splice(index, 0, ele[i][0]);
-        }
-      return this;
-    }
-    filterByTextContent(text,exactMatch=false){
-      this.items.map(n=>n.parent.render());
-      this.items.filter(n=>{
-        const content=n.element.textContent;
-        return !(exactMatch?content===text:content.includes(text))
-      }).map(n=>n.parent.render(false));
-       return this;
-    }
-    sortByTextContent(order=1){
-      this.items.map(n=>n.parent.render(false));
-      // To Fix
-      this.sortedItems=this.items.sort((a,b)=>order*a.element.textContent.localeCompare(b.element.textContent));
-      this.append(...this.sortedItems);
-      return this;
-    }
-    filterByClass(value) {
-      this.items.map(n=>n.parent.render(true));
-      this.items.filter(n=>!n.Classes.includes(value)).map(n=>n.parent.render(false));
-      return this; 
-    }
-    delete(value) {
-      const valueIndex = [...this.element.children].indexOf(value);
-      return valueIndex;
-      /*if(valueIndex >= 0) {
-        return this.list.splice(valueIndex, 1);
-      }*/
-    }
-    push(){
-
-    }
-    pop(){
-
-    }
-    unshift(){
-
-    }
-    shift(){
-
-    }
-    sort(){
-
-    }
-    filter(){
-
-    }
-    slice(){
-      
-    }
-  }
-class ZikoUIOList extends ZikoUIList{
-  constructor(...arr){
-    super("ol","ol");
-    this.append(...arr);
-  }
-  get isOl(){
-    return true;
-  }
-  type(tp = 1) {
-    this.element?.setAttribute("type", tp);
-    return this;
-  }
-  start(st = 1) {
-    this.element?.setAttribute("start", st);
-    return this;
-  }
-}
-class ZikoUIUList extends ZikoUIList{
-  constructor(...arr){
-    super("ul","ul");
-    this.append(...arr);
-  }
-  get isUl(){
-    return true;
-  }
-}
-const li=UI=>new ZikoUILI(UI);
-const ol = (...arr) => new ZikoUIOList(...arr);
-const ul = (...arr) => new ZikoUIUList(...arr);
-
-var List = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  li: li,
-  ol: ol,
-  ul: ul
-});
-
-class ZikoUIInput extends ZikoUIElement {
-  constructor(type, name , value = "", datalist) {
-    super("input", "input");
-    Object.assign(this.events, { input: null });
-    this.setValue(value);
-    this.setAttr("type", type);
-    this.setAttr("name", name);
-    // this.setAttr("tab-index","0")
-    if (datalist) this.linkDatalist(datalist);
-  }
-  get isInput() {
-    return true;
-  }
-  setName(name){
-    this.setAttr("name", name);
-    return this;
-  }
-  onInput(...callbacks) {
-    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 = useInputEvent(this);
-    this.events.input.onChange(...callbacks);
-    return this;
-  }
-  linkDatalist(datalist) {
-    let id;
-    if (datalist instanceof ZikoUIInputDatalist) id = datalist.Id;
-    else if (datalist instanceof Array) {
-      const Datalist = new ZikoUIInputDatalist(...datalist);
-      id = Datalist.Id;
-      console.log(Datalist);
-    } else id = datalist;
-    this.element?.setAttribute("list", id);
-    return this;
-  }
-  get value() {
-    return this.element.value;
-  }
-  // _setType(type) {
-  //   this.element.type = type;
-  //   return this;
-  // }
-  setValue(value = "") {
-    this.element.value = value;
-    return this;
-  }
-  useState(state) {
-    this.setValue(state);
-    return [{ value: this.value }, (e) => this.setValue(e)];
-  }
-  setPlaceholder(value) {
-    if (value) this.element.placeholder = value;
-    return this;
-  }
-  get isValide() {
-    return this.element.checkValidity();
-  }
-  setRequired(required = true) {
-    this.element.required = required;
-    return this;
-  }
-  select() {
-    this.element.select();
-    return this;
-  }
-  copy() {
-    this.element.select();
-    document.execCommand("copy");
-    return this;
-  }
-  cut() {
-    this.element.select();
-    document.execCommand("cut");
-    return this;
-  }
-  accept(value) {
-    this.element.accept = value;
-    return this;
+  show() {
+    this.isHidden = false;
+    this.style({ display: "flex" });
+    return this;
   }
 }
 
-const input = (value, datalist) => {
-  if (value instanceof Object) {
-    const { datalist, placeholder } = value;
-    value = value.value ?? "";
-    return new ZikoUIInput("text", "input", value, datalist).setPlaceholder(placeholder);
-  }
-  return new ZikoUIInput("text", "input", value, datalist);
-};
-
-class ZikoUIInputNumber extends ZikoUIInput {
-    constructor(min, max, step = 1) {
-      super("number", "inpuNumber");
-      this.setMin(min).setMax(max).setStep(step);
-    }
-    get isInputNumber() {
-      return true;
-    }
-    get value() {
-      return +this.element.value;
-    }
-    setMin(min) {
-      this.element.min = min;
-      return this;
-    }
-    setMax(max) {
-      this.element.max = max;
-      return this;
-    }
-    setStep(step) {
-      this.element.step = step;
-      return this;
-    }
+const Flex = (...ZikoUIElement) =>{
+  let tag="div";
+  if(typeof ZikoUIElement[0]==="string"){
+    tag=ZikoUIElement[0];
+    ZikoUIElement.pop();
   }
-  const inputNumber = (min, max, step) => {
-    if (min instanceof Object) {
-      const { value, max = 10, step = 1, placeholder = "" } = min;
-      min = min?.min ?? 0;
-      return new ZikoUIInputSlider(min, max, step)
-        .setValue(value)
-        .setPlaceholder(placeholder);
-    }
-    return new ZikoUIInputNumber(min, max, step);
-  };
-
-let ZikoUIInputSlider$1 = class ZikoUIInputSlider extends ZikoUIInput {
-    constructor(val = 0, min = 0, max = 10, step = 1) {
-      super("range", "inputSlider");
-      this.setMin(min).setMax(max).setValue(val).setStep(step);
-    }
-    get isInputSlider(){
-      return true;
-    }
-    setMin(min) {
-      this.element.min = min;
-      return this;
-    }
-    setMax(max) {
-      this.element.max = max;
-      return this;
-    }
-    setStep(step) {
-      this.element.step = step;
-      return this;
-    }
+  return new ZikoUIFlex(tag).append(...ZikoUIElement);
 };
-const slider = (value, min, max, step) =>{
-    if(value instanceof Object){
-      const {min=0,max=10,step=1}=value;
-      value=value?.value??5;
-      return new ZikoUIInputSlider$1(value, min, max, step);
-    }
-    return new ZikoUIInputSlider$1(value, min, max, step);
-};
-
-class ZikoUIInputColor extends ZikoUIInput {
-    constructor() {
-      super("color", "inputColor");
-      this.background(this.value);
-      this.onInput(() => this.background(this.value));
-    }
-    get isInputColor(){
-      return true;
-    }
-}
-const inputColor = () => new ZikoUIInputColor();
-
-class ZikoUIInputSearch extends ZikoUIInput {
-  constructor() {
-    super("search", "inputSearch");
-    this.Length = 0;
-  }
-  get isInputSearch() {
-    return true;
-  }
-  onsearch(callback) {
-    this.element?.addEventListener("search", () => callback());
-    return this;
-  }
-  connect(...UIElement) {
-    /* 
-      let memory = new Array(UIElement.length).fill([]);
-      UIElement.map((n, i) => {
-        //console.log(n)
-        n.items.map((m, j) => {
-          memory[i][j] = m.element.style.display;
-        });
-      });
-      UIElement.map((n, i) =>
-        this.onInput(() => {
-          n.filterByTextContent(this.value, memory[i]);
-          this.Length = n.children.filter(
-            (n) => n.style.display != "none"
-          ).length;
-        })
-      );
-      */
-    return this;
-  }
-  displayLength(UIElement) {
-    this.element?.addEventListener("keyup", () =>
-      UIElement.setValue(this.Length),
-    );
-    return this;
-  }
+function set_vertical(direction){
+  direction == 1
+    ? this.style({ flexDirection: "column" })
+    : direction == -1 && this.style({ flexDirection: "column-reverse" });
+  return this;
 }
-const search = (...a) => new ZikoUIInputSearch().connect(...a);
-
-class ZikoUIInputCheckbox extends ZikoUIInput {
-    constructor() {
-      super("checkbox", "inputCheckbox");
-      this.cursor("pointer");
-    }
-    get isInputCheckbox(){
-      return true;
-    }
-    get checked() {
-      return this.element.checked;
-    }
-    check(checked = true) {
-      this.element.checked = checked;
-      return this;
-    }
-    color(color) {
-      this.element.style.accentColor = color;
-      return this;
-    }
+function set_horizontal(direction){
+direction == 1
+    ? this.style({ flexDirection: "row" })
+    : direction == -1 && this.style({ flexDirection: "row-reverse" });
+  return this;
 }
-const checkbox = () => new ZikoUIInputCheckbox();
-
-class ZikoUIInputRadio extends ZikoUIInput {
-    constructor() {
-      super("radio", "inputRadio");
-      this.cursor("pointer");
-    }
-    get isInputRadio(){
-      return true;
-    }
-    get checked() {
-      return this.element.checked;
-    }
-    check(checked = true) {
-      this.element.checked = checked;
-      return this;
-    }
-    color(color) {
-      this.element.style.accentColor = color;
-      return this;
-    }
+function map_pos_x(align){
+let pos = ["flex-start", "center", "flex-end"];
+if (typeof align === "number") align = pos[align + 1];
+return align;
 }
-const radio = () => new ZikoUIInputRadio();
-
-class ZikoUIInputEmail extends ZikoUIInput {
-    constructor() {
-      super("email", "inputEmail");
-    }
-    get isInputEmail(){
-      return true;
-    }
-  }
-const inputEmail = () => new ZikoUIInputEmail();
-
-class ZikoUIInputPassword extends ZikoUIInput {
-    constructor() {
-      super("password", "inputPassword");
-    }
-    get isInputPassword(){
-      return true;
-    }
-  }
-  const inputPassword = () => new ZikoUIInputPassword();
+function map_pos_y(align){
+return map_pos_x(-align);
+}
 
-class ZikoUIInputDate extends ZikoUIInput {
-    constructor() {
-      super("date", "inputDate");
+class ZikoUIGrid extends ZikoUIElement {
+    constructor(tag ="div", w = "50vw", h = "50vh") {
+      super(tag,"Grid");
+      this.direction = "cols";
+      if (typeof w == "number") w += "%";
+      if (typeof h == "number") h += "%";
+      this.style({ border: "1px solid black", width: w, height: h });
+      this.style({ display: "grid" });
+    //   this.render();
     }
-    get isInputDate(){
-      return true;
+    get isGird(){
+        return true;
+      }
+    columns(n) {
+        let temp = "";
+        for (let i = 0; i < n; i++) temp = temp.concat(" auto");
+        this.#templateColumns(temp);
+        return this;
     }
-}
-const inputDate = () => new ZikoUIInputDate();
-
-class ZikoUIInputTime extends ZikoUIInput {
-    constructor() {
-      super("time", "inputTime");
+    #templateColumns(temp = "auto auto") {
+        this.style({ gridTemplateColumns: temp });
+        return this;
     }
-    get isInputTime(){
-      return true;
+    gap(w = 10, h = w) {
+        if(typeof (w) === "number")w += "px";
+        if(typeof (h) === "number")h += "px";
+        this.style({gridColumnGap: w,gridRowGap: h});
+        return this;
     }
 }
-const inputTime = () => new ZikoUIInputTime();
+const Grid$1 = (...ZikoUIElement) => new ZikoUIGrid("div").append(...ZikoUIElement);
 
-class ZikoUIInputDateTime extends ZikoUIInput {
-    constructor() {
-      super("datetime-local", "inputDateTime");
-    }
-    get isInputDateTime(){
-      return true;
+class ZikoUISuspense extends ZikoUIElement{
+    constructor(fallback_ui, callback){
+        super("div", "suspense");
+        this.setAttr({
+            dataTemp : "suspense"
+        });
+        this.fallback_ui = fallback_ui;
+        this.append(fallback_ui);
+        (async ()=>{
+            try{
+                const ui = await callback();
+                fallback_ui.unrender();
+                this.append(ui);
+                // console.log(content)
+            }
+            catch(error){
+                console.log({error});
+            }
+        })();
     }
 }
-const inputDateTime = () => new ZikoUIInputDateTime();
+
+const Suspense = (fallback_ui, callback) => new ZikoUISuspense(fallback_ui, callback);
 
 class ZikoUIXMLWrapper extends ZikoUIElement{
     constructor(XMLContent, type){
@@ -4361,1660 +3928,651 @@ class ZikoUISVGWrapper extends ZikoUIXMLWrapper{
 const HTMLWrapper = (HTMLContent) => new ZikoUIHTMLWrapper(HTMLContent);
 const SVGWrapper = (SVGContent) => new ZikoUISVGWrapper(SVGContent);
 
-// function loadComponent() {
-//     return new Promise((resolve) => {
-//       setTimeout(() => {
-//         resolve(p(1000))
-//       }, 500);
-//     });
-//   }
-
-//   Suspense(p("Loading ..."),()=>fetch('https://jsonplaceholder.typicode.com/todos/1')
-//   .then(response => response.json())
-//   .then(json => h2(json.title)))
-
- 
-
-class ZikoUISuspense extends ZikoUIElement{
-    constructor(fallback_ui, callback){
-        super("div", "suspense");
-        this.setAttr({
-            dataTemp : "suspense"
+class ZikoUICanvas extends ZikoUIElement{
+    constructor(w,h){
+        super("canvas","canvas");
+        this.ctx = this.element?.getContext("2d");
+        this.style({
+            border:"1px red solid",
         });
-        this.fallback_ui = fallback_ui;
-        this.append(fallback_ui);
-        (async ()=>{
-            try{
-                const ui = await callback();
-                fallback_ui.unrender();
-                this.append(ui);
-                // console.log(content)
-            }
-            catch(error){
-                console.log({error});
-            }
-        })();
-    }
-}
-
-const Suspense = (fallback_ui, callback) => new ZikoUISuspense(fallback_ui, callback);
-
-const _h=(tag, type, attributes, ...children)=>{
-    const { name, style, ...attrs } = attributes;
-    let element = new ZikoUIElement(tag, name, type);
-    style && element.style(style);
-    attrs && element.setAttr(attrs);
-    children && element.append(...children);
-    return element; 
-};
-const h=(tag, attributes = {}, ...children)=> _h(tag, "html", attributes, ...children);
-const s=(tag, attributes = {}, ...children)=> _h(tag, "svg", attributes, ...children);
-
-const HTMLTags$1 = [
-  'a',
-  'abb',
-  'address',
-  'area',
-  'article',
-  'aside',
-  'audio',
-  'b',
-  'base',
-  'bdi',
-  'bdo',
-  'blockquote',
-  'br',
-  'button',
-  'canvas',
-  'caption',
-  'cite',
-  'code',
-  'col',
-  'colgroup',
-  'data',
-  'datalist',
-  'dd',
-  'del',
-  'details',
-  'dfn',
-  'dialog',
-  'div',
-  'dl',
-  'dt',
-  'em',
-  'embed',
-  'fieldset',
-  'figcaption',
-  'figure',
-  'footer',
-  'form',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'header',
-  'hgroup',
-  'hr',
-  'i',
-  'iframe',
-  'img',
-  'ipnut',
-  'ins',
-  'kbd',
-  'label',
-  'legend',
-  'li',
-  'main',
-  'map',
-  'mark',
-  'menu',
-  'meter',
-  'nav',
-  'object',
-  'ol',
-  'optgroup',
-  'option',
-  'output',
-  'p',
-  'param',
-  'picture',
-  'pre',
-  'progress',
-  'q',
-  'rp',
-  'rt',
-  'ruby',
-  's',
-  'samp',
-  'search',
-  'section',
-  'select',
-  'small',
-  'source',
-  'span',
-  'strong',
-  'sub',
-  'summary',
-  'sup',
-  'svg',
-  'table',
-  'tbody',
-  'td',
-  'template',
-  'textarea',
-  'tfoot',
-  'th',
-  'thead',
-  'time',
-  'title',
-  'tr',
-  'track',
-  'u',
-  'ul',
-  'var',
-  'video',
-  'wbr'
-];
-
-const SVGTags$1 = [
-    "svg", "g", "defs", "symbol", "use", "image", "switch",
-    "rect", "circle", "ellipse", "line", "polyline", "polygon", "path",
-    "text", "tspan", "textPath", "altGlyph", "altGlyphDef", "altGlyphItem", "glyph", "glyphRef",
-    "linearGradient", "radialGradient", "pattern", "solidColor",
-    "filter", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix",
-    "feDiffuseLighting", "feDisplacementMap", "feDropShadow", "feFlood", "feFuncA", "feFuncR", "feFuncG", "feFuncB",
-    "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "feSpecularLighting",
-    "feTile", "feTurbulence",
-    "animate", "animateMotion", "animateTransform", "set",
-    "script",
-    "desc", "title", "metadata", "foreignObject"
-  ];
-  
-const hTags = HTMLTags$1.reduce((acc, key) => {
-  acc[key] = (attr, ...children) => h(key, attr, ...children);
-  return acc;
-}, {});
-const sTags = SVGTags$1.reduce((acc, key) => {
-    acc[key] = (attr, ...children) => h(key, attr, ...children);
-    return acc;
-  }, {});
-
-class ZikoUIHtmlTag extends ZikoUIElement {
-  constructor(element) {
-    super(element,"html");
-  }
-}
-class ZikoUIBtn extends ZikoUIElement {
-  constructor(value = "button") {
-    super("button","btn");
-    this.setValue(value);
-    this.st.cursor("pointer");
-    globalThis.__Ziko__.__Config__.default.render && this.render();
-  }
-  get isBtn(){
-    return true
-  }
-  setValue(value) {
-    if (value instanceof ZikoUIElement) value.setTarget(this.element);
-    else {
-      this.element?.appendChild(document.createTextNode(""));
-      this.element.childNodes[0].data = value;
+        this.transformMatrix = new Matrix([
+            [1,0,0],
+            [0,1,0],
+            [0,0,1]
+        ]);
+        this.axisMatrix = new Matrix([
+            [-10,-10],
+            [10,10]
+        ]);
+        // setTimeout(()=>this.resize(w,h),0);
+        requestAnimationFrame(()=>this.resize(w,h),0);
+        this.on("sizeupdated",()=>this.adjust());
     }
-    return this;
-  }
-  get value() {
-    return this.element.innerText;
-  }
-  toggleValues(...values) {
-    values = values.map((n) => "" + n);
-    let index = values.indexOf("" + this.value);
-    if (index != -1 && index != values.length - 1)
-      this.setValue(values[index + 1]);
-    else this.setValue(values[0]);
-    return this;
-  }
-}
-class ZikoUIBr extends ZikoUIElement {
-    constructor() {
-      super("br","br");
+    get Xmin(){
+        return this.axisMatrix[0][0];
     }
-    get isBr(){
-      return true
+    get Ymin(){
+        return this.axisMatrix[0][1];
     }
-  }
-  class ZikoUIHr extends ZikoUIElement {
-    constructor() {
-      super("hr","hr");
-      this.setAttr("role", "none");
+    get Xmax(){
+        return this.axisMatrix[1][0];
     }
-    get isHr(){
-      return true
+    get Ymax(){
+        return this.axisMatrix[1][1];
     }
-  }
-  class ZikoUILink extends ZikoUIElement{
-    constructor(href){
-      super("a","link");
-      Object.assign(this.cache,{
-        defaultStyle:{
-          color:"#0275d8",
-          textDecoration: "none"
-        },
-        hoverStyle:{
-          color:"#01447e",
-          textDecoration: "underline"
-        },
-      });
-      this.setHref(href);
-      this.style(this.cache.defaultStyle);
-      this.onPtrEnter(()=>this.style(this.cache.hoverStyle));
-      this.onPtrLeave(()=>this.style(this.cache.defaultStyle));
+    get ImageData(){
+        return this.ctx.getImageData(0,0,c.Width,c.Height);
     }
-    setHref(href){
-      this.element.href=href;
+    draw(all=true){
+        if(all){
+            this.clear();  
+            this.items.forEach(element => {
+                element.parent=this;
+                element.draw(this.ctx);
+            });
+        }
+        else {
+            this.items.at(-1).parent=this;
+            this.items.at(-1).draw(this.ctx);
+        }
+        this.maintain();
+        return this;
     }
-    get isLink(){
-      return true
+    applyTransformMatrix(){
+        this.ctx.setTransform(
+            this.transformMatrix[0][0],
+            this.transformMatrix[1][0],
+            this.transformMatrix[0][1],
+            this.transformMatrix[1][1],
+            this.transformMatrix[0][2],
+            this.transformMatrix[1][2],
+        );
+        return this;
     }
-  }
-  const br = () => new ZikoUIBr();
-  const hr = () => new ZikoUIHr();
-  const brs = (n=1)=> new Array(n).fill(new ZikoUIBr());
-  const hrs = (n=1)=> new Array(n).fill(new ZikoUIHr());
-  const link=(href,...UIElement)=>new ZikoUILink(href).append(...UIElement);
-  const html=(tag,...UIElement)=>new ZikoUIHtmlTag(tag).append(...UIElement);
-  const btn = (value) => new ZikoUIBtn(value);
-
-var Misc = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  HTMLWrapper: HTMLWrapper,
-  SVGWrapper: SVGWrapper,
-  Suspense: Suspense,
-  ZikoUIBr: ZikoUIBr,
-  ZikoUIHTMLWrapper: ZikoUIHTMLWrapper,
-  ZikoUIHr: ZikoUIHr,
-  ZikoUIHtmlTag: ZikoUIHtmlTag,
-  ZikoUILink: ZikoUILink,
-  ZikoUISVGWrapper: ZikoUISVGWrapper,
-  ZikoUISuspense: ZikoUISuspense,
-  ZikoUIXMLWrapper: ZikoUIXMLWrapper,
-  br: br,
-  brs: brs,
-  btn: btn,
-  h: h,
-  hTags: hTags,
-  hr: hr,
-  hrs: hrs,
-  html: html,
-  link: link,
-  s: s,
-  sTags: sTags
-});
-
-class ZikoUIInputImage extends ZikoUIElement {
-    constructor(text = "File") {
-      super("inputImage");
-      this._aux_element = btn(text).setTarget(this.target);
-      this.element = document?.createElement("input");
-      this.element?.setAttribute("type", "file");
-      this.element?.setAttribute("accept", "image");
-      this._aux_element.onClick(() => this.element.click());
-      this.element.onChange = this.handleImage.bind(this);
-    }
-    get isInputImage(){
-      return true;
-    }
-    handleImage(e) {
-      const reader = new FileReader();
-      const img = new Image();
-      reader.onload = function (event) {
-        img.src = event.target.result;
-        console.log(img.src);
-      };
-      reader.readAsDataURL(e.target.files[0]);
-      this.img = img;
+    resize(w,h){
+        this.size(w,h);
+        this.lineWidth();
+        this.view(this.axisMatrix[0][0], this.axisMatrix[0][1], this.axisMatrix[1][0], this.axisMatrix[1][1]);
+        this.emit("sizeupdated");
+        return this;
     }
-    get value() {
-      return this.img;
+    adjust(){
+        this.element.width =this.element?.getBoundingClientRect().width;
+        this.element.height =this.element?.getBoundingClientRect().height;
+        this.view(this.axisMatrix[0][0], this.axisMatrix[0][1], this.axisMatrix[1][0], this.axisMatrix[1][1]);
+        return this;
     }
-    render(bool = true) {
-      if (bool) this.target.appendChild(this._aux_element.element);
-      else this.remove();
-      return this;
+    view(xMin,yMin,xMax,yMax){
+        this.transformMatrix[0][0]=this.width/(xMax-xMin); // scaleX
+        this.transformMatrix[1][1]=-this.height/(yMax-yMin); // scaleY
+        this.transformMatrix[0][2]=this.width/2;
+        this.transformMatrix[1][2]=this.height/2;
+        this.axisMatrix=new Matrix([
+            [xMin,yMin],
+            [xMax,yMax]
+        ]);
+        
+        this.applyTransformMatrix(); 
+        this.clear();
+        this.lineWidth(1);
+        this.draw();
+        return this;
     }
-    remove() {
-      if (this.target.children.length) this.target.removeChild(this._aux_element.element);
-      return this;
+    reset(){
+        this.ctx.setTransform(1,0,0,0,0,0);
+        return this;
     }
-}
-const inputImage = (text) => new ZikoUIInputImage(text);
-
-class ZikoUIImage extends ZikoUIElement {
-    constructor(src,alt, w, h) {
-      super("img","image");
-      this.value=src;
-      if (src.nodeName === "IMG")this.element.setAttribute("src", src.src);
-      else this.element?.setAttribute("src", src);
-      if (typeof w == "number") w += "%";
-      if (typeof h == "number") h += "%";
-      this.setAttr("alt", alt);
-      this.style({ border: "1px solid black", width: w, height: h });
+    append(element){
+        this.items.push(element);
+        this.draw(false);
+        return this;
     }
-    get isImg(){
-      return true;
+    background(color){
+        this.ctx.fillStyle = color;
+        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+        this.ctx.fillRect(0, 0, this.width, this.height);
+        this.applyTransformMatrix();
+        this.draw();
     }
-     updateSrc(url){
-      this.value=url;
-      this.element.src=url;
-     return this;
+    lineWidth(w){
+        this.ctx.lineWidth=w/this.transformMatrix[0][0];
+        return this
     }
-    toggleSrc(...values){
-      values=values.map(n=>""+n);
-      let index=values.indexOf(""+this.value);
-      if(index!=-1&&index!=(values.length-1))this.updateSrc(values[index+1]);
-      else this.updateSrc(values[0]);
-      return this;
-    }
-    alt(alt){
-      this.element.alt=alt;
-      return this;
-    }
-  }
-const image = (src,alt, width, height) => new ZikoUIImage(src,alt, width, height);
-
-class ZikoUIFigure extends ZikoUIElement{
-    constructor(src,caption){
-      super("figure","figure");
-      this.img=src.width("100%").element;
-      this.caption=document?.createElement("figcaption");
-      this.caption.append(caption.element);
-      this.element?.append(this.img);
-      this.element?.append(this.caption);
-    }
-    get isFigure(){
-      return true;
-    }
-}
-const figure =(image,caption) =>new ZikoUIFigure(image,caption);
-
-class __ZikoUIDynamicMediaElement__ extends ZikoUIElement {
-    constructor(element, name) {
-      super(element, name);
-      this.useControls();
-    }
-    get t(){
-      return this.element.currentTime;  
+    getImageData(x=0,y=0,w=this.width,h=this.height){
+        return this.ctx.getImageData(x,y,w,h);
     }
-    useControls(enabled = true) {
-      this.element.controls = enabled;
-      return this;
+    clear(){
+        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
+        this.ctx.clearRect(0, 0, this.width, this.height);
+        this.applyTransformMatrix(); 
+        return this;
     }
-    enableControls(){
-      this.element.controls = true;
-      return this;
+    clone(){
+        console.log(this.width);
+        const canvas=new ZikoUICanvas();
+        canvas.items=this.items;
+        canvas.transformMatrix=this.transformMatrix;
+        canvas.axisMatrix=this.axisMatrix;
+        Object.assign(canvas.cache,{...this.cache});
+        //waitForUIElm(this)
+        //console.log(element)
+        this.size(this.element.style.width,this.element.style.width);
+        this.applyTransformMatrix();
+        this.draw();
+        this.adjust();
+        return canvas;
     }
-    disableControls(){
-      this.element.controls = true;
-      return this;
+    toImage() {
+        this.img = document?.createElement("img");
+        this.img.src = this.element?.toDataURL("image/png");
+        return this;
     }
-    toggleControls(){
-      this.element.controls = !this.element.controls;
-      return this;
+    toBlob() {
+        var canvas = this.element;
+        canvas.toBlob(function (blob) {
+            var newImg = document?.createElement("img"),
+                url = URL.createObjectURL(blob);
+            newImg.onload = function () {
+                URL.revokeObjectURL(url);
+            };
+            newImg.src = url;
+            console.log(newImg);
+        });
     }
-    play() {
-      this.element.play();
-      return this;
+    zoomIn(){
+
     }
-    pause() {
-      this.element.pause();
-      return this;
+    zoomOut(){
+        
     }
-    seekTo(time) {
-      this.element.currentTime = time;
-      return this;
+    undo(n){
+
     }
-    onPlay(){
+    redo(n){
 
     }
-    onPause(){
+    stream(){
 
     }
-  }
+}
+
+const Canvas=(w,h)=>new ZikoUICanvas(w,h);
 
-class ZikoUIVideo extends __ZikoUIDynamicMediaElement__ {
-    constructor(src="", w = "100%", h = "50vh") {
-      super("video","video");
-      if (src.nodeName === "VIDEO") this.element?.setAttribute("src", src.src);
-      else this.element?.setAttribute("src", src);
-      if (typeof w == "number") w += "%";
-      if (typeof h == "number") h += "%";
-      this.style({ width: w, height: h });
+class ZikoUISvg extends ZikoUIElement {
+    constructor(w=360,h=300) {
+      super("svg","svg");
+      //this.cache={};
+      // this.setAttr("width",w);
+      // this.setAttr("height",h);
+      // this.setAttr({
+      //   width : w,
+      //   height : h
+      // })
+      this.style({border:"1px black solid"});
+      //this.view(-w/2,-h/2,w/2,h/2);
+      this.size(w, h);
+      this.view(-10,-10,10,10);
     }
-    get isVideo(){
-      return true;
+    size(w, h){
+      this.setAttr({
+        width : w,
+        height : h
+      });
+      return this
     }
-    usePoster(src=""){
-      this.element.poster=src;
+    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;
     }
-    usePIP(e){
-      this.element.requestPictureInPicture(e);
+    add(...svgElement){
+      for(let i=0;i<svgElement.length;i++){
+        this.element.append(svgElement[i].element);
+        this.items.push(svgElement[i]);
+      }
+      this.maintain();
       return this;
     }
-  }
-const video = (src, width, height) => new ZikoUIVideo(src, width, height);
-
-class ZikoUIAudio extends __ZikoUIDynamicMediaElement__ {
-    constructor(src) {
-      super("audio","audio");
-      this.element?.setAttribute("src", src);
-      this.size("150px","30px");
-      // this.useControls();
+    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;     
     }
-    get isAudio(){
-      return true;
+    mask(){
+  
     }
-  }
-const audio = (src) => new ZikoUIAudio(src);
-
-var Media = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  ZikoUIAudio: ZikoUIAudio,
-  ZikoUIFigure: ZikoUIFigure,
-  ZikoUIImage: ZikoUIImage,
-  ZikoUIVideo: ZikoUIVideo,
-  audio: audio,
-  figure: figure,
-  image: image,
-  video: video
-});
-
-class ZikoUIWebcame extends ZikoUIVideo{
-    constructor(){
-      super();
-      this.element?.setAttribute("src", "");
-      this.constraints = { audio: true, video: { width: 1280, height: 720 } };
-      //this.video=this.element
+    toString(){
+      return  (new XMLSerializer()).serializeToString(this.element);
     }
-    get isInputCamera(){
-      return true;
+    btoa(){
+      return btoa(this.toString())
     }
-    start(){
-      navigator.mediaDevices.getUserMedia(this.constraints).then((mediaStream)=>{
-        this.element.srcObject = mediaStream;
-        this.element.onloadedmetadata = () =>{
-          this.element.play();
-        };
-      })
-      .catch(function(err) { console.log(err.name + ": " + err.message); });
-      return this;
+    toImg(){
+      return 'data:image/svg+xml;base64,'+this.btoa()
     }
-  }
-  const inputCamera=()=>new ZikoUIWebcame();
-
-class ZikoUILabel extends ZikoUIElement{
-    constructor(){
-      super();
-      this.element=document?.createElement("label");
+    toImg2(){
+      return "data:image/svg+xml;charset=utf8,"+this.toString().replaceAll("<","%3C").replaceAll(">","%3E").replaceAll("#","%23").replaceAll('"',"'");
     }
-    get isLabel(){
-      return true;
-  }
+    
   }
-class ZikoUIInputOption extends ZikoUIElement {
-    constructor(value = "") {
-      super();
-      this.element = document?.createElement("option");
-      if(value instanceof Object&&"value" in value){
-        this.setValue(value.value);
-        this.setText(value?.text??value.value);
+
+  const Svg =(w,h)=>new ZikoUISvg(w,h);
+
+const svg2str=svg=>(new XMLSerializer()).serializeToString(svg);
+const svg2ascii=svg=>btoa(svg2str(svg));
+const svg2imgUrl=svg=>'data:image/svg+xml;base64,'+svg2ascii(svg);
+const svg2img=(svg,render=true)=>tags.img(svg2imgUrl(svg)).render(render);
+
+// const obj2str=(object)=>{
+//     const recursiveToString = (obj) => {
+//       if (Array.isArray(obj)) return arr2str(obj);
+//       if (typeof obj === 'object' && obj !== null) {
+//         return `{ ${Object.entries(obj)
+//           .map(([key, value]) => `${key}:${recursiveToString(value)}`)
+//           .join(" , ")} }`;
+//       }
+//       return String(obj); 
+//     };
+//     return recursiveToString(object);
+//   };
+//   const obj2str = (object) => {
+//     const recursiveToString = (obj, indentLevel = 0) => {
+//       const indent = '  '.repeat(indentLevel);
+//       const nextIndent = '  '.repeat(indentLevel + 1);
+//       if(Array.isArray(obj)) return arr2str(obj, indentLevel);
+//       if(obj instanceof Complex || obj instanceof Matrix) return obj.toString();
+//       if (typeof obj === 'object' && obj !== null) {
+//         const entries = Object.entries(obj)
+//           .map(([key, value]) => `${nextIndent}${key}: ${recursiveToString(value, indentLevel + 1)}`)
+//           .join(",\n");
+  
+//         return `{\n${entries}\n${indent}}`;
+//       }
+  
+//       return String(obj);
+//     };
+  
+//     return recursiveToString(object);
+//   };
+// const obj2str = (object, useIndentation = true, indentLevel = 0) => {
+//     const recursiveToString = (obj, level = 0) => {
+//       const indent = useIndentation ? '  '.repeat(level) : '';
+//       const nextIndent = useIndentation ? '  '.repeat(level + 1) : '';
+//     if (Array.isArray(obj)) return arr2str(obj, false, level);
+//     if(obj instanceof Complex || obj instanceof Matrix) return obj.toString();
+//     if (typeof obj === 'object' && obj !== null) {
+//         const entries = Object.entries(obj)
+//           .map(([key, value]) => useIndentation 
+//             ? `${nextIndent}${key}: ${recursiveToString(value, level + 1)}` 
+//             : `${key}: ${recursiveToString(value, level + 1)}`
+//           ).join(useIndentation ? ",\n" : ", ");
+  
+//         return useIndentation 
+//           ? `{\n${entries}\n${indent}}` 
+//           : `{${entries}}`;
+//       }
+  
+//       return String(obj);
+//     };
+  
+//     return recursiveToString(object, indentLevel);
+//   };
+
+const obj2str=(obj)=>JSON.stringify(
+  mapfun$1(n=>{
+    if(["number","string","boolean","bigint"].includes(typeof n)) return String(n);
+    if(n instanceof Complex || n instanceof Matrix) return n.toString();
+    if(n instanceof Array) return arr2str(n)
+  },
+  obj), null, "  ")
+  .replace(/"([^"]+)":/g, '$1:') // Remove Quotes from Keys 
+  .replace(/: "([^"]+)"/g, ': $1'); // Remove Quotes from str values
+
+const getMaxDepth = arr=> {
+  if (!Array.isArray(arr)) return 0;
+  let maxDepth = 1;
+  for (const element of arr) {
+    if (Array.isArray(element)) {
+      const depth = getMaxDepth(element);
+      if (depth + 1 > maxDepth) {
+        maxDepth = depth + 1;
       }
-      else this.setValue(value);
-    }
-    setValue(str = "") {
-      this.element.value = str;
-      return this;
-    }
-    setText(text=""){
-      if(text)this.element.textContent=text;
-      return this;
     }
-}
-let ZikoUIInputDatalist$1 = class ZikoUIInputDatalist extends ZikoUIElement {
-  constructor(...options){
-    super();
-    this.element = document?.createElement("datalist");
-    this.addOptions(...options).setId("ziko-datalist-id"+Random.string(10));
-  }
-  get isDatalist(){
-    return true;
-  }
-  addOptions(...options) {
-    options.map((n) => this.append(new ZikoUIInputOption(n)));
-    return this;
   }
+  return maxDepth;
 };
-
-const datalist = (...options) => new ZikoUIInputDatalist$1(...options);
-
-class ZikoUISelect extends ZikoUIElement {
-    constructor(){
-      super();
-      this.element=document?.createElement("select");
-    }
-    addOptions(...options) {
-      options.map(n => this.append(new ZikoUIInputOption(n)));
-      return this;
-    }
-    get isSelect(){
-      return true;
+const arr2str = (arr) => {
+  let level = 0;
+  function arrStringify(arr) {
+    let max = getMaxDepth(arr);
+    let useIdentation = 0;
+    if (arr.some((n) => Array.isArray(n))) {
+      level++;
+      useIdentation = 1;   
     }
+    return (
+      "[" +
+      arr.map((n, i) => {
+        if (["number", "string", "boolean", "bigint"].includes(typeof n))
+          return String(n);
+        if (n instanceof Complex) return n.toString();
+        if (n instanceof Array) {
+          return `\n${"  ".repeat(level)}${arrStringify(n)}${i === arr.length - 1 ? "\n" : ""}`;
+        }
+        if( n instanceof Object) return obj2str(n);
+      }) 
+      + `${"  ".repeat((max+level+1) * useIdentation)}]` 
+    );
   }
-const select=()=>new ZikoUISelect();
-
-class ZikoUITextArea extends ZikoUIElement {
-    constructor() {
-      super();
-      this.element = document?.createElement("textarea");
-    }
-    get value(){
-      return this.element.textContent;
-    }
-    get isTextArea(){
-      return true;
-    }
-}
-const textarea =()=> new ZikoUITextArea();
+  return arrStringify(arr);
+};
 
-class ZikoUIFlex extends ZikoUIElement {
-  constructor(tag = "div", w = "100%", h = "100%") {
-    super(tag ,"Flex");
-    this.direction = "cols";
-    if (typeof w == "number") w += "%";
-    if (typeof h == "number") h += "%";
-    this.style({ width: w, height: h });
-    this.style({ display: "flex" });
-    // this.render();
-  }
-  get isFlex(){
-    return true;
-  }
-  resp(px,wrap = true) {
-    this.wrap(wrap);
-    if (this.element.clientWidth < px) this.vertical();
-    else this.horizontal();
-    return this;
-  }
-  setSpaceAround() {
-    this.style({ justifyContent: "space-around" });
-    return this;
-  }
-  setSpaceBetween() {
-    this.style({ justifyContent: "space-between" });
-    return this;
-  }
-  setBaseline() {
-    this.style({ alignItems: "baseline" });
-    return this;
-  }
-  gap(g) {
-    if (this.direction === "row") this.style({ columnGap: g });
-    else if (this.direction === "column") this.style({ rowGap: g });
-    return this;
-  }
-  wrap(value = "wrap") {
-    const values = ["no-wrap", "wrap","wrap-reverse"];
-    this.style({
-      flexWrap: typeof value === "string" ? value : values[+value],
-    });
-    return this;
-  }
-  _justifyContent(align = "center") {
-    this.style({ justifyContent: align });
-    return this;
-  }
-  vertical(x, y, order=1) {
-    set_vertical.call(this,order);
-    this.style({
-      alignItems: typeof(x)==="number"?map_pos_x.call(this,x):x,
-      justifyContent: typeof(y)=="number"?map_pos_y.call(this,y):y
-    });
-    return this;
-  }
-  horizontal(x, y, order=1) {
-    set_horizontal.call(this,order);
-    this.style({
-      alignItems: typeof(y)=="number"?map_pos_y.call(this,y):y,
-      justifyContent: typeof(x)==="number"?map_pos_x.call(this,x):x
-    });
-    return this;
-  }
-  show() {
-    this.isHidden = false;
-    this.style({ display: "flex" });
-    return this;
-  }
-}
+const json2css=(json, indentLevel = 0)=>{
+    json = trimKeys(json);
+    let cssText = '';
+    const indent = '  '.repeat(indentLevel); 
 
-const Flex = (...ZikoUIElement) =>{
-  let tag="div";
-  if(typeof ZikoUIElement[0]==="string"){
-    tag=ZikoUIElement[0];
-    ZikoUIElement.pop();
-  }
-  return new ZikoUIFlex(tag).append(...ZikoUIElement);
+    for (let selector in json) {
+        if (typeof json[selector] === 'object') {
+            cssText += `${indent}${selector} {\n`;
+            const properties = json[selector];
+            for (let property in properties) {
+                if (typeof properties[property] === 'object') {
+                    cssText += json2css({ [property]: properties[property] }, indentLevel + 1);
+                } else {
+                    cssText += `${indent}  ${property.replace(/[A-Z]/g, match => '-' + match.toLowerCase())}: ${properties[property]};\n`;
+                }
+            }
+
+            cssText += `${indent}}\n`; 
+        }
+    }
+
+    return cssText;
 };
-function set_vertical(direction){
-  direction == 1
-    ? this.style({ flexDirection: "column" })
-    : direction == -1 && this.style({ flexDirection: "column-reverse" });
-  return this;
-}
-function set_horizontal(direction){
-direction == 1
-    ? this.style({ flexDirection: "row" })
-    : direction == -1 && this.style({ flexDirection: "row-reverse" });
-  return this;
-}
-function map_pos_x(align){
-let pos = ["flex-start", "center", "flex-end"];
-if (typeof align === "number") align = pos[align + 1];
-return align;
-}
-function map_pos_y(align){
-return map_pos_x(-align);
+function trimKeys(obj) {
+    if (typeof obj !== 'object' || obj === null) {
+        return obj; 
+    }
+
+    return Object.keys(obj).reduce((acc, key) => {
+        const trimmedKey = key.trim();
+        acc[trimmedKey] = trimKeys(obj[key]);
+        return acc;
+    }, Array.isArray(obj) ? [] : {});
 }
 
-var Flex$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Flex: Flex,
-  ZikoUIFlex: ZikoUIFlex
-});
+const Patterns={
+    isDigit: /^\d+$/,
+    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 ZikoUIForm extends ZikoUIFlex{
-    constructor(...items){
-        super("form", "Form");
-        this.append(...items);
-        this.setMethod("POST");
-        this.setAction("/");
+class Str{
+    constructor(string){
+        this.string=string;
     }
-    setAction(action = "/"){
-        this.setAttr("action", action);
-        return this;
+    isDigit() {
+        return Patterns.isDigit.test(this.string);
     }
-    setMethod(method = "post"){
-        this.setAttr("method", method);
-        return this;
+    static isDigit(string){
+        return new Str(string).isDigit();
     }
-    get data(){
-        let formData = new FormData(this.element);
-        this.items.forEach(n=>{
-            if(n.isInput||n.isSelect||n.isTextarea)formData.append(n.element.name, n.value);
-        });
-        return formData;
+    isNumber() {
+        return !isNaN(this.string);
     }
-    sendFormData(){
-        fetch(this.element.action, {
-            method: this.element.method,
-            body: this.data
-          })
-          .then(response => response.json())
-          .then(data => console.log(data))
-          .catch(error => console.error('Error:', error));
-        return this;
+    static isNumber(string){
+        return new Str(string).isNumber();
     }
-    getByName(name){
-        return this.data.get(name);
+    isUrl(){
+        return Patterns.isURL.test(this.string);
     }
-}
-const Form = (...items) => new ZikoUIForm(...items);
-
-var Io = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Form: Form,
-  ZikoUIForm: ZikoUIForm,
-  ZikoUIInput: ZikoUIInput,
-  ZikoUIInputCheckbox: ZikoUIInputCheckbox,
-  ZikoUIInputColor: ZikoUIInputColor,
-  ZikoUIInputDatalist: ZikoUIInputDatalist$1,
-  ZikoUIInputDate: ZikoUIInputDate,
-  ZikoUIInputDateTime: ZikoUIInputDateTime,
-  ZikoUIInputEmail: ZikoUIInputEmail,
-  ZikoUIInputImage: ZikoUIInputImage,
-  ZikoUIInputNumber: ZikoUIInputNumber,
-  ZikoUIInputOption: ZikoUIInputOption,
-  ZikoUIInputPassword: ZikoUIInputPassword,
-  ZikoUIInputRadio: ZikoUIInputRadio,
-  ZikoUIInputSearch: ZikoUIInputSearch,
-  ZikoUIInputSlider: ZikoUIInputSlider$1,
-  ZikoUIInputTime: ZikoUIInputTime,
-  ZikoUILabel: ZikoUILabel,
-  ZikoUISelect: ZikoUISelect,
-  ZikoUITextArea: ZikoUITextArea,
-  checkbox: checkbox,
-  datalist: datalist,
-  input: input,
-  inputCamera: inputCamera,
-  inputColor: inputColor,
-  inputDate: inputDate,
-  inputDateTime: inputDateTime,
-  inputEmail: inputEmail,
-  inputImage: inputImage,
-  inputNumber: inputNumber,
-  inputPassword: inputPassword,
-  inputTime: inputTime,
-  radio: radio,
-  search: search,
-  select: select,
-  slider: slider,
-  textarea: textarea
-});
-
-class ZikoUITr extends ZikoUIElement{
-    constructor(...ZikoUIElement){
-        super();
-        this.element=document?.createElement("Tr");
-        this.append(...ZikoUIElement);
+    static isUrl(string){
+        return new Str(string).isUrl();
     }
-}
-class ZikoUITd extends ZikoUIElement{
-    constructor(...ZikoUIElement){
-        super();
-        this.element=document?.createElement("Td");
-        this.append(...ZikoUIElement);
+    isHexColor(){
+        return Patterns.isHexColor.test(this.string);
     }
-}
-class ZikoUIThead extends ZikoUIElement{
-    constructor(...ZikoUITr){
-        super();
-        this.element=document?.createElement("Thead");
-        this.append(...ZikoUITr);
+    static isHexColor(string){
+        return new Str(string).isHexColor();
     }
-}
-class ZikoUITbody extends ZikoUIElement{
-    constructor(...ZikoUITr){
-        super();
-        this.element=document?.createElement("Tbody");
-        this.append(...ZikoUITr);
+    isIPv4(){
+        return Patterns.isIPv4.test(this.string);
     }
-}
-class ZikoUICaption extends ZikoUIElement{
-    constructor(ZikoUIElement){
-        super();
-        this.element=document?.createElement("Caption");
-        this.append(ZikoUIElement);
+    static isIPv4(string){
+        return new Str(string).isIPv4();
     }
-}
-
-const tr=(...ZikoUIElement)=>new ZikoUITr(...ZikoUIElement);
-const td=(...UI)=>{
-    UI=UI.map(n=>{
-        if(!(n instanceof ZikoUIElement))n=text(n);
-        return n
-    });
-    return new ZikoUITd(...UI)
-};
-const thead=(...ZikoUITd)=>{
-    ZikoUITd=ZikoUITd.map(n=>{
-        if(!(n instanceof ZikoUIElement))n=td(n);
-        return n
-    });
-    return new ZikoUIThead(...UI)
-};
-const tbody=(...ZikoUITr)=>new ZikoUITbody(...ZikoUITr);
-const caption=(ZikoUITr)=>new ZikoUICaption(ZikoUITr);
-
-const MatrixToTableUI=matrix=>{
-    var Tr = new Array(matrix.rows).fill(null).map(() => tr());
-    var Td = matrix.arr.map((n) => n.map(() => null));
-    for (let i = 0; i < Td.length; i++) {
-        for (let j = 0; j < Td[0].length; j++) {
-            Td[i][j] = td(matrix.arr[i][j]);
-            Tr[i].append(Td[i][j]);
-        }
+    isDate(){
+        return Patterns.isDate.test(this.string);
     }
-    return Tr
-};
-
-class ZikoUITable extends ZikoUIElement {
-    constructor(body,{caption=null,head=null,foot=null}={}){
-        super("table","Table");
-        this.structure={
-            caption,
-            head,
-            body:null,
-            foot
-        };
-        if(body)this.fromMatrix(body);
-        if(caption)this.setCaption(caption);
+    static isDate(string){
+        return new Str(string).isDate();
     }
-    get isTable(){
-        return true;
-      }
-    get caption(){
-        return this.structure.caption;
+    isMACAddress(){
+        return Patterns.isMACAddress.test(this.string);
     }
-    get header(){
-
+    static isMACAddress(string){
+        return new Str(string).isMACAddress();
     }
-    get body(){
-
+    isPascalCase(){
+        if (this.string.length === 0) return false;
+        const PascalCasePattern = /^[A-Z][a-zA-Z0-9]*$/;
+        return PascalCasePattern.test(this.string);
     }
-    get footer(){
-
+    static isPascalCase(string){
+        return new Str(string).isPascalCase();
     }
-    setCaption(c){
-        this.removeCaption();
-        this.structure.caption=caption(c);
-        this.append(this.structure.caption);
-        return this;
+    isCamelCase() {
+        if (this.string.length === 0) return false;        
+        const camelCasePattern = /^[a-z][a-zA-Z0-9]*$/;
+        return camelCasePattern.test(this.string);
     }
-    removeCaption(){
-        if(this.structure.caption)this.removeItem(...this.items.filter(n=>n instanceof ZikoUICaption));
-        this.structure.caption=null;
-        return this;
+    static isCamelCase(string){
+        return new Str(string).isCamelCase();
     }
-    setHeader(...c){
-        this.tHead=thead(...c);
-        this.append(this.tHead);
-        return this;
+    isHyphenCase(){
+        return this.string.split('-').length > 1;
     }
-    removeHeader(){
-        this.removeItem(...this.items.filter(n=>n instanceof ZikoUICaption));
-        return this;
+    static isHyphenCase(string){
+        return new Str(string).isHyphenCase();
     }
-    setFooter(c){
-        this.structure.caption=caption(c);
-        this.append(this.structure.caption);
-        return this;
+    isSnakeCase(){
+        return this.string.split('_').length > 1;
     }
-    removeFooter(){
-        this.removeItem(...this.items.filter(n=>n instanceof ZikoUICaption));
-        return this;
+    static isSnakeCase(string){
+        return new Str(string).isSnakeCase();
     }
-    fromMatrix(bodyMatrix) {
-        (bodyMatrix instanceof Array)?this.bodyMatrix=matrix(bodyMatrix):this.bodyMatrix=bodyMatrix;
-        if(this.structure.body)this.remove(this.structure.body);
-        this.structure.body=tbody();
-        this.append(this.structure.body);
-        this.structure.body.append(...MatrixToTableUI(this.bodyMatrix));
-        //this.structure.body.append(...MatrixToTableUI(matrix))
-        //this.cellStyles({ padding: "0.2rem 0.4rem", textAlign: "center" });
-        return this;
-      }
-    transpose() {
-        this.fromMatrix(this.bodyMatrix.T);
-        return this;
-      }
-    hstack(m) {
-        if(m instanceof ZikoUITable)m=m.bodyMatrix;
-        this.fromMatrix(this.bodyMatrix.clone.hstack(m));
-        return this;
+    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;
     }
-    vstack(m) {
-        if(m instanceof ZikoUITable)m=m.bodyMatrix;
-        this.fromMatrix(this.bodyMatrix.clone.vstack(m));
-        return this;
+    static isPalindrome(string){
+        return new Str(string).isPalindrome();
     }
-    slice(r0=0,c0=0,r1=this.bodyMatrix.rows-1,c1=this.bodyMatrix.cols-1) {
-        this.fromMatrix(this.bodyMatrix.slice(r0,c0,r1,c1));
-        return this;
-      }
-    sortByCols(n, config = { type: "num", order: "asc" }) {
-        this.fromMatrix(this.bodyMatrix.clone.sortTable(n, config));
-        return this;
+    static isAnagrams(word,words){
+        word=word.split("").sort();
+        words=words.split("").sort();
+        return JSON.stringify(word)===JSON.stringify(words);
     }
-    sortByRows(n, config = { type: "num", order: "asc" }) {
-        this.fromMatrix(this.bodyMatrix.T.clone.sortTable(n, config).T);
-        return this;
+    isIsogram(){
+        return [...new Set(this.string.toLowerCase())].length===this.string.length; 
     }
-    filterByRows(item) {
-        this.fromMatrix(this.bodyMatrix.clone.filterByRows(item));
-        return this;
+    static isIsogram(string){
+       return  new Str(string).isIsogram();
     }
-    filterByCols(item) {
-        this.fromMatrix(this.bodyMatrix.clone.filterByCols(item));
-        return this;
-      }
-    forEachRow(callback){
-        this.structure.body.forEach(callback);
-        return this;
+    static camel2hyphencase(text) {
+        return text.replace(/[A-Z]/g, match => '-' + match.toLowerCase());
     }
-    forEachItem(callback){
-        this.structure.body.forEach(n=>n.forEach(callback));
-        return this;
+    static camel2snakecase(text) {
+        return text.replace(/[A-Z]/g, match => '_' + match.toLowerCase());
     }
-}
-const Table$1=(matrix,config)=>new ZikoUITable(matrix,config);
-
-var Table = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Table: Table$1
-});
-
-const elements = ['Main', 'Header', 'Nav', 'Section', 'Article', 'Aside', 'Footer'];
-
-// Storage for Classes and component functions
-const Classes = {};
-const Components = {};
-
-// Auto-generate Classes and factory functions
-for (let i=0; i<elements.length; i++) {
-  Classes[`ZikoUI${elements[i]}`] = class extends ZikoUIElement {
-    constructor() {
-      super(elements[i].toLowerCase());
-      this.style({ position: "relative" });
+    static camel2pascalcase(text) {
+        return text.charAt(0).toUpperCase() + text.slice(1);
     }
-    get [`is${elements[i]}`]() {
-      return true;
+    static camel2constantcase(text) {
+        return text.replace(/[A-Z]/g, match => '_' + match).toUpperCase();
     }
-  };
-
-  Components[elements[i]] = (...children) =>
-    new Classes[`ZikoUI${elements[i]}`]().append(...children);
-}
-
-const {
-  Main,
-  Header,
-  Nav,
-  Section,
-  Article,
-  Aside,
-  Footer
-} = Components;
-
-const {
-  ZikoUIMain,
-  ZikoUIHeader,
-  ZikoUINav,
-  ZikoUISection,
-  ZikoUIArticle,
-  ZikoUIAside,
-  ZikoUIFooter
-} = Classes;
-
-var Semantic = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Article: Article,
-  Aside: Aside,
-  Footer: Footer,
-  Header: Header,
-  Main: Main,
-  Nav: Nav,
-  Section: Section,
-  ZikoUIArticle: ZikoUIArticle,
-  ZikoUIAside: ZikoUIAside,
-  ZikoUIFooter: ZikoUIFooter,
-  ZikoUIHeader: ZikoUIHeader,
-  ZikoUIMain: ZikoUIMain,
-  ZikoUINav: ZikoUINav,
-  ZikoUISection: ZikoUISection
-});
-
-class ZikoUIGrid extends ZikoUIElement {
-    constructor(tag ="div", w = "50vw", h = "50vh") {
-      super(tag,"Grid");
-      this.direction = "cols";
-      if (typeof w == "number") w += "%";
-      if (typeof h == "number") h += "%";
-      this.style({ border: "1px solid black", width: w, height: h });
-      this.style({ display: "grid" });
-    //   this.render();
+    static pascal2snakecase(text) {
+        return text.replace(/([A-Z])/g, (match, offset) => offset ? '_' + match.toLowerCase() : match.toLowerCase());
     }
-    get isGird(){
-        return true;
-      }
-    columns(n) {
-        let temp = "";
-        for (let i = 0; i < n; i++) temp = temp.concat(" auto");
-        this.#templateColumns(temp);
-        return this;
+    static pascal2hyphencase(text) {
+        return text.replace(/([A-Z])/g, (match, offset) => offset ? '-' + match.toLowerCase() : match.toLowerCase());
     }
-    #templateColumns(temp = "auto auto") {
-        this.style({ gridTemplateColumns: temp });
-        return this;
+    static pascal2camelcase(text) {
+        return text.charAt(0).toLowerCase() + text.slice(1);
     }
-    gap(w = 10, h = w) {
-        if(typeof (w) === "number")w += "px";
-        if(typeof (h) === "number")h += "px";
-        this.style({gridColumnGap: w,gridRowGap: h});
-        return this;
+    static pascal2constantcase(text) {
+        return text.replace(/([A-Z])/g, (match, offset) => offset ? '_' + match : match).toUpperCase();
     }
-}
-const Grid$1 = (...ZikoUIElement) => new ZikoUIGrid("div").append(...ZikoUIElement);
-
-var Grid$2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Grid: Grid$1,
-  ZikoUIGrid: ZikoUIGrid
-});
-
-const HTMLTags = [
-  'a',
-  'abb',
-  'address',
-  'area',
-  'article',
-  'aside',
-  'audio',
-  'b',
-  'base',
-  'bdi',
-  'bdo',
-  'blockquote',
-  'br',
-  'button',
-  'canvas',
-  'caption',
-  'cite',
-  'code',
-  'col',
-  'colgroup',
-  'data',
-  'datalist',
-  'dd',
-  'del',
-  'details',
-  'dfn',
-  'dialog',
-  'div',
-  'dl',
-  'dt',
-  'em',
-  'embed',
-  'fieldset',
-  'figcaption',
-  'figure',
-  'footer',
-  'form',
-  'h1',
-  'h2',
-  'h3',
-  'h4',
-  'h5',
-  'h6',
-  'header',
-  'hgroup',
-  'hr',
-  'i',
-  'iframe',
-  'img',
-  'ipnut',
-  'ins',
-  'kbd',
-  'label',
-  'legend',
-  'li',
-  'main',
-  'map',
-  'mark',
-  'menu',
-  'meter',
-  'nav',
-  'object',
-  'ol',
-  'optgroup',
-  'option',
-  'output',
-  'p',
-  'param',
-  'picture',
-  'pre',
-  'progress',
-  'q',
-  'rp',
-  'rt',
-  'ruby',
-  's',
-  'samp',
-  'search',
-  'section',
-  'select',
-  'small',
-  'source',
-  'span',
-  'strong',
-  'sub',
-  'summary',
-  'sup',
-  'svg',
-  'table',
-  'tbody',
-  'td',
-  'template',
-  'textarea',
-  'tfoot',
-  'th',
-  'thead',
-  'time',
-  'title',
-  'tr',
-  'track',
-  'u',
-  'ul',
-  'var',
-  'video',
-  'wbr'
-];
-
-const SVGTags = [
-    "svg", "g", "defs", "symbol", "use", "image", "switch",
-    "rect", "circle", "ellipse", "line", "polyline", "polygon", "path",
-    "text", "tspan", "textPath", "altGlyph", "altGlyphDef", "altGlyphItem", "glyph", "glyphRef",
-    "linearGradient", "radialGradient", "pattern", "solidColor",
-    "filter", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix",
-    "feDiffuseLighting", "feDisplacementMap", "feDropShadow", "feFlood", "feFuncA", "feFuncR", "feFuncG", "feFuncB",
-    "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "feSpecularLighting",
-    "feTile", "feTurbulence",
-    "animate", "animateMotion", "animateTransform", "set",
-    "script",
-    "desc", "title", "metadata", "foreignObject"
-  ];
-
-const tags = new Proxy({}, {
-  get(target, prop) {
-    if (typeof prop !== 'string') return undefined;
-    let tag = prop.replaceAll("_","-").toLowerCase();
-    if(HTMLTags.includes(tag)) return (...args)=>{
-      if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
-        let attributes = args.shift();
-        console.log(args);
-        return new ZikoUIElement(tag).setAttr(attributes).append(...args)
-      }
-      return new ZikoUIElement(tag).append(...args);
+    static snake2camelcase(text) {
+        return text.replace(/(_\w)/g, match => match[1].toUpperCase());
     }
-    if(SVGTags.includes(tag)) return (...args)=>new ZikoUIElement(tag,"",{el_type : "svg"}).append(...args);
-    return (...args)=>{
-      if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
-        let attributes = args.shift();
-        return new ZikoUIElement(tag).setAttr(attributes).append(...args)
-      }
-      return new ZikoUIElement(tag).append(...args);
+    static snake2hyphencase(text) {
+        return text.replace(/_/g, "-");
     }
-    // switch(tag){
-    //   case "html"  : globalThis?.document?.createElement("html")
-    //   case "head"  :
-    //   case "style" :
-    //   case "link"  :
-    //   case "meta"  :
-    //   case "srcipt":
-    //   case "body"  : return null; break;
-    //   default : return new ZikoUIElement(tag);
-    // }
-  }
-});
-
-const UI$1 = {
-    ...Text$1,
-    ...List,
-    ...Io,
-    ...Media,
-    ...Table,
-    ...Semantic,
-    ...Misc,
-    ...Flex$1,
-    ...Grid$2,
-    ZikoUIElement,
-};
-
-const svg2str=svg=>(new XMLSerializer()).serializeToString(svg);
-const svg2ascii=svg=>btoa(svg2str(svg));
-const svg2imgUrl=svg=>'data:image/svg+xml;base64,'+svg2ascii(svg);
-const svg2img=(svg,render=true)=>image(svg2imgUrl(svg)).render(render);
+    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 obj2str=(object)=>{
-//     const recursiveToString = (obj) => {
-//       if (Array.isArray(obj)) return arr2str(obj);
-//       if (typeof obj === 'object' && obj !== null) {
-//         return `{ ${Object.entries(obj)
-//           .map(([key, value]) => `${key}:${recursiveToString(value)}`)
-//           .join(" , ")} }`;
-//       }
-//       return String(obj); 
-//     };
-//     return recursiveToString(object);
-//   };
-//   const obj2str = (object) => {
-//     const recursiveToString = (obj, indentLevel = 0) => {
-//       const indent = '  '.repeat(indentLevel);
-//       const nextIndent = '  '.repeat(indentLevel + 1);
-//       if(Array.isArray(obj)) return arr2str(obj, indentLevel);
-//       if(obj instanceof Complex || obj instanceof Matrix) return obj.toString();
-//       if (typeof obj === 'object' && obj !== null) {
-//         const entries = Object.entries(obj)
-//           .map(([key, value]) => `${nextIndent}${key}: ${recursiveToString(value, indentLevel + 1)}`)
-//           .join(",\n");
-  
-//         return `{\n${entries}\n${indent}}`;
-//       }
-  
-//       return String(obj);
-//     };
-  
-//     return recursiveToString(object);
-//   };
-// const obj2str = (object, useIndentation = true, indentLevel = 0) => {
-//     const recursiveToString = (obj, level = 0) => {
-//       const indent = useIndentation ? '  '.repeat(level) : '';
-//       const nextIndent = useIndentation ? '  '.repeat(level + 1) : '';
-//     if (Array.isArray(obj)) return arr2str(obj, false, level);
-//     if(obj instanceof Complex || obj instanceof Matrix) return obj.toString();
-//     if (typeof obj === 'object' && obj !== null) {
-//         const entries = Object.entries(obj)
-//           .map(([key, value]) => useIndentation 
-//             ? `${nextIndent}${key}: ${recursiveToString(value, level + 1)}` 
-//             : `${key}: ${recursiveToString(value, level + 1)}`
-//           ).join(useIndentation ? ",\n" : ", ");
-  
-//         return useIndentation 
-//           ? `{\n${entries}\n${indent}}` 
-//           : `{${entries}}`;
-//       }
-  
-//       return String(obj);
-//     };
-  
-//     return recursiveToString(object, indentLevel);
-//   };
-
-const obj2str=(obj)=>JSON.stringify(
-  mapfun$1(n=>{
-    if(["number","string","boolean","bigint"].includes(typeof n)) return String(n);
-    if(n instanceof Complex || n instanceof Matrix) return n.toString();
-    if(n instanceof Array) return arr2str(n)
-  },
-  obj), null, "  ")
-  .replace(/"([^"]+)":/g, '$1:') // Remove Quotes from Keys 
-  .replace(/: "([^"]+)"/g, ': $1'); // Remove Quotes from str values
-
-const getMaxDepth = arr=> {
-  if (!Array.isArray(arr)) return 0;
-  let maxDepth = 1;
-  for (const element of arr) {
-    if (Array.isArray(element)) {
-      const depth = getMaxDepth(element);
-      if (depth + 1 > maxDepth) {
-        maxDepth = depth + 1;
-      }
-    }
-  }
-  return maxDepth;
-};
-const arr2str = (arr) => {
-  let level = 0;
-  function arrStringify(arr) {
-    let max = getMaxDepth(arr);
-    let useIdentation = 0;
-    if (arr.some((n) => Array.isArray(n))) {
-      level++;
-      useIdentation = 1;   
-    }
-    return (
-      "[" +
-      arr.map((n, i) => {
-        if (["number", "string", "boolean", "bigint"].includes(typeof n))
-          return String(n);
-        if (n instanceof Complex) return n.toString();
-        if (n instanceof Array) {
-          return `\n${"  ".repeat(level)}${arrStringify(n)}${i === arr.length - 1 ? "\n" : ""}`;
+class Matrix extends ZikoMath{
+    constructor(rows, cols, element = [] ) {
+        super();
+        if(rows instanceof Matrix){
+            this.arr=rows.arr;
+            this.rows=rows.rows;
+            this.cols=rows.cols;
         }
-        if( n instanceof Object) return obj2str(n);
-      }) 
-      + `${"  ".repeat((max+level+1) * useIdentation)}]` 
-    );
-  }
-  return arrStringify(arr);
-};
-
-const json2css=(json, indentLevel = 0)=>{
-    json = trimKeys(json);
-    let cssText = '';
-    const indent = '  '.repeat(indentLevel); 
-
-    for (let selector in json) {
-        if (typeof json[selector] === 'object') {
-            cssText += `${indent}${selector} {\n`;
-            const properties = json[selector];
-            for (let property in properties) {
-                if (typeof properties[property] === 'object') {
-                    cssText += json2css({ [property]: properties[property] }, indentLevel + 1);
-                } else {
-                    cssText += `${indent}  ${property.replace(/[A-Z]/g, match => '-' + match.toLowerCase())}: ${properties[property]};\n`;
+        else {
+        let arr = [],
+            i,
+            j;
+        if (arguments[0] instanceof Array) {
+            rows = arguments[0].length;
+            cols = arguments[0][0].length;
+            arr = arguments[0];
+        } else {
+            for (i = 0; i < rows; i++) {
+                arr.push([]);
+                arr[i].push(new Array(cols));
+                for (j = 0; j < cols; j++) {
+                    arr[i][j] = element[i * cols + j];
+                    if (element[i * cols + j] == undefined) arr[i][j] = 0;
                 }
             }
-
-            cssText += `${indent}}\n`; 
         }
+        this.rows = rows;
+        this.cols = cols;
+        this.arr = arr;   
     }
-
-    return cssText;
-};
-function trimKeys(obj) {
-    if (typeof obj !== 'object' || obj === null) {
-        return obj; 
-    }
-
-    return Object.keys(obj).reduce((acc, key) => {
-        const trimmedKey = key.trim();
-        acc[trimmedKey] = trimKeys(obj[key]);
-        return acc;
-    }, Array.isArray(obj) ? [] : {});
-}
-
-// export { markdown2html } from "./markdown.js";
-// export { adoc2html } from "./adoc.js";
-
-var Converter = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  arr2str: arr2str,
-  csv2arr: csv2arr,
-  csv2json: csv2json,
-  csv2matrix: csv2matrix,
-  csv2object: csv2object,
-  csv2sql: csv2sql,
-  json2arr: json2arr,
-  json2css: json2css,
-  json2csv: json2csv,
-  json2csvFile: json2csvFile,
-  json2xml: json2xml,
-  json2xmlFile: json2xmlFile,
-  json2yml: json2yml,
-  json2ymlFile: json2ymlFile,
-  obj2str: obj2str,
-  svg2ascii: svg2ascii,
-  svg2img: svg2img,
-  svg2imgUrl: svg2imgUrl,
-  svg2str: svg2str
-});
-
-var Parser = /*#__PURE__*/Object.freeze({
-  __proto__: null
-});
-
-const Patterns={
-    isDigit: /^\d+$/,
-    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);
+    this.#maintain();
+        //Object.seal(this);
     }
-    static isDigit(string){
-        return new Str(string).isDigit();
+    toString(){
+        return arr2str(this.arr);
     }
-    isNumber() {
-        return !isNaN(this.string);
+    at(i=0,j=undefined){
+        if(i<0)i=this.rows+i;
+        if(j==undefined) return this.arr[i];
+        if(j<0)j=this.cols+j;
+        return this.arr[i][j];
     }
-    static isNumber(string){
-        return new Str(string).isNumber();
+    reshape(newRows, newCols) {
+        let check = newRows * newCols === this.rows * this.cols;
+        if (check) return new Matrix(newRows, newCols, this.arr.flat(1));
+        else console.error("Err");
     }
-    isUrl(){
-        return Patterns.isURL.test(this.string);
+    static eye(size) {
+        let result = new Matrix(size, size);
+        for (let i = 0; i < size; i++) for (let j = 0; j < size; j++) i === j ? (result.arr[i][j] = 1) : (result.arr[i][j] = 0);
+        return result;
     }
-    static isUrl(string){
-        return new Str(string).isUrl();
+    get clone() {
+        return new Matrix(this.rows, this.cols, this.arr.flat(1));
     }
-    isHexColor(){
-        return Patterns.isHexColor.test(this.string);
+    get size() {
+        return this.rows * this.cols;
+    } 
+    get shape() {
+        return [this.rows, this.cols];
     }
-    static isHexColor(string){
-        return new Str(string).isHexColor();
+    get reel() {
+        return new Matrix(this.cols, this.rows, this.arr.flat(1).reel);
     }
-    isIPv4(){
-        return Patterns.isIPv4.test(this.string);
+    get imag() {
+        return new Matrix(this.cols, this.rows, this.arr.flat(1).imag);
     }
-    static isIPv4(string){
-        return new Str(string).isIPv4();
+    [Symbol.iterator]() {
+      return this.arr[Symbol.iterator]();
     }
-    isDate(){
-        return Patterns.isDate.test(this.string);
+    #maintain() {
+    for (let i = 0; i < this.arr.length; i++) {
+        Object.defineProperty(this, i, {
+        value: this.arr[i],
+        writable: true,
+        configurable: true,
+        enumerable: false 
+        });
+        }
     }
-    static isDate(string){
-        return new Str(string).isDate();
+    get(row = 0, col = 0) {
+        if (col == -1) return this.arr[row];
+        else if (row == -1) return this.arr.map((n) => n[col]);
+        else return this.arr[row][col];
     }
-    isMACAddress(){
-        return Patterns.isMACAddress.test(this.string);
+    set(row = 0, col = 0, value) {
+        if (col == -1) return (this.arr[row] = value);
+        else if (row == -1) {
+            for (let i = 0; i < this.cols; i++) {
+                this.arr[i][col] = value[i] || 0;
+            }
+            return this.arr;
+        }
+        return (this.arr[row][col] = value);
     }
-    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);
-
-var String$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Str: Str,
-  count: count,
-  countWords: countWords,
-  removeExtraSpace: removeExtraSpace,
-  str: str
-});
-
-const Data = {
-    ...Api,
-    ...Converter,
-    ...Parser,
-    ...String$1
-};
-
-class Matrix extends ZikoMath{
-    constructor(rows, cols, element = [] ) {
-        super();
-        if(rows instanceof Matrix){
-            this.arr=rows.arr;
-            this.rows=rows.rows;
-            this.cols=rows.cols;
-        }
-        else {
-        let arr = [],
-            i,
-            j;
-        if (arguments[0] instanceof Array) {
-            rows = arguments[0].length;
-            cols = arguments[0][0].length;
-            arr = arguments[0];
-        } else {
-            for (i = 0; i < rows; i++) {
-                arr.push([]);
-                arr[i].push(new Array(cols));
-                for (j = 0; j < cols; j++) {
-                    arr[i][j] = element[i * cols + j];
-                    if (element[i * cols + j] == undefined) arr[i][j] = 0;
-                }
-            }
-        }
-        this.rows = rows;
-        this.cols = cols;
-        this.arr = arr;   
-    }
-    this.#maintain();
-        //Object.seal(this);
-    }
-    toString(){
-        return arr2str(this.arr);
-    }
-    at(i=0,j=undefined){
-        if(i<0)i=this.rows+i;
-        if(j==undefined) return this.arr[i];
-        if(j<0)j=this.cols+j;
-        return this.arr[i][j];
-    }
-    reshape(newRows, newCols) {
-        let check = newRows * newCols === this.rows * this.cols;
-        if (check) return new Matrix(newRows, newCols, this.arr.flat(1));
-        else console.error("Err");
-    }
-    static eye(size) {
-        let result = new Matrix(size, size);
-        for (let i = 0; i < size; i++) for (let j = 0; j < size; j++) i === j ? (result.arr[i][j] = 1) : (result.arr[i][j] = 0);
-        return result;
-    }
-    get clone() {
-        return new Matrix(this.rows, this.cols, this.arr.flat(1));
-    }
-    get size() {
-        return this.rows * this.cols;
-    } 
-    get shape() {
-        return [this.rows, this.cols];
-    }
-    get reel() {
-        return new Matrix(this.cols, this.rows, this.arr.flat(1).reel);
-    }
-    get imag() {
-        return new Matrix(this.cols, this.rows, this.arr.flat(1).imag);
-    }
-    [Symbol.iterator]() {
-      return this.arr[Symbol.iterator]();
-    }
-    #maintain() {
-    for (let i = 0; i < this.arr.length; i++) {
-        Object.defineProperty(this, i, {
-        value: this.arr[i],
-        writable: true,
-        configurable: true,
-        enumerable: false 
-        });
-        }
-    }
-    get(row = 0, col = 0) {
-        if (col == -1) return this.arr[row];
-        else if (row == -1) return this.arr.map((n) => n[col]);
-        else return this.arr[row][col];
-    }
-    set(row = 0, col = 0, value) {
-        if (col == -1) return (this.arr[row] = value);
-        else if (row == -1) {
-            for (let i = 0; i < this.cols; i++) {
-                this.arr[i][col] = value[i] || 0;
-            }
-            return this.arr;
-        }
-        return (this.arr[row][col] = value);
-    }
-    get isSquare() {
-        return this.rows / this.cols === 1;
+    get isSquare() {
+        return this.rows / this.cols === 1;
     }
     get isSym() {
         if (!this.isSquare) return false;
@@ -6065,7 +4623,7 @@ class Matrix extends ZikoMath{
                     console.warn("Tensors are not completely supported yet ...");
                     return;
                 }
-                return Utils$1.sub(Utils$1.mul(M[0][0],M[1][1]),Utils$1.mul(M[0][1],M[1][0]))
+                return Utils.sub(Utils.mul(M[0][0],M[1][1]),Utils.mul(M[0][1],M[1][0]))
             }
             var answer = 0;
             for (var i = 0; i < M.length; i++) {
@@ -6076,8 +4634,8 @@ class Matrix extends ZikoMath{
                         .mul(determinat(deleteRowAndColumn(M, i)))
                 );*/
                 //const to_be_added=Utils.add(Utils.mul(pow(-1, i),Utils.mul(M[0][i],determinat(deleteRowAndColumn(M, i)))));
-                const to_be_added=Utils$1.add(Utils$1.mul(pow(-1, i),Utils$1.mul(M[0][i],determinat(deleteRowAndColumn(M, i)))));
-                answer=Utils$1.add(answer,to_be_added);
+                const to_be_added=Utils.add(Utils.mul(pow(-1, i),Utils.mul(M[0][i],determinat(deleteRowAndColumn(M, i)))));
+                answer=Utils.add(answer,to_be_added);
             }
             return answer;
         }
@@ -6148,28 +4706,28 @@ class Matrix extends ZikoMath{
         return result;
     }
     map(Imin, Imax, Fmin, Fmax) {
-        return Utils$1.map(this, Imin, Imax, Fmin, Fmax);
+        return Utils.map(this, Imin, Imax, Fmin, Fmax);
     }
     lerp(min, max) {
-        return Utils$1.lerp(this, min, max);
+        return Utils.lerp(this, min, max);
     }
     norm(min, max) {
-        return Utils$1.norm(this, min, max);
+        return Utils.norm(this, min, max);
     }
     clamp(min, max) {
-        return Utils$1.clamp(this, min, max);
+        return Utils.clamp(this, min, max);
     }
     static map(matrix, Imin, Imax, Fmin, Fmax) {
-        return Utils$1.map(matrix, Imin, Imax, Fmin, Fmax);
+        return Utils.map(matrix, Imin, Imax, Fmin, Fmax);
     }
     static lerp(matrix, min, max) {
-        return Utils$1.lerp(matrix, min, max);
+        return Utils.lerp(matrix, min, max);
     }
     static norm(matrix, min, max) {
-        return Utils$1.norm(matrix, min, max);
+        return Utils.norm(matrix, min, max);
     }
     static clamp(m, min, max) {
-        return Utils$1.clamp(matrix, min, max);
+        return Utils.clamp(matrix, min, max);
     }
     toPrecision(p) {
         for (let i = 0; i < this.cols; i++) for (let j = 0; j < this.rows; j++) this.arr[i][j] = +this.arr[i][j].toPrecision(p);
@@ -6310,14 +4868,14 @@ class Matrix extends ZikoMath{
     add(...matr) {
         for (let k = 0; k < matr.length; k++) {
             if (typeof matr[k] == "number"||matr[k] instanceof Complex) matr[k] = Matrix.nums(this.rows, this.cols, matr[k]);
-            for (let i = 0; i < this.rows; i++) for (var j = 0; j < this.cols; j++) this.arr[i][j] = Utils$1.add(this.arr[i][j],matr[k].arr[i][j]);
+            for (let i = 0; i < this.rows; i++) for (var j = 0; j < this.cols; j++) this.arr[i][j] = Utils.add(this.arr[i][j],matr[k].arr[i][j]);
         }
         return new Matrix(this.rows, this.cols, this.arr.flat(1));
     }
     sub(...matr) {
         for (let k = 0; k < matr.length; k++) {
             if (typeof matr[k] == "number") matr[k] = Matrix.nums(this.rows, this.cols, matr[k]);
-            for (let i = 0; i < this.rows; i++) for (var j = 0; j < this.cols; j++) this.arr[i][j] = Utils$1.sub(this.arr[i][j],matr[k].arr[i][j]);
+            for (let i = 0; i < this.rows; i++) for (var j = 0; j < this.cols; j++) this.arr[i][j] = Utils.sub(this.arr[i][j],matr[k].arr[i][j]);
         }
         return new Matrix(this.rows, this.cols, this.arr.flat(1));
     }
@@ -6330,14 +4888,14 @@ class Matrix extends ZikoMath{
     mul(...matr) {
         for (let k = 0; k < matr.length; k++) {
             if (typeof matr[k] == "number") matr[k] = Matrix.nums(this.rows, this.cols, matr[k]);
-            for (var i = 0; i < this.rows; i++) for (var j = 0; j < this.cols; j++) this.arr[i][j] = Utils$1.mul(this.arr[i][j],matr[k].arr[i][j]);
+            for (var i = 0; i < this.rows; i++) for (var j = 0; j < this.cols; j++) this.arr[i][j] = Utils.mul(this.arr[i][j],matr[k].arr[i][j]);
         }
         return new Matrix(this.rows, this.cols, this.arr.flat(1));
     }
     div(...matr) {
         for (let k = 0; k < matr.length; k++) {
             if (typeof matr[k] == "number") matr[k] = Matrix.nums(this.rows, this.cols, matr[k]);
-            for (let i = 0; i < this.rows; i++) for (var j = 0; j < this.cols; j++) this.arr[i][j] = Utils$1.div(this.arr[i][j],matr[k].arr[i][j]);
+            for (let i = 0; i < this.rows; i++) for (var j = 0; j < this.cols; j++) this.arr[i][j] = Utils.div(this.arr[i][j],matr[k].arr[i][j]);
         }
         return new Matrix(this.rows, this.cols, this.arr.flat(1));
     }
@@ -6350,7 +4908,7 @@ class Matrix extends ZikoMath{
     modulo(...matr) {
         for (let k = 0; k < matr.length; k++) {
             if (typeof matr[k] == "number") matr[k] = Matrix.nums(this.rows, this.cols, matr[k]);
-            for (let i = 0; i < this.rows; i++) for (var j = 0; j < this.cols; j++)this.arr[i][j]=Utils$1.modulo(this.arr[i][j],matr[k].arr[i][j]);
+            for (let i = 0; i < this.rows; i++) for (var j = 0; j < this.cols; j++)this.arr[i][j]=Utils.modulo(this.arr[i][j],matr[k].arr[i][j]);
         }
         return new Matrix(this.rows, this.cols, this.arr.flat(1));
     }
@@ -6364,9 +4922,9 @@ class Matrix extends ZikoMath{
             for (var j = 0; j < matrix.arr[0].length; j++) {
                 res[i][j] = 0;
                 for (var k = 0; k < this.arr[0].length; k++) {
-                    res[i][j] = Utils$1.add(
+                    res[i][j] = Utils.add(
                         res[i][j],
-                        Utils$1.mul(this.arr[i][k],matrix.arr[k][j])
+                        Utils.mul(this.arr[i][k],matrix.arr[k][j])
                         );
                 }
             }
@@ -6585,15 +5143,6 @@ const matrix2=(...element)=>new Matrix(2, 2, element);
 const matrix3=(...element)=>new Matrix(3, 3, element);
 const matrix4=(...element)=>new Matrix(4, 4, element);
 
-var __Matrix__ = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Matrix: Matrix,
-  matrix: matrix,
-  matrix2: matrix2,
-  matrix3: matrix3,
-  matrix4: matrix4
-});
-
 class Complex extends ZikoMath{
     constructor(a = 0, b = 0) {
         super();
@@ -6632,6 +5181,9 @@ class Complex extends ZikoMath{
             this.b = +b.toFixed(32);
         }
     }
+    isComplex(){
+        return true
+    }
     toString(){
         let str = "";
         if (this.a !== 0)
@@ -6780,12 +5332,6 @@ const complex=(a,b)=>{
     return new Complex(a,b)
 };
 
-var __Complex__ = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Complex: Complex,
-  complex: complex
-});
-
 // import { 
 //     gamma,
 //     bessel,
@@ -6839,29 +5385,29 @@ const sqrtn=(x,n)=>{
         }
     }
 };
-const e=(...x)=>mapfun$1(Math.exp,...x);
-const ln=(...x)=>mapfun$1(Math.log,...x);
-const cos=(...x)=>mapfun$1(Fixed.cos,...x);
-const sin=(...x)=>mapfun$1(Fixed.sin,...x);
-const tan=(...x)=>mapfun$1(Fixed.tan,...x);
-const sec=(...x)=>mapfun$1(Fixed.sec,...x);
-const sinc=(...x)=>mapfun$1(Fixed.sinc,...x);
-const csc=(...x)=>mapfun$1(Fixed.csc,...x);
-const cot=(...x)=>mapfun$1(Fixed.cot,...x);
-const acos=(...x)=>mapfun$1(Fixed.acos,...x);
-const asin=(...x)=>mapfun$1(Fixed.asin,...x);
-const atan=(...x)=>mapfun$1(Fixed.atan,...x);
-const acot=(...x)=>mapfun$1(Fixed.acot,...x);
-const cosh=(...x)=>mapfun$1(Fixed.cosh,...x);
-const sinh=(...x)=>mapfun$1(Fixed.sinh,...x);
-const tanh=(...x)=>mapfun$1(Fixed.tanh,...x);
-const coth=(...x)=>mapfun$1(Fixed.coth,...x);
-const acosh=(...x)=>mapfun$1(Fixed.acosh,...x);
-const asinh=(...x)=>mapfun$1(Fixed.asinh,...x);
-const atanh=(...x)=>mapfun$1(Fixed.atanh,...x);
-const ceil=(...x)=>mapfun$1(Math.ceil,...x);
-const floor=(...x)=>mapfun$1(Math.floor,...x);
-const round=(...x)=>mapfun$1(Math.round,...x);
+const e=(...x) => mapfun$1(Math.exp,...x);
+const ln=(...x) => mapfun$1(Math.log,...x);
+const cos=(...x) => mapfun$1(Fixed.cos,...x);
+const sin=(...x) => mapfun$1(Fixed.sin,...x);
+const tan=(...x) => mapfun$1(Fixed.tan,...x);
+const sec=(...x) => mapfun$1(Fixed.sec,...x);
+const sinc=(...x) => mapfun$1(Fixed.sinc,...x);
+const csc=(...x) => mapfun$1(Fixed.csc,...x);
+const cot=(...x) => mapfun$1(Fixed.cot,...x);
+const acos=(...x) => mapfun$1(Fixed.acos,...x);
+const asin=(...x) => mapfun$1(Fixed.asin,...x);
+const atan=(...x) => mapfun$1(Fixed.atan,...x);
+const acot=(...x) => mapfun$1(Fixed.acot,...x);
+const cosh=(...x) => mapfun$1(Fixed.cosh,...x);
+const sinh=(...x) => mapfun$1(Fixed.sinh,...x);
+const tanh=(...x) => mapfun$1(Fixed.tanh,...x);
+const coth=(...x) => mapfun$1(Fixed.coth,...x);
+const acosh=(...x) => mapfun$1(Fixed.acosh,...x);
+const asinh=(...x) => mapfun$1(Fixed.asinh,...x);
+const atanh=(...x) => mapfun$1(Fixed.atanh,...x);
+const ceil=(...x) => mapfun$1(Math.ceil,...x);
+const floor=(...x) => mapfun$1(Math.floor,...x);
+const round=(...x) => mapfun$1(Math.round,...x);
 const atan2=(x,y,rad=true)=>{
     if(typeof x === "number"){
         if(typeof y === "number")return rad?Math.atan2(x,y):Math.atan2(x,y)*180/Math.PI;
@@ -6902,54 +5448,6 @@ const hypot=(...x)=>{
     )
 };
 
-var __Functions__ = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  abs: abs,
-  acos: acos,
-  acosh: acosh,
-  acot: acot,
-  asin: asin,
-  asinh: asinh,
-  atan: atan,
-  atan2: atan2,
-  atanh: atanh,
-  ceil: ceil,
-  cos: cos,
-  cosh: cosh,
-  cot: cot,
-  coth: coth,
-  csc: csc,
-  e: e,
-  fact: fact,
-  floor: floor,
-  hypot: hypot,
-  ln: ln,
-  max: max,
-  min: min,
-  pow: pow,
-  round: round,
-  sec: sec,
-  sig: sig,
-  sign: sign,
-  sin: sin,
-  sinc: sinc,
-  sinh: sinh,
-  sqrt: sqrt,
-  sqrtn: sqrtn,
-  tan: tan,
-  tanh: tanh
-});
-
-const Math$1 = {
-    ...__Const__,
-    ...__Functions__,
-    ...__Complex__,
-    ...__Matrix__,
-    ...__Random__,
-    ...__Utils__,
-    ...__Discrect__,
-};
-
 class ZikoTimeLoop {
   constructor(callback, step = 1000/30, startTime=0, endTime = Infinity, started = true) {
     this.callback = callback;
@@ -7030,12 +5528,6 @@ class ZikoTimeLoop {
 const useFps = fps => 1000/fps;
 const useTimeLoop = (callback, step, startTime, endTime, started) => new ZikoTimeLoop(callback, step, startTime, endTime, started);
 
-var Animation = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  useFps: useFps,
-  useTimeLoop: useTimeLoop
-});
-
 const Ease={
     Linear:function(t){
         return t;
@@ -7180,20 +5672,6 @@ const Ease={
     }
 };
 
-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;
@@ -7236,498 +5714,102 @@ const waitForUIElm=(UIElement)=>{
   };
 
 const wait=(delayInMS)=>{
-    return new Promise((resolve) => setTimeout(resolve, delayInMS));
-};
-const timeTaken = callback => {
-    console.time('timeTaken');
-    const r = callback();
-    console.timeEnd('timeTaken');
-    return r;
-};
-
-var Utils = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Ease: Ease,
-  timeTaken: timeTaken,
-  time_memory_Taken: time_memory_Taken,
-  useDebounce: useDebounce,
-  useThrottle: useThrottle,
-  wait: wait,
-  waitForUIElm: waitForUIElm,
-  waitForUIElmSync: waitForUIElmSync
-});
-
-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 useAnimation=(callback,ease=Ease.Linear,step=50,config)=>new ZikoTimeAnimation(callback,ease=Ease.Linear,step=50,config);
-
-const Time = {
-    ...Animation,
-    ...Animation,
-    ...Utils
-};
-
-class ZikoUISvg extends ZikoUIElement {
-    constructor(w=360,h=300) {
-      super("svg","svg");
-      //this.cache={};
-      // this.setAttr("width",w);
-      // this.setAttr("height",h);
-      // this.setAttr({
-      //   width : w,
-      //   height : h
-      // })
-      this.style({border:"1px black solid"});
-      //this.view(-w/2,-h/2,w/2,h/2);
-      this.size(w, h);
-      this.view(-10,-10,10,10);
-    }
-    size(w, h){
-      this.setAttr({
-        width : w,
-        height : h
-      });
-      return this
-    }
-    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.append(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;     
-    }
-    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);
-
-var SVG = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Svg: Svg,
-  ZikoUISvg: ZikoUISvg
-});
-
-// import { convolute } from "../../math/signal/conv.js";
-class ZikoUICanvas extends ZikoUIElement{
-    constructor(w,h){
-        super("canvas","canvas");
-        this.ctx = this.element?.getContext("2d");
-        this.style({
-            border:"1px red solid",
-        });
-        this.transformMatrix=new Matrix([
-            [1,0,0],
-            [0,1,0],
-            [0,0,1]
-        ]);
-        this.axisMatrix=new Matrix([
-            [-10,-10],
-            [10,10]
-        ]);
-        // setTimeout(()=>this.resize(w,h),0);
-        requestAnimationFrame(()=>this.resize(w,h),0);
-        this.on("sizeupdated",()=>this.adjust());
-    }
-    get Xmin(){
-        return this.axisMatrix[0][0];
-    }
-    get Ymin(){
-        return this.axisMatrix[0][1];
-    }
-    get Xmax(){
-        return this.axisMatrix[1][0];
-    }
-    get Ymax(){
-        return this.axisMatrix[1][1];
-    }
-    get ImageData(){
-        return this.ctx.getImageData(0,0,c.Width,c.Height);
-    }
-    draw(all=true){
-        if(all){
-            this.clear();  
-            this.items.forEach(element => {
-                element.parent=this;
-                element.draw(this.ctx);
-            });
-        }
-        else {
-            this.items.at(-1).parent=this;
-            this.items.at(-1).draw(this.ctx);
-        }
-        this.maintain();
-        return this;
-    }
-    applyTransformMatrix(){
-        this.ctx.setTransform(
-            this.transformMatrix[0][0],
-            this.transformMatrix[1][0],
-            this.transformMatrix[0][1],
-            this.transformMatrix[1][1],
-            this.transformMatrix[0][2],
-            this.transformMatrix[1][2],
-        );
-        return this;
-    }
-    resize(w,h){
-        this.size(w,h);
-        this.lineWidth();
-        this.view(this.axisMatrix[0][0], this.axisMatrix[0][1], this.axisMatrix[1][0], this.axisMatrix[1][1]);
-        this.emit("sizeupdated");
-        return this;
-    }
-    adjust(){
-        this.element.width =this.element?.getBoundingClientRect().width;
-        this.element.height =this.element?.getBoundingClientRect().height;
-        this.view(this.axisMatrix[0][0], this.axisMatrix[0][1], this.axisMatrix[1][0], this.axisMatrix[1][1]);
-        return this;
-    }
-    view(xMin,yMin,xMax,yMax){
-        this.transformMatrix[0][0]=this.width/(xMax-xMin); // scaleX
-        this.transformMatrix[1][1]=-this.height/(yMax-yMin); // scaleY
-        this.transformMatrix[0][2]=this.width/2;
-        this.transformMatrix[1][2]=this.height/2;
-        this.axisMatrix=new Matrix([
-            [xMin,yMin],
-            [xMax,yMax]
-        ]);
-        
-        this.applyTransformMatrix(); 
-        this.clear();
-        this.lineWidth(1);
-        this.draw();
-        return this;
-    }
-    reset(){
-        this.ctx.setTransform(1,0,0,0,0,0);
-        return this;
-    }
-    append(element){
-        this.items.push(element);
-        this.draw(false);
-        return this;
-    }
-    background(color){
-        this.ctx.fillStyle = color;
-        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
-        this.ctx.fillRect(0, 0, this.width, this.height);
-        this.applyTransformMatrix();
-        this.draw();
-    }
-    lineWidth(w){
-        this.ctx.lineWidth=w/this.transformMatrix[0][0];
-        return this
-    }
-    getImageData(x=0,y=0,w=this.width,h=this.height){
-        return this.ctx.getImageData(x,y,w,h);
-    }
-    clear(){
-        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
-        this.ctx.clearRect(0, 0, this.width, this.height);
-        this.applyTransformMatrix(); 
-        return this;
-    }
-    clone(){
-        console.log(this.width);
-        const canvas=new ZikoUICanvas();
-        canvas.items=this.items;
-        canvas.transformMatrix=this.transformMatrix;
-        canvas.axisMatrix=this.axisMatrix;
-        Object.assign(canvas.cache,{...this.cache});
-        //waitForUIElm(this)
-        //console.log(element)
-        this.size(this.element.style.width,this.element.style.width);
-        this.applyTransformMatrix();
-        this.draw();
-        this.adjust();
-        return canvas;
-    }
-    toImage() {
-        this.img = document?.createElement("img");
-        this.img.src = this.element?.toDataURL("image/png");
-        return this;
-    }
-    toBlob() {
-        var canvas = this.element;
-        canvas.toBlob(function (blob) {
-            var newImg = document?.createElement("img"),
-                url = URL.createObjectURL(blob);
-            newImg.onload = function () {
-                URL.revokeObjectURL(url);
-            };
-            newImg.src = url;
-            console.log(newImg);
-        });
-    }
-    zoomIn(){
-
-    }
-    zoomOut(){
-        
-    }
-    undo(n){
-
-    }
-    redo(n){
-
-    }
-    stream(){
-
-    }
-}
-
-const Canvas=(w,h)=>new ZikoUICanvas(w,h);
-
-var CANVAS = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Canvas: Canvas,
-  ZikoUICanvas: ZikoUICanvas
-});
-
-const Graphics = {
-    ...SVG,
-    ...CANVAS
+    return new Promise((resolve) => setTimeout(resolve, delayInMS));
+};
+const timeTaken = callback => {
+    console.time('timeTaken');
+    const r = callback();
+    console.timeEnd('timeTaken');
+    return r;
 };
 
-class ZikoUseFavIcon{
-    constructor(FavIcon,useEventEmitter=true){
-        this.#init();
+class ZikoTimeAnimation{
+    constructor(callback,ease=Ease.Linear,step=50,{t=[0,null],start=true,duration=3000}={}){
         this.cache={
-            Emitter:null
+            isRunning:false,
+            AnimationId:null,
+            startTime:null,
+            ease,
+            step,
+            intervall:t,
+            started:start,
+            duration
         };
-        if(useEventEmitter)this.useEventEmitter();
-        this.set(FavIcon);
-    }
-    #init(){     
-        this.__FavIcon__ = document.querySelector("link[rel*='icon']") || document?.createElement('link');   
-        this.__FavIcon__.type = 'image/x-icon';
-        this.__FavIcon__.rel = 'shortcut icon';
-        return this;
-    }
-    set(href){
-        if(href!==this.__FavIcon__.href){
-            this.__FavIcon__.href=href;
-            if(this.cache.Emitter)this.cache.Emitter.emit("ziko:favicon-changed");
-        }
-        return this;
-    }
-    get current(){
-        return document.__FavIcon__.href;
+        this.t=0;
+        this.tx=0;
+        this.ty=0;
+        this.i=0;
+        this.callback=callback;
     }
-    onChange(callback){
-        if(this.cache.Emitter)this.cache.Emitter.on("ziko:favicon-changed",callback);
-        return this;
+    #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;
+            }
     }
-    useEventEmitter(){
-        this.cache.Emitter=useEventEmitter();
+    reset(restart=true){
+        this.t=0;
+        this.tx=0;
+        this.ty=0;
+        this.i=0;
+        if(restart)this.start();
         return this;
     }
-
-}
-const useFavIcon=(FavIcon,useEventEmitter)=>new ZikoUseFavIcon(FavIcon,useEventEmitter);
-
-class ZikoMeta{
-    constructor({viewport,charset,description,author,keywords}){
-        this.document = globalThis?.document; 
-        this.meta={};
-        this.init({viewport,charset,description,author,keywords});
-    }
-    init({viewport,charset,description,author,keywords}){
-        viewport && this.setViewport(viewport);
-        charset && this.setCharset(charset);
-        description && this.describe(description);
-        author && this.setAuthor(author);
-        keywords && this.setKeywords(keywords);
-    }
-    set(key,value){
-        key = key.toLowerCase();
-        const isCharset = (key === "charset");
-        const meta = isCharset ? document.querySelector("meta[charset]"):document.querySelector(`meta[name=${key}]`);
-        this.meta=meta?? document?.createElement("meta");
-        if(isCharset) this.meta.setAttribute("charset",value);
-        else {
-            this.meta.setAttribute("name",key);
-            this.meta.setAttribute("content",value);
+    #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);
         }
-        if(!meta)this.document.head.append(this.meta);
-        return this;     
-    }
-    setCharset(charset="utf-8"){
-        this.set("charset",charset);
-        return this;
-    }
-    describe(description){
-        this.set("description",description);
-        return this;    
-    }
-    setViewport(viewport="width=device-width, initial-scale=1.0"){
-        this.set("viewport",viewport);
-        return this;    
-    }
-    setKeywords(...keywords){
-        // keywords.push("zikojs");
-        keywords=[...new Set(keywords)].join(", ");
-        this.set("keywords",keywords);
         return this;
     }
-    setAuthor(author){
-        this.set("author",author);
+    start(){
+        this.#animate(true);
         return this;
     }
-}
-const useMeta=({viewport,charset,description,author,keywords})=>new ZikoMeta({viewport,charset,description,author,keywords});
-
-class ZikoUseTitle{
-    constructor(title=document.title,useEventEmitter=true){
-        this.cache={
-            Emitter:null
-        };
-        if(useEventEmitter)this.useEventEmitter();
-        this.set(title);
-    }
-    useEventEmitter(){
-        this.cache.Emitter=useEventEmitter();
+    pause(){
+        if (this.cache.isRunning) {
+            clearTimeout(this.cache.AnimationId);
+            this.cache.isRunning = false;
+          }
         return this;
     }
-    set(title){
-        if(title!==document.title){
-            document.title=title;
-            if(this.cache.Emitter)this.cache.Emitter.emit("ziko:title-changed");
-        }
+    resume(){
+        this.#animate(false);
         return this;
     }
-    get current(){
-        return document.title;
-    }
-    onChange(callback){
-        if(this.cache.Emitter)this.cache.Emitter.on("ziko:title-changed",callback);
+    stop(){
+        this.pause();
+        this.reset(false);
         return this;
     }
+    // clear(){
+    // }
+    // stream(){
+    // }
 }
-const useTitle=(title, useEventEmitter)=>new ZikoUseTitle(title, useEventEmitter);
-
-// import {useLink} from "./";
-class ZikoHead{
-    constructor({title,lang,icon,meta,noscript}){
-        this.html = globalThis?.document?.documentElement;
-        this.head = globalThis?.document?.head;
-
-        title && useTitle(title);
-        lang && this.setLang(lang);
-        icon && useFavIcon(icon);
-        meta && useMeta(meta);
-        noscript && this.setNoScript();
-    }
-    setLang(lang){
-        this.html.setAttribute("lang",lang);
-    }
-    setNoScript(content){
 
+const useAnimation=(callback,ease=Ease.Linear,step=50,config)=>new ZikoTimeAnimation(callback,ease=Ease.Linear,step=50,config);
+
+const debounce=(fn,delay=1000)=>{
+    let id;
+    return (...args) => id ? clearTimeout(id) : setTimeout(()=>fn(...args),delay);
+};
+const throttle=(fn,delay)=>{
+    let lastTime=0;
+    return (...args) => {
+        const now = new Date().getTime();
+        if(now-lastTime < delay) return;
+        lastTime = now;
+        fn(...args); 
     }
-}
-
-const useHead=({ title, lang, icon, meta, noscript })=>new ZikoHead({ title, lang, icon, meta, noscript });
+};
 
 class ZikoApp {
     constructor({head = null, wrapper = null, target = null}){
@@ -7762,13 +5844,7 @@ class ZikoApp {
     }
     
 }
-const App$1 = ({head, wrapper, target}) => new ZikoApp({head, wrapper, target});
-
-var __App__ = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  App: App$1,
-  ZikoApp: ZikoApp
-});
+const App = ({head, wrapper, target}) => new ZikoApp({head, wrapper, target});
 
 function routesMatcher(mask, route) {
     const maskSegments = mask.split('/');
@@ -7865,12 +5941,6 @@ const SPA=({head, wrapper, target, routes})=>new ZikoSPA({head, wrapper, target,
 // regEx
 */
 
-var Spa = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  SPA: SPA,
-  ZikoSPA: ZikoSPA
-});
-
 function parseQueryParams(queryString) {
     const params = {};
     queryString.replace(/[A-Z0-9]+?=([\w|:|\/\.]*)/gi, (match) => {
@@ -7900,71 +5970,6 @@ function defineParamsGetter(target ){
     });
 }
 
-const __UI__={
-    __all__(){
-        return Object.values(this)
-          .filter(Array.isArray)
-          .flat();
-    },
-    querySelectorAll(){
-        return this.__all__().filter(n=>n)
-    },
-    getElementByIndex(index){
-        return this.__all__().find(n=>n.ui_index===index);
-    },
-    getElementById(id){
-        return null;
-    },
-    getElementsByClass(){
-
-    },
-    getElementsByTagName(){
-        
-    }
-};
-const __HYDRATION__ = {
-    map : new Map(),
-    index : 0,
-    increment : function(){
-        return this.index ++
-    }
-};
-const __HYDRATION_MAP__ = new Map();
-const __Config__={
-    default:{
-        target:null,
-        render:true,
-        math:{
-            mode:"deg"
-        }
-    },
-    setDefault:function(pairs){
-        const keys=Object.keys(pairs);
-        const values=Object.values(pairs);
-        for(let i=0; i<keys.length; i++) this.default[keys[i]]=values[i];
-    },
-    init:()=>{
-        // document.documentElement.setAttribute("data-engine","zikojs")
-    },
-    renderingMode :"spa",
-    isSSC : false,
-};
-const __CACHE__ = {
-    ui_index : 0,
-    get_ui_index:function(){
-        return this.ui_index ++
-    }
-};
-
-var Global = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  __CACHE__: __CACHE__,
-  __Config__: __Config__,
-  __HYDRATION_MAP__: __HYDRATION_MAP__,
-  __HYDRATION__: __HYDRATION__,
-  __UI__: __UI__
-});
-
 // import.meta.glob('./src/pages/**/*.js')
 async function FileBasedRouting(pages /* use import.meta.glob */){
    const routes = Object.keys(pages);
@@ -7981,7 +5986,7 @@ async function FileBasedRouting(pages /* use import.meta.glob */){
          "/" : ()=>{},
          ...pairs
       },
-      wrapper : Section()
+      wrapper : tags.section()
    })   
 }
 function customPath(inputPath, root = './src/pages', extensions = ['js', 'ts']) {
@@ -8021,15 +6026,6 @@ function findCommonPath(paths) {
    return commonPath;
 }
 
-// import * as Params from "./params"
-
-const App={
-    ...__App__,
-    ...Spa,
-    ...Global,
-    // ...Params
-};
-
 class ZikoUseChannel{
     constructor(name = ""){
         this.channel = new BroadcastChannel(name);
@@ -8145,7 +6141,6 @@ class ZikoUseRoot {
             cssProp, 
             this.currentPropsMap[prop]
             ); 
-            console.log({cssProp});
         //    Object.assign(this.pairs, {
         //     [prop] : `var(--${this.namespace}-${prop})`
         //    })
@@ -8265,70 +6260,8 @@ class ZikoUseStorage{
 const useLocaleStorage=(key,initialValue)=>new ZikoUseStorage(localStorage,key,initialValue);
 const useSessionStorage=(key,initialValue)=>new ZikoUseStorage(sessionStorage,key,initialValue);
 
-[
-    App,
-    Math$1,
-    UI$1,
-    Time,
-    Data,
-    Reactivity,
-    Graphics,
-].forEach(n=>Object.assign(n,{
-    ExtractAll:()=>__ExtractAll__(n),
-    RemoveAll:()=>__RemoveAll__(n)
-}));
-
-const Ziko={
-    App,
-    Math: Math$1,
-    UI: UI$1,
-    Time,
-    Data,
-    Reactivity,
-    Graphics
-};
-
-if ( globalThis.__Ziko__ ) {
-    console.warn( 'WARNING: Multiple instances of Ziko.js being imported.' );
-	} else {
-		globalThis.__Ziko__={
-            ...Ziko,
-            __UI__,
-            __HYDRATION__,
-            __HYDRATION_MAP__,
-            __Config__,
-            __CACHE__,
-            ExtractAll,
-            RemoveAll
-        };
-        defineParamsGetter(__Ziko__);
-	}
-// globalThis.__Ziko__={
-//     ...Ziko,
-//     __UI__,
-//     __Config__,
-//     ExtractAll,
-//     RemoveAll
-// };
 if(globalThis?.document){
     document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());
-}
-function ExtractAll(){
-    UI$1.ExtractAll();
-    Math$1.ExtractAll();
-    Time.ExtractAll();
-    Reactivity.ExtractAll();
-    Graphics.ExtractAll();
-    Data.ExtractAll();
-    return this;
-}
-function RemoveAll(){
-    UI$1.RemoveAll();
-    Math$1.RemoveAll();
-    Time.RemoveAll();
-    Reactivity.RemoveAll();
-    Graphics.RemoveAll();
-    Data.RemoveAll();
 }
 
-export { App$1 as App, Article, Aside, Base, Canvas, Combinaison, Complex, E, EPSILON, Ease, FileBasedRouting, Flex, Footer, Form, Grid$1 as Grid, HTMLWrapper, Header, Logic$1 as Logic, Main, Matrix, Nav, PI$1 as PI, Permutation, Random, SPA, SVGWrapper, Section, Str, Suspense, Svg, Table$1 as Table, Utils$1 as Utils, ZikoApp, ZikoCustomEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventCustom, ZikoEventDrag, ZikoEventFocus, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventTouch, ZikoEventWheel, ZikoHead$1 as ZikoHead, ZikoMutationObserver, ZikoSPA, ZikoUIAbbrText, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBlockQuote, ZikoUIBr, ZikoUICanvas, ZikoUICodeText, ZikoUIDefintion, ZikoUIElement, ZikoUIFigure, ZikoUIFlex, ZikoUIFooter, ZikoUIForm, ZikoUIGrid, ZikoUIHTMLWrapper, ZikoUIHeader, ZikoUIHeading, ZikoUIHr, ZikoUIHtmlTag, ZikoUIImage, ZikoUIInput, ZikoUIInputCheckbox, ZikoUIInputColor, ZikoUIInputDatalist$1 as ZikoUIInputDatalist, ZikoUIInputDate, ZikoUIInputDateTime, ZikoUIInputEmail, ZikoUIInputImage, ZikoUIInputNumber, ZikoUIInputOption, ZikoUIInputPassword, ZikoUIInputRadio, ZikoUIInputSearch, ZikoUIInputSlider$1 as ZikoUIInputSlider, ZikoUIInputTime, ZikoUILabel, ZikoUILink, ZikoUIMain, ZikoUINav, ZikoUIParagraphe, ZikoUIQuote, ZikoUISVGWrapper, ZikoUISection, ZikoUISelect, ZikoUISubText, ZikoUISupText, ZikoUISuspense, ZikoUISvg, ZikoUIText, ZikoUITextArea, ZikoUIVideo, ZikoUIXMLWrapper, ZikoUseRoot, ZikoUseStyle, __CACHE__, __Config__, __HYDRATION_MAP__, __HYDRATION__, __UI__, __ZikoEvent__, abbrText, abs, accum, acos, acosh, acot, add, arange, arr2str, asin, asinh, atan, atan2, atanh, audio, bindClickEvent, bindClipboardEvent, bindCustomEvent, bindDragEvent, bindFocusEvent, bindHashEvent, bindKeyEvent, bindMouseEvent, bindPointerEvent, bindTouchEvent, bindWheelEvent, blockQuote, br, brs, btn, cartesianProduct, ceil, checkbox, clamp, codeText, combinaison, complex, cos, cosh, cot, coth, count, countWords, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, datalist, Ziko as default, defineParamsGetter, deg2rad, dfnText, div, e, fact, figure, floor, geomspace, getEvent, h, h1, h2, h3, h4, h5, h6, hTags, hr, hrs, html, hypot, image, inRange, input, inputCamera, inputColor, inputDate, inputDateTime, inputEmail, inputImage, inputNumber, inputPassword, inputTime, isApproximatlyEqual, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, li, link, linspace, ln, logspace, map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ol, ones, p, pgcd, pow, powerSet, ppcm, preload, prod, quote, rad2deg, radio, removeExtraSpace, round, s, sTags, search, sec, select, sig, sign, sin, sinc, sinh, slider, sqrt, sqrtn, str, sub, subSet, subText, sum, supText, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, textarea, timeTaken, time_memory_Taken, ul, useAnimation, useChannel, useCustomEvent, useEventEmitter, useFavIcon$1 as useFavIcon, useFps, useHashEvent, useHead$1 as useHead, useInputEvent, useLocaleStorage, useMediaQuery, useMeta$1 as useMeta, useRoot, useSessionStorage, useStyle, useSuccesifKeys, useSwipeEvent, useThread, useTimeLoop, useTitle$1 as useTitle, video, wait, waitForUIElm, waitForUIElmSync, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };
+export { App, Base, Canvas, Combinaison, Complex, E, EPSILON, Ease, FileBasedRouting, Flex, Grid$1 as Grid, HTMLWrapper, Logic$1 as Logic, Matrix, PI$1 as PI, Permutation, Random, SPA, SVGWrapper, Str, Suspense, Svg, Utils, ZikoApp, ZikoCustomEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventCustom, ZikoEventDrag, ZikoEventFocus, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventTouch, ZikoEventWheel, ZikoHead, ZikoMutationObserver, ZikoSPA, ZikoUICanvas, ZikoUIElement, ZikoUIFlex, ZikoUIGrid, ZikoUIHTMLWrapper, ZikoUINode, ZikoUISVGWrapper, ZikoUISuspense, ZikoUISvg, ZikoUIText, ZikoUIXMLWrapper, ZikoUseRoot, ZikoUseStyle, __ZikoEvent__, abs, accum, acos, acosh, acot, add, arange, arr2str, asin, asinh, atan, atan2, atanh, bindClickEvent, bindClipboardEvent, bindCustomEvent, bindDragEvent, bindFocusEvent, bindHashEvent, bindKeyEvent, bindMouseEvent, bindPointerEvent, bindTouchEvent, bindWheelEvent, cartesianProduct, ceil, clamp, combinaison, complex, cos, cosh, cot, coth, count, countWords, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, deg2rad, div, e, fact, floor, geomspace, getEvent, hypot, inRange, isApproximatlyEqual, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linspace, ln, logspace, map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ones, pgcd, pow, powerSet, ppcm, preload, prod, rad2deg, removeExtraSpace, round, sec, sig, sign, sin, sinc, sinh, sqrt, sqrtn, str, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, timeTaken, time_memory_Taken, useAnimation, useChannel, useCustomEvent, useEventEmitter, useFavIcon, useFps, useHashEvent, useHead, useInputEvent, useLocaleStorage, useMediaQuery, useMeta, useRoot, useSessionStorage, useStyle, useSuccesifKeys, useSwipeEvent, useThread, useTimeLoop, useTitle, wait, waitForUIElm, waitForUIElmSync, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };