@flemo/react 1.6.6 → 1.6.7

package/dist/index.mjs

@@ -1,24 +1,24 @@
 import e, { Activity as t, Children as n, createContext as r, isValidElement as i, useContext as a, useEffect as o, useId as s, useImperativeHandle as c, useInsertionEffect as l, useLayoutEffect as u, useReducer as d, useRef as f, useState as p } from "react";
-import { animHoldKey as ee, appendParamsQuery as m, buildRoutePath as h, computeBarRiding as g, computeScreenFreeze as _, consumeSelfInducedPop as v, createBrowserHistoryDriver as y, createBrowserHistoryDriver as b, createDecorator as x, createHistoryStore as te, 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 { jsx as I, jsxs as xe } from "react/jsx-runtime";
+import { animHoldKey as ee, appendParamsQuery as m, buildRoutePath as h, computeBarRiding as g, computeScreenFreeze as _, consumeSelfInducedPop as v, createAnimHoldCoordinator as y, createBrowserHistoryDriver as b, createBrowserHistoryDriver as x, createDecorator as te, createHistoryStore as S, createNavigateStore as C, createNavigationController as w, createPartTransition as T, createRawDecorator as E, createRawPartTransition as D, createRawTransition as O, createRouterScope as ne, createScreenSelector as k, createScreenStore as A, createStepController as j, createSwipeController as M, createTransition as N, createTransitionEngine as re, createTransitionStore as ie, decoratorMap as ae, eagerlyDecodeImages as oe, 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 P, releaseScopeHistorySync as F, resolveTransition as ve, seedRouterEntry as I, subscribeStepParamsRestore as ye } from "@flemo/core";
+import { jsx as L, jsxs as be } from "react/jsx-runtime";
 //#region src/stores/StoreContext.ts
-var L = r(null);
+var R = r(null);
 //#endregion
 //#region src/stores/useStores.ts
-function R() {
-	let e = a(L);
+function z() {
+	let e = a(R);
 	if (!e) throw Error("flemo stores are missing. Render inside a <Router>.");
 	return e;
 }
 //#endregion
 //#region src/history/HistoryListener.tsx
-function Se() {
-	let e = R();
-	return o(() => (se(e), () => P(e)), [e]), null;
+function xe() {
+	let e = z();
+	return o(() => (se(e), () => F(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({}), H = r(() => {});
 //#endregion
 //#region src/screen/ParamsProvider/ParamsReducer.ts
-function U(e, t) {
+function Ce(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 U({ children: e }) {
+	let { isActive: t, params: n } = V(), { driver: r } = z(), [i, a] = d(Ce, n);
 	return o(() => {
-		if (t) return be(r, (e) => a({
+		if (t) return ye(r, (e) => a({
 			type: "SET",
 			params: e
 		}));
@@ -60,9 +60,9 @@ function W({ children: e }) {
 		t,
 		a,
 		r
-	]), /* @__PURE__ */ I(H.Provider, {
+	]), /* @__PURE__ */ L(H.Provider, {
 		value: a,
-		children: /* @__PURE__ */ I(V.Provider, {
+		children: /* @__PURE__ */ L(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 W = (e) => e;
+function G(t, n = W) {
 	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 K(e) {
+	return G(z().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 we({ children: e }) {
+	let t = K((e) => e.index);
+	return k(K((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__ */ L(B.Provider, {
 			value: {
 				...t,
 				routePath: le(r.props.path, t.pathname)
 			},
-			children: /* @__PURE__ */ I(W, { children: r })
+			children: /* @__PURE__ */ L(U, { children: r })
 		}, t.id) : null;
 	});
 }
 //#endregion
 //#region src/screen/ScreenViewportContext.ts
-var J = r({ contained: !1 });
-function we() {
-	return a(J);
+var q = r({ contained: !1 });
+function Te() {
+	return a(q);
 }
 //#endregion
 //#region src/transition/styles.ts
-function Te(e, t, n = []) {
-	l(() => N(e, t, n), [
+function Ee(e, t, n = []) {
+	l(() => P(e, t, n), [
 		e,
 		t,
 		n
@@ -112,44 +112,44 @@ function Te(e, t, n = []) {
 }
 //#endregion
 //#region src/RouterDepthContext.ts
-var Ee = r(0), De = { contained: !0 };
-function Oe({ children: e, className: t, style: n }) {
-	return /* @__PURE__ */ I("div", {
+var De = r(0), Oe = { contained: !0 };
+function ke({ children: e, className: t, style: n }) {
+	return /* @__PURE__ */ L("div", {
 		className: t,
 		style: {
 			position: "relative",
 			overflow: "hidden",
 			...n
 		},
-		children: /* @__PURE__ */ I(J.Provider, {
-			value: De,
-			children: /* @__PURE__ */ I(Ce, { children: e })
+		children: /* @__PURE__ */ L(q.Provider, {
+			value: Oe,
+			children: /* @__PURE__ */ L(we, { children: e })
 		})
 	});
 }
 //#endregion
 //#region src/Router.tsx
-function ke(e) {
+function Ae(e) {
 	let t = null;
 	return n.forEach(e, (e) => {
 		if (t || !i(e)) return;
-		if (e.type === Oe) {
+		if (e.type === ke) {
 			t = n.toArray(e.props.children).filter(i);
 			return;
 		}
 		let r = e.props.children;
 		if (r) {
-			let e = ke(r);
+			let e = Ae(r);
 			e && (t = 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(),
+var je = typeof window > "u" ? o : u, J = [], Y = [], Me = [], X = { contained: !0 };
+function Z({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = J, decorators: c = Y, partTransitions: l = Me, history: u = "browser", createDriver: d, className: f, style: ee }) {
+	let m = a(De), h = m > 0, g = u === "memory", _ = s(), v = a(B), y = h && v.id ? `_F_${v.id}_` : _, b = Ae(e), te = b !== null, S = a(R), C = h ? null : S, w = C !== null, T = d ?? x, [E] = p(() => g ? null : T(w ? void 0 : y)), D = !h && !g && !de(), O = D && E ? E.readPathname() : t || "/", k = O.indexOf("?"), A = (k >= 0 ? O.slice(0, k) : O) || "/", j = D ? window.location.search : k >= 0 ? O.slice(k) : "", [M] = p(() => ne({
+		routePaths: (b ?? n.toArray(e)).map((e) => e.props.path).flat(),
 		pathname: A,
-		search: re,
+		search: j,
 		defaultTransitionName: r,
 		memory: g,
 		browserDriver: E,
@@ -158,16 +158,16 @@ function Z({ children: e, initPath: t = "/", defaultTransitionName: r = "cuperti
 		zoneEntryId: h && !w && v.id || void 0,
 		persistKey: h && !g && !w ? y : 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({
+	M.transition.setState({ defaultTransitionName: r }), je(() => (M.life.alive = !0, () => {
+		M.life.alive = !1;
+	}), [M]), Ee(i, c, l), o(() => {
+		g || !E || I({
 			driver: E,
 			routerKey: w ? null : y,
 			nested: h && !w,
 			seedPathname: A,
 			defaultTransitionName: r,
-			rootParams: j.history.getState().histories[0]?.params ?? {}
+			rootParams: M.history.getState().histories[0]?.params ?? {}
 		});
 	}, [
 		g,
@@ -176,28 +176,28 @@ function Z({ children: e, initPath: t = "/", defaultTransitionName: r = "cuperti
 		y,
 		A,
 		r,
-		j.history,
+		M.history,
 		E
 	]);
-	let ie = te ? e : /* @__PURE__ */ I(Ce, { children: e }), M = /* @__PURE__ */ I(Ee.Provider, {
+	let N = te ? e : /* @__PURE__ */ L(we, { children: e }), re = /* @__PURE__ */ L(De.Provider, {
 		value: m + 1,
-		children: /* @__PURE__ */ xe(L.Provider, {
-			value: j,
-			children: [!g && /* @__PURE__ */ I(Se, {}), h ? /* @__PURE__ */ I(J.Provider, {
+		children: /* @__PURE__ */ be(R.Provider, {
+			value: M,
+			children: [!g && /* @__PURE__ */ L(xe, {}), h ? /* @__PURE__ */ L(q.Provider, {
 				value: X,
-				children: ie
-			}) : ie]
+				children: N
+			}) : N]
 		})
 	});
-	return h ? /* @__PURE__ */ I("div", {
+	return h ? /* @__PURE__ */ L("div", {
 		className: f,
 		style: {
 			position: "relative",
 			overflow: "hidden",
 			...ee
 		},
-		children: M
-	}) : M;
+		children: re
+	}) : re;
 }
 //#endregion
 //#region src/Route.tsx
@@ -212,7 +212,7 @@ function Pe(e, t) {
 //#endregion
 //#region src/navigate/useNavigate.ts
 function Fe() {
-	let e = R(), t = C({
+	let e = z(), t = w({
 		stores: e,
 		buildPathname: (e, t) => Pe(e, t),
 		driver: e.driver,
@@ -227,16 +227,16 @@ function Fe() {
 //#endregion
 //#region src/navigate/usePathname.ts
 function Ie() {
-	return q((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
+	return K((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);
+	let { routePath: e } = V(), t = z(), n = a(H), { driver: r, markSelfInduced: i } = t, [s, c] = p(null);
 	o(() => {
 		if (!e) return c(_e(r.readState())), r.subscribe((e) => c(_e(e.state)));
 	}, [e, r]);
-	let l = A({
+	let l = j({
 		stores: t,
 		driver: r,
 		markSelfInduced: i,
@@ -258,28 +258,35 @@ function Le() {
 //#endregion
 //#region src/screen/ParamsProvider/useParams.ts
 function Re() {
-	return a(V);
+	return a(Se);
 }
 //#endregion
 //#region src/screen/ScreenFreeze.tsx
 function ze({ freeze: e, children: n }) {
-	return /* @__PURE__ */ I(t, {
+	return /* @__PURE__ */ L(t, {
 		mode: e ? "hidden" : "visible",
 		children: n
 	});
 }
 //#endregion
+//#region src/screen/scopeAnimHoldCoordinator.ts
+var Be = /* @__PURE__ */ new WeakMap();
+function Ve(e) {
+	let t = Be.get(e);
+	return t || (t = y(), Be.set(e, t)), t;
+}
+//#endregion
 //#region src/stores/useNavigateStore.ts
 function Q(e) {
-	return K(R().navigate, e);
+	return G(z().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 = f(null);
 	c(e, () => a.current);
 	let o = Q((e) => e.status), { decoratorName: s } = ve(i), l = ae.get(s);
-	return l ? /* @__PURE__ */ I("div", {
+	return l ? /* @__PURE__ */ L("div", {
 		ref: a,
 		"data-flemo-decorator": !0,
 		"data-flemo-decorator-name": l.name,
@@ -300,7 +307,7 @@ function Be({ ref: e, style: t, ...n }) {
 }
 //#endregion
 //#region src/screen/useViewportScrollHeight.ts
-function Ve() {
+function Ue() {
 	let [e, t] = p(0), [n, r] = p(0);
 	return o(() => he((e, n) => {
 		r(n), t(e);
@@ -312,92 +319,94 @@ function Ve() {
 //#endregion
 //#region src/stores/useScreenStore.ts
 function $(e) {
-	return K(R().screen, e);
+	return G(z().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: d, hideSystemNavigationBar: m, backgroundColor: h = "white", contentScrollable: _ = !0, ...v }) {
+	let { id: y, isActive: b, isRoot: x, zIndex: te, transitionName: S, prevTransitionName: C } = V(), { contained: w } = Te(), T = w ? "absolute" : "fixed", E = z(), D = Q((e) => e.status), O = $((e) => e.dragStatus), ne = E.screen.getState().setDragStatus, k = E.screen.getState().setReplaceTransitionStatus, A = K((e) => e.index), j = K((e) => e.histories), N = b ? j[A - 1]?.id : j[A]?.id, ie = $((e) => N ? e.sharedBars[N] : void 0), se = $((e) => N ? e.screenSurfaces[N] : void 0), le = f(null);
+	le.current ||= re({
 		getTransitionTaskId: () => E.navigate.getState().transitionTaskId,
-		setDragStatus: O,
+		setDragStatus: ne,
 		setReplaceTransitionStatus: k
 	});
-	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({
+	let de = le.current, fe = f(null);
+	fe.current ||= Ve(E.navigate);
+	let pe = ve(S), { initial: he, swipeDirection: ge, decoratorName: _e } = pe, P = ae.get(_e), { viewportScrollHeight: F } = Ue(), I = F > 0, [ye, R] = p(0), [xe, B] = p(0), Se = f(null), H = f(null), Ce = f(null), U = f(null), W = f(null), G = f({
 		transition: pe,
-		decorator: N,
+		decorator: P,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!s,
-		viewportScrollHeight: P,
+		viewportScrollHeight: F,
 		isRoot: x,
 		isActive: b,
 		status: D,
-		dragStatus: ne,
+		dragStatus: O,
 		index: A
 	});
-	K.current = {
+	G.current = {
 		transition: pe,
-		decorator: N,
+		decorator: P,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!s,
-		viewportScrollHeight: P,
+		viewportScrollHeight: F,
 		isRoot: x,
 		isActive: b,
 		status: D,
-		dragStatus: ne,
+		dragStatus: O,
 		index: A
 	};
-	let Ce = f(null);
-	Ce.current ||= re({
-		getTransition: () => K.current.transition,
-		getDecorator: () => K.current.decorator,
+	let we = f(null);
+	we.current ||= M({
+		getTransition: () => G.current.transition,
+		getDecorator: () => G.current.decorator,
 		getElements: () => ({
 			scope: H.current,
-			screenContainer: V.current,
-			decorator: U.current,
-			sharedTopBar: W.current,
-			sharedBottomBar: G.current
+			screenContainer: Se.current,
+			decorator: Ce.current,
+			sharedTopBar: U.current,
+			sharedBottomBar: W.current
 		}),
-		hasSharedTopBar: () => K.current.hasSharedTopBar,
-		hasSharedBottomBar: () => K.current.hasSharedBottomBar,
-		getViewportScrollHeight: () => K.current.viewportScrollHeight,
+		hasSharedTopBar: () => G.current.hasSharedTopBar,
+		hasSharedBottomBar: () => G.current.hasSharedBottomBar,
+		getViewportScrollHeight: () => G.current.viewportScrollHeight,
 		isReadyForDrag: () => {
-			let e = K.current;
+			let e = G.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 = G.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: ne,
 		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 q = we.current, Ee = (e) => q.pointerDown(e.nativeEvent), De = (e) => q.pointerMove(e.nativeEvent), Oe = (e) => q.pointerUp(e.nativeEvent);
 	o(() => {
 		oe(H.current);
 	}, []), o(() => {
 		let e = H.current;
 		if (!e) return;
 		let t = (e) => {
-			J.shouldPreventTouch() && e.preventDefault(), e.target?.dataset.swipeAtEdgeBar === "true" && e.preventDefault();
+			q.shouldPreventTouch() && e.preventDefault(), e.target?.dataset.swipeAtEdgeBar === "true" && e.preventDefault();
 		};
 		return e.addEventListener("touchmove", t, { passive: !1 }), () => {
 			e.removeEventListener("touchmove", t);
 		};
-	}, [J]), u(() => {
-		let e = W.current;
+	}, [q]), u(() => {
+		let e = U.current;
 		if (!e) {
-			L(0);
+			R(0);
 			return;
 		}
-		return me(e, L);
+		return me(e, R);
 	}, [a]), u(() => {
-		let e = G.current;
+		let e = W.current;
 		if (!e) {
-			z(0);
+			B(0);
 			return;
 		}
-		return me(e, z);
+		return me(e, B);
 	}, [s]), u(() => {
 		let { registerSharedBars: e, unregisterSharedBars: t } = E.screen.getState();
 		return e(y, {
@@ -420,30 +429,30 @@ function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 		D,
 		E.screen
 	]);
-	let Oe = b || te === A - 1, { app: ke, nav: Ae } = g({
+	let ke = b || te === A - 1, { app: Ae, nav: je } = g({
 		status: D,
-		isTopOrTopPrev: Oe,
+		isTopOrTopPrev: ke,
 		hasTopBar: !!a,
 		hasNavBar: !!s,
-		partnerBars: se
-	}), Y = ee({
+		partnerBars: ie
+	}), J = ee({
 		status: D,
-		isTopOrTopPrev: Oe,
+		isTopOrTopPrev: ke,
 		transitionName: S
-	}), [je, Me] = p({
-		key: Y,
-		released: Y === null
+	}), [Y, Me] = p({
+		key: J,
+		released: J === null
 	});
-	je.key !== Y && Me({
-		key: Y,
-		released: Y === null
+	Y.key !== J && Me({
+		key: J,
+		released: J === 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({
+	let X = J !== null && Y.key === J && !Y.released, Z = X ? !b && se?.opaqueBackground ? "park" : b && (D === "PUSHING" || D === "REPLACING") && se?.opaqueBackground ? "park-under" : "true" : "false";
+	u(() => de.driveScreenLifecycle({
 		getElements: () => ({
 			scope: H.current,
-			decorator: U.current,
-			bars: [W.current, G.current]
+			decorator: Ce.current,
+			bars: [U.current, W.current]
 		}),
 		transitionName: S,
 		prevTransitionName: C,
@@ -451,29 +460,32 @@ function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 		isActive: b,
 		animHoldReleased: !X
 	}), [
-		fe,
+		de,
 		D,
 		b,
 		C,
 		S,
 		X
 	]), o(() => {
-		if (X) return ye(() => Me((e) => e.key === Y && !e.released ? {
-			key: Y,
+		if (!X || J === null) return;
+		let e = J, t = E.navigate.getState().transitionTaskId, n = t === null ? e : `${e}#${t}`;
+		return fe.current.join(n, () => Me((t) => t.key === e && !t.released ? {
+			key: e,
 			released: !0
-		} : e), { scope: H.current });
+		} : t), { scope: H.current });
 	}, [
 		X,
-		Y,
-		Z
+		J,
+		Z,
+		E.navigate
 	]);
 	let Ne = Z === "park-under" ? {} : ce({
 		initial: he,
 		isActive: b,
 		status: D
 	});
-	return /* @__PURE__ */ xe("div", {
-		ref: V,
+	return /* @__PURE__ */ be("div", {
+		ref: Se,
 		style: {
 			position: T,
 			top: 0,
@@ -488,7 +500,7 @@ function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 			overscrollBehavior: "contain"
 		},
 		children: [
-			/* @__PURE__ */ I("div", {
+			/* @__PURE__ */ L("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
 					position: T,
@@ -499,13 +511,13 @@ function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					zIndex: 1
 				}
 			}),
-			/* @__PURE__ */ xe("div", {
+			/* @__PURE__ */ be("div", {
 				ref: H,
 				...v,
-				onPointerDown: Te,
-				onPointerMove: Ee,
-				onPointerUp: De,
-				onPointerCancel: De,
+				onPointerDown: Ee,
+				onPointerMove: De,
+				onPointerUp: Oe,
+				onPointerCancel: Oe,
 				"data-flemo-screen": !0,
 				"data-flemo-transition": S,
 				"data-flemo-status": D,
@@ -522,9 +534,9 @@ function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					...v.style
 				},
 				children: [
-					!d && t && /* @__PURE__ */ I("div", {
+					!d && t && /* @__PURE__ */ L("div", {
 						style: { minHeight: t },
-						children: /* @__PURE__ */ I("div", { style: {
+						children: /* @__PURE__ */ L("div", { style: {
 							position: T,
 							top: 0,
 							width: "100%",
@@ -532,12 +544,12 @@ function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 							backgroundColor: n
 						} })
 					}),
-					a && /* @__PURE__ */ I("div", { style: {
+					a && /* @__PURE__ */ L("div", { style: {
 						width: "100%",
-						minHeight: be
+						minHeight: ye
 					} }),
 					c,
-					/* @__PURE__ */ I("div", {
+					/* @__PURE__ */ L("div", {
 						style: {
 							display: "flex",
 							flexDirection: "column",
@@ -547,17 +559,17 @@ function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 						children: e
 					}),
 					l,
-					s && /* @__PURE__ */ I("div", { style: {
-						display: F ? "none" : void 0,
+					s && /* @__PURE__ */ L("div", { style: {
+						display: I ? "none" : void 0,
 						width: "100%",
-						minHeight: Se
+						minHeight: xe
 					} }),
-					!m && r && /* @__PURE__ */ I("div", {
+					!m && r && /* @__PURE__ */ L("div", {
 						style: {
-							display: F ? "none" : void 0,
+							display: I ? "none" : void 0,
 							minHeight: r
 						},
-						children: /* @__PURE__ */ I("div", { style: {
+						children: /* @__PURE__ */ L("div", { style: {
 							position: T,
 							bottom: 0,
 							width: "100%",
@@ -567,13 +579,13 @@ function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					})
 				]
 			}),
-			a && /* @__PURE__ */ I("div", {
-				ref: W,
+			a && /* @__PURE__ */ L("div", {
+				ref: U,
 				"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-riding": Ae ? "true" : "false",
 				"data-flemo-anim-hold": Z,
 				style: {
 					position: T,
@@ -584,16 +596,16 @@ function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				},
 				children: a
 			}),
-			s && /* @__PURE__ */ I("div", {
-				ref: G,
+			s && /* @__PURE__ */ L("div", {
+				ref: W,
 				"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-riding": je ? "true" : "false",
 				"data-flemo-anim-hold": Z,
 				style: {
-					display: F ? "none" : void 0,
+					display: I ? "none" : void 0,
 					position: T,
 					bottom: m ? 0 : r,
 					left: 0,
@@ -602,11 +614,11 @@ function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				},
 				children: s
 			}),
-			N && /* @__PURE__ */ I(Be, {
-				ref: U,
+			P && /* @__PURE__ */ L(He, {
+				ref: Ce,
 				"data-flemo-anim-hold": Z
 			}),
-			/* @__PURE__ */ I("div", {
+			/* @__PURE__ */ L("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
 					position: T,
@@ -622,19 +634,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();
-	return /* @__PURE__ */ I(ze, {
+function Ge({ children: e, ...t }) {
+	let { isActive: n, isPrev: r, zIndex: i } = V();
+	return /* @__PURE__ */ L(ze, {
 		freeze: _({
 			isActive: n,
 			isPrev: r,
 			zIndex: i,
-			index: q((e) => e.index),
+			index: K((e) => e.index),
 			status: Q((e) => e.status),
 			dragStatus: $((e) => e.dragStatus),
 			replaceTransitionStatus: $((e) => e.replaceTransitionStatus)
 		}),
-		children: /* @__PURE__ */ I(He, {
+		children: /* @__PURE__ */ L(We, {
 			...t,
 			children: e
 		})
@@ -642,9 +654,9 @@ 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();
-	return /* @__PURE__ */ I("div", {
+function Ke({ ref: e, name: t, style: n, children: r, ...i }) {
+	let { isActive: a } = V();
+	return /* @__PURE__ */ L("div", {
 		ref: e,
 		"data-flemo-part-name": t,
 		"data-flemo-status": Q((e) => e.status),
@@ -656,21 +668,21 @@ function We({ ref: e, name: t, style: n, children: r, ...i }) {
 }
 //#endregion
 //#region src/stores/RouterScopeProvider.tsx
-function Ge({ children: e }) {
+function qe({ children: e }) {
 	let [t] = p(() => ({
-		history: te(),
-		navigate: S(),
-		transition: M(),
-		screen: k(),
-		driver: b(),
+		history: S(),
+		navigate: C(),
+		transition: ie(),
+		screen: A(),
+		driver: x(),
 		markSelfInduced: fe,
 		consume: v,
 		life: { alive: !0 }
 	}));
-	return /* @__PURE__ */ I(L.Provider, {
+	return /* @__PURE__ */ L(R.Provider, {
 		value: t,
 		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, Ne as Route, Z as Router, qe as RouterScopeProvider, Ge as Screen, B as ScreenContext, He as ScreenDecorator, ze as ScreenFreeze, We as ScreenMotion, ke as Slot, b as createBrowserHistoryDriver, te as createDecorator, T as createPartTransition, E as createRawDecorator, D as createRawPartTransition, O as createRawTransition, N as createTransition, ge as partTransitionMap, K as useHistoryStore, Fe as useNavigate, Q as useNavigateStore, Re as useParams, Ie as usePathname, V as useScreen, $ as useScreenStore, Le as useStep, z as useStores, Ue as useViewportScrollHeight };

package/dist/screen/__tests__/ScreenMotion.animHoldPair.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.7",
   "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.17.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",