@flemo/react 1.5.8 → 1.6.1

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,29 +1,24 @@
 import e, { Activity as t, Children as n, createContext as r, isValidElement as i, useContext as a, useEffect as o, useId as s, useImperativeHandle as c, useInsertionEffect as l, useLayoutEffect as u, useReducer as d, useRef as f, useState as p } from "react";
-import { animHoldKey as ee, appendParamsQuery as m, buildRoutePath as h, computeBarRiding as g, computeScreenFreeze as _, consumeSelfInducedPop as v, createBrowserHistoryDriver as y, createBrowserHistoryDriver as b, createDecorator as x, createHistoryStore as te, createHistorySync as S, createNavigateStore as C, createNavigationController as w, createPartTransition as T, createRawDecorator as E, createRawPartTransition as D, createRawTransition as O, createRouterScope as ne, createScreenSelector as k, createScreenStore as A, createStepController as j, createSwipeController as M, createTransition as N, createTransitionEngine as re, createTransitionStore as ie, decoratorMap as ae, eagerlyDecodeImages as oe, ensureWindowHistoryState as se, enteringInitialStyle as ce, getMatchedPathPattern as le, isOpaqueColor as ue, isServer as de, markSelfInducedPop as 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, createNavigateStore as S, createNavigationController as C, createPartTransition as w, createRawDecorator as T, createRawPartTransition as E, createRawTransition as D, createRouterScope as ne, createScreenSelector as O, createScreenStore as k, createStepController as A, createSwipeController as re, createTransition as j, createTransitionEngine as ie, createTransitionStore as M, decoratorMap as ae, eagerlyDecodeImages as oe, ensureScopeHistorySync as se, enteringInitialStyle as ce, getMatchedPathPattern as le, isOpaqueColor as ue, isServer as de, markSelfInducedPop as fe, matchesPathname as N, observeBarHeight as pe, observeViewportScrollHeight as me, partTransitionMap as he, readStepParams as ge, registerTransitionDefinitions as P, releaseScopeHistorySync as F, resolveTransition as _e, scheduleAnimHoldRelease as ve, seedRouterEntry as I, subscribeStepParamsRestore as ye } from "@flemo/core";
+import { jsx as L, jsxs as be } 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();
-	return o(() => S({
-		stores: e,
-		driver: e.driver,
-		consume: e.consume
-	}), [e]), null;
+function xe() {
+	let e = z();
+	return o(() => (se(e), () => F(e)), [e]), null;
 }
 //#endregion
 //#region src/screen/ScreenContext.ts
-var V = r({
+var B = r({
 	id: "",
 	isActive: !1,
 	isRoot: !0,
@@ -38,15 +33,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({}), U = r(() => {});
 //#endregion
 //#region src/screen/ParamsProvider/ParamsReducer.ts
-function Ce(e, t) {
+function W(e, t) {
 	switch (t.type) {
 		case "SET": return t.params;
 		default: return e;
@@ -54,10 +49,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 G({ children: e }) {
+	let { isActive: t, params: n } = V(), { driver: r } = z(), [i, a] = d(W, n);
 	return o(() => {
-		if (t) return L(r, (e) => a({
+		if (t) return ye(r, (e) => a({
 			type: "SET",
 			params: e
 		}));
@@ -65,9 +60,9 @@ function U({ children: e }) {
 		t,
 		a,
 		r
-	]), /* @__PURE__ */ R(Se.Provider, {
+	]), /* @__PURE__ */ L(U.Provider, {
 		value: a,
-		children: /* @__PURE__ */ R(xe.Provider, {
+		children: /* @__PURE__ */ L(H.Provider, {
 			value: i,
 			children: e
 		})
@@ -75,41 +70,41 @@ function U({ children: e }) {
 }
 //#endregion
 //#region ../../node_modules/.pnpm/zustand@5.0.14_@types+react@19.2.17_react@19.2.7/node_modules/zustand/esm/react.mjs
-var W = (e) => e;
-function G(t, n = W) {
+var K = (e) => e;
+function q(t, n = K) {
 	let r = e.useSyncExternalStore(t.subscribe, e.useCallback(() => n(t.getState()), [t, n]), e.useCallback(() => n(t.getInitialState()), [t, n]));
 	return e.useDebugValue(r), r;
 }
 //#endregion
 //#region src/stores/useHistoryStore.ts
-function K(e) {
-	return G(B().history, e);
+function J(e) {
+	return q(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, {
+function Se({ children: e }) {
+	let t = J((e) => e.index);
+	return O(J((e) => e.histories), t).map((t) => {
+		let [r] = n.toArray(e).filter((e) => N(e.props.path, t.pathname));
+		return r ? /* @__PURE__ */ L(B.Provider, {
 			value: {
 				...t,
 				routePath: le(r.props.path, t.pathname)
 			},
-			children: /* @__PURE__ */ R(U, { children: r })
-		}, t.id);
+			children: /* @__PURE__ */ L(G, { children: r })
+		}, t.id) : null;
 	});
 }
 //#endregion
 //#region src/screen/ScreenViewportContext.ts
-var J = r({ contained: !1 });
-function we() {
-	return a(J);
+var Y = r({ contained: !1 });
+function Ce() {
+	return a(Y);
 }
 //#endregion
 //#region src/transition/styles.ts
-function Te(e, t, n = []) {
-	l(() => I(e, t, n), [
+function we(e, t, n = []) {
+	l(() => P(e, t, n), [
 		e,
 		t,
 		n
@@ -117,18 +112,18 @@ function Te(e, t, n = []) {
 }
 //#endregion
 //#region src/RouterDepthContext.ts
-var Y = r(0), Ee = { contained: !0 };
+var Te = r(0), Ee = { contained: !0 };
 function De({ children: e, className: t, style: n }) {
-	return /* @__PURE__ */ R("div", {
+	return /* @__PURE__ */ L("div", {
 		className: t,
 		style: {
 			position: "relative",
 			overflow: "hidden",
 			...n
 		},
-		children: /* @__PURE__ */ R(J.Provider, {
+		children: /* @__PURE__ */ L(Y.Provider, {
 			value: Ee,
-			children: /* @__PURE__ */ R(q, { children: e })
+			children: /* @__PURE__ */ L(Se, { children: e })
 		})
 	});
 }
@@ -149,23 +144,31 @@ function Oe(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 ke = typeof window > "u" ? o : u, X = [], Ae = [], je = [], Me = { contained: !0 };
+function Z({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = X, decorators: c = Ae, partTransitions: l = je, history: u = "browser", createDriver: d, className: f, style: ee }) {
+	let m = a(Te), h = m > 0, g = u === "memory", _ = s(), v = a(B), y = h && v.id ? `_F_${v.id}_` : _, x = Oe(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) || "/", re = D ? window.location.search : k >= 0 ? O.slice(k) : "", [j] = p(() => ne({
 		routePaths: (x ?? n.toArray(e)).map((e) => e.props.path).flat(),
 		pathname: A,
-		search: j,
+		search: re,
 		defaultTransitionName: r,
 		memory: g,
 		browserDriver: E,
-		hostedScope: C
+		hostedScope: C,
+		routerKey: w ? void 0 : y,
+		zoneEntryId: h && !w && v.id || void 0,
+		persistKey: h && !g && !w ? y : void 0
 	}));
-	M.transition.setState({ defaultTransitionName: r }), o(() => (M.life.alive = !0, () => {
-		M.life.alive = !1;
-	}), [M]), 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);
+	j.transition.setState({ defaultTransitionName: r }), ke(() => (j.life.alive = !0, () => {
+		j.life.alive = !1;
+	}), [j]), we(i, c, l), o(() => {
+		g || !E || I({
+			driver: E,
+			routerKey: w ? null : y,
+			nested: h && !w,
+			seedPathname: A,
+			defaultTransitionName: r,
+			rootParams: j.history.getState().histories[0]?.params ?? {}
+		});
 	}, [
 		g,
 		w,
@@ -173,28 +176,28 @@ function Me({ children: e, initPath: t = "/", defaultTransitionName: r = "cupert
 		y,
 		A,
 		r,
-		M.history,
+		j.history,
 		E
 	]);
-	let N = te ? e : /* @__PURE__ */ R(q, { children: e }), re = /* @__PURE__ */ R(Y.Provider, {
+	let ie = te ? e : /* @__PURE__ */ L(Se, { children: e }), M = /* @__PURE__ */ L(Te.Provider, {
 		value: m + 1,
-		children: /* @__PURE__ */ ve(z.Provider, {
-			value: M,
-			children: [!g && /* @__PURE__ */ R(be, {}), h ? /* @__PURE__ */ R(J.Provider, {
-				value: X,
-				children: N
-			}) : N]
+		children: /* @__PURE__ */ be(R.Provider, {
+			value: j,
+			children: [!g && /* @__PURE__ */ L(xe, {}), h ? /* @__PURE__ */ L(Y.Provider, {
+				value: Me,
+				children: ie
+			}) : ie]
 		})
 	});
-	return h ? /* @__PURE__ */ R("div", {
+	return h ? /* @__PURE__ */ L("div", {
 		className: f,
 		style: {
 			position: "relative",
 			overflow: "hidden",
 			...ee
 		},
-		children: re
-	}) : re;
+		children: M
+	}) : M;
 }
 //#endregion
 //#region src/Route.tsx
@@ -202,25 +205,16 @@ function Ne({ 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) {
+function Pe(e, t) {
 	return h(e, t);
 }
 //#endregion
 //#region src/navigate/useNavigate.ts
-function Ie() {
-	let e = B(), t = w({
+function Fe() {
+	let e = z(), t = C({
 		stores: e,
-		buildPathname: (e, t) => Z(e, t),
+		buildPathname: (e, t) => Pe(e, t),
 		driver: e.driver,
 		markSelfInduced: e.markSelfInduced
 	});
@@ -232,21 +226,21 @@ function Ie() {
 }
 //#endregion
 //#region src/navigate/usePathname.ts
-function Le() {
-	return K((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
+function Ie() {
+	return J((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 Le() {
+	let { routePath: e } = V(), t = z(), n = a(U), { 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(ge(r.readState())), r.subscribe((e) => c(ge(e.state)));
 	}, [e, r]);
-	let l = j({
+	let l = A({
 		stores: t,
 		driver: r,
 		markSelfInduced: i,
-		buildStepPathname: (t) => e ? Z(e, t).pathname : m(r.readPathname(), t),
+		buildStepPathname: (t) => e ? Pe(e, t).pathname : m(r.readPathname(), t),
 		applyParams: (t) => {
 			n({
 				type: "SET",
@@ -263,13 +257,13 @@ function Re() {
 }
 //#endregion
 //#region src/screen/ParamsProvider/useParams.ts
-function ze() {
-	return a(xe);
+function Re() {
+	return a(H);
 }
 //#endregion
 //#region src/screen/ScreenFreeze.tsx
-function Be({ freeze: e, children: n }) {
-	return /* @__PURE__ */ R(t, {
+function ze({ freeze: e, children: n }) {
+	return /* @__PURE__ */ L(t, {
 		mode: e ? "hidden" : "visible",
 		children: n
 	});
@@ -277,15 +271,15 @@ function Be({ freeze: e, children: n }) {
 //#endregion
 //#region src/stores/useNavigateStore.ts
 function Q(e) {
-	return G(B().navigate, e);
+	return q(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 Be({ 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,7 +300,7 @@ function Ve({ ref: e, style: t, ...n }) {
 }
 //#endregion
 //#region src/screen/useViewportScrollHeight.ts
-function He() {
+function Ve() {
 	let [e, t] = p(0), [n, r] = p(0);
 	return o(() => me((e, n) => {
 		r(n), t(e);
@@ -318,67 +312,67 @@ function He() {
 //#endregion
 //#region src/stores/useScreenStore.ts
 function $(e) {
-	return G(B().screen, e);
+	return q(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);
-	le.current ||= re({
+function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: i, sharedTopBar: a, sharedBottomBar: s, topBar: c, bottomBar: l, hideStatusBar: d, hideSystemNavigationBar: m, backgroundColor: h = "white", contentScrollable: _ = !0, ...v }) {
+	let { id: y, isActive: b, isRoot: x, zIndex: te, transitionName: S, prevTransitionName: C } = V(), { contained: w } = Ce(), T = w ? "absolute" : "fixed", E = z(), D = Q((e) => e.status), ne = $((e) => e.dragStatus), O = E.screen.getState().setDragStatus, k = E.screen.getState().setReplaceTransitionStatus, A = J((e) => e.index), j = J((e) => e.histories), M = b ? j[A - 1]?.id : j[A]?.id, se = $((e) => M ? e.sharedBars[M] : void 0), le = $((e) => M ? e.screenSurfaces[M] : void 0), de = f(null);
+	de.current ||= ie({
 		getTransitionTaskId: () => E.navigate.getState().transitionTaskId,
-		setDragStatus: ne,
+		setDragStatus: O,
 		setReplaceTransitionStatus: k
 	});
-	let de = le.current, 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 fe = de.current, N = _e(S), { initial: me, swipeDirection: he, decoratorName: ge } = N, P = ae.get(ge), { viewportScrollHeight: F } = Ve(), I = F > 0, [ye, R] = p(0), [xe, B] = p(0), H = f(null), U = f(null), W = f(null), G = f(null), K = f(null), q = f({
+		transition: N,
+		decorator: P,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!s,
-		viewportScrollHeight: I,
+		viewportScrollHeight: F,
 		isRoot: x,
 		isActive: b,
 		status: D,
-		dragStatus: O,
+		dragStatus: ne,
 		index: A
 	});
-	J.current = {
-		transition: P,
-		decorator: F,
+	q.current = {
+		transition: N,
+		decorator: P,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!s,
-		viewportScrollHeight: I,
+		viewportScrollHeight: F,
 		isRoot: x,
 		isActive: b,
 		status: D,
-		dragStatus: O,
+		dragStatus: ne,
 		index: A
 	};
-	let Te = f(null);
-	Te.current ||= M({
-		getTransition: () => J.current.transition,
-		getDecorator: () => J.current.decorator,
+	let Se = f(null);
+	Se.current ||= re({
+		getTransition: () => q.current.transition,
+		getDecorator: () => q.current.decorator,
 		getElements: () => ({
 			scope: U.current,
-			screenContainer: Ce.current,
+			screenContainer: H.current,
 			decorator: W.current,
 			sharedTopBar: G.current,
-			sharedBottomBar: q.current
+			sharedBottomBar: K.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,
+		setDragStatus: O,
 		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 = Se.current, we = (e) => Y.pointerDown(e.nativeEvent), Te = (e) => Y.pointerMove(e.nativeEvent), Ee = (e) => Y.pointerUp(e.nativeEvent);
 	o(() => {
 		oe(U.current);
 	}, []), o(() => {
@@ -390,18 +384,18 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 		return e.addEventListener("touchmove", t, { passive: !1 }), () => {
 			e.removeEventListener("touchmove", t);
 		};
-	}, [Y]), u(() => de.driveScreenLifecycle({
+	}, [Y]), u(() => fe.driveScreenLifecycle({
 		getElements: () => ({
 			scope: U.current,
 			decorator: W.current,
-			bars: [G.current, q.current]
+			bars: [G.current, K.current]
 		}),
 		transitionName: S,
 		prevTransitionName: C,
 		status: D,
 		isActive: b
 	}), [
-		de,
+		fe,
 		D,
 		b,
 		C,
@@ -409,17 +403,17 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 	]), u(() => {
 		let e = G.current;
 		if (!e) {
-			z(0);
+			R(0);
 			return;
 		}
-		return pe(e, z);
+		return pe(e, R);
 	}, [a]), u(() => {
-		let e = q.current;
+		let e = K.current;
 		if (!e) {
-			V(0);
+			B(0);
 			return;
 		}
-		return pe(e, V);
+		return pe(e, B);
 	}, [s]), u(() => {
 		let { registerSharedBars: e, unregisterSharedBars: t } = E.screen.getState();
 		return e(y, {
@@ -442,38 +436,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
+		partnerBars: se
 	}), 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 && le?.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: me,
 		isActive: b,
 		status: D
 	});
-	return /* @__PURE__ */ ve("div", {
-		ref: Ce,
+	return /* @__PURE__ */ be("div", {
+		ref: H,
 		style: {
 			position: T,
 			top: 0,
@@ -487,7 +481,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 +492,13 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					zIndex: 1
 				}
 			}),
-			/* @__PURE__ */ ve("div", {
+			/* @__PURE__ */ be("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 +510,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 +525,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
 					} }),
 					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: xe
 					} }),
-					!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", {
+			a && /* @__PURE__ */ L("div", {
 				ref: G,
 				"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 +577,16 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				},
 				children: a
 			}),
-			s && /* @__PURE__ */ R("div", {
-				ref: q,
+			s && /* @__PURE__ */ L("div", {
+				ref: K,
 				"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 +595,11 @@ function Ue({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				},
 				children: s
 			}),
-			F && /* @__PURE__ */ R(Ve, {
+			P && /* @__PURE__ */ L(Be, {
 				ref: W,
 				"data-flemo-anim-hold": Z
 			}),
-			/* @__PURE__ */ R("div", {
+			/* @__PURE__ */ L("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
 					position: T,
@@ -632,19 +615,19 @@ 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 Ue({ children: e, ...t }) {
+	let { isActive: n, isPrev: r, zIndex: i } = V();
+	return /* @__PURE__ */ L(ze, {
 		freeze: _({
 			isActive: n,
 			isPrev: r,
 			zIndex: i,
-			index: K((e) => e.index),
+			index: J((e) => e.index),
 			status: Q((e) => e.status),
 			dragStatus: $((e) => e.dragStatus),
 			replaceTransitionStatus: $((e) => e.replaceTransitionStatus)
 		}),
-		children: /* @__PURE__ */ R(Ue, {
+		children: /* @__PURE__ */ L(He, {
 			...t,
 			children: e
 		})
@@ -652,9 +635,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 We({ 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 +649,21 @@ function Ge({ ref: e, name: t, style: n, children: r, ...i }) {
 }
 //#endregion
 //#region src/stores/RouterScopeProvider.tsx
-function Ke({ children: e }) {
+function Ge({ children: e }) {
 	let [t] = p(() => ({
 		history: te(),
-		navigate: C(),
-		transition: ie(),
-		screen: A(),
+		navigate: S(),
+		transition: M(),
+		screen: k(),
 		driver: b(),
-		markSelfInduced: 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 { We as Part, Ne as Route, Z as Router, Ge as RouterScopeProvider, Ue as Screen, B as ScreenContext, Be as ScreenDecorator, ze as ScreenFreeze, He as ScreenMotion, De as Slot, y as createBrowserHistoryDriver, x as createDecorator, w as createPartTransition, T as createRawDecorator, E as createRawPartTransition, D as createRawTransition, j as createTransition, he as partTransitionMap, J as useHistoryStore, Fe as useNavigate, Q as useNavigateStore, Re as useParams, Ie as usePathname, V as useScreen, $ as useScreenStore, Le as useStep, z as useStores, Ve as useViewportScrollHeight };

package/dist/renderer/Renderer.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flemo/react",
-  "version": "1.5.8",
+  "version": "1.6.1",
   "description": "React bindings for flemo: Router, Route, Screen, and the screen-transition runtime.",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -36,7 +36,7 @@
   "dependencies": {
     "path-to-regexp": "^8.4.2",
     "zustand": "^5.0.14",
-    "@flemo/core": "1.12.0"
+    "@flemo/core": "1.12.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -54,8 +54,8 @@
     "vite": "^8.0.16",
     "vite-plugin-dts": "^5.0.2",
     "vitest": "^4.1.9",
-    "@flemo/eslint-config": "0.0.0",
-    "@flemo/tsconfig": "0.0.0"
+    "@flemo/tsconfig": "0.0.0",
+    "@flemo/eslint-config": "0.0.0"
   },
   "peerDependencies": {
     "react": "^19.2.7",

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 {};