ziko 0.0.16 → 0.0.18

package/dist/ziko.cjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sun Oct 13 2024 15:43:24 GMT+0100 (UTC+01:00)
+  Date : Sat Oct 19 2024 15:07:57 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
@@ -1511,13 +1511,13 @@ class ZikoUseStyle {
 
 const useStyle = (styles, use, id) => new ZikoUseStyle(styles, use, id);
 
-const addSuffixeToNumber$1=(value,suffixe="px")=>{
+const addSuffixeToNumber=(value,suffixe="px")=>{
   if(typeof value === "number") value+=suffixe;
   if(value instanceof Array)value=value.map(n=>typeof n==="number"?n+=suffixe:n).join(" ");
   return value;
 };
 
-let ZikoUIElementStyle$1 = class ZikoUIElementStyle{
+class ZikoUIElementStyle{
     constructor(defaultStyle={}){
         this.target=null;
         this.styles=new Map(
@@ -1617,13 +1617,13 @@ let ZikoUIElementStyle$1 = class ZikoUIElementStyle{
           if("min" in w || "max" in w){
             let min= w.min ?? w.max;
             let max= w.max ?? w.min;
-            min=addSuffixeToNumber$1(min,"px");
-            max=addSuffixeToNumber$1(max,"px"); 
+            min=addSuffixeToNumber(min,"px");
+            max=addSuffixeToNumber(max,"px"); 
             this.style({ minWidth: min, maxWidth: max }, { target, maskVector });
           }
         }
         else {
-          w=addSuffixeToNumber$1(w,"px");
+          w=addSuffixeToNumber(w,"px");
           this.style({width:w},{ target, maskVector });
         }
         return this
@@ -1634,13 +1634,13 @@ let ZikoUIElementStyle$1 = class ZikoUIElementStyle{
           if("min" in h || "max" in h){
             let min= h.min ?? h.max;
             let max= h.max ?? h.min;
-            min=addSuffixeToNumber$1(min,"px");
-            max=addSuffixeToNumber$1(max,"px"); 
+            min=addSuffixeToNumber(min,"px");
+            max=addSuffixeToNumber(max,"px"); 
             this.style({ minHeight: min, maxHeight: max }, { target, maskVector });
           }
         }
         else {
-          h=addSuffixeToNumber$1(h,"px");
+          h=addSuffixeToNumber(h,"px");
           this.style({height:h},{ target, maskVector });
         }
         return this
@@ -1741,57 +1741,57 @@ let ZikoUIElementStyle$1 = class ZikoUIElementStyle{
         return this;
     }
     borderRadius(radius,{ target, maskVector } = {}){
-        radius=addSuffixeToNumber$1(radius,"px");
+        radius=addSuffixeToNumber(radius,"px");
         this.style({ borderRadius: radius }, { target, maskVector });
         return this;
     }
     margin(margin,{ target, maskVector } = {}){
-        margin=addSuffixeToNumber$1(margin,"px");
+        margin=addSuffixeToNumber(margin,"px");
         this.style({ margin }, { target, maskVector });
         return this;
     }
     marginTop(marginTop,{ target, maskVector } = {}){
-        marginTop=addSuffixeToNumber$1(marginTop,"px");
+        marginTop=addSuffixeToNumber(marginTop,"px");
         this.style({marginTop},{ target, maskVector });
         return this;
     }
     marginRight(marginRight,{ target, maskVector } = {}){
-        marginRight=addSuffixeToNumber$1(marginRight,"px");
+        marginRight=addSuffixeToNumber(marginRight,"px");
         this.style({marginRight},{ target, maskVector });
         return this;
     }
     marginBootom(marginBootom,{ target, maskVector } = {}){
-        marginBootom=addSuffixeToNumber$1(marginBootom,"px");
+        marginBootom=addSuffixeToNumber(marginBootom,"px");
         this.style({marginBootom},{ target, maskVector });
         return this;
     }
     marginLeft(marginLeft,{ target, maskVector } = {}){
-        marginLeft=addSuffixeToNumber$1(marginLeft,"px");
+        marginLeft=addSuffixeToNumber(marginLeft,"px");
         this.style({marginLeft},{ target, maskVector });
         return this;
     }
     padding(padding,{ target, maskVector } = {}){
-        padding=addSuffixeToNumber$1(padding,"px");
+        padding=addSuffixeToNumber(padding,"px");
         this.style({padding},{ target, maskVector });
         return this;
     }
     paddingTop(paddingTop,{ target, maskVector } = {}){
-        paddingTop=addSuffixeToNumber$1(paddingTop,"px");
+        paddingTop=addSuffixeToNumber(paddingTop,"px");
         this.style({paddingTop},{ target, maskVector });
         return this;
     }
     paddingRight(paddingRight,{ target, maskVector } = {}){
-        paddingRight=addSuffixeToNumber$1(paddingRight,"px");
+        paddingRight=addSuffixeToNumber(paddingRight,"px");
         this.style({paddingRight},{ target, maskVector });
         return this;
     }
     paddingBootom(paddingBootom,{ target, maskVector } = {}){
-        paddingBootom=addSuffixeToNumber$1(paddingBootom,"px");
+        paddingBootom=addSuffixeToNumber(paddingBootom,"px");
         this.style({paddingBootom},{ target, maskVector });
         return this;
     }
     paddingLeft(paddingLeft,{ target, maskVector } = {}){
-        paddingLeft=addSuffixeToNumber$1(paddingLeft,"px");
+        paddingLeft=addSuffixeToNumber(paddingLeft,"px");
         this.style({paddingLeft},{ target, maskVector });
         return this;
     }
@@ -2025,7 +2025,7 @@ let ZikoUIElementStyle$1 = class ZikoUIElementStyle{
         return this;
     }
       
-};
+}
 
 function EVENT_CONTROLLER(e,EVENT,setter,push_object){
     this.event=e;
@@ -5832,7 +5832,7 @@ const Reactivity={
     ...Hooks,
 };
 
-let ZikoUIElement$1 = class ZikoUIElement {
+class ZikoUIElement {
   constructor(element ,name="") {
     this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
     if(typeof element === "string") {
@@ -5848,7 +5848,7 @@ let ZikoUIElement$1 = class ZikoUIElement {
       isHidden: false,
       isFrozzen:false,
       legacyParent : null,
-      style: new ZikoUIElementStyle$1({}),
+      style: new ZikoUIElementStyle({}),
       attributes: {},
       filters: {},
       temp:{}
@@ -6042,7 +6042,7 @@ let ZikoUIElement$1 = class ZikoUIElement {
   }
     // Attributes
   #setAttr(name, value){
-    name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
+    if(this.element.tagName !== "svg") name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
     if(this?.attr[name] && this?.attr[name]===value) return;
     this.element.setAttribute(name, value);
     Object.assign(this.cache.attributes, {[name]:value});
@@ -6299,9 +6299,9 @@ let ZikoUIElement$1 = class ZikoUIElement {
     if(__ZikoPdf__);
     return this;
   }
-};
+}
 
-class ZikoUIContainerElement extends ZikoUIElement$1{
+class ZikoUIContainerElement extends ZikoUIElement{
     constructor(element, name=""){
         super(element, name);
         this.items = [];
@@ -6322,7 +6322,7 @@ class ZikoUIContainerElement extends ZikoUIElement$1{
         }
         for (let i = 0; i < ele.length; i++){
         if(["number","string"].includes(typeof ele[i]))ele[i]=text$1(ele[i]);
-          if (ele[i] instanceof ZikoUIElement$1) {
+          if (ele[i] instanceof ZikoUIElement) {
             ele[i].cache.parent=this;
             this.element?.appendChild(ele[i].element);
             ele[i].target = this.element;
@@ -6369,7 +6369,7 @@ class ZikoUIContainerElement extends ZikoUIElement$1{
       remove(...ele) {
           const remove = (ele) => {
             if(typeof ele === "number") ele=this.items[ele];
-            if(ele instanceof ZikoUIElement$1)this.element?.removeChild(ele.element);
+            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]);
@@ -6449,7 +6449,7 @@ class __ZikoUIText__ extends ZikoUIContainerElement {
     addValue(...value) {
       value.forEach((item,i) => {
         if (typeof item === "string" || typeof item === "number") this.element?.appendChild(globalThis?.document.createTextNode(item));
-        else if (item instanceof ZikoUIElement$1) this.element?.appendChild(item.element);
+        else if (item instanceof ZikoUIElement) this.element?.appendChild(item.element);
         else if (item instanceof Complex || item instanceof Matrix) this.element?.appendChild(new Text(item.toString()));
         else if (item instanceof Array) this.element?.appendChild(new Text(arr2str(item)));
         else if (item instanceof Object) this.element?.appendChild(new Text(obj2str(item)));
@@ -6559,7 +6559,7 @@ class ZikoUIBlockQuote extends __ZikoUIText__ {
 const p = (...ZikoUIElement) => new ZikoUIParagraphe(...ZikoUIElement);
 const blockQuote = (cite, quote) => new ZikoUIBlockQuote(cite, quote);
 
-class ZikoUIHeading extends ZikoUIElement$1 {
+class ZikoUIHeading extends ZikoUIElement {
     constructor(type = 1, value = "") {
       super(`h${type}`,`h${type}`);
       this.element.textContent = value;
@@ -6637,7 +6637,7 @@ class ZikoUIList extends ZikoUIContainerElement {
       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 (arr[i] instanceof ZikoUIElement$1)li=new ZikoUILI(arr[i]);
+        if (arr[i] instanceof ZikoUIElement)li=new ZikoUILI(arr[i]);
         li.setTarget(this.element);
         this.items.push(li[0]);
         this.maintain();
@@ -6650,7 +6650,7 @@ class ZikoUIList extends ZikoUIContainerElement {
       else {
         const remove = (ele) => {
           if(typeof ele === "number") ele=this.items[ele];
-          if(ele instanceof ZikoUIElement$1)this.element?.removeChild(ele.parent.element);
+          if(ele instanceof ZikoUIElement)this.element?.removeChild(ele.parent.element);
             this.items=this.items.filter(n=>n!==ele);
         };
         for (let i = 0; i < ele.length; i++) remove(ele[i]);
@@ -6665,7 +6665,7 @@ class ZikoUIList extends ZikoUIContainerElement {
         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 (ele[i] instanceof ZikoUIElement$1)li=new ZikoUILI(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]);
         }
@@ -6757,7 +6757,7 @@ var List = /*#__PURE__*/Object.freeze({
     ul: ul
 });
 
-class ZikoUIInput extends ZikoUIElement$1 {
+class ZikoUIInput extends ZikoUIElement {
   constructor(type, name , value = "", datalist) {
     super("input", "input");
     Object.assign(this.events, { input: null });
@@ -7062,7 +7062,7 @@ class ZikoUIInputDateTime extends ZikoUIInput {
 }
 const inputDateTime = () => new ZikoUIInputDateTime();
 
-class ZikoUIXMLWrapper extends ZikoUIElement$1{
+class ZikoUIXMLWrapper extends ZikoUIElement{
     constructor(XMLContent, type){
         super("div", "");
         this.element.append(type==="svg"?svg2dom(XMLContent):html2dom(XMLContent));
@@ -7075,7 +7075,7 @@ function html2dom(htmlString) {
   }
 function svg2dom(svgString) {
     const parser = new DOMParser();
-    const doc = parser.parseFromString(svgString, 'image/svg+xml');
+    const doc = parser.parseFromString(svgString.replace(/\s+/g, ' ').trim(), 'image/svg+xml');
     return doc.documentElement; // SVG elements are usually at the root
 }
 class ZikoUIHTMLWrapper extends ZikoUIXMLWrapper{
@@ -7089,14 +7089,14 @@ class ZikoUISVGWrapper extends ZikoUIXMLWrapper{
     }
 }
 const HTMLWrapper = (HTMLContent) => new ZikoUIHTMLWrapper(HTMLContent);
-const SVGWrapper = (SVGContent) => new ZikoUIHTMLWrapper(SVGContent);
+const SVGWrapper = (SVGContent) => new ZikoUISVGWrapper(SVGContent);
 
 class ZikoUIHtmlTag extends ZikoUIContainerElement {
   constructor(element) {
     super(element,"html");
   }
 }
-class ZikoUIBtn extends ZikoUIElement$1 {
+class ZikoUIBtn extends ZikoUIElement {
   constructor(value = "button") {
     super("button","btn");
     this.element = document?.createElement("button");
@@ -7108,7 +7108,7 @@ class ZikoUIBtn extends ZikoUIElement$1 {
     return true
   }
   setValue(value) {
-    if (value instanceof ZikoUIElement$1) value.setTarget(this.element);
+    if (value instanceof ZikoUIElement) value.setTarget(this.element);
     else {
       this.element?.appendChild(document.createTextNode(""));
       this.element.childNodes[0].data = value;
@@ -7127,7 +7127,7 @@ class ZikoUIBtn extends ZikoUIElement$1 {
     return this;
   }
 }
-class ZikoUIBr extends ZikoUIElement$1 {
+class ZikoUIBr extends ZikoUIElement {
     constructor() {
       super("br","br");
     }
@@ -7135,7 +7135,7 @@ class ZikoUIBr extends ZikoUIElement$1 {
       return true
     }
   }
-  class ZikoUIHr extends ZikoUIElement$1 {
+  class ZikoUIHr extends ZikoUIElement {
     constructor() {
       super("hr","hr");
       this.setAttr("role", "none");
@@ -7197,7 +7197,7 @@ var Misc = /*#__PURE__*/Object.freeze({
     link: link
 });
 
-class ZikoUIInputImage extends ZikoUIElement$1 {
+class ZikoUIInputImage extends ZikoUIElement {
     constructor(text = "File") {
       super("inputImage");
       this._aux_element = btn(text).setTarget(this.target);
@@ -7235,7 +7235,7 @@ class ZikoUIInputImage extends ZikoUIElement$1 {
 }
 const inputImage = (text) => new ZikoUIInputImage(text);
 
-class ZikoUIImage extends ZikoUIElement$1 {
+class ZikoUIImage extends ZikoUIElement {
     constructor(src,alt, w, h) {
       super("img","image");
       this.value=src;
@@ -7268,7 +7268,7 @@ class ZikoUIImage extends ZikoUIElement$1 {
   }
 const image = (src,alt, width, height) => new ZikoUIImage(src,alt, width, height);
 
-class ZikoUIFigure extends ZikoUIElement$1{
+class ZikoUIFigure extends ZikoUIElement{
     constructor(src,caption){
       super("figure","figure");
       this.img=src.width("100%").element;
@@ -7283,7 +7283,7 @@ class ZikoUIFigure extends ZikoUIElement$1{
 }
 const figure =(image,caption) =>new ZikoUIFigure(image,caption);
 
-class __ZikoUIDynamicMediaElement__ extends ZikoUIElement$1 {
+class __ZikoUIDynamicMediaElement__ extends ZikoUIElement {
     constructor(element, name) {
       super(element, name);
       this.useControls();
@@ -7398,7 +7398,7 @@ class ZikoUIWebcame extends ZikoUIVideo{
   }
   const inputCamera=()=>new ZikoUIWebcame();
 
-class ZikoUILabel extends ZikoUIElement$1{
+class ZikoUILabel extends ZikoUIElement{
     constructor(){
       super();
       this.element=document?.createElement("label");
@@ -7407,7 +7407,7 @@ class ZikoUILabel extends ZikoUIElement$1{
       return true;
   }
   }
-class ZikoUIInputOption extends ZikoUIElement$1 {
+class ZikoUIInputOption extends ZikoUIElement {
     constructor(value = "") {
       super();
       this.element = document?.createElement("option");
@@ -7426,7 +7426,7 @@ class ZikoUIInputOption extends ZikoUIElement$1 {
       return this;
     }
 }
-let ZikoUIInputDatalist$1 = class ZikoUIInputDatalist extends ZikoUIElement$1 {
+let ZikoUIInputDatalist$1 = class ZikoUIInputDatalist extends ZikoUIElement {
   constructor(...options){
     super();
     this.element = document?.createElement("datalist");
@@ -7443,7 +7443,7 @@ let ZikoUIInputDatalist$1 = class ZikoUIInputDatalist extends ZikoUIElement$1 {
 
 const datalist = (...options) => new ZikoUIInputDatalist$1(...options);
 
-class ZikoUISelect extends ZikoUIElement$1 {
+class ZikoUISelect extends ZikoUIElement {
     constructor(){
       super();
       this.element=document?.createElement("select");
@@ -7458,7 +7458,7 @@ class ZikoUISelect extends ZikoUIElement$1 {
   }
 const select=()=>new ZikoUISelect();
 
-class ZikoUITextArea extends ZikoUIElement$1 {
+class ZikoUITextArea extends ZikoUIElement {
     constructor() {
       super();
       this.element = document?.createElement("textarea");
@@ -7650,35 +7650,35 @@ var Io = /*#__PURE__*/Object.freeze({
     textarea: textarea
 });
 
-class ZikoUITr extends ZikoUIElement$1{
+class ZikoUITr extends ZikoUIElement{
     constructor(...ZikoUIElement){
         super();
         this.element=document?.createElement("Tr");
         this.append(...ZikoUIElement);
     }
 }
-class ZikoUITd extends ZikoUIElement$1{
+class ZikoUITd extends ZikoUIElement{
     constructor(...ZikoUIElement){
         super();
         this.element=document?.createElement("Td");
         this.append(...ZikoUIElement);
     }
 }
-class ZikoUIThead extends ZikoUIElement$1{
+class ZikoUIThead extends ZikoUIElement{
     constructor(...ZikoUITr){
         super();
         this.element=document?.createElement("Thead");
         this.append(...ZikoUITr);
     }
 }
-class ZikoUITbody extends ZikoUIElement$1{
+class ZikoUITbody extends ZikoUIElement{
     constructor(...ZikoUITr){
         super();
         this.element=document?.createElement("Tbody");
         this.append(...ZikoUITr);
     }
 }
-class ZikoUICaption extends ZikoUIElement$1{
+class ZikoUICaption extends ZikoUIElement{
     constructor(ZikoUIElement){
         super();
         this.element=document?.createElement("Caption");
@@ -7689,14 +7689,14 @@ class ZikoUICaption extends ZikoUIElement$1{
 const tr=(...ZikoUIElement)=>new ZikoUITr(...ZikoUIElement);
 const td=(...UI)=>{
     UI=UI.map(n=>{
-        if(!(n instanceof ZikoUIElement$1))n=text$1(n);
+        if(!(n instanceof ZikoUIElement))n=text$1(n);
         return n
     });
     return new ZikoUITd(...UI)
 };
 const thead=(...ZikoUITd)=>{
     ZikoUITd=ZikoUITd.map(n=>{
-        if(!(n instanceof ZikoUIElement$1))n=td(n);
+        if(!(n instanceof ZikoUIElement))n=td(n);
         return n
     });
     return new ZikoUIThead(...UI)
@@ -7716,7 +7716,7 @@ const MatrixToTableUI=matrix=>{
     return Tr
 };
 
-class ZikoUITable extends ZikoUIElement$1 {
+class ZikoUITable extends ZikoUIElement {
     constructor(body,{caption=null,head=null,foot=null}={}){
         super("table","Table");
         this.structure={
@@ -7948,7 +7948,7 @@ class ZikoUIGrid extends ZikoUIContainerElement {
 }
 const Grid$1 = (...ZikoUIElement) => new ZikoUIGrid("div").append(...ZikoUIElement);
 
-class ZikoUICollapbsible extends ZikoUIElement$1{
+class ZikoUICollapbsible extends ZikoUIElement{
     constructor(summary,content,openIcon="😁", closeIcon=openIcon){
         super("details","Collapsible");
         Object.assign(this.cache,{
@@ -8814,7 +8814,7 @@ 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$1{
+class __ZikoUISplitter__ extends ZikoUIElement{
     constructor(flexDirection, resizerCursor, resizerProp){
         super("div", "Splitter");
         Object.assign(this.cache,{
@@ -8829,7 +8829,7 @@ class __ZikoUISplitter__ extends ZikoUIElement$1{
             border: "2px solid #333",
             overflow: "hidden"
         });
-        this.resizer = new ZikoUIElement$1("div", "resizer").style({
+        this.resizer = new ZikoUIElement("div", "resizer").style({
             [this.cache.resizerProp]:"5px",
             backgroundColor: "gold",
             cursor: this.cache.resizerCursor,
@@ -8951,7 +8951,7 @@ const Splitter = ({orintation = "horizontal",slides = []}) =>{
     else ;
 };
 
-class ZikoUIBreadcrumbs extends ZikoUIElement$1{
+class ZikoUIBreadcrumbs extends ZikoUIElement{
     constructor(...items){
         super("ul", "Breadcrumbs");
         Object.assign(this.cache,{
@@ -9104,7 +9104,7 @@ class ZikoUIMenu3d extends ZikoUIFlex$1{
     }
     setupCover(){
         if( this.cover ) this.cover.element.parentNode.removeChild( this.cover.element );
-                this.cover=new ZikoUIElement$1("div","div").style({
+                this.cover=new ZikoUIElement("div","div").style({
                     position:"absolute",
 					display:"block",
 					width:"100%",
@@ -9547,7 +9547,9 @@ const UI$1 = {
     ...Table,
     ...Semantic,
     ...Misc,
-    ...Derived
+    ...Derived,
+    ZikoUIElement,
+    ZikoUIContainerElement
 };
 
 const svg2str=svg=>(new XMLSerializer()).serializeToString(svg);
@@ -11306,1198 +11308,128 @@ const Math$1 = {
     ...__Calculus__,
 };
 
-const addSuffixeToNumber=(value,suffixe="px")=>{
-  if(typeof value === "number") value+=suffixe;
-  if(value instanceof Array)value=value.map(n=>typeof n==="number"?n+=suffixe:n).join(" ");
-  return value;
-};
-
-class ZikoUIElementStyle{
-    constructor(defaultStyle={}){
-        this.target=null;
-        this.styles=new Map(
-            [["default",defaultStyle]]
-        );
-        this.cache={
-            isHidden:false,
-            isFaddedOut:false,
-            transformation:{
-                Flip:[0,0,0],
-                matrix:new Matrix([
-                    [1,0,0,0],
-                    [0,1,0,0],
-                    [0,0,1,0],
-                    [0,0,0,1]
-                ])
-            }
-        };
-    }
-    // style(styles ,{target = "parent", maskVector = null } = {}){
-    //     if (target === "parent" || target === 0)style(this.target.element, styles);
-    //     else if(target === "parent" || target === 0){
-    //       if (maskVector) {
-    //         this.items.map((n, i) => maskVector[i] == 1 && n.style(styles));
-    //       } 
-    //       else this.items.map((n) => n.style(styles));      
-    //     }
-    //     return this;
-    //   }
-    style(styles){
-        for(const [key, value] of Object.entries(styles)){
-            if(Str.isCamelCase(key)){
-                delete styles[key];
-                Object.assign(styles,{[Str.camel2hyphencase(key)]:value});
-            }
-        }
-        if(this?.target?.element?.style)Object.assign(this?.target?.element?.style, styles);
-        return this;
+class ZikoUISvg extends ZikoUIContainerElement {
+    constructor(... ZikoSvgElement) {
+      super("svg","svg");
+      // this.setAttr("width",w);
+      // this.setAttr("height",h);
+      this.style({border:"1px black solid"});
+      this.view(-10,-10,10,10);
+      this.add(...ZikoSvgElement);
     }
-    linkTo(target){
-        this.target=target;
-        return this;
+    size(width, height){
+      this.setAttr({
+        width ,
+        height
+      });
+      return this;
     }
-    use(name="default"){
-        this.style(this.styles.get(name));
-        return this;
+    view(x1,y1,x2,y2){
+      let width=Math.abs(x2-x1);
+      let height=Math.abs(y2-y1);
+      this.setAttr("viewBox",[x1,y1,width,height].join(" "));
+      this.st.scaleY(-1);
+      return this;
     }
-    update(name,styles){
-        const old=this.styles.get(name);
-        old?this.styles.set(name,Object.assign(old,styles)):this.styles.set(name,styles);
-        return this;
+    add(...svgElement){
+      for(let i=0;i<svgElement.length;i++){
+        this.element.append(svgElement[i].element);
+        this.items.push(svgElement[i]);
+      }
+      this.maintain();
+      return this;
     }
-    add(name,styles){
-        this.styles.set(name,styles);
-        return this;
+    remove(...svgElement){
+      for(let i=0;i<svgElement.length;i++){
+        this.element?.removeChild(svgElement[i].element);
+        this.items=this.items.filter(n=>!svgElement);
+      }
+      this.maintain();
+      return this;     
     }
-    replace(name,styles){
-        this.styles.set(name,styles);
-        return this;
+    mask(){
+  
     }
-    delete(...names){
-        names.forEach(n=>this.styles.delete(n));
-        return this;
+    toString(){
+      return  (new XMLSerializer()).serializeToString(this.element);
     }
-    updateDefaultStyle(){
-        const defaultStyle=Object.fromEntries(
-            Object.entries(this.target.element.style).filter(n=>isNaN(+n[0]))
-        );   
-        this.update("default",defaultStyle);
-        return this;
+    btoa(){
+      return btoa(this.toString())
     }
-    hover(styles){
-        //this.updateDefaultStyle()
-        if(styles)this.add("hover",styles);
-        this.target?.element?.addEventListener("pointerenter",()=>this.use("hover"));
-        this.target?.element?.addEventListener("pointerleave",()=>this.use("default"));
-        return this;
+    toImg(){
+      return 'data:image/svg+xml;base64,'+this.btoa()
     }
-    // Checkers 
-    isInline(){
-        return getComputedStyle(this.target.element).display.includes("inline");
+    toImg2(){
+      return "data:image/svg+xml;charset=utf8,"+this.toString().replaceAll("<","%3C").replaceAll(">","%3E").replaceAll("#","%23").replaceAll('"',"'");
     }
-    isBlock(){
-        return !(this.isInline());
+  }
+
+  const Svg =(...items)=>new ZikoUISvg(...items);
+
+class ZikoSvgElement {
+  constructor(type) {
+    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);
     }
-    // Size
-    size(width,height,{ target, maskVector } = {}){
-        this.style({
-            width,
-            height
-        },{ target, maskVector });
-        return this;
+    setR(r){
+       this.element.r.baseVal.value=r;
+       return this;
     }
-    width(w,{ target, maskVector } = {}){
-        if(w instanceof Object){
-          if(w instanceof Array)w={min:w[0],max:w[1]};
-          if("min" in w || "max" in w){
-            let min= w.min ?? w.max;
-            let max= w.max ?? w.min;
-            min=addSuffixeToNumber(min,"px");
-            max=addSuffixeToNumber(max,"px"); 
-            this.style({ minWidth: min, maxWidth: max }, { target, maskVector });
-          }
-        }
-        else {
-          w=addSuffixeToNumber(w,"px");
-          this.style({width:w},{ target, maskVector });
-        }
-        return this
+    get r(){
+      return this.element.baseVal.value;
     }
-    height(h,{ target, maskVector } = {}){
-        if(h instanceof Object){
-          if(h instanceof Array)h={min:h[0],max:h[1]};
-          if("min" in h || "max" in h){
-            let min= h.min ?? h.max;
-            let max= h.max ?? h.min;
-            min=addSuffixeToNumber(min,"px");
-            max=addSuffixeToNumber(max,"px"); 
-            this.style({ minHeight: min, maxHeight: max }, { target, maskVector });
-          }
-        }
-        else {
-          h=addSuffixeToNumber(h,"px");
-          this.style({height:h},{ target, maskVector });
-        }
-        return this
-    } 
-    enableResize(h=false,v=false,{ target, maskVector } = {}){
-        let resize="none";
-        if(h)v?resize="both":resize="horizontal";
-        else v?resize="vertical":resize="none";
-        this.style({
-            resize,
-            overflow:"hidden"
-        },{ target, maskVector });
-        if(this.isInline()){
-            console.group("Ziko Issue : Temporarily Incompatible Method");
-            console.warn(".enableResize has no effect on inline elements!");
-            console.info("%cConsider using other display types such as block, inline-block, flex, or grid for proper resizing behavior.","color:gold;background-color:#3333cc;padding:5px");
-            console.groupEnd();
-        }
-        return this;
-    }   
-    // Apparence
-    hide({after, target, maskVector } = {}){
-        if(typeof after==="number"){
-            const wrapper=()=>this.hide({target,maskVector});
-            setTimeout(wrapper, after);
-            clearTimeout(wrapper);
-        }
-        else {
-          this.cache.isHidden=true;
-          this.style({display:"none"},{target,maskVector});
-        }
-        return this;
-    }
-    show({after, target, maskVector } = {}){
-        if(typeof after==="number"){
-            const wrapper=()=>this.show({target,maskVector});
-            setTimeout(wrapper, after);
-            clearTimeout(wrapper);
-        }
-        else {
-          this.cache.isHidden=false;
-          this.style({display:""},{target,maskVector});
-        }
-        return this;
-    }
-    color(color,{ target, maskVector } = {}){
-        this.style({color},{ target, maskVector });
-        return this;
-    }
-    background(background,{ target, maskVector } = {}){
-        this.style({background},{ target, maskVector });
-        return this;
-    }
-    backgroundColor(backgroundColor,{ target, maskVector } = {}){
-        this.style({backgroundColor},{ target, maskVector });
-        return this;
-    }
-    opacity(opacity, { target, maskVector } = {}) {
-        this.style({ opacity }, { target, maskVector });
-        return this;
-    }
-    // Placement
-    position(position,{ target, maskVector } = {}){
-        this.style({position},{ target, maskVector });
-        return this
-    }
-    display(disp, { target, maskVector } = {}) {
-        this.style({ display: disp }, { target, maskVector });
-        return this;
-    }
-    zIndex(z,{ target, maskVector } = {}){
-        this.style({zIndex:z},{ target, maskVector });
-        return this;
-    }
-    float(float, { target, maskVector } = {}) {
-        this.style({ float: float }, { target, maskVector });
-        return this;
-    }
-    // Box Model 
-    border(border = "1px solid red", { target, maskVector } = {}){
-        this.style({border}, { target, maskVector });
-        return this;
-    }
-    borderTop(borderTop = "1px solid red", { target, maskVector } = {}){
-        this.style({borderTop}, { target, maskVector });
-        return this;
-    }
-    borderRight(borderRight = "1px solid red", { target, maskVector } = {}){
-        this.style({borderRight}, { target, maskVector });
-        return this;
-    }
-    borderBottom(borderBottom = "1px solid red", { target, maskVector } = {}){
-        this.style({borderBottom}, { target, maskVector });
-        return this;
-    }
-    borderLeft(borderLeft = "1px solid red", { target, maskVector } = {}){
-        this.style({borderLeft}, { target, maskVector });
-        return this;
-    }
-    borderRadius(radius,{ target, maskVector } = {}){
-        radius=addSuffixeToNumber(radius,"px");
-        this.style({ borderRadius: radius }, { target, maskVector });
-        return this;
-    }
-    margin(margin,{ target, maskVector } = {}){
-        margin=addSuffixeToNumber(margin,"px");
-        this.style({ margin }, { target, maskVector });
-        return this;
-    }
-    marginTop(marginTop,{ target, maskVector } = {}){
-        marginTop=addSuffixeToNumber(marginTop,"px");
-        this.style({marginTop},{ target, maskVector });
-        return this;
-    }
-    marginRight(marginRight,{ target, maskVector } = {}){
-        marginRight=addSuffixeToNumber(marginRight,"px");
-        this.style({marginRight},{ target, maskVector });
-        return this;
-    }
-    marginBootom(marginBootom,{ target, maskVector } = {}){
-        marginBootom=addSuffixeToNumber(marginBootom,"px");
-        this.style({marginBootom},{ target, maskVector });
-        return this;
-    }
-    marginLeft(marginLeft,{ target, maskVector } = {}){
-        marginLeft=addSuffixeToNumber(marginLeft,"px");
-        this.style({marginLeft},{ target, maskVector });
-        return this;
-    }
-    padding(padding,{ target, maskVector } = {}){
-        padding=addSuffixeToNumber(padding,"px");
-        this.style({padding},{ target, maskVector });
-        return this;
-    }
-    paddingTop(paddingTop,{ target, maskVector } = {}){
-        paddingTop=addSuffixeToNumber(paddingTop,"px");
-        this.style({paddingTop},{ target, maskVector });
-        return this;
-    }
-    paddingRight(paddingRight,{ target, maskVector } = {}){
-        paddingRight=addSuffixeToNumber(paddingRight,"px");
-        this.style({paddingRight},{ target, maskVector });
-        return this;
-    }
-    paddingBootom(paddingBootom,{ target, maskVector } = {}){
-        paddingBootom=addSuffixeToNumber(paddingBootom,"px");
-        this.style({paddingBootom},{ target, maskVector });
-        return this;
-    }
-    paddingLeft(paddingLeft,{ target, maskVector } = {}){
-        paddingLeft=addSuffixeToNumber(paddingLeft,"px");
-        this.style({paddingLeft},{ target, maskVector });
-        return this;
-    }
-    // Typographie
-    font(font,{ target, maskVector } = {}){
-        this.style({font},{ target, maskVector });
-        return this;
-    }
-    fontFamily(fontFamily="",{ target, maskVector } = {}){
-        this.style({fontFamily},{ target, maskVector });
-        return this;
-    }
-    fontSize(fontSize,{ target, maskVector } = {}){
-        this.style({fontSize},{ target, maskVector });
-        return this;
-    }
-    // Misc
-    cursor(type="pointer"){
-        this.style({ cursor: type });
-        return this;
-    }  
-    overflow(x,y,{ target, maskVector } = {}){
-        const values=["hidden","auto"];
-        this.style({
-          overflowX:typeof x==="number"?values[x]:x,
-          overflowY:typeof y==="number"?values[y]:y
-        },{target,maskVector});
-        return this;
-    }
-    clip(polygon, { target, maskVector } = {}) {
-        if (typeof polygon === "string") polygon = "polygon(" + polygon + ")";
-        this.style({ clipPath: polygon }, { target, maskVector });
-        return this;
-    }
-    // Transfromations
-    fadeOut(transitionTimming = 1) {
-        this.style({ 
-          transition:`opacity ${transitionTimming/1000}s`, 
-          opacity: 0 
-        });
-        this.cache.isFaddedOut=true;
-        return this;
-    }
-    fadeIn(transitionTimming = 1) {
-        this.style({ 
-          transition: `opacity ${transitionTimming/1000}s`, 
-          opacity: 1 
-        });
-        this.cache.isFaddedOut=false;
-        return this;
-    }
-    toggleFade(t_in = 1000,t_out=t_in){
-        this.cache.isFaddedOut?this.fadeIn(t_in):this.fadeOut(t_out);
-        return this;
-    }
-    morphBorderRadius(newValue, transitionTimming){
-        this.style({ 
-            borderRadius: newValue,
-            transition: `borderRadius ${transitionTimming/1000}s`, 
-        });
-        return this;
-    }
-    #applyTransformMatrix(transitionTimming){
-        const transformMatrix = this.cache.transformation.matrix.arr.join(",");
-        this.style({
-            transform: `matrix3d(${transformMatrix})`,
-            "-webkit-transform": `matrix3d(${transformMatrix})`,
-            "-moz-transform": `matrix3d(${transformMatrix})`, 
-            "-ms-transform": `matrix3d(${transformMatrix})`, 
-            "-o-transform": `matrix3d(${transformMatrix})` 
-        });
-        if (transitionTimming != 0) this.style({ transition: `transform ${transitionTimming/1000}s ease` });
-    }
-    translate(dx, dy = dx ,dz = 0, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(3,0,dx);
-        this.cache.transformation.matrix.set(3,1,dy);
-        this.cache.transformation.matrix.set(3,2,dz);
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    translateX(dx, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(3,0,dx);
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    translateY(dy, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(3,1,dy);
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    translateZ(dz, transitionTimming = 0) {
-        const d=-1/this.cache.transformation.matrix[2][2];
-        this.cache.transformation.matrix.set(3,2,z);
-        this.cache.transformation.matrix.set(3,3,1-(dz/d));
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    perspective(distance,transitionTimming=0){
-        const z=this.cache.transformation.matrix[3][2];
-        this.cache.transformation.matrix.set(2,2,-1/d);
-        this.cache.transformation.matrix.set(3,3,1-(z/distance));
-        this.#applyTransformMatrix(transitionTimming);
-        return this; 
-    }
-    scale(sx, sy = sx, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(0,0,sx);
-        this.cache.transformation.matrix.set(1,1,sy);
-        // const transformMatrix = this.cache.transformation.matrix.arr.join(",");
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    scaleX(x = 1 , transitionTimming = 0) {
-        this.cache.transformation.matrix.set(0,0,x);
-        // const transformMatrix = this.cache.transformation.matrix.arr.join(",");
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    scaleY(y = 1, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(1,1,y);
-        this.cache.transformation.matrix.arr.join(",");
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    skew(x, y = x, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(0,1,x);
-        this.cache.transformation.matrix.set(1,0,y);
-        this.cache.transformation.matrix.arr.join(",");
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    skewX(x = 1 , transitionTimming = 0) {
-        this.cache.transformation.matrix.set(0,1,x);
-        this.cache.transformation.matrix.arr.join(",");
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    skewY(y = 1, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(1,0,y);
-        this.cache.transformation.matrix.arr.join(",");
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    rotateX(rx, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(1,1,cos(rx));
-        this.cache.transformation.matrix.set(1,2,-sin(rx));
-        this.cache.transformation.matrix.set(2,1,sin(rx));
-        this.cache.transformation.matrix.set(1,2,cos(rx));
-        this.#applyTransformMatrix(transitionTimming);   
-        return this;
-    }
-    rotateY(ry, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(0,0,cos(ry));
-        this.cache.transformation.matrix.set(0,2,sin(ry));
-        this.cache.transformation.matrix.set(2,0,-sin(ry));
-        this.cache.transformation.matrix.set(2,2,cos(ry));
-        this.#applyTransformMatrix(transitionTimming);   
-        return this;
-    }
-    rotateZ(rz, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(0,0,cos(rz));
-        this.cache.transformation.matrix.set(0,1,-sin(rz));
-        this.cache.transformation.matrix.set(1,0,sin(rz));
-        this.cache.transformation.matrix.set(1,1,cos(rz)); 
-        this.#applyTransformMatrix(transitionTimming);  
-        return this;
-    }
-    flipeX(transitionTimming = 1) {
-        this.cache.transformation.Flip[0] += 180;
-        this.cache.transformation.Flip[0] %= 360;
-        this.rotateX(this.cache.transformation.Flip[0], transitionTimming);
-        return this;
-    }
-    flipeY(transitionTimming = 1) {
-        this.cache.transformation.Flip[1] += 180 ;
-        this.cache.transformation.Flip[1] %= 360;
-        this.rotateY(this.cache.transformation.Flip[1], transitionTimming);
-        return this;
-      }
-    flipeZ(transitionTimming = 1) {
-        this.cache.transformation.Flip[2] += 180;
-        this.cache.transformation.Flip[2] %= 360;
-        this.rotateZ(this.cache.transformation.Flip[2], transitionTimming);
-        return this;
-    }
-    slideHeightIn(transitionTimming = 1, h = this.h) {
-        this.style({ transition: transitionTimming + "s", height: h });
-        return this;
-    }
-    slideHeightOut(transitionTimming = 1) {
-        this.style({ transition: transitionTimming + "s", height: 0 });
-        this.target?.element?.n("transitionend", () =>
-          this.style({ opacity: "none" }),
-        );
-        return this;
-      }
-    slideWidthIn(transitionTimming = 1, w = this.w) {
-        this.style({ transition: transitionTimming + "s", width: w });
-        return this;
-    }
-    slideWidthOut(transitionTimming = 1) {
-        this.style({ transition: transitionTimming + "s", width: 0 });
-        const wrapper=()=>{
-            this.style({ opacity: "none" });
-        };
-        this.target?.element?.addEventListener("transitionend",wrapper);
-        this.target?.element?.removeEventListener("transitionend",wrapper);
-        return this;
-    }
-    slideIn({ transitionTimming = 1, w = "100%", h = "auto" } = {}) {
-        this.style({
-          transition: transitionTimming + "s",
-          width: w,
-          height: h,
-          visibility: "visible",
-        });
-        return this;
-    }
-    slideOut({ transitionTimming = 1, width = 0, heightransitionTimming = 0 } = {}) {
-        this.style({
-          visibility: "hidden",
-          transition: transitionTimming + "s",
-          opacity: "none",
-          width: width,
-          height: height,
-        });
-        const wrapper=()=>{
-            this.style({ opacity: "none" });
-        };
-        this.target?.element?.addEventListener("transitionend",wrapper);
-        this.target?.element?.removeEventListener("transitionend",wrapper);
-        return this;
-    }
-      
-}
-
-class ZikoUIElement {
-  constructor(element ,name="") {
-    this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
-    if(typeof element === "string") {
-      element === "svg" ? element=globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", "svg"): element = globalThis?.document?.createElement(element);
-    }
-    this.element = element;
-    this.uuid=this.constructor.name+"-"+Random.string(10);
-    this.cache = {
-      name,
-      parent:null,
-      isBody:false,
-      isRoot:false,
-      isHidden: false,
-      isFrozzen:false,
-      legacyParent : null,
-      style: new ZikoUIElementStyle({}),
-      attributes: {},
-      filters: {},
-      temp:{}
-    };
-    this.events = {
-      ptr:null,
-      mouse:null,
-      wheel:null,
-      key:null,
-      drag:null,
-      drop:null,
-      click:null,
-      clipboard:null,
-      focus:null,
-      swipe:null,
-      custom:null,
-    };
-    this.observer={
-      resize:null,
-      intersection:null
-    };
-    this.cache.style.linkTo(this);
-    this.style({ 
-      position: "relative",
-      boxSizing:"border-box",
-      // fontFamily:"verdana",
-      margin:0,
-      padding:0,
-     });
-    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];
-    globalThis.__Ziko__.__Config__.default.render && this.render();
-  }
-  get isZikoUIElement(){
-    return true
-  }
-  get st(){
-    return this.cache.style;
-  }
-  get attr(){
-    return this.cache.attributes;
-  }
-  get evt(){
-    return this.cache.events;
-  }
-  get html(){
-    return this.element.innerHTML;
-  }
-  get text(){
-    return this.element.textContent;
-  }
-  get isBody(){
-    return this.element === globalThis?.document.body;
-  }
-  get __app__(){
-    if(this.cache.isRoot)return this;
-    let root=this.cache.parent;
-    while(1){
-      if(!root)return null;
-      if(root.cache.isRoot)return root;
-      root=root.parent;
-    }
-  }
-  get parent(){
-    return this.cache.parent;
-  }
-  get width(){
-    return this.element.getBoundingClientRect().width;
-  }
-  get height(){
-    return this.element.getBoundingClientRect().height;
-  }
-  get top(){
-    return this.element.getBoundingClientRect().top;
-  }
-  get right(){
-    return this.element.getBoundingClientRect().right;
-  }
-  get bottom(){
-    return this.element.getBoundingClientRect().bottom;
-  }
-  get left(){
-    return this.element.getBoundingClientRect().left;
-  }
-  clone(render=false) {
-    const UI = new this.constructor();
-    UI.__proto__=this.__proto__;
-    if(this.items.length){
-      const items = [...this.items].map(n=>n.clone());
-      UI.append(...items);
-    }
-    else UI.element=this.element.cloneNode(true);
-    return UI.render(render);
-  }
-  style(styles){
-    styles instanceof ZikoUseStyle ? this.st.style(styles.current): this.st.style(styles);
-    return this;
-  }
-  size(width,height){
-    this.st.size(width,height);
-    return this; 
-  }
-  get #SwitchedStyleRTL_LTR(){
-    const CalculedStyle = globalThis.getComputedStyle(this.element); 
-    const SwitchedStyle = {};
-    if(CalculedStyle.marginRight!=="0px")Object.assign(SwitchedStyle, {marginLeft: CalculedStyle.marginRight});
-    if(CalculedStyle.marginLeft!=="0px")Object.assign(SwitchedStyle, {marginRight: CalculedStyle.marginLeft});
-    if(CalculedStyle.paddingRight!=="0px")Object.assign(SwitchedStyle, {paddingLeft: CalculedStyle.paddingRight});
-    if(CalculedStyle.paddingLeft!=="0px")Object.assign(SwitchedStyle, {paddingRight: CalculedStyle.paddingLeft});
-    if(CalculedStyle.left!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.left});
-    if(CalculedStyle.right!=="0px")Object.assign(SwitchedStyle, {left: CalculedStyle.right});
-    if(CalculedStyle.textAlign === "right")Object.assign(SwitchedStyle, {textAlign: "left"});
-    if(CalculedStyle.textAlign === "left")Object.assign(SwitchedStyle, {textAlign: "right"});
-    if(CalculedStyle.float === "right")Object.assign(SwitchedStyle, {float: "left"});
-    if(CalculedStyle.float === "left")Object.assign(SwitchedStyle, {float: "right"});
-    if(CalculedStyle.borderRadiusLeft!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.borderRadiusRight});
-    if(CalculedStyle.borderRadiusRight!=="0px")Object.assign(SwitchedStyle, {right: CalculedStyle.borderRadiusLeft});
-    if(["flex","inline-flex"].includes(CalculedStyle.display)){
-      if(CalculedStyle.justifyContent === "flex-end")Object.assign(SwitchedStyle, {justifyContent: "flex-start"});
-      if(CalculedStyle.justifyContent === "flex-start")Object.assign(SwitchedStyle, {justifyContent: "flex-end"});
-    }
-    return SwitchedStyle;
-  }
-  useRtl(switchAll = false){
-    switchAll ? this.style({
-      ...this.#SwitchedStyleRTL_LTR,
-      direction : "rtl"
-    }) : this.style({direction : "rtl"}); 
-    return this;
-  }
-  useLtr(switchAll = false){
-    switchAll ? this.style({
-      ...this.#SwitchedStyleRTL_LTR,
-      direction : "ltr"
-    }) : this.style({direction : "ltr"}); 
-    return this;
-  }
-  freeze(freeze){
-    this.cache.isFrozzen=freeze;
-    return this;
-  }
-  setTarget(tg) {
-    if(this.isBody) return ;
-    if (tg instanceof ZikoUIElement) tg = tg.element;
-    this.unrender();
-    this.target = tg;
-    this.render();
-    return this;
-  }
-  describe(label){
-    if(label)this.setAttr("aria-label",label);
-  }
-  clear(){
-    this?.items?.forEach(n=>n.unrender());
-    this.element.innerHTML = "";
-    return this;
-  }
-  render(target = this.target) {
-    if(this.isBody)return ;
-    if(target instanceof ZikoUIElement)target=target.element;
-    this.target=target;
-    this.target?.appendChild(this.element);
-    return this;
-  }
-  unrender(){
-    if(this.cache.parent)this.cache.parent.remove(this);
-    else if(this.target?.children?.length && [...this.target?.children].includes(this.element)) this.target.removeChild(this.element);
-    return this;
-  }
-  renderAfter(t = 1) {
-    setTimeout(() => this.render(), t);
-    return this;
-  }
-  unrenderAfter(t = 1) {
-    setTimeout(() => this.unrender(), t);
-    return this;
-  }
-  after(ui){
-    if(ui instanceof ZikoUIElement) ui=ui.element;
-    this.element?.after(ui);
-    return this;
-  }
-  before(ui){
-    if(ui instanceof ZikoUIElement) ui=ui.element;
-    this.element?.before(ui);
-    return this;
-  }
-  animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
-    this.element?.animate(keyframe,{duration, iterations, easing});
-    return this;
-  }
-    // Attributes
-  #setAttr(name, value){
-    name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
-    if(this?.attr[name] && this?.attr[name]===value) return;
-    this.element.setAttribute(name, value);
-    Object.assign(this.cache.attributes, {[name]:value});
-  }
-  setAttr(name, value) {
-    if(name instanceof Object){
-      const [names,values]=[Object.keys(name),Object.values(name)];
-      for(let i=0;i<names.length;i++){
-        if(values[i] instanceof Array)value[i] = values[i].join(" ");
-        this.#setAttr(names[i], values[i]);
-      }
-    }
-    else {
-      if(value instanceof Array)value = value.join(" ");
-      this.#setAttr(name, value);
-    }
-    return this;
-  }
-  removeAttr(...names) {
-    for(let i=0;i<names.length;i++)this.element?.removeAttribute(names[i]);
-    return this;
-  }
-  getAttr(name){
-    name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
-    return this.element.attributes[name].value;
-  }
-  setContentEditable(bool = true) {
-    this.setAttr("contenteditable", bool);
-    return this;
-  }
-  get children() {
-    return [...this.element.children];
-  }
-  get cloneElement() {
-    return this.element.cloneNode(true);
-  }
-  setClasses(...value) {
-    this.setAttr("class", value.join(" "));
-    return this;
-  }
-  get classes(){
-    const classes=this.element.getAttribute("class");
-    return classes===null?[]:classes.split(" ");
-  }
-  addClass() {
-    /*this.setAttr("class", value);
-        return this;*/
-  }
-  setId(id) {
-    this.setAttr("id", id);
-    return this;
-  }
-  get id() {
-    return this.element.getAttribute("id");
-  }
-  onPtrMove(...callbacks){
-    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
-    this.events.ptr.onMove(...callbacks);
-    return this;
-  }
-  onPtrDown(...callbacks){
-    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
-    this.events.ptr.onDown(...callbacks);
-    return this;
-  }
-  onPtrUp(...callbacks){
-    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
-    this.events.ptr.onUp(...callbacks);
-    return this;
-  }
-  onPtrEnter(...callbacks){
-    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
-    this.events.ptr.onEnter(...callbacks);
-    return this;
-  }
-  onPtrLeave(...callbacks){
-    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
-    this.events.ptr.onLeave(...callbacks);
-    return this;
-  }
-  onPtrOut(...callbacks){
-    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
-    this.events.ptr.onOut(...callbacks);
-    return this;
-  }
-  onPtrCancel(...callbacks){
-    if(!this.events.ptr)this.events.ptr = usePointerEvent(this);
-    this.events.ptr.onCancel(...callbacks);
-    return this;
-  }
-  onSwipe(width_threshold, height_threshold,...callbacks){
-    if(!this.events.swipe)this.events.swipe = useSwipeEvent(this, width_threshold, height_threshold);
-    this.events.swipe.onSwipe(...callbacks);
-    return this;
-  }
-  onMouseMove(...callbacks){
-    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
-    this.events.mouse.onMove(...callbacks);
-    return this;
-  }
-  onMouseDown(...callbacks){
-    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
-    this.events.mouse.onDown(...callbacks);
-    return this;
-  }
-  onMouseUp(...callbacks){
-    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
-    this.events.mouse.onUp(...callbacks);
-    return this;
-  }
-  onMouseEnter(...callbacks){
-    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
-    this.events.mouse.onEnter(...callbacks);
-    return this;
-  }
-  onMouseLeave(...callbacks){
-    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
-    this.events.mouse.onLeave(...callbacks);
-    return this;
-  }
-  onMouseOut(...callbacks){
-    if(!this.events.mouse)this.events.mouse = useMouseEvent(this);
-    this.events.mouse.onOut(...callbacks);
-    return this;
-  }
-  onWheel(...callbacks){
-    if(!this.events.wheel)this.events.wheel = useWheelEvent(this);
-    this.events.wheel.onWheel(...callbacks);
-    return this;
-  }
-  onKeyDown(...callbacks){
-    if(!this.events.key)this.events.key = useKeyEvent(this);
-    this.events.key.onDown(...callbacks);
-    return this;
-  }
-  onKeyPress(...callbacks){
-    if(!this.events.key)this.events.key = useKeyEvent(this);
-    this.events.key.onPress(...callbacks);
-    return this;
-  }
-  onKeyUp(...callbacks){
-    if(!this.events.key)this.events.key = useKeyEvent(this);
-    this.events.key.onUp(...callbacks);
-    return this;
-  }
-  onKeysDown({keys=[],callback}={}){
-    if(!this.events.key)this.events.key = useKeyEvent(this);
-    this.events.key.handleSuccessifKeys({keys,callback});
-    return this;
-  }
-  onDragStart(...callbacks){
-    if(!this.events.drag)this.events.drag = useDragEvent(this);
-    this.events.drag.onStart(...callbacks);
-    return this;
-  }
-  onDrag(...callbacks){
-    if(!this.events.drag)this.events.drag = useDragEvent(this);
-    this.events.drag.onDrag(...callbacks);
-    return this;
-  }
-  onDragEnd(...callbacks){
-    if(!this.events.drag)this.events.drag = useDragEvent(this);
-    this.events.drag.onEnd(...callbacks);
-    return this;
-  }
-  onDrop(...callbacks){
-    if(!this.events.drop)this.events.drop = useDropEvent(this);
-    this.events.drop.onDrop(...callbacks);
-    return this;
-  }
-  onClick(...callbacks){
-    if(!this.events.click)this.events.click = useClickEvent(this);
-    this.events.click.onClick(...callbacks);
-    return this;
-  }
-  onDbClick(...callbacks){
-    if(!this.events.click)this.events.click = useClickEvent(this);
-    this.events.click.onDbClick(...callbacks);
-    return this;
-  }
-  onCopy(...callbacks){
-    if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
-    this.events.clipboard.onCopy(...callbacks);
-    return this;
-  }
-  onCut(...callbacks){
-    if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
-    this.events.clipboard.onCut(...callbacks);
-    return this;
-  }
-  onPaste(...callbacks){
-    if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
-    this.events.clipboard.onPaste(...callbacks);
-    return this;
-  }
-  onSelect(...callbacks){
-    if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
-    this.events.clipboard.onSelect(...callbacks);
-    return this;
-  }
-  onFocus(...callbacks){
-    if(!this.events.focus)this.events.focus = useFocusEvent(this);
-    this.events.focus.onFocus(...callbacks);
-    return this;
-  }
-  onBlur(...callbacks){
-    if(!this.events.focus)this.events.focus = useFocusEvent(this);
-    this.events.focus.onFocus(...callbacks);
-    return this;
-  }
-  on(event_name,...callbacks){
-    if(!this.events.custom)this.events.custom = useCustomEvent(this);
-    this.events.custom.on(event_name,...callbacks);
-    return this;
-  }
-  emit(event_name,detail={}){
-    if(!this.events.custom)this.events.custom = useCustomEvent(this);
-    this.events.custom.emit(event_name,detail);
-    return this;
-  }
-  watchAttr(callback){
-    if(!this.observer.attr)this.observer.attr = watchAttr(this,callback);
-    return this;
-  }
-  watchChildren(callback){
-    if(!this.observer.children)this.observer.children = watchChildren(this,callback);
-    return this;
-  }
-  watchSize(callback){
-    if(!this.observer.resize)this.observer.resize = watchSize(this,callback);
-    this.observer.resize.start();
-    return this;
-  }
-  watchIntersection(callback,config){
-    if(!this.observer.intersection)this.observer.intersection = watchIntersection(this,callback,config);
-    this.observer.intersection.start();
-    return this;
-  }
-  setFullScreen(set = true, e) {
-    if(!this.element.requestFullscreen){
-      console.error("Fullscreen API is not supported in this browser.");
-      return this;
-    }
-    if (set) this.element.requestFullscreen(e);
-    else globalThis.document.exitFullscreen();
-    return this;
-  }
-  toggleFullScreen(e) {
-    if (!globalThis.document.fullscreenElement) this.element.requestFullscreen(e);
-    else globalThis.document.exitFullscreen();
-    return this;
-  }
-  toPdf(){
-    if(__ZikoPdf__);
-    return this;
-  }
-}
-
-// import svgRect from "./Elements/rect.js";
-// import svgCircle from "./Elements/circle.js";
-// import svgEllipse from "./Elements/ellipse.js";
-// import svgLine from "./Elements/line.js";
-// //import svgPath from "./Elements/path.js";
-// import svgPolygon from "./Elements/polygon.js";
-// import svgImage from "./Elements/image.js";
-// import svgText from "./Elements/text.js";
-// import svgGroupe from "./Elements/groupe.js";
-// import svgLink from "./Elements/link.js";
-// //import svgObject from "./Elements/foreignObject.js";
-// //import svgGrid from "./Elements/grid.js";
-
-  class ZikoUISvg extends ZikoUIElement {
-    constructor(w=360,h=300) {
-      super("svg","svg");
-      //this.cache={};
-      this.setAttr("width",w);
-      this.setAttr("height",h);
-      this.style({border:"1px black solid"});
-      //this.view(-w/2,-h/2,w/2,h/2)
-      this.view(-10,-10,10,10);
-    }
-    view(x1,y1,x2,y2){
-      let width=Math.abs(x2-x1);
-      let height=Math.abs(y2-y1);
-      this.setAttr("viewBox",[x1,y1,width,height].join(" "));
-      this.st.scaleY(-1);
-      return this;
-    }
-    add(...svgElement){
-      for(let i=0;i<svgElement.length;i++){
-        this.element?.appendChildddddddd(svgElement[i].element);
-        this.items.push(svgElement[i]);
-      }
-      this.maintain();
-      return this;
-    }
-    remove(...svgElement){
-      for(let i=0;i<svgElement.length;i++){
-        this.element?.removeChild(svgElement[i].element);
-        this.items=this.items.filter(n=>!svgElement);
-      }
-      this.maintain();
-      return this;     
-    }
-    // text(text,x,y){
-    //   let item=svgText(text,x,y);
-    //   this.element?.appendChildd(item.element);
-    //   item.x(x-item.element.getComputedTextLength()/2);
-    //   return item;
-    // }
-    // rect(x,y,w,h){
-    //   let item=svgRect(x,y,w,h);
-    //   this.add(item);
-    //   return item;
-    // }
-    // line(x1,y1,x2,y2){
-    //   let item=svgLine(x1,y1,x2,y2);
-    //   this.element?.appendChildd(item.element);
-    //   return item;
-    // }
-    // circle(cx,cy,r){
-    //   let item=svgCircle(cx,cy,r);
-    //   this.element?.appendChildd(item.element);
-    //   return item;
-    // }
-    // ellipse(cx,cy,rx,ry){
-    //   let item=svgEllipse(cx,cy,rx,ry);
-    //   this.element?.appendChildd(item.element);
-    //   return item;
-    // }
-    // polygon(X,Y){
-    //   let item=svgPolygon(X,Y);
-    //   this.element?.appendChildd(item.element);
-    //   item.addPoints(X,Y)
-    //   return item;
-    // }
-    // image(src,w,h,x,y){
-    //   let item=svgImage(src,w,h,x,y);
-    //   this.element?.appendddChild(item.element);
-    //   return item;
-    // }
-    mask(){
-  
-    }
-    toString(){
-      return  (new XMLSerializer()).serializeToString(this.element);
-    }
-    btoa(){
-      return btoa(this.toString())
-    }
-    toImg(){
-      return 'data:image/svg+xml;base64,'+this.btoa()
-    }
-    toImg2(){
-      return "data:image/svg+xml;charset=utf8,"+this.toString().replaceAll("<","%3C").replaceAll(">","%3E").replaceAll("#","%23").replaceAll('"',"'");
-    }
-  }
-
-  const Svg =(w,h)=>new ZikoUISvg(w,h);
-
-class ZikoSvgElement {
-  constructor(type) {
-    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 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 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 cx(){
+      return this.element.baseVal.value;
     } 
     get cy(){
       return this.element.baseVal.value;
@@ -12525,150 +11457,64 @@ class ZikoSvgEllipse extends ZikoSvgElement{
   } 
 const svgEllipse=(x,y,rx,ry)=>new ZikoSvgEllipse(x,y,rx,ry);
 
-class ZikoSvgLine extends ZikoSvgElement{
-    constructor(x1,y1,x2,y2){
-      super();
+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",
-        "line",
+        "foreignObject",
       );
-      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;
+      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);
     } 
-  } 
-const svgLine=(x1,y1,x2,y2)=>new ZikoSvgLine(x1,y1,x2,y2);
-
-class ZikoSvgPolyLine extends ZikoSvgElement{}
-const svgPolyLine=(X,Y)=>new ZikoSvgPolyLine(X,Y);
-
-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();
+    width(w){
+        this.element.etAttribute("width",w);
         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();
+    height(h){
+        this.element.etAttribute("height",h);
         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);
+    add(...ZikoUIElement){
+      this.container.append(...ZikoUIElement);
       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;
-    }
+    remove(...ZikoUIElement){
+      this.container.append(...ZikoUIElement);
+      return this;   
+      }
   } 
-const svgPolygon=(X,Y)=>new ZikoSvgPolygon(X,Y);
+const svgObject=(x, y, w, h)=>new ZikoSvgForeignObject(x, y, w, h);
 
-class ZikoSvgText extends ZikoSvgElement{
-    constructor(text,x,y){
+class ZikoSvgGroupe extends ZikoSvgElement{
+    constructor(...svgElement){
       super();
+      this.items=[];
       this.element=document?.createElementNS(
         "http://www.w3.org/2000/svg",
-        "text",
+        "g",
       );
-      this.setText(text);
-      this.x(x).y(y);
-    }
-    x(x){
-       this.element?.setAttribute("x",x);
-       return this;
+      this.add(...svgElement);
     }
-    y(y){
-       this.element?.setAttribute("y",y);
-       return this;
+    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;
     }
-    setText(text=""){
-      this.element.textContent=text;
-      return this;
+    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 svgText=(text,x,y)=>new ZikoSvgText(text,x,y);
+}
+const svgGroupe=(...svgElement)=>new ZikoSvgGroupe(...svgElement);
 
 class ZikoSvgImage extends ZikoSvgElement{
     constructor(src="",w="100%",h="100%",x=0,y=0){
@@ -12702,64 +11548,33 @@ class ZikoSvgImage extends ZikoSvgElement{
   } 
 const svgImage=(src,w,h,x,y)=>new ZikoSvgImage(src,w,h,x,y);
 
-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,r)=>new ZikoSvgForeignObject(x,y,r);
-
-class ZikoSvgGroupe extends ZikoSvgElement{
-    constructor(...svgElement){
+class ZikoSvgLine extends ZikoSvgElement{
+    constructor(x1,y1,x2,y2){
       super();
-      this.items=[];
       this.element=document?.createElementNS(
         "http://www.w3.org/2000/svg",
-        "g",
+        "line",
       );
-      this.add(...svgElement);
+      this.x1(x1).y1(y1).x2(x2).y2(y2).stroke("black");
     }
-    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;
+    x1(x1){
+       this.element.x1.baseVal.value=x1;
+       return this;
     }
-    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;     
+    y1(y1){
+       this.element.y1.baseVal.value=y1;
+       return this;
     }
-}
-const svgGroupe=(...svgElement)=>new ZikoSvgGroupe(...svgElement);
+    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){
@@ -12790,511 +11605,269 @@ class ZikoSvgLink extends ZikoSvgElement{
 }
 const svgLink=(href,...svgElement)=>new ZikoSvgLink(href,...svgElement);
 
-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
-};
-
-class ZikoUICanvas extends ZikoUIContainerElement{
-    constructor(w,h){
-        super("canvas","canvas");
-        //this.element=document?.createElement("canvas");
-        this.ctx = this.element?.getContext("2d");
-        this.style({
-            border:"1px red solid",
-            //width:"300px",
-            //height:"300px"
-        });
-        this.transformMatrix=new Matrix([
-            [1,0,0],
-            [0,1,0],
-            [0,0,1]
-        ]);
-        this.axisMatrix=new Matrix([
-            [-10,-10],
-            [10,10]
-        ]);
-        // this.render(globalThis.__Ziko__.__Config__.default.render);
-        setTimeout(()=>this.resize(w,h),0);
-        this.on("sizeupdated",()=>this.adjust());
-    }
-    get Width(){
-        return this.element?.width;
-    }
-    get Height(){
-        return this.element?.height;
-    }
-    get Xmin(){
-        return this.axisMatrix[0][0];
-    }
-    get Ymin(){
-        return this.axisMatrix[0][1];
-    }
-    get Xmax(){
-        return this.axisMatrix[1][0];
-    }
-    get Ymax(){
-        return this.axisMatrix[1][1];
-    }
-    get ImageData(){
-        return this.ctx.getImageData(0,0,c.Width,c.Height);
-    }
-    draw(all=true){
-        if(all){
-            this.clear();  
-            this.items.forEach(element => {
-                element.parent=this;
-                element.draw(this.ctx);
-            });
-        }
-        else {
-            this.items.at(-1).parent=this;
-            this.items.at(-1).draw(this.ctx);
-        }
-        this.maintain();
-        return this;
-    }
-    applyTransformMatrix(){
-        this.ctx.setTransform(
-            this.transformMatrix[0][0],
-            this.transformMatrix[1][0],
-            this.transformMatrix[0][1],
-            this.transformMatrix[1][1],
-            this.transformMatrix[0][2],
-            this.transformMatrix[1][2],
-        );
-        return this;
+class ZikoSvgPath extends ZikoSvgElement{
+    constructor(){
+    super();
+      this.element=document?.createElementNS(
+        "http://www.w3.org/2000/svg",
+        "path",
+      );
+      this.path="";
+      
     }
-    resize(w,h){
-        // this.style({
-        //     width:w,
-        //     height:h
-        // })
-        this.size(w,h);
-        this.lineWidth();
-        this.view(this.axisMatrix[0][0], this.axisMatrix[0][1], this.axisMatrix[1][0], this.axisMatrix[1][1]);
-        this.emit("sizeupdated");
-        return this;
-    }
-    adjust(){
-        this.element.width =this.element?.getBoundingClientRect().width;
-        this.element.height =this.element?.getBoundingClientRect().height;
-        this.view(this.axisMatrix[0][0], this.axisMatrix[0][1], this.axisMatrix[1][0], this.axisMatrix[1][1]);
-        return this;
-    }
-    view(xMin,yMin,xMax,yMax){
-        this.transformMatrix[0][0]=this.Width/(xMax-xMin); // scaleX
-        this.transformMatrix[1][1]=-this.Height/(yMax-yMin); // scaleY
-        this.transformMatrix[0][2]=this.Width/2;
-        this.transformMatrix[1][2]=this.Height/2;
-        this.axisMatrix=new Matrix([
-            [xMin,yMin],
-            [xMax,yMax]
-        ]);
-        
-        this.applyTransformMatrix(); 
-        this.clear();
-        this.lineWidth(1);
-        this.draw();
+    setPath(){
+        this.element.etAttribute("d",this.path);
         return this;
     }
-    reset(){
-        this.ctx.setTransform(1,0,0,0,0,0);
+    clear(){
+        this.path="";
+        this.setPath();
         return this;
     }
-    append(element){
-        this.items.push(element);
-        this.draw(false);
+    moveTo(x,y){
+        this.path+=`M${x} ${y} `;
+        this.setPath();
         return this;
     }
-    background(color){
-        this.ctx.fillStyle = color;
-        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
-        this.ctx.fillRect(0, 0, this.Width, this.Height);
-        this.applyTransformMatrix();
-        this.draw();
-    }
-    lineWidth(w){
-        this.ctx.lineWidth=w/this.transformMatrix[0][0];
-        return this
-    }
-    getImageData(x=0,y=0,w=this.Width,h=this.Height){
-        return this.ctx.getImageData(x,y,w,h);
-    }
-    clear(){
-        this.ctx.setTransform(1, 0, 0, 1, 0, 0);
-        this.ctx.clearRect(0, 0, this.Width, this.Height);
-        this.applyTransformMatrix(); 
-        return this;
-    }
-    clone(){
-        console.log(this.Width);
-        const canvas=new ZikoUICanvas();
-        canvas.items=this.items;
-        canvas.transformMatrix=this.transformMatrix;
-        canvas.axisMatrix=this.axisMatrix;
-        Object.assign(canvas.cache,{...this.cache});
-        //waitForUIElm(this)
-        //console.log(element)
-        this.size(this.element.style.width,this.element.style.width);
-        this.applyTransformMatrix();
-        this.draw();
-        this.adjust();
-        return canvas;
-    }
-    toImage() {
-        this.img = document?.createElement("img");
-        this.img.src = this.element?.toDataURL("image/png");
-        return this;
-    }
-    toBlob() {
-        var canvas = this.element;
-        canvas.toBlob(function (blob) {
-            var newImg = document?.createElement("img"),
-                url = URL.createObjectURL(blob);
-            newImg.onload = function () {
-                URL.revokeObjectURL(url);
-            };
-            newImg.src = url;
-            console.log(newImg);
-        });
-    }
-    zoomIn(){
-
-    }
-    zoomOut(){
-        
-    }
-    undo(n){
-
-    }
-    redo(n){
-
-    }
-    stream(){
-
-    }
-}
-
-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();
+    lineTo(x,y){
+        this.path+=`L${x} ${y} `;
+        this.setPath();
         return this;
     }
-    posY(y){
-        this.position.y=y;
-        if(this.parent)this.parent.draw();
+    hr(x){
+        this.path+=`H${x} `;
+        this.setPath();
         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();
+    vr(y){
+        this.path+=`V${y} `;
+        this.setPath();
         return this;
     }
-    translate(dx=0,dy=0){
-        this.position.x+=dx;
-        this.position.y+=dy;
-        if(this.parent)this.parent.draw();
-        return;
+    bezier(x1,y1,x2,y2,x,y){
+        this.path+=`C ${x1} ${y1},${x2} ${y2},${x} ${y} `;
+        this.setPath();
+        return this;      
     }
-    applyNormalStyle(ctx){
-        ctx.strokeStyle=this.cache.style.normal.strokeColor;
-        ctx.fillStyle=this.cache.style.normal.fillColor;
-        return this;   
+    quadratic(x1,y1,x,y){
+        this.path+=`Q ${x1} ${y1} ${x} ${y} `;
+        this.setPath();
+        return this;      
     }
-    applyHighlightedStyle(ctx){
-        ctx.strokeStyle=this.cache.style.highlighted.strokeColor;
-        ctx.fillStyle=this.cache.style.highlighted.fillColor;
+    close(){
+        this.path+="Z";
+        this.setPath();
         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  
+}
+
+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);
     }
-    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;      
+    addPoint(x,y){
+      let p=this.element.parentElement.createSVGPoint();
+      p.x=x;
+      p.y=y;
+      this.element.points.appendItem(p);
+      return this;
     }
-    render(render=true){
-       this.cache.config.rendered=render;
-       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 CanvasArc extends ZikoCanvasElement{
-    constructor(x,y,r,angle){
-        super(x,y);
-        this.r=r;
-        this.angle=angle;
-        this.path=null;
+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;
     }
-    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;   
+    setX(x){
+       this.element.x.baseVal.value=x;
+       this.x=x;
+       return this;
     }
-    radius(r){
-        this.r=r;
-        if(this.parent)this.parent.draw();
-        return this;
+    setY(y){
+       this.element.y.baseVal.value=y;
+       this.y=y;
+       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);
+    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 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;
+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);
     }
-    fromXY(X,Y){
-        this.pointsMatrix=matrix([X,Y]);
-        return this;
+    x(x){
+       this.element?.setAttribute("x",x);
+       return this;
     }
-    push(ptsX,ptsY){
-        this.pointsMatrix.hstack(matrix([ptsX,ptsY]));
-        if(this.parent)this.parent.draw();
-        return this;
+    y(y){
+       this.element?.setAttribute("y",y);
+       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;
+    setText(text=""){
+      this.element.textContent=text;
+      return this;
     }
-}
+  } 
+const svgText=(text,x,y)=>new ZikoSvgText(text,x,y);
 
-const canvasPoints=(ptsX=[],ptsY=[])=>new CanvasPoints(ptsX,ptsY);
+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
+};
 
-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);
+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
+});
 
-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);
-
-const Graphics={
-    Svg,
-    ZikoUISvg,
-    svgCircle,
-    svgEllipse,
-    svgImage,
-    svgLine,
-    svgPolygon,
-    svgRect,
-    svgText,
-    svgGroupe,
-    svgLink,
-    svgGrid,
-    svgObject,
-    svgPath,
-    Canvas, 
-    canvasArc,
-    canvasCircle,
-    canvasPoints,
-    canvasLine,
-    canvasRect,
-    ExtractAll: function () {
-        const keys = Object.keys(this);
-        for (let i = 0; i < keys.length; i++) {
-            const key = keys[i];
-            if (key !== 'ExtractAll' && key !== 'RemoveAll') {
-                globalThis[key] = this[key];
-            }
-        }
-        return this;
-    },
-    RemoveAll: function () {
-        const keys = Object.keys(this);
-        for (let i = 0; i < keys.length; i++) {
-            const key = keys[i];
-            if (key !== 'RemoveAll') {
-                delete globalThis[key];
-            }
-        }
-        return this;
-    }
+// import{
+//     Svg,
+//     ZikoUISvg,
+//     svgCircle,
+//     svgEllipse,
+//     svgImage,
+//     svgLine,
+//     svgPolygon,
+//     svgRect,
+//     svgText,
+//     svgGroupe,
+//     svgLink,
+//     svgGrid,
+//     svgObject,
+//     svgPath
+// } from "./svg/index.js";
+// import {
+//     Canvas,
+//     canvasArc,
+//     canvasCircle,
+//     canvasPoints,
+//     canvasLine,
+//     canvasRect
+// } from "./canvas/index.js";
+// const Graphics={
+//     Svg,
+//     ZikoUISvg,
+//     svgCircle,
+//     svgEllipse,
+//     svgImage,
+//     svgLine,
+//     svgPolygon,
+//     svgRect,
+//     svgText,
+//     svgGroupe,
+//     svgLink,
+//     svgGrid,
+//     svgObject,
+//     svgPath,
+//     Canvas, 
+//     canvasArc,
+//     canvasCircle,
+//     canvasPoints,
+//     canvasLine,
+//     canvasRect,
+//     ExtractAll: function () {
+//         const keys = Object.keys(this);
+//         for (let i = 0; i < keys.length; i++) {
+//             const key = keys[i];
+//             if (key !== 'ExtractAll' && key !== 'RemoveAll') {
+//                 globalThis[key] = this[key];
+//             }
+//         }
+//         return this;
+//     },
+//     RemoveAll: function () {
+//         const keys = Object.keys(this);
+//         for (let i = 0; i < keys.length; i++) {
+//             const key = keys[i];
+//             if (key !== 'RemoveAll') {
+//                 delete globalThis[key];
+//             }
+//         }
+//         return this;
+//     }
+// }
+// export * from "./svg/index.js"
+// export * from "./canvas/index.js"
+// export default Graphics;
+
+const Graphics = {
+    ...SVG
 };
 
 class ZikoApp {
@@ -13630,7 +12203,8 @@ const App={
     UI$1,
     Time,
     Data,
-    Reactivity
+    Reactivity,
+    Graphics
 ].forEach(n=>Object.assign(n,{
     ExtractAll:()=>__ExtractAll__(n),
     RemoveAll:()=>__RemoveAll__(n)
@@ -13693,7 +12267,6 @@ exports.Article = Article;
 exports.Aside = Aside;
 exports.Base = Base;
 exports.Breadcrumbs = Breadcrumbs;
-exports.Canvas = Canvas;
 exports.Carousel = Carousel;
 exports.CodeCell = CodeCell;
 exports.CodeNote = CodeNote;
@@ -13734,6 +12307,16 @@ exports.ZikoApp = ZikoApp;
 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;
@@ -13742,10 +12325,11 @@ 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.ZikoUIFooter = ZikoUIFooter;
@@ -13818,11 +12402,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;
@@ -13959,7 +12538,6 @@ exports.svgLine = svgLine;
 exports.svgLink = svgLink;
 exports.svgObject = svgObject;
 exports.svgPath = svgPath;
-exports.svgPolyLine = svgPolyLine;
 exports.svgPolygon = svgPolygon;
 exports.svgRect = svgRect;
 exports.svgText = svgText;