@flemo/react 1.5.4 → 1.5.5

package/dist/index.mjs

@@ -1,20 +1,20 @@
 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 S, createHistorySync as C, createNavigateStore as te, createNavigationController as w, createPartTransition as T, createRawDecorator as E, createRawPartTransition as D, createRawTransition as O, createRouterScope as ne, createScreenSelector as re, createScreenStore as k, createStepController as A, createSwipeController as ie, createTransition as ae, createTransitionEngine as oe, createTransitionStore as se, decoratorMap as ce, ensureWindowHistoryState as le, enteringInitialStyle as ue, getMatchedPathPattern as de, isServer as j, markSelfInducedPop as fe, matchesPathname as pe, observeBarHeight as me, observeViewportScrollHeight as he, partTransitionMap as M, readStepParams as N, registerTransitionDefinitions as P, resolveTransition as ge, scheduleAnimHoldRelease as _e, subscribeStepParamsRestore as ve } from "@flemo/core";
-import { jsx as F, 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 S, createHistorySync as C, createNavigateStore as w, createNavigationController as T, createPartTransition as E, createRawDecorator as D, createRawPartTransition as O, createRawTransition as k, createRouterScope as te, createScreenSelector as ne, createScreenStore as A, createStepController as j, createSwipeController as re, createTransition as M, createTransitionEngine as ie, createTransitionStore as ae, decoratorMap as oe, eagerlyDecodeImages as se, ensureWindowHistoryState as ce, enteringInitialStyle as le, getMatchedPathPattern as ue, isOpaqueColor as de, isServer as N, 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 { createPortal as be } from "react-dom";
 //#region src/stores/StoreContext.ts
-var I = r(null);
+var R = r(null);
 //#endregion
 //#region src/stores/useStores.ts
-function L() {
-	let e = a(I);
+function z() {
+	let e = a(R);
 	if (!e) throw Error("flemo stores are missing. Render inside a <Router>.");
 	return e;
 }
 //#endregion
 //#region src/history/HistoryListener.tsx
 function xe() {
-	let e = L();
+	let e = z();
 	return o(() => C({
 		stores: e,
 		driver: e.driver,
@@ -23,7 +23,7 @@ function xe() {
 }
 //#endregion
 //#region src/screen/ScreenContext.ts
-var R = r({
+var B = r({
 	id: "",
 	isActive: !1,
 	isRoot: !0,
@@ -38,15 +38,15 @@ var R = r({
 });
 //#endregion
 //#region src/screen/useScreen.ts
-function z() {
-	return a(R);
+function V() {
+	return a(B);
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsContext.ts
-var Se = r({}), B = r(() => {});
+var Se = r({}), Ce = r(() => {});
 //#endregion
 //#region src/screen/ParamsProvider/ParamsReducer.ts
-function V(e, t) {
+function we(e, t) {
 	switch (t.type) {
 		case "SET": return t.params;
 		default: return e;
@@ -55,9 +55,9 @@ function V(e, t) {
 //#endregion
 //#region src/screen/ParamsProvider/ParamsProvider.tsx
 function H({ children: e }) {
-	let { isActive: t, params: n } = z(), { driver: r } = L(), [i, a] = d(V, n);
+	let { isActive: t, params: n } = V(), { driver: r } = z(), [i, a] = d(we, n);
 	return o(() => {
-		if (t) return ve(r, (e) => a({
+		if (t) return I(r, (e) => a({
 			type: "SET",
 			params: e
 		}));
@@ -65,9 +65,9 @@ function H({ children: e }) {
 		t,
 		a,
 		r
-	]), /* @__PURE__ */ F(B.Provider, {
+	]), /* @__PURE__ */ L(Ce.Provider, {
 		value: a,
-		children: /* @__PURE__ */ F(Se.Provider, {
+		children: /* @__PURE__ */ L(Se.Provider, {
 			value: i,
 			children: e
 		})
@@ -83,33 +83,33 @@ function W(t, n = U) {
 //#endregion
 //#region src/stores/useHistoryStore.ts
 function G(e) {
-	return W(L().history, e);
+	return W(z().history, e);
 }
 //#endregion
 //#region src/renderer/Renderer.tsx
 function K({ children: e }) {
 	let t = G((e) => e.index);
-	return re(G((e) => e.histories), t).map((t) => {
+	return ne(G((e) => e.histories), t).map((t) => {
 		let [r] = n.toArray(e).filter((e) => pe(e.props.path, t.pathname));
-		return /* @__PURE__ */ F(R.Provider, {
+		return /* @__PURE__ */ L(B.Provider, {
 			value: {
 				...t,
-				routePath: de(r.props.path, t.pathname)
+				routePath: ue(r.props.path, t.pathname)
 			},
-			children: /* @__PURE__ */ F(H, { children: r })
+			children: /* @__PURE__ */ L(H, { children: r })
 		}, t.id);
 	});
 }
 //#endregion
 //#region src/screen/ScreenViewportContext.ts
 var q = r({ contained: !1 });
-function Ce() {
+function Te() {
 	return a(q);
 }
 //#endregion
 //#region src/transition/styles.ts
-function J(e, t, n = []) {
-	l(() => P(e, t, n), [
+function Ee(e, t, n = []) {
+	l(() => F(e, t, n), [
 		e,
 		t,
 		n
@@ -117,106 +117,106 @@ function J(e, t, n = []) {
 }
 //#endregion
 //#region src/RouterDepthContext.ts
-var we = r(0), Te = { contained: !0 };
-function Y({ children: e, className: t, style: n }) {
-	return /* @__PURE__ */ F("div", {
+var J = r(0), De = { contained: !0 };
+function Oe({ children: e, className: t, style: n }) {
+	return /* @__PURE__ */ L("div", {
 		className: t,
 		style: {
 			position: "relative",
 			overflow: "hidden",
 			...n
 		},
-		children: /* @__PURE__ */ F(q.Provider, {
-			value: Te,
-			children: /* @__PURE__ */ F(K, { children: e })
+		children: /* @__PURE__ */ L(q.Provider, {
+			value: De,
+			children: /* @__PURE__ */ L(K, { children: e })
 		})
 	});
 }
 //#endregion
 //#region src/Router.tsx
-function Ee(e) {
+function Y(e) {
 	let t = null;
 	return n.forEach(e, (e) => {
 		if (t || !i(e)) return;
-		if (e.type === Y) {
+		if (e.type === Oe) {
 			t = n.toArray(e.props.children).filter(i);
 			return;
 		}
 		let r = e.props.children;
 		if (r) {
-			let e = Ee(r);
+			let e = Y(r);
 			e && (t = e);
 		}
 	}), t;
 }
-var De = [], Oe = [], X = [], ke = { contained: !0 };
-function Ae({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = De, decorators: c = Oe, partTransitions: l = X, history: u = "browser", createDriver: d, className: f, style: ee }) {
-	let m = a(we), h = m > 0, g = u === "memory", _ = s(), v = Ee(e), y = v !== null, x = a(I), S = h ? null : x, C = S !== null, te = d ?? b, [w] = p(() => g ? null : te(C ? void 0 : _)), T = !h && !g && !j(), E = T && w ? w.readPathname() : t || "/", D = E.indexOf("?"), O = (D >= 0 ? E.slice(0, D) : E) || "/", re = T ? window.location.search : D >= 0 ? E.slice(D) : "", [k] = p(() => ne({
+var ke = [], Ae = [], je = [], X = { contained: !0 };
+function Me({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = ke, decorators: c = Ae, partTransitions: l = je, history: u = "browser", createDriver: d, className: f, style: ee }) {
+	let m = a(J), h = m > 0, g = u === "memory", _ = s(), v = Y(e), y = v !== null, x = a(R), S = h ? null : x, C = S !== null, w = d ?? b, [T] = p(() => g ? null : w(C ? void 0 : _)), E = !h && !g && !N(), D = E && T ? T.readPathname() : t || "/", O = D.indexOf("?"), k = (O >= 0 ? D.slice(0, O) : D) || "/", ne = E ? window.location.search : O >= 0 ? D.slice(O) : "", [A] = p(() => te({
 		routePaths: (v ?? n.toArray(e)).map((e) => e.props.path).flat(),
-		pathname: O,
-		search: re,
+		pathname: k,
+		search: ne,
 		defaultTransitionName: r,
 		memory: g,
-		browserDriver: w,
+		browserDriver: T,
 		hostedScope: S
 	}));
-	k.transition.setState({ defaultTransitionName: r }), J(i, c, l), o(() => {
-		g || j() || (le(C ? null : _, r, k.history.getState().histories[0]?.params ?? {}), h && !C && w && w.readPathname() !== O && w.replaceState(w.readState(), O));
+	A.transition.setState({ defaultTransitionName: r }), Ee(i, c, l), o(() => {
+		g || N() || (ce(C ? null : _, r, A.history.getState().histories[0]?.params ?? {}), h && !C && T && T.readPathname() !== k && T.replaceState(T.readState(), k));
 	}, [
 		g,
 		C,
 		h,
 		_,
-		O,
+		k,
 		r,
-		k.history,
-		w
+		A.history,
+		T
 	]);
-	let A = y ? e : /* @__PURE__ */ F(K, { children: e }), ie = /* @__PURE__ */ F(we.Provider, {
+	let j = y ? e : /* @__PURE__ */ L(K, { children: e }), re = /* @__PURE__ */ L(J.Provider, {
 		value: m + 1,
-		children: /* @__PURE__ */ ye(I.Provider, {
-			value: k,
-			children: [!g && /* @__PURE__ */ F(xe, {}), h ? /* @__PURE__ */ F(q.Provider, {
-				value: ke,
-				children: A
-			}) : A]
+		children: /* @__PURE__ */ ye(R.Provider, {
+			value: A,
+			children: [!g && /* @__PURE__ */ L(xe, {}), h ? /* @__PURE__ */ L(q.Provider, {
+				value: X,
+				children: j
+			}) : j]
 		})
 	});
-	return h ? /* @__PURE__ */ F("div", {
+	return h ? /* @__PURE__ */ L("div", {
 		className: f,
 		style: {
 			position: "relative",
 			overflow: "hidden",
 			...ee
 		},
-		children: ie
-	}) : ie;
+		children: re
+	}) : re;
 }
 //#endregion
 //#region src/Route.tsx
-function Z({ element: e }) {
+function Ne({ element: e }) {
 	return e;
 }
 //#endregion
 //#region src/screen/LayerMountContext.ts
-var je = r(null);
+var Pe = r(null);
 //#endregion
 //#region src/screen/Layer.tsx
-function Me({ children: e }) {
-	let t = a(je);
+function Fe({ children: e }) {
+	let t = a(Pe);
 	return t ? be(e, t) : e;
 }
 //#endregion
 //#region src/utils/buildRoutePath.ts
-function Ne(e, t) {
+function Z(e, t) {
 	return h(e, t);
 }
 //#endregion
 //#region src/navigate/useNavigate.ts
-function Pe() {
-	let e = L(), t = w({
+function Ie() {
+	let e = z(), t = T({
 		stores: e,
-		buildPathname: (e, t) => Ne(e, t),
+		buildPathname: (e, t) => Z(e, t),
 		driver: e.driver,
 		markSelfInduced: e.markSelfInduced
 	});
@@ -228,21 +228,21 @@ function Pe() {
 }
 //#endregion
 //#region src/navigate/usePathname.ts
-function Fe() {
+function Le() {
 	return G((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
 }
 //#endregion
 //#region src/navigate/useStep.ts
-function Ie() {
-	let { routePath: e } = z(), t = L(), n = a(B), { driver: r, markSelfInduced: i } = t, [s, c] = p(null);
+function Re() {
+	let { routePath: e } = V(), t = z(), n = a(Ce), { driver: r, markSelfInduced: i } = t, [s, c] = p(null);
 	o(() => {
-		if (!e) return c(N(r.readState())), r.subscribe((e) => c(N(e.state)));
+		if (!e) return c(P(r.readState())), r.subscribe((e) => c(P(e.state)));
 	}, [e, r]);
-	let l = A({
+	let l = j({
 		stores: t,
 		driver: r,
 		markSelfInduced: i,
-		buildStepPathname: (t) => e ? Ne(e, t).pathname : m(r.readPathname(), t),
+		buildStepPathname: (t) => e ? Z(e, t).pathname : m(r.readPathname(), t),
 		applyParams: (t) => {
 			n({
 				type: "SET",
@@ -259,13 +259,13 @@ function Ie() {
 }
 //#endregion
 //#region src/screen/ParamsProvider/useParams.ts
-function Le() {
+function ze() {
 	return a(Se);
 }
 //#endregion
 //#region src/screen/ScreenFreeze.tsx
-function Re({ freeze: e, children: n }) {
-	return /* @__PURE__ */ F(t, {
+function Be({ freeze: e, children: n }) {
+	return /* @__PURE__ */ L(t, {
 		mode: e ? "hidden" : "visible",
 		children: n
 	});
@@ -273,15 +273,15 @@ function Re({ freeze: e, children: n }) {
 //#endregion
 //#region src/stores/useNavigateStore.ts
 function Q(e) {
-	return W(L().navigate, e);
+	return W(z().navigate, e);
 }
 //#endregion
 //#region src/screen/ScreenDecorator.tsx
-function ze({ ref: e, style: t, ...n }) {
-	let { isActive: r, transitionName: i } = z(), a = f(null);
+function Ve({ ref: e, style: t, ...n }) {
+	let { isActive: r, transitionName: i } = V(), a = f(null);
 	c(e, () => a.current);
-	let o = Q((e) => e.status), { decoratorName: s } = ge(i), l = ce.get(s);
-	return l ? /* @__PURE__ */ F("div", {
+	let o = Q((e) => e.status), { decoratorName: s } = _e(i), l = oe.get(s);
+	return l ? /* @__PURE__ */ L("div", {
 		ref: a,
 		"data-flemo-decorator": !0,
 		"data-flemo-decorator-name": l.name,
@@ -302,7 +302,7 @@ function ze({ ref: e, style: t, ...n }) {
 }
 //#endregion
 //#region src/screen/useViewportScrollHeight.ts
-function Be() {
+function He() {
 	let [e, t] = p(0), [n, r] = p(0);
 	return o(() => he((e, n) => {
 		r(n), t(e);
@@ -314,69 +314,71 @@ function Be() {
 //#endregion
 //#region src/stores/useScreenStore.ts
 function $(e) {
-	return W(L().screen, e);
+	return W(z().screen, e);
 }
 //#endregion
 //#region src/screen/ScreenMotion.tsx
-function Ve({ 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: S, transitionName: C, prevTransitionName: te } = z(), { contained: w } = Ce(), T = w ? "absolute" : "fixed", E = L(), D = Q((e) => e.status), O = $((e) => e.dragStatus), ne = E.screen.getState().setDragStatus, re = E.screen.getState().setReplaceTransitionStatus, k = G((e) => e.index), A = G((e) => e.histories), ae = b ? A[k - 1]?.id : A[k]?.id, se = $((e) => ae ? e.sharedBars[ae] : void 0), le = f(null);
-	le.current ||= oe({
-		getTransitionTaskId: () => E.navigate.getState().transitionTaskId,
-		setDragStatus: ne,
-		setReplaceTransitionStatus: re
+function Ue({ 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: S, transitionName: C, prevTransitionName: w } = V(), { contained: T } = Te(), E = T ? "absolute" : "fixed", D = z(), O = Q((e) => e.status), k = $((e) => e.dragStatus), te = D.screen.getState().setDragStatus, ne = D.screen.getState().setReplaceTransitionStatus, A = G((e) => e.index), j = G((e) => e.histories), M = b ? j[A - 1]?.id : j[A]?.id, ae = $((e) => M ? e.sharedBars[M] : void 0), ce = $((e) => M ? e.screenSurfaces[M] : void 0), ue = f(null);
+	ue.current ||= ie({
+		getTransitionTaskId: () => D.navigate.getState().transitionTaskId,
+		setDragStatus: te,
+		setReplaceTransitionStatus: ne
 	});
-	let de = le.current, j = ge(C), { initial: fe, swipeDirection: pe, decoratorName: he } = j, M = ce.get(he), { viewportScrollHeight: N } = Be(), P = N > 0, [ve, be] = p(0), [I, xe] = p(0), [R, Se] = p(null), B = f(null), V = f(null), H = f(null), U = f(null), W = f(null), K = f({
-		transition: j,
-		decorator: M,
+	let N = ue.current, fe = _e(C), { initial: pe, swipeDirection: he, decoratorName: ge } = fe, P = oe.get(ge), { viewportScrollHeight: F } = He(), I = F > 0, [be, R] = p(0), [xe, B] = p(0), [Se, Ce] = p(null), we = f(null), H = f(null), U = f(null), W = f(null), K = f(null), q = f({
+		transition: fe,
+		decorator: P,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!s,
-		viewportScrollHeight: N,
+		viewportScrollHeight: F,
 		isRoot: x,
 		isActive: b,
-		status: D,
-		dragStatus: O,
-		index: k
+		status: O,
+		dragStatus: k,
+		index: A
 	});
-	K.current = {
-		transition: j,
-		decorator: M,
+	q.current = {
+		transition: fe,
+		decorator: P,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!s,
-		viewportScrollHeight: N,
+		viewportScrollHeight: F,
 		isRoot: x,
 		isActive: b,
-		status: D,
-		dragStatus: O,
-		index: k
+		status: O,
+		dragStatus: k,
+		index: A
 	};
-	let q = f(null);
-	q.current ||= ie({
-		getTransition: () => K.current.transition,
-		getDecorator: () => K.current.decorator,
+	let Ee = f(null);
+	Ee.current ||= re({
+		getTransition: () => q.current.transition,
+		getDecorator: () => q.current.decorator,
 		getElements: () => ({
-			scope: V.current,
-			screenContainer: B.current,
-			decorator: H.current,
-			sharedTopBar: U.current,
-			sharedBottomBar: W.current
+			scope: H.current,
+			screenContainer: we.current,
+			decorator: U.current,
+			sharedTopBar: W.current,
+			sharedBottomBar: K.current
 		}),
-		hasSharedTopBar: () => K.current.hasSharedTopBar,
-		hasSharedBottomBar: () => K.current.hasSharedBottomBar,
-		getViewportScrollHeight: () => K.current.viewportScrollHeight,
+		hasSharedTopBar: () => q.current.hasSharedTopBar,
+		hasSharedBottomBar: () => q.current.hasSharedBottomBar,
+		getViewportScrollHeight: () => q.current.viewportScrollHeight,
 		isReadyForDrag: () => {
-			let e = K.current;
+			let e = q.current;
 			return !e.isRoot && e.isActive && e.status === "COMPLETED" && e.dragStatus === "IDLE" && !!e.transition.swipeDirection && e.viewportScrollHeight < 10;
 		},
 		getPartnerBars: () => {
-			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;
+			let e = q.current, t = D.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
+			return n ? D.screen.getState().sharedBars[n] : void 0;
 		},
-		setDragStatus: ne,
+		setDragStatus: te,
 		back: () => window.history.back()
 	});
-	let J = q.current, we = (e) => J.pointerDown(e.nativeEvent), Te = (e) => J.pointerMove(e.nativeEvent), Y = (e) => J.pointerUp(e.nativeEvent);
+	let J = Ee.current, De = (e) => J.pointerDown(e.nativeEvent), Oe = (e) => J.pointerMove(e.nativeEvent), Y = (e) => J.pointerUp(e.nativeEvent);
 	o(() => {
-		let e = V.current;
+		se(H.current);
+	}, []), o(() => {
+		let e = H.current;
 		if (!e) return;
 		let t = (e) => {
 			J.shouldPreventTouch() && e.preventDefault(), e.target?.dataset.swipeAtEdgeBar === "true" && e.preventDefault();
@@ -384,38 +386,38 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 		return e.addEventListener("touchmove", t, { passive: !1 }), () => {
 			e.removeEventListener("touchmove", t);
 		};
-	}, [J]), u(() => de.driveScreenLifecycle({
+	}, [J]), u(() => N.driveScreenLifecycle({
 		getElements: () => ({
-			scope: V.current,
-			decorator: H.current,
-			bars: [U.current, W.current]
+			scope: H.current,
+			decorator: U.current,
+			bars: [W.current, K.current]
 		}),
 		transitionName: C,
-		prevTransitionName: te,
-		status: D,
+		prevTransitionName: w,
+		status: O,
 		isActive: b
 	}), [
-		de,
-		D,
+		N,
+		O,
 		b,
-		te,
+		w,
 		C
 	]), u(() => {
-		let e = U.current;
+		let e = W.current;
 		if (!e) {
-			be(0);
+			R(0);
 			return;
 		}
-		return me(e, be);
+		return me(e, R);
 	}, [a]), u(() => {
-		let e = W.current;
+		let e = K.current;
 		if (!e) {
-			xe(0);
+			B(0);
 			return;
 		}
-		return me(e, xe);
+		return me(e, B);
 	}, [s]), u(() => {
-		let { registerSharedBars: e, unregisterSharedBars: t } = E.screen.getState();
+		let { registerSharedBars: e, unregisterSharedBars: t } = D.screen.getState();
 		return e(y, {
 			topBar: !!a,
 			bottomBar: !!s
@@ -424,42 +426,52 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 		y,
 		a,
 		s,
-		E.screen
+		D.screen
+	]), u(() => {
+		let e = H.current;
+		if (!e) return;
+		let { registerScreenSurface: t, unregisterScreenSurface: n } = D.screen.getState();
+		return t(y, { opaqueBackground: de(getComputedStyle(e).backgroundColor) }), () => n(y);
+	}, [
+		y,
+		h,
+		O,
+		D.screen
 	]);
-	let Ee = b || S === k - 1, { app: De, nav: Oe } = g({
-		status: D,
-		isTopOrTopPrev: Ee,
+	let ke = b || S === A - 1, { app: Ae, nav: je } = g({
+		status: O,
+		isTopOrTopPrev: ke,
 		hasTopBar: !!a,
 		hasNavBar: !!s,
-		partnerBars: se
+		partnerBars: ae
 	}), X = ee({
-		status: D,
-		isTopOrTopPrev: Ee,
+		status: O,
+		isTopOrTopPrev: ke,
 		transitionName: C
-	}), [ke, Ae] = p({
+	}), [Me, Ne] = p({
 		key: X,
 		released: X === null
 	});
-	ke.key !== X && Ae({
+	Me.key !== X && Ne({
 		key: X,
 		released: X === null
 	});
-	let Z = X !== null && ke.key === X && !ke.released;
+	let Fe = X !== null && Me.key === X && !Me.released, Z = Fe ? !b && ce?.opaqueBackground ? "park" : "true" : "false";
 	o(() => {
-		if (Z) return _e(() => Ae((e) => e.key === X && !e.released ? {
+		if (Fe) return ve(() => Ne((e) => e.key === X && !e.released ? {
 			key: X,
 			released: !0
 		} : e));
-	}, [Z, X]);
-	let Me = ue({
-		initial: fe,
+	}, [Fe, X]);
+	let Ie = le({
+		initial: pe,
 		isActive: b,
-		status: D
+		status: O
 	});
 	return /* @__PURE__ */ ye("div", {
-		ref: B,
+		ref: we,
 		style: {
-			position: T,
+			position: E,
 			top: 0,
 			left: 0,
 			width: "100%",
@@ -471,10 +483,10 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 			overscrollBehavior: "contain"
 		},
 		children: [
-			/* @__PURE__ */ F("div", {
+			/* @__PURE__ */ L("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
-					position: T,
+					position: E,
 					top: 0,
 					left: 0,
 					width: 8,
@@ -483,94 +495,94 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				}
 			}),
 			/* @__PURE__ */ ye("div", {
-				ref: V,
+				ref: H,
 				...v,
-				onPointerDown: we,
-				onPointerMove: Te,
+				onPointerDown: De,
+				onPointerMove: Oe,
 				onPointerUp: Y,
 				onPointerCancel: Y,
 				"data-flemo-screen": !0,
 				"data-flemo-transition": C,
-				"data-flemo-status": D,
+				"data-flemo-status": O,
 				"data-flemo-active": b ? "true" : "false",
-				"data-flemo-anim-hold": Z ? "true" : "false",
+				"data-flemo-anim-hold": Z,
 				style: {
 					display: "flex",
 					flexDirection: "column",
 					height: "100%",
 					backgroundColor: h,
 					overflowY: _ ? void 0 : "auto",
-					touchAction: pe === "x" ? "pan-y" : pe === "y" ? "pan-x" : "auto",
-					...Me,
+					touchAction: he === "x" ? "pan-y" : he === "y" ? "pan-x" : "auto",
+					...Ie,
 					...v.style
 				},
 				children: [
-					!d && t && /* @__PURE__ */ F("div", {
+					!d && t && /* @__PURE__ */ L("div", {
 						style: { minHeight: t },
-						children: /* @__PURE__ */ F("div", { style: {
-							position: T,
+						children: /* @__PURE__ */ L("div", { style: {
+							position: E,
 							top: 0,
 							width: "100%",
 							minHeight: t,
 							backgroundColor: n
 						} })
 					}),
-					a && /* @__PURE__ */ F("div", { style: {
+					a && /* @__PURE__ */ L("div", { style: {
 						width: "100%",
-						minHeight: ve
+						minHeight: be
 					} }),
 					c,
-					/* @__PURE__ */ F("div", {
+					/* @__PURE__ */ L("div", {
 						style: {
 							display: "flex",
 							flexDirection: "column",
 							flexGrow: 1,
 							overflowY: _ ? "auto" : void 0,
-							...D !== "IDLE" && D !== "COMPLETED" ? {
+							...O !== "IDLE" && O !== "COMPLETED" ? {
 								transform: "translateZ(0)",
 								willChange: "transform"
 							} : null
 						},
-						children: /* @__PURE__ */ F(je.Provider, {
-							value: R,
+						children: /* @__PURE__ */ L(Pe.Provider, {
+							value: Se,
 							children: e
 						})
 					}),
 					l,
-					s && /* @__PURE__ */ F("div", { style: {
-						display: P ? "none" : void 0,
+					s && /* @__PURE__ */ L("div", { style: {
+						display: I ? "none" : void 0,
 						width: "100%",
-						minHeight: I
+						minHeight: xe
 					} }),
-					!m && r && /* @__PURE__ */ F("div", {
+					!m && r && /* @__PURE__ */ L("div", {
 						style: {
-							display: P ? "none" : void 0,
+							display: I ? "none" : void 0,
 							minHeight: r
 						},
-						children: /* @__PURE__ */ F("div", { style: {
-							position: T,
+						children: /* @__PURE__ */ L("div", { style: {
+							position: E,
 							bottom: 0,
 							width: "100%",
 							minHeight: r,
 							backgroundColor: i
 						} })
 					}),
-					/* @__PURE__ */ F("div", {
-						ref: Se,
+					/* @__PURE__ */ L("div", {
+						ref: Ce,
 						"data-flemo-layer-mount": !0
 					})
 				]
 			}),
-			a && /* @__PURE__ */ F("div", {
-				ref: U,
+			a && /* @__PURE__ */ L("div", {
+				ref: W,
 				"data-flemo-bar": "app",
 				"data-flemo-bar-transition": C,
-				"data-flemo-bar-status": D,
+				"data-flemo-bar-status": O,
 				"data-flemo-bar-active": b ? "true" : "false",
-				"data-flemo-bar-riding": De ? "true" : "false",
-				"data-flemo-anim-hold": Z ? "true" : "false",
+				"data-flemo-bar-riding": Ae ? "true" : "false",
+				"data-flemo-anim-hold": Z,
 				style: {
-					position: T,
+					position: E,
 					top: d ? 0 : t,
 					left: 0,
 					width: "100%",
@@ -578,17 +590,17 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				},
 				children: a
 			}),
-			s && /* @__PURE__ */ F("div", {
-				ref: W,
+			s && /* @__PURE__ */ L("div", {
+				ref: K,
 				"data-flemo-bar": "nav",
 				"data-flemo-bar-transition": C,
-				"data-flemo-bar-status": D,
+				"data-flemo-bar-status": O,
 				"data-flemo-bar-active": b ? "true" : "false",
-				"data-flemo-bar-riding": Oe ? "true" : "false",
-				"data-flemo-anim-hold": Z ? "true" : "false",
+				"data-flemo-bar-riding": je ? "true" : "false",
+				"data-flemo-anim-hold": Z,
 				style: {
-					display: P ? "none" : void 0,
-					position: T,
+					display: I ? "none" : void 0,
+					position: E,
 					bottom: m ? 0 : r,
 					left: 0,
 					width: "100%",
@@ -596,14 +608,14 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				},
 				children: s
 			}),
-			M && /* @__PURE__ */ F(ze, {
-				ref: H,
-				"data-flemo-anim-hold": Z ? "true" : "false"
+			P && /* @__PURE__ */ L(Ve, {
+				ref: U,
+				"data-flemo-anim-hold": Z
 			}),
-			/* @__PURE__ */ F("div", {
+			/* @__PURE__ */ L("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
-					position: T,
+					position: E,
 					top: 0,
 					right: 0,
 					width: 8,
@@ -616,9 +628,9 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 }
 //#endregion
 //#region src/screen/Screen.tsx
-function He({ children: e, ...t }) {
-	let { isActive: n, isPrev: r, zIndex: i } = z();
-	return /* @__PURE__ */ F(Re, {
+function We({ children: e, ...t }) {
+	let { isActive: n, isPrev: r, zIndex: i } = V();
+	return /* @__PURE__ */ L(Be, {
 		freeze: _({
 			isActive: n,
 			isPrev: r,
@@ -628,7 +640,7 @@ function He({ children: e, ...t }) {
 			dragStatus: $((e) => e.dragStatus),
 			replaceTransitionStatus: $((e) => e.replaceTransitionStatus)
 		}),
-		children: /* @__PURE__ */ F(Ve, {
+		children: /* @__PURE__ */ L(Ue, {
 			...t,
 			children: e
 		})
@@ -636,9 +648,9 @@ function He({ children: e, ...t }) {
 }
 //#endregion
 //#region src/screen/Part.tsx
-function Ue({ ref: e, name: t, style: n, children: r, ...i }) {
-	let { isActive: a } = z();
-	return /* @__PURE__ */ F("div", {
+function Ge({ ref: e, name: t, style: n, children: r, ...i }) {
+	let { isActive: a } = V();
+	return /* @__PURE__ */ L("div", {
 		ref: e,
 		"data-flemo-part-name": t,
 		"data-flemo-status": Q((e) => e.status),
@@ -650,20 +662,20 @@ function Ue({ ref: e, name: t, style: n, children: r, ...i }) {
 }
 //#endregion
 //#region src/stores/RouterScopeProvider.tsx
-function We({ children: e }) {
+function Ke({ children: e }) {
 	let [t] = p(() => ({
 		history: S(),
-		navigate: te(),
-		transition: se(),
-		screen: k(),
+		navigate: w(),
+		transition: ae(),
+		screen: A(),
 		driver: b(),
 		markSelfInduced: fe,
 		consume: v
 	}));
-	return /* @__PURE__ */ F(I.Provider, {
+	return /* @__PURE__ */ L(R.Provider, {
 		value: t,
 		children: e
 	});
 }
 //#endregion
-export { Me as Layer, Ue as Part, Z as Route, Ae as Router, We as RouterScopeProvider, He as Screen, R as ScreenContext, ze as ScreenDecorator, Re as ScreenFreeze, Ve as ScreenMotion, Y as Slot, y as createBrowserHistoryDriver, x as createDecorator, T as createPartTransition, E as createRawDecorator, D as createRawPartTransition, O as createRawTransition, ae as createTransition, M as partTransitionMap, G as useHistoryStore, Pe as useNavigate, Q as useNavigateStore, Le as useParams, Fe as usePathname, z as useScreen, $ as useScreenStore, Ie as useStep, L as useStores, Be as useViewportScrollHeight };
+export { Fe as Layer, Ge as Part, Ne as Route, Me as Router, Ke as RouterScopeProvider, We as Screen, B as ScreenContext, Ve as ScreenDecorator, Be as ScreenFreeze, Ue as ScreenMotion, Oe as Slot, y as createBrowserHistoryDriver, x as createDecorator, E as createPartTransition, D as createRawDecorator, O as createRawPartTransition, k as createRawTransition, M as createTransition, ge as partTransitionMap, G as useHistoryStore, Ie as useNavigate, Q as useNavigateStore, ze as useParams, Le as usePathname, V as useScreen, $ as useScreenStore, Re as useStep, z as useStores, He as useViewportScrollHeight };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flemo/react",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "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.9.0"
+    "@flemo/core": "1.10.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",