motionrail 0.0.3 → 0.1.0

package/README.md

@@ -14,6 +14,7 @@ A lightweight, smooth carousel library with momentum-based scrolling, snap align
 - 🎨 **CSS Grid based** - Modern layout with customizable styling
 - 🪶 **Lightweight** - Zero dependencies, minimal bundle size
 - 🎮 **Full control API** - Programmatic navigation and playback control
+- 🧩 **Extension system** - Modular architecture with built-in extensions (Arrows, Logger)
 
 ## Installation
 
@@ -21,21 +22,44 @@ A lightweight, smooth carousel library with momentum-based scrolling, snap align
 npm install motionrail
 ```
 
+## Quick Start
+
+```js
+import { MotionRail } from 'motionrail';
+import 'motionrail/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' }
+  ]
+});
+```
+
 ## Usage
 
 ### HTML Structure
 
 ```html
-<div class="motion-rail" id="carousel">
-  <div class="motion-rail-container">
-    <div class="motion-rail-item">Item 1</div>
-    <div class="motion-rail-item">Item 2</div>
-    <div class="motion-rail-item">Item 3</div>
-    <!-- Add more items -->
+<div data-motion-rail id="carousel">
+  <div data-motion-rail-scrollable>
+    <div data-motion-rail-grid>
+      <div>Item 1</div>
+      <div>Item 2</div>
+      <div>Item 3</div>
+      <!-- Add more items -->
+    </div>
   </div>
 </div>
 ```
 
+**Structure layers:**
+- `[data-motion-rail]` - Wrapper element (receives the ID)
+- `[data-motion-rail-scrollable]` - Scrollable container with overflow and snap behavior
+- `[data-motion-rail-grid]` - Grid layout container
+- Direct children - Carousel items (no specific class or attribute required)
+
 ### CSS Import
 
 ```js
@@ -46,6 +70,8 @@ import 'motionrail/style.css';
 
 ```js
 import { MotionRail } from 'motionrail';
+// Import types if using TypeScript
+import type { MotionRailOptions, MotionRailState, MotionRailBreakpoint } from 'motionrail';
 
 const element = document.getElementById('carousel');
 
@@ -70,7 +96,9 @@ const carousel = new MotionRail(element, {
 | `rtl` | `boolean` | `false` | Enable right-to-left layout |
 | `delay` | `number` | `3000` | Delay between auto-scrolls (milliseconds) |
 | `resumeDelay` | `number` | `4000` | Time to resume autoplay after user interaction (milliseconds) |
-| `breakpoints` | `MotionRailBreakpoint[]` | `[]` | Array of responsive breakpoint configurations |
+| `breakpoints` | `MotionRailBreakpoint[]` | `[{ columns: 1, gap: "0px" }]` | Array of responsive breakpoint configurations (optional) |
+| `onChange` | `(state: MotionRailState) => void` | `undefined` | Callback fired when carousel state changes (optional) |
+| `extensions` | `MotionRailExtension[]` | `[]` | Array of extension instances (optional) |
 
 ### Breakpoint Configuration
 
@@ -93,6 +121,36 @@ breakpoints: [
 ]
 ```
 
+**Note:** Breakpoints are optional. If omitted, a default single-column layout with no gap is used.
+
+### State Management
+
+The `onChange` callback receives a `MotionRailState` object whenever the carousel state changes:
+
+```typescript
+interface MotionRailState {
+  totalItems: number;              // Total number of items in carousel
+  visibleItemIndexes: number[];    // Array of currently visible item indexes
+  isFirstItemVisible: boolean;     // Whether the first item is visible
+  isLastItemVisible: boolean;      // Whether the last item is visible
+}
+```
+
+**Example:**
+```js
+const carousel = new MotionRail(element, {
+  breakpoints: [
+    { columns: 1, gap: '16px' },
+    { width: 768, columns: 2, gap: '16px' }
+  ],
+  onChange: (state) => {
+    console.log('Visible items:', state.visibleItemIndexes);
+    console.log('At start:', state.isFirstItemVisible);
+    console.log('At end:', state.isLastItemVisible);
+  }
+});
+```
+
 ## API Methods
 
 ### `play()`
@@ -130,11 +188,200 @@ Scroll to a specific item by index. Pauses autoplay.
 carousel.scrollToIndex(2); // Scroll to the third item
 ```
 
+### `getState()`
+Get the current carousel state.
+
+```js
+const state = carousel.getState();
+console.log(state.visibleItemIndexes); // [0, 1, 2]
+```
+
+### `getOptions()`
+Get the current carousel configuration options. Returns a copy to prevent external modifications.
+
+```js
+const options = carousel.getOptions();
+console.log(options.autoplay); // false
+console.log(options.breakpoints); // [{ columns: 1, gap: '16px' }, ...]
+```
+
+### `update()`
+Refresh the carousel after dynamically adding or removing items from the DOM. This method:
+- Recounts total items
+- Recaches snap points
+- Re-observes edge items with IntersectionObserver
+- Reapplies breakpoints
+- Triggers onChange callback with updated state
+
+```js
+// Add items to the DOM
+const grid = document.querySelector('[data-motion-rail-grid]');
+const newItem = document.createElement('div');
+newItem.textContent = 'New Item';
+grid.appendChild(newItem);
+
+// Update carousel to recognize new items
+carousel.update();
+```
+
 ### `destroy()`
 Clean up event listeners and timers.
 
 ```js
-carousel.destroy();
+car
+
+## Extensions
+
+MotionRail supports a modular extension system that allows you to add functionality without bloating the core library.
+
+### Built-in Extensions
+
+#### Arrow Navigation
+
+Add previous/next navigation arrows to your carousel.
+
+```js
+import { MotionRail } from 'motionrail';
+import { Arrows } from 'motionrail/extensions/arrows';
+import 'motionrail/style.css';
+import 'motionrail/extensions/arrows/style.css';
+
+const carousel = new MotionRail(element, {
+  breakpoints: [
+    { columns: 1, gap: '16px' },
+    { width: 768, columns: 2, gap: '16px' }
+  ],
+  extensions: [
+    Arrows({
+      loop: true,              // Enable/disable arrows at edges (default: true)
+      leftIcon: '<svg>...</svg>',   // Custom left arrow HTML (optional)
+      rightIcon: '<svg>...</svg>',  // Custom right arrow HTML (optional)
+      log: false               // Enable console logging (default: false)
+    })
+  ]
+});
+```
+
+**Arrow Options:**
+- `loop` (boolean, default: `true`) - When `false`, arrows are disabled at carousel edges
+- `leftIcon` (string, optional) - HTML string for left arrow icon
+- `rightIcon` (string, optional) - HTML string for right arrow icon
+- `log` (boolean, default: `false`) - Enable debug logging
+
+**Features:**
+- Automatically hides when all items are visible
+- RTL-aware (swaps navigation direction)
+- Customizable icons (SVG or text)
+- Disabled state styling when `loop: false`
+
+#### Logger Extension
+
+Debug extension that logs lifecycle events to console.
+
+```js
+import { MotionRail } from 'motionrail';
+import { Logger } from 'motionrail/extensions/logger';
+
+const carousel = new MotionRail(element, {
+  extensions: [Logger()]
+});
+```
+
+Logs:
+- Initialization with initial state
+- State updates on scroll/resize
+- Destruction cleanup
+
+### Creating Custom Extensions
+
+Extensions follow a simple lifecycle API:
+
+```typescript
+interface MotionRailExtension {
+  name: string;
+  onInit?: (motionRail: MotionRail, state: MotionRailState) => void;
+  onUpdate?: (motionRail: MotionRail, state: MotionRailState) => void;
+  onDestroy?: (motionRail: MotionRail, state: MotionRailState) => void;
+}
+```
+
+**Example - Custom Page Indicator:**
+
+```js
+function PageIndicator() {
+  let indicators;
+  
+  return {
+    name: "PageIndicator",
+    
+    onInit(motionRail, state) {
+      // Create indicator dots
+      indicators = document.createElement('div');
+      indicators.className = 'carousel-indicators';
+      
+      for (let i = 0; i < state.totalItems; i++) {
+        const dot = document.createElement('button');
+        dot.addEventListener('click', () => motionRail.scrollToIndex(i));
+        indicators.appendChild(dot);
+      }
+      
+      motionRail.element.appendChild(indicators);
+    },
+    
+    onUpdate(motionRail, state) {
+      // Update active indicator
+      const dots = indicators.querySelectorAll('button');
+      dots.forEach((dot, i) => {
+        dot.classList.toggle('active', state.visibleItemIndexes.includes(i));
+      });
+    },
+    
+    onDestroy() {
+      // Clean up
+      indicators.remove();
+    }
+  };
+}
+
+// Use it
+const carousel = new MotionRail(element, {
+  extensions: [PageIndicator()]
+});
+```
+
+**Lifecycle Hooks:**
+- `onInit(motionRail, state)` - Called once when carousel initializes
+- `onUpdate(motionRail, state)` - Called whenever carousel state changes
+- `onDestroy(motionRail, state)` - Called when carousel is destroyed
+
+**Extension State Access:**
+Both hooks receive:
+- `motionRail` - Full API access (methods, element, getOptions())
+- `state` - Current carousel state (totalItems, visibleItemIndexes, etc.)
+
+## UMD/CommonJS Usage
+
+For non-module environments or CommonJS:
+
+```html
+<script src="node_modules/motionrail/dist/motionrail.umd.cjs"></script>
+<script src="node_modules/motionrail/dist/extensions/arrows.umd.cjs"></script>
+<link rel="stylesheet" href="node_modules/motionrail/dist/style.css">
+<link rel="stylesheet" href="node_modules/motionrail/dist/extensions/arrows/style.css">
+
+<script>
+  const carousel = new MotionRail.MotionRail(element, {
+    extensions: [MotionRailArrows.Arrows()]
+  });
+</script>
+```
+
+Or with CommonJS:
+
+```js
+const { MotionRail } = require('motionrail');
+const { Arrows } = require('motionrail/extensions/arrows');
+```ousel.destroy();
 ```
 
 ## Examples
@@ -205,11 +452,13 @@ const carousel = new MotionRail(
 ### With Navigation Controls
 
 ```html
-<div class="motion-rail" id="carousel">
-  <div class="motion-rail-container">
-    <div class="motion-rail-item">Item 1</div>
-    <div class="motion-rail-item">Item 2</div>
-    <div class="motion-rail-item">Item 3</div>
+<div data-motion-rail id="carousel">
+  <div data-motion-rail-scrollable>
+    <div data-motion-rail-grid>
+      <div>Item 1</div>
+      <div>Item 2</div>
+      <div>Item 3</div>
+    </div>
   </div>
 </div>
 
@@ -240,23 +489,76 @@ document.getElementById('play').addEventListener('click', () => carousel.play())
 document.getElementById('pause').addEventListener('click', () => carousel.pause());
 ```
 
+### Dynamic Content
+
+```html
+<div data-motion-rail id="carousel">
+  <div data-motion-rail-scrollable>
+    <div data-motion-rail-grid id="carousel-grid">
+      <div>Item 1</div>
+      <div>Item 2</div>
+      <div>Item 3</div>
+    </div>
+  </div>
+</div>
+
+<button id="add-item">Add Item</button>
+<button id="remove-item">Remove Item</button>
+```
+
+```js
+const carousel = new MotionRail(
+  document.getElementById('carousel'),
+  {
+    breakpoints: [
+      { columns: 1, gap: '16px' },
+      { width: 768, columns: 2, gap: '16px' }
+    ]
+  }
+);
+
+let itemCounter = 4;
+document.getElementById('add-item').addEventListener('click', () => {
+  const grid = document.getElementById('carousel-grid');
+  const newItem = document.createElement('div');
+  newItem.textContent = `Item ${itemCounter++}`;
+  grid.appendChild(newItem);
+  carousel.update(); // Refresh carousel after adding items
+});
+
+document.getElementById('remove-item').addEventListener('click', () => {
+  const grid = document.getElementById('carousel-grid');
+  if (grid.children.length > 0) {
+    grid.removeChild(grid.lastChild);
+    carousel.update(); // Refresh carousel after removing items
+  }
+});
+```
+
 ## Styling
 
 The library includes base styles via `motionrail/style.css`. You can customize the appearance of items with your own CSS:
 
 ```css
-.motion-rail {
+[data-motion-rail] {
   height: 400px; /* Set carousel height */
 }
 
-.motion-rail-item {
+[data-motion-rail-grid] > * {
   /* Style your carousel items */
   background: #f0f0f0;
   border-radius: 8px;
   padding: 20px;
+  scroll-snap-align: start; /* Enable snap behavior */
 }
 ```
 
+**Key selectors:**
+- `[data-motion-rail]` - Wrapper element
+- `[data-motion-rail-scrollable]` - Scrollable container (has overflow and snap type)
+- `[data-motion-rail-grid]` - Grid layout container
+- `[data-motion-rail-grid] > *` - Direct children (carousel items)
+
 ## Browser Support
 
 - Chrome/Edge (latest)
@@ -269,6 +571,8 @@ Requires support for:
 - Pointer Events API
 - Container Queries
 - Scroll Snap
+- IntersectionObserver API
+- ResizeObserver API
 
 ## License
 

package/dist/extensions/arrows/main.d.ts

@@ -0,0 +1,7 @@
+import type { MotionRailExtension } from "../../motionrail";
+export declare function Arrows(par?: {
+    leftIcon?: string;
+    rightIcon?: string;
+    loop?: boolean;
+    log?: boolean;
+}): MotionRailExtension;

package/dist/extensions/arrows/style.css

@@ -0,0 +1 @@
+.motionrail-arrow[disabled]{opacity:.3;pointer-events:none}.motionrail-arrow-left,.motionrail-arrow-right{color:#fff;cursor:pointer;z-index:10;position-anchor:--motionrail-scrollable;width:40px;height:40px;top:anchor(center);background:#00000080;border:none;border-radius:50%;justify-content:center;align-items:center;font-size:20px;transition:all .2s;display:flex;position:absolute;translate:0 -50%}.motionrail-arrow-left{left:anchor(left);margin-left:10px}.motionrail-arrow-right{right:anchor(right);margin-right:10px}.motionrail-arrow-left:hover,.motionrail-arrow-right:hover{background:#000c;scale:1.1}.motionrail-arrow-left:active,.motionrail-arrow-right:active{scale:.95}

package/dist/extensions/arrows.js

@@ -0,0 +1,25 @@
+import "../motionrail-Dq8joDtA.js";
+function Arrows(e) {
+	let t = document.createElement("button"), n = document.createElement("button"), { leftIcon: r = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-chevron-left-icon lucide-chevron-left\"><path d=\"m15 18-6-6 6-6\"/></svg>", rightIcon: i = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-chevron-right-icon lucide-chevron-right\"><path d=\"m9 18 6-6-6-6\"/></svg>", loop: a = !0, log: o = !1 } = e || {};
+	return {
+		name: "ArrowExtension",
+		onInit(e, a) {
+			let { totalItems: o } = a;
+			if (o === 0) return;
+			let { rtl: s } = e.getOptions();
+			t.innerHTML = r, t.className = "motionrail-arrow motionrail-arrow-left", t.addEventListener("click", () => {
+				s ? e.next() : e.prev();
+			}), n.innerHTML = i, n.className = "motionrail-arrow motionrail-arrow-right", n.addEventListener("click", () => {
+				s ? e.prev() : e.next();
+			}), e.element.appendChild(t), e.element.appendChild(n);
+		},
+		onUpdate(e, r) {
+			let { isFirstItemVisible: i, isLastItemVisible: s, totalItems: c, visibleItemIndexes: l } = r;
+			a || (t.disabled = i, n.disabled = s), l.length < c ? (t.style.removeProperty("display"), n.style.removeProperty("display")) : (t.style.display = "none", n.style.display = "none"), c || (t.style.display = "none", n.style.display = "none"), o && console.log("ArrowExtension updated", r);
+		},
+		onDestroy(e, r) {
+			t.remove(), n.remove();
+		}
+	};
+}
+export { Arrows };

package/dist/extensions/arrows.umd.cjs

@@ -0,0 +1,2 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRailArrows={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`[data-motion-rail-scrollable]::-webkit-scrollbar{display:none}[data-motion-rail]{position:relative}[data-motion-rail] [data-motion-rail-scrollable]{anchor-name:--motionrail-scrollable;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;position:relative;overflow:scroll hidden;container-type:inline-size}[data-motion-rail] [data-motion-rail-scrollable]:active{cursor:grabbing}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]{grid-auto-flow:column;height:100%;display:grid}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]>*{pointer-events:none;scroll-snap-align:start}
+/*$vite$:1*/`,document.head.appendChild(t);function n(e){let t=document.createElement(`button`),n=document.createElement(`button`),{leftIcon:r=`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left-icon lucide-chevron-left"><path d="m15 18-6-6 6-6"/></svg>`,rightIcon:i=`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right-icon lucide-chevron-right"><path d="m9 18 6-6-6-6"/></svg>`,loop:a=!0,log:o=!1}=e||{};return{name:`ArrowExtension`,onInit(e,a){let{totalItems:o}=a;if(o===0)return;let{rtl:s}=e.getOptions();t.innerHTML=r,t.className=`motionrail-arrow motionrail-arrow-left`,t.addEventListener(`click`,()=>{s?e.next():e.prev()}),n.innerHTML=i,n.className=`motionrail-arrow motionrail-arrow-right`,n.addEventListener(`click`,()=>{s?e.prev():e.next()}),e.element.appendChild(t),e.element.appendChild(n)},onUpdate(e,r){let{isFirstItemVisible:i,isLastItemVisible:s,totalItems:c,visibleItemIndexes:l}=r;a||(t.disabled=i,n.disabled=s),l.length<c?(t.style.removeProperty(`display`),n.style.removeProperty(`display`)):(t.style.display=`none`,n.style.display=`none`),c||(t.style.display=`none`,n.style.display=`none`),o&&console.log(`ArrowExtension updated`,r)},onDestroy(e,r){t.remove(),n.remove()}}}e.Arrows=n});

package/dist/extensions/dots/main.d.ts

@@ -0,0 +1,6 @@
+import type { MotionRailExtension } from "../../motionrail";
+export declare function Dots(par?: {
+    showIndex?: boolean;
+    dotSize?: number;
+    log?: boolean;
+}): MotionRailExtension;

package/dist/extensions/dots/style.css

@@ -0,0 +1 @@
+.motionrail-dots{z-index:10;scrollbar-width:none;-ms-overflow-style:none;background:#0000004d;border-radius:24px;gap:8px;width:fit-content;max-width:calc(100% - 32px);margin:16px auto 0;padding:8px 12px;display:flex;position:relative;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 12px calc(100% - 12px),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 12px calc(100% - 12px),#0000 100%)}.motionrail-dots::-webkit-scrollbar{display:none}.motionrail-dot{--dot-size:44px;min-width:var(--dot-size);min-height:var(--dot-size);width:var(--dot-size);height:var(--dot-size);color:#fff;cursor:pointer;background:#ffffff4d;border:2px solid #ffffff80;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:14px;font-weight:600;transition:all .3s;display:flex}.motionrail-dot:hover{background:#ffffff80;border-color:#fffc;scale:1.1}.motionrail-dot:active{scale:.95}.motionrail-dot-active{color:#000;background:#ffffffe6;border-color:#fff}.motionrail-dot-active:hover{background:#fff}

package/dist/extensions/dots.js

@@ -0,0 +1,44 @@
+import "../motionrail-Dq8joDtA.js";
+function Dots(e) {
+	let t = document.createElement("div"), n = [], { showIndex: r = !1, dotSize: i = 44, log: a = !1 } = e || {};
+	return {
+		name: "DotsExtension",
+		onInit(e, a) {
+			let { totalItems: o } = a;
+			if (o !== 0) {
+				t.className = "motionrail-dots", t.style.setProperty("--dot-size", `${i}px`);
+				for (let i = 0; i < o; i++) {
+					let a = document.createElement("button");
+					a.className = "motionrail-dot", a.setAttribute("aria-label", `Go to item ${i + 1}`), r && (a.textContent = (i + 1).toString()), a.addEventListener("click", () => {
+						e.scrollToIndex(i);
+					}), n.push(a), t.appendChild(a);
+				}
+				e.element.appendChild(t);
+			}
+		},
+		onUpdate(e, r) {
+			let { visibleItemIndexes: i, totalItems: o } = r;
+			if (!o) {
+				t.style.display = "none";
+				return;
+			}
+			if (t.style.removeProperty("display"), n.forEach((e, t) => {
+				i.includes(t) ? e.classList.add("motionrail-dot-active") : e.classList.remove("motionrail-dot-active");
+			}), i.length > 0) {
+				let e = n[i[0]];
+				if (e) {
+					let n = t.offsetWidth, r = e.offsetLeft, i = e.offsetWidth, a = r - n / 2 + i / 2;
+					t.scrollTo({
+						left: a,
+						behavior: "smooth"
+					});
+				}
+			}
+			a && console.log("DotsExtension updated", r);
+		},
+		onDestroy(e, r) {
+			t.remove(), n.length = 0;
+		}
+	};
+}
+export { Dots };

package/dist/extensions/dots.umd.cjs

@@ -0,0 +1,2 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRailDots={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`[data-motion-rail-scrollable]::-webkit-scrollbar{display:none}[data-motion-rail]{position:relative}[data-motion-rail] [data-motion-rail-scrollable]{anchor-name:--motionrail-scrollable;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;position:relative;overflow:scroll hidden;container-type:inline-size}[data-motion-rail] [data-motion-rail-scrollable]:active{cursor:grabbing}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]{grid-auto-flow:column;height:100%;display:grid}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]>*{pointer-events:none;scroll-snap-align:start}
+/*$vite$:1*/`,document.head.appendChild(t);function n(e){let t=document.createElement(`div`),n=[],{showIndex:r=!1,dotSize:i=44,log:a=!1}=e||{};return{name:`DotsExtension`,onInit(e,a){let{totalItems:o}=a;if(o!==0){t.className=`motionrail-dots`,t.style.setProperty(`--dot-size`,`${i}px`);for(let i=0;i<o;i++){let a=document.createElement(`button`);a.className=`motionrail-dot`,a.setAttribute(`aria-label`,`Go to item ${i+1}`),r&&(a.textContent=(i+1).toString()),a.addEventListener(`click`,()=>{e.scrollToIndex(i)}),n.push(a),t.appendChild(a)}e.element.appendChild(t)}},onUpdate(e,r){let{visibleItemIndexes:i,totalItems:o}=r;if(!o){t.style.display=`none`;return}if(t.style.removeProperty(`display`),n.forEach((e,t)=>{i.includes(t)?e.classList.add(`motionrail-dot-active`):e.classList.remove(`motionrail-dot-active`)}),i.length>0){let e=n[i[0]];if(e){let n=t.offsetWidth,r=e.offsetLeft,i=e.offsetWidth,a=r-n/2+i/2;t.scrollTo({left:a,behavior:`smooth`})}}a&&console.log(`DotsExtension updated`,r)},onDestroy(e,r){t.remove(),n.length=0}}}e.Dots=n});

package/dist/extensions/logger.d.ts

@@ -0,0 +1,2 @@
+import type { MotionRailExtension } from "../motionrail";
+export declare function Logger(): MotionRailExtension;

package/dist/extensions/logger.js

@@ -0,0 +1,16 @@
+import "../motionrail-Dq8joDtA.js";
+function Logger() {
+	return {
+		name: "LoggerExtension",
+		onInit(e, t) {
+			console.debug("[LoggerExtension] MotionRail initialized", t), console.debug(e);
+		},
+		onUpdate(e, t) {
+			console.debug("[LoggerExtension] MotionRail updated", t), console.debug(e);
+		},
+		onDestroy(e, t) {
+			console.debug("[LoggerExtension] MotionRail destroyed", t), console.debug(e);
+		}
+	};
+}
+export { Logger };

package/dist/extensions/logger.umd.cjs

@@ -0,0 +1,2 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRailLogger={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`[data-motion-rail-scrollable]::-webkit-scrollbar{display:none}[data-motion-rail]{position:relative}[data-motion-rail] [data-motion-rail-scrollable]{anchor-name:--motionrail-scrollable;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;position:relative;overflow:scroll hidden;container-type:inline-size}[data-motion-rail] [data-motion-rail-scrollable]:active{cursor:grabbing}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]{grid-auto-flow:column;height:100%;display:grid}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]>*{pointer-events:none;scroll-snap-align:start}
+/*$vite$:1*/`,document.head.appendChild(t);function n(){return{name:`LoggerExtension`,onInit(e,t){console.debug(`[LoggerExtension] MotionRail initialized`,t),console.debug(e)},onUpdate(e,t){console.debug(`[LoggerExtension] MotionRail updated`,t),console.debug(e)},onDestroy(e,t){console.debug(`[LoggerExtension] MotionRail destroyed`,t),console.debug(e)}}}e.Logger=n});

package/dist/extensions/thumbnails/main.d.ts

@@ -0,0 +1,6 @@
+import type { MotionRailExtension } from "../../motionrail";
+export declare function Thumbnails(par?: {
+    thumbnailWidth?: number;
+    thumbnailHeight?: number;
+    log?: boolean;
+}): MotionRailExtension;

package/dist/extensions/thumbnails/style.css

@@ -0,0 +1 @@
+.motionrail-thumbnails{--thumbnail-width:80px;--thumbnail-height:80px;z-index:10;scrollbar-width:none;-ms-overflow-style:none;background:#0000004d;border-radius:8px;gap:12px;width:fit-content;max-width:calc(100% - 32px);margin:16px auto 0;padding:12px;display:flex;position:relative;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#0000 0,#000 12px calc(100% - 12px),#0000 100%);mask-image:linear-gradient(90deg,#0000 0,#000 12px calc(100% - 12px),#0000 100%)}.motionrail-thumbnails::-webkit-scrollbar{display:none}.motionrail-thumbnail{min-width:var(--thumbnail-width);min-height:var(--thumbnail-height);width:var(--thumbnail-width);height:var(--thumbnail-height);cursor:pointer;background:0 0;border:3px solid #ffffff4d;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:all .3s;display:flex;position:relative;overflow:hidden}.motionrail-thumbnail>*{border-radius:0!important;width:100%!important;height:100%!important}.motionrail-thumbnail:hover{border-color:#fff9;scale:1.05}.motionrail-thumbnail:active{scale:.98}.motionrail-thumbnail-active{border-width:3px;border-color:#fff;scale:1.1}.motionrail-thumbnail-active:hover{border-color:#fff}

package/dist/extensions/thumbnails.js

@@ -0,0 +1,42 @@
+import "../motionrail-Dq8joDtA.js";
+function Thumbnails(e) {
+	let t = document.createElement("div"), n = [], { thumbnailWidth: r = 80, thumbnailHeight: i = 80, log: a = !1 } = e || {};
+	return {
+		name: "ThumbnailsExtension",
+		onInit(e, a) {
+			let { totalItems: o } = a;
+			o !== 0 && (t.className = "motionrail-thumbnails", t.style.setProperty("--thumbnail-width", `${r}px`), t.style.setProperty("--thumbnail-height", `${i}px`), e.element.querySelectorAll("[data-motion-rail-grid] > *").forEach((r, i) => {
+				let a = document.createElement("button");
+				a.className = "motionrail-thumbnail", a.setAttribute("aria-label", `Go to item ${i + 1}`);
+				let o = r.cloneNode(!0);
+				o.removeAttribute("data-motion-rail-item"), a.appendChild(o), a.addEventListener("click", () => {
+					e.scrollToIndex(i);
+				}), n.push(a), t.appendChild(a);
+			}), e.element.appendChild(t));
+		},
+		onUpdate(e, r) {
+			let { visibleItemIndexes: i, totalItems: o } = r;
+			if (!o) {
+				t.style.display = "none";
+				return;
+			}
+			if (t.style.removeProperty("display"), n.forEach((e, t) => {
+				i.includes(t) ? e.classList.add("motionrail-thumbnail-active") : e.classList.remove("motionrail-thumbnail-active");
+			}), i.length > 0) {
+				let e = n[i[0]];
+				if (e) {
+					let n = t.offsetWidth, r = e.offsetLeft, i = e.offsetWidth, a = r - n / 2 + i / 2;
+					t.scrollTo({
+						left: a,
+						behavior: "smooth"
+					});
+				}
+			}
+			a && console.log("ThumbnailsExtension updated", r);
+		},
+		onDestroy(e, r) {
+			t.remove(), n.length = 0;
+		}
+	};
+}
+export { Thumbnails };

package/dist/extensions/thumbnails.umd.cjs

@@ -0,0 +1,2 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRailThumbnails={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`[data-motion-rail-scrollable]::-webkit-scrollbar{display:none}[data-motion-rail]{position:relative}[data-motion-rail] [data-motion-rail-scrollable]{anchor-name:--motionrail-scrollable;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;position:relative;overflow:scroll hidden;container-type:inline-size}[data-motion-rail] [data-motion-rail-scrollable]:active{cursor:grabbing}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]{grid-auto-flow:column;height:100%;display:grid}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]>*{pointer-events:none;scroll-snap-align:start}
+/*$vite$:1*/`,document.head.appendChild(t);function n(e){let t=document.createElement(`div`),n=[],{thumbnailWidth:r=80,thumbnailHeight:i=80,log:a=!1}=e||{};return{name:`ThumbnailsExtension`,onInit(e,a){let{totalItems:o}=a;o!==0&&(t.className=`motionrail-thumbnails`,t.style.setProperty(`--thumbnail-width`,`${r}px`),t.style.setProperty(`--thumbnail-height`,`${i}px`),e.element.querySelectorAll(`[data-motion-rail-grid] > *`).forEach((r,i)=>{let a=document.createElement(`button`);a.className=`motionrail-thumbnail`,a.setAttribute(`aria-label`,`Go to item ${i+1}`);let o=r.cloneNode(!0);o.removeAttribute(`data-motion-rail-item`),a.appendChild(o),a.addEventListener(`click`,()=>{e.scrollToIndex(i)}),n.push(a),t.appendChild(a)}),e.element.appendChild(t))},onUpdate(e,r){let{visibleItemIndexes:i,totalItems:o}=r;if(!o){t.style.display=`none`;return}if(t.style.removeProperty(`display`),n.forEach((e,t)=>{i.includes(t)?e.classList.add(`motionrail-thumbnail-active`):e.classList.remove(`motionrail-thumbnail-active`)}),i.length>0){let e=n[i[0]];if(e){let n=t.offsetWidth,r=e.offsetLeft,i=e.offsetWidth,a=r-n/2+i/2;t.scrollTo({left:a,behavior:`smooth`})}}a&&console.log(`ThumbnailsExtension updated`,r)},onDestroy(e,r){t.remove(),n.length=0}}}e.Thumbnails=n});

package/dist/lib/main.d.ts

@@ -1,15 +1,17 @@
 import type { MotionRailOptions } from "./types";
 export declare class MotionRail {
+    element: HTMLElement;
+    scrollable: HTMLElement;
     private rtl;
-    private rtlScrollType;
     private autoplay;
-    private breakpoints;
-    private element;
     private delay;
     private resumeDelay;
+    private onChange?;
+    private handleStateChange;
+    private extensions;
+    private breakpoints;
     private autoPlayIntervalId;
     private autoPlayTimeoutId;
-    private currentIndex;
     private isDragging;
     private startX;
     private startLogicalScroll;
@@ -20,15 +22,18 @@ export declare class MotionRail {
     private pointerId;
     private snapPoints;
     private resizeObserver;
+    private intersectionObserver;
+    private state;
     constructor(element: HTMLElement, options: MotionRailOptions);
-    private detectRTLScrollType;
+    private randomContainerName;
+    private setBreakPoints;
     private getLogicalScroll;
     private setLogicalScroll;
     private scrollToLogical;
     private observeResize;
+    private observeEdgeItems;
     private cacheSnapPoints;
     private findNearestSnapPoint;
-    private init;
     private attachPointerEvents;
     private handlePointerDown;
     private handlePointerMove;
@@ -40,6 +45,23 @@ export declare class MotionRail {
     prev(): void;
     pause(): void;
     scrollToIndex(index: number): void;
-    getCurrentIndex(): number;
+    getState(): {
+        visibleItemIndexes: number[];
+        totalItems: number;
+        isFirstItemVisible: boolean;
+        isLastItemVisible: boolean;
+    };
+    getOptions(): {
+        autoplay: boolean;
+        rtl: boolean;
+        delay: number;
+        resumeDelay: number;
+        breakpoints: {
+            width?: number;
+            columns?: number;
+            gap?: string;
+        }[];
+    };
+    update(): void;
     destroy(): void;
 }

package/dist/lib/types.d.ts

@@ -1,12 +1,27 @@
+import type { MotionRail } from "./main";
 export type MotionRailBreakpoint = {
     width?: number;
     columns?: number;
     gap?: string;
 };
+export type MotionRailState = {
+    totalItems: number;
+    visibleItemIndexes: number[];
+    isFirstItemVisible: boolean;
+    isLastItemVisible: boolean;
+};
 export type MotionRailOptions = {
     autoplay?: boolean;
     resumeDelay?: number;
     delay?: number;
     rtl?: boolean;
-    breakpoints: MotionRailBreakpoint[];
+    onChange?: (state: MotionRailState) => void;
+    breakpoints?: MotionRailBreakpoint[];
+    extensions?: MotionRailExtension[];
+};
+export type MotionRailExtension = {
+    name: string;
+    onInit?: (motionRail: MotionRail, state: MotionRailState) => void;
+    onUpdate?: (motionRail: MotionRail, state: MotionRailState) => void;
+    onDestroy?: (motionRail: MotionRail, state: MotionRailState) => void;
 };

package/dist/motionrail-Dq8joDtA.js

@@ -0,0 +1,213 @@
+var MotionRail = class {
+	element;
+	scrollable;
+	rtl = !1;
+	autoplay = !1;
+	delay = 3e3;
+	resumeDelay = 4e3;
+	onChange;
+	handleStateChange = () => {
+		let e = this.getState();
+		this.extensions.forEach((t) => {
+			t.onUpdate && t.onUpdate(this, e);
+		}), this.onChange && this.onChange(e);
+	};
+	extensions = [];
+	breakpoints = [];
+	autoPlayIntervalId = null;
+	autoPlayTimeoutId = null;
+	isDragging = !1;
+	startX = 0;
+	startLogicalScroll = 0;
+	cancelScroll = null;
+	lastPointerX = 0;
+	lastPointerTime = 0;
+	velocity = 0;
+	pointerId = null;
+	snapPoints = [];
+	resizeObserver = null;
+	intersectionObserver = null;
+	state = {
+		totalItems: 0,
+		visibleItemIndexes: [],
+		isFirstItemVisible: !1,
+		isLastItemVisible: !1
+	};
+	constructor(e, t) {
+		this.autoplay = t.autoplay || !1, this.rtl = t.rtl || !1, this.breakpoints = t.breakpoints || [{
+			columns: 1,
+			gap: "0px"
+		}], this.element = e, this.extensions = t.extensions || [];
+		let n = this.element.querySelector("[data-motion-rail-scrollable]");
+		if (!n) throw Error("MotionRail: [data-motion-rail-scrollable] element not found");
+		this.scrollable = n, this.delay = t.delay || 3e3, this.resumeDelay = t.resumeDelay || 4e3, this.onChange = t.onChange, this.state.totalItems = this.element.querySelectorAll("[data-motion-rail-grid] > *").length, this.setBreakPoints(), this.setLogicalScroll(0), this.attachPointerEvents(), this.cacheSnapPoints(), this.observeResize(), this.observeEdgeItems(), this.autoplay && this.play();
+		let r = this.getState();
+		this.extensions.forEach((e) => {
+			e.onInit && e.onInit(this, r);
+		});
+	}
+	randomContainerName() {
+		return `motion-rail-${Math.random().toString(36).substring(2, 11)}`;
+	}
+	setBreakPoints() {
+		let e = this.element.querySelector("[data-motion-rail-scrollable]");
+		if (!e) return;
+		let t = "";
+		e.style.containerName ? t = e.style.containerName : (t = this.randomContainerName(), e.style.containerName = t);
+		let n = document.createElement("style"), r = "", i = this.breakpoints.filter((e) => e.width), a = i.length > 0 ? Math.min(...i.map((e) => e.width)) : null;
+		return this.breakpoints.forEach((e) => {
+			let n = e.columns || 1, i = e.gap || "0px", o = `calc((100cqw - (${n - 1} * ${i})) / ${n})`, s = "";
+			s = e.width ? `(min-width: ${e.width}px)` : a ? `(max-width: ${a - 1}px)` : "(min-width: 0px)", r += `
+      @container ${t} ${s} {
+        [data-motion-rail-grid] {
+          grid-template-columns: repeat(${this.state.totalItems}, ${o});
+          gap: ${i};
+        }
+      }
+    `;
+		}), n.textContent = r, document.head.appendChild(n), n;
+	}
+	getLogicalScroll() {
+		return this.scrollable.scrollLeft;
+	}
+	setLogicalScroll(e) {
+		this.scrollable.scrollLeft = e;
+	}
+	scrollToLogical(e, t = "auto") {
+		this.scrollable.scrollTo({
+			left: e,
+			behavior: t
+		});
+	}
+	observeResize() {
+		typeof ResizeObserver > "u" || (this.resizeObserver = new ResizeObserver(() => {
+			this.cacheSnapPoints();
+		}), this.resizeObserver.observe(this.scrollable));
+	}
+	observeEdgeItems() {
+		if (typeof IntersectionObserver > "u") return;
+		let e = this.element.querySelectorAll("[data-motion-rail-grid] > *");
+		if (e.length === 0) return;
+		let t = e[0], n = e[e.length - 1];
+		this.intersectionObserver = new IntersectionObserver((r) => {
+			let i = !1;
+			r.forEach((r) => {
+				let a = Array.from(e).indexOf(r.target);
+				if (a !== -1) {
+					if (r.isIntersecting) this.state.visibleItemIndexes.includes(a) || (this.state.visibleItemIndexes.push(a), this.state.visibleItemIndexes.sort((e, t) => e - t), i = !0);
+					else {
+						let e = this.state.visibleItemIndexes.length;
+						this.state.visibleItemIndexes = this.state.visibleItemIndexes.filter((e) => e !== a), this.state.visibleItemIndexes.length !== e && (i = !0);
+					}
+					if (r.target === t) {
+						let e = r.isIntersecting;
+						this.state.isFirstItemVisible !== e && (this.state.isFirstItemVisible = e, i = !0);
+					} else if (r.target === n) {
+						let e = r.isIntersecting;
+						this.state.isLastItemVisible !== e && (this.state.isLastItemVisible = e, i = !0);
+					}
+				}
+			}), i && this.handleStateChange();
+		}, {
+			root: this.scrollable,
+			threshold: .5
+		}), e.forEach((e) => this.intersectionObserver.observe(e));
+	}
+	cacheSnapPoints() {
+		let e = this.element.querySelectorAll("[data-motion-rail-grid] > *"), t = this.scrollable.scrollWidth - this.scrollable.clientWidth;
+		this.snapPoints = Array.from(e).map((e) => Math.min(e.offsetLeft, t));
+	}
+	findNearestSnapPoint(e) {
+		let t = 0, n = Infinity;
+		for (let r of this.snapPoints) {
+			let i = Math.abs(r - e);
+			i < n && (n = i, t = r);
+		}
+		return t;
+	}
+	attachPointerEvents() {
+		window.matchMedia("(pointer: fine)").matches && (this.scrollable.addEventListener("pointerdown", this.handlePointerDown), this.scrollable.addEventListener("pointermove", this.handlePointerMove), this.scrollable.addEventListener("pointerup", this.handlePointerUp), this.scrollable.addEventListener("pointerleave", this.handlePointerUp));
+	}
+	handlePointerDown = (e) => {
+		this.pointerId === null && (this.pointerId = e.pointerId, this.scrollable.setPointerCapture(e.pointerId), this.isDragging = !0, this.startX = e.clientX, this.startLogicalScroll = this.getLogicalScroll(), this.lastPointerX = e.clientX, this.lastPointerTime = e.timeStamp, this.velocity = 0, this.scrollable.style.userSelect = "none", this.scrollable.style.scrollSnapType = "none", this.pause(), this.cancelScroll && this.cancelScroll(), this.autoPlayTimeoutId && clearTimeout(this.autoPlayTimeoutId));
+	};
+	handlePointerMove = (e) => {
+		if (!this.isDragging || e.pointerId !== this.pointerId) return;
+		e.preventDefault();
+		let t = e.clientX - this.startX, n = this.startLogicalScroll - t;
+		this.setLogicalScroll(n);
+		let r = e.timeStamp - this.lastPointerTime;
+		r > 0 && (this.velocity = (e.clientX - this.lastPointerX) / r, this.lastPointerX = e.clientX, this.lastPointerTime = e.timeStamp);
+	};
+	handlePointerUp = (e) => {
+		if (!this.isDragging || e.pointerId !== this.pointerId) return;
+		this.scrollable.releasePointerCapture(e.pointerId), this.pointerId = null, this.isDragging = !1, this.scrollable.style.userSelect = "";
+		let t = Math.abs(this.velocity), n = Math.min(100 + Math.sqrt(t) * 50, 200), r = -this.velocity * n, i = this.getLogicalScroll() + r;
+		this.cancelScroll && this.cancelScroll();
+		let a = this.findNearestSnapPoint(i);
+		this.cancelScroll = this.animateLogicalScroll(a, n, () => {
+			this.scrollable.style.scrollSnapType = "x mandatory", this.cancelScroll = null, this.autoplay && (this.autoPlayTimeoutId = window.setTimeout(() => {
+				this.play(), this.autoPlayTimeoutId = null;
+			}, this.resumeDelay));
+		}), this.velocity = 0;
+	};
+	animateLogicalScroll(e, t, n) {
+		let r = this.getLogicalScroll(), i = performance.now(), a = !1, o = (s) => {
+			if (a) return;
+			let c = s - i, l = Math.min(c / t, 1), u = 1 - (1 - l) ** 3, d = r + (e - r) * u;
+			this.setLogicalScroll(d), l < 1 ? requestAnimationFrame(o) : n();
+		};
+		return requestAnimationFrame(o), () => {
+			a = !0;
+		};
+	}
+	scrollByPage(e) {
+		if (this.state.visibleItemIndexes.length === 0) return;
+		let t, n = this.state.visibleItemIndexes[0], r = this.state.visibleItemIndexes[this.state.visibleItemIndexes.length - 1], i = this.state.visibleItemIndexes.length;
+		e === 1 ? (t = r + 1, this.rtl && (t = r + i), t >= this.snapPoints.length - 1 && this.state.isLastItemVisible ? t = 0 : t >= this.snapPoints.length - 1 && !this.state.isLastItemVisible && (t = this.snapPoints.length - 1)) : (t = n - i, this.rtl && (t = r - i), t <= 0 && this.state.isFirstItemVisible ? t = this.snapPoints.length - 1 : t <= 0 && !this.state.isFirstItemVisible && (t = 0)), this.scrollToLogical(this.snapPoints[t], "smooth");
+	}
+	play() {
+		this.autoPlayIntervalId = window.setInterval(() => {
+			this.scrollByPage(1);
+		}, this.delay);
+	}
+	next() {
+		this.pause(), this.scrollByPage(1);
+	}
+	prev() {
+		this.pause(), this.scrollByPage(-1);
+	}
+	pause() {
+		this.autoPlayIntervalId &&= (clearInterval(this.autoPlayIntervalId), null), this.autoPlayTimeoutId &&= (clearTimeout(this.autoPlayTimeoutId), null), !this.isDragging && this.autoplay && (this.autoPlayTimeoutId = window.setTimeout(() => {
+			this.play(), this.autoPlayTimeoutId = null;
+		}, this.resumeDelay));
+	}
+	scrollToIndex(e) {
+		this.pause(), e >= 0 && e < this.snapPoints.length && this.scrollToLogical(this.snapPoints[e], "smooth");
+	}
+	getState() {
+		return {
+			...this.state,
+			visibleItemIndexes: [...this.state.visibleItemIndexes]
+		};
+	}
+	getOptions() {
+		return {
+			autoplay: this.autoplay,
+			rtl: this.rtl,
+			delay: this.delay,
+			resumeDelay: this.resumeDelay,
+			breakpoints: this.breakpoints.map((e) => ({ ...e }))
+		};
+	}
+	update() {
+		this.intersectionObserver &&= (this.intersectionObserver.disconnect(), null), this.state.totalItems = this.element.querySelectorAll("[data-motion-rail-grid] > *").length, this.state.visibleItemIndexes = [], this.state.isFirstItemVisible = !1, this.state.isLastItemVisible = !1, this.setBreakPoints(), this.cacheSnapPoints(), this.observeEdgeItems(), this.handleStateChange();
+	}
+	destroy() {
+		let e = this.getState();
+		this.extensions.forEach((t) => {
+			t.onDestroy && t.onDestroy(this, e);
+		}), this.autoPlayIntervalId &&= (clearInterval(this.autoPlayIntervalId), null), this.cancelScroll &&= (this.cancelScroll(), null), this.autoPlayTimeoutId &&= (clearTimeout(this.autoPlayTimeoutId), null), this.resizeObserver &&= (this.resizeObserver.disconnect(), null), this.intersectionObserver &&= (this.intersectionObserver.disconnect(), null), this.scrollable.removeEventListener("pointerdown", this.handlePointerDown), this.scrollable.removeEventListener("pointermove", this.handlePointerMove), this.scrollable.removeEventListener("pointerup", this.handlePointerUp), this.scrollable.removeEventListener("pointerleave", this.handlePointerUp);
+	}
+};
+export { MotionRail as t };

package/dist/motionrail.d.ts

@@ -1,3 +1,3 @@
 export { MotionRail } from "./lib/main";
-export type { MotionRailBreakpoint, MotionRailOptions } from "./lib/types";
+export type * from "./lib/types";
 import "./style.css";

package/dist/motionrail.js

@@ -1,196 +1,2 @@
-function randomContainerName() {
-	return `motion-rail-${Math.random().toString(36).substring(2, 11)}`;
-}
-function setBreakPoints(t) {
-	let { container: n, breakpoints: r, length: i } = t;
-	if (!n.querySelector(".motion-rail-container")) return;
-	let a = "";
-	n.style.containerName ? a = n.style.containerName : (a = randomContainerName(), n.style.containerName = a);
-	let o = document.createElement("style"), s = "", c = r.filter((e) => e.width), l = c.length > 0 ? Math.min(...c.map((e) => e.width)) : null;
-	return r.forEach((e) => {
-		let t = e.columns || 1, n = e.gap || "0px", r = `calc((100cqw - (${t - 1} * ${n})) / ${t})`, o = "";
-		o = e.width ? `(min-width: ${e.width}px)` : l ? `(max-width: ${l - 1}px)` : "(min-width: 0px)", s += `
-      @container ${a} ${o} {
-        .motion-rail-container {
-          grid-template-columns: repeat(${i}, ${r});
-          gap: ${n};
-        }
-      }
-    `;
-	}), o.textContent = s, document.head.appendChild(o), o;
-}
-var MotionRail = class {
-	rtl = !1;
-	rtlScrollType = "default";
-	autoplay = !1;
-	breakpoints = [];
-	element;
-	delay = 3e3;
-	resumeDelay = 4e3;
-	autoPlayIntervalId = null;
-	autoPlayTimeoutId = null;
-	currentIndex = 0;
-	isDragging = !1;
-	startX = 0;
-	startLogicalScroll = 0;
-	cancelScroll = null;
-	lastPointerX = 0;
-	lastPointerTime = 0;
-	velocity = 0;
-	pointerId = null;
-	snapPoints = [];
-	resizeObserver = null;
-	constructor(e, n) {
-		this.autoplay = n.autoplay || !1, this.rtl = n.rtl || !1, this.breakpoints = n.breakpoints, this.element = e, this.delay = n.delay || 3e3, this.resumeDelay = n.resumeDelay || 4e3, this.rtl && (this.rtlScrollType = this.detectRTLScrollType()), setBreakPoints({
-			container: this.element,
-			breakpoints: this.breakpoints,
-			length: this.element.querySelectorAll(".motion-rail-item").length
-		}), this.init(), this.attachPointerEvents(), this.cacheSnapPoints(), this.observeResize(), this.autoplay && this.play();
-	}
-	detectRTLScrollType() {
-		let e = document.createElement("div");
-		e.dir = "rtl", e.style.width = "1px", e.style.height = "1px", e.style.position = "absolute", e.style.top = "-1000px", e.style.overflow = "scroll";
-		let t = document.createElement("div");
-		t.style.width = "2px", t.style.height = "1px", e.appendChild(t), document.body.appendChild(e);
-		let n = "default";
-		return e.scrollLeft > 0 ? n = "reverse" : (e.scrollLeft = 1, e.scrollLeft < 0 && (n = "negative")), document.body.removeChild(e), n;
-	}
-	getLogicalScroll() {
-		if (!this.rtl) return this.element.scrollLeft;
-		let e = this.element.scrollLeft, t = this.element.scrollWidth - this.element.clientWidth;
-		switch (this.rtlScrollType) {
-			case "negative": return -e;
-			case "reverse": return t - e;
-			default: return e;
-		}
-	}
-	setLogicalScroll(e) {
-		if (!this.rtl) {
-			this.element.scrollLeft = e;
-			return;
-		}
-		let t = this.element.scrollWidth - this.element.clientWidth;
-		switch (this.rtlScrollType) {
-			case "negative":
-				this.element.scrollLeft = -e;
-				break;
-			case "reverse":
-				this.element.scrollLeft = t - e;
-				break;
-			default:
-				this.element.scrollLeft = e;
-				break;
-		}
-	}
-	scrollToLogical(e, t = "auto") {
-		if (!this.rtl) {
-			this.element.scrollTo({
-				left: e,
-				behavior: t
-			});
-			return;
-		}
-		let n = this.element.scrollWidth - this.element.clientWidth, r;
-		switch (this.rtlScrollType) {
-			case "negative":
-				r = -e;
-				break;
-			case "reverse":
-				r = n - e;
-				break;
-			default:
-				r = e;
-				break;
-		}
-		this.element.scrollTo({
-			left: r,
-			behavior: t
-		});
-	}
-	observeResize() {
-		typeof ResizeObserver > "u" || (this.resizeObserver = new ResizeObserver(() => {
-			this.cacheSnapPoints();
-		}), this.resizeObserver.observe(this.element));
-	}
-	cacheSnapPoints() {
-		let e = this.element.querySelectorAll(".motion-rail-item"), t = this.element.scrollWidth - this.element.clientWidth;
-		this.snapPoints = Array.from(e).map((e) => Math.min(e.offsetLeft, t));
-	}
-	findNearestSnapPoint(e) {
-		let t = 0, n = Infinity;
-		for (let r of this.snapPoints) {
-			let i = Math.abs(r - e);
-			i < n && (n = i, t = r);
-		}
-		return t;
-	}
-	init() {
-		this.setLogicalScroll(0), this.currentIndex = 0, this.element.style.cursor = "grab";
-	}
-	attachPointerEvents() {
-		this.element.addEventListener("pointerdown", this.handlePointerDown), this.element.addEventListener("pointermove", this.handlePointerMove), this.element.addEventListener("pointerup", this.handlePointerUp), this.element.addEventListener("pointerleave", this.handlePointerUp);
-	}
-	handlePointerDown = (e) => {
-		this.pointerId === null && (this.pointerId = e.pointerId, this.element.setPointerCapture(e.pointerId), this.isDragging = !0, this.startX = e.clientX, this.startLogicalScroll = this.getLogicalScroll(), this.lastPointerX = e.clientX, this.lastPointerTime = e.timeStamp, this.velocity = 0, this.element.style.cursor = "grabbing", this.element.style.userSelect = "none", this.element.style.scrollSnapType = "none", this.pause(), this.cancelScroll && this.cancelScroll(), this.autoPlayTimeoutId && clearTimeout(this.autoPlayTimeoutId));
-	};
-	handlePointerMove = (e) => {
-		if (!this.isDragging || e.pointerId !== this.pointerId) return;
-		e.preventDefault();
-		let t = e.clientX - this.startX, n = this.startLogicalScroll - t;
-		this.setLogicalScroll(n);
-		let r = e.timeStamp - this.lastPointerTime;
-		r > 0 && (this.velocity = (e.clientX - this.lastPointerX) / r, this.lastPointerX = e.clientX, this.lastPointerTime = e.timeStamp);
-	};
-	handlePointerUp = (e) => {
-		if (!this.isDragging || e.pointerId !== this.pointerId) return;
-		this.element.releasePointerCapture(e.pointerId), this.pointerId = null, this.isDragging = !1, this.element.style.cursor = "grab", this.element.style.userSelect = "";
-		let t = Math.abs(this.velocity), n = Math.min(100 + Math.sqrt(t) * 50, 200), r = -this.velocity * n, i = this.getLogicalScroll() + r;
-		this.cancelScroll && this.cancelScroll();
-		let a = this.findNearestSnapPoint(i);
-		this.currentIndex = this.snapPoints.indexOf(a), this.cancelScroll = this.animateLogicalScroll(a, n, () => {
-			this.element.style.scrollSnapType = "x mandatory", this.cancelScroll = null, this.autoplay && (this.autoPlayTimeoutId = window.setTimeout(() => {
-				this.play(), this.autoPlayTimeoutId = null;
-			}, this.resumeDelay));
-		}), this.velocity = 0;
-	};
-	animateLogicalScroll(e, t, n) {
-		let r = this.getLogicalScroll(), i = performance.now(), a = !1, o = (s) => {
-			if (a) return;
-			let c = s - i, l = Math.min(c / t, 1), u = 1 - (1 - l) ** 3, d = r + (e - r) * u;
-			this.setLogicalScroll(d), l < 1 ? requestAnimationFrame(o) : n();
-		};
-		return requestAnimationFrame(o), () => {
-			a = !0;
-		};
-	}
-	scrollByPage(e) {
-		let t = this.currentIndex + e;
-		t >= this.snapPoints.length ? (this.currentIndex = 0, this.scrollToLogical(this.snapPoints[0], "smooth")) : t < 0 ? (this.currentIndex = this.snapPoints.length - 1, this.scrollToLogical(this.snapPoints[this.currentIndex], "smooth")) : (this.currentIndex = t, this.scrollToLogical(this.snapPoints[t], "smooth"));
-	}
-	play() {
-		this.autoPlayIntervalId = window.setInterval(() => {
-			this.scrollByPage(1);
-		}, this.delay);
-	}
-	next() {
-		this.pause(), this.scrollByPage(1);
-	}
-	prev() {
-		this.pause(), this.scrollByPage(-1);
-	}
-	pause() {
-		this.autoplay && (this.autoPlayIntervalId &&= (clearInterval(this.autoPlayIntervalId), null), this.autoPlayTimeoutId &&= (clearTimeout(this.autoPlayTimeoutId), null), !this.isDragging && (this.autoPlayTimeoutId = window.setTimeout(() => {
-			this.play(), this.autoPlayTimeoutId = null;
-		}, this.resumeDelay)));
-	}
-	scrollToIndex(e) {
-		this.pause(), e >= 0 && e < this.snapPoints.length && (this.scrollToLogical(this.snapPoints[e], "smooth"), this.currentIndex = e);
-	}
-	getCurrentIndex() {
-		return this.currentIndex;
-	}
-	destroy() {
-		this.autoPlayIntervalId &&= (clearInterval(this.autoPlayIntervalId), null), this.cancelScroll &&= (this.cancelScroll(), null), this.autoPlayTimeoutId &&= (clearTimeout(this.autoPlayTimeoutId), null), this.resizeObserver &&= (this.resizeObserver.disconnect(), null), this.element.removeEventListener("pointerdown", this.handlePointerDown), this.element.removeEventListener("pointermove", this.handlePointerMove), this.element.removeEventListener("pointerup", this.handlePointerUp), this.element.removeEventListener("pointerleave", this.handlePointerUp);
-	}
-};
+import { t as MotionRail } from "./motionrail-Dq8joDtA.js";
 export { MotionRail };

package/dist/motionrail.umd.cjs

@@ -1,8 +1,9 @@
-(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRail={}))})(this,function(e){function t(){return`motion-rail-${Math.random().toString(36).substring(2,11)}`}function n(e){let{container:n,breakpoints:r,length:i}=e;if(!n.querySelector(`.motion-rail-container`))return;let a=``;n.style.containerName?a=n.style.containerName:(a=t(),n.style.containerName=a);let o=document.createElement(`style`),s=``,c=r.filter(e=>e.width),l=c.length>0?Math.min(...c.map(e=>e.width)):null;return r.forEach(e=>{let t=e.columns||1,n=e.gap||`0px`,r=`calc((100cqw - (${t-1} * ${n})) / ${t})`,o=``;o=e.width?`(min-width: ${e.width}px)`:l?`(max-width: ${l-1}px)`:`(min-width: 0px)`,s+=`
-      @container ${a} ${o} {
-        .motion-rail-container {
-          grid-template-columns: repeat(${i}, ${r});
-          gap: ${n};
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports):typeof define==`function`&&define.amd?define([`exports`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.MotionRail={}))})(this,function(e){var t=document.createElement(`style`);t.textContent=`[data-motion-rail-scrollable]::-webkit-scrollbar{display:none}[data-motion-rail]{position:relative}[data-motion-rail] [data-motion-rail-scrollable]{anchor-name:--motionrail-scrollable;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;position:relative;overflow:scroll hidden;container-type:inline-size}[data-motion-rail] [data-motion-rail-scrollable]:active{cursor:grabbing}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]{grid-auto-flow:column;height:100%;display:grid}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]>*{pointer-events:none;scroll-snap-align:start}
+/*$vite$:1*/`,document.head.appendChild(t),e.MotionRail=class{element;scrollable;rtl=!1;autoplay=!1;delay=3e3;resumeDelay=4e3;onChange;handleStateChange=()=>{let e=this.getState();this.extensions.forEach(t=>{t.onUpdate&&t.onUpdate(this,e)}),this.onChange&&this.onChange(e)};extensions=[];breakpoints=[];autoPlayIntervalId=null;autoPlayTimeoutId=null;isDragging=!1;startX=0;startLogicalScroll=0;cancelScroll=null;lastPointerX=0;lastPointerTime=0;velocity=0;pointerId=null;snapPoints=[];resizeObserver=null;intersectionObserver=null;state={totalItems:0,visibleItemIndexes:[],isFirstItemVisible:!1,isLastItemVisible:!1};constructor(e,t){this.autoplay=t.autoplay||!1,this.rtl=t.rtl||!1,this.breakpoints=t.breakpoints||[{columns:1,gap:`0px`}],this.element=e,this.extensions=t.extensions||[];let n=this.element.querySelector(`[data-motion-rail-scrollable]`);if(!n)throw Error(`MotionRail: [data-motion-rail-scrollable] element not found`);this.scrollable=n,this.delay=t.delay||3e3,this.resumeDelay=t.resumeDelay||4e3,this.onChange=t.onChange,this.state.totalItems=this.element.querySelectorAll(`[data-motion-rail-grid] > *`).length,this.setBreakPoints(),this.setLogicalScroll(0),this.attachPointerEvents(),this.cacheSnapPoints(),this.observeResize(),this.observeEdgeItems(),this.autoplay&&this.play();let r=this.getState();this.extensions.forEach(e=>{e.onInit&&e.onInit(this,r)})}randomContainerName(){return`motion-rail-${Math.random().toString(36).substring(2,11)}`}setBreakPoints(){let e=this.element.querySelector(`[data-motion-rail-scrollable]`);if(!e)return;let t=``;e.style.containerName?t=e.style.containerName:(t=this.randomContainerName(),e.style.containerName=t);let n=document.createElement(`style`),r=``,i=this.breakpoints.filter(e=>e.width),a=i.length>0?Math.min(...i.map(e=>e.width)):null;return this.breakpoints.forEach(e=>{let n=e.columns||1,i=e.gap||`0px`,o=`calc((100cqw - (${n-1} * ${i})) / ${n})`,s=``;s=e.width?`(min-width: ${e.width}px)`:a?`(max-width: ${a-1}px)`:`(min-width: 0px)`,r+=`
+      @container ${t} ${s} {
+        [data-motion-rail-grid] {
+          grid-template-columns: repeat(${this.state.totalItems}, ${o});
+          gap: ${i};
         }
       }
-    `}),o.textContent=s,document.head.appendChild(o),o}e.MotionRail=class{rtl=!1;rtlScrollType=`default`;autoplay=!1;breakpoints=[];element;delay=3e3;resumeDelay=4e3;autoPlayIntervalId=null;autoPlayTimeoutId=null;currentIndex=0;isDragging=!1;startX=0;startLogicalScroll=0;cancelScroll=null;lastPointerX=0;lastPointerTime=0;velocity=0;pointerId=null;snapPoints=[];resizeObserver=null;constructor(e,t){this.autoplay=t.autoplay||!1,this.rtl=t.rtl||!1,this.breakpoints=t.breakpoints,this.element=e,this.delay=t.delay||3e3,this.resumeDelay=t.resumeDelay||4e3,this.rtl&&(this.rtlScrollType=this.detectRTLScrollType()),n({container:this.element,breakpoints:this.breakpoints,length:this.element.querySelectorAll(`.motion-rail-item`).length}),this.init(),this.attachPointerEvents(),this.cacheSnapPoints(),this.observeResize(),this.autoplay&&this.play()}detectRTLScrollType(){let e=document.createElement(`div`);e.dir=`rtl`,e.style.width=`1px`,e.style.height=`1px`,e.style.position=`absolute`,e.style.top=`-1000px`,e.style.overflow=`scroll`;let t=document.createElement(`div`);t.style.width=`2px`,t.style.height=`1px`,e.appendChild(t),document.body.appendChild(e);let n=`default`;return e.scrollLeft>0?n=`reverse`:(e.scrollLeft=1,e.scrollLeft<0&&(n=`negative`)),document.body.removeChild(e),n}getLogicalScroll(){if(!this.rtl)return this.element.scrollLeft;let e=this.element.scrollLeft,t=this.element.scrollWidth-this.element.clientWidth;switch(this.rtlScrollType){case`negative`:return-e;case`reverse`:return t-e;default:return e}}setLogicalScroll(e){if(!this.rtl){this.element.scrollLeft=e;return}let t=this.element.scrollWidth-this.element.clientWidth;switch(this.rtlScrollType){case`negative`:this.element.scrollLeft=-e;break;case`reverse`:this.element.scrollLeft=t-e;break;default:this.element.scrollLeft=e;break}}scrollToLogical(e,t=`auto`){if(!this.rtl){this.element.scrollTo({left:e,behavior:t});return}let n=this.element.scrollWidth-this.element.clientWidth,r;switch(this.rtlScrollType){case`negative`:r=-e;break;case`reverse`:r=n-e;break;default:r=e;break}this.element.scrollTo({left:r,behavior:t})}observeResize(){typeof ResizeObserver>`u`||(this.resizeObserver=new ResizeObserver(()=>{this.cacheSnapPoints()}),this.resizeObserver.observe(this.element))}cacheSnapPoints(){let e=this.element.querySelectorAll(`.motion-rail-item`),t=this.element.scrollWidth-this.element.clientWidth;this.snapPoints=Array.from(e).map(e=>Math.min(e.offsetLeft,t))}findNearestSnapPoint(e){let t=0,n=1/0;for(let r of this.snapPoints){let i=Math.abs(r-e);i<n&&(n=i,t=r)}return t}init(){this.setLogicalScroll(0),this.currentIndex=0,this.element.style.cursor=`grab`}attachPointerEvents(){this.element.addEventListener(`pointerdown`,this.handlePointerDown),this.element.addEventListener(`pointermove`,this.handlePointerMove),this.element.addEventListener(`pointerup`,this.handlePointerUp),this.element.addEventListener(`pointerleave`,this.handlePointerUp)}handlePointerDown=e=>{this.pointerId===null&&(this.pointerId=e.pointerId,this.element.setPointerCapture(e.pointerId),this.isDragging=!0,this.startX=e.clientX,this.startLogicalScroll=this.getLogicalScroll(),this.lastPointerX=e.clientX,this.lastPointerTime=e.timeStamp,this.velocity=0,this.element.style.cursor=`grabbing`,this.element.style.userSelect=`none`,this.element.style.scrollSnapType=`none`,this.pause(),this.cancelScroll&&this.cancelScroll(),this.autoPlayTimeoutId&&clearTimeout(this.autoPlayTimeoutId))};handlePointerMove=e=>{if(!this.isDragging||e.pointerId!==this.pointerId)return;e.preventDefault();let t=e.clientX-this.startX,n=this.startLogicalScroll-t;this.setLogicalScroll(n);let r=e.timeStamp-this.lastPointerTime;r>0&&(this.velocity=(e.clientX-this.lastPointerX)/r,this.lastPointerX=e.clientX,this.lastPointerTime=e.timeStamp)};handlePointerUp=e=>{if(!this.isDragging||e.pointerId!==this.pointerId)return;this.element.releasePointerCapture(e.pointerId),this.pointerId=null,this.isDragging=!1,this.element.style.cursor=`grab`,this.element.style.userSelect=``;let t=Math.abs(this.velocity),n=Math.min(100+Math.sqrt(t)*50,200),r=-this.velocity*n,i=this.getLogicalScroll()+r;this.cancelScroll&&this.cancelScroll();let a=this.findNearestSnapPoint(i);this.currentIndex=this.snapPoints.indexOf(a),this.cancelScroll=this.animateLogicalScroll(a,n,()=>{this.element.style.scrollSnapType=`x mandatory`,this.cancelScroll=null,this.autoplay&&(this.autoPlayTimeoutId=window.setTimeout(()=>{this.play(),this.autoPlayTimeoutId=null},this.resumeDelay))}),this.velocity=0};animateLogicalScroll(e,t,n){let r=this.getLogicalScroll(),i=performance.now(),a=!1,o=s=>{if(a)return;let c=s-i,l=Math.min(c/t,1),u=1-(1-l)**3,d=r+(e-r)*u;this.setLogicalScroll(d),l<1?requestAnimationFrame(o):n()};return requestAnimationFrame(o),()=>{a=!0}}scrollByPage(e){let t=this.currentIndex+e;t>=this.snapPoints.length?(this.currentIndex=0,this.scrollToLogical(this.snapPoints[0],`smooth`)):t<0?(this.currentIndex=this.snapPoints.length-1,this.scrollToLogical(this.snapPoints[this.currentIndex],`smooth`)):(this.currentIndex=t,this.scrollToLogical(this.snapPoints[t],`smooth`))}play(){this.autoPlayIntervalId=window.setInterval(()=>{this.scrollByPage(1)},this.delay)}next(){this.pause(),this.scrollByPage(1)}prev(){this.pause(),this.scrollByPage(-1)}pause(){this.autoplay&&(this.autoPlayIntervalId&&=(clearInterval(this.autoPlayIntervalId),null),this.autoPlayTimeoutId&&=(clearTimeout(this.autoPlayTimeoutId),null),!this.isDragging&&(this.autoPlayTimeoutId=window.setTimeout(()=>{this.play(),this.autoPlayTimeoutId=null},this.resumeDelay)))}scrollToIndex(e){this.pause(),e>=0&&e<this.snapPoints.length&&(this.scrollToLogical(this.snapPoints[e],`smooth`),this.currentIndex=e)}getCurrentIndex(){return this.currentIndex}destroy(){this.autoPlayIntervalId&&=(clearInterval(this.autoPlayIntervalId),null),this.cancelScroll&&=(this.cancelScroll(),null),this.autoPlayTimeoutId&&=(clearTimeout(this.autoPlayTimeoutId),null),this.resizeObserver&&=(this.resizeObserver.disconnect(),null),this.element.removeEventListener(`pointerdown`,this.handlePointerDown),this.element.removeEventListener(`pointermove`,this.handlePointerMove),this.element.removeEventListener(`pointerup`,this.handlePointerUp),this.element.removeEventListener(`pointerleave`,this.handlePointerUp)}}});
+    `}),n.textContent=r,document.head.appendChild(n),n}getLogicalScroll(){return this.scrollable.scrollLeft}setLogicalScroll(e){this.scrollable.scrollLeft=e}scrollToLogical(e,t=`auto`){this.scrollable.scrollTo({left:e,behavior:t})}observeResize(){typeof ResizeObserver>`u`||(this.resizeObserver=new ResizeObserver(()=>{this.cacheSnapPoints()}),this.resizeObserver.observe(this.scrollable))}observeEdgeItems(){if(typeof IntersectionObserver>`u`)return;let e=this.element.querySelectorAll(`[data-motion-rail-grid] > *`);if(e.length===0)return;let t=e[0],n=e[e.length-1];this.intersectionObserver=new IntersectionObserver(r=>{let i=!1;r.forEach(r=>{let a=Array.from(e).indexOf(r.target);if(a!==-1){if(r.isIntersecting)this.state.visibleItemIndexes.includes(a)||(this.state.visibleItemIndexes.push(a),this.state.visibleItemIndexes.sort((e,t)=>e-t),i=!0);else{let e=this.state.visibleItemIndexes.length;this.state.visibleItemIndexes=this.state.visibleItemIndexes.filter(e=>e!==a),this.state.visibleItemIndexes.length!==e&&(i=!0)}if(r.target===t){let e=r.isIntersecting;this.state.isFirstItemVisible!==e&&(this.state.isFirstItemVisible=e,i=!0)}else if(r.target===n){let e=r.isIntersecting;this.state.isLastItemVisible!==e&&(this.state.isLastItemVisible=e,i=!0)}}}),i&&this.handleStateChange()},{root:this.scrollable,threshold:.5}),e.forEach(e=>this.intersectionObserver.observe(e))}cacheSnapPoints(){let e=this.element.querySelectorAll(`[data-motion-rail-grid] > *`),t=this.scrollable.scrollWidth-this.scrollable.clientWidth;this.snapPoints=Array.from(e).map(e=>Math.min(e.offsetLeft,t))}findNearestSnapPoint(e){let t=0,n=1/0;for(let r of this.snapPoints){let i=Math.abs(r-e);i<n&&(n=i,t=r)}return t}attachPointerEvents(){window.matchMedia(`(pointer: fine)`).matches&&(this.scrollable.addEventListener(`pointerdown`,this.handlePointerDown),this.scrollable.addEventListener(`pointermove`,this.handlePointerMove),this.scrollable.addEventListener(`pointerup`,this.handlePointerUp),this.scrollable.addEventListener(`pointerleave`,this.handlePointerUp))}handlePointerDown=e=>{this.pointerId===null&&(this.pointerId=e.pointerId,this.scrollable.setPointerCapture(e.pointerId),this.isDragging=!0,this.startX=e.clientX,this.startLogicalScroll=this.getLogicalScroll(),this.lastPointerX=e.clientX,this.lastPointerTime=e.timeStamp,this.velocity=0,this.scrollable.style.userSelect=`none`,this.scrollable.style.scrollSnapType=`none`,this.pause(),this.cancelScroll&&this.cancelScroll(),this.autoPlayTimeoutId&&clearTimeout(this.autoPlayTimeoutId))};handlePointerMove=e=>{if(!this.isDragging||e.pointerId!==this.pointerId)return;e.preventDefault();let t=e.clientX-this.startX,n=this.startLogicalScroll-t;this.setLogicalScroll(n);let r=e.timeStamp-this.lastPointerTime;r>0&&(this.velocity=(e.clientX-this.lastPointerX)/r,this.lastPointerX=e.clientX,this.lastPointerTime=e.timeStamp)};handlePointerUp=e=>{if(!this.isDragging||e.pointerId!==this.pointerId)return;this.scrollable.releasePointerCapture(e.pointerId),this.pointerId=null,this.isDragging=!1,this.scrollable.style.userSelect=``;let t=Math.abs(this.velocity),n=Math.min(100+Math.sqrt(t)*50,200),r=-this.velocity*n,i=this.getLogicalScroll()+r;this.cancelScroll&&this.cancelScroll();let a=this.findNearestSnapPoint(i);this.cancelScroll=this.animateLogicalScroll(a,n,()=>{this.scrollable.style.scrollSnapType=`x mandatory`,this.cancelScroll=null,this.autoplay&&(this.autoPlayTimeoutId=window.setTimeout(()=>{this.play(),this.autoPlayTimeoutId=null},this.resumeDelay))}),this.velocity=0};animateLogicalScroll(e,t,n){let r=this.getLogicalScroll(),i=performance.now(),a=!1,o=s=>{if(a)return;let c=s-i,l=Math.min(c/t,1),u=1-(1-l)**3,d=r+(e-r)*u;this.setLogicalScroll(d),l<1?requestAnimationFrame(o):n()};return requestAnimationFrame(o),()=>{a=!0}}scrollByPage(e){if(this.state.visibleItemIndexes.length===0)return;let t,n=this.state.visibleItemIndexes[0],r=this.state.visibleItemIndexes[this.state.visibleItemIndexes.length-1],i=this.state.visibleItemIndexes.length;e===1?(t=r+1,this.rtl&&(t=r+i),t>=this.snapPoints.length-1&&this.state.isLastItemVisible?t=0:t>=this.snapPoints.length-1&&!this.state.isLastItemVisible&&(t=this.snapPoints.length-1)):(t=n-i,this.rtl&&(t=r-i),t<=0&&this.state.isFirstItemVisible?t=this.snapPoints.length-1:t<=0&&!this.state.isFirstItemVisible&&(t=0)),this.scrollToLogical(this.snapPoints[t],`smooth`)}play(){this.autoPlayIntervalId=window.setInterval(()=>{this.scrollByPage(1)},this.delay)}next(){this.pause(),this.scrollByPage(1)}prev(){this.pause(),this.scrollByPage(-1)}pause(){this.autoPlayIntervalId&&=(clearInterval(this.autoPlayIntervalId),null),this.autoPlayTimeoutId&&=(clearTimeout(this.autoPlayTimeoutId),null),!this.isDragging&&this.autoplay&&(this.autoPlayTimeoutId=window.setTimeout(()=>{this.play(),this.autoPlayTimeoutId=null},this.resumeDelay))}scrollToIndex(e){this.pause(),e>=0&&e<this.snapPoints.length&&this.scrollToLogical(this.snapPoints[e],`smooth`)}getState(){return{...this.state,visibleItemIndexes:[...this.state.visibleItemIndexes]}}getOptions(){return{autoplay:this.autoplay,rtl:this.rtl,delay:this.delay,resumeDelay:this.resumeDelay,breakpoints:this.breakpoints.map(e=>({...e}))}}update(){this.intersectionObserver&&=(this.intersectionObserver.disconnect(),null),this.state.totalItems=this.element.querySelectorAll(`[data-motion-rail-grid] > *`).length,this.state.visibleItemIndexes=[],this.state.isFirstItemVisible=!1,this.state.isLastItemVisible=!1,this.setBreakPoints(),this.cacheSnapPoints(),this.observeEdgeItems(),this.handleStateChange()}destroy(){let e=this.getState();this.extensions.forEach(t=>{t.onDestroy&&t.onDestroy(this,e)}),this.autoPlayIntervalId&&=(clearInterval(this.autoPlayIntervalId),null),this.cancelScroll&&=(this.cancelScroll(),null),this.autoPlayTimeoutId&&=(clearTimeout(this.autoPlayTimeoutId),null),this.resizeObserver&&=(this.resizeObserver.disconnect(),null),this.intersectionObserver&&=(this.intersectionObserver.disconnect(),null),this.scrollable.removeEventListener(`pointerdown`,this.handlePointerDown),this.scrollable.removeEventListener(`pointermove`,this.handlePointerMove),this.scrollable.removeEventListener(`pointerup`,this.handlePointerUp),this.scrollable.removeEventListener(`pointerleave`,this.handlePointerUp)}}});

package/dist/style.css

@@ -1,2 +1 @@
-.motion-rail::-webkit-scrollbar{display:none}.motion-rail{scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;position:relative;overflow:scroll hidden;container-type:inline-size}.motion-rail .motion-rail-container{grid-auto-flow:column;height:100%;display:grid}
-/*$vite$:1*/
+[data-motion-rail-scrollable]::-webkit-scrollbar{display:none}[data-motion-rail]{position:relative}[data-motion-rail] [data-motion-rail-scrollable]{anchor-name:--motionrail-scrollable;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;cursor:grab;position:relative;overflow:scroll hidden;container-type:inline-size}[data-motion-rail] [data-motion-rail-scrollable]:active{cursor:grabbing}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]{grid-auto-flow:column;height:100%;display:grid}[data-motion-rail] [data-motion-rail-scrollable] [data-motion-rail-grid]>*{pointer-events:none;scroll-snap-align:start}

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "motionrail",
-  "version": "0.0.3",
+  "version": "0.1.0",
   "type": "module",
-  "main": "./dist/motionrail.umd.cjs",
   "module": "./dist/motionrail.js",
   "types": "./dist/motionrail.d.ts",
   "exports": {
@@ -11,6 +10,29 @@
       "require": "./dist/motionrail.umd.cjs",
       "types": "./dist/motionrail.d.ts"
     },
+    "./extensions/arrows": {
+      "import": "./dist/extensions/arrows.js",
+      "require": "./dist/extensions/arrows.umd.cjs",
+      "types": "./dist/extensions/arrows/main.d.ts"
+    },
+    "./extensions/arrows/style.css": "./dist/extensions/arrows/style.css",
+    "./extensions/dots": {
+      "import": "./dist/extensions/dots.js",
+      "require": "./dist/extensions/dots.umd.cjs",
+      "types": "./dist/extensions/dots/main.d.ts"
+    },
+    "./extensions/dots/style.css": "./dist/extensions/dots/style.css",
+    "./extensions/thumbnails": {
+      "import": "./dist/extensions/thumbnails.js",
+      "require": "./dist/extensions/thumbnails.umd.cjs",
+      "types": "./dist/extensions/thumbnails.d.ts"
+    },
+    "./extensions/thumbnails/style.css": "./dist/extensions/thumbnails/style.css",
+    "./extensions/logger": {
+      "import": "./dist/extensions/logger.js",
+      "require": "./dist/extensions/logger.umd.cjs",
+      "types": "./dist/extensions/logger.d.ts"
+    },
     "./style.css": "./dist/style.css"
   },
   "files": [
@@ -22,7 +44,14 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build && tsc",
+    "build": "npm run build:es && npm run build:umd",
+    "build:es": "vite build && tsc",
+    "build:umd": "npm run build:umd:main && npm run build:umd:arrows && npm run build:umd:dots && npm run build:umd:thumbnails && npm run build:umd:logger",
+    "build:umd:main": "BUILD_UMD=true ENTRY_PATH=src/motionrail.ts LIB_NAME=MotionRail FILE_NAME=motionrail.umd vite build",
+    "build:umd:arrows": "BUILD_UMD=true ENTRY_PATH=src/extensions/arrows/main.ts LIB_NAME=MotionRailArrows FILE_NAME=extensions/arrows.umd vite build",
+    "build:umd:dots": "BUILD_UMD=true ENTRY_PATH=src/extensions/dots/main.ts LIB_NAME=MotionRailDots FILE_NAME=extensions/dots.umd vite build",
+    "build:umd:thumbnails": "BUILD_UMD=true ENTRY_PATH=src/extensions/thumbnails/main.ts LIB_NAME=MotionRailThumbnails FILE_NAME=extensions/thumbnails.umd vite build",
+    "build:umd:logger": "BUILD_UMD=true ENTRY_PATH=src/extensions/logger.ts LIB_NAME=MotionRailLogger FILE_NAME=extensions/logger.umd vite build",
     "preview": "vite preview",
     "prepare": "husky"
   },

package/dist/lib/utils.d.ts

@@ -1,7 +0,0 @@
-import type { MotionRailBreakpoint } from "./types";
-export declare function randomContainerName(): string;
-export declare function setBreakPoints(par: {
-    container: HTMLElement;
-    breakpoints: MotionRailBreakpoint[];
-    length: number;
-}): HTMLStyleElement | undefined;