@ailuracode/alpine-carousel 0.1.0 → 1.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 alpinejs
 ```
 
 Peer dependencies: `embla-carousel` and `embla-carousel-autoplay` are bundled as direct dependencies.
 
 ## Setup
 
-```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>
 

package/dist/global.d.ts

@@ -1,57 +1,18 @@
 /// <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 {
+  CarouselAutoplayOptions,
+  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,36 @@
-import AlpineType from 'alpinejs';
+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.
+ */
+/**
+ * Detail payload for the `slideChange` event.
+ */
+interface CarouselSlideChangeDetail {
+    readonly carouselId: string;
+    readonly index: number;
+    readonly totalSlides: number;
+}
+/**
+ * Event map for carousel state changes. Emits `slideChange` on
+ * every slide transition so consumers can react programmatically.
+ */
+interface CarouselEvents extends Record<string, unknown> {
+    slideChange: CarouselSlideChangeDetail;
+}
+
+/**
+ * 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.
+ */
+
+/** Autoplay configuration options. */
 type CarouselAutoplayOptions = {
     delay?: number;
     stopOnInteraction?: boolean;
@@ -9,6 +38,7 @@ type CarouselAutoplayOptions = {
     stopOnFocusIn?: boolean;
     stopWhenHidden?: boolean;
 };
+/** Options passed when creating a carousel instance. */
 type CarouselOptions = {
     loop?: boolean;
     autoplay?: boolean;
@@ -21,6 +51,7 @@ type CarouselOptions = {
     ariaLive?: "off" | "polite" | "assertive";
     onChange?: (index: number) => void;
 };
+/** Internal representation of a carousel instance. */
 type CarouselInstance = {
     currentIndex: number;
     totalSlides: number;
@@ -37,6 +68,7 @@ type CarouselInstance = {
     embla: EmblaCarouselType | null;
     autoplay: AutoplayType | null;
 };
+/** Alpine-facing store surface. */
 type CarouselStore = {
     instances: Record<string, CarouselInstance>;
     create(id: string, options?: CarouselOptions): void;
@@ -64,20 +96,95 @@ 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;
+}
+/** 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>;
 
-/** 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;
-        }
-    }
+/**
+ * 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.
+ */
+
+/**
+ * Headless carousel controller. Manages a registry of carousel
+ * instances powered by Embla Carousel.
+ */
+declare class CarouselController extends BaseController<CarouselEvents> {
+    #private;
+    constructor(id?: string);
+    get instances(): Readonly<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;
+    instance(id: string): 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;
+    /**
+     * 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`.
+ *
+ * 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;
 
-export { type CarouselAutoplayOptions, type CarouselInstance, type CarouselOptions, type CarouselStore, createCarouselStore, carouselPlugin as default };
+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 };

package/dist/index.js

@@ -1,4 +1,5 @@
-// src/store.ts
+// src/controller.ts
+import { BaseController, generateId } from "@ailuracode/alpine-core";
 import EmblaCarousel from "embla-carousel";
 import Autoplay from "embla-carousel-autoplay";
 function createInstance(options = {}) {
@@ -44,269 +45,374 @@ function createAutoplayPlugin(options) {
     playOnInit: true
   });
 }
-function syncFromEmbla(store, id) {
-  const instance = store.instances[id];
-  const embla = instance?.embla;
-  if (!(instance && embla)) {
-    return;
+var CarouselController = class extends BaseController {
+  #instances = {};
+  #cleanups = /* @__PURE__ */ new Map();
+  constructor(id) {
+    super(id ?? generateId("carousel"));
   }
-  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);
+  get instances() {
+    return this.#instances;
   }
-}
-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;
+  create(id, options = {}) {
+    if (this.isDestroyed) {
+      return;
+    }
+    this.#getOrCreate(id, options);
   }
-  const onVisibilityChange = () => {
-    if (document.hidden) {
-      instance.autoplay?.stop();
+  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 {
-      instance.autoplay?.play();
+      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;
-  };
-  document.addEventListener("visibilitychange", onVisibilityChange);
-  addCleanup(
-    id,
-    cleanups,
-    () => document.removeEventListener("visibilitychange", onVisibilityChange)
-  );
-}
-function setupResizeObserver(viewport, store, id, cleanups) {
-  if (typeof ResizeObserver === "undefined") {
-    return;
+    if (previousIndex !== instance.currentIndex) {
+      this.emit("slideChange", {
+        carouselId: id,
+        index: instance.currentIndex,
+        totalSlides: instance.totalSlides
+      });
+      instance.options.onChange?.(instance.currentIndex);
+    }
   }
-  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;
+  #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;
+    }
   }
-  return store.instances[id];
-}
-function initEmbla(store, id, viewport, cleanups) {
-  const instance = store.instances[id];
-  if (!instance) {
-    return;
+  #addCleanup(id, cleanup) {
+    const previous = this.#cleanups.get(id);
+    this.#cleanups.set(id, () => {
+      previous?.();
+      cleanup();
+    });
   }
-  destroyEmbla(instance, id, cleanups);
-  instance.viewport = viewport;
-  const plugins = [];
-  const autoplay = createAutoplayPlugin(instance.options);
-  if (autoplay) {
-    plugins.push(autoplay);
-    instance.autoplay = autoplay;
+  #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)
+    );
   }
-  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);
+  #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() {
-  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;
+  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];
       }
-      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;
+      for (const key of Object.keys(reactiveStore.instances)) {
+        if (!(key in controllerInstances)) {
+          delete reactiveStore.instances[key];
         }
-        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);
       }
+    });
+    Alpine.magic(CAROUSEL_STORE_KEY, () => reactiveStore);
+    if (typeof Alpine.cleanup === "function") {
+      Alpine.cleanup(() => controller.destroy());
     }
   };
-  return store;
 }
-
-// src/index.ts
-function carouselPlugin() {
-  return function registerCarousel(Alpine) {
-    const store = createCarouselStore();
-    Alpine.store("carousel", store);
-    Alpine.magic("carousel", () => Alpine.store("carousel"));
-  };
+function carouselOptions(options) {
+  return options;
 }
 export {
+  CarouselController,
+  carouselOptions,
+  carouselPlugin,
+  createCarouselController,
   createCarouselStore,
   carouselPlugin as default
 };
-//# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ailuracode/alpine-carousel",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Alpine.js headless accessible carousel store powered by Embla Carousel",
   "type": "module",
   "license": "MIT",
@@ -35,7 +35,11 @@
     "embla-carousel": "^8.6.0",
     "embla-carousel-autoplay": "^8.6.0"
   },
+  "devDependencies": {
+    "@ailuracode/alpine-core": "0.2.0"
+  },
   "peerDependencies": {
+    "@ailuracode/alpine-core": "^0.2.0",
     "alpinejs": "^3.0.0",
     "@types/alpinejs": "^3.13.11"
   },
@@ -55,7 +59,7 @@
     "headless"
   ],
   "scripts": {
-    "build": "tsup src/index.ts --format esm --dts --clean --sourcemap --out-dir dist && cp src/global.d.ts dist/global.d.ts",
+    "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"
   }
 }

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":[]}