### onInit Lifecycle Hook Example

Source: https://motionrail.jujiplay.com/docs/extensions/custom

Example of the onInit hook, used for initial setup like logging carousel item count.

```javascript
onInit(motionRail, state) {
  console.log('Carousel initialized with', state.totalItems, 'items');
  // Create UI elements
  // Attach event listeners
}
```

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

### Complete MotionRail Initialization with Arrows

Source: https://motionrail.jujiplay.com/docs/extensions/arrows

Example demonstrating a full MotionRail setup with breakpoints and customized Arrows extension, including custom icons and loop behavior.

```javascript
import { MotionRail } from "motionrail";
import { Arrows } from "motionrail/extensions/arrows";
import "motionrail/style.css";
import "motionrail/extensions/arrows/style.css";

const carousel = new MotionRail(document.getElementById("carousel"), {
  breakpoints: [
    { columns: 1, gap: "16px" },
    { width: 768, columns: 2, gap: "16px" },
    { width: 1024, columns: 3, gap: "20px" },
  ],
  extensions: [
    Arrows({
      loop: true,
      leftIcon: "←",
      rightIcon: "→",
    }),
  ],
});
```

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

### Request Installation Docs as Markdown

Source: https://motionrail.jujiplay.com/llms-full.txt

Use this command to fetch the installation documentation in markdown format. Ensure you include the 'Accept: text/markdown' header.

```bash
curl -H "Accept: text/markdown" https://motionrail.jujiplay.com/docs/installation
```

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

### Complete Example

Source: https://motionrail.jujiplay.com/docs/extensions/arrows

A comprehensive example demonstrating the initialization of MotionRail with the Arrows extension, including breakpoints and custom icons.

```APIDOC
## Complete Example

### Description
Demonstrates initializing MotionRail with the Arrows extension, including breakpoints and custom icons.

### Method
```javascript
import { MotionRail } from "motionrail";
import { Arrows } from "motionrail/extensions/arrows";
import "motionrail/style.css";
import "motionrail/extensions/arrows/style.css";

const carousel = new MotionRail(document.getElementById("carousel"), {
  breakpoints: [
    { columns: 1, gap: "16px" },
    { width: 768, columns: 2, gap: "16px" },
    { width: 1024, columns: 3, gap: "20px" },
  ],
  extensions: [
    Arrows({
      loop: true,
      leftIcon: "←",
      rightIcon: "→",
    }),
  ],
});
```
```

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

### Install MotionRail and VistaView

Source: https://motionrail.jujiplay.com/extensions-vistaview.txt

Install the necessary packages using npm.

```bash
npm install motionrail vistaview
```

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

### Complete MotionRail Svelte Example

Source: https://motionrail.jujiplay.com/frameworks-svelte.txt

Demonstrates the full setup of the MotionRail component with various options like autoplay, delay, breakpoints, and event handling. Includes basic carousel controls and state display.

```svelte
<script>
  import { MotionRail } from 'motionrail/svelte';
  import 'motionrail/style.css';

  let instance;
  let container;
  let currentState = null;

  const options = {
    autoplay: true,
    delay: 3000,
    breakpoints: [
      { columns: 1, gap: '16px' },
      { width: 768, columns: 2, gap: '16px' },
      { width: 1024, columns: 3, gap: '20px' }
    ],
    onChange: (state) => {
      currentState = state;
    }
  };

  function handleNext() {
    instance?.next();
  }

  function handlePrev() {
    instance?.prev();
  }

  function handlePlay() {
    instance?.play();
  }

  function handlePause() {
    instance?.pause();
  }
</script>

<div>
  <MotionRail
    {options}
    bind:instance
    bind:container
    class="my-carousel"
  >
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
    <div>Item 5</div>
  </MotionRail>

  <div class="controls">
    <button on:click={handlePrev}>Previous</button>
    <button on:click={handleNext}>Next</button>
    <button on:click={handlePlay}>Play</button>
    <button on:click={handlePause}>Pause</button>
  </div>

  {#if currentState}
    <div class="state-info">
      <p>Visible items: {currentState.visibleItemIndexes.join(', ')}</p>
      <p>Total items: {currentState.totalItems}</p>
    </div>
  {/if}
</div>
```

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

### Request Quick Start Docs as Markdown

Source: https://motionrail.jujiplay.com/llms-full.txt

Use this command to fetch the quick start documentation in markdown format. Ensure you include the 'Accept: text/markdown' header.

```bash
curl -H "Accept: text/markdown" https://motionrail.jujiplay.com/docs/quick-start
```

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

### Complete MotionRail Example

Source: https://motionrail.jujiplay.com/api-types-motionrail-options.txt

A comprehensive example demonstrating the initialization of MotionRail with various configuration options and extensions.

```APIDOC
## Complete Example

This example shows how to initialize MotionRail with multiple options and extensions.

```ts
import { MotionRail } from "motionrail";
import { Arrows } from "motionrail/extensions/arrows";
import { Dots } from "motionrail/extensions/dots";
import "motionrail/style.css";
import "motionrail/extensions/arrows/style.css";
import "motionrail/extensions/dots/style.css";

const carousel = new MotionRail(document.getElementById("carousel"), {
  autoplay: true,
  delay: 4000,
  resumeDelay: 5000,
  rtl: false,
  onChange: (state) => {
    console.log("State changed:", state);
  },
  breakpoints: [
    { columns: 1, gap: "16px" },
    { width: 768, columns: 2, gap: "24px" },
    { width: 1024, columns: 3, gap: "32px" },
  ],
  extensions: [Arrows(), Dots({ dotSize: 48 })],
});
```
```

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

### Example: Playback Control with Button

Source: https://motionrail.jujiplay.com/docs/api

Demonstrates how to use the `next()` method in response to a button click. This example assumes a button with the ID 'next-btn' exists.

```javascript
document.getElementById("next-btn").addEventListener("click", () => {
  carousel.next();
});
```

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

### Complete Example with Dots Extension

Source: https://motionrail.jujiplay.com/docs/extensions/dots

A comprehensive example showing how to initialize MotionRail with the Dots extension, including breakpoint configurations and the `showIndex` option.

```APIDOC
## Complete Example with Dots Extension

### Description
Initializes MotionRail with responsive breakpoints and the Dots extension, displaying item indices.

### Method
```javascript
import { MotionRail } from "motionrail";
import { Dots } from "motionrail/extensions/dots";
import "motionrail/style.css";
import "motionrail/extensions/dots/style.css";

const carousel = new MotionRail(document.getElementById("carousel"), {
  breakpoints: [
    { columns: 1, gap: "16px" },
    { width: 768, columns: 2, gap: "16px" },
  ],
  extensions: [Dots({ showIndex: true })],
});
```
```

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

### Complete MotionRail Component Example

Source: https://motionrail.jujiplay.com/docs/frameworks/react

A comprehensive example demonstrating the usage of `ref`, `divRef`, options with state changes, and control buttons.

```jsx
import { useRef, useState } from "react";
import { MotionRail } from "motionrail/react";
import "motionrail/style.css";

function Carousel() {
  const carouselRef = useRef(null);
  const containerRef = useRef(null);
  const [currentState, setCurrentState] = useState(null);

  const handleNext = () => {
    carouselRef.current?.next();
  };

  const handlePrev = () => {
    carouselRef.current?.prev();
  };

  const handlePlay = () => {
    carouselRef.current?.play();
  };

  const handlePause = () => {
    carouselRef.current?.pause();
  };

  // Define options inside only when using setState (setCurrentState)
  const options = {
    autoplay: true,
    delay: 3000,
    breakpoints: [
      { columns: 1, gap: "16px" },
      { width: 768, columns: 2, gap: "16px" },
      { width: 1024, columns: 3, gap: "20px" },
    ],
    onChange: setCurrentState,
  };

  return (
    <div>
      <MotionRail
        ref={carouselRef}
        divRef={containerRef}
        options={options}
        className="my-carousel"
      >
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
        <div>Item 5</div>
      </MotionRail>

      <div className="controls">
        <button onClick={handlePrev}>Previous</button>
        <button onClick={handleNext}>Next</button>
        <button onClick={handlePlay}>Play</button>
        <button onClick={handlePause}>Pause</button>
      </div>

      {currentState && (
        <div className="state-info">
          <p>Visible items: {currentState.visibleItemIndexes.join(", ")}</p>
          <p>Total items: {currentState.totalItems}</p>
        </div>
      )}
    </div>
  );
}
```

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

### Complete MotionRail Initialization Example

Source: https://motionrail.jujiplay.com/api-types-motionrail-options.txt

A comprehensive example demonstrating the initialization of a MotionRail carousel with multiple options, including autoplay, delays, breakpoints, and extensions.

```javascript
import { MotionRail } from "motionrail";
import { Arrows } from "motionrail/extensions/arrows";
import { Dots } from "motionrail/extensions/dots";
import "motionrail/style.css";
import "motionrail/extensions/arrows/style.css";
import "motionrail/extensions/dots/style.css";

const carousel = new MotionRail(document.getElementById("carousel"), {
  autoplay: true,
  delay: 4000,
  resumeDelay: 5000,
  rtl: false,
  onChange: (state) => {
    console.log("State changed:", state);
  },
  breakpoints: [
    { columns: 1, gap: "16px" },
    { width: 768, columns: 2, gap: "24px" },
    { width: 1024, columns: 3, gap: "32px" },
  ],
  extensions: [Arrows(), Dots({ dotSize: 48 })],
});
```

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

### Install MotionRail with bun

Source: https://motionrail.jujiplay.com/docs/installation

Use this command to install MotionRail using bun.

```bash
bun add motionrail
```

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

### Logger Extension Configuration

Source: https://motionrail.jujiplay.com/docs/extensions/logger

Configure the Logger extension with options like outputToConsole and custom callbacks. This example shows basic setup with a custom onUpdate logic.

```javascript
import { MotionRail } from "motionrail";
import { Logger } from "motionrail/extensions/logger";
import "motionrail/style.css";

const carousel = new MotionRail(document.getElementById("carousel"), {
  autoplay: true,
  delay: 3000,
  breakpoints: [
    { minWidth: "0px", columns: 1 },
    { minWidth: "768px", columns: 2 },
  ],
  extensions: [
    Logger({
      outputToConsole: true,
      onUpdate: (carousel, state) => {
        // custom update logic
      },
    }),
  ],
});
```

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

### Lifecycle Extension Example

Source: https://motionrail.jujiplay.com/docs/api/types/motionrail-extension

Demonstrates how to implement all lifecycle methods (`onInit`, `onUpdate`, `onDestroy`) within a single extension.

```APIDOC
## Lifecycle Extension

### Description
An example extension showcasing the order of lifecycle methods.

### Code
```ts
const lifecycleExtension: MotionRailExtension = {
  name: "lifecycle-demo",
  onInit: (motionRail, state) => {
    console.log("1. Init");
  },
  onUpdate: (motionRail, state) => {
    console.log("2. Update (called on scroll, resize, etc.)");
  },
  onDestroy: (motionRail, state) => {
    console.log("3. Destroy");
  },
};
```
```

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

### Complete Thumbnails Example with Custom Dimensions

Source: https://motionrail.jujiplay.com/docs/extensions/thumbnails

A complete example demonstrating the initialization of MotionRail with the Thumbnails extension, including custom thumbnail dimensions and breakpoint configuration.

```javascript
import { MotionRail } from "motionrail";
import { Thumbnails } from "motionrail/extensions/thumbnails";
import "motionrail/style.css";
import "motionrail/extensions/thumbnails/style.css";

const carousel = new MotionRail(document.getElementById("carousel"), {
  breakpoints: [{ columns: 1, gap: "16px" }],
  extensions: [
    Thumbnails({
      thumbnailWidth: 100,
      thumbnailHeight: 100,
    }),
  ],
});
```

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

### Complete Dots Extension Example

Source: https://motionrail.jujiplay.com/docs/extensions/dots

A full example demonstrating the initialization of MotionRail with the Dots extension, including breakpoint configuration and showing index numbers.

```javascript
import { MotionRail } from "motionrail";
import { Dots } from "motionrail/extensions/dots";
import "motionrail/style.css";
import "motionrail/extensions/dots/style.css";

const carousel = new MotionRail(document.getElementById("carousel"), {
  breakpoints: [
    { columns: 1, gap: "16px" },
    { width: 768, columns: 2, gap: "16px" },
  ],
  extensions: [Dots({ showIndex: true })],
});
```

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

### Thumbnails Extension Complete Example

Source: https://motionrail.jujiplay.com/docs/extensions/thumbnails

A comprehensive example demonstrating the initialization of MotionRail with the Thumbnails extension and custom options, including UMD (CDN) usage.

```APIDOC
## Thumbnails Extension Complete Example (JavaScript)

### Description
This example provides a full implementation of the Thumbnails extension with custom `thumbnailWidth` and `thumbnailHeight` settings. It also includes the necessary imports and CSS links for a complete setup.

### Method
JavaScript Initialization

### Endpoint
N/A (Client-side JavaScript)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
import { MotionRail } from "motionrail";
import { Thumbnails } from "motionrail/extensions/thumbnails";
import "motionrail/style.css";
import "motionrail/extensions/thumbnails/style.css";

const carousel = new MotionRail(document.getElementById("carousel"), {
  breakpoints: [{ columns: 1, gap: "16px" }],
  extensions: [
    Thumbnails({
      thumbnailWidth: 100,
      thumbnailHeight: 100,
    }),
  ],
});
```

## Thumbnails Extension Complete Example (UMD/CDN)

### Description
This example demonstrates how to use the Thumbnails extension via CDN links for both the main MotionRail library and the extension. It includes the HTML structure and the JavaScript initialization.

### Method
HTML and JavaScript Initialization (CDN)

### Endpoint
N/A (Client-side JavaScript)

### Parameters
#### Path Parameters
N/A

#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```html
<link
  rel="stylesheet"
  href="https://unpkg.com/motionrail@latest/main/dist/style.css"
/>
<link
  rel="stylesheet"
  href="https://unpkg.com/motionrail@latest/extensions/thumbnails/dist/style.css"
/>

<div data-motionrail id="carousel">
  <!-- carousel items -->
</div>

<script src="https://unpkg.com/motionrail@latest/main/dist/motionrail.umd.js"></script>
<script src="https://unpkg.com/motionrail@latest/extensions/thumbnails/dist/thumbnails.umd.js"></script>
<script>
  const carousel = new MotionRail(document.getElementById("carousel"), {
    breakpoints: [{ columns: 1, gap: "16px" }],
    extensions: [
      MotionRail.Thumbnails({
        thumbnailWidth: 100,
        thumbnailHeight: 100,
      }),
    ],
  });
</script>
```

### Response
#### Success Response (200)
N/A (Client-side JavaScript)

#### Response Example
N/A
```

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

### Request Documentation as Markdown

Source: https://motionrail.jujiplay.com/ai-markdown-for-agents.txt

Use this command to request the installation documentation in markdown format. Ensure you include the `Accept: text/markdown` header.

```bash
curl -H "Accept: text/markdown" https://motionrail.jujiplay.com/docs/installation
```

```bash
curl -H "Accept: text/markdown" https://motionrail.jujiplay.com/docs/api/class/motionrail
```

```bash
curl -H "Accept: text/markdown" https://motionrail.jujiplay.com/docs/quick-start
```

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

### Complete MotionRail Initialization with VistaView Lightbox

Source: https://motionrail.jujiplay.com/extensions-vistaview.txt

A full example demonstrating MotionRail initialization with custom breakpoints and VistaView lightbox options.

```javascript
import { MotionRail } from "motionrail";
import { VistaViewLightbox } from "motionrail/extensions/vistaview";
import "motionrail/style.css";
import "vistaview/style.css";

const carousel = new MotionRail(document.getElementById("carousel"), {
  breakpoints: [
    { columns: 1, gap: "16px" },
    { width: 768, columns: 2, gap: "16px" },
    { width: 1024, columns: 3, gap: "20px" },
  ],
  extensions: [
    VistaViewLightbox({
      vistaViewOptions: {
        maxZoomLevel: 3,
        controls: {
          topRight: ["zoomIn", "zoomOut", "close"],
        },
      },
    }),
  ],
});
```

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

### Install MotionRail with yarn

Source: https://motionrail.jujiplay.com/docs/installation

Use this command to install MotionRail using yarn.

```bash
yarn add motionrail
```

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

### Basic MotionRail Vue 3 Usage

Source: https://motionrail.jujiplay.com/frameworks-vue.txt

A simple example demonstrating the basic setup for the MotionRail Vue 3 component with predefined options.

```vue
<script setup>
import { MotionRail } from "motionrail/vue";
import "motionrail/style.css";

const options = { breakpoints: [{ columns: 3, gap: "20px" }] };
</script>

<template>
  <MotionRail :options="options">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </MotionRail>
</template>
```

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

### Complete MotionRail Example with State Management in Qwik

Source: https://motionrail.jujiplay.com/frameworks-qwik.txt

A comprehensive example of MotionRail in Qwik, including dynamic state updates for visible items and total items using `useSignal`. It also demonstrates importing necessary styles for the component and its extensions.

```tsx
import { component$, useSignal, noSerialize } from "@builder.io/qwik";
import { MotionRail } from "motionrail/qwik";
import { Arrows } from "motionrail/extensions/arrows";
import "motionrail/style.css";
import "motionrail/extensions/arrows/style.css";

export default component$(() => {
  const currentState = useSignal(null);

  return (
    <div>
      <MotionRail
        options={noSerialize({
          autoplay: true,
          delay: 3000,
          breakpoints: [
            { columns: 1, gap: "16px" },
            { width: 768, columns: 2, gap: "16px" },
            { width: 1024, columns: 3, gap: "20px" },
          ],
          extensions: [Arrows()],
          onChange: (state) => {
            currentState.value = state;
          },
        })}
        class="my-carousel"
      >
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
        <div>Item 5</div>
      </MotionRail>

      {currentState.value && (
        <div class="state-info">
          <p>
            Visible items: {currentState.value.visibleItemIndexes.join(", ")}
          </p>
          <p>Total items: {currentState.value.totalItems}</p>
        </div>
      )}
    </div>
  );
});
```

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

### Example: Navigation with Button

Source: https://motionrail.jujiplay.com/docs/api

Shows how to trigger the `prev()` method when a button with the ID 'prev-btn' is clicked.

```javascript
document.getElementById("prev-btn").addEventListener("click", () => {
  carousel.prev();
});
```

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

### Install MotionRail with npm

Source: https://motionrail.jujiplay.com/docs/installation

Use this command to install MotionRail using npm.

```bash
npm install motionrail
```

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

### Install MotionRail with pnpm

Source: https://motionrail.jujiplay.com/docs/installation

Use this command to install MotionRail using pnpm.

```bash
pnpm add motionrail
```

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

### Basic Usage

Source: https://motionrail.jujiplay.com/frameworks-svelte.txt

A simple example demonstrating the basic integration of the MotionRail Svelte component with minimal configuration.

```APIDOC
## Basic Usage

This is a straightforward example of how to use the MotionRail component in your Svelte application.

```svelte
<script>
  import { MotionRail } from 'motionrail/svelte';
  import 'motionrail/style.css';

  const options = { breakpoints: [{ columns: 3, gap: '20px' }] };
</script>

<MotionRail {options}>
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</MotionRail>
```
```

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

### Logger Extension Usage Example

Source: https://motionrail.jujiplay.com/docs/extensions/logger

Example demonstrating how to import and use the Logger extension with custom hooks and configuration in a MotionRail instance.

```APIDOC
## Logger Extension Usage

### Description
This example shows how to integrate the Logger extension into a MotionRail carousel instance, including optional event hooks and console output control.

### Code Example
```javascript
import { MotionRail } from "motionrail";
import { Logger } from "motionrail/extensions/logger";
import "motionrail/style.css";

const carouselElement = document.getElementById("my-carousel");

const carousel = new MotionRail(carouselElement, {
  extensions: [
    Logger({
      // Optional hooks
      onInit: (carousel, state) => {
        console.log("Logger: Carousel initialized with state:", state);
        // custom logic on init
      },
      onUpdate: (carousel, state) => {
        console.log("Logger: Carousel updated with state:", state);
        // custom logic on update
      },
      onDestroy: (carousel, state) => {
        console.log("Logger: Carousel destroyed with state:", state);
        // custom logic on destroy
      },
      // Control console output (default: true)
      outputToConsole: true,
    }),
  ],
});
```
```

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

### Complete MotionRail Example with State Management

Source: https://motionrail.jujiplay.com/frameworks-preact.txt

This example demonstrates a full Preact component using `MotionRail`. It includes importing necessary hooks and components, configuring options with an `onChange` handler to update component state, and rendering carousel items and state information.

```jsx
import { useState } from "preact/hooks";
import { MotionRail } from "motionrail/preact";
import "motionrail/style.css";

function Carousel() {
  const [currentState, setCurrentState] = useState(null);

  const options = {
    autoplay: true,
    delay: 3000,
    breakpoints: [
      { columns: 1, gap: "16px" },
      { width: 768, columns: 2, gap: "16px" },
      { width: 1024, columns: 3, gap: "20px" },
    ],
    onChange: setCurrentState,
  };

  return (
    <div>
      <MotionRail options={options} className="my-carousel">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
        <div>Item 5</div>
      </MotionRail>

      {currentState && (
        <div className="state-info">
          <p>Visible items: {currentState.visibleItemIndexes.join(", ")}</p>
          <p>Total items: {currentState.totalItems}</p>
        </div>
      )}
    </div>
  );
}
```

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

### Basic MotionRail Setup in Qwik

Source: https://motionrail.jujiplay.com/llms-full.txt

Demonstrates the fundamental integration of the MotionRail component within a Qwik application. Ensure 'motionrail/qwik' and 'motionrail/style.css' are imported.

```tsx
import { component$ } from "@builder.io/qwik";
import { MotionRail } from "motionrail/qwik";
import "motionrail/style.css";

export default component$(() => {
  const options = { breakpoints: [{ columns: 3, gap: "20px" }] };

  return (
    <MotionRail options={options}>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </MotionRail>
  );
});
```

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

### onUpdate Lifecycle Hook Example

Source: https://motionrail.jujiplay.com/docs/extensions/custom

Example of the onUpdate hook, demonstrating how to log visible item indexes when the carousel state changes.

```javascript
onUpdate(motionRail, state) {
  console.log('Visible items:', state.visibleItemIndexes);
  // Update UI elements
  // Sync with other components
}
```

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

### Vue TypeScript Setup with MotionRail

Source: https://motionrail.jujiplay.com/frameworks-vue.txt

Use `<script setup lang="ts">` for full TypeScript support. Configure options like autoplay and breakpoints, and handle state changes via the `onChange` callback.

```vue
<script setup lang="ts">
import { ref } from "vue";
import { MotionRail } from "motionrail/vue";
import type { MotionRailOptions, MotionRailState } from "motionrail";

const carouselRef = ref<{ instance: any; container: HTMLDivElement } | null>(
  null,
);
const currentState = ref<MotionRailState | null>(null);

const options: MotionRailOptions = {
  autoplay: true,
  breakpoints: [{ columns: 3, gap: "20px" }],
  onChange: (state: MotionRailState) => {
    currentState.value = state;
  },
};

const handleNext = (): void => {
  carouselRef.value?.instance?.next();
};
</script>

<template>
  <MotionRail ref="carouselRef" :options="options">
    <div>Item 1</div>
    <div>Item 2</div>
  </MotionRail>
</template>
```

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

### Usage Patterns

Source: https://motionrail.jujiplay.com/docs/api/types/motionrail-breakpoint

Examples demonstrating how to use the MotionRailBreakpoint configuration for different responsive layouts.

```APIDOC
### Basic Responsive Layout

```typescript
const carousel = new MotionRail(element, {
  breakpoints: [
    { columns: 1, gap: "16px" }, // Mobile
    { width: 768, columns: 2, gap: "24px" }, // Tablet
    { width: 1024, columns: 3, gap: "32px" }, // Desktop
  ],
});
```

### Gap Only Changes

```typescript
const carousel = new MotionRail(element, {
  breakpoints: [
    { gap: "8px" }, // Small gap on mobile
    { width: 768, gap: "16px" }, // Medium gap on tablet
    { width: 1024, gap: "24px" }, // Large gap on desktop
  ],
});
```

### Columns Only Changes

```typescript
const carousel = new MotionRail(element, {
  breakpoints: [
    { columns: 1 }, // 1 column
    { width: 640, columns: 2 }, // 2 columns
    { width: 1024, columns: 4 }, // 4 columns
  ],
});
```
```

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

### Installing and Using Extensions

Source: https://motionrail.jujiplay.com/llms-full.txt

Demonstrates how to import and use built-in MotionRail extensions like Arrows and Dots by adding them to the `extensions` option during MotionRail initialization.

```APIDOC
## Installing and Using Extensions

Extensions are included with MotionRail but must be imported separately. Import extension styles as well.

```js
import { MotionRail } from "motionrail";
import { Arrows } from "motionrail/extensions/arrows";
import { Dots } from "motionrail/extensions/dots";

// Don't forget to import extension styles
import "motionrail/style.css";
import "motionrail/extensions/arrows/style.css";
import "motionrail/extensions/dots/style.css";

const carousel = new MotionRail(element, {
  breakpoints: [
    { columns: 1, gap: "16px" },
    { width: 768, columns: 2, gap: "16px" },
  ],
  extensions: [Arrows({ loop: true }), Dots({ showIndex: true })],
});
```
```

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

### FOUC-Free Styling Example

Source: https://motionrail.jujiplay.com/frameworks-svelte.txt

Demonstrates how to set up MotionRail with FOUC-free styling using container queries for responsive layouts.

```APIDOC
## FOUC-Free Styling Example

This example shows how to implement a FOUC-free carousel using container queries. It involves setting up breakpoints and injecting styles into the head for prevention.

```svelte
<script lang="ts">
  import { MotionRail } from 'motionrail/svelte';
  import { MotionRail as MotionRailClass } from 'motionrail';
  import 'motionrail/style.css';

  const { containerName, containerQueries } = MotionRailClass.getBreakPoints({
    breakpoints: [
      { columns: 1, gap: '16px' },
      { width: 768, columns: 2, gap: '16px' },
      { width: 1024, columns: 3, gap: '20px' },
    ],
    totalItems: 8,
  });
</script>

<svelte:head>
  {@html `<style data-motionrail-style="${containerName}">${containerQueries}</style>`}
</svelte:head>

<MotionRail
  options={{
    breakpoints: [
      { columns: 1, gap: '16px' },
      { width: 768, columns: 2, gap: '16px' },
      { width: 1024, columns: 3, gap: '20px' },
    ],
    containerName,
  }}>
  {#each [1,2,3,4,5,6,7,8] as i}
    <div>{/* ...carousel item content... */}</div>
  {/each}
</MotionRail>
```
```

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

### TypeScript Support Example

Source: https://motionrail.jujiplay.com/docs/api/types/motionrail-extension

Demonstrates how to use MotionRail extensions with full TypeScript support, including type checking and autocompletion.

```APIDOC
## TypeScript Support Example

### Description
This example shows how to leverage TypeScript with MotionRail extensions, ensuring type safety and providing autocompletion for `MotionRail` and `MotionRailState` objects.

### Usage
Import necessary types and use them when defining your extension.

```typescript
import { MotionRail } from "motionrail";
import type { MotionRailExtension, MotionRailState } from "motionrail";

const typedExtension: MotionRailExtension = {
  name: "typed-extension",
  onInit: (motionRail: MotionRail, state: MotionRailState) => {
    // Full type checking and autocomplete
    console.log(state.totalItems);
    motionRail.play();
  },
};
```
```

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

### Logger Output Example

Source: https://motionrail.jujiplay.com/docs/extensions/logger

Shows typical console output from the MotionRail Logger extension, including initialization and update events with state information.

```text
[MotionRail Logger] onInit
[MotionRail Logger] onUpdate {
  index: 0,
  itemsCount: 5,
  columns: 1,
  gap: '16px',
  isPlaying: true
}
[MotionRail Logger] onUpdate {
  index: 1,
  itemsCount: 5,
  columns: 1,
  gap: '16px',
  isPlaying: true
}
```

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

### MCP Server Search Docs Request

Source: https://motionrail.jujiplay.com/llms-full.txt

Example JSON-RPC 2.0 request to the MCP server for searching documentation content.

```json
{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "search_docs",
  "params": { "query": "autoplay" }
}

```

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

### Basic MotionRail Usage in Solid.js

Source: https://motionrail.jujiplay.com/frameworks-solid.txt

Demonstrates the fundamental setup for using the MotionRail component in a Solid.js application. Ensure 'motionrail/style.css' is imported.

```jsx
import { MotionRail } from "motionrail/solid";
import "motionrail/style.css";

// Define options outside to prevent re-renders
const options = { breakpoints: [{ columns: 3, gap: "20px" }] };

function App() {
  return (
    <MotionRail options={options}>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </MotionRail>
  );
}
```

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

### MotionRail Properties

Source: https://motionrail.jujiplay.com/llms-full.txt

Access properties of the MotionRail instance to get information about the carousel's elements.

```APIDOC
## Properties

### `element`

#### Description
The root HTML element that wraps the carousel.

#### Type
`HTMLElement`

#### Readonly
Yes (enforced in TypeScript only)

#### Example
```ts
const carousel = new MotionRail(document.getElementById("carousel"));
console.log(carousel.element); // <div id="carousel">...</div>
```

### `scrollable`

#### Description
The scrollable container element (the element with `data-motionrail-scrollable` attribute).

#### Type
`HTMLElement`

#### Readonly
Yes (enforced in TypeScript only)

#### Example
```ts
const carousel = new MotionRail(document.getElementById("carousel"));
console.log(carousel.scrollable); // <div data-motionrail-scrollable>...</div>

// You can read scroll position
console.log(carousel.scrollable.scrollLeft);
```
```

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

### Breakpoint Configuration with Columns Only

Source: https://motionrail.jujiplay.com/api-types-motionrail-breakpoint.txt

Example showing how to configure only the number of columns for different breakpoints. The width property defines the threshold.

```typescript
const breakpoints = [
  { columns: 1 }, // 1 column
  { width: 768, columns: 2 }, // 2 columns at >= 768px
  { width: 1024, columns: 3 }, // 3 columns at >= 1024px
];
```

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

### HTML Structure for Carousel Items

Source: https://motionrail.jujiplay.com/extensions-vistaview.txt

Example HTML demonstrating different ways to structure carousel items for the VistaView extension to find image sources.

```html
<div data-motionrail>
  <div data-motionrail-scrollable>
    <div data-motionrail-grid>
      <!-- a > img (recommended for separate full-size and thumb) -->
      <div>
        <a href="photo-full.jpg">
          <img src="photo-thumb.jpg" alt="Photo 1" />
        </a>
      </div>
      <!-- img only -->
      <div>
        <img src="photo.jpg" alt="Photo 2" />
      </div>
      <!-- any nesting depth works -->
      <div>
        <div>
          <a href="photo-full3.jpg">
            <picture>
              <img src="photo-thumb3.jpg" alt="Photo 3" />
            </picture>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
```

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

### TypeScript MotionRail Extension Example

Source: https://motionrail.jujiplay.com/api-types-motionrail-extension.txt

Demonstrates creating a MotionRail extension with full TypeScript support, enabling type checking and autocompletion for MotionRail and its state.

```typescript
import { MotionRail } from "motionrail";
import type { MotionRailExtension, MotionRailState } from "motionrail";

const typedExtension: MotionRailExtension = {
  name: "typed-extension",
  onInit: (motionRail: MotionRail, state: MotionRailState) => {
    // Full type checking and autocomplete
    console.log(state.totalItems);
    motionRail.play();
  },
};
```

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

### Complete React Carousel Example with MotionRail

Source: https://motionrail.jujiplay.com/frameworks-react.txt

This snippet shows a full implementation of a carousel using MotionRail in React. It includes setup for navigation controls, autoplay, responsive breakpoints, and displaying current carousel state. Ensure 'motionrail/react' and 'motionrail/style.css' are imported.

```jsx
import { useRef, useState } from "react";
import { MotionRail } from "motionrail/react";
import "motionrail/style.css";

function Carousel() {
  const carouselRef = useRef(null);
  const containerRef = useRef(null);
  const [currentState, setCurrentState] = useState(null);

  const handleNext = () => {
    carouselRef.current?.next();
  };

  const handlePrev = () => {
    carouselRef.current?.prev();
  };

  const handlePlay = () => {
    carouselRef.current?.play();
  };

  const handlePause = () => {
    carouselRef.current?.pause();
  };

  // Define options inside only when using setState (setCurrentState)
  const options = {
    autoplay: true,
    delay: 3000,
    breakpoints: [
      { columns: 1, gap: "16px" },
      { width: 768, columns: 2, gap: "16px" },
      { width: 1024, columns: 3, gap: "20px" },
    ],
    onChange: setCurrentState,
  };

  return (
    <div>
      <MotionRail
        ref={carouselRef}
        divRef={containerRef}
        options={options}
        className="my-carousel"
      >
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
        <div>Item 5</div>
      </MotionRail>

      <div className="controls">
        <button onClick={handlePrev}>Previous</button>
        <button onClick={handleNext}>Next</button>
        <button onClick={handlePlay}>Play</button>
        <button onClick={handlePause}>Pause</button>
      </div>

      {currentState && (
        <div className="state-info">
          <p>Visible items: {currentState.visibleItemIndexes.join(", ")}</p>
          <p>Total items: {currentState.totalItems}</p>
        </div>
      )}
    </div>
  );
}

```

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

### Complete MotionRail Example

Source: https://motionrail.jujiplay.com/api.txt

Demonstrates initializing MotionRail with autoplay and breakpoints, handling navigation and playback controls, updating UI based on state, and performing cleanup.

```javascript
import { MotionRail } from "motionrail";
import "motionrail/style.css";

const carousel = new MotionRail(document.getElementById("carousel"), {
  autoplay: true,
  breakpoints: [
    { columns: 1, gap: "16px" },
    { width: 768, columns: 2, gap: "16px" },
  ],
  onChange: (state) => {
    // Update UI based on state
    updatePaginationDots(state);
    toggleNavigationButtons(state);
  },
});

// Playback controls
document.getElementById("play").addEventListener("click", () => {
  carousel.play();
});

document.getElementById("pause").addEventListener("click", () => {
  carousel.pause();
});

// Navigation
document.getElementById("prev").addEventListener("click", () => {
  carousel.prev();
});

document.getElementById("next").addEventListener("click", () => {
  carousel.next();
});

// Jump to specific item
document.querySelectorAll(".jump-button").forEach((btn, index) => {
  btn.addEventListener("click", () => {
    carousel.scrollToIndex(index);
  });
});

// Get current state
document.getElementById("get-state").addEventListener("click", () => {
  const state = carousel.getState();
  console.log("Current state:", state);
});

// Dynamic content
document.getElementById("add-item").addEventListener("click", () => {
  const grid = document.querySelector("[data-motionrail-grid]");
  const newItem = document.createElement("div");
  newItem.textContent = "New Item";
  grid.appendChild(newItem);
  carousel.update();
});

// Cleanup on page unload
window.addEventListener("beforeunload", () => {
  carousel.destroy();
});
```

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

### TypeScript Support for MotionRail

Source: https://motionrail.jujiplay.com/llms-full.txt

This example shows how to use MotionRail with TypeScript, including type definitions for options and state. It utilizes refs for direct access to the component instance.

```tsx
import { useRef } from "react";
import { MotionRail } from "motionrail/react";
import type { MotionRailOptions, MotionRailState } from "motionrail";

function TypedCarousel() {
  const carouselRef = 
    useRef<InstanceType<typeof import("motionrail").MotionRail>>(null);

  const options: MotionRailOptions = {
    autoplay: true,
    breakpoints: [{ columns: 3, gap: "20px" }],
    onChange: (state: MotionRailState) => {
      console.log(state);
    },
  };

  return (
    <MotionRail ref={carouselRef} options={options}>
      <div>Item 1</div>
      <div>Item 2</div>
    </MotionRail>
  );
}

```

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

### Using Built-in Extensions

Source: https://motionrail.jujiplay.com/docs/api/types/motionrail-extension

Shows how to import and use pre-built extensions like Arrows, Dots, Thumbnails, and Logger.

```APIDOC
## Built-in Extensions

### Description
Importing and utilizing MotionRail's provided extensions.

### Example
```ts
import { Arrows } from "motionrail/extensions/arrows";
import { Dots } from "motionrail/extensions/dots";
import { Thumbnails } from "motionrail/extensions/thumbnails";
import { Logger } from "motionrail/extensions/logger";

const carousel = new MotionRail(element, {
  extensions: [Arrows(), Dots({ dotSize: 48 }), Thumbnails(), Logger()],
});
```

See [Extensions Overview](/docs/extensions/) for built-in extensions.
```

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

### Example Customization of Dots Extension CSS

Source: https://motionrail.jujiplay.com/extensions-dots.txt

Provides an example of applying custom CSS variables to achieve larger dots with distinct color schemes for the Dots extension.

```css
/* Larger dots with different colors */
.motionrail-dots {
  --dot-size: 40px;
  --dot-font-size: 14px;
  --dot-bg: rgba(59, 130, 246, 0.3);
  --dot-bg-hover: rgba(59, 130, 246, 0.5);
  --dot-bg-active: #3b82f6;
  --dot-bg-active-hover: #2563eb;
  --dot-color: #60a5fa;
  --dot-color-active: #fff;
}
```

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

### Using Multiple Extensions

Source: https://motionrail.jujiplay.com/docs/extensions

Demonstrates how to initialize MotionRail with multiple extensions simultaneously.

```APIDOC
## Multiple Extensions

### Example
```javascript
import { Arrows } from "motionrail/extensions/arrows";
import { Dots } from "motionrail/extensions/dots";
import { Thumbnails } from "motionrail/extensions/thumbnails";

const carousel = new MotionRail(element, {
  extensions: [
    Arrows({ loop: false }),
    Dots({ showIndex: true }),
    Thumbnails({ thumbnailWidth: 80 }),
  ],
});
```
```

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

### React Example with RTL Enabled

Source: https://motionrail.jujiplay.com/rtl.txt

Implement MotionRail with RTL support in a React application. This example includes the Arrows extension and requires the `dir="rtl"` attribute on a container element.

```tsx
import { MotionRail } from "motionrail/react";
import { Arrows } from "motionrail/extensions/arrows";
import "motionrail/style.css";
import "motionrail/extensions/arrows/style.css";

const options = {
  rtl: true,
  extensions: [Arrows()],
};

function RTLCarousel() {
  return (
    <div dir="rtl">
      <MotionRail options={options}>
        <div className="slide">Slide 1</div>
        <div className="slide">Slide 2</div>
        <div className="slide">Slide 3</div>
      </MotionRail>
    </div>
  );
}
```

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

### Correct Width Ordering Example

Source: https://motionrail.jujiplay.com/breakpoints.txt

Demonstrates the correct way to define breakpoints, ensuring they are ordered from smallest to largest width. The first breakpoint should not specify a 'width'.

```javascript
breakpoints: [
  { columns: 1, gap: "16px" }, // Default (no width)
  { width: 768, columns: 2, gap: "16px" },
  { width: 1024, columns: 3, gap: "20px" },
];
```

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

### Vue.js Example with RTL Enabled

Source: https://motionrail.jujiplay.com/rtl.txt

A complete Vue.js example demonstrating MotionRail with RTL support. Ensure the `dir="rtl"` attribute is applied to a parent element for correct text direction.

```vue
<script setup lang="ts">
// ... other imports
import { MotionRail } from "motionrail/vue";

const options = {
  rtl: true,
  // ... other options
};
</script>

<template>
  <!-- dont't forget the dir="rtl" attribute -->
  <div dir="rtl">
    <MotionRail :options="options">
      <div class="demo-slide centered slide-1">1</div>
      <div class="demo-slide centered slide-2">2</div>
      <div class="demo-slide centered slide-3">3</div>
    </MotionRail>
  </div>
</template>

<style scoped>
/* truncated */
</style>
```

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

### Complete MotionRail Initialization and Usage Example

Source: https://motionrail.jujiplay.com/api-class-motionrail.txt

This snippet demonstrates how to initialize MotionRail with various options, including autoplay and breakpoints. It also shows how to implement playback controls, navigation, jump-to-item functionality, state retrieval, dynamic content addition, and proper cleanup.

```typescript
import { MotionRail } from "motionrail";
import "motionrail/style.css";

const carousel = new MotionRail(document.getElementById("carousel"), {
  autoplay: true,
  breakpoints: [
    { columns: 1, gap: "16px" },
    { width: 768, columns: 2, gap: "16px" },
  ],
  onChange: (state) => {
    console.log("Visible items:", state.visibleItemIndexes);
  },
});

// Playback controls
document.getElementById("play").addEventListener("click", () => {
  carousel.play();
});

document.getElementById("pause").addEventListener("click", () => {
  carousel.pause();
});

// Navigation
document.getElementById("prev").addEventListener("click", () => {
  carousel.prev();
});

document.getElementById("next").addEventListener("click", () => {
  carousel.next();
});

// Jump to specific item
document.querySelectorAll(".jump-button").forEach((btn, index) => {
  btn.addEventListener("click", () => {
    carousel.scrollToIndex(index);
  });
});

// Get current state
const state = carousel.getState();
console.log("Current state:", state);

// Dynamic content
document.getElementById("add-item").addEventListener("click", () => {
  const grid = document.querySelector("[data-motionrail-grid]");
  const newItem = document.createElement("div");
  newItem.textContent = "New Item";
  grid.appendChild(newItem);
  carousel.update();
});

// Cleanup on page unload
window.addEventListener("beforeunload", () => {
  carousel.destroy();
});
```

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

### Initialize MotionRail with Logger Extension

Source: https://motionrail.jujiplay.com/docs/extensions/logger

Demonstrates how to import and use the Logger extension when initializing MotionRail. Includes optional hooks for onInit, onUpdate, and onDestroy, and controls console output.

```javascript
import { MotionRail } from "motionrail";
import { Logger } from "motionrail/extensions/logger";
import "motionrail/style.css";

const carousel = new MotionRail(element, {
  extensions: [
    Logger({
      // Optional hooks
      onInit: (carousel, state) => {
        // custom logic on init
      },
      onUpdate: (carousel, state) => {
        // custom logic on update
      },
      onDestroy: (carousel, state) => {
        // custom logic on destroy
      },
      // Control console output (default: true)
      outputToConsole: true,
    }),
  ],
});
```

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

### play()

Source: https://motionrail.jujiplay.com/api.txt

Starts the automatic playback of the carousel items.

```APIDOC
## play()

### Description
Starts the automatic playback of the carousel items.

### Method
`play()`

### Example
```javascript
carousel.play();
```
```