ziko 0.49.6 → 0.50.1

package/dist/ziko.js

@@ -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 16:28: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
@@ -1078,35 +1078,6 @@
 
     // globalThis.node = (node) => new UINode(node);
 
-    function parseQueryParams$1(queryString) {
-        const params = {};
-        queryString.replace(/[A-Z0-9]+?=([\w|:|\/\.]*)/gi, (match) => {
-            const [key, value] = match.split('=');
-            params[key] = value;
-        });
-        return params;
-    }
-
-    function defineParamsGetter$1(target ){
-        Object.defineProperties(target, {
-            'QueryParams': {
-                get: function() {
-                    return parseQueryParams$1(globalThis.location.search.substring(1));
-                },
-                configurable: false,
-                enumerable: true 
-            },
-            'HashParams': {
-                get: function() {
-                    const hash = globalThis.location.hash.substring(1);
-                    return hash.split("#");
-                },
-                configurable: false,
-                enumerable: true 
-            }
-        });
-    }
-
     class UIStore extends Array {
         constructor(...args) {
             super(...args); 
@@ -1140,6 +1111,141 @@
     // create the singleton
     const __UI__ = new UIStore();
 
+    // __init__global__()
+    class UIElementCore extends UINode{
+      constructor(){
+        super();
+      }
+      init(element, name, type, render){
+        this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
+        if(typeof element === "string") {
+          switch(type){
+            case "html" : {
+              element = globalThis?.document?.createElement(element);
+              // console.log('1')
+            } break;
+            case "svg" : {
+              element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element); 
+              // console.log('2')
+            } break;
+            default : throw Error("Not supported")
+          }
+        }
+        else this.target = element?.parentElement;
+        Object.assign(this.cache, {
+          name,
+          isInteractive : false,
+          parent:null,
+          isBody:false,
+          isRoot:false,
+          isHidden: false,
+          isFrozzen:false,
+          legacyParent : null,
+          attributes: {},
+          filters: {},
+          temp:{}
+        });
+        this.events = {
+          ptr:null,
+          mouse:null,
+          wheel:null,
+          key:null,
+          drag:null,
+          drop:null,
+          click:null,
+          clipboard:null,
+          focus:null,
+          swipe:null,
+          custom:null,
+        };
+        this.observer={
+          resize:null,
+          intersection:null
+        };
+        if(element) Object.assign(this.cache,{element});
+        // useDefaultStyle && this.style({ 
+        //   position: "relative",
+        //   boxSizing:"border-box",
+        //   margin:0,
+        //   padding:0,
+        //   width : "auto",
+        //   height : "auto"
+        //  });
+        this.items = new UIStore();
+        globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
+        element && render && this?.render?.();
+        globalThis.__Ziko__.__UI__.push(this);
+      }
+      get element(){
+        return this.cache.element;
+      }
+        [Symbol.iterator]() {
+        return this.items[Symbol.iterator]();
+      }
+      maintain() {
+        for (let i = 0; i < this.items.length; i++) {
+          Object.defineProperty(this, i, {
+            value: this.items[i],
+            writable: true,
+            configurable: true,
+            enumerable: false 
+            });
+        }
+      }
+      isInteractive(){
+        return this.cache.isInteractive;
+      }
+      isUIElement(){
+        return true;
+      }
+    }
+
+    function register_to_class(target, ...mixins){
+        mixins.forEach(n => _register_to_class_(target, n));
+    }
+    function _register_to_class_(target, mixin) {
+      const descriptors = Object.getOwnPropertyDescriptors(mixin);
+      for (const key of Reflect.ownKeys(descriptors)) {
+        const desc = descriptors[key];
+        if ('get' in desc || 'set' in desc || typeof desc.value !== 'function') {
+          Object.defineProperty(Object.getPrototypeOf(target), key, desc);
+        } else if (typeof desc.value === 'function') {
+          if (!Object.getPrototypeOf(target).hasOwnProperty(key)) {
+            Object.defineProperty(Object.getPrototypeOf(target), key, desc);
+          }
+        }
+      }
+    }
+
+    function parseQueryParams$1(queryString) {
+        const params = {};
+        queryString.replace(/[A-Z0-9]+?=([\w|:|\/\.]*)/gi, (match) => {
+            const [key, value] = match.split('=');
+            params[key] = value;
+        });
+        return params;
+    }
+
+    function defineParamsGetter$1(target ){
+        Object.defineProperties(target, {
+            'QueryParams': {
+                get: function() {
+                    return parseQueryParams$1(globalThis.location.search.substring(1));
+                },
+                configurable: false,
+                enumerable: true 
+            },
+            'HashParams': {
+                get: function() {
+                    const hash = globalThis.location.hash.substring(1);
+                    return hash.split("#");
+                },
+                configurable: false,
+                enumerable: true 
+            }
+        });
+    }
+
     const __Config__ = {
         default:{
             target:null,
@@ -1183,37 +1289,29 @@
         }
     };
 
-    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 ||
@@ -1227,24 +1325,20 @@
         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(
@@ -1253,7 +1347,6 @@
             );
             return this;
         }
-
         once(event, handler, rooms) {
             const wrapper = (data) => {
                 handler(data);
@@ -1262,368 +1355,148 @@
             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);
             }
-            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]];
+        #init(initialValue, use_channel) {
+            if (use_channel && this.cache.channel) this.cache.channel.on("Ziko-Storage-Updated", () => this.#maintain());
+            if (!initialValue) {
+                this.#maintain();
+                return;
             }
-            this.set(db);
-            return this;
-        }
-        get(key){
-            return this.items[key];
+            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);
         }
-        clear(){
-            this.cache.storage.removeItem(this.cache.globalKey);
+
+        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;
         }
 
+        add(data) {
+            this.set({
+                ...this.items,
+                ...data
+            });
+            return this;
+        }
+        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) {
+            return this.items[key];
+        }
+        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);
-
-    const __State__ = {
-        store : new Map(),
-        index : 0,
-        session_storage : null,
-        register: function(state){
-            if(!undefined.SSR && undefined.DEV){
-                if(!this.session) this.session_storage = useSessionStorage('ziko-state', {});
-                const savedValue = this.session_storage.get(this.index);
-                if(!savedValue) this.session_storage.add({[this.index] : state.value});
-                else state.value = savedValue;
-            }
-            this.store.set(this.index++, state);
-        },
-        update: function(index, value){
-           if(!undefined.SSR && undefined.DEV){
-                this.session_storage.add({[index] : value});
-            } 
-        },
-
-    };
-
-    function __init__global__(){
-        if ( !globalThis?.__Ziko__ ){
-            globalThis.__Ziko__ = {
-                        __UI__,
-                        __HYDRATION__,
-                        __State__,
-                        __Config__,
-                        __CACHE__,
-                    };
-            defineParamsGetter$1(__Ziko__);
-        }
-    }
-
-    __init__global__();
-    class UIElementCore extends UINode{
-      constructor(){
-        super();
-      }
-      init(element, name, type, render){
-        this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
-        if(typeof element === "string") {
-          switch(type){
-            case "html" : {
-              element = globalThis?.document?.createElement(element);
-              // console.log('1')
-            } break;
-            case "svg" : {
-              element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element); 
-              // console.log('2')
-            } break;
-            default : throw Error("Not supported")
-          }
-        }
-        else this.target = element?.parentElement;
-        Object.assign(this.cache, {
-          name,
-          isInteractive : false,
-          parent:null,
-          isBody:false,
-          isRoot:false,
-          isHidden: false,
-          isFrozzen:false,
-          legacyParent : null,
-          attributes: {},
-          filters: {},
-          temp:{}
-        });
-        this.events = {
-          ptr:null,
-          mouse:null,
-          wheel:null,
-          key:null,
-          drag:null,
-          drop:null,
-          click:null,
-          clipboard:null,
-          focus:null,
-          swipe:null,
-          custom:null,
-        };
-        this.observer={
-          resize:null,
-          intersection:null
-        };
-        if(element) Object.assign(this.cache,{element});
-        // useDefaultStyle && this.style({ 
-        //   position: "relative",
-        //   boxSizing:"border-box",
-        //   margin:0,
-        //   padding:0,
-        //   width : "auto",
-        //   height : "auto"
-        //  });
-        this.items = new UIStore();
-        globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
-        element && render && this?.render?.();
-        globalThis.__Ziko__.__UI__.push(this);
-      }
-      get element(){
-        return this.cache.element;
-      }
-        [Symbol.iterator]() {
-        return this.items[Symbol.iterator]();
-      }
-      maintain() {
-        for (let i = 0; i < this.items.length; i++) {
-          Object.defineProperty(this, i, {
-            value: this.items[i],
-            writable: true,
-            configurable: true,
-            enumerable: false 
-            });
-        }
-      }
-      isInteractive(){
-        return this.cache.isInteractive;
-      }
-      isUIElement(){
-        return true;
-      }
-    //   get st(){
-    //     return this.cache.style;
-    //   }
-    //   get attr(){
-    //     return this.cache.attributes;
-    //   }
-    //   get evt(){
-    //     return this.events;
-    //   }
-    //   get html(){
-    //     return this.element.innerHTML;
-    //   }
-    //   get text(){
-    //     return this.element.textContent;
-    //   }
-    //   get isBody(){
-    //     return this.element === globalThis?.document.body;
-    //   }
-    //   get parent(){
-    //     return this.cache.parent;
-    //   }
-    //   get width(){
-    //     return this.element.getBoundingClientRect().width;
-    //   }
-    //   get height(){
-    //     return this.element.getBoundingClientRect().height;
-    //   }
-    //   get top(){
-    //     return this.element.getBoundingClientRect().top;
-    //   }
-    //   get right(){
-    //     return this.element.getBoundingClientRect().right;
-    //   }
-    //   get bottom(){
-    //     return this.element.getBoundingClientRect().bottom;
-    //   }
-    //   get left(){
-    //     return this.element.getBoundingClientRect().left;
-    //   }
-    //   clone(render=false) {
-    //     // UI.__proto__=this.__proto__;
-    //     // if(this.items.length){
-    //     //   const items = [...this.items].map(n=>n.clone());
-    //     //   UI.append(...items);
-    //     // }
-    //     // else UI.element=this.element.cloneNode(true);
-    //     // return UI.mount(render);
-    //   }
-
-    //   freeze(freeze){
-    //     this.cache.isFrozzen=freeze;
-    //     return this;
-    //   }
-      // setTarget(tg) {
-      //   if(this.isBody) return ;
-      //   if (tg?.isUIElement) tg = tg.element;
-      //   this.unmount();
-      //   this.target = tg;
-      //   this.mount();
-      //   return this;
-      // }
-    //   describe(label){
-    //     if(label)this.setAttr("aria-label",label)
-    //   }
-    //   get children() {
-    //     return [...this.element.children];
-    //   }
-    //   get cloneElement() {
-    //     return this.element.cloneNode(true);
-    //   }
-    //   setClasses(...value) {
-    //     this.setAttr("class", value.join(" "));
-    //     return this;
-    //   }
-    //   get classes(){
-    //     const classes=this.element.getAttribute("class");
-    //     return classes===null?[]:classes.split(" ");
-    //   }
-    //   addClass() {
-    //     /*this.setAttr("class", value);
-    //         return this;*/
-    //   }
-    //   setId(id) {
-    //     this.setAttr("id", id);
-    //     return this;
-    //   }
-    //   get id() {
-    //     return this.element.getAttribute("id");
-    //   }
-    //   onSwipe(width_threshold, height_threshold,...callbacks){
-    //     if(!this.events.swipe)this.events.swipe = useSwipeEvent(this, width_threshold, height_threshold);
-    //     this.events.swipe.onSwipe(...callbacks);
-    //     return this;
-    //   }
-      // To Fix
-      // onKeysDown({keys=[],callback}={}){
-      //   if(!this.events.key)this.events.key = useKeyEvent(this);
-      //   this.events.key.handleSuccessifKeys({keys,callback});
-      //   return this;
-      // }
-      // onSelect(...callbacks){
-      //   if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
-      //   this.events.clipboard.onSelect(...callbacks);
-      //   return this;
-      // }
-    //   on(event_name,...callbacks){
-    //     if(!this.events.custom)this.events.custom = useCustomEvent(this);
-    //     this.events.custom.on(event_name,...callbacks);
-    //     return this;
-    //   }
-    //   emit(event_name,detail={}){
-    //     if(!this.events.custom)this.events.custom = useCustomEvent(this);
-    //     this.events.custom.emit(event_name,detail);
-    //     return this;
-    //   }
-    //   watchAttr(callback){
-    //     if(!this.observer.attr)this.observer.attr = watchAttr(this,callback);
-    //     return this;
-    //   }
-    //   watchChildren(callback){
-    //     if(!this.observer.children)this.observer.children = watchChildren(this,callback);
-    //     return this;
-    //   }
-    //   watchSize(callback){
-    //     if(!this.observer.resize)this.observer.resize = watchSize(this,callback);
-    //     this.observer.resize.start();
-    //     return this;
-    //   }
-    //   watchIntersection(callback,config){
-    //     if(!this.observer.intersection)this.observer.intersection = watchIntersection(this,callback,config);
-    //     this.observer.intersection.start();
-    //     return this;
-    //   }
-
-    }
-
-    function register_to_class(target, ...mixins){
-        mixins.forEach(n => _register_to_class_(target, n));
-    }
-    function _register_to_class_(target, mixin) {
-      const descriptors = Object.getOwnPropertyDescriptors(mixin);
-      for (const key of Reflect.ownKeys(descriptors)) {
-        const desc = descriptors[key];
-        if ('get' in desc || 'set' in desc || typeof desc.value !== 'function') {
-          Object.defineProperty(Object.getPrototypeOf(target), key, desc);
-        } else if (typeof desc.value === 'function') {
-          if (!Object.getPrototypeOf(target).hasOwnProperty(key)) {
-            Object.defineProperty(Object.getPrototypeOf(target), key, desc);
-          }
+
+    // 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);
+
+    var __State__ = {
+        store : new Map(),
+        index : 0,
+        session_storage : null,
+        register: function(state){
+            if(!undefined.SSR && undefined.DEV){
+                if(!this.session) this.session_storage = useSessionStorage('ziko-state', {});
+                const savedValue = this.session_storage.get(this.index);
+                if(!savedValue) this.session_storage.add({[this.index] : state.value});
+                else state.value = savedValue;
+            }
+            this.store.set(this.index++, state);
+        },
+        update: function(index, value){
+           if(!undefined.SSR && undefined.DEV){
+                this.session_storage.add({[index] : value});
+            } 
+        },
+
+    };
+
+    function __init__global__(){
+        if ( !globalThis?.__Ziko__ ){
+            globalThis.__Ziko__ = {
+                        __UI__,
+                        __HYDRATION__,
+                        __State__,
+                        __Config__,
+                        __CACHE__,
+                    };
+            defineParamsGetter$1(__Ziko__);
         }
-      }
     }
 
     if(!globalThis.__Ziko__) __init__global__();
@@ -1886,7 +1759,11 @@
         unrenderAfter: unrenderAfter
     });
 
-    const Events = {
+    const EventsMap = {
+        'Custom' : [
+            'emit',
+            'on'
+        ],
         'Click' : [
             'Click',
             'DblClick',
@@ -1946,21 +1823,7 @@
         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__ {
+    class ZikoEvent {
         constructor(target = null, Events = [], details_setter, customizer){
             this.target = target;
             this.cache = {
@@ -2104,92 +1967,24 @@
 
             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;
@@ -2202,26 +1997,9 @@
             } 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);
@@ -2253,28 +2031,135 @@
         // 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(){
 
+    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);
+        }
+      }
+
+      globalThis?.document?.addEventListener("click", handler);
+
+      return () => globalThis?.document?.removeEventListener("click", handler);
+      
     }
-    const bindTouchEvent = (target, customizer) => new ZikoEventTouch(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(
+            target,
+            EventsMap.Click,
+            null,
+            customizer
+        );
+    };
+    const bind_clipboard_event = (target, customizer) => new ZikoEvent(
+        target,
+        EventsMap.Clipboard,
+        null,
+        customizer
+    );
+    const bind_drag_event = (target, customizer) => new ZikoEvent(
+        target,
+        EventsMap.Drag,
+        null,
+        customizer
+    );
+    const bind_focus_event = (target, customizer) => new ZikoEvent(
+        target,
+        EventsMap.Focus,
+        null,
+        customizer
+    );
+    const bind_key_event = (target, customizer) => new ZikoEvent(
+        target,
+        EventsMap.Key, 
+        key_details_setter, 
+        customizer
+    );
+    const bind_mouse_event = (target, customizer) => new ZikoEvent(
+        target,
+        EventsMap.Mouse,
+        null,
+        customizer
+    );
+    const bind_pointer_event = (target, customizer) => new ZikoEvent(
+        target,
+        EventsMap.Ptr, 
+        ptr_details_setter, 
+        customizer
+    );
+    const bind_touch_event = (target, customizer) => new ZikoEvent(
+        target,
+        EventsMap.Touch,
+        null,
+        customizer
+    );
+    const bind_wheel_event = (target, customizer) => new ZikoEvent(
+        target,
+        EventsMap.Wheel,
+        null,
+        customizer
+    );
+
+
+    // function details_setter(){
+    //     if(this.currentEvent==="click") this.dx = 0
+    //     else this.dx = 1
+    //     // console.log(this.currentEvent)
+    // }
 
-    class ZikoEventWheel extends __ZikoEvent__{
-        constructor(target, customizer){
-            super(target, Events.Wheel, details_setter, customizer);
+    class ZikoCustomEvent extends ZikoEvent{
+        constructor(target, events, customizer){
+            super(target, events, details_setter, customizer);
+        }
+        _register_events(events){
+            super._register_events(events, null, null, false);
+            return this;
+        }
+        emit(event_name, detail = {}){
+            const event = new CustomEvent(event_name, {
+                detail,
+                bubbles: true,
+                cancelable: true
+            });
+            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(){
 
     }
-    const bind_wheel_event = (target, customizer) => new ZikoEventWheel(target, customizer);
+    const bind_custom_event = (target, events, customizer) => new ZikoCustomEvent(target, events, customizer);
 
     const binderMap = {
       ptr: bind_pointer_event,
@@ -2287,14 +2172,26 @@
       wheel : bind_wheel_event
     };
 
-    const EventsMethodes = {};
+    const EventsMethodes = {
+      on(event_name,...callbacks){
+        if(!this.events.custom)this.events.custom = bind_custom_event(this);
+        this.events.custom.on(event_name,...callbacks);
+        return this;
+      },
+      emit(event_name,detail={}){
+        if(!this.events.custom)this.events.custom = bind_custom_event(this);
+        this.events.custom.emit(event_name,detail);
+        return this;
+      }
+    };
 
-    Object.entries(Events).forEach(([name, eventList]) => {
+    Object.entries(EventsMap).forEach(([name, eventList]) => {
+      const lname = name.toLowerCase();
       eventList.forEach(event => {
         const methodName = `on${event}`;
         EventsMethodes[methodName] = function (...callbacks) {
-          if (!this.events[name]) this.events[name] = binderMap[name.toLowerCase()](this);
-          this.events[name][methodName](...callbacks);
+          if (!this.events[lname]) this.events[lname] = binderMap[lname](this);
+          this.events[lname][methodName](...callbacks);
           return this;
         };
       });
@@ -2331,182 +2228,38 @@
                 Object.assign(this.element.style, {[key] : getter.value});
                 getter._subscribe(
                     (newValue) => {
-                        console.log({newValue});
-                        Object.assign(this.element.style, {[key] : newValue});
-                    },
-                    // this 
-                );
-            }
-            else Object.assign(this.element.style, {[key] : value});
-        }
-        return this;
-    }
-    function size(width, height){
-        return this.style({width, height})
-    }
-    function hide(){
-
-    }
-    function show(){
-
-    }
-    function animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
-        this.element?.animate(keyframe,{duration, iterations, easing});
-        return this;
-    }
-
-    var StyleMethods = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        animate: animate,
-        hide: hide,
-        show: show,
-        size: size,
-        style: style
-    });
-
-    function EVENT_CONTROLLER(e,EVENT,setter,push_object){
-        this.event=e;
-        if(this.cache.preventDefault[EVENT])e.preventDefault();
-        console.log({setter});
-        if(setter)setter();
-        if(this.cache.stream.enabled[EVENT]&&push_object)this.cache.stream.history[EVENT].push(push_object);
-        this.cache.callbacks[EVENT].map(n=>n(this));
-        return this;
-    }
-    class ZikoEvent{
-        constructor(target){
-            this.target=null;
-            this.setTarget(target);
-            this.__dispose=this.dispose.bind(this);
-            // this.EventIndex=Garbage.Pointer.data.length;
-            // Garbage.Pointer.data.push({event:this,index:this.EventIndex});
-        }
-        get targetElement(){
-            return this.target.element
-        }
-        setTarget(UI){
-            this.target=UI;
-            return this;
-        }
-        __handle(event,handler,dispose){
-            const EVENT=(event==="drag")?event:`${this.cache.prefixe}${event}`;
-            this.dispose(dispose);
-            this.targetElement?.addEventListener(EVENT,handler);
-            return this;   
-        }
-        __onEvent(event,dispose,...callbacks){
-            if(callbacks.length===0){
-                if(this.cache.callbacks.length>1){
-                    this.cache.callbacks.map(n=>e=>n.call(this,e));
-                }   
-                else {
-                    return this;
-                }
-            }
-            else this.cache.callbacks[event]=callbacks.map(n=>e=>n.call(this,e));
-            this.__handle(event,this.__controller[event],dispose);
-            return this;  
-        }
-        preventDefault(config={}){
-            Object.assign(this.cache.preventDefault,config);
-            return this;
-        }
-        pause(config={}){
-            const all=Object.fromEntries(Object.keys(this.cache.stream.enabled).map(n=>[n,true]));
-            config={...all,...config};
-            for(let key in config){
-                if(config[key]){
-                    this.targetElement?.removeEventListener(`${this.cache.prefixe}${key}`,this.__controller[`${this.cache.prefixe}${key}`]);
-                    this.cache.paused[`${this.cache.prefixe}${key}`]=true;
-                }
-            }
-            return this;
-         }
-        resume(config={}){
-            const all=Object.fromEntries(Object.keys(this.cache.stream.enabled).map(n=>[n,true]));
-            config={...all,...config};
-            for(let key in config){
-                if(config[key]){
-                    this.targetElement?.addEventListener(`${this.cache.prefixe}${key}`,this.__controller[`${this.cache.prefixe}${key}`]);
-                    this.cache.paused[`${this.cache.prefixe}${key}`]=false;
-                }
-            }
-            return this;
-         }
-        dispose(config={}){
-            this.pause(config);
-            return this;
-         }
-        stream(config={}){
-            this.cache.stream.t0=Date.now();
-            const all=Object.fromEntries(Object.keys(this.cache.stream.enabled).map(n=>[n,true]));
-            config={...all,...config};
-            Object.assign(this.cache.stream.enabled,config);
-            return this;
-         }
-        clear(config={}){
-            const all=Object.fromEntries(Object.keys(this.cache.stream.clear).map(n=>[n,true]));
-            config={...all,...config};
-            for(let key in config){
-                if(config[key]){
-                    this.cache.stream.history[key]=[];
-                }
+                        console.log({newValue});
+                        Object.assign(this.element.style, {[key] : newValue});
+                    },
+                    // this 
+                );
             }
-            return this;
+            else Object.assign(this.element.style, {[key] : value});
         }
+        return this;
+    }
+    function size(width, height){
+        return this.style({width, height})
+    }
+    function hide(){
+
+    }
+    function show(){
+
+    }
+    function animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
+        this.element?.animate(keyframe,{duration, iterations, easing});
+        return this;
     }
 
-    const custom_event_controller=event_name=>function(e){
-        EVENT_CONTROLLER.call(this,e,event_name,null,null);
-    };
-    class ZikoCustomEvent extends ZikoEvent{
-        constructor(target){
-            super(target);
-            this.event=null;
-            this.cache={
-                prefixe:"",
-                preventDefault:{
-                },
-                paused:{
-                },
-                stream:{
-                    enabled:{
-                    },
-                    clear:{
-                    },
-                    history:{
-                    }
-                },
-                callbacks:{
-                }
-            };
-            this.__controller={
-            };
-        }
-        #init(event_name){
-            this.cache.preventDefault[event_name]=false;
-            this.cache.paused[event_name]=false;
-            this.cache.stream.enabled=false;
-            this.cache.stream.clear=false;
-            this.cache.stream.history=[];
-            this.cache.callbacks[event_name]=[];
-            this.__controller[event_name]=custom_event_controller(event_name).bind(this);
-            return this;
-        }
-        on(event_name,...callbacks){
-            if(!(this.__controller[event_name]))this.#init(event_name);
-            this.__onEvent(event_name,{},...callbacks);
-            return this;
-         }  
-        emit(event_name,detail={}){
-            if(!(this.__controller[event_name]))this.#init(event_name);
-            this.detail=detail;
-            const event=new Event(event_name);
-            this.targetElement.dispatchEvent(event);
-            return this;
-        }
-    }
-    const useCustomEvent=target=>new ZikoCustomEvent(target);
+    var StyleMethods = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        animate: animate,
+        hide: hide,
+        show: show,
+        size: size,
+        style: style
+    });
 
     let UIElement$1 = class UIElement extends UIElementCore{
       constructor({element, name ='', type='html', render = __Ziko__.__Config__.default.render}={}){
@@ -2521,6 +2274,8 @@
           IndexingMethods, 
           EventsMethodes
         );
+
+        // console.log(EventsMethodes)
         if(element)this.init(element, name, type, render);
       }
       get element(){
@@ -2658,16 +2413,16 @@
       //   this.events.clipboard.onSelect(...callbacks);
       //   return this;
       // }
-      on(event_name,...callbacks){
-        if(!this.events.custom)this.events.custom = useCustomEvent(this);
-        this.events.custom.on(event_name,...callbacks);
-        return this;
-      }
-      emit(event_name,detail={}){
-        if(!this.events.custom)this.events.custom = useCustomEvent(this);
-        this.events.custom.emit(event_name,detail);
-        return this;
-      }
+      // on(event_name,...callbacks){
+      //   if(!this.events.custom)this.events.custom = useCustomEvent(this);
+      //   this.events.custom.on(event_name,...callbacks);
+      //   return this;
+      // }
+      // emit(event_name,detail={}){
+      //   if(!this.events.custom)this.events.custom = useCustomEvent(this);
+      //   this.events.custom.emit(event_name,detail);
+      //   return this;
+      // }
       // watchAttr(callback){
       //   if(!this.observer.attr)this.observer.attr = watchAttr(this,callback);
       //   return this;
@@ -4801,209 +4556,7 @@
         return r;
     };
 
-    class UseEventEmitter {
-        constructor() {
-          this.events = {};
-          this.maxListeners = 10; 
-        }
-        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.`);
-          }
-        }
-        once(event, listener) {
-          const onceListener = (data) => {
-            this.off(event, onceListener); // Remove the listener after it's been called
-            listener(data);
-          };
-          this.on(event, onceListener);
-        }
-      
-        off(event, listener) {
-          const listeners = this.events[event];
-          if (listeners) {
-            const index = listeners.indexOf(listener);
-            if (index !== -1) {
-              listeners.splice(index, 1);
-            }
-          }
-        }
-      
-        emit(event, data) {
-          const listeners = this.events[event];
-          if (listeners) {
-            listeners.forEach(listener => {
-              listener(data);
-            });
-          }
-        }
-      
-        clear(event) {
-          if (event) {
-            delete this.events[event];
-          } else {
-            this.events = {};
-          }
-        }
-      
-        setMaxListener(event, max) {
-          this.maxListeners = max;
-        }
-      
-        removeAllListeners(event) {
-          if (event) {
-            this.events[event] = [];
-          } else {
-            this.events = {};
-          }
-        }
-      }
-
-    const useEventEmitter=()=>new UseEventEmitter();
-
-    class ZikoUseFavIcon{
-        constructor(FavIcon,useEventEmitter=true){
-            this.#init();
-            this.cache={
-                Emitter:null
-            };
-            if(useEventEmitter)this.useEventEmitter();
-            this.set(FavIcon);
-        }
-        #init(){     
-            this.__FavIcon__ = document.querySelector("link[rel*='icon']") || document?.createElement('link');   
-            this.__FavIcon__.type = 'image/x-icon';
-            this.__FavIcon__.rel = 'shortcut icon';
-            return this;
-        }
-        set(href){
-            if(href!==this.__FavIcon__.href){
-                this.__FavIcon__.href=href;
-                if(this.cache.Emitter)this.cache.Emitter.emit("ziko:favicon-changed");
-            }
-            return this;
-        }
-        get current(){
-            return document.__FavIcon__.href;
-        }
-        onChange(callback){
-            if(this.cache.Emitter)this.cache.Emitter.on("ziko:favicon-changed",callback);
-            return this;
-        }
-        useEventEmitter(){
-            this.cache.Emitter=useEventEmitter();
-            return this;
-        }
-
-    }
-    const useFavIcon=(FavIcon,useEventEmitter)=>new ZikoUseFavIcon(FavIcon,useEventEmitter);
-
-    class ZikoMeta{
-        constructor({viewport,charset,description,author,keywords}){
-            this.document = globalThis?.document; 
-            this.meta={};
-            this.init({viewport,charset,description,author,keywords});
-        }
-        init({viewport,charset,description,author,keywords}){
-            viewport && this.setViewport(viewport);
-            charset && this.setCharset(charset);
-            description && this.describe(description);
-            author && this.setAuthor(author);
-            keywords && this.setKeywords(keywords);
-        }
-        set(key,value){
-            key = key.toLowerCase();
-            const isCharset = (key === "charset");
-            const meta = isCharset ? document.querySelector("meta[charset]"):document.querySelector(`meta[name=${key}]`);
-            this.meta=meta?? document?.createElement("meta");
-            if(isCharset) this.meta.setAttribute("charset",value);
-            else {
-                this.meta.setAttribute("name",key);
-                this.meta.setAttribute("content",value);
-            }
-            if(!meta)this.document.head.append(this.meta);
-            return this;     
-        }
-        setCharset(charset="utf-8"){
-            this.set("charset",charset);
-            return this;
-        }
-        describe(description){
-            this.set("description",description);
-            return this;    
-        }
-        setViewport(viewport="width=device-width, initial-scale=1.0"){
-            this.set("viewport",viewport);
-            return this;    
-        }
-        setKeywords(...keywords){
-            // keywords.push("zikojs");
-            keywords=[...new Set(keywords)].join(", ");
-            this.set("keywords",keywords);
-            return this;
-        }
-        setAuthor(author){
-            this.set("author",author);
-            return this;
-        }
-    }
-    const useMeta=({viewport,charset,description,author,keywords})=>new ZikoMeta({viewport,charset,description,author,keywords});
-
-    class ZikoUseTitle{
-        constructor(title=document.title,useEventEmitter=true){
-            this.cache={
-                Emitter:null
-            };
-            if(useEventEmitter)this.useEventEmitter();
-            this.set(title);
-        }
-        useEventEmitter(){
-            this.cache.Emitter=useEventEmitter();
-            return this;
-        }
-        set(title){
-            if(title!==document.title){
-                document.title=title;
-                if(this.cache.Emitter)this.cache.Emitter.emit("ziko:title-changed");
-            }
-            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, useEventEmitter)=>new ZikoUseTitle(title, useEventEmitter);
-
-    // import {useLink} from "./";
-    class ZikoHead{
-        constructor({title,lang,icon,meta,noscript}){
-            this.html = globalThis?.document?.documentElement;
-            this.head = globalThis?.document?.head;
-
-            title && useTitle(title);
-            lang && this.setLang(lang);
-            icon && useFavIcon(icon);
-            meta && useMeta(meta);
-            noscript && this.setNoScript();
-        }
-        setLang(lang){
-            this.html.setAttribute("lang",lang);
-        }
-        setNoScript(content){
-
-        }
-    }
-
-    const useHead=({ title, lang, icon, meta, noscript })=>new ZikoHead({ title, lang, icon, meta, noscript });
-
+    // import { ZikoHead , useHead} from "../reactivity/hooks/head/index.js";
     class ZikoApp {
         constructor({head = null, wrapper = null, target = null}){
             this.head = head;
@@ -5030,11 +4583,11 @@
             else if(typeof wrapper === "function") this.wrapper = wrapper();
             return this;
         }
-        setHead(head){
-            if(head instanceof ZikoHead) this.head = head;
-            else this.head = useHead(head);
-            return this;  
-        }
+        // setHead(head){
+        //     if(head instanceof ZikoHead) this.head = head;
+        //     else this.head = useHead(head);
+        //     return this;  
+        // }
         
     }
     const App = ({head, wrapper, target}) => new ZikoApp({head, wrapper, target});
@@ -5225,7 +4778,7 @@
         const subscribers = new Set();
 
         sources.forEach(source => {
-            const srcValue = source(); // getValue()
+            const srcValue = source();
             srcValue._subscribe(() => {
                 {
                     const newVal = deriveFn(...sources.map(s => s().value));
@@ -5254,95 +4807,267 @@
         nested_value
     );
 
-    class UseThreed {
-        #workerContent;
+    class UseThread {
+        #worker;
+        #callbacks = new Map();
+        #idCounter = 0;
+
         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();
-                    }
+            const workerCode = `
+            this.onmessage = function(e) {
+                const { id, funStr, args, close } = e.data;
+                try {
+                    const func = new Function("return " + funStr)();
+                    const result = func(...args);
+                    postMessage({ id, result });
+                } catch (error) {
+                    postMessage({ id, error: error.message });
+                } finally {
+                    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;
+        }
+
+        terminate() {
+            this.#worker.terminate();
+        }
+    }
+
+    const useThread = (func, callback, args = [], close = true) => new UseThread().call(func, callback, args, close);
+
+    class UseEventEmitter {
+        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.`);
+            }
+            return this;
+        }
+
+        once(event, listener) {
+            const wrapper = (...args) => {
+                this.off(event, wrapper);
+                listener(...args);
             };
+            return this.on(event, wrapper);
+        }
+
+        off(event, listener) {
+            const listeners = this.events[event];
+            if (!listeners) return this;
+
+            const index = listeners.indexOf(listener);
+            if (index !== -1) {
+                listeners.splice(index, 1);
+            }
+
+            return this;
+        }
+
+        emit(event, 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);
+                }
+            });
+
+            return true;
+        }
+        remove(event){
+            delete this.events[event];  
+            return this; 
+        }
+        clear() {
+            this.events = {};
+            return this;
+        }
+
+        setMaxListeners(max) {
+            this.maxListeners = max;
             return this;
         }
     }
 
-    const useThread = (func, callback , close) => {
-        const T = new UseThreed();
-        if (func) {
-            T.call(func, callback , close);
+    const useEventEmitter = (maxListeners) => new UseEventEmitter(maxListeners);
+
+    /*
+     [
+        {
+            query: '(min-width: 600px)',
+            callback: () => console.log(1)
+        },
+        {
+            query: '(max-width: 300px)',
+            callback: () => console.log(2)
         }
-        return T;
-    };
+     ]
+    */
+
+    class UseMediaQuery {
+        #mediaQueryRules;
+        #fallback;
+        #lastCalledCallback = null;
+
+        constructor(mediaQueryRules = [], fallback = () => {}) {
+            this.#mediaQueryRules = mediaQueryRules;
+            this.#fallback = fallback;
+
+            this.#init();
+        }
+
+        // PRIVATE: check if ANY rule matches
+        #checkAllRules() {
+            return this.#mediaQueryRules.some(
+                ({ query }) => globalThis.matchMedia(query).matches
+            );
+        }
+
+        // PRIVATE: installs listeners and initial checks
+        #init() {
+            this.#mediaQueryRules.forEach(({ query, callback }) => {
+                const mediaQueryList = globalThis.matchMedia(query);
+
+                const checkMatches = () => {
+                    const anyMatch = this.#checkAllRules();
+
+                    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 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);
 
     class UseRoot {
-        constructor(PropsMap, {namespace = 'Ziko', register, ValidateCssProps = false} = {}){
+        constructor(PropsMap, { namespace = 'Ziko', 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);
+
+        use(PropsMap) {
+            if (this.ValidateCssProps) ValidateCssPropsFn(PropsMap);
             this.currentPropsMap = PropsMap;
             this.#maintain();
             return this;
         }
-        #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, {
+
+        #maintain() {
+            const root = globalThis?.document?.documentElement?.style;
+            for (const prop in this.currentPropsMap) {
+                const cssProp = this.namespace ? `--${this.namespace}-${prop}` : `--${prop}`;
+                root.setProperty(cssProp, this.currentPropsMap[prop]);
+
+                Object.defineProperty(this, prop, {
                     value: `var(${cssProp})`,
                     writable: true,
                     configurable: true,
-                    enumerable: false 
-               });
-           }
+                    enumerable: false
+                });
+            }
         }
     }
 
-    function ValidateCssProps(PropsMap){
+    function ValidateCssPropsFn(PropsMap) {
         const validProps = new Set(Object.keys(document.documentElement.style));
-        for (let key in PropsMap) {
+        for (const key in PropsMap) {
             if (!validProps.has(key)) {
                 throw new Error(`Invalid CSS property: "${key}"`);
             }
         }
     }
 
-    const useRoot = (PropsMap, {namespace, register, ValidateCssProps} = {}) => new UseRoot(PropsMap, {namespace, register, ValidateCssProps});
+    const useRoot = (PropsMap, options = {}) => new UseRoot(PropsMap, options);
+
 
     // Usage 
 
@@ -5464,25 +5189,15 @@
     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;
     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;
@@ -5499,9 +5214,6 @@
     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;
@@ -5509,6 +5221,7 @@
     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;
@@ -5635,15 +5348,17 @@
     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;