ziko 0.0.22 → 0.0.24

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sun Dec 08 2024 23:39:16 GMT+0100 (UTC+01:00)
+  Date : Fri Jan 24 2025 23:58:20 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
@@ -1121,229 +1121,6 @@ var Api = /*#__PURE__*/Object.freeze({
     preload: preload
 });
 
-const parseInlineElements$1 = text => {
-    return text
-        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') 
-        .replace(/\*(.*?)\*/g, '<em>$1</em>')              
-        .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>')  
-        .replace(/!\[(.*?)\]\((.*?)\)/g, '<img src="$2" alt="$1">') 
-        .replace(/`([^`]+)`/g, '<code>$1</code>'); // Inline Code
-};
-
-const parseTable$1 = line => {
-    const cells = line.split('|').map(cell => cell.trim()).filter(cell => cell !== '');
-    const tableRow = cells.map(cell => `<td>${parseInlineElements$1(cell)}</td>`).join('');
-    return `<tr>${tableRow}</tr>\n`;
-};
-
-const parseCodeBlock$1 = (lines, language) => {
-    const codeContent = lines.join('\n'); // No need to exclude the triple backticks
-    const highlightedCode = language ? `<pre><code data-language="${language}">${codeContent}</code></pre>` : `<pre><code>${codeContent}</code></pre>`;
-    return `${highlightedCode}\n`;
-};
-
-const parseList$1 = line => {
-    const DIGIT_FOLLOWED_BY_A_DOT_AND_SPACE = /^\d+\.\s/; 
-    const match = line.match(DIGIT_FOLLOWED_BY_A_DOT_AND_SPACE);
-    if (match) {
-        let start = +match[1];
-        return `<ol${start===1?"":` start="${start}"`}>${parseInlineElements$1(line.slice(match[0].length))}</ol>\n`;
-    }  
-    return `<ul>${parseInlineElements$1(line)}</ul>\n`;
-};
-
-const parseHorizontalRule$1 = () => {
-    return '<hr>\n';
-};
-
-const markdown2html = markdownText => {
-    const lines = markdownText.split('\n');
-    let htmlOutput = '';
-    let inTable = false;
-    let inCodeBlock = false;
-    let codeBlockLines = [];
-    let codeBlockLanguage = '';
-    for (let i = 0; i < lines.length; i++) {
-        let line = lines[i];
-        // Table
-        if (line.startsWith('|')) {
-            if (!inTable) {
-                inTable = true;
-                htmlOutput += '<table>\n';
-            }
-            htmlOutput += parseTable$1(line);
-            continue;
-        } else if (inTable) {
-            inTable = false;
-            htmlOutput += '</table>\n';
-        }
-        // Code block
-        if (line.startsWith('```')) {
-            if (!inCodeBlock) {
-                inCodeBlock = true;
-                codeBlockLines = [];
-                codeBlockLanguage = line.slice(3).trim();
-            } else {
-                inCodeBlock = false;
-                htmlOutput += parseCodeBlock$1(codeBlockLines, codeBlockLanguage);
-            }
-            continue;
-        } else if (inCodeBlock) {
-            codeBlockLines.push(line);
-            continue;
-        }
-        // Headings
-        if (line.startsWith('# ')) {
-            const headingLevel = line.indexOf(' ');
-            const headingText = line.slice(headingLevel + 1);
-            htmlOutput += `<h${headingLevel}>${parseInlineElements$1(headingText)}</h${headingLevel}>\n`;
-            continue;
-        }
-        // Lists
-        if (line.startsWith('- ') || line.startsWith('* ') || line.match(/^\d+\.\s/)) {
-            htmlOutput += parseList$1(line);
-            continue;
-        }
-        // Horizontal Rule
-        if (line.trim() === '---') {
-            htmlOutput += parseHorizontalRule$1();
-            continue;
-        }
-        // Other paragraphs
-        htmlOutput += `<p>${parseInlineElements$1(line)}</p>\n`;
-    }
-    return htmlOutput;
-};
-
-const parseInlineElements = text => {
-    return text
-        .replace(/\*(.*?)\*/g, '_$1_')  // Emphasis
-        .replace(/\*\*(.*?)\*\*/g, '*$1*') // Strong
-        .replace(/\[(.*?)\]\((.*?)\)/g, 'link:$2[$1]')  // Links
-        .replace(/!\[(.*?)\]\((.*?)\)/g, 'image::$2[$1]') // Images
-        .replace(/`([^`]+)`/g, '``$1``') // Inline Code
-        .replace(/^\*\s/, ''); // Remove list item marker at the beginning of the line
-};
-
-const parseTable = line => {
-    const cells = line.split('|').map(cell => cell.trim()).filter(cell => cell !== '');
-    const tableRow = cells.map(cell => `<td>${parseInlineElements(cell)}</td>`).join('');
-    return `<tr>${tableRow}</tr>\n`;
-};
-
-const parseCodeBlock = (lines, language) => {
-    const codeContent = lines.join('\n'); // No need to exclude the triple backticks
-    const highlightedCode = language ? `<pre><code data-language="${language}">${codeContent}</code></pre>` : `<pre><code>${codeContent}</code></pre>`;
-    return `${highlightedCode}\n`;
-};
-
-const parseList = line => {
-    const OL_PATTERN = /^(\d+)\.\s/;
-    const OL_PATTERN_WITHOUT_START = /^[.]\s/;
-    const UL_PATTERN = /^[*]\s/;
-    
-    if (line.match(OL_PATTERN)) {
-        const start = line.match(OL_PATTERN)[1];
-        return `<ol start="${start}"><li>${parseInlineElements(line.replace(OL_PATTERN, ''))}</li></ol>\n`;
-    } 
-    if (line.match(OL_PATTERN_WITHOUT_START)) {
-        return `<ol><li>${parseInlineElements(line.replace(OL_PATTERN_WITHOUT_START, ''))}</li></ol>\n`;
-    } 
-    if (line.match(UL_PATTERN)) {
-        return `<ul><li>${parseInlineElements(line.replace(UL_PATTERN, ''))}</li></ul>\n`;
-    }
-
-    // If neither ordered nor unordered list pattern matches, treat it as a paragraph
-    return `<p>${parseInlineElements(line)}</p>\n`;
-};
-
-
-
-
-const parseBlockquote = line => {
-    return `<blockquote>${parseInlineElements(line.slice(2))}</blockquote>\n`;
-};
-
-const parseHorizontalRule = () => {
-    return '<hr>\n';
-};
-
-const parseAttributes = line => {
-    const attrs = line.match(/\[(.*?)\]/);
-    return attrs ? attrs[1].split(',').map(attr => `[${attr.trim()}]`).join('') : '';
-};
-
-const adoc2html = adocText => {
-    const lines = adocText.split('\n');
-    let htmlOutput = '';
-    let inTable = false;
-    let inCodeBlock = false;
-    let codeBlockLines = [];
-    let codeBlockLanguage = '';
-    for (let i = 0; i < lines.length; i++) {
-        let line = lines[i];
-        // Table
-        if (line.startsWith('|')) {
-            if (!inTable) {
-                inTable = true;
-                htmlOutput += '<table>\n';
-            }
-            htmlOutput += parseTable(line);
-            continue;
-        } else if (inTable) {
-            inTable = false;
-            htmlOutput += '</table>\n';
-        }
-        // Code block
-        if (line.startsWith('```')) {
-            if (!inCodeBlock) {
-                inCodeBlock = true;
-                codeBlockLines = [];
-                codeBlockLanguage = line.slice(3).trim();
-            } else {
-                inCodeBlock = false;
-                htmlOutput += parseCodeBlock(codeBlockLines, codeBlockLanguage);
-            }
-            continue;
-        } else if (inCodeBlock) {
-            codeBlockLines.push(line);
-            continue;
-        }
-        // Headings
-        if (line.startsWith('=')) {
-            const headingLevel = (line.match(/=/g) || []).length;
-            const headingText = line.replace(/=/g, '').trim();
-            htmlOutput += `<h${headingLevel}>${parseInlineElements(headingText)}</h${headingLevel}>\n`;
-            continue;
-        }
-        // Lists
-        if (line.match(/^(\d+)\.\s/) || line.match(/^[*\.]\s/)) {
-            htmlOutput += parseList(line);
-            continue;
-        }
-        // Blockquote
-        if (line.startsWith('> ')) {
-            htmlOutput += parseBlockquote(line);
-            continue;
-        }
-        // Horizontal Rule
-        if (line.trim() === '---') {
-            htmlOutput += parseHorizontalRule();
-            continue;
-        }
-        // Attributes
-        if (line.startsWith('[')) {
-            htmlOutput += parseAttributes(line);
-            continue;
-        }
-        // Other paragraphs
-        if (line.trim() !== '') { // Exclude empty lines
-            htmlOutput += `<p>${parseInlineElements(line)}</p>\n`;
-        }
-    }
-    return htmlOutput;
-};
-
 const csv2arr = (csv, delimiter = ",")=>csv.trim().trimEnd().split("\n").map(n=>n.split(delimiter));
 const csv2matrix = (csv, delimiter = ",")=>new Matrix(csv2arr(csv,delimiter));
 const csv2object = (csv, delimiter = ",") => {
@@ -4489,59 +4266,6 @@ const useThread = (func, callback , close) => {
     return T;
 };
 
-class ZikoUseBattery{
-    constructor(){
-        if(this.isSupported)this.#init();
-    }   
-    async #init(){
-        this.__Battery__=await navigator.getBattery(); 
-    }
-    get isSupported(){
-        return !!navigator.getBattery;
-    }
-    get current(){
-        // Synchrouns Code
-        const {
-            level,
-            charging,
-            chargingTime,
-            dischargingTime
-        }=this.__Battery__;
-        return {
-            level,
-            charging,
-            chargingTime,
-            dischargingTime
-        }
-    }
-    onChargingChange(callback){
-        this.__Battery__?.addEventListener("chargingchange",callback);
-        return this;
-    }
-    onLevelChange(callback){
-        this.__Battery__?.addEventListener("levelchange",callback);
-        return this;
-    }
-}
-const useBattery=()=>new ZikoUseBattery();
-
-class ZikoUseGeolocation{
-    constructor(){
-        if(this.isSupported)this.#init();
-    }   
-    async #init(){
-        navigator.geolocation.getCurrentPosition(e=>this.__Geolocation__=e);
-    }
-    get isSupported(){
-        return !!navigator.geolocation;
-    }
-    get current(){
-        // Synchrouns Code
-        return this.__Geolocation__;
-    }
-}
-const useGeolocation=()=>new ZikoUseGeolocation();
-
 class ZikoUseChannel{
     constructor(name=""){
         this.channel=new BroadcastChannel(name);
@@ -4817,12 +4541,10 @@ var Hooks = /*#__PURE__*/Object.freeze({
     ZikoHead: ZikoHead$1,
     ZikoUseRoot: ZikoUseRoot,
     ZikoUseStyle: ZikoUseStyle,
-    useBattery: useBattery,
     useChannel: useChannel$1,
     useDebounce: useDebounce,
     useEventEmitter: useEventEmitter,
     useFavIcon: useFavIcon$1,
-    useGeolocation: useGeolocation,
     useHead: useHead$1,
     useLocaleStorage: useLocaleStorage,
     useMediaQuery: useMediaQuery,
@@ -4845,7 +4567,7 @@ const Reactivity={
 };
 
 class ZikoUIElement {
-  constructor(element ,name="", el_type="html") {
+  constructor(element, name="", {el_type="html", useDefaultStyle=false}={}){
     this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
     if(typeof element === "string") {
       switch(el_type){
@@ -4854,8 +4576,10 @@ class ZikoUIElement {
         default : throw Error("Not supported")
       }
     }
+    else {
+      this.target = element.parentElement;
+    }
     if(element)this.__ele__ = element;
-    this.uuid=this.constructor.name+"-"+Random.string(10);
     this.cache = {
       name,
       parent:null,
@@ -4886,23 +4610,29 @@ class ZikoUIElement {
       resize:null,
       intersection:null
     };
+    this.uuid = `${this.cache.name}-${Random.string(16)}`;
     this.cache.style.linkTo(this);
-    this.style({ 
+    useDefaultStyle && this.style({ 
       position: "relative",
       boxSizing:"border-box",
       margin:0,
       padding:0,
+      width : "auto",
+      height : "auto"
      });
     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();
+    this.setAttr("data-ref", this.uuid);
+    if(globalThis.__Ziko__.__Config__.renderingMode !== "spa" && !globalThis.__Ziko__.__Config__.isSSC) {
+      globalThis.__Ziko__.__HYDRATION_MAP__.set(this.uuid, ()=>this);
+  }
   }
   get element(){
-    return this.__ele__
+    return this.__ele__;
   }
   get isZikoUIElement(){
-    return true
+    return true;
   }
   get st(){
     return this.cache.style;
@@ -4911,7 +4641,7 @@ class ZikoUIElement {
     return this.cache.attributes;
   }
   get evt(){
-    return this.cache.events;
+    return this.events;
   }
   get html(){
     return this.element.innerHTML;
@@ -4976,7 +4706,7 @@ class ZikoUIElement {
       return this;
     }
     for (let i = 0; i < ele.length; i++) {
-      if (["number", "string"].includes(typeof ele[i])) ele[i] = text$1(ele[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);
@@ -5006,7 +4736,7 @@ class ZikoUIElement {
     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]);
+        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]);
       }
@@ -5425,128 +5155,7 @@ class ZikoUIElement {
   }
 }
 
-class ZikoUIContainerElement extends ZikoUIElement {
-  constructor(element, name = "") {
-    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(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(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;
-  // }
-}
-
-class __ZikoUIText__ extends ZikoUIContainerElement {
+class __ZikoUIText__ extends ZikoUIElement {
     constructor(tag, name, lineBreak,...value) {
       super(tag, name);
       this.addValue(...value);
@@ -5651,7 +5260,7 @@ class ZikoUIAbbrText extends __ZikoUIText__ {
     return true
   }
 }
-const text$1 = (...str) => new ZikoUIText(...str);
+const text = (...str) => new ZikoUIText(...str);
 const quote = (...str) => new ZikoUIQuote(...str);
 const dfnText = (...str) => new ZikoUIDefintion(...str);
 const supText = (...str) => new ZikoUISupText(...str);
@@ -5732,10 +5341,10 @@ var Text$1 = /*#__PURE__*/Object.freeze({
     quote: quote,
     subText: subText,
     supText: supText,
-    text: text$1
+    text: text
 });
 
-class ZikoUILI extends ZikoUIContainerElement{
+class ZikoUILI extends ZikoUIElement{
   constructor(UI){
     super("li","li");
     this.append(UI);
@@ -5744,7 +5353,7 @@ class ZikoUILI extends ZikoUIContainerElement{
     return true;
   }
 }
-class ZikoUIList extends ZikoUIContainerElement {
+class ZikoUIList extends ZikoUIElement {
     constructor(element,name) {
       super(element,name);
       delete this.append;
@@ -5756,7 +5365,7 @@ class ZikoUIList extends ZikoUIContainerElement {
     append(...arr){
       for (let i = 0; i < arr.length; i++) {
         let li = null;
-        if(["string","number"].includes(typeof arr[i]))arr[i]=text$1(arr[i]);
+        if(["string","number"].includes(typeof arr[i]))arr[i]=text(arr[i]);
         if (arr[i] instanceof ZikoUIElement)li=new ZikoUILI(arr[i]);
         li.setTarget(this.element);
         this.items.push(li[0]);
@@ -5784,7 +5393,7 @@ class ZikoUIList extends ZikoUIContainerElement {
       else
         for (let i = 0; i < ele.length; i++) {
           let li = null;
-          if(["number","string"].includes(typeof ele[i]))ele[i]=text$1(ele[i]);
+          if(["number","string"].includes(typeof ele[i]))ele[i]=text(ele[i]);
           if (ele[i] instanceof ZikoUIElement)li=new ZikoUILI(ele[i]);
           this.element?.insertBefore(li.element, this.items[index].parent.element);
           this.items.splice(index, 0, ele[i][0]);
@@ -6392,7 +6001,7 @@ const sTags = SVGTags.reduce((acc, key) => {
     return acc;
   }, {});
 
-class ZikoUIHtmlTag extends ZikoUIContainerElement {
+class ZikoUIHtmlTag extends ZikoUIElement {
   constructor(element) {
     super(element,"html");
   }
@@ -6445,7 +6054,7 @@ class ZikoUIBr extends ZikoUIElement {
       return true
     }
   }
-  class ZikoUILink extends ZikoUIContainerElement{
+  class ZikoUILink extends ZikoUIElement{
     constructor(href){
       super("a","link");
       Object.assign(this.cache,{
@@ -6779,7 +6388,7 @@ class ZikoUITextArea extends ZikoUIElement {
 }
 const textarea =()=> new ZikoUITextArea();
 
-let ZikoUIFlex$1 = class ZikoUIFlex extends ZikoUIContainerElement {
+class ZikoUIFlex extends ZikoUIElement {
   constructor(tag = "div", w = "100%", h = "100%") {
     super(tag ,"Flex");
     this.direction = "cols";
@@ -6827,18 +6436,18 @@ let ZikoUIFlex$1 = class ZikoUIFlex extends ZikoUIContainerElement {
     return this;
   }
   vertical(x, y, order=1) {
-    set_vertical$1.call(this,order);
+    set_vertical.call(this,order);
     this.style({
-      alignItems: typeof(x)==="number"?map_pos_x$1.call(this,x):x,
-      justifyContent: typeof(y)=="number"?map_pos_y$1.call(this,y):y
+      alignItems: typeof(x)==="number"?map_pos_x.call(this,x):x,
+      justifyContent: typeof(y)=="number"?map_pos_y.call(this,y):y
     });
     return this;
   }
   horizontal(x, y, order=1) {
-    set_horizontal$1.call(this,order);
+    set_horizontal.call(this,order);
     this.style({
-      alignItems: typeof(y)=="number"?map_pos_y$1.call(this,y):y,
-      justifyContent: typeof(x)==="number"?map_pos_x$1.call(this,x):x
+      alignItems: typeof(y)=="number"?map_pos_y.call(this,y):y,
+      justifyContent: typeof(x)==="number"?map_pos_x.call(this,x):x
     });
     return this;
   }
@@ -6847,38 +6456,44 @@ let ZikoUIFlex$1 = class ZikoUIFlex extends ZikoUIContainerElement {
     this.style({ display: "flex" });
     return this;
   }
-};
+}
 
-const Flex$1 = (...ZikoUIElement) =>{
+const Flex = (...ZikoUIElement) =>{
   let tag="div";
   if(typeof ZikoUIElement[0]==="string"){
     tag=ZikoUIElement[0];
     ZikoUIElement.pop();
   }
-  return new ZikoUIFlex$1(tag).append(...ZikoUIElement);
+  return new ZikoUIFlex(tag).append(...ZikoUIElement);
 };
-function set_vertical$1(direction){
+function set_vertical(direction){
   direction == 1
     ? this.style({ flexDirection: "column" })
     : direction == -1 && this.style({ flexDirection: "column-reverse" });
   return this;
 }
-function set_horizontal$1(direction){
+function set_horizontal(direction){
 direction == 1
     ? this.style({ flexDirection: "row" })
     : direction == -1 && this.style({ flexDirection: "row-reverse" });
   return this;
 }
-function map_pos_x$1(align){
+function map_pos_x(align){
 let pos = ["flex-start", "center", "flex-end"];
 if (typeof align === "number") align = pos[align + 1];
 return align;
 }
-function map_pos_y$1(align){
-return map_pos_x$1(-align);
+function map_pos_y(align){
+return map_pos_x(-align);
 }
 
-class ZikoUIForm extends ZikoUIFlex$1{
+var Flex$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Flex: Flex,
+    ZikoUIFlex: ZikoUIFlex
+});
+
+class ZikoUIForm extends ZikoUIFlex{
     constructor(...items){
         super("form", "Form");
         this.append(...items);
@@ -6996,7 +6611,7 @@ class ZikoUICaption extends ZikoUIElement{
 const tr=(...ZikoUIElement)=>new ZikoUITr(...ZikoUIElement);
 const td=(...UI)=>{
     UI=UI.map(n=>{
-        if(!(n instanceof ZikoUIElement))n=text$1(n);
+        if(!(n instanceof ZikoUIElement))n=text(n);
         return n
     });
     return new ZikoUITd(...UI)
@@ -7139,7 +6754,7 @@ var Table = /*#__PURE__*/Object.freeze({
     Table: Table$1
 });
 
-class ZikoUIMain extends ZikoUIContainerElement{
+class ZikoUIMain extends ZikoUIElement{
     constructor(){
       super("main","Main");
     }
@@ -7147,7 +6762,7 @@ class ZikoUIMain extends ZikoUIContainerElement{
       return true
     }
   }
-  class ZikoUIHeader extends ZikoUIContainerElement{
+  class ZikoUIHeader extends ZikoUIElement{
     constructor(){
       super("header","Header");
     }
@@ -7155,7 +6770,7 @@ class ZikoUIMain extends ZikoUIContainerElement{
       return true
     }
   }
-  class ZikoUINav extends ZikoUIContainerElement{
+  class ZikoUINav extends ZikoUIElement{
     constructor(){
       super("nav","Nav");
     }
@@ -7163,7 +6778,7 @@ class ZikoUIMain extends ZikoUIContainerElement{
       return true
     }
   }
-  class ZikoUISection extends ZikoUIContainerElement{
+  class ZikoUISection extends ZikoUIElement{
     constructor(){
       super("section","Section");
       this.style({position:"relative"});
@@ -7172,7 +6787,7 @@ class ZikoUIMain extends ZikoUIContainerElement{
       return true
     }
   }
-  class ZikoUIArticle extends ZikoUIContainerElement{
+  class ZikoUIArticle extends ZikoUIElement{
     constructor(){
       super("article","Article");
     }
@@ -7180,7 +6795,7 @@ class ZikoUIMain extends ZikoUIContainerElement{
       return true
     }
   }
-  class ZikoUIAside extends ZikoUIContainerElement{
+  class ZikoUIAside extends ZikoUIElement{
     constructor(){
       super("aside","Aside");
     }
@@ -7188,7 +6803,7 @@ class ZikoUIMain extends ZikoUIContainerElement{
       return true
     }
   }
-  class ZikoUIFooter extends ZikoUIContainerElement{
+  class ZikoUIFooter extends ZikoUIElement{
     constructor(){
       super("footer","Footer");
       this.element=document?.createElement("footer");
@@ -7223,7 +6838,7 @@ var Semantic = /*#__PURE__*/Object.freeze({
     ZikoUISection: ZikoUISection
 });
 
-class ZikoUIGrid extends ZikoUIContainerElement {
+class ZikoUIGrid extends ZikoUIElement {
     constructor(tag ="div", w = "50vw", h = "50vh") {
       super(tag,"Grid");
       this.direction = "cols";
@@ -7255,1609 +6870,24 @@ class ZikoUIGrid extends ZikoUIContainerElement {
 }
 const Grid$1 = (...ZikoUIElement) => new ZikoUIGrid("div").append(...ZikoUIElement);
 
-class ZikoUICollapbsible extends ZikoUIElement{
-    constructor(summary,content,openIcon="😁", closeIcon=openIcon){
-        super("details","Collapsible");
-        Object.assign(this.cache,{
-            icons:{
-                open : openIcon,
-                close : closeIcon
-            }
-        });
-        this.summary=html("summary",summary).style({
-            fontSize:"1.1em",
-            padding:"0.625rem",
-            fontWeight:"bold",
-            listStyleType:`"${openIcon}"`,
-            cursor:"pointer",
-        });
-        this.summary[0].style({
-            marginLeft:"0.5em",
-        });
-        this.content=content.style({
-            margin:"0.7em",
-        });
-        this.element?.append(this.summary.element,this.content.element);
-        this.style({
-            marginBottom:"0.7em",
-        });
-        watchAttr(this, e=>{
-            if(e.target.isOpen){
-                e.target.emit("open");
-                if(this?.parent?.isAccordion){
-                    if(this.parent.cache.autoClose)this.parent.closeExcept(this);
-                }
-                this.summary.style({
-                    listStyleType:`"${this.cache.icons.close}"`
-                });
-            }
-            else {
-                e.target.emit("close");
-                this.summary.style({
-                    listStyleType:`"${this.cache.icons.open}"`
-                });
-            }
-        });
-    }
-    get isCollapsible(){
-        return true;
-    }
-    get isOpen(){
-        return this.element.open;
-    }
-    open(details=this){
-        this.element.open=true;
-        this.emit("open",details);
-        return this;
-    }
-    close(){
-        this.element.open=false;
-        return this;
-    }
-    onOpen(callback){
-        this.on("open", callback);
-        return this;
-    }
-    onClose(callback){
-        this.on("close", callback);
-        return this;
-    }
-    toggle(){
-        this.element.open=!this.element.open;
-        return this;
-    }
-}
-
- 
-const Collapsible=(summary, content, openIcon, closeIcon)=>new ZikoUICollapbsible(summary,content,openIcon, closeIcon);
+var Grid$2 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Grid: Grid$1,
+    ZikoUIGrid: ZikoUIGrid
+});
 
-class ZikoUIAccordion extends ZikoUIContainerElement{
-    constructor(...Collapsible){
-        super("div", "Accordion");
-        this.append(...Collapsible);
-        Object.assign(this.cache,{
-            autoClose : true
-        });
-    }
-    get isAccordion(){
-        return true;
-    }
-    closeAll(){
-        this.items.forEach(n=>n.close());
-        return this;
-    }
-    closeExcept(...Collapsibles){
-        this.items.filter(n=>!Collapsibles.includes(n)).forEach(n=>n.close());
-        return this;
-    }
-    open(CollapsibleOrIndex){
-        CollapsibleOrIndex.isCollapsible? CollapsibleOrIndex.open(): this.items[CollapsibleOrIndex].open();
-        this.closeExcept(CollapsibleOrIndex.isCollapsible? CollapsibleOrIndex: this.items[CollapsibleOrIndex]);
-        return this;
-    }
-    enableAutoClose(){
-        this.cache.autoClose = true;
-        return this;
-    }
-    disableAutoClose(){
-        this.cache.autoClose = false;
-        return this;
-    }
-    toggleAutoClose(){
-        this.cache.autoClose = !this.cache.autoClose;
-    }
-}
-const Accordion = (... Collapsible) => new ZikoUIAccordion(...Collapsible);
-
-class ZikoUIFlex extends ZikoUIContainerElement {
-  constructor(tag = "div", w = "100%", h = "100%") {
-    super(tag ,"Flex");
-    this.direction = "cols";
-    if (typeof w == "number") w += "%";
-    if (typeof h == "number") h += "%";
-    this.style({ width: w, height: h });
-    this.style({ display: "flex" });
-    // this.render();
-  }
-  get isFlex(){
-    return true;
-  }
-  resp(px,wrap = true) {
-    this.wrap(wrap);
-    if (this.element.clientWidth < px) this.vertical();
-    else this.horizontal();
-    return this;
-  }
-  setSpaceAround() {
-    this.style({ justifyContent: "space-around" });
-    return this;
-  }
-  setSpaceBetween() {
-    this.style({ justifyContent: "space-between" });
-    return this;
-  }
-  setBaseline() {
-    this.style({ alignItems: "baseline" });
-    return this;
-  }
-  gap(g) {
-    if (this.direction === "row") this.style({ columnGap: g });
-    else if (this.direction === "column") this.style({ rowGap: g });
-    return this;
-  }
-  wrap(value = "wrap") {
-    const values = ["no-wrap", "wrap","wrap-reverse"];
-    this.style({
-      flexWrap: typeof value === "string" ? value : values[+value],
-    });
-    return this;
-  }
-  _justifyContent(align = "center") {
-    this.style({ justifyContent: align });
-    return this;
-  }
-  vertical(x, y, order=1) {
-    set_vertical.call(this,order);
-    this.style({
-      alignItems: typeof(x)==="number"?map_pos_x.call(this,x):x,
-      justifyContent: typeof(y)=="number"?map_pos_y.call(this,y):y
-    });
-    return this;
-  }
-  horizontal(x, y, order=1) {
-    set_horizontal.call(this,order);
-    this.style({
-      alignItems: typeof(y)=="number"?map_pos_y.call(this,y):y,
-      justifyContent: typeof(x)==="number"?map_pos_x.call(this,x):x
-    });
-    return this;
-  }
-  show() {
-    this.isHidden = false;
-    this.style({ display: "flex" });
-    return this;
-  }
-}
-
-const Flex = (...ZikoUIElement) =>{
-  let tag="div";
-  if(typeof ZikoUIElement[0]==="string"){
-    tag=ZikoUIElement[0];
-    ZikoUIElement.pop();
-  }
-  return new ZikoUIFlex(tag).append(...ZikoUIElement);
-};
-function set_vertical(direction){
-  direction == 1
-    ? this.style({ flexDirection: "column" })
-    : direction == -1 && this.style({ flexDirection: "column-reverse" });
-  return this;
-}
-function set_horizontal(direction){
-direction == 1
-    ? this.style({ flexDirection: "row" })
-    : direction == -1 && this.style({ flexDirection: "row-reverse" });
-  return this;
-}
-function map_pos_x(align){
-let pos = ["flex-start", "center", "flex-end"];
-if (typeof align === "number") align = pos[align + 1];
-return align;
-}
-function map_pos_y(align){
-return map_pos_x(-align);
-}
-
-class ZikoUICarousel extends ZikoUIFlex{
-    constructor(...ZikoUIElement){
-        super();
-        this.style({
-            position:"relative",
-            overflow:"hidden",
-            touchAction:"none",
-            userSelect:"none"
-        });
-        this.horizontal("space-around",0);
-        this.track = Section(...ZikoUIElement).style({ display: "inline-flex" });
-        this.track.size(this.track.children.length * 100 + "vw");
-        this.track.setTarget(this);
-        this.track.items.map((n) =>
-          n.style({ pointerEvents: "none", margin: "auto 10px" })
-        );
-        this.x0 = null;
-        this.tx = 0;
-        this.onPtrMove(e=>{
-            if(e.isDown){
-                let x = e.event.pageX;
-                let dx = x - this.x0;
-                this.track.st.translateX(
-                    this.tx + dx, 
-                    0
-                    );
-              }
-        });
-        this.onPtrDown(e=>{
-            console.log(e.event);
-            this.x0 = e.event.pageX;
-            const transformMatrix = window
-              .getComputedStyle(this.track.element)
-              .getPropertyValue("transform");
-            if (transformMatrix !== "none") {
-              this.tx = +transformMatrix.split(",")[4];
-            }            
-        });
-        this.onPtrUp(e=>console.log(e.isDown));
-        this.onPtrLeave(e=>{
-            // Handle outside up 
-        });
-    }
-    get isCarousel(){
-        return true;
-      }
-}
-const Carousel=(...ZikoUIElement)=>new ZikoUICarousel(...ZikoUIElement);
-
-class ZikoUICodeNote extends ZikoUIFlex{
-    constructor(){
-        super("section");
-        Object.assign(this.cache,{
-            order:0,
-            currentNote:null,
-            currentNoteIndex:null
-        });
-        this.vertical(0,0);
-    }
-    get isCodeNote(){
-        return true;
-      }
-    setCurrentNote(currentNote){
-        this.cache.currentNote=currentNote;
-        this.cache.currentNoteIndex=this.items.findIndex(n=>n===currentNote);
-        currentNote.focus();
-        this.items.forEach(n=>n.Input.style({
-            border: "1px solid #ccc"
-        }));
-        currentNote.Input.style({
-            border:"2px lightgreen solid"
-        });
-        return this;
-    }
-    addNote(text=""){
-        this.append(CodeCell(text));
-        return this;
-    }
-    execute(){
-        this.cache.currentNote.execute();
-        this.incrementOrder();
-        return this;
-    }
-    incrementOrder(){
-        this.cache.order++;
-        this.cache.currentNote.setOrder(this.cache.order);
-        return this;
-    }
-    next(){
-        if(this.cache.currentNote===this.items.at(-1)){
-            this.addNote();
-            this.setCurrentNote(this.items.at(-1));
-        }
-        else this.setCurrentNote(this.items[this.cache.currentNoteIndex+1]); 
-        return this;
-    }
-    previous(){
-        // add append before
-        if(this.cache.currentNote!==this.items[0]){
-            this.setCurrentNote(this.items[this.cache.currentNoteIndex-1]);
-        }
-        return this;
-    }
-    data(){
-        return this.items.map(n=>n.cellData());
-    }
-    serialize(){
-        return JSON.stringify(this.data());
-    }
-    import(data=[]){
-        data.forEach((n,i)=>this.addNote(data[i].input));
-        return this;
-    }
-}
-const CodeNote=()=>new ZikoUICodeNote();
-
-const Input=(codeText="")=>html("code",codeText).style({
-    width:"100%",
-    height:"auto",
-    padding:"10px",
-    boxSizing:"border-box",
-    border: "1px solid #ccc", 
-    outline: "none",
-    fontSize: "1rem", 
-    fontFamily: "Lucida Console, Courier New, monospace", 
-    padding: "1rem 0.5rem", 
-    wordBreak:"break-all",
-    background:"#f6f8fa",
-    color:"#0062C3"
-}).setAttr("contenteditable",true).setAttr("spellcheck",false);
-
-const Output=()=>html("output").style({
-    width:"100%",
-    height:"auto",
-    padding:"5px 0",
-});
-const Left=(ctx)=>Flex$1(
-    text$1("[ ]")
-    ).style({
-        width:"50px",
-        //height:getComputedStyle(ctx.Input.element).height,
-        height:"50px",
-        margin:"10px 4px",
-        padding:"5px",
-        color:"darkblue",
-        borderBottom:"4px solid gold",
-    }).horizontal(0,0);
-const BTN_STYLE={
-    background:"none",
-    width:"25px",
-    height:"25px",
-    fontSize:"1.2rem",
-    cursor:"pointer"
-};
-const Right=(ctx)=>Flex$1(
-    text$1('▶️').style(BTN_STYLE).onClick(e=>{
-        if(ctx.parent instanceof ZikoUICodeNote)ctx.parent.setCurrentNote(ctx);
-        ctx.execute();
-        globalThis.__Ziko__.__Config__.default.target=e.target.parent.parent[1][1];
-    }),
-    text$1('📋').style(BTN_STYLE).onClick(()=>{
-        navigator.clipboard.writeText(ctx.codeText);
-    }),
-    text$1('✖️').style(BTN_STYLE).onClick(()=>ctx.remove()),
-    text$1('✖️').style(BTN_STYLE).onClick(()=>ctx.remove()),
-).style({
-    width:"70px",
-    height:"50px",
-    //background:"cyan",
-    margin:"10px 0"
-}).horizontal(0,0).wrap(true);
-
-class ZikoUICodeCell extends ZikoUIFlex{
-    constructor(code="",{type="js",order=null}={}){
-        super("section");
-        Object.assign(this.cache,{
-            state:null,
-            order,
-            type,
-            metadata:{
-                created:Date.now(),
-                updated:null
-            }
-        });
-        this.Input=Input(code);
-        this.Output=Output();
-        this.InOut=Flex(
-            this.Input,
-            this.Output
-        ).vertical().style({
-            width:"100%",
-            margin:"10px auto"
-        });
-        this.RightControl=Right(this);
-        this.LeftControl=Left();
-        this.append(
-            this.LeftControl,
-            this.InOut,
-            this.RightControl
-        );
-        this.horizontal(-1,1).style({
-            //background:"#444",
-            width:"95vw",
-            margin:"0 auto",
-            border:"1px darkblue dotted"
-        });
-        let cm_content = this.Input.element.getElementsByClassName("cm-content")[0];
-        if( cm_content ){
-            cm_content.addEventListener("keydown",e=>{
-                if(e.key === "Enter" && e.shiftKey){
-                    e.preventDefault();
-                    this.execute(this.cache.order);   
-                }
-            });
-        }
-        else {
-            this.Input.onKeyDown(e=>{
-                if(e.kd==="Enter"){
-                    if(e.event.shiftKey){
-                        e.event.preventDefault();
-                        this.execute(this.cache.order);
-                    }
-                }
-                if(this.cache.parent instanceof ZikoUICodeNote){
-                    if(e.kd==="ArrowDown" && e.event.shiftKey ){
-                        this.cache.parent.next();
-                    }
-                    if(e.kd==="ArrowUp" && e.event.shiftKey){
-                        this.cache.parent.previous();
-                    }
-                }
-            }
-            );
-            this.Input.onFocus(()=>{
-                if(this.cache.parent instanceof ZikoUICodeNote){
-                    this.cache.parent.cache.currentNote=this;
-                    this.cache.parent.setCurrentNote(this);
-                }
-            });
-            this.Input.onPaste((e)=>{
-                //e.event.preventDefault();
-                //this.setValue(this.codeText.trim())
-            });
-            // this.Input.onKeyPress(e=>{
-            //     if(e.kp==="(")a.Input.element.textContent+=")";
-            //     if(e.kp==="[")a.Input.element.textContent+="]";
-            //     if(e.kp==="{")a.Input.element.textContent+="}";
-            // })    
-        }
-        }
-    get isCodeCell(){
-        return true;
-    }
-    // space &nbsp
-    get codeText() {
-        return (this.Input.element.getElementsByClassName("cm-content")[0])
-        ?this.Input.element.getElementsByClassName("cm-content")[0].innerText.trim()
-        :this.Input.element.innerText.trim()
-        // return this.Input.element.innerText.trim();
-    }
-    get codeHTML() {
-        return this.Input.element.innerHTML;
-    }
-    get outputHTML(){
-        return this.Output.element.innerHTML;
-    }
-    setValue(codeText){
-        this.Input[0].setValue(codeText);
-        return this;
-    }
-    cellData(){
-        return {
-            input:this.codeText,
-            output:this.outputHTML,
-            order:this.cache.order,
-            type:this.cache.type     
-        }
-    }
-    execute(order){
-        this.clearOutput();
-        this.evaluate(order);
-        this.cache.metadata.updated=Date.now();
-        return this;
-    }
-    #evaluateJs(order){
-        try{
-            this.LeftControl[0].setValue("pending");
-            this.cache.state="pending";  
-            // globalThis.eval(this.Input.element.innerText);
-            globalThis.eval(this.codeText);
-
-        }
-        catch(err){
-            console.log(err);
-            text(`Error : ${err.message}`).style({
-                color:"red",
-                background:"gold",
-                border:"2px red solid",
-                padding:"10px",
-                margin:"10px 0",
-                display:"flex",
-                justifyContent: "center",
-            });
-            this.LeftControl[0].setValue("Err");
-            this.cache.state="Error";            
-        }
-        finally{
-            if(this.cache.state==="pending"){
-                this.cache.state="success";
-                this.setOrder(order);
-                if(this.cache.parent instanceof ZikoUICodeNote){
-                    this.cache.parent.incrementOrder();
-                    this.cache.parent.next();
-                }
-            }
-        }
-    }
-    #evaluateMd(){
-
-    }
-    #evaluateHtml(){
-
-    }
-    evaluate(order){
-        globalThis.__Ziko__.__Config__.default.target=this.Output.element;
-        switch(this.cache.type){
-            case "js":this.#evaluateJs(order);break;
-        }
-        return this;
-    }
-    clearInput(){
-        this.Output.element.innerText="";
-        return this;
-    }
-    clearOutput(){
-        this.Output.element.innerText="";
-        return this;
-    }
-    setOrder(order,render=true){
-        this.cache.order=order;
-        if(render){
-            (typeof order === "number")?this.LeftControl[0].setValue(`[${order}]`):this.LeftControl[0].setValue("[-]");
-        }
-        return this;
-    }
-    focus(){
-        this.Input.element.focus();
-        return this;
-    }
-}
-
-
-const CodeCell=(codeText,{type,order}={})=>new ZikoUICodeCell(codeText,{type,order});
-
-// Next 
-// Previous
-// Vertical 
-// Horizontal
-class ZikoUITabs extends ZikoUIFlex{
-    #ACTIVE_ELEMENT_INDEX=0;
-    constructor(Controllers,Contents){
-        super("div","Tabs");
-        Object.assign(this.cache,{
-            config:{
-                controllersPercent : .50
-            }
-        });
-        this.style({
-            boxSizing:"border-box",
-            backgroundColor: "blanchedalmond",
-            border:"1px red solid",
-            margin:"30px",
-        });
-        this.controllersContainer = Flex().size("auto","auto").style({
-            boxSizing:"border-box",
-            justifyContent:"center",
-            alignItems:"center",
-            textAlign:"center",
-
-            minWidth:"50px",
-            minHeight:"50px",
-
-            backgroundColor:"darkblue",
-            border:"1px darkblue solid",
-
-        }).setAttr("role","tablist");
-        this.contentContainer = Flex().style({
-            boxSizing:"border-box",
-            justifyContent:"center",
-            alignItems:"center",
-            textAlign:"center",
-
-            width:"100%",
-            height:"100%",
-            backgroundColor:"darkslategrey",
-        });
-        this.append(
-            this.controllersContainer,
-            this.contentContainer
-        );
-        if(Controllers.length!==Contents.length)console.error("");
-        else {
-            this.controllersContainer.append(...Controllers);
-            this.contentContainer.append(...Contents);
-        }
-        this.init();
-        this.display(0);
-        this.useVertical();
-    }
-    get isTabs(){
-        return true;
-    }
-    init(){  
-        // Remove old listener
-        for(let i=0;i<this.controllersContainer.length;i++){
-            this.controllersContainer[i].setAttr("role","tab").setAttr("aria-controls",`tab${i}`);
-            this.contentContainer[i].setAttr("role","tabpanel").setAttr("aria-labelledby",`tab${i}`).setAttr("tabindex",-1);
-        }
-        this.controllersContainer.forEach(item=>item.onClick(e=>{
-            const tab=e.target.element.getAttribute("aria-controls");
-            const index=+tab.slice(3);
-            this.contentContainer.filter(n=>n.element.getAttribute("aria-labelledby")===tab,()=>{
-                if(this.#ACTIVE_ELEMENT_INDEX!==index)this.display(index);
-            });
-        }));
-        return this;
-    }
-    addPairs(ControllerItem,ContentItem){
-        this.controllersContainer.append(ControllerItem);
-        this.contentContainer.append(ContentItem);
-        const length=this.controllersContainer.length;
-        this.controllersContainer.at(-1).setAttr("role","tab").setAttr("aria-controls",`tab${length-1}`);
-        this.contentContainer.at(-1).setAttr("role","tabpanel").setAttr("aria-labelledby",`tab${length-1}`).setAttr("tabindex",-1);
-        // Add listener
-        return this;
-    }
-    removePairs(index){
-
-    }
-    display(index){
-        this.#ACTIVE_ELEMENT_INDEX=index%this.contentContainer.length;
-        const ActiveContent = this.contentContainer.at(this.#ACTIVE_ELEMENT_INDEX);
-        this.controllersContainer.forEach(n=>n.setAttr("tabindex",-1).setAttr("aria-selected",false));
-        this.controllersContainer.at(this.#ACTIVE_ELEMENT_INDEX).setAttr("tabindex",0).setAttr("aria-selected",true);
-        
-        this.contentContainer.forEach(n=>n.st.hide());
-
-        ActiveContent.st.translateX(100,0);
-        ActiveContent.setAttr("tabindex",0).st.show();
-        ActiveContent.st.translateX(0,1000);
-
-        return this;   
-    }
-    next(i=1){
-        this.display(this.#ACTIVE_ELEMENT_INDEX+i);
-        return this;
-    }
-    previous(i=1){
-        this.display(this.#ACTIVE_ELEMENT_INDEX-i);
-        return this;
-    }
-    useVertical(){
-        this.vertical(0,0);
-        this.controllersContainer.horizontal(0,0);
-        this.controllersContainer.style({
-            width : "100%",
-            height : `${this.cache.config.controllersPercent*100}%`
-        });
-        this.contentContainer.style({
-            width : "100%",
-            height : `${(1-this.cache.config.controllersPercent)*100}%`
-        });
-        return this;
-    }
-    useHorizontal(){
-        this.horizontal(0,0);
-        this.controllersContainer.vertical(0, 0);
-        this.controllersContainer.style({
-            height : "100%",
-            width : `${this.cache.config.controllersPercent*100}%`
-        });
-        this.contentContainer.style({
-            height : "100%",
-            width : `${(1-this.cache.config.controllersPercent)*100}%`
-        });
-        return this;
-    }
-    // useHorizontalSwippe(){
-    //     this.onPtrDown();
-    //     this.onPtrUp(e=>this.next(Math.sign(e.swippe.delta_x)));
-    //     return this;
-    // }
-    // useVerticalSwippe(){
-    //     this.onPtrDown();
-    //     this.onPtrUp(e=>this.next(Math.sign(e.swippe.delta_y)));
-    //     return this;
-    // }
-}
-
-const Tabs=(Controllers,Contents)=>new ZikoUITabs(Controllers,Contents);
-
-/*
-
-const cont=(txt = "A")=>btn(txt).style({width:"170px"})
-a=Tabs(
-  [cont("A1"),cont("A2"),cont("A3"),cont("A4")],
-   [cont("A1"),cont("A2"),cont("A3"),cont("A4")]
-).vertical().size("400px")
-a.controllersContainer.style({
-overflowX:"auto"
-})
-a.useHorizontal()
-
-*/
-
-/*
-
-a=Flex().size("400px","400px").style({background:"red"})
-a.element.animate([
-    { borderRadius: "0" , background : "red" },
-    { borderRadius: "50% 0" },
-    { borderRadius: "50% 50%" },
-    { borderRadius: "0 50%" },
-    { borderRadius: "0", background : "yellow"  },
-  ],
-  {
-    // temporisation
-    duration: 2000,
-    iterations: Infinity,
-  })
-
-  */
-
-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$1{
-    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$1(
-            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);
-
-const Splitter = ({orintation = "horizontal",slides = []}) =>{
-    if(["v","vertical"].includes(orintation.toLowerCase())) return vSplitter(...slides);
-    else if(["h","horizontal"].includes(orintation.toLowerCase())) return hSplitter(...slides);
-    else ;
-};
-
-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 ZikoUIMenu3d extends ZikoUIFlex$1{
-    constructor(controller, content){
-        super("div", "menu3d");
-        this.controller = controller;
-        this.content = content;
-        this.cover = null;
-        Object.assign(this.cache,{
-            config:{
-                useTransfo : false,
-                isOpen : false,
-                position : "left",
-                threshold : 40,
-                angle : 70,
-                overlap : 6,
-                width : 300,
-                height : 300,
-                transitionDuration: '0.5s',
-                transitionEasing: 'ease',
-                menuTransformOrigin : null,
-                menuTransformClosed : null,
-                menuTransformOpened : null,
-                contentTransformOrigin : null,
-                contentTransformClosed : null,
-                contentTransformOpened : null,
-            }
-        });
-        this.append(
-            this.controller,
-            this.content
-        );
-        this.update();
-    }
-    get isOpen(){
-        return this.cache.config.isOpen;
-    }
-    update(){
-        this.controller.style({
-            display:"none",
-            padding:"20px",
-            overflow:"auto",
-            background:"darkblue",
-            color: "#eee",
-            webkitboxSizing: "border-box",
-            mozBoxSizing: "border-box",
-	        boxSizing:"border-box",
-        });
-        this.content.style({
-            padding:"20px 40px",
-            width: "100%",
-            height: "100%",
-            // overflowY:"auto",
-            background:"gold",
-            color: "#eee",
-            webkitboxSizing: "border-box",
-            mozBoxSizing: "border-box",
-	        boxSizing:"border-box",
-            webkitOverflowScrolling:"touch",
-            webkitTransformStyle: "preserve-3d"
-        });
-        this.setupPositions();
-        this.setupWrapper();
-        this.setupCover();
-        this.setupMenu();
-        this.setupContent();
-    }
-    setupPositions() {
-        this.cache.config.menuTransformOpened = '';
-        this.cache.config.contentTransformClosed = '';
-        let menuAngle = this.cache.config.angle;
-        let contentAngle = this.cache.config.angle / -2;
-        switch( this.cache.config.position ) {
-            case "top":
-                this.cache.config.menuTransformOrigin = '50% 0%';
-                this.cache.config.menuTransformClosed = `rotateX(${menuAngle}deg) translateY(-100%) translateY(${this.cache.config.overlap}px)`;
-                this.cache.config.contentTransformOrigin = '50% 0';
-                this.cache.config.contentTransformOpened = `translateY(${this.height/2}px) rotateX(${contentAngle}deg)`;
-                break;
-            case "right":
-                this.cache.config.menuTransformOrigin = '100% 50%';
-                this.cache.config.menuTransformClosed = 'rotateY( ' + menuAngle + 'deg ) translateX( 100% ) translateX( -2px ) scale( 1.01 )';
-                this.cache.config.contentTransformOrigin = '100% 50%';
-                this.cache.config.contentTransformOpened = 'translateX( -'+ this.width/2 +'px ) rotateY( ' + contentAngle + 'deg )';
-                break;
-            case "bottom":
-                this.cache.config.menuTransformOrigin = '50% 100%';
-                this.cache.config.menuTransformClosed = 'rotateX( ' + -menuAngle + 'deg ) translateY( 100% ) translateY( -'+ this.cache.config.overlap +'px )';
-                this.cache.config.contentTransformOrigin = '50% 100%';
-                this.cache.config.contentTransformOpened = 'translateY( -'+ this.height/2 +'px ) rotateX( ' + -contentAngle + 'deg )';
-                break;
-            default:
-                this.cache.config.menuTransformOrigin = '100% 50%';
-                this.cache.config.menuTransformClosed = 'translateX( -100% ) translateX( '+ this.cache.config.overlap +'px ) scale( 1.01 ) rotateY( ' + -menuAngle + 'deg )';
-                this.cache.config.contentTransformOrigin = '0 50%';
-                this.cache.config.contentTransformOpened = 'translateX( '+ this.width/2 +'px ) rotateY( ' + -contentAngle + 'deg )';
-                break;
-        }
-    }
-    setupWrapper() {
-        this.style({
-            perspective : "800px",
-            perspectiveOrigin : this.cache.config.contentTransformOrigin
-        });
-    }
-    setupCover(){
-        if( this.cover ) this.cover.element.parentNode.removeChild( this.cover.element );
-                this.cover=new ZikoUIElement("div","div").style({
-                    position:"absolute",
-					display:"block",
-					width:"100%",
-					height:"100%",
-					left:0,
-					top:0,
-					zIndex:1000,
-					visibility:"hidden",
-					opacity:0,
-					transition: `all ${this.cache.config.transitionDuration} ${this.cache.config.transitionEasing}`
-                });
-				this.content.element.appendChild( this.cover.element );
-    }
-    setupMenu() {
-        // var style = dom.menu.style;
-        switch( this.cache.config.position ) {
-            case "top":
-                this.controller.style({
-                    width : "100%",
-                    height : `${this.height/2}px`
-                });break;
-            case "right":
-                this.controller.style({
-                    right : 0,
-                    width : `${this.width/2}px`,
-                    height : "100%"
-                });break;
-            case "bottom":
-                this.controller.style({
-                    bottom : "0",
-                    width : "100%",
-                    height : `${this.height/2}px`
-                });break;
-            case "left":
-                this.controller.style({
-                    width : `${this.width/2}px`,
-                    height : "100%"
-                });break;
-        }
-        this.controller.style({
-            position : "fixed",
-            display : "block",
-            zIndex : 1,
-            transform : this.cache.config.menuTransformClosed,
-            transformOrigin : this.cache.config.menuTransformOrigin,
-            transition : 'all ' + this.cache.config.transitionDuration +' '+ this.cache.config.transitionEasing
-        });
-        }
-        setupContent() {
-            this.content.style({
-                transform : this.cache.config.contentTransformClosed,
-                transformOrigin : this.cache.config.contentTransformOrigin,
-                transition : `all ${this.cache.config.transitionDuration} ${this.cache.config.transitionEasing}`
-            });
-        }
-        open(){
-            if(!this.cache.config.isOpen){
-                this.cache.config.isOpen = true;
-                this.cover.style({
-                    height : this.content.element.scrollHeight + "px",
-                    visibility : "visible",
-                    opacity : 1,
-                });
-                if(this.cache.config.useTransfo)this.content.style({
-                    transform : this.cache.config.contentTransformOpened,
-                    userSelect : "default"
-                });
-                this.controller.style({
-                    transform : this.cache.config.menuTransformOpened,
-                    useSelect : "none"
-                });
-                this.emit("opened");
-            }
-        }
-        close() {
-            if( this.cache.config.isOpen ) {
-                this.cache.config.isOpen = false;
-                this.cover.style({
-                    // height : this.content.element.scrollHeight + "px",
-                    visibility : "hidden",
-                    opacity : 0,
-                });
-                this.content.style({
-                    transform : this.cache.config.contentTransformClosed,
-                    useSelect : "default"
-                });
-                this.controller.style({
-                    transform : this.cache.config.menuTransformClosed,
-                    userSelect : "none"
-                });
-            }
-            this.emit("closed");
-        }
-        onOpen(callback){
-            this.on("opened", callback.bind(this));
-            return this;
-        }
-        onClose(callback){
-            this.on("closed", callback.bind(this));
-            return this;
-        }
-        #usePosition(position){
-            if(this.cache.config.position!==position){
-                this.cache.config.position=position;
-                const isOpen = this.isOpen;
-                this.close();
-                this.update();
-                if(isOpen)this.open();
-            }
-        }
-        useRight(){
-            this.#usePosition("left");
-            return this;
-        }
-        useRight(){
-            this.#usePosition("right");
-            return this;
-        }
-        useTop(){
-            this.#usePosition("top");
-            return this;
-        }
-        useBottom(){
-            this.#usePosition("bottom");
-            return this;
-        }
-}
-const menu3d = (controller, content) => new ZikoUIMenu3d(controller, content);
-globalThis.menu3d = menu3d;
-
-
-/*
-
-a = menu3d(Flex(text("Menu")), Flex(text("Content")))
-  .size("80vw", "50vh")
-  .style({ userSelect: "none" });
-a.onOpen((e) => console.log(e));
-a.open();
-a.controller.onSwipe(0.05, 1, (e) => {
-  if (e.event.detail.direction.x === "left") a.close();
-});
-a.content.onSwipe(0.1, 1, (e) => {
-  if (e.event.detail.direction.x === "left") a.close();
-  if (e.event.detail.direction.x === "right") a.open();
-});
-
-
-*/
-
-class ZikoUIModal extends ZikoUIContainerElement{
-    constructor(...UIElements){
-        super("dialog", "modal");
-        this.append(...UIElements);
-        Object.assign(this.cache,{
-            config:{
-                mode:"modal",
-                useTransition:true
-            }
-        });
-        this.style({
-            display:"flex",
-            justifyContent:"center",
-            alignItems:"center",
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            padding: "20px",
-            border: "none",
-            backgroundCcolor: "#f5f5f5",
-            boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",
-            borderRadius: "8px"
-        });
-        this.close();
-    }
-    open(){
-        if(!this.element.open){
-            switch(this.cache.config.mode){
-                case "modal": this.element.showModal(); break;
-                case "dialog": this.element.show(); break;
-                default : this.element.show(); break;
-            }
-            // this.style({
-            //     display : "flex",
-            // })
-            this.st.fadeIn(1000);
-            this.emit("modal:opened");
-        }
-        return this;
-    }
-    close(){
-        // this.style({
-        //     display : "none"
-        // })
-        this.st.fadeOut(1000);
-        if(this.element.open){
-            this.element.close();
-        }
-        this.emit("modal:closed");
-        return this;
-    }
-    closeAfter(t = 1000){
-        globalThis?.setTimeout(()=>this.close(), t);
-        return this;
-    }
-    onOpen(callback){
-        this.on("modal:opened",callback.bind(this));
-        return this;
-    }
-    onClose(callback){
-        this.on("modal:closed",callback.bind(this));
-        return this;
-    }
-    useModal(){
-        this.cache.config.mode = "modal";
-        return this;
-    }
-    useDialog(){
-        this.cache.config.mode = "dialog";
-        return this; 
-    }
-    useTransition(enabled = true){
-        this.cache.config.useTransition = enabled;
-        return this;
-    }
-}
-
-const Modal=(...UIElements)=>new ZikoUIModal(...UIElements);
-
-/*
-a=Modal(text("Hello")).style({
- width:"100%",
- height:"100%"
-})
-Flex(a).size("400px","400px").style({border:"1px red solid"})
-*/
-
-class __ZikoUISlider__ extends ZikoUISection{
-    constructor(){
-        super("section","");
-        Object.assign(this.cache,{
-            currentIndex : 0,
-            slideBuilder : null,
-        });
-        this.container = Flex().size("100%","100%").vertical(0,0).style({
-            // width:"100%",
-            overflow:"hidden"
-        });
-        // this.style({
-        //     // width:"100%",
-        //     overflow:"hidden"
-        // });
-        this.container.setAttr({
-            ariaRoledescription : "carousel",
-            ariaLive: "polite",
-            ariaLabel : "Content Slider"
-        });
-        this.track = Section().size("100%","100%").style({
-            transition : "transform 0.3s ease-in-out",
-        });
-        this.bullets = Flex().style({
-            // position : "absolute",
-            // top : 0,
-            gap : "10px",
-            padding:"10px",
-        });
-        this.container.append(
-            this.track,
-            this.bullets
-        );
-        this.append(this.container);
-    }
-    #updateAriaHidden(){
-        for(let i=0;i<this.track.items.length;i++){
-            this.track[i].setAttr({
-                ariaHidden : (i!==this.cache.currentIndex)
-            });
-        }
-    }
-    goto(n = 0){
-        this.cache.currentIndex = n;
-        this.__updatePos();
-        this.#updateAriaHidden();
-    }
-    next(n = 1){
-        this.cache.currentIndex += n;
-        this.__updatePos();
-        this.#updateAriaHidden();
-        return this;
-    }
-    previous(n = 1){
-        this.cache.currentIndex -= n;
-        this.__updatePos();
-        this.#updateAriaHidden();
-        return this;
-    }
-    #update(){
-        const length = this.track.items.length;
-        for(let i=0;i<length;i++){
-            this.track.items[i].setAttr({
-                ariaLabel : `Slide ${i+1} of ${length}`,
-                dataSlideIndex : i
-            });
-            this.bullets.items[i].setAttr({
-                dataIndex : i,
-                ariaLabel : `Go to slide ${i}`
-            });
-            this.bullets[i].events.click?.destroy();
-            this.bullets[i].onClick(()=>this.goto(i));
-        }
-    }
-    #addSlide(UIElement){
-        this.track.append(this.cache.slideBuilder(UIElement).setAttr({
-            ariaRoledescription : "slide",
-            role : "group",
-            ariaLabel : "" // link to update
-        }));
-        const bullet = text$1().size("15px","15px").style({
-            borderRadius:"50%",
-            cursor : "pointer",
-            border : "3px solid blue",
-            background : "white"
-         }).setAttr({
-            role : "button",
-            tabIndex : 0
-         })
-         .onPtrEnter(e=>e.target.st.background("gold").scale(1.2,1.2))
-         .onPtrLeave(e=>e.target.st.background("white").scale(1,1));
-        this.bullets.append(
-         bullet
-        );
-        return this;
-    }
-    addSlides(...slides){
-        slides.forEach(n=>this.#addSlide(n));
-        this.#update();
-        this.#updateAriaHidden();
-        return this;
-    }
-}
-
-class ZikoUIHorizontalSlider extends __ZikoUISlider__{
-    constructor(...slides){
-        super("section","hSlider");
-        this.container.vertical(0,0);
-        Object.assign(this.cache,{
-            slideBuilder : (UIElement) => Flex(UIElement).style({
-                minWidth : "100%",
-                width:"100%",
-                height:"100%",
-            }).vertical(0,0)
-        });
-        this.track.size("100%","90%").style({
-            display : "flex"
-        });
-        this.addSlides(...slides);
-        this.bullets.horizontal(0,0).style({
-            width : "100%",
-            height : "10%",
-        });
-    }
-    __updatePos(){
-        const width = this.container.width;
-        this.track.st.translateX(-this.cache.currentIndex * width);
-    }
-    
-}
-
-const hSlider=(...slides)=>new ZikoUIHorizontalSlider(...slides);
-
-class ZikoUIVerticalSlider extends __ZikoUISlider__{
-    constructor(...slides){
-        super("section","vSlider");
-        Object.assign(this.cache,{
-            slideBuilder : (UIElement) => Flex(UIElement).size("100%","100%").vertical(0, 0)
-        });
-        this.addSlides(...slides);
-        this.container.horizontal(0,0);
-        this.track.size("90%","100%");
-        this.bullets.vertical(0,0).style({
-            height : "100%",
-            width : "10%"
-        });
-    }
-    __updatePos(){
-        const height = this.container.height;
-        this.track.st.translateY(-this.cache.currentIndex * height);
-    }    
-}
-
-const vSlider=(...slides)=>new ZikoUIVerticalSlider(...slides);
-
-const Slider = ({orintation = "horizontal",slides = []}) =>{
-    if(["v","vertical"].includes(orintation.toLowerCase())) return vSlider(...slides);
-    else if(["h","horizontal"].includes(orintation.toLowerCase())) return hSlider(...slides);
-    else ;
-};
-
-var Derived = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    Accordion: Accordion,
-    Breadcrumbs: Breadcrumbs,
-    Carousel: Carousel,
-    CodeCell: CodeCell,
-    CodeNote: CodeNote,
-    Collapsible: Collapsible,
-    Flex: Flex$1,
-    Grid: Grid$1,
-    Modal: Modal,
-    Slider: Slider,
-    Splitter: Splitter,
-    Tabs: Tabs,
-    ZikoUIAccordion: ZikoUIAccordion,
-    ZikoUIBreadcrumbs: ZikoUIBreadcrumbs,
-    ZikoUICodeNote: ZikoUICodeNote,
-    ZikoUIFlex: ZikoUIFlex$1,
-    ZikoUIGrid: ZikoUIGrid,
-    ZikoUIHorizontalSlider: ZikoUIHorizontalSlider,
-    ZikoUIHorizontalSplitter: ZikoUIHorizontalSplitter,
-    ZikoUIMenu3d: ZikoUIMenu3d,
-    ZikoUIModal: ZikoUIModal,
-    ZikoUIVerticalSlider: ZikoUIVerticalSlider,
-    ZikoUIVerticalSplitter: ZikoUIVerticalSplitter,
-    dangerAlert: dangerAlert,
-    hSlider: hSlider,
-    hSplitter: hSplitter,
-    infoAlert: infoAlert,
-    menu3d: menu3d,
-    successAlert: successAlert,
-    vSlider: vSlider,
-    vSplitter: vSplitter,
-    warningAlert: warningAlert
-});
-
-const UI$1 = {
-    ...Text$1,
-    ...List,
-    ...Io,
-    ...Media,
-    ...Table,
-    ...Semantic,
-    ...Misc,
-    ...Derived,
-    ZikoUIElement,
-    ZikoUIContainerElement
-};
+const UI$1 = {
+    ...Text$1,
+    ...List,
+    ...Io,
+    ...Media,
+    ...Table,
+    ...Semantic,
+    ...Misc,
+    ...Flex$1,
+    ...Grid$2,
+    ZikoUIElement,
+};
 
 const svg2str=svg=>(new XMLSerializer()).serializeToString(svg);
 const svg2ascii=svg=>btoa(svg2str(svg));
@@ -9003,9 +7033,11 @@ function trimKeys(obj) {
     }, Array.isArray(obj) ? [] : {});
 }
 
+// export { markdown2html } from "./markdown.js";
+// export { adoc2html } from "./adoc.js";
+
 var Converter = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    adoc2html: adoc2html,
     arr2str: arr2str,
     csv2arr: csv2arr,
     csv2json: csv2json,
@@ -9020,7 +7052,6 @@ var Converter = /*#__PURE__*/Object.freeze({
     json2xmlFile: json2xmlFile,
     json2yml: json2yml,
     json2ymlFile: json2ymlFile,
-    markdown2html: markdown2html,
     obj2str: obj2str,
     svg2ascii: svg2ascii,
     svg2img: svg2img,
@@ -10393,7 +8424,7 @@ const Math$1 = {
     ...__Calculus__,
 };
 
-class ZikoUISvg extends ZikoUIContainerElement {
+class ZikoUISvg extends ZikoUIElement {
     constructor(w=360,h=300) {
       super("svg","svg");
       //this.cache={};
@@ -10458,439 +8489,14 @@ class ZikoUISvg extends ZikoUIContainerElement {
 
   const Svg =(w,h)=>new ZikoUISvg(w,h);
 
-class ZikoSvgElement extends ZikoUIElement{
-  constructor(type) {
-    super();
-    Object.assign(this.cache,{
-      type
-    });
-  }
-  pos(x,y){
-    return this.posX(x).posY(y);
-  }
-  posX(x){
-    if(["circle","ellipse"].includes(this.cache.type))this.element.cx.baseVal.value=x;
-    else this.element.x.baseVal.value=x;
-    return this;
-  }
-  posY(y){
-    if(["circle","ellipse"].includes(this.cache.type))this.element.cy.baseVal.value=y;
-    else this.element.y.baseVal.value=y;
-    return this;
-  }
-  translate(x,y){
-    return this;
-  }
-  color({ stroke, fill }) {
-    this.element?.setAttribute("stroke", stroke);
-    this.element?.setAttribute("fill", fill);
-    return this;
-  }
-  fill(color = "none") {
-    this.element?.setAttribute("fill", color);
-    return this;
-  }
-  stroke(color = "none", width) {
-    this.element?.setAttribute("stroke", color);
-    width && this.strokeWidth(width);
-    return this;
-  }
-  strokeWidth(width = 1) {
-    this.element?.setAttribute("stroke-width", width);
-    return this;
-  }
-  opacity(value = 1) {
-    this.element?.setAttribute("opacity", value);
-    return this;
-  }
-}
-
-class ZikoSvgCircle extends ZikoSvgElement{
-    constructor(cx,cy,r){
-      super("circle");
-      this.element=document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "circle",
-      );
-      this.pos(cx,cy).setR(r);
-    }
-    setR(r){
-       this.element.r.baseVal.value=r;
-       return this;
-    }
-    get r(){
-      return this.element.baseVal.value;
-    }
-    get cx(){
-      return this.element.baseVal.value;
-    } 
-    get cy(){
-      return this.element.baseVal.value;
-    }  
-  } 
-const svgCircle=(x,y,r)=>new ZikoSvgCircle(x,y,r);
-
-class ZikoSvgEllipse extends ZikoSvgElement{
-    constructor(cx,cy,rx,ry){
-      super("ellipse");
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "ellipse",
-      );
-      this.pos(cx,cy).setRx(rx).setRy(ry);
-    }
-    setRx(rx){
-       this.element.rx.baseVal.value=rx;
-       return this;
-    } 
-    setRy(ry){
-       this.element.ry.baseVal.value=ry;
-       return this;
-    } 
-  } 
-const svgEllipse=(x,y,rx,ry)=>new ZikoSvgEllipse(x,y,rx,ry);
-
-class ZikoSvgForeignObject extends ZikoSvgElement{
-    constructor(x=0,y=0,w="100%",h="100%",...ZikoUIElement){
-      super("foreignObject");
-      this.items=[];
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "foreignObject",
-      );
-      this.container=Flex$1().setTarget(this.element).vertical(0,0).size("auto","auto");
-      this.container.st.scaleY(-1);
-      this.posX(x).posY(y).width(w).height(h);
-    } 
-    width(w){
-        this.element.etAttribute("width",w);
-        return this;
-    }
-    height(h){
-        this.element.etAttribute("height",h);
-        return this;
-    }
-    add(...ZikoUIElement){
-      this.container.append(...ZikoUIElement);
-      return this;
-      }
-    remove(...ZikoUIElement){
-      this.container.append(...ZikoUIElement);
-      return this;   
-      }
-  } 
-const svgObject=(x, y, w, h)=>new ZikoSvgForeignObject(x, y, w, h);
-
-class ZikoSvgGroupe extends ZikoSvgElement{
-    constructor(...svgElement){
-      super();
-      this.items=[];
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "g",
-      );
-      this.add(...svgElement);
-    }
-    add(...svgElement){
-      for(let i=0;i<svgElement.length;i++){
-        this.element?.appendChild(svgElement[i].element);
-        this.items.push(svgElement[i]);
-      }
-      if(svgElement.length===1)return svgElement[0]
-      return svgElement;
-    }
-    remove(...svgElement){
-      for(let i=0;i<svgElement.length;i++){
-        this.element?.removeChild(svgElement[i].element);
-        this.items=this.items.filter(n=>n!=svgElement);
-      }
-      return this;     
-    }
-}
-const svgGroupe=(...svgElement)=>new ZikoSvgGroupe(...svgElement);
-
-class ZikoSvgImage extends ZikoSvgElement{
-    constructor(src="",w="100%",h="100%",x=0,y=0){
-      super();
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "image",
-      );
-      this.setSrc(src).width(w).height(h).x(x).y(y);
-    }
-    x(x){
-       this.element.x.baseVal.value=x;
-       return this;
-    }
-    y(y){
-       this.element.y.baseVal.value=y;
-       return this;
-    }
-    width(w){
-       this.element?.setAttribute("width",w);
-       return this;
-    }
-    height(h){
-       this.element?.setAttribute("height",h);
-       return this;
-    }
-    setSrc(src=""){
-      this.element?.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', src);
-      return this;
-    }
-  } 
-const svgImage=(src,w,h,x,y)=>new ZikoSvgImage(src,w,h,x,y);
-
-class ZikoSvgLine extends ZikoSvgElement{
-    constructor(x1,y1,x2,y2){
-      super();
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "line",
-      );
-      this.x1(x1).y1(y1).x2(x2).y2(y2).stroke("black");
-    }
-    x1(x1){
-       this.element.x1.baseVal.value=x1;
-       return this;
-    }
-    y1(y1){
-       this.element.y1.baseVal.value=y1;
-       return this;
-    }
-    x2(x2){
-       this.element.x2.baseVal.value=x2;
-       return this;
-    } 
-    y2(y2){
-       this.element.y2.baseVal.value=y2;
-       return this;
-    } 
-  } 
-const svgLine=(x1,y1,x2,y2)=>new ZikoSvgLine(x1,y1,x2,y2);
-
-class ZikoSvgLink extends ZikoSvgElement{
-    constructor(href,...svgElement){
-      super();
-      this.items=[];
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "a",
-      );
-      this.element.etAttribute("href",href);
-      this.add(...svgElement);
-    }
-    add(...svgElement){
-      for(let i=0;i<svgElement.length;i++){
-        this.element.ppendChild(svgElement[i].element);
-        this.items.push(svgElement[i]);
-      }
-      if(svgElement.length===1)return svgElement[0]
-      return svgElement;
-    }
-    remove(...svgElement){
-      for(let i=0;i<svgElement.length;i++){
-        this.element.moveChild(svgElement[i].element);
-        this.items=this.items.filter(n=>n!=svgElement);
-      }
-      return this;     
-    }
-}
-const svgLink=(href,...svgElement)=>new ZikoSvgLink(href,...svgElement);
-
-class ZikoSvgPath extends ZikoSvgElement{
-    constructor(){
-    super();
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path",
-      );
-      this.path="";
-      
-    }
-    setPath(){
-        this.element.etAttribute("d",this.path);
-        return this;
-    }
-    clear(){
-        this.path="";
-        this.setPath();
-        return this;
-    }
-    moveTo(x,y){
-        this.path+=`M${x} ${y} `;
-        this.setPath();
-        return this;
-    }
-    lineTo(x,y){
-        this.path+=`L${x} ${y} `;
-        this.setPath();
-        return this;
-    }
-    hr(x){
-        this.path+=`H${x} `;
-        this.setPath();
-        return this;
-    }
-    vr(y){
-        this.path+=`V${y} `;
-        this.setPath();
-        return this;
-    }
-    bezier(x1,y1,x2,y2,x,y){
-        this.path+=`C ${x1} ${y1},${x2} ${y2},${x} ${y} `;
-        this.setPath();
-        return this;      
-    }
-    quadratic(x1,y1,x,y){
-        this.path+=`Q ${x1} ${y1} ${x} ${y} `;
-        this.setPath();
-        return this;      
-    }
-    close(){
-        this.path+="Z";
-        this.setPath();
-        return this;
-    }
-}
-
-const svgPath=()=>new ZikoSvgPath();
-
-class ZikoSvgPolygon extends ZikoSvgElement{
-    constructor(X=[],Y=[]){
-      super();
-      this.X=X;
-      this.Y=Y;
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon",
-      );
-      this.element?.setAttribute("points","");
-      this.addPoints(X,Y);
-    }
-    addPoint(x,y){
-      let p=this.element.parentElement.createSVGPoint();
-      p.x=x;
-      p.y=y;
-      this.element.points.appendItem(p);
-      return this;
-    }
-    addPoints(X,Y){
-      for(let i=0;i<X.length;i++){
-        let p=this.element.parentElement.createSVGPoint();
-        p.x=X[i];
-        p.y=Y[i];
-        this.element.oints.appendItem(p);
-      }
-      return this;
-    }
-  } 
-const svgPolygon=(X,Y)=>new ZikoSvgPolygon(X,Y);
-
-class ZikoSvgRectangle extends ZikoSvgElement{
-    constructor(x,y,w,h,center=true){
-      super();
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "rect",
-      );
-      this.setX(x).setY(y).width(w).height(h);
-      this.rx=this.x+this.w/2;
-      this.ty=this.y+this.h/2;
-    }
-    setX(x){
-       this.element.x.baseVal.value=x;
-       this.x=x;
-       return this;
-    }
-    setY(y){
-       this.element.y.baseVal.value=y;
-       this.y=y;
-       return this;
-    }
-    r(rx,ry){
-      this.rx=rx;
-      this.ry=ry;
-      this.setX(this.rx-this.w/2);
-      this.setY(this.ry-this.h/2);
-      return this;
-    } 
-    width(w){
-       this.element.width.baseVal.value=w;
-       this.w=w;
-       return this;
-    } 
-    height(h){
-       this.element.height.baseVal.value=h;
-       this.h=h;
-       return this;
-    } 
-  } 
-  const svgRect=(x,y,w,h,center)=>new ZikoSvgRectangle(x,y,w,h,center);
-
-class ZikoSvgText extends ZikoSvgElement{
-    constructor(text,x,y){
-      super();
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "text",
-      );
-      this.setText(text);
-      this.x(x).y(y);
-    }
-    x(x){
-       this.element?.setAttribute("x",x);
-       return this;
-    }
-    y(y){
-       this.element?.setAttribute("y",y);
-       return this;
-    }
-    setText(text=""){
-      this.element.textContent=text;
-      return this;
-    }
-  } 
-const svgText=(text,x,y)=>new ZikoSvgText(text,x,y);
-
-const svgGrid=(w,h,r=10,c=10)=>{
-    let path=svgPath().fill("none").stroke("coral").strokeWidth(0.6);
-    console.log({x:w/r,y:h/c});
-    for(let i=0;i<w;i++) path.moveTo(0,i*w/r).hr(w);
-    for(let j=0;j<h;j++) path.moveTo(j*h/c,0).vr(h);
-    return path
-};
-
 var SVG = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Svg: Svg,
-    ZikoSvgCircle: ZikoSvgCircle,
-    ZikoSvgEllipse: ZikoSvgEllipse,
-    ZikoSvgForeignObject: ZikoSvgForeignObject,
-    ZikoSvgGroupe: ZikoSvgGroupe,
-    ZikoSvgImage: ZikoSvgImage,
-    ZikoSvgLine: ZikoSvgLine,
-    ZikoSvgLink: ZikoSvgLink,
-    ZikoSvgPath: ZikoSvgPath,
-    ZikoSvgRectangle: ZikoSvgRectangle,
-    ZikoSvgText: ZikoSvgText,
-    ZikoUISvg: ZikoUISvg,
-    svgCircle: svgCircle,
-    svgEllipse: svgEllipse,
-    svgGrid: svgGrid,
-    svgGroupe: svgGroupe,
-    svgImage: svgImage,
-    svgLine: svgLine,
-    svgLink: svgLink,
-    svgObject: svgObject,
-    svgPath: svgPath,
-    svgPolygon: svgPolygon,
-    svgRect: svgRect,
-    svgText: svgText
+    ZikoUISvg: ZikoUISvg
 });
 
 // import { convolute } from "../../math/signal/conv.js";
-class ZikoUICanvas extends ZikoUIContainerElement{
+class ZikoUICanvas extends ZikoUIElement{
     constructor(w,h){
         super("canvas","canvas");
         this.ctx = this.element?.getContext("2d");
@@ -11060,288 +8666,10 @@ class ZikoUICanvas extends ZikoUIContainerElement{
 
 const Canvas=(w,h)=>new ZikoUICanvas(w,h);
 
-class ZikoCanvasElement{
-    constructor(x,y){
-        this.parent=null;
-        this.position={
-            x,
-            y
-        };
-        this.cache={
-            interact:null/*avoid redraw*/,
-            config:{
-                draggable:false,
-                selected:false,
-                highlighted:false,
-                rendered:false
-            },
-            style:{
-                normal:{
-                    strokeEnabled:true,
-                    fillEnabled:false,
-                    strokeColor:"#111111",
-                    fillColor:"#777777",
-                },
-                highlighted:{
-                    strokeEnabled:true,
-                    fillEnabled:false,
-                    strokeColor:null,
-                    fillColor:null,
-                }
-            },
-        };
-        this.history={
-            position:[],
-            styles:[]
-        };
-        this.render();
-    }
-    get px(){
-        //_x=====>px
-        return (this.position.x??0)+(this.parent?.position?.x??0);
-    }
-    get py(){
-        //_y=====>py
-        return (this.position.y??0)+(this.parent?.position?.y??0);
-    }
-    isIntersectedWith(){
-
-    }
-    isInStroke(x,y){
-        let is;
-        if(this.parent){
-            this.parent.ctx.setTransform(1,0,0,1,0,0);
-            is=this.parent.ctx.isPointInStroke(this.path,x,y);
-            this.parent.applyTransformMatrix();
-        }
-        return is;
-    }
-    isInPath(x,y){
-        let is;
-        if(this.parent){
-            this.parent.ctx.setTransform(1,0,0,1,0,0);
-            is=this.parent.ctx.isPointInPath(this.path,x,y);
-            this.parent.applyTransformMatrix();
-        }
-        return is;
-    }
-    posX(x){
-        this.position.x=x;
-        if(this.parent)this.parent.draw();
-        return this;
-    }
-    posY(y){
-        this.position.y=y;
-        if(this.parent)this.parent.draw();
-        return this;
-    }
-    color({stroke=this.cache.style.normal.strokeColor,fill=this.cache.style.normal.fillColor}={stroke,fill}){
-        this.cache.style.normal.strokeColor=stroke;
-        this.cache.style.normal.fillColor=fill;
-        if(this.parent)this.parent.draw();
-        return this;
-    }
-    translate(dx=0,dy=0){
-        this.position.x+=dx;
-        this.position.y+=dy;
-        if(this.parent)this.parent.draw();
-        return;
-    }
-    applyNormalStyle(ctx){
-        ctx.strokeStyle=this.cache.style.normal.strokeColor;
-        ctx.fillStyle=this.cache.style.normal.fillColor;
-        return this;   
-    }
-    applyHighlightedStyle(ctx){
-        ctx.strokeStyle=this.cache.style.highlighted.strokeColor;
-        ctx.fillStyle=this.cache.style.highlighted.fillColor;
-        return this;
-    }
-    stroke(color=this.cache.style.normal.strokeColor,enabled=true){
-        this.cache.style.normal.strokeEnabled=enabled;
-        this.cache.style.normal.strokeColor=color;
-        if(this.parent)this.parent.draw();
-        return this  
-    }
-    fill(color=this.cache.style.normal.fillColor,enabled=true){
-        this.cache.style.normal.fillEnabled=enabled;
-        this.cache.style.normal.filleColor=color;
-        if(this.parent)this.parent.draw();
-        return this;      
-    }
-    render(render=true){
-       this.cache.config.rendered=render;
-       return this;       
-    }
-}
-
-class CanvasArc extends ZikoCanvasElement{
-    constructor(x,y,r,angle){
-        super(x,y);
-        this.r=r;
-        this.angle=angle;
-        this.path=null;
-    }
-    draw(ctx){
-        if(this.cache.config.rendered){
-            ctx.save();
-            this.applyNormalStyle(ctx);
-            ctx.beginPath();
-            this.path=new Path2D();
-            this.path.arc(this.px, this.py, this.r, 0, this.angle);
-            const{strokeEnabled,fillEnabled}=this.cache.style.normal;
-            if(strokeEnabled)ctx.stroke(this.path);
-            if(fillEnabled)ctx.fill(this.path);
-            ctx.closePath(); 
-            ctx.restore();
-        }
-        return this;   
-    }
-    radius(r){
-        this.r=r;
-        if(this.parent)this.parent.draw();
-        return this;
-    }
-    // distanceFromCenter(x,y){
-    //     return Math.sqrt(
-    //         (this._x-x)**2-(this._y-y)**2
-    //     )
-    // }
-    // isIn(x,y,strict=false){
-    //     return strict?this.distanceFromCenter(x,y)<this.r:this.distanceFromCenter(x,y)<=this.r;
-    // }
-    // isInEdges(x,y){
-    //     return this.distanceFromCenter(x,y)===this.r;
-    // }
-}
-const canvasArc=(x,y,r,phi)=>new CanvasArc(x,y,r,phi);
-const canvasCircle=(x,y,r)=>new CanvasArc(x,y,r,2*Math.PI);
-
-class CanvasPoints extends ZikoCanvasElement{
-    constructor(ptsX,ptsY){
-        super();
-        this.pointsMatrix=null;
-        this.path=new Path2D();
-        this.fromXY(ptsX,ptsY);
-    }
-    get points(){
-        return this.pointsMatrix.T.arr;
-    }
-    draw(ctx){
-        if(this.cache.config.rendered){
-            ctx.save();
-            this.applyNormalStyle(ctx);
-            ctx.beginPath();
-            this.path.moveTo(this.points[1][0]+this._x,this.points[1][1]+this._y);
-            for(let i=1;i<this.points.length;i++){
-                this.path.lineTo(this.points[i][0]+this._x,this.points[i][1]+this._y);
-            }
-            ctx.stroke(this.path);
-            ctx.restore();
-        }
-        return this;
-    }
-    fromXY(X,Y){
-        this.pointsMatrix=matrix([X,Y]);
-        return this;
-    }
-    push(ptsX,ptsY){
-        this.pointsMatrix.hstack(matrix([ptsX,ptsY]));
-        if(this.parent)this.parent.draw();
-        return this;
-    }
-    isIn(x,y){
-        let is;
-        if(this.parent){
-            this.parent.ctx.setTransform(1,0,0,1,0,0);
-            is=this.parent.ctx.isPointInPath(this.path,x,y);
-            this.parent.applyTransformMatrix();
-        }
-        return is;
-    }
-}
-
-const canvasPoints=(ptsX=[],ptsY=[])=>new CanvasPoints(ptsX,ptsY);
-
-class CanvasLine extends ZikoCanvasElement{
-    constructor(x0,y0,x1,y1){
-        super();
-        this.x0=x0;
-        this.x1=x1;
-        this.y0=y0;
-        this.y1=y1;
-        delete this.fill;
-    }
-    draw(ctx){
-        if(this.cache.config.rendered){
-            ctx.save();
-            this.applyNormalStyle(ctx);
-            ctx.beginPath();
-            ctx.moveTo(this.x0+this._x,this.y0+this._y_);
-            ctx.lineTo(this.x1+this._x,this.y1+this._y);
-            ctx.stroke();
-            if(this.cache.style.normal.strokeEnabled)ctx.stroke();
-            ctx.restore();
-        }
-        return this;   
-    }
-}
-const canvasLine=(x0,y0,x1,y1)=>new CanvasLine(x0,y0,x1,y1);
-
-class CanvasRect extends ZikoCanvasElement{
-    constructor(x,y,w,h){
-        super(x,y);
-        this.w=w;
-        this.h=h;
-        this.path=new Path2D();
-    }
-    draw(ctx){
-        if(this.cache.config.rendered){
-            ctx.save();
-            this.applyNormalStyle(ctx);
-            ctx.beginPath();
-            this.path.rect(this.px, this.py,this.w,this.h);
-            const{strokeEnabled,fillEnabled}=this.cache.style.normal;
-            if(strokeEnabled)ctx.stroke(this.path);
-            if(fillEnabled)ctx.fill(this.path);
-            ctx.closePath(); 
-            ctx.restore();
-        }
-        return this;   
-    }
-    width(w){
-        this.w=w;
-        if(this.parent)this.parent.draw();
-        return this;
-    }
-    height(h){
-        this.h=h;
-        if(this.parent)this.parent.draw();
-        return this;
-    }
-    // distanceFromCenter(x,y){
-    //     return Math.sqrt(
-    //         (this.position.x-x)**2-(this.position.y-y)**2
-    //     )
-    // }
-    // isIn(x,y,strict=false){
-    //     return strict?this.distanceFromCenter(x,y)<this.r:this.distanceFromCenter(x,y)<=this.r;
-    // }
-    // isInEdges(x,y){
-    //     return this.distanceFromCenter(x,y)===this.r;
-    // }
-}
-const canvasRect=(x,y,w,h)=>new CanvasRect(x,y,w,h);
-
 var CANVAS = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Canvas: Canvas,
-    ZikoUICanvas: ZikoUICanvas,
-    canvasArc: canvasArc,
-    canvasCircle: canvasCircle,
-    canvasLine: canvasLine,
-    canvasPoints: canvasPoints,
-    canvasRect: canvasRect
+    ZikoUICanvas: ZikoUICanvas
 });
 
 const Graphics = {
@@ -11646,7 +8974,7 @@ class ZikoSPA extends ZikoApp{
     constructor({head, wrapper, target, routes}){
         super({head, wrapper, target});
         this.routes=new Map([
-            ["404",text$1("Error 404")],
+            ["404",text("Error 404")],
             ...Object.entries(routes)
         ]);
         this.clear();
@@ -11726,6 +9054,7 @@ function defineParamsGetter(target ){
 }
 
 const __UI__={};
+const __HYDRATION_MAP__ = new Map();
 const __Config__={
     default:{
         target:null,
@@ -11739,12 +9068,15 @@ const __Config__={
         const values=Object.values(pairs);
         for(let i=0;i<keys.length;i++)this.default[keys[i]]=values[i];
     },
-    init:()=>document.documentElement.setAttribute("data-engine","zikojs")
+    init:()=>document.documentElement.setAttribute("data-engine","zikojs"),
+    renderingMode :"spa",
+    isSSC : false,
 };
 
 var Global = /*#__PURE__*/Object.freeze({
     __proto__: null,
     __Config__: __Config__,
+    __HYDRATION_MAP__: __HYDRATION_MAP__,
     __UI__: __UI__
 });
 
@@ -11844,6 +9176,7 @@ if ( globalThis.__Ziko__ ) {
 		globalThis.__Ziko__={
             ...Ziko,
             __UI__,
+            __HYDRATION_MAP__,
             __Config__,
             ExtractAll,
             RemoveAll
@@ -11878,4 +9211,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$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 };
+export { App$1 as App, Article, Aside, Base, Canvas, Combinaison, Complex, E, EPSILON, Ease, FileBasedRouting, Flex, Footer, Form, Grid$1 as Grid, HTMLWrapper, Header, LinearSystem, Logic$1 as Logic, Main, Matrix, Nav, PI$1 as PI, Permutation, Random, SPA, SVGWrapper, Section, Str, Suspense, Svg, Table$1 as Table, Utils$1 as Utils, ZikoApp, ZikoCustomEvent, ZikoEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventHash, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventWheel, ZikoHead$1 as ZikoHead, ZikoJsonStyleSheet, ZikoMutationObserver, ZikoSPA, ZikoUIAbbrText, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBlockQuote, ZikoUIBr, ZikoUICanvas, ZikoUICodeText, ZikoUIDefintion, ZikoUIElement, ZikoUIFigure, ZikoUIFlex, ZikoUIFooter, ZikoUIForm, ZikoUIGrid, ZikoUIHTMLWrapper, ZikoUIHeader, ZikoUIHeading, ZikoUIHr, ZikoUIHtmlTag, ZikoUIImage, ZikoUIInput, ZikoUIInputCheckbox, ZikoUIInputColor, ZikoUIInputDatalist$1 as ZikoUIInputDatalist, ZikoUIInputDate, ZikoUIInputDateTime, ZikoUIInputEmail, ZikoUIInputImage, ZikoUIInputNumber, ZikoUIInputOption, ZikoUIInputPassword, ZikoUIInputRadio, ZikoUIInputSearch, ZikoUIInputSlider$1 as ZikoUIInputSlider, ZikoUIInputTime, ZikoUILabel, ZikoUILink, ZikoUIMain, ZikoUINav, ZikoUIParagraphe, ZikoUIQuote, ZikoUISVGWrapper, ZikoUISection, ZikoUISelect, ZikoUISubText, ZikoUISupText, ZikoUISuspense, ZikoUISvg, ZikoUIText, ZikoUITextArea, ZikoUIVideo, ZikoUIXMLWrapper, ZikoUseRoot, ZikoUseStyle, __Config__, __HYDRATION_MAP__, __UI__, abbrText, abs, accum, acos, acosh, acot, add, arange, arr2str, asin, asinh, atan, atan2, atanh, audio, bessel, beta, blockQuote, br, brs, btn, cartesianProduct, ceil, checkbox, choleskyDecomposition, clamp, codeText, combinaison, complex, cos, cosh, cot, coth, count, countWords, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, datalist, Ziko as default, defineParamsGetter, deg2rad, dfnText, div, e, fact, figure, floor, gamma, geomspace, h, h1, h2, h3, h4, h5, h6, hTags, hr, hrs, html, hypot, image, inRange, input, inputCamera, inputColor, inputDate, inputDateTime, inputEmail, inputImage, inputNumber, inputPassword, inputTime, isApproximatlyEqual, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, jsonStyleSheet, lerp, li, link, linspace, ln, logspace, luDecomposition, map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ol, ones, p, pgcd, pow, powerSet, ppcm, preload, prod, qrDecomposition, quote, rad2deg, radio, removeExtraSpace, round, s, sTags, search, sec, select, sig, sign, sin, sinc, sinh, slider, sqrt, sqrtn, str, sub, subSet, subText, sum, supText, svg2ascii, svg2img, svg2imgUrl, svg2str, tan, tanh, text, textarea, timeTaken, time_memory_Taken, ul, useAnimation, useChannel$1 as useChannel, useClickEvent, useClipboardEvent, useCustomEvent, useDebounce, useDragEvent, useDropEvent, useEventEmitter, useFavIcon$1 as useFavIcon, useFocusEvent, useFps, 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, video, wait, waitForUIElm, waitForUIElmSync, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };