=Taxonomy Selector and Creator refactor

Jake Vanderwerf

2026-01-04 552d48a1424417da160c4952650ea6f4a3d7bafa

 assets/js/concise/TaxonomySelector.js

@@ -1,6 +1,6 @@
/**
 * Centralized Taxonomy Selector with DataStore Integration
 * Handles all taxonomy selection fields using DataStore for state management
 * TaxonomySelector - Streamlined version
 * Manages taxonomy selection fields with DataStore integration
 */
class TaxonomySelector {
   constructor() {
@@ -8,138 +8,133 @@
      this.error = window.jvbError;
      this.index = -1;

      this.hasAutocomplete = false;
      this.isInitializing = true;
      this.taxonomiesToFetch = new Set();

      this.triggers = new Set(['.taxonomy-toggle']);

      this.subscribers = new Set();

      const store = window.jvbStore.register(
         'taxonomies',
         {
            storeName: `terms`,
            keyPath: 'id',
            showLoading: false,
            indexes: [
               {name: 'taxonomy', keyPath: 'taxonomy'},
               {name: 'parent', keyPath: 'parent'},
               {name: 'slug', keyPath: 'slug', unique: true},
               {name: 'count', keyPath: 'count'},
            ],
            endpoint: 'terms',
            TTL: 2 * 60 * 1000, //2 hours
            filters: {
               taxonomy: '',
               page: 1,
               search: '',
               parent: 0
            },
            required: 'taxonomy',
            delayFetch: true,
         });
      // Register DataStore
      const store = window.jvbStore.register('taxonomies', {
         storeName: 'terms',
         keyPath: 'id',
         showLoading: false,
         indexes: [
            {name: 'taxonomy', keyPath: 'taxonomy'},
            {name: 'parent', keyPath: 'parent'},
            {name: 'slug', keyPath: 'slug', unique: true},
            {name: 'count', keyPath: 'count'},
         ],
         endpoint: 'terms',
         TTL: 2 * 60 * 1000,
         filters: {
            taxonomy: '',
            page: 1,
            search: '',
            parent: 0
         },
         required: 'taxonomy',
         delayFetch: true,
      });
      this.store = store.terms;

      // Central field management
      // Field management
      this.fields = new Map();
      this.selectedTerms = new Map();    // Current modal selection
      this.selectedTerms = new Map(); // Current modal selection

      // Current modal context
      // Modal context
      this.activeField = null;
      this.currentConfig = null;
      this.currentSingular = null;
      this.currentPlural = null;

      // Modal state
      this.disabled = false;

      // Search debouncing
      this.searchHandler = null;
      this.autocompleteHandler = null;
      this.isAutocompleteActive = false;
      // Search contexts
      this.searchContexts = new Map();

      this.init();
   }

   /**
    * Initialize the selector
    */
   init() {
      this.initModal();
      this.scanExistingFields();
      this.initGlobalListeners();

      if (this.hasAutocomplete && window.jvbTaxCreator) {
      // Initialize creator if needed
      if (this.needsCreator() && window.jvbTaxCreator) {
         this.creator = new window.jvbTaxCreator(this);
      }

      this.store.subscribe(this.handleStoreEvent.bind(this));
      // Complete initialization

      this.isInitializing = false;
      this.batchFetchTaxonomies();
   }

   /**
    * Handle DataStore events
    */
   needsCreator() {
      return Array.from(this.fields.values()).some(field =>
         field.canCreate || field.hasAutocomplete
      );
   }

   /***********************************************************************
    * DATASTORE EVENT HANDLING
    ***********************************************************************/

   handleStoreEvent(event, data) {
      switch (event) {
         case 'data-loaded':
            const taxonomy = this.store.filters.taxonomy;
            // Handle batch taxonomy loading (comma-separated)
            if (taxonomy?.includes(',')) {
               this.handleBatchDataLoaded(taxonomy, data);
            }
            // Update button states for this taxonomy (or taxonomies)
            if (taxonomy) {
               // Handle comma-separated taxonomies from batch fetch
               const taxonomies = taxonomy.includes(',')
                  ? taxonomy.split(',').map(t => t.trim())
                  : [taxonomy];
      const handlers = {
         'data-loaded': () => this.handleDataLoaded(data),
         'filters-changed': () => this.handleFiltersChanged(data),
         'fetch-error': () => this.handleFetchError(data.error),
      };

               taxonomies.forEach(tax => {
                  this.updateFieldsForTaxonomy(tax);
               });
            }
      handlers[event]?.();
   }

            // Only render if modal is open OR autocomplete active
            if (this.modal?.open) {
               this.handleTermsLoaded(data);
            }
   handleDataLoaded(data) {
      const taxonomy = this.store.filters.taxonomy;

            if (this.isAutocompleteActive && this.activeField) {
               const field = this.fields.get(this.activeField);
               const terms = data.data?.items || [];
               const query = data.filters?.search || '';
               this.showAutocompleteResults(field, terms, query);
               this.isAutocompleteActive = false;
            }
            break;
      // Update field states for affected taxonomies
      if (taxonomy) {
         const taxonomies = taxonomy.includes(',')
            ? taxonomy.split(',').map(t => t.trim())
            : [taxonomy];

         case 'filters-changed':
            if (this.modal?.open) {
               this.showLoading();
            }
            break;
         taxonomies.forEach(tax => this.updateFieldsForTaxonomy(tax));
      }

         case 'fetch-error':
            if (this.isAutocompleteActive && this.activeField) {
               this.showAutocompleteError(this.activeField);
               this.isAutocompleteActive = false;
      // Initialize displays on first load
      if (this.isInitializing) {
         this.fields.forEach((config, fieldId) => {
            if (config.selectedTerms.size > 0) {
               this.initFieldDisplay(fieldId);
            }
            this.handleFetchError(data.error);
            break;
         });
      }

      // Render based on context
      this.renderSearchResults(data);
   }

   renderSearchResults(data) {
      const context = this.getActiveSearchContext();

      if (context === 'modal') {
         this.renderModalResults(data);
      } else if (context === 'autocomplete') {
         this.renderAutocompleteResults(data);
      }
   }

   /**
    * Handle loaded terms from DataStore
    */
   handleTermsLoaded(data) {
   getActiveSearchContext() {
      if (this.modal?.open) return 'modal';
      if (this.activeField && this.searchContexts.has(this.activeField)) {
         return this.searchContexts.get(this.activeField);
      }
      return null;
   }

   renderModalResults(data) {
      this.hideLoading();
      const terms = this.store.getFiltered();  // Use getFiltered() instead of getFilteredItems()
      const terms = this.store.getFiltered();
      const response = this.store.lastResponse?.page || {};
      const isSearch = data.filters?.search && data.filters.search.length > 0;
      const isSearch = data.filters?.search?.length > 0;
      const append = response.page > 1;

      this.notify('terms-loaded', { terms, filters: data.filters });
@@ -152,7 +147,6 @@
      } else {
         this.renderTerms(terms, append, isSearch);

         // Handle pagination
         if (response.has_more) {
            this.observer.observe(this.ui.sentinel);
         } else {
@@ -160,107 +154,88 @@
         }
      }

      // Announce to screen readers
      this.a11y?.announce(terms.length, append);
   }

   /**
    * Handle fetch errors
    */
   renderAutocompleteResults(data) {
      const field = this.fields.get(this.activeField);
      if (!field?.autocompleteDropdown) return;

      const terms = this.store.getFiltered();
      const query = data.filters?.search || '';

      this.showAutocompleteResults(field, terms, query);
      this.searchContexts.delete(this.activeField);
   }

   handleFiltersChanged(data) {
      if (this.modal?.open) {
         this.showLoading();
      }
   }

   handleFetchError(error) {
      console.error('Taxonomy fetch error:', error);
      this.hideLoading();

      if (this.error?.log) {
         this.error.log(error, {
            component: 'TaxonomySelector',
            action: 'fetchTerms'
         }, () => this.fetchCurrentTerms());
      const context = this.getActiveSearchContext();

      if (context === 'autocomplete') {
         this.showAutocompleteError(this.activeField);
         this.searchContexts.delete(this.activeField);
      } else {
         this.showEmptyState('Error loading terms. Please try again.');
         this.handleError(error, 'fetch');
      }
   }

   /***********************************************************************
    * FIELD MANAGEMENT
    ***********************************************************************/

   /**
    * Check if taxonomy has terms and update button states
    */
   updateFieldButtonState(fieldId) {
      const field = this.fields.get(fieldId);
      if (!field) return;

      // Check store for items of this specific taxonomy
      const hasTerms = Array.from(this.store.data.values())
         .some(term => term.taxonomy === field.taxonomy);

      if (field.toggle) {
         field.toggle.disabled = !hasTerms && !field.canCreate;
         field.toggle.title = !hasTerms
            ? `No ${this.getSingular(field.taxonomy)} available`
            : `Select ${this.getPlural(field.taxonomy)}`;
      }
   }
   /**
    * Update fields when taxonomy items are updated
    */
   updateFieldsForTaxonomy(taxonomy) {
      this.getFieldsForTaxonomy(taxonomy).forEach(field => {
         this.updateFieldButtonState(field.id);
      });
   }

   /**
    * Get fields for a specific taxonomy
    */
   updateFieldButtonState(fieldId) {
      const field = this.fields.get(fieldId);
      if (!field) return;

      const hasTerms = Array.from(this.store.data.values())
         .some(term => term.taxonomy === field.taxonomy);

      if (field.toggle) {
         field.toggle.disabled = !hasTerms && !field.canCreate;
         field.toggle.title = !hasTerms
            ? `No ${this.getLabel(field.taxonomy, 'single')} available`
            : `Select ${this.getLabel(field.taxonomy, 'plural')}`;
      }
   }

   getFieldsForTaxonomy(taxonomy) {
      return Array.from(this.fields.values())
         .filter(field => field.taxonomy === taxonomy);
   }



   /**
    * Scan page for existing taxonomy fields and register them
    */
   scanExistingFields(container = null) {
      if (!container) {
         container = document.body;
      }
      const selectors = container.querySelectorAll('.field.taxonomy, .field.post');

      selectors.forEach(selector => {
   scanExistingFields(container = document.body) {
      container.querySelectorAll('.field.taxonomy, .field.post').forEach(selector => {
         try {
            this.registerField(selector);
         } catch (error) {
            this.error.log(error, {
               component: 'TaxonomySelector',
               action: 'scanExistingFields',
               container: selector.dataset.name
            });
            this.handleError(error, 'scanExistingFields', selector.dataset.name);
         }
      });
   }

   /**
    * Register a taxonomy field
    */
   registerField(field, options = {}) {
      let input = field.querySelector('input[type=hidden]');
      if (!input) {
         return false;
      }
      if (!('fieldId' in field.dataset)) {
         field.dataset.fieldId = this.createFieldId(field);
      }
      let fieldId = field.dataset.fieldId;
   registerField(field) {
      const input = field.querySelector('input[type=hidden]');
      if (!input) return false;

      let button = (Object.hasOwn(options, 'button')) ? options.button : field.querySelector('button.taxonomy-toggle');
      const fieldId = this.createFieldId(field);
      field.dataset.fieldId = fieldId;

      if (Object.hasOwn(options, 'buttonSelector')) {
         this.triggers.add(options.buttonSelector);
      }

      let config = {
      const button = field.querySelector('button.taxonomy-toggle');
      const config = {
         id: fieldId,
         input: input,
         container: field,
@@ -269,45 +244,31 @@
         maxSelection: parseInt(button.dataset.max) || 0,
         canSearch: 'search' in button.dataset,
         hasAutocomplete: 'autocomplete' in button.dataset,
         autocompleteDropdown: field.querySelector('.autocomplete-dropdown')??false,
         autocompleteDropdown: field.querySelector('.autocomplete-dropdown') || null,
         canCreate: 'creatable' in button.dataset,
         isRequired: 'required' in button.dataset,
         selectedTerms: new Set(),
         toggle: button,
         selectedContainer: (Object.hasOwn(options, 'selected')) ? options.selected : field.querySelector('.selected-items'),
         ...options
         selectedContainer: field.querySelector('.selected-items'),
      };

      if (!this.hasAutocomplete && config.hasAutocomplete) {
         this.hasAutocomplete = true;
         this.initAutocomplete();
      }

      // Parse initial selected values
      // Parse initial values
      const value = input.value.trim();
      if (value !== '') {
         const selectedIds = value.split(',')
      if (value) {
         value.split(',')
            .map(id => parseInt(id.trim()))
            .filter(id => !isNaN(id));
         selectedIds.forEach(id => config.selectedTerms.add(id));
      }

      if (Object.hasOwn(options, 'selectedItems')) {
         options.selectedItems.forEach(id => {
            config.selectedTerms.add(id);
         });
            .filter(id => !isNaN(id))
            .forEach(id => config.selectedTerms.add(id));
      }

      this.fields.set(fieldId, config);

      // Ensure store exists for this taxonomy
      // Queue for batch fetch
      if (this.isInitializing) {
         this.taxonomiesToFetch.add(config.taxonomy);
      } else {
         // this.store.setFilter('taxonomy', config.taxonomy);
      }

      // Initialize display for any pre-selected values
      // Initialize display
      if (config.selectedTerms.size > 0) {
         this.initFieldDisplay(fieldId);
      }
@@ -315,78 +276,29 @@
      return fieldId;
   }

   /**
    * Register a filter button (simplified registration for feed blocks)
    */
   registerFilterButton(button, options = {}) {
      const fieldId = this.createFieldId(button);
      button.dataset.fieldId = fieldId;

      if (options.buttonSelector) {
         this.triggers.add(options.buttonSelector);
      }

      const config = {
         id: fieldId,
         input: null,
         container: options.container || button.closest('.filters') || button.parentElement,
         taxonomy: button.dataset.taxonomy,
         name: `filter_${button.dataset.taxonomy}`,
         maxSelection: parseInt(button.dataset.max) || 0,
         canSearch: 'search' in button.dataset,
         hasAutocomplete: false,
         canCreate: false,
         isRequired: false,
         selectedTerms: new Set(options.selectedItems || []),
         toggle: button,
         selectedContainer: options.selected || null,
         isFilterMode: true,
         ...options
      };

      this.fields.set(fieldId, config);

      if (this.isInitializing) {
         this.taxonomiesToFetch.add(config.taxonomy);
      } else {
         this.store.setFilter('taxonomy', config.taxonomy);
      }

      return fieldId;
   }

   /**
    * Create unique field ID
    */
   createFieldId(field) {
      this.index++;
      return 'selector-' + this.index;
   }

   /**
    * Initialize display for a field with existing values
    */
   async initFieldDisplay(fieldId) {
      const field = this.fields.get(fieldId);
      if (!field || field.selectedTerms.size === 0) return;

      const selectedIds = Array.from(field.selectedTerms);

      selectedIds.forEach(termId => {
         const term = this.store.get(termId);  // Changed from getItem
      Array.from(field.selectedTerms).forEach(termId => {
         const term = this.store.get(termId);
         if (term) {
            this.addTermToDisplay(fieldId, term.id, term.name, term.path);
            this.addTermDisplay(termId, term.name, term.path, 'field', fieldId);
         }
      });
   }

   /**
    * Initialize modal elements
    */
   initModal() {
      this.modalID = 'dialog#jvb-selector';
      this.modal = document.querySelector(this.modalID);
   /***********************************************************************
    * MODAL INITIALIZATION
    ***********************************************************************/

   initModal() {
      this.modal = document.querySelector('dialog#jvb-selector');
      if (!this.modal) {
         console.warn('Taxonomy selector modal not found');
         return;
@@ -394,36 +306,24 @@

      this.initModalElements();

      // Initialize modal instance
      this.modalInstance = new window.jvbModal(this.modal, {
         handleForm: false,
         save: null,
         open: null
         handleForm: false
      });
      this.modalInstance.subscribe((event, data) => {
         switch (event) {
            case 'modal-open':
               this.openModal(data);
               break;
            case 'modal-close':
               this.closeModal(data);
               break;
         }

      this.modalInstance.subscribe((event) => {
         if (event === 'modal-open') this.openModal();
         if (event === 'modal-close') this.closeModal();
      });
   }

   /**
    * Initialize modal element references
    */
   initModalElements() {
      this.selectors = {
      const selectors = {
         search: {
            input: '[type=search]',
            clear: '.clear-search',
            container: '.search-wrapper'
         },
         termsList:  '.items-container',
         termsWrap:  '.items-wrap',
         termsList: '.items-container',
         termsWrap: '.items-wrap',
         breadcrumbs: {
            nav: 'nav.term-navigation',
            back: '.back-to-parent',
@@ -436,25 +336,20 @@
         sentinel: '.scroll-sentinel',
         modal: {
            title: '#modal-title',
            content: '.modal-content'
         },
         create: {
            details: '.create-new-term',
            parent: '#select_parent',
            summary: '.create-new-term summary',
            name: '#term_name',
            button: '.submit-term',
            label: {
               name: '[for=term_name]',
               parent: '[for=select_parent]'
            }
         },
         favouriteTerms: '.favourite-terms'
      }
         }
      };

      this.ui = window.uiFromSelectors(this.selectors);
      this.ui = window.uiFromSelectors(selectors);

      // Initialize intersection observer for infinite scroll
      // Initialize infinite scroll observer
      this.observer = new IntersectionObserver((entries) => {
         entries.forEach(entry => {
            if (entry.isIntersecting) {
@@ -467,52 +362,29 @@
      });
   }

   /**
    * Set up global event delegation
    */
   /***********************************************************************
    * GLOBAL EVENT LISTENERS
    ***********************************************************************/

   initGlobalListeners() {
      document.addEventListener('click', this.handleClick.bind(this));
      document.addEventListener('change', this.handleChange.bind(this));
      if (this.hasAutocomplete) {
         this.initAutocomplete();
      }
      document.addEventListener('input', this.handleInput.bind(this));
      document.addEventListener('focus', this.handleFocus.bind(this), true);
      document.addEventListener('blur', this.handleBlur.bind(this), true);
   }

   initAutocomplete()
   {
      this.autocompleteHandler = window.debounce((e) => this.handleAutocomplete(e), 300);
      document.addEventListener('input', this.autocompleteHandler);
      document.addEventListener('blur', this.cleanupAutocomplete.bind(this));
      // Preload taxonomy data on focus
      document.addEventListener('focus', (e) => {
         if (!('autocomplete' in e.target.dataset)) {
            return;
         }

   handleClick(e) {
      // Toggle button
      if (window.targetCheck(e, '.taxonomy-toggle')) {
         e.preventDefault();
         const fieldId = this.getFieldId(e.target);
         const field = this.fields.get(fieldId);

         if (!field) return;

         // Preload this taxonomy's data
         this.preloadTaxonomy(field.taxonomy);
      }, true); // Use capture phase
   }

   /**
    * Handle global click events
    */
   handleClick(e) {
      // Handle taxonomy toggle buttons
      const toggleButton = window.targetCheck(e, Array.from(this.triggers));

      if (toggleButton) {
         e.preventDefault();
         this.handleToggleClick(toggleButton);
         if (field) this.setActiveField(fieldId, true);
         return;
      }

      // Handle remove selected term buttons
      // Remove selected term
      const removeButton = window.targetCheck(e, 'button.remove-item');
      if (removeButton && e.target.closest('.jvb-selector')) {
         const fieldId = this.getFieldId(removeButton);
@@ -521,25 +393,20 @@
         return;
      }

      // Handle modal close button
      // Modal close
      if (e.target.matches('.modal-close')) {
         if (this.modalInstance) {
            this.modalInstance.handleClose();
         }
         this.modalInstance?.handleClose();
         return;
      }

      // Handle clicks within the modal
      if (this.modal && this.modal.contains(e.target)) {
      // Modal clicks
      if (this.modal?.contains(e.target)) {
         this.handleModalClick(e);
      }
   }

   /**
    * Handle global change events
    */
   handleChange(e) {
      // Handle hidden input changes for taxonomy fields
      // Hidden input changes
      const taxonomyField = window.targetCheck(e, '.taxonomy.field, .post.field');
      if (taxonomyField && e.target.type === 'hidden') {
         const fieldId = this.getFieldId(e.target);
@@ -547,60 +414,122 @@
         return;
      }

      // Handle modal changes
      if (this.modal && this.modal.contains(e.target)) {
      // Modal checkboxes
      if (this.modal?.contains(e.target)) {
         this.handleModalChange(e);
      }
   }

   /**
    * Handle toggle button click
    */
   handleToggleClick(toggle) {
      try {
         const fieldId = this.getFieldId(toggle);
   handleInput(e) {
      // Modal search
      if (this.modal?.contains(e.target) && e.target.type === 'search') {
         this.performSearch(e.target.value.trim(), 'modal');
         return;
      }

      // Autocomplete
      if ('autocomplete' in e.target.dataset) {
         const fieldId = this.getFieldId(e.target);
         const field = this.fields.get(fieldId);

         if (!field) {
            console.error('Field not found for toggle:', fieldId);
            return;
         }


         this.setActiveField(fieldId, true);

      } catch (error) {
         console.error('Error handling toggle click:', error);
         if (this.error?.log) {
            this.error.log(error, {
               component: 'TaxonomySelector',
               action: 'handleToggleClick'
            });
         if (field?.hasAutocomplete) {
            this.performSearch(e.target.value.trim(), 'autocomplete', fieldId);
         }
      }
   }

   /**
    * Set the active field for modal operations
    */
   handleFocus(e) {
      if (!('autocomplete' in e.target.dataset)) return;

      const fieldId = this.getFieldId(e.target);
      const field = this.fields.get(fieldId);

      if (field?.hasAutocomplete) {
         this.preloadTaxonomy(field.taxonomy);
      }
   }

   handleBlur(e) {
      if (!('autocomplete' in e.target.dataset)) return;

      setTimeout(() => {
         const fieldId = this.getFieldId(e.target);
         const field = this.fields.get(fieldId);

         if (field?.autocompleteDropdown) {
            field.autocompleteDropdown.hidden = true;
         }

         this.searchContexts.delete(fieldId);
      }, 200);
   }

   /***********************************************************************
    * UNIFIED SEARCH
    ***********************************************************************/

   performSearch(query, context = 'modal', fieldId = null) {
      const field = context === 'autocomplete'
         ? this.fields.get(fieldId)
         : this.currentConfig;

      if (!field) return;

      // Autocomplete validation
      if (context === 'autocomplete') {
         field.currentAutocompleteQuery = query;

         if (query.length < 2) {
            if (field.autocompleteDropdown) {
               field.autocompleteDropdown.hidden = true;
            }
            return;
         }

         this.searchContexts.set(fieldId, 'autocomplete');
         this.activeField = fieldId;

         if (field.autocompleteDropdown) {
            field.autocompleteDropdown.hidden = false;
         }
      }

      // Debounced search
      window.debouncer.schedule(
         `taxonomy-search-${context}-${fieldId || 'modal'}`,
         async () => {
            await this.store.setFilters({
               taxonomy: field.taxonomy,
               search: query,
               page: 1,
               parent: query ? 0 : (this.store.filters.parent || 0)
            });

            if (context === 'modal') {
               window.removeChildren(this.ui.termsList);
            }
         },
         300
      );
   }

   /***********************************************************************
    * MODAL OPERATIONS
    ***********************************************************************/

   setActiveField(fieldId, openModal = false) {
      this.activeField = fieldId;
      this.currentConfig = this.fields.get(fieldId);

      this.currentSingular = this.getSingular(this.currentConfig.taxonomy);
      this.currentPlural = this.getPlural(this.currentConfig.taxonomy);

      if (openModal) {
         this.modalInstance.handleOpen();
      }

      // Set taxonomy filter - store handles the rest
      this.store.setFilter('taxonomy', this.currentConfig.taxonomy);

      // Clear modal selection state
      // Reset modal selection state
      this.selectedTerms.clear();

      // Copy field's current selections to modal state
      // Copy field selections to modal
      this.currentConfig.selectedTerms.forEach(termId => {
         const term = this.store.get(termId);
         if (term) {
@@ -613,147 +542,55 @@
      });
   }


   /**
    * Handle clicks within modal
    */
   handleModalClick(e) {
      if (window.targetCheck(e, '.remove-item')) {
         let selectedItem = window.targetCheck(e, '.selected-item');
         const selectedItem = window.targetCheck(e, '.selected-item');
         if (selectedItem) {
            this.removeSelectedTermFromModal(selectedItem.dataset.id);
         }
      } else if (window.targetCheck(e, '.back-to-parent')) {
         this.navigateToParent();
      } else if (window.targetCheck(e, '.toggle-children')) {
         let termItem = e.target.closest('li');
         const termItem = e.target.closest('li');
         this.navigateToChild(
            parseInt(termItem.dataset.id),
            termItem.querySelector('.term-name').textContent
         );
      } else if (window.targetCheck(e, '.path-level')) {
         let pathLevel = window.targetCheck(e, '.path-level');
         this.navigateToPath(pathLevel);
         const pathLevel = window.targetCheck(e, '.path-level');
         this.navigateToPath(parseInt(pathLevel.dataset.id) || 0);
      }
   }

   /**
    * Handle changes within modal (checkboxes)
    */
   handleModalChange(e) {
      if (window.targetCheck(e, this.modalID) && e.target.type === 'checkbox') {
         e.preventDefault();
         e.stopPropagation();
      if (e.target.type !== 'checkbox') return;

         const termId = parseInt(e.target.closest('li').dataset.id);
         const label = e.target.closest('li').querySelector('label');
      e.preventDefault();
      e.stopPropagation();

         if (e.target.checked) {
            this.addSelectedTermToModal(termId, label.title, label.dataset.path);
         } else {
            this.removeSelectedTermFromModal(termId);
         }
      const termId = parseInt(e.target.closest('li').dataset.id);
      const label = e.target.closest('li').querySelector('label');

      if (e.target.checked) {
         this.addSelectedTermToModal(termId, label.title, label.dataset.path);
      } else {
         this.removeSelectedTermFromModal(termId);
      }
   }

   /**
    * Open modal for filtering (without a field)
    * @param {string} taxonomy - The taxonomy to filter by
    * @param {Function} callback - Callback when terms are selected
    * @param {Array} preselected - Array of term IDs already selected
    */
   openForFilter(taxonomy, callback, preselected = []) {
      // Create a temporary virtual field config
      const virtualFieldId = `filter-${taxonomy}-${Date.now()}`;

      this.fields.set(virtualFieldId, {
         id: virtualFieldId,
         input: null, // No input for filter mode
         container: null,
         taxonomy: taxonomy,
         name: `filter_${taxonomy}`,
         maxSelection: 0, // No limit for filters
         canSearch: true,
         hasAutocomplete: false,
         autocompleteDropdown: document.querySelector('.autocomplete-dropdown')??false,
         canCreate: false, // Disable creation for filters
         isRequired: false,
         selectedTerms: new Set(preselected),
         toggle: null,
         selectedContainer: null,
         isFilterMode: true, // Flag for filter mode
         filterCallback: callback // Store the callback
      });

      this.setActiveField(virtualFieldId, true);
      this.modalInstance.handleOpen();
   }

   /**
    * Open modal and initialize
    */
   openModal() {
      if (!this.currentConfig) {
         console.error('No active field set');
         return;
      }

      // Initialize creator if available
      if (!this.creator && this.currentConfig.canCreate && 'jvbTaxCreator' in window) {
         this.creator = new window.jvbTaxCreator(this);
      }

      // Update modal UI
      this.updateModalForTaxonomy();

      // Load selected terms display
      this.updateModalUI();
      this.updateModalSelections();
      this.updateSelectionCount();

      // Clear terms list and show loading
      window.removeChildren(this.ui.termsList);
      this.showLoading();
   }

   /**
    * Update selection count display in modal
    */
   updateSelectionCount() {
      if (!this.currentConfig) return;

      const count = this.selectedTerms.size;
      const max = this.currentConfig.maxSelection;

      // Update any count display elements
      const countElement = this.modal?.querySelector('.selection-count');
      if (countElement) {
         if (max > 0) {
            countElement.textContent = `${count} of ${max} selected`;
         } else {
            countElement.textContent = `${count} selected`;
         }
      }
   }



   /**
    * Get singular label for taxonomy
    */
   getSingular(taxonomy) {
      return jvbSettings.labels[taxonomy]?.single || taxonomy;
   }

   /**
    * Get plural label for taxonomy
    */
   getPlural(taxonomy) {
      return jvbSettings.labels[taxonomy]?.plural || taxonomy;
   }

   /**
    * Close modal and save selections
    */
   closeModal() {
      this.observer.unobserve(this.ui.sentinel);
      window.removeChildren(this.ui.termsList);
@@ -763,53 +600,19 @@
         taxonomy: this.currentConfig.taxonomy
      });

      if (this.currentConfig?.isFilterMode) {
         if (this.currentConfig.filterCallback) {
            const selectedIds = Array.from(this.selectedTerms.keys());
            this.currentConfig.filterCallback(selectedIds, this.currentConfig.taxonomy);
         }
         // this.fields.delete(this.activeField);
      } else if (this.activeField) {
      if (this.activeField) {
         this.saveSelectionsToField(this.activeField);
      }

      // Cleanup
      if (this.currentConfig?.canSearch && this.searchHandler) {
         this.ui.search.input.removeEventListener('input', this.searchHandler);
      }

      if (!this.hasAutocomplete && this.creator) {
         delete this.creator;
      }

      // Remove: this.activeStore = null;
      this.activeField = null;
      this.currentConfig = null;
   }

   /**
    * Reset modal state
    */
   resetModalState() {
      this.disabled = false;
   updateModalUI() {
      const singular = this.getLabel(this.currentConfig.taxonomy, 'single');
      const plural = this.getLabel(this.currentConfig.taxonomy, 'plural');

      window.removeChildren(this.ui.termsList);
      window.removeChildren(this.ui.selectedTerms);
      this.ui.search.input.value = '';

      // Clear navigation breadcrumbs
      window.removeChildren(this.ui.breadcrumbs.nav);
      this.ui.breadcrumbs.nav.appendChild(this.ui.breadcrumbs.back);
      this.ui.breadcrumbs.back.hidden = true;
   }

   /**
    * Update modal content for current taxonomy
    */
   updateModalForTaxonomy() {
      if (!this.currentConfig) return;

      this.ui.modal.title.textContent = `Select ${this.currentPlural}`;
      this.ui.modal.title.textContent = `Select ${plural}`;

      if (this.ui.search.container) {
         this.ui.search.container.style.display = this.currentConfig.canSearch ? 'block' : 'none';
@@ -820,185 +623,126 @@
         this.ui.create.details.hidden = !this.currentConfig.canCreate;

         if (this.ui.create.summary) {
            this.ui.create.summary.textContent = `Add new ${this.currentSingular}`;
            this.ui.create.summary.textContent = `Add new ${singular}`;
         }

         if (this.ui.create.label.name) {
            this.ui.create.label.name.textContent = `Name this ${this.currentSingular}`;
            this.ui.create.label.name.textContent = `Name this ${singular}`;
         }
         if (this.ui.create.label.parent) {
            this.ui.create.label.parent.textContent = `Nest it under`;
         }

         if (this.ui.create.parent) {

         }
      }

      const openMessage = `Opened ${this.currentSingular} selection. Choose from checkboxes or search to filter results.`;
      this.a11y?.announce(openMessage);
      this.a11y?.announce(`Opened ${singular} selection. Choose from checkboxes or search to filter results.`);
   }

   /**
    * Update modal selections display
    */
   updateModalSelections() {
      window.removeChildren(this.ui.selectedTerms);

      this.selectedTerms.forEach((termData, id) => {
         this.addTermToModalDisplay(id, termData.name, termData.path);
         this.addTermDisplay(id, termData.name, termData.path, 'modal');
      });

      this.checkSelectionLimits();
   }

   /**
    * Add selected term to modal
    */
   addSelectedTermToModal(id, name, path) {
      this.selectedTerms.set(id, {
         id: id,
         name: name,
         path: path
      });
      this.selectedTerms.set(id, { id, name, path });

      this.addTermToModalDisplay(id, name, path);
      this.addTermDisplay(id, name, path, 'modal');
      this.checkSelectionLimits();

      // Check the corresponding checkbox
      const checkbox = this.ui.termsList.querySelector(`input[value="${id}"]`);
      if (checkbox) {
         checkbox.checked = true;
      }
      if (checkbox) checkbox.checked = true;
   }

   /**
    * Remove selected term from modal
    */
   removeSelectedTermFromModal(id) {
      this.selectedTerms.delete(parseInt(id));

      // Remove from modal display
      const selectedItem = this.ui.selectedTerms.querySelector(`[data-id="${id}"]`);
      if (selectedItem) {
         selectedItem.remove();
      }
      if (selectedItem) selectedItem.remove();

      // Uncheck the corresponding checkbox
      const checkbox = this.ui.termsList.querySelector(`input[value="${id}"]`);
      if (checkbox) {
         checkbox.checked = false;
      }
      if (checkbox) checkbox.checked = false;

      this.checkSelectionLimits();
   }

   /**
    * Add term to modal display
    */
   addTermToModalDisplay(id, name, path) {
      const item = window.getTemplate('selectedTerm').cloneNode(true);
      item.dataset.id = id;
      item.dataset.path = path;
      item.dataset.name = name;
      item.dataset.taxonomy = this.currentConfig.taxonomy;
      item.querySelector('span').textContent = path;
      item.querySelector('button').title = `Remove ${name}`;

      this.ui.selectedTerms.appendChild(item);
   }

   /**
    * Check selection limits and disable/enable checkboxes
    */
   checkSelectionLimits() {
      if (!this.currentConfig || this.currentConfig.maxSelection === 0) {
         return;
      }

      this.disabled = this.selectedTerms.size >= this.currentConfig.maxSelection;
      this.setCheckboxes(this.disabled);
   }

   /**
    * Set checkbox disabled state
    */
   setCheckboxes(disabled) {
      this.ui.termsList.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
         if (!checkbox.checked) {
            checkbox.disabled = disabled;
            checkbox.disabled = this.disabled;
         }
      });
   }

   /**
    * Save modal selections to field
    */
   saveSelectionsToField(fieldId) {
      const field = this.fields.get(fieldId);
      if (!field) return;

      // Clear current field selections
      field.selectedTerms.clear();
      window.removeChildren(field.selectedContainer);

      // Add modal selections to field
      this.selectedTerms.forEach((termData, id) => {
         field.selectedTerms.add(id);
         this.addTermToDisplay(fieldId, id, termData.name, termData.path);
         this.addTermDisplay(id, termData.name, termData.path, 'field', fieldId);
      });

      // Update hidden input
      const selectedIds = Array.from(field.selectedTerms);
      field.input.value = selectedIds.join(',');
      field.input.value = Array.from(field.selectedTerms).join(',');
      field.input.dispatchEvent(new Event('change', { bubbles: true }));
   }

   /**
    * Remove selected term from field
    */
   /***********************************************************************
    * TERM DISPLAY
    ***********************************************************************/

   addTermDisplay(termId, termName, termPath, context = 'field', fieldId = null) {
      const config = context === 'field'
         ? this.fields.get(fieldId)
         : this.currentConfig;

      const container = context === 'field'
         ? config.selectedContainer
         : this.ui.selectedTerms;

      if (container.querySelector(`[data-id="${termId}"]`)) return;

      const item = window.getTemplate('selectedTerm');
      item.dataset.id = termId;
      item.dataset.path = termPath;
      item.dataset.name = termName;
      item.dataset.taxonomy = config.taxonomy;
      item.querySelector('.item-name').textContent = termPath;
      item.querySelector('button').title = `Remove ${termName}`;

      container.appendChild(item);

      if (context === 'modal') {
         const checkbox = this.ui.termsList.querySelector(`input[value="${termId}"]`);
         if (checkbox) checkbox.checked = true;
      }
   }

   removeSelectedTerm(fieldId, termId) {
      const field = this.fields.get(fieldId);
      if (!field) return;

      const id = parseInt(termId);
      field.selectedTerms.delete(id);
      field.selectedTerms.delete(parseInt(termId));

      // Remove from display
      const selectedItem = field.selectedContainer.querySelector(`[data-id="${id}"]`);
      if (selectedItem) {
         selectedItem.remove();
      }
      const selectedItem = field.selectedContainer.querySelector(`[data-id="${termId}"]`);
      if (selectedItem) selectedItem.remove();

      // Update hidden input
      const selectedIds = Array.from(field.selectedTerms);
      field.input.value = selectedIds.join(',');
      field.input.value = Array.from(field.selectedTerms).join(',');
      field.input.dispatchEvent(new Event('change', { bubbles: true }));
   }

   /**
    * Add term to field display
    */
   addTermToDisplay(fieldId, id, name, path) {
      const field = this.fields.get(fieldId);
      if (!field || field.selectedContainer.querySelector(`[data-id="${id}"]`)) {
         return; // Already displayed
      }

      const item = window.getTemplate('selectedTerm').cloneNode(true);
      item.dataset.id = id;
      item.dataset.path = path;
      item.dataset.name = name;
      item.dataset.taxonomy = field.taxonomy;
      item.querySelector('span').textContent = path;
      item.querySelector('button').title = `Remove ${name}`;

      field.selectedContainer.appendChild(item);
   }

   /**
    * Update field from hidden input value
    */
   updateFieldFromInput(fieldId) {
      const field = this.fields.get(fieldId);
      if (!field) return;
@@ -1007,242 +751,71 @@
      field.selectedTerms.clear();
      window.removeChildren(field.selectedContainer);

      if (value !== '') {
         const selectedIds = value.split(',')
      if (value) {
         value.split(',')
            .map(id => parseInt(id.trim()))
            .filter(id => !isNaN(id));
            .filter(id => !isNaN(id))
            .forEach(id => field.selectedTerms.add(id));

         selectedIds.forEach(id => field.selectedTerms.add(id));
         this.initFieldDisplay(fieldId);
      }
   }

   /**
    * Handle search input
    */
   handleSearch(e) {
      const query = e.target.value.trim();
   /***********************************************************************
    * NAVIGATION
    ***********************************************************************/

      // Clear existing debounce
      if (this.searchHandler) {
         clearTimeout(this.searchHandler);
      }

      this.searchHandler = setTimeout(() => {
         // Single call - auto-fetches
         this.store.setFilters({
            search: query,
            page: 1,
            parent: query ? 0 : (this.store.filters.parent || 0)
         });

         window.removeChildren(this.ui.termsList);
      }, 300);
   }

   async handleAutocomplete(e) {
      if (!('autocomplete' in e.target.dataset)) {
         return;
      }

      const fieldId = this.getFieldId(e.target);
      const field = this.fields.get(fieldId);

      if (!field) return;

      // Store current value immediately (fixes fast typing issue)
      const query = e.target.value.trim();
      field.currentAutocompleteQuery = query;

      if (query.length < 2) {
         if (field.autocompleteDropdown) {
            field.autocompleteDropdown.hidden = true;
         }
         this.isAutocompleteActive = false;
         return;
      }

      this.activeField = fieldId;
      this.isAutocompleteActive = true;

      if (field.autocompleteDropdown) {
         field.autocompleteDropdown.hidden = false;
      }

      this.store.setFilters({
         taxonomy: field.taxonomy,
         search: query,
         page: 1
      });
   }

   cleanupAutocomplete(e) {
      if (!('autocomplete' in e.target.dataset)) {
         return;
      }

      const fieldId = this.getFieldId(e.target);
      const field = this.fields.get(fieldId);

      if (!field) return;

      if (this.creator) {
         delete this.creator;
      }
   }

   showAutocompleteError(fieldId) {

      const field = this.fields.get(fieldId);
      if (!field) {
         return;
      }
      if (!field.config.autocompleteDropdown) {
         field.config.autocompleteDropdown = field.element.querySelector('.autocomplete-dropdown');
      }
      const dropdown = field.config.autocompleteDropdown;
      if (dropdown) {
         window.removeChildren(dropdown);
         this.showEmptyState('Hmmm... something went wrong', dropdown);
      }
   }

   showAutocompleteResults(field, terms, query) {
      if (!field || !field.autocompleteDropdown) {
         return;
      }

      const dropdown = field.autocompleteDropdown;
      window.removeChildren(dropdown);

      if (terms.length === 0) {
         this.showEmptyState('No items found.', dropdown);
      } else {
         terms.forEach(term => {
            const element = this.createAutocompleteTermElement(field, term);
            if (element) {
               dropdown.appendChild(element);
            }
         });
      }

      // Use stored current query instead of debounced one
      const currentQuery = field.currentAutocompleteQuery || query;
      if (field.canCreate && currentQuery && window.jvbTaxCreator) {
         const createOption = this.createNewTermOption(currentQuery);
         dropdown.appendChild(createOption);
      }

      dropdown.hidden = false;
   }

   createNewTermOption(query) {
      const button = document.createElement('button');
      button.type = 'button';
      button.className = 'autocomplete-item create-term';
      button.dataset.query = query;
      button.innerHTML = `<strong>Create:</strong> "${query}"`;

      return button;
   }

   createAutocompleteTermElement(field, term) {
      const item = document.createElement('button');
      item.type = 'button';
      item.className = 'autocomplete-item';
      item.dataset.id = term.id;
      item.dataset.name = term.name;
      item.dataset.path = term.path || term.name;
      item.textContent = term.path || term.name;

      item.addEventListener('click', () => {
         // Add term to field
         field.selectedTerms.add(parseInt(term.id));
         this.addTermToDisplay(field.id, term.id, term.name, term.path);

         // Update input
         field.input.value = Array.from(field.selectedTerms).join(',');
         field.input.dispatchEvent(new Event('change', { bubbles: true }));

         // Clear and hide dropdown
         field.autocompleteDropdown.hidden = true;
         const input = field.container.querySelector('input[data-autocomplete]');
         if (input) input.value = '';
      });

      return item;
   }

   /**
    * Navigate to parent term
    */
   navigateToParent() {
      // Store handles fetch automatically
      this.store.setFilters({
         parent: 0,
         page: 1
      });

      this.store.setFilters({ parent: 0, page: 1 });
      window.removeChildren(this.ui.termsList);
      this.ui.breadcrumbs.back.hidden = true;
   }

   /**
    * Navigate to child term
    */
   navigateToChild(termId, termName) {
      // Store handles fetch automatically
      this.store.setFilters({
         parent: termId,
         page: 1
      });

      this.store.setFilters({ parent: termId, page: 1 });
      window.removeChildren(this.ui.termsList);
      this.updateBreadcrumbs(termId, termName);
      this.ui.breadcrumbs.back.hidden = false;
   }

   /**
    * Navigate to specific path level
    */
   navigateToPath(pathLevel) {
      const parentId = parseInt(pathLevel.dataset.id) || 0;

      // Store handles fetch automatically
      this.store.setFilters({
         parent: parentId,
         page: 1
      });

   navigateToPath(parentId) {
      this.store.setFilters({ parent: parentId, page: 1 });
      window.removeChildren(this.ui.termsList);
      this.ui.breadcrumbs.back.hidden = parentId === 0;
   }

   /**
    * Load more terms (pagination)
    */
   loadMoreTerms() {
      const currentPage = this.store.filters.page || 1;
      this.store.setFilter('page', currentPage + 1);
   }

   /**
    * Render terms list
    */
   renderTerms(terms = null, append = false, showPath = false) {
      // If no terms provided, get from store
      if (!terms) {
         terms = this.store.getFiltered();
      }
   updateBreadcrumbs(termId, termName) {
      const breadcrumb = window.getTemplate('termBreadcrumb');
      breadcrumb.dataset.id = termId;
      breadcrumb.textContent = termName;
      breadcrumb.title = termName;

      if (!append) {
         window.removeChildren(this.ui.termsList);
      const existingCrumb = this.ui.breadcrumbs.nav.querySelector(`[data-id="${termId}"]`);
      if (existingCrumb) {
         while (existingCrumb.nextElementSibling) {
            existingCrumb.nextElementSibling.remove();
         }
      } else {
         this.ui.breadcrumbs.nav.appendChild(breadcrumb);
      }
   }

   /***********************************************************************
    * RENDERING
    ***********************************************************************/

   renderTerms(terms = null, append = false, showPath = false) {
      if (!terms) terms = this.store.getFiltered();

      if (!append) window.removeChildren(this.ui.termsList);

      if (terms.length === 0) {
         if (!append) {
            this.showEmptyState();
         }
         if (!append) this.showEmptyState();
         return;
      }

@@ -1259,104 +832,145 @@
            show: showPath
         });

         if (element) {
            fragment.appendChild(element);
         }
         if (element) fragment.appendChild(element);
      });

      this.ui.termsList.appendChild(fragment);
   }

   /**
    * Create individual term element
    */
   createTermElement(termData) {
      if (!termData || !termData.name) return null;
      if (!termData?.name) return null;

      const listItem = window.getTemplate('termListItem').cloneNode(true);
      const listItem = window.getTemplate('termListItem');
      listItem.dataset.id = termData.id;

      const isSelected = this.selectedTerms.has(termData.id);
      const checkbox = listItem.querySelector('input');
      const label = listItem.querySelector('label');
      const nameSpan = listItem.querySelector('span, .term-name');
      const nameSpan = listItem.querySelector('.term-name');

      if (checkbox && label && nameSpan) {
         checkbox.id = `${this.currentConfig.container.id}${termData.id}`;
         checkbox.name = `${this.currentConfig.container.id}${this.currentConfig.taxonomy}-select`;
         checkbox.value = termData.id;
         checkbox.disabled = !isSelected && this.disabled;
         checkbox.checked = isSelected;
      checkbox.id = `${this.currentConfig.container.id}${termData.id}`;
      checkbox.name = `${this.currentConfig.container.id}${this.currentConfig.taxonomy}-select`;
      checkbox.value = termData.id;
      checkbox.disabled = !isSelected && this.disabled;
      checkbox.checked = isSelected;

         label.htmlFor = checkbox.id;
         label.title = termData.path || termData.name;
         label.dataset.path = termData.path;
      label.htmlFor = checkbox.id;
      label.title = termData.path || termData.name;
      label.dataset.path = termData.path;

         nameSpan.textContent = termData.show ? termData.path : termData.name;
      }
      nameSpan.textContent = termData.show ? termData.path : termData.name;

      if (termData.hasChildren) {
         const childrenToggle = window.getTemplate ?
            window.getTemplate('termChildrenToggle') :
            this.createChildrenToggle();

         if (childrenToggle) {
            childrenToggle.ariaLabel = `View sub-terms of ${termData.name}`;
            listItem.appendChild(childrenToggle);
         }
         const childrenToggle = window.getTemplate('termChildrenToggle');
         childrenToggle.ariaLabel = `View sub-terms of ${termData.name}`;
         listItem.appendChild(childrenToggle);
      }

      return listItem;
   }

   /**
    * Create children toggle button
    */
   createChildrenToggle() {
   /***********************************************************************
    * AUTOCOMPLETE
    ***********************************************************************/

   showAutocompleteResults(field, terms, query) {
      if (!field?.autocompleteDropdown) return;

      const dropdown = field.autocompleteDropdown;
      window.removeChildren(dropdown);

      if (terms.length === 0) {
         this.showEmptyState('No items found.', dropdown);
      } else {
         const fragment = document.createDocumentFragment();

         terms.forEach(term => {
            const item = this.createAutocompleteItem(field, term);
            if (item) fragment.appendChild(item);
         });

         dropdown.appendChild(fragment);
      }

      // Create button if allowed and no exact match
      const currentQuery = field.currentAutocompleteQuery || query;
      if (field.canCreate && currentQuery) {
         const exactMatch = terms.find(term =>
            term.name.toLowerCase() === currentQuery.toLowerCase()
         );

         if (!exactMatch) {
            dropdown.appendChild(this.createAutocompleteCreateButton(currentQuery));
         }
      }

      dropdown.hidden = false;
   }

   createAutocompleteItem(field, term) {
      const button = document.createElement('button');
      button.type = 'button';
      button.className = 'toggle-children';
      button.innerHTML = '→';
      button.className = 'autocomplete-item';
      button.dataset.id = term.id;
      button.dataset.name = term.name;
      button.dataset.path = term.path || term.name;
      button.textContent = term.path || term.name;

      button.addEventListener('click', () => {
         field.selectedTerms.add(parseInt(term.id));
         this.addTermDisplay(term.id, term.name, term.path, 'field', field.id);

         field.input.value = Array.from(field.selectedTerms).join(',');
         field.input.dispatchEvent(new Event('change', { bubbles: true }));

         field.autocompleteDropdown.hidden = true;
         const input = field.container.querySelector('input[data-autocomplete]');
         if (input) input.value = '';
      });

      return button;
   }

   /**
    * Update breadcrumb navigation
    */
   updateBreadcrumbs(termId, termName) {
      // This is a simplified version - you'd want to maintain a proper breadcrumb trail
      const breadcrumb = window.getTemplate('termBreadcrumb').cloneNode(true);
      breadcrumb.dataset.id = termId;
      breadcrumb.textContent = termName;
      breadcrumb.title = termName;
   createAutocompleteCreateButton(query) {
      const button = document.createElement('button');
      button.type = 'button';
      button.className = 'autocomplete-item create-term';
      button.dataset.query = query;

      // Remove any existing breadcrumbs after this level
      const existingCrumb = this.ui.breadcrumbs.nav.querySelector(`[data-id="${termId}"]`);
      if (existingCrumb) {
         // Remove all breadcrumbs after this one
         while (existingCrumb.nextElementSibling) {
            existingCrumb.nextElementSibling.remove();
         }
      } else {
         this.ui.breadcrumbs.nav.appendChild(breadcrumb);
      }
      const strong = document.createElement('strong');
      strong.textContent = 'Create: ';

      button.appendChild(strong);
      button.appendChild(document.createTextNode(`"${query}"`));

      return button;
   }

   /**
    * Show loading state
    */
   showAutocompleteError(fieldId) {
      const field = this.fields.get(fieldId);
      if (!field?.autocompleteDropdown) return;

      window.removeChildren(field.autocompleteDropdown);
      this.showEmptyState('Hmmm... something went wrong', field.autocompleteDropdown);
   }

   /***********************************************************************
    * UI STATES
    ***********************************************************************/

   showLoading() {
      this.ui.loading.loading.hidden = false;
      this.modal.classList.add('loading');

      const searchQuery = this.store?.filters?.search || '';
      const currentParent = this.store?.filters?.parent || 0;
      const searchQuery = this.store.filters.search || '';
      const currentParent = this.store.filters.parent || 0;

      let message = searchQuery !== '' ?
         `searching for "${searchQuery}" items` :
         currentParent === 0 ?
            'loading items' :
            `loading child items`;
      const message = searchQuery
         ? `searching for "${searchQuery}" items`
         : currentParent === 0
            ? 'loading items'
            : 'loading child items';

      if (window.typeLoop) {
         this.stopTyping = window.typeLoop(this.ui.loading.text, message);
@@ -1365,9 +979,6 @@
      }
   }

   /**
    * Hide loading state
    */
   hideLoading() {
      this.ui.loading.loading.hidden = true;
      this.modal.classList.remove('loading');
@@ -1377,47 +988,40 @@
      }
   }

   /**
    * Show empty state message
    */
   showEmptyState(message = 'No items found.', container = null) {
      if (!container) {
         container = this.ui.termsList;
      }
      const emptyElement = window.getTemplate('noResults').cloneNode(true);
      if (!container) container = this.ui.termsList;

      if (message && emptyElement.querySelector('span')) {
         emptyElement.querySelector('span').textContent = message;
      const emptyElement = window.getTemplate('noResults');
      const messageSpan = emptyElement.querySelector('span');

      if (message && messageSpan) {
         messageSpan.textContent = message;
      }

      container.appendChild(emptyElement);
   }

   /**
    * Get field ID from any element within the field
    */
   /***********************************************************************
    * UTILITIES
    ***********************************************************************/

   getFieldId(element) {
      if (element.dataset.fieldId) {
         return element.dataset.fieldId;
      }
      if (element.dataset.fieldId) return element.dataset.fieldId;

      const fieldContainer = element.closest('[data-field-id]');
      if (fieldContainer) {
         return fieldContainer.dataset.fieldId;
      }

      return null;
      return fieldContainer?.dataset.fieldId || null;
   }
   /********************************************
   BATCH FETCH: fetches first page for all taxonomies in one call
    ********************************************/

   getLabel(taxonomy, type = 'single') {
      return jvbSettings.labels[taxonomy]?.[type] || taxonomy;
   }

   async batchFetchTaxonomies() {
      if (this.taxonomiesToFetch.size === 0) return;

      const taxonomies = Array.from(this.taxonomiesToFetch);
      this.taxonomiesToFetch.clear();

      // Single fetch - the data-loaded event will handle cache splitting
      this.store.setFilters({
         taxonomy: taxonomies.join(','),
         page: 1,
@@ -1425,85 +1029,31 @@
         parent: 0
      });
   }
   handleBatchDataLoaded(taxonomyString, data) {
      const taxonomies = taxonomyString.split(',').map(t => t.trim());
      const storeInstance = this.store.getStore(); // Access actual store instance

      taxonomies.forEach(taxonomy => {
         const filters = {
            taxonomy: taxonomy,
            page: 1,
            search: '',
            parent: 0
         };

         // Use the internal generateCacheKey method via store instance
         const cacheKey = this.generateCacheKeyForFilters(filters);

         // Filter items for this specific taxonomy
         const items = Array.from(this.store.data.values())
            .filter(item => item.taxonomy === taxonomy)
            .map(item => item.id);

         const cacheEntry = {
            key: cacheKey,
            items: items,
            timestamp: Date.now(),
            endpoint: storeInstance.config.endpoint,
            filters: filters
         };

         // Set in both memory and IndexedDB cache
         storeInstance.cache.set(cacheKey, cacheEntry);

         // Persist to IndexedDB (if available)
         if (storeInstance.db?.objectStoreNames.contains('cache')) {
            const tx = storeInstance.db.transaction(['cache'], 'readwrite');
            const objectStore = tx.objectStore('cache');
            objectStore.put(cacheEntry);
         }

         // Update button states for this taxonomy
         this.updateFieldsForTaxonomy(taxonomy);
      });

      // Initialize field displays
      this.fields.forEach((config, fieldId) => {
         if (config.selectedTerms.size > 0) {
            this.initFieldDisplay(fieldId);
         }
      });
   }

   /**
    * Generate cache key for given filters (matching DataStore's internal logic)
    */
   generateCacheKeyForFilters(filters) {
      const normalized = Object.keys(filters)
         .sort()
         .reduce((acc, key) => {
            acc[key] = filters[key];
            return acc;
         }, {});

      return JSON.stringify(normalized);
   }

   /**
    * Preload taxonomy data on hover
    */
   async preloadTaxonomy(taxonomy) {
      // Trigger fetch for this taxonomy
      this.store.setFilters({
      await this.store.setFilters({
         taxonomy: taxonomy,
         page: 1,
         search: '',
         parent: 0
      });
   }
   /*****************************************
   SUBSCRIBERS
    *****************************************/

   handleError(error, context, detail = null) {
      console.error(`Taxonomy ${context} error:`, error, detail);

      if (this.error?.log) {
         this.error.log(error, {
            component: 'TaxonomySelector',
            action: context,
            detail: detail
         });
      }

      if (this.modal?.open) {
         this.showEmptyState('Error loading. Please try again.');
      }
   }

   subscribe(callback) {
      this.subscribers.add(callback);
@@ -1511,7 +1061,7 @@
   }

   notify(event, data = {}) {
      this.subscribers.forEach( callback => {
      this.subscribers.forEach(callback => {
         try {
            callback(event, data);
         } catch (error) {
@@ -1520,30 +1070,27 @@
      });
   }

   /**
    * Clean up
    */
   destroy() {
      // Remove event listeners
      document.removeEventListener('click', this.handleClick);
      document.removeEventListener('change', this.handleChange);
      document.removeEventListener('input', this.handleInput);
      document.removeEventListener('focus', this.handleFocus);
      document.removeEventListener('blur', this.handleBlur);

      // Clear intervals and cleanup
      this.observer?.disconnect();

      // Destroy all stores
      this.store.destroy();

      this.subscribers.clear();
      // Clear all maps
      this.fields.clear();
      this.selectedTerms.clear();
      this.searchContexts.clear();
   }
}

/**
 * Initialize singleton
 */
document.addEventListener('DOMContentLoaded', function() {
   window.jvbSelector = new TaxonomySelector();
// Initialize on auth ready
document.addEventListener('DOMContentLoaded', () => {
   window.auth.subscribe((event) => {
      if (event === 'auth-loaded') {
         window.jvbSelector = new TaxonomySelector();
      }
   });
});