ziko 0.38.1 → 0.39.0

package/dist/ziko.js

@@ -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
@@ -1049,7 +1049,7 @@
         }
     };
 
-    class ZikoUINode {
+    class UINode {
         constructor(node){
             this.cache = {
                 node
@@ -1063,7 +1063,7 @@
         } 
     }
 
-    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));
@@ -1106,7 +1106,55 @@
       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);
@@ -1652,587 +1700,20 @@
       },
     };
 
-    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;
@@ -3273,8 +2754,8 @@
     }
 
     __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") {
@@ -3285,9 +2766,16 @@
           }
         }
         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())],
@@ -3297,7 +2785,6 @@
           isHidden: false,
           isFrozzen:false,
           legacyParent : null,
-          style: new ZikoUIElementStyle({}),
           attributes: {},
           filters: {},
           temp:{}
@@ -3322,7 +2809,6 @@
         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",
@@ -3404,25 +2890,17 @@
         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){
@@ -3440,43 +2918,6 @@
       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];
       }
@@ -3671,10 +3112,6 @@
         "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;
@@ -3691,18 +3128,18 @@
         //  }
           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")
@@ -3712,14 +3149,14 @@
         //   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 += "%";
@@ -3787,13 +3224,13 @@
       }
     }
 
-    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
@@ -3816,9 +3253,9 @@
     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 += "%";
@@ -3846,11 +3283,11 @@
             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"
             });
@@ -3872,9 +3309,9 @@
 
     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));
         }
     }
@@ -3906,7 +3343,7 @@
     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");
@@ -4076,7 +3513,7 @@
 
     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={};
@@ -6263,6 +5700,8 @@
     exports.Str = Str;
     exports.Suspense = Suspense;
     exports.Svg = Svg;
+    exports.UIElement = UIElement;
+    exports.UINode = UINode;
     exports.Utils = Utils;
     exports.ZikoApp = ZikoApp;
     exports.ZikoCustomEvent = ZikoCustomEvent;
@@ -6282,18 +5721,15 @@
     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;
@@ -6420,7 +5856,6 @@
     exports.useMeta = useMeta;
     exports.useRoot = useRoot;
     exports.useSessionStorage = useSessionStorage;
-    exports.useStyle = useStyle;
     exports.useSuccesifKeys = useSuccesifKeys;
     exports.useSwipeEvent = useSwipeEvent;
     exports.useThread = useThread;