@seed-design/stackflow 1.1.20 → 1.1.21

package/lib/primitive/GlobalInteraction/GlobalInteraction.js

@@ -1,24 +1,22 @@
-'use client';
-import { jsx } from 'react/jsx-runtime';
-import { composeRefs } from '@radix-ui/react-compose-refs';
-import { mergeProps } from '@seed-design/dom-utils';
-import { Primitive } from '@seed-design/react-primitive';
-import { forwardRef } from 'react';
-import { useGlobalInteraction } from './useGlobalInteraction.js';
-import { GlobalInteractionProvider } from './useGlobalInteractionContext.js';
-
-const GlobalInteraction = forwardRef(
-  (props, ref) => {
-    const api = useGlobalInteraction();
-    return /* @__PURE__ */ jsx(GlobalInteractionProvider, { value: api, children: /* @__PURE__ */ jsx(
-      Primitive.div,
-      {
-        ref: composeRefs(api.stackRef, ref),
-        ...mergeProps(api.stackProps, props)
-      }
-    ) });
-  }
-);
+"use client";
+import { GlobalInteractionProvider } from "./useGlobalInteractionContext.js";
+import { useGlobalInteraction } from "./useGlobalInteraction.js";
+import { mergeProps } from "@seed-design/dom-utils";
+import { Primitive } from "@seed-design/react-primitive";
+import { forwardRef } from "react";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitive/GlobalInteraction/GlobalInteraction.tsx
+var GlobalInteraction = forwardRef((props, ref) => {
+	const api = useGlobalInteraction();
+	return /* @__PURE__ */ jsx(GlobalInteractionProvider, {
+		value: api,
+		children: /* @__PURE__ */ jsx(Primitive.div, {
+			ref: composeRefs(api.stackRef, ref),
+			...mergeProps(api.stackProps, props)
+		})
+	});
+});
 GlobalInteraction.displayName = "GlobalInteraction";
-
+//#endregion
 export { GlobalInteraction };

package/lib/primitive/GlobalInteraction/animation.cjs

@@ -0,0 +1,303 @@
+"use client";
+const require_constants = require("./constants.cjs");
+const require_dom = require("./dom.cjs");
+//#region src/primitive/GlobalInteraction/animation.ts
+var IOS_EASING = "cubic-bezier(0.2, 0.1, 0.21, 0.99)";
+var IOS_DURATION = 350;
+var ANDROID_ENTER_EASING = "cubic-bezier(0.23, 0.1, 0.32, 1)";
+var ANDROID_ENTER_DURATION = 300;
+var ANDROID_EXIT_EASING = "linear";
+var ANDROID_EXIT_DURATION = 150;
+var FADE_IN_ENTER_EASING = "ease-out";
+var FADE_IN_ENTER_DURATION = 300;
+var FADE_IN_EXIT_EASING = "ease-in";
+var FADE_IN_EXIT_DURATION = 150;
+var FINISHED_TIMEOUT_MARGIN = 100;
+function safeAnimate(el, keyframes, options) {
+	if (!el) return null;
+	return el.animate(keyframes, options);
+}
+/**
+* Snap the app-bar background element transform during an interactive gesture
+* (e.g. swipe-back). Reuses a single Animation by swapping its keyframes each
+* call — recreating on every touchmove would cancel-then-recreate and cause a
+* visible flicker.
+*/
+function scrubAppBarBackground(el, transform, prev) {
+	if (prev && prev.effect instanceof KeyframeEffect) try {
+		prev.effect.setKeyframes([{ transform }]);
+		return prev;
+	} catch {
+		prev.cancel();
+	}
+	return safeAnimate(el, [{ transform }], {
+		duration: 1,
+		fill: "forwards"
+	});
+}
+function cancelAll(animations) {
+	for (const a of animations) try {
+		a?.cancel();
+	} catch {}
+}
+/**
+* Resolve when the animation finishes or `timeoutMs` elapses, whichever
+* comes first. Uses `Animation.finished` when available (Chrome 84+,
+* Safari 13.1+, Firefox 110+) and falls back to `onfinish` / `oncancel`
+* listeners for older browsers (e.g. Chrome 77). Both the timer and the
+* listeners are always cleaned up on the losing side of the race, so a
+* late-firing animation cannot invoke a stale callback or leak via
+* closure-retained Animation references.
+*/
+function waitOne(a, timeoutMs) {
+	const maybeFinished = a.finished;
+	if (maybeFinished && typeof maybeFinished.then === "function") return new Promise((resolve) => {
+		let settled = false;
+		const finish = () => {
+			if (settled) return;
+			settled = true;
+			clearTimeout(timer);
+			resolve();
+		};
+		const timer = setTimeout(finish, timeoutMs);
+		maybeFinished.then(finish, finish);
+	});
+	return new Promise((resolve) => {
+		let settled = false;
+		const finish = () => {
+			if (settled) return;
+			settled = true;
+			try {
+				a.onfinish = null;
+				a.oncancel = null;
+			} catch {}
+			clearTimeout(timer);
+			resolve();
+		};
+		a.onfinish = finish;
+		a.oncancel = finish;
+		const timer = setTimeout(finish, timeoutMs);
+	});
+}
+function waitAll(animations, durationMs) {
+	const valid = animations.filter((a) => a !== null);
+	if (valid.length === 0) return Promise.resolve();
+	const timeout = durationMs + FINISHED_TIMEOUT_MARGIN;
+	return Promise.all(valid.map((a) => waitOne(a, timeout))).then(() => {});
+}
+function collectAnimations(anims, durationMs) {
+	const animations = anims.filter((a) => a !== null);
+	return {
+		animations,
+		finished: waitAll(animations, durationMs)
+	};
+}
+var IOS_ONSCREEN = {
+	topLayer: "translate3d(0, 0, 0)",
+	behindLayer: `translate3d(-30%, 0, 0)`,
+	dim: "1",
+	topTitle: {
+		opacity: "1",
+		transform: "translate3d(0, 0, 0)"
+	},
+	behindTitle: {
+		opacity: "0",
+		transform: `translate3d(-25%, 0, 0)`
+	},
+	topIconOpacity: "1",
+	behindIconOpacity: "0",
+	appBarBackground: "translate3d(0, 0, 0)"
+};
+var IOS_OFFSCREEN = {
+	topLayer: "translate3d(100%, 0, 0)",
+	behindLayer: "translate3d(0, 0, 0)",
+	dim: "0",
+	topTitle: {
+		opacity: "0",
+		transform: `translate3d(25%, 0, 0)`
+	},
+	behindTitle: {
+		opacity: "1",
+		transform: "translate3d(0, 0, 0)"
+	},
+	topIconOpacity: "0",
+	behindIconOpacity: "1",
+	appBarBackground: "translate3d(100%, 0, 0)"
+};
+function iosAnimate(t, from, to) {
+	const opts = {
+		duration: IOS_DURATION,
+		easing: IOS_EASING,
+		fill: "forwards"
+	};
+	const anims = [];
+	anims.push(safeAnimate(t.topLayer, [{ transform: from.topLayer }, { transform: to.topLayer }], opts));
+	anims.push(safeAnimate(t.behindLayer, [{ transform: from.behindLayer }, { transform: to.behindLayer }], opts));
+	anims.push(safeAnimate(t.topDim, [{ opacity: from.dim }, { opacity: to.dim }], opts));
+	anims.push(safeAnimate(t.topTitle, [from.topTitle, to.topTitle], opts));
+	anims.push(safeAnimate(t.behindTitle, [from.behindTitle, to.behindTitle], opts));
+	for (const icon of t.topIcons) anims.push(safeAnimate(icon, [{
+		opacity: from.topIconOpacity,
+		transform: from.topTitle.transform
+	}, {
+		opacity: to.topIconOpacity,
+		transform: to.topTitle.transform
+	}], opts));
+	for (const icon of t.behindIcons) anims.push(safeAnimate(icon, [{ opacity: from.behindIconOpacity }, { opacity: to.behindIconOpacity }], opts));
+	anims.push(safeAnimate(t.topAppBarBackground, [{ transform: from.appBarBackground }, { transform: to.appBarBackground }], opts));
+	return collectAnimations(anims, IOS_DURATION);
+}
+/**
+* Pin every iOS transition target to the given position with inline styles
+* before the animation starts. Prevents a one-frame flash at the final
+* position when the browser paints between React commit and animation
+* commit, and guarantees a known start state when the previous transition's
+* finish handler did not run (e.g. in browsers without Animation.finished
+* support, where the polyfill could time out).
+*/
+function pinIosInlineStyles(t, pos) {
+	require_dom.setTransform(t.topLayer, pos.topLayer);
+	require_dom.setTransform(t.behindLayer, pos.behindLayer);
+	require_dom.setOpacity(t.topDim, pos.dim);
+	require_dom.setTransform(t.topAppBarBackground, pos.appBarBackground);
+	require_dom.setOpacity(t.topTitle, pos.topTitle.opacity);
+	require_dom.setTransform(t.topTitle, pos.topTitle.transform);
+	require_dom.setOpacity(t.behindTitle, pos.behindTitle.opacity);
+	require_dom.setTransform(t.behindTitle, pos.behindTitle.transform);
+	for (const icon of t.topIcons) {
+		require_dom.setOpacity(icon, pos.topIconOpacity);
+		require_dom.setTransform(icon, pos.topTitle.transform);
+	}
+	for (const icon of t.behindIcons) require_dom.setOpacity(icon, pos.behindIconOpacity);
+}
+function iosAnimatePush(t) {
+	pinIosInlineStyles(t, IOS_OFFSCREEN);
+	return iosAnimate(t, IOS_OFFSCREEN, IOS_ONSCREEN);
+}
+function iosAnimatePop(t) {
+	return iosAnimate(t, IOS_ONSCREEN, IOS_OFFSCREEN);
+}
+function androidAnimate(t, direction) {
+	const isPush = direction === "push";
+	const duration = isPush ? ANDROID_ENTER_DURATION : ANDROID_EXIT_DURATION;
+	const opts = {
+		duration,
+		easing: isPush ? ANDROID_ENTER_EASING : ANDROID_EXIT_EASING,
+		fill: "forwards"
+	};
+	if (isPush) {
+		require_dom.setOpacity(t.topLayer, "0");
+		require_dom.setTransform(t.topLayer, "translate3d(0, 8vh, 0)");
+		require_dom.setOpacity(t.topDim, "0");
+		if (t.topAppBarRoot) {
+			require_dom.setOpacity(t.topAppBarRoot, "0");
+			require_dom.setTransform(t.topAppBarRoot, "translate3d(0, 8vh, 0)");
+		}
+	} else {
+		require_dom.setOpacity(t.topLayer, "1");
+		require_dom.setTransform(t.topLayer, "translate3d(0, 0, 0)");
+		if (t.topAppBarRoot) {
+			require_dom.setOpacity(t.topAppBarRoot, "1");
+			require_dom.setTransform(t.topAppBarRoot, "translate3d(0, 0, 0)");
+		}
+		if (t.behindAppBarRoot) t.behindAppBarRoot.style.opacity = "";
+	}
+	const [fromOpacity, toOpacity] = isPush ? ["0", "1"] : ["1", "0"];
+	const [fromY, toY] = isPush ? ["8vh", "0"] : ["0", "8vh"];
+	const shared = [{
+		opacity: fromOpacity,
+		transform: `translate3d(0, ${fromY}, 0)`
+	}, {
+		opacity: toOpacity,
+		transform: `translate3d(0, ${toY}, 0)`
+	}];
+	const dimFrames = [{
+		opacity: fromOpacity,
+		transform: `translate3d(0, ${isPush ? "-8vh" : "0"}, 0)`
+	}, {
+		opacity: toOpacity,
+		transform: `translate3d(0, ${isPush ? "0" : "-8vh"}, 0)`
+	}];
+	return collectAnimations([
+		safeAnimate(t.topLayer, shared, opts),
+		safeAnimate(t.topDim, dimFrames, opts),
+		safeAnimate(t.topAppBarRoot, shared, opts)
+	], duration);
+}
+function fadeInAnimate(t, direction) {
+	const isPush = direction === "push";
+	const duration = isPush ? FADE_IN_ENTER_DURATION : FADE_IN_EXIT_DURATION;
+	const opts = {
+		duration,
+		easing: isPush ? FADE_IN_ENTER_EASING : FADE_IN_EXIT_EASING,
+		fill: "forwards"
+	};
+	if (isPush) {
+		require_dom.setOpacity(t.topLayer, "0");
+		if (t.topAppBarRoot) require_dom.setOpacity(t.topAppBarRoot, "0");
+	} else {
+		require_dom.setOpacity(t.topLayer, "1");
+		if (t.topAppBarRoot) require_dom.setOpacity(t.topAppBarRoot, "1");
+		if (t.behindAppBarRoot) t.behindAppBarRoot.style.opacity = "";
+	}
+	const frames = [{ opacity: isPush ? "0" : "1" }, { opacity: isPush ? "1" : "0" }];
+	return collectAnimations([safeAnimate(t.topLayer, frames, opts), safeAnimate(t.topAppBarRoot, frames, opts)], duration);
+}
+function animateSwipe(t, displacement, duration, end) {
+	const ratio = displacement / window.innerWidth;
+	const topFade = Math.max(0, 1 - ratio * 3);
+	const opts = {
+		duration,
+		easing: IOS_EASING,
+		fill: "forwards"
+	};
+	const currentBehind = `translate3d(calc(-30% + ${displacement * require_constants.BEHIND_PARALLAX}px), 0, 0)`;
+	const currentTitleOffset = `translate3d(${displacement * require_constants.TITLE_TRANSLATE_RATIO}px, 0, 0)`;
+	const currentBehindTitle = `translate3d(calc(-25% + ${displacement * require_constants.TITLE_TRANSLATE_RATIO}px), 0, 0)`;
+	const anims = [
+		safeAnimate(t.topLayer, [{ transform: `translate3d(${displacement}px, 0, 0)` }, { transform: end.topLayer }], opts),
+		safeAnimate(t.behindLayer, [{ transform: currentBehind }, { transform: end.behindLayer }], opts),
+		safeAnimate(t.topDim, [{ opacity: `${1 - ratio}` }, { opacity: end.dim }], opts),
+		safeAnimate(t.topTitle, [{
+			opacity: `${topFade}`,
+			transform: currentTitleOffset
+		}, end.topTitle], opts),
+		safeAnimate(t.behindTitle, [{
+			opacity: `${ratio}`,
+			transform: currentBehindTitle
+		}, end.behindTitle], opts)
+	];
+	for (const icon of t.topIcons) anims.push(safeAnimate(icon, [{
+		opacity: `${topFade}`,
+		transform: currentTitleOffset
+	}, {
+		opacity: end.topIconOpacity,
+		transform: end.topTitle.transform
+	}], opts));
+	for (const icon of t.behindIcons) anims.push(safeAnimate(icon, [{ opacity: `${ratio}` }, { opacity: end.behindIconOpacity }], opts));
+	anims.push(safeAnimate(t.topAppBarBackground, [{ transform: `translate3d(${displacement}px, 0, 0)` }, { transform: end.appBarBackground }], opts));
+	return collectAnimations(anims, duration);
+}
+function animateTransition(targets, direction, style) {
+	switch (style) {
+		case "slideFromRightIOS": return direction === "push" ? iosAnimatePush(targets) : iosAnimatePop(targets);
+		case "fadeFromBottomAndroid": return androidAnimate(targets, direction);
+		case "fadeIn": return fadeInAnimate(targets, direction);
+		default: return {
+			animations: [],
+			finished: Promise.resolve()
+		};
+	}
+}
+function animateSwipeComplete(t, displacement) {
+	return animateSwipe(t, displacement, IOS_DURATION, IOS_OFFSCREEN);
+}
+function animateSwipeCancel(t, displacement) {
+	return animateSwipe(t, displacement, IOS_DURATION, IOS_ONSCREEN);
+}
+//#endregion
+exports.animateSwipeCancel = animateSwipeCancel;
+exports.animateSwipeComplete = animateSwipeComplete;
+exports.animateTransition = animateTransition;
+exports.cancelAll = cancelAll;
+exports.scrubAppBarBackground = scrubAppBarBackground;

package/lib/primitive/GlobalInteraction/animation.d.ts

@@ -0,0 +1,16 @@
+import { TransitionTargets, TransitionStyle } from './dom';
+/**
+ * Snap the app-bar background element transform during an interactive gesture
+ * (e.g. swipe-back). Reuses a single Animation by swapping its keyframes each
+ * call — recreating on every touchmove would cancel-then-recreate and cause a
+ * visible flicker.
+ */
+export declare function scrubAppBarBackground(el: HTMLElement | null, transform: string, prev: Animation | null): Animation | null;
+export declare function cancelAll(animations: (Animation | null)[]): void;
+export type AnimationResult = {
+    animations: Animation[];
+    finished: Promise<void>;
+};
+export declare function animateTransition(targets: TransitionTargets, direction: "push" | "pop", style: TransitionStyle): AnimationResult;
+export declare function animateSwipeComplete(t: TransitionTargets, displacement: number): AnimationResult;
+export declare function animateSwipeCancel(t: TransitionTargets, displacement: number): AnimationResult;

package/lib/primitive/GlobalInteraction/animation.js

@@ -0,0 +1,299 @@
+"use client";
+import { BEHIND_PARALLAX, TITLE_TRANSLATE_RATIO } from "./constants.js";
+import { setOpacity, setTransform } from "./dom.js";
+//#region src/primitive/GlobalInteraction/animation.ts
+var IOS_EASING = "cubic-bezier(0.2, 0.1, 0.21, 0.99)";
+var IOS_DURATION = 350;
+var ANDROID_ENTER_EASING = "cubic-bezier(0.23, 0.1, 0.32, 1)";
+var ANDROID_ENTER_DURATION = 300;
+var ANDROID_EXIT_EASING = "linear";
+var ANDROID_EXIT_DURATION = 150;
+var FADE_IN_ENTER_EASING = "ease-out";
+var FADE_IN_ENTER_DURATION = 300;
+var FADE_IN_EXIT_EASING = "ease-in";
+var FADE_IN_EXIT_DURATION = 150;
+var FINISHED_TIMEOUT_MARGIN = 100;
+function safeAnimate(el, keyframes, options) {
+	if (!el) return null;
+	return el.animate(keyframes, options);
+}
+/**
+* Snap the app-bar background element transform during an interactive gesture
+* (e.g. swipe-back). Reuses a single Animation by swapping its keyframes each
+* call — recreating on every touchmove would cancel-then-recreate and cause a
+* visible flicker.
+*/
+function scrubAppBarBackground(el, transform, prev) {
+	if (prev && prev.effect instanceof KeyframeEffect) try {
+		prev.effect.setKeyframes([{ transform }]);
+		return prev;
+	} catch {
+		prev.cancel();
+	}
+	return safeAnimate(el, [{ transform }], {
+		duration: 1,
+		fill: "forwards"
+	});
+}
+function cancelAll(animations) {
+	for (const a of animations) try {
+		a?.cancel();
+	} catch {}
+}
+/**
+* Resolve when the animation finishes or `timeoutMs` elapses, whichever
+* comes first. Uses `Animation.finished` when available (Chrome 84+,
+* Safari 13.1+, Firefox 110+) and falls back to `onfinish` / `oncancel`
+* listeners for older browsers (e.g. Chrome 77). Both the timer and the
+* listeners are always cleaned up on the losing side of the race, so a
+* late-firing animation cannot invoke a stale callback or leak via
+* closure-retained Animation references.
+*/
+function waitOne(a, timeoutMs) {
+	const maybeFinished = a.finished;
+	if (maybeFinished && typeof maybeFinished.then === "function") return new Promise((resolve) => {
+		let settled = false;
+		const finish = () => {
+			if (settled) return;
+			settled = true;
+			clearTimeout(timer);
+			resolve();
+		};
+		const timer = setTimeout(finish, timeoutMs);
+		maybeFinished.then(finish, finish);
+	});
+	return new Promise((resolve) => {
+		let settled = false;
+		const finish = () => {
+			if (settled) return;
+			settled = true;
+			try {
+				a.onfinish = null;
+				a.oncancel = null;
+			} catch {}
+			clearTimeout(timer);
+			resolve();
+		};
+		a.onfinish = finish;
+		a.oncancel = finish;
+		const timer = setTimeout(finish, timeoutMs);
+	});
+}
+function waitAll(animations, durationMs) {
+	const valid = animations.filter((a) => a !== null);
+	if (valid.length === 0) return Promise.resolve();
+	const timeout = durationMs + FINISHED_TIMEOUT_MARGIN;
+	return Promise.all(valid.map((a) => waitOne(a, timeout))).then(() => {});
+}
+function collectAnimations(anims, durationMs) {
+	const animations = anims.filter((a) => a !== null);
+	return {
+		animations,
+		finished: waitAll(animations, durationMs)
+	};
+}
+var IOS_ONSCREEN = {
+	topLayer: "translate3d(0, 0, 0)",
+	behindLayer: `translate3d(-30%, 0, 0)`,
+	dim: "1",
+	topTitle: {
+		opacity: "1",
+		transform: "translate3d(0, 0, 0)"
+	},
+	behindTitle: {
+		opacity: "0",
+		transform: `translate3d(-25%, 0, 0)`
+	},
+	topIconOpacity: "1",
+	behindIconOpacity: "0",
+	appBarBackground: "translate3d(0, 0, 0)"
+};
+var IOS_OFFSCREEN = {
+	topLayer: "translate3d(100%, 0, 0)",
+	behindLayer: "translate3d(0, 0, 0)",
+	dim: "0",
+	topTitle: {
+		opacity: "0",
+		transform: `translate3d(25%, 0, 0)`
+	},
+	behindTitle: {
+		opacity: "1",
+		transform: "translate3d(0, 0, 0)"
+	},
+	topIconOpacity: "0",
+	behindIconOpacity: "1",
+	appBarBackground: "translate3d(100%, 0, 0)"
+};
+function iosAnimate(t, from, to) {
+	const opts = {
+		duration: IOS_DURATION,
+		easing: IOS_EASING,
+		fill: "forwards"
+	};
+	const anims = [];
+	anims.push(safeAnimate(t.topLayer, [{ transform: from.topLayer }, { transform: to.topLayer }], opts));
+	anims.push(safeAnimate(t.behindLayer, [{ transform: from.behindLayer }, { transform: to.behindLayer }], opts));
+	anims.push(safeAnimate(t.topDim, [{ opacity: from.dim }, { opacity: to.dim }], opts));
+	anims.push(safeAnimate(t.topTitle, [from.topTitle, to.topTitle], opts));
+	anims.push(safeAnimate(t.behindTitle, [from.behindTitle, to.behindTitle], opts));
+	for (const icon of t.topIcons) anims.push(safeAnimate(icon, [{
+		opacity: from.topIconOpacity,
+		transform: from.topTitle.transform
+	}, {
+		opacity: to.topIconOpacity,
+		transform: to.topTitle.transform
+	}], opts));
+	for (const icon of t.behindIcons) anims.push(safeAnimate(icon, [{ opacity: from.behindIconOpacity }, { opacity: to.behindIconOpacity }], opts));
+	anims.push(safeAnimate(t.topAppBarBackground, [{ transform: from.appBarBackground }, { transform: to.appBarBackground }], opts));
+	return collectAnimations(anims, IOS_DURATION);
+}
+/**
+* Pin every iOS transition target to the given position with inline styles
+* before the animation starts. Prevents a one-frame flash at the final
+* position when the browser paints between React commit and animation
+* commit, and guarantees a known start state when the previous transition's
+* finish handler did not run (e.g. in browsers without Animation.finished
+* support, where the polyfill could time out).
+*/
+function pinIosInlineStyles(t, pos) {
+	setTransform(t.topLayer, pos.topLayer);
+	setTransform(t.behindLayer, pos.behindLayer);
+	setOpacity(t.topDim, pos.dim);
+	setTransform(t.topAppBarBackground, pos.appBarBackground);
+	setOpacity(t.topTitle, pos.topTitle.opacity);
+	setTransform(t.topTitle, pos.topTitle.transform);
+	setOpacity(t.behindTitle, pos.behindTitle.opacity);
+	setTransform(t.behindTitle, pos.behindTitle.transform);
+	for (const icon of t.topIcons) {
+		setOpacity(icon, pos.topIconOpacity);
+		setTransform(icon, pos.topTitle.transform);
+	}
+	for (const icon of t.behindIcons) setOpacity(icon, pos.behindIconOpacity);
+}
+function iosAnimatePush(t) {
+	pinIosInlineStyles(t, IOS_OFFSCREEN);
+	return iosAnimate(t, IOS_OFFSCREEN, IOS_ONSCREEN);
+}
+function iosAnimatePop(t) {
+	return iosAnimate(t, IOS_ONSCREEN, IOS_OFFSCREEN);
+}
+function androidAnimate(t, direction) {
+	const isPush = direction === "push";
+	const duration = isPush ? ANDROID_ENTER_DURATION : ANDROID_EXIT_DURATION;
+	const opts = {
+		duration,
+		easing: isPush ? ANDROID_ENTER_EASING : ANDROID_EXIT_EASING,
+		fill: "forwards"
+	};
+	if (isPush) {
+		setOpacity(t.topLayer, "0");
+		setTransform(t.topLayer, "translate3d(0, 8vh, 0)");
+		setOpacity(t.topDim, "0");
+		if (t.topAppBarRoot) {
+			setOpacity(t.topAppBarRoot, "0");
+			setTransform(t.topAppBarRoot, "translate3d(0, 8vh, 0)");
+		}
+	} else {
+		setOpacity(t.topLayer, "1");
+		setTransform(t.topLayer, "translate3d(0, 0, 0)");
+		if (t.topAppBarRoot) {
+			setOpacity(t.topAppBarRoot, "1");
+			setTransform(t.topAppBarRoot, "translate3d(0, 0, 0)");
+		}
+		if (t.behindAppBarRoot) t.behindAppBarRoot.style.opacity = "";
+	}
+	const [fromOpacity, toOpacity] = isPush ? ["0", "1"] : ["1", "0"];
+	const [fromY, toY] = isPush ? ["8vh", "0"] : ["0", "8vh"];
+	const shared = [{
+		opacity: fromOpacity,
+		transform: `translate3d(0, ${fromY}, 0)`
+	}, {
+		opacity: toOpacity,
+		transform: `translate3d(0, ${toY}, 0)`
+	}];
+	const dimFrames = [{
+		opacity: fromOpacity,
+		transform: `translate3d(0, ${isPush ? "-8vh" : "0"}, 0)`
+	}, {
+		opacity: toOpacity,
+		transform: `translate3d(0, ${isPush ? "0" : "-8vh"}, 0)`
+	}];
+	return collectAnimations([
+		safeAnimate(t.topLayer, shared, opts),
+		safeAnimate(t.topDim, dimFrames, opts),
+		safeAnimate(t.topAppBarRoot, shared, opts)
+	], duration);
+}
+function fadeInAnimate(t, direction) {
+	const isPush = direction === "push";
+	const duration = isPush ? FADE_IN_ENTER_DURATION : FADE_IN_EXIT_DURATION;
+	const opts = {
+		duration,
+		easing: isPush ? FADE_IN_ENTER_EASING : FADE_IN_EXIT_EASING,
+		fill: "forwards"
+	};
+	if (isPush) {
+		setOpacity(t.topLayer, "0");
+		if (t.topAppBarRoot) setOpacity(t.topAppBarRoot, "0");
+	} else {
+		setOpacity(t.topLayer, "1");
+		if (t.topAppBarRoot) setOpacity(t.topAppBarRoot, "1");
+		if (t.behindAppBarRoot) t.behindAppBarRoot.style.opacity = "";
+	}
+	const frames = [{ opacity: isPush ? "0" : "1" }, { opacity: isPush ? "1" : "0" }];
+	return collectAnimations([safeAnimate(t.topLayer, frames, opts), safeAnimate(t.topAppBarRoot, frames, opts)], duration);
+}
+function animateSwipe(t, displacement, duration, end) {
+	const ratio = displacement / window.innerWidth;
+	const topFade = Math.max(0, 1 - ratio * 3);
+	const opts = {
+		duration,
+		easing: IOS_EASING,
+		fill: "forwards"
+	};
+	const currentBehind = `translate3d(calc(-30% + ${displacement * BEHIND_PARALLAX}px), 0, 0)`;
+	const currentTitleOffset = `translate3d(${displacement * TITLE_TRANSLATE_RATIO}px, 0, 0)`;
+	const currentBehindTitle = `translate3d(calc(-25% + ${displacement * TITLE_TRANSLATE_RATIO}px), 0, 0)`;
+	const anims = [
+		safeAnimate(t.topLayer, [{ transform: `translate3d(${displacement}px, 0, 0)` }, { transform: end.topLayer }], opts),
+		safeAnimate(t.behindLayer, [{ transform: currentBehind }, { transform: end.behindLayer }], opts),
+		safeAnimate(t.topDim, [{ opacity: `${1 - ratio}` }, { opacity: end.dim }], opts),
+		safeAnimate(t.topTitle, [{
+			opacity: `${topFade}`,
+			transform: currentTitleOffset
+		}, end.topTitle], opts),
+		safeAnimate(t.behindTitle, [{
+			opacity: `${ratio}`,
+			transform: currentBehindTitle
+		}, end.behindTitle], opts)
+	];
+	for (const icon of t.topIcons) anims.push(safeAnimate(icon, [{
+		opacity: `${topFade}`,
+		transform: currentTitleOffset
+	}, {
+		opacity: end.topIconOpacity,
+		transform: end.topTitle.transform
+	}], opts));
+	for (const icon of t.behindIcons) anims.push(safeAnimate(icon, [{ opacity: `${ratio}` }, { opacity: end.behindIconOpacity }], opts));
+	anims.push(safeAnimate(t.topAppBarBackground, [{ transform: `translate3d(${displacement}px, 0, 0)` }, { transform: end.appBarBackground }], opts));
+	return collectAnimations(anims, duration);
+}
+function animateTransition(targets, direction, style) {
+	switch (style) {
+		case "slideFromRightIOS": return direction === "push" ? iosAnimatePush(targets) : iosAnimatePop(targets);
+		case "fadeFromBottomAndroid": return androidAnimate(targets, direction);
+		case "fadeIn": return fadeInAnimate(targets, direction);
+		default: return {
+			animations: [],
+			finished: Promise.resolve()
+		};
+	}
+}
+function animateSwipeComplete(t, displacement) {
+	return animateSwipe(t, displacement, IOS_DURATION, IOS_OFFSCREEN);
+}
+function animateSwipeCancel(t, displacement) {
+	return animateSwipe(t, displacement, IOS_DURATION, IOS_ONSCREEN);
+}
+//#endregion
+export { animateSwipeCancel, animateSwipeComplete, animateTransition, cancelAll, scrubAppBarBackground };

package/lib/primitive/GlobalInteraction/constants.cjs

@@ -0,0 +1,9 @@
+"use client";
+//#region src/primitive/GlobalInteraction/constants.ts
+/** Behind activity's parallax multiplier applied to swipe displacement. */
+var BEHIND_PARALLAX = .3;
+/** Title translate-X multiplier applied to swipe displacement (px). */
+var TITLE_TRANSLATE_RATIO = .15;
+//#endregion
+exports.BEHIND_PARALLAX = BEHIND_PARALLAX;
+exports.TITLE_TRANSLATE_RATIO = TITLE_TRANSLATE_RATIO;

package/lib/primitive/GlobalInteraction/constants.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Shared numeric constants for WAAPI animations and inline style math.
+ *
+ * Consumers:
+ * - animation.ts (WAAPI keyframes)
+ * - dom.ts (swipe-time inline styles)
+ *
+ * Keeping these in one place prevents drift between the two consumers.
+ */
+/** Behind activity's baseline X offset during iOS slide (percent). */
+export declare const BEHIND_OFFSET_PERCENT = -30;
+/** Behind activity's parallax multiplier applied to swipe displacement. */
+export declare const BEHIND_PARALLAX = 0.3;
+/** Title translate-X multiplier applied to swipe displacement (px). */
+export declare const TITLE_TRANSLATE_RATIO = 0.15;
+/** Top title/icon opacity fade rate during swipe (ratio multiplier). */
+export declare const OPACITY_FADE_MULTIPLIER = 3;
+/** Title X offset at onscreen/offscreen endpoints (percent). */
+export declare const TITLE_OFFSET_PERCENT = 25;