@ailuracode/alpine-carousel 1.0.0 → 2.0.0

package/README.md

@@ -5,12 +5,12 @@ Headless accessible carousel store for Alpine.js, powered by [Embla Carousel](ht
 ## Install
 
 ```bash
-pnpm add @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
 
 ```ts
 import Alpine from "alpinejs";
@@ -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

@@ -5,7 +5,9 @@ import type { CarouselStore } from "./types";
 export { CarouselController, createCarouselController, createCarouselStore } from "./controller";
 export type { CarouselEvents, CarouselSlideChangeDetail } from "./events";
 export type {
+  CarouselAlign,
   CarouselAutoplayOptions,
+  CarouselContainScroll,
   CarouselInstance,
   CarouselOptions,
   CarouselStore,

package/dist/index.d.ts

@@ -1,8 +1,6 @@
 import { Alpine, PluginCallback, BaseController } from '@ailuracode/alpine-core';
 export { Unsubscribe } from '@ailuracode/alpine-core';
-import { EmblaOptionsType, EmblaCarouselType } from 'embla-carousel';
 import { Alpine as Alpine$1 } from 'alpinejs';
-import { AutoplayType } from 'embla-carousel-autoplay';
 
 /**
  * Strongly-typed event map for the carousel controller.
@@ -15,12 +13,17 @@ interface CarouselSlideChangeDetail {
     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 so consumers can react programmatically.
+ * every slide transition and `change` when instance state updates.
  */
 interface CarouselEvents extends Record<string, unknown> {
     slideChange: CarouselSlideChangeDetail;
+    change: CarouselChangeDetail;
 }
 
 /**
@@ -30,6 +33,10 @@ interface CarouselEvents extends Record<string, unknown> {
  * 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;
@@ -44,14 +51,14 @@ type CarouselOptions = {
     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;
 };
-/** Internal representation of a carousel instance. */
+/** Readonly snapshot of carousel state exposed through stores and adapters. */
 type CarouselInstance = {
     currentIndex: number;
     totalSlides: number;
@@ -64,9 +71,6 @@ 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 = {
@@ -84,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;
@@ -99,7 +102,17 @@ type 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;
@@ -126,7 +139,13 @@ type CarouselPluginCallback = PluginCallback<Alpine$1>;
 declare class CarouselController extends BaseController<CarouselEvents> {
     #private;
     constructor(id?: string);
-    get instances(): Readonly<Record<string, CarouselInstance>>;
+    /** 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;
@@ -143,7 +162,6 @@ declare class CarouselController extends BaseController<CarouselEvents> {
     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;
@@ -154,22 +172,12 @@ declare class CarouselController extends BaseController<CarouselEvents> {
     slideProps(id: string, index: number): Record<string, string | boolean | undefined>;
     indicatorProps(id: string, index: number): Record<string, string | boolean | undefined>;
     destroyAll(): void;
-    /**
-     * Returns a store-shaped object for Alpine's `$store.carousel`.
-     * The store delegates to this controller.
-     */
-    toStore(): CarouselStore;
 }
 /**
  * Creates a CarouselController and returns the controller instance.
  * Convenience for non-Alpine consumers.
  */
 declare function createCarouselController(id?: string): CarouselController;
-/**
- * Creates a CarouselStore (store-shaped object) directly.
- * Backward-compatible alias.
- */
-declare function createCarouselStore(): CarouselStore;
 
 /**
  * Alpine.js integration for `@ailuracode/alpine-carousel`.
@@ -187,4 +195,13 @@ declare function carouselPlugin(options?: CreateCarouselOptions): CarouselPlugin
 /** Builds typed carousel plugin options. */
 declare function carouselOptions<const T extends CreateCarouselOptions>(options: T): T;
 
-export { type CarouselAlpine, type CarouselAutoplayOptions, CarouselController, type CarouselEvents, type CarouselInstance, type CarouselOptions, type CarouselPluginCallback, type CarouselSlideChangeDetail, type CarouselStore, type CreateCarouselOptions, carouselOptions, carouselPlugin, createCarouselController, createCarouselStore, carouselPlugin as default };
+/**
+ * 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 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,418 +1 @@
-// src/controller.ts
-import { BaseController, generateId } from "@ailuracode/alpine-core";
-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
-  });
-}
-var CarouselController = class extends BaseController {
-  #instances = {};
-  #cleanups = /* @__PURE__ */ new Map();
-  constructor(id) {
-    super(id ?? generateId("carousel"));
-  }
-  get instances() {
-    return this.#instances;
-  }
-  create(id, options = {}) {
-    if (this.isDestroyed) {
-      return;
-    }
-    this.#getOrCreate(id, options);
-  }
-  destroy(id) {
-    if (id !== void 0) {
-      if (this.isDestroyed) {
-        return;
-      }
-      const instance = this.#instances[id];
-      if (!instance) {
-        return;
-      }
-      this.#destroyEmbla(id);
-      delete this.#instances[id];
-    } else {
-      this.destroyAll();
-      super.destroy();
-    }
-  }
-  bindViewport(id, viewport) {
-    if (this.isDestroyed) {
-      return;
-    }
-    if (typeof window === "undefined" || typeof document === "undefined") {
-      return;
-    }
-    if (!viewport) {
-      const instance = this.#instances[id];
-      if (instance) {
-        this.#destroyEmbla(id);
-      }
-      return;
-    }
-    this.#getOrCreate(id);
-    this.#initEmbla(id, viewport);
-  }
-  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);
-    }
-  }
-  /**
-   * Returns a store-shaped object for Alpine's `$store.carousel`.
-   * The store delegates to this controller.
-   */
-  toStore() {
-    return {
-      instances: this.#instances,
-      create: (id, opts) => this.create(id, opts),
-      destroy: (id) => this.destroy(id),
-      bindViewport: (id, viewport) => this.bindViewport(id, viewport),
-      next: (id) => this.next(id),
-      previous: (id) => this.previous(id),
-      goTo: (id, index) => this.goTo(id, index),
-      current: (id) => this.current(id),
-      count: (id) => this.count(id),
-      canNext: (id) => this.canNext(id),
-      canPrevious: (id) => this.canPrevious(id),
-      play: (id) => this.play(id),
-      pause: (id) => this.pause(id),
-      isPlaying: (id) => this.isPlaying(id),
-      instance: (id) => this.instance(id),
-      handleKeydown: (id, event) => this.handleKeydown(id, event),
-      carouselProps: (id, opts) => this.carouselProps(id, opts),
-      viewportProps: (id, opts) => this.viewportProps(id, opts),
-      slideProps: (id, index) => this.slideProps(id, index),
-      indicatorProps: (id, index) => this.indicatorProps(id, index),
-      destroyAll: () => this.destroyAll()
-    };
-  }
-  #getOrCreate(id, options) {
-    if (!this.#instances[id]) {
-      this.#instances[id] = createInstance(options);
-    } else if (options) {
-      this.#instances[id].options = { ...this.#instances[id].options, ...options };
-      this.#instances[id].ariaLive = options.ariaLive ?? this.#instances[id].ariaLive;
-    }
-    return this.#instances[id];
-  }
-  #syncFromEmbla(id) {
-    const instance = this.#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) {
-      this.emit("slideChange", {
-        carouselId: id,
-        index: instance.currentIndex,
-        totalSlides: instance.totalSlides
-      });
-      instance.options.onChange?.(instance.currentIndex);
-    }
-  }
-  #destroyEmbla(id) {
-    this.#cleanups.get(id)?.();
-    this.#cleanups.delete(id);
-    const instance = this.#instances[id];
-    instance?.embla?.destroy();
-    if (instance) {
-      instance.embla = null;
-      instance.autoplay = null;
-      instance.viewport = null;
-    }
-  }
-  #addCleanup(id, cleanup) {
-    const previous = this.#cleanups.get(id);
-    this.#cleanups.set(id, () => {
-      previous?.();
-      cleanup();
-    });
-  }
-  #setupVisibilityAutoplay(id, instance) {
-    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);
-    this.#addCleanup(
-      id,
-      () => document.removeEventListener("visibilitychange", onVisibilityChange)
-    );
-  }
-  #setupResizeObserver(id, viewport) {
-    if (typeof ResizeObserver === "undefined") {
-      return;
-    }
-    const observer = new ResizeObserver(() => {
-      this.#instances[id]?.embla?.reInit();
-      this.#syncFromEmbla(id);
-    });
-    observer.observe(viewport);
-    this.#addCleanup(id, () => observer.disconnect());
-  }
-  #initEmbla(id, viewport) {
-    const instance = this.#instances[id];
-    if (!instance) {
-      return;
-    }
-    this.#destroyEmbla(id);
-    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 = () => this.#syncFromEmbla(id);
-    embla.on("select", sync);
-    embla.on("scroll", sync);
-    embla.on("reInit", sync);
-    embla.on("autoplay:play", sync);
-    embla.on("autoplay:stop", sync);
-    sync();
-    this.#setupResizeObserver(id, viewport);
-    this.#setupVisibilityAutoplay(id, instance);
-    if (typeof requestAnimationFrame !== "undefined") {
-      requestAnimationFrame(() => {
-        instance.embla?.reInit();
-        this.#syncFromEmbla(id);
-      });
-    }
-  }
-};
-function createCarouselController(id) {
-  return new CarouselController(id);
-}
-function createCarouselStore() {
-  return new CarouselController().toStore();
-}
-
-// src/plugin.ts
-var CAROUSEL_STORE_KEY = "carousel";
-function carouselPlugin(options = {}) {
-  return function registerCarousel(alpine) {
-    const Alpine = alpine;
-    const controller = new CarouselController(options.id);
-    const store = {
-      instances: controller.instances,
-      create: (id, opts) => controller.create(id, opts),
-      destroy: (id) => controller.destroy(id),
-      bindViewport: (id, viewport) => controller.bindViewport(id, viewport),
-      next: (id) => controller.next(id),
-      previous: (id) => controller.previous(id),
-      goTo: (id, index) => controller.goTo(id, index),
-      current: (id) => controller.current(id),
-      count: (id) => controller.count(id),
-      canNext: (id) => controller.canNext(id),
-      canPrevious: (id) => controller.canPrevious(id),
-      play: (id) => controller.play(id),
-      pause: (id) => controller.pause(id),
-      isPlaying: (id) => controller.isPlaying(id),
-      instance: (id) => controller.instance(id),
-      handleKeydown: (id, event) => controller.handleKeydown(id, event),
-      carouselProps: (id, opts) => controller.carouselProps(id, opts),
-      viewportProps: (id, opts) => controller.viewportProps(id, opts),
-      slideProps: (id, index) => controller.slideProps(id, index),
-      indicatorProps: (id, index) => controller.indicatorProps(id, index),
-      destroyAll: () => controller.destroyAll()
-    };
-    Alpine.store(CAROUSEL_STORE_KEY, store);
-    const reactiveStore = Alpine.store(CAROUSEL_STORE_KEY);
-    controller.on("slideChange", () => {
-      const controllerInstances = controller.instances;
-      for (const key of Object.keys(controllerInstances)) {
-        reactiveStore.instances[key] = controllerInstances[key];
-      }
-      for (const key of Object.keys(reactiveStore.instances)) {
-        if (!(key in controllerInstances)) {
-          delete reactiveStore.instances[key];
-        }
-      }
-    });
-    Alpine.magic(CAROUSEL_STORE_KEY, () => reactiveStore);
-    if (typeof Alpine.cleanup === "function") {
-      Alpine.cleanup(() => controller.destroy());
-    }
-  };
-}
-function carouselOptions(options) {
-  return options;
-}
-export {
-  CarouselController,
-  carouselOptions,
-  carouselPlugin,
-  createCarouselController,
-  createCarouselStore,
-  carouselPlugin as default
-};
+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": "1.0.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"
   },
@@ -36,10 +37,12 @@
     "embla-carousel-autoplay": "^8.6.0"
   },
   "devDependencies": {
-    "@ailuracode/alpine-core": "0.2.0"
+    "@types/alpinejs": "^3.13.11",
+    "alpinejs": "^3.15.12",
+    "@ailuracode/alpine-core": "0.3.0"
   },
   "peerDependencies": {
-    "@ailuracode/alpine-core": "^0.2.0",
+    "@ailuracode/alpine-core": "^0.3.0",
     "alpinejs": "^3.0.0",
     "@types/alpinejs": "^3.13.11"
   },
@@ -58,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 --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"
   }
 }