ziko 0.38.1 → 0.39.0

package/dist/ziko.cjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sun Aug 17 2025 21:52:49 GMT+0100 (UTC+01:00)
+  Date : Mon Aug 18 2025 11:00:54 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
@@ -1045,7 +1045,7 @@ const json2xmlFile=(json,indent)=>{
     }
 };
 
-class ZikoUINode {
+class UINode {
     constructor(node){
         this.cache = {
             node
@@ -1059,7 +1059,7 @@ class ZikoUINode {
     } 
 }
 
-globalThis.node = (node) => new ZikoUINode(node);
+globalThis.node = (node) => new UINode(node);
 
 function register_to_class(target, ...mixins){
     mixins.forEach(n => _register_to_class_(target, n));
@@ -1102,7 +1102,55 @@ const register = (target, ...mixins) => {
   else register_to_instance(target, ...mixins);
   };
 
-class ZikoUIText extends ZikoUINode {
+const isStateGetter = (arg) => {
+    return typeof(arg) === 'function' && arg?.()?.isStateGetter?.()
+};
+
+// 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 = Str.isCamelCase(name) ? Str.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 = Str.isCamelCase(name) ? Str.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);
       this.element = globalThis?.document?.createTextNode(...value);
@@ -1648,587 +1696,20 @@ const IndexingMethods = {
   },
 };
 
-class ZikoUseStyle {
-  constructor(style = {}, use = style.hasOwnProperty("default")? "default" : Object.keys(style)[0], id = 0) {
-    this.id = "Ziko-Style-" + id;
-    this.keys = new Set();
-    this.styles = {
-      default: {
-        fontSize: "1em",
-        color : "green"
-      },
-      other: {
-        fontSize : "2em",
-        color : "cyan" 
-      }
-    };
-    style && this.add(style);
-    use && this.use(use);
-  }
-
-  get current() {
-    return [...this.keys].reduce((key, value) => {
-      key[value] = `var(--${value}-${this.id})`;
-      return key;
-    }, {});
-  }
-
-  add(name, style = {}) {
-    if (name && typeof name === 'object' && !Array.isArray(name)) {
-      Object.assign(this.styles, name);
-    } else if (typeof name === 'string') {
-      Object.assign(this.styles, { [name]: style });
-    }
-    return this;
-  }
-
-  #useStyleIndex(index) {
-    const keys = Object.keys(this.styles);
-    for (let a in this.styles[keys[index]]) {
-      if (Object.prototype.hasOwnProperty.call(this.styles[keys[index]], a)) {
-        document.documentElement.style.setProperty(`--${a}-${this.id}`, this.styles[keys[index]][a]);
-        this.keys.add(a);
-      }
-    }
-    return this;
-  }
-
-  #useStyleName(name) {
-    if (!this.styles[name]) return this;
-    for (let a in this.styles[name]) {
-      if (Object.prototype.hasOwnProperty.call(this.styles[name], a)) {
-        document.documentElement.style.setProperty(`--${a}-${this.id}`, this.styles[name][a]);
-        this.keys.add(a);
-      }
-    }
-    return this;
-  }
-
-  #useStyleObject(style) {
-    for (let a in style) {
-      if (Object.prototype.hasOwnProperty.call(style, a)) {
-        document.documentElement.style.setProperty(`--${a}-${this.id}`, style[a]);
-        this.keys.add(a);
-      }
-    }
-    return this;
-  }
-
-  use(style) {
-    if (typeof style === "number") return this.#useStyleIndex(style);
-    if (typeof style === "string") return this.#useStyleName(style);
-    if (style && typeof style === "object") return this.#useStyleObject(style);
-    return this;
-  }
-}
-
-const useStyle = (styles, use, id) => new ZikoUseStyle(styles, use, id);
-
-const addSuffixeToNumber=(value,suffixe="px")=>{
-  if(typeof value === "number") value+=suffixe;
-  if(value instanceof Array)value=value.map(n=>typeof n==="number"?n+=suffixe:n).join(" ");
-  return value;
-};
-
-class ZikoUIElementStyle{
-    constructor(defaultStyle={}){
-        this.target=null;
-        this.styles=new Map(
-            [["default",defaultStyle]]
-        );
-        this.cache={
-            isHidden:false,
-            isFaddedOut:false,
-            transformation:{
-                Flip:[0,0,0],
-                matrix:new Matrix([
-                    [1,0,0,0],
-                    [0,1,0,0],
-                    [0,0,1,0],
-                    [0,0,0,1]
-                ])
-            }
-        };
-    }
+// Process width and height
+const StyleMethods = {
     style(styles){
-        for(const [key, value] of Object.entries(styles)){
-            if(Str.isCamelCase(key)){
-                delete styles[key];
-                Object.assign(styles,{[Str.camel2hyphencase(key)]:value});
-            }
-        }
-        if(this?.target?.element?.style)Object.assign(this?.target?.element?.style, styles);
-        return this;
-    }
-    linkTo(target){
-        this.target=target;
-        return this;
-    }
-    use(name="default"){
-        this.style(this.styles.get(name));
-        return this;
-    }
-    update(name,styles){
-        const old=this.styles.get(name);
-        old?this.styles.set(name,Object.assign(old,styles)):this.styles.set(name,styles);
-        return this;
-    }
-    add(name,styles){
-        this.styles.set(name,styles);
-        return this;
-    }
-    replace(name,styles){
-        this.styles.set(name,styles);
-        return this;
-    }
-    delete(...names){
-        names.forEach(n=>this.styles.delete(n));
-        return this;
-    }
-    updateDefaultStyle(){
-        const defaultStyle=Object.fromEntries(
-            Object.entries(this.target.element.style).filter(n=>isNaN(+n[0]))
-        );   
-        this.update("default",defaultStyle);
-        return this;
-    }
-    hover(styles){
-        //this.updateDefaultStyle()
-        if(styles)this.add("hover",styles);
-        this.target?.element?.addEventListener("pointerenter",()=>this.use("hover"));
-        this.target?.element?.addEventListener("pointerleave",()=>this.use("default"));
-        return this;
-    }
-    // Checkers 
-    isInline(){
-        return getComputedStyle(this.target.element).display.includes("inline");
-    }
-    isBlock(){
-        return !(this.isInline());
-    }
-    // Size
-    size(width,height){
-        this.style({
-            width,
-            height
-        });
-        return this;
-    }
-    width(w){
-        if(w instanceof Object){
-          if(w instanceof Array)w={min:w[0],max:w[1]};
-          if("min" in w || "max" in w){
-            let min= w.min ?? w.max;
-            let max= w.max ?? w.min;
-            min=addSuffixeToNumber(min,"px");
-            max=addSuffixeToNumber(max,"px"); 
-            this.style({ minWidth: min, maxWidth: max }, { target, maskVector });
-          }
-        }
-        else {
-          w=addSuffixeToNumber(w,"px");
-          this.style({width:w});
-        }
-        return this
-    }
-    height(h){
-        if(h instanceof Object){
-          if(h instanceof Array)h={min:h[0],max:h[1]};
-          if("min" in h || "max" in h){
-            let min= h.min ?? h.max;
-            let max= h.max ?? h.min;
-            min=addSuffixeToNumber(min,"px");
-            max=addSuffixeToNumber(max,"px"); 
-            this.style({ minHeight: min, maxHeight: max }, { target, maskVector });
-          }
-        }
-        else {
-          h=addSuffixeToNumber(h,"px");
-          this.style({height:h});
-        }
-        return this
-    } 
-    enableResize(h=false,v=false){
-        let resize="none";
-        if(h)v?resize="both":resize="horizontal";
-        else v?resize="vertical":resize="none";
-        this.style({
-            resize,
-            overflow:"hidden"
-        });
-        if(this.isInline()){
-            console.group("Ziko Issue : Temporarily Incompatible Method");
-            console.warn(".enableResize has no effect on inline elements!");
-            console.info("%cConsider using other display types such as block, inline-block, flex, or grid for proper resizing behavior.","color:gold;background-color:#3333cc;padding:5px");
-            console.groupEnd();
-        }
-        return this;
-    }   
-    // Apparence
-    hide({after, target, maskVector } = {}){
-        if(typeof after==="number"){
-            const wrapper=()=>this.hide({target,maskVector});
-            setTimeout(wrapper, after);
-            clearTimeout(wrapper);
-        }
-        else {
-          this.cache.isHidden=true;
-          this.style({display:"none"},{target,maskVector});
-        }
-        return this;
-    }
-    show({after, target, maskVector } = {}){
-        if(typeof after==="number"){
-            const wrapper=()=>this.show({target,maskVector});
-            setTimeout(wrapper, after);
-            clearTimeout(wrapper);
-        }
-        else {
-          this.cache.isHidden=false;
-          this.style({display:""},{target,maskVector});
-        }
-        return this;
-    }
-    color(color){
-        this.style({color});
-        return this;
-    }
-    background(background){
-        this.style({background});
-        return this;
-    }
-    backgroundColor(backgroundColor){
-        this.style({backgroundColor});
-        return this;
-    }
-    opacity(opacity, { target, maskVector } = {}) {
-        this.style({ opacity }, { target, maskVector });
-        return this;
-    }
-    // Placement
-    position(position){
-        this.style({position});
-        return this
-    }
-    display(disp, { target, maskVector } = {}) {
-        this.style({ display: disp }, { target, maskVector });
-        return this;
-    }
-    zIndex(z){
-        this.style({zIndex:z});
-        return this;
-    }
-    float(float, { target, maskVector } = {}) {
-        this.style({ float: float }, { target, maskVector });
-        return this;
-    }
-    // Box Model 
-    border(border = "1px solid red", { target, maskVector } = {}){
-        this.style({border}, { target, maskVector });
-        return this;
-    }
-    borderTop(borderTop = "1px solid red", { target, maskVector } = {}){
-        this.style({borderTop}, { target, maskVector });
-        return this;
-    }
-    borderRight(borderRight = "1px solid red", { target, maskVector } = {}){
-        this.style({borderRight}, { target, maskVector });
-        return this;
-    }
-    borderBottom(borderBottom = "1px solid red", { target, maskVector } = {}){
-        this.style({borderBottom}, { target, maskVector });
+        Object.assign(this.element.style, styles);
         return this;
-    }
-    borderLeft(borderLeft = "1px solid red", { target, maskVector } = {}){
-        this.style({borderLeft}, { target, maskVector });
-        return this;
-    }
-    borderRadius(radius){
-        radius=addSuffixeToNumber(radius,"px");
-        this.style({ borderRadius: radius }, { target, maskVector });
-        return this;
-    }
-    margin(margin){
-        margin=addSuffixeToNumber(margin,"px");
-        this.style({ margin }, { target, maskVector });
-        return this;
-    }
-    marginTop(marginTop){
-        marginTop=addSuffixeToNumber(marginTop,"px");
-        this.style({marginTop});
-        return this;
-    }
-    marginRight(marginRight){
-        marginRight=addSuffixeToNumber(marginRight,"px");
-        this.style({marginRight});
-        return this;
-    }
-    marginBootom(marginBootom){
-        marginBootom=addSuffixeToNumber(marginBootom,"px");
-        this.style({marginBootom});
-        return this;
-    }
-    marginLeft(marginLeft){
-        marginLeft=addSuffixeToNumber(marginLeft,"px");
-        this.style({marginLeft});
-        return this;
-    }
-    padding(padding){
-        padding=addSuffixeToNumber(padding,"px");
-        this.style({padding});
-        return this;
-    }
-    paddingTop(paddingTop){
-        paddingTop=addSuffixeToNumber(paddingTop,"px");
-        this.style({paddingTop});
-        return this;
-    }
-    paddingRight(paddingRight){
-        paddingRight=addSuffixeToNumber(paddingRight,"px");
-        this.style({paddingRight});
-        return this;
-    }
-    paddingBootom(paddingBootom){
-        paddingBootom=addSuffixeToNumber(paddingBootom,"px");
-        this.style({paddingBootom});
-        return this;
-    }
-    paddingLeft(paddingLeft){
-        paddingLeft=addSuffixeToNumber(paddingLeft,"px");
-        this.style({paddingLeft});
-        return this;
-    }
-    // Typographie
-    font(font){
-        this.style({font});
-        return this;
-    }
-    fontFamily(fontFamily=""){
-        this.style({fontFamily});
-        return this;
-    }
-    fontSize(fontSize){
-        this.style({fontSize});
-        return this;
-    }
-    // Misc
-    cursor(type="pointer"){
-        this.style({ cursor: type });
-        return this;
-    }  
-    overflow(x,y){
-        const values=["hidden","auto"];
-        this.style({
-          overflowX:typeof x==="number"?values[x]:x,
-          overflowY:typeof y==="number"?values[y]:y
-        },{target,maskVector});
-        return this;
-    }
-    clip(polygon, { target, maskVector } = {}) {
-        if (typeof polygon === "string") polygon = "polygon(" + polygon + ")";
-        this.style({ clipPath: polygon }, { target, maskVector });
-        return this;
-    }
-    // Transfromations
-    fadeOut(transitionTimming = 1) {
-        this.style({ 
-          transition:`opacity ${transitionTimming/1000}s`, 
-          opacity: 0 
-        });
-        this.cache.isFaddedOut=true;
-        return this;
-    }
-    fadeIn(transitionTimming = 1) {
-        this.style({ 
-          transition: `opacity ${transitionTimming/1000}s`, 
-          opacity: 1 
-        });
-        this.cache.isFaddedOut=false;
-        return this;
-    }
-    toggleFade(t_in = 1000,t_out=t_in){
-        this.cache.isFaddedOut?this.fadeIn(t_in):this.fadeOut(t_out);
-        return this;
-    }
-    morphBorderRadius(newValue, transitionTimming){
-        this.style({ 
-            borderRadius: newValue,
-            transition: `borderRadius ${transitionTimming/1000}s`, 
-        });
-        return this;
-    }
-    #applyTransformMatrix(transitionTimming){
-        const transformMatrix = this.cache.transformation.matrix.arr.join(",");
-        this.style({
-            transform: `matrix3d(${transformMatrix})`,
-            "-webkit-transform": `matrix3d(${transformMatrix})`,
-            "-moz-transform": `matrix3d(${transformMatrix})`, 
-            "-ms-transform": `matrix3d(${transformMatrix})`, 
-            "-o-transform": `matrix3d(${transformMatrix})` 
-        });
-        if (transitionTimming != 0) this.style({ transition: `transform ${transitionTimming/1000}s ease` });
-    }
-    translate(dx, dy = dx ,dz = 0, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(3,0,dx);
-        this.cache.transformation.matrix.set(3,1,dy);
-        this.cache.transformation.matrix.set(3,2,dz);
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    translateX(dx, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(3,0,dx);
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    translateY(dy, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(3,1,dy);
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    translateZ(dz, transitionTimming = 0) {
-        const d=-1/this.cache.transformation.matrix[2][2];
-        this.cache.transformation.matrix.set(3,2,z);
-        this.cache.transformation.matrix.set(3,3,1-(dz/d));
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    perspective(distance,transitionTimming=0){
-        const z=this.cache.transformation.matrix[3][2];
-        this.cache.transformation.matrix.set(2,2,-1/d);
-        this.cache.transformation.matrix.set(3,3,1-(z/distance));
-        this.#applyTransformMatrix(transitionTimming);
-        return this; 
-    }
-    scale(sx, sy = sx, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(0,0,sx);
-        this.cache.transformation.matrix.set(1,1,sy);
-        // const transformMatrix = this.cache.transformation.matrix.arr.join(",");
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    scaleX(x = 1 , transitionTimming = 0) {
-        this.cache.transformation.matrix.set(0,0,x);
-        // const transformMatrix = this.cache.transformation.matrix.arr.join(",");
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    scaleY(y = 1, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(1,1,y);
-        this.cache.transformation.matrix.arr.join(",");
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    skew(x, y = x, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(0,1,x);
-        this.cache.transformation.matrix.set(1,0,y);
-        this.cache.transformation.matrix.arr.join(",");
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    skewX(x = 1 , transitionTimming = 0) {
-        this.cache.transformation.matrix.set(0,1,x);
-        this.cache.transformation.matrix.arr.join(",");
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    skewY(y = 1, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(1,0,y);
-        this.cache.transformation.matrix.arr.join(",");
-        this.#applyTransformMatrix(transitionTimming);
-        return this;
-    }
-    rotateX(rx, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(1,1,cos(rx));
-        this.cache.transformation.matrix.set(1,2,-sin(rx));
-        this.cache.transformation.matrix.set(2,1,sin(rx));
-        this.cache.transformation.matrix.set(1,2,cos(rx));
-        this.#applyTransformMatrix(transitionTimming);   
-        return this;
-    }
-    rotateY(ry, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(0,0,cos(ry));
-        this.cache.transformation.matrix.set(0,2,sin(ry));
-        this.cache.transformation.matrix.set(2,0,-sin(ry));
-        this.cache.transformation.matrix.set(2,2,cos(ry));
-        this.#applyTransformMatrix(transitionTimming);   
-        return this;
-    }
-    rotateZ(rz, transitionTimming = 0) {
-        this.cache.transformation.matrix.set(0,0,cos(rz));
-        this.cache.transformation.matrix.set(0,1,-sin(rz));
-        this.cache.transformation.matrix.set(1,0,sin(rz));
-        this.cache.transformation.matrix.set(1,1,cos(rz)); 
-        this.#applyTransformMatrix(transitionTimming);  
-        return this;
-    }
-    flipeX(transitionTimming = 1) {
-        this.cache.transformation.Flip[0] += 180;
-        this.cache.transformation.Flip[0] %= 360;
-        this.rotateX(this.cache.transformation.Flip[0], transitionTimming);
-        return this;
-    }
-    flipeY(transitionTimming = 1) {
-        this.cache.transformation.Flip[1] += 180 ;
-        this.cache.transformation.Flip[1] %= 360;
-        this.rotateY(this.cache.transformation.Flip[1], transitionTimming);
-        return this;
-      }
-    flipeZ(transitionTimming = 1) {
-        this.cache.transformation.Flip[2] += 180;
-        this.cache.transformation.Flip[2] %= 360;
-        this.rotateZ(this.cache.transformation.Flip[2], transitionTimming);
-        return this;
-    }
-    slideHeightIn(transitionTimming = 1, h = this.h) {
-        this.style({ transition: transitionTimming + "s", height: h });
-        return this;
-    }
-    slideHeightOut(transitionTimming = 1) {
-        this.style({ transition: transitionTimming + "s", height: 0 });
-        this.target?.element?.n("transitionend", () =>
-          this.style({ opacity: "none" }),
-        );
-        return this;
-      }
-    slideWidthIn(transitionTimming = 1, w = this.w) {
-        this.style({ transition: transitionTimming + "s", width: w });
-        return this;
-    }
-    slideWidthOut(transitionTimming = 1) {
-        this.style({ transition: transitionTimming + "s", width: 0 });
-        const wrapper=()=>{
-            this.style({ opacity: "none" });
-        };
-        this.target?.element?.addEventListener("transitionend",wrapper);
-        this.target?.element?.removeEventListener("transitionend",wrapper);
-        return this;
-    }
-    slideIn({ transitionTimming = 1, w = "100%", h = "auto" } = {}) {
-        this.style({
-          transition: transitionTimming + "s",
-          width: w,
-          height: h,
-          visibility: "visible",
-        });
-        return this;
-    }
-    slideOut({ transitionTimming = 1, width = 0, heightransitionTimming = 0 } = {}) {
-        this.style({
-          visibility: "hidden",
-          transition: transitionTimming + "s",
-          opacity: "none",
-          width: width,
-          height: height,
-        });
-        const wrapper=()=>{
-            this.style({ opacity: "none" });
-        };
-        this.target?.element?.addEventListener("transitionend",wrapper);
-        this.target?.element?.removeEventListener("transitionend",wrapper);
+    },
+    size(width, height){
+        return this.style({width, height})
+    },
+    animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
+        this.element?.animate(keyframe,{duration, iterations, easing});
         return this;
-    }
-      
-}
+  }
+};
 
 function EVENT_CONTROLLER(e,EVENT,setter,push_object){
     this.event=e;
@@ -3269,8 +2750,8 @@ function __init__global__(){
 }
 
 __init__global__();
-class ZikoUIElement extends ZikoUINode{
-  constructor(element, name="", {type="html", useDefaultStyle=false}={}){
+class UIElement extends UINode{
+  constructor({element, name ='', type="html", useDefaultStyle=false}={}){
     super();
     this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
     if(typeof element === "string") {
@@ -3281,9 +2762,16 @@ class ZikoUIElement extends ZikoUINode{
       }
     }
     else {
-      this.target = element.parentElement;
-    }
-    register(this, DomMethods, IndexingMethods, EventsMethodes);
+      this.target = element?.parentElement;
+    }
+    register(
+      this, 
+      AttrsMethods, 
+      DomMethods, 
+      StyleMethods,
+      IndexingMethods, 
+      EventsMethodes
+    );
     Object.assign(this.cache, {
       name,
       isInteractive : [true, false][Math.floor(2*Math.random())],
@@ -3293,7 +2781,6 @@ class ZikoUIElement extends ZikoUINode{
       isHidden: false,
       isFrozzen:false,
       legacyParent : null,
-      style: new ZikoUIElementStyle({}),
       attributes: {},
       filters: {},
       temp:{}
@@ -3318,7 +2805,6 @@ class ZikoUIElement extends ZikoUINode{
     if(element)Object.assign(this.cache,{element});
     this.uuid = `${this.cache.name}-${Random.string(16)}`;
     this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index();
-    this.cache.style.linkTo(this);
     useDefaultStyle && this.style({ 
       position: "relative",
       boxSizing:"border-box",
@@ -3400,25 +2886,17 @@ class ZikoUIElement extends ZikoUINode{
     else UI.element=this.element.cloneNode(true);
     return UI.render(render);
   }
-  style(styles){
-    styles instanceof ZikoUseStyle ? this.st.style(styles.current): this.st.style(styles);
-    return this;
-  }
-  size(width,height){
-    this.st.size(width,height);
-    return this; 
-  }
   [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 
-      });
+    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){
@@ -3436,43 +2914,6 @@ class ZikoUIElement extends ZikoUINode{
   describe(label){
     if(label)this.setAttr("aria-label",label);
   }
-  animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
-    this.element?.animate(keyframe,{duration, iterations, easing});
-    return this;
-  }
-    // Attributes
-  #setAttr(name, value){
-    if(this.element?.tagName !== "svg") name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
-    if(this?.attr[name] && this?.attr[name]===value) return;
-    this.element?.setAttribute(name, value);
-    Object.assign(this.cache.attributes, {[name]:value});
-  }
-  setAttr(name, value) {
-    if(name instanceof Object){
-      const [names,values]=[Object.keys(name),Object.values(name)];
-      for(let i=0;i<names.length;i++){
-        if(values[i] instanceof Array)value[i] = values[i].join(" ");
-        this.#setAttr(names[i], values[i]);
-      }
-    }
-    else {
-      if(value instanceof Array)value = value.join(" ");
-      this.#setAttr(name, value);
-    }
-    return this;
-  }
-  removeAttr(...names) {
-    for(let i=0;i<names.length;i++)this.element?.removeAttribute(names[i]);
-    return this;
-  }
-  getAttr(name){
-    name = Str.isCamelCase(name) ? Str.camel2hyphencase(name) : name;
-    return this.element.attributes[name].value;
-  }
-  setContentEditable(bool = true) {
-    this.setAttr("contenteditable", bool);
-    return this;
-  }
   get children() {
     return [...this.element.children];
   }
@@ -3667,10 +3108,6 @@ const SVGTags = [
     "desc", "title", "metadata", "foreignObject"
   ];
 
-const isStateGetter = (arg) => {
-    return typeof(arg) === 'function' && arg?.()?.isStateGetter?.()
-};
-
 const tags = new Proxy({}, {
   get(target, prop) {
     if (typeof prop !== 'string') return undefined;
@@ -3687,18 +3124,18 @@ const tags = new Proxy({}, {
     //  }
       if(
         ['string', 'number'].includes(typeof args[0]) 
-        || args[0] instanceof ZikoUIElement 
+        || args[0] instanceof UIElement 
         || (typeof args[0] === 'function' && args[0]().isStateGetter())
-      ) return new ZikoUIElement(tag, tag, {type}).append(...args);
-      return new ZikoUIElement(tag).setAttr(args.shift()).append(...args)
+      ) return new UIElement({element :tag, name : tag, type}).append(...args);
+      return new UIElement({element : tag}).setAttr(args.shift()).append(...args)
     }
-    // if(SVGTags.includes(tag)) return (...args) => new ZikoUIElement(tag,"",{el_type : "svg"}).append(...args);
+    // if(SVGTags.includes(tag)) return (...args) => new UIElement(tag,"",{el_type : "svg"}).append(...args);
     // return (...args)=>{
-    //   if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
+    //   if(!(args[0] instanceof UIElement) && args[0] instanceof Object){
     //     let attributes = args.shift()
-    //     return new ZikoUIElement(tag).setAttr(attributes).append(...args)
+    //     return new UIElement(tag).setAttr(attributes).append(...args)
     //   }
-    //   return new ZikoUIElement(tag).append(...args);
+    //   return new UIElement(tag).append(...args);
     // }
     // // switch(tag){
     //   case "html"  : globalThis?.document?.createElement("html")
@@ -3708,14 +3145,14 @@ const tags = new Proxy({}, {
     //   case "meta"  :
     //   case "srcipt":
     //   case "body"  : return null; break;
-    //   default : return new ZikoUIElement(tag);
+    //   default : return new UIElement(tag);
     // }
   }
 });
 
-class ZikoUIFlex extends ZikoUIElement {
+class ZikoUIFlex extends UIElement {
   constructor(tag = "div", w = "100%", h = "100%") {
-    super(tag ,"Flex");
+    super({element : tag , name : "Flex"});
     this.direction = "cols";
     if (typeof w == "number") w += "%";
     if (typeof h == "number") h += "%";
@@ -3783,13 +3220,13 @@ class ZikoUIFlex extends ZikoUIElement {
   }
 }
 
-const Flex = (...ZikoUIElement) =>{
+const Flex = (...UIElement) =>{
   let tag="div";
-  if(typeof ZikoUIElement[0]==="string"){
-    tag=ZikoUIElement[0];
-    ZikoUIElement.pop();
+  if(typeof UIElement[0]==="string"){
+    tag=UIElement[0];
+    UIElement.pop();
   }
-  return new ZikoUIFlex(tag).append(...ZikoUIElement);
+  return new ZikoUIFlex(tag).append(...UIElement);
 };
 function set_vertical(direction){
   direction == 1
@@ -3812,9 +3249,9 @@ function map_pos_y(align){
 return map_pos_x(-align);
 }
 
-class ZikoUIGrid extends ZikoUIElement {
+class ZikoUIGrid extends UIElement {
     constructor(tag ="div", w = "50vw", h = "50vh") {
-      super(tag,"Grid");
+      super({element : tag, name : "Grid"});
       this.direction = "cols";
       if (typeof w == "number") w += "%";
       if (typeof h == "number") h += "%";
@@ -3842,11 +3279,11 @@ class ZikoUIGrid extends ZikoUIElement {
         return this;
     }
 }
-const Grid$1 = (...ZikoUIElement) => new ZikoUIGrid("div").append(...ZikoUIElement);
+const Grid$1 = (...UIElement) => new ZikoUIGrid("div").append(...UIElement);
 
-class ZikoUISuspense extends ZikoUIElement{
+class ZikoUISuspense extends UIElement{
     constructor(fallback_ui, callback){
-        super("div", "suspense");
+        super({element : "div", name : "suspense"});
         this.setAttr({
             dataTemp : "suspense"
         });
@@ -3868,9 +3305,9 @@ class ZikoUISuspense extends ZikoUIElement{
 
 const Suspense = (fallback_ui, callback) => new ZikoUISuspense(fallback_ui, callback);
 
-class ZikoUIXMLWrapper extends ZikoUIElement{
+class ZikoUIXMLWrapper extends UIElement{
     constructor(XMLContent, type){
-        super("div", "");
+        super({element : "div", name : ""});
         this.element.append(type==="svg"?svg2dom(XMLContent):html2dom(XMLContent));
     }
 }
@@ -3902,7 +3339,7 @@ class ZikoUISVGWrapper extends ZikoUIXMLWrapper{
 const HTMLWrapper = (HTMLContent) => new ZikoUIHTMLWrapper(HTMLContent);
 const SVGWrapper = (SVGContent) => new ZikoUISVGWrapper(SVGContent);
 
-class ZikoUICanvas extends ZikoUIElement{
+class ZikoUICanvas extends UIElement{
     constructor(w,h){
         super("canvas","canvas");
         this.ctx = this.element?.getContext("2d");
@@ -4072,7 +3509,7 @@ class ZikoUICanvas extends ZikoUIElement{
 
 const Canvas=(w,h)=>new ZikoUICanvas(w,h);
 
-class ZikoUISvg extends ZikoUIElement {
+class ZikoUISvg extends UIElement {
     constructor(w=360,h=300) {
       super("svg","svg");
       //this.cache={};
@@ -6259,6 +5696,8 @@ exports.SVGWrapper = SVGWrapper;
 exports.Str = Str;
 exports.Suspense = Suspense;
 exports.Svg = Svg;
+exports.UIElement = UIElement;
+exports.UINode = UINode;
 exports.Utils = Utils;
 exports.ZikoApp = ZikoApp;
 exports.ZikoCustomEvent = ZikoCustomEvent;
@@ -6278,18 +5717,15 @@ exports.ZikoHead = ZikoHead;
 exports.ZikoMutationObserver = ZikoMutationObserver;
 exports.ZikoSPA = ZikoSPA;
 exports.ZikoUICanvas = ZikoUICanvas;
-exports.ZikoUIElement = ZikoUIElement;
 exports.ZikoUIFlex = ZikoUIFlex;
 exports.ZikoUIGrid = ZikoUIGrid;
 exports.ZikoUIHTMLWrapper = ZikoUIHTMLWrapper;
-exports.ZikoUINode = ZikoUINode;
 exports.ZikoUISVGWrapper = ZikoUISVGWrapper;
 exports.ZikoUISuspense = ZikoUISuspense;
 exports.ZikoUISvg = ZikoUISvg;
 exports.ZikoUIText = ZikoUIText;
 exports.ZikoUIXMLWrapper = ZikoUIXMLWrapper;
 exports.ZikoUseRoot = ZikoUseRoot;
-exports.ZikoUseStyle = ZikoUseStyle;
 exports.__ZikoEvent__ = __ZikoEvent__;
 exports.abs = abs;
 exports.accum = accum;
@@ -6416,7 +5852,6 @@ exports.useMediaQuery = useMediaQuery;
 exports.useMeta = useMeta;
 exports.useRoot = useRoot;
 exports.useSessionStorage = useSessionStorage;
-exports.useStyle = useStyle;
 exports.useSuccesifKeys = useSuccesifKeys;
 exports.useSwipeEvent = useSwipeEvent;
 exports.useThread = useThread;