fix/global bounds

.release-it.json

@@ -53,6 +53,7 @@
 		"before:git:release": "node ../../.github/scripts/release-notes.mjs ${version} --check",
 		"after:bump": [
 			"node ../../.github/scripts/sync-bun-lock-version.mjs",
+			"git add ../../bun.lock",
 			"bun run --cwd ../.. build",
 			"npm pack --dry-run"
 		]

apps/e2e/.maestro/inactive-hide-thaw.yaml

@@ -0,0 +1,55 @@
+appId: "com.eds2002.e2e"
+name: "Inactive hide thaw restores gestures"
+tags:
+  - maestro
+  - regression
+---
+- launchApp:
+    clearState: true
+- openLink: "e2e:///blank-stack/inactive-behavior"
+- assertVisible:
+    id: "blank-inactive-behavior-hide"
+- tapOn:
+    id: "blank-inactive-behavior-hide"
+- assertVisible:
+    id: "inactive-behavior-hide-push-next"
+
+# Control: the same screen gesture works before it has ever been frozen.
+- swipe:
+    start: "2%, 50%"
+    end: "99%, 50%"
+    duration: 250
+- waitForAnimationToEnd
+- assertVisible:
+    id: "blank-inactive-behavior-hide"
+- tapOn:
+    id: "blank-inactive-behavior-hide"
+- assertVisible:
+    id: "inactive-behavior-hide-push-next"
+
+# Push far enough for the original route to become inactive, frozen, and hidden.
+- tapOn:
+    id: "inactive-behavior-hide-push-next"
+- waitForAnimationToEnd
+- tapOn:
+    id: "inactive-behavior-hide-push-next"
+- waitForAnimationToEnd
+
+# Pop both newer routes so the original route thaws and becomes active again.
+- tapOn:
+    id: "inactive-behavior-hide-back"
+- waitForAnimationToEnd
+- tapOn:
+    id: "inactive-behavior-hide-back"
+- waitForAnimationToEnd
+
+# The gesture detector on the previously hidden route must reattach.
+- swipe:
+    start: "2%, 50%"
+    end: "99%, 50%"
+    duration: 250
+- waitForAnimationToEnd
+- assertVisible:
+    id: "blank-inactive-behavior-hide"
+- assertNotVisible:
+    id: "inactive-behavior-hide-push-next"

apps/e2e/app/[stackType]/bounds/_layout.tsx

@@ -12,6 +12,9 @@ export default function BoundsLayout() {
 	return (
 		<StackNavigator screenOptions={navigatorScreenOptions}>
 			<StackNavigator.Screen name="index" />
+			<StackNavigator.Screen name="example-1" options={{ ...IOSSlide() }} />
+			<StackNavigator.Screen name="example-2" options={{ ...IOSSlide() }} />
+			<StackNavigator.Screen name="example-3" options={{ ...IOSSlide() }} />
 			<StackNavigator.Screen name="style-id" options={{ ...IOSSlide() }} />
 			<StackNavigator.Screen name="zoom" options={{ ...IOSSlide() }} />
 			<StackNavigator.Screen name="sync" options={{ ...IOSSlide() }} />
@@ -23,6 +26,7 @@ export default function BoundsLayout() {
 				name="handoff-multiflow"
 				options={{ ...IOSSlide() }}
 			/>
+			<StackNavigator.Screen name="stacking" options={{ ...IOSSlide() }} />
 		</StackNavigator>
 	);
 }

apps/e2e/app/[stackType]/bounds/example-1/_layout.tsx

@@ -0,0 +1,30 @@
+import Transition from "react-native-screen-transitions";
+import { useResolvedStackType } from "@/components/stack-examples/stack-routing";
+import { BlankStack } from "@/layouts/blank-stack";
+import { Stack } from "@/layouts/stack";
+import { nestedBoundaryZoomInterpolator } from "../nested-boundary-example";
+
+export default function NestedSourceExampleLayout() {
+	const stackType = useResolvedStackType();
+	const StackNavigator = stackType === "native-stack" ? Stack : BlankStack;
+	const screenOptions =
+		stackType === "native-stack" ? { enableTransitions: true } : undefined;
+
+	return (
+		<StackNavigator screenOptions={screenOptions}>
+			<StackNavigator.Screen name="nested" />
+			<StackNavigator.Screen
+				name="destination"
+				options={{
+					gestureEnabled: true,
+					gestureDirection: ["bidirectional", "pinch-in"],
+					gestureProgressMode: "freeform",
+					gestureReleaseVelocityScale: 1.6,
+					navigationMaskEnabled: true,
+					screenStyleInterpolator: nestedBoundaryZoomInterpolator,
+					transitionSpec: Transition.Specs.Zoom,
+				}}
+			/>
+		</StackNavigator>
+	);
+}

apps/e2e/app/[stackType]/bounds/example-1/destination.tsx

@@ -0,0 +1,5 @@
+import { NestedBoundaryDestination } from "../nested-boundary-example";
+
+export default function ParentDestinationScreen() {
+	return <NestedBoundaryDestination title="Parent destination" />;
+}

apps/e2e/app/[stackType]/bounds/example-1/nested/_layout.tsx

@@ -0,0 +1,16 @@
+import { useResolvedStackType } from "@/components/stack-examples/stack-routing";
+import { BlankStack } from "@/layouts/blank-stack";
+import { Stack } from "@/layouts/stack";
+
+export default function NestedSourceLevelOneLayout() {
+	const stackType = useResolvedStackType();
+	const StackNavigator = stackType === "native-stack" ? Stack : BlankStack;
+	const screenOptions =
+		stackType === "native-stack" ? { enableTransitions: true } : undefined;
+
+	return (
+		<StackNavigator screenOptions={screenOptions}>
+			<StackNavigator.Screen name="nested" />
+		</StackNavigator>
+	);
+}

apps/e2e/app/[stackType]/bounds/example-1/nested/nested/_layout.tsx

@@ -0,0 +1,16 @@
+import { useResolvedStackType } from "@/components/stack-examples/stack-routing";
+import { BlankStack } from "@/layouts/blank-stack";
+import { Stack } from "@/layouts/stack";
+
+export default function NestedSourceLevelTwoLayout() {
+	const stackType = useResolvedStackType();
+	const StackNavigator = stackType === "native-stack" ? Stack : BlankStack;
+	const screenOptions =
+		stackType === "native-stack" ? { enableTransitions: true } : undefined;
+
+	return (
+		<StackNavigator screenOptions={screenOptions}>
+			<StackNavigator.Screen name="nested" />
+		</StackNavigator>
+	);
+}

apps/e2e/app/[stackType]/bounds/example-1/nested/nested/nested/_layout.tsx

@@ -0,0 +1,16 @@
+import { useResolvedStackType } from "@/components/stack-examples/stack-routing";
+import { BlankStack } from "@/layouts/blank-stack";
+import { Stack } from "@/layouts/stack";
+
+export default function NestedSourceLevelThreeLayout() {
+	const stackType = useResolvedStackType();
+	const StackNavigator = stackType === "native-stack" ? Stack : BlankStack;
+	const screenOptions =
+		stackType === "native-stack" ? { enableTransitions: true } : undefined;
+
+	return (
+		<StackNavigator screenOptions={screenOptions}>
+			<StackNavigator.Screen name="source" />
+		</StackNavigator>
+	);
+}

apps/e2e/app/[stackType]/bounds/example-1/nested/nested/nested/source.tsx

@@ -0,0 +1,10 @@
+import { NestedBoundarySource } from "../../../../nested-boundary-example";
+
+export default function DeeplyNestedSourceScreen() {
+	return (
+		<NestedBoundarySource
+			title="Deeply nested source"
+			destination="bounds/example-1/destination"
+		/>
+	);
+}

apps/e2e/app/[stackType]/bounds/example-2/_layout.tsx

@@ -0,0 +1,30 @@
+import Transition from "react-native-screen-transitions";
+import { useResolvedStackType } from "@/components/stack-examples/stack-routing";
+import { BlankStack } from "@/layouts/blank-stack";
+import { Stack } from "@/layouts/stack";
+import { nestedBoundaryZoomInterpolator } from "../nested-boundary-example";
+
+export default function NestedDestinationExampleLayout() {
+	const stackType = useResolvedStackType();
+	const StackNavigator = stackType === "native-stack" ? Stack : BlankStack;
+	const screenOptions =
+		stackType === "native-stack" ? { enableTransitions: true } : undefined;
+
+	return (
+		<StackNavigator screenOptions={screenOptions}>
+			<StackNavigator.Screen name="source" />
+			<StackNavigator.Screen
+				name="nested"
+				options={{
+					gestureEnabled: true,
+					gestureDirection: ["bidirectional", "pinch-in"],
+					gestureProgressMode: "freeform",
+					gestureReleaseVelocityScale: 1.6,
+					navigationMaskEnabled: true,
+					screenStyleInterpolator: nestedBoundaryZoomInterpolator,
+					transitionSpec: Transition.Specs.Zoom,
+				}}
+			/>
+		</StackNavigator>
+	);
+}

apps/e2e/app/[stackType]/bounds/example-2/nested/_layout.tsx

@@ -0,0 +1,16 @@
+import { useResolvedStackType } from "@/components/stack-examples/stack-routing";
+import { BlankStack } from "@/layouts/blank-stack";
+import { Stack } from "@/layouts/stack";
+
+export default function NestedDestinationLevelOneLayout() {
+	const stackType = useResolvedStackType();
+	const StackNavigator = stackType === "native-stack" ? Stack : BlankStack;
+	const screenOptions =
+		stackType === "native-stack" ? { enableTransitions: true } : undefined;
+
+	return (
+		<StackNavigator screenOptions={screenOptions}>
+			<StackNavigator.Screen name="nested" />
+		</StackNavigator>
+	);
+}

apps/e2e/app/[stackType]/bounds/example-2/nested/nested/_layout.tsx

@@ -0,0 +1,16 @@
+import { useResolvedStackType } from "@/components/stack-examples/stack-routing";
+import { BlankStack } from "@/layouts/blank-stack";
+import { Stack } from "@/layouts/stack";
+
+export default function NestedDestinationLevelTwoLayout() {
+	const stackType = useResolvedStackType();
+	const StackNavigator = stackType === "native-stack" ? Stack : BlankStack;
+	const screenOptions =
+		stackType === "native-stack" ? { enableTransitions: true } : undefined;
+
+	return (
+		<StackNavigator screenOptions={screenOptions}>
+			<StackNavigator.Screen name="nested" />
+		</StackNavigator>
+	);
+}

apps/e2e/app/[stackType]/bounds/example-2/nested/nested/nested/_layout.tsx

@@ -0,0 +1,16 @@
+import { useResolvedStackType } from "@/components/stack-examples/stack-routing";
+import { BlankStack } from "@/layouts/blank-stack";
+import { Stack } from "@/layouts/stack";
+
+export default function NestedDestinationLevelThreeLayout() {
+	const stackType = useResolvedStackType();
+	const StackNavigator = stackType === "native-stack" ? Stack : BlankStack;
+	const screenOptions =
+		stackType === "native-stack" ? { enableTransitions: true } : undefined;
+
+	return (
+		<StackNavigator screenOptions={screenOptions}>
+			<StackNavigator.Screen name="destination" />
+		</StackNavigator>
+	);
+}

apps/e2e/app/[stackType]/bounds/example-2/nested/nested/nested/destination.tsx

@@ -0,0 +1,5 @@
+import { NestedBoundaryDestination } from "../../../../nested-boundary-example";
+
+export default function DeeplyNestedDestinationScreen() {
+	return <NestedBoundaryDestination title="Deeply nested destination" />;
+}

apps/e2e/app/[stackType]/bounds/example-2/source.tsx

@@ -0,0 +1,10 @@
+import { NestedBoundarySource } from "../nested-boundary-example";
+
+export default function ParentSourceScreen() {
+	return (
+		<NestedBoundarySource
+			title="Parent source"
+			destination="bounds/example-2/nested/nested/nested/destination"
+		/>
+	);
+}

apps/e2e/app/[stackType]/bounds/example-3/_layout.tsx

@@ -0,0 +1,30 @@
+import Transition from "react-native-screen-transitions";
+import { useResolvedStackType } from "@/components/stack-examples/stack-routing";
+import { BlankStack } from "@/layouts/blank-stack";
+import { Stack } from "@/layouts/stack";
+import { nestedBoundaryZoomInterpolator } from "../nested-boundary-example";
+
+export default function NeighboringNestedExampleLayout() {
+	const stackType = useResolvedStackType();
+	const StackNavigator = stackType === "native-stack" ? Stack : BlankStack;
+	const screenOptions =
+		stackType === "native-stack" ? { enableTransitions: true } : undefined;
+
+	return (
+		<StackNavigator screenOptions={screenOptions}>
+			<StackNavigator.Screen name="nested-1" />
+			<StackNavigator.Screen
+				name="nested-2"
+				options={{
+					gestureEnabled: true,
+					gestureDirection: ["bidirectional", "pinch-in"],
+					gestureProgressMode: "freeform",
+					gestureReleaseVelocityScale: 1.6,
+					navigationMaskEnabled: true,
+					screenStyleInterpolator: nestedBoundaryZoomInterpolator,
+					transitionSpec: Transition.Specs.Zoom,
+				}}
+			/>
+		</StackNavigator>
+	);
+}

apps/e2e/app/[stackType]/bounds/example-3/nested-1/_layout.tsx

@@ -0,0 +1,16 @@
+import { useResolvedStackType } from "@/components/stack-examples/stack-routing";
+import { BlankStack } from "@/layouts/blank-stack";
+import { Stack } from "@/layouts/stack";
+
+export default function NeighboringNestedSourceLayout() {
+	const stackType = useResolvedStackType();
+	const StackNavigator = stackType === "native-stack" ? Stack : BlankStack;
+	const screenOptions =
+		stackType === "native-stack" ? { enableTransitions: true } : undefined;
+
+	return (
+		<StackNavigator screenOptions={screenOptions}>
+			<StackNavigator.Screen name="source" />
+		</StackNavigator>
+	);
+}

apps/e2e/app/[stackType]/bounds/example-3/nested-1/source.tsx

@@ -0,0 +1,10 @@
+import { NestedBoundarySource } from "../../nested-boundary-example";
+
+export default function NeighboringNestedSourceScreen() {
+	return (
+		<NestedBoundarySource
+			title="Neighboring nested source"
+			destination="bounds/example-3/nested-2/destination"
+		/>
+	);
+}

apps/e2e/app/[stackType]/bounds/example-3/nested-2/_layout.tsx

@@ -0,0 +1,16 @@
+import { useResolvedStackType } from "@/components/stack-examples/stack-routing";
+import { BlankStack } from "@/layouts/blank-stack";
+import { Stack } from "@/layouts/stack";
+
+export default function NeighboringNestedDestinationLayout() {
+	const stackType = useResolvedStackType();
+	const StackNavigator = stackType === "native-stack" ? Stack : BlankStack;
+	const screenOptions =
+		stackType === "native-stack" ? { enableTransitions: true } : undefined;
+
+	return (
+		<StackNavigator screenOptions={screenOptions}>
+			<StackNavigator.Screen name="destination" />
+		</StackNavigator>
+	);
+}

apps/e2e/app/[stackType]/bounds/example-3/nested-2/destination.tsx

@@ -0,0 +1,5 @@
+import { NestedBoundaryDestination } from "../../nested-boundary-example";
+
+export default function NeighboringNestedDestinationScreen() {
+	return <NestedBoundaryDestination title="Neighboring nested destination" />;
+}

apps/e2e/app/[stackType]/bounds/index.tsx

@@ -6,6 +6,24 @@ import {
 import { ListScreen } from "@/components/ui";
 
 const BOUNDS_EXAMPLES = [
+	{
+		id: "example-1/nested/nested/nested/source",
+		title: "Deeply nested source → parent destination",
+		description:
+			"Runtime group, bound target, and clipping controls across three nested stacks",
+	},
+	{
+		id: "example-2/source",
+		title: "Parent source → deeply nested destination",
+		description:
+			"Runtime group, bound target, and clipping controls into three nested stacks",
+	},
+	{
+		id: "example-3/nested-1/source",
+		title: "Nested source → neighboring nested destination",
+		description:
+			"Runtime group, bound target, and clipping controls across sibling nested stacks",
+	},
 	{
 		id: "style-id",
 		title: ".reveal()",
@@ -35,6 +53,12 @@ const BOUNDS_EXAMPLES = [
 		title: "Handoff multiflow",
 		description: "One payload handed across a multi-screen push and pop flow",
 	},
+	{
+		id: "stacking",
+		title: "Repeated route stacking",
+		description:
+			"Alternating route pushes with independently selectable card and button sources",
+	},
 ];
 
 export default function BoundsHubIndex() {