@flemo/react 1.5.4 → 1.5.6

package/dist/index.mjs

@@ -1,21 +1,21 @@
 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 { createPortal as be } from "react-dom";
+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 P, matchesPathname as fe, observeBarHeight as pe, observeViewportScrollHeight as me, partTransitionMap as he, readStepParams as F, registerTransitionDefinitions as I, resolveTransition as ge, scheduleAnimHoldRelease as _e, subscribeStepParamsRestore as L } from "@flemo/core";
+import { jsx as R, jsxs as ve } from "react/jsx-runtime";
+import { createPortal as ye } from "react-dom";
 //#region src/stores/StoreContext.ts
-var I = r(null);
+var z = r(null);
 //#endregion
 //#region src/stores/useStores.ts
-function L() {
-	let e = a(I);
+function B() {
+	let e = a(z);
 	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();
-	return o(() => C({
+function be() {
+	let e = B();
+	return o(() => S({
 		stores: e,
 		driver: e.driver,
 		consume: e.consume
@@ -23,7 +23,7 @@ function xe() {
 }
 //#endregion
 //#region src/screen/ScreenContext.ts
-var R = r({
+var V = 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 H() {
+	return a(V);
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsContext.ts
-var Se = r({}), B = r(() => {});
+var xe = r({}), Se = r(() => {});
 //#endregion
 //#region src/screen/ParamsProvider/ParamsReducer.ts
-function V(e, t) {
+function Ce(e, t) {
 	switch (t.type) {
 		case "SET": return t.params;
 		default: return e;
@@ -54,10 +54,10 @@ 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);
+function U({ children: e }) {
+	let { isActive: t, params: n } = H(), { driver: r } = B(), [i, a] = d(Ce, n);
 	return o(() => {
-		if (t) return ve(r, (e) => a({
+		if (t) return L(r, (e) => a({
 			type: "SET",
 			params: e
 		}));
@@ -65,9 +65,9 @@ function H({ children: e }) {
 		t,
 		a,
 		r
-	]), /* @__PURE__ */ F(B.Provider, {
+	]), /* @__PURE__ */ R(Se.Provider, {
 		value: a,
-		children: /* @__PURE__ */ F(Se.Provider, {
+		children: /* @__PURE__ */ R(xe.Provider, {
 			value: i,
 			children: e
 		})
@@ -75,41 +75,41 @@ function H({ 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 U = (e) => e;
-function W(t, n = U) {
+var W = (e) => e;
+function G(t, n = W) {
 	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 G(e) {
-	return W(L().history, e);
+function K(e) {
+	return G(B().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) => {
-		let [r] = n.toArray(e).filter((e) => pe(e.props.path, t.pathname));
-		return /* @__PURE__ */ F(R.Provider, {
+function q({ children: e }) {
+	let t = K((e) => e.index);
+	return k(K((e) => e.histories), t).map((t) => {
+		let [r] = n.toArray(e).filter((e) => fe(e.props.path, t.pathname));
+		return /* @__PURE__ */ R(V.Provider, {
 			value: {
 				...t,
-				routePath: de(r.props.path, t.pathname)
+				routePath: le(r.props.path, t.pathname)
 			},
-			children: /* @__PURE__ */ F(H, { children: r })
+			children: /* @__PURE__ */ R(U, { children: r })
 		}, t.id);
 	});
 }
 //#endregion
 //#region src/screen/ScreenViewportContext.ts
-var q = r({ contained: !1 });
-function Ce() {
-	return a(q);
+var J = r({ contained: !1 });
+function we() {
+	return a(J);
 }
 //#endregion
 //#region src/transition/styles.ts
-function J(e, t, n = []) {
-	l(() => P(e, t, n), [
+function Te(e, t, n = []) {
+	l(() => I(e, t, n), [
 		e,
 		t,
 		n
@@ -117,106 +117,108 @@ 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 Y = r(0), Ee = { contained: !0 };
+function De({ children: e, className: t, style: n }) {
+	return /* @__PURE__ */ R("div", {
 		className: t,
 		style: {
 			position: "relative",
 			overflow: "hidden",
 			...n
 		},
-		children: /* @__PURE__ */ F(q.Provider, {
-			value: Te,
-			children: /* @__PURE__ */ F(K, { children: e })
+		children: /* @__PURE__ */ R(J.Provider, {
+			value: Ee,
+			children: /* @__PURE__ */ R(q, { children: e })
 		})
 	});
 }
 //#endregion
 //#region src/Router.tsx
-function Ee(e) {
+function Oe(e) {
 	let t = null;
 	return n.forEach(e, (e) => {
 		if (t || !i(e)) return;
-		if (e.type === Y) {
+		if (e.type === De) {
 			t = n.toArray(e.props.children).filter(i);
 			return;
 		}
 		let r = e.props.children;
 		if (r) {
-			let e = Ee(r);
+			let e = Oe(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({
-		routePaths: (v ?? n.toArray(e)).map((e) => e.props.path).flat(),
-		pathname: O,
-		search: re,
+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(Y), h = m > 0, g = u === "memory", _ = s(), v = a(V), y = h && v.id ? `_F_${v.id}_` : _, x = Oe(e), te = x !== null, S = a(z), 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({
+		routePaths: (x ?? n.toArray(e)).map((e) => e.props.path).flat(),
+		pathname: A,
+		search: j,
 		defaultTransitionName: r,
 		memory: g,
-		browserDriver: w,
-		hostedScope: S
+		browserDriver: E,
+		hostedScope: C
 	}));
-	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));
+	M.transition.setState({ defaultTransitionName: r }), Te(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);
 	}, [
 		g,
-		C,
+		w,
 		h,
-		_,
-		O,
+		y,
+		A,
 		r,
-		k.history,
-		w
+		M.history,
+		E
 	]);
-	let A = y ? e : /* @__PURE__ */ F(K, { children: e }), ie = /* @__PURE__ */ F(we.Provider, {
+	let N = te ? e : /* @__PURE__ */ R(q, { children: e }), re = /* @__PURE__ */ R(Y.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__ */ ve(z.Provider, {
+			value: M,
+			children: [!g && /* @__PURE__ */ R(be, {}), h ? /* @__PURE__ */ R(J.Provider, {
+				value: X,
+				children: N
+			}) : N]
 		})
 	});
-	return h ? /* @__PURE__ */ F("div", {
+	return h ? /* @__PURE__ */ R("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);
-	return t ? be(e, t) : e;
+function Fe({ children: e }) {
+	let t = a(Pe);
+	return t ? ye(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 = B(), t = w({
 		stores: e,
-		buildPathname: (e, t) => Ne(e, t),
+		buildPathname: (e, t) => Z(e, t),
 		driver: e.driver,
 		markSelfInduced: e.markSelfInduced
 	});
@@ -228,21 +230,21 @@ function Pe() {
 }
 //#endregion
 //#region src/navigate/usePathname.ts
-function Fe() {
-	return G((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
+function Le() {
+	return K((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 } = H(), t = B(), n = a(Se), { 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(F(r.readState())), r.subscribe((e) => c(F(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 +261,13 @@ function Ie() {
 }
 //#endregion
 //#region src/screen/ParamsProvider/useParams.ts
-function Le() {
-	return a(Se);
+function ze() {
+	return a(xe);
 }
 //#endregion
 //#region src/screen/ScreenFreeze.tsx
-function Re({ freeze: e, children: n }) {
-	return /* @__PURE__ */ F(t, {
+function Be({ freeze: e, children: n }) {
+	return /* @__PURE__ */ R(t, {
 		mode: e ? "hidden" : "visible",
 		children: n
 	});
@@ -273,15 +275,15 @@ function Re({ freeze: e, children: n }) {
 //#endregion
 //#region src/stores/useNavigateStore.ts
 function Q(e) {
-	return W(L().navigate, e);
+	return G(B().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 } = H(), 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 } = ge(i), l = ae.get(s);
+	return l ? /* @__PURE__ */ R("div", {
 		ref: a,
 		"data-flemo-decorator": !0,
 		"data-flemo-decorator-name": l.name,
@@ -302,9 +304,9 @@ 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) => {
+	return o(() => me((e, n) => {
 		r(n), t(e);
 	}), []), {
 		viewportScrollHeight: e,
@@ -314,106 +316,108 @@ function Be() {
 //#endregion
 //#region src/stores/useScreenStore.ts
 function $(e) {
-	return W(L().screen, e);
+	return G(B().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({
+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: te, transitionName: S, prevTransitionName: C } = H(), { contained: w } = we(), T = w ? "absolute" : "fixed", E = B(), 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({
 		getTransitionTaskId: () => E.navigate.getState().transitionTaskId,
 		setDragStatus: ne,
-		setReplaceTransitionStatus: re
+		setReplaceTransitionStatus: k
 	});
-	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 de = le.current, P = ge(S), { initial: fe, swipeDirection: me, decoratorName: he } = P, F = ae.get(he), { viewportScrollHeight: I } = He(), L = I > 0, [ye, z] = p(0), [be, V] = p(0), [xe, Se] = p(null), Ce = f(null), U = f(null), W = f(null), G = f(null), q = f(null), J = f({
+		transition: P,
+		decorator: F,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!s,
-		viewportScrollHeight: N,
+		viewportScrollHeight: I,
 		isRoot: x,
 		isActive: b,
 		status: D,
 		dragStatus: O,
-		index: k
+		index: A
 	});
-	K.current = {
-		transition: j,
-		decorator: M,
+	J.current = {
+		transition: P,
+		decorator: F,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!s,
-		viewportScrollHeight: N,
+		viewportScrollHeight: I,
 		isRoot: x,
 		isActive: b,
 		status: D,
 		dragStatus: O,
-		index: k
+		index: A
 	};
-	let q = f(null);
-	q.current ||= ie({
-		getTransition: () => K.current.transition,
-		getDecorator: () => K.current.decorator,
+	let Te = f(null);
+	Te.current ||= M({
+		getTransition: () => J.current.transition,
+		getDecorator: () => J.current.decorator,
 		getElements: () => ({
-			scope: V.current,
-			screenContainer: B.current,
-			decorator: H.current,
-			sharedTopBar: U.current,
-			sharedBottomBar: W.current
+			scope: U.current,
+			screenContainer: Ce.current,
+			decorator: W.current,
+			sharedTopBar: G.current,
+			sharedBottomBar: q.current
 		}),
-		hasSharedTopBar: () => K.current.hasSharedTopBar,
-		hasSharedBottomBar: () => K.current.hasSharedBottomBar,
-		getViewportScrollHeight: () => K.current.viewportScrollHeight,
+		hasSharedTopBar: () => J.current.hasSharedTopBar,
+		hasSharedBottomBar: () => J.current.hasSharedBottomBar,
+		getViewportScrollHeight: () => J.current.viewportScrollHeight,
 		isReadyForDrag: () => {
-			let e = K.current;
+			let e = J.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;
+			let e = J.current, t = E.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
 			return n ? E.screen.getState().sharedBars[n] : void 0;
 		},
 		setDragStatus: ne,
 		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 Y = Te.current, Ee = (e) => Y.pointerDown(e.nativeEvent), De = (e) => Y.pointerMove(e.nativeEvent), Oe = (e) => Y.pointerUp(e.nativeEvent);
 	o(() => {
-		let e = V.current;
+		oe(U.current);
+	}, []), o(() => {
+		let e = U.current;
 		if (!e) return;
 		let t = (e) => {
-			J.shouldPreventTouch() && e.preventDefault(), e.target?.dataset.swipeAtEdgeBar === "true" && e.preventDefault();
+			Y.shouldPreventTouch() && e.preventDefault(), e.target?.dataset.swipeAtEdgeBar === "true" && e.preventDefault();
 		};
 		return e.addEventListener("touchmove", t, { passive: !1 }), () => {
 			e.removeEventListener("touchmove", t);
 		};
-	}, [J]), u(() => de.driveScreenLifecycle({
+	}, [Y]), u(() => de.driveScreenLifecycle({
 		getElements: () => ({
-			scope: V.current,
-			decorator: H.current,
-			bars: [U.current, W.current]
+			scope: U.current,
+			decorator: W.current,
+			bars: [G.current, q.current]
 		}),
-		transitionName: C,
-		prevTransitionName: te,
+		transitionName: S,
+		prevTransitionName: C,
 		status: D,
 		isActive: b
 	}), [
 		de,
 		D,
 		b,
-		te,
-		C
+		C,
+		S
 	]), u(() => {
-		let e = U.current;
+		let e = G.current;
 		if (!e) {
-			be(0);
+			z(0);
 			return;
 		}
-		return me(e, be);
+		return pe(e, z);
 	}, [a]), u(() => {
-		let e = W.current;
+		let e = q.current;
 		if (!e) {
-			xe(0);
+			V(0);
 			return;
 		}
-		return me(e, xe);
+		return pe(e, V);
 	}, [s]), u(() => {
 		let { registerSharedBars: e, unregisterSharedBars: t } = E.screen.getState();
 		return e(y, {
@@ -425,39 +429,49 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 		a,
 		s,
 		E.screen
+	]), u(() => {
+		let e = U.current;
+		if (!e) return;
+		let { registerScreenSurface: t, unregisterScreenSurface: n } = E.screen.getState();
+		return t(y, { opaqueBackground: ue(getComputedStyle(e).backgroundColor) }), () => n(y);
+	}, [
+		y,
+		h,
+		D,
+		E.screen
 	]);
-	let Ee = b || S === k - 1, { app: De, nav: Oe } = g({
+	let ke = b || te === A - 1, { app: Ae, nav: je } = g({
 		status: D,
-		isTopOrTopPrev: Ee,
+		isTopOrTopPrev: ke,
 		hasTopBar: !!a,
 		hasNavBar: !!s,
-		partnerBars: se
+		partnerBars: ie
 	}), X = ee({
 		status: D,
-		isTopOrTopPrev: Ee,
-		transitionName: C
-	}), [ke, Ae] = p({
+		isTopOrTopPrev: ke,
+		transitionName: S
+	}), [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 && se?.opaqueBackground ? "park" : "true" : "false";
 	o(() => {
-		if (Z) return _e(() => Ae((e) => e.key === X && !e.released ? {
+		if (Fe) return _e(() => Ne((e) => e.key === X && !e.released ? {
 			key: X,
 			released: !0
 		} : e));
-	}, [Z, X]);
-	let Me = ue({
+	}, [Fe, X]);
+	let Ie = ce({
 		initial: fe,
 		isActive: b,
 		status: D
 	});
-	return /* @__PURE__ */ ye("div", {
-		ref: B,
+	return /* @__PURE__ */ ve("div", {
+		ref: Ce,
 		style: {
 			position: T,
 			top: 0,
@@ -471,7 +485,7 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 			overscrollBehavior: "contain"
 		},
 		children: [
-			/* @__PURE__ */ F("div", {
+			/* @__PURE__ */ R("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
 					position: T,
@@ -482,32 +496,32 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					zIndex: 1
 				}
 			}),
-			/* @__PURE__ */ ye("div", {
-				ref: V,
+			/* @__PURE__ */ ve("div", {
+				ref: U,
 				...v,
-				onPointerDown: we,
-				onPointerMove: Te,
-				onPointerUp: Y,
-				onPointerCancel: Y,
+				onPointerDown: Ee,
+				onPointerMove: De,
+				onPointerUp: Oe,
+				onPointerCancel: Oe,
 				"data-flemo-screen": !0,
-				"data-flemo-transition": C,
+				"data-flemo-transition": S,
 				"data-flemo-status": D,
 				"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: me === "x" ? "pan-y" : me === "y" ? "pan-x" : "auto",
+					...Ie,
 					...v.style
 				},
 				children: [
-					!d && t && /* @__PURE__ */ F("div", {
+					!d && t && /* @__PURE__ */ R("div", {
 						style: { minHeight: t },
-						children: /* @__PURE__ */ F("div", { style: {
+						children: /* @__PURE__ */ R("div", { style: {
 							position: T,
 							top: 0,
 							width: "100%",
@@ -515,12 +529,12 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 							backgroundColor: n
 						} })
 					}),
-					a && /* @__PURE__ */ F("div", { style: {
+					a && /* @__PURE__ */ R("div", { style: {
 						width: "100%",
-						minHeight: ve
+						minHeight: ye
 					} }),
 					c,
-					/* @__PURE__ */ F("div", {
+					/* @__PURE__ */ R("div", {
 						style: {
 							display: "flex",
 							flexDirection: "column",
@@ -531,23 +545,23 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 								willChange: "transform"
 							} : null
 						},
-						children: /* @__PURE__ */ F(je.Provider, {
-							value: R,
+						children: /* @__PURE__ */ R(Pe.Provider, {
+							value: xe,
 							children: e
 						})
 					}),
 					l,
-					s && /* @__PURE__ */ F("div", { style: {
-						display: P ? "none" : void 0,
+					s && /* @__PURE__ */ R("div", { style: {
+						display: L ? "none" : void 0,
 						width: "100%",
-						minHeight: I
+						minHeight: be
 					} }),
-					!m && r && /* @__PURE__ */ F("div", {
+					!m && r && /* @__PURE__ */ R("div", {
 						style: {
-							display: P ? "none" : void 0,
+							display: L ? "none" : void 0,
 							minHeight: r
 						},
-						children: /* @__PURE__ */ F("div", { style: {
+						children: /* @__PURE__ */ R("div", { style: {
 							position: T,
 							bottom: 0,
 							width: "100%",
@@ -555,20 +569,20 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 							backgroundColor: i
 						} })
 					}),
-					/* @__PURE__ */ F("div", {
+					/* @__PURE__ */ R("div", {
 						ref: Se,
 						"data-flemo-layer-mount": !0
 					})
 				]
 			}),
-			a && /* @__PURE__ */ F("div", {
-				ref: U,
+			a && /* @__PURE__ */ R("div", {
+				ref: G,
 				"data-flemo-bar": "app",
-				"data-flemo-bar-transition": C,
+				"data-flemo-bar-transition": S,
 				"data-flemo-bar-status": D,
 				"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,
 					top: d ? 0 : t,
@@ -578,16 +592,16 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				},
 				children: a
 			}),
-			s && /* @__PURE__ */ F("div", {
-				ref: W,
+			s && /* @__PURE__ */ R("div", {
+				ref: q,
 				"data-flemo-bar": "nav",
-				"data-flemo-bar-transition": C,
+				"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-anim-hold": Z ? "true" : "false",
+				"data-flemo-bar-riding": je ? "true" : "false",
+				"data-flemo-anim-hold": Z,
 				style: {
-					display: P ? "none" : void 0,
+					display: L ? "none" : void 0,
 					position: T,
 					bottom: m ? 0 : r,
 					left: 0,
@@ -596,11 +610,11 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				},
 				children: s
 			}),
-			M && /* @__PURE__ */ F(ze, {
-				ref: H,
-				"data-flemo-anim-hold": Z ? "true" : "false"
+			F && /* @__PURE__ */ R(Ve, {
+				ref: W,
+				"data-flemo-anim-hold": Z
 			}),
-			/* @__PURE__ */ F("div", {
+			/* @__PURE__ */ R("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
 					position: T,
@@ -616,19 +630,19 @@ 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 } = H();
+	return /* @__PURE__ */ R(Be, {
 		freeze: _({
 			isActive: n,
 			isPrev: r,
 			zIndex: i,
-			index: G((e) => e.index),
+			index: K((e) => e.index),
 			status: Q((e) => e.status),
 			dragStatus: $((e) => e.dragStatus),
 			replaceTransitionStatus: $((e) => e.replaceTransitionStatus)
 		}),
-		children: /* @__PURE__ */ F(Ve, {
+		children: /* @__PURE__ */ R(Ue, {
 			...t,
 			children: e
 		})
@@ -636,9 +650,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 } = H();
+	return /* @__PURE__ */ R("div", {
 		ref: e,
 		"data-flemo-part-name": t,
 		"data-flemo-status": Q((e) => e.status),
@@ -650,20 +664,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(),
+		history: te(),
+		navigate: C(),
+		transition: ie(),
+		screen: A(),
 		driver: b(),
-		markSelfInduced: fe,
+		markSelfInduced: P,
 		consume: v
 	}));
-	return /* @__PURE__ */ F(I.Provider, {
+	return /* @__PURE__ */ R(z.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, V as ScreenContext, Ve as ScreenDecorator, Be as ScreenFreeze, Ue as ScreenMotion, De as Slot, y as createBrowserHistoryDriver, x as createDecorator, T as createPartTransition, E as createRawDecorator, D as createRawPartTransition, O as createRawTransition, N as createTransition, he as partTransitionMap, K as useHistoryStore, Ie as useNavigate, Q as useNavigateStore, ze as useParams, Le as usePathname, H as useScreen, $ as useScreenStore, Re as useStep, B as useStores, He as useViewportScrollHeight };

package/package.json

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