@smilodon/core 1.1.8 → 1.2.0

package/dist/index.umd.js

@@ -952,6 +952,404 @@
         selectConfig.resetConfig();
     }
 
+    /**
+     * Custom Option Component Pool
+     *
+     * Manages lifecycle and recycling of custom option components for optimal performance.
+     * Uses object pooling pattern to minimize allocation/deallocation overhead.
+     */
+    /**
+     * Manages a pool of reusable custom option component instances
+     */
+    class CustomOptionPool {
+        constructor(maxPoolSize = 50) {
+            this._pool = new Map();
+            this._activeComponents = new Map();
+            this._maxPoolSize = maxPoolSize;
+        }
+        /**
+         * Get or create a component instance for the given index
+         *
+         * @param factory - Factory function to create new instances
+         * @param item - The data item
+         * @param index - The option index
+         * @param context - Context for mounting
+         * @param container - DOM container for mounting
+         * @returns Component instance
+         */
+        acquire(factory, item, index, context, container) {
+            const factoryKey = this._getFactoryKey(factory);
+            // Try to find an available component in the pool
+            const pooled = this._findAvailableComponent(factoryKey);
+            let component;
+            if (pooled) {
+                // Reuse pooled component
+                component = pooled.instance;
+                pooled.inUse = true;
+                pooled.lastUsedIndex = index;
+                console.log(`[CustomOptionPool] Reusing component for index ${index}`);
+            }
+            else {
+                // Create new component
+                try {
+                    component = factory(item, index);
+                    console.log(`[CustomOptionPool] Created new component for index ${index}`);
+                    // Add to pool if under limit
+                    const pool = this._pool.get(factoryKey) || [];
+                    if (pool.length < this._maxPoolSize) {
+                        pool.push({
+                            instance: component,
+                            inUse: true,
+                            lastUsedIndex: index
+                        });
+                        this._pool.set(factoryKey, pool);
+                    }
+                }
+                catch (error) {
+                    console.error(`[CustomOptionPool] Failed to create component:`, error);
+                    throw error;
+                }
+            }
+            // Mount the component
+            try {
+                component.mountOption(container, context);
+                this._activeComponents.set(index, component);
+            }
+            catch (error) {
+                console.error(`[CustomOptionPool] Failed to mount component at index ${index}:`, error);
+                throw error;
+            }
+            return component;
+        }
+        /**
+         * Release a component back to the pool
+         *
+         * @param index - The index of the component to release
+         */
+        release(index) {
+            const component = this._activeComponents.get(index);
+            if (!component)
+                return;
+            try {
+                component.unmountOption();
+            }
+            catch (error) {
+                console.error(`[CustomOptionPool] Failed to unmount component at index ${index}:`, error);
+            }
+            this._activeComponents.delete(index);
+            // Mark as available in pool
+            for (const pool of this._pool.values()) {
+                const pooled = pool.find(p => p.instance === component);
+                if (pooled) {
+                    pooled.inUse = false;
+                    console.log(`[CustomOptionPool] Released component from index ${index}`);
+                    break;
+                }
+            }
+        }
+        /**
+         * Release all active components
+         */
+        releaseAll() {
+            console.log(`[CustomOptionPool] Releasing ${this._activeComponents.size} active components`);
+            const indices = Array.from(this._activeComponents.keys());
+            indices.forEach(index => this.release(index));
+        }
+        /**
+         * Update selection state for a component
+         *
+         * @param index - The index of the component
+         * @param selected - Whether it's selected
+         */
+        updateSelection(index, selected) {
+            const component = this._activeComponents.get(index);
+            if (component) {
+                component.updateSelected(selected);
+            }
+        }
+        /**
+         * Update focused state for a component
+         *
+         * @param index - The index of the component
+         * @param focused - Whether it has keyboard focus
+         */
+        updateFocused(index, focused) {
+            const component = this._activeComponents.get(index);
+            if (component && component.updateFocused) {
+                component.updateFocused(focused);
+            }
+        }
+        /**
+         * Get active component at index
+         *
+         * @param index - The option index
+         * @returns The component instance or undefined
+         */
+        getComponent(index) {
+            return this._activeComponents.get(index);
+        }
+        /**
+         * Clear the entire pool
+         */
+        clear() {
+            this.releaseAll();
+            this._pool.clear();
+            console.log('[CustomOptionPool] Pool cleared');
+        }
+        /**
+         * Get pool statistics for debugging
+         */
+        getStats() {
+            let totalPooled = 0;
+            let availableComponents = 0;
+            for (const pool of this._pool.values()) {
+                totalPooled += pool.length;
+                availableComponents += pool.filter(p => !p.inUse).length;
+            }
+            return {
+                totalPooled,
+                activeComponents: this._activeComponents.size,
+                availableComponents
+            };
+        }
+        /**
+         * Find an available component in the pool
+         */
+        _findAvailableComponent(factoryKey) {
+            const pool = this._pool.get(factoryKey);
+            if (!pool)
+                return undefined;
+            return pool.find(p => !p.inUse);
+        }
+        /**
+         * Generate a unique key for a factory function
+         */
+        _getFactoryKey(factory) {
+            // Use function name or create a symbol
+            return factory.name || `factory_${factory.toString().slice(0, 50)}`;
+        }
+    }
+
+    /**
+     * Option Renderer
+     *
+     * Unified renderer that handles both lightweight (label/value) and
+     * custom component rendering with consistent performance characteristics.
+     */
+    /**
+     * Manages rendering of both lightweight and custom component options
+     */
+    class OptionRenderer {
+        constructor(config) {
+            this._mountedElements = new Map();
+            this._config = config;
+            this._pool = new CustomOptionPool(config.maxPoolSize);
+        }
+        /**
+         * Render an option (lightweight or custom component)
+         *
+         * @param item - The data item
+         * @param index - The option index
+         * @param isSelected - Whether the option is selected
+         * @param isFocused - Whether the option has keyboard focus
+         * @param uniqueId - Unique ID for the select instance
+         * @returns The rendered DOM element
+         */
+        render(item, index, isSelected, isFocused, uniqueId) {
+            const extendedItem = item;
+            const value = this._config.getValue(item);
+            const label = this._config.getLabel(item);
+            const isDisabled = this._config.getDisabled ? this._config.getDisabled(item) : false;
+            // Determine if this is a custom component or lightweight option
+            const hasCustomComponent = extendedItem.optionComponent && typeof extendedItem.optionComponent === 'function';
+            if (hasCustomComponent) {
+                return this._renderCustomComponent(item, index, value, label, isSelected, isFocused, isDisabled, uniqueId, extendedItem.optionComponent);
+            }
+            else {
+                return this._renderLightweightOption(item, index, value, label, isSelected, isFocused, isDisabled, uniqueId);
+            }
+        }
+        /**
+         * Update selection state for an option
+         *
+         * @param index - The option index
+         * @param selected - Whether it's selected
+         */
+        updateSelection(index, selected) {
+            const element = this._mountedElements.get(index);
+            if (!element)
+                return;
+            // Check if this is a custom component
+            const component = this._pool.getComponent(index);
+            if (component) {
+                component.updateSelected(selected);
+            }
+            else {
+                // Update lightweight option
+                if (selected) {
+                    element.classList.add('selected');
+                    element.setAttribute('aria-selected', 'true');
+                }
+                else {
+                    element.classList.remove('selected');
+                    element.setAttribute('aria-selected', 'false');
+                }
+            }
+        }
+        /**
+         * Update focused state for an option
+         *
+         * @param index - The option index
+         * @param focused - Whether it has keyboard focus
+         */
+        updateFocused(index, focused) {
+            const element = this._mountedElements.get(index);
+            if (!element)
+                return;
+            // Check if this is a custom component
+            const component = this._pool.getComponent(index);
+            if (component) {
+                if (component.updateFocused) {
+                    component.updateFocused(focused);
+                }
+                // Also update the element's focused class for styling
+                element.classList.toggle('focused', focused);
+            }
+            else {
+                // Update lightweight option
+                element.classList.toggle('focused', focused);
+            }
+        }
+        /**
+         * Unmount and cleanup an option
+         *
+         * @param index - The option index
+         */
+        unmount(index) {
+            // Release custom component if exists
+            this._pool.release(index);
+            // Remove from mounted elements
+            this._mountedElements.delete(index);
+        }
+        /**
+         * Unmount all options
+         */
+        unmountAll() {
+            this._pool.releaseAll();
+            this._mountedElements.clear();
+        }
+        /**
+         * Get pool statistics
+         */
+        getStats() {
+            return this._pool.getStats();
+        }
+        /**
+         * Render a lightweight option (traditional label/value)
+         */
+        _renderLightweightOption(item, index, value, label, isSelected, isFocused, isDisabled, uniqueId) {
+            const option = document.createElement('div');
+            option.className = 'option';
+            if (isSelected)
+                option.classList.add('selected');
+            if (isFocused)
+                option.classList.add('focused');
+            if (isDisabled)
+                option.classList.add('disabled');
+            option.id = `${uniqueId}-option-${index}`;
+            option.textContent = label;
+            option.dataset.value = String(value);
+            option.dataset.index = String(index);
+            option.dataset.mode = 'lightweight';
+            option.setAttribute('role', 'option');
+            option.setAttribute('aria-selected', String(isSelected));
+            if (isDisabled) {
+                option.setAttribute('aria-disabled', 'true');
+            }
+            // Click handler
+            if (!isDisabled) {
+                option.addEventListener('click', () => {
+                    this._config.onSelect(index);
+                });
+            }
+            this._mountedElements.set(index, option);
+            console.log(`[OptionRenderer] Rendered lightweight option ${index}: ${label}`);
+            return option;
+        }
+        /**
+         * Render a custom component option
+         */
+        _renderCustomComponent(item, index, value, label, isSelected, isFocused, isDisabled, uniqueId, factory) {
+            // Create wrapper container for the custom component
+            const wrapper = document.createElement('div');
+            wrapper.className = 'option option-custom';
+            if (isSelected)
+                wrapper.classList.add('selected');
+            if (isFocused)
+                wrapper.classList.add('focused');
+            if (isDisabled)
+                wrapper.classList.add('disabled');
+            wrapper.id = `${uniqueId}-option-${index}`;
+            wrapper.dataset.value = String(value);
+            wrapper.dataset.index = String(index);
+            wrapper.dataset.mode = 'component';
+            wrapper.setAttribute('role', 'option');
+            wrapper.setAttribute('aria-selected', String(isSelected));
+            wrapper.setAttribute('aria-label', label); // Accessibility fallback
+            if (isDisabled) {
+                wrapper.setAttribute('aria-disabled', 'true');
+            }
+            // Create context for the custom component
+            const context = {
+                item,
+                index,
+                value,
+                label,
+                isSelected,
+                isFocused,
+                isDisabled,
+                onSelect: (idx) => {
+                    if (!isDisabled) {
+                        this._config.onSelect(idx);
+                    }
+                },
+                onCustomEvent: (eventName, data) => {
+                    if (this._config.onCustomEvent) {
+                        this._config.onCustomEvent(index, eventName, data);
+                    }
+                }
+            };
+            // Acquire component from pool and mount it
+            try {
+                const component = this._pool.acquire(factory, item, index, context, wrapper);
+                // Get the component's root element and attach click handler to wrapper
+                const componentElement = component.getElement();
+                if (!isDisabled) {
+                    // Use event delegation on the wrapper
+                    wrapper.addEventListener('click', (e) => {
+                        // Only trigger if clicking within the component
+                        if (wrapper.contains(e.target)) {
+                            this._config.onSelect(index);
+                        }
+                    });
+                }
+                console.log(`[OptionRenderer] Rendered custom component option ${index}: ${label}`);
+            }
+            catch (error) {
+                console.error(`[OptionRenderer] Failed to render custom component at index ${index}:`, error);
+                // Fallback to lightweight rendering on error
+                wrapper.innerHTML = '';
+                wrapper.textContent = label;
+                wrapper.classList.add('component-error');
+                if (this._config.onError) {
+                    this._config.onError(index, error);
+                }
+            }
+            this._mountedElements.set(index, wrapper);
+            return wrapper;
+        }
+    }
+
     /**
      * Enhanced Select Component
      * Implements all advanced features: infinite scroll, load more, busy state,
@@ -1010,6 +1408,9 @@
             // Initialize styles BEFORE assembling DOM (order matters in shadow DOM)
             this._initializeStyles();
             console.log('[EnhancedSelect] Styles initialized');
+            // Initialize option renderer
+            this._initializeOptionRenderer();
+            console.log('[EnhancedSelect] Option renderer initialized');
             this._assembleDOM();
             console.log('[EnhancedSelect] DOM assembled');
             this._attachEventListeners();
@@ -1046,6 +1447,11 @@
                 clearTimeout(this._typeTimeout);
             if (this._searchTimeout)
                 clearTimeout(this._searchTimeout);
+            // Cleanup option renderer
+            if (this._optionRenderer) {
+                this._optionRenderer.unmountAll();
+                console.log('[EnhancedSelect] Option renderer cleaned up');
+            }
             // Cleanup arrow click listener
             if (this._boundArrowClick && this._arrowContainer) {
                 this._arrowContainer.removeEventListener('click', this._boundArrowClick);
@@ -1585,6 +1991,40 @@
                 }, { threshold: 0.1 });
             }
         }
+        _initializeOptionRenderer() {
+            const getValue = this._config.serverSide.getValueFromItem || ((item) => item?.value ?? item);
+            const getLabel = this._config.serverSide.getLabelFromItem || ((item) => item?.label ?? String(item));
+            const getDisabled = (item) => item?.disabled ?? false;
+            const rendererConfig = {
+                enableRecycling: true,
+                maxPoolSize: 100,
+                getValue,
+                getLabel,
+                getDisabled,
+                onSelect: (index) => {
+                    this._selectOption(index);
+                },
+                onCustomEvent: (index, eventName, data) => {
+                    console.log(`[EnhancedSelect] Custom event from option ${index}: ${eventName}`, data);
+                    // Emit as a generic event since these aren't in the standard event map
+                    this.dispatchEvent(new CustomEvent('option:custom-event', {
+                        detail: { index, eventName, data },
+                        bubbles: true,
+                        composed: true
+                    }));
+                },
+                onError: (index, error) => {
+                    console.error(`[EnhancedSelect] Error in option ${index}:`, error);
+                    this.dispatchEvent(new CustomEvent('option:mount-error', {
+                        detail: { index, error },
+                        bubbles: true,
+                        composed: true
+                    }));
+                }
+            };
+            this._optionRenderer = new OptionRenderer(rendererConfig);
+            console.log('[EnhancedSelect] Option renderer initialized with config:', rendererConfig);
+        }
         async _loadInitialSelectedItems() {
             if (!this._config.serverSide.fetchSelectedItems || !this._config.serverSide.initialSelectedValues) {
                 return;
@@ -2305,6 +2745,11 @@
             if (this._loadMoreTrigger && this._intersectionObserver) {
                 this._intersectionObserver.unobserve(this._loadMoreTrigger);
             }
+            // Cleanup all rendered options (including custom components)
+            if (this._optionRenderer) {
+                this._optionRenderer.unmountAll();
+                console.log('[EnhancedSelect] Unmounted all option components');
+            }
             // Clear options container
             console.log('[EnhancedSelect] Clearing options container, previous children:', this._optionsContainer.children.length);
             this._optionsContainer.innerHTML = '';
@@ -2421,28 +2866,23 @@
             console.log('[EnhancedSelect] _renderOptions complete, optionsContainer children:', this._optionsContainer.children.length);
         }
         _renderSingleOption(item, index, getValue, getLabel) {
-            const option = document.createElement('div');
-            option.className = 'option';
-            option.id = `${this._uniqueId}-option-${index}`;
-            const value = getValue(item);
-            const label = getLabel(item);
-            console.log('[EnhancedSelect] Rendering option', index, ':', { value, label });
-            option.textContent = label;
-            option.dataset.value = String(value);
-            option.dataset.index = String(index); // Also useful for debugging/selectors
-            // Check if selected using selectedItems map
-            const isSelected = this._state.selectedIndices.has(index);
-            if (isSelected) {
-                option.classList.add('selected');
-                option.setAttribute('aria-selected', 'true');
-            }
-            else {
-                option.setAttribute('aria-selected', 'false');
+            if (!this._optionRenderer) {
+                console.error('[EnhancedSelect] Option renderer not initialized');
+                return;
             }
-            option.addEventListener('click', () => {
-                this._selectOption(index);
+            // Check if selected
+            const isSelected = this._state.selectedIndices.has(index);
+            const isFocused = this._state.activeIndex === index;
+            console.log('[EnhancedSelect] Rendering option', index, ':', {
+                value: getValue(item),
+                label: getLabel(item),
+                isSelected,
+                isFocused,
+                hasCustomComponent: !!item.optionComponent
             });
-            this._optionsContainer.appendChild(option);
+            // Use the OptionRenderer to render both lightweight and custom component options
+            const optionElement = this._optionRenderer.render(item, index, isSelected, isFocused, this._uniqueId);
+            this._optionsContainer.appendChild(optionElement);
             console.log('[EnhancedSelect] Option', index, 'appended to optionsContainer');
         }
         _addLoadMoreTrigger() {
@@ -2480,920 +2920,6 @@
         customElements.define('enhanced-select', EnhancedSelect);
     }
 
-    /**
-     * Angular-Optimized Enhanced Select Component
-     *
-     * This is a specialized variant that uses light DOM instead of shadow DOM
-     * to ensure perfect compatibility with Angular's rendering pipeline and
-     * view encapsulation system.
-     *
-     * Key differences from standard EnhancedSelect:
-     * - Uses light DOM with scoped CSS classes
-     * - Integrates seamlessly with Angular's change detection
-     * - Maintains all core features (virtualization, accessibility, performance)
-     * - Uses unique class prefixes to avoid style conflicts
-     *
-     * @performance Optimized for Angular's zone.js and rendering cycle
-     * @accessibility Full WCAG 2.1 AAA compliance maintained
-     */
-    /**
-     * Angular-Enhanced Select Web Component
-     * Uses light DOM for Angular compatibility
-     */
-    class AngularEnhancedSelect extends HTMLElement {
-        constructor() {
-            super();
-            this._pageCache = {};
-            this._typeBuffer = '';
-            this._hasError = false;
-            this._errorMessage = '';
-            this._boundArrowClick = null;
-            this._isReady = false;
-            // Unique class prefix to avoid conflicts
-            this.PREFIX = 'smilodon-ang-';
-            console.log('[AngularEnhancedSelect] Constructor called');
-            this._uniqueId = `angular-select-${Math.random().toString(36).substr(2, 9)}`;
-            // Merge global config
-            this._config = selectConfig.getConfig();
-            // Initialize state
-            this._state = {
-                isOpen: false,
-                isBusy: false,
-                isSearching: false,
-                currentPage: this._config.infiniteScroll.initialPage || 1,
-                totalPages: 1,
-                selectedIndices: new Set(),
-                selectedItems: new Map(),
-                activeIndex: -1,
-                searchQuery: '',
-                loadedItems: [],
-                groupedItems: [],
-                preserveScrollPosition: false,
-                lastScrollPosition: 0,
-                lastNotifiedQuery: null,
-                lastNotifiedResultCount: 0,
-                isExpanded: false,
-            };
-            // Create DOM structure in light DOM
-            this._initializeStyles();
-            this._container = this._createContainer();
-            this._inputContainer = this._createInputContainer();
-            this._input = this._createInput();
-            this._arrowContainer = this._createArrowContainer();
-            this._dropdown = this._createDropdown();
-            this._optionsContainer = this._createOptionsContainer();
-            this._liveRegion = this._createLiveRegion();
-            this._assembleDOM();
-            this._attachEventListeners();
-            this._initializeObservers();
-        }
-        connectedCallback() {
-            console.log('[AngularEnhancedSelect] connectedCallback called');
-            // Ensure host has proper layout
-            if (!this.style.display) {
-                this.style.display = 'block';
-            }
-            if (!this.style.position) {
-                this.style.position = 'relative';
-            }
-            // Load initial data if server-side is enabled
-            if (this._config.serverSide.enabled && this._config.serverSide.initialSelectedValues) {
-                this._loadInitialSelectedItems();
-            }
-            // Mark element as ready
-            this._isReady = true;
-            console.log('[AngularEnhancedSelect] Element is now ready');
-        }
-        disconnectedCallback() {
-            // Cleanup observers
-            this._resizeObserver?.disconnect();
-            this._intersectionObserver?.disconnect();
-            if (this._busyTimeout)
-                clearTimeout(this._busyTimeout);
-            if (this._typeTimeout)
-                clearTimeout(this._typeTimeout);
-            if (this._searchTimeout)
-                clearTimeout(this._searchTimeout);
-            // Cleanup arrow click listener
-            if (this._boundArrowClick && this._arrowContainer) {
-                this._arrowContainer.removeEventListener('click', this._boundArrowClick);
-            }
-            // Remove style element
-            if (this._styleElement && this._styleElement.parentNode) {
-                this._styleElement.parentNode.removeChild(this._styleElement);
-            }
-        }
-        _initializeStyles() {
-            // Check if styles already exist for this component type
-            const existingStyle = document.head.querySelector('style[data-component="angular-enhanced-select-shared"]');
-            if (existingStyle) {
-                // Styles already injected, reuse the existing one
-                this._styleElement = existingStyle;
-                return;
-            }
-            // Create scoped styles for this component type (shared across all instances)
-            this._styleElement = document.createElement('style');
-            this._styleElement.setAttribute('data-component', 'angular-enhanced-select-shared');
-            const p = this.PREFIX; // shorthand
-            this._styleElement.textContent = `
-      /* Host styles - applied to <angular-enhanced-select> */
-      angular-enhanced-select {
-        display: block;
-        position: relative;
-        width: 100%;
-        min-height: 44px;
-        box-sizing: border-box;
-      }
-      
-      /* Container */
-      .${p}container {
-        position: relative;
-        width: 100%;
-        min-height: 44px;
-        box-sizing: border-box;
-      }
-      
-      /* Input Container */
-      .${p}input-container {
-        position: relative;
-        width: 100%;
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        gap: 6px;
-        padding: 6px 52px 6px 8px;
-        min-height: 44px;
-        background: white;
-        border: 1px solid #d1d5db;
-        border-radius: 6px;
-        box-sizing: border-box;
-        transition: all 0.2s ease;
-      }
-      
-      .${p}input-container:focus-within {
-        border-color: #667eea;
-        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-      }
-      
-      /* Gradient separator before arrow */
-      .${p}input-container::after {
-        content: '';
-        position: absolute;
-        top: 50%;
-        right: 40px;
-        transform: translateY(-50%);
-        width: 1px;
-        height: 60%;
-        background: linear-gradient(
-          to bottom,
-          transparent 0%,
-          rgba(0, 0, 0, 0.1) 20%,
-          rgba(0, 0, 0, 0.1) 80%,
-          transparent 100%
-        );
-        pointer-events: none;
-        z-index: 1;
-      }
-      
-      /* Dropdown Arrow Container */
-      .${p}arrow-container {
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 40px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        transition: background-color 0.2s ease;
-        border-radius: 0 4px 4px 0;
-        z-index: 2;
-      }
-      
-      .${p}arrow-container:hover {
-        background-color: rgba(102, 126, 234, 0.08);
-      }
-      
-      .${p}arrow {
-        width: 16px;
-        height: 16px;
-        color: #667eea;
-        transition: transform 0.2s ease, color 0.2s ease;
-        transform: translateY(0);
-      }
-      
-      .${p}arrow-container:hover .${p}arrow {
-        color: #667eea;
-      }
-      
-      .${p}arrow.${p}open {
-        transform: rotate(180deg);
-      }
-      
-      /* Input */
-      .${p}input {
-        flex: 1;
-        min-width: 120px;
-        padding: 4px;
-        border: none;
-        font-size: 14px;
-        line-height: 1.5;
-        color: #1f2937;
-        background: transparent;
-        box-sizing: border-box;
-        outline: none;
-      }
-      
-      .${p}input::placeholder {
-        color: #9ca3af;
-      }
-      
-      /* Selection Badges */
-      .${p}badge {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-        padding: 4px 8px;
-        margin: 2px;
-        background: #667eea;
-        color: white;
-        border-radius: 4px;
-        font-size: 13px;
-        line-height: 1;
-      }
-      
-      .${p}badge-remove {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        width: 16px;
-        height: 16px;
-        padding: 0;
-        margin-left: 4px;
-        background: rgba(255, 255, 255, 0.3);
-        border: none;
-        border-radius: 50%;
-        color: white;
-        font-size: 16px;
-        line-height: 1;
-        cursor: pointer;
-        transition: background 0.2s;
-      }
-      
-      .${p}badge-remove:hover {
-        background: rgba(255, 255, 255, 0.5);
-      }
-      
-      /* Dropdown */
-      .${p}dropdown {
-        position: absolute;
-        scroll-behavior: smooth;
-        top: 100%;
-        left: 0;
-        right: 0;
-        margin-top: 4px;
-        max-height: 300px;
-        overflow: hidden;
-        background: white;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-        z-index: 1000;
-        box-sizing: border-box;
-      }
-      
-      .${p}dropdown[style*="display: none"] {
-        display: none !important;
-      }
-      
-      /* Options Container */
-      .${p}options-container {
-        position: relative;
-        max-height: 300px;
-        overflow: auto;
-        transition: opacity 0.2s ease-in-out;
-      }
-
-      /* Option */
-      .${p}option {
-        padding: 8px 12px;
-        cursor: pointer;
-        color: inherit;
-        transition: background-color 0.15s ease;
-        user-select: none;
-      }
-
-      .${p}option:hover {
-        background-color: #f3f4f6;
-      }
-
-      .${p}option.${p}selected {
-        background-color: #e0e7ff;
-        color: #4338ca;
-        font-weight: 500;
-      }
-
-      .${p}option.${p}active {
-        background-color: #f3f4f6;
-      }
-      
-      /* Load More */
-      .${p}load-more-container {
-        padding: 12px;
-        text-align: center;
-        border-top: 1px solid #e0e0e0;
-      }
-      
-      .${p}load-more-button {
-        padding: 8px 16px;
-        border: 1px solid #1976d2;
-        background: white;
-        color: #1976d2;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 14px;
-        transition: all 0.2s ease;
-      }
-      
-      .${p}load-more-button:hover {
-        background: #1976d2;
-        color: white;
-      }
-      
-      .${p}load-more-button:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-      }
-      
-      /* Busy State */
-      .${p}busy-bucket {
-        padding: 16px;
-        text-align: center;
-        color: #666;
-      }
-      
-      .${p}spinner {
-        display: inline-block;
-        width: 20px;
-        height: 20px;
-        border: 2px solid #ccc;
-        border-top-color: #1976d2;
-        border-radius: 50%;
-        animation: ${p}spin 0.6s linear infinite;
-      }
-      
-      @keyframes ${p}spin {
-        to { transform: rotate(360deg); }
-      }
-      
-      /* Empty State */
-      .${p}empty-state {
-        padding: 24px;
-        text-align: center;
-        color: #999;
-      }
-      
-      /* Searching State */
-      .${p}searching-state {
-        padding: 24px;
-        text-align: center;
-        color: #667eea;
-        font-style: italic;
-        animation: ${p}pulse 1.5s ease-in-out infinite;
-      }
-      
-      @keyframes ${p}pulse {
-        0%, 100% { opacity: 1; }
-        50% { opacity: 0.5; }
-      }
-      
-      /* Error states */
-      .${p}input[aria-invalid="true"] {
-        border-color: #dc2626;
-      }
-      
-      .${p}input[aria-invalid="true"]:focus {
-        border-color: #dc2626;
-        box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
-        outline-color: #dc2626;
-      }
-      
-      /* Live Region (Screen reader only) */
-      .${p}live-region {
-        position: absolute;
-        left: -10000px;
-        width: 1px;
-        height: 1px;
-        overflow: hidden;
-        clip: rect(0, 0, 0, 0);
-        white-space: nowrap;
-        border-width: 0;
-      }
-      
-      /* Accessibility: Reduced motion */
-      @media (prefers-reduced-motion: reduce) {
-        .${p}arrow,
-        .${p}badge-remove,
-        .${p}option,
-        .${p}dropdown {
-          animation-duration: 0.01ms !important;
-          animation-iteration-count: 1 !important;
-          transition-duration: 0.01ms !important;
-        }
-      }
-      
-      /* Touch targets (WCAG 2.5.5) */
-      .${p}load-more-button,
-      .${p}option {
-        min-height: 44px;
-      }
-    `;
-            // Safely append to document head (check if document is ready and not already appended)
-            if (document.head && !this._styleElement.parentNode) {
-                try {
-                    document.head.appendChild(this._styleElement);
-                }
-                catch (e) {
-                    console.warn('[AngularEnhancedSelect] Could not inject styles:', e);
-                    // Fallback: inject after a delay
-                    setTimeout(() => {
-                        try {
-                            if (this._styleElement && !this._styleElement.parentNode) {
-                                document.head.appendChild(this._styleElement);
-                            }
-                        }
-                        catch (err) {
-                            console.error('[AngularEnhancedSelect] Style injection failed:', err);
-                        }
-                    }, 0);
-                }
-            }
-        }
-        _createContainer() {
-            const container = document.createElement('div');
-            container.className = `${this.PREFIX}container`;
-            return container;
-        }
-        _createInputContainer() {
-            const container = document.createElement('div');
-            container.className = `${this.PREFIX}input-container`;
-            return container;
-        }
-        _createInput() {
-            const input = document.createElement('input');
-            input.type = 'text';
-            input.className = `${this.PREFIX}input`;
-            input.placeholder = this.getAttribute('placeholder') || 'Select an option...';
-            input.setAttribute('readonly', '');
-            input.setAttribute('role', 'combobox');
-            input.setAttribute('aria-expanded', 'false');
-            input.setAttribute('aria-haspopup', 'listbox');
-            input.setAttribute('aria-autocomplete', 'none');
-            input.setAttribute('aria-controls', `${this._uniqueId}-listbox`);
-            input.setAttribute('aria-owns', `${this._uniqueId}-listbox`);
-            input.tabIndex = 0;
-            return input;
-        }
-        _createArrowContainer() {
-            const container = document.createElement('div');
-            container.className = `${this.PREFIX}arrow-container`;
-            const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-            svg.setAttribute('class', `${this.PREFIX}arrow`);
-            svg.setAttribute('width', '16');
-            svg.setAttribute('height', '16');
-            svg.setAttribute('viewBox', '0 0 16 16');
-            svg.setAttribute('fill', 'none');
-            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-            path.setAttribute('d', 'M4 6l4 4 4-4');
-            path.setAttribute('stroke', 'currentColor');
-            path.setAttribute('stroke-width', '2');
-            path.setAttribute('stroke-linecap', 'round');
-            path.setAttribute('stroke-linejoin', 'round');
-            svg.appendChild(path);
-            container.appendChild(svg);
-            return container;
-        }
-        _createDropdown() {
-            const dropdown = document.createElement('div');
-            dropdown.id = `${this._uniqueId}-listbox`;
-            dropdown.className = `${this.PREFIX}dropdown`;
-            dropdown.style.display = 'none';
-            dropdown.setAttribute('role', 'listbox');
-            return dropdown;
-        }
-        _createOptionsContainer() {
-            const container = document.createElement('div');
-            container.className = `${this.PREFIX}options-container`;
-            return container;
-        }
-        _createLiveRegion() {
-            const region = document.createElement('div');
-            region.className = `${this.PREFIX}live-region`;
-            region.setAttribute('role', 'status');
-            region.setAttribute('aria-live', 'polite');
-            region.setAttribute('aria-atomic', 'true');
-            return region;
-        }
-        _assembleDOM() {
-            // Assemble in light DOM
-            this._inputContainer.appendChild(this._input);
-            this._inputContainer.appendChild(this._arrowContainer);
-            this._container.appendChild(this._inputContainer);
-            this._dropdown.appendChild(this._optionsContainer);
-            this._container.appendChild(this._dropdown);
-            this._container.appendChild(this._liveRegion);
-            this.appendChild(this._container);
-        }
-        _attachEventListeners() {
-            // Arrow click handler
-            if (this._arrowContainer) {
-                this._boundArrowClick = (e) => {
-                    e.stopPropagation();
-                    e.preventDefault();
-                    const wasOpen = this._state.isOpen;
-                    this._state.isOpen = !this._state.isOpen;
-                    this._updateDropdownVisibility();
-                    this._updateArrowRotation();
-                    if (this._state.isOpen && this._config.callbacks.onOpen) {
-                        this._config.callbacks.onOpen();
-                    }
-                    else if (!this._state.isOpen && this._config.callbacks.onClose) {
-                        this._config.callbacks.onClose();
-                    }
-                    if (!wasOpen && this._state.isOpen && this._state.selectedIndices.size > 0) {
-                        setTimeout(() => this._scrollToSelected(), 50);
-                    }
-                };
-                this._arrowContainer.addEventListener('click', this._boundArrowClick);
-            }
-            // Input focus handler
-            this._input.addEventListener('focus', () => {
-                if (!this._state.isOpen) {
-                    this._state.isOpen = true;
-                    this._updateDropdownVisibility();
-                    this._updateArrowRotation();
-                    if (this._config.callbacks.onOpen) {
-                        this._config.callbacks.onOpen();
-                    }
-                }
-            });
-            // Input keyboard handler
-            this._input.addEventListener('keydown', (e) => this._handleKeydown(e));
-            // Click outside to close
-            document.addEventListener('click', (e) => {
-                if (!this.contains(e.target) && this._state.isOpen) {
-                    this._state.isOpen = false;
-                    this._updateDropdownVisibility();
-                    this._updateArrowRotation();
-                    if (this._config.callbacks.onClose) {
-                        this._config.callbacks.onClose();
-                    }
-                }
-            });
-            // Search handler
-            if (this.hasAttribute('searchable')) {
-                this._input.removeAttribute('readonly');
-                this._input.addEventListener('input', (e) => {
-                    const query = e.target.value;
-                    this._handleSearch(query);
-                });
-            }
-        }
-        _initializeObservers() {
-            // Resize observer for dropdown positioning
-            if (typeof ResizeObserver !== 'undefined') {
-                this._resizeObserver = new ResizeObserver(() => {
-                    if (this._state.isOpen) {
-                        this._updateDropdownPosition();
-                    }
-                });
-                this._resizeObserver.observe(this);
-            }
-        }
-        _updateDropdownVisibility() {
-            if (this._state.isOpen) {
-                this._dropdown.style.display = 'block';
-                this._input.setAttribute('aria-expanded', 'true');
-                this._updateDropdownPosition();
-            }
-            else {
-                this._dropdown.style.display = 'none';
-                this._input.setAttribute('aria-expanded', 'false');
-            }
-        }
-        _updateDropdownPosition() {
-            // Ensure dropdown is positioned correctly relative to input
-            const rect = this._inputContainer.getBoundingClientRect();
-            const viewportHeight = window.innerHeight;
-            const spaceBelow = viewportHeight - rect.bottom;
-            const spaceAbove = rect.top;
-            // Auto placement
-            if (spaceBelow < 300 && spaceAbove > spaceBelow) {
-                // Open upward
-                this._dropdown.style.top = 'auto';
-                this._dropdown.style.bottom = '100%';
-                this._dropdown.style.marginTop = '0';
-                this._dropdown.style.marginBottom = '4px';
-            }
-            else {
-                // Open downward (default)
-                this._dropdown.style.top = '100%';
-                this._dropdown.style.bottom = 'auto';
-                this._dropdown.style.marginTop = '4px';
-                this._dropdown.style.marginBottom = '0';
-            }
-        }
-        _updateArrowRotation() {
-            const arrow = this._arrowContainer?.querySelector(`.${this.PREFIX}arrow`);
-            if (arrow) {
-                if (this._state.isOpen) {
-                    arrow.classList.add(`${this.PREFIX}open`);
-                }
-                else {
-                    arrow.classList.remove(`${this.PREFIX}open`);
-                }
-            }
-        }
-        _handleKeydown(e) {
-            // Implement keyboard navigation
-            switch (e.key) {
-                case 'ArrowDown':
-                    e.preventDefault();
-                    if (!this._state.isOpen) {
-                        this._state.isOpen = true;
-                        this._updateDropdownVisibility();
-                        this._updateArrowRotation();
-                    }
-                    else {
-                        this._moveActive(1);
-                    }
-                    break;
-                case 'ArrowUp':
-                    e.preventDefault();
-                    if (this._state.isOpen) {
-                        this._moveActive(-1);
-                    }
-                    break;
-                case 'Enter':
-                    e.preventDefault();
-                    if (this._state.isOpen && this._state.activeIndex >= 0) {
-                        this._selectByIndex(this._state.activeIndex);
-                    }
-                    else {
-                        this._state.isOpen = true;
-                        this._updateDropdownVisibility();
-                        this._updateArrowRotation();
-                    }
-                    break;
-                case 'Escape':
-                    e.preventDefault();
-                    if (this._state.isOpen) {
-                        this._state.isOpen = false;
-                        this._updateDropdownVisibility();
-                        this._updateArrowRotation();
-                    }
-                    break;
-                case 'Tab':
-                    if (this._state.isOpen) {
-                        this._state.isOpen = false;
-                        this._updateDropdownVisibility();
-                        this._updateArrowRotation();
-                    }
-                    break;
-            }
-        }
-        _moveActive(direction) {
-            const options = this._optionsContainer.querySelectorAll(`.${this.PREFIX}option`);
-            if (options.length === 0)
-                return;
-            let newIndex = this._state.activeIndex + direction;
-            if (newIndex < 0)
-                newIndex = 0;
-            if (newIndex >= options.length)
-                newIndex = options.length - 1;
-            this._state.activeIndex = newIndex;
-            // Update visual active state
-            options.forEach((opt, idx) => {
-                if (idx === newIndex) {
-                    opt.classList.add(`${this.PREFIX}active`);
-                    opt.scrollIntoView({ block: 'nearest' });
-                }
-                else {
-                    opt.classList.remove(`${this.PREFIX}active`);
-                }
-            });
-        }
-        _selectByIndex(index) {
-            const item = this._state.loadedItems[index];
-            if (!item)
-                return;
-            const isMultiple = this.hasAttribute('multiple');
-            if (isMultiple) {
-                // Toggle selection
-                if (this._state.selectedIndices.has(index)) {
-                    this._state.selectedIndices.delete(index);
-                    this._state.selectedItems.delete(index);
-                }
-                else {
-                    this._state.selectedIndices.add(index);
-                    this._state.selectedItems.set(index, item);
-                }
-            }
-            else {
-                // Single selection
-                this._state.selectedIndices.clear();
-                this._state.selectedItems.clear();
-                this._state.selectedIndices.add(index);
-                this._state.selectedItems.set(index, item);
-                // Close dropdown
-                this._state.isOpen = false;
-                this._updateDropdownVisibility();
-                this._updateArrowRotation();
-            }
-            this._updateInputDisplay();
-            this._renderOptions();
-            this._emitChangeEvent();
-        }
-        _updateInputDisplay() {
-            const selectedItems = Array.from(this._state.selectedItems.values());
-            const isMultiple = this.hasAttribute('multiple');
-            if (isMultiple) {
-                // Clear input, show badges
-                this._input.value = '';
-                // Remove existing badges
-                this._inputContainer.querySelectorAll(`.${this.PREFIX}badge`).forEach(badge => badge.remove());
-                // Add new badges
-                selectedItems.forEach((item, idx) => {
-                    const badge = document.createElement('span');
-                    badge.className = `${this.PREFIX}badge`;
-                    badge.textContent = item.label;
-                    const removeBtn = document.createElement('button');
-                    removeBtn.className = `${this.PREFIX}badge-remove`;
-                    removeBtn.textContent = '×';
-                    removeBtn.addEventListener('click', (e) => {
-                        e.stopPropagation();
-                        const itemIndex = Array.from(this._state.selectedItems.keys())[idx];
-                        this._state.selectedIndices.delete(itemIndex);
-                        this._state.selectedItems.delete(itemIndex);
-                        this._updateInputDisplay();
-                        this._renderOptions();
-                        this._emitChangeEvent();
-                    });
-                    badge.appendChild(removeBtn);
-                    this._inputContainer.insertBefore(badge, this._input);
-                });
-            }
-            else {
-                // Single selection - show label in input
-                if (selectedItems.length > 0) {
-                    this._input.value = selectedItems[0].label;
-                }
-                else {
-                    this._input.value = '';
-                }
-            }
-        }
-        _renderOptions() {
-            // Clear existing options
-            this._optionsContainer.innerHTML = '';
-            const items = this._state.loadedItems;
-            if (items.length === 0) {
-                const emptyDiv = document.createElement('div');
-                emptyDiv.className = `${this.PREFIX}empty-state`;
-                emptyDiv.textContent = 'No options available';
-                this._optionsContainer.appendChild(emptyDiv);
-                return;
-            }
-            // Render options
-            items.forEach((item, index) => {
-                const optionDiv = document.createElement('div');
-                optionDiv.className = `${this.PREFIX}option`;
-                optionDiv.textContent = item.label;
-                optionDiv.setAttribute('role', 'option');
-                optionDiv.setAttribute('data-index', String(index));
-                if (this._state.selectedIndices.has(index)) {
-                    optionDiv.classList.add(`${this.PREFIX}selected`);
-                    optionDiv.setAttribute('aria-selected', 'true');
-                }
-                if (item.disabled) {
-                    optionDiv.style.opacity = '0.5';
-                    optionDiv.style.cursor = 'not-allowed';
-                }
-                else {
-                    optionDiv.addEventListener('click', () => {
-                        this._selectByIndex(index);
-                    });
-                }
-                this._optionsContainer.appendChild(optionDiv);
-            });
-        }
-        _handleSearch(query) {
-            this._state.searchQuery = query;
-            // Filter items based on search
-            const allItems = this._state.loadedItems;
-            const filtered = allItems.filter(item => item.label.toLowerCase().includes(query.toLowerCase()));
-            // Temporarily replace loaded items with filtered
-            this._state.loadedItems;
-            this._state.loadedItems = filtered;
-            this._renderOptions();
-            // Emit search event
-            this.dispatchEvent(new CustomEvent('search', {
-                detail: { query },
-                bubbles: true,
-                composed: true,
-            }));
-        }
-        _emitChangeEvent() {
-            const selectedItems = Array.from(this._state.selectedItems.values());
-            const selectedValues = selectedItems.map(item => item.value);
-            const selectedIndices = Array.from(this._state.selectedIndices);
-            this.dispatchEvent(new CustomEvent('change', {
-                detail: { selectedItems, selectedValues, selectedIndices },
-                bubbles: true,
-                composed: true,
-            }));
-        }
-        _scrollToSelected() {
-            const firstSelected = this._optionsContainer.querySelector(`.${this.PREFIX}selected`);
-            if (firstSelected) {
-                firstSelected.scrollIntoView({ block: 'nearest' });
-            }
-        }
-        _loadInitialSelectedItems() {
-            // Placeholder for server-side data loading
-        }
-        _announce(message) {
-            if (this._liveRegion) {
-                this._liveRegion.textContent = message;
-                setTimeout(() => {
-                    if (this._liveRegion)
-                        this._liveRegion.textContent = '';
-                }, 1000);
-            }
-        }
-        // Public API methods
-        isReady() {
-            return this._isReady;
-        }
-        setItems(items) {
-            this._state.loadedItems = items;
-            this._renderOptions();
-        }
-        setGroupedItems(groups) {
-            this._state.groupedItems = groups;
-            // Flatten for now
-            const items = [];
-            groups.forEach(group => {
-                if (group.items) {
-                    items.push(...group.items);
-                }
-            });
-            this.setItems(items);
-        }
-        setSelectedValues(values) {
-            this._state.selectedIndices.clear();
-            this._state.selectedItems.clear();
-            values.forEach(value => {
-                const index = this._state.loadedItems.findIndex(item => item.value === value);
-                if (index >= 0) {
-                    this._state.selectedIndices.add(index);
-                    this._state.selectedItems.set(index, this._state.loadedItems[index]);
-                }
-            });
-            this._updateInputDisplay();
-            this._renderOptions();
-        }
-        getSelectedValues() {
-            return Array.from(this._state.selectedItems.values()).map(item => item.value);
-        }
-        updateConfig(config) {
-            this._config = { ...this._config, ...config };
-        }
-        setError(message) {
-            this._hasError = true;
-            this._errorMessage = message;
-            this._input.setAttribute('aria-invalid', 'true');
-            this._announce(`Error: ${message}`);
-        }
-        clearError() {
-            this._hasError = false;
-            this._errorMessage = '';
-            this._input.removeAttribute('aria-invalid');
-        }
-    }
-    // Register the custom element
-    console.log('[AngularEnhancedSelect] Attempting to register custom element...');
-    console.log('[AngularEnhancedSelect] customElements available:', typeof customElements !== 'undefined');
-    console.log('[AngularEnhancedSelect] Already registered:', customElements?.get('angular-enhanced-select'));
-    if (typeof customElements !== 'undefined' && !customElements.get('angular-enhanced-select')) {
-        customElements.define('angular-enhanced-select', AngularEnhancedSelect);
-        console.log('[AngularEnhancedSelect] Successfully registered custom element');
-    }
-    else if (customElements?.get('angular-enhanced-select')) {
-        console.log('[AngularEnhancedSelect] Custom element already registered');
-    }
-
     /**
      * Independent Option Component
      * High cohesion, low coupling - handles its own selection state and events
@@ -4656,12 +4182,13 @@
         }
     }
 
-    exports.AngularEnhancedSelect = AngularEnhancedSelect;
     exports.CSPFeatures = CSPFeatures;
+    exports.CustomOptionPool = CustomOptionPool;
     exports.DOMPool = DOMPool;
     exports.EnhancedSelect = EnhancedSelect;
     exports.FenwickTree = FenwickTree;
     exports.NativeSelectElement = NativeSelectElement;
+    exports.OptionRenderer = OptionRenderer;
     exports.PerformanceTelemetry = PerformanceTelemetry;
     exports.SelectOption = SelectOption;
     exports.Virtualizer = Virtualizer;