ziko 0.34.2 → 0.35.1

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Mon Aug 04 2025 13:51:44 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){
@@ -7664,167 +7610,6 @@ const Graphics = {
     ...CANVAS
 };
 
-class ZikoUseChannel{
-    constructor(name = ""){
-        this.channel = new BroadcastChannel(name);
-        this.EVENTS_DATAS_PAIRS = new Map();
-        this.EVENTS_HANDLERS_PAIRS = new Map();
-        this.LAST_RECEIVED_EVENT = "";
-        this.UUID="ziko-channel"+Random.string(10);
-        this.SUBSCRIBERS = new Set([this.UUID]);
-    }
-    get broadcast(){
-        // update receiver
-        return this;
-    }
-    emit(event, data){
-        this.EVENTS_DATAS_PAIRS.set(event,data);
-        this.#maintainEmit(event);
-        return this;
-    }
-    on(event,handler=console.log){
-        this.EVENTS_HANDLERS_PAIRS.set(event,handler);
-        this.#maintainOn();
-        return this;
-    }
-    #maintainOn(){
-        this.channel.onmessage = (e) => {
-            this.LAST_RECEIVED_EVENT=e.data.last_sended_event;
-            const USER_ID=e.data.userId;
-            this.SUBSCRIBERS.add(USER_ID);
-            const Data=e.data.EVENTS_DATAS_PAIRS.get(this.LAST_RECEIVED_EVENT);
-            const Handler=this.EVENTS_HANDLERS_PAIRS.get(this.LAST_RECEIVED_EVENT);
-            if(Data && Handler)Handler(Data);
-          };
-          return this;
-    }
-    #maintainEmit(event){
-        this.channel.postMessage({
-            EVENTS_DATAS_PAIRS:this.EVENTS_DATAS_PAIRS,
-            last_sended_event:event,
-            userId:this.UUID
-        });
-        return this;
-    }
-    close(){
-        this.channel.close();
-        return this;
-    }
-}
-const useChannel = name => new ZikoUseChannel(name);
-
-// To do : remove old items
-class ZikoUseStorage{
-    constructor(storage, globalKey, initialValue){
-        this.cache={
-            storage,
-            globalKey,
-            channel:useChannel(`Ziko:useStorage-${globalKey}`),
-            oldItemKeys:new Set()
-        };
-        this.#init(initialValue);
-        this.#maintain();
-    }
-    get items(){
-        return JSON.parse(this.cache.storage[this.cache.globalKey]??null);
-    }
-    #maintain() {
-        for(let i in this.items)Object.assign(this, { [[i]]: this.items[i] });
-    }
-    #init(initialValue){
-        this.cache.channel=useChannel(`Ziko:useStorage-${this.cache.globalKey}`);
-        this.cache.channel.on("Ziko-Storage-Updated",()=>this.#maintain());
-        if(!initialValue)return;
-        if(this.cache.storage[this.cache.globalKey]){
-            Object.keys(this.items).forEach(key=>this.cache.oldItemKeys.add(key));
-            console.group("Ziko:useStorage");
-            console.warn(`Storage key '${this.cache.globalKey}' already exists. we will not overwrite it.`);
-            console.info(`%cWe'll keep the existing data.`,"background-color:#2222dd; color:gold;");
-            console.group("");
-        }
-        else this.set(initialValue);
-    }
-    set(data){
-        this.cache.storage.setItem(this.cache.globalKey,JSON.stringify(data));
-        this.cache.channel.emit("Ziko-Storage-Updated",{});
-        Object.keys(data).forEach(key=>this.cache.oldItemKeys.add(key));
-        this.#maintain();
-        return this
-    }
-    add(data){
-        const db={
-            ...this.items,
-            ...data
-        };
-        this.cache.storage.setItem(this.cache.globalKey,JSON.stringify(db));
-        this.#maintain();
-        return this;
-    }
-    remove(...keys){
-        const db={...this.items};
-        for(let i=0;i<keys.length;i++){
-            delete db[keys[i]];
-            delete this[keys[i]];
-        }
-        this.set(db);
-        return this;
-    }
-    get(key){
-        return this.items[key];
-    }
-    clear(){
-        this.cache.storage.removeItem(this.cache.globalKey);
-        this.#maintain();
-        return this;
-    }
-
-}
-const useLocaleStorage=(key,initialValue)=>new ZikoUseStorage(localStorage,key,initialValue);
-const useSessionStorage=(key,initialValue)=>new ZikoUseStorage(sessionStorage,key,initialValue);
-
-class ZikoUseThreed {
-    #workerContent;
-    constructor() {
-        this.#workerContent = (
-            function (msg) {
-                try {
-                    const func = new Function("return " + msg.data.fun)();
-                    let result = func();
-                    postMessage({ result });
-                } catch (error) {
-                    postMessage({ error: error.message });
-                } finally {
-                    if (msg.data.close) self.close();
-                }
-            }
-        ).toString();
-        this.blob = new Blob(["this.onmessage = " + this.#workerContent], { type: "text/javascript" });
-        this.worker = new Worker(window.URL.createObjectURL(this.blob));
-    }
-    call(func, callback, close = true) {
-        this.worker.postMessage({
-            fun: func.toString(),
-            close
-        });
-        this.worker.onmessage = function (e) {
-            if (e.data.error) {
-                console.error(e.data.error);
-            } else {
-                callback(e.data.result);
-            }
-        };
-        return this;
-    }
-}
-
-const useThread = (func, callback , close) => {
-    const T = new ZikoUseThreed();
-    if (func) {
-        T.call(func, callback , close);
-    }
-    return T;
-};
-
 class ZikoUseFavIcon{
     constructor(FavIcon,useEventEmitter=true){
         this.#init();
@@ -8265,6 +8050,167 @@ const App={
     // ...Params
 };
 
+class ZikoUseChannel{
+    constructor(name = ""){
+        this.channel = new BroadcastChannel(name);
+        this.EVENTS_DATAS_PAIRS = new Map();
+        this.EVENTS_HANDLERS_PAIRS = new Map();
+        this.LAST_RECEIVED_EVENT = "";
+        this.UUID="ziko-channel"+Random.string(10);
+        this.SUBSCRIBERS = new Set([this.UUID]);
+    }
+    get broadcast(){
+        // update receiver
+        return this;
+    }
+    emit(event, data){
+        this.EVENTS_DATAS_PAIRS.set(event,data);
+        this.#maintainEmit(event);
+        return this;
+    }
+    on(event,handler=console.log){
+        this.EVENTS_HANDLERS_PAIRS.set(event,handler);
+        this.#maintainOn();
+        return this;
+    }
+    #maintainOn(){
+        this.channel.onmessage = (e) => {
+            this.LAST_RECEIVED_EVENT=e.data.last_sended_event;
+            const USER_ID=e.data.userId;
+            this.SUBSCRIBERS.add(USER_ID);
+            const Data=e.data.EVENTS_DATAS_PAIRS.get(this.LAST_RECEIVED_EVENT);
+            const Handler=this.EVENTS_HANDLERS_PAIRS.get(this.LAST_RECEIVED_EVENT);
+            if(Data && Handler)Handler(Data);
+          };
+          return this;
+    }
+    #maintainEmit(event){
+        this.channel.postMessage({
+            EVENTS_DATAS_PAIRS:this.EVENTS_DATAS_PAIRS,
+            last_sended_event:event,
+            userId:this.UUID
+        });
+        return this;
+    }
+    close(){
+        this.channel.close();
+        return this;
+    }
+}
+const useChannel = name => new ZikoUseChannel(name);
+
+// To do : remove old items
+class ZikoUseStorage{
+    constructor(storage, globalKey, initialValue){
+        this.cache={
+            storage,
+            globalKey,
+            channel:useChannel(`Ziko:useStorage-${globalKey}`),
+            oldItemKeys:new Set()
+        };
+        this.#init(initialValue);
+        this.#maintain();
+    }
+    get items(){
+        return JSON.parse(this.cache.storage[this.cache.globalKey]??null);
+    }
+    #maintain() {
+        for(let i in this.items)Object.assign(this, { [[i]]: this.items[i] });
+    }
+    #init(initialValue){
+        this.cache.channel=useChannel(`Ziko:useStorage-${this.cache.globalKey}`);
+        this.cache.channel.on("Ziko-Storage-Updated",()=>this.#maintain());
+        if(!initialValue)return;
+        if(this.cache.storage[this.cache.globalKey]){
+            Object.keys(this.items).forEach(key=>this.cache.oldItemKeys.add(key));
+            console.group("Ziko:useStorage");
+            console.warn(`Storage key '${this.cache.globalKey}' already exists. we will not overwrite it.`);
+            console.info(`%cWe'll keep the existing data.`,"background-color:#2222dd; color:gold;");
+            console.group("");
+        }
+        else this.set(initialValue);
+    }
+    set(data){
+        this.cache.storage.setItem(this.cache.globalKey,JSON.stringify(data));
+        this.cache.channel.emit("Ziko-Storage-Updated",{});
+        Object.keys(data).forEach(key=>this.cache.oldItemKeys.add(key));
+        this.#maintain();
+        return this
+    }
+    add(data){
+        const db={
+            ...this.items,
+            ...data
+        };
+        this.cache.storage.setItem(this.cache.globalKey,JSON.stringify(db));
+        this.#maintain();
+        return this;
+    }
+    remove(...keys){
+        const db={...this.items};
+        for(let i=0;i<keys.length;i++){
+            delete db[keys[i]];
+            delete this[keys[i]];
+        }
+        this.set(db);
+        return this;
+    }
+    get(key){
+        return this.items[key];
+    }
+    clear(){
+        this.cache.storage.removeItem(this.cache.globalKey);
+        this.#maintain();
+        return this;
+    }
+
+}
+const useLocaleStorage=(key,initialValue)=>new ZikoUseStorage(localStorage,key,initialValue);
+const useSessionStorage=(key,initialValue)=>new ZikoUseStorage(sessionStorage,key,initialValue);
+
+class ZikoUseThreed {
+    #workerContent;
+    constructor() {
+        this.#workerContent = (
+            function (msg) {
+                try {
+                    const func = new Function("return " + msg.data.fun)();
+                    let result = func();
+                    postMessage({ result });
+                } catch (error) {
+                    postMessage({ error: error.message });
+                } finally {
+                    if (msg.data.close) self.close();
+                }
+            }
+        ).toString();
+        this.blob = new Blob(["this.onmessage = " + this.#workerContent], { type: "text/javascript" });
+        this.worker = new Worker(window.URL.createObjectURL(this.blob));
+    }
+    call(func, callback, close = true) {
+        this.worker.postMessage({
+            fun: func.toString(),
+            close
+        });
+        this.worker.onmessage = function (e) {
+            if (e.data.error) {
+                console.error(e.data.error);
+            } else {
+                callback(e.data.result);
+            }
+        };
+        return this;
+    }
+}
+
+const useThread = (func, callback , close) => {
+    const T = new ZikoUseThreed();
+    if (func) {
+        T.call(func, callback , close);
+    }
+    return T;
+};
+
 [
     App,
     Math$1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.34.2",
+  "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,14 +28,17 @@
       "import": "./dist/ziko.mjs",
       "require": "./dist/ziko.cjs"
     },
+    "./math": {
+      "import" : "./src/math/index.js"
+    },
     "./helpers": {
       "import" : "./src/__helpers__.js"
     },
     "./events": {
       "import": "./src/events/index.js"
     },
-    "./observer": {
-      "import": "./src/observer/index.js"
+    "./watch": {
+      "import": "./src/watch/index.js"
     },
     "./use": {
       "import": "./src/use/index.js"
@@ -48,7 +51,6 @@
       "import": "./src/tags/index.js"
     },
     "./src": "./src/index.js",
-    "./math": {},
     "./html": {},
     "./app": {},
     "./time": {},

package/src/index.js

@@ -6,8 +6,8 @@ import Data from "./data/index.js";
 import Reactivity from "./reactivity/index.js";
 import Graphics from "./graphics/index.js";
 
-import * as Events from "./events/index.js"
-import * as Use from "./use/index.js"
+// import * as Events from "./events/index.js"
+// import * as Use from "./use/index.js"
 
 import App,{__UI__,__HYDRATION_MAP__, __Config__, __CACHE__, defineParamsGetter, __HYDRATION__} from "./app";
 

package/src/reactivity/hooks/UI/index.js

@@ -1,6 +1,6 @@
-export * from "./useStyle";
+export * from "./useStyle.js";
 // export * from "./useTheme";
 // export * from "../Head/useTitle";
 // export * from "../Head/useFavIcon";
-export * from "./useMediaQuery"
+export * from "./useMediaQuery.js"
 export * from "./useRoot.js"

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/{elements/ZikoUIElement.js → constructors/ziko-ui-element.js}

@@ -1,3 +1,4 @@
+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";
@@ -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

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

package/src/ui/elements/flex/index.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../ZikoUIElement.js";
+import ZikoUIElement from "../../constructors/ziko-ui-element.js";
 class ZikoUIFlex extends ZikoUIElement {
   constructor(tag = "div", w = "100%", h = "100%") {
     super(tag ,"Flex");

package/src/ui/elements/grid/index.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../ZikoUIElement.js"
+import ZikoUIElement from "../../constructors/ziko-ui-element.js"
 class ZikoUIGrid extends ZikoUIElement {
     constructor(tag ="div", w = "50vw", h = "50vh") {
       super(tag,"Grid");