@thisiscrowd/crowdbox 1.0.0

package/src/core/Crowdbox.js

@@ -0,0 +1,739 @@
+import { EventEmitter } from './EventEmitter.js';
+import { Registry } from './Registry.js';
+import {
+  createElement,
+  mergeDeep,
+  detectMediaType,
+  trapFocus,
+  clamp,
+  passiveOpt,
+} from './utils.js';
+
+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}',
+  },
+};
+
+export 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;
+  }
+}
+
+export { Crowdbox as LightboxGallery };