ziko 0.49.6 → 0.50.1

package/dist/ziko.mjs

@@ -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
@@ -1072,35 +1072,6 @@ class UINode {
 
 // 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); 
@@ -1134,6 +1105,141 @@ class UIStore extends Array {
 // 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,
@@ -1177,37 +1283,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 ||
@@ -1221,24 +1319,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(
@@ -1247,7 +1341,6 @@ class UseChannel {
         );
         return this;
     }
-
     once(event, handler, rooms) {
         const wrapper = (data) => {
             handler(data);
@@ -1256,368 +1349,148 @@ 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);
         }
-        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;
     }
 
-}
-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(!import.meta.env.SSR && import.meta.env.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(!import.meta.env.SSR && import.meta.env.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;
-//   }
+    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;
+    }
+}
 
-}
+// 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);
 
-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);
-      }
+var __State__ = {
+    store : new Map(),
+    index : 0,
+    session_storage : null,
+    register: function(state){
+        if(!import.meta.env.SSR && import.meta.env.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(!import.meta.env.SSR && import.meta.env.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__();
@@ -1880,7 +1753,11 @@ var DomMethods = /*#__PURE__*/Object.freeze({
     unrenderAfter: unrenderAfter
 });
 
-const Events = {
+const EventsMap = {
+    'Custom' : [
+        'emit',
+        'on'
+    ],
     'Click' : [
         'Click',
         'DblClick',
@@ -1940,21 +1817,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__ {
+class ZikoEvent {
     constructor(target = null, Events = [], details_setter, customizer){
         this.target = target;
         this.cache = {
@@ -2098,92 +1961,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;
@@ -2196,26 +1991,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);
@@ -2247,28 +2025,135 @@ 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(){
 
+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,
@@ -2281,14 +2166,26 @@ const binderMap = {
   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;
     };
   });
@@ -2323,184 +2220,40 @@ function style(styles){
         if(isStateGetter(value)){
             const getter = value();
             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]=[];
-            }
+            getter._subscribe(
+                (newValue) => {
+                    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}={}){
@@ -2515,6 +2268,8 @@ let UIElement$1 = class UIElement extends UIElementCore{
       IndexingMethods, 
       EventsMethodes
     );
+
+    // console.log(EventsMethodes)
     if(element)this.init(element, name, type, render);
   }
   get element(){
@@ -2652,16 +2407,16 @@ let UIElement$1 = class UIElement extends UIElementCore{
   //   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;
@@ -4795,209 +4550,7 @@ const timeTaken = callback => {
     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;
@@ -5024,11 +4577,11 @@ class ZikoApp {
         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});
@@ -5219,7 +4772,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));
@@ -5248,95 +4801,267 @@ 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;
+    }
+
+    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 
 
@@ -5427,4 +5152,4 @@ if(globalThis?.document){
     document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());
 }
 
-export { App, Base, Clock, Combinaison, Complex, E, EPSILON, FileBasedRouting, Flex, HTMLWrapper, Logic$1 as Logic, Matrix, PI$2 as PI, Permutation, Random, SPA, SVGWrapper, Scheduler, Suspense, Switch, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UIHTMLWrapper, UINode, UISVGWrapper, UISwitch, UIView, UseRoot, Utils, View, ZikoApp, ZikoEventClick, ZikoEventClipboard, ZikoEventCustom, ZikoEventDrag, ZikoEventFocus, ZikoEventHash, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventTouch, ZikoEventWheel, ZikoSPA, ZikoUIFlex, ZikoUISuspense, ZikoUIText, __ZikoEvent__, abs, accum, acos$1 as acos, acosh, acot, add, animation, arange, arc, arr2str, asin, asinh, atan, atan2, atanh, back, bindCustomEvent, bindHashEvent, bindTouchEvent, bind_click_event, bind_clipboard_event, bind_drag_event, bind_focus_event, bind_key_event, bind_mouse_event, bind_pointer_event, bind_wheel_event, cartesianProduct, ceil, clamp, clock, combinaison, complex, cos$2 as cos, cosh$1 as cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, discret, div, e, elastic, fact, floor, geomspace, getEvent, hypot, inRange, in_back, in_bounce, in_circ, in_cubic, in_elastic, in_expo, in_out_back, in_out_bounce, in_out_circ, in_out_cubic, in_out_elastic, in_out_expo, in_out_quad, in_out_quart, in_out_quint, in_out_sin, in_quad, in_quart, in_quint, in_sin, isApproximatlyEqual, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linear, linspace, ln, logspace, loop, map$1 as map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ones, out_back, out_bounce, out_circ, out_cubic, out_elastic, out_expo, out_quad, out_quart, out_quint, out_sin, pgcd, pow$1 as pow, powerSet, ppcm, preload, prod, rad2deg, round, sec, sig, sign, sin$2 as sin, sinc, sinh$1 as sinh, sleep, sqrt$2 as sqrt, sqrtn, step, step_fps, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, useChannel, useDerived, useEventEmitter, useLocaleStorage, useReactive, useRoot, useSessionStorage, useState, useThread, wait, waitForUIElm, waitForUIElmSync, zeros };
+export { App, Base, Clock, Combinaison, Complex, E, EPSILON, FileBasedRouting, Flex, HTMLWrapper, Logic$1 as Logic, Matrix, PI$2 as PI, Permutation, Random, SPA, SVGWrapper, Scheduler, Suspense, Switch, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UIHTMLWrapper, UINode, UISVGWrapper, UISwitch, UIView, UseRoot, UseThread, Utils, View, ZikoApp, ZikoEvent, ZikoSPA, ZikoUIFlex, ZikoUISuspense, ZikoUIText, abs, accum, acos$1 as acos, acosh, acot, add, animation, arange, arc, arr2str, asin, asinh, atan, atan2, atanh, back, bind_click_event, bind_clipboard_event, bind_drag_event, bind_focus_event, bind_key_event, bind_mouse_event, bind_pointer_event, bind_touch_event, bind_wheel_event, cartesianProduct, ceil, clamp, clock, combinaison, complex, cos$2 as cos, cosh$1 as cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, discret, div, e, elastic, fact, floor, geomspace, getEvent, hypot, inRange, in_back, in_bounce, in_circ, in_cubic, in_elastic, in_expo, in_out_back, in_out_bounce, in_out_circ, in_out_cubic, in_out_elastic, in_out_expo, in_out_quad, in_out_quart, in_out_quint, in_out_sin, in_quad, in_quart, in_quint, in_sin, isApproximatlyEqual, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linear, linspace, ln, logspace, loop, map$1 as map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ones, out_back, out_bounce, out_circ, out_cubic, out_elastic, out_expo, out_quad, out_quart, out_quint, out_sin, pgcd, pow$1 as pow, powerSet, ppcm, preload, prod, rad2deg, round, sec, sig, sign, sin$2 as sin, sinc, sinh$1 as sinh, sleep, sqrt$2 as sqrt, sqrtn, step, step_fps, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, useDerived, useEventEmitter, useIPC, useLocaleStorage, useMediaQuery, useReactive, useRoot, useSessionStorage, useState, useThread, useTitle, wait, waitForUIElm, waitForUIElmSync, zeros };