ziko 0.45.5 → 0.46.1

package/dist/ziko.mjs

@@ -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
@@ -2003,15 +2003,15 @@ function details_setter$6(){
 }
 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){
@@ -2285,850 +2285,57 @@ class ZikoEvent{
     }
 }
 
-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}={}){
@@ -3302,6 +2509,15 @@ let UIElement$1 = class UIElement extends UIElementCore{
 
 };
 
+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',
@@ -5385,6 +4601,209 @@ const timeTaken = callback => {
     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;
@@ -5933,4 +5352,4 @@ if(globalThis?.document){
     document?.addEventListener("DOMContentLoaded", __Ziko__.__Config__.init());
 }
 
-export { App, Arc, Back, Base, Clock, Combinaison, Complex, Discret, E, EPSILON, Elastic, FileBasedRouting, Flex, HTMLWrapper, InBack, InBounce, InCirc, InCubic, InElastic, InExpo, InOutBack, InOutBounce, InOutCirc, InOutCubic, InOutElastic, InOutExpo, InOutQuad, InOutQuart, InOutQuint, InOutSin, InQuad, InQuart, InQuint, InSin, Linear, Logic$1 as Logic, Matrix, OutBack, OutBounce, OutCirc, OutCubic, OutElastic, OutExpo, OutQuad, OutQuart, OutQuint, OutSin, PI$2 as PI, Permutation, Random, SPA, SVGWrapper, Scheduler, Step, Suspense, Switch, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UIHTMLWrapper, UINode, UISVGWrapper, UISwitch, Utils, ZikoApp, ZikoCustomEvent, ZikoEventClick, ZikoEventClipboard, ZikoEventCustom, ZikoEventDrag, ZikoEventFocus, ZikoEventInput, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventSwipe, ZikoEventTouch, ZikoEventWheel, ZikoHead, ZikoMutationObserver, ZikoSPA, ZikoUIFlex, ZikoUISuspense, ZikoUIText, ZikoUseRoot, __ZikoEvent__, abs, accum, acos$1 as acos, acosh, acot, add, animation, arange, arr2str, asin, asinh, atan, atan2, atanh, bindCustomEvent, bindHashEvent, bindTouchEvent, bind_click_event, bind_clipboard_event, bind_drag_event, bind_focus_event, bind_key_event, bind_mouse_event, bind_pointer_event, bind_wheel_event, cartesianProduct, ceil, clamp, clock, combinaison, complex, cos$2 as cos, cosh$1 as cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, div, e, fact, floor, geomspace, getEvent, hypot, inRange, isApproximatlyEqual, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linspace, ln, logspace, loop, map$1 as map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ones, pgcd, pow$1 as pow, powerSet, ppcm, preload, prod, rad2deg, round, sec, sig, sign, sin$2 as sin, sinc, sinh$1 as sinh, sleep, sqrt$2 as sqrt, sqrtn, step_fps, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, useChannel, useCustomEvent, useDerived, useEventEmitter, useFavIcon, useHashEvent, useHead, useInputEvent, useLocaleStorage, useMediaQuery, useMeta, useReactive, useRoot, useSessionStorage, useState, useSuccesifKeys, useSwipeEvent, useThread, useTitle, wait, waitForUIElm, waitForUIElmSync, watch, watchAttr, watchChildren, watchIntersection, watchScreen, watchSize, zeros };
+export { App, Arc, Back, Base, Clock, Combinaison, Complex, Discret, E, EPSILON, Elastic, FileBasedRouting, Flex, HTMLWrapper, InBack, InBounce, InCirc, InCubic, InElastic, InExpo, InOutBack, InOutBounce, InOutCirc, InOutCubic, InOutElastic, InOutExpo, InOutQuad, InOutQuart, InOutQuint, InOutSin, InQuad, InQuart, InQuint, InSin, Linear, Logic$1 as Logic, Matrix, OutBack, OutBounce, OutCirc, OutCubic, OutElastic, OutExpo, OutQuad, OutQuart, OutQuint, OutSin, PI$2 as PI, Permutation, Random, SPA, SVGWrapper, Scheduler, Step, Suspense, Switch, Tick, TimeAnimation, TimeLoop, TimeScheduler, UIElement$1 as UIElement, UIHTMLWrapper, UINode, UISVGWrapper, UISwitch, UIView, Utils, View, ZikoApp, ZikoEventClick, ZikoEventClipboard, ZikoEventCustom, ZikoEventDrag, ZikoEventFocus, ZikoEventHash, ZikoEventKey, ZikoEventMouse, ZikoEventPointer, ZikoEventTouch, ZikoEventWheel, ZikoSPA, ZikoUIFlex, ZikoUISuspense, ZikoUIText, ZikoUseRoot, __ZikoEvent__, abs, accum, acos$1 as acos, acosh, acot, add, animation, arange, arr2str, asin, asinh, atan, atan2, atanh, bindCustomEvent, bindHashEvent, bindTouchEvent, bind_click_event, bind_clipboard_event, bind_drag_event, bind_focus_event, bind_key_event, bind_mouse_event, bind_pointer_event, bind_wheel_event, cartesianProduct, ceil, clamp, clock, combinaison, complex, cos$2 as cos, cosh$1 as cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, debounce, defineParamsGetter, define_wc, deg2rad, div, e, fact, floor, geomspace, getEvent, hypot, inRange, isApproximatlyEqual, isStateGetter, json2arr, json2css, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, linspace, ln, logspace, loop, map$1 as map, mapfun$1 as mapfun, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, obj2str, ones, pgcd, pow$1 as pow, powerSet, ppcm, preload, prod, rad2deg, round, sec, sig, sign, sin$2 as sin, sinc, sinh$1 as sinh, sleep, sqrt$2 as sqrt, sqrtn, step_fps, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, tags, tan, tanh, text, throttle, tick, timeTaken, time_memory_Taken, timeout, useChannel, useDerived, useEventEmitter, useLocaleStorage, useReactive, useRoot, useSessionStorage, useState, useThread, wait, waitForUIElm, waitForUIElmSync, zeros };