ziko 0.0.11 → 0.0.12

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sun Sep 01 2024 15:17:03 GMT+0100 (UTC+01:00)
+  Date : Wed Sep 04 2024 17:52:59 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
@@ -1342,7 +1342,7 @@ class ZikoUIElementStyle{
     //     return this;
     //   }
     style(styles){
-        Object.assign(this.target.element.style, styles);
+        if(this?.target?.element?.style)Object.assign(this?.target?.element?.style, styles);
         return this;
     }
     linkTo(target){
@@ -3085,7 +3085,7 @@ class ZikoUseTheme{
       return this;
     }
   }  
-  const useTheme=(id=0)=>(theme=0)=>new ZikoUseTheme(theme,id);
+  const useTheme=(theme, id=0)=>new ZikoUseTheme(theme,id);
 
 class ZikoUseEventEmitter {
     constructor() {
@@ -3190,7 +3190,7 @@ class ZikoUseFavIcon{
         this.set(FavIcon);
     }
     #init(){     
-        this.__FavIcon__=document.querySelector("link[rel*='icon']") || document.createElement('link');   
+        this.__FavIcon__=document.querySelector("link[rel*='icon']") || document?.createElement('link');   
         this.__FavIcon__.type = 'image/x-icon';
         this.__FavIcon__.rel = 'shortcut icon';
         return this;
@@ -3441,6 +3441,15 @@ function pointerout_controller(e){
         null    
     );
 }
+function pointercancel_controller(e){
+    EVENT_CONTROLLER.call(
+        this,
+        e,
+        "cancel",
+        null,
+        null    
+    );
+}
 class ZikoEventPointer extends ZikoEvent{
     constructor(target){
         super(target);
@@ -3471,6 +3480,7 @@ class ZikoEventPointer extends ZikoEvent{
                 enter:false,
                 out:false,
                 leave:false,
+                cancel:false
             },
             paused:{
                 down:false,
@@ -3478,7 +3488,8 @@ class ZikoEventPointer extends ZikoEvent{
                 up:false,
                 enter:false,
                 out:false,
-                leave:false,          
+                leave:false,
+                cancel:false          
             },
             stream:{
                 enabled:{
@@ -3488,6 +3499,7 @@ class ZikoEventPointer extends ZikoEvent{
                     enter:false,
                     out:false,
                     leave:false,
+                    cancel:false
                 },
                 clear:{
                     down:false,
@@ -3495,7 +3507,8 @@ class ZikoEventPointer extends ZikoEvent{
                     up:false,
                     enter:false,
                     out:false,
-                    leave:false,            
+                    leave:false,
+                    cancel:false            
                 },
                 history:{
                     down:[],
@@ -3512,7 +3525,8 @@ class ZikoEventPointer extends ZikoEvent{
                 up:[(self)=>console.log({ux:self.ux,uy:self.uy,down:self.down,move:self.move,t:self.dt})],
                 enter:[(self)=>console.log({dx:self.dx,dy:self.dy,down:self.down,move:self.move,t:self.dt})],
                 out:[(self)=>console.log({mx:self.mx,my:self.my,down:self.down,move:self.move,t:self.dt})],
-                leave:[(self)=>console.log({ux:self.ux,uy:self.uy,down:self.down,move:self.move,t:self.dt})]
+                leave:[(self)=>console.log({ux:self.ux,uy:self.uy,down:self.down,move:self.move,t:self.dt})],
+                cancel:[(self)=>console.log({ux:self.ux,uy:self.uy,down:self.down,move:self.move,t:self.dt})]
             }
         };
         this.__controller={
@@ -3522,36 +3536,42 @@ class ZikoEventPointer extends ZikoEvent{
             enter:pointerenter_controller.bind(this),
             out:pointerout_controller.bind(this),
             leave:pointerleave_controller.bind(this),
+            cancel:pointercancel_controller.bind(this),
         };
     }
     onDown(...callbacks){
         if(callbacks.length===0)callbacks=[()=>{}];
-        this.__onEvent("down",{down:true,move:false,up:false,enter:false,out:false,leave:false},...callbacks);
+        this.__onEvent("down",{down:true,move:false,up:false,enter:false,out:false,leave:false,cancel:false},...callbacks);
         return this;
     }
     onMove(...callbacks){
         if(callbacks.length===0)callbacks=[()=>{}];
-        this.__onEvent("move",{down:false,move:true,up:false,enter:false,out:false,leave:false},...callbacks);
+        this.__onEvent("move",{down:false,move:true,up:false,enter:false,out:false,leave:false,cancel:false},...callbacks);
         return this;
     }
     onUp(...callbacks){
         if(callbacks.length===0)callbacks=[()=>{}];
-        this.__onEvent("up",{down:false,move:false,up:true,enter:false,out:false,leave:false},...callbacks);
+        this.__onEvent("up",{down:false,move:false,up:true,enter:false,out:false,leave:false,cancel:false},...callbacks);
         return this;
     }
     onEnter(...callbacks){
         if(callbacks.length===0)callbacks=[()=>{}];
-        this.__onEvent("enter",{down:false,move:false,up:false,enter:true,out:false,leave:false},...callbacks);
+        this.__onEvent("enter",{down:false,move:false,up:false,enter:true,out:false,leave:false,cancel:false},...callbacks);
         return this;
     }
     onOut(...callbacks){
         if(callbacks.length===0)callbacks=[()=>{}];
-        this.__onEvent("out",{down:false,move:false,up:false,enter:false,out:true,leave:false},...callbacks);
+        this.__onEvent("out",{down:false,move:false,up:false,enter:false,out:true,leave:false,cancel:false},...callbacks);
         return this;
     }
     onLeave(...callbacks){
         if(callbacks.length===0)callbacks=[()=>{}];
-        this.__onEvent("leave",{down:false,move:false,up:false,enter:false,out:false,leave:true},...callbacks);
+        this.__onEvent("leave",{down:false,move:false,up:false,enter:false,out:false,leave:true,cancel:false},...callbacks);
+        return this;
+    }
+    onCancel(...callbacks){
+        if(callbacks.length===0)callbacks=[()=>{}];
+        this.__onEvent("cancel",{down:false,move:false,up:false,enter:false,out:false,leave:false,cancel:true},...callbacks);
         return this;
     }
     // handle({down=false,move=false,up=false}={}){
@@ -4953,91 +4973,6 @@ class ZikoUseGeolocation{
 }
 const useGeolocation=()=>new ZikoUseGeolocation();
 
-function useType(func, ...expectedTypes) {
-  const argNames = func.toString()
-    .match(/\(([^)]*)\)/)[1]
-    .split(',')
-    .map(arg => arg.trim());
-  return function(...args) {
-    const lastExpectedType = expectedTypes[expectedTypes.length - 1];
-    for (let i = 0; i < args.length; i++) {
-      const isRestParam = i >= expectedTypes.length;
-      const expectedType = isRestParam ? lastExpectedType : expectedTypes[i];
-      const arg = args[i];
-      isRestParam ? `${argNames[argNames.length - 1]}[${i - expectedTypes.length + 1}]` : argNames[i] || `Argument ${i + 1}`;
-      let isValid = false;
-      if(typeof expectedType === "object"){
-        if (expectedType.or) {
-          for (const type of expectedType.types) {
-            if (checkTypeOrInstance(type, arg)) {
-              isValid = true;
-              break;
-            }
-          }
-        }
-        if (expectedType.nor) {
-          for (const type of expectedType.types) {
-            if (checkTypeOrInstance(type, arg)) {
-              isValid = false;
-              break;
-            }
-            isValid = true;
-          }
-        } 
-        else if (expectedType.not) isValid = !checkTypeOrInstance(expectedType.type, arg);
-      }
-      else isValid = checkTypeOrInstance(expectedType, arg);
-      // Should Fix Nor error Message
-      if (!isValid) {
-        // const expectedTypeName = typeof expectedType === 'object'
-        //   ? expectedType.or
-        //     ? expectedType.types.map(type => (typeof type === 'string' ? type : type.name)).join(' or ')
-        //     : expectedType.not
-        //     ? `not ${typeof expectedType.type === 'string' ? expectedType.type : expectedType.type.name}`
-        //     : Array.isArray(expectedType)
-        //     ? `[${expectedType.map(type => (typeof type === 'string' ? type : type.name)).join(', ')}]`
-        //     : `{${Object.entries(expectedType).map(([key, type]) => `${key}: ${typeof type === 'string' ? type : type.name}`).join(', ')}}`
-        //   : typeof expectedType === 'string'
-        //   ? expectedType
-        //   : expectedType.name;
-        // throw new TypeError(`${argName} should be of type ${expectedTypeName}`);
-        throw new TypeError("jjj")
-      }
-    }
-    return func(...args);
-  };
-}
-
-function useOr(...types) {
-  return { or: true, types };
-}
-function useNot(type) {
-  return { not: true, type };
-}
-function useNor(...types){
-  return { nor: true, types}
-}
-const checkTypeOrInstance = (type, arg) => {
-  if (typeof type === 'string') return typeof arg === type;
-  else if (type instanceof Function) return arg instanceof type;
-  else if (Array.isArray(type)) 
-    return (!Array.isArray(arg) || arg.length !== type.length)? false: arg.every((item, index) => checkTypeOrInstance(type[index], item));  
-  else if (typeof type === 'object' && !Array.isArray(type)) 
-    return (typeof arg !== 'object' || arg === null)? false : Object.keys(type).every(key => key in arg && checkTypeOrInstance(type[key], arg[key]))  
-  return false;
-};
-globalThis.useType = useType;
-globalThis.useNot = useNot;
-globalThis.useOr = useOr;
-
-function add$1(a, b = 0){
-  return a+b
- }
- 
-add$1 = useType(add$1,"number",useNor("string","number"));
- 
-console.log(add$1(1));
-
 class ZikoTimeLoop {
   constructor(callback, step = 1000/30, startTime=0, endTime = Infinity, started = true) {
     this.callback = callback;
@@ -5303,7 +5238,7 @@ const waitForUIElm=(UIElement)=>{
             }
         });
   
-        observer.observe(document.body, {
+        observer.observe(document?.body, {
             childList: true,
             subtree: true
         });
@@ -5571,9 +5506,9 @@ const Reactivity={
 
 class ZikoUIElement {
   constructor(element,name="") {
-    this.target = globalThis.__Ziko__.__Config__.default.target||globalThis.document.body;
+    this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
     if(typeof element === "string") {
-      element === "svg" ? element=document.createElementNS("http://www.w3.org/2000/svg", "svg"): element = globalThis.document.createElement(element);
+      element === "svg" ? element=globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", "svg"): element = globalThis?.document?.createElement(element);
     }
     this.element = element;
     this.uuid=this.constructor.name+"-"+Random.string(10);
@@ -5681,6 +5616,41 @@ class ZikoUIElement {
     this.st.size(width,height);
     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;
     return this;
@@ -5695,7 +5665,7 @@ class ZikoUIElement {
   render(/*render = true , */target = this.target) {
     if(target instanceof ZikoUIElement)target=target.element;
     this.target=target;
-    this.target.appendChild(this.element);
+    this.target?.appendChild(this.element);
     // if(render) {
     //   this.target.appendChild(this.element);
     // }
@@ -5704,7 +5674,7 @@ class ZikoUIElement {
   }
   unrender(){
     if(this.cache.parent)this.cache.parent.remove(this);
-    else if(this.target.children.length && [...this.target.children].includes(this.element)) this.target.removeChild(this.element);
+    else if(this.target?.children?.length && [...this.target?.children].includes(this.element)) this.target.removeChild(this.element);
     return this;
   }
   renderAfter(t = 1) {
@@ -5802,6 +5772,11 @@ class ZikoUIElement {
     this.events.ptr.onOut(...callbacks);
     return this;
   }
+  onPtrCancel(...callbacks){
+    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
+    this.events.ptr.onCancel(...callbacks);
+    return this;
+  }
   onMouseMove(...callbacks){
     if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
     this.events.mouse.onMove(...callbacks);
@@ -5991,6 +5966,9 @@ class ZikoUIImage extends ZikoUIElement {
       if (typeof w == "number") w += "%";
       if (typeof h == "number") h += "%";
       this.style({ border: "1px solid black", width: w, height: h });
+    }
+    get isImg(){
+      return true;
     }
      updateSrc(url){
       this.value=url;
@@ -6015,22 +5993,21 @@ class ZikoUIFigure extends ZikoUIElement{
     constructor(src,caption){
       super("figure","figure");
       this.img=src.width("100%").element;
-      this.caption=document.createElement("figcaption");
+      this.caption=document?.createElementt("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 ZikoUIVideo extends ZikoUIElement {
-    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 __ZikoUIDynamicMediaElement__ extends ZikoUIElement {
+    constructor(element, name) {
+      super(element, name);
+      this.useControls();
     }
     get t(){
       return this.element.currentTime;  
@@ -6039,20 +6016,24 @@ class ZikoUIVideo extends ZikoUIElement {
       this.element.controls = enabled;
       return this;
     }
-    play() {
-      this.element.play();
+    enableControls(){
+      this.element.controls = true;
       return this;
     }
-    pause() {
-      this.element.pause();
+    disableControls(){
+      this.element.controls = true;
       return this;
     }
-    poster(src=""){
-      this.element.poster=src;
+    toggleControls(){
+      this.element.controls = !this.element.controls;
       return this;
     }
-    usePIP(e){
-      this.element.requestPictureInPicture(e);
+    play() {
+      this.element.play();
+      return this;
+    }
+    pause() {
+      this.element.pause();
       return this;
     }
     seekTo(time) {
@@ -6065,39 +6046,40 @@ class ZikoUIVideo extends ZikoUIElement {
     onPause(){
 
     }
-  }
-const video = (src, width, height) => new ZikoUIVideo(src, width, height);
+  }
 
-class ZikoUIAudio extends ZikoUIElement {
-    constructor(src) {
-      super("audio","audio");
-      this.element.setAttribute("src", src);
-      this.useControls();
-    }
-    get t(){
-      return this.element.currentTime;  
-    }
-    useControls(enabled = true) {
-      this.element.controls = enabled;
-      return this;
+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 });
     }
-    play() {
-      this.element.play();
-      return this;
+    get isVideo(){
+      return true;
     }
-    pause() {
-      this.element.pause();
+    usePoster(src=""){
+      this.element.poster=src;
       return this;
     }
-    seekTo(time) {
-      this.element.currentTime = time;
+    usePIP(e){
+      this.element.requestPictureInPicture(e);
       return this;
     }
-    onPlay(){
-
+  }
+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();
     }
-    onPause(){
-
+    get isAudio(){
+      return true;
     }
   }
 const audio = (src) => new ZikoUIAudio(src);
@@ -7080,8 +7062,8 @@ class Matrix extends ZikoMath{
     }
     toTable() {
         var table = new DocumentFragment();
-        var Tr = new Array(this.rows).fill(null).map(() => document.createElement("tr"));
-        var Td = this.arr.map((n) => n.map(() => document.createElement("td")));
+        var Tr = new Array(this.rows).fill(null).map(() => document?.createElement("tr"));
+        var Td = this.arr.map((n) => n.map(() => document?.createElement("td")));
         for (let i = 0; i < Td.length; i++) {
             for (let j = 0; j < Td[0].length; j++) {
                 Td[i][j].innerHTML = this.arr[i][j];
@@ -8094,6 +8076,9 @@ class __ZikoUIText__ extends ZikoUIContainerElement {
         lineBreak,
       });
     }
+    get isText(){
+      return true;
+    }
     get value(){
       return this.element.textContent;
     }
@@ -8104,11 +8089,11 @@ class __ZikoUIText__ extends ZikoUIContainerElement {
     }
     addValue(...value) {
       value.forEach((item,i) => {
-        if (typeof item === "string" || typeof item === "number") this.element.appendChild(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 (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]) 
@@ -8116,11 +8101,11 @@ class __ZikoUIText__ extends ZikoUIContainerElement {
         //   && !(value[i-1] instanceof ZikoUIElement)
         // ) this.element.appendChild(new Text(" "))
         
-        if(this.cache.lineBreak)this.element.appendChild(document.createElement("br"));
+        if(this.cache.lineBreak)this.element?.appendChild(globalThis.document?.createElement("br"));
       });
-      this.element.innerHTML = this.element.innerHTML
-        .replace(/\n/g, '<br>')
-        .replace(/(?<!<[^>]+) /g, '&nbsp;');
+      if(this.element?.innerHTML){
+        this.element.innerHTML = this.element.innerHTML.replace(/\n/g, '<br>').replace(/(?<!<[^>]+) /g, '&nbsp;');
+      }
       return this
     }
     setValue(...value) {
@@ -8142,32 +8127,50 @@ class ZikoUIQuote extends __ZikoUIText__ {
       fontStyle: "italic"
     });
   }
+  get isQuote(){
+    return true
+  }
 }
 class ZikoUIDefintion extends __ZikoUIText__ {
   constructor(...value) {
     super("dfn", "dfnText", false, ...value);
   }
+  get isDfnText(){
+    return true
+  }
 }
 class ZikoUISupText extends __ZikoUIText__ {
   constructor(sup) {
     super("sup", "supText", false, sup);
   }
+  get isSupText(){
+    return true
+  }
 }
 class ZikoUISubText extends __ZikoUIText__ {
   constructor(...value) {
     super("sub", "subText", false, ...value);
   }
+  get isSubText(){
+    return true
+  }
 }
 class ZikoUICodeText extends __ZikoUIText__ {
   constructor(...value) {
     super("code", "codeText", false, ...value);
   }
+  get isCodeText(){
+    return true
+  }
 }
 class ZikoUIAbbrText extends __ZikoUIText__ {
   constructor(abbr, title) {
     super("abbr", "abbrText", false, abbr);
     this.setAttr("title", title);
   }
+  get isAbbrText(){
+    return true
+  }
 }
 const text$1 = (...str) => new ZikoUIText(...str);
 const quote = (...str) => new ZikoUIQuote(...str);
@@ -8181,12 +8184,18 @@ 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);
@@ -8196,6 +8205,9 @@ class ZikoUIHeading extends ZikoUIElement {
       super(`h${type}`,`h${type}`);
       this.element.textContent = value;
     }
+    get isHeading(){
+      return true;
+    }
     get value() {
       return this.element.innerText;
     }
@@ -8223,11 +8235,14 @@ class ZikoUIHtmlTag extends ZikoUIContainerElement {
 class ZikoUIBtn extends ZikoUIElement {
   constructor(value = "button") {
     super("button","btn");
-    this.element = document.createElement("button");
+    this.element = document?.createElement("button");
     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 {
@@ -8251,23 +8266,43 @@ class ZikoUIBtn extends ZikoUIElement {
 class ZikoUIBr extends ZikoUIElement {
     constructor() {
       super("br","br");
-          // delete this.append
+    }
+    get isBr(){
+      return true
     }
   }
   class ZikoUIHr extends ZikoUIElement {
     constructor() {
       super("hr","hr");
-          // delete this.append
+    }
+    get isHr(){
+      return true
     }
   }
   class ZikoUILink extends ZikoUIContainerElement{
     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));
     }
     setHref(href){
       this.element.href=href;
     }
+    get isLink(){
+      return true
+    }
   }
   const br = () => new ZikoUIBr();
   const hr = () => new ZikoUIHr();
@@ -8282,6 +8317,9 @@ class ZikoUILI extends ZikoUIContainerElement{
     super("li","li");
     this.append(UI);
   }
+  get isLi(){
+    return true;
+  }
 }
 class ZikoUIList extends ZikoUIContainerElement {
     constructor(element,name) {
@@ -8289,6 +8327,9 @@ class ZikoUIList extends ZikoUIContainerElement {
       delete this.append;
       this.style({ listStylePosition: "inside" });
     }
+    get isList(){
+      return true;
+    }
     append(...arr){
       for (let i = 0; i < arr.length; i++) {
         let li = null;
@@ -8381,6 +8422,9 @@ class ZikoUIOList extends ZikoUIList{
     super("ol","ol");
     this.append(...arr);
   }
+  get isOl(){
+    return true;
+  }
   type(tp = 1) {
     this.element.setAttribute("type", tp);
     return this;
@@ -8395,93 +8439,68 @@ class ZikoUIUList extends ZikoUIList{
     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);
 
-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);
-      }
-      else this.setValue(value);
-    }
-    setValue(str = "") {
-      this.element.value = str;
-      return this;
-    }
-    setText(text=""){
-      if(text)this.element.textContent=text;
-      return this;
-    }
-  }
-
-class ZikoUITextArea extends ZikoUIElement {
-    constructor() {
-      super();
-      this.element = document.createElement("textarea");
-      //Object.assign(this,inputComposer.call(this));
-    }
-    get value(){
-      return this.element.textContent;
-    }
-  }
-
-  const textarea =()=> new ZikoUITextArea();
-
-//import { select } from "./select.js";
-//import { debounce,throttle} from "../../Data/decorators.js";
-
 class ZikoUIInput extends ZikoUIElement {
-  constructor(name , value = "",datalist) {
-    super("input",name);
-    Object.assign(this.events,{input:null});
+  constructor(type, name , value = "", datalist) {
+    super("input", "input");
+    Object.assign(this.events, { input: null });
     this.setValue(value);
-    if(datalist)this.linkDatalist(datalist);
+    this.setAttr("type", type);
+    this.setAttr("name", name);
+    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);
+  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);
+  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;
+    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;
+    } 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="") {
+  // _setType(type) {
+  //   this.element.type = type;
+  //   return this;
+  // }
+  setValue(value = "") {
     this.element.value = value;
     return this;
   }
-  useState(state){
+  useState(state) {
     this.setValue(state);
-    return [{value:this.value},e=>this.setValue(e)]
+    return [{ value: this.value }, (e) => this.setValue(e)];
   }
   setPlaceholder(value) {
-    if(value)this.element.placeholder = value;
+    if (value) this.element.placeholder = value;
     return this;
   }
   get isValide() {
@@ -8510,260 +8529,362 @@ class ZikoUIInput extends ZikoUIElement {
     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 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;
+    }
+};
+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("inputSearch");
-    this._setType("search");
+    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;
+    /* 
+      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;
-      })
-    );
-    */
+      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)
+      UIElement.setValue(this.Length),
     );
     return this;
   }
 }
-class ZikoUIInputNumber extends ZikoUIInput {
-  constructor(min, max ,step = 1) {
-    super("inpuNumber");
-    this._setType("number");
-    this.setMin(min).setMax(max).setStep(step);
-  }
-  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 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;
+    }
 }
-class ZikoUIInputSlider extends ZikoUIInputNumber {
-  constructor(val = 0, min = 0, max = 10, step = 1) {
-    super("inputSlider");
-    this._setType("range");
-    this.setMin(min).setMax(max).setValue(val).setStep(step);
-  }
+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;
+    }
 }
-class ZikoUIInputColor extends ZikoUIInput {
-  constructor() {
-    super("inputColor");
-    this._setType("color");
-    this.background(this.value);
-    this.onInput(() => this.background(this.value));
+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("inputPassword");
-    this._setType("password");
-  }
-}
-class ZikoUIInputEmail extends ZikoUIInput {
-  constructor() {
-    super("inputEmail");
-    this._setType("email");
+    constructor() {
+      super("password", "inputPassword");
+    }
+    get isInputPassword(){
+      return true;
+    }
   }
+  const inputPassword = () => new ZikoUIInputPassword();
+
+class ZikoUIInputDate extends ZikoUIInput {
+    constructor() {
+      super("date", "inputDate");
+    }
+    get isInputDate(){
+      return true;
+    }
 }
+const inputDate = () => new ZikoUIInputDate();
+
 class ZikoUIInputTime extends ZikoUIInput {
-  constructor() {
-    super("inputTime");
-    this._setType("time");
-  }
-}
-class ZikoUIInputDate extends ZikoUIInput {
-  constructor() {
-    super("inputDate");
-    this._setType("date");
-  }
+    constructor() {
+      super("time", "inputTime");
+    }
+    get isInputTime(){
+      return true;
+    }
 }
+const inputTime = () => new ZikoUIInputTime();
+
 class ZikoUIInputDateTime extends ZikoUIInput {
-  constructor() {
-    super("inputDateTime");
-    this._setType("datetime-local");
-  }
-}
-class ZikoUIInputCheckbox extends ZikoUIInput {
-  constructor() {
-    super("inputCheckbox");
-    this._setType("checkbox");
-    this.cursor("pointer");
-  }
-  get checked() {
-    return this.element.checked;
-  }
-  check(checked = true) {
-    this.element.checked = checked;
-    return this;
-  }
-  color(color) {
-    this.element.style.accentColor = color;
-    return this;
-  }
-}
-class ZikoUIInputRadio extends ZikoUIInput {
-  constructor() {
-    super("inputRadio");
-    this._setType("radio");
-    this.cursor("pointer");
-  }
-  get checked() {
-    return this.element.checked;
-  }
-  check(checked = true) {
-    this.element.checked = checked;
-    return this;
-  }
-  color(color) {
-    this.element.style.accentColor = color;
-    return this;
-  }
+    constructor() {
+      super("datetime-local", "inputDateTime");
+    }
+    get isInputDateTime(){
+      return true;
+    }
 }
-
-
+const inputDateTime = () => new ZikoUIInputDateTime();
+
 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);
-  }
-  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;
-  }
-  get value() {
-    return this.img;
+    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;
+    }
+    get value() {
+      return this.img;
+    }
+    render(bool = true) {
+      if (bool) this.target.appendChild(this._aux_element.element);
+      else this.remove();
+      return this;
+    }
+    remove() {
+      if (this.target.children.length) this.target.removeChild(this._aux_element.element);
+      return this;
+    }
+}
+const inputImage = (text) => new ZikoUIInputImage(text);
+
+class ZikoUIWebcame extends ZikoUIVideo{
+    constructor(){
+      super();
+      this.element.setAttribute("src", "");
+      this.constraints = { audio: true, video: { width: 1280, height: 720 } };
+      //this.video=this.element
+    }
+    get isInputCamera(){
+      return true;
+    }
+    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;
+    }
   }
-  render(bool = true) {
-    if (bool) this.target.appendChild(this._aux_element.element);
-    else this.remove();
-    return this;
+  const inputCamera=()=>new ZikoUIWebcame();
+
+class ZikoUILabel extends ZikoUIElement{
+    constructor(){
+      super();
+      this.element=document?.createElement("label");
+    }
+    get isLabel(){
+      return true;
   }
-  remove() {
-    if (this.target.children.length) this.target.removeChild(this._aux_element.element);
-    return this;
   }
+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);
+      }
+      else this.setValue(value);
+    }
+    setValue(str = "") {
+      this.element.value = str;
+      return this;
+    }
+    setText(text=""){
+      if(text)this.element.textContent=text;
+      return this;
+    }
 }
-
-class ZikoUIInputDatalist extends ZikoUIElement {
+let ZikoUIInputDatalist$1 = class ZikoUIInputDatalist extends ZikoUIElement {
   constructor(...options){
     super();
-    this.element = document.createElement("datalist");
+    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;
   }
-}
-const input = (value,datalist) => {
-  if(value instanceof Object){
-    const {datalist,placeholder}=value;
-    value=value.value??"";
-    return new ZikoUIInput(value,datalist).setPlaceholder(placeholder);
-  }
-  return new ZikoUIInput(value,datalist);
-};
-const datalist = (...options) => new ZikoUIInputDatalist(...options);
-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(value, min, max, step);
-  }
-  return new ZikoUIInputSlider(value, min, max, step);
 };
-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);
-};
-const search = (...a) => new ZikoUIInputSearch().connect(...a);
-const inputImage = (text) => new ZikoUIInputImage(text);
-const inputPassword = () => new ZikoUIInputPassword();
-const inputEmail = () => new ZikoUIInputEmail();
-const inputColor = () => new ZikoUIInputColor();
-const inputTime = () => new ZikoUIInputTime();
-const inputDate = () => new ZikoUIInputDate();
-const inputDateTime = () => new ZikoUIInputDateTime();
-const checkbox = () => new ZikoUIInputCheckbox();
-const radio = () => new ZikoUIInputRadio();
+
+const datalist = (...options) => new ZikoUIInputDatalist$1(...options);
 
 class ZikoUISelect extends ZikoUIElement {
     constructor(){
       super();
-      this.element=document.createElement("select");
+      this.element=document?.createElement("select");
     }
     addOptions(...options) {
       options.map(n => this.append(new ZikoUIInputOption(n)));
       return this;
     }
+    get isSelect(){
+      return true;
+    }
   }
 const select=()=>new ZikoUISelect();
 
-class ZikoUIWebcame extends ZikoUIVideo{
-    constructor(){
+class ZikoUITextArea extends ZikoUIElement {
+    constructor() {
       super();
-      this.element.setAttribute("src", "");
-      this.constraints = { audio: true, video: { width: 1280, height: 720 } };
-      //this.video=this.element
+      this.element = document?.createElement("textarea");
     }
-    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;
+    get value(){
+      return this.element.textContent;
     }
-  }
-  const inputCamera=()=>new ZikoUIWebcame();
+    get isTextArea(){
+      return true;
+    }
+}
+const textarea =()=> new ZikoUITextArea();
 
 class ZikoUIFlex extends ZikoUIContainerElement {
   constructor(tag = "div", w = "100%", h = "100%") {
@@ -8775,6 +8896,9 @@ class ZikoUIFlex extends ZikoUIContainerElement {
     this.style({ display: "flex" });
     // this.render();
   }
+  get isFlex(){
+    return true;
+  }
   resp(px,wrap = true) {
     this.wrap(wrap);
     if (this.element.clientWidth < px) this.vertical();
@@ -8861,6 +8985,44 @@ function map_pos_y(align){
 return map_pos_x(-align);
 }
 
+class ZikoUIForm extends ZikoUIFlex{
+    constructor(...items){
+        super("form", "Form");
+        this.append(...items);
+        this.setMethod("POST");
+        this.setAction("/");
+    }
+    setAction(action = "/"){
+        this.setAttr("action", action);
+        return this;
+    }
+    setMethod(method = "post"){
+        this.setAttr("method", method);
+        return this;
+    }
+    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;
+    }
+    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;
+    }
+    getByName(name){
+        return this.data.get(name);
+    }
+}
+const Form = (...items) => new ZikoUIForm(...items);
+
 class ZikoUIGrid extends ZikoUIContainerElement {
     constructor(tag ="div", w = "50vw", h = "50vh") {
       super(tag,"Grid");
@@ -8871,6 +9033,9 @@ class ZikoUIGrid extends ZikoUIContainerElement {
       this.style({ display: "grid" });
     //   this.render();
     }
+    get isGird(){
+        return true;
+      }
     columns(n) {
         let temp = "";
         for (let i = 0; i < n; i++) temp = temp.concat(" auto");
@@ -9048,6 +9213,9 @@ class ZikoUICarousel extends ZikoUIFlex{
             // Handle outside up 
         });
     }
+    get isCarousel(){
+        return true;
+      }
 }
 const Carousel=(...ZikoUIElement)=>new ZikoUICarousel(...ZikoUIElement);
 
@@ -9061,6 +9229,9 @@ class ZikoUICodeNote extends ZikoUIFlex{
         });
         this.vertical(0,0);
     }
+    get isCodeNote(){
+        return true;
+      }
     setCurrentNote(currentNote){
         this.cache.currentNote=currentNote;
         this.cache.currentNoteIndex=this.items.findIndex(n=>n===currentNote);
@@ -9249,6 +9420,9 @@ class ZikoUICodeCell extends ZikoUIFlex{
             // })    
         }
         }
+    get isCodeCell(){
+        return true;
+    }
     // space &nbsp
     get codeText() {
         return (this.Input.element.getElementsByClassName("cm-content")[0])
@@ -9400,6 +9574,9 @@ class ZikoUITabs extends ZikoUIFlex{
         this.init();
         this.display(0);
     }
+    get isTabs(){
+        return true;
+    }
     init(){  
         // Remove old listener
         for(let i=0;i<this.Controller.length;i++){
@@ -9460,41 +9637,361 @@ class ZikoUITabs extends ZikoUIFlex{
 
 const Tabs=(Controllers,Contents)=>new ZikoUITabs(Controllers,Contents);
 
+const palette = {
+    success: {
+        titleColor:"green",
+        contentColor: "#35495e",
+        bgColor: "#d4edda", // Fixed
+        bgColor:"linear-gradient(-225deg, #DFFFCD 0%, #90F9C4 48%, #39F3BB 100%)",
+        borderColor: "#28a745", // Fixed
+        icon: "✅"
+    },
+    info: {
+        titleColor:"blue",
+        contentColor: "#00204a",
+        bgColor: "#93deff", // Fixed
+        bgColor:"radial-gradient(circle at 10% 20%, rgb(147, 230, 241) 0%, rgb(145, 192, 241) 45.5%)",
+        borderColor: "#005689", // Fixed
+        icon: "ℹ️"
+    },
+    warning: {
+        titleColor:"#e4663a",
+        contentColor: "#45171d",
+        bgColor:"#fdffcd",
+        bgColor:"radial-gradient(907px at 3.4% 19.8%, rgb(255, 243, 122) 0%, rgb(255, 102, 145) 97.4%)",
+        borderColor: "#efd510",
+        icon: "⚠️"
+    },
+    danger: {
+        titleColor:"red",
+        contentColor: "#721c24",
+        bgColor: "#f8d7da", // Fixed
+        bgColor:"linear-gradient(90deg, rgb(255, 157, 129) 24.3%, rgb(255, 138, 138) 78.3%)",
+        borderColor: "#c50000", // Fixed
+        icon: "❌" 
+    },
+    tips: {
+        titleColor:null,
+        contentColor: null,
+        bgColor: null, 
+        borderColor: null,
+        icon: "💡" 
+    },
+    important: {
+        titleColor:null,
+        contentColor: null,
+        bgColor: null,
+        borderColor: null,
+        icon: "📌" 
+    },
+    
+};
+
+class ZikoUIAlert extends ZikoUIFlex{
+    constructor(type, title, content){
+        super();
+        this.title = h3(title);
+        this.icon = text$1(palette[type].icon).style({
+          display: "flex",
+          justifyContent:"center",
+          borderRadius:"50%",
+          minWidth:"30px",
+          minHeight:"30px",
+        });
+        this.content = content;
+        this.vertical()
+        .size("200px", "auto")
+        .style({ 
+          borderRadius:"10px",
+          padding:"10px"
+        });
+        this.append(
+          Flex(
+            this.title,
+            this.icon
+          ).size("100%", "40px").style({}).horizontal("space-between",0),
+          this.content
+        );
+        this.useType(type);
+    }
+    get isAlert(){
+      return true;
+    }
+    useType(type){
+      this.style({
+        color:palette[type].color,
+        background:palette[type].bgColor,
+        border: `1px darkblue solid`,
+        borderLeft: `15px ${palette[type].borderColor} solid`,
+      });
+      this.title.style({
+        color:palette[type].titleColor
+      });
+      this.content.st.color(palette[type].titleColor);
+      this.icon.setValue(palette[type].icon).style({
+        border:`2px ${palette[type].borderColor} solid`,        
+        alignItems: type==="warning"?"flex-start":"center",
+      });
+      return this;
+    }
+    useSuccess(){
+      this.useType("success");
+      return this;
+    }
+    useInfo(){
+      this.useType("info");
+      return this;
+    }
+    useWarning(){
+      this.useType("warning");
+      return this;
+    }
+    useDanger(){
+      this.useType("danger");
+      return this;
+    }
+}
+
+const successAlert=(title, content)=>new ZikoUIAlert("success", title, content);
+const infoAlert=(title, content)=>new ZikoUIAlert("info", title, content);
+const warningAlert=(title, content)=>new ZikoUIAlert("warning", title, content);
+const dangerAlert=(title, content)=>new ZikoUIAlert("danger", title, content);
+
+class __ZikoUISplitter__ extends ZikoUIElement{
+    constructor(flexDirection, resizerCursor, resizerProp){
+        super("div", "Splitter");
+        Object.assign(this.cache,{
+            isResizing : false,
+            flexDirection,
+            resizerCursor,
+            resizerProp
+        });
+        this.style({
+            display:"flex",
+            flexDirection : this.cache.flexDirection,
+            border: "2px solid #333",
+            overflow: "hidden"
+        });
+        this.resizer = new ZikoUIElement("div", "resizer").style({
+            [this.cache.resizerProp]:"5px",
+            backgroundColor: "gold",
+            cursor: this.cache.resizerCursor,
+            touchAction: "none", 
+        });
+        this.onPtrDown(e=>{
+            this.cache.isResizing = true;
+            this.style({
+                cursor : this.cache.resizerCursor // ns-resize
+            });
+            this.resizer.element.setPointerCapture(e.event.pointerId);
+        });
+        this.onPtrUp(e=>{
+            this.cache.isResizing = false;
+            this.style({
+                cursor: "default"
+            });
+            this.resizer.element.releasePointerCapture(e.event.pointerId);
+        });
+        this.onPtrCancel(()=>{
+            this.cache.isResizing = false;
+            this.style({
+                cursor: "default"
+            });
+        });
+        this.onPtrOut(()=>{
+            if (this.cache.isResizing) {
+                this.cache.isResizing = false;
+                this.style({
+                    cursor: "default"
+                });
+            }
+        });
+    }
+    get isSplitter(){
+        return true;
+      }
+    styleResizer(style={}){
+        this.resizer.style(style);
+        return this;
+    }
+}
+
+class ZikoUIHorizontalSplitter extends __ZikoUISplitter__{
+    constructor(leftPane, rightPane){
+        super("row", "ew-resize", "width");
+        this.leftPane = leftPane.style({
+            width:"50%",
+            flexGrow: 1,
+            overflow: "hidden"
+        });
+        this.rightPane = rightPane.style({
+            width:"50%",
+            flexGrow: 1,
+            overflow: "hidden"
+        });
+        this.element.append(
+            this.leftPane.element,
+            this.resizer.element,
+            this.rightPane.element
+        );
+        this.onPtrMove(e=>{
+            if (!this.cache.isResizing) return;
+            const containerWidth = this.element.getBoundingClientRect().width; // height
+            const pointerRelativeXpos = e.event.clientX - this.element.getBoundingClientRect().x; // y
+            let newLeftPaneWidth = (pointerRelativeXpos / containerWidth) * 100;
+            let newRightPaneWidth = 100 - newLeftPaneWidth;
+            if (newLeftPaneWidth < 0) newLeftPaneWidth = 0;
+            if (newRightPaneWidth < 0) newRightPaneWidth = 0;
+            this.leftPane.element.style.width = `${newLeftPaneWidth}%`;
+            this.rightPane.element.style.width = `${newRightPaneWidth}%`;
+        });
+    }
+    get isHorizontalSplitter(){
+        return true;
+      }
+}
+const hSplitter=(leftPane, rightPane)=>new ZikoUIHorizontalSplitter(leftPane, rightPane);
+
+class ZikoUIVerticalSplitter extends __ZikoUISplitter__{
+    constructor(topPane, bottomPane){
+        super("column", "ns-resize", "height");
+        this.topPane = topPane.style({
+            height:"50%",
+            flexGrow: 1,
+            overflow: "hidden"
+        });
+        this.bottomPane = bottomPane.style({
+            height:"50%",
+            flexGrow: 1,
+            overflow: "hidden"
+        });
+        this.element.append(
+            this.topPane.element,
+            this.resizer.element,
+            this.bottomPane.element
+        );
+        this.onPtrMove(e=>{
+            if (!this.cache.isResizing) return;
+            const containerHeight = this.element.getBoundingClientRect().height; // height
+            const pointerRelativeYpos = e.event.clientY - this.element.getBoundingClientRect().y; // y
+            let newTopPaneHeight = (pointerRelativeYpos / containerHeight) * 100;
+            let newBottomPaneHeight = 100 - newTopPaneHeight;
+            if (newTopPaneHeight < 0) newTopPaneHeight = 0;
+            if (newBottomPaneHeight < 0) newBottomPaneHeight = 0;
+            this.topPane.element.style.height = `${newTopPaneHeight}%`;
+            this.bottomPane.element.style.height = `${newBottomPaneHeight}%`;
+        });
+    }
+    get isHorizontalSplitter(){
+        return true;
+    }
+}
+const vSplitter=(topPane, bottomPane)=>new ZikoUIVerticalSplitter(topPane, bottomPane);
+
+class ZikoUIBreadcrumbs extends ZikoUIElement{
+    constructor(...items){
+        super("ul", "Breadcrumbs");
+        Object.assign(this.cache,{
+            separatorTextContent:"/"
+        });
+        this.style({
+            listStyle: "none",
+            display: "flex",
+            flexWrap: "wrap"  
+        });
+        this.list=html('li').style({
+            display: "flex",
+            flexWrap: "wrap"
+        });
+        this.append(...items);
+    }
+    #addItem(item){
+        if(["string","number","boolean"].includes(typeof item))item = text$1(item);
+        const li = html("li", item).style({
+            display: "flex",
+            alignItems: "center"   
+        });
+        if(this.element.children.length>0){
+            const separator = text$1(this.cache.separatorTextContent).style({
+                padding: "0 4px"
+            });
+            this.element.append(separator.element);
+        }
+        this.element.append(li.element);
+    }
+    append(...items){
+        items.forEach(n=>this.#addItem(n));
+        return this;
+    }
+    configSeparator(separatorTextContent = this.cache.separator, style = {}){
+        this.cache.separatorTextContent = separatorTextContent;
+        const separators = [...this.element.children].filter(n=>n.tagName==="SPAN");
+        separators.forEach(node=>{
+            node.textContent = separatorTextContent;
+            Object.assign(node.style, style);
+        }
+        );
+        return this;
+    }
+}
+const Breadcrumbs=(...items)=>new ZikoUIBreadcrumbs(...items);
+
 class ZikoUIMain extends ZikoUIContainerElement{
     constructor(){
       super("main","Main");
     }
+    get isMain(){
+      return true
+    }
   }
   class ZikoUIHeader extends ZikoUIContainerElement{
     constructor(){
       super("header","Header");
     }
+    get isHeader(){
+      return true
+    }
   }
   class ZikoUINav extends ZikoUIContainerElement{
     constructor(){
       super("nav","Nav");
     }
+    get isNav(){
+      return true
+    }
   }
   class ZikoUISection extends ZikoUIContainerElement{
     constructor(){
       super("section","Section");
       this.style({position:"relative"});
     }
+    get isSection(){
+      return true
+    }
   }
   class ZikoUIArticle extends ZikoUIContainerElement{
     constructor(){
       super("article","Article");
     }
+    get isArticle(){
+      return true
+    }
   }
   class ZikoUIAside extends ZikoUIContainerElement{
     constructor(){
       super("aside","Aside");
     }
+    get isAside(){
+      return true
+    }
   }
   class ZikoUIFooter extends ZikoUIContainerElement{
     constructor(){
       super("footer","Footer");
-      this.element=document.createElement("footer");
+      this.element=document?.createElement("footer");
+    }
+    get isFooter(){
+      return true
     }
   }
 const Section$1 = (...ZikoUIElement) => new ZikoUISection().append(...ZikoUIElement);
@@ -9508,35 +10005,35 @@ const Aside = (...ZikoUIElement) => new ZikoUIAside().append(...ZikoUIElement);
 class ZikoUITr extends ZikoUIElement{
     constructor(...ZikoUIElement){
         super();
-        this.element=document.createElement("Tr");
+        this.element=document?.createElement("Tr");
         this.append(...ZikoUIElement);
     }
 }
 class ZikoUITd extends ZikoUIElement{
     constructor(...ZikoUIElement){
         super();
-        this.element=document.createElement("Td");
+        this.element=document?.createElement("Td");
         this.append(...ZikoUIElement);
     }
 }
 class ZikoUIThead extends ZikoUIElement{
     constructor(...ZikoUITr){
         super();
-        this.element=document.createElement("Thead");
+        this.element=document?.createElement("Thead");
         this.append(...ZikoUITr);
     }
 }
 class ZikoUITbody extends ZikoUIElement{
     constructor(...ZikoUITr){
         super();
-        this.element=document.createElement("Tbody");
+        this.element=document?.createElement("Tbody");
         this.append(...ZikoUITr);
     }
 }
 class ZikoUICaption extends ZikoUIElement{
     constructor(ZikoUIElement){
         super();
-        this.element=document.createElement("Caption");
+        this.element=document?.createElement("Caption");
         this.append(ZikoUIElement);
     }
 }
@@ -9583,6 +10080,9 @@ class ZikoUITable extends ZikoUIElement {
         if(body)this.fromMatrix(body);
         if(caption)this.setCaption(caption);
     }
+    get isTable(){
+        return true;
+      }
     get caption(){
         return this.structure.caption;
     }
@@ -9704,6 +10204,7 @@ const UI$1={
     link,
     ol,
     ul,
+    Form,
     input,
     search,
     slider,
@@ -9741,6 +10242,13 @@ const UI$1={
     Tabs,
     Collapsible,
     Accordion,
+    hSplitter,
+    vSplitter,
+    Breadcrumbs,
+    successAlert,
+    infoAlert,
+    warningAlert,
+    dangerAlert,
     ExtractAll: function () {
         const keys = Object.keys(this);
         for (let i = 0; i < keys.length; i++) {
@@ -9914,7 +10422,7 @@ class ZikoSvgElement {
 class ZikoSvgRectangle extends ZikoSvgElement{
     constructor(x,y,w,h,center=true){
       super();
-      this.element=document.createElementNS(
+      this.element=document?.createElementNS(
         "http://www.w3.org/2000/svg",
         "rect",
       );
@@ -9955,7 +10463,7 @@ class ZikoSvgRectangle extends ZikoSvgElement{
 class ZikoSvgCircle extends ZikoSvgElement{
     constructor(cx,cy,r){
       super("circle");
-      this.element=document.createElementNS(
+      this.element=document?.createElementttNS(
         "http://www.w3.org/2000/svg",
         "circle",
       );
@@ -9980,7 +10488,7 @@ const svgCircle=(x,y,r)=>new ZikoSvgCircle(x,y,r);
 class ZikoSvgEllipse extends ZikoSvgElement{
     constructor(cx,cy,rx,ry){
       super("ellipse");
-      this.element=document.createElementNS(
+      this.element=document?.createElementNS(
         "http://www.w3.org/2000/svg",
         "ellipse",
       );
@@ -10000,7 +10508,7 @@ const svgEllipse=(x,y,rx,ry)=>new ZikoSvgEllipse(x,y,rx,ry);
 class ZikoSvgLine extends ZikoSvgElement{
     constructor(x1,y1,x2,y2){
       super();
-      this.element=document.createElementNS(
+      this.element=document?.createElementtNS(
         "http://www.w3.org/2000/svg",
         "line",
       );
@@ -10031,7 +10539,7 @@ const svgPolyLine=(X,Y)=>new ZikoSvgPolyLine(X,Y);
 class ZikoSvgPath extends ZikoSvgElement{
     constructor(){
     super();
-      this.element=document.createElementNS(
+      this.element=document?.createElementNS(
         "http://www.w3.org/2000/svg",
         "path",
       );
@@ -10091,7 +10599,7 @@ class ZikoSvgPolygon extends ZikoSvgElement{
       super();
       this.X=X;
       this.Y=Y;
-      this.element=document.createElementNS(
+      this.element=document?.createElementtNS(
         "http://www.w3.org/2000/svg",
         "polygon",
       );
@@ -10120,7 +10628,7 @@ const svgPolygon=(X,Y)=>new ZikoSvgPolygon(X,Y);
 class ZikoSvgText extends ZikoSvgElement{
     constructor(text,x,y){
       super();
-      this.element=document.createElementNS(
+      this.element=document?.createElementNS(
         "http://www.w3.org/2000/svg",
         "text",
       );
@@ -10145,7 +10653,7 @@ const svgText=(text,x,y)=>new ZikoSvgText(text,x,y);
 class ZikoSvgImage extends ZikoSvgElement{
     constructor(src="",w="100%",h="100%",x=0,y=0){
       super();
-      this.element=document.createElementNS(
+      this.element=document?.createElementNS(
         "http://www.w3.org/2000/svg",
         "image",
       );
@@ -10178,7 +10686,7 @@ class ZikoSvgForeignObject extends ZikoSvgElement{
     constructor(x=0,y=0,w="100%",h="100%",...ZikoUIElement){
       super("foreignObject");
       this.items=[];
-      this.element=document.createElementNS(
+      this.element=document?.createElementtNS(
         "http://www.w3.org/2000/svg",
         "foreignObject",
       );
@@ -10209,7 +10717,7 @@ class ZikoSvgGroupe extends ZikoSvgElement{
     constructor(...svgElement){
       super();
       this.items=[];
-      this.element=document.createElementNS(
+      this.element=document?.createElementNS(
         "http://www.w3.org/2000/svg",
         "g",
       );
@@ -10237,7 +10745,7 @@ class ZikoSvgLink extends ZikoSvgElement{
     constructor(href,...svgElement){
       super();
       this.items=[];
-      this.element=document.createElementNS(
+      this.element=document?.createElementNS(
         "http://www.w3.org/2000/svg",
         "a",
       );
@@ -10273,7 +10781,7 @@ const svgGrid=(w,h,r=10,c=10)=>{
 class ZikoUICanvas extends ZikoUIContainerElement{
     constructor(w,h){
         super("canvas","canvas");
-        //this.element=document.createElement("canvas");
+        //this.element=document?.createElement("canvas");
         this.ctx = this.element.getContext("2d");
         this.style({
             border:"1px red solid",
@@ -10417,14 +10925,14 @@ class ZikoUICanvas extends ZikoUIContainerElement{
         return canvas;
     }
     toImage() {
-        this.img = document.createElement("img");
+        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"),
+            var newImg = document?.createElement("img"),
                 url = URL.createObjectURL(blob);
             newImg.onload = function () {
                 URL.revokeObjectURL(url);
@@ -10848,42 +11356,6 @@ const __Config__={
     init:()=>document.documentElement.setAttribute("data-engine","zikojs")
 };
 
-if(globalThis?.document){
-    class ZikoUIComponent extends HTMLElement{
-    constructor(){
-        super();
-        this.shadowDOM = this.attachShadow({ mode: 'open' });
-        this.wrapper=document.createElement("div");
-    }
-    connectedCallback() {
-        this.setAttribute('role', 'region');
-        this.setAttribute('data-engine',"zikojs");
-        this.shadowDOM.append(this.wrapper);
-        this.observeContentChanges();
-    }
-    observeContentChanges() {
-        const observer = new MutationObserver((mutations) => {
-            mutations.forEach((mutation) => {
-                if (mutation.type === 'childList' || mutation.type === 'characterData') {
-                    this.wrapper.innerHTML="";
-                    __Ziko__.__Config__.setDefault({ target: this.wrapper });
-                    globalThis.eval(this.innerHTML);
-                }
-            });
-        });
-        observer.observe(this, { childList: true, subtree: true, characterData: true });
-    }
-
-    disconnectedCallback() {
-        console.log('ZikoUIComponent removed from page.');
-    }
-}
-    globalThis.customElements.define('ziko-ui', ZikoUIComponent);
-}
-else {
-    var ZikoUIComponent = null;
-}
-
 class ZikoSeo{
     constructor(app){
         this.app=app;
@@ -10892,7 +11364,7 @@ class ZikoSeo{
     }
     #setMeta(key,value){
         const meta=document.querySelector(`meta[name=${key}]`);
-        this.meta=meta?meta:document.createElement("meta");
+        this.meta=meta?meta:document?.createElement("meta");
         this.meta.setAttribute("name",key);
         this.meta.setAttribute("content",value);
         if(!meta)this.app.head.append(this.meta);
@@ -10900,7 +11372,7 @@ class ZikoSeo{
     }
     charset(charset="utf-8"){
         const meta=document.querySelector("meta[charset]");
-        this.meta=meta?meta:document.createElement("meta");
+        this.meta=meta?meta:document?.createElementt("meta");
         this.meta.setAttribute("charset",charset);
         if(!meta)this.app.head.append(this.meta);
         return this;
@@ -10946,10 +11418,10 @@ class ZikoUIApp extends ZikoUIFlex{
     #init(){
         this.root.setAttribute("data-engine","zikojs");
         const head=this.root.getElementsByTagName("head")[0];
-        this.head=head?head:this.head=document.createElement("head");
-        if(!head)this.root.insertBefore(this.head,document.body);
+        this.head=head?head:this.head=document?.createElementtt("head");
+        if(!head)this.root.insertBefore(this.head,document?.body);
         const title=this.head.getElementsByTagName("title")[0];
-        this.Title=title?title:document.createElement("title");
+        this.Title=title?title:document?.createElementt("title");
         if(!title)this.head.append(this.Title);
     }
     title(title=this.title.textContent){
@@ -11013,4 +11485,4 @@ function RemoveAll(){
     Data.RemoveAll();
 }
 
-export { Accordion, App, Article, Aside, Base, Canvas, Carousel, CodeCell, CodeNote, Collapsible, Combinaison, Complex, DarkThemes, Data, E, EPSILON, Ease, ExtractAll, Fixed, Flex, Footer, Graphics, Grid$1 as Grid, Header, LightThemes, LinearSystem, Logic$1 as Logic, Main, Math$1 as Math, Matrix, Nav, PI, Permutation, Random, Reactivity, RemoveAll, SPA, Section$1 as Section, Signal, Str, Svg, Table, Tabs, Themes, Time, UI$1 as UI, Utils, ZikoUIAbbrText, ZikoUIAccordion, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBlockQuote, ZikoUIBr, ZikoUICanvas, ZikoUICodeNote, ZikoUICodeText, ZikoUIComponent, ZikoUIDefintion, ZikoUIElement, ZikoUIFigure, ZikoUIFooter, ZikoUIHeader, ZikoUIHeading, ZikoUIHr, ZikoUIHtmlTag, ZikoUIImage, ZikoUILink, ZikoUIMain, ZikoUINav, ZikoUIParagraphe, ZikoUIQuote, ZikoUISection, ZikoUISubText, ZikoUISupText, ZikoUISvg, ZikoUIText, ZikoUIVideo, __Config__, abbrText, abs, accum, acos, acosh, acot, add, adoc2html, arange, arr2str, asin, asinh, atan, atan2, atanh, audio, bessel, beta, blockQuote, br, brs, btn, canvasArc, canvasCircle, canvasLine, canvasPoints, canvasRect, cartesianProduct, ceil, checkbox, choleskyDecomposition, clamp, codeText, complex, cos, cosh, cot, coth, count, countWords, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, datalist, Ziko as default, deg2rad, dfnText, div, e, fact, figure, floor, gamma, geomspace, h1, h2, h3, h4, h5, h6, hr, hrs, html, hypot, image, inRange, input, inputCamera, inputColor, inputDate, inputDateTime, inputEmail, inputImage, inputNumber, inputPassword, inputTime, isApproximatlyEqual, json2arr, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, li, link, linspace, ln, logspace, luDecomposition, map, mapfun$1 as mapfun, markdown2html, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ol, ones, p, pgcd, pow, powerSet, ppcm, prod, qrDecomposition, quote, rad2deg, radio, removeExtraSpace, round, search, sec, select, sig, sign, sin, sinc, sinh, slider, sqrt, sqrtn, str, sub, subSet, subText, sum, supText, svg2ascii, svg2img, svg2imgUrl, svg2str, svgCircle, svgEllipse, svgGrid, svgGroupe, svgImage, svgLine, svgLink, svgObject, svgPath, svgPolyLine, svgPolygon, svgRect, svgText, tan, tanh, text$1 as text, textarea, timeTaken, time_memory_Taken, ul, useAnimation, useBattery, useBluetooth, useChannel, useClickEventnt as useClickEvent, useClipboardEvent, useCustomEvent, useDebounce, useDragEvent, useDropEvent, useEventEmitter, useFavIcon, useFocusEvent, useGeolocation, useHashEvent, useInputEvent, useKeyEvenent as useKeyEvent, useLocaleStorage, useMediaQuery, useMouseEvent, usePointerEvent, useSessionStorage, useStyle, useSuccesifKeys, useTheme, useThread, useThrottle, useTimeLoop, useTitle, useWheelEventnent as useWheelEvent, video, wait, waitForUIElm, waitForUIElmSync, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };
+export { Accordion, App, Article, Aside, Base, Breadcrumbs, Canvas, Carousel, CodeCell, CodeNote, Collapsible, Combinaison, Complex, DarkThemes, Data, E, EPSILON, Ease, ExtractAll, Fixed, Flex, Footer, Form, Graphics, Grid$1 as Grid, Header, LightThemes, LinearSystem, Logic$1 as Logic, Main, Math$1 as Math, Matrix, Nav, PI, Permutation, Random, Reactivity, RemoveAll, SPA, Section$1 as Section, Signal, Str, Svg, Table, Tabs, Themes, Time, UI$1 as UI, Utils, ZikoUIAbbrText, ZikoUIAccordion, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBlockQuote, ZikoUIBr, ZikoUIBreadcrumbs, ZikoUICanvas, ZikoUICodeNote, ZikoUICodeText, ZikoUIDefintion, ZikoUIElement, ZikoUIFigure, ZikoUIFooter, ZikoUIForm, ZikoUIHeader, ZikoUIHeading, ZikoUIHorizontalSplitter, 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, ZikoUISection, ZikoUISelect, ZikoUISubText, ZikoUISupText, ZikoUISvg, ZikoUIText, ZikoUITextArea, ZikoUIVerticalSplitter, ZikoUIVideo, __Config__, abbrText, abs, accum, acos, acosh, acot, add, adoc2html, arange, arr2str, asin, asinh, atan, atan2, atanh, audio, bessel, beta, blockQuote, br, brs, btn, canvasArc, canvasCircle, canvasLine, canvasPoints, canvasRect, cartesianProduct, ceil, checkbox, choleskyDecomposition, clamp, codeText, complex, cos, cosh, cot, coth, count, countWords, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, dangerAlert, datalist, Ziko as default, deg2rad, dfnText, div, e, fact, figure, floor, gamma, geomspace, h1, h2, h3, h4, h5, h6, hSplitter, hr, hrs, html, hypot, image, inRange, infoAlert, input, inputCamera, inputColor, inputDate, inputDateTime, inputEmail, inputImage, inputNumber, inputPassword, inputTime, isApproximatlyEqual, json2arr, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, li, link, linspace, ln, logspace, luDecomposition, map, mapfun$1 as mapfun, markdown2html, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ol, ones, p, pgcd, pow, powerSet, ppcm, prod, qrDecomposition, quote, rad2deg, radio, removeExtraSpace, round, search, sec, select, sig, sign, sin, sinc, sinh, slider, sqrt, sqrtn, str, sub, subSet, subText, successAlert, sum, supText, svg2ascii, svg2img, svg2imgUrl, svg2str, svgCircle, svgEllipse, svgGrid, svgGroupe, svgImage, svgLine, svgLink, svgObject, svgPath, svgPolyLine, svgPolygon, svgRect, svgText, tan, tanh, text$1 as text, textarea, timeTaken, time_memory_Taken, ul, useAnimation, useBattery, useBluetooth, useChannel, useClickEventnt as useClickEvent, useClipboardEvent, useCustomEvent, useDebounce, useDragEvent, useDropEvent, useEventEmitter, useFavIcon, useFocusEvent, useGeolocation, useHashEvent, useInputEvent, useKeyEvenent as useKeyEvent, useLocaleStorage, useMediaQuery, useMouseEvent, usePointerEvent, useSessionStorage, useStyle, useSuccesifKeys, useTheme, useThread, useThrottle, useTimeLoop, useTitle, useWheelEventnent as useWheelEvent, vSplitter, video, wait, waitForUIElm, waitForUIElmSync, warningAlert, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };