ziko 0.0.11 → 0.0.12

package/dist/ziko.cjs

@@ -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
@@ -1346,7 +1346,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){
@@ -3089,7 +3089,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() {
@@ -3194,7 +3194,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;
@@ -3445,6 +3445,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);
@@ -3475,6 +3484,7 @@ class ZikoEventPointer extends ZikoEvent{
                 enter:false,
                 out:false,
                 leave:false,
+                cancel:false
             },
             paused:{
                 down:false,
@@ -3482,7 +3492,8 @@ class ZikoEventPointer extends ZikoEvent{
                 up:false,
                 enter:false,
                 out:false,
-                leave:false,          
+                leave:false,
+                cancel:false          
             },
             stream:{
                 enabled:{
@@ -3492,6 +3503,7 @@ class ZikoEventPointer extends ZikoEvent{
                     enter:false,
                     out:false,
                     leave:false,
+                    cancel:false
                 },
                 clear:{
                     down:false,
@@ -3499,7 +3511,8 @@ class ZikoEventPointer extends ZikoEvent{
                     up:false,
                     enter:false,
                     out:false,
-                    leave:false,            
+                    leave:false,
+                    cancel:false            
                 },
                 history:{
                     down:[],
@@ -3516,7 +3529,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={
@@ -3526,36 +3540,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}={}){
@@ -4957,91 +4977,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;
@@ -5307,7 +5242,7 @@ const waitForUIElm=(UIElement)=>{
             }
         });
   
-        observer.observe(document.body, {
+        observer.observe(document?.body, {
             childList: true,
             subtree: true
         });
@@ -5575,9 +5510,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);
@@ -5685,6 +5620,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;
@@ -5699,7 +5669,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);
     // }
@@ -5708,7 +5678,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) {
@@ -5806,6 +5776,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);
@@ -5995,6 +5970,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;
@@ -6019,22 +5997,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;  
@@ -6043,20 +6020,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) {
@@ -6069,39 +6050,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);
@@ -7084,8 +7066,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];
@@ -8098,6 +8080,9 @@ class __ZikoUIText__ extends ZikoUIContainerElement {
         lineBreak,
       });
     }
+    get isText(){
+      return true;
+    }
     get value(){
       return this.element.textContent;
     }
@@ -8108,11 +8093,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]) 
@@ -8120,11 +8105,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) {
@@ -8146,32 +8131,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);
@@ -8185,12 +8188,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);
@@ -8200,6 +8209,9 @@ class ZikoUIHeading extends ZikoUIElement {
       super(`h${type}`,`h${type}`);
       this.element.textContent = value;
     }
+    get isHeading(){
+      return true;
+    }
     get value() {
       return this.element.innerText;
     }
@@ -8227,11 +8239,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 {
@@ -8255,23 +8270,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();
@@ -8286,6 +8321,9 @@ class ZikoUILI extends ZikoUIContainerElement{
     super("li","li");
     this.append(UI);
   }
+  get isLi(){
+    return true;
+  }
 }
 class ZikoUIList extends ZikoUIContainerElement {
     constructor(element,name) {
@@ -8293,6 +8331,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;
@@ -8385,6 +8426,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;
@@ -8399,93 +8443,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() {
@@ -8514,260 +8533,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%") {
@@ -8779,6 +8900,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();
@@ -8865,6 +8989,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");
@@ -8875,6 +9037,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");
@@ -9052,6 +9217,9 @@ class ZikoUICarousel extends ZikoUIFlex{
             // Handle outside up 
         });
     }
+    get isCarousel(){
+        return true;
+      }
 }
 const Carousel=(...ZikoUIElement)=>new ZikoUICarousel(...ZikoUIElement);
 
@@ -9065,6 +9233,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);
@@ -9253,6 +9424,9 @@ class ZikoUICodeCell extends ZikoUIFlex{
             // })    
         }
         }
+    get isCodeCell(){
+        return true;
+    }
     // space &nbsp
     get codeText() {
         return (this.Input.element.getElementsByClassName("cm-content")[0])
@@ -9404,6 +9578,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++){
@@ -9464,41 +9641,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);
@@ -9512,35 +10009,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);
     }
 }
@@ -9587,6 +10084,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;
     }
@@ -9708,6 +10208,7 @@ const UI$1={
     link,
     ol,
     ul,
+    Form,
     input,
     search,
     slider,
@@ -9745,6 +10246,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++) {
@@ -9918,7 +10426,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",
       );
@@ -9959,7 +10467,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",
       );
@@ -9984,7 +10492,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",
       );
@@ -10004,7 +10512,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",
       );
@@ -10035,7 +10543,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",
       );
@@ -10095,7 +10603,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",
       );
@@ -10124,7 +10632,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",
       );
@@ -10149,7 +10657,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",
       );
@@ -10182,7 +10690,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",
       );
@@ -10213,7 +10721,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",
       );
@@ -10241,7 +10749,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",
       );
@@ -10277,7 +10785,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",
@@ -10421,14 +10929,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);
@@ -10852,42 +11360,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 {
-    exports.ZikoUIComponent = null;
-}
-
 class ZikoSeo{
     constructor(app){
         this.app=app;
@@ -10896,7 +11368,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);
@@ -10904,7 +11376,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;
@@ -10950,10 +11422,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){
@@ -11022,6 +11494,7 @@ exports.App = App;
 exports.Article = Article;
 exports.Aside = Aside;
 exports.Base = Base;
+exports.Breadcrumbs = Breadcrumbs;
 exports.Canvas = Canvas;
 exports.Carousel = Carousel;
 exports.CodeCell = CodeCell;
@@ -11038,6 +11511,7 @@ exports.ExtractAll = ExtractAll;
 exports.Fixed = Fixed;
 exports.Flex = Flex;
 exports.Footer = Footer;
+exports.Form = Form;
 exports.Graphics = Graphics;
 exports.Grid = Grid$1;
 exports.Header = Header;
@@ -11071,6 +11545,7 @@ exports.ZikoUIAside = ZikoUIAside;
 exports.ZikoUIAudio = ZikoUIAudio;
 exports.ZikoUIBlockQuote = ZikoUIBlockQuote;
 exports.ZikoUIBr = ZikoUIBr;
+exports.ZikoUIBreadcrumbs = ZikoUIBreadcrumbs;
 exports.ZikoUICanvas = ZikoUICanvas;
 exports.ZikoUICodeNote = ZikoUICodeNote;
 exports.ZikoUICodeText = ZikoUICodeText;
@@ -11078,21 +11553,42 @@ exports.ZikoUIDefintion = ZikoUIDefintion;
 exports.ZikoUIElement = ZikoUIElement;
 exports.ZikoUIFigure = ZikoUIFigure;
 exports.ZikoUIFooter = ZikoUIFooter;
+exports.ZikoUIForm = ZikoUIForm;
 exports.ZikoUIHeader = ZikoUIHeader;
 exports.ZikoUIHeading = ZikoUIHeading;
+exports.ZikoUIHorizontalSplitter = ZikoUIHorizontalSplitter;
 exports.ZikoUIHr = ZikoUIHr;
 exports.ZikoUIHtmlTag = ZikoUIHtmlTag;
 exports.ZikoUIImage = ZikoUIImage;
+exports.ZikoUIInput = ZikoUIInput;
+exports.ZikoUIInputCheckbox = ZikoUIInputCheckbox;
+exports.ZikoUIInputColor = ZikoUIInputColor;
+exports.ZikoUIInputDatalist = ZikoUIInputDatalist$1;
+exports.ZikoUIInputDate = ZikoUIInputDate;
+exports.ZikoUIInputDateTime = ZikoUIInputDateTime;
+exports.ZikoUIInputEmail = ZikoUIInputEmail;
+exports.ZikoUIInputImage = ZikoUIInputImage;
+exports.ZikoUIInputNumber = ZikoUIInputNumber;
+exports.ZikoUIInputOption = ZikoUIInputOption;
+exports.ZikoUIInputPassword = ZikoUIInputPassword;
+exports.ZikoUIInputRadio = ZikoUIInputRadio;
+exports.ZikoUIInputSearch = ZikoUIInputSearch;
+exports.ZikoUIInputSlider = ZikoUIInputSlider$1;
+exports.ZikoUIInputTime = ZikoUIInputTime;
+exports.ZikoUILabel = ZikoUILabel;
 exports.ZikoUILink = ZikoUILink;
 exports.ZikoUIMain = ZikoUIMain;
 exports.ZikoUINav = ZikoUINav;
 exports.ZikoUIParagraphe = ZikoUIParagraphe;
 exports.ZikoUIQuote = ZikoUIQuote;
 exports.ZikoUISection = ZikoUISection;
+exports.ZikoUISelect = ZikoUISelect;
 exports.ZikoUISubText = ZikoUISubText;
 exports.ZikoUISupText = ZikoUISupText;
 exports.ZikoUISvg = ZikoUISvg;
 exports.ZikoUIText = ZikoUIText;
+exports.ZikoUITextArea = ZikoUITextArea;
+exports.ZikoUIVerticalSplitter = ZikoUIVerticalSplitter;
 exports.ZikoUIVideo = ZikoUIVideo;
 exports.__Config__ = __Config__;
 exports.abbrText = abbrText;
@@ -11141,6 +11637,7 @@ exports.csv2json = csv2json;
 exports.csv2matrix = csv2matrix;
 exports.csv2object = csv2object;
 exports.csv2sql = csv2sql;
+exports.dangerAlert = dangerAlert;
 exports.datalist = datalist;
 exports.default = Ziko;
 exports.deg2rad = deg2rad;
@@ -11158,12 +11655,14 @@ exports.h3 = h3;
 exports.h4 = h4;
 exports.h5 = h5;
 exports.h6 = h6;
+exports.hSplitter = hSplitter;
 exports.hr = hr;
 exports.hrs = hrs;
 exports.html = html;
 exports.hypot = hypot;
 exports.image = image;
 exports.inRange = inRange;
+exports.infoAlert = infoAlert;
 exports.input = input;
 exports.inputCamera = inputCamera;
 exports.inputColor = inputColor;
@@ -11232,6 +11731,7 @@ exports.str = str;
 exports.sub = sub;
 exports.subSet = subSet;
 exports.subText = subText;
+exports.successAlert = successAlert;
 exports.sum = sum;
 exports.supText = supText;
 exports.svg2ascii = svg2ascii;
@@ -11288,10 +11788,12 @@ exports.useThrottle = useThrottle;
 exports.useTimeLoop = useTimeLoop;
 exports.useTitle = useTitle;
 exports.useWheelEvent = useWheelEventnent;
+exports.vSplitter = vSplitter;
 exports.video = video;
 exports.wait = wait;
 exports.waitForUIElm = waitForUIElm;
 exports.waitForUIElmSync = waitForUIElmSync;
+exports.warningAlert = warningAlert;
 exports.watchAttr = watchAttr;
 exports.watchChildren = watchChildren;
 exports.watchIntersection = watchIntersection;