ziko 0.49.6 → 0.50.1

package/dist/ziko.cjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Wed Nov 26 2025 12:01:55 GMT+0100 (UTC+01:00)
+  Date : Tue Dec 02 2025 12:55:22 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
@@ -1179,37 +1179,29 @@ const __CACHE__ = {
     }
 };
 
-class UseChannel {
-    // private fields
+class UseIPC {
     #channel;
     #eventData;
     #handlers;
     #uuid;
     #subscribers;
-    #currentRooms; // now a Set for multiple rooms
-
+    #currentRooms;
     constructor(name = "") {
         this.#channel = new BroadcastChannel(name);
         this.#eventData = new Map();
         this.#handlers = new Map(); // Map<event, Array<{fn, rooms}>>
         this.#uuid = "ziko-channel:" + Random.string(10);
         this.#subscribers = new Set([this.#uuid]);
-        this.#currentRooms = new Set(); // multiple rooms
-
+        this.#currentRooms = new Set(); 
         this.#channel.addEventListener("message", (e) => {
             const { last_sent_event, userId, eventData, rooms } = e.data;
-
             if (userId === this.#uuid) return; // ignore own messages
-
             // broadcast if no rooms, else check intersection
             if (rooms && rooms.length && !rooms.some(r => this.#currentRooms.has(r))) return;
-
             this.#subscribers.add(userId);
             this.#eventData = new Map(eventData);
-
             const handlersList = this.#handlers.get(last_sent_event);
             if (!handlersList) return;
-
             handlersList.forEach(({ fn, rooms: handlerRooms }) => {
                 // trigger if listener has no room filter, or intersects subscriber rooms
                 if (!handlerRooms || handlerRooms.length === 0 ||
@@ -1223,24 +1215,20 @@ class UseChannel {
     emit(event, data, rooms) {
         this.#eventData.set(event, data);
         if(typeof rooms === 'string') rooms = [rooms];
-
         this.#channel.postMessage({
             eventData: Array.from(this.#eventData.entries()),
             last_sent_event: event,
             userId: this.#uuid,
             rooms: rooms && rooms.length ? rooms : undefined
         });
-
         return this;
     }
-
     on(event, handler = console.log, rooms) {
         if (!this.#handlers.has(event)) this.#handlers.set(event, []);
         if(typeof rooms === 'string') rooms = [rooms];
         this.#handlers.get(event).push({ fn: handler, rooms });
         return this;
     }
-
     off(event, handler) {
         if (!this.#handlers.has(event)) return this;
         this.#handlers.set(
@@ -1249,7 +1237,6 @@ class UseChannel {
         );
         return this;
     }
-
     once(event, handler, rooms) {
         const wrapper = (data) => {
             handler(data);
@@ -1258,95 +1245,115 @@ class UseChannel {
         this.on(event, wrapper, rooms);
         return this;
     }
-
     join(...rooms) {
         rooms.forEach(r => this.#currentRooms.add(r));
         return this;
     }
-
     leave(...rooms) {
         if (!rooms.length) this.#currentRooms.clear();
         else rooms.forEach(r => this.#currentRooms.delete(r));
         return this;
     }
-
     close() {
         this.#channel.close();
         return this;
     }
-
 }
 
-const useChannel = (name) => new UseChannel(name);
+const useIPC = (name) => new UseIPC(name);
 
-// To do : remove old items
-class UseStorage{
-    constructor(storage, globalKey, initialValue){
-        this.cache={
+class UseStorage {
+    constructor(storage, globalKey, initialValue, use_channel = true) {
+        this.cache = {
             storage,
             globalKey,
-            channel:useChannel(`Ziko:useStorage-${globalKey}`),
-            oldItemKeys:new Set()
+            channel: use_channel ? useIPC(`Ziko:useStorage-${globalKey}`) : null,
+            oldItemKeys: new Set()
         };
-        this.#init(initialValue);
-        this.#maintain();
+
+        this.#init(initialValue, use_channel);
     }
-    get items(){
-        return JSON.parse(this.cache.storage[this.cache.globalKey]??null);
+
+    get items() {
+        const raw = this.cache.storage.getItem(this.cache.globalKey);
+        if (!raw) return {};
+        try {
+            return JSON.parse(raw);
+        } catch {
+            return {};
+        }
     }
+
     #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("")
+        const items = this.items;
+        this.cache.oldItemKeys.forEach(k => delete this[k]);
+        for (const key in items) {
+            this[key] = items[key];
+            this.cache.oldItemKeys.add(key);
+        }
+    }
+    #init(initialValue, use_channel) {
+        if (use_channel && this.cache.channel) this.cache.channel.on("Ziko-Storage-Updated", () => this.#maintain());
+        if (!initialValue) {
+            this.#maintain();
+            return;
         }
+        if (this.cache.storage.getItem(this.cache.globalKey)) {
+            const existing = this.items;
+            Object.keys(existing).forEach(k => this.cache.oldItemKeys.add(k));
+            this.#maintain();
+        } 
         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));
+
+    set(data) {
+        this.cache.storage.setItem(this.cache.globalKey, JSON.stringify(data));
+        if (this.cache.channel) this.cache.channel.emit("Ziko-Storage-Updated", data);
         this.#maintain();
-        return this
+        return this;
     }
-    add(data){
-        const db={
+
+    add(data) {
+        this.set({
             ...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);
+    remove(...keys) {
+        const items = { ...this.items };
+        keys.forEach(key => {
+            delete items[key];
+            delete this[key];
+            this.cache.oldItemKeys.delete(key);
+        });
+        this.set(items);
         return this;
     }
-    get(key){
+    get(key) {
         return this.items[key];
     }
-    clear(){
+    clear() {
         this.cache.storage.removeItem(this.cache.globalKey);
+        this.cache.oldItemKeys.forEach(k => delete this[k]);
+        this.cache.oldItemKeys.clear();
         this.#maintain();
         return this;
     }
-
+    onStorageUpdated(callback) {
+        if (this.cache.channel) {
+            this.cache.channel.on("Ziko-Storage-Updated", callback);
+        }
+        return this;
+    }
 }
-const useLocaleStorage=(key,initialValue)=>new UseStorage(localStorage,key,initialValue);
-const useSessionStorage=(key,initialValue)=>new UseStorage(sessionStorage,key,initialValue);
+
+// factory functions
+const useLocaleStorage = (key, initialValue, use_channel = true) =>
+    new UseStorage(localStorage, key, initialValue, use_channel);
+
+const useSessionStorage = (key, initialValue, use_channel = true) =>
+    new UseStorage(sessionStorage, key, initialValue, use_channel);
 
 const __State__ = {
     store : new Map(),
@@ -1882,7 +1889,7 @@ var DomMethods = /*#__PURE__*/Object.freeze({
     unrenderAfter: unrenderAfter
 });
 
-const Events = {
+const EventsMap = {
     'Click' : [
         'Click',
         'DblClick',
@@ -1942,21 +1949,7 @@ const getEvent=(event = "")=>{
     return event.toLowerCase()
 };
 
-function event_controller(e, event_name, details_setter, customizer, push_object){
-    this.cache.currentEvent = event_name;
-    this.cache.event = e;
-    details_setter?.call(this);
-    customizer?.hasOwnProperty("prototype") ? customizer?.call(this) : customizer?.call(null, this);
-    // if(customizer?.hasOwnProperty("prototype")) customizer?.call(this)
-    // else customizer?.call(null, this)
-    if(this.cache.preventDefault[event_name]) e.preventDefault();
-    if(this.cache.stopPropagation[event_name]) e.stopPropagation();
-    if(this.cache.stopImmediatePropagation[event_name]) e.stopImmediatePropagation();
-    
-    if(this.cache.stream.enabled[event_name]&&push_object)this.cache.stream.history[event_name].push(push_object);
-    this.cache.callbacks[event_name]?.map(n=>n(this));
-}
-class __ZikoEvent__ {
+let ZikoEvent$1 = class ZikoEvent {
     constructor(target = null, Events = [], details_setter, customizer){
         this.target = target;
         this.cache = {
@@ -2100,92 +2093,24 @@ class __ZikoEvent__ {
 
         return this;
     }
-}
-
-// import { register_click_away_event } from "./custom-events/click-away.js";
-class ZikoEventClick extends __ZikoEvent__{
-    constructor(target, customizer){
-        super(target, Events.Click, details_setter$a, customizer);
-        // register_click_away_event(target.element)
-    }
-}
-function details_setter$a(){
-    if(this.currentEvent==="click") this.dx = 0;
-    else this.dx = 1;
-    // console.log(this.currentEvent)
-}
-const bind_click_event = (target, customizer) => new ZikoEventClick(target, customizer);
-
-class ZikoEventClipboard extends __ZikoEvent__{
-    constructor(target, customizer){
-        super(target, Events.Clipboard, details_setter$9, customizer);
-    }
-}
-function details_setter$9(){
-
-}
-const bind_clipboard_event = (target, customizer) => new ZikoEventClipboard(target, customizer);
-
-class ZikoEventCustom extends __ZikoEvent__{
-    constructor(target, events, customizer){
-        super(target, events, details_setter$8, customizer);
-    }
-    _register_events(events){
-        super._register_events(events, null, null, false);
-        return this;
-    }
-    emit(event_name, details = {}){
-        const event=new Event(event_name);
-        this.targetElement.dispatchEvent(event);
-        return this;
-    }
-    on(event_name, ...callbacks){
-        if(!this.cache.options.hasOwnProperty(event_name)) this._register_events([event_name]);
-        this.__onEvent(event_name, this.cache.options[event_name], {}, ...callbacks);
-        return this;
-    }
-}
-function details_setter$8(){
-
-}
-const bindCustomEvent = (target, events, customizer) => new ZikoEventCustom(target, events, customizer);
-
-class ZikoEventDrag extends __ZikoEvent__{
-    constructor(target, customizer){
-        super(target, Events.Drag, details_setter$7, customizer);
-    }
-}
-function details_setter$7(){
-
-}
-const bind_drag_event = (target, customizer) => new ZikoEventDrag(target, customizer);
-
-class ZikoEventFocus extends __ZikoEvent__{
-    constructor(target, customizer){
-        super(target, Events.Focus, details_setter$6, customizer);
-    }
-}
-function details_setter$6(){
-
-}
-const bind_focus_event = (target, customizer) => new ZikoEventFocus(target, customizer);
-
-class ZikoEventHash extends __ZikoEvent__{
-    constructor(target, customizer){
-        super(target, Events.Hash, details_setter$5, customizer);
-    }
-}
-function details_setter$5(){
+};
 
-}
-const bindHashEvent = (target, customizer) => new ZikoEventHash(target, customizer);
+function event_controller(e, event_name, details_setter, customizer, push_object){
+    this.cache.currentEvent = event_name;
+    this.cache.event = e;
+    details_setter?.call(this);
+    customizer?.hasOwnProperty("prototype") ? customizer?.call(this) : customizer?.call(null, this);
+    // if(customizer?.hasOwnProperty("prototype")) customizer?.call(this)
+    // else customizer?.call(null, this)
+    if(this.cache.preventDefault[event_name]) e.preventDefault();
+    if(this.cache.stopPropagation[event_name]) e.stopPropagation();
+    if(this.cache.stopImmediatePropagation[event_name]) e.stopImmediatePropagation();
+    
+    if(this.cache.stream.enabled[event_name]&&push_object)this.cache.stream.history[event_name].push(push_object);
+    this.cache.callbacks[event_name]?.map(n=>n(this));
+}
 
-class ZikoEventKey extends __ZikoEvent__{
-    constructor(target, customizer){
-        super(target, Events.Key, details_setter$4, customizer);
-    }
-}
-function details_setter$4(){
+function key_details_setter(){
     switch(this.currentEvent){
         case "keydown" : {
             this.kd = this.event.key;
@@ -2198,26 +2123,9 @@ function details_setter$4(){
         } break;
 
     }
-}
-const bind_key_event = (target, customizer) => new ZikoEventKey(target, customizer);
-
-class ZikoEventMouse extends __ZikoEvent__{
-    constructor(target, customizer){
-        super(target, Events.Mouse, details_setter$3, customizer);
-    }
-}
-function details_setter$3(){
-
-}
-const bind_mouse_event = (target, customizer) => new ZikoEventMouse(target, customizer);
+}
 
-class ZikoEventPointer extends __ZikoEvent__{
-    constructor(target, customizer){
-        super(target, Events.Ptr, details_setter$2, customizer);
-        this.isDown = false;
-    }
-}
-function details_setter$2(){
+function ptr_details_setter(){
     switch(this.currentEvent){
         case "pointerdown" : {
             this.dx = parseInt(this.event.offsetX);
@@ -2249,28 +2157,107 @@ function details_setter$2(){
     // if(this.currentEvent==="click") this.dx = 0
     // else this.dx = 1
     // console.log(this.currentEvent)
-}
-const bind_pointer_event = (target, customizer) => new ZikoEventPointer(target, customizer);
+}
 
-class ZikoEventTouch extends __ZikoEvent__{
-    constructor(target, customizer){
-        super(target, Events.Touch, details_setter$1, customizer);
-    }
+class ClickAwayEvent extends Event {
+  constructor(originalEvent, targetElement) {
+    super("clickaway", { bubbles: true, cancelable: true });
+    this.originalEvent = originalEvent;
+    this.targetElement = targetElement;
+  }
 }
-function details_setter$1(){
 
-}
-const bindTouchEvent = (target, customizer) => new ZikoEventTouch(target, customizer);
-
-class ZikoEventWheel extends __ZikoEvent__{
-    constructor(target, customizer){
-        super(target, Events.Wheel, details_setter, customizer);
+function register_click_away_event(element) {
+  console.log(element);
+  function handler(e) {
+    if (!element.contains(e.target)) {
+      const clickAwayEvent = new ClickAwayEvent(e, element);
+      element.dispatchEvent(clickAwayEvent);
     }
-}
-function details_setter(){
+  }
 
+  globalThis?.document?.addEventListener("click", handler);
+
+  return () => globalThis?.document?.removeEventListener("click", handler);
+  
 }
-const bind_wheel_event = (target, customizer) => new ZikoEventWheel(target, customizer);
+
+// // Example usage
+// const box = document.querySelector("#my-box");
+
+// const stop = listenClickAway(box);
+
+// box.addEventListener("clickaway", (e) => {
+//   console.log("Clicked outside box!", e);
+// });
+
+// // later, you can stop listening:
+// // stop();
+
+const bind_click_event = (target, customizer) => {
+    register_click_away_event(target.element);
+    return new ZikoEvent$1(
+        target,
+        EventsMap.Click,
+        null,
+        customizer
+    );
+};
+const bind_clipboard_event = (target, customizer) => new ZikoEvent$1(
+    target,
+    EventsMap.Clipboard,
+    null,
+    customizer
+);
+const bind_drag_event = (target, customizer) => new ZikoEvent$1(
+    target,
+    EventsMap.Drag,
+    null,
+    customizer
+);
+const bind_focus_event = (target, customizer) => new ZikoEvent$1(
+    target,
+    EventsMap.Focus,
+    null,
+    customizer
+);
+const bind_key_event = (target, customizer) => new ZikoEvent$1(
+    target,
+    EventsMap.Key, 
+    key_details_setter, 
+    customizer
+);
+const bind_mouse_event = (target, customizer) => new ZikoEvent$1(
+    target,
+    EventsMap.Mouse,
+    null,
+    customizer
+);
+const bind_pointer_event = (target, customizer) => new ZikoEvent$1(
+    target,
+    EventsMap.Ptr, 
+    ptr_details_setter, 
+    customizer
+);
+const bind_touch_event = (target, customizer) => new ZikoEvent$1(
+    target,
+    EventsMap.Touch,
+    null,
+    customizer
+);
+const bind_wheel_event = (target, customizer) => new ZikoEvent$1(
+    target,
+    EventsMap.Wheel,
+    null,
+    customizer
+);
+
+
+// function details_setter(){
+//     if(this.currentEvent==="click") this.dx = 0
+//     else this.dx = 1
+//     // console.log(this.currentEvent)
+// }
 
 const binderMap = {
   ptr: bind_pointer_event,
@@ -2285,7 +2272,7 @@ const binderMap = {
 
 const EventsMethodes = {};
 
-Object.entries(Events).forEach(([name, eventList]) => {
+Object.entries(EventsMap).forEach(([name, eventList]) => {
   eventList.forEach(event => {
     const methodName = `on${event}`;
     EventsMethodes[methodName] = function (...callbacks) {
@@ -4798,76 +4785,79 @@ const timeTaken = callback => {
 };
 
 class UseEventEmitter {
-    constructor() {
-      this.events = {};
-      this.maxListeners = 10; 
+    constructor(maxListeners = 10) {
+        this.events = {};
+        this.maxListeners = maxListeners;
     }
+
     on(event, listener) {
-      if (!this.events[event]) {
-        this.events[event] = [];
-      }
-      this.events[event].push(listener);  
-      if (this.events[event].length > this.maxListeners) {
-        console.warn(`Warning: Possible memory leak. Event '${event}' has more than ${this.maxListeners} listeners.`);
-      }
+        if (!this.events[event]) this.events[event] = [];
+        this.events[event].push(listener);
+        if (this.events[event].length > this.maxListeners) {
+            console.warn(`Warning: Possible memory leak. Event '${event}' has more than ${this.maxListeners} listeners.`);
+        }
+        return this;
     }
+
     once(event, listener) {
-      const onceListener = (data) => {
-        this.off(event, onceListener); // Remove the listener after it's been called
-        listener(data);
-      };
-      this.on(event, onceListener);
+        const wrapper = (...args) => {
+            this.off(event, wrapper);
+            listener(...args);
+        };
+        return this.on(event, wrapper);
     }
-  
+
     off(event, listener) {
-      const listeners = this.events[event];
-      if (listeners) {
+        const listeners = this.events[event];
+        if (!listeners) return this;
+
         const index = listeners.indexOf(listener);
         if (index !== -1) {
-          listeners.splice(index, 1);
+            listeners.splice(index, 1);
         }
-      }
+
+        return this;
     }
-  
+
     emit(event, data) {
-      const listeners = this.events[event];
-      if (listeners) {
-        listeners.forEach(listener => {
-          listener(data);
+        const listeners = this.events[event];
+        if (!listeners) return false;
+
+        // Make a copy so removing listeners inside callbacks doesn't affect iteration
+        [...listeners].forEach(listener => {
+            try {
+                listener(data);
+            } catch (e) {
+                console.error(`Error in listener for '${event}':`, e);
+            }
         });
-      }
-    }
-  
-    clear(event) {
-      if (event) {
-        delete this.events[event];
-      } else {
-        this.events = {};
-      }
+
+        return true;
     }
-  
-    setMaxListener(event, max) {
-      this.maxListeners = max;
+    remove(event){
+        delete this.events[event];  
+        return this; 
     }
-  
-    removeAllListeners(event) {
-      if (event) {
-        this.events[event] = [];
-      } else {
+    clear() {
         this.events = {};
-      }
+        return this;
     }
-  }
 
-const useEventEmitter=()=>new UseEventEmitter();
+    setMaxListeners(max) {
+        this.maxListeners = max;
+        return this;
+    }
+}
+
+const useEventEmitter = (maxListeners) => new UseEventEmitter(maxListeners);
 
 class ZikoUseFavIcon{
-    constructor(FavIcon,useEventEmitter=true){
+    constructor(FavIcon,withEmitter=true){
         this.#init();
         this.cache={
             Emitter:null
         };
-        if(useEventEmitter)this.useEventEmitter();
+        if(withEmitter)this.useEventEmitter();
         this.set(FavIcon);
     }
     #init(){     
@@ -4896,7 +4886,7 @@ class ZikoUseFavIcon{
     }
 
 }
-const useFavIcon=(FavIcon,useEventEmitter)=>new ZikoUseFavIcon(FavIcon,useEventEmitter);
+const useFavIcon=(FavIcon,withEmitter)=>new ZikoUseFavIcon(FavIcon,withEmitter);
 
 class ZikoMeta{
     constructor({viewport,charset,description,author,keywords}){
@@ -4976,7 +4966,7 @@ class ZikoUseTitle{
         return this;
     }
 }
-const useTitle=(title, useEventEmitter)=>new ZikoUseTitle(title, useEventEmitter);
+const useTitle$1=(title, useEventEmitter)=>new ZikoUseTitle(title, useEventEmitter);
 
 // import {useLink} from "./";
 class ZikoHead{
@@ -4984,7 +4974,7 @@ class ZikoHead{
         this.html = globalThis?.document?.documentElement;
         this.head = globalThis?.document?.head;
 
-        title && useTitle(title);
+        title && useTitle$1(title);
         lang && this.setLang(lang);
         icon && useFavIcon(icon);
         meta && useMeta(meta);
@@ -5221,7 +5211,7 @@ function useDerived(deriveFn, sources) {
     const subscribers = new Set();
 
     sources.forEach(source => {
-        const srcValue = source(); // getValue()
+        const srcValue = source();
         srcValue._subscribe(() => {
             {
                 const newVal = deriveFn(...sources.map(s => s().value));
@@ -5250,121 +5240,155 @@ const useReactive = (nested_value) => mapfun$1(
     nested_value
 );
 
-class UseThreed {
-    #workerContent;
+class UseThread {
+    #worker;
+    #callbacks = new Map();
+    #idCounter = 0;
+
     constructor() {
-        this.#workerContent = (
-            function (msg) {
+        const workerCode = `
+            this.onmessage = function(e) {
+                const { id, funStr, args, close } = e.data;
                 try {
-                    const func = new Function("return " + msg.data.fun)();
-                    let result = func();
-                    postMessage({ result });
+                    const func = new Function("return " + funStr)();
+                    const result = func(...args);
+                    postMessage({ id, result });
                 } catch (error) {
-                    postMessage({ error: error.message });
+                    postMessage({ id, error: error.message });
                 } finally {
-                    if (msg.data.close) self.close();
+                    if (close) self.close();
                 }
             }
-        ).toString();
-        this.blob = new Blob(["this.onmessage = " + this.#workerContent], { type: "text/javascript" });
-        this.worker = new Worker(window.URL.createObjectURL(this.blob));
+        `;
+        const blob = new Blob([workerCode], { type: "text/javascript" });
+        this.#worker = new Worker(URL.createObjectURL(blob));
+
+        this.#worker.addEventListener("message", (e) => {
+            const { id, result, error } = e.data;
+            const callback = this.#callbacks.get(id);
+            if (!callback) return;
+
+            callback(result, error);
+            this.#callbacks.delete(id);
+        });
     }
-    call(func, callback, close = true) {
-        this.worker.postMessage({
-            fun: func.toString(),
+    call(func, callback, args = [], close = true) {
+        if (typeof func !== "function") throw new TypeError("func must be a function");
+        const id = ++this.#idCounter;
+        this.#callbacks.set(id, callback);
+
+        this.#worker.postMessage({
+            id,
+            funStr: func.toString(),
+            args,
             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 UseThreed();
-    if (func) {
-        T.call(func, callback , close);
+    terminate() {
+        this.#worker.terminate();
     }
-    return T;
-};
+}
 
-class UseRoot {
-    constructor(PropsMap, {namespace = 'Ziko', register, ValidateCssProps = false} = {}){
-        this.currentPropsMap = PropsMap;
-        this.namespace = namespace;
-        this.ValidateCssProps = ValidateCssProps;
-        // this.pairs = {};
-        // this.#maintain()
-        this.use(PropsMap);
-    }
-    use(PropsMap){
-        if(this.ValidateCssProps) ValidateCssProps(PropsMap);
-        this.currentPropsMap = PropsMap;
-        this.#maintain();
-        return this;
+/*
+ [
+    {
+        query: '(min-width: 600px)',
+        callback: () => console.log(1)
+    },
+    {
+        query: '(max-width: 300px)',
+        callback: () => console.log(2)
     }
-    #maintain(){
-       const root = globalThis?.document?.documentElement?.style;
-       for(let prop in this.currentPropsMap){
-        const cssProp = this.namespace ? `--${this.namespace}-${prop}` : `--${prop}`;
-           root.setProperty(
-            cssProp, 
-            this.currentPropsMap[prop]
-            ); 
-        //    Object.assign(this.pairs, {
-        //     [prop] : `var(--${this.namespace}-${prop})`
-        //    })
-           Object.defineProperty(this, prop, {
-                value: `var(${cssProp})`,
-                writable: true,
-                configurable: true,
-                enumerable: false 
-           });
-       }
+ ]
+*/
+
+class UseMediaQuery {
+    #mediaQueryRules;
+    #fallback;
+    #lastCalledCallback = null;
+
+    constructor(mediaQueryRules = [], fallback = () => {}) {
+        this.#mediaQueryRules = mediaQueryRules;
+        this.#fallback = fallback;
+
+        this.#init();
     }
-}
 
-function ValidateCssProps(PropsMap){
-    const validProps = new Set(Object.keys(document.documentElement.style));
-    for (let key in PropsMap) {
-        if (!validProps.has(key)) {
-            throw new Error(`Invalid CSS property: "${key}"`);
-        }
+    // PRIVATE: check if ANY rule matches
+    #checkAllRules() {
+        return this.#mediaQueryRules.some(
+            ({ query }) => globalThis.matchMedia(query).matches
+        );
     }
-}
 
-const useRoot = (PropsMap, {namespace, register, ValidateCssProps} = {}) => new UseRoot(PropsMap, {namespace, register, ValidateCssProps});
+    // PRIVATE: installs listeners and initial checks
+    #init() {
+        this.#mediaQueryRules.forEach(({ query, callback }) => {
+            const mediaQueryList = globalThis.matchMedia(query);
 
-// Usage 
+            const checkMatches = () => {
+                const anyMatch = this.#checkAllRules();
 
-/*
-const Styles = {
- S1 : {
-  background : 'white',
-  color : 'darkblue'
-  border : '2px darkblue solid"'
- },
- S2 : {
-  background : 'darkblue',
-  color : 'white'
-  border : '2px green solid"'
- }
+                if (mediaQueryList.matches) {
+                    callback();
+                    this.#lastCalledCallback = callback;
+                } else if (!anyMatch && this.#lastCalledCallback !== this.#fallback) {
+                    this.#fallback();
+                    this.#lastCalledCallback = this.#fallback;
+                }
+            };
+
+            checkMatches();
+            mediaQueryList.addEventListener("change", checkMatches);
+        });
+    }
 }
-const {use, border, background, color} = useRoot(Style.S1)
 
-tags.p("Test useRoot ").style({
-  border,
-  color,
-  background,
-  padding : '10px'
-})
+const useMediaQuery = (mediaQueryRules, fallback) =>
+    new UseMediaQuery(mediaQueryRules, fallback);
+
+class UseTitle {
+    constructor(title = document.title, withEmitter = true) {
+        this.cache = {
+            emitter: null
+        };
+
+        if (withEmitter) this.useEventEmitter();
+        this.set(title);
+    }
 
-*/
+    useEventEmitter() {
+        this.cache.emitter = useEventEmitter();
+        return this;
+    }
+
+    setTitle(title) {
+        if (title !== document.title) {
+            document.title = title;
+
+            if (this.cache.emitter) {
+                this.cache.emitter.emit("ziko:title-changed", title);
+            }
+        }
+        return this;
+    }
+
+    get current() {
+        return document.title;
+    }
+
+    onChange(callback) {
+        if (this.cache.emitter) {
+            this.cache.emitter.on("ziko:title-changed", callback);
+        }
+        return this;
+    }
+}
+
+const useTitle = (title, withEmitter = true) => new UseTitle(title, withEmitter);
 
 let {sqrt, cos, sin, exp, log, cosh, sinh} = Math;
 // Math.abs = new Proxy(Math.abs, {
@@ -5459,26 +5483,15 @@ exports.UINode = UINode;
 exports.UISVGWrapper = UISVGWrapper;
 exports.UISwitch = UISwitch;
 exports.UIView = UIView;
-exports.UseRoot = UseRoot;
+exports.UseThread = UseThread;
 exports.Utils = Utils;
 exports.View = View;
 exports.ZikoApp = ZikoApp;
-exports.ZikoEventClick = ZikoEventClick;
-exports.ZikoEventClipboard = ZikoEventClipboard;
-exports.ZikoEventCustom = ZikoEventCustom;
-exports.ZikoEventDrag = ZikoEventDrag;
-exports.ZikoEventFocus = ZikoEventFocus;
-exports.ZikoEventHash = ZikoEventHash;
-exports.ZikoEventKey = ZikoEventKey;
-exports.ZikoEventMouse = ZikoEventMouse;
-exports.ZikoEventPointer = ZikoEventPointer;
-exports.ZikoEventTouch = ZikoEventTouch;
-exports.ZikoEventWheel = ZikoEventWheel;
+exports.ZikoEvent = ZikoEvent$1;
 exports.ZikoSPA = ZikoSPA;
 exports.ZikoUIFlex = ZikoUIFlex;
 exports.ZikoUISuspense = ZikoUISuspense;
 exports.ZikoUIText = ZikoUIText;
-exports.__ZikoEvent__ = __ZikoEvent__;
 exports.abs = abs;
 exports.accum = accum;
 exports.acos = acos$1;
@@ -5495,9 +5508,6 @@ exports.atan = atan;
 exports.atan2 = atan2;
 exports.atanh = atanh;
 exports.back = back;
-exports.bindCustomEvent = bindCustomEvent;
-exports.bindHashEvent = bindHashEvent;
-exports.bindTouchEvent = bindTouchEvent;
 exports.bind_click_event = bind_click_event;
 exports.bind_clipboard_event = bind_clipboard_event;
 exports.bind_drag_event = bind_drag_event;
@@ -5505,6 +5515,7 @@ exports.bind_focus_event = bind_focus_event;
 exports.bind_key_event = bind_key_event;
 exports.bind_mouse_event = bind_mouse_event;
 exports.bind_pointer_event = bind_pointer_event;
+exports.bind_touch_event = bind_touch_event;
 exports.bind_wheel_event = bind_wheel_event;
 exports.cartesianProduct = cartesianProduct;
 exports.ceil = ceil;
@@ -5631,15 +5642,15 @@ exports.tick = tick;
 exports.timeTaken = timeTaken;
 exports.time_memory_Taken = time_memory_Taken;
 exports.timeout = timeout;
-exports.useChannel = useChannel;
 exports.useDerived = useDerived;
 exports.useEventEmitter = useEventEmitter;
+exports.useIPC = useIPC;
 exports.useLocaleStorage = useLocaleStorage;
+exports.useMediaQuery = useMediaQuery;
 exports.useReactive = useReactive;
-exports.useRoot = useRoot;
 exports.useSessionStorage = useSessionStorage;
 exports.useState = useState;
-exports.useThread = useThread;
+exports.useTitle = useTitle;
 exports.wait = wait;
 exports.waitForUIElm = waitForUIElm;
 exports.waitForUIElmSync = waitForUIElmSync;