@ailuracode/alpine-carousel 0.1.0 → 2.0.0

package/README.md

@@ -5,14 +5,14 @@ Headless accessible carousel store for Alpine.js, powered by [Embla Carousel](ht
 ## Install
 
 ```bash
-npm install @ailuracode/alpine-carousel alpinejs
+pnpm add @ailuracode/alpine-carousel @ailuracode/alpine-core alpinejs
 ```
 
 Peer dependencies: `embla-carousel` and `embla-carousel-autoplay` are bundled as direct dependencies.
 
-## Setup
+## Quick start
 
-```js
+```ts
 import Alpine from "alpinejs";
 import carousel from "@ailuracode/alpine-carousel";
 
@@ -34,8 +34,8 @@ Alpine.start();
   <section x-bind="$store.carousel.carouselProps('gallery', { label: 'Featured gallery' })">
     <div x-ref="viewport" x-bind="$store.carousel.viewportProps('gallery')" class="min-w-0 w-full overflow-hidden">
       <div class="flex touch-pan-y pinch-zoom">
-        <div class="min-w-0 shrink-0 grow-0 [flex:0_0_var(--slide-size,100%)]" x-bind="$store.carousel.slideProps('gallery', 0)">Slide 1</div>
-        <div class="min-w-0 shrink-0 grow-0 [flex:0_0_var(--slide-size,100%)]" x-bind="$store.carousel.slideProps('gallery', 1)">Slide 2</div>
+        <div class="min-w-0 shrink-0 grow-0 flex-[0_0_var(--slide-size,100%)]" x-bind="$store.carousel.slideProps('gallery', 0)">Slide 1</div>
+        <div class="min-w-0 shrink-0 grow-0 flex-[0_0_var(--slide-size,100%)]" x-bind="$store.carousel.slideProps('gallery', 1)">Slide 2</div>
       </div>
     </div>
 
@@ -59,7 +59,6 @@ Embla expects the **viewport** element (overflow hidden) with a **container** ch
 | `current(id)` / `count(id)` | Current index and total slides |
 | `canNext(id)` / `canPrevious(id)` | Scroll availability |
 | `play(id)` / `pause(id)` / `isPlaying(id)` | Autoplay controls |
-| `instance(id)` | Raw Embla API (advanced) |
 | `handleKeydown(id, event)` | Arrow keys, Home, End |
 | `carouselProps(id, options?)` | ARIA region props |
 | `viewportProps(id, options?)` | Focusable viewport props; sets `--slide-size` (default `100%`, pass `{ slideSize: false }` to use CSS classes instead) |
@@ -68,12 +67,64 @@ Embla expects the **viewport** element (overflow hidden) with a **container** ch
 
 ### Reactive state
 
-Each instance in `$store.carousel.instances[id]` exposes:
+Each entry in `$store.carousel.instances[id]` is a **reactive mirror** of controller state (updated on `change` and `slideChange`). Use store commands to mutate; direct writes to `instances[id]` do not affect the controller.
+
+Exposed fields:
 
 - `currentIndex`, `totalSlides`, `progress`
 - `isFirst`, `isLast`, `isPlaying`
 - `canNext`, `canPrevious`, `slidesInView`
 
+## Standalone usage (no Alpine)
+
+```ts
+import {
+  createCarouselController,
+  createCarouselStore,
+  createCarouselStoreFromController,
+} from "@ailuracode/alpine-carousel";
+
+const controller = createCarouselController();
+controller.create("gallery", { loop: true });
+controller.current("gallery"); // 0
+
+const store = createCarouselStore();
+// or: createCarouselStoreFromController(controller)
+```
+
+| Controller API | Description |
+|----------------|-------------|
+| `hasInstance(id)` | Whether a carousel id is registered |
+| `snapshotInstances()` | Shallow readonly copies for adapter sync |
+| `current(id)` / `count(id)` / `isPlaying(id)` | Query methods |
+
+Subscribe to `controller.on("change", …)` and `controller.on("slideChange", …)` for adapter sync.
+
+## Architecture
+
+`CarouselController` owns all mutable state and the Embla instances. The Alpine plugin mirrors snapshots into `$store.carousel.instances`.
+
+## Migration
+
+| Removed / changed | Replacement |
+|-------------------|-------------|
+| `controller.instances` getter | `snapshotInstances()` or `hasInstance(id)` |
+| `controller.toStore()` | `createCarouselStore()` or `createCarouselStoreFromController(controller)` |
+| `$store.carousel.instance(id)` | `goTo(id, index)`, `next(id)`, `previous(id)`, and other semantic store methods |
+| `CarouselInstance.embla` / `.autoplay` / `.viewport` on snapshots | Use semantic store methods and readonly snapshot fields |
+| `CarouselOptions.align` / `.containScroll` typed via Embla | Toolkit-owned `CarouselAlign` and `CarouselContainScroll` types |
+| (none) | `storeKey` — see [Avoiding name collisions](#avoiding-name-collisions) |
+
+### Avoiding name collisions
+
+If your application already owns a `$store.carousel` — or another toolkit plugin registers on that name — rename the integration surface without touching the controller:
+
+```ts
+Alpine.plugin(carouselPlugin({ storeKey: "slider" })); // → $store.slider
+```
+
+The exposed constant `DEFAULT_CAROUSEL_STORE_KEY` keeps the rename discoverable from TypeScript.
+
 ## Options
 
 | Option | Default | Maps to Embla |

package/dist/global.d.ts

@@ -1,57 +1,20 @@
 /// <reference types="@types/alpinejs" />
 
-export type CarouselAutoplayOptions = {
-  delay?: number;
-  stopOnInteraction?: boolean;
-  stopOnMouseEnter?: boolean;
-  stopOnFocusIn?: boolean;
-  stopWhenHidden?: boolean;
-};
+import type { CarouselStore } from "./types";
 
-export type CarouselOptions = {
-  loop?: boolean;
-  autoplay?: boolean;
-  autoplayOptions?: CarouselAutoplayOptions;
-  axis?: "x" | "y";
-  align?: import("embla-carousel").EmblaOptionsType["align"];
-  containScroll?: import("embla-carousel").EmblaOptionsType["containScroll"];
-  dragFree?: boolean;
-  duration?: number;
-  ariaLive?: "off" | "polite" | "assertive";
-  onChange?: (index: number) => void;
-};
+export { CarouselController, createCarouselController, createCarouselStore } from "./controller";
+export type { CarouselEvents, CarouselSlideChangeDetail } from "./events";
+export type {
+  CarouselAlign,
+  CarouselAutoplayOptions,
+  CarouselContainScroll,
+  CarouselInstance,
+  CarouselOptions,
+  CarouselStore,
+  CreateCarouselOptions,
+} from "./types";
 
-export interface CarouselStore {
-  instances: Record<string, import("./store.js").CarouselInstance>;
-  create(id: string, options?: CarouselOptions): void;
-  destroy(id: string): void;
-  bindViewport(id: string, viewport: HTMLElement | null): void;
-  next(id: string): void;
-  previous(id: string): void;
-  goTo(id: string, index: number): void;
-  current(id: string): number;
-  count(id: string): number;
-  canNext(id: string): boolean;
-  canPrevious(id: string): boolean;
-  play(id: string): void;
-  pause(id: string): void;
-  isPlaying(id: string): boolean;
-  instance(id: string): import("embla-carousel").EmblaCarouselType | null;
-  handleKeydown(id: string, event: KeyboardEvent): void;
-  carouselProps(
-    id: string,
-    options?: { label?: string }
-  ): Record<string, string | boolean | undefined>;
-  viewportProps(
-    id: string,
-    options?: { slideSize?: string | false }
-  ): Record<string, string | number | boolean | undefined>;
-  slideProps(id: string, index: number): Record<string, string | boolean | undefined>;
-  indicatorProps(id: string, index: number): Record<string, string | boolean | undefined>;
-  destroyAll(): void;
-}
-
-export function createCarouselStore(): CarouselStore;
+export function createCarouselController(id?: string): import("./types").CarouselStore;
 
 export default function carouselPlugin(): import("alpinejs").PluginCallback;
 

package/dist/index.d.ts

@@ -1,7 +1,43 @@
-import AlpineType from 'alpinejs';
-import { EmblaOptionsType, EmblaCarouselType } from 'embla-carousel';
-import { AutoplayType } from 'embla-carousel-autoplay';
+import { Alpine, PluginCallback, BaseController } from '@ailuracode/alpine-core';
+export { Unsubscribe } from '@ailuracode/alpine-core';
+import { Alpine as Alpine$1 } from 'alpinejs';
 
+/**
+ * Strongly-typed event map for the carousel controller.
+ */
+/**
+ * Detail payload for the `slideChange` event.
+ */
+interface CarouselSlideChangeDetail {
+    readonly carouselId: string;
+    readonly index: number;
+    readonly totalSlides: number;
+}
+/** Detail payload for the `change` event (adapter sync). */
+interface CarouselChangeDetail {
+    readonly carouselId?: string;
+}
+/**
+ * Event map for carousel state changes. Emits `slideChange` on
+ * every slide transition and `change` when instance state updates.
+ */
+interface CarouselEvents extends Record<string, unknown> {
+    slideChange: CarouselSlideChangeDetail;
+    change: CarouselChangeDetail;
+}
+
+/**
+ * Public type contracts for `@ailuracode/alpine-carousel`.
+ *
+ * Every public type lives in a `types.ts` module so consumers can import
+ * them without pulling the implementation. The shape IS the contract.
+ */
+
+/** Slide alignment within the viewport. */
+type CarouselAlign = "start" | "center" | "end" | ((viewSize: number, snapSize: number, index: number) => number);
+/** Scroll containment behavior at the start and end of the carousel. */
+type CarouselContainScroll = "trimSnaps" | "keepSnaps" | false;
+/** Autoplay configuration options. */
 type CarouselAutoplayOptions = {
     delay?: number;
     stopOnInteraction?: boolean;
@@ -9,18 +45,20 @@ type CarouselAutoplayOptions = {
     stopOnFocusIn?: boolean;
     stopWhenHidden?: boolean;
 };
+/** Options passed when creating a carousel instance. */
 type CarouselOptions = {
     loop?: boolean;
     autoplay?: boolean;
     autoplayOptions?: CarouselAutoplayOptions;
     axis?: "x" | "y";
-    align?: EmblaOptionsType["align"];
-    containScroll?: EmblaOptionsType["containScroll"];
+    align?: CarouselAlign;
+    containScroll?: CarouselContainScroll;
     dragFree?: boolean;
     duration?: number;
     ariaLive?: "off" | "polite" | "assertive";
     onChange?: (index: number) => void;
 };
+/** Readonly snapshot of carousel state exposed through stores and adapters. */
 type CarouselInstance = {
     currentIndex: number;
     totalSlides: number;
@@ -33,10 +71,8 @@ type CarouselInstance = {
     slidesInView: number[];
     options: CarouselOptions;
     ariaLive: "off" | "polite" | "assertive";
-    viewport: HTMLElement | null;
-    embla: EmblaCarouselType | null;
-    autoplay: AutoplayType | null;
 };
+/** Alpine-facing store surface. */
 type CarouselStore = {
     instances: Record<string, CarouselInstance>;
     create(id: string, options?: CarouselOptions): void;
@@ -52,7 +88,6 @@ type CarouselStore = {
     play(id: string): void;
     pause(id: string): void;
     isPlaying(id: string): boolean;
-    instance(id: string): EmblaCarouselType | null;
     handleKeydown(id: string, event: KeyboardEvent): void;
     carouselProps(id: string, options?: {
         label?: string;
@@ -64,20 +99,109 @@ type CarouselStore = {
     indicatorProps(id: string, index: number): Record<string, string | boolean | undefined>;
     destroyAll(): void;
 };
-/** Creates the headless carousel store powered by Embla Carousel. */
-declare function createCarouselStore(): CarouselStore;
+/** Options accepted by the carousel plugin factory. */
+interface CreateCarouselOptions {
+    readonly id?: string;
+    /**
+     * `$store.carousel` store key the Alpine plugin registers under.
+     * Defaults to {@link DEFAULT_CAROUSEL_STORE_KEY}. Set when the
+     * host already owns a `carousel` store or another toolkit plugin
+     * would collide on that name — the rename avoids the collision
+     * without touching the controller.
+     */
+    readonly storeKey?: string;
+}
+/** Default `$store.carousel` key registered by {@link carouselPlugin}. */
+declare const DEFAULT_CAROUSEL_STORE_KEY = "carousel";
+/** Typed view of `Alpine` the carousel plugin uses internally. */
+type CarouselAlpine = Alpine<{
+    carousel: CarouselStore;
+}> & {
+    cleanup?(callback: () => void): void;
+};
+/** `Alpine.plugin()` callback signature. */
+type CarouselPluginCallback = PluginCallback<Alpine$1>;
+
+/**
+ * Carousel controller — the framework-agnostic core of
+ * `@ailuracode/alpine-carousel`. Manages a registry of carousel
+ * instances powered by Embla Carousel, with autoplay, resize
+ * observation, and visibility handling.
+ *
+ * Emits a typed `slideChange` event on every slide transition so
+ * consumers can react programmatically.
+ */
 
-/** Alpine.js carousel plugin. Registers `$store.carousel`. */
-declare function carouselPlugin(): AlpineType.PluginCallback;
-declare global {
-    namespace Alpine {
-        interface Stores {
-            carousel: CarouselStore;
-        }
-        interface Magics<T> {
-            $carousel: CarouselStore;
-        }
-    }
+/**
+ * Headless carousel controller. Manages a registry of carousel
+ * instances powered by Embla Carousel.
+ */
+declare class CarouselController extends BaseController<CarouselEvents> {
+    #private;
+    constructor(id?: string);
+    /** Whether a carousel instance is registered. */
+    hasInstance(id: string): boolean;
+    /**
+     * Returns a shallow snapshot of all instances for adapter sync.
+     * Mutating the returned objects does not affect controller state.
+     */
+    snapshotInstances(): Record<string, CarouselInstance>;
+    create(id: string, options?: CarouselOptions): void;
+    /** Destroy a single carousel instance by id. */
+    destroy(id: string): void;
+    /** Destroy all instances and the controller itself. */
+    destroy(): void;
+    bindViewport(id: string, viewport: HTMLElement | null): void;
+    next(id: string): void;
+    previous(id: string): void;
+    goTo(id: string, index: number): void;
+    current(id: string): number;
+    count(id: string): number;
+    canNext(id: string): boolean;
+    canPrevious(id: string): boolean;
+    play(id: string): void;
+    pause(id: string): void;
+    isPlaying(id: string): boolean;
+    handleKeydown(id: string, event: KeyboardEvent): void;
+    carouselProps(id: string, options?: {
+        label?: string;
+    }): Record<string, string | boolean | undefined>;
+    viewportProps(_id: string, options?: {
+        slideSize?: string | false;
+    }): Record<string, string | number | boolean | undefined>;
+    slideProps(id: string, index: number): Record<string, string | boolean | undefined>;
+    indicatorProps(id: string, index: number): Record<string, string | boolean | undefined>;
+    destroyAll(): void;
 }
+/**
+ * Creates a CarouselController and returns the controller instance.
+ * Convenience for non-Alpine consumers.
+ */
+declare function createCarouselController(id?: string): CarouselController;
+
+/**
+ * Alpine.js integration for `@ailuracode/alpine-carousel`.
+ *
+ * Thin adapter that wires {@link CarouselController} into
+ * `$store.carousel` and the `$carousel` magic.
+ */
+
+/**
+ * Plugin factory — returns the `Alpine.plugin()` callback. Pass
+ * {@link CreateCarouselOptions} to configure the controller,
+ * or `{}` for the package defaults.
+ */
+declare function carouselPlugin(options?: CreateCarouselOptions): CarouselPluginCallback;
+/** Builds typed carousel plugin options. */
+declare function carouselOptions<const T extends CreateCarouselOptions>(options: T): T;
+
+/**
+ * Store factory for `@ailuracode/alpine-carousel`.
+ */
+
+/** Builds a {@link CarouselStore} backed by a new {@link CarouselController}. */
+declare function createCarouselStore(): CarouselStore;
+/** Builds a {@link CarouselStore} that mirrors the given controller. */
+declare function createCarouselStoreFromController(controller: CarouselController): CarouselStore;
 
-export { type CarouselAutoplayOptions, type CarouselInstance, type CarouselOptions, type CarouselStore, createCarouselStore, carouselPlugin as default };
+export { type CarouselAlign, type CarouselAlpine, type CarouselAutoplayOptions, type CarouselChangeDetail, type CarouselContainScroll, CarouselController, type CarouselEvents, type CarouselInstance, type CarouselOptions, type CarouselPluginCallback, type CarouselSlideChangeDetail, type CarouselStore, type CreateCarouselOptions, DEFAULT_CAROUSEL_STORE_KEY, carouselOptions, carouselPlugin, createCarouselController, createCarouselStore, createCarouselStoreFromController, carouselPlugin as default };

package/dist/index.js

@@ -1,312 +1 @@
-// src/store.ts
-import EmblaCarousel from "embla-carousel";
-import Autoplay from "embla-carousel-autoplay";
-function createInstance(options = {}) {
-  return {
-    currentIndex: 0,
-    totalSlides: 0,
-    progress: 0,
-    isFirst: true,
-    isLast: false,
-    isPlaying: false,
-    canNext: false,
-    canPrevious: false,
-    slidesInView: [],
-    options,
-    ariaLive: options.ariaLive ?? "polite",
-    viewport: null,
-    embla: null,
-    autoplay: null
-  };
-}
-function toEmblaOptions(options) {
-  return {
-    loop: options.loop ?? false,
-    axis: options.axis ?? "x",
-    align: options.align ?? "start",
-    containScroll: options.containScroll ?? "trimSnaps",
-    dragFree: options.dragFree ?? false,
-    duration: options.duration ?? 25
-  };
-}
-function createAutoplayPlugin(options) {
-  if (!options.autoplay) {
-    return null;
-  }
-  const autoplayOptions = options.autoplayOptions ?? {};
-  const stopOnMouseEnter = autoplayOptions.stopOnMouseEnter ?? false;
-  const stopOnInteraction = autoplayOptions.stopOnInteraction ?? !stopOnMouseEnter;
-  return Autoplay({
-    delay: autoplayOptions.delay ?? 4e3,
-    stopOnInteraction,
-    stopOnMouseEnter,
-    stopOnFocusIn: autoplayOptions.stopOnFocusIn ?? true,
-    playOnInit: true
-  });
-}
-function syncFromEmbla(store, id) {
-  const instance = store.instances[id];
-  const embla = instance?.embla;
-  if (!(instance && embla)) {
-    return;
-  }
-  const previousIndex = instance.currentIndex;
-  instance.currentIndex = embla.selectedScrollSnap();
-  instance.totalSlides = embla.scrollSnapList().length;
-  instance.progress = embla.scrollProgress();
-  instance.canNext = embla.canScrollNext();
-  instance.canPrevious = embla.canScrollPrev();
-  instance.slidesInView = embla.slidesInView();
-  instance.isFirst = instance.currentIndex === 0;
-  instance.isLast = instance.totalSlides > 0 && instance.currentIndex === instance.totalSlides - 1;
-  instance.isPlaying = instance.autoplay?.isPlaying() ?? false;
-  if (previousIndex !== instance.currentIndex) {
-    instance.options.onChange?.(instance.currentIndex);
-  }
-}
-function destroyEmbla(instance, id, cleanups) {
-  cleanups.get(id)?.();
-  cleanups.delete(id);
-  instance.embla?.destroy();
-  instance.embla = null;
-  instance.autoplay = null;
-  instance.viewport = null;
-}
-function addCleanup(id, cleanups, cleanup) {
-  const previous = cleanups.get(id);
-  cleanups.set(id, () => {
-    previous?.();
-    cleanup();
-  });
-}
-function setupVisibilityAutoplay(id, instance, cleanups) {
-  const stopWhenHidden = instance.options.autoplayOptions?.stopWhenHidden ?? true;
-  if (!(instance.options.autoplay && stopWhenHidden)) {
-    return;
-  }
-  const onVisibilityChange = () => {
-    if (document.hidden) {
-      instance.autoplay?.stop();
-    } else {
-      instance.autoplay?.play();
-    }
-    instance.isPlaying = instance.autoplay?.isPlaying() ?? false;
-  };
-  document.addEventListener("visibilitychange", onVisibilityChange);
-  addCleanup(
-    id,
-    cleanups,
-    () => document.removeEventListener("visibilitychange", onVisibilityChange)
-  );
-}
-function setupResizeObserver(viewport, store, id, cleanups) {
-  if (typeof ResizeObserver === "undefined") {
-    return;
-  }
-  const observer = new ResizeObserver(() => {
-    store.instances[id]?.embla?.reInit();
-    syncFromEmbla(store, id);
-  });
-  observer.observe(viewport);
-  addCleanup(id, cleanups, () => observer.disconnect());
-}
-function getOrCreate(store, id, options) {
-  if (!store.instances[id]) {
-    store.instances[id] = createInstance(options);
-  } else if (options) {
-    store.instances[id].options = { ...store.instances[id].options, ...options };
-    store.instances[id].ariaLive = options.ariaLive ?? store.instances[id].ariaLive;
-  }
-  return store.instances[id];
-}
-function initEmbla(store, id, viewport, cleanups) {
-  const instance = store.instances[id];
-  if (!instance) {
-    return;
-  }
-  destroyEmbla(instance, id, cleanups);
-  instance.viewport = viewport;
-  const plugins = [];
-  const autoplay = createAutoplayPlugin(instance.options);
-  if (autoplay) {
-    plugins.push(autoplay);
-    instance.autoplay = autoplay;
-  }
-  const embla = EmblaCarousel(viewport, toEmblaOptions(instance.options), plugins);
-  instance.embla = embla;
-  const sync = () => syncFromEmbla(store, id);
-  embla.on("select", sync);
-  embla.on("scroll", sync);
-  embla.on("reInit", sync);
-  embla.on("autoplay:play", sync);
-  embla.on("autoplay:stop", sync);
-  sync();
-  setupResizeObserver(viewport, store, id, cleanups);
-  setupVisibilityAutoplay(id, instance, cleanups);
-  if (typeof requestAnimationFrame !== "undefined") {
-    requestAnimationFrame(() => {
-      instance.embla?.reInit();
-      syncFromEmbla(store, id);
-    });
-  }
-}
-function createCarouselStore() {
-  const cleanups = /* @__PURE__ */ new Map();
-  const store = {
-    instances: {},
-    create(id, options = {}) {
-      getOrCreate(this, id, options);
-    },
-    destroy(id) {
-      const instance = this.instances[id];
-      if (!instance) {
-        return;
-      }
-      destroyEmbla(instance, id, cleanups);
-      delete this.instances[id];
-    },
-    bindViewport(id, viewport) {
-      if (typeof window === "undefined" || typeof document === "undefined") {
-        return;
-      }
-      if (!viewport) {
-        const instance = this.instances[id];
-        if (instance) {
-          destroyEmbla(instance, id, cleanups);
-        }
-        return;
-      }
-      getOrCreate(this, id);
-      initEmbla(this, id, viewport, cleanups);
-    },
-    next(id) {
-      this.instances[id]?.embla?.scrollNext();
-    },
-    previous(id) {
-      this.instances[id]?.embla?.scrollPrev();
-    },
-    goTo(id, index) {
-      this.instances[id]?.embla?.scrollTo(index);
-    },
-    current(id) {
-      return this.instances[id]?.currentIndex ?? 0;
-    },
-    count(id) {
-      return this.instances[id]?.totalSlides ?? 0;
-    },
-    canNext(id) {
-      return this.instances[id]?.canNext ?? false;
-    },
-    canPrevious(id) {
-      return this.instances[id]?.canPrevious ?? false;
-    },
-    play(id) {
-      this.instances[id]?.autoplay?.play();
-      const instance = this.instances[id];
-      if (instance) {
-        instance.isPlaying = instance.autoplay?.isPlaying() ?? false;
-      }
-    },
-    pause(id) {
-      this.instances[id]?.autoplay?.stop();
-      const instance = this.instances[id];
-      if (instance) {
-        instance.isPlaying = instance.autoplay?.isPlaying() ?? false;
-      }
-    },
-    isPlaying(id) {
-      return this.instances[id]?.isPlaying ?? false;
-    },
-    instance(id) {
-      return this.instances[id]?.embla ?? null;
-    },
-    handleKeydown(id, event) {
-      const instance = this.instances[id];
-      if (!instance?.embla) {
-        return;
-      }
-      switch (event.key) {
-        case "ArrowLeft":
-        case "ArrowUp":
-          event.preventDefault();
-          this.previous(id);
-          break;
-        case "ArrowRight":
-        case "ArrowDown":
-          event.preventDefault();
-          this.next(id);
-          break;
-        case "Home":
-          event.preventDefault();
-          this.goTo(id, 0);
-          break;
-        case "End": {
-          event.preventDefault();
-          const last = this.count(id) - 1;
-          if (last >= 0) {
-            this.goTo(id, last);
-          }
-          break;
-        }
-        default:
-          break;
-      }
-    },
-    carouselProps(id, options = {}) {
-      const instance = this.instances[id];
-      return {
-        role: "region",
-        "aria-roledescription": "carousel",
-        "aria-live": instance?.ariaLive ?? "polite",
-        "aria-label": options.label
-      };
-    },
-    viewportProps(_id, options = {}) {
-      const props = {
-        tabindex: 0
-      };
-      if (options.slideSize !== false) {
-        props.style = `--slide-size: ${options.slideSize ?? "100%"}`;
-      }
-      return props;
-    },
-    slideProps(id, index) {
-      const current = this.current(id);
-      const total = this.count(id);
-      return {
-        role: "group",
-        "aria-roledescription": "slide",
-        "aria-label": `${index + 1} of ${total}`,
-        "aria-hidden": current !== index ? true : void 0
-      };
-    },
-    indicatorProps(id, index) {
-      const selected = this.current(id) === index;
-      return {
-        type: "button",
-        "aria-label": `Go to slide ${index + 1}`,
-        "aria-current": selected ? "true" : void 0
-      };
-    },
-    destroyAll() {
-      for (const id of Object.keys(this.instances)) {
-        this.destroy(id);
-      }
-    }
-  };
-  return store;
-}
-
-// src/index.ts
-function carouselPlugin() {
-  return function registerCarousel(Alpine) {
-    const store = createCarouselStore();
-    Alpine.store("carousel", store);
-    Alpine.magic("carousel", () => Alpine.store("carousel"));
-  };
-}
-export {
-  createCarouselStore,
-  carouselPlugin as default
-};
-//# sourceMappingURL=index.js.map
+import{BaseController as C,generateId as m}from"@ailuracode/alpine-core";import h from"embla-carousel";import v from"embla-carousel-autoplay";function x(s={}){return{currentIndex:0,totalSlides:0,progress:0,isFirst:!0,isLast:!1,isPlaying:!1,canNext:!1,canPrevious:!1,slidesInView:[],options:s,ariaLive:s.ariaLive??"polite",viewport:null,embla:null,autoplay:null}}function I(s){return{loop:s.loop??!1,axis:s.axis??"x",align:s.align??"start",containScroll:s.containScroll??"trimSnaps",dragFree:s.dragFree??!1,duration:s.duration??25}}function P(s){if(!s.autoplay)return null;let e=s.autoplayOptions??{},n=e.stopOnMouseEnter??!1,r=e.stopOnInteraction??!n;return v({delay:e.delay??4e3,stopOnInteraction:r,stopOnMouseEnter:n,stopOnFocusIn:e.stopOnFocusIn??!0,playOnInit:!0})}function O(s){return{currentIndex:s.currentIndex,totalSlides:s.totalSlides,progress:s.progress,isFirst:s.isFirst,isLast:s.isLast,isPlaying:s.isPlaying,canNext:s.canNext,canPrevious:s.canPrevious,slidesInView:[...s.slidesInView],options:{...s.options},ariaLive:s.ariaLive}}var u=class extends C{#e={};#s=new Map;constructor(e){super(e??m("carousel"))}hasInstance(e){return e in this.#e}snapshotInstances(){let e={};for(let[n,r]of Object.entries(this.#e))e[n]=O(r);return e}create(e,n={}){this.isDestroyed||(this.#o(e,n),this.#n(e))}destroy(e){if(e!==void 0){if(this.isDestroyed||!this.#e[e])return;this.#r(e),delete this.#e[e],this.#n(e)}else this.destroyAll(),super.destroy()}bindViewport(e,n){if(!this.isDestroyed&&!(typeof window>"u"||typeof document>"u")){if(!n){this.#e[e]&&this.#r(e);return}this.#o(e),this.#u(e,n),this.#n(e)}}next(e){this.#e[e]?.embla?.scrollNext()}previous(e){this.#e[e]?.embla?.scrollPrev()}goTo(e,n){this.#e[e]?.embla?.scrollTo(n)}current(e){return this.#e[e]?.currentIndex??0}count(e){return this.#e[e]?.totalSlides??0}canNext(e){return this.#e[e]?.canNext??!1}canPrevious(e){return this.#e[e]?.canPrevious??!1}play(e){this.#e[e]?.autoplay?.play();let n=this.#e[e];n&&(n.isPlaying=n.autoplay?.isPlaying()??!1,this.#n(e))}pause(e){this.#e[e]?.autoplay?.stop();let n=this.#e[e];n&&(n.isPlaying=n.autoplay?.isPlaying()??!1,this.#n(e))}isPlaying(e){return this.#e[e]?.isPlaying??!1}handleKeydown(e,n){if(this.#e[e]?.embla)switch(n.key){case"ArrowLeft":case"ArrowUp":n.preventDefault(),this.previous(e);break;case"ArrowRight":case"ArrowDown":n.preventDefault(),this.next(e);break;case"Home":n.preventDefault(),this.goTo(e,0);break;case"End":{n.preventDefault();let t=this.count(e)-1;t>=0&&this.goTo(e,t);break}default:break}}carouselProps(e,n={}){return{role:"region","aria-roledescription":"carousel","aria-live":this.#e[e]?.ariaLive??"polite","aria-label":n.label}}viewportProps(e,n={}){let r={tabindex:0};return n.slideSize!==!1&&(r.style=`--slide-size: ${n.slideSize??"100%"}`),r}slideProps(e,n){let r=this.current(e),t=this.count(e);return{role:"group","aria-roledescription":"slide","aria-label":`${n+1} of ${t}`,"aria-hidden":r!==n?!0:void 0}}indicatorProps(e,n){let r=this.current(e)===n;return{type:"button","aria-label":`Go to slide ${n+1}`,"aria-current":r?"true":void 0}}destroyAll(){for(let e of Object.keys(this.#e))this.destroy(e);this.#n()}#n(e){this.emit("change",{carouselId:e})}#o(e,n){return this.#e[e]?n&&(this.#e[e].options={...this.#e[e].options,...n},this.#e[e].ariaLive=n.ariaLive??this.#e[e].ariaLive):this.#e[e]=x(n),this.#e[e]}#t(e){let n=this.#e[e],r=n?.embla;if(!(n&&r))return;let t=n.currentIndex;n.currentIndex=r.selectedScrollSnap(),n.totalSlides=r.scrollSnapList().length,n.progress=r.scrollProgress(),n.canNext=r.canScrollNext(),n.canPrevious=r.canScrollPrev(),n.slidesInView=r.slidesInView(),n.isFirst=n.currentIndex===0,n.isLast=n.totalSlides>0&&n.currentIndex===n.totalSlides-1,n.isPlaying=n.autoplay?.isPlaying()??!1,t!==n.currentIndex&&(this.emit("slideChange",{carouselId:e,index:n.currentIndex,totalSlides:n.totalSlides}),n.options.onChange?.(n.currentIndex)),this.#n(e)}#r(e){this.#s.get(e)?.(),this.#s.delete(e);let n=this.#e[e];n?.embla?.destroy(),n&&(n.embla=null,n.autoplay=null,n.viewport=null)}#i(e,n){let r=this.#s.get(e);this.#s.set(e,()=>{r?.(),n()})}#a(e,n){let r=n.options.autoplayOptions?.stopWhenHidden??!0;if(!(n.options.autoplay&&r))return;let t=()=>{document.hidden?n.autoplay?.stop():n.autoplay?.play(),n.isPlaying=n.autoplay?.isPlaying()??!1};document.addEventListener("visibilitychange",t),this.#i(e,()=>document.removeEventListener("visibilitychange",t))}#l(e,n){if(typeof ResizeObserver>"u")return;let r=new ResizeObserver(()=>{this.#e[e]?.embla?.reInit(),this.#t(e)});r.observe(n),this.#i(e,()=>r.disconnect())}#u(e,n){let r=this.#e[e];if(!r)return;this.#r(e),r.viewport=n;let t=[],o=P(r.options);o&&(t.push(o),r.autoplay=o);let i=h(n,I(r.options),t);r.embla=i;let l=()=>this.#t(e);i.on("select",l),i.on("scroll",l),i.on("reInit",l),i.on("autoplay:play",l),i.on("autoplay:stop",l),l(),this.#l(e,n),this.#a(e,r),typeof requestAnimationFrame<"u"&&requestAnimationFrame(()=>{r.embla?.reInit(),this.#t(e)})}};function A(s){return new u(s)}import{bridgeControllerStore as R,syncRecordFromSnapshot as T}from"@ailuracode/alpine-core";import{syncRecordFromSnapshot as S}from"@ailuracode/alpine-core";function E(s,e){w(s,e.snapshotInstances())}function w(s,e){S(s,e)}function L(){return c(new u)}function c(s){let e={},n=()=>{E(e,s)},r={instances:e,create:(t,o)=>{s.create(t,o),n()},destroy:t=>{s.destroy(t),n()},bindViewport:(t,o)=>{s.bindViewport(t,o),n()},next:t=>{s.next(t)},previous:t=>{s.previous(t)},goTo:(t,o)=>{s.goTo(t,o)},current:t=>s.current(t),count:t=>s.count(t),canNext:t=>s.canNext(t),canPrevious:t=>s.canPrevious(t),play:t=>{s.play(t),n()},pause:t=>{s.pause(t),n()},isPlaying:t=>s.isPlaying(t),handleKeydown:(t,o)=>s.handleKeydown(t,o),carouselProps:(t,o)=>s.carouselProps(t,o),viewportProps:(t,o)=>s.viewportProps(t,o),slideProps:(t,o)=>s.slideProps(t,o),indicatorProps:(t,o)=>s.indicatorProps(t,o),destroyAll:()=>{s.destroyAll(),n()}};return s.on("change",n),s.on("slideChange",n),r}var g="carousel";function y(s={}){let e=s.storeKey??g;return function(r){let t=r,o=new u(s.id);R({alpine:t,storeKey:e,store:c(o),controller:o,packageName:"carousel",subscribe:i=>{i.current=a=>i.instances[a]?.currentIndex??0,i.count=a=>i.instances[a]?.totalSlides??0,i.canNext=a=>i.instances[a]?.canNext??!1,i.canPrevious=a=>i.instances[a]?.canPrevious??!1,i.isPlaying=a=>i.instances[a]?.isPlaying??!1,i.slideProps=(a,p)=>{let d=i.current(a),b=i.count(a);return{role:"group","aria-roledescription":"slide","aria-label":`${p+1} of ${b}`,"aria-hidden":d!==p?!0:void 0}},i.indicatorProps=(a,p)=>{let d=i.current(a)===p;return{type:"button","aria-label":`Go to slide ${p+1}`,"aria-current":d?"true":void 0}};let l=()=>{T(i.instances,o.snapshotInstances())},f=[o.on("change",l),o.on("slideChange",l)];return()=>{for(let a of f)a()}}})}}function F(s){return s}export{u as CarouselController,g as DEFAULT_CAROUSEL_STORE_KEY,F as carouselOptions,y as carouselPlugin,A as createCarouselController,L as createCarouselStore,c as createCarouselStoreFromController,y as default};

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@ailuracode/alpine-carousel",
-  "version": "0.1.0",
+  "version": "2.0.0",
   "description": "Alpine.js headless accessible carousel store powered by Embla Carousel",
   "type": "module",
   "license": "MIT",
   "author": "ailuracode",
+  "sideEffects": false,
   "publishConfig": {
     "access": "public"
   },
@@ -35,7 +36,13 @@
     "embla-carousel": "^8.6.0",
     "embla-carousel-autoplay": "^8.6.0"
   },
+  "devDependencies": {
+    "@types/alpinejs": "^3.13.11",
+    "alpinejs": "^3.15.12",
+    "@ailuracode/alpine-core": "0.3.0"
+  },
   "peerDependencies": {
+    "@ailuracode/alpine-core": "^0.3.0",
     "alpinejs": "^3.0.0",
     "@types/alpinejs": "^3.13.11"
   },
@@ -54,8 +61,30 @@
     "accessibility",
     "headless"
   ],
+  "toolkit": {
+    "bundleBudget": {
+      "category": "complex-feature"
+    }
+  },
+  "size-limit": [
+    {
+      "name": "full surface",
+      "path": "dist/index.js",
+      "import": "*",
+      "ignore": [
+        "alpinejs",
+        "@ailuracode/alpine-core",
+        "@types/alpinejs"
+      ],
+      "gzip": true,
+      "brotli": true,
+      "limit": "12 kB"
+    }
+  ],
   "scripts": {
-    "build": "tsup src/index.ts --format esm --dts --clean --sourcemap --out-dir dist && cp src/global.d.ts dist/global.d.ts",
-    "test": "vitest run --config ../../vitest.config.ts test"
+    "build": "tsup src/index.ts --format esm --dts --clean --out-dir dist --minify && cp src/global.d.ts dist/global.d.ts",
+    "size": "size-limit",
+    "test": "vitest run --config ../../vitest.config.ts packages/carousel",
+    "test:e2e": "playwright test --config playwright.config.ts"
   }
 }

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/store.ts","../src/index.ts"],"sourcesContent":["import EmblaCarousel, { type EmblaCarouselType, type EmblaOptionsType } from \"embla-carousel\";\nimport Autoplay, { type AutoplayType } from \"embla-carousel-autoplay\";\n\nexport type CarouselAutoplayOptions = {\n  delay?: number;\n  stopOnInteraction?: boolean;\n  stopOnMouseEnter?: boolean;\n  stopOnFocusIn?: boolean;\n  stopWhenHidden?: boolean;\n};\n\nexport type CarouselOptions = {\n  loop?: boolean;\n  autoplay?: boolean;\n  autoplayOptions?: CarouselAutoplayOptions;\n  axis?: \"x\" | \"y\";\n  align?: EmblaOptionsType[\"align\"];\n  containScroll?: EmblaOptionsType[\"containScroll\"];\n  dragFree?: boolean;\n  duration?: number;\n  ariaLive?: \"off\" | \"polite\" | \"assertive\";\n  onChange?: (index: number) => void;\n};\n\nexport type CarouselInstance = {\n  currentIndex: number;\n  totalSlides: number;\n  progress: number;\n  isFirst: boolean;\n  isLast: boolean;\n  isPlaying: boolean;\n  canNext: boolean;\n  canPrevious: boolean;\n  slidesInView: number[];\n  options: CarouselOptions;\n  ariaLive: \"off\" | \"polite\" | \"assertive\";\n  viewport: HTMLElement | null;\n  embla: EmblaCarouselType | null;\n  autoplay: AutoplayType | null;\n};\n\nexport type CarouselStore = {\n  instances: Record<string, CarouselInstance>;\n  create(id: string, options?: CarouselOptions): void;\n  destroy(id: string): void;\n  bindViewport(id: string, viewport: HTMLElement | null): void;\n  next(id: string): void;\n  previous(id: string): void;\n  goTo(id: string, index: number): void;\n  current(id: string): number;\n  count(id: string): number;\n  canNext(id: string): boolean;\n  canPrevious(id: string): boolean;\n  play(id: string): void;\n  pause(id: string): void;\n  isPlaying(id: string): boolean;\n  instance(id: string): EmblaCarouselType | null;\n  handleKeydown(id: string, event: KeyboardEvent): void;\n  carouselProps(\n    id: string,\n    options?: { label?: string }\n  ): Record<string, string | boolean | undefined>;\n  viewportProps(\n    id: string,\n    options?: { slideSize?: string | false }\n  ): Record<string, string | number | boolean | undefined>;\n  slideProps(id: string, index: number): Record<string, string | boolean | undefined>;\n  indicatorProps(id: string, index: number): Record<string, string | boolean | undefined>;\n  destroyAll(): void;\n};\n\nfunction createInstance(options: CarouselOptions = {}): CarouselInstance {\n  return {\n    currentIndex: 0,\n    totalSlides: 0,\n    progress: 0,\n    isFirst: true,\n    isLast: false,\n    isPlaying: false,\n    canNext: false,\n    canPrevious: false,\n    slidesInView: [],\n    options,\n    ariaLive: options.ariaLive ?? \"polite\",\n    viewport: null,\n    embla: null,\n    autoplay: null,\n  };\n}\n\nfunction toEmblaOptions(options: CarouselOptions): EmblaOptionsType {\n  return {\n    loop: options.loop ?? false,\n    axis: options.axis ?? \"x\",\n    align: options.align ?? \"start\",\n    containScroll: options.containScroll ?? \"trimSnaps\",\n    dragFree: options.dragFree ?? false,\n    duration: options.duration ?? 25,\n  };\n}\n\nfunction createAutoplayPlugin(options: CarouselOptions): AutoplayType | null {\n  if (!options.autoplay) {\n    return null;\n  }\n\n  const autoplayOptions = options.autoplayOptions ?? {};\n  const stopOnMouseEnter = autoplayOptions.stopOnMouseEnter ?? false;\n  const stopOnInteraction = autoplayOptions.stopOnInteraction ?? !stopOnMouseEnter;\n\n  return Autoplay({\n    delay: autoplayOptions.delay ?? 4000,\n    stopOnInteraction,\n    stopOnMouseEnter,\n    stopOnFocusIn: autoplayOptions.stopOnFocusIn ?? true,\n    playOnInit: true,\n  });\n}\n\nfunction syncFromEmbla(store: CarouselStore, id: string): void {\n  const instance = store.instances[id];\n  const embla = instance?.embla;\n  if (!(instance && embla)) {\n    return;\n  }\n\n  const previousIndex = instance.currentIndex;\n  instance.currentIndex = embla.selectedScrollSnap();\n  instance.totalSlides = embla.scrollSnapList().length;\n  instance.progress = embla.scrollProgress();\n  instance.canNext = embla.canScrollNext();\n  instance.canPrevious = embla.canScrollPrev();\n  instance.slidesInView = embla.slidesInView();\n  instance.isFirst = instance.currentIndex === 0;\n  instance.isLast = instance.totalSlides > 0 && instance.currentIndex === instance.totalSlides - 1;\n  instance.isPlaying = instance.autoplay?.isPlaying() ?? false;\n\n  if (previousIndex !== instance.currentIndex) {\n    instance.options.onChange?.(instance.currentIndex);\n  }\n}\n\nfunction destroyEmbla(\n  instance: CarouselInstance,\n  id: string,\n  cleanups: Map<string, () => void>\n): void {\n  cleanups.get(id)?.();\n  cleanups.delete(id);\n  instance.embla?.destroy();\n  instance.embla = null;\n  instance.autoplay = null;\n  instance.viewport = null;\n}\n\nfunction addCleanup(id: string, cleanups: Map<string, () => void>, cleanup: () => void): void {\n  const previous = cleanups.get(id);\n  cleanups.set(id, () => {\n    previous?.();\n    cleanup();\n  });\n}\n\nfunction setupVisibilityAutoplay(\n  id: string,\n  instance: CarouselInstance,\n  cleanups: Map<string, () => void>\n): void {\n  const stopWhenHidden = instance.options.autoplayOptions?.stopWhenHidden ?? true;\n  if (!(instance.options.autoplay && stopWhenHidden)) {\n    return;\n  }\n\n  const onVisibilityChange = () => {\n    if (document.hidden) {\n      instance.autoplay?.stop();\n    } else {\n      instance.autoplay?.play();\n    }\n    instance.isPlaying = instance.autoplay?.isPlaying() ?? false;\n  };\n\n  document.addEventListener(\"visibilitychange\", onVisibilityChange);\n  addCleanup(id, cleanups, () =>\n    document.removeEventListener(\"visibilitychange\", onVisibilityChange)\n  );\n}\n\nfunction setupResizeObserver(\n  viewport: HTMLElement,\n  store: CarouselStore,\n  id: string,\n  cleanups: Map<string, () => void>\n): void {\n  if (typeof ResizeObserver === \"undefined\") {\n    return;\n  }\n\n  const observer = new ResizeObserver(() => {\n    store.instances[id]?.embla?.reInit();\n    syncFromEmbla(store, id);\n  });\n  observer.observe(viewport);\n  addCleanup(id, cleanups, () => observer.disconnect());\n}\n\nfunction getOrCreate(\n  store: CarouselStore,\n  id: string,\n  options?: CarouselOptions\n): CarouselInstance {\n  if (!store.instances[id]) {\n    store.instances[id] = createInstance(options);\n  } else if (options) {\n    store.instances[id].options = { ...store.instances[id].options, ...options };\n    store.instances[id].ariaLive = options.ariaLive ?? store.instances[id].ariaLive;\n  }\n  return store.instances[id];\n}\n\nfunction initEmbla(\n  store: CarouselStore,\n  id: string,\n  viewport: HTMLElement,\n  cleanups: Map<string, () => void>\n): void {\n  const instance = store.instances[id];\n  if (!instance) {\n    return;\n  }\n\n  destroyEmbla(instance, id, cleanups);\n  instance.viewport = viewport;\n\n  const plugins = [];\n  const autoplay = createAutoplayPlugin(instance.options);\n  if (autoplay) {\n    plugins.push(autoplay);\n    instance.autoplay = autoplay;\n  }\n\n  const embla = EmblaCarousel(viewport, toEmblaOptions(instance.options), plugins);\n  instance.embla = embla;\n\n  const sync = () => syncFromEmbla(store, id);\n  embla.on(\"select\", sync);\n  embla.on(\"scroll\", sync);\n  embla.on(\"reInit\", sync);\n  embla.on(\"autoplay:play\", sync);\n  embla.on(\"autoplay:stop\", sync);\n  sync();\n  setupResizeObserver(viewport, store, id, cleanups);\n  setupVisibilityAutoplay(id, instance, cleanups);\n\n  if (typeof requestAnimationFrame !== \"undefined\") {\n    requestAnimationFrame(() => {\n      instance.embla?.reInit();\n      syncFromEmbla(store, id);\n    });\n  }\n}\n\n/** Creates the headless carousel store powered by Embla Carousel. */\nexport function createCarouselStore(): CarouselStore {\n  const cleanups = new Map<string, () => void>();\n\n  const store: CarouselStore = {\n    instances: {},\n\n    create(id, options = {}) {\n      getOrCreate(this, id, options);\n    },\n\n    destroy(id) {\n      const instance = this.instances[id];\n      if (!instance) {\n        return;\n      }\n      destroyEmbla(instance, id, cleanups);\n      delete this.instances[id];\n    },\n\n    bindViewport(id, viewport) {\n      if (typeof window === \"undefined\" || typeof document === \"undefined\") {\n        return;\n      }\n\n      if (!viewport) {\n        const instance = this.instances[id];\n        if (instance) {\n          destroyEmbla(instance, id, cleanups);\n        }\n        return;\n      }\n\n      getOrCreate(this, id);\n      initEmbla(this, id, viewport, cleanups);\n    },\n\n    next(id) {\n      this.instances[id]?.embla?.scrollNext();\n    },\n\n    previous(id) {\n      this.instances[id]?.embla?.scrollPrev();\n    },\n\n    goTo(id, index) {\n      this.instances[id]?.embla?.scrollTo(index);\n    },\n\n    current(id) {\n      return this.instances[id]?.currentIndex ?? 0;\n    },\n\n    count(id) {\n      return this.instances[id]?.totalSlides ?? 0;\n    },\n\n    canNext(id) {\n      return this.instances[id]?.canNext ?? false;\n    },\n\n    canPrevious(id) {\n      return this.instances[id]?.canPrevious ?? false;\n    },\n\n    play(id) {\n      this.instances[id]?.autoplay?.play();\n      const instance = this.instances[id];\n      if (instance) {\n        instance.isPlaying = instance.autoplay?.isPlaying() ?? false;\n      }\n    },\n\n    pause(id) {\n      this.instances[id]?.autoplay?.stop();\n      const instance = this.instances[id];\n      if (instance) {\n        instance.isPlaying = instance.autoplay?.isPlaying() ?? false;\n      }\n    },\n\n    isPlaying(id) {\n      return this.instances[id]?.isPlaying ?? false;\n    },\n\n    instance(id) {\n      return this.instances[id]?.embla ?? null;\n    },\n\n    handleKeydown(id, event) {\n      const instance = this.instances[id];\n      if (!instance?.embla) {\n        return;\n      }\n\n      switch (event.key) {\n        case \"ArrowLeft\":\n        case \"ArrowUp\":\n          event.preventDefault();\n          this.previous(id);\n          break;\n        case \"ArrowRight\":\n        case \"ArrowDown\":\n          event.preventDefault();\n          this.next(id);\n          break;\n        case \"Home\":\n          event.preventDefault();\n          this.goTo(id, 0);\n          break;\n        case \"End\": {\n          event.preventDefault();\n          const last = this.count(id) - 1;\n          if (last >= 0) {\n            this.goTo(id, last);\n          }\n          break;\n        }\n        default:\n          break;\n      }\n    },\n\n    carouselProps(id, options = {}) {\n      const instance = this.instances[id];\n      return {\n        role: \"region\",\n        \"aria-roledescription\": \"carousel\",\n        \"aria-live\": instance?.ariaLive ?? \"polite\",\n        \"aria-label\": options.label,\n      };\n    },\n\n    viewportProps(_id, options = {}) {\n      const props: Record<string, string | number | boolean | undefined> = {\n        tabindex: 0,\n      };\n\n      if (options.slideSize !== false) {\n        props.style = `--slide-size: ${options.slideSize ?? \"100%\"}`;\n      }\n\n      return props;\n    },\n\n    slideProps(id, index) {\n      const current = this.current(id);\n      const total = this.count(id);\n      return {\n        role: \"group\",\n        \"aria-roledescription\": \"slide\",\n        \"aria-label\": `${index + 1} of ${total}`,\n        \"aria-hidden\": current !== index ? true : undefined,\n      };\n    },\n\n    indicatorProps(id, index) {\n      const selected = this.current(id) === index;\n      return {\n        type: \"button\",\n        \"aria-label\": `Go to slide ${index + 1}`,\n        \"aria-current\": selected ? \"true\" : undefined,\n      };\n    },\n\n    destroyAll() {\n      for (const id of Object.keys(this.instances)) {\n        this.destroy(id);\n      }\n    },\n  };\n\n  return store;\n}\n","import type AlpineType from \"alpinejs\";\nimport { type CarouselStore, createCarouselStore } from \"./store.js\";\n\nexport {\n  type CarouselAutoplayOptions,\n  type CarouselInstance,\n  type CarouselOptions,\n  type CarouselStore,\n  createCarouselStore,\n} from \"./store.js\";\n\n/** Alpine.js carousel plugin. Registers `$store.carousel`. */\nexport default function carouselPlugin(): AlpineType.PluginCallback {\n  return function registerCarousel(Alpine) {\n    const store = createCarouselStore();\n    Alpine.store(\"carousel\", store);\n    Alpine.magic(\"carousel\", () => Alpine.store(\"carousel\"));\n  };\n}\n\ndeclare global {\n  namespace Alpine {\n    interface Stores {\n      carousel: CarouselStore;\n    }\n    interface Magics<T> {\n      $carousel: CarouselStore;\n    }\n  }\n}\n"],"mappings":"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","names":[]}