@simonbackx/vue-app-navigation 1.28.0 → 2.0.0-alpha.0

package/dist/index.js

@@ -0,0 +1,2008 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import { inject, markRaw, proxyRefs, getCurrentInstance, provide, queuePostFlushCb, onBeforeUnmount, onActivated, onBeforeMount, onMounted, onUpdated, warn, h, setTransitionHooks, callWithAsyncErrorHandling, ErrorCodes, shallowRef, computed, unref, resolveComponent, openBlock, createElementBlock, createElementVNode, createVNode, isRef, createBlock, Transition, withCtx, createCommentVNode, defineComponent, ref, onDeactivated, normalizeClass, Fragment, renderList, withModifiers } from "vue";
+class HistoryManagerStatic {
+  constructor() {
+    // undoActions: Map<number, (animate: boolean) => void> = new Map();
+    __publicField(this, "states", []);
+    __publicField(this, "counter", 0);
+    __publicField(this, "active", false);
+    __publicField(this, "animateHistoryPop", true);
+    __publicField(this, "isAdjustingState", false);
+    __publicField(this, "manualStateAction", false);
+    // Manipulating the history is async and can cause issues when fast calls happen without awaiting the previous one
+    __publicField(this, "historyQueue", []);
+    __publicField(this, "isQueueRunning", false);
+  }
+  addToQueue(action) {
+    this.historyQueue.push(action);
+    if (!this.isQueueRunning) {
+      this.runQueue();
+    }
+  }
+  runQueue() {
+    this.isQueueRunning = true;
+    const action = this.historyQueue.shift();
+    if (action) {
+      console.log("Running history queue action");
+      action().finally(() => this.runQueue()).catch(console.error);
+    } else {
+      console.log("History queue done");
+      this.isQueueRunning = false;
+    }
+  }
+  go(delta) {
+    this.addToQueue(async () => {
+      return new Promise((resolve) => {
+        this.manualStateAction = true;
+        console.log("history.go", delta);
+        history.go(delta);
+        let timer = void 0;
+        const listener = () => {
+          clearTimeout(timer);
+          resolve();
+          window.removeEventListener("popstate", listener);
+        };
+        window.addEventListener("popstate", listener);
+        timer = setTimeout(() => {
+          console.warn("Timeout while waiting for history.go");
+          listener();
+        }, 200);
+      });
+    });
+  }
+  /// Set the current URL without modifying states
+  setUrl(url) {
+    if (!this.active) {
+      return;
+    }
+    if (ComponentWithProperties.debug) {
+      console.log("Set url: " + url + ", current counter: " + this.counter);
+    }
+    const count = this.states[this.states.length - 1].index;
+    this.addToQueue(async () => {
+      if (ComponentWithProperties.debug) {
+        console.log("history.replaceState", count, url);
+      }
+      history.replaceState({ counter: count }, "", url);
+    });
+    this.states[this.states.length - 1].url = url;
+  }
+  pushState(url, undoAction, adjustHistory) {
+    if (!this.active) {
+      return;
+    }
+    this.counter++;
+    this.states.push({
+      url,
+      index: this.counter,
+      adjustHistory,
+      undoAction
+    });
+    const c = this.counter;
+    if (adjustHistory) {
+      this.addToQueue(async () => {
+        if (ComponentWithProperties.debug) {
+          console.log("history.pushState", c, url);
+        }
+        history.pushState({ counter: c }, "", url);
+      });
+    } else {
+      this.addToQueue(async () => {
+        if (ComponentWithProperties.debug) {
+          console.log("history.replaceState", c, url);
+        }
+        history.replaceState({ counter: c }, "", url);
+      });
+    }
+    if (ComponentWithProperties.debug) {
+      console.log("Push new state ", this.states[this.states.length - 1]);
+    }
+  }
+  /**
+   * Return to a given history point in time, if needed
+   */
+  returnToHistoryIndex(counter) {
+    if (ComponentWithProperties.debug) {
+      console.log("Did return to history index " + counter + ", coming from " + this.counter);
+    }
+    if (counter < this.counter) {
+      this.counter = counter;
+      const deletedStates = this.states.splice(this.counter + 1);
+      const adjustHistoryCount = deletedStates.filter((state) => state.adjustHistory).length;
+      if (adjustHistoryCount > 0) {
+        if (ComponentWithProperties.debug) {
+          console.log("Adjusting browser history state: popping " + adjustHistoryCount + " items");
+        }
+        this.go(-adjustHistoryCount);
+      }
+      if (!this.states[this.counter].adjustHistory && this.states[this.counter].url) {
+        if (ComponentWithProperties.debug) {
+          console.log("Setting manual url without history api: " + this.states[this.counter].url);
+        }
+        this.setUrl(this.states[this.counter].url);
+      }
+    }
+    return this.counter;
+  }
+  activate() {
+    window.addEventListener("popstate", (event) => {
+      var _a;
+      if (ComponentWithProperties.debug) {
+        console.log("HistoryManager popstate");
+      }
+      if (this.isAdjustingState) {
+        console.warn("Duplicate popstate");
+        return;
+      }
+      if (this.manualStateAction) {
+        this.manualStateAction = false;
+        return;
+      }
+      this.isAdjustingState = true;
+      const newCounter = (_a = event.state) == null ? void 0 : _a.counter;
+      if (newCounter !== void 0) {
+        if (newCounter > this.counter) {
+          const amount = newCounter - this.counter;
+          this.go(-amount);
+          if (ComponentWithProperties.debug) {
+            console.log("Not allowed to go forward, going back " + amount + " steps");
+          }
+        } else {
+          const animate = this.counter - newCounter == 1 && this.animateHistoryPop;
+          this.counter = newCounter;
+          const deletedStates = this.states.splice(this.counter + 1);
+          for (const state of deletedStates.reverse()) {
+            if (state.undoAction) {
+              if (ComponentWithProperties.debug) {
+                console.log("Executing undoAction...");
+              }
+              state.undoAction(animate);
+            }
+          }
+        }
+      }
+      this.isAdjustingState = false;
+    });
+    this.active = true;
+    history.replaceState({ counter: this.counter }, "");
+    this.states.push({
+      index: this.counter,
+      adjustHistory: false,
+      url: "/"
+    });
+  }
+}
+const HistoryManager = new HistoryManagerStatic();
+function useCurrentComponent() {
+  return inject("navigation_currentComponent");
+}
+function getExposeProxy(instance) {
+  if (!instance.exposed) {
+    return;
+  }
+  if (instance.exposeProxy) {
+    return instance.exposeProxy;
+  }
+  const extendingProxy = instance.proxy;
+  instance.exposeProxy = new Proxy(proxyRefs(markRaw(instance.exposed)), {
+    get(target, key) {
+      if (key in target) {
+        return target[key];
+      }
+      return extendingProxy[key];
+    },
+    has(target, key) {
+      return key in target || key in extendingProxy;
+    }
+  });
+  return instance.exposeProxy;
+}
+const _ComponentWithProperties = class _ComponentWithProperties {
+  constructor(component, properties = {}) {
+    /// Name of component or component Options. Currently no way to force type
+    __publicField(this, "component");
+    __publicField(this, "properties");
+    __publicField(this, "key");
+    __publicField(this, "type", null);
+    __publicField(this, "hide", false);
+    /// Saved vnode of this instance
+    __publicField(this, "vnode", null);
+    __publicField(this, "unmount", null);
+    // Keep the vnode alive when it is removed from the VDOM
+    __publicField(this, "keepAlive", false);
+    __publicField(this, "isKeptAlive", false);
+    __publicField(this, "isMounted", false);
+    /// Cover whole screen. Other style = popup
+    __publicField(this, "modalDisplayStyle", "cover");
+    // If the display animation should be animated
+    __publicField(this, "animated", true);
+    // Hisotry index
+    __publicField(this, "historyIndex", null);
+    __publicField(this, "isContainerView", false);
+    this.component = component;
+    this.properties = properties;
+    this.key = _ComponentWithProperties.keyCounter++;
+    markRaw(this);
+  }
+  clone() {
+    return new _ComponentWithProperties(this.component, this.properties);
+  }
+  beforeMount() {
+    if (_ComponentWithProperties.debug)
+      console.log("Before mount: " + this.component.name);
+    if (this.vnode) {
+      if (this.isKeptAlive) {
+        this.isKeptAlive = false;
+        _ComponentWithProperties.keepAliveCounter--;
+        if (_ComponentWithProperties.debug)
+          console.log("Total components kept alive: " + _ComponentWithProperties.keepAliveCounter);
+      } else {
+        if (_ComponentWithProperties.debug)
+          console.warn("About to mount a component that was not destroyed properly " + this.component.name);
+        this.destroy(this.vnode);
+      }
+    }
+    if (this.isContainerView) {
+      if (this.historyIndex === null) {
+        this.historyIndex = HistoryManager.counter;
+      }
+      return;
+    }
+    if (this.modalDisplayStyle == "overlay") {
+      return;
+    }
+    this.assignHistoryIndex();
+  }
+  getHistoryIndex() {
+    if (this.component)
+      return this.historyIndex;
+  }
+  mounted() {
+    if (_ComponentWithProperties.debug)
+      console.log("Component mounted: " + this.component.name);
+    this.isMounted = true;
+    _ComponentWithProperties.ignoreActivate = this;
+  }
+  onMountedChildComponent(child) {
+    this.isContainerView = true;
+    if (_ComponentWithProperties.debug)
+      console.log("Container mounted child component: " + this.component.name + " got " + child.component.name);
+  }
+  onActivatedChildComponent(child) {
+    this.isContainerView = true;
+    if (_ComponentWithProperties.debug)
+      console.log("Container got activated child component: " + this.component.name + " got " + child.component.name);
+  }
+  /**
+   * Call this method to assign a history index to this component (you should only call this when you want to assign a history index to this component that will not get mounted already)
+   */
+  assignHistoryIndex() {
+    if (!HistoryManager.active) {
+      console.warn("HistoryManager is disabled.");
+      return;
+    }
+    if (this.historyIndex == null) {
+      if (_ComponentWithProperties.debug)
+        console.log("Assigned history index: " + this.component.name + " = " + HistoryManager.counter);
+      this.historyIndex = HistoryManager.counter;
+    } else {
+      this.historyIndex = HistoryManager.returnToHistoryIndex(this.historyIndex);
+    }
+  }
+  activated() {
+    if (_ComponentWithProperties.debug)
+      console.log("Component activated: " + this.component.name);
+    if (_ComponentWithProperties.ignoreActivate === this) {
+      if (_ComponentWithProperties.debug)
+        console.log("Ignore component activation: " + this.component.name);
+      _ComponentWithProperties.ignoreActivate = null;
+      return;
+    }
+    _ComponentWithProperties.ignoreActivate = null;
+    if (this.isContainerView) {
+      return;
+    }
+    if (this.modalDisplayStyle == "overlay") {
+      return;
+    }
+    if (!HistoryManager.active) {
+      return;
+    }
+    if (this.historyIndex !== null) {
+      this.historyIndex = HistoryManager.returnToHistoryIndex(this.historyIndex);
+    }
+  }
+  componentInstance() {
+    var _a, _b, _c, _d;
+    if (!((_a = this.vnode) == null ? void 0 : _a.component)) {
+      return null;
+    }
+    return getExposeProxy((_b = this.vnode) == null ? void 0 : _b.component) || ((_d = (_c = this.vnode) == null ? void 0 : _c.component) == null ? void 0 : _d.proxy);
+  }
+  async shouldNavigateAway() {
+    const instance = this.componentInstance();
+    if (instance && instance.shouldNavigateAway) {
+      const promise = instance.shouldNavigateAway();
+      if (typeof promise === "boolean") {
+        if (!promise) {
+          return false;
+        }
+      } else if (promise.then && promise.catch) {
+        const r = await promise;
+        if (!r) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+  destroy(vnode) {
+    this.isMounted = false;
+    if (this.vnode) {
+      if (vnode !== this.vnode) {
+        console.warn("Received destroy event from old/different vnode", this.vnode, vnode);
+        return;
+      }
+      if (this.keepAlive) {
+        this.keepAlive = false;
+        if (!this.isKeptAlive) {
+          this.isKeptAlive = true;
+          _ComponentWithProperties.keepAliveCounter++;
+          if (_ComponentWithProperties.debug)
+            console.log("Kept component alive " + this.component.name);
+          if (_ComponentWithProperties.debug)
+            console.log("Total components kept alive: " + _ComponentWithProperties.keepAliveCounter);
+        }
+        return;
+      }
+      if (this.isKeptAlive) {
+        this.isKeptAlive = false;
+        _ComponentWithProperties.keepAliveCounter--;
+        if (_ComponentWithProperties.debug)
+          console.log("Freed component from alive stack " + this.component.name);
+        if (_ComponentWithProperties.debug)
+          console.log("Total components kept alive: " + _ComponentWithProperties.keepAliveCounter);
+      }
+      if (_ComponentWithProperties.debug)
+        console.log("Destroyed component " + this.component.name, this.vnode);
+      if (this.unmount) {
+        this.unmount(this.vnode);
+        this.unmount = null;
+      } else {
+        console.error("No unmount function for component " + this.vnode);
+      }
+      this.vnode = null;
+    }
+  }
+  setDisplayStyle(style) {
+    this.modalDisplayStyle = style;
+    return this;
+  }
+  setAnimated(animated) {
+    this.animated = animated;
+    return this;
+  }
+};
+// Counter for debugging. Count of components that are kept alive but are not mounted.
+__publicField(_ComponentWithProperties, "keepAliveCounter", 0);
+__publicField(_ComponentWithProperties, "keyCounter", 0);
+__publicField(_ComponentWithProperties, "debug", false);
+__publicField(_ComponentWithProperties, "ignoreActivate", null);
+let ComponentWithProperties = _ComponentWithProperties;
+/**
+* @vue/shared v3.4.25
+* (c) 2018-present Yuxi (Evan) You and Vue contributors
+* @license MIT
+**/
+!!(process.env.NODE_ENV !== "production") ? Object.freeze({}) : {};
+!!(process.env.NODE_ENV !== "production") ? Object.freeze([]) : [];
+const invokeArrayFns = (fns, arg) => {
+  for (let i = 0; i < fns.length; i++) {
+    fns[i](arg);
+  }
+};
+const ShapeFlags = {
+  "ELEMENT": 1,
+  "1": "ELEMENT",
+  "FUNCTIONAL_COMPONENT": 2,
+  "2": "FUNCTIONAL_COMPONENT",
+  "STATEFUL_COMPONENT": 4,
+  "4": "STATEFUL_COMPONENT",
+  "TEXT_CHILDREN": 8,
+  "8": "TEXT_CHILDREN",
+  "ARRAY_CHILDREN": 16,
+  "16": "ARRAY_CHILDREN",
+  "SLOTS_CHILDREN": 32,
+  "32": "SLOTS_CHILDREN",
+  "TELEPORT": 64,
+  "64": "TELEPORT",
+  "SUSPENSE": 128,
+  "128": "SUSPENSE",
+  "COMPONENT_SHOULD_KEEP_ALIVE": 256,
+  "256": "COMPONENT_SHOULD_KEEP_ALIVE",
+  "COMPONENT_KEPT_ALIVE": 512,
+  "512": "COMPONENT_KEPT_ALIVE",
+  "COMPONENT": 6,
+  "6": "COMPONENT"
+};
+function invokeVNodeHook(hook, instance, vnode, prevVNode = null) {
+  callWithAsyncErrorHandling(hook, instance, ErrorCodes.VNODE_HOOK, [
+    vnode,
+    prevVNode
+  ]);
+}
+function getInnerChild(vnode) {
+  return vnode.shapeFlag & ShapeFlags.SUSPENSE ? vnode.ssContent : vnode;
+}
+function resetShapeFlag(vnode) {
+  vnode.shapeFlag &= ~ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE;
+  vnode.shapeFlag &= ~ShapeFlags.COMPONENT_KEPT_ALIVE;
+}
+function makeProvidesParentReactive(instance) {
+  var _a;
+  const reactiveInstance = shallowRef(instance);
+  const originalProvides = instance.provides;
+  const ownProvides = instance.provides === ((_a = instance.parent) == null ? void 0 : _a.provides) ? [] : Object.getOwnPropertyNames(originalProvides);
+  const proxyProvider = new Proxy({}, {
+    get(_target, key) {
+      if (typeof key !== "string" || !key.startsWith("reactive_")) {
+        return originalProvides[key];
+      }
+      if (key in ownProvides) {
+        return originalProvides[key];
+      }
+      return computed(() => {
+        var _a2;
+        return unref((_a2 = reactiveInstance.value.parent) == null ? void 0 : _a2.provides[key]);
+      });
+    },
+    // Vue valides keys using 'a' in obj, so we need to handle this correctly
+    has(target, key) {
+      return true;
+    }
+  });
+  instance.provides = Object.create(proxyProvider);
+  return reactiveInstance;
+}
+const ComponentWithPropertiesInstance = {
+  props: {
+    component: {
+      type: ComponentWithProperties,
+      required: true
+    },
+    customProvide: {
+      required: false,
+      type: Object,
+      default: null
+    }
+  },
+  __isKeepAlive: true,
+  setup(props) {
+    const instance = getCurrentInstance();
+    const sharedContext = instance.ctx;
+    const reactiveInstance = makeProvidesParentReactive(instance);
+    if (props.customProvide) {
+      for (const key in props.customProvide) {
+        provide(key, props.customProvide[key]);
+      }
+    }
+    provide("navigation_currentComponent", props.component);
+    const {
+      renderer: {
+        //p: patch,
+        m: move,
+        um: _unmount,
+        o: { createElement }
+      }
+    } = sharedContext;
+    const storageContainer = createElement("div");
+    const parentSuspense = instance.suspense;
+    sharedContext.activate = (vnode, container, anchor, namespace, optimized) => {
+      const instance2 = vnode.component;
+      move(vnode, container, anchor, 0, parentSuspense);
+      queuePostFlushCb(() => {
+        instance2.isDeactivated = false;
+        if (instance2.a) {
+          invokeArrayFns(instance2.a);
+        }
+        const vnodeHook = vnode.props && vnode.props.onVnodeMounted;
+        if (vnodeHook) {
+          invokeVNodeHook(vnodeHook, instance2.parent, vnode);
+        }
+      });
+    };
+    sharedContext.deactivate = (vnode) => {
+      const instance2 = vnode.component;
+      move(vnode, storageContainer, null, 1, parentSuspense);
+      queuePostFlushCb(() => {
+        if (instance2.da) {
+          invokeArrayFns(instance2.da);
+        }
+        const vnodeHook = vnode.props && vnode.props.onVnodeUnmounted;
+        if (vnodeHook) {
+          invokeVNodeHook(vnodeHook, instance2.parent, vnode);
+        }
+        instance2.isDeactivated = true;
+      });
+    };
+    function unmount(vnode) {
+      if (current) {
+        const { subTree } = instance;
+        const _innerVnode = getInnerChild(subTree);
+        if (vnode.type === _innerVnode.type && vnode.key === _innerVnode.key) {
+          resetShapeFlag(_innerVnode);
+          const da = _innerVnode.component.da;
+          da && queuePostFlushCb(da);
+          return;
+        }
+      }
+      resetShapeFlag(vnode);
+      _unmount(vnode, instance, parentSuspense, true);
+    }
+    let current = null;
+    function getChildVNode() {
+      var _a, _b, _c, _d;
+      return (_d = (_c = (_b = (_a = instance.vnode) == null ? void 0 : _a.component) == null ? void 0 : _b.subTree) == null ? void 0 : _c.component) == null ? void 0 : _d.vnode;
+    }
+    onBeforeUnmount(() => {
+      if (!current) {
+        return;
+      }
+      const child = getChildVNode();
+      if (!child) {
+        console.error("No child found in ComponentWithPropertiesInstance.beforeUnmount");
+        return;
+      }
+      if (props.component.unmount === unmount) {
+        props.component.destroy(getChildVNode());
+      } else {
+        console.warn("ComponentWithPropertiesInstance unmount called with different unmount function");
+      }
+      current = null;
+    });
+    onActivated(() => {
+      props.component.activated();
+    });
+    onBeforeMount(() => {
+      props.component.beforeMount();
+    });
+    let pendingCacheKey = null;
+    const cacheSubtree = () => {
+      if (current && pendingCacheKey != null) {
+        const child = getChildVNode();
+        if (!child) {
+          console.error("No child found in ComponentWithPropertiesInstance.cacheSubtree");
+          return;
+        }
+        props.component.vnode = child;
+        props.component.unmount = unmount;
+        child._reactiveInstance = reactiveInstance;
+      }
+    };
+    onMounted(cacheSubtree);
+    onUpdated(cacheSubtree);
+    return () => {
+      pendingCacheKey = null;
+      if (!props.component) {
+        warn("No component provided to ComponentWithPropertiesInstance");
+        current = null;
+        return null;
+      }
+      const vnode = h(props.component.component, props.component.properties);
+      const comp = vnode.type;
+      const key = vnode.key == null ? comp : vnode.key;
+      pendingCacheKey = key;
+      if (props.component.vnode) {
+        const cachedVNode = props.component.vnode;
+        const parent = instance;
+        vnode.el = cachedVNode.el;
+        vnode.component = cachedVNode.component;
+        if (!cachedVNode._reactiveInstance) {
+          console.warn("Missing _reactiveInstance on vnode");
+        } else {
+          cachedVNode._reactiveInstance.value = parent;
+        }
+        if (vnode.transition) {
+          setTransitionHooks(vnode, vnode.transition);
+        }
+        vnode.shapeFlag |= ShapeFlags.COMPONENT_KEPT_ALIVE;
+      }
+      vnode.shapeFlag |= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE;
+      current = vnode;
+      return vnode;
+    };
+  }
+};
+const _sfc_main$4 = {
+  components: {
+    ComponentWithPropertiesInstance
+  },
+  provide() {
+    return {
+      ...this.customProvide ?? {}
+    };
+  },
+  props: {
+    root: {
+      type: ComponentWithProperties,
+      required: true
+    },
+    customProvide: {
+      type: Object,
+      default: null
+    }
+  },
+  emits: ["show", "push", "pop"]
+};
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ComponentWithPropertiesInstance = resolveComponent("ComponentWithPropertiesInstance");
+  return openBlock(), createElementBlock("div", null, [
+    createElementVNode("div", null, [
+      createVNode(_component_ComponentWithPropertiesInstance, { component: $props.root }, null, 8, ["component"])
+    ])
+  ]);
+}
+const FramedComponent = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$6]]);
+function usePop() {
+  const rawPop = inject("reactive_navigation_pop", null);
+  return (options) => {
+    const pop = unref(rawPop);
+    if (!pop) {
+      console.warn("Failed to perform pop");
+      return;
+    }
+    return pop(options);
+  };
+}
+function useShowDetail() {
+  const rawShowDetail = inject("reactive_navigation_show_detail");
+  return (options) => {
+    const showDetail = unref(rawShowDetail);
+    if (!showDetail) {
+      console.warn("Failed to perform showDetail");
+      return Promise.resolve();
+    }
+    if (!options.components) {
+      return showDetail({ components: [options] });
+    }
+    return showDetail(options);
+  };
+}
+function useShow() {
+  const rawShow = inject("reactive_navigation_show");
+  return (options) => {
+    const show = unref(rawShow);
+    if (!show) {
+      console.warn("Failed to perform show");
+      return Promise.resolve();
+    }
+    if (!options.components) {
+      return show({ components: [options] });
+    }
+    return show(options);
+  };
+}
+function usePresent() {
+  const rawPresent = inject("reactive_navigation_present", null);
+  return (options) => {
+    const present = unref(rawPresent);
+    if (!present) {
+      console.warn("Failed to perform present");
+      return Promise.resolve();
+    }
+    if (!options.components) {
+      return present({ components: [options] });
+    }
+    return present(options);
+  };
+}
+function useDismiss() {
+  const rawDismiss = inject("reactive_navigation_dismiss");
+  return (options) => {
+    const dismiss = unref(rawDismiss);
+    if (!dismiss) {
+      console.warn("Failed to perform dismiss");
+      return Promise.resolve();
+    }
+    return dismiss(options);
+  };
+}
+function useCanPop() {
+  const rawPop = inject("reactive_navigation_pop", null);
+  return computed(() => {
+    return !!unref(rawPop);
+  });
+}
+function useCanDismiss() {
+  const rawDismiss = inject("reactive_navigation_dismiss", null);
+  return computed(() => !!unref(rawDismiss));
+}
+function useFocused() {
+  return inject("reactive_navigation_focused", true);
+}
+function usePopup() {
+  return inject("reactive_popup", null);
+}
+const NavigationMixin = {
+  created() {
+    const definitions = {
+      pop: usePop(),
+      showDetail: useShowDetail(),
+      show: useShow(),
+      present: usePresent(),
+      dismiss: useDismiss(),
+      canPop: useCanPop(),
+      canDismiss: useCanDismiss(),
+      isFocused: useFocused(),
+      emitParents: () => {
+        throw new Error("emitParents has been removed and should no longer be needed");
+      },
+      popup: usePopup()
+    };
+    const ctx = this.$.ctx;
+    for (const key in definitions) {
+      if (!isRef(definitions[key])) {
+        ctx[key] = definitions[key];
+      } else {
+        const val = definitions[key];
+        Object.defineProperty(ctx, key, {
+          enumerable: true,
+          configurable: true,
+          get: () => {
+            return val.value;
+          },
+          set: () => {
+            warn(`Cannot assign to '${key}' of navigation mixin. This is a read-only property.`);
+          }
+        });
+      }
+    }
+    return definitions;
+  }
+  // eslint-disable-next-line @typescript-eslint/ban-types
+};
+const _sfc_main$3 = {
+  components: {
+    FramedComponent
+  },
+  inject: {
+    reactive_navigation_pop: {
+      default: null
+    }
+  },
+  provide() {
+    let extra = {};
+    if (this.animationType === "modal") {
+      extra = {
+        reactive_navigation_dismiss: computed(() => this.components.length > 1 ? this.pop : this.reactive_navigation_pop)
+      };
+    }
+    return {
+      reactive_navigation_show: this.push,
+      reactive_navigation_pop: computed(() => this.components.length > 1 ? this.pop : this.reactive_navigation_pop),
+      ...extra,
+      ...this.customProvide ?? {}
+    };
+  },
+  props: {
+    root: {
+      required: true,
+      type: ComponentWithProperties
+    },
+    initialComponents: {
+      default: null,
+      type: Object
+    },
+    animationType: {
+      default: "default",
+      type: String
+    },
+    customProvide: {
+      type: Object,
+      default: null
+    }
+  },
+  emits: ["didPush", "didPop", "showDetail", "present"],
+  setup() {
+    return {
+      originalPop: usePop()
+    };
+  },
+  data() {
+    const savedInternalScrollPositions = [];
+    const savedScrollPositions = [];
+    const components = [];
+    return {
+      components,
+      mainComponent: null,
+      transitionName: "none",
+      savedScrollPositions,
+      nextScrollPosition: 0,
+      previousScrollPosition: 0,
+      nextInternalScrollPosition: 0,
+      savedInternalScrollPositions
+    };
+  },
+  beforeMount() {
+    if (this.initialComponents && this.initialComponents.length > 0) {
+      this.mainComponent = this.initialComponents[this.initialComponents.length - 1];
+      this.components = this.initialComponents.slice(0);
+      this.initialComponents.splice(0, this.initialComponents.length);
+    } else {
+      this.mainComponent = this.root;
+      this.components = [this.root];
+    }
+  },
+  beforeUnmount() {
+    for (const component of this.components) {
+      if (component.isKeptAlive && component.vnode) {
+        component.destroy(component.vnode);
+      }
+    }
+    this.components = [];
+    this.mainComponent = null;
+  },
+  methods: {
+    freezeSize() {
+      const el = this.$el;
+      const w = el.offsetWidth;
+      const h2 = el.offsetHeight;
+      el.style.width = w + "px";
+      el.style.height = h2 + "px";
+    },
+    growSize(width, height) {
+      const el = this.$el;
+      el.style.height = height + "px";
+      el.style.width = width + "px";
+    },
+    unfreezeSize() {
+      const el = this.$el;
+      el.style.width = "";
+      el.style.height = "";
+    },
+    getInternalScrollElement(element = null) {
+      const mightBe = (element ?? this.$el).querySelector("main");
+      return mightBe ? mightBe : null;
+    },
+    getScrollElement(element = null) {
+      return document.documentElement;
+    },
+    shouldAnimate() {
+      return this.$el.offsetWidth <= 1e3 && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    },
+    async push(options) {
+      var _a;
+      if (options.components.length == 0) {
+        console.error("Missing component when pushing");
+        return;
+      }
+      (_a = document.activeElement) == null ? void 0 : _a.blur();
+      const components = options.components;
+      const component = components[components.length - 1];
+      const destroy = options.destroy ?? true;
+      const force = options.force ?? false;
+      const animated = this.shouldAnimate() ? options.animated === void 0 ? component.animated : options.animated : false;
+      let replace = options.replace ?? 0;
+      if (replace > this.components.length) {
+        replace = this.components.length;
+      }
+      if (ComponentWithProperties.debug)
+        console.log("Pushing new component on navigation controller: " + component.component.name);
+      if (replace > 0) {
+        if (destroy && !force) {
+          for (let index = this.components.length - 1; index >= this.components.length - replace; index--) {
+            const component2 = this.components[index];
+            const r = await component2.shouldNavigateAway();
+            if (!r) {
+              return;
+            }
+          }
+        }
+      }
+      if (!animated) {
+        this.transitionName = "none";
+      } else {
+        this.transitionName = this.animationType == "modal" ? "modal-push" : options.reverse ? "pop" : "push";
+      }
+      const internalScrollElement = this.getInternalScrollElement();
+      const scrollElement = this.getScrollElement();
+      const w = window;
+      let clientHeight = scrollElement.clientHeight;
+      if (scrollElement === document.documentElement && w.visualViewport) {
+        clientHeight = w.visualViewport.height;
+      }
+      const internalClientHeight = internalScrollElement == null ? void 0 : internalScrollElement.clientHeight;
+      this.previousScrollPosition = 0;
+      this.savedScrollPositions.push(this.previousScrollPosition + clientHeight);
+      this.savedInternalScrollPositions.push(((internalScrollElement == null ? void 0 : internalScrollElement.scrollTop) ?? 0) + (internalClientHeight ?? 0));
+      this.nextScrollPosition = 0;
+      this.nextInternalScrollPosition = 0;
+      if (animated) {
+        this.freezeSize();
+      }
+      if (replace > 0) {
+        const popped = this.components.splice(this.components.length - replace, replace, ...components);
+        if (!destroy) {
+          for (const comp of popped) {
+            comp.keepAlive = true;
+          }
+        }
+      } else {
+        this.components.push(...components);
+      }
+      if (this.mainComponent) {
+        this.mainComponent.keepAlive = !replace;
+      }
+      this.mainComponent = component;
+      this.$emit("didPush");
+      if (replace == 0 && this) {
+        for (let index = 0; index < components.length; index++) {
+          HistoryManager.pushState(options == null ? void 0 : options.url, (canAnimate) => {
+            this.pop({ animated: animated && canAnimate });
+          }, (options == null ? void 0 : options.adjustHistory) ?? true);
+          if (index < components.length - 1) {
+            components[index].assignHistoryIndex();
+          }
+        }
+      }
+    },
+    async shouldNavigateAway() {
+      for (let index = this.components.length - 1; index >= 0; index--) {
+        const component = this.components[index];
+        const r = await component.shouldNavigateAway();
+        if (!r) {
+          return false;
+        }
+      }
+      return true;
+    },
+    popToRoot(options = {}) {
+      options.count = this.components.length - 1;
+      return this.pop(options);
+    },
+    getPoppableParent() {
+      let prev = this.$;
+      let start = this.$.parent;
+      while (start) {
+        if (prev.props.onPop) {
+          return prev;
+        }
+        prev = start;
+        start = start.parent;
+      }
+      return null;
+    },
+    async pop(options = {}) {
+      var _a;
+      (_a = document.activeElement) == null ? void 0 : _a.blur();
+      const animated = this.shouldAnimate() ? options.animated ?? true : false;
+      const destroy = options.destroy ?? true;
+      const count = options.count ?? 1;
+      const force = options.force ?? false;
+      if (this.components.length <= count) {
+        const parent = this.getPoppableParent();
+        options.count = 1;
+        if (!parent) {
+          console.error("Tried to pop an empty navigation controller, but couldn't find a parent to pop");
+          this.$.emit("pop", options);
+          return;
+        }
+        parent.emit("pop", options);
+        return;
+      }
+      if (count === 0) {
+        return;
+      }
+      if (destroy && !force) {
+        for (let index = this.components.length - 1; index >= this.components.length - count; index--) {
+          const component = this.components[index];
+          const r = await component.shouldNavigateAway();
+          if (!r) {
+            return;
+          }
+        }
+      }
+      this.previousScrollPosition = 0;
+      if (!animated) {
+        this.transitionName = "none";
+      } else {
+        this.transitionName = this.animationType == "modal" ? "modal-pop" : "pop";
+        this.freezeSize();
+      }
+      const popped = this.components.splice(this.components.length - count, count);
+      if (!destroy) {
+        for (const comp of popped) {
+          comp.keepAlive = true;
+        }
+      }
+      this.nextScrollPosition = 0;
+      this.nextInternalScrollPosition = Math.max(0, this.savedInternalScrollPositions.pop() ?? 0);
+      this.mainComponent = this.components[this.components.length - 1];
+      this.$emit("didPop");
+      return popped;
+    },
+    beforeEnter(insertedElement) {
+      if (this.transitionName == "none") {
+        return;
+      }
+      insertedElement.className = this.transitionName + "-enter-active " + this.transitionName + "-enter";
+    },
+    beforeLeave(_element) {
+      if (this.transitionName == "none") {
+        return;
+      }
+    },
+    beforeBeforeEnterAnimation() {
+      if (this.mainComponent) {
+        const instance = this.mainComponent.componentInstance();
+        if (instance && instance.beforeBeforeEnterAnimation) {
+          instance.beforeBeforeEnterAnimation();
+        }
+      }
+    },
+    finishedEnterAnimation() {
+      if (this.mainComponent) {
+        const instance = this.mainComponent.componentInstance();
+        if (instance && instance.finishedEnterAnimation) {
+          instance.finishedEnterAnimation();
+        }
+      }
+    },
+    enter(element, done) {
+      if (this.transitionName == "none") {
+        this.getScrollElement().scrollTop = this.nextScrollPosition;
+        const internal = this.getInternalScrollElement(element);
+        if (internal) {
+          internal.scrollTop = Math.max(0, this.nextInternalScrollPosition - internal.clientHeight);
+        }
+        done();
+        return;
+      }
+      requestAnimationFrame(() => {
+        const w = element.firstElementChild.firstElementChild.offsetWidth;
+        const h2 = element.firstElementChild.offsetHeight;
+        const internal = this.getInternalScrollElement(element);
+        let nextInternal = this.nextInternalScrollPosition;
+        if (internal) {
+          nextInternal = Math.max(0, this.nextInternalScrollPosition - internal.clientHeight);
+          const scrollOuterHeight = this.getScrollOuterHeight(internal);
+          const h22 = internal.scrollHeight;
+          if (nextInternal > h22 - scrollOuterHeight) {
+            nextInternal = Math.max(0, h22 - scrollOuterHeight);
+          }
+        }
+        const childElement = element.firstElementChild;
+        let transitionDuration = 300;
+        if (this.transitionName === "pop" || this.transitionName == "modal-pop") {
+          transitionDuration = 250;
+        }
+        if (this.transitionName == "push" || this.transitionName == "pop" || this.transitionName == "modal-push") {
+          childElement.style.willChange = "transform";
+        }
+        if (internal) {
+          internal.style.willChange = "scroll-position";
+        }
+        this.growSize(w, h2);
+        requestAnimationFrame(() => {
+          if (internal) {
+            internal.scrollTop = nextInternal;
+          }
+          element.className = this.transitionName + "-enter-active " + this.transitionName + "-enter-to";
+          setTimeout(() => {
+            element.style.willChange = "";
+            childElement.style.willChange = "";
+            if (internal) {
+              internal.style.willChange = "";
+            }
+            done();
+          }, transitionDuration + 25);
+        });
+      });
+    },
+    getScrollOuterHeight(scrollElement) {
+      let h2 = scrollElement.clientHeight;
+      if (scrollElement === document.documentElement) {
+        const w = window;
+        if (w.visualViewport) {
+          h2 = w.visualViewport.height;
+        }
+      }
+      return h2;
+    },
+    leave(element, done) {
+      if (this.transitionName == "none") {
+        done();
+        return;
+      }
+      const childElement = element.firstElementChild;
+      childElement.style.willChange = "transform";
+      let transitionDuration = 300;
+      if (this.transitionName === "pop" || this.transitionName == "modal-pop") {
+        transitionDuration = 250;
+      }
+      requestAnimationFrame(() => {
+        const h2 = this.$el.offsetHeight;
+        const w = this.$el.offsetWidth;
+        const height = h2 + "px";
+        const width = w + "px";
+        element.className = this.transitionName + "-leave-active " + this.transitionName + "-leave";
+        element.style.top = "0px";
+        element.style.height = height;
+        element.style.width = width;
+        element.style.bottom = "auto";
+        element.style.overflow = "hidden";
+        childElement.style.overflow = "hidden";
+        childElement.style.height = height;
+        childElement.style.width = width;
+        requestAnimationFrame(() => {
+          element.className = this.transitionName + "-leave-active " + this.transitionName + "-leave-to";
+          setTimeout(() => {
+            element.style.overflow = "";
+            element.style.top = "";
+            element.style.height = "";
+            element.style.bottom = "";
+            childElement.style.overflow = "";
+            childElement.style.willChange = "";
+            done();
+          }, transitionDuration + 25);
+        });
+      });
+    },
+    afterLeave(element) {
+      if (this.transitionName == "none") {
+        return;
+      }
+      element.className = "";
+    },
+    afterEnter(element) {
+      if (this.transitionName == "none") {
+        return;
+      }
+      this.unfreezeSize();
+      element.className = "";
+    },
+    enterCancelled(_element) {
+      this.unfreezeSize();
+    }
+  }
+};
+const _hoisted_1$3 = { class: "navigation-controller" };
+function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_FramedComponent = resolveComponent("FramedComponent");
+  return openBlock(), createElementBlock("div", _hoisted_1$3, [
+    $data.mainComponent ? (openBlock(), createBlock(Transition, {
+      key: 0,
+      css: false,
+      onBeforeEnter: $options.beforeEnter,
+      onBeforeLeave: $options.beforeLeave,
+      onEnter: $options.enter,
+      onLeave: $options.leave,
+      onAfterLeave: $options.afterLeave,
+      onAfterEnter: $options.afterEnter,
+      onEnterCancelled: $options.enterCancelled
+    }, {
+      default: withCtx(() => [
+        (openBlock(), createBlock(_component_FramedComponent, {
+          key: $data.mainComponent.key,
+          ref: "child",
+          root: $data.mainComponent,
+          onPush: $options.push,
+          onShow: $options.push,
+          onPop: $options.pop
+        }, null, 8, ["root", "onPush", "onShow", "onPop"]))
+      ]),
+      _: 1
+    }, 8, ["onBeforeEnter", "onBeforeLeave", "onEnter", "onLeave", "onAfterLeave", "onAfterEnter", "onEnterCancelled"])) : createCommentVNode("", true)
+  ]);
+}
+const NavigationController = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$5]]);
+const _hoisted_1$2 = { class: "scrollable-container" };
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "Popup",
+  props: {
+    root: {},
+    className: { default: "popup" }
+  },
+  setup(__props, { expose: __expose }) {
+    const instance = getCurrentInstance();
+    const Popup = instance.type;
+    const props = __props;
+    const shouldAppear = props.root.animated;
+    const modalStackComponent = useModalStackComponent();
+    const pop = usePop();
+    const mainContent = ref(null);
+    const component = useCurrentComponent();
+    provide("reactive_navigation_dismiss", async (options) => {
+      return await dismiss(options);
+    });
+    provide("reactive_navigation_pop", async (options) => {
+      console.warn("Using .pop() inside a Popup without a NavigationController dismisses the Popup. It is recommended to use .dismiss() instead.");
+      return await dismiss(options);
+    });
+    provide("reactive_popup", instance == null ? void 0 : instance.proxy);
+    const pushDown = computed(() => {
+      var _a;
+      const popups = ((_a = modalStackComponent.value.stackComponent) == null ? void 0 : _a.components.filter((c) => c.component === Popup && (c.properties.className ?? "popup") === (props.className ?? "popup"))) ?? [];
+      if (popups.length > 0 && popups[popups.length - 1] !== component) {
+        if (popups.length > 1 && popups[popups.length - 2] === component) {
+          return 1;
+        }
+        return 2;
+      }
+      return 0;
+    });
+    const buildClass = computed(() => {
+      const vvv = { "push-down": pushDown.value == 1, "push-down-full": pushDown.value > 1 };
+      const j = Object.keys(vvv).filter((p) => !!vvv[p]).join(" ");
+      return j + (j ? " " : "") + (props.className ? props.className : "popup");
+    });
+    const isFocused = computed(() => {
+      var _a;
+      const popups = ((_a = modalStackComponent.value.stackComponent) == null ? void 0 : _a.components) ?? [];
+      if (popups.length > 0 && popups[popups.length - 1] !== component) {
+        return false;
+      }
+      return true;
+    });
+    provide("reactive_navigation_focused", isFocused);
+    const onKey = (event) => {
+      if (event.defaultPrevented || event.repeat) {
+        return;
+      }
+      if (!isFocused.value) {
+        return;
+      }
+      const key = event.key || event.keyCode;
+      if (key === "Escape" || key === "Esc" || key === 27) {
+        dismiss().catch(console.error);
+        event.preventDefault();
+      }
+    };
+    const shouldNavigateAway = () => {
+      return props.root.shouldNavigateAway();
+    };
+    const dismiss = async (options) => {
+      var _a;
+      if (!(options == null ? void 0 : options.force)) {
+        const r = await shouldNavigateAway();
+        if (!r) {
+          return false;
+        }
+      }
+      const popups = ((_a = modalStackComponent.value.stackComponent) == null ? void 0 : _a.components.filter((c) => c.modalDisplayStyle !== "overlay")) ?? [];
+      if (popups.length === 0 || popups[popups.length - 1] === component) {
+        const index = props.root.getHistoryIndex();
+        if (index !== null && index !== void 0) {
+          HistoryManager.returnToHistoryIndex(index - 1);
+        }
+      }
+      pop(options);
+    };
+    const onClick = (event) => {
+      if (mainContent.value && !mainContent.value.contains(event.target) && document.body.contains(event.target)) {
+        dismiss().catch(console.error);
+        event.preventDefault();
+      }
+    };
+    onActivated(() => {
+      document.addEventListener("keydown", onKey);
+    });
+    onDeactivated(() => {
+      document.removeEventListener("keydown", onKey);
+    });
+    __expose({
+      dismiss: shallowRef(dismiss),
+      pop: shallowRef(dismiss)
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(Transition, {
+        appear: unref(shouldAppear),
+        name: "fade",
+        duration: 300
+      }, {
+        default: withCtx(() => [
+          createElementVNode("div", {
+            class: normalizeClass(buildClass.value),
+            onClick
+          }, [
+            createElementVNode("div", {
+              ref_key: "mainContent",
+              ref: mainContent
+            }, [
+              createElementVNode("div", _hoisted_1$2, [
+                (openBlock(), createBlock(unref(ComponentWithPropertiesInstance), {
+                  key: _ctx.root.key,
+                  component: _ctx.root,
+                  onPop: dismiss
+                }, null, 8, ["component"]))
+              ])
+            ], 512)
+          ], 2)
+        ]),
+        _: 1
+      }, 8, ["appear"]);
+    };
+  }
+});
+const StackComponent$1 = defineComponent({
+  components: {
+    ComponentWithPropertiesInstance
+  },
+  emits: ["present"],
+  data() {
+    return {
+      components: []
+    };
+  },
+  beforeUnmount() {
+    this.components = [];
+  },
+  methods: {
+    getCustomProvide(index, key) {
+      return {
+        reactive_navigation_pop: () => {
+          this.removeAt(index, key);
+        },
+        reactive_navigation_dismiss: () => {
+          console.warn("Avoid calling dismiss in components on the StackComponent, since options are not supported here");
+          this.removeAt(index, key);
+        }
+      };
+    },
+    show(component) {
+      this.components.push(component);
+    },
+    removeAt(index, key) {
+      if (!this.components[index]) {
+        for (const [i, comp] of this.components.entries()) {
+          if (comp.key === key) {
+            console.warn("Corrected index from " + index + " to " + i);
+            index = i;
+            break;
+          }
+        }
+      }
+      if (this.components[index] !== void 0 && this.components[index].key === key) {
+        this.components.splice(index, 1);
+      } else {
+        console.warn("Expected component with key " + key + " at index" + index);
+      }
+    }
+  }
+});
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ComponentWithPropertiesInstance = resolveComponent("ComponentWithPropertiesInstance");
+  return openBlock(), createElementBlock("div", null, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.components, (component, index) => {
+      return openBlock(), createBlock(_component_ComponentWithPropertiesInstance, {
+        key: component.key,
+        ref_for: true,
+        ref: "children",
+        component,
+        "custom-provide": _ctx.getCustomProvide(index, component.key),
+        onPop: ($event) => _ctx.removeAt(index, component.key)
+      }, null, 8, ["component", "custom-provide", "onPop"]);
+    }), 128))
+  ]);
+}
+const StackComponent = /* @__PURE__ */ _export_sfc(StackComponent$1, [["render", _sfc_render$4]]);
+function useModalStackComponent() {
+  const c = inject("reactive_modalStackComponent");
+  return shallowRef(c);
+}
+const ModalStackComponent$1 = defineComponent({
+  components: {
+    "NavigationController": NavigationController,
+    "StackComponent": StackComponent
+  },
+  provide() {
+    return {
+      reactive_modalStackComponent: this,
+      reactive_navigation_present: this.present
+    };
+  },
+  props: {
+    root: {
+      required: true,
+      type: Object
+    },
+    initialComponents: {
+      default: null,
+      type: Object
+    }
+  },
+  computed: {
+    stackComponent() {
+      return this.$refs["stackComponent"];
+    },
+    navigationController() {
+      return this.$refs["navigationController"];
+    }
+  },
+  //extends: NavigationMixin,
+  methods: {
+    present(options) {
+      console.log("ModalStackComponent.present", options, this.$el, this.$el.offsetWidth);
+      const component = options.components[options.components.length - 1];
+      if (options.animated !== void 0) {
+        component.animated = options.animated;
+      }
+      const style = options.modalDisplayStyle ?? component.modalDisplayStyle ?? "cover";
+      component.setDisplayStyle(style);
+      if ((style === "popup" || style === "sheet" || style === "side-view") && this.$el.offsetWidth > 800 || style === "sheet" && this.$el.offsetWidth > 700) {
+        const c = new ComponentWithProperties(_sfc_main$2, { root: component, className: options.modalClass ?? style });
+        HistoryManager.pushState(options == null ? void 0 : options.url, (canAnimate) => {
+          var _a;
+          console.log(c.componentInstance());
+          (_a = c.componentInstance()) == null ? void 0 : _a.pop({ animated: canAnimate });
+        }, (options == null ? void 0 : options.adjustHistory) ?? true);
+        this.stackComponent.show(c);
+        return;
+      }
+      if (style === "overlay") {
+        this.stackComponent.show(component);
+        return;
+      }
+      this.navigationController.push(options);
+    },
+    replace(component, animated = true) {
+      const nav = this.navigationController;
+      nav.push({ components: [component], animated, replace: nav.components.length });
+    }
+  }
+});
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NavigationController = resolveComponent("NavigationController");
+  const _component_StackComponent = resolveComponent("StackComponent");
+  return openBlock(), createElementBlock("div", null, [
+    createVNode(_component_NavigationController, {
+      ref: "navigationController",
+      "animation-type": "modal",
+      root: _ctx.root,
+      "initial-components": _ctx.initialComponents,
+      onPresent: _ctx.present
+    }, null, 8, ["root", "initial-components", "onPresent"]),
+    createVNode(_component_StackComponent, {
+      ref: "stackComponent",
+      onPresent: _ctx.present
+    }, null, 8, ["onPresent"])
+  ]);
+}
+const ModalStackComponent = /* @__PURE__ */ _export_sfc(ModalStackComponent$1, [["render", _sfc_render$3]]);
+const ModalStackComponentFinderMixin = defineComponent({
+  computed: {
+    modalStackComponent() {
+      let start = this.$parent;
+      while (start) {
+        if (start instanceof ModalStackComponent) {
+          return start;
+        }
+        start = start.$parent;
+      }
+      return null;
+    }
+  }
+});
+const ModalMixin = defineComponent({
+  extends: ModalStackComponentFinderMixin,
+  methods: {
+    pop(options = {}) {
+      const nav = this.getPoppableParent();
+      if (nav) {
+        if (nav.props.onPop) {
+          nav.emit("pop", options);
+        } else {
+          console.error("Couldn't pop. Failed");
+        }
+      } else {
+        console.warn("No navigation controller to pop");
+      }
+    },
+    getPoppableParent() {
+      let prev = this.$;
+      let start = this.$.parent;
+      while (start) {
+        if (prev.props.onPop) {
+          return prev;
+        }
+        prev = start;
+        start = start.parent;
+      }
+      return null;
+    }
+  }
+});
+const _sfc_main$1 = defineComponent({
+  components: {
+    ComponentWithPropertiesInstance
+  },
+  extends: ModalMixin,
+  props: {
+    root: {
+      required: true,
+      type: Object
+    }
+  },
+  computed: {
+    shouldAppear() {
+      return this.root.animated;
+    },
+    isFocused() {
+      var _a, _b;
+      const popups = ((_b = (_a = this.modalStackComponent) == null ? void 0 : _a.stackComponent) == null ? void 0 : _b.components) ?? [];
+      if (popups.length > 0 && popups[popups.length - 1].componentInstance() !== this) {
+        return false;
+      }
+      return true;
+    }
+  },
+  activated() {
+    document.addEventListener("keydown", this.onKey);
+  },
+  deactivated() {
+    document.removeEventListener("keydown", this.onKey);
+  },
+  methods: {
+    onClick(event) {
+      const mainContent = this.$refs.mainContent;
+      if (mainContent && !mainContent.contains(event.target) && document.body.contains(event.target)) {
+        this.dismiss().catch(console.error);
+        event.preventDefault();
+      }
+    },
+    async dismiss(options) {
+      var _a, _b;
+      if (!(options == null ? void 0 : options.force)) {
+        const r = await this.shouldNavigateAway();
+        if (!r) {
+          return false;
+        }
+      }
+      const popups = ((_b = (_a = this.modalStackComponent) == null ? void 0 : _a.stackComponent) == null ? void 0 : _b.components.filter((c) => c.modalDisplayStyle !== "overlay")) ?? [];
+      if (popups.length === 0 || popups[popups.length - 1].componentInstance() === this) {
+        const index = this.root.getHistoryIndex();
+        if (index !== null && index !== void 0) {
+          HistoryManager.returnToHistoryIndex(index - 1);
+        }
+      }
+      this.pop(options);
+    },
+    onKey(event) {
+      if (event.defaultPrevented || event.repeat) {
+        return;
+      }
+      if (!this.isFocused) {
+        return;
+      }
+      const key = event.key || event.keyCode;
+      if (key === "Escape" || key === "Esc" || key === 27) {
+        this.dismiss().catch(console.error);
+        event.preventDefault();
+      }
+    },
+    shouldNavigateAway() {
+      return this.root.shouldNavigateAway();
+    }
+  }
+});
+const _hoisted_1$1 = { ref: "mainContent" };
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ComponentWithPropertiesInstance = resolveComponent("ComponentWithPropertiesInstance");
+  return openBlock(), createBlock(Transition, {
+    appear: _ctx.shouldAppear,
+    name: "fade",
+    duration: 300
+  }, {
+    default: withCtx(() => [
+      createElementVNode("div", {
+        class: "sheet",
+        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args))
+      }, [
+        createElementVNode("div", _hoisted_1$1, [
+          (openBlock(), createBlock(_component_ComponentWithPropertiesInstance, {
+            key: _ctx.root.key,
+            component: _ctx.root,
+            onPop: _ctx.dismiss
+          }, null, 8, ["component", "onPop"]))
+        ], 512)
+      ])
+    ]),
+    _: 1
+  }, 8, ["appear"]);
+}
+const Sheet = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$2]]);
+const visualViewport = window.visualViewport;
+const SideView$1 = defineComponent({
+  components: {
+    ComponentWithPropertiesInstance
+  },
+  extends: ModalMixin,
+  props: {
+    root: {
+      required: true,
+      type: Object
+    }
+  },
+  computed: {
+    shouldAppear() {
+      return this.root.animated;
+    },
+    pushDown() {
+      var _a, _b;
+      const sideViews = ((_b = (_a = this.modalStackComponent) == null ? void 0 : _a.stackComponent) == null ? void 0 : _b.components.filter((c) => c.component === SideView$1)) ?? [];
+      if (sideViews.length > 0 && sideViews[sideViews.length - 1].componentInstance() !== this) {
+        if (sideViews.length > 1 && sideViews[sideViews.length - 2].componentInstance() === this) {
+          return 1;
+        }
+        return 2;
+      }
+      return 0;
+    },
+    isFocused() {
+      var _a, _b;
+      const sideViews = ((_b = (_a = this.modalStackComponent) == null ? void 0 : _a.stackComponent) == null ? void 0 : _b.components) ?? [];
+      if (sideViews.length > 0 && sideViews[sideViews.length - 1].componentInstance() !== this) {
+        return false;
+      }
+      return true;
+    }
+  },
+  activated() {
+    document.addEventListener("keydown", this.onKey);
+    this.resize();
+    if (visualViewport) {
+      visualViewport.addEventListener("resize", this.resize);
+    }
+  },
+  deactivated() {
+    document.removeEventListener("keydown", this.onKey);
+    if (visualViewport) {
+      visualViewport.removeEventListener("resize", this.resize);
+    }
+  },
+  methods: {
+    async dismiss(options) {
+      var _a, _b;
+      if (!(options == null ? void 0 : options.force)) {
+        const r = await this.shouldNavigateAway();
+        if (!r) {
+          return false;
+        }
+      }
+      const sideViews = ((_b = (_a = this.modalStackComponent) == null ? void 0 : _a.stackComponent) == null ? void 0 : _b.components.filter((c) => c.modalDisplayStyle !== "overlay")) ?? [];
+      if (sideViews.length === 0 || sideViews[sideViews.length - 1].componentInstance() === this) {
+        const index = this.root.getHistoryIndex();
+        if (index !== null && index !== void 0) {
+          HistoryManager.returnToHistoryIndex(index - 1);
+        }
+      }
+      this.pop(options);
+    },
+    resize() {
+      if (!visualViewport) {
+        return;
+      }
+    },
+    onKey(event) {
+      if (event.defaultPrevented || event.repeat) {
+        return;
+      }
+      if (!this.isFocused) {
+        return;
+      }
+      const key = event.key || event.keyCode;
+      if (key === "Escape" || key === "Esc" || key === 27) {
+        this.dismiss().catch(console.error);
+        event.preventDefault();
+      }
+    },
+    shouldNavigateAway() {
+      return this.root.shouldNavigateAway();
+    }
+  }
+});
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ComponentWithPropertiesInstance = resolveComponent("ComponentWithPropertiesInstance");
+  return openBlock(), createBlock(Transition, {
+    appear: _ctx.shouldAppear,
+    name: "fade"
+  }, {
+    default: withCtx(() => [
+      createElementVNode("div", {
+        class: normalizeClass(["side-view", { "push-down": _ctx.pushDown == 1, "push-down-full": _ctx.pushDown > 1 }]),
+        onMousedown: _cache[2] || (_cache[2] = ($event) => _ctx.dismiss()),
+        onTouchdown: _cache[3] || (_cache[3] = ($event) => _ctx.dismiss())
+      }, [
+        createElementVNode("div", {
+          onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
+          }, ["stop"])),
+          onTouchdown: _cache[1] || (_cache[1] = withModifiers(() => {
+          }, ["stop"]))
+        }, [
+          (openBlock(), createBlock(_component_ComponentWithPropertiesInstance, {
+            key: _ctx.root.key,
+            component: _ctx.root,
+            onPop: _ctx.dismiss
+          }, null, 8, ["component", "onPop"]))
+        ], 32)
+      ], 34)
+    ]),
+    _: 1
+  }, 8, ["appear"]);
+}
+const SideView = /* @__PURE__ */ _export_sfc(SideView$1, [["render", _sfc_render$1]]);
+const throttle = (func, limit) => {
+  let lastFunc;
+  let lastRan;
+  return function() {
+    const context = this;
+    const args = arguments;
+    if (!lastRan) {
+      func.apply(context, args);
+      lastRan = Date.now();
+    } else {
+      clearTimeout(lastFunc);
+      lastFunc = setTimeout(function() {
+        if (Date.now() - lastRan >= limit) {
+          func.apply(context, args);
+          lastRan = Date.now();
+        }
+      }, limit - (Date.now() - lastRan));
+    }
+  };
+};
+const _sfc_main = defineComponent({
+  components: {
+    NavigationController,
+    FramedComponent
+  },
+  provide() {
+    return {
+      reactive_navigation_show_detail: this.showDetail
+    };
+  },
+  props: {
+    root: {
+      required: true,
+      type: Object
+    },
+    rootDetail: {
+      default: null,
+      type: Object
+    },
+    detailWidth: {
+      default: null,
+      type: String
+    }
+  },
+  data() {
+    var _a;
+    return {
+      detail: this.rootDetail,
+      detailKey: ((_a = this.rootDetail) == null ? void 0 : _a.key) ?? null
+    };
+  },
+  computed: {
+    lastIsDetail() {
+      var _a, _b;
+      return this.detailKey != null && ((_b = (_a = this.navigationController) == null ? void 0 : _a.mainComponent) == null ? void 0 : _b.key) == this.detailKey;
+    },
+    navigationController() {
+      return this.$refs["navigationController"];
+    },
+    masterElement() {
+      return this.$refs["masterElement"];
+    }
+  },
+  mounted() {
+    if (this.detailWidth) {
+      this.$el.style.setProperty("--split-view-width", this.detailWidth);
+    }
+  },
+  activated() {
+    this.listener = throttle(this.onResize, 100);
+    window.addEventListener("resize", this.listener, { passive: true });
+    this.onResize();
+  },
+  deactivated() {
+    window.removeEventListener("resize", this.listener, { passive: true });
+  },
+  methods: {
+    onResize() {
+      if (this.shouldCollapse()) {
+        if (this.detail) {
+          this.collapse();
+        }
+      } else {
+        if (this.canExpand()) {
+          this.expand().catch(console.error);
+        }
+      }
+    },
+    getScrollElement(element = null) {
+      if (!element) {
+        element = this.$el;
+      }
+      const style = window.getComputedStyle(element);
+      if (style.overflowY == "scroll" || style.overflow == "scroll" || style.overflow == "auto" || style.overflowY == "auto") {
+        return element;
+      } else {
+        if (!element.parentElement) {
+          return document.documentElement;
+        }
+        return this.getScrollElement(element.parentElement);
+      }
+    },
+    async shouldNavigateAway() {
+      if (this.detail) {
+        const r = await this.detail.shouldNavigateAway();
+        if (!r) {
+          return false;
+        }
+      }
+      if (this.navigationController) {
+        return await this.navigationController.shouldNavigateAway();
+      }
+      return true;
+    },
+    async showDetail(options) {
+      const component = options.components[options.components.length - 1];
+      this.detailKey = component.key;
+      if (this.shouldCollapse()) {
+        if (this.lastIsDetail || this.detail) {
+          console.error("Pusing a detail when a detail is already presented is not allowed");
+          return false;
+        }
+        this.navigationController.push(options);
+      } else {
+        if (this.detail) {
+          const r = await this.detail.shouldNavigateAway();
+          if (!r) {
+            return false;
+          }
+        }
+        this.getScrollElement().scrollTop = 0;
+        this.detail = component;
+      }
+      return true;
+    },
+    shouldCollapse() {
+      return this.$el.offsetWidth < 850;
+    },
+    collapse() {
+      if (!this.navigationController) {
+        console.error("Cannot collapse without navigation controller");
+        return;
+      }
+      if (this.lastIsDetail) {
+        console.error("Cannot collapse when the detail is already collaped");
+        return;
+      }
+      if (!this.detail) {
+        console.error("Cannot collapse without detail");
+        return;
+      }
+      this.detail.keepAlive = true;
+      const detail = this.detail;
+      this.detail = null;
+      this.navigationController.push({ components: [detail], animated: false });
+    },
+    canExpand() {
+      if (!this.navigationController) {
+        return false;
+      }
+      if (this.detail) {
+        return false;
+      }
+      if (!this.lastIsDetail) {
+        if (!this.rootDetail) {
+          return false;
+        }
+        return true;
+      }
+      return true;
+    },
+    async expand() {
+      if (!this.navigationController) {
+        console.error("Cannot expand without navigation controller");
+        return;
+      }
+      if (this.detail) {
+        console.error("Cannot expand when detail is already visible");
+        return;
+      }
+      if (!this.lastIsDetail) {
+        if (!this.rootDetail) {
+          console.error("Cannot expand with rootDetail when there is no rootDetail");
+          return;
+        }
+        console.log("pushing root detail", this.rootDetail);
+        this.detail = this.rootDetail.clone();
+        this.detailKey = this.detail.key;
+        return;
+      }
+      const popped = await this.navigationController.pop({
+        animated: false,
+        destroy: false
+      });
+      if (!popped || popped.length == 0) {
+        return;
+      }
+      await this.$nextTick();
+      this.detailKey = popped[0].key;
+      this.detail = popped[0];
+    }
+  }
+});
+const _hoisted_1 = ["data-has-detail"];
+const _hoisted_2 = {
+  ref: "masterElement",
+  class: "master"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "detail"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_NavigationController = resolveComponent("NavigationController");
+  const _component_FramedComponent = resolveComponent("FramedComponent");
+  return openBlock(), createElementBlock("div", {
+    class: "split-view-controller",
+    "data-has-detail": _ctx.detail ? "true" : "false"
+  }, [
+    createElementVNode("div", _hoisted_2, [
+      createVNode(_component_NavigationController, {
+        ref: "navigationController",
+        root: _ctx.root,
+        "custom-provide": { isMaster: true, isDetail: false },
+        onShowDetail: _ctx.showDetail
+      }, null, 8, ["root", "onShowDetail"])
+    ], 512),
+    _ctx.detail ? (openBlock(), createElementBlock("div", _hoisted_3, [
+      (openBlock(), createBlock(_component_FramedComponent, {
+        ref: "detailFrame",
+        key: _ctx.detail.key,
+        root: _ctx.detail,
+        "custom-provide": { isDetail: true, isMaster: false }
+      }, null, 8, ["root"]))
+    ])) : createCommentVNode("", true)
+  ], 8, _hoisted_1);
+}
+const SplitViewController = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  ComponentWithProperties,
+  ComponentWithPropertiesInstance,
+  FramedComponent,
+  HistoryManager,
+  ModalStackComponent,
+  ModalStackComponentFinderMixin,
+  NavigationController,
+  NavigationMixin,
+  _sfc_main$2 as Popup,
+  Sheet,
+  SideView,
+  SplitViewController,
+  StackComponent,
+  useCanDismiss,
+  useCanPop,
+  useCurrentComponent,
+  useDismiss,
+  useFocused,
+  usePop,
+  usePopup,
+  usePresent,
+  useShow,
+  useShowDetail
+};