ziko 0.45.0 → 0.45.2

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sat Aug 30 2025 10:47:14 GMT+0100 (UTC+01:00)
+  Date : Mon Sep 01 2025 13:22:11 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
@@ -255,17 +255,17 @@
             }
         }
     };
-    const map=(value, a, b, c, d)=>{
+    const map$1=(value, a, b, c, d)=>{
         if (typeof value === "number") return lerp(norm(value, a, b), c, d);
-        else if (value instanceof Matrix) return new Matrix(value.rows, value.cols, map(value.arr.flat(1), a, b, c, d));
-        else if (value instanceof Complex) return new Complex(map(value.a, b, c, d), map(value.b, a, b, c, d));
+        else if (value instanceof Matrix) return new Matrix(value.rows, value.cols, map$1(value.arr.flat(1), a, b, c, d));
+        else if (value instanceof Complex) return new Complex(map$1(value.a, b, c, d), map$1(value.b, a, b, c, d));
         else if (value instanceof Array) {
             if (value.every((n) => typeof (n === "number"))) {
-                return value.map((n) => map(n, a, b, c, d));
+                return value.map((n) => map$1(n, a, b, c, d));
             } else {
                 let y = new Array(value.length);
                 for (let i = 0; i < value.length; i++) {
-                    y[i] = map(value[i], a, b, c, d);
+                    y[i] = map$1(value[i], a, b, c, d);
                 }
             }
         }
@@ -538,7 +538,7 @@
         nums,
         norm,
         lerp,
-        map,
+        map: map$1,
         clamp,
         arange,
         linspace,
@@ -1080,47 +1080,6 @@
 
     // globalThis.node = (node) => new UINode(node);
 
-    function register_to_class(target, ...mixins){
-        mixins.forEach(n => _register_to_class_(target, n));
-    }
-    function _register_to_class_(target, mixin) {
-      const descriptors = Object.getOwnPropertyDescriptors(mixin);
-      for (const key of Reflect.ownKeys(descriptors)) {
-        const desc = descriptors[key];
-        if ('get' in desc || 'set' in desc || typeof desc.value !== 'function') {
-          Object.defineProperty(Object.getPrototypeOf(target), key, desc);
-        } else if (typeof desc.value === 'function') {
-          if (!Object.getPrototypeOf(target).hasOwnProperty(key)) {
-            Object.defineProperty(Object.getPrototypeOf(target), key, desc);
-          }
-        }
-      }
-    }
-
-    function register_to_instance(target, ...mixins){
-        mixins.forEach(n => _register_to_instance_(target, n));
-    }
-    function _register_to_instance_(instance, mixin) {
-      const descriptors = Object.getOwnPropertyDescriptors(mixin);
-
-      for (const key of Reflect.ownKeys(descriptors)) {
-        const desc = descriptors[key];
-
-        if ('get' in desc || 'set' in desc) {
-          Object.defineProperty(instance, key, desc);
-        } else if (typeof desc.value === 'function') {
-          instance[key] = desc.value.bind(instance);
-        } else {
-          instance[key] = desc.value;
-        }
-      }
-    }
-
-    const register = (target, ...mixins) => {
-      if(typeof target === 'function') register_to_class(target, ...mixins);
-      else register_to_instance(target, ...mixins);
-      };
-
     function parseQueryParams$1(queryString) {
         const params = {};
         queryString.replace(/[A-Z0-9]+?=([\w|:|\/\.]*)/gi, (match) => {
@@ -1243,11 +1202,261 @@
         }
     }
 
+    __init__global__();
+    class UIElementCore extends UINode{
+      constructor(){
+        super();
+      }
+      init(element, name, type, render, isInteractive = [true, false][Math.floor(2*Math.random())]){
+        this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
+        if(typeof element === "string") {
+          switch(type){
+            case "html" : {
+              element = globalThis?.document?.createElement(element);
+              console.log('1');
+            } break;
+            case "svg" : {
+              element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element); 
+              console.log('2');
+            } break;
+            default : throw Error("Not supported")
+          }
+        }
+        else this.target = element?.parentElement;
+        Object.assign(this.cache, {
+          name,
+          isInteractive,
+          parent:null,
+          isBody:false,
+          isRoot:false,
+          isHidden: false,
+          isFrozzen:false,
+          legacyParent : null,
+          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
+        };
+        if(element) Object.assign(this.cache,{element});
+        // useDefaultStyle && this.style({ 
+        //   position: "relative",
+        //   boxSizing:"border-box",
+        //   margin:0,
+        //   padding:0,
+        //   width : "auto",
+        //   height : "auto"
+        //  });
+        this.items = new UIStore();
+        globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
+        element && render && this?.render?.();
+        if(
+          // globalThis.__Ziko__.__Config__.renderingMode !== "spa" 
+          // && 
+          // !globalThis.__Ziko__.__Config__.isSSC
+          // && 
+          this.isInteractive()){
+          // this.setAttr("ziko-hydration-index", globalThis.__Ziko__.__HYDRATION__.index);
+          // this.element.setAttribute('ziko-hydration-index', globalThis.__Ziko__.__HYDRATION__.index)
+          globalThis.__Ziko__.__HYDRATION__.register(() => this);
+        }
+        globalThis.__Ziko__.__UI__.push(this);
+      }
+      get element(){
+        return this.cache.element;
+      }
+        [Symbol.iterator]() {
+        return this.items[Symbol.iterator]();
+      }
+      maintain() {
+        for (let i = 0; i < this.items.length; i++) {
+          Object.defineProperty(this, i, {
+            value: this.items[i],
+            writable: true,
+            configurable: true,
+            enumerable: false 
+            });
+        }
+      }
+      isInteractive(){
+        return this.cache.isInteractive;
+      }
+      isUIElement(){
+        return true;
+      }
+    //   get st(){
+    //     return this.cache.style;
+    //   }
+    //   get attr(){
+    //     return this.cache.attributes;
+    //   }
+    //   get evt(){
+    //     return this.events;
+    //   }
+    //   get html(){
+    //     return this.element.innerHTML;
+    //   }
+    //   get text(){
+    //     return this.element.textContent;
+    //   }
+    //   get isBody(){
+    //     return this.element === globalThis?.document.body;
+    //   }
+    //   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) {
+    //     // 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);
+    //   }
+
+    //   freeze(freeze){
+    //     this.cache.isFrozzen=freeze;
+    //     return this;
+    //   }
+      // setTarget(tg) {
+      //   if(this.isBody) return ;
+      //   if (tg?.isUIElement) tg = tg.element;
+      //   this.unrender();
+      //   this.target = tg;
+      //   this.render();
+      //   return this;
+      // }
+    //   describe(label){
+    //     if(label)this.setAttr("aria-label",label)
+    //   }
+    //   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");
+    //   }
+    //   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;
+    //   }
+      // To Fix
+      // onKeysDown({keys=[],callback}={}){
+      //   if(!this.events.key)this.events.key = useKeyEvent(this);
+      //   this.events.key.handleSuccessifKeys({keys,callback});
+      //   return this;
+      // }
+      // onSelect(...callbacks){
+      //   if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
+      //   this.events.clipboard.onSelect(...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;
+    //   }
+
+    }
+
+    function register_to_class(target, ...mixins){
+        mixins.forEach(n => _register_to_class_(target, n));
+    }
+    function _register_to_class_(target, mixin) {
+      const descriptors = Object.getOwnPropertyDescriptors(mixin);
+      for (const key of Reflect.ownKeys(descriptors)) {
+        const desc = descriptors[key];
+        if ('get' in desc || 'set' in desc || typeof desc.value !== 'function') {
+          Object.defineProperty(Object.getPrototypeOf(target), key, desc);
+        } else if (typeof desc.value === 'function') {
+          if (!Object.getPrototypeOf(target).hasOwnProperty(key)) {
+            Object.defineProperty(Object.getPrototypeOf(target), key, desc);
+          }
+        }
+      }
+    }
+
     if(!globalThis.__Ziko__) __init__global__();
 
         // HMR persistence
-    if (undefined) {
-        undefined.data.__Ziko__ = undefined.data.__Ziko__ || globalThis.__Ziko__;
+    if (undefined?.data) {
+        undefined.data.__Ziko__ = undefined.data?.__Ziko__ || globalThis?.__Ziko__;
         globalThis.__Ziko__ = undefined.data.__Ziko__;
         // import.meta.hot.accept(n=>console.log(n));
         // console.log(import.meta.hot.data.__Ziko__.__State__.store)
@@ -1305,58 +1514,14 @@
         return typeof arg === 'function' && arg?.()?.isStateGetter?.();
     };
 
-    const camel2hyphencase = (text = '') => text.replace(/[A-Z]/g, match => '-' + match.toLowerCase());
+    const camel2hyphencase$1 = (text = '') => text.replace(/[A-Z]/g, match => '-' + match.toLowerCase());
 
-    const is_camelcase = (text = '') =>{
+    const is_camelcase$1 = (text = '') =>{
         if (text.length === 0) return false; 
         const camelCasePattern = /^[a-z][a-zA-Z0-9]*$/;
         return camelCasePattern.test(text);
     };
 
-    // To Do add getter, watchAttr
-    const AttrsMethods = {
-      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(" ");
-            _set_attrs_.call(this, names[i], values[i]);
-          }
-        }
-        else {
-          if(value instanceof Array) value = value.join(" ");
-          _set_attrs_.call(this, name, value);
-        }
-        return this;
-      },
-      removeAttr(...names) {
-        for(let i=0;i<names.length;i++)this.element?.removeAttribute(names[i]);
-        return this;
-      },
-      getAttr(name){
-        name = is_camelcase(name) ? camel2hyphencase(name) : name;
-        return this.element.attributes[name].value;
-      },
-      setContentEditable(bool = true) {
-        this.setAttr("contenteditable", bool);
-        return this;
-      }
-    };
-
-    function _set_attrs_(name, value){
-        if(this.element?.tagName !== "svg") name = is_camelcase(name) ? camel2hyphencase(name) : name;
-        if(this?.attr[name] && this?.attr[name]===value) return;
-        if(isStateGetter(value)){
-            const getter = value();
-            getter._subscribe(
-                (newValue) => this.element?.setAttribute(name, newValue),
-                this 
-            );
-        }
-        else this.element?.setAttribute(name, value);
-        Object.assign(this.cache.attributes, {[name]:value});   
-    }
-
     class ZikoUIText extends UINode {
         constructor(...value) {
           super("span", "text", false, ...value);
@@ -1368,75 +1533,6 @@
     }
     const text = (...str) => new ZikoUIText(...str);
 
-    const DomMethods = {
-      append(...ele) {
-        __addItem__.call(this, "append", "push", ...ele);
-        return this;
-      },
-      prepend(...ele) {
-        this.__addItem__.call(this, "prepend", "unshift", ...ele);
-        return this;
-      },
-      insertAt(index, ...ele) {
-        if (index >= this.element.children.length) this.append(...ele);
-        else
-          for (let i = 0; i < ele.length; i++) {
-            if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-            this.element?.insertBefore(ele[i].element, this.items[index].element);
-            this.items.splice(index, 0, ele[i]);
-          }
-        return this;
-      },
-      remove(...ele) {
-        const remove = (ele) => {
-          if (typeof ele === "number") ele = this.items[ele];
-          if (ele?.isZikoUIElement) this.element?.removeChild(ele.element);
-          this.items = this.items.filter((n) => n !== ele);
-        };
-        for (let i = 0; i < ele.length; i++) remove(ele[i]);
-        for (let i = 0; i < this.items.length; i++)
-          Object.assign(this, { [[i]]: this.items[i] });
-        // Remove from item
-        return this;
-      },
-      clear(){
-        this?.items?.forEach(n=>n.unrender());
-        this.element.innerHTML = "";
-        return this;
-      },
-      render(target = this.target) {
-        if(this.isBody)return ;
-        if(target?.isZikoUIElement)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?.isZikoUIElement) ui=ui.element;
-        this.element?.after(ui);
-        return this;
-      },
-      before(ui){
-        if(ui?.isZikoUIElement) ui=ui.element;
-        this.element?.before(ui);
-        return this;
-      }
-
-    };
-
     async function __addItem__(adder, pusher, ...ele) {
       if (this.cache.isFrozzen) {
         console.warn("You can't append new item to frozzen element");
@@ -1481,12 +1577,147 @@
       }
       this.maintain();
       return this;
+    }
+    function _set_attrs_(name, value){
+        if(this.element instanceof globalThis?.SVGAElement) name = is_camelcase$1(name) ? camel2hyphencase$1(name) : name;
+        if(this?.attr[name] && this?.attr[name]===value) return;
+        if(isStateGetter(value)){
+            const getter = value();
+            getter._subscribe(
+                (newValue) => this.element?.setAttribute(name, newValue),
+                this 
+            );
+        }
+        else this.element?.setAttribute(name, value);
+        Object.assign(this.cache.attributes, {[name]:value});   
+    }
+
+    // import { 
+    //   is_camelcase,
+    //   camel2hyphencase
+    //  } from '../../data/string/index.js'
+
+    function 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(" ");
+          _set_attrs_.call(this, names[i], values[i]);
+        }
+      }
+      else {
+        if(value instanceof Array) value = value.join(" ");
+        _set_attrs_.call(this, name, value);
+      }
+      return this;
+    }
+    function removeAttr(...names) {
+      for(let i=0;i<names.length;i++)this.element?.removeAttribute(names[i]);
+      return this;
+    }
+    function getAttr(name){
+      name = is_camelcase(name) ? camel2hyphencase(name) : name;
+      return this.element.attributes[name].value;
+    }
+    function setContentEditable(bool = true) {
+      this.setAttr("contenteditable", bool);
+      return this;
+    }
+
+    var AttrsMethods = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        getAttr: getAttr,
+        removeAttr: removeAttr,
+        setAttr: setAttr,
+        setContentEditable: setContentEditable
+    });
+
+    function append(...ele) {
+      __addItem__.call(this, "append", "push", ...ele);
+      return this;
+    }
+    function prepend(...ele) {
+      this.__addItem__.call(this, "prepend", "unshift", ...ele);
+      return this;
+    }
+    function insertAt(index, ...ele) {
+      if (index >= this.element.children.length) this.append(...ele);
+      else
+        for (let i = 0; i < ele.length; i++) {
+          if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
+          this.element?.insertBefore(ele[i].element, this.items[index].element);
+          this.items.splice(index, 0, ele[i]);
+        }
+      return this;
+    }
+    function remove(...ele) {
+      const remove = (ele) => {
+        if (typeof ele === "number") ele = this.items[ele];
+        if (ele?.isUIElement) this.element?.removeChild(ele.element);
+        this.items = this.items.filter((n) => n !== ele);
+      };
+      for (let i = 0; i < ele.length; i++) remove(ele[i]);
+      for (let i = 0; i < this.items.length; i++)
+        Object.assign(this, { [[i]]: this.items[i] });
+      // Remove from item
+      return this;
+    }
+    function clear(){
+      this?.items?.forEach(n=>n.unrender());
+      this.element.innerHTML = "";
+      return this;
+    }
+    function render(target = this.target) {
+      if(this.isBody)return ;
+      if(target?.isUIElement)target=target.element;
+      this.target=target;
+      this.target?.appendChild(this.element);
+      return this;
+    }
+    function 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;
+    }
+    function renderAfter(t = 1) {
+      setTimeout(() => this.render(), t);
+      return this;
+    }
+    function unrenderAfter(t = 1) {
+      setTimeout(() => this.unrender(), t);
+      return this;
+    }
+    function after(ui){
+      if(ui?.isUIElement) ui=ui.element;
+      this.element?.after(ui);
+      return this;
+    }
+    function before(ui){
+      if(ui?.isUIElement) ui=ui.element;
+      this.element?.before(ui);
+      return this;
     }
 
+    var DomMethods = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        after: after,
+        append: append,
+        before: before,
+        clear: clear,
+        insertAt: insertAt,
+        prepend: prepend,
+        remove: remove,
+        render: render,
+        renderAfter: renderAfter,
+        unrender: unrender,
+        unrenderAfter: unrenderAfter
+    });
+
     const Events = {
         'Click' : [
             'Click',
-            'DblClick'
+            'DblClick',
+            'ClickAway'
         ],
         'Ptr' : [
             'PtrMove',
@@ -1702,9 +1933,11 @@
         }
     }
 
+    // import { register_click_away_event } from "./custom-events/click-away.js";
     class ZikoEventClick extends __ZikoEvent__{
         constructor(target, customizer){
             super(target, Events.Click, details_setter$a, customizer);
+            // register_click_away_event(target.element)
         }
     }
     function details_setter$a(){
@@ -1712,7 +1945,7 @@
         else this.dx = 1;
         // console.log(this.currentEvent)
     }
-    const bindClickEvent = (target, customizer) => new ZikoEventClick(target, customizer);
+    const bind_click_event = (target, customizer) => new ZikoEventClick(target, customizer);
 
     class ZikoEventClipboard extends __ZikoEvent__{
         constructor(target, customizer){
@@ -1722,7 +1955,7 @@
     function details_setter$9(){
 
     }
-    const bindClipboardEvent = (target, customizer) => new ZikoEventClipboard(target, customizer);
+    const bind_clipboard_event = (target, customizer) => new ZikoEventClipboard(target, customizer);
 
     class ZikoEventCustom extends __ZikoEvent__{
         constructor(target, events, customizer){
@@ -1756,7 +1989,7 @@
     function details_setter$7(){
 
     }
-    const bindDragEvent = (target, customizer) => new ZikoEventDrag(target, customizer);
+    const bind_drag_event = (target, customizer) => new ZikoEventDrag(target, customizer);
 
     class ZikoEventFocus extends __ZikoEvent__{
         constructor(target, customizer){
@@ -1766,7 +1999,7 @@
     function details_setter$6(){
 
     }
-    const bindFocusEvent = (target, customizer) => new ZikoEventFocus(target, customizer);
+    const bind_focus_event = (target, customizer) => new ZikoEventFocus(target, customizer);
 
     let ZikoEventHash$1 = class ZikoEventHash extends __ZikoEvent__{
         constructor(target, customizer){
@@ -1797,7 +2030,7 @@
 
         }
     }
-    const bindKeyEvent = (target, customizer) => new ZikoEventKey(target, customizer);
+    const bind_key_event = (target, customizer) => new ZikoEventKey(target, customizer);
 
     class ZikoEventMouse extends __ZikoEvent__{
         constructor(target, customizer){
@@ -1807,7 +2040,7 @@
     function details_setter$3(){
 
     }
-    const bindMouseEvent = (target, customizer) => new ZikoEventMouse(target, customizer);
+    const bind_mouse_event = (target, customizer) => new ZikoEventMouse(target, customizer);
 
     class ZikoEventPointer extends __ZikoEvent__{
         constructor(target, customizer){
@@ -1848,7 +2081,7 @@
         // else this.dx = 1
         // console.log(this.currentEvent)
     }
-    const bindPointerEvent = (target, customizer) => new ZikoEventPointer(target, customizer);
+    const bind_pointer_event = (target, customizer) => new ZikoEventPointer(target, customizer);
 
     class ZikoEventTouch extends __ZikoEvent__{
         constructor(target, customizer){
@@ -1868,17 +2101,17 @@
     function details_setter(){
 
     }
-    const bindWheelEvent = (target, customizer) => new ZikoEventWheel(target, customizer);
+    const bind_wheel_event = (target, customizer) => new ZikoEventWheel(target, customizer);
 
     const binderMap = {
-      ptr: bindPointerEvent,
-      mouse : bindMouseEvent,
-      key: bindKeyEvent,
-      click : bindClickEvent,
-      drag : bindDragEvent,
-      clipboard : bindClipboardEvent,
-      focus : bindFocusEvent,
-      wheel : bindWheelEvent
+      ptr: bind_pointer_event,
+      mouse : bind_mouse_event,
+      key: bind_key_event,
+      click : bind_click_event,
+      drag : bind_drag_event,
+      clipboard : bind_clipboard_event,
+      focus : bind_focus_event,
+      wheel : bind_wheel_event
     };
 
     const EventsMethodes = {};
@@ -1894,55 +2127,68 @@
       });
     });
 
-    const IndexingMethods = {
-      at(index) {
-        return this.items.at(index);
-      },
-      forEach(callback) {
-        this.items.forEach(callback);
-        return this;
-      },
-      map(callback) {
-        return this.items.map(callback);
-      },
-      find(condition) {
-        return this.items.filter(condition);
-      },
-    };
+    function at(index) {
+      return this.items.at(index);
+    }
+    function forEach(callback) {
+      this.items.forEach(callback);
+      return this;
+    }
+    function map(callback) {
+      return this.items.map(callback);
+    }
+    function find(condition) {
+      return this.items.filter(condition);
+    }
 
-    const StyleMethods = {
-        style(styles){
-            for(let key in styles){
-                const value = styles[key];
-                if(isStateGetter(value)){
-                    const getter = value();
-                    Object.assign(this.element.style, {[key] : getter.value});
-                    getter._subscribe(
-                        (newValue) => {
-                            console.log({newValue});
-                            Object.assign(this.element.style, {[key] : newValue});
-                        },
-                        // this 
-                    );
-                }
-                else Object.assign(this.element.style, {[key] : value});
+    var IndexingMethods = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        at: at,
+        find: find,
+        forEach: forEach,
+        map: map
+    });
+
+    function style(styles){
+        for(let key in styles){
+            const value = styles[key];
+            if(isStateGetter(value)){
+                const getter = value();
+                Object.assign(this.element.style, {[key] : getter.value});
+                getter._subscribe(
+                    (newValue) => {
+                        console.log({newValue});
+                        Object.assign(this.element.style, {[key] : newValue});
+                    },
+                    // this 
+                );
             }
-            return this;
-        },
-        size(width, height){
-            return this.style({width, height})
-        },
-        hide(){
+            else Object.assign(this.element.style, {[key] : value});
+        }
+        return this;
+    }
+    function size(width, height){
+        return this.style({width, height})
+    }
+    function hide(){
 
-        },
-        show(){
+    }
+    function show(){
 
-        },
-        animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
-            this.element?.animate(keyframe,{duration, iterations, easing});
-            return this;
-        }
-    };
+    }
+    function animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
+        this.element?.animate(keyframe,{duration, iterations, easing});
+        return this;
+    }
+
+    var StyleMethods = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        animate: animate,
+        hide: hide,
+        show: show,
+        size: size,
+        style: style
+    });
 
     function EVENT_CONTROLLER(e,EVENT,setter,push_object){
         this.event=e;
@@ -2604,22 +2850,22 @@
             });
         }
         get x0(){
-            return map(globalThis?.screenX, 0, globalThis.screen.availWidth, -1, 1);
+            return map$1(globalThis?.screenX, 0, globalThis.screen.availWidth, -1, 1);
         }
         get y0(){
-            return - map(globalThis?.screenY, 0, globalThis.screen.availHeight, -1, 1);
+            return - map$1(globalThis?.screenY, 0, globalThis.screen.availHeight, -1, 1);
         }
         get x1(){
-            return map(globalThis?.screenX + globalThis?.outerWidth, 0, globalThis.screen.availWidth, -1, 1);
+            return map$1(globalThis?.screenX + globalThis?.outerWidth, 0, globalThis.screen.availWidth, -1, 1);
         }
         get y1(){
-            return - map(globalThis?.screenY + globalThis?.outerHeight, 0, globalThis.screen.availHeight, -1, 1);
+            return - map$1(globalThis?.screenY + globalThis?.outerHeight, 0, globalThis.screen.availHeight, -1, 1);
         }
         get cx(){
-            return map(globalThis?.outerWidth/2+globalThis?.screenX, 0, globalThis.screen.availWidth, -1, 1);
+            return map$1(globalThis?.outerWidth/2+globalThis?.screenX, 0, globalThis.screen.availWidth, -1, 1);
         }
         get cy(){
-            return - map(globalThis?.outerHeight/2+ globalThis?.screenY, 0, globalThis.screen.availHeight, -1, 1);
+            return - map$1(globalThis?.outerHeight/2+ globalThis?.screenY, 0, globalThis.screen.availHeight, -1, 1);
         }
     }
 
@@ -2881,22 +3127,12 @@
 
     const useMediaQuery = (mediaQueryRules,fallback) => new ZikoUseMediaQuery(mediaQueryRules,fallback);
 
-    __init__global__();
-    class UIElement extends UINode{
-      constructor({element, name ='', type="html", render = __Ziko__.__Config__.default.render, useDefaultStyle=false}={}){
+    let UIElement$1 = class UIElement extends UIElementCore{
+      constructor({element, name ='', type='html', render = __Ziko__.__Config__.default.render}={}){
         super();
-        this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
-        if(typeof element === "string") {
-          switch(type){
-            case "html" : element = globalThis?.document?.createElement(element); break;
-            case "svg" : element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element);
-            default : throw Error("Not supported")
-          }
-        }
-        else {
-          this.target = element?.parentElement;
-        }
-        register(
+        console.log({type});
+        // console.log(this)
+        register_to_class(
           this, 
           AttrsMethods, 
           DomMethods, 
@@ -2904,61 +3140,7 @@
           IndexingMethods, 
           EventsMethodes
         );
-        Object.assign(this.cache, {
-          name,
-          isInteractive : [true, false][Math.floor(2*Math.random())],
-          parent:null,
-          isBody:false,
-          isRoot:false,
-          isHidden: false,
-          isFrozzen:false,
-          legacyParent : null,
-          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
-        };
-        if(element) Object.assign(this.cache,{element});
-        // this.uuid = `${this.cache.name}-${Random.string(16)}`
-        this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index();
-        useDefaultStyle && this.style({ 
-          position: "relative",
-          boxSizing:"border-box",
-          margin:0,
-          padding:0,
-          width : "auto",
-          height : "auto"
-         });
-        this.items = new UIStore();
-        globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
-        element && render && this?.render?.();
-        if(
-          // globalThis.__Ziko__.__Config__.renderingMode !== "spa" 
-          // && 
-          // !globalThis.__Ziko__.__Config__.isSSC
-          // && 
-          this.isInteractive()
-        ){
-          this.setAttr("ziko-hydration-index", globalThis.__Ziko__.__HYDRATION__.index);
-          globalThis.__Ziko__.__HYDRATION__.register(() => this);
-        }
-        globalThis.__Ziko__.__UI__.push(this);
+        this.init(element, name, type, render);
       }
       get element(){
         return this.cache.element;
@@ -2966,9 +3148,9 @@
       isInteractive(){
         return this.cache.isInteractive;
       }
-      isZikoUIElement(){
-        return true;
-      }
+      // isUIElement(){
+      //   return true;
+      // }
       get st(){
         return this.cache.style;
       }
@@ -3008,73 +3190,73 @@
       get left(){
         return this.element.getBoundingClientRect().left;
       }
-      clone(render=false) {
-        // 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);
-      }
-      [Symbol.iterator]() {
-        return this.items[Symbol.iterator]();
-      }
-      maintain() {
-        for (let i = 0; i < this.items.length; i++) {
-          Object.defineProperty(this, i, {
-            value: this.items[i],
-            writable: true,
-            configurable: true,
-            enumerable: false 
-            });
-        }
-      }
-      freeze(freeze){
-        this.cache.isFrozzen=freeze;
-        return this;
-      }
+      // clone(render=false) {
+      //   // 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);
+      // }
+      // [Symbol.iterator]() {
+      //   return this.items[Symbol.iterator]();
+      // }
+      // maintain() {
+      //   for (let i = 0; i < this.items.length; i++) {
+      //     Object.defineProperty(this, i, {
+      //       value: this.items[i],
+      //       writable: true,
+      //       configurable: true,
+      //       enumerable: false 
+      //       });
+      //   }
+      // }
+      // freeze(freeze){
+      //   this.cache.isFrozzen=freeze;
+      //   return this;
+      // }
       // setTarget(tg) {
       //   if(this.isBody) return ;
-      //   if (tg?.isZikoUIElement) tg = tg.element;
+      //   if (tg?.isUIElement) tg = tg.element;
       //   this.unrender();
       //   this.target = tg;
       //   this.render();
       //   return this;
       // }
-      describe(label){
-        if(label)this.setAttr("aria-label",label);
-      }
-      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");
-      }
-      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;
-      }
+      // describe(label){
+      //   if(label)this.setAttr("aria-label",label)
+      // }
+      // 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");
+      // }
+      // 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;
+      // }
       // To Fix
       // onKeysDown({keys=[],callback}={}){
       //   if(!this.events.key)this.events.key = useKeyEvent(this);
@@ -3096,26 +3278,26 @@
         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;
-      }
+      // 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;
+      // }
 
-    }
+    };
 
     const HTMLTags = [
       'a',
@@ -3205,7 +3387,6 @@
       'sub',
       'summary',
       'sup',
-      'svg',
       'table',
       'tbody',
       'td',
@@ -3239,6 +3420,9 @@
         "desc", "title", "metadata", "foreignObject"
       ];
 
+    // const h=(tag, attributes = {}, ...children)=> _h(tag, "html", attributes, ...children);
+    // const s=(tag, attributes = {}, ...children)=> _h(tag, "svg", attributes, ...children);
+
     const tags = new Proxy({}, {
       get(target, prop) {
         if (typeof prop !== 'string') return undefined;
@@ -3246,16 +3430,22 @@
         let type ;
         if(HTMLTags.includes(tag)) type = 'html';
         if(SVGTags.includes(tag)) type = 'svg';
+        console.log(type);
         return (...args)=>{
           // Fix undefined
           // console.log(isStateGetter(args[0]))
+          // console.log(!!args)
+          if(args.length === 0) {
+            console.log('length 0');
+            return new UIElement$1({element : tag, name : tag, type})
+          }
           if(
             ['string', 'number'].includes(typeof args[0]) 
-            || args[0] instanceof UIElement 
+            || args[0] instanceof UIElement$1 
             || (typeof args[0] === 'function' && args[0]().isStateGetter())
-          ) return new UIElement({element : tag, name : tag, type}).append(...args);
+          ) return new UIElement$1({element : tag, name : tag, type}).append(...args);
           // console.log(args[0])
-          return new UIElement({element : tag}).setAttr(args.shift()).append(...args)
+          return new UIElement$1({element : tag, type}).setAttr(args.shift()).append(...args)
         }
         // if(SVGTags.includes(tag)) return (...args) => new UIElement(tag,"",{el_type : "svg"}).append(...args);
         // return (...args)=>{
@@ -3278,7 +3468,7 @@
       }
     });
 
-    class ZikoUIFlex extends UIElement {
+    class ZikoUIFlex extends UIElement$1 {
       constructor(tag = "div", w = "100%", h = "100%") {
         super({element : tag , name : "Flex"});
         this.direction = "cols";
@@ -3377,37 +3567,11 @@
     return map_pos_x(-align);
     }
 
-    class ZikoUIGrid extends UIElement {
-        constructor(tag ="div", w = "50vw", h = "50vh") {
-          super({element : tag, name : "Grid"});
-          this.direction = "cols";
-          if (typeof w == "number") w += "%";
-          if (typeof h == "number") h += "%";
-          this.style({ border: "1px solid black", width: w, height: h });
-          this.style({ display: "grid" });
-        //   this.render();
-        }
-        get isGird(){
-            return true;
-          }
-        columns(n) {
-            let temp = "";
-            for (let i = 0; i < n; i++) temp = temp.concat(" auto");
-            this.#templateColumns(temp);
-            return this;
-        }
-        #templateColumns(temp = "auto auto") {
-            this.style({ gridTemplateColumns: temp });
-            return this;
-        }
-        gap(w = 10, h = w) {
-            if(typeof (w) === "number")w += "px";
-            if(typeof (h) === "number")h += "px";
-            this.style({gridColumnGap: w,gridRowGap: h});
-            return this;
+    class UIElement extends UIElementCore{
+        constructor({element, name, type, render}){
+            super({element, name, type, render});
         }
-    }
-    const Grid$1 = (...UIElement) => new ZikoUIGrid("div").append(...UIElement);
+    }
 
     class ZikoUISuspense extends UIElement{
         constructor(fallback_ui, callback){
@@ -3433,12 +3597,16 @@
 
     const Suspense = (fallback_ui, callback) => new ZikoUISuspense(fallback_ui, callback);
 
-    class ZikoUIXMLWrapper extends UIElement{
-        constructor(XMLContent, type){
-            super({element : "div", name : ""});
-            this.element.append(type==="svg"?svg2dom(XMLContent):html2dom(XMLContent));
+    class UIHTMLWrapper extends UIElement$1 {
+        constructor(content){
+            super({element : 'div', name : 'html_wrappper'});
+            this.element.append(html2dom(content));
+            this.style({
+                display : 'contents'
+            });
         }
     }
+
     function html2dom(htmlString) {
         if(globalThis?.DOMParser){
             const parser = new DOMParser();
@@ -3446,261 +3614,50 @@
             doc.body.firstChild.style.display = "contents";
             return doc.body.firstChild;
         }
-      }
-    function svg2dom(svgString) {
-        if(globalThis?.DOMParser){
-            const parser = new DOMParser();
-            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{
-        constructor(HTMLContent){
-            super(HTMLContent, "html");
-        }
     }
-    class ZikoUISVGWrapper extends ZikoUIXMLWrapper{
-        constructor(SVGContent){
-            super(SVGContent, "svg");
-        }
-    }
-    const HTMLWrapper = (HTMLContent) => new ZikoUIHTMLWrapper(HTMLContent);
-    const SVGWrapper = (SVGContent) => new ZikoUISVGWrapper(SVGContent);
+
+    const HTMLWrapper = (content) => new UIHTMLWrapper(content);
 
-    class ZikoUICanvas extends UIElement{
-        constructor(w,h){
-            super("canvas","canvas");
-            this.ctx = this.element?.getContext("2d");
+    class UISVGWrapper extends UIElement$1 {
+        constructor(content){
+            super({element : 'div', name : 'html_wrappper'});
+            this.element.append(svg2dom(content));
             this.style({
-                border:"1px red solid",
-            });
-            this.transformMatrix = new Matrix([
-                [1,0,0],
-                [0,1,0],
-                [0,0,1]
-            ]);
-            this.axisMatrix = new Matrix([
-                [-10,-10],
-                [10,10]
-            ]);
-            // setTimeout(()=>this.resize(w,h),0);
-            requestAnimationFrame(()=>this.resize(w,h),0);
-            this.on("sizeupdated",()=>this.adjust());
-        }
-        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;
-        }
-        resize(w,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();
-            return this;
-        }
-        reset(){
-            this.ctx.setTransform(1,0,0,0,0,0);
-            return this;
-        }
-        append(element){
-            this.items.push(element);
-            this.draw(false);
-            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);
+                display : 'contents'
             });
         }
-        zoomIn(){
-
-        }
-        zoomOut(){
-            
-        }
-        undo(n){
-
-        }
-        redo(n){
-
-        }
-        stream(){
-
-        }
     }
 
-    const Canvas=(w,h)=>new ZikoUICanvas(w,h);
-
-    class ZikoUISvg extends UIElement {
-        constructor(w=360,h=300) {
-          super("svg","svg");
-          //this.cache={};
-          // this.setAttr("width",w);
-          // this.setAttr("height",h);
-          // this.setAttr({
-          //   width : w,
-          //   height : h
-          // })
-          this.style({border:"1px black solid"});
-          //this.view(-w/2,-h/2,w/2,h/2);
-          this.size(w, h);
-          this.view(-10,-10,10,10);
-        }
-        size(w, h){
-          this.setAttr({
-            width : w,
-            height : h
-          });
-          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;
-        }
-        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;
-        }
-        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;     
-        }
-        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('"',"'");
-        }
-        
+    function svg2dom(svgString) {
+      if (typeof DOMParser !== "undefined") {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(svgString.trim(), "image/svg+xml");
+        const svg = doc.documentElement;
+
+        if (svg.nodeName === "parsererror") {
+          throw new Error("Invalid SVG string");
+        }
+        if(svg.hasAttribute('xmlns')) return svg
+        // TO Fix ...
+        const {children, attributes} = svg;
+        const element = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+        for(let {name, value} of attributes){
+          element.setAttribute(name, value);
+        }
+        element.append(...children);
+
+        globalThis.svg = svg;
+        globalThis.children = children; 
+        globalThis.attributes = attributes;
+        globalThis.element = element;
+        return element;
       }
+      throw new Error("DOMParser is not available in this environment");
+    }
+
+
 
-      const Svg =(w,h)=>new ZikoUISvg(w,h);
+    const SVGWrapper = (content) => new UISVGWrapper(content);
 
     function define_wc(name, UIElement, props = {}, { mode = 'open'} = {}) {
         if (globalThis.customElements?.get(name)) {
@@ -4970,7 +4927,7 @@
         this.t += this.state.step;
         this.i++;
 
-        this.tx = map(this.t, 0, this.state.duration, 0, 1);
+        this.tx = map$1(this.t, 0, this.state.duration, 0, 1);
         this.ty = this.state.ease(this.tx);
 
         this.callback(this);
@@ -5415,7 +5372,7 @@
             return this;
         }
         setWrapper(wrapper){
-            if(wrapper?.isZikoUIElement) this.wrapper = wrapper;
+            if(wrapper?.isUIElement) this.wrapper = wrapper;
             else if(typeof wrapper === "function") this.wrapper = wrapper();
             return this;
         }
@@ -5487,7 +5444,7 @@
         }
         clear(){
             [...this.routes].forEach(n=>{
-                !isDynamic(n[0]) && n[1]?.isZikoUIElement && n[1].unrender();
+                !isDynamic(n[0]) && n[1]?.isUIElement && n[1].unrender();
             });   
             // this.wrapper.clear();
             return this;
@@ -5500,10 +5457,10 @@
                 element = callback.call(this,params);
             }
             else {
-                callback?.isZikoUIElement && callback.render(this.wrapper); 
+                callback?.isUIElement && callback.render(this.wrapper); 
                 if(typeof callback === "function") element = callback();  
             }
-            if(element?.isZikoUIElement) element.render(this.wrapper);
+            if(element?.isUIElement) element.render(this.wrapper);
             // if(element?.isZikoApp) element.render(this.wrapper);
             if(element instanceof Promise){
                 element.then(e=>e.render(this.wrapper));
@@ -5576,11 +5533,12 @@
        const normalizedPath = inputPath.replace(/\\/g, '/').replace(/\[(\w+)\]/g, '$1/:$1');
        const parts = normalizedPath.split('/');
        const rootParts = root.split('/');
-       const rootIndex = parts.indexOf(rootParts[rootParts.length - 1]);
+       const rootIndex = parts.indexOf(rootParts.at(-1));
        if (rootIndex !== -1) {
            const subsequentParts = parts.slice(rootIndex + 1);
-           const lastPart = subsequentParts[subsequentParts.length - 1];
+           const lastPart = parts.at(-1);
            const isIndexFile = lastPart === 'index.js' || lastPart === 'index.ts';
+        //    console.log({extensions, subsequentParts, lastPart, isIndexFile, rootParts, rootIndex, parts})
            const hasValidExtension = extensions.some(ext => lastPart === `.${ext}` || lastPart.endsWith(`.${ext}`));
            if (isIndexFile) {
                return '/' + (subsequentParts.length > 1 ? subsequentParts.slice(0, -1).join('/') : '');
@@ -5944,7 +5902,6 @@
     exports.Arc = Arc;
     exports.Back = Back;
     exports.Base = Base;
-    exports.Canvas = Canvas;
     exports.Clock = Clock;
     exports.Combinaison = Combinaison;
     exports.Complex = Complex;
@@ -5954,7 +5911,6 @@
     exports.Elastic = Elastic;
     exports.FileBasedRouting = FileBasedRouting;
     exports.Flex = Flex;
-    exports.Grid = Grid$1;
     exports.HTMLWrapper = HTMLWrapper;
     exports.InBack = InBack;
     exports.InBounce = InBounce;
@@ -5997,13 +5953,14 @@
     exports.Scheduler = Scheduler;
     exports.Step = Step;
     exports.Suspense = Suspense;
-    exports.Svg = Svg;
     exports.Tick = Tick;
     exports.TimeAnimation = TimeAnimation;
     exports.TimeLoop = TimeLoop;
     exports.TimeScheduler = TimeScheduler;
-    exports.UIElement = UIElement;
+    exports.UIElement = UIElement$1;
+    exports.UIHTMLWrapper = UIHTMLWrapper;
     exports.UINode = UINode;
+    exports.UISVGWrapper = UISVGWrapper;
     exports.Utils = Utils;
     exports.ZikoApp = ZikoApp;
     exports.ZikoCustomEvent = ZikoCustomEvent;
@@ -6022,15 +5979,9 @@
     exports.ZikoHead = ZikoHead;
     exports.ZikoMutationObserver = ZikoMutationObserver;
     exports.ZikoSPA = ZikoSPA;
-    exports.ZikoUICanvas = ZikoUICanvas;
     exports.ZikoUIFlex = ZikoUIFlex;
-    exports.ZikoUIGrid = ZikoUIGrid;
-    exports.ZikoUIHTMLWrapper = ZikoUIHTMLWrapper;
-    exports.ZikoUISVGWrapper = ZikoUISVGWrapper;
     exports.ZikoUISuspense = ZikoUISuspense;
-    exports.ZikoUISvg = ZikoUISvg;
     exports.ZikoUIText = ZikoUIText;
-    exports.ZikoUIXMLWrapper = ZikoUIXMLWrapper;
     exports.ZikoUseRoot = ZikoUseRoot;
     exports.__ZikoEvent__ = __ZikoEvent__;
     exports.abs = abs;
@@ -6047,17 +5998,17 @@
     exports.atan = atan;
     exports.atan2 = atan2;
     exports.atanh = atanh;
-    exports.bindClickEvent = bindClickEvent;
-    exports.bindClipboardEvent = bindClipboardEvent;
     exports.bindCustomEvent = bindCustomEvent;
-    exports.bindDragEvent = bindDragEvent;
-    exports.bindFocusEvent = bindFocusEvent;
     exports.bindHashEvent = bindHashEvent;
-    exports.bindKeyEvent = bindKeyEvent;
-    exports.bindMouseEvent = bindMouseEvent;
-    exports.bindPointerEvent = bindPointerEvent;
     exports.bindTouchEvent = bindTouchEvent;
-    exports.bindWheelEvent = bindWheelEvent;
+    exports.bind_click_event = bind_click_event;
+    exports.bind_clipboard_event = bind_clipboard_event;
+    exports.bind_drag_event = bind_drag_event;
+    exports.bind_focus_event = bind_focus_event;
+    exports.bind_key_event = bind_key_event;
+    exports.bind_mouse_event = bind_mouse_event;
+    exports.bind_pointer_event = bind_pointer_event;
+    exports.bind_wheel_event = bind_wheel_event;
     exports.cartesianProduct = cartesianProduct;
     exports.ceil = ceil;
     exports.clamp = clamp;
@@ -6101,7 +6052,7 @@
     exports.ln = ln;
     exports.logspace = logspace;
     exports.loop = loop;
-    exports.map = map;
+    exports.map = map$1;
     exports.mapfun = mapfun$1;
     exports.matrix = matrix;
     exports.matrix2 = matrix2;