@flemo/react 1.12.8 → 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 { ANIM_HOLD as h, ANIM_HOLD_ATTR as te, animHoldKey as ne, appendParamsQuery as re, buildRoutePath as ie, computeBarRiding as ae, computeScreenFreeze as oe, computeScreenFreezeMode as g, consumeSelfInducedPop as _, createAnimHoldCoordinator as se, createBrowserHistoryDriver as v, createBrowserHistoryDriver as y, createDecorator as b, createHistoryStore as x, createNavigateStore as ce, createNavigationController as le, createPartTransition as S, createRawDecorator as ue, createRawPartTransition as C, createRawTransition as w, createRouterScope as T, createScreenSelector as E, createScreenStore as D, createStepController as O, createSwipeController as de, createTransition as k, createTransitionEngine as fe, createTransitionStore as A, decoratorMap as pe, eagerlyDecodeImages as j, ensureScopeHistorySync as M, enteringInitialStyle as me, getMatchedPathPattern as he, isDesktopBlink as ge, isOpaqueColor as _e, isServer as ve, markSelfInducedPop as N, matchesPathname as ye, observeBarHeight as be, observeViewportScrollHeight as xe, partTransitionMap as Se, readStepParams as Ce, registerTransitionDefinitions as we, releaseScopeHistorySync as Te, resolvePlatformProfile as Ee, resolveTransition as De, restLayerPromotionEnabled as Oe, seedRouterEntry as ke, sharedBarsMatch as Ae, startFlemoRuntime as je, subscribeStepParamsRestore as Me } from "@flemo/core";
-import { jsx as P, jsxs as Ne } from "react/jsx-runtime";
-import { flushSync as Pe } 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 Fe = r(null);
+var Qe = r(null);
 //#endregion
 //#region src/stores/useStores.ts
-function F() {
-	let e = o(Fe);
+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 Ie() {
-	let e = F();
-	return s(() => (M(e), () => Te(e)), [e]), null;
+function $e() {
+	let e = P();
+	return c(() => (Ee(e), () => Be(e)), [e]), null;
 }
 //#endregion
 //#region src/screen/ScreenContext.ts
-var I = r({
+var et = r({
 	id: "",
 	isActive: !1,
 	isRoot: !0,
@@ -29,20 +29,19 @@ var I = r({
 	params: {},
 	transitionName: "none",
 	prevTransitionName: "none",
-	layoutId: null,
 	routePath: ""
 });
 //#endregion
 //#region src/screen/useScreen.ts
-function L() {
-	return o(I);
+function F() {
+	return s(et);
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsContext.ts
-var Le = r({}), R = r(() => {});
+var tt = r({}), I = r(() => {});
 //#endregion
 //#region src/screen/ParamsProvider/ParamsReducer.ts
-function z(e, t) {
+function L(e, t) {
 	switch (t.type) {
 		case "SET": return t.params;
 		default: return e;
@@ -50,10 +49,10 @@ function z(e, t) {
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsProvider.tsx
-function B({ children: e }) {
-	let { isActive: t, params: n } = L(), { driver: r } = F(), [i, a] = f(z, n);
-	return s(() => {
-		if (t) return Me(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 B({ children: e }) {
 		t,
 		a,
 		r
-	]), /* @__PURE__ */ P(R.Provider, {
+	]), /* @__PURE__ */ N(I.Provider, {
 		value: a,
-		children: /* @__PURE__ */ P(Le.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 V = (e) => e;
-function H(t, n = V) {
+//#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(F().history, e);
+function V(e) {
+	return B(P().history, e);
 }
 //#endregion
 //#region src/RouterIdContext.ts
-var Re = r(null);
+var nt = r(null);
 //#endregion
 //#region src/renderer/Renderer.tsx
-function ze({ children: e }) {
-	let t = U((e) => e.index), r = U((e) => e.histories), i = F(), a = o(I), s = o(Re);
-	return E(r, t).map((t) => {
-		let [r] = n.toArray(e).filter((e) => ye(e.props.path, t.pathname));
-		return r ? /* @__PURE__ */ P(I.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: he(r.props.path, t.pathname)
+				routerId: o ?? void 0,
+				routePath: M(r.props.path, t.pathname)
 			},
-			children: /* @__PURE__ */ P(B, { 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 W = r({ contained: !1 });
-function Be() {
-	return o(W);
+var at = r({ contained: !1 });
+function ot() {
+	return s(at);
 }
 //#endregion
 //#region src/transition/styles.ts
-function Ve(e, t, n = []) {
-	u(() => we(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 He() {
+function ct() {
 	return typeof process < "u" && process.env.NODE_ENV !== "production";
 }
-function Ue(e) {
-	!He() || typeof console > "u" || console.error(`[flemo] ${e}`);
+function lt(e) {
+	!ct() || typeof console > "u" || console.error(`[flemo] ${e}`);
 }
-function We(e) {
-	if (He()) throw Error(`[flemo] ${e}`);
+function ut(e) {
+	if (ct()) throw Error(`[flemo] ${e}`);
 }
 //#endregion
 //#region src/RouterDepthContext.ts
-var Ge = r(0), Ke = r(null), qe = [
+var dt = r(0), ft = r(null), pt = [
 	"current",
 	"parent",
 	"root",
 	"nearest-owner"
-], Je = (e) => qe.includes(e), Ye = (e) => {
+], mt = (e) => pt.includes(e), H = (e) => {
 	let t = [];
 	for (let n = e; n; n = n.parent) t.push(n);
 	return t;
 };
-function G(e, t, n) {
-	return e.routePaths.length === 0 || e.routePaths.some((e) => e === t) ? !0 : n ? ye(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 K(e) {
-	return Ye(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 Xe({ 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" ? Je(t) ? i = t : a = t : "scope" in t ? i = t.scope : a = t.name, a !== null) {
-		let t = Ye(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: ${K(e)}.`
+			message: `no <Router name="${a}"> encloses this call. Routers in scope: ${W(e)}.`
 		};
 	}
 	switch (i) {
@@ -174,7 +189,7 @@ function Xe({ 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 = Ye(e);
+			let t = H(e);
 			return {
 				node: t[t.length - 1],
 				message: null
@@ -185,13 +200,13 @@ function Xe({ 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 = Ye(e).find((e) => G(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: ${K(e)}.`
+				message: `no <Router> in scope declares a <Route path="${n}">. Routers in scope: ${W(e)}.`
 			};
 		}
 		default: return {
@@ -200,137 +215,137 @@ function Xe({ from: e, target: t, path: n, pathname: r }) {
 		};
 	}
 }
-function Ze(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 Qe = { contained: !0 };
-function q({ children: e, className: t, style: n }) {
-	return /* @__PURE__ */ P("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__ */ P(W.Provider, {
-			value: Qe,
-			children: /* @__PURE__ */ P(ze, { children: e })
+		children: /* @__PURE__ */ N(at.Provider, {
+			value: G,
+			children: /* @__PURE__ */ N(rt, { children: e })
 		})
 	});
 }
 //#endregion
 //#region src/Router.tsx
-function J(e) {
+function q(e) {
 	let t = null;
 	return n.forEach(e, (e) => {
-		if (t || !i(e)) return;
-		if (e.type === q) {
-			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 = J(r);
+			let e = q(r);
 			e && (t = e);
 		}
 	}), t;
 }
-var $e = typeof window > "u" ? s : d, et = typeof window > "u" ? s : u, tt = [], nt = [], Y = [], rt = { contained: !0 };
-function X({ children: e, name: t, strictRoutes: r = !1, initPath: a = "/", defaultTransitionName: l = "cupertino", transitions: u = tt, decorators: d = nt, partTransitions: f = Y, history: p = "browser", createDriver: ee, className: h, style: te }) {
-	let ne = o(Ge), re = c(), [ie, ae] = m(!1);
-	s(() => ae(!0), []);
-	let oe = ie ? re : null, g = ne > 0, _ = p === "memory", se = c(), v = o(I), b = o(Fe), x = g && v.id ? `_F_${b?.routerKey ?? ""}${v.id}_` : se, ce = J(e), le = ce !== null, S = (ce ?? n.toArray(e).filter(i)).flatMap((e) => e.props?.path ? [e.props.path].flat() : []), ue = g ? null : b, C = ue !== null, w = ee ?? y, [E] = m(() => _ ? null : w(C ? void 0 : x)), D = !g && !_ && !ve(), O = D && E ? E.readPathname() : a || "/", de = O.indexOf("?"), k = (de >= 0 ? O.slice(0, de) : O) || "/", fe = D ? window.location.search : de >= 0 ? O.slice(de) : "", [A] = m(() => T({
-		routePaths: S,
-		pathname: k,
-		search: fe,
-		defaultTransitionName: l,
-		memory: _,
-		browserDriver: E,
-		hostedScope: ue,
-		routerKey: C ? void 0 : x,
-		zoneEntryId: g && !C && v.id || void 0,
-		persistKey: g && !_ && !C ? 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
 	}));
-	$e(() => {
-		A.transition.getState().defaultTransitionName !== l && A.transition.setState({ defaultTransitionName: l });
+	_t(() => {
+		D.transition.getState().defaultTransitionName !== o && D.transition.setState({ defaultTransitionName: o });
 	});
-	let pe = o(Ke), [j] = m(() => ({
+	let O = s(ft), [k] = m(() => ({
 		name: t,
-		stores: A,
-		routePaths: S,
+		stores: D,
+		routePaths: fe,
 		strictRoutes: r,
-		parent: pe,
-		depth: ne
+		parent: O,
+		depth: g
 	}));
-	et(() => {
-		j.name = t, j.stores = A, j.routePaths = S, j.strictRoutes = r, j.parent = pe;
-	}), s(() => {
-		Ze(j) && Ue(`duplicate <Router name="${j.name}">: an enclosing <Router> already uses that name, so \`router\` targets resolve to the nearer one. Give each nested Router a unique name.`);
-	}, [j, t]), $e(() => (A.life.alive = !0, () => {
-		A.life.alive = !1;
-	}), [A]), Ve(u, d, f), s(() => je(), []), s(() => {
-		_ || !E || ke({
-			driver: E,
-			routerKey: C ? null : x,
-			nested: g && !C,
-			seedPathname: k,
-			defaultTransitionName: l,
-			rootParams: A.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,
 		_,
-		C,
-		g,
-		x,
-		k,
-		l,
-		A.history,
-		E
+		le,
+		he,
+		o,
+		D.history,
+		S
 	]);
-	let M = le ? e : /* @__PURE__ */ P(ze, { children: e }), me = /* @__PURE__ */ P(Re.Provider, {
+	let ge = de ? e : /* @__PURE__ */ N(rt, { children: e }), _e = /* @__PURE__ */ N(nt.Provider, {
 		value: oe,
-		children: /* @__PURE__ */ P(Ge.Provider, {
-			value: ne + 1,
-			children: /* @__PURE__ */ P(Ke.Provider, {
-				value: j,
-				children: /* @__PURE__ */ Ne(Fe.Provider, {
-					value: A,
-					children: [!_ && /* @__PURE__ */ P(Ie, {}), g ? /* @__PURE__ */ P(W.Provider, {
-						value: rt,
-						children: M
-					}) : M]
+		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__ */ P("div", {
-		className: h,
+	return _ ? /* @__PURE__ */ Ye("div", {
+		className: ne,
 		style: {
 			position: "relative",
 			overflow: "hidden",
-			...te
+			...h
 		},
-		children: me
-	}) : me;
+		children: [_e, /* @__PURE__ */ N(it, { stores: D })]
+	}) : /* @__PURE__ */ Ye(Je, { children: [_e, /* @__PURE__ */ N(it, { stores: D })] });
 }
 //#endregion
 //#region src/Route.tsx
-function it({ element: e }) {
+function Ct({ element: e }) {
 	return e;
 }
 //#endregion
 //#region src/utils/buildRoutePath.ts
-function at(e, t) {
-	return ie(e, t);
+function wt(e, t) {
+	return ue(e, t);
 }
 //#endregion
 //#region src/navigate/useNavigate.ts
-function ot(e) {
-	let t = F(), n = o(Ke) ?? {
+function Tt(e) {
+	let t = P(), n = s(ft) ?? {
 		stores: t,
 		routePaths: [],
 		strictRoutes: !1,
@@ -339,24 +354,24 @@ function ot(e) {
 	}, r = (t, r, i) => {
 		let a = t ?? e?.router, o;
 		if (r) try {
-			o = at(r, i).toPathname;
+			o = wt(r, i).toPathname;
 		} catch {
 			o = void 0;
 		}
-		let { node: s, message: c } = Xe({
+		let { node: s, message: c } = ht({
 			from: n,
 			target: a,
 			path: r,
 			pathname: o
 		});
-		if (!s) return We(c ?? "the requested Router could not be resolved."), null;
-		if (c && Ue(c), r && !G(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 ? We(e) : Ue(e);
+			a !== void 0 || s.strictRoutes ? ut(e) : lt(e);
 		}
-		return le({
+		return E({
 			stores: s.stores,
-			buildPathname: (e, t) => at(e, t),
+			buildPathname: (e, t) => wt(e, t),
 			driver: s.stores.driver,
 			markSelfInduced: s.stores.markSelfInduced
 		});
@@ -378,26 +393,26 @@ function ot(e) {
 }
 //#endregion
 //#region src/navigate/usePathname.ts
-function st() {
-	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 ct() {
-	let { routePath: e } = L(), t = F(), n = o(R), { driver: r, markSelfInduced: i } = t, [a, c] = m(null);
-	s(() => {
-		if (!e) return c(Ce(r.readState())), r.subscribe((e) => c(Ce(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 ? at(e, t).pathname : re(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 {
@@ -409,53 +424,67 @@ function ct() {
 }
 //#endregion
 //#region src/screen/ParamsProvider/useParams.ts
-function lt() {
-	return o(Le);
+function Ot() {
+	return s(tt);
 }
 //#endregion
 //#region src/screen/ScreenFreeze.tsx
-var ut = 3e3;
-function dt({ freeze: e, children: n }) {
-	let [r, i] = m(e), a = p(null);
-	return !e && r && i(!1), s(() => {
-		if (!(!e || r)) {
-			if (!ge()) {
-				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);
-			}, ut), () => {
-				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__ */ P(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 ft = /* @__PURE__ */ new WeakMap();
-function pt(e) {
-	let t = ft.get(e);
-	return t || (t = se(), ft.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 mt(e) {
-	return H(F().navigate, e);
+function It(e) {
+	return B(P().navigate, e);
 }
 //#endregion
 //#region src/screen/ScreenDecorator.tsx
-function ht({ ref: e, style: t, ...n }) {
-	let { isActive: r, isPrev: i, transitionName: a } = L(), o = p(null);
-	l(e, () => o.current);
-	let s = mt((e) => i ? "COMPLETED" : e.status), { decoratorName: c } = De(a), u = pe.get(c);
-	return u ? /* @__PURE__ */ P("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: {
@@ -465,7 +494,6 @@ function ht({ ref: e, style: t, ...n }) {
 			width: "100%",
 			height: "100%",
 			pointerEvents: "none",
-			zIndex: 1,
 			...t
 		},
 		...n
@@ -473,9 +501,9 @@ function ht({ ref: e, style: t, ...n }) {
 }
 //#endregion
 //#region src/screen/useViewportScrollHeight.ts
-function gt() {
+function Rt() {
 	let [e, t] = m(0), [n, r] = m(0);
-	return s(() => xe((e, n) => {
+	return c(() => Fe((e, n) => {
 		r(n), t(e);
 	}), []), {
 		viewportScrollHeight: e,
@@ -484,355 +512,387 @@ function gt() {
 }
 //#endregion
 //#region src/utils/useHydrationSafeFlag.ts
-var Z = () => () => {}, _t = () => !1;
-function vt(e) {
-	return ee(Z, e, _t);
+var zt = () => () => {}, Bt = () => !1;
+function Vt(e) {
+	return te(zt, e, Bt);
 }
 //#endregion
 //#region src/stores/useScreenStore.ts
-function Q(e) {
-	return H(F().screen, e);
+function Z(e) {
+	return B(P().screen, e);
 }
 //#endregion
 //#region src/screen/ScreenMotion.tsx
-function yt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: i, sharedTopBar: c, sharedTopBarId: l, sharedBottomBar: u, sharedBottomBarId: f, topBar: ee, bottomBar: re, hideStatusBar: ie, hideSystemNavigationBar: g, backgroundColor: _ = "white", contentScrollable: se = !0, ...v }) {
-	let { id: y, isActive: b, isRoot: x, isPrev: ce, zIndex: le, transitionName: S, prevTransitionName: ue } = L(), { contained: C } = Be(), w = C ? "absolute" : "fixed", T = F(), E = o(Re), D = U((e) => e.index), O = U((e) => e.histories), k = b || le === D - 1, A = mt((e) => k ? e.status : "COMPLETED"), M = Q((e) => e.dragStatus), he = Q((e) => e.replaceTransitionStatus), ge = T.screen.getState().setDragStatus, ve = T.screen.getState().setReplaceTransitionStatus, N = b ? O[D - 1]?.id : O[D]?.id, ye = Q((e) => N ? e.sharedBars[N] : void 0), xe = Q((e) => N ? e.sharedBarMetadata[N] : void 0), Se = Q((e) => N ? e.screenSurfaces[N] : void 0), Ce = p(null);
-	Ce.current ||= fe({
-		getTransitionTaskId: () => T.navigate.getState().transitionTaskId,
-		setDragStatus: ge,
-		setReplaceTransitionStatus: ve
+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 we = Ce.current, Te = p(null);
-	Te.current ||= pt(T.navigate);
-	let ke = De(S), { initial: je, swipeDirection: Me, decoratorName: Fe } = ke, Ie = pe.get(Fe), { viewportScrollHeight: I } = gt(), Le = I > 0, R = !!c, z = !!u, B = R ? `${typeof l}:${String(l)}` : null, V = z ? `${typeof f}:${String(f)}` : null, [H, ze] = m({
-		key: B,
+	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
-	}), [W, Ve] = m({
-		key: V,
+	}), [it, at] = m({
+		key: z,
 		height: 0
-	}), He = p(H), Ue = p(W), We = H.key === B ? H.height : 0, Ge = W.key === V ? W.height : 0, Ke = Ae(R ? { id: l } : void 0, xe?.topBar) ? xe?.topBar?.height ?? 0 : 0, qe = Ae(z ? { id: f } : void 0, xe?.bottomBar) ? xe?.bottomBar?.height ?? 0 : 0, Je = We || Ke, Ye = Ge || qe, G = p(null), K = p(null), Xe = p(null), Ze = p(null), Qe = p(null), q = p(null), J = p(null), $e = a((e) => {
-		e <= 0 || B === null || (Ze.current && (Ze.current.style.minHeight = `${e}px`), He.current = {
-			key: B,
+	}), 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
-		}, ze((t) => t.key === B && t.height === e ? t : {
-			key: B,
+		}, rt((t) => t.key === R && t.height === e ? t : {
+			key: R,
 			height: e
-		}), T.screen.getState().updateSharedBarHeight(y, "topBar", e));
+		}), D.screen.getState().updateSharedBarHeight(b, "topBar", e));
 	}, [
-		y,
-		T.screen,
-		B
-	]), et = a((e) => {
-		e <= 0 || V === null || (Qe.current && (Qe.current.style.minHeight = `${e}px`), Ue.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
-		}, Ve((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(y, "bottomBar", e));
+		}), D.screen.getState().updateSharedBarHeight(b, "bottomBar", e));
 	}, [
-		V,
-		y,
-		T.screen
-	]), tt = a((e) => {
-		q.current = e, e?.offsetHeight && $e(e.offsetHeight);
-	}, [$e]), nt = a((e) => {
-		J.current = e, e?.offsetHeight && et(e.offsetHeight);
-	}, [et]), Y = p({
-		transition: ke,
-		decorator: Ie,
-		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: I,
-		isRoot: x,
-		isActive: b,
+		sharedBottomBarId: d,
+		viewportScrollHeight: ze,
+		isRoot: S,
+		isActive: x,
 		status: A,
-		dragStatus: M,
-		index: D
+		dragStatus: ve,
+		index: k
 	});
-	Y.current = {
-		transition: ke,
-		decorator: Ie,
-		hasSharedTopBar: !!c,
+	J.current = {
+		transition: Ne,
+		decorator: Re,
+		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!u,
 		sharedTopBarId: l,
-		sharedBottomBarId: f,
-		viewportScrollHeight: I,
-		isRoot: x,
-		isActive: b,
+		sharedBottomBarId: d,
+		viewportScrollHeight: ze,
+		isRoot: S,
+		isActive: x,
 		status: A,
-		dragStatus: M,
-		index: D
+		dragStatus: ve,
+		index: k
 	};
-	let rt = p(null);
-	rt.current ||= de({
-		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: K.current,
-			screenContainer: G.current,
-			decorator: Xe.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");
+		},
+		onDragProgress: (e) => {
+			xt.current?.scrub(e);
 		},
-		setDragStatus: ge,
-		back: () => window.history.back()
+		onDragSettle: (e, t) => {
+			xt.current?.settle(e, t), xt.current = null;
+		}
 	});
-	let X = rt.current, it = (e) => X.pointerDown(e.nativeEvent), at = (e) => X.pointerMove(e.nativeEvent), ot = (e) => X.pointerUp(e.nativeEvent), st = (e) => X.pointerCancel(e.nativeEvent), ct = (e) => X.lostPointerCapture(e.nativeEvent), lt = (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(() => {
-		j(K.current);
-	}, []), s(() => {
-		let e = K.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), X.abandon();
+			e.removeEventListener("touchmove", t), Y.abandon();
 		};
-	}, [X]), d(() => {
-		let { registerSharedBars: e, unregisterSharedBars: t } = T.screen.getState(), n = He.current, r = Ue.current;
-		return e(y, {
-			topBar: R,
-			bottomBar: z
+	}, [Y]), f(() => {
+		let { registerSharedBars: e, unregisterSharedBars: t } = D.screen.getState(), n = st.current, r = ct.current;
+		return e(b, {
+			topBar: I,
+			bottomBar: L
 		}, {
-			topBar: R ? {
+			topBar: I ? {
 				id: l,
-				height: n.key === B ? n.height : void 0
+				height: n.key === R ? n.height : void 0
 			} : void 0,
-			bottomBar: z ? {
-				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(y);
+		}), () => t(b);
 	}, [
-		V,
 		z,
-		R,
-		y,
-		f,
+		L,
+		I,
+		b,
+		d,
 		l,
-		T.screen,
-		B
-	]), d(() => {
-		let e = q.current;
-		if (e) return be(e, $e);
-	}, [$e, c]), d(() => {
-		let e = J.current;
-		if (e) return be(e, et);
-	}, [et, 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(y, { opaqueBackground: _e(getComputedStyle(e).backgroundColor) }), () => n(y);
+		let { registerScreenSurface: t, unregisterScreenSurface: n } = D.screen.getState();
+		return t(b, { opaqueBackground: ke(getComputedStyle(e).backgroundColor) }), () => n(b);
 	}, [
+		b,
 		y,
-		_,
 		A,
-		T.screen
+		D.screen
 	]);
-	let ut = k, { app: dt, nav: ft } = ae({
+	let Ot = _e, { app: kt, nav: At } = de({
 		status: A,
-		isTopOrTopPrev: ut,
-		hasTopBar: R,
-		hasNavBar: z,
+		isTopOrTopPrev: Ot,
+		hasTopBar: I,
+		hasNavBar: L,
 		topBarId: l,
-		bottomBarId: f,
-		partnerBars: ye,
-		partnerMetadata: xe
-	}), Z = ne({
+		bottomBarId: d,
+		partnerBars: Ee,
+		partnerMetadata: M
+	}), X = se({
 		status: A,
-		isTopOrTopPrev: ut,
-		transitionName: S
-	}), _t = oe({
-		isActive: b,
-		isPrev: ce,
-		zIndex: le,
-		index: D,
+		isTopOrTopPrev: Ot,
+		transitionName: w
+	}), Pt = fe({
+		isActive: x,
+		isPrev: me,
+		zIndex: C,
+		index: k,
 		status: A,
-		dragStatus: M,
-		replaceTransitionStatus: he
-	}), yt = p(_t), bt = p(Z !== null && _t), xt = p(null), [St, Ct] = 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
 	});
-	St.key !== Z && (Ct({
-		key: Z,
-		released: Z === null
-	}), xt.current = null, bt.current = Z !== null && yt.current), yt.current = _t;
-	let wt = Z !== null && St.key === Z && !St.released && xt.current !== Z, $ = wt ? !b && Se?.opaqueBackground ? h.PARK : b && (A === "PUSHING" || A === "REPLACING") && Se?.opaqueBackground ? Ee().parkOver ? h.PARK_OVER : h.PARK_UNDER : h.HELD : h.RELEASED, Tt = vt(Oe);
-	d(() => we.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: K.current,
-			decorator: Xe.current,
-			bars: [q.current, J.current]
+			scope: U.current,
+			decorator: W.current,
+			bars: [G.current, K.current],
+			screenContainer: H.current
 		}),
-		transitionName: S,
-		prevTransitionName: ue,
+		transitionName: w,
+		prevTransitionName: T,
 		status: A,
-		isActive: b,
-		animHoldReleased: !wt
+		isActive: x,
+		animHoldReleased: !Q
 	}), [
-		we,
+		je,
 		A,
-		b,
-		ue,
-		S,
-		wt
-	]), s(() => {
-		if (!wt || Z === null) return;
-		let e = Z, t = T.navigate.getState().transitionTaskId, n = t === null ? e : `${e}#${t}`;
-		return Te.current.join(n, () => {
-			let t = Y.current.transition.driver === "native", n = Ee({ authoredNativeDriver: t }).atomicReleaseFlip;
+		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,
 					K.current,
-					q.current,
-					J.current,
-					Xe.current
-				]) e?.isConnected && e.getAttribute(te) !== null && e.setAttribute(te, h.RELEASED);
-				G.current && (G.current.style.zIndex = ""), xt.current = e;
+					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 t = () => Ct((t) => t.key === e && !t.released ? {
+				let t = () => Wt((t) => t.key === e && !t.released ? {
 					key: e,
 					released: !0
 				} : t);
-				n && Ee().deferReleaseCommit && typeof requestAnimationFrame == "function" ? requestAnimationFrame(() => t()) : Pe(t);
+				n && Ve().deferReleaseCommit && typeof requestAnimationFrame == "function" ? requestAnimationFrame(() => t()) : Ze(t);
 			}
 		}, {
-			scope: K.current,
-			decodeWait: bt.current,
-			contentSettle: Ee().renderSettleGate && (b && 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: b ? 30 : 1,
+				minNodes: x ? 30 : 1,
 				renderSettleOnly: !0
 			} : void 0
 		});
 	}, [
-		wt,
-		Z,
+		Q,
+		X,
 		$,
-		b,
+		x,
 		A,
-		T.navigate
+		D.navigate,
+		C
 	]);
-	let Et = $ === h.PARK_UNDER || $ === h.PARK_OVER ? {} : me({
-		initial: je,
-		isActive: b,
+	let qt = $ === h.PARK_UNDER || $ === h.PARK_OVER ? {} : De({
+		initial: Fe,
+		isActive: x,
 		status: A
 	});
-	return /* @__PURE__ */ Ne("div", {
-		ref: G,
-		onClickCapture: lt,
+	return /* @__PURE__ */ Ye("div", {
+		ref: H,
+		onClickCapture: Dt,
 		style: {
-			position: w,
+			position: E,
 			top: 0,
 			left: 0,
 			width: "100%",
 			height: "100%",
 			display: "flex",
-			zIndex: $ === h.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__ */ Ne("div", {
-				ref: K,
-				...v,
-				onPointerDown: it,
-				onPointerMove: at,
-				onPointerUp: ot,
-				onPointerCancel: st,
-				onLostPointerCapture: ct,
-				"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": b ? "true" : "false",
+				"data-flemo-active": x ? "true" : "false",
 				"data-flemo-anim-hold": $,
 				style: {
 					display: "flex",
 					flexDirection: "column",
 					height: "100%",
-					backgroundColor: _,
-					overflowY: se ? void 0 : "auto",
-					touchAction: Me === "x" ? "pan-y" : Me === "y" ? "pan-x" : "auto",
-					...Tt && le === D && !C ? { willChange: "transform" } : {},
-					...Et,
-					...v.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: [
-					!ie && t && /* @__PURE__ */ P("div", {
+					!ie && t && /* @__PURE__ */ N("div", {
 						style: { minHeight: t },
-						children: /* @__PURE__ */ P("div", { style: {
-							position: w,
+						children: /* @__PURE__ */ N("div", { style: {
+							position: E,
 							top: 0,
 							width: "100%",
 							minHeight: t,
 							backgroundColor: n
 						} })
 					}),
-					c && /* @__PURE__ */ P("div", {
-						ref: Ze,
+					a && /* @__PURE__ */ N("div", {
+						ref: ht,
 						"data-flemo-bar-spacer": "app",
 						style: {
 							width: "100%",
-							minHeight: Je
+							minHeight: pt
 						}
 					}),
 					ee,
-					/* @__PURE__ */ P("div", {
+					/* @__PURE__ */ N("div", {
 						style: {
 							display: "flex",
 							flexDirection: "column",
 							flexGrow: 1,
-							overflowY: se ? "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
+							})
+						})
 					}),
-					re,
-					u && /* @__PURE__ */ P("div", {
-						ref: Qe,
+					te,
+					u && /* @__PURE__ */ N("div", {
+						ref: gt,
 						"data-flemo-bar-spacer": "nav",
 						style: {
-							display: Le ? "none" : void 0,
+							display: Be ? "none" : void 0,
 							width: "100%",
-							minHeight: Ye
+							minHeight: mt
 						}
 					}),
-					!g && r && /* @__PURE__ */ P("div", {
+					!ae && r && /* @__PURE__ */ N("div", {
 						style: {
-							display: Le ? "none" : void 0,
+							display: Be ? "none" : void 0,
 							minHeight: r
 						},
-						children: /* @__PURE__ */ P("div", { style: {
-							position: w,
+						children: /* @__PURE__ */ N("div", { style: {
+							position: E,
 							bottom: 0,
 							width: "100%",
 							minHeight: r,
@@ -841,88 +901,106 @@ function yt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					})
 				]
 			}),
-			c && /* @__PURE__ */ P("div", {
-				ref: tt,
+			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": b ? "true" : "false",
-				"data-flemo-bar-riding": dt ? "true" : "false",
+				"data-flemo-bar-active": x ? "true" : "false",
+				"data-flemo-bar-riding": kt ? "true" : "false",
 				"data-flemo-anim-hold": $,
 				style: {
-					position: w,
+					position: E,
 					top: ie ? 0 : t,
 					left: 0,
-					width: "100%",
-					zIndex: 1
+					width: "100%"
 				},
-				children: c
+				children: a
 			}),
-			u && /* @__PURE__ */ P("div", {
-				ref: nt,
+			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": b ? "true" : "false",
-				"data-flemo-bar-riding": ft ? "true" : "false",
+				"data-flemo-bar-active": x ? "true" : "false",
+				"data-flemo-bar-riding": At ? "true" : "false",
 				"data-flemo-anim-hold": $,
 				style: {
-					display: Le ? "none" : void 0,
-					position: w,
-					bottom: g ? 0 : r,
+					display: Be ? "none" : void 0,
+					position: E,
+					bottom: ae ? 0 : r,
 					left: 0,
-					width: "100%",
-					zIndex: 1
+					width: "100%"
 				},
 				children: u
 			}),
-			Ie && /* @__PURE__ */ P(ht, {
-				ref: Xe,
+			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 bt({ children: e, ...t }) {
-	let { isActive: n, isPrev: r, zIndex: i } = L(), a = U((e) => e.index), o = mt((e) => e.status), c = Q((e) => e.dragStatus), l = Q((e) => e.replaceTransitionStatus), u = g({
+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), xt);
+		let e = setTimeout(() => f(!0), Wt);
 		return () => clearTimeout(e);
-	}, [u, d]), /* @__PURE__ */ P(dt, {
+	}, [u, d]), /* @__PURE__ */ N(At, {
 		freeze: d,
-		children: /* @__PURE__ */ P(yt, {
+		mode: u,
+		children: /* @__PURE__ */ N(Ht, {
+			paintHidden: d,
 			...t,
 			children: e
 		})
 	});
 }
-var xt = 600;
+var Wt = 600;
 //#endregion
 //#region src/screen/Part.tsx
-function St({ ref: e, name: t, style: n, children: r, ...i }) {
-	let { isActive: a, isPrev: s, navigateStore: c, routerId: l } = L(), u = o(Re), d = l ?? u ?? void 0, f = F(), p = H(c ?? f.navigate, (e) => s ? "COMPLETED" : e.status);
-	return /* @__PURE__ */ P("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,
@@ -930,22 +1008,82 @@ function St({ 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 Ct({ children: e }) {
+function Kt({ children: e }) {
 	let [t] = m(() => ({
-		history: x(),
-		navigate: ce(),
-		transition: A(),
-		screen: D(),
-		driver: y(),
-		markSelfInduced: N,
-		consume: _,
+		history: w(),
+		navigate: he(),
+		transition: j(),
+		screen: ye(),
+		driver: me(),
+		markSelfInduced: je,
+		consume: b,
 		life: { alive: !0 }
 	}));
-	return /* @__PURE__ */ P(Fe.Provider, {
+	return /* @__PURE__ */ N(Qe.Provider, {
 		value: t,
 		children: e
 	});
 }
 //#endregion
-export { St as Part, it as Route, X as Router, Ct as RouterScopeProvider, bt as Screen, I as ScreenContext, ht as ScreenDecorator, dt as ScreenFreeze, yt as ScreenMotion, q as Slot, v as createBrowserHistoryDriver, b as createDecorator, S as createPartTransition, ue as createRawDecorator, C as createRawPartTransition, w as createRawTransition, k as createTransition, Se as partTransitionMap, U as useHistoryStore, ot as useNavigate, mt as useNavigateStore, lt as useParams, st as usePathname, L as useScreen, Q as useScreenStore, ct as useStep, F as useStores, gt 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 };