react-native-screen-transitions 3.4.0-alpha.0 → 3.4.0-alpha.1

package/src/shared/types/animation.types.ts

@@ -10,17 +10,6 @@ import type { GestureValues } from "./gesture.types";
 import type { Layout } from "./screen.types";
 import type { BaseStackRoute } from "./stack.types";
 
-export interface OverlayInterpolationProps {
-	progress: number;
-	layouts: {
-		/**
-		 * The `width` and `height` of the screen container.
-		 */
-		screen: Layout;
-	};
-	insets: EdgeInsets;
-}
-
 export type ScreenTransitionState = {
 	/**
 	 * Animation progress for this screen.
@@ -42,11 +31,11 @@ export type ScreenTransitionState = {
 	closing: number;
 
 	/**
-	 * Whether this screen is in the process of entering.
-	 * - `0`: Screen is closing or inactive
-	 * - `1`: Screen is opening/entering
+	 * Whether this screen is actively in its opening phase.
+	 * - `0`: Screen is settled, inactive, or closing
+	 * - `1`: Screen is currently opening/entering
 	 *
-	 * Use this to trigger different animations when navigating back vs forward.
+	 * This flips back to `0` once the open animation finishes.
 	 */
 	entering: number;
 
@@ -169,18 +158,6 @@ export interface ScreenInterpolationProps {
 	 * When focused, this is the previous screen. When not focused, this is the current screen.
 	 */
 	inactive: ScreenTransitionState | undefined;
-
-	/**
-	 * Whether the active screen is currently transitioning (either being dragged or animating).
-	 * @deprecated Use `active.animating` instead.
-	 */
-	isActiveTransitioning: boolean;
-
-	/**
-	 * Whether the active screen is in the process of being dismissed/closed.
-	 * @deprecated Use `active.closing` instead.
-	 */
-	isDismissing: boolean;
 }
 
 export type ScreenStyleInterpolator = (
@@ -195,17 +172,11 @@ export type ScreenStyleInterpolator = (
  */
 export type AnimatedViewStyle = ViewStyle & TextStyle;
 
-/**
- * Explicit slot format with separate `style` and `props` buckets.
- *
- * - `style` is applied via `useAnimatedStyle` (transform, opacity, backgroundColor, etc.)
- * - `props` is applied via `useAnimatedProps` (component-specific props like BlurView intensity)
- */
-export type TransitionSlotExplicit = {
-	/** Animated styles applied via useAnimatedStyle. */
+type TransitionSlotDefinition = {
+	/** Animated styles applied via `useAnimatedStyle`. */
 	style?: AnimatedViewStyle;
-	/** Animated props applied via useAnimatedProps (e.g., BlurView intensity, SquircleView cornerRadius). */
-	props?: Record<string, any>;
+	/** Animated props applied via `useAnimatedProps`. */
+	props?: Record<string, unknown>;
 };
 
 /**
@@ -215,7 +186,7 @@ export type TransitionSlotExplicit = {
  * - **Shorthand**: Write styles directly — `{ opacity: 0.5, transform: [...] }`
  * - **Explicit**: Use `style` and/or `props` buckets — `{ style: { opacity: 0.5 }, props: { intensity: 80 } }`
  */
-export type TransitionSlotStyle = AnimatedViewStyle | TransitionSlotExplicit;
+export type TransitionSlotStyle = AnimatedViewStyle | TransitionSlotDefinition;
 
 /**
  * Internal normalized slot format used after the backward-compat shim.
@@ -223,7 +194,7 @@ export type TransitionSlotStyle = AnimatedViewStyle | TransitionSlotExplicit;
  */
 export type NormalizedTransitionSlotStyle = {
 	style?: StyleProps;
-	props?: Record<string, any>;
+	props?: Record<string, unknown>;
 };
 
 /**
@@ -242,10 +213,10 @@ export type NormalizedTransitionInterpolatedStyle = {
 };
 
 /**
- * Public new-format interpolator result with type-safe style autocomplete.
- * Uses `TransitionSlotStyle` (backed by `AnimatedViewStyle`) for full style autocomplete.
+ * The return type of `screenStyleInterpolator`.
+ * Uses the nested slot format, while still accepting deprecated flat keys.
  */
-export type NewTransitionInterpolatedStyle = {
+export type TransitionInterpolatedStyle = {
 	/** Animated style and props for the main screen content view. */
 	content?: TransitionSlotStyle;
 	/** Animated style and props for the backdrop layer between screens. */
@@ -254,27 +225,23 @@ export type NewTransitionInterpolatedStyle = {
 	surface?: TransitionSlotStyle;
 	/** Custom styles/props by id for Transition.View components. */
 	[id: string]: TransitionSlotStyle | undefined;
-};
-
-/**
- * @deprecated Use the nested format instead: `{ content: { style }, backdrop: { style } }`.
- * This flat format is auto-converted via a backward-compat shim.
- */
-export type LegacyTransitionInterpolatedStyle = {
+	/**
+	 * @deprecated Use `content` instead.
+	 * This flat format is auto-converted via a backward-compat shim.
+	 */
 	contentStyle?: AnimatedViewStyle;
+	/**
+	 * @deprecated Use `backdrop` instead.
+	 * This flat format is auto-converted via a backward-compat shim.
+	 */
 	backdropStyle?: AnimatedViewStyle;
+	/**
+	 * @deprecated Use `backdrop` instead.
+	 * This flat format is auto-converted via a backward-compat shim.
+	 */
 	overlayStyle?: AnimatedViewStyle;
-	[id: string]: AnimatedViewStyle | undefined;
 };
 
-/**
- * The return type of `screenStyleInterpolator`.
- * Accepts both the new nested format and the legacy flat format (auto-converted).
- */
-export type TransitionInterpolatedStyle =
-	| NewTransitionInterpolatedStyle
-	| LegacyTransitionInterpolatedStyle;
-
 /**
  * A Reanimated animation configuration object.
  */

package/src/shared/types/bounds.types.ts

@@ -1,8 +1,11 @@
 import type { MeasuredDimensions, StyleProps } from "react-native-reanimated";
 import type { Snapshot } from "../stores/bounds";
 import type {
+	BoundId,
+	BoundsAnchor,
 	BoundsOptions,
 	BoundsOptionsResult,
+	BoundsScaleMode,
 } from "../utils/bounds/types/options";
 import type { TransitionInterpolatedStyle } from "./animation.types";
 
@@ -25,16 +28,33 @@ export type BoundsLink = {
 	destination: BoundEntry | null;
 };
 
-export type BoundsStyleOptions = Omit<BoundsOptions, "id" | "group">;
-
-export type BoundsNavigationPreset = "zoom";
-
-export type BoundsNavigationOptions = BoundsStyleOptions & {
+export type BoundsNavigationZoomOptions = {
+	anchor?: BoundsAnchor;
+	scaleMode?: BoundsScaleMode;
+	target?: "bound" | "fullscreen" | MeasuredDimensions;
+	mask?: {
+		borderRadius?: number | "auto" | { from?: number; to?: number };
+		borderTopLeftRadius?: number | "auto" | { from?: number; to?: number };
+		borderTopRightRadius?: number | "auto" | { from?: number; to?: number };
+		borderBottomLeftRadius?: number | "auto" | { from?: number; to?: number };
+		borderBottomRightRadius?: number | "auto" | { from?: number; to?: number };
+		borderCurve?: "circular" | "continuous";
+		outset?:
+			| number
+			| { top?: number; right?: number; bottom?: number; left?: number };
+	};
+	motion?: {
+		dragResistance?: number;
+		dragDirectionalScaleMin?: number;
+	};
+	/**
+	 * @deprecated Use `mask.borderRadius` instead.
+	 */
 	maskBorderRadius?: number;
 };
 
 export type BoundsNavigationAccessor = {
-	zoom: () => TransitionInterpolatedStyle;
+	zoom: (options?: BoundsNavigationZoomOptions) => TransitionInterpolatedStyle;
 };
 
 type BoundsBoundNavigationAccessor = {
@@ -46,15 +66,15 @@ type BoundsCallResult<T extends BoundsOptions> = BoundsOptionsResult<T> &
 
 export type BoundsAccessor = {
 	<T extends BoundsOptions>(options: T): BoundsCallResult<T>;
-	getSnapshot: (id: string, key?: string) => Snapshot | null;
-	getLink: (id: string) => BoundsLink | null;
+	getSnapshot: (id: BoundId, key?: string) => Snapshot | null;
+	getLink: (id: BoundId) => BoundsLink | null;
 	interpolateStyle: (
-		id: string,
+		id: BoundId,
 		property: keyof StyleProps,
 		fallback?: number,
 	) => number;
 	interpolateBounds: (
-		id: string,
+		id: BoundId,
 		property: keyof MeasuredDimensions,
 		fallbackOrTargetKey?: number | string,
 		fallback?: number,

package/src/shared/types/index.ts

@@ -2,28 +2,18 @@ export { FALSE, TRUE } from "../constants";
 export type {
 	AnimatedViewStyle,
 	AnimationConfig,
-	LegacyTransitionInterpolatedStyle,
-	NewTransitionInterpolatedStyle,
-	NormalizedTransitionInterpolatedStyle,
-	NormalizedTransitionSlotStyle,
-	OverlayInterpolationProps,
 	ScreenInterpolationProps,
 	ScreenStyleInterpolator,
 	ScreenTransitionState,
 	TransitionInterpolatedStyle,
-	TransitionSlotExplicit,
 	TransitionSlotStyle,
 	TransitionSpec,
 } from "./animation.types";
 export type {
-	BoundEntry,
 	BoundsAccessor,
-	BoundsLink,
 	BoundsMethod,
 	BoundsNavigationAccessor,
-	BoundsNavigationOptions,
-	BoundsNavigationPreset,
-	BoundsStyleOptions,
+	BoundsNavigationZoomOptions,
 } from "./bounds.types";
 export type {
 	ActivationArea,
@@ -32,10 +22,7 @@ export type {
 	GestureValues,
 	SideActivation,
 } from "./gesture.types";
-export type {
-	OverlayMode,
-	OverlayProps,
-} from "./overlay.types";
+export type { OverlayProps } from "./overlay.types";
 export type {
 	Layout,
 	ScreenKey,

package/src/shared/types/overlay.types.ts

@@ -1,18 +1,7 @@
 import type { Route } from "@react-navigation/native";
 import type { DerivedValue } from "react-native-reanimated";
-import type {
-	OverlayInterpolationProps,
-	ScreenInterpolationProps,
-} from "./animation.types";
 import type { ScreenTransitionConfig } from "./screen.types";
 
-/**
- * @deprecated Overlay mode is no longer needed. Overlays now always render as "float" mode.
- * For per-screen overlays, render an absolute-positioned view directly in your screen component
- * and use `useScreenAnimation()` to access animation values.
- */
-export type OverlayMode = "float" | "screen";
-
 /**
  * Props passed to overlay components.
  * Generic over the navigation type since different stacks have different navigation props.
@@ -23,7 +12,7 @@ export type OverlayMode = "float" | "screen";
  */
 export type OverlayScreenState<TNavigation = unknown> = Omit<
 	OverlayProps<TNavigation>,
-	"progress" | "overlayAnimation" | "screenAnimation"
+	"progress"
 > & {
 	index: number;
 	snapTo: (index: number) => void;
@@ -65,20 +54,4 @@ export type OverlayProps<TNavigation = unknown> = {
 	 * This is equivalent to `useScreenAnimation().stackProgress`.
 	 */
 	progress: DerivedValue<number>;
-
-	/**
-	 * Animation values for the overlay.
-	 *
-	 * @deprecated Use `progress` prop or `useScreenAnimation()` instead.
-	 * This prop will be removed in a future version.
-	 */
-	overlayAnimation: DerivedValue<OverlayInterpolationProps>;
-
-	/**
-	 * Animation values for the screen.
-	 *
-	 * @deprecated Use `useScreenAnimation()` hook directly instead.
-	 * This prop will be removed in a future version.
-	 */
-	screenAnimation: DerivedValue<ScreenInterpolationProps>;
 };

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

@@ -4,7 +4,7 @@ import type {
 	TransitionSpec,
 } from "./animation.types";
 import type { GestureActivationArea, GestureDirection } from "./gesture.types";
-import type { OverlayMode, OverlayProps } from "./overlay.types";
+import type { OverlayProps } from "./overlay.types";
 
 export type Layout = {
 	width: number;
@@ -13,6 +13,12 @@ export type Layout = {
 
 export type ScreenKey = string;
 
+/**
+ * A single snap point value. Either a fraction of screen height (0–1) or
+ * `'auto'` to snap to the intrinsic height of the screen content.
+ */
+export type SnapPoint = number | "auto";
+
 export type TransitionAwareProps<T extends object> = AnimatedProps<T> & {
 	/**
 	 * Connects this component to custom animated styles defined in screenStyleInterpolator.
@@ -157,20 +163,9 @@ export type ScreenTransitionConfig = {
 
 	/**
 	 * Function that returns a React Element to display as an overlay.
-	 * For container overlays (overlayMode: 'container'), use ContainerOverlayProps which includes children.
 	 */
 	overlay?: (props: OverlayProps) => React.ReactNode;
 
-	/**
-	 * How the overlay is positioned relative to screens.
-	 *
-	 * @deprecated This option is no longer needed. Overlays now always render as "float" mode
-	 * (single persistent overlay above all screens). For per-screen overlays, render an
-	 * absolute-positioned view directly in your screen component and use `useScreenAnimation()`
-	 * to access animation values.
-	 */
-	overlayMode?: OverlayMode;
-
 	/**
 	 * Whether to show the overlay. The overlay is shown by default when `overlay` is provided.
 	 * Setting this to `false` hides the overlay.
@@ -190,15 +185,21 @@ export type ScreenTransitionConfig = {
 	experimental_enableHighRefreshRate?: boolean;
 
 	/**
-	 * Describes heights where a screen can rest, as fractions of screen height.
-	 * Pass an array of ascending values from 0 to 1.
+	 * Describes heights where a screen can rest, as fractions of screen height,
+	 * or `'auto'` to snap to the intrinsic height of the screen content.
+	 *
+	 * Pass an array of ascending values from 0 to 1, or `'auto'`.
+	 * The `'auto'` value measures the content's natural height after layout and
+	 * converts it to the equivalent fraction of the screen height.
 	 *
 	 * @example
-	 * snapPoints={[0.5, 1.0]} // 50% and 100% of screen height
+	 * snapPoints={[0.5, 1.0]}     // 50% and 100% of screen height
+	 * snapPoints={['auto']}       // snap to content height
+	 * snapPoints={['auto', 1.0]}  // content height or full screen
 	 *
 	 * @default [1.0]
 	 */
-	snapPoints?: number[];
+	snapPoints?: SnapPoint[];
 
 	/**
 	 * The initial snap point index when the screen opens.

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

@@ -58,6 +58,9 @@ export const animateToProgress = ({
 	if (!config) {
 		animating.set(FALSE);
 		progress.set(value);
+		if (!isClosing) {
+			entering.set(FALSE);
+		}
 
 		if (onAnimationFinish) {
 			runOnJS(onAnimationFinish)(true);
@@ -71,6 +74,10 @@ export const animateToProgress = ({
 			"worklet";
 			if (!finished) return;
 
+			if (!isClosing) {
+				entering.set(FALSE);
+			}
+
 			if (onAnimationFinish) {
 				runOnJS(onAnimationFinish)(finished);
 			}

package/src/shared/utils/bounds/helpers/build-bounds-options.ts

@@ -1,12 +1,12 @@
 import { BoundStore } from "../../../stores/bounds";
 import type { ScreenInterpolationProps } from "../../../types/animation.types";
-import type { BoundsOptions } from "../types/options";
+import type { BoundId, BoundsOptions } from "../types/options";
 import { DEFAULT_BOUNDS_OPTIONS } from "./constants";
 import type { ResolveBoundTagParams } from "./resolve-bound-tag";
 
 type BuildBoundsOptionsParams = {
 	props: Omit<ScreenInterpolationProps, "bounds">;
-	id?: string;
+	id?: BoundId;
 	group?: string;
 	overrides?: Partial<BoundsOptions>;
 	mode?: "style" | "navigation";

package/src/shared/utils/bounds/helpers/compute-bounds-styles.ts

@@ -12,7 +12,11 @@ import {
 } from "../../../stores/bounds";
 import type { ScreenTransitionState } from "../../../types/animation.types";
 import type { Layout } from "../../../types/screen.types";
-import type { BoundsComputeParams, BoundsOptions } from "../types/options";
+import type {
+	BoundId,
+	BoundsComputeParams,
+	BoundsOptions,
+} from "../types/options";
 import {
 	computeContentTransformGeometry,
 	computeRelativeGeometry,
@@ -27,7 +31,7 @@ import {
 } from "./style-composers";
 
 const resolveBounds = (params: {
-	id: string;
+	id: BoundId;
 	previous?: ScreenTransitionState;
 	current?: ScreenTransitionState;
 	next?: ScreenTransitionState;
@@ -51,7 +55,7 @@ const resolveBounds = (params: {
 
 	const resolvedPair =
 		params.resolvedPair ??
-		BoundStore.resolveTransitionPair(params.id, {
+		BoundStore.resolveTransitionPair(String(params.id), {
 			currentScreenKey,
 			previousScreenKey,
 			nextScreenKey,
@@ -66,6 +70,9 @@ const resolveBounds = (params: {
 			start: null,
 			end: null,
 			entering,
+			currentScreenKey,
+			sourceScreenKey: resolvedPair.sourceScreenKey,
+			destinationScreenKey: resolvedPair.destinationScreenKey,
 		};
 	}
 
@@ -75,6 +82,9 @@ const resolveBounds = (params: {
 			start: null,
 			end: null,
 			entering,
+			currentScreenKey,
+			sourceScreenKey: resolvedPair.sourceScreenKey,
+			destinationScreenKey: resolvedPair.destinationScreenKey,
 		};
 	}
 
@@ -94,6 +104,9 @@ const resolveBounds = (params: {
 		start,
 		end,
 		entering,
+		currentScreenKey,
+		sourceScreenKey: resolvedPair.sourceScreenKey,
+		destinationScreenKey: resolvedPair.destinationScreenKey,
 	};
 };
 
@@ -111,7 +124,14 @@ export const computeBoundStyles = (
 		return EMPTY_BOUND_HELPER_RESULT;
 	}
 
-	const { start, end, entering } = resolveBounds({
+	const {
+		start,
+		end,
+		entering,
+		currentScreenKey,
+		sourceScreenKey,
+		destinationScreenKey,
+	} = resolveBounds({
 		id,
 		previous,
 		current,
@@ -131,9 +151,15 @@ export const computeBoundStyles = (
 	const ranges: readonly [number, number] = entering ? ENTER_RANGE : EXIT_RANGE;
 
 	if (computeOptions.method === "content") {
+		const currentOwnsSource =
+			!!currentScreenKey &&
+			currentScreenKey === sourceScreenKey &&
+			currentScreenKey !== destinationScreenKey;
+		const contentStart = currentOwnsSource ? end : start;
+		const contentEnd = currentOwnsSource ? start : end;
 		const geometry = computeContentTransformGeometry({
-			start,
-			end,
+			start: contentStart,
+			end: contentEnd,
 			entering,
 			dimensions,
 			anchor: computeOptions.anchor,
@@ -141,10 +167,10 @@ export const computeBoundStyles = (
 		});
 
 		return composeContentStyle({
-			start,
+			start: contentStart,
 			progress,
 			ranges,
-			end,
+			end: contentEnd,
 			geometry,
 			computeOptions,
 		});

package/src/shared/utils/bounds/helpers/geometry.ts

@@ -95,8 +95,9 @@ export function computeRelativeGeometry({
 	return { dx, dy, scaleX, scaleY, entering };
 }
 /**
- * Computes the transform to apply to the entire destination screen so that
- * its bound (end) matches the source bound (start) at progress start.
+ * Computes the transform to apply to the current screen so that its owned
+ * bound (`end`) matches the paired target bound (`start`) at the aligned
+ * phase of the transition.
  */
 export function computeContentTransformGeometry({
 	start,

package/src/shared/utils/bounds/helpers/interpolators.ts

@@ -2,6 +2,7 @@ import type { MeasuredDimensions } from "react-native-reanimated";
 import { ENTER_RANGE, EXIT_RANGE } from "../../../constants";
 import { BoundStore } from "../../../stores/bounds";
 import type { ScreenInterpolationProps } from "../../../types/animation.types";
+import type { BoundId } from "../types/options";
 import { interpolateClamped } from "./interpolate";
 import { interpolateLinkStyle } from "./interpolate-style";
 import type { LinkAccessor } from "./link-accessor";
@@ -18,7 +19,7 @@ export const createInterpolators = ({
 	"worklet";
 
 	const interpolateStyle = (
-		tag: string,
+		tag: BoundId,
 		property: string,
 		fallback?: number,
 	): number => {
@@ -32,7 +33,7 @@ export const createInterpolators = ({
 	};
 
 	const interpolateBoundsFromSnapshot = (
-		tag: string,
+		tag: BoundId,
 		property: keyof MeasuredDimensions,
 		targetKey: string,
 		fallback?: number,
@@ -44,11 +45,12 @@ export const createInterpolators = ({
 		const range = entering ? ENTER_RANGE : EXIT_RANGE;
 		const currentKey = props.current?.route?.key;
 		const fb = fallback ?? 0;
+		const normalizedTag = String(tag);
 
 		const currentSnapshot = currentKey
-			? BoundStore.getSnapshot(tag, currentKey)
+			? BoundStore.getSnapshot(normalizedTag, currentKey)
 			: null;
-		const targetSnapshot = BoundStore.getSnapshot(tag, targetKey);
+		const targetSnapshot = BoundStore.getSnapshot(normalizedTag, targetKey);
 
 		const currentValue = currentSnapshot?.bounds?.[property] ?? fb;
 		const targetValue = targetSnapshot?.bounds?.[property] ?? fb;
@@ -60,7 +62,7 @@ export const createInterpolators = ({
 	};
 
 	const interpolateBoundsFromLink = (
-		tag: string,
+		tag: BoundId,
 		property: keyof MeasuredDimensions,
 		fallback?: number,
 	): number => {
@@ -82,7 +84,7 @@ export const createInterpolators = ({
 	};
 
 	const interpolateBounds = (
-		tag: string,
+		tag: BoundId,
 		property: keyof MeasuredDimensions,
 		fallbackOrTargetKey?: number | string,
 		fallback?: number,

package/src/shared/utils/bounds/helpers/link-accessor.ts

@@ -1,27 +1,31 @@
 import { BoundStore, type Snapshot } from "../../../stores/bounds";
 import type { ScreenInterpolationProps } from "../../../types/animation.types";
 import type { BoundsLink } from "../../../types/bounds.types";
+import type { BoundId } from "../types/options";
 
 type GetProps = () => Omit<ScreenInterpolationProps, "bounds">;
 
 export type LinkAccessor = {
-	getSnapshot: (tag: string, key?: string) => Snapshot | null;
-	getLink: (tag: string) => BoundsLink | null;
+	getSnapshot: (tag: BoundId, key?: string) => Snapshot | null;
+	getLink: (tag: BoundId) => BoundsLink | null;
 };
 
 export const createLinkAccessor = (getProps: GetProps): LinkAccessor => {
 	"worklet";
 
-	const getSnapshot = (tag: string, key?: string): Snapshot | null => {
+	const getSnapshot = (tag: BoundId, key?: string): Snapshot | null => {
 		"worklet";
 		if (!key) return null;
-		return BoundStore.getSnapshot(tag, key);
+		return BoundStore.getSnapshot(String(tag), key);
 	};
 
-	const getLink = (tag: string): BoundsLink | null => {
+	const getLink = (tag: BoundId): BoundsLink | null => {
 		"worklet";
 		const props = getProps();
-		const link = BoundStore.getActiveLink(tag, props.current?.route.key);
+		const link = BoundStore.getActiveLink(
+			String(tag),
+			props.current?.route.key,
+		);
 		if (!link) return null;
 		return {
 			source: link.source

package/src/shared/utils/bounds/helpers/resolve-bound-tag.ts

@@ -1,7 +1,8 @@
 import { BoundStore } from "../../../stores/bounds";
+import type { BoundId } from "../types/options";
 
 export type ResolveBoundTagParams = {
-	id?: string;
+	id?: BoundId;
 	group?: string;
 };
 
@@ -11,16 +12,18 @@ export const resolveBoundTag = ({
 }: ResolveBoundTagParams): string | undefined => {
 	"worklet";
 
-	if (!id) return id;
+	if (id === undefined || id === null || id === "") return undefined;
+
+	const normalizedId = String(id);
 
 	if (!group) {
-		return id;
+		return normalizedId;
 	}
 
 	const currentActiveId = BoundStore.getGroupActiveId(group);
-	if (currentActiveId !== id) {
-		BoundStore.setGroupActiveId(group, id);
+	if (currentActiveId !== normalizedId) {
+		BoundStore.setGroupActiveId(group, normalizedId);
 	}
 
-	return `${group}:${id}`;
+	return `${group}:${normalizedId}`;
 };

package/src/shared/utils/bounds/helpers/style-composers.ts

@@ -22,9 +22,10 @@ export type ElementComposeParams = {
 };
 
 /**
- * Screen-level content transform params (for aligning destination bound to source).
- * - start/end: absolute window bounds for the shared id (source/destination)
- * - geometry: precomputed screen-level tx/ty/sx/sy plus ranges/entering
+ * Screen-level content transform params.
+ * - start/end: absolute window bounds for the paired target and the current
+ *   screen-owned bound
+ * - geometry: precomputed screen-level tx/ty/scale plus ranges/entering
  * - interp: function to interpolate between numbers using the correct progress range
  */
 type ContentComposeParams = {