cradova 1.4.0 → 1.4.1

package/dist/index.js

@@ -1,761 +1,84 @@
-// lib/scripts/track.ts
-function cradovaDispatchTrack(nodes, state) {
-  for (let i = 0; i < nodes.length; i++) {
-    const element = nodes[i];
-    if (!element) {
-      continue;
-    }
-    if (typeof state === "object" && !Array.isArray(state)) {
-      for (const key in state) {
-        if (key === "style") {
-          for (const [k, v] of Object.entries(state[key])) {
-            if (typeof element.style[k] !== "undefined" && k !== "src") {
-              element.style[k] = v;
-            } else {
-              throw new Error(
-                "\u2718  Cradova err : " + k + " is not a valid css style property"
-              );
-            }
-          }
-          continue;
-        }
-        if (typeof element.style[key] !== "undefined" && key !== "src") {
-          element.style[key] = state[key];
-          continue;
-        }
-        if (typeof element[key] === "function") {
-          element[key](element);
-          continue;
-        }
-        if (key === "text") {
-          element.innerText = state[key];
-          continue;
-        }
-        if (key === "fullscreen") {
-          if (state[key]) {
-            fullScreen(element).set();
-          } else {
-            fullScreen(element).exist();
-          }
-          continue;
-        }
-        if (key === "class" && typeof state[key] === "string" && state[key] !== "") {
-          const classes = state[key].split(" ");
-          for (let i2 = 0; i2 < classes.length; i2++) {
-            if (classes[i2]) {
-              element.classList.add(classes[i2]);
-            }
-          }
-          continue;
-        }
-        if (key === "toggleclass" && state[key] !== "") {
-          element.classList.toggle(state[key]);
-          continue;
-        }
-        if (key === "removeclass" && state[key] !== "") {
-          element.classList.remove(state[key]);
-          continue;
-        }
-        if (key === "remove") {
-          if (element.parentElement) {
-            element.parentElement?.removeChild(element);
-          } else {
-            element.remove();
-          }
-          continue;
-        }
-        if (key.includes("$")) {
-          element.setAttribute("data-" + key.split("$")[1], state[key]);
-          continue;
-        }
-        if (key === "tree") {
-          if (typeof state[key] === "function") {
-            state[key] = state[key]();
-          } else {
-            throw new TypeError(
-              " \u2718  Cradova err: invalid tree element type, should be a single parent cradova element tree"
-            );
-          }
-          if (typeof state[key] === "function") {
-            state[key] = state[key]();
-          }
-          if (Array.isArray(state[key])) {
-            throw new TypeError(
-              " \u2718  Cradova err: invalid tree element type, should be a single parent cradova element tree"
-            );
-          }
-          if (!(state[key] instanceof HTMLElement)) {
-            console.error(
-              " \u2718  Cradova err:  wrong element type: can't update tree using " + state[key]
-            );
-            throw new TypeError(
-              " \u2718  Cradova err: invalid tree element type, should be a single parent cradova element tree"
-            );
-          }
-          element.innerHTML = "";
-          element.appendChild(state[key]);
-          continue;
-        }
-        try {
-          if (typeof element[key] !== "undefined") {
-            element[key] = state[key];
-          } else {
-            element[key] = state[key];
-            if (key !== "for" && key !== "text" && key !== "class" && !key.includes("aria")) {
-              console.error(" \u2718  Cradova err:  invalid html attribute " + key);
-            }
-          }
-        } catch (error) {
-          console.error(" \u2718  Cradova err: Cradova got ", state);
-          console.error(" \u2718  Cradova err:  ", error);
-        }
-      }
-    } else {
-      throw new TypeError(" \u2718  Cradova err:   invalid state object" + state);
-    }
-  }
-}
-function dispatch(stateID, state) {
-  let ele;
-  if (stateID instanceof HTMLElement) {
-    ele = stateID;
-  }
-  let updated = void 0;
-  if (typeof state === "undefined" && typeof stateID === "object" && !ele) {
-    for (const [id, eachState] of Object.entries(stateID)) {
-      const elements = document.querySelectorAll(
-        "[data-cra-id=" + id + "]"
-      );
-      updated = elements.length === 1 ? elements[0] : elements;
-      cradovaDispatchTrack(elements, eachState);
-    }
-  } else {
-    if (typeof stateID === "string") {
-      const elements = document.querySelectorAll(
-        "[data-cra-id=" + stateID + "]"
-      );
-      if (elements.length) {
-        updated = elements.length === 1 ? elements[0] : elements;
-        if (!state?.cradovaDispatchTrackBreak) {
-          cradovaDispatchTrack(elements, state);
-        }
-      }
-    }
-    if (ele) {
-      cradovaDispatchTrack([ele], state);
-    }
-  }
-  return updated;
-}
-
-// lib/scripts/fns.ts
-var cradovaAftermountEvent = new CustomEvent("cradova-aftermount");
-var err = function(errors, err2, type) {
-  for (let er = 0; er < errors.length; er++) {
-    console.error(" \u2718  Cradova err:  ", errors[er]);
-  }
-  if (!type) {
-    throw new Error(" \u2718  Cradova err:  " + err2);
-  } else {
-    throw new TypeError(" \u2718  Cradova err:  " + err2);
-  }
-};
-function uuid() {
-  let t = Date.now ? +Date.now() : +new Date();
-  return "cradova-id-xxxxxxxxxx".replace(/[x]/g, function(e) {
-    const r = (t + 16 * Math.random()) % 16 | 0;
-    return ("x" === e ? r : 7 & r | 8).toString(16);
-  });
-}
-function css(identifier, properties) {
-  if (typeof identifier === "string" && typeof properties === "undefined") {
-    let styTag = document.querySelector("style");
-    if (styTag !== null) {
-      identifier += styTag.textContent;
-      styTag.textContent = identifier;
-      return;
-    }
-    styTag = document.createElement("style");
-    styTag.textContent = identifier;
-    document.head.append(styTag);
-    return;
-  }
-  if (!properties) {
-    return;
-  }
-  const styS = "" + identifier + `{
-`;
-  const styE = `}
-`;
-  let style = "", totalStyle = "";
-  for (const [k, v] of Object.entries(properties)) {
-    style += "" + k + ": " + v + `;
-`;
-  }
-  let styleTag = document.querySelector("style");
-  if (styleTag !== null) {
-    totalStyle += styleTag.innerHTML;
-    totalStyle += styS + style + styE;
-    styleTag.innerHTML = totalStyle;
-    return;
-  }
-  styleTag = document.createElement("style");
-  totalStyle += styleTag.innerHTML + `
-
-`;
-  totalStyle += styS + style + styE;
-  styleTag.innerHTML = totalStyle;
-  document.head.append(styleTag);
-}
-function assert(condition, ...callback) {
-  if (condition) {
-    return callback;
-  }
-  return "";
-}
-function assertOr(condition, ifTrue, ifFalse) {
-  if (condition) {
-    return ifTrue;
-  }
-  return ifFalse;
-}
-var ls = {};
-ls.store = (name, value) => {
-  localStorage.setItem(name, JSON.stringify(value));
-};
-ls.retrieve = (name) => {
-  return localStorage.getItem(name);
-};
-ls.remove = (name) => {
-  localStorage.removeItem(name);
-};
-ls.getKey = (index) => {
-  return window.localStorage.key(index);
-};
-ls.clear = () => {
-  localStorage.clear();
-};
-function fullScreen(e) {
-  return {
-    set() {
-      e.requestFullscreen().catch((err2) => {
-        throw err2;
-      });
-    },
-    exist() {
-      document.exitFullscreen();
-    }
-  };
-}
-var Ref = class {
-  constructor(component) {
-    this.stateID = uuid();
-    this.rendered = false;
-    this.effects = [];
-    this.effectuate = null;
-    this.hasFirstStateUpdateRun = false;
-    this.component = component.bind(this);
-  }
-  render(data) {
-    const chtml = this.component(data);
-    if (typeof chtml !== "function") {
-      throw new Error(
-        " \u2718  Cradova err :  Invalid component type for cradova Ref, got  -  " + chtml
-      );
-    }
-    const element = chtml({ stateID: this.stateID });
-    if (!(element instanceof HTMLElement)) {
-      err(
-        [
-          `
-     \x1B[35m Exception: ref only  a function that returns cradova element or cradova element tree. \x1B[35m
-      
-      to track and debug this element add a
-      beforeMount or afterMount prop to the element
-      `
-        ],
-        `Cradova can't render component make sure it's a valid component`
-      );
-    }
-    const av = () => {
-      this.effector.apply(this);
-      window.removeEventListener("cradova-aftermount", av);
-    };
-    window.addEventListener("cradova-aftermount", av);
-    return () => element;
-  }
-  instance() {
-    return dispatch(this.stateID, {
-      cradovaDispatchTrackBreak: true
-    });
-  }
-  effect(fn) {
-    if (this.rendered) {
-      return;
-    }
-    fn = fn.bind(this);
-    this.effects.push(
-      new Promise(async (res, rej) => {
-        try {
-          await fn();
-          if (!this.hasFirstStateUpdateRun && this.effectuate) {
-            this.hasFirstStateUpdateRun = true;
-            await this.effectuate();
-          }
-          res(void 0);
-        } catch (error) {
-          rej(error);
-        }
-      })
-    );
-  }
-  async effector() {
-    await Promise.allSettled(this.effects);
-    this.rendered = true;
-    this.hasFirstStateUpdateRun = true;
-  }
-  updateState(data) {
-    if (!this.rendered) {
-      this.rendered = true;
-      async function updateState(data2) {
-        if (this.instance()) {
-          await this.Activate(data2);
-        } else {
-          setTimeout(updateState.bind(this, data2), 4);
-        }
-      }
-      this.effectuate = updateState.bind(this, data);
-    } else {
-      (async () => {
-        await this.Activate(data);
-      }).bind(this)();
-    }
-  }
-  async Activate(data) {
-    if (!data) {
-      return;
-    }
-    if (!this) {
-      console.error(
-        " \u2718  Cradova err:  Ref.updateState has is passed out of scope"
-      );
-      return;
-    }
-    const guy = dispatch(this.stateID, {
-      cradovaDispatchTrackBreak: true
-    });
-    if (!guy) {
-      return;
-    }
-    const chtml = this.component(data);
-    let element;
-    if (chtml instanceof HTMLElement) {
-      chtml.setAttribute("data-cra-id", this.stateID);
-      element = chtml;
-    } else {
-      element = chtml({ stateID: this.stateID });
-    }
-    try {
-      guy.insertAdjacentElement("beforebegin", element);
-      if (guy.parentElement) {
-        guy.parentElement.removeChild(guy);
-      } else {
-        guy.remove();
-      }
-    } catch (e0) {
-      console.error(e0);
-    }
-  }
-  remove() {
-    dispatch(this.stateID, { remove: true });
-  }
-};
-var frag = function(...children) {
-  const par = document.createDocumentFragment();
-  for (let i = 0; i < children.length; i++) {
-    if (typeof children[i] === "function") {
-      const a = children[i]();
-      if (typeof a === "function") {
-        const b = a();
-        if (b instanceof HTMLElement) {
-          par.append(b);
-        } else {
-          if (!(b instanceof HTMLElement)) {
-            console.error(" \u2718  Cradova err:   wrong element type" + b);
-            throw new TypeError(" \u2718  Cradova err:   invalid element");
-          }
-        }
-      } else {
-        if (a instanceof HTMLElement) {
-          par.append(a);
-        } else {
-          if (!(a instanceof HTMLElement)) {
-            console.error(" \u2718  Cradova err:   wrong element type" + a);
-            throw new TypeError(" \u2718  Cradova err:   invalid element");
-          }
-        }
-      }
-    } else {
-      console.error(" \u2718  Cradova err:   wrong element type" + children[i]);
-      throw new TypeError(" \u2718  Cradova err:   invalid element");
-    }
-  }
-  return par;
-};
-
-// lib/scripts/Screen.ts
-var Screen = class {
-  constructor(cradova_screen_initials) {
-    this.packed = false;
-    this.secondaryChildren = [];
-    this.template = document.createElement("div");
-    this.persist = true;
-    this.rendered = false;
-    this.hasFirstStateUpdateRun = false;
-    this.effects = [];
-    this.effectuate = null;
-    const { template, name, transition, persist } = cradova_screen_initials;
-    if (typeof template !== "function") {
-      throw new Error(
-        " \u2718  Cradova err: only functions that returns a cradova element is valid as screen"
-      );
-    }
-    this.html = template.bind(this);
-    this.name = name;
-    this.template.id = "cradova-screen-set";
-    this.transition = transition;
-    if (typeof persist === "boolean") {
-      this.persist = persist;
-    }
-  }
-  effect(fn) {
-    if (!this.rendered) {
-      this.effects.push(
-        new Promise(async (res, rej) => {
-          try {
-            res(await fn());
-          } catch (error) {
-            rej(error);
-          }
-        })
-      );
-    }
-  }
-  async effector() {
-    this.rendered = true;
-    await Promise.allSettled(this.effects);
-    if (!this.hasFirstStateUpdateRun && this.effectuate) {
-      this.hasFirstStateUpdateRun = true;
-      await this.effectuate();
-    }
-  }
-  updateState(data) {
-    if (!this.rendered) {
-      async function updateState(data2) {
-        this.data = data2;
-        await this.Activate(true);
-      }
-      this.effectuate = updateState.bind(this, data);
-    } else {
-      (async () => {
-        this.data = data;
-        await this.Activate(true);
-      }).bind(this)();
-    }
-  }
-  async package() {
-    if (typeof this.html === "function") {
-      let fuc = await this.html(this.data);
-      if (typeof fuc === "function") {
-        fuc = fuc();
-        if (!(fuc instanceof HTMLElement)) {
-          throw new Error(
-            " \u2718  Cradova err:   only parent with descendants is valid"
-          );
-        } else {
-          if (this.transition) {
-            this.template.classList.add("CRADOVA-UI-" + this.transition);
-          }
-          this.template.innerHTML = "";
-          this.template.appendChild(fuc);
-        }
-      }
-    }
-    if (!this.template.firstChild) {
-      throw new Error(
-        " \u2718  Cradova err:  no screen is rendered, may have been past wrongly."
-      );
-    }
-    if (this.secondaryChildren.length) {
-      this.template.append(this.secondaryChildren);
-    }
-  }
-  onActivate(cb) {
-    this.callBack = cb;
-  }
-  addChild(...addOns) {
-    this.secondaryChildren.push(frag(...addOns));
-  }
-  deActivate() {
-    if (this.transition) {
-      this.template.classList.remove("CRADOVA-UI-" + this.transition);
-    }
-    if (!this.persist) {
-      this.rendered = false;
-    }
-  }
-  async Activate(force) {
-    if (!this.persist) {
-      await this.package();
-      this.packed = true;
-    } else {
-      if (!this.packed) {
-        await this.package();
-        this.packed = true;
-      }
-    }
-    if (this.persist && force) {
-      await this.package();
-      this.packed = true;
-    }
-    document.title = this.name;
-    const doc = document.querySelector("[data-cra-id=cradova-app-wrapper]");
-    if (!doc) {
-      throw new Error(
-        " \u2718  Cradova err: Unable to render, cannot find cradova root [data-cra-id=cradova-app-wrapper]"
-      );
-    }
-    doc.innerHTML = "";
-    doc.appendChild(this.template);
-    if (!this.persist) {
-      this.packed = false;
-    }
-    if (doc?.firstChild?.firstChild?.afterMount) {
-      const c = doc?.firstChild;
-      await c?.firstChild.afterMount();
-      delete c?.firstChild.afterMount;
-    }
-    window.dispatchEvent(cradovaAftermountEvent);
-    await this.effector();
-    if (this.callBack) {
-      await this.callBack();
-    }
-    window.scrollTo(0, 0);
-  }
-};
-Screen.SCALE_IN = "SCALE-IN";
-Screen.SCALE_OUT = "SCALE-OUT";
-Screen.CIRCLE_IN = "CIRCLE-IN";
-Screen.CIRCLE_OUT = "CIRCLE-OUT";
-Screen.FADE_OUT = "FADE-OUT";
-Screen.FADE_IN = "FADE-IN";
-Screen.SLIDE_UP = "SLIDE-UP";
-Screen.SLIDE_DOWN = "SLIDE-DOWN";
-Screen.SLIDE_LEFT = "SLIDE-LEFT";
-Screen.SLIDE_RIGHT = "SLIDE-RIGHT";
-
-// lib/scripts/Router.ts
-var Router = {};
-var RouterBox = {};
-RouterBox["lastNavigatedRouteController"] = null;
-RouterBox["nextRouteController"] = null;
-RouterBox["lastNavigatedRoute"] = null;
-RouterBox["pageShow"] = null;
-RouterBox["pageHide"] = null;
-RouterBox["errorHandler"] = {};
-RouterBox["params"] = {};
-RouterBox["routes"] = {};
-var checker = (url) => {
-  if (RouterBox.routes[url]) {
-    return [RouterBox.routes[url], null];
-  }
-  for (const path in RouterBox.routes) {
-    if (!path.includes(":")) {
-      continue;
-    }
-    const urlFixtures = url.split("/");
-    const pathFixtures = path.split("/");
-    if (pathFixtures.length === urlFixtures.length) {
-      urlFixtures.shift();
-      pathFixtures.shift();
-      let isIt = true;
-      const routesParams = {};
-      for (let i = 0; i < pathFixtures.length; i++) {
-        if (!pathFixtures[i].includes(":") && path.includes(urlFixtures[i] + "/") && pathFixtures.indexOf(urlFixtures[i]) === pathFixtures.lastIndexOf(urlFixtures[i])) {
-          if (!isIt)
-            isIt = true;
-        } else {
-          if (pathFixtures[i].includes(":")) {
-            continue;
-          }
-          isIt = false;
-        }
-        if (!(pathFixtures.indexOf(urlFixtures[i]) === pathFixtures.lastIndexOf(urlFixtures[i]))) {
-          throw new Error(
-            " \u2718  Cradova err:  cradova router doesn't allow paths with multiple names"
-          );
-        }
-      }
-      if (isIt) {
-        for (let i = 0; i < pathFixtures.length; i++) {
-          if (pathFixtures[i].includes(":")) {
-            routesParams[pathFixtures[i].split(":")[1]] = urlFixtures[i];
-          }
-        }
-        routesParams.path = path;
-        return [RouterBox.routes[path], routesParams];
-      }
-    }
-  }
-  return [];
-};
-Router.route = function(path = "/", screen) {
-  if (!screen.Activate && screen.name) {
-    console.error(" \u2718  Cradova err:  not a valid screen  " + screen);
-    throw new Error(" \u2718  Cradova err:  Not a valid cradova screen component");
-  }
-  RouterBox.routes[path] = {
-    controller: (params, force) => screen.Activate(params, force),
-    packager: async (params) => await screen.package(params),
-    deactivate: () => {
-      screen.deActivate();
-    }
-  };
-};
-Router.navigate = function(href, data = null, force = false) {
-  if (typeof href !== "string") {
-    throw new TypeError(
-      " \u2718  Cradova err:  href must be a defined path but got " + href + " instead"
-    );
-  }
-  if (typeof data === "boolean") {
-    force = true;
-    data = null;
-  }
-  let route = null, params, link = null;
-  if (href.includes("://")) {
-    window.location.href = href;
-  } else {
-    if (href === window.location.pathname) {
-      return;
-    }
-    [route, params] = checker(href);
-    if (route) {
-      RouterBox["nextRouteController"] = route;
-      RouterBox.params.params = params || null;
-      RouterBox.params.data = data || null;
-      link = href;
-      RouterBox["pageHide"] && RouterBox["pageHide"](href + " :navigated");
-      window.history.pushState({}, "", link);
-      (async () => {
-        await RouterBox.router(null, force);
-      })();
-    }
-  }
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
 };
-RouterBox.router = async function(e, force = false) {
-  let url, route, params;
-  const Alink = e && e.target.tagName === "A" && e.target;
-  if (Alink) {
-    if (Alink.href.includes("#")) {
-      return;
-    }
-    if (Alink.href.includes("javascript")) {
-      return;
-    }
-    e.preventDefault();
-    url = new URL(Alink.href).pathname;
-  }
-  if (!url) {
-    url = window.location.pathname;
-  }
-  if (url === Router["lastNavigatedRoute"]) {
-    return;
-  }
-  if (RouterBox["nextRouteController"]) {
-    route = RouterBox["nextRouteController"];
-    RouterBox["nextRouteController"] = null;
-    params = RouterBox.params.params;
-    RouterBox.params.params = null;
-  } else {
-    [route, params] = checker(url);
+
+// lib/scripts/ajax.ts
+function Ajax(url, opts = {}) {
+  const { method, data, header, callbacks } = opts;
+  if (typeof url !== "string") {
+    throw new Error("\u2718  Cradova err : Ajax invalid url " + url);
   }
-  if (route) {
-    try {
-      RouterBox.params.event = e;
-      RouterBox.params.params = params || RouterBox.params.params || null;
-      RouterBox.params.data = RouterBox.params.data || null;
-      RouterBox["lastNavigatedRouteController"] && RouterBox["lastNavigatedRouteController"].deactivate();
-      await route.controller(force);
-      RouterBox["pageShow"] && RouterBox["pageShow"](url);
-      RouterBox["lastNavigatedRoute"] = url;
-      RouterBox["lastNavigatedRouteController"] = route;
-      RouterBox.params.params = null;
-    } catch (error) {
-      const errorHandler = RouterBox.errorHandler[params.path || "all"];
-      if (errorHandler) {
-        errorHandler(error);
+  return new Promise(function(resolve) {
+    const ajax = new XMLHttpRequest();
+    const formData = new FormData();
+    if (callbacks && typeof callbacks === "object") {
+      for (const [k, v] of Object.entries(callbacks)) {
+        if (typeof v === "function" && ajax[k]) {
+          ajax[k] = v;
+        }
       }
     }
-  } else {
-    if (RouterBox.routes["/404"]) {
-      RouterBox.routes["/404"].controller(RouterBox.params);
-    } else {
-      const errorHandler = RouterBox.errorHandler[params.path || "all"];
-      if (errorHandler) {
-        errorHandler(
-          " \u2718  Cradova err: route '" + url + "' does not exist and no '/404' route given!"
+    ajax.addEventListener("load", function() {
+      resolve(ajax.response);
+    });
+    if (data && typeof data === "object") {
+      for (const [k, v] of Object.entries(data)) {
+        let value = v;
+        if (typeof value === "object" && value && !value.name) {
+          value = JSON.stringify(value);
+        }
+        formData.set(k, value);
+      }
+    }
+    ajax.addEventListener("error", () => {
+      console.error(
+        "\u2718  Cradova Ajax err : ",
+        ajax.response || "ERR_INTERNET_DISCONNECTED"
+      );
+      if (!navigator.onLine) {
+        resolve(
+          JSON.stringify({
+            message: `the device is offline!`
+          })
         );
       } else {
-        console.error(
-          " \u2718  Cradova err: route '" + url + "' does not exist and no '/404' route given!"
+        resolve(
+          JSON.stringify({
+            message: `problem with the action, please try again!`
+          })
         );
       }
+    });
+    if (!method) {
+      ajax.open(data && typeof data === "object" ? "POST" : "GET", url, true);
+    } else {
+      ajax.open(method, url, true);
     }
-  }
-};
-Router["onPageShow"] = function(callback) {
-  if (typeof callback === "function") {
-    RouterBox["pageShow"] = callback;
-  } else {
-    throw new Error(
-      " \u2718  Cradova err:  callback for pageShow event is not a function"
-    );
-  }
-};
-Router["onPageHide"] = function(callback) {
-  if (typeof callback === "function") {
-    RouterBox["pageHide"] = callback;
-  } else {
-    throw new Error(
-      " \u2718  Cradova err:  callback for pageHide event is not a function"
-    );
-  }
-};
-Router.packageScreen = async function(path, data) {
-  if (!RouterBox.routes[path]) {
-    console.error(" \u2718  Cradova err:  no screen with path " + path);
-    throw new Error(" \u2718  Cradova err:  cradova err: Not a defined screen path");
-  }
-  await RouterBox.routes[path].packager(data);
-};
-Router.getParams = function() {
-  return RouterBox["params"];
-};
-Router["addErrorHandler"] = function(callback, path) {
-  if (typeof callback === "function") {
-    RouterBox["errorHandler"][path || "all"] = callback;
-  } else {
-    throw new Error(
-      " \u2718  Cradova err:  callback for ever event event is not a function"
-    );
-  }
-};
-window.addEventListener("pageshow", RouterBox.router);
-window.addEventListener("popstate", (e) => {
-  e.preventDefault();
-  RouterBox.router();
-});
+    if (header && typeof header === "object") {
+      Object.keys(header).forEach(function(key) {
+        ajax.setRequestHeader(key, header[key]);
+      });
+    }
+    ajax.send(formData);
+  });
+}
 
 // lib/scripts/createSignal.ts
 var createSignal = class {
@@ -922,130 +245,416 @@ var createSignal = class {
   }
 };
 
-// lib/scripts/simplestore.ts
-var simpleStore = class {
-  constructor(initial) {
-    this.ref = [];
-    this.value = null;
-    this.value = initial;
+// lib/scripts/fns.ts
+var cradovaAftermountEvent = new CustomEvent("cradova-aftermount");
+var err = function(errors, err2, type) {
+  for (let er = 0; er < errors.length; er++) {
+    console.error(" \u2718  Cradova err:  ", errors[er]);
   }
-  set(value, shouldRefRender) {
-    if (typeof value === "function") {
-      this.value = value(this.value);
-    } else {
-      this.value = value;
+  if (!type) {
+    throw new Error(" \u2718  Cradova err:  " + err2);
+  } else {
+    throw new TypeError(" \u2718  Cradova err:  " + err2);
+  }
+};
+function uuid() {
+  let t = Date.now ? +Date.now() : +new Date();
+  return "cradova-id-xxxxxxxxxx".replace(/[x]/g, function(e) {
+    const r = (t + 16 * Math.random()) % 16 | 0;
+    return ("x" === e ? r : 7 & r | 8).toString(16);
+  });
+}
+function css(identifier, properties) {
+  if (typeof identifier === "string" && typeof properties === "undefined") {
+    let styTag = document.querySelector("style");
+    if (styTag !== null) {
+      identifier += styTag.textContent;
+      styTag.textContent = identifier;
+      return;
     }
-    if (this.ref.length && shouldRefRender !== false) {
-      this.updateState();
+    styTag = document.createElement("style");
+    styTag.textContent = identifier;
+    document.head.append(styTag);
+    return;
+  }
+  if (!properties) {
+    return;
+  }
+  const styS = "" + identifier + `{
+`;
+  const styE = `}
+`;
+  let style = "", totalStyle = "";
+  for (const [k, v] of Object.entries(properties)) {
+    style += "" + k + ": " + v + `;
+`;
+  }
+  let styleTag = document.querySelector("style");
+  if (styleTag !== null) {
+    totalStyle += styleTag.innerHTML;
+    totalStyle += styS + style + styE;
+    styleTag.innerHTML = totalStyle;
+    return;
+  }
+  styleTag = document.createElement("style");
+  totalStyle += styleTag.innerHTML + `
+
+`;
+  totalStyle += styS + style + styE;
+  styleTag.innerHTML = totalStyle;
+  document.head.append(styleTag);
+}
+function assert(condition, ...callback) {
+  if (condition) {
+    return callback;
+  }
+  return "";
+}
+function assertOr(condition, ifTrue, ifFalse) {
+  if (condition) {
+    return ifTrue;
+  }
+  return ifFalse;
+}
+var ls = {};
+ls.store = (name, value) => {
+  localStorage.setItem(name, JSON.stringify(value));
+};
+ls.retrieve = (name) => {
+  return localStorage.getItem(name);
+};
+ls.remove = (name) => {
+  localStorage.removeItem(name);
+};
+ls.getKey = (index) => {
+  return window.localStorage.key(index);
+};
+ls.clear = () => {
+  localStorage.clear();
+};
+function fullScreen(e) {
+  return {
+    set() {
+      e.requestFullscreen().catch((err2) => {
+        throw err2;
+      });
+    },
+    exist() {
+      document.exitFullscreen();
+    }
+  };
+}
+var Ref = class {
+  constructor(component) {
+    this.stateID = uuid();
+    this.rendered = false;
+    this.effects = [];
+    this.effectuate = null;
+    this.hasFirstStateUpdateRun = false;
+    this.component = component.bind(this);
+  }
+  render(data) {
+    const chtml = this.component(data);
+    if (typeof chtml !== "function") {
+      throw new Error(
+        " \u2718  Cradova err :  Invalid component type for cradova Ref, got  -  " + chtml
+      );
+    }
+    const element = chtml({ stateID: this.stateID });
+    if (!(element instanceof HTMLElement)) {
+      err(
+        [
+          `
+     \x1B[35m Exception: ref only  a function that returns cradova element or cradova element tree. \x1B[35m
+      
+      to track and debug this element add a
+      beforeMount or afterMount prop to the element
+      `
+        ],
+        `Cradova can't render component make sure it's a valid component`
+      );
     }
+    const av = () => {
+      this.effector.apply(this);
+      window.removeEventListener("cradova-aftermount", av);
+    };
+    window.addEventListener("cradova-aftermount", av);
+    return () => element;
   }
-  bind(prop) {
-    if (typeof this.value === "object" && typeof this.value[prop] !== "undefined") {
-      return [this, prop];
-    } else {
-      throw new Error(
-        "\u2718  Cradova err : can't bind an unavailable property!  " + prop
-      );
+  instance() {
+    return dispatch(this.stateID, {
+      cradovaDispatchTrackBreak: true
+    });
+  }
+  effect(fn) {
+    if (this.rendered) {
+      return;
     }
+    fn = fn.bind(this);
+    this.effects.push(
+      new Promise((res, rej) => __async(this, null, function* () {
+        try {
+          yield fn();
+          if (!this.hasFirstStateUpdateRun && this.effectuate) {
+            this.hasFirstStateUpdateRun = true;
+            yield this.effectuate();
+          }
+          res(void 0);
+        } catch (error) {
+          rej(error);
+        }
+      }))
+    );
   }
-  updateState(name) {
-    if (name) {
-      const entry = this.ref.find((ent) => ent.prop === name);
-      if (entry) {
-        entry.ref.updateState({ [entry.key]: this.value[entry.prop] });
+  effector() {
+    return __async(this, null, function* () {
+      yield Promise.allSettled(this.effects);
+      this.rendered = true;
+      this.hasFirstStateUpdateRun = true;
+    });
+  }
+  updateState(data) {
+    if (!this.rendered) {
+      this.rendered = true;
+      function updateState(data2) {
+        return __async(this, null, function* () {
+          if (this.instance()) {
+            yield this.Activate(data2);
+          } else {
+            setTimeout(updateState.bind(this, data2), 4);
+          }
+        });
       }
+      this.effectuate = updateState.bind(this, data);
     } else {
-      for (let i = 0; i < this.ref.length; i++) {
-        const entry = this.ref[i];
-        entry.ref.updateState({ [entry.key]: this.value[entry.prop] });
-      }
+      (() => __async(this, null, function* () {
+        yield this.Activate(data);
+      })).bind(this)();
     }
   }
-  setKey(name, value, shouldRefRender) {
-    if (typeof this.value === "object" && !Array.isArray(this.value)) {
-      if (typeof value === "function") {
-        this.value[name] = value(this.value);
+  Activate(data) {
+    return __async(this, null, function* () {
+      if (!data) {
+        return;
+      }
+      if (!this) {
+        console.error(
+          " \u2718  Cradova err:  Ref.updateState has is passed out of scope"
+        );
+        return;
+      }
+      const guy = dispatch(this.stateID, {
+        cradovaDispatchTrackBreak: true
+      });
+      if (!guy) {
+        return;
+      }
+      const chtml = this.component(data);
+      let element;
+      if (chtml instanceof HTMLElement) {
+        chtml.setAttribute("data-cra-id", this.stateID);
+        element = chtml;
       } else {
-        this.value[name] = value;
+        element = chtml({ stateID: this.stateID });
       }
-      if (this.ref.length && shouldRefRender !== false) {
-        this.updateState(name);
+      try {
+        guy.insertAdjacentElement("beforebegin", element);
+        if (guy.parentElement) {
+          guy.parentElement.removeChild(guy);
+        } else {
+          guy.remove();
+        }
+      } catch (e0) {
+        console.error(e0);
       }
-    }
+    });
   }
-  bindRef(ref, key, prop) {
-    if (ref && ref.updateState && prop) {
-      this.ref.push({ prop, ref, key });
-      if (ref.reader) {
-        ref.render = ref.render.bind(ref, this.value);
+  remove() {
+    dispatch(this.stateID, { remove: true });
+  }
+};
+var frag = function(...children) {
+  const par = document.createDocumentFragment();
+  for (let i = 0; i < children.length; i++) {
+    if (typeof children[i] === "function") {
+      const a = children[i]();
+      if (typeof a === "function") {
+        const b = a();
+        if (b instanceof HTMLElement) {
+          par.append(b);
+        } else {
+          if (!(b instanceof HTMLElement)) {
+            console.error(" \u2718  Cradova err:   wrong element type" + b);
+            throw new TypeError(" \u2718  Cradova err:   invalid element");
+          }
+        }
+      } else {
+        if (a instanceof HTMLElement) {
+          par.append(a);
+        } else {
+          if (!(a instanceof HTMLElement)) {
+            console.error(" \u2718  Cradova err:   wrong element type" + a);
+            throw new TypeError(" \u2718  Cradova err:   invalid element");
+          }
+        }
       }
     } else {
-      throw new Error(
-        "\u2718  Cradova err :  Invalid parameters for binding ref to simple store"
-      );
+      console.error(" \u2718  Cradova err:   wrong element type" + children[i]);
+      throw new TypeError(" \u2718  Cradova err:   invalid element");
     }
   }
+  return par;
 };
 
-// lib/scripts/ajax.ts
-function Ajax(url, opts = {}) {
-  const { method, data, header, callbacks } = opts;
-  if (typeof url !== "string") {
-    throw new Error("\u2718  Cradova err : Ajax invalid url " + url);
-  }
-  return new Promise(function(resolve) {
-    const ajax = new XMLHttpRequest();
-    const formData = new FormData();
-    if (callbacks && typeof callbacks === "object") {
-      for (const [k, v] of Object.entries(callbacks)) {
-        if (typeof v === "function" && ajax[k]) {
-          ajax[k] = v;
-        }
-      }
+// lib/scripts/track.ts
+function cradovaDispatchTrack(nodes, state) {
+  var _a;
+  for (let i = 0; i < nodes.length; i++) {
+    const element = nodes[i];
+    if (!element) {
+      continue;
     }
-    ajax.addEventListener("load", function() {
-      resolve(ajax.response);
-    });
-    if (data && typeof data === "object") {
-      for (const [k, v] of Object.entries(data)) {
-        let value = v;
-        if (typeof value === "object" && value && !value.name) {
-          value = JSON.stringify(value);
+    if (typeof state === "object" && !Array.isArray(state)) {
+      for (const key in state) {
+        if (key === "style") {
+          for (const [k, v] of Object.entries(state[key])) {
+            if (typeof element.style[k] !== "undefined" && k !== "src") {
+              element.style[k] = v;
+            } else {
+              throw new Error(
+                "\u2718  Cradova err : " + k + " is not a valid css style property"
+              );
+            }
+          }
+          continue;
+        }
+        if (typeof element.style[key] !== "undefined" && key !== "src") {
+          element.style[key] = state[key];
+          continue;
+        }
+        if (typeof element[key] === "function") {
+          element[key](element);
+          continue;
+        }
+        if (key === "text") {
+          element.innerText = state[key];
+          continue;
+        }
+        if (key === "fullscreen") {
+          if (state[key]) {
+            fullScreen(element).set();
+          } else {
+            fullScreen(element).exist();
+          }
+          continue;
+        }
+        if (key === "class" && typeof state[key] === "string" && state[key] !== "") {
+          const classes = state[key].split(" ");
+          for (let i2 = 0; i2 < classes.length; i2++) {
+            if (classes[i2]) {
+              element.classList.add(classes[i2]);
+            }
+          }
+          continue;
+        }
+        if (key === "toggleclass" && state[key] !== "") {
+          element.classList.toggle(state[key]);
+          continue;
+        }
+        if (key === "removeclass" && state[key] !== "") {
+          element.classList.remove(state[key]);
+          continue;
+        }
+        if (key === "remove") {
+          if (element.parentElement) {
+            (_a = element.parentElement) == null ? void 0 : _a.removeChild(element);
+          } else {
+            element.remove();
+          }
+          continue;
+        }
+        if (key.includes("$")) {
+          element.setAttribute("data-" + key.split("$")[1], state[key]);
+          continue;
+        }
+        if (key === "tree") {
+          if (typeof state[key] === "function") {
+            state[key] = state[key]();
+          } else {
+            throw new TypeError(
+              " \u2718  Cradova err: invalid tree element type, should be a single parent cradova element tree"
+            );
+          }
+          if (typeof state[key] === "function") {
+            state[key] = state[key]();
+          }
+          if (Array.isArray(state[key])) {
+            throw new TypeError(
+              " \u2718  Cradova err: invalid tree element type, should be a single parent cradova element tree"
+            );
+          }
+          if (!(state[key] instanceof HTMLElement)) {
+            console.error(
+              " \u2718  Cradova err:  wrong element type: can't update tree using " + state[key]
+            );
+            throw new TypeError(
+              " \u2718  Cradova err: invalid tree element type, should be a single parent cradova element tree"
+            );
+          }
+          element.innerHTML = "";
+          element.appendChild(state[key]);
+          continue;
+        }
+        try {
+          if (typeof element[key] !== "undefined") {
+            element[key] = state[key];
+          } else {
+            element[key] = state[key];
+            if (key !== "for" && key !== "text" && key !== "class" && !key.includes("aria")) {
+              console.error(" \u2718  Cradova err:  invalid html attribute " + key);
+            }
+          }
+        } catch (error) {
+          console.error(" \u2718  Cradova err: Cradova got ", state);
+          console.error(" \u2718  Cradova err:  ", error);
         }
-        formData.set(k, value);
       }
+    } else {
+      throw new TypeError(" \u2718  Cradova err:   invalid state object" + state);
+    }
+  }
+}
+function dispatch(stateID, state) {
+  let ele;
+  if (stateID instanceof HTMLElement) {
+    ele = stateID;
+  }
+  let updated = void 0;
+  if (typeof state === "undefined" && typeof stateID === "object" && !ele) {
+    for (const [id, eachState] of Object.entries(stateID)) {
+      const elements = document.querySelectorAll(
+        "[data-cra-id=" + id + "]"
+      );
+      updated = elements.length === 1 ? elements[0] : elements;
+      cradovaDispatchTrack(elements, eachState);
     }
-    ajax.addEventListener("error", () => {
-      console.error(
-        "\u2718  Cradova Ajax err : ",
-        ajax.response || "ERR_INTERNET_DISCONNECTED"
+  } else {
+    if (typeof stateID === "string") {
+      const elements = document.querySelectorAll(
+        "[data-cra-id=" + stateID + "]"
       );
-      if (!navigator.onLine) {
-        resolve(
-          JSON.stringify({
-            message: `the device is offline!`
-          })
-        );
-      } else {
-        resolve(
-          JSON.stringify({
-            message: `problem with the action, please try again!`
-          })
-        );
+      if (elements.length) {
+        updated = elements.length === 1 ? elements[0] : elements;
+        if (!(state == null ? void 0 : state.cradovaDispatchTrackBreak)) {
+          cradovaDispatchTrack(elements, state);
+        }
       }
-    });
-    if (!method) {
-      ajax.open(data && typeof data === "object" ? "POST" : "GET", url, true);
-    } else {
-      ajax.open(method, url, true);
     }
-    if (header && typeof header === "object") {
-      Object.keys(header).forEach(function(key) {
-        ajax.setRequestHeader(key, header[key]);
-      });
+    if (ele) {
+      cradovaDispatchTrack([ele], state);
     }
-    ajax.send(formData);
-  });
+  }
+  return updated;
 }
 
 // lib/sacho/loadCss.ts
@@ -1153,99 +762,531 @@ function loadCradovaUICss(seconds = 0.3) {
   to {
    transform: scale(0);
   }
-}
-
-
-@keyframes scale-out {
-  from {
-    transform: scale(0);
-    } 
-  to {
-    transform: scale(1);
-   }
-}
-
-@keyframes slide-right {
-  from {
-  margin-left: -140%;
+}
+
+
+@keyframes scale-out {
+  from {
+    transform: scale(0);
+    } 
+  to {
+    transform: scale(1);
+   }
+}
+
+@keyframes slide-right {
+  from {
+  margin-left: -140%;
+  }
+  to  {
+  margin-left: 0%;
+  }
+}
+
+@keyframes slide-left {
+  from {
+  margin-left: 140%;
+  }
+  to  {
+  margin-left: 0%;
+  }
+}
+
+@keyframes slide-up {
+  from {
+  margin-top: 140%;
+  }
+  to  {
+  margin-top: 0%;
+  }
+}
+
+@keyframes slide-down {
+  from {
+  margin-top: -140%;
+  }
+  to  {
+  margin-top: 0%;
+  }
+}
+
+@keyframes fade-in {
+  from {
+  opacity: 0;
+  }
+  to  {
+  opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+  opacity: 1;
+  }
+  to  {
+  opacity: 0;
+  }
+}
+
+/* ultility animations */
+
+
+@keyframes fadeoff {
+  50%{
+    opacity: 0;
+  }
+  100% {
+    opacity: 0;
+  }
+} 
+
+@keyframes fadein {
+  0% { 
+    opacity: 0;
+}
+  70%{
+    opacity: 1;
+  }
+  100% {
+    opacity: 1;
+  }
+} `;
+  const style = document.createElement("style");
+  style.innerHTML = css2;
+  document.head.appendChild(style);
+}
+
+// lib/scripts/Router.ts
+var Router = {};
+var RouterBox = {};
+RouterBox["lastNavigatedRouteController"] = null;
+RouterBox["nextRouteController"] = null;
+RouterBox["lastNavigatedRoute"] = null;
+RouterBox["pageShow"] = null;
+RouterBox["pageHide"] = null;
+RouterBox["errorHandler"] = {};
+RouterBox["params"] = {};
+RouterBox["routes"] = {};
+var checker = (url) => {
+  if (RouterBox.routes[url]) {
+    return [RouterBox.routes[url], null];
+  }
+  for (const path in RouterBox.routes) {
+    if (!path.includes(":")) {
+      continue;
+    }
+    const urlFixtures = url.split("/");
+    const pathFixtures = path.split("/");
+    if (pathFixtures.length === urlFixtures.length) {
+      urlFixtures.shift();
+      pathFixtures.shift();
+      let isIt = true;
+      const routesParams = {};
+      for (let i = 0; i < pathFixtures.length; i++) {
+        if (!pathFixtures[i].includes(":") && path.includes(urlFixtures[i] + "/") && pathFixtures.indexOf(urlFixtures[i]) === pathFixtures.lastIndexOf(urlFixtures[i])) {
+          if (!isIt)
+            isIt = true;
+        } else {
+          if (pathFixtures[i].includes(":")) {
+            continue;
+          }
+          isIt = false;
+        }
+        if (!(pathFixtures.indexOf(urlFixtures[i]) === pathFixtures.lastIndexOf(urlFixtures[i]))) {
+          throw new Error(
+            " \u2718  Cradova err:  cradova router doesn't allow paths with multiple names"
+          );
+        }
+      }
+      if (isIt) {
+        for (let i = 0; i < pathFixtures.length; i++) {
+          if (pathFixtures[i].includes(":")) {
+            routesParams[pathFixtures[i].split(":")[1]] = urlFixtures[i];
+          }
+        }
+        routesParams.path = path;
+        return [RouterBox.routes[path], routesParams];
+      }
+    }
+  }
+  return [];
+};
+Router.route = function(path = "/", screen) {
+  if (!screen.Activate && screen.name) {
+    console.error(" \u2718  Cradova err:  not a valid screen  " + screen);
+    throw new Error(" \u2718  Cradova err:  Not a valid cradova screen component");
+  }
+  RouterBox.routes[path] = {
+    controller: (params, force) => screen.Activate(params, force),
+    packager: (params) => __async(this, null, function* () {
+      return yield screen.package(params);
+    }),
+    deactivate: () => {
+      screen.deActivate();
+    }
+  };
+};
+Router.navigate = function(href, data = null, force = false) {
+  if (typeof href !== "string") {
+    throw new TypeError(
+      " \u2718  Cradova err:  href must be a defined path but got " + href + " instead"
+    );
+  }
+  if (typeof data === "boolean") {
+    force = true;
+    data = null;
+  }
+  let route = null, params, link = null;
+  if (href.includes("://")) {
+    window.location.href = href;
+  } else {
+    if (href === window.location.pathname) {
+      return;
+    }
+    [route, params] = checker(href);
+    if (route) {
+      RouterBox["nextRouteController"] = route;
+      RouterBox.params.params = params || null;
+      RouterBox.params.data = data || null;
+      link = href;
+      RouterBox["pageHide"] && RouterBox["pageHide"](href + " :navigated");
+      window.history.pushState({}, "", link);
+      (() => __async(this, null, function* () {
+        yield RouterBox.router(null, force);
+      }))();
+    }
+  }
+};
+RouterBox.router = function(e, force = false) {
+  return __async(this, null, function* () {
+    let url, route, params;
+    const Alink = e && e.target.tagName === "A" && e.target;
+    if (Alink) {
+      if (Alink.href.includes("#")) {
+        return;
+      }
+      if (Alink.href.includes("javascript")) {
+        return;
+      }
+      e.preventDefault();
+      url = new URL(Alink.href).pathname;
+    }
+    if (!url) {
+      url = window.location.pathname;
+    }
+    if (url === Router["lastNavigatedRoute"]) {
+      return;
+    }
+    if (RouterBox["nextRouteController"]) {
+      route = RouterBox["nextRouteController"];
+      RouterBox["nextRouteController"] = null;
+      params = RouterBox.params.params;
+      RouterBox.params.params = null;
+    } else {
+      [route, params] = checker(url);
+    }
+    if (route) {
+      try {
+        RouterBox.params.event = e;
+        RouterBox.params.params = params || RouterBox.params.params || null;
+        RouterBox.params.data = RouterBox.params.data || null;
+        RouterBox["lastNavigatedRouteController"] && RouterBox["lastNavigatedRouteController"].deactivate();
+        yield route.controller(force);
+        RouterBox["pageShow"] && RouterBox["pageShow"](url);
+        RouterBox["lastNavigatedRoute"] = url;
+        RouterBox["lastNavigatedRouteController"] = route;
+        RouterBox.params.params = null;
+        Array.from(window.document.querySelectorAll("a")).forEach((a) => {
+          if (a.href.includes(window.location.origin)) {
+            a.addEventListener("click", (e2) => {
+              e2.preventDefault();
+              Router.navigate(a.pathname);
+            });
+          }
+        });
+      } catch (error) {
+        const errorHandler = RouterBox.errorHandler[params.path || "all"];
+        if (errorHandler) {
+          errorHandler(error);
+        }
+      }
+    } else {
+      if (RouterBox.routes["/404"]) {
+        RouterBox.routes["/404"].controller(RouterBox.params);
+      } else {
+        const errorHandler = RouterBox.errorHandler[params.path || "all"];
+        if (errorHandler) {
+          errorHandler(
+            " \u2718  Cradova err: route '" + url + "' does not exist and no '/404' route given!"
+          );
+        } else {
+          console.error(
+            " \u2718  Cradova err: route '" + url + "' does not exist and no '/404' route given!"
+          );
+        }
+      }
+    }
+  });
+};
+Router["onPageShow"] = function(callback) {
+  if (typeof callback === "function") {
+    RouterBox["pageShow"] = callback;
+  } else {
+    throw new Error(
+      " \u2718  Cradova err:  callback for pageShow event is not a function"
+    );
+  }
+};
+Router["onPageHide"] = function(callback) {
+  if (typeof callback === "function") {
+    RouterBox["pageHide"] = callback;
+  } else {
+    throw new Error(
+      " \u2718  Cradova err:  callback for pageHide event is not a function"
+    );
   }
-  to  {
-  margin-left: 0%;
+};
+Router.packageScreen = function(path, data) {
+  return __async(this, null, function* () {
+    if (!RouterBox.routes[path]) {
+      console.error(" \u2718  Cradova err:  no screen with path " + path);
+      throw new Error(" \u2718  Cradova err:  cradova err: Not a defined screen path");
+    }
+    yield RouterBox.routes[path].packager(data);
+  });
+};
+Router.getParams = function() {
+  return RouterBox["params"];
+};
+Router["addErrorHandler"] = function(callback, path) {
+  if (typeof callback === "function") {
+    RouterBox["errorHandler"][path || "all"] = callback;
+  } else {
+    throw new Error(
+      " \u2718  Cradova err:  callback for ever event event is not a function"
+    );
   }
-}
+};
+window.addEventListener("pageshow", RouterBox.router);
+window.addEventListener("popstate", (e) => {
+  e.preventDefault();
+  RouterBox.router();
+});
 
-@keyframes slide-left {
-  from {
-  margin-left: 140%;
+// lib/scripts/Screen.ts
+var Screen = class {
+  constructor(cradova_screen_initials) {
+    this.packed = false;
+    this.secondaryChildren = [];
+    this.template = document.createElement("div");
+    this.persist = true;
+    this.rendered = false;
+    this.hasFirstStateUpdateRun = false;
+    this.effects = [];
+    this.effectuate = null;
+    const { template, name, transition, persist } = cradova_screen_initials;
+    if (typeof template !== "function") {
+      throw new Error(
+        " \u2718  Cradova err: only functions that returns a cradova element is valid as screen"
+      );
+    }
+    this.html = template.bind(this);
+    this.name = name;
+    this.template.id = "cradova-screen-set";
+    this.transition = transition;
+    if (typeof persist === "boolean") {
+      this.persist = persist;
+    }
   }
-  to  {
-  margin-left: 0%;
+  effect(fn) {
+    if (!this.rendered) {
+      this.effects.push(fn);
+    }
   }
-}
-
-@keyframes slide-up {
-  from {
-  margin-top: 140%;
+  effector() {
+    return __async(this, null, function* () {
+      if (!this.rendered) {
+        for (const effect of this.effects) {
+          yield effect.apply(this);
+        }
+      }
+      if (!this.hasFirstStateUpdateRun && this.effectuate) {
+        this.hasFirstStateUpdateRun = true;
+        yield this.effectuate();
+      }
+      this.rendered = true;
+    });
   }
-  to  {
-  margin-top: 0%;
+  updateState(data) {
+    if (!this.rendered) {
+      function updateState(data2) {
+        return __async(this, null, function* () {
+          this.data = data2;
+          yield this.Activate(true);
+        });
+      }
+      this.effectuate = updateState.bind(this, data);
+    } else {
+      (() => __async(this, null, function* () {
+        this.data = data;
+        yield this.Activate(true);
+      })).bind(this)();
+    }
   }
-}
-
-@keyframes slide-down {
-  from {
-  margin-top: -140%;
+  package() {
+    return __async(this, null, function* () {
+      if (typeof this.html === "function") {
+        let fuc = yield this.html(this.data);
+        if (typeof fuc === "function") {
+          fuc = fuc();
+          if (!(fuc instanceof HTMLElement)) {
+            throw new Error(
+              " \u2718  Cradova err:   only parent with descendants is valid"
+            );
+          } else {
+            if (this.transition) {
+              this.template.classList.add("CRADOVA-UI-" + this.transition);
+            }
+            this.template.innerHTML = "";
+            this.template.appendChild(fuc);
+          }
+        }
+      }
+      if (!this.template.firstChild) {
+        throw new Error(
+          " \u2718  Cradova err:  no screen is rendered, may have been past wrongly."
+        );
+      }
+      if (this.secondaryChildren.length) {
+        this.template.append(this.secondaryChildren);
+      }
+    });
   }
-  to  {
-  margin-top: 0%;
+  onActivate(cb) {
+    this.callBack = cb;
   }
-}
-
-@keyframes fade-in {
-  from {
-  opacity: 0;
+  addChild(...addOns) {
+    this.secondaryChildren.push(frag(...addOns));
   }
-  to  {
-  opacity: 1;
+  deActivate() {
+    if (this.transition) {
+      this.template.classList.remove("CRADOVA-UI-" + this.transition);
+    }
+    if (!this.persist) {
+      this.rendered = false;
+    }
   }
-}
+  Activate(force) {
+    return __async(this, null, function* () {
+      if (!this.persist) {
+        yield this.package();
+        this.packed = true;
+      } else {
+        if (!this.packed) {
+          yield this.package();
+          this.packed = true;
+        }
+      }
+      if (this.persist && force) {
+        yield this.package();
+        this.packed = true;
+      }
+      document.title = this.name;
+      const doc = document.querySelector("[data-cra-id=cradova-app-wrapper]");
+      if (!doc) {
+        throw new Error(
+          " \u2718  Cradova err: Unable to render, cannot find cradova root <div data-cra-id='cradova-app-wrapper'> ... </div>"
+        );
+      }
+      doc.innerHTML = "";
+      doc.appendChild(this.template);
+      if (!this.persist) {
+        this.packed = false;
+      }
+      yield this.effector();
+      if (this.callBack) {
+        yield this.callBack();
+      }
+      window.dispatchEvent(cradovaAftermountEvent);
+      window.scrollTo(0, 0);
+    });
+  }
+};
+Screen.SCALE_IN = "SCALE-IN";
+Screen.SCALE_OUT = "SCALE-OUT";
+Screen.CIRCLE_IN = "CIRCLE-IN";
+Screen.CIRCLE_OUT = "CIRCLE-OUT";
+Screen.FADE_OUT = "FADE-OUT";
+Screen.FADE_IN = "FADE-IN";
+Screen.SLIDE_UP = "SLIDE-UP";
+Screen.SLIDE_DOWN = "SLIDE-DOWN";
+Screen.SLIDE_LEFT = "SLIDE-LEFT";
+Screen.SLIDE_RIGHT = "SLIDE-RIGHT";
 
-@keyframes fade-out {
-  from {
-  opacity: 1;
+// lib/scripts/simplestore.ts
+var simpleStore = class {
+  constructor(initial) {
+    this.ref = [];
+    this.value = null;
+    this.value = initial;
   }
-  to  {
-  opacity: 0;
+  set(value, shouldRefRender) {
+    if (typeof value === "function") {
+      this.value = value(this.value);
+    } else {
+      this.value = value;
+    }
+    if (this.ref.length && shouldRefRender !== false) {
+      this.updateState();
+    }
   }
-}
-
-/* ultility animations */
-
-
-@keyframes fadeoff {
-  50%{
-    opacity: 0;
+  bind(prop) {
+    if (typeof this.value === "object" && typeof this.value[prop] !== "undefined") {
+      return [this, prop];
+    } else {
+      throw new Error(
+        "\u2718  Cradova err : can't bind an unavailable property!  " + prop
+      );
+    }
   }
-  100% {
-    opacity: 0;
+  updateState(name) {
+    if (name) {
+      const entry = this.ref.find((ent) => ent.prop === name);
+      if (entry) {
+        entry.ref.updateState({ [entry.key]: this.value[entry.prop] });
+      }
+    } else {
+      for (let i = 0; i < this.ref.length; i++) {
+        const entry = this.ref[i];
+        entry.ref.updateState({ [entry.key]: this.value[entry.prop] });
+      }
+    }
   }
-} 
-
-@keyframes fadein {
-  0% { 
-    opacity: 0;
-}
-  70%{
-    opacity: 1;
+  setKey(name, value, shouldRefRender) {
+    if (typeof this.value === "object" && !Array.isArray(this.value)) {
+      if (typeof value === "function") {
+        this.value[name] = value(this.value);
+      } else {
+        this.value[name] = value;
+      }
+      if (this.ref.length && shouldRefRender !== false) {
+        this.updateState(name);
+      }
+    }
   }
-  100% {
-    opacity: 1;
+  bindRef(ref, key, prop) {
+    if (ref && ref.updateState && prop) {
+      this.ref.push({ prop, ref, key });
+      if (ref.reader) {
+        ref.render = ref.render.bind(ref, this.value);
+      }
+    } else {
+      throw new Error(
+        "\u2718  Cradova err :  Invalid parameters for binding ref to simple store"
+      );
+    }
   }
-} `;
-  const style = document.createElement("style");
-  style.innerHTML = css2;
-  document.head.appendChild(style);
-}
+};
 
 // lib/scripts/init.ts
 var Init = function() {