Signal (#194)

* new: turn-signal

* renaming and restructuring

* updates

* merge

* bumps

* update

.changeset/beige-chairs-shake.md

@@ -0,0 +1,5 @@
+---
+'astro-vtbot': minor
+---
+
+Introducing a new tool for your transition from `<ViewTransitions />` to `@view-transitions {navigation: auto}`: The `<TurnSignal />` component enables seamless integration of forward and backward animations from `transition:animate` in cross-document transitions. Sync the direction of your animations with browser history navigation, or even with the page order of your site, if you prefer!

README.md

@@ -15,10 +15,9 @@ A current deployment of tech demos and the documentation can be found at https:/
 
 ## !!! NEW TRICKS ✨ IN THE BAG 👜 !!!
 
+New component for cross-document view transitions: The `<TurnSignal>` enables Astro's forward/backward animations provided by `transition:animate` to work with native cross-document `@view-transition{}`. Slide right and left as you traverse the browser's history! Optionally you can configure the component with a total order of your site's pages, allowing it to automatically detect the transition direction.
 
-Bug fix for the Linter and an update of the InspectionChamber!
-
-For details, see the [CHANGELOG of the Bag](https://github.com/martrapp/astro-vtbot/blob/main/CHANGELOG.md) and of the [CHANGELOG of the InstructionChamber](https://github.com/vtbag/inspection-chamber/blob/main/CHANGELOG.md)
+For details, see the [CHANGELOG of the Bag](https://github.com/martrapp/astro-vtbot/blob/main/CHANGELOG.md) and of the [CHANGELOG of the InstructionChamber](https://github.com/vtbag/inspection-chamber/blob/main/CHANGELOG.md) for minor improvements regarding the Chamber.
 
 
 ## Recently Learned Tricks ##

components/TurnSignal.astro

@@ -0,0 +1,29 @@
+---
+import signalURL from '@vtbag/turn-signal?url';
+import forcedTraversalURL from '@vtbag/turn-signal/forced-traversal?url';
+export interface Props {
+	selector?: string;
+	forcedTraversal?: boolean;
+	directionTypes?: string;
+	directionAttribute?: string;
+}
+
+const {
+	selector,
+	forcedTraversal,
+	directionTypes = '',
+	directionAttribute = 'data-astro-transition, back, forward, forward',
+} = Astro.props;
+---
+
+{forcedTraversal && <script is:inline src={forcedTraversalURL} />}{
+	(
+		<script
+			is:inline
+			{...(selector ? { 'data-selector': selector } : {})}
+			{...(directionTypes ? { 'data-direction-types': directionTypes } : {})}
+			{...(directionAttribute ? { 'data-direction-attribute': directionAttribute } : {})}
+			src={signalURL}
+		/>
+	)
+}

components/TurnSignal.d.ts

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