ziko 0.50.1 → 0.51.0

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Tue Dec 02 2025 16:28:22 GMT+0100 (UTC+01:00)
+  Date : Wed Dec 03 2025 10:58:16 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;
@@ -1217,6 +1229,67 @@
       }
     }
 
+    // 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) => {
@@ -1705,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;
@@ -1724,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);
@@ -1750,20 +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 EventsMap = {
-        'Custom' : [
-            'emit',
-            'on'
-        ],
         'Click' : [
             'Click',
             'DblClick',
@@ -1809,64 +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()
     };
 
     class ZikoEvent {
-        constructor(target = null, Events = [], details_setter, customizer){
+        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;
@@ -1874,114 +1964,51 @@
         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(){
@@ -1999,38 +2026,137 @@
         }
     }
 
-    function ptr_details_setter(){
-        switch(this.currentEvent){
-            case "pointerdown" : {
-                this.dx = parseInt(this.event.offsetX);
-                this.dy = parseInt(this.event.offsetY);
+    function ptr_details_setter() {
+        const rect = this.targetElement.getBoundingClientRect();
+        const e = this.event;
+        let x = (e.clientX - rect.left) | 0;
+        let y = (e.clientY - rect.top) | 0;
+
+        if(this.cache.useNormalisedCoordinates){
+            const w = this.targetElement.clientWidth;
+            const h = this.targetElement.clientHeight;
+            x = +((x / w) * 2 - 1).toFixed(8);
+            y = +((y / h) * -2 + 1).toFixed(8);
+        }
+        switch (this.currentEvent) {
+
+            case "pointerdown":
+                this.dx = x;
+                this.dy = y;
                 this.isDown = true;
-            } break;
-            case "pointermove" : {
-                this.mx = parseInt(this.event.offsetX);
-                this.my = parseInt(this.event.offsetY);
+                break;
+
+            case "pointermove":
+                this.mx = x;
+                this.my = y;
                 this.isMoving = true;
-            } break;
-            case "pointerup" : {
-                this.ux = parseInt(this.event.offsetX);
-                this.uy = parseInt(this.event.offsetY);
+                break;
+
+            case "pointerup":
+                this.ux = x;
+                this.uy = y;
                 this.isDown = false;
-                console.log(this.target.width);
-                const delta_x=(this.ux-this.dx)/this.target.width;
-                const delta_y=(this.dy-this.uy)/this.target.height;
-                const HORIZONTAL_SWIPPE=(delta_x<0)?"left":(delta_x>0)?"right":"none";
-                const VERTICAL_SWIPPE=(delta_y<0)?"bottom":(delta_y>0)?"top":"none";
-                this.swippe={
-                    h:HORIZONTAL_SWIPPE,
-                    v:VERTICAL_SWIPPE,
-                    delta_x,
-                    delta_y
-                };
-            } break;
+                this.isMoving = false;
+                break;
+        }
+    }
+
+    function mouse_details_setter() {
+        const rect = this.targetElement.getBoundingClientRect();
+        const e = this.event;
+        let x = (e.clientX - rect.left) | 0;
+        let y = (e.clientY - rect.top) | 0;
+
+        if(this.cache.useNormalisedCoordinates){
+            const w = this.targetElement.clientWidth;
+            const h = this.targetElement.clientHeight;
+            x = +((x / w) * 2 - 1).toFixed(8);
+            y = +((y / h) * -2 + 1).toFixed(8);
+        }
+
+        switch (this.currentEvent) {
+
+            case "mousedown":
+                this.dx = x;
+                this.dy = y;
+                this.isDown = true;
+                break;
+
+            case "mousemove":
+                this.mx = x;
+                this.my = y;
+                this.isMoving = true;
+                break;
+
+            case "mouserup":
+                this.ux = x;
+                this.uy = y;
+                this.isDown = false;
+                this.isMoving = false;
+                break;
+        }
+    }
+
+    function touch_details_setter() {
+        const e = this.event;
+        const touch = e.touches?.[0] || e.changedTouches?.[0];
+
+        if (!touch) return; // should never happen but safe
+
+        const rect = this.targetElement.getBoundingClientRect();
+        let x = touch.clientX - rect.left;
+        let y = touch.clientY - rect.top;
+
+        if(this.cache.useNormalisedCoordinates){
+            const w = this.targetElement.clientWidth;
+            const h = this.targetElement.clientHeight;
+            x = +((x / w) * 2 - 1).toFixed(8);
+            y = +((y / h) * -2 + 1).toFixed(8);
+        }
+
+        switch (this.currentEvent) {
+            case "touchstart":
+                this.dx = x;
+                this.dy = y;
+                this.isDown = true;
+                break;
+
+            case "touchmove":
+                this.mx = x;
+                this.my = y;
+                this.isMoving = true;
+                break;
+
+            case "touchend":
+                this.ux = x;
+                this.uy = y;
+                this.isDown = false;
+                break;
+        }
+    }
+
+    class CoordinatesBasedEvent extends ZikoEvent{
+        constructor(signature, target = null, Events = [], details_setter, customizer){
+            super(signature, target, Events, details_setter, customizer);
+            Object.assign(this.cache,{
+                useNormalisedCoordinates : false
+            });
+            this.isDown = false;
+            this.isMoving = false;
+            this.dx = 0;
+            this.dy = 0;
+            this.mx = 0;
+            this.my = 0;
+            this.ux = 0;
+            this.uy = 0;
+        }
+        get isDragging(){
+            return this.isDown && this.isMoving
+        }
+        useNormalisedCoordinates(enable = true){
+            this.cache.useNormalisedCoordinates = enable;
+            return this;
         }
-        // if(this.currentEvent==="click") this.dx = 0
-        // else this.dx = 1
-        // console.log(this.currentEvent)
     }
 
     class ClickAwayEvent extends Event {
@@ -2068,9 +2194,165 @@
     // // 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(
+            'click',
             target,
             EventsMap.Click,
             null,
@@ -2078,64 +2360,87 @@
         );
     };
     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(
+    const bind_mouse_event = (target, customizer) => new CoordinatesBasedEvent(
+        'mouse',
         target,
         EventsMap.Mouse,
-        null,
+        mouse_details_setter,
         customizer
     );
-    const bind_pointer_event = (target, customizer) => new ZikoEvent(
+    const bind_pointer_event = (target, customizer) => new CoordinatesBasedEvent(
+        'ptr',
         target,
         EventsMap.Ptr, 
         ptr_details_setter, 
         customizer
     );
-    const bind_touch_event = (target, customizer) => new ZikoEvent(
+    const bind_touch_event = (target, customizer) => new CoordinatesBasedEvent(
+        'touch',
         target,
         EventsMap.Touch,
-        null,
+        touch_details_setter,
         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
+        )
+    };
 
-    // 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(target, events, details_setter, customizer);
+            super('custom', target, events, details_setter, customizer);
         }
         _register_events(events){
             super._register_events(events, null, null, false);
@@ -2169,7 +2474,9 @@
       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 = {
@@ -2189,9 +2496,9 @@
       const lname = name.toLowerCase();
       eventList.forEach(event => {
         const methodName = `on${event}`;
-        EventsMethodes[methodName] = function (...callbacks) {
+        EventsMethodes[methodName] = function (callbacks) {
           if (!this.events[lname]) this.events[lname] = binderMap[lname](this);
-          this.events[lname][methodName](...callbacks);
+          this.events[lname][methodName](callbacks);
           return this;
         };
       });
@@ -2268,6 +2575,7 @@
         // console.log(this)
         register_to_class(
           this, 
+          LifecycleMethods,
           AttrsMethods, 
           DomMethods, 
           StyleMethods,
@@ -2397,32 +2705,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;
@@ -2431,16 +2719,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
 
     };
 
@@ -2739,7 +3019,6 @@
                     const ui = await callback();
                     fallback_ui.unmount();
                     this.append(ui);
-                    // console.log(content)
                 }
                 catch(error){
                     console.log({error});
@@ -4370,20 +4649,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;
@@ -5221,7 +5486,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;
@@ -5247,6 +5514,7 @@
     exports.div = div;
     exports.e = e;
     exports.elastic = elastic;
+    exports.event_controller = event_controller;
     exports.fact = fact;
     exports.floor = floor;
     exports.geomspace = geomspace;
@@ -5348,6 +5616,7 @@
     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;