ziko 0.67.0 → 0.68.1

package/dist/ziko.cjs

@@ -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
@@ -2394,89 +2394,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)];
@@ -2502,16 +2427,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;
@@ -2563,10 +2521,60 @@ function before(ui){
   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,
@@ -2577,355 +2585,127 @@ var DomMethods = /*#__PURE__*/Object.freeze({
    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 {
@@ -2937,6 +2717,7 @@ class ClickAwayEvent extends Event {
 }
 
 function register_click_away_event(element) {
+  // console.log(element)
   function handler(e) {
     if (!element.contains(e.target)) {
       const clickAwayEvent = new ClickAwayEvent(e, element);
@@ -2962,6 +2743,108 @@ function register_click_away_event(element) {
 // // 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);
@@ -3045,6 +2928,28 @@ function register_view_event(
     };
 }
 
+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, {
@@ -3057,7 +2962,7 @@ class SwipeEvent extends CustomEvent {
 
 function register_swipe_event(
   element,
-  threshold = 50,
+  threshold = 5,
   restraint = 100,
   allowedTime = 500
 ) {
@@ -3117,267 +3022,6 @@ function register_swipe_event(
   };
 }
 
-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();
@@ -3392,17 +3036,26 @@ let UIElement$1 = class UIElement extends UIElementCore{
       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);
@@ -5407,21 +5060,27 @@ if(globalThis?.document){
 }
 
 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;
@@ -5438,8 +5097,9 @@ exports.UseRoot = UseRoot;
 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;
@@ -5464,17 +5124,6 @@ exports.atan = atan;
 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;
@@ -5500,12 +5149,10 @@ exports.deg2rad = deg2rad;
 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;
@@ -5582,6 +5229,9 @@ exports.pgcd = pgcd;
 exports.pow = pow$1;
 exports.ppcm = ppcm;
 exports.rad2deg = rad2deg;
+exports.register_click_away_event = register_click_away_event;
+exports.register_swipe_event = register_swipe_event;
+exports.register_view_event = register_view_event;
 exports.remove_class = remove_class;
 exports.round = round;
 exports.script = script;
@@ -5610,7 +5260,6 @@ exports.tick = tick;
 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;