@flemo/react 2.0.0 → 2.1.0

package/README.md

@@ -16,10 +16,6 @@ flemo is a router whose unit of routing is a **screen**, not a page. Push, pop,
 animations and gestures between them belong to the router, so an app does not have to wire a
 routing library and an animation library together and then keep their timing in agreement.
 
-Transitions compile to CSS `@keyframes` and run on the compositor. Shared-element morphs,
-swipe back, and the screen lifecycle are parts of that one engine rather than separate
-integrations.
-
 ## Install
 
 ```bash

package/dist/index.mjs

@@ -1,12 +1,12 @@
 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 { 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 ce, attachMorph as le, beginMorphSwipe as y, 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 E, createNavigationController as D, createPartTransition as O, createRawDecorator as k, createRawMorphTransition as A, createRawPartTransition as he, createRawTransition as ge, createRouterScope as j, createScreenSelector as _e, createScreenStore as ve, createStepController as ye, createSwipeController as be, createTransition as xe, createTransitionEngine as Se, createTransitionStore as M, decoratorMap as Ce, eagerlyDecodeImages as we, ensureScopeHistorySync as Te, enteringInitialStyle as Ee, getMatchedPathPattern as N, isDesktopBlink as De, isOpaqueColor as Oe, isServer as ke, markSelfInducedPop as Ae, matchesPathname as je, morphTransitionMap as Me, observeBarHeight as Ne, observeViewportScrollHeight as Pe, partTransitionMap as Fe, publishRideBox 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 P, jsxs as Ye } from "react/jsx-runtime";
 import { createPortal as Xe, flushSync as Ze } from "react-dom";
 //#region src/stores/StoreContext.ts
 var Qe = r(null);
 //#endregion
 //#region src/stores/useStores.ts
-function P() {
+function F() {
 	let e = s(Qe);
 	if (!e) throw Error("flemo stores are missing. Render inside a <Router>.");
 	return e;
@@ -14,12 +14,12 @@ function P() {
 //#endregion
 //#region src/history/HistoryListener.tsx
 function $e() {
-	let e = P();
-	return c(() => (Ee(e), () => Be(e)), [e]), null;
+	let e = F();
+	return c(() => (Te(e), () => Be(e)), [e]), null;
 }
 //#endregion
 //#region src/screen/ScreenContext.ts
-var et = r({
+var I = r({
 	id: "",
 	isActive: !1,
 	isRoot: !0,
@@ -33,15 +33,15 @@ var et = r({
 });
 //#endregion
 //#region src/screen/useScreen.ts
-function F() {
-	return s(et);
+function L() {
+	return s(I);
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsContext.ts
-var tt = r({}), I = r(() => {});
+var et = r({}), R = r(() => {});
 //#endregion
 //#region src/screen/ParamsProvider/ParamsReducer.ts
-function L(e, t) {
+function z(e, t) {
 	switch (t.type) {
 		case "SET": return t.params;
 		default: return e;
@@ -49,8 +49,8 @@ function L(e, t) {
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsProvider.tsx
-function R({ children: e }) {
-	let { isActive: t, params: n } = F(), { driver: r } = P(), [i, a] = ee(L, n);
+function B({ children: e }) {
+	let { isActive: t, params: n } = L(), { driver: r } = F(), [i, a] = ee(z, n);
 	return c(() => {
 		if (t) return qe(r, (e) => a({
 			type: "SET",
@@ -60,9 +60,9 @@ function R({ children: e }) {
 		t,
 		a,
 		r
-	]), /* @__PURE__ */ N(I.Provider, {
+	]), /* @__PURE__ */ P(R.Provider, {
 		value: a,
-		children: /* @__PURE__ */ N(tt.Provider, {
+		children: /* @__PURE__ */ P(et.Provider, {
 			value: i,
 			children: e
 		})
@@ -70,42 +70,42 @@ function R({ children: e }) {
 }
 //#endregion
 //#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) {
+var V = (e) => e;
+function H(t, n = V) {
 	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 V(e) {
-	return B(P().history, e);
+function U(e) {
+	return H(F().history, e);
 }
 //#endregion
 //#region src/RouterIdContext.ts
-var nt = r(null);
+var tt = r(null);
 //#endregion
 //#region src/renderer/Renderer.tsx
-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, {
+function nt({ children: e }) {
+	let t = U((e) => e.index), r = U((e) => e.histories), i = F(), a = s(I), o = s(tt);
+	return _e(r, t).map((t) => {
+		let [r] = n.toArray(e).filter((e) => je(e.props.path, t.pathname));
+		return r ? /* @__PURE__ */ P(I.Provider, {
 			value: {
 				...t,
 				isPrev: t.isPrev || a.isPrev,
 				navigateStore: i.navigate,
 				routerId: o ?? void 0,
-				routePath: M(r.props.path, t.pathname)
+				routePath: N(r.props.path, t.pathname)
 			},
-			children: /* @__PURE__ */ N(R, { children: r })
+			children: /* @__PURE__ */ P(B, { children: r })
 		}, t.id) : null;
 	});
 }
 //#endregion
 //#region src/screen/MorphLayer/MorphLayer.tsx
-function it({ stores: e }) {
+function rt({ stores: e }) {
 	let t = p(null);
-	return f(() => (Re(e.navigate, t.current), () => Re(e.navigate, null)), [e.navigate]), /* @__PURE__ */ N("div", {
+	return f(() => (Re(e.navigate, t.current), () => Re(e.navigate, null)), [e.navigate]), /* @__PURE__ */ P("div", {
 		ref: t,
 		"data-flemo-morph-layer": "",
 		"aria-hidden": "true",
@@ -118,13 +118,13 @@ function it({ stores: e }) {
 }
 //#endregion
 //#region src/screen/ScreenViewportContext.ts
-var at = r({ contained: !1 });
-function ot() {
-	return s(at);
+var it = r({ contained: !1 });
+function at() {
+	return s(it);
 }
 //#endregion
 //#region src/transition/styles.ts
-function st(e, t, n = [], r = []) {
+function ot(e, t, n = [], r = []) {
 	d(() => ze(e, t, n, r), [
 		e,
 		t,
@@ -134,50 +134,50 @@ function st(e, t, n = [], r = []) {
 }
 //#endregion
 //#region src/utils/devDiagnostics.ts
-function ct() {
+function st() {
 	return typeof process < "u" && process.env.NODE_ENV !== "production";
 }
-function lt(e) {
-	!ct() || typeof console > "u" || console.error(`[flemo] ${e}`);
+function ct(e) {
+	!st() || typeof console > "u" || console.error(`[flemo] ${e}`);
 }
-function ut(e) {
-	if (ct()) throw Error(`[flemo] ${e}`);
+function lt(e) {
+	if (st()) throw Error(`[flemo] ${e}`);
 }
 //#endregion
 //#region src/RouterDepthContext.ts
-var dt = r(0), ft = r(null), pt = [
+var ut = r(0), dt = r(null), ft = [
 	"current",
 	"parent",
 	"root",
 	"nearest-owner"
-], mt = (e) => pt.includes(e), H = (e) => {
+], pt = (e) => ft.includes(e), W = (e) => {
 	let t = [];
 	for (let n = e; n; n = n.parent) t.push(n);
 	return t;
 };
-function U(e, t, n) {
-	return e.routePaths.length === 0 || e.routePaths.some((e) => e === t) ? !0 : n ? Me(e.routePaths, n) : !1;
+function G(e, t, n) {
+	return e.routePaths.length === 0 || e.routePaths.some((e) => e === t) ? !0 : n ? je(e.routePaths, n) : !1;
 }
-function W(e) {
-	return H(e).map((e, t) => {
+function K(e) {
+	return W(e).map((e, t) => {
 		let n = t === 0 ? "current" : `${t} level(s) up`;
 		return e.name ? `"${e.name}" (${n})` : `<unnamed> (${n})`;
 	}).join(", ");
 }
-function ht({ from: e, target: t, path: n, pathname: r }) {
+function mt({ 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" ? 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);
+	if (typeof t == "string" ? pt(t) ? i = t : a = t : "scope" in t ? i = t.scope : a = t.name, a !== null) {
+		let t = W(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: ${W(e)}.`
+			message: `no <Router name="${a}"> encloses this call. Routers in scope: ${K(e)}.`
 		};
 	}
 	switch (i) {
@@ -189,7 +189,7 @@ function ht({ 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 = H(e);
+			let t = W(e);
 			return {
 				node: t[t.length - 1],
 				message: null
@@ -200,13 +200,13 @@ function ht({ 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 = H(e).find((e) => U(e, n, r));
+			let t = W(e).find((e) => G(e, n, r));
 			return t ? {
 				node: t,
 				message: null
 			} : {
 				node: null,
-				message: `no <Router> in scope declares a <Route path="${n}">. Routers in scope: ${W(e)}.`
+				message: `no <Router> in scope declares a <Route path="${n}">. Routers in scope: ${K(e)}.`
 			};
 		}
 		default: return {
@@ -215,109 +215,109 @@ function ht({ from: e, target: t, path: n, pathname: r }) {
 		};
 	}
 }
-function gt(e) {
+function ht(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 G = { contained: !0 };
-function K({ children: e, className: t, style: n }) {
-	return /* @__PURE__ */ N("div", {
+var q = { contained: !0 };
+function J({ children: e, className: t, style: n }) {
+	return /* @__PURE__ */ P("div", {
 		className: t,
 		style: {
 			position: "relative",
 			overflow: "hidden",
 			...n
 		},
-		children: /* @__PURE__ */ N(at.Provider, {
-			value: G,
-			children: /* @__PURE__ */ N(rt, { children: e })
+		children: /* @__PURE__ */ P(it.Provider, {
+			value: q,
+			children: /* @__PURE__ */ P(nt, { children: e })
 		})
 	});
 }
 //#endregion
 //#region src/Router.tsx
-function q(e) {
+function gt(e) {
 	let t = null;
 	return n.forEach(e, (e) => {
 		if (t || !a(e)) return;
-		if (e.type === K) {
+		if (e.type === J) {
 			t = n.toArray(e.props.children).filter(a);
 			return;
 		}
 		let r = e.props.children;
 		if (r) {
-			let e = q(r);
+			let e = gt(r);
 			e && (t = e);
 		}
 	}), t;
 }
-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);
+var _t = typeof window > "u" ? c : f, vt = typeof window > "u" ? c : d, yt = [], Y = [], bt = [], xt = [], X = { contained: !0 };
+function St({ children: e, name: t, strictRoutes: r = !1, initPath: i = "/", defaultTransitionName: o = "cupertino", transitions: u = yt, decorators: d = Y, partTransitions: f = bt, morphTransitions: ee = xt, history: p = "browser", createDriver: te, className: ne, style: h }) {
+	let g = s(ut), 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({
+	let oe = ie ? re : null, _ = g > 0, v = p === "memory", se = l(), ce = s(I), le = s(Qe), y = _ && ce.id ? `_F_${le?.routerKey ?? ""}${ce.id}_` : se, ue = gt(e), de = ue !== null, fe = (ue ?? n.toArray(e).filter(a)).flatMap((e) => e.props?.path ? [e.props.path].flat() : []), pe = _ ? null : le, b = pe !== null, x = te ?? me, [S] = m(() => v ? null : x(b ? void 0 : y)), C = !_ && !v && !ke(), w = C && S ? S.readPathname() : i || "/", T = w.indexOf("?"), E = (T >= 0 ? w.slice(0, T) : w) || "/", D = C ? window.location.search : T >= 0 ? w.slice(T) : "", [O] = m(() => j({
 		routePaths: fe,
-		pathname: he,
-		search: E,
+		pathname: E,
+		search: D,
 		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
+		routerKey: b ? void 0 : y,
+		zoneEntryId: _ && !b && ce.id || void 0,
+		persistKey: _ && !v && !b ? y : void 0
 	}));
 	_t(() => {
-		D.transition.getState().defaultTransitionName !== o && D.transition.setState({ defaultTransitionName: o });
+		O.transition.getState().defaultTransitionName !== o && O.transition.setState({ defaultTransitionName: o });
 	});
-	let O = s(ft), [k] = m(() => ({
+	let k = s(dt), [A] = m(() => ({
 		name: t,
-		stores: D,
+		stores: O,
 		routePaths: fe,
 		strictRoutes: r,
-		parent: O,
+		parent: k,
 		depth: g
 	}));
 	vt(() => {
-		k.name = t, k.stores = D, k.routePaths = fe, k.strictRoutes = r, k.parent = O;
+		A.name = t, A.stores = O, A.routePaths = fe, A.strictRoutes = r, A.parent = k;
 	}), 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(() => {
+		ht(A) && ct(`duplicate <Router name="${A.name}">: an enclosing <Router> already uses that name, so \`router\` targets resolve to the nearer one. Give each nested Router a unique name.`);
+	}, [A, t]), _t(() => (O.life.alive = !0, () => {
+		O.life.alive = !1;
+	}), [O]), ot(u, d, f, ee), c(() => Ke(), []), c(() => {
 		v || !S || We({
 			driver: S,
-			routerKey: b ? null : le,
+			routerKey: b ? null : y,
 			nested: _ && !b,
-			seedPathname: he,
+			seedPathname: E,
 			defaultTransitionName: o,
-			rootParams: D.history.getState().histories[0]?.params ?? {}
+			rootParams: O.history.getState().histories[0]?.params ?? {}
 		});
 	}, [
 		v,
 		b,
 		_,
-		le,
-		he,
+		y,
+		E,
 		o,
-		D.history,
+		O.history,
 		S
 	]);
-	let ge = de ? e : /* @__PURE__ */ N(rt, { children: e }), _e = /* @__PURE__ */ N(nt.Provider, {
+	let he = de ? e : /* @__PURE__ */ P(nt, { children: e }), ge = /* @__PURE__ */ P(tt.Provider, {
 		value: oe,
-		children: /* @__PURE__ */ N(dt.Provider, {
+		children: /* @__PURE__ */ P(ut.Provider, {
 			value: g + 1,
-			children: /* @__PURE__ */ N(ft.Provider, {
-				value: k,
+			children: /* @__PURE__ */ P(dt.Provider, {
+				value: A,
 				children: /* @__PURE__ */ Ye(Qe.Provider, {
-					value: D,
-					children: [!v && /* @__PURE__ */ N($e, {}), _ ? /* @__PURE__ */ N(at.Provider, {
-						value: Y,
-						children: ge
-					}) : ge]
+					value: O,
+					children: [/* @__PURE__ */ P($e, {}), _ ? /* @__PURE__ */ P(it.Provider, {
+						value: X,
+						children: he
+					}) : he]
 				})
 			})
 		})
@@ -329,8 +329,8 @@ function St({ children: e, name: t, strictRoutes: r = !1, initPath: i = "/", def
 			overflow: "hidden",
 			...h
 		},
-		children: [_e, /* @__PURE__ */ N(it, { stores: D })]
-	}) : /* @__PURE__ */ Ye(Je, { children: [_e, /* @__PURE__ */ N(it, { stores: D })] });
+		children: [ge, /* @__PURE__ */ P(rt, { stores: O })]
+	}) : /* @__PURE__ */ Ye(Je, { children: [ge, /* @__PURE__ */ P(rt, { stores: O })] });
 }
 //#endregion
 //#region src/Route.tsx
@@ -345,7 +345,7 @@ function wt(e, t) {
 //#endregion
 //#region src/navigate/useNavigate.ts
 function Tt(e) {
-	let t = P(), n = s(ft) ?? {
+	let t = F(), n = s(dt) ?? {
 		stores: t,
 		routePaths: [],
 		strictRoutes: !1,
@@ -358,18 +358,18 @@ function Tt(e) {
 		} catch {
 			o = void 0;
 		}
-		let { node: s, message: c } = ht({
+		let { node: s, message: c } = mt({
 			from: n,
 			target: a,
 			path: r,
 			pathname: o
 		});
-		if (!s) return ut(c ?? "the requested Router could not be resolved."), null;
-		if (c && lt(c), r && !U(s, r, o)) {
+		if (!s) return lt(c ?? "the requested Router could not be resolved."), null;
+		if (c && ct(c), r && !G(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 ? ut(e) : lt(e);
+			a !== void 0 || s.strictRoutes ? lt(e) : ct(e);
 		}
-		return E({
+		return D({
 			stores: s.stores,
 			buildPathname: (e, t) => wt(e, t),
 			driver: s.stores.driver,
@@ -394,20 +394,20 @@ function Tt(e) {
 //#endregion
 //#region src/navigate/usePathname.ts
 function Et() {
-	return V((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
+	return U((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
 }
 //#endregion
 //#region src/navigate/useStep.ts
 function Dt() {
-	let { routePath: e } = F(), t = P(), n = s(I), { driver: r, markSelfInduced: i } = t, [a, o] = m(null);
+	let { routePath: e } = L(), t = F(), n = s(R), { 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 = be({
+	let l = ye({
 		stores: t,
 		driver: r,
 		markSelfInduced: i,
-		buildStepPathname: (t) => e ? wt(e, t).pathname : y(r.readPathname(), t),
+		buildStepPathname: (t) => e ? wt(e, t).pathname : ce(r.readPathname(), t),
 		applyParams: (t) => {
 			n({
 				type: "SET",
@@ -425,7 +425,7 @@ function Dt() {
 //#endregion
 //#region src/screen/ParamsProvider/useParams.ts
 function Ot() {
-	return s(tt);
+	return s(et);
 }
 //#endregion
 //#region src/screen/ScreenFreeze.tsx
@@ -434,7 +434,7 @@ 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()) {
+			if (n === "immediate" || !De()) {
 				a(!0);
 				return;
 			}
@@ -448,7 +448,7 @@ function At({ freeze: e, mode: n = "deferred", children: r }) {
 		e,
 		i,
 		n
-	]), /* @__PURE__ */ N(t, {
+	]), /* @__PURE__ */ P(t, {
 		mode: e && i ? "hidden" : "visible",
 		children: r
 	});
@@ -460,7 +460,7 @@ function Mt() {
 	return s(jt);
 }
 var Nt = r(null);
-function X() {
+function Z() {
 	return s(Nt);
 }
 //#endregion
@@ -473,18 +473,19 @@ function Ft(e) {
 //#endregion
 //#region src/stores/useNavigateStore.ts
 function It(e) {
-	return B(P().navigate, e);
+	return H(F().navigate, e);
 }
 //#endregion
 //#region src/screen/ScreenDecorator.tsx
 function Lt({ ref: e, style: t, ...n }) {
-	let { isActive: r, isPrev: i, transitionName: a } = F(), o = p(null);
+	let { isActive: r, isPrev: i, transitionName: a } = L(), 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", {
+	let s = It((e) => i ? "COMPLETED" : e.status), c = He(a), { decoratorName: l } = c, d = Ce.get(l);
+	return d ? /* @__PURE__ */ P("div", {
 		ref: o,
 		"data-flemo-decorator": !0,
-		"data-flemo-decorator-name": l.name,
+		"data-flemo-decorator-name": d.name,
+		"data-flemo-transition": c.name,
 		"data-flemo-status": s,
 		"data-flemo-active": r ? "true" : "false",
 		style: {
@@ -503,7 +504,7 @@ function Lt({ ref: e, style: t, ...n }) {
 //#region src/screen/useViewportScrollHeight.ts
 function Rt() {
 	let [e, t] = m(0), [n, r] = m(0);
-	return c(() => Fe((e, n) => {
+	return c(() => Pe((e, n) => {
 		r(n), t(e);
 	}), []), {
 		viewportScrollHeight: e,
@@ -518,59 +519,59 @@ function Vt(e) {
 }
 //#endregion
 //#region src/stores/useScreenStore.ts
-function Z(e) {
-	return B(P().screen, e);
+function Q(e) {
+	return H(F().screen, e);
 }
 //#endregion
 //#region src/screen/ScreenMotion.tsx
-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
+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: ce = "white", contentScrollable: le = !0, paintHidden: ue = !1, ...pe }) {
+	let { id: b, isActive: x, isRoot: S, isPrev: me, zIndex: C, transitionName: w, prevTransitionName: T } = L(), { contained: E } = at(), D = E ? "absolute" : "fixed", O = F(), k = s(tt), A = U((e) => e.index), he = U((e) => e.histories), ge = x || C === A - 1, j = It((e) => ge ? e.status : "COMPLETED"), _e = Q((e) => e.dragStatus), ve = Q((e) => e.replaceTransitionStatus), ye = O.screen.getState().setDragStatus, xe = O.screen.getState().setReplaceTransitionStatus, M = x ? he[A - 1]?.id : he[A]?.id, Te = Q((e) => M ? e.sharedBars[M] : void 0), N = Q((e) => M ? e.sharedBarMetadata[M] : void 0), De = Q((e) => M ? e.screenSurfaces[M] : void 0), ke = p(null);
+	ke.current ||= Se({
+		getTransitionTaskId: () => O.navigate.getState().transitionTaskId,
+		setDragStatus: ye,
+		setReplaceTransitionStatus: xe
 	});
-	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 Ae = ke.current, je = p(null);
+	je.current ||= Ft(O.navigate);
+	let Me = He(w), { initial: Pe, swipeDirection: Fe, decoratorName: Le } = Me, Re = Ce.get(Le), { viewportScrollHeight: ze } = Rt(), Be = ze > 0, [We, Ke] = m(null), qe = Mt(), Je = qe ?? We, Qe = p(/* @__PURE__ */ new Set()), [$e, I] = m(!1), et = 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,
+		e ? t.add(e) : t.clear(), I(t.size > 0);
+	}, []), R = !!a, z = !!u, B = R ? `${typeof l}:${String(l)}` : null, V = z ? `${typeof d}:${String(d)}` : null, [H, nt] = m({
+		key: B,
 		height: 0
-	}), [it, at] = m({
-		key: z,
+	}), [rt, it] = m({
+		key: V,
 		height: 0
-	}), 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,
+	}), ot = p(H), st = p(rt), ct = H.key === B ? H.height : 0, lt = rt.key === V ? rt.height : 0, ut = Ge(R ? { id: l } : void 0, N?.topBar) ? N?.topBar?.height ?? 0 : 0, dt = Ge(z ? { id: d } : void 0, N?.bottomBar) ? N?.bottomBar?.height ?? 0 : 0, ft = ct || ut, pt = lt || dt, W = p(null), G = p(null), K = p(null), mt = p(null), ht = p(null), q = p(null), J = p(null), gt = o((e) => {
+		e <= 0 || B === null || (mt.current && (mt.current.style.minHeight = `${e}px`), ot.current = {
+			key: B,
 			height: e
-		}, rt((t) => t.key === R && t.height === e ? t : {
-			key: R,
+		}, nt((t) => t.key === B && t.height === e ? t : {
+			key: B,
 			height: e
-		}), D.screen.getState().updateSharedBarHeight(b, "topBar", e));
+		}), O.screen.getState().updateSharedBarHeight(b, "topBar", e));
 	}, [
 		b,
-		D.screen,
-		R
+		O.screen,
+		B
 	]), _t = o((e) => {
-		e <= 0 || z === null || (gt.current && (gt.current.style.minHeight = `${e}px`), ct.current = {
-			key: z,
+		e <= 0 || V === null || (ht.current && (ht.current.style.minHeight = `${e}px`), st.current = {
+			key: V,
 			height: e
-		}, at((t) => t.key === z && t.height === e ? t : {
-			key: z,
+		}, it((t) => t.key === V && t.height === e ? t : {
+			key: V,
 			height: e
-		}), D.screen.getState().updateSharedBarHeight(b, "bottomBar", e));
+		}), O.screen.getState().updateSharedBarHeight(b, "bottomBar", e));
 	}, [
-		z,
+		V,
 		b,
-		D.screen
+		O.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,
+		q.current = e, e?.offsetHeight && gt(e.offsetHeight);
+	}, [gt]), yt = o((e) => {
+		J.current = e, e?.offsetHeight && _t(e.offsetHeight);
+	}, [_t]), Y = p({
+		transition: Me,
 		decorator: Re,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!u,
@@ -579,12 +580,12 @@ function Ht({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 		viewportScrollHeight: ze,
 		isRoot: S,
 		isActive: x,
-		status: A,
-		dragStatus: ve,
-		index: k
+		status: j,
+		dragStatus: _e,
+		index: A
 	});
-	J.current = {
-		transition: Ne,
+	Y.current = {
+		transition: Me,
 		decorator: Re,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!u,
@@ -593,42 +594,42 @@ function Ht({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 		viewportScrollHeight: ze,
 		isRoot: S,
 		isActive: x,
-		status: A,
-		dragStatus: ve,
-		index: k
+		status: j,
+		dragStatus: _e,
+		index: A
 	};
 	let bt = p(null), xt = p(null);
-	bt.current ||= xe({
-		getTransition: () => J.current.transition,
-		getDecorator: () => J.current.decorator,
+	bt.current ||= be({
+		getTransition: () => Y.current.transition,
+		getDecorator: () => Y.current.decorator,
 		getElements: () => ({
-			scope: U.current,
-			screenContainer: H.current,
-			decorator: W.current,
-			sharedTopBar: G.current,
-			sharedBottomBar: K.current
+			scope: G.current,
+			screenContainer: W.current,
+			decorator: K.current,
+			sharedTopBar: q.current,
+			sharedBottomBar: J.current
 		}),
-		hasSharedTopBar: () => J.current.hasSharedTopBar,
-		hasSharedBottomBar: () => J.current.hasSharedBottomBar,
-		getSharedTopBarId: () => J.current.sharedTopBarId,
-		getSharedBottomBarId: () => J.current.sharedBottomBarId,
-		getViewportScrollHeight: () => J.current.viewportScrollHeight,
+		hasSharedTopBar: () => Y.current.hasSharedTopBar,
+		hasSharedBottomBar: () => Y.current.hasSharedBottomBar,
+		getSharedTopBarId: () => Y.current.sharedTopBarId,
+		getSharedBottomBarId: () => Y.current.sharedBottomBarId,
+		getViewportScrollHeight: () => Y.current.viewportScrollHeight,
 		isReadyForDrag: () => {
-			let e = J.current;
+			let e = Y.current;
 			return !e.isRoot && e.isActive && e.status === "COMPLETED" && e.dragStatus === "IDLE" && !!e.transition.swipeDirection && e.viewportScrollHeight < 10;
 		},
 		getPartnerBars: () => {
-			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;
+			let e = Y.current, t = O.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
+			return n ? O.screen.getState().sharedBars[n] : void 0;
 		},
 		getPartnerBarMetadata: () => {
-			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;
+			let e = Y.current, t = O.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
+			return n ? O.screen.getState().sharedBarMetadata[n] : void 0;
 		},
-		setDragStatus: be,
-		back: () => D.driver.back(),
+		setDragStatus: ye,
+		back: () => O.driver.back(),
 		onDragStart: () => {
-			xt.current = le(D.navigate, "POPPING");
+			xt.current = y(O.navigate, "POPPING");
 		},
 		onDragProgress: (e) => {
 			xt.current?.scrub(e);
@@ -637,133 +638,136 @@ function Ht({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 			xt.current?.settle(e, t), xt.current = null;
 		}
 	});
-	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());
+	let X = bt.current, St = (e) => X.pointerDown(e.nativeEvent), Ct = (e) => X.pointerMove(e.nativeEvent), wt = (e) => X.pointerUp(e.nativeEvent), Tt = (e) => X.pointerCancel(e.nativeEvent), Et = (e) => X.lostPointerCapture(e.nativeEvent), Dt = (e) => {
+		(j === "PUSHING" || j === "REPLACING") && (e.preventDefault(), e.stopPropagation());
 	};
 	c(() => {
-		Te(U.current);
+		we(G.current);
 	}, []), c(() => {
-		let e = U.current;
+		let e = G.current;
 		if (!e) return;
 		let t = (e) => {
-			Y.shouldPreventTouch() && e.preventDefault();
+			X.shouldPreventTouch() && e.preventDefault();
 		};
 		return e.addEventListener("touchmove", t, { passive: !1 }), () => {
-			e.removeEventListener("touchmove", t), Y.abandon();
+			e.removeEventListener("touchmove", t), X.abandon();
 		};
-	}, [Y]), f(() => {
-		let { registerSharedBars: e, unregisterSharedBars: t } = D.screen.getState(), n = st.current, r = ct.current;
+	}, [X]), f(() => {
+		let { registerSharedBars: e, unregisterSharedBars: t } = O.screen.getState(), n = ot.current, r = st.current;
 		return e(b, {
-			topBar: I,
-			bottomBar: L
+			topBar: R,
+			bottomBar: z
 		}, {
-			topBar: I ? {
+			topBar: R ? {
 				id: l,
-				height: n.key === R ? n.height : void 0
+				height: n.key === B ? n.height : void 0
 			} : void 0,
-			bottomBar: L ? {
+			bottomBar: z ? {
 				id: d,
-				height: r.key === z ? r.height : void 0
+				height: r.key === V ? r.height : void 0
 			} : void 0
 		}), () => t(b);
 	}, [
+		V,
 		z,
-		L,
-		I,
+		R,
 		b,
 		d,
 		l,
-		D.screen,
-		R
+		O.screen,
+		B
 	]), f(() => {
+		let e = q.current;
+		if (e) return Ne(e, gt);
+	}, [gt, R]), f(() => {
+		let e = J.current;
+		if (e) return Ne(e, _t);
+	}, [_t, z]), f(() => {
+		let e = W.current;
+		if (e && !(!R && !z)) return Ie(e);
+	}, [z, 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 } = D.screen.getState();
-		return t(b, { opaqueBackground: ke(getComputedStyle(e).backgroundColor) }), () => n(b);
+		let { registerScreenSurface: t, unregisterScreenSurface: n } = O.screen.getState();
+		return t(b, { opaqueBackground: Oe(getComputedStyle(e).backgroundColor) }), () => n(b);
 	}, [
 		b,
-		y,
-		A,
-		D.screen
+		ce,
+		j,
+		O.screen
 	]);
-	let Ot = _e, { app: kt, nav: At } = de({
-		status: A,
+	let Ot = ge, { app: kt, nav: At } = de({
+		status: j,
 		isTopOrTopPrev: Ot,
-		hasTopBar: I,
-		hasNavBar: L,
+		hasTopBar: R,
+		hasNavBar: z,
 		topBarId: l,
 		bottomBarId: d,
-		partnerBars: Ee,
-		partnerMetadata: M
-	}), X = se({
-		status: A,
+		partnerBars: Te,
+		partnerMetadata: N
+	}), Z = se({
+		status: j,
 		isTopOrTopPrev: Ot,
 		transitionName: w
 	}), Pt = fe({
 		isActive: x,
 		isPrev: me,
 		zIndex: C,
-		index: k,
-		status: A,
-		dragStatus: ve,
-		replaceTransitionStatus: ye
-	}), zt = p(Pt), Bt = p(X !== null && Pt), Ht = p(null), [Ut, Wt] = m({
-		key: X,
-		released: X === null
+		index: A,
+		status: j,
+		dragStatus: _e,
+		replaceTransitionStatus: ve
+	}), zt = p(Pt), Bt = p(Z !== null && Pt), Ht = p(null), [Ut, Wt] = m({
+		key: Z,
+		released: Z === null
 	});
-	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 = {
+	Ut.key !== Z && (Wt({
+		key: Z,
+		released: Z === null
+	}), Ht.current = null, Bt.current = Z !== null && zt.current), zt.current = Pt;
+	let Gt = Z !== null && Ut.key === Z && !Ut.released && Ht.current !== Z, $ = Gt ? !x && De?.opaqueBackground ? h.PARK : x && (j === "PUSHING" || j === "REPLACING") && De?.opaqueBackground ? Ve().parkOver ? h.PARK_OVER : h.PARK_UNDER : h.HELD : h.RELEASED, Kt = {
 		zIndex: C,
 		paintHidden: ue,
 		transitionName: w,
-		status: A,
+		status: j,
 		isActive: x,
 		animHold: $,
 		rendersHost: !qe,
 		screenId: b,
-		registerSlot: tt
-	}, Kt = Vt(Ue);
-	f(() => je.driveScreenLifecycle({
+		registerSlot: et
+	}, qt = Vt(Ue);
+	f(() => Ae.driveScreenLifecycle({
 		getElements: () => ({
-			scope: U.current,
-			decorator: W.current,
-			bars: [G.current, K.current],
-			screenContainer: H.current
+			scope: G.current,
+			decorator: K.current,
+			bars: [q.current, J.current],
+			screenContainer: W.current
 		}),
 		transitionName: w,
 		prevTransitionName: T,
-		status: A,
+		status: j,
 		isActive: x,
-		animHoldReleased: !Q
+		animHoldReleased: !Gt
 	}), [
-		je,
-		A,
+		Ae,
+		j,
 		x,
 		T,
 		w,
-		Q
+		Gt
 	]), 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 (!Gt || Z === null) return;
+		let e = Z, t = O.navigate.getState().transitionTaskId, n = t === null ? e : `${e}#${t}`;
+		return je.current.join(n, () => {
+			let t = Y.current.transition.driver === "native", n = Ve({ authoredNativeDriver: t }).atomicReleaseFlip;
 			if (n) {
 				for (let e of [
-					U.current,
 					G.current,
-					K.current,
-					W.current
+					q.current,
+					J.current,
+					K.current
 				]) e?.isConnected && e.getAttribute(g) !== null && e.setAttribute(g, h.RELEASED);
-				H.current && (H.current.style.zIndex = String(C + 1)), Ht.current = e;
+				W.current && (W.current.style.zIndex = String(C + 1)), Ht.current = e;
 			}
 			{
 				let t = () => Wt((t) => t.key === e && !t.released ? {
@@ -773,9 +777,9 @@ function Ht({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				n && Ve().deferReleaseCommit && typeof requestAnimationFrame == "function" ? requestAnimationFrame(() => t()) : Ze(t);
 			}
 		}, {
-			scope: U.current,
+			scope: G.current,
 			decodeWait: Bt.current,
-			contentSettle: Ve().renderSettleGate && (x && A === "PUSHING" || A === "POPPING") ? {
+			contentSettle: Ve().renderSettleGate && (x && j === "PUSHING" || j === "POPPING") ? {
 				firstWaitMs: 120,
 				capMs: 700,
 				graceMs: 60,
@@ -784,24 +788,24 @@ function Ht({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 			} : void 0
 		});
 	}, [
-		Q,
-		X,
+		Gt,
+		Z,
 		$,
 		x,
-		A,
-		D.navigate,
+		j,
+		O.navigate,
 		C
 	]);
-	let qt = $ === h.PARK_UNDER || $ === h.PARK_OVER ? {} : De({
-		initial: Fe,
+	let Jt = $ === h.PARK_UNDER || $ === h.PARK_OVER ? {} : Ee({
+		initial: Pe,
 		isActive: x,
-		status: A
+		status: j
 	});
 	return /* @__PURE__ */ Ye("div", {
-		ref: H,
+		ref: W,
 		onClickCapture: Dt,
 		style: {
-			position: E,
+			position: D,
 			top: 0,
 			left: 0,
 			width: "100%",
@@ -817,7 +821,7 @@ function Ht({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 		},
 		children: [
 			/* @__PURE__ */ Ye("div", {
-				ref: U,
+				ref: G,
 				...pe,
 				onPointerDown: St,
 				onPointerMove: Ct,
@@ -825,74 +829,74 @@ function Ht({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				onPointerCancel: Tt,
 				onLostPointerCapture: Et,
 				"data-flemo-screen": b,
-				"data-flemo-router": O ?? void 0,
+				"data-flemo-router": k ?? void 0,
 				"data-flemo-transition": w,
-				"data-flemo-status": A,
+				"data-flemo-status": j,
 				"data-flemo-active": x ? "true" : "false",
 				"data-flemo-anim-hold": $,
 				style: {
 					display: "flex",
 					flexDirection: "column",
 					height: "100%",
-					backgroundColor: y,
-					overflowY: ce ? void 0 : "auto",
-					touchAction: Ie === "x" ? "pan-y" : Ie === "y" ? "pan-x" : "auto",
-					...Kt && C === k && !he ? { willChange: "transform" } : {},
-					...qt,
+					backgroundColor: ce,
+					overflowY: le ? void 0 : "auto",
+					touchAction: Fe === "x" ? "pan-y" : Fe === "y" ? "pan-x" : "auto",
+					...qt && C === A && !E ? { willChange: "transform" } : {},
+					...Jt,
 					...pe.style
 				},
 				children: [
-					!ie && t && /* @__PURE__ */ N("div", {
+					!ie && t && /* @__PURE__ */ P("div", {
 						style: { minHeight: t },
-						children: /* @__PURE__ */ N("div", { style: {
-							position: E,
+						children: /* @__PURE__ */ P("div", { style: {
+							position: D,
 							top: 0,
 							width: "100%",
 							minHeight: t,
 							backgroundColor: n
 						} })
 					}),
-					a && /* @__PURE__ */ N("div", {
-						ref: ht,
+					a && /* @__PURE__ */ P("div", {
+						ref: mt,
 						"data-flemo-bar-spacer": "app",
 						style: {
 							width: "100%",
-							minHeight: pt
+							minHeight: ft
 						}
 					}),
 					ee,
-					/* @__PURE__ */ N("div", {
+					/* @__PURE__ */ P("div", {
 						style: {
 							display: "flex",
 							flexDirection: "column",
 							flexGrow: 1,
-							overflowY: ce ? "auto" : void 0
+							overflowY: le ? "auto" : void 0
 						},
-						children: /* @__PURE__ */ N(jt.Provider, {
+						children: /* @__PURE__ */ P(jt.Provider, {
 							value: Je,
-							children: /* @__PURE__ */ N(Nt.Provider, {
-								value: Gt,
+							children: /* @__PURE__ */ P(Nt.Provider, {
+								value: Kt,
 								children: e
 							})
 						})
 					}),
 					te,
-					u && /* @__PURE__ */ N("div", {
-						ref: gt,
+					u && /* @__PURE__ */ P("div", {
+						ref: ht,
 						"data-flemo-bar-spacer": "nav",
 						style: {
 							display: Be ? "none" : void 0,
 							width: "100%",
-							minHeight: mt
+							minHeight: pt
 						}
 					}),
-					!ae && r && /* @__PURE__ */ N("div", {
+					!ae && r && /* @__PURE__ */ P("div", {
 						style: {
 							display: Be ? "none" : void 0,
 							minHeight: r
 						},
-						children: /* @__PURE__ */ N("div", { style: {
-							position: E,
+						children: /* @__PURE__ */ P("div", { style: {
+							position: D,
 							bottom: 0,
 							width: "100%",
 							minHeight: r,
@@ -901,58 +905,58 @@ function Ht({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					})
 				]
 			}),
-			a && /* @__PURE__ */ N("div", {
+			a && /* @__PURE__ */ P("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": O ?? void 0,
+				"data-flemo-router": k ?? void 0,
 				"data-flemo-bar-transition": w,
-				"data-flemo-bar-status": A,
+				"data-flemo-bar-status": j,
 				"data-flemo-bar-active": x ? "true" : "false",
 				"data-flemo-bar-riding": kt ? "true" : "false",
 				"data-flemo-anim-hold": $,
 				style: {
-					position: E,
+					position: D,
 					top: ie ? 0 : t,
 					left: 0,
 					width: "100%"
 				},
 				children: a
 			}),
-			u && /* @__PURE__ */ N("div", {
+			u && /* @__PURE__ */ P("div", {
 				ref: yt,
 				"data-flemo-bar": "nav",
 				"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-router": k ?? void 0,
 				"data-flemo-bar-transition": w,
-				"data-flemo-bar-status": A,
+				"data-flemo-bar-status": j,
 				"data-flemo-bar-active": x ? "true" : "false",
 				"data-flemo-bar-riding": At ? "true" : "false",
 				"data-flemo-anim-hold": $,
 				style: {
 					display: Be ? "none" : void 0,
-					position: E,
+					position: D,
 					bottom: ae ? 0 : r,
 					left: 0,
 					width: "100%"
 				},
 				children: u
 			}),
-			Re && /* @__PURE__ */ N(Lt, {
-				ref: W,
+			Re && /* @__PURE__ */ P(Lt, {
+				ref: K,
 				"data-flemo-anim-hold": $
 			}),
-			Re && $e && Je ? Xe(/* @__PURE__ */ N(Lt, {
+			Re && $e && Je ? Xe(/* @__PURE__ */ P(Lt, {
 				"data-flemo-anim-hold": $,
 				style: { zIndex: C * 2 + 1 }
 			}), Je) : null,
-			!qe && /* @__PURE__ */ N("div", {
+			!qe && /* @__PURE__ */ P("div", {
 				ref: Ke,
 				[re]: "",
 				[v]: w,
-				[_]: A,
+				[_]: j,
 				[ne]: x ? "true" : "false",
 				[g]: $,
 				style: {
@@ -968,7 +972,7 @@ function Ht({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 //#endregion
 //#region src/screen/Screen.tsx
 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({
+	let { isActive: n, isPrev: r, zIndex: i } = L(), a = U((e) => e.index), o = It((e) => e.status), s = Q((e) => e.dragStatus), l = Q((e) => e.replaceTransitionStatus), u = pe({
 		isActive: n,
 		isPrev: r,
 		zIndex: i,
@@ -981,10 +985,10 @@ function Ut({ children: e, ...t }) {
 		if (u !== "deferred" || d) return;
 		let e = setTimeout(() => f(!0), Wt);
 		return () => clearTimeout(e);
-	}, [u, d]), /* @__PURE__ */ N(At, {
+	}, [u, d]), /* @__PURE__ */ P(At, {
 		freeze: d,
 		mode: u,
-		children: /* @__PURE__ */ N(Ht, {
+		children: /* @__PURE__ */ P(Ht, {
 			paintHidden: d,
 			...t,
 			children: e
@@ -994,9 +998,9 @@ function Ut({ children: e, ...t }) {
 var Wt = 600;
 //#endregion
 //#region src/screen/Part.tsx
-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", {
+function Gt({ ref: e, name: t, style: n, children: r, ...i }) {
+	let { isActive: a, isPrev: o, navigateStore: c, routerId: l } = L(), u = s(tt), d = l ?? u ?? void 0, f = F(), ee = H(c ?? f.navigate, (e) => o ? "COMPLETED" : e.status);
+	return /* @__PURE__ */ P("div", {
 		ref: e,
 		"data-flemo-part-name": t,
 		"data-flemo-router": d,
@@ -1010,8 +1014,8 @@ function Q({ 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", {
+	let t = Mt(), n = Z();
+	return !t || !n ? null : Xe(/* @__PURE__ */ P("div", {
 		ref: n.registerSlot,
 		[ae]: "",
 		[ie]: n.screenId,
@@ -1028,7 +1032,7 @@ function $({ children: e }) {
 			zIndex: n.zIndex * 2,
 			visibility: n.paintHidden ? "hidden" : void 0
 		},
-		children: /* @__PURE__ */ N("div", {
+		children: /* @__PURE__ */ P("div", {
 			style: {
 				display: "contents",
 				pointerEvents: "auto"
@@ -1039,13 +1043,13 @@ function $({ children: e }) {
 }
 //#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) => {
+function Kt({ ref: e, layoutId: t, name: n, as: r = "div", style: a, children: s, ...c }) {
+	let { isActive: l, isPrev: u, navigateStore: d } = L(), ee = F(), m = d ?? ee.navigate, te = H(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, {
+		if (e) return le(e, {
 			layoutId: t,
 			name: n,
 			navigateStore: m
@@ -1069,21 +1073,22 @@ function Gt({ ref: e, layoutId: t, name: n, as: r = "div", style: a, children: s
 }
 //#endregion
 //#region src/stores/RouterScopeProvider.tsx
-function Kt({ children: e }) {
+function qt({ children: e }) {
 	let [t] = m(() => ({
 		history: w(),
-		navigate: he(),
-		transition: j(),
-		screen: ye(),
+		navigate: E(),
+		transition: M(),
+		screen: ve(),
 		driver: me(),
-		markSelfInduced: je,
+		memory: !1,
+		markSelfInduced: Ae,
 		consume: b,
 		life: { alive: !0 }
 	}));
-	return /* @__PURE__ */ N(Qe.Provider, {
+	return /* @__PURE__ */ P(Qe.Provider, {
 		value: t,
 		children: e
 	});
 }
 //#endregion
-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 };
+export { $ as Layer, Kt as Morph, Gt as Part, Ct as Route, St as Router, qt as RouterScopeProvider, Ut as Screen, I as ScreenContext, Lt as ScreenDecorator, At as ScreenFreeze, Ht as ScreenMotion, J as Slot, S as createBrowserHistoryDriver, C as createDecorator, T as createMorphTransition, O as createPartTransition, k as createRawDecorator, A as createRawMorphTransition, he as createRawPartTransition, ge as createRawTransition, xe as createTransition, Me as morphTransitionMap, Fe as partTransitionMap, U as useHistoryStore, Tt as useNavigate, It as useNavigateStore, Ot as useParams, Et as usePathname, L as useScreen, Q as useScreenStore, Dt as useStep, F as useStores, Rt as useViewportScrollHeight };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flemo/react",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "React bindings for flemo: Router, Route, Screen, and the screen-transition runtime.",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -34,7 +34,7 @@
   "homepage": "https://flemo.dev",
   "license": "MIT",
   "dependencies": {
-    "@flemo/core": "2.0.0",
+    "@flemo/core": "2.1.0",
     "path-to-regexp": "^8.4.2",
     "zustand": "^5.0.15"
   },