ziko 0.0.2 → 0.0.5

package/dist/ziko.cjs

@@ -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
@@ -3384,6 +3384,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,
@@ -3874,53 +4200,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,
@@ -3928,7 +4254,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++) {
@@ -6105,7 +6432,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);
@@ -6115,18 +6443,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,
@@ -6149,6 +6475,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;
@@ -6171,7 +6498,7 @@ class ZikoUIElement {
       root = root.parent;
     }
   }
-  clone() {
+  clone(render = false) {
     // Not working For Table 
     const UI = new this.constructor();
     UI.__proto__ = this.__proto__;
@@ -6179,7 +6506,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",
@@ -6355,10 +6682,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 => {
@@ -6412,6 +6742,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);
@@ -6499,12 +6864,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;
   }
@@ -6537,18 +6902,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.");
@@ -6608,7 +6961,6 @@ class ZikoUIText extends ZikoUIElement {
     this.text = "";
     this.addValue(...value);
     this.st.display("inline-block");
-    this.render();
   }
   clear() {
     this.element.textContent = "";
@@ -6665,7 +7017,6 @@ class ZikoUIParagraphe extends ZikoUIElement {
       margin: 0,
       padding: 0
     });
-    this.render();
   }
   addValue(...value) {
     for (let i = 0; i < value.length; i++) {
@@ -6693,7 +7044,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;
@@ -6716,21 +7066,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;
   }
 }
@@ -6738,7 +7085,6 @@ class ZikoUILink extends ZikoUIElement {
   constructor(href) {
     super("a", "link");
     this.setHref(href);
-    this.render();
   }
   setHref(href) {
     this.element.href = href;
@@ -6749,14 +7095,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 {
@@ -6840,7 +7185,6 @@ class ZikoUIOList extends ZikoUIList {
   constructor(...arr) {
     super("ol", "ol");
     this.append(...arr);
-    this.render();
   }
   type(tp = 1) {
     this.element.setAttribute("type", tp);
@@ -6855,7 +7199,6 @@ class ZikoUIUList extends ZikoUIList {
   constructor(...arr) {
     super("ul", "ul");
     this.append(...arr);
-    this.render();
   }
 }
 const li = UI => new ZikoUILI(UI);
@@ -6864,10 +7207,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) {
@@ -6913,7 +7255,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;
@@ -6933,7 +7274,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);
@@ -7042,7 +7382,6 @@ class ZikoUIInputNumber extends ZikoUIInput {
     super();
     this._setType("number");
     this.setMin(min).setMax(max).setStep(step);
-    this.render();
   }
   get value() {
     return +this.element.value;
@@ -7065,7 +7404,6 @@ class ZikoUIInputSlider extends ZikoUIInputNumber {
     super();
     this._setType("range");
     this.setMin(min).setMax(max).setValue(val).setStep(step);
-    this.render();
   }
 }
 class ZikoUIInputColor extends ZikoUIInput {
@@ -7073,7 +7411,6 @@ class ZikoUIInputColor extends ZikoUIInput {
     super();
     this._setType("color");
     this.background(this.value);
-    this.render();
     this.onInput(() => this.background(this.value));
   }
 }
@@ -7081,35 +7418,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 {
@@ -7185,7 +7517,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)));
@@ -7244,7 +7575,6 @@ class ZikoUISelect extends ZikoUIElement {
   constructor() {
     super();
     this.element = document.createElement("select");
-    this.render();
   }
   addOptions(...options) {
     options.map(n => this.append(new ZikoUIInputOption(n)));
@@ -7265,7 +7595,6 @@ class ZikoUIImage extends ZikoUIElement {
       width: w,
       height: h
     });
-    this.render();
   }
   updateSrc(url) {
     this.value = url;
@@ -7293,7 +7622,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);
@@ -7308,7 +7636,9 @@ class ZikoUIVideo extends ZikoUIElement {
       width: w,
       height: h
     });
-    this.render();
+  }
+  get t() {
+    return this.element.currentTime;
   }
   useControls(enabled = true) {
     this.element.controls = enabled;
@@ -7330,6 +7660,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);
 
@@ -7337,8 +7673,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;
@@ -7352,6 +7690,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);
 
@@ -7382,32 +7726,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 += "%";
@@ -7497,6 +7817,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") {
@@ -7541,7 +7885,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",
@@ -7693,7 +8037,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",
@@ -7707,7 +8051,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"
@@ -7731,7 +8075,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({
@@ -7863,7 +8207,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);
@@ -8000,19 +8344,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 {
@@ -8021,26 +8362,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);
@@ -8131,7 +8468,6 @@ class ZikoUITable extends ZikoUIElement {
     };
     if (body) this.fromMatrix(body);
     if (caption) this.setCaption(caption);
-    this.render();
   }
   get caption() {
     return this.structure.caption;
@@ -8230,7 +8566,7 @@ class ZikoUITable extends ZikoUIElement {
 const Table = (matrix, config) => new ZikoUITable(matrix, config);
 
 const UI$1 = {
-  ZikoHtml,
+  html,
   text: text$1,
   p,
   h1,
@@ -8961,7 +9297,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());
   }
@@ -9457,8 +9793,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) {
@@ -9510,11 +9858,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");
@@ -9531,6 +9882,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);
 
@@ -9547,7 +9903,7 @@ const Ziko = {
 };
 globalThis.__Ziko__ = Ziko;
 globalThis.__UI__ = __UI__;
-globalThis.__Target__ = __Target__;
+globalThis.__ZikoConfig__ = __ZikoConfig__;
 function ExtractAll() {
   UI$1.ExtractAll();
   Math$1.ExtractAll();
@@ -9613,7 +9969,6 @@ exports.Themes = Themes;
 exports.Time = Time;
 exports.UI = UI$1;
 exports.Utils = Utils;
-exports.ZikoHtml = ZikoHtml;
 exports.ZikoUIArticle = ZikoUIArticle;
 exports.ZikoUIAside = ZikoUIAside;
 exports.ZikoUIAudio = ZikoUIAudio;
@@ -9633,6 +9988,7 @@ exports.ZikoUINav = ZikoUINav;
 exports.ZikoUISection = ZikoUISection;
 exports.ZikoUISvg = ZikoUISvg;
 exports.ZikoUIVideo = ZikoUIVideo;
+exports.__ZikoConfig__ = __ZikoConfig__;
 exports.__init__ = __init__;
 exports.abs = abs;
 exports.accum = accum;
@@ -9692,6 +10048,7 @@ exports.h5 = h5;
 exports.h6 = h6;
 exports.hr = hr;
 exports.hrs = hrs;
+exports.html = html;
 exports.hypot = hypot;
 exports.image = image;
 exports.inRange = inRange;