@react-motion-router/core 2.0.0-beta.eb7bb7e → 2.0.0-beta.sha-dfc284b

package/build/index.js

@@ -0,0 +1,1448 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE_web_animations_extension_74b2916c__ from "web-animations-extension";
+/******/ var __webpack_modules__ = ({
+
+/***/ 837:
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var f=__webpack_require__(810),k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0};
+function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}exports.Fragment=l;exports.jsx=q;exports.jsxs=q;
+
+
+/***/ }),
+
+/***/ 322:
+/***/ ((module, __unused_webpack_exports, __webpack_require__) => {
+
+
+
+if (true) {
+  module.exports = __webpack_require__(837);
+} else {}
+
+
+/***/ }),
+
+/***/ 174:
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "DM": () => (/* binding */ PromiseAllDynamic),
+/* harmony export */   "Ky": () => (/* binding */ isURLPatternSupported),
+/* harmony export */   "Nu": () => (/* binding */ dispatchEvent),
+/* harmony export */   "QN": () => (/* binding */ matchRoute),
+/* harmony export */   "Sy": () => (/* binding */ polyfillNavigation),
+/* harmony export */   "Vo": () => (/* binding */ lazy),
+/* harmony export */   "e1": () => (/* binding */ includesRoute),
+/* harmony export */   "gy": () => (/* binding */ polyfillURLPattern),
+/* harmony export */   "n4": () => (/* binding */ resolveBaseURLFromPattern),
+/* harmony export */   "vi": () => (/* binding */ isNavigationSupported),
+/* harmony export */   "zW": () => (/* binding */ toCamelCase)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(810);
+
+function resolveBaseURLFromPattern(pattern, pathname) {
+    if (!pattern.endsWith("**"))
+        pattern += '**'; // allows us to match nested routes
+    const origin = window.location.origin;
+    const baseURLMatch = new URLPattern(pattern, origin).exec(pathname, origin);
+    if (!baseURLMatch)
+        return null;
+    const nestedPathnameGroup = baseURLMatch.pathname.groups[1] ?? '';
+    // derive concrete baseURL
+    return new URL(pathname.replace(nestedPathnameGroup, ''), window.location.origin);
+}
+function matchRoute(pathnamePattern, pathname, baseURLPattern = `${window.location.origin}/`, caseSensitive = true) {
+    if (!caseSensitive) {
+        pathnamePattern = pathnamePattern.toLowerCase();
+        pathname = pathname.toLowerCase();
+    }
+    const baseURL = resolveBaseURLFromPattern(baseURLPattern, pathname)?.href;
+    if (!baseURL)
+        return null;
+    const match = new URLPattern({ baseURL, pathname: pathnamePattern }).exec({ pathname, baseURL });
+    const params = match?.pathname.groups ?? {};
+    if (match) {
+        return {
+            params
+        };
+    }
+    return null;
+}
+function includesRoute(pathnamePatterns, pathname, baseURL = window.location.origin) {
+    return pathnamePatterns.some(({ pattern, caseSensitive }) => matchRoute(pattern, pathname, baseURL, caseSensitive));
+}
+function dispatchEvent(event, target = window) {
+    return new Promise((resolve) => {
+        queueMicrotask(() => resolve(target.dispatchEvent(event)));
+    });
+}
+function lazy(factory) {
+    const Component = (0,react__WEBPACK_IMPORTED_MODULE_0__.lazy)(factory);
+    Component.load = async () => {
+        Component.module ??= await factory();
+        return Component.module;
+    };
+    return Component;
+}
+function isNavigationSupported() {
+    return Boolean(window.navigation);
+}
+function isURLPatternSupported() {
+    // @ts-ignore: Property 'UrlPattern' does not exist 
+    return Boolean(globalThis.URLPattern);
+}
+async function polyfillURLPattern() {
+    const { URLPattern } = await import(/*webpackIgnore: true*/ "urlpattern-polyfill");
+    // @ts-ignore: Property 'UrlPattern' does not exist 
+    globalThis.URLPattern = URLPattern;
+}
+async function polyfillNavigation() {
+    const { applyPolyfill } = await import(/*webpackIgnore: true*/ "@virtualstate/navigation");
+    applyPolyfill({
+        history: true,
+        interceptEvents: true,
+        patch: true,
+        persist: true,
+        persistState: true
+    });
+}
+async function PromiseAllDynamic(values) {
+    const awaited = [];
+    for (const value of values) {
+        awaited.push(await value);
+    }
+    return awaited;
+}
+function toCamelCase(value) {
+    return value.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
+}
+
+
+/***/ }),
+
+/***/ 810:
+/***/ ((module) => {
+
+var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var y = x => () => x
+module.exports = __WEBPACK_EXTERNAL_MODULE_react__;
+
+/***/ })
+
+/******/ });
+/************************************************************************/
+/******/ // The module cache
+/******/ var __webpack_module_cache__ = {};
+/******/ 
+/******/ // The require function
+/******/ function __webpack_require__(moduleId) {
+/******/ 	// Check if module is in cache
+/******/ 	var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 	if (cachedModule !== undefined) {
+/******/ 		return cachedModule.exports;
+/******/ 	}
+/******/ 	// Create a new module (and put it into the cache)
+/******/ 	var module = __webpack_module_cache__[moduleId] = {
+/******/ 		// no module.id needed
+/******/ 		// no module.loaded needed
+/******/ 		exports: {}
+/******/ 	};
+/******/ 
+/******/ 	// Execute the module function
+/******/ 	__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 
+/******/ 	// Return the exports of the module
+/******/ 	return module.exports;
+/******/ }
+/******/ 
+/************************************************************************/
+/******/ /* webpack/runtime/define property getters */
+/******/ (() => {
+/******/ 	// define getter functions for harmony exports
+/******/ 	__webpack_require__.d = (exports, definition) => {
+/******/ 		for(var key in definition) {
+/******/ 			if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 				Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 			}
+/******/ 		}
+/******/ 	};
+/******/ })();
+/******/ 
+/******/ /* webpack/runtime/hasOwnProperty shorthand */
+/******/ (() => {
+/******/ 	__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ })();
+/******/ 
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+
+// EXPORTS
+__webpack_require__.d(__webpack_exports__, {
+  "Tc": () => (/* reexport */ LoadEvent),
+  "YU": () => (/* reexport */ MAX_NORM_PROGRESS),
+  "SR": () => (/* reexport */ MAX_PROGRESS),
+  "dw": () => (/* reexport */ MAX_Z_INDEX),
+  "Uy": () => (/* reexport */ MIN_NORM_PROGRESS),
+  "yn": () => (/* reexport */ MIN_PROGRESS),
+  "vw": () => (/* reexport */ MotionContext),
+  "FC": () => (/* reexport */ MotionProgressEndEvent),
+  "yx": () => (/* reexport */ MotionProgressEvent),
+  "z4": () => (/* reexport */ MotionProgressStartEvent),
+  "DC": () => (/* reexport */ NavigationBase),
+  "Fh": () => (/* reexport */ NestedRouterContext),
+  "DM": () => (/* reexport */ utils/* PromiseAllDynamic */.DM),
+  "GW": () => (/* reexport */ RouterBase),
+  "_q": () => (/* reexport */ RouterContext),
+  "RG": () => (/* reexport */ ScreenBase),
+  "rJ": () => (/* reexport */ SharedElement),
+  "XP": () => (/* reexport */ TransitionCancelEvent),
+  "d7": () => (/* reexport */ TransitionEndEvent),
+  "sy": () => (/* reexport */ TransitionStartEvent),
+  "Nu": () => (/* reexport */ utils/* dispatchEvent */.Nu),
+  "e1": () => (/* reexport */ utils/* includesRoute */.e1),
+  "Qv": () => (/* reexport */ isLazyExoticComponent),
+  "R1": () => (/* reexport */ isNativeLazyExoticComponent),
+  "vi": () => (/* reexport */ utils/* isNavigationSupported */.vi),
+  "R_": () => (/* reexport */ isStylableElement),
+  "Ky": () => (/* reexport */ utils/* isURLPatternSupported */.Ky),
+  "$r": () => (/* reexport */ isValidScreenChild),
+  "Vo": () => (/* reexport */ utils/* lazy */.Vo),
+  "QN": () => (/* reexport */ utils/* matchRoute */.QN),
+  "Sy": () => (/* reexport */ utils/* polyfillNavigation */.Sy),
+  "gy": () => (/* reexport */ utils/* polyfillURLPattern */.gy),
+  "n4": () => (/* reexport */ utils/* resolveBaseURLFromPattern */.n4),
+  "zW": () => (/* reexport */ utils/* toCamelCase */.zW),
+  "nc": () => (/* reexport */ useMotion),
+  "ev": () => (/* reexport */ useNavigationBase),
+  "qr": () => (/* reexport */ useRouteBase),
+  "yL": () => (/* reexport */ useRouterBase)
+});
+
+// EXTERNAL MODULE: ../../node_modules/react/jsx-runtime.js
+var jsx_runtime = __webpack_require__(322);
+// EXTERNAL MODULE: external "react"
+var external_react_ = __webpack_require__(810);
+;// CONCATENATED MODULE: ./src/SharedElementSceneContext.ts
+
+const SharedElementSceneContext = (0,external_react_.createContext)(null);
+
+;// CONCATENATED MODULE: ./src/SharedElement.tsx
+
+
+
+class SharedElement extends external_react_.Component {
+    ref = (0,external_react_.createRef)();
+    static contextType = SharedElementSceneContext;
+    componentDidMount() {
+        this.scene.addNode(this);
+    }
+    componentDidUpdate(prevProps) {
+        if (this.props.id !== prevProps.id) {
+            this.scene.removeNode(prevProps.id.toString());
+            this.scene.addNode(this);
+        }
+    }
+    componentWillUnmount() {
+        this.scene.removeNode(this.id);
+    }
+    get styles() {
+        if (this.props.config?.styles) {
+            return this.props.config.styles;
+        }
+        return [];
+    }
+    get canTransition() {
+        return !this.props.disabled
+            && this.scene.canTransition;
+    }
+    get scene() {
+        return this.context;
+    }
+    get id() {
+        return `shared-element-${this.props.id.toString()}`;
+    }
+    get transitionType() {
+        return this.props.config?.type ?? this.scene.previousScene?.nodes.get(this.id)?.transitionType ?? "morph";
+    }
+    getBoundingClientRect() {
+        return this.ref.current?.firstElementChild?.getBoundingClientRect() ?? new DOMRect();
+    }
+    clone() {
+        if (!this.ref.current)
+            return null;
+        const deepClone = this.props.config?.deepClone ?? true;
+        return this.ref.current.firstElementChild?.cloneNode(deepClone);
+    }
+    hide() {
+        if (!this.ref.current)
+            return;
+        this.ref.current.style.visibility = 'hidden';
+    }
+    unhide() {
+        if (!this.ref.current)
+            return;
+        this.ref.current.style.visibility = 'visible';
+    }
+    render() {
+        return ((0,jsx_runtime.jsx)("div", { ref: this.ref, id: this.id, style: { display: "contents" }, children: this.props.children }));
+    }
+}
+
+// EXTERNAL MODULE: ./src/common/utils.ts
+var utils = __webpack_require__(174);
+;// CONCATENATED MODULE: ./src/common/events.ts
+
+class TransitionStartEvent extends Event {
+    constructor() {
+        super('transition-start');
+    }
+}
+class TransitionCancelEvent extends Event {
+    constructor() {
+        super('transition-cancel');
+    }
+}
+class TransitionEndEvent extends Event {
+    constructor() {
+        super('transition-end');
+    }
+}
+class MotionProgressStartEvent extends Event {
+    constructor() {
+        super('motion-progress-start');
+    }
+}
+class MotionProgressEvent extends Event {
+    progress;
+    constructor(progress) {
+        super('motion-progress');
+        this.progress = progress;
+    }
+}
+class MotionProgressEndEvent extends Event {
+    constructor() {
+        super('motion-progress-end');
+    }
+}
+class LoadEvent extends Event {
+    #navigationType = "load";
+    #userInitiated = false;
+    #canIntercept = true;
+    #hashChange = false;
+    #formData = null;
+    #downloadRequest = null;
+    #destination;
+    #signal;
+    #abortable = new AbortController();
+    #intercepted = false;
+    #thenables = [];
+    #transition = null;
+    constructor() {
+        super('navigate', { cancelable: false, bubbles: false, composed: false });
+        const currentEntry = window.navigation.currentEntry;
+        if (!currentEntry)
+            throw new Error("Current entry is null");
+        this.#destination = {
+            getState() {
+                return currentEntry.getState();
+            },
+            url: currentEntry.url ?? new URL(window.location.href).href,
+            key: currentEntry.key,
+            index: currentEntry.index,
+            id: currentEntry.id,
+            sameDocument: true
+        };
+        this.#signal = this.#abortable.signal;
+        window.navigation.addEventListener('navigate', this.#onNavigate, { signal: this.#signal });
+    }
+    #onNavigate = (e) => {
+        if (e !== this) {
+            this.#abortable.abort();
+        }
+        else if (!this.#thenables.length) {
+            window.navigation.removeEventListener('navigate', this.#onNavigate);
+        }
+    };
+    intercept(options) {
+        if (this.#intercepted)
+            throw new DOMException("Failed to execute 'intercept' on 'NavigateEvent': intercept() may only be called while the navigate event is being dispatched.");
+        let finish = null;
+        this.#transition = {
+            finished: new Promise((resolve) => finish = resolve),
+            from: window.navigation.currentEntry,
+            navigationType: "load"
+        };
+        const thenable = options?.handler?.();
+        if (thenable)
+            this.#thenables.push(thenable);
+        if (this.#thenables.length === 1) {
+            this.#transition.finished = (0,utils/* PromiseAllDynamic */.DM)(this.#thenables).then(() => {
+                this.#intercepted = true;
+                window.removeEventListener('navigate', this.#onNavigate);
+                finish?.();
+            });
+        }
+    }
+    scroll() {
+        throw new Error("Method not implemented.");
+    }
+    get transition() {
+        return this.#transition;
+    }
+    get navigationType() {
+        return this.#navigationType;
+    }
+    get userInitiated() {
+        return this.#userInitiated;
+    }
+    get canIntercept() {
+        return this.#canIntercept;
+    }
+    get hashChange() {
+        return this.#hashChange;
+    }
+    get formData() {
+        return this.#formData;
+    }
+    get downloadRequest() {
+        return this.#downloadRequest;
+    }
+    get destination() {
+        return this.#destination;
+    }
+    get signal() {
+        return this.#signal;
+    }
+}
+
+;// CONCATENATED MODULE: ./src/ScreenTransitionLayerContext.tsx
+
+const ScreenTransitionLayerContext = (0,external_react_.createContext)(null);
+
+;// CONCATENATED MODULE: ./src/ScreenTransitionProvider.tsx
+
+
+
+class ScreenTransitionProvider extends external_react_.Component {
+    ref = (0,external_react_.createRef)();
+    static contextType = ScreenTransitionLayerContext;
+    index = 0;
+    exiting = false;
+    state = {
+        zIndex: 'unset',
+    };
+    onAnimationEnd = () => {
+        if (this.ref.current) {
+            this.ref.current.style.willChange = 'auto';
+            this.ref.current.style.pointerEvents = 'auto';
+        }
+    };
+    onAnimationStart = () => {
+        if (this.ref.current) {
+            this.ref.current.style.willChange = 'transform, opacity';
+            this.ref.current.style.pointerEvents = 'none';
+        }
+    };
+    componentDidMount() {
+        this.props.navigation.addEventListener('transition-start', this.onAnimationStart);
+        this.props.navigation.addEventListener('transition-end', this.onAnimationEnd);
+        this.props.navigation.addEventListener('transition-cancel', this.onAnimationEnd);
+    }
+    componentWillUnmount() {
+        this.props.navigation.removeEventListener('transition-start', this.onAnimationStart);
+        this.props.navigation.removeEventListener('transition-end', this.onAnimationEnd);
+        this.props.navigation.removeEventListener('transition-cancel', this.onAnimationEnd);
+    }
+    get animationEffect() {
+        const animationEffectFactory = this.props.animation;
+        const { animation, direction } = this.context;
+        const { timeline, playbackRate } = animation;
+        const { index, exiting, ref } = this;
+        return animationEffectFactory?.({
+            ref: ref.current,
+            index,
+            exiting,
+            timeline,
+            direction,
+            playbackRate
+        }) ?? null;
+    }
+    setZIndex(zIndex) {
+        return new Promise(resolve => this.setState({ zIndex }, resolve));
+    }
+    render() {
+        const Element = this.props.renderAs;
+        const inert = !this.props.focused ? '' : undefined;
+        return ((0,jsx_runtime.jsx)(Element, { id: this.props.id, className: "screen-transition-provider", ref: this.ref, inert, style: {
+                gridArea: '1 / 1',
+                width: '100%',
+                height: '100%',
+                transformOrigin: 'center center',
+                zIndex: this.state.zIndex
+            }, children: this.props.children }));
+    }
+}
+
+;// CONCATENATED MODULE: ./src/RouterContext.ts
+
+const NestedRouterContext = (0,external_react_.createContext)(null);
+const RouterContext = (0,external_react_.createContext)(null);
+
+;// CONCATENATED MODULE: ./src/RoutePropContext.ts
+
+const RoutePropContext = (0,external_react_.createContext)(null);
+
+;// CONCATENATED MODULE: ./src/SharedElementScene.ts
+class SharedElementScene {
+    id;
+    nodes = new Map();
+    getScreenRect = () => new DOMRect();
+    keepAlive = false;
+    previousScene = null;
+    canTransition = true; // should be false if page animation already started
+    constructor(id) {
+        this.id = id;
+    }
+    addNode(node) {
+        if (!node)
+            return;
+        console.assert(!this.nodes.has(node.id), `Duplicate Shared Element ID: ${node.id} in ${this.id}`);
+        this.nodes.set(node.id, node);
+    }
+    removeNode(_id) {
+        this.nodes.delete(_id);
+    }
+    get xRatio() {
+        const screenRect = this.getScreenRect();
+        const xRatio = (screenRect.width / window.innerWidth).toFixed(2);
+        return parseFloat(xRatio);
+    }
+    get yRatio() {
+        const screenRect = this.getScreenRect();
+        const yRatio = (screenRect.height / window.innerHeight).toFixed(2);
+        return parseFloat(yRatio);
+    }
+    get x() {
+        return this.getScreenRect().x;
+    }
+    get y() {
+        return this.getScreenRect().y;
+    }
+    isEmpty() {
+        return !Boolean(this.nodes.size);
+    }
+}
+
+;// CONCATENATED MODULE: ./src/ScreenBase.tsx
+
+
+
+
+
+
+
+
+class ScreenBase extends external_react_.Component {
+    sharedElementScene;
+    #transitionProvider = (0,external_react_.createRef)();
+    ref = (0,external_react_.createRef)();
+    nestedRouterData;
+    static contextType = RouterContext;
+    state = {
+        focused: false,
+        elementType: 'div'
+    };
+    constructor(props, context) {
+        super(props);
+        this.sharedElementScene = new SharedElementScene(`${this.id}-shared-element-scene`);
+        this.sharedElementScene.getScreenRect = () => this.ref.current?.getBoundingClientRect() || new DOMRect();
+        this.nestedRouterData = { parentScreen: this, parentRouter: context };
+    }
+    setParams(params) {
+        params = {
+            ...this.routeProp.params,
+            ...params
+        };
+        const config = this.routeProp.config;
+        this.context.screenState.set(this.props.path, { config, params });
+        this.forceUpdate();
+    }
+    setConfig(config) {
+        config = {
+            ...this.routeProp.config,
+            ...config
+        };
+        const params = this.routeProp.params;
+        this.context.screenState.set(this.props.path, { config, params });
+        this.forceUpdate();
+    }
+    get id() {
+        if (this.props.id)
+            return this.props.id;
+        return this.props.path
+            .toLowerCase()
+            .replace(/[^\w-]/g, '-') // Remove non-alphanumeric chars
+            .replace(/-+/g, '-') // Replace multiple hyphens with a single one
+            .replace(/^-|-$/g, ''); // Remove leading and trailing hyphens;
+    }
+    get focused() {
+        return this.state.focused;
+    }
+    blur() {
+        return new Promise(resolve => this.setState({ focused: false }, resolve));
+    }
+    focus() {
+        return new Promise(resolve => this.setState({ focused: true }, resolve));
+    }
+    async load(signal) {
+        let Component = this.props.component;
+        let result;
+        if ('load' in Component) {
+            result = await Component.load();
+        }
+        else {
+            result = { default: Component };
+        }
+        const navigation = this.context.navigation;
+        const route = this.routeProp;
+        await this.props.config?.onLoad?.({ navigation, route, signal });
+        return result;
+    }
+    async onExited(signal) {
+        await this.routeProp.config.onExited?.({
+            route: this.routeProp,
+            navigation: this.context.navigation,
+            signal
+        });
+    }
+    async onExit(signal) {
+        await this.routeProp.config.onExit?.({
+            route: this.routeProp,
+            navigation: this.context.navigation,
+            signal
+        });
+    }
+    async onEnter(signal) {
+        await this.routeProp.config.onEnter?.({
+            route: this.routeProp,
+            navigation: this.context.navigation,
+            signal
+        });
+    }
+    async onEntered(signal) {
+        await this.routeProp.config.onEntered?.({
+            route: this.routeProp,
+            navigation: this.context.navigation,
+            signal
+        });
+    }
+    get resolvedPathname() {
+        return this.props.resolvedPathname;
+    }
+    get path() {
+        return this.props.path;
+    }
+    get transitionProvider() {
+        return this.#transitionProvider;
+    }
+    render() {
+        const navigation = this.context.navigation;
+        const routeProp = this.routeProp;
+        const Component = this.props.component;
+        const HeaderComponent = routeProp.config.header?.component;
+        const FooterComponent = routeProp.config.footer?.component;
+        return ((0,jsx_runtime.jsx)(ScreenTransitionProvider, { ref: this.#transitionProvider, renderAs: this.state.elementType, id: `${this.id}-transition-provider`, animation: routeProp.config.animation, navigation: navigation, focused: this.state.focused, children: (0,jsx_runtime.jsx)("div", { id: this.id, ref: this.ref, className: "screen", style: {
+                    height: '100%',
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    pointerEvents: 'inherit'
+                }, children: (0,jsx_runtime.jsx)(SharedElementSceneContext.Provider, { value: this.sharedElementScene, children: (0,jsx_runtime.jsx)(RoutePropContext.Provider, { value: routeProp, children: (0,jsx_runtime.jsxs)(NestedRouterContext.Provider, { value: this.nestedRouterData, children: [(0,jsx_runtime.jsx)(external_react_.Suspense, { fallback: (0,jsx_runtime.jsx)(ComponentWithRouteProps, { component: routeProp.config.header?.fallback, route: routeProp, navigation: navigation }), children: (0,jsx_runtime.jsx)(ComponentWithRouteProps, { component: HeaderComponent, route: routeProp, navigation: navigation }) }), (0,jsx_runtime.jsx)(external_react_.Suspense, { fallback: (0,jsx_runtime.jsx)(ComponentWithRouteProps, { component: this.props.fallback, route: routeProp, navigation: navigation }), children: (0,jsx_runtime.jsx)(ComponentWithRouteProps, { component: Component, route: routeProp, navigation: navigation }) }), (0,jsx_runtime.jsx)(external_react_.Suspense, { fallback: (0,jsx_runtime.jsx)(ComponentWithRouteProps, { component: routeProp.config.footer?.fallback, route: routeProp, navigation: navigation }), children: (0,jsx_runtime.jsx)(ComponentWithRouteProps, { component: FooterComponent, route: routeProp, navigation: navigation }) })] }) }) }) }) }));
+    }
+}
+function ComponentWithRouteProps({ component, route, navigation }) {
+    if (isLazyExoticComponent(component) && component.module?.default) {
+        component = component.module.default;
+    }
+    const Component = component ?? null;
+    if ((0,external_react_.isValidElement)(Component)) {
+        return (0,external_react_.cloneElement)(Component, {
+            navigation,
+            route
+        });
+    }
+    else if (typeof Component === "function" || isNativeLazyExoticComponent(Component)) {
+        return ((0,jsx_runtime.jsx)(Component, { navigation: navigation, route: route }));
+    }
+    return (0,jsx_runtime.jsx)(jsx_runtime.Fragment, { children: Component });
+}
+
+;// CONCATENATED MODULE: ./src/common/types.ts
+
+
+function isValidScreenChild(value) {
+    if (!(0,external_react_.isValidElement)(value))
+        return false;
+    return Object.getPrototypeOf(value.type) === ScreenBase;
+}
+var SharedElementTransitionTypeEnum;
+(function (SharedElementTransitionTypeEnum) {
+    SharedElementTransitionTypeEnum[SharedElementTransitionTypeEnum["morph"] = 0] = "morph";
+    SharedElementTransitionTypeEnum[SharedElementTransitionTypeEnum["fade-through"] = 1] = "fade-through";
+    SharedElementTransitionTypeEnum[SharedElementTransitionTypeEnum["fade"] = 2] = "fade";
+    SharedElementTransitionTypeEnum[SharedElementTransitionTypeEnum["cross-fade"] = 3] = "cross-fade";
+})(SharedElementTransitionTypeEnum || (SharedElementTransitionTypeEnum = {}));
+function isNativeLazyExoticComponent(value) {
+    return typeof value === "object"
+        && value !== null
+        && value.$$typeof === Symbol.for('react.lazy');
+}
+function isLazyExoticComponent(value) {
+    return isNativeLazyExoticComponent(value) && 'load' in value;
+}
+function isStylableElement(element) {
+    return 'style' in element && element.style instanceof CSSStyleDeclaration;
+}
+
+;// CONCATENATED MODULE: external "web-animations-extension"
+var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
+var y = x => () => x
+const external_web_animations_extension_namespaceObject = x({ ["Animation"]: () => __WEBPACK_EXTERNAL_MODULE_web_animations_extension_74b2916c__.Animation, ["ParallelEffect"]: () => __WEBPACK_EXTERNAL_MODULE_web_animations_extension_74b2916c__.ParallelEffect });
+;// CONCATENATED MODULE: ./src/SharedElementTransitionLayer.tsx
+
+
+
+
+
+class SharedElementTransitionLayer extends external_react_.Component {
+    ref = (0,external_react_.createRef)();
+    #outgoingScreen = null;
+    #incomingScreen = null;
+    state = {
+        transitioning: false
+    };
+    set outgoingScreen(outgoingScreen) {
+        this.#outgoingScreen = outgoingScreen;
+    }
+    set incomingScreen(incomingScreen) {
+        this.#incomingScreen = incomingScreen;
+    }
+    get outgoingScreen() {
+        return this.#outgoingScreen;
+    }
+    get incomingScreen() {
+        return this.#incomingScreen;
+    }
+    getKeyframeProperties(element, styleList) {
+        const computedStyles = {};
+        const computedStyle = window.getComputedStyle(element);
+        for (const key of styleList) {
+            let transformedKey;
+            if (key === "offset")
+                transformedKey = "cssOffset";
+            else if (key === "float")
+                transformedKey = "cssFloat";
+            else
+                transformedKey = (0,utils/* toCamelCase */.zW)(key);
+            computedStyles[transformedKey] = computedStyle.getPropertyValue(key);
+        }
+        return computedStyles;
+    }
+    copyStyles(srcElement, cloneElement, styleList) {
+        const computedStyles = window.getComputedStyle(srcElement);
+        for (const key of styleList) {
+            const value = computedStyles.getPropertyValue(key);
+            const priority = computedStyles.getPropertyPriority(key);
+            cloneElement.style.setProperty(key, value, priority);
+        }
+    }
+    getAnimationEffect(start, end) {
+        const keyframeEffects = new Array();
+        const startRect = start.instance.getBoundingClientRect();
+        const endRect = end.instance.getBoundingClientRect();
+        const config = {
+            fill: "forwards",
+            duration: "auto",
+            easing: "ease",
+            ...start.instance.props.config,
+            ...end.instance.props.config
+        };
+        const transitionType = end.instance.transitionType === "fade";
+        const startTransform = `translate(${startRect.x}px, ${startRect.y}px)`;
+        const endTransform = `translate(${endRect.x}px, ${endRect.y}px)`;
+        if (transitionType) {
+            keyframeEffects.push(new KeyframeEffect(start.clone, [
+                { transform: startTransform, opacity: 1 },
+                { transform: endTransform, opacity: 0 }
+            ], config));
+            keyframeEffects.push(new KeyframeEffect(end.clone, [
+                { transform: startTransform },
+                { transform: endTransform }
+            ], config));
+        }
+        else if (end.instance.transitionType === "fade-through") {
+            keyframeEffects.push(new KeyframeEffect(start.clone, [
+                { transform: startTransform, opacity: 1 },
+                { opacity: 0, offset: 0.5 },
+                { transform: endTransform, opacity: 0 }
+            ], config));
+            keyframeEffects.push(new KeyframeEffect(end.clone, [
+                { transform: startTransform, opacity: 0 },
+                { opacity: 0, offset: 0.5 },
+                { transform: endTransform, opacity: 1 }
+            ], config));
+        }
+        else if (end.instance.transitionType === "cross-fade") {
+            end.clone.style.mixBlendMode = "plus-lighter";
+            keyframeEffects.push(new KeyframeEffect(start.clone, [
+                { transform: startTransform, opacity: 1 },
+                { transform: endTransform, opacity: 0 }
+            ], config));
+            keyframeEffects.push(new KeyframeEffect(end.clone, [
+                { transform: startTransform },
+                { transform: endTransform }
+            ], config));
+        }
+        else { // morph
+            const styleList = Array.from(new Set([...start.instance.styles, ...end.instance.styles]));
+            keyframeEffects.push(new KeyframeEffect(end.clone, [
+                {
+                    ...Object.fromEntries((start.instance.ref.current?.firstElementChild).attributeStyleMap),
+                    transform: startTransform,
+                    width: `${startRect.width}px`,
+                    height: `${startRect.height}px`,
+                },
+                {
+                    ...Object.fromEntries((end.instance.ref.current?.firstElementChild).attributeStyleMap),
+                    ...this.getKeyframeProperties(end.instance.ref.current?.firstElementChild, styleList),
+                    transform: endTransform,
+                    width: `${endRect.width}px`,
+                    height: `${endRect.height}px`,
+                }
+            ], config));
+        }
+        return new external_web_animations_extension_namespaceObject.ParallelEffect(keyframeEffects);
+    }
+    get animationEffect() {
+        const currentScene = this.outgoingScreen?.current?.sharedElementScene;
+        const nextScene = this.incomingScreen?.current?.sharedElementScene;
+        if (!currentScene || !nextScene)
+            return null;
+        if (currentScene === nextScene)
+            return null;
+        currentScene.previousScene = null;
+        nextScene.previousScene = currentScene;
+        const parallelEffects = new Array();
+        for (const [id, end] of Array.from(nextScene.nodes.entries())) {
+            const start = currentScene.nodes.get(id);
+            if (start?.canTransition && end.canTransition) {
+                const endClone = end.clone();
+                const startClone = start.clone();
+                if (!startClone)
+                    continue;
+                if (!endClone)
+                    continue;
+                const styleList = Array.from(new Set([...start.styles, ...end.styles, 'width', 'height']));
+                if (end.transitionType !== "morph") {
+                    startClone.id = `${id}-start`;
+                    startClone.style.position = "absolute";
+                    if (isStylableElement(start.ref.current?.firstElementChild))
+                        this.copyStyles(start.ref.current.firstElementChild, startClone, styleList);
+                    if (isStylableElement(end.ref.current?.firstElementChild))
+                        this.copyStyles(end.ref.current.firstElementChild, endClone, styleList);
+                    this.ref.current?.prepend(startClone);
+                }
+                else if (isStylableElement(start.ref.current?.firstElementChild)) {
+                    this.copyStyles(start.ref.current.firstElementChild, endClone, styleList);
+                }
+                endClone.id = `${id}${end.transitionType === "morph" ? '' : '-end'}`;
+                endClone.style.position = "absolute";
+                this.ref.current?.prepend(endClone);
+                start.hide();
+                end.hide();
+                const onFinish = () => {
+                    end.unhide();
+                    endClone.remove();
+                    startClone.remove();
+                };
+                this.props.navigation.addEventListener('transition-end', onFinish, { once: true });
+                this.props.navigation.addEventListener('transition-cancel', onFinish, { once: true });
+                parallelEffects.push(this.getAnimationEffect({ instance: start, clone: startClone }, { instance: end, clone: endClone }));
+            }
+        }
+        return new external_web_animations_extension_namespaceObject.ParallelEffect(parallelEffects);
+    }
+    render() {
+        return ((0,jsx_runtime.jsx)("dialog", { className: "shared-element-layer", ref: this.ref, style: {
+                position: 'absolute',
+                maxWidth: 'unset',
+                maxHeight: 'unset',
+                width: '100vw',
+                height: '100vh',
+                contain: 'strict',
+                padding: 0,
+                border: 'none',
+                backgroundColor: 'transparent',
+                isolation: 'isolate'
+            }, children: (0,jsx_runtime.jsx)("style", { children: ".shared-element-layer::backdrop {display: none}" }) }));
+    }
+}
+
+;// CONCATENATED MODULE: ./src/MotionContext.ts
+
+const MotionContext = (0,external_react_.createContext)(0);
+
+;// CONCATENATED MODULE: ./src/ScreenTransitionLayer.tsx
+
+
+
+
+
+
+
+class ScreenTransitionLayer extends external_react_.Component {
+    sharedElementTransitionLayer = (0,external_react_.createRef)();
+    animation = new external_web_animations_extension_namespaceObject.Animation();
+    #direction = "normal";
+    #screens = new Array();
+    state = {
+        gestureNavigating: false,
+        progress: 1
+    };
+    onAnimationFrame() {
+        const progress = this.animation.effect?.getComputedTiming().progress;
+        if (progress)
+            this.onProgress(progress);
+        if (this.animation.playState === "running")
+            requestAnimationFrame(this.onAnimationFrame.bind(this));
+    }
+    onTransitionCancel() {
+        this.props.navigation.dispatchEvent(new TransitionCancelEvent());
+    }
+    onTransitionStart() {
+        this.props.navigation.dispatchEvent(new TransitionStartEvent());
+        this.onAnimationFrame();
+    }
+    onTransitionEnd() {
+        this.props.navigation.dispatchEvent(new TransitionEndEvent());
+    }
+    onProgress(progress) {
+        this.setState({ progress });
+        this.props.navigation.dispatchEvent(new MotionProgressEvent(progress));
+    }
+    get screens() {
+        return this.#screens;
+    }
+    set screens(screens) {
+        this.#screens = screens;
+    }
+    set direction(direction) {
+        this.#direction = direction;
+        this.animation.effect?.updateTiming({ direction });
+    }
+    get direction() {
+        return this.#direction;
+    }
+    transition() {
+        const effect = new external_web_animations_extension_namespaceObject.ParallelEffect(this.screens.map(screen => {
+            return screen.current?.transitionProvider?.current?.animationEffect ?? null;
+        }).filter((effect) => effect !== null));
+        const sharedElementEffect = this.sharedElementTransitionLayer.current?.animationEffect;
+        const duration = effect.getComputedTiming().duration;
+        if (sharedElementEffect) {
+            sharedElementEffect.updateTiming({
+                duration: duration instanceof CSSNumericValue ? duration.to('ms').value : duration
+            });
+            effect.append(sharedElementEffect);
+            this.sharedElementTransitionLayer.current?.ref.current?.showModal();
+        }
+        this.animation.effect = effect;
+        this.animation.play();
+        this.onTransitionStart();
+        this.animation.oncancel = () => {
+            this.sharedElementTransitionLayer.current?.ref.current?.close();
+            this.onTransitionCancel();
+            this.animation.effect = null;
+        };
+        this.animation.finished.then(() => {
+            this.animation.commitStyles();
+            this.onTransitionEnd();
+            this.sharedElementTransitionLayer.current?.ref.current?.close();
+            this.animation.effect = null;
+        });
+        return this.animation;
+    }
+    render() {
+        return ((0,jsx_runtime.jsxs)(ScreenTransitionLayerContext.Provider, { value: this, children: [(0,jsx_runtime.jsx)(SharedElementTransitionLayer, { ref: this.sharedElementTransitionLayer, navigation: this.props.navigation }), (0,jsx_runtime.jsx)("div", { className: "screen-transition-layer", style: {
+                        width: '100%',
+                        height: '100%',
+                        display: 'grid',
+                        '--motion-progress': this.state.progress
+                    }, children: (0,jsx_runtime.jsx)(MotionContext.Provider, { value: this.state.progress, children: this.props.children }) })] }));
+    }
+}
+
+;// CONCATENATED MODULE: ./src/RouterBase.tsx
+
+
+
+
+
+
+class RouterBase extends external_react_.Component {
+    ref = (0,external_react_.createRef)();
+    screenTransitionLayer = (0,external_react_.createRef)();
+    screenState = new Map();
+    parent = null;
+    #child = null;
+    loadDispatched = false;
+    parentScreen = null;
+    static rootRouterRef = null;
+    static contextType = NestedRouterContext;
+    constructor(props, context) {
+        super(props);
+        this.parentScreen = context?.parentScreen ?? null;
+        this.parent = context?.parentRouter ?? null;
+        if (this.parent) {
+            this.parent.child = this;
+        }
+        if (this.isRoot) {
+            RouterBase.rootRouterRef = new WeakRef(this);
+        }
+    }
+    componentDidMount() {
+        if (this.isRoot) {
+            window.navigation.addEventListener('navigate', this.handleNavigationDispatch);
+        }
+        if (!this.loadDispatched) {
+            window.navigation.dispatchEvent(new LoadEvent());
+            this.loadDispatched = true;
+        }
+    }
+    componentWillUnmount() {
+        if (this.isRoot) {
+            window.navigation.removeEventListener('navigate', this.handleNavigationDispatch);
+        }
+    }
+    handleNavigationDispatch = (e) => {
+        if (!this.canIntercept(e))
+            return;
+        let router = this;
+        // travel down router tree to find the correct router
+        while (router.child?.canIntercept(e)) {
+            router = router.child;
+        }
+        router.intercept(e);
+    };
+    getRouterById(routerId, target) {
+        const router = target ?? RouterBase.rootRouterRef?.deref();
+        if (router.id === routerId) {
+            return router ?? null;
+        }
+        else if (router?.child) {
+            return this.getRouterById(routerId, router.child);
+        }
+        else {
+            return null;
+        }
+    }
+    dispatchEvent(event) {
+        const ref = this.ref.current ?? undefined;
+        return (0,utils/* dispatchEvent */.Nu)(event, ref);
+    }
+    addEventListener(type, listener, options) {
+        return this.ref.current?.addEventListener(type, listener, options);
+    }
+    removeEventListener(type, listener, options) {
+        return this.ref.current?.removeEventListener(type, listener, options);
+    }
+    preloadRoute(pathname) {
+        return new Promise((resolve, reject) => {
+            let found = false;
+            const routes = this.props.children;
+            external_react_.Children.forEach(routes, (route) => {
+                if (found)
+                    return; // stop after first
+                if (!(0,external_react_.isValidElement)(route))
+                    return;
+                const { path, caseSensitive } = route.props;
+                const baseURLPattern = this.baseURLPattern.pathname;
+                const matchInfo = (0,utils/* matchRoute */.QN)(path, pathname, baseURLPattern, caseSensitive);
+                if (!matchInfo)
+                    return;
+                found = true;
+                const config = {
+                    ...this.screenState.get(path)?.config,
+                    ...route.props.config
+                };
+                queueMicrotask(async () => {
+                    const preloadTasks = [];
+                    if ('load' in route.props.component) {
+                        preloadTasks.push(route.props.component.load());
+                    }
+                    if (config?.header?.component && 'load' in config?.header?.component) {
+                        preloadTasks.push(config?.header?.component.load());
+                    }
+                    if (config?.footer?.component && 'load' in config?.footer?.component) {
+                        preloadTasks.push(config?.footer?.component.load());
+                    }
+                    try {
+                        await Promise.all(preloadTasks);
+                        resolve(found);
+                    }
+                    catch (e) {
+                        reject(e);
+                    }
+                });
+            });
+            if (!found)
+                resolve(false);
+        });
+    }
+    get id() {
+        if (this.props.id)
+            return this.props.id;
+        const prefix = this.parent ? `${this.parent.id}-` : '';
+        const id = (this.parentScreen?.path ?? 'root')
+            .toLowerCase()
+            .replace(/[^\w-]/g, '-') // Remove non-alphanumeric chars
+            .replace(/-+/g, '-') // Replace multiple hyphens with a single one
+            .replace(/^-|-$/g, ''); // Remove leading and trailing hyphens
+        return `${prefix}${id}`;
+    }
+    get isRoot() {
+        return !this.parent;
+    }
+    get baseURL() {
+        const pathname = this.isRoot ? window.location.pathname : this.parentScreen?.resolvedPathname;
+        const pattern = this.baseURLPattern.pathname;
+        return (0,utils/* resolveBaseURLFromPattern */.n4)(pattern, pathname);
+    }
+    get baseURLPattern() {
+        let baseURL = window.location.origin + "/";
+        const defaultBasePathname = this.isRoot ? new URL(".", document.baseURI).href.replace(baseURL, '') : ".";
+        let basePathname = this.props.config.basePath ?? defaultBasePathname;
+        if (this.parent && this.parentScreen) {
+            const { resolvedPathname = window.location.pathname, path } = this.parentScreen;
+            const parentBaseURL = this.parent.baseURL?.href;
+            const pattern = new URLPattern({ baseURL: parentBaseURL, pathname: path });
+            baseURL = (0,utils/* resolveBaseURLFromPattern */.n4)(pattern.pathname, resolvedPathname).href;
+        }
+        return new URLPattern({ baseURL, pathname: basePathname });
+    }
+    get pathPatterns() {
+        return external_react_.Children.map(this.props.children, (child) => {
+            return { pattern: child.props.path, caseSensitive: Boolean(child.props.caseSensitive) };
+        });
+    }
+    get mounted() {
+        return Boolean(this.ref.current);
+    }
+    get child() {
+        return this.#child?.deref() ?? null;
+    }
+    set child(child) {
+        const currentChildRouter = this.#child?.deref();
+        if (currentChildRouter
+            && child?.id !== currentChildRouter?.id
+            && currentChildRouter?.mounted) {
+            throw new Error("It looks like you have two navigators at the same level. Try simplifying your navigation structure by using a nested router instead.");
+        }
+        if (child)
+            this.#child = new WeakRef(child);
+        else
+            this.#child = null;
+    }
+    render() {
+        if (!this.navigation)
+            return;
+        return ((0,jsx_runtime.jsx)("div", { id: this.id, className: "react-motion-router", style: { width: '100%', height: '100%' }, ref: this.ref, children: (0,jsx_runtime.jsx)(RouterContext.Provider, { value: this, children: (0,jsx_runtime.jsx)(ScreenTransitionLayer, { ref: this.screenTransitionLayer, navigation: this.navigation, children: this.screens }) }) }));
+    }
+}
+
+;// CONCATENATED MODULE: ./src/MetaData.ts
+class MetaData {
+    #map = new Map();
+    mutationObserver;
+    constructor() {
+        this.mutationObserver = new MutationObserver(this.observeMutations.bind(this));
+        const { head } = document;
+        this.mutationObserver.observe(head, {
+            childList: true
+        });
+        Array.from(head.querySelectorAll('meta')).forEach(node => {
+            this.mutationObserver.observe(node, {
+                attributes: true
+            });
+        });
+        Array.from(head.querySelectorAll('meta')).forEach(this.metaDataFromNode.bind(this));
+    }
+    get(key) {
+        const metaKey = this.getMetaKey(key);
+        const metaContent = this.#map.get(metaKey);
+        if (!metaContent)
+            return undefined;
+        let content;
+        if (metaContent.includes(',') && metaContent.includes('=')) {
+            content = metaContent.split(/,\s*/).map(keyVal => keyVal.split('='));
+        }
+        else {
+            content = metaContent;
+        }
+        return content;
+    }
+    set(key, content) {
+        const metaKey = this.getMetaKey(key);
+        const metaContent = this.getMetaContent(content);
+        this.#map.set(metaKey, metaContent);
+        this.updateMetaElement(metaKey, metaContent);
+    }
+    has(key) {
+        const metaKey = this.getMetaKey(key);
+        return this.#map.has(metaKey);
+    }
+    delete(key) {
+        const metaKey = this.getMetaKey(key);
+        this.#map.delete(metaKey);
+        document.head.querySelector(`meta[${metaKey}]`)?.remove();
+    }
+    clear() {
+        document.head.querySelectorAll('meta').forEach(node => node.remove());
+    }
+    entries() {
+        return this.#map.entries();
+    }
+    [Symbol.iterator]() {
+        return this.entries();
+    }
+    get size() {
+        return this.#map.size;
+    }
+    observeMutations(mutations) {
+        for (const mutation of mutations) {
+            if (mutation.type === 'attributes') {
+                const node = mutation.target;
+                this.metaDataFromNode(node);
+            }
+            if (mutation.type !== 'childList')
+                return;
+            mutation.removedNodes.forEach((node) => {
+                if (node.nodeName === 'META') {
+                    const [type] = Array.from(node.attributes).filter(attribute => attribute.nodeName !== "content");
+                    const metaType = [type.nodeName, type.value];
+                    const key = metaType.join('=');
+                    if (this.#map.has(key)) {
+                        this.#map.delete(key);
+                    }
+                }
+            });
+            mutation.addedNodes.forEach(node => {
+                if (node.nodeName === 'META') {
+                    this.metaDataFromNode(node);
+                }
+            });
+        }
+    }
+    metaDataFromNode(node) {
+        const [type] = Array.from(node.attributes).filter(attribute => attribute.nodeName !== "content");
+        const [content] = Array.from(node.attributes).filter(attribute => attribute.nodeName === "content");
+        const metaType = [type.nodeName, type.value];
+        const key = metaType.join('=');
+        this.#map.set(key, content?.value);
+    }
+    getMetaKey(key) {
+        let metaKey;
+        if (typeof key === "string") {
+            metaKey = `name=${key}`;
+        }
+        else {
+            metaKey = key.join('=');
+        }
+        return metaKey;
+    }
+    getMetaContent(content) {
+        if (!content)
+            return undefined;
+        let metaContent;
+        if (typeof content === "string") {
+            metaContent = content;
+        }
+        else {
+            metaContent = content.map(contentTuple => contentTuple.join('=')).join(', ');
+        }
+        return metaContent;
+    }
+    updateMetaElement(key, content) {
+        const meta = document.querySelector(`meta[${key}]`) || document.createElement('meta');
+        const metaType = key.split('=');
+        meta.setAttribute(...metaType);
+        if (content)
+            meta.setAttribute('content', content);
+        else
+            meta.removeAttribute('content');
+        if (!meta.parentElement) {
+            document.head.appendChild(meta);
+        }
+    }
+}
+
+;// CONCATENATED MODULE: ./src/NavigationBase.ts
+
+class NavigationBase {
+    router;
+    static rootNavigatorRef = null;
+    metaData = new MetaData();
+    constructor(router) {
+        this.router = router;
+        const rootNavigator = NavigationBase.rootNavigatorRef?.deref();
+        if (!rootNavigator || !rootNavigator.isInDocument)
+            NavigationBase.rootNavigatorRef = new WeakRef(this);
+    }
+    addEventListener(type, listener, options) {
+        this.router.addEventListener(type, listener, options);
+        return () => this.router.removeEventListener(type, listener, options);
+    }
+    removeEventListener(type, listener, options) {
+        return this.router.removeEventListener(type, listener, options);
+    }
+    dispatchEvent(event) {
+        return this.router.dispatchEvent?.(event);
+    }
+    get parent() {
+        return this.router.parent?.navigation ?? null;
+    }
+    get routerId() {
+        return this.router.id;
+    }
+    get baseURL() {
+        return this.router.baseURL;
+    }
+    get baseURLPattern() {
+        return this.router.baseURLPattern;
+    }
+    getNavigatorById(routerId) {
+        return this.router.getRouterById(routerId)?.navigation ?? null;
+    }
+    preloadRoute(path) {
+        const { pathname } = new URL(path, this.baseURL);
+        return this.router.preloadRoute(pathname);
+    }
+    get isInDocument() {
+        return Boolean(document.getElementById(`${this.routerId}`));
+    }
+}
+
+;// CONCATENATED MODULE: ./src/common/hooks.ts
+
+
+
+
+function useNavigationBase() {
+    const router = (0,external_react_.useContext)(RouterContext);
+    if (router) {
+        return router.navigation;
+    }
+    else {
+        throw new Error("Router is null. You may be trying to call useNavigation outside a Router.");
+    }
+}
+function useRouterBase() {
+    return (0,external_react_.useContext)(RouterContext);
+}
+function useMotion() {
+    (0,external_react_.useDebugValue)("Motion");
+    return (0,external_react_.useContext)(MotionContext);
+}
+function useRouteBase() {
+    const routeProp = (0,external_react_.useContext)(RoutePropContext);
+    if (routeProp) {
+        return routeProp;
+    }
+    else {
+        throw new Error("Router is null. You may be trying to call useRoute outside a Router.");
+    }
+}
+
+;// CONCATENATED MODULE: ./src/common/constants.ts
+const MAX_Z_INDEX = 2147483647;
+const MAX_PROGRESS = 100;
+const MIN_PROGRESS = 0;
+const MIN_NORM_PROGRESS = 0;
+const MAX_NORM_PROGRESS = 1;
+
+;// CONCATENATED MODULE: ./src/index.ts
+/// <reference types="urlpattern-polyfill" />
+document.body.style.position = 'fixed';
+document.body.style.inset = '0';
+let root = document.getElementById('root');
+if (root) {
+    root.style.width = '100%';
+    root.style.height = '100%';
+}
+
+
+
+
+
+
+
+
+
+
+
+
+})();
+
+var __webpack_exports__LoadEvent = __webpack_exports__.Tc;
+var __webpack_exports__MAX_NORM_PROGRESS = __webpack_exports__.YU;
+var __webpack_exports__MAX_PROGRESS = __webpack_exports__.SR;
+var __webpack_exports__MAX_Z_INDEX = __webpack_exports__.dw;
+var __webpack_exports__MIN_NORM_PROGRESS = __webpack_exports__.Uy;
+var __webpack_exports__MIN_PROGRESS = __webpack_exports__.yn;
+var __webpack_exports__MotionContext = __webpack_exports__.vw;
+var __webpack_exports__MotionProgressEndEvent = __webpack_exports__.FC;
+var __webpack_exports__MotionProgressEvent = __webpack_exports__.yx;
+var __webpack_exports__MotionProgressStartEvent = __webpack_exports__.z4;
+var __webpack_exports__NavigationBase = __webpack_exports__.DC;
+var __webpack_exports__NestedRouterContext = __webpack_exports__.Fh;
+var __webpack_exports__PromiseAllDynamic = __webpack_exports__.DM;
+var __webpack_exports__RouterBase = __webpack_exports__.GW;
+var __webpack_exports__RouterContext = __webpack_exports__._q;
+var __webpack_exports__ScreenBase = __webpack_exports__.RG;
+var __webpack_exports__SharedElement = __webpack_exports__.rJ;
+var __webpack_exports__TransitionCancelEvent = __webpack_exports__.XP;
+var __webpack_exports__TransitionEndEvent = __webpack_exports__.d7;
+var __webpack_exports__TransitionStartEvent = __webpack_exports__.sy;
+var __webpack_exports__dispatchEvent = __webpack_exports__.Nu;
+var __webpack_exports__includesRoute = __webpack_exports__.e1;
+var __webpack_exports__isLazyExoticComponent = __webpack_exports__.Qv;
+var __webpack_exports__isNativeLazyExoticComponent = __webpack_exports__.R1;
+var __webpack_exports__isNavigationSupported = __webpack_exports__.vi;
+var __webpack_exports__isStylableElement = __webpack_exports__.R_;
+var __webpack_exports__isURLPatternSupported = __webpack_exports__.Ky;
+var __webpack_exports__isValidScreenChild = __webpack_exports__.$r;
+var __webpack_exports__lazy = __webpack_exports__.Vo;
+var __webpack_exports__matchRoute = __webpack_exports__.QN;
+var __webpack_exports__polyfillNavigation = __webpack_exports__.Sy;
+var __webpack_exports__polyfillURLPattern = __webpack_exports__.gy;
+var __webpack_exports__resolveBaseURLFromPattern = __webpack_exports__.n4;
+var __webpack_exports__toCamelCase = __webpack_exports__.zW;
+var __webpack_exports__useMotion = __webpack_exports__.nc;
+var __webpack_exports__useNavigationBase = __webpack_exports__.ev;
+var __webpack_exports__useRouteBase = __webpack_exports__.qr;
+var __webpack_exports__useRouterBase = __webpack_exports__.yL;
+export { __webpack_exports__LoadEvent as LoadEvent, __webpack_exports__MAX_NORM_PROGRESS as MAX_NORM_PROGRESS, __webpack_exports__MAX_PROGRESS as MAX_PROGRESS, __webpack_exports__MAX_Z_INDEX as MAX_Z_INDEX, __webpack_exports__MIN_NORM_PROGRESS as MIN_NORM_PROGRESS, __webpack_exports__MIN_PROGRESS as MIN_PROGRESS, __webpack_exports__MotionContext as MotionContext, __webpack_exports__MotionProgressEndEvent as MotionProgressEndEvent, __webpack_exports__MotionProgressEvent as MotionProgressEvent, __webpack_exports__MotionProgressStartEvent as MotionProgressStartEvent, __webpack_exports__NavigationBase as NavigationBase, __webpack_exports__NestedRouterContext as NestedRouterContext, __webpack_exports__PromiseAllDynamic as PromiseAllDynamic, __webpack_exports__RouterBase as RouterBase, __webpack_exports__RouterContext as RouterContext, __webpack_exports__ScreenBase as ScreenBase, __webpack_exports__SharedElement as SharedElement, __webpack_exports__TransitionCancelEvent as TransitionCancelEvent, __webpack_exports__TransitionEndEvent as TransitionEndEvent, __webpack_exports__TransitionStartEvent as TransitionStartEvent, __webpack_exports__dispatchEvent as dispatchEvent, __webpack_exports__includesRoute as includesRoute, __webpack_exports__isLazyExoticComponent as isLazyExoticComponent, __webpack_exports__isNativeLazyExoticComponent as isNativeLazyExoticComponent, __webpack_exports__isNavigationSupported as isNavigationSupported, __webpack_exports__isStylableElement as isStylableElement, __webpack_exports__isURLPatternSupported as isURLPatternSupported, __webpack_exports__isValidScreenChild as isValidScreenChild, __webpack_exports__lazy as lazy, __webpack_exports__matchRoute as matchRoute, __webpack_exports__polyfillNavigation as polyfillNavigation, __webpack_exports__polyfillURLPattern as polyfillURLPattern, __webpack_exports__resolveBaseURLFromPattern as resolveBaseURLFromPattern, __webpack_exports__toCamelCase as toCamelCase, __webpack_exports__useMotion as useMotion, __webpack_exports__useNavigationBase as useNavigationBase, __webpack_exports__useRouteBase as useRouteBase, __webpack_exports__useRouterBase as useRouterBase };
+
+//# sourceMappingURL=index.js.map