advanced-filter-system 1.0.8 → 1.1.0

package/dist/AFS.esm.js

@@ -1,4809 +0,0 @@
-/**
- * @fileoverview Logging system for AFS
- */
-
-class Logger {
-  /**
-   * @param {boolean} [debug=false] - Enable debug mode
-   * @param {string} [logLevel='info'] - Logging level
-   */
-  constructor() {
-    let debug = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    let logLevel = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'info';
-    this.enabled = debug;
-    this.level = logLevel;
-    this.levels = {
-      error: 0,
-      warn: 1,
-      info: 2,
-      debug: 3
-    };
-  }
-
-  /**
-   * Internal log method
-   * @private
-   */
-  _log(level) {
-    if (!this.enabled) return;
-    const currentLevelValue = this.levels[this.level];
-    const messageLevel = this.levels[level];
-    if (messageLevel <= currentLevelValue) {
-      const timestamp = new Date().toISOString();
-      const prefix = `[AFS ${level.toUpperCase()}] ${timestamp}`;
-      for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-        args[_key - 1] = arguments[_key];
-      }
-      switch (level) {
-        case 'error':
-          console.error(prefix, ...args);
-          break;
-        case 'warn':
-          console.warn(prefix, ...args);
-          break;
-        case 'info':
-          console.info(prefix, ...args);
-          break;
-        case 'debug':
-          console.debug(prefix, ...args);
-          break;
-      }
-    }
-  }
-
-  /**
-   * Log error message
-   * @public
-   */
-  error() {
-    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-      args[_key2] = arguments[_key2];
-    }
-    this._log('error', ...args);
-  }
-
-  /**
-   * Log warning message
-   * @public
-   */
-  warn() {
-    for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-      args[_key3] = arguments[_key3];
-    }
-    this._log('warn', ...args);
-  }
-
-  /**
-   * Log info message
-   * @public
-   */
-  info() {
-    for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
-      args[_key4] = arguments[_key4];
-    }
-    this._log('info', ...args);
-  }
-
-  /**
-   * Log debug message
-   * @public
-   */
-  debug() {
-    for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
-      args[_key5] = arguments[_key5];
-    }
-    this._log('debug', ...args);
-  }
-
-  /**
-   * Enable or disable debug mode
-   * @public
-   */
-  setDebugMode(enabled) {
-    let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'info';
-    this.enabled = enabled;
-    if (this.levels.hasOwnProperty(level)) {
-      this.level = level;
-    }
-    this._log('info', `Debug mode ${enabled ? 'enabled' : 'disabled'} with level: ${level}`);
-  }
-}
-
-/**
- * @fileoverview Configuration management for AFS
- */
-
-class Options {
-  /**
-   * @typedef {Object} AFSOptions
-   * @property {string} containerSelector - Main container selector
-   * @property {string} itemSelector - Items to filter selector
-   * @property {string} filterButtonSelector - Filter buttons selector
-   * @property {string} searchInputSelector - Search input selector
-   * @property {string} counterSelector - Results counter selector
-   * @property {string} activeClass - Active state class
-   * @property {string} hiddenClass - Hidden state class
-   * @property {number} animationDuration - Animation duration in ms
-   * @property {string} filterMode - Filter mode ('OR' or 'AND')
-   * @property {string[]} searchKeys - Data attributes to search in
-   * @property {number} debounceTime - Search debounce delay in ms
-   * @property {boolean} debug - Enable debug mode
-   * @property {string} logLevel - Log level
-   * @property {string} dateFormat - Date format
-   * @property {Object} counter - Counter-related options
-   * @property {Object} styles - Style-related options
-   */
-
-  /**
-   * @type {AFSOptions}
-   */
-  static defaults = {
-    // Selectors
-    containerSelector: '.afs-filter-container',
-    itemSelector: '.afs-filter-item',
-    filterButtonSelector: '.afs-btn-filter',
-    searchInputSelector: '.afs-filter-search',
-    counterSelector: '.afs-filter-counter',
-    // Classes
-    activeClass: 'active',
-    hiddenClass: 'hidden',
-    // Animation
-    animationDuration: 300,
-    animationType: 'fade',
-    animationEasing: 'ease-out',
-    // Filtering
-    filterMode: 'OR',
-    searchKeys: ['title'],
-    debounceTime: 300,
-    // Debug
-    debug: false,
-    logLevel: 'info',
-    // Date handling
-    dateFormat: 'YYYY-MM-DD',
-    counter: {
-      template: 'Showing {visible} of {total}',
-      showFiltered: true,
-      filteredTemplate: '({filtered} filtered)',
-      noResultsTemplate: 'No items found',
-      formatter: num => num.toLocaleString()
-    },
-    // Styles
-    styles: {
-      slider: {
-        // Add new UI options
-        ui: {
-          showHistogram: false,
-          bins: 10,
-          // Number of bins for histogram
-          track: {
-            radius: '2px',
-            // Button radius
-            background: '#e5e7eb' // Track color
-          },
-          thumb: {
-            radius: '50%',
-            // Button radius
-            size: '16px',
-            // Button size
-            background: '#000' // Button color
-          },
-          histogram: {
-            background: '#e5e7eb',
-            // Histogram background
-            bar: {
-              background: '#000' // Bar color
-            }
-          }
-        }
-      },
-      pagination: {
-        ui: {
-          button: {
-            background: 'transparent',
-            border: '1px solid #000',
-            borderRadius: '4px',
-            padding: '8px 12px',
-            color: '#000',
-            active: {
-              background: '#000',
-              color: '#fff'
-            },
-            hover: {
-              background: '#000',
-              color: '#fff'
-            }
-          }
-        }
-      },
-      colors: {
-        primary: '#000',
-        background: '#e5e7eb',
-        text: '#000'
-      }
-    },
-    // Slider
-    slider: {
-      containerClass: 'afs-range-slider',
-      trackClass: 'afs-range-track',
-      thumbClass: 'afs-range-thumb',
-      valueClass: 'afs-range-value',
-      selectedClass: 'afs-range-selected'
-    },
-    // Pagination
-    pagination: {
-      enabled: false,
-      itemsPerPage: 10,
-      container: '.afs-pagination-container',
-      pageButtonClass: 'afs-page-button',
-      activePageClass: 'afs-page-active',
-      containerClass: 'afs-pagination',
-      scrollToTop: false,
-      scrollOffset: 50,
-      scrollBehavior: 'smooth' // or 'auto' for instant scroll
-    }
-  };
-  constructor() {
-    let userOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    this.options = this.mergeOptions(Options.defaults, userOptions);
-    this.initializeStyles();
-    this.validate();
-  }
-
-  /**
-   * Initialize styles with defaults
-   * @private
-   */
-  initializeStyles() {
-    const defaultStyles = Options.defaults.styles;
-    const currentStyles = this.options.styles || {};
-    this.options.styles = this.mergeOptions(defaultStyles, currentStyles);
-
-    // Ensure colors object exists and has all required properties
-    this.options.styles.colors = {
-      ...defaultStyles.colors,
-      ...(currentStyles.colors || {})
-    };
-  }
-
-  /**
-   * Deep merge options
-   * @private
-   * @param {Object} target - Target object
-   * @param {Object} source - Source object
-   * @returns {Object} Merged options
-   */
-  mergeOptions(target, source) {
-    const result = {
-      ...target
-    };
-    for (const key in source) {
-      if (source[key] !== null && typeof source[key] === 'object' && !Array.isArray(source[key])) {
-        // If the key doesn't exist in target or isn't an object, create/override it
-        if (!target[key] || typeof target[key] !== 'object') {
-          result[key] = {};
-        }
-        // Recursively merge nested objects
-        result[key] = this.mergeOptions(result[key], source[key]);
-      } else if (source[key] !== undefined) {
-        // Only override if the source value is defined
-        result[key] = source[key];
-      }
-    }
-    return result;
-  }
-
-  /**
-   * Validate options
-   * @private
-   * @throws {Error} If options are invalid
-   */
-  validate() {
-    // Required selectors
-    const requiredSelectors = ['containerSelector', 'itemSelector'];
-    for (const selector of requiredSelectors) {
-      if (typeof this.options[selector] !== 'string') {
-        throw new Error(`${selector} must be a string`);
-      }
-    }
-
-    // Animation duration
-    if (typeof this.options.animationDuration !== 'number' || this.options.animationDuration < 0) {
-      throw new Error('animationDuration must be a positive number');
-    }
-
-    // Filter mode
-    if (!['OR', 'AND'].includes(this.options.filterMode.toUpperCase())) {
-      throw new Error('filterMode must be either "OR" or "AND"');
-    }
-
-    // Search keys
-    if (!Array.isArray(this.options.searchKeys) || this.options.searchKeys.length === 0) {
-      throw new Error('searchKeys must be a non-empty array');
-    }
-
-    // Counter validation
-    if (this.options.counter) {
-      if (typeof this.options.counter.template !== 'string') {
-        throw new Error('counter.template must be a string');
-      }
-      if (typeof this.options.counter.showFiltered !== 'boolean') {
-        this.options.counter.showFiltered = true; // Set default
-      }
-      if (typeof this.options.counter.formatter !== 'function') {
-        this.options.counter.formatter = num => num.toLocaleString(); // Set default
-      }
-    } else {
-      this.options.counter = {
-        ...Options.defaults.counter
-      }; // Set defaults if missing
-    }
-  }
-
-  /**
-   * Get option value
-   * @param {string} path - Dot notation path to option
-   * @returns {any} Option value
-   */
-  get(path) {
-    return path.split('.').reduce((obj, key) => obj?.[key], this.options);
-  }
-
-  /**
-   * Set option value
-   * @param {string} path - Dot notation path to option
-   * @param {any} value - New value
-   */
-  set(path, value) {
-    const parts = path.split('.');
-    const last = parts.pop();
-    const target = parts.reduce((obj, key) => {
-      if (!(key in obj)) obj[key] = {};
-      return obj[key];
-    }, this.options);
-    target[last] = value;
-    this.validate();
-  }
-
-  /**
-   * Update multiple options
-   * @param {Object} updates - Options to update
-   */
-  update(updates) {
-    this.options = this.mergeOptions(this.options, updates);
-    this.validate();
-  }
-
-  /**
-   * Reset options to defaults
-   */
-  reset() {
-    this.options = {
-      ...Options.defaults
-    };
-  }
-
-  /**
-   * Export options
-   * @returns {Object} Current options
-   */
-  export() {
-    return {
-      ...this.options
-    };
-  }
-}
-
-/**
- * @fileoverview State management for AFS
- */
-
-class State {
-  constructor() {
-    this.state = {
-      filters: {
-        current: new Set(['*']),
-        groups: new Map(),
-        ranges: new Map(),
-        dateRanges: new Map(),
-        mode: 'OR',
-        groupMode: 'OR'
-      },
-      search: {
-        query: '',
-        keys: ['title']
-      },
-      sort: {
-        orders: {},
-        current: null
-      },
-      items: {
-        visible: new Set(),
-        total: 0
-      },
-      pagination: {
-        currentPage: 1,
-        itemsPerPage: 10,
-        totalPages: 0
-      }
-    };
-  }
-
-  /**
-   * Get current state
-   * @returns {Object} Current state
-   */
-  getState() {
-    return this.state;
-  }
-
-  /**
-   * Update state
-   * @param {string} path - Dot notation path to update
-   * @param {any} value - New value
-   */
-  setState(path, value) {
-    const parts = path.split('.');
-    let current = this.state;
-    for (let i = 0; i < parts.length - 1; i++) {
-      if (!(parts[i] in current)) {
-        current[parts[i]] = {};
-      }
-      current = current[parts[i]];
-    }
-    current[parts[parts.length - 1]] = value;
-  }
-
-  /**
-   * Export state
-   * @returns {Object} Exportable state
-   */
-  export() {
-    return {
-      filters: {
-        current: Array.from(this.state.filters.current),
-        groups: Array.from(this.state.filters.groups.entries()),
-        ranges: Array.from(this.state.filters.ranges.entries()),
-        dateRanges: Array.from(this.state.filters.dateRanges.entries()),
-        mode: this.state.filters.mode,
-        groupMode: this.state.filters.groupMode
-      },
-      search: {
-        ...this.state.search
-      },
-      sort: {
-        ...this.state.sort
-      },
-      pagination: {
-        ...this.state.pagination
-      }
-    };
-  }
-
-  /**
-   * Import state
-   * @param {Object} importedState - State to import
-   */
-  import(importedState) {
-    if (importedState.filters) {
-      this.state.filters.current = new Set(importedState.filters.current);
-      this.state.filters.groups = new Map(importedState.filters.groups);
-      this.state.filters.ranges = new Map(importedState.filters.ranges);
-      this.state.filters.dateRanges = new Map(importedState.filters.dateRanges);
-      this.state.filters.mode = importedState.filters.mode;
-      this.state.filters.groupMode = importedState.filters.groupMode;
-    }
-    if (importedState.search) {
-      this.state.search = {
-        ...importedState.search
-      };
-    }
-    if (importedState.sort) {
-      this.state.sort = {
-        ...importedState.sort
-      };
-    }
-    if (importedState.pagination) {
-      this.state.pagination = {
-        ...importedState.pagination
-      };
-    }
-  }
-
-  /**
-   * Reset state to initial values
-   */
-  reset() {
-    this.state = {
-      filters: {
-        current: new Set(['*']),
-        groups: new Map(),
-        ranges: new Map(),
-        dateRanges: new Map(),
-        mode: 'OR',
-        groupMode: 'OR'
-      },
-      search: {
-        query: '',
-        keys: ['title']
-      },
-      sort: {
-        orders: {},
-        current: null
-      },
-      items: {
-        visible: new Set(),
-        total: 0
-      },
-      pagination: {
-        currentPage: 1,
-        itemsPerPage: 10,
-        totalPages: 0
-      }
-    };
-  }
-}
-
-/**
- * @fileoverview Style management for AFS
- */
-
-class StyleManager {
-  /**
-   * @param {import('../core/Options').Options} options - Options instance
-   */
-  constructor(options) {
-    this.options = options;
-    this.styleElement = null;
-  }
-
-  /**
-   * Create base styles
-   * @private
-   * @returns {string} CSS styles
-   */
-  createBaseStyles() {
-    const hiddenClass = this.options.get("hiddenClass") || "hidden";
-    const itemSelector = this.options.get("itemSelector") || ".afs-filter-item";
-    const filterButtonSelector = this.options.get("filterButtonSelector") || ".afs-btn-filter";
-    const activeClass = this.options.get("activeClass") || "active";
-    const animationDuration = this.options.get("animationDuration") || '300ms';
-    const animationEasing = this.options.get("animationEasing") || 'ease-out';
-    return `
-      .${hiddenClass} {
-        display: none !important;
-      }
-
-      ${itemSelector} {
-        opacity: 1;
-        transform: scale(1);
-        filter: blur(0);
-        transition: opacity ${animationDuration} ${animationEasing},
-                    transform ${animationDuration} ${animationEasing},
-                    filter ${animationDuration} ${animationEasing};
-      }
-
-      ${itemSelector}.${hiddenClass} {
-        opacity: 0;
-        transform: scale(0.95);
-        filter: blur(5px);
-      }
-
-      ${filterButtonSelector} {
-        opacity: 0.5;
-        transition: opacity ${animationDuration} ${animationEasing};
-      }
-
-      ${filterButtonSelector}.${activeClass} {
-        opacity: 1;
-      }
-    `;
-  }
-
-  /**
-   * Create range slider styles
-   * @private
-   * @returns {string} CSS styles
-   */
-  createRangeStyles() {
-    const styles = this.options.get("styles");
-    const sliderOptions = this.options.get("slider") || {};
-    const sliderStyles = styles.slider;
-    const colors = styles.colors;
-    const containerClass = sliderOptions.containerClass || "afs-range-slider";
-    const trackClass = sliderOptions.trackClass || "afs-range-track";
-    const thumbClass = sliderOptions.thumbClass || "afs-range-thumb";
-    const valueClass = sliderOptions.valueClass || "afs-range-value";
-    const selectedClass = sliderOptions.selectedClass || "afs-range-selected";
-    return `
-    /* Range Slider Styles */
-    .${containerClass} {
-      position: relative;
-      width: auto;
-      height: 40px;
-      margin: 10px 0;
-      padding: 0 8px;
-    }
-
-    .${trackClass} {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      width: 100%;
-      height: 4px;
-      background: ${sliderStyles.ui.thumb.background || colors.background};
-      border-radius: ${sliderStyles.ui.track.radius || "2px"};
-    }
-
-    .${thumbClass} {
-      position: absolute;
-      top: 50%;
-      width: ${sliderStyles.ui.thumb.size || "16px"};
-      height: ${sliderStyles.ui.thumb.size || "16px"};
-      background: ${sliderStyles.ui.thumb.background || colors.primary};
-      border-radius: ${sliderStyles.ui.thumb.radius || "50%"};
-      transform: translate(-50%, -50%);
-      cursor: pointer;
-      z-index: 2;
-    }
-
-    .${valueClass} {
-      position: absolute;
-      top: -20px;
-      transform: translateX(-50%);
-      font-size: 10px;
-      color: ${colors.text};
-    }
-
-    .${selectedClass} {
-      position: absolute;
-      height: 4px;
-      background: ${colors.primary};
-      top: 50%;
-      transform: translateY(-50%);
-    }
-
-    /* Histogram Styles */
-    .afs-histogram {
-      position: absolute;
-      bottom: 22px;
-      left: 8px;
-      right: 8px;
-      height: 20px;
-      display: flex;
-      align-items: flex-end;
-      gap: 1px;
-      opacity: 0.5;
-    }
-
-    .afs-histogram-bar {
-      flex: 1;
-      background-color: ${sliderStyles.ui.histogram.background || colors.background};
-      min-height: 4px;
-      transition: background-color 0.2s ease;
-    }
-
-    .afs-histogram-bar.active {
-      background-color: ${sliderStyles.ui.histogram.bar.background || colors.primary};
-    }
-  `;
-  }
-
-  /**
-   * Create date filter styles
-   * @private
-   * @returns {string} CSS styles
-   */
-  createDateStyles() {
-    const colors = this.options.get("styles").colors;
-    return `
-    .afs-date-range-container {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 1rem;
-      margin: 10px 0;
-    }
-
-    .afs-date-input-wrapper {
-      flex: 1;
-    }
-
-    .afs-date-input-wrapper label {
-      display: block;
-      font-size: 0.875rem;
-      color: ${colors.text};
-      margin-bottom: 0.5rem;
-    }
-
-    .afs-date-input {
-      width: 100%;
-      padding: 0.5rem;
-      border: 1px solid ${colors.background};
-      border-radius: 0.25rem;
-      font-size: 0.875rem;
-      color: ${colors.text};
-      transition: border-color 0.2s ease;
-    }
-
-    .afs-date-input:focus {
-      outline: none;
-      border-color: ${colors.primary};
-    }
-  `;
-  }
-
-  /**
-   * Apply all styles
-   * @public
-   */
-  applyStyles() {
-    try {
-      const styles = `
-      /* Base styles */
-      ${this.createBaseStyles()}
-
-      /* Range slider styles */
-      ${this.createRangeStyles()}
-
-      /* Date filter styles */
-      ${this.createDateStyles()}
-
-      /* Pagination styles */
-      ${this.createPaginationStyles()}
-
-      /* Search styles */
-      ${this.createSearchStyles()}
-    `;
-      if (this.styleElement) {
-        this.styleElement.textContent = styles;
-      } else {
-        this.styleElement = document.createElement("style");
-        this.styleElement.textContent = styles;
-        document.head.appendChild(this.styleElement);
-      }
-    } catch (error) {
-      console.error("Error applying styles:", error);
-      const fallbackStyles = this.createBaseStyles();
-      if (this.styleElement) {
-        this.styleElement.textContent = fallbackStyles;
-      } else {
-        this.styleElement = document.createElement("style");
-        this.styleElement.textContent = fallbackStyles;
-        document.head.appendChild(this.styleElement);
-      }
-    }
-  }
-
-  /**
-   * Create pagination styles
-   * @private
-   * @returns {string} CSS styles
-   */
-  createPaginationStyles() {
-    const styles = this.options.get("styles");
-    const paginationOptions = this.options.get("pagination") || {};
-    const colors = this.options.get("styles").colors;
-    const containerClass = paginationOptions.containerClass || "afs-pagination";
-    const buttonClass = paginationOptions.pageButtonClass || "afs-page-button";
-    const activeClass = paginationOptions.activePageClass || "afs-page-active";
-    const paginationStyles = styles.pagination;
-    return `
-      .${containerClass} {
-        display: flex;
-        justify-content: center;
-        gap: 8px;
-        margin-top: 20px;
-      }
-
-      .${buttonClass} {
-        padding: ${paginationStyles.ui.button.padding || '8px 12px'};
-        border: ${paginationStyles.ui.button.border || '1px solid ' + colors.primary};
-        border-radius: ${paginationStyles.ui.button.borderRadius || '4px'};
-        cursor: pointer;
-        transition: all 200ms ease-out;
-        background: ${paginationStyles.ui.button.background || 'transparent'};
-        color: ${paginationStyles.ui.button.color || colors.primary};
-      }
-
-      .${buttonClass}:hover {
-        background: ${paginationStyles.ui.button.hover.background || colors.primary};
-        color: ${paginationStyles.ui.button.hover.color || 'white'};
-      }
-
-      .${buttonClass}.${activeClass} {
-        background: ${paginationStyles.ui.button.active.background || colors.primary};
-        color: ${paginationStyles.ui.button.active.color || 'white'};
-      }
-
-      .${buttonClass}:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-    `;
-  }
-
-  /**
-   * Create search styles
-   * @private
-   * @returns {string} CSS styles
-   */
-  createSearchStyles() {
-    const searchClass = this.options.get("searchInputClass") || "afs-search";
-    const colors = this.options.get("styles").colors;
-    return `
-      .${searchClass} {
-        padding: 8px;
-        border: 1px solid ${colors.background};
-        border-radius: 4px;
-        width: 100%;
-        max-width: 300px;
-        transition: border-color 200ms ease-out;
-      }
-
-      .${searchClass}:focus {
-        outline: none;
-        border-color: ${colors.primary};
-      }
-    `;
-  }
-
-  /**
-   * Update styles
-   * @public
-   * @param {Object} newOptions - New style options
-   */
-  updateStyles(newOptions) {
-    this.options = newOptions;
-    this.applyStyles();
-  }
-
-  /**
-   * Remove styles
-   * @public
-   */
-  removeStyles() {
-    if (this.styleElement) {
-      this.styleElement.remove();
-      this.styleElement = null;
-    }
-  }
-}
-
-/**
- * @fileoverview Event handling system for AFS
- */
-
-class EventEmitter {
-  constructor() {
-    this.events = new Map();
-    this.onceEvents = new Map();
-  }
-
-  /**
-   * Subscribe to an event
-   * @param {string} eventName - Name of the event
-   * @param {Function} callback - Callback function
-   * @returns {Function} Unsubscribe function
-   */
-  on(eventName, callback) {
-    if (!this.events.has(eventName)) {
-      this.events.set(eventName, new Set());
-    }
-    this.events.get(eventName).add(callback);
-
-    // Return unsubscribe function
-    return () => this.off(eventName, callback);
-  }
-
-  /**
-   * Subscribe to an event once
-   * @param {string} eventName - Name of the event
-   * @param {Function} callback - Callback function
-   * @returns {Function} Unsubscribe function
-   */
-  once(eventName, callback) {
-    var _this = this;
-    const onceWrapper = function () {
-      _this.off(eventName, onceWrapper);
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      callback.apply(_this, args);
-    };
-    if (!this.onceEvents.has(eventName)) {
-      this.onceEvents.set(eventName, new Map());
-    }
-    this.onceEvents.get(eventName).set(callback, onceWrapper);
-    return this.on(eventName, onceWrapper);
-  }
-
-  /**
-   * Unsubscribe from an event
-   * @param {string} eventName - Name of the event
-   * @param {Function} callback - Callback function
-   */
-  off(eventName, callback) {
-    // Remove from regular events
-    if (this.events.has(eventName)) {
-      this.events.get(eventName).delete(callback);
-
-      // Cleanup if no more listeners
-      if (this.events.get(eventName).size === 0) {
-        this.events.delete(eventName);
-      }
-    }
-
-    // Remove from once events
-    if (this.onceEvents.has(eventName)) {
-      const onceWrapper = this.onceEvents.get(eventName).get(callback);
-      if (onceWrapper) {
-        this.events.get(eventName)?.delete(onceWrapper);
-        this.onceEvents.get(eventName).delete(callback);
-      }
-
-      // Cleanup if no more once listeners
-      if (this.onceEvents.get(eventName).size === 0) {
-        this.onceEvents.delete(eventName);
-      }
-    }
-  }
-
-  /**
-   * Emit an event
-   * @param {string} eventName - Name of the event
-   * @param {...any} args - Arguments to pass to callbacks
-   */
-  emit(eventName) {
-    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-      args[_key2 - 1] = arguments[_key2];
-    }
-    if (this.events.has(eventName)) {
-      this.events.get(eventName).forEach(callback => {
-        try {
-          callback.apply(this, args);
-        } catch (error) {
-          console.error(`Error in event handler for ${eventName}:`, error);
-        }
-      });
-    }
-  }
-
-  /**
-   * Remove all event listeners
-   * @param {string} [eventName] - Optional event name to clear specific event
-   */
-  removeAllListeners(eventName) {
-    if (eventName) {
-      this.events.delete(eventName);
-      this.onceEvents.delete(eventName);
-    } else {
-      this.events.clear();
-      this.onceEvents.clear();
-    }
-  }
-
-  /**
-   * Get the number of listeners for an event
-   * @param {string} eventName - Name of the event
-   * @returns {number} Number of listeners
-   */
-  listenerCount(eventName) {
-    return (this.events.get(eventName)?.size || 0) + (this.onceEvents.get(eventName)?.size || 0);
-  }
-}
-
-/**
- * @fileoverview Animation management for AFS
- */
-
-class Animation {
-  constructor(afs) {
-    this.afs = afs;
-    this.options = this.afs.options;
-    this.animations = {
-      fade: {
-        in: {
-          opacity: 1,
-          transform: 'scale(1)',
-          transitionTimingFunction: 'ease-in'
-        },
-        out: {
-          opacity: 0,
-          transform: 'scale(0.95)',
-          transitionTimingFunction: 'ease-out'
-        }
-      },
-      slide: {
-        in: {
-          opacity: 1,
-          transform: 'translateY(0)',
-          transitionTimingFunction: 'ease-in-out'
-        },
-        out: {
-          opacity: 0,
-          transform: 'translateY(20px)',
-          transitionTimingFunction: 'ease-in-out'
-        }
-      },
-      scale: {
-        in: {
-          opacity: 1,
-          transform: 'scale(1)',
-          transitionTimingFunction: 'ease-in'
-        },
-        out: {
-          opacity: 0,
-          transform: 'scale(0.8)',
-          transitionTimingFunction: 'ease-out'
-        }
-      },
-      rotate: {
-        in: {
-          opacity: 1,
-          transform: 'rotate(0deg) scale(1)',
-          transitionTimingFunction: 'ease-in'
-        },
-        out: {
-          opacity: 0,
-          transform: 'rotate(90deg) scale(0.9)',
-          transitionTimingFunction: 'ease-out'
-        }
-      },
-      flip: {
-        in: {
-          opacity: 1,
-          transform: 'rotateY(0)',
-          transitionTimingFunction: 'ease-in'
-        },
-        out: {
-          opacity: 0,
-          transform: 'rotateY(180deg)',
-          transitionTimingFunction: 'ease-out'
-        }
-      },
-      zoom: {
-        in: {
-          opacity: 1,
-          transform: 'scale(1.2)',
-          transitionTimingFunction: 'ease-in'
-        },
-        out: {
-          opacity: 0,
-          transform: 'scale(0.8)',
-          transitionTimingFunction: 'ease-out'
-        }
-      },
-      bounce: {
-        in: {
-          opacity: 1,
-          transform: 'translateY(0)',
-          animation: 'bounce 1s cubic-bezier(0.68, -0.55, 0.27, 1.55)'
-        },
-        out: {
-          opacity: 0,
-          transform: 'translateY(-20px)',
-          animation: 'bounceOut 1s ease-out'
-        }
-      },
-      blur: {
-        in: {
-          opacity: 1,
-          filter: 'blur(0)',
-          transitionTimingFunction: 'ease-in'
-        },
-        out: {
-          opacity: 0,
-          filter: 'blur(5px)',
-          transitionTimingFunction: 'ease-out'
-        }
-      },
-      skew: {
-        in: {
-          opacity: 1,
-          transform: 'skew(0deg)',
-          transitionTimingFunction: 'ease-in-out'
-        },
-        out: {
-          opacity: 0,
-          transform: 'skew(10deg)',
-          transitionTimingFunction: 'ease-in-out'
-        }
-      },
-      slideInLeft: {
-        in: {
-          opacity: 1,
-          transform: 'translateX(0)',
-          transitionTimingFunction: 'ease-in'
-        },
-        out: {
-          opacity: 0,
-          transform: 'translateX(-100%)',
-          transitionTimingFunction: 'ease-out'
-        }
-      },
-      slideInRight: {
-        in: {
-          opacity: 1,
-          transform: 'translateX(0)',
-          transitionTimingFunction: 'ease-in'
-        },
-        out: {
-          opacity: 0,
-          transform: 'translateX(100%)',
-          transitionTimingFunction: 'ease-out'
-        }
-      },
-      fadeInUp: {
-        in: {
-          opacity: 1,
-          transform: 'translateY(0)',
-          transitionTimingFunction: 'ease-in'
-        },
-        out: {
-          opacity: 0,
-          transform: 'translateY(10px)',
-          transitionTimingFunction: 'ease-out'
-        }
-      },
-      fadeInDown: {
-        in: {
-          opacity: 1,
-          transform: 'translateY(0)',
-          transitionTimingFunction: 'ease-in'
-        },
-        out: {
-          opacity: 0,
-          transform: 'translateY(-10px)',
-          transitionTimingFunction: 'ease-out'
-        }
-      },
-      bounceIn: {
-        in: {
-          opacity: 1,
-          transform: 'scale(1.05)',
-          transitionTimingFunction: 'cubic-bezier(0.68, -0.55, 0.27, 1.55)'
-        },
-        out: {
-          opacity: 0,
-          transform: 'scale(0.9)',
-          transitionTimingFunction: 'ease-out'
-        }
-      }
-    };
-  }
-  applyShowAnimation(item) {
-    let animationType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'fade';
-    const duration = this.options.get('animationDuration') || '300ms';
-    const animation = this.animations[animationType]?.in || this.animations.fade.in;
-    item.style.display = 'block';
-    requestAnimationFrame(() => {
-      Object.assign(item.style, animation, {
-        transition: `opacity ${duration} ${animation.transitionTimingFunction}, transform ${duration} ${animation.transitionTimingFunction}`
-      });
-    });
-  }
-  applyHideAnimation(item) {
-    let animationType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'fade';
-    const duration = this.options.get('animationDuration') || '300ms';
-    const animation = this.animations[animationType]?.out || this.animations.fade.out;
-    Object.assign(item.style, animation, {
-      transition: `opacity ${duration} ${animation.transitionTimingFunction}, transform ${duration} ${animation.transitionTimingFunction}`
-    });
-    const handleTransitionEnd = () => {
-      item.style.display = 'none';
-      item.removeEventListener('transitionend', handleTransitionEnd);
-    };
-    item.addEventListener('transitionend', handleTransitionEnd);
-  }
-  setAnimation(animationType) {
-    this.afs.options.set('animationType', animationType);
-  }
-}
-
-/**
- * @fileoverview Filter functionality for AFS
- */
-
-class Filter {
-  /**
-   * @param {import('../AFS').AFS} afs - Main AFS instance
-   */
-  constructor(afs) {
-    this.afs = afs;
-    this.animation = new Animation(afs);
-    this.filterButtons = new Map();
-    this.activeFilters = new Set(["*"]);
-    this.currentFilters = new Set(["*"]);
-    this.filterGroups = new Map();
-    this.sortOrders = new Map();
-    this.setupFilters();
-  }
-
-  /**
-   * Setup filters
-   * @private
-   */
-  setupFilters() {
-    this.afs.logger.debug("Setting up filters");
-    const filterSelector = this.afs.options.get("filterButtonSelector");
-    if (!filterSelector) return;
-
-    // Initialize filter buttons
-    document.querySelectorAll(filterSelector).forEach(button => {
-      const filterValue = button.dataset.filter;
-      if (!filterValue) {
-        this.afs.logger.warn("Filter button missing data-filter attribute:", button);
-        return;
-      }
-      this.filterButtons.set(button, filterValue);
-      this.bindFilterEvent(button);
-    });
-    this.afs.logger.debug("Filters initialized");
-  }
-
-  /**
-   * Set filter logic mode
-   * @public
-   * @param {string|boolean} logic - 'AND'/'OR' or true/false (true = AND, false = OR)
-   */
-  setLogic(logic) {
-    if (typeof logic === "boolean") {
-      // Handle boolean input (true = AND, false = OR)
-      this.afs.options.set("filterMode", logic ? "AND" : "OR");
-    } else {
-      const mode = logic.toUpperCase();
-      if (["OR", "AND"].includes(mode)) {
-        this.afs.options.set("filterMode", mode);
-      } else {
-        this.afs.logger.warn(`Invalid filter mode: ${logic}`);
-        return;
-      }
-    }
-    this.afs.logger.debug(`Filter logic set to: ${this.afs.options.get("filterMode")}`);
-    this.applyFilters();
-  }
-
-  /**
-   * Clear all filters
-   * @public
-   */
-  clearAllFilters() {
-    this.afs.logger.debug("Clearing all filters");
-
-    // Reset filters
-    this.activeFilters.clear();
-    this.activeFilters.add("*");
-
-    // Reset filter buttons
-    this.filterButtons.forEach((_, button) => {
-      button.classList.remove(this.afs.options.get("activeClass"));
-    });
-
-    // Reset filter groups
-    this.filterGroups.clear();
-
-    // Find and activate "all" button if exists
-    const allButton = this.findAllButton();
-    if (allButton) {
-      allButton.classList.add(this.afs.options.get("activeClass"));
-    }
-
-    // Clear sorting
-    this.sortOrders.clear();
-
-    // Apply changes and update UI
-    this.applyFilters();
-    this.afs.urlManager.updateURL();
-    this.afs.emit("filtersCleared");
-  }
-
-  /**
-   * Bind filter event to button
-   * @private
-   * @param {HTMLElement} button - Filter button
-   */
-  bindFilterEvent(button) {
-    this.afs.logger.debug("Binding filter event to button:", button);
-    button.addEventListener("click", () => {
-      const filterValue = this.filterButtons.get(button);
-      if (!filterValue) return;
-      if (filterValue === "*") {
-        this.resetFilters();
-      } else {
-        this.toggleFilter(filterValue, button);
-      }
-
-      // Update the URL after filter change
-      this.afs.urlManager.updateURL();
-    });
-  }
-
-  /**
-   * Reset filters to default state
-   * @public
-   */
-  resetFilters() {
-    this.afs.logger.debug("Resetting filters");
-
-    // Clear existing filters
-    this.activeFilters.clear();
-
-    // Reset button states
-    this.filterButtons.forEach((_, button) => {
-      button.classList.remove(this.afs.options.get("activeClass"));
-    });
-
-    // Add "*" filter and activate "all" button
-    this.activeFilters.add("*");
-    const allButton = this.findAllButton();
-    if (allButton) {
-      allButton.classList.add(this.afs.options.get("activeClass"));
-    }
-
-    // Clear filter groups
-    this.filterGroups.clear();
-
-    // Force all items to be visible first
-    const visibleItems = new Set(this.afs.items);
-    this.afs.state.setState("items.visible", visibleItems);
-
-    // Show all items with animation
-    this.afs.items.forEach(item => {
-      item.classList.remove(this.afs.options.get('hiddenClass'));
-      requestAnimationFrame(() => {
-        this.animation.applyShowAnimation(item, this.afs.options.get("animationType"));
-      });
-    });
-
-    // Update counter after reset
-    this.afs.updateCounter();
-
-    // Update URL after reset
-    this.afs.urlManager.updateURL();
-
-    // Emit event
-    this.afs.emit("filtersReset");
-  }
-
-  /**
-   * Find "all" filter button
-   * @private
-   * @returns {HTMLElement|null} All button
-   */
-  findAllButton() {
-    for (const [button, value] of this.filterButtons.entries()) {
-      if (value === "*") return button;
-    }
-    return null;
-  }
-  handleFilterClick(button) {
-    const filterValue = button.dataset.filter;
-    this.afs.logger.debug("Filter clicked:", filterValue);
-    if (filterValue === "*") {
-      this.resetFilters();
-    } else {
-      this.toggleFilter(filterValue, button);
-    }
-    this.filter();
-
-    // Call updateURL to reflect the new filter state in the URL
-    this.updateURL();
-  }
-
-  /**
-   * Toggle filter state
-   * @private
-   * @param {string} filterValue - Filter value
-   * @param {HTMLElement} button - Filter button
-   */
-  toggleFilter(filterValue, button) {
-    // Remove "all" filter
-    this.activeFilters.delete("*");
-    const allButton = this.findAllButton();
-    if (allButton) {
-      allButton.classList.remove(this.afs.options.get("activeClass"));
-    }
-
-    // Toggle filter
-    if (button.classList.contains(this.afs.options.get("activeClass"))) {
-      button.classList.remove(this.afs.options.get("activeClass"));
-      this.activeFilters.delete(filterValue);
-
-      // Reset to "all" if no filters active
-      if (this.activeFilters.size === 0) {
-        this.resetFilters();
-        return;
-      }
-    } else {
-      button.classList.add(this.afs.options.get("activeClass"));
-      this.activeFilters.add(filterValue);
-    }
-    this.applyFilters();
-
-    // Emit event
-    this.afs.emit("filterToggled", {
-      filter: filterValue,
-      activeFilters: Array.from(this.activeFilters)
-    });
-    this.afs.logger.debug("Filter toggled:", filterValue);
-  }
-
-  /**
-  * Apply current filters
-  * @public
-  */
-  applyFilters() {
-    // Log active filters
-    const activeFilters = Array.from(this.activeFilters);
-    this.afs.logger.debug("Active filters:", activeFilters);
-    this.afs.logger.debug("Applying filters");
-    const previouslyVisible = new Set(this.afs.state.getState().items.visible);
-    const visibleItems = new Set();
-
-    // First pass: determine which items should be visible
-    this.afs.items.forEach(item => {
-      if (this.activeFilters.has("*") || this.itemMatchesFilters(item)) {
-        visibleItems.add(item);
-      }
-    });
-
-    // Update state with determined visible items
-    this.afs.state.setState("items.visible", visibleItems);
-
-    // Second pass: apply animations based on visibility changes
-    this.afs.items.forEach(item => {
-      if (visibleItems.has(item)) {
-        // Remove hidden class first
-        item.classList.remove(this.afs.options.get('hiddenClass'));
-        // Then apply show animation in next frame
-        requestAnimationFrame(() => {
-          this.animation.applyShowAnimation(item, this.afs.options.get("animationType"));
-        });
-      } else {
-        // Apply hide animation
-        requestAnimationFrame(() => {
-          this.animation.applyHideAnimation(item, this.afs.options.get("animationType"));
-        });
-      }
-    });
-
-    // Emit events and update UI
-    this.emitFilterEvents(previouslyVisible, visibleItems);
-
-    // Schedule UI updates
-    requestAnimationFrame(() => {
-      // Force reflow to ensure animations play
-      this.afs.container.offsetHeight;
-
-      // Update counter - this needs to happen after filter changes
-      this.afs.updateCounter();
-
-      // Update URL
-      this.afs.urlManager.updateURL();
-
-      // Emit final event
-      this.afs.emit("filtersApplied", {
-        activeFilters,
-        visibleItems: visibleItems.size
-      });
-    });
-  }
-
-  /**
-   * Check if item matches current filters
-   * @private
-   * @param {HTMLElement} item - DOM element
-   * @returns {boolean} Whether item matches filters
-   */
-  itemMatchesFilters(item) {
-    // Show all items if "*" is active
-    if (this.activeFilters.has("*")) {
-      return true;
-    }
-
-    // Regular filter matching
-    const itemCategories = new Set(item.dataset.categories?.split(" ") || []);
-
-    // If using filter groups
-    if (this.filterGroups.size > 0) {
-      return this.itemMatchesFilterGroups(itemCategories);
-    }
-
-    // Regular filtering
-    return this.afs.options.get("filterMode") === "OR" ? this.itemMatchesAnyFilter(itemCategories) : this.itemMatchesAllFilters(itemCategories);
-  }
-
-  /**
-   * Check if item matches any active filter (OR mode)
-   * @private
-   * @param {Set} itemCategories - Item's categories
-   * @returns {boolean} Whether item matches any filter
-   */
-  itemMatchesAnyFilter(itemCategories) {
-    return Array.from(this.activeFilters).some(filter => {
-      if (filter === "*") return true;
-      return itemCategories.has(filter);
-    });
-  }
-
-  /**
-   * Check if item matches all active filters (AND mode)
-   * @private
-   * @param {Set} itemCategories - Item's categories
-   * @returns {boolean} Whether item matches all filters
-   */
-  itemMatchesAllFilters(itemCategories) {
-    return Array.from(this.activeFilters).every(filter => {
-      if (filter === "*") return true;
-      return itemCategories.has(filter);
-    });
-  }
-
-  /**
-   * Check if item matches filter groups
-   * @private
-   * @param {Set} itemCategories - Item's categories
-   * @returns {boolean} Whether item matches groups
-   */
-  itemMatchesFilterGroups(itemCategories) {
-    const groupMatches = Array.from(this.filterGroups.values()).map(group => {
-      if (group.filters.size === 0) return true;
-      return group.operator === "OR" ? Array.from(group.filters).some(filter => itemCategories.has(filter)) : Array.from(group.filters).every(filter => itemCategories.has(filter));
-    });
-    return this.afs.options.get("groupMode") === "OR" ? groupMatches.some(matches => matches) : groupMatches.every(matches => matches);
-  }
-
-  /**
-   * Emit filter-related events
-   * @private
-   * @param {Set} previouslyVisible - Previously visible items
-   * @param {Set} nowVisible - Currently visible items
-   */
-  emitFilterEvents(previouslyVisible, nowVisible) {
-    // Determine added and removed items
-    const added = new Set([...nowVisible].filter(item => !previouslyVisible.has(item)));
-    const removed = new Set([...previouslyVisible].filter(item => !nowVisible.has(item)));
-
-    // Emit filter event
-    this.afs.emit("filter", {
-      activeFilters: Array.from(this.activeFilters),
-      visibleItems: nowVisible.size,
-      added: added.size,
-      removed: removed.size
-    });
-
-    // Emit specific events for added/removed items
-    if (added.size > 0) {
-      this.afs.emit("itemsShown", {
-        items: added
-      });
-    }
-    if (removed.size > 0) {
-      this.afs.emit("itemsHidden", {
-        items: removed
-      });
-    }
-  }
-
-  /**
-   * Add or update a filter group
-   * @public
-   * @param {string} groupId - Group identifier
-   * @param {string[]} filters - Array of filter values
-   * @param {string} [operator='OR'] - Operator within group
-   */
-  addFilterGroup(groupId, filters) {
-    let operator = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "OR";
-    this.afs.logger.debug(`Adding filter group: ${groupId}`);
-    if (!Array.isArray(filters)) {
-      this.afs.logger.error("Filters must be an array");
-      return;
-    }
-    const validOperator = operator.toUpperCase();
-    if (!["AND", "OR"].includes(validOperator)) {
-      this.afs.logger.warn(`Invalid operator: ${operator}, defaulting to OR`);
-      operator = "OR";
-    }
-    this.filterGroups.set(groupId, {
-      filters: new Set(filters),
-      operator: validOperator
-    });
-    this.applyFilters();
-  }
-
-  /**
-   * Remove a filter group
-   * @public
-   * @param {string} groupId - Group identifier
-   */
-  removeFilterGroup(groupId) {
-    if (this.filterGroups.delete(groupId)) {
-      this.afs.logger.debug(`Removed filter group: ${groupId}`);
-      if (this.filterGroups.size === 0) {
-        this.resetFilters();
-      } else {
-        this.applyFilters();
-      }
-    }
-  }
-
-  /**
-   * Set filter group mode
-   * @public
-   * @param {string} mode - Mode for combining groups
-   */
-  setGroupMode(mode) {
-    const validMode = mode.toUpperCase();
-    if (["AND", "OR"].includes(validMode)) {
-      this.afs.options.set("groupMode", validMode);
-      this.afs.logger.debug(`Set group mode to: ${validMode}`);
-      this.applyFilters();
-    } else {
-      this.afs.logger.warn(`Invalid group mode: ${mode}`);
-    }
-  }
-
-  /**
-   * Add filter manually
-   * @public
-   * @param {string} filter - Filter value
-   */
-  addFilter(filter) {
-    this.afs.logger.debug(`Adding filter: ${filter}`);
-    if (filter === "*") {
-      this.resetFilters();
-      return;
-    }
-    this.activeFilters.delete("*");
-    this.activeFilters.add(filter);
-
-    // Update button states
-    this.filterButtons.forEach((value, button) => {
-      if (value === filter) {
-        button.classList.add(this.afs.options.get("activeClass"));
-      } else if (value === "*") {
-        button.classList.remove(this.afs.options.get("activeClass"));
-      }
-    });
-    this.applyFilters();
-  }
-
-  /**
-   * Remove filter manually
-   * @public
-   * @param {string} filter - Filter value
-   */
-  removeFilter(filter) {
-    this.afs.logger.debug(`Removing filter: ${filter}`);
-    this.activeFilters.delete(filter);
-
-    // Update button states
-    this.filterButtons.forEach((value, button) => {
-      if (value === filter) {
-        button.classList.remove(this.afs.options.get("activeClass"));
-      }
-    });
-
-    // Reset to all if no filters active
-    if (this.activeFilters.size === 0) {
-      this.resetFilters();
-    } else {
-      this.applyFilters();
-    }
-  }
-
-  /**
-   * Set filter mode
-   * @public
-   * @param {string} mode - Filter mode ('AND' or 'OR')
-   */
-  setFilterMode(mode) {
-    this.afs.logger.debug(`Setting filter mode to: ${mode}`);
-    const validMode = mode.toUpperCase();
-    if (["AND", "OR"].includes(validMode)) {
-      this.afs.options.set("filterMode", validMode);
-      this.afs.logger.debug(`Set filter mode to: ${validMode}`);
-      this.applyFilters();
-    } else {
-      this.afs.logger.warn(`Invalid filter mode: ${mode}`);
-    }
-  }
-
-  /**
-   * Get active filters
-   * @public
-   * @returns {Set} Active filters
-   */
-  getActiveFilters() {
-    return new Set(this.activeFilters);
-  }
-
-  /**
-   * Get filter groups
-   * @public
-   * @returns {Map} Filter groups
-   */
-  getFilterGroups() {
-    return new Map(this.filterGroups);
-  }
-
-  /**
-   * Add filter button dynamically
-   * @public
-   * @param {HTMLElement} button - Button element
-   * @param {string} filter - Filter value
-   */
-  addFilterButton(button, filter) {
-    if (!filter) {
-      this.afs.logger.warn("Filter value required for new filter button");
-      return;
-    }
-    this.filterButtons.set(button, filter);
-    this.bindFilterEvent(button);
-    this.afs.logger.debug(`Added filter button for: ${filter}`);
-  }
-
-  /**
-   * Remove filter button
-   * @public
-   * @param {HTMLElement} button - Button to remove
-   */
-  removeFilter(filter) {
-    this.afs.logger.debug(`Removing filter: ${filter}`);
-    this.activeFilters.delete(filter);
-
-    // Update button states
-    this.filterButtons.forEach((value, button) => {
-      if (value === filter) {
-        button.classList.remove(this.afs.options.get("activeClass"));
-      }
-    });
-
-    // Reset to all if no filters active
-    if (this.activeFilters.size === 0) {
-      this.resetFilters();
-    } else {
-      this.applyFilters();
-    }
-  }
-
-  /**
-   * Sort items with automatic order detection
-   * @public
-   * @param {string} key - The data attribute key to sort by
-   */
-  sortWithOrder(key) {
-    this.afs.logger.debug(`Sorting by ${key}`);
-    try {
-      const items = Array.from(this.afs.items);
-
-      // Toggle sort order for the key
-      const currentOrder = this.sortOrders.get(key) || "asc";
-      const newOrder = currentOrder === "asc" ? "desc" : "asc";
-      this.sortOrders.set(key, newOrder);
-
-      // Determine sort type from first item
-      const sortType = this.determineSortType(items[0], key);
-
-      // Sort items
-      items.sort((a, b) => {
-        const valueA = this.getSortValue(a, key, sortType);
-        const valueB = this.getSortValue(b, key, sortType);
-        return this.compareValues(valueA, valueB, newOrder);
-      });
-
-      // Reorder DOM elements
-      this.reorderItems(items);
-
-      // Emit event
-      this.afs.emit("sort", {
-        key,
-        order: newOrder
-      });
-      this.afs.logger.info(`Sorted items by ${key} in ${newOrder} order`);
-      return newOrder; // Return the new order for UI updates
-    } catch (error) {
-      this.afs.logger.error("Sort error:", error);
-      return null;
-    }
-  }
-
-  /**
-   * Shuffle items randomly
-   * @public
-   */
-  shuffle() {
-    this.afs.logger.debug("Shuffling items");
-    try {
-      const items = Array.from(this.afs.items);
-
-      // Fisher-Yates shuffle algorithm
-      for (let i = items.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        [items[i], items[j]] = [items[j], items[i]];
-      }
-
-      // Use the existing reorderItems method to update the DOM
-      this.reorderItems(items);
-
-      // Clear any existing sort orders as we've shuffled
-      this.sortOrders.clear();
-      this.afs.emit("shuffled", {
-        itemCount: items.length
-      });
-      this.afs.logger.debug("Items shuffled successfully");
-    } catch (error) {
-      this.afs.logger.error("Shuffle error:", error);
-    }
-  }
-
-  /**
-   * Determine sort type from item value
-   * @private
-   * @param {HTMLElement} item - DOM element
-   * @param {string} key - Sort key
-   * @returns {string} Sort type ('number', 'date', or 'string')
-   */
-  determineSortType(item, key) {
-    this.afs.logger.debug(`Determining sort type for ${key}`);
-    const value = item.dataset[key];
-    if (!value) return "string";
-    if (!isNaN(value)) return "number";
-    if (/^\d{4}-\d{2}-\d{2}/.test(value)) return "date";
-    return "string";
-  }
-
-  /**
-   * Get sort value from item
-   * @private
-   * @param {HTMLElement} item - DOM element
-   * @param {string} key - Sort key
-   * @param {string} type - Sort type
-   * @returns {any} Parsed value for sorting
-   */
-  getSortValue(item, key, type) {
-    const value = item.dataset[key];
-    switch (type) {
-      case "number":
-        return parseFloat(value) || 0;
-      case "date":
-        return new Date(value).getTime() || 0;
-      default:
-        return (value || "").toLowerCase();
-    }
-  }
-
-  /**
-   * Compare two values for sorting
-   * @private
-   * @param {any} a - First value
-   * @param {any} b - Second value
-   * @param {string} order - Sort order ('asc' or 'desc')
-   * @returns {number} Comparison result
-   */
-  compareValues(a, b, order) {
-    // Handle null/undefined values
-    if (a === null || a === undefined) return order === "asc" ? 1 : -1;
-    if (b === null || b === undefined) return order === "asc" ? -1 : 1;
-
-    // Compare values
-    const comparison = a < b ? -1 : a > b ? 1 : 0;
-    return order === "asc" ? comparison : -comparison;
-  }
-
-  /**
-   * Reorder DOM elements
-   * @private
-   * @param {HTMLElement[]} items - Sorted items
-   */
-  reorderItems(items) {
-    const fragment = document.createDocumentFragment();
-    items.forEach(item => fragment.appendChild(item));
-    this.afs.container.appendChild(fragment);
-  }
-
-  /**
-   * Get current sort order for key
-   * @public
-   * @param {string} key - Sort key
-   * @returns {string} Current sort order ('asc' or 'desc')
-   */
-  getCurrentSortOrder(key) {
-    return this.sortOrders.get(key) || "asc";
-  }
-
-  /**
-   * Clear all sort orders
-   * @public
-   */
-  clearSortOrders() {
-    this.afs.logger.debug("Clearing all sort orders");
-    this.sortOrders.clear();
-    this.afs.emit("sortCleared");
-  }
-
-  /**
-   * Clear all filters, url and search
-   * @public
-   */
-  clearAllFilters() {
-    this.afs.logger.debug("Clearing all filters and search");
-
-    // Reset filters
-    this.activeFilters.clear();
-    this.activeFilters.add("*");
-
-    // Update filter buttons
-    this.filterButtons.forEach((_, button) => {
-      button.classList.remove(this.afs.options.get("activeClass"));
-    });
-
-    // Find and activate "all" button if exists
-    const allButton = this.findAllButton();
-    if (allButton) {
-      allButton.classList.add(this.afs.options.get("activeClass"));
-    }
-
-    // Clear checkboxes
-    const checkboxes = document.querySelectorAll('input[type="checkbox"]');
-    checkboxes.forEach(checkbox => {
-      if (checkbox.classList.contains(this.afs.options.get("activeClass"))) {
-        checkbox.checked = false;
-        checkbox.classList.remove(this.afs.options.get("activeClass"));
-      }
-    });
-
-    // Clear search
-    if (this.afs.search) {
-      this.afs.search.setValue("");
-    }
-
-    // Clear filter groups and sort orders
-    this.filterGroups.clear();
-    this.sortOrders.clear();
-
-    // Apply changes and ensure counter is updated
-    this.applyFilters();
-
-    // Update URL if URLManager exists
-    if (this.afs.urlManager) {
-      this.afs.urlManager.updateURL();
-    }
-
-    // Emit event
-    this.afs.emit("filtersCleared");
-    this.afs.logger.info("All filters cleared");
-  }
-
-  /**
-   * Refresh the view
-   * @public
-   */
-  refresh() {
-    this.afs.logger.debug("Refreshing view");
-    this.applyFilters();
-    this.afs.updateCounter();
-  }
-  removeFilterButton(button) {
-    this.filterButtons.delete(button);
-    button.removeEventListener("click", this.handleFilterClick);
-  }
-
-  /**
-   * Destroy instance
-   * @public
-   */
-  destroy() {
-    this.filterButtons.forEach((_, button) => {
-      this.removeFilterButton(button);
-    });
-    this.filterButtons.clear();
-    this.activeFilters.clear();
-    this.filterGroups.clear();
-    this.afs.logger.debug("Filter functionality destroyed");
-  }
-}
-
-/**
- * @fileoverview Utility functions for AFS
- */
-
-/**
- * Debounce function
- * @param {Function} func - Function to debounce
- * @param {number} wait - Delay in milliseconds
- * @param {boolean} [immediate=false] - Execute immediately
- * @returns {Function} Debounced function
- */
-function debounce(func, wait) {
-  let immediate = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  let timeout;
-  return function executedFunction() {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    const context = this;
-    const later = () => {
-      timeout = null;
-      if (!immediate) func.apply(context, args);
-    };
-    const callNow = immediate && !timeout;
-    clearTimeout(timeout);
-    timeout = setTimeout(later, wait);
-    if (callNow) func.apply(context, args);
-  };
-}
-
-/**
- * @fileoverview Search functionality for AFS
- */
-
-class Search {
-  /**
-   * @param {import('../AFS').AFS} afs - Main AFS instance
-   */
-  constructor(afs) {
-    this.afs = afs;
-    this.searchInput = null;
-    this.searchKeys = ['title']; // Default search keys
-    this.minSearchLength = 2;
-    this.highlightClass = 'afs-highlight';
-    this.setupSearch();
-  }
-
-  /**
-   * Setup search functionality
-   * @private
-   */
-  setupSearch() {
-    const searchSelector = this.afs.options.get('searchInputSelector');
-    if (!searchSelector) return;
-    this.searchInput = document.querySelector(searchSelector);
-    if (!this.searchInput) {
-      this.afs.logger.warn(`Search input not found: ${searchSelector}`);
-      return;
-    }
-
-    // Configure search
-    this.searchKeys = this.afs.options.get('searchKeys') || this.searchKeys;
-    this.minSearchLength = this.afs.options.get('minSearchLength') || this.minSearchLength;
-
-    // Bind events
-    this.bindSearchEvents();
-    this.afs.logger.debug('Search functionality initialized');
-  }
-
-  /**
-   * Bind search events
-   * @private
-   */
-  bindSearchEvents() {
-    if (!this.searchInput) return;
-
-    // Create debounced search function
-    const debouncedSearch = debounce(e => {
-      this.search(e.target.value);
-    }, this.afs.options.get('debounceTime') || 300);
-
-    // Bind input event
-    this.searchInput.addEventListener('input', debouncedSearch);
-
-    // Bind clear event
-    this.searchInput.addEventListener('search', e => {
-      if (!e.target.value) {
-        this.clearSearch();
-      }
-    });
-
-    // Handle Enter key
-    this.searchInput.addEventListener('keypress', e => {
-      if (e.key === 'Enter') {
-        e.preventDefault();
-        this.search(e.target.value);
-      }
-    });
-  }
-
-  /**
-   * Perform search
-   * @public
-   * @param {string} query - Search query
-   */
-  search(query) {
-    this.afs.logger.debug('Performing search:', query);
-    const normalizedQuery = this.normalizeQuery(query);
-
-    // Update state
-    this.afs.state.setState('search.query', normalizedQuery);
-    let matches = 0;
-
-    // Special case for empty query
-    if (!normalizedQuery) {
-      this.clearSearch();
-      return;
-    }
-
-    // Skip if query is too short
-    if (normalizedQuery.length < this.minSearchLength) {
-      this.afs.logger.debug('Search query too short');
-      return;
-    }
-    try {
-      // Create search regex
-      const regex = this.createSearchRegex(normalizedQuery);
-
-      // Search through items
-      this.afs.items.forEach(item => {
-        const searchText = this.getItemSearchText(item);
-        const matchesSearch = regex.test(searchText);
-        if (matchesSearch) {
-          this.afs.showItem(item);
-          this.highlightMatches(item, regex);
-          matches++;
-        } else {
-          this.afs.hideItem(item);
-          this.removeHighlights(item);
-        }
-      });
-
-      // Update URL and emit event
-      this.afs.urlManager.updateURL();
-      this.afs.emit('search', {
-        query: normalizedQuery,
-        matches,
-        total: this.afs.items.length
-      });
-      this.afs.logger.info(`Search complete. Found ${matches} matches`);
-    } catch (error) {
-      this.afs.logger.error('Search error:', error);
-    }
-
-    // Update counter after animation
-    setTimeout(() => {
-      this.afs.updateCounter();
-    }, this.afs.options.get('animationDuration'));
-  }
-
-  /**
-   * Normalize search query
-   * @private
-   * @param {string} query - Raw search query
-   * @returns {string} Normalized query
-   */
-  normalizeQuery(query) {
-    return query.toLowerCase().trim().replace(/\s+/g, ' ');
-  }
-
-  /**
-   * Create search regex
-   * @private
-   * @param {string} query - Normalized search query
-   * @returns {RegExp} Search regex
-   */
-  createSearchRegex(query) {
-    // Escape special regex characters
-    const escapedQuery = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-
-    // Split into words for whole word matching
-    const words = escapedQuery.split(' ').filter(Boolean);
-
-    // Create regex pattern
-    const pattern = words.map(word => `(?=.*\\b${word})`).join('');
-    return new RegExp(pattern, 'i');
-  }
-
-  /**
-   * Get searchable text from item
-   * @private
-   * @param {HTMLElement} item - DOM element
-   * @returns {string} Searchable text
-   */
-  getItemSearchText(item) {
-    return this.searchKeys.map(key => item.dataset[key] || '').join(' ').toLowerCase();
-  }
-
-  /**
-   * Highlight search matches
-   * @private
-   * @param {HTMLElement} item - DOM element
-   * @param {RegExp} regex - Search regex
-   */
-  highlightMatches(item, regex) {
-    if (!this.afs.options.get('highlightMatches')) return;
-    this.searchKeys.forEach(key => {
-      const target = item.querySelector(`[data-search-key="${key}"]`);
-      if (!target) return;
-      const text = target.textContent;
-      const words = this.afs.state.getState().search.query.split(' ');
-      let highlightedText = text;
-      words.forEach(word => {
-        if (!word) return;
-        const wordRegex = new RegExp(`(${word})`, 'gi');
-        highlightedText = highlightedText.replace(wordRegex, `<span class="${this.highlightClass}">$1</span>`);
-      });
-      target.innerHTML = highlightedText;
-    });
-  }
-
-  /**
-   * Remove highlights
-   * @private
-   * @param {HTMLElement} item - DOM element
-   */
-  removeHighlights(item) {
-    if (!this.afs.options.get('highlightMatches')) return;
-    this.searchKeys.forEach(key => {
-      const target = item.querySelector(`[data-search-key="${key}"]`);
-      if (!target) return;
-      const highlights = target.querySelectorAll(`.${this.highlightClass}`);
-      highlights.forEach(highlight => {
-        const text = highlight.textContent;
-        highlight.replaceWith(text);
-      });
-    });
-  }
-
-  /**
-   * Clear search
-   * @public
-   */
-  clearSearch() {
-    this.afs.logger.debug('Clearing search');
-
-    // Clear input
-    if (this.searchInput) {
-      this.searchInput.value = '';
-    }
-
-    // Clear state
-    this.afs.state.setState('search.query', '');
-
-    // Show all items
-    this.afs.items.forEach(item => {
-      this.afs.showItem(item);
-      this.removeHighlights(item);
-    });
-
-    // Update URL and emit event
-    this.afs.urlManager.updateURL();
-    this.afs.emit('searchCleared');
-
-    // Update counter
-    setTimeout(() => {
-      this.afs.updateCounter();
-    }, this.afs.options.get('animationDuration'));
-  }
-
-  /**
-   * Set search value
-   * @public
-   * @param {string} value - Search value
-   */
-  setValue(value) {
-    if (this.searchInput) {
-      this.searchInput.value = value;
-    }
-    this.search(value);
-  }
-
-  /**
-   * Get current search value
-   * @public
-   * @returns {string} Current search value
-   */
-  getValue() {
-    return this.afs.state.getState().search.query;
-  }
-
-  /**
-   * Update search configuration
-   * @public
-   * @param {Object} config - Search configuration
-   */
-  updateConfig() {
-    let {
-      searchKeys,
-      minSearchLength,
-      highlightClass,
-      debounceTime
-    } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    if (searchKeys) this.searchKeys = searchKeys;
-    if (minSearchLength) this.minSearchLength = minSearchLength;
-    if (highlightClass) this.highlightClass = highlightClass;
-    if (debounceTime) {
-      this.bindSearchEvents(); // Rebind with new debounce time
-    }
-  }
-
-  /**
-   * Destroy search functionality
-   * @public
-   */
-  destroy() {
-    if (this.searchInput) {
-      this.searchInput.removeEventListener('input', this.debouncedSearch);
-      this.searchInput.removeEventListener('search', this.handleClear);
-      this.searchInput.removeEventListener('keypress', this.handleEnter);
-    }
-    this.clearSearch();
-  }
-}
-
-/**
- * @fileoverview Sort functionality for AFS
- */
-
-class Sort {
-  /**
-   * @param {import('../AFS').AFS} afs - Main AFS instance
-   */
-  constructor(afs) {
-    this.afs = afs;
-    this.sortButtons = new Map();
-    this.setupSort();
-  }
-
-  /**
-   * Setup sort functionality
-   * @private
-   */
-  setupSort() {
-    const sortSelector = this.afs.options.get("sortButtonSelector");
-    if (!sortSelector) return;
-
-    // Find and setup sort buttons
-    document.querySelectorAll(sortSelector).forEach(button => {
-      const key = button.dataset.sortKey;
-      if (!key) {
-        this.afs.logger.warn("Sort button missing data-sort-key attribute:", button);
-        return;
-      }
-      this.sortButtons.set(button, {
-        key,
-        direction: button.dataset.sortDirection || "asc"
-      });
-      this.bindSortEvent(button);
-    });
-    this.afs.logger.debug("Sort functionality initialized");
-  }
-
-  /**
-   * Bind sort event to button
-   * @private
-   * @param {HTMLElement} button - Sort button
-   */
-  bindSortEvent(button) {
-    this.afs.logger.debug("Binding sort event to button:", button);
-    button.addEventListener("click", () => {
-      const sortData = this.sortButtons.get(button);
-      if (!sortData) return;
-
-      // Toggle direction
-      sortData.direction = sortData.direction === "asc" ? "desc" : "asc";
-      this.sortButtons.set(button, sortData);
-
-      // Update button state
-      this.updateSortButtonState(button, sortData);
-
-      // Perform sort
-      this.sort(sortData.key, sortData.direction);
-    });
-  }
-
-  /**
-   * Update sort button visual state
-   * @private
-   * @param {HTMLElement} button - Sort button
-   * @param {Object} sortData - Sort data
-   */
-  updateSortButtonState(button, sortData) {
-    // Remove active class from all buttons
-    this.sortButtons.forEach((_, btn) => {
-      btn.classList.remove(this.afs.options.get("activeSortClass"));
-    });
-
-    // Add active class to current button
-    button.classList.add(this.afs.options.get("activeSortClass"));
-
-    // Update direction indicator
-    const indicator = button.querySelector(".sort-direction");
-    if (indicator) {
-      indicator.textContent = sortData.direction === "asc" ? "↑" : "↓";
-    }
-  }
-
-  /**
-   * Sort items
-   * @public
-   * @param {string} key - Sort key
-   * @param {string} direction - Sort direction ('asc' or 'desc')
-   */
-  sort(key) {
-    let direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "asc";
-    this.afs.logger.debug(`Sorting by ${key} in ${direction} order`);
-    try {
-      // Update state
-      this.afs.state.setState("sort.current", {
-        key,
-        direction
-      });
-
-      // Get all items as array
-      const items = Array.from(this.afs.items);
-
-      // Determine sort type
-      const sortType = this.determineSortType(items[0], key);
-
-      // Sort items
-      items.sort((a, b) => {
-        const valueA = this.getSortValue(a, key, sortType);
-        const valueB = this.getSortValue(b, key, sortType);
-        return this.compareValues(valueA, valueB, direction);
-      });
-
-      // Reorder DOM elements
-      this.reorderItems(items);
-
-      // Update URL and emit event
-      this.afs.urlManager.updateURL();
-      this.afs.emit("sort", {
-        key,
-        direction
-      });
-      this.afs.logger.info(`Sorted items by ${key} ${direction}`);
-    } catch (error) {
-      this.afs.logger.error("Sort error:", error);
-    }
-  }
-
-  /**
-   * Determine sort type from first item
-   * @private
-   * @param {HTMLElement} item - First item
-   * @param {string} key - Sort key
-   * @returns {string} Sort type
-   */
-  determineSortType(item, key) {
-    const value = item.dataset[key];
-    if (!value) return "string";
-    if (!isNaN(value)) return "number";
-    if (/^\d{4}-\d{2}-\d{2}/.test(value)) return "date";
-    return "string";
-  }
-
-  /**
-   * Get sort value from item
-   * @private
-   * @param {HTMLElement} item - DOM element
-   * @param {string} key - Sort key
-   * @param {string} type - Sort type
-   * @returns {any} Sort value
-   */
-  getSortValue(item, key, type) {
-    const value = item.dataset[key];
-    switch (type) {
-      case "number":
-        return parseFloat(value);
-      case "date":
-        return new Date(value).getTime();
-      default:
-        return value.toLowerCase();
-    }
-  }
-
-  /**
-   * Compare two values
-   * @private
-   * @param {any} a - First value
-   * @param {any} b - Second value
-   * @param {string} direction - Sort direction
-   * @returns {number} Comparison result
-   */
-  compareValues(a, b, direction) {
-    const modifier = direction === "asc" ? 1 : -1;
-    if (a === b) return 0;
-    if (a === undefined || a === null) return 1;
-    if (b === undefined || b === null) return -1;
-    return a > b ? modifier : -modifier;
-  }
-
-  /**
-   * Reorder DOM elements
-   * @private
-   * @param {HTMLElement[]} items - Sorted items
-   */
-  reorderItems(items) {
-    const container = this.afs.options.get("container");
-    const fragment = document.createDocumentFragment();
-    items.forEach(item => fragment.appendChild(item));
-    container.appendChild(fragment);
-  }
-  /**
-   * Sort with multiple criteria
-   * @public
-   * @param {Array<{key: string, direction: string}>} criteria - Sort criteria
-   */
-  sortMultiple(criteria) {
-    this.afs.logger.debug("Sorting by multiple criteria:", criteria);
-    try {
-      const items = Array.from(this.afs.items);
-      items.sort((a, b) => {
-        for (const {
-          key,
-          direction
-        } of criteria) {
-          const type = this.determineSortType(items[0], key);
-          const valueA = this.getSortValue(a, key, type);
-          const valueB = this.getSortValue(b, key, type);
-          const comparison = this.compareValues(valueA, valueB, direction);
-          if (comparison !== 0) return comparison;
-        }
-        return 0;
-      });
-      this.reorderItems(items);
-
-      // Update state with primary sort
-      if (criteria.length > 0) {
-        this.afs.state.setState("sort.current", criteria[0]);
-      }
-      this.afs.urlManager.updateURL();
-      this.afs.emit("multiSort", {
-        criteria
-      });
-    } catch (error) {
-      this.afs.logger.error("Multiple sort error:", error);
-    }
-  }
-
-  /**
-   * Sort with custom comparator
-   * @public
-   * @param {string} key - Sort key
-   * @param {Function} comparator - Custom comparison function
-   */
-  sortWithComparator(key, comparator) {
-    this.afs.logger.debug(`Sorting by ${key} with custom comparator`);
-    try {
-      const items = Array.from(this.afs.items);
-      items.sort((a, b) => {
-        const valueA = a.dataset[key];
-        const valueB = b.dataset[key];
-        return comparator(valueA, valueB);
-      });
-      this.reorderItems(items);
-      this.afs.emit("customSort", {
-        key,
-        comparator
-      });
-    } catch (error) {
-      this.afs.logger.error("Custom sort error:", error);
-    }
-  }
-
-  /**
-   * Shuffle items randomly
-   * @public
-   */
-  shuffle() {
-    this.afs.logger.debug("Shuffling items");
-    try {
-      const items = Array.from(this.afs.items);
-
-      // Fisher-Yates shuffle algorithm
-      for (let i = items.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        [items[i], items[j]] = [items[j], items[i]];
-      }
-      this.reorderItems(items);
-
-      // Clear current sort state
-      this.afs.state.setState("sort.current", null);
-
-      // Update UI
-      this.sortButtons.forEach((_, button) => {
-        button.classList.remove(this.afs.options.get("activeSortClass"));
-        const indicator = button.querySelector(".sort-direction");
-        if (indicator) indicator.textContent = "";
-      });
-      this.afs.urlManager.updateURL();
-      this.afs.emit("shuffle");
-    } catch (error) {
-      this.afs.logger.error("Shuffle error:", error);
-    }
-  }
-
-  /**
-   * Reset sort to default state
-   * @public
-   */
-  reset() {
-    this.afs.logger.debug("Resetting sort");
-
-    // Clear sort state
-    this.afs.state.setState("sort.current", null);
-
-    // Reset UI
-    this.sortButtons.forEach((_, button) => {
-      button.classList.remove(this.afs.options.get("activeSortClass"));
-      const indicator = button.querySelector(".sort-direction");
-      if (indicator) indicator.textContent = "";
-    });
-
-    // Reset sort data
-    this.sortButtons.forEach((data, button) => {
-      data.direction = "asc";
-      this.sortButtons.set(button, data);
-    });
-    this.afs.urlManager.updateURL();
-    this.afs.emit("sortReset");
-  }
-
-  /**
-   * Get current sort state
-   * @public
-   * @returns {Object|null} Current sort state
-   */
-  getCurrentSort() {
-    return this.afs.state.getState().sort.current;
-  }
-
-  /**
-   * Add sort button dynamically
-   * @public
-   * @param {HTMLElement} button - Sort button element
-   * @param {string} key - Sort key
-   * @param {string} [direction='asc'] - Initial sort direction
-   */
-  addSortButton(button, key) {
-    let direction = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : "asc";
-    if (!key) {
-      this.afs.logger.warn("Sort key required for new sort button");
-      return;
-    }
-    this.sortButtons.set(button, {
-      key,
-      direction
-    });
-    this.bindSortEvent(button);
-    this.afs.logger.debug(`Added sort button for ${key}`);
-  }
-
-  /**
-   * Remove sort button
-   * @public
-   * @param {HTMLElement} button - Sort button to remove
-   */
-  removeSortButton(button) {
-    if (this.sortButtons.has(button)) {
-      button.removeEventListener("click", this.bindSortEvent);
-      this.sortButtons.delete(button);
-      this.afs.logger.debug("Removed sort button");
-    }
-  }
-
-  /**
-   * Destroy sort functionality
-   * @public
-   */
-  destroy() {
-    this.sortButtons.forEach((_, button) => {
-      this.removeSortButton(button);
-    });
-    this.sortButtons.clear();
-    this.afs.logger.debug("Sort functionality destroyed");
-  }
-}
-
-/**
- * @fileoverview Pagination functionality for AFS
- */
-class Pagination {
-  /**
-   * @param {import('../AFS').AFS} afs - Main AFS instance
-   */
-  constructor(afs) {
-    this.afs = afs;
-    this.container = null;
-    this.animation = new Animation(afs);
-    this.options = this.afs.options.get("pagination");
-    this.setupPagination();
-  }
-
-  /**
-   * Setup pagination
-   * @private
-   */
-  setupPagination() {
-    this.afs.logger.debug("Setting up pagination");
-    if (!this.afs.options.get('pagination.enabled')) return;
-    console.log('Pagination enabled');
-    this.container = document.createElement("div");
-    this.container.className = this.options.containerClass;
-    const itemsContainer = document.querySelector(this.afs.options.get("pagination.container"));
-    if (!itemsContainer) {
-      this.afs.logger.error("Items container not found.");
-      return;
-    }
-    itemsContainer.appendChild(this.container);
-
-    // Initialize pagination state with defaults
-    this.afs.state.setState("pagination", {
-      currentPage: 1,
-      itemsPerPage: this.options.itemsPerPage,
-      totalPages: 0
-    });
-    this.bindEvents();
-    this.update();
-    this.afs.logger.debug("Pagination initialized");
-  }
-
-  /**
-   * Bind pagination events
-   * @private
-   */
-  bindEvents() {
-    this.afs.on("filter", () => this.update());
-    this.afs.on("search", () => this.update());
-    this.afs.on("sort", () => this.update());
-    this.container.addEventListener("click", e => {
-      const button = e.target.closest("button");
-      if (!button) return;
-      const page = button.dataset.page;
-      if (page) {
-        this.goToPage(parseInt(page, 10));
-      }
-    });
-  }
-
-  /**
-   * Update pagination
-   * @public
-   */
-  update() {
-    const visibleItems = Array.from(this.afs.state.getState().items.visible);
-    const itemsPerPage = this.afs.state.getState().pagination.itemsPerPage;
-    const totalPages = Math.max(1, Math.ceil(visibleItems.length / itemsPerPage));
-
-    // Update state
-    const currentState = this.afs.state.getState().pagination;
-    let currentPage = currentState.currentPage;
-
-    // Adjust current page if it's beyond the total pages
-    if (currentPage > totalPages) {
-      currentPage = totalPages;
-    }
-
-    // Update pagination state
-    this.afs.state.setState("pagination", {
-      ...currentState,
-      currentPage,
-      totalPages
-    });
-
-    // Update visibility before rendering pagination controls
-    this.updateVisibility(visibleItems);
-    this.renderPagination();
-    this.afs.urlManager.updateURL();
-    this.afs.emit("pagination", {
-      currentPage,
-      totalPages,
-      itemsPerPage,
-      visibleItems: visibleItems.length
-    });
-  }
-
-  /**
-   * Update items visibility based on current page
-   * @private
-   */
-  updateVisibility(visibleItems) {
-    const {
-      currentPage,
-      itemsPerPage
-    } = this.afs.state.getState().pagination;
-    const startIndex = (currentPage - 1) * itemsPerPage;
-    const endIndex = startIndex + itemsPerPage;
-
-    // First hide all items
-    this.afs.items.forEach(item => {
-      item.style.display = "none";
-      item.classList.add(this.afs.options.get("hiddenClass"));
-    });
-
-    // Then show only the items for the current page
-    const itemsToShow = visibleItems.slice(startIndex, endIndex);
-
-    // Ensure we're not trying to display non-existent items
-    if (itemsToShow.length === 0 && visibleItems.length > 0) {
-      // If we have no items to show but we do have visible items,
-      // we're probably on an invalid page - go to page 1
-      this.goToPage(1);
-      return;
-    }
-
-    // Show items with animation
-    requestAnimationFrame(() => {
-      itemsToShow.forEach(item => {
-        // Remove hidden class and restore display
-        item.style.display = "";
-        item.classList.remove(this.afs.options.get("hiddenClass"));
-
-        // Apply show animation in the next frame
-        requestAnimationFrame(() => {
-          this.animation.applyShowAnimation(item, this.options.animationType || "fade");
-        });
-      });
-    });
-  }
-
-  /**
-   * Render pagination controls
-   * @private
-   */
-  renderPagination() {
-    const {
-      currentPage,
-      totalPages
-    } = this.afs.state.getState().pagination;
-    this.container.innerHTML = "";
-    if (totalPages <= 1) {
-      this.container.style.display = "none";
-      return;
-    }
-    this.container.style.display = "flex";
-    const controls = this.createPaginationControls(currentPage, totalPages);
-    this.container.appendChild(controls);
-  }
-
-  /**
-   * Create pagination controls
-   * @private
-   * @param {number} currentPage - Current page
-   * @param {number} totalPages - Total pages
-   * @returns {DocumentFragment} Pagination controls
-   */
-  createPaginationControls(currentPage, totalPages) {
-    const fragment = document.createDocumentFragment();
-    if (this.options.showPrevNext) {
-      const prevButton = this.createPageButton("‹", currentPage - 1, {
-        disabled: currentPage === 1,
-        class: "afs-pagination-prev"
-      });
-      fragment.appendChild(prevButton);
-    }
-    fragment.appendChild(this.createPageButton("1", 1, {
-      active: currentPage === 1
-    }));
-    const range = this.calculatePageRange(currentPage, totalPages);
-    if (range.start > 2) fragment.appendChild(this.createEllipsis());
-    for (let i = range.start; i <= range.end; i++) {
-      if (i === 1 || i === totalPages) continue;
-      fragment.appendChild(this.createPageButton(i.toString(), i, {
-        active: currentPage === i
-      }));
-    }
-    if (range.end < totalPages - 1) fragment.appendChild(this.createEllipsis());
-    if (totalPages > 1) fragment.appendChild(this.createPageButton(totalPages.toString(), totalPages, {
-      active: currentPage === totalPages
-    }));
-    if (this.options.showPrevNext) {
-      const nextButton = this.createPageButton("›", currentPage + 1, {
-        disabled: currentPage === totalPages,
-        class: "afs-pagination-next"
-      });
-      fragment.appendChild(nextButton);
-    }
-    return fragment;
-  }
-
-  /**
-   * Create page button
-   * @private
-   */
-  createPageButton(text, page) {
-    let {
-      active = false,
-      disabled = false,
-      class: className = ""
-    } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-    const button = document.createElement("button");
-    button.textContent = text;
-    button.dataset.page = page;
-    button.classList.add(this.options.pageButtonClass || "afs-page-button");
-    if (className) button.classList.add(className);
-    if (active) button.classList.add(this.options.activePageClass || "afs-page-active");
-    if (disabled) button.disabled = true;
-    return button;
-  }
-  createEllipsis() {
-    const span = document.createElement("span");
-    span.textContent = "...";
-    span.classList.add("afs-pagination-ellipsis");
-    return span;
-  }
-  calculatePageRange(currentPage, totalPages) {
-    const maxButtons = this.options.maxButtons || 7;
-    const sideButtons = Math.floor((maxButtons - 3) / 2);
-    let start = Math.max(2, currentPage - sideButtons);
-    let end = Math.min(totalPages - 1, start + maxButtons - 3);
-    if (end - start < maxButtons - 3) start = Math.max(2, end - (maxButtons - 3));
-    return {
-      start,
-      end
-    };
-  }
-
-  /**
-   * Go to specific page
-   * @public
-   */
-  goToPage(page) {
-    const state = this.afs.state.getState().pagination;
-    const targetPage = Math.max(1, Math.min(page, state.totalPages));
-    if (targetPage === state.currentPage) return;
-
-    // Update state
-    this.afs.state.setState("pagination.currentPage", targetPage);
-
-    // Force a reflow before updating
-    this.afs.container.offsetHeight;
-
-    // Update visibility and controls
-    this.update();
-
-    // Scroll to top if enabled
-    if (this.options.scrollToTop) {
-      setTimeout(() => this.scrollToTop(), 100);
-    }
-
-    // Emit page change event
-    this.afs.emit("pageChanged", {
-      previousPage: state.currentPage,
-      currentPage: targetPage,
-      totalPages: state.totalPages
-    });
-  }
-  scrollToTop() {
-    const container = document.querySelector(this.afs.options.get("pagination.container"));
-    if (!container) {
-      this.afs.logger.warn("Scroll container not found.");
-      return;
-    }
-    window.scrollTo({
-      top: container.offsetTop - this.options.scrollOffset,
-      behavior: "smooth"
-    });
-  }
-
-  /**
-   * Set pagination mode
-   * @public
-   */
-  setPaginationMode(enabled) {
-    this.afs.logger.debug(`Setting pagination mode to: ${enabled}`);
-
-    // Update options
-    this.afs.options.set('pagination.enabled', enabled);
-    if (enabled) {
-      // Enable pagination
-      this.setupPagination();
-    } else {
-      // Disable pagination and show all items
-      this.container.remove();
-      this.showAllItems();
-    }
-
-    // Emit event
-    this.afs.emit('paginationModeChanged', {
-      enabled
-    });
-  }
-
-  /**
-   * Show all items (for infinite scroll mode)
-   * @private
-   */
-  showAllItems() {
-    const visibleItems = Array.from(this.afs.state.getState().items.visible);
-    requestAnimationFrame(() => {
-      visibleItems.forEach(item => {
-        item.style.display = '';
-        item.classList.remove(this.afs.options.get('hiddenClass'));
-        requestAnimationFrame(() => {
-          this.animation.applyShowAnimation(item, this.options.animationType || 'fade');
-        });
-      });
-    });
-  }
-}
-
-/**
- * @fileoverview URL state management for AFS
- */
-
-class URLManager {
-  /**
-   * @param {import('../AFS').AFS} afs - Main AFS instance
-   */
-  constructor(afs) {
-    this.afs = afs;
-    this.defaultParams = new URLSearchParams();
-    this.setupPopStateHandler();
-
-    // Load URL state after a small delay to ensure all features are ready
-    setTimeout(() => {
-      this.loadFromURL();
-    }, 0);
-  }
-
-  /**
-   * Setup history popstate handler
-   * @private
-   */
-  setupPopStateHandler() {
-    window.addEventListener('popstate', () => {
-      this.loadFromURL();
-    });
-  }
-
-  /**
-   * Update URL with current filter state
-   * @public
-   */
-  /**
-  * Update URL with current filter state
-  * @public
-  */
-  updateURL() {
-    this.afs.logger.debug("Updating URL state");
-    const params = new URLSearchParams();
-    const state = this.afs.state.getState(); // Get current state of filters
-
-    // Get active filters directly from the Filter instance
-    const activeFilters = this.afs.filter.getActiveFilters();
-
-    // Update the state object with the active filters
-    state.filters.current = activeFilters;
-
-    // Add filters to URL
-    this.addFiltersToURL(params, state);
-
-    // Add ranges (if applicable) to URL
-    this.addRangesToURL(params, state);
-
-    // Add search query to URL
-    this.addSearchToURL(params, state);
-
-    // Add sort state to URL
-    this.addSortToURL(params, state);
-
-    // Add pagination to URL
-    this.addPaginationToURL(params, state);
-
-    // Push the updated URL
-    this.pushState(params); // Push the new URL state to the browser
-  }
-
-  /**
-   * Add filters to URL parameters
-   * @private
-   * @param {URLSearchParams} params
-   * @param {Object} state
-   */
-  addFiltersToURL(params, state) {
-    const filters = state.filters;
-
-    // Skip if only default filter is active
-    if (filters.current.size === 0 || filters.current.size === 1 && filters.current.has('*')) {
-      return;
-    }
-
-    // Group filters by type
-    const filtersByType = {};
-    for (const filter of filters.current) {
-      if (filter !== '*') {
-        const [type, value] = filter.split(':');
-        if (!filtersByType[type]) {
-          filtersByType[type] = new Set();
-        }
-        filtersByType[type].add(value);
-      }
-    }
-
-    // Add filters to params
-    Object.entries(filtersByType).forEach(_ref => {
-      let [type, values] = _ref;
-      params.set(type, Array.from(values).join(','));
-    });
-
-    // Add filter mode if not default
-    if (filters.mode !== 'OR') {
-      params.set('filterMode', filters.mode.toLowerCase());
-    }
-
-    // Add group mode if groups exist and mode isn't default
-    if (filters.groups.size > 0 && filters.groupMode !== 'OR') {
-      params.set('groupMode', filters.groupMode.toLowerCase());
-    }
-
-    // Add filter groups if they exist
-    filters.groups.forEach((group, groupId) => {
-      params.set(`group_${groupId}`, Array.from(group.filters).join(','));
-      if (group.operator !== 'OR') {
-        params.set(`groupOp_${groupId}`, group.operator.toLowerCase());
-      }
-    });
-  }
-
-  /**
-   * Add range filters to URL parameters
-   * @private
-   * @param {URLSearchParams} params
-   * @param {Object} state
-   */
-  addRangesToURL(params, state) {
-    // Handle numeric ranges
-    state.filters.ranges.forEach((range, key) => {
-      const {
-        currentMin,
-        currentMax
-      } = range;
-      if (currentMin !== range.min || currentMax !== range.max) {
-        params.set(`range_${key}`, `${currentMin},${currentMax}`);
-      }
-    });
-
-    // Handle date ranges
-    state.filters.dateRanges.forEach((range, key) => {
-      const {
-        start,
-        end
-      } = range;
-      params.set(`dateRange_${key}`, `${start.toISOString()},${end.toISOString()}`);
-    });
-  }
-
-  /**
-   * Add search parameters to URL
-   * @private
-   * @param {URLSearchParams} params
-   * @param {Object} state
-   */
-  addSearchToURL(params, state) {
-    if (state.search.query) {
-      params.set('search', state.search.query);
-    }
-  }
-
-  /**
-   * Add sort parameters to URL
-   * @private
-   * @param {URLSearchParams} params
-   * @param {Object} state
-   */
-  addSortToURL(params, state) {
-    if (state.sort.current) {
-      const {
-        key,
-        direction
-      } = state.sort.current;
-      params.set('sort', `${key},${direction}`);
-    }
-  }
-
-  /**
-   * Add pagination parameters to URL
-   * @private
-   * @param {URLSearchParams} params
-   * @param {Object} state
-   */
-  addPaginationToURL(params, state) {
-    const {
-      currentPage,
-      itemsPerPage
-    } = state.pagination;
-    if (!this.afs.options.get('pagination.enabled')) {
-      return;
-    }
-    if (currentPage > 1) {
-      params.set('page', currentPage.toString());
-    }
-    if (itemsPerPage !== this.afs.options.get('pagination.itemsPerPage')) {
-      params.set('perPage', itemsPerPage.toString());
-    }
-  }
-
-  /**
-   * Update browser URL
-   * @private
-   * @param {URLSearchParams} params
-   */
-  pushState(params) {
-    const queryString = params.toString();
-    const newURL = `${window.location.pathname}${queryString ? '?' + queryString : ''}`;
-
-    // Only update if URL actually changed
-    if (newURL !== window.location.href) {
-      window.history.pushState({}, '', newURL);
-      this.afs.logger.debug('URL updated:', newURL);
-    }
-  }
-
-  /**
-  * Load filter state from URL
-  * @public
-  */
-  loadFromURL() {
-    this.afs.logger.debug('Loading state from URL');
-    const params = new URLSearchParams(window.location.search);
-    try {
-      // Clear existing state first
-      if (this.afs.filter) {
-        this.afs.filter.clearAllFilters();
-      }
-
-      // Process filter mode first
-      const filterMode = params.get('filterMode');
-      if (filterMode && this.afs.filter) {
-        this.afs.filter.setFilterMode(filterMode.toUpperCase());
-      }
-
-      // Process regular filters
-      const filterParams = Array.from(params.entries()).filter(_ref2 => {
-        let [key] = _ref2;
-        return this.isRegularFilter(key);
-      });
-      if (filterParams.length > 0 && this.afs.filter) {
-        // Remove default '*' filter
-        this.afs.filter.activeFilters.clear();
-
-        // Add filters and update button states
-        filterParams.forEach(_ref3 => {
-          let [type, values] = _ref3;
-          values.split(',').forEach(value => {
-            const filter = `${type}:${value}`;
-            this.afs.filter.activeFilters.add(filter);
-
-            // Update button UI
-            this.afs.filter.filterButtons.forEach((buttonFilter, button) => {
-              if (buttonFilter === filter) {
-                button.classList.add(this.afs.options.get('activeClass'));
-              } else if (buttonFilter === '*') {
-                button.classList.remove(this.afs.options.get('activeClass'));
-              }
-            });
-          });
-        });
-      }
-
-      // Apply filters before processing other parameters
-      if (this.afs.filter) {
-        this.afs.filter.applyFilters();
-      }
-
-      // Process search
-      const searchQuery = params.get('search');
-      if (searchQuery && this.afs.search) {
-        this.afs.search.setValue(searchQuery);
-      }
-
-      // Process sort
-      const sortParam = params.get('sort');
-      if (sortParam && this.afs.sort) {
-        const [key, direction] = sortParam.split(',');
-        this.afs.sort.sort(key, direction);
-      }
-
-      // Process pagination
-      const page = parseInt(params.get('page'));
-      if (!isNaN(page) && this.afs.pagination) {
-        this.afs.pagination.goToPage(page);
-      }
-      this.afs.emit('urlStateLoaded', {
-        params: Object.fromEntries(params)
-      });
-      this.afs.logger.info('State loaded from URL');
-    } catch (error) {
-      this.afs.logger.error('Error loading state from URL:', error);
-      // Reset to default state on error
-      if (this.afs.filter) {
-        this.afs.filter.clearAllFilters();
-      }
-    }
-  }
-
-  /**
-   * Process filters from URL parameters
-   * @private
-   * @param {URLSearchParams} params
-   */
-  processFiltersFromURL(params) {
-    const state = this.afs.state.getState();
-    let hasFilters = false;
-
-    // Process filter mode
-    const filterMode = params.get('filterMode');
-    if (filterMode) {
-      state.filters.mode = filterMode.toUpperCase();
-    }
-
-    // Process group mode
-    const groupMode = params.get('groupMode');
-    if (groupMode) {
-      state.filters.groupMode = groupMode.toUpperCase();
-    }
-
-    // Process regular filters
-    for (const [type, values] of params.entries()) {
-      if (this.isRegularFilter(type)) {
-        values.split(',').filter(Boolean).forEach(value => {
-          hasFilters = true;
-          state.filters.current.add(`${type}:${value}`);
-        });
-      }
-    }
-
-    // Process filter groups
-    for (const [key, value] of params.entries()) {
-      if (key.startsWith('group_')) {
-        const groupId = key.replace('group_', '');
-        const operator = params.get(`groupOp_${groupId}`)?.toUpperCase() || 'OR';
-        state.filters.groups.set(groupId, {
-          filters: new Set(value.split(',')),
-          operator
-        });
-      }
-    }
-
-    // Set default if no filters
-    if (!hasFilters && state.filters.groups.size === 0) {
-      state.filters.current.add('*');
-    }
-  }
-
-  /**
-   * Process range filters from URL parameters
-   * @private
-   * @param {URLSearchParams} params
-   */
-  processRangesFromURL(params) {
-    const state = this.afs.state.getState();
-
-    // Process numeric ranges
-    for (const [key, value] of params.entries()) {
-      if (key.startsWith('range_')) {
-        const rangeKey = key.replace('range_', '');
-        const [min, max] = value.split(',').map(Number);
-        state.filters.ranges.set(rangeKey, {
-          currentMin: min,
-          currentMax: max
-        });
-      }
-    }
-
-    // Process date ranges
-    for (const [key, value] of params.entries()) {
-      if (key.startsWith('dateRange_')) {
-        const rangeKey = key.replace('dateRange_', '');
-        const [start, end] = value.split(',').map(str => new Date(str));
-        state.filters.dateRanges.set(rangeKey, {
-          start,
-          end
-        });
-      }
-    }
-  }
-
-  /**
-   * Process search from URL parameters
-   * @private
-   * @param {URLSearchParams} params
-   */
-  processSearchFromURL(params) {
-    const searchQuery = params.get('search') || '';
-    this.afs.state.setState('search.query', searchQuery);
-    if (this.afs.options.get('searchInput')) {
-      this.afs.options.get('searchInput').value = searchQuery;
-    }
-  }
-
-  /**
-   * Process sort from URL parameters
-   * @private
-   * @param {URLSearchParams} params
-   */
-  processSortFromURL(params) {
-    const sortParam = params.get('sort');
-    if (sortParam) {
-      const [key, direction] = sortParam.split(',');
-      this.afs.state.setState('sort.current', {
-        key,
-        direction
-      });
-    }
-  }
-
-  /**
-   * Process pagination from URL parameters
-   * @private
-   * @param {URLSearchParams} params
-   */
-  processPaginationFromURL(params) {
-    const page = parseInt(params.get('page')) || 1;
-    const perPage = parseInt(params.get('perPage')) || this.afs.options.get('pagination.itemsPerPage');
-    this.afs.state.setState('pagination', {
-      currentPage: page,
-      itemsPerPage: perPage
-    });
-  }
-
-  /**
-   * Check if parameter is a regular filter
-   * @private
-   * @param {string} param - Parameter name
-   * @returns {boolean}
-   */
-  isRegularFilter(param) {
-    const excludedParams = ['search', 'sort', 'page', 'perPage', 'filterMode', 'groupMode'];
-    return !excludedParams.includes(param) && !param.startsWith('group_') && !param.startsWith('groupOp_') && !param.startsWith('range_') && !param.startsWith('dateRange_');
-  }
-
-  /**
-   * Clear URL parameters
-   * @public
-   */
-  clearURL() {
-    window.history.pushState({}, '', window.location.pathname);
-    this.afs.state.reset();
-    if (this.afs.filter) {
-      this.afs.filter.clearAllFilters();
-    }
-  }
-
-  /**
-   * Get current URL parameters
-   * @public
-   * @returns {URLSearchParams}
-   */
-  getURLParams() {
-    return new URLSearchParams(window.location.search);
-  }
-
-  /**
-   * Check if URL has parameters
-   * @public
-   * @returns {boolean}
-   */
-  hasParams() {
-    return window.location.search.length > 1;
-  }
-
-  /**
-   * Get parameter value
-   * @public
-   * @param {string} param - Parameter name
-   * @returns {string|null}
-   */
-  getParam(param) {
-    return new URLSearchParams(window.location.search).get(param);
-  }
-}
-
-/**
- * @fileoverview Range filter implementation for AFS
- */
-
-class RangeFilter {
-  constructor(afs) {
-    this.afs = afs;
-    this.activeRanges = new Map();
-    this.options = this.afs.options.get("slider");
-    if (!this.afs.styleManager) {
-      this.afs.styleManager = new StyleManager(this.afs.options);
-    }
-
-    // Apply styles immediately
-    this.afs.styleManager.applyStyles();
-  }
-
-  /**
-   * @typedef {Object} RangeOptions
-   * @property {string} key - Data attribute key
-   * @property {string} type - Type of range ('number' or 'date')
-   * @property {HTMLElement} container - Container element
-   * @property {number|string} [min] - Minimum value
-   * @property {number|string} [max] - Maximum value
-   * @property {number} [step] - Step value
-   */
-
-  /**
-   * Add range slider
-   * @param {RangeOptions} options - Range slider options
-   */
-  addRangeSlider(_ref) {
-    let {
-      key,
-      type,
-      container,
-      min,
-      max,
-      step = 1,
-      ui
-    } = _ref;
-    this.afs.logger.debug(`Adding range slider for ${key}`);
-    if (!container) {
-      this.afs.logger.error("Container element required for range slider");
-      return;
-    }
-
-    // Calculate min/max if not provided
-    const values = this.calculateMinMax(key, type);
-    min = min ?? values.min;
-    max = max ?? values.max;
-
-    // Get global UI options and merge with slider-specific options
-    const globalUiOptions = this.afs.options.get("styles.slider.ui") || {
-      showHistogram: false,
-      bins: 10
-    };
-    const sliderUiOptions = {
-      ...globalUiOptions,
-      ...ui // Override with slider-specific options if provided
-    };
-
-    // Only calculate histogram data if enabled
-    const histogramData = sliderUiOptions.showHistogram ? this.calculateHistogramData(key, sliderUiOptions.bins) : {
-      counts: [],
-      binEdges: [],
-      max: 0
-    };
-
-    // Create slider elements
-    const elements = this.createSliderElements(histogramData, sliderUiOptions);
-    const state = this.initializeState(min, max, step, type);
-
-    // Store histogram data and UI options in state
-    state.ui = sliderUiOptions;
-    if (sliderUiOptions.showHistogram) {
-      state.histogram = histogramData;
-    }
-
-    // Add elements to container
-    this.appendElements(container, elements);
-
-    // Setup event handlers
-    this.setupEventHandlers(elements, state, key);
-
-    // Store state
-    this.activeRanges.set(key, {
-      state,
-      elements
-    });
-
-    // Initial update
-    this.updateSliderUI(key);
-
-    // Setup histogram highlight updates only if enabled
-    if (sliderUiOptions.showHistogram) {
-      this.setupHistogramHighlight(elements, state, histogramData.binEdges);
-    }
-    this.afs.logger.info(`Range slider added for ${key}`);
-  }
-  /**
-   * Calculate min and max values from items
-   * @private
-   */
-  calculateMinMax(key, type) {
-    const values = Array.from(this.afs.items).map(item => {
-      const value = item.dataset[key];
-      return type === "date" ? new Date(value).getTime() : parseFloat(value);
-    }).filter(value => !isNaN(value));
-    return {
-      min: Math.min(...values),
-      max: Math.max(...values)
-    };
-  }
-
-  /**
-   * Create slider DOM elements
-   * @private
-   * @param {Object} histogramData - Histogram data
-   * @param {Object} sliderUiOptions - UI options for this slider
-   */
-  createSliderElements(histogramData, sliderUiOptions) {
-    const styles = this.afs.options.get("styles") || this.afs.styleManager.defaultStyles;
-    const colors = styles.colors || this.afs.styleManager.defaultStyles.colors;
-    const sliderOptions = this.afs.options.get("slider") || {};
-    const container = document.createElement("div");
-    container.className = "afs-range-container";
-    const slider = document.createElement("div");
-    slider.className = sliderOptions.containerClass;
-    const track = document.createElement("div");
-    track.className = sliderOptions.trackClass;
-
-    // Only add histogram if enabled in the slider-specific options
-    if (sliderUiOptions?.showHistogram && histogramData?.counts?.length > 0) {
-      const histogram = this.createHistogramBars(histogramData, colors);
-      slider.appendChild(histogram);
-    }
-    const selectedRange = document.createElement("div");
-    selectedRange.className = sliderOptions.selectedClass;
-    const minThumb = document.createElement("div");
-    minThumb.className = sliderOptions.thumbClass;
-    const maxThumb = document.createElement("div");
-    maxThumb.className = sliderOptions.thumbClass;
-    const minValue = document.createElement("div");
-    minValue.className = sliderOptions.valueClass;
-    const maxValue = document.createElement("div");
-    maxValue.className = sliderOptions.valueClass;
-
-    // Build the slider
-    slider.appendChild(track);
-    slider.appendChild(selectedRange);
-    slider.appendChild(minThumb);
-    slider.appendChild(maxThumb);
-    slider.appendChild(minValue);
-    slider.appendChild(maxValue);
-    container.appendChild(slider);
-    return {
-      container,
-      slider,
-      track,
-      selectedRange,
-      minThumb,
-      maxThumb,
-      minValue,
-      maxValue
-    };
-  }
-
-  // Add helper method for creating histogram
-  createHistogram(data, colors) {
-    const histogram = document.createElement("div");
-    histogram.className = "afs-histogram";
-
-    // Create histogram bars
-    data.forEach((value, index) => {
-      const bar = document.createElement("div");
-      bar.className = "afs-histogram-bar";
-      bar.style.height = `${value}%`;
-      bar.style.backgroundColor = colors.histogram;
-      histogram.appendChild(bar);
-    });
-    return histogram;
-  }
-
-  /**
-   * Calculate histogram data from items
-   * @private
-   * @param {string} key - Data attribute key (e.g., 'price')
-   * @param {number} [bins=10] - Number of bins for histogram
-   * @returns {Object} Histogram data and metadata
-   */
-  calculateHistogramData(key) {
-    let bins = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10;
-    try {
-      const values = Array.from(this.afs.items).map(item => parseFloat(item.dataset[key])).filter(value => !isNaN(value));
-      if (values.length === 0) {
-        return {
-          counts: [],
-          binEdges: [],
-          max: 0
-        };
-      }
-      const min = Math.min(...values);
-      const max = Math.max(...values);
-      const binWidth = (max - min) / bins;
-      const counts = new Array(bins).fill(0);
-      const binEdges = new Array(bins + 1);
-
-      // Calculate bin edges
-      for (let i = 0; i <= bins; i++) {
-        binEdges[i] = min + i * binWidth;
-      }
-
-      // Count values in each bin
-      values.forEach(value => {
-        if (value === max) {
-          counts[counts.length - 1]++;
-          return;
-        }
-        const binIndex = Math.floor((value - min) / binWidth);
-        counts[binIndex]++;
-      });
-
-      // Normalize heights to be more subtle
-      const maxCount = Math.max(...counts);
-      const normalizedCounts = counts.map(count => Math.max(20, Math.round(count / maxCount * 100)) // Minimum height of 20%
-      );
-      return {
-        counts: normalizedCounts,
-        binEdges,
-        max: maxCount,
-        min,
-        max
-      };
-    } catch (error) {
-      this.afs.logger.error("Error calculating histogram:", error);
-      return {
-        counts: [],
-        binEdges: [],
-        max: 0
-      };
-    }
-  }
-
-  /**
-   * Setup histogram highlight on range changes
-   * @private
-   */
-  setupHistogramHighlight(elements, state, binEdges) {
-    const bars = elements.slider.querySelectorAll(".afs-histogram-bar");
-    const updateHistogram = () => {
-      const minVal = state.currentMin;
-      const maxVal = state.currentMax;
-      bars.forEach((bar, index) => {
-        const binStart = binEdges[index];
-        const binEnd = binEdges[index + 1];
-
-        // Highlight bars within the selected range
-        if (binStart >= minVal && binEnd <= maxVal) {
-          bar.classList.add("active");
-        } else {
-          bar.classList.remove("active");
-        }
-      });
-    };
-
-    // Update histogram on range changes using AFS instance
-    this.afs.on("rangeFilter", () => updateHistogram());
-
-    // Initial update
-    updateHistogram();
-  }
-
-  /**
-   * Create histogram bars
-   * @private
-   */
-  createHistogramBars(histogramData, colors) {
-    const {
-      counts
-    } = histogramData;
-    const histogram = document.createElement("div");
-    histogram.className = "afs-histogram";
-    counts.forEach(height => {
-      const bar = document.createElement("div");
-      bar.className = "afs-histogram-bar";
-      bar.style.height = `${height}%`;
-      histogram.appendChild(bar);
-    });
-    return histogram;
-  }
-
-  /**
-   * Initialize slider state
-   * @private
-   */
-  initializeState(min, max, step, type) {
-    return {
-      min,
-      max,
-      currentMin: min,
-      currentMax: max,
-      step,
-      type,
-      isDragging: false
-    };
-  }
-
-  /**
-   * Append elements to container
-   * @private
-   */
-  appendElements(container, elements) {
-    const {
-      slider,
-      track,
-      selectedRange,
-      minThumb,
-      maxThumb,
-      minValue,
-      maxValue
-    } = elements;
-    slider.appendChild(track);
-    slider.appendChild(selectedRange);
-    slider.appendChild(minThumb);
-    slider.appendChild(maxThumb);
-    slider.appendChild(minValue);
-    slider.appendChild(maxValue);
-    container.appendChild(slider);
-  }
-
-  /**
-   * Setup event handlers for slider
-   * @private
-   */
-  setupEventHandlers(elements, state, key) {
-    const {
-      minThumb,
-      maxThumb
-    } = elements;
-    const handleStart = isMin => e => {
-      e.preventDefault(); // Prevent scrolling while dragging on mobile
-      state.isDragging = true;
-
-      // Get the correct event coordinates whether mouse or touch
-      const getEventXY = event => {
-        return event.touches ? event.touches[0] : event;
-      };
-      const moveHandler = moveEvent => {
-        const evt = getEventXY(moveEvent);
-        this.createMoveHandler(elements, state, key, isMin)(evt);
-      };
-      const stopHandler = () => {
-        state.isDragging = false;
-
-        // Remove both mouse and touch event listeners
-        window.removeEventListener('mousemove', moveHandler);
-        window.removeEventListener('mouseup', stopHandler);
-        window.removeEventListener('touchmove', moveHandler);
-        window.removeEventListener('touchend', stopHandler);
-        window.removeEventListener('touchcancel', stopHandler);
-        this.applyFilter(key);
-      };
-
-      // Add both mouse and touch event listeners
-      window.addEventListener('mousemove', moveHandler);
-      window.addEventListener('mouseup', stopHandler);
-      window.addEventListener('touchmove', moveHandler, {
-        passive: false
-      });
-      window.addEventListener('touchend', stopHandler);
-      window.addEventListener('touchcancel', stopHandler);
-    };
-
-    // Add both mouse and touch event listeners to thumbs
-    minThumb.addEventListener('mousedown', handleStart(true));
-    minThumb.addEventListener('touchstart', handleStart(true), {
-      passive: false
-    });
-    maxThumb.addEventListener('mousedown', handleStart(false));
-    maxThumb.addEventListener('touchstart', handleStart(false), {
-      passive: false
-    });
-  }
-
-  /**
-   * Update slider UI
-   * @private
-   */
-  updateSliderUI(key) {
-    const {
-      state,
-      elements
-    } = this.activeRanges.get(key);
-    const {
-      minThumb,
-      maxThumb,
-      selectedRange,
-      minValue,
-      maxValue
-    } = elements;
-
-    // Calculate positions with padding consideration
-    const range = state.max - state.min;
-    const minPos = (state.currentMin - state.min) / range * 100;
-    const maxPos = (state.currentMax - state.min) / range * 100;
-
-    // Ensure thumbs stay within bounds
-    const clampedMinPos = Math.max(0, Math.min(minPos, 100));
-    const clampedMaxPos = Math.max(0, Math.min(maxPos, 100));
-
-    // Position thumbs
-    minThumb.style.left = `${clampedMinPos}%`;
-    maxThumb.style.left = `${clampedMaxPos}%`;
-
-    // Position selected range
-    selectedRange.style.left = `${clampedMinPos}%`;
-    selectedRange.style.width = `${clampedMaxPos - clampedMinPos}%`;
-
-    // Format values
-    const formatValue = state.type === "date" ? value => new Date(value).toLocaleDateString() : value => value.toFixed(2);
-
-    // Update value labels
-    minValue.textContent = formatValue(state.currentMin);
-    maxValue.textContent = formatValue(state.currentMax);
-
-    // Position value labels considering bounds
-    minValue.style.left = `${clampedMinPos}%`;
-    maxValue.style.left = `${clampedMaxPos}%`;
-
-    // Handle edge cases for value label positioning
-    if (clampedMinPos < 5) {
-      minValue.style.transform = "translateX(0)";
-    } else if (clampedMinPos > 95) {
-      minValue.style.transform = "translateX(-100%)";
-    } else {
-      minValue.style.transform = "translateX(-50%)";
-    }
-    if (clampedMaxPos < 5) {
-      maxValue.style.transform = "translateX(0)";
-    } else if (clampedMaxPos > 95) {
-      maxValue.style.transform = "translateX(-100%)";
-    } else {
-      maxValue.style.transform = "translateX(-50%)";
-    }
-  }
-
-  // Also update the createMoveHandler to respect the padding
-  createMoveHandler(elements, state, key, isMin) {
-    this.afs.logger.debug(`Creating move handler for ${key}`);
-    const {
-      track
-    } = elements;
-    const PADDING = 5;
-    return debounce(e => {
-      const clientX = e.touches ? e.touches[0].clientX : e.clientX;
-      const rect = track.getBoundingClientRect();
-      const totalWidth = rect.width;
-      const paddingPixels = PADDING / 100 * totalWidth;
-
-      // Calculate percent with padding consideration
-      const rawPercent = (clientX - rect.left - paddingPixels) / (totalWidth - 2 * paddingPixels);
-      const percent = Math.min(Math.max(0, rawPercent), 1);
-
-      // Calculate value considering the full range
-      const value = state.min + (state.max - state.min) * percent;
-      const stepped = Math.round(value / state.step) * state.step;
-      if (isMin) {
-        state.currentMin = Math.min(stepped, state.currentMax);
-      } else {
-        state.currentMax = Math.max(stepped, state.currentMin);
-      }
-      this.updateSliderUI(key);
-    }, 16); // ~60fps
-  }
-
-  /**
-   * Apply range filter
-   * @private
-   */
-  applyFilter(key) {
-    this.afs.logger.debug(`Applying range filter for ${key}`);
-    const {
-      state
-    } = this.activeRanges.get(key);
-    this.afs.items.forEach(item => {
-      const value = state.type === "date" ? new Date(item.dataset[key]).getTime() : parseFloat(item.dataset[key]);
-      if (value >= state.currentMin && value <= state.currentMax) {
-        this.afs.showItem(item);
-      } else {
-        this.afs.hideItem(item);
-      }
-    });
-    this.afs.updateCounter();
-    this.afs.urlManager.updateURL();
-    this.afs.emit("rangeFilter", {
-      key,
-      min: state.currentMin,
-      max: state.currentMax
-    });
-  }
-
-  /**
-   * Get current range values
-   * @param {string} key - Range key
-   * @returns {Object} Current range values
-   */
-  getRangeValues(key) {
-    const range = this.activeRanges.get(key);
-    if (!range) return null;
-    return {
-      min: range.state.currentMin,
-      max: range.state.currentMax,
-      type: range.state.type
-    };
-  }
-
-  /**
-   * Set range values
-   * @param {string} key - Range key
-   * @param {number} min - Minimum value
-   * @param {number} max - Maximum value
-   */
-  setRangeValues(key, min, max) {
-    const range = this.activeRanges.get(key);
-    if (!range) return;
-    range.state.currentMin = min;
-    range.state.currentMax = max;
-    this.updateSliderUI(key);
-    this.applyFilter(key);
-  }
-
-  /**
-   * Remove range slider
-   * @param {string} key - Range key
-   */
-  removeRangeSlider(key) {
-    const range = this.activeRanges.get(key);
-    if (!range) return;
-    range.elements.slider.remove();
-    this.activeRanges.delete(key);
-    this.afs.logger.info(`Range slider removed for ${key}`);
-  }
-}
-
-/**
- * @fileoverview Date filter implementation for AFS
- */
-
-class DateFilter {
-  constructor(afs) {
-    this.afs = afs;
-    this.activeDateRanges = new Map();
-    this.defaultFormat = this.afs.options.get('dateFormat') || 'YYYY-MM-DD';
-  }
-
-  /**
-   * @typedef {Object} DateRangeOptions
-   * @property {string} key - Data attribute key
-   * @property {HTMLElement} container - Container element
-   * @property {Date} [minDate] - Minimum date
-   * @property {Date} [maxDate] - Maximum date
-   * @property {string} [format] - Date format (default: YYYY-MM-DD)
-   */
-
-  /**
-   * Add date range filter
-   * @param {DateRangeOptions} options - Date range options
-   */
-  addDateRange(_ref) {
-    let {
-      key,
-      container,
-      minDate,
-      maxDate,
-      format = this.defaultFormat
-    } = _ref;
-    this.afs.logger.debug(`Adding date range for ${key}`);
-    if (!container) {
-      this.afs.logger.error('Container element required for date range');
-      return;
-    }
-
-    // Calculate min/max dates if not provided
-    const dates = this.calculateMinMaxDates(key);
-    minDate = minDate ?? dates.min;
-    maxDate = maxDate ?? dates.max;
-
-    // Create date picker elements
-    const elements = this.createDateElements();
-    const state = this.initializeState(minDate, maxDate, format);
-
-    // Add elements to container
-    this.appendElements(container, elements);
-
-    // Setup event handlers
-    this.setupEventHandlers(elements, state, key);
-
-    // Store state
-    this.activeDateRanges.set(key, {
-      state,
-      elements
-    });
-
-    // Initial update
-    this.updateDateUI(key);
-    this.afs.logger.info(`Date range added for ${key}`);
-  }
-
-  /**
-   * Calculate min and max dates from items
-   * @private
-   */
-  calculateMinMaxDates(key) {
-    try {
-      const validDates = Array.from(this.afs.items).map(item => {
-        if (!item || !item.dataset || !item.dataset[key]) {
-          return null;
-        }
-        const date = new Date(item.dataset[key]);
-        return isNaN(date.getTime()) ? null : date;
-      }).filter(date => date !== null);
-      if (validDates.length === 0) {
-        // Return default date range if no valid dates found
-        const today = new Date();
-        return {
-          min: new Date(today.getFullYear(), 0, 1),
-          // January 1st of current year
-          max: new Date(today.getFullYear(), 11, 31) // December 31st of current year
-        };
-      }
-      return {
-        min: new Date(Math.min(...validDates)),
-        max: new Date(Math.max(...validDates))
-      };
-    } catch (error) {
-      this.afs.logger.error('Error calculating date range:', error);
-      // Return default date range on error
-      const today = new Date();
-      return {
-        min: new Date(today.getFullYear(), 0, 1),
-        max: new Date(today.getFullYear(), 11, 31)
-      };
-    }
-  }
-
-  /**
-   * Create date picker elements
-   * @private
-   */
-  createDateElements() {
-    this.afs.logger.debug('Creating date picker elements');
-    const container = document.createElement('div');
-    container.className = 'afs-date-range-container';
-    const startContainer = document.createElement('div');
-    startContainer.className = 'afs-date-input-wrapper';
-    const startLabel = document.createElement('label');
-    startLabel.textContent = 'Start Date';
-    const startInput = document.createElement('input');
-    startInput.type = 'date';
-    startInput.className = 'afs-date-input start-date';
-    const endContainer = document.createElement('div');
-    endContainer.className = 'afs-date-input-wrapper';
-    const endLabel = document.createElement('label');
-    endLabel.textContent = 'End Date';
-    const endInput = document.createElement('input');
-    endInput.type = 'date';
-    endInput.className = 'afs-date-input end-date';
-    startContainer.appendChild(startLabel);
-    startContainer.appendChild(startInput);
-    endContainer.appendChild(endLabel);
-    endContainer.appendChild(endInput);
-    container.appendChild(startContainer);
-    container.appendChild(endContainer);
-    return {
-      container,
-      startInput,
-      endInput
-    };
-  }
-
-  /**
-   * Initialize date filter state
-   * @private
-   */
-  initializeState(minDate, maxDate, format) {
-    return {
-      minDate,
-      maxDate,
-      currentStartDate: minDate,
-      currentEndDate: maxDate,
-      format
-    };
-  }
-
-  /**
-   * Append elements to container
-   * @private
-   */
-  appendElements(container, elements) {
-    container.appendChild(elements.container);
-  }
-
-  /**
-   * Setup event handlers
-   * @private
-   */
-  setupEventHandlers(elements, state, key) {
-    this.afs.logger.debug(`Setting up event handlers for date range ${key}`);
-    const {
-      startInput,
-      endInput
-    } = elements;
-    const handleDateChange = debounce(() => {
-      const startDate = new Date(startInput.value);
-      const endDate = new Date(endInput.value);
-      if (!isNaN(startDate.getTime()) && !isNaN(endDate.getTime())) {
-        state.currentStartDate = startDate;
-        state.currentEndDate = endDate;
-        this.applyDateFilter(key);
-      }
-    }, 300);
-    startInput.addEventListener('change', handleDateChange);
-    endInput.addEventListener('change', handleDateChange);
-  }
-
-  /**
-   * Update date picker UI
-   * @private
-   */
-  updateDateUI(key) {
-    try {
-      const {
-        state,
-        elements
-      } = this.activeDateRanges.get(key);
-      const {
-        startInput,
-        endInput
-      } = elements;
-
-      // Format dates for input
-      const formatDate = date => {
-        try {
-          const d = new Date(date);
-          if (isNaN(d.getTime())) {
-            throw new Error('Invalid date');
-          }
-          return d.toISOString().split('T')[0];
-        } catch (error) {
-          this.afs.logger.error('Error formatting date:', error);
-          return '';
-        }
-      };
-
-      // Set min/max constraints
-      startInput.min = formatDate(state.minDate);
-      startInput.max = formatDate(state.maxDate);
-      endInput.min = formatDate(state.minDate);
-      endInput.max = formatDate(state.maxDate);
-
-      // Set current values
-      startInput.value = formatDate(state.currentStartDate);
-      endInput.value = formatDate(state.currentEndDate);
-    } catch (error) {
-      this.afs.logger.error('Error updating date UI:', error);
-    }
-  }
-
-  /**
-   * Apply date filter
-   * @private
-   */
-  applyDateFilter(key) {
-    this.afs.logger.info(`Applying date filter for ${key}`);
-    const {
-      state
-    } = this.activeDateRanges.get(key);
-    this.afs.items.forEach(item => {
-      try {
-        // Check if item and dataset exist
-        if (!item || !item.dataset || !item.dataset[key]) {
-          this.afs.hideItem(item);
-          return;
-        }
-        const itemDate = new Date(item.dataset[key]);
-
-        // Check if date is valid
-        if (isNaN(itemDate.getTime())) {
-          this.afs.hideItem(item);
-          return;
-        }
-
-        // Set time to midnight for consistent comparison
-        const startDate = new Date(state.currentStartDate);
-        startDate.setHours(0, 0, 0, 0);
-        const endDate = new Date(state.currentEndDate);
-        endDate.setHours(23, 59, 59, 999);
-        const compareDate = new Date(itemDate);
-        compareDate.setHours(0, 0, 0, 0);
-        if (compareDate >= startDate && compareDate <= endDate) {
-          this.afs.showItem(item);
-        } else {
-          this.afs.hideItem(item);
-        }
-      } catch (error) {
-        this.afs.logger.error('Error filtering item by date:', error);
-        this.afs.hideItem(item);
-      }
-    });
-    this.afs.updateCounter();
-    this.afs.urlManager.updateURL();
-    this.afs.emit('dateFilter', {
-      key,
-      startDate: state.currentStartDate,
-      endDate: state.currentEndDate
-    });
-  }
-
-  /**
-   * Get current date range
-   * @param {string} key - Date range key
-   * @returns {Object} Current date range
-   */
-  getDateRange(key) {
-    const range = this.activeDateRanges.get(key);
-    if (!range) return null;
-    return {
-      startDate: range.state.currentStartDate,
-      endDate: range.state.currentEndDate
-    };
-  }
-
-  /**
-   * Set date range
-   * @param {string} key - Date range key
-   * @param {Date} startDate - Start date
-   * @param {Date} endDate - End date
-   */
-  setDateRange(key, startDate, endDate) {
-    const range = this.activeDateRanges.get(key);
-    if (!range) return;
-    range.state.currentStartDate = startDate;
-    range.state.currentEndDate = endDate;
-    this.updateDateUI(key);
-    this.applyDateFilter(key);
-  }
-
-  /**
-   * Remove date range
-   * @param {string} key - Date range key
-   */
-  removeDateRange(key) {
-    const range = this.activeDateRanges.get(key);
-    if (!range) return;
-    range.elements.container.remove();
-    this.activeDateRanges.delete(key);
-    this.afs.logger.info(`Date range removed for ${key}`);
-  }
-}
-
-/**
- * @fileoverview Advanced Filter System - Main Class
- */
-
-// Version
-const VERSION = '1.0.8';
-class AFS extends EventEmitter {
-  /**
-   * @param {Object} options - Configuration options
-   */
-  constructor() {
-    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    super();
-    this.initializeCore(options);
-  }
-
-  /**
-   * Initialize core components
-   * @private
-   */
-  initializeCore(options) {
-    try {
-      this.options = new Options(options);
-      this.logger = new Logger(this.options.get("debug") || false, this.options.get("logLevel") || "info");
-      this.state = new State();
-      this.styleManager = new StyleManager(this.options);
-      this.initializeDOM();
-      this.initializeFeatures();
-      this.setupLifecycle();
-    } catch (error) {
-      console.error("AFS initialization error:", error);
-      throw error;
-    }
-  }
-
-  /**
-   * Initialize DOM elements
-   * @private
-   */
-  initializeDOM() {
-    this.logger.debug("Initializing DOM elements");
-    this.container = document.querySelector(this.options.get("containerSelector"));
-    if (!this.container) {
-      throw new Error(`Container not found: ${this.options.get("containerSelector")}`);
-    }
-    this.items = this.container.querySelectorAll(this.options.get("itemSelector"));
-    if (this.items.length === 0) {
-      this.logger.warn("No items found in container");
-    }
-    this.state.setState("items.total", this.items.length);
-    this.state.setState("items.visible", new Set(this.items));
-  }
-
-  /**
-   * Initialize features
-   * @private
-   */
-  initializeFeatures() {
-    this.logger.debug("Initializing features");
-
-    // Then initialize other features
-    this.filter = new Filter(this);
-    this.search = new Search(this);
-    this.sort = new Sort(this);
-    this.rangeFilter = new RangeFilter(this);
-    this.urlManager = new URLManager(this);
-    this.dateFilter = new DateFilter(this);
-    this.pagination = new Pagination(this);
-
-    // Apply styles
-    this.styleManager.applyStyles();
-
-    // Load initial state from URL
-    this.urlManager.loadFromURL();
-  }
-
-  /**
-   * Setup lifecycle events
-   * @private
-   */
-  setupLifecycle() {
-    if (this.options.get("responsive")) {
-      window.addEventListener("resize", this.handleResize.bind(this));
-    }
-    if (this.options.get("preserveState")) {
-      document.addEventListener("visibilitychange", this.handleVisibilityChange.bind(this));
-    }
-    if (this.options.get("observeDOM")) {
-      this.setupMutationObserver();
-    }
-    this.emit("initialized", {
-      itemCount: this.items.length,
-      options: this.options.export()
-    });
-  }
-
-  // Item Management Methods
-  /**
-   * Show item with animation
-   * @public
-   * @param {HTMLElement} item - Item to show
-   */
-  showItem(item) {
-    // Update state first
-    const visibleItems = this.state.getState().items.visible;
-    visibleItems.add(item);
-    this.state.setState("items.visible", visibleItems);
-
-    // Remove hidden class but keep opacity 0 initially
-    item.classList.remove(this.options.get("hiddenClass"));
-
-    // Set initial animation state
-    item.style.opacity = "0";
-    item.style.transform = "scale(0.95)";
-    item.style.display = ""; // Ensure item is not display: none
-
-    // Force reflow before starting animation
-    item.offsetHeight;
-
-    // Add transition class if not present
-    const transitionClass = this.options.get("transitionClass") || "afs-transition";
-    if (!item.classList.contains(transitionClass)) {
-      item.classList.add(transitionClass);
-    }
-
-    // Start animation in next frame
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        // Double RAF for reliable animation
-        item.style.opacity = "1";
-        item.style.transform = "scale(1)";
-      });
-    });
-
-    // Clean up after animation
-    const duration = this.options.get("animationDuration") || 300;
-    setTimeout(() => {
-      // Only clean up if item is still meant to be visible
-      if (visibleItems.has(item)) {
-        item.style.transform = "";
-        item.style.opacity = "";
-      }
-    }, duration);
-  }
-
-  /**
-   * Hide item with animation
-   * @public
-   * @param {HTMLElement} item - Item to hide
-   */
-  hideItem(item) {
-    // Update state first
-    const visibleItems = this.state.getState().items.visible;
-    visibleItems.delete(item);
-    this.state.setState("items.visible", visibleItems);
-
-    // Add transition class if not present
-    const transitionClass = this.options.get("transitionClass") || "afs-transition";
-    if (!item.classList.contains(transitionClass)) {
-      item.classList.add(transitionClass);
-    }
-
-    // Start hide animation
-    requestAnimationFrame(() => {
-      item.style.opacity = "0";
-      item.style.transform = "scale(0.95)";
-    });
-
-    // Add hidden class and clean up after animation
-    const duration = this.options.get("animationDuration") || 300;
-    setTimeout(() => {
-      // Only hide if the item is still meant to be hidden
-      if (!visibleItems.has(item)) {
-        item.classList.add(this.options.get("hiddenClass"));
-        // Clean up styles
-        item.style.transform = "";
-        item.style.opacity = "";
-      }
-    }, duration);
-  }
-
-  /**
-   * Add new items
-   * @public
-   */
-  addItems(newItems) {
-    const items = Array.isArray(newItems) ? newItems : [newItems];
-    const fragment = document.createDocumentFragment();
-    items.forEach(item => {
-      fragment.appendChild(item);
-      this.state.getState().items.visible.add(item);
-    });
-    this.container.appendChild(fragment);
-    this.items = this.container.querySelectorAll(this.options.get("itemSelector"));
-    this.filter.applyFilters();
-  }
-
-  /**
-   * Remove items
-   * @public
-   */
-  removeItems(itemsToRemove) {
-    const items = Array.isArray(itemsToRemove) ? itemsToRemove : [itemsToRemove];
-    const visibleItems = this.state.getState().items.visible;
-    items.forEach(item => {
-      visibleItems.delete(item);
-      item.remove();
-    });
-    this.items = this.container.querySelectorAll(this.options.get("itemSelector"));
-    this.updateCounter();
-  }
-
-  // State Management Methods
-  /**
-   * Save current state
-   * @public
-   */
-  saveState() {
-    if (!this.options.get("preserveState")) return;
-    const state = {
-      filters: Array.from(this.filter.getActiveFilters()),
-      search: this.search.getValue(),
-      sort: this.sort.getCurrentSort(),
-      pagination: this.pagination.getPageInfo(),
-      timestamp: Date.now()
-    };
-    localStorage.setItem("afs_state", JSON.stringify(state));
-    this.logger.debug("State saved");
-  }
-
-  /**
-   * Restore saved state
-   * @public
-   */
-  restoreState() {
-    if (!this.options.get("preserveState")) return;
-    try {
-      const saved = localStorage.getItem("afs_state");
-      if (!saved) return;
-      const state = JSON.parse(saved);
-      if (Date.now() - state.timestamp > this.options.get("stateExpiry")) {
-        localStorage.removeItem("afs_state");
-        return;
-      }
-      this.setState(state);
-      this.logger.debug("State restored");
-    } catch (error) {
-      this.logger.error("Error restoring state:", error);
-    }
-  }
-
-  /**
-   * Get current state
-   * @public
-   */
-  getState() {
-    return this.state.export();
-  }
-
-  /**
-   * Set new state
-   * @public
-   */
-  setState(newState) {
-    this.state.import(newState);
-    this.refresh();
-  }
-
-  // Update Methods
-  /**
-   * Update counter display
-   * @public
-   */
-  updateCounter() {
-    // Get counter element
-    const counterElement = document.querySelector(this.options.get("counterSelector"));
-    if (!counterElement) return;
-    try {
-      // Get count values
-      const total = this.items.length;
-      const visible = this.state.getState().items.visible.size;
-      const filtered = total - visible;
-
-      // Get counter options with defaults
-      const counterOpts = this.options.get("counter") || Options.defaults.counter;
-      const template = counterOpts.template || "Showing {visible} of {total}";
-      const formatter = counterOpts.formatter || (num => num.toLocaleString());
-
-      // Format numbers
-      const formattedVisible = formatter(visible);
-      const formattedTotal = formatter(total);
-      const formattedFiltered = formatter(filtered);
-
-      // Build counter text
-      let counterText = template.replace("{visible}", formattedVisible).replace("{total}", formattedTotal).replace("{filtered}", formattedFiltered);
-
-      // Add filtered count if enabled
-      if (filtered > 0 && counterOpts.showFiltered) {
-        const filteredTemplate = counterOpts.filteredTemplate || "({filtered} filtered)";
-        counterText += " " + filteredTemplate.replace("{filtered}", formattedFiltered);
-      }
-
-      // Show no results message if applicable
-      if (visible === 0 && counterOpts.noResultsTemplate) {
-        counterText = counterOpts.noResultsTemplate;
-      }
-
-      // Update counter element
-      counterElement.textContent = counterText;
-
-      // Emit event
-      this.emit("counterUpdated", {
-        total,
-        visible,
-        filtered,
-        formattedTotal,
-        formattedVisible,
-        formattedFiltered
-      });
-    } catch (error) {
-      // Fallback to basic counter if anything fails
-      this.logger.error("Error updating counter:", error);
-      counterElement.textContent = `${this.state.getState().items.visible.size}/${this.items.length}`;
-    }
-  }
-
-  /**
-   * Update options
-   * @public
-   */
-  updateOptions(newOptions) {
-    this.options.update(newOptions);
-    this.styleManager.updateStyles(newOptions);
-    this.refresh();
-  }
-
-  /**
-   * Refresh system
-   * @public
-   */
-  refresh() {
-    this.logger.debug("Refreshing AFS");
-    this.items = this.container.querySelectorAll(this.options.get("itemSelector"));
-    this.state.setState("items.total", this.items.length);
-    this.filter.applyFilters();
-    this.search.search(this.search.getValue());
-    this.pagination.update();
-    this.emit("refreshed", {
-      itemCount: this.items.length
-    });
-  }
-
-  // Event Handlers
-  /**
-   * Handle resize
-   * @private
-   */
-  handleResize = (() => debounce(() => {
-    this.emit("resize");
-    this.refresh();
-  }, 250))();
-
-  /**
-   * Handle visibility change
-   * @private
-   */
-  handleVisibilityChange() {
-    if (document.hidden) {
-      this.emit("hidden");
-      this.saveState();
-    } else {
-      this.emit("visible");
-      this.restoreState();
-    }
-  }
-
-  /**
-   * Setup mutation observer
-   * @private
-   */
-  setupMutationObserver() {
-    const observer = new MutationObserver(mutations => {
-      if (mutations.some(mutation => mutation.type === "childList")) {
-        this.refresh();
-      }
-    });
-    observer.observe(this.container, {
-      childList: true,
-      subtree: true
-    });
-  }
-
-  // Utility Methods
-  /**
-   * Get version
-   * @public
-   */
-  getVersion() {
-    return VERSION;
-  }
-
-  /**
-   * Check feature support
-   * @public
-   */
-  isFeatureSupported(feature) {
-    const supportedFeatures = {
-      search: !!this.search,
-      pagination: true,
-      animation: typeof document.createElement("div").style.transition !== "undefined",
-      urlState: typeof window.history.pushState === "function",
-      localStorage: (() => {
-        try {
-          localStorage.setItem("test", "test");
-          localStorage.removeItem("test");
-          return true;
-        } catch (e) {
-          return false;
-        }
-      })()
-    };
-    return !!supportedFeatures[feature];
-  }
-
-  /**
-   * Destroy instance
-   * @public
-   */
-  destroy() {
-    this.logger.debug("Destroying AFS instance");
-
-    // Remove event listeners
-    window.removeEventListener("resize", this.handleResize);
-    document.removeEventListener("visibilitychange", this.handleVisibilityChange);
-
-    // Destroy features
-    this.filter.destroy();
-    this.search.destroy();
-    this.sort.destroy();
-    this.pagination.destroy();
-    this.rangeFilter.destroy();
-
-    // Cleanup
-    this.styleManager.removeStyles();
-    this.state.reset();
-    localStorage.removeItem("afs_state");
-
-    // Reset items
-    this.items.forEach(item => {
-      item.style = "";
-      item.classList.remove(this.options.get("hiddenClass"), this.options.get("activeClass"));
-    });
-    this.emit("destroyed");
-  }
-}
-
-export { AFS, VERSION };
-//# sourceMappingURL=AFS.esm.js.map