ziko 0.65.0 → 0.67.0

package/dist/ziko.cjs

@@ -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
@@ -1857,7 +1857,7 @@ class UINode {
             node
         };
     }
-    isZikoUINode(){
+    isUINode(){
         return true
     }
     get node(){
@@ -2212,7 +2212,6 @@ class UIElementCore extends UINode{
       isRoot:false,
       isHidden: false,
       isFrozzen:false,
-      legacyParent : null,
       attributes: {},
       filters: {},
       temp:{}
@@ -2235,14 +2234,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?.();
@@ -2442,7 +2433,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;
@@ -2946,7 +2937,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);
@@ -3346,19 +3336,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,
@@ -3369,9 +3396,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;
   }
@@ -3387,9 +3422,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;
   }
@@ -3429,84 +3461,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
 
 };
 
@@ -3975,7 +3929,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;
@@ -4007,7 +3961,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/dist/ziko.js

@@ -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
@@ -1861,7 +1861,7 @@
                node
            };
        }
-       isZikoUINode(){
+       isUINode(){
            return true
        }
        get node(){
@@ -2216,7 +2216,6 @@
          isRoot:false,
          isHidden: false,
          isFrozzen:false,
-         legacyParent : null,
          attributes: {},
          filters: {},
          temp:{}
@@ -2239,14 +2238,6 @@
          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?.();
@@ -2446,7 +2437,7 @@
          }
        }
        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;
@@ -2950,7 +2941,6 @@
    }
 
    function register_click_away_event(element) {
-     console.log(element);
      function handler(e) {
        if (!element.contains(e.target)) {
          const clickAwayEvent = new ClickAwayEvent(e, element);
@@ -3350,19 +3340,56 @@
       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,
@@ -3373,9 +3400,17 @@
          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;
      }
@@ -3391,9 +3426,6 @@
        if(directive)this.element.setAttribute('data-hydration-directive', directive);
        return this;
      }
-     // isUIElement(){
-     //   return true;
-     // }
      get st(){
        return this.cache.style;
      }
@@ -3433,84 +3465,6 @@
      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
 
    };
 
@@ -3979,7 +3933,7 @@
 
    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;
@@ -4011,7 +3965,7 @@
 
                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);
                }