@flemo/react 1.6.0 → 1.6.2

package/dist/index.mjs

@@ -1,28 +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 d, useRef as f, useState as p } from "react";
-import { animHoldKey as ee, appendParamsQuery as m, buildRoutePath as h, computeBarRiding as g, computeScreenFreeze as _, consumeSelfInducedPop as v, createBrowserHistoryDriver as y, createBrowserHistoryDriver as b, createDecorator as x, createHistoryStore as te, createHistorySync as S, createNavigateStore as C, createNavigationController as w, createPartTransition as T, createRawDecorator as E, createRawPartTransition as D, createRawTransition as O, createRouterScope as ne, createScreenSelector as k, createScreenStore as A, createStepController as j, createSwipeController as M, createTransition as N, createTransitionEngine as re, createTransitionStore as ie, decoratorMap as ae, eagerlyDecodeImages as oe, ensureWindowHistoryState as se, enteringInitialStyle as ce, getMatchedPathPattern as le, 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 F, resolveTransition as _e, scheduleAnimHoldRelease as ve, subscribeStepParamsRestore as I } from "@flemo/core";
-import { jsx as L, jsxs as ye } from "react/jsx-runtime";
+import { animHoldKey as ee, appendParamsQuery as m, buildRoutePath as h, computeBarRiding as g, computeScreenFreeze as _, consumeSelfInducedPop as v, createBrowserHistoryDriver as y, createBrowserHistoryDriver as b, createDecorator as x, createHistoryStore as te, createNavigateStore as S, createNavigationController as C, createPartTransition as w, createRawDecorator as T, createRawPartTransition as E, createRawTransition as D, createRouterScope as ne, createScreenSelector as O, createScreenStore as k, createStepController as A, createSwipeController as re, createTransition as j, createTransitionEngine as ie, createTransitionStore as M, decoratorMap as ae, eagerlyDecodeImages as oe, ensureScopeHistorySync as se, enteringInitialStyle as ce, getMatchedPathPattern as le, isOpaqueColor as ue, isServer as de, markSelfInducedPop as fe, matchesPathname as pe, observeBarHeight as me, observeViewportScrollHeight as he, partTransitionMap as ge, readStepParams as _e, registerTransitionDefinitions as N, releaseScopeHistorySync as P, resolveTransition as ve, scheduleAnimHoldRelease as ye, seedRouterEntry as F, subscribeStepParamsRestore as be } from "@flemo/core";
+import { jsx as I, jsxs as xe } from "react/jsx-runtime";
 //#region src/stores/StoreContext.ts
-var R = r(null);
+var L = r(null);
 //#endregion
 //#region src/stores/useStores.ts
-function z() {
-	let e = a(R);
+function R() {
+	let e = a(L);
 	if (!e) throw Error("flemo stores are missing. Render inside a <Router>.");
 	return e;
 }
 //#endregion
 //#region src/history/HistoryListener.tsx
-function be() {
-	let e = z();
-	return o(() => S({
-		stores: e,
-		driver: e.driver,
-		consume: e.consume
-	}), [e]), null;
+function Se() {
+	let e = R();
+	return o(() => (se(e), () => P(e)), [e]), null;
 }
 //#endregion
 //#region src/screen/ScreenContext.ts
-var B = r({
+var z = r({
 	id: "",
 	isActive: !1,
 	isRoot: !0,
@@ -37,12 +33,12 @@ var B = r({
 });
 //#endregion
 //#region src/screen/useScreen.ts
-function V() {
-	return a(B);
+function B() {
+	return a(z);
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsContext.ts
-var H = r({}), xe = r(() => {});
+var V = r({}), H = r(() => {});
 //#endregion
 //#region src/screen/ParamsProvider/ParamsReducer.ts
 function U(e, t) {
@@ -53,10 +49,10 @@ function U(e, t) {
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsProvider.tsx
-function Se({ children: e }) {
-	let { isActive: t, params: n } = V(), { driver: r } = z(), [i, a] = d(U, n);
+function W({ children: e }) {
+	let { isActive: t, params: n } = B(), { driver: r } = R(), [i, a] = d(U, n);
 	return o(() => {
-		if (t) return I(r, (e) => a({
+		if (t) return be(r, (e) => a({
 			type: "SET",
 			params: e
 		}));
@@ -64,9 +60,9 @@ function Se({ children: e }) {
 		t,
 		a,
 		r
-	]), /* @__PURE__ */ L(xe.Provider, {
+	]), /* @__PURE__ */ I(H.Provider, {
 		value: a,
-		children: /* @__PURE__ */ L(H.Provider, {
+		children: /* @__PURE__ */ I(V.Provider, {
 			value: i,
 			children: e
 		})
@@ -74,41 +70,41 @@ function Se({ 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 W = (e) => e;
-function G(t, n = W) {
+var G = (e) => e;
+function K(t, n = G) {
 	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 K(e) {
-	return G(z().history, e);
+function q(e) {
+	return K(R().history, e);
 }
 //#endregion
 //#region src/renderer/Renderer.tsx
-function q({ children: e }) {
-	let t = K((e) => e.index);
-	return k(K((e) => e.histories), t).map((t) => {
+function Ce({ children: e }) {
+	let t = q((e) => e.index);
+	return O(q((e) => e.histories), t).map((t) => {
 		let [r] = n.toArray(e).filter((e) => pe(e.props.path, t.pathname));
-		return /* @__PURE__ */ L(B.Provider, {
+		return r ? /* @__PURE__ */ I(z.Provider, {
 			value: {
 				...t,
 				routePath: le(r.props.path, t.pathname)
 			},
-			children: /* @__PURE__ */ L(Se, { children: r })
-		}, t.id);
+			children: /* @__PURE__ */ I(W, { children: r })
+		}, t.id) : null;
 	});
 }
 //#endregion
 //#region src/screen/ScreenViewportContext.ts
 var J = r({ contained: !1 });
-function Ce() {
+function we() {
 	return a(J);
 }
 //#endregion
 //#region src/transition/styles.ts
-function Y(e, t, n = []) {
-	l(() => F(e, t, n), [
+function Te(e, t, n = []) {
+	l(() => N(e, t, n), [
 		e,
 		t,
 		n
@@ -116,55 +112,63 @@ function Y(e, t, n = []) {
 }
 //#endregion
 //#region src/RouterDepthContext.ts
-var we = r(0), Te = { contained: !0 };
-function Ee({ children: e, className: t, style: n }) {
-	return /* @__PURE__ */ L("div", {
+var Ee = r(0), De = { contained: !0 };
+function Oe({ children: e, className: t, style: n }) {
+	return /* @__PURE__ */ I("div", {
 		className: t,
 		style: {
 			position: "relative",
 			overflow: "hidden",
 			...n
 		},
-		children: /* @__PURE__ */ L(J.Provider, {
-			value: Te,
-			children: /* @__PURE__ */ L(q, { children: e })
+		children: /* @__PURE__ */ I(J.Provider, {
+			value: De,
+			children: /* @__PURE__ */ I(Ce, { children: e })
 		})
 	});
 }
 //#endregion
 //#region src/Router.tsx
-function De(e) {
+function ke(e) {
 	let t = null;
 	return n.forEach(e, (e) => {
 		if (t || !i(e)) return;
-		if (e.type === Ee) {
+		if (e.type === Oe) {
 			t = n.toArray(e.props.children).filter(i);
 			return;
 		}
 		let r = e.props.children;
 		if (r) {
-			let e = De(r);
+			let e = ke(r);
 			e && (t = e);
 		}
 	}), t;
 }
-var Oe = [], ke = [], X = [], Ae = { contained: !0 };
-function je({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = Oe, decorators: c = ke, partTransitions: l = X, history: u = "browser", createDriver: d, className: f, style: ee }) {
-	let m = a(we), h = m > 0, g = u === "memory", _ = s(), v = a(B), y = h && v.id ? `_F_${v.id}_` : _, x = De(e), te = x !== null, S = a(R), C = h ? null : S, w = C !== null, T = d ?? b, [E] = p(() => g ? null : T(w ? void 0 : y)), D = !h && !g && !de(), O = D && E ? E.readPathname() : t || "/", k = O.indexOf("?"), A = (k >= 0 ? O.slice(0, k) : O) || "/", j = D ? window.location.search : k >= 0 ? O.slice(k) : "", [M] = p(() => ne({
+var Ae = typeof window > "u" ? o : u, Y = [], je = [], Me = [], X = { contained: !0 };
+function Z({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = Y, decorators: c = je, partTransitions: l = Me, history: u = "browser", createDriver: d, className: f, style: ee }) {
+	let m = a(Ee), h = m > 0, g = u === "memory", _ = s(), v = a(z), y = h && v.id ? `_F_${v.id}_` : _, x = ke(e), te = x !== null, S = a(L), C = h ? null : S, w = C !== null, T = d ?? b, [E] = p(() => g ? null : T(w ? void 0 : y)), D = !h && !g && !de(), O = D && E ? E.readPathname() : t || "/", k = O.indexOf("?"), A = (k >= 0 ? O.slice(0, k) : O) || "/", re = D ? window.location.search : k >= 0 ? O.slice(k) : "", [j] = p(() => ne({
 		routePaths: (x ?? n.toArray(e)).map((e) => e.props.path).flat(),
 		pathname: A,
-		search: j,
+		search: re,
 		defaultTransitionName: r,
 		memory: g,
 		browserDriver: E,
-		hostedScope: C
+		hostedScope: C,
+		routerKey: w ? void 0 : y,
+		zoneEntryId: h && !w && v.id || void 0,
+		persistKey: h && !g && !w ? y : void 0
 	}));
-	M.transition.setState({ defaultTransitionName: r }), o(() => (M.life.alive = !0, () => {
-		M.life.alive = !1;
-	}), [M]), Y(i, c, l), o(() => {
-		if (g || de()) return;
-		let e = h && !w && E ? E.readState() == null : !1;
-		se(w ? null : y, r, M.history.getState().histories[0]?.params ?? {}), h && !w && E && e && E.readPathname() !== A && E.replaceState(E.readState(), A);
+	j.transition.setState({ defaultTransitionName: r }), Ae(() => (j.life.alive = !0, () => {
+		j.life.alive = !1;
+	}), [j]), Te(i, c, l), o(() => {
+		g || !E || F({
+			driver: E,
+			routerKey: w ? null : y,
+			nested: h && !w,
+			seedPathname: A,
+			defaultTransitionName: r,
+			rootParams: j.history.getState().histories[0]?.params ?? {}
+		});
 	}, [
 		g,
 		w,
@@ -172,45 +176,45 @@ function je({ children: e, initPath: t = "/", defaultTransitionName: r = "cupert
 		y,
 		A,
 		r,
-		M.history,
+		j.history,
 		E
 	]);
-	let N = te ? e : /* @__PURE__ */ L(q, { children: e }), re = /* @__PURE__ */ L(we.Provider, {
+	let ie = te ? e : /* @__PURE__ */ I(Ce, { children: e }), M = /* @__PURE__ */ I(Ee.Provider, {
 		value: m + 1,
-		children: /* @__PURE__ */ ye(R.Provider, {
-			value: M,
-			children: [!g && /* @__PURE__ */ L(be, {}), h ? /* @__PURE__ */ L(J.Provider, {
-				value: Ae,
-				children: N
-			}) : N]
+		children: /* @__PURE__ */ xe(L.Provider, {
+			value: j,
+			children: [!g && /* @__PURE__ */ I(Se, {}), h ? /* @__PURE__ */ I(J.Provider, {
+				value: X,
+				children: ie
+			}) : ie]
 		})
 	});
-	return h ? /* @__PURE__ */ L("div", {
+	return h ? /* @__PURE__ */ I("div", {
 		className: f,
 		style: {
 			position: "relative",
 			overflow: "hidden",
 			...ee
 		},
-		children: re
-	}) : re;
+		children: M
+	}) : M;
 }
 //#endregion
 //#region src/Route.tsx
-function Me({ element: e }) {
+function Ne({ element: e }) {
 	return e;
 }
 //#endregion
 //#region src/utils/buildRoutePath.ts
-function Z(e, t) {
+function Pe(e, t) {
 	return h(e, t);
 }
 //#endregion
 //#region src/navigate/useNavigate.ts
-function Ne() {
-	let e = z(), t = w({
+function Fe() {
+	let e = R(), t = C({
 		stores: e,
-		buildPathname: (e, t) => Z(e, t),
+		buildPathname: (e, t) => Pe(e, t),
 		driver: e.driver,
 		markSelfInduced: e.markSelfInduced
 	});
@@ -222,21 +226,21 @@ function Ne() {
 }
 //#endregion
 //#region src/navigate/usePathname.ts
-function Pe() {
-	return K((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
+function Ie() {
+	return q((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
 }
 //#endregion
 //#region src/navigate/useStep.ts
-function Fe() {
-	let { routePath: e } = V(), t = z(), n = a(xe), { driver: r, markSelfInduced: i } = t, [s, c] = p(null);
+function Le() {
+	let { routePath: e } = B(), t = R(), n = a(H), { driver: r, markSelfInduced: i } = t, [s, c] = p(null);
 	o(() => {
-		if (!e) return c(P(r.readState())), r.subscribe((e) => c(P(e.state)));
+		if (!e) return c(_e(r.readState())), r.subscribe((e) => c(_e(e.state)));
 	}, [e, r]);
-	let l = j({
+	let l = A({
 		stores: t,
 		driver: r,
 		markSelfInduced: i,
-		buildStepPathname: (t) => e ? Z(e, t).pathname : m(r.readPathname(), t),
+		buildStepPathname: (t) => e ? Pe(e, t).pathname : m(r.readPathname(), t),
 		applyParams: (t) => {
 			n({
 				type: "SET",
@@ -253,13 +257,13 @@ function Fe() {
 }
 //#endregion
 //#region src/screen/ParamsProvider/useParams.ts
-function Ie() {
-	return a(H);
+function Re() {
+	return a(V);
 }
 //#endregion
 //#region src/screen/ScreenFreeze.tsx
-function Le({ freeze: e, children: n }) {
-	return /* @__PURE__ */ L(t, {
+function ze({ freeze: e, children: n }) {
+	return /* @__PURE__ */ I(t, {
 		mode: e ? "hidden" : "visible",
 		children: n
 	});
@@ -267,15 +271,15 @@ function Le({ freeze: e, children: n }) {
 //#endregion
 //#region src/stores/useNavigateStore.ts
 function Q(e) {
-	return G(z().navigate, e);
+	return K(R().navigate, e);
 }
 //#endregion
 //#region src/screen/ScreenDecorator.tsx
-function Re({ ref: e, style: t, ...n }) {
-	let { isActive: r, transitionName: i } = V(), a = f(null);
+function Be({ ref: e, style: t, ...n }) {
+	let { isActive: r, transitionName: i } = B(), a = f(null);
 	c(e, () => a.current);
-	let o = Q((e) => e.status), { decoratorName: s } = _e(i), l = ae.get(s);
-	return l ? /* @__PURE__ */ L("div", {
+	let o = Q((e) => e.status), { decoratorName: s } = ve(i), l = ae.get(s);
+	return l ? /* @__PURE__ */ I("div", {
 		ref: a,
 		"data-flemo-decorator": !0,
 		"data-flemo-decorator-name": l.name,
@@ -296,7 +300,7 @@ function Re({ ref: e, style: t, ...n }) {
 }
 //#endregion
 //#region src/screen/useViewportScrollHeight.ts
-function ze() {
+function Ve() {
 	let [e, t] = p(0), [n, r] = p(0);
 	return o(() => he((e, n) => {
 		r(n), t(e);
@@ -308,108 +312,92 @@ function ze() {
 //#endregion
 //#region src/stores/useScreenStore.ts
 function $(e) {
-	return G(z().screen, e);
+	return K(R().screen, e);
 }
 //#endregion
 //#region src/screen/ScreenMotion.tsx
-function Be({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: i, sharedTopBar: a, sharedBottomBar: s, topBar: c, bottomBar: l, hideStatusBar: d, hideSystemNavigationBar: m, backgroundColor: h = "white", contentScrollable: _ = !0, ...v }) {
-	let { id: y, isActive: b, isRoot: x, zIndex: te, transitionName: S, prevTransitionName: C } = V(), { contained: w } = Ce(), T = w ? "absolute" : "fixed", E = z(), D = Q((e) => e.status), O = $((e) => e.dragStatus), ne = E.screen.getState().setDragStatus, k = E.screen.getState().setReplaceTransitionStatus, A = K((e) => e.index), j = K((e) => e.histories), N = b ? j[A - 1]?.id : j[A]?.id, ie = $((e) => N ? e.sharedBars[N] : void 0), se = $((e) => N ? e.screenSurfaces[N] : void 0), le = f(null);
-	le.current ||= re({
+function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: i, sharedTopBar: a, sharedBottomBar: s, topBar: c, bottomBar: l, hideStatusBar: d, hideSystemNavigationBar: m, backgroundColor: h = "white", contentScrollable: _ = !0, ...v }) {
+	let { id: y, isActive: b, isRoot: x, zIndex: te, transitionName: S, prevTransitionName: C } = B(), { contained: w } = we(), T = w ? "absolute" : "fixed", E = R(), D = Q((e) => e.status), ne = $((e) => e.dragStatus), O = E.screen.getState().setDragStatus, k = E.screen.getState().setReplaceTransitionStatus, A = q((e) => e.index), j = q((e) => e.histories), M = b ? j[A - 1]?.id : j[A]?.id, se = $((e) => M ? e.sharedBars[M] : void 0), le = $((e) => M ? e.screenSurfaces[M] : void 0), de = f(null);
+	de.current ||= ie({
 		getTransitionTaskId: () => E.navigate.getState().transitionTaskId,
-		setDragStatus: ne,
+		setDragStatus: O,
 		setReplaceTransitionStatus: k
 	});
-	let de = le.current, fe = _e(S), { initial: pe, swipeDirection: he, decoratorName: ge } = fe, P = ae.get(ge), { viewportScrollHeight: F } = ze(), I = F > 0, [R, be] = p(0), [B, H] = p(0), xe = f(null), U = f(null), Se = f(null), W = f(null), G = f(null), q = f({
-		transition: fe,
-		decorator: P,
+	let fe = de.current, pe = ve(S), { initial: he, swipeDirection: ge, decoratorName: _e } = pe, N = ae.get(_e), { viewportScrollHeight: P } = Ve(), F = P > 0, [be, L] = p(0), [Se, z] = p(0), V = f(null), H = f(null), U = f(null), W = f(null), G = f(null), K = f({
+		transition: pe,
+		decorator: N,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!s,
-		viewportScrollHeight: F,
+		viewportScrollHeight: P,
 		isRoot: x,
 		isActive: b,
 		status: D,
-		dragStatus: O,
+		dragStatus: ne,
 		index: A
 	});
-	q.current = {
-		transition: fe,
-		decorator: P,
+	K.current = {
+		transition: pe,
+		decorator: N,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!s,
-		viewportScrollHeight: F,
+		viewportScrollHeight: P,
 		isRoot: x,
 		isActive: b,
 		status: D,
-		dragStatus: O,
+		dragStatus: ne,
 		index: A
 	};
-	let J = f(null);
-	J.current ||= M({
-		getTransition: () => q.current.transition,
-		getDecorator: () => q.current.decorator,
+	let Ce = f(null);
+	Ce.current ||= re({
+		getTransition: () => K.current.transition,
+		getDecorator: () => K.current.decorator,
 		getElements: () => ({
-			scope: U.current,
-			screenContainer: xe.current,
-			decorator: Se.current,
+			scope: H.current,
+			screenContainer: V.current,
+			decorator: U.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: ne,
+		setDragStatus: O,
 		back: () => window.history.back()
 	});
-	let Y = J.current, we = (e) => Y.pointerDown(e.nativeEvent), Te = (e) => Y.pointerMove(e.nativeEvent), Ee = (e) => Y.pointerUp(e.nativeEvent);
+	let J = Ce.current, Te = (e) => J.pointerDown(e.nativeEvent), Ee = (e) => J.pointerMove(e.nativeEvent), De = (e) => J.pointerUp(e.nativeEvent);
 	o(() => {
-		oe(U.current);
+		oe(H.current);
 	}, []), o(() => {
-		let e = U.current;
+		let e = H.current;
 		if (!e) return;
 		let t = (e) => {
-			Y.shouldPreventTouch() && e.preventDefault(), e.target?.dataset.swipeAtEdgeBar === "true" && e.preventDefault();
+			J.shouldPreventTouch() && e.preventDefault(), e.target?.dataset.swipeAtEdgeBar === "true" && e.preventDefault();
 		};
 		return e.addEventListener("touchmove", t, { passive: !1 }), () => {
 			e.removeEventListener("touchmove", t);
 		};
-	}, [Y]), u(() => de.driveScreenLifecycle({
-		getElements: () => ({
-			scope: U.current,
-			decorator: Se.current,
-			bars: [W.current, G.current]
-		}),
-		transitionName: S,
-		prevTransitionName: C,
-		status: D,
-		isActive: b
-	}), [
-		de,
-		D,
-		b,
-		C,
-		S
-	]), u(() => {
+	}, [J]), u(() => {
 		let e = W.current;
 		if (!e) {
-			be(0);
+			L(0);
 			return;
 		}
-		return me(e, be);
+		return me(e, L);
 	}, [a]), u(() => {
 		let e = G.current;
 		if (!e) {
-			H(0);
+			z(0);
 			return;
 		}
-		return me(e, H);
+		return me(e, z);
 	}, [s]), u(() => {
 		let { registerSharedBars: e, unregisterSharedBars: t } = E.screen.getState();
 		return e(y, {
@@ -422,7 +410,7 @@ function Be({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 		s,
 		E.screen
 	]), u(() => {
-		let e = U.current;
+		let e = H.current;
 		if (!e) return;
 		let { registerScreenSurface: t, unregisterScreenSurface: n } = E.screen.getState();
 		return t(y, { opaqueBackground: ue(getComputedStyle(e).backgroundColor) }), () => n(y);
@@ -432,38 +420,60 @@ function Be({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 		D,
 		E.screen
 	]);
-	let De = b || te === A - 1, { app: Oe, nav: ke } = g({
+	let Oe = b || te === A - 1, { app: ke, nav: Ae } = g({
 		status: D,
-		isTopOrTopPrev: De,
+		isTopOrTopPrev: Oe,
 		hasTopBar: !!a,
 		hasNavBar: !!s,
-		partnerBars: ie
-	}), X = ee({
+		partnerBars: se
+	}), Y = ee({
 		status: D,
-		isTopOrTopPrev: De,
+		isTopOrTopPrev: Oe,
 		transitionName: S
-	}), [Ae, je] = p({
-		key: X,
-		released: X === null
+	}), [je, Me] = p({
+		key: Y,
+		released: Y === null
 	});
-	Ae.key !== X && je({
-		key: X,
-		released: X === null
+	je.key !== Y && Me({
+		key: Y,
+		released: Y === null
 	});
-	let Me = X !== null && Ae.key === X && !Ae.released, Z = Me ? !b && se?.opaqueBackground ? "park" : "true" : "false";
-	o(() => {
-		if (Me) return ve(() => je((e) => e.key === X && !e.released ? {
-			key: X,
+	let X = Y !== null && je.key === Y && !je.released, Z = X ? !b && le?.opaqueBackground ? "park" : b && (D === "PUSHING" || D === "REPLACING") && le?.opaqueBackground ? "park-under" : "true" : "false";
+	u(() => fe.driveScreenLifecycle({
+		getElements: () => ({
+			scope: H.current,
+			decorator: U.current,
+			bars: [W.current, G.current]
+		}),
+		transitionName: S,
+		prevTransitionName: C,
+		status: D,
+		isActive: b,
+		animHoldReleased: !X
+	}), [
+		fe,
+		D,
+		b,
+		C,
+		S,
+		X
+	]), o(() => {
+		if (X) return ye(() => Me((e) => e.key === Y && !e.released ? {
+			key: Y,
 			released: !0
-		} : e));
-	}, [Me, X]);
-	let Ne = ce({
-		initial: pe,
+		} : e), { scope: H.current });
+	}, [
+		X,
+		Y,
+		Z
+	]);
+	let Ne = Z === "park-under" ? {} : ce({
+		initial: he,
 		isActive: b,
 		status: D
 	});
-	return /* @__PURE__ */ ye("div", {
-		ref: xe,
+	return /* @__PURE__ */ xe("div", {
+		ref: V,
 		style: {
 			position: T,
 			top: 0,
@@ -471,13 +481,14 @@ function Be({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 			width: "100%",
 			height: "100%",
 			display: "flex",
+			zIndex: Z === "park-under" ? -1 : void 0,
 			contain: "layout style",
 			flexDirection: "column",
 			boxSizing: "border-box",
 			overscrollBehavior: "contain"
 		},
 		children: [
-			/* @__PURE__ */ L("div", {
+			/* @__PURE__ */ I("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
 					position: T,
@@ -488,13 +499,13 @@ function Be({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					zIndex: 1
 				}
 			}),
-			/* @__PURE__ */ ye("div", {
-				ref: U,
+			/* @__PURE__ */ xe("div", {
+				ref: H,
 				...v,
-				onPointerDown: we,
-				onPointerMove: Te,
-				onPointerUp: Ee,
-				onPointerCancel: Ee,
+				onPointerDown: Te,
+				onPointerMove: Ee,
+				onPointerUp: De,
+				onPointerCancel: De,
 				"data-flemo-screen": !0,
 				"data-flemo-transition": S,
 				"data-flemo-status": D,
@@ -506,14 +517,14 @@ function Be({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					height: "100%",
 					backgroundColor: h,
 					overflowY: _ ? void 0 : "auto",
-					touchAction: he === "x" ? "pan-y" : he === "y" ? "pan-x" : "auto",
+					touchAction: ge === "x" ? "pan-y" : ge === "y" ? "pan-x" : "auto",
 					...Ne,
 					...v.style
 				},
 				children: [
-					!d && t && /* @__PURE__ */ L("div", {
+					!d && t && /* @__PURE__ */ I("div", {
 						style: { minHeight: t },
-						children: /* @__PURE__ */ L("div", { style: {
+						children: /* @__PURE__ */ I("div", { style: {
 							position: T,
 							top: 0,
 							width: "100%",
@@ -521,12 +532,12 @@ function Be({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 							backgroundColor: n
 						} })
 					}),
-					a && /* @__PURE__ */ L("div", { style: {
+					a && /* @__PURE__ */ I("div", { style: {
 						width: "100%",
-						minHeight: R
+						minHeight: be
 					} }),
 					c,
-					/* @__PURE__ */ L("div", {
+					/* @__PURE__ */ I("div", {
 						style: {
 							display: "flex",
 							flexDirection: "column",
@@ -536,17 +547,17 @@ function Be({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 						children: e
 					}),
 					l,
-					s && /* @__PURE__ */ L("div", { style: {
-						display: I ? "none" : void 0,
+					s && /* @__PURE__ */ I("div", { style: {
+						display: F ? "none" : void 0,
 						width: "100%",
-						minHeight: B
+						minHeight: Se
 					} }),
-					!m && r && /* @__PURE__ */ L("div", {
+					!m && r && /* @__PURE__ */ I("div", {
 						style: {
-							display: I ? "none" : void 0,
+							display: F ? "none" : void 0,
 							minHeight: r
 						},
-						children: /* @__PURE__ */ L("div", { style: {
+						children: /* @__PURE__ */ I("div", { style: {
 							position: T,
 							bottom: 0,
 							width: "100%",
@@ -556,13 +567,13 @@ function Be({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					})
 				]
 			}),
-			a && /* @__PURE__ */ L("div", {
+			a && /* @__PURE__ */ I("div", {
 				ref: W,
 				"data-flemo-bar": "app",
 				"data-flemo-bar-transition": S,
 				"data-flemo-bar-status": D,
 				"data-flemo-bar-active": b ? "true" : "false",
-				"data-flemo-bar-riding": Oe ? "true" : "false",
+				"data-flemo-bar-riding": ke ? "true" : "false",
 				"data-flemo-anim-hold": Z,
 				style: {
 					position: T,
@@ -573,16 +584,16 @@ function Be({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				},
 				children: a
 			}),
-			s && /* @__PURE__ */ L("div", {
+			s && /* @__PURE__ */ I("div", {
 				ref: G,
 				"data-flemo-bar": "nav",
 				"data-flemo-bar-transition": S,
 				"data-flemo-bar-status": D,
 				"data-flemo-bar-active": b ? "true" : "false",
-				"data-flemo-bar-riding": ke ? "true" : "false",
+				"data-flemo-bar-riding": Ae ? "true" : "false",
 				"data-flemo-anim-hold": Z,
 				style: {
-					display: I ? "none" : void 0,
+					display: F ? "none" : void 0,
 					position: T,
 					bottom: m ? 0 : r,
 					left: 0,
@@ -591,11 +602,11 @@ function Be({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				},
 				children: s
 			}),
-			P && /* @__PURE__ */ L(Re, {
-				ref: Se,
+			N && /* @__PURE__ */ I(Be, {
+				ref: U,
 				"data-flemo-anim-hold": Z
 			}),
-			/* @__PURE__ */ L("div", {
+			/* @__PURE__ */ I("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
 					position: T,
@@ -611,19 +622,19 @@ function Be({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 }
 //#endregion
 //#region src/screen/Screen.tsx
-function Ve({ children: e, ...t }) {
-	let { isActive: n, isPrev: r, zIndex: i } = V();
-	return /* @__PURE__ */ L(Le, {
+function Ue({ children: e, ...t }) {
+	let { isActive: n, isPrev: r, zIndex: i } = B();
+	return /* @__PURE__ */ I(ze, {
 		freeze: _({
 			isActive: n,
 			isPrev: r,
 			zIndex: i,
-			index: K((e) => e.index),
+			index: q((e) => e.index),
 			status: Q((e) => e.status),
 			dragStatus: $((e) => e.dragStatus),
 			replaceTransitionStatus: $((e) => e.replaceTransitionStatus)
 		}),
-		children: /* @__PURE__ */ L(Be, {
+		children: /* @__PURE__ */ I(He, {
 			...t,
 			children: e
 		})
@@ -631,9 +642,9 @@ function Ve({ children: e, ...t }) {
 }
 //#endregion
 //#region src/screen/Part.tsx
-function He({ ref: e, name: t, style: n, children: r, ...i }) {
-	let { isActive: a } = V();
-	return /* @__PURE__ */ L("div", {
+function We({ ref: e, name: t, style: n, children: r, ...i }) {
+	let { isActive: a } = B();
+	return /* @__PURE__ */ I("div", {
 		ref: e,
 		"data-flemo-part-name": t,
 		"data-flemo-status": Q((e) => e.status),
@@ -645,21 +656,21 @@ function He({ ref: e, name: t, style: n, children: r, ...i }) {
 }
 //#endregion
 //#region src/stores/RouterScopeProvider.tsx
-function Ue({ children: e }) {
+function Ge({ children: e }) {
 	let [t] = p(() => ({
 		history: te(),
-		navigate: C(),
-		transition: ie(),
-		screen: A(),
+		navigate: S(),
+		transition: M(),
+		screen: k(),
 		driver: b(),
 		markSelfInduced: fe,
 		consume: v,
 		life: { alive: !0 }
 	}));
-	return /* @__PURE__ */ L(R.Provider, {
+	return /* @__PURE__ */ I(L.Provider, {
 		value: t,
 		children: e
 	});
 }
 //#endregion
-export { He as Part, Me as Route, je as Router, Ue as RouterScopeProvider, Ve as Screen, B as ScreenContext, Re as ScreenDecorator, Le as ScreenFreeze, Be as ScreenMotion, Ee as Slot, y as createBrowserHistoryDriver, x as createDecorator, T as createPartTransition, E as createRawDecorator, D as createRawPartTransition, O as createRawTransition, N as createTransition, ge as partTransitionMap, K as useHistoryStore, Ne as useNavigate, Q as useNavigateStore, Ie as useParams, Pe as usePathname, V as useScreen, $ as useScreenStore, Fe as useStep, z as useStores, ze as useViewportScrollHeight };
+export { We as Part, Ne as Route, Z as Router, Ge as RouterScopeProvider, Ue as Screen, z as ScreenContext, Be as ScreenDecorator, ze as ScreenFreeze, He as ScreenMotion, Oe as Slot, y as createBrowserHistoryDriver, x as createDecorator, w as createPartTransition, T as createRawDecorator, E as createRawPartTransition, D as createRawTransition, j as createTransition, ge as partTransitionMap, q as useHistoryStore, Fe as useNavigate, Q as useNavigateStore, Re as useParams, Ie as usePathname, B as useScreen, $ as useScreenStore, Le as useStep, R as useStores, Ve as useViewportScrollHeight };

package/dist/renderer/Renderer.d.ts

@@ -1,3 +1,3 @@
 import { PropsWithChildren } from 'react';
-declare function Renderer({ children }: PropsWithChildren): import("react").JSX.Element[];
+declare function Renderer({ children }: PropsWithChildren): (import("react").JSX.Element | null)[];
 export default Renderer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flemo/react",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "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.12.0"
+    "@flemo/core": "1.13.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -54,8 +54,8 @@
     "vite": "^8.0.16",
     "vite-plugin-dts": "^5.0.2",
     "vitest": "^4.1.9",
-    "@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.7",