@flemo/react 1.7.2 → 1.8.0

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

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

package/dist/index.mjs

@@ -1,20 +1,20 @@
-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 ee, useRef as d, useState as f } from "react";
-import { animHoldKey as te, appendParamsQuery as p, buildRoutePath as m, computeBarRiding as h, computeScreenFreeze as ne, consumeSelfInducedPop as g, createAnimHoldCoordinator as _, createBrowserHistoryDriver as v, createBrowserHistoryDriver as y, createDecorator as b, createHistoryStore as re, createNavigateStore as x, createNavigationController as S, createPartTransition as C, createRawDecorator as w, createRawPartTransition as T, createRawTransition as E, createRouterScope as D, createScreenSelector as O, createScreenStore as k, createStepController as A, createSwipeController as j, createTransition as M, createTransitionEngine as ie, createTransitionStore as ae, decoratorMap as oe, eagerlyDecodeImages as se, ensureScopeHistorySync as ce, enteringInitialStyle as le, getMatchedPathPattern as ue, isOpaqueColor as de, isServer as N, markSelfInducedPop as fe, matchesPathname as pe, observeBarHeight as me, observeViewportScrollHeight as he, partTransitionMap as ge, readStepParams as P, registerTransitionDefinitions as F, releaseScopeHistorySync as _e, resolveTransition as ve, seedRouterEntry as ye, subscribeStepParamsRestore as be } from "@flemo/core";
-import { jsx as I, jsxs as xe } 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 { animHoldKey as ee, appendParamsQuery as m, buildRoutePath as h, computeBarRiding as g, computeScreenFreeze as te, consumeSelfInducedPop as _, createAnimHoldCoordinator as v, createBrowserHistoryDriver as y, createBrowserHistoryDriver as b, createDecorator as x, createHistoryStore as ne, createNavigateStore as S, createNavigationController as C, createPartTransition as re, createRawDecorator as w, createRawPartTransition as T, createRawTransition as E, createRouterScope as D, createScreenSelector as O, createScreenStore as k, createStepController as A, createSwipeController as j, createTransition as M, createTransitionEngine as ie, createTransitionStore as ae, decoratorMap as oe, eagerlyDecodeImages as se, ensureImageDecodeOffloader as ce, ensureScopeHistorySync as le, enteringInitialStyle as ue, getMatchedPathPattern as N, holdCompositorWarm as de, isOpaqueColor as fe, isServer as pe, markSelfInducedPop as me, matchesPathname as he, observeBarHeight as ge, observeViewportScrollHeight as _e, partTransitionMap as P, readStepParams as ve, registerTransitionDefinitions as ye, releaseScopeHistorySync as be, resolveTransition as xe, seedRouterEntry as F, subscribeStepParamsRestore as I } from "@flemo/core";
+import { jsx as L, jsxs as Se } from "react/jsx-runtime";
 //#region src/stores/StoreContext.ts
-var L = r(null);
+var R = r(null);
 //#endregion
 //#region src/stores/useStores.ts
-function R() {
-	let e = a(L);
+function z() {
+	let e = a(R);
 	if (!e) throw Error("flemo stores are missing. Render inside a <Router>.");
 	return e;
 }
 //#endregion
 //#region src/history/HistoryListener.tsx
-function z() {
-	let e = R();
-	return o(() => (ce(e), () => _e(e)), [e]), null;
+function Ce() {
+	let e = z();
+	return o(() => (le(e), () => be(e)), [e]), null;
 }
 //#endregion
 //#region src/screen/ScreenContext.ts
@@ -38,10 +38,10 @@ function V() {
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsContext.ts
-var Se = r({}), H = r(() => {});
+var we = r({}), Te = r(() => {});
 //#endregion
 //#region src/screen/ParamsProvider/ParamsReducer.ts
-function Ce(e, t) {
+function Ee(e, t) {
 	switch (t.type) {
 		case "SET": return t.params;
 		default: return e;
@@ -49,10 +49,10 @@ function Ce(e, t) {
 }
 //#endregion
 //#region src/screen/ParamsProvider/ParamsProvider.tsx
-function we({ children: e }) {
-	let { isActive: t, params: n } = V(), { driver: r } = R(), [i, a] = ee(Ce, n);
+function H({ children: e }) {
+	let { isActive: t, params: n } = V(), { driver: r } = z(), [i, a] = d(Ee, n);
 	return o(() => {
-		if (t) return be(r, (e) => a({
+		if (t) return I(r, (e) => a({
 			type: "SET",
 			params: e
 		}));
@@ -60,9 +60,9 @@ function we({ children: e }) {
 		t,
 		a,
 		r
-	]), /* @__PURE__ */ I(H.Provider, {
+	]), /* @__PURE__ */ L(Te.Provider, {
 		value: a,
-		children: /* @__PURE__ */ I(Se.Provider, {
+		children: /* @__PURE__ */ L(we.Provider, {
 			value: i,
 			children: e
 		})
@@ -70,42 +70,42 @@ function we({ 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 Te = (e) => e;
-function U(t, n = Te) {
+var De = (e) => e;
+function U(t, n = De) {
 	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 W(e) {
-	return U(R().history, e);
+	return U(z().history, e);
 }
 //#endregion
 //#region src/renderer/Renderer.tsx
 function G({ children: e }) {
-	let t = W((e) => e.index), r = W((e) => e.histories), i = R();
+	let t = W((e) => e.index), r = W((e) => e.histories), i = z();
 	return O(r, t).map((t) => {
-		let [r] = n.toArray(e).filter((e) => pe(e.props.path, t.pathname));
-		return r ? /* @__PURE__ */ I(B.Provider, {
+		let [r] = n.toArray(e).filter((e) => he(e.props.path, t.pathname));
+		return r ? /* @__PURE__ */ L(B.Provider, {
 			value: {
 				...t,
 				navigateStore: i.navigate,
-				routePath: ue(r.props.path, t.pathname)
+				routePath: N(r.props.path, t.pathname)
 			},
-			children: /* @__PURE__ */ I(we, { children: r })
+			children: /* @__PURE__ */ L(H, { children: r })
 		}, t.id) : null;
 	});
 }
 //#endregion
 //#region src/screen/ScreenViewportContext.ts
 var K = r({ contained: !1 });
-function Ee() {
+function Oe() {
 	return a(K);
 }
 //#endregion
 //#region src/transition/styles.ts
-function q(e, t, n = []) {
-	l(() => F(e, t, n), [
+function ke(e, t, n = []) {
+	l(() => ye(e, t, n), [
 		e,
 		t,
 		n
@@ -113,109 +113,131 @@ function q(e, t, n = []) {
 }
 //#endregion
 //#region src/RouterDepthContext.ts
-var J = r(0), De = { contained: !0 };
-function Y({ children: e, className: t, style: n }) {
-	return /* @__PURE__ */ I("div", {
+var q = r(0), Ae = { contained: !0 };
+function je({ children: e, className: t, style: n }) {
+	return /* @__PURE__ */ L("div", {
 		className: t,
 		style: {
 			position: "relative",
 			overflow: "hidden",
 			...n
 		},
-		children: /* @__PURE__ */ I(K.Provider, {
-			value: De,
-			children: /* @__PURE__ */ I(G, { children: e })
+		children: /* @__PURE__ */ L(K.Provider, {
+			value: Ae,
+			children: /* @__PURE__ */ L(G, { children: e })
 		})
 	});
 }
 //#endregion
 //#region src/Router.tsx
-function Oe(e) {
+function Me(e) {
 	let t = null;
 	return n.forEach(e, (e) => {
 		if (t || !i(e)) return;
-		if (e.type === Y) {
+		if (e.type === je) {
 			t = n.toArray(e.props.children).filter(i);
 			return;
 		}
 		let r = e.props.children;
 		if (r) {
-			let e = Oe(r);
+			let e = Me(r);
 			e && (t = e);
 		}
 	}), t;
 }
-var ke = typeof window > "u" ? o : u, Ae = [], je = [], Me = [], Ne = { contained: !0 };
-function X({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = Ae, decorators: c = je, partTransitions: l = Me, history: u = "browser", createDriver: ee, className: d, style: te }) {
-	let p = a(J), m = p > 0, h = u === "memory", ne = s(), g = a(B), _ = a(L), v = m && g.id ? `_F_${_?.routerKey ?? ""}${g.id}_` : ne, b = Oe(e), re = b !== null, x = m ? null : _, S = x !== null, C = ee ?? y, [w] = f(() => h ? null : C(S ? void 0 : v)), T = !m && !h && !N(), E = T && w ? w.readPathname() : t || "/", O = E.indexOf("?"), k = (O >= 0 ? E.slice(0, O) : E) || "/", A = T ? window.location.search : O >= 0 ? E.slice(O) : "", [j] = f(() => D({
-		routePaths: (b ?? n.toArray(e)).map((e) => e.props.path).flat(),
+var Ne = typeof window > "u" ? o : u, Pe = [], Fe = [], J = [], Ie = { contained: !0 }, Le = 500, Re = 3e3;
+function Y({ children: e, initPath: t = "/", defaultTransitionName: r = "cupertino", transitions: i = Pe, decorators: c = Fe, partTransitions: l = J, history: u = "browser", createDriver: d, className: f, style: ee }) {
+	let m = a(q), h = m > 0, g = u === "memory", te = s(), _ = a(B), v = a(R), y = h && _.id ? `_F_${v?.routerKey ?? ""}${_.id}_` : te, x = Me(e), ne = x !== null, S = h ? null : v, C = S !== null, re = d ?? b, [w] = p(() => g ? null : re(C ? void 0 : y)), T = !h && !g && !pe(), E = T && w ? w.readPathname() : t || "/", O = E.indexOf("?"), k = (O >= 0 ? E.slice(0, O) : E) || "/", A = T ? window.location.search : O >= 0 ? E.slice(O) : "", [j] = p(() => D({
+		routePaths: (x ?? n.toArray(e)).map((e) => e.props.path).flat(),
 		pathname: k,
 		search: A,
 		defaultTransitionName: r,
-		memory: h,
+		memory: g,
 		browserDriver: w,
-		hostedScope: x,
-		routerKey: S ? void 0 : v,
-		zoneEntryId: m && !S && g.id || void 0,
-		persistKey: m && !h && !S ? v : void 0
+		hostedScope: S,
+		routerKey: C ? void 0 : y,
+		zoneEntryId: h && !C && _.id || void 0,
+		persistKey: h && !g && !C ? y : void 0
 	}));
-	j.transition.setState({ defaultTransitionName: r }), ke(() => (j.life.alive = !0, () => {
+	j.transition.setState({ defaultTransitionName: r }), Ne(() => (j.life.alive = !0, () => {
 		j.life.alive = !1;
-	}), [j]), q(i, c, l), o(() => {
-		h || !w || ye({
+	}), [j]), ke(i, c, l), o(() => ce(), []), o(() => {
+		if (typeof document > "u") return;
+		let e = null, t = null, n = 0, r = () => {
+			let r = Date.now();
+			if (r - n < Le) return;
+			n = r, t && clearTimeout(t);
+			let i = e;
+			e = de(), i?.(), t = setTimeout(() => {
+				t = null, e?.(), e = null;
+			}, Re);
+		}, i = [
+			"pointerdown",
+			"pointermove",
+			"wheel",
+			"touchstart",
+			"keydown"
+		];
+		for (let e of i) document.addEventListener(e, r, { passive: !0 });
+		return () => {
+			for (let e of i) document.removeEventListener(e, r);
+			t && clearTimeout(t), e?.();
+		};
+	}, []), o(() => {
+		g || !w || F({
 			driver: w,
-			routerKey: S ? null : v,
-			nested: m && !S,
+			routerKey: C ? null : y,
+			nested: h && !C,
 			seedPathname: k,
 			defaultTransitionName: r,
 			rootParams: j.history.getState().histories[0]?.params ?? {}
 		});
 	}, [
+		g,
+		C,
 		h,
-		S,
-		m,
-		v,
+		y,
 		k,
 		r,
 		j.history,
 		w
 	]);
-	let M = re ? e : /* @__PURE__ */ I(G, { children: e }), ie = /* @__PURE__ */ I(J.Provider, {
-		value: p + 1,
-		children: /* @__PURE__ */ xe(L.Provider, {
+	let M = ne ? e : /* @__PURE__ */ L(G, { children: e }), ie = /* @__PURE__ */ L(q.Provider, {
+		value: m + 1,
+		children: /* @__PURE__ */ Se(R.Provider, {
 			value: j,
-			children: [!h && /* @__PURE__ */ I(z, {}), m ? /* @__PURE__ */ I(K.Provider, {
-				value: Ne,
+			children: [!g && /* @__PURE__ */ L(Ce, {}), h ? /* @__PURE__ */ L(K.Provider, {
+				value: Ie,
 				children: M
 			}) : M]
 		})
 	});
-	return m ? /* @__PURE__ */ I("div", {
-		className: d,
+	return h ? /* @__PURE__ */ L("div", {
+		className: f,
 		style: {
 			position: "relative",
 			overflow: "hidden",
-			...te
+			...ee
 		},
 		children: ie
 	}) : ie;
 }
 //#endregion
 //#region src/Route.tsx
-function Pe({ element: e }) {
+function ze({ element: e }) {
 	return e;
 }
 //#endregion
 //#region src/utils/buildRoutePath.ts
-function Fe(e, t) {
-	return m(e, t);
+function X(e, t) {
+	return h(e, t);
 }
 //#endregion
 //#region src/navigate/useNavigate.ts
-function Ie() {
-	let e = R(), t = S({
+function Z() {
+	let e = z(), t = C({
 		stores: e,
-		buildPathname: (e, t) => Fe(e, t),
+		buildPathname: (e, t) => X(e, t),
 		driver: e.driver,
 		markSelfInduced: e.markSelfInduced
 	});
@@ -227,21 +249,21 @@ function Ie() {
 }
 //#endregion
 //#region src/navigate/usePathname.ts
-function Le() {
+function Be() {
 	return W((e) => e.histories[e.pendingIndex]?.pathname ?? "/");
 }
 //#endregion
 //#region src/navigate/useStep.ts
-function Re() {
-	let { routePath: e } = V(), t = R(), n = a(H), { driver: r, markSelfInduced: i } = t, [s, c] = f(null);
+function Ve() {
+	let { routePath: e } = V(), t = z(), n = a(Te), { driver: r, markSelfInduced: i } = t, [s, c] = p(null);
 	o(() => {
-		if (!e) return c(P(r.readState())), r.subscribe((e) => c(P(e.state)));
+		if (!e) return c(ve(r.readState())), r.subscribe((e) => c(ve(e.state)));
 	}, [e, r]);
 	let l = A({
 		stores: t,
 		driver: r,
 		markSelfInduced: i,
-		buildStepPathname: (t) => e ? Fe(e, t).pathname : p(r.readPathname(), t),
+		buildStepPathname: (t) => e ? X(e, t).pathname : m(r.readPathname(), t),
 		applyParams: (t) => {
 			n({
 				type: "SET",
@@ -258,36 +280,36 @@ function Re() {
 }
 //#endregion
 //#region src/screen/ParamsProvider/useParams.ts
-function Z() {
-	return a(Se);
+function He() {
+	return a(we);
 }
 //#endregion
 //#region src/screen/ScreenFreeze.tsx
-function Q({ freeze: e, children: n }) {
-	return /* @__PURE__ */ I(t, {
+function Ue({ freeze: e, children: n }) {
+	return /* @__PURE__ */ L(t, {
 		mode: e ? "hidden" : "visible",
 		children: n
 	});
 }
 //#endregion
 //#region src/screen/scopeAnimHoldCoordinator.ts
-var ze = /* @__PURE__ */ new WeakMap();
-function Be(e) {
-	let t = ze.get(e);
-	return t || (t = _(), ze.set(e, t)), t;
+var We = /* @__PURE__ */ new WeakMap();
+function Ge(e) {
+	let t = We.get(e);
+	return t || (t = v(), We.set(e, t)), t;
 }
 //#endregion
 //#region src/stores/useNavigateStore.ts
-function Ve(e) {
-	return U(R().navigate, e);
+function Q(e) {
+	return U(z().navigate, e);
 }
 //#endregion
 //#region src/screen/ScreenDecorator.tsx
-function He({ ref: e, style: t, ...n }) {
-	let { isActive: r, transitionName: i } = V(), a = d(null);
+function Ke({ ref: e, style: t, ...n }) {
+	let { isActive: r, transitionName: i } = V(), a = f(null);
 	c(e, () => a.current);
-	let o = Ve((e) => e.status), { decoratorName: s } = ve(i), l = oe.get(s);
-	return l ? /* @__PURE__ */ I("div", {
+	let o = Q((e) => e.status), { decoratorName: s } = xe(i), l = oe.get(s);
+	return l ? /* @__PURE__ */ L("div", {
 		ref: a,
 		"data-flemo-decorator": !0,
 		"data-flemo-decorator-name": l.name,
@@ -308,9 +330,9 @@ function He({ ref: e, style: t, ...n }) {
 }
 //#endregion
 //#region src/screen/useViewportScrollHeight.ts
-function Ue() {
-	let [e, t] = f(0), [n, r] = f(0);
-	return o(() => he((e, n) => {
+function qe() {
+	let [e, t] = p(0), [n, r] = p(0);
+	return o(() => _e((e, n) => {
 		r(n), t(e);
 	}), []), {
 		viewportScrollHeight: e,
@@ -320,184 +342,192 @@ function Ue() {
 //#endregion
 //#region src/stores/useScreenStore.ts
 function $(e) {
-	return U(R().screen, e);
+	return U(z().screen, e);
 }
 //#endregion
 //#region src/screen/ScreenMotion.tsx
-function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: i, sharedTopBar: a, sharedBottomBar: s, topBar: c, bottomBar: l, hideStatusBar: ee, hideSystemNavigationBar: p, backgroundColor: m = "white", contentScrollable: g = !0, ..._ }) {
-	let { id: v, isActive: y, isRoot: b, isPrev: re, zIndex: x, transitionName: S, prevTransitionName: C } = V(), { contained: w } = Ee(), T = w ? "absolute" : "fixed", E = R(), D = W((e) => e.index), O = W((e) => e.histories), k = y || x === D - 1, A = Ve((e) => k ? e.status : "COMPLETED"), M = $((e) => e.dragStatus), ae = $((e) => e.replaceTransitionStatus), ce = E.screen.getState().setDragStatus, ue = E.screen.getState().setReplaceTransitionStatus, N = y ? O[D - 1]?.id : O[D]?.id, fe = $((e) => N ? e.sharedBars[N] : void 0), pe = $((e) => N ? e.screenSurfaces[N] : void 0), he = d(null);
-	he.current ||= ie({
+function Je({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigationBarHeight: r, systemNavigationBarColor: i, sharedTopBar: a, sharedBottomBar: s, topBar: c, bottomBar: l, hideStatusBar: d, hideSystemNavigationBar: m, backgroundColor: h = "white", contentScrollable: _ = !0, ...v }) {
+	let { id: y, isActive: b, isRoot: x, isPrev: ne, zIndex: S, transitionName: C, prevTransitionName: re } = V(), { contained: w } = Oe(), T = w ? "absolute" : "fixed", E = z(), D = W((e) => e.index), O = W((e) => e.histories), k = b || S === D - 1, A = Q((e) => k ? e.status : "COMPLETED"), M = $((e) => e.dragStatus), ae = $((e) => e.replaceTransitionStatus), ce = E.screen.getState().setDragStatus, le = E.screen.getState().setReplaceTransitionStatus, N = b ? O[D - 1]?.id : O[D]?.id, de = $((e) => N ? e.sharedBars[N] : void 0), pe = $((e) => N ? e.screenSurfaces[N] : void 0), me = f(null);
+	me.current ||= ie({
 		getTransitionTaskId: () => E.navigate.getState().transitionTaskId,
 		setDragStatus: ce,
-		setReplaceTransitionStatus: ue
+		setReplaceTransitionStatus: le
 	});
-	let ge = he.current, P = d(null);
-	P.current ||= Be(E.navigate);
-	let F = ve(S), { initial: _e, swipeDirection: ye, decoratorName: be } = F, L = oe.get(be), { viewportScrollHeight: z } = Ue(), B = z > 0, [Se, H] = f(0), [Ce, we] = f(0), Te = d(null), U = d(null), G = d(null), K = d(null), q = d(null), J = d({
-		transition: F,
-		decorator: L,
+	let he = me.current, _e = f(null);
+	_e.current ||= Ge(E.navigate);
+	let P = xe(C), { initial: ve, swipeDirection: ye, decoratorName: be } = P, F = oe.get(be), { viewportScrollHeight: I } = qe(), R = I > 0, [Ce, B] = p(0), [we, Te] = p(0), Ee = f(null), H = f(null), De = f(null), U = f(null), G = f(null), K = f({
+		transition: P,
+		decorator: F,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!s,
-		viewportScrollHeight: z,
-		isRoot: b,
-		isActive: y,
+		viewportScrollHeight: I,
+		isRoot: x,
+		isActive: b,
 		status: A,
 		dragStatus: M,
 		index: D
 	});
-	J.current = {
-		transition: F,
-		decorator: L,
+	K.current = {
+		transition: P,
+		decorator: F,
 		hasSharedTopBar: !!a,
 		hasSharedBottomBar: !!s,
-		viewportScrollHeight: z,
-		isRoot: b,
-		isActive: y,
+		viewportScrollHeight: I,
+		isRoot: x,
+		isActive: b,
 		status: A,
 		dragStatus: M,
 		index: D
 	};
-	let De = d(null);
-	De.current ||= j({
-		getTransition: () => J.current.transition,
-		getDecorator: () => J.current.decorator,
+	let ke = f(null);
+	ke.current ||= j({
+		getTransition: () => K.current.transition,
+		getDecorator: () => K.current.decorator,
 		getElements: () => ({
-			scope: U.current,
-			screenContainer: Te.current,
-			decorator: G.current,
-			sharedTopBar: K.current,
-			sharedBottomBar: q.current
+			scope: H.current,
+			screenContainer: Ee.current,
+			decorator: De.current,
+			sharedTopBar: U.current,
+			sharedBottomBar: G.current
 		}),
-		hasSharedTopBar: () => J.current.hasSharedTopBar,
-		hasSharedBottomBar: () => J.current.hasSharedBottomBar,
-		getViewportScrollHeight: () => J.current.viewportScrollHeight,
+		hasSharedTopBar: () => K.current.hasSharedTopBar,
+		hasSharedBottomBar: () => K.current.hasSharedBottomBar,
+		getViewportScrollHeight: () => K.current.viewportScrollHeight,
 		isReadyForDrag: () => {
-			let e = J.current;
+			let e = K.current;
 			return !e.isRoot && e.isActive && e.status === "COMPLETED" && e.dragStatus === "IDLE" && !!e.transition.swipeDirection && e.viewportScrollHeight < 10;
 		},
 		getPartnerBars: () => {
-			let e = J.current, t = E.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
+			let e = K.current, t = E.history.getState().histories, n = e.isActive ? t[e.index - 1]?.id : t[e.index]?.id;
 			return n ? E.screen.getState().sharedBars[n] : void 0;
 		},
 		setDragStatus: ce,
 		back: () => window.history.back()
 	});
-	let Y = De.current, Oe = (e) => Y.pointerDown(e.nativeEvent), ke = (e) => Y.pointerMove(e.nativeEvent), Ae = (e) => Y.pointerUp(e.nativeEvent);
+	let q = ke.current, Ae = (e) => q.pointerDown(e.nativeEvent), je = (e) => q.pointerMove(e.nativeEvent), Me = (e) => q.pointerUp(e.nativeEvent);
 	o(() => {
-		se(U.current);
+		se(H.current);
 	}, []), o(() => {
-		let e = U.current;
+		let e = H.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]), u(() => {
-		let e = K.current;
+	}, [q]), u(() => {
+		let e = U.current;
 		if (!e) {
-			H(0);
+			B(0);
 			return;
 		}
-		return me(e, H);
+		return ge(e, B);
 	}, [a]), u(() => {
-		let e = q.current;
+		let e = G.current;
 		if (!e) {
-			we(0);
+			Te(0);
 			return;
 		}
-		return me(e, we);
+		return ge(e, Te);
 	}, [s]), u(() => {
 		let { registerSharedBars: e, unregisterSharedBars: t } = E.screen.getState();
-		return e(v, {
+		return e(y, {
 			topBar: !!a,
 			bottomBar: !!s
-		}), () => t(v);
+		}), () => t(y);
 	}, [
-		v,
+		y,
 		a,
 		s,
 		E.screen
 	]), u(() => {
-		let e = U.current;
+		let e = H.current;
 		if (!e) return;
 		let { registerScreenSurface: t, unregisterScreenSurface: n } = E.screen.getState();
-		return t(v, { opaqueBackground: de(getComputedStyle(e).backgroundColor) }), () => n(v);
+		return t(y, { opaqueBackground: fe(getComputedStyle(e).backgroundColor) }), () => n(y);
 	}, [
-		v,
-		m,
+		y,
+		h,
 		A,
 		E.screen
 	]);
-	let je = k, { app: Me, nav: Ne } = h({
+	let Ne = k, { app: Pe, nav: Fe } = g({
 		status: A,
-		isTopOrTopPrev: je,
+		isTopOrTopPrev: Ne,
 		hasTopBar: !!a,
 		hasNavBar: !!s,
-		partnerBars: fe
-	}), X = te({
+		partnerBars: de
+	}), J = ee({
 		status: A,
-		isTopOrTopPrev: je,
-		transitionName: S
-	}), Pe = ne({
-		isActive: y,
-		isPrev: re,
-		zIndex: x,
+		isTopOrTopPrev: Ne,
+		transitionName: C
+	}), Ie = te({
+		isActive: b,
+		isPrev: ne,
+		zIndex: S,
 		index: D,
 		status: A,
 		dragStatus: M,
 		replaceTransitionStatus: ae
-	}), Fe = d(Pe), Ie = d(X !== null && Pe), [Le, Re] = f({
-		key: X,
-		released: X === null
+	}), Le = f(Ie), Re = f(J !== null && Ie), [Y, ze] = p({
+		key: J,
+		released: J === null
 	});
-	Le.key !== X && (Re({
-		key: X,
-		released: X === null
-	}), Ie.current = X !== null && Fe.current), Fe.current = Pe;
-	let Z = X !== null && Le.key === X && !Le.released, Q = Z ? !y && pe?.opaqueBackground ? "park" : y && (A === "PUSHING" || A === "REPLACING") && pe?.opaqueBackground ? "park-under" : "true" : "false";
-	u(() => ge.driveScreenLifecycle({
+	Y.key !== J && (ze({
+		key: J,
+		released: J === null
+	}), Re.current = J !== null && Le.current), Le.current = Ie;
+	let X = J !== null && Y.key === J && !Y.released, Z = X ? !b && pe?.opaqueBackground ? "park" : b && (A === "PUSHING" || A === "REPLACING") && pe?.opaqueBackground ? "park-under" : "true" : "false";
+	u(() => he.driveScreenLifecycle({
 		getElements: () => ({
-			scope: U.current,
-			decorator: G.current,
-			bars: [K.current, q.current]
+			scope: H.current,
+			decorator: De.current,
+			bars: [U.current, G.current]
 		}),
-		transitionName: S,
-		prevTransitionName: C,
+		transitionName: C,
+		prevTransitionName: re,
 		status: A,
-		isActive: y,
-		animHoldReleased: !Z
+		isActive: b,
+		animHoldReleased: !X
 	}), [
-		ge,
+		he,
 		A,
-		y,
+		b,
+		re,
 		C,
-		S,
-		Z
+		X
 	]), o(() => {
-		if (!Z || X === null) return;
-		let e = X, t = E.navigate.getState().transitionTaskId, n = t === null ? e : `${e}#${t}`;
-		return P.current.join(n, () => Re((t) => t.key === e && !t.released ? {
+		if (!X || J === null) return;
+		let e = J, t = E.navigate.getState().transitionTaskId, n = t === null ? e : `${e}#${t}`;
+		return _e.current.join(n, () => ze((t) => t.key === e && !t.released ? {
 			key: e,
 			released: !0
 		} : t), {
-			scope: U.current,
-			decodeWait: Ie.current
+			scope: H.current,
+			decodeWait: Re.current,
+			contentSettle: b && A === "PUSHING" ? {
+				graceMs: 150,
+				firstWaitMs: 400,
+				capMs: 900,
+				minNodes: 30
+			} : void 0
 		});
 	}, [
-		Z,
 		X,
-		Q,
+		J,
+		Z,
+		b,
+		A,
 		E.navigate
 	]);
-	let ze = Q === "park-under" ? {} : le({
-		initial: _e,
-		isActive: y,
+	let Be = Z === "park-under" ? {} : ue({
+		initial: ve,
+		isActive: b,
 		status: A
 	});
-	return /* @__PURE__ */ xe("div", {
-		ref: Te,
+	return /* @__PURE__ */ Se("div", {
+		ref: Ee,
 		style: {
 			position: T,
 			top: 0,
@@ -505,14 +535,14 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 			width: "100%",
 			height: "100%",
 			display: "flex",
-			zIndex: Q === "park-under" ? -1 : void 0,
+			zIndex: Z === "park-under" ? -1 : void 0,
 			contain: "layout style",
 			flexDirection: "column",
 			boxSizing: "border-box",
 			overscrollBehavior: "contain"
 		},
 		children: [
-			/* @__PURE__ */ I("div", {
+			/* @__PURE__ */ L("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
 					position: T,
@@ -523,32 +553,32 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					zIndex: 1
 				}
 			}),
-			/* @__PURE__ */ xe("div", {
-				ref: U,
-				..._,
-				onPointerDown: Oe,
-				onPointerMove: ke,
-				onPointerUp: Ae,
-				onPointerCancel: Ae,
+			/* @__PURE__ */ Se("div", {
+				ref: H,
+				...v,
+				onPointerDown: Ae,
+				onPointerMove: je,
+				onPointerUp: Me,
+				onPointerCancel: Me,
 				"data-flemo-screen": !0,
-				"data-flemo-transition": S,
+				"data-flemo-transition": C,
 				"data-flemo-status": A,
-				"data-flemo-active": y ? "true" : "false",
-				"data-flemo-anim-hold": Q,
+				"data-flemo-active": b ? "true" : "false",
+				"data-flemo-anim-hold": Z,
 				style: {
 					display: "flex",
 					flexDirection: "column",
 					height: "100%",
-					backgroundColor: m,
-					overflowY: g ? void 0 : "auto",
+					backgroundColor: h,
+					overflowY: _ ? void 0 : "auto",
 					touchAction: ye === "x" ? "pan-y" : ye === "y" ? "pan-x" : "auto",
-					...ze,
-					..._.style
+					...Be,
+					...v.style
 				},
 				children: [
-					!ee && t && /* @__PURE__ */ I("div", {
+					!d && t && /* @__PURE__ */ L("div", {
 						style: { minHeight: t },
-						children: /* @__PURE__ */ I("div", { style: {
+						children: /* @__PURE__ */ L("div", { style: {
 							position: T,
 							top: 0,
 							width: "100%",
@@ -556,32 +586,32 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 							backgroundColor: n
 						} })
 					}),
-					a && /* @__PURE__ */ I("div", { style: {
+					a && /* @__PURE__ */ L("div", { style: {
 						width: "100%",
-						minHeight: Se
+						minHeight: Ce
 					} }),
 					c,
-					/* @__PURE__ */ I("div", {
+					/* @__PURE__ */ L("div", {
 						style: {
 							display: "flex",
 							flexDirection: "column",
 							flexGrow: 1,
-							overflowY: g ? "auto" : void 0
+							overflowY: _ ? "auto" : void 0
 						},
 						children: e
 					}),
 					l,
-					s && /* @__PURE__ */ I("div", { style: {
-						display: B ? "none" : void 0,
+					s && /* @__PURE__ */ L("div", { style: {
+						display: R ? "none" : void 0,
 						width: "100%",
-						minHeight: Ce
+						minHeight: we
 					} }),
-					!p && r && /* @__PURE__ */ I("div", {
+					!m && r && /* @__PURE__ */ L("div", {
 						style: {
-							display: B ? "none" : void 0,
+							display: R ? "none" : void 0,
 							minHeight: r
 						},
-						children: /* @__PURE__ */ I("div", { style: {
+						children: /* @__PURE__ */ L("div", { style: {
 							position: T,
 							bottom: 0,
 							width: "100%",
@@ -591,46 +621,46 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 					})
 				]
 			}),
-			a && /* @__PURE__ */ I("div", {
-				ref: K,
+			a && /* @__PURE__ */ L("div", {
+				ref: U,
 				"data-flemo-bar": "app",
-				"data-flemo-bar-transition": S,
+				"data-flemo-bar-transition": C,
 				"data-flemo-bar-status": A,
-				"data-flemo-bar-active": y ? "true" : "false",
-				"data-flemo-bar-riding": Me ? "true" : "false",
-				"data-flemo-anim-hold": Q,
+				"data-flemo-bar-active": b ? "true" : "false",
+				"data-flemo-bar-riding": Pe ? "true" : "false",
+				"data-flemo-anim-hold": Z,
 				style: {
 					position: T,
-					top: ee ? 0 : t,
+					top: d ? 0 : t,
 					left: 0,
 					width: "100%",
 					zIndex: 1
 				},
 				children: a
 			}),
-			s && /* @__PURE__ */ I("div", {
-				ref: q,
+			s && /* @__PURE__ */ L("div", {
+				ref: G,
 				"data-flemo-bar": "nav",
-				"data-flemo-bar-transition": S,
+				"data-flemo-bar-transition": C,
 				"data-flemo-bar-status": A,
-				"data-flemo-bar-active": y ? "true" : "false",
-				"data-flemo-bar-riding": Ne ? "true" : "false",
-				"data-flemo-anim-hold": Q,
+				"data-flemo-bar-active": b ? "true" : "false",
+				"data-flemo-bar-riding": Fe ? "true" : "false",
+				"data-flemo-anim-hold": Z,
 				style: {
-					display: B ? "none" : void 0,
+					display: R ? "none" : void 0,
 					position: T,
-					bottom: p ? 0 : r,
+					bottom: m ? 0 : r,
 					left: 0,
 					width: "100%",
 					zIndex: 1
 				},
 				children: s
 			}),
-			L && /* @__PURE__ */ I(He, {
-				ref: G,
-				"data-flemo-anim-hold": Q
+			F && /* @__PURE__ */ L(Ke, {
+				ref: De,
+				"data-flemo-anim-hold": Z
 			}),
-			/* @__PURE__ */ I("div", {
+			/* @__PURE__ */ L("div", {
 				"data-swipe-at-edge-bar": !0,
 				style: {
 					position: T,
@@ -646,29 +676,38 @@ function We({ children: e, statusBarHeight: t, statusBarColor: n, systemNavigati
 }
 //#endregion
 //#region src/screen/Screen.tsx
-function Ge({ children: e, ...t }) {
-	let { isActive: n, isPrev: r, zIndex: i } = V();
-	return /* @__PURE__ */ I(Q, {
-		freeze: ne({
-			isActive: n,
-			isPrev: r,
-			zIndex: i,
-			index: W((e) => e.index),
-			status: Ve((e) => e.status),
-			dragStatus: $((e) => e.dragStatus),
-			replaceTransitionStatus: $((e) => e.replaceTransitionStatus)
-		}),
-		children: /* @__PURE__ */ I(We, {
+function Ye({ children: e, ...t }) {
+	let { isActive: n, isPrev: r, zIndex: i } = V(), a = W((e) => e.index), s = Q((e) => e.status), c = te({
+		isActive: n,
+		isPrev: r,
+		zIndex: i,
+		index: a,
+		status: s,
+		dragStatus: $((e) => e.dragStatus),
+		replaceTransitionStatus: $((e) => e.replaceTransitionStatus)
+	}), [l, u] = p(c);
+	return !c && l && u(!1), o(() => {
+		if (!c || l || s !== "COMPLETED") return;
+		let e = setTimeout(() => u(!0), Xe);
+		return () => clearTimeout(e);
+	}, [
+		c,
+		l,
+		s
+	]), /* @__PURE__ */ L(Ue, {
+		freeze: l,
+		children: /* @__PURE__ */ L(Je, {
 			...t,
 			children: e
 		})
 	});
 }
+var Xe = 600;
 //#endregion
 //#region src/screen/Part.tsx
-function Ke({ ref: e, name: t, style: n, children: r, ...i }) {
-	let { isActive: a, navigateStore: o } = V(), s = R();
-	return /* @__PURE__ */ I("div", {
+function Ze({ ref: e, name: t, style: n, children: r, ...i }) {
+	let { isActive: a, navigateStore: o } = V(), s = z();
+	return /* @__PURE__ */ L("div", {
 		ref: e,
 		"data-flemo-part-name": t,
 		"data-flemo-status": U(o ?? s.navigate, (e) => e.status),
@@ -680,21 +719,21 @@ function Ke({ ref: e, name: t, style: n, children: r, ...i }) {
 }
 //#endregion
 //#region src/stores/RouterScopeProvider.tsx
-function qe({ children: e }) {
-	let [t] = f(() => ({
-		history: re(),
-		navigate: x(),
+function Qe({ children: e }) {
+	let [t] = p(() => ({
+		history: ne(),
+		navigate: S(),
 		transition: ae(),
 		screen: k(),
-		driver: y(),
-		markSelfInduced: fe,
-		consume: g,
+		driver: b(),
+		markSelfInduced: me,
+		consume: _,
 		life: { alive: !0 }
 	}));
-	return /* @__PURE__ */ I(L.Provider, {
+	return /* @__PURE__ */ L(R.Provider, {
 		value: t,
 		children: e
 	});
 }
 //#endregion
-export { Ke as Part, Pe as Route, X as Router, qe as RouterScopeProvider, Ge as Screen, B as ScreenContext, He as ScreenDecorator, Q as ScreenFreeze, We as ScreenMotion, Y as Slot, v as createBrowserHistoryDriver, b as createDecorator, C as createPartTransition, w as createRawDecorator, T as createRawPartTransition, E as createRawTransition, M as createTransition, ge as partTransitionMap, W as useHistoryStore, Ie as useNavigate, Ve as useNavigateStore, Z as useParams, Le as usePathname, V as useScreen, $ as useScreenStore, Re as useStep, R as useStores, Ue as useViewportScrollHeight };
+export { Ze as Part, ze as Route, Y as Router, Qe as RouterScopeProvider, Ye as Screen, B as ScreenContext, Ke as ScreenDecorator, Ue as ScreenFreeze, Je as ScreenMotion, je as Slot, y as createBrowserHistoryDriver, x as createDecorator, re as createPartTransition, w as createRawDecorator, T as createRawPartTransition, E as createRawTransition, M as createTransition, P as partTransitionMap, W as useHistoryStore, Z as useNavigate, Q as useNavigateStore, He as useParams, Be as usePathname, V as useScreen, $ as useScreenStore, Ve as useStep, z as useStores, qe as useViewportScrollHeight };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flemo/react",
-  "version": "1.7.2",
+  "version": "1.8.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.20.0"
+    "@flemo/core": "1.21.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -44,16 +44,16 @@
     "@types/node": "^24.13.1",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react-swc": "^4.3.1",
-    "@vitest/coverage-v8": "^4.1.9",
+    "@vitejs/plugin-react-swc": "^4.3.2",
+    "@vitest/coverage-v8": "^4.1.10",
     "eslint": "^9.39.4",
     "jsdom": "^29.1.1",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "typescript": "^6.0.3",
-    "vite": "^8.0.16",
-    "vite-plugin-dts": "^5.0.2",
-    "vitest": "^4.1.9",
+    "vite": "^8.1.5",
+    "vite-plugin-dts": "^5.0.3",
+    "vitest": "^4.1.10",
     "@flemo/eslint-config": "0.0.0",
     "@flemo/tsconfig": "0.0.0"
   },