ziko 0.66.0 → 0.68.0

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sat Feb 14 2026 15:12:05 GMT+0100 (UTC+01:00)
+  Date : Fri Feb 20 2026 11:36:37 GMT+0000 (UTC)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -2398,89 +2398,14 @@
        return typeof arg === 'function' && arg?.()?.isStateGetter?.();
    };
 
-   const camel2hyphencase$1 = (text = '') => text.replace(/[A-Z]/g, match => '-' + match.toLowerCase());
+   const camel2hyphencase = (text = '') => text.replace(/[A-Z]/g, match => '-' + match.toLowerCase());
 
-   const is_camelcase$1 = (text = '') =>{
+   const is_camelcase = (text = '') =>{
        if (text.length === 0) return false; 
        const camelCasePattern = /^[a-z][a-zA-Z0-9]*$/;
        return camelCasePattern.test(text);
    };
 
-   class ZikoUIText extends UINode {
-       constructor(...value) {
-         super("span", "text", false, ...value);
-         this.element = globalThis?.document?.createTextNode(...value);
-       }
-       isText(){
-         return true
-       }
-   }
-   const text = (...str) => new ZikoUIText(...str);
-
-   async function __addItem__(adder, pusher, ...ele) {
-     if (this.cache.isFrozzen) {
-       console.warn("You can't append new item to frozzen element");
-       return this;
-     }
-     for (let i = 0; i < ele.length; i++) {
-       if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
-           // Fix Items Latter
-       if (ele[i] instanceof Function) {
-        const getter = ele[i]();
-         if (getter.isStateGetter) {
-           ele[i] = text(getter.value);
-           getter._subscribe(
-               (newValue) => (ele[i].element.textContent = newValue),
-               ele[i] 
-           );
-           // this.element.appendChild(textNode);
-         }
-       }
-       if (typeof globalThis?.Node === "function" && ele[i] instanceof globalThis?.Node) ele[i] = new this.constructor(ele[i]);
-       if (ele[i]?.isUINode) {
-           ele[i].cache.parent = this;
-           this.element?.[adder](ele[i].element);
-           ele[i].target = this.element;
-           this.items[pusher](ele[i]);
-       } 
-       else if(ele[i] instanceof Promise){
-         const UIEle = await ele[i];
-         UIEle.cache.parent = this;
-         this.element?.[adder](UIEle.element);
-         UIEle.target = this.element;
-         this.items[pusher](UIEle);
-       }
-       else if (ele[i] instanceof Object) {
-         if (ele[i]?.style) this.style(ele[i]?.style);
-         if (ele[i]?.attr) {
-           Object.entries(ele[i].attr).forEach((n) =>
-             this.setAttr("" + n[0], n[1]),
-           );
-         }
-       }
-     }
-     this.maintain();
-     return this;
-   }
-   function _set_attrs_(name, value){
-       if(globalThis.SVGAElement && this.element instanceof globalThis.SVGAElement) name = is_camelcase$1(name) ? camel2hyphencase$1(name) : name;
-       if(this?.attr[name] && this?.attr[name]===value) return;
-       if(isStateGetter(value)){
-           const getter = value();
-           getter._subscribe(
-               (newValue) => this.element?.setAttribute(name, newValue),
-               this 
-           );
-       }
-       else this.element?.setAttribute(name, value);
-       Object.assign(this.cache.attributes, {[name]:value});   
-   }
-
-   // import { 
-   //   is_camelcase,
-   //   camel2hyphencase
-   //  } from '../../data/string/index.js'
-
    function setAttr(name, value) {
      if(name instanceof Object){
        const [names,values]=[Object.keys(name),Object.values(name)];
@@ -2506,16 +2431,49 @@
    function setContentEditable(bool = true) {
      this.setAttr("contenteditable", bool);
      return this;
+   }
+
+
+   function _set_attrs_(name, value){
+       if(globalThis.SVGAElement && this.element instanceof globalThis.SVGAElement) name = is_camelcase(name) ? camel2hyphencase(name) : name;
+       if(this?.attr[name] && this?.attr[name]===value) return;
+       if(isStateGetter(value)){
+           const getter = value();
+           getter._subscribe(
+               (newValue) => this.element?.setAttribute(name, newValue),
+               this 
+           );
+       }
+       else this.element?.setAttribute(name, value);
+       Object.assign(this.cache.attributes, {[name]:value});   
    }
 
    var AttrsMethods = /*#__PURE__*/Object.freeze({
       __proto__: null,
+      _set_attrs_: _set_attrs_,
       getAttr: getAttr,
       removeAttr: removeAttr,
       setAttr: setAttr,
       setContentEditable: setContentEditable
    });
 
+   class ZikoUIText extends UINode {
+       constructor(...value) {
+         super("span", "text", false, ...value);
+         this.element = globalThis?.document?.createTextNode(...value);
+       }
+       isText(){
+         return true
+       }
+   }
+   const text = (...str) => new ZikoUIText(...str);
+
+   // import { isStateGetter } from "../../../hooks/use-state.js";
+   // import { 
+   //   is_camelcase,
+   //   camel2hyphencase
+   //  } from '../../../data/string/index.js';
+
    function append(...ele) {
      __addItem__.call(this, "append", "push", ...ele);
      return this;
@@ -2567,714 +2525,68 @@
      if(ui?.isUIElement) ui=ui.element;
      this.element?.before(ui);
      return this;
-   }
-
-   var DomMethods = /*#__PURE__*/Object.freeze({
-      __proto__: null,
-      after: after,
-      append: append,
-      before: before,
-      clear: clear,
-      insertAt: insertAt,
-      prepend: prepend,
-      remove: remove,
-      replaceElementWith: replaceElementWith
-   });
-
-   const EventsMap = {
-       'Click' : [
-           'Click',
-           'DblClick',
-           'ClickAway'
-       ],
-       'Ptr' : [
-           'PtrMove',
-           'PtrDown',
-           'PtrUp',
-           'PtrLeave',
-           'PtrEnter',
-           'PtrOut',
-           'PtrCancel'
-       ],
-       'Mouse' : [
-           'MouseMove',
-           'MouseDown',
-           'MouseUp',
-           'MouseEnter',
-           'MouseLeave',
-           'MouseOut'
-       ],
-       // 'Touch' : [],
-       'Key' : [
-           'KeyDown',
-           'KeyPress',
-           'KeyUp'
-       ],
-       'Clipboard':[
-           'Copy',
-           'Cut',
-           'Paste'
-       ],
-       'Focus':[
-           'focus',
-           'blur'
-       ],
-       'Drag':[
-           "Drag",
-           "DragStart",
-           "DragEnd",
-           "Drop"
-       ],
-       '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(signature, target = null, Events = [], details_setter, customizer){
-           this.target = target;
-           this.cache = {
-               signature,
-               currentEvent : null,
-               event: null,
-               options : {},
-               preventDefault : {},
-               stopPropagation : {},
-               stopImmediatePropagation : {},
-               paused : {},
-               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) => {
-               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;
-       }
-       get item(){
-           return this.target.find(n => n.element == this.event?.srcElement)?.[0];
-       }
-       get currentEvent(){
-           return this.cache.currentEvent;
-       }
-       get event(){
-           return this.cache.event;
-       }
-       get detail(){
-           return this.cache.event.detail
-       }
-       setTarget(UI){
-           this.target = UI;
-           return this;
-       }
-       __handle(event, handler, options){
-           this.targetElement?.addEventListener(event, handler, options);
-           return this;
-       }
-       #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;
-       }
-       preventDefault(...events) {
-           return this.#override('preventDefault', ...events);
-       }
-       stopPropagation(...events) {
-           return this.#override('stopPropagation', ...events);
-       }
-       stopImmediatePropagation(...events) {
-           return this.#override('stopImmediatePropagation', ...events);
-       }
-       setEventOptions(event, options){
-           const evt = getEvent(event);
-           this.pause();
-           Object.assign(this.cache.options[evt], options);
-           this.resume();
-           return this;
-       }
-       pause(...events) {
-           return toggle_event_listener.call(this, 'removeEventListener', ...events)
-       }
-       resume(...events) {
-           return toggle_event_listener.call(this, 'addEventListener', ...events);
-       }
-       dispose(){
-           this.pause();
-           this.target.events[this.cache.signature] = null;
-           return this;
-       }
-   }
-
-   function key_details_setter(){
-       switch(this.currentEvent){
-           case "keydown" : {
-               this.kd = this.event.key;
-           } break;
-           case "keypress" : {
-               this.kp = this.event.key;
-           } break;
-           case "keyup" : {
-               this.ku = this.event.key;
-           } break;
-
-       }
-   }
-
-   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 = x;
-               this.my = y;
-               this.isMoving = true;
-               break;
-
-           case "pointerup":
-               this.ux = x;
-               this.uy = y;
-               this.isDown = false;
-               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;
-       }
-   }
-
-   class ClickAwayEvent extends Event {
-     constructor(originalEvent, targetElement) {
-       super("clickaway", { bubbles: true, cancelable: true });
-       this.originalEvent = originalEvent;
-       this.targetElement = targetElement;
-     }
-   }
-
-   function register_click_away_event(element) {
-     console.log(element);
-     function handler(e) {
-       if (!element.contains(e.target)) {
-         const clickAwayEvent = new ClickAwayEvent(e, element);
-         element.dispatchEvent(clickAwayEvent);
-       }
+   async function __addItem__(adder, pusher, ...ele) {
+     if (this.cache.isFrozzen) {
+       console.warn("You can't append new item to frozzen element");
+       return this;
      }
-
-     globalThis?.document?.addEventListener("click", handler);
-
-     return () => globalThis?.document?.removeEventListener("click", handler);
-     
-   }
-
-   // // Example usage
-   // const box = document.querySelector("#my-box");
-
-   // const stop = listenClickAway(box);
-
-   // box.addEventListener("clickaway", (e) => {
-   //   console.log("Clicked outside box!", e);
-   // });
-
-   // // 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);
+     for (let i = 0; i < ele.length; i++) {
+       if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
+           // Fix Items Latter
+       if (ele[i] instanceof Function) {
+        const getter = ele[i]();
+         if (getter.isStateGetter) {
+           ele[i] = text(getter.value);
+           getter._subscribe(
+               (newValue) => (ele[i].element.textContent = newValue),
+               ele[i] 
+           );
+           // this.element.appendChild(textNode);
+         }
        }
-
-       if (resize) {
-           resizeObserver = new ResizeObserver(throttledResize);
-           resizeObserver.observe(element);
+       if (typeof globalThis?.Node === "function" && ele[i] instanceof globalThis?.Node) ele[i] = new this.constructor(ele[i]);
+       if (ele[i]?.isUINode) {
+           ele[i].cache.parent = this;
+           this.element?.[adder](ele[i].element);
+           ele[i].target = this.element;
+           this.items[pusher](ele[i]);
+       } 
+       else if(ele[i] instanceof Promise){
+         const UIEle = await ele[i];
+         UIEle.cache.parent = this;
+         this.element?.[adder](UIEle.element);
+         UIEle.target = this.element;
+         this.items[pusher](UIEle);
        }
-
-       // ---- 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;
+       else if (ele[i] instanceof Object) {
+         if (ele[i]?.style) this.style(ele[i]?.style);
+         if (ele[i]?.attr) {
+           Object.entries(ele[i].attr).forEach((n) =>
+             this.setAttr("" + n[0], n[1]),
+           );
          }
        }
-
-       // 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);
-     };
+     this.maintain();
+     return this;
    }
 
-   const bind_click_event = (target, customizer) => {
-       register_click_away_event(target.element);
-       return new ZikoEvent(
-           'click',
-           target,
-           EventsMap.Click,
-           null,
-           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 CoordinatesBasedEvent(
-       'mouse',
-       target,
-       EventsMap.Mouse,
-       mouse_details_setter,
-       customizer
-   );
-   const bind_pointer_event = (target, customizer) => new CoordinatesBasedEvent(
-       'ptr',
-       target,
-       EventsMap.Ptr, 
-       ptr_details_setter, 
-       customizer
-   );
-   const bind_touch_event = (target, customizer) => new CoordinatesBasedEvent(
-       'touch',
-       target,
-       EventsMap.Touch,
-       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
-       )
-   };
-
-   const bind_swipe_event = (target, customizer) => {
-       register_swipe_event(target.element);
-       return new ZikoEvent(
-           'swipe',
-           target, 
-           EventsMap.Swipe,
-           null, 
-           customizer
-       )
-   };
-
-   class ZikoCustomEvent extends ZikoEvent{
-       constructor(target, events, customizer){
-           super('custom', target, events, details_setter, customizer);
-       }
-       _register_events(events){
-           super._register_events(events, null, null, false);
-           return this;
-       }
-       emit(event_name, detail = {}){
-           const event = new CustomEvent(event_name, {
-               detail,
-               bubbles: true,
-               cancelable: true
-           });
-           this.targetElement.dispatchEvent(event);
-           return this;
-       }
-       on(event_name, ...callbacks){
-           if(!this.cache.options.hasOwnProperty(event_name)) this._register_events([event_name]);
-           this.__onEvent(event_name, this.cache.options[event_name], {}, ...callbacks);
-           return this;
-       }
-   }
-   function details_setter(){
-
-   }
-   const bind_custom_event = (target, events, customizer) => new ZikoCustomEvent(target, events, customizer);
-
-   const binderMap = {
-     ptr: bind_pointer_event,
-     mouse : bind_mouse_event,
-     key: bind_key_event,
-     click : bind_click_event,
-     drag : bind_drag_event,
-     clipboard : bind_clipboard_event,
-     focus : bind_focus_event,
-     wheel : bind_wheel_event,
-     view : bind_view_event,
-     swipe : bind_swipe_event
-   };
-
-   const EventsMethodes = {
-     on(event_name,...callbacks){
-       if(!this.events.custom)this.events.custom = bind_custom_event(this);
-       this.events.custom.on(event_name,...callbacks);
-       return this;
-     },
-     emit(event_name,detail={}){
-       if(!this.events.custom)this.events.custom = bind_custom_event(this);
-       this.events.custom.emit(event_name,detail);
-       return this;
-     }
-   };
-
-   Object.entries(EventsMap).forEach(([name, eventList]) => {
-     const lname = name.toLowerCase();
-     eventList.forEach(event => {
-       const methodName = `on${event}`;
-       EventsMethodes[methodName] = function (callbacks) {
-         if (!this.events[lname]) this.events[lname] = binderMap[lname](this);
-         this.events[lname][methodName](callbacks);
-         return this;
-       };
-     });
+   var DomMethods = /*#__PURE__*/Object.freeze({
+      __proto__: null,
+      __addItem__: __addItem__,
+      after: after,
+      append: append,
+      before: before,
+      clear: clear,
+      insertAt: insertAt,
+      prepend: prepend,
+      remove: remove,
+      replaceElementWith: replaceElementWith
    });
 
    function at(index) {
@@ -3341,9 +2653,207 @@
       style: style$1
    });
 
+   class ClickAwayEvent extends Event {
+     constructor(originalEvent, targetElement) {
+       super("clickaway", { bubbles: true, cancelable: true });
+       this.originalEvent = originalEvent;
+       this.targetElement = targetElement;
+     }
+   }
+
+   function register_click_away_event(element) {
+     // console.log(element)
+     function handler(e) {
+       if (!element.contains(e.target)) {
+         const clickAwayEvent = new ClickAwayEvent(e, element);
+         element.dispatchEvent(clickAwayEvent);
+       }
+     }
+
+     globalThis?.document?.addEventListener("click", handler);
+
+     return () => globalThis?.document?.removeEventListener("click", handler);
+     
+   }
+
+   // // Example usage
+   // const box = document.querySelector("#my-box");
+
+   // const stop = listenClickAway(box);
+
+   // box.addEventListener("clickaway", (e) => {
+   //   console.log("Clicked outside box!", e);
+   // });
+
+   // // 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;
+       let x = (e?.clientX - rect.left) | 0;
+       let y = (e?.clientY - rect.top) | 0;
+
+       if(normalized){
+           const w = ctx.element.clientWidth;
+           const h = ctx.element.clientHeight;
+           x = +((x / w) * 2 - 1).toFixed(8);
+           y = +((y / h) * -2 + 1).toFixed(8);
+       }
+
+       return {x, y};
+   };
+
+   const CATEGORY$1 = 'ptr';
+   const PtrListeners = {
+       onPtrDown(callback, useNormalizedCoordinates = false){
+           this._on(
+               'pointerdown', callback, 
+               { category : CATEGORY$1, 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(
+               'pointermove', callback, 
+               { category : CATEGORY$1, 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(
+               'pointerup', callback, 
+               { category : CATEGORY$1, details_setter : (ctx)=> {
+                   const {x, y} = getCoordinates(ctx, useNormalizedCoordinates);
+                   ctx.ux = x;
+                   ctx.uy = y;
+                   ctx.isDown = false;
+                   ctx.isMoving = false;
+                   ctx.isDragging = false;
+               }}
+           );
+       }
+   };
+
+   const CATEGORY = 'key';
+   const KeyListeners = {
+       onKeyDown(callback){
+           this._on(
+               'keydown', callback, 
+               { category : CATEGORY, details_setter : ctx=> { ctx.kd = ctx.event.key; }
+           });
+       },
+       onKeyPress(callback){
+           this._on(
+               'keypress', callback, 
+               { category : CATEGORY, details_setter : ctx=> { ctx.kp = ctx.event.key; }
+           });
+       },
+       onKeyUp(callback){
+           this._on(
+               'keydown', callback, 
+               { category : CATEGORY, details_setter : ctx=> { ctx.ku = ctx.event.key; }
+           });
+       },
+       
+   };
+
+   class EventController {
+     constructor(target, category){
+       this.cache = {
+         category,
+         target,
+         listeners : {},
+         currentEvent : null,
+         event : null
+       };
+     }
+     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;
+     }
+   }
+
    let UIElement$1 = class UIElement extends UIElementCore{
      constructor({element, name ='', type='html', render = __Ziko__.__Config__.default.render}={}){
        super();
+       this.exp = {
+         events : {
+
+         }
+       };
        register_to_class(
          this, 
          LifecycleMethods,
@@ -3351,11 +2861,27 @@
          DomMethods, 
          StyleMethods,
          IndexingMethods, 
-         EventsMethodes
+         PtrListeners,
+         ClickListeners,
+         KeyListeners
        );
 
        if(element)this.init(element, name, type, render);
      }
+     _on(event, callback, {details_setter, category = 'global', preventDefault = false} = {}){
+       if(category && !this.exp.events.hasOwnProperty(category)) this.exp.events[category] = new EventController(this, category);
+       const EVENT = this.exp.events[category];
+       EVENT.addListener(event, (e)=>{
+         if(details_setter) details_setter(EVENT);
+         callback(e);
+       },{
+         preventDefault
+       });
+       
+     }
+     _off(event, category = 'global'){
+       this.exp.events[category].removeListener(event);
+     }
      get element(){
        return this.cache.element;
      }
@@ -4339,6 +3865,20 @@
 
    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;
@@ -5361,6 +4901,7 @@
    exports.Complex = Complex;
    exports.E = E;
    exports.EPSILON = EPSILON;
+   exports.EventController = EventController;
    exports.FileBasedRouting = FileBasedRouting;
    exports.Flex = Flex;
    exports.HTMLWrapper = HTMLWrapper;
@@ -5388,7 +4929,6 @@
    exports.Utils = Utils;
    exports.View = View;
    exports.ZikoApp = ZikoApp;
-   exports.ZikoEvent = ZikoEvent;
    exports.ZikoSPA = ZikoSPA;
    exports.ZikoUISuspense = ZikoUISuspense;
    exports.ZikoUIText = ZikoUIText;
@@ -5413,17 +4953,6 @@
    exports.atan2 = atan2;
    exports.atanh = atanh;
    exports.back = back;
-   exports.bind_click_event = bind_click_event;
-   exports.bind_clipboard_event = bind_clipboard_event;
-   exports.bind_drag_event = bind_drag_event;
-   exports.bind_focus_event = bind_focus_event;
-   exports.bind_key_event = bind_key_event;
-   exports.bind_mouse_event = bind_mouse_event;
-   exports.bind_pointer_event = bind_pointer_event;
-   exports.bind_swipe_event = bind_swipe_event;
-   exports.bind_touch_event = bind_touch_event;
-   exports.bind_view_event = bind_view_event;
-   exports.bind_wheel_event = bind_wheel_event;
    exports.binomial = binomial;
    exports.call_with_optional_props = call_with_optional_props;
    exports.cartesianProduct = cartesianProduct;
@@ -5449,12 +4978,10 @@
    exports.discret = discret;
    exports.div = div;
    exports.elastic = elastic;
-   exports.event_controller = event_controller;
    exports.exp = exp$1;
    exports.floor = floor;
    exports.fract = fract;
    exports.geomspace = geomspace;
-   exports.getEvent = getEvent;
    exports.hypot = hypot;
    exports.inRange = inRange;
    exports.in_back = in_back;
@@ -5559,7 +5086,6 @@
    exports.timeTaken = timeTaken;
    exports.time_memory_Taken = time_memory_Taken;
    exports.timeout = timeout;
-   exports.toggle_event_listener = toggle_event_listener;
    exports.trunc = trunc;
    exports.useDerived = useDerived;
    exports.useEventEmitter = useEventEmitter;