quick save

README.md

@@ -1,7 +1,15 @@
-When Chrome introduced the (same-document) View Transition API, the Astro project was an early adopter and [astro-vtbot](https://github.com/martrapp/astro-vtbot), *the Bag of Tricks for Astro's View Transitions*, provided many technical demos, reusable components and a wealth of information about View Transitions.
+# The Inspection Chamber
 
-# @vtbag/*
+The Test Chamber is your ultimate playground for experimenting with the View Transition API. Whether you're working with same-document or cross-document transitions, this test bench has got you covered.
 
-Now that the View Transition API is finding its way into more and more browsers and even cross-document navigation is supported, `vtbot` got a **framework-independent** sister:
+With a comprehensive set of controls at your fingertips, you can interactively test and fine-tune your view transitions to perfection. Dive in and explore all the features the Test Chamber offers to elevate your web development projects!
 
-`@vtbag/*` will offer useful tools, tips *(and of course tricks!)* to support the use of View Transitions no matter what framework you use, if any.
+# @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.

bin/bundle

@@ -1,17 +1,9 @@
 #! /bin/sh
 
-rm src/bench.ts
 if [ "$1" = "dev" ]; then
   OPTS="--sourcemap --watch"
-  ln -s bench-dev.ts src/bench.ts
 else
-  (cd lib && rm *.js.map)
-  ln -s bench-prod.ts src/bench.ts
   OPTS="--minify"
-  if [ "$1" = "full" ]; then
-    rm -f src/bench.txt
-    (cd ../astro-vtbot-website && npm run build)
-    cp ../astro-vtbot-website/dist/vtbag/bench/index.html src/bench.txt
-  fi
+  (cd lib && rm *.js.map) >> /dev/null 2>&1
 fi
 npx esbuild src/index.ts --bundle $OPTS --target=ESnext --outfile=lib/index.js

package.json

@@ -2,9 +2,9 @@
   "name": "@vtbag/inspection-chamber",
   "version": "1.0.0",
   "main": "lib/index.js",
-  "description": "The Inspection Chamber gives you all the knobs and dials to interactively to put your view transitions through its paces.",
+  "description": "The Inspection Chamber gives you all the knobs and dials to interactively put your view transitions through its paces.",
   "files": [
-    "lib"
+    "lib/*.js"
   ],
   "scripts": {
     "dev": "bin/bundle dev",

src/bench.html

@@ -0,0 +1 @@
+bench.txt

src/index.ts

@@ -1,4 +1,5 @@
-import { bench } from './bench';
+//@ts-ignore
+import bench from './bench.txt';
 
 import { setTransitionNames } from './stylesheets';
 import { initDragging } from './dragging';
@@ -18,7 +19,7 @@ import { initNames, updateImageVisibility, updateNames } from './panel/names';
 import { initFilter } from './panel/filter';
 import { twinClick } from './twin';
 
-const titleLogo = "🐌";
+const titleLogo = "🔬";
 
 top!.__vtbag ??= {};
 top!.__vtbag.inspectionChamber ??= {};
@@ -27,9 +28,7 @@ const inspectionChamber = top!.__vtbag.inspectionChamber!;
 let firstModusInteraction = true;
 
 if (top === self) {
-	addEventListener('pageshow', () => {
-		setTimeout(initPanel, 500);
-	});
+	setTimeout(initPanel, 500);
 } else {
 	initSpecimen();
 }
@@ -94,7 +93,7 @@ function updateCallbackDone() {
 
 			canvas.style.cursor = 'wait';
 			await retrieveViewTransitionAnimations();
-			addFrames(top!.document.querySelector<HTMLInputElement>('#vtbag-ui-styled')!.checked);
+			addFrames(top!.document.querySelector<HTMLInputElement>('#vtbag-ui-framed')!.checked);
 			inspectionChamber.twin!.ownerDocument.addEventListener('click', twinClick);
 
 			modusFunction[modus]();
@@ -112,7 +111,7 @@ function updateCallbackDone() {
 		unleashAllAnimations();
 		inspectionChamber.animations = undefined;
 		inspectionChamber.longestAnimation = undefined;
-		addFrames(top!.document.querySelector<HTMLInputElement>('#vtbag-ui-styled')!.checked);
+		addFrames(top!.document.querySelector<HTMLInputElement>('#vtbag-ui-framed')!.checked);
 		updateNames(setTransitionNames());
 		updateImageVisibility();
 		top!.document.querySelector<HTMLSpanElement>('#vtbag-ui-slo-mo-progress')!.innerText = '';
@@ -264,9 +263,12 @@ function initPanelHandlers() {
 
 	initFilter();
 	initNames();
-	top!.document
-		.querySelector('#vtbag-ui-styled')
-		?.addEventListener('change', (e) => addFrames((e.target as HTMLInputElement).checked));
+	const framed = top!.document.querySelector<HTMLInputElement>('#vtbag-ui-framed')!;
+	framed.addEventListener('change', (e) => {
+		const framed = (e.target as HTMLInputElement).checked;
+		localStorage.setItem('vtbag-ui-framed', framed ? "X" : "");
+		addFrames(framed);
+	});
 
 	initSlowMotion();
 	initController();
@@ -325,7 +327,11 @@ function updateModus() {
 }
 
 function attachFrameToggle(divId: string) {
-	const styled = top!.document.querySelector('#vtbag-ui-styled')?.parentElement;
+	const framed = top!.document.querySelector<HTMLInputElement>('#vtbag-ui-framed')!;
+	const parent = framed.parentElement;
 	const div = top!.document.querySelector(divId);
-	if (styled && div && styled.parentElement !== div) div.insertAdjacentElement('beforeend', styled);
+	framed.checked = !!localStorage.getItem('vtbag-ui-framed');
+	addFrames(framed.checked);
+
+	if (parent && div && parent.parentElement !== div) div.insertAdjacentElement('beforeend', parent);
 }

src/styles.ts

@@ -6,7 +6,6 @@ export function setStyles(
 ) {
 	const id = 'vtbag-adopted-sheet' + (suffix ? '-' + suffix : '');
 	doc.getElementById(id)?.remove();
-	doc.documentElement.offsetHeight;
 	styles &&
 		doc.head.insertAdjacentHTML(
 			prepend ? 'afterbegin' : 'beforeend',