ziko 0.0.2 → 0.0.5

package/dist/ziko.js

@@ -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
@@ -3386,6 +3386,332 @@
   }
   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,
@@ -3876,53 +4202,53 @@
   }
   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,
@@ -3930,7 +4256,8 @@
     Clipboard,
     Focus,
     Input: Input$1,
-    CustomEvent,
+    HashEvent,
+    customEvent,
     ExtractAll: function () {
       const keys = Object.keys(this);
       for (let i = 0; i < keys.length; i++) {
@@ -6107,7 +6434,8 @@
 
   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);
@@ -6117,18 +6445,16 @@
         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,
@@ -6151,6 +6477,7 @@
       });
       this.size("auto", "auto");
       globalThis.__UI__[this.cache.name]?.push(this);
+      this.render(globalThis.__ZikoConfig__.default.render);
     }
     get st() {
       return this.cache.style;
@@ -6173,7 +6500,7 @@
         root = root.parent;
       }
     }
-    clone() {
+    clone(render = false) {
       // Not working For Table 
       const UI = new this.constructor();
       UI.__proto__ = this.__proto__;
@@ -6181,7 +6508,7 @@
         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",
@@ -6357,10 +6684,13 @@
       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 => {
@@ -6414,6 +6744,41 @@
       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);
@@ -6501,12 +6866,12 @@
       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;
     }
@@ -6539,18 +6904,6 @@
         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.");
@@ -6610,7 +6963,6 @@
       this.text = "";
       this.addValue(...value);
       this.st.display("inline-block");
-      this.render();
     }
     clear() {
       this.element.textContent = "";
@@ -6667,7 +7019,6 @@
         margin: 0,
         padding: 0
       });
-      this.render();
     }
     addValue(...value) {
       for (let i = 0; i < value.length; i++) {
@@ -6695,7 +7046,6 @@
       super(`h${type}`, `h${type}`);
       this.element = document.createElement("h" + type);
       this.element.textContent = value;
-      this.render();
     }
     get value() {
       return this.element.innerText;
@@ -6718,21 +7068,18 @@
 
   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;
     }
   }
@@ -6740,7 +7087,6 @@
     constructor(href) {
       super("a", "link");
       this.setHref(href);
-      this.render();
     }
     setHref(href) {
       this.element.href = href;
@@ -6751,14 +7097,13 @@
   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 {
@@ -6842,7 +7187,6 @@
     constructor(...arr) {
       super("ol", "ol");
       this.append(...arr);
-      this.render();
     }
     type(tp = 1) {
       this.element.setAttribute("type", tp);
@@ -6857,7 +7201,6 @@
     constructor(...arr) {
       super("ul", "ul");
       this.append(...arr);
-      this.render();
     }
   }
   const li = UI => new ZikoUILI(UI);
@@ -6866,10 +7209,9 @@
 
   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) {
@@ -6915,7 +7257,6 @@
       super();
       this.element = document.createElement("textarea");
       //Object.assign(this,inputComposer.call(this));
-      this.render();
     }
     get value() {
       return this.element.textContent;
@@ -6935,7 +7276,6 @@
       });
       this.setValue(value);
       if (datalist) this.linkDatalist(datalist);
-      this.render();
     }
     onInput(...callbacks) {
       if (!this.events.input) this.events.input = Input$1(this);
@@ -7044,7 +7384,6 @@
       super();
       this._setType("number");
       this.setMin(min).setMax(max).setStep(step);
-      this.render();
     }
     get value() {
       return +this.element.value;
@@ -7067,7 +7406,6 @@
       super();
       this._setType("range");
       this.setMin(min).setMax(max).setValue(val).setStep(step);
-      this.render();
     }
   }
   class ZikoUIInputColor extends ZikoUIInput {
@@ -7075,7 +7413,6 @@
       super();
       this._setType("color");
       this.background(this.value);
-      this.render();
       this.onInput(() => this.background(this.value));
     }
   }
@@ -7083,35 +7420,30 @@
     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 {
@@ -7187,7 +7519,6 @@
       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)));
@@ -7246,7 +7577,6 @@
     constructor() {
       super();
       this.element = document.createElement("select");
-      this.render();
     }
     addOptions(...options) {
       options.map(n => this.append(new ZikoUIInputOption(n)));
@@ -7267,7 +7597,6 @@
         width: w,
         height: h
       });
-      this.render();
     }
     updateSrc(url) {
       this.value = url;
@@ -7295,7 +7624,6 @@
       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);
@@ -7310,7 +7638,9 @@
         width: w,
         height: h
       });
-      this.render();
+    }
+    get t() {
+      return this.element.currentTime;
     }
     useControls(enabled = true) {
       this.element.controls = enabled;
@@ -7332,6 +7662,12 @@
       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);
 
@@ -7339,8 +7675,10 @@
     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;
@@ -7354,6 +7692,12 @@
       this.element.pause();
       return this;
     }
+    seekTo(time) {
+      this.element.currentTime = time;
+      return this;
+    }
+    onPlay() {}
+    onPause() {}
   }
   const audio = src => new ZikoUIAudio(src);
 
@@ -7384,32 +7728,8 @@
   }
   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 += "%";
@@ -7499,6 +7819,30 @@
     }
     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") {
@@ -7543,7 +7887,7 @@
   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",
@@ -7695,7 +8039,7 @@
   }
   const CodeNote = () => new ZikoUICodeNote();
 
-  const Input = (codeText = "") => ZikoHtml("code", codeText).style({
+  const Input = (codeText = "") => html("code", codeText).style({
     width: "100%",
     height: "auto",
     padding: "10px",
@@ -7709,7 +8053,7 @@
     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"
@@ -7733,7 +8077,7 @@
   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({
@@ -7865,7 +8209,7 @@
     #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);
@@ -8002,19 +8346,16 @@
   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 {
@@ -8023,26 +8364,22 @@
       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);
@@ -8133,7 +8470,6 @@
       };
       if (body) this.fromMatrix(body);
       if (caption) this.setCaption(caption);
-      this.render();
     }
     get caption() {
       return this.structure.caption;
@@ -8232,7 +8568,7 @@
   const Table = (matrix, config) => new ZikoUITable(matrix, config);
 
   const UI$1 = {
-    ZikoHtml,
+    html,
     text: text$1,
     p,
     h1,
@@ -8963,7 +9299,7 @@
       });
       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());
     }
@@ -9459,8 +9795,20 @@
 
   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) {
@@ -9512,11 +9860,14 @@
       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");
@@ -9533,6 +9884,11 @@
     }
     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);
 
@@ -9549,7 +9905,7 @@
   };
   globalThis.__Ziko__ = Ziko;
   globalThis.__UI__ = __UI__;
-  globalThis.__Target__ = __Target__;
+  globalThis.__ZikoConfig__ = __ZikoConfig__;
   function ExtractAll() {
     UI$1.ExtractAll();
     Math$1.ExtractAll();
@@ -9615,7 +9971,6 @@
   exports.Time = Time;
   exports.UI = UI$1;
   exports.Utils = Utils;
-  exports.ZikoHtml = ZikoHtml;
   exports.ZikoUIArticle = ZikoUIArticle;
   exports.ZikoUIAside = ZikoUIAside;
   exports.ZikoUIAudio = ZikoUIAudio;
@@ -9635,6 +9990,7 @@
   exports.ZikoUISection = ZikoUISection;
   exports.ZikoUISvg = ZikoUISvg;
   exports.ZikoUIVideo = ZikoUIVideo;
+  exports.__ZikoConfig__ = __ZikoConfig__;
   exports.__init__ = __init__;
   exports.abs = abs;
   exports.accum = accum;
@@ -9694,6 +10050,7 @@
   exports.h6 = h6;
   exports.hr = hr;
   exports.hrs = hrs;
+  exports.html = html;
   exports.hypot = hypot;
   exports.image = image;
   exports.inRange = inRange;