ziko 0.45.5 → 0.46.1

package/dist/ziko.js

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Mon Sep 08 2025 11:12:25 GMT+0100 (UTC+01:00)
+  Date : Sat Sep 27 2025 11:09:49 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
@@ -2009,15 +2009,15 @@
     }
     const bind_focus_event = (target, customizer) => new ZikoEventFocus(target, customizer);
 
-    let ZikoEventHash$1 = class ZikoEventHash extends __ZikoEvent__{
+    class ZikoEventHash extends __ZikoEvent__{
         constructor(target, customizer){
             super(target, Events.Hash, details_setter$5, customizer);
         }
-    };
+    }
     function details_setter$5(){
 
     }
-    const bindHashEvent = (target, customizer) => new ZikoEventHash$1(target, customizer);
+    const bindHashEvent = (target, customizer) => new ZikoEventHash(target, customizer);
 
     class ZikoEventKey extends __ZikoEvent__{
         constructor(target, customizer){
@@ -2291,850 +2291,57 @@
         }
     }
 
-    function input_controller(e){
-        EVENT_CONTROLLER.call(this,e,"input",null,null);
-    }
-    function change_controller(e){
-        EVENT_CONTROLLER.call(this,e,"change",null,null);
-    }
-    class ZikoEventInput extends ZikoEvent{
-        constructor(target){
-            super(target);
-            this.event=null;
-            this.cache={
-                prefixe:"",
-                preventDefault:{
-                    input:false,
-                    change:false,
-                },
-                paused:{
-                    input:false,
-                    change:false,      
-                },
-                stream:{
-                    enabled:{
-                        input:false,
-                        change:false,
-                    },
-                    clear:{
-                        input:false, 
-                        change:false,         
-                    },
-                    history:{
-                        input:[],
-                        change:[],
-                    }
-                },
-                callbacks:{
-                    input:[],
-                    change:[],
-                }
-            };
-            this.__controller={
-                input:input_controller.bind(this),
-                change:change_controller.bind(this),
-            };
-        }
-        get value(){
-            return this.target.value;
-        }
-        onInput(...callbacks){
-            this.__onEvent("input",{},...callbacks);
-            return this;
-         }
-        onChange(...callbacks){
-            this.__onEvent("change",{},...callbacks);
-            return this;
-         }     
-    }
-    const useInputEvent=target=>new ZikoEventInput(target);
-
-    function hashchange_controller(e){
-        EVENT_CONTROLLER.call(this,e,"hashchange",null,null);
-    }
-    class ZikoEventHash extends ZikoEvent{
-        constructor(target){
-            super(target);
-            this.event=null;
-            this.cache={
-                prefixe:"",
-                preventDefault:{
-                    hashchange:false,
-                },
-                paused:{
-                    hashchange:false,      
-                },
-                stream:{
-                    enabled:{
-                        hashchange:false,
-
-                    },
-                    clear:{
-                        hashchange:false, 
-             
-                    },
-                    history:{
-                        hashchange:[],
-                    }
-                },
-                callbacks:{
-                    hashchange:[],
-                }
-            };
-            this.__controller={
-                hashchange:hashchange_controller.bind(this),
-            };
-        }
-        onChange(...callbacks){
-            this.__onEvent("hashchange",{},...callbacks);
-            return this;
-         }    
-    }
-    const useHashEvent=target=>new ZikoEventHash(target);
-
     const custom_event_controller=event_name=>function(e){
         EVENT_CONTROLLER.call(this,e,event_name,null,null);
     };
     class ZikoCustomEvent extends ZikoEvent{
         constructor(target){
-            super(target);
-            this.event=null;
-            this.cache={
-                prefixe:"",
-                preventDefault:{
-                },
-                paused:{
-                },
-                stream:{
-                    enabled:{
-                    },
-                    clear:{
-                    },
-                    history:{
-                    }
-                },
-                callbacks:{
-                }
-            };
-            this.__controller={
-            };
-        }
-        #init(event_name){
-            this.cache.preventDefault[event_name]=false;
-            this.cache.paused[event_name]=false;
-            this.cache.stream.enabled=false;
-            this.cache.stream.clear=false;
-            this.cache.stream.history=[];
-            this.cache.callbacks[event_name]=[];
-            this.__controller[event_name]=custom_event_controller(event_name).bind(this);
-            return this;
-        }
-        on(event_name,...callbacks){
-            if(!(this.__controller[event_name]))this.#init(event_name);
-            this.__onEvent(event_name,{},...callbacks);
-            return this;
-         }  
-        emit(event_name,detail={}){
-            if(!(this.__controller[event_name]))this.#init(event_name);
-            this.detail=detail;
-            const event=new Event(event_name);
-            this.targetElement.dispatchEvent(event);
-            return this;
-        }
-    }
-    const useCustomEvent=target=>new ZikoCustomEvent(target);
-
-    class ZikoEventSwipe extends ZikoEvent {
-      constructor(target, width_threshold = 0.3, height_threshold = 0.3) {
-        super(target);
-        const { removeListener, setWidthThreshold, setHeightThreshold } = init_swipe_event_handler(
-          this.target?.element,
-          width_threshold,
-          height_threshold,
-          this.target.width,
-          this.target.height,
-        );
-        this.cache = {
-          width_threshold,
-          height_threshold,
-          removeListener,
-          setWidthThreshold,
-          setHeightThreshold,
-          legacyTouchAction : globalThis?.document?.body?.style?.touchAction,
-          prefixe: "",
-          preventDefault: {
-            swipe: false,
-          },
-          paused: {
-            swipe: false,
-          },
-          stream: {
-            enabled: {
-              swipe: false,
-            },
-            clear: {
-              swipe: false,
-            },
-            history: {
-              swipe: [],
-            },
-          },
-          callbacks: {
-            swipe: [],
-          },
-        };
-        this.__controller = {
-          swipe: swipe_controller.bind(this),
-        };
-      }
-      onSwipe(...callbacks) {
-        Object.assign(globalThis?.document?.body?.style,{touchAction:"none"});
-        this.__onEvent("swipe", {}, ...callbacks);
-        return this;
-      }
-      updateThresholds(width_threshold = this.cache.width_threshold, height_threshold = this.cache.height_threshold) {
-        if (width_threshold !== undefined) {
-          this.cache.setWidthThreshold(width_threshold);
-        }
-        if (height_threshold !== undefined) {
-          this.cache.setHeightThreshold(height_threshold);
-        }
-        return this;
-      }
-      destroy() {
-        this.cache.removeListener();
-        Object.assign(globalThis?.document?.body?.style,{touchAction:this.cache.legacyTouchAction});
-        return this;
-      }
-    }
-    function init_swipe_event_handler(element, width_threshold = 0.50, height_threshold = 0.5, width, height) {
-      let Interpolated_width_threshold = lerp(width_threshold, 0, width);
-      let Interpolated_height_threshold = lerp(height_threshold, 0, height);
-      let startX = 0, startY = 0, endX = 0, endY = 0;
-      const pointerDownHandler = (event) => {
-        startX = event.clientX;
-        startY = event.clientY;
-      };
-      const pointerUpHandler = (event) => {
-        endX = event.clientX;
-        endY = event.clientY;
-        handleSwipe();
-      };
-      element?.addEventListener('pointerdown', pointerDownHandler);
-      element?.addEventListener('pointerup', pointerUpHandler);
-      function handleSwipe() {
-        const deltaX = endX - startX;
-        const deltaY = endY - startY;
-        if (Math.abs(deltaX) > Interpolated_width_threshold || Math.abs(deltaY) > Interpolated_height_threshold) {
-          dispatchSwipeEvent(deltaX, deltaY);
-        }
-      }
-      function dispatchSwipeEvent(deltaX, deltaY) {
-        const event = globalThis?.CustomEvent ? new CustomEvent('swipe', {
-          detail: {
-            deltaX: abs(deltaX) < Interpolated_width_threshold ? 0 : sign(deltaX) * norm(abs(deltaX), 0, width),
-            deltaY: abs(deltaY) < Interpolated_height_threshold ? 0 : sign(deltaY) * norm(abs(deltaY), 0, height),
-            direction: {
-              x : abs(deltaX) < Interpolated_width_threshold ? "none" : deltaX > 0 ? "right" : "left",
-              y : abs(deltaY) < Interpolated_height_threshold ? "none" : deltaY > 0 ? 'down' : 'up',
-            },
-          },
-        }) : null;
-        element?.dispatchEvent(event);
-      }
-      function setWidthThreshold(new_width_threshold) {
-        Interpolated_width_threshold = lerp(new_width_threshold, 0, width);
-      }
-      function setHeightThreshold(new_height_threshold) {
-        Interpolated_height_threshold = lerp(new_height_threshold, 0, height);
-      }
-      return {
-        removeListener() {
-          element?.removeEventListener('pointerdown', pointerDownHandler);
-          element?.removeEventListener('pointerup', pointerUpHandler);
-          console.log('Swipe event listeners removed');
-        },
-        setWidthThreshold,
-        setHeightThreshold,
-      };
-    }
-    function swipe_controller(e) {
-      EVENT_CONTROLLER.call(this, e, "swipe", null, null);
-    }
-    const useSwipeEvent = (target, width_threshold, height_threshold) => new ZikoEventSwipe(target, width_threshold, height_threshold);
-    /*
-    a=p("ALLL").size("300px","300px").style({background:"red",userSelect:"none"})
-    t=text("")
-    ev=useSwipeEvent(a, .1, .3)
-    ev.onSwipe(e=>{
-    // t.setValue(`
-    //  vertical direction : ${e.event.detail.direction.y}
-    //  horizontal direction : ${e.event.detail.direction.x}
-    //  deltaX : ${e.event.detail.deltaX}
-    //  deltaY : ${e.event.detail.deltaY}
-    // `)
-    e.target.st.translate(e.event.detail.deltaX * 200, e.event.detail.deltaY * 200,0, 500)
-    })
-    */
-    /*
-    a=p("ALLL")
-    .size("300px","300px")
-    .style({background:"red",userSelect:"none"})
-    .onSwipe(
-    .3,
-    .3,
-    e=>{
-      e.target.st.translate(e.event.detail.deltaX * 200, e.event.detail.deltaY * 200,0, 500)
-    })
-    */
-
-    class ZikoMutationObserver {
-        constructor(targetUIElement, options) {
-          this.target = targetUIElement;
-          this.observer = null;
-          this.cache = {
-            options : options || { attributes: true, childList: true, subtree: true },
-            streamingEnabled : true,
-            lastMutation : null,
-            mutationHistory : {
-              // attributes: [],
-              // childList: [],
-              // subtree: [],
-            },
-          };
-      // children to Items : a.items.filter(n=>n.element === a[0].element)
-          this.observeCallback = (mutationsList, observer) => {
-            // if(this.cache.lastUpdatedAttr){
-            //   this.cache.lastUpdatedAttr = mutation.target.getAttribute(mutation.attributeName)
-            // }
-            if (this.cache.streamingEnabled) {
-              for (const mutation of mutationsList) {
-                switch(mutation.type){
-                  case 'attributes':this.cache.mutationHistory.attributes.push(mutation.target.getAttribute(mutation.attributeName));break;
-                  case 'childList':this.cache.mutationHistory.childList.push(mutation);break;
-                  case 'subtree':this.cache.mutationHistory.subtree.push(mutation);break;
-                }
-              }
-            }
-            if (this.callback) {
-              this.callback(mutationsList, observer);
-            }
-          };
-        }
-      
-        observe(callback) {
-          if(!this.observer) {
-            if(!globalThis.MutationObserver) {
-              console.log("MutationObserver Nor Supported");
-              return;
-            }
-            this.observer = new MutationObserver(this.cache.observeCallback);
-            this.observer.observe(this.target.element, this.cache.options);
-            // this.callback = ([e]) => callback.call(e,this.target);
-            this.callback = ([e]) => callback.call(e, this);
-            this.cache.streamingEnabled = true;
-          }
-        }
-      
-        pause(options) {
-          if (this.observer) {
-            this.observer.disconnect();
-            if (options) {
-              this.observer.observe(this.target, options);
-            }
-          }
-        }
-      
-        reset(options) {
-          if (this.observer) {
-            this.observer.disconnect();
-            this.observer.observe(this.target, options || this.cache.options);
-          }
-        }
-      
-        clear() {
-          if (this.observer) {
-            this.observer.disconnect();
-            this.observer = null;
-            this.cache.mutationHistory = {
-              attributes: [],
-              childList: [],
-              subtree: [],
-            };
-          }
-          this.cache.streamingEnabled = false;
-          return this;
-        }
-      
-        getMutationHistory() {
-          return this.cache.mutationHistory;
-        }
-      
-        enableStreaming() {
-          this.cache.streamingEnabled = true;
-          return this;
-        }
-      
-        disableStreaming() {
-          this.cache.streamingEnabled = false;
-          return this;
-        }
-      }
-
-
-
-    const watch=(targetUIElement,options={},callback=null)=>{
-        const Observer= new ZikoMutationObserver(targetUIElement,options);
-        if(callback)Observer.observe(callback);
-        return Observer
-    };
-
-    class ZikoWatchAttr extends ZikoMutationObserver{
-        constructor(targetUIElement,callback){
-          super(targetUIElement,{ attributes: true, childList: false, subtree: false });
-          Object.assign(this.cache,{
-            observeCallback : (mutationsList, observer) =>{
-              for (const mutation of mutationsList) {
-                this.cache.lastMutation = {
-                  name : mutation.attributeName,
-                  value : mutation.target.getAttribute(mutation.attributeName)
-                };
-                if (this.cache.streamingEnabled) this.cache.mutationHistory.attributes.push(this.cache.lastMutation);
-            }
-            if (this.callback) this.callback(mutationsList, observer);  
-          }  
-          });
-          this.cache.mutationHistory.attributes = [];
-          if(callback)this.observe(callback);
-        }
-        get history(){
-          return this.cache.mutationHistory.attributes;
-        }
-      }
-    const watchAttr=(targetUIElement, callback)=>new ZikoWatchAttr(targetUIElement, callback);
-
-    class ZikoWatchChildren extends ZikoMutationObserver{
-        constructor(targetUIElement,callback){
-          super(targetUIElement,{ attributes: false, childList: true, subtree: false });
-          Object.assign(this.cache,{
-            observeCallback : (mutationsList, observer) =>{
-              for (const mutation of mutationsList) {
-                if(mutation.addedNodes)this.cache.lastMutation = {
-                  type : "add",
-                  item : this.target.find(n=>n.element === mutation.addedNodes[0])[0],
-                  previous : this.target.find(n=>n.element === mutation.previousSibling)[0]
-                };
-                else if(mutation.addedNodes)this.cache.lastMutation = {
-                  type : "remove",
-                  item : this.target.find(n=>n.element === mutation.removedNodes[0])[0],
-                  previous : this.target.find(n=>n.element === mutation.previousSibling)[0]
-                };
-                if (this.cache.streamingEnabled) this.cache.mutationHistory.children.push(this.cache.lastMutation);
-            }
-            if (this.callback) this.callback(mutationsList, observer);  
-          }  
-          });
-          this.cache.mutationHistory.children = [];
-          if(callback)this.observe(callback);
-        }
-        get item(){
-          return this.cache.lastMutation.item;
-        }
-        get history(){
-          return this.cache.mutationHistory.children;
-        }
-      }
-
-    const watchChildren=(targetUIElement, callback)=>new ZikoWatchChildren(targetUIElement, callback);
-
-    class ZikoIntersectionObserver{
-        constructor(UIElement,callback,{threshold=0,margin=0}={}){
-            this.target=UIElement;
-            this.config={
-                threshold,
-                margin
-            };
-            if(!globalThis.IntersectionObserver){
-                console.log("IntersectionObserver Not Supported");
-                return;
-            }
-            this.observer=new IntersectionObserver((entries)=>{
-                this.entrie=entries[0];
-                callback(this);
-            },{
-                threshold:this.threshold,
-            });
-        }
-        get ratio(){
-            return this.entrie.intersectionRatio;
-        }
-        get isIntersecting(){
-            return this.entrie.isIntersecting;
-        }
-        setThreshould(threshold){
-            this.config.threshold=threshold;
-            return this;
-        }
-        setMargin(margin){
-            margin=(typeof margin === "number")?margin+"px":margin;
-            this.config.margin=margin;
-            return this;
-        }
-        start(){
-            this.observer.observe(this.target.element);
-            return this;
-        }
-        stop(){
-            return this;
-        }
-    }
-
-    const watchIntersection=(UI,callback,config)=>new ZikoIntersectionObserver(UI,callback,config);
-
-    class ZikoResizeObserver{
-        constructor(UIElement,callback){
-            this.target=UIElement;
-            this.contentRect=null;
-            this.observer=new ResizeObserver(()=>{
-               callback(this);
-            });
-        }
-        get BoundingRect(){
-            return this.target.element.getBoundingClientRect();
-        }
-        get width(){
-            return this.BoundingRect.width;
-        }
-        get height(){
-            return this.BoundingRect.height;
-        }
-        get top(){
-            return this.BoundingRect.top;
-        }
-        get bottom(){
-            return this.BoundingRect.bottom;
-        }
-        get right(){
-            return this.BoundingRect.right;
-        }
-        get left(){
-            return this.BoundingRect.left;
-        }
-        get x(){
-            return this.BoundingRect.x;
-        }
-        get y(){
-            return this.BoundingRect.y;
-        }
-        start(){
-            this.observer.observe(this.target.element);
-            return this;
-        }
-        stop(){
-            this.observer.unobserve(this.target.element);
-            return this;
-        }
-    }
-
-    const watchSize=(UI,callback)=>new ZikoResizeObserver(UI,callback);
-
-    class ZikoScreenObserver {
-        constructor(callback=e=>console.log({x:e.x,y:e.y})) {
-          this.cache={};
-          this.previousX = globalThis?.screenX;
-          this.previousY = globalThis?.screenY;
-        }
-        update(){
-            Object.assign(this.cache,{
-                screenXLeft : globalThis?.screenX, // CORRECT
-                screenXRight : globalThis?.screen.availWidth - globalThis?.screenX, // CORRECT
-                screenYTop : globalThis?.screenY, // CORRECT
-                screenYBottom : globalThis?.screen.availHeight - globalThis?.screenY - globalThis?.outerHeight, // TO TEST
-                screenCenterX : globalThis?.screen.availWidth/2, // CORRECT
-                screenCenterY : globalThis?.screen.availHeight/2,// CORRECT
-                windowCenterX : globalThis?.outerWidth/2+globalThis?.screenX, // CORRECT
-                windowCenterY : globalThis?.outerHeight/2+ globalThis?.screenY, // FALSE
-                deltaCenterX : globalThis?.screen.availWidth/2-globalThis?.outerWidth/2+globalThis?.screenX, // CORRECT
-                deltaCenterY : null //
-            });
-        }
-        get x0(){
-            return map$1(globalThis?.screenX, 0, globalThis.screen.availWidth, -1, 1);
-        }
-        get y0(){
-            return - map$1(globalThis?.screenY, 0, globalThis.screen.availHeight, -1, 1);
-        }
-        get x1(){
-            return map$1(globalThis?.screenX + globalThis?.outerWidth, 0, globalThis.screen.availWidth, -1, 1);
-        }
-        get y1(){
-            return - map$1(globalThis?.screenY + globalThis?.outerHeight, 0, globalThis.screen.availHeight, -1, 1);
-        }
-        get cx(){
-            return map$1(globalThis?.outerWidth/2+globalThis?.screenX, 0, globalThis.screen.availWidth, -1, 1);
-        }
-        get cy(){
-            return - map$1(globalThis?.outerHeight/2+ globalThis?.screenY, 0, globalThis.screen.availHeight, -1, 1);
-        }
-    }
-
-    const watchScreen=(callback)=>new ZikoScreenObserver(callback);
-
-    const useSuccesifKeys=(self,keys=[],callback=()=>{})=>{
-        self.cache.stream.enabled.down=true;
-        const length=keys.length;
-        const LastKeysDown=self.cache.stream.history.down.slice(-length).map(n=>n.key);
-        
-            if(keys.join("")===LastKeysDown.join("")){
-                self.event.preventDefault();
-                callback.call(self,self);
-            }
-        
-    };
-
-    class ZikoUseEventEmitter {
-        constructor() {
-          this.events = {};
-          this.maxListeners = 10; 
-        }
-        on(event, listener) {
-          if (!this.events[event]) {
-            this.events[event] = [];
-          }
-          this.events[event].push(listener);  
-          if (this.events[event].length > this.maxListeners) {
-            console.warn(`Warning: Possible memory leak. Event '${event}' has more than ${this.maxListeners} listeners.`);
-          }
-        }
-        once(event, listener) {
-          const onceListener = (data) => {
-            this.off(event, onceListener); // Remove the listener after it's been called
-            listener(data);
-          };
-          this.on(event, onceListener);
-        }
-      
-        off(event, listener) {
-          const listeners = this.events[event];
-          if (listeners) {
-            const index = listeners.indexOf(listener);
-            if (index !== -1) {
-              listeners.splice(index, 1);
-            }
-          }
-        }
-      
-        emit(event, data) {
-          const listeners = this.events[event];
-          if (listeners) {
-            listeners.forEach(listener => {
-              listener(data);
-            });
-          }
-        }
-      
-        clear(event) {
-          if (event) {
-            delete this.events[event];
-          } else {
-            this.events = {};
-          }
-        }
-      
-        setMaxListener(event, max) {
-          this.maxListeners = max;
-        }
-      
-        removeAllListeners(event) {
-          if (event) {
-            this.events[event] = [];
-          } else {
-            this.events = {};
-          }
-        }
-      }
-
-    const useEventEmitter=()=>new ZikoUseEventEmitter();
-
-    class ZikoUseFavIcon{
-        constructor(FavIcon,useEventEmitter=true){
-            this.#init();
-            this.cache={
-                Emitter:null
-            };
-            if(useEventEmitter)this.useEventEmitter();
-            this.set(FavIcon);
-        }
-        #init(){     
-            this.__FavIcon__ = document.querySelector("link[rel*='icon']") || document?.createElement('link');   
-            this.__FavIcon__.type = 'image/x-icon';
-            this.__FavIcon__.rel = 'shortcut icon';
-            return this;
-        }
-        set(href){
-            if(href!==this.__FavIcon__.href){
-                this.__FavIcon__.href=href;
-                if(this.cache.Emitter)this.cache.Emitter.emit("ziko:favicon-changed");
-            }
-            return this;
-        }
-        get current(){
-            return document.__FavIcon__.href;
-        }
-        onChange(callback){
-            if(this.cache.Emitter)this.cache.Emitter.on("ziko:favicon-changed",callback);
-            return this;
-        }
-        useEventEmitter(){
-            this.cache.Emitter=useEventEmitter();
-            return this;
-        }
-
-    }
-    const useFavIcon=(FavIcon,useEventEmitter)=>new ZikoUseFavIcon(FavIcon,useEventEmitter);
-
-    class ZikoMeta{
-        constructor({viewport,charset,description,author,keywords}){
-            this.document = globalThis?.document; 
-            this.meta={};
-            this.init({viewport,charset,description,author,keywords});
-        }
-        init({viewport,charset,description,author,keywords}){
-            viewport && this.setViewport(viewport);
-            charset && this.setCharset(charset);
-            description && this.describe(description);
-            author && this.setAuthor(author);
-            keywords && this.setKeywords(keywords);
-        }
-        set(key,value){
-            key = key.toLowerCase();
-            const isCharset = (key === "charset");
-            const meta = isCharset ? document.querySelector("meta[charset]"):document.querySelector(`meta[name=${key}]`);
-            this.meta=meta?? document?.createElement("meta");
-            if(isCharset) this.meta.setAttribute("charset",value);
-            else {
-                this.meta.setAttribute("name",key);
-                this.meta.setAttribute("content",value);
-            }
-            if(!meta)this.document.head.append(this.meta);
-            return this;     
-        }
-        setCharset(charset="utf-8"){
-            this.set("charset",charset);
-            return this;
-        }
-        describe(description){
-            this.set("description",description);
-            return this;    
-        }
-        setViewport(viewport="width=device-width, initial-scale=1.0"){
-            this.set("viewport",viewport);
-            return this;    
-        }
-        setKeywords(...keywords){
-            // keywords.push("zikojs");
-            keywords=[...new Set(keywords)].join(", ");
-            this.set("keywords",keywords);
-            return this;
-        }
-        setAuthor(author){
-            this.set("author",author);
-            return this;
-        }
-    }
-    const useMeta=({viewport,charset,description,author,keywords})=>new ZikoMeta({viewport,charset,description,author,keywords});
-
-    class ZikoUseTitle{
-        constructor(title=document.title,useEventEmitter=true){
-            this.cache={
-                Emitter:null
-            };
-            if(useEventEmitter)this.useEventEmitter();
-            this.set(title);
-        }
-        useEventEmitter(){
-            this.cache.Emitter=useEventEmitter();
-            return this;
-        }
-        set(title){
-            if(title!==document.title){
-                document.title=title;
-                if(this.cache.Emitter)this.cache.Emitter.emit("ziko:title-changed");
-            }
-            return this;
-        }
-        get current(){
-            return document.title;
-        }
-        onChange(callback){
-            if(this.cache.Emitter)this.cache.Emitter.on("ziko:title-changed",callback);
-            return this;
-        }
-    }
-    const useTitle=(title, useEventEmitter)=>new ZikoUseTitle(title, useEventEmitter);
-
-    // import {useLink} from "./";
-    class ZikoHead{
-        constructor({title,lang,icon,meta,noscript}){
-            this.html = globalThis?.document?.documentElement;
-            this.head = globalThis?.document?.head;
-
-            title && useTitle(title);
-            lang && this.setLang(lang);
-            icon && useFavIcon(icon);
-            meta && useMeta(meta);
-            noscript && this.setNoScript();
-        }
-        setLang(lang){
-            this.html.setAttribute("lang",lang);
-        }
-        setNoScript(content){
-
-        }
-    }
-
-    const useHead=({ title, lang, icon, meta, noscript })=>new ZikoHead({ title, lang, icon, meta, noscript });
-
-    /*
-     [
-                {
-                    query: '(min-width: 600px)',
-                    callback: () => console.log(1)
+            super(target);
+            this.event=null;
+            this.cache={
+                prefixe:"",
+                preventDefault:{
                 },
-                {
-                    query: '(max-width: 300px)',
-                    callback: () => console.log(2)
+                paused:{
+                },
+                stream:{
+                    enabled:{
+                    },
+                    clear:{
+                    },
+                    history:{
+                    }
+                },
+                callbacks:{
                 }
-            ]
-    */
-    class ZikoUseMediaQuery {
-        constructor(mediaQueryRules=[],fallback=()=>{}) {
-            this.mediaQueryRules = mediaQueryRules;
-            this.fallback = fallback;
-            this.lastCalledCallback = null;
-            this.init();
+            };
+            this.__controller={
+            };
         }
-
-        init() {
-            this.mediaQueryRules.forEach(({ query, callback }) => {
-                const mediaQueryList = globalThis.matchMedia(query);
-                const checkMatches = () => {
-                    const anyMatch = this.mediaQueryRules.some(({ query }) => globalThis.matchMedia(query).matches);
-                    if (mediaQueryList.matches) {
-                        callback();
-                        this.lastCalledCallback = callback;
-                    } else if (!anyMatch && this.lastCalledCallback !== this.fallback) {
-                        this.fallback();
-                        this.lastCalledCallback = this.fallback;
-                    }
-                };
-                checkMatches();
-                mediaQueryList.addListener(checkMatches);
-            });
+        #init(event_name){
+            this.cache.preventDefault[event_name]=false;
+            this.cache.paused[event_name]=false;
+            this.cache.stream.enabled=false;
+            this.cache.stream.clear=false;
+            this.cache.stream.history=[];
+            this.cache.callbacks[event_name]=[];
+            this.__controller[event_name]=custom_event_controller(event_name).bind(this);
+            return this;
+        }
+        on(event_name,...callbacks){
+            if(!(this.__controller[event_name]))this.#init(event_name);
+            this.__onEvent(event_name,{},...callbacks);
+            return this;
+         }  
+        emit(event_name,detail={}){
+            if(!(this.__controller[event_name]))this.#init(event_name);
+            this.detail=detail;
+            const event=new Event(event_name);
+            this.targetElement.dispatchEvent(event);
+            return this;
         }
     }
-
-    const useMediaQuery = (mediaQueryRules,fallback) => new ZikoUseMediaQuery(mediaQueryRules,fallback);
+    const useCustomEvent=target=>new ZikoCustomEvent(target);
 
     let UIElement$1 = class UIElement extends UIElementCore{
       constructor({element, name ='', type='html', render = __Ziko__.__Config__.default.render}={}){
@@ -3308,6 +2515,15 @@
 
     };
 
+    class UIView extends UIElement$1{
+        constructor(...items){
+            super({element : 'div', name : 'view'});
+            this.append(...items);
+        }
+    }
+
+    const View = (...items) => new UIView(...items);
+
     const HTMLTags = [
       'a',
       'abb',
@@ -5391,6 +4607,209 @@
         return r;
     };
 
+    class ZikoUseEventEmitter {
+        constructor() {
+          this.events = {};
+          this.maxListeners = 10; 
+        }
+        on(event, listener) {
+          if (!this.events[event]) {
+            this.events[event] = [];
+          }
+          this.events[event].push(listener);  
+          if (this.events[event].length > this.maxListeners) {
+            console.warn(`Warning: Possible memory leak. Event '${event}' has more than ${this.maxListeners} listeners.`);
+          }
+        }
+        once(event, listener) {
+          const onceListener = (data) => {
+            this.off(event, onceListener); // Remove the listener after it's been called
+            listener(data);
+          };
+          this.on(event, onceListener);
+        }
+      
+        off(event, listener) {
+          const listeners = this.events[event];
+          if (listeners) {
+            const index = listeners.indexOf(listener);
+            if (index !== -1) {
+              listeners.splice(index, 1);
+            }
+          }
+        }
+      
+        emit(event, data) {
+          const listeners = this.events[event];
+          if (listeners) {
+            listeners.forEach(listener => {
+              listener(data);
+            });
+          }
+        }
+      
+        clear(event) {
+          if (event) {
+            delete this.events[event];
+          } else {
+            this.events = {};
+          }
+        }
+      
+        setMaxListener(event, max) {
+          this.maxListeners = max;
+        }
+      
+        removeAllListeners(event) {
+          if (event) {
+            this.events[event] = [];
+          } else {
+            this.events = {};
+          }
+        }
+      }
+
+    const useEventEmitter=()=>new ZikoUseEventEmitter();
+
+    class ZikoUseFavIcon{
+        constructor(FavIcon,useEventEmitter=true){
+            this.#init();
+            this.cache={
+                Emitter:null
+            };
+            if(useEventEmitter)this.useEventEmitter();
+            this.set(FavIcon);
+        }
+        #init(){     
+            this.__FavIcon__ = document.querySelector("link[rel*='icon']") || document?.createElement('link');   
+            this.__FavIcon__.type = 'image/x-icon';
+            this.__FavIcon__.rel = 'shortcut icon';
+            return this;
+        }
+        set(href){
+            if(href!==this.__FavIcon__.href){
+                this.__FavIcon__.href=href;
+                if(this.cache.Emitter)this.cache.Emitter.emit("ziko:favicon-changed");
+            }
+            return this;
+        }
+        get current(){
+            return document.__FavIcon__.href;
+        }
+        onChange(callback){
+            if(this.cache.Emitter)this.cache.Emitter.on("ziko:favicon-changed",callback);
+            return this;
+        }
+        useEventEmitter(){
+            this.cache.Emitter=useEventEmitter();
+            return this;
+        }
+
+    }
+    const useFavIcon=(FavIcon,useEventEmitter)=>new ZikoUseFavIcon(FavIcon,useEventEmitter);
+
+    class ZikoMeta{
+        constructor({viewport,charset,description,author,keywords}){
+            this.document = globalThis?.document; 
+            this.meta={};
+            this.init({viewport,charset,description,author,keywords});
+        }
+        init({viewport,charset,description,author,keywords}){
+            viewport && this.setViewport(viewport);
+            charset && this.setCharset(charset);
+            description && this.describe(description);
+            author && this.setAuthor(author);
+            keywords && this.setKeywords(keywords);
+        }
+        set(key,value){
+            key = key.toLowerCase();
+            const isCharset = (key === "charset");
+            const meta = isCharset ? document.querySelector("meta[charset]"):document.querySelector(`meta[name=${key}]`);
+            this.meta=meta?? document?.createElement("meta");
+            if(isCharset) this.meta.setAttribute("charset",value);
+            else {
+                this.meta.setAttribute("name",key);
+                this.meta.setAttribute("content",value);
+            }
+            if(!meta)this.document.head.append(this.meta);
+            return this;     
+        }
+        setCharset(charset="utf-8"){
+            this.set("charset",charset);
+            return this;
+        }
+        describe(description){
+            this.set("description",description);
+            return this;    
+        }
+        setViewport(viewport="width=device-width, initial-scale=1.0"){
+            this.set("viewport",viewport);
+            return this;    
+        }
+        setKeywords(...keywords){
+            // keywords.push("zikojs");
+            keywords=[...new Set(keywords)].join(", ");
+            this.set("keywords",keywords);
+            return this;
+        }
+        setAuthor(author){
+            this.set("author",author);
+            return this;
+        }
+    }
+    const useMeta=({viewport,charset,description,author,keywords})=>new ZikoMeta({viewport,charset,description,author,keywords});
+
+    class ZikoUseTitle{
+        constructor(title=document.title,useEventEmitter=true){
+            this.cache={
+                Emitter:null
+            };
+            if(useEventEmitter)this.useEventEmitter();
+            this.set(title);
+        }
+        useEventEmitter(){
+            this.cache.Emitter=useEventEmitter();
+            return this;
+        }
+        set(title){
+            if(title!==document.title){
+                document.title=title;
+                if(this.cache.Emitter)this.cache.Emitter.emit("ziko:title-changed");
+            }
+            return this;
+        }
+        get current(){
+            return document.title;
+        }
+        onChange(callback){
+            if(this.cache.Emitter)this.cache.Emitter.on("ziko:title-changed",callback);
+            return this;
+        }
+    }
+    const useTitle=(title, useEventEmitter)=>new ZikoUseTitle(title, useEventEmitter);
+
+    // import {useLink} from "./";
+    class ZikoHead{
+        constructor({title,lang,icon,meta,noscript}){
+            this.html = globalThis?.document?.documentElement;
+            this.head = globalThis?.document?.head;
+
+            title && useTitle(title);
+            lang && this.setLang(lang);
+            icon && useFavIcon(icon);
+            meta && useMeta(meta);
+            noscript && this.setNoScript();
+        }
+        setLang(lang){
+            this.html.setAttribute("lang",lang);
+        }
+        setNoScript(content){
+
+        }
+    }
+
+    const useHead=({ title, lang, icon, meta, noscript })=>new ZikoHead({ title, lang, icon, meta, noscript });
+
     class ZikoApp {
         constructor({head = null, wrapper = null, target = null}){
             this.head = head;
@@ -6004,23 +5423,21 @@
     exports.UINode = UINode;
     exports.UISVGWrapper = UISVGWrapper;
     exports.UISwitch = UISwitch;
+    exports.UIView = UIView;
     exports.Utils = Utils;
+    exports.View = View;
     exports.ZikoApp = ZikoApp;
-    exports.ZikoCustomEvent = ZikoCustomEvent;
     exports.ZikoEventClick = ZikoEventClick;
     exports.ZikoEventClipboard = ZikoEventClipboard;
     exports.ZikoEventCustom = ZikoEventCustom;
     exports.ZikoEventDrag = ZikoEventDrag;
     exports.ZikoEventFocus = ZikoEventFocus;
-    exports.ZikoEventInput = ZikoEventInput;
+    exports.ZikoEventHash = ZikoEventHash;
     exports.ZikoEventKey = ZikoEventKey;
     exports.ZikoEventMouse = ZikoEventMouse;
     exports.ZikoEventPointer = ZikoEventPointer;
-    exports.ZikoEventSwipe = ZikoEventSwipe;
     exports.ZikoEventTouch = ZikoEventTouch;
     exports.ZikoEventWheel = ZikoEventWheel;
-    exports.ZikoHead = ZikoHead;
-    exports.ZikoMutationObserver = ZikoMutationObserver;
     exports.ZikoSPA = ZikoSPA;
     exports.ZikoUIFlex = ZikoUIFlex;
     exports.ZikoUISuspense = ZikoUISuspense;
@@ -6144,33 +5561,17 @@
     exports.time_memory_Taken = time_memory_Taken;
     exports.timeout = timeout;
     exports.useChannel = useChannel;
-    exports.useCustomEvent = useCustomEvent;
     exports.useDerived = useDerived;
     exports.useEventEmitter = useEventEmitter;
-    exports.useFavIcon = useFavIcon;
-    exports.useHashEvent = useHashEvent;
-    exports.useHead = useHead;
-    exports.useInputEvent = useInputEvent;
     exports.useLocaleStorage = useLocaleStorage;
-    exports.useMediaQuery = useMediaQuery;
-    exports.useMeta = useMeta;
     exports.useReactive = useReactive;
     exports.useRoot = useRoot;
     exports.useSessionStorage = useSessionStorage;
     exports.useState = useState;
-    exports.useSuccesifKeys = useSuccesifKeys;
-    exports.useSwipeEvent = useSwipeEvent;
     exports.useThread = useThread;
-    exports.useTitle = useTitle;
     exports.wait = wait;
     exports.waitForUIElm = waitForUIElm;
     exports.waitForUIElmSync = waitForUIElmSync;
-    exports.watch = watch;
-    exports.watchAttr = watchAttr;
-    exports.watchChildren = watchChildren;
-    exports.watchIntersection = watchIntersection;
-    exports.watchScreen = watchScreen;
-    exports.watchSize = watchSize;
     exports.zeros = zeros;
 
 }));