ziko 0.34.2 → 0.35.0

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 10:35:46 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
@@ -7664,167 +7664,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 +8104,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.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",
@@ -34,8 +34,8 @@
     "./events": {
       "import": "./src/events/index.js"
     },
-    "./observer": {
-      "import": "./src/observer/index.js"
+    "./watch": {
+      "import": "./src/watch/index.js"
     },
     "./use": {
       "import": "./src/use/index.js"

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

@@ -2,7 +2,7 @@ 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,

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

@@ -0,0 +1,5 @@
+class ZikoUINode {
+    constructor(){
+        
+    }
+}

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

package/src/ui/elements/io/Inputs/__helpers__.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../../ZikoUIElement.js";
+import ZikoUIElement from "../../../constructors/ziko-ui-element.js";
 import { Random } from "../../../../math/index.js";
 class ZikoUILabel extends ZikoUIElement{
     constructor(){

package/src/ui/elements/io/Inputs/input/index.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../../../ZikoUIElement.js";
+import ZikoUIElement from "../../../../constructors/ziko-ui-element.js";
 import { useInputEvent } from "../../../../../reactivity/index.js";
 class ZikoUIInput extends ZikoUIElement {
   constructor(type, name , value = "", datalist) {

package/src/ui/elements/io/Inputs/input-file/input-image.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../../../ZikoUIElement";
+import ZikoUIElement from "../../../../constructors/ziko-ui-element.js";
 import { btn } from "../../../misc";
 class ZikoUIInputImage extends ZikoUIElement {
     constructor(text = "File") {

package/src/ui/elements/io/Select/index.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../../ZikoUIElement";
+import ZikoUIElement from "../../../constructors/ziko-ui-element.js";
 import { ZikoUIInputOption } from "../Inputs/__helpers__";
 class ZikoUISelect extends ZikoUIElement {
     constructor(){

package/src/ui/elements/io/Textarea/index.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../../ZikoUIElement";
+import ZikoUIElement from "../../../constructors/ziko-ui-element.js";
 class ZikoUITextArea extends ZikoUIElement {
     constructor() {
       super();

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

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../ZikoUIElement.js";
+import ZikoUIElement from "../../constructors/ziko-ui-element.js";
 import {text} from "../text/index.js";
 class ZikoUILI extends ZikoUIElement{
   constructor(UI){

package/src/ui/elements/media/Image/figure.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../../ZikoUIElement";
+import ZikoUIElement from "../../../constructors/ziko-ui-element.js";
 class ZikoUIFigure extends ZikoUIElement{
     constructor(src,caption){
       super("figure","figure")

package/src/ui/elements/media/Image/image.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../../ZikoUIElement.js";
+import ZikoUIElement from "../../../constructors/ziko-ui-element.js";
 class ZikoUIImage extends ZikoUIElement {
     constructor(src,alt, w, h) {
       super("img","image");

package/src/ui/elements/media/__ZikoUIDynamicMediaELement__.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../ZikoUIElement.js";
+import ZikoUIElement from "../../constructors/ziko-ui-element.js";
 class __ZikoUIDynamicMediaElement__ extends ZikoUIElement {
     constructor(element, name) {
       super(element, name);

package/src/ui/elements/misc/hyperscript.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from '../ZikoUIElement.js';
+import ZikoUIElement from '../../constructors/ziko-ui-element.js';
 const _h=(tag, type, attributes, ...children)=>{
     const { name, style, ...attrs } = attributes;
     let element = new ZikoUIElement(tag, name, type);

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

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../ZikoUIElement.js";
+import ZikoUIElement from "../../constructors/ziko-ui-element.js";
 class ZikoUIHtmlTag extends ZikoUIElement {
   constructor(element) {
     super(element,"html");

package/src/ui/elements/misc/suspense.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../ZikoUIElement.js";
+import ZikoUIElement from "../../constructors/ziko-ui-element.js";
 // function loadComponent() {
 //     return new Promise((resolve) => {
 //       setTimeout(() => {

package/src/ui/elements/misc/xml-wrapper.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../ZikoUIElement";
+import ZikoUIElement from "../../constructors/ziko-ui-element.js";
 class ZikoUIXMLWrapper extends ZikoUIElement{
     constructor(XMLContent, type){
         super("div", "")

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

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../ZikoUIElement.js";
+import ZikoUIElement from "../../constructors/ziko-ui-element.js";
 const elements = ['Main', 'Header', 'Nav', 'Section', 'Article', 'Aside', 'Footer']
 
 // Storage for Classes and component functions

package/src/ui/elements/table/elements.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../ZikoUIElement.js"
+import ZikoUIElement from "../../constructors/ziko-ui-element.js"
 import { text } from "../text/text.js";
 class ZikoUITh extends ZikoUIElement{
     constructor(...ZikoUIElement){

package/src/ui/elements/table/table.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../ZikoUIElement.js"
+import ZikoUIElement from "../../constructors/ziko-ui-element.js"
 import { tbody,caption,ZikoUICaption,thead} from "./elements.js";
 import { matrix } from "../../../math/matrix/index.js";
 import { MatrixToTableUI } from "./utils.js";

package/src/ui/elements/text/__ZikoUIText__.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../ZikoUIElement.js";
+import ZikoUIElement from "../../constructors/ziko-ui-element.js";
 import { 
   ZikoUISubText,
   ZikoUISupText

package/src/ui/elements/text/heading.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../ZikoUIElement.js";
+import ZikoUIElement from "../../constructors/ziko-ui-element.js";
 class ZikoUIHeading extends ZikoUIElement {
     constructor(type = 1, value = "") {
       super(`h${type}`,`h${type}`);

package/src/ui/index.js

@@ -20,7 +20,7 @@ import * as Flex from "./elements/flex/index.js";
 import * as Grid from "./elements/grid/index.js";
 
 
-import ZikoUIElement from "./elements/ZikoUIElement.js";
+import ZikoUIElement from "./constructors/ziko-ui-element.js";
 
 export{
     ZikoUIElement

package/src/ui/tags/index.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../elements/ZikoUIElement.js";
+import ZikoUIElement from "../constructors/ziko-ui-element.js";
 import { HTMLTags, SVGTags } from "./tags.js";
 const _h=(tag, type, attributes, ...children)=>{
     const { name, style, ...attrs } = attributes;

package/src/ui/utils/index.js

@@ -1,4 +1,4 @@
-import ZikoUIElement from "../elements/ZikoUIElement.js";
+import ZikoUIElement from "../constructors/ziko-ui-element.js";
 const Id = (a) => document.getElementById(a);
 const Class = (a) => [...document.getElementsByClassName(a)];
 const $=(...selector)=>{

package/src/watch/dom-observer/ziko-observer.js

@@ -0,0 +1,15 @@
+class ZikoDomObserver{
+    constructor(UIElement, options = {}){
+        this.cache = {
+            target : UIElement,
+            options : options,
+            observer : null
+        }
+    }
+    disconnect(){
+
+    }
+    stream(){
+        
+    }
+}