ziko 0.0.22 → 0.0.24

package/dist/ziko.cjs

@@ -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
@@ -1125,229 +1125,6 @@ var Api = /*#__PURE__*/Object.freeze({
     preload: preload
 });
 
-const parseInlineElements$1 = text => {
-    return text
-        .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>') 
-        .replace(/\*(.*?)\*/g, '<em>$1</em>')              
-        .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2">$1</a>')  
-        .replace(/!\[(.*?)\]\((.*?)\)/g, '<img src="$2" alt="$1">') 
-        .replace(/`([^`]+)`/g, '<code>$1</code>'); // Inline Code
-};
-
-const parseTable$1 = line => {
-    const cells = line.split('|').map(cell => cell.trim()).filter(cell => cell !== '');
-    const tableRow = cells.map(cell => `<td>${parseInlineElements$1(cell)}</td>`).join('');
-    return `<tr>${tableRow}</tr>\n`;
-};
-
-const parseCodeBlock$1 = (lines, language) => {
-    const codeContent = lines.join('\n'); // No need to exclude the triple backticks
-    const highlightedCode = language ? `<pre><code data-language="${language}">${codeContent}</code></pre>` : `<pre><code>${codeContent}</code></pre>`;
-    return `${highlightedCode}\n`;
-};
-
-const parseList$1 = line => {
-    const DIGIT_FOLLOWED_BY_A_DOT_AND_SPACE = /^\d+\.\s/; 
-    const match = line.match(DIGIT_FOLLOWED_BY_A_DOT_AND_SPACE);
-    if (match) {
-        let start = +match[1];
-        return `<ol${start===1?"":` start="${start}"`}>${parseInlineElements$1(line.slice(match[0].length))}</ol>\n`;
-    }  
-    return `<ul>${parseInlineElements$1(line)}</ul>\n`;
-};
-
-const parseHorizontalRule$1 = () => {
-    return '<hr>\n';
-};
-
-const markdown2html = markdownText => {
-    const lines = markdownText.split('\n');
-    let htmlOutput = '';
-    let inTable = false;
-    let inCodeBlock = false;
-    let codeBlockLines = [];
-    let codeBlockLanguage = '';
-    for (let i = 0; i < lines.length; i++) {
-        let line = lines[i];
-        // Table
-        if (line.startsWith('|')) {
-            if (!inTable) {
-                inTable = true;
-                htmlOutput += '<table>\n';
-            }
-            htmlOutput += parseTable$1(line);
-            continue;
-        } else if (inTable) {
-            inTable = false;
-            htmlOutput += '</table>\n';
-        }
-        // Code block
-        if (line.startsWith('```')) {
-            if (!inCodeBlock) {
-                inCodeBlock = true;
-                codeBlockLines = [];
-                codeBlockLanguage = line.slice(3).trim();
-            } else {
-                inCodeBlock = false;
-                htmlOutput += parseCodeBlock$1(codeBlockLines, codeBlockLanguage);
-            }
-            continue;
-        } else if (inCodeBlock) {
-            codeBlockLines.push(line);
-            continue;
-        }
-        // Headings
-        if (line.startsWith('# ')) {
-            const headingLevel = line.indexOf(' ');
-            const headingText = line.slice(headingLevel + 1);
-            htmlOutput += `<h${headingLevel}>${parseInlineElements$1(headingText)}</h${headingLevel}>\n`;
-            continue;
-        }
-        // Lists
-        if (line.startsWith('- ') || line.startsWith('* ') || line.match(/^\d+\.\s/)) {
-            htmlOutput += parseList$1(line);
-            continue;
-        }
-        // Horizontal Rule
-        if (line.trim() === '---') {
-            htmlOutput += parseHorizontalRule$1();
-            continue;
-        }
-        // Other paragraphs
-        htmlOutput += `<p>${parseInlineElements$1(line)}</p>\n`;
-    }
-    return htmlOutput;
-};
-
-const parseInlineElements = text => {
-    return text
-        .replace(/\*(.*?)\*/g, '_$1_')  // Emphasis
-        .replace(/\*\*(.*?)\*\*/g, '*$1*') // Strong
-        .replace(/\[(.*?)\]\((.*?)\)/g, 'link:$2[$1]')  // Links
-        .replace(/!\[(.*?)\]\((.*?)\)/g, 'image::$2[$1]') // Images
-        .replace(/`([^`]+)`/g, '``$1``') // Inline Code
-        .replace(/^\*\s/, ''); // Remove list item marker at the beginning of the line
-};
-
-const parseTable = line => {
-    const cells = line.split('|').map(cell => cell.trim()).filter(cell => cell !== '');
-    const tableRow = cells.map(cell => `<td>${parseInlineElements(cell)}</td>`).join('');
-    return `<tr>${tableRow}</tr>\n`;
-};
-
-const parseCodeBlock = (lines, language) => {
-    const codeContent = lines.join('\n'); // No need to exclude the triple backticks
-    const highlightedCode = language ? `<pre><code data-language="${language}">${codeContent}</code></pre>` : `<pre><code>${codeContent}</code></pre>`;
-    return `${highlightedCode}\n`;
-};
-
-const parseList = line => {
-    const OL_PATTERN = /^(\d+)\.\s/;
-    const OL_PATTERN_WITHOUT_START = /^[.]\s/;
-    const UL_PATTERN = /^[*]\s/;
-    
-    if (line.match(OL_PATTERN)) {
-        const start = line.match(OL_PATTERN)[1];
-        return `<ol start="${start}"><li>${parseInlineElements(line.replace(OL_PATTERN, ''))}</li></ol>\n`;
-    } 
-    if (line.match(OL_PATTERN_WITHOUT_START)) {
-        return `<ol><li>${parseInlineElements(line.replace(OL_PATTERN_WITHOUT_START, ''))}</li></ol>\n`;
-    } 
-    if (line.match(UL_PATTERN)) {
-        return `<ul><li>${parseInlineElements(line.replace(UL_PATTERN, ''))}</li></ul>\n`;
-    }
-
-    // If neither ordered nor unordered list pattern matches, treat it as a paragraph
-    return `<p>${parseInlineElements(line)}</p>\n`;
-};
-
-
-
-
-const parseBlockquote = line => {
-    return `<blockquote>${parseInlineElements(line.slice(2))}</blockquote>\n`;
-};
-
-const parseHorizontalRule = () => {
-    return '<hr>\n';
-};
-
-const parseAttributes = line => {
-    const attrs = line.match(/\[(.*?)\]/);
-    return attrs ? attrs[1].split(',').map(attr => `[${attr.trim()}]`).join('') : '';
-};
-
-const adoc2html = adocText => {
-    const lines = adocText.split('\n');
-    let htmlOutput = '';
-    let inTable = false;
-    let inCodeBlock = false;
-    let codeBlockLines = [];
-    let codeBlockLanguage = '';
-    for (let i = 0; i < lines.length; i++) {
-        let line = lines[i];
-        // Table
-        if (line.startsWith('|')) {
-            if (!inTable) {
-                inTable = true;
-                htmlOutput += '<table>\n';
-            }
-            htmlOutput += parseTable(line);
-            continue;
-        } else if (inTable) {
-            inTable = false;
-            htmlOutput += '</table>\n';
-        }
-        // Code block
-        if (line.startsWith('```')) {
-            if (!inCodeBlock) {
-                inCodeBlock = true;
-                codeBlockLines = [];
-                codeBlockLanguage = line.slice(3).trim();
-            } else {
-                inCodeBlock = false;
-                htmlOutput += parseCodeBlock(codeBlockLines, codeBlockLanguage);
-            }
-            continue;
-        } else if (inCodeBlock) {
-            codeBlockLines.push(line);
-            continue;
-        }
-        // Headings
-        if (line.startsWith('=')) {
-            const headingLevel = (line.match(/=/g) || []).length;
-            const headingText = line.replace(/=/g, '').trim();
-            htmlOutput += `<h${headingLevel}>${parseInlineElements(headingText)}</h${headingLevel}>\n`;
-            continue;
-        }
-        // Lists
-        if (line.match(/^(\d+)\.\s/) || line.match(/^[*\.]\s/)) {
-            htmlOutput += parseList(line);
-            continue;
-        }
-        // Blockquote
-        if (line.startsWith('> ')) {
-            htmlOutput += parseBlockquote(line);
-            continue;
-        }
-        // Horizontal Rule
-        if (line.trim() === '---') {
-            htmlOutput += parseHorizontalRule();
-            continue;
-        }
-        // Attributes
-        if (line.startsWith('[')) {
-            htmlOutput += parseAttributes(line);
-            continue;
-        }
-        // Other paragraphs
-        if (line.trim() !== '') { // Exclude empty lines
-            htmlOutput += `<p>${parseInlineElements(line)}</p>\n`;
-        }
-    }
-    return htmlOutput;
-};
-
 const csv2arr = (csv, delimiter = ",")=>csv.trim().trimEnd().split("\n").map(n=>n.split(delimiter));
 const csv2matrix = (csv, delimiter = ",")=>new Matrix(csv2arr(csv,delimiter));
 const csv2object = (csv, delimiter = ",") => {
@@ -4493,59 +4270,6 @@ const useThread = (func, callback , close) => {
     return T;
 };
 
-class ZikoUseBattery{
-    constructor(){
-        if(this.isSupported)this.#init();
-    }   
-    async #init(){
-        this.__Battery__=await navigator.getBattery(); 
-    }
-    get isSupported(){
-        return !!navigator.getBattery;
-    }
-    get current(){
-        // Synchrouns Code
-        const {
-            level,
-            charging,
-            chargingTime,
-            dischargingTime
-        }=this.__Battery__;
-        return {
-            level,
-            charging,
-            chargingTime,
-            dischargingTime
-        }
-    }
-    onChargingChange(callback){
-        this.__Battery__?.addEventListener("chargingchange",callback);
-        return this;
-    }
-    onLevelChange(callback){
-        this.__Battery__?.addEventListener("levelchange",callback);
-        return this;
-    }
-}
-const useBattery=()=>new ZikoUseBattery();
-
-class ZikoUseGeolocation{
-    constructor(){
-        if(this.isSupported)this.#init();
-    }   
-    async #init(){
-        navigator.geolocation.getCurrentPosition(e=>this.__Geolocation__=e);
-    }
-    get isSupported(){
-        return !!navigator.geolocation;
-    }
-    get current(){
-        // Synchrouns Code
-        return this.__Geolocation__;
-    }
-}
-const useGeolocation=()=>new ZikoUseGeolocation();
-
 class ZikoUseChannel{
     constructor(name=""){
         this.channel=new BroadcastChannel(name);
@@ -4821,12 +4545,10 @@ var Hooks = /*#__PURE__*/Object.freeze({
     ZikoHead: ZikoHead$1,
     ZikoUseRoot: ZikoUseRoot,
     ZikoUseStyle: ZikoUseStyle,
-    useBattery: useBattery,
     useChannel: useChannel$1,
     useDebounce: useDebounce,
     useEventEmitter: useEventEmitter,
     useFavIcon: useFavIcon$1,
-    useGeolocation: useGeolocation,
     useHead: useHead$1,
     useLocaleStorage: useLocaleStorage,
     useMediaQuery: useMediaQuery,
@@ -4849,7 +4571,7 @@ const Reactivity={
 };
 
 class ZikoUIElement {
-  constructor(element ,name="", el_type="html") {
+  constructor(element, name="", {el_type="html", useDefaultStyle=false}={}){
     this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
     if(typeof element === "string") {
       switch(el_type){
@@ -4858,8 +4580,10 @@ class ZikoUIElement {
         default : throw Error("Not supported")
       }
     }
+    else {
+      this.target = element.parentElement;
+    }
     if(element)this.__ele__ = element;
-    this.uuid=this.constructor.name+"-"+Random.string(10);
     this.cache = {
       name,
       parent:null,
@@ -4890,23 +4614,29 @@ class ZikoUIElement {
       resize:null,
       intersection:null
     };
+    this.uuid = `${this.cache.name}-${Random.string(16)}`;
     this.cache.style.linkTo(this);
-    this.style({ 
+    useDefaultStyle && this.style({ 
       position: "relative",
       boxSizing:"border-box",
       margin:0,
       padding:0,
+      width : "auto",
+      height : "auto"
      });
     this.items = [];
-    this.size("auto", "auto");
     globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
     element && globalThis.__Ziko__.__Config__.default.render && this.render();
+    this.setAttr("data-ref", this.uuid);
+    if(globalThis.__Ziko__.__Config__.renderingMode !== "spa" && !globalThis.__Ziko__.__Config__.isSSC) {
+      globalThis.__Ziko__.__HYDRATION_MAP__.set(this.uuid, ()=>this);
+  }
   }
   get element(){
-    return this.__ele__
+    return this.__ele__;
   }
   get isZikoUIElement(){
-    return true
+    return true;
   }
   get st(){
     return this.cache.style;
@@ -4915,7 +4645,7 @@ class ZikoUIElement {
     return this.cache.attributes;
   }
   get evt(){
-    return this.cache.events;
+    return this.events;
   }
   get html(){
     return this.element.innerHTML;
@@ -4980,7 +4710,7 @@ class ZikoUIElement {
       return this;
     }
     for (let i = 0; i < ele.length; i++) {
-      if (["number", "string"].includes(typeof ele[i])) ele[i] = text$1(ele[i]);
+      if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
       if (ele[i] instanceof ZikoUIElement) {
         ele[i].cache.parent = this;
         this.element[adder](ele[i].element);
@@ -5010,7 +4740,7 @@ class ZikoUIElement {
     if (index >= this.element.children.length) this.append(...ele);
     else
       for (let i = 0; i < ele.length; i++) {
-        if (["number", "string"].includes(typeof ele[i])) ele[i] = text$1(ele[i]);
+        if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
         this.element?.insertBefore(ele[i].element, this.items[index].element);
         this.items.splice(index, 0, ele[i]);
       }
@@ -5429,128 +5159,7 @@ class ZikoUIElement {
   }
 }
 
-class ZikoUIContainerElement extends ZikoUIElement {
-  constructor(element, name = "") {
-    super(element, name);
-    this.items = [];
-  }
-  // maintain() {
-  //   for (let i = 0; i < this.items.length; i++)
-  //     Object.assign(this, { [[i]]: this.items[i] });
-  //   this.length = this.items.length;
-  //   return this;
-  // }
-  // at(index) {
-  //   return this.items.at(index);
-  // }
-  // #addItem(adder, pusher, ...ele) {
-  //   if (this.cache.isFrozzen) {
-  //     console.warn("You can't append new item to frozzen element");
-  //     return this;
-  //   }
-  //   for (let i = 0; i < ele.length; i++) {
-  //     if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-  //     if (ele[i] instanceof ZikoUIElement) {
-  //       ele[i].cache.parent = this;
-  //       this.element[adder](ele[i].element);
-  //       ele[i].target = this.element;
-  //       this.items[pusher](ele[i]);
-  //     } else if (ele[i] instanceof Object) {
-  //       if (ele[i]?.style) this.style(ele[i]?.style);
-  //       if (ele[i]?.attr) {
-  //         Object.entries(ele[i].attr).forEach((n) =>
-  //           this.setAttr("" + n[0], n[1]),
-  //         );
-  //       }
-  //     }
-  //   }
-  //   this.maintain();
-  //   return this;
-  // }
-  // append(...ele) {
-  //   this.#addItem("append", "push", ...ele);
-  //   return this;
-  // }
-  // prepend(...ele) {
-  //   this.#addItem("prepend", "unshift", ...ele);
-  //   return this;
-  // }
-  // insertAt(index, ...ele) {
-  //   if (index >= this.element.children.length) this.append(...ele);
-  //   else
-  //     for (let i = 0; i < ele.length; i++) {
-  //       if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-  //       this.element?.insertBefore(ele[i].element, this.items[index].element);
-  //       this.items.splice(index, 0, ele[i]);
-  //     }
-  //   return this;
-  // }
-  // remove(...ele) {
-  //   const remove = (ele) => {
-  //     if (typeof ele === "number") ele = this.items[ele];
-  //     if (ele instanceof ZikoUIElement) this.element?.removeChild(ele.element);
-  //     this.items = this.items.filter((n) => n !== ele);
-  //   };
-  //   for (let i = 0; i < ele.length; i++) remove(ele[i]);
-  //   for (let i = 0; i < this.items.length; i++)
-  //     Object.assign(this, { [[i]]: this.items[i] });
-  //   // Remove from item
-  //   return this;
-  // }
-  // forEach(callback) {
-  //   this.items.forEach(callback);
-  //   return this;
-  // }
-  // map(callback) {
-  //   return this.items.map(callback);
-  // }
-  // find(condition) {
-  //   return this.items.filter(condition);
-  // }
-  // filter(condition_callback, if_callback = () => {}, else_callback = () => {}) {
-  //   const FilterItems = this.items.filter(condition_callback);
-  //   FilterItems.forEach(if_callback);
-  //   this.items
-  //     .filter((item) => !FilterItems.includes(item))
-  //     .forEach(else_callback);
-  //   return this;
-  // }
-  // filterByTextContent(text, exactMatch = false) {
-  //   this.items.forEach((n) => n.render());
-  //   this.filter(
-  //     (n) => !(exactMatch ? n.text === text : n.text.includes(text)),
-  //     (e) => e.unrender(),
-  //   );
-  //   // this.items.filter(n=>{
-  //   //   const content=n.element.textContent;
-  //   //   return !(exactMatch?content===text:content.includes(text))
-  //   // }).map(n=>n.unrender());
-  //   //  return this;
-  // }
-  // filterByClass(value) {
-  //   this.items.map((n) => n.render());
-  //   this.items
-  //     .filter((n) => !n.classes.includes(value))
-  //     .map((n) => n.unrender());
-  //   return this;
-  // }
-  // sortByTextContent(value, displays) {
-  //   let item = this.children;
-  //   item
-  //     .filter((n) => !n.textContent.toLowerCase().includes(value.toLowerCase()))
-  //     .map((n) => {
-  //       n.style.display = "none";
-  //     });
-  //   item
-  //     .filter((n) => n.textContent.toLowerCase().includes(value.toLowerCase()))
-  //     .map((n, i) => (n.style.display = displays[i]));
-  //   //return item.filter(n=>n.style.display!="none")
-  //   item.filter((n) => n.style.display != "none");
-  //   return this;
-  // }
-}
-
-class __ZikoUIText__ extends ZikoUIContainerElement {
+class __ZikoUIText__ extends ZikoUIElement {
     constructor(tag, name, lineBreak,...value) {
       super(tag, name);
       this.addValue(...value);
@@ -5655,7 +5264,7 @@ class ZikoUIAbbrText extends __ZikoUIText__ {
     return true
   }
 }
-const text$1 = (...str) => new ZikoUIText(...str);
+const text = (...str) => new ZikoUIText(...str);
 const quote = (...str) => new ZikoUIQuote(...str);
 const dfnText = (...str) => new ZikoUIDefintion(...str);
 const supText = (...str) => new ZikoUISupText(...str);
@@ -5736,10 +5345,10 @@ var Text$1 = /*#__PURE__*/Object.freeze({
     quote: quote,
     subText: subText,
     supText: supText,
-    text: text$1
+    text: text
 });
 
-class ZikoUILI extends ZikoUIContainerElement{
+class ZikoUILI extends ZikoUIElement{
   constructor(UI){
     super("li","li");
     this.append(UI);
@@ -5748,7 +5357,7 @@ class ZikoUILI extends ZikoUIContainerElement{
     return true;
   }
 }
-class ZikoUIList extends ZikoUIContainerElement {
+class ZikoUIList extends ZikoUIElement {
     constructor(element,name) {
       super(element,name);
       delete this.append;
@@ -5760,7 +5369,7 @@ class ZikoUIList extends ZikoUIContainerElement {
     append(...arr){
       for (let i = 0; i < arr.length; i++) {
         let li = null;
-        if(["string","number"].includes(typeof arr[i]))arr[i]=text$1(arr[i]);
+        if(["string","number"].includes(typeof arr[i]))arr[i]=text(arr[i]);
         if (arr[i] instanceof ZikoUIElement)li=new ZikoUILI(arr[i]);
         li.setTarget(this.element);
         this.items.push(li[0]);
@@ -5788,7 +5397,7 @@ class ZikoUIList extends ZikoUIContainerElement {
       else
         for (let i = 0; i < ele.length; i++) {
           let li = null;
-          if(["number","string"].includes(typeof ele[i]))ele[i]=text$1(ele[i]);
+          if(["number","string"].includes(typeof ele[i]))ele[i]=text(ele[i]);
           if (ele[i] instanceof ZikoUIElement)li=new ZikoUILI(ele[i]);
           this.element?.insertBefore(li.element, this.items[index].parent.element);
           this.items.splice(index, 0, ele[i][0]);
@@ -6396,7 +6005,7 @@ const sTags = SVGTags.reduce((acc, key) => {
     return acc;
   }, {});
 
-class ZikoUIHtmlTag extends ZikoUIContainerElement {
+class ZikoUIHtmlTag extends ZikoUIElement {
   constructor(element) {
     super(element,"html");
   }
@@ -6449,7 +6058,7 @@ class ZikoUIBr extends ZikoUIElement {
       return true
     }
   }
-  class ZikoUILink extends ZikoUIContainerElement{
+  class ZikoUILink extends ZikoUIElement{
     constructor(href){
       super("a","link");
       Object.assign(this.cache,{
@@ -6783,7 +6392,7 @@ class ZikoUITextArea extends ZikoUIElement {
 }
 const textarea =()=> new ZikoUITextArea();
 
-let ZikoUIFlex$1 = class ZikoUIFlex extends ZikoUIContainerElement {
+class ZikoUIFlex extends ZikoUIElement {
   constructor(tag = "div", w = "100%", h = "100%") {
     super(tag ,"Flex");
     this.direction = "cols";
@@ -6831,18 +6440,18 @@ let ZikoUIFlex$1 = class ZikoUIFlex extends ZikoUIContainerElement {
     return this;
   }
   vertical(x, y, order=1) {
-    set_vertical$1.call(this,order);
+    set_vertical.call(this,order);
     this.style({
-      alignItems: typeof(x)==="number"?map_pos_x$1.call(this,x):x,
-      justifyContent: typeof(y)=="number"?map_pos_y$1.call(this,y):y
+      alignItems: typeof(x)==="number"?map_pos_x.call(this,x):x,
+      justifyContent: typeof(y)=="number"?map_pos_y.call(this,y):y
     });
     return this;
   }
   horizontal(x, y, order=1) {
-    set_horizontal$1.call(this,order);
+    set_horizontal.call(this,order);
     this.style({
-      alignItems: typeof(y)=="number"?map_pos_y$1.call(this,y):y,
-      justifyContent: typeof(x)==="number"?map_pos_x$1.call(this,x):x
+      alignItems: typeof(y)=="number"?map_pos_y.call(this,y):y,
+      justifyContent: typeof(x)==="number"?map_pos_x.call(this,x):x
     });
     return this;
   }
@@ -6851,38 +6460,44 @@ let ZikoUIFlex$1 = class ZikoUIFlex extends ZikoUIContainerElement {
     this.style({ display: "flex" });
     return this;
   }
-};
+}
 
-const Flex$1 = (...ZikoUIElement) =>{
+const Flex = (...ZikoUIElement) =>{
   let tag="div";
   if(typeof ZikoUIElement[0]==="string"){
     tag=ZikoUIElement[0];
     ZikoUIElement.pop();
   }
-  return new ZikoUIFlex$1(tag).append(...ZikoUIElement);
+  return new ZikoUIFlex(tag).append(...ZikoUIElement);
 };
-function set_vertical$1(direction){
+function set_vertical(direction){
   direction == 1
     ? this.style({ flexDirection: "column" })
     : direction == -1 && this.style({ flexDirection: "column-reverse" });
   return this;
 }
-function set_horizontal$1(direction){
+function set_horizontal(direction){
 direction == 1
     ? this.style({ flexDirection: "row" })
     : direction == -1 && this.style({ flexDirection: "row-reverse" });
   return this;
 }
-function map_pos_x$1(align){
+function map_pos_x(align){
 let pos = ["flex-start", "center", "flex-end"];
 if (typeof align === "number") align = pos[align + 1];
 return align;
 }
-function map_pos_y$1(align){
-return map_pos_x$1(-align);
+function map_pos_y(align){
+return map_pos_x(-align);
 }
 
-class ZikoUIForm extends ZikoUIFlex$1{
+var Flex$1 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Flex: Flex,
+    ZikoUIFlex: ZikoUIFlex
+});
+
+class ZikoUIForm extends ZikoUIFlex{
     constructor(...items){
         super("form", "Form");
         this.append(...items);
@@ -7000,7 +6615,7 @@ class ZikoUICaption extends ZikoUIElement{
 const tr=(...ZikoUIElement)=>new ZikoUITr(...ZikoUIElement);
 const td=(...UI)=>{
     UI=UI.map(n=>{
-        if(!(n instanceof ZikoUIElement))n=text$1(n);
+        if(!(n instanceof ZikoUIElement))n=text(n);
         return n
     });
     return new ZikoUITd(...UI)
@@ -7143,7 +6758,7 @@ var Table = /*#__PURE__*/Object.freeze({
     Table: Table$1
 });
 
-class ZikoUIMain extends ZikoUIContainerElement{
+class ZikoUIMain extends ZikoUIElement{
     constructor(){
       super("main","Main");
     }
@@ -7151,7 +6766,7 @@ class ZikoUIMain extends ZikoUIContainerElement{
       return true
     }
   }
-  class ZikoUIHeader extends ZikoUIContainerElement{
+  class ZikoUIHeader extends ZikoUIElement{
     constructor(){
       super("header","Header");
     }
@@ -7159,7 +6774,7 @@ class ZikoUIMain extends ZikoUIContainerElement{
       return true
     }
   }
-  class ZikoUINav extends ZikoUIContainerElement{
+  class ZikoUINav extends ZikoUIElement{
     constructor(){
       super("nav","Nav");
     }
@@ -7167,7 +6782,7 @@ class ZikoUIMain extends ZikoUIContainerElement{
       return true
     }
   }
-  class ZikoUISection extends ZikoUIContainerElement{
+  class ZikoUISection extends ZikoUIElement{
     constructor(){
       super("section","Section");
       this.style({position:"relative"});
@@ -7176,7 +6791,7 @@ class ZikoUIMain extends ZikoUIContainerElement{
       return true
     }
   }
-  class ZikoUIArticle extends ZikoUIContainerElement{
+  class ZikoUIArticle extends ZikoUIElement{
     constructor(){
       super("article","Article");
     }
@@ -7184,7 +6799,7 @@ class ZikoUIMain extends ZikoUIContainerElement{
       return true
     }
   }
-  class ZikoUIAside extends ZikoUIContainerElement{
+  class ZikoUIAside extends ZikoUIElement{
     constructor(){
       super("aside","Aside");
     }
@@ -7192,7 +6807,7 @@ class ZikoUIMain extends ZikoUIContainerElement{
       return true
     }
   }
-  class ZikoUIFooter extends ZikoUIContainerElement{
+  class ZikoUIFooter extends ZikoUIElement{
     constructor(){
       super("footer","Footer");
       this.element=document?.createElement("footer");
@@ -7227,7 +6842,7 @@ var Semantic = /*#__PURE__*/Object.freeze({
     ZikoUISection: ZikoUISection
 });
 
-class ZikoUIGrid extends ZikoUIContainerElement {
+class ZikoUIGrid extends ZikoUIElement {
     constructor(tag ="div", w = "50vw", h = "50vh") {
       super(tag,"Grid");
       this.direction = "cols";
@@ -7259,1609 +6874,24 @@ class ZikoUIGrid extends ZikoUIContainerElement {
 }
 const Grid$1 = (...ZikoUIElement) => new ZikoUIGrid("div").append(...ZikoUIElement);
 
-class ZikoUICollapbsible extends ZikoUIElement{
-    constructor(summary,content,openIcon="😁", closeIcon=openIcon){
-        super("details","Collapsible");
-        Object.assign(this.cache,{
-            icons:{
-                open : openIcon,
-                close : closeIcon
-            }
-        });
-        this.summary=html("summary",summary).style({
-            fontSize:"1.1em",
-            padding:"0.625rem",
-            fontWeight:"bold",
-            listStyleType:`"${openIcon}"`,
-            cursor:"pointer",
-        });
-        this.summary[0].style({
-            marginLeft:"0.5em",
-        });
-        this.content=content.style({
-            margin:"0.7em",
-        });
-        this.element?.append(this.summary.element,this.content.element);
-        this.style({
-            marginBottom:"0.7em",
-        });
-        watchAttr(this, e=>{
-            if(e.target.isOpen){
-                e.target.emit("open");
-                if(this?.parent?.isAccordion){
-                    if(this.parent.cache.autoClose)this.parent.closeExcept(this);
-                }
-                this.summary.style({
-                    listStyleType:`"${this.cache.icons.close}"`
-                });
-            }
-            else {
-                e.target.emit("close");
-                this.summary.style({
-                    listStyleType:`"${this.cache.icons.open}"`
-                });
-            }
-        });
-    }
-    get isCollapsible(){
-        return true;
-    }
-    get isOpen(){
-        return this.element.open;
-    }
-    open(details=this){
-        this.element.open=true;
-        this.emit("open",details);
-        return this;
-    }
-    close(){
-        this.element.open=false;
-        return this;
-    }
-    onOpen(callback){
-        this.on("open", callback);
-        return this;
-    }
-    onClose(callback){
-        this.on("close", callback);
-        return this;
-    }
-    toggle(){
-        this.element.open=!this.element.open;
-        return this;
-    }
-}
-
- 
-const Collapsible=(summary, content, openIcon, closeIcon)=>new ZikoUICollapbsible(summary,content,openIcon, closeIcon);
+var Grid$2 = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Grid: Grid$1,
+    ZikoUIGrid: ZikoUIGrid
+});
 
-class ZikoUIAccordion extends ZikoUIContainerElement{
-    constructor(...Collapsible){
-        super("div", "Accordion");
-        this.append(...Collapsible);
-        Object.assign(this.cache,{
-            autoClose : true
-        });
-    }
-    get isAccordion(){
-        return true;
-    }
-    closeAll(){
-        this.items.forEach(n=>n.close());
-        return this;
-    }
-    closeExcept(...Collapsibles){
-        this.items.filter(n=>!Collapsibles.includes(n)).forEach(n=>n.close());
-        return this;
-    }
-    open(CollapsibleOrIndex){
-        CollapsibleOrIndex.isCollapsible? CollapsibleOrIndex.open(): this.items[CollapsibleOrIndex].open();
-        this.closeExcept(CollapsibleOrIndex.isCollapsible? CollapsibleOrIndex: this.items[CollapsibleOrIndex]);
-        return this;
-    }
-    enableAutoClose(){
-        this.cache.autoClose = true;
-        return this;
-    }
-    disableAutoClose(){
-        this.cache.autoClose = false;
-        return this;
-    }
-    toggleAutoClose(){
-        this.cache.autoClose = !this.cache.autoClose;
-    }
-}
-const Accordion = (... Collapsible) => new ZikoUIAccordion(...Collapsible);
-
-class ZikoUIFlex extends ZikoUIContainerElement {
-  constructor(tag = "div", w = "100%", h = "100%") {
-    super(tag ,"Flex");
-    this.direction = "cols";
-    if (typeof w == "number") w += "%";
-    if (typeof h == "number") h += "%";
-    this.style({ width: w, height: h });
-    this.style({ display: "flex" });
-    // this.render();
-  }
-  get isFlex(){
-    return true;
-  }
-  resp(px,wrap = true) {
-    this.wrap(wrap);
-    if (this.element.clientWidth < px) this.vertical();
-    else this.horizontal();
-    return this;
-  }
-  setSpaceAround() {
-    this.style({ justifyContent: "space-around" });
-    return this;
-  }
-  setSpaceBetween() {
-    this.style({ justifyContent: "space-between" });
-    return this;
-  }
-  setBaseline() {
-    this.style({ alignItems: "baseline" });
-    return this;
-  }
-  gap(g) {
-    if (this.direction === "row") this.style({ columnGap: g });
-    else if (this.direction === "column") this.style({ rowGap: g });
-    return this;
-  }
-  wrap(value = "wrap") {
-    const values = ["no-wrap", "wrap","wrap-reverse"];
-    this.style({
-      flexWrap: typeof value === "string" ? value : values[+value],
-    });
-    return this;
-  }
-  _justifyContent(align = "center") {
-    this.style({ justifyContent: align });
-    return this;
-  }
-  vertical(x, y, order=1) {
-    set_vertical.call(this,order);
-    this.style({
-      alignItems: typeof(x)==="number"?map_pos_x.call(this,x):x,
-      justifyContent: typeof(y)=="number"?map_pos_y.call(this,y):y
-    });
-    return this;
-  }
-  horizontal(x, y, order=1) {
-    set_horizontal.call(this,order);
-    this.style({
-      alignItems: typeof(y)=="number"?map_pos_y.call(this,y):y,
-      justifyContent: typeof(x)==="number"?map_pos_x.call(this,x):x
-    });
-    return this;
-  }
-  show() {
-    this.isHidden = false;
-    this.style({ display: "flex" });
-    return this;
-  }
-}
-
-const Flex = (...ZikoUIElement) =>{
-  let tag="div";
-  if(typeof ZikoUIElement[0]==="string"){
-    tag=ZikoUIElement[0];
-    ZikoUIElement.pop();
-  }
-  return new ZikoUIFlex(tag).append(...ZikoUIElement);
-};
-function set_vertical(direction){
-  direction == 1
-    ? this.style({ flexDirection: "column" })
-    : direction == -1 && this.style({ flexDirection: "column-reverse" });
-  return this;
-}
-function set_horizontal(direction){
-direction == 1
-    ? this.style({ flexDirection: "row" })
-    : direction == -1 && this.style({ flexDirection: "row-reverse" });
-  return this;
-}
-function map_pos_x(align){
-let pos = ["flex-start", "center", "flex-end"];
-if (typeof align === "number") align = pos[align + 1];
-return align;
-}
-function map_pos_y(align){
-return map_pos_x(-align);
-}
-
-class ZikoUICarousel extends ZikoUIFlex{
-    constructor(...ZikoUIElement){
-        super();
-        this.style({
-            position:"relative",
-            overflow:"hidden",
-            touchAction:"none",
-            userSelect:"none"
-        });
-        this.horizontal("space-around",0);
-        this.track = Section(...ZikoUIElement).style({ display: "inline-flex" });
-        this.track.size(this.track.children.length * 100 + "vw");
-        this.track.setTarget(this);
-        this.track.items.map((n) =>
-          n.style({ pointerEvents: "none", margin: "auto 10px" })
-        );
-        this.x0 = null;
-        this.tx = 0;
-        this.onPtrMove(e=>{
-            if(e.isDown){
-                let x = e.event.pageX;
-                let dx = x - this.x0;
-                this.track.st.translateX(
-                    this.tx + dx, 
-                    0
-                    );
-              }
-        });
-        this.onPtrDown(e=>{
-            console.log(e.event);
-            this.x0 = e.event.pageX;
-            const transformMatrix = window
-              .getComputedStyle(this.track.element)
-              .getPropertyValue("transform");
-            if (transformMatrix !== "none") {
-              this.tx = +transformMatrix.split(",")[4];
-            }            
-        });
-        this.onPtrUp(e=>console.log(e.isDown));
-        this.onPtrLeave(e=>{
-            // Handle outside up 
-        });
-    }
-    get isCarousel(){
-        return true;
-      }
-}
-const Carousel=(...ZikoUIElement)=>new ZikoUICarousel(...ZikoUIElement);
-
-class ZikoUICodeNote extends ZikoUIFlex{
-    constructor(){
-        super("section");
-        Object.assign(this.cache,{
-            order:0,
-            currentNote:null,
-            currentNoteIndex:null
-        });
-        this.vertical(0,0);
-    }
-    get isCodeNote(){
-        return true;
-      }
-    setCurrentNote(currentNote){
-        this.cache.currentNote=currentNote;
-        this.cache.currentNoteIndex=this.items.findIndex(n=>n===currentNote);
-        currentNote.focus();
-        this.items.forEach(n=>n.Input.style({
-            border: "1px solid #ccc"
-        }));
-        currentNote.Input.style({
-            border:"2px lightgreen solid"
-        });
-        return this;
-    }
-    addNote(text=""){
-        this.append(CodeCell(text));
-        return this;
-    }
-    execute(){
-        this.cache.currentNote.execute();
-        this.incrementOrder();
-        return this;
-    }
-    incrementOrder(){
-        this.cache.order++;
-        this.cache.currentNote.setOrder(this.cache.order);
-        return this;
-    }
-    next(){
-        if(this.cache.currentNote===this.items.at(-1)){
-            this.addNote();
-            this.setCurrentNote(this.items.at(-1));
-        }
-        else this.setCurrentNote(this.items[this.cache.currentNoteIndex+1]); 
-        return this;
-    }
-    previous(){
-        // add append before
-        if(this.cache.currentNote!==this.items[0]){
-            this.setCurrentNote(this.items[this.cache.currentNoteIndex-1]);
-        }
-        return this;
-    }
-    data(){
-        return this.items.map(n=>n.cellData());
-    }
-    serialize(){
-        return JSON.stringify(this.data());
-    }
-    import(data=[]){
-        data.forEach((n,i)=>this.addNote(data[i].input));
-        return this;
-    }
-}
-const CodeNote=()=>new ZikoUICodeNote();
-
-const Input=(codeText="")=>html("code",codeText).style({
-    width:"100%",
-    height:"auto",
-    padding:"10px",
-    boxSizing:"border-box",
-    border: "1px solid #ccc", 
-    outline: "none",
-    fontSize: "1rem", 
-    fontFamily: "Lucida Console, Courier New, monospace", 
-    padding: "1rem 0.5rem", 
-    wordBreak:"break-all",
-    background:"#f6f8fa",
-    color:"#0062C3"
-}).setAttr("contenteditable",true).setAttr("spellcheck",false);
-
-const Output=()=>html("output").style({
-    width:"100%",
-    height:"auto",
-    padding:"5px 0",
-});
-const Left=(ctx)=>Flex$1(
-    text$1("[ ]")
-    ).style({
-        width:"50px",
-        //height:getComputedStyle(ctx.Input.element).height,
-        height:"50px",
-        margin:"10px 4px",
-        padding:"5px",
-        color:"darkblue",
-        borderBottom:"4px solid gold",
-    }).horizontal(0,0);
-const BTN_STYLE={
-    background:"none",
-    width:"25px",
-    height:"25px",
-    fontSize:"1.2rem",
-    cursor:"pointer"
-};
-const Right=(ctx)=>Flex$1(
-    text$1('▶️').style(BTN_STYLE).onClick(e=>{
-        if(ctx.parent instanceof ZikoUICodeNote)ctx.parent.setCurrentNote(ctx);
-        ctx.execute();
-        globalThis.__Ziko__.__Config__.default.target=e.target.parent.parent[1][1];
-    }),
-    text$1('📋').style(BTN_STYLE).onClick(()=>{
-        navigator.clipboard.writeText(ctx.codeText);
-    }),
-    text$1('✖️').style(BTN_STYLE).onClick(()=>ctx.remove()),
-    text$1('✖️').style(BTN_STYLE).onClick(()=>ctx.remove()),
-).style({
-    width:"70px",
-    height:"50px",
-    //background:"cyan",
-    margin:"10px 0"
-}).horizontal(0,0).wrap(true);
-
-class ZikoUICodeCell extends ZikoUIFlex{
-    constructor(code="",{type="js",order=null}={}){
-        super("section");
-        Object.assign(this.cache,{
-            state:null,
-            order,
-            type,
-            metadata:{
-                created:Date.now(),
-                updated:null
-            }
-        });
-        this.Input=Input(code);
-        this.Output=Output();
-        this.InOut=Flex(
-            this.Input,
-            this.Output
-        ).vertical().style({
-            width:"100%",
-            margin:"10px auto"
-        });
-        this.RightControl=Right(this);
-        this.LeftControl=Left();
-        this.append(
-            this.LeftControl,
-            this.InOut,
-            this.RightControl
-        );
-        this.horizontal(-1,1).style({
-            //background:"#444",
-            width:"95vw",
-            margin:"0 auto",
-            border:"1px darkblue dotted"
-        });
-        let cm_content = this.Input.element.getElementsByClassName("cm-content")[0];
-        if( cm_content ){
-            cm_content.addEventListener("keydown",e=>{
-                if(e.key === "Enter" && e.shiftKey){
-                    e.preventDefault();
-                    this.execute(this.cache.order);   
-                }
-            });
-        }
-        else {
-            this.Input.onKeyDown(e=>{
-                if(e.kd==="Enter"){
-                    if(e.event.shiftKey){
-                        e.event.preventDefault();
-                        this.execute(this.cache.order);
-                    }
-                }
-                if(this.cache.parent instanceof ZikoUICodeNote){
-                    if(e.kd==="ArrowDown" && e.event.shiftKey ){
-                        this.cache.parent.next();
-                    }
-                    if(e.kd==="ArrowUp" && e.event.shiftKey){
-                        this.cache.parent.previous();
-                    }
-                }
-            }
-            );
-            this.Input.onFocus(()=>{
-                if(this.cache.parent instanceof ZikoUICodeNote){
-                    this.cache.parent.cache.currentNote=this;
-                    this.cache.parent.setCurrentNote(this);
-                }
-            });
-            this.Input.onPaste((e)=>{
-                //e.event.preventDefault();
-                //this.setValue(this.codeText.trim())
-            });
-            // this.Input.onKeyPress(e=>{
-            //     if(e.kp==="(")a.Input.element.textContent+=")";
-            //     if(e.kp==="[")a.Input.element.textContent+="]";
-            //     if(e.kp==="{")a.Input.element.textContent+="}";
-            // })    
-        }
-        }
-    get isCodeCell(){
-        return true;
-    }
-    // space &nbsp
-    get codeText() {
-        return (this.Input.element.getElementsByClassName("cm-content")[0])
-        ?this.Input.element.getElementsByClassName("cm-content")[0].innerText.trim()
-        :this.Input.element.innerText.trim()
-        // return this.Input.element.innerText.trim();
-    }
-    get codeHTML() {
-        return this.Input.element.innerHTML;
-    }
-    get outputHTML(){
-        return this.Output.element.innerHTML;
-    }
-    setValue(codeText){
-        this.Input[0].setValue(codeText);
-        return this;
-    }
-    cellData(){
-        return {
-            input:this.codeText,
-            output:this.outputHTML,
-            order:this.cache.order,
-            type:this.cache.type     
-        }
-    }
-    execute(order){
-        this.clearOutput();
-        this.evaluate(order);
-        this.cache.metadata.updated=Date.now();
-        return this;
-    }
-    #evaluateJs(order){
-        try{
-            this.LeftControl[0].setValue("pending");
-            this.cache.state="pending";  
-            // globalThis.eval(this.Input.element.innerText);
-            globalThis.eval(this.codeText);
-
-        }
-        catch(err){
-            console.log(err);
-            text(`Error : ${err.message}`).style({
-                color:"red",
-                background:"gold",
-                border:"2px red solid",
-                padding:"10px",
-                margin:"10px 0",
-                display:"flex",
-                justifyContent: "center",
-            });
-            this.LeftControl[0].setValue("Err");
-            this.cache.state="Error";            
-        }
-        finally{
-            if(this.cache.state==="pending"){
-                this.cache.state="success";
-                this.setOrder(order);
-                if(this.cache.parent instanceof ZikoUICodeNote){
-                    this.cache.parent.incrementOrder();
-                    this.cache.parent.next();
-                }
-            }
-        }
-    }
-    #evaluateMd(){
-
-    }
-    #evaluateHtml(){
-
-    }
-    evaluate(order){
-        globalThis.__Ziko__.__Config__.default.target=this.Output.element;
-        switch(this.cache.type){
-            case "js":this.#evaluateJs(order);break;
-        }
-        return this;
-    }
-    clearInput(){
-        this.Output.element.innerText="";
-        return this;
-    }
-    clearOutput(){
-        this.Output.element.innerText="";
-        return this;
-    }
-    setOrder(order,render=true){
-        this.cache.order=order;
-        if(render){
-            (typeof order === "number")?this.LeftControl[0].setValue(`[${order}]`):this.LeftControl[0].setValue("[-]");
-        }
-        return this;
-    }
-    focus(){
-        this.Input.element.focus();
-        return this;
-    }
-}
-
-
-const CodeCell=(codeText,{type,order}={})=>new ZikoUICodeCell(codeText,{type,order});
-
-// Next 
-// Previous
-// Vertical 
-// Horizontal
-class ZikoUITabs extends ZikoUIFlex{
-    #ACTIVE_ELEMENT_INDEX=0;
-    constructor(Controllers,Contents){
-        super("div","Tabs");
-        Object.assign(this.cache,{
-            config:{
-                controllersPercent : .50
-            }
-        });
-        this.style({
-            boxSizing:"border-box",
-            backgroundColor: "blanchedalmond",
-            border:"1px red solid",
-            margin:"30px",
-        });
-        this.controllersContainer = Flex().size("auto","auto").style({
-            boxSizing:"border-box",
-            justifyContent:"center",
-            alignItems:"center",
-            textAlign:"center",
-
-            minWidth:"50px",
-            minHeight:"50px",
-
-            backgroundColor:"darkblue",
-            border:"1px darkblue solid",
-
-        }).setAttr("role","tablist");
-        this.contentContainer = Flex().style({
-            boxSizing:"border-box",
-            justifyContent:"center",
-            alignItems:"center",
-            textAlign:"center",
-
-            width:"100%",
-            height:"100%",
-            backgroundColor:"darkslategrey",
-        });
-        this.append(
-            this.controllersContainer,
-            this.contentContainer
-        );
-        if(Controllers.length!==Contents.length)console.error("");
-        else {
-            this.controllersContainer.append(...Controllers);
-            this.contentContainer.append(...Contents);
-        }
-        this.init();
-        this.display(0);
-        this.useVertical();
-    }
-    get isTabs(){
-        return true;
-    }
-    init(){  
-        // Remove old listener
-        for(let i=0;i<this.controllersContainer.length;i++){
-            this.controllersContainer[i].setAttr("role","tab").setAttr("aria-controls",`tab${i}`);
-            this.contentContainer[i].setAttr("role","tabpanel").setAttr("aria-labelledby",`tab${i}`).setAttr("tabindex",-1);
-        }
-        this.controllersContainer.forEach(item=>item.onClick(e=>{
-            const tab=e.target.element.getAttribute("aria-controls");
-            const index=+tab.slice(3);
-            this.contentContainer.filter(n=>n.element.getAttribute("aria-labelledby")===tab,()=>{
-                if(this.#ACTIVE_ELEMENT_INDEX!==index)this.display(index);
-            });
-        }));
-        return this;
-    }
-    addPairs(ControllerItem,ContentItem){
-        this.controllersContainer.append(ControllerItem);
-        this.contentContainer.append(ContentItem);
-        const length=this.controllersContainer.length;
-        this.controllersContainer.at(-1).setAttr("role","tab").setAttr("aria-controls",`tab${length-1}`);
-        this.contentContainer.at(-1).setAttr("role","tabpanel").setAttr("aria-labelledby",`tab${length-1}`).setAttr("tabindex",-1);
-        // Add listener
-        return this;
-    }
-    removePairs(index){
-
-    }
-    display(index){
-        this.#ACTIVE_ELEMENT_INDEX=index%this.contentContainer.length;
-        const ActiveContent = this.contentContainer.at(this.#ACTIVE_ELEMENT_INDEX);
-        this.controllersContainer.forEach(n=>n.setAttr("tabindex",-1).setAttr("aria-selected",false));
-        this.controllersContainer.at(this.#ACTIVE_ELEMENT_INDEX).setAttr("tabindex",0).setAttr("aria-selected",true);
-        
-        this.contentContainer.forEach(n=>n.st.hide());
-
-        ActiveContent.st.translateX(100,0);
-        ActiveContent.setAttr("tabindex",0).st.show();
-        ActiveContent.st.translateX(0,1000);
-
-        return this;   
-    }
-    next(i=1){
-        this.display(this.#ACTIVE_ELEMENT_INDEX+i);
-        return this;
-    }
-    previous(i=1){
-        this.display(this.#ACTIVE_ELEMENT_INDEX-i);
-        return this;
-    }
-    useVertical(){
-        this.vertical(0,0);
-        this.controllersContainer.horizontal(0,0);
-        this.controllersContainer.style({
-            width : "100%",
-            height : `${this.cache.config.controllersPercent*100}%`
-        });
-        this.contentContainer.style({
-            width : "100%",
-            height : `${(1-this.cache.config.controllersPercent)*100}%`
-        });
-        return this;
-    }
-    useHorizontal(){
-        this.horizontal(0,0);
-        this.controllersContainer.vertical(0, 0);
-        this.controllersContainer.style({
-            height : "100%",
-            width : `${this.cache.config.controllersPercent*100}%`
-        });
-        this.contentContainer.style({
-            height : "100%",
-            width : `${(1-this.cache.config.controllersPercent)*100}%`
-        });
-        return this;
-    }
-    // useHorizontalSwippe(){
-    //     this.onPtrDown();
-    //     this.onPtrUp(e=>this.next(Math.sign(e.swippe.delta_x)));
-    //     return this;
-    // }
-    // useVerticalSwippe(){
-    //     this.onPtrDown();
-    //     this.onPtrUp(e=>this.next(Math.sign(e.swippe.delta_y)));
-    //     return this;
-    // }
-}
-
-const Tabs=(Controllers,Contents)=>new ZikoUITabs(Controllers,Contents);
-
-/*
-
-const cont=(txt = "A")=>btn(txt).style({width:"170px"})
-a=Tabs(
-  [cont("A1"),cont("A2"),cont("A3"),cont("A4")],
-   [cont("A1"),cont("A2"),cont("A3"),cont("A4")]
-).vertical().size("400px")
-a.controllersContainer.style({
-overflowX:"auto"
-})
-a.useHorizontal()
-
-*/
-
-/*
-
-a=Flex().size("400px","400px").style({background:"red"})
-a.element.animate([
-    { borderRadius: "0" , background : "red" },
-    { borderRadius: "50% 0" },
-    { borderRadius: "50% 50%" },
-    { borderRadius: "0 50%" },
-    { borderRadius: "0", background : "yellow"  },
-  ],
-  {
-    // temporisation
-    duration: 2000,
-    iterations: Infinity,
-  })
-
-  */
-
-const palette = {
-    success: {
-        titleColor:"green",
-        contentColor: "#35495e",
-        bgColor: "#d4edda", // Fixed
-        bgColor:"linear-gradient(-225deg, #DFFFCD 0%, #90F9C4 48%, #39F3BB 100%)",
-        borderColor: "#28a745", // Fixed
-        icon: "✅"
-    },
-    info: {
-        titleColor:"blue",
-        contentColor: "#00204a",
-        bgColor: "#93deff", // Fixed
-        bgColor:"radial-gradient(circle at 10% 20%, rgb(147, 230, 241) 0%, rgb(145, 192, 241) 45.5%)",
-        borderColor: "#005689", // Fixed
-        icon: "ℹ️"
-    },
-    warning: {
-        titleColor:"#e4663a",
-        contentColor: "#45171d",
-        bgColor:"#fdffcd",
-        bgColor:"radial-gradient(907px at 3.4% 19.8%, rgb(255, 243, 122) 0%, rgb(255, 102, 145) 97.4%)",
-        borderColor: "#efd510",
-        icon: "⚠️"
-    },
-    danger: {
-        titleColor:"red",
-        contentColor: "#721c24",
-        bgColor: "#f8d7da", // Fixed
-        bgColor:"linear-gradient(90deg, rgb(255, 157, 129) 24.3%, rgb(255, 138, 138) 78.3%)",
-        borderColor: "#c50000", // Fixed
-        icon: "❌" 
-    },
-    tips: {
-        titleColor:null,
-        contentColor: null,
-        bgColor: null, 
-        borderColor: null,
-        icon: "💡" 
-    },
-    important: {
-        titleColor:null,
-        contentColor: null,
-        bgColor: null,
-        borderColor: null,
-        icon: "📌" 
-    },
-    
-};
-
-class ZikoUIAlert extends ZikoUIFlex$1{
-    constructor(type, title, content){
-        super();
-        this.title = h3(title);
-        this.icon = text$1(palette[type].icon).style({
-          display: "flex",
-          justifyContent:"center",
-          borderRadius:"50%",
-          minWidth:"30px",
-          minHeight:"30px",
-        });
-        this.content = content;
-        this.vertical()
-        .size("200px", "auto")
-        .style({ 
-          borderRadius:"10px",
-          padding:"10px"
-        });
-        this.append(
-          Flex$1(
-            this.title,
-            this.icon
-          ).size("100%", "40px").style({}).horizontal("space-between",0),
-          this.content
-        );
-        this.useType(type);
-    }
-    get isAlert(){
-      return true;
-    }
-    useType(type){
-      this.style({
-        color:palette[type].color,
-        background:palette[type].bgColor,
-        border: `1px darkblue solid`,
-        borderLeft: `15px ${palette[type].borderColor} solid`,
-      });
-      this.title.style({
-        color:palette[type].titleColor
-      });
-      this.content.st.color(palette[type].titleColor);
-      this.icon.setValue(palette[type].icon).style({
-        border:`2px ${palette[type].borderColor} solid`,        
-        alignItems: type==="warning"?"flex-start":"center",
-      });
-      return this;
-    }
-    useSuccess(){
-      this.useType("success");
-      return this;
-    }
-    useInfo(){
-      this.useType("info");
-      return this;
-    }
-    useWarning(){
-      this.useType("warning");
-      return this;
-    }
-    useDanger(){
-      this.useType("danger");
-      return this;
-    }
-}
-
-const successAlert=(title, content)=>new ZikoUIAlert("success", title, content);
-const infoAlert=(title, content)=>new ZikoUIAlert("info", title, content);
-const warningAlert=(title, content)=>new ZikoUIAlert("warning", title, content);
-const dangerAlert=(title, content)=>new ZikoUIAlert("danger", title, content);
-
-class __ZikoUISplitter__ extends ZikoUIElement{
-    constructor(flexDirection, resizerCursor, resizerProp){
-        super("div", "Splitter");
-        Object.assign(this.cache,{
-            isResizing : false,
-            flexDirection,
-            resizerCursor,
-            resizerProp
-        });
-        this.style({
-            display:"flex",
-            flexDirection : this.cache.flexDirection,
-            border: "2px solid #333",
-            overflow: "hidden"
-        });
-        this.resizer = new ZikoUIElement("div", "resizer").style({
-            [this.cache.resizerProp]:"5px",
-            backgroundColor: "gold",
-            cursor: this.cache.resizerCursor,
-            touchAction: "none", 
-        });
-        this.onPtrDown(e=>{
-            this.cache.isResizing = true;
-            this.style({
-                cursor : this.cache.resizerCursor // ns-resize
-            });
-            this.resizer.element.setPointerCapture(e.event.pointerId);
-        });
-        this.onPtrUp(e=>{
-            this.cache.isResizing = false;
-            this.style({
-                cursor: "default"
-            });
-            this.resizer.element.releasePointerCapture(e.event.pointerId);
-        });
-        this.onPtrCancel(()=>{
-            this.cache.isResizing = false;
-            this.style({
-                cursor: "default"
-            });
-        });
-        this.onPtrOut(()=>{
-            if (this.cache.isResizing) {
-                this.cache.isResizing = false;
-                this.style({
-                    cursor: "default"
-                });
-            }
-        });
-    }
-    get isSplitter(){
-        return true;
-      }
-    styleResizer(style={}){
-        this.resizer.style(style);
-        return this;
-    }
-}
-
-class ZikoUIHorizontalSplitter extends __ZikoUISplitter__{
-    constructor(leftPane, rightPane){
-        super("row", "ew-resize", "width");
-        this.leftPane = leftPane.style({
-            width:"50%",
-            flexGrow: 1,
-            overflow: "hidden"
-        });
-        this.rightPane = rightPane.style({
-            width:"50%",
-            flexGrow: 1,
-            overflow: "hidden"
-        });
-        this.element?.append(
-            this.leftPane.element,
-            this.resizer.element,
-            this.rightPane.element
-        );
-        this.onPtrMove(e=>{
-            if (!this.cache.isResizing) return;
-            const containerWidth = this.element.getBoundingClientRect().width; // height
-            const pointerRelativeXpos = e.event.clientX - this.element.getBoundingClientRect().x; // y
-            let newLeftPaneWidth = (pointerRelativeXpos / containerWidth) * 100;
-            let newRightPaneWidth = 100 - newLeftPaneWidth;
-            if (newLeftPaneWidth < 0) newLeftPaneWidth = 0;
-            if (newRightPaneWidth < 0) newRightPaneWidth = 0;
-            this.leftPane.element.style.width = `${newLeftPaneWidth}%`;
-            this.rightPane.element.style.width = `${newRightPaneWidth}%`;
-        });
-    }
-    get isHorizontalSplitter(){
-        return true;
-      }
-}
-const hSplitter=(leftPane, rightPane)=>new ZikoUIHorizontalSplitter(leftPane, rightPane);
-
-class ZikoUIVerticalSplitter extends __ZikoUISplitter__{
-    constructor(topPane, bottomPane){
-        super("column", "ns-resize", "height");
-        this.topPane = topPane.style({
-            height:"50%",
-            flexGrow: 1,
-            overflow: "hidden"
-        });
-        this.bottomPane = bottomPane.style({
-            height:"50%",
-            flexGrow: 1,
-            overflow: "hidden"
-        });
-        this.element?.append(
-            this.topPane.element,
-            this.resizer.element,
-            this.bottomPane.element
-        );
-        this.onPtrMove(e=>{
-            if (!this.cache.isResizing) return;
-            const containerHeight = this.element.getBoundingClientRect().height; // height
-            const pointerRelativeYpos = e.event.clientY - this.element.getBoundingClientRect().y; // y
-            let newTopPaneHeight = (pointerRelativeYpos / containerHeight) * 100;
-            let newBottomPaneHeight = 100 - newTopPaneHeight;
-            if (newTopPaneHeight < 0) newTopPaneHeight = 0;
-            if (newBottomPaneHeight < 0) newBottomPaneHeight = 0;
-            this.topPane.element.style.height = `${newTopPaneHeight}%`;
-            this.bottomPane.element.style.height = `${newBottomPaneHeight}%`;
-        });
-    }
-    get isHorizontalSplitter(){
-        return true;
-    }
-}
-const vSplitter=(topPane, bottomPane)=>new ZikoUIVerticalSplitter(topPane, bottomPane);
-
-const Splitter = ({orintation = "horizontal",slides = []}) =>{
-    if(["v","vertical"].includes(orintation.toLowerCase())) return vSplitter(...slides);
-    else if(["h","horizontal"].includes(orintation.toLowerCase())) return hSplitter(...slides);
-    else ;
-};
-
-class ZikoUIBreadcrumbs extends ZikoUIElement{
-    constructor(...items){
-        super("ul", "Breadcrumbs");
-        Object.assign(this.cache,{
-            separatorTextContent:"/"
-        });
-        this.style({
-            listStyle: "none",
-            display: "flex",
-            flexWrap: "wrap"  
-        });
-        this.list=html('li').style({
-            display: "flex",
-            flexWrap: "wrap"
-        });
-        this.append(...items);
-    }
-    #addItem(item){
-        if(["string","number","boolean"].includes(typeof item))item = text$1(item);
-        const li = html("li", item).style({
-            display: "flex",
-            alignItems: "center"   
-        });
-        if(this.element.children.length>0){
-            const separator = text$1(this.cache.separatorTextContent).style({
-                padding: "0 4px"
-            });
-            this.element?.append(separator.element);
-        }
-        this.element?.append(li.element);
-    }
-    append(...items){
-        items.forEach(n=>this.#addItem(n));
-        return this;
-    }
-    configSeparator(separatorTextContent = this.cache.separator, style = {}){
-        this.cache.separatorTextContent = separatorTextContent;
-        const separators = [...this.element.children].filter(n=>n.tagName==="SPAN");
-        separators.forEach(node=>{
-            node.textContent = separatorTextContent;
-            Object.assign(node.style, style);
-        }
-        );
-        return this;
-    }
-}
-const Breadcrumbs=(...items)=>new ZikoUIBreadcrumbs(...items);
-
-class ZikoUIMenu3d extends ZikoUIFlex$1{
-    constructor(controller, content){
-        super("div", "menu3d");
-        this.controller = controller;
-        this.content = content;
-        this.cover = null;
-        Object.assign(this.cache,{
-            config:{
-                useTransfo : false,
-                isOpen : false,
-                position : "left",
-                threshold : 40,
-                angle : 70,
-                overlap : 6,
-                width : 300,
-                height : 300,
-                transitionDuration: '0.5s',
-                transitionEasing: 'ease',
-                menuTransformOrigin : null,
-                menuTransformClosed : null,
-                menuTransformOpened : null,
-                contentTransformOrigin : null,
-                contentTransformClosed : null,
-                contentTransformOpened : null,
-            }
-        });
-        this.append(
-            this.controller,
-            this.content
-        );
-        this.update();
-    }
-    get isOpen(){
-        return this.cache.config.isOpen;
-    }
-    update(){
-        this.controller.style({
-            display:"none",
-            padding:"20px",
-            overflow:"auto",
-            background:"darkblue",
-            color: "#eee",
-            webkitboxSizing: "border-box",
-            mozBoxSizing: "border-box",
-	        boxSizing:"border-box",
-        });
-        this.content.style({
-            padding:"20px 40px",
-            width: "100%",
-            height: "100%",
-            // overflowY:"auto",
-            background:"gold",
-            color: "#eee",
-            webkitboxSizing: "border-box",
-            mozBoxSizing: "border-box",
-	        boxSizing:"border-box",
-            webkitOverflowScrolling:"touch",
-            webkitTransformStyle: "preserve-3d"
-        });
-        this.setupPositions();
-        this.setupWrapper();
-        this.setupCover();
-        this.setupMenu();
-        this.setupContent();
-    }
-    setupPositions() {
-        this.cache.config.menuTransformOpened = '';
-        this.cache.config.contentTransformClosed = '';
-        let menuAngle = this.cache.config.angle;
-        let contentAngle = this.cache.config.angle / -2;
-        switch( this.cache.config.position ) {
-            case "top":
-                this.cache.config.menuTransformOrigin = '50% 0%';
-                this.cache.config.menuTransformClosed = `rotateX(${menuAngle}deg) translateY(-100%) translateY(${this.cache.config.overlap}px)`;
-                this.cache.config.contentTransformOrigin = '50% 0';
-                this.cache.config.contentTransformOpened = `translateY(${this.height/2}px) rotateX(${contentAngle}deg)`;
-                break;
-            case "right":
-                this.cache.config.menuTransformOrigin = '100% 50%';
-                this.cache.config.menuTransformClosed = 'rotateY( ' + menuAngle + 'deg ) translateX( 100% ) translateX( -2px ) scale( 1.01 )';
-                this.cache.config.contentTransformOrigin = '100% 50%';
-                this.cache.config.contentTransformOpened = 'translateX( -'+ this.width/2 +'px ) rotateY( ' + contentAngle + 'deg )';
-                break;
-            case "bottom":
-                this.cache.config.menuTransformOrigin = '50% 100%';
-                this.cache.config.menuTransformClosed = 'rotateX( ' + -menuAngle + 'deg ) translateY( 100% ) translateY( -'+ this.cache.config.overlap +'px )';
-                this.cache.config.contentTransformOrigin = '50% 100%';
-                this.cache.config.contentTransformOpened = 'translateY( -'+ this.height/2 +'px ) rotateX( ' + -contentAngle + 'deg )';
-                break;
-            default:
-                this.cache.config.menuTransformOrigin = '100% 50%';
-                this.cache.config.menuTransformClosed = 'translateX( -100% ) translateX( '+ this.cache.config.overlap +'px ) scale( 1.01 ) rotateY( ' + -menuAngle + 'deg )';
-                this.cache.config.contentTransformOrigin = '0 50%';
-                this.cache.config.contentTransformOpened = 'translateX( '+ this.width/2 +'px ) rotateY( ' + -contentAngle + 'deg )';
-                break;
-        }
-    }
-    setupWrapper() {
-        this.style({
-            perspective : "800px",
-            perspectiveOrigin : this.cache.config.contentTransformOrigin
-        });
-    }
-    setupCover(){
-        if( this.cover ) this.cover.element.parentNode.removeChild( this.cover.element );
-                this.cover=new ZikoUIElement("div","div").style({
-                    position:"absolute",
-					display:"block",
-					width:"100%",
-					height:"100%",
-					left:0,
-					top:0,
-					zIndex:1000,
-					visibility:"hidden",
-					opacity:0,
-					transition: `all ${this.cache.config.transitionDuration} ${this.cache.config.transitionEasing}`
-                });
-				this.content.element.appendChild( this.cover.element );
-    }
-    setupMenu() {
-        // var style = dom.menu.style;
-        switch( this.cache.config.position ) {
-            case "top":
-                this.controller.style({
-                    width : "100%",
-                    height : `${this.height/2}px`
-                });break;
-            case "right":
-                this.controller.style({
-                    right : 0,
-                    width : `${this.width/2}px`,
-                    height : "100%"
-                });break;
-            case "bottom":
-                this.controller.style({
-                    bottom : "0",
-                    width : "100%",
-                    height : `${this.height/2}px`
-                });break;
-            case "left":
-                this.controller.style({
-                    width : `${this.width/2}px`,
-                    height : "100%"
-                });break;
-        }
-        this.controller.style({
-            position : "fixed",
-            display : "block",
-            zIndex : 1,
-            transform : this.cache.config.menuTransformClosed,
-            transformOrigin : this.cache.config.menuTransformOrigin,
-            transition : 'all ' + this.cache.config.transitionDuration +' '+ this.cache.config.transitionEasing
-        });
-        }
-        setupContent() {
-            this.content.style({
-                transform : this.cache.config.contentTransformClosed,
-                transformOrigin : this.cache.config.contentTransformOrigin,
-                transition : `all ${this.cache.config.transitionDuration} ${this.cache.config.transitionEasing}`
-            });
-        }
-        open(){
-            if(!this.cache.config.isOpen){
-                this.cache.config.isOpen = true;
-                this.cover.style({
-                    height : this.content.element.scrollHeight + "px",
-                    visibility : "visible",
-                    opacity : 1,
-                });
-                if(this.cache.config.useTransfo)this.content.style({
-                    transform : this.cache.config.contentTransformOpened,
-                    userSelect : "default"
-                });
-                this.controller.style({
-                    transform : this.cache.config.menuTransformOpened,
-                    useSelect : "none"
-                });
-                this.emit("opened");
-            }
-        }
-        close() {
-            if( this.cache.config.isOpen ) {
-                this.cache.config.isOpen = false;
-                this.cover.style({
-                    // height : this.content.element.scrollHeight + "px",
-                    visibility : "hidden",
-                    opacity : 0,
-                });
-                this.content.style({
-                    transform : this.cache.config.contentTransformClosed,
-                    useSelect : "default"
-                });
-                this.controller.style({
-                    transform : this.cache.config.menuTransformClosed,
-                    userSelect : "none"
-                });
-            }
-            this.emit("closed");
-        }
-        onOpen(callback){
-            this.on("opened", callback.bind(this));
-            return this;
-        }
-        onClose(callback){
-            this.on("closed", callback.bind(this));
-            return this;
-        }
-        #usePosition(position){
-            if(this.cache.config.position!==position){
-                this.cache.config.position=position;
-                const isOpen = this.isOpen;
-                this.close();
-                this.update();
-                if(isOpen)this.open();
-            }
-        }
-        useRight(){
-            this.#usePosition("left");
-            return this;
-        }
-        useRight(){
-            this.#usePosition("right");
-            return this;
-        }
-        useTop(){
-            this.#usePosition("top");
-            return this;
-        }
-        useBottom(){
-            this.#usePosition("bottom");
-            return this;
-        }
-}
-const menu3d = (controller, content) => new ZikoUIMenu3d(controller, content);
-globalThis.menu3d = menu3d;
-
-
-/*
-
-a = menu3d(Flex(text("Menu")), Flex(text("Content")))
-  .size("80vw", "50vh")
-  .style({ userSelect: "none" });
-a.onOpen((e) => console.log(e));
-a.open();
-a.controller.onSwipe(0.05, 1, (e) => {
-  if (e.event.detail.direction.x === "left") a.close();
-});
-a.content.onSwipe(0.1, 1, (e) => {
-  if (e.event.detail.direction.x === "left") a.close();
-  if (e.event.detail.direction.x === "right") a.open();
-});
-
-
-*/
-
-class ZikoUIModal extends ZikoUIContainerElement{
-    constructor(...UIElements){
-        super("dialog", "modal");
-        this.append(...UIElements);
-        Object.assign(this.cache,{
-            config:{
-                mode:"modal",
-                useTransition:true
-            }
-        });
-        this.style({
-            display:"flex",
-            justifyContent:"center",
-            alignItems:"center",
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            padding: "20px",
-            border: "none",
-            backgroundCcolor: "#f5f5f5",
-            boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",
-            borderRadius: "8px"
-        });
-        this.close();
-    }
-    open(){
-        if(!this.element.open){
-            switch(this.cache.config.mode){
-                case "modal": this.element.showModal(); break;
-                case "dialog": this.element.show(); break;
-                default : this.element.show(); break;
-            }
-            // this.style({
-            //     display : "flex",
-            // })
-            this.st.fadeIn(1000);
-            this.emit("modal:opened");
-        }
-        return this;
-    }
-    close(){
-        // this.style({
-        //     display : "none"
-        // })
-        this.st.fadeOut(1000);
-        if(this.element.open){
-            this.element.close();
-        }
-        this.emit("modal:closed");
-        return this;
-    }
-    closeAfter(t = 1000){
-        globalThis?.setTimeout(()=>this.close(), t);
-        return this;
-    }
-    onOpen(callback){
-        this.on("modal:opened",callback.bind(this));
-        return this;
-    }
-    onClose(callback){
-        this.on("modal:closed",callback.bind(this));
-        return this;
-    }
-    useModal(){
-        this.cache.config.mode = "modal";
-        return this;
-    }
-    useDialog(){
-        this.cache.config.mode = "dialog";
-        return this; 
-    }
-    useTransition(enabled = true){
-        this.cache.config.useTransition = enabled;
-        return this;
-    }
-}
-
-const Modal=(...UIElements)=>new ZikoUIModal(...UIElements);
-
-/*
-a=Modal(text("Hello")).style({
- width:"100%",
- height:"100%"
-})
-Flex(a).size("400px","400px").style({border:"1px red solid"})
-*/
-
-class __ZikoUISlider__ extends ZikoUISection{
-    constructor(){
-        super("section","");
-        Object.assign(this.cache,{
-            currentIndex : 0,
-            slideBuilder : null,
-        });
-        this.container = Flex().size("100%","100%").vertical(0,0).style({
-            // width:"100%",
-            overflow:"hidden"
-        });
-        // this.style({
-        //     // width:"100%",
-        //     overflow:"hidden"
-        // });
-        this.container.setAttr({
-            ariaRoledescription : "carousel",
-            ariaLive: "polite",
-            ariaLabel : "Content Slider"
-        });
-        this.track = Section().size("100%","100%").style({
-            transition : "transform 0.3s ease-in-out",
-        });
-        this.bullets = Flex().style({
-            // position : "absolute",
-            // top : 0,
-            gap : "10px",
-            padding:"10px",
-        });
-        this.container.append(
-            this.track,
-            this.bullets
-        );
-        this.append(this.container);
-    }
-    #updateAriaHidden(){
-        for(let i=0;i<this.track.items.length;i++){
-            this.track[i].setAttr({
-                ariaHidden : (i!==this.cache.currentIndex)
-            });
-        }
-    }
-    goto(n = 0){
-        this.cache.currentIndex = n;
-        this.__updatePos();
-        this.#updateAriaHidden();
-    }
-    next(n = 1){
-        this.cache.currentIndex += n;
-        this.__updatePos();
-        this.#updateAriaHidden();
-        return this;
-    }
-    previous(n = 1){
-        this.cache.currentIndex -= n;
-        this.__updatePos();
-        this.#updateAriaHidden();
-        return this;
-    }
-    #update(){
-        const length = this.track.items.length;
-        for(let i=0;i<length;i++){
-            this.track.items[i].setAttr({
-                ariaLabel : `Slide ${i+1} of ${length}`,
-                dataSlideIndex : i
-            });
-            this.bullets.items[i].setAttr({
-                dataIndex : i,
-                ariaLabel : `Go to slide ${i}`
-            });
-            this.bullets[i].events.click?.destroy();
-            this.bullets[i].onClick(()=>this.goto(i));
-        }
-    }
-    #addSlide(UIElement){
-        this.track.append(this.cache.slideBuilder(UIElement).setAttr({
-            ariaRoledescription : "slide",
-            role : "group",
-            ariaLabel : "" // link to update
-        }));
-        const bullet = text$1().size("15px","15px").style({
-            borderRadius:"50%",
-            cursor : "pointer",
-            border : "3px solid blue",
-            background : "white"
-         }).setAttr({
-            role : "button",
-            tabIndex : 0
-         })
-         .onPtrEnter(e=>e.target.st.background("gold").scale(1.2,1.2))
-         .onPtrLeave(e=>e.target.st.background("white").scale(1,1));
-        this.bullets.append(
-         bullet
-        );
-        return this;
-    }
-    addSlides(...slides){
-        slides.forEach(n=>this.#addSlide(n));
-        this.#update();
-        this.#updateAriaHidden();
-        return this;
-    }
-}
-
-class ZikoUIHorizontalSlider extends __ZikoUISlider__{
-    constructor(...slides){
-        super("section","hSlider");
-        this.container.vertical(0,0);
-        Object.assign(this.cache,{
-            slideBuilder : (UIElement) => Flex(UIElement).style({
-                minWidth : "100%",
-                width:"100%",
-                height:"100%",
-            }).vertical(0,0)
-        });
-        this.track.size("100%","90%").style({
-            display : "flex"
-        });
-        this.addSlides(...slides);
-        this.bullets.horizontal(0,0).style({
-            width : "100%",
-            height : "10%",
-        });
-    }
-    __updatePos(){
-        const width = this.container.width;
-        this.track.st.translateX(-this.cache.currentIndex * width);
-    }
-    
-}
-
-const hSlider=(...slides)=>new ZikoUIHorizontalSlider(...slides);
-
-class ZikoUIVerticalSlider extends __ZikoUISlider__{
-    constructor(...slides){
-        super("section","vSlider");
-        Object.assign(this.cache,{
-            slideBuilder : (UIElement) => Flex(UIElement).size("100%","100%").vertical(0, 0)
-        });
-        this.addSlides(...slides);
-        this.container.horizontal(0,0);
-        this.track.size("90%","100%");
-        this.bullets.vertical(0,0).style({
-            height : "100%",
-            width : "10%"
-        });
-    }
-    __updatePos(){
-        const height = this.container.height;
-        this.track.st.translateY(-this.cache.currentIndex * height);
-    }    
-}
-
-const vSlider=(...slides)=>new ZikoUIVerticalSlider(...slides);
-
-const Slider = ({orintation = "horizontal",slides = []}) =>{
-    if(["v","vertical"].includes(orintation.toLowerCase())) return vSlider(...slides);
-    else if(["h","horizontal"].includes(orintation.toLowerCase())) return hSlider(...slides);
-    else ;
-};
-
-var Derived = /*#__PURE__*/Object.freeze({
-    __proto__: null,
-    Accordion: Accordion,
-    Breadcrumbs: Breadcrumbs,
-    Carousel: Carousel,
-    CodeCell: CodeCell,
-    CodeNote: CodeNote,
-    Collapsible: Collapsible,
-    Flex: Flex$1,
-    Grid: Grid$1,
-    Modal: Modal,
-    Slider: Slider,
-    Splitter: Splitter,
-    Tabs: Tabs,
-    ZikoUIAccordion: ZikoUIAccordion,
-    ZikoUIBreadcrumbs: ZikoUIBreadcrumbs,
-    ZikoUICodeNote: ZikoUICodeNote,
-    ZikoUIFlex: ZikoUIFlex$1,
-    ZikoUIGrid: ZikoUIGrid,
-    ZikoUIHorizontalSlider: ZikoUIHorizontalSlider,
-    ZikoUIHorizontalSplitter: ZikoUIHorizontalSplitter,
-    ZikoUIMenu3d: ZikoUIMenu3d,
-    ZikoUIModal: ZikoUIModal,
-    ZikoUIVerticalSlider: ZikoUIVerticalSlider,
-    ZikoUIVerticalSplitter: ZikoUIVerticalSplitter,
-    dangerAlert: dangerAlert,
-    hSlider: hSlider,
-    hSplitter: hSplitter,
-    infoAlert: infoAlert,
-    menu3d: menu3d,
-    successAlert: successAlert,
-    vSlider: vSlider,
-    vSplitter: vSplitter,
-    warningAlert: warningAlert
-});
-
-const UI$1 = {
-    ...Text$1,
-    ...List,
-    ...Io,
-    ...Media,
-    ...Table,
-    ...Semantic,
-    ...Misc,
-    ...Derived,
-    ZikoUIElement,
-    ZikoUIContainerElement
-};
+const UI$1 = {
+    ...Text$1,
+    ...List,
+    ...Io,
+    ...Media,
+    ...Table,
+    ...Semantic,
+    ...Misc,
+    ...Flex$1,
+    ...Grid$2,
+    ZikoUIElement,
+};
 
 const svg2str=svg=>(new XMLSerializer()).serializeToString(svg);
 const svg2ascii=svg=>btoa(svg2str(svg));
@@ -9007,9 +7037,11 @@ function trimKeys(obj) {
     }, Array.isArray(obj) ? [] : {});
 }
 
+// export { markdown2html } from "./markdown.js";
+// export { adoc2html } from "./adoc.js";
+
 var Converter = /*#__PURE__*/Object.freeze({
     __proto__: null,
-    adoc2html: adoc2html,
     arr2str: arr2str,
     csv2arr: csv2arr,
     csv2json: csv2json,
@@ -9024,7 +7056,6 @@ var Converter = /*#__PURE__*/Object.freeze({
     json2xmlFile: json2xmlFile,
     json2yml: json2yml,
     json2ymlFile: json2ymlFile,
-    markdown2html: markdown2html,
     obj2str: obj2str,
     svg2ascii: svg2ascii,
     svg2img: svg2img,
@@ -10397,7 +8428,7 @@ const Math$1 = {
     ...__Calculus__,
 };
 
-class ZikoUISvg extends ZikoUIContainerElement {
+class ZikoUISvg extends ZikoUIElement {
     constructor(w=360,h=300) {
       super("svg","svg");
       //this.cache={};
@@ -10462,439 +8493,14 @@ class ZikoUISvg extends ZikoUIContainerElement {
 
   const Svg =(w,h)=>new ZikoUISvg(w,h);
 
-class ZikoSvgElement extends ZikoUIElement{
-  constructor(type) {
-    super();
-    Object.assign(this.cache,{
-      type
-    });
-  }
-  pos(x,y){
-    return this.posX(x).posY(y);
-  }
-  posX(x){
-    if(["circle","ellipse"].includes(this.cache.type))this.element.cx.baseVal.value=x;
-    else this.element.x.baseVal.value=x;
-    return this;
-  }
-  posY(y){
-    if(["circle","ellipse"].includes(this.cache.type))this.element.cy.baseVal.value=y;
-    else this.element.y.baseVal.value=y;
-    return this;
-  }
-  translate(x,y){
-    return this;
-  }
-  color({ stroke, fill }) {
-    this.element?.setAttribute("stroke", stroke);
-    this.element?.setAttribute("fill", fill);
-    return this;
-  }
-  fill(color = "none") {
-    this.element?.setAttribute("fill", color);
-    return this;
-  }
-  stroke(color = "none", width) {
-    this.element?.setAttribute("stroke", color);
-    width && this.strokeWidth(width);
-    return this;
-  }
-  strokeWidth(width = 1) {
-    this.element?.setAttribute("stroke-width", width);
-    return this;
-  }
-  opacity(value = 1) {
-    this.element?.setAttribute("opacity", value);
-    return this;
-  }
-}
-
-class ZikoSvgCircle extends ZikoSvgElement{
-    constructor(cx,cy,r){
-      super("circle");
-      this.element=document.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "circle",
-      );
-      this.pos(cx,cy).setR(r);
-    }
-    setR(r){
-       this.element.r.baseVal.value=r;
-       return this;
-    }
-    get r(){
-      return this.element.baseVal.value;
-    }
-    get cx(){
-      return this.element.baseVal.value;
-    } 
-    get cy(){
-      return this.element.baseVal.value;
-    }  
-  } 
-const svgCircle=(x,y,r)=>new ZikoSvgCircle(x,y,r);
-
-class ZikoSvgEllipse extends ZikoSvgElement{
-    constructor(cx,cy,rx,ry){
-      super("ellipse");
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "ellipse",
-      );
-      this.pos(cx,cy).setRx(rx).setRy(ry);
-    }
-    setRx(rx){
-       this.element.rx.baseVal.value=rx;
-       return this;
-    } 
-    setRy(ry){
-       this.element.ry.baseVal.value=ry;
-       return this;
-    } 
-  } 
-const svgEllipse=(x,y,rx,ry)=>new ZikoSvgEllipse(x,y,rx,ry);
-
-class ZikoSvgForeignObject extends ZikoSvgElement{
-    constructor(x=0,y=0,w="100%",h="100%",...ZikoUIElement){
-      super("foreignObject");
-      this.items=[];
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "foreignObject",
-      );
-      this.container=Flex$1().setTarget(this.element).vertical(0,0).size("auto","auto");
-      this.container.st.scaleY(-1);
-      this.posX(x).posY(y).width(w).height(h);
-    } 
-    width(w){
-        this.element.etAttribute("width",w);
-        return this;
-    }
-    height(h){
-        this.element.etAttribute("height",h);
-        return this;
-    }
-    add(...ZikoUIElement){
-      this.container.append(...ZikoUIElement);
-      return this;
-      }
-    remove(...ZikoUIElement){
-      this.container.append(...ZikoUIElement);
-      return this;   
-      }
-  } 
-const svgObject=(x, y, w, h)=>new ZikoSvgForeignObject(x, y, w, h);
-
-class ZikoSvgGroupe extends ZikoSvgElement{
-    constructor(...svgElement){
-      super();
-      this.items=[];
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "g",
-      );
-      this.add(...svgElement);
-    }
-    add(...svgElement){
-      for(let i=0;i<svgElement.length;i++){
-        this.element?.appendChild(svgElement[i].element);
-        this.items.push(svgElement[i]);
-      }
-      if(svgElement.length===1)return svgElement[0]
-      return svgElement;
-    }
-    remove(...svgElement){
-      for(let i=0;i<svgElement.length;i++){
-        this.element?.removeChild(svgElement[i].element);
-        this.items=this.items.filter(n=>n!=svgElement);
-      }
-      return this;     
-    }
-}
-const svgGroupe=(...svgElement)=>new ZikoSvgGroupe(...svgElement);
-
-class ZikoSvgImage extends ZikoSvgElement{
-    constructor(src="",w="100%",h="100%",x=0,y=0){
-      super();
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "image",
-      );
-      this.setSrc(src).width(w).height(h).x(x).y(y);
-    }
-    x(x){
-       this.element.x.baseVal.value=x;
-       return this;
-    }
-    y(y){
-       this.element.y.baseVal.value=y;
-       return this;
-    }
-    width(w){
-       this.element?.setAttribute("width",w);
-       return this;
-    }
-    height(h){
-       this.element?.setAttribute("height",h);
-       return this;
-    }
-    setSrc(src=""){
-      this.element?.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', src);
-      return this;
-    }
-  } 
-const svgImage=(src,w,h,x,y)=>new ZikoSvgImage(src,w,h,x,y);
-
-class ZikoSvgLine extends ZikoSvgElement{
-    constructor(x1,y1,x2,y2){
-      super();
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "line",
-      );
-      this.x1(x1).y1(y1).x2(x2).y2(y2).stroke("black");
-    }
-    x1(x1){
-       this.element.x1.baseVal.value=x1;
-       return this;
-    }
-    y1(y1){
-       this.element.y1.baseVal.value=y1;
-       return this;
-    }
-    x2(x2){
-       this.element.x2.baseVal.value=x2;
-       return this;
-    } 
-    y2(y2){
-       this.element.y2.baseVal.value=y2;
-       return this;
-    } 
-  } 
-const svgLine=(x1,y1,x2,y2)=>new ZikoSvgLine(x1,y1,x2,y2);
-
-class ZikoSvgLink extends ZikoSvgElement{
-    constructor(href,...svgElement){
-      super();
-      this.items=[];
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "a",
-      );
-      this.element.etAttribute("href",href);
-      this.add(...svgElement);
-    }
-    add(...svgElement){
-      for(let i=0;i<svgElement.length;i++){
-        this.element.ppendChild(svgElement[i].element);
-        this.items.push(svgElement[i]);
-      }
-      if(svgElement.length===1)return svgElement[0]
-      return svgElement;
-    }
-    remove(...svgElement){
-      for(let i=0;i<svgElement.length;i++){
-        this.element.moveChild(svgElement[i].element);
-        this.items=this.items.filter(n=>n!=svgElement);
-      }
-      return this;     
-    }
-}
-const svgLink=(href,...svgElement)=>new ZikoSvgLink(href,...svgElement);
-
-class ZikoSvgPath extends ZikoSvgElement{
-    constructor(){
-    super();
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "path",
-      );
-      this.path="";
-      
-    }
-    setPath(){
-        this.element.etAttribute("d",this.path);
-        return this;
-    }
-    clear(){
-        this.path="";
-        this.setPath();
-        return this;
-    }
-    moveTo(x,y){
-        this.path+=`M${x} ${y} `;
-        this.setPath();
-        return this;
-    }
-    lineTo(x,y){
-        this.path+=`L${x} ${y} `;
-        this.setPath();
-        return this;
-    }
-    hr(x){
-        this.path+=`H${x} `;
-        this.setPath();
-        return this;
-    }
-    vr(y){
-        this.path+=`V${y} `;
-        this.setPath();
-        return this;
-    }
-    bezier(x1,y1,x2,y2,x,y){
-        this.path+=`C ${x1} ${y1},${x2} ${y2},${x} ${y} `;
-        this.setPath();
-        return this;      
-    }
-    quadratic(x1,y1,x,y){
-        this.path+=`Q ${x1} ${y1} ${x} ${y} `;
-        this.setPath();
-        return this;      
-    }
-    close(){
-        this.path+="Z";
-        this.setPath();
-        return this;
-    }
-}
-
-const svgPath=()=>new ZikoSvgPath();
-
-class ZikoSvgPolygon extends ZikoSvgElement{
-    constructor(X=[],Y=[]){
-      super();
-      this.X=X;
-      this.Y=Y;
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "polygon",
-      );
-      this.element?.setAttribute("points","");
-      this.addPoints(X,Y);
-    }
-    addPoint(x,y){
-      let p=this.element.parentElement.createSVGPoint();
-      p.x=x;
-      p.y=y;
-      this.element.points.appendItem(p);
-      return this;
-    }
-    addPoints(X,Y){
-      for(let i=0;i<X.length;i++){
-        let p=this.element.parentElement.createSVGPoint();
-        p.x=X[i];
-        p.y=Y[i];
-        this.element.oints.appendItem(p);
-      }
-      return this;
-    }
-  } 
-const svgPolygon=(X,Y)=>new ZikoSvgPolygon(X,Y);
-
-class ZikoSvgRectangle extends ZikoSvgElement{
-    constructor(x,y,w,h,center=true){
-      super();
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "rect",
-      );
-      this.setX(x).setY(y).width(w).height(h);
-      this.rx=this.x+this.w/2;
-      this.ty=this.y+this.h/2;
-    }
-    setX(x){
-       this.element.x.baseVal.value=x;
-       this.x=x;
-       return this;
-    }
-    setY(y){
-       this.element.y.baseVal.value=y;
-       this.y=y;
-       return this;
-    }
-    r(rx,ry){
-      this.rx=rx;
-      this.ry=ry;
-      this.setX(this.rx-this.w/2);
-      this.setY(this.ry-this.h/2);
-      return this;
-    } 
-    width(w){
-       this.element.width.baseVal.value=w;
-       this.w=w;
-       return this;
-    } 
-    height(h){
-       this.element.height.baseVal.value=h;
-       this.h=h;
-       return this;
-    } 
-  } 
-  const svgRect=(x,y,w,h,center)=>new ZikoSvgRectangle(x,y,w,h,center);
-
-class ZikoSvgText extends ZikoSvgElement{
-    constructor(text,x,y){
-      super();
-      this.element=document?.createElementNS(
-        "http://www.w3.org/2000/svg",
-        "text",
-      );
-      this.setText(text);
-      this.x(x).y(y);
-    }
-    x(x){
-       this.element?.setAttribute("x",x);
-       return this;
-    }
-    y(y){
-       this.element?.setAttribute("y",y);
-       return this;
-    }
-    setText(text=""){
-      this.element.textContent=text;
-      return this;
-    }
-  } 
-const svgText=(text,x,y)=>new ZikoSvgText(text,x,y);
-
-const svgGrid=(w,h,r=10,c=10)=>{
-    let path=svgPath().fill("none").stroke("coral").strokeWidth(0.6);
-    console.log({x:w/r,y:h/c});
-    for(let i=0;i<w;i++) path.moveTo(0,i*w/r).hr(w);
-    for(let j=0;j<h;j++) path.moveTo(j*h/c,0).vr(h);
-    return path
-};
-
 var SVG = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Svg: Svg,
-    ZikoSvgCircle: ZikoSvgCircle,
-    ZikoSvgEllipse: ZikoSvgEllipse,
-    ZikoSvgForeignObject: ZikoSvgForeignObject,
-    ZikoSvgGroupe: ZikoSvgGroupe,
-    ZikoSvgImage: ZikoSvgImage,
-    ZikoSvgLine: ZikoSvgLine,
-    ZikoSvgLink: ZikoSvgLink,
-    ZikoSvgPath: ZikoSvgPath,
-    ZikoSvgRectangle: ZikoSvgRectangle,
-    ZikoSvgText: ZikoSvgText,
-    ZikoUISvg: ZikoUISvg,
-    svgCircle: svgCircle,
-    svgEllipse: svgEllipse,
-    svgGrid: svgGrid,
-    svgGroupe: svgGroupe,
-    svgImage: svgImage,
-    svgLine: svgLine,
-    svgLink: svgLink,
-    svgObject: svgObject,
-    svgPath: svgPath,
-    svgPolygon: svgPolygon,
-    svgRect: svgRect,
-    svgText: svgText
+    ZikoUISvg: ZikoUISvg
 });
 
 // import { convolute } from "../../math/signal/conv.js";
-class ZikoUICanvas extends ZikoUIContainerElement{
+class ZikoUICanvas extends ZikoUIElement{
     constructor(w,h){
         super("canvas","canvas");
         this.ctx = this.element?.getContext("2d");
@@ -11064,288 +8670,10 @@ class ZikoUICanvas extends ZikoUIContainerElement{
 
 const Canvas=(w,h)=>new ZikoUICanvas(w,h);
 
-class ZikoCanvasElement{
-    constructor(x,y){
-        this.parent=null;
-        this.position={
-            x,
-            y
-        };
-        this.cache={
-            interact:null/*avoid redraw*/,
-            config:{
-                draggable:false,
-                selected:false,
-                highlighted:false,
-                rendered:false
-            },
-            style:{
-                normal:{
-                    strokeEnabled:true,
-                    fillEnabled:false,
-                    strokeColor:"#111111",
-                    fillColor:"#777777",
-                },
-                highlighted:{
-                    strokeEnabled:true,
-                    fillEnabled:false,
-                    strokeColor:null,
-                    fillColor:null,
-                }
-            },
-        };
-        this.history={
-            position:[],
-            styles:[]
-        };
-        this.render();
-    }
-    get px(){
-        //_x=====>px
-        return (this.position.x??0)+(this.parent?.position?.x??0);
-    }
-    get py(){
-        //_y=====>py
-        return (this.position.y??0)+(this.parent?.position?.y??0);
-    }
-    isIntersectedWith(){
-
-    }
-    isInStroke(x,y){
-        let is;
-        if(this.parent){
-            this.parent.ctx.setTransform(1,0,0,1,0,0);
-            is=this.parent.ctx.isPointInStroke(this.path,x,y);
-            this.parent.applyTransformMatrix();
-        }
-        return is;
-    }
-    isInPath(x,y){
-        let is;
-        if(this.parent){
-            this.parent.ctx.setTransform(1,0,0,1,0,0);
-            is=this.parent.ctx.isPointInPath(this.path,x,y);
-            this.parent.applyTransformMatrix();
-        }
-        return is;
-    }
-    posX(x){
-        this.position.x=x;
-        if(this.parent)this.parent.draw();
-        return this;
-    }
-    posY(y){
-        this.position.y=y;
-        if(this.parent)this.parent.draw();
-        return this;
-    }
-    color({stroke=this.cache.style.normal.strokeColor,fill=this.cache.style.normal.fillColor}={stroke,fill}){
-        this.cache.style.normal.strokeColor=stroke;
-        this.cache.style.normal.fillColor=fill;
-        if(this.parent)this.parent.draw();
-        return this;
-    }
-    translate(dx=0,dy=0){
-        this.position.x+=dx;
-        this.position.y+=dy;
-        if(this.parent)this.parent.draw();
-        return;
-    }
-    applyNormalStyle(ctx){
-        ctx.strokeStyle=this.cache.style.normal.strokeColor;
-        ctx.fillStyle=this.cache.style.normal.fillColor;
-        return this;   
-    }
-    applyHighlightedStyle(ctx){
-        ctx.strokeStyle=this.cache.style.highlighted.strokeColor;
-        ctx.fillStyle=this.cache.style.highlighted.fillColor;
-        return this;
-    }
-    stroke(color=this.cache.style.normal.strokeColor,enabled=true){
-        this.cache.style.normal.strokeEnabled=enabled;
-        this.cache.style.normal.strokeColor=color;
-        if(this.parent)this.parent.draw();
-        return this  
-    }
-    fill(color=this.cache.style.normal.fillColor,enabled=true){
-        this.cache.style.normal.fillEnabled=enabled;
-        this.cache.style.normal.filleColor=color;
-        if(this.parent)this.parent.draw();
-        return this;      
-    }
-    render(render=true){
-       this.cache.config.rendered=render;
-       return this;       
-    }
-}
-
-class CanvasArc extends ZikoCanvasElement{
-    constructor(x,y,r,angle){
-        super(x,y);
-        this.r=r;
-        this.angle=angle;
-        this.path=null;
-    }
-    draw(ctx){
-        if(this.cache.config.rendered){
-            ctx.save();
-            this.applyNormalStyle(ctx);
-            ctx.beginPath();
-            this.path=new Path2D();
-            this.path.arc(this.px, this.py, this.r, 0, this.angle);
-            const{strokeEnabled,fillEnabled}=this.cache.style.normal;
-            if(strokeEnabled)ctx.stroke(this.path);
-            if(fillEnabled)ctx.fill(this.path);
-            ctx.closePath(); 
-            ctx.restore();
-        }
-        return this;   
-    }
-    radius(r){
-        this.r=r;
-        if(this.parent)this.parent.draw();
-        return this;
-    }
-    // distanceFromCenter(x,y){
-    //     return Math.sqrt(
-    //         (this._x-x)**2-(this._y-y)**2
-    //     )
-    // }
-    // isIn(x,y,strict=false){
-    //     return strict?this.distanceFromCenter(x,y)<this.r:this.distanceFromCenter(x,y)<=this.r;
-    // }
-    // isInEdges(x,y){
-    //     return this.distanceFromCenter(x,y)===this.r;
-    // }
-}
-const canvasArc=(x,y,r,phi)=>new CanvasArc(x,y,r,phi);
-const canvasCircle=(x,y,r)=>new CanvasArc(x,y,r,2*Math.PI);
-
-class CanvasPoints extends ZikoCanvasElement{
-    constructor(ptsX,ptsY){
-        super();
-        this.pointsMatrix=null;
-        this.path=new Path2D();
-        this.fromXY(ptsX,ptsY);
-    }
-    get points(){
-        return this.pointsMatrix.T.arr;
-    }
-    draw(ctx){
-        if(this.cache.config.rendered){
-            ctx.save();
-            this.applyNormalStyle(ctx);
-            ctx.beginPath();
-            this.path.moveTo(this.points[1][0]+this._x,this.points[1][1]+this._y);
-            for(let i=1;i<this.points.length;i++){
-                this.path.lineTo(this.points[i][0]+this._x,this.points[i][1]+this._y);
-            }
-            ctx.stroke(this.path);
-            ctx.restore();
-        }
-        return this;
-    }
-    fromXY(X,Y){
-        this.pointsMatrix=matrix([X,Y]);
-        return this;
-    }
-    push(ptsX,ptsY){
-        this.pointsMatrix.hstack(matrix([ptsX,ptsY]));
-        if(this.parent)this.parent.draw();
-        return this;
-    }
-    isIn(x,y){
-        let is;
-        if(this.parent){
-            this.parent.ctx.setTransform(1,0,0,1,0,0);
-            is=this.parent.ctx.isPointInPath(this.path,x,y);
-            this.parent.applyTransformMatrix();
-        }
-        return is;
-    }
-}
-
-const canvasPoints=(ptsX=[],ptsY=[])=>new CanvasPoints(ptsX,ptsY);
-
-class CanvasLine extends ZikoCanvasElement{
-    constructor(x0,y0,x1,y1){
-        super();
-        this.x0=x0;
-        this.x1=x1;
-        this.y0=y0;
-        this.y1=y1;
-        delete this.fill;
-    }
-    draw(ctx){
-        if(this.cache.config.rendered){
-            ctx.save();
-            this.applyNormalStyle(ctx);
-            ctx.beginPath();
-            ctx.moveTo(this.x0+this._x,this.y0+this._y_);
-            ctx.lineTo(this.x1+this._x,this.y1+this._y);
-            ctx.stroke();
-            if(this.cache.style.normal.strokeEnabled)ctx.stroke();
-            ctx.restore();
-        }
-        return this;   
-    }
-}
-const canvasLine=(x0,y0,x1,y1)=>new CanvasLine(x0,y0,x1,y1);
-
-class CanvasRect extends ZikoCanvasElement{
-    constructor(x,y,w,h){
-        super(x,y);
-        this.w=w;
-        this.h=h;
-        this.path=new Path2D();
-    }
-    draw(ctx){
-        if(this.cache.config.rendered){
-            ctx.save();
-            this.applyNormalStyle(ctx);
-            ctx.beginPath();
-            this.path.rect(this.px, this.py,this.w,this.h);
-            const{strokeEnabled,fillEnabled}=this.cache.style.normal;
-            if(strokeEnabled)ctx.stroke(this.path);
-            if(fillEnabled)ctx.fill(this.path);
-            ctx.closePath(); 
-            ctx.restore();
-        }
-        return this;   
-    }
-    width(w){
-        this.w=w;
-        if(this.parent)this.parent.draw();
-        return this;
-    }
-    height(h){
-        this.h=h;
-        if(this.parent)this.parent.draw();
-        return this;
-    }
-    // distanceFromCenter(x,y){
-    //     return Math.sqrt(
-    //         (this.position.x-x)**2-(this.position.y-y)**2
-    //     )
-    // }
-    // isIn(x,y,strict=false){
-    //     return strict?this.distanceFromCenter(x,y)<this.r:this.distanceFromCenter(x,y)<=this.r;
-    // }
-    // isInEdges(x,y){
-    //     return this.distanceFromCenter(x,y)===this.r;
-    // }
-}
-const canvasRect=(x,y,w,h)=>new CanvasRect(x,y,w,h);
-
 var CANVAS = /*#__PURE__*/Object.freeze({
     __proto__: null,
     Canvas: Canvas,
-    ZikoUICanvas: ZikoUICanvas,
-    canvasArc: canvasArc,
-    canvasCircle: canvasCircle,
-    canvasLine: canvasLine,
-    canvasPoints: canvasPoints,
-    canvasRect: canvasRect
+    ZikoUICanvas: ZikoUICanvas
 });
 
 const Graphics = {
@@ -11650,7 +8978,7 @@ class ZikoSPA extends ZikoApp{
     constructor({head, wrapper, target, routes}){
         super({head, wrapper, target});
         this.routes=new Map([
-            ["404",text$1("Error 404")],
+            ["404",text("Error 404")],
             ...Object.entries(routes)
         ]);
         this.clear();
@@ -11730,6 +9058,7 @@ function defineParamsGetter(target ){
 }
 
 const __UI__={};
+const __HYDRATION_MAP__ = new Map();
 const __Config__={
     default:{
         target:null,
@@ -11743,12 +9072,15 @@ const __Config__={
         const values=Object.values(pairs);
         for(let i=0;i<keys.length;i++)this.default[keys[i]]=values[i];
     },
-    init:()=>document.documentElement.setAttribute("data-engine","zikojs")
+    init:()=>document.documentElement.setAttribute("data-engine","zikojs"),
+    renderingMode :"spa",
+    isSSC : false,
 };
 
 var Global = /*#__PURE__*/Object.freeze({
     __proto__: null,
     __Config__: __Config__,
+    __HYDRATION_MAP__: __HYDRATION_MAP__,
     __UI__: __UI__
 });
 
@@ -11848,6 +9180,7 @@ if ( globalThis.__Ziko__ ) {
 		globalThis.__Ziko__={
             ...Ziko,
             __UI__,
+            __HYDRATION_MAP__,
             __Config__,
             ExtractAll,
             RemoveAll
@@ -11882,24 +9215,18 @@ function RemoveAll(){
     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;
@@ -11909,7 +9236,6 @@ exports.LinearSystem = LinearSystem;
 exports.Logic = Logic$1;
 exports.Main = Main;
 exports.Matrix = Matrix;
-exports.Modal = Modal;
 exports.Nav = Nav;
 exports.PI = PI$1;
 exports.Permutation = Permutation;
@@ -11917,13 +9243,10 @@ exports.Random = Random;
 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;
@@ -11941,40 +9264,24 @@ exports.ZikoHead = ZikoHead$1;
 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;
@@ -11996,8 +9303,6 @@ exports.ZikoUIInputTime = ZikoUIInputTime;
 exports.ZikoUILabel = ZikoUILabel;
 exports.ZikoUILink = ZikoUILink;
 exports.ZikoUIMain = ZikoUIMain;
-exports.ZikoUIMenu3d = ZikoUIMenu3d;
-exports.ZikoUIModal = ZikoUIModal;
 exports.ZikoUINav = ZikoUINav;
 exports.ZikoUIParagraphe = ZikoUIParagraphe;
 exports.ZikoUIQuote = ZikoUIQuote;
@@ -12010,13 +9315,12 @@ exports.ZikoUISuspense = ZikoUISuspense;
 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;
@@ -12025,7 +9329,6 @@ exports.acos = acos;
 exports.acosh = acosh;
 exports.acot = acot;
 exports.add = add;
-exports.adoc2html = adoc2html;
 exports.arange = arange;
 exports.arr2str = arr2str;
 exports.asin = asin;
@@ -12040,11 +9343,6 @@ exports.blockQuote = blockQuote;
 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;
@@ -12065,7 +9363,6 @@ exports.csv2json = csv2json;
 exports.csv2matrix = csv2matrix;
 exports.csv2object = csv2object;
 exports.csv2sql = csv2sql;
-exports.dangerAlert = dangerAlert;
 exports.datalist = datalist;
 exports.default = Ziko;
 exports.defineParamsGetter = defineParamsGetter;
@@ -12085,8 +9382,6 @@ exports.h3 = h3;
 exports.h4 = h4;
 exports.h5 = h5;
 exports.h6 = h6;
-exports.hSlider = hSlider;
-exports.hSplitter = hSplitter;
 exports.hTags = hTags;
 exports.hr = hr;
 exports.hrs = hrs;
@@ -12094,7 +9389,6 @@ exports.html = html;
 exports.hypot = hypot;
 exports.image = image;
 exports.inRange = inRange;
-exports.infoAlert = infoAlert;
 exports.input = input;
 exports.inputCamera = inputCamera;
 exports.inputColor = inputColor;
@@ -12124,13 +9418,11 @@ exports.logspace = logspace;
 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;
@@ -12169,34 +9461,20 @@ exports.str = str;
 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;
@@ -12208,7 +9486,6 @@ exports.useEventEmitter = useEventEmitter;
 exports.useFavIcon = useFavIcon$1;
 exports.useFocusEvent = useFocusEvent;
 exports.useFps = useFps;
-exports.useGeolocation = useGeolocation;
 exports.useHashEvent = useHashEvent;
 exports.useHead = useHead$1;
 exports.useInputEvent = useInputEvent;
@@ -12230,13 +9507,10 @@ exports.useTimeLoop = useTimeLoop;
 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;