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

package/src/components/screen/container/layers/clip.tsx

@@ -0,0 +1,124 @@
+import { memo, useCallback } from "react";
+import {
+	I18nManager,
+	type LayoutChangeEvent,
+	StyleSheet,
+	View,
+	type ViewProps,
+	type ViewStyle,
+} from "react-native";
+import Animated, {
+	useAnimatedStyle,
+	useDerivedValue,
+	useSharedValue,
+} from "react-native-reanimated";
+import { useOrchestratorStore } from "../../../../providers/screen/orchestrator/orchestrator.provider";
+import type { Layout } from "../../../../types/screen.types";
+
+/** Stable layout host: changing the viewport must never resize the screen. */
+export const Clip = memo(
+	({
+		children,
+		pointerEvents,
+	}: {
+		children: React.ReactNode;
+		pointerEvents: ViewProps["pointerEvents"];
+	}) => {
+		const slotsMap = useOrchestratorStore((store) => store.slotsMap);
+		const screenInterpolatorProps = useOrchestratorStore(
+			(store) => store.screenInterpolatorProps,
+		);
+		const layout = useSharedValue<Layout | null>(null);
+
+		const onLayout = useCallback(
+			(event: LayoutChangeEvent) => {
+				const { width, height } = event.nativeEvent.layout;
+				layout.set({ width, height });
+			},
+			[layout],
+		);
+
+		const clippingStyles = useDerivedValue(() => {
+			const clipStyle = slotsMap.get().clip?.style;
+			// Reset-only slots have no rectangle dimensions.
+			const clip =
+				clipStyle?.width !== undefined && clipStyle.height !== undefined
+					? clipStyle
+					: undefined;
+			// Keep content independent of the viewport, even before onLayout.
+			const contentLayout =
+				layout.get() ?? screenInterpolatorProps.get().layouts.screen;
+			const x = clip?.x ?? 0;
+			const y = clip?.y ?? 0;
+
+			return {
+				viewport: {
+					width: clip ? clip.width : "100%",
+					height: clip ? clip.height : "100%",
+					overflow: clip ? "hidden" : "visible",
+					borderRadius: clip?.borderRadius,
+					borderTopLeftRadius: clip?.borderTopLeftRadius,
+					borderTopRightRadius: clip?.borderTopRightRadius,
+					borderBottomLeftRadius: clip?.borderBottomLeftRadius,
+					borderBottomRightRadius: clip?.borderBottomRightRadius,
+					borderTopStartRadius: clip?.borderTopStartRadius,
+					borderTopEndRadius: clip?.borderTopEndRadius,
+					borderBottomStartRadius: clip?.borderBottomStartRadius,
+					borderBottomEndRadius: clip?.borderBottomEndRadius,
+					borderStartStartRadius: clip?.borderStartStartRadius,
+					borderStartEndRadius: clip?.borderStartEndRadius,
+					borderEndStartRadius: clip?.borderEndStartRadius,
+					borderEndEndRadius: clip?.borderEndEndRadius,
+					borderCurve: clip?.borderCurve,
+					transform: [{ translateX: x }, { translateY: y }],
+				} satisfies ViewStyle,
+				content: {
+					width: contentLayout.width,
+					height: contentLayout.height,
+					transform: [{ translateX: -x }, { translateY: -y }],
+				},
+			};
+		});
+
+		const viewportStyle = useAnimatedStyle(() => clippingStyles.get().viewport);
+		const innerStyle = useAnimatedStyle(() => clippingStyles.get().content);
+
+		return (
+			<View
+				style={styles.host}
+				onLayout={onLayout}
+				pointerEvents={pointerEvents}
+				collapsable={false}
+			>
+				<Animated.View
+					style={[styles.viewport, viewportStyle]}
+					pointerEvents={pointerEvents}
+					collapsable={false}
+				>
+					<Animated.View
+						style={[styles.inner, innerStyle]}
+						pointerEvents={pointerEvents}
+						collapsable={false}
+					>
+						{children}
+					</Animated.View>
+				</Animated.View>
+			</View>
+		);
+	},
+);
+
+const styles = StyleSheet.create({
+	host: { flex: 1 },
+	// Pin to the physical left under both native layout directions.
+	viewport: {
+		position: "absolute",
+		top: 0,
+		...(I18nManager.isRTL ? { end: 0 } : { left: 0 }),
+	},
+	inner: {
+		...(I18nManager.isRTL
+			? { alignSelf: "flex-end" as const }
+			: { alignSelf: "flex-start" as const }),
+	},
+});

package/src/components/screen/container/layers/content.tsx

@@ -1,18 +1,16 @@
-import { type ComponentType, memo, useMemo } from "react";
+import { memo } from "react";
 import { StyleSheet, View } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
-import Animated from "react-native-reanimated";
 import { useBuilderStore } from "../../../../providers/screen/builder";
 import { useMotionStore } from "../../../../providers/screen/motion";
 import {
 	useSlotProps,
 	useSlotStyles,
 } from "../../../../providers/screen/orchestrator/styles";
-import type { ScreenContentComponentProps } from "../../../../types";
-import { ScreenFallbackHost } from "../../../boundary/portal/components/boundary-portal/components/host";
+import { PortalOverlay } from "../../../boundary/portal/components/portal-overlay";
+import { LayerComponent } from "../helpers/layer-component";
 import { useContentLayout } from "../hooks/use-content-layout";
-import { MaybeMaskedNavigationContainer } from "./maybe-masked-navigation-container";
-import { usesLayerRenderProps } from "./render-component";
+import { Clip } from "./clip";
 import { SurfaceLayer } from "./surface";
 
 type Props = {
@@ -27,32 +25,17 @@ export const ContentLayer = memo(
 		const ContentComponent = useBuilderStore(
 			(store) => store.options.contentComponent,
 		);
-		const isNavigationMaskEnabled = useBuilderStore(
-			(store) => !!store.options.navigationMaskEnabled,
-		);
 		const hasAutoSnapPoint = useBuilderStore(
 			(store) => store.options.snapPoints?.includes("auto") ?? false,
 		);
 		const contentPointerEvents = isBackdropActive ? "box-none" : pointerEvents;
 
-		const AnimatedContentComponent = useMemo(() => {
-			return ContentComponent && !usesLayerRenderProps(ContentComponent)
-				? Animated.createAnimatedComponent(
-						ContentComponent as ComponentType<any>,
-					)
-				: null;
-		}, [ContentComponent]);
-
 		const handleContentLayout = useContentLayout("content");
 
-		const animatedContentStyle = useSlotStyles("content");
-		const animatedContentProps = useSlotProps("content");
-		const contentStyles = [
-			styles.content,
-			animatedContentStyle,
-		] as ScreenContentComponentProps["styles"];
-		const contentProps =
-			animatedContentProps as ScreenContentComponentProps["props"];
+		const contentStyle = useSlotStyles("content");
+		const contentProps = useSlotProps("content");
+
+		const contentStyles = [styles.content, contentStyle];
 
 		const screenChildren = hasAutoSnapPoint ? (
 			<View collapsable={false} onLayout={handleContentLayout}>
@@ -62,45 +45,21 @@ export const ContentLayer = memo(
 			children
 		);
 
-		const contentChildren = (
-			<MaybeMaskedNavigationContainer
-				pointerEvents={contentPointerEvents}
-				enabled={isNavigationMaskEnabled}
-			>
-				<SurfaceLayer pointerEvents={contentPointerEvents}>
-					{screenChildren}
-				</SurfaceLayer>
-				<ScreenFallbackHost />
-			</MaybeMaskedNavigationContainer>
-		);
-
 		return (
 			<GestureDetector gesture={gestureContext.detectorGesture}>
-				{AnimatedContentComponent ? (
-					<AnimatedContentComponent
-						style={contentStyles}
-						animatedProps={animatedContentProps}
-						pointerEvents={contentPointerEvents}
-					>
-						{contentChildren}
-					</AnimatedContentComponent>
-				) : ContentComponent ? (
-					<ContentComponent
-						styles={contentStyles}
-						props={contentProps}
-						pointerEvents={contentPointerEvents}
-					>
-						{contentChildren}
-					</ContentComponent>
-				) : (
-					<Animated.View
-						style={contentStyles}
-						animatedProps={animatedContentProps}
-						pointerEvents={contentPointerEvents}
-					>
-						{contentChildren}
-					</Animated.View>
-				)}
+				<LayerComponent
+					component={ContentComponent}
+					styles={contentStyles}
+					props={contentProps}
+					pointerEvents={contentPointerEvents}
+				>
+					<Clip pointerEvents={contentPointerEvents}>
+						<SurfaceLayer pointerEvents={contentPointerEvents}>
+							{screenChildren}
+						</SurfaceLayer>
+						<PortalOverlay fallback />
+					</Clip>
+				</LayerComponent>
 			</GestureDetector>
 		);
 	},

package/src/components/screen/container/layers/surface.tsx

@@ -1,13 +1,12 @@
-import { type ComponentType, memo, useMemo } from "react";
+import { memo } from "react";
 import { StyleSheet } from "react-native";
-import Animated from "react-native-reanimated";
 import { useBuilderStore } from "../../../../providers/screen/builder";
 import {
 	useSlotProps,
 	useSlotStyles,
 } from "../../../../providers/screen/orchestrator/styles";
 import type { ScreenSurfaceComponentProps } from "../../../../types";
-import { usesLayerRenderProps } from "./render-component";
+import { LayerComponent } from "../helpers/layer-component";
 
 type Props = {
 	children: React.ReactNode;
@@ -19,12 +18,6 @@ export const SurfaceLayer = memo(({ children, pointerEvents }: Props) => {
 		(store) => store.options.surfaceComponent,
 	);
 
-	const AnimatedSurfaceComponent = useMemo(() => {
-		return SurfaceComponent && !usesLayerRenderProps(SurfaceComponent)
-			? Animated.createAnimatedComponent(SurfaceComponent as ComponentType<any>)
-			: null;
-	}, [SurfaceComponent]);
-
 	const animatedSurfaceStyle = useSlotStyles("surface");
 	const animatedSurfaceProps = useSlotProps("surface");
 	const surfaceStyles = [
@@ -38,26 +31,15 @@ export const SurfaceLayer = memo(({ children, pointerEvents }: Props) => {
 		return children;
 	}
 
-	if (AnimatedSurfaceComponent) {
-		return (
-			<AnimatedSurfaceComponent
-				style={surfaceStyles}
-				animatedProps={animatedSurfaceProps}
-				pointerEvents={pointerEvents}
-			>
-				{children}
-			</AnimatedSurfaceComponent>
-		);
-	}
-
 	return (
-		<SurfaceComponent
+		<LayerComponent
+			component={SurfaceComponent}
 			styles={surfaceStyles}
 			props={surfaceProps}
 			pointerEvents={pointerEvents}
 		>
 			{children}
-		</SurfaceComponent>
+		</LayerComponent>
 	);
 });
 

package/src/components/screen/lifecycle/hooks/use-open-transition-intent.ts

@@ -1,6 +1,6 @@
-import { useLayoutEffect } from "react";
+import { useLayoutEffect, useRef } from "react";
 import { useAnimatedReaction } from "react-native-reanimated";
-import { scheduleOnRN } from "react-native-worklets";
+import { scheduleOnRN, scheduleOnUI } from "react-native-worklets";
 import { AnimationProgress } from "../../../../constants";
 import useStableCallback from "../../../../hooks/use-stable-callback";
 import {
@@ -46,6 +46,7 @@ export function useOpenTransitionIntent(
 	system: MotionTransitionValues,
 	onComplete?: () => void,
 ) {
+	const initialized = useRef(false);
 	const isFirstKey = useBuilderStore((store) => store.derivations.isFirstKey);
 	const { requestLifecycleTransition } = system.actions;
 	const completeOpen = useStableCallback(() => {
@@ -71,6 +72,29 @@ export function useOpenTransitionIntent(
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: Must only run once on mount
 	useLayoutEffect(() => {
+		// TODO: Find a cleaner way to handle effect setup and resumption across Activity pauses.
+		// Activity reconnects effects when a retained screen becomes visible again.
+		if (initialized.current) {
+			// Activity cleanup cancels shared-value animations; resume only unfinished opens.
+			scheduleOnUI(() => {
+				"worklet";
+				if (
+					animations.entering.get() &&
+					!animations.closing.get() &&
+					!animations.progressSettled.get() &&
+					system.pendingLifecycleRequestKind.get() ===
+						LifecycleTransitionRequestKind.None
+				) {
+					requestLifecycleTransition(
+						LifecycleTransitionRequestKind.Open,
+						system.targetProgress.get(),
+					);
+				}
+			});
+			return;
+		}
+		initialized.current = true;
+
 		const {
 			snapPoints,
 			initialSnapIndex = 0,

package/src/constants.ts

@@ -15,10 +15,12 @@ import type {
 import type { BaseStackRoute } from "./types/stack.types";
 
 /**
- * Navigation mask integration
+ * Legacy navigation mask identifiers (ignored).
  */
+/** @deprecated Ignored. Return `clip` geometry from the interpolator instead. */
 export const NAVIGATION_MASK_ELEMENT_STYLE_ID =
 	"NAVIGATION_MASK_ELEMENT_STYLE_ID";
+/** @deprecated Ignored. Return `clip` geometry from the interpolator instead. */
 export const NAVIGATION_MASK_CONTAINER_STYLE_ID =
 	"NAVIGATION_MASK_CONTAINER_STYLE_ID";
 

package/src/hooks/navigation/use-navigation-helpers.ts

@@ -1,4 +1,5 @@
 import { useCallback } from "react";
+import { runOnUISync } from "react-native-worklets";
 import { useBuilderStore } from "../../providers/screen/builder";
 import { getMotionStore } from "../../providers/screen/motion";
 import { LifecycleTransitionRequestKind } from "../../providers/screen/motion/hooks/use-transition-values";
@@ -45,13 +46,18 @@ export function useNavigationHelpers() {
 			if (routeIndex <= 0) return false;
 		}
 
-		const motion = getMotionStore(route.key).state;
-		if (!motion.closing.get()) {
-			motion.actions.requestLifecycleTransition(
-				LifecycleTransitionRequestKind.Close,
-				0,
-			);
-		}
+		const {
+			closing,
+			actions: { requestLifecycleTransition },
+		} = getMotionStore(route.key).state;
+
+		// Publish before the remaining React commit delays JS's queued UI writes.
+		runOnUISync(() => {
+			"worklet";
+			if (!closing.get()) {
+				requestLifecycleTransition(LifecycleTransitionRequestKind.Close, 0);
+			}
+		});
 		return true;
 	}, [navigation, route, requestStackDismiss]);
 

package/src/index.ts

@@ -96,6 +96,7 @@ export type {
 	ScrollGestureState,
 	ScrollMetadataState,
 	SheetSnapBehavior,
+	TransitionClip,
 	TransitionInterpolatedStyle,
 	TransitionSlotProps,
 	TransitionSlotStyle,

package/src/providers/screen/motion/animation/helpers/build-screen-transition-options.ts

@@ -7,7 +7,6 @@ export const buildScreenTransitionOptions = (
 	options: ScreenTransitionConfig,
 ): ScreenTransitionOptions => {
 	return {
-		navigationMaskEnabled: options.navigationMaskEnabled,
 		gestureEnabled: options.gestureEnabled,
 		gestureTracking: options.gestureTracking,
 		gestureDirection: options.gestureDirection,

package/src/providers/screen/motion/animation/helpers/hydrate-transition-state/index.ts

@@ -21,7 +21,6 @@ const mergeTransitionOptions = (
 		return base;
 	}
 
-	slot.navigationMaskEnabled = base.navigationMaskEnabled;
 	slot.gestureEnabled = effective.gestureEnabled ?? base.gestureEnabled;
 	slot.gestureTracking = base.gestureTracking;
 	slot.gestureDirection = effective.gestureDirection ?? base.gestureDirection;
@@ -191,7 +190,9 @@ export const hydrateTransitionState = (
 
 	out.meta = s.meta;
 	out.options = options;
-	out.route = s.route;
+	// navigate() can replace params on a route that is still closing. Its
+	// interpolator must finish with the identity that began that close.
+	if (!out.closing || out.route.key !== s.route.key) out.route = s.route;
 	out.layouts.screen.width = dimensions.width;
 	out.layouts.screen.height = dimensions.height;
 

package/src/providers/screen/motion/options/helpers.ts

@@ -204,7 +204,6 @@ const areScreenOptionsEqual = (
 ) => {
 	"worklet";
 	return (
-		left.navigationMaskEnabled === right.navigationMaskEnabled &&
 		left.gestureEnabled === right.gestureEnabled &&
 		left.gestureTracking === right.gestureTracking &&
 		areGestureDirectionsEqual(left.gestureDirection, right.gestureDirection) &&
@@ -225,10 +224,6 @@ export const resolveBaseScreenOptions = (
 	options: ScreenTransitionConfig,
 ): ScreenOptionsSnapshot => {
 	return {
-		navigationMaskEnabled: resolveBooleanOption(
-			options.navigationMaskEnabled,
-			undefined,
-		),
 		gestureEnabled: resolveBooleanOption(options.gestureEnabled, undefined),
 		gestureTracking: resolveGestureTrackingOption(
 			options.gestureTracking,
@@ -298,7 +293,6 @@ export const syncScreenOptionsOverrides = (
 	const base = screenOptions.get().baseOptions;
 
 	const next: ScreenOptionsState = {
-		navigationMaskEnabled: base.navigationMaskEnabled,
 		gestureEnabled: resolveBooleanOption(
 			options?.gestureEnabled,
 			base.gestureEnabled,

package/src/providers/screen/motion/options/types.ts

@@ -8,7 +8,6 @@ export type OptionalScreenOption<K extends keyof ScreenTransitionConfig> =
 	ScreenTransitionConfig[K];
 
 export type ScreenOptionsSnapshot = {
-	navigationMaskEnabled: OptionalScreenOption<"navigationMaskEnabled">;
 	gestureEnabled: OptionalScreenOption<"gestureEnabled">;
 	gestureTracking: RequiredScreenOption<"gestureTracking">;
 	gestureDirection: RequiredScreenOption<"gestureDirection">;

package/src/providers/screen/orchestrator/helpers/use-interpolator-state.ts

@@ -1,5 +1,8 @@
-import { useMemo } from "react";
-import { createScreenTransitionState } from "../../../../constants";
+import { useMemo, useState } from "react";
+import {
+	createScreenTransitionState,
+	DEFAULT_SCREEN_TRANSITION_STATE,
+} from "../../../../constants";
 import type {
 	BuiltState,
 	MotionAnimationState,
@@ -10,6 +13,12 @@ import type {
 export function useInterpolatorState(
 	motion: MotionAnimationState | null,
 ): BuiltState | undefined {
+	// The UI output survives descriptor updates; hydration owns its contents.
+	const [unwrapped] = useState(() =>
+		createScreenTransitionState(
+			motion?.route ?? DEFAULT_SCREEN_TRANSITION_STATE.route,
+		),
+	);
 	return useMemo(
 		() =>
 			motion
@@ -18,13 +27,9 @@ export function useInterpolatorState(
 						gesture: motion,
 						optionsSlot: {},
 						contentLayoutSlot: { width: 0, height: 0 },
-						unwrapped: createScreenTransitionState(
-							motion.route,
-							motion.meta,
-							motion.options,
-						),
+						unwrapped,
 					}
 				: undefined,
-		[motion],
+		[motion, unwrapped],
 	);
 }

package/src/providers/screen/orchestrator/helpers/use-pair-presentation.ts

@@ -0,0 +1,103 @@
+import { useDerivedValue } from "react-native-reanimated";
+import { NO_STYLES } from "../../../../constants";
+import { pairs } from "../../../../stores/bounds/internals/state";
+import type {
+	NormalizedTransitionInterpolatedStyle,
+	ScreenStyleInterpolator,
+} from "../../../../types/animation.types";
+import { useBuilderStore } from "../../builder";
+import { useMotionStore } from "../../motion";
+import { createInterpolatorScope } from "../styles/helpers/create-interpolator-scope";
+import { normalizeSlots } from "../styles/helpers/normalize-slots";
+import { selectInterpolatorFrame } from "../styles/helpers/select-interpolator-frame";
+import { stripInterpolatorOptions } from "../styles/helpers/strip-interpolator-options";
+import { updateDerivations } from "./derivations";
+import type {
+	ScreenAnimationPipeline,
+	ScreenInterpolatorFrame,
+} from "./pipeline";
+
+export type BoundaryPairPresentation = {
+	pairKey: string;
+	sourceKey: string;
+	destinationKey: string;
+	ready: boolean;
+	source: NormalizedTransitionInterpolatedStyle;
+	destination: NormalizedTransitionInterpolatedStyle;
+};
+
+export function boundarySourceFrame(
+	frame: ScreenInterpolatorFrame,
+): ScreenInterpolatorFrame | undefined {
+	"worklet";
+	if (!frame.previous) return undefined;
+	const source = {
+		...frame,
+		previous: undefined,
+		current: frame.previous,
+		next: frame.current,
+		layouts: frame.previous.layouts,
+	};
+	updateDerivations(source);
+	return source;
+}
+
+export function runBoundaryInterpolator(
+	interpolator: ScreenStyleInterpolator,
+	frame: ScreenInterpolatorFrame,
+	side: "source" | "destination",
+) {
+	"worklet";
+	const raw = interpolator(
+		createInterpolatorScope({
+			frame,
+			selectedFrame: selectInterpolatorFrame(frame, side === "destination"),
+		}),
+	);
+	return raw && typeof raw === "object"
+		? normalizeSlots(stripInterpolatorOptions(raw))
+		: NO_STYLES;
+}
+
+// Each destination owns the output of its incoming pair, even when its source
+// has moved on to another route. All boundaries read this same UI value.
+export function usePairPresentation({
+	screenInterpolatorProps,
+	currentInterpolator,
+}: ScreenAnimationPipeline) {
+	const pairKey = useBuilderStore((s) => s.derivations.destinationPairKey);
+	const ready = useMotionStore((s) => s.isScreenReady);
+	return useDerivedValue(() => {
+		const links = pairKey ? pairs.get()[pairKey]?.links : undefined;
+		if (!pairKey || !links || !currentInterpolator) return undefined;
+		let hasPortal = false;
+		for (const key in links) {
+			const { source, destination } = links[key];
+			if (
+				source?.handoff ||
+				source?.escapeClipping ||
+				destination?.handoff ||
+				destination?.escapeClipping
+			) {
+				hasPortal = true;
+				break;
+			}
+		}
+		if (!hasPortal) return undefined;
+		const frame = screenInterpolatorProps.get();
+		const source = boundarySourceFrame(frame);
+		if (!source) return undefined;
+		return {
+			pairKey,
+			sourceKey: source.current.route.key,
+			destinationKey: frame.current.route.key,
+			ready: ready.get(),
+			source: runBoundaryInterpolator(currentInterpolator, source, "source"),
+			destination: runBoundaryInterpolator(
+				currentInterpolator,
+				frame,
+				"destination",
+			),
+		} satisfies BoundaryPairPresentation;
+	});
+}

package/src/providers/screen/orchestrator/orchestrator.provider.tsx

@@ -7,6 +7,7 @@ import createProvider from "../../../utils/create-provider";
 import { useBuilderStore } from "../builder";
 import { useMotionStore } from "../motion";
 import { useScreenAnimationPipeline } from "./helpers/pipeline";
+import { usePairPresentation } from "./helpers/use-pair-presentation";
 import { useRegisterGestureOwnership } from "./hooks/use-register-gesture-ownership";
 import { useInterpolatedStylesMap } from "./styles/hooks/use-interpolated-style-maps";
 import { useResolvedStylesMap } from "./styles/hooks/use-resolved-slot-style-map";
@@ -21,6 +22,7 @@ export type OrchestratorState = ReturnType<
 	typeof useScreenAnimationPipeline
 > & {
 	boundsAccessor: BoundsAccessor;
+	pairPresentation: ReturnType<typeof usePairPresentation>;
 	slotsMap: SharedValue<NormalizedTransitionInterpolatedStyle>;
 };
 
@@ -37,6 +39,7 @@ export const {
 	const gestures = useMotionStore((store) => store.gestures);
 
 	const pipeline = useScreenAnimationPipeline();
+	const pairPresentation = usePairPresentation(pipeline);
 
 	const localStylesMaps = useInterpolatedStylesMap({ pipeline });
 	const slotsMap = useResolvedStylesMap({ localStylesMaps });
@@ -62,6 +65,7 @@ export const {
 		key: currentScreenKey,
 		value: {
 			...pipeline,
+			pairPresentation,
 			boundsAccessor,
 			slotsMap,
 		},

package/src/providers/screen/orchestrator/styles/constants.ts

@@ -66,6 +66,7 @@ export const PROP_RESET_VALUES: Record<string, unknown> = {
 };
 
 const RESERVED_STYLE_SLOT_IDS = {
+	clip: true,
 	overlay: true,
 	content: true,
 	surface: true,