ziko 0.65.0 → 0.67.0

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Fri Feb 13 2026 20:49:44 GMT+0100 (UTC+01:00)
+  Date : Mon Feb 16 2026 11:34:52 GMT+0000 (UTC)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -1855,7 +1855,7 @@ class UINode {
             node
         };
     }
-    isZikoUINode(){
+    isUINode(){
         return true
     }
     get node(){
@@ -2210,7 +2210,6 @@ class UIElementCore extends UINode{
       isRoot:false,
       isHidden: false,
       isFrozzen:false,
-      legacyParent : null,
       attributes: {},
       filters: {},
       temp:{}
@@ -2233,14 +2232,6 @@ class UIElementCore extends UINode{
       intersection:null
     };
     if(element) Object.assign(this.cache,{element});
-    // useDefaultStyle && this.style({ 
-    //   position: "relative",
-    //   boxSizing:"border-box",
-    //   margin:0,
-    //   padding:0,
-    //   width : "auto",
-    //   height : "auto"
-    //  });
     this.items = new UIStore();
     globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
     element && render && this?.render?.();
@@ -2440,7 +2431,7 @@ async function __addItem__(adder, pusher, ...ele) {
       }
     }
     if (typeof globalThis?.Node === "function" && ele[i] instanceof globalThis?.Node) ele[i] = new this.constructor(ele[i]);
-    if (ele[i]?.isZikoUINode) {
+    if (ele[i]?.isUINode) {
         ele[i].cache.parent = this;
         this.element?.[adder](ele[i].element);
         ele[i].target = this.element;
@@ -2944,7 +2935,6 @@ 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);
@@ -3344,19 +3334,56 @@ var StyleMethods = /*#__PURE__*/Object.freeze({
    style: style$1
 });
 
-// import { 
-//   // useCustomEvent,
-//   // useSwipeEvent,
-//   // watchIntersection, 
-//   // watchSize,
-//   // watchAttr,
-//   // watchChildren
-// } from "../../--reactivity-deprecated/events/custom-event.js"
+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();
-    // console.log({type})
-    // console.log(this)
+    this.exp = {
+      events : {
+
+      }
+    };
     register_to_class(
       this, 
       LifecycleMethods,
@@ -3367,9 +3394,17 @@ let UIElement$1 = class UIElement extends UIElementCore{
       EventsMethodes
     );
 
-    // console.log(EventsMethodes)
     if(element)this.init(element, name, type, render);
   }
+  _on(event, callback, {details_setter, category = 'global'} = {}){
+    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);
+  }
+  _off(event, category = 'global'){
+    this.exp.events[category].removeListener(event);
+  }
   get element(){
     return this.cache.element;
   }
@@ -3385,9 +3420,6 @@ let UIElement$1 = class UIElement extends UIElementCore{
     if(directive)this.element.setAttribute('data-hydration-directive', directive);
     return this;
   }
-  // isUIElement(){
-  //   return true;
-  // }
   get st(){
     return this.cache.style;
   }
@@ -3427,84 +3459,6 @@ let UIElement$1 = class UIElement extends UIElementCore{
   get left(){
     return this.element.getBoundingClientRect().left;
   }
-  // clone(render=false) {
-  //   // UI.__proto__=this.__proto__;
-  //   // if(this.items.length){
-  //   //   const items = [...this.items].map(n=>n.clone());
-  //   //   UI.append(...items);
-  //   // }
-  //   // else UI.element=this.element.cloneNode(true);
-  //   // return UI.mount(render);
-  // }
-  // [Symbol.iterator]() {
-  //   return this.items[Symbol.iterator]();
-  // }
-  // maintain() {
-  //   for (let i = 0; i < this.items.length; i++) {
-  //     Object.defineProperty(this, i, {
-  //       value: this.items[i],
-  //       writable: true,
-  //       configurable: true,
-  //       enumerable: false 
-  //       });
-  //   }
-  // }
-  // freeze(freeze){
-  //   this.cache.isFrozzen=freeze;
-  //   return this;
-  // }
-  // setTarget(tg) {
-  //   if(this.isBody) return ;
-  //   if (tg?.isUIElement) tg = tg.element;
-  //   this.unmount();
-  //   this.target = tg;
-  //   this.mount();
-  //   return this;
-  // }
-  // describe(label){
-  //   if(label)this.setAttr("aria-label",label)
-  // }
-  // get children() {
-  //   return [...this.element.children];
-  // }
-  // get cloneElement() {
-  //   return this.element.cloneNode(true);
-  // }
-  // setClasses(...value) {
-  //   this.setAttr("class", value.join(" "));
-  //   return this;
-  // }
-  // get classes(){
-  //   const classes=this.element.getAttribute("class");
-  //   return classes===null?[]:classes.split(" ");
-  // }
-  // addClass() {
-  //   /*this.setAttr("class", value);
-  //       return this;*/
-  // }
-  // setId(id) {
-  //   this.setAttr("id", id);
-  //   return this;
-  // }
-  // get id() {
-  //   return this.element.getAttribute("id");
-  // }
-  // To Fix
-  // onKeysDown({keys=[],callback}={}){
-  //   if(!this.events.key)this.events.key = useKeyEvent(this);
-  //   this.events.key.handleSuccessifKeys({keys,callback});
-  //   return this;
-  // }
-  // watchAttr(callback){
-  //   if(!this.observer.attr)this.observer.attr = watchAttr(this,callback);
-  //   return this;
-  // }
-  // watchChildren(callback){
-  //   if(!this.observer.children)this.observer.children = watchChildren(this,callback);
-  //   return this;
-  // }
-  // watchSize(callback)Remplaced By on onViewResize
-  // watchIntersection(callback,config) Remplaced By onViewEnter and onViewExit
 
 };
 
@@ -3973,7 +3927,7 @@ function svg2dom(svgString) {
 
 const SVGWrapper = (content) => new UISVGWrapper(content);
 
-function define_wc(name, UIElement, props = {}, { mode = 'open'} = {}) {
+function define_wc(name, UI_Constructor, props = {}, { mode = 'open'} = {}) {
     if (globalThis.customElements?.get(name)) {
         console.warn(`Custom element "${name}" is already defined`);
         return;
@@ -4005,7 +3959,7 @@ function define_wc(name, UIElement, props = {}, { mode = 'open'} = {}) {
 
             render() {
                 this.shadowRoot.innerHTML = '';
-                const item = UIElement(this.props);
+                const item = UI_Constructor(this.props);
                 if(item instanceof Array) item.forEach(n => n.mount(this.shadowRoot)); 
                 else item.mount(this.shadowRoot);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.65.0",
+  "version": "0.67.0",
   "description": "A versatile JavaScript library offering a rich set of Hyperscript Based UI components, advanced mathematical utilities, interactivity ,animations, client side routing and more ...",
   "keywords": [
     "front-end",
@@ -90,7 +90,7 @@
     "@vitest/coverage-v8": "^4.0.18",
     "cross-env": "^10.1.0",
     "eslint": "^10.0.0",
-    "jsdom": "^28.0.0",
+    "jsdom": "^26.0.0",
     "rollup": "^4.57.1",
     "vitest": "^4.0.18"
   }

package/src/events/custom-events-registry/click-away.js

@@ -7,7 +7,6 @@ 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);

package/src/exp-events/controller/index.js

@@ -0,0 +1,41 @@
+export 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;
+  }
+}

package/src/exp-events/custom-events-registry/click-away.js

@@ -0,0 +1,39 @@
+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);
+  
+}
+
+export{
+    ClickAwayEvent,
+    register_click_away_event
+}
+
+// // 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();

package/src/exp-events/custom-events-registry/index.js

@@ -0,0 +1,3 @@
+export * from './click-away.js'
+export * from './view.js'
+export * from './swipe.js'

package/src/exp-events/custom-events-registry/swipe.js

@@ -0,0 +1,76 @@
+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;
+      }
+    }
+
+    // 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);
+  };
+}
+
+export {
+  SwipeEvent,
+  register_swipe_event
+};

package/src/exp-events/custom-events-registry/view.js

@@ -0,0 +1,74 @@
+import { throttle } from "../../time/decorators/index.js";
+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);
+    }
+
+    if (resize) {
+        resizeObserver = new ResizeObserver(throttledResize);
+        resizeObserver.observe(element);
+    }
+
+    // ---- UNREGISTER ----
+    return () => {
+        if (intersectionObserver) {
+            intersectionObserver.unobserve(element);
+            intersectionObserver.disconnect();
+        }
+        if (resizeObserver) {
+            resizeObserver.unobserve(element);
+            resizeObserver.disconnect();
+        }
+    };
+}
+
+export {
+    ViewEvent,
+    register_view_event
+};

package/src/exp-events/details-setter/index.js

@@ -0,0 +1,4 @@
+export * from './key.js'
+export * from './pointer.js'
+export * from './mouse.js'
+export * from './touch.js'

package/src/exp-events/details-setter/key.js

@@ -0,0 +1,14 @@
+export 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;
+
+    }
+}

package/src/exp-events/details-setter/mouse.js

@@ -0,0 +1,35 @@
+export 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;
+    }
+}

package/src/exp-events/details-setter/pointer.js

@@ -0,0 +1,35 @@
+export 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;
+    }
+}
+

package/src/exp-events/details-setter/touch.js

@@ -0,0 +1,37 @@
+export 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;
+    }
+}

package/src/exp-events/index.js

@@ -0,0 +1 @@
+export * from './controller/index.js'

package/src/hooks/index.d.ts

@@ -0,0 +1,11 @@
+export type * from './use-ipc'
+export type * from './use-storage.d.ts'
+export type * from './use-state.d.ts'
+export type * from './use-derived.d.ts'
+export type * from './use-reactive.d.ts'
+export type * from './use-thread.d.ts'
+export type * from './use-event-emitter.d.ts'
+export type * from './use-media-query.d.ts'
+export type * from './use-title.d.ts'
+export type * from './use-favicon.d.ts'
+export type * from './use-root.d.ts'

package/src/hooks/use-derived.d.ts

@@ -0,0 +1,14 @@
+export function useDerived<T>(
+    deriveFn: (...values: any[]) => T,
+    sources: Array<
+        () => {
+            value: any;
+            isStateGetter: () => true;
+            _subscribe: (fn: (value: any) => void) => void;
+        }
+    >
+): () => {
+    value: T;
+    isStateGetter: () => true;
+    _subscribe: (fn: (value: T) => void) => void;
+};