@react-motion-router/stack 2.0.0-beta.sha-1c021e3 → 2.0.0-beta.sha-c1cce91

package/build/index.js

@@ -895,6 +895,7 @@ __webpack_require__.d(__webpack_exports__, {
   "zF": () => (/* reexport */ FadeInKeyframes),
   "JA": () => (/* reexport */ FadeOutKeyframes),
   "rN": () => (/* reexport */ GestureRegion),
+  "c4": () => (/* reexport */ HistoryEntry),
   "W_": () => (/* reexport */ Navigation),
   "F0": () => (/* reexport */ Router),
   "lL": () => (/* reexport */ Screen),
@@ -946,7 +947,7 @@ var web_gesture_events = __webpack_require__(190);
 ;// CONCATENATED MODULE: external "@react-motion-router/core"
 var x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var y = x => () => x
-const core_namespaceObject = x({ ["NavigationBase"]: () => __WEBPACK_EXTERNAL_MODULE__react_motion_router_core_d1cff82c__.NavigationBase, ["RouterBase"]: () => __WEBPACK_EXTERNAL_MODULE__react_motion_router_core_d1cff82c__.RouterBase, ["ScreenBase"]: () => __WEBPACK_EXTERNAL_MODULE__react_motion_router_core_d1cff82c__.ScreenBase, ["includesRoute"]: () => __WEBPACK_EXTERNAL_MODULE__react_motion_router_core_d1cff82c__.includesRoute, ["isValidScreenChild"]: () => __WEBPACK_EXTERNAL_MODULE__react_motion_router_core_d1cff82c__.isValidScreenChild, ["matchRoute"]: () => __WEBPACK_EXTERNAL_MODULE__react_motion_router_core_d1cff82c__.matchRoute, ["resolveBaseURLFromPattern"]: () => __WEBPACK_EXTERNAL_MODULE__react_motion_router_core_d1cff82c__.resolveBaseURLFromPattern, ["useNavigationBase"]: () => __WEBPACK_EXTERNAL_MODULE__react_motion_router_core_d1cff82c__.useNavigationBase, ["useRouteBase"]: () => __WEBPACK_EXTERNAL_MODULE__react_motion_router_core_d1cff82c__.useRouteBase, ["useRouterBase"]: () => __WEBPACK_EXTERNAL_MODULE__react_motion_router_core_d1cff82c__.useRouterBase });
+const core_namespaceObject = x({ ["NavigationBase"]: () => __WEBPACK_EXTERNAL_MODULE__react_motion_router_core_d1cff82c__.NavigationBase, ["RouterBase"]: () => __WEBPACK_EXTERNAL_MODULE__react_motion_router_core_d1cff82c__.RouterBase, ["ScreenBase"]: () => __WEBPACK_EXTERNAL_MODULE__react_motion_router_core_d1cff82c__.ScreenBase, ["cloneAndInject"]: () => __WEBPACK_EXTERNAL_MODULE__react_motion_router_core_d1cff82c__.cloneAndInject, ["includesRoute"]: () => __WEBPACK_EXTERNAL_MODULE__react_motion_router_core_d1cff82c__.includesRoute, ["isValidScreenChild"]: () => __WEBPACK_EXTERNAL_MODULE__react_motion_router_core_d1cff82c__.isValidScreenChild, ["matchRoute"]: () => __WEBPACK_EXTERNAL_MODULE__react_motion_router_core_d1cff82c__.matchRoute, ["resolveBaseURLFromPattern"]: () => __WEBPACK_EXTERNAL_MODULE__react_motion_router_core_d1cff82c__.resolveBaseURLFromPattern, ["useNavigationBase"]: () => __WEBPACK_EXTERNAL_MODULE__react_motion_router_core_d1cff82c__.useNavigationBase, ["useRouteBase"]: () => __WEBPACK_EXTERNAL_MODULE__react_motion_router_core_d1cff82c__.useRouteBase, ["useRouterBase"]: () => __WEBPACK_EXTERNAL_MODULE__react_motion_router_core_d1cff82c__.useRouterBase });
 ;// CONCATENATED MODULE: ./src/common/events.ts
 class NavigateEvent extends Event {
     routerId;
@@ -954,42 +955,42 @@ class NavigateEvent extends Event {
     props;
     navigationType;
     signal;
-    result;
+    committed;
     transition;
-    constructor(routerId, route, props, type, signal, result, transition) {
+    constructor(routerId, route, props, type, signal, committed, transition) {
         super('navigate');
         this.routerId = routerId;
         this.route = route;
         this.props = props;
         this.navigationType = type ?? "push";
         this.signal = signal;
-        this.result = result;
+        this.committed = committed;
         this.transition = transition;
     }
 }
 class BackEvent extends Event {
     routerId;
     signal;
-    result;
+    committed;
     transition;
-    constructor(routerId, signal, result, transition) {
+    constructor(routerId, signal, committed, transition) {
         super('back');
         this.routerId = routerId;
         this.signal = signal;
-        this.result = result;
+        this.committed = committed;
         this.transition = transition;
     }
 }
 class ForwardEvent extends Event {
     routerId;
     signal;
-    result;
+    committed;
     transition;
-    constructor(routerId, signal, result, transition) {
+    constructor(routerId, signal, committed, transition) {
         super('forward');
         this.routerId = routerId;
         this.signal = signal;
-        this.result = result;
+        this.committed = committed;
         this.transition = transition;
     }
 }
@@ -1068,12 +1069,9 @@ class HistoryEntry {
 class Navigation extends core_namespaceObject.NavigationBase {
     router;
     constructor(router) {
-        super(router);
+        super();
         this.router = router;
     }
-    traverseTo(key) {
-        return window.navigation.traverseTo(key);
-    }
     replace(route, props = {}, options = {}) {
         return this.navigate(route, props, { ...options, type: "replace" });
     }
@@ -1083,6 +1081,24 @@ class Navigation extends core_namespaceObject.NavigationBase {
     reload(props = {}) {
         return window.navigation.reload({ state: props });
     }
+    traverseTo(key, options = {}) {
+        const result = window.navigation.traverseTo(key);
+        const transition = window.navigation.transition;
+        const fromIndex = transition.from.index;
+        const destinationIndex = window.navigation.entries().findIndex(entry => entry.key === key);
+        const controller = new AbortController();
+        controller.signal.addEventListener('abort', () => this.traverseTo(transition.from.key), { once: true });
+        options.signal?.addEventListener('abort', controller.abort, { once: true });
+        let event;
+        if (fromIndex > destinationIndex) {
+            event = this.createBackEvent(controller.signal, result.committed, transition);
+        }
+        else {
+            event = this.createForwardEvent(controller.signal, result.committed, transition);
+        }
+        this.dispatchEvent?.(event);
+        return result;
+    }
     navigate(route, props = {}, options = {}) {
         const { type: history = "push" } = options;
         const url = new URL(route, this.baseURL);
@@ -1091,50 +1107,51 @@ class Navigation extends core_namespaceObject.NavigationBase {
         const controller = new AbortController();
         controller.signal.addEventListener('abort', () => this.goBack(), { once: true });
         options.signal?.addEventListener('abort', controller.abort, { once: true });
-        const event = this.createNavigateEvent(route, props, history, controller.signal, result, transition);
+        const event = this.createNavigateEvent(route, props, history, controller.signal, result.committed, transition);
         this.dispatchEvent?.(event);
         return result;
     }
     goBack(options = {}) {
-        if (!this.canGoBack)
+        if (!this.canGoBack())
             return;
-        const previous = this.previous;
-        const result = window.navigation.traverseTo(previous.key);
+        const result = window.navigation.traverseTo(this.previous.key);
         const transition = window.navigation.transition;
         const controller = new AbortController();
         controller.signal.addEventListener('abort', () => this.goForward(), { once: true });
         options.signal?.addEventListener('abort', controller.abort, { once: true });
-        const event = this.createBackEvent(controller.signal, result, transition);
+        const event = this.createBackEvent(controller.signal, result.committed, transition);
         this.dispatchEvent?.(event);
         return result;
     }
     goForward(options = {}) {
-        if (!this.canGoForward)
+        if (!this.canGoForward())
             return;
-        const next = this.next;
-        const result = window.navigation.traverseTo(next.key);
+        const result = window.navigation.traverseTo(this.next.key);
         const transition = window.navigation.transition;
         const controller = new AbortController();
         controller.signal.addEventListener('abort', () => this.goBack(), { once: true });
         options.signal?.addEventListener('abort', controller.abort, { once: true });
-        const event = this.createForwardEvent(controller.signal, result, transition);
+        const event = this.createForwardEvent(controller.signal, result.committed, transition);
         this.dispatchEvent?.(event);
         return result;
     }
-    createBackEvent(signal, result, transition) {
+    createBackEvent(signal, committed, transition) {
         if (!this.routerId)
             throw new Error("Router ID is not set");
-        return new BackEvent(this.routerId, signal, result, transition);
+        return new BackEvent(this.routerId, signal, committed, transition);
     }
-    createForwardEvent(signal, result, transition) {
+    createForwardEvent(signal, committed, transition) {
         if (!this.routerId)
             throw new Error("Router ID is not set");
-        return new ForwardEvent(this.routerId, signal, result, transition);
+        return new ForwardEvent(this.routerId, signal, committed, transition);
     }
-    createNavigateEvent(route, props, type, signal, result, transition) {
+    createNavigateEvent(route, props, type, signal, committed, transition) {
         if (!this.routerId)
             throw new Error("Router ID is not set");
-        return new NavigateEvent(this.routerId, route, props, type, signal, result, transition);
+        return new NavigateEvent(this.routerId, route, props, type, signal, committed, transition);
+    }
+    get committed() {
+        return this.router.committed;
     }
     get transition() {
         return this.router.state.transition;
@@ -1190,49 +1207,87 @@ class Navigation extends core_namespaceObject.NavigationBase {
     get current() {
         return this.entries[this.index];
     }
-    get canGoBack() {
+    canGoBack() {
         return Boolean(this.previous?.sameDocument);
     }
-    get canGoForward() {
+    canGoForward() {
         return Boolean(this.next?.sameDocument);
     }
 }
 
+;// CONCATENATED MODULE: ./src/common/utils.ts
+function searchParamsToObject(searchParams) {
+    const entries = searchParams.entries();
+    const result = {};
+    for (const [key, value] of entries) { // each 'entry' is a [key, value] tuple
+        let parsedValue = '';
+        try {
+            parsedValue = JSON.parse(value);
+        }
+        catch (e) {
+            console.warn("Non JSON serialisable value was passed as URL route param.");
+            parsedValue = value;
+        }
+        result[key] = parsedValue;
+    }
+    return Object.keys(result).length ? result : undefined;
+}
+function searchParamsFromObject(params) {
+    try {
+        for (const [key, value] of Object.entries(params)) {
+            params[key] = JSON.stringify(value);
+        }
+        return new URLSearchParams(params).toString();
+    }
+    catch (e) {
+        console.error(e);
+        console.warn("Non JSON serialisable value was passed as query param.");
+    }
+    return '';
+}
+function isGesture(info) {
+    if (info && typeof info === 'object' && 'gesture' in info)
+        return Boolean(info.gesture);
+    return false;
+}
+function isRollback(info) {
+    if (info && typeof info === 'object' && 'rollback' in info)
+        return Boolean(info.rollback);
+    return false;
+}
+function deepEquals(obj1, obj2) {
+    if (obj1 === obj2) {
+        return true;
+    }
+    if (obj1 === null || obj2 === null || typeof obj1 !== 'object' || typeof obj2 !== 'object') {
+        return false;
+    }
+    const keys1 = Object.keys(obj1);
+    const keys2 = Object.keys(obj2);
+    if (keys1.length !== keys2.length) {
+        return false;
+    }
+    for (let key of keys1) {
+        if (!keys2.includes(key) || !deepEquals(obj1[key], obj2[key])) {
+            return false;
+        }
+    }
+    return true;
+}
+
 ;// CONCATENATED MODULE: ./src/Screen.tsx
 
+
 class Screen extends core_namespaceObject.ScreenBase {
-    routeProp;
+    #historyEntry;
     constructor(props, context) {
         super(props, context);
-        const setParams = this.setParams.bind(this);
-        const setConfig = this.setConfig.bind(this);
-        const getProps = () => this.props;
-        const getState = () => this.state;
-        this.routeProp = {
-            setParams,
-            setConfig,
-            get path() {
-                return getProps().path;
-            },
-            get resolvedPathname() {
-                return getProps().resolvedPathname;
-            },
-            get focused() {
-                return getState().focused;
-            },
-            get config() {
-                return {
-                    ...getProps().config,
-                    ...context.screenState.get(this.path)?.config
-                };
-            },
-            get params() {
-                return {
-                    ...getProps().defaultParams,
-                    ...context.screenState.get(this.path)?.params
-                };
-            }
-        };
+        const router = context;
+        const id = this.internalProps.id;
+        const historyEntry = router.navigation.entries.find(entry => entry.key === id);
+        if (!historyEntry)
+            throw new Error(`No history entry found for: ${id}`);
+        this.#historyEntry = historyEntry;
     }
     static getDerivedStateFromProps(props) {
         if (props.config?.presentation === "dialog"
@@ -1241,31 +1296,78 @@ class Screen extends core_namespaceObject.ScreenBase {
         else
             return { elementType: "div" };
     }
-    get config() {
-        return {
-            ...this.props.config,
-            ...this.context.screenState.get(this.props.path)?.config
-        };
-    }
-    get params() {
-        return {
-            ...this.props.defaultParams,
-            ...this.context.screenState.get(this.props.path)?.params
-        };
-    }
     setParams(params) {
         super.setParams(params);
-        if (this.state.focused)
-            window.navigation.updateCurrentEntry({ state: { params } });
+        this.setHistoryState({ params });
     }
     setConfig(config) {
         super.setConfig(config);
-        if (this.state.focused)
-            window.navigation.updateCurrentEntry({ state: { config } });
+        this.setHistoryState({ config });
     }
     get router() {
         return this.context;
     }
+    get internalProps() {
+        return this.props;
+    }
+    get resolvedPathname() {
+        return this.internalProps.resolvedPathname;
+    }
+    get historyEntryState() {
+        const entry = this.#historyEntry;
+        if (entry?.url) {
+            const state = entry.getState() ?? {};
+            const queryParams = searchParamsToObject(entry.url.searchParams);
+            state.params = {
+                ...state.params,
+                ...queryParams
+            };
+            return state;
+        }
+        return {};
+    }
+    get id() {
+        return this.internalProps.id.toString();
+    }
+    get params() {
+        return {
+            ...this.props.defaultParams,
+            ...this.historyEntryState.params,
+            ...this.state.params
+        };
+    }
+    get config() {
+        return {
+            ...this.props.config,
+            ...this.historyEntryState.config,
+            ...this.state.config
+        };
+    }
+    get routeProp() {
+        const setParams = this.setParams.bind(this);
+        const setConfig = this.setConfig.bind(this);
+        const { path } = this.props;
+        const { focused } = this.state;
+        const { params, config, resolvedPathname } = this;
+        return {
+            setParams,
+            setConfig,
+            path,
+            resolvedPathname,
+            focused,
+            params,
+            config
+        };
+    }
+    setHistoryState(newState) {
+        if (!this.state.focused)
+            return;
+        const state = {
+            ...window.navigation.currentEntry?.getState() ?? {},
+            ...newState
+        };
+        window.navigation.updateCurrentEntry({ state });
+    }
     onClickOutside(e) {
         if (!this.transitionProvider.current?.ref.current)
             return;
@@ -1326,8 +1428,26 @@ function isRefObject(value) {
         return true;
     return false;
 }
-function isVerticalDirection(direction) {
-    return direction === 'up' || direction === 'down' || direction === 'vertical';
+const directions = {
+    "horizontal": ["left", "right"],
+    "vertical": ["up", "down"],
+    "up": ["up"],
+    "down": ["down"],
+    "left": ["left"],
+    "right": ["right"]
+};
+function isSupportedDirection(direction, supported) {
+    return directions[supported].includes(direction);
+}
+function isOutOfBounds(direction, { x, y }, clientRect, gestureAreaWidth) {
+    if (direction === "right" && Math.abs(x - clientRect.left) >= gestureAreaWidth)
+        return false;
+    if (direction === "left" && Math.abs(x - clientRect.right) >= gestureAreaWidth)
+        return false;
+    if (direction === "down" && Math.abs(y - clientRect.top) >= gestureAreaWidth)
+        return false;
+    if (direction === "up" && Math.abs(y - clientRect.bottom) >= gestureAreaWidth)
+        return false;
 }
 function isHorizontalDirection(direction) {
     return direction === 'left' || direction === 'right' || direction === 'horizontal';
@@ -1339,67 +1459,41 @@ var external_react_ = __webpack_require__(810);
 var external_web_animations_extension_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_web_animations_extension_y = x => () => x
 const external_web_animations_extension_namespaceObject = external_web_animations_extension_x({ ["GestureTimeline"]: () => __WEBPACK_EXTERNAL_MODULE_web_animations_extension_74b2916c__.GestureTimeline, ["easingToLinear"]: () => __WEBPACK_EXTERNAL_MODULE_web_animations_extension_74b2916c__.easingToLinear, ["springToLinear"]: () => __WEBPACK_EXTERNAL_MODULE_web_animations_extension_74b2916c__.springToLinear });
-;// CONCATENATED MODULE: ./src/common/utils.ts
-function searchParamsToObject(searchPart) {
-    const entries = new URLSearchParams(decodeURI(searchPart)).entries();
-    const result = {};
-    for (const [key, value] of entries) { // each 'entry' is a [key, value] tuple
-        let parsedValue = '';
-        try {
-            parsedValue = JSON.parse(value);
-        }
-        catch (e) {
-            console.warn("Non JSON serialisable value was passed as URL route param.");
-            parsedValue = value;
-        }
-        result[key] = parsedValue;
-    }
-    return Object.keys(result).length ? result : undefined;
-}
-function searchParamsFromObject(params) {
-    try {
-        return new URLSearchParams(params).toString();
-    }
-    catch (e) {
-        console.error(e);
-        console.warn("Non JSON serialisable value was passed as query param.");
-    }
-    return '';
-}
-function isRollback(info) {
-    if (info && typeof info === 'object' && 'rollback' in info)
-        return Boolean(info.rollback);
-    return false;
-}
-function deepEquals(obj1, obj2) {
-    if (obj1 === obj2) {
-        return true;
-    }
-    if (obj1 === null || obj2 === null || typeof obj1 !== 'object' || typeof obj2 !== 'object') {
-        return false;
-    }
-    const keys1 = Object.keys(obj1);
-    const keys2 = Object.keys(obj2);
-    if (keys1.length !== keys2.length) {
-        return false;
-    }
-    for (let key of keys1) {
-        if (!keys2.includes(key) || !deepEquals(obj1[key], obj2[key])) {
-            return false;
-        }
-    }
-    return true;
-}
-
 ;// CONCATENATED MODULE: ./src/common/constants.ts
 const DEFAULT_GESTURE_CONFIG = {
     gestureHysteresis: 0.5,
     gestureMinFlingVelocity: 400,
     gestureAreaWidth: 100,
     gestureDirection: 'right',
-    disableGesture: false
+    gestureDisabled: false
 };
 
+;// CONCATENATED MODULE: ./src/common/promise-wrapper.ts
+class PromiseWrapper {
+    promise;
+    state;
+    nativeResolve;
+    nativeReject;
+    constructor() {
+        this.state = 'pending';
+        this.nativeResolve = this.nativeReject = null;
+        this.promise = new Promise((resolve, reject) => {
+            this.nativeResolve = resolve;
+            this.nativeReject = reject;
+        });
+    }
+    resolve(value) {
+        this.state = 'resolved';
+        this.nativeResolve?.(value);
+    }
+    reject(reason) {
+        this.state = 'rejected';
+        // Do not report unhandled promise rejections.
+        this.promise.catch(() => { });
+        this.nativeReject?.(reason);
+    }
+}
+
 ;// CONCATENATED MODULE: ./src/Router.tsx
 
 
@@ -1409,8 +1503,10 @@ const DEFAULT_GESTURE_CONFIG = {
 
 
 
+
 class Router extends core_namespaceObject.RouterBase {
     navigation = new Navigation(this);
+    #committed = null;
     constructor(props, context) {
         super(props, context);
         this.state = {
@@ -1418,13 +1514,13 @@ class Router extends core_namespaceObject.RouterBase {
             gestureDirection: "horizontal",
             gestureAreaWidth: 50,
             gestureHysteresis: 0.5,
-            disableGesture: true,
+            gestureDisabled: true,
             gestureMinFlingVelocity: 500,
             transition: null,
-            backNavigating: false,
             documentTitle: document.title,
             fromKey: null,
-            destinationKey: null
+            destinationKey: null,
+            controller: null
         };
     }
     static defaultProps = {
@@ -1442,7 +1538,7 @@ class Router extends core_namespaceObject.RouterBase {
             gestureAreaWidth: config?.gestureAreaWidth ?? DEFAULT_GESTURE_CONFIG.gestureAreaWidth,
             gestureMinFlingVelocity: config?.gestureMinFlingVelocity ?? DEFAULT_GESTURE_CONFIG.gestureMinFlingVelocity,
             gestureHysteresis: config?.gestureHysteresis ?? DEFAULT_GESTURE_CONFIG.gestureHysteresis,
-            disableGesture: config?.disableGesture ?? DEFAULT_GESTURE_CONFIG.disableGesture,
+            gestureDisabled: config?.gestureDisabled ?? DEFAULT_GESTURE_CONFIG.gestureDisabled,
             documentTitle: config?.title
         };
     }
@@ -1450,6 +1546,10 @@ class Router extends core_namespaceObject.RouterBase {
         super.componentDidMount();
         this.ref.current?.addEventListener('swipestart', this.onSwipeStart);
         this.ref.current?.addEventListener('swipeend', this.onSwipeEnd);
+        window.navigation.addEventListener("currententrychange", this.onCurrentEntryChange);
+        window.navigation.addEventListener("navigate", this.onNavigate);
+        window.navigation.addEventListener("navigatesuccess", this.onNavigateSuccess);
+        window.navigation.addEventListener("navigateerror", this.onNavigateError);
     }
     shouldComponentUpdate(nextProps, nextState) {
         return (!deepEquals(this.props.config, nextProps.config)
@@ -1459,29 +1559,44 @@ class Router extends core_namespaceObject.RouterBase {
     componentWillUnmount() {
         this.ref.current?.removeEventListener('swipestart', this.onSwipeStart);
         this.ref.current?.removeEventListener('swipeend', this.onSwipeEnd);
+        window.navigation.removeEventListener("currententrychange", this.onCurrentEntryChange);
+        window.navigation.removeEventListener("navigate", this.onNavigate);
+        window.navigation.removeEventListener("navigatesuccess", this.onNavigateSuccess);
+        window.navigation.removeEventListener("navigateerror", this.onNavigateError);
     }
+    onNavigate = () => {
+        this.#committed = new PromiseWrapper();
+    };
+    onCurrentEntryChange = () => {
+        this.#committed?.nativeResolve?.(window.navigation.currentEntry);
+    };
+    onNavigateSuccess = () => {
+        this.#committed = null;
+    };
+    onNavigateError = ({ error }) => {
+        if (this.#committed?.state === "pending")
+            this.#committed.nativeReject?.(error); // TODO: find out what the spec does for cancelled navigations
+        this.#committed = null;
+    };
+    onGestureCancel = () => {
+        if (!this.state.transition)
+            throw new Error("Rollback failed, transition is null");
+        window.navigation.traverseTo(this.state.transition.from.key, { info: { rollback: true } });
+    };
     canGestureNavigate(e) {
         if (!this.ref.current)
             return false;
-        if (this.state.disableGesture)
+        if (this.state.gestureDisabled)
             return false;
         const clientRect = this.ref.current.getBoundingClientRect();
         const { direction } = e;
-        if ((direction === "down" || direction === "right") && !this.navigation.canGoBack)
-            return false;
-        if ((direction === "up" || direction === "left") && !this.navigation.canGoForward)
-            return false;
-        if (isHorizontalDirection(direction) !== isHorizontalDirection(this.state.gestureDirection))
-            return false;
-        if (direction === "right" && Math.abs(e.x - clientRect.left) >= this.state.gestureAreaWidth)
-            return false;
-        if (direction === "left" && Math.abs(e.x - clientRect.right) >= this.state.gestureAreaWidth)
+        if ((direction === "down" || direction === "right") && !this.navigation.canGoBack())
             return false;
-        if (direction === "down" && Math.abs(e.y - clientRect.top) >= this.state.gestureAreaWidth)
+        if ((direction === "up" || direction === "left") && !this.navigation.canGoForward())
             return false;
-        if (direction === "up" && Math.abs(e.y - clientRect.bottom) >= this.state.gestureAreaWidth)
+        if (isOutOfBounds(direction, e, clientRect, this.state.gestureAreaWidth))
             return false;
-        return true;
+        return isSupportedDirection(direction, this.state.gestureDirection);
     }
     onSwipeStart = (e) => {
         if (!this.canGestureNavigate(e))
@@ -1517,10 +1632,11 @@ class Router extends core_namespaceObject.RouterBase {
             rangeStart,
             rangeEnd
         });
+        const gesture = true;
         if (direction === "down" || direction === "right")
-            this.navigation.goBack();
+            window.navigation.traverseTo(this.navigation.previous.key, { info: { gesture } });
         else
-            this.navigation.goForward();
+            window.navigation.traverseTo(this.navigation.next.key, { info: { gesture } });
         this.dispatchEvent(new GestureStartEvent(e));
     };
     onSwipeEnd = (e) => {
@@ -1530,22 +1646,29 @@ class Router extends core_namespaceObject.RouterBase {
         const playbackRate = this.screenTransitionLayer.current.animation.playbackRate;
         this.screenTransitionLayer.current.animation.timeline = document.timeline;
         const hysteresisReached = playbackRate > 0 ? progress > this.state.gestureHysteresis : progress < this.state.gestureHysteresis;
-        let rollback = false;
+        let gestureCancelled = false;
         if (e.velocity < this.state.gestureMinFlingVelocity && !hysteresisReached) {
+            gestureCancelled = true;
             this.screenTransitionLayer.current.animation.reverse();
-            rollback = true;
             this.dispatchEvent(new GestureCancelEvent());
         }
         else {
             this.dispatchEvent(new GestureEndEvent(e));
         }
-        const { fromKey } = this.state;
-        if (rollback && fromKey) {
-            this.state.transition?.finished.then(() => {
-                window.navigation.traverseTo(fromKey.toString(), { info: { rollback } });
+        if (gestureCancelled) {
+            this.screenTransitionLayer.current.animation.finished.then(() => {
+                this.state.controller?.abort("gesture-cancel");
             });
         }
     };
+    get committed() {
+        return this.#committed?.promise ?? null;
+    }
+    get backNavigating() {
+        const fromIndex = this.state.screenStack.findIndex(screen => screen.key === this.state.fromKey);
+        const destinationIndex = this.state.screenStack.findIndex(screen => screen.key === this.state.destinationKey);
+        return destinationIndex >= 0 && destinationIndex < fromIndex;
+    }
     get screens() {
         const screenStack = this.state.screenStack;
         return screenStack
@@ -1560,26 +1683,23 @@ class Router extends core_namespaceObject.RouterBase {
                 || screen.key === this.state.destinationKey;
         });
     }
-    screenChildFromPathname(pathname, key, config, params) {
+    screenChildFromPathname(pathname, key) {
         const screenChild = external_react_.Children.toArray(this.props.children)
-            .find(child => {
+            .find((child) => {
             if (!(0,core_namespaceObject.isValidScreenChild)(child))
-                return;
-            return (0,core_namespaceObject.matchRoute)(child.props.path, pathname, this.baseURLPattern.pathname, child.props.caseSensitive);
+                return false;
+            return (0,core_namespaceObject.matchRoute)(child.props.path, pathname, this.baseURLPattern.pathname, child.props.caseSensitive) !== null;
         });
-        if (!(0,core_namespaceObject.isValidScreenChild)(screenChild))
+        if (!screenChild)
             return null;
-        return (0,external_react_.cloneElement)(screenChild, {
+        key ??= crypto.randomUUID();
+        return (0,core_namespaceObject.cloneAndInject)(screenChild, {
             config: {
                 title: document.title,
                 ...this.props.config?.screenConfig,
-                ...screenChild.props.config,
-                ...config
-            },
-            defaultParams: {
-                ...screenChild.props.defaultParams,
-                ...params
+                ...screenChild.props.config
             },
+            id: key,
             resolvedPathname: pathname,
             key,
             ref: (0,external_react_.createRef)()
@@ -1641,9 +1761,7 @@ class Router extends core_namespaceObject.RouterBase {
             entries.forEach((entry) => {
                 if (!entry.url)
                     return null;
-                const { params, config } = entry.getState() ?? {};
-                const queryParams = searchParamsToObject(entry.url.search);
-                const screen = this.screenChildFromPathname(entry.url.pathname, entry.key, config, { ...queryParams, ...params });
+                const screen = this.screenChildFromPathname(entry.url.pathname, entry.key);
                 if (!screen)
                     return null;
                 screenStack.push(screen);
@@ -1680,10 +1798,8 @@ class Router extends core_namespaceObject.RouterBase {
         const screenStack = this.state.screenStack;
         const destination = e.destination;
         const destinationPathname = new URL(destination.url).pathname;
-        const { params, config } = destination.getState() ?? {};
-        const queryParams = searchParamsToObject(new URL(destination.url).search);
         const destinationKey = window.navigation.currentEntry?.key ?? destination.key;
-        const destinationScreen = this.screenChildFromPathname(destinationPathname, destinationKey, config, { ...queryParams, ...params });
+        const destinationScreen = this.screenChildFromPathname(destinationPathname, destinationKey);
         if (!destinationScreen)
             return e.preventDefault();
         const handler = () => {
@@ -1691,7 +1807,6 @@ class Router extends core_namespaceObject.RouterBase {
             const transition = this.state.transition ?? window.navigation.transition;
             const fromKey = transition?.from?.key ?? null;
             const currentIndex = screenStack.findIndex(screen => screen.key === this.navigation.current?.key);
-            const backNavigating = this.state.backNavigating;
             screenStack.splice(currentIndex, 1, destinationScreen);
             return new Promise((resolve, reject) => (0,external_react_.startTransition)(() => {
                 this.setState({ destinationKey, fromKey, transition, screenStack }, async () => {
@@ -1703,7 +1818,7 @@ class Router extends core_namespaceObject.RouterBase {
                         const currentTime = this.screenTransitionLayer.current?.animation.currentTime ?? 0;
                         this.screenTransitionLayer.current?.animation.cancel();
                         await new Promise(requestAnimationFrame);
-                        const animation = this.screenTransition(incomingScreen, outgoingScreen, backNavigating);
+                        const animation = this.screenTransition(incomingScreen, outgoingScreen);
                         if (animation) {
                             animation.currentTime = currentTime;
                         }
@@ -1724,6 +1839,8 @@ class Router extends core_namespaceObject.RouterBase {
         if (!(0,core_namespaceObject.isValidScreenChild)(this.getScreenChildByPathname(destinationPathname)))
             return e.preventDefault();
         const handler = () => {
+            if (isRollback(e.info))
+                return Promise.resolve();
             const transition = window.navigation.transition;
             let fromIndex = screenStack.findIndex(screen => screen.key === transition?.from.key);
             if (fromIndex === -1 && e.navigationType === "traverse") {
@@ -1738,51 +1855,62 @@ class Router extends core_namespaceObject.RouterBase {
             const fromKey = (screenStack[fromIndex]?.key || transition?.from.key) ?? null;
             const destinationIndex = screenStack.findIndex(screen => screen.key === e.destination.key);
             const destinationKey = (screenStack[destinationIndex]?.key || window.navigation.currentEntry?.key) ?? null;
-            const backNavigating = destinationIndex >= 0 && destinationIndex < fromIndex;
             if (e.navigationType === "push") {
-                const { params, config } = destination.getState() ?? {};
                 const destinationPathname = new URL(destination.url).pathname;
-                const queryParams = searchParamsToObject(new URL(destination.url).search);
-                const destinationScreen = this.screenChildFromPathname(destinationPathname, destinationKey, config, { ...queryParams, ...params });
+                const destinationScreen = this.screenChildFromPathname(destinationPathname, destinationKey);
                 if (!destinationScreen)
                     return Promise.resolve();
                 screenStack.splice(fromIndex + 1, Infinity, // Remove all screens after current
                 destinationScreen);
             }
+            const controller = new AbortController();
             return new Promise((resolve, reject) => (0,external_react_.startTransition)(() => {
-                this.setState({ destinationKey, fromKey, transition, screenStack, backNavigating }, async () => {
+                this.setState({ controller, destinationKey, fromKey, transition, screenStack }, async () => {
+                    controller.signal.onabort = reject;
                     const signal = e.signal;
                     const outgoingScreen = this.getScreenRefByKey(String(fromKey));
                     const incomingScreen = this.getScreenRefByKey(String(destinationKey));
                     const pendingLifecycleHandlers = this.dispatchLifecycleHandlers(incomingScreen, outgoingScreen, signal).catch(reject);
-                    if (!isRollback(e.info)) {
-                        const animation = this.screenTransition(incomingScreen, outgoingScreen, backNavigating);
-                        animation?.updatePlaybackRate(1);
-                        animation?.finished.catch(reject);
-                    }
+                    const animation = this.screenTransition(incomingScreen, outgoingScreen);
+                    animation?.updatePlaybackRate(1);
+                    animation?.finished.catch(reject);
                     await pendingLifecycleHandlers;
-                    this.setState({ destinationKey: null, fromKey: null, transition: null }, resolve);
+                    this.setState({ destinationKey: null, fromKey: null, transition: null, controller: null }, resolve);
                 });
             }));
         };
-        e.intercept({ handler });
+        let commit;
+        if (isGesture(e.info)) {
+            commit = "after-transition";
+            this.addEventListener("gesture-end", () => e.commit?.(), { once: true });
+            this.addEventListener("gesture-cancel", this.onGestureCancel, { once: true });
+        }
+        else {
+            commit = "immediate";
+        }
+        const options = { handler, commit };
+        e.intercept(options);
     }
     async dispatchLifecycleHandlers(incomingScreen, outgoingScreen, signal) {
         let animationStarted = false;
         this.addEventListener('transition-start', () => animationStarted = true, { once: true });
         await Promise.all([
-            outgoingScreen?.current?.onExit(signal).then(() => outgoingScreen.current?.blur()),
-            incomingScreen?.current?.onEnter(signal).then(() => incomingScreen.current?.focus()),
+            outgoingScreen?.current?.onExit(signal),
+            incomingScreen?.current?.onEnter(signal),
             incomingScreen?.current?.load(signal)
         ]);
         if (animationStarted)
             await new Promise((resolve) => this.addEventListener('transition-end', resolve, { once: true }));
+        // if gesture navigation cancelled then exit here
+        if (this.state.controller?.signal.aborted)
+            return;
         await Promise.all([
-            outgoingScreen?.current?.onExited(signal),
-            incomingScreen?.current?.onEntered(signal)
+            outgoingScreen?.current?.onExited(signal).then(() => outgoingScreen.current?.blur()),
+            incomingScreen?.current?.onEntered(signal).then(() => incomingScreen.current?.focus())
         ]);
     }
-    screenTransition(incomingScreen, outgoingScreen, backNavigating) {
+    screenTransition(incomingScreen, outgoingScreen) {
+        const { backNavigating } = this;
         if (this.screenTransitionLayer.current && incomingScreen && outgoingScreen) {
             this.screenTransitionLayer.current.direction = backNavigating ? 'reverse' : 'normal';
             if (incomingScreen.current?.transitionProvider.current) {
@@ -2286,6 +2414,8 @@ function androidScaleFromCentre({ ref, direction, index, playbackRate }) {
 function GestureRegion({ disabled, children, ...props }) {
     const ref = (0,external_react_.useRef)(null);
     (0,external_react_.useEffect)(() => {
+        if (disabled)
+            return;
         const onSwipeStart = (e) => {
             e.stopPropagation();
             e.preventDefault();
@@ -2294,7 +2424,7 @@ function GestureRegion({ disabled, children, ...props }) {
         return () => {
             ref.current?.removeEventListener('swipestart', onSwipeStart);
         };
-    }, [ref]);
+    }, [ref, disabled]);
     return ((0,jsx_runtime.jsx)("div", { ref: ref, className: "gesture-region", "data-disabled": disabled, style: { display: 'contents' }, ...props, children: children }));
 }
 
@@ -2311,12 +2441,14 @@ function GestureRegion({ disabled, children, ...props }) {
 
 
 
+
 })();
 
 var __webpack_exports__Anchor = __webpack_exports__.ee;
 var __webpack_exports__FadeInKeyframes = __webpack_exports__.zF;
 var __webpack_exports__FadeOutKeyframes = __webpack_exports__.JA;
 var __webpack_exports__GestureRegion = __webpack_exports__.rN;
+var __webpack_exports__HistoryEntry = __webpack_exports__.c4;
 var __webpack_exports__Navigation = __webpack_exports__.W_;
 var __webpack_exports__Router = __webpack_exports__.F0;
 var __webpack_exports__Screen = __webpack_exports__.lL;
@@ -2361,6 +2493,6 @@ var __webpack_exports__iOSSlideOutToRightKeyframes = __webpack_exports__.Cj;
 var __webpack_exports__useNavigation = __webpack_exports__.HJ;
 var __webpack_exports__useRoute = __webpack_exports__.yj;
 var __webpack_exports__useRouter = __webpack_exports__.tv;
-export { __webpack_exports__Anchor as Anchor, __webpack_exports__FadeInKeyframes as FadeInKeyframes, __webpack_exports__FadeOutKeyframes as FadeOutKeyframes, __webpack_exports__GestureRegion as GestureRegion, __webpack_exports__Navigation as Navigation, __webpack_exports__Router as Router, __webpack_exports__Screen as Screen, __webpack_exports__SlideInFromBottomKeyframes as SlideInFromBottomKeyframes, __webpack_exports__SlideInFromLeftKeyframes as SlideInFromLeftKeyframes, __webpack_exports__SlideInFromRightKeyframes as SlideInFromRightKeyframes, __webpack_exports__SlideInFromTopKeyframes as SlideInFromTopKeyframes, __webpack_exports__SlideOutToBottomKeyframes as SlideOutToBottomKeyframes, __webpack_exports__SlideOutToLeftKeyframes as SlideOutToLeftKeyframes, __webpack_exports__SlideOutToRightKeyframes as SlideOutToRightKeyframes, __webpack_exports__SlideOutToTopKeyframes as SlideOutToTopKeyframes, __webpack_exports__ZoomInKeyframes as ZoomInKeyframes, __webpack_exports__ZoomOutKeyframes as ZoomOutKeyframes, __webpack_exports__androidBottomSheetSlideInOptions as androidBottomSheetSlideInOptions, __webpack_exports__androidBottomSheetSlideOutOptions as androidBottomSheetSlideOutOptions, __webpack_exports__androidConcealToBottomKeyframes as androidConcealToBottomKeyframes, __webpack_exports__androidFadeInFromBottom as androidFadeInFromBottom, __webpack_exports__androidFadeInFromBottomKeyframes as androidFadeInFromBottomKeyframes, __webpack_exports__androidFadeInFromBottomOptions as androidFadeInFromBottomOptions, __webpack_exports__androidFadeInFromBottomSheet as androidFadeInFromBottomSheet, __webpack_exports__androidFadeInFromBottomSheetKeyframes as androidFadeInFromBottomSheetKeyframes, __webpack_exports__androidFadeInFromRight as androidFadeInFromRight, __webpack_exports__androidFadeInFromRightKeyframes as androidFadeInFromRightKeyframes, __webpack_exports__androidFadeOutToBottomOptions as androidFadeOutToBottomOptions, __webpack_exports__androidFadeOutToLeftKeyframes as androidFadeOutToLeftKeyframes, __webpack_exports__androidRevealFromBottom as androidRevealFromBottom, __webpack_exports__androidRevealFromBottomKeyframes as androidRevealFromBottomKeyframes, __webpack_exports__androidRevealFromBottomOptions as androidRevealFromBottomOptions, __webpack_exports__androidScaleFromCentre as androidScaleFromCentre, __webpack_exports__androidScaleFromCentreKeyframes as androidScaleFromCentreKeyframes, __webpack_exports__androidScaleFromCentreOptions as androidScaleFromCentreOptions, __webpack_exports__androidScaleToCentreKeyframes as androidScaleToCentreKeyframes, __webpack_exports__iOSKeyframeOptions as iOSKeyframeOptions, __webpack_exports__iOSSlideInFromBottom as iOSSlideInFromBottom, __webpack_exports__iOSSlideInFromBottomKeyframes as iOSSlideInFromBottomKeyframes, __webpack_exports__iOSSlideInFromLeft as iOSSlideInFromLeft, __webpack_exports__iOSSlideInFromLeftKeyframes as iOSSlideInFromLeftKeyframes, __webpack_exports__iOSSlideInFromRight as iOSSlideInFromRight, __webpack_exports__iOSSlideInFromRightKeyframes as iOSSlideInFromRightKeyframes, __webpack_exports__iOSSlideOutToLeftKeyframes as iOSSlideOutToLeftKeyframes, __webpack_exports__iOSSlideOutToRightKeyframes as iOSSlideOutToRightKeyframes, __webpack_exports__useNavigation as useNavigation, __webpack_exports__useRoute as useRoute, __webpack_exports__useRouter as useRouter };
+export { __webpack_exports__Anchor as Anchor, __webpack_exports__FadeInKeyframes as FadeInKeyframes, __webpack_exports__FadeOutKeyframes as FadeOutKeyframes, __webpack_exports__GestureRegion as GestureRegion, __webpack_exports__HistoryEntry as HistoryEntry, __webpack_exports__Navigation as Navigation, __webpack_exports__Router as Router, __webpack_exports__Screen as Screen, __webpack_exports__SlideInFromBottomKeyframes as SlideInFromBottomKeyframes, __webpack_exports__SlideInFromLeftKeyframes as SlideInFromLeftKeyframes, __webpack_exports__SlideInFromRightKeyframes as SlideInFromRightKeyframes, __webpack_exports__SlideInFromTopKeyframes as SlideInFromTopKeyframes, __webpack_exports__SlideOutToBottomKeyframes as SlideOutToBottomKeyframes, __webpack_exports__SlideOutToLeftKeyframes as SlideOutToLeftKeyframes, __webpack_exports__SlideOutToRightKeyframes as SlideOutToRightKeyframes, __webpack_exports__SlideOutToTopKeyframes as SlideOutToTopKeyframes, __webpack_exports__ZoomInKeyframes as ZoomInKeyframes, __webpack_exports__ZoomOutKeyframes as ZoomOutKeyframes, __webpack_exports__androidBottomSheetSlideInOptions as androidBottomSheetSlideInOptions, __webpack_exports__androidBottomSheetSlideOutOptions as androidBottomSheetSlideOutOptions, __webpack_exports__androidConcealToBottomKeyframes as androidConcealToBottomKeyframes, __webpack_exports__androidFadeInFromBottom as androidFadeInFromBottom, __webpack_exports__androidFadeInFromBottomKeyframes as androidFadeInFromBottomKeyframes, __webpack_exports__androidFadeInFromBottomOptions as androidFadeInFromBottomOptions, __webpack_exports__androidFadeInFromBottomSheet as androidFadeInFromBottomSheet, __webpack_exports__androidFadeInFromBottomSheetKeyframes as androidFadeInFromBottomSheetKeyframes, __webpack_exports__androidFadeInFromRight as androidFadeInFromRight, __webpack_exports__androidFadeInFromRightKeyframes as androidFadeInFromRightKeyframes, __webpack_exports__androidFadeOutToBottomOptions as androidFadeOutToBottomOptions, __webpack_exports__androidFadeOutToLeftKeyframes as androidFadeOutToLeftKeyframes, __webpack_exports__androidRevealFromBottom as androidRevealFromBottom, __webpack_exports__androidRevealFromBottomKeyframes as androidRevealFromBottomKeyframes, __webpack_exports__androidRevealFromBottomOptions as androidRevealFromBottomOptions, __webpack_exports__androidScaleFromCentre as androidScaleFromCentre, __webpack_exports__androidScaleFromCentreKeyframes as androidScaleFromCentreKeyframes, __webpack_exports__androidScaleFromCentreOptions as androidScaleFromCentreOptions, __webpack_exports__androidScaleToCentreKeyframes as androidScaleToCentreKeyframes, __webpack_exports__iOSKeyframeOptions as iOSKeyframeOptions, __webpack_exports__iOSSlideInFromBottom as iOSSlideInFromBottom, __webpack_exports__iOSSlideInFromBottomKeyframes as iOSSlideInFromBottomKeyframes, __webpack_exports__iOSSlideInFromLeft as iOSSlideInFromLeft, __webpack_exports__iOSSlideInFromLeftKeyframes as iOSSlideInFromLeftKeyframes, __webpack_exports__iOSSlideInFromRight as iOSSlideInFromRight, __webpack_exports__iOSSlideInFromRightKeyframes as iOSSlideInFromRightKeyframes, __webpack_exports__iOSSlideOutToLeftKeyframes as iOSSlideOutToLeftKeyframes, __webpack_exports__iOSSlideOutToRightKeyframes as iOSSlideOutToRightKeyframes, __webpack_exports__useNavigation as useNavigation, __webpack_exports__useRoute as useRoute, __webpack_exports__useRouter as useRouter };
 
 //# sourceMappingURL=index.js.map