ziko 0.45.0 → 0.45.2

package/dist/ziko.mjs

@@ -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
@@ -249,17 +249,17 @@ const lerp=(value, min, max)=>{
         }
     }
 };
-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);
             }
         }
     }
@@ -532,7 +532,7 @@ const Utils={
     nums,
     norm,
     lerp,
-    map,
+    map: map$1,
     clamp,
     arange,
     linspace,
@@ -1074,47 +1074,6 @@ class UINode {
 
 // 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) => {
@@ -1237,11 +1196,261 @@ function __init__global__(){
     }
 }
 
+__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 (import.meta.hot) {
-    import.meta.hot.data.__Ziko__ = import.meta.hot.data.__Ziko__ || globalThis.__Ziko__;
+if (import.meta.hot?.data) {
+    import.meta.hot.data.__Ziko__ = import.meta.hot.data?.__Ziko__ || globalThis?.__Ziko__;
     globalThis.__Ziko__ = import.meta.hot.data.__Ziko__;
     // import.meta.hot.accept(n=>console.log(n));
     // console.log(import.meta.hot.data.__Ziko__.__State__.store)
@@ -1299,58 +1508,14 @@ const isStateGetter = (arg) => {
     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);
@@ -1362,75 +1527,6 @@ class ZikoUIText extends UINode {
 }
 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");
@@ -1475,12 +1571,147 @@ async function __addItem__(adder, pusher, ...ele) {
   }
   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',
@@ -1696,9 +1927,11 @@ class __ZikoEvent__ {
     }
 }
 
+// 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(){
@@ -1706,7 +1939,7 @@ function details_setter$a(){
     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){
@@ -1716,7 +1949,7 @@ class ZikoEventClipboard extends __ZikoEvent__{
 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){
@@ -1750,7 +1983,7 @@ class ZikoEventDrag extends __ZikoEvent__{
 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){
@@ -1760,7 +1993,7 @@ class ZikoEventFocus extends __ZikoEvent__{
 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){
@@ -1791,7 +2024,7 @@ function details_setter$4(){
 
     }
 }
-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){
@@ -1801,7 +2034,7 @@ class ZikoEventMouse extends __ZikoEvent__{
 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){
@@ -1842,7 +2075,7 @@ function details_setter$2(){
     // 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){
@@ -1862,17 +2095,17 @@ class ZikoEventWheel extends __ZikoEvent__{
 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 = {};
@@ -1888,55 +2121,68 @@ Object.entries(Events).forEach(([name, eventList]) => {
   });
 });
 
-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;
@@ -2598,22 +2844,22 @@ class ZikoScreenObserver {
         });
     }
     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);
     }
 }
 
@@ -2875,22 +3121,12 @@ class ZikoUseMediaQuery {
 
 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, 
@@ -2898,61 +3134,7 @@ class UIElement extends UINode{
       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;
@@ -2960,9 +3142,9 @@ class UIElement extends UINode{
   isInteractive(){
     return this.cache.isInteractive;
   }
-  isZikoUIElement(){
-    return true;
-  }
+  // isUIElement(){
+  //   return true;
+  // }
   get st(){
     return this.cache.style;
   }
@@ -3002,73 +3184,73 @@ class UIElement extends UINode{
   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);
@@ -3090,26 +3272,26 @@ class UIElement extends UINode{
     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',
@@ -3199,7 +3381,6 @@ const HTMLTags = [
   'sub',
   'summary',
   'sup',
-  'svg',
   'table',
   'tbody',
   'td',
@@ -3233,6 +3414,9 @@ const SVGTags = [
     "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;
@@ -3240,16 +3424,22 @@ const tags = new Proxy({}, {
     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)=>{
@@ -3272,7 +3462,7 @@ const tags = new Proxy({}, {
   }
 });
 
-class ZikoUIFlex extends UIElement {
+class ZikoUIFlex extends UIElement$1 {
   constructor(tag = "div", w = "100%", h = "100%") {
     super({element : tag , name : "Flex"});
     this.direction = "cols";
@@ -3371,37 +3561,11 @@ function map_pos_y(align){
 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){
@@ -3427,12 +3591,16 @@ class ZikoUISuspense extends UIElement{
 
 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();
@@ -3440,261 +3608,50 @@ function html2dom(htmlString) {
         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)) {
@@ -4964,7 +4921,7 @@ class TimeAnimation {
     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);
@@ -5409,7 +5366,7 @@ class ZikoApp {
         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;
     }
@@ -5481,7 +5438,7 @@ class ZikoSPA extends ZikoApp{
     }
     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;
@@ -5494,10 +5451,10 @@ class ZikoSPA extends ZikoApp{
             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));
@@ -5570,11 +5527,12 @@ function customPath(inputPath, root = './src/pages', extensions = ['js', 'ts'])
    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('/') : '');
@@ -5934,4 +5892,4 @@ if(globalThis?.document){
     document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());
 }
 
-export { App, Arc, Back, Base, Canvas, Clock, Combinaison, Complex, Discret, E, EPSILON, Elastic, FileBasedRouting, Flex, Grid$1 as Grid, HTMLWrapper, InBack, InBounce, InCirc, InCubic, InElastic, InExpo, InOutBack, InOutBounce, InOutCirc, InOutCubic, InOutElastic, InOutExpo, InOutQuad, InOutQuart, InOutQuint, InOutSin, InQuad, InQuart, InQuint, InSin, Linear, Logic$1 as Logic, Matrix, OutBack, OutBounce, OutCirc, OutCubic, OutElastic, OutExpo, OutQuad, OutQuart, OutQuint, OutSin, PI$2 as PI, Permutation, Random, SPA, SVGWrapper, Scheduler, Step, Suspense, Svg, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement, UINode, Utils, ZikoApp, ZikoCustomEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventCustom, ZikoEventDrag, ZikoEventFocus, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventTouch, ZikoEventWheel, ZikoHead, ZikoMutationObserver, ZikoSPA, ZikoUICanvas, ZikoUIFlex, ZikoUIGrid, ZikoUIHTMLWrapper, ZikoUISVGWrapper, ZikoUISuspense, ZikoUISvg, ZikoUIText, ZikoUIXMLWrapper, ZikoUseRoot, __ZikoEvent__, abs, accum, acos$1 as acos, acosh, acot, add, animation, arange, arr2str, asin, asinh, atan, atan2, atanh, bindClickEvent, bindClipboardEvent, bindCustomEvent, bindDragEvent, bindFocusEvent, bindHashEvent, bindKeyEvent, bindMouseEvent, bindPointerEvent, bindTouchEvent, bindWheelEvent, cartesianProduct, ceil, clamp, clock, combinaison, complex, cos$2 as cos, cosh$1 as cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, div, e, fact, floor, geomspace, getEvent, hypot, inRange, isApproximatlyEqual, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linspace, ln, logspace, loop, map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ones, pgcd, pow$1 as pow, powerSet, ppcm, preload, prod, rad2deg, round, sec, sig, sign, sin$2 as sin, sinc, sinh$1 as sinh, sleep, sqrt$2 as sqrt, sqrtn, step_fps, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, useChannel, useCustomEvent, useDerived, useEventEmitter, useFavIcon, useHashEvent, useHead, useInputEvent, useLocaleStorage, useMediaQuery, useMeta, useReactive, useRoot, useSessionStorage, useState, useSuccesifKeys, useSwipeEvent, useThread, useTitle, wait, waitForUIElm, waitForUIElmSync, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };
+export { App, Arc, Back, Base, Clock, Combinaison, Complex, Discret, E, EPSILON, Elastic, FileBasedRouting, Flex, HTMLWrapper, InBack, InBounce, InCirc, InCubic, InElastic, InExpo, InOutBack, InOutBounce, InOutCirc, InOutCubic, InOutElastic, InOutExpo, InOutQuad, InOutQuart, InOutQuint, InOutSin, InQuad, InQuart, InQuint, InSin, Linear, Logic$1 as Logic, Matrix, OutBack, OutBounce, OutCirc, OutCubic, OutElastic, OutExpo, OutQuad, OutQuart, OutQuint, OutSin, PI$2 as PI, Permutation, Random, SPA, SVGWrapper, Scheduler, Step, Suspense, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UIHTMLWrapper, UINode, UISVGWrapper, Utils, ZikoApp, ZikoCustomEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventCustom, ZikoEventDrag, ZikoEventFocus, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventTouch, ZikoEventWheel, ZikoHead, ZikoMutationObserver, ZikoSPA, ZikoUIFlex, ZikoUISuspense, ZikoUIText, ZikoUseRoot, __ZikoEvent__, abs, accum, acos$1 as acos, acosh, acot, add, animation, arange, arr2str, asin, asinh, atan, atan2, atanh, bindCustomEvent, bindHashEvent, bindTouchEvent, bind_click_event, bind_clipboard_event, bind_drag_event, bind_focus_event, bind_key_event, bind_mouse_event, bind_pointer_event, bind_wheel_event, cartesianProduct, ceil, clamp, clock, combinaison, complex, cos$2 as cos, cosh$1 as cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, div, e, fact, floor, geomspace, getEvent, hypot, inRange, isApproximatlyEqual, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linspace, ln, logspace, loop, map$1 as map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ones, pgcd, pow$1 as pow, powerSet, ppcm, preload, prod, rad2deg, round, sec, sig, sign, sin$2 as sin, sinc, sinh$1 as sinh, sleep, sqrt$2 as sqrt, sqrtn, step_fps, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, useChannel, useCustomEvent, useDerived, useEventEmitter, useFavIcon, useHashEvent, useHead, useInputEvent, useLocaleStorage, useMediaQuery, useMeta, useReactive, useRoot, useSessionStorage, useState, useSuccesifKeys, useSwipeEvent, useThread, useTitle, wait, waitForUIElm, waitForUIElmSync, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };