ziko 0.0.22 → 0.0.24

package/dist/ziko.js

@@ -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
@@ -1127,229 +1127,6 @@
         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 = ",") => {
@@ -4495,59 +4272,6 @@
         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);
@@ -4823,12 +4547,10 @@
         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,
@@ -4851,7 +4573,7 @@
     };
 
     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){
@@ -4860,8 +4582,10 @@
             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,
@@ -4892,23 +4616,29 @@
           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;
@@ -4917,7 +4647,7 @@
         return this.cache.attributes;
       }
       get evt(){
-        return this.cache.events;
+        return this.events;
       }
       get html(){
         return this.element.innerHTML;
@@ -4982,7 +4712,7 @@
           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);
@@ -5012,7 +4742,7 @@
         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]);
           }
@@ -5431,128 +5161,7 @@
       }
     }
 
-    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);
@@ -5657,7 +5266,7 @@
         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);
@@ -5738,10 +5347,10 @@
         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);
@@ -5750,7 +5359,7 @@
         return true;
       }
     }
-    class ZikoUIList extends ZikoUIContainerElement {
+    class ZikoUIList extends ZikoUIElement {
         constructor(element,name) {
           super(element,name);
           delete this.append;
@@ -5762,7 +5371,7 @@
         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]);
@@ -5790,7 +5399,7 @@
           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]);
@@ -6398,7 +6007,7 @@
         return acc;
       }, {});
 
-    class ZikoUIHtmlTag extends ZikoUIContainerElement {
+    class ZikoUIHtmlTag extends ZikoUIElement {
       constructor(element) {
         super(element,"html");
       }
@@ -6451,7 +6060,7 @@
           return true
         }
       }
-      class ZikoUILink extends ZikoUIContainerElement{
+      class ZikoUILink extends ZikoUIElement{
         constructor(href){
           super("a","link");
           Object.assign(this.cache,{
@@ -6785,7 +6394,7 @@
     }
     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";
@@ -6833,18 +6442,18 @@
         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;
       }
@@ -6853,38 +6462,44 @@
         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);
@@ -7002,7 +6617,7 @@
     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)
@@ -7145,7 +6760,7 @@
         Table: Table$1
     });
 
-    class ZikoUIMain extends ZikoUIContainerElement{
+    class ZikoUIMain extends ZikoUIElement{
         constructor(){
           super("main","Main");
         }
@@ -7153,7 +6768,7 @@
           return true
         }
       }
-      class ZikoUIHeader extends ZikoUIContainerElement{
+      class ZikoUIHeader extends ZikoUIElement{
         constructor(){
           super("header","Header");
         }
@@ -7161,7 +6776,7 @@
           return true
         }
       }
-      class ZikoUINav extends ZikoUIContainerElement{
+      class ZikoUINav extends ZikoUIElement{
         constructor(){
           super("nav","Nav");
         }
@@ -7169,7 +6784,7 @@
           return true
         }
       }
-      class ZikoUISection extends ZikoUIContainerElement{
+      class ZikoUISection extends ZikoUIElement{
         constructor(){
           super("section","Section");
           this.style({position:"relative"});
@@ -7178,7 +6793,7 @@
           return true
         }
       }
-      class ZikoUIArticle extends ZikoUIContainerElement{
+      class ZikoUIArticle extends ZikoUIElement{
         constructor(){
           super("article","Article");
         }
@@ -7186,7 +6801,7 @@
           return true
         }
       }
-      class ZikoUIAside extends ZikoUIContainerElement{
+      class ZikoUIAside extends ZikoUIElement{
         constructor(){
           super("aside","Aside");
         }
@@ -7194,7 +6809,7 @@
           return true
         }
       }
-      class ZikoUIFooter extends ZikoUIContainerElement{
+      class ZikoUIFooter extends ZikoUIElement{
         constructor(){
           super("footer","Footer");
           this.element=document?.createElement("footer");
@@ -7229,7 +6844,7 @@
         ZikoUISection: ZikoUISection
     });
 
-    class ZikoUIGrid extends ZikoUIContainerElement {
+    class ZikoUIGrid extends ZikoUIElement {
         constructor(tag ="div", w = "50vw", h = "50vh") {
           super(tag,"Grid");
           this.direction = "cols";
@@ -7261,1609 +6876,24 @@
     }
     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));
@@ -9009,9 +7039,11 @@
         }, 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,
@@ -9026,7 +7058,6 @@
         json2xmlFile: json2xmlFile,
         json2yml: json2yml,
         json2ymlFile: json2ymlFile,
-        markdown2html: markdown2html,
         obj2str: obj2str,
         svg2ascii: svg2ascii,
         svg2img: svg2img,
@@ -10399,7 +8430,7 @@
         ...__Calculus__,
     };
 
-    class ZikoUISvg extends ZikoUIContainerElement {
+    class ZikoUISvg extends ZikoUIElement {
         constructor(w=360,h=300) {
           super("svg","svg");
           //this.cache={};
@@ -10464,439 +8495,14 @@
 
       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");
@@ -11066,288 +8672,10 @@
 
     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 = {
@@ -11652,7 +8980,7 @@
         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();
@@ -11732,6 +9060,7 @@
     }
 
     const __UI__={};
+    const __HYDRATION_MAP__ = new Map();
     const __Config__={
         default:{
             target:null,
@@ -11745,12 +9074,15 @@
             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__
     });
 
@@ -11850,6 +9182,7 @@
     		globalThis.__Ziko__={
                 ...Ziko,
                 __UI__,
+                __HYDRATION_MAP__,
                 __Config__,
                 ExtractAll,
                 RemoveAll
@@ -11884,24 +9217,18 @@
         Data.RemoveAll();
     }
 
-    exports.Accordion = Accordion;
     exports.App = App$1;
     exports.Article = Article;
     exports.Aside = Aside;
     exports.Base = Base;
-    exports.Breadcrumbs = Breadcrumbs;
     exports.Canvas = Canvas;
-    exports.Carousel = Carousel;
-    exports.CodeCell = CodeCell;
-    exports.CodeNote = CodeNote;
-    exports.Collapsible = Collapsible;
     exports.Combinaison = Combinaison;
     exports.Complex = Complex;
     exports.E = E;
     exports.EPSILON = EPSILON;
     exports.Ease = Ease;
     exports.FileBasedRouting = FileBasedRouting;
-    exports.Flex = Flex$1;
+    exports.Flex = Flex;
     exports.Footer = Footer;
     exports.Form = Form;
     exports.Grid = Grid$1;
@@ -11911,7 +9238,6 @@
     exports.Logic = Logic$1;
     exports.Main = Main;
     exports.Matrix = Matrix;
-    exports.Modal = Modal;
     exports.Nav = Nav;
     exports.PI = PI$1;
     exports.Permutation = Permutation;
@@ -11919,13 +9245,10 @@
     exports.SPA = SPA;
     exports.SVGWrapper = SVGWrapper;
     exports.Section = Section;
-    exports.Slider = Slider;
-    exports.Splitter = Splitter;
     exports.Str = Str;
     exports.Suspense = Suspense;
     exports.Svg = Svg;
     exports.Table = Table$1;
-    exports.Tabs = Tabs;
     exports.Utils = Utils$1;
     exports.ZikoApp = ZikoApp;
     exports.ZikoCustomEvent = ZikoCustomEvent;
@@ -11943,40 +9266,24 @@
     exports.ZikoJsonStyleSheet = ZikoJsonStyleSheet;
     exports.ZikoMutationObserver = ZikoMutationObserver;
     exports.ZikoSPA = ZikoSPA;
-    exports.ZikoSvgCircle = ZikoSvgCircle;
-    exports.ZikoSvgEllipse = ZikoSvgEllipse;
-    exports.ZikoSvgForeignObject = ZikoSvgForeignObject;
-    exports.ZikoSvgGroupe = ZikoSvgGroupe;
-    exports.ZikoSvgImage = ZikoSvgImage;
-    exports.ZikoSvgLine = ZikoSvgLine;
-    exports.ZikoSvgLink = ZikoSvgLink;
-    exports.ZikoSvgPath = ZikoSvgPath;
-    exports.ZikoSvgRectangle = ZikoSvgRectangle;
-    exports.ZikoSvgText = ZikoSvgText;
     exports.ZikoUIAbbrText = ZikoUIAbbrText;
-    exports.ZikoUIAccordion = ZikoUIAccordion;
     exports.ZikoUIArticle = ZikoUIArticle;
     exports.ZikoUIAside = ZikoUIAside;
     exports.ZikoUIAudio = ZikoUIAudio;
     exports.ZikoUIBlockQuote = ZikoUIBlockQuote;
     exports.ZikoUIBr = ZikoUIBr;
-    exports.ZikoUIBreadcrumbs = ZikoUIBreadcrumbs;
     exports.ZikoUICanvas = ZikoUICanvas;
-    exports.ZikoUICodeNote = ZikoUICodeNote;
     exports.ZikoUICodeText = ZikoUICodeText;
-    exports.ZikoUIContainerElement = ZikoUIContainerElement;
     exports.ZikoUIDefintion = ZikoUIDefintion;
     exports.ZikoUIElement = ZikoUIElement;
     exports.ZikoUIFigure = ZikoUIFigure;
-    exports.ZikoUIFlex = ZikoUIFlex$1;
+    exports.ZikoUIFlex = ZikoUIFlex;
     exports.ZikoUIFooter = ZikoUIFooter;
     exports.ZikoUIForm = ZikoUIForm;
     exports.ZikoUIGrid = ZikoUIGrid;
     exports.ZikoUIHTMLWrapper = ZikoUIHTMLWrapper;
     exports.ZikoUIHeader = ZikoUIHeader;
     exports.ZikoUIHeading = ZikoUIHeading;
-    exports.ZikoUIHorizontalSlider = ZikoUIHorizontalSlider;
-    exports.ZikoUIHorizontalSplitter = ZikoUIHorizontalSplitter;
     exports.ZikoUIHr = ZikoUIHr;
     exports.ZikoUIHtmlTag = ZikoUIHtmlTag;
     exports.ZikoUIImage = ZikoUIImage;
@@ -11998,8 +9305,6 @@
     exports.ZikoUILabel = ZikoUILabel;
     exports.ZikoUILink = ZikoUILink;
     exports.ZikoUIMain = ZikoUIMain;
-    exports.ZikoUIMenu3d = ZikoUIMenu3d;
-    exports.ZikoUIModal = ZikoUIModal;
     exports.ZikoUINav = ZikoUINav;
     exports.ZikoUIParagraphe = ZikoUIParagraphe;
     exports.ZikoUIQuote = ZikoUIQuote;
@@ -12012,13 +9317,12 @@
     exports.ZikoUISvg = ZikoUISvg;
     exports.ZikoUIText = ZikoUIText;
     exports.ZikoUITextArea = ZikoUITextArea;
-    exports.ZikoUIVerticalSlider = ZikoUIVerticalSlider;
-    exports.ZikoUIVerticalSplitter = ZikoUIVerticalSplitter;
     exports.ZikoUIVideo = ZikoUIVideo;
     exports.ZikoUIXMLWrapper = ZikoUIXMLWrapper;
     exports.ZikoUseRoot = ZikoUseRoot;
     exports.ZikoUseStyle = ZikoUseStyle;
     exports.__Config__ = __Config__;
+    exports.__HYDRATION_MAP__ = __HYDRATION_MAP__;
     exports.__UI__ = __UI__;
     exports.abbrText = abbrText;
     exports.abs = abs;
@@ -12027,7 +9331,6 @@
     exports.acosh = acosh;
     exports.acot = acot;
     exports.add = add;
-    exports.adoc2html = adoc2html;
     exports.arange = arange;
     exports.arr2str = arr2str;
     exports.asin = asin;
@@ -12042,11 +9345,6 @@
     exports.br = br;
     exports.brs = brs;
     exports.btn = btn;
-    exports.canvasArc = canvasArc;
-    exports.canvasCircle = canvasCircle;
-    exports.canvasLine = canvasLine;
-    exports.canvasPoints = canvasPoints;
-    exports.canvasRect = canvasRect;
     exports.cartesianProduct = cartesianProduct;
     exports.ceil = ceil;
     exports.checkbox = checkbox;
@@ -12067,7 +9365,6 @@
     exports.csv2matrix = csv2matrix;
     exports.csv2object = csv2object;
     exports.csv2sql = csv2sql;
-    exports.dangerAlert = dangerAlert;
     exports.datalist = datalist;
     exports.default = Ziko;
     exports.defineParamsGetter = defineParamsGetter;
@@ -12087,8 +9384,6 @@
     exports.h4 = h4;
     exports.h5 = h5;
     exports.h6 = h6;
-    exports.hSlider = hSlider;
-    exports.hSplitter = hSplitter;
     exports.hTags = hTags;
     exports.hr = hr;
     exports.hrs = hrs;
@@ -12096,7 +9391,6 @@
     exports.hypot = hypot;
     exports.image = image;
     exports.inRange = inRange;
-    exports.infoAlert = infoAlert;
     exports.input = input;
     exports.inputCamera = inputCamera;
     exports.inputColor = inputColor;
@@ -12126,13 +9420,11 @@
     exports.luDecomposition = luDecomposition;
     exports.map = map;
     exports.mapfun = mapfun$1;
-    exports.markdown2html = markdown2html;
     exports.matrix = matrix;
     exports.matrix2 = matrix2;
     exports.matrix3 = matrix3;
     exports.matrix4 = matrix4;
     exports.max = max;
-    exports.menu3d = menu3d;
     exports.min = min;
     exports.modulo = modulo;
     exports.mul = mul;
@@ -12171,34 +9463,20 @@
     exports.sub = sub;
     exports.subSet = subSet;
     exports.subText = subText;
-    exports.successAlert = successAlert;
     exports.sum = sum;
     exports.supText = supText;
     exports.svg2ascii = svg2ascii;
     exports.svg2img = svg2img;
     exports.svg2imgUrl = svg2imgUrl;
     exports.svg2str = svg2str;
-    exports.svgCircle = svgCircle;
-    exports.svgEllipse = svgEllipse;
-    exports.svgGrid = svgGrid;
-    exports.svgGroupe = svgGroupe;
-    exports.svgImage = svgImage;
-    exports.svgLine = svgLine;
-    exports.svgLink = svgLink;
-    exports.svgObject = svgObject;
-    exports.svgPath = svgPath;
-    exports.svgPolygon = svgPolygon;
-    exports.svgRect = svgRect;
-    exports.svgText = svgText;
     exports.tan = tan;
     exports.tanh = tanh;
-    exports.text = text$1;
+    exports.text = text;
     exports.textarea = textarea;
     exports.timeTaken = timeTaken;
     exports.time_memory_Taken = time_memory_Taken;
     exports.ul = ul;
     exports.useAnimation = useAnimation;
-    exports.useBattery = useBattery;
     exports.useChannel = useChannel$1;
     exports.useClickEvent = useClickEvent;
     exports.useClipboardEvent = useClipboardEvent;
@@ -12210,7 +9488,6 @@
     exports.useFavIcon = useFavIcon$1;
     exports.useFocusEvent = useFocusEvent;
     exports.useFps = useFps;
-    exports.useGeolocation = useGeolocation;
     exports.useHashEvent = useHashEvent;
     exports.useHead = useHead$1;
     exports.useInputEvent = useInputEvent;
@@ -12232,13 +9509,10 @@
     exports.useTitle = useTitle$1;
     exports.useType = useType;
     exports.useWheelEvent = useWheelEvent;
-    exports.vSlider = vSlider;
-    exports.vSplitter = vSplitter;
     exports.video = video;
     exports.wait = wait;
     exports.waitForUIElm = waitForUIElm;
     exports.waitForUIElmSync = waitForUIElmSync;
-    exports.warningAlert = warningAlert;
     exports.watch = watch;
     exports.watchAttr = watchAttr;
     exports.watchChildren = watchChildren;