@thisiscrowd/crowdbox 1.0.0

package/dist/crowdbox.esm.js

@@ -0,0 +1,1557 @@
+/*!
+ * Crowdbox v1.0.0
+ * A modern, lightweight, extensible Crowdbox gallery plugin supporting images and video
+ * (c) 2026 Crowdbox
+ * Released under the MIT License.
+ */
+class EventEmitter {
+  constructor() {
+    this._events = Object.create(null);
+  }
+
+  on(event, listener) {
+    if (!this._events[event]) this._events[event] = [];
+    this._events[event].push(listener);
+    return this;
+  }
+
+  once(event, listener) {
+    const wrapper = (...args) => {
+      listener(...args);
+      this.off(event, wrapper);
+    };
+    wrapper._original = listener;
+    return this.on(event, wrapper);
+  }
+
+  off(event, listener) {
+    if (!this._events[event]) return this;
+    this._events[event] = this._events[event].filter(
+      (l) => l !== listener && l._original !== listener
+    );
+    return this;
+  }
+
+  emit(event, ...args) {
+    if (!this._events[event]) return false;
+    [...this._events[event]].forEach((l) => l(...args));
+    return true;
+  }
+
+  removeAllListeners(event) {
+    if (event) {
+      delete this._events[event];
+    } else {
+      this._events = Object.create(null);
+    }
+    return this;
+  }
+}
+
+// Central registry for media adapters and plugins so the host app
+// can swap or extend them without forking the library.
+const adapters = new Map();
+const plugins = new Map();
+
+const Registry = {
+  registerAdapter(type, adapter) {
+    adapters.set(type, adapter);
+  },
+
+  getAdapter(type) {
+    return adapters.get(type) ?? null;
+  },
+
+  registerPlugin(name, plugin) {
+    plugins.set(name, plugin);
+  },
+
+  getPlugin(name) {
+    return plugins.get(name) ?? null;
+  },
+
+  getPlugins() {
+    return [...plugins.values()];
+  },
+};
+
+function createElement(tag, attrs = {}, ...children) {
+  const el = document.createElement(tag);
+  for (const [k, v] of Object.entries(attrs)) {
+    if (k === 'class') el.className = v;
+    else if (k.startsWith('data-')) el.dataset[k.slice(5).replace(/-([a-z])/g, (_, c) => c.toUpperCase())] = v;
+    else if (k === 'aria' || k.startsWith('aria-')) el.setAttribute(k, v);
+    else el[k] = v;
+  }
+  children.flat().forEach((child) => {
+    if (child == null) return;
+    el.appendChild(typeof child === 'string' ? document.createTextNode(child) : child);
+  });
+  return el;
+}
+
+function mergeDeep(target, ...sources) {
+  for (const src of sources) {
+    for (const key of Object.keys(src ?? {})) {
+      if (src[key] && typeof src[key] === 'object' && !Array.isArray(src[key])) {
+        if (!target[key] || typeof target[key] !== 'object') target[key] = {};
+        mergeDeep(target[key], src[key]);
+      } else {
+        target[key] = src[key];
+      }
+    }
+  }
+  return target;
+}
+
+function getYouTubeId(url) {
+  const m = url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
+  return m ? m[1] : null;
+}
+
+function getVimeoId(url) {
+  const m = url.match(/vimeo\.com\/(?:video\/)?(\d+)/);
+  return m ? m[1] : null;
+}
+
+function isVideoUrl(url) {
+  return /\.(mp4|webm|ogg|mov)(\?.*)?$/i.test(url);
+}
+
+function isYouTubeUrl(url) {
+  return /youtube\.com|youtu\.be/.test(url);
+}
+
+function isVimeoUrl(url) {
+  return /vimeo\.com/.test(url);
+}
+
+function detectMediaType(src) {
+  if (!src) return 'unknown';
+  if (isYouTubeUrl(src)) return 'youtube';
+  if (isVimeoUrl(src)) return 'vimeo';
+  if (isVideoUrl(src)) return 'video';
+  if (/\.(jpg|jpeg|png|gif|webp|avif|svg)(\?.*)?$/i.test(src)) return 'image';
+  return 'iframe';
+}
+
+function trapFocus(container) {
+  const focusable = container.querySelectorAll(
+    'a[href],button:not([disabled]),textarea,input,select,[tabindex]:not([tabindex="-1"])'
+  );
+  const first = focusable[0];
+  const last = focusable[focusable.length - 1];
+
+  function handler(e) {
+    if (e.key !== 'Tab') return;
+    if (e.shiftKey) {
+      if (document.activeElement === first) { e.preventDefault(); last?.focus(); }
+    } else {
+      if (document.activeElement === last) { e.preventDefault(); first?.focus(); }
+    }
+  }
+  container.addEventListener('keydown', handler);
+  return () => container.removeEventListener('keydown', handler);
+}
+
+function requestFullscreen(el) {
+  return (el.requestFullscreen || el.webkitRequestFullscreen || el.mozRequestFullScreen)?.call(el);
+}
+
+function exitFullscreen() {
+  return (document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen)?.call(document);
+}
+
+function isFullscreen() {
+  return !!(document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement);
+}
+
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+
+function supportsPassive() {
+  let ok = false;
+  try {
+    window.addEventListener('test', null, Object.defineProperty({}, 'passive', { get() { ok = true; } }));
+  } catch (_) {}
+  return ok;
+}
+
+const passiveOpt = supportsPassive() ? { passive: true } : false;
+
+const DEFAULTS = {
+  selector: '[data-lgx]',
+  gallerySelector: null,     // group items by this attr value
+  loop: true,
+  keyboard: true,
+  touch: true,
+  drag: true,
+  zoom: true,
+  thumbnails: true,
+  captions: true,
+  counter: true,
+  fullscreen: true,
+  download: false,
+  share: false,
+  closeOnBackdrop: true,
+  closeOnEscape: true,
+  animationDuration: 300,
+  slideAnimationDuration: 360,
+  zoomStep: 0.5,
+  zoomMax: 4,
+  zoomMin: 1,
+  lazyLoad: true,
+  preload: 1,              // preload N slides ahead/behind
+  autoplay: false,
+  autoplayInterval: 4000,
+  showAutoplay: true,      // show/hide autoplay button in toolbar
+  i18n: {
+    close: 'Close',
+    prev: 'Previous',
+    next: 'Next',
+    zoomIn: 'Zoom in',
+    zoomOut: 'Zoom out',
+    fullscreen: 'Fullscreen',
+    download: 'Download',
+    share: 'Share',
+    autoplayStart: 'Start slideshow',
+    autoplayStop: 'Stop slideshow',
+    counter: '{current} of {total}',
+  },
+};
+
+class Crowdbox extends EventEmitter {
+  constructor(options = {}) {
+    super();
+    this.opts = mergeDeep({}, DEFAULTS, options);
+    this._items = [];
+    this._index = 0;
+    this._open = false;
+    this._zoom = 1;
+    this._panX = 0;
+    this._panY = 0;
+    this._autoplayTimer = null;
+    this._releaseFocusTrap = null;
+    this._previousFocus = null;
+    this._plugins = [];
+    this._dom = {};
+
+    this._initPlugins();
+    this._bindTriggers();
+  }
+
+  // ─── Public API ──────────────────────────────────────────────────────────────
+
+  open(items, startIndex = 0) {
+    if (this._open) this.close();
+    this._items = this._normalizeItems(items);
+    this._index = clamp(startIndex, 0, this._items.length - 1);
+    this._open = true;
+    this._zoom = 1;
+    this._panX = 0;
+    this._panY = 0;
+
+    this._buildDOM();
+    this._attachKeyboard();
+    this._attachTouch();
+    this._renderSlide(this._index);
+    this._preload(this._index);
+    this._pluginHook('afterOpen');
+    this.emit('open', { index: this._index, item: this._items[this._index] });
+
+    if (this.opts.autoplay && !this._isAutoplayBlockingMedia(this._items[this._index])) this._startAutoplay();
+    return this;
+  }
+
+  close() {
+    if (!this._open) return this;
+    this._open = false;
+    this._stopAutoplay();
+    this._pauseCurrentMedia();
+    this._pluginHook('beforeClose');
+
+    const modal = this._dom.modal;
+    if (modal) {
+      modal.style.animation = `lgx-fade-out ${this.opts.animationDuration}ms ease forwards`;
+      setTimeout(() => { modal.remove(); this._dom = {}; }, this.opts.animationDuration);
+    }
+
+    this._detachKeyboard();
+    if (this._releaseFocusTrap) { this._releaseFocusTrap(); this._releaseFocusTrap = null; }
+    if (this._previousFocus) { this._previousFocus.focus(); this._previousFocus = null; }
+    document.body.style.overflow = '';
+
+    this._pluginHook('afterClose');
+    this.emit('close');
+    return this;
+  }
+
+  next() {
+    const total = this._items.length;
+    if (!total) return this;
+    if (!this.opts.loop && this._index >= total - 1) return this;
+    this._goTo((this._index + 1) % total, 'next');
+    return this;
+  }
+
+  prev() {
+    const total = this._items.length;
+    if (!total) return this;
+    if (!this.opts.loop && this._index === 0) return this;
+    this._goTo((this._index - 1 + total) % total, 'prev');
+    return this;
+  }
+
+  goTo(index) {
+    const i = clamp(index, 0, this._items.length - 1);
+    this._goTo(i, i > this._index ? 'next' : 'prev');
+    return this;
+  }
+
+  zoomIn() {
+    this._applyZoom(this._zoom + this.opts.zoomStep);
+    return this;
+  }
+
+  zoomOut() {
+    this._applyZoom(this._zoom - this.opts.zoomStep);
+    return this;
+  }
+
+  resetZoom() {
+    this._applyZoom(1, true);
+    return this;
+  }
+
+  startAutoplay() { this._startAutoplay(); return this; }
+  stopAutoplay() { this._stopAutoplay(); return this; }
+  toggleAutoplay() {
+    this._autoplayTimer ? this._stopAutoplay() : this._startAutoplay();
+    return this;
+  }
+
+  destroy() {
+    this.close();
+    this._detachTriggers();
+    this._plugins.forEach((p) => p.destroy?.());
+    this.removeAllListeners();
+  }
+
+  // ─── Internal ─────────────────────────────────────────────────────────────────
+
+  _normalizeItems(items) {
+    if (!Array.isArray(items)) items = [items];
+    return items.map((item) => {
+      if (typeof item === 'string') item = { src: item };
+      if (!item.type) item.type = detectMediaType(item.src);
+      return item;
+    });
+  }
+
+  _initPlugins() {
+    const pluginDefs = Registry.getPlugins();
+    pluginDefs.forEach((Def) => {
+      if (this.opts[Def.pluginName] === false) return;
+      const inst = typeof Def === 'function' ? new Def(this) : Def;
+      if (typeof inst.init === 'function') inst.init(this);
+      this._plugins.push(inst);
+    });
+  }
+
+  _pluginHook(hook, ...args) {
+    this._plugins.forEach((p) => p[hook]?.(...args));
+  }
+
+  // ─── DOM ──────────────────────────────────────────────────────────────────────
+
+  _buildDOM() {
+    this._previousFocus = document.activeElement;
+    document.body.style.overflow = 'hidden';
+
+    const modal = createElement('div', {
+      class: 'lgx-modal',
+      role: 'dialog',
+      'aria-modal': 'true',
+      'aria-label': 'Media lightbox',
+    });
+    modal.style.setProperty('--lgx-duration', `${this.opts.animationDuration}ms`);
+    modal.style.setProperty('--lgx-slide-duration', `${this.opts.slideAnimationDuration}ms`);
+
+    const backdrop = createElement('div', { class: 'lgx-backdrop' });
+    if (this.opts.closeOnBackdrop) {
+      backdrop.addEventListener('click', () => this.close());
+    }
+
+    const container = createElement('div', { class: 'lgx-container' });
+
+    // Toolbar
+    const toolbar = this._buildToolbar();
+
+    // Stage — nav buttons live here so top:50% is relative to the image area,
+    // not the full container (which includes caption + thumbnail strip).
+    const stage = createElement('div', { class: 'lgx-stage', 'aria-live': 'polite' });
+    const slideWrapper = createElement('div', { class: 'lgx-slide-wrapper' });
+    const btnPrev = this._buildNavBtn('prev');
+    const btnNext = this._buildNavBtn('next');
+    stage.append(slideWrapper, btnPrev, btnNext);
+
+    // Caption — normal flex child so it sits between stage and thumbnail strip
+    // without z-index fights. Hidden via display:none when empty.
+    const caption = createElement('div', { class: 'lgx-caption', 'aria-live': 'polite' });
+    caption.style.display = 'none';
+
+    // Counter (absolute, overlays top of stage)
+    const counter = createElement('div', { class: 'lgx-counter', 'aria-live': 'polite' });
+
+    // Loading spinner
+    const spinner = createElement('div', { class: 'lgx-spinner', 'aria-hidden': 'true' },
+      createElement('div', { class: 'lgx-spinner__ring' })
+    );
+
+    // Order matters for flex layout: stage grows, caption sits below it, thumbs at bottom
+    container.append(toolbar, stage, caption, counter, spinner);
+
+    modal.append(backdrop, container);
+    document.body.appendChild(modal);
+
+    // Animate in
+    modal.style.animation = `lgx-fade-in ${this.opts.animationDuration}ms ease forwards`;
+
+    const btnAutoplay = toolbar.querySelector('.lgx-btn--autoplay');
+    this._dom = { modal, backdrop, container, stage, slideWrapper, toolbar, caption, counter, spinner, btnPrev, btnNext, btnAutoplay };
+    this._releaseFocusTrap = trapFocus(modal);
+
+    // Focus the container for keyboard events
+    container.setAttribute('tabindex', '-1');
+    container.focus();
+
+    this._pluginHook('afterBuildDOM');
+  }
+
+  _buildToolbar() {
+    const toolbar = createElement('div', { class: 'lgx-toolbar', role: 'toolbar', 'aria-label': 'Gallery controls' });
+
+    const close = createElement('button', {
+      class: 'lgx-btn lgx-btn--close',
+      type: 'button',
+      'aria-label': this.opts.i18n.close,
+      title: this.opts.i18n.close,
+    }, this._svgIcon('close'));
+    close.addEventListener('click', () => this.close());
+
+    const autoplay = createElement('button', {
+      class: 'lgx-btn lgx-btn--autoplay',
+      type: 'button',
+      'aria-label': this.opts.i18n.autoplayStart,
+      title: this.opts.i18n.autoplayStart,
+      'aria-pressed': 'false',
+    }, this._svgIcon('play'));
+    autoplay.addEventListener('click', () => this.toggleAutoplay());
+
+    if (this.opts.showAutoplay) toolbar.appendChild(autoplay);
+    toolbar.appendChild(close);
+    this._dom.btnAutoplay = this.opts.showAutoplay ? autoplay : null;
+    this._dom.btnClose = close;
+    this._pluginHook('buildToolbar', toolbar);
+
+    return toolbar;
+  }
+
+  _buildNavBtn(dir) {
+    const label = dir === 'prev' ? this.opts.i18n.prev : this.opts.i18n.next;
+    const btn = createElement('button', {
+      class: `lgx-btn lgx-btn--nav lgx-btn--${dir}`,
+      type: 'button',
+      'aria-label': label,
+      title: label,
+    }, this._svgIcon(dir));
+
+    btn.addEventListener('click', () => (dir === 'prev' ? this.prev() : this.next()));
+
+    if (this._items.length <= 1) btn.style.display = 'none';
+    return btn;
+  }
+
+  // ─── Slide Rendering ──────────────────────────────────────────────────────────
+
+  _renderSlide(index, direction = null) {
+    const item = this._items[index];
+    if (!item) return;
+
+    this._pauseCurrentMedia();
+
+    const adapter = this._resolveAdapter(item);
+    if (!adapter) return;
+
+    const slide = adapter.render(item);
+    slide.dataset.lgxIndex = index;
+
+    // Animate out old slide
+    const old = this._dom.slideWrapper.querySelector('.lgx-slide--active');
+
+    if (old && direction) {
+      const outClass = direction === 'next' ? 'lgx-slide--out-left' : 'lgx-slide--out-right';
+      const inClass  = direction === 'next' ? 'lgx-slide--in-right' : 'lgx-slide--in-left';
+
+      // Add inClass BEFORE appending so fill-mode "both" starts the slide
+      // at opacity:0 — prevents the 1-frame flash at its final visible position.
+      slide.classList.add(inClass);
+      this._dom.slideWrapper.appendChild(slide);
+
+      // Defer the outgoing animation by one rAF so the browser has committed
+      // the new slide's start state before anything moves.
+      requestAnimationFrame(() => {
+        old.classList.remove('lgx-slide--active');
+        old.classList.add(outClass);
+      });
+
+      // Use animationend for frame-accurate cleanup; setTimeout is the fallback
+      // in case animationend never fires (e.g. display:none mid-animation).
+      let done = false;
+      const cleanup = () => {
+        if (done) return;
+        done = true;
+        old.remove();
+        slide.classList.remove(inClass);
+        slide.classList.add('lgx-slide--active');
+      };
+
+      old.addEventListener('animationend', cleanup, { once: true });
+      setTimeout(cleanup, this.opts.slideAnimationDuration + 100);
+    } else {
+      this._dom.slideWrapper.innerHTML = '';
+      slide.classList.add('lgx-slide--active');
+      this._dom.slideWrapper.appendChild(slide);
+    }
+
+    this._dom.currentSlide = slide;
+    this._index = index;
+    this._zoom = 1;
+    this._panX = 0;
+
+    // Show spinner, hide once slide reports loaded (JS fallback for browsers
+    // without :has() support — CSS handles it in modern browsers).
+    this._watchSlideLoaded(slide);
+    this._bindMediaAutoplayStop(slide, item);
+    if (this._autoplayTimer && this._isAutoplayBlockingMedia(item)) this._stopAutoplay();
+    this._panY = 0;
+    this._updateUI();
+    this._pluginHook('afterSlide', index, item);
+    this.emit('slide', { index, item });
+  }
+
+  _goTo(index, direction) {
+    this._renderSlide(index, direction);
+    this._preload(index);
+  }
+
+  _watchSlideLoaded(slide) {
+    const spinner = this._dom.spinner;
+    if (!spinner) return;
+
+    // Already loaded (e.g. cached image or video adapter)
+    if (slide.classList.contains('lgx-content--loaded')) {
+      spinner.style.display = 'none';
+      return;
+    }
+
+    spinner.style.display = '';
+
+    // Disconnect any previous observer
+    this._spinnerObserver?.disconnect();
+
+    this._spinnerObserver = new MutationObserver(() => {
+      if (slide.classList.contains('lgx-content--loaded')) {
+        spinner.style.display = 'none';
+        this._spinnerObserver.disconnect();
+      }
+    });
+    this._spinnerObserver.observe(slide, { attributes: true, attributeFilter: ['class'] });
+  }
+
+  _preload(index) {
+    if (!this.opts.lazyLoad) return;
+    const n = this.opts.preload;
+    const total = this._items.length;
+    for (let i = 1; i <= n; i++) {
+      [
+        (index + i) % total,
+        (index - i + total) % total,
+      ].forEach((pi) => {
+        const pitem = this._items[pi];
+        if (pitem?.type === 'image' && !pitem._preloaded) {
+          const img = new Image();
+          img.src = pitem.src;
+          pitem._preloaded = true;
+        }
+      });
+    }
+  }
+
+  _resolveAdapter(item) {
+    const adapter = Registry.getAdapter(item.type);
+    if (adapter) return adapter;
+    // Fallback: scan all adapters
+    const all = ['image', 'video', 'youtube', 'vimeo', 'iframe'];
+    for (const t of all) {
+      const a = Registry.getAdapter(t);
+      if (a?.canHandle(item)) return a;
+    }
+    return null;
+  }
+
+  _pauseCurrentMedia() {
+    const slide = this._dom.slideWrapper?.querySelector('.lgx-slide--active, .lgx-content');
+    if (slide?._pause) slide._pause();
+    // Pause html5 video elements
+    slide?.querySelectorAll('video').forEach((v) => v.pause());
+  }
+
+  // ─── UI Updates ───────────────────────────────────────────────────────────────
+
+  _updateUI() {
+    const { _index: i, _items: items, opts, _dom: dom } = this;
+    const total = items.length;
+
+    // Counter
+    if (dom.counter && opts.counter) {
+      dom.counter.textContent = opts.i18n.counter
+        .replace('{current}', i + 1)
+        .replace('{total}', total);
+      dom.counter.style.display = total > 1 ? '' : 'none';
+    }
+
+    // Caption
+    if (dom.caption && opts.captions) {
+      const cap = String(items[i]?.caption ?? '').trim();
+      dom.caption.innerHTML = cap;
+      dom.caption.style.display = cap ? '' : 'none';
+    }
+
+    // Nav buttons
+    if (!opts.loop) {
+      if (dom.btnPrev) dom.btnPrev.disabled = i === 0;
+      if (dom.btnNext) dom.btnNext.disabled = i === total - 1;
+    }
+
+    // Show/hide nav for single-item galleries
+    const showNav = total > 1;
+    if (dom.btnPrev) dom.btnPrev.style.display = showNav ? '' : 'none';
+    if (dom.btnNext) dom.btnNext.style.display = showNav ? '' : 'none';
+    if (dom.btnAutoplay) dom.btnAutoplay.style.display = showNav ? '' : 'none';
+
+    this._updateAutoplayButton();
+
+    this._pluginHook('updateUI');
+  }
+
+  _updateAutoplayButton() {
+    const btn = this._dom.btnAutoplay;
+    if (!btn) return;
+
+    const active = !!this._autoplayTimer;
+    const label = active ? this.opts.i18n.autoplayStop : this.opts.i18n.autoplayStart;
+    btn.classList.toggle('lgx-btn--active', active);
+    btn.setAttribute('aria-pressed', active ? 'true' : 'false');
+    btn.setAttribute('aria-label', label);
+    btn.title = label;
+    btn.innerHTML = this._svgIcon(active ? 'stop' : 'play').outerHTML;
+  }
+
+  // ─── Zoom / Pan ───────────────────────────────────────────────────────────────
+
+  _applyZoom(newZoom, reset = false) {
+    newZoom = clamp(newZoom, this.opts.zoomMin, this.opts.zoomMax);
+    if (reset) { newZoom = 1; this._panX = 0; this._panY = 0; }
+    this._zoom = newZoom;
+
+    const img = this._dom.slideWrapper?.querySelector('.lgx-image');
+    if (!img) return;
+
+    img.style.transform = `translate(${this._panX}px, ${this._panY}px) scale(${newZoom})`;
+    img.style.cursor = newZoom > 1 ? 'move' : 'default';
+
+    this._pluginHook('afterZoom', newZoom);
+    this.emit('zoom', { zoom: newZoom });
+  }
+
+  // ─── Keyboard ─────────────────────────────────────────────────────────────────
+
+  _attachKeyboard() {
+    if (!this.opts.keyboard) return;
+    this._onKeydown = (e) => {
+      switch (e.key) {
+        case 'ArrowRight': this.next(); break;
+        case 'ArrowLeft':  this.prev(); break;
+        case 'Escape':     if (this.opts.closeOnEscape) this.close(); break;
+        case 'f': case 'F': this._pluginHook('toggleFullscreen'); break;
+        case '+': case '=': this.zoomIn(); break;
+        case '-': this.zoomOut(); break;
+        case '0': this.resetZoom(); break;
+      }
+    };
+    document.addEventListener('keydown', this._onKeydown);
+  }
+
+  _detachKeyboard() {
+    if (this._onKeydown) document.removeEventListener('keydown', this._onKeydown);
+  }
+
+  // ─── Touch / Drag ─────────────────────────────────────────────────────────────
+
+  _attachTouch() {
+    if (!this.opts.touch && !this.opts.drag) return;
+    const stage = this._dom.stage;
+    if (!stage) return;
+
+    let startX, startY, startPanX, startPanY, isDragging = false;
+    const SWIPE_THRESHOLD = 50;
+
+    const onStart = (e) => {
+      const pt = e.touches ? e.touches[0] : e;
+      startX = pt.clientX;
+      startY = pt.clientY;
+      startPanX = this._panX;
+      startPanY = this._panY;
+      isDragging = true;
+    };
+
+    const onMove = (e) => {
+      if (!isDragging) return;
+      const pt = e.touches ? e.touches[0] : e;
+      const dx = pt.clientX - startX;
+      const dy = pt.clientY - startY;
+
+      if (this._zoom > 1) {
+        // Pan mode
+        this._panX = startPanX + dx;
+        this._panY = startPanY + dy;
+        const img = this._dom.slideWrapper?.querySelector('.lgx-image');
+        if (img) img.style.transform = `translate(${this._panX}px, ${this._panY}px) scale(${this._zoom})`;
+        e.preventDefault();
+      }
+    };
+
+    const onEnd = (e) => {
+      if (!isDragging) return;
+      isDragging = false;
+      const pt = e.changedTouches ? e.changedTouches[0] : e;
+      const dx = pt.clientX - startX;
+
+      if (this._zoom === 1 && Math.abs(dx) > SWIPE_THRESHOLD) {
+        dx < 0 ? this.next() : this.prev();
+      }
+    };
+
+    // Double-tap / double-click zoom
+    let lastTap = 0;
+    const onTap = (e) => {
+      const now = Date.now();
+      if (now - lastTap < 300) {
+        this._zoom === 1 ? this._applyZoom(2) : this.resetZoom();
+        e.preventDefault();
+      }
+      lastTap = now;
+    };
+
+    stage.addEventListener('mousedown', onStart);
+    stage.addEventListener('mousemove', onMove);
+    stage.addEventListener('mouseup', onEnd);
+    stage.addEventListener('touchstart', onStart, passiveOpt);
+    stage.addEventListener('touchmove', onMove, { passive: false });
+    stage.addEventListener('touchend', onEnd, passiveOpt);
+    stage.addEventListener('click', onTap);
+
+    // Pinch zoom
+    let initDist = 0, initZoom = 1;
+    stage.addEventListener('touchstart', (e) => {
+      if (e.touches.length === 2) {
+        initDist = Math.hypot(
+          e.touches[0].clientX - e.touches[1].clientX,
+          e.touches[0].clientY - e.touches[1].clientY
+        );
+        initZoom = this._zoom;
+      }
+    }, passiveOpt);
+
+    stage.addEventListener('touchmove', (e) => {
+      if (e.touches.length === 2) {
+        const dist = Math.hypot(
+          e.touches[0].clientX - e.touches[1].clientX,
+          e.touches[0].clientY - e.touches[1].clientY
+        );
+        this._applyZoom(initZoom * (dist / initDist));
+        e.preventDefault();
+      }
+    }, { passive: false });
+  }
+
+  // ─── Autoplay ──────────────────────────────────────────────────────────────────
+
+  _startAutoplay() {
+    if (this._isAutoplayBlockingMedia(this._items[this._index])) {
+      this._stopAutoplay();
+      return;
+    }
+    this._stopAutoplay();
+    this._autoplayTimer = setInterval(() => this.next(), this.opts.autoplayInterval);
+    this._updateAutoplayButton();
+    this.emit('autoplay:start');
+  }
+
+  _stopAutoplay() {
+    if (this._autoplayTimer) {
+      clearInterval(this._autoplayTimer);
+      this._autoplayTimer = null;
+      this._updateAutoplayButton();
+      this.emit('autoplay:stop');
+    }
+  }
+
+  _bindMediaAutoplayStop(slide, item) {
+    if (!this._isAutoplayBlockingMedia(item)) return;
+
+    const stop = () => this._stopAutoplay();
+    slide.addEventListener('lgx:media-play', stop, { once: true });
+    slide.querySelectorAll('video').forEach((video) => {
+      video.addEventListener('play', stop, { once: true });
+    });
+  }
+
+  _isAutoplayBlockingMedia(item) {
+    return ['video', 'youtube', 'vimeo', 'iframe'].includes(item?.type);
+  }
+
+  // ─── Trigger binding ──────────────────────────────────────────────────────────
+
+  _bindTriggers() {
+    if (typeof document === 'undefined') return;
+    if (!this.opts.selector) return;
+
+    const handler = (e) => {
+      const trigger = e.target.closest(this.opts.selector);
+      if (!trigger) return;
+      e.preventDefault();
+
+      // Gather all items from the same gallery group
+      const groupAttr = trigger.dataset.lgxGallery || trigger.closest('[data-lgx-gallery]')?.dataset.lgxGallery;
+      let siblings;
+
+      if (groupAttr) {
+        siblings = [...document.querySelectorAll(`[data-lgx-gallery="${groupAttr}"] ${this.opts.selector}, ${this.opts.selector}[data-lgx-gallery="${groupAttr}"]`)];
+      } else {
+        siblings = [trigger];
+      }
+
+      const items = siblings.map((el) => this._itemFromElement(el));
+      const startIndex = siblings.indexOf(trigger);
+      this.open(items, Math.max(0, startIndex));
+    };
+
+    document.addEventListener('click', handler);
+    this._triggerHandler = handler;
+  }
+
+  _detachTriggers() {
+    if (this._triggerHandler) {
+      document.removeEventListener('click', this._triggerHandler);
+    }
+  }
+
+  _itemFromElement(el) {
+    const d = el.dataset;
+    const img = el.matches('img') ? el : el.querySelector('img');
+    const captionEl = el.querySelector('[data-lgx-caption], figcaption, .caption, .lgx-caption-text');
+    const caption = d.lgxCaption
+      || img?.dataset?.lgxCaption
+      || captionEl?.innerHTML
+      || el.getAttribute('aria-label')
+      || el.title
+      || img?.title
+      || img?.alt
+      || '';
+
+    return {
+      src: d.lgxSrc || el.href || el.src || '',
+      type: d.lgxType || undefined,
+      thumb: d.lgxThumb || img?.src || null,
+      caption,
+      alt: d.lgxAlt || img?.alt || '',
+      download: d.lgxDownload || null,
+      autoplay: d.lgxAutoplay !== undefined,
+      poster: d.lgxPoster || null,
+    };
+  }
+
+  // ─── SVG Icons ────────────────────────────────────────────────────────────────
+
+  _svgIcon(name) {
+    const icons = {
+      close: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
+      prev:  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="15,18 9,12 15,6"/></svg>',
+      next:  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="9,18 15,12 9,6"/></svg>',
+      play: '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M8 5.14v13.72a1 1 0 0 0 1.52.86l11.43-6.86a1 1 0 0 0 0-1.72L9.52 4.28A1 1 0 0 0 8 5.14z"/></svg>',
+      stop: '<svg viewBox="0 0 24 24" fill="currentColor"><rect x="7" y="7" width="10" height="10" rx="1.5"/></svg>',
+      zoomin:   '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="11" y1="8" x2="11" y2="14"/><line x1="8" y1="11" x2="14" y2="11"/></svg>',
+      zoomout:  '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/><line x1="8" y1="11" x2="14" y2="11"/></svg>',
+      fullscreen: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15,3 21,3 21,9"/><polyline points="9,21 3,21 3,15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>',
+      download: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7,10 12,15 17,10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>',
+      share: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>',
+    };
+    const div = document.createElement('span');
+    div.className = 'lgx-icon';
+    div.setAttribute('aria-hidden', 'true');
+    div.innerHTML = icons[name] ?? '';
+    return div;
+  }
+}
+
+const COLS = 8;
+const ROWS = 7;
+const TILE_DURATION = 420;  // ms — must match CSS animation duration
+const MAX_DELAY     = 380;  // ms — last tile starts at this offset
+
+// Tile colours — dark palette with subtle variation
+const TILE_COLORS = [
+  '#111116', '#13131a', '#0f0f14', '#161620',
+  '#121218', '#101015', '#141419', '#0e0e13',
+];
+
+function buildMosaic() {
+  const mosaic = document.createElement('div');
+  mosaic.className = 'lgx-mosaic';
+  mosaic.style.gridTemplateColumns = `repeat(${COLS}, 1fr)`;
+  mosaic.style.gridTemplateRows    = `repeat(${ROWS}, 1fr)`;
+
+  for (let r = 0; r < ROWS; r++) {
+    for (let c = 0; c < COLS; c++) {
+      const tile = document.createElement('div');
+      tile.className = 'lgx-mosaic__tile';
+
+      // Diagonal wave: top-left tiles dissolve first
+      const diagRatio = (r + c) / (ROWS + COLS - 2); // 0 → 1
+      const delay = Math.round(diagRatio * MAX_DELAY);
+      tile.style.setProperty('--lgx-tile-delay', `${delay}ms`);
+
+      // Pick a colour from the palette so adjacent tiles vary slightly
+      tile.style.background = TILE_COLORS[(r * COLS + c) % TILE_COLORS.length];
+
+      mosaic.appendChild(tile);
+    }
+  }
+
+  return mosaic;
+}
+
+const ImageAdapter = {
+  type: 'image',
+
+  canHandle(item) {
+    return item.type === 'image' || /\.(jpg|jpeg|png|gif|webp|avif|svg)(\?.*)?$/i.test(item.src ?? '');
+  },
+
+  render(item) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'lgx-content lgx-content--image';
+    // position:relative and overflow:hidden are set in CSS on .lgx-content--image
+    // so the mosaic tiles (position:absolute inside) are clipped correctly.
+
+    const img = document.createElement('img');
+    img.className = 'lgx-image';
+    img.alt = item.alt ?? item.caption ?? '';
+    img.draggable = false;
+
+    // Low-res thumb while full image loads
+    if (item.thumb) {
+      img.src = item.thumb;
+      img.style.filter = 'blur(8px)';
+    }
+
+    const loadStart = Date.now();
+    const hi = new Image();
+    hi.onload = () => {
+      img.src = hi.src;
+      img.style.filter = '';
+      img.style.transition = 'filter 0.3s';
+      wrapper.classList.add('lgx-content--loaded');
+
+      // Skip mosaic when the image was served from cache (load time < 40 ms) —
+      // it would collide with the slide-in transition and cause flickering.
+      const fromNetwork = Date.now() - loadStart > 40;
+      if (fromNetwork) {
+        const mosaic = buildMosaic();
+        wrapper.appendChild(mosaic);
+        const totalMs = MAX_DELAY + TILE_DURATION + 60;
+        setTimeout(() => mosaic.remove(), totalMs);
+      }
+    };
+
+    hi.onerror = () => wrapper.classList.add('lgx-content--error');
+    hi.src = item.src;
+
+    wrapper.appendChild(img);
+    return wrapper;
+  },
+
+  getThumbnail(item) {
+    return item.thumb ?? item.src;
+  },
+};
+
+const VideoAdapter = {
+  type: 'video',
+
+  canHandle(item) {
+    return item.type === 'video' || /\.(mp4|webm|ogg|mov)(\?.*)?$/i.test(item.src ?? '');
+  },
+
+  render(item) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'lgx-content lgx-content--video';
+
+    const video = document.createElement('video');
+    video.className = 'lgx-video';
+    video.controls = true;
+    video.playsInline = true;
+    video.preload = 'metadata';
+    if (item.autoplay) video.autoplay = true;
+    if (item.loop) video.loop = true;
+    if (item.muted) video.muted = true;
+    if (item.poster) video.poster = item.poster;
+    video.addEventListener('play', () => {
+      wrapper.dispatchEvent(new CustomEvent('lgx:media-play', { bubbles: true }));
+    });
+
+    const sources = Array.isArray(item.src) ? item.src : [item.src];
+    sources.forEach((s) => {
+      const src = typeof s === 'string' ? { src: s } : s;
+      const source = document.createElement('source');
+      source.src = src.src;
+      if (src.type) source.type = src.type;
+      video.appendChild(source);
+    });
+
+    wrapper.appendChild(video);
+    wrapper.classList.add('lgx-content--loaded');
+
+    wrapper._pause = () => video.pause();
+    return wrapper;
+  },
+
+  getThumbnail(item) {
+    return item.thumb ?? item.poster ?? null;
+  },
+};
+
+const YouTubeAdapter = {
+  type: 'youtube',
+
+  canHandle(item) {
+    return item.type === 'youtube' || /youtube\.com|youtu\.be/.test(item.src ?? '');
+  },
+
+  render(item) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'lgx-content lgx-content--youtube lgx-content--iframe';
+
+    const id = getYouTubeId(item.src);
+    if (!id) {
+      wrapper.textContent = 'Invalid YouTube URL';
+      return wrapper;
+    }
+
+    const params = new URLSearchParams({
+      autoplay: item.autoplay ? '1' : '0',
+      rel: '0',
+      modestbranding: '1',
+      enablejsapi: '1',
+      ...(item.start ? { start: item.start } : {}),
+    });
+
+    const iframe = document.createElement('iframe');
+    iframe.className = 'lgx-iframe';
+    iframe.src = `https://www.youtube.com/embed/${id}?${params}`;
+    iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
+    iframe.allowFullscreen = true;
+    iframe.setAttribute('loading', 'lazy');
+    iframe.title = item.caption ?? 'YouTube video';
+
+    iframe.addEventListener('load', () => wrapper.classList.add('lgx-content--loaded'));
+
+    wrapper.appendChild(iframe);
+
+    wrapper._pause = () => {
+      try {
+        iframe.contentWindow?.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
+      } catch (_) {}
+    };
+
+    return wrapper;
+  },
+
+  getThumbnail(item) {
+    if (item.thumb) return item.thumb;
+    const id = getYouTubeId(item.src);
+    return id ? `https://img.youtube.com/vi/${id}/mqdefault.jpg` : null;
+  },
+};
+
+const VimeoAdapter = {
+  type: 'vimeo',
+
+  canHandle(item) {
+    return item.type === 'vimeo' || /vimeo\.com/.test(item.src ?? '');
+  },
+
+  render(item) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'lgx-content lgx-content--vimeo lgx-content--iframe';
+
+    const id = getVimeoId(item.src);
+    if (!id) {
+      wrapper.textContent = 'Invalid Vimeo URL';
+      return wrapper;
+    }
+
+    const params = new URLSearchParams({
+      autoplay: item.autoplay ? '1' : '0',
+      title: '0',
+      byline: '0',
+      portrait: '0',
+      api: '1',
+    });
+
+    const iframe = document.createElement('iframe');
+    iframe.className = 'lgx-iframe';
+    iframe.src = `https://player.vimeo.com/video/${id}?${params}`;
+    iframe.allow = 'autoplay; fullscreen; picture-in-picture';
+    iframe.allowFullscreen = true;
+    iframe.setAttribute('loading', 'lazy');
+    iframe.title = item.caption ?? 'Vimeo video';
+
+    iframe.addEventListener('load', () => wrapper.classList.add('lgx-content--loaded'));
+
+    wrapper.appendChild(iframe);
+
+    wrapper._pause = () => {
+      try {
+        iframe.contentWindow?.postMessage('{"method":"pause"}', '*');
+      } catch (_) {}
+    };
+
+    return wrapper;
+  },
+
+  getThumbnail(item) {
+    return item.thumb ?? null;
+  },
+};
+
+const IframeAdapter = {
+  type: 'iframe',
+
+  canHandle(item) {
+    return item.type === 'iframe';
+  },
+
+  render(item) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'lgx-content lgx-content--iframe';
+
+    const iframe = document.createElement('iframe');
+    iframe.className = 'lgx-iframe';
+    iframe.src = item.src;
+    iframe.allowFullscreen = true;
+    iframe.setAttribute('loading', 'lazy');
+    iframe.title = item.caption ?? 'Embedded content';
+    if (item.iframeWidth) iframe.style.width = item.iframeWidth;
+    if (item.iframeHeight) iframe.style.height = item.iframeHeight;
+
+    iframe.addEventListener('load', () => wrapper.classList.add('lgx-content--loaded'));
+
+    wrapper.appendChild(iframe);
+    return wrapper;
+  },
+
+  getThumbnail(item) {
+    return item.thumb ?? null;
+  },
+};
+
+class ZoomPlugin {
+  static pluginName = 'zoom';
+
+  constructor(gallery) {
+    this.gallery = gallery;
+    this._btnIn = null;
+    this._btnOut = null;
+  }
+
+  init(gallery) {
+    this.gallery = gallery;
+  }
+
+  buildToolbar(toolbar) {
+    if (!this.gallery.opts.zoom) return;
+
+    this._btnIn = this._makeBtn('zoomin', this.gallery.opts.i18n.zoomIn, () => this.gallery.zoomIn());
+    this._btnOut = this._makeBtn('zoomout', this.gallery.opts.i18n.zoomOut, () => this.gallery.zoomOut());
+
+    // Insert before close button
+    const close = toolbar.querySelector('.lgx-btn--close');
+    toolbar.insertBefore(this._btnOut, close);
+    toolbar.insertBefore(this._btnIn, this._btnOut);
+  }
+
+  afterSlide(index, item) {
+    const isImage = item.type === 'image';
+    if (this._btnIn) this._btnIn.style.display = isImage ? '' : 'none';
+    if (this._btnOut) this._btnOut.style.display = isImage ? '' : 'none';
+  }
+
+  afterZoom(zoom) {
+    const min = this.gallery.opts.zoomMin;
+    const max = this.gallery.opts.zoomMax;
+    if (this._btnIn) this._btnIn.disabled = zoom >= max;
+    if (this._btnOut) this._btnOut.disabled = zoom <= min;
+  }
+
+  _makeBtn(iconName, label, onClick) {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = `lgx-btn lgx-btn--${iconName}`;
+    btn.setAttribute('aria-label', label);
+    btn.title = label;
+    btn.innerHTML = this.gallery._svgIcon(iconName).outerHTML;
+    btn.addEventListener('click', onClick);
+    return btn;
+  }
+
+  destroy() {}
+}
+
+class ThumbsPlugin {
+  static pluginName = 'thumbnails';
+
+  constructor(gallery) {
+    this.gallery = gallery;
+    this._strip = null;
+    this._thumbEls = [];
+    this._observer = null;
+  }
+
+  init(gallery) {
+    this.gallery = gallery;
+  }
+
+  afterBuildDOM() {
+    if (!this.gallery.opts.thumbnails) return;
+    if (this.gallery._items.length < 2) return;
+
+    this._buildStrip();
+  }
+
+  afterSlide(index) {
+    this._activate(index);
+  }
+
+  _buildStrip() {
+    const gallery = this.gallery;
+    const strip = document.createElement('div');
+    strip.className = 'lgx-thumbs';
+    strip.setAttribute('role', 'tablist');
+    strip.setAttribute('aria-label', 'Gallery thumbnails');
+
+    this._thumbEls = gallery._items.map((item, i) => {
+      const thumb = document.createElement('button');
+      thumb.type = 'button';
+      thumb.className = 'lgx-thumb';
+      thumb.setAttribute('role', 'tab');
+      thumb.setAttribute('aria-label', `Slide ${i + 1}${item.caption ? ': ' + item.caption : ''}`);
+      thumb.setAttribute('aria-selected', i === gallery._index ? 'true' : 'false');
+      thumb.dataset.lgxThumbIndex = i;
+
+      const adapter = gallery._resolveAdapter(item);
+      const thumbSrc = adapter?.getThumbnail(item);
+
+      if (thumbSrc) {
+        const img = document.createElement('img');
+        img.alt = '';
+        img.loading = 'lazy';
+
+        // IntersectionObserver lazy load
+        if ('IntersectionObserver' in window) {
+          img.dataset.src = thumbSrc;
+          this._observe(img);
+        } else {
+          img.src = thumbSrc;
+        }
+
+        thumb.appendChild(img);
+      } else {
+        // Video/iframe fallback: show index number
+        thumb.appendChild(document.createTextNode(i + 1));
+        thumb.classList.add('lgx-thumb--no-image');
+      }
+
+      thumb.addEventListener('click', () => gallery.goTo(i));
+      return thumb;
+    });
+
+    this._thumbEls.forEach((t) => strip.appendChild(t));
+    gallery._dom.container.appendChild(strip);
+    gallery._dom.thumbStrip = strip;
+    this._strip = strip;
+
+    this._activate(gallery._index);
+  }
+
+  _activate(index) {
+    this._thumbEls.forEach((t, i) => {
+      const active = i === index;
+      t.classList.toggle('lgx-thumb--active', active);
+      t.setAttribute('aria-selected', active ? 'true' : 'false');
+    });
+
+    // Scroll active thumb into view
+    const activeThumb = this._thumbEls[index];
+    if (activeThumb && this._strip) {
+      activeThumb.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+    }
+  }
+
+  _observe(img) {
+    if (!this._observer) {
+      this._observer = new IntersectionObserver((entries) => {
+        entries.forEach((e) => {
+          if (e.isIntersecting) {
+            e.target.src = e.target.dataset.src;
+            this._observer.unobserve(e.target);
+          }
+        });
+      }, { rootMargin: '100px' });
+    }
+    this._observer.observe(img);
+  }
+
+  destroy() {
+    this._observer?.disconnect();
+  }
+}
+
+class FullscreenPlugin {
+  static pluginName = 'fullscreen';
+
+  constructor(gallery) {
+    this.gallery = gallery;
+    this._btn = null;
+    this._onChange = null;
+  }
+
+  init(gallery) {
+    this.gallery = gallery;
+  }
+
+  buildToolbar(toolbar) {
+    if (!this.gallery.opts.fullscreen) return;
+
+    this._btn = document.createElement('button');
+    this._btn.type = 'button';
+    this._btn.className = 'lgx-btn lgx-btn--fullscreen';
+    this._btn.setAttribute('aria-label', this.gallery.opts.i18n.fullscreen);
+    this._btn.title = this.gallery.opts.i18n.fullscreen;
+    this._btn.innerHTML = this.gallery._svgIcon('fullscreen').outerHTML;
+    this._btn.addEventListener('click', () => this.toggle());
+
+    const close = toolbar.querySelector('.lgx-btn--close');
+    toolbar.insertBefore(this._btn, close);
+
+    this._onChange = () => this._updateBtn();
+    document.addEventListener('fullscreenchange', this._onChange);
+    document.addEventListener('webkitfullscreenchange', this._onChange);
+  }
+
+  toggle() {
+    if (isFullscreen()) {
+      exitFullscreen();
+    } else {
+      requestFullscreen(this.gallery._dom.modal);
+    }
+  }
+
+  toggleFullscreen() {
+    this.toggle();
+  }
+
+  _updateBtn() {
+    if (!this._btn) return;
+    const full = isFullscreen();
+    this._btn.setAttribute('aria-pressed', full ? 'true' : 'false');
+    this.gallery._dom.modal?.classList.toggle('lgx-modal--fullscreen', full);
+  }
+
+  afterClose() {
+    if (isFullscreen()) exitFullscreen();
+    if (this._onChange) {
+      document.removeEventListener('fullscreenchange', this._onChange);
+      document.removeEventListener('webkitfullscreenchange', this._onChange);
+    }
+  }
+
+  destroy() {
+    this.afterClose();
+  }
+}
+
+class DownloadPlugin {
+  static pluginName = 'download';
+
+  constructor(gallery) {
+    this.gallery = gallery;
+    this._btn = null;
+  }
+
+  init(gallery) {
+    this.gallery = gallery;
+  }
+
+  buildToolbar(toolbar) {
+    if (!this.gallery.opts.download) return;
+
+    this._btn = document.createElement('button');
+    this._btn.type = 'button';
+    this._btn.className = 'lgx-btn lgx-btn--download';
+    this._btn.setAttribute('aria-label', this.gallery.opts.i18n.download);
+    this._btn.title = this.gallery.opts.i18n.download;
+    this._btn.innerHTML = this.gallery._svgIcon('download').outerHTML;
+    this._btn.addEventListener('click', () => this._download());
+
+    const close = toolbar.querySelector('.lgx-btn--close');
+    toolbar.insertBefore(this._btn, close);
+  }
+
+  afterSlide(index, item) {
+    if (!this._btn) return;
+    // Hide download for video embeds where we can't trigger a download
+    const canDownload = ['image', 'video'].includes(item.type);
+    this._btn.style.display = canDownload ? '' : 'none';
+  }
+
+  _download() {
+    const item = this.gallery._items[this.gallery._index];
+    if (!item) return;
+    const url = item.download || item.src;
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = item.downloadName || url.split('/').pop() || 'download';
+    a.style.display = 'none';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    this.gallery.emit('download', { item });
+  }
+
+  destroy() {}
+}
+
+class SharePlugin {
+  static pluginName = 'share';
+
+  constructor(gallery) {
+    this.gallery = gallery;
+    this._btn = null;
+  }
+
+  init(gallery) {
+    this.gallery = gallery;
+  }
+
+  buildToolbar(toolbar) {
+    if (!this.gallery.opts.share) return;
+
+    this._btn = document.createElement('button');
+    this._btn.type = 'button';
+    this._btn.className = 'lgx-btn lgx-btn--share';
+    this._btn.setAttribute('aria-label', this.gallery.opts.i18n.share);
+    this._btn.title = this.gallery.opts.i18n.share;
+    this._btn.innerHTML = this.gallery._svgIcon('share').outerHTML;
+    this._btn.addEventListener('click', () => this._share());
+
+    const close = toolbar.querySelector('.lgx-btn--close');
+    toolbar.insertBefore(this._btn, close);
+  }
+
+  async _share() {
+    const item = this.gallery._items[this.gallery._index];
+    if (!item) return;
+
+    const shareData = {
+      title: item.caption || document.title,
+      url: item.shareUrl || item.src,
+    };
+
+    // Native Web Share API (mobile)
+    if (navigator.share) {
+      try {
+        await navigator.share(shareData);
+        this.gallery.emit('share', { item, method: 'native' });
+        return;
+      } catch (_) {}
+    }
+
+    // Fallback: copy URL to clipboard
+    if (navigator.clipboard) {
+      await navigator.clipboard.writeText(shareData.url);
+      this._showToast('Link copied!');
+      this.gallery.emit('share', { item, method: 'clipboard' });
+    }
+  }
+
+  _showToast(msg) {
+    const toast = document.createElement('div');
+    toast.className = 'lgx-toast';
+    toast.textContent = msg;
+    this.gallery._dom.modal?.appendChild(toast);
+    setTimeout(() => toast.remove(), 2500);
+  }
+
+  destroy() {}
+}
+
+// Core
+
+Registry.registerAdapter('image',   ImageAdapter);
+Registry.registerAdapter('video',   VideoAdapter);
+Registry.registerAdapter('youtube', YouTubeAdapter);
+Registry.registerAdapter('vimeo',   VimeoAdapter);
+Registry.registerAdapter('iframe',  IframeAdapter);
+
+Registry.registerPlugin('zoom',       ZoomPlugin);
+Registry.registerPlugin('thumbnails', ThumbsPlugin);
+Registry.registerPlugin('fullscreen', FullscreenPlugin);
+Registry.registerPlugin('download',   DownloadPlugin);
+Registry.registerPlugin('share',      SharePlugin);
+
+/**
+ * Create a Crowdbox instance and return it.
+ * This is the primary public API for vanilla / script-tag usage.
+ */
+function createGallery(options = {}) {
+  return new Crowdbox(options);
+}
+
+// Auto-init from [data-lgx-init] attribute
+if (typeof document !== 'undefined') {
+  document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('[data-lgx-init]').forEach((root) => {
+      try {
+        const opts = JSON.parse(root.dataset.lgxInit || '{}');
+        new Crowdbox({ selector: `#${root.id} [data-lgx]`, ...opts });
+      } catch (_) {}
+    });
+  });
+}
+
+export { Crowdbox, DownloadPlugin, EventEmitter, FullscreenPlugin, IframeAdapter, ImageAdapter, Crowdbox as LightboxGallery, Registry, SharePlugin, ThumbsPlugin, VideoAdapter, VimeoAdapter, YouTubeAdapter, ZoomPlugin, createGallery, Crowdbox as default };
+//# sourceMappingURL=crowdbox.esm.js.map