ziko 0.35.0 → 0.35.1

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 : Thu Aug 07 2025 11:37: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,7 +3500,7 @@
       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){

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 : Thu Aug 07 2025 11:37: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,7 +3494,7 @@ 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){

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.35.0",
+  "version": "0.35.1",
   "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/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(){

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);