@flemo/react 1.8.2 → 1.10.0

package/dist/RouterIdContext.d.ts

@@ -0,0 +1,2 @@
+declare const RouterIdContext: import('react').Context<string | null>;
+export default RouterIdContext;

package/dist/index.mjs

@@ -1,6 +1,6 @@
 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 te, computeScreenFreezeMode as _, consumeSelfInducedPop as v, createAnimHoldCoordinator as y, createBrowserHistoryDriver as b, createBrowserHistoryDriver as ne, createDecorator as re, createHistoryStore as x, createNavigateStore as S, createNavigationController as C, createPartTransition as w, createRawDecorator as T, createRawPartTransition as E, createRawTransition as D, createRouterScope as ie, createScreenSelector as O, createScreenStore as k, createStepController as A, createSwipeController as ae, createTransition as oe, createTransitionEngine as se, createTransitionStore as ce, decoratorMap as le, eagerlyDecodeImages as ue, ensureImageDecodeOffloader as de, ensureScopeHistorySync as j, enteringInitialStyle as fe, getMatchedPathPattern as pe, holdCompositorWarm as me, isOpaqueColor as he, isServer as ge, markSelfInducedPop as _e, matchesPathname as ve, observeBarHeight as ye, observeViewportScrollHeight as M, partTransitionMap as be, readStepParams as N, registerTransitionDefinitions as xe, releaseScopeHistorySync as P, resolveTransition as Se, seedRouterEntry as F, subscribeStepParamsRestore as I } from "@flemo/core";
-import { jsx as L, jsxs as Ce } from "react/jsx-runtime";
+import { animHoldKey as ee, appendParamsQuery as m, buildRoutePath as te, computeBarRiding as h, computeScreenFreeze as g, computeScreenFreezeMode as _, consumeSelfInducedPop as v, createAnimHoldCoordinator as y, createBrowserHistoryDriver as b, createBrowserHistoryDriver as x, createDecorator as S, createHistoryStore as ne, createNavigateStore as C, createNavigationController as w, createPartTransition as re, createRawDecorator as T, createRawPartTransition as E, createRawTransition as D, createRouterScope as ie, createScreenSelector as O, createScreenStore as k, createStepController as ae, createSwipeController as A, createTransition as j, createTransitionEngine as oe, createTransitionStore as M, decoratorMap as se, detectBlinkEngine as ce, eagerlyDecodeImages as le, ensureGpuPipelinePrewarm as ue, ensureImageDecodeOffloader as de, ensureScopeHistorySync as fe, enteringInitialStyle as pe, getMatchedPathPattern as N, holdCompositorWarm as me, isOpaqueColor as he, isServer as ge, markSelfInducedPop as _e, matchesPathname as ve, observeBarHeight as ye, observeViewportScrollHeight as be, partTransitionMap as P, readStepParams as xe, registerTransitionDefinitions as Se, releaseScopeHistorySync as Ce, resolveTransition as we, seedRouterEntry as F, subscribeStepParamsRestore as I } from "@flemo/core";
+import { jsx as L, jsxs as Te } from "react/jsx-runtime";
 //#region src/stores/StoreContext.ts
 var R = r(null);
 //#endregion
@@ -12,9 +12,9 @@ function z() {
 }
 //#endregion
 //#region src/history/HistoryListener.tsx
-function we() {
+function Ee() {
 	let e = z();
-	return o(() => (j(e), () => P(e)), [e]), null;
+	return o(() => (fe(e), () => Ce(e)), [e]), null;
 }
 //#endregion
 //#region src/screen/ScreenContext.ts
@@ -38,7 +38,7 @@ function V() {
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsContext.ts
-var Te = r({}), Ee = r(() => {});
+var De = r({}), Oe = r(() => {});
 //#endregion
 //#region src/screen/ParamsProvider/ParamsReducer.ts
 function H(e, t) {
@@ -49,7 +49,7 @@ function H(e, t) {
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsProvider.tsx
-function De({ children: e }) {
+function U({ children: e }) {
 	let { isActive: t, params: n } = V(), { driver: r } = z(), [i, a] = d(H, n);
 	return o(() => {
 		if (t) return I(r, (e) => a({
@@ -60,30 +60,33 @@ function De({ children: e }) {
 		t,
 		a,
 		r
-	]), /* @__PURE__ */ L(Ee.Provider, {
+	]), /* @__PURE__ */ L(Oe.Provider, {
 		value: a,
-		children: /* @__PURE__ */ L(Te.Provider, {
+		children: /* @__PURE__ */ L(De.Provider, {
 			value: i,
 			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 U = (e) => e;
-function W(t, n = U) {
+//#region ../../node_modules/.pnpm/zustand@5.0.14_@types+react@19.2.18_react@19.2.8/node_modules/zustand/esm/react.mjs
+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 G(e) {
-	return W(z().history, e);
+function K(e) {
+	return G(z().history, e);
 }
 //#endregion
+//#region src/RouterIdContext.ts
+var ke = r(null);
+//#endregion
 //#region src/renderer/Renderer.tsx
-function K({ children: e }) {
-	let t = G((e) => e.index), r = G((e) => e.histories), i = z(), o = a(B);
+function q({ children: e }) {
+	let t = K((e) => e.index), r = K((e) => e.histories), i = z(), o = a(B), s = a(ke);
 	return O(r, t).map((t) => {
 		let [r] = n.toArray(e).filter((e) => ve(e.props.path, t.pathname));
 		return r ? /* @__PURE__ */ L(B.Provider, {
@@ -91,22 +94,23 @@ function K({ children: e }) {
 				...t,
 				isPrev: t.isPrev || o.isPrev,
 				navigateStore: i.navigate,
-				routePath: pe(r.props.path, t.pathname)
+				routerId: s ?? void 0,
+				routePath: N(r.props.path, t.pathname)
 			},
-			children: /* @__PURE__ */ L(De, { children: r })
+			children: /* @__PURE__ */ L(U, { children: r })
 		}, t.id) : null;
 	});
 }
 //#endregion
 //#region src/screen/ScreenViewportContext.ts
-var q = r({ contained: !1 });
-function Oe() {
-	return a(q);
+var J = r({ contained: !1 });
+function Ae() {
+	return a(J);
 }
 //#endregion
 //#region src/transition/styles.ts
-function J(e, t, n = []) {
-	l(() => xe(e, t, n), [
+function je(e, t, n = []) {
+	l(() => Se(e, t, n), [
 		e,
 		t,
 		n
@@ -114,8 +118,8 @@ function J(e, t, n = []) {
 }
 //#endregion
 //#region src/RouterDepthContext.ts
-var ke = r(0), Ae = { contained: !0 };
-function je({ children: e, className: t, style: n }) {
+var Y = r(0), Me = { contained: !0 };
+function Ne({ children: e, className: t, style: n }) {
 	return /* @__PURE__ */ L("div", {
 		className: t,
 		style: {
@@ -123,55 +127,58 @@ function je({ children: e, className: t, style: n }) {
 			overflow: "hidden",
 			...n
 		},
-		children: /* @__PURE__ */ L(q.Provider, {
-			value: Ae,
-			children: /* @__PURE__ */ L(K, { children: e })
+		children: /* @__PURE__ */ L(J.Provider, {
+			value: Me,
+			children: /* @__PURE__ */ L(q, { children: e })
 		})
 	});
 }
 //#endregion
 //#region src/Router.tsx
-function Me(e) {
+function Pe(e) {
 	let t = null;
 	return n.forEach(e, (e) => {
 		if (t || !i(e)) return;
-		if (e.type === je) {
+		if (e.type === Ne) {
 			t = n.toArray(e.props.children).filter(i);
 			return;
 		}
 		let r = e.props.children;
 		if (r) {
-			let e = Me(r);
+			let e = Pe(r);
 			e && (t = e);
 		}
 	}), t;
 }
-var Ne = typeof window > "u" ? o : u, Pe = [], Y = [], Fe = [], Ie = { contained: !0 }, Le = 500, Re = 3e3;
-function ze({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = Pe, decorators: c = Y, partTransitions: l = Fe, history: u = "browser", createDriver: d, className: f, style: ee }) {
-	let m = a(ke), h = m > 0, g = u === "memory", te = s(), _ = a(B), v = a(R), y = h && _.id ? `_F_${v?.routerKey ?? ""}${_.id}_` : te, b = Me(e), re = b !== null, x = h ? null : v, S = x !== null, C = d ?? ne, [w] = p(() => g ? null : C(S ? void 0 : y)), T = !h && !g && !ge(), E = T && w ? w.readPathname() : t || "/", D = E.indexOf("?"), O = (D >= 0 ? E.slice(0, D) : E) || "/", k = T ? window.location.search : D >= 0 ? E.slice(D) : "", [A] = p(() => ie({
-		routePaths: (b ?? n.toArray(e)).map((e) => e.props.path).flat(),
-		pathname: O,
-		search: k,
-		defaultTransitionName: r,
-		memory: g,
-		browserDriver: w,
-		hostedScope: x,
-		routerKey: S ? void 0 : y,
-		zoneEntryId: h && !S && _.id || void 0,
-		persistKey: h && !g && !S ? y : void 0
-	}));
-	A.transition.setState({ defaultTransitionName: r }), Ne(() => (A.life.alive = !0, () => {
+var Fe = typeof window > "u" ? o : u, Ie = [], Le = [], X = [], Re = { contained: !0 }, ze = 500, Be = 3e3;
+function Ve({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = Ie, decorators: c = Le, partTransitions: l = X, history: u = "browser", createDriver: d, className: f, style: ee }) {
+	let m = a(Y), te = s(), h = m > 0, g = u === "memory", _ = s(), v = a(B), y = a(R), b = h && v.id ? `_F_${y?.routerKey ?? ""}${v.id}_` : _, S = Pe(e), ne = S !== null, C = h ? null : y, w = C !== null, re = d ?? x, [T] = p(() => g ? null : re(w ? void 0 : b)), E = !h && !g && !ge(), D = E && T ? T.readPathname() : t || "/", O = D.indexOf("?"), k = (O >= 0 ? D.slice(0, O) : D) || "/", ae = E ? window.location.search : O >= 0 ? D.slice(O) : "", [A] = p(() => {
+		let t = (S ?? n.toArray(e)).map((e) => e.props.path).flat();
+		return ie({
+			routePaths: t,
+			pathname: k,
+			search: ae,
+			defaultTransitionName: r,
+			memory: g,
+			browserDriver: T,
+			hostedScope: C,
+			routerKey: w ? void 0 : b,
+			zoneEntryId: h && !w && v.id || void 0,
+			persistKey: h && !g && !w ? b : void 0
+		});
+	});
+	A.transition.setState({ defaultTransitionName: r }), Fe(() => (A.life.alive = !0, () => {
 		A.life.alive = !1;
-	}), [A]), J(i, c, l), o(() => de(), []), o(() => {
+	}), [A]), je(i, c, l), o(() => de(), []), o(() => ue(), []), o(() => {
 		if (typeof document > "u") return;
 		let e = null, t = null, n = 0, r = () => {
 			let r = Date.now();
-			if (r - n < Le) return;
+			if (r - n < ze) return;
 			n = r, t && clearTimeout(t);
 			let i = e;
 			e = me(), i?.(), t = setTimeout(() => {
 				t = null, e?.(), e = null;
-			}, Re);
+			}, Be);
 		}, i = [
 			"pointerdown",
 			"pointermove",
@@ -185,32 +192,35 @@ function ze({ children: e, initPath: t = "/", defaultTransitionName: r = "cupert
 			t && clearTimeout(t), e?.();
 		};
 	}, []), o(() => {
-		g || !w || F({
-			driver: w,
-			routerKey: S ? null : y,
-			nested: h && !S,
-			seedPathname: O,
+		g || !T || F({
+			driver: T,
+			routerKey: w ? null : b,
+			nested: h && !w,
+			seedPathname: k,
 			defaultTransitionName: r,
 			rootParams: A.history.getState().histories[0]?.params ?? {}
 		});
 	}, [
 		g,
-		S,
+		w,
 		h,
-		y,
-		O,
+		b,
+		k,
 		r,
 		A.history,
-		w
+		T
 	]);
-	let ae = re ? e : /* @__PURE__ */ L(K, { children: e }), oe = /* @__PURE__ */ L(ke.Provider, {
-		value: m + 1,
-		children: /* @__PURE__ */ Ce(R.Provider, {
-			value: A,
-			children: [!g && /* @__PURE__ */ L(we, {}), h ? /* @__PURE__ */ L(q.Provider, {
-				value: Ie,
-				children: ae
-			}) : ae]
+	let j = ne ? e : /* @__PURE__ */ L(q, { children: e }), oe = /* @__PURE__ */ L(ke.Provider, {
+		value: te,
+		children: /* @__PURE__ */ L(Y.Provider, {
+			value: m + 1,
+			children: /* @__PURE__ */ Te(R.Provider, {
+				value: A,
+				children: [!g && /* @__PURE__ */ L(Ee, {}), h ? /* @__PURE__ */ L(J.Provider, {
+					value: Re,
+					children: j
+				}) : j]
+			})
 		})
 	});
 	return h ? /* @__PURE__ */ L("div", {
@@ -225,18 +235,18 @@ function ze({ children: e, initPath: t = "/", defaultTransitionName: r = "cupert
 }
 //#endregion
 //#region src/Route.tsx
-function X({ element: e }) {
+function He({ element: e }) {
 	return e;
 }
 //#endregion
 //#region src/utils/buildRoutePath.ts
 function Z(e, t) {
-	return h(e, t);
+	return te(e, t);
 }
 //#endregion
 //#region src/navigate/useNavigate.ts
-function Be() {
-	let e = z(), t = C({
+function Q() {
+	let e = z(), t = w({
 		stores: e,
 		buildPathname: (e, t) => Z(e, t),
 		driver: e.driver,
@@ -250,17 +260,17 @@ function Be() {
 }
 //#endregion
 //#region src/navigate/usePathname.ts
-function Ve() {
-	return G((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
+function Ue() {
+	return K((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
 }
 //#endregion
 //#region src/navigate/useStep.ts
-function He() {
-	let { routePath: e } = V(), t = z(), n = a(Ee), { driver: r, markSelfInduced: i } = t, [s, c] = p(null);
+function We() {
+	let { routePath: e } = V(), t = z(), n = a(Oe), { driver: r, markSelfInduced: i } = t, [s, c] = p(null);
 	o(() => {
-		if (!e) return c(N(r.readState())), r.subscribe((e) => c(N(e.state)));
+		if (!e) return c(xe(r.readState())), r.subscribe((e) => c(xe(e.state)));
 	}, [e, r]);
-	let l = A({
+	let l = ae({
 		stores: t,
 		driver: r,
 		markSelfInduced: i,
@@ -281,12 +291,12 @@ function He() {
 }
 //#endregion
 //#region src/screen/ParamsProvider/useParams.ts
-function Ue() {
-	return a(Te);
+function Ge() {
+	return a(De);
 }
 //#endregion
 //#region src/screen/ScreenFreeze.tsx
-function We({ freeze: e, children: n }) {
+function Ke({ freeze: e, children: n }) {
 	return /* @__PURE__ */ L(t, {
 		mode: e ? "hidden" : "visible",
 		children: n
@@ -294,22 +304,22 @@ function We({ freeze: e, children: n }) {
 }
 //#endregion
 //#region src/screen/scopeAnimHoldCoordinator.ts
-var Ge = /* @__PURE__ */ new WeakMap();
-function Ke(e) {
-	let t = Ge.get(e);
-	return t || (t = y(), Ge.set(e, t)), t;
+var qe = /* @__PURE__ */ new WeakMap();
+function Je(e) {
+	let t = qe.get(e);
+	return t || (t = y(), qe.set(e, t)), t;
 }
 //#endregion
 //#region src/stores/useNavigateStore.ts
-function Q(e) {
-	return W(z().navigate, e);
+function Ye(e) {
+	return G(z().navigate, e);
 }
 //#endregion
 //#region src/screen/ScreenDecorator.tsx
-function qe({ ref: e, style: t, ...n }) {
+function Xe({ ref: e, style: t, ...n }) {
 	let { isActive: r, isPrev: i, transitionName: a } = V(), o = f(null);
 	c(e, () => o.current);
-	let s = Q((e) => i ? "COMPLETED" : e.status), { decoratorName: l } = Se(a), u = le.get(l);
+	let s = Ye((e) => i ? "COMPLETED" : e.status), { decoratorName: l } = we(a), u = se.get(l);
 	return u ? /* @__PURE__ */ L("div", {
 		ref: o,
 		"data-flemo-decorator": !0,
@@ -331,9 +341,9 @@ function qe({ ref: e, style: t, ...n }) {
 }
 //#endregion
 //#region src/screen/useViewportScrollHeight.ts
-function Je() {
+function Ze() {
 	let [e, t] = p(0), [n, r] = p(0);
-	return o(() => M((e, n) => {
+	return o(() => be((e, n) => {
 		r(n), t(e);
 	}), []), {
 		viewportScrollHeight: e,
@@ -343,200 +353,205 @@ function Je() {
 //#endregion
 //#region src/stores/useScreenStore.ts
 function $(e) {
-	return W(z().screen, e);
+	return G(z().screen, e);
 }
 //#endregion
 //#region src/screen/ScreenMotion.tsx
-function Ye({ 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: ne, isPrev: re, zIndex: x, transitionName: S, prevTransitionName: C } = V(), { contained: w } = Oe(), T = w ? "absolute" : "fixed", E = z(), D = G((e) => e.index), ie = G((e) => e.histories), O = b || x === D - 1, k = Q((e) => O ? e.status : "COMPLETED"), A = $((e) => e.dragStatus), oe = $((e) => e.replaceTransitionStatus), ce = E.screen.getState().setDragStatus, de = E.screen.getState().setReplaceTransitionStatus, j = b ? ie[D - 1]?.id : ie[D]?.id, pe = $((e) => j ? e.sharedBars[j] : void 0), me = $((e) => j ? e.screenSurfaces[j] : void 0), ge = f(null);
-	ge.current ||= se({
-		getTransitionTaskId: () => E.navigate.getState().transitionTaskId,
-		setDragStatus: ce,
-		setReplaceTransitionStatus: de
+function Qe({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: i, sharedTopBar: s, sharedBottomBar: c, topBar: l, bottomBar: d, hideStatusBar: m, hideSystemNavigationBar: te, backgroundColor: _ = "white", contentScrollable: v = !0, ...y }) {
+	let { id: b, isActive: x, isRoot: S, isPrev: ne, zIndex: C, transitionName: w, prevTransitionName: re } = V(), { contained: T } = Ae(), E = T ? "absolute" : "fixed", D = z(), ie = a(ke), O = K((e) => e.index), k = K((e) => e.histories), ae = x || C === O - 1, j = Ye((e) => ae ? e.status : "COMPLETED"), M = $((e) => e.dragStatus), ue = $((e) => e.replaceTransitionStatus), de = D.screen.getState().setDragStatus, fe = D.screen.getState().setReplaceTransitionStatus, N = x ? k[O - 1]?.id : k[O]?.id, me = $((e) => N ? e.sharedBars[N] : void 0), ge = $((e) => N ? e.screenSurfaces[N] : void 0), _e = f(null);
+	_e.current ||= oe({
+		getTransitionTaskId: () => D.navigate.getState().transitionTaskId,
+		setDragStatus: de,
+		setReplaceTransitionStatus: fe
 	});
-	let _e = ge.current, ve = f(null);
-	ve.current ||= Ke(E.navigate);
-	let M = Se(S), { initial: be, swipeDirection: N, decoratorName: xe } = M, P = le.get(xe), { viewportScrollHeight: F } = Je(), I = F > 0, [R, we] = p(0), [B, Te] = p(0), Ee = f(null), H = f(null), De = f(null), U = f(null), W = f(null), K = f({
-		transition: M,
-		decorator: P,
-		hasSharedTopBar: !!a,
-		hasSharedBottomBar: !!s,
-		viewportScrollHeight: F,
-		isRoot: ne,
-		isActive: b,
-		status: k,
-		dragStatus: A,
-		index: D
+	let ve = _e.current, be = f(null);
+	be.current ||= Je(D.navigate);
+	let P = we(w), { initial: xe, swipeDirection: Se, decoratorName: Ce } = P, F = se.get(Ce), { viewportScrollHeight: I } = Ze(), R = I > 0, [Ee, B] = p(0), [De, Oe] = p(0), H = f(null), U = f(null), W = f(null), G = f(null), q = f(null), J = f({
+		transition: P,
+		decorator: F,
+		hasSharedTopBar: !!s,
+		hasSharedBottomBar: !!c,
+		viewportScrollHeight: I,
+		isRoot: S,
+		isActive: x,
+		status: j,
+		dragStatus: M,
+		index: O
 	});
-	K.current = {
-		transition: M,
-		decorator: P,
-		hasSharedTopBar: !!a,
-		hasSharedBottomBar: !!s,
-		viewportScrollHeight: F,
-		isRoot: ne,
-		isActive: b,
-		status: k,
-		dragStatus: A,
-		index: D
+	J.current = {
+		transition: P,
+		decorator: F,
+		hasSharedTopBar: !!s,
+		hasSharedBottomBar: !!c,
+		viewportScrollHeight: I,
+		isRoot: S,
+		isActive: x,
+		status: j,
+		dragStatus: M,
+		index: O
 	};
-	let q = f(null);
-	q.current ||= ae({
-		getTransition: () => K.current.transition,
-		getDecorator: () => K.current.decorator,
+	let je = f(null);
+	je.current ||= A({
+		getTransition: () => J.current.transition,
+		getDecorator: () => J.current.decorator,
 		getElements: () => ({
-			scope: H.current,
-			screenContainer: Ee.current,
-			decorator: De.current,
-			sharedTopBar: U.current,
-			sharedBottomBar: W.current
+			scope: U.current,
+			screenContainer: H.current,
+			decorator: W.current,
+			sharedTopBar: G.current,
+			sharedBottomBar: q.current
 		}),
-		hasSharedTopBar: () => K.current.hasSharedTopBar,
-		hasSharedBottomBar: () => K.current.hasSharedBottomBar,
-		getViewportScrollHeight: () => K.current.viewportScrollHeight,
+		hasSharedTopBar: () => J.current.hasSharedTopBar,
+		hasSharedBottomBar: () => J.current.hasSharedBottomBar,
+		getViewportScrollHeight: () => J.current.viewportScrollHeight,
 		isReadyForDrag: () => {
-			let e = K.current;
+			let e = J.current;
 			return !e.isRoot && e.isActive && e.status === "COMPLETED" && e.dragStatus === "IDLE" && !!e.transition.swipeDirection && e.viewportScrollHeight < 10;
 		},
 		getPartnerBars: () => {
-			let e = K.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;
+			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;
 		},
-		setDragStatus: ce,
+		setDragStatus: de,
 		back: () => window.history.back()
 	});
-	let J = q.current, ke = (e) => J.pointerDown(e.nativeEvent), Ae = (e) => J.pointerMove(e.nativeEvent), je = (e) => J.pointerUp(e.nativeEvent);
+	let Y = je.current, Me = (e) => Y.pointerDown(e.nativeEvent), Ne = (e) => Y.pointerMove(e.nativeEvent), Pe = (e) => Y.pointerUp(e.nativeEvent);
 	o(() => {
-		ue(H.current);
+		le(U.current);
 	}, []), o(() => {
-		let e = H.current;
+		let e = U.current;
 		if (!e) return;
 		let t = (e) => {
-			J.shouldPreventTouch() && e.preventDefault(), e.target?.dataset.swipeAtEdgeBar === "true" && e.preventDefault();
+			Y.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 = U.current;
+	}, [Y]), u(() => {
+		let e = G.current;
 		if (!e) {
-			we(0);
+			B(0);
 			return;
 		}
-		return ye(e, we);
-	}, [a]), u(() => {
-		let e = W.current;
+		return ye(e, B);
+	}, [s]), u(() => {
+		let e = q.current;
 		if (!e) {
-			Te(0);
+			Oe(0);
 			return;
 		}
-		return ye(e, Te);
-	}, [s]), u(() => {
-		let { registerSharedBars: e, unregisterSharedBars: t } = E.screen.getState();
-		return e(y, {
-			topBar: !!a,
-			bottomBar: !!s
-		}), () => t(y);
+		return ye(e, Oe);
+	}, [c]), u(() => {
+		let { registerSharedBars: e, unregisterSharedBars: t } = D.screen.getState();
+		return e(b, {
+			topBar: !!s,
+			bottomBar: !!c
+		}), () => t(b);
 	}, [
-		y,
-		a,
+		b,
 		s,
-		E.screen
+		c,
+		D.screen
 	]), u(() => {
-		let e = H.current;
+		let e = U.current;
 		if (!e) return;
-		let { registerScreenSurface: t, unregisterScreenSurface: n } = E.screen.getState();
-		return t(y, { opaqueBackground: he(getComputedStyle(e).backgroundColor) }), () => n(y);
+		let { registerScreenSurface: t, unregisterScreenSurface: n } = D.screen.getState();
+		return t(b, { opaqueBackground: he(getComputedStyle(e).backgroundColor) }), () => n(b);
 	}, [
-		y,
-		h,
-		k,
-		E.screen
+		b,
+		_,
+		j,
+		D.screen
 	]);
-	let Me = O, { app: Ne, nav: Pe } = g({
-		status: k,
-		isTopOrTopPrev: Me,
-		hasTopBar: !!a,
-		hasNavBar: !!s,
-		partnerBars: pe
-	}), Y = ee({
-		status: k,
-		isTopOrTopPrev: Me,
-		transitionName: S
-	}), Fe = te({
-		isActive: b,
-		isPrev: re,
-		zIndex: x,
-		index: D,
-		status: k,
-		dragStatus: A,
-		replaceTransitionStatus: oe
-	}), Ie = f(Fe), Le = f(Y !== null && Fe), [Re, ze] = p({
-		key: Y,
-		released: Y === null
+	let Fe = ae, { app: Ie, nav: Le } = h({
+		status: j,
+		isTopOrTopPrev: Fe,
+		hasTopBar: !!s,
+		hasNavBar: !!c,
+		partnerBars: me
+	}), X = ee({
+		status: j,
+		isTopOrTopPrev: Fe,
+		transitionName: w
+	}), Re = g({
+		isActive: x,
+		isPrev: ne,
+		zIndex: C,
+		index: O,
+		status: j,
+		dragStatus: M,
+		replaceTransitionStatus: ue
+	}), ze = f(Re), Be = f(X !== null && Re), [Ve, He] = p({
+		key: X,
+		released: X === null
 	});
-	Re.key !== Y && (ze({
-		key: Y,
-		released: Y === null
-	}), Le.current = Y !== null && Ie.current), Ie.current = Fe;
-	let X = Y !== null && Re.key === Y && !Re.released, Z = X ? !b && me?.opaqueBackground ? "park" : b && (k === "PUSHING" || k === "REPLACING") && me?.opaqueBackground ? "park-under" : "true" : "false";
-	u(() => _e.driveScreenLifecycle({
+	Ve.key !== X && (He({
+		key: X,
+		released: X === null
+	}), Be.current = X !== null && ze.current), ze.current = Re;
+	let Z = X !== null && Ve.key === X && !Ve.released, Q = Z ? !x && ge?.opaqueBackground ? "park" : x && (j === "PUSHING" || j === "REPLACING") && ge?.opaqueBackground ? "park-under" : "true" : "false";
+	u(() => ve.driveScreenLifecycle({
 		getElements: () => ({
-			scope: H.current,
-			decorator: De.current,
-			bars: [U.current, W.current]
+			scope: U.current,
+			decorator: W.current,
+			bars: [G.current, q.current]
 		}),
-		transitionName: S,
-		prevTransitionName: C,
-		status: k,
-		isActive: b,
-		animHoldReleased: !X
+		transitionName: w,
+		prevTransitionName: re,
+		status: j,
+		isActive: x,
+		animHoldReleased: !Z
 	}), [
-		_e,
-		k,
-		b,
-		C,
-		S,
-		X
+		ve,
+		j,
+		x,
+		re,
+		w,
+		Z
 	]), o(() => {
-		if (!X || Y === null) return;
-		let e = Y, t = E.navigate.getState().transitionTaskId, n = t === null ? e : `${e}#${t}`;
-		return ve.current.join(n, () => ze((t) => t.key === e && !t.released ? {
-			key: e,
-			released: !0
-		} : t), {
-			scope: H.current,
-			decodeWait: Le.current,
-			contentSettle: b && k === "PUSHING" ? {
-				graceMs: 150,
-				firstWaitMs: 400,
-				capMs: 900,
-				minNodes: 30
-			} : void 0
+		if (!Z || X === null) return;
+		let e = X, t = D.navigate.getState().transitionTaskId, n = t === null ? e : `${e}#${t}`;
+		return be.current.join(n, () => {
+			if (J.current.transition.driver === "native" && !ce()) {
+				for (let e of [
+					U.current,
+					G.current,
+					q.current,
+					W.current
+				]) e?.isConnected && e.getAttribute("data-flemo-anim-hold") !== null && e.setAttribute("data-flemo-anim-hold", "false");
+				H.current && (H.current.style.zIndex = "");
+			}
+			He((t) => t.key === e && !t.released ? {
+				key: e,
+				released: !0
+			} : t);
+		}, {
+			scope: U.current,
+			decodeWait: Be.current
 		});
 	}, [
-		X,
-		Y,
 		Z,
-		b,
-		k,
-		E.navigate
+		X,
+		Q,
+		x,
+		j,
+		D.navigate
 	]);
-	let Be = Z === "park-under" ? {} : fe({
-		initial: be,
-		isActive: b,
-		status: k
+	let Ue = Q === "park-under" ? {} : pe({
+		initial: xe,
+		isActive: x,
+		status: j
 	});
-	return /* @__PURE__ */ Ce("div", {
-		ref: Ee,
+	return /* @__PURE__ */ Te("div", {
+		ref: H,
 		style: {
-			position: T,
+			position: E,
 			top: 0,
 			left: 0,
 			width: "100%",
 			height: "100%",
 			display: "flex",
-			zIndex: Z === "park-under" ? -1 : void 0,
+			zIndex: Q === "park-under" ? -1 : void 0,
 			contain: "layout style",
 			flexDirection: "column",
 			boxSizing: "border-box",
@@ -546,7 +561,7 @@ function Ye({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 			/* @__PURE__ */ L("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
-					position: T,
+					position: E,
 					top: 0,
 					left: 0,
 					width: 8,
@@ -554,66 +569,67 @@ function Ye({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					zIndex: 1
 				}
 			}),
-			/* @__PURE__ */ Ce("div", {
-				ref: H,
-				...v,
-				onPointerDown: ke,
-				onPointerMove: Ae,
-				onPointerUp: je,
-				onPointerCancel: je,
+			/* @__PURE__ */ Te("div", {
+				ref: U,
+				...y,
+				onPointerDown: Me,
+				onPointerMove: Ne,
+				onPointerUp: Pe,
+				onPointerCancel: Pe,
 				"data-flemo-screen": !0,
-				"data-flemo-transition": S,
-				"data-flemo-status": k,
-				"data-flemo-active": b ? "true" : "false",
-				"data-flemo-anim-hold": Z,
+				"data-flemo-router": ie ?? void 0,
+				"data-flemo-transition": w,
+				"data-flemo-status": j,
+				"data-flemo-active": x ? "true" : "false",
+				"data-flemo-anim-hold": Q,
 				style: {
 					display: "flex",
 					flexDirection: "column",
 					height: "100%",
-					backgroundColor: h,
-					overflowY: _ ? void 0 : "auto",
-					touchAction: N === "x" ? "pan-y" : N === "y" ? "pan-x" : "auto",
-					...Be,
-					...v.style
+					backgroundColor: _,
+					overflowY: v ? void 0 : "auto",
+					touchAction: Se === "x" ? "pan-y" : Se === "y" ? "pan-x" : "auto",
+					...Ue,
+					...y.style
 				},
 				children: [
-					!d && t && /* @__PURE__ */ L("div", {
+					!m && t && /* @__PURE__ */ L("div", {
 						style: { minHeight: t },
 						children: /* @__PURE__ */ L("div", { style: {
-							position: T,
+							position: E,
 							top: 0,
 							width: "100%",
 							minHeight: t,
 							backgroundColor: n
 						} })
 					}),
-					a && /* @__PURE__ */ L("div", { style: {
+					s && /* @__PURE__ */ L("div", { style: {
 						width: "100%",
-						minHeight: R
+						minHeight: Ee
 					} }),
-					c,
+					l,
 					/* @__PURE__ */ L("div", {
 						style: {
 							display: "flex",
 							flexDirection: "column",
 							flexGrow: 1,
-							overflowY: _ ? "auto" : void 0
+							overflowY: v ? "auto" : void 0
 						},
 						children: e
 					}),
-					l,
-					s && /* @__PURE__ */ L("div", { style: {
-						display: I ? "none" : void 0,
+					d,
+					c && /* @__PURE__ */ L("div", { style: {
+						display: R ? "none" : void 0,
 						width: "100%",
-						minHeight: B
+						minHeight: De
 					} }),
-					!m && r && /* @__PURE__ */ L("div", {
+					!te && r && /* @__PURE__ */ L("div", {
 						style: {
-							display: I ? "none" : void 0,
+							display: R ? "none" : void 0,
 							minHeight: r
 						},
 						children: /* @__PURE__ */ L("div", { style: {
-							position: T,
+							position: E,
 							bottom: 0,
 							width: "100%",
 							minHeight: r,
@@ -622,49 +638,51 @@ function Ye({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					})
 				]
 			}),
-			a && /* @__PURE__ */ L("div", {
-				ref: U,
+			s && /* @__PURE__ */ L("div", {
+				ref: G,
 				"data-flemo-bar": "app",
-				"data-flemo-bar-transition": S,
-				"data-flemo-bar-status": k,
-				"data-flemo-bar-active": b ? "true" : "false",
-				"data-flemo-bar-riding": Ne ? "true" : "false",
-				"data-flemo-anim-hold": Z,
+				"data-flemo-router": ie ?? void 0,
+				"data-flemo-bar-transition": w,
+				"data-flemo-bar-status": j,
+				"data-flemo-bar-active": x ? "true" : "false",
+				"data-flemo-bar-riding": Ie ? "true" : "false",
+				"data-flemo-anim-hold": Q,
 				style: {
-					position: T,
-					top: d ? 0 : t,
+					position: E,
+					top: m ? 0 : t,
 					left: 0,
 					width: "100%",
 					zIndex: 1
 				},
-				children: a
+				children: s
 			}),
-			s && /* @__PURE__ */ L("div", {
-				ref: W,
+			c && /* @__PURE__ */ L("div", {
+				ref: q,
 				"data-flemo-bar": "nav",
-				"data-flemo-bar-transition": S,
-				"data-flemo-bar-status": k,
-				"data-flemo-bar-active": b ? "true" : "false",
-				"data-flemo-bar-riding": Pe ? "true" : "false",
-				"data-flemo-anim-hold": Z,
+				"data-flemo-router": ie ?? void 0,
+				"data-flemo-bar-transition": w,
+				"data-flemo-bar-status": j,
+				"data-flemo-bar-active": x ? "true" : "false",
+				"data-flemo-bar-riding": Le ? "true" : "false",
+				"data-flemo-anim-hold": Q,
 				style: {
-					display: I ? "none" : void 0,
-					position: T,
-					bottom: m ? 0 : r,
+					display: R ? "none" : void 0,
+					position: E,
+					bottom: te ? 0 : r,
 					left: 0,
 					width: "100%",
 					zIndex: 1
 				},
-				children: s
+				children: c
 			}),
-			P && /* @__PURE__ */ L(qe, {
-				ref: De,
-				"data-flemo-anim-hold": Z
+			F && /* @__PURE__ */ L(Xe, {
+				ref: W,
+				"data-flemo-anim-hold": Q
 			}),
 			/* @__PURE__ */ L("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
-					position: T,
+					position: E,
 					top: 0,
 					right: 0,
 					width: 8,
@@ -677,38 +695,39 @@ function Ye({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 }
 //#endregion
 //#region src/screen/Screen.tsx
-function Xe({ children: e, ...t }) {
-	let { isActive: n, isPrev: r, zIndex: i } = V(), a = _({
+function $e({ children: e, ...t }) {
+	let { isActive: n, isPrev: r, zIndex: i } = V(), a = K((e) => e.index), s = Ye((e) => e.status), c = $((e) => e.dragStatus), l = $((e) => e.replaceTransitionStatus), u = _({
 		isActive: n,
 		isPrev: r,
 		zIndex: i,
-		index: G((e) => e.index),
-		status: Q((e) => e.status),
-		dragStatus: $((e) => e.dragStatus),
-		replaceTransitionStatus: $((e) => e.replaceTransitionStatus)
-	}), [s, c] = p(a !== "live");
-	return a === "live" && s && c(!1), a === "immediate" && !s && c(!0), o(() => {
-		if (a !== "deferred" || s) return;
-		let e = setTimeout(() => c(!0), Ze);
+		index: a,
+		status: s,
+		dragStatus: c,
+		replaceTransitionStatus: l
+	}), [d, f] = p(u !== "live");
+	return u === "live" && d && f(!1), u === "immediate" && !d && f(!0), o(() => {
+		if (u !== "deferred" || d) return;
+		let e = setTimeout(() => f(!0), et);
 		return () => clearTimeout(e);
-	}, [a, s]), /* @__PURE__ */ L(We, {
-		freeze: s,
-		children: /* @__PURE__ */ L(Ye, {
+	}, [u, d]), /* @__PURE__ */ L(Ke, {
+		freeze: d,
+		children: /* @__PURE__ */ L(Qe, {
 			...t,
 			children: e
 		})
 	});
 }
-var Ze = 600;
+var et = 600;
 //#endregion
 //#region src/screen/Part.tsx
-function Qe({ ref: e, name: t, style: n, children: r, ...i }) {
-	let { isActive: a, isPrev: o, navigateStore: s } = V(), c = z();
+function tt({ ref: e, name: t, style: n, children: r, ...i }) {
+	let { isActive: o, isPrev: s, navigateStore: c, routerId: l } = V(), u = a(ke), d = l ?? u ?? void 0, f = z(), p = G(c ?? f.navigate, (e) => s ? "COMPLETED" : e.status);
 	return /* @__PURE__ */ L("div", {
 		ref: e,
 		"data-flemo-part-name": t,
-		"data-flemo-status": W(s ?? c.navigate, (e) => o ? "COMPLETED" : e.status),
-		"data-flemo-active": a ? "true" : "false",
+		"data-flemo-router": d,
+		"data-flemo-status": p,
+		"data-flemo-active": o ? "true" : "false",
 		style: n,
 		...i,
 		children: r
@@ -716,13 +735,13 @@ function Qe({ ref: e, name: t, style: n, children: r, ...i }) {
 }
 //#endregion
 //#region src/stores/RouterScopeProvider.tsx
-function $e({ children: e }) {
+function nt({ children: e }) {
 	let [t] = p(() => ({
-		history: x(),
-		navigate: S(),
-		transition: ce(),
+		history: ne(),
+		navigate: C(),
+		transition: M(),
 		screen: k(),
-		driver: ne(),
+		driver: x(),
 		markSelfInduced: _e,
 		consume: v,
 		life: { alive: !0 }
@@ -733,4 +752,4 @@ function $e({ children: e }) {
 	});
 }
 //#endregion
-export { Qe as Part, X as Route, ze as Router, $e as RouterScopeProvider, Xe as Screen, B as ScreenContext, qe as ScreenDecorator, We as ScreenFreeze, Ye as ScreenMotion, je as Slot, b as createBrowserHistoryDriver, re as createDecorator, w as createPartTransition, T as createRawDecorator, E as createRawPartTransition, D as createRawTransition, oe as createTransition, be as partTransitionMap, G as useHistoryStore, Be as useNavigate, Q as useNavigateStore, Ue as useParams, Ve as usePathname, V as useScreen, $ as useScreenStore, He as useStep, z as useStores, Je as useViewportScrollHeight };
+export { tt as Part, He as Route, Ve as Router, nt as RouterScopeProvider, $e as Screen, B as ScreenContext, Xe as ScreenDecorator, Ke as ScreenFreeze, Qe as ScreenMotion, Ne as Slot, b as createBrowserHistoryDriver, S as createDecorator, re as createPartTransition, T as createRawDecorator, E as createRawPartTransition, D as createRawTransition, j as createTransition, P as partTransitionMap, K as useHistoryStore, Q as useNavigate, Ye as useNavigateStore, Ge as useParams, Ue as usePathname, V as useScreen, $ as useScreenStore, We as useStep, z as useStores, Ze as useViewportScrollHeight };

package/dist/screen/ScreenContext.d.ts

@@ -9,6 +9,7 @@ export interface ScreenContextProps extends History {
     prevTransitionName: TransitionName;
     routePath: Path;
     navigateStore?: FlemoStores["navigate"];
+    routerId?: string;
 }
 declare const ScreenContext: import('react').Context<ScreenContextProps>;
 export default ScreenContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flemo/react",
-  "version": "1.8.2",
+  "version": "1.10.0",
   "description": "React bindings for flemo: Router, Route, Screen, and the screen-transition runtime.",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
@@ -36,30 +36,30 @@
   "dependencies": {
     "path-to-regexp": "^8.4.2",
     "zustand": "^5.0.14",
-    "@flemo/core": "1.22.0"
+    "@flemo/core": "1.23.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^24.13.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react-swc": "^4.3.2",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react-swc": "^4.3.3",
     "@vitest/coverage-v8": "^4.1.10",
     "eslint": "^9.39.4",
     "jsdom": "^29.1.1",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "typescript": "^6.0.3",
-    "vite": "^8.1.5",
+    "vite": "^8.2.0",
     "vite-plugin-dts": "^5.0.3",
     "vitest": "^4.1.10",
     "@flemo/eslint-config": "0.0.0",
     "@flemo/tsconfig": "0.0.0"
   },
   "peerDependencies": {
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7"
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8"
   },
   "publishConfig": {
     "access": "public"