New component: PointerOnNavigation

.changeset/short-houses-tickle.md

@@ -0,0 +1,5 @@
+---
+'astro-vtbot': patch
+---
+
+This introduces the `<PointerOnNavigation />` component that reduces cursor switching on navigation.

README.md

@@ -15,10 +15,12 @@ A current deployment of tech demos and the documentation can be found at https:/
 
 ## !!! NEW TRICKS ✨ IN THE BAG 👜 !!!
 
-V1.18.5 throws a colorful mix of things into the bag. Most notable is support for Starlight's persisted sidebar state, but also various improvements to the chamber and view transition name encoding. See the changelog for details!
+This is a quick release for a new small component that reduces cursor switching on view transitions: [<PointerOnNavigation/>](https://events-3bg.pages.dev/library/PointerOnNavigation/)
 
 ## Recently Learned Tricks ##
 
+V1.18.5 throws a colorful mix of things into the bag. Most notable is support for Starlight's persisted sidebar state, but also various improvements to the chamber and view transition name encoding. See the changelog for details!
+
 > V1.18.4 introduced an updated version of the Inspection Chamber, now packed with new, shiny displays and knobs. The Chamber is steadily maturing, evolving from a cool prototype into a cool, reliable tool.
 
 > See your view transitions like never before: examine every detail, reveal, debug, and optimize! Now, drill down into the effects of each pseudo-element introduced by the view transition API and even selectively toggle individual animations to better understand what’s happening!
@@ -50,6 +52,7 @@ LoadingIndicator ⏳ | ~0.4k
 Move 🚟 | ~0.2k
 NoScroll 📜 | ~0.1k
 PageOffset 📄⇞ | ~0.1k
+PointerOnNavigation 👆 | ~0.1k
 Portal 🚪 | ~0.2k
 ReplacementSwap ↹ | ~0.5k
 Starlight &hellip; 🌟 | ~3.0k

components/PointerOnNavigation.astro

@@ -0,0 +1,19 @@
+---
+export interface Props {}
+---
+
+<script>
+	import { TRANSITION_AFTER_PREPARATION, TRANSITION_BEFORE_SWAP } from 'astro:transitions/client';
+
+	document.addEventListener(
+		TRANSITION_AFTER_PREPARATION,
+		() => (document.documentElement.style.cursor = 'pointer')
+	);
+	document.addEventListener(
+		TRANSITION_BEFORE_SWAP,
+		(e) => (
+			(e.newDocument.documentElement.style.cursor = 'pointer'),
+			e.viewTransition.finished.then(() => (document.documentElement.style.cursor = ''))
+		)
+	);
+</script>

components/PointerOnNavigation.d.ts

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