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

package/src/components/boundary/components/boundary-lifecycle.tsx

@@ -1,7 +1,7 @@
 import { memo } from "react";
 import type { View } from "react-native";
 import type { AnimatedRef } from "react-native-reanimated";
-import { useDescriptorsStore } from "../../../providers/screen/descriptors";
+import { useBuilderStore } from "../../../providers/screen/builder";
 import type { BoundTag } from "../../../stores/bounds/types";
 import { useBoundaryMeasurement } from "../hooks/use-boundary-measurement";
 import type {
@@ -32,7 +32,7 @@ export const BoundaryLifecycle = memo(function BoundaryLifecycle({
 	measuredRef,
 	style,
 }: BoundaryLifecycleProps) {
-	const hasConfiguredInterpolator = useDescriptorsStore(
+	const hasConfiguredInterpolator = useBuilderStore(
 		(s) => s.derivations.hasConfiguredInterpolator,
 	);
 

package/src/components/boundary/components/boundary-target.tsx

@@ -4,7 +4,7 @@ import Animated from "react-native-reanimated";
 import {
 	useComposedSlotStyles,
 	useSlotLayoutStyles,
-} from "../../../providers/screen/styles";
+} from "../../../providers/screen/orchestrator/styles";
 import { logger } from "../../../utils/logger";
 import {
 	BoundaryContentPortal,

package/src/components/boundary/hooks/lifecycles/use-initial-destination-measurement.ts

@@ -7,9 +7,9 @@ import {
 	withTiming,
 } from "react-native-reanimated";
 import { scheduleOnUI } from "react-native-worklets";
-import { useDescriptorsStore } from "../../../../providers/screen/descriptors";
+import { useBuilderStore } from "../../../../providers/screen/builder";
+import { useMotionStore } from "../../../../providers/screen/motion";
 import { useBlankStackStore } from "../../../../providers/stack/blank-stack.provider";
-import { AnimationStore } from "../../../../stores/animation.store";
 import {
 	createScreenPairKey,
 	getSourceScreenKeyFromPairKey,
@@ -21,7 +21,6 @@ import {
 import { getLink } from "../../../../stores/bounds/internals/links";
 import { pairs } from "../../../../stores/bounds/internals/state";
 import type { BoundTag } from "../../../../stores/bounds/types";
-import { SystemStore } from "../../../../stores/system.store";
 import { logger } from "../../../../utils/logger";
 import type { MeasureBoundary } from "../../types";
 import { getInitialDestinationMeasurementSignal } from "../../utils/destination-signals";
@@ -35,6 +34,7 @@ const HANDSHAKE_RETRY_DELAY_MS = 16;
  * so the open proceeds without that boundary.
  */
 const MAX_HANDSHAKE_RETRIES = 20;
+const EMPTY_SCENES: never[] = [];
 
 interface UseInitialDestinationMeasurementParams {
 	boundTag: BoundTag;
@@ -48,11 +48,11 @@ export const useInitialDestinationMeasurement = ({
 	measureBoundary,
 }: UseInitialDestinationMeasurementParams) => {
 	const { tag, linkKey, group } = boundTag;
-	const currentScreenKey = useDescriptorsStore(
+	const currentScreenKey = useBuilderStore(
 		(s) => s.derivations.currentScreenKey,
 	);
-	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
-	const destinationPairKey = useDescriptorsStore(
+	const nextScreenKey = useBuilderStore((s) => s.derivations.nextScreenKey);
+	const destinationPairKey = useBuilderStore(
 		(s) => s.derivations.destinationPairKey,
 	);
 	const destinationEnabled = enabled && !nextScreenKey;
@@ -60,7 +60,9 @@ export const useInitialDestinationMeasurement = ({
 	const preferredSourceScreenKey = destinationPairKey
 		? getSourceScreenKeyFromPairKey(destinationPairKey)
 		: undefined;
-	const stackScenes = useBlankStackStore((store) => store.scenes);
+	const stackScenes = useBlankStackStore((store) =>
+		canReceiveDestination ? store.scenes : EMPTY_SCENES,
+	);
 	// A retained closing screen can still have registered boundaries, but it
 	// cannot own a new transition link.
 	const closingSourceScreenKeys = useMemo(
@@ -70,14 +72,11 @@ export const useInitialDestinationMeasurement = ({
 				.map((scene) => scene.route.key),
 		[stackScenes],
 	);
-	const progress = AnimationStore.getValue(
-		currentScreenKey,
-		"transitionProgress",
-	);
+	const progress = useMotionStore((store) => store.state.transitionProgress);
 
-	const {
-		actions: { blockLifecycleStart, unblockLifecycleStart },
-	} = SystemStore.getBag(currentScreenKey);
+	const { blockLifecycleStart, unblockLifecycleStart } = useMotionStore(
+		(store) => store.state.actions,
+	);
 
 	const isBlockingLifecycleStart = useSharedValue(0);
 	const retryToken = useSharedValue(0);

package/src/components/boundary/hooks/lifecycles/use-initial-source-measurement.ts

@@ -1,5 +1,5 @@
 import { useAnimatedReaction, useSharedValue } from "react-native-reanimated";
-import { useDescriptorsStore } from "../../../../providers/screen/descriptors";
+import { useBuilderStore } from "../../../../providers/screen/builder";
 import { getPairKeyForSource } from "../../../../stores/bounds/internals/links";
 import { pairs } from "../../../../stores/bounds/internals/state";
 import type { BoundTag } from "../../../../stores/bounds/types";
@@ -12,7 +12,7 @@ export const useInitialSourceMeasurement = (params: {
 	boundTag: BoundTag;
 }) => {
 	const { enabled, measureBoundary, boundTag } = params;
-	const currentScreenKey = useDescriptorsStore(
+	const currentScreenKey = useBuilderStore(
 		(s) => s.derivations.currentScreenKey,
 	);
 	const lastSourceCaptureSignal = useSharedValue<string | null>(null);

package/src/components/boundary/hooks/lifecycles/use-refresh-boundary.ts

@@ -1,6 +1,6 @@
 import { useAnimatedReaction } from "react-native-reanimated";
-import { useDescriptorsStore } from "../../../../providers/screen/descriptors";
-import { AnimationStore } from "../../../../stores/animation.store";
+import { useBuilderStore } from "../../../../providers/screen/builder";
+import { useOptionalMotionStore } from "../../../../providers/screen/motion";
 import {
 	getPairKeyForDestination,
 	getPairKeyForSource,
@@ -22,31 +22,34 @@ export const useRefreshBoundary = ({
 	measureBoundary,
 }: UseRefreshBoundaryParams) => {
 	const { linkKey, group } = boundTag;
-	const currentScreenKey = useDescriptorsStore(
+	const currentScreenKey = useBuilderStore(
 		(s) => s.derivations.currentScreenKey,
 	);
-	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
+	const nextScreenKey = useBuilderStore((s) => s.derivations.nextScreenKey);
 	// Source-side boundaries refresh from the next screen's lifecycle pulse.
 	// Destination-side boundaries have no next screen, so they refresh from self.
 	const refreshScreenKey = nextScreenKey ?? currentScreenKey;
-	const refreshWillAnimate = AnimationStore.getValue(
+	const willAnimate = useOptionalMotionStore(
 		refreshScreenKey,
-		"willAnimate",
+		(store) => store.state.willAnimate,
 	);
-	const refreshSettled = AnimationStore.getValue(
+	const progressSettled = useOptionalMotionStore(
 		refreshScreenKey,
-		"progressSettled",
+		(store) => store.state.progressSettled,
+	);
+	const closing = useOptionalMotionStore(
+		refreshScreenKey,
+		(store) => store.state.closing,
 	);
-	const refreshClosing = AnimationStore.getValue(refreshScreenKey, "closing");
 
 	useAnimatedReaction(
 		() => {
 			"worklet";
 
-			if (!enabled) return null;
+			if (!enabled || !willAnimate || !progressSettled || !closing) return null;
 
-			const shouldRefresh = !!refreshWillAnimate.get();
-			const settled = !!refreshSettled.get();
+			const shouldRefresh = !!willAnimate.get();
+			const settled = !!progressSettled.get();
 			// A group's active member can change while the transition is settled
 			// (for example, paging a destination gallery). Let that member publish
 			// fresh bounds even though there is no willAnimate lifecycle pulse yet.
@@ -67,7 +70,7 @@ export const useRefreshBoundary = ({
 				group,
 				shouldRefresh,
 				settled,
-				closing: !!refreshClosing.get(),
+				closing: !!closing.get(),
 				linkState: pairs.get(),
 			});
 		},

package/src/components/boundary/hooks/use-measurer.ts

@@ -2,11 +2,14 @@ import { useCallback } from "react";
 import type { View } from "react-native";
 import { useWindowDimensions } from "react-native";
 import type { AnimatedRef, StyleProps } from "react-native-reanimated";
-import { applyMeasuredBoundsWrites } from "../../../providers/helpers/measured-bounds-writes";
-import { useScreenSlotStore } from "../../../providers/screen/styles";
+import { useMotionStore } from "../../../providers/screen/motion";
+import { setEntry } from "../../../stores/bounds/internals/entries";
+import {
+	setDestination,
+	setSource,
+} from "../../../stores/bounds/internals/links";
 import type { BoundTag } from "../../../stores/bounds/types";
 import { ScrollStore } from "../../../stores/scroll.store";
-import { SystemStore } from "../../../stores/system.store";
 import { getVisibilityBlockOffset } from "../../../utils/visibility-block-offset";
 import type { BoundaryLocalMeasurementValue, MeasureBoundary } from "../types";
 import {
@@ -42,13 +45,10 @@ export const useMeasurer = ({
 
 	const scrollState = ScrollStore.getValue(currentScreenKey, "coordination");
 	const scrollMetadata = ScrollStore.getValue(currentScreenKey, "metadata");
-	const pendingLifecycleStartBlockCount = SystemStore.getValue(
-		currentScreenKey,
-		"pendingLifecycleStartBlockCount",
-	);
-	const visibilityBlocked = useScreenSlotStore(
-		(store) => store.visibilityBlocked,
+	const pendingLifecycleStartBlockCount = useMotionStore(
+		(store) => store.state.pendingLifecycleStartBlockCount,
 	);
+	const isScreenReady = useMotionStore((store) => store.isScreenReady);
 
 	return useCallback(
 		(target) => {
@@ -64,7 +64,7 @@ export const useMeasurer = ({
 
 			const correctedMeasured = correctMeasuredBoundsForVisibilityGate({
 				measured,
-				visibilityBlocked: visibilityBlocked.get(),
+				isScreenReady: isScreenReady.get(),
 				visibilityBlockOffset: getVisibilityBlockOffset(viewportHeight),
 				viewportWidth,
 				viewportHeight,
@@ -103,17 +103,32 @@ export const useMeasurer = ({
 				scrollMetadata.get(),
 			);
 
-			applyMeasuredBoundsWrites({
-				entryTag: boundTag.tag,
-				linkId: boundTag.linkKey,
-				group: boundTag.group,
-				currentScreenKey,
-				measured: measuredWithScroll,
-				preparedStyles,
-				linkWrite: target,
-				handoff,
-				escapeClipping,
-			});
+			// Refresh the public bounds entry on every accepted measurement.
+			setEntry(boundTag.tag, currentScreenKey, { bounds: measuredWithScroll });
+
+			if (target.type === "source") {
+				setSource(
+					target.pairKey,
+					boundTag.linkKey,
+					currentScreenKey,
+					measuredWithScroll,
+					preparedStyles,
+					boundTag.group,
+					{ handoff, escapeClipping },
+				);
+			}
+
+			if (target.type === "destination") {
+				setDestination(
+					target.pairKey,
+					boundTag.linkKey,
+					currentScreenKey,
+					measuredWithScroll,
+					preparedStyles,
+					boundTag.group,
+					{ handoff },
+				);
+			}
 		},
 		[
 			enabled,
@@ -129,7 +144,7 @@ export const useMeasurer = ({
 			scrollState,
 			scrollMetadata,
 			pendingLifecycleStartBlockCount,
-			visibilityBlocked,
+			isScreenReady,
 		],
 	);
 };

package/src/components/boundary/portal/components/boundary-content-portal/helpers/active-handoff-receiver.ts

@@ -57,7 +57,7 @@ export const resolveHandoffAttachmentCandidate = ({
 	activeReceiverScreenKey,
 	attachedReceiverScreenKey,
 	hasActiveCloseFinished,
-	interpolatorReady,
+	isScreenReady,
 	pairChangedDuringClose = false,
 	pairDestinationScreenKey,
 	pairHasBoundaryLink,
@@ -67,7 +67,7 @@ export const resolveHandoffAttachmentCandidate = ({
 	activeReceiverScreenKey: string | null;
 	attachedReceiverScreenKey: string;
 	hasActiveCloseFinished: boolean;
-	interpolatorReady: boolean;
+	isScreenReady: boolean;
 	pairChangedDuringClose?: boolean;
 	pairDestinationScreenKey: string | null;
 	pairHasBoundaryLink?: boolean;
@@ -87,7 +87,7 @@ export const resolveHandoffAttachmentCandidate = ({
 
 	if (
 		activeReceiverClosing &&
-		interpolatorReady &&
+		isScreenReady &&
 		pairDestinationScreenKey &&
 		pairChangedDuringClose
 	) {
@@ -118,7 +118,7 @@ export const resolveHandoffAttachmentCandidate = ({
 	if (
 		activeReceiverClosing &&
 		attachedReceiverScreenKey !== activeReceiverScreenKey &&
-		interpolatorReady &&
+		isScreenReady &&
 		pairDestinationScreenKey
 	) {
 		return pairDestinationScreenKey;

package/src/components/boundary/portal/components/boundary-content-portal/helpers/handoff-visibility.ts

@@ -0,0 +1,23 @@
+export function canActivateHandoffReceiver({
+	returningFromActiveClose,
+	activatingPairDestination,
+	animationProgress,
+	receiverIsActiveDestination,
+	destinationIsScreenReady,
+}: {
+	returningFromActiveClose: boolean;
+	activatingPairDestination: boolean;
+	animationProgress: number;
+	receiverIsActiveDestination: boolean;
+	destinationIsScreenReady: boolean | undefined;
+}) {
+	"worklet";
+	// Keep the loaded source in place until its receiving screen is visible.
+	if (receiverIsActiveDestination && destinationIsScreenReady !== true)
+		return false;
+	return (
+		returningFromActiveClose ||
+		activatingPairDestination ||
+		animationProgress > 0
+	);
+}

package/src/components/boundary/portal/components/boundary-content-portal/hooks/use-boundary-content-portal-attachment.ts

@@ -1,12 +1,12 @@
 import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
-import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
+import { useBuilderStore } from "../../../../../../providers/screen/builder";
 import {
-	useOptionalScreenSlotStore,
-	useScreenSlotStore,
-} from "../../../../../../providers/screen/styles";
-import { hasCloseTransitionFinished } from "../../../../../../providers/screen/styles/helpers/transition-visual-state";
+	useMotionStore,
+	useOptionalMotionStore,
+} from "../../../../../../providers/screen/motion";
+import { hasCloseTransitionFinished } from "../../../../../../providers/screen/motion/helpers/transition-visual-state";
+import { useOrchestratorStore } from "../../../../../../providers/screen/orchestrator";
 import { useBlankStackStore } from "../../../../../../providers/stack/blank-stack.provider";
-import { AnimationStore } from "../../../../../../stores/animation.store";
 import { getLinkKeyFromTag } from "../../../../../../stores/bounds/helpers/link-pairs.helpers";
 import { getEntry } from "../../../../../../stores/bounds/internals/entries";
 import {
@@ -18,7 +18,6 @@ import type {
 	LinkPairState,
 	TagLink,
 } from "../../../../../../stores/bounds/types";
-import { SystemStore } from "../../../../../../stores/system.store";
 import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
 import {
 	resolveActiveHandoffReceiver,
@@ -27,6 +26,7 @@ import {
 	resolveRequestedHandoffPairKey,
 	resolveRequestedHandoffReceiver,
 } from "../helpers/active-handoff-receiver";
+import { canActivateHandoffReceiver } from "../helpers/handoff-visibility";
 import { createBoundaryContentPortalHostName } from "../helpers/host-name";
 
 interface UseBoundaryContentPortalAttachmentParams {
@@ -49,22 +49,22 @@ const isCompleteActiveLink = (
 export const useBoundaryContentPortalAttachment = ({
 	boundaryId,
 }: UseBoundaryContentPortalAttachmentParams) => {
-	const slotsMap = useScreenSlotStore((store) => store.slotsMap);
+	const slotsMap = useOrchestratorStore((store) => store.slotsMap);
 
-	const currentScreenKey = useDescriptorsStore(
+	const currentScreenKey = useBuilderStore(
 		(s) => s.derivations.currentScreenKey,
 	);
-	const nextScreenKey = useDescriptorsStore((s) => s.derivations.nextScreenKey);
-	const sourcePairKey = useDescriptorsStore((s) => s.derivations.sourcePairKey);
-	const destinationPairKey = useDescriptorsStore(
+	const nextScreenKey = useBuilderStore((s) => s.derivations.nextScreenKey);
+	const sourcePairKey = useBuilderStore((s) => s.derivations.sourcePairKey);
+	const destinationPairKey = useBuilderStore(
 		(s) => s.derivations.destinationPairKey,
 	);
-	const destinationSlots = useOptionalScreenSlotStore(
+	const destinationIsScreenReady = useOptionalMotionStore(
 		nextScreenKey ?? currentScreenKey,
+		(store) => store.isScreenReady,
 	);
-	const unavailableInterpolatorReady = useSharedValue(0);
-	const interpolatorReady =
-		destinationSlots?.interpolatorReady ?? unavailableInterpolatorReady;
+	const unavailableIsScreenReady = useSharedValue(false);
+	const screenReadiness = destinationIsScreenReady ?? unavailableIsScreenReady;
 
 	const activeReceiverScreenKey = useBlankStackStore(
 		resolveActiveHandoffReceiver,
@@ -73,14 +73,24 @@ export const useBoundaryContentPortalAttachment = ({
 		resolvePreviousHandoffReceiver,
 	);
 
-	const activeReceiverAnimationProgress = SystemStore.getValue(
+	const localAnimationProgress = useMotionStore(
+		(store) => store.state.animationProgress,
+	);
+	const receiverAnimationProgress = useOptionalMotionStore(
+		activeReceiverScreenKey ?? currentScreenKey,
+		(store) => store.state.animationProgress,
+	);
+	const activeReceiverAnimationProgress =
+		receiverAnimationProgress ?? localAnimationProgress;
+
+	const activeReceiverClosing = useOptionalMotionStore(
 		activeReceiverScreenKey ?? currentScreenKey,
-		"animationProgress",
+		(store) => store.state.closing,
 	);
 
-	const activeReceiverClosing = AnimationStore.getValue(
+	const activeReceiverIsScreenReady = useOptionalMotionStore(
 		activeReceiverScreenKey ?? currentScreenKey,
-		"closing",
+		(store) => store.isScreenReady,
 	);
 
 	const attachedReceiverScreenKey = useSharedValue(currentScreenKey);
@@ -95,7 +105,7 @@ export const useBoundaryContentPortalAttachment = ({
 			handoffTarget,
 			...slotProps
 		} = slot?.props ?? {};
-		const closing = activeReceiverClosing.get();
+		const closing = activeReceiverClosing?.get() ?? 0;
 		const animationProgress = activeReceiverAnimationProgress.get();
 
 		if (!closing) {
@@ -167,7 +177,7 @@ export const useBoundaryContentPortalAttachment = ({
 			: null;
 		const requestedLink = requestedPair?.links[boundaryLinkKey];
 
-		const isInterpolatorReady = interpolatorReady.get();
+		const isScreenReady = screenReadiness.get();
 		const attachedScreenKey = attachedReceiverScreenKey.get();
 
 		const automaticReceiverScreenKey = resolveHandoffAttachmentCandidate({
@@ -175,7 +185,7 @@ export const useBoundaryContentPortalAttachment = ({
 			activeReceiverScreenKey,
 			attachedReceiverScreenKey: attachedScreenKey,
 			hasActiveCloseFinished,
-			interpolatorReady: !!isInterpolatorReady,
+			isScreenReady,
 			pairChangedDuringClose,
 			pairDestinationScreenKey: pairDestination,
 			pairHasBoundaryLink: automaticLink !== undefined,
@@ -189,7 +199,7 @@ export const useBoundaryContentPortalAttachment = ({
 			automaticScreenKey: automaticReceiverScreenKey,
 			destinationReady:
 				requestedDestinationScreenKey === activeReceiverScreenKey ||
-				!!isInterpolatorReady,
+				isScreenReady,
 			destinationScreenKey: requestedDestinationScreenKey,
 			handoffTarget,
 			sourceScreenKey:
@@ -209,13 +219,18 @@ export const useBoundaryContentPortalAttachment = ({
 
 		const activatingPairDestination =
 			!!pairDestination &&
-			!!isInterpolatorReady &&
+			isScreenReady &&
 			nextReceiverScreenKey === pairDestination;
 
-		const canActivateReceiver =
-			returningFromActiveClose ||
-			activatingPairDestination ||
-			animationProgress > 0;
+		const canActivateReceiver = canActivateHandoffReceiver({
+			returningFromActiveClose,
+			activatingPairDestination,
+			animationProgress,
+			receiverIsActiveDestination:
+				!returningFromActiveClose &&
+				nextReceiverScreenKey === activeReceiverScreenKey,
+			destinationIsScreenReady: activeReceiverIsScreenReady?.get(),
+		});
 
 		if (nextReceiverScreenKey && receiverReady && canActivateReceiver) {
 			attachedReceiverScreenKey.set(nextReceiverScreenKey);

package/src/components/boundary/portal/components/boundary-portal/components/host.tsx

@@ -7,7 +7,7 @@ import {
 	type ViewStyle,
 } from "react-native";
 import Animated from "react-native-reanimated";
-import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
+import { useBuilderStore } from "../../../../../../providers/screen/builder";
 import { PORTAL_POINTER_EVENTS } from "../../../teleport";
 import { useHostMeasurement } from "../hooks/use-host-measurement";
 import { registerHost, unregisterHost } from "../stores/host-registry.store";
@@ -25,7 +25,7 @@ type HostImplProps = PublicHostProps & {
 };
 
 function HostImpl({ fallback = false, style }: HostImplProps) {
-	const screenKey = useDescriptorsStore((s) => s.derivations.currentScreenKey);
+	const screenKey = useBuilderStore((s) => s.derivations.currentScreenKey);
 	const generatedHostKeyRef = useRef<string | null>(null);
 
 	if (generatedHostKeyRef.current === null) {

package/src/components/boundary/portal/components/boundary-portal/components/portal-boundary-host.tsx

@@ -12,7 +12,7 @@ import Animated, {
 	useAnimatedStyle,
 } from "react-native-reanimated";
 import { NO_STYLES } from "../../../../../../constants";
-import { composeSlotStyleWithLocalTransform } from "../../../../../../providers/screen/styles/helpers/compose-slot-style";
+import { composeSlotStyleWithLocalTransform } from "../../../../../../providers/screen/orchestrator/styles/helpers/compose-slot-style";
 import { NativePortalHost, PORTAL_POINTER_EVENTS } from "../../../teleport";
 import { resolveBoundaryLocalMeasurement } from "../helpers/local-measurement";
 import { resolvePortalOffsetStyle } from "../helpers/offset-style";

package/src/components/boundary/portal/components/boundary-portal/hooks/use-boundary-portal-attachment.ts

@@ -1,6 +1,6 @@
 import { useAnimatedProps, useSharedValue } from "react-native-reanimated";
-import { useDescriptorsStore } from "../../../../../../providers/screen/descriptors";
-import { useScreenSlotStore } from "../../../../../../providers/screen/styles";
+import { useBuilderStore } from "../../../../../../providers/screen/builder";
+import { useOrchestratorStore } from "../../../../../../providers/screen/orchestrator";
 import { useBoundaryRootStore } from "../../../../providers/boundary-root.provider";
 import { PORTAL_HOST_NAME_RESET_VALUE } from "../../../utils/naming";
 import { useActiveHostKey } from "../stores/host-registry.store";
@@ -20,10 +20,10 @@ export const useBoundaryPortalAttachment = ({
 
 		return root.localMeasurement;
 	});
-	const currentScreenKey = useDescriptorsStore(
+	const currentScreenKey = useBuilderStore(
 		(s) => s.derivations.currentScreenKey,
 	);
-	const slotsMap = useScreenSlotStore((store) => store.slotsMap);
+	const slotsMap = useOrchestratorStore((store) => store.slotsMap);
 	const portalHostName = useSharedValue<string | null>(null);
 	const portalHostReady = useSharedValue(false);
 	const escapeHostKey = useActiveHostKey(currentScreenKey);

package/src/components/boundary/providers/boundary-root.provider.tsx

@@ -9,11 +9,11 @@ import {
 import type { View } from "react-native";
 import type { AnimatedRef } from "react-native-reanimated";
 import { useAnimatedRef, useSharedValue } from "react-native-reanimated";
-import { useDescriptorsStore } from "../../../providers/screen/descriptors";
+import { useBuilderStore } from "../../../providers/screen/builder";
 import {
 	useComposedSlotStyles,
 	useSlotStackingStyles,
-} from "../../../providers/screen/styles";
+} from "../../../providers/screen/orchestrator/styles";
 import { useBlankStackStore } from "../../../providers/stack/blank-stack.provider";
 import { createBoundTag } from "../../../stores/bounds/helpers/link-pairs.helpers";
 import type { BoundTag } from "../../../stores/bounds/types";
@@ -99,7 +99,7 @@ export const {
 			escapeClipping,
 		});
 
-		const currentScreenKey = useDescriptorsStore(
+		const currentScreenKey = useBuilderStore(
 			(s) => s.derivations.currentScreenKey,
 		);
 		const isCurrentScreenClosing = useBlankStackStore(

package/src/components/boundary/utils/measured-bounds.ts

@@ -86,13 +86,13 @@ export const isMeasurementInViewport = (
 
 export const correctMeasuredBoundsForVisibilityGate = ({
 	measured,
-	visibilityBlocked,
+	isScreenReady,
 	visibilityBlockOffset,
 	viewportWidth,
 	viewportHeight,
 }: {
 	measured: MeasuredDimensions;
-	visibilityBlocked: boolean;
+	isScreenReady: boolean;
 	visibilityBlockOffset: number;
 	viewportWidth: number;
 	viewportHeight: number;
@@ -100,7 +100,7 @@ export const correctMeasuredBoundsForVisibilityGate = ({
 	"worklet";
 
 	if (
-		!visibilityBlocked ||
+		isScreenReady ||
 		visibilityBlockOffset <= 0 ||
 		isMeasurementInViewport(measured, viewportWidth, viewportHeight)
 	) {

package/src/components/create-transition-aware-component.tsx

@@ -1,14 +1,19 @@
 /** biome-ignore-all lint/style/noNonNullAssertion: <This helper is usually being used inside a transitionable stack> */
 import type React from "react";
 import { type ComponentType, forwardRef, memo } from "react";
+import type { LayoutChangeEvent } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
 import Animated, { useComposedEventHandler } from "react-native-reanimated";
 import {
 	ScrollMetadataOwnerProvider,
 	useScrollGestureCoordination,
-} from "../providers/screen/gestures/scroll-coordination";
-import { useSlotProps, useSlotStyles } from "../providers/screen/styles";
+} from "../providers/screen/motion/gestures/scroll-coordination";
+import {
+	useSlotProps,
+	useSlotStyles,
+} from "../providers/screen/orchestrator/styles";
 import type { TransitionAwareProps } from "../types/screen.types";
+import { useContentLayout } from "./screen/container/hooks/use-content-layout";
 
 interface CreateTransitionAwareComponentOptions {
 	isScrollable?: boolean;
@@ -110,17 +115,27 @@ export function createTransitionAwareComponent<P extends object>(
 			children,
 			style,
 			styleId,
+			onLayout,
 			animatedProps: userAnimatedProps,
 			...rest
 		} = props as any;
 
 		const associatedStyles = useSlotStyles(styleId);
 		const associatedProps = useSlotProps(styleId);
+		const measureLayout = useContentLayout(styleId);
 
 		return (
 			<AnimatedComponent
 				{...(rest as any)}
 				ref={ref}
+				onLayout={
+					measureLayout
+						? (event: LayoutChangeEvent) => {
+								measureLayout(event);
+								onLayout?.(event);
+							}
+						: onLayout
+				}
 				style={[style, associatedStyles]}
 				animatedProps={userAnimatedProps ?? associatedProps}
 			>

package/src/components/overlay/helpers/create-overlay-interpolator-frame.ts

@@ -1,5 +1,5 @@
-import { updateDerivations } from "../../../providers/screen/animation/helpers/derivations";
-import type { ScreenInterpolatorFrame } from "../../../providers/screen/animation/helpers/pipeline";
+import { updateDerivations } from "../../../providers/screen/orchestrator/helpers/derivations";
+import type { ScreenInterpolatorFrame } from "../../../providers/screen/orchestrator/helpers/pipeline";
 
 export const shouldUseOverlayGestureDriver = (
 	overlayFrame: ScreenInterpolatorFrame,