react-native-screen-transitions 3.6.0-alpha.3 → 3.6.0-beta.0

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

@@ -3,7 +3,10 @@ import {
 	LOGICAL_SETTLE_PROGRESS_THRESHOLD,
 	LOGICAL_SETTLE_REQUIRED_FRAMES,
 } from "../../../../../constants";
-import type { ScreenTransitionOptions } from "../../../../../types/animation.types";
+import type {
+	ScreenTransitionOptions,
+	TransitionInterpolatorOptions,
+} from "../../../../../types/animation.types";
 import type { Layout } from "../../../../../types/screen.types";
 import { resolveGestureDrivenProgress } from "./gesture-progress";
 import {
@@ -23,7 +26,7 @@ const LOGICAL_SETTLE_STICKY_PROGRESS_THRESHOLD =
 
 const mergeTransitionOptions = (
 	base: ScreenTransitionOptions,
-	effective: ScreenTransitionOptions | undefined,
+	effective: TransitionInterpolatorOptions | undefined,
 	slot: ScreenTransitionOptions,
 ): ScreenTransitionOptions => {
 	"worklet";
@@ -31,12 +34,9 @@ const mergeTransitionOptions = (
 		return base;
 	}
 
-	slot.navigationMaskEnabled =
-		effective.navigationMaskEnabled ?? base.navigationMaskEnabled;
+	slot.navigationMaskEnabled = base.navigationMaskEnabled;
 	slot.gestureEnabled = effective.gestureEnabled ?? base.gestureEnabled;
-	slot.experimental_allowDisabledGestureTracking =
-		effective.experimental_allowDisabledGestureTracking ??
-		base.experimental_allowDisabledGestureTracking;
+	slot.gestureTracking = base.gestureTracking;
 	slot.gestureDirection = effective.gestureDirection ?? base.gestureDirection;
 	slot.gestureSensitivity =
 		effective.gestureSensitivity ?? base.gestureSensitivity;
@@ -66,7 +66,7 @@ const mergeTransitionOptions = (
 export const hydrateTransitionState = (
 	s: BuiltState,
 	dimensions: Layout,
-	effectiveOptions?: ScreenTransitionOptions,
+	effectiveOptions?: TransitionInterpolatorOptions,
 ) => {
 	"worklet";
 	const out = s.unwrapped;
@@ -76,6 +76,7 @@ export const hydrateTransitionState = (
 		effectiveOptions,
 		s.optionsSlot,
 	);
+	const canDismiss = options.gestureEnabled !== false;
 	out.willAnimate = s.willAnimate.get();
 	out.closing = s.closing.get();
 	out.entering = s.entering.get();
@@ -107,9 +108,16 @@ export const hydrateTransitionState = (
 		getResolvedSnapBounds(
 			s.sortedNumericSnapPoints,
 			s.hasAutoSnapPoint ? s.resolvedAutoSnapPoint.get() : null,
+			canDismiss,
 		),
 	);
 
+	// Unsure where else to place this if im being honest.
+	// I think for here is fine
+	if (s.effectiveProgress.get() !== out.progress) {
+		s.effectiveProgress.set(out.progress);
+	}
+
 	const hasResidualGestureValues =
 		Math.abs(out.gesture.normX) > EPSILON ||
 		Math.abs(out.gesture.normY) > EPSILON ||

package/src/shared/providers/screen/animation/helpers/hydrate-transition-state/snap-points.ts

@@ -48,6 +48,7 @@ const getResolvedSnapPointAt = (
 export const getResolvedSnapBounds = (
 	snapPoints: number[],
 	resolvedAutoSnap: number | null,
+	canDismiss = true,
 ): SnapBounds | null => {
 	"worklet";
 	const snapPointCount = getResolvedSnapPointCount(
@@ -77,7 +78,7 @@ export const getResolvedSnapBounds = (
 	);
 
 	return {
-		min: Math.min(0, firstSnapPoint),
+		min: canDismiss ? Math.min(0, firstSnapPoint) : firstSnapPoint,
 		max: lastSnapPoint,
 	};
 };

package/src/shared/providers/screen/animation/helpers/hydrate-transition-state/types.ts

@@ -9,6 +9,7 @@ import type { BaseStackRoute } from "../../../../../types/stack.types";
 
 export type BuiltState = {
 	progress: SharedValue<number>;
+	effectiveProgress: SharedValue<number>;
 	willAnimate: SharedValue<number>;
 	closing: SharedValue<number>;
 	progressAnimating: SharedValue<number>;

package/src/shared/providers/screen/animation/helpers/pipeline.ts

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { useWindowDimensions } from "react-native";
 import {
 	type DerivedValue,
@@ -8,6 +9,7 @@ import {
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { DEFAULT_SCREEN_TRANSITION_STATE } from "../../../../constants";
 import { useStack } from "../../../../hooks/navigation/use-stack";
+import { AnimationStore } from "../../../../stores/animation.store";
 import type {
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,
@@ -18,6 +20,7 @@ import { updateDerivations } from "./derivations";
 import { hasTransitionsEnabled } from "./has-transitions-enabled";
 import { hydrateTransitionState } from "./hydrate-transition-state";
 import type { SelectedInterpolatorOptions } from "./selected-interpolator-options";
+import { deriveStackProgress } from "./stack-progress";
 import { useBuildTransitionState } from "./use-build-transition-state";
 
 export type ScreenInterpolatorFrame = Omit<ScreenInterpolationProps, "bounds">;
@@ -55,7 +58,7 @@ const createInitialBaseInterpolatorProps = (
 };
 
 export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
-	const { flags, stackProgress: rootStackProgress, routeKeys } = useStack();
+	const { flags, routeKeys } = useStack();
 	const dimensions = useWindowDimensions();
 	const insets = useSafeAreaInsets();
 	const transitionsAlwaysOn = flags.TRANSITIONS_ALWAYS_ON;
@@ -72,6 +75,11 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 
 	const currentRouteKey = currDescriptor?.route?.key;
 	const currentIndex = routeKeys.indexOf(currentRouteKey);
+	const effectiveProgressValues = useMemo(() => {
+		return routeKeys.map((routeKey) =>
+			AnimationStore.getValue(routeKey, "effectiveProgress"),
+		);
+	}, [routeKeys]);
 
 	const nextRouteKey = nextDescriptor?.route?.key;
 	const nextHasTransitions =
@@ -130,10 +138,16 @@ export function useScreenAnimationPipeline(): ScreenAnimationPipeline {
 
 			updateDerivations(frame);
 
-			frame.stackProgress =
-				currentIndex >= 0
-					? rootStackProgress.get() - currentIndex
-					: frame.progress;
+			frame.stackProgress = deriveStackProgress(
+				routeKeys,
+				effectiveProgressValues,
+				currentIndex,
+				frame.progress,
+				currentRouteKey,
+				frame.current.progress,
+				nextRouteKey,
+				frame.next?.progress,
+			);
 			frame.logicallySettled = frame.active.logicallySettled;
 
 			return frame;

package/src/shared/providers/screen/animation/helpers/selected-interpolator-options.ts

@@ -59,10 +59,7 @@ const areInterpolatorOptionsEqual = (
 	if (!left || !right) return false;
 
 	return (
-		left.navigationMaskEnabled === right.navigationMaskEnabled &&
 		left.gestureEnabled === right.gestureEnabled &&
-		left.experimental_allowDisabledGestureTracking ===
-			right.experimental_allowDisabledGestureTracking &&
 		areGestureDirectionsEqual(left.gestureDirection, right.gestureDirection) &&
 		left.gestureSensitivity === right.gestureSensitivity &&
 		left.gestureVelocityImpact === right.gestureVelocityImpact &&

package/src/shared/providers/screen/animation/helpers/stack-progress.ts

@@ -0,0 +1,29 @@
+import type { SharedValue } from "react-native-reanimated";
+
+export const deriveStackProgress = (
+	routeKeys: string[],
+	effectiveProgressValues: SharedValue<number>[],
+	currentIndex: number,
+	fallbackProgress: number,
+	currentRouteKey: string | undefined,
+	currentProgress: number,
+	nextRouteKey: string | undefined,
+	nextProgress: number | undefined,
+) => {
+	"worklet";
+	if (currentIndex < 0) return fallbackProgress;
+
+	let total = 0;
+	for (let i = currentIndex; i < effectiveProgressValues.length; i++) {
+		const routeKey = routeKeys[i];
+		if (routeKey === currentRouteKey) {
+			total += currentProgress;
+		} else if (routeKey === nextRouteKey && nextProgress !== undefined) {
+			total += nextProgress;
+		} else {
+			total += effectiveProgressValues[i].get();
+		}
+	}
+
+	return total;
+};

package/src/shared/providers/screen/animation/helpers/use-build-transition-state.ts

@@ -19,6 +19,7 @@ import { toPlainRoute, toPlainValue } from "./worklet";
 
 type BuiltState = {
 	progress: SharedValue<number>;
+	effectiveProgress: SharedValue<number>;
 	willAnimate: SharedValue<number>;
 	closing: SharedValue<number>;
 	progressAnimating: SharedValue<number>;
@@ -62,6 +63,7 @@ export const useBuildTransitionState = (
 
 		return {
 			progress: AnimationStore.getValue(key, "progress"),
+			effectiveProgress: AnimationStore.getValue(key, "effectiveProgress"),
 			willAnimate: AnimationStore.getValue(key, "willAnimate"),
 			closing: AnimationStore.getValue(key, "closing"),
 			entering: AnimationStore.getValue(key, "entering"),

package/src/shared/providers/screen/gestures/shared/policy.ts

@@ -6,6 +6,7 @@ import {
 	DEFAULT_GESTURE_SENSITIVITY,
 	DEFAULT_GESTURE_SNAP_LOCKED,
 	DEFAULT_GESTURE_SNAP_VELOCITY_IMPACT,
+	DEFAULT_GESTURE_TRACKING,
 	DEFAULT_GESTURE_VELOCITY_IMPACT,
 	DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR,
 } from "../../../../constants";
@@ -15,6 +16,7 @@ import type {
 	GestureProgressMode,
 } from "../../../../types/gesture.types";
 import type {
+	GestureTracking,
 	ScreenTransitionConfig,
 	SheetScrollGestureBehavior,
 	SnapPoint,
@@ -39,13 +41,13 @@ import {
 import { validateSnapPoints } from "./snap-points";
 
 export type GesturePolicyOptions = {
-	experimental_allowDisabledGestureTracking?: boolean;
 	expandViaScrollView?: boolean;
 	gestureActivationArea?: GestureActivationArea;
 	gestureDirection?: GestureDirection | GestureDirection[];
 	gestureDrivesProgress?: boolean;
 	gestureEnabled?: boolean;
 	gestureProgressMode?: GestureProgressMode;
+	gestureTracking?: GestureTracking;
 	gestureReleaseVelocityScale?: number;
 	gestureResponseDistance?: number;
 	gestureSensitivity?: number;
@@ -144,18 +146,26 @@ export const resolveGestureCanTrack = ({
 	isFirstKey,
 	canDismiss,
 	hasSnapPoints,
-	allowDisabledGestureTracking,
+	gestureTracking = DEFAULT_GESTURE_TRACKING,
 }: {
 	isFirstKey: boolean;
 	canDismiss: boolean;
 	hasSnapPoints: boolean;
-	allowDisabledGestureTracking?: boolean;
+	gestureTracking?: GestureTracking;
 }) => {
 	"worklet";
 	if (isFirstKey) {
 		return false;
 	}
 
+	if (gestureTracking === "never") {
+		return false;
+	}
+
+	if (gestureTracking === "always") {
+		return true;
+	}
+
 	if (canDismiss) {
 		return true;
 	}
@@ -164,7 +174,7 @@ export const resolveGestureCanTrack = ({
 		return true;
 	}
 
-	return allowDisabledGestureTracking === true;
+	return false;
 };
 
 export const resolvePanPolicy = (
@@ -234,8 +244,7 @@ const resolveGestureParticipation = ({
 		isFirstKey,
 		canDismiss,
 		hasSnapPoints: effectiveSnapPoints.hasSnapPoints,
-		allowDisabledGestureTracking:
-			options.experimental_allowDisabledGestureTracking,
+		gestureTracking: options.gestureTracking,
 	});
 	const claimedDirections = computeClaimedDirections(
 		canTrackGesture,
@@ -309,7 +318,11 @@ function resolveRuntimeCanTrackGesture(
 		return false;
 	}
 
-	if (options.experimental_allowDisabledGestureTracking === true) {
+	if (options.gestureTracking === "never") {
+		return false;
+	}
+
+	if (options.gestureTracking === "always") {
 		return true;
 	}
 

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

@@ -6,6 +6,7 @@ import {
 	DEFAULT_GESTURE_SENSITIVITY,
 	DEFAULT_GESTURE_SNAP_LOCKED,
 	DEFAULT_GESTURE_SNAP_VELOCITY_IMPACT,
+	DEFAULT_GESTURE_TRACKING,
 	DEFAULT_GESTURE_VELOCITY_IMPACT,
 	DEFAULT_SHEET_SCROLL_GESTURE_BEHAVIOR,
 } from "../../../constants";
@@ -126,6 +127,16 @@ const resolveSheetScrollGestureBehaviorOption = (
 		: fallback;
 };
 
+const resolveGestureTrackingOption = (
+	value: unknown,
+	fallback: RequiredScreenOption<"gestureTracking">,
+): RequiredScreenOption<"gestureTracking"> => {
+	"worklet";
+	return value === "auto" || value === "never" || value === "always"
+		? value
+		: fallback;
+};
+
 const resolveBackdropBehaviorOption = (
 	value: unknown,
 	fallback: BackdropBehavior | undefined,
@@ -208,8 +219,7 @@ const areScreenOptionsEqual = (
 	return (
 		left.navigationMaskEnabled === right.navigationMaskEnabled &&
 		left.gestureEnabled === right.gestureEnabled &&
-		left.experimental_allowDisabledGestureTracking ===
-			right.experimental_allowDisabledGestureTracking &&
+		left.gestureTracking === right.gestureTracking &&
 		areGestureDirectionsEqual(left.gestureDirection, right.gestureDirection) &&
 		left.gestureSensitivity === right.gestureSensitivity &&
 		left.gestureVelocityImpact === right.gestureVelocityImpact &&
@@ -244,9 +254,9 @@ export const resolveBaseScreenOptions = (
 			undefined,
 		),
 		gestureEnabled: resolveBooleanOption(options.gestureEnabled, undefined),
-		experimental_allowDisabledGestureTracking: resolveBooleanOption(
-			options.experimental_allowDisabledGestureTracking,
-			false,
+		gestureTracking: resolveGestureTrackingOption(
+			options.gestureTracking,
+			DEFAULT_GESTURE_TRACKING,
 		),
 		gestureDirection: resolveGestureDirectionOption(
 			options.gestureDirection,
@@ -327,18 +337,12 @@ export const syncScreenOptionsOverrides = (
 	);
 
 	const next: ScreenOptionsState = {
-		navigationMaskEnabled: resolveBooleanOption(
-			options?.navigationMaskEnabled,
-			base.navigationMaskEnabled,
-		),
+		navigationMaskEnabled: base.navigationMaskEnabled,
 		gestureEnabled: resolveBooleanOption(
 			options?.gestureEnabled,
 			base.gestureEnabled,
 		),
-		experimental_allowDisabledGestureTracking: resolveBooleanOption(
-			options?.experimental_allowDisabledGestureTracking,
-			base.experimental_allowDisabledGestureTracking,
-		),
+		gestureTracking: base.gestureTracking,
 		gestureDirection: resolveGestureDirectionOption(
 			options?.gestureDirection,
 			base.gestureDirection,

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

@@ -11,7 +11,7 @@ export type OptionalScreenOption<K extends keyof ScreenTransitionOptions> =
 export type ScreenOptionsSnapshot = {
 	navigationMaskEnabled: OptionalScreenOption<"navigationMaskEnabled">;
 	gestureEnabled: OptionalScreenOption<"gestureEnabled">;
-	experimental_allowDisabledGestureTracking: RequiredScreenOption<"experimental_allowDisabledGestureTracking">;
+	gestureTracking: RequiredScreenOption<"gestureTracking">;
 	gestureDirection: RequiredScreenOption<"gestureDirection">;
 	gestureSensitivity: RequiredScreenOption<"gestureSensitivity">;
 	gestureVelocityImpact: RequiredScreenOption<"gestureVelocityImpact">;

package/src/shared/providers/screen/styles/helpers/resolve-slot-styles/index.ts

@@ -4,16 +4,17 @@ import type {
 } from "../../../../../types/animation.types";
 import { shouldSlotInherit } from "../../constants";
 import { materializeResolvedSlot } from "./materialize-slot";
-import { getResolvedSlotState, hasDisappearedKeys } from "./slot-state";
+import { getResolvedSlotState } from "./slot-state";
 import type {
+	LocalStyleLayers,
 	ResettableStyleState,
 	ResettableStyleStatesBySlot,
 } from "./types";
 
-export type { ResettableStyleStatesBySlot } from "./types";
+export type { LocalStyleLayers, ResettableStyleStatesBySlot } from "./types";
 
 type ResolveSlotStylesContext = {
-	currentStylesMap: NormalizedTransitionInterpolatedStyle;
+	localStylesMaps: LocalStyleLayers;
 	ancestorStylesMap: NormalizedTransitionInterpolatedStyle;
 	previousStyleStatesBySlot: ResettableStyleStatesBySlot;
 	deferLocalSlotResets: boolean;
@@ -42,6 +43,35 @@ const hasEitherResetPatch = (
 	return hasStyleResetPatch || hasPropResetPatch;
 };
 
+const hasDefinedBucketValue = (value: unknown) => {
+	"worklet";
+	return value !== undefined && value !== null;
+};
+
+const hasResettableDisappearedKeys = (
+	previousKeys: Record<string, true> | undefined,
+	previousResetValues: Record<string, unknown> | undefined,
+	currentKeys: Record<string, true> | undefined,
+) => {
+	"worklet";
+
+	if (!previousKeys || !previousResetValues) {
+		return false;
+	}
+
+	for (const key in previousKeys) {
+		if (currentKeys !== undefined && currentKeys[key] === true) {
+			continue;
+		}
+
+		if (previousResetValues[key] !== undefined) {
+			return true;
+		}
+	}
+
+	return false;
+};
+
 const getResolvedSlotOutput = ({
 	slot,
 	previousState,
@@ -58,10 +88,18 @@ const getResolvedSlotOutput = ({
 
 	const hasStyleResetPatch =
 		resetDroppedKeys &&
-		hasDisappearedKeys(previousState?.styleKeys, state.styleKeys);
+		hasResettableDisappearedKeys(
+			previousState?.styleKeys,
+			previousState?.styleResetValues,
+			state.styleKeys,
+		);
 	const hasPropResetPatch =
 		resetDroppedKeys &&
-		hasDisappearedKeys(previousState?.propKeys, state.propKeys);
+		hasResettableDisappearedKeys(
+			previousState?.propKeys,
+			previousState?.propResetValues,
+			state.propKeys,
+		);
 	const hasResetPatch = hasEitherResetPatch(
 		hasStyleResetPatch,
 		hasPropResetPatch,
@@ -92,30 +130,105 @@ const getResolvedSlotOutput = ({
 	};
 };
 
+const hasLocalStyleSource = (context: ResolveSlotStylesContext) => {
+	"worklet";
+	return context.localStylesMaps.length > 0;
+};
+
+const hasLocalSlot = (context: ResolveSlotStylesContext, slotId: string) => {
+	"worklet";
+
+	for (let index = 0; index < context.localStylesMaps.length; index++) {
+		if (context.localStylesMaps[index]?.[slotId] !== undefined) {
+			return true;
+		}
+	}
+
+	return false;
+};
+
 const shouldDeferMissingLocalSlotReset = (
 	context: ResolveSlotStylesContext,
 	slotId: string,
 ) => {
 	"worklet";
 	const canInherit = shouldSlotInherit(slotId);
-	const hasCurrentSlot = context.currentStylesMap[slotId] !== undefined;
+	const localSlotExists = hasLocalSlot(context, slotId);
 	const hasInheritedSlot =
 		canInherit && context.ancestorStylesMap[slotId] !== undefined;
 
 	return (
 		context.deferLocalSlotResets &&
+		!hasLocalStyleSource(context) &&
 		!canInherit &&
-		!hasCurrentSlot &&
+		!localSlotExists &&
 		!hasInheritedSlot
 	);
 };
 
+const mergeBucket = (
+	resolvedBucket: Record<string, unknown> | undefined,
+	source: Record<string, unknown> | undefined,
+) => {
+	"worklet";
+
+	if (!source) {
+		return resolvedBucket;
+	}
+
+	let nextBucket = resolvedBucket;
+
+	for (const key in source) {
+		const value = source[key];
+
+		if (!hasDefinedBucketValue(value)) {
+			continue;
+		}
+
+		nextBucket = nextBucket ?? {};
+		nextBucket[key] = value;
+	}
+
+	return nextBucket;
+};
+
+const getMergedLocalSlot = (
+	context: ResolveSlotStylesContext,
+	slotId: string,
+) => {
+	"worklet";
+	let mergedStyle: Record<string, unknown> | undefined;
+	let mergedProps: Record<string, unknown> | undefined;
+
+	for (let index = 0; index < context.localStylesMaps.length; index++) {
+		const slot = context.localStylesMaps[index]?.[slotId];
+
+		if (slot === undefined) {
+			continue;
+		}
+
+		mergedStyle = mergeBucket(
+			mergedStyle,
+			slot.style as Record<string, unknown> | undefined,
+		);
+		mergedProps = mergeBucket(mergedProps, slot.props);
+	}
+
+	if (!mergedStyle && !mergedProps) {
+		return undefined;
+	}
+
+	return {
+		style: mergedStyle,
+		props: mergedProps,
+	};
+};
+
 const getSlotForId = (context: ResolveSlotStylesContext, slotId: string) => {
 	"worklet";
-	const currentSlot = context.currentStylesMap[slotId];
 
-	if (currentSlot !== undefined) {
-		return currentSlot;
+	if (hasLocalSlot(context, slotId)) {
+		return getMergedLocalSlot(context, slotId);
 	}
 
 	if (shouldSlotInherit(slotId)) {
@@ -326,9 +439,19 @@ const appendResolvedSlot = (
 
 const appendCurrentSlots = (context: ResolveSlotStylesContext) => {
 	"worklet";
+	const appendedSlotIds: Record<string, true> = {};
+
+	for (let index = 0; index < context.localStylesMaps.length; index++) {
+		const stylesMap = context.localStylesMaps[index];
+
+		for (const slotId in stylesMap) {
+			if (stylesMap[slotId] === undefined || appendedSlotIds[slotId]) {
+				continue;
+			}
 
-	for (const slotId in context.currentStylesMap) {
-		appendResolvedSlot(context, slotId);
+			appendedSlotIds[slotId] = true;
+			appendResolvedSlot(context, slotId);
+		}
 	}
 };
 
@@ -337,9 +460,7 @@ const shouldAppendInheritedSlot = (
 	slotId: string,
 ) => {
 	"worklet";
-	return (
-		shouldSlotInherit(slotId) && context.currentStylesMap[slotId] === undefined
-	);
+	return shouldSlotInherit(slotId) && !hasLocalSlot(context, slotId);
 };
 
 const appendInheritedSlots = (context: ResolveSlotStylesContext) => {
@@ -361,7 +482,7 @@ const shouldAppendPreviousSlot = (
 		shouldSlotInherit(slotId) &&
 		context.ancestorStylesMap[slotId] !== undefined;
 
-	return context.currentStylesMap[slotId] === undefined && !inheritedSlotExists;
+	return !hasLocalSlot(context, slotId) && !inheritedSlotExists;
 };
 
 const appendPreviousSlots = (context: ResolveSlotStylesContext) => {
@@ -381,12 +502,12 @@ const appendPreviousSlots = (context: ResolveSlotStylesContext) => {
  * concrete identity values.
  */
 export const resolveSlotStyles = ({
-	currentStylesMap,
+	localStylesMaps,
 	ancestorStylesMap,
 	previousStyleStatesBySlot,
 	deferLocalSlotResets = false,
 }: {
-	currentStylesMap: NormalizedTransitionInterpolatedStyle;
+	localStylesMaps: LocalStyleLayers;
 	ancestorStylesMap: NormalizedTransitionInterpolatedStyle;
 	previousStyleStatesBySlot: ResettableStyleStatesBySlot;
 	deferLocalSlotResets?: boolean;
@@ -395,7 +516,7 @@ export const resolveSlotStyles = ({
 	const resolvedStylesMap: NormalizedTransitionInterpolatedStyle = {};
 	const nextPreviousStyleStatesBySlot: ResettableStyleStatesBySlot = {};
 	const context = {
-		currentStylesMap,
+		localStylesMaps,
 		ancestorStylesMap,
 		previousStyleStatesBySlot,
 		deferLocalSlotResets,

package/src/shared/providers/screen/styles/helpers/resolve-slot-styles/materialize-slot.ts

@@ -35,10 +35,14 @@ const materializeResolvedBucket = ({
 		}
 
 		const previousResetValue = previousResetValues?.[key];
-		resolvedBucket[key] =
+		const resetValue =
 			previousResetValue !== undefined
 				? previousResetValue
 				: resetValues?.[key];
+
+		if (resetValue !== undefined) {
+			resolvedBucket[key] = resetValue;
+		}
 	}
 
 	if (source) {

package/src/shared/providers/screen/styles/helpers/resolve-slot-styles/types.ts

@@ -1,3 +1,7 @@
+import type { NormalizedTransitionInterpolatedStyle } from "../../../../../types/animation.types";
+
+export type LocalStyleLayers = NormalizedTransitionInterpolatedStyle[];
+
 export type ResettableStyleState = {
 	styleKeys?: Record<string, true>;
 	styleResetValues?: Record<string, unknown>;