ziko 0.50.1 → 0.51.0

package/dist/ziko.mjs

@@ -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
@@ -943,16 +943,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;
@@ -1211,6 +1223,67 @@ function _register_to_class_(target, mixin) {
   }
 }
 
+// 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) => {
@@ -1699,18 +1772,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;
@@ -1718,14 +1779,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);
@@ -1744,20 +1797,12 @@ 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 = {
-    'Custom' : [
-        'emit',
-        'on'
-    ],
     'Click' : [
         'Click',
         'DblClick',
@@ -1803,64 +1848,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()
 };
 
 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;
@@ -1868,114 +1958,51 @@ 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(){
@@ -1993,38 +2020,137 @@ function key_details_setter(){
     }
 }
 
-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 {
@@ -2062,9 +2188,165 @@ 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(
+        'click',
         target,
         EventsMap.Click,
         null,
@@ -2072,64 +2354,87 @@ const bind_click_event = (target, customizer) => {
     );
 };
 const bind_clipboard_event = (target, customizer) => new ZikoEvent(
+    'clipboard',
     target,
     EventsMap.Clipboard,
     null,
     customizer
 );
 const bind_drag_event = (target, customizer) => new ZikoEvent(
+    'drag',
     target,
     EventsMap.Drag,
     null,
     customizer
 );
 const bind_focus_event = (target, customizer) => new ZikoEvent(
+    'focus',
     target,
     EventsMap.Focus,
     null,
     customizer
 );
 const bind_key_event = (target, customizer) => new ZikoEvent(
+    'key',
     target,
     EventsMap.Key, 
     key_details_setter, 
     customizer
 );
-const bind_mouse_event = (target, customizer) => new ZikoEvent(
+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);
@@ -2163,7 +2468,9 @@ 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 = {
@@ -2183,9 +2490,9 @@ Object.entries(EventsMap).forEach(([name, eventList]) => {
   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;
     };
   });
@@ -2262,6 +2569,7 @@ let UIElement$1 = class UIElement extends UIElementCore{
     // console.log(this)
     register_to_class(
       this, 
+      LifecycleMethods,
       AttrsMethods, 
       DomMethods, 
       StyleMethods,
@@ -2391,32 +2699,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;
@@ -2425,16 +2713,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
 
 };
 
@@ -2733,7 +3013,6 @@ class ZikoUISuspense extends UIElement{
                 const ui = await callback();
                 fallback_ui.unmount();
                 this.append(ui);
-                // console.log(content)
             }
             catch(error){
                 console.log({error});
@@ -4364,20 +4643,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;
@@ -5152,4 +5417,4 @@ if(globalThis?.document){
     document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());
 }
 
-export { App, Base, Clock, Combinaison, Complex, E, EPSILON, FileBasedRouting, Flex, HTMLWrapper, Logic$1 as Logic, Matrix, PI$2 as PI, Permutation, Random, SPA, SVGWrapper, Scheduler, Suspense, Switch, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UIHTMLWrapper, UINode, UISVGWrapper, UISwitch, UIView, UseRoot, UseThread, Utils, View, ZikoApp, ZikoEvent, ZikoSPA, ZikoUIFlex, ZikoUISuspense, ZikoUIText, abs, accum, acos$1 as acos, acosh, acot, add, animation, arange, arc, arr2str, asin, asinh, atan, atan2, atanh, back, bind_click_event, bind_clipboard_event, bind_drag_event, bind_focus_event, bind_key_event, bind_mouse_event, bind_pointer_event, bind_touch_event, bind_wheel_event, cartesianProduct, ceil, clamp, clock, combinaison, complex, cos$2 as cos, cosh$1 as cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, discret, div, e, elastic, fact, floor, geomspace, getEvent, hypot, inRange, in_back, in_bounce, in_circ, in_cubic, in_elastic, in_expo, in_out_back, in_out_bounce, in_out_circ, in_out_cubic, in_out_elastic, in_out_expo, in_out_quad, in_out_quart, in_out_quint, in_out_sin, in_quad, in_quart, in_quint, in_sin, isApproximatlyEqual, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linear, linspace, ln, logspace, loop, map$1 as map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ones, out_back, out_bounce, out_circ, out_cubic, out_elastic, out_expo, out_quad, out_quart, out_quint, out_sin, pgcd, pow$1 as pow, powerSet, ppcm, preload, prod, rad2deg, round, sec, sig, sign, sin$2 as sin, sinc, sinh$1 as sinh, sleep, sqrt$2 as sqrt, sqrtn, step, step_fps, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, useDerived, useEventEmitter, useIPC, useLocaleStorage, useMediaQuery, useReactive, useRoot, useSessionStorage, useState, useThread, useTitle, wait, waitForUIElm, waitForUIElmSync, zeros };
+export { App, Base, Clock, Combinaison, Complex, E, EPSILON, FileBasedRouting, Flex, HTMLWrapper, Logic$1 as Logic, Matrix, PI$2 as PI, Permutation, Random, SPA, SVGWrapper, Scheduler, Suspense, Switch, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UIHTMLWrapper, UINode, UISVGWrapper, UISwitch, UIView, UseRoot, UseThread, Utils, View, ZikoApp, ZikoEvent, ZikoSPA, ZikoUIFlex, ZikoUISuspense, ZikoUIText, abs, accum, acos$1 as acos, acosh, acot, add, animation, arange, arc, arr2str, asin, asinh, atan, atan2, atanh, back, bind_click_event, bind_clipboard_event, bind_drag_event, bind_focus_event, bind_key_event, bind_mouse_event, bind_pointer_event, bind_swipe_event, bind_touch_event, bind_view_event, bind_wheel_event, cartesianProduct, ceil, clamp, clock, combinaison, complex, cos$2 as cos, cosh$1 as cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, discret, div, e, elastic, event_controller, fact, floor, geomspace, getEvent, hypot, inRange, in_back, in_bounce, in_circ, in_cubic, in_elastic, in_expo, in_out_back, in_out_bounce, in_out_circ, in_out_cubic, in_out_elastic, in_out_expo, in_out_quad, in_out_quart, in_out_quint, in_out_sin, in_quad, in_quart, in_quint, in_sin, isApproximatlyEqual, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linear, linspace, ln, logspace, loop, map$1 as map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ones, out_back, out_bounce, out_circ, out_cubic, out_elastic, out_expo, out_quad, out_quart, out_quint, out_sin, pgcd, pow$1 as pow, powerSet, ppcm, preload, prod, rad2deg, round, sec, sig, sign, sin$2 as sin, sinc, sinh$1 as sinh, sleep, sqrt$2 as sqrt, sqrtn, step, step_fps, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, toggle_event_listener, useDerived, useEventEmitter, useIPC, useLocaleStorage, useMediaQuery, useReactive, useRoot, useSessionStorage, useState, useThread, useTitle, wait, waitForUIElm, waitForUIElmSync, zeros };