ziko 0.0.2 → 0.0.5

package/dist/ziko.mjs

@@ -2,7 +2,7 @@
 /*
   Project: ziko.js
   Author: Zakaria Elalaoui
-  Date : Sun Mar 10 2024 11:12:39 GMT+0000 (UTC)
+  Date : Thu Mar 21 2024 19:27:32 GMT+0000 (UTC)
   Git-Repo : https://github.com/zakarialaoui10/ziko.js
   Git-Wiki : https://github.com/zakarialaoui10/ziko.js/wiki
   Released under MIT License
@@ -3380,6 +3380,332 @@ class ZikoEventPointer extends ZikoEvent {
 }
 var Pointer = target => new ZikoEventPointer(target);
 
+class ZikoEventMouse extends ZikoEvent {
+  constructor(target) {
+    super(target);
+    this.event = null;
+    this.dx = 0;
+    this.dy = 0;
+    this.dt = 0;
+    this.mx = 0;
+    this.my = 0;
+    this.mt = 0;
+    this.ux = 0;
+    this.uy = 0;
+    this.ut = 0;
+    this.swippe = {
+      h: null,
+      v: null,
+      delta_x: 0,
+      delta_y: 0
+    };
+    this.isMoving = false;
+    this.isDown = false;
+    this.cache = {
+      prefixe: "mouse",
+      preventDefault: {
+        down: false,
+        move: false,
+        up: false,
+        enter: false,
+        out: false,
+        leave: false,
+        over: false
+      },
+      paused: {
+        down: false,
+        move: false,
+        up: false,
+        enter: false,
+        out: false,
+        leave: false,
+        over: false
+      },
+      stream: {
+        enabled: {
+          down: false,
+          move: false,
+          up: false,
+          enter: false,
+          out: false,
+          leave: false,
+          over: false
+        },
+        clear: {
+          down: false,
+          move: false,
+          up: false,
+          enter: false,
+          out: false,
+          leave: false,
+          over: false
+        },
+        history: {
+          down: [],
+          move: [],
+          up: [],
+          enter: [],
+          out: [],
+          leave: [],
+          over: []
+        }
+      },
+      callbacks: {
+        down: [self => console.log({
+          dx: self.dx,
+          dy: self.dy,
+          down: self.down,
+          move: self.move,
+          t: self.dt
+        })],
+        move: [self => console.log({
+          mx: self.mx,
+          my: self.my,
+          down: self.down,
+          move: self.move,
+          t: self.dt
+        })],
+        up: [self => console.log({
+          ux: self.ux,
+          uy: self.uy,
+          down: self.down,
+          move: self.move,
+          t: self.dt
+        })],
+        enter: [self => console.log({
+          dx: self.dx,
+          dy: self.dy,
+          down: self.down,
+          move: self.move,
+          t: self.dt
+        })],
+        out: [self => console.log({
+          mx: self.mx,
+          my: self.my,
+          down: self.down,
+          move: self.move,
+          t: self.dt
+        })],
+        leave: [self => console.log({
+          ux: self.ux,
+          uy: self.uy,
+          down: self.down,
+          move: self.move,
+          t: self.dt
+        })],
+        over: [self => console.log({
+          ux: self.ux,
+          uy: self.uy,
+          down: self.down,
+          move: self.move,
+          t: self.dt
+        })]
+      }
+    };
+    this.__controller = {
+      down: mousedown_controller.bind(this),
+      move: mousemove_controller.bind(this),
+      up: mouseup_controller.bind(this),
+      enter: mouseenter_controller.bind(this),
+      out: mouseout_controller.bind(this),
+      leave: mouseleave_controller.bind(this),
+      over: mouseover_controller.bind(this)
+    };
+  }
+  onDown(...callbacks) {
+    if (callbacks.length === 0) callbacks = [() => {}];
+    this.__onEvent("down", {
+      down: true,
+      move: false,
+      up: false,
+      enter: false,
+      out: false,
+      leave: false,
+      over: false
+    }, ...callbacks);
+    return this;
+  }
+  onMove(...callbacks) {
+    if (callbacks.length === 0) callbacks = [() => {}];
+    this.__onEvent("move", {
+      down: false,
+      move: true,
+      up: false,
+      enter: false,
+      out: false,
+      leave: false,
+      over: false
+    }, ...callbacks);
+    return this;
+  }
+  onUp(...callbacks) {
+    if (callbacks.length === 0) callbacks = [() => {}];
+    this.__onEvent("up", {
+      down: false,
+      move: false,
+      up: true,
+      enter: false,
+      out: false,
+      leave: false,
+      over: false
+    }, ...callbacks);
+    return this;
+  }
+  onEnter(...callbacks) {
+    if (callbacks.length === 0) callbacks = [() => {}];
+    this.__onEvent("enter", {
+      down: false,
+      move: false,
+      up: false,
+      enter: true,
+      out: false,
+      leave: false,
+      over: false
+    }, ...callbacks);
+    return this;
+  }
+  onOut(...callbacks) {
+    if (callbacks.length === 0) callbacks = [() => {}];
+    this.__onEvent("out", {
+      down: false,
+      move: false,
+      up: false,
+      enter: false,
+      out: true,
+      leave: false,
+      over: false
+    }, ...callbacks);
+    return this;
+  }
+  onLeave(...callbacks) {
+    if (callbacks.length === 0) callbacks = [() => {}];
+    this.__onEvent("leave", {
+      down: false,
+      move: false,
+      up: false,
+      enter: false,
+      out: false,
+      leave: true,
+      over: false
+    }, ...callbacks);
+    return this;
+  }
+  onOver(...callbacks) {
+    if (callbacks.length === 0) callbacks = [() => {}];
+    this.__onEvent("over", {
+      down: false,
+      move: false,
+      up: false,
+      enter: false,
+      out: false,
+      leave: false,
+      over: true
+    }, ...callbacks);
+    return this;
+  }
+}
+function mousedown_controller(e) {
+  EVENT_CONTROLLER.call(this, e, "down", () => {
+    this.dx = parseInt(e.offsetX);
+    this.dy = parseInt(e.offsetY);
+    this.isDown = true;
+  }, {
+    x: this.dx,
+    y: this.dy,
+    t: Date.now() - this.cache.stream.t0
+  });
+}
+function mousemove_controller(e) {
+  EVENT_CONTROLLER.call(this, e, "move", () => {
+    this.mx = parseInt(e.offsetX);
+    this.my = parseInt(e.offsetY);
+    this.isMoving = true;
+  }, {
+    x: this.mx,
+    y: this.my,
+    t: Date.now() - this.cache.stream.t0
+  });
+}
+function mouseup_controller(e) {
+  EVENT_CONTROLLER.call(this, e, "up", () => {
+    this.ux = parseInt(e.offsetX);
+    this.uy = parseInt(e.offsetY);
+    this.isDown = false;
+    const dx = this.dx;
+    const dy = this.dy;
+    const ux = this.ux;
+    const uy = this.uy;
+    const delta_x = (ux - dx) / this.target.Width;
+    const delta_y = (dy - 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
+    };
+  }, {
+    x: this.ux,
+    y: this.uy,
+    t: Date.now() - this.cache.stream.t0
+  });
+}
+function mouseenter_controller(e) {
+  EVENT_CONTROLLER.call(this, e, "enter", null, null);
+}
+function mouseleave_controller(e) {
+  EVENT_CONTROLLER.call(this, e, "leave", null, null);
+}
+function mouseout_controller(e) {
+  EVENT_CONTROLLER.call(this, e, "out", null, null);
+}
+function mouseover_controller(e) {
+  EVENT_CONTROLLER.call(this, e, "out", null, null);
+}
+const Mouse = target => new ZikoEventMouse(target);
+
+function wheel_controller(e) {
+  EVENT_CONTROLLER.call(this, e, "wheel", null, null);
+}
+class ZikoEventWheel extends ZikoEvent {
+  constructor(target) {
+    super(target);
+    this.event = null;
+    this.cache = {
+      prefixe: "",
+      preventDefault: {
+        wheel: false
+      },
+      paused: {
+        wheel: false
+      },
+      stream: {
+        enabled: {
+          wheel: false
+        },
+        clear: {
+          wheel: false
+        },
+        history: {
+          wheel: []
+        }
+      },
+      callbacks: {
+        click: []
+      }
+    };
+    this.__controller = {
+      wheel: wheel_controller.bind(this)
+    };
+  }
+  onWheel(...callbacks) {
+    this.__onEvent("wheel", {}, ...callbacks);
+    return this;
+  }
+}
+const Wheel = Target => new ZikoEventWheel(Target);
+
 function keydown_controller(e) {
   EVENT_CONTROLLER.call(this, e, "down", () => this.kd = e.key, {
     key: e.key,
@@ -3870,53 +4196,53 @@ class ZikoEventInput extends ZikoEvent {
 }
 const Input$1 = Target => new ZikoEventInput(Target);
 
-const custom_event_controller = event_name => function (e) {
-  EVENT_CONTROLLER.call(this, e, event_name, null, null);
-};
-class ZikoCustomEvent extends ZikoEvent {
+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: {},
-      paused: {},
+      preventDefault: {
+        hashchange: false
+      },
+      paused: {
+        hashchange: false
+      },
       stream: {
-        enabled: {},
-        clear: {},
-        history: {}
+        enabled: {
+          hashchange: false
+        },
+        clear: {
+          hashchange: false
+        },
+        history: {
+          hashchange: []
+        }
       },
-      callbacks: {}
+      callbacks: {
+        hashchange: []
+      }
+    };
+    this.__controller = {
+      hashchange: hashchange_controller.bind(this)
     };
-    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);
+  onChange(...callbacks) {
+    this.__onEvent("hashchange", {}, ...callbacks);
     return this;
   }
 }
-const CustomEvent = Target => new ZikoCustomEvent(Target);
+const HashEvent = Target => new ZikoEventHash(Target);
+
+const customEvent = Target => new customEvent();
 
 const Events = {
   Pointer,
+  Mouse,
+  Wheel,
   Key,
   Drag,
   Drop,
@@ -3924,7 +4250,8 @@ const Events = {
   Clipboard,
   Focus,
   Input: Input$1,
-  CustomEvent,
+  HashEvent,
+  customEvent,
   ExtractAll: function () {
     const keys = Object.keys(this);
     for (let i = 0; i < keys.length; i++) {
@@ -6101,7 +6428,8 @@ const Use = {
 
 class ZikoUIElement {
   constructor(element, name = "") {
-    this.target = globalThis.__Target__ || globalThis.document.body;
+    //this.target = globalThis.__Target__||globalThis.document.body;
+    this.target = globalThis.__ZikoConfig__.default.target || globalThis.document.body;
     if (typeof element === "string") element = globalThis.document.createElement(element);
     this.element = element;
     this.uuid = this.constructor.name + "-" + Random.string(10);
@@ -6111,18 +6439,16 @@ class ZikoUIElement {
       isRoot: false,
       isHidden: false,
       isFrozzen: false,
-      // transformMatrix:matrix([
-      //   [0,0,0],
-      //   [0,0,0],
-      //   [1,1,0]
-      // ]),
       style: ZikoStyle({}),
       attributes: {},
-      filters: {}
+      filters: {},
+      temp: {}
     };
     this.items = [];
     this.events = {
       ptr: null,
+      mouse: null,
+      Wheel: null,
       key: null,
       drag: null,
       drop: null,
@@ -6145,6 +6471,7 @@ class ZikoUIElement {
     });
     this.size("auto", "auto");
     globalThis.__UI__[this.cache.name]?.push(this);
+    this.render(globalThis.__ZikoConfig__.default.render);
   }
   get st() {
     return this.cache.style;
@@ -6167,7 +6494,7 @@ class ZikoUIElement {
       root = root.parent;
     }
   }
-  clone() {
+  clone(render = false) {
     // Not working For Table 
     const UI = new this.constructor();
     UI.__proto__ = this.__proto__;
@@ -6175,7 +6502,7 @@ class ZikoUIElement {
       const items = [...this.items].map(n => n.clone());
       UI.append(...items);
     } else UI.element = this.element.cloneNode(true);
-    return UI;
+    return UI.render(render);
   }
   style(styles, {
     target = "parent",
@@ -6351,10 +6678,13 @@ class ZikoUIElement {
     this.items.forEach(callback);
     return this;
   }
-  filter(condition_callback, if_callback, else_callback) {
+  where(condition_callback, if_callback, else_callback) {
     this.items.filter(condition_callback).forEach(if_callback);
     return this;
   }
+  filter(condition) {
+    return this.items.filter(condition);
+  }
   filterByTextContent(text, exactMatch = false) {
     this.items.map(n => n.render());
     this.items.filter(n => {
@@ -6408,6 +6738,41 @@ class ZikoUIElement {
     this.events.ptr.onOut(...callbacks);
     return this;
   }
+  onMouseMove(...callbacks) {
+    if (!this.events.mouse) this.events.mouse = Mouse(this);
+    this.events.mouse.onMove(...callbacks);
+    return this;
+  }
+  onMouseDown(...callbacks) {
+    if (!this.events.mouse) this.events.mouse = Mouse(this);
+    this.events.mouse.onDown(...callbacks);
+    return this;
+  }
+  onMouseUp(...callbacks) {
+    if (!this.events.mouse) this.events.mouse = Mouse(this);
+    this.events.mouse.onUp(...callbacks);
+    return this;
+  }
+  onMouseEnter(...callbacks) {
+    if (!this.events.mouse) this.events.mouse = Mouse(this);
+    this.events.mouse.onEnter(...callbacks);
+    return this;
+  }
+  onMouseLeave(...callbacks) {
+    if (!this.events.mouse) this.events.mouse = Mouse(this);
+    this.events.mouse.onLeave(...callbacks);
+    return this;
+  }
+  onMouseOut(...callbacks) {
+    if (!this.events.mouse) this.events.mouse = Mouse(this);
+    this.events.mouse.onOut(...callbacks);
+    return this;
+  }
+  onWheel(...callbacks) {
+    if (!this.events.wheel) this.events.wheel = Wheel(this);
+    this.events.wheel.onWheel(...callbacks);
+    return this;
+  }
   onKeyDown(...callbacks) {
     if (!this.events.key) this.events.key = Key(this);
     this.events.key.onDown(...callbacks);
@@ -6495,12 +6860,12 @@ class ZikoUIElement {
     return this;
   }
   on(event_name, ...callbacks) {
-    if (!this.events.custom) this.events.custom = CustomEvent(this);
+    if (!this.events.custom) this.events.custom = customEvent();
     this.events.custom.on(event_name, ...callbacks);
     return this;
   }
   emit(event_name, detail = {}) {
-    if (!this.events.custom) this.events.custom = CustomEvent(this);
+    if (!this.events.custom) this.events.custom = customEvent();
     this.events.custom.emit(event_name, detail);
     return this;
   }
@@ -6533,18 +6898,6 @@ class ZikoUIElement {
       isVisible: topVisible || bottomVisible || rightVisible || leftVisible
     };
   }
-
-  // toggleSlide() {}
-
-  // Glassmorphism(background = "rgba(255,255,255,0.1)", blur = "1px") {
-  //   this.style({ background: background, backdropFilter: blur });
-  //   return this;
-  // }
-  // Neumorphism(r = "50px", bg = "cyan", box = "13px -13px 49px #5d8fac") {
-  //   this.style({ borderRadius: r, background: bg, boxShadow: box });
-  //   return this;
-  // }
-
   setFullScreen(set = true, e) {
     if (!this.element.requestFullscreen) {
       console.error("Fullscreen API is not supported in this browser.");
@@ -6604,7 +6957,6 @@ class ZikoUIText extends ZikoUIElement {
     this.text = "";
     this.addValue(...value);
     this.st.display("inline-block");
-    this.render();
   }
   clear() {
     this.element.textContent = "";
@@ -6661,7 +7013,6 @@ class ZikoUIParagraphe extends ZikoUIElement {
       margin: 0,
       padding: 0
     });
-    this.render();
   }
   addValue(...value) {
     for (let i = 0; i < value.length; i++) {
@@ -6689,7 +7040,6 @@ class ZikoUIHeading extends ZikoUIElement {
     super(`h${type}`, `h${type}`);
     this.element = document.createElement("h" + type);
     this.element.textContent = value;
-    this.render();
   }
   get value() {
     return this.element.innerText;
@@ -6712,21 +7062,18 @@ const h6 = (text = "") => new ZikoUIHeading(6, text);
 
 class ZikoUIHtmlTag extends ZikoUIElement {
   constructor(element) {
-    super(element, "ZikoHtml");
-    this.render();
+    super(element, "html");
   }
 }
 class ZikoUIBr extends ZikoUIElement {
   constructor() {
     super("br", "br");
-    this.render();
     delete this.append;
   }
 }
 class ZikoUIHr extends ZikoUIElement {
   constructor() {
     super("hr", "hr");
-    this.render();
     delete this.append;
   }
 }
@@ -6734,7 +7081,6 @@ class ZikoUILink extends ZikoUIElement {
   constructor(href) {
     super("a", "link");
     this.setHref(href);
-    this.render();
   }
   setHref(href) {
     this.element.href = href;
@@ -6745,14 +7091,13 @@ const hr = () => new ZikoUIHr();
 const brs = (n = 1) => new Array(n).fill(new ZikoUIBr());
 const hrs = (n = 1) => new Array(n).fill(new ZikoUIHr());
 const link = (href, ...UIElement) => new ZikoUILink(href).append(...UIElement);
-const ZikoHtml = (tag, ...UIElement) => new ZikoUIHtmlTag(tag).append(...UIElement);
+const html = (tag, ...UIElement) => new ZikoUIHtmlTag(tag).append(...UIElement);
 
 class ZikoUILI extends ZikoUIElement {
   constructor(UI) {
     super();
     this.element = document.createElement("li");
     this.append(UI);
-    this.render();
   }
 }
 class ZikoUIList extends ZikoUIElement {
@@ -6836,7 +7181,6 @@ class ZikoUIOList extends ZikoUIList {
   constructor(...arr) {
     super("ol", "ol");
     this.append(...arr);
-    this.render();
   }
   type(tp = 1) {
     this.element.setAttribute("type", tp);
@@ -6851,7 +7195,6 @@ class ZikoUIUList extends ZikoUIList {
   constructor(...arr) {
     super("ul", "ul");
     this.append(...arr);
-    this.render();
   }
 }
 const li = UI => new ZikoUILI(UI);
@@ -6860,10 +7203,9 @@ const ul = (...arr) => new ZikoUIUList(...arr);
 
 class ZikoUIBtn extends ZikoUIElement {
   constructor(value = "button") {
-    super();
+    super("button", "btn");
     this.element = document.createElement("button");
     this.setValue(value);
-    this.render();
     this.st.cursor("pointer");
   }
   setValue(value) {
@@ -6909,7 +7251,6 @@ class ZikoUITextArea extends ZikoUIElement {
     super();
     this.element = document.createElement("textarea");
     //Object.assign(this,inputComposer.call(this));
-    this.render();
   }
   get value() {
     return this.element.textContent;
@@ -6929,7 +7270,6 @@ class ZikoUIInput extends ZikoUIElement {
     });
     this.setValue(value);
     if (datalist) this.linkDatalist(datalist);
-    this.render();
   }
   onInput(...callbacks) {
     if (!this.events.input) this.events.input = Input$1(this);
@@ -7038,7 +7378,6 @@ class ZikoUIInputNumber extends ZikoUIInput {
     super();
     this._setType("number");
     this.setMin(min).setMax(max).setStep(step);
-    this.render();
   }
   get value() {
     return +this.element.value;
@@ -7061,7 +7400,6 @@ class ZikoUIInputSlider extends ZikoUIInputNumber {
     super();
     this._setType("range");
     this.setMin(min).setMax(max).setValue(val).setStep(step);
-    this.render();
   }
 }
 class ZikoUIInputColor extends ZikoUIInput {
@@ -7069,7 +7407,6 @@ class ZikoUIInputColor extends ZikoUIInput {
     super();
     this._setType("color");
     this.background(this.value);
-    this.render();
     this.onInput(() => this.background(this.value));
   }
 }
@@ -7077,35 +7414,30 @@ class ZikoUIInputPassword extends ZikoUIInput {
   constructor() {
     super();
     this._setType("password");
-    this.render();
   }
 }
 class ZikoUIInputEmail extends ZikoUIInput {
   constructor() {
     super();
     this._setType("email");
-    this.render();
   }
 }
 class ZikoUIInputTime extends ZikoUIInput {
   constructor() {
     super();
     this._setType("time");
-    this.render();
   }
 }
 class ZikoUIInputDate extends ZikoUIInput {
   constructor() {
     super();
     this._setType("date");
-    this.render();
   }
 }
 class ZikoUIInputDateTime extends ZikoUIInput {
   constructor() {
     super();
     this._setType("datetime-local");
-    this.render();
   }
 }
 class ZikoUIInputCheckbox extends ZikoUIInput {
@@ -7181,7 +7513,6 @@ class ZikoUIInputDatalist extends ZikoUIElement {
     super();
     this.element = document.createElement("datalist");
     this.addOptions(...options).setId("ziko-datalist-id" + Random.string(10));
-    this.render();
   }
   addOptions(...options) {
     options.map(n => this.append(new ZikoUIInputOption(n)));
@@ -7240,7 +7571,6 @@ class ZikoUISelect extends ZikoUIElement {
   constructor() {
     super();
     this.element = document.createElement("select");
-    this.render();
   }
   addOptions(...options) {
     options.map(n => this.append(new ZikoUIInputOption(n)));
@@ -7261,7 +7591,6 @@ class ZikoUIImage extends ZikoUIElement {
       width: w,
       height: h
     });
-    this.render();
   }
   updateSrc(url) {
     this.value = url;
@@ -7289,7 +7618,6 @@ class ZikoUIFigure extends ZikoUIElement {
     this.caption.append(caption.element);
     this.element.append(this.img);
     this.element.append(this.caption);
-    this.render();
   }
 }
 const figure = (image, caption) => new ZikoUIFigure(image, caption);
@@ -7304,7 +7632,9 @@ class ZikoUIVideo extends ZikoUIElement {
       width: w,
       height: h
     });
-    this.render();
+  }
+  get t() {
+    return this.element.currentTime;
   }
   useControls(enabled = true) {
     this.element.controls = enabled;
@@ -7326,6 +7656,12 @@ class ZikoUIVideo extends ZikoUIElement {
     this.element.requestPictureInPicture(e);
     return this;
   }
+  seekTo(time) {
+    this.element.currentTime = time;
+    return this;
+  }
+  onPlay() {}
+  onPause() {}
 }
 const video = (src, width, height) => new ZikoUIVideo(src, width, height);
 
@@ -7333,8 +7669,10 @@ class ZikoUIAudio extends ZikoUIElement {
   constructor(src) {
     super("audio", "audio");
     this.element.setAttribute("src", src);
-    this.render();
-    this.controls();
+    this.useControls();
+  }
+  get t() {
+    return this.element.currentTime;
   }
   useControls(enabled = true) {
     this.element.controls = enabled;
@@ -7348,6 +7686,12 @@ class ZikoUIAudio extends ZikoUIElement {
     this.element.pause();
     return this;
   }
+  seekTo(time) {
+    this.element.currentTime = time;
+    return this;
+  }
+  onPlay() {}
+  onPause() {}
 }
 const audio = src => new ZikoUIAudio(src);
 
@@ -7378,32 +7722,8 @@ class ZikoUIWebcame extends ZikoUIVideo {
 }
 const inputCamera = () => new ZikoUIWebcame();
 
-function set_vertical(direction) {
-  direction == 1 ? this.style({
-    flexDirection: "column"
-  }) : direction == -1 && this.style({
-    flexDirection: "column-reverse"
-  });
-  return this;
-}
-function set_horizontal(direction) {
-  direction == 1 ? this.style({
-    flexDirection: "row"
-  }) : direction == -1 && this.style({
-    flexDirection: "row-reverse"
-  });
-  return this;
-}
-function map_pos_x(align) {
-  let pos = ["flex-start", "center", "flex-end"];
-  if (typeof align === "number") align = pos[align + 1];
-  return align;
-}
-function map_pos_y(align) {
-  return map_pos_x(-align);
-}
 class ZikoUIFlex extends ZikoUIElement {
-  constructor(tag, w = "100%", h = "100%") {
+  constructor(tag = "div", w = "100%", h = "100%") {
     super(tag, "Flex");
     this.direction = "cols";
     if (typeof w == "number") w += "%";
@@ -7493,6 +7813,30 @@ const Flex = (...ZikoUIElement) => {
   }
   return new ZikoUIFlex(tag).append(...ZikoUIElement);
 };
+function set_vertical(direction) {
+  direction == 1 ? this.style({
+    flexDirection: "column"
+  }) : direction == -1 && this.style({
+    flexDirection: "column-reverse"
+  });
+  return this;
+}
+function set_horizontal(direction) {
+  direction == 1 ? this.style({
+    flexDirection: "row"
+  }) : direction == -1 && this.style({
+    flexDirection: "row-reverse"
+  });
+  return this;
+}
+function map_pos_x(align) {
+  let pos = ["flex-start", "center", "flex-end"];
+  if (typeof align === "number") align = pos[align + 1];
+  return align;
+}
+function map_pos_y(align) {
+  return map_pos_x(-align);
+}
 
 class ZikoUIGrid extends ZikoUIElement {
   constructor(tag = "div", w = "50vw", h = "50vh") {
@@ -7537,7 +7881,7 @@ const Grid$1 = (...ZikoUIElement) => new ZikoUIGrid("div").append(...ZikoUIEleme
 class ZikoUIAccordion extends ZikoUIElement {
   constructor(summary, content, icon = "😁") {
     super("details", "Accordion");
-    this.summary = ZikoHtml("summary", summary).style({
+    this.summary = html("summary", summary).style({
       fontSize: "1.1em",
       padding: "0.625rem",
       fontWeight: "bold",
@@ -7689,7 +8033,7 @@ class ZikoUICodeNote extends ZikoUIFlex {
 }
 const CodeNote = () => new ZikoUICodeNote();
 
-const Input = (codeText = "") => ZikoHtml("code", codeText).style({
+const Input = (codeText = "") => html("code", codeText).style({
   width: "100%",
   height: "auto",
   padding: "10px",
@@ -7703,7 +8047,7 @@ const Input = (codeText = "") => ZikoHtml("code", codeText).style({
   background: "#f6f8fa",
   color: "#0062C3"
 }).setAttr("contenteditable", true).setAttr("spellcheck", false);
-const Output = () => ZikoHtml("output").style({
+const Output = () => html("output").style({
   width: "100%",
   height: "auto",
   padding: "5px 0"
@@ -7727,7 +8071,7 @@ const BTN_STYLE = {
 const Right = ctx => Flex(text$1('▶️').style(BTN_STYLE).onClick(e => {
   if (ctx.parent instanceof ZikoUICodeNote) ctx.parent.setCurrentNote(ctx);
   ctx.execute();
-  globalThis.__Target__ = e.target.parent.parent[1][1];
+  globalThis.__ZikoConfig__.default.target = e.target.parent.parent[1][1];
 }), text$1('📋').style(BTN_STYLE).onClick(() => {
   navigator.clipboard.writeText(ctx.codeText);
 }), text$1('✖️').style(BTN_STYLE).onClick(() => ctx.remove()), text$1('✖️').style(BTN_STYLE).onClick(() => ctx.remove())).style({
@@ -7859,7 +8203,7 @@ class ZikoUICodeCell extends ZikoUIFlex {
   #evaluateMd() {}
   #evaluateHtml() {}
   evaluate(order) {
-    globalThis.__Target__ = this.Output.element;
+    globalThis.__ZikoConfig__.default.target = this.Output.element;
     switch (this.cache.type) {
       case "js":
         this.#evaluateJs(order);
@@ -7996,19 +8340,16 @@ const Tabs = (Controllers, Contents) => new ZikoUITabs(Controllers, Contents);
 class ZikoUIMain extends ZikoUIElement {
   constructor() {
     super("main", "Main");
-    this.render();
   }
 }
 class ZikoUIHeader extends ZikoUIElement {
   constructor() {
     super("header", "Header");
-    this.render();
   }
 }
 class ZikoUINav extends ZikoUIElement {
   constructor() {
     super("nav", "Nav");
-    this.render();
   }
 }
 class ZikoUISection extends ZikoUIElement {
@@ -8017,26 +8358,22 @@ class ZikoUISection extends ZikoUIElement {
     this.style({
       position: "relative"
     });
-    this.render();
   }
 }
 class ZikoUIArticle extends ZikoUIElement {
   constructor() {
     super("article", "Article");
-    this.render();
   }
 }
 class ZikoUIAside extends ZikoUIElement {
   constructor() {
     super("aside", "Aside");
-    this.render();
   }
 }
 class ZikoUIFooter extends ZikoUIElement {
   constructor() {
     super("footer", "Footer");
     this.element = document.createElement("footer");
-    this.render();
   }
 }
 const Section$1 = (...ZikoUIElement) => new ZikoUISection().append(...ZikoUIElement);
@@ -8127,7 +8464,6 @@ class ZikoUITable extends ZikoUIElement {
     };
     if (body) this.fromMatrix(body);
     if (caption) this.setCaption(caption);
-    this.render();
   }
   get caption() {
     return this.structure.caption;
@@ -8226,7 +8562,7 @@ class ZikoUITable extends ZikoUIElement {
 const Table = (matrix, config) => new ZikoUITable(matrix, config);
 
 const UI$1 = {
-  ZikoHtml,
+  html,
   text: text$1,
   p,
   h1,
@@ -8957,7 +9293,7 @@ class ZikoUICanvas extends ZikoUIElement {
     });
     this.transformMatrix = new Matrix([[1, 0, 0], [0, 1, 0], [0, 0, 1]]);
     this.axisMatrix = new Matrix([[-10, -10], [10, 10]]);
-    this.render();
+    this.render(globalThis.__ZikoConfig__.default.render);
     setTimeout(() => this.resize(w, h), 0);
     this.on("sizeupdated", () => this.adjust());
   }
@@ -9453,8 +9789,20 @@ const SPA = (root_UI, routes, patterns) => new ZikoSPA(root_UI, routes, patterns
 
 const __init__ = () => document.documentElement.setAttribute("data-engine", "zikojs");
 
-var __Target__ = null;
-if (globalThis?.document?.body) __Target__ = document.body;
+// var __Target__=null;
+// if(globalThis?.document?.body)__Target__=document.body;
+const __ZikoConfig__ = {
+  default: {
+    target: null,
+    render: true
+  },
+  setDefault: function (pairs) {
+    const keys = Object.keys(pairs);
+    const values = Object.values(pairs);
+    for (let i = 0; i < keys.length; i++) this.default[keys[i]] = values[i];
+  },
+  init: () => document.documentElement.setAttribute("data-engine", "zikojs")
+};
 
 class ZikoSeo {
   constructor(app) {
@@ -9506,11 +9854,14 @@ class ZikoUIApp extends ZikoUIFlex {
     this.head = null;
     this.#init();
     this.seo = Seo(this);
+    Object.assign(this.events, {
+      hash: null
+    });
     Object.assign(this.cache, {
       theme: null,
       isRoot: true
     });
-    this.render();
+    this.render(globalThis.__ZikoConfig__.default.render);
   }
   #init() {
     this.root.setAttribute("data-engine", "zikojs");
@@ -9527,6 +9878,11 @@ class ZikoUIApp extends ZikoUIFlex {
   }
   prefetch() {}
   description() {}
+  onHashChange(...callbacks) {
+    if (!this.events.hash) this.events.hash = HashEvent(this);
+    this.events.hash.onChange(...callbacks);
+    return this;
+  }
 }
 const App = (...UIElement) => new ZikoUIApp().append(...UIElement);
 
@@ -9543,7 +9899,7 @@ const Ziko = {
 };
 globalThis.__Ziko__ = Ziko;
 globalThis.__UI__ = __UI__;
-globalThis.__Target__ = __Target__;
+globalThis.__ZikoConfig__ = __ZikoConfig__;
 function ExtractAll() {
   UI$1.ExtractAll();
   Math$1.ExtractAll();
@@ -9564,4 +9920,4 @@ function RemoveAll() {
   Data.RemoveAll();
 }
 
-export { Accordion, App, Article, Aside, Base, Canvas, Carousel, CodeCell, CodeNote, Combinaison, Complex, DarkThemes, Data, E, EPSILON, Ease, Events, ExtractAll, Fixed, Flex, Footer, Graphics, Grid$1 as Grid, Header, LightThemes, LinearSystem, Logic$1 as Logic, Main, Math$1 as Math, Matrix, Nav, PI, Permutation, Random, RemoveAll, SPA, Section$1 as Section, Signal, Svg, Table, Tabs, Themes, Time, UI$1 as UI, Utils, ZikoHtml, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBr, ZikoUICanvas, ZikoUICodeNote, ZikoUIElement, ZikoUIFigure, ZikoUIFooter, ZikoUIHeader, ZikoUIHr, ZikoUIHtmlTag, ZikoUIImage, ZikoUILink, ZikoUIMain, ZikoUINav, ZikoUISection, ZikoUISvg, ZikoUIVideo, __init__, abs, accum, acos, acosh, acot, add, animation, arange, asin, asinh, atan, atan2, atanh, audio, bessel, beta, br, brs, btn, canvasArc, canvasCircle, canvasLine, canvasPoints, canvasRect, cartesianProduct, ceil, checkbox, choleskyDecomposition, clamp, complex, cos, cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, datalist, Ziko as default, deg2rad, div, e, fact, figure, floor, gamma, geomspace, h1, h2, h3, h4, h5, h6, hr, hrs, hypot, image, inRange, input, inputCamera, inputColor, inputDate, inputDateTime, inputEmail, inputImage, inputNumber, inputPassword, inputTime, isApproximatlyEqual, json2arr, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, li, link, linspace, ln, logspace, loop, luDecomposition, map, mapfun, markdown2html, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, ol, ones, p, pgcd, pow, powerSet, ppcm, prod, qrDecomposition, rad2deg, radio, round, search, sec, select, sig, sign, sin, sinc, sinh, slider, sqrt, sqrtn, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, svgCircle, svgEllipse, svgGroupe, svgImage, svgLine, svgPolygon, svgRect, svgText, tan, tanh, text$1 as text, textarea, timeTaken, time_memory_Taken, ul, useDebounce, useThrottle, video, wait, waitForUIElm, waitForUIElmSync, zeros };
+export { Accordion, App, Article, Aside, Base, Canvas, Carousel, CodeCell, CodeNote, Combinaison, Complex, DarkThemes, Data, E, EPSILON, Ease, Events, ExtractAll, Fixed, Flex, Footer, Graphics, Grid$1 as Grid, Header, LightThemes, LinearSystem, Logic$1 as Logic, Main, Math$1 as Math, Matrix, Nav, PI, Permutation, Random, RemoveAll, SPA, Section$1 as Section, Signal, Svg, Table, Tabs, Themes, Time, UI$1 as UI, Utils, ZikoUIArticle, ZikoUIAside, ZikoUIAudio, ZikoUIBr, ZikoUICanvas, ZikoUICodeNote, ZikoUIElement, ZikoUIFigure, ZikoUIFooter, ZikoUIHeader, ZikoUIHr, ZikoUIHtmlTag, ZikoUIImage, ZikoUILink, ZikoUIMain, ZikoUINav, ZikoUISection, ZikoUISvg, ZikoUIVideo, __ZikoConfig__, __init__, abs, accum, acos, acosh, acot, add, animation, arange, asin, asinh, atan, atan2, atanh, audio, bessel, beta, br, brs, btn, canvasArc, canvasCircle, canvasLine, canvasPoints, canvasRect, cartesianProduct, ceil, checkbox, choleskyDecomposition, clamp, complex, cos, cosh, cot, coth, csc, csv2arr, csv2json, csv2matrix, csv2object, csv2sql, datalist, Ziko as default, deg2rad, div, e, fact, figure, floor, gamma, geomspace, h1, h2, h3, h4, h5, h6, hr, hrs, html, hypot, image, inRange, input, inputCamera, inputColor, inputDate, inputDateTime, inputEmail, inputImage, inputNumber, inputPassword, inputTime, isApproximatlyEqual, json2arr, json2csv, json2csvFile, json2xml, json2xmlFile, json2yml, json2ymlFile, lerp, li, link, linspace, ln, logspace, loop, luDecomposition, map, mapfun, markdown2html, matrix, matrix2, matrix3, matrix4, max, min, modulo, mul, norm, nums, ol, ones, p, pgcd, pow, powerSet, ppcm, prod, qrDecomposition, rad2deg, radio, round, search, sec, select, sig, sign, sin, sinc, sinh, slider, sqrt, sqrtn, sub, subSet, sum, svg2ascii, svg2img, svg2imgUrl, svg2str, svgCircle, svgEllipse, svgGroupe, svgImage, svgLine, svgPolygon, svgRect, svgText, tan, tanh, text$1 as text, textarea, timeTaken, time_memory_Taken, ul, useDebounce, useThrottle, video, wait, waitForUIElm, waitForUIElmSync, zeros };