@flemo/react 1.10.0 → 1.11.1

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

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

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/dist/utils/useHydrationSafeFlag.d.ts

@@ -0,0 +1 @@
+export default function useHydrationSafeFlag(read: () => boolean): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flemo/react",
-  "version": "1.10.0",
+  "version": "1.11.1",
   "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.23.0"
+    "@flemo/core": "1.25.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -46,12 +46,12 @@
     "@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.8",
     "react-dom": "^19.2.8",
     "typescript": "^6.0.3",
-    "vite": "^8.2.0",
+    "vite": "^8.2.1",
     "vite-plugin-dts": "^5.0.3",
     "vitest": "^4.1.10",
     "@flemo/eslint-config": "0.0.0",