ziko 0.68.0 → 0.68.1

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Fri Feb 20 2026 11:36:37 GMT+0000 (UTC)
+  Date : Wed Feb 25 2026 12:45:41 GMT+0000 (UTC)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -2653,6 +2653,65 @@
       style: style$1
    });
 
+   class EventController {
+     constructor(target, category){
+       this.cache = {
+         category,
+         target,
+         listeners : {},
+         currentEvent : null,
+         event : null,
+         customEvents : new Set()
+       };
+     }
+     get event(){
+       return this.cache.event
+     }
+     get element(){
+       return this.cache.target.element;
+     }
+     get currentEvent(){
+       return this.cache.currentEvent;
+     }
+     addListener(event_name, callback, {preventDefault = false, paused = false} = {}){
+       this.cache.listeners[event_name] = {
+         callback : e =>{
+           this.cache.event = e;
+           if(this.cache.listeners[event_name].preventDefault) e.preventDefault();
+           if(!this.cache.listeners[event_name].paused) {
+             this.cache.currentEvent = event_name;
+             callback.call(this, this);
+           }
+         },
+         preventDefault,
+         paused,
+       };
+       this.element.addEventListener(event_name, this.cache.listeners[event_name].callback);
+       return this;
+     }
+     removeListener(event_name){
+       this.element.removeEventListener(event_name, this.cache.listeners[event_name].callback);
+       return this;
+     }
+     pause(event_name){
+       this.cache.listeners[event_name].paused = true;
+       return this;
+     }
+     resume(event_name){
+       this.cache.listeners[event_name].paused = false;
+       return this;
+     }
+     preventDefault(event_name){
+       // if(!event_name) 
+       this.cache.listeners[event_name].preventDefault = true;
+       return this;
+     }
+     useDefault(event_name){
+       this.cache.listeners[event_name].preventDefault = false;
+       return this;
+     }
+   }
+
    class ClickAwayEvent extends Event {
      constructor(originalEvent, targetElement) {
        super("clickaway", { bubbles: true, cancelable: true });
@@ -2688,26 +2747,6 @@
    // // later, you can stop listening:
    // // stop();
 
-   const CATEGORY$2 = 'click';
-   const ClickListeners = {
-       onClick(callback){
-           this._on(
-               'click', callback, 
-               { category : CATEGORY$2 });
-       },
-       onDblClick(callback){
-           this._on(
-               'dblclick', callback, 
-               { category : CATEGORY$2});
-       },
-       onClickAway(callback){
-           register_click_away_event(this.element);
-           this._on(
-               'clickaway', callback, 
-               { category : CATEGORY$2});
-       },
-   };
-
    const getCoordinates = (ctx, normalized = false) =>{
        const rect = ctx.element.getBoundingClientRect();
        const e = ctx.event;
@@ -2722,38 +2761,60 @@
        }
 
        return {x, y};
+   };
+
+   const isCustomEventRegistred = (ctx, category, event_name) => ctx.exp.events?.[category]?.cache?.customEvents?.has(event_name);
+
+   const CATEGORY$3 = 'click';
+   const ClickListeners = {
+       onClick(callback){
+           return this.on(
+               'click', callback, 
+               { category : CATEGORY$3 })
+       },
+       onDblClick(callback){
+           return this.on(
+               'dblclick', callback, 
+               { category : CATEGORY$3})
+       },
+       onClickAway(callback){
+           if(!isCustomEventRegistred(this, CATEGORY$3, 'clickaway')) register_click_away_event(this.element);
+           return this.on(
+               'clickaway', callback, 
+               { category : CATEGORY$3, isCustom : true})
+       },
    };
 
-   const CATEGORY$1 = 'ptr';
+   const CATEGORY$2 = 'ptr';
    const PtrListeners = {
        onPtrDown(callback, useNormalizedCoordinates = false){
-           this._on(
+           return this.on(
                'pointerdown', callback, 
-               { category : CATEGORY$1, details_setter : (ctx)=> {
+               { category : CATEGORY$2, details_setter : (ctx)=> {
                    const {x, y} = getCoordinates(ctx, useNormalizedCoordinates);
                    ctx.dx = x;
                    ctx.dy = y;
                    ctx.isDown = true;
                    ctx.isDragging = ctx.isMoving ?? false;
                }}
-           );
+           )
        },
        onPtrMove(callback, useNormalizedCoordinates = false){
-           this._on(
+           return this.on(
                'pointermove', callback, 
-               { category : CATEGORY$1, details_setter : (ctx)=> {
+               { category : CATEGORY$2, details_setter : (ctx)=> {
                    const {x, y} = getCoordinates(ctx, useNormalizedCoordinates);
                    ctx.mx = x;
                    ctx.my = y;
                    ctx.isMoving = true;
                    ctx.isDragging = ctx.isDown ?? false;
                }}
-           );
+           )
        },
        onPtrUp(callback, useNormalizedCoordinates = false){
-           this._on(
+           return this.on(
                'pointerup', callback, 
-               { category : CATEGORY$1, details_setter : (ctx)=> {
+               { category : CATEGORY$2, details_setter : (ctx)=> {
                    const {x, y} = getCoordinates(ctx, useNormalizedCoordinates);
                    ctx.ux = x;
                    ctx.uy = y;
@@ -2761,89 +2822,208 @@
                    ctx.isMoving = false;
                    ctx.isDragging = false;
                }}
-           );
+           )
        }
    };
 
-   const CATEGORY = 'key';
+   const CATEGORY$1 = 'key';
    const KeyListeners = {
        onKeyDown(callback){
-           this._on(
+           return this.on(
                'keydown', callback, 
-               { category : CATEGORY, details_setter : ctx=> { ctx.kd = ctx.event.key; }
-           });
+               { category : CATEGORY$1, details_setter : ctx=> { ctx.kd = ctx.event.key; }
+           })
        },
        onKeyPress(callback){
-           this._on(
+           return this.on(
                'keypress', callback, 
-               { category : CATEGORY, details_setter : ctx=> { ctx.kp = ctx.event.key; }
-           });
+               { category : CATEGORY$1, details_setter : ctx=> { ctx.kp = ctx.event.key; }
+           })
        },
        onKeyUp(callback){
-           this._on(
+           return this.on(
                'keydown', callback, 
-               { category : CATEGORY, details_setter : ctx=> { ctx.ku = ctx.event.key; }
-           });
+               { category : CATEGORY$1, details_setter : ctx=> { ctx.ku = ctx.event.key; }
+           })
        },
        
    };
 
-   class EventController {
-     constructor(target, category){
-       this.cache = {
-         category,
-         target,
-         listeners : {},
-         currentEvent : null,
-         event : null
+   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
+                   })
+               );
+           }
        };
-     }
-     get event(){
-       return this.cache.event
-     }
-     get element(){
-       return this.cache.target.element;
-     }
-     get currentEvent(){
-       return this.cache.currentEvent;
-     }
-     addListener(event_name, callback, {preventDefault = false, paused = false} = {}){
-       this.cache.listeners[event_name] = {
-         callback : e =>{
-           this.cache.event = e;
-           if(this.cache.listeners[event_name].preventDefault) e.preventDefault();
-           if(!this.cache.listeners[event_name].paused) {
-             this.cache.currentEvent = event_name;
-             callback.call(this, this);
+
+       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));
            }
-         },
-         preventDefault,
-         paused,
        };
-       this.element.addEventListener(event_name, this.cache.listeners[event_name].callback);
-       return this;
-     }
-     removeListener(event_name){
-       this.element.removeEventListener(event_name, this.cache.listeners[event_name].callback);
-       return this;
-     }
-     pause(event_name){
-       this.cache.listeners[event_name].paused = true;
-       return this;
-     }
-     resume(event_name){
-       this.cache.listeners[event_name].paused = false;
-       return this;
+
+       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();
+           }
+       };
+   }
+
+   const CATEGORY = 'view';
+   const ViewListeners = {
+       onEnterView(callback){
+           if(!this.exp.events?.[CATEGORY]) register_view_event(this.element);
+           return this.on(
+               'enterview', callback, 
+               { category : CATEGORY, isCustom : true})
+       },
+       onExitView(callback){
+           if(!this.exp.events?.[CATEGORY]) register_view_event(this.element);
+           return this.on(
+               'exitview', callback, 
+               { category : CATEGORY, isCustom : true})
+       },
+       onResizeView(callback){
+           if(!this.exp.events?.[CATEGORY]) register_view_event(this.element);
+           return this.on(
+               'resizeview', callback, 
+               { category : CATEGORY, isCustom : true})
+       },
+   };
+
+   class SwipeEvent extends CustomEvent {
+     constructor(type, detail) {
+       super(type, {
+         detail,
+         bubbles: true,
+         cancelable: true
+       });
      }
-     preventDefault(event_name){
-       // if(!event_name) 
-       this.cache.listeners[event_name].preventDefault = true;
-       return this;
+   }
+
+   function register_swipe_event(
+     element,
+     threshold = 5,
+     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;
      }
-     useDefault(event_name){
-       this.cache.listeners[event_name].preventDefault = false;
-       return this;
+
+     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);
+     };
    }
 
    let UIElement$1 = class UIElement extends UIElementCore{
@@ -2860,24 +3040,26 @@
          AttrsMethods, 
          DomMethods, 
          StyleMethods,
-         IndexingMethods, 
+         IndexingMethods,
          PtrListeners,
          ClickListeners,
-         KeyListeners
+         KeyListeners,
+         ViewListeners,
        );
 
        if(element)this.init(element, name, type, render);
      }
-     _on(event, callback, {details_setter, category = 'global', preventDefault = false} = {}){
+     on(event_name, callback, {details_setter, category = 'global', isCustom = false,preventDefault = false} = {}){
        if(category && !this.exp.events.hasOwnProperty(category)) this.exp.events[category] = new EventController(this, category);
+       isCustom && this.exp.events[category].cache.customEvents.add(event_name);
        const EVENT = this.exp.events[category];
-       EVENT.addListener(event, (e)=>{
+       EVENT.addListener(event_name, (e)=>{
          if(details_setter) details_setter(EVENT);
          callback(e);
        },{
          preventDefault
        });
-       
+       return this;
      }
      _off(event, category = 'global'){
        this.exp.events[category].removeListener(event);
@@ -3865,20 +4047,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;
@@ -4896,6 +5064,8 @@
    }
 
    exports.App = App;
+   exports.ClickAwayEvent = ClickAwayEvent;
+   exports.ClickListeners = ClickListeners;
    exports.Clock = Clock;
    exports.CloneElement = CloneElement;
    exports.Complex = Complex;
@@ -4905,13 +5075,16 @@
    exports.FileBasedRouting = FileBasedRouting;
    exports.Flex = Flex;
    exports.HTMLWrapper = HTMLWrapper;
+   exports.KeyListeners = KeyListeners;
    exports.Matrix = Matrix;
    exports.PI = PI$1;
+   exports.PtrListeners = PtrListeners;
    exports.Random = Random;
    exports.SPA = SPA;
    exports.SVGWrapper = SVGWrapper;
    exports.Scheduler = Scheduler;
    exports.Suspense = Suspense;
+   exports.SwipeEvent = SwipeEvent;
    exports.Switch = Switch;
    exports.Tick = Tick;
    exports.TimeAnimation = TimeAnimation;
@@ -4928,6 +5101,8 @@
    exports.UseThread = UseThread;
    exports.Utils = Utils;
    exports.View = View;
+   exports.ViewEvent = ViewEvent;
+   exports.ViewListeners = ViewListeners;
    exports.ZikoApp = ZikoApp;
    exports.ZikoSPA = ZikoSPA;
    exports.ZikoUISuspense = ZikoUISuspense;
@@ -5058,6 +5233,9 @@
    exports.pow = pow$1;
    exports.ppcm = ppcm;
    exports.rad2deg = rad2deg;
+   exports.register_click_away_event = register_click_away_event;
+   exports.register_swipe_event = register_swipe_event;
+   exports.register_view_event = register_view_event;
    exports.remove_class = remove_class;
    exports.round = round;
    exports.script = script;