@flemo/react 1.6.9 → 1.7.1

package/dist/index.mjs

@@ -1,24 +1,24 @@
 import e, { Activity as t, Children as n, createContext as r, isValidElement as i, useContext as a, useEffect as o, useId as s, useImperativeHandle as c, useInsertionEffect as l, useLayoutEffect as u, useReducer as ee, useRef as d, useState as f } from "react";
-import { animHoldKey as te, appendParamsQuery as p, buildRoutePath as m, computeBarRiding as h, computeScreenFreeze as ne, consumeSelfInducedPop as g, createAnimHoldCoordinator as _, createBrowserHistoryDriver as v, createBrowserHistoryDriver as y, createDecorator as b, createHistoryStore as re, createNavigateStore as x, createNavigationController as S, createPartTransition as C, createRawDecorator as w, createRawPartTransition as T, createRawTransition as E, createRouterScope as D, createScreenSelector as O, createScreenStore as k, createStepController as ie, createSwipeController as A, createTransition as j, createTransitionEngine as ae, createTransitionStore as M, decoratorMap as oe, eagerlyDecodeImages as se, ensureScopeHistorySync as ce, enteringInitialStyle as le, getMatchedPathPattern as N, isOpaqueColor as ue, isServer as de, markSelfInducedPop as fe, matchesPathname as pe, observeBarHeight as me, observeViewportScrollHeight as he, partTransitionMap as ge, readStepParams as P, registerTransitionDefinitions as _e, releaseScopeHistorySync as ve, resolveTransition as ye, seedRouterEntry as be, subscribeStepParamsRestore as F } from "@flemo/core";
-import { jsx as I, jsxs as xe } from "react/jsx-runtime";
+import { animHoldKey as te, appendParamsQuery as p, buildRoutePath as m, computeBarRiding as h, computeScreenFreeze as ne, consumeSelfInducedPop as g, createAnimHoldCoordinator as _, createBrowserHistoryDriver as v, createBrowserHistoryDriver as y, createDecorator as b, createHistoryStore as re, createNavigateStore as x, createNavigationController as S, createPartTransition as C, createRawDecorator as w, createRawPartTransition as T, createRawTransition as E, createRouterScope as D, createScreenSelector as O, createScreenStore as k, createStepController as ie, createSwipeController as A, createTransition as j, createTransitionEngine as ae, createTransitionStore as M, decoratorMap as oe, eagerlyDecodeImages as se, ensureScopeHistorySync as ce, enteringInitialStyle as le, getMatchedPathPattern as N, isOpaqueColor as ue, isServer as de, markSelfInducedPop as fe, matchesPathname as pe, observeBarHeight as me, observeViewportScrollHeight as he, partTransitionMap as ge, readStepParams as P, registerTransitionDefinitions as _e, releaseScopeHistorySync as ve, resolveTransition as ye, seedRouterEntry as be, subscribeStepParamsRestore as xe } from "@flemo/core";
+import { jsx as F, jsxs as Se } from "react/jsx-runtime";
 //#region src/stores/StoreContext.ts
-var L = r(null);
+var I = r(null);
 //#endregion
 //#region src/stores/useStores.ts
-function R() {
-	let e = a(L);
+function L() {
+	let e = a(I);
 	if (!e) throw Error("flemo stores are missing. Render inside a <Router>.");
 	return e;
 }
 //#endregion
 //#region src/history/HistoryListener.tsx
-function z() {
-	let e = R();
+function Ce() {
+	let e = L();
 	return o(() => (ce(e), () => ve(e)), [e]), null;
 }
 //#endregion
 //#region src/screen/ScreenContext.ts
-var B = r({
+var R = r({
 	id: "",
 	isActive: !1,
 	isRoot: !0,
@@ -33,15 +33,15 @@ var B = r({
 });
 //#endregion
 //#region src/screen/useScreen.ts
-function V() {
-	return a(B);
+function z() {
+	return a(R);
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsContext.ts
-var Se = r({}), Ce = r(() => {});
+var we = r({}), Te = r(() => {});
 //#endregion
 //#region src/screen/ParamsProvider/ParamsReducer.ts
-function we(e, t) {
+function Ee(e, t) {
 	switch (t.type) {
 		case "SET": return t.params;
 		default: return e;
@@ -49,10 +49,10 @@ function we(e, t) {
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsProvider.tsx
-function Te({ children: e }) {
-	let { isActive: t, params: n } = V(), { driver: r } = R(), [i, a] = ee(we, n);
+function De({ children: e }) {
+	let { isActive: t, params: n } = z(), { driver: r } = L(), [i, a] = ee(Ee, n);
 	return o(() => {
-		if (t) return F(r, (e) => a({
+		if (t) return xe(r, (e) => a({
 			type: "SET",
 			params: e
 		}));
@@ -60,9 +60,9 @@ function Te({ children: e }) {
 		t,
 		a,
 		r
-	]), /* @__PURE__ */ I(Ce.Provider, {
+	]), /* @__PURE__ */ F(Te.Provider, {
 		value: a,
-		children: /* @__PURE__ */ I(Se.Provider, {
+		children: /* @__PURE__ */ F(we.Provider, {
 			value: i,
 			children: e
 		})
@@ -70,40 +70,41 @@ function Te({ children: e }) {
 }
 //#endregion
 //#region ../../node_modules/.pnpm/zustand@5.0.14_@types+react@19.2.17_react@19.2.7/node_modules/zustand/esm/react.mjs
-var H = (e) => e;
-function U(t, n = H) {
+var B = (e) => e;
+function V(t, n = B) {
 	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 W(e) {
-	return U(R().history, e);
+function H(e) {
+	return V(L().history, e);
 }
 //#endregion
 //#region src/renderer/Renderer.tsx
-function G({ children: e }) {
-	let t = W((e) => e.index);
-	return O(W((e) => e.histories), t).map((t) => {
+function U({ children: e }) {
+	let t = H((e) => e.index), r = H((e) => e.histories), i = L();
+	return O(r, t).map((t) => {
 		let [r] = n.toArray(e).filter((e) => pe(e.props.path, t.pathname));
-		return r ? /* @__PURE__ */ I(B.Provider, {
+		return r ? /* @__PURE__ */ F(R.Provider, {
 			value: {
 				...t,
+				navigateStore: i.navigate,
 				routePath: N(r.props.path, t.pathname)
 			},
-			children: /* @__PURE__ */ I(Te, { children: r })
+			children: /* @__PURE__ */ F(De, { children: r })
 		}, t.id) : null;
 	});
 }
 //#endregion
 //#region src/screen/ScreenViewportContext.ts
-var K = r({ contained: !1 });
-function Ee() {
-	return a(K);
+var W = r({ contained: !1 });
+function Oe() {
+	return a(W);
 }
 //#endregion
 //#region src/transition/styles.ts
-function q(e, t, n = []) {
+function G(e, t, n = []) {
 	l(() => _e(e, t, n), [
 		e,
 		t,
@@ -112,58 +113,58 @@ function q(e, t, n = []) {
 }
 //#endregion
 //#region src/RouterDepthContext.ts
-var De = r(0), J = { contained: !0 };
-function Oe({ children: e, className: t, style: n }) {
-	return /* @__PURE__ */ I("div", {
+var K = r(0), q = { contained: !0 };
+function ke({ children: e, className: t, style: n }) {
+	return /* @__PURE__ */ F("div", {
 		className: t,
 		style: {
 			position: "relative",
 			overflow: "hidden",
 			...n
 		},
-		children: /* @__PURE__ */ I(K.Provider, {
-			value: J,
-			children: /* @__PURE__ */ I(G, { children: e })
+		children: /* @__PURE__ */ F(W.Provider, {
+			value: q,
+			children: /* @__PURE__ */ F(U, { children: e })
 		})
 	});
 }
 //#endregion
 //#region src/Router.tsx
-function ke(e) {
+function Ae(e) {
 	let t = null;
 	return n.forEach(e, (e) => {
 		if (t || !i(e)) return;
-		if (e.type === Oe) {
+		if (e.type === ke) {
 			t = n.toArray(e.props.children).filter(i);
 			return;
 		}
 		let r = e.props.children;
 		if (r) {
-			let e = ke(r);
+			let e = Ae(r);
 			e && (t = e);
 		}
 	}), t;
 }
-var Ae = typeof window > "u" ? o : u, je = [], Me = [], Ne = [], Y = { contained: !0 };
-function Pe({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = je, decorators: c = Me, partTransitions: l = Ne, history: u = "browser", createDriver: ee, className: d, style: te }) {
-	let p = a(De), m = p > 0, h = u === "memory", ne = s(), g = a(B), _ = m && g.id ? `_F_${g.id}_` : ne, v = ke(e), b = v !== null, re = a(L), x = m ? null : re, S = x !== null, C = ee ?? y, [w] = f(() => h ? null : C(S ? void 0 : _)), T = !m && !h && !de(), E = T && w ? w.readPathname() : t || "/", O = E.indexOf("?"), k = (O >= 0 ? E.slice(0, O) : E) || "/", ie = T ? window.location.search : O >= 0 ? E.slice(O) : "", [A] = f(() => D({
-		routePaths: (v ?? n.toArray(e)).map((e) => e.props.path).flat(),
+var je = typeof window > "u" ? o : u, Me = [], Ne = [], Pe = [], J = { contained: !0 };
+function Y({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = Me, decorators: c = Ne, partTransitions: l = Pe, history: u = "browser", createDriver: ee, className: d, style: te }) {
+	let p = a(K), m = p > 0, h = u === "memory", ne = s(), g = a(R), _ = a(I), v = m && g.id ? `_F_${_?.routerKey ?? ""}${g.id}_` : ne, b = Ae(e), re = b !== null, x = m ? null : _, S = x !== null, C = ee ?? y, [w] = f(() => h ? null : C(S ? void 0 : v)), T = !m && !h && !de(), E = T && w ? w.readPathname() : t || "/", O = E.indexOf("?"), k = (O >= 0 ? E.slice(0, O) : E) || "/", ie = T ? window.location.search : O >= 0 ? E.slice(O) : "", [A] = f(() => D({
+		routePaths: (b ?? n.toArray(e)).map((e) => e.props.path).flat(),
 		pathname: k,
 		search: ie,
 		defaultTransitionName: r,
 		memory: h,
 		browserDriver: w,
 		hostedScope: x,
-		routerKey: S ? void 0 : _,
+		routerKey: S ? void 0 : v,
 		zoneEntryId: m && !S && g.id || void 0,
-		persistKey: m && !h && !S ? _ : void 0
+		persistKey: m && !h && !S ? v : void 0
 	}));
-	A.transition.setState({ defaultTransitionName: r }), Ae(() => (A.life.alive = !0, () => {
+	A.transition.setState({ defaultTransitionName: r }), je(() => (A.life.alive = !0, () => {
 		A.life.alive = !1;
-	}), [A]), q(i, c, l), o(() => {
+	}), [A]), G(i, c, l), o(() => {
 		h || !w || be({
 			driver: w,
-			routerKey: S ? null : _,
+			routerKey: S ? null : v,
 			nested: m && !S,
 			seedPathname: k,
 			defaultTransitionName: r,
@@ -173,23 +174,23 @@ function Pe({ children: e, initPath: t = "/", defaultTransitionName: r = "cupert
 		h,
 		S,
 		m,
-		_,
+		v,
 		k,
 		r,
 		A.history,
 		w
 	]);
-	let j = b ? e : /* @__PURE__ */ I(G, { children: e }), ae = /* @__PURE__ */ I(De.Provider, {
+	let j = re ? e : /* @__PURE__ */ F(U, { children: e }), ae = /* @__PURE__ */ F(K.Provider, {
 		value: p + 1,
-		children: /* @__PURE__ */ xe(L.Provider, {
+		children: /* @__PURE__ */ Se(I.Provider, {
 			value: A,
-			children: [!h && /* @__PURE__ */ I(z, {}), m ? /* @__PURE__ */ I(K.Provider, {
-				value: Y,
+			children: [!h && /* @__PURE__ */ F(Ce, {}), m ? /* @__PURE__ */ F(W.Provider, {
+				value: J,
 				children: j
 			}) : j]
 		})
 	});
-	return m ? /* @__PURE__ */ I("div", {
+	return m ? /* @__PURE__ */ F("div", {
 		className: d,
 		style: {
 			position: "relative",
@@ -211,8 +212,8 @@ function Ie(e, t) {
 }
 //#endregion
 //#region src/navigate/useNavigate.ts
-function Le() {
-	let e = R(), t = S({
+function X() {
+	let e = L(), t = S({
 		stores: e,
 		buildPathname: (e, t) => Ie(e, t),
 		driver: e.driver,
@@ -226,13 +227,13 @@ function Le() {
 }
 //#endregion
 //#region src/navigate/usePathname.ts
-function Re() {
-	return W((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
+function Le() {
+	return H((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
 }
 //#endregion
 //#region src/navigate/useStep.ts
-function X() {
-	let { routePath: e } = V(), t = R(), n = a(Ce), { driver: r, markSelfInduced: i } = t, [s, c] = f(null);
+function Z() {
+	let { routePath: e } = z(), t = L(), n = a(Te), { driver: r, markSelfInduced: i } = t, [s, c] = f(null);
 	o(() => {
 		if (!e) return c(P(r.readState())), r.subscribe((e) => c(P(e.state)));
 	}, [e, r]);
@@ -257,36 +258,36 @@ function X() {
 }
 //#endregion
 //#region src/screen/ParamsProvider/useParams.ts
-function Z() {
-	return a(Se);
+function Q() {
+	return a(we);
 }
 //#endregion
 //#region src/screen/ScreenFreeze.tsx
-function ze({ freeze: e, children: n }) {
-	return /* @__PURE__ */ I(t, {
+function Re({ freeze: e, children: n }) {
+	return /* @__PURE__ */ F(t, {
 		mode: e ? "hidden" : "visible",
 		children: n
 	});
 }
 //#endregion
 //#region src/screen/scopeAnimHoldCoordinator.ts
-var Be = /* @__PURE__ */ new WeakMap();
-function Ve(e) {
-	let t = Be.get(e);
-	return t || (t = _(), Be.set(e, t)), t;
+var ze = /* @__PURE__ */ new WeakMap();
+function Be(e) {
+	let t = ze.get(e);
+	return t || (t = _(), ze.set(e, t)), t;
 }
 //#endregion
 //#region src/stores/useNavigateStore.ts
-function Q(e) {
-	return U(R().navigate, e);
+function Ve(e) {
+	return V(L().navigate, e);
 }
 //#endregion
 //#region src/screen/ScreenDecorator.tsx
 function He({ ref: e, style: t, ...n }) {
-	let { isActive: r, transitionName: i } = V(), a = d(null);
+	let { isActive: r, transitionName: i } = z(), a = d(null);
 	c(e, () => a.current);
-	let o = Q((e) => e.status), { decoratorName: s } = ye(i), l = oe.get(s);
-	return l ? /* @__PURE__ */ I("div", {
+	let o = Ve((e) => e.status), { decoratorName: s } = ye(i), l = oe.get(s);
+	return l ? /* @__PURE__ */ F("div", {
 		ref: a,
 		"data-flemo-decorator": !0,
 		"data-flemo-decorator-name": l.name,
@@ -319,94 +320,94 @@ function Ue() {
 //#endregion
 //#region src/stores/useScreenStore.ts
 function $(e) {
-	return U(R().screen, e);
+	return V(L().screen, e);
 }
 //#endregion
 //#region src/screen/ScreenMotion.tsx
 function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: i, sharedTopBar: a, sharedBottomBar: s, topBar: c, bottomBar: l, hideStatusBar: ee, hideSystemNavigationBar: p, backgroundColor: m = "white", contentScrollable: g = !0, ..._ }) {
-	let { id: v, isActive: y, isRoot: b, isPrev: re, zIndex: x, transitionName: S, prevTransitionName: C } = V(), { contained: w } = Ee(), T = w ? "absolute" : "fixed", E = R(), D = Q((e) => e.status), O = $((e) => e.dragStatus), k = $((e) => e.replaceTransitionStatus), ie = E.screen.getState().setDragStatus, j = E.screen.getState().setReplaceTransitionStatus, M = W((e) => e.index), ce = W((e) => e.histories), N = y ? ce[M - 1]?.id : ce[M]?.id, de = $((e) => N ? e.sharedBars[N] : void 0), fe = $((e) => N ? e.screenSurfaces[N] : void 0), pe = d(null);
+	let { id: v, isActive: y, isRoot: b, isPrev: re, zIndex: x, transitionName: S, prevTransitionName: C } = z(), { contained: w } = Oe(), T = w ? "absolute" : "fixed", E = L(), D = Ve((e) => e.status), O = $((e) => e.dragStatus), k = $((e) => e.replaceTransitionStatus), ie = E.screen.getState().setDragStatus, j = E.screen.getState().setReplaceTransitionStatus, M = H((e) => e.index), ce = H((e) => e.histories), N = y ? ce[M - 1]?.id : ce[M]?.id, de = $((e) => N ? e.sharedBars[N] : void 0), fe = $((e) => N ? e.screenSurfaces[N] : void 0), pe = d(null);
 	pe.current ||= ae({
 		getTransitionTaskId: () => E.navigate.getState().transitionTaskId,
 		setDragStatus: ie,
 		setReplaceTransitionStatus: j
 	});
 	let he = pe.current, ge = d(null);
-	ge.current ||= Ve(E.navigate);
-	let P = ye(S), { initial: _e, swipeDirection: ve, decoratorName: be } = P, F = oe.get(be), { viewportScrollHeight: L } = Ue(), z = L > 0, [B, Se] = f(0), [Ce, we] = f(0), Te = d(null), H = d(null), U = d(null), G = d(null), K = d(null), q = d({
+	ge.current ||= Be(E.navigate);
+	let P = ye(S), { initial: _e, swipeDirection: ve, decoratorName: be } = P, xe = oe.get(be), { viewportScrollHeight: I } = Ue(), Ce = I > 0, [R, we] = f(0), [Te, Ee] = f(0), De = d(null), B = d(null), V = d(null), U = d(null), W = d(null), G = d({
 		transition: P,
-		decorator: F,
+		decorator: xe,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!s,
-		viewportScrollHeight: L,
+		viewportScrollHeight: I,
 		isRoot: b,
 		isActive: y,
 		status: D,
 		dragStatus: O,
 		index: M
 	});
-	q.current = {
+	G.current = {
 		transition: P,
-		decorator: F,
+		decorator: xe,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!s,
-		viewportScrollHeight: L,
+		viewportScrollHeight: I,
 		isRoot: b,
 		isActive: y,
 		status: D,
 		dragStatus: O,
 		index: M
 	};
-	let De = d(null);
-	De.current ||= A({
-		getTransition: () => q.current.transition,
-		getDecorator: () => q.current.decorator,
+	let K = d(null);
+	K.current ||= A({
+		getTransition: () => G.current.transition,
+		getDecorator: () => G.current.decorator,
 		getElements: () => ({
-			scope: H.current,
-			screenContainer: Te.current,
-			decorator: U.current,
-			sharedTopBar: G.current,
-			sharedBottomBar: K.current
+			scope: B.current,
+			screenContainer: De.current,
+			decorator: V.current,
+			sharedTopBar: U.current,
+			sharedBottomBar: W.current
 		}),
-		hasSharedTopBar: () => q.current.hasSharedTopBar,
-		hasSharedBottomBar: () => q.current.hasSharedBottomBar,
-		getViewportScrollHeight: () => q.current.viewportScrollHeight,
+		hasSharedTopBar: () => G.current.hasSharedTopBar,
+		hasSharedBottomBar: () => G.current.hasSharedBottomBar,
+		getViewportScrollHeight: () => G.current.viewportScrollHeight,
 		isReadyForDrag: () => {
-			let e = q.current;
+			let e = G.current;
 			return !e.isRoot && e.isActive && e.status === "COMPLETED" && e.dragStatus === "IDLE" && !!e.transition.swipeDirection && e.viewportScrollHeight < 10;
 		},
 		getPartnerBars: () => {
-			let e = q.current, t = E.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
+			let e = G.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;
 		},
 		setDragStatus: ie,
 		back: () => window.history.back()
 	});
-	let J = De.current, Oe = (e) => J.pointerDown(e.nativeEvent), ke = (e) => J.pointerMove(e.nativeEvent), Ae = (e) => J.pointerUp(e.nativeEvent);
+	let q = K.current, ke = (e) => q.pointerDown(e.nativeEvent), Ae = (e) => q.pointerMove(e.nativeEvent), je = (e) => q.pointerUp(e.nativeEvent);
 	o(() => {
-		se(H.current);
+		se(B.current);
 	}, []), o(() => {
-		let e = H.current;
+		let e = B.current;
 		if (!e) return;
 		let t = (e) => {
-			J.shouldPreventTouch() && e.preventDefault(), e.target?.dataset.swipeAtEdgeBar === "true" && e.preventDefault();
+			q.shouldPreventTouch() && e.preventDefault(), e.target?.dataset.swipeAtEdgeBar === "true" && e.preventDefault();
 		};
 		return e.addEventListener("touchmove", t, { passive: !1 }), () => {
 			e.removeEventListener("touchmove", t);
 		};
-	}, [J]), u(() => {
-		let e = G.current;
+	}, [q]), u(() => {
+		let e = U.current;
 		if (!e) {
-			Se(0);
+			we(0);
 			return;
 		}
-		return me(e, Se);
+		return me(e, we);
 	}, [a]), u(() => {
-		let e = K.current;
+		let e = W.current;
 		if (!e) {
-			we(0);
+			Ee(0);
 			return;
 		}
-		return me(e, we);
+		return me(e, Ee);
 	}, [s]), u(() => {
 		let { registerSharedBars: e, unregisterSharedBars: t } = E.screen.getState();
 		return e(v, {
@@ -419,7 +420,7 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 		s,
 		E.screen
 	]), u(() => {
-		let e = H.current;
+		let e = B.current;
 		if (!e) return;
 		let { registerScreenSurface: t, unregisterScreenSurface: n } = E.screen.getState();
 		return t(v, { opaqueBackground: ue(getComputedStyle(e).backgroundColor) }), () => n(v);
@@ -429,17 +430,17 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 		D,
 		E.screen
 	]);
-	let je = y || x === M - 1, { app: Me, nav: Ne } = h({
+	let Me = y || x === M - 1, { app: Ne, nav: Pe } = h({
 		status: D,
-		isTopOrTopPrev: je,
+		isTopOrTopPrev: Me,
 		hasTopBar: !!a,
 		hasNavBar: !!s,
 		partnerBars: de
-	}), Y = te({
+	}), J = te({
 		status: D,
-		isTopOrTopPrev: je,
+		isTopOrTopPrev: Me,
 		transitionName: S
-	}), Pe = ne({
+	}), Y = ne({
 		isActive: y,
 		isPrev: re,
 		zIndex: x,
@@ -447,56 +448,56 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 		status: D,
 		dragStatus: O,
 		replaceTransitionStatus: k
-	}), Fe = d(Pe), Ie = d(Y !== null && Pe), [Le, Re] = f({
-		key: Y,
-		released: Y === null
+	}), Fe = d(Y), Ie = d(J !== null && Y), [X, Le] = f({
+		key: J,
+		released: J === null
 	});
-	Le.key !== Y && (Re({
-		key: Y,
-		released: Y === null
-	}), Ie.current = Y !== null && Fe.current), Fe.current = Pe;
-	let X = Y !== null && Le.key === Y && !Le.released, Z = X ? !y && fe?.opaqueBackground ? "park" : y && (D === "PUSHING" || D === "REPLACING") && fe?.opaqueBackground ? "park-under" : "true" : "false";
+	X.key !== J && (Le({
+		key: J,
+		released: J === null
+	}), Ie.current = J !== null && Fe.current), Fe.current = Y;
+	let Z = J !== null && X.key === J && !X.released, Q = Z ? !y && fe?.opaqueBackground ? "park" : y && (D === "PUSHING" || D === "REPLACING") && fe?.opaqueBackground ? "park-under" : "true" : "false";
 	u(() => he.driveScreenLifecycle({
 		getElements: () => ({
-			scope: H.current,
-			decorator: U.current,
-			bars: [G.current, K.current]
+			scope: B.current,
+			decorator: V.current,
+			bars: [U.current, W.current]
 		}),
 		transitionName: S,
 		prevTransitionName: C,
 		status: D,
 		isActive: y,
-		animHoldReleased: !X
+		animHoldReleased: !Z
 	}), [
 		he,
 		D,
 		y,
 		C,
 		S,
-		X
+		Z
 	]), o(() => {
-		if (!X || Y === null) return;
-		let e = Y, t = E.navigate.getState().transitionTaskId, n = t === null ? e : `${e}#${t}`;
-		return ge.current.join(n, () => Re((t) => t.key === e && !t.released ? {
+		if (!Z || J === null) return;
+		let e = J, t = E.navigate.getState().transitionTaskId, n = t === null ? e : `${e}#${t}`;
+		return ge.current.join(n, () => Le((t) => t.key === e && !t.released ? {
 			key: e,
 			released: !0
 		} : t), {
-			scope: H.current,
+			scope: B.current,
 			decodeWait: Ie.current
 		});
 	}, [
-		X,
-		Y,
 		Z,
+		J,
+		Q,
 		E.navigate
 	]);
-	let ze = Z === "park-under" ? {} : le({
+	let Re = Q === "park-under" ? {} : le({
 		initial: _e,
 		isActive: y,
 		status: D
 	});
-	return /* @__PURE__ */ xe("div", {
-		ref: Te,
+	return /* @__PURE__ */ Se("div", {
+		ref: De,
 		style: {
 			position: T,
 			top: 0,
@@ -504,14 +505,14 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 			width: "100%",
 			height: "100%",
 			display: "flex",
-			zIndex: Z === "park-under" ? -1 : void 0,
+			zIndex: Q === "park-under" ? -1 : void 0,
 			contain: "layout style",
 			flexDirection: "column",
 			boxSizing: "border-box",
 			overscrollBehavior: "contain"
 		},
 		children: [
-			/* @__PURE__ */ I("div", {
+			/* @__PURE__ */ F("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
 					position: T,
@@ -522,18 +523,18 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					zIndex: 1
 				}
 			}),
-			/* @__PURE__ */ xe("div", {
-				ref: H,
+			/* @__PURE__ */ Se("div", {
+				ref: B,
 				..._,
-				onPointerDown: Oe,
-				onPointerMove: ke,
-				onPointerUp: Ae,
-				onPointerCancel: Ae,
+				onPointerDown: ke,
+				onPointerMove: Ae,
+				onPointerUp: je,
+				onPointerCancel: je,
 				"data-flemo-screen": !0,
 				"data-flemo-transition": S,
 				"data-flemo-status": D,
 				"data-flemo-active": y ? "true" : "false",
-				"data-flemo-anim-hold": Z,
+				"data-flemo-anim-hold": Q,
 				style: {
 					display: "flex",
 					flexDirection: "column",
@@ -541,13 +542,13 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					backgroundColor: m,
 					overflowY: g ? void 0 : "auto",
 					touchAction: ve === "x" ? "pan-y" : ve === "y" ? "pan-x" : "auto",
-					...ze,
+					...Re,
 					..._.style
 				},
 				children: [
-					!ee && t && /* @__PURE__ */ I("div", {
+					!ee && t && /* @__PURE__ */ F("div", {
 						style: { minHeight: t },
-						children: /* @__PURE__ */ I("div", { style: {
+						children: /* @__PURE__ */ F("div", { style: {
 							position: T,
 							top: 0,
 							width: "100%",
@@ -555,12 +556,12 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 							backgroundColor: n
 						} })
 					}),
-					a && /* @__PURE__ */ I("div", { style: {
+					a && /* @__PURE__ */ F("div", { style: {
 						width: "100%",
-						minHeight: B
+						minHeight: R
 					} }),
 					c,
-					/* @__PURE__ */ I("div", {
+					/* @__PURE__ */ F("div", {
 						style: {
 							display: "flex",
 							flexDirection: "column",
@@ -570,17 +571,17 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 						children: e
 					}),
 					l,
-					s && /* @__PURE__ */ I("div", { style: {
-						display: z ? "none" : void 0,
+					s && /* @__PURE__ */ F("div", { style: {
+						display: Ce ? "none" : void 0,
 						width: "100%",
-						minHeight: Ce
+						minHeight: Te
 					} }),
-					!p && r && /* @__PURE__ */ I("div", {
+					!p && r && /* @__PURE__ */ F("div", {
 						style: {
-							display: z ? "none" : void 0,
+							display: Ce ? "none" : void 0,
 							minHeight: r
 						},
-						children: /* @__PURE__ */ I("div", { style: {
+						children: /* @__PURE__ */ F("div", { style: {
 							position: T,
 							bottom: 0,
 							width: "100%",
@@ -590,14 +591,14 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					})
 				]
 			}),
-			a && /* @__PURE__ */ I("div", {
-				ref: G,
+			a && /* @__PURE__ */ F("div", {
+				ref: U,
 				"data-flemo-bar": "app",
 				"data-flemo-bar-transition": S,
 				"data-flemo-bar-status": D,
 				"data-flemo-bar-active": y ? "true" : "false",
-				"data-flemo-bar-riding": Me ? "true" : "false",
-				"data-flemo-anim-hold": Z,
+				"data-flemo-bar-riding": Ne ? "true" : "false",
+				"data-flemo-anim-hold": Q,
 				style: {
 					position: T,
 					top: ee ? 0 : t,
@@ -607,16 +608,16 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				},
 				children: a
 			}),
-			s && /* @__PURE__ */ I("div", {
-				ref: K,
+			s && /* @__PURE__ */ F("div", {
+				ref: W,
 				"data-flemo-bar": "nav",
 				"data-flemo-bar-transition": S,
 				"data-flemo-bar-status": D,
 				"data-flemo-bar-active": y ? "true" : "false",
-				"data-flemo-bar-riding": Ne ? "true" : "false",
-				"data-flemo-anim-hold": Z,
+				"data-flemo-bar-riding": Pe ? "true" : "false",
+				"data-flemo-anim-hold": Q,
 				style: {
-					display: z ? "none" : void 0,
+					display: Ce ? "none" : void 0,
 					position: T,
 					bottom: p ? 0 : r,
 					left: 0,
@@ -625,11 +626,11 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				},
 				children: s
 			}),
-			F && /* @__PURE__ */ I(He, {
-				ref: U,
-				"data-flemo-anim-hold": Z
+			xe && /* @__PURE__ */ F(He, {
+				ref: V,
+				"data-flemo-anim-hold": Q
 			}),
-			/* @__PURE__ */ I("div", {
+			/* @__PURE__ */ F("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
 					position: T,
@@ -646,18 +647,18 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 //#endregion
 //#region src/screen/Screen.tsx
 function Ge({ children: e, ...t }) {
-	let { isActive: n, isPrev: r, zIndex: i } = V();
-	return /* @__PURE__ */ I(ze, {
+	let { isActive: n, isPrev: r, zIndex: i } = z();
+	return /* @__PURE__ */ F(Re, {
 		freeze: ne({
 			isActive: n,
 			isPrev: r,
 			zIndex: i,
-			index: W((e) => e.index),
-			status: Q((e) => e.status),
+			index: H((e) => e.index),
+			status: Ve((e) => e.status),
 			dragStatus: $((e) => e.dragStatus),
 			replaceTransitionStatus: $((e) => e.replaceTransitionStatus)
 		}),
-		children: /* @__PURE__ */ I(We, {
+		children: /* @__PURE__ */ F(We, {
 			...t,
 			children: e
 		})
@@ -666,11 +667,11 @@ function Ge({ children: e, ...t }) {
 //#endregion
 //#region src/screen/Part.tsx
 function Ke({ ref: e, name: t, style: n, children: r, ...i }) {
-	let { isActive: a } = V();
-	return /* @__PURE__ */ I("div", {
+	let { isActive: a, navigateStore: o } = z(), s = L();
+	return /* @__PURE__ */ F("div", {
 		ref: e,
 		"data-flemo-part-name": t,
-		"data-flemo-status": Q((e) => e.status),
+		"data-flemo-status": V(o ?? s.navigate, (e) => e.status),
 		"data-flemo-active": a ? "true" : "false",
 		style: n,
 		...i,
@@ -690,10 +691,10 @@ function qe({ children: e }) {
 		consume: g,
 		life: { alive: !0 }
 	}));
-	return /* @__PURE__ */ I(L.Provider, {
+	return /* @__PURE__ */ F(I.Provider, {
 		value: t,
 		children: e
 	});
 }
 //#endregion
-export { Ke as Part, Fe as Route, Pe as Router, qe as RouterScopeProvider, Ge as Screen, B as ScreenContext, He as ScreenDecorator, ze as ScreenFreeze, We as ScreenMotion, Oe as Slot, v as createBrowserHistoryDriver, b as createDecorator, C as createPartTransition, w as createRawDecorator, T as createRawPartTransition, E as createRawTransition, j as createTransition, ge as partTransitionMap, W as useHistoryStore, Le as useNavigate, Q as useNavigateStore, Z as useParams, Re as usePathname, V as useScreen, $ as useScreenStore, X as useStep, R as useStores, Ue as useViewportScrollHeight };
+export { Ke as Part, Fe as Route, Y as Router, qe as RouterScopeProvider, Ge as Screen, R as ScreenContext, He as ScreenDecorator, Re as ScreenFreeze, We as ScreenMotion, ke as Slot, v as createBrowserHistoryDriver, b as createDecorator, C as createPartTransition, w as createRawDecorator, T as createRawPartTransition, E as createRawTransition, j as createTransition, ge as partTransitionMap, H as useHistoryStore, X as useNavigate, Ve as useNavigateStore, Q as useParams, Le as usePathname, z as useScreen, $ as useScreenStore, Z as useStep, L as useStores, Ue as useViewportScrollHeight };

package/dist/screen/ScreenContext.d.ts

@@ -1,4 +1,4 @@
-import { History, TransitionName } from '@flemo/core';
+import { FlemoStores, History, TransitionName } from '@flemo/core';
 import { Path } from 'path-to-regexp';
 export interface ScreenContextProps extends History {
     id: string;
@@ -8,6 +8,7 @@ export interface ScreenContextProps extends History {
     zIndex: number;
     prevTransitionName: TransitionName;
     routePath: Path;
+    navigateStore?: FlemoStores["navigate"];
 }
 declare const ScreenContext: import('react').Context<ScreenContextProps>;
 export default ScreenContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flemo/react",
-  "version": "1.6.9",
+  "version": "1.7.1",
   "description": "React bindings for flemo: Router, Route, Screen, and the screen-transition runtime.",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -36,7 +36,7 @@
   "dependencies": {
     "path-to-regexp": "^8.4.2",
     "zustand": "^5.0.14",
-    "@flemo/core": "1.18.1"
+    "@flemo/core": "1.19.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",