tw-slide 0.1.0

package/README.md

@@ -0,0 +1,183 @@
+# tw-slide
+
+Modern, lightweight presentation library powered by **Tailwind CSS**.
+
+Style your slides with utility classes you already know. No themes, no config files — just HTML + Tailwind.
+
+## Features
+
+- **Tailwind-native** — style every slide with utility classes
+- **Tiny** — ~4.5KB gzipped, zero runtime dependencies
+- **6 transitions** — fade, slide, zoom, flip, cube, none
+- **8 fragment animations** — fade-in, fade-up, fade-down, fade-left, fade-right, grow, shrink, highlight
+- **Plugin system** — progress bar, slide numbers, overview mode
+- **TypeScript-first** — full type safety and autocompletion
+- **Keyboard & touch** — arrow keys, swipe gestures, hash navigation
+- **Dark / light mode** — one class toggle
+- **Accessible** — respects `prefers-reduced-motion`
+- **Print-ready** — built-in PDF export styles
+
+## Install
+
+```bash
+npm install tw-slide
+```
+
+## Quick Start
+
+### HTML
+
+```html
+<div class="ts-deck ts-dark">
+  <section class="ts-slide">
+    <div class="ts-content text-center">
+      <h1 class="text-6xl font-bold text-white">Hello, TailSlide</h1>
+      <p class="text-xl text-gray-400 mt-4">Press → to continue</p>
+    </div>
+  </section>
+
+  <section class="ts-slide">
+    <div class="ts-content">
+      <h2 class="text-4xl font-bold text-white">Fragments</h2>
+      <p class="ts-fragment text-gray-300" data-ts-animation="fade-up">I appear first</p>
+      <p class="ts-fragment text-gray-300" data-ts-animation="fade-up">I appear second</p>
+    </div>
+  </section>
+</div>
+```
+
+### JavaScript
+
+```js
+import TailSlide, { ProgressPlugin, SlideNumberPlugin, OverviewPlugin } from 'tw-slide';
+import 'tw-slide/style.css';
+
+const deck = new TailSlide({
+  transition: 'slide',
+  dark: true,
+});
+
+deck.use(new ProgressPlugin());
+deck.use(new SlideNumberPlugin());
+deck.use(new OverviewPlugin());
+```
+
+## Configuration
+
+```js
+new TailSlide({
+  el: '.ts-deck',          // container selector or element
+  transition: 'slide',     // none | fade | slide | zoom | flip | cube
+  transitionSpeed: 500,    // transition duration in ms
+  easing: 'ease-in-out',   // CSS easing function
+  keyboard: true,          // enable keyboard navigation
+  touch: true,             // enable touch/swipe
+  hash: true,              // sync URL hash with current slide
+  progress: true,          // show progress bar (needs ProgressPlugin)
+  slideNumber: true,       // show slide numbers (needs SlideNumberPlugin)
+  dark: true,              // dark mode
+  loop: false,             // loop back to first slide
+  autoSlide: 0,            // auto-advance interval in ms (0 = off)
+  startSlide: 0,           // starting slide index
+});
+```
+
+## Keyboard Shortcuts
+
+| Key | Action |
+|-----|--------|
+| `→` `↓` `Space` `N` | Next slide / fragment |
+| `←` `↑` `P` | Previous slide / fragment |
+| `Home` | First slide |
+| `End` | Last slide |
+| `O` | Toggle overview mode |
+| `Esc` | Toggle overview mode |
+
+## Fragments
+
+Add `ts-fragment` class to reveal elements step by step. Set animation type with `data-ts-animation`:
+
+```html
+<p class="ts-fragment" data-ts-animation="fade-up">Appears with fade-up</p>
+<p class="ts-fragment" data-ts-animation="grow">Appears with grow</p>
+```
+
+**Available animations:** `fade-in` (default), `fade-up`, `fade-down`, `fade-left`, `fade-right`, `grow`, `shrink`, `highlight`
+
+## Plugins
+
+### ProgressPlugin
+
+Thin progress bar at the top of the viewport.
+
+```js
+deck.use(new ProgressPlugin());
+```
+
+### SlideNumberPlugin
+
+Displays current / total slide number at bottom-right.
+
+```js
+deck.use(new SlideNumberPlugin());
+```
+
+### OverviewPlugin
+
+Grid overview of all slides. Toggle with `O` key or click a slide to navigate.
+
+```js
+deck.use(new OverviewPlugin());
+```
+
+## API
+
+```js
+deck.next();                    // next fragment or slide
+deck.prev();                    // previous fragment or slide
+deck.goTo(3);                   // jump to slide index
+deck.getState();                // { currentSlide, currentFragment, totalSlides, ... }
+deck.toggleOverview();          // toggle overview mode
+deck.on('slide:changed', (e) => console.log(e.from, e.to));
+deck.destroy();                 // clean up
+```
+
+### Events
+
+| Event | Payload |
+|-------|---------|
+| `slide:changed` | `{ from: number, to: number }` |
+| `fragment:shown` | `{ slide: number, fragment: number, element: HTMLElement }` |
+| `fragment:hidden` | `{ slide: number, fragment: number, element: HTMLElement }` |
+| `deck:ready` | `{ totalSlides: number }` |
+| `deck:destroyed` | `{}` |
+| `overview:open` | `{}` |
+| `overview:close` | `{}` |
+
+## Custom Plugin
+
+```ts
+import type { TailSlidePlugin, TailSlideAPI } from 'tw-slide';
+
+class MyPlugin implements TailSlidePlugin {
+  name = 'my-plugin';
+
+  init(deck: TailSlideAPI) {
+    deck.on('slide:changed', ({ to }) => {
+      console.log(`Now on slide ${to}`);
+    });
+  }
+
+  destroy() {}
+}
+
+deck.use(new MyPlugin());
+```
+
+## Browser Support
+
+All modern browsers (Chrome, Firefox, Safari, Edge). Uses [Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API).
+
+## License
+
+MIT

package/dist/core/Events.d.ts

@@ -0,0 +1,8 @@
+import { TailSlideEvents, EventCallback } from '../types';
+export declare class EventEmitter {
+    private listeners;
+    on<K extends keyof TailSlideEvents>(event: K, callback: EventCallback<TailSlideEvents[K]>): void;
+    off<K extends keyof TailSlideEvents>(event: K, callback: EventCallback<TailSlideEvents[K]>): void;
+    emit<K extends keyof TailSlideEvents>(event: K, data: TailSlideEvents[K]): void;
+    removeAll(): void;
+}

package/dist/core/Navigation.d.ts

@@ -0,0 +1,19 @@
+import { TailSlideAPI, TailSlideConfig } from '../types';
+export declare class Navigation {
+    private deck;
+    private config;
+    private container;
+    private touchStartX;
+    private touchStartY;
+    private handleKeyDown;
+    private handleClick;
+    private handleTouchStart;
+    private handleTouchEnd;
+    constructor(deck: TailSlideAPI, config: Required<TailSlideConfig>);
+    private bind;
+    private onKeyDown;
+    private onClick;
+    private onTouchStart;
+    private onTouchEnd;
+    destroy(): void;
+}

package/dist/core/State.d.ts

@@ -0,0 +1,16 @@
+import { DeckState } from '../types';
+export declare class StateManager {
+    private state;
+    constructor(totalSlides: number);
+    get(): DeckState;
+    get currentSlide(): number;
+    set currentSlide(value: number);
+    get currentFragment(): number;
+    set currentFragment(value: number);
+    get totalSlides(): number;
+    set totalSlides(value: number);
+    get isOverview(): boolean;
+    set isOverview(value: boolean);
+    get isPaused(): boolean;
+    set isPaused(value: boolean);
+}

package/dist/core/TailSlide.d.ts

@@ -0,0 +1,33 @@
+import { TailSlideConfig, TailSlideAPI, TailSlidePlugin, TailSlideEvents, DeckState, EventCallback } from '../types';
+export declare class TailSlide implements TailSlideAPI {
+    private config;
+    private container;
+    private slides;
+    private events;
+    private state;
+    private navigation;
+    private plugins;
+    private fragmentManager;
+    private autoSlideTimer;
+    private hashChangeHandler;
+    constructor(config?: TailSlideConfig);
+    goTo(index: number): void;
+    next(): void;
+    prev(): void;
+    getState(): DeckState;
+    getConfig(): Required<TailSlideConfig>;
+    getContainer(): HTMLElement;
+    getSlides(): HTMLElement[];
+    getFragments(slideIndex: number): HTMLElement[];
+    on<K extends keyof TailSlideEvents>(event: K, callback: EventCallback<TailSlideEvents[K]>): void;
+    off<K extends keyof TailSlideEvents>(event: K, callback: EventCallback<TailSlideEvents[K]>): void;
+    use(plugin: TailSlidePlugin): void;
+    toggleOverview(): void;
+    destroy(): void;
+    private updateSlideClasses;
+    private clamp;
+    private getSlideFromHash;
+    private syncHash;
+    private startAutoSlide;
+    private stopAutoSlide;
+}

package/dist/fragments/index.d.ts

@@ -0,0 +1,7 @@
+export declare class FragmentManager {
+    getFragments(slide: HTMLElement): HTMLElement[];
+    show(el: HTMLElement): void;
+    hide(el: HTMLElement): void;
+    showAllUpTo(fragments: HTMLElement[], index: number): void;
+    hideAllFrom(fragments: HTMLElement[], index: number): void;
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { TailSlide } from './core/TailSlide';
+export { TailSlide as default } from './core/TailSlide';
+export { ProgressPlugin } from './plugins/progress';
+export { SlideNumberPlugin } from './plugins/slideNumber';
+export { OverviewPlugin } from './plugins/overview';
+export type { TailSlideConfig, TailSlideAPI, TailSlidePlugin, TailSlideEvents, DeckState, EventCallback, TransitionType, FragmentAnimation, EasingFunction, } from './types';

package/dist/plugins/overview.d.ts

@@ -0,0 +1,13 @@
+import { TailSlidePlugin, TailSlideAPI } from '../types';
+export declare class OverviewPlugin implements TailSlidePlugin {
+    readonly name = "overview";
+    private deck;
+    private wrapper;
+    private keyHandler;
+    private clickHandler;
+    init(deck: TailSlideAPI): void;
+    destroy(): void;
+    private toggle;
+    private wrapSlides;
+    private unwrapSlides;
+}

package/dist/plugins/progress.d.ts

@@ -0,0 +1,10 @@
+import { TailSlidePlugin, TailSlideAPI } from '../types';
+export declare class ProgressPlugin implements TailSlidePlugin {
+    readonly name = "progress";
+    private bar;
+    private deck;
+    private handler;
+    init(deck: TailSlideAPI): void;
+    destroy(): void;
+    private update;
+}

package/dist/plugins/slideNumber.d.ts

@@ -0,0 +1,10 @@
+import { TailSlidePlugin, TailSlideAPI } from '../types';
+export declare class SlideNumberPlugin implements TailSlidePlugin {
+    readonly name = "slideNumber";
+    private el;
+    private deck;
+    private handler;
+    init(deck: TailSlideAPI): void;
+    destroy(): void;
+    private update;
+}

package/dist/tailslide.es.js

@@ -0,0 +1,564 @@
+const p = {
+  el: ".ts-deck",
+  transition: "slide",
+  transitionSpeed: 500,
+  easing: "ease-in-out",
+  keyboard: !0,
+  hash: !0,
+  progress: !0,
+  slideNumber: !0,
+  touch: !0,
+  clickToAdvance: !1,
+  autoSlide: 0,
+  loop: !1,
+  startSlide: 0,
+  dark: !0,
+  deckClass: ""
+};
+class m {
+  constructor() {
+    this.listeners = /* @__PURE__ */ new Map();
+  }
+  on(t, e) {
+    this.listeners.has(t) || this.listeners.set(t, /* @__PURE__ */ new Set()), this.listeners.get(t).add(e);
+  }
+  off(t, e) {
+    var s;
+    (s = this.listeners.get(t)) == null || s.delete(e);
+  }
+  emit(t, e) {
+    var s;
+    (s = this.listeners.get(t)) == null || s.forEach((n) => n(e));
+  }
+  removeAll() {
+    this.listeners.clear();
+  }
+}
+class y {
+  constructor(t) {
+    this.state = {
+      currentSlide: 0,
+      currentFragment: -1,
+      totalSlides: t,
+      isOverview: !1,
+      isPaused: !1
+    };
+  }
+  get() {
+    return { ...this.state };
+  }
+  get currentSlide() {
+    return this.state.currentSlide;
+  }
+  set currentSlide(t) {
+    this.state.currentSlide = t;
+  }
+  get currentFragment() {
+    return this.state.currentFragment;
+  }
+  set currentFragment(t) {
+    this.state.currentFragment = t;
+  }
+  get totalSlides() {
+    return this.state.totalSlides;
+  }
+  set totalSlides(t) {
+    this.state.totalSlides = t;
+  }
+  get isOverview() {
+    return this.state.isOverview;
+  }
+  set isOverview(t) {
+    this.state.isOverview = t;
+  }
+  get isPaused() {
+    return this.state.isPaused;
+  }
+  set isPaused(t) {
+    this.state.isPaused = t;
+  }
+}
+const v = 50;
+class w {
+  constructor(t, e) {
+    this.touchStartX = 0, this.touchStartY = 0, this.deck = t, this.config = e, this.container = t.getContainer(), this.handleKeyDown = this.onKeyDown.bind(this), this.handleClick = this.onClick.bind(this), this.handleTouchStart = this.onTouchStart.bind(this), this.handleTouchEnd = this.onTouchEnd.bind(this), this.bind();
+  }
+  bind() {
+    this.config.keyboard && document.addEventListener("keydown", this.handleKeyDown), this.config.clickToAdvance && this.container.addEventListener("click", this.handleClick), this.config.touch && (this.container.addEventListener("touchstart", this.handleTouchStart, {
+      passive: !0
+    }), this.container.addEventListener("touchend", this.handleTouchEnd));
+  }
+  onKeyDown(t) {
+    if (!(t.metaKey || t.ctrlKey || t.altKey))
+      switch (t.key) {
+        case "ArrowRight":
+        case "ArrowDown":
+        case " ":
+        case "n":
+          t.preventDefault(), this.deck.next();
+          break;
+        case "ArrowLeft":
+        case "ArrowUp":
+        case "p":
+          t.preventDefault(), this.deck.prev();
+          break;
+        case "Home":
+          t.preventDefault(), this.deck.goTo(0);
+          break;
+        case "End":
+          t.preventDefault(), this.deck.goTo(this.deck.getSlides().length - 1);
+          break;
+        case "Escape":
+          t.preventDefault(), this.deck.toggleOverview();
+          break;
+      }
+  }
+  onClick(t) {
+    this.deck.next();
+  }
+  onTouchStart(t) {
+    const e = t.touches[0];
+    this.touchStartX = e.clientX, this.touchStartY = e.clientY;
+  }
+  onTouchEnd(t) {
+    const e = t.changedTouches[0], s = e.clientX - this.touchStartX, n = e.clientY - this.touchStartY;
+    Math.abs(s) < v || Math.abs(n) > Math.abs(s) || (t.preventDefault(), s < 0 ? this.deck.next() : this.deck.prev());
+  }
+  destroy() {
+    document.removeEventListener("keydown", this.handleKeyDown), this.container.removeEventListener("click", this.handleClick), this.container.removeEventListener("touchstart", this.handleTouchStart), this.container.removeEventListener("touchend", this.handleTouchEnd);
+  }
+}
+const S = () => typeof window < "u" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+function l(i, t, e) {
+  return new Promise((s) => {
+    const n = i.animate(t, e);
+    n.onfinish = () => s(), n.oncancel = () => s();
+  });
+}
+async function k(i, t) {
+  i && (i.style.opacity = "0", i.style.pointerEvents = "none", i.classList.remove("ts-active")), t.style.opacity = "1", t.style.pointerEvents = "auto", t.classList.add("ts-active");
+}
+async function E(i, t, e, s) {
+  const n = [];
+  t.style.opacity = "0", t.style.pointerEvents = "auto", t.classList.add("ts-active"), n.push(
+    l(t, [{ opacity: 0 }, { opacity: 1 }], {
+      duration: e,
+      easing: s,
+      fill: "forwards"
+    })
+  ), i && n.push(
+    l(i, [{ opacity: 1 }, { opacity: 0 }], {
+      duration: e,
+      easing: s,
+      fill: "forwards"
+    }).then(() => {
+      i.style.opacity = "0", i.style.pointerEvents = "none", i.classList.remove("ts-active");
+    })
+  ), await Promise.all(n), t.style.opacity = "1";
+}
+async function L(i, t, e, s, n) {
+  const a = n === "forward" ? "100%" : "-100%", o = n === "forward" ? "-100%" : "100%", r = [];
+  t.style.opacity = "1", t.style.pointerEvents = "auto", t.classList.add("ts-active"), r.push(
+    l(
+      t,
+      [
+        { transform: `translateX(${a})`, opacity: 1 },
+        { transform: "translateX(0)", opacity: 1 }
+      ],
+      { duration: e, easing: s, fill: "forwards" }
+    )
+  ), i && r.push(
+    l(
+      i,
+      [
+        { transform: "translateX(0)", opacity: 1 },
+        { transform: `translateX(${o})`, opacity: 1 }
+      ],
+      { duration: e, easing: s, fill: "forwards" }
+    ).then(() => {
+      i.style.opacity = "0", i.style.pointerEvents = "none", i.style.transform = "", i.classList.remove("ts-active");
+    })
+  ), await Promise.all(r), t.style.transform = "";
+}
+async function T(i, t, e, s, n) {
+  const a = n === "forward" ? "scale(0.8)" : "scale(1.2)", o = n === "forward" ? "scale(1.2)" : "scale(0.8)", r = [];
+  t.style.opacity = "0", t.style.pointerEvents = "auto", t.classList.add("ts-active"), r.push(
+    l(
+      t,
+      [
+        { transform: a, opacity: 0 },
+        { transform: "scale(1)", opacity: 1 }
+      ],
+      { duration: e, easing: s, fill: "forwards" }
+    )
+  ), i && r.push(
+    l(
+      i,
+      [
+        { transform: "scale(1)", opacity: 1 },
+        { transform: o, opacity: 0 }
+      ],
+      { duration: e, easing: s, fill: "forwards" }
+    ).then(() => {
+      i.style.opacity = "0", i.style.pointerEvents = "none", i.style.transform = "", i.classList.remove("ts-active");
+    })
+  ), await Promise.all(r), t.style.opacity = "1", t.style.transform = "";
+}
+async function b(i, t, e, s, n) {
+  const a = n === "forward" ? -180 : 180, o = n === "forward" ? 180 : -180, r = e / 2, c = t.parentElement;
+  c && (c.style.perspective = "1200px"), i && (await l(
+    i,
+    [
+      { transform: "rotateY(0deg)", opacity: 1 },
+      { transform: `rotateY(${o}deg)`, opacity: 0 }
+    ],
+    { duration: r, easing: s, fill: "forwards" }
+  ), i.style.opacity = "0", i.style.pointerEvents = "none", i.style.transform = "", i.classList.remove("ts-active")), t.style.pointerEvents = "auto", t.classList.add("ts-active"), await l(
+    t,
+    [
+      { transform: `rotateY(${a}deg)`, opacity: 0 },
+      { transform: "rotateY(0deg)", opacity: 1 }
+    ],
+    { duration: r, easing: s, fill: "forwards" }
+  ), t.style.opacity = "1", t.style.transform = "";
+}
+async function C(i, t, e, s, n) {
+  const a = t.parentElement;
+  a && (a.style.perspective = "1200px");
+  const o = n === "forward" ? 90 : -90, r = n === "forward" ? -90 : 90, c = "translateZ(-50vw)", h = [];
+  t.style.pointerEvents = "auto", t.classList.add("ts-active"), t.style.transformOrigin = n === "forward" ? "left center" : "right center", h.push(
+    l(
+      t,
+      [
+        {
+          transform: `${c} rotateY(${o}deg)`,
+          opacity: 0.6
+        },
+        { transform: "translateZ(0) rotateY(0deg)", opacity: 1 }
+      ],
+      { duration: e, easing: s, fill: "forwards" }
+    ).then(() => {
+      t.style.opacity = "1", t.style.transform = "", t.style.transformOrigin = "";
+    })
+  ), i && (i.style.transformOrigin = n === "forward" ? "right center" : "left center", h.push(
+    l(
+      i,
+      [
+        { transform: "translateZ(0) rotateY(0deg)", opacity: 1 },
+        {
+          transform: `${c} rotateY(${r}deg)`,
+          opacity: 0.6
+        }
+      ],
+      { duration: e, easing: s, fill: "forwards" }
+    ).then(() => {
+      i.style.opacity = "0", i.style.pointerEvents = "none", i.style.transform = "", i.style.transformOrigin = "", i.classList.remove("ts-active");
+    })
+  )), await Promise.all(h);
+}
+async function A(i, t, e, s) {
+  const n = S() ? "none" : e, { duration: a, easing: o, direction: r = "forward" } = s;
+  switch (n) {
+    case "none":
+      return k(i, t);
+    case "fade":
+      return E(i, t, a, o);
+    case "slide":
+      return L(i, t, a, o, r);
+    case "zoom":
+      return T(i, t, a, o, r);
+    case "flip":
+      return b(i, t, a, o, r);
+    case "cube":
+      return C(i, t, a, o, r);
+  }
+}
+const d = 300, u = "ease-out";
+function f(i) {
+  switch (i) {
+    case "fade-in":
+      return {
+        from: { opacity: 0 },
+        to: { opacity: 1 }
+      };
+    case "fade-up":
+      return {
+        from: { opacity: 0, transform: "translateY(20px)" },
+        to: { opacity: 1, transform: "translateY(0)" }
+      };
+    case "fade-down":
+      return {
+        from: { opacity: 0, transform: "translateY(-20px)" },
+        to: { opacity: 1, transform: "translateY(0)" }
+      };
+    case "fade-left":
+      return {
+        from: { opacity: 0, transform: "translateX(20px)" },
+        to: { opacity: 1, transform: "translateX(0)" }
+      };
+    case "fade-right":
+      return {
+        from: { opacity: 0, transform: "translateX(-20px)" },
+        to: { opacity: 1, transform: "translateX(0)" }
+      };
+    case "grow":
+      return {
+        from: { opacity: 0, transform: "scale(0.5)" },
+        to: { opacity: 1, transform: "scale(1)" }
+      };
+    case "shrink":
+      return {
+        from: { opacity: 0, transform: "scale(1.5)" },
+        to: { opacity: 1, transform: "scale(1)" }
+      };
+    case "highlight":
+      return {
+        from: { backgroundColor: "transparent" },
+        to: { backgroundColor: "rgba(255, 213, 79, 0.4)" }
+      };
+  }
+}
+function g(i) {
+  return i.dataset.tsAnimation || "fade-in";
+}
+class F {
+  getFragments(t) {
+    const e = t.querySelectorAll(".ts-fragment");
+    return Array.from(e).sort((s, n) => {
+      const a = parseInt(s.dataset.tsIndex || "0", 10), o = parseInt(n.dataset.tsIndex || "0", 10);
+      return a !== o ? a - o : 0;
+    });
+  }
+  show(t) {
+    const e = g(t), { from: s, to: n } = f(e);
+    t.classList.add("ts-fragment-visible"), t.animate([s, n], {
+      duration: d,
+      easing: u,
+      fill: "forwards"
+    });
+  }
+  hide(t) {
+    const e = g(t), { from: s, to: n } = f(e);
+    t.classList.remove("ts-fragment-visible"), t.animate([n, s], {
+      duration: d,
+      easing: u,
+      fill: "forwards"
+    });
+  }
+  showAllUpTo(t, e) {
+    for (let s = 0; s <= e && s < t.length; s++) {
+      const n = t[s];
+      n.classList.contains("ts-fragment-visible") || this.show(n);
+    }
+  }
+  hideAllFrom(t, e) {
+    for (let s = e; s < t.length; s++) {
+      const n = t[s];
+      n.classList.contains("ts-fragment-visible") && this.hide(n);
+    }
+  }
+}
+class H {
+  constructor(t = {}) {
+    this.slides = [], this.navigation = null, this.plugins = [], this.autoSlideTimer = null, this.hashChangeHandler = null, this.config = { ...p, ...t }, this.events = new m();
+    const e = this.config.el, s = typeof e == "string" ? document.querySelector(e) : e;
+    if (!s)
+      throw new Error(`TailSlide: container "${e}" not found`);
+    this.container = s, this.container.classList.add("ts-deck"), this.config.deckClass && this.container.classList.add(...this.config.deckClass.split(/\s+/)), this.config.dark && this.container.classList.add("ts-dark"), this.slides = Array.from(this.container.querySelectorAll(".ts-slide")), this.state = new y(this.slides.length), this.fragmentManager = new F();
+    const n = this.getSlideFromHash() ?? this.config.startSlide;
+    this.state.currentSlide = this.clamp(n), this.updateSlideClasses(), this.navigation = new w(this, this.config), this.config.hash && (this.hashChangeHandler = () => {
+      const a = this.getSlideFromHash();
+      a !== null && a !== this.state.currentSlide && this.goTo(a);
+    }, window.addEventListener("hashchange", this.hashChangeHandler), this.syncHash()), this.config.autoSlide > 0 && this.startAutoSlide(), this.events.emit("deck:ready", { totalSlides: this.slides.length });
+  }
+  // ─── Public API ────────────────────────────────────────────────
+  goTo(t) {
+    const e = this.clamp(t);
+    if (e === this.state.currentSlide) return;
+    const s = this.state.currentSlide, n = e > s ? "forward" : "backward";
+    A(
+      this.slides[s],
+      this.slides[e],
+      this.config.transition,
+      {
+        duration: this.config.transitionSpeed,
+        easing: this.config.easing,
+        direction: n
+      }
+    ), this.state.currentSlide = e, this.state.currentFragment = -1, this.updateSlideClasses(), this.syncHash(), this.events.emit("slide:changed", { from: s, to: e });
+  }
+  next() {
+    if (this.state.isPaused) return;
+    const t = this.getFragments(this.state.currentSlide);
+    if (t.length > 0) {
+      const s = this.state.currentFragment + 1;
+      if (s < t.length) {
+        this.state.currentFragment = s, this.fragmentManager.show(t[s]), this.events.emit("fragment:shown", {
+          slide: this.state.currentSlide,
+          fragment: s,
+          element: t[s]
+        });
+        return;
+      }
+    }
+    const e = this.state.currentSlide + 1;
+    e < this.slides.length ? this.goTo(e) : this.config.loop && this.goTo(0);
+  }
+  prev() {
+    if (this.state.isPaused) return;
+    const t = this.getFragments(this.state.currentSlide);
+    if (t.length > 0 && this.state.currentFragment >= 0) {
+      const s = this.state.currentFragment;
+      this.fragmentManager.hide(t[s]), this.state.currentFragment = s - 1, this.events.emit("fragment:hidden", {
+        slide: this.state.currentSlide,
+        fragment: s,
+        element: t[s]
+      });
+      return;
+    }
+    const e = this.state.currentSlide - 1;
+    if (e >= 0) {
+      this.goTo(e);
+      const s = this.getFragments(e);
+      s.forEach((n) => this.fragmentManager.show(n)), this.state.currentFragment = s.length - 1;
+    } else this.config.loop && this.goTo(this.slides.length - 1);
+  }
+  getState() {
+    return this.state.get();
+  }
+  getConfig() {
+    return { ...this.config };
+  }
+  getContainer() {
+    return this.container;
+  }
+  getSlides() {
+    return [...this.slides];
+  }
+  getFragments(t) {
+    const e = this.slides[t];
+    return e ? Array.from(e.querySelectorAll(".ts-fragment")) : [];
+  }
+  on(t, e) {
+    this.events.on(t, e);
+  }
+  off(t, e) {
+    this.events.off(t, e);
+  }
+  use(t) {
+    this.plugins.push(t), t.init(this);
+  }
+  toggleOverview() {
+    this.state.isOverview = !this.state.isOverview, this.state.isOverview ? (this.container.classList.add("ts-overview"), this.events.emit("overview:open", {})) : (this.container.classList.remove("ts-overview"), this.events.emit("overview:close", {}));
+  }
+  destroy() {
+    var t;
+    this.stopAutoSlide(), (t = this.navigation) == null || t.destroy(), this.navigation = null, this.hashChangeHandler && (window.removeEventListener("hashchange", this.hashChangeHandler), this.hashChangeHandler = null), this.plugins.forEach((e) => e.destroy()), this.plugins = [], this.events.emit("deck:destroyed", {}), this.events.removeAll();
+  }
+  // ─── Private ───────────────────────────────────────────────────
+  updateSlideClasses() {
+    const t = this.state.currentSlide;
+    this.slides.forEach((s, n) => {
+      s.classList.remove("ts-active", "ts-past", "ts-future"), s.setAttribute("aria-hidden", String(n !== t)), n < t ? s.classList.add("ts-past") : n === t ? s.classList.add("ts-active") : s.classList.add("ts-future");
+    }), this.getFragments(t).forEach((s) => this.fragmentManager.hide(s)), this.state.currentFragment = -1;
+  }
+  clamp(t) {
+    return Math.max(0, Math.min(t, this.slides.length - 1));
+  }
+  getSlideFromHash() {
+    const t = window.location.hash.match(/^#\/(\d+)$/);
+    if (!t) return null;
+    const e = parseInt(t[1], 10);
+    return isNaN(e) ? null : e;
+  }
+  syncHash() {
+    if (!this.config.hash) return;
+    const t = `#/${this.state.currentSlide}`;
+    window.location.hash !== t && history.replaceState(null, "", t);
+  }
+  startAutoSlide() {
+    this.autoSlideTimer = setInterval(() => {
+      this.state.isPaused || this.next();
+    }, this.config.autoSlide);
+  }
+  stopAutoSlide() {
+    this.autoSlideTimer !== null && (clearInterval(this.autoSlideTimer), this.autoSlideTimer = null);
+  }
+}
+class x {
+  constructor() {
+    this.name = "progress", this.bar = null, this.deck = null, this.handler = null;
+  }
+  init(t) {
+    this.deck = t, this.bar = document.createElement("div"), this.bar.className = "ts-progress", t.getContainer().appendChild(this.bar), this.handler = () => this.update(), t.on("slide:changed", this.handler), this.update();
+  }
+  destroy() {
+    var t;
+    this.handler && this.deck && this.deck.off("slide:changed", this.handler), (t = this.bar) == null || t.remove(), this.bar = null, this.deck = null, this.handler = null;
+  }
+  update() {
+    if (!this.bar || !this.deck) return;
+    const { currentSlide: t, totalSlides: e } = this.deck.getState(), s = e > 1 ? t / (e - 1) * 100 : 100;
+    this.bar.style.width = `${s}%`;
+  }
+}
+class O {
+  constructor() {
+    this.name = "slideNumber", this.el = null, this.deck = null, this.handler = null;
+  }
+  init(t) {
+    this.deck = t, this.el = document.createElement("div"), this.el.className = "ts-slide-number", t.getContainer().appendChild(this.el), this.handler = () => this.update(), t.on("slide:changed", this.handler), this.update();
+  }
+  destroy() {
+    var t;
+    this.handler && this.deck && this.deck.off("slide:changed", this.handler), (t = this.el) == null || t.remove(), this.el = null, this.deck = null, this.handler = null;
+  }
+  update() {
+    if (!this.el || !this.deck) return;
+    const { currentSlide: t, totalSlides: e } = this.deck.getState();
+    this.el.textContent = `${t + 1} / ${e}`;
+  }
+}
+class M {
+  constructor() {
+    this.name = "overview", this.deck = null, this.wrapper = null, this.keyHandler = null, this.clickHandler = null;
+  }
+  init(t) {
+    this.deck = t, this.keyHandler = (e) => {
+      if (e.key === "o" || e.key === "O") {
+        if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+        e.preventDefault(), this.toggle();
+      }
+    }, document.addEventListener("keydown", this.keyHandler), this.clickHandler = (e) => {
+      if (!t.getState().isOverview) return;
+      const s = e.target.closest(".ts-slide");
+      if (!s) return;
+      const a = t.getSlides().indexOf(s);
+      a !== -1 && (t.goTo(a), t.toggleOverview());
+    }, t.getContainer().addEventListener("click", this.clickHandler);
+  }
+  destroy() {
+    this.keyHandler && (document.removeEventListener("keydown", this.keyHandler), this.keyHandler = null), this.clickHandler && this.deck && (this.deck.getContainer().removeEventListener("click", this.clickHandler), this.clickHandler = null), this.unwrapSlides(), this.deck = null;
+  }
+  toggle() {
+    if (!this.deck) return;
+    this.deck.getState().isOverview ? this.unwrapSlides() : this.wrapSlides(), this.deck.toggleOverview();
+  }
+  wrapSlides() {
+    if (!this.deck || this.wrapper) return;
+    const t = this.deck.getContainer(), e = t.querySelectorAll(":scope > .ts-slide");
+    this.wrapper = document.createElement("div"), this.wrapper.className = "ts-slides-container", e.forEach((s) => this.wrapper.appendChild(s)), t.appendChild(this.wrapper);
+  }
+  unwrapSlides() {
+    if (!this.wrapper || !this.deck) return;
+    const t = this.deck.getContainer();
+    this.wrapper.querySelectorAll(".ts-slide").forEach((s) => t.appendChild(s)), this.wrapper.remove(), this.wrapper = null;
+  }
+}
+export {
+  M as OverviewPlugin,
+  x as ProgressPlugin,
+  O as SlideNumberPlugin,
+  H as TailSlide,
+  H as default
+};

package/dist/tailslide.umd.js

@@ -0,0 +1 @@
+(function(l,h){typeof exports=="object"&&typeof module<"u"?h(exports):typeof define=="function"&&define.amd?define(["exports"],h):(l=typeof globalThis<"u"?globalThis:l||self,h(l.TailSlide={}))})(this,(function(l){"use strict";const h={el:".ts-deck",transition:"slide",transitionSpeed:500,easing:"ease-in-out",keyboard:!0,hash:!0,progress:!0,slideNumber:!0,touch:!0,clickToAdvance:!1,autoSlide:0,loop:!1,startSlide:0,dark:!0,deckClass:""};class y{constructor(){this.listeners=new Map}on(t,e){this.listeners.has(t)||this.listeners.set(t,new Set),this.listeners.get(t).add(e)}off(t,e){var s;(s=this.listeners.get(t))==null||s.delete(e)}emit(t,e){var s;(s=this.listeners.get(t))==null||s.forEach(n=>n(e))}removeAll(){this.listeners.clear()}}class w{constructor(t){this.state={currentSlide:0,currentFragment:-1,totalSlides:t,isOverview:!1,isPaused:!1}}get(){return{...this.state}}get currentSlide(){return this.state.currentSlide}set currentSlide(t){this.state.currentSlide=t}get currentFragment(){return this.state.currentFragment}set currentFragment(t){this.state.currentFragment=t}get totalSlides(){return this.state.totalSlides}set totalSlides(t){this.state.totalSlides=t}get isOverview(){return this.state.isOverview}set isOverview(t){this.state.isOverview=t}get isPaused(){return this.state.isPaused}set isPaused(t){this.state.isPaused=t}}const S=50;class k{constructor(t,e){this.touchStartX=0,this.touchStartY=0,this.deck=t,this.config=e,this.container=t.getContainer(),this.handleKeyDown=this.onKeyDown.bind(this),this.handleClick=this.onClick.bind(this),this.handleTouchStart=this.onTouchStart.bind(this),this.handleTouchEnd=this.onTouchEnd.bind(this),this.bind()}bind(){this.config.keyboard&&document.addEventListener("keydown",this.handleKeyDown),this.config.clickToAdvance&&this.container.addEventListener("click",this.handleClick),this.config.touch&&(this.container.addEventListener("touchstart",this.handleTouchStart,{passive:!0}),this.container.addEventListener("touchend",this.handleTouchEnd))}onKeyDown(t){if(!(t.metaKey||t.ctrlKey||t.altKey))switch(t.key){case"ArrowRight":case"ArrowDown":case" ":case"n":t.preventDefault(),this.deck.next();break;case"ArrowLeft":case"ArrowUp":case"p":t.preventDefault(),this.deck.prev();break;case"Home":t.preventDefault(),this.deck.goTo(0);break;case"End":t.preventDefault(),this.deck.goTo(this.deck.getSlides().length-1);break;case"Escape":t.preventDefault(),this.deck.toggleOverview();break}}onClick(t){this.deck.next()}onTouchStart(t){const e=t.touches[0];this.touchStartX=e.clientX,this.touchStartY=e.clientY}onTouchEnd(t){const e=t.changedTouches[0],s=e.clientX-this.touchStartX,n=e.clientY-this.touchStartY;Math.abs(s)<S||Math.abs(n)>Math.abs(s)||(t.preventDefault(),s<0?this.deck.next():this.deck.prev())}destroy(){document.removeEventListener("keydown",this.handleKeyDown),this.container.removeEventListener("click",this.handleClick),this.container.removeEventListener("touchstart",this.handleTouchStart),this.container.removeEventListener("touchend",this.handleTouchEnd)}}const E=()=>typeof window<"u"&&window.matchMedia("(prefers-reduced-motion: reduce)").matches;function c(i,t,e){return new Promise(s=>{const n=i.animate(t,e);n.onfinish=()=>s(),n.oncancel=()=>s()})}async function T(i,t){i&&(i.style.opacity="0",i.style.pointerEvents="none",i.classList.remove("ts-active")),t.style.opacity="1",t.style.pointerEvents="auto",t.classList.add("ts-active")}async function L(i,t,e,s){const n=[];t.style.opacity="0",t.style.pointerEvents="auto",t.classList.add("ts-active"),n.push(c(t,[{opacity:0},{opacity:1}],{duration:e,easing:s,fill:"forwards"})),i&&n.push(c(i,[{opacity:1},{opacity:0}],{duration:e,easing:s,fill:"forwards"}).then(()=>{i.style.opacity="0",i.style.pointerEvents="none",i.classList.remove("ts-active")})),await Promise.all(n),t.style.opacity="1"}async function b(i,t,e,s,n){const a=n==="forward"?"100%":"-100%",o=n==="forward"?"-100%":"100%",r=[];t.style.opacity="1",t.style.pointerEvents="auto",t.classList.add("ts-active"),r.push(c(t,[{transform:`translateX(${a})`,opacity:1},{transform:"translateX(0)",opacity:1}],{duration:e,easing:s,fill:"forwards"})),i&&r.push(c(i,[{transform:"translateX(0)",opacity:1},{transform:`translateX(${o})`,opacity:1}],{duration:e,easing:s,fill:"forwards"}).then(()=>{i.style.opacity="0",i.style.pointerEvents="none",i.style.transform="",i.classList.remove("ts-active")})),await Promise.all(r),t.style.transform=""}async function C(i,t,e,s,n){const a=n==="forward"?"scale(0.8)":"scale(1.2)",o=n==="forward"?"scale(1.2)":"scale(0.8)",r=[];t.style.opacity="0",t.style.pointerEvents="auto",t.classList.add("ts-active"),r.push(c(t,[{transform:a,opacity:0},{transform:"scale(1)",opacity:1}],{duration:e,easing:s,fill:"forwards"})),i&&r.push(c(i,[{transform:"scale(1)",opacity:1},{transform:o,opacity:0}],{duration:e,easing:s,fill:"forwards"}).then(()=>{i.style.opacity="0",i.style.pointerEvents="none",i.style.transform="",i.classList.remove("ts-active")})),await Promise.all(r),t.style.opacity="1",t.style.transform=""}async function A(i,t,e,s,n){const a=n==="forward"?-180:180,o=n==="forward"?180:-180,r=e/2,d=t.parentElement;d&&(d.style.perspective="1200px"),i&&(await c(i,[{transform:"rotateY(0deg)",opacity:1},{transform:`rotateY(${o}deg)`,opacity:0}],{duration:r,easing:s,fill:"forwards"}),i.style.opacity="0",i.style.pointerEvents="none",i.style.transform="",i.classList.remove("ts-active")),t.style.pointerEvents="auto",t.classList.add("ts-active"),await c(t,[{transform:`rotateY(${a}deg)`,opacity:0},{transform:"rotateY(0deg)",opacity:1}],{duration:r,easing:s,fill:"forwards"}),t.style.opacity="1",t.style.transform=""}async function F(i,t,e,s,n){const a=t.parentElement;a&&(a.style.perspective="1200px");const o=n==="forward"?90:-90,r=n==="forward"?-90:90,d="translateZ(-50vw)",u=[];t.style.pointerEvents="auto",t.classList.add("ts-active"),t.style.transformOrigin=n==="forward"?"left center":"right center",u.push(c(t,[{transform:`${d} rotateY(${o}deg)`,opacity:.6},{transform:"translateZ(0) rotateY(0deg)",opacity:1}],{duration:e,easing:s,fill:"forwards"}).then(()=>{t.style.opacity="1",t.style.transform="",t.style.transformOrigin=""})),i&&(i.style.transformOrigin=n==="forward"?"right center":"left center",u.push(c(i,[{transform:"translateZ(0) rotateY(0deg)",opacity:1},{transform:`${d} rotateY(${r}deg)`,opacity:.6}],{duration:e,easing:s,fill:"forwards"}).then(()=>{i.style.opacity="0",i.style.pointerEvents="none",i.style.transform="",i.style.transformOrigin="",i.classList.remove("ts-active")}))),await Promise.all(u)}async function H(i,t,e,s){const n=E()?"none":e,{duration:a,easing:o,direction:r="forward"}=s;switch(n){case"none":return T(i,t);case"fade":return L(i,t,a,o);case"slide":return b(i,t,a,o,r);case"zoom":return C(i,t,a,o,r);case"flip":return A(i,t,a,o,r);case"cube":return F(i,t,a,o,r)}}const f=300,g="ease-out";function p(i){switch(i){case"fade-in":return{from:{opacity:0},to:{opacity:1}};case"fade-up":return{from:{opacity:0,transform:"translateY(20px)"},to:{opacity:1,transform:"translateY(0)"}};case"fade-down":return{from:{opacity:0,transform:"translateY(-20px)"},to:{opacity:1,transform:"translateY(0)"}};case"fade-left":return{from:{opacity:0,transform:"translateX(20px)"},to:{opacity:1,transform:"translateX(0)"}};case"fade-right":return{from:{opacity:0,transform:"translateX(-20px)"},to:{opacity:1,transform:"translateX(0)"}};case"grow":return{from:{opacity:0,transform:"scale(0.5)"},to:{opacity:1,transform:"scale(1)"}};case"shrink":return{from:{opacity:0,transform:"scale(1.5)"},to:{opacity:1,transform:"scale(1)"}};case"highlight":return{from:{backgroundColor:"transparent"},to:{backgroundColor:"rgba(255, 213, 79, 0.4)"}}}}function m(i){return i.dataset.tsAnimation||"fade-in"}class O{getFragments(t){const e=t.querySelectorAll(".ts-fragment");return Array.from(e).sort((s,n)=>{const a=parseInt(s.dataset.tsIndex||"0",10),o=parseInt(n.dataset.tsIndex||"0",10);return a!==o?a-o:0})}show(t){const e=m(t),{from:s,to:n}=p(e);t.classList.add("ts-fragment-visible"),t.animate([s,n],{duration:f,easing:g,fill:"forwards"})}hide(t){const e=m(t),{from:s,to:n}=p(e);t.classList.remove("ts-fragment-visible"),t.animate([n,s],{duration:f,easing:g,fill:"forwards"})}showAllUpTo(t,e){for(let s=0;s<=e&&s<t.length;s++){const n=t[s];n.classList.contains("ts-fragment-visible")||this.show(n)}}hideAllFrom(t,e){for(let s=e;s<t.length;s++){const n=t[s];n.classList.contains("ts-fragment-visible")&&this.hide(n)}}}class v{constructor(t={}){this.slides=[],this.navigation=null,this.plugins=[],this.autoSlideTimer=null,this.hashChangeHandler=null,this.config={...h,...t},this.events=new y;const e=this.config.el,s=typeof e=="string"?document.querySelector(e):e;if(!s)throw new Error(`TailSlide: container "${e}" not found`);this.container=s,this.container.classList.add("ts-deck"),this.config.deckClass&&this.container.classList.add(...this.config.deckClass.split(/\s+/)),this.config.dark&&this.container.classList.add("ts-dark"),this.slides=Array.from(this.container.querySelectorAll(".ts-slide")),this.state=new w(this.slides.length),this.fragmentManager=new O;const n=this.getSlideFromHash()??this.config.startSlide;this.state.currentSlide=this.clamp(n),this.updateSlideClasses(),this.navigation=new k(this,this.config),this.config.hash&&(this.hashChangeHandler=()=>{const a=this.getSlideFromHash();a!==null&&a!==this.state.currentSlide&&this.goTo(a)},window.addEventListener("hashchange",this.hashChangeHandler),this.syncHash()),this.config.autoSlide>0&&this.startAutoSlide(),this.events.emit("deck:ready",{totalSlides:this.slides.length})}goTo(t){const e=this.clamp(t);if(e===this.state.currentSlide)return;const s=this.state.currentSlide,n=e>s?"forward":"backward";H(this.slides[s],this.slides[e],this.config.transition,{duration:this.config.transitionSpeed,easing:this.config.easing,direction:n}),this.state.currentSlide=e,this.state.currentFragment=-1,this.updateSlideClasses(),this.syncHash(),this.events.emit("slide:changed",{from:s,to:e})}next(){if(this.state.isPaused)return;const t=this.getFragments(this.state.currentSlide);if(t.length>0){const s=this.state.currentFragment+1;if(s<t.length){this.state.currentFragment=s,this.fragmentManager.show(t[s]),this.events.emit("fragment:shown",{slide:this.state.currentSlide,fragment:s,element:t[s]});return}}const e=this.state.currentSlide+1;e<this.slides.length?this.goTo(e):this.config.loop&&this.goTo(0)}prev(){if(this.state.isPaused)return;const t=this.getFragments(this.state.currentSlide);if(t.length>0&&this.state.currentFragment>=0){const s=this.state.currentFragment;this.fragmentManager.hide(t[s]),this.state.currentFragment=s-1,this.events.emit("fragment:hidden",{slide:this.state.currentSlide,fragment:s,element:t[s]});return}const e=this.state.currentSlide-1;if(e>=0){this.goTo(e);const s=this.getFragments(e);s.forEach(n=>this.fragmentManager.show(n)),this.state.currentFragment=s.length-1}else this.config.loop&&this.goTo(this.slides.length-1)}getState(){return this.state.get()}getConfig(){return{...this.config}}getContainer(){return this.container}getSlides(){return[...this.slides]}getFragments(t){const e=this.slides[t];return e?Array.from(e.querySelectorAll(".ts-fragment")):[]}on(t,e){this.events.on(t,e)}off(t,e){this.events.off(t,e)}use(t){this.plugins.push(t),t.init(this)}toggleOverview(){this.state.isOverview=!this.state.isOverview,this.state.isOverview?(this.container.classList.add("ts-overview"),this.events.emit("overview:open",{})):(this.container.classList.remove("ts-overview"),this.events.emit("overview:close",{}))}destroy(){var t;this.stopAutoSlide(),(t=this.navigation)==null||t.destroy(),this.navigation=null,this.hashChangeHandler&&(window.removeEventListener("hashchange",this.hashChangeHandler),this.hashChangeHandler=null),this.plugins.forEach(e=>e.destroy()),this.plugins=[],this.events.emit("deck:destroyed",{}),this.events.removeAll()}updateSlideClasses(){const t=this.state.currentSlide;this.slides.forEach((s,n)=>{s.classList.remove("ts-active","ts-past","ts-future"),s.setAttribute("aria-hidden",String(n!==t)),n<t?s.classList.add("ts-past"):n===t?s.classList.add("ts-active"):s.classList.add("ts-future")}),this.getFragments(t).forEach(s=>this.fragmentManager.hide(s)),this.state.currentFragment=-1}clamp(t){return Math.max(0,Math.min(t,this.slides.length-1))}getSlideFromHash(){const t=window.location.hash.match(/^#\/(\d+)$/);if(!t)return null;const e=parseInt(t[1],10);return isNaN(e)?null:e}syncHash(){if(!this.config.hash)return;const t=`#/${this.state.currentSlide}`;window.location.hash!==t&&history.replaceState(null,"",t)}startAutoSlide(){this.autoSlideTimer=setInterval(()=>{this.state.isPaused||this.next()},this.config.autoSlide)}stopAutoSlide(){this.autoSlideTimer!==null&&(clearInterval(this.autoSlideTimer),this.autoSlideTimer=null)}}class x{constructor(){this.name="progress",this.bar=null,this.deck=null,this.handler=null}init(t){this.deck=t,this.bar=document.createElement("div"),this.bar.className="ts-progress",t.getContainer().appendChild(this.bar),this.handler=()=>this.update(),t.on("slide:changed",this.handler),this.update()}destroy(){var t;this.handler&&this.deck&&this.deck.off("slide:changed",this.handler),(t=this.bar)==null||t.remove(),this.bar=null,this.deck=null,this.handler=null}update(){if(!this.bar||!this.deck)return;const{currentSlide:t,totalSlides:e}=this.deck.getState(),s=e>1?t/(e-1)*100:100;this.bar.style.width=`${s}%`}}class P{constructor(){this.name="slideNumber",this.el=null,this.deck=null,this.handler=null}init(t){this.deck=t,this.el=document.createElement("div"),this.el.className="ts-slide-number",t.getContainer().appendChild(this.el),this.handler=()=>this.update(),t.on("slide:changed",this.handler),this.update()}destroy(){var t;this.handler&&this.deck&&this.deck.off("slide:changed",this.handler),(t=this.el)==null||t.remove(),this.el=null,this.deck=null,this.handler=null}update(){if(!this.el||!this.deck)return;const{currentSlide:t,totalSlides:e}=this.deck.getState();this.el.textContent=`${t+1} / ${e}`}}class M{constructor(){this.name="overview",this.deck=null,this.wrapper=null,this.keyHandler=null,this.clickHandler=null}init(t){this.deck=t,this.keyHandler=e=>{if(e.key==="o"||e.key==="O"){if(e.target instanceof HTMLInputElement||e.target instanceof HTMLTextAreaElement)return;e.preventDefault(),this.toggle()}},document.addEventListener("keydown",this.keyHandler),this.clickHandler=e=>{if(!t.getState().isOverview)return;const s=e.target.closest(".ts-slide");if(!s)return;const a=t.getSlides().indexOf(s);a!==-1&&(t.goTo(a),t.toggleOverview())},t.getContainer().addEventListener("click",this.clickHandler)}destroy(){this.keyHandler&&(document.removeEventListener("keydown",this.keyHandler),this.keyHandler=null),this.clickHandler&&this.deck&&(this.deck.getContainer().removeEventListener("click",this.clickHandler),this.clickHandler=null),this.unwrapSlides(),this.deck=null}toggle(){if(!this.deck)return;this.deck.getState().isOverview?this.unwrapSlides():this.wrapSlides(),this.deck.toggleOverview()}wrapSlides(){if(!this.deck||this.wrapper)return;const t=this.deck.getContainer(),e=t.querySelectorAll(":scope > .ts-slide");this.wrapper=document.createElement("div"),this.wrapper.className="ts-slides-container",e.forEach(s=>this.wrapper.appendChild(s)),t.appendChild(this.wrapper)}unwrapSlides(){if(!this.wrapper||!this.deck)return;const t=this.deck.getContainer();this.wrapper.querySelectorAll(".ts-slide").forEach(s=>t.appendChild(s)),this.wrapper.remove(),this.wrapper=null}}l.OverviewPlugin=M,l.ProgressPlugin=x,l.SlideNumberPlugin=P,l.TailSlide=v,l.default=v,Object.defineProperties(l,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/dist/transitions/index.d.ts

@@ -0,0 +1,7 @@
+import { TransitionType } from '../types';
+export interface TransitionOptions {
+    duration: number;
+    easing: string;
+    direction?: 'forward' | 'backward';
+}
+export declare function applyTransition(from: HTMLElement | null, to: HTMLElement, type: TransitionType, options: TransitionOptions): Promise<void>;

package/dist/tw-slide.css

@@ -0,0 +1 @@
+*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.\!container{width:100%!important}.container{width:100%}@media(min-width:640px){.\!container{max-width:640px!important}.container{max-width:640px}}@media(min-width:768px){.\!container{max-width:768px!important}.container{max-width:768px}}@media(min-width:1024px){.\!container{max-width:1024px!important}.container{max-width:1024px}}@media(min-width:1280px){.\!container{max-width:1280px!important}.container{max-width:1280px}}@media(min-width:1536px){.\!container{max-width:1536px!important}.container{max-width:1536px}}.ts-deck{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;background-color:#fff;color:#1a1a1a}.ts-deck.ts-dark{background-color:#0a0a0a;color:#f5f5f5}.ts-slide{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;padding:2rem;opacity:0;pointer-events:none;will-change:transform,opacity;z-index:0}.ts-slide.ts-active{opacity:1;pointer-events:auto;z-index:10}.ts-slide.ts-past,.ts-slide.ts-future{opacity:0;pointer-events:none}.ts-slide>.ts-content{width:100%;max-width:64rem;margin:0 auto}.ts-fragment{opacity:0;will-change:transform,opacity}.ts-fragment.ts-fragment-visible{opacity:1}.ts-progress{position:fixed;top:0;left:0;height:.1875rem;background-color:#3b82f6;transition:width .3s ease-out;z-index:50}.ts-dark .ts-progress{background-color:#60a5fa}.ts-slide-number{position:fixed;bottom:1rem;right:1rem;font-size:.875rem;line-height:1.25rem;opacity:.6;z-index:50;font-variant-numeric:tabular-nums}.ts-deck.ts-overview{overflow:auto}.ts-deck.ts-overview .ts-slide{position:relative;opacity:1;pointer-events:auto;cursor:pointer;border:2px solid transparent;border-radius:.5rem;transition:border-color .2s ease,box-shadow .2s ease}.ts-deck.ts-overview .ts-slide:hover{border-color:#3b82f6;box-shadow:0 0 0 2px #3b82f64d}.ts-deck.ts-overview .ts-slide.ts-active{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f666}.ts-overview .ts-slides-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;padding:2rem;width:100%;min-height:100vh;align-content:start}.ts-overview .ts-slides-container .ts-slide{aspect-ratio:16 / 9;inset:auto;height:auto;padding:1rem;font-size:.5em}.ts-overview .ts-progress,.ts-overview .ts-slide-number{display:none}.ts-slide h1{font-size:clamp(1.5rem,5vw,3.5rem);font-weight:700;line-height:1.1;margin-bottom:.75em}.ts-slide h2{font-size:clamp(1.25rem,4vw,2.5rem);font-weight:600;line-height:1.2;margin-bottom:.5em}.ts-slide h3{font-size:clamp(1rem,3vw,1.75rem);font-weight:600;line-height:1.3;margin-bottom:.5em}.ts-slide p{font-size:clamp(.875rem,2vw,1.25rem);line-height:1.6;margin-bottom:.75em}.ts-slide ul,.ts-slide ol{font-size:clamp(.875rem,2vw,1.25rem);line-height:1.6;padding-left:1.5em;margin-bottom:.75em}.ts-slide li{margin-bottom:.25em}.ts-slide code{font-size:.9em;padding:.125em .375em;border-radius:.25rem;background-color:#0000000f}.ts-dark .ts-slide code{background-color:#ffffff1a}.ts-slide pre{font-size:clamp(.75rem,1.5vw,1rem);padding:1em;border-radius:.5rem;overflow-x:auto;background-color:#0000000a;margin-bottom:.75em}.ts-dark .ts-slide pre{background-color:#ffffff0f}.ts-slide pre code{padding:0;background:none}.ts-slide img{max-width:100%;height:auto;border-radius:.5rem}@media(min-width:640px){.ts-slide{padding:3rem}}@media(min-width:1024px){.ts-slide{padding:4rem}}.col-span-2{grid-column:span 2 / span 2}.row-span-2{grid-row:span 2 / span 2}.mx-auto{margin-left:auto;margin-right:auto}.mb-1{margin-bottom:.25rem}.mb-10{margin-bottom:2.5rem}.mb-12{margin-bottom:3rem}.mb-16{margin-bottom:4rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-3{margin-left:.75rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-10{height:2.5rem}.h-2{height:.5rem}.h-3{height:.75rem}.w-10{width:2.5rem}.w-2{width:.5rem}.w-3{width:.75rem}.max-w-2xl{max-width:42rem}.max-w-3xl{max-width:48rem}.max-w-xl{max-width:36rem}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.overflow-hidden{overflow:hidden}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-blue-500\/20{border-color:#3b82f633}.border-gray-600{--tw-border-opacity: 1;border-color:rgb(75 85 99 / var(--tw-border-opacity, 1))}.border-pink-500\/30{border-color:#ec48994d}.border-purple-500\/20{border-color:#a855f733}.border-teal-500\/20{border-color:#14b8a633}.border-violet-500\/30{border-color:#8b5cf64d}.border-white\/\[0\.06\]{border-color:#ffffff0f}.border-white\/\[0\.08\]{border-color:#ffffff14}.bg-\[\#0d1117\]{--tw-bg-opacity: 1;background-color:rgb(13 17 23 / var(--tw-bg-opacity, 1))}.bg-\[\#111\]{--tw-bg-opacity: 1;background-color:rgb(17 17 17 / var(--tw-bg-opacity, 1))}.bg-blue-400{--tw-bg-opacity: 1;background-color:rgb(96 165 250 / var(--tw-bg-opacity, 1))}.bg-blue-500{--tw-bg-opacity: 1;background-color:rgb(59 130 246 / var(--tw-bg-opacity, 1))}.bg-blue-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.bg-green-500\/80{background-color:#22c55ecc}.bg-pink-500\/20{background-color:#ec489933}.bg-red-500\/80{background-color:#ef4444cc}.bg-violet-600\/20{background-color:#7c3aed33}.bg-white{--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1))}.bg-white\/\[0\.03\]{background-color:#ffffff08}.bg-white\/\[0\.04\]{background-color:#ffffff0a}.bg-white\/\[0\.06\]{background-color:#ffffff0f}.bg-yellow-500\/80{background-color:#eab308cc}.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}.bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.from-amber-400{--tw-gradient-from: #fbbf24 var(--tw-gradient-from-position);--tw-gradient-to: rgb(251 191 36 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-blue-400{--tw-gradient-from: #60a5fa var(--tw-gradient-from-position);--tw-gradient-to: rgb(96 165 250 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-blue-600{--tw-gradient-from: #2563eb var(--tw-gradient-from-position);--tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-blue-900\/40{--tw-gradient-from: rgb(30 58 138 / .4) var(--tw-gradient-from-position);--tw-gradient-to: rgb(30 58 138 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-cyan-400{--tw-gradient-from: #22d3ee var(--tw-gradient-from-position);--tw-gradient-to: rgb(34 211 238 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-emerald-400{--tw-gradient-from: #34d399 var(--tw-gradient-from-position);--tw-gradient-to: rgb(52 211 153 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-emerald-600{--tw-gradient-from: #059669 var(--tw-gradient-from-position);--tw-gradient-to: rgb(5 150 105 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-pink-400{--tw-gradient-from: #f472b6 var(--tw-gradient-from-position);--tw-gradient-to: rgb(244 114 182 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-purple-600{--tw-gradient-from: #9333ea var(--tw-gradient-from-position);--tw-gradient-to: rgb(147 51 234 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-purple-900\/40{--tw-gradient-from: rgb(88 28 135 / .4) var(--tw-gradient-from-position);--tw-gradient-to: rgb(88 28 135 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-rose-400{--tw-gradient-from: #fb7185 var(--tw-gradient-from-position);--tw-gradient-to: rgb(251 113 133 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-teal-400{--tw-gradient-from: #2dd4bf var(--tw-gradient-from-position);--tw-gradient-to: rgb(45 212 191 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-teal-900\/40{--tw-gradient-from: rgb(19 78 74 / .4) var(--tw-gradient-from-position);--tw-gradient-to: rgb(19 78 74 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-violet-400{--tw-gradient-from: #a78bfa var(--tw-gradient-from-position);--tw-gradient-to: rgb(167 139 250 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.from-yellow-300{--tw-gradient-from: #fde047 var(--tw-gradient-from-position);--tw-gradient-to: rgb(253 224 71 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)}.via-purple-500{--tw-gradient-to: rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to)}.via-violet-400{--tw-gradient-to: rgb(167 139 250 / 0) var(--tw-gradient-to-position);--tw-gradient-stops: var(--tw-gradient-from), #a78bfa var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-blue-500{--tw-gradient-to: #3b82f6 var(--tw-gradient-to-position)}.to-blue-800{--tw-gradient-to: #1e40af var(--tw-gradient-to-position)}.to-cyan-400{--tw-gradient-to: #22d3ee var(--tw-gradient-to-position)}.to-emerald-500{--tw-gradient-to: #10b981 var(--tw-gradient-to-position)}.to-emerald-900\/40{--tw-gradient-to: rgb(6 78 59 / .4) var(--tw-gradient-to-position)}.to-fuchsia-500{--tw-gradient-to: #d946ef var(--tw-gradient-to-position)}.to-indigo-900\/40{--tw-gradient-to: rgb(49 46 129 / .4) var(--tw-gradient-to-position)}.to-orange-400{--tw-gradient-to: #fb923c var(--tw-gradient-to-position)}.to-orange-500{--tw-gradient-to: #f97316 var(--tw-gradient-to-position)}.to-pink-500{--tw-gradient-to: #ec4899 var(--tw-gradient-to-position)}.to-pink-600{--tw-gradient-to: #db2777 var(--tw-gradient-to-position)}.to-purple-500{--tw-gradient-to: #a855f7 var(--tw-gradient-to-position)}.to-purple-600{--tw-gradient-to: #9333ea var(--tw-gradient-to-position)}.to-red-500{--tw-gradient-to: #ef4444 var(--tw-gradient-to-position)}.to-rose-500{--tw-gradient-to: #f43f5e var(--tw-gradient-to-position)}.to-teal-700{--tw-gradient-to: #0f766e var(--tw-gradient-to-position)}.to-violet-900\/40{--tw-gradient-to: rgb(76 29 149 / .4) var(--tw-gradient-to-position)}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.text-left{text-align:left}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-6xl{font-size:3.75rem;line-height:1}.text-7xl{font-size:4.5rem;line-height:1}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.leading-relaxed{line-height:1.625}.tracking-\[0\.3em\]{letter-spacing:.3em}.tracking-wider{letter-spacing:.05em}.text-amber-400{--tw-text-opacity: 1;color:rgb(251 191 36 / var(--tw-text-opacity, 1))}.text-blue-200{--tw-text-opacity: 1;color:rgb(191 219 254 / var(--tw-text-opacity, 1))}.text-blue-300{--tw-text-opacity: 1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.text-blue-300\/60{color:#93c5fd99}.text-blue-400{--tw-text-opacity: 1;color:rgb(96 165 250 / var(--tw-text-opacity, 1))}.text-emerald-200{--tw-text-opacity: 1;color:rgb(167 243 208 / var(--tw-text-opacity, 1))}.text-emerald-400{--tw-text-opacity: 1;color:rgb(52 211 153 / var(--tw-text-opacity, 1))}.text-gray-200{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.text-gray-300{--tw-text-opacity: 1;color:rgb(209 213 219 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-gray-700{--tw-text-opacity: 1;color:rgb(55 65 81 / var(--tw-text-opacity, 1))}.text-gray-800{--tw-text-opacity: 1;color:rgb(31 41 55 / var(--tw-text-opacity, 1))}.text-orange-400{--tw-text-opacity: 1;color:rgb(251 146 60 / var(--tw-text-opacity, 1))}.text-pink-200{--tw-text-opacity: 1;color:rgb(251 207 232 / var(--tw-text-opacity, 1))}.text-pink-400{--tw-text-opacity: 1;color:rgb(244 114 182 / var(--tw-text-opacity, 1))}.text-purple-300\/60{color:#d8b4fe99}.text-purple-400{--tw-text-opacity: 1;color:rgb(192 132 252 / var(--tw-text-opacity, 1))}.text-rose-400{--tw-text-opacity: 1;color:rgb(251 113 133 / var(--tw-text-opacity, 1))}.text-teal-300\/60{color:#5eead499}.text-teal-400{--tw-text-opacity: 1;color:rgb(45 212 191 / var(--tw-text-opacity, 1))}.text-violet-300{--tw-text-opacity: 1;color:rgb(196 181 253 / var(--tw-text-opacity, 1))}.text-violet-400\/60{color:#a78bfa99}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-300{--tw-text-opacity: 1;color:rgb(253 224 71 / var(--tw-text-opacity, 1))}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-in{transition-timing-function:cubic-bezier(.4,0,1,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}@media print{.ts-deck{position:static;overflow:visible;background:#fff!important;color:#000!important}.ts-slide{position:relative!important;opacity:1!important;pointer-events:auto!important;page-break-after:always;page-break-inside:avoid;-moz-column-break-after:page;break-after:page;-moz-column-break-inside:avoid;break-inside:avoid;min-height:100vh;padding:2rem;z-index:auto!important}.ts-slide:last-child{page-break-after:auto;-moz-column-break-after:auto;break-after:auto}.ts-fragment{opacity:1!important;transform:none!important}.ts-progress,.ts-slide-number{display:none!important}}.hover\:border-violet-500\/40:hover{border-color:#8b5cf666}@media(min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:text-2xl{font-size:1.5rem;line-height:2rem}.md\:text-7xl{font-size:4.5rem;line-height:1}.md\:text-8xl{font-size:6rem;line-height:1}}

package/dist/types.d.ts

@@ -0,0 +1,99 @@
+export type TransitionType = 'none' | 'fade' | 'slide' | 'zoom' | 'flip' | 'cube';
+export type FragmentAnimation = 'fade-in' | 'fade-up' | 'fade-down' | 'fade-left' | 'fade-right' | 'grow' | 'shrink' | 'highlight';
+export type EasingFunction = 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' | string;
+export interface TailSlideConfig {
+    /** CSS selector or element for the deck container */
+    el?: string | HTMLElement;
+    /** Default transition between slides */
+    transition?: TransitionType;
+    /** Transition duration in ms */
+    transitionSpeed?: number;
+    /** Easing function for transitions */
+    easing?: EasingFunction;
+    /** Enable keyboard navigation */
+    keyboard?: boolean;
+    /** Enable hash-based URL navigation */
+    hash?: boolean;
+    /** Show progress bar */
+    progress?: boolean;
+    /** Show slide numbers */
+    slideNumber?: boolean;
+    /** Enable touch/swipe navigation */
+    touch?: boolean;
+    /** Enable click to advance */
+    clickToAdvance?: boolean;
+    /** Auto-slide interval in ms (0 = disabled) */
+    autoSlide?: number;
+    /** Loop back to first slide after last */
+    loop?: boolean;
+    /** Start slide index (0-based) */
+    startSlide?: number;
+    /** Dark mode */
+    dark?: boolean;
+    /** Custom CSS classes for the deck */
+    deckClass?: string;
+}
+export declare const DEFAULT_CONFIG: Required<TailSlideConfig>;
+export interface DeckState {
+    currentSlide: number;
+    currentFragment: number;
+    totalSlides: number;
+    isOverview: boolean;
+    isPaused: boolean;
+}
+export interface TailSlideEvents {
+    'slide:changed': {
+        from: number;
+        to: number;
+    };
+    'fragment:shown': {
+        slide: number;
+        fragment: number;
+        element: HTMLElement;
+    };
+    'fragment:hidden': {
+        slide: number;
+        fragment: number;
+        element: HTMLElement;
+    };
+    'deck:ready': {
+        totalSlides: number;
+    };
+    'deck:destroyed': {};
+    'overview:open': {};
+    'overview:close': {};
+}
+export type EventCallback<T = unknown> = (data: T) => void;
+export interface TailSlidePlugin {
+    name: string;
+    init(deck: TailSlideAPI): void;
+    destroy(): void;
+}
+export interface TailSlideAPI {
+    /** Navigate to a specific slide */
+    goTo(index: number): void;
+    /** Go to next slide/fragment */
+    next(): void;
+    /** Go to previous slide/fragment */
+    prev(): void;
+    /** Get current state */
+    getState(): DeckState;
+    /** Get config */
+    getConfig(): Required<TailSlideConfig>;
+    /** Get the deck container element */
+    getContainer(): HTMLElement;
+    /** Get all slide elements */
+    getSlides(): HTMLElement[];
+    /** Get fragments for a specific slide */
+    getFragments(slideIndex: number): HTMLElement[];
+    /** Register an event listener */
+    on<K extends keyof TailSlideEvents>(event: K, callback: EventCallback<TailSlideEvents[K]>): void;
+    /** Remove an event listener */
+    off<K extends keyof TailSlideEvents>(event: K, callback: EventCallback<TailSlideEvents[K]>): void;
+    /** Register a plugin */
+    use(plugin: TailSlidePlugin): void;
+    /** Toggle overview mode */
+    toggleOverview(): void;
+    /** Destroy the instance */
+    destroy(): void;
+}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "tw-slide",
+  "version": "0.1.0",
+  "description": "Modern Tailwind-based presentation library for the web",
+  "type": "module",
+  "main": "dist/tailslide.umd.js",
+  "module": "dist/tailslide.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/tailslide.es.js",
+      "require": "./dist/tailslide.umd.js"
+    },
+    "./style.css": "./dist/tail-slide.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite serve demo",
+    "build": "vite build",
+    "build:demo": "vite build --config vite.demo.config.ts",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "presentation",
+    "slides",
+    "tailwind",
+    "html",
+    "javascript",
+    "typescript"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.3",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.7.3",
+    "vite": "^6.1.0",
+    "vite-plugin-dts": "^4.5.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": ""
+  }
+}