Mt/bag (#146)

* prerelease

* alpha

* alpha

* + changeset

* alpha

* bump

* bumps

.changeset/six-wasps-retire.md

@@ -0,0 +1,5 @@
+---
+'astro-vtbot': minor
+---
+
+Introduces the Inspection Chamber, which allows you to put your view transitions through their paces. The Inspection Chamber can be used as a component but also via the brand new DevToolbar integration!

README.md

@@ -11,42 +11,18 @@ A current deployment of tech demos and the documentation can be found at https:/
 
 ## !!! NEW TRICKS ✨ IN THE BAG 👜 !!!
 
-### More Starlight Improvements: ###
+Deep down at the bottom of the Bag of Tricks, in a hidden inner pocket, there is a secret passage to an ominous machine room. In the machine room stands the [inspection chamber](https://events-3bg.pages.dev/inspection-chamber-demo/first-page/), quietly humming to itself.
 
-#### Mission Accomplished
-> This release completes the series of additions to the view transition support for Starlight!
-The last two of the [originally planned features](https://events-3bg.pages.dev/jotter/starlight/inner-workings/) are:
-- The [`<BorderControl fence={{}} />` component](https://events-3bg.pages.dev/library/BorderControl/) that helps you to maintain Starlight state in a mixed Starlight / non-Starlight project.
-- The [`<SwapSound src="..." />` component](https://events-3bg.pages.dev/library/SwapSound/) that provides transition animation for the ears, an audible loading and transition indicator, or simply lots of noise from click to finish.
+See your view transitions like never before: examine all details, reveal, debug, and optimize!
 
-Of course there will be further additions if required. Please contact me if you are missing something.
-
-#### Friendly Neighbor List
-> The Friendly Neighbor List of the Starlight support keeps growing. Now features:
-- starlight-image-zoom
-- starlight-utils
-- starlight-blog
-- starlight-docsearch
-
-### Automatically Name Selected Elements for Additional Morph Effects
-
-> The Bag features a new component to declaratively assign view transition names to selected elements: `<AutoNameSelected/>`. [This component](https://events-3bg.pages.dev/library/AutoNameSelected/) provides for a lot of fun as can be seen in the [image gallery demo](https://events-3bg.pages.dev/image-gallery/).
+Summon the Inspection Chamber as a component ([&lt;InspectionChamber />](https://events-3bg.pages.dev/library/InspectionChamber/)) or [install The Bag as an integration!](hhttps://events-3bg.pages.dev/library/Installation/#installing-as-an-astro-integration)
 
 
 ## Recently Learned Tricks ##
 
 > Starlight Support: Ever wanted to see what your Starlight site looks like with view transitions enabled? Follow [these steps](https://events-3bg.pages.dev/jotter/starlight/guide/) to get rid of full page loads and make your Starlight site look like a SPA!
 
 
-The selection of optional Starlight components keeps growing:
-
-> Ever wished clicking on Starlight's _previous page_ and _next page_ links would slide content from the left respectively from the right?  Now you can enable `<PageOrder />` on Starlight sites. This automatically alters the _direction_ of the view transition. Visit a page further down the sidebar and get a _forward_ navigation, visit a page further up, and you get a _back_ navigation.
-
-> Eliminate the Pseudo-Scrolling of the Main Section: With [`<PageOffset />`](https://events-3bg.pages.dev/library/PageOffset/), The Bag offers a simple to use component that eliminates pseudo scrolling effects induced by morph transitions on elements that are larger than the viewport. Especially useful to get a smooth and neat transition animation for your main content.
-
-
-
-
 
 ## Reusable Components 🧩
 

components/InspectionChamber.astro

@@ -0,0 +1,6 @@
+---
+export interface Props {}
+import chamber from '@vtbag/inspection-chamber?url';
+---
+
+<script is:inline data-astro-rerun src={chamber}></script>

components/InspectionChamber.d.ts

@@ -0,0 +1 @@
+export default function InspectionChamber(_props: import('./InspectionChamber.astro').Props): any;

devToolbar/app.ts

@@ -0,0 +1,112 @@
+import { defineToolbarApp } from 'astro/toolbar';
+//@ts-expect-error
+import icon from "../assets/bag-of-tricks.svg?raw";
+//@ts-expect-error
+import imgSrc from '../assets/chamber.png';
+
+const DTB_TOKEN = 'vtbot-inspection-chamber';
+const VTBAG_REOPEN = '#vtbag-ui-reopen';
+
+export default defineToolbarApp({
+	init(canvas, app) {
+
+		createVtbotWindow();
+		document.addEventListener('astro:after-swap', createVtbotWindow);
+
+		app.addEventListener('placement-updated', (evt) => {
+			const windowElement = canvas.querySelector('astro-dev-toolbar-window');
+			windowElement && (windowElement.placement = evt instanceof CustomEvent && evt.detail.placement);
+		});
+
+		function createVtbotWindow() {
+			const astroWindow = document.createElement('astro-dev-toolbar-window');
+			astroWindow.insertAdjacentHTML('beforeend', `
+<div>
+	<astro-dev-toolbar-icon class="logo">${icon}</astro-dev-toolbar-icon>
+	<h1>The Bag of Tricks for Astro's View Transitions</h1>
+	<p>The Bag of Tricks offers components to simplify view transitions for you. Plus: Detailed info about Astro's view transitions and the View Transition API in general.</p>
+	<p>Visit <a href="https://events-3bg.pages.dev">The Bag's Website</a> and <a href="https://github.com/martrapp/astro-vtbot">star the Github project</a> to support this work.</p>
+	<h2>!!! New !!! The Inspection Chamber</h2>
+	<img style="float:right; border-radius: 50%; border: 8px dashed #8888;
+		mask-image: radial-gradient(ellipse at center, white 35%, transparent 71%);"
+	src=${imgSrc.src} alt="reopen the inspection chamber" />
+	<p>Examine every detail of your view transitions! Put them through their paces! Step through  frames and discover how the elements morph.</p><hr>
+	<p><span id="inspection-chamber-status">The Bag is cool</span><astro-dev-toolbar-button id="inspection-chamber-button">I love the Bag of Tricks!</astro-dev-toolbar-button></p>
+	<style>
+		a {
+			color: white;
+		}
+		astro-dev-toolbar-button {
+			width: 20ex;
+		}
+		astro-dev-toolbar-icon {
+			width: 1rem;
+				height: 1rem;
+				display: inline-block;
+			}
+			.logo {
+				width: 3.3rem;
+				height: auto;
+				margin-right: 0.25rem;
+				transform: translateY(0.4rem);
+				float: left;
+				display:block;
+				vertical-align: top;
+			}
+			h1 {
+				font-size: 1.3rem;
+			}
+			h2 {
+				font-size: 1.2rem;
+			}
+		}
+	</style>
+`);
+			canvas.append(astroWindow);
+
+		}
+		app.onToggled((options) => {
+			if (options.state) {
+
+				const me = document.querySelector('astro-dev-toolbar')!
+					.shadowRoot!.querySelector('astro-dev-toolbar-app-canvas[data-app-id="vtbot"]')!
+					.shadowRoot!;
+				const status = me.querySelector<HTMLSpanElement>('#inspection-chamber-status')!;
+				const button = me.querySelector('#inspection-chamber-button')!;
+
+				if (top!.document.querySelector(VTBAG_REOPEN)) {
+					status.textContent = 'The Chamber is currently in standby mode.';
+					button.textContent = 'Reactivate the Inspection Chamber';
+					button.addEventListener('click', () => {
+						top!.sessionStorage.removeItem('vtbag-ui-standby');
+						top!.location.reload();
+					});
+				} else if (top!.document.querySelector('body > #vtbag-main-frame')
+					&& top!.sessionStorage.getItem(DTB_TOKEN) !== 'true') {
+					status.innerHTML = 'This page has an <code>&lt;InspectionChamber /></code> component.';
+					button.textContent = 'Switch Inspection Chamber to standby mode';
+					button.addEventListener('click', () => {
+						top!.sessionStorage.setItem('vtbag-ui-standby', 'true');
+						top!.location.reload();
+					});
+				} else if (top!.sessionStorage.getItem(DTB_TOKEN) === 'true') {
+					status.textContent = 'Chamber was activated via Dev Toolbar.';
+					button.textContent = 'Remove the Inspection Chamber';
+
+					button.addEventListener('click', () => {
+						top!.sessionStorage.removeItem(DTB_TOKEN);
+						top!.location.reload();
+					});
+				} else {
+					status.textContent = 'There is an Inspection Chamber here.';
+					button.textContent = 'Use the Inspection Chamber';
+					button.addEventListener('click', () => {
+						top!.sessionStorage.removeItem('vtbag-ui-closed');
+						top!.sessionStorage.setItem(DTB_TOKEN, 'true');
+						top!.location.reload();
+					});
+				}
+			}
+		});
+	}
+});

integration/index.ts

@@ -1,5 +1,11 @@
 import type { AstroIntegration } from 'astro';
 import vitePluginVtbotExtend from './vite-plugin-extend';
+//@ts-expect-error
+import icon from '../assets/bag-of-tricks-mono.svg?raw';
+import inspectionChamber from '../node_modules/@vtbag/inspection-chamber?raw';
+import { fileURLToPath } from 'node:url';
+
+const DTB_TOKEN = 'vtbot-inspection-chamber';
 
 type VtBotOptions = {
 	autoLint?: boolean;
@@ -10,16 +16,35 @@ export default function createIntegration(options?: VtBotOptions): AstroIntegrat
 	return {
 		name: 'astro-vtbot',
 		hooks: {
-			'astro:config:setup': ({ updateConfig }) => {
+			'astro:config:setup': (setupOptions) => {
 				const linter = options?.autoLint ?? true;
 				const loading = options?.loadingIndicator ?? true;
 				if (linter || loading) {
-					updateConfig({
+					setupOptions.updateConfig({
 						vite: {
 							plugins: [vitePluginVtbotExtend({ linter, loading })],
 						},
 					});
 				}
+				//@ts-expect-error
+				if (import.meta.env.DEV) {
+					setupOptions.injectRoute({
+						pattern: '/_vtbot_inspection_chamber',
+						entrypoint: 'node_modules/astro-vtbot/components/InspectionChamber.astro',
+					});
+
+					setupOptions.injectScript(
+						'head-inline',
+						`if (sessionStorage.getItem('${DTB_TOKEN}') === 'true') {${inspectionChamber}}; document.currentScript.remove()`
+					);
+				}
+
+				setupOptions.addDevToolbarApp({
+					id: 'vtbot',
+					name: 'The Bag',
+					icon,
+					entrypoint: fileURLToPath(new URL('../devToolbar/app.ts', import.meta.url)),
+				});
 			},
 		},
 	};