@flemo/react 1.12.7 → 2.0.0

package/dist/index.mjs

@@ -1,25 +1,25 @@
-import e, { Activity as t, Children as n, createContext as r, isValidElement as i, useCallback as a, useContext as o, useEffect as s, useId as c, useImperativeHandle as l, useInsertionEffect as u, useLayoutEffect as d, useReducer as f, useRef as p, useState as m, useSyncExternalStore as ee } from "react";
-import { animHoldKey as te, appendParamsQuery as ne, buildRoutePath as h, computeBarRiding as re, computeScreenFreeze as ie, computeScreenFreezeMode as ae, consumeSelfInducedPop as oe, createAnimHoldCoordinator as g, createBrowserHistoryDriver as _, createBrowserHistoryDriver as v, createDecorator as y, createHistoryStore as b, createNavigateStore as se, createNavigationController as x, createPartTransition as S, createRawDecorator as ce, createRawPartTransition as C, createRawTransition as w, createRouterScope as T, createScreenSelector as E, createScreenStore as D, createStepController as O, createSwipeController as le, createTransition as k, createTransitionEngine as ue, createTransitionStore as A, decoratorMap as de, detectBlinkEngine as j, eagerlyDecodeImages as fe, ensureGpuPipelinePrewarm as pe, ensureImageDecodeOffloader as me, ensureScopeHistorySync as M, enteringInitialStyle as he, getMatchedPathPattern as ge, governedCompiledActive as _e, holdCompositorWarm as N, isDesktopBlink as ve, isLegacyAndroidBlink as P, isOpaqueColor as ye, isServer as be, markSelfInducedPop as xe, matchesPathname as Se, observeBarHeight as Ce, observeViewportScrollHeight as we, partTransitionMap as Te, readDeferReleaseCommitFlag as Ee, readDesktopReleaseFlipFlag as De, readImageOffloadOverride as Oe, readPrerasterFlag as ke, readRestLayerPromotionFlag as Ae, readSettleGateFlag as je, readStepParams as Me, registerTransitionDefinitions as Ne, releaseScopeHistorySync as Pe, resolveTransition as Fe, seedRouterEntry as Ie, sharedBarsMatch as Le, subscribeStepParamsRestore as Re } from "@flemo/core";
-import { jsx as F, jsxs as ze } from "react/jsx-runtime";
-import { flushSync as Be } from "react-dom";
+import e, { Activity as t, Children as n, createContext as r, createElement as i, isValidElement as a, useCallback as o, useContext as s, useEffect as c, useId as l, useImperativeHandle as u, useInsertionEffect as d, useLayoutEffect as f, useReducer as ee, useRef as p, useState as m, useSyncExternalStore as te } from "react";
+import { ACTIVE_ATTR as ne, ANIM_HOLD as h, ANIM_HOLD_ATTR as g, LAYER_HOST_ATTR as re, LAYER_OWNER_ATTR as ie, LAYER_SLOT_ATTR as ae, OVERLAY_LEVEL as oe, STATUS_ATTR as _, TRANSITION_ATTR as v, animHoldKey as se, appendParamsQuery as y, attachMorph as ce, beginMorphSwipe as le, buildRoutePath as ue, computeBarRiding as de, computeScreenFreeze as fe, computeScreenFreezeMode as pe, consumeSelfInducedPop as b, createAnimHoldCoordinator as x, createBrowserHistoryDriver as S, createBrowserHistoryDriver as me, createDecorator as C, createHistoryStore as w, createMorphTransition as T, createNavigateStore as he, createNavigationController as E, createPartTransition as D, createRawDecorator as O, createRawMorphTransition as k, createRawPartTransition as ge, createRawTransition as _e, createRouterScope as A, createScreenSelector as ve, createScreenStore as ye, createStepController as be, createSwipeController as xe, createTransition as Se, createTransitionEngine as Ce, createTransitionStore as j, decoratorMap as we, eagerlyDecodeImages as Te, ensureScopeHistorySync as Ee, enteringInitialStyle as De, getMatchedPathPattern as M, isDesktopBlink as Oe, isOpaqueColor as ke, isServer as Ae, markSelfInducedPop as je, matchesPathname as Me, morphTransitionMap as Ne, observeBarHeight as Pe, observeViewportScrollHeight as Fe, partTransitionMap as Ie, readStepParams as Le, registerMorphLayer as Re, registerTransitionDefinitions as ze, releaseScopeHistorySync as Be, resolvePlatformProfile as Ve, resolveTransition as He, restLayerPromotionEnabled as Ue, seedRouterEntry as We, sharedBarsMatch as Ge, startFlemoRuntime as Ke, subscribeStepParamsRestore as qe } from "@flemo/core";
+import { Fragment as Je, jsx as N, jsxs as Ye } from "react/jsx-runtime";
+import { createPortal as Xe, flushSync as Ze } from "react-dom";
 //#region src/stores/StoreContext.ts
-var I = r(null);
+var Qe = r(null);
 //#endregion
 //#region src/stores/useStores.ts
-function L() {
-	let e = o(I);
+function P() {
+	let e = s(Qe);
 	if (!e) throw Error("flemo stores are missing. Render inside a <Router>.");
 	return e;
 }
 //#endregion
 //#region src/history/HistoryListener.tsx
-function R() {
-	let e = L();
-	return s(() => (M(e), () => Pe(e)), [e]), null;
+function $e() {
+	let e = P();
+	return c(() => (Ee(e), () => Be(e)), [e]), null;
 }
 //#endregion
 //#region src/screen/ScreenContext.ts
-var z = r({
+var et = r({
 	id: "",
 	isActive: !1,
 	isRoot: !0,
@@ -29,20 +29,19 @@ var z = r({
 	params: {},
 	transitionName: "none",
 	prevTransitionName: "none",
-	layoutId: null,
 	routePath: ""
 });
 //#endregion
 //#region src/screen/useScreen.ts
-function B() {
-	return o(z);
+function F() {
+	return s(et);
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsContext.ts
-var V = r({}), Ve = r(() => {});
+var tt = r({}), I = r(() => {});
 //#endregion
 //#region src/screen/ParamsProvider/ParamsReducer.ts
-function He(e, t) {
+function L(e, t) {
 	switch (t.type) {
 		case "SET": return t.params;
 		default: return e;
@@ -50,10 +49,10 @@ function He(e, t) {
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsProvider.tsx
-function Ue({ children: e }) {
-	let { isActive: t, params: n } = B(), { driver: r } = L(), [i, a] = f(He, n);
-	return s(() => {
-		if (t) return Re(r, (e) => a({
+function R({ children: e }) {
+	let { isActive: t, params: n } = F(), { driver: r } = P(), [i, a] = ee(L, n);
+	return c(() => {
+		if (t) return qe(r, (e) => a({
 			type: "SET",
 			params: e
 		}));
@@ -61,108 +60,124 @@ function Ue({ children: e }) {
 		t,
 		a,
 		r
-	]), /* @__PURE__ */ F(Ve.Provider, {
+	]), /* @__PURE__ */ N(I.Provider, {
 		value: a,
-		children: /* @__PURE__ */ F(V.Provider, {
+		children: /* @__PURE__ */ N(tt.Provider, {
 			value: i,
 			children: e
 		})
 	});
 }
 //#endregion
-//#region ../../node_modules/.pnpm/zustand@5.0.14_@types+react@19.2.18_react@19.2.8/node_modules/zustand/esm/react.mjs
-var We = (e) => e;
-function H(t, n = We) {
+//#region ../../node_modules/.pnpm/zustand@5.0.15_@types+react@19.2.18_react@19.2.8/node_modules/zustand/esm/react.mjs
+var z = (e) => e;
+function B(t, n = z) {
 	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 U(e) {
-	return H(L().history, e);
+function V(e) {
+	return B(P().history, e);
 }
 //#endregion
 //#region src/RouterIdContext.ts
-var Ge = r(null);
+var nt = r(null);
 //#endregion
 //#region src/renderer/Renderer.tsx
-function Ke({ children: e }) {
-	let t = U((e) => e.index), r = U((e) => e.histories), i = L(), a = o(z), s = o(Ge);
-	return E(r, t).map((t) => {
-		let [r] = n.toArray(e).filter((e) => Se(e.props.path, t.pathname));
-		return r ? /* @__PURE__ */ F(z.Provider, {
+function rt({ children: e }) {
+	let t = V((e) => e.index), r = V((e) => e.histories), i = P(), a = s(et), o = s(nt);
+	return ve(r, t).map((t) => {
+		let [r] = n.toArray(e).filter((e) => Me(e.props.path, t.pathname));
+		return r ? /* @__PURE__ */ N(et.Provider, {
 			value: {
 				...t,
 				isPrev: t.isPrev || a.isPrev,
 				navigateStore: i.navigate,
-				routerId: s ?? void 0,
-				routePath: ge(r.props.path, t.pathname)
+				routerId: o ?? void 0,
+				routePath: M(r.props.path, t.pathname)
 			},
-			children: /* @__PURE__ */ F(Ue, { children: r })
+			children: /* @__PURE__ */ N(R, { children: r })
 		}, t.id) : null;
 	});
 }
 //#endregion
+//#region src/screen/MorphLayer/MorphLayer.tsx
+function it({ stores: e }) {
+	let t = p(null);
+	return f(() => (Re(e.navigate, t.current), () => Re(e.navigate, null)), [e.navigate]), /* @__PURE__ */ N("div", {
+		ref: t,
+		"data-flemo-morph-layer": "",
+		"aria-hidden": "true",
+		style: {
+			position: "absolute",
+			inset: 0,
+			pointerEvents: "none"
+		}
+	});
+}
+//#endregion
 //#region src/screen/ScreenViewportContext.ts
-var qe = r({ contained: !1 });
-function Je() {
-	return o(qe);
+var at = r({ contained: !1 });
+function ot() {
+	return s(at);
 }
 //#endregion
 //#region src/transition/styles.ts
-function Ye(e, t, n = []) {
-	u(() => Ne(e, t, n), [
+function st(e, t, n = [], r = []) {
+	d(() => ze(e, t, n, r), [
 		e,
 		t,
-		n
+		n,
+		r
 	]);
 }
 //#endregion
 //#region src/utils/devDiagnostics.ts
-function Xe() {
+function ct() {
 	return typeof process < "u" && process.env.NODE_ENV !== "production";
 }
-function Ze(e) {
-	!Xe() || typeof console > "u" || console.error(`[flemo] ${e}`);
+function lt(e) {
+	!ct() || typeof console > "u" || console.error(`[flemo] ${e}`);
 }
-function Qe(e) {
-	if (Xe()) throw Error(`[flemo] ${e}`);
+function ut(e) {
+	if (ct()) throw Error(`[flemo] ${e}`);
 }
 //#endregion
 //#region src/RouterDepthContext.ts
-var $e = r(0), W = r(null), G = [
+var dt = r(0), ft = r(null), pt = [
 	"current",
 	"parent",
 	"root",
 	"nearest-owner"
-], et = (e) => G.includes(e), K = (e) => {
+], mt = (e) => pt.includes(e), H = (e) => {
 	let t = [];
 	for (let n = e; n; n = n.parent) t.push(n);
 	return t;
 };
-function tt(e, t, n) {
-	return e.routePaths.length === 0 || e.routePaths.some((e) => e === t) ? !0 : n ? Se(e.routePaths, n) : !1;
+function U(e, t, n) {
+	return e.routePaths.length === 0 || e.routePaths.some((e) => e === t) ? !0 : n ? Me(e.routePaths, n) : !1;
 }
-function q(e) {
-	return K(e).map((e, t) => {
+function W(e) {
+	return H(e).map((e, t) => {
 		let n = t === 0 ? "current" : `${t} level(s) up`;
 		return e.name ? `"${e.name}" (${n})` : `<unnamed> (${n})`;
 	}).join(", ");
 }
-function J({ from: e, target: t, path: n, pathname: r }) {
+function ht({ from: e, target: t, path: n, pathname: r }) {
 	if (t === void 0) return {
 		node: e,
 		message: null
 	};
 	let i = null, a = null;
-	if (typeof t == "string" ? et(t) ? i = t : a = t : "scope" in t ? i = t.scope : a = t.name, a !== null) {
-		let t = K(e).find((e) => e.name === a);
+	if (typeof t == "string" ? mt(t) ? i = t : a = t : "scope" in t ? i = t.scope : a = t.name, a !== null) {
+		let t = H(e).find((e) => e.name === a);
 		return t ? {
 			node: t,
 			message: null
 		} : {
 			node: null,
-			message: `no <Router name="${a}"> encloses this call. Routers in scope: ${q(e)}.`
+			message: `no <Router name="${a}"> encloses this call. Routers in scope: ${W(e)}.`
 		};
 	}
 	switch (i) {
@@ -174,7 +189,7 @@ function J({ from: e, target: t, path: n, pathname: r }) {
 			message: "router: \"parent\" was requested, but the enclosing <Router> is the outermost one (it has no parent Router)."
 		};
 		case "root": {
-			let t = K(e);
+			let t = H(e);
 			return {
 				node: t[t.length - 1],
 				message: null
@@ -185,13 +200,13 @@ function J({ from: e, target: t, path: n, pathname: r }) {
 				node: e,
 				message: "router: \"nearest-owner\" needs a route to search for, and pop() carries none. Falling back to \"current\" — name the Router explicitly for a cross-Router pop."
 			};
-			let t = K(e).find((e) => tt(e, n, r));
+			let t = H(e).find((e) => U(e, n, r));
 			return t ? {
 				node: t,
 				message: null
 			} : {
 				node: null,
-				message: `no <Router> in scope declares a <Route path="${n}">. Routers in scope: ${q(e)}.`
+				message: `no <Router> in scope declares a <Route path="${n}">. Routers in scope: ${W(e)}.`
 			};
 		}
 		default: return {
@@ -200,162 +215,137 @@ function J({ from: e, target: t, path: n, pathname: r }) {
 		};
 	}
 }
-function nt(e) {
+function gt(e) {
 	if (!e.name) return null;
 	for (let t = e.parent; t; t = t.parent) if (t.name === e.name) return t;
 	return null;
 }
 //#endregion
 //#region src/Slot.tsx
-var rt = { contained: !0 };
-function it({ children: e, className: t, style: n }) {
-	return /* @__PURE__ */ F("div", {
+var G = { contained: !0 };
+function K({ children: e, className: t, style: n }) {
+	return /* @__PURE__ */ N("div", {
 		className: t,
 		style: {
 			position: "relative",
 			overflow: "hidden",
 			...n
 		},
-		children: /* @__PURE__ */ F(qe.Provider, {
-			value: rt,
-			children: /* @__PURE__ */ F(Ke, { children: e })
+		children: /* @__PURE__ */ N(at.Provider, {
+			value: G,
+			children: /* @__PURE__ */ N(rt, { children: e })
 		})
 	});
 }
 //#endregion
 //#region src/Router.tsx
-function at(e) {
+function q(e) {
 	let t = null;
 	return n.forEach(e, (e) => {
-		if (t || !i(e)) return;
-		if (e.type === it) {
-			t = n.toArray(e.props.children).filter(i);
+		if (t || !a(e)) return;
+		if (e.type === K) {
+			t = n.toArray(e.props.children).filter(a);
 			return;
 		}
 		let r = e.props.children;
 		if (r) {
-			let e = at(r);
+			let e = q(r);
 			e && (t = e);
 		}
 	}), t;
 }
-var Y = typeof window > "u" ? s : d, ot = typeof window > "u" ? s : u, X = [], st = [], ct = [], lt = { contained: !0 }, ut = 500, dt = 3e3;
-function ft({ children: e, name: t, strictRoutes: r = !1, initPath: a = "/", defaultTransitionName: l = "cupertino", transitions: u = X, decorators: d = st, partTransitions: f = ct, history: p = "browser", createDriver: ee, className: te, style: ne }) {
-	let h = o($e), re = c(), [ie, ae] = m(!1);
-	s(() => ae(!0), []);
-	let oe = ie ? re : null, g = h > 0, _ = p === "memory", y = c(), b = o(z), se = o(I), x = g && b.id ? `_F_${se?.routerKey ?? ""}${b.id}_` : y, S = at(e), ce = S !== null, C = (S ?? n.toArray(e).filter(i)).flatMap((e) => e.props?.path ? [e.props.path].flat() : []), w = g ? null : se, E = w !== null, D = ee ?? v, [O] = m(() => _ ? null : D(E ? void 0 : x)), le = !g && !_ && !be(), k = le && O ? O.readPathname() : a || "/", ue = k.indexOf("?"), A = (ue >= 0 ? k.slice(0, ue) : k) || "/", de = le ? window.location.search : ue >= 0 ? k.slice(ue) : "", [j] = m(() => T({
-		routePaths: C,
-		pathname: A,
-		search: de,
-		defaultTransitionName: l,
-		memory: _,
-		browserDriver: O,
-		hostedScope: w,
-		routerKey: E ? void 0 : x,
-		zoneEntryId: g && !E && b.id || void 0,
-		persistKey: g && !_ && !E ? x : void 0
+var _t = typeof window > "u" ? c : f, vt = typeof window > "u" ? c : d, yt = [], J = [], bt = [], xt = [], Y = { contained: !0 };
+function St({ children: e, name: t, strictRoutes: r = !1, initPath: i = "/", defaultTransitionName: o = "cupertino", transitions: u = yt, decorators: d = J, partTransitions: f = bt, morphTransitions: ee = xt, history: p = "browser", createDriver: te, className: ne, style: h }) {
+	let g = s(dt), re = l(), [ie, ae] = m(!1);
+	c(() => ae(!0), []);
+	let oe = ie ? re : null, _ = g > 0, v = p === "memory", se = l(), y = s(et), ce = s(Qe), le = _ && y.id ? `_F_${ce?.routerKey ?? ""}${y.id}_` : se, ue = q(e), de = ue !== null, fe = (ue ?? n.toArray(e).filter(a)).flatMap((e) => e.props?.path ? [e.props.path].flat() : []), pe = _ ? null : ce, b = pe !== null, x = te ?? me, [S] = m(() => v ? null : x(b ? void 0 : le)), C = !_ && !v && !Ae(), w = C && S ? S.readPathname() : i || "/", T = w.indexOf("?"), he = (T >= 0 ? w.slice(0, T) : w) || "/", E = C ? window.location.search : T >= 0 ? w.slice(T) : "", [D] = m(() => A({
+		routePaths: fe,
+		pathname: he,
+		search: E,
+		defaultTransitionName: o,
+		memory: v,
+		browserDriver: S,
+		hostedScope: pe,
+		routerKey: b ? void 0 : le,
+		zoneEntryId: _ && !b && y.id || void 0,
+		persistKey: _ && !v && !b ? le : void 0
 	}));
-	Y(() => {
-		j.transition.getState().defaultTransitionName !== l && j.transition.setState({ defaultTransitionName: l });
+	_t(() => {
+		D.transition.getState().defaultTransitionName !== o && D.transition.setState({ defaultTransitionName: o });
 	});
-	let fe = o(W), [M] = m(() => ({
+	let O = s(ft), [k] = m(() => ({
 		name: t,
-		stores: j,
-		routePaths: C,
+		stores: D,
+		routePaths: fe,
 		strictRoutes: r,
-		parent: fe,
-		depth: h
+		parent: O,
+		depth: g
 	}));
-	ot(() => {
-		M.name = t, M.stores = j, M.routePaths = C, M.strictRoutes = r, M.parent = fe;
-	}), s(() => {
-		nt(M) && Ze(`duplicate <Router name="${M.name}">: an enclosing <Router> already uses that name, so \`router\` targets resolve to the nearer one. Give each nested Router a unique name.`);
-	}, [M, t]), Y(() => (j.life.alive = !0, () => {
-		j.life.alive = !1;
-	}), [j]), Ye(u, d, f), s(() => {
-		let e = Oe();
-		if (e !== "off") return e === "on" || P() ? me() : void 0;
-	}, []), s(() => pe(), []), s(() => {
-		if (typeof document > "u") return;
-		let e = null, t = null, n = 0, r = () => {
-			let r = Date.now();
-			if (r - n < ut) return;
-			n = r, t && clearTimeout(t);
-			let i = e;
-			e = N(), i?.(), t = setTimeout(() => {
-				t = null, e?.(), e = null;
-			}, dt);
-		}, i = [
-			"pointerdown",
-			"pointermove",
-			"wheel",
-			"touchstart",
-			"keydown"
-		];
-		for (let e of i) document.addEventListener(e, r, { passive: !0 });
-		return () => {
-			for (let e of i) document.removeEventListener(e, r);
-			t && clearTimeout(t), e?.();
-		};
-	}, []), s(() => {
-		_ || !O || Ie({
-			driver: O,
-			routerKey: E ? null : x,
-			nested: g && !E,
-			seedPathname: A,
-			defaultTransitionName: l,
-			rootParams: j.history.getState().histories[0]?.params ?? {}
+	vt(() => {
+		k.name = t, k.stores = D, k.routePaths = fe, k.strictRoutes = r, k.parent = O;
+	}), c(() => {
+		gt(k) && lt(`duplicate <Router name="${k.name}">: an enclosing <Router> already uses that name, so \`router\` targets resolve to the nearer one. Give each nested Router a unique name.`);
+	}, [k, t]), _t(() => (D.life.alive = !0, () => {
+		D.life.alive = !1;
+	}), [D]), st(u, d, f, ee), c(() => Ke(), []), c(() => {
+		v || !S || We({
+			driver: S,
+			routerKey: b ? null : le,
+			nested: _ && !b,
+			seedPathname: he,
+			defaultTransitionName: o,
+			rootParams: D.history.getState().histories[0]?.params ?? {}
 		});
 	}, [
+		v,
+		b,
 		_,
-		E,
-		g,
-		x,
-		A,
-		l,
-		j.history,
-		O
+		le,
+		he,
+		o,
+		D.history,
+		S
 	]);
-	let he = ce ? e : /* @__PURE__ */ F(Ke, { children: e }), ge = /* @__PURE__ */ F(Ge.Provider, {
+	let ge = de ? e : /* @__PURE__ */ N(rt, { children: e }), _e = /* @__PURE__ */ N(nt.Provider, {
 		value: oe,
-		children: /* @__PURE__ */ F($e.Provider, {
-			value: h + 1,
-			children: /* @__PURE__ */ F(W.Provider, {
-				value: M,
-				children: /* @__PURE__ */ ze(I.Provider, {
-					value: j,
-					children: [!_ && /* @__PURE__ */ F(R, {}), g ? /* @__PURE__ */ F(qe.Provider, {
-						value: lt,
-						children: he
-					}) : he]
+		children: /* @__PURE__ */ N(dt.Provider, {
+			value: g + 1,
+			children: /* @__PURE__ */ N(ft.Provider, {
+				value: k,
+				children: /* @__PURE__ */ Ye(Qe.Provider, {
+					value: D,
+					children: [!v && /* @__PURE__ */ N($e, {}), _ ? /* @__PURE__ */ N(at.Provider, {
+						value: Y,
+						children: ge
+					}) : ge]
 				})
 			})
 		})
 	});
-	return g ? /* @__PURE__ */ F("div", {
-		className: te,
+	return _ ? /* @__PURE__ */ Ye("div", {
+		className: ne,
 		style: {
 			position: "relative",
 			overflow: "hidden",
-			...ne
+			...h
 		},
-		children: ge
-	}) : ge;
+		children: [_e, /* @__PURE__ */ N(it, { stores: D })]
+	}) : /* @__PURE__ */ Ye(Je, { children: [_e, /* @__PURE__ */ N(it, { stores: D })] });
 }
 //#endregion
 //#region src/Route.tsx
-function pt({ element: e }) {
+function Ct({ element: e }) {
 	return e;
 }
 //#endregion
 //#region src/utils/buildRoutePath.ts
-function mt(e, t) {
-	return h(e, t);
+function wt(e, t) {
+	return ue(e, t);
 }
 //#endregion
 //#region src/navigate/useNavigate.ts
-function Z(e) {
-	let t = L(), n = o(W) ?? {
+function Tt(e) {
+	let t = P(), n = s(ft) ?? {
 		stores: t,
 		routePaths: [],
 		strictRoutes: !1,
@@ -364,24 +354,24 @@ function Z(e) {
 	}, r = (t, r, i) => {
 		let a = t ?? e?.router, o;
 		if (r) try {
-			o = mt(r, i).toPathname;
+			o = wt(r, i).toPathname;
 		} catch {
 			o = void 0;
 		}
-		let { node: s, message: c } = J({
+		let { node: s, message: c } = ht({
 			from: n,
 			target: a,
 			path: r,
 			pathname: o
 		});
-		if (!s) return Qe(c ?? "the requested Router could not be resolved."), null;
-		if (c && Ze(c), r && !tt(s, r, o)) {
+		if (!s) return ut(c ?? "the requested Router could not be resolved."), null;
+		if (c && lt(c), r && !U(s, r, o)) {
 			let e = `"${r}" is not declared by ${s.name ? `<Router name="${s.name}">` : "the target <Router>"}, so the navigation cannot mount a screen there. Declare a matching <Route>, target the Router that owns it, or use \`router: "nearest-owner"\`.`;
-			a !== void 0 || s.strictRoutes ? Qe(e) : Ze(e);
+			a !== void 0 || s.strictRoutes ? ut(e) : lt(e);
 		}
-		return x({
+		return E({
 			stores: s.stores,
-			buildPathname: (e, t) => mt(e, t),
+			buildPathname: (e, t) => wt(e, t),
 			driver: s.stores.driver,
 			markSelfInduced: s.stores.markSelfInduced
 		});
@@ -403,26 +393,26 @@ function Z(e) {
 }
 //#endregion
 //#region src/navigate/usePathname.ts
-function ht() {
-	return U((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
+function Et() {
+	return V((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
 }
 //#endregion
 //#region src/navigate/useStep.ts
-function gt() {
-	let { routePath: e } = B(), t = L(), n = o(Ve), { driver: r, markSelfInduced: i } = t, [a, c] = m(null);
-	s(() => {
-		if (!e) return c(Me(r.readState())), r.subscribe((e) => c(Me(e.state)));
+function Dt() {
+	let { routePath: e } = F(), t = P(), n = s(I), { driver: r, markSelfInduced: i } = t, [a, o] = m(null);
+	c(() => {
+		if (!e) return o(Le(r.readState())), r.subscribe((e) => o(Le(e.state)));
 	}, [e, r]);
-	let l = O({
+	let l = be({
 		stores: t,
 		driver: r,
 		markSelfInduced: i,
-		buildStepPathname: (t) => e ? mt(e, t).pathname : ne(r.readPathname(), t),
+		buildStepPathname: (t) => e ? wt(e, t).pathname : y(r.readPathname(), t),
 		applyParams: (t) => {
 			n({
 				type: "SET",
 				params: t
-			}), e || c(t);
+			}), e || o(t);
 		}
 	});
 	return {
@@ -434,53 +424,67 @@ function gt() {
 }
 //#endregion
 //#region src/screen/ParamsProvider/useParams.ts
-function _t() {
-	return o(V);
+function Ot() {
+	return s(tt);
 }
 //#endregion
 //#region src/screen/ScreenFreeze.tsx
-var vt = 3e3;
-function yt({ freeze: e, children: n }) {
-	let [r, i] = m(e), a = p(null);
-	return !e && r && i(!1), s(() => {
-		if (!(!e || r)) {
-			if (!ve()) {
-				i(!0);
+var kt = 3e3;
+function At({ freeze: e, mode: n = "deferred", children: r }) {
+	let [i, a] = m(e), o = p(null);
+	return !e && i && a(!1), c(() => {
+		if (!(!e || i)) {
+			if (n === "immediate" || !Oe()) {
+				a(!0);
 				return;
 			}
-			return a.current = setTimeout(() => {
-				a.current = null, i(!0);
-			}, vt), () => {
-				a.current !== null && (clearTimeout(a.current), a.current = null);
+			return o.current = setTimeout(() => {
+				o.current = null, a(!0);
+			}, kt), () => {
+				o.current !== null && (clearTimeout(o.current), o.current = null);
 			};
 		}
-	}, [e, r]), /* @__PURE__ */ F(t, {
-		mode: e && r ? "hidden" : "visible",
-		children: n
+	}, [
+		e,
+		i,
+		n
+	]), /* @__PURE__ */ N(t, {
+		mode: e && i ? "hidden" : "visible",
+		children: r
 	});
 }
 //#endregion
+//#region src/screen/LayerContext.ts
+var jt = r(null);
+function Mt() {
+	return s(jt);
+}
+var Nt = r(null);
+function X() {
+	return s(Nt);
+}
+//#endregion
 //#region src/screen/scopeAnimHoldCoordinator.ts
-var bt = /* @__PURE__ */ new WeakMap();
-function xt(e) {
-	let t = bt.get(e);
-	return t || (t = g(), bt.set(e, t)), t;
+var Pt = /* @__PURE__ */ new WeakMap();
+function Ft(e) {
+	let t = Pt.get(e);
+	return t || (t = x(), Pt.set(e, t)), t;
 }
 //#endregion
 //#region src/stores/useNavigateStore.ts
-function St(e) {
-	return H(L().navigate, e);
+function It(e) {
+	return B(P().navigate, e);
 }
 //#endregion
 //#region src/screen/ScreenDecorator.tsx
-function Ct({ ref: e, style: t, ...n }) {
-	let { isActive: r, isPrev: i, transitionName: a } = B(), o = p(null);
-	l(e, () => o.current);
-	let s = St((e) => i ? "COMPLETED" : e.status), { decoratorName: c } = Fe(a), u = de.get(c);
-	return u ? /* @__PURE__ */ F("div", {
+function Lt({ ref: e, style: t, ...n }) {
+	let { isActive: r, isPrev: i, transitionName: a } = F(), o = p(null);
+	u(e, () => o.current);
+	let s = It((e) => i ? "COMPLETED" : e.status), { decoratorName: c } = He(a), l = we.get(c);
+	return l ? /* @__PURE__ */ N("div", {
 		ref: o,
 		"data-flemo-decorator": !0,
-		"data-flemo-decorator-name": u.name,
+		"data-flemo-decorator-name": l.name,
 		"data-flemo-status": s,
 		"data-flemo-active": r ? "true" : "false",
 		style: {
@@ -490,7 +494,6 @@ function Ct({ ref: e, style: t, ...n }) {
 			width: "100%",
 			height: "100%",
 			pointerEvents: "none",
-			zIndex: 1,
 			...t
 		},
 		...n
@@ -498,9 +501,9 @@ function Ct({ ref: e, style: t, ...n }) {
 }
 //#endregion
 //#region src/screen/useViewportScrollHeight.ts
-function wt() {
+function Rt() {
 	let [e, t] = m(0), [n, r] = m(0);
-	return s(() => we((e, n) => {
+	return c(() => Fe((e, n) => {
 		r(n), t(e);
 	}), []), {
 		viewportScrollHeight: e,
@@ -509,354 +512,387 @@ function wt() {
 }
 //#endregion
 //#region src/utils/useHydrationSafeFlag.ts
-var Tt = () => () => {}, Q = () => !1;
-function Et(e) {
-	return ee(Tt, e, Q);
+var zt = () => () => {}, Bt = () => !1;
+function Vt(e) {
+	return te(zt, e, Bt);
 }
 //#endregion
 //#region src/stores/useScreenStore.ts
-function $(e) {
-	return H(L().screen, e);
+function Z(e) {
+	return B(P().screen, e);
 }
 //#endregion
 //#region src/screen/ScreenMotion.tsx
-function Dt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: i, sharedTopBar: c, sharedTopBarId: l, sharedBottomBar: u, sharedBottomBarId: f, topBar: ee, bottomBar: ne, hideStatusBar: h, hideSystemNavigationBar: ae, backgroundColor: oe = "white", contentScrollable: g = !0, ..._ }) {
-	let { id: v, isActive: y, isRoot: b, isPrev: se, zIndex: x, transitionName: S, prevTransitionName: ce } = B(), { contained: C } = Je(), w = C ? "absolute" : "fixed", T = L(), E = o(Ge), D = U((e) => e.index), O = U((e) => e.histories), k = y || x === D - 1, A = St((e) => k ? e.status : "COMPLETED"), pe = $((e) => e.dragStatus), me = $((e) => e.replaceTransitionStatus), M = T.screen.getState().setDragStatus, ge = T.screen.getState().setReplaceTransitionStatus, N = y ? O[D - 1]?.id : O[D]?.id, ve = $((e) => N ? e.sharedBars[N] : void 0), P = $((e) => N ? e.sharedBarMetadata[N] : void 0), be = $((e) => N ? e.screenSurfaces[N] : void 0), xe = p(null);
-	xe.current ||= ue({
-		getTransitionTaskId: () => T.navigate.getState().transitionTaskId,
-		setDragStatus: M,
-		setReplaceTransitionStatus: ge
+function Ht({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: i, sharedTopBar: a, sharedTopBarId: l, sharedBottomBar: u, sharedBottomBarId: d, topBar: ee, bottomBar: te, hideStatusBar: ie, hideSystemNavigationBar: ae, backgroundColor: y = "white", contentScrollable: ce = !0, paintHidden: ue = !1, ...pe }) {
+	let { id: b, isActive: x, isRoot: S, isPrev: me, zIndex: C, transitionName: w, prevTransitionName: T } = F(), { contained: he } = ot(), E = he ? "absolute" : "fixed", D = P(), O = s(nt), k = V((e) => e.index), ge = V((e) => e.histories), _e = x || C === k - 1, A = It((e) => _e ? e.status : "COMPLETED"), ve = Z((e) => e.dragStatus), ye = Z((e) => e.replaceTransitionStatus), be = D.screen.getState().setDragStatus, Se = D.screen.getState().setReplaceTransitionStatus, j = x ? ge[k - 1]?.id : ge[k]?.id, Ee = Z((e) => j ? e.sharedBars[j] : void 0), M = Z((e) => j ? e.sharedBarMetadata[j] : void 0), Oe = Z((e) => j ? e.screenSurfaces[j] : void 0), Ae = p(null);
+	Ae.current ||= Ce({
+		getTransitionTaskId: () => D.navigate.getState().transitionTaskId,
+		setDragStatus: be,
+		setReplaceTransitionStatus: Se
 	});
-	let Se = xe.current, we = p(null);
-	we.current ||= xt(T.navigate);
-	let Te = Fe(S), { initial: Oe, swipeDirection: Me, decoratorName: Ne } = Te, Pe = de.get(Ne), { viewportScrollHeight: Ie } = wt(), Re = Ie > 0, I = !!c, R = !!u, z = I ? `${typeof l}:${String(l)}` : null, V = R ? `${typeof f}:${String(f)}` : null, [Ve, He] = m({
-		key: z,
+	let je = Ae.current, Me = p(null);
+	Me.current ||= Ft(D.navigate);
+	let Ne = He(w), { initial: Fe, swipeDirection: Ie, decoratorName: Le } = Ne, Re = we.get(Le), { viewportScrollHeight: ze } = Rt(), Be = ze > 0, [We, Ke] = m(null), qe = Mt(), Je = qe ?? We, Qe = p(/* @__PURE__ */ new Set()), [$e, et] = m(!1), tt = o((e) => {
+		let t = Qe.current;
+		e ? t.add(e) : t.clear(), et(t.size > 0);
+	}, []), I = !!a, L = !!u, R = I ? `${typeof l}:${String(l)}` : null, z = L ? `${typeof d}:${String(d)}` : null, [B, rt] = m({
+		key: R,
 		height: 0
-	}), [Ue, We] = m({
-		key: V,
+	}), [it, at] = m({
+		key: z,
 		height: 0
-	}), H = p(Ve), Ke = p(Ue), qe = Ve.key === z ? Ve.height : 0, Ye = Ue.key === V ? Ue.height : 0, Xe = Le(I ? { id: l } : void 0, P?.topBar) ? P?.topBar?.height ?? 0 : 0, Ze = Le(R ? { id: f } : void 0, P?.bottomBar) ? P?.bottomBar?.height ?? 0 : 0, Qe = qe || Xe, $e = Ye || Ze, W = p(null), G = p(null), et = p(null), K = p(null), tt = p(null), q = p(null), J = p(null), nt = a((e) => {
-		e <= 0 || z === null || (K.current && (K.current.style.minHeight = `${e}px`), H.current = {
-			key: z,
+	}), st = p(B), ct = p(it), lt = B.key === R ? B.height : 0, ut = it.key === z ? it.height : 0, dt = Ge(I ? { id: l } : void 0, M?.topBar) ? M?.topBar?.height ?? 0 : 0, ft = Ge(L ? { id: d } : void 0, M?.bottomBar) ? M?.bottomBar?.height ?? 0 : 0, pt = lt || dt, mt = ut || ft, H = p(null), U = p(null), W = p(null), ht = p(null), gt = p(null), G = p(null), K = p(null), q = o((e) => {
+		e <= 0 || R === null || (ht.current && (ht.current.style.minHeight = `${e}px`), st.current = {
+			key: R,
 			height: e
-		}, He((t) => t.key === z && t.height === e ? t : {
-			key: z,
+		}, rt((t) => t.key === R && t.height === e ? t : {
+			key: R,
 			height: e
-		}), T.screen.getState().updateSharedBarHeight(v, "topBar", e));
+		}), D.screen.getState().updateSharedBarHeight(b, "topBar", e));
 	}, [
-		v,
-		T.screen,
-		z
-	]), rt = a((e) => {
-		e <= 0 || V === null || (tt.current && (tt.current.style.minHeight = `${e}px`), Ke.current = {
-			key: V,
+		b,
+		D.screen,
+		R
+	]), _t = o((e) => {
+		e <= 0 || z === null || (gt.current && (gt.current.style.minHeight = `${e}px`), ct.current = {
+			key: z,
 			height: e
-		}, We((t) => t.key === V && t.height === e ? t : {
-			key: V,
+		}, at((t) => t.key === z && t.height === e ? t : {
+			key: z,
 			height: e
-		}), T.screen.getState().updateSharedBarHeight(v, "bottomBar", e));
+		}), D.screen.getState().updateSharedBarHeight(b, "bottomBar", e));
 	}, [
-		V,
-		v,
-		T.screen
-	]), it = a((e) => {
-		q.current = e, e?.offsetHeight && nt(e.offsetHeight);
-	}, [nt]), at = a((e) => {
-		J.current = e, e?.offsetHeight && rt(e.offsetHeight);
-	}, [rt]), Y = p({
-		transition: Te,
-		decorator: Pe,
-		hasSharedTopBar: !!c,
+		z,
+		b,
+		D.screen
+	]), vt = o((e) => {
+		G.current = e, e?.offsetHeight && q(e.offsetHeight);
+	}, [q]), yt = o((e) => {
+		K.current = e, e?.offsetHeight && _t(e.offsetHeight);
+	}, [_t]), J = p({
+		transition: Ne,
+		decorator: Re,
+		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!u,
 		sharedTopBarId: l,
-		sharedBottomBarId: f,
-		viewportScrollHeight: Ie,
-		isRoot: b,
-		isActive: y,
+		sharedBottomBarId: d,
+		viewportScrollHeight: ze,
+		isRoot: S,
+		isActive: x,
 		status: A,
-		dragStatus: pe,
-		index: D
+		dragStatus: ve,
+		index: k
 	});
-	Y.current = {
-		transition: Te,
-		decorator: Pe,
-		hasSharedTopBar: !!c,
+	J.current = {
+		transition: Ne,
+		decorator: Re,
+		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!u,
 		sharedTopBarId: l,
-		sharedBottomBarId: f,
-		viewportScrollHeight: Ie,
-		isRoot: b,
-		isActive: y,
+		sharedBottomBarId: d,
+		viewportScrollHeight: ze,
+		isRoot: S,
+		isActive: x,
 		status: A,
-		dragStatus: pe,
-		index: D
+		dragStatus: ve,
+		index: k
 	};
-	let ot = p(null);
-	ot.current ||= le({
-		getTransition: () => Y.current.transition,
-		getDecorator: () => Y.current.decorator,
+	let bt = p(null), xt = p(null);
+	bt.current ||= xe({
+		getTransition: () => J.current.transition,
+		getDecorator: () => J.current.decorator,
 		getElements: () => ({
-			scope: G.current,
-			screenContainer: W.current,
-			decorator: et.current,
-			sharedTopBar: q.current,
-			sharedBottomBar: J.current
+			scope: U.current,
+			screenContainer: H.current,
+			decorator: W.current,
+			sharedTopBar: G.current,
+			sharedBottomBar: K.current
 		}),
-		hasSharedTopBar: () => Y.current.hasSharedTopBar,
-		hasSharedBottomBar: () => Y.current.hasSharedBottomBar,
-		getSharedTopBarId: () => Y.current.sharedTopBarId,
-		getSharedBottomBarId: () => Y.current.sharedBottomBarId,
-		getViewportScrollHeight: () => Y.current.viewportScrollHeight,
+		hasSharedTopBar: () => J.current.hasSharedTopBar,
+		hasSharedBottomBar: () => J.current.hasSharedBottomBar,
+		getSharedTopBarId: () => J.current.sharedTopBarId,
+		getSharedBottomBarId: () => J.current.sharedBottomBarId,
+		getViewportScrollHeight: () => J.current.viewportScrollHeight,
 		isReadyForDrag: () => {
-			let e = Y.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 = Y.current, t = T.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
-			return n ? T.screen.getState().sharedBars[n] : void 0;
+			let e = J.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;
 		},
 		getPartnerBarMetadata: () => {
-			let e = Y.current, t = T.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
-			return n ? T.screen.getState().sharedBarMetadata[n] : void 0;
+			let e = J.current, t = D.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
+			return n ? D.screen.getState().sharedBarMetadata[n] : void 0;
+		},
+		setDragStatus: be,
+		back: () => D.driver.back(),
+		onDragStart: () => {
+			xt.current = le(D.navigate, "POPPING");
 		},
-		setDragStatus: M,
-		back: () => window.history.back()
+		onDragProgress: (e) => {
+			xt.current?.scrub(e);
+		},
+		onDragSettle: (e, t) => {
+			xt.current?.settle(e, t), xt.current = null;
+		}
 	});
-	let X = ot.current, st = (e) => X.pointerDown(e.nativeEvent), ct = (e) => X.pointerMove(e.nativeEvent), lt = (e) => X.pointerUp(e.nativeEvent), ut = (e) => X.pointerCancel(e.nativeEvent), dt = (e) => {
+	let Y = bt.current, St = (e) => Y.pointerDown(e.nativeEvent), Ct = (e) => Y.pointerMove(e.nativeEvent), wt = (e) => Y.pointerUp(e.nativeEvent), Tt = (e) => Y.pointerCancel(e.nativeEvent), Et = (e) => Y.lostPointerCapture(e.nativeEvent), Dt = (e) => {
 		(A === "PUSHING" || A === "REPLACING") && (e.preventDefault(), e.stopPropagation());
 	};
-	s(() => {
-		fe(G.current);
-	}, []), s(() => {
-		let e = G.current;
+	c(() => {
+		Te(U.current);
+	}, []), c(() => {
+		let e = U.current;
 		if (!e) return;
 		let t = (e) => {
-			X.shouldPreventTouch() && e.preventDefault();
+			Y.shouldPreventTouch() && e.preventDefault();
 		};
 		return e.addEventListener("touchmove", t, { passive: !1 }), () => {
-			e.removeEventListener("touchmove", t);
+			e.removeEventListener("touchmove", t), Y.abandon();
 		};
-	}, [X]), d(() => {
-		let { registerSharedBars: e, unregisterSharedBars: t } = T.screen.getState(), n = H.current, r = Ke.current;
-		return e(v, {
+	}, [Y]), f(() => {
+		let { registerSharedBars: e, unregisterSharedBars: t } = D.screen.getState(), n = st.current, r = ct.current;
+		return e(b, {
 			topBar: I,
-			bottomBar: R
+			bottomBar: L
 		}, {
 			topBar: I ? {
 				id: l,
-				height: n.key === z ? n.height : void 0
+				height: n.key === R ? n.height : void 0
 			} : void 0,
-			bottomBar: R ? {
-				id: f,
-				height: r.key === V ? r.height : void 0
+			bottomBar: L ? {
+				id: d,
+				height: r.key === z ? r.height : void 0
 			} : void 0
-		}), () => t(v);
+		}), () => t(b);
 	}, [
-		V,
-		R,
+		z,
+		L,
 		I,
-		v,
-		f,
+		b,
+		d,
 		l,
-		T.screen,
-		z
-	]), d(() => {
-		let e = q.current;
-		if (e) return Ce(e, nt);
-	}, [nt, c]), d(() => {
-		let e = J.current;
-		if (e) return Ce(e, rt);
-	}, [rt, u]), d(() => {
+		D.screen,
+		R
+	]), f(() => {
 		let e = G.current;
+		if (e) return Pe(e, q);
+	}, [q, I]), f(() => {
+		let e = K.current;
+		if (e) return Pe(e, _t);
+	}, [_t, L]), f(() => {
+		let e = U.current;
 		if (!e) return;
-		let { registerScreenSurface: t, unregisterScreenSurface: n } = T.screen.getState();
-		return t(v, { opaqueBackground: ye(getComputedStyle(e).backgroundColor) }), () => n(v);
+		let { registerScreenSurface: t, unregisterScreenSurface: n } = D.screen.getState();
+		return t(b, { opaqueBackground: ke(getComputedStyle(e).backgroundColor) }), () => n(b);
 	}, [
-		v,
-		oe,
+		b,
+		y,
 		A,
-		T.screen
+		D.screen
 	]);
-	let ft = k, { app: pt, nav: mt } = re({
+	let Ot = _e, { app: kt, nav: At } = de({
 		status: A,
-		isTopOrTopPrev: ft,
+		isTopOrTopPrev: Ot,
 		hasTopBar: I,
-		hasNavBar: R,
+		hasNavBar: L,
 		topBarId: l,
-		bottomBarId: f,
-		partnerBars: ve,
-		partnerMetadata: P
-	}), Z = te({
+		bottomBarId: d,
+		partnerBars: Ee,
+		partnerMetadata: M
+	}), X = se({
 		status: A,
-		isTopOrTopPrev: ft,
-		transitionName: S
-	}), ht = ie({
-		isActive: y,
-		isPrev: se,
-		zIndex: x,
-		index: D,
+		isTopOrTopPrev: Ot,
+		transitionName: w
+	}), Pt = fe({
+		isActive: x,
+		isPrev: me,
+		zIndex: C,
+		index: k,
 		status: A,
-		dragStatus: pe,
-		replaceTransitionStatus: me
-	}), gt = p(ht), _t = p(Z !== null && ht), vt = p(null), [yt, bt] = m({
-		key: Z,
-		released: Z === null
+		dragStatus: ve,
+		replaceTransitionStatus: ye
+	}), zt = p(Pt), Bt = p(X !== null && Pt), Ht = p(null), [Ut, Wt] = m({
+		key: X,
+		released: X === null
 	});
-	yt.key !== Z && (bt({
-		key: Z,
-		released: Z === null
-	}), vt.current = null, _t.current = Z !== null && gt.current), gt.current = ht;
-	let Tt = Z !== null && yt.key === Z && !yt.released && vt.current !== Z, Q = Tt ? !y && be?.opaqueBackground ? "park" : y && (A === "PUSHING" || A === "REPLACING") && be?.opaqueBackground ? ke() || _e() ? "park-over" : "park-under" : "true" : "false", Dt = Et(Ae);
-	d(() => Se.driveScreenLifecycle({
+	Ut.key !== X && (Wt({
+		key: X,
+		released: X === null
+	}), Ht.current = null, Bt.current = X !== null && zt.current), zt.current = Pt;
+	let Q = X !== null && Ut.key === X && !Ut.released && Ht.current !== X, $ = Q ? !x && Oe?.opaqueBackground ? h.PARK : x && (A === "PUSHING" || A === "REPLACING") && Oe?.opaqueBackground ? Ve().parkOver ? h.PARK_OVER : h.PARK_UNDER : h.HELD : h.RELEASED, Gt = {
+		zIndex: C,
+		paintHidden: ue,
+		transitionName: w,
+		status: A,
+		isActive: x,
+		animHold: $,
+		rendersHost: !qe,
+		screenId: b,
+		registerSlot: tt
+	}, Kt = Vt(Ue);
+	f(() => je.driveScreenLifecycle({
 		getElements: () => ({
-			scope: G.current,
-			decorator: et.current,
-			bars: [q.current, J.current]
+			scope: U.current,
+			decorator: W.current,
+			bars: [G.current, K.current],
+			screenContainer: H.current
 		}),
-		transitionName: S,
-		prevTransitionName: ce,
+		transitionName: w,
+		prevTransitionName: T,
 		status: A,
-		isActive: y,
-		animHoldReleased: !Tt
+		isActive: x,
+		animHoldReleased: !Q
 	}), [
-		Se,
+		je,
 		A,
-		y,
-		ce,
-		S,
-		Tt
-	]), s(() => {
-		if (!Tt || Z === null) return;
-		let e = Z, t = T.navigate.getState().transitionTaskId, n = t === null ? e : `${e}#${t}`;
-		return we.current.join(n, () => {
-			let t = (Y.current.transition.driver === "native" || _e() || De()) && !j();
-			if (t) {
+		x,
+		T,
+		w,
+		Q
+	]), c(() => {
+		if (!Q || X === null) return;
+		let e = X, t = D.navigate.getState().transitionTaskId, n = t === null ? e : `${e}#${t}`;
+		return Me.current.join(n, () => {
+			let t = J.current.transition.driver === "native", n = Ve({ authoredNativeDriver: t }).atomicReleaseFlip;
+			if (n) {
 				for (let e of [
+					U.current,
 					G.current,
-					q.current,
-					J.current,
-					et.current
-				]) e?.isConnected && e.getAttribute("data-flemo-anim-hold") !== null && e.setAttribute("data-flemo-anim-hold", "false");
-				W.current && (W.current.style.zIndex = ""), vt.current = e;
+					K.current,
+					W.current
+				]) e?.isConnected && e.getAttribute(g) !== null && e.setAttribute(g, h.RELEASED);
+				H.current && (H.current.style.zIndex = String(C + 1)), Ht.current = e;
 			}
 			{
-				let n = () => bt((t) => t.key === e && !t.released ? {
+				let t = () => Wt((t) => t.key === e && !t.released ? {
 					key: e,
 					released: !0
 				} : t);
-				t && Ee() && typeof requestAnimationFrame == "function" ? requestAnimationFrame(() => n()) : Be(n);
+				n && Ve().deferReleaseCommit && typeof requestAnimationFrame == "function" ? requestAnimationFrame(() => t()) : Ze(t);
 			}
 		}, {
-			scope: G.current,
-			decodeWait: _t.current,
-			contentSettle: je() && (y && A === "PUSHING" || A === "POPPING") ? {
+			scope: U.current,
+			decodeWait: Bt.current,
+			contentSettle: Ve().renderSettleGate && (x && A === "PUSHING" || A === "POPPING") ? {
 				firstWaitMs: 120,
 				capMs: 700,
 				graceMs: 60,
-				minNodes: y ? 30 : 1,
+				minNodes: x ? 30 : 1,
 				renderSettleOnly: !0
 			} : void 0
 		});
 	}, [
-		Tt,
-		Z,
 		Q,
-		y,
+		X,
+		$,
+		x,
 		A,
-		T.navigate
+		D.navigate,
+		C
 	]);
-	let Ot = Q === "park-under" || Q === "park-over" ? {} : he({
-		initial: Oe,
-		isActive: y,
+	let qt = $ === h.PARK_UNDER || $ === h.PARK_OVER ? {} : De({
+		initial: Fe,
+		isActive: x,
 		status: A
 	});
-	return /* @__PURE__ */ ze("div", {
-		ref: W,
-		onClickCapture: dt,
+	return /* @__PURE__ */ Ye("div", {
+		ref: H,
+		onClickCapture: Dt,
 		style: {
-			position: w,
+			position: E,
 			top: 0,
 			left: 0,
 			width: "100%",
 			height: "100%",
 			display: "flex",
-			zIndex: Q === "park-under" ? -1 : void 0,
-			contain: "layout style",
+			visibility: ue ? "hidden" : void 0,
+			zIndex: $ === h.PARK_UNDER ? C - 1 : C + 1,
+			isolation: "isolate",
+			contain: "style",
 			flexDirection: "column",
 			boxSizing: "border-box",
 			overscrollBehavior: "contain"
 		},
 		children: [
-			/* @__PURE__ */ ze("div", {
-				ref: G,
-				..._,
-				onPointerDown: st,
-				onPointerMove: ct,
-				onPointerUp: lt,
-				onPointerCancel: ut,
-				"data-flemo-screen": !0,
-				"data-flemo-router": E ?? void 0,
-				"data-flemo-transition": S,
+			/* @__PURE__ */ Ye("div", {
+				ref: U,
+				...pe,
+				onPointerDown: St,
+				onPointerMove: Ct,
+				onPointerUp: wt,
+				onPointerCancel: Tt,
+				onLostPointerCapture: Et,
+				"data-flemo-screen": b,
+				"data-flemo-router": O ?? void 0,
+				"data-flemo-transition": w,
 				"data-flemo-status": A,
-				"data-flemo-active": y ? "true" : "false",
-				"data-flemo-anim-hold": Q,
+				"data-flemo-active": x ? "true" : "false",
+				"data-flemo-anim-hold": $,
 				style: {
 					display: "flex",
 					flexDirection: "column",
 					height: "100%",
-					backgroundColor: oe,
-					overflowY: g ? void 0 : "auto",
-					touchAction: Me === "x" ? "pan-y" : Me === "y" ? "pan-x" : "auto",
-					...Dt && x === D && !C ? { willChange: "transform" } : {},
-					...Ot,
-					..._.style
+					backgroundColor: y,
+					overflowY: ce ? void 0 : "auto",
+					touchAction: Ie === "x" ? "pan-y" : Ie === "y" ? "pan-x" : "auto",
+					...Kt && C === k && !he ? { willChange: "transform" } : {},
+					...qt,
+					...pe.style
 				},
 				children: [
-					!h && t && /* @__PURE__ */ F("div", {
+					!ie && t && /* @__PURE__ */ N("div", {
 						style: { minHeight: t },
-						children: /* @__PURE__ */ F("div", { style: {
-							position: w,
+						children: /* @__PURE__ */ N("div", { style: {
+							position: E,
 							top: 0,
 							width: "100%",
 							minHeight: t,
 							backgroundColor: n
 						} })
 					}),
-					c && /* @__PURE__ */ F("div", {
-						ref: K,
+					a && /* @__PURE__ */ N("div", {
+						ref: ht,
 						"data-flemo-bar-spacer": "app",
 						style: {
 							width: "100%",
-							minHeight: Qe
+							minHeight: pt
 						}
 					}),
 					ee,
-					/* @__PURE__ */ F("div", {
+					/* @__PURE__ */ N("div", {
 						style: {
 							display: "flex",
 							flexDirection: "column",
 							flexGrow: 1,
-							overflowY: g ? "auto" : void 0
+							overflowY: ce ? "auto" : void 0
 						},
-						children: e
+						children: /* @__PURE__ */ N(jt.Provider, {
+							value: Je,
+							children: /* @__PURE__ */ N(Nt.Provider, {
+								value: Gt,
+								children: e
+							})
+						})
 					}),
-					ne,
-					u && /* @__PURE__ */ F("div", {
-						ref: tt,
+					te,
+					u && /* @__PURE__ */ N("div", {
+						ref: gt,
 						"data-flemo-bar-spacer": "nav",
 						style: {
-							display: Re ? "none" : void 0,
+							display: Be ? "none" : void 0,
 							width: "100%",
-							minHeight: $e
+							minHeight: mt
 						}
 					}),
-					!ae && r && /* @__PURE__ */ F("div", {
+					!ae && r && /* @__PURE__ */ N("div", {
 						style: {
-							display: Re ? "none" : void 0,
+							display: Be ? "none" : void 0,
 							minHeight: r
 						},
-						children: /* @__PURE__ */ F("div", { style: {
-							position: w,
+						children: /* @__PURE__ */ N("div", { style: {
+							position: E,
 							bottom: 0,
 							width: "100%",
 							minHeight: r,
@@ -865,88 +901,106 @@ function Dt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					})
 				]
 			}),
-			c && /* @__PURE__ */ F("div", {
-				ref: it,
+			a && /* @__PURE__ */ N("div", {
+				ref: vt,
 				"data-flemo-bar": "app",
 				"data-flemo-bar-id": l,
 				"data-flemo-bar-id-type": l === void 0 ? void 0 : typeof l,
-				"data-flemo-router": E ?? void 0,
-				"data-flemo-bar-transition": S,
+				"data-flemo-router": O ?? void 0,
+				"data-flemo-bar-transition": w,
 				"data-flemo-bar-status": A,
-				"data-flemo-bar-active": y ? "true" : "false",
-				"data-flemo-bar-riding": pt ? "true" : "false",
-				"data-flemo-anim-hold": Q,
+				"data-flemo-bar-active": x ? "true" : "false",
+				"data-flemo-bar-riding": kt ? "true" : "false",
+				"data-flemo-anim-hold": $,
 				style: {
-					position: w,
-					top: h ? 0 : t,
+					position: E,
+					top: ie ? 0 : t,
 					left: 0,
-					width: "100%",
-					zIndex: 1
+					width: "100%"
 				},
-				children: c
+				children: a
 			}),
-			u && /* @__PURE__ */ F("div", {
-				ref: at,
+			u && /* @__PURE__ */ N("div", {
+				ref: yt,
 				"data-flemo-bar": "nav",
-				"data-flemo-bar-id": f,
-				"data-flemo-bar-id-type": f === void 0 ? void 0 : typeof f,
-				"data-flemo-router": E ?? void 0,
-				"data-flemo-bar-transition": S,
+				"data-flemo-bar-id": d,
+				"data-flemo-bar-id-type": d === void 0 ? void 0 : typeof d,
+				"data-flemo-router": O ?? void 0,
+				"data-flemo-bar-transition": w,
 				"data-flemo-bar-status": A,
-				"data-flemo-bar-active": y ? "true" : "false",
-				"data-flemo-bar-riding": mt ? "true" : "false",
-				"data-flemo-anim-hold": Q,
+				"data-flemo-bar-active": x ? "true" : "false",
+				"data-flemo-bar-riding": At ? "true" : "false",
+				"data-flemo-anim-hold": $,
 				style: {
-					display: Re ? "none" : void 0,
-					position: w,
+					display: Be ? "none" : void 0,
+					position: E,
 					bottom: ae ? 0 : r,
 					left: 0,
-					width: "100%",
-					zIndex: 1
+					width: "100%"
 				},
 				children: u
 			}),
-			Pe && /* @__PURE__ */ F(Ct, {
-				ref: et,
-				"data-flemo-anim-hold": Q
+			Re && /* @__PURE__ */ N(Lt, {
+				ref: W,
+				"data-flemo-anim-hold": $
+			}),
+			Re && $e && Je ? Xe(/* @__PURE__ */ N(Lt, {
+				"data-flemo-anim-hold": $,
+				style: { zIndex: C * 2 + 1 }
+			}), Je) : null,
+			!qe && /* @__PURE__ */ N("div", {
+				ref: Ke,
+				[re]: "",
+				[v]: w,
+				[_]: A,
+				[ne]: x ? "true" : "false",
+				[g]: $,
+				style: {
+					position: "absolute",
+					inset: 0,
+					pointerEvents: "none",
+					zIndex: oe
+				}
 			})
 		]
 	});
 }
 //#endregion
 //#region src/screen/Screen.tsx
-function Ot({ children: e, ...t }) {
-	let { isActive: n, isPrev: r, zIndex: i } = B(), a = U((e) => e.index), o = St((e) => e.status), c = $((e) => e.dragStatus), l = $((e) => e.replaceTransitionStatus), u = ae({
+function Ut({ children: e, ...t }) {
+	let { isActive: n, isPrev: r, zIndex: i } = F(), a = V((e) => e.index), o = It((e) => e.status), s = Z((e) => e.dragStatus), l = Z((e) => e.replaceTransitionStatus), u = pe({
 		isActive: n,
 		isPrev: r,
 		zIndex: i,
 		index: a,
 		status: o,
-		dragStatus: c,
+		dragStatus: s,
 		replaceTransitionStatus: l
 	}), [d, f] = m(u !== "live");
-	return u === "live" && d && f(!1), u === "immediate" && !d && f(!0), s(() => {
+	return u === "live" && d && f(!1), u === "immediate" && !d && f(!0), c(() => {
 		if (u !== "deferred" || d) return;
-		let e = setTimeout(() => f(!0), kt);
+		let e = setTimeout(() => f(!0), Wt);
 		return () => clearTimeout(e);
-	}, [u, d]), /* @__PURE__ */ F(yt, {
+	}, [u, d]), /* @__PURE__ */ N(At, {
 		freeze: d,
-		children: /* @__PURE__ */ F(Dt, {
+		mode: u,
+		children: /* @__PURE__ */ N(Ht, {
+			paintHidden: d,
 			...t,
 			children: e
 		})
 	});
 }
-var kt = 600;
+var Wt = 600;
 //#endregion
 //#region src/screen/Part.tsx
-function At({ ref: e, name: t, style: n, children: r, ...i }) {
-	let { isActive: a, isPrev: s, navigateStore: c, routerId: l } = B(), u = o(Ge), d = l ?? u ?? void 0, f = L(), p = H(c ?? f.navigate, (e) => s ? "COMPLETED" : e.status);
-	return /* @__PURE__ */ F("div", {
+function Q({ ref: e, name: t, style: n, children: r, ...i }) {
+	let { isActive: a, isPrev: o, navigateStore: c, routerId: l } = F(), u = s(nt), d = l ?? u ?? void 0, f = P(), ee = B(c ?? f.navigate, (e) => o ? "COMPLETED" : e.status);
+	return /* @__PURE__ */ N("div", {
 		ref: e,
 		"data-flemo-part-name": t,
 		"data-flemo-router": d,
-		"data-flemo-status": p,
+		"data-flemo-status": ee,
 		"data-flemo-active": a ? "true" : "false",
 		style: n,
 		...i,
@@ -954,22 +1008,82 @@ function At({ ref: e, name: t, style: n, children: r, ...i }) {
 	});
 }
 //#endregion
+//#region src/screen/Layer.tsx
+function $({ children: e }) {
+	let t = Mt(), n = X();
+	return !t || !n ? null : Xe(/* @__PURE__ */ N("div", {
+		ref: n.registerSlot,
+		[ae]: "",
+		[ie]: n.screenId,
+		...n.rendersHost ? {} : {
+			[v]: n.transitionName,
+			[_]: n.status,
+			[ne]: n.isActive ? "true" : "false",
+			[g]: n.animHold
+		},
+		style: {
+			position: "absolute",
+			inset: 0,
+			pointerEvents: "none",
+			zIndex: n.zIndex * 2,
+			visibility: n.paintHidden ? "hidden" : void 0
+		},
+		children: /* @__PURE__ */ N("div", {
+			style: {
+				display: "contents",
+				pointerEvents: "auto"
+			},
+			children: e
+		})
+	}), t);
+}
+//#endregion
+//#region src/screen/Morph.tsx
+function Gt({ ref: e, layoutId: t, name: n, as: r = "div", style: a, children: s, ...c }) {
+	let { isActive: l, isPrev: u, navigateStore: d } = F(), ee = P(), m = d ?? ee.navigate, te = B(m, (e) => u ? "COMPLETED" : e.status), ne = p(null), h = o((t) => {
+		ne.current = t, typeof e == "function" ? e(t) : e && (e.current = t);
+	}, [e]);
+	return f(() => {
+		let e = ne.current;
+		if (e) return ce(e, {
+			layoutId: t,
+			name: n,
+			navigateStore: m
+		});
+	}, [
+		t,
+		n,
+		m,
+		te,
+		l
+	]), i(r, {
+		"data-flemo-morph-slot": "",
+		style: { display: "contents" }
+	}, i(r, {
+		ref: h,
+		"data-flemo-morph": "",
+		"data-flemo-morph-name": n,
+		style: a,
+		...c
+	}, s));
+}
+//#endregion
 //#region src/stores/RouterScopeProvider.tsx
-function jt({ children: e }) {
+function Kt({ children: e }) {
 	let [t] = m(() => ({
-		history: b(),
-		navigate: se(),
-		transition: A(),
-		screen: D(),
-		driver: v(),
-		markSelfInduced: xe,
-		consume: oe,
+		history: w(),
+		navigate: he(),
+		transition: j(),
+		screen: ye(),
+		driver: me(),
+		markSelfInduced: je,
+		consume: b,
 		life: { alive: !0 }
 	}));
-	return /* @__PURE__ */ F(I.Provider, {
+	return /* @__PURE__ */ N(Qe.Provider, {
 		value: t,
 		children: e
 	});
 }
 //#endregion
-export { At as Part, pt as Route, ft as Router, jt as RouterScopeProvider, Ot as Screen, z as ScreenContext, Ct as ScreenDecorator, yt as ScreenFreeze, Dt as ScreenMotion, it as Slot, _ as createBrowserHistoryDriver, y as createDecorator, S as createPartTransition, ce as createRawDecorator, C as createRawPartTransition, w as createRawTransition, k as createTransition, Te as partTransitionMap, U as useHistoryStore, Z as useNavigate, St as useNavigateStore, _t as useParams, ht as usePathname, B as useScreen, $ as useScreenStore, gt as useStep, L as useStores, wt as useViewportScrollHeight };
+export { $ as Layer, Gt as Morph, Q as Part, Ct as Route, St as Router, Kt as RouterScopeProvider, Ut as Screen, et as ScreenContext, Lt as ScreenDecorator, At as ScreenFreeze, Ht as ScreenMotion, K as Slot, S as createBrowserHistoryDriver, C as createDecorator, T as createMorphTransition, D as createPartTransition, O as createRawDecorator, k as createRawMorphTransition, ge as createRawPartTransition, _e as createRawTransition, Se as createTransition, Ne as morphTransitionMap, Ie as partTransitionMap, V as useHistoryStore, Tt as useNavigate, It as useNavigateStore, Ot as useParams, Et as usePathname, F as useScreen, Z as useScreenStore, Dt as useStep, P as useStores, Rt as useViewportScrollHeight };