ziko 0.49.7 → 0.50.1

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sat Nov 29 2025 19:48:11 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,7 +1289,7 @@
         }
     };
 
-    class UseChannel {
+    class UseIPC {
         #channel;
         #eventData;
         #handlers;
@@ -1264,14 +1370,14 @@
         }
     }
 
-    const useChannel = (name) => new UseChannel(name);
+    const useIPC = (name) => new UseIPC(name);
 
     class UseStorage {
         constructor(storage, globalKey, initialValue, use_channel = true) {
             this.cache = {
                 storage,
                 globalKey,
-                channel: use_channel ? useChannel(`Ziko:useStorage-${globalKey}`) : null,
+                channel: use_channel ? useIPC(`Ziko:useStorage-${globalKey}`) : null,
                 oldItemKeys: new Set()
             };
 
@@ -1354,283 +1460,43 @@
 
     // factory functions
     const useLocaleStorage = (key, initialValue, use_channel = true) =>
-        new UseStorage(localStorage, key, initialValue, use_channel);
-
-    const useSessionStorage = (key, initialValue, use_channel = true) =>
-        new UseStorage(sessionStorage, key, initialValue, use_channel);
-
-    const __State__ = {
-        store : new Map(),
-        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;
-    //   }
+        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(!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__();
@@ -1893,7 +1759,11 @@
         unrenderAfter: unrenderAfter
     });
 
-    const Events = {
+    const EventsMap = {
+        'Custom' : [
+            'emit',
+            'on'
+        ],
         'Click' : [
             'Click',
             'DblClick',
@@ -1953,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 = {
@@ -2111,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;
@@ -2209,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);
@@ -2260,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();
 
-    class ZikoEventWheel extends __ZikoEvent__{
-        constructor(target, customizer){
-            super(target, Events.Wheel, details_setter, customizer);
+    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 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,
@@ -2294,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;
         };
       });
@@ -2343,177 +2233,33 @@
                     },
                     // 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]=[];
-                }
-            }
-            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;
+            }
+            else Object.assign(this.element.style, {[key] : value});
         }
+        return this;
+    }
+    function size(width, height){
+        return this.style({width, height})
+    }
+    function hide(){
+
+    }
+    function show(){
+
     }
-    const useCustomEvent=target=>new ZikoCustomEvent(target);
+    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
+    });
 
     let UIElement$1 = class UIElement extends UIElementCore{
       constructor({element, name ='', type='html', render = __Ziko__.__Config__.default.render}={}){
@@ -2528,6 +2274,8 @@
           IndexingMethods, 
           EventsMethodes
         );
+
+        // console.log(EventsMethodes)
         if(element)this.init(element, name, type, render);
       }
       get element(){
@@ -2665,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;
@@ -4808,212 +4556,7 @@
         return r;
     };
 
-    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 useEventEmitter = (maxListeners) => new UseEventEmitter(maxListeners);
-
-    class ZikoUseFavIcon{
-        constructor(FavIcon,withEmitter=true){
-            this.#init();
-            this.cache={
-                Emitter:null
-            };
-            if(withEmitter)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,withEmitter)=>new ZikoUseFavIcon(FavIcon,withEmitter);
-
-    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$1=(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$1(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;
@@ -5040,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});
@@ -5314,7 +4857,76 @@
         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 useEventEmitter = (maxListeners) => new UseEventEmitter(maxListeners);
 
     /*
      [
@@ -5414,6 +5026,75 @@
 
     const useTitle = (title, withEmitter = true) => new UseTitle(title, withEmitter);
 
+    class UseRoot {
+        constructor(PropsMap, { namespace = 'Ziko', ValidateCssProps = false } = {}) {
+            this.currentPropsMap = PropsMap;
+            this.namespace = namespace;
+            this.ValidateCssProps = ValidateCssProps;
+            this.use(PropsMap);
+        }
+
+        use(PropsMap) {
+            if (this.ValidateCssProps) ValidateCssPropsFn(PropsMap);
+            this.currentPropsMap = PropsMap;
+            this.#maintain();
+            return this;
+        }
+
+        #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
+                });
+            }
+        }
+    }
+
+    function ValidateCssPropsFn(PropsMap) {
+        const validProps = new Set(Object.keys(document.documentElement.style));
+        for (const key in PropsMap) {
+            if (!validProps.has(key)) {
+                throw new Error(`Invalid CSS property: "${key}"`);
+            }
+        }
+    }
+
+    const useRoot = (PropsMap, options = {}) => new UseRoot(PropsMap, options);
+
+
+    // Usage 
+
+    /*
+    const Styles = {
+     S1 : {
+      background : 'white',
+      color : 'darkblue'
+      border : '2px darkblue solid"'
+     },
+     S2 : {
+      background : 'darkblue',
+      color : 'white'
+      border : '2px green solid"'
+     }
+    }
+    const {use, border, background, color} = useRoot(Style.S1)
+
+    tags.p("Test useRoot ").style({
+      border,
+      color,
+      background,
+      padding : '10px'
+    })
+
+    */
+
     let {sqrt, cos, sin, exp, log, cosh, sinh} = Math;
     // Math.abs = new Proxy(Math.abs, {
     //   apply(target, thisArg, args) {
@@ -5507,26 +5188,16 @@
     exports.UISVGWrapper = UISVGWrapper;
     exports.UISwitch = UISwitch;
     exports.UIView = UIView;
+    exports.UseRoot = UseRoot;
     exports.UseThread = UseThread;
     exports.Utils = Utils;
     exports.View = View;
     exports.ZikoApp = ZikoApp;
-    exports.ZikoEventClick = ZikoEventClick;
-    exports.ZikoEventClipboard = ZikoEventClipboard;
-    exports.ZikoEventCustom = ZikoEventCustom;
-    exports.ZikoEventDrag = ZikoEventDrag;
-    exports.ZikoEventFocus = ZikoEventFocus;
-    exports.ZikoEventHash = ZikoEventHash;
-    exports.ZikoEventKey = ZikoEventKey;
-    exports.ZikoEventMouse = ZikoEventMouse;
-    exports.ZikoEventPointer = ZikoEventPointer;
-    exports.ZikoEventTouch = ZikoEventTouch;
-    exports.ZikoEventWheel = ZikoEventWheel;
+    exports.ZikoEvent = ZikoEvent;
     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;
@@ -5543,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;
@@ -5553,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;
@@ -5679,14 +5348,16 @@
     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;