ziko 0.38.0 → 0.39.0

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Fri Aug 15 2025 21:37:17 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
@@ -951,21 +951,6 @@
         }
     };
 
-    async function fetchdom(url='https://github.com/zakarialaoui10'){
-      const data=await fetch(url);
-      const html=await data.text();
-      const dom= new DOMParser().parseFromString(html,'text/xml');
-      return dom.documentElement
-    }
-    function fetchdomSync(url='https://github.com/zakarialaoui10'){
-      const data=preload(url);
-      const dom= new DOMParser().parseFromString(data,'text/xml');
-      return dom.documentElement;
-    }
-
-    globalThis.fetchdom=fetchdom;
-    globalThis.fetchdomSync=fetchdomSync;
-
     const csv2arr = (csv, delimiter = ",")=>csv.trim().trimEnd().split("\n").map(n=>n.split(delimiter));
     const csv2matrix = (csv, delimiter = ",")=>new Matrix(csv2arr(csv,delimiter));
     const csv2object = (csv, delimiter = ",") => {
@@ -1064,7 +1049,7 @@
         }
     };
 
-    class ZikoUINode {
+    class UINode {
         constructor(node){
             this.cache = {
                 node
@@ -1078,38 +1063,29 @@
         } 
     }
 
-    globalThis.node = (node) => new ZikoUINode(node);
+    globalThis.node = (node) => new UINode(node);
 
-    function composeClass(Class, mixin) {
+    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);
-
-      class Composed extends Class {
-        constructor(...args) {
-          super(...args);
-          for (const key of Reflect.ownKeys(descriptors)) {
-            const desc = descriptors[key];
-
-            if (typeof desc.value === 'function') {
-              this[key] = desc.value.bind(this);
-            }
-          }
-        }
-      }
-
       for (const key of Reflect.ownKeys(descriptors)) {
         const desc = descriptors[key];
-
-        if ('get' in desc || 'set' in desc) {
-          Object.defineProperty(Composed.prototype, key, desc);
-        } else if (typeof desc.value !== 'function') {
-          Object.defineProperty(Composed.prototype, key, desc);
+        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);
+          }
         }
       }
-
-      return Composed;
     }
 
-    function composeInstance(instance, mixin) {
+    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)) {
@@ -1125,17 +1101,60 @@
       }
     }
 
-    function compose(target, ...mixin) {
-      if (typeof target === 'function') {
-        return mixin.forEach(item =>composeClass(target, item));
-      } else if (typeof target === 'object') {
-        mixin.forEach(item =>composeInstance(target, item));
-      } else {
-        throw new TypeError("compose: target must be a class or instance");
+    const register = (target, ...mixins) => {
+      if(typeof target === 'function') register_to_class(target, ...mixins);
+      else register_to_instance(target, ...mixins);
+      };
+
+    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 ZikoUINode {
+    class ZikoUIText extends UINode {
         constructor(...value) {
           super("span", "text", false, ...value);
           this.element = globalThis?.document?.createTextNode(...value);
@@ -1254,22 +1273,6 @@
       return this;
     }
 
-    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);
-      },
-    };
-
     const Events = {
         'Click' : [
             'Click',
@@ -1681,587 +1684,36 @@
       });
     });
 
-    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);
+    const IndexingMethods = {
+      at(index) {
+        return this.items.at(index);
+      },
+      forEach(callback) {
+        this.items.forEach(callback);
         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;
+      },
+      map(callback) {
+        return this.items.map(callback);
+      },
+      find(condition) {
+        return this.items.filter(condition);
+      },
     };
 
-    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});
+            Object.assign(this.element.style, styles);
             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 });
-            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;
@@ -3288,43 +2740,42 @@
         }
     };
 
-    if ( !globalThis?.__Ziko__ ){
-        globalThis.__Ziko__ = {
-                    __UI__,
-                    __HYDRATION__,
-                    __HYDRATION_MAP__,
-                    __Config__,
-                    __CACHE__,
-                };
-        defineParamsGetter$1(__Ziko__);
+    function __init__global__(){
+        if ( !globalThis?.__Ziko__ ){
+            globalThis.__Ziko__ = {
+                        __UI__,
+                        __HYDRATION__,
+                        __HYDRATION_MAP__,
+                        __Config__,
+                        __CACHE__,
+                    };
+            defineParamsGetter$1(__Ziko__);
+        }
     }
 
-    class ZikoUIElement extends ZikoUINode{
-      constructor(element, name="", {el_type="html", useDefaultStyle=false}={}){
+    __init__global__();
+    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") {
-          switch(el_type){
+          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;
+          this.target = element?.parentElement;
         }
-        // if(element)this.__ele__ = element;
-        compose(
+        register(
           this, 
-          DomMethods,
-          IndexingMethods,
+          AttrsMethods, 
+          DomMethods, 
+          StyleMethods,
+          IndexingMethods, 
           EventsMethodes
         );
-        // if(false){
-        //   import("../methods/tree.js").then(({ default: ExternalMethods }) => {
-        //     compose(this, ExternalMethods);
-        //   });
-        // }
         Object.assign(this.cache, {
           name,
           isInteractive : [true, false][Math.floor(2*Math.random())],
@@ -3334,7 +2785,6 @@
           isHidden: false,
           isFrozzen:false,
           legacyParent : null,
-          style: new ZikoUIElementStyle({}),
           attributes: {},
           filters: {},
           temp:{}
@@ -3359,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",
@@ -3392,10 +2841,6 @@
       isZikoUIElement(){
         return true;
       }
-      register(){
-
-        return this;
-      }
       get st(){
         return this.cache.style;
       }
@@ -3445,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){
@@ -3481,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];
       }
@@ -3716,23 +3116,32 @@
       get(target, prop) {
         if (typeof prop !== 'string') return undefined;
         let tag = prop.replaceAll("_","-").toLowerCase();
+        let type ;
+        if(HTMLTags.includes(tag)) type = 'html';
+        if(SVGTags.includes(tag)) type = 'svg';
         if(HTMLTags.includes(tag)) return (...args)=>{
-          if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
-            let attributes = args.shift();
-            // console.log(args)
-            return new ZikoUIElement(tag).setAttr(attributes).append(...args)
-          }
-          return new ZikoUIElement(tag).append(...args);
-        }
-        if(SVGTags.includes(tag)) return (...args)=>new ZikoUIElement(tag,"",{el_type : "svg"}).append(...args);
-        return (...args)=>{
-          if(!(args[0] instanceof ZikoUIElement) && args[0] instanceof Object){
-            let attributes = args.shift();
-            return new ZikoUIElement(tag).setAttr(attributes).append(...args)
-          }
-          return new ZikoUIElement(tag).append(...args);
-        }
-        // switch(tag){
+          console.log(isStateGetter(args[0]));
+        //  if(typeof args[0] === 'function') {
+        //   console.log(args[0], args[0]?.() instanceof StateGetter)
+        //   globalThis.a = args[0]
+        //   console.log({t : a.constructor})
+        //  }
+          if(
+            ['string', 'number'].includes(typeof args[0]) 
+            || args[0] instanceof UIElement 
+            || (typeof args[0] === 'function' && args[0]().isStateGetter())
+          ) 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 UIElement(tag,"",{el_type : "svg"}).append(...args);
+        // return (...args)=>{
+        //   if(!(args[0] instanceof UIElement) && args[0] instanceof Object){
+        //     let attributes = args.shift()
+        //     return new UIElement(tag).setAttr(attributes).append(...args)
+        //   }
+        //   return new UIElement(tag).append(...args);
+        // }
+        // // switch(tag){
         //   case "html"  : globalThis?.document?.createElement("html")
         //   case "head"  :
         //   case "style" :
@@ -3740,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 += "%";
@@ -3815,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
@@ -3844,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 += "%";
@@ -3874,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"
             });
@@ -3900,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));
         }
     }
@@ -3934,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");
@@ -4104,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={};
@@ -5804,8 +5213,7 @@
     const useAnimation=(callback,ease=Ease.Linear,step=50,config)=>new ZikoTimeAnimation(callback,ease=Ease.Linear,step=50,config);
 
     const debounce=(fn,delay=1000)=>{
-        let id;
-        return (...args) => id ? clearTimeout(id) : setTimeout(()=>fn(...args),delay);
+        return (...args) => setTimeout(()=>fn(...args),delay);
     };
     const throttle=(fn,delay)=>{
         let lastTime=0;
@@ -6292,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;
@@ -6311,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;
@@ -6449,7 +5856,6 @@
     exports.useMeta = useMeta;
     exports.useRoot = useRoot;
     exports.useSessionStorage = useSessionStorage;
-    exports.useStyle = useStyle;
     exports.useSuccesifKeys = useSuccesifKeys;
     exports.useSwipeEvent = useSwipeEvent;
     exports.useThread = useThread;