@flemo/core 1.16.0 → 1.17.0

package/dist/index.d.ts

@@ -40,7 +40,7 @@ export { SKIP_ANIMATION_ATTR, type TransitionEngine, type TransitionEngineDeps,
 export { default as createSwipeController } from './core/engine/createSwipeController';
 export { type SwipeController, type SwipeControllerConfig, type SwipeControllerElements, type SharedBarPresenceLike } from './core/engine/createSwipeController';
 export { default as computeBarRiding, type BarRidingInput } from './screen/computeBarRiding';
-export { animHoldKey, scheduleAnimHoldRelease, eagerlyDecodeImages, ANIM_HOLD_RELEASE_BACKSTOP_MS, type AnimHoldInput } from './screen/animStartAnchor';
+export { animHoldKey, scheduleAnimHoldRelease, createAnimHoldCoordinator, eagerlyDecodeImages, ANIM_HOLD_RELEASE_BACKSTOP_MS, type AnimHoldInput, type AnimHoldCoordinator } from './screen/animStartAnchor';
 export { default as observeBarHeight } from './screen/observeBarHeight';
 export { default as observeViewportScrollHeight } from './screen/observeViewportScrollHeight';
 export type { RegisterTransition, TransitionName, TransitionVariant, TransitionVariantValue, TransitionOptions, BaseTransition, Transition, SwipeInfo, SwipeAnimate } from './transition/typing';

package/dist/index.mjs

@@ -552,7 +552,7 @@ var O = (e, t, n) => {
 	let { regexp: r } = i(e);
 	for (let e = t - 1; e >= 0; e--) if (r.test(n[e].pathname)) return t - e;
 	return -1;
-}, k = (e, t) => typeof e == "number" && Number.isFinite(e) ? Math.max(0, Math.trunc(e)) : t, A = async (e, t, n, r) => {
+}, k = (e, t) => typeof e == "number" && Number.isFinite(e) ? Math.max(0, Math.trunc(e)) : t, ie = async (e, t, n, r) => {
 	let i, a = new Promise((t) => {
 		i = e.subscribe(() => t(!0));
 	}), o = new Promise((e) => setTimeout(() => e(!1), 200));
@@ -560,7 +560,7 @@ var O = (e, t, n) => {
 	let s = await Promise.race([a, o]);
 	i(), s && r();
 };
-function ie(e) {
+function ae(e) {
 	let { stores: t, buildPathname: n, driver: r = h(), markSelfInduced: i = v } = e, s = () => t.history.getState().bumpTruncationEpoch(), c = () => {
 		let e = r.readState();
 		if (!e?.id) return null;
@@ -616,7 +616,7 @@ function ie(e) {
 			return g({
 				...C,
 				frameIndex: T + 1
-			}), await A(r, i, v, () => {
+			}), await ie(r, i, v, () => {
 				s(), r.pushState({
 					id: h,
 					index: T + 1,
@@ -681,7 +681,7 @@ function ie(e) {
 			return v(y - 1), g({
 				...w,
 				frameIndex: E
-			}), y <= d ? await A(r, i, y, () => {
+			}), y <= d ? await ie(r, i, y, () => {
 				s(), r.pushState({
 					id: h,
 					index: E,
@@ -690,7 +690,7 @@ function ie(e) {
 					transitionName: p,
 					layoutId: m
 				}, S);
-			}) : await A(r, i, d, () => {
+			}) : await ie(r, i, d, () => {
 				s(), r.replaceState({
 					id: h,
 					index: E,
@@ -757,14 +757,14 @@ function ie(e) {
 }
 //#endregion
 //#region src/navigate/createStepController.ts
-var ae = (e) => {
+var oe = (e) => {
 	let t = e;
 	return t?.step ? t.params ?? {} : null;
-}, oe = (e, t) => {
+}, se = (e, t) => {
 	let n = new URLSearchParams(Object.fromEntries(Object.entries(t).map(([e, t]) => [e, String(t)]))).toString();
 	return n ? `${e}?${n}` : e;
 };
-function se(e) {
+function ce(e) {
 	let { stores: t, driver: n, markSelfInduced: r, buildStepPathname: i, applyParams: s } = e;
 	return {
 		pushStep: async (e) => {
@@ -822,7 +822,7 @@ function se(e) {
 		}
 	};
 }
-function ce(e, t) {
+function le(e, t) {
 	return e.subscribe((e) => {
 		let n = e.state;
 		n?.step && o.addTask(async () => {
@@ -832,7 +832,7 @@ function ce(e, t) {
 }
 //#endregion
 //#region src/transition/store.ts
-function le(t = "cupertino") {
+function ue(t = "cupertino") {
 	return e((e) => ({
 		defaultTransitionName: t,
 		setDefaultTransitionName: (t) => e({ defaultTransitionName: t })
@@ -840,12 +840,12 @@ function le(t = "cupertino") {
 }
 //#endregion
 //#region src/utils/matchesPathname.ts
-function ue(e, t) {
+function de(e, t) {
 	return i(e).regexp.test(t);
 }
 //#endregion
 //#region src/screen/store.ts
-function de() {
+function fe() {
 	return e((e) => ({
 		dragStatus: "IDLE",
 		replaceTransitionStatus: "IDLE",
@@ -876,14 +876,14 @@ function de() {
 }
 //#endregion
 //#region src/core/createRouterScope.ts
-var fe = {
+var pe = {
 	mark: () => {},
 	consume: () => !1
-}, pe = /* @__PURE__ */ new Map();
-function me(e) {
+}, me = /* @__PURE__ */ new Map();
+function he(e) {
 	let { routePaths: t, pathname: n, search: r, defaultTransitionName: i, memory: a, browserDriver: o } = e, c = d() ? void 0 : e.persistKey;
 	if (c) {
-		let e = pe.get(c);
+		let e = me.get(c);
 		if (e) {
 			e.life.alive = !0, e.navigate.getState().setStatus("IDLE"), e.navigate.getState().setTransitionTaskId(null);
 			let t = e.history.getState();
@@ -913,25 +913,25 @@ function me(e) {
 			layoutId: p.layoutId
 		},
 		url: p.pathname
-	}) : o, h = a ? fe : g(), _ = {
+	}) : o, h = a ? pe : g(), _ = {
 		history: s([p], 0),
 		navigate: re(),
-		transition: le(i),
-		screen: de(),
+		transition: ue(i),
+		screen: fe(),
 		driver: m,
 		markSelfInduced: h.mark,
 		consume: h.consume,
 		routerKey: e.routerKey,
 		zoneEntryId: e.zoneEntryId,
-		ownsPathname: (e) => ue(t, e),
+		ownsPathname: (e) => de(t, e),
 		persistent: !!c,
 		life: { alive: !0 }
 	};
-	return c && pe.set(c, _), _;
+	return c && me.set(c, _), _;
 }
 //#endregion
 //#region src/screen/createScreenSelector.ts
-function he(e, t) {
+function ge(e, t) {
 	return e.map((n, r) => ({
 		...n,
 		isActive: r === t,
@@ -944,13 +944,13 @@ function he(e, t) {
 }
 //#endregion
 //#region src/screen/computeScreenFreeze.ts
-function ge(e) {
+function _e(e) {
 	let t = e.status === "COMPLETED" && e.dragStatus === "IDLE";
 	return !e.isActive && t || e.isPrev && e.index - 2 <= e.zIndex && e.replaceTransitionStatus === "IDLE" || e.isPrev && e.index - 2 > e.zIndex;
 }
 //#endregion
 //#region src/transition/createTransition.ts
-function j({ name: e, initial: t, idle: n, enter: r, enterBack: i, exit: a, exitBack: o, options: s }) {
+function A({ name: e, initial: t, idle: n, enter: r, enterBack: i, exit: a, exitBack: o, options: s }) {
 	return {
 		name: e,
 		initial: t,
@@ -971,7 +971,7 @@ function j({ name: e, initial: t, idle: n, enter: r, enterBack: i, exit: a, exit
 }
 //#endregion
 //#region src/transition/createRawTransition.ts
-function _e({ name: e, initial: t, idle: n, pushOnEnter: r, pushOnExit: i, replaceOnEnter: a, replaceOnExit: o, popOnEnter: s, popOnExit: c, completedOnExit: l, completedOnEnter: u, options: d }) {
+function ve({ name: e, initial: t, idle: n, pushOnEnter: r, pushOnExit: i, replaceOnEnter: a, replaceOnExit: o, popOnEnter: s, popOnExit: c, completedOnExit: l, completedOnEnter: u, options: d }) {
 	return {
 		name: e,
 		initial: t,
@@ -992,10 +992,10 @@ function _e({ name: e, initial: t, idle: n, pushOnEnter: r, pushOnExit: i, repla
 }
 //#endregion
 //#region src/transition/cupertino.ts
-var ve = (e, t, n) => {
+var ye = (e, t, n) => {
 	let [r, i] = t, [a, o] = n;
 	return i === r ? a : a + (e - r) / (i - r) * (o - a);
-}, ye = j({
+}, be = A({
 	name: "cupertino",
 	initial: { x: "100%" },
 	idle: {
@@ -1055,7 +1055,7 @@ var ve = (e, t, n) => {
 		swipeDirection: "x",
 		onSwipeStart: async () => !0,
 		onSwipe: (e, t, { animate: n, currentScreen: r, prevScreen: i, onProgress: a }) => {
-			let { offset: o } = t, s = o.x, c = ve(s, [0, window.innerWidth], [0, 100]);
+			let { offset: o } = t, s = o.x, c = ye(s, [0, window.innerWidth], [0, 100]);
 			return a?.(!0, c), n(r, { x: Math.max(0, s) }, { duration: 0 }), n(i, { x: `${-35 + c * .35}%` }, { duration: 0 }), c;
 		},
 		onSwipeEnd: async (e, t, { animate: n, currentScreen: r, prevScreen: i, onStart: a }) => {
@@ -1079,10 +1079,10 @@ var ve = (e, t, n) => {
 			})]), c;
 		}
 	}
-}), be = (e, t, n) => {
+}), xe = (e, t, n) => {
 	let [r, i] = t, [a, o] = n;
 	return i === r ? a : a + (e - r) / (i - r) * (o - a);
-}, xe = j({
+}, Se = A({
 	name: "layout",
 	initial: { opacity: .97 },
 	idle: {
@@ -1110,7 +1110,7 @@ var ve = (e, t, n) => {
 		swipeDirection: "y",
 		onSwipeStart: async () => !0,
 		onSwipe: (e, t, { animate: n, currentScreen: r, onProgress: i }) => {
-			let { offset: a } = t, o = a.y, s = Math.max(0, Math.min(56, o)), c = be(s, [0, 56], [1, .96]), l = Math.max(0, o - 56), u = Math.min(1, l / 160), d = Math.sqrt(u) * 12, f = Math.max(0, s + d), p = Math.min(56, f);
+			let { offset: a } = t, o = a.y, s = Math.max(0, Math.min(56, o)), c = xe(s, [0, 56], [1, .96]), l = Math.max(0, o - 56), u = Math.min(1, l / 160), d = Math.sqrt(u) * 12, f = Math.max(0, s + d), p = Math.min(56, f);
 			return i?.(!0, 100), n(r, {
 				y: f,
 				opacity: c
@@ -1127,7 +1127,7 @@ var ve = (e, t, n) => {
 			}, { duration: .3 })]), c;
 		}
 	}
-}), Se = j({
+}), Ce = A({
 	name: "material",
 	initial: { y: "100%" },
 	idle: {
@@ -1235,7 +1235,7 @@ var ve = (e, t, n) => {
 			})]), c;
 		}
 	}
-}), Ce = j({
+}), we = A({
 	name: "none",
 	initial: {},
 	idle: {
@@ -1258,16 +1258,16 @@ var ve = (e, t, n) => {
 		value: {},
 		options: { duration: 0 }
 	}
-}), M = new Map([
-	["none", Ce],
-	["cupertino", ye],
-	["material", Se],
-	["layout", xe]
+}), j = new Map([
+	["none", we],
+	["cupertino", be],
+	["material", Ce],
+	["layout", Se]
 ]);
 //#endregion
 //#region src/transition/resolveTransition.ts
-function we(e) {
-	return M.get(e) ?? M.get("none");
+function M(e) {
+	return j.get(e) ?? j.get("none");
 }
 //#endregion
 //#region src/transition/decorator/createDecorator.ts
@@ -1405,13 +1405,13 @@ var F = /* @__PURE__ */ new Map(), I = {
 	if (!e) return 0;
 	let t = e.duration;
 	return typeof t == "number" && t >= 0 ? t : 0;
-}, R = (e) => e && typeof e.delay == "number" && e.delay > 0 ? e.delay : 0, je = (e, t) => {
+}, je = (e) => e && typeof e.delay == "number" && e.delay > 0 ? e.delay : 0, Me = (e, t) => {
 	let n = I[t];
 	return n === "self" ? null : n === "initial" ? e.initial : e.variants[n].value;
-}, z = (e, t) => {
-	let n = je(e, t);
+}, R = (e, t) => {
+	let n = Me(e, t);
 	if (n === null) return null;
-	let r = e.variants[t], i = L(r.options), a = R(r.options);
+	let r = e.variants[t], i = L(r.options), a = je(r.options);
 	return i <= 0 && a <= 0 ? null : {
 		from: n,
 		to: r.value,
@@ -1419,7 +1419,7 @@ var F = /* @__PURE__ */ new Map(), I = {
 		delay: a,
 		ease: r.options?.ease
 	};
-}, Me = Ae, Ne = (e) => e.replace(/[^a-zA-Z0-9_-]/g, "_"), Pe = (e) => typeof e == "object" && !!e && !Array.isArray(e), Fe = new Set(/* @__PURE__ */ "opacity.scale.scaleX.scaleY.scaleZ.aspectRatio.columnCount.columns.flex.flexGrow.flexShrink.fontWeight.gridArea.gridColumn.gridColumnEnd.gridColumnStart.gridRow.gridRowEnd.gridRowStart.lineHeight.lineClamp.order.orphans.tabSize.widows.zIndex.zoom.fillOpacity.floodOpacity.stopOpacity.strokeOpacity.strokeDasharray.strokeDashoffset.strokeMiterlimit.strokeWidth".split(".")), Ie = (e, t) => t.startsWith("--") || Fe.has(t) ? `${e}` : t === "rotate" || t === "rotateX" || t === "rotateY" || t === "rotateZ" ? `${e}deg` : `${e}px`, Le = (e, t) => typeof t == "number" ? Ie(t, e) : typeof t == "string" ? t : "", Re = (e) => e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`), ze = new Set([
+}, Ne = Ae, Pe = (e) => e.replace(/[^a-zA-Z0-9_-]/g, "_"), Fe = (e) => typeof e == "object" && !!e && !Array.isArray(e), Ie = new Set(/* @__PURE__ */ "opacity.scale.scaleX.scaleY.scaleZ.aspectRatio.columnCount.columns.flex.flexGrow.flexShrink.fontWeight.gridArea.gridColumn.gridColumnEnd.gridColumnStart.gridRow.gridRowEnd.gridRowStart.lineHeight.lineClamp.order.orphans.tabSize.widows.zIndex.zoom.fillOpacity.floodOpacity.stopOpacity.strokeOpacity.strokeDasharray.strokeDashoffset.strokeMiterlimit.strokeWidth".split(".")), Le = (e, t) => t.startsWith("--") || Ie.has(t) ? `${e}` : t === "rotate" || t === "rotateX" || t === "rotateY" || t === "rotateZ" ? `${e}deg` : `${e}px`, Re = (e, t) => typeof t == "number" ? Le(t, e) : typeof t == "string" ? t : "", ze = (e) => e.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`), Be = new Set([
 	"x",
 	"y",
 	"z",
@@ -1430,7 +1430,7 @@ var F = /* @__PURE__ */ new Map(), I = {
 	"rotateX",
 	"rotateY",
 	"rotateZ"
-]), Be = /^-?0(\.0+)?(px|%|em|rem|vh|vw|vmin|vmax)?$/, Ve = /^-?0(\.0+)?(deg|rad|grad|turn)?$/, He = /^1(\.0+)?$/, Ue = (e, t) => e === "scale" || e === "scaleX" || e === "scaleY" ? t === 1 ? !0 : typeof t == "string" ? He.test(t.trim()) : !1 : e === "rotate" || e === "rotateX" || e === "rotateY" || e === "rotateZ" ? t === 0 ? !0 : typeof t == "string" ? Ve.test(t.trim()) : !1 : t === 0 ? !0 : typeof t == "string" ? Be.test(t.trim()) : !1, We = (e, t) => {
+]), Ve = /^-?0(\.0+)?(px|%|em|rem|vh|vw|vmin|vmax)?$/, He = /^-?0(\.0+)?(deg|rad|grad|turn)?$/, Ue = /^1(\.0+)?$/, We = (e, t) => e === "scale" || e === "scaleX" || e === "scaleY" ? t === 1 ? !0 : typeof t == "string" ? Ue.test(t.trim()) : !1 : e === "rotate" || e === "rotateX" || e === "rotateY" || e === "rotateZ" ? t === 0 ? !0 : typeof t == "string" ? He.test(t.trim()) : !1 : t === 0 ? !0 : typeof t == "string" ? Ve.test(t.trim()) : !1, Ge = (e, t) => {
 	switch (e) {
 		case "x": return `translate3d(${t}, 0, 0)`;
 		case "y": return `translate3d(0, ${t}, 0)`;
@@ -1444,16 +1444,16 @@ var F = /* @__PURE__ */ new Map(), I = {
 		case "rotateY": return `rotateY(${t})`;
 		default: return "";
 	}
-}, Ge = (e) => {
+}, Ke = (e) => {
 	let t = /* @__PURE__ */ new Map(), n = !1, r = /* @__PURE__ */ new Set(), i = (e) => {
-		if (!Pe(e)) return;
+		if (!Fe(e)) return;
 		let n = [];
 		for (let r of Object.keys(e)) {
-			let i = e[r], a = Le(r, i);
-			if (a !== "") if (ze.has(r)) n.push(`${r}:${a}`);
+			let i = e[r], a = Re(r, i);
+			if (a !== "") if (Be.has(r)) n.push(`${r}:${a}`);
 			else {
-				let e = t.get(Re(r)) ?? /* @__PURE__ */ new Set();
-				e.add(a), t.set(Re(r), e);
+				let e = t.get(ze(r)) ?? /* @__PURE__ */ new Set();
+				e.add(a), t.set(ze(r), e);
 			}
 		}
 		r.add(n.sort().join("|"));
@@ -1463,13 +1463,13 @@ var F = /* @__PURE__ */ new Map(), I = {
 	n = r.size > 1;
 	let a = Array.from(t.entries()).filter(([, e]) => e.size > 1).map(([e]) => e);
 	return n && a.push("transform"), a;
-}, B = (e) => {
-	if (!Pe(e)) return [];
+}, z = (e) => {
+	if (!Fe(e)) return [];
 	let t = [], n = !0, r = [];
 	for (let i of Object.keys(e)) {
-		let a = e[i], o = Le(i, a);
-		o !== "" && (ze.has(i) ? (t.push(We(i, o)), Ue(i, a) || (n = !1)) : r.push({
-			property: Re(i),
+		let a = e[i], o = Re(i, a);
+		o !== "" && (Be.has(i) ? (t.push(Ge(i, o)), We(i, a) || (n = !1)) : r.push({
+			property: ze(i),
 			value: o
 		}));
 	}
@@ -1477,7 +1477,7 @@ var F = /* @__PURE__ */ new Map(), I = {
 		property: "transform",
 		value: n ? "none" : t.join(" ")
 	}), r;
-}, V = (e) => e.map((e) => `  ${e.property}: ${e.value};`).join("\n"), H = (e) => Array.isArray(e) ? e.length === 4 && e.every((e) => typeof e == "number") ? `cubic-bezier(${e.join(", ")})` : "linear" : typeof e == "string" ? {
+}, B = (e) => e.map((e) => `  ${e.property}: ${e.value};`).join("\n"), V = (e) => Array.isArray(e) ? e.length === 4 && e.every((e) => typeof e == "number") ? `cubic-bezier(${e.join(", ")})` : "linear" : typeof e == "string" ? {
 	linear: "linear",
 	easeIn: "ease-in",
 	easeOut: "ease-out",
@@ -1487,29 +1487,29 @@ var F = /* @__PURE__ */ new Map(), I = {
 	backIn: "cubic-bezier(0.31, 0.01, 0.66, -0.59)",
 	backOut: "cubic-bezier(0.33, 1.53, 0.69, 0.99)",
 	anticipate: "cubic-bezier(0.36, 0, 0.66, -0.56)"
-}[e] ?? "ease" : "ease", Ke = (e, t) => {
+}[e] ?? "ease" : "ease", qe = (e, t) => {
 	let [n, r] = t.split("-");
 	return `[data-flemo-screen][data-flemo-transition="${e}"][data-flemo-status="${n}"][data-flemo-active="${r}"]`;
-}, qe = (e, t) => {
+}, Je = (e, t) => {
 	let [n, r] = t.split("-");
 	return `[data-flemo-decorator][data-flemo-decorator-name="${e}"][data-flemo-status="${n}"][data-flemo-active="${r}"]`;
-}, Je = (e, t) => {
+}, Ye = (e, t) => {
 	let [n, r] = t.split("-");
 	return `[data-flemo-bar][data-flemo-bar-transition="${e}"][data-flemo-bar-status="${n}"][data-flemo-bar-active="${r}"][data-flemo-bar-riding="true"]`;
-}, Ye = (e, t) => {
+}, Xe = (e, t) => {
 	let [n, r] = t.split("-");
 	return `[data-flemo-part-name="${e}"][data-flemo-status="${n}"][data-flemo-active="${r}"]`;
-}, Xe = (e, t, n) => `flemo-${e}-${Ne(t)}-${n}`, Ze = (e, t, n, r, i, a) => {
-	let o = B(r), s = B(i.value), c = L(i.options), l = R(i.options), u = H(i.options?.ease), d = a(t, n), f = e === "screen" ? `${d},\n${Je(t, n)}` : d;
+}, Ze = (e, t, n) => `flemo-${e}-${Pe(t)}-${n}`, Qe = (e, t, n, r, i, a) => {
+	let o = z(r), s = z(i.value), c = L(i.options), l = je(i.options), u = V(i.options?.ease), d = a(t, n), f = e === "screen" ? `${d},\n${Ye(t, n)}` : d;
 	if (s.length === 0 && o.length === 0) return "";
-	if (c <= 0 && l <= 0) return s.length === 0 ? "" : `${f} {\n${V(s)}\n  animation: none;\n}`;
-	let p = Xe(e, t, n), m = [
+	if (c <= 0 && l <= 0) return s.length === 0 ? "" : `${f} {\n${B(s)}\n  animation: none;\n}`;
+	let p = Ze(e, t, n), m = [
 		`@keyframes ${p} {`,
 		"  from {",
-		V(o).replace(/^/gm, "  "),
+		B(o).replace(/^/gm, "  "),
 		"  }",
 		"  to {",
-		V(s).replace(/^/gm, "  "),
+		B(s).replace(/^/gm, "  "),
 		"  }",
 		"}"
 	].join("\n"), h = [
@@ -1519,15 +1519,15 @@ var F = /* @__PURE__ */ new Map(), I = {
 		l > 0 ? `${l}s` : null,
 		"both"
 	].filter(Boolean).join(" "), g = new Map(o.map((e) => [e.property, e.value])), _ = new Map(s.map((e) => [e.property, e.value])), v = Array.from(new Set([...g.keys(), ..._.keys()])).filter((e) => g.get(e) !== _.get(e)), y = v.length > 0 ? `  will-change: ${v.join(", ")};\n` : "", b = n.split("-")[0];
-	return `${m}\n${`${f} {\n  animation: ${h};\n${y}${b === "PUSHING" || b === "REPLACING" ? "  contain: layout;\n  pointer-events: none;\n" : ""}}`}${e === "screen" && n.endsWith("-false") && Qe(r) && s.length > 0 ? `\n${d}[data-flemo-anim-hold="park"] {\n  animation: none;\n${V(s)}\n}` : ""}${e === "screen" && n.endsWith("-true") && (n.startsWith("PUSHING") || n.startsWith("REPLACING")) && Qe(r) && s.length > 0 ? `\n${d}[data-flemo-anim-hold="park-under"] {\n  animation: none;\n${V(s)}\n}` : ""}`;
-}, Qe = (e) => {
+	return `${m}\n${`${f} {\n  animation: ${h};\n${y}${b === "PUSHING" || b === "REPLACING" ? "  contain: layout;\n  pointer-events: none;\n" : ""}}`}${e === "screen" && n.endsWith("-false") && $e(r) && s.length > 0 ? `\n${d}[data-flemo-anim-hold="park"] {\n  animation: none;\n${B(s)}\n}` : ""}${e === "screen" && n.endsWith("-true") && (n.startsWith("PUSHING") || n.startsWith("REPLACING")) && $e(r) && s.length > 0 ? `\n${d}[data-flemo-anim-hold="park-under"] {\n  animation: none;\n${B(s)}\n}` : ""}`;
+}, $e = (e) => {
 	if (!e) return !1;
 	if (e.opacity === 0) return !0;
 	let t = (e) => typeof e == "string" && e.trim().endsWith("%") && Math.abs(parseFloat(e)) >= 100;
 	return t(e.x) || t(e.y);
-}, $e = (e, t, n, r) => {
-	let i = B(r.value);
-	return i.length === 0 ? "" : `${e(t, n)} {\n${V(i)}\n}`;
+}, H = (e, t, n, r) => {
+	let i = z(r.value);
+	return i.length === 0 ? "" : `${e(t, n)} {\n${B(i)}\n}`;
 }, et = (e, t, n = []) => {
 	let r = [];
 	for (let t of e) {
@@ -1535,35 +1535,35 @@ var F = /* @__PURE__ */ new Map(), I = {
 		for (let n of Ae) {
 			let i = t.variants[n], a = I[n];
 			if (a === "self") {
-				r.push($e(Ke, e, n, i));
+				r.push(H(qe, e, n, i));
 				continue;
 			}
 			let o = a === "initial" ? t.initial : t.variants[a].value;
-			r.push(Ze("screen", e, n, o, i, Ke));
+			r.push(Qe("screen", e, n, o, i, qe));
 		}
 	}
 	for (let e of t) {
 		let t = e.name;
-		for (let n of Me) {
+		for (let n of Ne) {
 			let i = e.variants[n], a = I[n];
 			if (a === "self") {
-				r.push($e(qe, t, n, i));
+				r.push(H(Je, t, n, i));
 				continue;
 			}
 			let o = a === "initial" ? e.initial : e.variants[a].value;
-			r.push(Ze("decorator", t, n, o, i, qe));
+			r.push(Qe("decorator", t, n, o, i, Je));
 		}
 	}
 	for (let e of n) {
 		let t = e.name;
-		for (let n of Me) {
+		for (let n of Ne) {
 			let i = e.variants[n], a = I[n];
 			if (a === "self") {
-				r.push($e(Ye, t, n, i));
+				r.push(H(Xe, t, n, i));
 				continue;
 			}
 			let o = a === "initial" ? e.initial : e.variants[a].value;
-			r.push(Ze("part", t, n, o, i, Ye));
+			r.push(Qe("part", t, n, o, i, Xe));
 		}
 	}
 	return [...r.filter((e) => e.length > 0), tt].join("\n\n");
@@ -1579,14 +1579,14 @@ var F = /* @__PURE__ */ new Map(), I = {
 ].join("\n"), nt = (e, t) => {
 	let n = I[t];
 	if (n === "self") return !1;
-	let r = e.variants[t], i = L(r.options), a = R(r.options);
+	let r = e.variants[t], i = L(r.options), a = je(r.options);
 	if (i <= 0 && a <= 0) return !1;
-	let o = B(n === "initial" ? e.initial : e.variants[n].value), s = B(r.value);
+	let o = z(n === "initial" ? e.initial : e.variants[n].value), s = z(r.value);
 	return o.length > 0 || s.length > 0;
 }, rt = "data-flemo";
 function it() {
 	if (d()) return;
-	let e = et(M.values(), P.values(), F.values()), t = document.head.querySelector(`style[${rt}]`);
+	let e = et(j.values(), P.values(), F.values()), t = document.head.querySelector(`style[${rt}]`);
 	t || (t = document.createElement("style"), t.setAttribute(rt, ""), document.head.appendChild(t)), t.textContent !== e && (t.textContent = e);
 }
 //#endregion
@@ -1598,11 +1598,11 @@ var at = /* @__PURE__ */ new Map(), ot = /* @__PURE__ */ new Map(), st = /* @__P
 	return n <= 0 ? (e.delete(t), !0) : (e.set(t, n), !1);
 };
 function ut(e, t, n = []) {
-	for (let t of e) M.set(t.name, t), ct(at, t.name);
+	for (let t of e) j.set(t.name, t), ct(at, t.name);
 	for (let e of t) P.set(e.name, e), ct(ot, e.name);
 	for (let e of n) F.set(e.name, e), ct(st, e.name);
 	return it(), () => {
-		for (let t of e) lt(at, t.name) && M.delete(t.name);
+		for (let t of e) lt(at, t.name) && j.delete(t.name);
 		for (let e of t) lt(ot, e.name) && P.delete(e.name);
 		for (let e of n) lt(st, e.name) && F.delete(e.name);
 		it();
@@ -1627,7 +1627,7 @@ var ft = () => ({
 	}, i = (e, n) => {
 		let i = t.get(e);
 		if (i) {
-			if (t.delete(e), clearTimeout(i.backstop), e.isConnected) if (n === "end") for (let e of i.decls) i.writeFinal(e);
+			if (t.delete(e), clearTimeout(i.backstop), e.isConnected && n !== "drop") if (n === "end") for (let e of i.decls) i.writeFinal(e);
 			else {
 				let t = getComputedStyle(e);
 				for (let e of i.decls) {
@@ -1681,7 +1681,8 @@ var ft = () => ({
 				t.set(r, l), n === null && (n = e.request(a));
 			});
 		},
-		takeover: (e) => i(e, "current")
+		takeover: (e) => i(e, "current"),
+		cancel: (e) => i(e, "drop")
 	};
 })(), ht = "flemo:motion-driver", gt = "flemo:motion-driver-force", _t = !1, vt = () => {
 	try {
@@ -1737,7 +1738,7 @@ var ft = () => ({
 	let n = W.get(e);
 	n || (n = /* @__PURE__ */ new Set(), W.set(e, n)), n.add(t);
 }, K = (e, t) => {
-	if (e.style.transition = "", t) {
+	if (mt.cancel(e), e.style.transition = "", t) {
 		let n = W.get(e);
 		for (let r of t) e.style.removeProperty(r), n?.delete(r);
 		return;
@@ -1751,9 +1752,9 @@ var ft = () => ({
 	e.style.removeProperty("transform"), e.style.removeProperty("opacity");
 }, q = (e, t, n = {}) => {
 	if (!wt(e)) return Promise.resolve();
-	let r = e, i = B(t);
+	let r = e, i = z(t);
 	if (i.length === 0) return Promise.resolve();
-	let a = typeof n.duration == "number" ? n.duration : 0, o = typeof n.delay == "number" && n.delay > 0 ? n.delay : 0, s = H(n.ease);
+	let a = typeof n.duration == "number" ? n.duration : 0, o = typeof n.delay == "number" && n.delay > 0 ? n.delay : 0, s = V(n.ease);
 	if (a <= 0 && o <= 0) {
 		mt.takeover(r), r.style.transition = "none";
 		for (let e of i) r.style.setProperty(e.property, e.value), G(r, e.property);
@@ -1980,7 +1981,7 @@ var ft = () => ({
 	return !o && s.length === 0 ? "" : c ? "none" : [...o ? [`translate3d(${i}px, ${a}px, 0)`] : [], ...s].join(" ");
 }, Vt = (e) => e.replace(/-([a-z])/g, (e, t) => t.toUpperCase()), Ht = (e) => {
 	let t = {};
-	for (let n of B(e)) t[Vt(n.property)] = n.value;
+	for (let n of z(e)) t[Vt(n.property)] = n.value;
 	return t;
 }, Ut = (e, t) => {
 	if (typeof e.animate != "function") return null;
@@ -1988,7 +1989,7 @@ var ft = () => ({
 		let n = e.animate([Ht(t.from), Ht(t.to)], {
 			duration: Math.max(0, t.duration * 1e3),
 			delay: Math.max(0, t.delay * 1e3),
-			easing: H(t.ease),
+			easing: V(t.ease),
 			fill: "both"
 		});
 		return n.pause(), n.currentTime = 0, n;
@@ -2114,7 +2115,7 @@ function Jt(e) {
 			if (!s || o.pendingTaskIds.some((e) => e !== s) || !U.playerAllowed()) return null;
 			let { scope: c, decorator: l, bars: u } = n();
 			if (!c) return null;
-			let d = we(r), f = z(d, t);
+			let d = M(r), f = R(d, t);
 			if (!f) return null;
 			let p = [], m = Y.join(s, {
 				element: c,
@@ -2134,7 +2135,7 @@ function Jt(e) {
 				t && p.push(t);
 			}
 			if (l && d.decoratorName) {
-				let e = P.get(d.decoratorName), n = e ? z(e, t) : null;
+				let e = P.get(d.decoratorName), n = e ? R(e, t) : null;
 				if (n) {
 					let e = Y.join(s, {
 						element: l,
@@ -2145,7 +2146,7 @@ function Jt(e) {
 				}
 			}
 			for (let e of qt(c, t)) {
-				let n = F.get(e.getAttribute(Gt)), r = n ? z(n, t) : null;
+				let n = F.get(e.getAttribute(Gt)), r = n ? R(n, t) : null;
 				if (!r) continue;
 				let i = Y.join(s, {
 					element: e,
@@ -2190,9 +2191,9 @@ function Jt(e) {
 		let f = () => {
 			let t = e.getTransitionTaskId();
 			t && o.resolveTask(t);
-		}, p = we(r), m = `${a}-true`, h = d.getAttribute(X) === "true";
+		}, p = M(r), m = `${a}-true`, h = d.getAttribute(X) === "true";
 		if (!(!h && nt(p, m))) return queueMicrotask(f), Z;
-		let g = z(p, m), _ = !h && !!g, v = Xe("screen", r, m), y = (e) => {
+		let g = R(p, m), _ = !h && !!g, v = Ze("screen", r, m), y = (e) => {
 			e.target === d && e.animationName === v && (d.removeEventListener("animationend", y), f());
 		};
 		d.addEventListener("animationend", y);
@@ -2309,7 +2310,7 @@ function Qt(e) {
 			current: i,
 			prev: s
 		};
-		let c = Ge(e.getTransition()).join(", ");
+		let c = Ke(e.getTransition()).join(", ");
 		for (let e of i) e.style.willChange = c;
 		for (let e of s) e.style.willChange = c;
 	}, b = () => {
@@ -2416,9 +2417,7 @@ function Qt(e) {
 			r = {
 				current: [],
 				prev: []
-			};
-			for (let e of i.prev) K(e);
-			i = {
+			}, i = {
 				current: [],
 				prev: []
 			}, e.back();
@@ -2505,14 +2504,56 @@ function on(e, t = {}) {
 		i.push(requestAnimationFrame(() => o(e - 1)));
 	}, s = requestAnimationFrame(() => {
 		r = requestAnimationFrame(() => o(t.extraFrames ?? 0));
-	}), c = setTimeout(e, 300);
+	});
+	return () => {
+		n = !0, cancelAnimationFrame(s), r && cancelAnimationFrame(r), i.forEach((e) => cancelAnimationFrame(e));
+	};
+}
+function sn(e, t = {}) {
+	let n = on(e, t), r = setTimeout(e, 300);
 	return () => {
-		n = !0, cancelAnimationFrame(s), r && cancelAnimationFrame(r), i.forEach((e) => cancelAnimationFrame(e)), clearTimeout(c);
+		n(), clearTimeout(r);
 	};
 }
+var cn = "POPPING";
+function ln() {
+	let e = /* @__PURE__ */ new Map(), t = (t, n) => {
+		clearTimeout(n.backstop), e.delete(t);
+		let r = [...n.members];
+		n.members.clear();
+		for (let e of r) e.cancelReadiness(), e.release();
+	}, n = (e) => [...e.members].every((e) => e.ready);
+	return { join: (r, i, a) => {
+		if (!r.startsWith(cn)) return sn(i, a);
+		let o = e.get(r);
+		if (!o) {
+			let n = {
+				members: /* @__PURE__ */ new Set(),
+				backstop: setTimeout(() => t(r, n), 300)
+			};
+			e.set(r, n), o = n;
+		}
+		let s = o, c = {
+			release: i,
+			ready: !1,
+			cancelReadiness: on(() => {
+				c.ready = !0, n(s) && t(r, s);
+			}, a)
+		};
+		return s.members.add(c), () => {
+			if (s.members.has(c)) {
+				if (c.cancelReadiness(), s.members.delete(c), s.members.size === 0) {
+					clearTimeout(s.backstop), e.delete(r);
+					return;
+				}
+				n(s) && t(r, s);
+			}
+		};
+	} };
+}
 //#endregion
 //#region src/screen/observeBarHeight.ts
-function sn(e, t) {
+function un(e, t) {
 	e.offsetHeight > 0 && t(e.offsetHeight);
 	let n = new ResizeObserver(([e]) => {
 		e.contentRect.height > 0 && t(e.contentRect.height);
@@ -2523,14 +2564,14 @@ function sn(e, t) {
 }
 //#endregion
 //#region src/screen/observeViewportScrollHeight.ts
-var cn = 0;
-function ln(e) {
+var dn = 0;
+function fn(e) {
 	let t = 0, n = () => {
 		cancelAnimationFrame(t), t = requestAnimationFrame(() => {
 			let t = document.documentElement.scrollHeight - (window.visualViewport?.height || 0);
 			t = t < 0 ? 0 : t;
-			let n = t - cn;
-			n = n < 0 ? 0 : n, cn ||= t, e(t, n);
+			let n = t - dn;
+			n = n < 0 ? 0 : n, dn ||= t, e(t, n);
 		});
 	};
 	return window.visualViewport?.addEventListener("resize", n), window.visualViewport?.addEventListener("scroll", n), () => {
@@ -2539,7 +2580,7 @@ function ln(e) {
 }
 //#endregion
 //#region src/utils/isOpaqueColor.ts
-function un(e) {
+function pn(e) {
 	let t = e.trim().toLowerCase();
 	if (t === "transparent" || t === "") return !1;
 	if (t.match(/^rgb\(\s*\d+[\s,]+\d+[\s,]+\d+\s*\)$/)) return !0;
@@ -2550,7 +2591,7 @@ function un(e) {
 }
 //#endregion
 //#region src/utils/buildRoutePath.ts
-function dn(e, n) {
+function mn(e, n) {
 	let i = n ?? {}, a = t(e)(Object.fromEntries(Object.entries(i).map(([e, t]) => [e, String(t)]))), o = (typeof e == "string" ? r(e) : e).tokens.filter((e) => e.type === "param").map((e) => e.name), s = Object.fromEntries(Object.entries(i).filter(([e]) => !o.includes(e))), c = new URLSearchParams(s).toString();
 	return {
 		pathname: `${a}${c ? `?${c}` : ""}`,
@@ -2558,4 +2599,4 @@ function dn(e, n) {
 	};
 }
 //#endregion
-export { tn as ANIM_HOLD_RELEASE_BACKSTOP_MS, X as SKIP_ANIMATION_ATTR, o as TaskManger, en as animHoldKey, q as animateInline, Xe as animationName, oe as appendParamsQuery, it as applyTransitionStyles, dn as buildRoutePath, $ as canProgrammaticallyScroll, K as clearInlineAnimation, Ge as collectAnimatedProperties, et as compileTransitionStyles, $t as computeBarRiding, ge as computeScreenFreeze, y as consumeSelfInducedPop, h as createBrowserHistoryDriver, Te as createDecorator, s as createHistoryStore, b as createHistorySync, ne as createMemoryHistoryDriver, re as createNavigateStore, ie as createNavigationController, Oe as createPartTransition, Ee as createRawDecorator, ke as createRawPartTransition, _e as createRawTransition, me as createRouterScope, he as createScreenSelector, de as createScreenStore, g as createSelfPopGuard, se as createStepController, Qt as createSwipeController, j as createTransition, Jt as createTransitionEngine, le as createTransitionStore, ye as cupertino, P as decoratorMap, an as eagerlyDecodeImages, H as easingToCss, ee as ensureScopeHistorySync, f as ensureWindowHistoryState, dt as enteringInitialStyle, Yt as findScrollable, c as getMatchedPathPattern, l as getParams, un as isOpaqueColor, d as isServer, xe as layout, v as markSelfInducedPop, ue as matchesPathname, Se as material, Ce as none, sn as observeBarHeight, ln as observeViewportScrollHeight, Q as overflowsAxis, De as overlay, F as partTransitionMap, ae as readStepParams, ut as registerTransitionDefinitions, te as releaseScopeHistorySync, we as resolveTransition, on as scheduleAnimHoldRelease, u as seedInitialHistory, p as seedRouterEntry, ce as subscribeStepParamsRestore, B as targetToDecls, M as transitionMap, nt as variantHasAnimation };
+export { tn as ANIM_HOLD_RELEASE_BACKSTOP_MS, X as SKIP_ANIMATION_ATTR, o as TaskManger, en as animHoldKey, q as animateInline, Ze as animationName, se as appendParamsQuery, it as applyTransitionStyles, mn as buildRoutePath, $ as canProgrammaticallyScroll, K as clearInlineAnimation, Ke as collectAnimatedProperties, et as compileTransitionStyles, $t as computeBarRiding, _e as computeScreenFreeze, y as consumeSelfInducedPop, ln as createAnimHoldCoordinator, h as createBrowserHistoryDriver, Te as createDecorator, s as createHistoryStore, b as createHistorySync, ne as createMemoryHistoryDriver, re as createNavigateStore, ae as createNavigationController, Oe as createPartTransition, Ee as createRawDecorator, ke as createRawPartTransition, ve as createRawTransition, he as createRouterScope, ge as createScreenSelector, fe as createScreenStore, g as createSelfPopGuard, ce as createStepController, Qt as createSwipeController, A as createTransition, Jt as createTransitionEngine, ue as createTransitionStore, be as cupertino, P as decoratorMap, an as eagerlyDecodeImages, V as easingToCss, ee as ensureScopeHistorySync, f as ensureWindowHistoryState, dt as enteringInitialStyle, Yt as findScrollable, c as getMatchedPathPattern, l as getParams, pn as isOpaqueColor, d as isServer, Se as layout, v as markSelfInducedPop, de as matchesPathname, Ce as material, we as none, un as observeBarHeight, fn as observeViewportScrollHeight, Q as overflowsAxis, De as overlay, F as partTransitionMap, oe as readStepParams, ut as registerTransitionDefinitions, te as releaseScopeHistorySync, M as resolveTransition, sn as scheduleAnimHoldRelease, u as seedInitialHistory, p as seedRouterEntry, le as subscribeStepParamsRestore, z as targetToDecls, j as transitionMap, nt as variantHasAnimation };

package/dist/screen/animStartAnchor.d.ts

@@ -13,4 +13,9 @@ export interface AnimHoldReleaseOptions {
     extraFrames?: number;
     scope?: HTMLElement | null;
 }
+export declare function scheduleAnimHoldReadiness(onReady: () => void, options?: AnimHoldReleaseOptions): () => void;
 export declare function scheduleAnimHoldRelease(release: () => void, options?: AnimHoldReleaseOptions): () => void;
+export interface AnimHoldCoordinator {
+    join(key: string, release: () => void, options?: AnimHoldReleaseOptions): () => void;
+}
+export declare function createAnimHoldCoordinator(): AnimHoldCoordinator;

package/dist/transition/settleScrub.d.ts

@@ -12,6 +12,7 @@ export type SettleWrite = (decl: CssDecl) => void;
 export interface SettleScrubber {
     settle: (element: HTMLElement, decls: CssDecl[], timing: SettleTiming, writeFinal: SettleWrite) => Promise<void> | null;
     takeover: (element: HTMLElement) => void;
+    cancel: (element: HTMLElement) => void;
 }
 export declare const createSettleScrubber: (scheduler?: SettleScheduler) => SettleScrubber;
 declare const settleScrubber: SettleScrubber;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flemo/core",
-  "version": "1.16.0",
+  "version": "1.17.0",
   "description": "Framework-agnostic primitives for flemo: history, navigation, transitions, task manager.",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",