ziko 0.67.0 → 0.68.1

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Mon Feb 16 2026 11:34:52 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
@@ -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,10 +2525,60 @@
      if(ui?.isUIElement) ui=ui.element;
      this.element?.before(ui);
      return this;
+   }
+
+
+
+
+   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;
    }
 
    var DomMethods = /*#__PURE__*/Object.freeze({
       __proto__: null,
+      __addItem__: __addItem__,
       after: after,
       append: append,
       before: before,
@@ -2581,355 +2589,127 @@
       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 at(index) {
+     return this.items.at(index);
    }
-
-   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;
+   function forEach(callback) {
+     this.items.forEach(callback);
+     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 map(callback) {
+     return this.items.map(callback);
+   }
+   function find(condition) {
+     return this.items.filter(condition);
    }
 
-   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;
-       }
-   }
+   var IndexingMethods = /*#__PURE__*/Object.freeze({
+      __proto__: null,
+      at: at,
+      find: find,
+      forEach: forEach,
+      map: map
+   });
 
-   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);
+   function style$1(styles){
+       if(!this.element?.style) return this;
+       for(let key in styles){
+           const value = styles[key];
+           if(isStateGetter(value)){
+               const getter = value();
+               Object.assign(this.element.style, {[key] : getter.value});
+               getter._subscribe(
+                   (newValue) => {
+                       console.log({newValue});
+                       Object.assign(this.element.style, {[key] : newValue});
+                   },
+                   // this 
+               );
+           }
+           else Object.assign(this.element.style, {[key] : value});
        }
+       return this;
+   }
+   function size(width, height){
+       return this.style({width, height})
+   }
+   function hide(){
 
-       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;
+   }
+   function show(){
 
-           case "mouserup":
-               this.ux = x;
-               this.uy = y;
-               this.isDown = false;
-               this.isMoving = false;
-               break;
-       }
+   }
+   function animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
+       this.element?.animate(keyframe,{duration, iterations, easing});
+       return this;
    }
 
-   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;
-       }
-   }
+   var StyleMethods = /*#__PURE__*/Object.freeze({
+      __proto__: null,
+      animate: animate,
+      hide: hide,
+      show: show,
+      size: size,
+      style: style$1
+   });
 
-   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 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 {
@@ -2941,6 +2721,7 @@
    }
 
    function register_click_away_event(element) {
+     // console.log(element)
      function handler(e) {
        if (!element.contains(e.target)) {
          const clickAwayEvent = new ClickAwayEvent(e, element);
@@ -2966,6 +2747,108 @@
    // // later, you can stop listening:
    // // stop();
 
+   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 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$2 = 'ptr';
+   const PtrListeners = {
+       onPtrDown(callback, useNormalizedCoordinates = false){
+           return this.on(
+               'pointerdown', callback, 
+               { 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){
+           return this.on(
+               'pointermove', callback, 
+               { 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){
+           return this.on(
+               'pointerup', callback, 
+               { category : CATEGORY$2, 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$1 = 'key';
+   const KeyListeners = {
+       onKeyDown(callback){
+           return this.on(
+               'keydown', callback, 
+               { category : CATEGORY$1, details_setter : ctx=> { ctx.kd = ctx.event.key; }
+           })
+       },
+       onKeyPress(callback){
+           return this.on(
+               'keypress', callback, 
+               { category : CATEGORY$1, details_setter : ctx=> { ctx.kp = ctx.event.key; }
+           })
+       },
+       onKeyUp(callback){
+           return this.on(
+               'keydown', callback, 
+               { category : CATEGORY$1, details_setter : ctx=> { ctx.ku = ctx.event.key; }
+           })
+       },
+       
+   };
+
    const debounce=(fn,delay=1000)=>{
        let id;
        return (...args) => id ? clearTimeout(id) : setTimeout(()=>fn(...args),delay);
@@ -3049,6 +2932,28 @@
        };
    }
 
+   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, {
@@ -3061,7 +2966,7 @@
 
    function register_swipe_event(
      element,
-     threshold = 50,
+     threshold = 5,
      restraint = 100,
      allowedTime = 500
    ) {
@@ -3121,267 +3026,6 @@
      };
    }
 
-   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;
-       };
-     });
-   });
-
-   function at(index) {
-     return this.items.at(index);
-   }
-   function forEach(callback) {
-     this.items.forEach(callback);
-     return this;
-   }
-   function map(callback) {
-     return this.items.map(callback);
-   }
-   function find(condition) {
-     return this.items.filter(condition);
-   }
-
-   var IndexingMethods = /*#__PURE__*/Object.freeze({
-      __proto__: null,
-      at: at,
-      find: find,
-      forEach: forEach,
-      map: map
-   });
-
-   function style$1(styles){
-       if(!this.element?.style) return this;
-       for(let key in styles){
-           const value = styles[key];
-           if(isStateGetter(value)){
-               const getter = value();
-               Object.assign(this.element.style, {[key] : getter.value});
-               getter._subscribe(
-                   (newValue) => {
-                       console.log({newValue});
-                       Object.assign(this.element.style, {[key] : newValue});
-                   },
-                   // this 
-               );
-           }
-           else Object.assign(this.element.style, {[key] : value});
-       }
-       return this;
-   }
-   function size(width, height){
-       return this.style({width, height})
-   }
-   function hide(){
-
-   }
-   function show(){
-
-   }
-   function animate(keyframe, {duration=1000, iterations=1, easing="ease"}={}){
-       this.element?.animate(keyframe,{duration, iterations, easing});
-       return this;
-   }
-
-   var StyleMethods = /*#__PURE__*/Object.freeze({
-      __proto__: null,
-      animate: animate,
-      hide: hide,
-      show: show,
-      size: size,
-      style: style$1
-   });
-
-   class EventController {
-     constructor(target, category){
-       this.cache = {
-         category,
-         target,
-         listeners : {},
-         currentEvent : null
-       };
-     }
-     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;
-             callback.call(this, this);
-           }
-         },
-       };
-       this.element.addEventListener(event, this.cache.listeners[event].callback);
-       return this;
-     }
-     removeListener(event){
-       this.element.removeEventListener(event, this.cache.listeners[event].callback);
-       return this;
-     }
-     pause(event){
-       this.cache.listeners[event].paused = true;
-       return this;
-     }
-     resume(event){
-       this.cache.listeners[event].paused = false;
-       return this;
-     }
-   }
-
    let UIElement$1 = class UIElement extends UIElementCore{
      constructor({element, name ='', type='html', render = __Ziko__.__Config__.default.render}={}){
        super();
@@ -3396,17 +3040,26 @@
          AttrsMethods, 
          DomMethods, 
          StyleMethods,
-         IndexingMethods, 
-         EventsMethodes
+         IndexingMethods,
+         PtrListeners,
+         ClickListeners,
+         KeyListeners,
+         ViewListeners,
        );
 
        if(element)this.init(element, name, type, render);
      }
-     _on(event, callback, {details_setter, category = 'global'} = {}){
+     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, callback);
-       if(details_setter) details_setter.call(EVENT);
+       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);
@@ -5411,21 +5064,27 @@
    }
 
    exports.App = App;
+   exports.ClickAwayEvent = ClickAwayEvent;
+   exports.ClickListeners = ClickListeners;
    exports.Clock = Clock;
    exports.CloneElement = CloneElement;
    exports.Complex = Complex;
    exports.E = E;
    exports.EPSILON = EPSILON;
+   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;
@@ -5442,8 +5101,9 @@
    exports.UseThread = UseThread;
    exports.Utils = Utils;
    exports.View = View;
+   exports.ViewEvent = ViewEvent;
+   exports.ViewListeners = ViewListeners;
    exports.ZikoApp = ZikoApp;
-   exports.ZikoEvent = ZikoEvent;
    exports.ZikoSPA = ZikoSPA;
    exports.ZikoUISuspense = ZikoUISuspense;
    exports.ZikoUIText = ZikoUIText;
@@ -5468,17 +5128,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;
@@ -5504,12 +5153,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;
@@ -5586,6 +5233,9 @@
    exports.pow = pow$1;
    exports.ppcm = ppcm;
    exports.rad2deg = rad2deg;
+   exports.register_click_away_event = register_click_away_event;
+   exports.register_swipe_event = register_swipe_event;
+   exports.register_view_event = register_view_event;
    exports.remove_class = remove_class;
    exports.round = round;
    exports.script = script;
@@ -5614,7 +5264,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;