unblock nested iframes

.changeset/chilly-meals-unite.md

@@ -0,0 +1,5 @@
+---
+'@vtbag/inspection-chamber': patch
+---
+
+Fixes a bug that blocked the chamber on nested iframes and framework components when used with the Astro router.

README.md

@@ -39,12 +39,3 @@ With a comprehensive set of controls at your fingertips, you can interactively t
 
 Find the documentation of the Inspection Chamber at https://vtbag.pages.dev/inspection-chamber/!
 
-# @vtbag
-
-The Inspection Chamber is the inaugural tool under the @vtbag umbrella. If the name reminds you of vtbot, that's no coincidence.
-
-When Chrome introduced the (same-document) View Transition API, Astro quickly became an early adopter, offering a client-side router to transform MPAs into smooth SPAs. As a community-driven project, [astro-vtbot](https://events-3bg.pages.dev), the *Bag of Tricks for Astro's View Transitions*, delivered numerous technical demos, reusable components, and a wealth of information about View Transitions within Astro and the View Transition API at large.
-
-With the View Transition API now being adopted by more browsers and even supporting cross-document navigation, vtbot has evolved. Meet its framework-independent sibling: `@vtbag`
-
-`@vtbag/*` is set to provide a treasure trove of useful tools, tips (and of course tricks!) to enhance your experience with View Transitions, no matter which framework you're using, or even if you're using none at all.

src/animations.ts

@@ -8,7 +8,6 @@ import { setStyles } from './styles';
 import { initTwin } from './twin';
 
 export function forceAnimations() {
-	const frameBody = top!.__vtbag.inspectionChamber!.frameDocument!.body;
 	setStyles(
 		`
 		@keyframes vtbag-twin-noop {

src/index.ts

@@ -38,7 +38,7 @@ const inspectionChamber = top!.__vtbag.inspectionChamber!;
 
 if (top === self) {
 	top.setTimeout(initPanel, 500);
-} else {
+} else if (self.parent === top) {
 	initSpecimen();
 }
 
@@ -50,12 +50,8 @@ function initSpecimen() {
 	monkeyPatchStartViewTransition();
 
 	function monkeyPatchStartViewTransition() {
-		const originalStartViewTransition = frameDocument.startViewTransition;
-		if (
-			!originalStartViewTransition ||
-			originalStartViewTransition.toString() !== 'function startViewTransition() { [native code] }'
-		)
-			return;
+		const originalStartViewTransition = top!.document.startViewTransition;
+		if (!originalStartViewTransition) return;
 		// todo: add level 2 options
 		frameDocument.startViewTransition = (cb: () => void | Promise<void>) => {
 			'@vtbag';
@@ -215,8 +211,6 @@ async function initPanel() {
 			.forEach((e) => e.remove());
 		return;
 	}
-	const frameDocument = (top!.__vtbag.inspectionChamber!.frameDocument =
-		mainFrame.contentDocument!);
 
 	updateNames(setTransitionNames());
 	initPanelHandlers();
@@ -253,7 +247,7 @@ async function initPanel() {
 		duration: 500,
 		fill: 'forwards',
 	});
-	frameDocument!.addEventListener('click', innerClick);
+	mainFrame.contentDocument!.addEventListener('click', innerClick);
 }
 
 function innerClick(e: MouseEvent) {