ziko 0.68.0 → 0.68.1

package/dist/ziko.cjs

@@ -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
@@ -2649,6 +2649,65 @@ var StyleMethods = /*#__PURE__*/Object.freeze({
    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 });
@@ -2684,26 +2743,6 @@ function register_click_away_event(element) {
 // // 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;
@@ -2718,38 +2757,60 @@ const getCoordinates = (ctx, normalized = false) =>{
     }
 
     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;
@@ -2757,89 +2818,208 @@ const PtrListeners = {
                 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{
@@ -2856,24 +3036,26 @@ let UIElement$1 = class UIElement extends UIElementCore{
       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);
@@ -3861,20 +4043,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;
@@ -4892,6 +5060,8 @@ if(globalThis?.document){
 }
 
 exports.App = App;
+exports.ClickAwayEvent = ClickAwayEvent;
+exports.ClickListeners = ClickListeners;
 exports.Clock = Clock;
 exports.CloneElement = CloneElement;
 exports.Complex = Complex;
@@ -4901,13 +5071,16 @@ exports.EventController = EventController;
 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;
@@ -4924,6 +5097,8 @@ exports.UseRoot = UseRoot;
 exports.UseThread = UseThread;
 exports.Utils = Utils;
 exports.View = View;
+exports.ViewEvent = ViewEvent;
+exports.ViewListeners = ViewListeners;
 exports.ZikoApp = ZikoApp;
 exports.ZikoSPA = ZikoSPA;
 exports.ZikoUISuspense = ZikoUISuspense;
@@ -5054,6 +5229,9 @@ exports.pgcd = pgcd;
 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;