@flemo/react 1.5.8 → 1.6.0

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 export { default as Router } from './Router';
 export { default as Route, type RegisterRoute } from './Route';
 export { default as Slot, type SlotProps } from './Slot';
-export { default as Layer } from './screen/Layer';
 export { default as useNavigate } from './navigate/useNavigate';
 export { default as usePathname } from './navigate/usePathname';
 export { default as useStep } from './navigate/useStep';

package/dist/index.mjs

@@ -1,20 +1,19 @@
 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 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";
+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";
 //#region src/stores/StoreContext.ts
-var z = r(null);
+var R = r(null);
 //#endregion
 //#region src/stores/useStores.ts
-function B() {
-	let e = a(z);
+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 be() {
-	let e = B();
+	let e = z();
 	return o(() => S({
 		stores: e,
 		driver: e.driver,
@@ -23,7 +22,7 @@ function be() {
 }
 //#endregion
 //#region src/screen/ScreenContext.ts
-var V = r({
+var B = r({
 	id: "",
 	isActive: !1,
 	isRoot: !0,
@@ -38,15 +37,15 @@ var V = r({
 });
 //#endregion
 //#region src/screen/useScreen.ts
-function H() {
-	return a(V);
+function V() {
+	return a(B);
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsContext.ts
-var xe = r({}), Se = r(() => {});
+var H = r({}), xe = r(() => {});
 //#endregion
 //#region src/screen/ParamsProvider/ParamsReducer.ts
-function Ce(e, t) {
+function U(e, t) {
 	switch (t.type) {
 		case "SET": return t.params;
 		default: return e;
@@ -54,10 +53,10 @@ function Ce(e, t) {
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsProvider.tsx
-function U({ children: e }) {
-	let { isActive: t, params: n } = H(), { driver: r } = B(), [i, a] = d(Ce, n);
+function Se({ children: e }) {
+	let { isActive: t, params: n } = V(), { driver: r } = z(), [i, a] = d(U, n);
 	return o(() => {
-		if (t) return L(r, (e) => a({
+		if (t) return I(r, (e) => a({
 			type: "SET",
 			params: e
 		}));
@@ -65,9 +64,9 @@ function U({ children: e }) {
 		t,
 		a,
 		r
-	]), /* @__PURE__ */ R(Se.Provider, {
+	]), /* @__PURE__ */ L(xe.Provider, {
 		value: a,
-		children: /* @__PURE__ */ R(xe.Provider, {
+		children: /* @__PURE__ */ L(H.Provider, {
 			value: i,
 			children: e
 		})
@@ -83,33 +82,33 @@ function G(t, n = W) {
 //#endregion
 //#region src/stores/useHistoryStore.ts
 function K(e) {
-	return G(B().history, e);
+	return G(z().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) => {
-		let [r] = n.toArray(e).filter((e) => fe(e.props.path, t.pathname));
-		return /* @__PURE__ */ R(V.Provider, {
+		let [r] = n.toArray(e).filter((e) => pe(e.props.path, t.pathname));
+		return /* @__PURE__ */ L(B.Provider, {
 			value: {
 				...t,
 				routePath: le(r.props.path, t.pathname)
 			},
-			children: /* @__PURE__ */ R(U, { children: r })
+			children: /* @__PURE__ */ L(Se, { children: r })
 		}, t.id);
 	});
 }
 //#endregion
 //#region src/screen/ScreenViewportContext.ts
 var J = r({ contained: !1 });
-function we() {
+function Ce() {
 	return a(J);
 }
 //#endregion
 //#region src/transition/styles.ts
-function Te(e, t, n = []) {
-	l(() => I(e, t, n), [
+function Y(e, t, n = []) {
+	l(() => F(e, t, n), [
 		e,
 		t,
 		n
@@ -117,41 +116,41 @@ function Te(e, t, n = []) {
 }
 //#endregion
 //#region src/RouterDepthContext.ts
-var Y = r(0), Ee = { contained: !0 };
-function De({ children: e, className: t, style: n }) {
-	return /* @__PURE__ */ R("div", {
+var we = r(0), Te = { contained: !0 };
+function Ee({ children: e, className: t, style: n }) {
+	return /* @__PURE__ */ L("div", {
 		className: t,
 		style: {
 			position: "relative",
 			overflow: "hidden",
 			...n
 		},
-		children: /* @__PURE__ */ R(J.Provider, {
-			value: Ee,
-			children: /* @__PURE__ */ R(q, { children: e })
+		children: /* @__PURE__ */ L(J.Provider, {
+			value: Te,
+			children: /* @__PURE__ */ L(q, { children: e })
 		})
 	});
 }
 //#endregion
 //#region src/Router.tsx
-function Oe(e) {
+function De(e) {
 	let t = null;
 	return n.forEach(e, (e) => {
 		if (t || !i(e)) return;
-		if (e.type === De) {
+		if (e.type === Ee) {
 			t = n.toArray(e.props.children).filter(i);
 			return;
 		}
 		let r = e.props.children;
 		if (r) {
-			let e = Oe(r);
+			let e = De(r);
 			e && (t = e);
 		}
 	}), t;
 }
-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({
+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({
 		routePaths: (x ?? n.toArray(e)).map((e) => e.props.path).flat(),
 		pathname: A,
 		search: j,
@@ -162,7 +161,7 @@ function Me({ children: e, initPath: t = "/", defaultTransitionName: r = "cupert
 	}));
 	M.transition.setState({ defaultTransitionName: r }), o(() => (M.life.alive = !0, () => {
 		M.life.alive = !1;
-	}), [M]), Te(i, c, l), o(() => {
+	}), [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);
@@ -176,17 +175,17 @@ function Me({ children: e, initPath: t = "/", defaultTransitionName: r = "cupert
 		M.history,
 		E
 	]);
-	let N = te ? e : /* @__PURE__ */ R(q, { children: e }), re = /* @__PURE__ */ R(Y.Provider, {
+	let N = te ? e : /* @__PURE__ */ L(q, { children: e }), re = /* @__PURE__ */ L(we.Provider, {
 		value: m + 1,
-		children: /* @__PURE__ */ ve(z.Provider, {
+		children: /* @__PURE__ */ ye(R.Provider, {
 			value: M,
-			children: [!g && /* @__PURE__ */ R(be, {}), h ? /* @__PURE__ */ R(J.Provider, {
-				value: X,
+			children: [!g && /* @__PURE__ */ L(be, {}), h ? /* @__PURE__ */ L(J.Provider, {
+				value: Ae,
 				children: N
 			}) : N]
 		})
 	});
-	return h ? /* @__PURE__ */ R("div", {
+	return h ? /* @__PURE__ */ L("div", {
 		className: f,
 		style: {
 			position: "relative",
@@ -198,27 +197,18 @@ function Me({ children: e, initPath: t = "/", defaultTransitionName: r = "cupert
 }
 //#endregion
 //#region src/Route.tsx
-function Ne({ element: e }) {
+function Me({ element: e }) {
 	return e;
 }
 //#endregion
-//#region src/screen/LayerMountContext.ts
-var Pe = r(null);
-//#endregion
-//#region src/screen/Layer.tsx
-function Fe({ children: e }) {
-	let t = a(Pe);
-	return t ? ye(e, t) : e;
-}
-//#endregion
 //#region src/utils/buildRoutePath.ts
 function Z(e, t) {
 	return h(e, t);
 }
 //#endregion
 //#region src/navigate/useNavigate.ts
-function Ie() {
-	let e = B(), t = w({
+function Ne() {
+	let e = z(), t = w({
 		stores: e,
 		buildPathname: (e, t) => Z(e, t),
 		driver: e.driver,
@@ -232,15 +222,15 @@ function Ie() {
 }
 //#endregion
 //#region src/navigate/usePathname.ts
-function Le() {
+function Pe() {
 	return K((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
 }
 //#endregion
 //#region src/navigate/useStep.ts
-function Re() {
-	let { routePath: e } = H(), t = B(), n = a(Se), { driver: r, markSelfInduced: i } = t, [s, c] = p(null);
+function Fe() {
+	let { routePath: e } = V(), t = z(), n = a(xe), { 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 = j({
 		stores: t,
@@ -263,13 +253,13 @@ function Re() {
 }
 //#endregion
 //#region src/screen/ParamsProvider/useParams.ts
-function ze() {
-	return a(xe);
+function Ie() {
+	return a(H);
 }
 //#endregion
 //#region src/screen/ScreenFreeze.tsx
-function Be({ freeze: e, children: n }) {
-	return /* @__PURE__ */ R(t, {
+function Le({ freeze: e, children: n }) {
+	return /* @__PURE__ */ L(t, {
 		mode: e ? "hidden" : "visible",
 		children: n
 	});
@@ -277,15 +267,15 @@ function Be({ freeze: e, children: n }) {
 //#endregion
 //#region src/stores/useNavigateStore.ts
 function Q(e) {
-	return G(B().navigate, e);
+	return G(z().navigate, e);
 }
 //#endregion
 //#region src/screen/ScreenDecorator.tsx
-function Ve({ ref: e, style: t, ...n }) {
-	let { isActive: r, transitionName: i } = H(), a = f(null);
+function Re({ 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 = ae.get(s);
-	return l ? /* @__PURE__ */ R("div", {
+	let o = Q((e) => e.status), { decoratorName: s } = _e(i), l = ae.get(s);
+	return l ? /* @__PURE__ */ L("div", {
 		ref: a,
 		"data-flemo-decorator": !0,
 		"data-flemo-decorator-name": l.name,
@@ -306,9 +296,9 @@ function Ve({ ref: e, style: t, ...n }) {
 }
 //#endregion
 //#region src/screen/useViewportScrollHeight.ts
-function He() {
+function ze() {
 	let [e, t] = p(0), [n, r] = p(0);
-	return o(() => me((e, n) => {
+	return o(() => he((e, n) => {
 		r(n), t(e);
 	}), []), {
 		viewportScrollHeight: e,
@@ -318,67 +308,67 @@ function He() {
 //#endregion
 //#region src/stores/useScreenStore.ts
 function $(e) {
-	return G(B().screen, e);
+	return G(z().screen, e);
 }
 //#endregion
 //#region src/screen/ScreenMotion.tsx
-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);
+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({
 		getTransitionTaskId: () => E.navigate.getState().transitionTaskId,
 		setDragStatus: ne,
 		setReplaceTransitionStatus: k
 	});
-	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,
+	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,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!s,
-		viewportScrollHeight: I,
+		viewportScrollHeight: F,
 		isRoot: x,
 		isActive: b,
 		status: D,
 		dragStatus: O,
 		index: A
 	});
-	J.current = {
-		transition: P,
-		decorator: F,
+	q.current = {
+		transition: fe,
+		decorator: P,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!s,
-		viewportScrollHeight: I,
+		viewportScrollHeight: F,
 		isRoot: x,
 		isActive: b,
 		status: D,
 		dragStatus: O,
 		index: A
 	};
-	let Te = f(null);
-	Te.current ||= M({
-		getTransition: () => J.current.transition,
-		getDecorator: () => J.current.decorator,
+	let J = f(null);
+	J.current ||= M({
+		getTransition: () => q.current.transition,
+		getDecorator: () => q.current.decorator,
 		getElements: () => ({
 			scope: U.current,
-			screenContainer: Ce.current,
-			decorator: W.current,
-			sharedTopBar: G.current,
-			sharedBottomBar: q.current
+			screenContainer: xe.current,
+			decorator: Se.current,
+			sharedTopBar: W.current,
+			sharedBottomBar: G.current
 		}),
-		hasSharedTopBar: () => J.current.hasSharedTopBar,
-		hasSharedBottomBar: () => J.current.hasSharedBottomBar,
-		getViewportScrollHeight: () => J.current.viewportScrollHeight,
+		hasSharedTopBar: () => q.current.hasSharedTopBar,
+		hasSharedBottomBar: () => q.current.hasSharedBottomBar,
+		getViewportScrollHeight: () => q.current.viewportScrollHeight,
 		isReadyForDrag: () => {
-			let e = J.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 = J.current, t = E.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
+			let e = q.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 Y = Te.current, Ee = (e) => Y.pointerDown(e.nativeEvent), De = (e) => Y.pointerMove(e.nativeEvent), Oe = (e) => Y.pointerUp(e.nativeEvent);
+	let Y = J.current, we = (e) => Y.pointerDown(e.nativeEvent), Te = (e) => Y.pointerMove(e.nativeEvent), Ee = (e) => Y.pointerUp(e.nativeEvent);
 	o(() => {
 		oe(U.current);
 	}, []), o(() => {
@@ -393,8 +383,8 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 	}, [Y]), u(() => de.driveScreenLifecycle({
 		getElements: () => ({
 			scope: U.current,
-			decorator: W.current,
-			bars: [G.current, q.current]
+			decorator: Se.current,
+			bars: [W.current, G.current]
 		}),
 		transitionName: S,
 		prevTransitionName: C,
@@ -407,19 +397,19 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 		C,
 		S
 	]), u(() => {
-		let e = G.current;
+		let e = W.current;
 		if (!e) {
-			z(0);
+			be(0);
 			return;
 		}
-		return pe(e, z);
+		return me(e, be);
 	}, [a]), u(() => {
-		let e = q.current;
+		let e = G.current;
 		if (!e) {
-			V(0);
+			H(0);
 			return;
 		}
-		return pe(e, V);
+		return me(e, H);
 	}, [s]), u(() => {
 		let { registerSharedBars: e, unregisterSharedBars: t } = E.screen.getState();
 		return e(y, {
@@ -442,38 +432,38 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 		D,
 		E.screen
 	]);
-	let ke = b || te === A - 1, { app: Ae, nav: je } = g({
+	let De = b || te === A - 1, { app: Oe, nav: ke } = g({
 		status: D,
-		isTopOrTopPrev: ke,
+		isTopOrTopPrev: De,
 		hasTopBar: !!a,
 		hasNavBar: !!s,
 		partnerBars: ie
 	}), X = ee({
 		status: D,
-		isTopOrTopPrev: ke,
+		isTopOrTopPrev: De,
 		transitionName: S
-	}), [Me, Ne] = p({
+	}), [Ae, je] = p({
 		key: X,
 		released: X === null
 	});
-	Me.key !== X && Ne({
+	Ae.key !== X && je({
 		key: X,
 		released: X === null
 	});
-	let Fe = X !== null && Me.key === X && !Me.released, Z = Fe ? !b && se?.opaqueBackground ? "park" : "true" : "false";
+	let Me = X !== null && Ae.key === X && !Ae.released, Z = Me ? !b && se?.opaqueBackground ? "park" : "true" : "false";
 	o(() => {
-		if (Fe) return _e(() => Ne((e) => e.key === X && !e.released ? {
+		if (Me) return ve(() => je((e) => e.key === X && !e.released ? {
 			key: X,
 			released: !0
 		} : e));
-	}, [Fe, X]);
-	let Ie = ce({
-		initial: fe,
+	}, [Me, X]);
+	let Ne = ce({
+		initial: pe,
 		isActive: b,
 		status: D
 	});
-	return /* @__PURE__ */ ve("div", {
-		ref: Ce,
+	return /* @__PURE__ */ ye("div", {
+		ref: xe,
 		style: {
 			position: T,
 			top: 0,
@@ -487,7 +477,7 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 			overscrollBehavior: "contain"
 		},
 		children: [
-			/* @__PURE__ */ R("div", {
+			/* @__PURE__ */ L("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
 					position: T,
@@ -498,13 +488,13 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					zIndex: 1
 				}
 			}),
-			/* @__PURE__ */ ve("div", {
+			/* @__PURE__ */ ye("div", {
 				ref: U,
 				...v,
-				onPointerDown: Ee,
-				onPointerMove: De,
-				onPointerUp: Oe,
-				onPointerCancel: Oe,
+				onPointerDown: we,
+				onPointerMove: Te,
+				onPointerUp: Ee,
+				onPointerCancel: Ee,
 				"data-flemo-screen": !0,
 				"data-flemo-transition": S,
 				"data-flemo-status": D,
@@ -516,14 +506,14 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					height: "100%",
 					backgroundColor: h,
 					overflowY: _ ? void 0 : "auto",
-					touchAction: me === "x" ? "pan-y" : me === "y" ? "pan-x" : "auto",
-					...Ie,
+					touchAction: he === "x" ? "pan-y" : he === "y" ? "pan-x" : "auto",
+					...Ne,
 					...v.style
 				},
 				children: [
-					!d && t && /* @__PURE__ */ R("div", {
+					!d && t && /* @__PURE__ */ L("div", {
 						style: { minHeight: t },
-						children: /* @__PURE__ */ R("div", { style: {
+						children: /* @__PURE__ */ L("div", { style: {
 							position: T,
 							top: 0,
 							width: "100%",
@@ -531,59 +521,48 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 							backgroundColor: n
 						} })
 					}),
-					a && /* @__PURE__ */ R("div", { style: {
+					a && /* @__PURE__ */ L("div", { style: {
 						width: "100%",
-						minHeight: ye
+						minHeight: R
 					} }),
 					c,
-					/* @__PURE__ */ R("div", {
+					/* @__PURE__ */ L("div", {
 						style: {
 							display: "flex",
 							flexDirection: "column",
 							flexGrow: 1,
-							overflowY: _ ? "auto" : void 0,
-							...D !== "IDLE" && D !== "COMPLETED" ? {
-								transform: "translateZ(0)",
-								willChange: "transform"
-							} : null
+							overflowY: _ ? "auto" : void 0
 						},
-						children: /* @__PURE__ */ R(Pe.Provider, {
-							value: xe,
-							children: e
-						})
+						children: e
 					}),
 					l,
-					s && /* @__PURE__ */ R("div", { style: {
-						display: L ? "none" : void 0,
+					s && /* @__PURE__ */ L("div", { style: {
+						display: I ? "none" : void 0,
 						width: "100%",
-						minHeight: be
+						minHeight: B
 					} }),
-					!m && r && /* @__PURE__ */ R("div", {
+					!m && r && /* @__PURE__ */ L("div", {
 						style: {
-							display: L ? "none" : void 0,
+							display: I ? "none" : void 0,
 							minHeight: r
 						},
-						children: /* @__PURE__ */ R("div", { style: {
+						children: /* @__PURE__ */ L("div", { style: {
 							position: T,
 							bottom: 0,
 							width: "100%",
 							minHeight: r,
 							backgroundColor: i
 						} })
-					}),
-					/* @__PURE__ */ R("div", {
-						ref: Se,
-						"data-flemo-layer-mount": !0
 					})
 				]
 			}),
-			a && /* @__PURE__ */ R("div", {
-				ref: G,
+			a && /* @__PURE__ */ L("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": Ae ? "true" : "false",
+				"data-flemo-bar-riding": Oe ? "true" : "false",
 				"data-flemo-anim-hold": Z,
 				style: {
 					position: T,
@@ -594,16 +573,16 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				},
 				children: a
 			}),
-			s && /* @__PURE__ */ R("div", {
-				ref: q,
+			s && /* @__PURE__ */ L("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": je ? "true" : "false",
+				"data-flemo-bar-riding": ke ? "true" : "false",
 				"data-flemo-anim-hold": Z,
 				style: {
-					display: L ? "none" : void 0,
+					display: I ? "none" : void 0,
 					position: T,
 					bottom: m ? 0 : r,
 					left: 0,
@@ -612,11 +591,11 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				},
 				children: s
 			}),
-			F && /* @__PURE__ */ R(Ve, {
-				ref: W,
+			P && /* @__PURE__ */ L(Re, {
+				ref: Se,
 				"data-flemo-anim-hold": Z
 			}),
-			/* @__PURE__ */ R("div", {
+			/* @__PURE__ */ L("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
 					position: T,
@@ -632,9 +611,9 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 }
 //#endregion
 //#region src/screen/Screen.tsx
-function We({ children: e, ...t }) {
-	let { isActive: n, isPrev: r, zIndex: i } = H();
-	return /* @__PURE__ */ R(Be, {
+function Ve({ children: e, ...t }) {
+	let { isActive: n, isPrev: r, zIndex: i } = V();
+	return /* @__PURE__ */ L(Le, {
 		freeze: _({
 			isActive: n,
 			isPrev: r,
@@ -644,7 +623,7 @@ function We({ children: e, ...t }) {
 			dragStatus: $((e) => e.dragStatus),
 			replaceTransitionStatus: $((e) => e.replaceTransitionStatus)
 		}),
-		children: /* @__PURE__ */ R(Ue, {
+		children: /* @__PURE__ */ L(Be, {
 			...t,
 			children: e
 		})
@@ -652,9 +631,9 @@ function We({ children: e, ...t }) {
 }
 //#endregion
 //#region src/screen/Part.tsx
-function Ge({ ref: e, name: t, style: n, children: r, ...i }) {
-	let { isActive: a } = H();
-	return /* @__PURE__ */ R("div", {
+function He({ 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),
@@ -666,21 +645,21 @@ function Ge({ ref: e, name: t, style: n, children: r, ...i }) {
 }
 //#endregion
 //#region src/stores/RouterScopeProvider.tsx
-function Ke({ children: e }) {
+function Ue({ children: e }) {
 	let [t] = p(() => ({
 		history: te(),
 		navigate: C(),
 		transition: ie(),
 		screen: A(),
 		driver: b(),
-		markSelfInduced: P,
+		markSelfInduced: fe,
 		consume: v,
 		life: { alive: !0 }
 	}));
-	return /* @__PURE__ */ R(z.Provider, {
+	return /* @__PURE__ */ L(R.Provider, {
 		value: t,
 		children: e
 	});
 }
 //#endregion
-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 };
+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 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flemo/react",
-  "version": "1.5.8",
+  "version": "1.6.0",
   "description": "React bindings for flemo: Router, Route, Screen, and the screen-transition runtime.",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",

package/dist/screen/Layer.d.ts

@@ -1,3 +0,0 @@
-import { PropsWithChildren, ReactNode } from 'react';
-declare function Layer({ children }: PropsWithChildren): ReactNode;
-export default Layer;

package/dist/screen/LayerMountContext.d.ts

@@ -1,2 +0,0 @@
-declare const LayerMountContext: import('react').Context<HTMLElement | null>;
-export default LayerMountContext;

package/dist/screen/__tests__/Layer.test.d.ts

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