ziko 0.0.20 → 0.0.22

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sat Nov 16 2024 22:09:26 GMT+0100 (UTC+01:00)
+  Date : Sun Dec 08 2024 23:39:16 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
@@ -27,36 +27,46 @@ const __RemoveAll__ =(obj)=> {
     }
 };
 
-const { PI, E } = Math;
+const { PI: PI$1, E } = Math;
 const EPSILON=Number.EPSILON;
 
 var __Const__ = /*#__PURE__*/Object.freeze({
     __proto__: null,
     E: E,
     EPSILON: EPSILON,
-    PI: PI
+    PI: PI$1
 });
 
-const Fixed={
-    cos:x=>+Math.cos(x).toFixed(15),
-    sin:x=>+Math.sin(x).toFixed(15),
-    tan:x=>+Math.tan(x).toFixed(31),
-    sinc:x=>+Math.sin(Math.PI*x)/(Math.PI*x),
-    sec:x=>+1/Math.cos(x).toFixed(15),
-    csc:x=>+1/Math.sin(x).toFixed(15),
-    cot:x=>+1/Math.tan(x).toFixed(15),
-    acos:x=>+Math.acos(x).toFixed(15),
-    asin:x=>+Math.asin(x).toFixed(15),
-    atan:x=>+Math.atan(x).toFixed(15),
-    acot:x=>+Math.PI/2-Math.atan(x).toFixed(15),
-    cosh:x=>+Math.cosh(x).toFixed(15),
-    sinh:x=>+Math.sinh(x).toFixed(15),
-    tanh:x=>+Math.tanh(x).toFixed(15),
-    coth:n=>+(1/2*Math.log((1+n)/(1-n))).toFixed(15),
-    acosh:x=>+Math.acosh(x).toFixed(15),
-    asinh:x=>+Math.asinh(x).toFixed(15),
-    atanh:x=>+Math.atanh(x).toFixed(15),
-};
+const {PI, cos: cos$1, sin: sin$1, tan: tan$1, acos: acos$1, asin: asin$1, atan: atan$1, cosh: cosh$1, sinh: sinh$1, tanh: tanh$1, acosh: acosh$1, asinh: asinh$1, atanh: atanh$1, log} = Math;
+let Fixed={
+    cos: cos$1,
+    sin: sin$1,
+    tan: tan$1,
+    sinc: x => sin$1(PI*x)/(PI*x),
+    sec: x => 1/cos$1(x),
+    csc: x => 1/sin$1(x),
+    cot: x => 1/tan$1(x),
+    acos: acos$1,
+    asin: asin$1,
+    atan: atan$1,
+    acot: x => PI/2-atan$1(x),
+    cosh: cosh$1,
+    sinh: sinh$1,
+    tanh: tanh$1,
+    coth: n => (1/2*log((1+n)/(1-n))),
+    acosh: acosh$1,
+    asinh: asinh$1,
+    atanh: atanh$1,
+};
+
+Fixed = new Proxy(Fixed, {
+    get(target, prop) {
+        if(prop in target){
+            return x => + target[prop](x).toFixed(15);
+        }
+        return undefined;
+    }
+});
 
 class ZikoMath {}
 
@@ -100,8 +110,9 @@ const mapfun$1=(fun,...X)=>{
                 default : return fun(x)
             }
         }
-        else if(x instanceof Object)return Object.fromEntries(Object.entries(x).map(n=>n=[n[0],mapfun$1(fun,n[1])]))
-
+        else if(x instanceof Object){
+            return fun(Object) || Object.fromEntries(Object.entries(x).map(n=>n=[n[0],mapfun$1(fun,n[1])]))
+        }
     });
    return Y.length==1?Y[0]:Y; 
 };
@@ -4834,12 +4845,16 @@ const Reactivity={
 };
 
 class ZikoUIElement {
-  constructor(element ,name="") {
+  constructor(element ,name="", el_type="html") {
     this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
     if(typeof element === "string") {
-      element === "svg" ? element=globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", "svg"): element = globalThis?.document?.createElement(element);
+      switch(el_type){
+        case "html" : element = globalThis?.document?.createElement(element); break;
+        case "svg" : element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element);
+        default : throw Error("Not supported")
+      }
     }
-    if(element)this.element = element;
+    if(element)this.__ele__ = element;
     this.uuid=this.constructor.name+"-"+Random.string(10);
     this.cache = {
       name,
@@ -4875,14 +4890,17 @@ class ZikoUIElement {
     this.style({ 
       position: "relative",
       boxSizing:"border-box",
-      // fontFamily:"verdana",
       margin:0,
       padding:0,
      });
+    this.items = [];
     this.size("auto", "auto");
     globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
     element && globalThis.__Ziko__.__Config__.default.render && this.render();
   }
+  get element(){
+    return this.__ele__
+  }
   get isZikoUIElement(){
     return true
   }
@@ -4904,15 +4922,6 @@ class ZikoUIElement {
   get isBody(){
     return this.element === globalThis?.document.body;
   }
-  get __app__(){
-    if(this.cache.isRoot)return this;
-    let root=this.cache.parent;
-    while(1){
-      if(!root)return null;
-      if(root.cache.isRoot)return root;
-      root=root.parent;
-    }
-  }
   get parent(){
     return this.cache.parent;
   }
@@ -4952,6 +4961,120 @@ class ZikoUIElement {
     this.st.size(width,height);
     return this; 
   }
+  maintain() {
+    for (let i = 0; i < this.items.length; i++)
+      Object.assign(this, { [[i]]: this.items[i] });
+    this.length = this.items.length;
+    return this;
+  }
+  at(index) {
+    return this.items.at(index);
+  }
+  #addItem(adder, pusher, ...ele) {
+    if (this.cache.isFrozzen) {
+      console.warn("You can't append new item to frozzen element");
+      return this;
+    }
+    for (let i = 0; i < ele.length; i++) {
+      if (["number", "string"].includes(typeof ele[i])) ele[i] = text$1(ele[i]);
+      if (ele[i] instanceof ZikoUIElement) {
+        ele[i].cache.parent = this;
+        this.element[adder](ele[i].element);
+        ele[i].target = this.element;
+        this.items[pusher](ele[i]);
+      } else if (ele[i] instanceof Object) {
+        if (ele[i]?.style) this.style(ele[i]?.style);
+        if (ele[i]?.attr) {
+          Object.entries(ele[i].attr).forEach((n) =>
+            this.setAttr("" + n[0], n[1]),
+          );
+        }
+      }
+    }
+    this.maintain();
+    return this;
+  }
+  append(...ele) {
+    this.#addItem("append", "push", ...ele);
+    return this;
+  }
+  prepend(...ele) {
+    this.#addItem("prepend", "unshift", ...ele);
+    return this;
+  }
+  insertAt(index, ...ele) {
+    if (index >= this.element.children.length) this.append(...ele);
+    else
+      for (let i = 0; i < ele.length; i++) {
+        if (["number", "string"].includes(typeof ele[i])) ele[i] = text$1(ele[i]);
+        this.element?.insertBefore(ele[i].element, this.items[index].element);
+        this.items.splice(index, 0, ele[i]);
+      }
+    return this;
+  }
+  remove(...ele) {
+    const remove = (ele) => {
+      if (typeof ele === "number") ele = this.items[ele];
+      if (ele instanceof ZikoUIElement) this.element?.removeChild(ele.element);
+      this.items = this.items.filter((n) => n !== ele);
+    };
+    for (let i = 0; i < ele.length; i++) remove(ele[i]);
+    for (let i = 0; i < this.items.length; i++)
+      Object.assign(this, { [[i]]: this.items[i] });
+    // Remove from item
+    return this;
+  }
+  forEach(callback) {
+    this.items.forEach(callback);
+    return this;
+  }
+  map(callback) {
+    return this.items.map(callback);
+  }
+  find(condition) {
+    return this.items.filter(condition);
+  }
+  filter(condition_callback, if_callback = () => {}, else_callback = () => {}) {
+    const FilterItems = this.items.filter(condition_callback);
+    FilterItems.forEach(if_callback);
+    this.items
+      .filter((item) => !FilterItems.includes(item))
+      .forEach(else_callback);
+    return this;
+  }
+  filterByTextContent(text, exactMatch = false) {
+    this.items.forEach((n) => n.render());
+    this.filter(
+      (n) => !(exactMatch ? n.text === text : n.text.includes(text)),
+      (e) => e.unrender(),
+    );
+    // this.items.filter(n=>{
+    //   const content=n.element.textContent;
+    //   return !(exactMatch?content===text:content.includes(text))
+    // }).map(n=>n.unrender());
+    //  return this;
+  }
+  filterByClass(value) {
+    this.items.map((n) => n.render());
+    this.items
+      .filter((n) => !n.classes.includes(value))
+      .map((n) => n.unrender());
+    return this;
+  }
+  sortByTextContent(value, displays) {
+    let item = this.children;
+    item
+      .filter((n) => !n.textContent.toLowerCase().includes(value.toLowerCase()))
+      .map((n) => {
+        n.style.display = "none";
+      });
+    item
+      .filter((n) => n.textContent.toLowerCase().includes(value.toLowerCase()))
+      .map((n, i) => (n.style.display = displays[i]));
+    //return item.filter(n=>n.style.display!="none")
+    item.filter((n) => n.style.display != "none");
+    return this;
+  }
   get #SwitchedStyleRTL_LTR(){
     const CalculedStyle = globalThis.getComputedStyle(this.element); 
     const SwitchedStyle = {};
@@ -5307,161 +5430,120 @@ class ZikoUIContainerElement extends ZikoUIElement {
     super(element, name);
     this.items = [];
   }
-  maintain() {
-    for (let i = 0; i < this.items.length; i++)
-      Object.assign(this, { [[i]]: this.items[i] });
-    this.length = this.items.length;
-    return this;
-  }
-  at(index) {
-    return this.items.at(index);
-  }
-  #addItem(adder, pusher, ...ele) {
-    if (this.cache.isFrozzen) {
-      console.warn("You can't append new item to frozzen element");
-      return this;
-    }
-    for (let i = 0; i < ele.length; i++) {
-      if (["number", "string"].includes(typeof ele[i])) ele[i] = text$1(ele[i]);
-      if (ele[i] instanceof ZikoUIElement) {
-        ele[i].cache.parent = this;
-        this.element[adder](ele[i].element);
-        ele[i].target = this.element;
-        this.items[pusher](ele[i]);
-      } else if (ele[i] instanceof Object) {
-        if (ele[i]?.style) this.style(ele[i]?.style);
-        if (ele[i]?.attr) {
-          Object.entries(ele[i].attr).forEach((n) =>
-            this.setAttr("" + n[0], n[1]),
-          );
-        }
-      }
-    }
-    this.maintain();
-    return this;
-  }
-  append(...ele) {
-    this.#addItem("append", "push", ...ele);
-    return this;
-  }
-  prepend(...ele) {
-    this.#addItem("prepend", "unshift", ...ele);
-    return this;
-  }
-  // append(...ele) {
-  //     if(this.cache.isFrozzen){
-  //       console.warn("You can't append new item to frozzen element");
-  //       return this;
-  //     }
-  //     for (let i = 0; i < ele.length; i++){
-  //     if(["number","string"].includes(typeof ele[i]))ele[i]=text(ele[i]);
-  //       if (ele[i] instanceof ZikoUIElement) {
-  //         ele[i].cache.parent=this;
-  //         this.element?.appendChild(ele[i].element);
-  //         ele[i].target = this.element;
-  //         this.items.push(ele[i]);
-  //       } else if (ele[i] instanceof Object) {
-  //         if (ele[i]?.style) this.style(ele[i]?.style);
-  //         if (ele[i]?.attr) {
-  //           Object.entries(ele[i].attr).forEach((n) =>
-  //             this.setAttr("" + n[0], n[1]),
-  //           );
-  //         }
+  // maintain() {
+  //   for (let i = 0; i < this.items.length; i++)
+  //     Object.assign(this, { [[i]]: this.items[i] });
+  //   this.length = this.items.length;
+  //   return this;
+  // }
+  // at(index) {
+  //   return this.items.at(index);
+  // }
+  // #addItem(adder, pusher, ...ele) {
+  //   if (this.cache.isFrozzen) {
+  //     console.warn("You can't append new item to frozzen element");
+  //     return this;
+  //   }
+  //   for (let i = 0; i < ele.length; i++) {
+  //     if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
+  //     if (ele[i] instanceof ZikoUIElement) {
+  //       ele[i].cache.parent = this;
+  //       this.element[adder](ele[i].element);
+  //       ele[i].target = this.element;
+  //       this.items[pusher](ele[i]);
+  //     } else if (ele[i] instanceof Object) {
+  //       if (ele[i]?.style) this.style(ele[i]?.style);
+  //       if (ele[i]?.attr) {
+  //         Object.entries(ele[i].attr).forEach((n) =>
+  //           this.setAttr("" + n[0], n[1]),
+  //         );
   //       }
   //     }
-  //     this.maintain();
-  //     return this;
   //   }
-  insertAt(index, ...ele) {
-    if (index >= this.element.children.length) this.append(...ele);
-    else
-      for (let i = 0; i < ele.length; i++) {
-        if (["number", "string"].includes(typeof ele[i])) ele[i] = text$1(ele[i]);
-        this.element?.insertBefore(ele[i].element, this.items[index].element);
-        this.items.splice(index, 0, ele[i]);
-      }
-    return this;
-  }
+  //   this.maintain();
+  //   return this;
+  // }
+  // append(...ele) {
+  //   this.#addItem("append", "push", ...ele);
+  //   return this;
+  // }
+  // prepend(...ele) {
+  //   this.#addItem("prepend", "unshift", ...ele);
+  //   return this;
+  // }
+  // insertAt(index, ...ele) {
+  //   if (index >= this.element.children.length) this.append(...ele);
+  //   else
+  //     for (let i = 0; i < ele.length; i++) {
+  //       if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
+  //       this.element?.insertBefore(ele[i].element, this.items[index].element);
+  //       this.items.splice(index, 0, ele[i]);
+  //     }
+  //   return this;
+  // }
   // remove(...ele) {
-  //   if(ele.length==0){
-  //     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 {
-  //     const remove = (ele) => {
-  //       if(typeof ele === "number") ele=this.items[ele];
-  //       if(ele instanceof ZikoUIElement)this.element?.removeChild(ele.element);
-  //         this.items=this.items.filter(n=>n!==ele);
-  //     };
-  //     for (let i = 0; i < ele.length; i++) remove(ele[i]);
-  //     for (let i = 0; i < this.items.length; i++)Object.assign(this, { [[i]]: this.items[i] });
-  //     // Remove from item
-  //   }
+  //   const remove = (ele) => {
+  //     if (typeof ele === "number") ele = this.items[ele];
+  //     if (ele instanceof ZikoUIElement) this.element?.removeChild(ele.element);
+  //     this.items = this.items.filter((n) => n !== ele);
+  //   };
+  //   for (let i = 0; i < ele.length; i++) remove(ele[i]);
+  //   for (let i = 0; i < this.items.length; i++)
+  //     Object.assign(this, { [[i]]: this.items[i] });
+  //   // Remove from item
+  //   return this;
+  // }
+  // forEach(callback) {
+  //   this.items.forEach(callback);
+  //   return this;
+  // }
+  // map(callback) {
+  //   return this.items.map(callback);
+  // }
+  // find(condition) {
+  //   return this.items.filter(condition);
+  // }
+  // filter(condition_callback, if_callback = () => {}, else_callback = () => {}) {
+  //   const FilterItems = this.items.filter(condition_callback);
+  //   FilterItems.forEach(if_callback);
+  //   this.items
+  //     .filter((item) => !FilterItems.includes(item))
+  //     .forEach(else_callback);
+  //   return this;
+  // }
+  // filterByTextContent(text, exactMatch = false) {
+  //   this.items.forEach((n) => n.render());
+  //   this.filter(
+  //     (n) => !(exactMatch ? n.text === text : n.text.includes(text)),
+  //     (e) => e.unrender(),
+  //   );
+  //   // this.items.filter(n=>{
+  //   //   const content=n.element.textContent;
+  //   //   return !(exactMatch?content===text:content.includes(text))
+  //   // }).map(n=>n.unrender());
+  //   //  return this;
+  // }
+  // filterByClass(value) {
+  //   this.items.map((n) => n.render());
+  //   this.items
+  //     .filter((n) => !n.classes.includes(value))
+  //     .map((n) => n.unrender());
+  //   return this;
+  // }
+  // sortByTextContent(value, displays) {
+  //   let item = this.children;
+  //   item
+  //     .filter((n) => !n.textContent.toLowerCase().includes(value.toLowerCase()))
+  //     .map((n) => {
+  //       n.style.display = "none";
+  //     });
+  //   item
+  //     .filter((n) => n.textContent.toLowerCase().includes(value.toLowerCase()))
+  //     .map((n, i) => (n.style.display = displays[i]));
+  //   //return item.filter(n=>n.style.display!="none")
+  //   item.filter((n) => n.style.display != "none");
   //   return this;
   // }
-  remove(...ele) {
-    const remove = (ele) => {
-      if (typeof ele === "number") ele = this.items[ele];
-      if (ele instanceof ZikoUIElement) this.element?.removeChild(ele.element);
-      this.items = this.items.filter((n) => n !== ele);
-    };
-    for (let i = 0; i < ele.length; i++) remove(ele[i]);
-    for (let i = 0; i < this.items.length; i++)
-      Object.assign(this, { [[i]]: this.items[i] });
-    // Remove from item
-    return this;
-  }
-  forEach(callback) {
-    this.items.forEach(callback);
-    return this;
-  }
-  map(callback) {
-    return this.items.map(callback);
-  }
-  find(condition) {
-    return this.items.filter(condition);
-  }
-  filter(condition_callback, if_callback = () => {}, else_callback = () => {}) {
-    const FilterItems = this.items.filter(condition_callback);
-    FilterItems.forEach(if_callback);
-    this.items
-      .filter((item) => !FilterItems.includes(item))
-      .forEach(else_callback);
-    return this;
-  }
-  filterByTextContent(text, exactMatch = false) {
-    this.items.forEach((n) => n.render());
-    this.filter(
-      (n) => !(exactMatch ? n.text === text : n.text.includes(text)),
-      (e) => e.unrender(),
-    );
-    // this.items.filter(n=>{
-    //   const content=n.element.textContent;
-    //   return !(exactMatch?content===text:content.includes(text))
-    // }).map(n=>n.unrender());
-    //  return this;
-  }
-  filterByClass(value) {
-    this.items.map((n) => n.render());
-    this.items
-      .filter((n) => !n.classes.includes(value))
-      .map((n) => n.unrender());
-    return this;
-  }
-  sortByTextContent(value, displays) {
-    let item = this.children;
-    item
-      .filter((n) => !n.textContent.toLowerCase().includes(value.toLowerCase()))
-      .map((n) => {
-        n.style.display = "none";
-      });
-    item
-      .filter((n) => n.textContent.toLowerCase().includes(value.toLowerCase()))
-      .map((n, i) => (n.style.display = displays[i]));
-    //return item.filter(n=>n.style.display!="none")
-    item.filter((n) => n.style.display != "none");
-    return this;
-  }
 }
 
 class __ZikoUIText__ extends ZikoUIContainerElement {
@@ -6130,6 +6212,186 @@ class ZikoUISVGWrapper extends ZikoUIXMLWrapper{
 const HTMLWrapper = (HTMLContent) => new ZikoUIHTMLWrapper(HTMLContent);
 const SVGWrapper = (SVGContent) => new ZikoUISVGWrapper(SVGContent);
 
+// function loadComponent() {
+//     return new Promise((resolve) => {
+//       setTimeout(() => {
+//         resolve(p(1000))
+//       }, 500);
+//     });
+//   }
+
+//   Suspense(p("Loading ..."),()=>fetch('https://jsonplaceholder.typicode.com/todos/1')
+//   .then(response => response.json())
+//   .then(json => h2(json.title)))
+
+ 
+
+class ZikoUISuspense extends ZikoUIElement{
+    constructor(fallback_ui, callback){
+        super("div", "suspense");
+        this.setAttr({
+            dataTemp : "suspense"
+        });
+        this.fallback_ui = fallback_ui;
+        this.append(fallback_ui);
+        (async ()=>{
+            try{
+                const ui = await callback();
+                fallback_ui.unrender();
+                this.append(ui);
+                // console.log(content)
+            }
+            catch(error){
+                console.log({error});
+            }
+        })();
+    }
+}
+
+const Suspense = (fallback_ui, callback) => new ZikoUISuspense(fallback_ui, callback);
+
+const _h=(tag, type, attributes, ...children)=>{
+    const { name, style, ...attrs } = attributes;
+    let element = new ZikoUIElement(tag, name, type);
+    style && element.style(style);
+    attrs && element.setAttr(attrs);
+    children && element.append(...children);
+    return element; 
+};
+const h=(tag, attributes = {}, ...children)=> _h(tag, "html", attributes, ...children);
+const s=(tag, attributes = {}, ...children)=> _h(tag, "svg", attributes, ...children);
+
+const HTMLTags = [
+  'a',
+  'abb',
+  'address',
+  'area',
+  'article',
+  'aside',
+  'audio',
+  'b',
+  'base',
+  'bdi',
+  'bdo',
+  'blockquote',
+  'br',
+  'button',
+  'canvas',
+  'caption',
+  'cite',
+  'code',
+  'col',
+  'colgroup',
+  'data',
+  'datalist',
+  'dd',
+  'del',
+  'details',
+  'dfn',
+  'dialog',
+  'div',
+  'dl',
+  'dt',
+  'em',
+  'embed',
+  'fieldset',
+  'figcaption',
+  'figure',
+  'footer',
+  'form',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+  'header',
+  'hgroup',
+  'hr',
+  'i',
+  'iframe',
+  'img',
+  'ipnut',
+  'ins',
+  'kbd',
+  'label',
+  'legend',
+  'li',
+  'main',
+  'map',
+  'mark',
+  'menu',
+  'meter',
+  'nav',
+  'object',
+  'ol',
+  'optgroup',
+  'option',
+  'output',
+  'p',
+  'param',
+  'picture',
+  'pre',
+  'progress',
+  'q',
+  'rp',
+  'rt',
+  'ruby',
+  's',
+  'samp',
+  'search',
+  'section',
+  'select',
+  'small',
+  'source',
+  'span',
+  'strong',
+  'sub',
+  'summary',
+  'sup',
+  'svg',
+  'table',
+  'tbody',
+  'td',
+  'template',
+  'textarea',
+  'tfoot',
+  'th',
+  'thead',
+  'time',
+  'title',
+  'tr',
+  'track',
+  'u',
+  'ul',
+  'var',
+  'video',
+  'wbr'
+];
+
+const SVGTags = [
+    "svg", "g", "defs", "symbol", "use", "image", "switch",
+    "rect", "circle", "ellipse", "line", "polyline", "polygon", "path",
+    "text", "tspan", "textPath", "altGlyph", "altGlyphDef", "altGlyphItem", "glyph", "glyphRef",
+    "linearGradient", "radialGradient", "pattern", "solidColor",
+    "filter", "feBlend", "feColorMatrix", "feComponentTransfer", "feComposite", "feConvolveMatrix",
+    "feDiffuseLighting", "feDisplacementMap", "feDropShadow", "feFlood", "feFuncA", "feFuncR", "feFuncG", "feFuncB",
+    "feGaussianBlur", "feImage", "feMerge", "feMergeNode", "feMorphology", "feOffset", "feSpecularLighting",
+    "feTile", "feTurbulence",
+    "animate", "animateMotion", "animateTransform", "set",
+    "script",
+    "desc", "title", "metadata", "foreignObject"
+  ];
+  
+const hTags = HTMLTags.reduce((acc, key) => {
+  acc[key] = (attr, ...children) => h(key, attr, ...children);
+  return acc;
+}, {});
+const sTags = SVGTags.reduce((acc, key) => {
+    acc[key] = (attr, ...children) => h(key, attr, ...children);
+    return acc;
+  }, {});
+
 class ZikoUIHtmlTag extends ZikoUIContainerElement {
   constructor(element) {
     super(element,"html");
@@ -6220,20 +6482,26 @@ var Misc = /*#__PURE__*/Object.freeze({
     __proto__: null,
     HTMLWrapper: HTMLWrapper,
     SVGWrapper: SVGWrapper,
+    Suspense: Suspense,
     ZikoUIBr: ZikoUIBr,
     ZikoUIHTMLWrapper: ZikoUIHTMLWrapper,
     ZikoUIHr: ZikoUIHr,
     ZikoUIHtmlTag: ZikoUIHtmlTag,
     ZikoUILink: ZikoUILink,
     ZikoUISVGWrapper: ZikoUISVGWrapper,
+    ZikoUISuspense: ZikoUISuspense,
     ZikoUIXMLWrapper: ZikoUIXMLWrapper,
     br: br,
     brs: brs,
     btn: btn,
+    h: h,
+    hTags: hTags,
     hr: hr,
     hrs: hrs,
     html: html,
-    link: link
+    link: link,
+    s: s,
+    sTags: sTags
 });
 
 class ZikoUIInputImage extends ZikoUIElement {
@@ -11610,4 +11878,4 @@ function RemoveAll(){
     Data.RemoveAll();
 }
 
-export { Accordion, App$1 as App, Article, Aside, Base, Breadcrumbs, Canvas, Carousel, CodeCell, CodeNote, Collapsible, Combinaison, Complex, E, EPSILON, Ease, FileBasedRouting, Flex$1 as Flex, Footer, Form, Grid$1 as Grid, HTMLWrapper, Header, LinearSystem, Logic$1 as Logic, Main, Matrix, Modal, Nav, PI, Permutation, Random, SPA, SVGWrapper, Section, Slider, Splitter, Str, Svg, Table$1 as Table, Tabs, Utils$1 as Utils, ZikoApp, ZikoCustomEvent, ZikoEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventHash, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventWheel, ZikoHead$1 as ZikoHead, ZikoJsonStyleSheet, ZikoMutationObserver, ZikoSPA, ZikoSvgCircle, ZikoSvgEllipse, ZikoSvgForeignObject, ZikoSvgGroupe, ZikoSvgImage, ZikoSvgLine, ZikoSvgLink, ZikoSvgPath, ZikoSvgRectangle, ZikoSvgText, ZikoUIAbbrText, ZikoUIAccordion, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBlockQuote, ZikoUIBr, ZikoUIBreadcrumbs, ZikoUICanvas, ZikoUICodeNote, ZikoUICodeText, ZikoUIContainerElement, ZikoUIDefintion, ZikoUIElement, ZikoUIFigure, ZikoUIFlex$1 as ZikoUIFlex, ZikoUIFooter, ZikoUIForm, ZikoUIGrid, ZikoUIHTMLWrapper, ZikoUIHeader, ZikoUIHeading, ZikoUIHorizontalSlider, ZikoUIHorizontalSplitter, ZikoUIHr, ZikoUIHtmlTag, ZikoUIImage, ZikoUIInput, ZikoUIInputCheckbox, ZikoUIInputColor, ZikoUIInputDatalist$1 as ZikoUIInputDatalist, ZikoUIInputDate, ZikoUIInputDateTime, ZikoUIInputEmail, ZikoUIInputImage, ZikoUIInputNumber, ZikoUIInputOption, ZikoUIInputPassword, ZikoUIInputRadio, ZikoUIInputSearch, ZikoUIInputSlider$1 as ZikoUIInputSlider, ZikoUIInputTime, ZikoUILabel, ZikoUILink, ZikoUIMain, ZikoUIMenu3d, ZikoUIModal, ZikoUINav, ZikoUIParagraphe, ZikoUIQuote, ZikoUISVGWrapper, ZikoUISection, ZikoUISelect, ZikoUISubText, ZikoUISupText, ZikoUISvg, ZikoUIText, ZikoUITextArea, ZikoUIVerticalSlider, ZikoUIVerticalSplitter, ZikoUIVideo, ZikoUIXMLWrapper, ZikoUseRoot, ZikoUseStyle, __Config__, __UI__, abbrText, abs, accum, acos, acosh, acot, add, adoc2html, arange, arr2str, asin, asinh, atan, atan2, atanh, audio, bessel, beta, blockQuote, br, brs, btn, canvasArc, canvasCircle, canvasLine, canvasPoints, canvasRect, cartesianProduct, ceil, checkbox, choleskyDecomposition, clamp, codeText, combinaison, complex, cos, cosh, cot, coth, count, countWords, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, dangerAlert, datalist, Ziko as default, defineParamsGetter, deg2rad, dfnText, div, e, fact, figure, floor, gamma, geomspace, h1, h2, h3, h4, h5, h6, hSlider, hSplitter, hr, hrs, html, hypot, image, inRange, infoAlert, input, inputCamera, inputColor, inputDate, inputDateTime, inputEmail, inputImage, inputNumber, inputPassword, inputTime, isApproximatlyEqual, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, jsonStyleSheet, lerp, li, link, linspace, ln, logspace, luDecomposition, map, mapfun$1 as mapfun, markdown2html, matrix, matrix2, matrix3, matrix4, max, menu3d, min, modulo, mul, norm, nums, obj2str, ol, ones, p, pgcd, pow, powerSet, ppcm, preload, prod, qrDecomposition, quote, rad2deg, radio, removeExtraSpace, round, search, sec, select, sig, sign, sin, sinc, sinh, slider, sqrt, sqrtn, str, sub, subSet, subText, successAlert, sum, supText, svg2ascii, svg2img, svg2imgUrl, svg2str, svgCircle, svgEllipse, svgGrid, svgGroupe, svgImage, svgLine, svgLink, svgObject, svgPath, svgPolygon, svgRect, svgText, tan, tanh, text$1 as text, textarea, timeTaken, time_memory_Taken, ul, useAnimation, useBattery, useChannel$1 as useChannel, useClickEvent, useClipboardEvent, useCustomEvent, useDebounce, useDragEvent, useDropEvent, useEventEmitter, useFavIcon$1 as useFavIcon, useFocusEvent, useFps, useGeolocation, useHashEvent, useHead$1 as useHead, useInputEvent, useKeyEvent, useLocaleStorage, useMediaQuery, useMeta$1 as useMeta, useMouseEvent, usePointerEvent, useRoot, useRootValue, useSessionStorage, useStyle, useSuccesifKeys, useSwipeEvent, useThread, useThrottle, useTimeLoop, useTitle$1 as useTitle, useType, useWheelEvent, vSlider, vSplitter, video, wait, waitForUIElm, waitForUIElmSync, warningAlert, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };
+export { Accordion, App$1 as App, Article, Aside, Base, Breadcrumbs, Canvas, Carousel, CodeCell, CodeNote, Collapsible, Combinaison, Complex, E, EPSILON, Ease, FileBasedRouting, Flex$1 as Flex, Footer, Form, Grid$1 as Grid, HTMLWrapper, Header, LinearSystem, Logic$1 as Logic, Main, Matrix, Modal, Nav, PI$1 as PI, Permutation, Random, SPA, SVGWrapper, Section, Slider, Splitter, Str, Suspense, Svg, Table$1 as Table, Tabs, Utils$1 as Utils, ZikoApp, ZikoCustomEvent, ZikoEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventHash, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventWheel, ZikoHead$1 as ZikoHead, ZikoJsonStyleSheet, ZikoMutationObserver, ZikoSPA, ZikoSvgCircle, ZikoSvgEllipse, ZikoSvgForeignObject, ZikoSvgGroupe, ZikoSvgImage, ZikoSvgLine, ZikoSvgLink, ZikoSvgPath, ZikoSvgRectangle, ZikoSvgText, ZikoUIAbbrText, ZikoUIAccordion, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBlockQuote, ZikoUIBr, ZikoUIBreadcrumbs, ZikoUICanvas, ZikoUICodeNote, ZikoUICodeText, ZikoUIContainerElement, ZikoUIDefintion, ZikoUIElement, ZikoUIFigure, ZikoUIFlex$1 as ZikoUIFlex, ZikoUIFooter, ZikoUIForm, ZikoUIGrid, ZikoUIHTMLWrapper, ZikoUIHeader, ZikoUIHeading, ZikoUIHorizontalSlider, ZikoUIHorizontalSplitter, ZikoUIHr, ZikoUIHtmlTag, ZikoUIImage, ZikoUIInput, ZikoUIInputCheckbox, ZikoUIInputColor, ZikoUIInputDatalist$1 as ZikoUIInputDatalist, ZikoUIInputDate, ZikoUIInputDateTime, ZikoUIInputEmail, ZikoUIInputImage, ZikoUIInputNumber, ZikoUIInputOption, ZikoUIInputPassword, ZikoUIInputRadio, ZikoUIInputSearch, ZikoUIInputSlider$1 as ZikoUIInputSlider, ZikoUIInputTime, ZikoUILabel, ZikoUILink, ZikoUIMain, ZikoUIMenu3d, ZikoUIModal, ZikoUINav, ZikoUIParagraphe, ZikoUIQuote, ZikoUISVGWrapper, ZikoUISection, ZikoUISelect, ZikoUISubText, ZikoUISupText, ZikoUISuspense, ZikoUISvg, ZikoUIText, ZikoUITextArea, ZikoUIVerticalSlider, ZikoUIVerticalSplitter, ZikoUIVideo, ZikoUIXMLWrapper, ZikoUseRoot, ZikoUseStyle, __Config__, __UI__, abbrText, abs, accum, acos, acosh, acot, add, adoc2html, arange, arr2str, asin, asinh, atan, atan2, atanh, audio, bessel, beta, blockQuote, br, brs, btn, canvasArc, canvasCircle, canvasLine, canvasPoints, canvasRect, cartesianProduct, ceil, checkbox, choleskyDecomposition, clamp, codeText, combinaison, complex, cos, cosh, cot, coth, count, countWords, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, dangerAlert, datalist, Ziko as default, defineParamsGetter, deg2rad, dfnText, div, e, fact, figure, floor, gamma, geomspace, h, h1, h2, h3, h4, h5, h6, hSlider, hSplitter, hTags, hr, hrs, html, hypot, image, inRange, infoAlert, input, inputCamera, inputColor, inputDate, inputDateTime, inputEmail, inputImage, inputNumber, inputPassword, inputTime, isApproximatlyEqual, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, jsonStyleSheet, lerp, li, link, linspace, ln, logspace, luDecomposition, map, mapfun$1 as mapfun, markdown2html, matrix, matrix2, matrix3, matrix4, max, menu3d, min, modulo, mul, norm, nums, obj2str, ol, ones, p, pgcd, pow, powerSet, ppcm, preload, prod, qrDecomposition, quote, rad2deg, radio, removeExtraSpace, round, s, sTags, search, sec, select, sig, sign, sin, sinc, sinh, slider, sqrt, sqrtn, str, sub, subSet, subText, successAlert, sum, supText, svg2ascii, svg2img, svg2imgUrl, svg2str, svgCircle, svgEllipse, svgGrid, svgGroupe, svgImage, svgLine, svgLink, svgObject, svgPath, svgPolygon, svgRect, svgText, tan, tanh, text$1 as text, textarea, timeTaken, time_memory_Taken, ul, useAnimation, useBattery, useChannel$1 as useChannel, useClickEvent, useClipboardEvent, useCustomEvent, useDebounce, useDragEvent, useDropEvent, useEventEmitter, useFavIcon$1 as useFavIcon, useFocusEvent, useFps, useGeolocation, useHashEvent, useHead$1 as useHead, useInputEvent, useKeyEvent, useLocaleStorage, useMediaQuery, useMeta$1 as useMeta, useMouseEvent, usePointerEvent, useRoot, useRootValue, useSessionStorage, useStyle, useSuccesifKeys, useSwipeEvent, useThread, useThrottle, useTimeLoop, useTitle$1 as useTitle, useType, useWheelEvent, vSlider, vSplitter, video, wait, waitForUIElm, waitForUIElmSync, warningAlert, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };