ziko 0.50.1 → 0.51.0

package/dist/ziko.cjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Tue Dec 02 2025 12:55:22 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
@@ -945,16 +945,28 @@ const preload=(url)=>{
     }
 };
 
-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;
@@ -1074,35 +1086,6 @@ class UINode {
 
 // globalThis.node = (node) => new UINode(node);
 
-function parseQueryParams$1(queryString) {
-    const params = {};
-    queryString.replace(/[A-Z0-9]+?=([\w|:|\/\.]*)/gi, (match) => {
-        const [key, value] = match.split('=');
-        params[key] = value;
-    });
-    return params;
-}
-
-function defineParamsGetter$1(target ){
-    Object.defineProperties(target, {
-        'QueryParams': {
-            get: function() {
-                return parseQueryParams$1(globalThis.location.search.substring(1));
-            },
-            configurable: false,
-            enumerable: true 
-        },
-        'HashParams': {
-            get: function() {
-                const hash = globalThis.location.hash.substring(1);
-                return hash.split("#");
-            },
-            configurable: false,
-            enumerable: true 
-        }
-    });
-}
-
 class UIStore extends Array {
     constructor(...args) {
         super(...args); 
@@ -1136,6 +1119,202 @@ class UIStore extends Array {
 // create the singleton
 const __UI__ = new UIStore();
 
+// __init__global__()
+class UIElementCore extends UINode{
+  constructor(){
+    super();
+  }
+  init(element, name, type, render){
+    this.target = globalThis.__Ziko__.__Config__.default.target||globalThis?.document?.body;
+    if(typeof element === "string") {
+      switch(type){
+        case "html" : {
+          element = globalThis?.document?.createElement(element);
+          // console.log('1')
+        } break;
+        case "svg" : {
+          element = globalThis?.document?.createElementNS("http://www.w3.org/2000/svg", element); 
+          // console.log('2')
+        } break;
+        default : throw Error("Not supported")
+      }
+    }
+    else this.target = element?.parentElement;
+    Object.assign(this.cache, {
+      name,
+      isInteractive : false,
+      parent:null,
+      isBody:false,
+      isRoot:false,
+      isHidden: false,
+      isFrozzen:false,
+      legacyParent : null,
+      attributes: {},
+      filters: {},
+      temp:{}
+    });
+    this.events = {
+      ptr:null,
+      mouse:null,
+      wheel:null,
+      key:null,
+      drag:null,
+      drop:null,
+      click:null,
+      clipboard:null,
+      focus:null,
+      swipe:null,
+      custom:null,
+    };
+    this.observer={
+      resize:null,
+      intersection:null
+    };
+    if(element) Object.assign(this.cache,{element});
+    // useDefaultStyle && this.style({ 
+    //   position: "relative",
+    //   boxSizing:"border-box",
+    //   margin:0,
+    //   padding:0,
+    //   width : "auto",
+    //   height : "auto"
+    //  });
+    this.items = new UIStore();
+    globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
+    element && render && this?.render?.();
+    globalThis.__Ziko__.__UI__.push(this);
+  }
+  get element(){
+    return this.cache.element;
+  }
+    [Symbol.iterator]() {
+    return this.items[Symbol.iterator]();
+  }
+  maintain() {
+    for (let i = 0; i < this.items.length; i++) {
+      Object.defineProperty(this, i, {
+        value: this.items[i],
+        writable: true,
+        configurable: true,
+        enumerable: false 
+        });
+    }
+  }
+  isInteractive(){
+    return this.cache.isInteractive;
+  }
+  isUIElement(){
+    return true;
+  }
+}
+
+function register_to_class(target, ...mixins){
+    mixins.forEach(n => _register_to_class_(target, n));
+}
+function _register_to_class_(target, mixin) {
+  const descriptors = Object.getOwnPropertyDescriptors(mixin);
+  for (const key of Reflect.ownKeys(descriptors)) {
+    const desc = descriptors[key];
+    if ('get' in desc || 'set' in desc || typeof desc.value !== 'function') {
+      Object.defineProperty(Object.getPrototypeOf(target), key, desc);
+    } else if (typeof desc.value === 'function') {
+      if (!Object.getPrototypeOf(target).hasOwnProperty(key)) {
+        Object.defineProperty(Object.getPrototypeOf(target), key, desc);
+      }
+    }
+  }
+}
+
+// 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,
@@ -1334,299 +1513,59 @@ class UseStorage {
         return this.items[key];
     }
     clear() {
-        this.cache.storage.removeItem(this.cache.globalKey);
-        this.cache.oldItemKeys.forEach(k => delete this[k]);
-        this.cache.oldItemKeys.clear();
-        this.#maintain();
-        return this;
-    }
-    onStorageUpdated(callback) {
-        if (this.cache.channel) {
-            this.cache.channel.on("Ziko-Storage-Updated", callback);
-        }
-        return this;
-    }
-}
-
-// factory functions
-const useLocaleStorage = (key, initialValue, use_channel = true) =>
-    new UseStorage(localStorage, key, initialValue, use_channel);
-
-const useSessionStorage = (key, initialValue, use_channel = true) =>
-    new UseStorage(sessionStorage, key, initialValue, use_channel);
-
-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;
-//   }
+        this.cache.storage.removeItem(this.cache.globalKey);
+        this.cache.oldItemKeys.forEach(k => delete this[k]);
+        this.cache.oldItemKeys.clear();
+        this.#maintain();
+        return this;
+    }
+    onStorageUpdated(callback) {
+        if (this.cache.channel) {
+            this.cache.channel.on("Ziko-Storage-Updated", callback);
+        }
+        return this;
+    }
+}
 
-}
+// factory functions
+const useLocaleStorage = (key, initialValue, use_channel = true) =>
+    new UseStorage(localStorage, key, initialValue, use_channel);
+
+const useSessionStorage = (key, initialValue, use_channel = true) =>
+    new UseStorage(sessionStorage, key, initialValue, use_channel);
 
-function register_to_class(target, ...mixins){
-    mixins.forEach(n => _register_to_class_(target, n));
-}
-function _register_to_class_(target, mixin) {
-  const descriptors = Object.getOwnPropertyDescriptors(mixin);
-  for (const key of Reflect.ownKeys(descriptors)) {
-    const desc = descriptors[key];
-    if ('get' in desc || 'set' in desc || typeof desc.value !== 'function') {
-      Object.defineProperty(Object.getPrototypeOf(target), key, desc);
-    } else if (typeof desc.value === 'function') {
-      if (!Object.getPrototypeOf(target).hasOwnProperty(key)) {
-        Object.defineProperty(Object.getPrototypeOf(target), key, desc);
-      }
+var __State__ = {
+    store : new Map(),
+    index : 0,
+    session_storage : null,
+    register: function(state){
+        if(!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__();
@@ -1835,18 +1774,6 @@ function clear(){
   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;
@@ -1854,14 +1781,6 @@ function replaceElementWith(new_element){
     // 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);
@@ -1880,13 +1799,9 @@ var DomMethods = /*#__PURE__*/Object.freeze({
     before: before,
     clear: clear,
     insertAt: insertAt,
-    mount: mount,
     prepend: prepend,
     remove: remove,
-    renderAfter: renderAfter,
-    replaceElementWith: replaceElementWith,
-    unmount: unmount,
-    unrenderAfter: unrenderAfter
+    replaceElementWith: replaceElementWith
 });
 
 const EventsMap = {
@@ -1935,64 +1850,109 @@ const EventsMap = {
     ],
     '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()
 };
 
-let ZikoEvent$1 = 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;
@@ -2000,114 +1960,51 @@ let ZikoEvent$1 = class ZikoEvent {
     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;
     }
-};
-
-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));
 }
 
 function key_details_setter(){
@@ -2194,70 +2091,277 @@ function register_click_away_event(element) {
 // // 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 ViewEvent extends CustomEvent {
+    constructor(type, detail, { bubbles = true, cancelable = true } = {}) {
+        super(type, { detail, bubbles, cancelable });
+    }
+}
+
+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
+    });
+  }
+}
+
+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$1(
+    return new ZikoEvent(
+        'click',
         target,
         EventsMap.Click,
         null,
         customizer
     );
 };
-const bind_clipboard_event = (target, customizer) => new ZikoEvent$1(
+const bind_clipboard_event = (target, customizer) => new ZikoEvent(
+    'clipboard',
     target,
     EventsMap.Clipboard,
     null,
     customizer
 );
-const bind_drag_event = (target, customizer) => new ZikoEvent$1(
+const bind_drag_event = (target, customizer) => new ZikoEvent(
+    'drag',
     target,
     EventsMap.Drag,
     null,
     customizer
 );
-const bind_focus_event = (target, customizer) => new ZikoEvent$1(
+const bind_focus_event = (target, customizer) => new ZikoEvent(
+    'focus',
     target,
     EventsMap.Focus,
     null,
     customizer
 );
-const bind_key_event = (target, customizer) => new ZikoEvent$1(
+const bind_key_event = (target, customizer) => new ZikoEvent(
+    'key',
     target,
     EventsMap.Key, 
     key_details_setter, 
     customizer
 );
-const bind_mouse_event = (target, customizer) => new ZikoEvent$1(
+const bind_mouse_event = (target, customizer) => new ZikoEvent(
+    'mouse',
     target,
     EventsMap.Mouse,
     null,
     customizer
 );
-const bind_pointer_event = (target, customizer) => new ZikoEvent$1(
+const bind_pointer_event = (target, customizer) => new ZikoEvent(
+    'ptr',
     target,
     EventsMap.Ptr, 
     ptr_details_setter, 
     customizer
 );
-const bind_touch_event = (target, customizer) => new ZikoEvent$1(
+const bind_touch_event = (target, customizer) => new ZikoEvent(
+    'touch',
     target,
     EventsMap.Touch,
     null,
     customizer
 );
-const bind_wheel_event = (target, customizer) => new ZikoEvent$1(
+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
+    )
+};
 
-// function details_setter(){
-//     if(this.currentEvent==="click") this.dx = 0
-//     else this.dx = 1
-//     // console.log(this.currentEvent)
-// }
+const bind_swipe_event = (target, customizer) => {
+    register_swipe_event(target.element);
+    return new ZikoEvent(
+        'swipe',
+        target, 
+        EventsMap.Swipe,
+        null, 
+        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_custom_event = (target, events, customizer) => new ZikoCustomEvent(target, events, customizer);
 
 const binderMap = {
   ptr: bind_pointer_event,
@@ -2267,17 +2371,31 @@ const binderMap = {
   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(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;
     };
   });
@@ -2338,158 +2456,14 @@ function animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
     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}={}){
@@ -2498,12 +2472,15 @@ let UIElement$1 = class UIElement extends UIElementCore{
     // 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(){
@@ -2625,32 +2602,12 @@ let UIElement$1 = class UIElement extends UIElementCore{
   // 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;
@@ -2659,16 +2616,8 @@ let UIElement$1 = class UIElement extends UIElementCore{
   //   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
 
 };
 
@@ -2967,7 +2916,6 @@ class ZikoUISuspense extends UIElement{
                 const ui = await callback();
                 fallback_ui.unmount();
                 this.append(ui);
-                // console.log(content)
             }
             catch(error){
                 console.log({error});
@@ -4598,20 +4546,6 @@ const Scheduler = (tasks, { repeat = null} = {}) => new TimeScheduler(tasks, { r
 
 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;
@@ -4784,212 +4718,7 @@ const timeTaken = callback => {
     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;
@@ -5016,11 +4745,11 @@ class ZikoApp {
         else if(typeof wrapper === "function") this.wrapper = wrapper();
         return this;
     }
-    setHead(head){
-        if(head instanceof ZikoHead) this.head = head;
-        else this.head = useHead(head);
-        return this;  
-    }
+    // setHead(head){
+    //     if(head instanceof ZikoHead) this.head = head;
+    //     else this.head = useHead(head);
+    //     return this;  
+    // }
     
 }
 const App = ({head, wrapper, target}) => new ZikoApp({head, wrapper, target});
@@ -5290,7 +5019,76 @@ class UseThread {
     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);
 
 /*
  [
@@ -5390,6 +5188,75 @@ class UseTitle {
 
 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) {
@@ -5483,11 +5350,12 @@ exports.UINode = UINode;
 exports.UISVGWrapper = UISVGWrapper;
 exports.UISwitch = UISwitch;
 exports.UIView = UIView;
+exports.UseRoot = UseRoot;
 exports.UseThread = UseThread;
 exports.Utils = Utils;
 exports.View = View;
 exports.ZikoApp = ZikoApp;
-exports.ZikoEvent = ZikoEvent$1;
+exports.ZikoEvent = ZikoEvent;
 exports.ZikoSPA = ZikoSPA;
 exports.ZikoUIFlex = ZikoUIFlex;
 exports.ZikoUISuspense = ZikoUISuspense;
@@ -5515,7 +5383,9 @@ exports.bind_focus_event = bind_focus_event;
 exports.bind_key_event = bind_key_event;
 exports.bind_mouse_event = bind_mouse_event;
 exports.bind_pointer_event = bind_pointer_event;
+exports.bind_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;
@@ -5541,6 +5411,7 @@ exports.discret = discret;
 exports.div = div;
 exports.e = e;
 exports.elastic = elastic;
+exports.event_controller = event_controller;
 exports.fact = fact;
 exports.floor = floor;
 exports.geomspace = geomspace;
@@ -5642,14 +5513,17 @@ exports.tick = tick;
 exports.timeTaken = timeTaken;
 exports.time_memory_Taken = time_memory_Taken;
 exports.timeout = timeout;
+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;