@flemo/react 1.10.0 → 1.11.0

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 } 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 Ee() {
-	let e = z();
-	return o(() => (fe(e), () => Ce(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 De = r({}), Oe = 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 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 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,9 +61,9 @@ function U({ children: e }) {
 		t,
 		a,
 		r
-	]), /* @__PURE__ */ L(Oe.Provider, {
+	]), /* @__PURE__ */ N(z.Provider, {
 		value: a,
-		children: /* @__PURE__ */ L(De.Provider, {
+		children: /* @__PURE__ */ N(R.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 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 K(e) {
-	return G(z().history, e);
+function H(e) {
+	return V(F().history, e);
 }
 //#endregion
 //#region src/RouterIdContext.ts
-var ke = r(null);
+var He = 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 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,
 				routerId: s ?? void 0,
-				routePath: N(r.props.path, t.pathname)
+				routePath: ve(r.props.path, t.pathname)
 			},
-			children: /* @__PURE__ */ L(U, { children: r })
+			children: /* @__PURE__ */ N(Be, { children: r })
 		}, t.id) : null;
 	});
 }
 //#endregion
 //#region src/screen/ScreenViewportContext.ts
-var J = r({ contained: !1 });
-function Ae() {
-	return a(J);
+var U = r({ contained: !1 });
+function We() {
+	return o(U);
 }
 //#endregion
 //#region src/transition/styles.ts
-function je(e, t, n = []) {
-	l(() => Se(e, t, n), [
+function Ge(e, t, n = []) {
+	u(() => Ae(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 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(J.Provider, {
-			value: Me,
-			children: /* @__PURE__ */ L(q, { children: e })
+		children: /* @__PURE__ */ N(U.Provider, {
+			value: qe,
+			children: /* @__PURE__ */ N(Ue, { children: e })
 		})
 	});
 }
 //#endregion
 //#region src/Router.tsx
-function Pe(e) {
+function Ye(e) {
 	let t = null;
 	return n.forEach(e, (e) => {
 		if (t || !i(e)) return;
-		if (e.type === Ne) {
+		if (e.type === Je) {
 			t = n.toArray(e.props.children).filter(i);
 			return;
 		}
 		let r = e.props.children;
 		if (r) {
-			let e = Pe(r);
+			let e = Ye(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 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: k,
-			search: ae,
+			pathname: le,
+			search: ue,
 			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: C,
+			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 }), Fe(() => (A.life.alive = !0, () => {
-		A.life.alive = !1;
-	}), [A]), je(i, c, l), o(() => de(), []), o(() => ue(), []), o(() => {
+	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 < ze) 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;
-			}, Be);
+			}, tt);
 		}, 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,
-			seedPathname: k,
+	}, []), s(() => {
+		g || !C || Ne({
+			driver: C,
+			routerKey: S ? null : y,
+			nested: h && !S,
+			seedPathname: le,
 			defaultTransitionName: r,
-			rootParams: A.history.getState().histories[0]?.params ?? {}
+			rootParams: O.history.getState().histories[0]?.params ?? {}
 		});
 	}, [
 		g,
-		w,
+		S,
 		h,
-		b,
-		k,
+		y,
+		le,
 		r,
-		A.history,
-		T
+		O.history,
+		C
 	]);
-	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]
+	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 He({ element: e }) {
+function K({ element: e }) {
 	return e;
 }
 //#endregion
 //#region src/utils/buildRoutePath.ts
-function Z(e, t) {
-	return te(e, t);
+function q(e, t) {
+	return ne(e, t);
 }
 //#endregion
 //#region src/navigate/useNavigate.ts
-function Q() {
-	let e = z(), t = w({
+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
 	});
@@ -260,21 +266,21 @@ function Q() {
 }
 //#endregion
 //#region src/navigate/usePathname.ts
-function Ue() {
-	return K((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
+function rt() {
+	return H((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 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 = ae({
+	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",
@@ -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 J() {
+	return o(R);
 }
 //#endregion
 //#region src/screen/ScreenFreeze.tsx
-function Ke({ 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 qe = /* @__PURE__ */ new WeakMap();
-function Je(e) {
-	let t = qe.get(e);
-	return t || (t = y(), qe.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 Ye(e) {
-	return G(z().navigate, e);
+function ct(e) {
+	return V(F().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 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,
@@ -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 ut() {
+	let [e, t] = m(0), [n, r] = m(0);
+	return s(() => Te((e, n) => {
 		r(n), t(e);
 	}), []), {
 		viewportScrollHeight: e,
@@ -352,284 +372,344 @@ function Ze() {
 }
 //#endregion
 //#region src/stores/useScreenStore.ts
-function $(e) {
-	return G(z().screen, e);
+function X(e) {
+	return V(F().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 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 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
+	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: Ie,
+		hasSharedTopBar: !!c,
+		hasSharedBottomBar: !!u,
+		sharedTopBarId: l,
+		sharedBottomBarId: f,
+		viewportScrollHeight: P,
+		isRoot: b,
+		isActive: y,
+		status: k,
+		dragStatus: he,
+		index: D
 	});
 	J.current = {
-		transition: P,
-		decorator: F,
-		hasSharedTopBar: !!s,
-		hasSharedBottomBar: !!c,
-		viewportScrollHeight: I,
-		isRoot: S,
-		isActive: x,
-		status: j,
-		dragStatus: M,
-		index: O
+		transition: M,
+		decorator: Ie,
+		hasSharedTopBar: !!c,
+		hasSharedBottomBar: !!u,
+		sharedTopBarId: l,
+		sharedBottomBarId: f,
+		viewportScrollHeight: P,
+		isRoot: b,
+		isActive: y,
+		status: k,
+		dragStatus: he,
+		index: D
 	};
-	let je = f(null);
-	je.current ||= A({
+	let at = p(null);
+	at.current ||= le({
 		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 = 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: de,
+		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 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), 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) => {
-			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 } = 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);
 	}, [
-		b,
-		s,
-		c,
-		D.screen
-	]), u(() => {
-		let e = U.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 } = D.screen.getState();
-		return t(b, { opaqueBackground: he(getComputedStyle(e).backgroundColor) }), () => n(b);
+		let { registerScreenSurface: t, unregisterScreenSurface: n } = T.screen.getState();
+		return t(v, { opaqueBackground: xe(getComputedStyle(e).backgroundColor) }), () => n(v);
 	}, [
-		b,
-		_,
-		j,
-		D.screen
+		v,
+		ae,
+		k,
+		T.screen
 	]);
-	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
+	let ht = de, { app: gt, nav: _t } = re({
+		status: k,
+		isTopOrTopPrev: ht,
+		hasTopBar: I,
+		hasNavBar: R,
+		topBarId: l,
+		bottomBarId: f,
+		partnerBars: Se,
+		partnerMetadata: j
+	}), Z = ee({
+		status: k,
+		isTopOrTopPrev: ht,
+		transitionName: S
+	}), vt = ie({
+		isActive: y,
+		isPrev: se,
+		zIndex: x,
+		index: D,
+		status: k,
+		dragStatus: he,
+		replaceTransitionStatus: ge
+	}), yt = p(vt), bt = p(Z !== null && vt), [xt, St] = 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({
+	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: 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,
-		status: j,
-		isActive: x,
-		animHoldReleased: !Z
+		transitionName: S,
+		prevTransitionName: ce,
+		status: k,
+		isActive: y,
+		animHoldReleased: !Q
 	}), [
-		ve,
-		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()) {
+		Ee,
+		k,
+		y,
+		ce,
+		S,
+		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 [
-					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 ? {
+			Re(() => St((t) => t.key === e && !t.released ? {
 				key: e,
 				released: !0
-			} : t);
+			} : t));
 		}, {
-			scope: U.current,
-			decodeWait: Be.current
+			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
 		});
 	}, [
-		Z,
-		X,
 		Q,
-		x,
-		j,
-		D.navigate
+		Z,
+		$,
+		y,
+		k,
+		T.navigate
 	]);
-	let Ue = Q === "park-under" ? {} : pe({
-		initial: xe,
-		isActive: x,
-		status: j
+	let Ct = $ === "park-under" || $ === "park-over" ? {} : _e({
+		initial: Ae,
+		isActive: y,
+		status: k
 	});
-	return /* @__PURE__ */ Te("div", {
-		ref: H,
+	return /* @__PURE__ */ Le("div", {
+		ref: Qe,
+		onClickCapture: mt,
 		style: {
-			position: E,
+			position: w,
 			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__ */ Le("div", {
+				ref: W,
+				...oe,
+				onPointerDown: ot,
+				onPointerMove: dt,
+				onPointerUp: ft,
+				onPointerCancel: pt,
 				"data-flemo-screen": !0,
-				"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,
+				"data-flemo-router": E ?? void 0,
+				"data-flemo-transition": S,
+				"data-flemo-status": k,
+				"data-flemo-active": y ? "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",
+					...(Oe() || Fe()) && ($ !== "false" || x === D && !C) ? { willChange: "transform" } : {},
+					...Ct,
+					...oe.style
 				},
 				children: [
-					!m && t && /* @__PURE__ */ L("div", {
+					!h && t && /* @__PURE__ */ N("div", {
 						style: { minHeight: t },
-						children: /* @__PURE__ */ L("div", { style: {
-							position: E,
+						children: /* @__PURE__ */ N("div", { style: {
+							position: w,
 							top: 0,
 							width: "100%",
 							minHeight: t,
 							backgroundColor: n
 						} })
 					}),
-					s && /* @__PURE__ */ L("div", { style: {
-						width: "100%",
-						minHeight: Ee
-					} }),
-					l,
-					/* @__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",
 							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__ */ N("div", {
+						ref: tt,
+						"data-flemo-bar-spacer": "nav",
 						style: {
-							display: R ? "none" : void 0,
+							display: ze ? "none" : void 0,
+							width: "100%",
+							minHeight: Ze
+						}
+					}),
+					!g && r && /* @__PURE__ */ N("div", {
+						style: {
+							display: ze ? "none" : void 0,
 							minHeight: r
 						},
-						children: /* @__PURE__ */ L("div", { style: {
-							position: E,
+						children: /* @__PURE__ */ N("div", { style: {
+							position: w,
 							bottom: 0,
 							width: "100%",
 							minHeight: r,
@@ -638,96 +718,89 @@ function Qe({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					})
 				]
 			}),
-			s && /* @__PURE__ */ L("div", {
-				ref: G,
+			c && /* @__PURE__ */ N("div", {
+				ref: rt,
 				"data-flemo-bar": "app",
-				"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,
+				"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": y ? "true" : "false",
+				"data-flemo-bar-riding": gt ? "true" : "false",
+				"data-flemo-anim-hold": $,
 				style: {
-					position: E,
-					top: m ? 0 : t,
+					position: w,
+					top: h ? 0 : t,
 					left: 0,
 					width: "100%",
 					zIndex: 1
 				},
-				children: s
+				children: c
 			}),
-			c && /* @__PURE__ */ L("div", {
-				ref: q,
+			u && /* @__PURE__ */ N("div", {
+				ref: it,
 				"data-flemo-bar": "nav",
-				"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,
+				"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": y ? "true" : "false",
+				"data-flemo-bar-riding": _t ? "true" : "false",
+				"data-flemo-anim-hold": $,
 				style: {
-					display: R ? "none" : void 0,
-					position: E,
-					bottom: te ? 0 : r,
+					display: ze ? "none" : void 0,
+					position: w,
+					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
-				}
+			Ie && /* @__PURE__ */ N(lt, {
+				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 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: 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), pt);
 		return () => clearTimeout(e);
-	}, [u, d]), /* @__PURE__ */ L(Ke, {
+	}, [u, d]), /* @__PURE__ */ N(Y, {
 		freeze: d,
-		children: /* @__PURE__ */ L(Qe, {
+		children: /* @__PURE__ */ N(dt, {
 			...t,
 			children: e
 		})
 	});
 }
-var et = 600;
+var pt = 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 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-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 +808,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 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 { 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 { 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/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.10.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,7 +36,7 @@
   "dependencies": {
     "path-to-regexp": "^8.4.2",
     "zustand": "^5.0.14",
-    "@flemo/core": "1.23.0"
+    "@flemo/core": "1.24.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",