@flemo/react 1.6.6 → 1.6.8

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import e, { Activity as t, Children as n, createContext as r, isValidElement as i, useContext as a, useEffect as o, useId as s, useImperativeHandle as c, useInsertionEffect as l, useLayoutEffect as u, useReducer as d, useRef as f, useState as p } from "react";
-import { animHoldKey as ee, appendParamsQuery as m, buildRoutePath as h, computeBarRiding as g, computeScreenFreeze as _, consumeSelfInducedPop as v, createBrowserHistoryDriver as y, createBrowserHistoryDriver as b, createDecorator as x, createHistoryStore as te, createNavigateStore as S, createNavigationController as C, createPartTransition as w, createRawDecorator as T, createRawPartTransition as E, createRawTransition as D, createRouterScope as ne, createScreenSelector as O, createScreenStore as k, createStepController as A, createSwipeController as re, createTransition as j, createTransitionEngine as ie, createTransitionStore as M, decoratorMap as ae, eagerlyDecodeImages as oe, ensureScopeHistorySync as se, enteringInitialStyle as ce, getMatchedPathPattern as le, isOpaqueColor as ue, isServer as de, markSelfInducedPop as fe, matchesPathname as pe, observeBarHeight as me, observeViewportScrollHeight as he, partTransitionMap as ge, readStepParams as _e, registerTransitionDefinitions as N, releaseScopeHistorySync as P, resolveTransition as ve, scheduleAnimHoldRelease as ye, seedRouterEntry as F, subscribeStepParamsRestore as be } from "@flemo/core";
+import e, { Activity as t, Children as n, createContext as r, isValidElement as i, useContext as a, useEffect as o, useId as s, useImperativeHandle as c, useInsertionEffect as l, useLayoutEffect as u, useReducer as ee, useRef as d, useState as f } from "react";
+import { animHoldKey as te, appendParamsQuery as p, buildRoutePath as m, computeBarRiding as h, computeScreenFreeze as ne, consumeSelfInducedPop as g, createAnimHoldCoordinator as _, createBrowserHistoryDriver as v, createBrowserHistoryDriver as y, createDecorator as b, createHistoryStore as re, createNavigateStore as x, createNavigationController as S, createPartTransition as C, createRawDecorator as w, createRawPartTransition as T, createRawTransition as E, createRouterScope as D, createScreenSelector as O, createScreenStore as k, createStepController as ie, createSwipeController as A, createTransition as j, createTransitionEngine as ae, createTransitionStore as M, decoratorMap as oe, eagerlyDecodeImages as se, ensureScopeHistorySync as ce, enteringInitialStyle as le, getMatchedPathPattern as N, isOpaqueColor as ue, isServer as de, markSelfInducedPop as fe, matchesPathname as pe, observeBarHeight as me, observeViewportScrollHeight as he, partTransitionMap as ge, readStepParams as P, registerTransitionDefinitions as _e, releaseScopeHistorySync as ve, resolveTransition as ye, seedRouterEntry as be, subscribeStepParamsRestore as F } from "@flemo/core";
 import { jsx as I, jsxs as xe } from "react/jsx-runtime";
 //#region src/stores/StoreContext.ts
 var L = r(null);
@@ -12,13 +12,13 @@ function R() {
 }
 //#endregion
 //#region src/history/HistoryListener.tsx
-function Se() {
+function z() {
 	let e = R();
-	return o(() => (se(e), () => P(e)), [e]), null;
+	return o(() => (ce(e), () => ve(e)), [e]), null;
 }
 //#endregion
 //#region src/screen/ScreenContext.ts
-var z = r({
+var B = r({
 	id: "",
 	isActive: !1,
 	isRoot: !0,
@@ -33,15 +33,15 @@ var z = r({
 });
 //#endregion
 //#region src/screen/useScreen.ts
-function B() {
-	return a(z);
+function V() {
+	return a(B);
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsContext.ts
-var V = r({}), H = r(() => {});
+var Se = r({}), Ce = r(() => {});
 //#endregion
 //#region src/screen/ParamsProvider/ParamsReducer.ts
-function U(e, t) {
+function we(e, t) {
 	switch (t.type) {
 		case "SET": return t.params;
 		default: return e;
@@ -49,10 +49,10 @@ function U(e, t) {
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsProvider.tsx
-function W({ children: e }) {
-	let { isActive: t, params: n } = B(), { driver: r } = R(), [i, a] = d(U, n);
+function Te({ children: e }) {
+	let { isActive: t, params: n } = V(), { driver: r } = R(), [i, a] = ee(we, n);
 	return o(() => {
-		if (t) return be(r, (e) => a({
+		if (t) return F(r, (e) => a({
 			type: "SET",
 			params: e
 		}));
@@ -60,9 +60,9 @@ function W({ children: e }) {
 		t,
 		a,
 		r
-	]), /* @__PURE__ */ I(H.Provider, {
+	]), /* @__PURE__ */ I(Ce.Provider, {
 		value: a,
-		children: /* @__PURE__ */ I(V.Provider, {
+		children: /* @__PURE__ */ I(Se.Provider, {
 			value: i,
 			children: e
 		})
@@ -70,41 +70,41 @@ function W({ children: e }) {
 }
 //#endregion
 //#region ../../node_modules/.pnpm/zustand@5.0.14_@types+react@19.2.17_react@19.2.7/node_modules/zustand/esm/react.mjs
-var G = (e) => e;
-function K(t, n = G) {
+var H = (e) => e;
+function U(t, n = H) {
 	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 q(e) {
-	return K(R().history, e);
+function W(e) {
+	return U(R().history, e);
 }
 //#endregion
 //#region src/renderer/Renderer.tsx
-function Ce({ children: e }) {
-	let t = q((e) => e.index);
-	return O(q((e) => e.histories), t).map((t) => {
+function G({ children: e }) {
+	let t = W((e) => e.index);
+	return O(W((e) => e.histories), t).map((t) => {
 		let [r] = n.toArray(e).filter((e) => pe(e.props.path, t.pathname));
-		return r ? /* @__PURE__ */ I(z.Provider, {
+		return r ? /* @__PURE__ */ I(B.Provider, {
 			value: {
 				...t,
-				routePath: le(r.props.path, t.pathname)
+				routePath: N(r.props.path, t.pathname)
 			},
-			children: /* @__PURE__ */ I(W, { children: r })
+			children: /* @__PURE__ */ I(Te, { children: r })
 		}, t.id) : null;
 	});
 }
 //#endregion
 //#region src/screen/ScreenViewportContext.ts
-var J = r({ contained: !1 });
-function we() {
-	return a(J);
+var K = r({ contained: !1 });
+function Ee() {
+	return a(K);
 }
 //#endregion
 //#region src/transition/styles.ts
-function Te(e, t, n = []) {
-	l(() => N(e, t, n), [
+function q(e, t, n = []) {
+	l(() => _e(e, t, n), [
 		e,
 		t,
 		n
@@ -112,7 +112,7 @@ function Te(e, t, n = []) {
 }
 //#endregion
 //#region src/RouterDepthContext.ts
-var Ee = r(0), De = { contained: !0 };
+var De = r(0), J = { contained: !0 };
 function Oe({ children: e, className: t, style: n }) {
 	return /* @__PURE__ */ I("div", {
 		className: t,
@@ -121,9 +121,9 @@ function Oe({ children: e, className: t, style: n }) {
 			overflow: "hidden",
 			...n
 		},
-		children: /* @__PURE__ */ I(J.Provider, {
-			value: De,
-			children: /* @__PURE__ */ I(Ce, { children: e })
+		children: /* @__PURE__ */ I(K.Provider, {
+			value: J,
+			children: /* @__PURE__ */ I(G, { children: e })
 		})
 	});
 }
@@ -144,77 +144,77 @@ function ke(e) {
 		}
 	}), t;
 }
-var Ae = typeof window > "u" ? o : u, Y = [], je = [], Me = [], X = { contained: !0 };
-function Z({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = Y, decorators: c = je, partTransitions: l = Me, history: u = "browser", createDriver: d, className: f, style: ee }) {
-	let m = a(Ee), h = m > 0, g = u === "memory", _ = s(), v = a(z), y = h && v.id ? `_F_${v.id}_` : _, x = ke(e), te = x !== null, S = a(L), C = h ? null : S, w = C !== null, T = d ?? b, [E] = p(() => g ? null : T(w ? void 0 : y)), D = !h && !g && !de(), O = D && E ? E.readPathname() : t || "/", k = O.indexOf("?"), A = (k >= 0 ? O.slice(0, k) : O) || "/", re = D ? window.location.search : k >= 0 ? O.slice(k) : "", [j] = p(() => ne({
-		routePaths: (x ?? n.toArray(e)).map((e) => e.props.path).flat(),
-		pathname: A,
-		search: re,
+var Ae = typeof window > "u" ? o : u, je = [], Me = [], Ne = [], Y = { contained: !0 };
+function Pe({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = je, decorators: c = Me, partTransitions: l = Ne, history: u = "browser", createDriver: ee, className: d, style: te }) {
+	let p = a(De), m = p > 0, h = u === "memory", ne = s(), g = a(B), _ = m && g.id ? `_F_${g.id}_` : ne, v = ke(e), b = v !== null, re = a(L), x = m ? null : re, S = x !== null, C = ee ?? y, [w] = f(() => h ? null : C(S ? void 0 : _)), T = !m && !h && !de(), E = T && w ? w.readPathname() : t || "/", O = E.indexOf("?"), k = (O >= 0 ? E.slice(0, O) : E) || "/", ie = T ? window.location.search : O >= 0 ? E.slice(O) : "", [A] = f(() => D({
+		routePaths: (v ?? n.toArray(e)).map((e) => e.props.path).flat(),
+		pathname: k,
+		search: ie,
 		defaultTransitionName: r,
-		memory: g,
-		browserDriver: E,
-		hostedScope: C,
-		routerKey: w ? void 0 : y,
-		zoneEntryId: h && !w && v.id || void 0,
-		persistKey: h && !g && !w ? y : void 0
+		memory: h,
+		browserDriver: w,
+		hostedScope: x,
+		routerKey: S ? void 0 : _,
+		zoneEntryId: m && !S && g.id || void 0,
+		persistKey: m && !h && !S ? _ : void 0
 	}));
-	j.transition.setState({ defaultTransitionName: r }), Ae(() => (j.life.alive = !0, () => {
-		j.life.alive = !1;
-	}), [j]), Te(i, c, l), o(() => {
-		g || !E || F({
-			driver: E,
-			routerKey: w ? null : y,
-			nested: h && !w,
-			seedPathname: A,
+	A.transition.setState({ defaultTransitionName: r }), Ae(() => (A.life.alive = !0, () => {
+		A.life.alive = !1;
+	}), [A]), q(i, c, l), o(() => {
+		h || !w || be({
+			driver: w,
+			routerKey: S ? null : _,
+			nested: m && !S,
+			seedPathname: k,
 			defaultTransitionName: r,
-			rootParams: j.history.getState().histories[0]?.params ?? {}
+			rootParams: A.history.getState().histories[0]?.params ?? {}
 		});
 	}, [
-		g,
-		w,
 		h,
-		y,
-		A,
+		S,
+		m,
+		_,
+		k,
 		r,
-		j.history,
-		E
+		A.history,
+		w
 	]);
-	let ie = te ? e : /* @__PURE__ */ I(Ce, { children: e }), M = /* @__PURE__ */ I(Ee.Provider, {
-		value: m + 1,
+	let j = b ? e : /* @__PURE__ */ I(G, { children: e }), ae = /* @__PURE__ */ I(De.Provider, {
+		value: p + 1,
 		children: /* @__PURE__ */ xe(L.Provider, {
-			value: j,
-			children: [!g && /* @__PURE__ */ I(Se, {}), h ? /* @__PURE__ */ I(J.Provider, {
-				value: X,
-				children: ie
-			}) : ie]
+			value: A,
+			children: [!h && /* @__PURE__ */ I(z, {}), m ? /* @__PURE__ */ I(K.Provider, {
+				value: Y,
+				children: j
+			}) : j]
 		})
 	});
-	return h ? /* @__PURE__ */ I("div", {
-		className: f,
+	return m ? /* @__PURE__ */ I("div", {
+		className: d,
 		style: {
 			position: "relative",
 			overflow: "hidden",
-			...ee
+			...te
 		},
-		children: M
-	}) : M;
+		children: ae
+	}) : ae;
 }
 //#endregion
 //#region src/Route.tsx
-function Ne({ element: e }) {
+function Fe({ element: e }) {
 	return e;
 }
 //#endregion
 //#region src/utils/buildRoutePath.ts
-function Pe(e, t) {
-	return h(e, t);
+function Ie(e, t) {
+	return m(e, t);
 }
 //#endregion
 //#region src/navigate/useNavigate.ts
-function Fe() {
-	let e = R(), t = C({
+function Le() {
+	let e = R(), t = S({
 		stores: e,
-		buildPathname: (e, t) => Pe(e, t),
+		buildPathname: (e, t) => Ie(e, t),
 		driver: e.driver,
 		markSelfInduced: e.markSelfInduced
 	});
@@ -226,21 +226,21 @@ function Fe() {
 }
 //#endregion
 //#region src/navigate/usePathname.ts
-function Ie() {
-	return q((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
+function Re() {
+	return W((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
 }
 //#endregion
 //#region src/navigate/useStep.ts
-function Le() {
-	let { routePath: e } = B(), t = R(), n = a(H), { driver: r, markSelfInduced: i } = t, [s, c] = p(null);
+function X() {
+	let { routePath: e } = V(), t = R(), n = a(Ce), { driver: r, markSelfInduced: i } = t, [s, c] = f(null);
 	o(() => {
-		if (!e) return c(_e(r.readState())), r.subscribe((e) => c(_e(e.state)));
+		if (!e) return c(P(r.readState())), r.subscribe((e) => c(P(e.state)));
 	}, [e, r]);
-	let l = A({
+	let l = ie({
 		stores: t,
 		driver: r,
 		markSelfInduced: i,
-		buildStepPathname: (t) => e ? Pe(e, t).pathname : m(r.readPathname(), t),
+		buildStepPathname: (t) => e ? Ie(e, t).pathname : p(r.readPathname(), t),
 		applyParams: (t) => {
 			n({
 				type: "SET",
@@ -257,8 +257,8 @@ function Le() {
 }
 //#endregion
 //#region src/screen/ParamsProvider/useParams.ts
-function Re() {
-	return a(V);
+function Z() {
+	return a(Se);
 }
 //#endregion
 //#region src/screen/ScreenFreeze.tsx
@@ -269,16 +269,23 @@ function ze({ freeze: e, children: n }) {
 	});
 }
 //#endregion
+//#region src/screen/scopeAnimHoldCoordinator.ts
+var Be = /* @__PURE__ */ new WeakMap();
+function Ve(e) {
+	let t = Be.get(e);
+	return t || (t = _(), Be.set(e, t)), t;
+}
+//#endregion
 //#region src/stores/useNavigateStore.ts
 function Q(e) {
-	return K(R().navigate, e);
+	return U(R().navigate, e);
 }
 //#endregion
 //#region src/screen/ScreenDecorator.tsx
-function Be({ ref: e, style: t, ...n }) {
-	let { isActive: r, transitionName: i } = B(), a = f(null);
+function He({ ref: e, style: t, ...n }) {
+	let { isActive: r, transitionName: i } = V(), a = d(null);
 	c(e, () => a.current);
-	let o = Q((e) => e.status), { decoratorName: s } = ve(i), l = ae.get(s);
+	let o = Q((e) => e.status), { decoratorName: s } = ye(i), l = oe.get(s);
 	return l ? /* @__PURE__ */ I("div", {
 		ref: a,
 		"data-flemo-decorator": !0,
@@ -300,8 +307,8 @@ function Be({ ref: e, style: t, ...n }) {
 }
 //#endregion
 //#region src/screen/useViewportScrollHeight.ts
-function Ve() {
-	let [e, t] = p(0), [n, r] = p(0);
+function Ue() {
+	let [e, t] = f(0), [n, r] = f(0);
 	return o(() => he((e, n) => {
 		r(n), t(e);
 	}), []), {
@@ -312,69 +319,71 @@ function Ve() {
 //#endregion
 //#region src/stores/useScreenStore.ts
 function $(e) {
-	return K(R().screen, e);
+	return U(R().screen, e);
 }
 //#endregion
 //#region src/screen/ScreenMotion.tsx
-function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: i, sharedTopBar: a, sharedBottomBar: s, topBar: c, bottomBar: l, hideStatusBar: d, hideSystemNavigationBar: m, backgroundColor: h = "white", contentScrollable: _ = !0, ...v }) {
-	let { id: y, isActive: b, isRoot: x, zIndex: te, transitionName: S, prevTransitionName: C } = B(), { contained: w } = we(), T = w ? "absolute" : "fixed", E = R(), D = Q((e) => e.status), ne = $((e) => e.dragStatus), O = E.screen.getState().setDragStatus, k = E.screen.getState().setReplaceTransitionStatus, A = q((e) => e.index), j = q((e) => e.histories), M = b ? j[A - 1]?.id : j[A]?.id, se = $((e) => M ? e.sharedBars[M] : void 0), le = $((e) => M ? e.screenSurfaces[M] : void 0), de = f(null);
-	de.current ||= ie({
+function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: i, sharedTopBar: a, sharedBottomBar: s, topBar: c, bottomBar: l, hideStatusBar: ee, hideSystemNavigationBar: p, backgroundColor: m = "white", contentScrollable: g = !0, ..._ }) {
+	let { id: v, isActive: y, isRoot: b, isPrev: re, zIndex: x, transitionName: S, prevTransitionName: C } = V(), { contained: w } = Ee(), T = w ? "absolute" : "fixed", E = R(), D = Q((e) => e.status), O = $((e) => e.dragStatus), k = $((e) => e.replaceTransitionStatus), ie = E.screen.getState().setDragStatus, j = E.screen.getState().setReplaceTransitionStatus, M = W((e) => e.index), ce = W((e) => e.histories), N = y ? ce[M - 1]?.id : ce[M]?.id, de = $((e) => N ? e.sharedBars[N] : void 0), fe = $((e) => N ? e.screenSurfaces[N] : void 0), pe = d(null);
+	pe.current ||= ae({
 		getTransitionTaskId: () => E.navigate.getState().transitionTaskId,
-		setDragStatus: O,
-		setReplaceTransitionStatus: k
+		setDragStatus: ie,
+		setReplaceTransitionStatus: j
 	});
-	let fe = de.current, pe = ve(S), { initial: he, swipeDirection: ge, decoratorName: _e } = pe, N = ae.get(_e), { viewportScrollHeight: P } = Ve(), F = P > 0, [be, L] = p(0), [Se, z] = p(0), V = f(null), H = f(null), U = f(null), W = f(null), G = f(null), K = f({
-		transition: pe,
-		decorator: N,
+	let he = pe.current, ge = d(null);
+	ge.current ||= Ve(E.navigate);
+	let P = ye(S), { initial: _e, swipeDirection: ve, decoratorName: be } = P, F = oe.get(be), { viewportScrollHeight: L } = Ue(), z = L > 0, [B, Se] = f(0), [Ce, we] = f(0), Te = d(null), H = d(null), U = d(null), G = d(null), K = d(null), q = d({
+		transition: P,
+		decorator: F,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!s,
-		viewportScrollHeight: P,
-		isRoot: x,
-		isActive: b,
+		viewportScrollHeight: L,
+		isRoot: b,
+		isActive: y,
 		status: D,
-		dragStatus: ne,
-		index: A
+		dragStatus: O,
+		index: M
 	});
-	K.current = {
-		transition: pe,
-		decorator: N,
+	q.current = {
+		transition: P,
+		decorator: F,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!s,
-		viewportScrollHeight: P,
-		isRoot: x,
-		isActive: b,
+		viewportScrollHeight: L,
+		isRoot: b,
+		isActive: y,
 		status: D,
-		dragStatus: ne,
-		index: A
+		dragStatus: O,
+		index: M
 	};
-	let Ce = f(null);
-	Ce.current ||= re({
-		getTransition: () => K.current.transition,
-		getDecorator: () => K.current.decorator,
+	let De = d(null);
+	De.current ||= A({
+		getTransition: () => q.current.transition,
+		getDecorator: () => q.current.decorator,
 		getElements: () => ({
 			scope: H.current,
-			screenContainer: V.current,
+			screenContainer: Te.current,
 			decorator: U.current,
-			sharedTopBar: W.current,
-			sharedBottomBar: G.current
+			sharedTopBar: G.current,
+			sharedBottomBar: K.current
 		}),
-		hasSharedTopBar: () => K.current.hasSharedTopBar,
-		hasSharedBottomBar: () => K.current.hasSharedBottomBar,
-		getViewportScrollHeight: () => K.current.viewportScrollHeight,
+		hasSharedTopBar: () => q.current.hasSharedTopBar,
+		hasSharedBottomBar: () => q.current.hasSharedBottomBar,
+		getViewportScrollHeight: () => q.current.viewportScrollHeight,
 		isReadyForDrag: () => {
-			let e = K.current;
+			let e = q.current;
 			return !e.isRoot && e.isActive && e.status === "COMPLETED" && e.dragStatus === "IDLE" && !!e.transition.swipeDirection && e.viewportScrollHeight < 10;
 		},
 		getPartnerBars: () => {
-			let e = K.current, t = E.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
+			let e = q.current, t = E.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
 			return n ? E.screen.getState().sharedBars[n] : void 0;
 		},
-		setDragStatus: O,
+		setDragStatus: ie,
 		back: () => window.history.back()
 	});
-	let J = Ce.current, Te = (e) => J.pointerDown(e.nativeEvent), Ee = (e) => J.pointerMove(e.nativeEvent), De = (e) => J.pointerUp(e.nativeEvent);
+	let J = De.current, Oe = (e) => J.pointerDown(e.nativeEvent), ke = (e) => J.pointerMove(e.nativeEvent), Ae = (e) => J.pointerUp(e.nativeEvent);
 	o(() => {
-		oe(H.current);
+		se(H.current);
 	}, []), o(() => {
 		let e = H.current;
 		if (!e) return;
@@ -385,27 +394,27 @@ function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 			e.removeEventListener("touchmove", t);
 		};
 	}, [J]), u(() => {
-		let e = W.current;
+		let e = G.current;
 		if (!e) {
-			L(0);
+			Se(0);
 			return;
 		}
-		return me(e, L);
+		return me(e, Se);
 	}, [a]), u(() => {
-		let e = G.current;
+		let e = K.current;
 		if (!e) {
-			z(0);
+			we(0);
 			return;
 		}
-		return me(e, z);
+		return me(e, we);
 	}, [s]), u(() => {
 		let { registerSharedBars: e, unregisterSharedBars: t } = E.screen.getState();
-		return e(y, {
+		return e(v, {
 			topBar: !!a,
 			bottomBar: !!s
-		}), () => t(y);
+		}), () => t(v);
 	}, [
-		y,
+		v,
 		a,
 		s,
 		E.screen
@@ -413,67 +422,81 @@ function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 		let e = H.current;
 		if (!e) return;
 		let { registerScreenSurface: t, unregisterScreenSurface: n } = E.screen.getState();
-		return t(y, { opaqueBackground: ue(getComputedStyle(e).backgroundColor) }), () => n(y);
+		return t(v, { opaqueBackground: ue(getComputedStyle(e).backgroundColor) }), () => n(v);
 	}, [
-		y,
-		h,
+		v,
+		m,
 		D,
 		E.screen
 	]);
-	let Oe = b || te === A - 1, { app: ke, nav: Ae } = g({
+	let je = y || x === M - 1, { app: Me, nav: Ne } = h({
 		status: D,
-		isTopOrTopPrev: Oe,
+		isTopOrTopPrev: je,
 		hasTopBar: !!a,
 		hasNavBar: !!s,
-		partnerBars: se
-	}), Y = ee({
+		partnerBars: de
+	}), Y = te({
 		status: D,
-		isTopOrTopPrev: Oe,
+		isTopOrTopPrev: je,
 		transitionName: S
-	}), [je, Me] = p({
+	}), Pe = ne({
+		isActive: y,
+		isPrev: re,
+		zIndex: x,
+		index: M,
+		status: D,
+		dragStatus: O,
+		replaceTransitionStatus: k
+	}), Fe = d(Pe), Ie = d(Y !== null && Pe), [Le, Re] = f({
 		key: Y,
 		released: Y === null
 	});
-	je.key !== Y && Me({
+	Le.key !== Y && (Re({
 		key: Y,
 		released: Y === null
-	});
-	let X = Y !== null && je.key === Y && !je.released, Z = X ? !b && le?.opaqueBackground ? "park" : b && (D === "PUSHING" || D === "REPLACING") && le?.opaqueBackground ? "park-under" : "true" : "false";
-	u(() => fe.driveScreenLifecycle({
+	}), Ie.current = Y !== null && Fe.current), Fe.current = Pe;
+	let X = Y !== null && Le.key === Y && !Le.released, Z = X ? !y && fe?.opaqueBackground ? "park" : y && (D === "PUSHING" || D === "REPLACING") && fe?.opaqueBackground ? "park-under" : "true" : "false";
+	u(() => he.driveScreenLifecycle({
 		getElements: () => ({
 			scope: H.current,
 			decorator: U.current,
-			bars: [W.current, G.current]
+			bars: [G.current, K.current]
 		}),
 		transitionName: S,
 		prevTransitionName: C,
 		status: D,
-		isActive: b,
+		isActive: y,
 		animHoldReleased: !X
 	}), [
-		fe,
+		he,
 		D,
-		b,
+		y,
 		C,
 		S,
 		X
 	]), o(() => {
-		if (X) return ye(() => Me((e) => e.key === Y && !e.released ? {
-			key: Y,
+		if (!X || Y === null) return;
+		let e = Y, t = E.navigate.getState().transitionTaskId, n = t === null ? e : `${e}#${t}`;
+		return ge.current.join(n, () => Re((t) => t.key === e && !t.released ? {
+			key: e,
 			released: !0
-		} : e), { scope: H.current });
+		} : t), {
+			scope: H.current,
+			decodeWait: Ie.current
+		});
 	}, [
 		X,
 		Y,
-		Z
+		Z,
+		E.navigate
 	]);
-	let Ne = Z === "park-under" ? {} : ce({
-		initial: he,
-		isActive: b,
+	let ze = Z === "park-under" ? {} : le({
+		initial: _e,
+		isActive: y,
 		status: D
 	});
 	return /* @__PURE__ */ xe("div", {
-		ref: V,
+		ref: Te,
 		style: {
 			position: T,
 			top: 0,
@@ -501,28 +524,28 @@ function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 			}),
 			/* @__PURE__ */ xe("div", {
 				ref: H,
-				...v,
-				onPointerDown: Te,
-				onPointerMove: Ee,
-				onPointerUp: De,
-				onPointerCancel: De,
+				..._,
+				onPointerDown: Oe,
+				onPointerMove: ke,
+				onPointerUp: Ae,
+				onPointerCancel: Ae,
 				"data-flemo-screen": !0,
 				"data-flemo-transition": S,
 				"data-flemo-status": D,
-				"data-flemo-active": b ? "true" : "false",
+				"data-flemo-active": y ? "true" : "false",
 				"data-flemo-anim-hold": Z,
 				style: {
 					display: "flex",
 					flexDirection: "column",
 					height: "100%",
-					backgroundColor: h,
-					overflowY: _ ? void 0 : "auto",
-					touchAction: ge === "x" ? "pan-y" : ge === "y" ? "pan-x" : "auto",
-					...Ne,
-					...v.style
+					backgroundColor: m,
+					overflowY: g ? void 0 : "auto",
+					touchAction: ve === "x" ? "pan-y" : ve === "y" ? "pan-x" : "auto",
+					...ze,
+					..._.style
 				},
 				children: [
-					!d && t && /* @__PURE__ */ I("div", {
+					!ee && t && /* @__PURE__ */ I("div", {
 						style: { minHeight: t },
 						children: /* @__PURE__ */ I("div", { style: {
 							position: T,
@@ -534,7 +557,7 @@ function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					}),
 					a && /* @__PURE__ */ I("div", { style: {
 						width: "100%",
-						minHeight: be
+						minHeight: B
 					} }),
 					c,
 					/* @__PURE__ */ I("div", {
@@ -542,19 +565,19 @@ function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 							display: "flex",
 							flexDirection: "column",
 							flexGrow: 1,
-							overflowY: _ ? "auto" : void 0
+							overflowY: g ? "auto" : void 0
 						},
 						children: e
 					}),
 					l,
 					s && /* @__PURE__ */ I("div", { style: {
-						display: F ? "none" : void 0,
+						display: z ? "none" : void 0,
 						width: "100%",
-						minHeight: Se
+						minHeight: Ce
 					} }),
-					!m && r && /* @__PURE__ */ I("div", {
+					!p && r && /* @__PURE__ */ I("div", {
 						style: {
-							display: F ? "none" : void 0,
+							display: z ? "none" : void 0,
 							minHeight: r
 						},
 						children: /* @__PURE__ */ I("div", { style: {
@@ -568,16 +591,16 @@ function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				]
 			}),
 			a && /* @__PURE__ */ I("div", {
-				ref: W,
+				ref: G,
 				"data-flemo-bar": "app",
 				"data-flemo-bar-transition": S,
 				"data-flemo-bar-status": D,
-				"data-flemo-bar-active": b ? "true" : "false",
-				"data-flemo-bar-riding": ke ? "true" : "false",
+				"data-flemo-bar-active": y ? "true" : "false",
+				"data-flemo-bar-riding": Me ? "true" : "false",
 				"data-flemo-anim-hold": Z,
 				style: {
 					position: T,
-					top: d ? 0 : t,
+					top: ee ? 0 : t,
 					left: 0,
 					width: "100%",
 					zIndex: 1
@@ -585,24 +608,24 @@ function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				children: a
 			}),
 			s && /* @__PURE__ */ I("div", {
-				ref: G,
+				ref: K,
 				"data-flemo-bar": "nav",
 				"data-flemo-bar-transition": S,
 				"data-flemo-bar-status": D,
-				"data-flemo-bar-active": b ? "true" : "false",
-				"data-flemo-bar-riding": Ae ? "true" : "false",
+				"data-flemo-bar-active": y ? "true" : "false",
+				"data-flemo-bar-riding": Ne ? "true" : "false",
 				"data-flemo-anim-hold": Z,
 				style: {
-					display: F ? "none" : void 0,
+					display: z ? "none" : void 0,
 					position: T,
-					bottom: m ? 0 : r,
+					bottom: p ? 0 : r,
 					left: 0,
 					width: "100%",
 					zIndex: 1
 				},
 				children: s
 			}),
-			N && /* @__PURE__ */ I(Be, {
+			F && /* @__PURE__ */ I(He, {
 				ref: U,
 				"data-flemo-anim-hold": Z
 			}),
@@ -622,19 +645,19 @@ function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 }
 //#endregion
 //#region src/screen/Screen.tsx
-function Ue({ children: e, ...t }) {
-	let { isActive: n, isPrev: r, zIndex: i } = B();
+function Ge({ children: e, ...t }) {
+	let { isActive: n, isPrev: r, zIndex: i } = V();
 	return /* @__PURE__ */ I(ze, {
-		freeze: _({
+		freeze: ne({
 			isActive: n,
 			isPrev: r,
 			zIndex: i,
-			index: q((e) => e.index),
+			index: W((e) => e.index),
 			status: Q((e) => e.status),
 			dragStatus: $((e) => e.dragStatus),
 			replaceTransitionStatus: $((e) => e.replaceTransitionStatus)
 		}),
-		children: /* @__PURE__ */ I(He, {
+		children: /* @__PURE__ */ I(We, {
 			...t,
 			children: e
 		})
@@ -642,8 +665,8 @@ function Ue({ children: e, ...t }) {
 }
 //#endregion
 //#region src/screen/Part.tsx
-function We({ ref: e, name: t, style: n, children: r, ...i }) {
-	let { isActive: a } = B();
+function Ke({ ref: e, name: t, style: n, children: r, ...i }) {
+	let { isActive: a } = V();
 	return /* @__PURE__ */ I("div", {
 		ref: e,
 		"data-flemo-part-name": t,
@@ -656,15 +679,15 @@ function We({ ref: e, name: t, style: n, children: r, ...i }) {
 }
 //#endregion
 //#region src/stores/RouterScopeProvider.tsx
-function Ge({ children: e }) {
-	let [t] = p(() => ({
-		history: te(),
-		navigate: S(),
+function qe({ children: e }) {
+	let [t] = f(() => ({
+		history: re(),
+		navigate: x(),
 		transition: M(),
 		screen: k(),
-		driver: b(),
+		driver: y(),
 		markSelfInduced: fe,
-		consume: v,
+		consume: g,
 		life: { alive: !0 }
 	}));
 	return /* @__PURE__ */ I(L.Provider, {
@@ -673,4 +696,4 @@ function Ge({ children: e }) {
 	});
 }
 //#endregion
-export { We as Part, Ne as Route, Z as Router, Ge as RouterScopeProvider, Ue as Screen, z as ScreenContext, Be as ScreenDecorator, ze as ScreenFreeze, He as ScreenMotion, Oe as Slot, y as createBrowserHistoryDriver, x as createDecorator, w as createPartTransition, T as createRawDecorator, E as createRawPartTransition, D as createRawTransition, j as createTransition, ge as partTransitionMap, q as useHistoryStore, Fe as useNavigate, Q as useNavigateStore, Re as useParams, Ie as usePathname, B as useScreen, $ as useScreenStore, Le as useStep, R as useStores, Ve as useViewportScrollHeight };
+export { Ke as Part, Fe as Route, Pe as Router, qe as RouterScopeProvider, Ge as Screen, B as ScreenContext, He as ScreenDecorator, ze as ScreenFreeze, We as ScreenMotion, Oe as Slot, v as createBrowserHistoryDriver, b as createDecorator, C as createPartTransition, w as createRawDecorator, T as createRawPartTransition, E as createRawTransition, j as createTransition, ge as partTransitionMap, W as useHistoryStore, Le as useNavigate, Q as useNavigateStore, Z as useParams, Re as usePathname, V as useScreen, $ as useScreenStore, X as useStep, R as useStores, Ue as useViewportScrollHeight };

package/dist/screen/__tests__/ScreenMotion.animHoldPair.test.d.ts

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

package/dist/screen/__tests__/ScreenMotion.decodeWait.test.d.ts

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

package/dist/screen/scopeAnimHoldCoordinator.d.ts

@@ -0,0 +1,2 @@
+import { AnimHoldCoordinator, NavigateStoreApi } from '@flemo/core';
+export default function getScopeAnimHoldCoordinator(navigateStore: NavigateStoreApi): AnimHoldCoordinator;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flemo/react",
-  "version": "1.6.6",
+  "version": "1.6.8",
   "description": "React bindings for flemo: Router, Route, Screen, and the screen-transition runtime.",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -36,7 +36,7 @@
   "dependencies": {
     "path-to-regexp": "^8.4.2",
     "zustand": "^5.0.14",
-    "@flemo/core": "1.16.1"
+    "@flemo/core": "1.18.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",