ziko 0.49.7 → 0.50.2

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 : Wed Dec 03 2025 10:48:15 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
@@ -949,16 +949,28 @@
         }
     };
 
-    async function fetchdom(url='https://github.com/zakarialaoui10'){
-      const data=await fetch(url);
-      const html=await data.text();
-      const dom= new DOMParser().parseFromString(html,'text/xml');
-      return dom.documentElement
+    async function fetchdom(url='https://github.com/zakarialaoui10') {
+      try {
+        const response = await fetch(url);
+        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+        const html = await response.text();
+        const dom = new DOMParser().parseFromString(html, 'text/html');
+        return dom.documentElement;
+      } catch (err) {
+        console.error('Failed to fetch DOM:', err);
+        throw err;
+      }
     }
-    function fetchdomSync(url='https://github.com/zakarialaoui10'){
-      const data=preload(url);
-      const dom= new DOMParser().parseFromString(data,'text/xml');
-      return dom.documentElement;
+
+    function fetchdomSync(url='https://github.com/zakarialaoui10') {
+      try {
+        const data = preload(url);
+        const dom = new DOMParser().parseFromString(data, 'text/html');
+        return dom.documentElement;
+      } catch (err) {
+        console.error('Failed to fetch DOM synchronously:', err);
+        throw err;
+      }
     }
 
     globalThis.fetchdom=fetchdom;
@@ -1078,35 +1090,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 +1123,202 @@
     // 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);
+          }
+        }
+      }
+    }
+
+    // export function mount(target = this.target) {
+    //   if(this.isBody) return ;
+    //   if(target?.isUIElement)target=target.element;
+    //   this.target=target;
+    //   this.target?.appendChild(this.element);
+    //   return this;
+    // }
+    // export function unmount(){
+    //   if(this.cache.parent)this.cache.parent.remove(this);
+    //   else if(this.target?.children?.length && [...this.target?.children].includes(this.element)) this.target.removeChild(this.element);
+    //   return this;
+    // }
+
+    // export function mountAfter(target = this.target, t = 1) {
+    //   setTimeout(() => this.mount(), t);
+    //   return this;
+    // }
+    // export function unmountAfter(t = 1) {
+    //   setTimeout(() => this.unmount(), t);
+    //   return this;
+    // }
+
+    function mount(target = this.target, delay = 0) {
+        if (delay > 0) {
+            setTimeout(() => this.mount(target, 0), delay);
+            return this;
+        }
+
+        if (this.isBody) return this;
+
+        if (target?.isUIElement) target = target.element;
+        this.target = target;
+
+        this.target?.appendChild(this.element);
+        return this;
+    }
+
+    function unmount(delay = 0) {
+        if (delay > 0) {
+            setTimeout(() => this.unmount(0), delay);
+            return this;
+        }
+
+        if (this.cache.parent) {
+            this.cache.parent.remove(this);
+        } else if (
+            this.target?.children?.length &&
+            [...this.target.children].includes(this.element)
+        ) {
+            this.target.removeChild(this.element);
+        }
+
+        return this;
+    }
+
+    var LifecycleMethods = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        mount: mount,
+        unmount: unmount
+    });
+
+    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 +1362,7 @@
         }
     };
 
-    class UseChannel {
+    class UseIPC {
         #channel;
         #eventData;
         #handlers;
@@ -1264,14 +1443,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()
             };
 
@@ -1359,7 +1538,7 @@
     const useSessionStorage = (key, initialValue, use_channel = true) =>
         new UseStorage(sessionStorage, key, initialValue, use_channel);
 
-    const __State__ = {
+    var __State__ = {
         store : new Map(),
         index : 0,
         session_storage : null,
@@ -1393,255 +1572,15 @@
         }
     }
 
-    __init__global__();
-    class UIElementCore extends UINode{
-      constructor(){
-        super();
-      }
-      init(element, name, type, render){
-        this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
-        if(typeof element === "string") {
-          switch(type){
-            case "html" : {
-              element = globalThis?.document?.createElement(element);
-              // console.log('1')
-            } break;
-            case "svg" : {
-              element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element); 
-              // console.log('2')
-            } break;
-            default : throw Error("Not supported")
-          }
-        }
-        else this.target = element?.parentElement;
-        Object.assign(this.cache, {
-          name,
-          isInteractive : false,
-          parent:null,
-          isBody:false,
-          isRoot:false,
-          isHidden: false,
-          isFrozzen:false,
-          legacyParent : null,
-          attributes: {},
-          filters: {},
-          temp:{}
-        });
-        this.events = {
-          ptr:null,
-          mouse:null,
-          wheel:null,
-          key:null,
-          drag:null,
-          drop:null,
-          click:null,
-          clipboard:null,
-          focus:null,
-          swipe:null,
-          custom:null,
-        };
-        this.observer={
-          resize:null,
-          intersection:null
-        };
-        if(element) Object.assign(this.cache,{element});
-        // useDefaultStyle && this.style({ 
-        //   position: "relative",
-        //   boxSizing:"border-box",
-        //   margin:0,
-        //   padding:0,
-        //   width : "auto",
-        //   height : "auto"
-        //  });
-        this.items = new UIStore();
-        globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
-        element && render && this?.render?.();
-        globalThis.__Ziko__.__UI__.push(this);
-      }
-      get element(){
-        return this.cache.element;
-      }
-        [Symbol.iterator]() {
-        return this.items[Symbol.iterator]();
-      }
-      maintain() {
-        for (let i = 0; i < this.items.length; i++) {
-          Object.defineProperty(this, i, {
-            value: this.items[i],
-            writable: true,
-            configurable: true,
-            enumerable: false 
-            });
-        }
-      }
-      isInteractive(){
-        return this.cache.isInteractive;
-      }
-      isUIElement(){
-        return true;
-      }
-    //   get st(){
-    //     return this.cache.style;
-    //   }
-    //   get attr(){
-    //     return this.cache.attributes;
-    //   }
-    //   get evt(){
-    //     return this.events;
-    //   }
-    //   get html(){
-    //     return this.element.innerHTML;
-    //   }
-    //   get text(){
-    //     return this.element.textContent;
-    //   }
-    //   get isBody(){
-    //     return this.element === globalThis?.document.body;
-    //   }
-    //   get parent(){
-    //     return this.cache.parent;
-    //   }
-    //   get width(){
-    //     return this.element.getBoundingClientRect().width;
-    //   }
-    //   get height(){
-    //     return this.element.getBoundingClientRect().height;
-    //   }
-    //   get top(){
-    //     return this.element.getBoundingClientRect().top;
-    //   }
-    //   get right(){
-    //     return this.element.getBoundingClientRect().right;
-    //   }
-    //   get bottom(){
-    //     return this.element.getBoundingClientRect().bottom;
-    //   }
-    //   get left(){
-    //     return this.element.getBoundingClientRect().left;
-    //   }
-    //   clone(render=false) {
-    //     // UI.__proto__=this.__proto__;
-    //     // if(this.items.length){
-    //     //   const items = [...this.items].map(n=>n.clone());
-    //     //   UI.append(...items);
-    //     // }
-    //     // else UI.element=this.element.cloneNode(true);
-    //     // return UI.mount(render);
-    //   }
-
-    //   freeze(freeze){
-    //     this.cache.isFrozzen=freeze;
-    //     return this;
-    //   }
-      // setTarget(tg) {
-      //   if(this.isBody) return ;
-      //   if (tg?.isUIElement) tg = tg.element;
-      //   this.unmount();
-      //   this.target = tg;
-      //   this.mount();
-      //   return this;
-      // }
-    //   describe(label){
-    //     if(label)this.setAttr("aria-label",label)
-    //   }
-    //   get children() {
-    //     return [...this.element.children];
-    //   }
-    //   get cloneElement() {
-    //     return this.element.cloneNode(true);
-    //   }
-    //   setClasses(...value) {
-    //     this.setAttr("class", value.join(" "));
-    //     return this;
-    //   }
-    //   get classes(){
-    //     const classes=this.element.getAttribute("class");
-    //     return classes===null?[]:classes.split(" ");
-    //   }
-    //   addClass() {
-    //     /*this.setAttr("class", value);
-    //         return this;*/
-    //   }
-    //   setId(id) {
-    //     this.setAttr("id", id);
-    //     return this;
-    //   }
-    //   get id() {
-    //     return this.element.getAttribute("id");
-    //   }
-    //   onSwipe(width_threshold, height_threshold,...callbacks){
-    //     if(!this.events.swipe)this.events.swipe = useSwipeEvent(this, width_threshold, height_threshold);
-    //     this.events.swipe.onSwipe(...callbacks);
-    //     return this;
-    //   }
-      // To Fix
-      // onKeysDown({keys=[],callback}={}){
-      //   if(!this.events.key)this.events.key = useKeyEvent(this);
-      //   this.events.key.handleSuccessifKeys({keys,callback});
-      //   return this;
-      // }
-      // onSelect(...callbacks){
-      //   if(!this.events.clipboard)this.events.clipboard = useClipboardEvent(this);
-      //   this.events.clipboard.onSelect(...callbacks);
-      //   return this;
-      // }
-    //   on(event_name,...callbacks){
-    //     if(!this.events.custom)this.events.custom = useCustomEvent(this);
-    //     this.events.custom.on(event_name,...callbacks);
-    //     return this;
-    //   }
-    //   emit(event_name,detail={}){
-    //     if(!this.events.custom)this.events.custom = useCustomEvent(this);
-    //     this.events.custom.emit(event_name,detail);
-    //     return this;
-    //   }
-    //   watchAttr(callback){
-    //     if(!this.observer.attr)this.observer.attr = watchAttr(this,callback);
-    //     return this;
-    //   }
-    //   watchChildren(callback){
-    //     if(!this.observer.children)this.observer.children = watchChildren(this,callback);
-    //     return this;
-    //   }
-    //   watchSize(callback){
-    //     if(!this.observer.resize)this.observer.resize = watchSize(this,callback);
-    //     this.observer.resize.start();
-    //     return this;
-    //   }
-    //   watchIntersection(callback,config){
-    //     if(!this.observer.intersection)this.observer.intersection = watchIntersection(this,callback,config);
-    //     this.observer.intersection.start();
-    //     return this;
-    //   }
-
-    }
-
-    function register_to_class(target, ...mixins){
-        mixins.forEach(n => _register_to_class_(target, n));
-    }
-    function _register_to_class_(target, mixin) {
-      const descriptors = Object.getOwnPropertyDescriptors(mixin);
-      for (const key of Reflect.ownKeys(descriptors)) {
-        const desc = descriptors[key];
-        if ('get' in desc || 'set' in desc || typeof desc.value !== 'function') {
-          Object.defineProperty(Object.getPrototypeOf(target), key, desc);
-        } else if (typeof desc.value === 'function') {
-          if (!Object.getPrototypeOf(target).hasOwnProperty(key)) {
-            Object.defineProperty(Object.getPrototypeOf(target), key, desc);
-          }
-        }
-      }
-    }
-
-    if(!globalThis.__Ziko__) __init__global__();
-
-    function useState(initialValue) {
-        
-        const {store, index} = __Ziko__.__State__;
-        __Ziko__.__State__.register({
-                value : initialValue,
-                subscribers : new Set(),
-                paused : false
+    if(!globalThis.__Ziko__) __init__global__();
+
+    function useState(initialValue) {
+        
+        const {store, index} = __Ziko__.__State__;
+        __Ziko__.__State__.register({
+                value : initialValue,
+                subscribers : new Set(),
+                paused : false
         });
 
         let current = store.get(index);
@@ -1839,18 +1778,6 @@
       this.element.innerHTML = "";
       return this;
     }
-    function mount(target = this.target) {
-      if(this.isBody)return ;
-      if(target?.isUIElement)target=target.element;
-      this.target=target;
-      this.target?.appendChild(this.element);
-      return this;
-    }
-    function unmount(){
-      if(this.cache.parent)this.cache.parent.remove(this);
-      else if(this.target?.children?.length && [...this.target?.children].includes(this.element)) this.target.removeChild(this.element);
-      return this;
-    }
     function replaceElementWith(new_element){
         this.cache.element.replaceWith(new_element);
         this.cache.element = new_element;
@@ -1858,14 +1785,6 @@
         // To do : Dispose Events and States 
         return this
     }
-    function renderAfter(t = 1) {
-      setTimeout(() => this.mount(), t);
-      return this;
-    }
-    function unrenderAfter(t = 1) {
-      setTimeout(() => this.unmount(), t);
-      return this;
-    }
     function after(ui){
       if(ui?.isUIElement) ui=ui.element;
       this.element?.after(ui);
@@ -1884,16 +1803,12 @@
         before: before,
         clear: clear,
         insertAt: insertAt,
-        mount: mount,
         prepend: prepend,
         remove: remove,
-        renderAfter: renderAfter,
-        replaceElementWith: replaceElementWith,
-        unmount: unmount,
-        unrenderAfter: unrenderAfter
+        replaceElementWith: replaceElementWith
     });
 
-    const Events = {
+    const EventsMap = {
         'Click' : [
             'Click',
             'DblClick',
@@ -1939,78 +1854,109 @@
         ],
         'Wheel': [
             'Wheel'
-        ]
+        ],
         // 'Media':[
 
         // ],
         // 'Hash':[
         //     "HashChange"
         // ]
+
+        'View':[
+            'EnterView',
+            'ExitView',
+            'ResizeView'
+        ],
+        'Swipe':[
+            'SwipeLeft',
+            'SwipeUp',
+            'SwipeRight',
+            'SwipeDown'
+        ]
     };
 
+    function event_controller(e, event_name, details_setter, customizer) {
+        this.cache.currentEvent = event_name;
+        this.cache.event = e;
+
+        details_setter?.call(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();
+
+        // Call the single callback if it exists
+        this.cache.callbacks[event_name]?.(this);
+    }
+
+    function toggle_event_listener(method, ...events) {
+        const keys = events.length === 0
+            ? Object.keys(this.cache.paused) 
+            : events;
+        keys.forEach(key => {
+            if (!this.cache.paused.hasOwnProperty(key)) return;
+            this.targetElement?.[method](
+                key,
+                this.cache.__controllers__[key],
+                this.cache.options[key]
+            );
+            this.cache.paused[key] = method === 'removeEventListener';
+        });
+        return this;
+    }
     const getEvent=(event = "")=>{
         if(event.startsWith("Ptr"))return `pointer${event.split("Ptr")[1].toLowerCase()}`;
         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__ {
-        constructor(target = null, Events = [], details_setter, customizer){
+    class ZikoEvent {
+        constructor(signature, target = null, Events = [], details_setter, customizer){
             this.target = target;
             this.cache = {
+                signature,
                 currentEvent : null,
                 event: null,
                 options : {},
                 preventDefault : {},
                 stopPropagation : {},
                 stopImmediatePropagation : {},
-                event_flow : {},
                 paused : {},
-                stream : {
-                    enabled : {},
-                    clear : {},
-                    history : {}
-                },
                 callbacks : {},
                 __controllers__:{}
             };
-            if(Events)this._register_events(Events, details_setter, customizer);
-        }
-        _register_events(Events, details_setter, customizer, REGISTER_METHODES = true){
-            const events = Events?.map(n=>getEvent(n));
-            events?.forEach((event,i)=>{
-                Object.assign(this.cache.preventDefault, {[event] : false});
-                Object.assign(this.cache.options, {[event] : {}});
-                Object.assign(this.cache.paused, {[event] : false});
-                Object.assign(this.cache.stream.enabled, {[event] : false});
-                Object.assign(this.cache.stream.clear, {[event] : false});
-                Object.assign(this.cache.stream.history, {[event] : []});
-                Object.assign(this.cache.__controllers__, {[event] : e=>event_controller.call(this, e, event, details_setter, customizer)});
-                if(REGISTER_METHODES)Object.assign(this, { [`on${Events[i]}`] : (...callbacks)=> this.__onEvent(event, this.cache.options[event], {}, ...callbacks)});
+            if (Events) this._register_events(Events, details_setter, customizer);
+        }
+        _register_events(Events, details_setter, customizer, REGISTER_METHODES = true) {
+            const events = Events?.map(n => getEvent(n));
+            events?.forEach((event, i) => {
+                this.cache.preventDefault[event] = false;
+                this.cache.options[event] = {};
+                this.cache.paused[event] = false;
+                this.cache.__controllers__[event] = (e) =>
+                    event_controller.call(this, e, event, details_setter, customizer);
+                if (REGISTER_METHODES) {
+                    this[`on${Events[i]}`] = (callback) =>
+                        this.__onEvent(event, this.cache.options[event], {}, callback);
+                }
             });
             return this;
         }
+        __onEvent(event, options, dispose, callback) {
+            if (!callback) return this;
+            this.cache.callbacks[event] = callback;
+            this.__handle(event, this.cache.__controllers__[event], options, dispose);
+            return this;
+        }
         get targetElement(){
             return this.target?.element;
         }
         get isParent(){
-            return this.target?.element === this.event.srcElement;
+            return this.target?.element === this.event?.srcElement;
         }
         get item(){
-            return this.target.find(n=>n.element == this.event?.srcElement)?.[0];
+            return this.target.find(n => n.element == this.event?.srcElement)?.[0];
         }
         get currentEvent(){
             return this.cache.currentEvent;
@@ -2018,185 +1964,54 @@
         get event(){
             return this.cache.event;
         }
+        get detail(){
+            return this.cache.event.detail
+        }
         setTarget(UI){
-            this.target=UI;
+            this.target = UI;
             return this;
         }
-        __handle(event, handler, options, dispose){
+        __handle(event, handler, options){
             this.targetElement?.addEventListener(event, handler, options);
             return this;
         }
-        __onEvent(event, options, dispose, ...callbacks){
-            if(callbacks.length===0){
-                console.log("00");
-                if(this.cache.callbacks[event]){
-                    console.log("Call");
-                    // this.cache.callbacks.map(n=>e=>n.call(this,e));
-                    this.cache.callbacks[event].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.cache.__controllers__[event],options, dispose);
-            return this;  
-        }
-        #override(methode, overrides, defaultValue){
-            if(defaultValue === "default") Object.assign(this.cache[methode], {...this.cache[methode], ...overrides});
-            const all = defaultValue === "default" 
-            ? this.cache[methode]
-            : Object.fromEntries(Object.keys(this.cache.preventDefault).map(n=>[n,defaultValue]));
-            Object.assign(this.cache[methode], {...all,...overrides});
-            return this       
-        }
-        preventDefault(overrides = {}, defaultValue = "default"){
-            this.#override("preventDefault", overrides, defaultValue);
-            // const all=Object.fromEntries(Object.keys(this.cache.preventDefault).map(n=>[n,defaultValue]))
-            // Object.assign(this.cache.preventDefault, {...all,...overrides});
+        #override(method, ...events) {
+            const keys = events.length === 0 ? Object.keys(this.cache[method]) : events;
+            keys.forEach(e => {
+                if (this.cache[method].hasOwnProperty(e)) this.cache[method][e] = true;
+            });
             return this;
         }
-        stopPropagation(overrides = {}, defaultValue = "default"){
-            this.#override("stopPropagation", overrides, defaultValue);
-            return this;
+        preventDefault(...events) {
+            return this.#override('preventDefault', ...events);
         }
-        stopImmediatePropagation(overrides = {}, defaultValue = "default"){
-            this.#override("stopImmediatePropagation", overrides, defaultValue);
-            return this;
+        stopPropagation(...events) {
+            return this.#override('stopPropagation', ...events);
+        }
+        stopImmediatePropagation(...events) {
+            return this.#override('stopImmediatePropagation', ...events);
         }
         setEventOptions(event, options){
-            this.pause({[event] : true, }, "default");
-            Object.assign(this.cache.options[getEvent(event)], options);
-            this.resume({[event] : true, }, "default");
+            const evt = getEvent(event);
+            this.pause();
+            Object.assign(this.cache.options[evt], options);
+            this.resume();
             return this;
         }
-        pause(overrides = {}, defaultValue = "default"){
-            const all = defaultValue === "default" 
-              ? this.cache.stream.enabled
-              : Object.entries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]));
-            overrides={...all,...overrides};
-            for(let key in overrides){
-                if(overrides[key]){
-                    this.targetElement?.removeEventListener(key, this.cache.__controllers__[key], this.cache.options[key]);
-                    this.cache.paused[key]=true;
-                }
-            }
-            return this;
+        pause(...events) {
+            return toggle_event_listener.call(this, 'removeEventListener', ...events)
         }
-        resume(overrides = {}, defaultValue = "default"){
-            const all = defaultValue === "default" 
-              ? this.cache.stream.enabled
-              : Object.entries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]));
-            overrides={...all,...overrides};
-            for(let key in overrides){
-                if(overrides[key]){
-                    this.targetElement?.addEventListener(key,this.cache.__controllers__[key], this.cache.options[key]);
-                    this.cache.paused[key]=false;
-                }
-            }
-            return this;
-         }
-        stream(overrides = {}, defaultValue = "default"){
-            this.cache.stream.t0=Date.now();
-            const all=Object.fromEntries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]));
-            overrides={...all,...overrides};
-            Object.assign(this.cache.stream.enabled,overrides);
-            return this;
-         }
-        clear(){
-            return this;
+        resume(...events) {
+            return toggle_event_listener.call(this, 'addEventListener', ...events);
         }
-        dispose(overrides = {}, defaultValue = "default"){
-            this.pause(overrides, defaultValue);
-
+        dispose(){
+            this.pause();
+            this.target.events[this.cache.signature] = null;
             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);
-
-    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 +2024,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 +2058,314 @@
         // if(this.currentEvent==="click") this.dx = 0
         // else this.dx = 1
         // console.log(this.currentEvent)
+    }
+
+    class ClickAwayEvent extends Event {
+      constructor(originalEvent, targetElement) {
+        super("clickaway", { bubbles: true, cancelable: true });
+        this.originalEvent = originalEvent;
+        this.targetElement = targetElement;
+      }
+    }
+
+    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 bind_pointer_event = (target, customizer) => new ZikoEventPointer(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 debounce=(fn,delay=1000)=>{
+        let id;
+        return (...args) => id ? clearTimeout(id) : setTimeout(()=>fn(...args),delay);
+    };
+    const throttle=(fn,delay)=>{
+        let lastTime=0;
+        return (...args) => {
+            const now = new Date().getTime();
+            if(now-lastTime < delay) return;
+            lastTime = now;
+            fn(...args); 
+        }
+    };
 
-    class ZikoEventTouch extends __ZikoEvent__{
-        constructor(target, customizer){
-            super(target, Events.Touch, details_setter$1, customizer);
+    class ViewEvent extends CustomEvent {
+        constructor(type, detail, { bubbles = true, cancelable = true } = {}) {
+            super(type, { detail, bubbles, cancelable });
         }
     }
-    function details_setter$1(){
 
+    function register_view_event(
+        element,
+        {
+            intersection = true,
+            resize = true,
+            threshold = 0,
+            throttleResize = 100,
+            throttleEnterExit = 0
+        } = {}
+    ) {
+        let intersectionObserver, resizeObserver;
+        const resizeCallback = entries => {
+            for (let entry of entries) {
+                const { width, height } = entry.contentRect;
+
+                element.dispatchEvent(
+                    new ViewEvent("resizeview", {
+                        width,
+                        height,
+                        entry
+                    })
+                );
+            }
+        };
+
+        const throttledResize = throttleResize > 0
+            ? throttle(resizeCallback, throttleResize)
+            : resizeCallback;
+
+        const intersectionCallback = entries => {
+            for (let entry of entries) {
+                const type = entry.isIntersecting ? "enterview" : "exitview";
+                element.dispatchEvent(new ViewEvent(type, entry));
+            }
+        };
+
+        const throttledIntersections = throttleEnterExit > 0
+            ? throttle(intersectionCallback, throttleEnterExit)
+            : intersectionCallback;
+
+        if (intersection) {
+            intersectionObserver = new IntersectionObserver(throttledIntersections, { threshold });
+            intersectionObserver.observe(element);
+        }
+
+        if (resize) {
+            resizeObserver = new ResizeObserver(throttledResize);
+            resizeObserver.observe(element);
+        }
+
+        // ---- UNREGISTER ----
+        return () => {
+            if (intersectionObserver) {
+                intersectionObserver.unobserve(element);
+                intersectionObserver.disconnect();
+            }
+            if (resizeObserver) {
+                resizeObserver.unobserve(element);
+                resizeObserver.disconnect();
+            }
+        };
+    }
+
+    class SwipeEvent extends CustomEvent {
+      constructor(type, detail) {
+        super(type, {
+          detail,
+          bubbles: true,
+          cancelable: true
+        });
+      }
     }
-    const bindTouchEvent = (target, customizer) => new ZikoEventTouch(target, customizer);
+
+    function register_swipe_event(
+      element,
+      threshold = 50,
+      restraint = 100,
+      allowedTime = 500
+    ) {
+      let startX = 0,
+          startY = 0,
+          startTime = 0,
+          isPointerDown = false;
+
+      function onPointerDown(e) {
+        startX = e.clientX;
+        startY = e.clientY;
+        startTime = performance.now();
+        isPointerDown = true;
+      }
+
+      function onPointerUp(e) {
+        if (!isPointerDown) return;
+        isPointerDown = false;
+
+        const distX = e.clientX - startX;
+        const distY = e.clientY - startY;
+        const elapsed = performance.now() - startTime;
+
+        let direction = null;
+        let eventName = null;
+
+        if (elapsed <= allowedTime) {
+          if (Math.abs(distX) >= threshold && Math.abs(distY) <= restraint) {
+            direction = distX < 0 ? "left" : "right";
+            eventName = "swipe" + direction;
+          } 
+          else if (Math.abs(distY) >= threshold && Math.abs(distX) <= restraint) {
+            direction = distY < 0 ? "up" : "down";
+            eventName = "swipe" + direction;
+          }
+        }
+
+        // Emit event
+        if (eventName) {
+          element.dispatchEvent(
+            new SwipeEvent(eventName, {
+              direction,
+              distX,
+              distY,
+              originalEvent: e
+            })
+          );
+        }
+      }
+
+      element.addEventListener("pointerdown", onPointerDown, { passive: true });
+      element.addEventListener("pointerup", onPointerUp, { passive: true });
+
+      return () => {
+        element.removeEventListener("pointerdown", onPointerDown);
+        element.removeEventListener("pointerup", onPointerUp);
+      };
+    }
+
+    const bind_click_event = (target, customizer) => {
+        register_click_away_event(target.element);
+        return new ZikoEvent(
+            'click',
+            target,
+            EventsMap.Click,
+            null,
+            customizer
+        );
+    };
+    const bind_clipboard_event = (target, customizer) => new ZikoEvent(
+        'clipboard',
+        target,
+        EventsMap.Clipboard,
+        null,
+        customizer
+    );
+    const bind_drag_event = (target, customizer) => new ZikoEvent(
+        'drag',
+        target,
+        EventsMap.Drag,
+        null,
+        customizer
+    );
+    const bind_focus_event = (target, customizer) => new ZikoEvent(
+        'focus',
+        target,
+        EventsMap.Focus,
+        null,
+        customizer
+    );
+    const bind_key_event = (target, customizer) => new ZikoEvent(
+        'key',
+        target,
+        EventsMap.Key, 
+        key_details_setter, 
+        customizer
+    );
+    const bind_mouse_event = (target, customizer) => new ZikoEvent(
+        'mouse',
+        target,
+        EventsMap.Mouse,
+        null,
+        customizer
+    );
+    const bind_pointer_event = (target, customizer) => new ZikoEvent(
+        'ptr',
+        target,
+        EventsMap.Ptr, 
+        ptr_details_setter, 
+        customizer
+    );
+    const bind_touch_event = (target, customizer) => new ZikoEvent(
+        'touch',
+        target,
+        EventsMap.Touch,
+        null,
+        customizer
+    );
+    const bind_wheel_event = (target, customizer) => new ZikoEvent(
+        'wheel',
+        target,
+        EventsMap.Wheel,
+        null,
+        customizer
+    );
+
+    const bind_view_event = (target, customizer) => {
+        register_view_event(target.element);
+        return new ZikoEvent(
+            'view',
+            target, 
+            EventsMap.View,
+            null, 
+            customizer
+        )
+    };
+
+    const bind_swipe_event = (target, customizer) => {
+        register_swipe_event(target.element);
+        return new ZikoEvent(
+            'swipe',
+            target, 
+            EventsMap.Swipe,
+            null, 
+            customizer
+        )
+    };
 
-    class ZikoEventWheel extends __ZikoEvent__{
-        constructor(target, customizer){
-            super(target, Events.Wheel, details_setter, customizer);
+    class ZikoCustomEvent extends ZikoEvent{
+        constructor(target, events, customizer){
+            super('custom', 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,
@@ -2291,17 +2375,31 @@
       drag : bind_drag_event,
       clipboard : bind_clipboard_event,
       focus : bind_focus_event,
-      wheel : bind_wheel_event
+      wheel : bind_wheel_event,
+      view : bind_view_event,
+      swipe : bind_swipe_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);
+        EventsMethodes[methodName] = function (callbacks) {
+          if (!this.events[lname]) this.events[lname] = binderMap[lname](this);
+          this.events[lname][methodName](callbacks);
           return this;
         };
       });
@@ -2362,158 +2460,14 @@
         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;
-        }
-    }
-    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}={}){
@@ -2522,12 +2476,15 @@
         // console.log(this)
         register_to_class(
           this, 
+          LifecycleMethods,
           AttrsMethods, 
           DomMethods, 
           StyleMethods,
           IndexingMethods, 
           EventsMethodes
         );
+
+        // console.log(EventsMethodes)
         if(element)this.init(element, name, type, render);
       }
       get element(){
@@ -2649,32 +2606,12 @@
       // 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;
@@ -2683,16 +2620,8 @@
       //   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;
-      // }
+      // watchSize(callback)Remplaced By on onViewResize
+      // watchIntersection(callback,config) Remplaced By onViewEnter and onViewExit
 
     };
 
@@ -2991,7 +2920,6 @@
                     const ui = await callback();
                     fallback_ui.unmount();
                     this.append(ui);
-                    // console.log(content)
                 }
                 catch(error){
                     console.log({error});
@@ -4622,20 +4550,6 @@
 
     const step_fps = (step_or_fps) => 1000 / step_or_fps;
 
-    const debounce=(fn,delay=1000)=>{
-        let id;
-        return (...args) => id ? clearTimeout(id) : setTimeout(()=>fn(...args),delay);
-    };
-    const throttle=(fn,delay)=>{
-        let lastTime=0;
-        return (...args) => {
-            const now = new Date().getTime();
-            if(now-lastTime < delay) return;
-            lastTime = now;
-            fn(...args); 
-        }
-    };
-
     const sleep= ms => new Promise(res => setTimeout(res, ms));
     function timeout(ms, fn) {
       let id;
@@ -4808,212 +4722,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 +4749,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 +5023,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 +5192,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 +5354,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 +5380,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 +5387,9 @@
     exports.bind_key_event = bind_key_event;
     exports.bind_mouse_event = bind_mouse_event;
     exports.bind_pointer_event = bind_pointer_event;
+    exports.bind_swipe_event = bind_swipe_event;
+    exports.bind_touch_event = bind_touch_event;
+    exports.bind_view_event = bind_view_event;
     exports.bind_wheel_event = bind_wheel_event;
     exports.cartesianProduct = cartesianProduct;
     exports.ceil = ceil;
@@ -5578,6 +5415,7 @@
     exports.div = div;
     exports.e = e;
     exports.elastic = elastic;
+    exports.event_controller = event_controller;
     exports.fact = fact;
     exports.floor = floor;
     exports.geomspace = geomspace;
@@ -5679,14 +5517,17 @@
     exports.timeTaken = timeTaken;
     exports.time_memory_Taken = time_memory_Taken;
     exports.timeout = timeout;
-    exports.useChannel = useChannel;
+    exports.toggle_event_listener = toggle_event_listener;
     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;