@flemo/react 1.7.0 → 1.7.2

package/dist/index.mjs

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

package/package.json

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

package/dist/screen/__tests__/ScreenMotion.shellFirst.test.d.ts

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