react-native-screen-transitions 4.1.0-beta.0 → 4.1.0-rc.0

package/src/providers/orchestrator/styles/hooks/use-resolved-slot-style-map.tsx

@@ -0,0 +1,65 @@
+import {
+	type SharedValue,
+	useDerivedValue,
+	useSharedValue,
+} from "react-native-reanimated";
+import { NO_PROPS, NO_STYLES } from "../../../../constants";
+import type { NormalizedTransitionInterpolatedStyle } from "../../../../types/animation.types";
+import { useScreenRelationships } from "../../../builder/topology";
+import { useOptionalOrchestratorStore } from "../../orchestrator.provider";
+import {
+	areResettableStatesBySlotEqual,
+	type LocalStyleLayers,
+	type ResettableStyleStatesBySlot,
+	resolveSlotStyles,
+	reuseEqualResolvedSlots,
+} from "../helpers/resolve-slot-styles";
+
+interface UseResolvedStylesMapParams {
+	localStylesMaps: SharedValue<LocalStyleLayers>;
+}
+
+export const useResolvedStylesMap = ({
+	localStylesMaps,
+}: UseResolvedStylesMapParams) => {
+	const { parentScreenKey } = useScreenRelationships();
+	const ancestorStylesMap = useOptionalOrchestratorStore(
+		parentScreenKey,
+		(store) => store.slotsMap,
+	);
+	const previousStyleStatesBySlot =
+		useSharedValue<ResettableStyleStatesBySlot>(NO_PROPS);
+	const previousResolvedStylesMap =
+		useSharedValue<NormalizedTransitionInterpolatedStyle>(NO_STYLES);
+
+	return useDerivedValue<NormalizedTransitionInterpolatedStyle>(() => {
+		"worklet";
+		const { resolvedStylesMap, nextPreviousStyleStatesBySlot } =
+			resolveSlotStyles({
+				localStylesMaps: localStylesMaps.get(),
+				ancestorStylesMap: ancestorStylesMap?.get() ?? NO_STYLES,
+				previousStyleStatesBySlot: previousStyleStatesBySlot.get(),
+			});
+
+		if (
+			!areResettableStatesBySlotEqual(
+				previousStyleStatesBySlot.get(),
+				nextPreviousStyleStatesBySlot,
+			)
+		) {
+			previousStyleStatesBySlot.set(nextPreviousStyleStatesBySlot);
+		}
+
+		const previousResolvedStyles = previousResolvedStylesMap.get();
+		const stableResolvedStylesMap = reuseEqualResolvedSlots({
+			resolvedStylesMap,
+			previousResolvedStylesMap: previousResolvedStyles,
+		});
+
+		if (stableResolvedStylesMap !== previousResolvedStyles) {
+			previousResolvedStylesMap.set(stableResolvedStylesMap);
+		}
+
+		return stableResolvedStylesMap;
+	});
+};

package/src/providers/orchestrator/styles/types.ts

@@ -0,0 +1,13 @@
+import type {
+	NAVIGATION_MASK_CONTAINER_STYLE_ID,
+	NAVIGATION_MASK_ELEMENT_STYLE_ID,
+} from "../../../constants";
+
+export type ScreenSlotName =
+	| "overlay"
+	| "content"
+	| "surface"
+	| "backdrop"
+	| "clip"
+	| typeof NAVIGATION_MASK_CONTAINER_STYLE_ID
+	| typeof NAVIGATION_MASK_ELEMENT_STYLE_ID;

package/src/types/animation.types.ts

@@ -303,7 +303,7 @@ export type TransitionSlotStyle = AnimatedViewStyle | TransitionSlotDefinition;
  *
  * These values are not style slots. They are derived per frame and consumed by
  * the transition runtime. Structural options that change the React tree, such
- * as `navigationMaskEnabled`, must be configured statically on the screen.
+ * as `gestureTracking`, must be configured statically on the screen.
  *
  * If `gestureSensitivity` is derived from the current gesture, prefer
  * `active.gesture.raw` so the sensitivity calculation does not feed back into
@@ -314,6 +314,30 @@ export type TransitionInterpolatorOptions = Omit<
 	"navigationMaskEnabled" | "gestureTracking"
 >;
 
+/** A clipping rectangle in the content layer's local coordinates. */
+export type TransitionClip = {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+} & Pick<
+	ViewStyle,
+	| "borderRadius"
+	| "borderCurve"
+	| "borderTopLeftRadius"
+	| "borderTopRightRadius"
+	| "borderBottomLeftRadius"
+	| "borderBottomRightRadius"
+	| "borderTopStartRadius"
+	| "borderTopEndRadius"
+	| "borderBottomStartRadius"
+	| "borderBottomEndRadius"
+	| "borderStartStartRadius"
+	| "borderStartEndRadius"
+	| "borderEndStartRadius"
+	| "borderEndEndRadius"
+>;
+
 /**
  * Internal normalized slot format.
  * Always uses the explicit `{ style, props }` shape (with Reanimated's full StyleProps).
@@ -329,6 +353,7 @@ export type NormalizedTransitionSlotStyle = {
  * All slots use the explicit `{ style, props }` shape.
  */
 export type NormalizedTransitionInterpolatedStyle = {
+	clip?: { style?: Partial<TransitionClip> };
 	/** Animated style and props for the main screen content view. */
 	content?: NormalizedTransitionSlotStyle;
 	/** Animated style and props for the backdrop layer between screens. */
@@ -345,6 +370,8 @@ export type NormalizedTransitionInterpolatedStyle = {
  * The return type of `screenStyleInterpolator`.
  */
 export type TransitionInterpolatedStyle = {
+	/** Visible rectangle. Omit to disable clipping. Content retains its layout size. */
+	clip?: TransitionClip;
 	/**
 	 * Runtime options for the current frame.
 	 *
@@ -363,12 +390,16 @@ export type TransitionInterpolatedStyle = {
 	content?: TransitionSlotStyle;
 	/** Animated style and props for the backdrop layer between screens. */
 	backdrop?: TransitionSlotStyle;
-	/** Animated style and props for the navigation mask container layer. */
+	/** @deprecated Ignored. Return `clip` geometry instead. */
 	[NAVIGATION_MASK_CONTAINER_STYLE_ID]?: TransitionSlotStyle;
-	/** Animated style and props for the navigation mask element layer. */
+	/** @deprecated Ignored. Return `clip` geometry instead. */
 	[NAVIGATION_MASK_ELEMENT_STYLE_ID]?: TransitionSlotStyle;
 	/** Custom styles/props by id for Transition.View components. */
-	[id: string]: TransitionSlotStyle | TransitionInterpolatorOptions | undefined;
+	[id: string]:
+		| TransitionSlotStyle
+		| TransitionInterpolatorOptions
+		| TransitionClip
+		| undefined;
 };
 
 /**

package/src/types/bounds.types.ts

@@ -87,7 +87,7 @@ export type BoundsNavigationZoomOptions = {
 	 *
 	 * Zoom interpolates from the measured source radius to this value while the
 	 * screen is animating. This controls the visible clipping result regardless
-	 * of whether a navigation mask is enabled.
+	 * of the clipping rectangle.
 	 *
 	 * @default 64
 	 */
@@ -120,13 +120,15 @@ export type BoundsNavigationZoomOptions = {
 
 export type BoundsNavigationZoomStyle = TransitionInterpolatedStyle & {
 	content?: TransitionSlotStyle;
+	/** @deprecated Ignored. Return `clip` geometry instead. */
 	[NAVIGATION_MASK_CONTAINER_STYLE_ID]?: TransitionSlotStyle;
+	/** @deprecated Ignored. Return `clip` geometry instead. */
 	[NAVIGATION_MASK_ELEMENT_STYLE_ID]?: TransitionSlotStyle;
 };
 
 export type BoundsNavigationRevealOptions = {
 	/**
-	 * Destination mask border radius.
+	 * Destination clip border radius.
 	 *
 	 * Reveal interpolates from the measured source border radius to this value.
 	 *
@@ -134,7 +136,7 @@ export type BoundsNavigationRevealOptions = {
 	 */
 	borderRadius?: number;
 	/**
-	 * Whether the reveal mask should use React Native's continuous border curve.
+	 * Whether the reveal clip should use React Native's continuous border curve.
 	 *
 	 * @default true
 	 */
@@ -142,7 +144,7 @@ export type BoundsNavigationRevealOptions = {
 	/**
 	 * Maximum dynamic gesture sensitivity applied by reveal.
 	 *
-	 * Reveal lowers gesture sensitivity as the drag gets deeper so the masked
+	 * Reveal lowers gesture sensitivity as the drag gets deeper so the clipped
 	 * container can keep its source-to-destination handoff stable. This value
 	 * controls the starting/highest sensitivity in that curve.
 	 *
@@ -189,17 +191,7 @@ export type BoundsNavigationRevealOptions = {
 	 * @default true
 	 */
 	disablePointerEventsTillElementTransition?: boolean;
-	/**
-	 * How reveal should resize the navigation mask element.
-	 *
-	 * `"auto"` uses the platform default. Android defaults to transform-based
-	 * resizing to avoid masked-size animation cost, while other platforms animate
-	 * width and height. Transform-based resizing can make large border radii look
-	 * less natural on Android; use `"size"` to force width/height animation when
-	 * radius quality is more important than that optimization.
-	 *
-	 * @default "auto"
-	 */
+	/** @deprecated Ignored. Reveal uses built-in clipping on every platform. */
 	maskSizingMode?: "auto" | "transform" | "size";
 };
 

package/src/types/index.ts

@@ -9,6 +9,7 @@ export type {
 	ScreenTransitionOptions,
 	ScreenTransitionState,
 	ScreenTransitionTarget,
+	TransitionClip,
 	TransitionInterpolatedStyle,
 	TransitionInterpolatorOptions,
 	TransitionSlotProps,

package/src/types/screen.types.ts

@@ -228,14 +228,7 @@ export type ScreenTransitionConfig = {
 	 */
 	transitionSpec?: TransitionSpec;
 
-	/**
-	 * Pre-mounts the masked view wrapper so navigation bounds masking
-	 * (e.g. `bounds().navigation.zoom()`) is ready from the first frame.
-	 *
-	 * Requires `@react-native-masked-view/masked-view` to be installed.
-	 *
-	 * @default false
-	 */
+	/** @deprecated Ignored. Return `clip` from the interpolator to enable clipping. */
 	navigationMaskEnabled?: boolean;
 
 	/**

package/src/utils/animation/animate-to-progress.ts

@@ -1,7 +1,7 @@
 import type { SharedValue } from "react-native-reanimated";
 import { FALSE, TRUE } from "../../constants";
-import { emitMotionStart } from "../../providers/screen/motion/animation/emit-motion-start";
-import type { MotionAnimationValues } from "../../providers/screen/motion/types";
+import { emitMotionStart } from "../../providers/motion/animation/emit-motion-start";
+import type { MotionAnimationValues } from "../../providers/motion/types";
 import type { TransitionSpec } from "../../types/animation.types";
 import { animate, isSpringAnimationConfig } from "./animate";
 

package/src/utils/bounds/navigation/reveal/build.ts

@@ -1,5 +1,4 @@
 import { interpolate } from "react-native-reanimated";
-import { NAVIGATION_MASK_ELEMENT_STYLE_ID } from "../../../../constants";
 import { createBoundsAccessorCore } from "../../helpers/create-bounds-accessor-core";
 import { getSourceBorderRadius } from "../helpers";
 import {
@@ -10,20 +9,19 @@ import {
 	CONTENT_ENTERING_OPACITY_RANGE,
 	CONTENT_SHADOW_OPACITY_OUTPUT,
 	DISMISS_SCALE_ORBIT_DEPTH,
-	DRAG_MASK_HEIGHT_COLLAPSE_END,
-	HORIZONTAL_DRAG_MASK_COLLAPSE_SCALE,
+	DRAG_CLIP_HEIGHT_COLLAPSE_END,
+	HORIZONTAL_DRAG_CLIP_COLLAPSE_SCALE,
 	IDENTITY_DRAG_SCALE_OUTPUT,
 	REVEAL_BACKGROUND_SCALE,
 	REVEAL_BORDER_RADIUS,
 	REVEAL_SHADOW_OFFSET,
-	REVEAL_USES_TRANSFORM_MASK,
 	UNFOCUSED_ELEMENT_OPACITY_OUTPUT,
 	ZERO_TO_ONE_RANGE,
 } from "./config";
 import {
 	interpolateClamped,
 	mixUnit,
-	resolveAspectRatioMaskHeight,
+	resolveAspectRatioClipHeight,
 	resolveDismissScaleHandoff,
 	resolveRevealContentBaseTransform,
 	resolveRevealDirectionalDragScale,
@@ -66,15 +64,10 @@ export function buildRevealStyles({
 		revealOptions?.velocityDepth ?? DISMISS_SCALE_ORBIT_DEPTH;
 	const disablePointerEventsTillElementTransition =
 		revealOptions?.disablePointerEventsTillElementTransition ?? true;
-	const maskSizingMode = revealOptions?.maskSizingMode ?? "auto";
 	const backgroundScale =
 		revealOptions?.backgroundScale ?? REVEAL_BACKGROUND_SCALE;
 	const shouldBackgroundScaleResetOnSettled =
 		revealOptions?.shouldBackgroundScaleResetOnSettled ?? true;
-	const usesTransformMask =
-		maskSizingMode === "auto"
-			? REVEAL_USES_TRANSFORM_MASK
-			: maskSizingMode === "transform";
 
 	const bounds = createBoundsAccessorCore({
 		getProps: () => props,
@@ -140,7 +133,7 @@ export function buildRevealStyles({
 			progress: transitionProgress,
 		});
 
-		const maskRaw = scopedBounds.values({
+		const clipRaw = scopedBounds.values({
 			scaleMode: "uniform",
 			method: "size",
 			space: "absolute",
@@ -148,21 +141,21 @@ export function buildRevealStyles({
 			progress: transitionProgress,
 		});
 
-		const maskBorderRadius = mixUnit(
+		const clipBorderRadius = mixUnit(
 			sourceBorderRadius,
 			borderRadius,
 			activeTransitionProgress,
 		);
-		const maskBorderCurve = borderContinuous
+		const clipBorderCurve = borderContinuous
 			? ("continuous" as const)
 			: undefined;
 
-		const maskSizeMultiplier = props.active.closing
+		const clipSizeMultiplier = props.active.closing
 			? mixUnit(0.9, 1, activeTransitionProgress)
 			: 1;
 
-		const maskWidth = Math.max(1, maskRaw.width * maskSizeMultiplier);
-		const maskHeight = Math.max(1, maskRaw.height * maskSizeMultiplier);
+		const clipWidth = Math.max(1, clipRaw.width * clipSizeMultiplier);
+		const clipHeight = Math.max(1, clipRaw.height * clipSizeMultiplier);
 
 		const contentBaseScale = contentRaw.scale;
 		const safeContentBaseScale = resolveSafeScale(contentBaseScale);
@@ -205,97 +198,72 @@ export function buildRevealStyles({
 			? 1 - activeTransitionProgress
 			: 0;
 
-		const maskHeightCollapseDrag =
+		const clipHeightCollapseDrag =
 			isHorizontalDismiss || isVerticalDismiss
 				? Math.max(
 						0,
 						isHorizontalDismiss
-							? liveHorizontalDismissDrag * HORIZONTAL_DRAG_MASK_COLLAPSE_SCALE
+							? liveHorizontalDismissDrag * HORIZONTAL_DRAG_CLIP_COLLAPSE_SCALE
 							: 0,
 						isVerticalDismiss ? liveVerticalDismissDrag : 0,
 						dismissProgressDrag,
 					)
 				: 0;
 
-		const maskAspectBounds = link.initialSource?.bounds ?? link.source.bounds;
-		const minMaskHeight = resolveAspectRatioMaskHeight({
-			maskWidth,
-			maskHeight,
-			targetWidth: maskAspectBounds.width,
-			targetHeight: maskAspectBounds.height,
+		const clipAspectBounds = link.initialSource?.bounds ?? link.source.bounds;
+		const minClipHeight = resolveAspectRatioClipHeight({
+			clipWidth,
+			clipHeight,
+			targetWidth: clipAspectBounds.width,
+			targetHeight: clipAspectBounds.height,
 		});
 
-		const renderedMaskHeight = interpolateClamped(
-			maskHeightCollapseDrag,
+		const renderedClipHeight = interpolateClamped(
+			clipHeightCollapseDrag,
 			0,
-			DRAG_MASK_HEIGHT_COLLAPSE_END,
-			maskHeight,
-			minMaskHeight,
+			DRAG_CLIP_HEIGHT_COLLAPSE_END,
+			clipHeight,
+			minClipHeight,
 		);
 
-		const maskCenterX = maskWidth / 2;
-		const maskCenterY = renderedMaskHeight / 2;
-		const maskCenteringOffsetX = (maskRaw.width - maskWidth) / 2;
-		const maskCenteringOffsetY = (maskRaw.height - maskHeight) / 2;
+		const clipCenteringOffsetX = (clipRaw.width - clipWidth) / 2;
+		const clipCenteringOffsetY = (clipRaw.height - clipHeight) / 2;
 		const verticalCollapseOffsetY =
 			initialGesture === "vertical-inverted"
-				? maskHeight - renderedMaskHeight
+				? clipHeight - renderedClipHeight
 				: 0;
 
 		const contentCenterX = screenLayout.width / 2;
 		const contentCenterY = screenLayout.height / 2;
 
-		// The mask lives inside the transformed content container. Compensate only
+		// The clip lives inside the transformed content container. Compensate only
 		// for the reveal's base content scale; drag scale should be inherited from
 		// the same parent transform as the screen content.
-		const compensatedMaskTranslateX =
-			(maskRaw.translateX -
+		const compensatedClipTranslateX =
+			(clipRaw.translateX -
 				contentRaw.translateX +
-				maskCenteringOffsetX +
-				(1 - contentBaseScale) * (maskCenterX - contentCenterX)) /
+				clipCenteringOffsetX -
+				(1 - contentBaseScale) * contentCenterX) /
 			safeContentBaseScale;
 
-		const compensatedMaskTranslateY =
-			(maskRaw.translateY -
+		const compensatedClipTranslateY =
+			(clipRaw.translateY -
 				contentRaw.translateY +
-				maskCenteringOffsetY +
-				verticalCollapseOffsetY +
-				(1 - contentBaseScale) * (maskCenterY - contentCenterY)) /
+				clipCenteringOffsetY +
+				verticalCollapseOffsetY -
+				(1 - contentBaseScale) * contentCenterY) /
 			safeContentBaseScale;
 
-		const compensatedMaskScale = 1 / safeContentBaseScale;
-		const maskBaseWidth = Math.max(1, screenLayout.width);
-		const maskBaseHeight = Math.max(1, screenLayout.height);
-		const maskScaleX = maskWidth / maskBaseWidth;
-		const maskScaleY = renderedMaskHeight / maskBaseHeight;
-		const transformMaskTranslateX =
-			compensatedMaskTranslateX + (maskWidth - maskBaseWidth) / 2;
-		const transformMaskTranslateY =
-			compensatedMaskTranslateY + (renderedMaskHeight - maskBaseHeight) / 2;
-		const maskElementStyle = usesTransformMask
-			? {
-					width: maskBaseWidth,
-					height: maskBaseHeight,
-					borderRadius: props.active.settled ? 0 : maskBorderRadius,
-					borderCurve: maskBorderCurve,
-					transform: [
-						{ translateX: transformMaskTranslateX },
-						{ translateY: transformMaskTranslateY },
-						{ scaleX: maskScaleX * compensatedMaskScale },
-						{ scaleY: maskScaleY * compensatedMaskScale },
-					],
-				}
-			: {
-					width: maskWidth,
-					height: renderedMaskHeight,
-					borderRadius: props.active.settled ? 0 : maskBorderRadius,
-					borderCurve: maskBorderCurve,
-					transform: [
-						{ translateX: compensatedMaskTranslateX },
-						{ translateY: compensatedMaskTranslateY },
-						{ scale: compensatedMaskScale },
-					],
-				};
+		const clip = {
+			x: compensatedClipTranslateX,
+			y: compensatedClipTranslateY,
+			width: clipWidth / safeContentBaseScale,
+			height: renderedClipHeight / safeContentBaseScale,
+			borderRadius: props.active.settled
+				? 0
+				: clipBorderRadius / safeContentBaseScale,
+			borderCurve: clipBorderCurve,
+		};
 
 		const elementOffsetX = initialDestinationTarget
 			? initialDestinationTarget.pageX - link.destination.bounds.pageX
@@ -364,9 +332,7 @@ export function buildRevealStyles({
 							),
 				},
 			},
-			[NAVIGATION_MASK_ELEMENT_STYLE_ID]: {
-				style: maskElementStyle,
-			},
+			clip,
 			[link.id]: {
 				style: {
 					transform: [{ translateX: elementTX }, { translateY: elementY }],

package/src/utils/bounds/navigation/reveal/config.ts

@@ -6,13 +6,11 @@ export const REVEAL_BORDER_RADIUS = Platform.select({
 	default: 36,
 });
 
-export const REVEAL_USES_TRANSFORM_MASK = Platform.OS === "android";
-
 export const DRAG_DIRECTIONAL_SCALE_MIN = 0.25;
 export const DRAG_DIRECTIONAL_SCALE_MAX = 1.06;
 export const DRAG_DIRECTIONAL_SCALE_EXPONENT = 2;
-export const DRAG_MASK_HEIGHT_COLLAPSE_END = 0.7;
-export const HORIZONTAL_DRAG_MASK_COLLAPSE_SCALE = 0.5;
+export const DRAG_CLIP_HEIGHT_COLLAPSE_END = 0.7;
+export const HORIZONTAL_DRAG_CLIP_COLLAPSE_SCALE = 0.5;
 export const DISMISS_SCALE_ORBIT_DEPTH = 0.5;
 export const CLOSE_SOURCE_HANDOFF_PROGRESS = 0.25;
 export const REVEAL_BACKGROUND_SCALE = 0.9375;

package/src/utils/bounds/navigation/reveal/math.ts

@@ -153,27 +153,27 @@ export function resolveDismissScaleHandoff({
 	return baseScale * orbitScale;
 }
 
-export function resolveAspectRatioMaskHeight({
-	maskWidth,
-	maskHeight,
+export function resolveAspectRatioClipHeight({
+	clipWidth,
+	clipHeight,
 	targetWidth,
 	targetHeight,
 }: {
-	maskWidth: number;
-	maskHeight: number;
+	clipWidth: number;
+	clipHeight: number;
 	targetWidth: number;
 	targetHeight: number;
 }) {
 	"worklet";
 
-	const safeMaskWidth = Math.max(1, Math.abs(maskWidth));
-	const safeMaskHeight = Math.max(1, Math.abs(maskHeight));
+	const safeClipWidth = Math.max(1, Math.abs(clipWidth));
+	const safeClipHeight = Math.max(1, Math.abs(clipHeight));
 	const safeTargetWidth = Math.max(Math.abs(targetWidth), EPSILON);
 	const safeTargetHeight = Math.max(Math.abs(targetHeight), EPSILON);
 	const targetAspectHeight =
-		safeMaskWidth * (safeTargetHeight / safeTargetWidth);
+		safeClipWidth * (safeTargetHeight / safeTargetWidth);
 
-	return Math.min(safeMaskHeight, Math.max(1, targetAspectHeight));
+	return Math.min(safeClipHeight, Math.max(1, targetAspectHeight));
 }
 
 function getBoundsCenterX(bounds: MeasuredDimensions) {

package/src/utils/bounds/navigation/reveal/types.ts

@@ -1,17 +1,10 @@
-import {
-	NAVIGATION_MASK_CONTAINER_STYLE_ID,
-	NAVIGATION_MASK_ELEMENT_STYLE_ID,
-} from "../../../../constants";
 import type {
 	BoundsInterpolationProps,
 	BoundsNavigationRevealOptions,
 	BoundsNavigationRevealStyle,
 } from "../../../../types/bounds.types";
 
-export type RevealInterpolatedStyle = BoundsNavigationRevealStyle & {
-	[NAVIGATION_MASK_CONTAINER_STYLE_ID]?: BoundsNavigationRevealStyle[typeof NAVIGATION_MASK_CONTAINER_STYLE_ID];
-	[NAVIGATION_MASK_ELEMENT_STYLE_ID]?: BoundsNavigationRevealStyle[typeof NAVIGATION_MASK_ELEMENT_STYLE_ID];
-};
+export type RevealInterpolatedStyle = BoundsNavigationRevealStyle;
 
 export type BuildRevealStylesParams = {
 	tag?: string;

package/src/utils/bounds/navigation/zoom/build.ts

@@ -1,14 +1,12 @@
 import { interpolate } from "react-native-reanimated";
-import {
-	EPSILON,
-	NAVIGATION_MASK_ELEMENT_STYLE_ID,
-} from "../../../../constants";
+import { EPSILON } from "../../../../constants";
 import { getVisualScrollAxisDelta } from "../../../../stores/scroll.store";
 import type { ScrollMetadataState } from "../../../../types/gesture.types";
 import { createBoundsAccessorCore } from "../../helpers/create-bounds-accessor-core";
 import { computeContentTransformGeometry } from "../../helpers/geometry";
 import { getSourceBorderRadius } from "../helpers";
 import { resolveRevealContentBaseTransformFromGeometry } from "../reveal/math";
+import { resolveZoomClip, ZOOM_NAVIGATION_CLIP_BORDER_RADIUS } from "./clip";
 import {
 	ZOOM_BACKDROP_MAX_OPACITY,
 	ZOOM_BACKGROUND_SCALE,
@@ -25,10 +23,6 @@ import {
 	resolveZoomPinchFocalOffset,
 	resolveZoomTrackedSourceTransform,
 } from "./helpers";
-import {
-	resolveZoomNavigationMaskStyle,
-	ZOOM_NAVIGATION_MASK_BORDER_RADIUS,
-} from "./mask";
 import {
 	getZoomContentAnchor,
 	getZoomContentTarget,
@@ -51,7 +45,7 @@ export function buildZoomStyles({
 	const keepFocusedVisible = zoomOptions?.keepFocusedVisible === true;
 	const expandedBorderRadius = Math.max(
 		0,
-		zoomOptions?.borderRadius ?? ZOOM_NAVIGATION_MASK_BORDER_RADIUS,
+		zoomOptions?.borderRadius ?? ZOOM_NAVIGATION_CLIP_BORDER_RADIUS,
 	);
 	const backgroundScale = zoomOptions?.backgroundScale ?? ZOOM_BACKGROUND_SCALE;
 	const backdropColor = zoomOptions?.backdropColor ?? "black";
@@ -60,7 +54,6 @@ export function buildZoomStyles({
 
 	const {
 		active,
-		current,
 		focused,
 		transitionProgress,
 		layouts: { screen: screenLayout },
@@ -178,7 +171,6 @@ export function buildZoomStyles({
 				"vertical",
 			) * sourceScrollWeight;
 		const sourceBorderRadius = getSourceBorderRadius(link);
-		const navigationMaskEnabled = current.options.navigationMaskEnabled;
 		const backdropOpacity = resolveZoomBackdropOpacity({
 			transitionProgress,
 			dismissalDrag: drag.dismissNorm,
@@ -251,21 +243,19 @@ export function buildZoomStyles({
 					overflow: "hidden" as const,
 				},
 			},
-			[NAVIGATION_MASK_ELEMENT_STYLE_ID]: navigationMaskEnabled
-				? resolveZoomNavigationMaskStyle({
-						scopedBounds,
-						link,
-						sourceBounds,
-						screenLayout,
-						transitionProgress,
-						drag,
-						contentTransform: contentRaw,
-						sourceBorderRadius,
-						expandedBorderRadius,
-						active,
-						anchor: zoomContentAnchor,
-					})
-				: {},
+			clip: resolveZoomClip({
+				scopedBounds,
+				link,
+				sourceBounds,
+				screenLayout,
+				transitionProgress,
+				drag,
+				contentTransform: contentRaw,
+				sourceBorderRadius,
+				expandedBorderRadius,
+				active,
+				anchor: zoomContentAnchor,
+			}),
 		};
 	}