@whykusanagi/corrupted-theme 0.1.5 → 0.1.7

package/src/lib/gallery.js

@@ -1,13 +1,14 @@
 /**
  * gallery.js — Gallery System with Lightbox and NSFW Support
- * 
+ *
  * A complete gallery system with filtering, lightbox viewer, and NSFW content handling.
  * Integrates with the Corrupted Theme design system.
- * 
+ * Supports multiple independent gallery instances on a single page.
+ *
  * @module gallery
- * @version 1.0.0
+ * @version 2.0.0
  * @license MIT
- * 
+ *
  * Features:
  * - Responsive gallery grid
  * - Category filtering with animated transitions
@@ -15,7 +16,8 @@
  * - NSFW content blur with click-to-reveal
  * - Lazy loading support
  * - Touch gesture support for mobile
- * 
+ * - Multiple galleries per page
+ *
  * Usage:
  * ```html
  * <div class="filter-bar">
@@ -28,14 +30,18 @@
  *     <div class="gallery-caption">Caption</div>
  *   </div>
  * </div>
- * 
+ *
  * <script type="module">
- *   import { initGallery } from '@whykusanagi/corrupted-theme/src/lib/gallery.js';
- *   initGallery('#gallery');
+ *   import { initGallery } from '@whykusanagi/corrupted-theme/gallery';
+ *   const gallery = initGallery('#gallery');
+ *   // gallery.destroy() when done
  * </script>
  * ```
  */
 
+import { TimerRegistry } from '../core/timer-registry.js';
+import { EventTracker } from '../core/event-tracker.js';
+
 // ============================================================================
 // CONFIGURATION
 // ============================================================================
@@ -46,23 +52,23 @@ const DEFAULT_CONFIG = {
   itemSelector: '.gallery-item',
   filterBarSelector: '.filter-bar',
   filterBtnSelector: '.filter-btn',
-  
+
   // Lightbox
   enableLightbox: true,
   lightboxId: 'corrupted-lightbox',
-  
+
   // NSFW
   enableNsfw: true,
   nsfwSelector: '.nsfw-content',
   nsfwWarning: '18+ Click to View',
-  
+
   // Animation
   filterAnimation: true,
   animationDuration: 300,
-  
+
   // Keyboard
   enableKeyboard: true,
-  
+
   // Callbacks
   onFilter: null,
   onLightboxOpen: null,
@@ -70,390 +76,451 @@ const DEFAULT_CONFIG = {
   onNsfwReveal: null
 };
 
+// Instance counter for unique lightbox IDs
+let instanceCounter = 0;
+
 // ============================================================================
-// STATE
+// GALLERY CLASS
 // ============================================================================
 
-let state = {
-  currentFilter: 'all',
-  lightboxOpen: false,
-  currentImageIndex: 0,
-  galleryImages: [],
-  config: { ...DEFAULT_CONFIG }
-};
+class Gallery {
+  /**
+   * @param {string|HTMLElement} selector - Gallery container selector or element
+   * @param {Object} options - Configuration options
+   */
+  constructor(selector, options = {}) {
+    this._id = ++instanceCounter;
+    this._events = new EventTracker();
+    this._timers = new TimerRegistry();
 
-// ============================================================================
-// LIGHTBOX
-// ============================================================================
+    this.config = { ...DEFAULT_CONFIG, ...options };
 
-/**
- * Creates and injects the lightbox HTML into the DOM
- * @private
- */
-function createLightbox() {
-  if (document.getElementById(state.config.lightboxId)) return;
-  
-  const lightbox = document.createElement('div');
-  lightbox.id = state.config.lightboxId;
-  lightbox.className = 'lightbox';
-  lightbox.innerHTML = `
-    <button class="lightbox-close" aria-label="Close lightbox">&times;</button>
-    <button class="lightbox-prev" aria-label="Previous image">
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <path d="M15 18l-6-6 6-6"/>
-      </svg>
-    </button>
-    <img class="lightbox-image" src="" alt="">
-    <button class="lightbox-next" aria-label="Next image">
-      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-        <path d="M9 18l6-6-6-6"/>
-      </svg>
-    </button>
-    <div class="lightbox-caption"></div>
-    <div class="lightbox-counter"></div>
-  `;
-  
-  document.body.appendChild(lightbox);
-  
-  // Event listeners
-  lightbox.querySelector('.lightbox-close').addEventListener('click', closeLightbox);
-  lightbox.querySelector('.lightbox-prev').addEventListener('click', () => navigateLightbox(-1));
-  lightbox.querySelector('.lightbox-next').addEventListener('click', () => navigateLightbox(1));
-  lightbox.addEventListener('click', (e) => {
-    if (e.target === lightbox) closeLightbox();
-  });
-  
-  // Touch gestures
-  let touchStartX = 0;
-  lightbox.addEventListener('touchstart', (e) => {
-    touchStartX = e.touches[0].clientX;
-  }, { passive: true });
-  
-  lightbox.addEventListener('touchend', (e) => {
-    const touchEndX = e.changedTouches[0].clientX;
-    const diff = touchStartX - touchEndX;
-    
-    if (Math.abs(diff) > 50) {
-      navigateLightbox(diff > 0 ? 1 : -1);
+    if (typeof selector === 'string') {
+      this.config.gallerySelector = selector;
+    } else if (selector instanceof HTMLElement) {
+      // When passed an element directly, derive a selector from its ID
+      // or fall back to a unique attribute for querySelectorAll compatibility
+      if (selector.id) {
+        this.config.gallerySelector = `#${selector.id}`;
+      } else {
+        const attrKey = `data-gallery-${this._id}`;
+        selector.setAttribute(attrKey, '');
+        this.config.gallerySelector = `[${attrKey}]`;
+      }
     }
-  }, { passive: true });
-}
 
-/**
- * Opens the lightbox with specified image
- * @param {number} index - Index of image in gallery
- */
-function openLightbox(index) {
-  const lightbox = document.getElementById(state.config.lightboxId);
-  if (!lightbox || !state.galleryImages[index]) return;
-  
-  state.currentImageIndex = index;
-  state.lightboxOpen = true;
-  
-  const imageData = state.galleryImages[index];
-  const img = lightbox.querySelector('.lightbox-image');
-  const caption = lightbox.querySelector('.lightbox-caption');
-  const counter = lightbox.querySelector('.lightbox-counter');
-  
-  img.src = imageData.src;
-  img.alt = imageData.alt || '';
-  
-  // Handle NSFW class
-  if (imageData.isNsfw) {
-    img.classList.add('nsfw-revealed');
-  } else {
-    img.classList.remove('nsfw-revealed');
+    // Per-instance lightbox ID
+    this.config.lightboxId = `corrupted-lightbox-${this._id}`;
+
+    this.currentFilter = 'all';
+    this.lightboxOpen = false;
+    this.currentImageIndex = 0;
+    this.galleryImages = [];
+
+    this._init();
   }
-  
-  caption.textContent = imageData.caption || '';
-  caption.style.display = imageData.caption ? 'block' : 'none';
-  
-  counter.textContent = `${index + 1} / ${state.galleryImages.length}`;
-  
-  // Update navigation buttons
-  lightbox.querySelector('.lightbox-prev').disabled = index === 0;
-  lightbox.querySelector('.lightbox-next').disabled = index === state.galleryImages.length - 1;
-  
-  lightbox.classList.add('active');
-  document.body.style.overflow = 'hidden';
-  
-  if (state.config.onLightboxOpen) {
-    state.config.onLightboxOpen(imageData, index);
+
+  // --------------------------------------------------------------------------
+  // INITIALIZATION
+  // --------------------------------------------------------------------------
+
+  /** @private */
+  _init() {
+    if (this.config.enableLightbox) {
+      this._createLightbox();
+    }
+
+    this._initFilterButtons();
+    this._initGalleryItems();
+
+    if (this.config.enableNsfw) {
+      this._initNsfwContent();
+    }
+
+    if (this.config.enableKeyboard) {
+      this._events.add(document, 'keydown', (e) => this._handleKeyboard(e));
+    }
+
+    this._updateGalleryImages();
   }
-}
 
-/**
- * Closes the lightbox
- */
-function closeLightbox() {
-  const lightbox = document.getElementById(state.config.lightboxId);
-  if (!lightbox) return;
-  
-  lightbox.classList.remove('active');
-  document.body.style.overflow = '';
-  state.lightboxOpen = false;
-  
-  if (state.config.onLightboxClose) {
-    state.config.onLightboxClose();
+  // --------------------------------------------------------------------------
+  // LIGHTBOX
+  // --------------------------------------------------------------------------
+
+  /** @private */
+  _createLightbox() {
+    if (document.getElementById(this.config.lightboxId)) return;
+
+    const lightbox = document.createElement('div');
+    lightbox.id = this.config.lightboxId;
+    lightbox.className = 'lightbox';
+    // Static HTML only — no interpolated variables, safe from XSS
+    lightbox.innerHTML = `
+      <button class="lightbox-close" aria-label="Close lightbox">&times;</button>
+      <button class="lightbox-prev" aria-label="Previous image">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M15 18l-6-6 6-6"/>
+        </svg>
+      </button>
+      <img class="lightbox-image" src="" alt="">
+      <button class="lightbox-next" aria-label="Next image">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M9 18l6-6-6-6"/>
+        </svg>
+      </button>
+      <div class="lightbox-caption"></div>
+      <div class="lightbox-counter"></div>
+    `;
+
+    document.body.appendChild(lightbox);
+
+    // All listeners tracked for cleanup
+    this._events.add(lightbox.querySelector('.lightbox-close'), 'click', () => this.closeLightbox());
+    this._events.add(lightbox.querySelector('.lightbox-prev'), 'click', () => this.navigateLightbox(-1));
+    this._events.add(lightbox.querySelector('.lightbox-next'), 'click', () => this.navigateLightbox(1));
+    this._events.add(lightbox, 'click', (e) => {
+      if (e.target === lightbox) this.closeLightbox();
+    });
+
+    // Touch gestures
+    let touchStartX = 0;
+    this._events.add(lightbox, 'touchstart', (e) => {
+      touchStartX = e.touches[0].clientX;
+    }, { passive: true });
+
+    this._events.add(lightbox, 'touchend', (e) => {
+      const touchEndX = e.changedTouches[0].clientX;
+      const diff = touchStartX - touchEndX;
+      if (Math.abs(diff) > 50) {
+        this.navigateLightbox(diff > 0 ? 1 : -1);
+      }
+    }, { passive: true });
   }
-}
 
-/**
- * Navigates to next/previous image in lightbox
- * @param {number} direction - 1 for next, -1 for previous
- */
-function navigateLightbox(direction) {
-  const newIndex = state.currentImageIndex + direction;
-  
-  if (newIndex >= 0 && newIndex < state.galleryImages.length) {
-    openLightbox(newIndex);
+  /**
+   * Opens the lightbox with specified image
+   * @param {number} index - Index of image in gallery
+   */
+  openLightbox(index) {
+    const lightbox = document.getElementById(this.config.lightboxId);
+    if (!lightbox || !this.galleryImages[index]) return;
+
+    this.currentImageIndex = index;
+    this.lightboxOpen = true;
+
+    const imageData = this.galleryImages[index];
+    const img = lightbox.querySelector('.lightbox-image');
+    const caption = lightbox.querySelector('.lightbox-caption');
+    const counter = lightbox.querySelector('.lightbox-counter');
+
+    img.src = imageData.src;
+    img.alt = imageData.alt || '';
+
+    if (imageData.isNsfw) {
+      img.classList.add('nsfw-revealed');
+    } else {
+      img.classList.remove('nsfw-revealed');
+    }
+
+    caption.textContent = imageData.caption || '';
+    caption.style.display = imageData.caption ? 'block' : 'none';
+
+    counter.textContent = `${index + 1} / ${this.galleryImages.length}`;
+
+    lightbox.querySelector('.lightbox-prev').disabled = index === 0;
+    lightbox.querySelector('.lightbox-next').disabled = index === this.galleryImages.length - 1;
+
+    lightbox.classList.add('active');
+    document.body.style.overflow = 'hidden';
+
+    if (this.config.onLightboxOpen) {
+      this.config.onLightboxOpen(imageData, index);
+    }
   }
-}
 
-// ============================================================================
-// FILTERING
-// ============================================================================
+  /**
+   * Closes the lightbox
+   */
+  closeLightbox() {
+    const lightbox = document.getElementById(this.config.lightboxId);
+    if (!lightbox) return;
 
-/**
- * Filters gallery items by category
- * @param {string} filter - Filter value (tag name or 'all')
- */
-function filterGallery(filter) {
-  const galleries = document.querySelectorAll(state.config.gallerySelector);
-  
-  galleries.forEach(gallery => {
-    const items = gallery.querySelectorAll(state.config.itemSelector);
-    
-    items.forEach(item => {
-      const tags = (item.dataset.tags || '').split(',').map(t => t.trim());
-      const shouldShow = filter === 'all' || tags.includes(filter);
-      
-      if (state.config.filterAnimation) {
-        item.style.transition = `opacity ${state.config.animationDuration}ms ease, transform ${state.config.animationDuration}ms ease`;
-        
-        if (shouldShow) {
-          item.style.opacity = '0';
-          item.style.transform = 'scale(0.9)';
-          item.style.display = '';
-          
-          requestAnimationFrame(() => {
-            item.style.opacity = '1';
-            item.style.transform = 'scale(1)';
-          });
+    lightbox.classList.remove('active');
+    document.body.style.overflow = '';
+    this.lightboxOpen = false;
+
+    if (this.config.onLightboxClose) {
+      this.config.onLightboxClose();
+    }
+  }
+
+  /**
+   * Navigates to next/previous image in lightbox
+   * @param {number} direction - 1 for next, -1 for previous
+   */
+  navigateLightbox(direction) {
+    const newIndex = this.currentImageIndex + direction;
+    if (newIndex >= 0 && newIndex < this.galleryImages.length) {
+      this.openLightbox(newIndex);
+    }
+  }
+
+  // --------------------------------------------------------------------------
+  // FILTERING
+  // --------------------------------------------------------------------------
+
+  /**
+   * Filters gallery items by category
+   * @param {string} filter - Filter value (tag name or 'all')
+   */
+  filter(filter) {
+    const galleries = document.querySelectorAll(this.config.gallerySelector);
+
+    galleries.forEach(gallery => {
+      const items = gallery.querySelectorAll(this.config.itemSelector);
+
+      items.forEach(item => {
+        const tags = (item.dataset.tags || '').split(',').map(t => t.trim());
+        const shouldShow = filter === 'all' || tags.includes(filter);
+
+        if (this.config.filterAnimation) {
+          item.style.transition = `opacity ${this.config.animationDuration}ms ease, transform ${this.config.animationDuration}ms ease`;
+
+          if (shouldShow) {
+            item.style.opacity = '0';
+            item.style.transform = 'scale(0.9)';
+            item.style.display = '';
+
+            requestAnimationFrame(() => {
+              item.style.opacity = '1';
+              item.style.transform = 'scale(1)';
+            });
+          } else {
+            item.style.opacity = '0';
+            item.style.transform = 'scale(0.9)';
+
+            this._timers.setTimeout(() => {
+              item.style.display = 'none';
+            }, this.config.animationDuration);
+          }
         } else {
-          item.style.opacity = '0';
-          item.style.transform = 'scale(0.9)';
-          
-          setTimeout(() => {
-            item.style.display = 'none';
-          }, state.config.animationDuration);
+          item.style.display = shouldShow ? '' : 'none';
         }
-      } else {
-        item.style.display = shouldShow ? '' : 'none';
-      }
+      });
     });
-  });
-  
-  state.currentFilter = filter;
-  updateGalleryImages();
-  
-  // Update filter button active state
-  document.querySelectorAll(state.config.filterBtnSelector).forEach(btn => {
-    btn.classList.toggle('active', btn.dataset.filter === filter);
-  });
-  
-  if (state.config.onFilter) {
-    state.config.onFilter(filter);
-  }
-}
 
-// ============================================================================
-// NSFW HANDLING
-// ============================================================================
+    this.currentFilter = filter;
+    this._updateGalleryImages();
 
-/**
- * Reveals NSFW content on click
- * @param {HTMLElement} element - NSFW content element
- */
-function revealNsfwContent(element) {
-  if (element.classList.contains('revealed')) return;
-  
-  element.classList.add('revealed');
-  
-  if (state.config.onNsfwReveal) {
-    state.config.onNsfwReveal(element);
+    // Update filter button active state
+    document.querySelectorAll(this.config.filterBtnSelector).forEach(btn => {
+      btn.classList.toggle('active', btn.dataset.filter === filter);
+    });
+
+    if (this.config.onFilter) {
+      this.config.onFilter(filter);
+    }
   }
-}
 
-/**
- * Initializes NSFW content handling
- * @private
- */
-function initNsfwContent() {
-  document.querySelectorAll(state.config.nsfwSelector).forEach(item => {
-    if (!item.dataset.warning) {
-      item.dataset.warning = state.config.nsfwWarning;
+  // --------------------------------------------------------------------------
+  // NSFW HANDLING
+  // --------------------------------------------------------------------------
+
+  /**
+   * Reveals NSFW content on click
+   * @param {HTMLElement} element - NSFW content element
+   */
+  revealNsfw(element) {
+    if (element.classList.contains('revealed')) return;
+    element.classList.add('revealed');
+
+    if (this.config.onNsfwReveal) {
+      this.config.onNsfwReveal(element);
     }
-    
-    item.addEventListener('click', (e) => {
-      if (!item.classList.contains('revealed')) {
-        e.preventDefault();
-        e.stopPropagation();
-        revealNsfwContent(item);
+  }
+
+  /** @private */
+  _initNsfwContent() {
+    const container = document.querySelector(this.config.gallerySelector);
+    if (!container) return;
+
+    container.querySelectorAll(this.config.nsfwSelector).forEach(item => {
+      if (!item.dataset.warning) {
+        item.dataset.warning = this.config.nsfwWarning;
       }
+
+      this._events.add(item, 'click', (e) => {
+        if (!item.classList.contains('revealed')) {
+          e.preventDefault();
+          e.stopPropagation();
+          this.revealNsfw(item);
+        }
+      });
     });
-  });
-}
+  }
 
-// ============================================================================
-// KEYBOARD NAVIGATION
-// ============================================================================
+  // --------------------------------------------------------------------------
+  // KEYBOARD NAVIGATION
+  // --------------------------------------------------------------------------
 
-/**
- * Handles keyboard events for lightbox navigation
- * @private
- * @param {KeyboardEvent} e - Keyboard event
- */
-function handleKeyboard(e) {
-  if (!state.lightboxOpen) return;
-  
-  switch (e.key) {
-    case 'Escape':
-      closeLightbox();
-      break;
-    case 'ArrowLeft':
-      navigateLightbox(-1);
-      break;
-    case 'ArrowRight':
-      navigateLightbox(1);
-      break;
+  /** @private */
+  _handleKeyboard(e) {
+    if (!this.lightboxOpen) return;
+
+    switch (e.key) {
+      case 'Escape':
+        this.closeLightbox();
+        break;
+      case 'ArrowLeft':
+        this.navigateLightbox(-1);
+        break;
+      case 'ArrowRight':
+        this.navigateLightbox(1);
+        break;
+    }
   }
-}
 
-// ============================================================================
-// UTILITY
-// ============================================================================
+  // --------------------------------------------------------------------------
+  // INITIALIZATION HELPERS
+  // --------------------------------------------------------------------------
 
-/**
- * Updates the list of gallery images for lightbox navigation
- * @private
- */
-function updateGalleryImages() {
-  state.galleryImages = [];
-  
-  document.querySelectorAll(`${state.config.gallerySelector} ${state.config.itemSelector}`).forEach((item, index) => {
-    if (item.style.display === 'none') return;
-    
-    const img = item.querySelector('img');
-    const caption = item.querySelector('.gallery-caption');
-    
-    if (img) {
-      state.galleryImages.push({
-        src: img.dataset.fullSrc || img.src,
-        alt: img.alt,
-        caption: caption ? caption.textContent : '',
-        isNsfw: item.classList.contains('nsfw-content'),
-        element: item,
-        originalIndex: index
+  /** @private */
+  _initFilterButtons() {
+    document.querySelectorAll(this.config.filterBtnSelector).forEach(btn => {
+      this._events.add(btn, 'click', () => {
+        this.filter(btn.dataset.filter || 'all');
       });
+    });
+  }
+
+  /** @private */
+  _initGalleryItems() {
+    document.querySelectorAll(`${this.config.gallerySelector} ${this.config.itemSelector}`).forEach((item) => {
+      const img = item.querySelector('img');
+
+      if (img && this.config.enableLightbox) {
+        img.style.cursor = 'pointer';
+        this._events.add(img, 'click', (e) => {
+          if (item.classList.contains('nsfw-content') && !item.classList.contains('revealed')) {
+            return;
+          }
+
+          e.stopPropagation();
+          const visibleIndex = this.galleryImages.findIndex(i => i.element === item);
+          if (visibleIndex !== -1) {
+            this.openLightbox(visibleIndex);
+          }
+        });
+      }
+    });
+  }
+
+  // --------------------------------------------------------------------------
+  // UTILITY
+  // --------------------------------------------------------------------------
+
+  /** @private */
+  _updateGalleryImages() {
+    this.galleryImages = [];
+
+    document.querySelectorAll(`${this.config.gallerySelector} ${this.config.itemSelector}`).forEach((item, index) => {
+      if (item.style.display === 'none') return;
+
+      const img = item.querySelector('img');
+      const caption = item.querySelector('.gallery-caption');
+
+      if (img) {
+        this.galleryImages.push({
+          src: img.dataset.fullSrc || img.src,
+          alt: img.alt,
+          caption: caption ? caption.textContent : '',
+          isNsfw: item.classList.contains('nsfw-content'),
+          element: item,
+          originalIndex: index
+        });
+      }
+    });
+  }
+
+  /**
+   * Refresh the gallery image list (call after dynamic content changes)
+   */
+  refresh() {
+    this._updateGalleryImages();
+  }
+
+  /**
+   * @returns {Array} Copy of current gallery images
+   */
+  getImages() {
+    return [...this.galleryImages];
+  }
+
+  /**
+   * @returns {string} Current filter value
+   */
+  getCurrentFilter() {
+    return this.currentFilter;
+  }
+
+  // --------------------------------------------------------------------------
+  // DESTROY
+  // --------------------------------------------------------------------------
+
+  /**
+   * Tear down this gallery instance: remove event listeners, lightbox, and state.
+   */
+  destroy() {
+    this._events.removeAll();
+    this._timers.clearAll();
+
+    const lightbox = document.getElementById(this.config.lightboxId);
+    if (lightbox) {
+      lightbox.remove();
     }
-  });
+
+    this.currentFilter = 'all';
+    this.lightboxOpen = false;
+    this.currentImageIndex = 0;
+    this.galleryImages = [];
+  }
 }
 
 // ============================================================================
-// PUBLIC API
+// PUBLIC API — backward compatible
 // ============================================================================
 
+/** @type {Gallery|null} Default auto-initialized instance */
+let _defaultInstance = null;
+
 /**
- * Initializes the gallery system
- * @param {string|HTMLElement} selector - Gallery container selector or element
- * @param {Object} options - Configuration options
- * @returns {Object} Gallery API
+ * Initializes a gallery instance
+ * @param {string|HTMLElement} [selector='.gallery-container'] - Gallery container selector or element
+ * @param {Object} [options={}] - Configuration options
+ * @returns {Gallery} Gallery instance with filter, openLightbox, closeLightbox, destroy, etc.
  */
 export function initGallery(selector = '.gallery-container', options = {}) {
-  // Merge config
-  state.config = { ...DEFAULT_CONFIG, ...options };
-  
-  if (typeof selector === 'string') {
-    state.config.gallerySelector = selector;
-  }
-  
-  // Create lightbox
-  if (state.config.enableLightbox) {
-    createLightbox();
-  }
-  
-  // Initialize filter buttons
-  document.querySelectorAll(state.config.filterBtnSelector).forEach(btn => {
-    btn.addEventListener('click', () => {
-      filterGallery(btn.dataset.filter || 'all');
-    });
-  });
-  
-  // Initialize gallery items
-  document.querySelectorAll(`${state.config.gallerySelector} ${state.config.itemSelector}`).forEach((item, index) => {
-    const img = item.querySelector('img');
-    
-    if (img && state.config.enableLightbox) {
-      img.style.cursor = 'pointer';
-      img.addEventListener('click', (e) => {
-        // Don't open lightbox for unrevealed NSFW content
-        if (item.classList.contains('nsfw-content') && !item.classList.contains('revealed')) {
-          return;
-        }
-        
-        e.stopPropagation();
-        const visibleIndex = state.galleryImages.findIndex(i => i.element === item);
-        if (visibleIndex !== -1) {
-          openLightbox(visibleIndex);
-        }
-      });
-    }
-  });
-  
-  // Initialize NSFW handling
-  if (state.config.enableNsfw) {
-    initNsfwContent();
-  }
-  
-  // Initialize keyboard navigation
-  if (state.config.enableKeyboard) {
-    document.addEventListener('keydown', handleKeyboard);
+  const instance = new Gallery(selector, options);
+  // Track as default if this is the first / auto-init call
+  if (!_defaultInstance) {
+    _defaultInstance = instance;
   }
-  
-  // Build initial image list
-  updateGalleryImages();
-  
-  // Return public API
-  return {
-    filter: filterGallery,
-    openLightbox,
-    closeLightbox,
-    revealNsfw: revealNsfwContent,
-    refresh: updateGalleryImages,
-    getImages: () => [...state.galleryImages],
-    getCurrentFilter: () => state.currentFilter
-  };
+  return instance;
 }
 
 /**
- * Destroys the gallery instance and removes event listeners
+ * Destroys a gallery instance. If no instance is passed, destroys the default instance.
+ * @param {Gallery} [instance] - Gallery instance to destroy
  */
-export function destroyGallery() {
-  const lightbox = document.getElementById(state.config.lightboxId);
-  if (lightbox) {
-    lightbox.remove();
+export function destroyGallery(instance) {
+  const target = instance || _defaultInstance;
+  if (target) {
+    target.destroy();
+    if (target === _defaultInstance) {
+      _defaultInstance = null;
+    }
   }
-  
-  document.removeEventListener('keydown', handleKeyboard);
-  
-  state = {
-    currentFilter: 'all',
-    lightboxOpen: false,
-    currentImageIndex: 0,
-    galleryImages: [],
-    config: { ...DEFAULT_CONFIG }
-  };
 }
 
 // Auto-initialize if DOM is ready and elements exist
@@ -461,12 +528,12 @@ if (typeof document !== 'undefined') {
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', () => {
       if (document.querySelector('.gallery-container')) {
-        initGallery();
+        _defaultInstance = initGallery();
       }
     });
   } else {
     if (document.querySelector('.gallery-container')) {
-      initGallery();
+      _defaultInstance = initGallery();
     }
   }
 }
@@ -478,4 +545,3 @@ if (typeof window !== 'undefined') {
     destroy: destroyGallery
   };
 }
-