### Install and Initialize Taxi Core

Source: https://context7.com/craftedbygc/taxi/llms.txt

Install Taxi.js via npm or yarn and create a new Core instance. Ensure your HTML structure includes data-taxi and data-taxi-view attributes.

```javascript
// Install
// npm i @unseenco/taxi

import { Core } from '@unseenco/taxi'

const taxi = new Core()
```

--------------------------------

### Install Taxi.js with npm

Source: https://github.com/craftedbygc/taxi/blob/main/docs/how-to-use.md

Use npm to add the Taxi.js package to your project dependencies.

```bash
npm i @unseenco/taxi
```

--------------------------------

### Install Taxi.js with pnpm

Source: https://github.com/craftedbygc/taxi/blob/main/docs/how-to-use.md

Use pnpm to add the Taxi.js package to your project dependencies.

```bash
pnpm add @unseenco/taxi
```

--------------------------------

### Install Taxi.js with yarn

Source: https://github.com/craftedbygc/taxi/blob/main/docs/how-to-use.md

Use yarn to add the Taxi.js package to your project dependencies.

```bash
yarn add @unseenco/taxi
```

--------------------------------

### HTML Example for Renderer Selection

Source: https://context7.com/craftedbygc/taxi/llms.txt

Pages can specify which renderer to use via the data-taxi-view attribute. If the attribute is empty, the default renderer is used. If it has a value (e.g., 'blog'), the corresponding registered renderer is used.

```html
<!-- Page that should use BlogRenderer -->
<article data-taxi-view="blog">...</article>

<!-- Page that falls back to the default renderer -->
<article data-taxi-view>...</article>
```

--------------------------------

### Configuring Taxi.js Links Option

Source: https://github.com/craftedbygc/taxi/blob/main/docs/how-to-use.md

Customize which links are handled by Taxi.js using a CSS selector. This example shows the default configuration.

```javascript
const taxi = new Core({ 
    links: 'a:not([target]):not([href^=\#]):not([data-taxi-ignore])'
})
```

--------------------------------

### Custom reloadJsFilter with Script Source Matching

Source: https://github.com/craftedbygc/taxi/blob/main/docs/reloading-js.md

Example of a custom `reloadJsFilter` callback that reloads scripts based on the `data-taxi-reload` attribute or if the script's source URL matches a specific pattern.

```javascript
import { Core } from '@unseenco/taxi'

const taxi = new Core({
  reloadJsFilter: (element) => element.dataset.taxiReload !== undefined || element.src?.match('myscript.js')
})
```

--------------------------------

### Initial Load Method for First Visit

Source: https://github.com/craftedbygc/taxi/blob/main/docs/renderers.md

Implement the `initialLoad` method within your custom renderer to execute code only on the user's first visit to the site. This is suitable for setting up persistent components or one-time initializations.

```javascript
import { Renderer } from '@unseenco/taxi';

export default class CustomRenderer extends Renderer {
  initialLoad() {
    // run code that should only happen once for your site

    this.onEnter()
    this.onEnterCompleted()
  }

  // rest of your methods
}
```

--------------------------------

### Using Taxi.js via CDN

Source: https://github.com/craftedbygc/taxi/blob/main/docs/how-to-use.md

Include Taxi.js from a CDN and initialize it. Note the lowercase 'taxi' export.

```html
<script src="https://unpkg.com/@unseenco/e@2.2.2/dist/e.umd.js" crossorigin></script>
<script src="https://unpkg.com/@unseenco/taxi@1.0.3/dist/taxi.umd.js" crossorigin></script>

<main data-taxi>
    <article data-taxi-view>
        ...
    </article>
</main>

<script>
    const t = new taxi.Core()
</script>
```

--------------------------------

### Preload URLs and Assets with preload()

Source: https://context7.com/craftedbygc/taxi/llms.txt

Fetch a URL and cache its content ahead of user interaction. Optionally preload linked assets like images. Handles success and failure with Promises.

```javascript
/**
 * preload(url: string, preloadAssets?: boolean = false): Promise<void>
 */

// Preload HTML only
taxi.preload('/heavy-page')

// Preload HTML + all linked assets
taxi.preload('/gallery', true)

// Handle success / failure
taxi.preload('/might-404')
  .then(() => console.log('Cached!'))
  .catch(err => console.warn('Preload failed:', err))
```

--------------------------------

### Initialize Taxi.js Core

Source: https://github.com/craftedbygc/taxi/blob/main/docs/how-to-use.md

Import and create a new instance of the Taxi.js Core. Supports named or namespace imports.

```javascript
import { Core } from '@unseenco/taxi'

const taxi = new Core()

// or if you prefer

import * as Taxi from '@unseenco/taxi'

const taxi = new Taxi.Core()
```

--------------------------------

### navigateTo

Source: https://context7.com/craftedbygc/taxi/llms.txt

Programmatically navigate to a URL, optionally specifying which transition to use. Returns a Promise that resolves when the full transition lifecycle completes.

```APIDOC
## navigateTo

### Description
Programmatically navigate to a URL, optionally specifying which transition to use. Returns a Promise that resolves when the full transition lifecycle completes.

### Method Signature
`navigateTo(url: string, transition?: string = false): Promise<void>`

### Examples
```js
// Navigate using the router / default transition
taxi.navigateTo('/contact')

// Navigate with an explicit transition
taxi.navigateTo('/contact', 'slide')
  .then(() => {
    console.log('Navigation complete')
    analytics.track('page_view', { url: '/contact' })
  })
  .catch(err => {
    // Rejected when allowInterruption is false and a transition is in progress
    console.warn(err.message) // "A transition is currently in progress"
  })
```
```

--------------------------------

### preload()

Source: https://github.com/craftedbygc/taxi/blob/main/docs/api-events.md

Prefetch the provided URL and add it to the cache ahead of any user navigation. You can optionally preload assets on the target URL as well.

```APIDOC
## preload()

### Description
Prefetch the provided URL and add it to the cache ahead of any user navigation.

You can pass a second argument to indicate you want to preload the assets on the target URL as well (images, media, etc).

### Method Signature
`preload( url: string, preloadAssets?: boolean = false): Promise`

### Examples
```js
taxi.preload('/path/to/preload')

taxi.preload('/path/to/preload', true)

taxi.preload('/path/to/404')
    .then(() => console.log('success!'))
    .catch(err => console.warn(err))
```
```

--------------------------------

### Preload URL Content with preload()

Source: https://github.com/craftedbygc/taxi/blob/main/docs/api-events.md

Use `preload` to prefetch and cache the content of a given URL. This can improve performance by having content ready before user navigation. An optional boolean argument can be passed to also preload associated assets.

```javascript
taxi.preload('/path/to/preload')
```

```javascript
taxi.preload('/path/to/preload', true)
```

```javascript
taxi.preload('/path/to/404')
    .then(() => console.log('success!'))
    .catch(err => console.warn(err))
```

--------------------------------

### navigateTo()

Source: https://github.com/craftedbygc/taxi/blob/main/docs/api-events.md

Perform a manual navigation to the provided URL. If a transition name is not provided, Taxi will try to find a match in the RouteStore, otherwise the default transition will be used.

```APIDOC
## navigateTo()

### Description
Perform a manual navigation to the provided URL.

If a `transition` name is not provided then Taxi will try and find a match in the RouteStore, otherwise the default transition will be used.

### Method Signature
`navigateTo(url: string, transition?: string = false): Promise`

### Examples
```js
taxi.navigateTo('/contact')

taxi.navigateTo('/contact', 'explcitTransition').then(() => { ... })
```
```

--------------------------------

### Define URL Routes with Transitions

Source: https://github.com/craftedbygc/taxi/blob/main/docs/routing.md

Use the addRoute method to define routing rules. Provide regex for the current URL, the new URL, and the transition to use if matched. Regex is automatically wrapped with ^ and $.

```javascript
taxi.addRoute('/blog/.*', '', 'blogToHome')
```

```javascript
taxi.addRoute('', '.*', 'fromHome')
```

```javascript
taxi.addRoute('/about', '/contact', 'aboutToContact')
```

--------------------------------

### addRoute

Source: https://context7.com/craftedbygc/taxi/llms.txt

Register URL-pattern-based rules to automatically choose a transition depending on where the user is navigating from and to. Patterns are treated as RegExp and automatically wrapped in ^ and $. Register specific routes before catch-all routes.

```APIDOC
## addRoute

### Description
Register URL-pattern-based rules to automatically choose a transition depending on where the user is navigating from and to. Patterns are treated as `RegExp` and automatically wrapped in `^` and `$`. Register specific routes before catch-all routes.

### Method Signature
`addRoute(fromPattern: string, toPattern: string, transitionKey: string): void`

### Examples
```js
// Blog post → homepage
taxi.addRoute('/blog/.*', '', 'blogToHome')

// Homepage → any page
taxi.addRoute('', '.*', 'fromHome')

// Specific page pair
taxi.addRoute('/about', '/contact', 'aboutToContact')

// IMPORTANT: specific rules must come before broad catch-alls
// ✅ correct order
taxi.addRoute('/pages/specific', '', 'something')
taxi.addRoute('/pages/.*',       '', 'somethingElse')

// ❌ wrong – catch-all fires first, specific rule never reached
taxi.addRoute('/pages/.*',       '', 'somethingElse')
taxi.addRoute('/pages/specific', '', 'something')
```
```

--------------------------------

### CDN Usage for Taxi.js

Source: https://context7.com/craftedbygc/taxi/llms.txt

Use Taxi.js via CDN by including the necessary script tags for the library and its dependencies. Initialize the Core instance after the DOM is ready.

```html
<!-- CDN usage -->
<script src="https://unpkg.com/@unseenco/e@2.2.2/dist/e.umd.js" crossorigin></script>
<script src="https://unpkg.com/@unseenco/taxi@1.0.3/dist/taxi.umd.js" crossorigin></script>

<main data-taxi>
  <article data-taxi-view>...</article>
</main>

<script>
  const t = new taxi.Core()
</script>
```

--------------------------------

### Taxi Core Constructor Options

Source: https://context7.com/craftedbygc/taxi/llms.txt

Configure Taxi.js by passing an options object to the Core constructor. Options control link matching, caching, transitions, renderers, and script/CSS reloading.

```javascript
import { Core, Renderer, Transition } from '@unseenco/taxi'

const taxi = new Core({
  // CSS selector for links Taxi should handle (default shown)
  links: 'a[href]:not([target]):not([href^=\#]):not([data-taxi-ignore])',

  // Remove the old page content after onLeave completes (default: true)
  removeOldContent: true,

  // Allow new navigations to interrupt an in-progress transition (default: false)
  allowInterruption: false,

  // Disable HTML caching entirely (default: false)
  bypassCache: false,

  // Prefetch pages on mouseenter/focus (default: true)
  enablePrefetch: true,

  // Named renderer classes (key "default" is the fallback)
  renderers: {
    default: Renderer,
  },

  // Named transition classes (key "default" is the fallback)
  transitions: {
    default: Transition,
  },

  // Only reload <script> tags with data-taxi-reload. Set false to disable.
  reloadJsFilter: (element) => element.dataset.taxiReload !== undefined,

  // Reload all <link rel="stylesheet"> tags. Set false to disable.
  reloadCssFilter: (element) => true,
})
```

--------------------------------

### Define Routing Rules with addRoute()

Source: https://context7.com/craftedbygc/taxi/llms.txt

Register URL pattern-based rules to automatically select transitions based on the current and target pages. Patterns are treated as regular expressions. Ensure specific rules precede catch-all rules.

```javascript
/**
 * addRoute(fromPattern: string, toPattern: string, transitionKey: string): void
 */

// Blog post → homepage
taxi.addRoute('/blog/.*', '', 'blogToHome')

// Homepage → any page
taxi.addRoute('', '.*', 'fromHome')

// Specific page pair
taxi.addRoute('/about', '/contact', 'aboutToContact')

// IMPORTANT: specific rules must come before broad catch-alls
// ✅ correct order
taxi.addRoute('/pages/specific', '', 'something')
taxi.addRoute('/pages/.*',       '', 'somethingElse')

// ❌ wrong – catch-all fires first, specific rule never reached
taxi.addRoute('/pages/.*',       '', 'somethingElse')
taxi.addRoute('/pages/specific', '', 'something')
```

--------------------------------

### Programmatic Navigation with navigateTo()

Source: https://context7.com/craftedbygc/taxi/llms.txt

Navigate to a URL programmatically, optionally specifying a transition. Returns a Promise that resolves upon completion or rejects if interrupted. Useful for custom navigation flows.

```javascript
/**
 * navigateTo(url: string, transition?: string = false): Promise<void>
 */

// Navigate using the router / default transition
taxi.navigateTo('/contact')

// Navigate with an explicit transition
taxi.navigateTo('/contact', 'slide')
  .then(() => {
    console.log('Navigation complete')
    analytics.track('page_view', { url: '/contact' })
  })
  .catch(err => {
    // Rejected when allowInterruption is false and a transition is in progress
    console.warn(err.message) // "A transition is currently in progress"
  })
```

--------------------------------

### Route Ordering for Specificity

Source: https://github.com/craftedbygc/taxi/blob/main/docs/routing.md

Routes are tested in the order they are declared. More specific routes should be declared before catch-all routes to ensure they are matched correctly.

```javascript
// bad
taxi.addRoute('/pages/.*', '', 'somethingElse')
taxi.addRoute('/pages/specific', '', 'something')
```

```javascript
// good
taxi.addRoute('/pages/specific', '', 'something')
taxi.addRoute('/pages/.*', '', 'somethingElse')
```

--------------------------------

### Register Custom Transitions with Taxi

Source: https://github.com/craftedbygc/taxi/blob/main/docs/transitions.md

When initializing Taxi, pass an object of your custom transitions to the `transitions` option. This makes them available for use.

```javascript
import MyTransition from './transitions/MyTransition'
import SomeOtherTransition from './transitions/SomeOtherTransition'

const taxi = new Core({
	transitions: {
		mine: MyTransition,
		someOther: SomeOtherTransition,
	}
})
```

--------------------------------

### Register a Route with addRoute()

Source: https://github.com/craftedbygc/taxi/blob/main/docs/api-events.md

Use `addRoute` to register a new route pattern into the RouteStore. This method maps a URL pattern to a destination pattern and a transition name.

```javascript
taxi.addRoute('/blog/.*', '/', 'blogToHome')
```

--------------------------------

### Define a Custom Taxi Transition

Source: https://github.com/craftedbygc/taxi/blob/main/docs/transitions.md

Extend the `Transition` class to create custom animations. Implement `onLeave` for exiting animations and `onEnter` for entering animations. Remember to call `done()` when animations are complete.

```javascript
import { Transition } from '@unseenco/taxi'

export default class MyTransition extends Transition {
  /**
   * Handle the transition leaving the previous page.
   * @param { { from: HTMLElement, trigger: string|HTMLElement|false, done: function } } props
   */
  onLeave({ from, trigger, done }) {
    // do something ...
    done()
  }

  /**
   * Handle the transition entering the next page.
   * @param { { to: HTMLElement, trigger: string|HTMLElement|false, done: function } } props
   */
  onEnter({ to, trigger, done }) {
    // do something else ...
    done()
  }
}
```

--------------------------------

### Set a Default Transition

Source: https://github.com/craftedbygc/taxi/blob/main/docs/transitions.md

You can set a default transition that will be used if no specific transition is found for a navigation. This can be done during initialization or using `setDefaultTransition`.

```javascript
const taxi = new Core({
	transitions: {
		default: MyTransition
	}
})
```

```javascript
const taxi = new Core({
	transitions: {
		mine: MyTransition
	}
})

taxi.setDefaultTransition('mine')
```

--------------------------------

### Setting a Default Renderer

Source: https://github.com/craftedbygc/taxi/blob/main/docs/renderers.md

Configure a fallback renderer for pages without a specific `data-taxi-view` attribute by registering a renderer with the key 'default'. Alternatively, use `setDefaultRenderer` to specify a different key.

```javascript
const taxi = new Core({
	renderers: {
		default: MyRenderer,
		someOther: SomeOtherRenderer,
	}
})
```

```javascript
const taxi = new Core({
	renderers: {
		mine: MyRenderer,
		someOther: SomeOtherRenderer,
	}
})

taxi.setDefaultRenderer('mine')
```

--------------------------------

### Perform Manual Navigation with navigateTo()

Source: https://github.com/craftedbygc/taxi/blob/main/docs/api-events.md

Use `navigateTo` to trigger a manual navigation to a specified URL. An optional transition name can be provided; otherwise, Taxi will attempt to find a matching transition or use the default.

```javascript
taxi.navigateTo('/contact')
```

```javascript
taxi.navigateTo('/contact', 'explcitTransition').then(() => { ... })
```

--------------------------------

### Specify Transition via Data Attribute

Source: https://github.com/craftedbygc/taxi/blob/main/docs/transitions.md

Assign a `data-transition` attribute to a link to explicitly define which transition should be used for that specific navigation.

```html
<a href="/some/page/" data-transition="someTransition"> ... </a>
```

--------------------------------

### Registering Renderers with Taxi

Source: https://github.com/craftedbygc/taxi/blob/main/docs/renderers.md

Initialize Taxi by passing an object of renderers, mapping custom keys to your Renderer classes. This allows you to associate specific renderers with different pages.

```javascript
import MyRenderer from './renderers/MyRenderer'
import SomeOtherRenderer from './renderers/SomeOtherRenderer'

const taxi = new Core({
	renderers: {
		mine: MyRenderer,
		someOther: SomeOtherRenderer,
	}
})
```

--------------------------------

### Manage Cache with updateCache() and clearCache()

Source: https://context7.com/craftedbygc/taxi/llms.txt

Manually manage the HTML cache. Use updateCache() after AJAX content updates to snapshot the current DOM. Use clearCache() to force a network fetch on the next visit.

```javascript
/**
 * updateCache(url?: string): void
 * clearCache(url?: string): void
 */

// After an infinite-scroll appends new posts, snapshot current DOM into cache
document.querySelector('#load-more').addEventListener('click', async () => {
  await loadMorePosts()         // your AJAX call
  taxi.updateCache()            // no argument = current URL
})

// Force a specific page to always be re-fetched
taxi.clearCache('/search')

// Per-page opt-out via HTML attribute (never cached):
// <article data-taxi-view data-taxi-nocache>...</article>
```

--------------------------------

### Custom Page Renderer Implementation

Source: https://context7.com/craftedbygc/taxi/llms.txt

Extend the Renderer class to manage component initialization and teardown for pages. Override lifecycle hooks like initialLoad, onEnter, onEnterCompleted, onLeave, and onLeaveCompleted.

```javascript
import { Renderer } from '@unseenco/taxi'

export default class PageRenderer extends Renderer {
  /**
   * Called only once on the user's very first visit.
   * Taxi does NOT call onEnter/onEnterCompleted automatically here,
   * so call them manually if you need consistent init logic.
   */
  initialLoad() {
    // set up persistent site-wide components (nav, smooth scroll, etc.)
    this.onEnter()
    this.onEnterCompleted()
  }

  /** Called after new content is added to the data-taxi container. */
  onEnter() {
    // this.page    – the full incoming Document
    // this.title   – document.title of the incoming page
    // this.wrapper – the [data-taxi] element
    // this.content – the [data-taxi-view] element being added
    console.log('Entering:', this.title)
    initComponents(this.content)
  }

  /** Called after Transition.onEnter has fully completed. */
  onEnterCompleted() {
    console.log('Transition in finished')
  }

  /** Called before Transition.onLeave is run. */
  onLeave() {
    destroyComponents(this.content)
  }

  /** Called after Transition.onLeave has fully completed. */
  onLeaveCompleted() {
    console.log('Old content removed')
  }
}
```

--------------------------------

### Registering Custom Renderers

Source: https://context7.com/craftedbygc/taxi/llms.txt

Register custom renderer classes when initializing the Core instance. Use the key as the value for the data-taxi-view attribute on pages that should use a specific renderer.

```javascript
import PageRenderer from './renderers/PageRenderer'
import BlogRenderer from './renderers/BlogRenderer'

const taxi = new Core({
  renderers: {
    default: PageRenderer, // used when data-taxi-view has no value
    blog: BlogRenderer,    // used when data-taxi-view="blog"
  }
})
```

--------------------------------

### updateCache and clearCache

Source: https://context7.com/craftedbygc/taxi/llms.txt

Manage the HTML cache manually. Use `updateCache()` after AJAX mutations (infinite scroll, search results). Use `clearCache()` to force a fresh network fetch on the next visit.

```APIDOC
## updateCache() and clearCache()

### Description
Manage the HTML cache manually. Use `updateCache()` after AJAX mutations (infinite scroll, search results). Use `clearCache()` to force a fresh network fetch on the next visit.

### Method Signatures
`updateCache(url?: string): void`
`clearCache(url?: string): void`

### Examples
```js
// After an infinite-scroll appends new posts, snapshot current DOM into cache
document.querySelector('#load-more').addEventListener('click', async () => {
  await loadMorePosts()         // your AJAX call
  taxi.updateCache()            // no argument = current URL
})

// Force a specific page to always be re-fetched
taxi.clearCache('/search')

// Per-page opt-out via HTML attribute (never cached):
// <article data-taxi-view data-taxi-nocache>...</article>
```
```

--------------------------------

### addRoute()

Source: https://github.com/craftedbygc/taxi/blob/main/docs/api-events.md

Registers a route into the RouteStore. This method is used to define how URL patterns map to internal routes.

```APIDOC
## addRoute()

### Description
Registers a route into the RouteStore.

### Method Signature
`addRoute(fromPattern: string, toPattern: string, transition: string): void`

### Example
```js
taxi.addRoute('/blog/.*', '/', 'blogToHome')
```
```

--------------------------------

### Listen for Navigation Events

Source: https://github.com/craftedbygc/taxi/blob/main/docs/api-events.md

Register event listeners for navigation lifecycle events like `NAVIGATE_IN`, `NAVIGATE_OUT`, and `NAVIGATE_END` using the `taxi.on()` method. These events provide context about the navigation, including `to`, `from`, and `trigger` data.

```javascript
import { Core } from '@unseenco/taxi'

const taxi = new Core({ ... })

// This event is sent everytime a `data-taxi-view` is added to the DOM
taxi.on('NAVIGATE_IN', ({ to, trigger }) => {
  // ...
})

// This event is sent before the `onLeave()` method of a transition is run to hide a `data-taxi-view`
taxi.on('NAVIGATE_OUT', ({ from, trigger }) => {
  // ...
})

// This event is sent everytime the `done()` method is called in the `onEnter()` method of a transition
taxi.on('NAVIGATE_END', ({ to, from, trigger }) => {
  // ...
})
```

--------------------------------

### HTML Structure for Taxi.js

Source: https://github.com/craftedbygc/taxi/blob/main/docs/how-to-use.md

Define parent and child elements with data attributes for content replacement during transitions.

```html
<main data-taxi>
    <article data-taxi-view>
        ...
    </article>
</main>
```

--------------------------------

### setDefaultRenderer and setDefaultTransition

Source: https://context7.com/craftedbygc/taxi/llms.txt

Override the key used to look up the fallback renderer or transition, without having to rename your class registrations to "default".

```APIDOC
## setDefaultRenderer() and setDefaultTransition()

### Description
Override the key used to look up the fallback renderer or transition, without having to rename your class registrations to `"default"`.

### Method Signatures
`setDefaultRenderer(renderer: string): void`
`setDefaultTransition(transition: string): void`

### Examples
```js
const taxi = new Core({
  renderers:   { page: PageRenderer, blog: BlogRenderer },
  transitions: { fade: FadeTransition, slide: SlideTransition },
})

taxi.setDefaultRenderer('page')
taxi.setDefaultTransition('fade')
```
```

--------------------------------

### Register Transitions with Taxi.js Core

Source: https://context7.com/craftedbygc/taxi/llms.txt

Register custom transition classes with the Taxi.js Core instance. This allows you to use named transitions like 'fade' and 'slide'. Set a default transition to be used when none is explicitly specified.

```javascript
// Register transitions and set a default.
import FadeTransition from './transitions/FadeTransition'
import SlideTransition from './transitions/SlideTransition'

const taxi = new Core({
  transitions: {
    fade: FadeTransition,
    slide: SlideTransition,
  }
})

taxi.setDefaultTransition('fade')
```

--------------------------------

### Taxi.js Navigation Events

Source: https://context7.com/craftedbygc/taxi/llms.txt

Listen to navigation events like NAVIGATE_IN, NAVIGATE_OUT, and NAVIGATE_END to hook into the page transition lifecycle. Use taxi.on() to subscribe and taxi.off() to unsubscribe. Ensure you remove specific listeners to prevent memory leaks.

```javascript
import { Core } from '@unseenco/taxi'

const taxi = new Core({ /* ... */ })

// Fired each time a data-taxi-view is added to the DOM
taxi.on('NAVIGATE_IN', ({ to, from, trigger }) => {
  console.log('New content added:', to.title)
  gtag('event', 'page_view', { page_path: window.location.pathname })
})

// Fired before Transition.onLeave() runs (start of leaving the old page)
taxi.on('NAVIGATE_OUT', ({ from, trigger }) => {
  console.log('Leaving:', from.title)
})

// Fired after Transition.onEnter() completes (full navigation finished)
taxi.on('NAVIGATE_END', ({ to, from, trigger }) => {
  console.log('Navigation done. From:', from.title, '→ To:', to.title)
  window.scrollTo(0, 0)
})

// Remove a specific listener
function trackNav({ to }) { analytics.page(to.title) }
taxi.on('NAVIGATE_END', trackNav)
taxi.off('NAVIGATE_END', trackNav)

// Remove ALL listeners for an event
taxi.off('NAVIGATE_IN')
```

--------------------------------

### Implement a Custom Fade Transition

Source: https://context7.com/craftedbygc/taxi/llms.txt

Extend the Transition class to create a custom fade animation. Ensure you call done() in onLeave and onEnter callbacks to signal completion. This is useful for creating custom page transition effects.

```javascript
import { Transition } from '@unseenco/taxi'
import gsap from 'gsap'

export default class FadeTransition extends Transition {
  /**
   * @param {{ from: HTMLElement, trigger: string|HTMLElement|false, done: function }}
   */
onLeave({ from, trigger, done }) {
    gsap.to(from, {
      opacity: 0,
      duration: 0.4,
      onComplete: done,  // MUST call done() to continue the lifecycle
    })
  }

  /**
   * @param {{ to: HTMLElement, trigger: string|HTMLElement|false, done: function }}
   * trigger is 'popstate' for browser back/forward, an HTMLElement for link clicks,
   * or false when navigateTo() was called programmatically.
   */
  onEnter({ to, trigger, done }) {
    gsap.fromTo(to,
      { opacity: 0 },
      { opacity: 1, duration: 0.4, onComplete: done }
    )
  }
}
```

--------------------------------

### HTML Script Tags for Reloading

Source: https://github.com/craftedbygc/taxi/blob/main/docs/reloading-js.md

Demonstrates which script tags are reloaded by default. Scripts with the `data-taxi-reload` attribute are reloaded, while others are not.

```html
<!-- reloaded -->
<script src="/foo.js" data-taxi-reload />

<!-- this is not reloaded -->
<script src="/bar.js" />
```

--------------------------------

### Clear Cache with clearCache()

Source: https://github.com/craftedbygc/taxi/blob/main/docs/api-events.md

Use `clearCache` to remove cached HTML for a specified URL, or the current URL if none is provided.

```javascript
taxi.clearCache('/path/to/delete')
```

--------------------------------

### Custom Renderer Structure

Source: https://github.com/craftedbygc/taxi/blob/main/docs/renderers.md

Extend the base Renderer class to define custom behavior for page enter and leave events. Available methods include onEnter, onEnterCompleted, onLeave, and onLeaveCompleted.

```javascript
import { Renderer } from '@unseenco/taxi';

export default class CustomRenderer extends Renderer {
  onEnter() {
    // run after the new content has been added to the Taxi container
  }

  onEnterCompleted() {
     // run after the transition.onEnter has fully completed
  }

  onLeave() {
    // run before the transition.onLeave method is called
  }

  onLeaveCompleted() {
    // run after the transition.onleave has fully completed
  }
}
```

--------------------------------

### Associating Renderer with a Page

Source: https://github.com/craftedbygc/taxi/blob/main/docs/renderers.md

Use the `data-taxi-view` attribute on an HTML element to specify which registered renderer should be used for that page. If no value is provided, Taxi falls back to a renderer keyed as 'default'.

```html
<div data-taxi-view="someOther">
    ...
</div>
```

--------------------------------

### Update Cache with updateCache()

Source: https://github.com/craftedbygc/taxi/blob/main/docs/api-events.md

Use `updateCache` to refresh the cached HTML for a specific URL, or the current URL if none is provided. This is useful for dynamically updated content like search results or infinite scroll.

```javascript
taxi.updateCache()
```

--------------------------------

### Force a Specific Transition for a Link

Source: https://context7.com/craftedbygc/taxi/llms.txt

Use the 'data-transition' attribute on anchor tags to specify which transition should be used for that particular link. This overrides the default or route-based transition.

```html
<!-- Force a specific transition for a single link -->
<a href="/about" data-transition="slide">About us</a>
```

--------------------------------

### updateCache()

Source: https://github.com/craftedbygc/taxi/blob/main/docs/api-events.md

Updates the cached HTML for the provided URL. If no URL is provided, it updates the cache for the current URL. Useful for dynamic content updates.

```APIDOC
## updateCache()

### Description
Updates the cached HTML for the provided URL. If no URL is provided, update cache for the current URL.

Useful when adding/removing content via AJAX such as a search page or infinite scroll.

### Method Signature
`updateCache(url?: string): void`

### Example
```js
taxi.updateCache()
```
```

--------------------------------

### clearCache()

Source: https://github.com/craftedbygc/taxi/blob/main/docs/api-events.md

Remove the cached HTML for the provided URL. If no URL is provided, it removes the cache for the current URL.

```APIDOC
## clearCache()

### Description
Remove the cached HTML for the provided URL. If no URL is provided, remove cache for the current URL.

### Method Signature
`clearCache(url?: string): void`

### Example
```js
taxi.clearCache('/path/to/delete')
```
```

--------------------------------

### Basic HTML Structure for Taxi

Source: https://context7.com/craftedbygc/taxi/llms.txt

The required HTML structure for Taxi.js involves a main container with the data-taxi attribute and a child element with the data-taxi-view attribute for dynamic content replacement.

```html
<!-- Required HTML structure -->
<main data-taxi>
  <!-- data-taxi-view must be the ONLY child of data-taxi -->
  <article data-taxi-view>
    <!-- page content goes here -->
  </article>
</main>
```

--------------------------------

### Selectively Reload CSS with data-taxi-reload

Source: https://github.com/craftedbygc/taxi/blob/main/docs/reloading-css.md

Only stylesheets with the `data-taxi-reload` attribute are reloaded by default. This allows you to control which CSS files are reapplied after navigation.

```html
<!-- reloaded -->
<link rel="stylesheet" href="/foo.css" data-taxi-reload />

<!-- this is not reloaded -->
<link rel="stylesheet" href="/bar.css" />
```

--------------------------------

### Set Default Renderer with setDefaultRenderer()

Source: https://github.com/craftedbygc/taxi/blob/main/docs/api-events.md

Use `setDefaultRenderer` to change the name of the default renderer used by Taxi.js.

```javascript
taxi.setDefaultRenderer('myRenderer')
```

--------------------------------

### setDefaultRenderer()

Source: https://github.com/craftedbygc/taxi/blob/main/docs/api-events.md

Allows changing the name of the default renderer.

```APIDOC
## setDefaultRenderer()

### Description
If you don't like "default" as the name of your default renderer, you can change the default renderer to be anything you like here.

### Method Signature
`setDefaultRenderer(renderer: string): void`

### Example
```js
taxi.setDefaultRenderer('myRenderer')
```
```

--------------------------------

### setDefaultTransition()

Source: https://github.com/craftedbygc/taxi/blob/main/docs/api-events.md

Allows changing the name of the default transition.

```APIDOC
## setDefaultTransition()

### Description
Same as `setDefaultRenderer`, but for the transitions instead.

### Method Signature
`setDefaultTransition(transition: string): void`

### Example
```js
taxi.setDefaultTransition('myTransition')
```
```

--------------------------------

### Set Default Transition with setDefaultTransition()

Source: https://github.com/craftedbygc/taxi/blob/main/docs/api-events.md

Use `setDefaultTransition` to change the name of the default transition used by Taxi.js.

```javascript
taxi.setDefaultTransition('myTransition')
```

--------------------------------

### Set Default Renderer and Transition

Source: https://context7.com/craftedbygc/taxi/llms.txt

Override the default renderer or transition keys used by Taxi.js. This is useful if you don't want to name your custom classes 'default' but still want them to be the fallback.

```javascript
/**
 * setDefaultRenderer(renderer: string): void
 * setDefaultTransition(transition: string): void
 */

const taxi = new Core({
  renderers:   { page: PageRenderer, blog: BlogRenderer },
  transitions: { fade: FadeTransition, slide: SlideTransition },
})

taxi.setDefaultRenderer('page')
taxi.setDefaultTransition('fade')
```

--------------------------------

### Reloading CSS with Taxi.js

Source: https://context7.com/craftedbygc/taxi/llms.txt

Control CSS reloading on new pages using the `reloadCssFilter` option. The default behavior reloads all stylesheets. Customize this filter to selectively reload CSS based on attributes, filenames, or disable it entirely by setting it to `false`.

```javascript
import { Core } from '@unseenco/taxi'

// Default: reload all stylesheets (reloadCssFilter defaults to () => true)
const taxi = new Core()

// Only reload stylesheets with data-taxi-reload
const taxi2 = new Core({
  reloadCssFilter: (element) => element.dataset.taxiReload !== undefined,
})

// Reload only stylesheets matching a filename pattern
const taxi3 = new Core({
  reloadCssFilter: (element) => element.href?.includes('/page-styles/'),
})

// Disable CSS reloading entirely
const taxi4 = new Core({
  reloadCssFilter: false,
})
```

```html
<!-- Reloaded (with default filter where data-taxi-reload is required) -->
<link rel="stylesheet" href="/page.css" data-taxi-reload />

<!-- Not reloaded -->
<link rel="stylesheet" href="/global.css" />
```

--------------------------------

### Custom CSS Reload Filter to Reload All Stylesheets

Source: https://github.com/craftedbygc/taxi/blob/main/docs/reloading-css.md

Configure a custom `reloadCssFilter` to reload all stylesheets on the new page, regardless of attributes. This is useful when using build tools that generate per-page CSS.

```javascript
import { Core } from '@unseenco/taxi'

const taxi = new Core({
	reloadCssFilter: (element) => true
})
```

--------------------------------

### Event Listeners

Source: https://github.com/craftedbygc/taxi/blob/main/docs/api-events.md

Taxi.js uses [@unseenco/e](https://www.npmjs.com/package/@unseenco/e) for event handling. This section details how to add and remove listeners for navigation events.

```APIDOC
## Events

Events are handled by [@unseenco/e](https://www.npmjs.com/package/@unseenco/e).

### Adding Listeners

```js
import { Core } from '@unseenco/taxi'

const taxi = new Core({ ... })

// This event is sent everytime a `data-taxi-view` is added to the DOM
taxi.on('NAVIGATE_IN', ({ to, trigger }) => {
  // ...
})

// This event is sent before the `onLeave()` method of a transition is run to hide a `data-taxi-view`
taxi.on('NAVIGATE_OUT', ({ from, trigger }) => {
  // ...
})

// This event is sent everytime the `done()` method is called in the `onEnter()` method of a transition
taxi.on('NAVIGATE_END', ({ to, from, trigger }) => {
  // ...
})
```

### Removing Listeners

You can call `taxi.off(event_name)` to remove all listeners for an event, or pass the callback to remove just that listener instead:

```js
function foo() {
	...
}

taxi.on('NAVIGATE_OUT', foo)

// Remove just the foo listener
taxi.off('NAVIGATE_OUT', foo)

// Remove all listeners
taxi.off('NAVIGATE_IN')
```
```

--------------------------------

### Default CSS Reload Filter

Source: https://github.com/craftedbygc/taxi/blob/main/docs/reloading-css.md

This is the default callback function used by Taxi.js to determine if a stylesheet should be reloaded. It checks for the presence of the `data-taxi-reload` attribute.

```javascript
(element) => element.dataset.taxiReload !== undefined
```

--------------------------------

### Disable JavaScript Reloading

Source: https://github.com/craftedbygc/taxi/blob/main/docs/reloading-js.md

Shows how to completely disable Taxi's JavaScript reloading feature by setting `reloadJsFilter` to `false` during initialization.

```javascript
import { Core } from '@unseenco/taxi'

const taxi = new Core({
  reloadJsFilter: false
})
```

--------------------------------

### Reloading JS with Taxi.js

Source: https://context7.com/craftedbygc/taxi/llms.txt

Configure Taxi.js to automatically reload JavaScript on new pages using the `reloadJsFilter` option. The default filter reloads scripts with a `data-taxi-reload` attribute. You can provide a custom function or `false` to disable.

```javascript
import { Core } from '@unseenco/taxi'

// Default: only scripts with data-taxi-reload attribute
const taxi = new Core({
  reloadJsFilter: (element) => element.dataset.taxiReload !== undefined,
})

// Custom: also reload a specific third-party script
const taxi2 = new Core({
  reloadJsFilter: (element) =>
    element.dataset.taxiReload !== undefined ||
    element.src?.includes('analytics.min.js'),
})

// Disable JS reloading entirely
const taxi3 = new Core({
  reloadJsFilter: false,
})
```

```html
<!-- This script is reloaded on every navigation -->
<script src="/page-specific.js" data-taxi-reload></script>

<!-- This script is NOT reloaded -->
<script src="/main-bundle.js"></script>
```

--------------------------------

### Default reloadJsFilter Callback

Source: https://github.com/craftedbygc/taxi/blob/main/docs/reloading-js.md

This is the default JavaScript callback function used by Taxi to filter which scripts should be reloaded. It checks if the script element has the `data-taxi-reload` attribute.

```javascript
 (element) => element.dataset.taxiReload !== undefined
```

--------------------------------

### Disable CSS Reloading Feature

Source: https://github.com/craftedbygc/taxi/blob/main/docs/reloading-css.md

To disable the CSS reloading feature entirely, set the `reloadCssFilter` option to `false` during Taxi.js initialization.

```javascript
import { Core } from '@unseenco/taxi'

const taxi = new Core({
	reloadCssFilter: false
})
```

--------------------------------

### Remove Navigation Event Listeners

Source: https://github.com/craftedbygc/taxi/blob/main/docs/api-events.md

Remove event listeners using `taxi.off()`. You can remove all listeners for a specific event by providing only the event name, or remove a single listener by providing both the event name and the callback function.

```javascript
function foo() {
	... 
}

taxi.on('NAVIGATE_OUT', foo)

// Remove just the foo listener
taxi.off('NAVIGATE_OUT', foo)

// Remove all listeners
taxi.off('NAVIGATE_IN')
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.