ziko 0.67.0 → 0.68.0

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Mon Feb 16 2026 11:34:52 GMT+0000 (UTC)
+  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
@@ -2392,89 +2392,14 @@ const isStateGetter = (arg) => {
     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)];
@@ -2500,16 +2425,49 @@ function getAttr(name){
 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;
@@ -2561,713 +2519,68 @@ function before(ui){
   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) {
-  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) {
@@ -3334,44 +2647,195 @@ var StyleMethods = /*#__PURE__*/Object.freeze({
    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
+      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, callback){
-    this.cache.listeners[event] = {
-      paused : false,
-      callback : ()=>{
-        if(!this.cache.listeners[event].paused) {
-          this.cache.currentEvent = event;
+  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, this.cache.listeners[event].callback);
+    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;
   }
-  removeListener(event){
-    this.element.removeEventListener(event, this.cache.listeners[event].callback);
+  pause(event_name){
+    this.cache.listeners[event_name].paused = true;
     return this;
   }
-  pause(event){
-    this.cache.listeners[event].paused = true;
+  resume(event_name){
+    this.cache.listeners[event_name].paused = false;
     return this;
   }
-  resume(event){
-    this.cache.listeners[event].paused = false;
+  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;
   }
 }
@@ -3391,16 +2855,23 @@ let UIElement$1 = class UIElement extends UIElementCore{
       DomMethods, 
       StyleMethods,
       IndexingMethods, 
-      EventsMethodes
+      PtrListeners,
+      ClickListeners,
+      KeyListeners
     );
 
     if(element)this.init(element, name, type, render);
   }
-  _on(event, callback, {details_setter, category = 'global'} = {}){
+  _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, callback);
-    if(details_setter) details_setter.call(EVENT);
+    EVENT.addListener(event, (e)=>{
+      if(details_setter) details_setter(EVENT);
+      callback(e);
+    },{
+      preventDefault
+    });
+    
   }
   _off(event, category = 'global'){
     this.exp.events[category].removeListener(event);
@@ -4388,6 +3859,20 @@ 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;
@@ -5404,4 +4889,4 @@ if(globalThis?.document){
     document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());
 }
 
-export { App, Clock, CloneElement, Complex, E, EPSILON, FileBasedRouting, Flex, HTMLWrapper, Matrix, PI$1 as PI, Random, SPA, SVGWrapper, Scheduler, Suspense, Switch, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UIFlex, UIHTMLWrapper, UINode, UISVGWrapper, UISwitch, UIView, UseRoot, UseThread, Utils, View, ZikoApp, ZikoEvent, ZikoSPA, ZikoUISuspense, ZikoUIText, abs, accum_prod, accum_sum, acos$1 as acos, acosh, acot, add, add_class, add_vendor_prefix, and, animation, apply_fun, 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, binomial, call_with_optional_props, cartesianProduct, cbrt, ceil, clamp, clock, cloneUI, complex, cos$3 as cos, cosh$2 as cosh, coth, croot, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, discret, div, elastic, event_controller, exp$1 as exp, floor, fract, 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, isPrimitive, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linear, linkStyle, linspace, ln, logspace, loop, map$1 as map, mapfun, matrix, matrix2, matrix3, matrix4, max, mean, median, min, modulo, mul, nand, nor, norm, normalize_css_value, nthr, nums, obj2str, ones, or, out_back, out_bounce, out_circ, out_cubic, out_elastic, out_expo, out_quad, out_quart, out_quint, out_sin, percentile, pgcd, pow$1 as pow, ppcm, rad2deg, remove_class, round, script, sec, sig, sign, sin$3 as sin, sinh$1 as sinh, sleep, sqrt$2 as sqrt, std, step, step_fps, style, sub, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, toggle_event_listener, trunc, useDerived, useEventEmitter, useIPC, useLocaleStorage, useMediaQuery, useReactive, useRoot, useSessionStorage, useState, useThread, useTitle, variance, wait, waitElm, waitForUIElm, waitForUIElmSync, xnor, xor, zeros };
+export { App, Clock, CloneElement, Complex, E, EPSILON, EventController, FileBasedRouting, Flex, HTMLWrapper, Matrix, PI$1 as PI, Random, SPA, SVGWrapper, Scheduler, Suspense, Switch, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UIFlex, UIHTMLWrapper, UINode, UISVGWrapper, UISwitch, UIView, UseRoot, UseThread, Utils, View, ZikoApp, ZikoSPA, ZikoUISuspense, ZikoUIText, abs, accum_prod, accum_sum, acos$1 as acos, acosh, acot, add, add_class, add_vendor_prefix, and, animation, apply_fun, arange, arc, arr2str, asin, asinh, atan, atan2, atanh, back, binomial, call_with_optional_props, cartesianProduct, cbrt, ceil, clamp, clock, cloneUI, complex, cos$3 as cos, cosh$2 as cosh, coth, croot, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, discret, div, elastic, exp$1 as exp, floor, fract, geomspace, 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, isPrimitive, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linear, linkStyle, linspace, ln, logspace, loop, map$1 as map, mapfun, matrix, matrix2, matrix3, matrix4, max, mean, median, min, modulo, mul, nand, nor, norm, normalize_css_value, nthr, nums, obj2str, ones, or, out_back, out_bounce, out_circ, out_cubic, out_elastic, out_expo, out_quad, out_quart, out_quint, out_sin, percentile, pgcd, pow$1 as pow, ppcm, rad2deg, remove_class, round, script, sec, sig, sign, sin$3 as sin, sinh$1 as sinh, sleep, sqrt$2 as sqrt, std, step, step_fps, style, sub, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, trunc, useDerived, useEventEmitter, useIPC, useLocaleStorage, useMediaQuery, useReactive, useRoot, useSessionStorage, useState, useThread, useTitle, variance, wait, waitElm, waitForUIElm, waitForUIElmSync, xnor, xor, zeros };