ziko 0.35.0 → 0.36.0

package/dist/ziko.cjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Thu Aug 07 2025 10:32:14 GMT+0100 (UTC+01:00)
+  Date : Tue Aug 12 2025 11:00:20 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
@@ -1200,6 +1200,22 @@ const json2xmlFile=(json,indent)=>{
     }
 };
 
+class ZikoUINode {
+    constructor(node){
+        this.cache = {
+            node
+        };
+    }
+    isZikoUINode(){
+        return true
+    }
+    get node(){
+        return this.cache.node;
+    } 
+}
+
+globalThis.node = (node) => new ZikoUINode(node);
+
 const DomMethods = {
   append(...ele) {
     __addItem__.call(this, "append", "push", ...ele);
@@ -1726,7 +1742,7 @@ Object.entries(Events$1).forEach(([name, eventList]) => {
   });
 });
 
-let ZikoUseStyle$1 = class ZikoUseStyle {
+class ZikoUseStyle {
   constructor(style = {}, use = style.hasOwnProperty("default")? "default" : Object.keys(style)[0], id = 0) {
     this.id = "Ziko-Style-" + id;
     this.keys = new Set();
@@ -1798,7 +1814,9 @@ let ZikoUseStyle$1 = class ZikoUseStyle {
     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;
@@ -3234,82 +3252,6 @@ let ZikoHead$1 = class ZikoHead{
 
 const useHead$1=({ title, lang, icon, meta, noscript })=>new ZikoHead$1({ title, lang, icon, meta, noscript });
 
-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);
-
 /*
  [
             {
@@ -3408,8 +3350,9 @@ const Reactivity={
     ...Hooks,
 };
 
-class ZikoUIElement {
+class ZikoUIElement extends ZikoUINode{
   constructor(element, name="", {el_type="html", useDefaultStyle=false}={}){
+    super();
     this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
     if(typeof element === "string") {
       switch(el_type){
@@ -3421,7 +3364,7 @@ class ZikoUIElement {
     else {
       this.target = element.parentElement;
     }
-    if(element)this.__ele__ = element;
+    // if(element)this.__ele__ = element;
     compose(
       this, 
       DomMethods,
@@ -3433,8 +3376,9 @@ class ZikoUIElement {
     //     compose(this, ExternalMethods);
     //   });
     // }
-    this.cache = {
+    Object.assign(this.cache, {
       name,
+      isInteractive : [true, false][Math.floor(2*Math.random())],
       parent:null,
       isBody:false,
       isRoot:false,
@@ -3445,7 +3389,7 @@ class ZikoUIElement {
       attributes: {},
       filters: {},
       temp:{}
-    };
+    });
     this.events = {
       ptr:null,
       mouse:null,
@@ -3463,6 +3407,7 @@ class ZikoUIElement {
       resize:null,
       intersection:null
     };
+    if(element)Object.assign(this.cache,{element});
     this.uuid = `${this.cache.name}-${Random.string(16)}`;
     this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index();
     this.cache.style.linkTo(this);
@@ -3490,12 +3435,13 @@ class ZikoUIElement {
     }
   }
   get element(){
-    return this.__ele__;
+    return this.cache.element;
   }
   isInteractive(){
-    return [true, false][Math.floor(2*Math.random())];
+    return this.cache.isInteractive;
   }
-  get isZikoUIElement(){
+  // Remove get
+  isZikoUIElement(){
     return true;
   }
   register(){
@@ -3552,18 +3498,25 @@ class ZikoUIElement {
     return UI.render(render);
   }
   style(styles){
-    styles instanceof ZikoUseStyle$1 ? this.st.style(styles.current): this.st.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.assign(this, { [[i]]: this.items[i] });
-    this.length = this.items.length;
-    return this;
+  for (let i = 0; i < this.items.length; i++) {
+    Object.defineProperty(this, i, {
+      value: this.items[i],
+      writable: true,
+      configurable: true,
+      enumerable: false 
+      });
+    }
   }
   filter(condition_callback, if_callback = () => {}, else_callback = () => {}) {
     const FilterItems = this.items.filter(condition_callback);
@@ -6035,7 +5988,7 @@ class Matrix extends ZikoMath{
         this.cols = cols;
         this.arr = arr;   
     }
-    this._maintain();
+    this.#maintain();
         //Object.seal(this);
     }
     toString(){
@@ -6072,9 +6025,18 @@ class Matrix extends ZikoMath{
     get imag() {
         return new Matrix(this.cols, this.rows, this.arr.flat(1).imag);
     }
-    _maintain(){
-        for(let i=0;i<this.arr.length;i++)Object.assign(this,{[[i]]:this.arr[i]});
-        return this;
+    [Symbol.iterator]() {
+      return this.arr[Symbol.iterator]();
+    }
+    #maintain() {
+    for (let i = 0; i < this.arr.length; i++) {
+        Object.defineProperty(this, i, {
+        value: this.arr[i],
+        writable: true,
+        configurable: true,
+        enumerable: false 
+        });
+        }
     }
     get(row = 0, col = 0) {
         if (col == -1) return this.arr[row];

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Thu Aug 07 2025 10:35:46 GMT+0100 (UTC+01:00)
+  Date : Tue Aug 12 2025 11:00:20 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
@@ -1202,6 +1202,22 @@
       }
   };
 
+  class ZikoUINode {
+      constructor(node){
+          this.cache = {
+              node
+          };
+      }
+      isZikoUINode(){
+          return true
+      }
+      get node(){
+          return this.cache.node;
+      } 
+  }
+
+  globalThis.node = (node) => new ZikoUINode(node);
+
   const DomMethods = {
     append(...ele) {
       __addItem__.call(this, "append", "push", ...ele);
@@ -1728,7 +1744,7 @@
     });
   });
 
-  let ZikoUseStyle$1 = class ZikoUseStyle {
+  class ZikoUseStyle {
     constructor(style = {}, use = style.hasOwnProperty("default")? "default" : Object.keys(style)[0], id = 0) {
       this.id = "Ziko-Style-" + id;
       this.keys = new Set();
@@ -1800,7 +1816,9 @@
       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;
@@ -3236,82 +3254,6 @@
 
   const useHead$1=({ title, lang, icon, meta, noscript })=>new ZikoHead$1({ title, lang, icon, meta, noscript });
 
-  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);
-
   /*
    [
               {
@@ -3410,8 +3352,9 @@
       ...Hooks,
   };
 
-  class ZikoUIElement {
+  class ZikoUIElement extends ZikoUINode{
     constructor(element, name="", {el_type="html", useDefaultStyle=false}={}){
+      super();
       this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
       if(typeof element === "string") {
         switch(el_type){
@@ -3423,7 +3366,7 @@
       else {
         this.target = element.parentElement;
       }
-      if(element)this.__ele__ = element;
+      // if(element)this.__ele__ = element;
       compose(
         this, 
         DomMethods,
@@ -3435,8 +3378,9 @@
       //     compose(this, ExternalMethods);
       //   });
       // }
-      this.cache = {
+      Object.assign(this.cache, {
         name,
+        isInteractive : [true, false][Math.floor(2*Math.random())],
         parent:null,
         isBody:false,
         isRoot:false,
@@ -3447,7 +3391,7 @@
         attributes: {},
         filters: {},
         temp:{}
-      };
+      });
       this.events = {
         ptr:null,
         mouse:null,
@@ -3465,6 +3409,7 @@
         resize:null,
         intersection:null
       };
+      if(element)Object.assign(this.cache,{element});
       this.uuid = `${this.cache.name}-${Random.string(16)}`;
       this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index();
       this.cache.style.linkTo(this);
@@ -3492,12 +3437,13 @@
       }
     }
     get element(){
-      return this.__ele__;
+      return this.cache.element;
     }
     isInteractive(){
-      return [true, false][Math.floor(2*Math.random())];
+      return this.cache.isInteractive;
     }
-    get isZikoUIElement(){
+    // Remove get
+    isZikoUIElement(){
       return true;
     }
     register(){
@@ -3554,18 +3500,25 @@
       return UI.render(render);
     }
     style(styles){
-      styles instanceof ZikoUseStyle$1 ? this.st.style(styles.current): this.st.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.assign(this, { [[i]]: this.items[i] });
-      this.length = this.items.length;
-      return this;
+    for (let i = 0; i < this.items.length; i++) {
+      Object.defineProperty(this, i, {
+        value: this.items[i],
+        writable: true,
+        configurable: true,
+        enumerable: false 
+        });
+      }
     }
     filter(condition_callback, if_callback = () => {}, else_callback = () => {}) {
       const FilterItems = this.items.filter(condition_callback);
@@ -6037,7 +5990,7 @@
           this.cols = cols;
           this.arr = arr;   
       }
-      this._maintain();
+      this.#maintain();
           //Object.seal(this);
       }
       toString(){
@@ -6074,9 +6027,18 @@
       get imag() {
           return new Matrix(this.cols, this.rows, this.arr.flat(1).imag);
       }
-      _maintain(){
-          for(let i=0;i<this.arr.length;i++)Object.assign(this,{[[i]]:this.arr[i]});
-          return this;
+      [Symbol.iterator]() {
+        return this.arr[Symbol.iterator]();
+      }
+      #maintain() {
+      for (let i = 0; i < this.arr.length; i++) {
+          Object.defineProperty(this, i, {
+          value: this.arr[i],
+          writable: true,
+          configurable: true,
+          enumerable: false 
+          });
+          }
       }
       get(row = 0, col = 0) {
           if (col == -1) return this.arr[row];