ziko 0.0.11 → 0.0.12

package/dist/ziko.js

@@ -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
@@ -1348,7 +1348,7 @@
       //     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){
@@ -3091,7 +3091,7 @@
         return this;
       }
     }  
-    const useTheme=(id=0)=>(theme=0)=>new ZikoUseTheme(theme,id);
+    const useTheme=(theme, id=0)=>new ZikoUseTheme(theme,id);
 
   class ZikoUseEventEmitter {
       constructor() {
@@ -3196,7 +3196,7 @@
           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;
@@ -3447,6 +3447,15 @@
           null    
       );
   }
+  function pointercancel_controller(e){
+      EVENT_CONTROLLER.call(
+          this,
+          e,
+          "cancel",
+          null,
+          null    
+      );
+  }
   class ZikoEventPointer extends ZikoEvent{
       constructor(target){
           super(target);
@@ -3477,6 +3486,7 @@
                   enter:false,
                   out:false,
                   leave:false,
+                  cancel:false
               },
               paused:{
                   down:false,
@@ -3484,7 +3494,8 @@
                   up:false,
                   enter:false,
                   out:false,
-                  leave:false,          
+                  leave:false,
+                  cancel:false          
               },
               stream:{
                   enabled:{
@@ -3494,6 +3505,7 @@
                       enter:false,
                       out:false,
                       leave:false,
+                      cancel:false
                   },
                   clear:{
                       down:false,
@@ -3501,7 +3513,8 @@
                       up:false,
                       enter:false,
                       out:false,
-                      leave:false,            
+                      leave:false,
+                      cancel:false            
                   },
                   history:{
                       down:[],
@@ -3518,7 +3531,8 @@
                   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={
@@ -3528,36 +3542,42 @@
               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}={}){
@@ -4959,91 +4979,6 @@
   }
   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;
@@ -5309,7 +5244,7 @@
               }
           });
     
-          observer.observe(document.body, {
+          observer.observe(document?.body, {
               childList: true,
               subtree: true
           });
@@ -5577,9 +5512,9 @@
 
   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);
@@ -5687,6 +5622,41 @@
       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;
@@ -5701,7 +5671,7 @@
     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);
       // }
@@ -5710,7 +5680,7 @@
     }
     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) {
@@ -5808,6 +5778,11 @@
       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);
@@ -5997,6 +5972,9 @@
         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;
@@ -6021,22 +5999,21 @@
       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;  
@@ -6045,20 +6022,24 @@
         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) {
@@ -6071,39 +6052,40 @@
       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);
@@ -7086,8 +7068,8 @@
       }
       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];
@@ -8100,6 +8082,9 @@
           lineBreak,
         });
       }
+      get isText(){
+        return true;
+      }
       get value(){
         return this.element.textContent;
       }
@@ -8110,11 +8095,11 @@
       }
       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]) 
@@ -8122,11 +8107,11 @@
           //   && !(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) {
@@ -8148,32 +8133,50 @@
         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);
@@ -8187,12 +8190,18 @@
       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);
@@ -8202,6 +8211,9 @@
         super(`h${type}`,`h${type}`);
         this.element.textContent = value;
       }
+      get isHeading(){
+        return true;
+      }
       get value() {
         return this.element.innerText;
       }
@@ -8229,11 +8241,14 @@
   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 {
@@ -8257,23 +8272,43 @@
   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();
@@ -8288,6 +8323,9 @@
       super("li","li");
       this.append(UI);
     }
+    get isLi(){
+      return true;
+    }
   }
   class ZikoUIList extends ZikoUIContainerElement {
       constructor(element,name) {
@@ -8295,6 +8333,9 @@
         delete this.append;
         this.style({ listStylePosition: "inside" });
       }
+      get isList(){
+        return true;
+      }
       append(...arr){
         for (let i = 0; i < arr.length; i++) {
           let li = null;
@@ -8387,6 +8428,9 @@
       super("ol","ol");
       this.append(...arr);
     }
+    get isOl(){
+      return true;
+    }
     type(tp = 1) {
       this.element.setAttribute("type", tp);
       return this;
@@ -8401,93 +8445,68 @@
       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() {
@@ -8516,260 +8535,362 @@
       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%") {
@@ -8781,6 +8902,9 @@
       this.style({ display: "flex" });
       // this.render();
     }
+    get isFlex(){
+      return true;
+    }
     resp(px,wrap = true) {
       this.wrap(wrap);
       if (this.element.clientWidth < px) this.vertical();
@@ -8867,6 +8991,44 @@
   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");
@@ -8877,6 +9039,9 @@
         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");
@@ -9054,6 +9219,9 @@
               // Handle outside up 
           });
       }
+      get isCarousel(){
+          return true;
+        }
   }
   const Carousel=(...ZikoUIElement)=>new ZikoUICarousel(...ZikoUIElement);
 
@@ -9067,6 +9235,9 @@
           });
           this.vertical(0,0);
       }
+      get isCodeNote(){
+          return true;
+        }
       setCurrentNote(currentNote){
           this.cache.currentNote=currentNote;
           this.cache.currentNoteIndex=this.items.findIndex(n=>n===currentNote);
@@ -9255,6 +9426,9 @@
               // })    
           }
           }
+      get isCodeCell(){
+          return true;
+      }
       // space &nbsp
       get codeText() {
           return (this.Input.element.getElementsByClassName("cm-content")[0])
@@ -9406,6 +9580,9 @@
           this.init();
           this.display(0);
       }
+      get isTabs(){
+          return true;
+      }
       init(){  
           // Remove old listener
           for(let i=0;i<this.Controller.length;i++){
@@ -9466,41 +9643,361 @@
 
   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);
@@ -9514,35 +10011,35 @@
   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);
       }
   }
@@ -9589,6 +10086,9 @@
           if(body)this.fromMatrix(body);
           if(caption)this.setCaption(caption);
       }
+      get isTable(){
+          return true;
+        }
       get caption(){
           return this.structure.caption;
       }
@@ -9710,6 +10210,7 @@
       link,
       ol,
       ul,
+      Form,
       input,
       search,
       slider,
@@ -9747,6 +10248,13 @@
       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++) {
@@ -9920,7 +10428,7 @@
   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",
         );
@@ -9961,7 +10469,7 @@
   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",
         );
@@ -9986,7 +10494,7 @@
   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",
         );
@@ -10006,7 +10514,7 @@
   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",
         );
@@ -10037,7 +10545,7 @@
   class ZikoSvgPath extends ZikoSvgElement{
       constructor(){
       super();
-        this.element=document.createElementNS(
+        this.element=document?.createElementNS(
           "http://www.w3.org/2000/svg",
           "path",
         );
@@ -10097,7 +10605,7 @@
         super();
         this.X=X;
         this.Y=Y;
-        this.element=document.createElementNS(
+        this.element=document?.createElementtNS(
           "http://www.w3.org/2000/svg",
           "polygon",
         );
@@ -10126,7 +10634,7 @@
   class ZikoSvgText extends ZikoSvgElement{
       constructor(text,x,y){
         super();
-        this.element=document.createElementNS(
+        this.element=document?.createElementNS(
           "http://www.w3.org/2000/svg",
           "text",
         );
@@ -10151,7 +10659,7 @@
   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",
         );
@@ -10184,7 +10692,7 @@
       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",
         );
@@ -10215,7 +10723,7 @@
       constructor(...svgElement){
         super();
         this.items=[];
-        this.element=document.createElementNS(
+        this.element=document?.createElementNS(
           "http://www.w3.org/2000/svg",
           "g",
         );
@@ -10243,7 +10751,7 @@
       constructor(href,...svgElement){
         super();
         this.items=[];
-        this.element=document.createElementNS(
+        this.element=document?.createElementNS(
           "http://www.w3.org/2000/svg",
           "a",
         );
@@ -10279,7 +10787,7 @@
   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",
@@ -10423,14 +10931,14 @@
           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);
@@ -10854,42 +11362,6 @@
       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;
@@ -10898,7 +11370,7 @@
       }
       #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);
@@ -10906,7 +11378,7 @@
       }
       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;
@@ -10952,10 +11424,10 @@
       #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){
@@ -11024,6 +11496,7 @@
   exports.Article = Article;
   exports.Aside = Aside;
   exports.Base = Base;
+  exports.Breadcrumbs = Breadcrumbs;
   exports.Canvas = Canvas;
   exports.Carousel = Carousel;
   exports.CodeCell = CodeCell;
@@ -11040,6 +11513,7 @@
   exports.Fixed = Fixed;
   exports.Flex = Flex;
   exports.Footer = Footer;
+  exports.Form = Form;
   exports.Graphics = Graphics;
   exports.Grid = Grid$1;
   exports.Header = Header;
@@ -11073,6 +11547,7 @@
   exports.ZikoUIAudio = ZikoUIAudio;
   exports.ZikoUIBlockQuote = ZikoUIBlockQuote;
   exports.ZikoUIBr = ZikoUIBr;
+  exports.ZikoUIBreadcrumbs = ZikoUIBreadcrumbs;
   exports.ZikoUICanvas = ZikoUICanvas;
   exports.ZikoUICodeNote = ZikoUICodeNote;
   exports.ZikoUICodeText = ZikoUICodeText;
@@ -11080,21 +11555,42 @@
   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;
@@ -11143,6 +11639,7 @@
   exports.csv2matrix = csv2matrix;
   exports.csv2object = csv2object;
   exports.csv2sql = csv2sql;
+  exports.dangerAlert = dangerAlert;
   exports.datalist = datalist;
   exports.default = Ziko;
   exports.deg2rad = deg2rad;
@@ -11160,12 +11657,14 @@
   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;
@@ -11234,6 +11733,7 @@
   exports.sub = sub;
   exports.subSet = subSet;
   exports.subText = subText;
+  exports.successAlert = successAlert;
   exports.sum = sum;
   exports.supText = supText;
   exports.svg2ascii = svg2ascii;
@@ -11290,10 +11790,12 @@
   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;