@flemo/react 1.6.8 → 1.7.0

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 e, { Activity as t, Children as n, createContext as r, isValidElement as i, startTransition as a, useContext as o, useEffect as s, useId as c, useImperativeHandle as l, useInsertionEffect as ee, useLayoutEffect as u, useReducer as te, useRef as d, useState as f } from "react";
+import { animHoldKey as ne, appendParamsQuery as p, buildRoutePath as m, computeBarRiding as re, computeScreenFreeze as h, consumeSelfInducedPop as g, createAnimHoldCoordinator as _, createBrowserHistoryDriver as v, createBrowserHistoryDriver as y, createDecorator as b, createHistoryStore as ie, 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 ae, createStepController as k, createSwipeController as oe, createTransition as se, createTransitionEngine as ce, createTransitionStore as A, decoratorMap as le, eagerlyDecodeImages as ue, ensureScopeHistorySync as de, enteringInitialStyle as fe, getMatchedPathPattern as j, isOpaqueColor as pe, isServer as me, markSelfInducedPop as he, matchesPathname as ge, observeBarHeight as _e, observeViewportScrollHeight as ve, partTransitionMap as ye, readStepParams as M, registerTransitionDefinitions as be, releaseScopeHistorySync as xe, resolveTransition as Se, seedRouterEntry as Ce, shouldMountShellFirst as we, subscribeStepParamsRestore as N } from "@flemo/core";
+import { jsx as P, jsxs as Te } from "react/jsx-runtime";
 //#region src/stores/StoreContext.ts
-var L = r(null);
+var F = r(null);
 //#endregion
 //#region src/stores/useStores.ts
-function R() {
-	let e = a(L);
+function I() {
+	let e = o(F);
 	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();
-	return o(() => (ce(e), () => ve(e)), [e]), null;
+function L() {
+	let e = I();
+	return s(() => (de(e), () => xe(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 o(R);
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsContext.ts
-var Se = r({}), Ce = r(() => {});
+var B = r({}), Ee = r(() => {});
 //#endregion
 //#region src/screen/ParamsProvider/ParamsReducer.ts
-function we(e, t) {
+function De(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);
-	return o(() => {
-		if (t) return F(r, (e) => a({
+function Oe({ children: e }) {
+	let { isActive: t, params: n } = z(), { driver: r } = I(), [i, a] = te(De, n);
+	return s(() => {
+		if (t) return N(r, (e) => a({
 			type: "SET",
 			params: e
 		}));
@@ -60,9 +60,9 @@ function Te({ children: e }) {
 		t,
 		a,
 		r
-	]), /* @__PURE__ */ I(Ce.Provider, {
+	]), /* @__PURE__ */ P(Ee.Provider, {
 		value: a,
-		children: /* @__PURE__ */ I(Se.Provider, {
+		children: /* @__PURE__ */ P(B.Provider, {
 			value: i,
 			children: e
 		})
@@ -70,41 +70,42 @@ 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 V = (e) => e;
+function H(t, n = V) {
 	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 U(e) {
+	return H(I().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) => {
-		let [r] = n.toArray(e).filter((e) => pe(e.props.path, t.pathname));
-		return r ? /* @__PURE__ */ I(B.Provider, {
+function W({ children: e }) {
+	let t = U((e) => e.index), r = U((e) => e.histories), i = I();
+	return O(r, t).map((t) => {
+		let [r] = n.toArray(e).filter((e) => ge(e.props.path, t.pathname));
+		return r ? /* @__PURE__ */ P(R.Provider, {
 			value: {
 				...t,
-				routePath: N(r.props.path, t.pathname)
+				navigateStore: i.navigate,
+				routePath: j(r.props.path, t.pathname)
 			},
-			children: /* @__PURE__ */ I(Te, { children: r })
+			children: /* @__PURE__ */ P(Oe, { children: r })
 		}, t.id) : null;
 	});
 }
 //#endregion
 //#region src/screen/ScreenViewportContext.ts
-var K = r({ contained: !1 });
-function Ee() {
-	return a(K);
+var G = r({ contained: !1 });
+function ke() {
+	return o(G);
 }
 //#endregion
 //#region src/transition/styles.ts
-function q(e, t, n = []) {
-	l(() => _e(e, t, n), [
+function K(e, t, n = []) {
+	ee(() => be(e, t, n), [
 		e,
 		t,
 		n
@@ -112,109 +113,109 @@ 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 Ae = r(0), q = { contained: !0 };
+function je({ children: e, className: t, style: n }) {
+	return /* @__PURE__ */ P("div", {
 		className: t,
 		style: {
 			position: "relative",
 			overflow: "hidden",
 			...n
 		},
-		children: /* @__PURE__ */ I(K.Provider, {
-			value: J,
-			children: /* @__PURE__ */ I(G, { children: e })
+		children: /* @__PURE__ */ P(G.Provider, {
+			value: q,
+			children: /* @__PURE__ */ P(W, { children: e })
 		})
 	});
 }
 //#endregion
 //#region src/Router.tsx
-function ke(e) {
+function Me(e) {
 	let t = null;
 	return n.forEach(e, (e) => {
 		if (t || !i(e)) return;
-		if (e.type === Oe) {
+		if (e.type === je) {
 			t = n.toArray(e.props.children).filter(i);
 			return;
 		}
 		let r = e.props.children;
 		if (r) {
-			let e = ke(r);
+			let e = Me(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({
+var Ne = typeof window > "u" ? s : u, Pe = [], Fe = [], Ie = [], J = { contained: !0 };
+function Le({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = Pe, decorators: a = Fe, partTransitions: l = Ie, history: ee = "browser", createDriver: u, className: te, style: d }) {
+	let ne = o(Ae), p = ne > 0, m = ee === "memory", re = c(), h = o(R), g = o(F), _ = p && h.id ? `_F_${g?.routerKey ?? ""}${h.id}_` : re, v = Me(e), b = v !== null, ie = p ? null : g, x = ie !== null, S = u ?? y, [C] = f(() => m ? null : S(x ? void 0 : _)), w = !p && !m && !me(), T = w && C ? C.readPathname() : t || "/", E = T.indexOf("?"), O = (E >= 0 ? T.slice(0, E) : T) || "/", ae = w ? window.location.search : E >= 0 ? T.slice(E) : "", [k] = f(() => D({
 		routePaths: (v ?? n.toArray(e)).map((e) => e.props.path).flat(),
-		pathname: k,
-		search: ie,
+		pathname: O,
+		search: ae,
 		defaultTransitionName: r,
-		memory: h,
-		browserDriver: w,
-		hostedScope: x,
-		routerKey: S ? void 0 : _,
-		zoneEntryId: m && !S && g.id || void 0,
-		persistKey: m && !h && !S ? _ : void 0
+		memory: m,
+		browserDriver: C,
+		hostedScope: ie,
+		routerKey: x ? void 0 : _,
+		zoneEntryId: p && !x && h.id || void 0,
+		persistKey: p && !m && !x ? _ : void 0
 	}));
-	A.transition.setState({ defaultTransitionName: r }), Ae(() => (A.life.alive = !0, () => {
-		A.life.alive = !1;
-	}), [A]), q(i, c, l), o(() => {
-		h || !w || be({
-			driver: w,
-			routerKey: S ? null : _,
-			nested: m && !S,
-			seedPathname: k,
+	k.transition.setState({ defaultTransitionName: r }), Ne(() => (k.life.alive = !0, () => {
+		k.life.alive = !1;
+	}), [k]), K(i, a, l), s(() => {
+		m || !C || Ce({
+			driver: C,
+			routerKey: x ? null : _,
+			nested: p && !x,
+			seedPathname: O,
 			defaultTransitionName: r,
-			rootParams: A.history.getState().histories[0]?.params ?? {}
+			rootParams: k.history.getState().histories[0]?.params ?? {}
 		});
 	}, [
-		h,
-		S,
 		m,
+		x,
+		p,
 		_,
-		k,
+		O,
 		r,
-		A.history,
-		w
+		k.history,
+		C
 	]);
-	let j = b ? e : /* @__PURE__ */ I(G, { children: e }), ae = /* @__PURE__ */ I(De.Provider, {
-		value: p + 1,
-		children: /* @__PURE__ */ xe(L.Provider, {
-			value: A,
-			children: [!h && /* @__PURE__ */ I(z, {}), m ? /* @__PURE__ */ I(K.Provider, {
-				value: Y,
-				children: j
-			}) : j]
+	let oe = b ? e : /* @__PURE__ */ P(W, { children: e }), se = /* @__PURE__ */ P(Ae.Provider, {
+		value: ne + 1,
+		children: /* @__PURE__ */ Te(F.Provider, {
+			value: k,
+			children: [!m && /* @__PURE__ */ P(L, {}), p ? /* @__PURE__ */ P(G.Provider, {
+				value: J,
+				children: oe
+			}) : oe]
 		})
 	});
-	return m ? /* @__PURE__ */ I("div", {
-		className: d,
+	return p ? /* @__PURE__ */ P("div", {
+		className: te,
 		style: {
 			position: "relative",
 			overflow: "hidden",
-			...te
+			...d
 		},
-		children: ae
-	}) : ae;
+		children: se
+	}) : se;
 }
 //#endregion
 //#region src/Route.tsx
-function Fe({ element: e }) {
+function Re({ element: e }) {
 	return e;
 }
 //#endregion
 //#region src/utils/buildRoutePath.ts
-function Ie(e, t) {
+function ze(e, t) {
 	return m(e, t);
 }
 //#endregion
 //#region src/navigate/useNavigate.ts
-function Le() {
-	let e = R(), t = S({
+function Be() {
+	let e = I(), t = S({
 		stores: e,
-		buildPathname: (e, t) => Ie(e, t),
+		buildPathname: (e, t) => ze(e, t),
 		driver: e.driver,
 		markSelfInduced: e.markSelfInduced
 	});
@@ -226,21 +227,21 @@ function Le() {
 }
 //#endregion
 //#region src/navigate/usePathname.ts
-function Re() {
-	return W((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
+function Ve() {
+	return U((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);
-	o(() => {
-		if (!e) return c(P(r.readState())), r.subscribe((e) => c(P(e.state)));
+function Y() {
+	let { routePath: e } = z(), t = I(), n = o(Ee), { driver: r, markSelfInduced: i } = t, [a, c] = f(null);
+	s(() => {
+		if (!e) return c(M(r.readState())), r.subscribe((e) => c(M(e.state)));
 	}, [e, r]);
-	let l = ie({
+	let l = k({
 		stores: t,
 		driver: r,
 		markSelfInduced: i,
-		buildStepPathname: (t) => e ? Ie(e, t).pathname : p(r.readPathname(), t),
+		buildStepPathname: (t) => e ? ze(e, t).pathname : p(r.readPathname(), t),
 		applyParams: (t) => {
 			n({
 				type: "SET",
@@ -249,7 +250,7 @@ function X() {
 		}
 	});
 	return {
-		step: s,
+		step: a,
 		pushStep: (e) => l.pushStep(e),
 		replaceStep: (e) => l.replaceStep(e),
 		popStep: l.popStep
@@ -257,39 +258,39 @@ function X() {
 }
 //#endregion
 //#region src/screen/ParamsProvider/useParams.ts
-function Z() {
-	return a(Se);
+function He() {
+	return o(B);
 }
 //#endregion
 //#region src/screen/ScreenFreeze.tsx
-function ze({ freeze: e, children: n }) {
-	return /* @__PURE__ */ I(t, {
+function X({ freeze: e, children: n }) {
+	return /* @__PURE__ */ P(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 Ue = /* @__PURE__ */ new WeakMap();
+function We(e) {
+	let t = Ue.get(e);
+	return t || (t = _(), Ue.set(e, t)), t;
 }
 //#endregion
 //#region src/stores/useNavigateStore.ts
-function Q(e) {
-	return U(R().navigate, e);
+function Z(e) {
+	return H(I().navigate, e);
 }
 //#endregion
 //#region src/screen/ScreenDecorator.tsx
-function He({ ref: e, style: t, ...n }) {
-	let { isActive: r, transitionName: i } = V(), 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", {
+function Ge({ ref: e, style: t, ...n }) {
+	let { isActive: r, transitionName: i } = z(), a = d(null);
+	l(e, () => a.current);
+	let o = Z((e) => e.status), { decoratorName: s } = Se(i), c = le.get(s);
+	return c ? /* @__PURE__ */ P("div", {
 		ref: a,
 		"data-flemo-decorator": !0,
-		"data-flemo-decorator-name": l.name,
+		"data-flemo-decorator-name": c.name,
 		"data-flemo-status": o,
 		"data-flemo-active": r ? "true" : "false",
 		style: {
@@ -307,9 +308,9 @@ function He({ ref: e, style: t, ...n }) {
 }
 //#endregion
 //#region src/screen/useViewportScrollHeight.ts
-function Ue() {
+function Ke() {
 	let [e, t] = f(0), [n, r] = f(0);
-	return o(() => he((e, n) => {
+	return s(() => ve((e, n) => {
 		r(n), t(e);
 	}), []), {
 		viewportScrollHeight: e,
@@ -318,185 +319,201 @@ function Ue() {
 }
 //#endregion
 //#region src/stores/useScreenStore.ts
-function $(e) {
-	return U(R().screen, e);
+function Q(e) {
+	return H(I().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);
-	pe.current ||= ae({
+function $({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: i, sharedTopBar: o, sharedBottomBar: c, topBar: l, bottomBar: ee, hideStatusBar: te, hideSystemNavigationBar: p, backgroundColor: m = "white", contentScrollable: g = !0, ..._ }) {
+	let { id: v, isActive: y, isRoot: b, isPrev: ie, zIndex: x, transitionName: S, prevTransitionName: C } = z(), { contained: w } = ke(), T = w ? "absolute" : "fixed", E = I(), D = Z((e) => e.status), O = Q((e) => e.dragStatus), ae = Q((e) => e.replaceTransitionStatus), k = E.screen.getState().setDragStatus, se = E.screen.getState().setReplaceTransitionStatus, A = U((e) => e.index), de = U((e) => e.histories), j = y ? de[A - 1]?.id : de[A]?.id, me = Q((e) => j ? e.sharedBars[j] : void 0), he = Q((e) => j ? e.screenSurfaces[j] : void 0), ge = d(null);
+	ge.current ||= ce({
 		getTransitionTaskId: () => E.navigate.getState().transitionTaskId,
-		setDragStatus: ie,
-		setReplaceTransitionStatus: j
+		setDragStatus: k,
+		setReplaceTransitionStatus: se
 	});
-	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({
-		transition: P,
-		decorator: F,
-		hasSharedTopBar: !!a,
-		hasSharedBottomBar: !!s,
-		viewportScrollHeight: L,
+	let ve = ge.current, ye = d(null);
+	ye.current ||= We(E.navigate);
+	let M = Se(S), { initial: be, swipeDirection: xe, decoratorName: Ce } = M, N = le.get(Ce), { viewportScrollHeight: F } = Ke(), L = F > 0, [R, B] = f(0), [Ee, De] = f(0), Oe = d(null), V = d(null), H = d(null), W = d(null), G = d(null), K = d({
+		transition: M,
+		decorator: N,
+		hasSharedTopBar: !!o,
+		hasSharedBottomBar: !!c,
+		viewportScrollHeight: F,
 		isRoot: b,
 		isActive: y,
 		status: D,
 		dragStatus: O,
-		index: M
+		index: A
 	});
-	q.current = {
-		transition: P,
-		decorator: F,
-		hasSharedTopBar: !!a,
-		hasSharedBottomBar: !!s,
-		viewportScrollHeight: L,
+	K.current = {
+		transition: M,
+		decorator: N,
+		hasSharedTopBar: !!o,
+		hasSharedBottomBar: !!c,
+		viewportScrollHeight: F,
 		isRoot: b,
 		isActive: y,
 		status: D,
 		dragStatus: O,
-		index: M
+		index: A
 	};
-	let De = d(null);
-	De.current ||= A({
-		getTransition: () => q.current.transition,
-		getDecorator: () => q.current.decorator,
+	let Ae = d(null);
+	Ae.current ||= oe({
+		getTransition: () => K.current.transition,
+		getDecorator: () => K.current.decorator,
 		getElements: () => ({
-			scope: H.current,
-			screenContainer: Te.current,
-			decorator: U.current,
-			sharedTopBar: G.current,
-			sharedBottomBar: K.current
+			scope: V.current,
+			screenContainer: Oe.current,
+			decorator: H.current,
+			sharedTopBar: W.current,
+			sharedBottomBar: G.current
 		}),
-		hasSharedTopBar: () => q.current.hasSharedTopBar,
-		hasSharedBottomBar: () => q.current.hasSharedBottomBar,
-		getViewportScrollHeight: () => q.current.viewportScrollHeight,
+		hasSharedTopBar: () => K.current.hasSharedTopBar,
+		hasSharedBottomBar: () => K.current.hasSharedBottomBar,
+		getViewportScrollHeight: () => K.current.viewportScrollHeight,
 		isReadyForDrag: () => {
-			let e = q.current;
+			let e = K.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 = K.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,
+		setDragStatus: k,
 		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);
-	o(() => {
-		se(H.current);
-	}, []), o(() => {
-		let e = H.current;
+	let q = Ae.current, je = (e) => q.pointerDown(e.nativeEvent), Me = (e) => q.pointerMove(e.nativeEvent), Ne = (e) => q.pointerUp(e.nativeEvent);
+	s(() => {
+		ue(V.current);
+	}, []), s(() => {
+		let e = V.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 = W.current;
 		if (!e) {
-			Se(0);
+			B(0);
 			return;
 		}
-		return me(e, Se);
-	}, [a]), u(() => {
-		let e = K.current;
+		return _e(e, B);
+	}, [o]), u(() => {
+		let e = G.current;
 		if (!e) {
-			we(0);
+			De(0);
 			return;
 		}
-		return me(e, we);
-	}, [s]), u(() => {
+		return _e(e, De);
+	}, [c]), u(() => {
 		let { registerSharedBars: e, unregisterSharedBars: t } = E.screen.getState();
 		return e(v, {
-			topBar: !!a,
-			bottomBar: !!s
+			topBar: !!o,
+			bottomBar: !!c
 		}), () => t(v);
 	}, [
 		v,
-		a,
-		s,
+		o,
+		c,
 		E.screen
 	]), u(() => {
-		let e = H.current;
+		let e = V.current;
 		if (!e) return;
 		let { registerScreenSurface: t, unregisterScreenSurface: n } = E.screen.getState();
-		return t(v, { opaqueBackground: ue(getComputedStyle(e).backgroundColor) }), () => n(v);
+		return t(v, { opaqueBackground: pe(getComputedStyle(e).backgroundColor) }), () => n(v);
 	}, [
 		v,
 		m,
 		D,
 		E.screen
 	]);
-	let je = y || x === M - 1, { app: Me, nav: Ne } = h({
+	let Pe = y || x === A - 1, { app: Fe, nav: Ie } = re({
 		status: D,
-		isTopOrTopPrev: je,
-		hasTopBar: !!a,
-		hasNavBar: !!s,
-		partnerBars: de
-	}), Y = te({
+		isTopOrTopPrev: Pe,
+		hasTopBar: !!o,
+		hasNavBar: !!c,
+		partnerBars: me
+	}), J = ne({
 		status: D,
-		isTopOrTopPrev: je,
+		isTopOrTopPrev: Pe,
 		transitionName: S
-	}), Pe = ne({
+	}), Le = h({
 		isActive: y,
-		isPrev: re,
+		isPrev: ie,
 		zIndex: x,
-		index: M,
+		index: A,
 		status: D,
 		dragStatus: O,
-		replaceTransitionStatus: k
-	}), Fe = d(Pe), Ie = d(Y !== null && Pe), [Le, Re] = f({
-		key: Y,
-		released: Y === null
+		replaceTransitionStatus: ae
+	}), Re = d(Le), ze = d(J !== null && Le), [Be, Ve] = 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";
-	u(() => he.driveScreenLifecycle({
+	Be.key !== J && (Ve({
+		key: J,
+		released: J === null
+	}), ze.current = J !== null && Re.current), Re.current = Le;
+	let Y = J !== null && Be.key === J && !Be.released, [He] = f(() => we({
+		holdKey: J,
+		isActive: y,
+		status: D
+	})), [X, Ue] = f(!1);
+	s(() => {
+		if (!He || X || Y) return;
+		let e = requestAnimationFrame(() => {
+			a(() => Ue(!0));
+		});
+		return () => cancelAnimationFrame(e);
+	}, [
+		He,
+		X,
+		Y
+	]);
+	let $ = Y ? !y && he?.opaqueBackground ? "park" : y && (D === "PUSHING" || D === "REPLACING") && he?.opaqueBackground ? "park-under" : "true" : "false";
+	u(() => ve.driveScreenLifecycle({
 		getElements: () => ({
-			scope: H.current,
-			decorator: U.current,
-			bars: [G.current, K.current]
+			scope: V.current,
+			decorator: H.current,
+			bars: [W.current, G.current]
 		}),
 		transitionName: S,
 		prevTransitionName: C,
 		status: D,
 		isActive: y,
-		animHoldReleased: !X
+		animHoldReleased: !Y
 	}), [
-		he,
+		ve,
 		D,
 		y,
 		C,
 		S,
-		X
-	]), 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 ? {
+		Y
+	]), s(() => {
+		if (!Y || J === null) return;
+		let e = J, t = E.navigate.getState().transitionTaskId, n = t === null ? e : `${e}#${t}`;
+		return ye.current.join(n, () => Ve((t) => t.key === e && !t.released ? {
 			key: e,
 			released: !0
 		} : t), {
-			scope: H.current,
-			decodeWait: Ie.current
+			scope: V.current,
+			decodeWait: ze.current
 		});
 	}, [
-		X,
 		Y,
-		Z,
+		J,
+		$,
 		E.navigate
 	]);
-	let ze = Z === "park-under" ? {} : le({
-		initial: _e,
+	let qe = $ === "park-under" ? {} : fe({
+		initial: be,
 		isActive: y,
 		status: D
 	});
-	return /* @__PURE__ */ xe("div", {
-		ref: Te,
+	return /* @__PURE__ */ Te("div", {
+		ref: Oe,
 		style: {
 			position: T,
 			top: 0,
@@ -504,14 +521,14 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 			width: "100%",
 			height: "100%",
 			display: "flex",
-			zIndex: Z === "park-under" ? -1 : void 0,
+			zIndex: $ === "park-under" ? -1 : void 0,
 			contain: "layout style",
 			flexDirection: "column",
 			boxSizing: "border-box",
 			overscrollBehavior: "contain"
 		},
 		children: [
-			/* @__PURE__ */ I("div", {
+			/* @__PURE__ */ P("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
 					position: T,
@@ -522,32 +539,32 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					zIndex: 1
 				}
 			}),
-			/* @__PURE__ */ xe("div", {
-				ref: H,
+			/* @__PURE__ */ Te("div", {
+				ref: V,
 				..._,
-				onPointerDown: Oe,
-				onPointerMove: ke,
-				onPointerUp: Ae,
-				onPointerCancel: Ae,
+				onPointerDown: je,
+				onPointerMove: Me,
+				onPointerUp: Ne,
+				onPointerCancel: Ne,
 				"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": $,
 				style: {
 					display: "flex",
 					flexDirection: "column",
 					height: "100%",
 					backgroundColor: m,
 					overflowY: g ? void 0 : "auto",
-					touchAction: ve === "x" ? "pan-y" : ve === "y" ? "pan-x" : "auto",
-					...ze,
+					touchAction: xe === "x" ? "pan-y" : xe === "y" ? "pan-x" : "auto",
+					...qe,
 					..._.style
 				},
 				children: [
-					!ee && t && /* @__PURE__ */ I("div", {
+					!te && t && /* @__PURE__ */ P("div", {
 						style: { minHeight: t },
-						children: /* @__PURE__ */ I("div", { style: {
+						children: /* @__PURE__ */ P("div", { style: {
 							position: T,
 							top: 0,
 							width: "100%",
@@ -555,32 +572,32 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 							backgroundColor: n
 						} })
 					}),
-					a && /* @__PURE__ */ I("div", { style: {
+					o && /* @__PURE__ */ P("div", { style: {
 						width: "100%",
-						minHeight: B
+						minHeight: R
 					} }),
-					c,
-					/* @__PURE__ */ I("div", {
+					l,
+					/* @__PURE__ */ P("div", {
 						style: {
 							display: "flex",
 							flexDirection: "column",
 							flexGrow: 1,
 							overflowY: g ? "auto" : void 0
 						},
-						children: e
+						children: He && !X ? null : e
 					}),
-					l,
-					s && /* @__PURE__ */ I("div", { style: {
-						display: z ? "none" : void 0,
+					ee,
+					c && /* @__PURE__ */ P("div", { style: {
+						display: L ? "none" : void 0,
 						width: "100%",
-						minHeight: Ce
+						minHeight: Ee
 					} }),
-					!p && r && /* @__PURE__ */ I("div", {
+					!p && r && /* @__PURE__ */ P("div", {
 						style: {
-							display: z ? "none" : void 0,
+							display: L ? "none" : void 0,
 							minHeight: r
 						},
-						children: /* @__PURE__ */ I("div", { style: {
+						children: /* @__PURE__ */ P("div", { style: {
 							position: T,
 							bottom: 0,
 							width: "100%",
@@ -590,46 +607,46 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					})
 				]
 			}),
-			a && /* @__PURE__ */ I("div", {
-				ref: G,
+			o && /* @__PURE__ */ P("div", {
+				ref: W,
 				"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": Fe ? "true" : "false",
+				"data-flemo-anim-hold": $,
 				style: {
 					position: T,
-					top: ee ? 0 : t,
+					top: te ? 0 : t,
 					left: 0,
 					width: "100%",
 					zIndex: 1
 				},
-				children: a
+				children: o
 			}),
-			s && /* @__PURE__ */ I("div", {
-				ref: K,
+			c && /* @__PURE__ */ P("div", {
+				ref: G,
 				"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": Ie ? "true" : "false",
+				"data-flemo-anim-hold": $,
 				style: {
-					display: z ? "none" : void 0,
+					display: L ? "none" : void 0,
 					position: T,
 					bottom: p ? 0 : r,
 					left: 0,
 					width: "100%",
 					zIndex: 1
 				},
-				children: s
+				children: c
 			}),
-			F && /* @__PURE__ */ I(He, {
-				ref: U,
-				"data-flemo-anim-hold": Z
+			N && /* @__PURE__ */ P(Ge, {
+				ref: H,
+				"data-flemo-anim-hold": $
 			}),
-			/* @__PURE__ */ I("div", {
+			/* @__PURE__ */ P("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
 					position: T,
@@ -645,19 +662,19 @@ 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, {
-		freeze: ne({
+function qe({ children: e, ...t }) {
+	let { isActive: n, isPrev: r, zIndex: i } = z();
+	return /* @__PURE__ */ P(X, {
+		freeze: h({
 			isActive: n,
 			isPrev: r,
 			zIndex: i,
-			index: W((e) => e.index),
-			status: Q((e) => e.status),
-			dragStatus: $((e) => e.dragStatus),
-			replaceTransitionStatus: $((e) => e.replaceTransitionStatus)
+			index: U((e) => e.index),
+			status: Z((e) => e.status),
+			dragStatus: Q((e) => e.dragStatus),
+			replaceTransitionStatus: Q((e) => e.replaceTransitionStatus)
 		}),
-		children: /* @__PURE__ */ I(We, {
+		children: /* @__PURE__ */ P($, {
 			...t,
 			children: e
 		})
@@ -665,12 +682,12 @@ 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", {
+function Je({ ref: e, name: t, style: n, children: r, ...i }) {
+	let { isActive: a, navigateStore: o } = z(), s = I();
+	return /* @__PURE__ */ P("div", {
 		ref: e,
 		"data-flemo-part-name": t,
-		"data-flemo-status": Q((e) => e.status),
+		"data-flemo-status": H(o ?? s.navigate, (e) => e.status),
 		"data-flemo-active": a ? "true" : "false",
 		style: n,
 		...i,
@@ -679,21 +696,21 @@ function Ke({ ref: e, name: t, style: n, children: r, ...i }) {
 }
 //#endregion
 //#region src/stores/RouterScopeProvider.tsx
-function qe({ children: e }) {
+function Ye({ children: e }) {
 	let [t] = f(() => ({
-		history: re(),
+		history: ie(),
 		navigate: x(),
-		transition: M(),
-		screen: k(),
+		transition: A(),
+		screen: ae(),
 		driver: y(),
-		markSelfInduced: fe,
+		markSelfInduced: he,
 		consume: g,
 		life: { alive: !0 }
 	}));
-	return /* @__PURE__ */ I(L.Provider, {
+	return /* @__PURE__ */ P(F.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 { Je as Part, Re as Route, Le as Router, Ye as RouterScopeProvider, qe as Screen, R as ScreenContext, Ge as ScreenDecorator, X as ScreenFreeze, $ as ScreenMotion, je as Slot, v as createBrowserHistoryDriver, b as createDecorator, C as createPartTransition, w as createRawDecorator, T as createRawPartTransition, E as createRawTransition, se as createTransition, ye as partTransitionMap, U as useHistoryStore, Be as useNavigate, Z as useNavigateStore, He as useParams, Ve as usePathname, z as useScreen, Q as useScreenStore, Y as useStep, I as useStores, Ke 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/dist/screen/__tests__/ScreenMotion.replaceSuspenseCut.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/screen/__tests__/ScreenMotion.shellFirst.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/screen/__tests__/ScreenMotion.suspendedMountEffects.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flemo/react",
-  "version": "1.6.8",
+  "version": "1.7.0",
   "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.0"
+    "@flemo/core": "1.19.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",