@flemo/react 1.4.2 → 1.5.0

package/README.md

@@ -3,7 +3,7 @@
 
 <h1>flemo</h1>
 
-**Native-like screen transitions for React**
+**Native-like screen transitions for the web**
 
 [![npm](https://img.shields.io/npm/v/@flemo/react.svg)](https://www.npmjs.com/package/@flemo/react)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
@@ -12,9 +12,10 @@
 
 ---
 
-flemo is a React router whose unit of routing is a **screen**, not a page. Push, pop, and the
+flemo is a router whose unit of routing is a **screen**, not a page. Push, pop, and the
 animations and gestures between screens are handled by flemo, so you don't need to wire a
-router and a motion library together yourself.
+router and a motion library together yourself. `@flemo/react` is the React binding (the
+framework-agnostic core lives in `@flemo/core`).
 
 ## Install
 

package/dist/Router.d.ts

@@ -1,11 +1,15 @@
-import { PropsWithChildren } from 'react';
-import { PartTransition, Decorator, Transition, TransitionName } from '@flemo/core';
+import { CSSProperties, PropsWithChildren } from 'react';
+import { HistoryDriver, PartTransition, Decorator, Transition, TransitionName } from '@flemo/core';
 interface RouterProps {
     initPath?: string;
     defaultTransitionName?: TransitionName;
     transitions?: Transition[];
     decorators?: Decorator[];
     partTransitions?: PartTransition[];
+    history?: "browser" | "memory";
+    createDriver?: (routerKey?: string) => HistoryDriver;
+    className?: string;
+    style?: CSSProperties;
 }
-declare function Router({ children, initPath, defaultTransitionName, transitions, decorators, partTransitions }: PropsWithChildren<RouterProps>): import("react").JSX.Element;
+declare function Router({ children, initPath, defaultTransitionName, transitions, decorators, partTransitions, history, createDriver, className, style }: PropsWithChildren<RouterProps>): import("react").JSX.Element;
 export default Router;

package/dist/RouterDepthContext.d.ts

@@ -0,0 +1,2 @@
+declare const RouterDepthContext: import('react').Context<number>;
+export default RouterDepthContext;

package/dist/Slot.d.ts

@@ -0,0 +1,7 @@
+import { CSSProperties, PropsWithChildren } from 'react';
+export interface SlotProps {
+    className?: string;
+    style?: CSSProperties;
+}
+declare function Slot({ children, className, style }: PropsWithChildren<SlotProps>): import("react").JSX.Element;
+export default Slot;

package/dist/__tests__/Router.test.d.ts

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

package/dist/index.d.ts

@@ -1,6 +1,9 @@
 export { default as Router } from './Router';
 export { default as Route, type RegisterRoute } from './Route';
+export { default as Slot, type SlotProps } from './Slot';
+export { default as Layer } from './screen/Layer';
 export { default as useNavigate } from './navigate/useNavigate';
+export { default as usePathname } from './navigate/usePathname';
 export { default as useStep } from './navigate/useStep';
 export { default as useScreen } from './screen/useScreen';
 export { default as useParams } from './screen/ParamsProvider/useParams';
@@ -18,5 +21,5 @@ export { default as RouterScopeProvider } from './stores/RouterScopeProvider';
 export { type FlemoStores } from './stores/StoreContext';
 export { type SharedBarPresence } from './screen/store';
 export { default as useViewportScrollHeight } from './screen/useViewportScrollHeight';
-export { createTransition, createRawTransition, createDecorator, createRawDecorator, createPartTransition, createRawPartTransition, partTransitionMap } from '@flemo/core';
-export type { TransitionName, RegisterTransition, DecoratorName, RegisterDecorator, PartTransitionName, RegisterPartTransition, PartTransitionOptions } from '@flemo/core';
+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,29 @@
-import e, { Children as t, createContext as n, useContext as r, useEffect as i, useImperativeHandle as a, useInsertionEffect as o, useLayoutEffect as s, useReducer as c, useRef as l, useState as u } from "react";
-import { TaskManger as d, applyTransitionStyles as f, computeScreenFreeze as p, createDecorator as m, createHistoryStore as h, createHistorySync as g, createNavigateStore as _, createNavigationController as v, createPartTransition as y, createRawDecorator as b, createRawPartTransition as ee, createRawTransition as x, createScreenSelector as te, createScreenStore as S, createSwipeController as ne, createTransition as C, createTransitionEngine as re, createTransitionStore as w, decoratorMap as T, driveBarRiding as ie, ensureWindowHistoryState as E, getMatchedPathPattern as ae, isServer as D, markSelfInducedPop as oe, partTransitionMap as O, partTransitionMap as k, seedInitialHistory as A, transitionMap as j } from "@flemo/core";
-import { jsx as M, jsxs as se } from "react/jsx-runtime";
+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 { TaskManger as m, applyTransitionStyles as h, computeScreenFreeze as g, consumeSelfInducedPop as _, createBrowserHistoryDriver as v, createBrowserHistoryDriver as y, createDecorator as b, createHistoryStore as ee, createHistorySync as x, createMemoryHistoryDriver as te, createNavigateStore as ne, createNavigationController as S, createPartTransition as C, createRawDecorator as w, createRawPartTransition as T, createRawTransition as E, createScreenSelector as re, createScreenStore as D, createSelfPopGuard as ie, createSwipeController as O, createTransition as k, createTransitionEngine as A, createTransitionStore as j, decoratorMap as M, driveBarRiding as N, ensureWindowHistoryState as P, getMatchedPathPattern as F, isServer as ae, markSelfInducedPop as I, partTransitionMap as L, partTransitionMap as R, seedInitialHistory as oe, transitionMap as z } from "@flemo/core";
+import { jsx as B, jsxs as se } from "react/jsx-runtime";
+import { createPortal as ce } from "react-dom";
 //#region \0rolldown/runtime.js
-var ce = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), N = n(null);
+var le = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), V = r(null);
 //#endregion
 //#region src/stores/useStores.ts
-function P() {
-	let e = r(N);
+function H() {
+	let e = a(V);
 	if (!e) throw Error("flemo stores are missing. Render inside a <Router>.");
 	return e;
 }
 //#endregion
 //#region src/history/HistoryListener.tsx
-function F() {
-	let e = P();
-	return i(() => g({ stores: e }), [e]), null;
+function ue() {
+	let e = H();
+	return o(() => x({
+		stores: e,
+		driver: e.driver,
+		consume: e.consume
+	}), [e]), null;
 }
 //#endregion
 //#region src/screen/ScreenContext.ts
-var I = (/* @__PURE__ */ ce(((e) => {
+var de = (/* @__PURE__ */ le(((e) => {
 	Object.defineProperty(e, "__esModule", { value: !0 }), e.PathError = e.TokenData = void 0, e.parse = c, e.compile = l, e.pathToRegexp = f;
 	var t = "/", n = (e) => e, r = /^[$_\p{ID_Start}]$/u, i = /^[$\u200c\u200d\p{ID_Continue}]$/u;
 	function a(e) {
@@ -205,7 +210,7 @@ var I = (/* @__PURE__ */ ce(((e) => {
 	function h(e, t) {
 		return t.length > e.length ? h(t, e) : (e === t && (t = ""), t.length > 1 ? `(?:(?!${a(e)}|${a(t)})[^])` : e.length > 1 ? `(?:(?!${a(e)})[^${a(t)}])` : `[^${a(e + t)}]`);
 	}
-})))(), L = n({
+})))(), U = r({
 	id: "",
 	isActive: !1,
 	isRoot: !0,
@@ -220,15 +225,15 @@ var I = (/* @__PURE__ */ ce(((e) => {
 });
 //#endregion
 //#region src/screen/useScreen.ts
-function R() {
-	return r(L);
+function W() {
+	return a(U);
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsContext.ts
-var le = n({}), z = n(() => {});
+var G = r({}), K = r(() => {});
 //#endregion
 //#region src/screen/ParamsProvider/ParamsReducer.ts
-function ue(e, t) {
+function q(e, t) {
 	switch (t.type) {
 		case "SET": return t.params;
 		default: return e;
@@ -236,67 +241,75 @@ function ue(e, t) {
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsProvider.tsx
-function B({ children: e }) {
-	let { isActive: t, params: n } = R(), [r, a] = c(ue, n);
-	return i(() => {
-		let e = async (e) => {
-			e.state?.step && await d.addTask(async () => {
+function J({ children: e }) {
+	let { isActive: t, params: n } = W(), { driver: r } = H(), [i, a] = d(q, n);
+	return o(() => {
+		if (t) return r.subscribe((e) => {
+			let t = e.state;
+			t?.step && m.addTask(async () => {
 				a({
 					type: "SET",
-					params: e.state?.params || {}
+					params: t.params ?? {}
 				});
 			});
-		};
-		return t && window.addEventListener("popstate", e), () => {
-			window.removeEventListener("popstate", e);
-		};
-	}, [t, a]), /* @__PURE__ */ M(z.Provider, {
+		});
+	}, [
+		t,
+		a,
+		r
+	]), /* @__PURE__ */ B(K.Provider, {
 		value: a,
-		children: /* @__PURE__ */ M(le.Provider, {
-			value: r,
+		children: /* @__PURE__ */ B(G.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 V = (e) => e;
-function H(t, n = V) {
+var Y = (e) => e;
+function X(t, n = Y) {
 	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 U(e) {
-	return H(P().history, e);
+function Z(e) {
+	return X(H().history, e);
 }
 //#endregion
 //#region src/renderer/Renderer.tsx
-function W({ children: e }) {
-	let n = U((e) => e.index);
-	return te(U((e) => e.histories), n).map((n) => {
-		let [r] = t.toArray(e).filter((e) => (0, I.pathToRegexp)(e.props.path).regexp.test(n.pathname));
-		return /* @__PURE__ */ M(L.Provider, {
+function Q({ children: e }) {
+	let t = Z((e) => e.index);
+	return re(Z((e) => e.histories), t).map((t) => {
+		let [r] = n.toArray(e).filter((e) => (0, de.pathToRegexp)(e.props.path).regexp.test(t.pathname));
+		return /* @__PURE__ */ B(U.Provider, {
 			value: {
-				...n,
-				routePath: ae(r.props.path, n.pathname)
+				...t,
+				routePath: F(r.props.path, t.pathname)
 			},
-			children: /* @__PURE__ */ M(B, { children: r })
-		}, n.id);
+			children: /* @__PURE__ */ B(J, { children: r })
+		}, t.id);
 	});
 }
 //#endregion
+//#region src/screen/ScreenViewportContext.ts
+var fe = r({ contained: !1 });
+function pe() {
+	return a(fe);
+}
+//#endregion
 //#region src/transition/styles.ts
-function G(e, t, n = []) {
-	o(() => {
-		for (let t of e) j.set(t.name, t);
-		for (let e of t) T.set(e.name, e);
-		for (let e of n) k.set(e.name, e);
-		return f(), () => {
-			for (let t of e) j.delete(t.name);
-			for (let e of t) T.delete(e.name);
-			for (let e of n) k.delete(e.name);
-			f();
+function me(e, t, n = []) {
+	l(() => {
+		for (let t of e) z.set(t.name, t);
+		for (let e of t) M.set(e.name, e);
+		for (let e of n) R.set(e.name, e);
+		return h(), () => {
+			for (let t of e) z.delete(t.name);
+			for (let e of t) M.delete(e.name);
+			for (let e of n) R.delete(e.name);
+			h();
 		};
 	}, [
 		e,
@@ -305,37 +318,121 @@ function G(e, t, n = []) {
 	]);
 }
 //#endregion
+//#region src/RouterDepthContext.ts
+var he = r(0), ge = { contained: !0 };
+function _e({ children: e, className: t, style: n }) {
+	return /* @__PURE__ */ B("div", {
+		className: t,
+		style: {
+			position: "relative",
+			overflow: "hidden",
+			...n
+		},
+		children: /* @__PURE__ */ B(fe.Provider, {
+			value: ge,
+			children: /* @__PURE__ */ B(Q, { children: e })
+		})
+	});
+}
+//#endregion
 //#region src/Router.tsx
-var K = [], q = [], J = [];
-function Y({ children: e, initPath: n = "/", defaultTransitionName: a = "cupertino", transitions: o = K, decorators: s = q, partTransitions: c = J }) {
-	let l = D() ? n || "/" : window.location.pathname, d = D() ? l.split("?")[1] || "" : window.location.search, f = r(N), [p] = u(() => {
-		let n = A(t.toArray(e).map((e) => e.props.path).flat(), l, d, a);
-		return f ? (f.history.getState().index === -1 && f.history.setState({
+function ve(e) {
+	let t = null;
+	return n.forEach(e, (e) => {
+		if (t || !i(e)) return;
+		if (e.type === _e) {
+			t = n.toArray(e.props.children).filter(i);
+			return;
+		}
+		let r = e.props.children;
+		if (r) {
+			let e = ve(r);
+			e && (t = e);
+		}
+	}), t;
+}
+var ye = {
+	mark: () => {},
+	consume: () => !1
+}, be = [], xe = [], Se = [], Ce = { contained: !0 };
+function we({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = be, decorators: c = xe, partTransitions: l = Se, history: u = "browser", createDriver: d, className: f, style: m }) {
+	let h = a(he), g = h > 0, _ = u === "memory", v = s(), b = ve(e), x = b !== null, S = a(V), C = g ? null : S, w = C !== null, T = d ?? y, [E] = p(() => _ ? null : T(w ? void 0 : v)), re = !g && !_ && !ae(), O = re && E ? E.readPathname() : t || "/", k = O.indexOf("?"), A = (k >= 0 ? O.slice(0, k) : O) || "/", M = re ? window.location.search : k >= 0 ? O.slice(k) : "", [N] = p(() => {
+		let t = oe((b ?? n.toArray(e)).map((e) => e.props.path).flat(), A, M, r);
+		if (C) return C.history.getState().index === -1 && C.history.setState({
 			index: 0,
-			histories: [n]
-		}), f) : {
-			history: h([n], 0),
-			navigate: _(),
-			transition: w(a),
-			screen: S()
+			histories: [t]
+		}), C;
+		let i = _ ? te({
+			state: {
+				id: t.id,
+				index: 0,
+				status: "IDLE",
+				params: t.params,
+				transitionName: t.transitionName,
+				layoutId: t.layoutId
+			},
+			url: t.pathname
+		}) : E, a = _ ? ye : ie();
+		return {
+			history: ee([t], 0),
+			navigate: ne(),
+			transition: j(r),
+			screen: D(),
+			driver: i,
+			markSelfInduced: a.mark,
+			consume: a.consume
 		};
 	});
-	return p.transition.setState({ defaultTransitionName: a }), G(o, s, c), i(() => {
-		E(a);
-	}, [a]), /* @__PURE__ */ se(N.Provider, {
-		value: p,
-		children: [/* @__PURE__ */ M(F, {}), /* @__PURE__ */ M(W, { children: e })]
+	N.transition.setState({ defaultTransitionName: r }), me(i, c, l), o(() => {
+		_ || ae() || (P(w ? null : v, r, N.history.getState().histories[0]?.params ?? {}), g && !w && E && E.readPathname() !== A && E.replaceState(E.readState(), A));
+	}, [
+		_,
+		w,
+		g,
+		v,
+		A,
+		r,
+		N.history,
+		E
+	]);
+	let F = x ? e : /* @__PURE__ */ B(Q, { children: e }), I = /* @__PURE__ */ B(he.Provider, {
+		value: h + 1,
+		children: /* @__PURE__ */ se(V.Provider, {
+			value: N,
+			children: [!_ && /* @__PURE__ */ B(ue, {}), g ? /* @__PURE__ */ B(fe.Provider, {
+				value: Ce,
+				children: F
+			}) : F]
+		})
 	});
+	return g ? /* @__PURE__ */ B("div", {
+		className: f,
+		style: {
+			position: "relative",
+			overflow: "hidden",
+			...m
+		},
+		children: I
+	}) : I;
 }
 //#endregion
 //#region src/Route.tsx
-function de({ element: e }) {
+function Te({ element: e }) {
 	return e;
 }
 //#endregion
+//#region src/screen/LayerMountContext.ts
+var Ee = r(null);
+//#endregion
+//#region src/screen/Layer.tsx
+function De({ children: e }) {
+	let t = a(Ee);
+	return t ? ce(e, t) : e;
+}
+//#endregion
 //#region src/utils/buildRoutePath.ts
-function X(e, t) {
-	let n = t ?? {}, r = (0, I.compile)(e)(Object.fromEntries(Object.entries(n).map(([e, t]) => [e, String(t)]))), i = (typeof e == "string" ? (0, I.parse)(e) : e).tokens.filter((e) => e.type === "param").map((e) => e.name), a = Object.fromEntries(Object.entries(n).filter(([e]) => !i.includes(e))), o = new URLSearchParams(a).toString();
+function Oe(e, t) {
+	let n = t ?? {}, r = (0, de.compile)(e)(Object.fromEntries(Object.entries(n).map(([e, t]) => [e, String(t)]))), i = (typeof e == "string" ? (0, de.parse)(e) : e).tokens.filter((e) => e.type === "param").map((e) => e.name), a = Object.fromEntries(Object.entries(n).filter(([e]) => !i.includes(e))), o = new URLSearchParams(a).toString();
 	return {
 		pathname: `${r}${o ? `?${o}` : ""}`,
 		toPathname: r
@@ -343,73 +440,90 @@ function X(e, t) {
 }
 //#endregion
 //#region src/navigate/useNavigate.ts
-function fe() {
-	let e = v({
-		stores: P(),
-		buildPathname: (e, t) => X(e, t)
+function ke() {
+	let e = H(), t = S({
+		stores: e,
+		buildPathname: (e, t) => Oe(e, t),
+		driver: e.driver,
+		markSelfInduced: e.markSelfInduced
 	});
 	return {
-		push: (t, n, r) => e.push(t, n ?? {}, r),
-		replace: (t, n, r) => e.replace(t, n ?? {}, r),
-		pop: (t) => e.pop(t)
+		push: (e, n, r) => t.push(e, n ?? {}, r),
+		replace: (e, n, r) => t.replace(e, n ?? {}, r),
+		pop: (e) => t.pop(e)
 	};
 }
 //#endregion
+//#region src/navigate/usePathname.ts
+function Ae() {
+	return Z((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
+}
+//#endregion
 //#region src/navigate/useStep.ts
-function pe() {
-	let { routePath: e } = R(), t = P(), n = r(z);
+var je = (e) => {
+	let t = e;
+	return t?.step ? t.params ?? {} : null;
+}, Me = (e, t) => {
+	let n = new URLSearchParams(Object.fromEntries(Object.entries(t).map(([e, t]) => [e, String(t)]))).toString();
+	return n ? `${e}?${n}` : e;
+};
+function Ne() {
+	let { routePath: e } = W(), t = H(), n = a(K), { driver: r, markSelfInduced: i } = t, [s, c] = p(null);
+	o(() => {
+		if (!e) return c(je(r.readState())), r.subscribe((e) => c(je(e.state)));
+	}, [e, r]);
+	let l = (t) => e ? Oe(e, t).pathname : Me(r.readPathname(), t), u = (t) => {
+		n({
+			type: "SET",
+			params: t
+		}), e || c(t);
+	};
 	return {
-		pushStep: async (t) => {
-			(await d.addTask(async () => {
-				let { pathname: r } = X(e, t);
-				return window.history.state?.step || window.history.replaceState({
-					...window.history.state,
+		step: s,
+		pushStep: async (e) => {
+			(await m.addTask(async () => {
+				let t = l(e), n = r.readState();
+				return n?.step || r.replaceState({
+					...n,
 					step: !0
-				}, "", window.location.pathname), window.history.pushState({
-					...window.history.state,
+				}, r.readPathname()), r.pushState({
+					...r.readState(),
 					step: !0,
-					params: t
-				}, "", r), async () => n({
-					type: "SET",
-					params: t
-				});
+					params: e
+				}, t), async () => u(e);
 			})).result?.();
 		},
-		replaceStep: async (t) => {
-			(await d.addTask(async () => {
-				let { pathname: r } = X(e, t);
-				return window.history.replaceState({
-					...window.history.state,
+		replaceStep: async (e) => {
+			(await m.addTask(async () => {
+				let t = l(e);
+				return r.replaceState({
+					...r.readState(),
 					step: !0,
-					params: t
-				}, "", r), async () => n({
-					type: "SET",
-					params: t
-				});
+					params: e
+				}, t), async () => u(e);
 			})).result?.();
 		},
 		popStep: async () => {
-			let e = d.generateTaskId();
-			(await d.addTask(async (r) => {
-				let i = new Promise((e) => {
-					window.addEventListener("popstate", (t) => e(t.state), { once: !0 });
-				}), a = new Promise((e) => setTimeout(() => e(void 0), 200));
-				oe(), window.history.back();
-				let o = await Promise.race([i, a]);
-				if (!o) {
-					r.abort();
+			let e = m.generateTaskId();
+			(await m.addTask(async (n) => {
+				let a = new Promise((e) => {
+					let t = r.subscribe((n) => {
+						t(), e(n.state);
+					});
+				}), o = new Promise((e) => setTimeout(() => e(void 0), 200));
+				i(), r.back();
+				let s = await Promise.race([a, o]);
+				if (!s) {
+					n.abort();
 					return;
 				}
-				if (o.step) {
-					n({
-						type: "SET",
-						params: o.params ?? {}
-					}), r.abort();
+				if (s.step) {
+					u(s.params ?? {}), n.abort();
 					return;
 				}
-				let { setStatus: s, setTransitionTaskId: c } = t.navigate.getState(), { index: l, popHistory: u } = t.history.getState();
-				return s("POPPING"), c(e), async () => {
-					u(l), s("COMPLETED");
+				let { setStatus: c, setTransitionTaskId: l } = t.navigate.getState(), { index: d, popHistory: f } = t.history.getState();
+				return c("POPPING"), l(e), async () => {
+					f(d), c("COMPLETED");
 				};
 			}, {
 				id: e,
@@ -420,34 +534,33 @@ function pe() {
 }
 //#endregion
 //#region src/screen/ParamsProvider/useParams.ts
-function me() {
-	return r(le);
+function Pe() {
+	return a(G);
 }
 //#endregion
 //#region src/screen/ScreenFreeze.tsx
-function Z({ freeze: e, children: t }) {
-	let n = l(t);
-	return e || (n.current = t), /* @__PURE__ */ M("div", {
-		style: { display: e ? "none" : void 0 },
-		children: n.current
+function Fe({ freeze: e, children: n }) {
+	return /* @__PURE__ */ B(t, {
+		mode: e ? "hidden" : "visible",
+		children: n
 	});
 }
 //#endregion
 //#region src/stores/useNavigateStore.ts
-function Q(e) {
-	return H(P().navigate, e);
+function $(e) {
+	return X(H().navigate, e);
 }
 //#endregion
 //#region src/screen/ScreenDecorator.tsx
-function he({ ref: e, style: t, ...n }) {
-	let { isActive: r, transitionName: i } = R(), o = l(null);
-	a(e, () => o.current);
-	let s = Q((e) => e.status), { decoratorName: c } = j.get(i) ?? j.get("none"), u = T.get(c);
-	return u ? /* @__PURE__ */ M("div", {
-		ref: o,
+function Ie({ ref: e, style: t, ...n }) {
+	let { isActive: r, transitionName: i } = W(), a = f(null);
+	c(e, () => a.current);
+	let o = $((e) => e.status), { decoratorName: s } = z.get(i) ?? z.get("none"), l = M.get(s);
+	return l ? /* @__PURE__ */ B("div", {
+		ref: a,
 		"data-flemo-decorator": !0,
-		"data-flemo-decorator-name": u.name,
-		"data-flemo-status": s,
+		"data-flemo-decorator-name": l.name,
+		"data-flemo-status": o,
 		"data-flemo-active": r ? "true" : "false",
 		style: {
 			position: "absolute",
@@ -464,16 +577,16 @@ function he({ ref: e, style: t, ...n }) {
 }
 //#endregion
 //#region src/screen/useViewportScrollHeight.ts
-var ge = 0;
-function _e() {
-	let [e, t] = u(0), [n, r] = u(0);
-	return i(() => {
+var Le = 0;
+function Re() {
+	let [e, t] = p(0), [n, r] = p(0);
+	return o(() => {
 		let e = 0, n = () => {
 			cancelAnimationFrame(e), e = requestAnimationFrame(() => {
 				let e = document.documentElement.scrollHeight - (window.visualViewport?.height || 0);
 				e = e < 0 ? 0 : e;
-				let n = e - ge;
-				n = n < 0 ? 0 : n, ge ||= e, r(n), t(e);
+				let n = e - Le;
+				n = n < 0 ? 0 : n, Le ||= e, r(n), t(e);
 			});
 		};
 		return window.visualViewport?.addEventListener("resize", n), window.visualViewport?.addEventListener("scroll", n), () => {
@@ -486,164 +599,164 @@ function _e() {
 }
 //#endregion
 //#region src/stores/useScreenStore.ts
-function $(e) {
-	return H(P().screen, e);
+function ze(e) {
+	return X(H().screen, e);
 }
 //#endregion
 //#region src/screen/ScreenMotion.tsx
-function ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: a, sharedAppBar: o, sharedNavigationBar: c, appBar: d, navigationBar: f, hideStatusBar: p, hideSystemNavigationBar: m, backgroundColor: h = "white", contentScrollable: g = !0, ..._ }) {
-	let { id: v, isActive: y, isRoot: b, zIndex: ee, transitionName: x, prevTransitionName: te } = R(), S = P(), C = Q((e) => e.status), w = $((e) => e.dragStatus), E = S.screen.getState().setDragStatus, ae = S.screen.getState().setReplaceTransitionStatus, D = U((e) => e.index), oe = l(null);
-	oe.current ||= re({
-		getTransitionTaskId: () => S.navigate.getState().transitionTaskId,
+function Be({ 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: g = !0, ..._ }) {
+	let { id: v, isActive: y, isRoot: b, zIndex: ee, transitionName: x, prevTransitionName: te } = W(), { contained: ne } = pe(), S = ne ? "absolute" : "fixed", C = H(), w = $((e) => e.status), T = ze((e) => e.dragStatus), E = C.screen.getState().setDragStatus, re = C.screen.getState().setReplaceTransitionStatus, D = Z((e) => e.index), ie = f(null);
+	ie.current ||= A({
+		getTransitionTaskId: () => C.navigate.getState().transitionTaskId,
 		setDragStatus: E,
-		setReplaceTransitionStatus: ae
+		setReplaceTransitionStatus: re
 	});
-	let O = oe.current, k = j.get(x) ?? j.get("none"), { initial: A, swipeDirection: ce, decoratorName: N } = k, F = T.get(N), { viewportScrollHeight: I } = _e(), L = I > 0, [le, z] = u(0), [ue, B] = u(0), V = l(null), H = l(null), W = l(null), G = l(null), K = l(null), q = l({
-		transition: k,
-		decorator: F,
-		hasSharedAppBar: !!o,
-		hasSharedNavigationBar: !!c,
-		viewportScrollHeight: I,
+	let k = ie.current, j = z.get(x) ?? z.get("none"), { initial: P, swipeDirection: F, decoratorName: ae } = j, I = M.get(ae), { viewportScrollHeight: L } = Re(), R = L > 0, [oe, ce] = p(0), [le, V] = p(0), [ue, de] = p(null), U = f(null), G = f(null), K = f(null), q = f(null), J = f(null), Y = f({
+		transition: j,
+		decorator: I,
+		hasSharedTopBar: !!a,
+		hasSharedBottomBar: !!s,
+		viewportScrollHeight: L,
 		isRoot: b,
 		isActive: y,
-		status: C,
-		dragStatus: w,
+		status: w,
+		dragStatus: T,
 		index: D
 	});
-	q.current = {
-		transition: k,
-		decorator: F,
-		hasSharedAppBar: !!o,
-		hasSharedNavigationBar: !!c,
-		viewportScrollHeight: I,
+	Y.current = {
+		transition: j,
+		decorator: I,
+		hasSharedTopBar: !!a,
+		hasSharedBottomBar: !!s,
+		viewportScrollHeight: L,
 		isRoot: b,
 		isActive: y,
-		status: C,
-		dragStatus: w,
+		status: w,
+		dragStatus: T,
 		index: D
 	};
-	let J = l(null);
-	J.current ||= ne({
-		getTransition: () => q.current.transition,
-		getDecorator: () => q.current.decorator,
+	let X = f(null);
+	X.current ||= O({
+		getTransition: () => Y.current.transition,
+		getDecorator: () => Y.current.decorator,
 		getElements: () => ({
-			scope: H.current,
-			screenContainer: V.current,
-			decorator: W.current,
-			sharedAppBar: G.current,
-			sharedNavigationBar: K.current
+			scope: G.current,
+			screenContainer: U.current,
+			decorator: K.current,
+			sharedTopBar: q.current,
+			sharedBottomBar: J.current
 		}),
-		hasSharedAppBar: () => q.current.hasSharedAppBar,
-		hasSharedNavigationBar: () => q.current.hasSharedNavigationBar,
-		getViewportScrollHeight: () => q.current.viewportScrollHeight,
+		hasSharedTopBar: () => Y.current.hasSharedTopBar,
+		hasSharedBottomBar: () => Y.current.hasSharedBottomBar,
+		getViewportScrollHeight: () => Y.current.viewportScrollHeight,
 		isReadyForDrag: () => {
-			let e = q.current;
+			let e = Y.current;
 			return !e.isRoot && e.isActive && e.status === "COMPLETED" && e.dragStatus === "IDLE" && !!e.transition.swipeDirection && e.viewportScrollHeight < 10;
 		},
 		getPartnerBars: () => {
-			let e = q.current, t = S.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
-			return n ? S.screen.getState().sharedBars[n] : void 0;
+			let e = Y.current, t = C.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
+			return n ? C.screen.getState().sharedBars[n] : void 0;
 		},
 		setDragStatus: E,
 		back: () => window.history.back()
 	});
-	let Y = J.current, de = (e) => Y.pointerDown(e.nativeEvent), X = (e) => Y.pointerMove(e.nativeEvent), fe = (e) => Y.pointerUp(e.nativeEvent);
-	i(() => {
-		let e = H.current;
+	let Q = X.current, fe = (e) => Q.pointerDown(e.nativeEvent), me = (e) => Q.pointerMove(e.nativeEvent), he = (e) => Q.pointerUp(e.nativeEvent);
+	o(() => {
+		let e = G.current;
 		if (!e) return;
 		let t = (e) => {
-			Y.shouldPreventTouch() && e.preventDefault(), e.target?.dataset.swipeAtEdgeBar === "true" && e.preventDefault();
+			Q.shouldPreventTouch() && e.preventDefault(), e.target?.dataset.swipeAtEdgeBar === "true" && e.preventDefault();
 		};
 		return e.addEventListener("touchmove", t, { passive: !1 }), () => {
 			e.removeEventListener("touchmove", t);
 		};
-	}, [Y]), s(() => O.driveScreenLifecycle({
+	}, [Q]), u(() => k.driveScreenLifecycle({
 		getElements: () => ({
-			scope: H.current,
-			decorator: W.current,
-			bars: [G.current, K.current]
+			scope: G.current,
+			decorator: K.current,
+			bars: [q.current, J.current]
 		}),
 		transitionName: x,
 		prevTransitionName: te,
-		status: C,
+		status: w,
 		isActive: y
 	}), [
-		O,
-		C,
+		k,
+		w,
 		y,
 		te,
 		x
-	]), s(() => {
-		let e = G.current;
+	]), u(() => {
+		let e = q.current;
 		if (!e) {
-			z(0);
+			ce(0);
 			return;
 		}
-		e.offsetHeight > 0 && z(e.offsetHeight);
+		e.offsetHeight > 0 && ce(e.offsetHeight);
 		let t = new ResizeObserver(([e]) => {
-			e.contentRect.height > 0 && z(e.contentRect.height);
+			e.contentRect.height > 0 && ce(e.contentRect.height);
 		});
 		return t.observe(e), () => {
 			t.disconnect();
 		};
-	}, [o]), s(() => {
-		let e = K.current;
+	}, [a]), u(() => {
+		let e = J.current;
 		if (!e) {
-			B(0);
+			V(0);
 			return;
 		}
-		e.offsetHeight > 0 && B(e.offsetHeight);
+		e.offsetHeight > 0 && V(e.offsetHeight);
 		let t = new ResizeObserver(([e]) => {
-			e.contentRect.height > 0 && B(e.contentRect.height);
+			e.contentRect.height > 0 && V(e.contentRect.height);
 		});
 		return t.observe(e), () => {
 			t.disconnect();
 		};
-	}, [c]), s(() => {
-		let { registerSharedBars: e, unregisterSharedBars: t } = S.screen.getState();
+	}, [s]), u(() => {
+		let { registerSharedBars: e, unregisterSharedBars: t } = C.screen.getState();
 		return e(v, {
-			appBar: !!o,
-			navigationBar: !!c
+			topBar: !!a,
+			bottomBar: !!s
 		}), () => t(v);
 	}, [
 		v,
-		o,
-		c,
-		S.screen
+		a,
+		s,
+		C.screen
 	]);
-	let pe = y || ee === D - 1, me = !!o, Z = !!c;
-	s(() => ie({
-		appBar: G.current,
-		navBar: K.current,
-		isTopOrTopPrev: pe,
+	let ge = y || ee === D - 1, _e = !!a, ve = !!s;
+	u(() => N({
+		topBar: q.current,
+		navBar: J.current,
+		isTopOrTopPrev: ge,
 		isActive: y,
 		index: D,
-		hasAppBar: me,
-		hasNavBar: Z,
-		getStatus: () => S.navigate.getState().status,
-		getHistories: () => S.history.getState().histories,
-		getSharedBars: () => S.screen.getState().sharedBars,
-		subscribeStatus: (e) => S.navigate.subscribe(e),
-		subscribeSharedBars: (e) => S.screen.subscribe(e)
+		hasTopBar: _e,
+		hasNavBar: ve,
+		getStatus: () => C.navigate.getState().status,
+		getHistories: () => C.history.getState().histories,
+		getSharedBars: () => C.screen.getState().sharedBars,
+		subscribeStatus: (e) => C.navigate.subscribe(e),
+		subscribeSharedBars: (e) => C.screen.subscribe(e)
 	}), [
-		pe,
+		ge,
 		y,
 		D,
-		me,
-		Z,
-		S.history,
-		S.navigate,
-		S.screen
+		_e,
+		ve,
+		C.history,
+		C.navigate,
+		C.screen
 	]);
-	let ge = (() => {
-		if (!y || C !== "PUSHING" && C !== "REPLACING") return {};
+	let ye = (() => {
+		if (!y || w !== "PUSHING" && w !== "REPLACING") return {};
 		let e = {};
-		return typeof A.x == "number" && (e.transform = `translateX(${A.x}px)`), typeof A.x == "string" && (e.transform = `translateX(${A.x})`), typeof A.y == "number" && (e.transform = `translateY(${A.y}px)`), typeof A.y == "string" && (e.transform = `translateY(${A.y})`), typeof A.opacity == "number" && (e.opacity = `${A.opacity}`), e;
+		return typeof P.x == "number" && (e.transform = `translateX(${P.x}px)`), typeof P.x == "string" && (e.transform = `translateX(${P.x})`), typeof P.y == "number" && (e.transform = `translateY(${P.y}px)`), typeof P.y == "string" && (e.transform = `translateY(${P.y})`), typeof P.opacity == "number" && (e.opacity = `${P.opacity}`), e;
 	})();
 	return /* @__PURE__ */ se("div", {
-		ref: V,
+		ref: U,
 		style: {
-			position: "fixed",
+			position: S,
 			top: 0,
 			left: 0,
 			width: "100%",
@@ -655,10 +768,10 @@ function ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 			overscrollBehavior: "contain"
 		},
 		children: [
-			/* @__PURE__ */ M("div", {
+			/* @__PURE__ */ B("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
-					position: "fixed",
+					position: S,
 					top: 0,
 					left: 0,
 					width: 8,
@@ -667,15 +780,15 @@ function ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				}
 			}),
 			/* @__PURE__ */ se("div", {
-				ref: H,
+				ref: G,
 				..._,
-				onPointerDown: de,
-				onPointerMove: X,
-				onPointerUp: fe,
-				onPointerCancel: fe,
+				onPointerDown: fe,
+				onPointerMove: me,
+				onPointerUp: he,
+				onPointerCancel: he,
 				"data-flemo-screen": !0,
 				"data-flemo-transition": x,
-				"data-flemo-status": C,
+				"data-flemo-status": w,
 				"data-flemo-active": y ? "true" : "false",
 				style: {
 					display: "flex",
@@ -683,96 +796,103 @@ function ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					height: "100%",
 					backgroundColor: h,
 					overflowY: g ? void 0 : "auto",
-					touchAction: ce === "x" ? "pan-y" : ce === "y" ? "pan-x" : "auto",
-					...ge,
+					touchAction: F === "x" ? "pan-y" : F === "y" ? "pan-x" : "auto",
+					...ye,
 					..._.style
 				},
 				children: [
-					!p && t && /* @__PURE__ */ M("div", {
+					!d && t && /* @__PURE__ */ B("div", {
 						style: { minHeight: t },
-						children: /* @__PURE__ */ M("div", { style: {
-							position: "fixed",
+						children: /* @__PURE__ */ B("div", { style: {
+							position: S,
 							top: 0,
 							width: "100%",
 							minHeight: t,
 							backgroundColor: n
 						} })
 					}),
-					o && /* @__PURE__ */ M("div", { style: {
+					a && /* @__PURE__ */ B("div", { style: {
 						width: "100%",
-						minHeight: le
+						minHeight: oe
 					} }),
-					d,
-					/* @__PURE__ */ M("div", {
+					c,
+					/* @__PURE__ */ B("div", {
 						style: {
 							display: "flex",
 							flexDirection: "column",
 							flexGrow: 1,
 							overflowY: g ? "auto" : void 0,
-							...C !== "IDLE" && C !== "COMPLETED" ? {
+							...w !== "IDLE" && w !== "COMPLETED" ? {
 								transform: "translateZ(0)",
 								willChange: "transform"
 							} : null
 						},
-						children: e
+						children: /* @__PURE__ */ B(Ee.Provider, {
+							value: ue,
+							children: e
+						})
 					}),
-					f,
-					c && /* @__PURE__ */ M("div", { style: {
-						display: L ? "none" : void 0,
+					l,
+					s && /* @__PURE__ */ B("div", { style: {
+						display: R ? "none" : void 0,
 						width: "100%",
-						minHeight: ue
+						minHeight: le
 					} }),
-					!m && r && /* @__PURE__ */ M("div", {
+					!m && r && /* @__PURE__ */ B("div", {
 						style: {
-							display: L ? "none" : void 0,
+							display: R ? "none" : void 0,
 							minHeight: r
 						},
-						children: /* @__PURE__ */ M("div", { style: {
-							position: "fixed",
+						children: /* @__PURE__ */ B("div", { style: {
+							position: S,
 							bottom: 0,
 							width: "100%",
 							minHeight: r,
-							backgroundColor: a
+							backgroundColor: i
 						} })
+					}),
+					/* @__PURE__ */ B("div", {
+						ref: de,
+						"data-flemo-layer-mount": !0
 					})
 				]
 			}),
-			o && /* @__PURE__ */ M("div", {
-				ref: G,
+			a && /* @__PURE__ */ B("div", {
+				ref: q,
 				"data-flemo-bar": "app",
 				"data-flemo-bar-transition": x,
-				"data-flemo-bar-status": C,
+				"data-flemo-bar-status": w,
 				"data-flemo-bar-active": y ? "true" : "false",
 				style: {
-					position: "fixed",
-					top: p ? 0 : t,
+					position: S,
+					top: d ? 0 : t,
 					left: 0,
 					width: "100%",
 					zIndex: 1
 				},
-				children: o
+				children: a
 			}),
-			c && /* @__PURE__ */ M("div", {
-				ref: K,
+			s && /* @__PURE__ */ B("div", {
+				ref: J,
 				"data-flemo-bar": "nav",
 				"data-flemo-bar-transition": x,
-				"data-flemo-bar-status": C,
+				"data-flemo-bar-status": w,
 				"data-flemo-bar-active": y ? "true" : "false",
 				style: {
-					display: L ? "none" : void 0,
-					position: "fixed",
+					display: R ? "none" : void 0,
+					position: S,
 					bottom: m ? 0 : r,
 					left: 0,
 					width: "100%",
 					zIndex: 1
 				},
-				children: c
+				children: s
 			}),
-			F && /* @__PURE__ */ M(he, { ref: W }),
-			/* @__PURE__ */ M("div", {
+			I && /* @__PURE__ */ B(Ie, { ref: K }),
+			/* @__PURE__ */ B("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
-					position: "fixed",
+					position: S,
 					top: 0,
 					right: 0,
 					width: 8,
@@ -785,19 +905,19 @@ function ve({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 }
 //#endregion
 //#region src/screen/Screen.tsx
-function ye({ children: e, ...t }) {
-	let { isActive: n, isPrev: r, zIndex: i } = R();
-	return /* @__PURE__ */ M(Z, {
-		freeze: p({
+function Ve({ children: e, ...t }) {
+	let { isActive: n, isPrev: r, zIndex: i } = W();
+	return /* @__PURE__ */ B(Fe, {
+		freeze: g({
 			isActive: n,
 			isPrev: r,
 			zIndex: i,
-			index: U((e) => e.index),
-			status: Q((e) => e.status),
-			dragStatus: $((e) => e.dragStatus),
-			replaceTransitionStatus: $((e) => e.replaceTransitionStatus)
+			index: Z((e) => e.index),
+			status: $((e) => e.status),
+			dragStatus: ze((e) => e.dragStatus),
+			replaceTransitionStatus: ze((e) => e.replaceTransitionStatus)
 		}),
-		children: /* @__PURE__ */ M(ve, {
+		children: /* @__PURE__ */ B(Be, {
 			...t,
 			children: e
 		})
@@ -805,12 +925,12 @@ function ye({ children: e, ...t }) {
 }
 //#endregion
 //#region src/screen/Part.tsx
-function be({ ref: e, name: t, style: n, children: r, ...i }) {
-	let { isActive: a } = R();
-	return /* @__PURE__ */ M("div", {
+function He({ ref: e, name: t, style: n, children: r, ...i }) {
+	let { isActive: a } = W();
+	return /* @__PURE__ */ B("div", {
 		ref: e,
 		"data-flemo-part-name": t,
-		"data-flemo-status": Q((e) => e.status),
+		"data-flemo-status": $((e) => e.status),
 		"data-flemo-active": a ? "true" : "false",
 		style: n,
 		...i,
@@ -819,17 +939,20 @@ function be({ ref: e, name: t, style: n, children: r, ...i }) {
 }
 //#endregion
 //#region src/stores/RouterScopeProvider.tsx
-function xe({ children: e }) {
-	let [t] = u(() => ({
-		history: h(),
-		navigate: _(),
-		transition: w(),
-		screen: S()
+function Ue({ children: e }) {
+	let [t] = p(() => ({
+		history: ee(),
+		navigate: ne(),
+		transition: j(),
+		screen: D(),
+		driver: y(),
+		markSelfInduced: I,
+		consume: _
 	}));
-	return /* @__PURE__ */ M(N.Provider, {
+	return /* @__PURE__ */ B(V.Provider, {
 		value: t,
 		children: e
 	});
 }
 //#endregion
-export { be as Part, de as Route, Y as Router, xe as RouterScopeProvider, ye as Screen, L as ScreenContext, he as ScreenDecorator, Z as ScreenFreeze, ve as ScreenMotion, m as createDecorator, y as createPartTransition, b as createRawDecorator, ee as createRawPartTransition, x as createRawTransition, C as createTransition, O as partTransitionMap, U as useHistoryStore, fe as useNavigate, Q as useNavigateStore, me as useParams, R as useScreen, $ as useScreenStore, pe as useStep, P as useStores, _e as useViewportScrollHeight };
+export { De as Layer, He as Part, Te as Route, we as Router, Ue as RouterScopeProvider, Ve as Screen, U as ScreenContext, Ie as ScreenDecorator, Fe as ScreenFreeze, Be as ScreenMotion, _e as Slot, v as createBrowserHistoryDriver, b as createDecorator, C as createPartTransition, w as createRawDecorator, T as createRawPartTransition, E as createRawTransition, k as createTransition, L as partTransitionMap, Z as useHistoryStore, ke as useNavigate, $ as useNavigateStore, Pe as useParams, Ae as usePathname, W as useScreen, ze as useScreenStore, Ne as useStep, H as useStores, Re as useViewportScrollHeight };

package/dist/navigate/__tests__/usePathname.test.d.ts

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

package/dist/navigate/usePathname.d.ts

@@ -0,0 +1 @@
+export default function usePathname(): string;

package/dist/navigate/useStep.d.ts

@@ -1,6 +1,9 @@
 import { RegisterRoute } from '../Route';
-export default function useStep<T extends keyof RegisterRoute>(): {
-    pushStep: (params: RegisterRoute[T]) => Promise<void>;
-    replaceStep: (params: RegisterRoute[T]) => Promise<void>;
+type StepParams<T> = [T] extends [never] ? Record<string, unknown> : T extends keyof RegisterRoute ? RegisterRoute[T] : T;
+export default function useStep<T extends keyof RegisterRoute | object = never>(): {
+    step: StepParams<T> | null;
+    pushStep: (params: StepParams<T>) => Promise<void>;
+    replaceStep: (params: StepParams<T>) => Promise<void>;
     popStep: () => Promise<void>;
 };
+export {};

package/dist/screen/Layer.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren, ReactNode } from 'react';
+declare function Layer({ children }: PropsWithChildren): ReactNode;
+export default Layer;

package/dist/screen/LayerMountContext.d.ts

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

package/dist/screen/Screen.d.ts

@@ -5,10 +5,10 @@ export interface ScreenProps extends PropsWithChildren<Omit<ComponentPropsWithou
     systemNavigationBarHeight?: string;
     systemNavigationBarColor?: string;
     backgroundColor?: string;
-    sharedAppBar?: ReactNode;
-    sharedNavigationBar?: ReactNode;
-    appBar?: ReactNode;
-    navigationBar?: ReactNode;
+    sharedTopBar?: ReactNode;
+    sharedBottomBar?: ReactNode;
+    topBar?: ReactNode;
+    bottomBar?: ReactNode;
     hideStatusBar?: boolean;
     hideSystemNavigationBar?: boolean;
     contentScrollable?: boolean;

package/dist/screen/ScreenMotion.d.ts

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

package/dist/screen/ScreenViewportContext.d.ts

@@ -0,0 +1,6 @@
+export interface ScreenViewportContextValue {
+    contained: boolean;
+}
+declare const ScreenViewportContext: import('react').Context<ScreenViewportContextValue>;
+export declare function useScreenViewport(): ScreenViewportContextValue;
+export default ScreenViewportContext;

package/dist/screen/__tests__/Layer.test.d.ts

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

package/dist/stores/StoreContext.d.ts

@@ -1,10 +1,13 @@
-import { HistoryStoreApi, NavigateStoreApi, TransitionStoreApi } from '@flemo/core';
+import { HistoryDriver, HistoryStoreApi, NavigateStoreApi, TransitionStoreApi } from '@flemo/core';
 import { ScreenStoreApi } from '../screen/store';
 export interface FlemoStores {
     history: HistoryStoreApi;
     navigate: NavigateStoreApi;
     transition: TransitionStoreApi;
     screen: ScreenStoreApi;
+    driver: HistoryDriver;
+    markSelfInduced: () => void;
+    consume: () => boolean;
 }
 declare const StoreContext: import('react').Context<FlemoStores | null>;
 export default StoreContext;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flemo/react",
-  "version": "1.4.2",
+  "version": "1.5.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.5.0"
+    "@flemo/core": "1.6.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -54,8 +54,8 @@
     "vite": "^8.0.16",
     "vite-plugin-dts": "^5.0.2",
     "vitest": "^4.1.9",
-    "@flemo/eslint-config": "0.0.0",
-    "@flemo/tsconfig": "0.0.0"
+    "@flemo/tsconfig": "0.0.0",
+    "@flemo/eslint-config": "0.0.0"
   },
   "peerDependencies": {
     "react": "^19.2.7",