@flemo/react 1.9.0 → 1.11.0

package/dist/RouterIdContext.d.ts

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

package/dist/index.d.ts

@@ -18,7 +18,7 @@ export { default as useScreenStore } from './stores/useScreenStore';
 export { default as useStores } from './stores/useStores';
 export { default as RouterScopeProvider } from './stores/RouterScopeProvider';
 export { type FlemoStores } from './stores/StoreContext';
-export { type SharedBarPresence } from './screen/store';
+export { type SharedBarId, type SharedBarMetadata, type SharedBarPresence, type SharedBarsMetadata } from './screen/store';
 export { default as useViewportScrollHeight } from './screen/useViewportScrollHeight';
 export { createTransition, createRawTransition, createDecorator, createRawDecorator, createPartTransition, createRawPartTransition, partTransitionMap, createBrowserHistoryDriver } from '@flemo/core';
 export type { TransitionName, RegisterTransition, DecoratorName, RegisterDecorator, PartTransitionName, RegisterPartTransition, PartTransitionOptions, HistoryDriver, HistoryNavEvent } from '@flemo/core';

package/dist/index.mjs

@@ -1,24 +1,25 @@
-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 e, { Activity as t, Children as n, createContext as r, isValidElement as i, useCallback as a, useContext as o, useEffect as s, useId as c, useImperativeHandle as l, useInsertionEffect as u, useLayoutEffect as d, useReducer as f, useRef as p, useState as m } from "react";
+import { animHoldKey as ee, appendParamsQuery as te, buildRoutePath as ne, computeBarRiding as re, computeScreenFreeze as ie, computeScreenFreezeMode as h, consumeSelfInducedPop as g, createAnimHoldCoordinator as ae, createBrowserHistoryDriver as _, createBrowserHistoryDriver as oe, createDecorator as v, createHistoryStore as y, createNavigateStore as b, createNavigationController as se, createPartTransition as x, createRawDecorator as S, createRawPartTransition as ce, createRawTransition as C, createRouterScope as w, createScreenSelector as T, createScreenStore as E, createStepController as D, createSwipeController as le, createTransition as ue, createTransitionEngine as O, createTransitionStore as de, decoratorMap as fe, detectBlinkEngine as pe, eagerlyDecodeImages as me, ensureGpuPipelinePrewarm as k, ensureImageDecodeOffloader as he, ensureScopeHistorySync as ge, enteringInitialStyle as _e, getMatchedPathPattern as ve, governedCompiledActive as ye, holdCompositorWarm as be, isLegacyAndroidBlink as A, isOpaqueColor as xe, isServer as Se, markSelfInducedPop as j, matchesPathname as Ce, observeBarHeight as we, observeViewportScrollHeight as Te, partTransitionMap as Ee, readImageOffloadOverride as De, readPrerasterFlag as Oe, readSettleGateFlag as ke, readStepParams as M, registerTransitionDefinitions as Ae, releaseScopeHistorySync as je, resolveTransition as Me, seedRouterEntry as Ne, sharedBarsMatch as Pe, steadySixtyPlayerEligible as Fe, subscribeStepParamsRestore as Ie } from "@flemo/core";
+import { jsx as N, jsxs as Le } from "react/jsx-runtime";
+import { flushSync as Re } from "react-dom";
 //#region src/stores/StoreContext.ts
-var R = r(null);
+var P = r(null);
 //#endregion
 //#region src/stores/useStores.ts
-function z() {
-	let e = a(R);
+function F() {
+	let e = o(P);
 	if (!e) throw Error("flemo stores are missing. Render inside a <Router>.");
 	return e;
 }
 //#endregion
 //#region src/history/HistoryListener.tsx
-function we() {
-	let e = z();
-	return o(() => (j(e), () => P(e)), [e]), null;
+function ze() {
+	let e = F();
+	return s(() => (ge(e), () => je(e)), [e]), null;
 }
 //#endregion
 //#region src/screen/ScreenContext.ts
-var B = r({
+var I = r({
 	id: "",
 	isActive: !1,
 	isRoot: !0,
@@ -33,15 +34,15 @@ var B = r({
 });
 //#endregion
 //#region src/screen/useScreen.ts
-function V() {
-	return a(B);
+function L() {
+	return o(I);
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsContext.ts
-var Te = r({}), Ee = r(() => {});
+var R = r({}), z = r(() => {});
 //#endregion
 //#region src/screen/ParamsProvider/ParamsReducer.ts
-function H(e, t) {
+function B(e, t) {
 	switch (t.type) {
 		case "SET": return t.params;
 		default: return e;
@@ -49,10 +50,10 @@ function H(e, t) {
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsProvider.tsx
-function De({ 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({
+function Be({ children: e }) {
+	let { isActive: t, params: n } = L(), { driver: r } = F(), [i, a] = f(B, n);
+	return s(() => {
+		if (t) return Ie(r, (e) => a({
 			type: "SET",
 			params: e
 		}));
@@ -60,53 +61,57 @@ function De({ children: e }) {
 		t,
 		a,
 		r
-	]), /* @__PURE__ */ L(Ee.Provider, {
+	]), /* @__PURE__ */ N(z.Provider, {
 		value: a,
-		children: /* @__PURE__ */ L(Te.Provider, {
+		children: /* @__PURE__ */ N(R.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 Ve = (e) => e;
+function V(t, n = Ve) {
 	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 H(e) {
+	return V(F().history, e);
 }
 //#endregion
+//#region src/RouterIdContext.ts
+var He = 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);
-	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, {
+function Ue({ children: e }) {
+	let t = H((e) => e.index), r = H((e) => e.histories), i = F(), a = o(I), s = o(He);
+	return T(r, t).map((t) => {
+		let [r] = n.toArray(e).filter((e) => Ce(e.props.path, t.pathname));
+		return r ? /* @__PURE__ */ N(I.Provider, {
 			value: {
 				...t,
-				isPrev: t.isPrev || o.isPrev,
+				isPrev: t.isPrev || a.isPrev,
 				navigateStore: i.navigate,
-				routePath: pe(r.props.path, t.pathname)
+				routerId: s ?? void 0,
+				routePath: ve(r.props.path, t.pathname)
 			},
-			children: /* @__PURE__ */ L(De, { children: r })
+			children: /* @__PURE__ */ N(Be, { children: r })
 		}, t.id) : null;
 	});
 }
 //#endregion
 //#region src/screen/ScreenViewportContext.ts
-var q = r({ contained: !1 });
-function Oe() {
-	return a(q);
+var U = r({ contained: !1 });
+function We() {
+	return o(U);
 }
 //#endregion
 //#region src/transition/styles.ts
-function J(e, t, n = []) {
-	l(() => xe(e, t, n), [
+function Ge(e, t, n = []) {
+	u(() => Ae(e, t, n), [
 		e,
 		t,
 		n
@@ -114,64 +119,72 @@ 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 }) {
-	return /* @__PURE__ */ L("div", {
+var Ke = r(0), qe = { contained: !0 };
+function Je({ children: e, className: t, style: n }) {
+	return /* @__PURE__ */ N("div", {
 		className: t,
 		style: {
 			position: "relative",
 			overflow: "hidden",
 			...n
 		},
-		children: /* @__PURE__ */ L(q.Provider, {
-			value: Ae,
-			children: /* @__PURE__ */ L(K, { children: e })
+		children: /* @__PURE__ */ N(U.Provider, {
+			value: qe,
+			children: /* @__PURE__ */ N(Ue, { children: e })
 		})
 	});
 }
 //#endregion
 //#region src/Router.tsx
-function Me(e) {
+function Ye(e) {
 	let t = null;
 	return n.forEach(e, (e) => {
 		if (t || !i(e)) return;
-		if (e.type === je) {
+		if (e.type === Je) {
 			t = n.toArray(e.props.children).filter(i);
 			return;
 		}
 		let r = e.props.children;
 		if (r) {
-			let e = Me(r);
+			let e = Ye(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, () => {
-		A.life.alive = !1;
-	}), [A]), J(i, c, l), o(() => de(), []), o(() => {
+var Xe = typeof window > "u" ? s : d, Ze = [], Qe = [], W = [], $e = { contained: !0 }, et = 500, tt = 3e3;
+function G({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = Ze, decorators: a = Qe, partTransitions: l = W, history: u = "browser", createDriver: d, className: f, style: p }) {
+	let ee = o(Ke), te = c(), [ne, re] = m(!1);
+	s(() => re(!0), []);
+	let ie = ne ? te : null, h = ee > 0, g = u === "memory", ae = c(), _ = o(I), v = o(P), y = h && _.id ? `_F_${v?.routerKey ?? ""}${_.id}_` : ae, b = Ye(e), se = b !== null, x = h ? null : v, S = x !== null, ce = d ?? oe, [C] = m(() => g ? null : ce(S ? void 0 : y)), T = !h && !g && !Se(), E = T && C ? C.readPathname() : t || "/", D = E.indexOf("?"), le = (D >= 0 ? E.slice(0, D) : E) || "/", ue = T ? window.location.search : D >= 0 ? E.slice(D) : "", [O] = m(() => {
+		let t = (b ?? n.toArray(e)).map((e) => e.props.path).flat();
+		return w({
+			routePaths: t,
+			pathname: le,
+			search: ue,
+			defaultTransitionName: r,
+			memory: g,
+			browserDriver: C,
+			hostedScope: x,
+			routerKey: S ? void 0 : y,
+			zoneEntryId: h && !S && _.id || void 0,
+			persistKey: h && !g && !S ? y : void 0
+		});
+	});
+	O.transition.setState({ defaultTransitionName: r }), Xe(() => (O.life.alive = !0, () => {
+		O.life.alive = !1;
+	}), [O]), Ge(i, a, l), s(() => {
+		let e = De();
+		if (e !== "off") return e === "on" || A() ? he() : void 0;
+	}, []), s(() => k(), []), s(() => {
 		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 < et) return;
 			n = r, t && clearTimeout(t);
 			let i = e;
-			e = me(), i?.(), t = setTimeout(() => {
+			e = be(), i?.(), t = setTimeout(() => {
 				t = null, e?.(), e = null;
-			}, Re);
+			}, tt);
 		}, i = [
 			"pointerdown",
 			"pointermove",
@@ -184,61 +197,64 @@ function ze({ children: e, initPath: t = "/", defaultTransitionName: r = "cupert
 			for (let e of i) document.removeEventListener(e, r);
 			t && clearTimeout(t), e?.();
 		};
-	}, []), o(() => {
-		g || !w || F({
-			driver: w,
+	}, []), s(() => {
+		g || !C || Ne({
+			driver: C,
 			routerKey: S ? null : y,
 			nested: h && !S,
-			seedPathname: O,
+			seedPathname: le,
 			defaultTransitionName: r,
-			rootParams: A.history.getState().histories[0]?.params ?? {}
+			rootParams: O.history.getState().histories[0]?.params ?? {}
 		});
 	}, [
 		g,
 		S,
 		h,
 		y,
-		O,
+		le,
 		r,
-		A.history,
-		w
+		O.history,
+		C
 	]);
-	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 de = se ? e : /* @__PURE__ */ N(Ue, { children: e }), fe = /* @__PURE__ */ N(He.Provider, {
+		value: ie,
+		children: /* @__PURE__ */ N(Ke.Provider, {
+			value: ee + 1,
+			children: /* @__PURE__ */ Le(P.Provider, {
+				value: O,
+				children: [!g && /* @__PURE__ */ N(ze, {}), h ? /* @__PURE__ */ N(U.Provider, {
+					value: $e,
+					children: de
+				}) : de]
+			})
 		})
 	});
-	return h ? /* @__PURE__ */ L("div", {
+	return h ? /* @__PURE__ */ N("div", {
 		className: f,
 		style: {
 			position: "relative",
 			overflow: "hidden",
-			...ee
+			...p
 		},
-		children: oe
-	}) : oe;
+		children: fe
+	}) : fe;
 }
 //#endregion
 //#region src/Route.tsx
-function X({ element: e }) {
+function K({ element: e }) {
 	return e;
 }
 //#endregion
 //#region src/utils/buildRoutePath.ts
-function Z(e, t) {
-	return h(e, t);
+function q(e, t) {
+	return ne(e, t);
 }
 //#endregion
 //#region src/navigate/useNavigate.ts
-function Be() {
-	let e = z(), t = C({
+function nt() {
+	let e = F(), t = se({
 		stores: e,
-		buildPathname: (e, t) => Z(e, t),
+		buildPathname: (e, t) => q(e, t),
 		driver: e.driver,
 		markSelfInduced: e.markSelfInduced
 	});
@@ -250,21 +266,21 @@ function Be() {
 }
 //#endregion
 //#region src/navigate/usePathname.ts
-function Ve() {
-	return G((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
+function rt() {
+	return H((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);
-	o(() => {
-		if (!e) return c(N(r.readState())), r.subscribe((e) => c(N(e.state)));
+function it() {
+	let { routePath: e } = L(), t = F(), n = o(z), { driver: r, markSelfInduced: i } = t, [a, c] = m(null);
+	s(() => {
+		if (!e) return c(M(r.readState())), r.subscribe((e) => c(M(e.state)));
 	}, [e, r]);
-	let l = A({
+	let l = D({
 		stores: t,
 		driver: r,
 		markSelfInduced: i,
-		buildStepPathname: (t) => e ? Z(e, t).pathname : m(r.readPathname(), t),
+		buildStepPathname: (t) => e ? q(e, t).pathname : te(r.readPathname(), t),
 		applyParams: (t) => {
 			n({
 				type: "SET",
@@ -273,7 +289,7 @@ function He() {
 		}
 	});
 	return {
-		step: s,
+		step: a,
 		pushStep: (e) => l.pushStep(e),
 		replaceStep: (e) => l.replaceStep(e),
 		popStep: l.popStep
@@ -281,36 +297,50 @@ function He() {
 }
 //#endregion
 //#region src/screen/ParamsProvider/useParams.ts
-function Ue() {
-	return a(Te);
+function J() {
+	return o(R);
 }
 //#endregion
 //#region src/screen/ScreenFreeze.tsx
-function We({ freeze: e, children: n }) {
-	return /* @__PURE__ */ L(t, {
-		mode: e ? "hidden" : "visible",
+var at = 3e3;
+function Y({ freeze: e, children: n }) {
+	let [r, i] = m(e), a = p(null);
+	return !e && r && i(!1), s(() => {
+		if (!(!e || r)) {
+			if (!Fe()) {
+				i(!0);
+				return;
+			}
+			return a.current = setTimeout(() => {
+				a.current = null, i(!0);
+			}, at), () => {
+				a.current !== null && (clearTimeout(a.current), a.current = null);
+			};
+		}
+	}, [e, r]), /* @__PURE__ */ N(t, {
+		mode: e && r ? "hidden" : "visible",
 		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 ot = /* @__PURE__ */ new WeakMap();
+function st(e) {
+	let t = ot.get(e);
+	return t || (t = ae(), ot.set(e, t)), t;
 }
 //#endregion
 //#region src/stores/useNavigateStore.ts
-function Q(e) {
-	return W(z().navigate, e);
+function ct(e) {
+	return V(F().navigate, e);
 }
 //#endregion
 //#region src/screen/ScreenDecorator.tsx
-function qe({ 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);
-	return u ? /* @__PURE__ */ L("div", {
+function lt({ ref: e, style: t, ...n }) {
+	let { isActive: r, isPrev: i, transitionName: a } = L(), o = p(null);
+	l(e, () => o.current);
+	let s = ct((e) => i ? "COMPLETED" : e.status), { decoratorName: c } = Me(a), u = fe.get(c);
+	return u ? /* @__PURE__ */ N("div", {
 		ref: o,
 		"data-flemo-decorator": !0,
 		"data-flemo-decorator-name": u.name,
@@ -331,9 +361,9 @@ function qe({ ref: e, style: t, ...n }) {
 }
 //#endregion
 //#region src/screen/useViewportScrollHeight.ts
-function Je() {
-	let [e, t] = p(0), [n, r] = p(0);
-	return o(() => M((e, n) => {
+function ut() {
+	let [e, t] = m(0), [n, r] = m(0);
+	return s(() => Te((e, n) => {
 		r(n), t(e);
 	}), []), {
 		viewportScrollHeight: e,
@@ -342,251 +372,319 @@ function Je() {
 }
 //#endregion
 //#region src/stores/useScreenStore.ts
-function $(e) {
-	return W(z().screen, e);
+function X(e) {
+	return V(F().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 dt({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: i, sharedTopBar: c, sharedTopBarId: l, sharedBottomBar: u, sharedBottomBarId: f, topBar: te, bottomBar: ne, hideStatusBar: h, hideSystemNavigationBar: g, backgroundColor: ae = "white", contentScrollable: _ = !0, ...oe }) {
+	let { id: v, isActive: y, isRoot: b, isPrev: se, zIndex: x, transitionName: S, prevTransitionName: ce } = L(), { contained: C } = We(), w = C ? "absolute" : "fixed", T = F(), E = o(He), D = H((e) => e.index), ue = H((e) => e.histories), de = y || x === D - 1, k = ct((e) => de ? e.status : "COMPLETED"), he = X((e) => e.dragStatus), ge = X((e) => e.replaceTransitionStatus), ve = T.screen.getState().setDragStatus, be = T.screen.getState().setReplaceTransitionStatus, A = y ? ue[D - 1]?.id : ue[D]?.id, Se = X((e) => A ? e.sharedBars[A] : void 0), j = X((e) => A ? e.sharedBarMetadata[A] : void 0), Ce = X((e) => A ? e.screenSurfaces[A] : void 0), Te = p(null);
+	Te.current ||= O({
+		getTransitionTaskId: () => T.navigate.getState().transitionTaskId,
+		setDragStatus: ve,
+		setReplaceTransitionStatus: be
 	});
-	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({
+	let Ee = Te.current, De = p(null);
+	De.current ||= st(T.navigate);
+	let M = Me(S), { initial: Ae, swipeDirection: je, decoratorName: Ne } = M, Ie = fe.get(Ne), { viewportScrollHeight: P } = ut(), ze = P > 0, I = !!c, R = !!u, z = I ? `${typeof l}:${String(l)}` : null, B = R ? `${typeof f}:${String(f)}` : null, [Be, Ve] = m({
+		key: z,
+		height: 0
+	}), [V, Ue] = m({
+		key: B,
+		height: 0
+	}), U = p(Be), Ge = p(V), Ke = Be.key === z ? Be.height : 0, qe = V.key === B ? V.height : 0, Je = Pe(I ? { id: l } : void 0, j?.topBar) ? j?.topBar?.height ?? 0 : 0, Ye = Pe(R ? { id: f } : void 0, j?.bottomBar) ? j?.bottomBar?.height ?? 0 : 0, Xe = Ke || Je, Ze = qe || Ye, Qe = p(null), W = p(null), $e = p(null), et = p(null), tt = p(null), G = p(null), K = p(null), q = a((e) => {
+		e <= 0 || z === null || (et.current && (et.current.style.minHeight = `${e}px`), U.current = {
+			key: z,
+			height: e
+		}, Ve((t) => t.key === z && t.height === e ? t : {
+			key: z,
+			height: e
+		}), T.screen.getState().updateSharedBarHeight(v, "topBar", e));
+	}, [
+		v,
+		T.screen,
+		z
+	]), nt = a((e) => {
+		e <= 0 || B === null || (tt.current && (tt.current.style.minHeight = `${e}px`), Ge.current = {
+			key: B,
+			height: e
+		}, Ue((t) => t.key === B && t.height === e ? t : {
+			key: B,
+			height: e
+		}), T.screen.getState().updateSharedBarHeight(v, "bottomBar", e));
+	}, [
+		B,
+		v,
+		T.screen
+	]), rt = a((e) => {
+		G.current = e, e?.offsetHeight && q(e.offsetHeight);
+	}, [q]), it = a((e) => {
+		K.current = e, e?.offsetHeight && nt(e.offsetHeight);
+	}, [nt]), J = p({
 		transition: M,
-		decorator: P,
-		hasSharedTopBar: !!a,
-		hasSharedBottomBar: !!s,
-		viewportScrollHeight: F,
-		isRoot: ne,
-		isActive: b,
+		decorator: Ie,
+		hasSharedTopBar: !!c,
+		hasSharedBottomBar: !!u,
+		sharedTopBarId: l,
+		sharedBottomBarId: f,
+		viewportScrollHeight: P,
+		isRoot: b,
+		isActive: y,
 		status: k,
-		dragStatus: A,
+		dragStatus: he,
 		index: D
 	});
-	K.current = {
+	J.current = {
 		transition: M,
-		decorator: P,
-		hasSharedTopBar: !!a,
-		hasSharedBottomBar: !!s,
-		viewportScrollHeight: F,
-		isRoot: ne,
-		isActive: b,
+		decorator: Ie,
+		hasSharedTopBar: !!c,
+		hasSharedBottomBar: !!u,
+		sharedTopBarId: l,
+		sharedBottomBarId: f,
+		viewportScrollHeight: P,
+		isRoot: b,
+		isActive: y,
 		status: k,
-		dragStatus: A,
+		dragStatus: he,
 		index: D
 	};
-	let q = f(null);
-	q.current ||= ae({
-		getTransition: () => K.current.transition,
-		getDecorator: () => K.current.decorator,
+	let at = p(null);
+	at.current ||= le({
+		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: W.current,
+			screenContainer: Qe.current,
+			decorator: $e.current,
+			sharedTopBar: G.current,
+			sharedBottomBar: K.current
 		}),
-		hasSharedTopBar: () => K.current.hasSharedTopBar,
-		hasSharedBottomBar: () => K.current.hasSharedBottomBar,
-		getViewportScrollHeight: () => K.current.viewportScrollHeight,
+		hasSharedTopBar: () => J.current.hasSharedTopBar,
+		hasSharedBottomBar: () => J.current.hasSharedBottomBar,
+		getSharedTopBarId: () => J.current.sharedTopBarId,
+		getSharedBottomBarId: () => J.current.sharedBottomBarId,
+		getViewportScrollHeight: () => J.current.viewportScrollHeight,
 		isReadyForDrag: () => {
-			let e = 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 = T.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
+			return n ? T.screen.getState().sharedBars[n] : void 0;
 		},
-		setDragStatus: ce,
+		getPartnerBarMetadata: () => {
+			let e = J.current, t = T.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
+			return n ? T.screen.getState().sharedBarMetadata[n] : void 0;
+		},
+		setDragStatus: ve,
 		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);
-	o(() => {
-		ue(H.current);
-	}, []), o(() => {
-		let e = H.current;
+	let Y = at.current, ot = (e) => Y.pointerDown(e.nativeEvent), dt = (e) => Y.pointerMove(e.nativeEvent), ft = (e) => Y.pointerUp(e.nativeEvent), pt = (e) => Y.pointerCancel(e.nativeEvent), mt = (e) => {
+		(k === "PUSHING" || k === "REPLACING") && (e.preventDefault(), e.stopPropagation());
+	};
+	s(() => {
+		me(W.current);
+	}, []), s(() => {
+		let e = W.current;
 		if (!e) return;
 		let t = (e) => {
-			J.shouldPreventTouch() && e.preventDefault(), e.target?.dataset.swipeAtEdgeBar === "true" && e.preventDefault();
+			Y.shouldPreventTouch() && e.preventDefault();
 		};
 		return e.addEventListener("touchmove", t, { passive: !1 }), () => {
 			e.removeEventListener("touchmove", t);
 		};
-	}, [J]), u(() => {
-		let e = U.current;
-		if (!e) {
-			we(0);
-			return;
-		}
-		return ye(e, we);
-	}, [a]), u(() => {
-		let e = W.current;
-		if (!e) {
-			Te(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);
+	}, [Y]), d(() => {
+		let { registerSharedBars: e, unregisterSharedBars: t } = T.screen.getState(), n = U.current, r = Ge.current;
+		return e(v, {
+			topBar: I,
+			bottomBar: R
+		}, {
+			topBar: I ? {
+				id: l,
+				height: n.key === z ? n.height : void 0
+			} : void 0,
+			bottomBar: R ? {
+				id: f,
+				height: r.key === B ? r.height : void 0
+			} : void 0
+		}), () => t(v);
 	}, [
-		y,
-		a,
-		s,
-		E.screen
-	]), u(() => {
-		let e = H.current;
+		B,
+		R,
+		I,
+		v,
+		f,
+		l,
+		T.screen,
+		z
+	]), d(() => {
+		let e = G.current;
+		if (e) return we(e, q);
+	}, [q, c]), d(() => {
+		let e = K.current;
+		if (e) return we(e, nt);
+	}, [nt, u]), d(() => {
+		let e = W.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 } = T.screen.getState();
+		return t(v, { opaqueBackground: xe(getComputedStyle(e).backgroundColor) }), () => n(v);
 	}, [
-		y,
-		h,
+		v,
+		ae,
 		k,
-		E.screen
+		T.screen
 	]);
-	let Me = O, { app: Ne, nav: Pe } = g({
+	let ht = de, { app: gt, nav: _t } = re({
 		status: k,
-		isTopOrTopPrev: Me,
-		hasTopBar: !!a,
-		hasNavBar: !!s,
-		partnerBars: pe
-	}), Y = ee({
+		isTopOrTopPrev: ht,
+		hasTopBar: I,
+		hasNavBar: R,
+		topBarId: l,
+		bottomBarId: f,
+		partnerBars: Se,
+		partnerMetadata: j
+	}), Z = ee({
 		status: k,
-		isTopOrTopPrev: Me,
+		isTopOrTopPrev: ht,
 		transitionName: S
-	}), Fe = te({
-		isActive: b,
-		isPrev: re,
+	}), vt = ie({
+		isActive: y,
+		isPrev: se,
 		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
+		dragStatus: he,
+		replaceTransitionStatus: ge
+	}), yt = p(vt), bt = p(Z !== null && vt), [xt, St] = m({
+		key: Z,
+		released: Z === 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({
+	xt.key !== Z && (St({
+		key: Z,
+		released: Z === null
+	}), bt.current = Z !== null && yt.current), yt.current = vt;
+	let Q = Z !== null && xt.key === Z && !xt.released, $ = Q ? !y && Ce?.opaqueBackground ? "park" : y && (k === "PUSHING" || k === "REPLACING") && Ce?.opaqueBackground ? Oe() ? "park-over" : "park-under" : "true" : "false";
+	d(() => Ee.driveScreenLifecycle({
 		getElements: () => ({
-			scope: H.current,
-			decorator: De.current,
-			bars: [U.current, W.current]
+			scope: W.current,
+			decorator: $e.current,
+			bars: [G.current, K.current]
 		}),
 		transitionName: S,
-		prevTransitionName: C,
+		prevTransitionName: ce,
 		status: k,
-		isActive: b,
-		animHoldReleased: !X
+		isActive: y,
+		animHoldReleased: !Q
 	}), [
-		_e,
+		Ee,
 		k,
-		b,
-		C,
+		y,
+		ce,
 		S,
-		X
-	]), 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
+		Q
+	]), s(() => {
+		if (!Q || Z === null) return;
+		let e = Z, t = T.navigate.getState().transitionTaskId, n = t === null ? e : `${e}#${t}`;
+		return De.current.join(n, () => {
+			if ((J.current.transition.driver === "native" || ye()) && !pe()) {
+				for (let e of [
+					W.current,
+					G.current,
+					K.current,
+					$e.current
+				]) e?.isConnected && e.getAttribute("data-flemo-anim-hold") !== null && e.setAttribute("data-flemo-anim-hold", "false");
+				Qe.current && (Qe.current.style.zIndex = "");
+			}
+			Re(() => St((t) => t.key === e && !t.released ? {
+				key: e,
+				released: !0
+			} : t));
+		}, {
+			scope: W.current,
+			decodeWait: bt.current,
+			contentSettle: ke() && (y && k === "PUSHING" || k === "POPPING") ? {
+				firstWaitMs: 120,
+				capMs: 700,
+				graceMs: 60,
+				minNodes: y ? 30 : 1,
+				renderSettleOnly: !0
+			} : void 0
 		});
 	}, [
-		X,
-		Y,
+		Q,
 		Z,
-		b,
+		$,
+		y,
 		k,
-		E.navigate
+		T.navigate
 	]);
-	let Be = Z === "park-under" ? {} : fe({
-		initial: be,
-		isActive: b,
+	let Ct = $ === "park-under" || $ === "park-over" ? {} : _e({
+		initial: Ae,
+		isActive: y,
 		status: k
 	});
-	return /* @__PURE__ */ Ce("div", {
-		ref: Ee,
+	return /* @__PURE__ */ Le("div", {
+		ref: Qe,
+		onClickCapture: mt,
 		style: {
-			position: T,
+			position: w,
 			top: 0,
 			left: 0,
 			width: "100%",
 			height: "100%",
 			display: "flex",
-			zIndex: Z === "park-under" ? -1 : void 0,
+			zIndex: $ === "park-under" ? -1 : void 0,
 			contain: "layout style",
 			flexDirection: "column",
 			boxSizing: "border-box",
 			overscrollBehavior: "contain"
 		},
 		children: [
-			/* @__PURE__ */ L("div", {
-				"data-swipe-at-edge-bar": !0,
-				style: {
-					position: T,
-					top: 0,
-					left: 0,
-					width: 8,
-					height: "100%",
-					zIndex: 1
-				}
-			}),
-			/* @__PURE__ */ Ce("div", {
-				ref: H,
-				...v,
-				onPointerDown: ke,
-				onPointerMove: Ae,
-				onPointerUp: je,
-				onPointerCancel: je,
+			/* @__PURE__ */ Le("div", {
+				ref: W,
+				...oe,
+				onPointerDown: ot,
+				onPointerMove: dt,
+				onPointerUp: ft,
+				onPointerCancel: pt,
 				"data-flemo-screen": !0,
+				"data-flemo-router": E ?? void 0,
 				"data-flemo-transition": S,
 				"data-flemo-status": k,
-				"data-flemo-active": b ? "true" : "false",
-				"data-flemo-anim-hold": Z,
+				"data-flemo-active": y ? "true" : "false",
+				"data-flemo-anim-hold": $,
 				style: {
 					display: "flex",
 					flexDirection: "column",
 					height: "100%",
-					backgroundColor: h,
+					backgroundColor: ae,
 					overflowY: _ ? void 0 : "auto",
-					touchAction: N === "x" ? "pan-y" : N === "y" ? "pan-x" : "auto",
-					...Be,
-					...v.style
+					touchAction: je === "x" ? "pan-y" : je === "y" ? "pan-x" : "auto",
+					...(Oe() || Fe()) && ($ !== "false" || x === D && !C) ? { willChange: "transform" } : {},
+					...Ct,
+					...oe.style
 				},
 				children: [
-					!d && t && /* @__PURE__ */ L("div", {
+					!h && t && /* @__PURE__ */ N("div", {
 						style: { minHeight: t },
-						children: /* @__PURE__ */ L("div", { style: {
-							position: T,
+						children: /* @__PURE__ */ N("div", { style: {
+							position: w,
 							top: 0,
 							width: "100%",
 							minHeight: t,
 							backgroundColor: n
 						} })
 					}),
-					a && /* @__PURE__ */ L("div", { style: {
-						width: "100%",
-						minHeight: R
-					} }),
-					c,
-					/* @__PURE__ */ L("div", {
+					c && /* @__PURE__ */ N("div", {
+						ref: et,
+						"data-flemo-bar-spacer": "app",
+						style: {
+							width: "100%",
+							minHeight: Xe
+						}
+					}),
+					te,
+					/* @__PURE__ */ N("div", {
 						style: {
 							display: "flex",
 							flexDirection: "column",
@@ -595,19 +693,23 @@ function Ye({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 						},
 						children: e
 					}),
-					l,
-					s && /* @__PURE__ */ L("div", { style: {
-						display: I ? "none" : void 0,
-						width: "100%",
-						minHeight: B
-					} }),
-					!m && r && /* @__PURE__ */ L("div", {
+					ne,
+					u && /* @__PURE__ */ N("div", {
+						ref: tt,
+						"data-flemo-bar-spacer": "nav",
+						style: {
+							display: ze ? "none" : void 0,
+							width: "100%",
+							minHeight: Ze
+						}
+					}),
+					!g && r && /* @__PURE__ */ N("div", {
 						style: {
-							display: I ? "none" : void 0,
+							display: ze ? "none" : void 0,
 							minHeight: r
 						},
-						children: /* @__PURE__ */ L("div", { style: {
-							position: T,
+						children: /* @__PURE__ */ N("div", { style: {
+							position: w,
 							bottom: 0,
 							width: "100%",
 							minHeight: r,
@@ -616,92 +718,88 @@ function Ye({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					})
 				]
 			}),
-			a && /* @__PURE__ */ L("div", {
-				ref: U,
+			c && /* @__PURE__ */ N("div", {
+				ref: rt,
 				"data-flemo-bar": "app",
+				"data-flemo-bar-id": l,
+				"data-flemo-bar-id-type": l === void 0 ? void 0 : typeof l,
+				"data-flemo-router": E ?? void 0,
 				"data-flemo-bar-transition": S,
 				"data-flemo-bar-status": k,
-				"data-flemo-bar-active": b ? "true" : "false",
-				"data-flemo-bar-riding": Ne ? "true" : "false",
-				"data-flemo-anim-hold": Z,
+				"data-flemo-bar-active": y ? "true" : "false",
+				"data-flemo-bar-riding": gt ? "true" : "false",
+				"data-flemo-anim-hold": $,
 				style: {
-					position: T,
-					top: d ? 0 : t,
+					position: w,
+					top: h ? 0 : t,
 					left: 0,
 					width: "100%",
 					zIndex: 1
 				},
-				children: a
+				children: c
 			}),
-			s && /* @__PURE__ */ L("div", {
-				ref: W,
+			u && /* @__PURE__ */ N("div", {
+				ref: it,
 				"data-flemo-bar": "nav",
+				"data-flemo-bar-id": f,
+				"data-flemo-bar-id-type": f === void 0 ? void 0 : typeof f,
+				"data-flemo-router": E ?? void 0,
 				"data-flemo-bar-transition": S,
 				"data-flemo-bar-status": k,
-				"data-flemo-bar-active": b ? "true" : "false",
-				"data-flemo-bar-riding": Pe ? "true" : "false",
-				"data-flemo-anim-hold": Z,
+				"data-flemo-bar-active": y ? "true" : "false",
+				"data-flemo-bar-riding": _t ? "true" : "false",
+				"data-flemo-anim-hold": $,
 				style: {
-					display: I ? "none" : void 0,
-					position: T,
-					bottom: m ? 0 : r,
+					display: ze ? "none" : void 0,
+					position: w,
+					bottom: g ? 0 : r,
 					left: 0,
 					width: "100%",
 					zIndex: 1
 				},
-				children: s
-			}),
-			P && /* @__PURE__ */ L(qe, {
-				ref: De,
-				"data-flemo-anim-hold": Z
+				children: u
 			}),
-			/* @__PURE__ */ L("div", {
-				"data-swipe-at-edge-bar": !0,
-				style: {
-					position: T,
-					top: 0,
-					right: 0,
-					width: 8,
-					height: "100%",
-					zIndex: 1
-				}
+			Ie && /* @__PURE__ */ N(lt, {
+				ref: $e,
+				"data-flemo-anim-hold": $
 			})
 		]
 	});
 }
 //#endregion
 //#region src/screen/Screen.tsx
-function Xe({ children: e, ...t }) {
-	let { isActive: n, isPrev: r, zIndex: i } = V(), a = _({
+function ft({ children: e, ...t }) {
+	let { isActive: n, isPrev: r, zIndex: i } = L(), a = H((e) => e.index), o = ct((e) => e.status), c = X((e) => e.dragStatus), l = X((e) => e.replaceTransitionStatus), u = h({
 		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: o,
+		dragStatus: c,
+		replaceTransitionStatus: l
+	}), [d, f] = m(u !== "live");
+	return u === "live" && d && f(!1), u === "immediate" && !d && f(!0), s(() => {
+		if (u !== "deferred" || d) return;
+		let e = setTimeout(() => f(!0), pt);
 		return () => clearTimeout(e);
-	}, [a, s]), /* @__PURE__ */ L(We, {
-		freeze: s,
-		children: /* @__PURE__ */ L(Ye, {
+	}, [u, d]), /* @__PURE__ */ N(Y, {
+		freeze: d,
+		children: /* @__PURE__ */ N(dt, {
 			...t,
 			children: e
 		})
 	});
 }
-var Ze = 600;
+var pt = 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();
-	return /* @__PURE__ */ L("div", {
+function mt({ ref: e, name: t, style: n, children: r, ...i }) {
+	let { isActive: a, isPrev: s, navigateStore: c, routerId: l } = L(), u = o(He), d = l ?? u ?? void 0, f = F(), p = V(c ?? f.navigate, (e) => s ? "COMPLETED" : e.status);
+	return /* @__PURE__ */ N("div", {
 		ref: e,
 		"data-flemo-part-name": t,
-		"data-flemo-status": W(s ?? c.navigate, (e) => o ? "COMPLETED" : e.status),
+		"data-flemo-router": d,
+		"data-flemo-status": p,
 		"data-flemo-active": a ? "true" : "false",
 		style: n,
 		...i,
@@ -710,21 +808,21 @@ function Qe({ ref: e, name: t, style: n, children: r, ...i }) {
 }
 //#endregion
 //#region src/stores/RouterScopeProvider.tsx
-function $e({ children: e }) {
-	let [t] = p(() => ({
-		history: x(),
-		navigate: S(),
-		transition: ce(),
-		screen: k(),
-		driver: ne(),
-		markSelfInduced: _e,
-		consume: v,
+function ht({ children: e }) {
+	let [t] = m(() => ({
+		history: y(),
+		navigate: b(),
+		transition: de(),
+		screen: E(),
+		driver: oe(),
+		markSelfInduced: j,
+		consume: g,
 		life: { alive: !0 }
 	}));
-	return /* @__PURE__ */ L(R.Provider, {
+	return /* @__PURE__ */ N(P.Provider, {
 		value: t,
 		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 { mt as Part, K as Route, G as Router, ht as RouterScopeProvider, ft as Screen, I as ScreenContext, lt as ScreenDecorator, Y as ScreenFreeze, dt as ScreenMotion, Je as Slot, _ as createBrowserHistoryDriver, v as createDecorator, x as createPartTransition, S as createRawDecorator, ce as createRawPartTransition, C as createRawTransition, ue as createTransition, Ee as partTransitionMap, H as useHistoryStore, nt as useNavigate, ct as useNavigateStore, J as useParams, rt as usePathname, L as useScreen, X as useScreenStore, it as useStep, F as useStores, ut as useViewportScrollHeight };

package/dist/screen/Screen.d.ts

@@ -1,4 +1,5 @@
 import { ComponentPropsWithoutRef, PropsWithChildren, ReactNode } from 'react';
+import { SharedBarId } from '@flemo/core';
 export interface ScreenProps extends PropsWithChildren<Omit<ComponentPropsWithoutRef<"div">, "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerCancel">> {
     statusBarHeight?: string;
     statusBarColor?: string;
@@ -6,7 +7,9 @@ export interface ScreenProps extends PropsWithChildren<Omit<ComponentPropsWithou
     systemNavigationBarColor?: string;
     backgroundColor?: string;
     sharedTopBar?: ReactNode;
+    sharedTopBarId?: SharedBarId;
     sharedBottomBar?: ReactNode;
+    sharedBottomBarId?: SharedBarId;
     topBar?: ReactNode;
     bottomBar?: ReactNode;
     hideStatusBar?: boolean;

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/dist/screen/ScreenMotion.d.ts

@@ -1,3 +1,3 @@
 import { ScreenProps } from './Screen';
-declare function ScreenMotion({ children, statusBarHeight, statusBarColor, systemNavigationBarHeight, systemNavigationBarColor, sharedTopBar, sharedBottomBar, topBar, bottomBar, hideStatusBar, hideSystemNavigationBar, backgroundColor, contentScrollable, ...props }: ScreenProps): import("react").JSX.Element;
+declare function ScreenMotion({ children, statusBarHeight, statusBarColor, systemNavigationBarHeight, systemNavigationBarColor, sharedTopBar, sharedTopBarId, sharedBottomBar, sharedBottomBarId, topBar, bottomBar, hideStatusBar, hideSystemNavigationBar, backgroundColor, contentScrollable, ...props }: ScreenProps): import("react").JSX.Element;
 export default ScreenMotion;

package/dist/screen/store.d.ts

@@ -1,2 +1,2 @@
 export { createScreenStore as default } from '@flemo/core';
-export type { ScreenStore, ScreenStoreApi, SharedBarPresence } from '@flemo/core';
+export type { ScreenStore, ScreenStoreApi, SharedBarId, SharedBarMetadata, SharedBarPresence, SharedBarsMetadata } from '@flemo/core';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flemo/react",
-  "version": "1.9.0",
+  "version": "1.11.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.1"
+    "@flemo/core": "1.24.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",
+    "eslint": "^9.39.5",
     "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.1",
     "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"