@flemo/react 1.5.1 → 1.5.2

package/dist/index.mjs

@@ -1,21 +1,21 @@
 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";
+import { TaskManger as m, animHoldKey as h, applyTransitionStyles as g, computeBarRiding as _, computeScreenFreeze as v, consumeSelfInducedPop as y, createBrowserHistoryDriver as b, createBrowserHistoryDriver as x, createDecorator as S, createHistoryStore as ee, createHistorySync as C, createMemoryHistoryDriver as te, createNavigateStore as ne, createNavigationController as w, createPartTransition as T, createRawDecorator as E, createRawPartTransition as D, createRawTransition as O, createScreenSelector as k, createScreenStore as A, createSelfPopGuard as re, createSwipeController as j, createTransition as ie, createTransitionEngine as M, createTransitionStore as ae, decoratorMap as N, ensureWindowHistoryState as oe, getMatchedPathPattern as P, isServer as F, markSelfInducedPop as I, partTransitionMap as se, partTransitionMap as ce, scheduleAnimHoldRelease as le, seedInitialHistory as ue, transitionMap as L } from "@flemo/core";
+import { jsx as R, jsxs as de } from "react/jsx-runtime";
+import { createPortal as fe } from "react-dom";
 //#region \0rolldown/runtime.js
-var le = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), V = r(null);
+var pe = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), z = r(null);
 //#endregion
 //#region src/stores/useStores.ts
-function H() {
-	let e = a(V);
+function B() {
+	let e = a(z);
 	if (!e) throw Error("flemo stores are missing. Render inside a <Router>.");
 	return e;
 }
 //#endregion
 //#region src/history/HistoryListener.tsx
-function ue() {
-	let e = H();
-	return o(() => x({
+function V() {
+	let e = B();
+	return o(() => C({
 		stores: e,
 		driver: e.driver,
 		consume: e.consume
@@ -23,7 +23,7 @@ function ue() {
 }
 //#endregion
 //#region src/screen/ScreenContext.ts
-var de = (/* @__PURE__ */ le(((e) => {
+var me = (/* @__PURE__ */ pe(((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) {
@@ -210,7 +210,7 @@ var de = (/* @__PURE__ */ le(((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)}]`);
 	}
-})))(), U = r({
+})))(), H = r({
 	id: "",
 	isActive: !1,
 	isRoot: !0,
@@ -225,15 +225,15 @@ var de = (/* @__PURE__ */ le(((e) => {
 });
 //#endregion
 //#region src/screen/useScreen.ts
-function W() {
-	return a(U);
+function U() {
+	return a(H);
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsContext.ts
-var G = r({}), K = r(() => {});
+var he = r({}), ge = r(() => {});
 //#endregion
 //#region src/screen/ParamsProvider/ParamsReducer.ts
-function q(e, t) {
+function _e(e, t) {
 	switch (t.type) {
 		case "SET": return t.params;
 		default: return e;
@@ -241,8 +241,8 @@ function q(e, t) {
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsProvider.tsx
-function J({ children: e }) {
-	let { isActive: t, params: n } = W(), { driver: r } = H(), [i, a] = d(q, n);
+function W({ children: e }) {
+	let { isActive: t, params: n } = U(), { driver: r } = B(), [i, a] = d(_e, n);
 	return o(() => {
 		if (t) return r.subscribe((e) => {
 			let t = e.state;
@@ -257,9 +257,9 @@ function J({ children: e }) {
 		t,
 		a,
 		r
-	]), /* @__PURE__ */ B(K.Provider, {
+	]), /* @__PURE__ */ R(ge.Provider, {
 		value: a,
-		children: /* @__PURE__ */ B(G.Provider, {
+		children: /* @__PURE__ */ R(he.Provider, {
 			value: i,
 			children: e
 		})
@@ -267,49 +267,49 @@ function J({ 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 Y = (e) => e;
-function X(t, n = Y) {
+var ve = (e) => e;
+function G(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 Z(e) {
-	return X(H().history, e);
+function K(e) {
+	return G(B().history, e);
 }
 //#endregion
 //#region src/renderer/Renderer.tsx
-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, {
+function q({ children: e }) {
+	let t = K((e) => e.index);
+	return k(K((e) => e.histories), t).map((t) => {
+		let [r] = n.toArray(e).filter((e) => (0, me.pathToRegexp)(e.props.path).regexp.test(t.pathname));
+		return /* @__PURE__ */ R(H.Provider, {
 			value: {
 				...t,
-				routePath: F(r.props.path, t.pathname)
+				routePath: P(r.props.path, t.pathname)
 			},
-			children: /* @__PURE__ */ B(J, { children: r })
+			children: /* @__PURE__ */ R(W, { children: r })
 		}, t.id);
 	});
 }
 //#endregion
 //#region src/screen/ScreenViewportContext.ts
-var fe = r({ contained: !1 });
-function pe() {
-	return a(fe);
+var J = r({ contained: !1 });
+function ye() {
+	return a(J);
 }
 //#endregion
 //#region src/transition/styles.ts
-function me(e, t, n = []) {
+function be(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();
+		for (let t of e) L.set(t.name, t);
+		for (let e of t) N.set(e.name, e);
+		for (let e of n) ce.set(e.name, e);
+		return g(), () => {
+			for (let t of e) L.delete(t.name);
+			for (let e of t) N.delete(e.name);
+			for (let e of n) ce.delete(e.name);
+			g();
 		};
 	}, [
 		e,
@@ -319,45 +319,45 @@ function me(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", {
+var Y = r(0), xe = { contained: !0 };
+function Se({ children: e, className: t, style: n }) {
+	return /* @__PURE__ */ R("div", {
 		className: t,
 		style: {
 			position: "relative",
 			overflow: "hidden",
 			...n
 		},
-		children: /* @__PURE__ */ B(fe.Provider, {
-			value: ge,
-			children: /* @__PURE__ */ B(Q, { children: e })
+		children: /* @__PURE__ */ R(J.Provider, {
+			value: xe,
+			children: /* @__PURE__ */ R(q, { children: e })
 		})
 	});
 }
 //#endregion
 //#region src/Router.tsx
-function ve(e) {
+function Ce(e) {
 	let t = null;
 	return n.forEach(e, (e) => {
 		if (t || !i(e)) return;
-		if (e.type === _e) {
+		if (e.type === Se) {
 			t = n.toArray(e.props.children).filter(i);
 			return;
 		}
 		let r = e.props.children;
 		if (r) {
-			let e = ve(r);
+			let e = Ce(r);
 			e && (t = e);
 		}
 	}), t;
 }
-var ye = {
+var we = {
 	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);
+}, Te = [], Ee = [], X = [], De = { contained: !0 };
+function Oe({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = Te, decorators: c = Ee, partTransitions: l = X, history: u = "browser", createDriver: d, className: f, style: m }) {
+	let h = a(Y), g = h > 0, _ = u === "memory", v = s(), y = Ce(e), b = y !== null, S = a(z), C = g ? null : S, w = C !== null, T = d ?? x, [E] = p(() => _ ? null : T(w ? void 0 : v)), D = !g && !_ && !F(), O = D && E ? E.readPathname() : t || "/", k = O.indexOf("?"), j = (k >= 0 ? O.slice(0, k) : O) || "/", ie = D ? window.location.search : k >= 0 ? O.slice(k) : "", [M] = p(() => {
+		let t = ue((y ?? n.toArray(e)).map((e) => e.props.path).flat(), j, ie, r);
 		if (C) return C.history.getState().index === -1 && C.history.setState({
 			index: 0,
 			histories: [t]
@@ -372,67 +372,67 @@ function we({ children: e, initPath: t = "/", defaultTransitionName: r = "cupert
 				layoutId: t.layoutId
 			},
 			url: t.pathname
-		}) : E, a = _ ? ye : ie();
+		}) : E, a = _ ? we : re();
 		return {
 			history: ee([t], 0),
 			navigate: ne(),
-			transition: j(r),
-			screen: D(),
+			transition: ae(r),
+			screen: A(),
 			driver: i,
 			markSelfInduced: a.mark,
 			consume: a.consume
 		};
 	});
-	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));
+	M.transition.setState({ defaultTransitionName: r }), be(i, c, l), o(() => {
+		_ || F() || (oe(w ? null : v, r, M.history.getState().histories[0]?.params ?? {}), g && !w && E && E.readPathname() !== j && E.replaceState(E.readState(), j));
 	}, [
 		_,
 		w,
 		g,
 		v,
-		A,
+		j,
 		r,
-		N.history,
+		M.history,
 		E
 	]);
-	let F = x ? e : /* @__PURE__ */ B(Q, { children: e }), I = /* @__PURE__ */ B(he.Provider, {
+	let N = b ? e : /* @__PURE__ */ R(q, { children: e }), P = /* @__PURE__ */ R(Y.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]
+		children: /* @__PURE__ */ de(z.Provider, {
+			value: M,
+			children: [!_ && /* @__PURE__ */ R(V, {}), g ? /* @__PURE__ */ R(J.Provider, {
+				value: De,
+				children: N
+			}) : N]
 		})
 	});
-	return g ? /* @__PURE__ */ B("div", {
+	return g ? /* @__PURE__ */ R("div", {
 		className: f,
 		style: {
 			position: "relative",
 			overflow: "hidden",
 			...m
 		},
-		children: I
-	}) : I;
+		children: P
+	}) : P;
 }
 //#endregion
 //#region src/Route.tsx
-function Te({ element: e }) {
+function Z({ element: e }) {
 	return e;
 }
 //#endregion
 //#region src/screen/LayerMountContext.ts
-var Ee = r(null);
+var ke = r(null);
 //#endregion
 //#region src/screen/Layer.tsx
-function De({ children: e }) {
-	let t = a(Ee);
-	return t ? ce(e, t) : e;
+function Ae({ children: e }) {
+	let t = a(ke);
+	return t ? fe(e, t) : e;
 }
 //#endregion
 //#region src/utils/buildRoutePath.ts
-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();
+function je(e, t) {
+	let n = t ?? {}, r = (0, me.compile)(e)(Object.fromEntries(Object.entries(n).map(([e, t]) => [e, String(t)]))), i = (typeof e == "string" ? (0, me.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
@@ -440,10 +440,10 @@ function Oe(e, t) {
 }
 //#endregion
 //#region src/navigate/useNavigate.ts
-function ke() {
-	let e = H(), t = S({
+function Me() {
+	let e = B(), t = w({
 		stores: e,
-		buildPathname: (e, t) => Oe(e, t),
+		buildPathname: (e, t) => je(e, t),
 		driver: e.driver,
 		markSelfInduced: e.markSelfInduced
 	});
@@ -455,24 +455,24 @@ function ke() {
 }
 //#endregion
 //#region src/navigate/usePathname.ts
-function Ae() {
-	return Z((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
+function Ne() {
+	return K((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
 }
 //#endregion
 //#region src/navigate/useStep.ts
-var je = (e) => {
+var Pe = (e) => {
 	let t = e;
 	return t?.step ? t.params ?? {} : null;
-}, Me = (e, t) => {
+}, Fe = (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);
+function Ie() {
+	let { routePath: e } = U(), t = B(), n = a(ge), { driver: r, markSelfInduced: i } = t, [s, c] = p(null);
 	o(() => {
-		if (!e) return c(je(r.readState())), r.subscribe((e) => c(je(e.state)));
+		if (!e) return c(Pe(r.readState())), r.subscribe((e) => c(Pe(e.state)));
 	}, [e, r]);
-	let l = (t) => e ? Oe(e, t).pathname : Me(r.readPathname(), t), u = (t) => {
+	let l = (t) => e ? je(e, t).pathname : Fe(r.readPathname(), t), u = (t) => {
 		n({
 			type: "SET",
 			params: t
@@ -534,29 +534,29 @@ function Ne() {
 }
 //#endregion
 //#region src/screen/ParamsProvider/useParams.ts
-function Pe() {
-	return a(G);
+function Le() {
+	return a(he);
 }
 //#endregion
 //#region src/screen/ScreenFreeze.tsx
-function Fe({ freeze: e, children: n }) {
-	return /* @__PURE__ */ B(t, {
+function Re({ freeze: e, children: n }) {
+	return /* @__PURE__ */ R(t, {
 		mode: e ? "hidden" : "visible",
 		children: n
 	});
 }
 //#endregion
 //#region src/stores/useNavigateStore.ts
-function $(e) {
-	return X(H().navigate, e);
+function Q(e) {
+	return G(B().navigate, e);
 }
 //#endregion
 //#region src/screen/ScreenDecorator.tsx
-function Ie({ ref: e, style: t, ...n }) {
-	let { isActive: r, transitionName: i } = W(), a = f(null);
+function ze({ ref: e, style: t, ...n }) {
+	let { isActive: r, transitionName: i } = U(), 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", {
+	let o = Q((e) => e.status), { decoratorName: s } = L.get(i) ?? L.get("none"), l = N.get(s);
+	return l ? /* @__PURE__ */ R("div", {
 		ref: a,
 		"data-flemo-decorator": !0,
 		"data-flemo-decorator-name": l.name,
@@ -577,16 +577,16 @@ function Ie({ ref: e, style: t, ...n }) {
 }
 //#endregion
 //#region src/screen/useViewportScrollHeight.ts
-var Le = 0;
-function Re() {
+var Be = 0;
+function Ve() {
 	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 - Le;
-				n = n < 0 ? 0 : n, Le ||= e, r(n), t(e);
+				let n = e - Be;
+				n = n < 0 ? 0 : n, Be ||= e, r(n), t(e);
 			});
 		};
 		return window.visualViewport?.addEventListener("resize", n), window.visualViewport?.addEventListener("scroll", n), () => {
@@ -599,164 +599,165 @@ function Re() {
 }
 //#endregion
 //#region src/stores/useScreenStore.ts
-function ze(e) {
-	return X(H().screen, e);
+function $(e) {
+	return G(B().screen, e);
 }
 //#endregion
 //#region src/screen/ScreenMotion.tsx
-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: re
+function He({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: i, sharedTopBar: a, sharedBottomBar: s, topBar: c, bottomBar: l, hideStatusBar: d, hideSystemNavigationBar: m, backgroundColor: g = "white", contentScrollable: v = !0, ...y }) {
+	let { id: b, isActive: x, isRoot: S, zIndex: ee, transitionName: C, prevTransitionName: te } = U(), { contained: ne } = ye(), w = ne ? "absolute" : "fixed", T = B(), E = Q((e) => e.status), D = $((e) => e.dragStatus), O = T.screen.getState().setDragStatus, k = T.screen.getState().setReplaceTransitionStatus, A = K((e) => e.index), re = K((e) => e.histories), ie = x ? re[A - 1]?.id : re[A]?.id, ae = $((e) => ie ? e.sharedBars[ie] : void 0), oe = f(null);
+	oe.current ||= M({
+		getTransitionTaskId: () => T.navigate.getState().transitionTaskId,
+		setDragStatus: O,
+		setReplaceTransitionStatus: k
 	});
-	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,
+	let P = oe.current, F = L.get(C) ?? L.get("none"), { initial: I, swipeDirection: se, decoratorName: ce } = F, ue = N.get(ce), { viewportScrollHeight: fe } = Ve(), pe = fe > 0, [z, V] = p(0), [me, H] = p(0), [he, ge] = p(null), _e = f(null), W = f(null), ve = f(null), G = f(null), q = f(null), J = f({
+		transition: F,
+		decorator: ue,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!s,
-		viewportScrollHeight: L,
-		isRoot: b,
-		isActive: y,
-		status: w,
-		dragStatus: T,
-		index: D
+		viewportScrollHeight: fe,
+		isRoot: S,
+		isActive: x,
+		status: E,
+		dragStatus: D,
+		index: A
 	});
-	Y.current = {
-		transition: j,
-		decorator: I,
+	J.current = {
+		transition: F,
+		decorator: ue,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!s,
-		viewportScrollHeight: L,
-		isRoot: b,
-		isActive: y,
-		status: w,
-		dragStatus: T,
-		index: D
+		viewportScrollHeight: fe,
+		isRoot: S,
+		isActive: x,
+		status: E,
+		dragStatus: D,
+		index: A
 	};
-	let X = f(null);
-	X.current ||= O({
-		getTransition: () => Y.current.transition,
-		getDecorator: () => Y.current.decorator,
+	let be = f(null);
+	be.current ||= j({
+		getTransition: () => J.current.transition,
+		getDecorator: () => J.current.decorator,
 		getElements: () => ({
-			scope: G.current,
-			screenContainer: U.current,
-			decorator: K.current,
-			sharedTopBar: q.current,
-			sharedBottomBar: J.current
+			scope: W.current,
+			screenContainer: _e.current,
+			decorator: ve.current,
+			sharedTopBar: G.current,
+			sharedBottomBar: q.current
 		}),
-		hasSharedTopBar: () => Y.current.hasSharedTopBar,
-		hasSharedBottomBar: () => Y.current.hasSharedBottomBar,
-		getViewportScrollHeight: () => Y.current.viewportScrollHeight,
+		hasSharedTopBar: () => J.current.hasSharedTopBar,
+		hasSharedBottomBar: () => J.current.hasSharedBottomBar,
+		getViewportScrollHeight: () => J.current.viewportScrollHeight,
 		isReadyForDrag: () => {
-			let e = Y.current;
+			let e = J.current;
 			return !e.isRoot && e.isActive && e.status === "COMPLETED" && e.dragStatus === "IDLE" && !!e.transition.swipeDirection && e.viewportScrollHeight < 10;
 		},
 		getPartnerBars: () => {
-			let e = 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;
+			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: E,
+		setDragStatus: O,
 		back: () => window.history.back()
 	});
-	let Q = X.current, fe = (e) => Q.pointerDown(e.nativeEvent), me = (e) => Q.pointerMove(e.nativeEvent), he = (e) => Q.pointerUp(e.nativeEvent);
+	let Y = be.current, xe = (e) => Y.pointerDown(e.nativeEvent), Se = (e) => Y.pointerMove(e.nativeEvent), Ce = (e) => Y.pointerUp(e.nativeEvent);
 	o(() => {
-		let e = G.current;
+		let e = W.current;
 		if (!e) return;
 		let t = (e) => {
-			Q.shouldPreventTouch() && e.preventDefault(), e.target?.dataset.swipeAtEdgeBar === "true" && e.preventDefault();
+			Y.shouldPreventTouch() && e.preventDefault(), e.target?.dataset.swipeAtEdgeBar === "true" && e.preventDefault();
 		};
 		return e.addEventListener("touchmove", t, { passive: !1 }), () => {
 			e.removeEventListener("touchmove", t);
 		};
-	}, [Q]), u(() => k.driveScreenLifecycle({
+	}, [Y]), u(() => P.driveScreenLifecycle({
 		getElements: () => ({
-			scope: G.current,
-			decorator: K.current,
-			bars: [q.current, J.current]
+			scope: W.current,
+			decorator: ve.current,
+			bars: [G.current, q.current]
 		}),
-		transitionName: x,
+		transitionName: C,
 		prevTransitionName: te,
-		status: w,
-		isActive: y
+		status: E,
+		isActive: x
 	}), [
-		k,
-		w,
-		y,
+		P,
+		E,
+		x,
 		te,
-		x
+		C
 	]), u(() => {
-		let e = q.current;
+		let e = G.current;
 		if (!e) {
-			ce(0);
+			V(0);
 			return;
 		}
-		e.offsetHeight > 0 && ce(e.offsetHeight);
+		e.offsetHeight > 0 && V(e.offsetHeight);
 		let t = new ResizeObserver(([e]) => {
-			e.contentRect.height > 0 && ce(e.contentRect.height);
+			e.contentRect.height > 0 && V(e.contentRect.height);
 		});
 		return t.observe(e), () => {
 			t.disconnect();
 		};
 	}, [a]), u(() => {
-		let e = J.current;
+		let e = q.current;
 		if (!e) {
-			V(0);
+			H(0);
 			return;
 		}
-		e.offsetHeight > 0 && V(e.offsetHeight);
+		e.offsetHeight > 0 && H(e.offsetHeight);
 		let t = new ResizeObserver(([e]) => {
-			e.contentRect.height > 0 && V(e.contentRect.height);
+			e.contentRect.height > 0 && H(e.contentRect.height);
 		});
 		return t.observe(e), () => {
 			t.disconnect();
 		};
 	}, [s]), u(() => {
-		let { registerSharedBars: e, unregisterSharedBars: t } = C.screen.getState();
-		return e(v, {
+		let { registerSharedBars: e, unregisterSharedBars: t } = T.screen.getState();
+		return e(b, {
 			topBar: !!a,
 			bottomBar: !!s
-		}), () => t(v);
+		}), () => t(b);
 	}, [
-		v,
+		b,
 		a,
 		s,
-		C.screen
+		T.screen
 	]);
-	let ge = y || ee === D - 1, _e = !!a, ve = !!s;
-	u(() => N({
-		topBar: q.current,
-		navBar: J.current,
-		isTopOrTopPrev: ge,
-		isActive: y,
-		index: D,
-		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)
-	}), [
-		ge,
-		y,
-		D,
-		_e,
-		ve,
-		C.history,
-		C.navigate,
-		C.screen
-	]);
-	let ye = (() => {
-		if (!y || w !== "PUSHING" && w !== "REPLACING") return {};
+	let we = x || ee === A - 1, { app: Te, nav: Ee } = _({
+		status: E,
+		isTopOrTopPrev: we,
+		hasTopBar: !!a,
+		hasNavBar: !!s,
+		partnerBars: ae
+	}), X = h({
+		status: E,
+		isTopOrTopPrev: we,
+		transitionName: C
+	}), [De, Oe] = p({
+		key: X,
+		released: X === null
+	});
+	De.key !== X && Oe({
+		key: X,
+		released: X === null
+	});
+	let Z = X !== null && De.key === X && !De.released;
+	o(() => {
+		if (Z) return le(() => Oe((e) => e.key === X && !e.released ? {
+			key: X,
+			released: !0
+		} : e));
+	}, [Z, X]);
+	let Ae = (() => {
+		if (!x || E !== "PUSHING" && E !== "REPLACING") return {};
 		let 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 typeof I.x == "number" && (e.transform = `translateX(${I.x}px)`), typeof I.x == "string" && (e.transform = `translateX(${I.x})`), typeof I.y == "number" && (e.transform = `translateY(${I.y}px)`), typeof I.y == "string" && (e.transform = `translateY(${I.y})`), typeof I.opacity == "number" && (e.opacity = `${I.opacity}`), e;
 	})();
-	return /* @__PURE__ */ se("div", {
-		ref: U,
+	return /* @__PURE__ */ de("div", {
+		ref: _e,
 		style: {
-			position: S,
+			position: w,
 			top: 0,
 			left: 0,
 			width: "100%",
@@ -768,10 +769,10 @@ function Be({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 			overscrollBehavior: "contain"
 		},
 		children: [
-			/* @__PURE__ */ B("div", {
+			/* @__PURE__ */ R("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
-					position: S,
+					position: w,
 					top: 0,
 					left: 0,
 					width: 8,
@@ -779,92 +780,95 @@ function Be({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					zIndex: 1
 				}
 			}),
-			/* @__PURE__ */ se("div", {
-				ref: G,
-				..._,
-				onPointerDown: fe,
-				onPointerMove: me,
-				onPointerUp: he,
-				onPointerCancel: he,
+			/* @__PURE__ */ de("div", {
+				ref: W,
+				...y,
+				onPointerDown: xe,
+				onPointerMove: Se,
+				onPointerUp: Ce,
+				onPointerCancel: Ce,
 				"data-flemo-screen": !0,
-				"data-flemo-transition": x,
-				"data-flemo-status": w,
-				"data-flemo-active": y ? "true" : "false",
+				"data-flemo-transition": C,
+				"data-flemo-status": E,
+				"data-flemo-active": x ? "true" : "false",
+				"data-flemo-anim-hold": Z ? "true" : "false",
 				style: {
 					display: "flex",
 					flexDirection: "column",
 					height: "100%",
-					backgroundColor: h,
-					overflowY: g ? void 0 : "auto",
-					touchAction: F === "x" ? "pan-y" : F === "y" ? "pan-x" : "auto",
-					...ye,
-					..._.style
+					backgroundColor: g,
+					overflowY: v ? void 0 : "auto",
+					touchAction: se === "x" ? "pan-y" : se === "y" ? "pan-x" : "auto",
+					...Ae,
+					...y.style
 				},
 				children: [
-					!d && t && /* @__PURE__ */ B("div", {
+					!d && t && /* @__PURE__ */ R("div", {
 						style: { minHeight: t },
-						children: /* @__PURE__ */ B("div", { style: {
-							position: S,
+						children: /* @__PURE__ */ R("div", { style: {
+							position: w,
 							top: 0,
 							width: "100%",
 							minHeight: t,
 							backgroundColor: n
 						} })
 					}),
-					a && /* @__PURE__ */ B("div", { style: {
+					a && /* @__PURE__ */ R("div", { style: {
 						width: "100%",
-						minHeight: oe
+						minHeight: z
 					} }),
 					c,
-					/* @__PURE__ */ B("div", {
+					/* @__PURE__ */ R("div", {
 						style: {
 							display: "flex",
 							flexDirection: "column",
 							flexGrow: 1,
-							overflowY: g ? "auto" : void 0,
-							...w !== "IDLE" && w !== "COMPLETED" ? {
+							overflowY: v ? "auto" : void 0,
+							...E !== "IDLE" && E !== "COMPLETED" ? {
 								transform: "translateZ(0)",
 								willChange: "transform"
 							} : null
 						},
-						children: /* @__PURE__ */ B(Ee.Provider, {
-							value: ue,
+						children: /* @__PURE__ */ R(ke.Provider, {
+							value: he,
 							children: e
 						})
 					}),
 					l,
-					s && /* @__PURE__ */ B("div", { style: {
-						display: R ? "none" : void 0,
+					s && /* @__PURE__ */ R("div", { style: {
+						display: pe ? "none" : void 0,
 						width: "100%",
-						minHeight: le
+						minHeight: me
 					} }),
-					!m && r && /* @__PURE__ */ B("div", {
+					!m && r && /* @__PURE__ */ R("div", {
 						style: {
-							display: R ? "none" : void 0,
+							display: pe ? "none" : void 0,
 							minHeight: r
 						},
-						children: /* @__PURE__ */ B("div", { style: {
-							position: S,
+						children: /* @__PURE__ */ R("div", { style: {
+							position: w,
 							bottom: 0,
 							width: "100%",
 							minHeight: r,
 							backgroundColor: i
 						} })
 					}),
-					/* @__PURE__ */ B("div", {
-						ref: de,
+					/* @__PURE__ */ R("div", {
+						ref: ge,
 						"data-flemo-layer-mount": !0
 					})
 				]
 			}),
-			a && /* @__PURE__ */ B("div", {
-				ref: q,
+			a && /* @__PURE__ */ R("div", {
+				ref: G,
 				"data-flemo-bar": "app",
-				"data-flemo-bar-transition": x,
-				"data-flemo-bar-status": w,
-				"data-flemo-bar-active": y ? "true" : "false",
+				"data-flemo-bar-transition": C,
+				"data-flemo-bar-status": E,
+				"data-flemo-bar-active": x ? "true" : "false",
+				"data-flemo-bar-riding": Te ? "true" : "false",
+				"data-flemo-anim-hold": Z ? "true" : "false",
 				style: {
-					position: S,
+					position: w,
 					top: d ? 0 : t,
 					left: 0,
 					width: "100%",
@@ -872,15 +876,17 @@ function Be({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				},
 				children: a
 			}),
-			s && /* @__PURE__ */ B("div", {
-				ref: J,
+			s && /* @__PURE__ */ R("div", {
+				ref: q,
 				"data-flemo-bar": "nav",
-				"data-flemo-bar-transition": x,
-				"data-flemo-bar-status": w,
-				"data-flemo-bar-active": y ? "true" : "false",
+				"data-flemo-bar-transition": C,
+				"data-flemo-bar-status": E,
+				"data-flemo-bar-active": x ? "true" : "false",
+				"data-flemo-bar-riding": Ee ? "true" : "false",
+				"data-flemo-anim-hold": Z ? "true" : "false",
 				style: {
-					display: R ? "none" : void 0,
-					position: S,
+					display: pe ? "none" : void 0,
+					position: w,
 					bottom: m ? 0 : r,
 					left: 0,
 					width: "100%",
@@ -888,11 +894,14 @@ function Be({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 				},
 				children: s
 			}),
-			I && /* @__PURE__ */ B(Ie, { ref: K }),
-			/* @__PURE__ */ B("div", {
+			ue && /* @__PURE__ */ R(ze, {
+				ref: ve,
+				"data-flemo-anim-hold": Z ? "true" : "false"
+			}),
+			/* @__PURE__ */ R("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
-					position: S,
+					position: w,
 					top: 0,
 					right: 0,
 					width: 8,
@@ -905,19 +914,19 @@ function Be({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 }
 //#endregion
 //#region src/screen/Screen.tsx
-function Ve({ children: e, ...t }) {
-	let { isActive: n, isPrev: r, zIndex: i } = W();
-	return /* @__PURE__ */ B(Fe, {
-		freeze: g({
+function Ue({ children: e, ...t }) {
+	let { isActive: n, isPrev: r, zIndex: i } = U();
+	return /* @__PURE__ */ R(Re, {
+		freeze: v({
 			isActive: n,
 			isPrev: r,
 			zIndex: i,
-			index: Z((e) => e.index),
-			status: $((e) => e.status),
-			dragStatus: ze((e) => e.dragStatus),
-			replaceTransitionStatus: ze((e) => e.replaceTransitionStatus)
+			index: K((e) => e.index),
+			status: Q((e) => e.status),
+			dragStatus: $((e) => e.dragStatus),
+			replaceTransitionStatus: $((e) => e.replaceTransitionStatus)
 		}),
-		children: /* @__PURE__ */ B(Be, {
+		children: /* @__PURE__ */ R(He, {
 			...t,
 			children: e
 		})
@@ -925,12 +934,12 @@ function Ve({ children: e, ...t }) {
 }
 //#endregion
 //#region src/screen/Part.tsx
-function He({ ref: e, name: t, style: n, children: r, ...i }) {
-	let { isActive: a } = W();
-	return /* @__PURE__ */ B("div", {
+function We({ ref: e, name: t, style: n, children: r, ...i }) {
+	let { isActive: a } = U();
+	return /* @__PURE__ */ R("div", {
 		ref: e,
 		"data-flemo-part-name": t,
-		"data-flemo-status": $((e) => e.status),
+		"data-flemo-status": Q((e) => e.status),
 		"data-flemo-active": a ? "true" : "false",
 		style: n,
 		...i,
@@ -939,20 +948,20 @@ function He({ ref: e, name: t, style: n, children: r, ...i }) {
 }
 //#endregion
 //#region src/stores/RouterScopeProvider.tsx
-function Ue({ children: e }) {
+function Ge({ children: e }) {
 	let [t] = p(() => ({
 		history: ee(),
 		navigate: ne(),
-		transition: j(),
-		screen: D(),
-		driver: y(),
+		transition: ae(),
+		screen: A(),
+		driver: x(),
 		markSelfInduced: I,
-		consume: _
+		consume: y
 	}));
-	return /* @__PURE__ */ B(V.Provider, {
+	return /* @__PURE__ */ R(z.Provider, {
 		value: t,
 		children: e
 	});
 }
 //#endregion
-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 };
+export { Ae as Layer, We as Part, Z as Route, Oe as Router, Ge as RouterScopeProvider, Ue as Screen, H as ScreenContext, ze as ScreenDecorator, Re as ScreenFreeze, He as ScreenMotion, Se as Slot, b as createBrowserHistoryDriver, S as createDecorator, T as createPartTransition, E as createRawDecorator, D as createRawPartTransition, O as createRawTransition, ie as createTransition, se as partTransitionMap, K as useHistoryStore, Me as useNavigate, Q as useNavigateStore, Le as useParams, Ne as usePathname, U as useScreen, $ as useScreenStore, Ie as useStep, B as useStores, Ve as useViewportScrollHeight };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flemo/react",
-  "version": "1.5.1",
+  "version": "1.5.2",
   "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.6.1"
+    "@flemo/core": "1.7.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",