ziko 0.0.26 → 0.0.27

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sat Mar 08 2025 13:43:10 GMT+0000 (UTC)
+  Date : Thu Jul 10 2025 11:49:56 GMT+0100 (UTC+01:00)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -1013,6 +1013,11 @@
         }
     }
 
+    var __Random__ = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        Random: Random
+    });
+
     const luDecomposition=matrix=>{
         if(matrix instanceof Matrix)matrix=matrix.arr;
         const n = matrix.length;
@@ -1808,6 +1813,7 @@
     function EVENT_CONTROLLER(e,EVENT,setter,push_object){
         this.event=e;
         if(this.cache.preventDefault[EVENT])e.preventDefault();
+        console.log({setter});
         if(setter)setter();
         if(this.cache.stream.enabled[EVENT]&&push_object)this.cache.stream.history[EVENT].push(push_object);
         this.cache.callbacks[EVENT].map(n=>n(this));
@@ -4608,10 +4614,181 @@
         useType: useType
     });
 
+    const getEvent=(event = "")=>{
+        if(event.startsWith("Ptr"))return `pointer${event.split("Ptr")[1].toLowerCase()}`;
+        return event.toLowerCase()
+    };
+
+    function event_controller(e, event_name, details_setter, customizer, push_object){
+        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();
+        
+        if(this.cache.stream.enabled[event_name]&&push_object)this.cache.stream.history[event_name].push(push_object);
+        this.cache.callbacks[event_name]?.map(n=>n(this));
+    }
+    class __ZikoEvent__ {
+        constructor(target = null, Events = [], details_setter, customizer){
+            this.target = target;
+            this.cache = {
+                currentEvent : null,
+                event: null,
+                options : {},
+                preventDefault : {},
+                stopPropagation : {},
+                stopImmediatePropagation : {},
+                event_flow : {},
+                paused : {},
+                stream : {
+                    enabled : {},
+                    clear : {},
+                    history : {}
+                },
+                callbacks : {},
+                __controllers__:{}
+            };
+            const events = Events.map(n=>getEvent(n));
+            events.forEach((event,i)=>{
+                Object.assign(this.cache.preventDefault, {[event] : false});
+                Object.assign(this.cache.options, {[event] : {}});
+                Object.assign(this.cache.paused, {[event] : false});
+                Object.assign(this.cache.stream.enabled, {[event] : false});
+                Object.assign(this.cache.stream.clear, {[event] : false});
+                Object.assign(this.cache.stream.history, {[event] : []});
+                Object.assign(this.cache.__controllers__, {[event] : e=>event_controller.call(this, e, event, details_setter, customizer)});
+                Object.assign(this, { [`on${Events[i]}`] : (...callbacks)=> this.__onEvent(event, this.cache.options[event], {}, ...callbacks)});
+            });
+        }
+        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;
+        }
+        setTarget(UI){
+            this.target=UI;
+            return this;
+        }
+        __handle(event, handler, options, dispose){
+            this.targetElement?.addEventListener(event, handler, options);
+            return this;
+        }
+        __onEvent(event, options, dispose, ...callbacks){
+            if(callbacks.length===0){
+                console.log("00");
+                if(this.cache.callbacks[event]){
+                    console.log("Call");
+                    // this.cache.callbacks.map(n=>e=>n.call(this,e));
+                    this.cache.callbacks[event].map(n=>e=>n.call(this,e));
+                }   
+                else {
+                    return this;
+                }
+            }
+            else this.cache.callbacks[event] = callbacks.map(n=>e=>n.call(this,e));
+            this.__handle(event, this.cache.__controllers__[event],options, dispose);
+            return this;  
+        }
+        #override(methode, overrides, defaultValue){
+            if(defaultValue === "default") Object.assign(this.cache[methode], {...this.cache[methode], ...overrides});
+            const all = defaultValue === "default" 
+            ? this.cache[methode]
+            : Object.fromEntries(Object.keys(this.cache.preventDefault).map(n=>[n,defaultValue]));
+            Object.assign(this.cache[methode], {...all,...overrides});
+            return this       
+        }
+        preventDefault(overrides = {}, defaultValue = "default"){
+            this.#override("preventDefault", overrides, defaultValue);
+            // const all=Object.fromEntries(Object.keys(this.cache.preventDefault).map(n=>[n,defaultValue]))
+            // Object.assign(this.cache.preventDefault, {...all,...overrides});
+            return this;
+        }
+        stopPropagation(overrides = {}, defaultValue = "default"){
+            this.#override("stopPropagation", overrides, defaultValue);
+            return this;
+        }
+        stopImmediatePropagation(overrides = {}, defaultValue = "default"){
+            this.#override("stopImmediatePropagation", overrides, defaultValue);
+            return this;
+        }
+        setEventOptions(event, options){
+            this.pause({[event] : true, }, "default");
+            Object.assign(this.cache.options[getEvent(event)], options);
+            this.resume({[event] : true, }, "default");
+            return this;
+        }
+        pause(overrides = {}, defaultValue = "default"){
+            const all = defaultValue === "default" 
+              ? this.cache.stream.enabled
+              : Object.entries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]));
+            overrides={...all,...overrides};
+            for(let key in overrides){
+                if(overrides[key]){
+                    this.targetElement?.removeEventListener(key, this.cache.__controllers__[key], this.cache.options[key]);
+                    this.cache.paused[key]=true;
+                }
+            }
+            return this;
+        }
+        resume(overrides = {}, defaultValue = "default"){
+            const all = defaultValue === "default" 
+              ? this.cache.stream.enabled
+              : Object.entries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]));
+            overrides={...all,...overrides};
+            for(let key in overrides){
+                if(overrides[key]){
+                    this.targetElement?.addEventListener(key,this.cache.__controllers__[key], this.cache.options[key]);
+                    this.cache.paused[key]=false;
+                }
+            }
+            return this;
+         }
+        stream(overrides = {}, defaultValue = "default"){
+            this.cache.stream.t0=Date.now();
+            const all=Object.fromEntries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]));
+            overrides={...all,...overrides};
+            Object.assign(this.cache.stream.enabled,overrides);
+            return this;
+         }
+        clear(){
+
+        }
+        dispose(overrides = {}, defaultValue = "default"){
+            this.pause(overrides, defaultValue);
+
+            return this;
+        }
+    }
+
+    // export * from "./click.js";
+    // export * from "./key.js";
+    // export * from "./pointer.js"
+
+    var EventsExp = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        __ZikoEvent__: __ZikoEvent__,
+        getEvent: getEvent
+    });
+
     const Reactivity={
         ...Events,
         ...Observer,
         ...Hooks,
+        ...EventsExp,
     };
 
     class ZikoUIElement {
@@ -4659,6 +4836,7 @@
           intersection:null
         };
         this.uuid = `${this.cache.name}-${Random.string(16)}`;
+        this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index(); 
         this.cache.style.linkTo(this);
         useDefaultStyle && this.style({ 
           position: "relative",
@@ -4671,7 +4849,7 @@
         this.items = [];
         globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
         element && globalThis.__Ziko__.__Config__.default.render && this.render();
-        this.setAttr("data-ref", this.uuid);
+        this.setAttr("data-ui-index", this.ui_index);
         if(globalThis.__Ziko__.__Config__.renderingMode !== "spa" && !globalThis.__Ziko__.__Config__.isSSC) {
           globalThis.__Ziko__.__HYDRATION_MAP__.set(this.uuid, ()=>this);
       }
@@ -4755,12 +4933,14 @@
         }
         for (let i = 0; i < ele.length; i++) {
           if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
+          if(ele[i] instanceof Node) ele[i] = new ZikoUIElement(ele[i]);
           if (ele[i]?.isZikoUIElement) {
             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 Object) {
+          } 
+          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) =>
@@ -6057,7 +6237,6 @@
     class ZikoUIBtn extends ZikoUIElement {
       constructor(value = "button") {
         super("button","btn");
-        this.element = document?.createElement("button");
         this.setValue(value);
         this.st.cursor("pointer");
         globalThis.__Ziko__.__Config__.default.render && this.render();
@@ -8466,6 +8645,7 @@
         ...__Functions__,
         ...__Complex__,
         ...__Matrix__,
+        ...__Random__,
         ...__Utils__,
         ...__Discrect__,
         // ...__Signal__,
@@ -9101,7 +9281,28 @@
         });
     }
 
-    const __UI__={};
+    const __UI__={
+        __all__(){
+            return Object.values(this)
+              .filter(Array.isArray)
+              .flat();
+        },
+        querySelectorAll(){
+            return this.__all__().filter(n=>n)
+        },
+        getElementByIndex(index){
+            return this.__all__().find(n=>n.ui_index===index);
+        },
+        getElementById(id){
+            return null;
+        },
+        getElementsByClass(){
+
+        },
+        getElementsByTagName(){
+            
+        }
+    };
     const __HYDRATION_MAP__ = new Map();
     const __Config__={
         default:{
@@ -9119,10 +9320,17 @@
         init:()=>document.documentElement.setAttribute("data-engine","zikojs"),
         renderingMode :"spa",
         isSSC : false,
+    };
+    const __CACHE__ = {
+        ui_index : 0,
+        get_ui_index:function(){
+            return this.ui_index ++
+        }
     };
 
     var Global = /*#__PURE__*/Object.freeze({
         __proto__: null,
+        __CACHE__: __CACHE__,
         __Config__: __Config__,
         __HYDRATION_MAP__: __HYDRATION_MAP__,
         __UI__: __UI__
@@ -9226,6 +9434,7 @@
                 __UI__,
                 __HYDRATION_MAP__,
                 __Config__,
+                __CACHE__,
                 ExtractAll,
                 RemoveAll
             };
@@ -9363,9 +9572,11 @@
     exports.ZikoUIXMLWrapper = ZikoUIXMLWrapper;
     exports.ZikoUseRoot = ZikoUseRoot;
     exports.ZikoUseStyle = ZikoUseStyle;
+    exports.__CACHE__ = __CACHE__;
     exports.__Config__ = __Config__;
     exports.__HYDRATION_MAP__ = __HYDRATION_MAP__;
     exports.__UI__ = __UI__;
+    exports.__ZikoEvent__ = __ZikoEvent__;
     exports.abbrText = abbrText;
     exports.abs = abs;
     exports.accum = accum;
@@ -9419,6 +9630,7 @@
     exports.floor = floor;
     exports.gamma = gamma;
     exports.geomspace = geomspace;
+    exports.getEvent = getEvent;
     exports.h = h;
     exports.h1 = h1;
     exports.h2 = h2;

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sat Mar 08 2025 13:43:10 GMT+0000 (UTC)
+  Date : Thu Jul 10 2025 11:49:56 GMT+0100 (UTC+01:00)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -1007,6 +1007,11 @@ class Random {
     }
 }
 
+var __Random__ = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    Random: Random
+});
+
 const luDecomposition=matrix=>{
     if(matrix instanceof Matrix)matrix=matrix.arr;
     const n = matrix.length;
@@ -1802,6 +1807,7 @@ class ZikoUIElementStyle{
 function EVENT_CONTROLLER(e,EVENT,setter,push_object){
     this.event=e;
     if(this.cache.preventDefault[EVENT])e.preventDefault();
+    console.log({setter});
     if(setter)setter();
     if(this.cache.stream.enabled[EVENT]&&push_object)this.cache.stream.history[EVENT].push(push_object);
     this.cache.callbacks[EVENT].map(n=>n(this));
@@ -4602,10 +4608,181 @@ var Hooks = /*#__PURE__*/Object.freeze({
     useType: useType
 });
 
+const getEvent=(event = "")=>{
+    if(event.startsWith("Ptr"))return `pointer${event.split("Ptr")[1].toLowerCase()}`;
+    return event.toLowerCase()
+};
+
+function event_controller(e, event_name, details_setter, customizer, push_object){
+    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();
+    
+    if(this.cache.stream.enabled[event_name]&&push_object)this.cache.stream.history[event_name].push(push_object);
+    this.cache.callbacks[event_name]?.map(n=>n(this));
+}
+class __ZikoEvent__ {
+    constructor(target = null, Events = [], details_setter, customizer){
+        this.target = target;
+        this.cache = {
+            currentEvent : null,
+            event: null,
+            options : {},
+            preventDefault : {},
+            stopPropagation : {},
+            stopImmediatePropagation : {},
+            event_flow : {},
+            paused : {},
+            stream : {
+                enabled : {},
+                clear : {},
+                history : {}
+            },
+            callbacks : {},
+            __controllers__:{}
+        };
+        const events = Events.map(n=>getEvent(n));
+        events.forEach((event,i)=>{
+            Object.assign(this.cache.preventDefault, {[event] : false});
+            Object.assign(this.cache.options, {[event] : {}});
+            Object.assign(this.cache.paused, {[event] : false});
+            Object.assign(this.cache.stream.enabled, {[event] : false});
+            Object.assign(this.cache.stream.clear, {[event] : false});
+            Object.assign(this.cache.stream.history, {[event] : []});
+            Object.assign(this.cache.__controllers__, {[event] : e=>event_controller.call(this, e, event, details_setter, customizer)});
+            Object.assign(this, { [`on${Events[i]}`] : (...callbacks)=> this.__onEvent(event, this.cache.options[event], {}, ...callbacks)});
+        });
+    }
+    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;
+    }
+    setTarget(UI){
+        this.target=UI;
+        return this;
+    }
+    __handle(event, handler, options, dispose){
+        this.targetElement?.addEventListener(event, handler, options);
+        return this;
+    }
+    __onEvent(event, options, dispose, ...callbacks){
+        if(callbacks.length===0){
+            console.log("00");
+            if(this.cache.callbacks[event]){
+                console.log("Call");
+                // this.cache.callbacks.map(n=>e=>n.call(this,e));
+                this.cache.callbacks[event].map(n=>e=>n.call(this,e));
+            }   
+            else {
+                return this;
+            }
+        }
+        else this.cache.callbacks[event] = callbacks.map(n=>e=>n.call(this,e));
+        this.__handle(event, this.cache.__controllers__[event],options, dispose);
+        return this;  
+    }
+    #override(methode, overrides, defaultValue){
+        if(defaultValue === "default") Object.assign(this.cache[methode], {...this.cache[methode], ...overrides});
+        const all = defaultValue === "default" 
+        ? this.cache[methode]
+        : Object.fromEntries(Object.keys(this.cache.preventDefault).map(n=>[n,defaultValue]));
+        Object.assign(this.cache[methode], {...all,...overrides});
+        return this       
+    }
+    preventDefault(overrides = {}, defaultValue = "default"){
+        this.#override("preventDefault", overrides, defaultValue);
+        // const all=Object.fromEntries(Object.keys(this.cache.preventDefault).map(n=>[n,defaultValue]))
+        // Object.assign(this.cache.preventDefault, {...all,...overrides});
+        return this;
+    }
+    stopPropagation(overrides = {}, defaultValue = "default"){
+        this.#override("stopPropagation", overrides, defaultValue);
+        return this;
+    }
+    stopImmediatePropagation(overrides = {}, defaultValue = "default"){
+        this.#override("stopImmediatePropagation", overrides, defaultValue);
+        return this;
+    }
+    setEventOptions(event, options){
+        this.pause({[event] : true, }, "default");
+        Object.assign(this.cache.options[getEvent(event)], options);
+        this.resume({[event] : true, }, "default");
+        return this;
+    }
+    pause(overrides = {}, defaultValue = "default"){
+        const all = defaultValue === "default" 
+          ? this.cache.stream.enabled
+          : Object.entries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]));
+        overrides={...all,...overrides};
+        for(let key in overrides){
+            if(overrides[key]){
+                this.targetElement?.removeEventListener(key, this.cache.__controllers__[key], this.cache.options[key]);
+                this.cache.paused[key]=true;
+            }
+        }
+        return this;
+    }
+    resume(overrides = {}, defaultValue = "default"){
+        const all = defaultValue === "default" 
+          ? this.cache.stream.enabled
+          : Object.entries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]));
+        overrides={...all,...overrides};
+        for(let key in overrides){
+            if(overrides[key]){
+                this.targetElement?.addEventListener(key,this.cache.__controllers__[key], this.cache.options[key]);
+                this.cache.paused[key]=false;
+            }
+        }
+        return this;
+     }
+    stream(overrides = {}, defaultValue = "default"){
+        this.cache.stream.t0=Date.now();
+        const all=Object.fromEntries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]));
+        overrides={...all,...overrides};
+        Object.assign(this.cache.stream.enabled,overrides);
+        return this;
+     }
+    clear(){
+
+    }
+    dispose(overrides = {}, defaultValue = "default"){
+        this.pause(overrides, defaultValue);
+
+        return this;
+    }
+}
+
+// export * from "./click.js";
+// export * from "./key.js";
+// export * from "./pointer.js"
+
+var EventsExp = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    __ZikoEvent__: __ZikoEvent__,
+    getEvent: getEvent
+});
+
 const Reactivity={
     ...Events,
     ...Observer,
     ...Hooks,
+    ...EventsExp,
 };
 
 class ZikoUIElement {
@@ -4653,6 +4830,7 @@ class ZikoUIElement {
       intersection:null
     };
     this.uuid = `${this.cache.name}-${Random.string(16)}`;
+    this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index(); 
     this.cache.style.linkTo(this);
     useDefaultStyle && this.style({ 
       position: "relative",
@@ -4665,7 +4843,7 @@ class ZikoUIElement {
     this.items = [];
     globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
     element && globalThis.__Ziko__.__Config__.default.render && this.render();
-    this.setAttr("data-ref", this.uuid);
+    this.setAttr("data-ui-index", this.ui_index);
     if(globalThis.__Ziko__.__Config__.renderingMode !== "spa" && !globalThis.__Ziko__.__Config__.isSSC) {
       globalThis.__Ziko__.__HYDRATION_MAP__.set(this.uuid, ()=>this);
   }
@@ -4749,12 +4927,14 @@ class ZikoUIElement {
     }
     for (let i = 0; i < ele.length; i++) {
       if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
+      if(ele[i] instanceof Node) ele[i] = new ZikoUIElement(ele[i]);
       if (ele[i]?.isZikoUIElement) {
         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 Object) {
+      } 
+      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) =>
@@ -6051,7 +6231,6 @@ class ZikoUIHtmlTag extends ZikoUIElement {
 class ZikoUIBtn extends ZikoUIElement {
   constructor(value = "button") {
     super("button","btn");
-    this.element = document?.createElement("button");
     this.setValue(value);
     this.st.cursor("pointer");
     globalThis.__Ziko__.__Config__.default.render && this.render();
@@ -8460,6 +8639,7 @@ const Math$1 = {
     ...__Functions__,
     ...__Complex__,
     ...__Matrix__,
+    ...__Random__,
     ...__Utils__,
     ...__Discrect__,
     // ...__Signal__,
@@ -9095,7 +9275,28 @@ function defineParamsGetter(target ){
     });
 }
 
-const __UI__={};
+const __UI__={
+    __all__(){
+        return Object.values(this)
+          .filter(Array.isArray)
+          .flat();
+    },
+    querySelectorAll(){
+        return this.__all__().filter(n=>n)
+    },
+    getElementByIndex(index){
+        return this.__all__().find(n=>n.ui_index===index);
+    },
+    getElementById(id){
+        return null;
+    },
+    getElementsByClass(){
+
+    },
+    getElementsByTagName(){
+        
+    }
+};
 const __HYDRATION_MAP__ = new Map();
 const __Config__={
     default:{
@@ -9113,10 +9314,17 @@ const __Config__={
     init:()=>document.documentElement.setAttribute("data-engine","zikojs"),
     renderingMode :"spa",
     isSSC : false,
+};
+const __CACHE__ = {
+    ui_index : 0,
+    get_ui_index:function(){
+        return this.ui_index ++
+    }
 };
 
 var Global = /*#__PURE__*/Object.freeze({
     __proto__: null,
+    __CACHE__: __CACHE__,
     __Config__: __Config__,
     __HYDRATION_MAP__: __HYDRATION_MAP__,
     __UI__: __UI__
@@ -9220,6 +9428,7 @@ if ( globalThis.__Ziko__ ) {
             __UI__,
             __HYDRATION_MAP__,
             __Config__,
+            __CACHE__,
             ExtractAll,
             RemoveAll
         };
@@ -9253,4 +9462,4 @@ function RemoveAll(){
     Data.RemoveAll();
 }
 
-export { App$1 as App, Article, Aside, Base, Canvas, Combinaison, Complex, E, EPSILON, Ease, FileBasedRouting, Flex, Footer, Form, Grid$1 as Grid, HTMLWrapper, Header, LinearSystem, Logic$1 as Logic, Main, Matrix, Nav, PI$1 as PI, Permutation, Random, SPA, SVGWrapper, Section, Str, Suspense, Svg, Table$1 as Table, Utils$1 as Utils, ZikoApp, ZikoCustomEvent, ZikoEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventHash, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventWheel, ZikoHead$1 as ZikoHead, ZikoJsonStyleSheet, ZikoMutationObserver, ZikoSPA, ZikoUIAbbrText, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBlockQuote, ZikoUIBr, ZikoUICanvas, ZikoUICodeText, ZikoUIDefintion, ZikoUIElement, ZikoUIFigure, ZikoUIFlex, ZikoUIFooter, ZikoUIForm, ZikoUIGrid, ZikoUIHTMLWrapper, ZikoUIHeader, ZikoUIHeading, ZikoUIHr, ZikoUIHtmlTag, ZikoUIImage, ZikoUIInput, ZikoUIInputCheckbox, ZikoUIInputColor, ZikoUIInputDatalist$1 as ZikoUIInputDatalist, ZikoUIInputDate, ZikoUIInputDateTime, ZikoUIInputEmail, ZikoUIInputImage, ZikoUIInputNumber, ZikoUIInputOption, ZikoUIInputPassword, ZikoUIInputRadio, ZikoUIInputSearch, ZikoUIInputSlider$1 as ZikoUIInputSlider, ZikoUIInputTime, ZikoUILabel, ZikoUILink, ZikoUIMain, ZikoUINav, ZikoUIParagraphe, ZikoUIQuote, ZikoUISVGWrapper, ZikoUISection, ZikoUISelect, ZikoUISubText, ZikoUISupText, ZikoUISuspense, ZikoUISvg, ZikoUIText, ZikoUITextArea, ZikoUIVideo, ZikoUIXMLWrapper, ZikoUseRoot, ZikoUseStyle, __Config__, __HYDRATION_MAP__, __UI__, abbrText, abs, accum, acos, acosh, acot, add, arange, arr2str, asin, asinh, atan, atan2, atanh, audio, bessel, beta, blockQuote, br, brs, btn, cartesianProduct, ceil, checkbox, choleskyDecomposition, clamp, codeText, combinaison, complex, cos, cosh, cot, coth, count, countWords, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, datalist, Ziko as default, defineParamsGetter, deg2rad, dfnText, div, e, fact, figure, floor, gamma, geomspace, h, h1, h2, h3, h4, h5, h6, hTags, hr, hrs, html, hypot, image, inRange, input, inputCamera, inputColor, inputDate, inputDateTime, inputEmail, inputImage, inputNumber, inputPassword, inputTime, isApproximatlyEqual, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, jsonStyleSheet, lerp, li, link, linspace, ln, logspace, luDecomposition, map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ol, ones, p, pgcd, pow, powerSet, ppcm, preload, prod, qrDecomposition, quote, rad2deg, radio, removeExtraSpace, round, s, sTags, search, sec, select, sig, sign, sin, sinc, sinh, slider, sqrt, sqrtn, str, sub, subSet, subText, sum, supText, svg2ascii, svg2img, svg2imgUrl, svg2str, tan, tanh, text, textarea, timeTaken, time_memory_Taken, ul, useAnimation, useChannel$1 as useChannel, useClickEvent, useClipboardEvent, useCustomEvent, useDebounce, useDragEvent, useDropEvent, useEventEmitter, useFavIcon$1 as useFavIcon, useFocusEvent, useFps, useHashEvent, useHead$1 as useHead, useInputEvent, useKeyEvent, useLocaleStorage, useMediaQuery, useMeta$1 as useMeta, useMouseEvent, usePointerEvent, useRoot, useRootValue, useSessionStorage, useStyle, useSuccesifKeys, useSwipeEvent, useThread, useThrottle, useTimeLoop, useTitle$1 as useTitle, useType, useWheelEvent, video, wait, waitForUIElm, waitForUIElmSync, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };
+export { App$1 as App, Article, Aside, Base, Canvas, Combinaison, Complex, E, EPSILON, Ease, FileBasedRouting, Flex, Footer, Form, Grid$1 as Grid, HTMLWrapper, Header, LinearSystem, Logic$1 as Logic, Main, Matrix, Nav, PI$1 as PI, Permutation, Random, SPA, SVGWrapper, Section, Str, Suspense, Svg, Table$1 as Table, Utils$1 as Utils, ZikoApp, ZikoCustomEvent, ZikoEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventHash, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventWheel, ZikoHead$1 as ZikoHead, ZikoJsonStyleSheet, ZikoMutationObserver, ZikoSPA, ZikoUIAbbrText, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBlockQuote, ZikoUIBr, ZikoUICanvas, ZikoUICodeText, ZikoUIDefintion, ZikoUIElement, ZikoUIFigure, ZikoUIFlex, ZikoUIFooter, ZikoUIForm, ZikoUIGrid, ZikoUIHTMLWrapper, ZikoUIHeader, ZikoUIHeading, ZikoUIHr, ZikoUIHtmlTag, ZikoUIImage, ZikoUIInput, ZikoUIInputCheckbox, ZikoUIInputColor, ZikoUIInputDatalist$1 as ZikoUIInputDatalist, ZikoUIInputDate, ZikoUIInputDateTime, ZikoUIInputEmail, ZikoUIInputImage, ZikoUIInputNumber, ZikoUIInputOption, ZikoUIInputPassword, ZikoUIInputRadio, ZikoUIInputSearch, ZikoUIInputSlider$1 as ZikoUIInputSlider, ZikoUIInputTime, ZikoUILabel, ZikoUILink, ZikoUIMain, ZikoUINav, ZikoUIParagraphe, ZikoUIQuote, ZikoUISVGWrapper, ZikoUISection, ZikoUISelect, ZikoUISubText, ZikoUISupText, ZikoUISuspense, ZikoUISvg, ZikoUIText, ZikoUITextArea, ZikoUIVideo, ZikoUIXMLWrapper, ZikoUseRoot, ZikoUseStyle, __CACHE__, __Config__, __HYDRATION_MAP__, __UI__, __ZikoEvent__, abbrText, abs, accum, acos, acosh, acot, add, arange, arr2str, asin, asinh, atan, atan2, atanh, audio, bessel, beta, blockQuote, br, brs, btn, cartesianProduct, ceil, checkbox, choleskyDecomposition, clamp, codeText, combinaison, complex, cos, cosh, cot, coth, count, countWords, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, datalist, Ziko as default, defineParamsGetter, deg2rad, dfnText, div, e, fact, figure, floor, gamma, geomspace, getEvent, h, h1, h2, h3, h4, h5, h6, hTags, hr, hrs, html, hypot, image, inRange, input, inputCamera, inputColor, inputDate, inputDateTime, inputEmail, inputImage, inputNumber, inputPassword, inputTime, isApproximatlyEqual, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, jsonStyleSheet, lerp, li, link, linspace, ln, logspace, luDecomposition, map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ol, ones, p, pgcd, pow, powerSet, ppcm, preload, prod, qrDecomposition, quote, rad2deg, radio, removeExtraSpace, round, s, sTags, search, sec, select, sig, sign, sin, sinc, sinh, slider, sqrt, sqrtn, str, sub, subSet, subText, sum, supText, svg2ascii, svg2img, svg2imgUrl, svg2str, tan, tanh, text, textarea, timeTaken, time_memory_Taken, ul, useAnimation, useChannel$1 as useChannel, useClickEvent, useClipboardEvent, useCustomEvent, useDebounce, useDragEvent, useDropEvent, useEventEmitter, useFavIcon$1 as useFavIcon, useFocusEvent, useFps, useHashEvent, useHead$1 as useHead, useInputEvent, useKeyEvent, useLocaleStorage, useMediaQuery, useMeta$1 as useMeta, useMouseEvent, usePointerEvent, useRoot, useRootValue, useSessionStorage, useStyle, useSuccesifKeys, useSwipeEvent, useThread, useThrottle, useTimeLoop, useTitle$1 as useTitle, useType, useWheelEvent, video, wait, waitForUIElm, waitForUIElmSync, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ziko",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "description": "a versatile javaScript framework offering a rich set of UI components, advanced mathematical utilities, reactivity, animations, client side routing and graphics capabilities",
   "keywords": [
     "front-end",

package/src/app/globals.js

@@ -1,4 +1,25 @@
-const __UI__={}
+const __UI__={
+    __all__(){
+        return Object.values(this)
+          .filter(Array.isArray)
+          .flat();
+    },
+    querySelectorAll(){
+        return this.__all__().filter(n=>n)
+    },
+    getElementByIndex(index){
+        return this.__all__().find(n=>n.ui_index===index);
+    },
+    getElementById(id){
+        return null;
+    },
+    getElementsByClass(){
+
+    },
+    getElementsByTagName(){
+        
+    }
+}
 const __HYDRATION_MAP__ = new Map()
 const __Config__={
     default:{
@@ -17,8 +38,15 @@ const __Config__={
     renderingMode :"spa",
     isSSC : false,
 }
+const __CACHE__ = {
+    ui_index : 0,
+    get_ui_index:function(){
+        return this.ui_index ++
+    }
+}
 export {
     __UI__,
     __HYDRATION_MAP__,
-    __Config__
+    __Config__,
+    __CACHE__
 }

package/src/index.js

@@ -5,7 +5,7 @@ import Time from "./time";
 import Data from "./data";
 import Reactivity from "./reactivity";
 import Graphics from "./graphics";
-import App,{__UI__,__HYDRATION_MAP__, __Config__, defineParamsGetter} from "./app";
+import App,{__UI__,__HYDRATION_MAP__, __Config__, __CACHE__, defineParamsGetter} from "./app";
 
 export * from "./math";
 export * from "./ui";
@@ -47,6 +47,7 @@ if ( globalThis.__Ziko__ ) {
             __UI__,
             __HYDRATION_MAP__,
             __Config__,
+            __CACHE__,
             ExtractAll,
             RemoveAll
         };

package/src/math/index.js

@@ -13,6 +13,7 @@ const Math = {
     ...__Functions__,
     ...__Complex__,
     ...__Matrix__,
+    ...__Random__,
     ...__Utils__,
     ...__Discrect__,
     // ...__Signal__,

package/src/reactivity/events/ZikoEvent.js

@@ -1,6 +1,7 @@
 function EVENT_CONTROLLER(e,EVENT,setter,push_object){
     this.event=e
     if(this.cache.preventDefault[EVENT])e.preventDefault();
+    console.log({setter})
     if(setter)setter();
     if(this.cache.stream.enabled[EVENT]&&push_object)this.cache.stream.history[EVENT].push(push_object);
     this.cache.callbacks[EVENT].map(n=>n(this));

package/src/reactivity/events-exp/__Events__.js

@@ -0,0 +1,47 @@
+const Events = {
+    'Click' : [
+        'Click',
+        'DblClick'
+    ],
+    'Pointer' : [
+        'PtrMove',
+        'PtrDown',
+        'PtrUp',
+        'PtrLeave',
+        'PtrEnter',
+        'PtrOut',
+        'PtrCancel'
+    ],
+    'Mouse' : [],
+    'Touch' : [],
+    'Key' : [
+        'KeyDown',
+        'KeyPress',
+        'KeyUp'
+    ],
+    'Clipboard':[
+        'Copy',
+        'Cut',
+        'Paste'
+    ],
+    'Focus':[
+        'focus',
+        'blur'
+    ],
+    'Drag':[
+        "Drag",
+        "DragStart",
+        "DragEnd",
+        "Drop"
+    ],
+    'Media':[
+
+    ],
+    'Hash':[
+        "HashChange"
+    ]
+}
+
+export {
+    Events
+}

package/src/reactivity/events-exp/__ZikoEvent__.js

@@ -0,0 +1,160 @@
+import { getEvent } from "./utils.js"
+function event_controller(e, event_name, details_setter, customizer, push_object){
+    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();
+    
+    if(this.cache.stream.enabled[event_name]&&push_object)this.cache.stream.history[event_name].push(push_object);
+    this.cache.callbacks[event_name]?.map(n=>n(this));
+}
+class __ZikoEvent__ {
+    constructor(target = null, Events = [], details_setter, customizer){
+        this.target = target;
+        this.cache = {
+            currentEvent : null,
+            event: null,
+            options : {},
+            preventDefault : {},
+            stopPropagation : {},
+            stopImmediatePropagation : {},
+            event_flow : {},
+            paused : {},
+            stream : {
+                enabled : {},
+                clear : {},
+                history : {}
+            },
+            callbacks : {},
+            __controllers__:{}
+        }
+        const events = Events.map(n=>getEvent(n))
+        events.forEach((event,i)=>{
+            Object.assign(this.cache.preventDefault, {[event] : false});
+            Object.assign(this.cache.options, {[event] : {}});
+            Object.assign(this.cache.paused, {[event] : false});
+            Object.assign(this.cache.stream.enabled, {[event] : false});
+            Object.assign(this.cache.stream.clear, {[event] : false});
+            Object.assign(this.cache.stream.history, {[event] : []});
+            Object.assign(this.cache.__controllers__, {[event] : e=>event_controller.call(this, e, event, details_setter, customizer)});
+            Object.assign(this, { [`on${Events[i]}`] : (...callbacks)=> this.__onEvent(event, this.cache.options[event], {}, ...callbacks)})
+        })
+    }
+    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;
+    }
+    setTarget(UI){
+        this.target=UI;
+        return this;
+    }
+    __handle(event, handler, options, dispose){
+        this.targetElement?.addEventListener(event, handler, options);
+        return this;
+    }
+    __onEvent(event, options, dispose, ...callbacks){
+        if(callbacks.length===0){
+            console.log("00")
+            if(this.cache.callbacks[event]){
+                console.log("Call")
+                // this.cache.callbacks.map(n=>e=>n.call(this,e));
+                this.cache.callbacks[event].map(n=>e=>n.call(this,e))
+            }   
+            else {
+                return this;
+            }
+        }
+        else this.cache.callbacks[event] = callbacks.map(n=>e=>n.call(this,e));
+        this.__handle(event, this.cache.__controllers__[event],options, dispose)
+        return this;  
+    }
+    #override(methode, overrides, defaultValue){
+        if(defaultValue === "default") Object.assign(this.cache[methode], {...this.cache[methode], ...overrides});
+        const all = defaultValue === "default" 
+        ? this.cache[methode]
+        : Object.fromEntries(Object.keys(this.cache.preventDefault).map(n=>[n,defaultValue]))
+        Object.assign(this.cache[methode], {...all,...overrides});
+        return this       
+    }
+    preventDefault(overrides = {}, defaultValue = "default"){
+        this.#override("preventDefault", overrides, defaultValue);
+        // const all=Object.fromEntries(Object.keys(this.cache.preventDefault).map(n=>[n,defaultValue]))
+        // Object.assign(this.cache.preventDefault, {...all,...overrides});
+        return this;
+    }
+    stopPropagation(overrides = {}, defaultValue = "default"){
+        this.#override("stopPropagation", overrides, defaultValue);
+        return this;
+    }
+    stopImmediatePropagation(overrides = {}, defaultValue = "default"){
+        this.#override("stopImmediatePropagation", overrides, defaultValue);
+        return this;
+    }
+    setEventOptions(event, options){
+        this.pause({[event] : true, }, "default");
+        Object.assign(this.cache.options[getEvent(event)], options);
+        this.resume({[event] : true, }, "default");
+        return this;
+    }
+    pause(overrides = {}, defaultValue = "default"){
+        const all = defaultValue === "default" 
+          ? this.cache.stream.enabled
+          : Object.entries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]));
+        overrides={...all,...overrides};
+        for(let key in overrides){
+            if(overrides[key]){
+                this.targetElement?.removeEventListener(key, this.cache.__controllers__[key], this.cache.options[key]);
+                this.cache.paused[key]=true;
+            }
+        }
+        return this;
+    }
+    resume(overrides = {}, defaultValue = "default"){
+        const all = defaultValue === "default" 
+          ? this.cache.stream.enabled
+          : Object.entries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]));
+        overrides={...all,...overrides};
+        for(let key in overrides){
+            if(overrides[key]){
+                this.targetElement?.addEventListener(key,this.cache.__controllers__[key], this.cache.options[key]);
+                this.cache.paused[key]=false;
+            }
+        }
+        return this;
+     }
+    stream(overrides = {}, defaultValue = "default"){
+        this.cache.stream.t0=Date.now();
+        const all=Object.fromEntries(Object.keys(this.cache.stream.enabled).map(n=>[n,defaultValue]))
+        overrides={...all,...overrides}
+        Object.assign(this.cache.stream.enabled,overrides);
+        return this;
+     }
+    clear(){
+
+    }
+    dispose(overrides = {}, defaultValue = "default"){
+        this.pause(overrides, defaultValue);
+
+        return this;
+    }
+}
+
+export {
+    __ZikoEvent__,
+    getEvent
+}

package/src/reactivity/events-exp/click.js

@@ -0,0 +1,19 @@
+import { __ZikoEvent__ } from "./__ZikoEvent__.js";
+import { Events } from "./__Events__.js";
+class ZikoEventClick extends __ZikoEvent__{
+    constructor(target, customizer){
+        super(target, Events.Click, details_setter, customizer)
+    }
+}
+function details_setter(){
+    if(this.currentEvent==="click") this.dx = 0
+    else this.dx = 1
+    // console.log(this.currentEvent)
+}
+const __useClickEvent = (target, customizer) => new ZikoEventClick(target, customizer)
+
+globalThis.expClick = __useClickEvent
+export{
+    __useClickEvent,
+    ZikoEventClick
+}

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

@@ -0,0 +1,5 @@
+export * from "./__ZikoEvent__.js";
+export * from "./utils.js";
+// export * from "./click.js";
+// export * from "./key.js";
+// export * from "./pointer.js"

package/src/reactivity/events-exp/key.js

@@ -0,0 +1,27 @@
+import { __ZikoEvent__ } from "./__ZikoEvent__.js";
+import { Events } from "./__Events__.js";
+class ZikoEventKey extends __ZikoEvent__{
+    constructor(target, customizer){
+        super(target, Events.Key, details_setter, customizer)
+    }
+}
+function 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;
+
+    }
+}
+const __useKeyEvent = (target, customizer) => new ZikoEventKey(target, customizer)
+
+export{
+    __useKeyEvent,
+    ZikoEventKey
+}

package/src/reactivity/events-exp/pointer.js

@@ -0,0 +1,48 @@
+import { __ZikoEvent__ } from "./__ZikoEvent__.js";
+import { Events } from "./__Events__.js";
+class ZikoEventPointer extends __ZikoEvent__{
+    constructor(target, customizer){
+        super(target, Events.Pointer, details_setter, customizer);
+        this.isDown = false;
+    }
+}
+function details_setter(){
+    switch(this.currentEvent){
+        case "pointerdown" : {
+            this.dx = parseInt(this.event.offsetX);
+            this.dy = parseInt(this.event.offsetY);
+            this.isDown = true
+        }; break;
+        case "pointermove" : {
+            this.mx = parseInt(this.event.offsetX);
+            this.my = parseInt(this.event.offsetY);
+            this.isMove = true
+        }; break;
+        case "pointerup" : {
+            this.ux = parseInt(this.event.offsetX);
+            this.uy = parseInt(this.event.offsetY);
+            this.isDown = false;
+            console.log(this.target.width)
+            const delta_x=(this.ux-this.dx)/this.target.width;
+            const delta_y=(this.dy-this.uy)/this.target.height;
+            const HORIZONTAL_SWIPPE=(delta_x<0)?"left":(delta_x>0)?"right":"none";
+            const VERTICAL_SWIPPE=(delta_y<0)?"bottom":(delta_y>0)?"top":"none";
+            this.swippe={
+                h:HORIZONTAL_SWIPPE,
+                v:VERTICAL_SWIPPE,
+                delta_x,
+                delta_y
+            }
+        }; break;
+    }
+    // if(this.currentEvent==="click") this.dx = 0
+    // else this.dx = 1
+    // console.log(this.currentEvent)
+}
+const __usePointerEvent = (target, customizer) => new ZikoEventPointer(target, customizer)
+
+globalThis.expPointer = __usePointerEvent
+export{
+    __usePointerEvent,
+    ZikoEventPointer
+}

package/src/reactivity/events-exp/utils.js

@@ -0,0 +1,7 @@
+const getEvent=(event = "")=>{
+    if(event.startsWith("Ptr"))return `pointer${event.split("Ptr")[1].toLowerCase()}`;
+    return event.toLowerCase()
+}
+export{
+    getEvent
+}

package/src/reactivity/index.js

@@ -1,12 +1,15 @@
 import * as Events from "./events";
 import * as Observer from "./observer"
 import * as Hooks from "./hooks"
+import * as EventsExp from "./events-exp"
 const Reactivity={
     ...Events,
     ...Observer,
     ...Hooks,
+    ...EventsExp,
 }
 export * from "./events";
 export * from "./observer";
 export * from "./hooks";
+export * from "./events-exp";
 export default Reactivity;

package/src/ui/elements/ZikoUIElement.js

@@ -65,6 +65,7 @@ class ZikoUIElement {
       intersection:null
     }
     this.uuid = `${this.cache.name}-${Random.string(16)}`
+    this.ui_index = globalThis.__Ziko__.__CACHE__.get_ui_index() 
     this.cache.style.linkTo(this);
     useDefaultStyle && this.style({ 
       position: "relative",
@@ -77,7 +78,7 @@ class ZikoUIElement {
     this.items = [];
     globalThis.__Ziko__.__UI__[this.cache.name]?globalThis.__Ziko__.__UI__[this.cache.name]?.push(this):globalThis.__Ziko__.__UI__[this.cache.name]=[this];
     element && globalThis.__Ziko__.__Config__.default.render && this.render()
-    this.setAttr("data-ref", this.uuid);
+    this.setAttr("data-ui-index", this.ui_index);
     if(globalThis.__Ziko__.__Config__.renderingMode !== "spa" && !globalThis.__Ziko__.__Config__.isSSC) {
       globalThis.__Ziko__.__HYDRATION_MAP__.set(this.uuid, ()=>this)
   }
@@ -161,12 +162,14 @@ class ZikoUIElement {
     }
     for (let i = 0; i < ele.length; i++) {
       if (["number", "string"].includes(typeof ele[i])) ele[i] = text(ele[i]);
+      if(ele[i] instanceof Node) ele[i] = new ZikoUIElement(ele[i]);
       if (ele[i]?.isZikoUIElement) {
         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 Object) {
+      } 
+      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) =>

package/src/ui/elements/misc/index.js

@@ -7,7 +7,6 @@ class ZikoUIHtmlTag extends ZikoUIElement {
 class ZikoUIBtn extends ZikoUIElement {
   constructor(value = "button") {
     super("button","btn");
-    this.element = document?.createElement("button");
     this.setValue(value);
     this.st.cursor("pointer");
     globalThis.__Ziko__.__Config__.default.render && this.render();