@flemo/react 1.11.1 → 1.12.0

package/dist/Router.d.ts

@@ -1,6 +1,8 @@
 import { CSSProperties, PropsWithChildren } from 'react';
 import { HistoryDriver, PartTransition, Decorator, Transition, TransitionName } from '@flemo/core';
 interface RouterProps {
+    name?: string;
+    strictRoutes?: boolean;
     initPath?: string;
     defaultTransitionName?: TransitionName;
     transitions?: Transition[];
@@ -11,5 +13,5 @@ interface RouterProps {
     className?: string;
     style?: CSSProperties;
 }
-declare function Router({ children, initPath, defaultTransitionName, transitions, decorators, partTransitions, history, createDriver, className, style }: PropsWithChildren<RouterProps>): import("react").JSX.Element;
+declare function Router({ children, name, strictRoutes, initPath, defaultTransitionName, transitions, decorators, partTransitions, history, createDriver, className, style }: PropsWithChildren<RouterProps>): import("react").JSX.Element;
 export default Router;

package/dist/RouterScopeContext.d.ts

@@ -0,0 +1,12 @@
+import { FlemoStores } from '@flemo/core';
+import { Path } from 'path-to-regexp';
+export interface RouterScopeNode {
+    name?: string;
+    stores: FlemoStores;
+    routePaths: Path[];
+    strictRoutes: boolean;
+    parent: RouterScopeNode | null;
+    depth: number;
+}
+declare const RouterScopeContext: import('react').Context<RouterScopeNode | null>;
+export default RouterScopeContext;

package/dist/RouterTarget.d.ts

@@ -0,0 +1,24 @@
+import { RouterScopeNode } from './RouterScopeContext';
+export interface RegisterRouter {
+}
+export type RouterScopeKeyword = "current" | "parent" | "root" | "nearest-owner";
+export type RouterName = keyof RegisterRouter extends never ? string & {} : keyof RegisterRouter;
+export type RouterTarget = RouterScopeKeyword | RouterName | {
+    name: RouterName;
+} | {
+    scope: RouterScopeKeyword;
+};
+export interface ResolveRouterTargetInput {
+    from: RouterScopeNode;
+    target?: RouterTarget;
+    path?: string;
+    pathname?: string;
+}
+export interface RouterTargetResolution {
+    node: RouterScopeNode | null;
+    message: string | null;
+}
+export declare function ownsRoute(node: RouterScopeNode, path: string, pathname?: string): boolean;
+export declare function describeAncestry(from: RouterScopeNode): string;
+export default function resolveRouterTarget({ from, target, path, pathname }: ResolveRouterTargetInput): RouterTargetResolution;
+export declare function findDuplicateNamedAncestor(node: RouterScopeNode): RouterScopeNode | null;

package/dist/__tests__/RouterTarget.test.d.ts

@@ -0,0 +1,9 @@
+declare module "../RouterTarget" {
+    interface RegisterRouter {
+        app: true;
+        region: true;
+        sidebar: true;
+        parent: true;
+    }
+}
+export {};

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 export { default as Router } from './Router';
 export { default as Route, type RegisterRoute } from './Route';
 export { default as Slot, type SlotProps } from './Slot';
-export { default as useNavigate } from './navigate/useNavigate';
+export { default as useNavigate, type UseNavigateOptions } from './navigate/useNavigate';
+export { type RegisterRouter, type RouterName, type RouterScopeKeyword, type RouterTarget } from './RouterTarget';
+export { type RouterScopeNode } from './RouterScopeContext';
 export { default as usePathname } from './navigate/usePathname';
 export { default as useStep } from './navigate/useStep';
 export { default as useScreen } from './screen/useScreen';

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import e, { Activity as t, Children as n, createContext as r, isValidElement as i, useCallback as a, useContext as o, useEffect as s, useId as c, useImperativeHandle as l, useInsertionEffect as u, useLayoutEffect as d, useReducer as f, useRef as p, useState as m, useSyncExternalStore as ee } from "react";
-import { animHoldKey as te, appendParamsQuery as ne, buildRoutePath as re, computeBarRiding as ie, computeScreenFreeze as h, computeScreenFreezeMode as g, consumeSelfInducedPop as ae, createAnimHoldCoordinator as _, createBrowserHistoryDriver as v, createBrowserHistoryDriver as y, createDecorator as b, createHistoryStore as x, createNavigateStore as oe, createNavigationController as S, createPartTransition as C, createRawDecorator as se, createRawPartTransition as w, createRawTransition as T, createRouterScope as E, createScreenSelector as D, createScreenStore as O, createStepController as k, createSwipeController as ce, createTransition as A, createTransitionEngine as le, createTransitionStore as j, decoratorMap as ue, detectBlinkEngine as de, eagerlyDecodeImages as fe, ensureGpuPipelinePrewarm as pe, ensureImageDecodeOffloader as me, ensureScopeHistorySync as he, enteringInitialStyle as ge, getMatchedPathPattern as _e, governedCompiledActive as ve, holdCompositorWarm as M, isLegacyAndroidBlink as ye, isOpaqueColor as be, isServer as N, markSelfInducedPop as xe, matchesPathname as Se, observeBarHeight as Ce, observeViewportScrollHeight as we, partTransitionMap as Te, readImageOffloadOverride as Ee, readLayerPromotionFlag as De, readPrerasterFlag as Oe, readSettleGateFlag as ke, readStepParams as Ae, registerTransitionDefinitions as je, releaseScopeHistorySync as Me, resolveTransition as Ne, seedRouterEntry as Pe, sharedBarsMatch as Fe, steadySixtyPlayerEligible as Ie, subscribeStepParamsRestore as Le } from "@flemo/core";
+import { animHoldKey as te, appendParamsQuery as ne, buildRoutePath as re, computeBarRiding as ie, computeScreenFreeze as ae, computeScreenFreezeMode as oe, consumeSelfInducedPop as se, createAnimHoldCoordinator as h, createBrowserHistoryDriver as g, createBrowserHistoryDriver as _, createDecorator as v, createHistoryStore as y, createNavigateStore as ce, createNavigationController as b, createPartTransition as x, createRawDecorator as le, createRawPartTransition as S, createRawTransition as C, createRouterScope as w, createScreenSelector as T, createScreenStore as E, createStepController as D, createSwipeController as ue, createTransition as O, createTransitionEngine as de, createTransitionStore as k, decoratorMap as fe, detectBlinkEngine as A, eagerlyDecodeImages as pe, ensureGpuPipelinePrewarm as me, ensureImageDecodeOffloader as he, ensureScopeHistorySync as j, enteringInitialStyle as ge, getMatchedPathPattern as _e, governedCompiledActive as ve, holdCompositorWarm as M, isLegacyAndroidBlink as ye, isOpaqueColor as be, isServer as N, markSelfInducedPop as xe, matchesPathname as Se, observeBarHeight as Ce, observeViewportScrollHeight as we, partTransitionMap as Te, readImageOffloadOverride as Ee, readLayerPromotionFlag as De, readPrerasterFlag as Oe, readSettleGateFlag as ke, readStepParams as Ae, registerTransitionDefinitions as je, releaseScopeHistorySync as Me, resolveTransition as Ne, seedRouterEntry as Pe, sharedBarsMatch as Fe, steadySixtyPlayerEligible as Ie, subscribeStepParamsRestore as Le } from "@flemo/core";
 import { jsx as P, jsxs as Re } from "react/jsx-runtime";
 import { flushSync as ze } from "react-dom";
 //#region src/stores/StoreContext.ts
@@ -15,7 +15,7 @@ function I() {
 //#region src/history/HistoryListener.tsx
 function L() {
 	let e = I();
-	return s(() => (he(e), () => Me(e)), [e]), null;
+	return s(() => (j(e), () => Me(e)), [e]), null;
 }
 //#endregion
 //#region src/screen/ScreenContext.ts
@@ -39,10 +39,10 @@ function z() {
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsContext.ts
-var B = r({}), V = r(() => {});
+var B = r({}), Be = r(() => {});
 //#endregion
 //#region src/screen/ParamsProvider/ParamsReducer.ts
-function Be(e, t) {
+function Ve(e, t) {
 	switch (t.type) {
 		case "SET": return t.params;
 		default: return e;
@@ -50,8 +50,8 @@ function Be(e, t) {
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsProvider.tsx
-function Ve({ children: e }) {
-	let { isActive: t, params: n } = z(), { driver: r } = I(), [i, a] = f(Be, n);
+function He({ children: e }) {
+	let { isActive: t, params: n } = z(), { driver: r } = I(), [i, a] = f(Ve, n);
 	return s(() => {
 		if (t) return Le(r, (e) => a({
 			type: "SET",
@@ -61,7 +61,7 @@ function Ve({ children: e }) {
 		t,
 		a,
 		r
-	]), /* @__PURE__ */ P(V.Provider, {
+	]), /* @__PURE__ */ P(Be.Provider, {
 		value: a,
 		children: /* @__PURE__ */ P(B.Provider, {
 			value: i,
@@ -71,24 +71,24 @@ function Ve({ children: e }) {
 }
 //#endregion
 //#region ../../node_modules/.pnpm/zustand@5.0.14_@types+react@19.2.18_react@19.2.8/node_modules/zustand/esm/react.mjs
-var He = (e) => e;
-function H(t, n = He) {
+var Ue = (e) => e;
+function V(t, n = Ue) {
 	let r = e.useSyncExternalStore(t.subscribe, e.useCallback(() => n(t.getState()), [t, n]), e.useCallback(() => n(t.getInitialState()), [t, n]));
 	return e.useDebugValue(r), r;
 }
 //#endregion
 //#region src/stores/useHistoryStore.ts
-function U(e) {
-	return H(I().history, e);
+function H(e) {
+	return V(I().history, e);
 }
 //#endregion
 //#region src/RouterIdContext.ts
-var Ue = r(null);
+var We = r(null);
 //#endregion
 //#region src/renderer/Renderer.tsx
-function We({ children: e }) {
-	let t = U((e) => e.index), r = U((e) => e.histories), i = I(), a = o(R), s = o(Ue);
-	return D(r, t).map((t) => {
+function Ge({ children: e }) {
+	let t = H((e) => e.index), r = H((e) => e.histories), i = I(), a = o(R), s = o(We);
+	return T(r, t).map((t) => {
 		let [r] = n.toArray(e).filter((e) => Se(e.props.path, t.pathname));
 		return r ? /* @__PURE__ */ P(R.Provider, {
 			value: {
@@ -98,19 +98,19 @@ function We({ children: e }) {
 				routerId: s ?? void 0,
 				routePath: _e(r.props.path, t.pathname)
 			},
-			children: /* @__PURE__ */ P(Ve, { children: r })
+			children: /* @__PURE__ */ P(He, { children: r })
 		}, t.id) : null;
 	});
 }
 //#endregion
 //#region src/screen/ScreenViewportContext.ts
-var Ge = r({ contained: !1 });
-function Ke() {
-	return o(Ge);
+var Ke = r({ contained: !1 });
+function qe() {
+	return o(Ke);
 }
 //#endregion
 //#region src/transition/styles.ts
-function qe(e, t, n = []) {
+function Je(e, t, n = []) {
 	u(() => je(e, t, n), [
 		e,
 		t,
@@ -118,9 +118,97 @@ function qe(e, t, n = []) {
 	]);
 }
 //#endregion
+//#region src/utils/devDiagnostics.ts
+function Ye() {
+	return typeof process < "u" && process.env.NODE_ENV !== "production";
+}
+function Xe(e) {
+	!Ye() || typeof console > "u" || console.error(`[flemo] ${e}`);
+}
+function Ze(e) {
+	if (Ye()) throw Error(`[flemo] ${e}`);
+}
+//#endregion
 //#region src/RouterDepthContext.ts
-var Je = r(0), Ye = { contained: !0 };
-function Xe({ children: e, className: t, style: n }) {
+var Qe = r(0), U = r(null), W = [
+	"current",
+	"parent",
+	"root",
+	"nearest-owner"
+], $e = (e) => W.includes(e), G = (e) => {
+	let t = [];
+	for (let n = e; n; n = n.parent) t.push(n);
+	return t;
+};
+function et(e, t, n) {
+	return e.routePaths.length === 0 || e.routePaths.some((e) => e === t) ? !0 : n ? Se(e.routePaths, n) : !1;
+}
+function K(e) {
+	return G(e).map((e, t) => {
+		let n = t === 0 ? "current" : `${t} level(s) up`;
+		return e.name ? `"${e.name}" (${n})` : `<unnamed> (${n})`;
+	}).join(", ");
+}
+function q({ from: e, target: t, path: n, pathname: r }) {
+	if (t === void 0) return {
+		node: e,
+		message: null
+	};
+	let i = null, a = null;
+	if (typeof t == "string" ? $e(t) ? i = t : a = t : "scope" in t ? i = t.scope : a = t.name, a !== null) {
+		let t = G(e).find((e) => e.name === a);
+		return t ? {
+			node: t,
+			message: null
+		} : {
+			node: null,
+			message: `no <Router name="${a}"> encloses this call. Routers in scope: ${K(e)}.`
+		};
+	}
+	switch (i) {
+		case "parent": return e.parent ? {
+			node: e.parent,
+			message: null
+		} : {
+			node: null,
+			message: "router: \"parent\" was requested, but the enclosing <Router> is the outermost one (it has no parent Router)."
+		};
+		case "root": {
+			let t = G(e);
+			return {
+				node: t[t.length - 1],
+				message: null
+			};
+		}
+		case "nearest-owner": {
+			if (!n) return {
+				node: e,
+				message: "router: \"nearest-owner\" needs a route to search for, and pop() carries none. Falling back to \"current\" — name the Router explicitly for a cross-Router pop."
+			};
+			let t = G(e).find((e) => et(e, n, r));
+			return t ? {
+				node: t,
+				message: null
+			} : {
+				node: null,
+				message: `no <Router> in scope declares a <Route path="${n}">. Routers in scope: ${K(e)}.`
+			};
+		}
+		default: return {
+			node: e,
+			message: null
+		};
+	}
+}
+function tt(e) {
+	if (!e.name) return null;
+	for (let t = e.parent; t; t = t.parent) if (t.name === e.name) return t;
+	return null;
+}
+//#endregion
+//#region src/Slot.tsx
+var nt = { contained: !0 };
+function rt({ children: e, className: t, style: n }) {
 	return /* @__PURE__ */ P("div", {
 		className: t,
 		style: {
@@ -128,63 +216,75 @@ function Xe({ children: e, className: t, style: n }) {
 			overflow: "hidden",
 			...n
 		},
-		children: /* @__PURE__ */ P(Ge.Provider, {
-			value: Ye,
-			children: /* @__PURE__ */ P(We, { children: e })
+		children: /* @__PURE__ */ P(Ke.Provider, {
+			value: nt,
+			children: /* @__PURE__ */ P(Ge, { children: e })
 		})
 	});
 }
 //#endregion
 //#region src/Router.tsx
-function Ze(e) {
+function it(e) {
 	let t = null;
 	return n.forEach(e, (e) => {
 		if (t || !i(e)) return;
-		if (e.type === Xe) {
+		if (e.type === rt) {
 			t = n.toArray(e.props.children).filter(i);
 			return;
 		}
 		let r = e.props.children;
 		if (r) {
-			let e = Ze(r);
+			let e = it(r);
 			e && (t = e);
 		}
 	}), t;
 }
-var Qe = typeof window > "u" ? s : d, W = [], $e = [], et = [], tt = { contained: !0 }, G = 500, K = 3e3;
-function nt({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = W, decorators: a = $e, partTransitions: l = et, history: u = "browser", createDriver: d, className: f, style: p }) {
-	let ee = o(Je), te = c(), [ne, re] = m(!1);
-	s(() => re(!0), []);
-	let ie = ne ? te : null, h = ee > 0, g = u === "memory", ae = c(), _ = o(R), v = o(F), b = h && _.id ? `_F_${v?.routerKey ?? ""}${_.id}_` : ae, x = Ze(e), oe = x !== null, S = h ? null : v, C = S !== null, se = d ?? y, [w] = m(() => g ? null : se(C ? void 0 : b)), T = !h && !g && !N(), D = T && w ? w.readPathname() : t || "/", O = D.indexOf("?"), k = (O >= 0 ? D.slice(0, O) : D) || "/", ce = T ? window.location.search : O >= 0 ? D.slice(O) : "", [A] = m(() => {
-		let t = (x ?? n.toArray(e)).map((e) => e.props.path).flat();
-		return E({
-			routePaths: t,
-			pathname: k,
-			search: ce,
-			defaultTransitionName: r,
-			memory: g,
-			browserDriver: w,
-			hostedScope: S,
-			routerKey: C ? void 0 : b,
-			zoneEntryId: h && !C && _.id || void 0,
-			persistKey: h && !g && !C ? b : void 0
-		});
+var J = typeof window > "u" ? s : d, at = typeof window > "u" ? s : u, Y = [], ot = [], st = [], ct = { contained: !0 }, lt = 500, ut = 3e3;
+function dt({ children: e, name: t, strictRoutes: r = !1, initPath: a = "/", defaultTransitionName: l = "cupertino", transitions: u = Y, decorators: d = ot, partTransitions: f = st, history: p = "browser", createDriver: ee, className: te, style: ne }) {
+	let re = o(Qe), ie = c(), [ae, oe] = m(!1);
+	s(() => oe(!0), []);
+	let se = ae ? ie : null, h = re > 0, g = p === "memory", v = c(), y = o(R), ce = o(F), b = h && y.id ? `_F_${ce?.routerKey ?? ""}${y.id}_` : v, x = it(e), le = x !== null, S = (x ?? n.toArray(e).filter(i)).flatMap((e) => e.props?.path ? [e.props.path].flat() : []), C = h ? null : ce, T = C !== null, E = ee ?? _, [D] = m(() => g ? null : E(T ? void 0 : b)), ue = !h && !g && !N(), O = ue && D ? D.readPathname() : a || "/", de = O.indexOf("?"), k = (de >= 0 ? O.slice(0, de) : O) || "/", fe = ue ? window.location.search : de >= 0 ? O.slice(de) : "", [A] = m(() => w({
+		routePaths: S,
+		pathname: k,
+		search: fe,
+		defaultTransitionName: l,
+		memory: g,
+		browserDriver: D,
+		hostedScope: C,
+		routerKey: T ? void 0 : b,
+		zoneEntryId: h && !T && y.id || void 0,
+		persistKey: h && !g && !T ? b : void 0
+	}));
+	J(() => {
+		A.transition.getState().defaultTransitionName !== l && A.transition.setState({ defaultTransitionName: l });
 	});
-	A.transition.setState({ defaultTransitionName: r }), Qe(() => (A.life.alive = !0, () => {
+	let pe = o(U), [j] = m(() => ({
+		name: t,
+		stores: A,
+		routePaths: S,
+		strictRoutes: r,
+		parent: pe,
+		depth: re
+	}));
+	at(() => {
+		j.name = t, j.stores = A, j.routePaths = S, j.strictRoutes = r, j.parent = pe;
+	}), s(() => {
+		tt(j) && Xe(`duplicate <Router name="${j.name}">: an enclosing <Router> already uses that name, so \`router\` targets resolve to the nearer one. Give each nested Router a unique name.`);
+	}, [j, t]), J(() => (A.life.alive = !0, () => {
 		A.life.alive = !1;
-	}), [A]), qe(i, a, l), s(() => {
+	}), [A]), Je(u, d, f), s(() => {
 		let e = Ee();
-		if (e !== "off") return e === "on" || ye() ? me() : void 0;
-	}, []), s(() => pe(), []), s(() => {
+		if (e !== "off") return e === "on" || ye() ? he() : void 0;
+	}, []), s(() => me(), []), s(() => {
 		if (typeof document > "u") return;
 		let e = null, t = null, n = 0, r = () => {
 			let r = Date.now();
-			if (r - n < G) return;
+			if (r - n < lt) return;
 			n = r, t && clearTimeout(t);
 			let i = e;
 			e = M(), i?.(), t = setTimeout(() => {
 				t = null, e?.(), e = null;
-			}, K);
+			}, ut);
 		}, i = [
 			"pointerdown",
 			"pointermove",
@@ -198,89 +298,126 @@ function nt({ children: e, initPath: t = "/", defaultTransitionName: r = "cupert
 			t && clearTimeout(t), e?.();
 		};
 	}, []), s(() => {
-		g || !w || Pe({
-			driver: w,
-			routerKey: C ? null : b,
-			nested: h && !C,
+		g || !D || Pe({
+			driver: D,
+			routerKey: T ? null : b,
+			nested: h && !T,
 			seedPathname: k,
-			defaultTransitionName: r,
+			defaultTransitionName: l,
 			rootParams: A.history.getState().histories[0]?.params ?? {}
 		});
 	}, [
 		g,
-		C,
+		T,
 		h,
 		b,
 		k,
-		r,
+		l,
 		A.history,
-		w
+		D
 	]);
-	let le = oe ? e : /* @__PURE__ */ P(We, { children: e }), j = /* @__PURE__ */ P(Ue.Provider, {
-		value: ie,
-		children: /* @__PURE__ */ P(Je.Provider, {
-			value: ee + 1,
-			children: /* @__PURE__ */ Re(F.Provider, {
-				value: A,
-				children: [!g && /* @__PURE__ */ P(L, {}), h ? /* @__PURE__ */ P(Ge.Provider, {
-					value: tt,
-					children: le
-				}) : le]
+	let ge = le ? e : /* @__PURE__ */ P(Ge, { children: e }), _e = /* @__PURE__ */ P(We.Provider, {
+		value: se,
+		children: /* @__PURE__ */ P(Qe.Provider, {
+			value: re + 1,
+			children: /* @__PURE__ */ P(U.Provider, {
+				value: j,
+				children: /* @__PURE__ */ Re(F.Provider, {
+					value: A,
+					children: [!g && /* @__PURE__ */ P(L, {}), h ? /* @__PURE__ */ P(Ke.Provider, {
+						value: ct,
+						children: ge
+					}) : ge]
+				})
 			})
 		})
 	});
 	return h ? /* @__PURE__ */ P("div", {
-		className: f,
+		className: te,
 		style: {
 			position: "relative",
 			overflow: "hidden",
-			...p
+			...ne
 		},
-		children: j
-	}) : j;
+		children: _e
+	}) : _e;
 }
 //#endregion
 //#region src/Route.tsx
-function q({ element: e }) {
+function ft({ element: e }) {
 	return e;
 }
 //#endregion
 //#region src/utils/buildRoutePath.ts
-function rt(e, t) {
+function pt(e, t) {
 	return re(e, t);
 }
 //#endregion
 //#region src/navigate/useNavigate.ts
-function it() {
-	let e = I(), t = S({
-		stores: e,
-		buildPathname: (e, t) => rt(e, t),
-		driver: e.driver,
-		markSelfInduced: e.markSelfInduced
-	});
+function X(e) {
+	let t = I(), n = o(U) ?? {
+		stores: t,
+		routePaths: [],
+		strictRoutes: !1,
+		parent: null,
+		depth: 0
+	}, r = (t, r, i) => {
+		let a = t ?? e?.router, o;
+		if (r) try {
+			o = pt(r, i).toPathname;
+		} catch {
+			o = void 0;
+		}
+		let { node: s, message: c } = q({
+			from: n,
+			target: a,
+			path: r,
+			pathname: o
+		});
+		if (!s) return Ze(c ?? "the requested Router could not be resolved."), null;
+		if (c && Xe(c), r && !et(s, r, o)) {
+			let e = `"${r}" is not declared by ${s.name ? `<Router name="${s.name}">` : "the target <Router>"}, so the navigation cannot mount a screen there. Declare a matching <Route>, target the Router that owns it, or use \`router: "nearest-owner"\`.`;
+			a !== void 0 || s.strictRoutes ? Ze(e) : Xe(e);
+		}
+		return b({
+			stores: s.stores,
+			buildPathname: (e, t) => pt(e, t),
+			driver: s.stores.driver,
+			markSelfInduced: s.stores.markSelfInduced
+		});
+	};
 	return {
-		push: (e, n, r) => t.push(e, n ?? {}, r),
-		replace: (e, n, r) => t.replace(e, n ?? {}, r),
-		pop: (e) => t.pop(e)
+		push: (e, t, n) => {
+			let i = r(n?.router, e, t ?? {});
+			return i ? i.push(e, t ?? {}, n) : Promise.resolve();
+		},
+		replace: (e, t, n) => {
+			let i = r(n?.router, e, t ?? {});
+			return i ? i.replace(e, t ?? {}, n) : Promise.resolve();
+		},
+		pop: (e) => {
+			let t = r(e?.router);
+			return t ? t.pop(e) : Promise.resolve();
+		}
 	};
 }
 //#endregion
 //#region src/navigate/usePathname.ts
-function J() {
-	return U((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
+function mt() {
+	return H((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
 }
 //#endregion
 //#region src/navigate/useStep.ts
-function at() {
-	let { routePath: e } = z(), t = I(), n = o(V), { driver: r, markSelfInduced: i } = t, [a, c] = m(null);
+function ht() {
+	let { routePath: e } = z(), t = I(), n = o(Be), { driver: r, markSelfInduced: i } = t, [a, c] = m(null);
 	s(() => {
 		if (!e) return c(Ae(r.readState())), r.subscribe((e) => c(Ae(e.state)));
 	}, [e, r]);
-	let l = k({
+	let l = D({
 		stores: t,
 		driver: r,
 		markSelfInduced: i,
-		buildStepPathname: (t) => e ? rt(e, t).pathname : ne(r.readPathname(), t),
+		buildStepPathname: (t) => e ? pt(e, t).pathname : ne(r.readPathname(), t),
 		applyParams: (t) => {
 			n({
 				type: "SET",
@@ -297,13 +434,13 @@ function at() {
 }
 //#endregion
 //#region src/screen/ParamsProvider/useParams.ts
-function Y() {
+function gt() {
 	return o(B);
 }
 //#endregion
 //#region src/screen/ScreenFreeze.tsx
-var ot = 3e3;
-function st({ freeze: e, children: n }) {
+var _t = 3e3;
+function vt({ freeze: e, children: n }) {
 	let [r, i] = m(e), a = p(null);
 	return !e && r && i(!1), s(() => {
 		if (!(!e || r)) {
@@ -313,7 +450,7 @@ function st({ freeze: e, children: n }) {
 			}
 			return a.current = setTimeout(() => {
 				a.current = null, i(!0);
-			}, ot), () => {
+			}, _t), () => {
 				a.current !== null && (clearTimeout(a.current), a.current = null);
 			};
 		}
@@ -324,22 +461,22 @@ function st({ freeze: e, children: n }) {
 }
 //#endregion
 //#region src/screen/scopeAnimHoldCoordinator.ts
-var ct = /* @__PURE__ */ new WeakMap();
-function lt(e) {
-	let t = ct.get(e);
-	return t || (t = _(), ct.set(e, t)), t;
+var Z = /* @__PURE__ */ new WeakMap();
+function yt(e) {
+	let t = Z.get(e);
+	return t || (t = h(), Z.set(e, t)), t;
 }
 //#endregion
 //#region src/stores/useNavigateStore.ts
-function ut(e) {
-	return H(I().navigate, e);
+function bt(e) {
+	return V(I().navigate, e);
 }
 //#endregion
 //#region src/screen/ScreenDecorator.tsx
-function dt({ ref: e, style: t, ...n }) {
+function xt({ ref: e, style: t, ...n }) {
 	let { isActive: r, isPrev: i, transitionName: a } = z(), o = p(null);
 	l(e, () => o.current);
-	let s = ut((e) => i ? "COMPLETED" : e.status), { decoratorName: c } = Ne(a), u = ue.get(c);
+	let s = bt((e) => i ? "COMPLETED" : e.status), { decoratorName: c } = Ne(a), u = fe.get(c);
 	return u ? /* @__PURE__ */ P("div", {
 		ref: o,
 		"data-flemo-decorator": !0,
@@ -361,7 +498,7 @@ function dt({ ref: e, style: t, ...n }) {
 }
 //#endregion
 //#region src/screen/useViewportScrollHeight.ts
-function ft() {
+function St() {
 	let [e, t] = m(0), [n, r] = m(0);
 	return s(() => we((e, n) => {
 		r(n), t(e);
@@ -372,61 +509,61 @@ function ft() {
 }
 //#endregion
 //#region src/utils/useHydrationSafeFlag.ts
-var pt = () => () => {}, mt = () => !1;
-function ht(e) {
-	return ee(pt, e, mt);
+var Q = () => () => {}, Ct = () => !1;
+function wt(e) {
+	return ee(Q, e, Ct);
 }
 //#endregion
 //#region src/stores/useScreenStore.ts
-function X(e) {
-	return H(I().screen, e);
+function $(e) {
+	return V(I().screen, e);
 }
 //#endregion
 //#region src/screen/ScreenMotion.tsx
-function gt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: i, sharedTopBar: c, sharedTopBarId: l, sharedBottomBar: u, sharedBottomBarId: f, topBar: ee, bottomBar: ne, hideStatusBar: re, hideSystemNavigationBar: g, backgroundColor: ae = "white", contentScrollable: _ = !0, ...v }) {
-	let { id: y, isActive: b, isRoot: x, isPrev: oe, zIndex: S, transitionName: C, prevTransitionName: se } = z(), { contained: w } = Ke(), T = w ? "absolute" : "fixed", E = I(), D = o(Ue), O = U((e) => e.index), k = U((e) => e.histories), A = b || S === O - 1, j = ut((e) => A ? e.status : "COMPLETED"), pe = X((e) => e.dragStatus), me = X((e) => e.replaceTransitionStatus), he = E.screen.getState().setDragStatus, _e = E.screen.getState().setReplaceTransitionStatus, M = b ? k[O - 1]?.id : k[O]?.id, ye = X((e) => M ? e.sharedBars[M] : void 0), N = X((e) => M ? e.sharedBarMetadata[M] : void 0), xe = X((e) => M ? e.screenSurfaces[M] : void 0), Se = p(null);
-	Se.current ||= le({
-		getTransitionTaskId: () => E.navigate.getState().transitionTaskId,
-		setDragStatus: he,
+function Tt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: i, sharedTopBar: c, sharedTopBarId: l, sharedBottomBar: u, sharedBottomBarId: f, topBar: ee, bottomBar: ne, hideStatusBar: re, hideSystemNavigationBar: oe, backgroundColor: se = "white", contentScrollable: h = !0, ...g }) {
+	let { id: _, isActive: v, isRoot: y, isPrev: ce, zIndex: b, transitionName: x, prevTransitionName: le } = z(), { contained: S } = qe(), C = S ? "absolute" : "fixed", w = I(), T = o(We), E = H((e) => e.index), D = H((e) => e.histories), O = v || b === E - 1, k = bt((e) => O ? e.status : "COMPLETED"), me = $((e) => e.dragStatus), he = $((e) => e.replaceTransitionStatus), j = w.screen.getState().setDragStatus, _e = w.screen.getState().setReplaceTransitionStatus, M = v ? D[E - 1]?.id : D[E]?.id, ye = $((e) => M ? e.sharedBars[M] : void 0), N = $((e) => M ? e.sharedBarMetadata[M] : void 0), xe = $((e) => M ? e.screenSurfaces[M] : void 0), Se = p(null);
+	Se.current ||= de({
+		getTransitionTaskId: () => w.navigate.getState().transitionTaskId,
+		setDragStatus: j,
 		setReplaceTransitionStatus: _e
 	});
 	let we = Se.current, Te = p(null);
-	Te.current ||= lt(E.navigate);
-	let Ee = Ne(C), { initial: Ae, swipeDirection: je, decoratorName: Me } = Ee, Pe = ue.get(Me), { viewportScrollHeight: Ie } = ft(), Le = Ie > 0, F = !!c, L = !!u, R = F ? `${typeof l}:${String(l)}` : null, B = L ? `${typeof f}:${String(f)}` : null, [V, Be] = m({
+	Te.current ||= yt(w.navigate);
+	let Ee = Ne(x), { initial: Ae, swipeDirection: je, decoratorName: Me } = Ee, Pe = fe.get(Me), { viewportScrollHeight: Ie } = St(), Le = Ie > 0, F = !!c, L = !!u, R = F ? `${typeof l}:${String(l)}` : null, B = L ? `${typeof f}:${String(f)}` : null, [Be, Ve] = m({
 		key: R,
 		height: 0
-	}), [Ve, He] = m({
+	}), [He, Ue] = m({
 		key: B,
 		height: 0
-	}), H = p(V), We = p(Ve), Ge = V.key === R ? V.height : 0, qe = Ve.key === B ? Ve.height : 0, Je = Fe(F ? { id: l } : void 0, N?.topBar) ? N?.topBar?.height ?? 0 : 0, Ye = Fe(L ? { id: f } : void 0, N?.bottomBar) ? N?.bottomBar?.height ?? 0 : 0, Xe = Ge || Je, Ze = qe || Ye, Qe = p(null), W = p(null), $e = p(null), et = p(null), tt = p(null), G = p(null), K = p(null), nt = a((e) => {
-		e <= 0 || R === null || (et.current && (et.current.style.minHeight = `${e}px`), H.current = {
+	}), V = p(Be), Ge = p(He), Ke = Be.key === R ? Be.height : 0, Je = He.key === B ? He.height : 0, Ye = Fe(F ? { id: l } : void 0, N?.topBar) ? N?.topBar?.height ?? 0 : 0, Xe = Fe(L ? { id: f } : void 0, N?.bottomBar) ? N?.bottomBar?.height ?? 0 : 0, Ze = Ke || Ye, Qe = Je || Xe, U = p(null), W = p(null), $e = p(null), G = p(null), et = p(null), K = p(null), q = p(null), tt = a((e) => {
+		e <= 0 || R === null || (G.current && (G.current.style.minHeight = `${e}px`), V.current = {
 			key: R,
 			height: e
-		}, Be((t) => t.key === R && t.height === e ? t : {
+		}, Ve((t) => t.key === R && t.height === e ? t : {
 			key: R,
 			height: e
-		}), E.screen.getState().updateSharedBarHeight(y, "topBar", e));
+		}), w.screen.getState().updateSharedBarHeight(_, "topBar", e));
 	}, [
-		y,
-		E.screen,
+		_,
+		w.screen,
 		R
-	]), q = a((e) => {
-		e <= 0 || B === null || (tt.current && (tt.current.style.minHeight = `${e}px`), We.current = {
+	]), nt = a((e) => {
+		e <= 0 || B === null || (et.current && (et.current.style.minHeight = `${e}px`), Ge.current = {
 			key: B,
 			height: e
-		}, He((t) => t.key === B && t.height === e ? t : {
+		}, Ue((t) => t.key === B && t.height === e ? t : {
 			key: B,
 			height: e
-		}), E.screen.getState().updateSharedBarHeight(y, "bottomBar", e));
+		}), w.screen.getState().updateSharedBarHeight(_, "bottomBar", e));
 	}, [
 		B,
-		y,
-		E.screen
+		_,
+		w.screen
 	]), rt = a((e) => {
-		G.current = e, e?.offsetHeight && nt(e.offsetHeight);
-	}, [nt]), it = a((e) => {
-		K.current = e, e?.offsetHeight && q(e.offsetHeight);
-	}, [q]), J = p({
+		K.current = e, e?.offsetHeight && tt(e.offsetHeight);
+	}, [tt]), it = a((e) => {
+		q.current = e, e?.offsetHeight && nt(e.offsetHeight);
+	}, [nt]), J = p({
 		transition: Ee,
 		decorator: Pe,
 		hasSharedTopBar: !!c,
@@ -434,11 +571,11 @@ function gt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 		sharedTopBarId: l,
 		sharedBottomBarId: f,
 		viewportScrollHeight: Ie,
-		isRoot: x,
-		isActive: b,
-		status: j,
-		dragStatus: pe,
-		index: O
+		isRoot: y,
+		isActive: v,
+		status: k,
+		dragStatus: me,
+		index: E
 	});
 	J.current = {
 		transition: Ee,
@@ -448,22 +585,22 @@ function gt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 		sharedTopBarId: l,
 		sharedBottomBarId: f,
 		viewportScrollHeight: Ie,
-		isRoot: x,
-		isActive: b,
-		status: j,
-		dragStatus: pe,
-		index: O
+		isRoot: y,
+		isActive: v,
+		status: k,
+		dragStatus: me,
+		index: E
 	};
 	let at = p(null);
-	at.current ||= ce({
+	at.current ||= ue({
 		getTransition: () => J.current.transition,
 		getDecorator: () => J.current.decorator,
 		getElements: () => ({
 			scope: W.current,
-			screenContainer: Qe.current,
+			screenContainer: U.current,
 			decorator: $e.current,
-			sharedTopBar: G.current,
-			sharedBottomBar: K.current
+			sharedTopBar: K.current,
+			sharedBottomBar: q.current
 		}),
 		hasSharedTopBar: () => J.current.hasSharedTopBar,
 		hasSharedBottomBar: () => J.current.hasSharedBottomBar,
@@ -475,21 +612,21 @@ function gt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 			return !e.isRoot && e.isActive && e.status === "COMPLETED" && e.dragStatus === "IDLE" && !!e.transition.swipeDirection && e.viewportScrollHeight < 10;
 		},
 		getPartnerBars: () => {
-			let e = J.current, t = E.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
-			return n ? E.screen.getState().sharedBars[n] : void 0;
+			let e = J.current, t = w.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
+			return n ? w.screen.getState().sharedBars[n] : void 0;
 		},
 		getPartnerBarMetadata: () => {
-			let e = J.current, t = E.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
-			return n ? E.screen.getState().sharedBarMetadata[n] : void 0;
+			let e = J.current, t = w.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
+			return n ? w.screen.getState().sharedBarMetadata[n] : void 0;
 		},
-		setDragStatus: he,
+		setDragStatus: j,
 		back: () => window.history.back()
 	});
-	let Y = at.current, ot = (e) => Y.pointerDown(e.nativeEvent), st = (e) => Y.pointerMove(e.nativeEvent), ct = (e) => Y.pointerUp(e.nativeEvent), pt = (e) => Y.pointerCancel(e.nativeEvent), mt = (e) => {
-		(j === "PUSHING" || j === "REPLACING") && (e.preventDefault(), e.stopPropagation());
+	let Y = at.current, ot = (e) => Y.pointerDown(e.nativeEvent), st = (e) => Y.pointerMove(e.nativeEvent), ct = (e) => Y.pointerUp(e.nativeEvent), lt = (e) => Y.pointerCancel(e.nativeEvent), ut = (e) => {
+		(k === "PUSHING" || k === "REPLACING") && (e.preventDefault(), e.stopPropagation());
 	};
 	s(() => {
-		fe(W.current);
+		pe(W.current);
 	}, []), s(() => {
 		let e = W.current;
 		if (!e) return;
@@ -500,8 +637,8 @@ function gt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 			e.removeEventListener("touchmove", t);
 		};
 	}, [Y]), d(() => {
-		let { registerSharedBars: e, unregisterSharedBars: t } = E.screen.getState(), n = H.current, r = We.current;
-		return e(y, {
+		let { registerSharedBars: e, unregisterSharedBars: t } = w.screen.getState(), n = V.current, r = Ge.current;
+		return e(_, {
 			topBar: F,
 			bottomBar: L
 		}, {
@@ -513,133 +650,133 @@ function gt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				id: f,
 				height: r.key === B ? r.height : void 0
 			} : void 0
-		}), () => t(y);
+		}), () => t(_);
 	}, [
 		B,
 		L,
 		F,
-		y,
+		_,
 		f,
 		l,
-		E.screen,
+		w.screen,
 		R
 	]), d(() => {
-		let e = G.current;
-		if (e) return Ce(e, nt);
-	}, [nt, c]), d(() => {
 		let e = K.current;
-		if (e) return Ce(e, q);
-	}, [q, u]), d(() => {
+		if (e) return Ce(e, tt);
+	}, [tt, c]), d(() => {
+		let e = q.current;
+		if (e) return Ce(e, nt);
+	}, [nt, u]), d(() => {
 		let e = W.current;
 		if (!e) return;
-		let { registerScreenSurface: t, unregisterScreenSurface: n } = E.screen.getState();
-		return t(y, { opaqueBackground: be(getComputedStyle(e).backgroundColor) }), () => n(y);
+		let { registerScreenSurface: t, unregisterScreenSurface: n } = w.screen.getState();
+		return t(_, { opaqueBackground: be(getComputedStyle(e).backgroundColor) }), () => n(_);
 	}, [
-		y,
-		ae,
-		j,
-		E.screen
+		_,
+		se,
+		k,
+		w.screen
 	]);
-	let gt = A, { app: _t, nav: vt } = ie({
-		status: j,
-		isTopOrTopPrev: gt,
+	let dt = O, { app: ft, nav: pt } = ie({
+		status: k,
+		isTopOrTopPrev: dt,
 		hasTopBar: F,
 		hasNavBar: L,
 		topBarId: l,
 		bottomBarId: f,
 		partnerBars: ye,
 		partnerMetadata: N
-	}), Z = te({
-		status: j,
-		isTopOrTopPrev: gt,
-		transitionName: C
-	}), yt = h({
-		isActive: b,
-		isPrev: oe,
-		zIndex: S,
-		index: O,
-		status: j,
-		dragStatus: pe,
-		replaceTransitionStatus: me
-	}), bt = p(yt), xt = p(Z !== null && yt), [St, Ct] = m({
-		key: Z,
-		released: Z === null
+	}), X = te({
+		status: k,
+		isTopOrTopPrev: dt,
+		transitionName: x
+	}), mt = ae({
+		isActive: v,
+		isPrev: ce,
+		zIndex: b,
+		index: E,
+		status: k,
+		dragStatus: me,
+		replaceTransitionStatus: he
+	}), ht = p(mt), gt = p(X !== null && mt), [_t, vt] = m({
+		key: X,
+		released: X === null
 	});
-	St.key !== Z && (Ct({
-		key: Z,
-		released: Z === null
-	}), xt.current = Z !== null && bt.current), bt.current = yt;
-	let Q = Z !== null && St.key === Z && !St.released, $ = Q ? !b && xe?.opaqueBackground ? "park" : b && (j === "PUSHING" || j === "REPLACING") && xe?.opaqueBackground ? Oe() ? "park-over" : "park-under" : "true" : "false", wt = ht(De);
+	_t.key !== X && (vt({
+		key: X,
+		released: X === null
+	}), gt.current = X !== null && ht.current), ht.current = mt;
+	let Z = X !== null && _t.key === X && !_t.released, Q = Z ? !v && xe?.opaqueBackground ? "park" : v && (k === "PUSHING" || k === "REPLACING") && xe?.opaqueBackground ? Oe() ? "park-over" : "park-under" : "true" : "false", Ct = wt(De);
 	d(() => we.driveScreenLifecycle({
 		getElements: () => ({
 			scope: W.current,
 			decorator: $e.current,
-			bars: [G.current, K.current]
+			bars: [K.current, q.current]
 		}),
-		transitionName: C,
-		prevTransitionName: se,
-		status: j,
-		isActive: b,
-		animHoldReleased: !Q
+		transitionName: x,
+		prevTransitionName: le,
+		status: k,
+		isActive: v,
+		animHoldReleased: !Z
 	}), [
 		we,
-		j,
-		b,
-		se,
-		C,
-		Q
+		k,
+		v,
+		le,
+		x,
+		Z
 	]), s(() => {
-		if (!Q || Z === null) return;
-		let e = Z, t = E.navigate.getState().transitionTaskId, n = t === null ? e : `${e}#${t}`;
+		if (!Z || X === null) return;
+		let e = X, t = w.navigate.getState().transitionTaskId, n = t === null ? e : `${e}#${t}`;
 		return Te.current.join(n, () => {
-			if ((J.current.transition.driver === "native" || ve()) && !de()) {
+			if ((J.current.transition.driver === "native" || ve()) && !A()) {
 				for (let e of [
 					W.current,
-					G.current,
 					K.current,
+					q.current,
 					$e.current
 				]) e?.isConnected && e.getAttribute("data-flemo-anim-hold") !== null && e.setAttribute("data-flemo-anim-hold", "false");
-				Qe.current && (Qe.current.style.zIndex = "");
+				U.current && (U.current.style.zIndex = "");
 			}
-			ze(() => Ct((t) => t.key === e && !t.released ? {
+			ze(() => vt((t) => t.key === e && !t.released ? {
 				key: e,
 				released: !0
 			} : t));
 		}, {
 			scope: W.current,
-			decodeWait: xt.current,
-			contentSettle: ke() && (b && j === "PUSHING" || j === "POPPING") ? {
+			decodeWait: gt.current,
+			contentSettle: ke() && (v && k === "PUSHING" || k === "POPPING") ? {
 				firstWaitMs: 120,
 				capMs: 700,
 				graceMs: 60,
-				minNodes: b ? 30 : 1,
+				minNodes: v ? 30 : 1,
 				renderSettleOnly: !0
 			} : void 0
 		});
 	}, [
-		Q,
 		Z,
-		$,
-		b,
-		j,
-		E.navigate
+		X,
+		Q,
+		v,
+		k,
+		w.navigate
 	]);
-	let Tt = $ === "park-under" || $ === "park-over" ? {} : ge({
+	let Tt = Q === "park-under" || Q === "park-over" ? {} : ge({
 		initial: Ae,
-		isActive: b,
-		status: j
+		isActive: v,
+		status: k
 	});
 	return /* @__PURE__ */ Re("div", {
-		ref: Qe,
-		onClickCapture: mt,
+		ref: U,
+		onClickCapture: ut,
 		style: {
-			position: T,
+			position: C,
 			top: 0,
 			left: 0,
 			width: "100%",
 			height: "100%",
 			display: "flex",
-			zIndex: $ === "park-under" ? -1 : void 0,
+			zIndex: Q === "park-under" ? -1 : void 0,
 			contain: "layout style",
 			flexDirection: "column",
 			boxSizing: "border-box",
@@ -648,33 +785,33 @@ function gt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 		children: [
 			/* @__PURE__ */ Re("div", {
 				ref: W,
-				...v,
+				...g,
 				onPointerDown: ot,
 				onPointerMove: st,
 				onPointerUp: ct,
-				onPointerCancel: pt,
+				onPointerCancel: lt,
 				"data-flemo-screen": !0,
-				"data-flemo-router": D ?? void 0,
-				"data-flemo-transition": C,
-				"data-flemo-status": j,
-				"data-flemo-active": b ? "true" : "false",
-				"data-flemo-anim-hold": $,
+				"data-flemo-router": T ?? void 0,
+				"data-flemo-transition": x,
+				"data-flemo-status": k,
+				"data-flemo-active": v ? "true" : "false",
+				"data-flemo-anim-hold": Q,
 				style: {
 					display: "flex",
 					flexDirection: "column",
 					height: "100%",
-					backgroundColor: ae,
-					overflowY: _ ? void 0 : "auto",
+					backgroundColor: se,
+					overflowY: h ? void 0 : "auto",
 					touchAction: je === "x" ? "pan-y" : je === "y" ? "pan-x" : "auto",
-					...wt && ($ !== "false" || S === O && !w) ? { willChange: "transform" } : {},
+					...Ct && (Q !== "false" || b === E && !S) ? { willChange: "transform" } : {},
 					...Tt,
-					...v.style
+					...g.style
 				},
 				children: [
 					!re && t && /* @__PURE__ */ P("div", {
 						style: { minHeight: t },
 						children: /* @__PURE__ */ P("div", { style: {
-							position: T,
+							position: C,
 							top: 0,
 							width: "100%",
 							minHeight: t,
@@ -682,11 +819,11 @@ function gt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 						} })
 					}),
 					c && /* @__PURE__ */ P("div", {
-						ref: et,
+						ref: G,
 						"data-flemo-bar-spacer": "app",
 						style: {
 							width: "100%",
-							minHeight: Xe
+							minHeight: Ze
 						}
 					}),
 					ee,
@@ -695,27 +832,27 @@ function gt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 							display: "flex",
 							flexDirection: "column",
 							flexGrow: 1,
-							overflowY: _ ? "auto" : void 0
+							overflowY: h ? "auto" : void 0
 						},
 						children: e
 					}),
 					ne,
 					u && /* @__PURE__ */ P("div", {
-						ref: tt,
+						ref: et,
 						"data-flemo-bar-spacer": "nav",
 						style: {
 							display: Le ? "none" : void 0,
 							width: "100%",
-							minHeight: Ze
+							minHeight: Qe
 						}
 					}),
-					!g && r && /* @__PURE__ */ P("div", {
+					!oe && r && /* @__PURE__ */ P("div", {
 						style: {
 							display: Le ? "none" : void 0,
 							minHeight: r
 						},
 						children: /* @__PURE__ */ P("div", { style: {
-							position: T,
+							position: C,
 							bottom: 0,
 							width: "100%",
 							minHeight: r,
@@ -729,14 +866,14 @@ function gt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				"data-flemo-bar": "app",
 				"data-flemo-bar-id": l,
 				"data-flemo-bar-id-type": l === void 0 ? void 0 : typeof l,
-				"data-flemo-router": D ?? void 0,
-				"data-flemo-bar-transition": C,
-				"data-flemo-bar-status": j,
-				"data-flemo-bar-active": b ? "true" : "false",
-				"data-flemo-bar-riding": _t ? "true" : "false",
-				"data-flemo-anim-hold": $,
+				"data-flemo-router": T ?? void 0,
+				"data-flemo-bar-transition": x,
+				"data-flemo-bar-status": k,
+				"data-flemo-bar-active": v ? "true" : "false",
+				"data-flemo-bar-riding": ft ? "true" : "false",
+				"data-flemo-anim-hold": Q,
 				style: {
-					position: T,
+					position: C,
 					top: re ? 0 : t,
 					left: 0,
 					width: "100%",
@@ -749,33 +886,33 @@ function gt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				"data-flemo-bar": "nav",
 				"data-flemo-bar-id": f,
 				"data-flemo-bar-id-type": f === void 0 ? void 0 : typeof f,
-				"data-flemo-router": D ?? void 0,
-				"data-flemo-bar-transition": C,
-				"data-flemo-bar-status": j,
-				"data-flemo-bar-active": b ? "true" : "false",
-				"data-flemo-bar-riding": vt ? "true" : "false",
-				"data-flemo-anim-hold": $,
+				"data-flemo-router": T ?? void 0,
+				"data-flemo-bar-transition": x,
+				"data-flemo-bar-status": k,
+				"data-flemo-bar-active": v ? "true" : "false",
+				"data-flemo-bar-riding": pt ? "true" : "false",
+				"data-flemo-anim-hold": Q,
 				style: {
 					display: Le ? "none" : void 0,
-					position: T,
-					bottom: g ? 0 : r,
+					position: C,
+					bottom: oe ? 0 : r,
 					left: 0,
 					width: "100%",
 					zIndex: 1
 				},
 				children: u
 			}),
-			Pe && /* @__PURE__ */ P(dt, {
+			Pe && /* @__PURE__ */ P(xt, {
 				ref: $e,
-				"data-flemo-anim-hold": $
+				"data-flemo-anim-hold": Q
 			})
 		]
 	});
 }
 //#endregion
 //#region src/screen/Screen.tsx
-function _t({ children: e, ...t }) {
-	let { isActive: n, isPrev: r, zIndex: i } = z(), a = U((e) => e.index), o = ut((e) => e.status), c = X((e) => e.dragStatus), l = X((e) => e.replaceTransitionStatus), u = g({
+function Et({ children: e, ...t }) {
+	let { isActive: n, isPrev: r, zIndex: i } = z(), a = H((e) => e.index), o = bt((e) => e.status), c = $((e) => e.dragStatus), l = $((e) => e.replaceTransitionStatus), u = oe({
 		isActive: n,
 		isPrev: r,
 		zIndex: i,
@@ -786,21 +923,21 @@ function _t({ children: e, ...t }) {
 	}), [d, f] = m(u !== "live");
 	return u === "live" && d && f(!1), u === "immediate" && !d && f(!0), s(() => {
 		if (u !== "deferred" || d) return;
-		let e = setTimeout(() => f(!0), vt);
+		let e = setTimeout(() => f(!0), Dt);
 		return () => clearTimeout(e);
-	}, [u, d]), /* @__PURE__ */ P(st, {
+	}, [u, d]), /* @__PURE__ */ P(vt, {
 		freeze: d,
-		children: /* @__PURE__ */ P(gt, {
+		children: /* @__PURE__ */ P(Tt, {
 			...t,
 			children: e
 		})
 	});
 }
-var vt = 600;
+var Dt = 600;
 //#endregion
 //#region src/screen/Part.tsx
-function Z({ ref: e, name: t, style: n, children: r, ...i }) {
-	let { isActive: a, isPrev: s, navigateStore: c, routerId: l } = z(), u = o(Ue), d = l ?? u ?? void 0, f = I(), p = H(c ?? f.navigate, (e) => s ? "COMPLETED" : e.status);
+function Ot({ ref: e, name: t, style: n, children: r, ...i }) {
+	let { isActive: a, isPrev: s, navigateStore: c, routerId: l } = z(), u = o(We), d = l ?? u ?? void 0, f = I(), p = V(c ?? f.navigate, (e) => s ? "COMPLETED" : e.status);
 	return /* @__PURE__ */ P("div", {
 		ref: e,
 		"data-flemo-part-name": t,
@@ -814,15 +951,15 @@ function Z({ ref: e, name: t, style: n, children: r, ...i }) {
 }
 //#endregion
 //#region src/stores/RouterScopeProvider.tsx
-function yt({ children: e }) {
+function kt({ children: e }) {
 	let [t] = m(() => ({
-		history: x(),
-		navigate: oe(),
-		transition: j(),
-		screen: O(),
-		driver: y(),
+		history: y(),
+		navigate: ce(),
+		transition: k(),
+		screen: E(),
+		driver: _(),
 		markSelfInduced: xe,
-		consume: ae,
+		consume: se,
 		life: { alive: !0 }
 	}));
 	return /* @__PURE__ */ P(F.Provider, {
@@ -831,4 +968,4 @@ function yt({ children: e }) {
 	});
 }
 //#endregion
-export { Z as Part, q as Route, nt as Router, yt as RouterScopeProvider, _t as Screen, R as ScreenContext, dt as ScreenDecorator, st as ScreenFreeze, gt as ScreenMotion, Xe as Slot, v as createBrowserHistoryDriver, b as createDecorator, C as createPartTransition, se as createRawDecorator, w as createRawPartTransition, T as createRawTransition, A as createTransition, Te as partTransitionMap, U as useHistoryStore, it as useNavigate, ut as useNavigateStore, Y as useParams, J as usePathname, z as useScreen, X as useScreenStore, at as useStep, I as useStores, ft as useViewportScrollHeight };
+export { Ot as Part, ft as Route, dt as Router, kt as RouterScopeProvider, Et as Screen, R as ScreenContext, xt as ScreenDecorator, vt as ScreenFreeze, Tt as ScreenMotion, rt as Slot, g as createBrowserHistoryDriver, v as createDecorator, x as createPartTransition, le as createRawDecorator, S as createRawPartTransition, C as createRawTransition, O as createTransition, Te as partTransitionMap, H as useHistoryStore, X as useNavigate, bt as useNavigateStore, gt as useParams, mt as usePathname, z as useScreen, $ as useScreenStore, ht as useStep, I as useStores, St as useViewportScrollHeight };

package/dist/navigate/__tests__/useNavigate.routerTarget.test.d.ts

@@ -0,0 +1,22 @@
+declare module '../../Route' {
+    interface RegisterRoute {
+        "/": Record<string, never>;
+        "/members/:id": {
+            id: string;
+        };
+        "/region": Record<string, never>;
+        "/region/people": Record<string, never>;
+        "/inner": Record<string, never>;
+        "/inner/detail": Record<string, never>;
+    }
+}
+declare module "../../RouterTarget" {
+    interface RegisterRouter {
+        app: true;
+        region: true;
+        inner: true;
+        sidebar: true;
+        "next-name": true;
+    }
+}
+export {};

package/dist/navigate/useNavigate.d.ts

@@ -1,18 +1,23 @@
 import { TransitionName } from '@flemo/core';
+import { RouterTarget } from '../RouterTarget';
 import { RegisterRoute } from '../Route';
 interface DistanceOptions {
     skip?: number;
     until?: keyof RegisterRoute;
 }
-type RouteOptions = DistanceOptions & {
+export interface UseNavigateOptions {
+    router?: RouterTarget;
+}
+type RouteOptions = DistanceOptions & UseNavigateOptions & {
     layoutId?: string | number;
     transitionName?: TransitionName;
 };
-export default function useNavigate(): {
+type PopRouteOptions = DistanceOptions & UseNavigateOptions & {
+    transitionName?: TransitionName;
+};
+export default function useNavigate(defaults?: UseNavigateOptions): {
     push: <T extends keyof RegisterRoute>(path: T, params?: RegisterRoute[T], options?: RouteOptions) => Promise<void>;
     replace: <T extends keyof RegisterRoute>(path: T, params?: RegisterRoute[T], options?: RouteOptions) => Promise<void>;
-    pop: (options?: DistanceOptions & {
-        transitionName?: TransitionName;
-    }) => Promise<void>;
+    pop: (options?: PopRouteOptions) => Promise<void>;
 };
 export {};

package/dist/utils/devDiagnostics.d.ts

@@ -0,0 +1,3 @@
+export declare function isDevEnvironment(): boolean;
+export declare function devWarn(message: string): void;
+export declare function devFail(message: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flemo/react",
-  "version": "1.11.1",
+  "version": "1.12.0",
   "description": "React bindings for flemo: Router, Route, Screen, and the screen-transition runtime.",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -54,8 +54,8 @@
     "vite": "^8.2.1",
     "vite-plugin-dts": "^5.0.3",
     "vitest": "^4.1.10",
-    "@flemo/eslint-config": "0.0.0",
-    "@flemo/tsconfig": "0.0.0"
+    "@flemo/tsconfig": "0.0.0",
+    "@flemo/eslint-config": "0.0.0"
   },
   "peerDependencies": {
     "react": "^19.2.8",