cradova 3.2.1 → 3.3.0

package/dist/index.js

@@ -8,1417 +8,13 @@
    ╚██████╗   ██║  ██║  ██║  ██║   ███████╔╝   ████████      ╚███╔╝   ██║  ██║ 
     ╚═════╝   ╚═╝  ╚═╝  ╚═╝  ╚═╝   ╚══════╝     ╚════╝        ╚══╝    ╚═╝  ╚═╝ 
 =============================================================================
-Cradova FrameWork
-@version  3.0.0
+Cradova
+@version  3.3.0
 License: Apache V2
 Copyright 2022 Friday Candour. 
 Repository - https://github.com/fridaycandour/cradova
 =============================================================================
 */
-// lib/parts/fns.ts
-var isNode = (element) => element instanceof HTMLElement || element instanceof DocumentFragment;
-var cradovaEvent = class {
-  constructor() {
-    this.listeners = {};
-  }
-  async addEventListener(eventName, callback) {
-    if (!this.listeners[eventName]) {
-      this.listeners[eventName] = [];
-    }
-    this.listeners[eventName].push(callback);
-  }
-  // removeEventListener(eventName: string, num: number) {
-  //   this.listeners[eventName].splice(num, 1);
-  // }
-  async dispatchEvent(eventName, eventArgs) {
-    const eventListeners = this.listeners[eventName] || [];
-    for (; eventListeners.length !== 0; ) {
-      eventListeners.shift()?.call(void 0, eventArgs);
-    }
-  }
-};
-var CradovaEvent = new cradovaEvent();
-function Rhoda(l) {
-  const fg = new DocumentFragment();
-  for (let ch of l) {
-    if (Array.isArray(ch)) {
-      fg.appendChild(Rhoda(ch));
-    } else {
-      if (ch instanceof Ref) {
-        ch = ch.render(void 0);
-      }
-      if (typeof ch === "function") {
-        ch = ch();
-        if (typeof ch === "function") {
-          ch = ch();
-        }
-      }
-      if (typeof ch === "string" || typeof ch === "number") {
-        fg.appendChild(document.createTextNode(ch));
-        continue;
-      }
-      if (isNode(ch)) {
-        fg.appendChild(ch);
-      } else {
-        if (typeof ch !== "undefined") {
-          throw new Error(
-            "  \u2718  Cradova err:  invalid child type: " + ch + " (" + typeof ch + ")"
-          );
-        }
-      }
-    }
-  }
-  return fg;
-}
-function css(identifier) {
-  if (Array.isArray(identifier)) {
-    identifier = identifier[0];
-  }
-  if (typeof identifier === "string") {
-    let styTag = document.querySelector("style");
-    if (styTag !== null) {
-      styTag.textContent = identifier + styTag.textContent;
-      return;
-    }
-    styTag = document.createElement("style");
-    styTag.textContent = identifier;
-    document.head.appendChild(styTag);
-  }
-}
-function assert(condition, ...elements) {
-  if (condition) {
-    return elements;
-  }
-  return void 0;
-}
-function assertOr(condition, ifTrue, ifFalse) {
-  if (condition) {
-    return ifTrue;
-  }
-  return ifFalse;
-}
-function loop(datalist2, component) {
-  if (typeof component !== "function") {
-    throw new Error(
-      " \u2718  Cradova err :  Invalid component type, must be a function that returns html  "
-    );
-  }
-  return Array.isArray(datalist2) ? datalist2.map(component) : void 0;
-}
-function SNRU(url) {
-  let key = 0;
-  for (let i2 = 0; i2 < url.length; i2++) {
-    key += url.charCodeAt(i2);
-  }
-  return key.toString();
-}
-var Ref = class {
-  constructor(component) {
-    this.effects = [];
-    this.effectuate = null;
-    this.rendered = false;
-    this.published = false;
-    this.preRendered = null;
-    this.reference = new reference();
-    //? hooks management
-    this._state = [];
-    this._state_track = {};
-    this._state_index = 0;
-    this.component = component.bind(this);
-    CradovaEvent.addEventListener("onTransition", () => {
-      this.current_id = SNRU(location.href);
-    });
-  }
-  preRender(data2, stash) {
-    this.reference._appendDomForce(
-      this.current_id,
-      this.render(data2, stash)
-    );
-  }
-  destroyPreRendered() {
-    this.preRendered = null;
-  }
-  /**
-   * Cradova Ref
-   * ---
-   * returns html with cradova reference
-   * @param data
-   * @returns () => HTMLElement
-   */
-  render(data2, stash) {
-    this.effects = [];
-    this.rendered = false;
-    let html = this.component(data2);
-    if (typeof html === "function") {
-      html = html();
-    }
-    if (!html) {
-      html = this.preRendered;
-    }
-    if (stash) {
-      this.stash = data2;
-    }
-    if (isNode(html)) {
-      this.current_id = SNRU(location.href);
-      this.reference._appendDomForce(
-        this.current_id,
-        html
-      );
-      this.effector.apply(this);
-      this.rendered = true;
-      this.published = true;
-    } else {
-      console.error(" \u2718  Cradova err :  Invalid html content, got  - " + html);
-    }
-    return html;
-  }
-  instance() {
-    this.current_id = SNRU(location.href);
-    return this.reference[this.current_id];
-  }
-  _setExtra(Extra) {
-    this.Signal = Extra;
-  }
-  _roll_state(data2, idx, get = false) {
-    if (!get) {
-      this._state[idx] = data2;
-    }
-    return this._state[idx];
-  }
-  _effect(fn) {
-    if (!this.rendered) {
-      this.effects.push(fn.bind(this));
-    }
-  }
-  async effector() {
-    if (!this.rendered) {
-      for (let i2 = 0; i2 < this.effects.length; i2++) {
-        await this.effects[i2].apply(this);
-      }
-      this.effects = [];
-    }
-    if (this.effectuate) {
-      this.effectuate();
-      this.effectuate = null;
-    }
-  }
-  /**
-   * Cradova Ref
-   * ---
-   * update ref component with new data and update the dom.
-   * @param data
-   * @returns
-   */
-  updateState(data2, stash) {
-    if (!this.rendered) {
-      this.effectuate = () => {
-        if (this.published) {
-          this.current_id = SNRU(location.href);
-          this.Activate(data2);
-        }
-      };
-    } else {
-      if (this.published) {
-        this.Activate(data2);
-      }
-    }
-    if (stash) {
-      this.stash = data2;
-    }
-  }
-  async Activate(data2) {
-    this._state_index = 0;
-    this.published = false;
-    if (!this.rendered) {
-      return;
-    }
-    let html = this.component(data2);
-    if (typeof html === "function") {
-      html = html();
-    }
-    if (isNode(html)) {
-      this.reference[this.current_id].insertAdjacentElement(
-        "beforebegin",
-        html
-      );
-      this.reference[this.current_id].remove();
-      this.published = true;
-      this.reference._appendDomForce(
-        this.current_id,
-        html
-      );
-      CradovaEvent.dispatchEvent("onmountEvent");
-    } else {
-      console.error(" \u2718  Cradova err :  Invalid html content, got  - " + html);
-    }
-  }
-};
-var frag = function(children) {
-  const par = document.createDocumentFragment();
-  for (let i2 = 0; i2 < children.length; i2++) {
-    let a2 = children[i2];
-    if (typeof a2 === "function") {
-      a2 = a2();
-    }
-    if (isNode(a2)) {
-      par.appendChild(a2);
-      continue;
-    }
-    if (a2 instanceof String) {
-      par.appendChild(document.createTextNode(a2));
-      continue;
-    }
-    console.error(" \u2718  Cradova err:   wrong element type" + a2);
-    throw new TypeError(" \u2718  Cradova err:   invalid element");
-  }
-  return par;
-};
-var lazy = class {
-  constructor(cb) {
-    this._cb = cb;
-  }
-  async load() {
-    let content = await this._cb();
-    if (typeof content === "function") {
-      content = await content();
-    } else {
-      content = await content;
-    }
-    const def = content;
-    if (def.default) {
-      this.content = def?.default;
-    }
-  }
-};
-var reference = class {
-  /**
-   * Bind a DOM element to a reference name.
-   * @param name - The name to reference the DOM element by.
-   */
-  bindAs(name) {
-    return [this, name];
-  }
-  /**
-   * Retrieve a referenced DOM element.
-   * @param name - The name of the referenced DOM element.
-   */
-  dom(name) {
-    return this[name];
-  }
-  /**
-   * Append a DOM element to the reference, overwriting any existing reference.
-   * @param name - The name to reference the DOM element by.
-   * @param element - The DOM element to reference.
-   */
-  _appendDomForce(name, Element) {
-    this[name] = Element;
-  }
-};
-function useState(initialValue, ActiveRef) {
-  ActiveRef._state_index += 1;
-  const idx = ActiveRef._state_index;
-  if (!ActiveRef._state_track[idx]) {
-    ActiveRef._roll_state(initialValue, idx);
-    ActiveRef._state_track[idx] = true;
-  }
-  function setState(newState) {
-    ActiveRef._roll_state(newState, idx);
-    ActiveRef.updateState(newState);
-  }
-  return [ActiveRef._roll_state(null, idx, true), setState];
-}
-function useEffect(effect, ActiveRef) {
-  ActiveRef._effect(effect);
-}
-function useRef() {
-  return new reference();
-}
+var p=r=>r instanceof HTMLElement||r instanceof DocumentFragment,T=class{constructor(){this.listeners={};this.active_listeners={};}async addEventListener(e,t){this.listeners[e]||(this.listeners[e]=[]),this.listeners[e].push(t);}async addActiveEventListener(e,t){this.listeners[e]||(this.listeners[e]=[]),this.active_listeners[e].push(t);}async dispatchEvent(e,t){let n=this.listeners[e]||[];for(;n.length!==0;)n.shift()(t);}async dispatchActiveEvent(e,t){let n=this.listeners[e]||[];n.length&&w();for(let o=0;o<n.length;o++)n[o](t);}},f=new T;function E(r){let e=new DocumentFragment;for(let t of r)if(Array.isArray(t))e.appendChild(E(t));else {if(t instanceof v&&(t=t.render(void 0)),typeof t=="function"&&(t=t(),typeof t=="function"&&(t=t())),typeof t=="string"||typeof t=="number"){e.appendChild(document.createTextNode(t));continue}if(p(t))e.appendChild(t);else if(typeof t<"u")throw new Error("  \u2718  Cradova err:  invalid child type: "+t+" ("+typeof t+")")}return e}function k(r){if(Array.isArray(r)&&(r=r[0]),typeof r=="string"){let e=document.querySelector("style");if(e!==null){e.textContent=r+e.textContent;return}e=document.createElement("style"),e.textContent=r,document.head.appendChild(e);}}function S(r,...e){if(r)return e}function C(r,e,t){return r?e:t}function R(r,...e){return t=>{if(t===r)return e}}function D(r,...e){if(e.length)for(let t=0;t<e.length;t++){let n=e[t],o=n(r);if(o)return o}}function P(r,e){if(typeof e!="function")throw new Error(" \u2718  Cradova err :  Invalid component type, must be a function that returns html  ");return Array.isArray(r)?r.map(e):void 0}var d;function w(){let r=0,e=window.location.href;for(let t=0;t<e.length;t++)r+=e.charCodeAt(t);d=r.toString();}var v=class{constructor(e,t){this.effects=[];this.effectuate=null;this.rendered=!1;this.published=!1;this.preRendered=null;this.reference=new u;this._state=[];this._state_track={};this._state_index=0;this.component=e.bind(this),t&&(t===!0||t.active)&&f.addActiveEventListener("active-Refs",()=>{this.updateState(this.stash);});}preRender(e,t){this.reference._appendDomForce("html",this.render(e,t));}destroyPreRendered(){this.preRendered=null;}define(e,t){typeof e=="string"&&typeof t=="function"&&!Object.prototype.hasOwnProperty.call(this,e)?this[e]=t.bind(this):console.error(" \u2718  Cradova err :  Invalid Ref.define parameters");}render(e,t){this.effects=[],this.rendered=!1;let n=this.component(e);return typeof n=="function"&&(n=n()),n||(n=this.preRendered),t&&(this.stash=e),p(n)?(this.reference._appendDomForce("html",n),this.effector.apply(this),this.rendered=!0,this.published=!0):console.error(" \u2718  Cradova err :  Invalid html content, got  - "+n),n}instance(){return this.reference.current("html")}_setExtra(e){this.Signal=e;}_roll_state(e,t,n=!1){return n||(this._state[t]=e),this._state[t]}_effect(e){this.rendered||this.effects.push(e.bind(this));}async effector(){if(!this.rendered){for(let e=0;e<this.effects.length;e++)await this.effects[e].apply(this);this.effects=[];}this.effectuate&&(this.effectuate(),this.effectuate=null);}updateState(e,t){this.rendered?this.published&&this.Activate(e):this.effectuate=()=>{this.published&&this.Activate(e);},t&&(this.stash=e);}async Activate(e){if(this._state_index=0,this.published=!1,!this.rendered)return;let t=this.component(e);if(typeof t=="function"&&(t=t()),p(t)){let n=this.reference.current("html");n&&(n.insertAdjacentElement("beforebegin",t),n.remove()),this.published=!0,this.reference._appendDomForce("html",t),f.dispatchEvent("onmountEvent");}else console.error(" \u2718  Cradova err :  Invalid html content, got  - "+t);}},A=function(r){let e=document.createDocumentFragment();for(let t=0;t<r.length;t++){let n=r[t];if(typeof n=="function"&&(n=n()),p(n)){e.appendChild(n);continue}if(n instanceof String){e.appendChild(document.createTextNode(n));continue}throw console.error(" \u2718  Cradova err:   wrong element type"+n),new TypeError(" \u2718  Cradova err:   invalid element")}return e},H=class{constructor(e){this._cb=e;}async load(){let e=await this._cb();typeof e=="function"?e=await e():e=await e;let t=e;t.default&&(this.content=t?.default);}},u=class{constructor(){this.tree={};this.globalTree={};}bindAs(e){return [this,e]}current(e){return this.tree[d]?this.tree[d][e]:null}_appendDomForce(e,t){this.tree[d]?this.tree[d][e]=t:(this.tree[d]={},this.tree[d][e]=t);}_appendDomForceGlobal(e,t){this.globalTree[e]=t;}};function N(r,e){e._state_index+=1;let t=e._state_index;e._state_track[t]||(e._roll_state(r,t),e._state_track[t]=!0);function n(o){e._roll_state(o,t),e.updateState(o);}return [e._roll_state(null,t,!0),n]}function F(r,e){e._effect(r);}function V(){return new u}var y=class{constructor(e,t){this.persistName="";this.actions={};this.ref=[];if(this.value=e,t&&t.persistName){this.persistName=t.persistName;let n=localStorage.getItem(t.persistName);if(n&&n!=="undefined"&&(this.value=JSON.parse(n)),typeof e=="object")for(let o in e)Object.prototype.hasOwnProperty.call(this.value,o)||(this.value[o]=e[o]);}}set(e,t){typeof e=="function"?this.value=e(this.value):this.value=e,this.persistName&&localStorage.setItem(this.persistName,JSON.stringify(this.value)),this.ref.length&&t!==!1&&this._updateState(),this.callback&&this.callback(this.value);}setKey(e,t,n){if(typeof this.value=="object"&&!Array.isArray(this.value))this.value[e]=t,this.persistName&&localStorage.setItem(this.persistName,JSON.stringify(this.value)),this.ref.length&&n!==!1&&this._updateState(),this.callback&&this.callback(this.value);else throw new Error(`\u2718  Cradova err : can't set key ${String(e)} . store.value is not a javascript object`)}createAction(e,t){if(typeof e=="string"&&typeof t=="function")this.actions[e]=t;else throw new Error(`\u2718  Cradova err : can't create action, ${e} is not a function`)}createActions(e){for(let[t,n]of Object.entries(e))if(typeof t=="string"&&typeof n=="function")this.actions[t]=n;else throw new Error(`\u2718  Cradova err : can't create action, ${t} is not a function`)}fireAction(e,t){if(this._updateState(e,t),typeof this.actions[e]=="function")return this.actions[e].call(this,t);throw Error("\u2718  Cradova err : action "+e+"  does not exist!")}bind(e){if(typeof this.value=="object"&&typeof this.value[e]<"u")return [this,e];throw new Error("\u2718  Cradova err : can't bind an unavailable property!  "+e)}_updateState(e,t){if(e&&t)this.ref.map(n=>{if(n._event===e){if(n._element_property&&n._signalProperty){n.ref?.updateState({[n._element_property]:t[n._signalProperty]});return}if(n._element_property){n.ref.updateState({[n._element_property]:t});return}if(n._signalProperty){n.ref.updateState(t[n._signalProperty]);return}}});else for(let n=0;n<this.ref.length;n++){let o=this.ref[n];if(o._element_property&&o._signalProperty){o.ref.updateState({[o._element_property]:this.value[o._signalProperty]});continue}if(o._element_property){o.ref.updateState({[o._element_property]:this.value});continue}if(o._signalProperty){o.ref.updateState(this.value[o._signalProperty]);continue}if(!o._element_property&&!o._signalProperty){o.ref.updateState(this.value);continue}}}bindRef(e,t={signalProperty:"",_element_property:""}){if(e.render&&(e.render=e.render.bind(e,this.value)),e._setExtra&&e._setExtra(this),e&&e.updateState){this.ref.push({ref:e,_signalProperty:t.signalProperty,_element_property:t._element_property,_event:t.event});return}throw new Error("\u2718  Cradova err :  Invalid parameters for binding ref to Signal")}listen(e){this.callback=e;}clearPersist(){this.persistName&&localStorage.removeItem(this.persistName);}};var m=new u,h=class{constructor(e){this._packed=!1;this._template=document.createElement("div");this._persist=!0;this._delegatedRoutesCount=-1;this._dropped=!1;this._errorHandler=null;let{template:t,name:n,persist:o,renderInParallel:s}=e;this._html=t,this._name=n||"Document",this._template.setAttribute("id","cradova-screen-set"),s===!0?(this._delegatedRoutesCount=0,this._persist=!1):typeof o=="boolean"&&(this._persist=o);}_derive(){return {_name:this._name,_callBack:this._callBack,_deCallBack:this._deCallBack}}_apply_derivation(e){this._name=e._name,this._callBack=e._callBack,this._deCallBack=e._deCallBack;}get _delegatedRoutes(){return this._delegatedRoutesCount>100?-1:this._delegatedRoutesCount}set _delegatedRoutes(e){e&&(this._delegatedRoutesCount+=1);}setErrorHandler(e){this._errorHandler=e;}async _package(){if(typeof this._html=="function"){let e=await this._html.apply(this);if(typeof e=="function")e=e(),p(e)&&(this._template.innerHTML="",this._template.appendChild(e));else if(p(e))this._template.innerHTML="",this._template.appendChild(e);else throw new Error(` \u2718  Cradova err:  template function for the screen with name '${this._name}' returned ${e} instead of html`)}}onActivate(e){this._callBack=e;}onDeactivate(e){this._deCallBack=e;}async _deActivate(){this._deCallBack&&await this._deCallBack(m.globalTree.doc);}drop(e){if(typeof e=="boolean"){this._dropped=e;return}else return this._dropped}async _Activate(e=!1){if(this._dropped){history.go(-1);return}!this._persist||e||!this._packed?(w(),await this._package(),this._packed=!0):f.dispatchActiveEvent("active-Refs"),document.title=this._name,m.globalTree.doc.innerHTML="",m.globalTree.doc.appendChild(this._template),f.dispatchEvent("onmountEvent"),window.scrollTo({top:0,left:0,behavior:"instant"}),this._callBack&&await this._callBack(m.globalTree.doc);}};var a={};a.lastNavigatedRouteController=null;a.nextRouteController=null;a.lastNavigatedRoute=null;a.pageShow=null;a.pageHide=null;a.errorHandler=null;a.loadingScreen=null;a.params={};a.routes={};a.pageevents=[];a.paused=!1;a.start_pageevents=async function(r){setTimeout(()=>{for(let e=0;e<a.pageevents.length;e++)a.pageevents[e](r);},100);};var L=r=>{if(a.routes[r])return [a.routes[r],{path:r}];if(a.routes[r+"/"])return [a.routes[r],{path:r}];for(let e in a.routes){if(!e.includes(":"))continue;let t=r.split("/"),n=e.split("/");r.endsWith("/")&&t.pop();let o=0,s=0;if(t.shift(),n.shift(),n.length===t.length){let l={_path:""};for(let c=0;c<n.length;c++){if(n[c].includes(":")){s++;continue}t[c]===n[c]&&o++;}if(o+s===n.length){for(let c=0;c<n.length;c++)n[c].includes(":")&&(l[n[c].split(":")[1]]=t[c]);return l._path=e,[a.routes[e],l]}}}return []};a.route=(r,e)=>{if(typeof e<"u"){if(e&&!e._Activate)throw console.error(" \u2718  Cradova err:  not a valid screen  ",e),new Error(" \u2718  Cradova err:  Not a valid cradova screen component");return a.routes[r]=e}};a.router=async function(r,e){let t=window.location.pathname,n,o;if(a.paused){window.location.hash="paused";return}if(t!==a.lastNavigatedRoute)if(a.nextRouteController?(n=a.nextRouteController,a.nextRouteController=null):[n,o]=L(t),typeof n<"u")try{if(typeof n=="function"&&(a.LoadingScreen&&a.LoadingScreen._Activate&&await a.LoadingScreen._Activate(),n=await n(),!n)){a.lastNavigatedRoute&&history.pushState({},t,a.lastNavigatedRoute);return}if(n._delegatedRoutes!==-1){n._delegatedRoutes=!0;let s=n._derive();n=new h({template:n._html}),n._apply_derivation(s),a.routes[t]=n;}o&&(a.params.params=o),await n._Activate(e),a.start_pageevents(t),a.lastNavigatedRouteController&&a.lastNavigatedRouteController._deActivate(),a.lastNavigatedRoute=t,a.lastNavigatedRouteController=n;}catch(s){if(n&&n._errorHandler)n._errorHandler(s);else if(a.errorHandler)a.errorHandler(s);else throw console.error(s),new Error(" \u2718  Cradova err:  consider adding error boundary to the specific screen  ")}else a.routes["*"]&&await a.routes["*"]._Activate(e);};var g=class{static BrowserRoutes(e){for(let t in e){let n=e[t];typeof n=="object"&&typeof n.then=="function"||typeof n=="function"?a.routes[t]=async()=>(n=await(typeof n=="function"?await n():await n),a.route(t,n?.default||n)):a.route(t,n);}g._mount();}static back(){history.go(-1);}static forward(){history.go(1);}static pauseNaviagtion(){a.paused=!0,window.location.hash="paused";}static resumeNaviagtion(){a.paused=!1,window.location.replace(window.location.pathname+window.location.search),history.go(-1);}static navigate(e,t=null,n=!1){if(typeof e!="string")throw new TypeError(" \u2718  Cradova err:  href must be a defined path but got "+e+" instead");let o=null,s;if(e.includes("://"))window.location.href=e;else {if(e===window.location.pathname)return;[o,s]=L(e),o&&(a.nextRouteController=o,window.history.pushState({},"",e)),a.params.params=s,a.params.data=t,a.router(null,n);}}static navigateNauturally(e){if(typeof e!="string")throw new TypeError(" \u2718  Cradova err:  pathname must be a defined path but got "+e+" instead");window.location.pathname=e;}static setLoadingScreen(e){if(e instanceof h)a.LoadingScreen=e;else throw new Error(" \u2718  Cradova err:  Loading Screen should be a cradova screen class")}static onPageEvent(e){if(typeof e=="function")a.pageevents.push(e);else throw new Error(" \u2718  Cradova err:  callback for pageShow event is not a function")}static async packageScreen(e,t={}){if(!a.routes[e])throw console.error(" \u2718  Cradova err:  no screen with path "+e),new Error(" \u2718  Cradova err:  cradova err: Not a defined screen path");let[n,o]=L(e);!n._Activate&&typeof n=="function"&&(n=await n()),n._delegatedRoutes!==-1&&(n._delegatedRoutes=!0,n=new h({name:n._name,template:n._html}),a.routes[e]=n),n._package(Object.assign(t,o||{})),n._packed=!0;}static getParams(){return a.params}static addErrorHandler(e){if(typeof e=="function")a.errorHandler=e;else throw new Error(" \u2718  Cradova err:  callback for error event is not a function")}static _mount(){let e=document.querySelector("[data-wrapper=app]");e?m._appendDomForceGlobal("doc",e):(e=document.createElement("div"),e.setAttribute("data-wrapper","app"),document.body.appendChild(e),m._appendDomForceGlobal("doc",e)),window.addEventListener("pageshow",a.router),window.addEventListener("popstate",t=>{t.preventDefault(),a.router();});}};var _=(r,e)=>{let t={},n=null;if(e.length!==0)for(let o=0;o<e.length;o++){let s=e[o];if(typeof s=="function"&&(s=s()),s instanceof v&&(s=s.render()),p(s)){r.appendChild(s);continue}if(Array.isArray(s)){r.appendChild(E(s));continue}if(typeof s=="string"||typeof s=="number"){n=s;continue}if(typeof s=="object"){t=Object.assign(t,s);continue}}else return r;if(typeof t=="object"&&r)for(let[o,s]of Object.entries(t)){if(o==="style"&&typeof s=="object"){Object.assign(r.style,s);continue}if(Array.isArray(s)){if(o=="reference"&&s[0]instanceof u){s[0]._appendDomForce(s[1],r);continue}if(s[0]instanceof y){s[0].bindRef(r,{_element_property:o,signalProperty:s[1]});continue}}if(o==="onmount"&&typeof t.onmount=="function"){let l=()=>{t.onmount?.apply(r),t.onmount=void 0;};f.addEventListener("onmountEvent",l);continue}if(o.includes("data-")){r.setAttribute(o,s);continue}if(o.includes("aria-")){r.setAttribute(o,s);continue}if(o==="href"&&typeof s=="string"){let l=s||"";l.includes("://")||r.addEventListener("click",c=>{c.preventDefault(),g.navigate(r.pathname);if(l.includes("#")){let b=l.split("#").at(-1);document.getElementById("#"+b)?.scrollIntoView();}}),r.setAttribute(o,s);continue}if(typeof r.style[o]<"u"&&o!=="src"){r.style[o]=s;continue}r[o]=s;}return n&&r.appendChild(document.createTextNode(n)),r},x=function(r){if(typeof r!="string")return [];Array.isArray(r)&&(r=r[0]);let e="";if(r.includes("|")&&([r,e]=r.split("|"),!r))return ["P",void 0,void 0,e];let t;if(r.includes("#")){if(!r.includes("."))return r=r.split("#"),t=r.shift(),t||(t="DIV"),r[0].includes(" ")&&(r=[r[0].split(" ")[1]]),[t,r[0],void 0,e]}else return r=r.split("."),t=r.shift(),t||(t="DIV"),[t,void 0,r.join(" "),e];r=r.split(".");let n=[],o=[];t=!r[0].includes("#")&&r.shift(),t||(t="DIV");for(let s=0;s<r.length;s++){if(r[s].includes("#")){let l=r[s].split("#");if(o.push(l[1]),s===0){t=l[0];continue}n.push(l[0]);continue}n.push(r[s]);}return [t,o[0],n.join(" "),e]},i=r=>(...t)=>_(document.createElement(r),t),Q=i("a"),W=i("article"),X=i("audio"),Z=i("br"),z=i("button"),ee=i("canvas"),te=i("caption"),ne=i("col"),re=i("colgroup"),oe=i("datalist"),ae=i("details"),ie=i("dialog"),se=i("div"),le=i("em"),ce=i("embed"),pe=i("figure"),ue=i("footer"),de=i("form"),fe=i("h1"),me=i("h2"),he=i("h3"),ge=i("h4"),ve=i("h5"),ye=i("h6"),_e=i("head"),Te=i("header"),Ee=i("hr"),we=i("i"),Le=i("iframe"),He=i("img"),xe=i("input"),be=i("label"),Me=i("li"),ke=i("main"),Se=i("nav"),Ce=i("ol"),Re=i("optgroup"),De=i("option"),Pe=i("p"),Ae=i("progress"),Ne=i("q"),Fe=i("section"),Ve=i("select"),Be=i("source"),Je=i("span"),Ie=i("strong"),je=i("summary"),Oe=i("table"),Ye=i("tbody"),$e=i("td"),Ge=i("template"),Ue=i("textarea"),qe=i("th"),Ke=i("title"),Qe=i("tr"),We=i("track"),Xe=i("u"),Ze=i("ul"),ze=i("video"),et=(r,e)=>{let t=document.createElement("span");return t.innerHTML=r,_(t,[e])},tt=r=>{let e=document.createElement("div");return e.innerHTML=r,Array.from(e.children)};var M=(...r)=>{let{0:e,1:t,2:n,3:o}=x(r[0]),s=e?document.createElement(e):new DocumentFragment;return e&&(n&&(s.className=n),t&&(s.id=t),o&&(s.innerText=o),r.shift()),_(s,r)},ot=M;
 
-// lib/parts/track.ts
-function dispatch(element, state) {
-  if (!element) {
-    return;
-  }
-  if (typeof state === "object" && !Array.isArray(state)) {
-    for (const key in state) {
-      if (key === "style" && typeof state[key] === "object") {
-        for (const [k, v] of Object.entries(state[key])) {
-          if (typeof element.style[k] !== "undefined" && k !== "src" && typeof v === "string") {
-            element.style[k] = v;
-          } else {
-            throw new Error(
-              "\u2718  Cradova err : " + k + " is not a valid css style property"
-            );
-          }
-        }
-        continue;
-      }
-      const stateK = state;
-      if (typeof element[key] === "function") {
-        if (key.startsWith("on")) {
-          element[key] = stateK[key];
-        } else {
-          element[key].apply(element);
-        }
-        continue;
-      }
-      if (key === "text") {
-        element.innerText = stateK[key];
-        continue;
-      }
-      if (key === "tree") {
-        element.innerHTML = "";
-        element.appendChild(frag([stateK[key]]));
-        continue;
-      }
-      if (key.includes("data-")) {
-        element.setAttribute(key, stateK[key]);
-        continue;
-      }
-      element[key] = stateK[key];
-    }
-  }
-  if (typeof state === "string") {
-    element.innerText = state;
-    return;
-  }
-  if (typeof state === "function") {
-    element.appendChild(frag([state]));
-    return;
-  }
-  if (state instanceof HTMLElement) {
-    element.appendChild(state);
-  }
-  if (!(typeof state === "object" && !Array.isArray(state))) {
-    throw new Error(
-      " \u2718  Cradova err: Cradova got invalid state  => \n" + String(state)
-    );
-  }
-}
-
-// lib/parts/createSignal.ts
-var createSignal = class {
-  constructor(initial, props) {
-    this.persistName = "";
-    this.actions = {};
-    this.ref = [];
-    this.value = initial;
-    if (props && props.persistName) {
-      this.persistName = props.persistName;
-      const key = localStorage.getItem(props.persistName);
-      if (key && key !== "undefined") {
-        this.value = JSON.parse(key);
-      }
-      if (typeof initial === "object") {
-        for (const key2 in initial) {
-          if (!Object.prototype.hasOwnProperty.call(this.value, key2)) {
-            this.value[key2] = initial[key2];
-          }
-        }
-      }
-    }
-  }
-  /**
-   *  Cradova Signal
-   * ----
-   *  set signal value
-   * @param value - signal value
-   * @returns void
-   */
-  set(value, shouldRefRender) {
-    if (typeof value === "function") {
-      this.value = value(this.value);
-    } else {
-      this.value = value;
-    }
-    if (this.persistName) {
-      localStorage.setItem(this.persistName, JSON.stringify(this.value));
-    }
-    if (this.ref.length && shouldRefRender !== false) {
-      this._updateState();
-    }
-    if (this.callback) {
-      this.callback(this.value);
-    }
-  }
-  /**
-   *  Cradova Signal
-   * ----
-   *  set a key value if it's an object
-   * @param key - key of the key
-   * @param value - value of the key
-   * @returns void
-   */
-  setKey(key, value, shouldRefRender) {
-    if (typeof this.value === "object" && !Array.isArray(this.value)) {
-      this.value[key] = value;
-      if (this.persistName) {
-        localStorage.setItem(this.persistName, JSON.stringify(this.value));
-      }
-      if (this.ref.length && shouldRefRender !== false) {
-        this._updateState();
-      }
-      if (this.callback) {
-        this.callback(this.value);
-      }
-    } else {
-      throw new Error(
-        `\u2718  Cradova err : can't set key ${String(
-          key
-        )} . store.value is not a javascript object`
-      );
-    }
-  }
-  /**
-   *  Cradova Signal
-   * ----
-   *  set a key to signal an action
-   * @param name - name of the action
-   * @param action function to execute
-   */
-  createAction(name, action) {
-    if (typeof name === "string" && typeof action === "function") {
-      this.actions[name] = action;
-    } else {
-      throw new Error(
-        `\u2718  Cradova err : can't create action, ${name} is not a function`
-      );
-    }
-  }
-  /**
-   *  Cradova Signal
-   * ----
-   *  creates man y actions at a time
-   * @param name - name of the action
-   * @param action function to execute
-   */
-  createActions(Actions) {
-    for (const [name, action] of Object.entries(Actions)) {
-      if (typeof name === "string" && typeof action === "function") {
-        this.actions[name] = action;
-      } else {
-        throw new Error(
-          `\u2718  Cradova err : can't create action, ${name} is not a function`
-        );
-      }
-    }
-  }
-  /**
-   *  Cradova Signal
-   * ----
-   *  fires an action if available
-   * @param key - string key of the action
-   * @param data - data for the action
-   */
-  fireAction(key, data2) {
-    this._updateState(key, data2);
-    if (typeof this.actions[key] === "function") {
-      return this.actions[key].call(this, data2);
-    } else {
-      throw Error("\u2718  Cradova err : action " + key + "  does not exist!");
-    }
-  }
-  /**
-   * Cradova
-   * ---
-   * is used to bind signal data to elements and Refs
-   *
-   * @param prop
-   * @returns something
-   */
-  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
-      );
-    }
-  }
-  _updateState(name, data2) {
-    if (name && data2) {
-      this.ref.map((ent) => {
-        if (ent._event === name) {
-          if (ent._element_property && ent._signalProperty) {
-            ent.ref?.updateState({
-              [ent._element_property]: data2[ent._signalProperty]
-            });
-            return;
-          }
-          if (ent._element_property) {
-            ent.ref.updateState({
-              [ent._element_property]: data2
-            });
-            return;
-          }
-          if (ent._signalProperty) {
-            ent.ref.updateState(data2[ent._signalProperty]);
-            return;
-          }
-        }
-      });
-    } else {
-      for (let i2 = 0; i2 < this.ref.length; i2++) {
-        const ent = this.ref[i2];
-        if (ent._element_property && ent._signalProperty) {
-          ent.ref.updateState({
-            [ent._element_property]: this.value[ent._signalProperty]
-          });
-          continue;
-        }
-        if (ent._element_property) {
-          ent.ref.updateState({
-            [ent._element_property]: this.value
-          });
-          continue;
-        }
-        if (ent._signalProperty) {
-          ent.ref.updateState(this.value[ent._signalProperty]);
-          continue;
-        }
-        if (!ent._element_property && !ent._signalProperty) {
-          ent.ref.updateState(this.value);
-          continue;
-        }
-      }
-    }
-  }
-  /**
-   *  Cradova Signal
-   * ----
-   *  set a auto - rendering component for this store
-   *
-   * @param Ref component to bind to.
-   * @param path a property in the object to send to attached ref
-   */
-  bindRef(ref, binding = { signalProperty: "", _element_property: "" }) {
-    if (ref.render) {
-      ref.render = ref.render.bind(ref, this.value);
-    }
-    if (ref._setExtra) {
-      ref._setExtra(this);
-    }
-    if (ref && ref.updateState) {
-      this.ref.push({
-        ref,
-        _signalProperty: binding.signalProperty,
-        _element_property: binding._element_property,
-        _event: binding.event
-      });
-      return;
-    }
-    throw new Error(
-      "\u2718  Cradova err :  Invalid parameters for binding ref to Signal"
-    );
-  }
-  /**
-   *  Cradova Signal
-   * ----
-   *  set a update listener on value changes
-   * @param callback
-   */
-  listen(callback) {
-    this.callback = callback;
-  }
-  /**
-   *  Cradova Signal
-   * ----
-   * clear the history on local storage
-   *
-   */
-  clearPersist() {
-    if (this.persistName) {
-      localStorage.removeItem(this.persistName);
-    }
-  }
-};
-
-// lib/parts/Screen.ts
-var localTree = new reference();
-var Screen = class {
-  constructor(cradova_screen_initials) {
-    /**
-     * error handler for the screen
-     */
-    this._errorHandler = null;
-    this._packed = false;
-    this._template = document.createElement("div");
-    this._persist = true;
-    this._delegatedRoutesCount = -1;
-    this._dropped = false;
-    const { template: template2, name, persist, renderInParallel, transition } = cradova_screen_initials;
-    this._html = template2;
-    this._name = name;
-    this._transition = transition;
-    this._template.setAttribute("id", "cradova-screen-set");
-    if (renderInParallel === true) {
-      this._delegatedRoutesCount = 0;
-      this._persist = false;
-    } else {
-      if (typeof persist === "boolean") {
-        this._persist = persist;
-      }
-    }
-  }
-  get _delegatedRoutes() {
-    if (this._delegatedRoutesCount > 100) {
-      return -1;
-    }
-    return this._delegatedRoutesCount;
-  }
-  set _delegatedRoutes(count) {
-    if (count) {
-      this._delegatedRoutesCount += 1;
-    }
-  }
-  setErrorHandler(errorHandler) {
-    this._errorHandler = errorHandler;
-  }
-  async _package() {
-    if (typeof this._html === "function") {
-      let fuc = await this._html.apply(this);
-      if (typeof fuc === "function") {
-        fuc = fuc();
-        if (isNode(fuc)) {
-          this._template.innerHTML = "";
-          this._template.appendChild(fuc);
-        }
-      } else {
-        if (isNode(fuc)) {
-          this._template.innerHTML = "";
-          this._template.appendChild(fuc);
-        } else {
-          throw new Error(
-            ` \u2718  Cradova err:  template function for the screen with name '${this._name}' returned ${fuc} instead of html`
-          );
-        }
-      }
-    }
-  }
-  onActivate(cb) {
-    this._callBack = cb;
-  }
-  onDeactivate(cb) {
-    this._deCallBack = cb;
-  }
-  async _deActivate() {
-    if (this._deCallBack) {
-      await this._deCallBack();
-    }
-    if (this._transition) {
-      this._template.classList.remove(this._transition);
-    }
-  }
-  drop(state) {
-    if (typeof state === "boolean") {
-      this._dropped = state;
-      return void 0;
-    } else
-      return this._dropped;
-  }
-  async _Activate(force = false) {
-    if (this._dropped) {
-      history.go(-1);
-      return;
-    }
-    if (!this._persist || force || !this._packed) {
-      await this._package();
-      this._packed = true;
-    }
-    if (this._transition) {
-      this._template.classList.add(this._transition);
-    }
-    document.title = this._name;
-    localTree.doc.innerHTML = "";
-    localTree.doc.appendChild(this._template);
-    CradovaEvent.dispatchEvent("onmountEvent");
-    window.scrollTo({
-      top: 0,
-      left: 0,
-      // @ts-ignore
-      behavior: "instant"
-    });
-    if (this._callBack) {
-      await this._callBack();
-    }
-  }
-};
-
-// lib/parts/Router.ts
-var RouterBox = {};
-RouterBox["lastNavigatedRouteController"] = null;
-RouterBox["nextRouteController"] = null;
-RouterBox["lastNavigatedRoute"] = null;
-RouterBox["pageShow"] = null;
-RouterBox["pageHide"] = null;
-RouterBox["errorHandler"] = null;
-RouterBox["loadingScreen"] = null;
-RouterBox["params"] = {};
-RouterBox["routes"] = {};
-RouterBox["pageevents"] = [];
-RouterBox["paused"] = false;
-RouterBox["start_pageevents"] = async function(url) {
-  setTimeout(() => {
-    for (let ci = 0; ci < RouterBox["pageevents"].length; ci++) {
-      RouterBox["pageevents"][ci](url);
-    }
-  }, 100);
-};
-var checker = (url) => {
-  if (RouterBox.routes[url]) {
-    return [RouterBox.routes[url], { path: url }];
-  }
-  if (RouterBox.routes[url + "/"]) {
-    return [RouterBox.routes[url], { path: url }];
-  }
-  for (const path in RouterBox.routes) {
-    if (!path.includes(":")) {
-      continue;
-    }
-    const urlFixtures = url.split("/");
-    const pathFixtures = path.split("/");
-    if (url.endsWith("/")) {
-      urlFixtures.pop();
-    }
-    let fixturesX = 0;
-    let fixturesY = 0;
-    urlFixtures.shift();
-    pathFixtures.shift();
-    if (pathFixtures.length === urlFixtures.length) {
-      const routesParams = { _path: "" };
-      for (let i2 = 0; i2 < pathFixtures.length; i2++) {
-        if (pathFixtures[i2].includes(":")) {
-          fixturesY++;
-          continue;
-        }
-        if (urlFixtures[i2] === pathFixtures[i2]) {
-          fixturesX++;
-        }
-      }
-      if (fixturesX + fixturesY === pathFixtures.length) {
-        for (let i2 = 0; i2 < pathFixtures.length; i2++) {
-          if (pathFixtures[i2].includes(":")) {
-            routesParams[pathFixtures[i2].split(":")[1]] = urlFixtures[i2];
-          }
-        }
-        routesParams._path = path;
-        return [RouterBox.routes[path], routesParams];
-      }
-    }
-  }
-  return [];
-};
-RouterBox.route = (path, screen) => {
-  if (typeof screen !== "undefined") {
-    if (screen && !screen._Activate) {
-      console.error(" \u2718  Cradova err:  not a valid screen  ", screen);
-      throw new Error(" \u2718  Cradova err:  Not a valid cradova screen component");
-    }
-    return RouterBox.routes[path] = screen;
-  }
-  return void 0;
-};
-RouterBox.router = async function(_e, _force) {
-  let url = window.location.pathname, route, params;
-  if (RouterBox["paused"]) {
-    window.location.hash = "paused";
-    return;
-  }
-  if (url === RouterBox["lastNavigatedRoute"]) {
-    return;
-  }
-  if (RouterBox["nextRouteController"]) {
-    route = RouterBox["nextRouteController"];
-    RouterBox["nextRouteController"] = null;
-  } else {
-    [route, params] = checker(url);
-  }
-  if (typeof route !== "undefined") {
-    try {
-      if (typeof route === "function") {
-        if (RouterBox["LoadingScreen"] && RouterBox["LoadingScreen"]._Activate) {
-          await RouterBox["LoadingScreen"]._Activate();
-        }
-        route = await route();
-        if (!route) {
-          if (RouterBox["lastNavigatedRoute"]) {
-            history.pushState({}, url, RouterBox["lastNavigatedRoute"]);
-          }
-          return;
-        }
-      }
-      if (route._delegatedRoutes !== -1) {
-        route._delegatedRoutes = true;
-        route = new Screen({
-          name: route._name,
-          template: route._html
-        });
-        RouterBox.routes[url] = route;
-        CradovaEvent.dispatchEvent("onTransition");
-      }
-      if (params) {
-        RouterBox.params.params = params;
-      }
-      await route._Activate(_force);
-      RouterBox["start_pageevents"](url);
-      RouterBox["lastNavigatedRouteController"] && RouterBox["lastNavigatedRouteController"]._deActivate();
-      RouterBox["lastNavigatedRoute"] = url;
-      RouterBox["lastNavigatedRouteController"] = route;
-    } catch (error) {
-      if (route && route["_errorHandler"]) {
-        route._errorHandler(error);
-      } else {
-        if (RouterBox["errorHandler"]) {
-          RouterBox["errorHandler"](error);
-        } else {
-          console.error(error);
-          throw new Error(
-            " \u2718  Cradova err:  consider adding error boundary to the specific screen  "
-          );
-        }
-      }
-    }
-  } else {
-    if (RouterBox.routes["/*"]) {
-      await RouterBox.routes["/*"]._Activate(_force);
-    }
-  }
-};
-var Router = class {
-  /** cradova router
-   * ---
-   * Registers a route.
-   *
-   * accepts an object containing
-   *
-   * @param {string}   path     Route path.
-   * @param  screen the cradova screen.
-   */
-  static BrowserRoutes(obj) {
-    for (const path in obj) {
-      let screen = obj[path];
-      if (typeof screen === "object" && typeof screen.then === "function" || typeof screen === "function") {
-        RouterBox["routes"][path] = async () => {
-          screen = await (typeof screen === "function" ? await screen() : await screen);
-          return RouterBox.route(path, screen?.default || screen);
-        };
-      } else {
-        RouterBox.route(path, screen);
-      }
-    }
-    Router._mount();
-  }
-  /** 
-    Go back in Navigation history
-    */
-  static back() {
-    history.go(-1);
-  }
-  /** 
-    Go forward in Navigation history
-    */
-  static forward() {
-    history.go(1);
-  }
-  /** 
-    Pause navigation
-    */
-  static pauseNaviagtion() {
-    RouterBox["paused"] = true;
-    window.location.hash = "paused";
-  }
-  /** 
-   resume navigation
-  */
-  static resumeNaviagtion() {
-    RouterBox["paused"] = false;
-    window.location.replace(window.location.pathname + window.location.search);
-    history.go(-1);
-  }
-  /**
-   * Cradova Router
-   * ------
-   *
-   * Navigates to a designated screen in your app
-   *
-   * @param href string
-   * @param data object
-   * @param force boolean
-   */
-  static navigate(href, data2 = null, force = false) {
-    if (typeof href !== "string") {
-      throw new TypeError(
-        " \u2718  Cradova err:  href must be a defined path but got " + href + " instead"
-      );
-    }
-    let route = null, params;
-    if (href.includes("://")) {
-      window.location.href = href;
-    } else {
-      if (href === window.location.pathname) {
-        return;
-      }
-      [route, params] = checker(href);
-      if (route) {
-        RouterBox["nextRouteController"] = route;
-        window.history.pushState({}, "", href);
-      }
-      RouterBox.params.params = params;
-      RouterBox.params.data = data2;
-      RouterBox.router(null, force);
-    }
-  }
-  /**
-   * Cradova Router
-   * ------
-   *
-   * Navigates to a designated screen in your app by loading a seperate page;
-   *
-   * @param pathname string
-   */
-  static navigateNauturally(pathname) {
-    if (typeof pathname !== "string") {
-      throw new TypeError(
-        " \u2718  Cradova err:  pathname must be a defined path but got " + pathname + " instead"
-      );
-    }
-    window.location.pathname = pathname;
-  }
-  /**
-   * Cradova
-   * ---
-   * Loading screen for your app
-   *
-   * lazy loaded loading use
-   *
-   * @param screen
-   */
-  static setLoadingScreen(screen) {
-    if (screen instanceof Screen) {
-      RouterBox["LoadingScreen"] = screen;
-    } else {
-      throw new Error(
-        " \u2718  Cradova err:  Loading Screen should be a cradova screen class"
-      );
-    }
-  }
-  /** cradova router
-   * ---
-   * Listen for navigation events
-   *
-   * @param callback   () => void
-   */
-  static onPageEvent(callback) {
-    if (typeof callback === "function") {
-      RouterBox["pageevents"].push(callback);
-    } else {
-      throw new Error(
-        " \u2718  Cradova err:  callback for pageShow event is not a function"
-      );
-    }
-  }
-  /** cradova router
-   * ---
-   * get a screen ready before time.
-   *
-   * @param {string}   path Route path.
-   * @param  data data for the screen.
-   */
-  static async packageScreen(path, data2 = {}) {
-    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"
-      );
-    }
-    let [route, params] = checker(path);
-    if (!route._Activate && typeof route === "function") {
-      route = await route();
-    }
-    if (route._delegatedRoutes !== -1) {
-      route._delegatedRoutes = true;
-      route = new Screen({
-        name: route._name,
-        template: route._html
-      });
-      RouterBox.routes[path] = route;
-    }
-    route._package(Object.assign(data2, params || {}));
-    route._packed = true;
-  }
-  /**
-   * Cradova Router
-   * ------
-   *
-   * return last set router params
-   *
-   * .
-   */
-  static getParams() {
-    return RouterBox["params"];
-  }
-  /**
-   * Cradova
-   * ---
-   * Error Handler for your app
-   *
-   * @param callback
-   * @param path? page path
-   */
-  static addErrorHandler(callback) {
-    if (typeof callback === "function") {
-      RouterBox["errorHandler"] = callback;
-    } else {
-      throw new Error(
-        " \u2718  Cradova err:  callback for error event is not a function"
-      );
-    }
-  }
-  static _mount() {
-    let doc = document.querySelector("[data-wrapper=app]");
-    if (!doc) {
-      doc = document.createElement("div");
-      doc.setAttribute("data-wrapper", "app");
-      document.body.appendChild(doc);
-      localTree._appendDomForce("doc", doc);
-    } else {
-      localTree._appendDomForce("doc", doc);
-    }
-    window.addEventListener("pageshow", RouterBox.router);
-    window.addEventListener("popstate", (_e) => {
-      _e.preventDefault();
-      RouterBox.router();
-    });
-  }
-};
-
-// lib/parts/elements.ts
-var makeElement = (element, ElementChildrenAndPropertyList) => {
-  let props = {}, text = null;
-  if (ElementChildrenAndPropertyList.length !== 0) {
-    for (let i2 = 0; i2 < ElementChildrenAndPropertyList.length; i2++) {
-      let child = ElementChildrenAndPropertyList[i2];
-      if (typeof child === "function") {
-        child = child();
-      }
-      if (child instanceof Ref) {
-        child = child.render();
-      }
-      if (isNode(child)) {
-        element.appendChild(child);
-        continue;
-      }
-      if (Array.isArray(child)) {
-        element.appendChild(Rhoda(child));
-        continue;
-      }
-      if (typeof child === "string" || typeof child === "number") {
-        text = child;
-        continue;
-      }
-      if (typeof child === "object") {
-        props = Object.assign(props, child);
-        continue;
-      }
-    }
-  } else {
-    return element;
-  }
-  if (typeof props === "object" && element) {
-    for (const [prop, value] of Object.entries(props)) {
-      if (prop === "style" && typeof value === "object") {
-        Object.assign(element.style, value);
-        continue;
-      }
-      if (Array.isArray(value)) {
-        if (value[0] instanceof createSignal) {
-          element["updateState"] = dispatch.bind(null, element);
-          value[0].bindRef(
-            element,
-            {
-              _element_property: prop,
-              signalProperty: value[1]
-            }
-          );
-          continue;
-        }
-        if (prop == "reference" && value[0] instanceof reference) {
-          element["updateState"] = dispatch.bind(null, element);
-          value[0]._appendDomForce(
-            value[1],
-            element
-          );
-          continue;
-        }
-      }
-      if (prop === "onmount" && typeof props["onmount"] === "function") {
-        const ev = () => {
-          props.onmount?.apply(element);
-          props["onmount"] = void 0;
-        };
-        CradovaEvent.addEventListener("onmountEvent", ev);
-        continue;
-      }
-      if (prop.includes("data-")) {
-        element.setAttribute(prop, value);
-        continue;
-      }
-      if (prop.includes("aria-")) {
-        element.setAttribute(prop, value);
-        continue;
-      }
-      if (prop === "href" && typeof value === "string") {
-        const href = value || "";
-        if (!href.includes("://")) {
-          element.addEventListener(
-            "click",
-            (e) => {
-              e.preventDefault();
-              Router.navigate(
-                element.pathname
-              );
-              if (href.includes("#")) {
-                const l = href.split("#").at(-1);
-                document.getElementById("#" + l)?.scrollIntoView();
-              }
-            }
-          );
-        }
-        element.setAttribute(prop, value);
-        continue;
-      }
-      if (typeof element.style[prop] !== "undefined" && prop !== "src") {
-        element.style[prop] = value;
-        continue;
-      }
-      element[prop] = value;
-    }
-  }
-  if (text) {
-    element.appendChild(document.createTextNode(text));
-  }
-  return element;
-};
-var make = function(descriptor) {
-  if (typeof descriptor !== "string") {
-    return [];
-  }
-  if (Array.isArray(descriptor)) {
-    descriptor = descriptor[0];
-  }
-  let innerValue = "";
-  if (descriptor.includes("|")) {
-    [descriptor, innerValue] = descriptor.split("|");
-    if (!descriptor) {
-      return ["P", void 0, void 0, innerValue];
-    }
-  }
-  let tag;
-  if (!descriptor.includes("#")) {
-    descriptor = descriptor.split(".");
-    tag = descriptor.shift();
-    if (!tag) {
-      tag = "DIV";
-    }
-    return [tag, void 0, descriptor.join(" "), innerValue];
-  } else {
-    if (!descriptor.includes(".")) {
-      descriptor = descriptor.split("#");
-      tag = descriptor.shift();
-      if (!tag) {
-        tag = "DIV";
-      }
-      if (descriptor[0].includes(" ")) {
-        descriptor = [descriptor[0].split(" ")[1]];
-      }
-      return [tag, descriptor[0], void 0, innerValue];
-    }
-  }
-  descriptor = descriptor.split(".");
-  const classes = [];
-  const IDs = [];
-  tag = !descriptor[0].includes("#") && descriptor.shift();
-  if (!tag) {
-    tag = "DIV";
-  }
-  for (let i2 = 0; i2 < descriptor.length; i2++) {
-    if (descriptor[i2].includes("#")) {
-      const item = descriptor[i2].split("#");
-      IDs.push(item[1]);
-      if (i2 === 0) {
-        tag = item[0];
-        continue;
-      }
-      classes.push(item[0]);
-      continue;
-    }
-    classes.push(descriptor[i2]);
-  }
-  return [tag, IDs[0], classes.join(" "), innerValue];
-};
-var cra = (tag) => {
-  const extend = (...Children_and_Properties) => makeElement(document.createElement(tag), Children_and_Properties);
-  return extend;
-};
-var a = cra("a");
-var area = cra("area");
-var article = cra("article");
-var aside = cra("aside");
-var audio = cra("audio");
-var b = cra("b");
-var base = cra("base");
-var blockquote = cra("blockquote");
-var br = cra("br");
-var button = cra("button");
-var canvas = cra("canvas");
-var caption = cra("caption");
-var code = cra("code");
-var col = cra("col");
-var colgroup = cra("colgroup");
-var data = cra("data");
-var datalist = cra("datalist");
-var details = cra("details");
-var dialog = cra("dialog");
-var div = cra("div");
-var em = cra("em");
-var embed = cra("embed");
-var figure = cra("figure");
-var footer = cra("footer");
-var form = cra("form");
-var h1 = cra("h1");
-var h2 = cra("h2");
-var h3 = cra("h3");
-var h4 = cra("h4");
-var h5 = cra("h5");
-var h6 = cra("h6");
-var head = cra("head");
-var header = cra("header");
-var hr = cra("hr");
-var i = cra("i");
-var iframe = cra("iframe");
-var img = cra("img");
-var input = cra("input");
-var label = cra("label");
-var legend = cra("legend");
-var li = cra("li");
-var link = cra("link");
-var main = cra("main");
-var menu = cra("menu");
-var nav = cra("nav");
-var object = cra("object");
-var ol = cra("ol");
-var optgroup = cra("optgroup");
-var option = cra("option");
-var p = cra("p");
-var pre = cra("pre");
-var progress = cra("progress");
-var q = cra("q");
-var section = cra("section");
-var select = cra("select");
-var source = cra("source");
-var span = cra("span");
-var strong = cra("strong");
-var summary = cra("summary");
-var table = cra("table");
-var tbody = cra("tbody");
-var td = cra("td");
-var template = cra("template");
-var textarea = cra("textarea");
-var th = cra("th");
-var title = cra("title");
-var tr = cra("tr");
-var track = cra("track");
-var u = cra("u");
-var ul = cra("ul");
-var video = cra("video");
-var svg = (svg2, properties) => {
-  const span2 = document.createElement("span");
-  span2.innerHTML = svg2;
-  return makeElement(span2, [properties]);
-};
-
-// lib/parts/ajax.ts
-function Ajax(url, opts = {}) {
-  const { method, data: data2, header: header2, callbacks } = opts;
-  if (typeof url !== "string") {
-    throw new Error("\u2718  Cradova err : Ajax invalid url " + url);
-  }
-  return new Promise(function(resolve, reject) {
-    const ajax = new XMLHttpRequest();
-    const formData = new FormData();
-    if (callbacks && typeof callbacks === "object") {
-      for (const [k, v] of Object.entries(callbacks)) {
-        ajax.addEventListener(k, v);
-      }
-    }
-    ajax.addEventListener("load", function() {
-      resolve(ajax.response);
-    });
-    if (data2 && typeof data2 === "object") {
-      for (const [k, v] of Object.entries(data2)) {
-        let value = v;
-        if (typeof value === "object" && value && !value.name) {
-          value = JSON.stringify(value);
-          formData.set(k, value);
-        }
-        if (typeof value === "string") {
-          formData.set(k, value);
-        }
-      }
-    }
-    ajax.addEventListener("error", () => {
-      if (!navigator.onLine) {
-        reject(
-          JSON.stringify({
-            message: `this device is offline!`
-          })
-        );
-      } else {
-        reject(
-          JSON.stringify({
-            message: `problem with the action, please try again!`
-          })
-        );
-      }
-    });
-    if (!method) {
-      ajax.open(data2 && typeof data2 === "object" ? "POST" : "GET", url, true);
-    } else {
-      ajax.open(method, url, true);
-    }
-    if (header2 && typeof header2 === "object") {
-      Object.keys(header2).forEach(function(key) {
-        ajax.setRequestHeader(key, header2[key]);
-      });
-    }
-    ajax.send(formData);
-  });
-}
-
-// lib/index.ts
-var _2 = (...element_initials) => {
-  const {
-    0: tag,
-    1: id,
-    2: className,
-    3: innerText
-  } = make(element_initials[0]);
-  const element = tag ? document.createElement(tag) : new DocumentFragment();
-  if (tag) {
-    if (className) {
-      element.className = className;
-    }
-    if (id) {
-      element.id = id;
-    }
-    if (innerText) {
-      element.innerText = innerText;
-    }
-    element_initials.shift();
-  }
-  return makeElement(element, element_initials);
-};
-var lib_default = _2;
-//! get url hash here and scroll into view
-
-export { Ajax, CradovaEvent, Ref, Rhoda, Router, Screen, a, area, article, aside, assert, assertOr, audio, b, base, blockquote, br, button, canvas, caption, code, col, colgroup, createSignal, css, data, datalist, lib_default as default, details, dialog, div, em, embed, figure, footer, form, frag, h1, h2, h3, h4, h5, h6, head, header, hr, i, iframe, img, input, isNode, label, lazy, legend, li, link, loop, main, make, makeElement, menu, nav, object, ol, optgroup, option, p, pre, progress, q, reference, section, select, source, span, strong, summary, svg, table, tbody, td, template, textarea, th, title, tr, track, u, ul, useEffect, useRef, useState, video };
+export { R as $case, S as $if, C as $ifelse, D as $switch, f as CradovaEvent, v as Ref, E as Rhoda, g as Router, h as Screen, Q as a, W as article, X as audio, Z as br, z as button, ee as canvas, te as caption, ne as col, re as colgroup, y as createSignal, k as css, oe as datalist, ot as default, ae as details, ie as dialog, se as div, le as em, ce as embed, pe as figure, ue as footer, de as form, A as frag, fe as h1, me as h2, he as h3, ge as h4, ve as h5, ye as h6, _e as head, Te as header, Ee as hr, we as i, Le as iframe, He as img, xe as input, p as isNode, be as label, H as lazy, Me as li, P as loop, ke as main, x as make, _ as makeElement, w as memo_SNRU, Se as nav, Ce as ol, Re as optgroup, De as option, Pe as p, Ae as progress, Ne as q, tt as raw, u as reference, Fe as section, Ve as select, Be as source, Je as span, Ie as strong, je as summary, et as svg, Oe as table, Ye as tbody, $e as td, Ge as template, Ue as textarea, qe as th, Ke as title, Qe as tr, We as track, Xe as u, Ze as ul, F as useEffect, V as useRef, N as useState, ze as video };