ziko 0.35.0 → 0.36.0

package/dist/ziko.mjs

@@ -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
@@ -1196,6 +1196,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);
@@ -1722,7 +1738,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();
@@ -1794,7 +1810,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;
@@ -3230,82 +3248,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);
-
 /*
  [
             {
@@ -3404,8 +3346,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){
@@ -3417,7 +3360,7 @@ class ZikoUIElement {
     else {
       this.target = element.parentElement;
     }
-    if(element)this.__ele__ = element;
+    // if(element)this.__ele__ = element;
     compose(
       this, 
       DomMethods,
@@ -3429,8 +3372,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,
@@ -3441,7 +3385,7 @@ class ZikoUIElement {
       attributes: {},
       filters: {},
       temp:{}
-    };
+    });
     this.events = {
       ptr:null,
       mouse:null,
@@ -3459,6 +3403,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);
@@ -3486,12 +3431,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(){
@@ -3548,18 +3494,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);
@@ -6031,7 +5984,7 @@ class Matrix extends ZikoMath{
         this.cols = cols;
         this.arr = arr;   
     }
-    this._maintain();
+    this.#maintain();
         //Object.seal(this);
     }
     toString(){
@@ -6068,9 +6021,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "description": "a versatile javaScript framework offering a rich set of UI components, advanced mathematical utilities, reactivity, animations, client side routing and graphics capabilities",
   "keywords": [
     "front-end",
@@ -28,6 +28,9 @@
       "import": "./dist/ziko.mjs",
       "require": "./dist/ziko.cjs"
     },
+    "./math": {
+      "import" : "./src/math/index.js"
+    },
     "./helpers": {
       "import" : "./src/__helpers__.js"
     },
@@ -48,7 +51,6 @@
       "import": "./src/tags/index.js"
     },
     "./src": "./src/index.js",
-    "./math": {},
     "./html": {},
     "./app": {},
     "./time": {},

package/src/math/matrix/Matrix.js

@@ -38,7 +38,7 @@ class Matrix extends ZikoMath{
         this.cols = cols;
         this.arr = arr;   
     }
-    this._maintain();
+    this.#maintain();
         //Object.seal(this);
     }
     toString(){
@@ -75,9 +75,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/src/reactivity/hooks/index.js

@@ -4,5 +4,5 @@ export * from "./head"
 // export * from "./interactions"
 // export * from "./sensors"
 // export * from "./storage"
-export * from "./ui"
+export * from "./UI"
 // export * from "./window"

package/src/ui/constructors/ziko-ui-element.js

@@ -1,8 +1,9 @@
+import ZikoUINode from "./ziko-ui-node.js";
 import { compose } from "../../__helpers__/index.js";
 import { DomMethods } from "../methods/dom.js";
 import { IndexingMethods } from "../methods/indexing.js";
 import { EventsMethodes } from "../methods/events.js";
-import { ZikoUseStyle } from "../../reactivity/hooks/ui/useStyle.js";
+import { ZikoUseStyle } from "../../reactivity/hooks/UI/useStyle.js";
 import { ZikoUIElementStyle } from "../style/index.js";
 import { 
   useCustomEvent,
@@ -14,8 +15,9 @@ import {
 } from "../../reactivity/index.js"
 import { Random } from "../../math/index.js";
 import { Str } from "../../data/index.js";
-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){
@@ -27,7 +29,7 @@ class ZikoUIElement {
     else{
       this.target = element.parentElement;
     }
-    if(element)this.__ele__ = element;
+    // if(element)this.__ele__ = element;
     compose(
       this, 
       DomMethods,
@@ -39,8 +41,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,
@@ -51,7 +54,7 @@ class ZikoUIElement {
       attributes: {},
       filters: {},
       temp:{}
-    };
+    })
     this.events = {
       ptr:null,
       mouse:null,
@@ -69,6 +72,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);
@@ -96,12 +100,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(){
@@ -165,11 +170,18 @@ class ZikoUIElement {
     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);

package/src/ui/constructors/ziko-ui-node.js

@@ -1,5 +1,15 @@
-class ZikoUINode {
-    constructor(){
-        
+export default class ZikoUINode {
+    constructor(node){
+        this.cache = {
+            node
+        }
     }
-}
+    isZikoUINode(){
+        return true
+    }
+    get node(){
+        return this.cache.node;
+    } 
+}
+
+globalThis.node = (node) => new ZikoUINode(node);