cradova 1.3.0 → 1.4.0

package/dist/index.js

@@ -1,398 +1,155 @@
-// 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.pushed = false;
-    this.effects = [];
-    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.pushed) {
-      this.effects.push(
-        new Promise(async (res, rej) => {
-          try {
-            res(await fn());
-          } catch (error) {
-            rej(error);
-          }
-        })
-      );
-    }
-  }
-  async effector() {
-    if (this.rendered) {
-      await Promise.allSettled(this.effects);
-    }
-  }
-  async updateState(data) {
-    if (this.rendered) {
-      await this.Activate(data, true);
+// lib/scripts/track.ts
+function cradovaDispatchTrack(nodes, state) {
+  for (let i = 0; i < nodes.length; i++) {
+    const element = nodes[i];
+    if (!element) {
+      continue;
     }
-  }
-  async package(data) {
-    if (typeof this.html === "function") {
-      let fuc = await this.html(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) {
-            fuc.classList.add("CRADOVA-UI-" + this.transition);
+    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"
+              );
+            }
           }
-          this.template.replaceChildren(fuc);
+          continue;
         }
-      }
-    }
-    if (!this.template.firstChild) {
-      throw new Error(
-        " \u2718  Cradova err:  no screen is rendered, may have been past wrongly, try ()=> screen; in cradova Router.route(name, screen)"
-      );
-    }
-    if (this.secondaryChildren.length) {
-      this.template.append(this.secondaryChildren);
-    }
-  }
-  onActivate(cb) {
-    this.callBack = cb;
-  }
-  addChild(...addOns) {
-    for (let i = 0; i < addOns.length; i++) {
-      if (addOns[i] && addOns[i] instanceof HTMLElement) {
-        this.secondaryChildren.push(addOns[i]);
-      }
-      if (addOns[i] && typeof addOns[i] === "function") {
-        let a = addOns[i]();
-        if (a && a instanceof HTMLElement) {
-          this.secondaryChildren.push(a);
+        if (typeof element.style[key] !== "undefined" && key !== "src") {
+          element.style[key] = state[key];
+          continue;
         }
-        if (addOns[i] && typeof addOns[i] === "function") {
-          a = a();
-          if (a && a instanceof HTMLElement) {
-            this.secondaryChildren.push(a);
+        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;
         }
-      }
-    }
-  }
-  deActivate() {
-    if (!this.persist) {
-      this.rendered = false;
-    }
-  }
-  async Activate(data, force) {
-    if (!this.persist) {
-      await this.package(data);
-      this.packed = true;
-    } else {
-      if (!this.packed) {
-        await this.package(data);
-        this.packed = true;
-      }
-    }
-    if (this.persist && force) {
-      await this.package(data);
-      this.packed = true;
-      this.rendered = false;
-    }
-    if (!this.pushed) {
-      this.pushed = 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?.replaceChildren(this.template);
-    if (!this.persist) {
-      this.packed = false;
-    }
-    if (this.effects.length) {
-      await this.effector();
-      this.rendered = true;
-    }
-    if (doc?.firstChild?.firstChild?.afterMount) {
-      const c = doc?.firstChild;
-      c?.firstChild.afterMount();
-    }
-    if (this.callBack) {
-      await this.callBack(data);
-    }
-    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/Scaffold.ts
-var Scaffold = class {
-  constructor() {
-    this.history = [];
-    this.Scaffolds = {};
-  }
-  async push(label, data, force) {
-    if (this.Scaffolds[label]) {
-      if (this.history.length) {
-        this.Scaffolds[this.history[this.history.length - 1]].deActivate();
-      }
-      if (data) {
-        await this.Scaffolds[label].Activate(data, force);
-      } else {
-        await this.Scaffolds[label].Activate();
-      }
-      this.history.push(label);
-    } else {
-      throw new Error(
-        "\u2718  Cradova err : no  Scaffold labeled  " + label + " provided!"
-      );
-    }
-  }
-  async pop(data, force) {
-    if (!this.history.length || this.history.length === 1) {
-      return;
-    }
-    this.Scaffolds[this.history[this.history.length - 1]].deActivate();
-    this.history.pop();
-    await this.Scaffolds[this.history[this.history.length - 1]].Activate(
-      data,
-      force
-    );
-  }
-  async addScaffolds(scaffolds) {
-    let i = 0, lab = "";
-    for (const label in scaffolds) {
-      const scaffold = scaffolds[label];
-      if (scaffold.template) {
-        this.Scaffolds[label] = scaffold;
-      } else {
-        console.error("\u2718  Cradova got", scaffold);
-        throw new Error(
-          "\u2718  Cradova err : Scaffold of label '" + label + "' didn't receive a invalid Scaffold component type"
-        );
-      }
-      if (i === 0) {
-        lab = label;
-      }
-      i++;
-    }
-    if (lab) {
-      await this.push(lab);
-      return;
-    }
-    throw new Error("\u2718  Cradova err : no  Scaffold given!");
-  }
-};
-
-// lib/scripts/Router.ts
-var Router = {};
-var RouterBox = {};
-RouterBox["lastNavigatedRouteController"] = null;
-RouterBox["nextRouteController"] = null;
-RouterBox["lastNavigatedRoute"] = null;
-RouterBox["pageShow"] = null;
-RouterBox["pageHide"] = null;
-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;
+        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]);
+            }
           }
-          isIt = false;
+          continue;
         }
-        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 (key === "toggleclass" && state[key] !== "") {
+          element.classList.toggle(state[key]);
+          continue;
         }
-      }
-      if (isIt) {
-        for (let i = 0; i < pathFixtures.length; i++) {
-          if (pathFixtures[i].includes(":")) {
-            routesParams[pathFixtures[i].split(":")[1]] = urlFixtures[i];
+        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);
         }
-        return [RouterBox.routes[path], routesParams];
       }
+    } else {
+      throw new TypeError(" \u2718  Cradova err:   invalid state object" + state);
     }
   }
-  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");
+}
+function dispatch(stateID, state) {
+  let ele;
+  if (stateID instanceof HTMLElement) {
+    ele = stateID;
   }
-  RouterBox.routes[path] = {
-    controller: (params, force) => screen.Activate(params, force),
-    packager: async (params) => await screen.package(params),
-    deactivate: () => {
-      screen.deActivate();
+  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);
     }
-  };
-};
-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);
-      })();
-    }
-  }
-};
-RouterBox.router = async function(e, force = false) {
-  let Alink, url, route, params;
-  if (e && e.target.tagName) {
-    Alink = e.target;
-    if (Alink && Alink.href.includes("#")) {
-      return;
-    }
-    if (Alink && Alink.href.includes("javascript")) {
-      return;
-    }
-    e.preventDefault();
-    if (Alink) {
-      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;
-  } else {
-    [route, params] = checker(url);
-  }
-  if (route) {
-    RouterBox.params.event = e;
-    RouterBox.params.params = params || null;
-    RouterBox.params.data = RouterBox.params.data || null;
-    RouterBox["lastNavigatedRouteController"] && RouterBox["lastNavigatedRouteController"].deactivate();
-    await route.controller(RouterBox.params, force);
-    RouterBox["pageShow"] && RouterBox["pageShow"](url);
-    RouterBox["lastNavigatedRoute"] = url;
-    RouterBox["lastNavigatedRouteController"] = route;
-    Array.from(window.document.querySelectorAll("a")).forEach((a) => {
-      a.addEventListener("click", (e2) => {
-        e2.preventDefault();
-        Router.navigate(a.pathname);
-      });
-    });
-  } else {
-    if (RouterBox.routes["/404"]) {
-      RouterBox.routes["/404"].controller(RouterBox.params);
-    } else {
-      console.error(
-        " \u2718  Cradova err: route '" + url + "' does not exist and no '/404' route given!"
+    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);
     }
   }
-};
-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);
-};
-window.addEventListener("pageshow", RouterBox.router);
-window.addEventListener("popstate", (e) => {
-  e.preventDefault();
-  RouterBox.router(e);
-});
+  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]);
@@ -403,46 +160,6 @@ var err = function(errors, err2, type) {
     throw new TypeError(" \u2718  Cradova err:  " + err2);
   }
 };
-var controls = function() {
-  const svg = `<svg width="20" height="20" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
- <path d="M4.49975 5.625C4.3402 5.6242 4.18282 5.58788 4.03904 5.5187C3.89526 5.44951 3.76869 5.34919 3.6685 5.225L1.03725 2.0375C0.8835 1.84561 0.786745 1.61438 0.758014 1.37017C0.729283 1.12596 0.769733 0.878589 0.874753 0.65625C0.959928 0.463017 1.09892 0.298383 1.27514 0.182014C1.45136 0.0656449 1.65734 0.00245816 1.8685 0H7.131C7.34216 0.00245816 7.54815 0.0656449 7.72437 0.182014C7.90058 0.298383 8.03958 0.463017 8.12475 0.65625C8.22977 0.878589 8.27023 1.12596 8.24149 1.37017C8.21276 1.61438 8.11601 1.84561 7.96226 2.0375L5.331 5.225C5.23082 5.34919 5.10424 5.44951 4.96047 5.5187C4.81669 5.58788 4.65931 5.6242 4.49975 5.625Z" fill="#2c3e50"/>
-</svg>
-`;
-  const icon = (styles) => lib_default("div", { ...styles, innerHTML: svg });
-  const constr = lib_default(
-    "div",
-    {
-      display: "flex",
-      position: "fixed",
-      alignContent: "center",
-      justifyContent: "space-around",
-      flexDirection: "row",
-      width: "80px",
-      top: "4px",
-      right: "4px",
-      backgroundColor: "#fff",
-      transform: "rotate(0deg)",
-      border: "aqua 2px solid",
-      borderRadius: "6px"
-    },
-    icon({
-      transform: "rotate(90deg)",
-      onclick() {
-        window.history.back();
-      }
-    }),
-    icon({
-      transform: "rotate(270deg)",
-      onclick() {
-        window.history.forward();
-      }
-    })
-  );
-  const cont = constr();
-  if (cont) {
-    document.body.append(cont);
-  }
-};
 function uuid() {
   let t = Date.now ? +Date.now() : +new Date();
   return "cradova-id-xxxxxxxxxx".replace(/[x]/g, function(e) {
@@ -450,53 +167,6 @@ function uuid() {
     return ("x" === e ? r : 7 & r | 8).toString(16);
   });
 }
-function PromptBeforeLeave(callback) {
-  window.history.pushState(
-    "forward",
-    "",
-    window.location.pathname + "#forward"
-  );
-  window.addEventListener("popstate", (e) => {
-    if (callback) {
-      callback(e);
-    } else {
-      alert("Are you sure, you want to go back?");
-    }
-  });
-}
-function media(value, ...properties) {
-  const styS = "@media only screen and (" + value + `) {
-`, styE = `}
-`;
-  let style = "  ", aniSty = " ";
-  const proplen = properties.length;
-  let totalAnimation, Animation = "  ";
-  const animationStep = (num) => {
-    style = "  ";
-    for (const [k, v] of Object.entries(properties[num][1])) {
-      style += "" + k + ": " + v + `;
-`;
-    }
-    aniSty += "" + properties[num][0] + `{
-` + style + `}
-`;
-    return aniSty;
-  };
-  for (let i = 0; i < proplen; i++) {
-    Animation += animationStep(i);
-  }
-  let aniStyleTag = document.querySelector("style");
-  if (aniStyleTag === null) {
-    aniStyleTag = document.createElement("style");
-  }
-  aniStyleTag.media = "screen";
-  totalAnimation = aniStyleTag.innerHTML + `
-
-`;
-  totalAnimation += styS + Animation + styE;
-  aniStyleTag.innerHTML = totalAnimation;
-  document.head.append(aniStyleTag);
-}
 function css(identifier, properties) {
   if (typeof identifier === "string" && typeof properties === "undefined") {
     let styTag = document.querySelector("style");
@@ -537,82 +207,17 @@ function css(identifier, properties) {
   styleTag.innerHTML = totalStyle;
   document.head.append(styleTag);
 }
-function animate(identifier, ...properties) {
-  const styS = "@keyframes " + identifier + ` {
-`, styE = `}
-`, proplen = properties.length;
-  let style = " ", aniSty = " ", Animation = "  ", totalAnimation = null;
-  const animationStep = (num) => {
-    style = "  ";
-    for (const [k, v] of Object.entries(properties[num][1])) {
-      style += "" + k + ": " + v + `;
-`;
-    }
-    aniSty += "" + properties[num][0] + `{
-` + style + `}
-`;
-    return aniSty;
-  };
-  for (let i = 0; i < proplen; i++) {
-    Animation += animationStep(i);
-  }
-  let aniStyleTag = document.querySelector("style");
-  if (aniStyleTag === null) {
-    aniStyleTag = document.createElement("style");
-  }
-  aniStyleTag.media = "screen";
-  totalAnimation = aniStyleTag.innerHTML + `
-
-`;
-  totalAnimation += styS + Animation + styE;
-  aniStyleTag.innerHTML = totalAnimation;
-  document.head.append(aniStyleTag);
-}
 function assert(condition, ...callback) {
   if (condition) {
     return callback;
   }
-  return "";
-}
-function assertOr(condition, ifTrue, ifFalse) {
-  if (condition) {
-    return ifTrue;
-  }
-  return ifFalse;
-}
-function RefElement(element_initials = "div", props = {}, ...other) {
-  const stateID = uuid();
-  if (typeof props === "object" && !Array.isArray(element_initials[1])) {
-    other = props;
-    props = { stateID };
-  } else {
-    props["stateID"] = stateID;
-  }
-  const element = lib_default(element_initials, props, other);
-  return {
-    render(data) {
-      return element(data);
-    },
-    r(data) {
-      return element(data);
-    },
-    instance() {
-      return dispatch(stateID, {
-        cradovaDispatchTrackBreak: true
-      });
-    },
-    i() {
-      return dispatch(stateID, {
-        cradovaDispatchTrackBreak: true
-      });
-    },
-    updateState(state) {
-      dispatch(stateID, state);
-    },
-    u(state) {
-      dispatch(stateID, state);
-    }
-  };
+  return "";
+}
+function assertOr(condition, ifTrue, ifFalse) {
+  if (condition) {
+    return ifTrue;
+  }
+  return ifFalse;
 }
 var ls = {};
 ls.store = (name, value) => {
@@ -642,89 +247,15 @@ function fullScreen(e) {
     }
   };
 }
-var RefList = class {
-  constructor(component) {
-    this.stateID = uuid();
-    this.parentElement = null;
-    this.component = component.bind(this);
-  }
-  r(d) {
-    return this.render(d);
-  }
-  render(datas = []) {
-    if (!Array.isArray(datas)) {
-      throw new Error(
-        " \u2718  Cradova err:  RefList cannot render non-array input"
-      );
-    }
-    const elements = [];
-    const data = datas.length;
-    for (let i = 0; i < data; i++) {
-      elements.push(this.component(datas[i], i)({ stateID: this.stateID }));
-    }
-    if (elements.length) {
-      return elements;
-    }
-    return lib_default("div")({ stateID: this.stateID });
-  }
-  updateState(datas) {
-    if (!datas) {
-      throw new Error(" \u2718  Cradova err:  Ref cannot be rendered without input");
-    }
-    if (!Array.isArray(datas)) {
-      throw new Error(
-        " \u2718  Cradova err:  RefList cannot render non-array input"
-      );
-    }
-    if (!datas[0]) {
-      return;
-    }
-    if (!this.parentElement) {
-      this.parentElement = dispatch(this.stateID, {
-        cradovaDispatchTrackBreak: true
-      })?.parentElement;
-    }
-    if (!this.parentElement) {
-      throw new Error(
-        "\u2718  Cradova err :  cannot update list, the RefList was never rendered!"
-      );
-    }
-    const elements = [];
-    for (let i = 0; i < datas.length; i++) {
-      elements.push(this.component(datas[i], i)({ stateID: this.stateID }));
-    }
-    try {
-      this.parentElement.replaceChildren(...elements);
-    } catch (err2) {
-      console.error(err2);
-      throw new Error(" \u2718  Cradova err:  an error occured");
-    }
-  }
-  remove() {
-    dispatch(this.stateID, { remove: true });
-  }
-  instance() {
-    return dispatch(this.stateID, {
-      cradovaDispatchTrackBreak: true
-    });
-  }
-  i() {
-    return dispatch(this.stateID, {
-      cradovaDispatchTrackBreak: true
-    });
-  }
-};
 var Ref = class {
   constructor(component) {
     this.stateID = uuid();
+    this.rendered = false;
+    this.effects = [];
+    this.effectuate = null;
+    this.hasFirstStateUpdateRun = false;
     this.component = component.bind(this);
   }
-  r(d) {
-    return this.render(d);
-  }
-  u(d) {
-    return this.updateState(d);
-  }
   render(data) {
     const chtml = this.component(data);
     if (typeof chtml !== "function") {
@@ -741,25 +272,16 @@ var Ref = class {
       
       to track and debug this element add a
       beforeMount or afterMount prop to the element
-      then you can compare the parsed element and stateID
-
-     element stateID: \x1B[4m \x1B[33m ${this.stateID} \x1B[33m \x1B[4m`
+      `
         ],
         `Cradova can't render component make sure it's a valid component`
       );
     }
-    if (typeof this.upcb !== "undefined" && element.afterMount) {
-      const afterMount = element.afterMount;
-      const upcb = this.upcb.bind(null, data);
-      element.afterMount = () => {
-        upcb();
-        afterMount();
-      };
-    } else {
-      if (this.upcb) {
-        element.afterMount = this.upcb.bind(null, data);
-      }
-    }
+    const av = () => {
+      this.effector.apply(this);
+      window.removeEventListener("cradova-aftermount", av);
+    };
+    window.addEventListener("cradova-aftermount", av);
     return () => element;
   }
   instance() {
@@ -767,59 +289,81 @@ var Ref = class {
       cradovaDispatchTrackBreak: true
     });
   }
-  i() {
-    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);
+        }
+      })
+    );
   }
-  effect(cb) {
-    this.upcb = cb;
+  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:  update has been passed wrongly please send the ref where you want to call it"
-      );
-      console.error(
-        " \u2718  Cradova err: Then call as ref.updateState({ your new data }) = ui state"
+        " \u2718  Cradova err:  Ref.updateState has is passed out of scope"
       );
+      return;
     }
     const guy = dispatch(this.stateID, {
       cradovaDispatchTrackBreak: true
     });
     if (!guy) {
-      throw new Error(
-        " \u2718  Cradova err:  Ref is not rendered but updateState was called",
-        this.component
-      );
+      return;
     }
     const chtml = this.component(data);
-    if (typeof chtml !== "function") {
-      try {
-        guy.parentNode.replaceChild(chtml, guy);
-      } catch (e) {
-        console.error(" \u2718  Cradova err:  ", e);
-        throw new Error(
-          " \u2718  Cradova err:   Ref got an invalid datatype for ref updateSate call  got >>>  ' " + chtml + "';"
-        );
-      }
+    let element;
+    if (chtml instanceof HTMLElement) {
+      chtml.setAttribute("data-cra-id", this.stateID);
+      element = chtml;
+    } else {
+      element = chtml({ stateID: this.stateID });
     }
-    const element = chtml({ stateID: this.stateID });
-    const fn = element.afterMount;
-    element.afterMount = void 0;
     try {
-      guy.parentNode.replaceChild(element, guy);
-      if (typeof fn === "function") {
-        fn(element, data);
+      guy.insertAdjacentElement("beforebegin", element);
+      if (guy.parentElement) {
+        guy.parentElement.removeChild(guy);
+      } else {
+        guy.remove();
       }
     } catch (e0) {
-      console.warn(e0);
-    }
-    if (this.upcb) {
-      this.upcb(data);
+      console.error(e0);
     }
   }
   remove() {
@@ -838,9 +382,7 @@ var frag = function(...children) {
         } else {
           if (!(b instanceof HTMLElement)) {
             console.error(" \u2718  Cradova err:   wrong element type" + b);
-            throw new TypeError(
-              " \u2718  Cradova err:   invalid element, should be a html element from cradova"
-            );
+            throw new TypeError(" \u2718  Cradova err:   invalid element");
           }
         }
       } else {
@@ -849,157 +391,371 @@ var frag = function(...children) {
         } else {
           if (!(a instanceof HTMLElement)) {
             console.error(" \u2718  Cradova err:   wrong element type" + a);
-            throw new TypeError(
-              " \u2718  Cradova err:   invalid element, should be a html element from cradova"
-            );
+            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/track.ts
-function cradovaDispatchTrack(nodes, state) {
-  for (let i = 0; i < nodes.length; i++) {
-    const element = nodes[i];
-    if (!element) {
-      continue;
+// 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"
+      );
     }
-    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"
-              );
-            }
+    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);
           }
-          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();
+        })
+      );
+    }
+  }
+  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);
           }
-          continue;
+          this.template.innerHTML = "";
+          this.template.appendChild(fuc);
         }
-        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]);
-            }
+      }
+    }
+    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;
           }
-          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") {
-          element.parentElement?.removeChild(element);
-          continue;
-        }
-        if (key.includes("$")) {
-          element.setAttribute("data-" + key.split("$")[1], state[key]);
-          continue;
+          isIt = false;
         }
-        if (key === "tree") {
-          if (typeof state[key] === "function") {
-            state[key] = state[key]();
-          }
-          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 element or parent element from cradova"
-            );
-          }
-          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 element, should be a html element from cradova"
-            );
-          }
-          element.replaceChildren(state[key]);
-          continue;
+        if (!(pathFixtures.indexOf(urlFixtures[i]) === pathFixtures.lastIndexOf(urlFixtures[i]))) {
+          throw new Error(
+            " \u2718  Cradova err:  cradova router doesn't allow paths with multiple names"
+          );
         }
-        try {
-          if (typeof element[key] !== "undefined") {
-            element[key] = state[key];
-          } else {
-            element[key] = state[key];
-            if (key !== "afterMount" && key !== "for" && key !== "text" && key !== "class" && !key.includes("aria")) {
-              console.error(" \u2718  Cradova err:  invalid html attribute " + key);
-            }
+      }
+      if (isIt) {
+        for (let i = 0; i < pathFixtures.length; i++) {
+          if (pathFixtures[i].includes(":")) {
+            routesParams[pathFixtures[i].split(":")[1]] = urlFixtures[i];
           }
-        } catch (error) {
-          console.error(" \u2718  Cradova err: Cradova got ", state);
-          console.error(" \u2718  Cradova err:  ", error);
         }
+        routesParams.path = path;
+        return [RouterBox.routes[path], routesParams];
       }
-    } else {
-      throw new TypeError(" \u2718  Cradova err:   invalid state object" + state);
     }
   }
-}
-function dispatch(stateID, state) {
-  let ele;
-  if (stateID instanceof HTMLElement) {
-    ele = stateID;
+  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");
   }
-  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);
+  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 (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 (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);
+      })();
+    }
+  }
+};
+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);
+  }
+  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);
       }
     }
-    if (ele) {
-      cradovaDispatchTrack([ele], state);
+  } 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!"
+        );
+      }
     }
   }
-  return updated;
-}
+};
+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();
+});
 
 // lib/scripts/createSignal.ts
 var createSignal = class {
@@ -1132,9 +888,9 @@ var createSignal = class {
       this.ref = Ref2;
       if (typeof path === "string") {
         this.path = path;
-        Ref2.stale(this.value[path]);
+        Ref2.render = Ref2.render.bind(Ref2, this.value[path]);
       } else {
-        Ref2.stale(this.value);
+        Ref2.render = Ref2.render.bind(Ref2, this.value);
       }
     } else {
       throw new Error("\u2718  Cradova err :  Invalid ref component" + Ref2);
@@ -1161,7 +917,7 @@ var createSignal = class {
   }
   clearPersist() {
     if (this.persistName) {
-      localStorage.setItem(this.persistName, JSON.stringify(""));
+      localStorage.setItem(this.persistName, "");
     }
   }
 };
@@ -1201,7 +957,7 @@ var simpleStore = class {
     } else {
       for (let i = 0; i < this.ref.length; i++) {
         const entry = this.ref[i];
-        entry.ref.updateState({ [entry.prop]: this.value[entry.prop] });
+        entry.ref.updateState({ [entry.key]: this.value[entry.prop] });
       }
     }
   }
@@ -1235,7 +991,7 @@ var simpleStore = class {
 function Ajax(url, opts = {}) {
   const { method, data, header, callbacks } = opts;
   if (typeof url !== "string") {
-    throw new Error("\u2718  Cradova err : little Axios invalid url " + url);
+    throw new Error("\u2718  Cradova err : Ajax invalid url " + url);
   }
   return new Promise(function(resolve) {
     const ajax = new XMLHttpRequest();
@@ -1259,8 +1015,11 @@ function Ajax(url, opts = {}) {
         formData.set(k, value);
       }
     }
-    ajax.addEventListener("error", (e) => {
-      console.error("\u2718  Cradova Ajax err : ", e);
+    ajax.addEventListener("error", () => {
+      console.error(
+        "\u2718  Cradova Ajax err : ",
+        ajax.response || "ERR_INTERNET_DISCONNECTED"
+      );
       if (!navigator.onLine) {
         resolve(
           JSON.stringify({
@@ -1289,97 +1048,6 @@ function Ajax(url, opts = {}) {
   });
 }
 
-// lib/sacho/swipe1.ts
-function swipe(callback, touching = false, element) {
-  if (!(typeof callback === "function")) {
-    throw new Error(
-      " \u2718  Cradova err:  no function given for the swipe handler"
-    );
-  }
-  let touchingState = false;
-  let touchstartX = 0;
-  let touchstartY = 0;
-  let touchendX = 0;
-  let touchendY = 0;
-  function handleTouchStart(event) {
-    touchstartX = Math.round(event.changedTouches[0].clientX);
-    touchstartY = Math.round(event.changedTouches[0].clientY);
-  }
-  const capturedGesture = {
-    top: 0,
-    tap: 0,
-    down: 0,
-    left: 0,
-    right: 0,
-    touch: 0
-  };
-  function handleGesture(event) {
-    touchendX = Math.round(
-      event.changedTouches[event.changedTouches.length - 1].clientX
-    );
-    touchendY = Math.round(
-      event.changedTouches[event.changedTouches.length - 1].clientY
-    );
-    if (touching) {
-      capturedGesture.top = capturedGesture.down = capturedGesture.right = capturedGesture.left = capturedGesture.tap = capturedGesture.touch = 0;
-    }
-    if (touching) {
-      if (touchingState) {
-        handleTouchStart(event);
-        touchingState = false;
-      } else {
-        capturedGesture.top = capturedGesture.down = capturedGesture.right = capturedGesture.left = capturedGesture.tap = capturedGesture.touch = 0;
-        touchingState = true;
-      }
-    }
-    if (touchendX > touchstartX) {
-      capturedGesture.right = touchendX - touchstartX;
-    }
-    if (touchendX < touchstartX) {
-      capturedGesture.left = touchstartX - touchendX;
-    }
-    if (touchendY > touchstartY) {
-      capturedGesture.down = touchendY - touchstartY;
-    }
-    if (touchendY < touchstartY) {
-      capturedGesture.top = touchstartY - touchendY;
-    }
-    if (touchendY == touchstartY) {
-      capturedGesture.tap = touching ? 0 : 1;
-      capturedGesture.touch = touching ? 1 : 0;
-    }
-    const keys = Object.keys(capturedGesture);
-    let max = keys[0];
-    for (let i = 1; i < keys.length; i++) {
-      const value = keys[i];
-      if (capturedGesture[value] > capturedGesture[max])
-        max = value;
-    }
-    if (callback) {
-      callback({ [max]: capturedGesture[max] });
-    }
-  }
-  const escapeTSError = element || document.body;
-  return {
-    start() {
-      if (touching) {
-        escapeTSError?.addEventListener("touchmove", handleGesture);
-      } else {
-        escapeTSError?.addEventListener("touchstart", handleTouchStart);
-        escapeTSError?.addEventListener("touchend", handleGesture);
-      }
-    },
-    stop() {
-      if (touching) {
-        escapeTSError?.removeEventListener("touchmove", handleGesture);
-      } else {
-        escapeTSError?.removeEventListener("touchstart", handleTouchStart);
-        escapeTSError?.removeEventListener("touchend", handleGesture);
-      }
-    }
-  };
-}
-
 // lib/sacho/loadCss.ts
 function loadCradovaUICss(seconds = 0.3) {
   const css2 = `:root {
@@ -1579,12 +1247,6 @@ function loadCradovaUICss(seconds = 0.3) {
   document.head.appendChild(style);
 }
 
-// lib/scripts/utils.ts
-function IsElementInView(element) {
-  const rect = element.getBoundingClientRect();
-  return rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || window.document.documentElement.clientHeight) && rect.right <= (window.innerWidth || window.document.documentElement.clientWidth);
-}
-
 // lib/scripts/init.ts
 var Init = function() {
   if (document.querySelector("[data-cra-id=cradova-app-wrapper]")) {
@@ -1714,11 +1376,7 @@ var _ = (...element_initials) => {
           }
           try {
             if (child2 instanceof HTMLElement || child2 instanceof DocumentFragment) {
-              element.append(child2);
-            }
-            if (child2 && child2.afterMount) {
-              child2.afterMount(child2);
-              child2.afterMount = void 0;
+              element.appendChild(child2);
             }
           } catch (error) {
             console.error(" \u2718  Cradova err:  ", error);
@@ -1731,7 +1389,7 @@ var _ = (...element_initials) => {
           continue;
         }
         if (secondLevelChildren[i] instanceof HTMLElement || secondLevelChildren[i] instanceof DocumentFragment) {
-          element.append(secondLevelChildren[i]);
+          element.appendChild(secondLevelChildren[i]);
           continue;
         }
         if (Array.isArray(secondLevelChildren[i])) {
@@ -1756,11 +1414,7 @@ var _ = (...element_initials) => {
         }
         const child = secondLevelChildren[i];
         if (child instanceof HTMLElement || child instanceof DocumentFragment) {
-          element.append(child);
-          if (child.afterMount) {
-            child.afterMount(child);
-            child.afterMount = void 0;
-          }
+          element.appendChild(child);
         } else {
           if (typeof child === "object" && !Array.isArray(child) && !(child instanceof HTMLElement)) {
             if (!props) {
@@ -1791,7 +1445,6 @@ var _ = (...element_initials) => {
     if (props) {
       if (props.beforeMount) {
         beforeMount = props["beforeMount"];
-        props["beforeMount"] = void 0;
       }
       for (const prop in props) {
         if (prop === "style" && typeof props[prop] === "object") {
@@ -1820,7 +1473,6 @@ var _ = (...element_initials) => {
         }
         if (prop === "beforeMount") {
           beforeMount = props["beforeMount"];
-          props["beforeMount"] = void 0;
           continue;
         }
         if (prop === "stateID") {
@@ -1840,12 +1492,20 @@ var _ = (...element_initials) => {
           element.updateState = dispatch.bind(null, element);
           continue;
         }
+        if (prop === "afterMount" && typeof props["afterMount"] === "function") {
+          const av = () => {
+            props["afterMount"].apply(element);
+            window.removeEventListener("cradova-aftermount", av);
+          };
+          window.addEventListener("cradova-aftermount", av);
+          continue;
+        }
         try {
           if (typeof element[prop] !== "undefined") {
             element[prop] = props[prop];
           } else {
             element[prop] = props[prop];
-            if (prop !== "afterMount" && prop !== "for" && prop !== "text" && prop !== "class" && !prop.includes("aria")) {
+            if (prop !== "for" && prop !== "text" && prop !== "class" && !prop.includes("aria")) {
               console.error(" \u2718  Cradova err:  invalid html attribute " + prop);
             }
           }
@@ -1858,8 +1518,8 @@ var _ = (...element_initials) => {
     if (text) {
       element.innerText = text;
     }
-    if (beforeMount) {
-      beforeMount(element);
+    if (typeof beforeMount === "function") {
+      beforeMount.apply(element);
     }
     return element;
   };
@@ -1867,29 +1527,19 @@ var _ = (...element_initials) => {
 Init();
 var lib_default = _;
 export {
-  RefElement as $,
+  simpleStore as $,
   Ajax,
-  IsElementInView,
-  PromptBeforeLeave,
   Ref,
-  RefList,
   Router,
-  Scaffold,
   Screen,
-  animate,
   assert,
   assertOr,
-  controls,
+  cradovaAftermountEvent,
   createSignal,
   css,
   lib_default as default,
   dispatch,
   frag,
-  fullScreen,
   loadCradovaUICss,
-  ls,
-  media,
-  simpleStore,
-  swipe,
-  uuid
+  ls
 };