@flemo/react 1.5.3 → 1.5.5

package/dist/index.mjs

@@ -1,7 +1,7 @@
-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 { TaskManger as p, animHoldKey as te, 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 ne, createScreenSelector as A, createScreenStore as j, createStepController as M, createSwipeController as re, createTransition as ie, createTransitionEngine as ae, createTransitionStore as oe, decoratorMap as se, ensureWindowHistoryState as ce, enteringInitialStyle as le, getMatchedPathPattern as N, isServer as ue, markSelfInducedPop as de, matchesPathname as fe, observeBarHeight as pe, observeViewportScrollHeight as P, partTransitionMap as me, readStepParams as F, registerTransitionDefinitions as he, scheduleAnimHoldRelease as ge, transitionMap as I } from "@flemo/core";
-import { jsx as L, jsxs as _e } from "react/jsx-runtime";
-import { createPortal as ve } from "react-dom";
+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 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 R = r(null);
 //#endregion
@@ -13,7 +13,7 @@ function z() {
 }
 //#endregion
 //#region src/history/HistoryListener.tsx
-function ye() {
+function xe() {
 	let e = z();
 	return o(() => C({
 		stores: e,
@@ -23,7 +23,7 @@ function ye() {
 }
 //#endregion
 //#region src/screen/ScreenContext.ts
-var be = r({
+var B = r({
 	id: "",
 	isActive: !1,
 	isRoot: !0,
@@ -38,15 +38,15 @@ var be = r({
 });
 //#endregion
 //#region src/screen/useScreen.ts
-function B() {
-	return a(be);
+function V() {
+	return a(B);
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsContext.ts
-var xe = r({}), Se = 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,24 +55,19 @@ function V(e, t) {
 //#endregion
 //#region src/screen/ParamsProvider/ParamsProvider.tsx
 function H({ children: e }) {
-	let { isActive: t, params: n } = B(), { driver: r } = z(), [i, a] = ee(V, n);
+	let { isActive: t, params: n } = V(), { driver: r } = z(), [i, a] = d(we, n);
 	return o(() => {
-		if (t) return r.subscribe((e) => {
-			let t = e.state;
-			t?.step && p.addTask(async () => {
-				a({
-					type: "SET",
-					params: t.params ?? {}
-				});
-			});
-		});
+		if (t) return I(r, (e) => a({
+			type: "SET",
+			params: e
+		}));
 	}, [
 		t,
 		a,
 		r
-	]), /* @__PURE__ */ L(Se.Provider, {
+	]), /* @__PURE__ */ L(Ce.Provider, {
 		value: a,
-		children: /* @__PURE__ */ L(xe.Provider, {
+		children: /* @__PURE__ */ L(Se.Provider, {
 			value: i,
 			children: e
 		})
@@ -94,12 +89,12 @@ function G(e) {
 //#region src/renderer/Renderer.tsx
 function K({ children: e }) {
 	let t = G((e) => e.index);
-	return A(G((e) => e.histories), t).map((t) => {
-		let [r] = n.toArray(e).filter((e) => fe(e.props.path, t.pathname));
-		return /* @__PURE__ */ L(be.Provider, {
+	return ne(G((e) => e.histories), t).map((t) => {
+		let [r] = n.toArray(e).filter((e) => pe(e.props.path, t.pathname));
+		return /* @__PURE__ */ L(B.Provider, {
 			value: {
 				...t,
-				routePath: N(r.props.path, t.pathname)
+				routePath: ue(r.props.path, t.pathname)
 			},
 			children: /* @__PURE__ */ L(H, { children: r })
 		}, t.id);
@@ -108,13 +103,13 @@ function K({ children: e }) {
 //#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(() => he(e, t, n), [
+function Ee(e, t, n = []) {
+	l(() => F(e, t, n), [
 		e,
 		t,
 		n
@@ -122,8 +117,8 @@ 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 }) {
+var J = r(0), De = { contained: !0 };
+function Oe({ children: e, className: t, style: n }) {
 	return /* @__PURE__ */ L("div", {
 		className: t,
 		style: {
@@ -132,96 +127,96 @@ function Y({ children: e, className: t, style: n }) {
 			...n
 		},
 		children: /* @__PURE__ */ L(q.Provider, {
-			value: Te,
+			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: ee, className: d, style: p }) {
-	let te = a(we), m = te > 0, h = u === "memory", g = s(), _ = Ee(e), v = _ !== null, y = a(R), x = m ? null : y, S = x !== null, C = ee ?? b, [w] = f(() => h ? null : C(S ? void 0 : g)), T = !m && !h && !ue(), E = T && w ? w.readPathname() : t || "/", D = E.indexOf("?"), O = (D >= 0 ? E.slice(0, D) : E) || "/", k = T ? window.location.search : D >= 0 ? E.slice(D) : "", [A] = f(() => ne({
-		routePaths: (_ ?? n.toArray(e)).map((e) => e.props.path).flat(),
-		pathname: O,
-		search: k,
+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: k,
+		search: ne,
 		defaultTransitionName: r,
-		memory: h,
-		browserDriver: w,
-		hostedScope: x
+		memory: g,
+		browserDriver: T,
+		hostedScope: S
 	}));
-	A.transition.setState({ defaultTransitionName: r }), J(i, c, l), o(() => {
-		h || ue() || (ce(S ? null : g, r, A.history.getState().histories[0]?.params ?? {}), m && !S && 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));
 	}, [
-		h,
-		S,
-		m,
 		g,
-		O,
+		C,
+		h,
+		_,
+		k,
 		r,
 		A.history,
-		w
+		T
 	]);
-	let j = v ? e : /* @__PURE__ */ L(K, { children: e }), M = /* @__PURE__ */ L(we.Provider, {
-		value: te + 1,
-		children: /* @__PURE__ */ _e(R.Provider, {
+	let j = y ? e : /* @__PURE__ */ L(K, { children: e }), re = /* @__PURE__ */ L(J.Provider, {
+		value: m + 1,
+		children: /* @__PURE__ */ ye(R.Provider, {
 			value: A,
-			children: [!h && /* @__PURE__ */ L(ye, {}), m ? /* @__PURE__ */ L(q.Provider, {
-				value: ke,
+			children: [!g && /* @__PURE__ */ L(xe, {}), h ? /* @__PURE__ */ L(q.Provider, {
+				value: X,
 				children: j
 			}) : j]
 		})
 	});
-	return m ? /* @__PURE__ */ L("div", {
-		className: d,
+	return h ? /* @__PURE__ */ L("div", {
+		className: f,
 		style: {
 			position: "relative",
 			overflow: "hidden",
-			...p
+			...ee
 		},
-		children: M
-	}) : M;
+		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 ? ve(e, t) : e;
+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() {
+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
 	});
@@ -233,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 } = B(), t = z(), n = a(Se), { driver: r, markSelfInduced: i } = t, [s, c] = f(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(F(r.readState())), r.subscribe((e) => c(F(e.state)));
+		if (!e) return c(P(r.readState())), r.subscribe((e) => c(P(e.state)));
 	}, [e, r]);
-	let l = M({
+	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",
@@ -264,12 +259,12 @@ function Ie() {
 }
 //#endregion
 //#region src/screen/ParamsProvider/useParams.ts
-function Le() {
-	return a(xe);
+function ze() {
+	return a(Se);
 }
 //#endregion
 //#region src/screen/ScreenFreeze.tsx
-function Re({ freeze: e, children: n }) {
+function Be({ freeze: e, children: n }) {
 	return /* @__PURE__ */ L(t, {
 		mode: e ? "hidden" : "visible",
 		children: n
@@ -282,10 +277,10 @@ function Q(e) {
 }
 //#endregion
 //#region src/screen/ScreenDecorator.tsx
-function ze({ ref: e, style: t, ...n }) {
-	let { isActive: r, transitionName: i } = B(), a = d(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 } = I.get(i) ?? I.get("none"), l = se.get(s);
+	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,
@@ -307,9 +302,9 @@ function ze({ ref: e, style: t, ...n }) {
 }
 //#endregion
 //#region src/screen/useViewportScrollHeight.ts
-function Be() {
-	let [e, t] = f(0), [n, r] = f(0);
-	return o(() => P((e, n) => {
+function He() {
+	let [e, t] = p(0), [n, r] = p(0);
+	return o(() => he((e, n) => {
 		r(n), t(e);
 	}), []), {
 		viewportScrollHeight: e,
@@ -323,65 +318,67 @@ function $(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: ee, hideSystemNavigationBar: p, backgroundColor: m = "white", contentScrollable: h = !0, ..._ }) {
-	let { id: v, isActive: y, isRoot: b, zIndex: x, transitionName: S, prevTransitionName: C } = B(), { contained: w } = Ce(), T = w ? "absolute" : "fixed", E = z(), D = Q((e) => e.status), O = $((e) => e.dragStatus), k = E.screen.getState().setDragStatus, ne = E.screen.getState().setReplaceTransitionStatus, A = G((e) => e.index), j = G((e) => e.histories), M = y ? j[A - 1]?.id : j[A]?.id, ie = $((e) => M ? e.sharedBars[M] : void 0), oe = d(null);
-	oe.current ||= ae({
-		getTransitionTaskId: () => E.navigate.getState().transitionTaskId,
-		setDragStatus: k,
+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 ce = oe.current, N = I.get(S) ?? I.get("none"), { initial: ue, swipeDirection: de, decoratorName: fe } = N, P = se.get(fe), { viewportScrollHeight: me } = Be(), F = me > 0, [he, ve] = f(0), [R, ye] = f(0), [be, xe] = f(null), Se = d(null), V = d(null), H = d(null), U = d(null), W = d(null), K = d({
-		transition: N,
+	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: me,
-		isRoot: b,
-		isActive: y,
-		status: D,
-		dragStatus: O,
+		viewportScrollHeight: F,
+		isRoot: x,
+		isActive: b,
+		status: O,
+		dragStatus: k,
 		index: A
 	});
-	K.current = {
-		transition: N,
+	q.current = {
+		transition: fe,
 		decorator: P,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!s,
-		viewportScrollHeight: me,
-		isRoot: b,
-		isActive: y,
-		status: D,
-		dragStatus: O,
+		viewportScrollHeight: F,
+		isRoot: x,
+		isActive: b,
+		status: O,
+		dragStatus: k,
 		index: A
 	};
-	let q = d(null);
-	q.current ||= re({
-		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: Se.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: k,
+		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();
@@ -389,82 +386,92 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 		return e.addEventListener("touchmove", t, { passive: !1 }), () => {
 			e.removeEventListener("touchmove", t);
 		};
-	}, [J]), u(() => ce.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: S,
-		prevTransitionName: C,
-		status: D,
-		isActive: y
+		transitionName: C,
+		prevTransitionName: w,
+		status: O,
+		isActive: b
 	}), [
-		ce,
-		D,
-		y,
-		C,
-		S
+		N,
+		O,
+		b,
+		w,
+		C
 	]), u(() => {
-		let e = U.current;
+		let e = W.current;
 		if (!e) {
-			ve(0);
+			R(0);
 			return;
 		}
-		return pe(e, ve);
+		return me(e, R);
 	}, [a]), u(() => {
-		let e = W.current;
+		let e = K.current;
 		if (!e) {
-			ye(0);
+			B(0);
 			return;
 		}
-		return pe(e, ye);
+		return me(e, B);
 	}, [s]), u(() => {
-		let { registerSharedBars: e, unregisterSharedBars: t } = E.screen.getState();
-		return e(v, {
+		let { registerSharedBars: e, unregisterSharedBars: t } = D.screen.getState();
+		return e(y, {
 			topBar: !!a,
 			bottomBar: !!s
-		}), () => t(v);
+		}), () => t(y);
 	}, [
-		v,
+		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 = y || x === A - 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: ie
-	}), X = te({
-		status: D,
-		isTopOrTopPrev: Ee,
-		transitionName: S
-	}), [ke, Ae] = f({
+		partnerBars: ae
+	}), X = ee({
+		status: O,
+		isTopOrTopPrev: ke,
+		transitionName: C
+	}), [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 ge(() => 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 = le({
-		initial: ue,
-		isActive: y,
-		status: D
+	}, [Fe, X]);
+	let Ie = le({
+		initial: pe,
+		isActive: b,
+		status: O
 	});
-	return /* @__PURE__ */ _e("div", {
-		ref: Se,
+	return /* @__PURE__ */ ye("div", {
+		ref: we,
 		style: {
-			position: T,
+			position: E,
 			top: 0,
 			left: 0,
 			width: "100%",
@@ -479,7 +486,7 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 			/* @__PURE__ */ L("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
-					position: T,
+					position: E,
 					top: 0,
 					left: 0,
 					width: 8,
@@ -487,33 +494,33 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					zIndex: 1
 				}
 			}),
-			/* @__PURE__ */ _e("div", {
-				ref: V,
-				..._,
-				onPointerDown: we,
-				onPointerMove: Te,
+			/* @__PURE__ */ ye("div", {
+				ref: H,
+				...v,
+				onPointerDown: De,
+				onPointerMove: Oe,
 				onPointerUp: Y,
 				onPointerCancel: Y,
 				"data-flemo-screen": !0,
-				"data-flemo-transition": S,
-				"data-flemo-status": D,
-				"data-flemo-active": y ? "true" : "false",
-				"data-flemo-anim-hold": Z ? "true" : "false",
+				"data-flemo-transition": C,
+				"data-flemo-status": O,
+				"data-flemo-active": b ? "true" : "false",
+				"data-flemo-anim-hold": Z,
 				style: {
 					display: "flex",
 					flexDirection: "column",
 					height: "100%",
-					backgroundColor: m,
-					overflowY: h ? void 0 : "auto",
-					touchAction: de === "x" ? "pan-y" : de === "y" ? "pan-x" : "auto",
-					...Me,
-					..._.style
+					backgroundColor: h,
+					overflowY: _ ? void 0 : "auto",
+					touchAction: he === "x" ? "pan-y" : he === "y" ? "pan-x" : "auto",
+					...Ie,
+					...v.style
 				},
 				children: [
-					!ee && t && /* @__PURE__ */ L("div", {
+					!d && t && /* @__PURE__ */ L("div", {
 						style: { minHeight: t },
 						children: /* @__PURE__ */ L("div", { style: {
-							position: T,
+							position: E,
 							top: 0,
 							width: "100%",
 							minHeight: t,
@@ -522,7 +529,7 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					}),
 					a && /* @__PURE__ */ L("div", { style: {
 						width: "100%",
-						minHeight: he
+						minHeight: be
 					} }),
 					c,
 					/* @__PURE__ */ L("div", {
@@ -530,30 +537,30 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 							display: "flex",
 							flexDirection: "column",
 							flexGrow: 1,
-							overflowY: h ? "auto" : void 0,
-							...D !== "IDLE" && D !== "COMPLETED" ? {
+							overflowY: _ ? "auto" : void 0,
+							...O !== "IDLE" && O !== "COMPLETED" ? {
 								transform: "translateZ(0)",
 								willChange: "transform"
 							} : null
 						},
-						children: /* @__PURE__ */ L(je.Provider, {
-							value: be,
+						children: /* @__PURE__ */ L(Pe.Provider, {
+							value: Se,
 							children: e
 						})
 					}),
 					l,
 					s && /* @__PURE__ */ L("div", { style: {
-						display: F ? "none" : void 0,
+						display: I ? "none" : void 0,
 						width: "100%",
-						minHeight: R
+						minHeight: xe
 					} }),
-					!p && r && /* @__PURE__ */ L("div", {
+					!m && r && /* @__PURE__ */ L("div", {
 						style: {
-							display: F ? "none" : void 0,
+							display: I ? "none" : void 0,
 							minHeight: r
 						},
 						children: /* @__PURE__ */ L("div", { style: {
-							position: T,
+							position: E,
 							bottom: 0,
 							width: "100%",
 							minHeight: r,
@@ -561,22 +568,22 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 						} })
 					}),
 					/* @__PURE__ */ L("div", {
-						ref: xe,
+						ref: Ce,
 						"data-flemo-layer-mount": !0
 					})
 				]
 			}),
 			a && /* @__PURE__ */ L("div", {
-				ref: U,
+				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": De ? "true" : "false",
-				"data-flemo-anim-hold": Z ? "true" : "false",
+				"data-flemo-bar-transition": C,
+				"data-flemo-bar-status": O,
+				"data-flemo-bar-active": b ? "true" : "false",
+				"data-flemo-bar-riding": Ae ? "true" : "false",
+				"data-flemo-anim-hold": Z,
 				style: {
-					position: T,
-					top: ee ? 0 : t,
+					position: E,
+					top: d ? 0 : t,
 					left: 0,
 					width: "100%",
 					zIndex: 1
@@ -584,31 +591,31 @@ function Ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				children: a
 			}),
 			s && /* @__PURE__ */ L("div", {
-				ref: W,
+				ref: K,
 				"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": Oe ? "true" : "false",
-				"data-flemo-anim-hold": Z ? "true" : "false",
+				"data-flemo-bar-transition": C,
+				"data-flemo-bar-status": O,
+				"data-flemo-bar-active": b ? "true" : "false",
+				"data-flemo-bar-riding": je ? "true" : "false",
+				"data-flemo-anim-hold": Z,
 				style: {
-					display: F ? "none" : void 0,
-					position: T,
-					bottom: p ? 0 : r,
+					display: I ? "none" : void 0,
+					position: E,
+					bottom: m ? 0 : r,
 					left: 0,
 					width: "100%",
 					zIndex: 1
 				},
 				children: s
 			}),
-			P && /* @__PURE__ */ L(ze, {
-				ref: H,
-				"data-flemo-anim-hold": Z ? "true" : "false"
+			P && /* @__PURE__ */ L(Ve, {
+				ref: U,
+				"data-flemo-anim-hold": Z
 			}),
 			/* @__PURE__ */ L("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
-					position: T,
+					position: E,
 					top: 0,
 					right: 0,
 					width: 8,
@@ -621,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 } = B();
-	return /* @__PURE__ */ L(Re, {
+function We({ children: e, ...t }) {
+	let { isActive: n, isPrev: r, zIndex: i } = V();
+	return /* @__PURE__ */ L(Be, {
 		freeze: _({
 			isActive: n,
 			isPrev: r,
@@ -633,7 +640,7 @@ function He({ children: e, ...t }) {
 			dragStatus: $((e) => e.dragStatus),
 			replaceTransitionStatus: $((e) => e.replaceTransitionStatus)
 		}),
-		children: /* @__PURE__ */ L(Ve, {
+		children: /* @__PURE__ */ L(Ue, {
 			...t,
 			children: e
 		})
@@ -641,8 +648,8 @@ 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 } = B();
+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,
@@ -655,14 +662,14 @@ function Ue({ ref: e, name: t, style: n, children: r, ...i }) {
 }
 //#endregion
 //#region src/stores/RouterScopeProvider.tsx
-function We({ children: e }) {
-	let [t] = f(() => ({
+function Ke({ children: e }) {
+	let [t] = p(() => ({
 		history: S(),
 		navigate: w(),
-		transition: oe(),
-		screen: j(),
+		transition: ae(),
+		screen: A(),
 		driver: b(),
-		markSelfInduced: de,
+		markSelfInduced: fe,
 		consume: v
 	}));
 	return /* @__PURE__ */ L(R.Provider, {
@@ -671,4 +678,4 @@ function We({ children: e }) {
 	});
 }
 //#endregion
-export { Me as Layer, Ue as Part, Z as Route, Ae as Router, We as RouterScopeProvider, He as Screen, be as ScreenContext, ze as ScreenDecorator, Re as ScreenFreeze, Ve as ScreenMotion, Y as Slot, y as createBrowserHistoryDriver, x as createDecorator, E as createPartTransition, D as createRawDecorator, O as createRawPartTransition, k as createRawTransition, ie as createTransition, me as partTransitionMap, G as useHistoryStore, Pe as useNavigate, Q as useNavigateStore, Le as useParams, Fe as usePathname, B as useScreen, $ as useScreenStore, Ie as useStep, z 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/dist/navigate/__tests__/useStepChrome.test.d.ts

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

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

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

package/package.json

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

package/dist/screen/ParamsProvider/useParamsDispatch.d.ts

@@ -1 +0,0 @@
-export default function useParamsDispatch(): import('react').Dispatch<import('./ParamsDispatchContext').ParamsDispatchContextType>;